.roof-studio { max-width:1680px; margin:0 auto; padding:145px 48px 70px; }
.roof-studio-intro { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:30px; }
.roof-studio-intro .eyebrow { margin-bottom:12px; }
.roof-studio-intro h1 { font-size:clamp(38px,4.2vw,64px); font-weight:500; letter-spacing:-.055em; line-height:1.06; }
.roof-studio-intro>p { font-size:14px; max-width:285px; padding-bottom:3px; line-height:1.7; }
.roof-studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:34px; align-items:start; }
.roof-viewer { position:sticky; top:116px; }
.roof-stage { position:relative; height:clamp(480px,66svh,760px); border:1px solid #dce3de; border-radius:24px; overflow:hidden; background:radial-gradient(ellipse at 50% 36%,#fbfcf8 0%,#edf1ec 56%,#e0e7e2 100%); }
.roof-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:grab; transition:opacity .5s; }
.roof-canvas:active { cursor:grabbing; }
.roof-canvas:focus-visible { outline-offset:-4px; }
[data-render-state=ready] .roof-canvas { opacity:1; }
.roof-reference-house { position:absolute; width:90%; height:90%; object-fit:contain; inset:5%; opacity:.32; }
[data-render-state=ready] .roof-reference-house { display:none; }
.roof-stage-tag { position:absolute; top:24px; left:26px; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#63736b; pointer-events:none; }
.roof-loading { position:absolute; inset:0; display:none; flex-direction:column; gap:18px; align-items:center; justify-content:center; background:#edf1eceb; }
[data-render-state=loading] .roof-loading { display:flex; }
.roof-loading img { width:54px; height:58px; }
.roof-loading span { color:#687970; font-size:12px; }
[data-render-state=ready] .roof-loading,[data-render-state=fallback] .roof-loading { display:none; }
.roof-view-tools { position:absolute; bottom:22px; left:24px; right:24px; display:flex; justify-content:space-between; gap:10px; pointer-events:none; }
.roof-view-segment,.roof-zoom { display:flex; padding:4px; gap:3px; border:1px solid #d4ded4; border-radius:12px; background:#ffffffdf; box-shadow:0 3px 8px #1e382508; pointer-events:auto; }
.roof-view-tools button { border:0; background:transparent; border-radius:8px; min-height:36px; padding:0 15px; font-size:11px; font-weight:500; color:#4a6053; }
.roof-view-tools button[aria-pressed=true] { color:#fff; background:#244737; }
.roof-view-tools button:hover:not(:disabled) { background:#dce5dc; color:#244737; }
.roof-view-tools button:disabled { opacity:.4; cursor:default; }
.roof-zoom button { width:36px; padding:0; font-size:20px; }
.roof-viewer-caption { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 4px 0; font-size:11px; color:#6d796f; }
.roof-viewer-caption button { padding:3px 0; border:0; border-bottom:1px solid #87948c; background:none; color:#375742; font-size:11px; }
.roof-render-status { margin:10px 4px 0; font-size:12px; color:#77523c; }
.roof-render-status:empty { display:none; }
.roof-retry { margin:12px 0; padding:8px 16px; border:1px solid #c4ccc3; border-radius:6px; background:#fff; }
.roof-panel { padding:6px 0 0; }
.finish-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.finish-tabs button { position:relative; padding:0 0 14px; border:0; background:none; color:#7b857d; font-size:14px; font-weight:500; }
.finish-tabs button[aria-selected=true] { color:#244737; }
.finish-tabs button[aria-selected=true]:after { content:''; position:absolute; height:2px; bottom:-1px; left:0; right:0; background:#244737; }
.roof-panel [role=tabpanel][hidden], .roof-swatch[hidden] { display:none; }
#exterior-finishes>fieldset:first-child { margin-top:0; }
.roof-panel .exterior-swatches { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.exterior-swatches .roof-swatch img { height:52px; }
.exterior-swatches .roof-swatch-name { font-size:10px; gap:3px; }
.exterior-swatches .roof-swatch-name:after { width:11px; height:11px; flex-shrink:0; }
.roof-brand { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); font-size:11px; color:#728176; }
.roof-brand strong { display:inline-flex; align-items:center; justify-content:center; font-size:15px; letter-spacing:-.04em; background:#fff; border:1px solid #dce2da; padding:5px 13px; border-radius:6px; color:#293f32; }
.roof-panel fieldset { padding:0; border:0; margin:22px 0 0; min-width:0; }
.roof-panel legend { margin-bottom:12px; padding:0; font-size:12px; font-weight:500; color:#364c3d; }
.roof-range-options { display:flex; gap:4px; padding:4px; border-radius:10px; background:#eaf0e8; }
.roof-range-options label { flex:1; cursor:pointer; position:relative; }
.roof-range-options input,.roof-swatch input { position:absolute; opacity:0; width:1px; height:1px; }
.roof-range-options span { display:flex; align-items:center; justify-content:center; padding:10px 5px; height:38px; white-space:nowrap; border-radius:7px; color:#728070; font-size:11px; font-weight:500; }
.roof-range-options input:checked+span { color:#24432e; background:#fff; box-shadow:0 2px 5px #263b2510; }
.roof-range-options input:focus-visible+span,.roof-swatch input:focus-visible+span { outline:2px solid #476872; outline-offset:3px; }
.roof-selected-name { padding-top:25px; }
.roof-selected-name>p { font-size:11px; margin-bottom:5px; color:#718175; }
.roof-selected-name h2 { font-size:38px; font-weight:500; letter-spacing:-.05em; }
.roof-selected-name .roof-color-description { font-size:12px; line-height:1.6; margin:10px 0 0; min-height:38px; max-width:295px; }
.roof-swatches { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.roof-swatch { position:relative; cursor:pointer; }
.roof-swatch>span { display:block; padding:5px; border:1px solid #dce3d9; border-radius:10px; background:#fff; transition:border-color .2s,box-shadow .2s; }
.roof-swatch input:checked+span { border-color:#36553c; box-shadow:0 0 0 1px #36553c; }
.roof-swatch img { width:100%; height:66px; object-fit:cover; border-radius:5px; }
.roof-swatch-name { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:9px 3px 4px; font-size:11px; color:#48604c; }
.roof-swatch-name:after { content:''; display:block; width:13px; height:13px; border:1px solid #ced7cb; border-radius:50%; }
.roof-swatch input:checked+span .roof-swatch-name:after { background:#36553c; border-color:#36553c; box-shadow:inset 0 0 0 3px #fff; }
.roof-selection-summary { display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.roof-selection-summary img { width:36px; height:36px; object-fit:cover; border-radius:50%; }
.roof-selection-summary p { font-size:11px; line-height:1.5; color:#485d4e; }
.roof-sample-note { margin-top:18px; font-size:11px; color:#778176; line-height:1.65; }
.roof-sample-note a { display:inline-block; margin-top:8px; color:#41614a; border-bottom:1px solid #b6c4b5; }
.roof-studio-bottom { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-top:42px; border-top:1px solid var(--line); padding:25px 0 0; font-size:12px; color:#798478; }
.roof-studio-bottom .text-link { font-size:12px; }
.roof-noscript { font-size:13px; padding:16px 0; }
@media(min-width:1600px) { .roof-studio-layout { grid-template-columns:minmax(0,1fr) 370px; gap:44px; }.roof-swatch img { height:80px; } }
@media(max-width:1080px) { .roof-studio { padding:130px 28px 55px; }.roof-studio-layout { grid-template-columns:minmax(0,1fr) 300px; gap:24px; }.roof-stage { height:540px; }.roof-view-tools { left:14px; right:14px; }.roof-view-tools button { padding:0 10px; } }
@media(max-width:800px) {
 .roof-studio { padding:112px 20px 40px; }.roof-studio-intro { display:block; margin-bottom:24px; }.roof-studio-intro h1 { font-size:40px; }.roof-studio-intro>p { margin-top:15px; max-width:360px; font-size:13px; }
 .roof-studio-layout { display:block; }.roof-viewer { position:sticky; top:90px; z-index:2; padding-bottom:12px; background:var(--paper); }.roof-stage { height:clamp(240px,34svh,310px); border-radius:18px; }.roof-stage-tag { top:18px; left:18px; font-size:9px; }.roof-view-tools { bottom:15px; }
 .roof-panel { margin-top:30px; }.roof-brand { padding-bottom:16px; }.roof-selected-name h2 { font-size:36px; }.roof-swatches { grid-template-columns:repeat(4,1fr); gap:9px; }.roof-swatch img { height:64px; }.roof-swatch-name { font-size:10px; }.roof-swatch-name:after { display:none; }
 .roof-studio-bottom { align-items:start; flex-direction:column; gap:12px; }.roof-color-description { min-height:0!important; }.roof-sample-note { max-width:450px; }
}
@media(max-width:450px) { .roof-studio-intro h1 { font-size:35px; }.roof-swatches { grid-template-columns:repeat(2,1fr); }.roof-swatch img { height:76px; }.roof-swatch-name { font-size:11px; }.roof-swatch-name:after { display:block; }.roof-viewer-caption { font-size:10px; }.roof-view-tools button { padding:0 11px; }.roof-zoom button { width:32px; padding:0; } }
@media(prefers-reduced-motion:reduce) { .roof-canvas,.roof-swatch>span { transition:none; } }