.roof-lab{border-top:1px solid var(--line);background:var(--paper)}.roof-lab-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:65px;align-items:end;margin-bottom:42px}.roof-lab-heading>p{font-size:13px;line-height:1.9;color:var(--muted);max-width:360px;padding-bottom:5px}.roof-lab-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:stretch}.roof-model-panel{position:relative;min-width:0;background:#263a30;color:var(--paper);overflow:hidden;display:flex;flex-direction:column;--roof-tile:#ad7651;--roof-tile-dark:#744c34;--roof-trim:#9e6947;--roof-ridge:#c6956c}.roof-model-panel:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#d9e4d40a 1px,transparent 1px),linear-gradient(90deg,#d9e4d40a 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent,#000 28%,#000 75%,transparent);pointer-events:none}.roof-model-top,.roof-model-bottom{position:relative;z-index:1;display:flex;align-items:center;gap:9px;font-size:7px;letter-spacing:1.3px;line-height:1.5;color:#b6c3b1}.roof-model-top{padding:25px 25px 0;justify-content:space-between}.roof-live-dot{white-space:nowrap;display:flex;align-items:center;gap:6px}.roof-live-dot:before{content:'';width:4px;height:4px;background:#c5b491;border-radius:50%}.roof-model-reading{position:absolute;top:62px;left:25px;display:flex;flex-direction:column;z-index:1;pointer-events:none}.roof-model-reading>span:first-child{font:400 72px/.85 var(--serif);letter-spacing:-3px}.roof-model-reading small{font-size:37px;vertical-align:top;line-height:.8;margin-left:3px}.roof-model-reading>span:last-child{font-size:7px;letter-spacing:2px;color:#a9b9a3;margin-top:13px}.roof-model{display:block;width:100%;height:auto;max-width:100%;flex:1;min-height:420px;margin-top:7px;fill:none;stroke:none;stroke-width:0;overflow:visible;filter:drop-shadow(0 10px 12px #10261a20)}.roof-model path{stroke-linejoin:round}.roof-ground-line{stroke:#8d9e7d;stroke-width:.8;opacity:.6}.roof-left-base{fill:var(--roof-tile-dark)}.roof-right-base{fill:var(--roof-tile)}.roof-front-edge{stroke:var(--roof-trim);stroke-width:9;stroke-linecap:square}.roof-ridge{stroke:var(--roof-ridge);stroke-width:5;stroke-linecap:round}.roof-eave{stroke:var(--roof-trim);stroke-width:6;stroke-linecap:square}.roof-tile{fill:var(--roof-tile);transition:fill .7s}.roof-tile.alt{fill:var(--roof-tile-dark)}.roof-left-tile{fill:var(--roof-tile-dark);transition:fill .7s}.roof-left-tile.alt{fill:var(--roof-tile)}.roof-tile-joint{stroke:#23352c;stroke-width:.7;opacity:.6;vector-effect:non-scaling-stroke;fill:none}.roof-grain{stroke:#e5ba89;stroke-width:.35;opacity:.3;vector-effect:non-scaling-stroke;fill:none}.roof-angle-reference{fill:none;stroke:#d4d9c2;stroke-width:1;stroke-dasharray:4 4;opacity:.7}.roof-angle-reference text{fill:#c4cfb6;stroke:none;font:400 9px var(--sans);letter-spacing:1px}.roof-model-bottom{padding:20px 25px;border-top:1px solid #c7d1bb26;min-height:62px}.roof-model-bottom>span:last-child{margin-left:auto;font-size:6px;letter-spacing:1.1px}.roof-material-swatch{width:12px;height:12px;background:#ad7651;transition:background .7s;flex:none}.roof-model-panel[data-roof-age="aged"]{--roof-tile:#a9aca0;--roof-tile-dark:#727e74;--roof-trim:#7b897d;--roof-ridge:#c2c5b5}.roof-model-panel[data-roof-age="aged"] .roof-material-swatch{background:#a9aca0}.roof-model-panel[data-roof-age="aged"] .roof-grain{stroke:#dce0d0}.roof-controls{padding:8px 0;min-width:0;align-self:center}.roof-control-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.roof-control-heading>.eyebrow{font-size:8px;letter-spacing:1.4px}.roof-control-index{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.roof-age-toggle{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);gap:20px}.roof-age-toggle button{min-height:48px;padding:0 0 12px;background:transparent;display:flex;align-items:center;gap:9px;font-size:11px;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap}.roof-age-toggle button[aria-pressed="true"]{border-color:var(--rust);color:var(--ink)}.roof-color-dot{width:11px;height:11px;display:inline-block;border-radius:50%;flex:none}.roof-color-dot.new{background:#a87650}.roof-color-dot.aged{background:#a2a99a}.roof-age-description{font-size:10px;line-height:1.8;color:var(--muted);min-height:36px;margin-top:13px}.roof-pitch-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:25px;margin-bottom:12px}.roof-pitch-label label{font-size:8px;letter-spacing:1.3px;font-weight:600}.roof-pitch-label output{font:500 59px/.9 var(--serif);color:var(--rust);letter-spacing:-2px}.roof-pitch-label output span{font-size:37px;vertical-align:top;line-height:.8}.roof-pitch-slider{display:block;appearance:none;-webkit-appearance:none;height:30px;background:transparent;cursor:ew-resize;width:100%;margin:0;border:0;border-radius:0;touch-action:pan-y}.roof-pitch-slider::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--rust) var(--roof-progress),#cfd4c4 var(--roof-progress))}.roof-pitch-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;background:var(--paper);border:5px solid var(--rust);border-radius:50%;margin-top:-8px;box-shadow:0 0 0 5px #f6f4ee;transition:box-shadow .2s}.roof-pitch-slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px #e8e5d8}.roof-pitch-slider::-moz-range-track{height:3px;background:#cfd4c4}.roof-pitch-slider::-moz-range-progress{height:3px;background:var(--rust)}.roof-pitch-slider::-moz-range-thumb{width:11px;height:11px;background:var(--paper);border:5px solid var(--rust);border-radius:50%}.roof-pitch-presets{position:relative;height:55px;margin-top:1px}.roof-pitch-presets button{position:absolute;top:0;min-width:32px;min-height:44px;padding:0;background:none;color:var(--muted);font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.roof-pitch-presets button:first-child{left:-7px}.roof-pitch-presets button:nth-child(2){left:13.333%;transform:translateX(-50%)}.roof-pitch-presets button:nth-child(3){left:66.667%;transform:translateX(-50%)}.roof-pitch-presets button:last-child{right:-7px}.roof-pitch-presets button span{font-size:5px;letter-spacing:.5px;position:absolute;top:36px}.roof-pitch-presets button:hover{color:var(--rust)}.roof-guidance{padding:20px 0 0;margin:12px 0 23px;border-top:1px solid var(--line);min-height:156px}.roof-guidance-label{font-size:7px;letter-spacing:1.3px;color:var(--rust);font-weight:600}.roof-guidance h3{font-size:29px;line-height:1.1;letter-spacing:-.3px;margin:12px 0}.roof-guidance p{font-size:11px;line-height:1.9;color:var(--muted)}.roof-quote{width:100%;margin-bottom:15px}.roof-lab-note{font-size:8px;line-height:1.9;color:var(--muted)}.roof-lab-note a{border-bottom:1px solid #b5bcaa;white-space:nowrap}.roof-lab-note a:hover{color:var(--rust)}
@media(max-width:1150px){.roof-lab-layout{gap:40px;grid-template-columns:1.15fr 1fr}.roof-model-top{padding:23px 20px 0;font-size:6px;letter-spacing:1px}.roof-model-bottom{padding:18px 20px;font-size:6px}.roof-model-bottom>span:last-child{font-size:5px}.roof-model-reading{left:20px}.roof-model{min-height:390px}.roof-lab-heading{gap:40px}.roof-lab-heading>p{font-size:12px}.roof-guidance{min-height:170px}}
@media(max-width:900px){.roof-lab-layout{grid-template-columns:1fr;gap:35px}.roof-model-panel{min-height:470px}.roof-model{width:min(100%,680px);min-height:0;max-height:500px;margin-inline:auto}.roof-model-top{font-size:7px;padding:25px 25px 0}.roof-model-reading{left:30px;top:70px}.roof-model-bottom{font-size:7px;padding:20px 25px}.roof-model-bottom>span:last-child{font-size:6px}.roof-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;align-items:start}.roof-control-heading,.roof-age-toggle,.roof-age-description{grid-column:1;grid-row:auto}.roof-pitch-label{grid-column:2;grid-row:1/3;margin:0 0 12px;align-self:start;height:64px}.roof-pitch-slider{grid-column:2;grid-row:3;align-self:start}.roof-pitch-presets{grid-column:2;grid-row:4}.roof-age-description{grid-row:4;margin-top:8px}.roof-guidance{grid-column:1/3;min-height:0;margin-top:23px;padding-bottom:0}.roof-quote{grid-column:1/3;max-width:370px}.roof-lab-note{grid-column:1/3;font-size:9px;max-width:600px}.roof-lab-heading h2{font-size:54px}.roof-lab-heading{grid-template-columns:1.2fr 1fr}}
@media(max-width:640px){.roof-lab-heading{display:block;margin-bottom:29px}.roof-lab-heading h2{font-size:48px;letter-spacing:-1.5px}.roof-lab-heading>p{margin-top:22px;font-size:12px;max-width:none}.roof-lab-layout{gap:28px}.roof-model-panel{min-height:0}.roof-model{min-height:0;width:100%;margin-top:35px;margin-bottom:6px}.roof-model-top{padding:18px 17px 0;font-size:5px;letter-spacing:.9px}.roof-live-dot{gap:4px}.roof-model-reading{left:18px;top:51px}.roof-model-reading>span:first-child{font-size:54px;letter-spacing:-2px}.roof-model-reading small{font-size:29px}.roof-model-reading>span:last-child{font-size:6px;margin-top:9px;letter-spacing:1.3px}.roof-model-bottom{padding:15px 17px;min-height:48px;font-size:5px;letter-spacing:1px}.roof-model-bottom>span:last-child{font-size:5px;letter-spacing:.5px}.roof-material-swatch{height:9px;width:9px}.roof-controls{display:block;padding:0}.roof-control-heading{margin-bottom:15px}.roof-age-toggle{gap:25px}.roof-age-toggle button{font-size:12px;min-height:48px}.roof-age-description{font-size:11px;min-height:0;margin-top:13px}.roof-pitch-label{height:auto;margin-top:28px;margin-bottom:16px}.roof-pitch-label label{font-size:8px}.roof-pitch-label output{font-size:62px}.roof-pitch-label output span{font-size:38px}.roof-pitch-slider{height:35px}.roof-pitch-presets{height:51px;margin-top:0}.roof-pitch-presets button{font-size:10px}.roof-guidance{margin-top:18px;margin-bottom:23px;padding-top:20px;min-height:167px}.roof-guidance-label{font-size:7px;letter-spacing:1px}.roof-guidance h3{font-size:29px;margin:12px 0}.roof-guidance p{font-size:11px}.roof-quote{max-width:none;min-height:55px;font-size:11px}.roof-lab-note{font-size:9px}.roof-angle-reference text{font-size:10px}.roof-lab .section-heading{margin-bottom:25px}}
@media(max-width:375px){.roof-lab-heading h2{font-size:43px}.roof-model-top{font-size:4.6px;letter-spacing:.6px;padding:17px 14px 0}.roof-model-bottom{padding:14px;font-size:4.7px;gap:6px}.roof-model-bottom>span:last-child{font-size:4.3px}.roof-model-reading{top:48px;left:15px}.roof-model-reading>span:first-child{font-size:47px}.roof-model-reading small{font-size:25px}.roof-age-toggle button{font-size:11px}.roof-guidance{min-height:183px}}
@media(prefers-reduced-motion:reduce){.roof-tile,.roof-left-tile,.roof-material-swatch{transition:none}}