header nav{gap:18px;font-size:14px}header{gap:25px}.brand{flex-shrink:0}.program-notice{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:23px 6%;background:#203f55;border-block:1px solid #4c7189}.program-notice strong{display:block;font-size:18px;font-weight:500}.program-notice span{display:block;font-size:14px;color:#c0d5e4;margin-top:4px}.program-notice a{flex-shrink:0;color:var(--blue);font-size:14px;border-bottom:1px solid #91b4ce;padding-bottom:4px}.project-routes{border-top:1px solid #385168}.project-route{display:flex;align-items:center;gap:35px;padding:35px 15px;border-bottom:1px solid #385168;transition:background .2s,padding .2s}.project-route:hover{background:#122a40;padding-left:25px}.route-number{font-size:14px;color:var(--blue)}.project-route h3{font-size:clamp(28px,3.5vw,48px);letter-spacing:-.04em}.project-route p{color:var(--muted);margin-top:12px;font-size:16px}.route-open{margin-left:auto;white-space:nowrap;font-size:14px;color:var(--blue)}.tool-heading{padding:45px 6% 35px;background:radial-gradient(ellipse at top right,#1c3c58,transparent 70%)}.tool-heading .breadcrumb{margin-bottom:20px}.tool-heading .eyebrow{margin-bottom:14px}.tool-heading h1{font-size:clamp(50px,5.5vw,80px)}.tool-heading>p:last-of-type{color:#b4c6d5;margin-top:20px;font-size:16px;max-width:760px}.roof-config{display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:30px 6% 70px;align-items:start}.roof-preview{background:#102134;border:1px solid #3b536a;padding:24px;position:sticky;top:25px}.roof-preview>img{width:100%;height:310px;object-fit:contain;background:#e8e9e7;margin-top:22px}.roof-photo-caption{font-size:12px;color:var(--muted);margin-top:9px}.roof-selection{display:flex;align-items:center;gap:20px;margin-top:28px}.roof-selection h2{font-size:30px;letter-spacing:-.025em}.roof-selection p{color:var(--blue);margin-top:8px}.roof-selection>span{width:75px;height:75px;border:1px solid #8aa0b2;flex-shrink:0}.roof-description{color:#acbfce;margin-bottom:24px}.roof-colors{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.roof-colors button{display:flex;align-items:center;gap:12px;background:#101e2d;border:1px solid #3f5467;padding:10px;font-size:14px;text-align:left}.roof-colors button[aria-pressed=true]{border-color:#afdcfc;background:#26435a;box-shadow:inset 0 0 0 1px #afdcfc}.roof-chip{width:40px;height:40px;flex-shrink:0;border:1px solid #778899}.roof-specs{border-block:1px solid #344b61;padding:12px 0;color:#a8bacb;font-size:14px}.roof-specs p{margin:8px 0}.roof-system{background:#0e1a28}.roof-system .detail-grid article p+p{margin-top:16px}.renovation-services{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:40px 6% 70px}.renovation-services article{border-top:1px solid #496279;padding-top:22px}.renovation-services span{font-size:12px;letter-spacing:.13em;color:var(--blue)}.renovation-services h3{font-size:29px;margin:22px 0}.renovation-services p{color:var(--muted);font-size:16px}.plan-section{padding:70px 6%;background:#0d1a29}.plan-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:5%;align-items:start}.plan-surface{border:1px solid #3b5770;background:#102136;padding:24px;position:sticky;top:25px}#plan-drawing svg{display:block;width:100%;min-height:230px}#plan-summary{color:#c1dbea;font-size:14px;border-top:1px solid #38526b;margin-top:20px;padding-top:20px}select{display:block;width:100%;background:#122438;color:white;border:1px solid #465b6e;font:inherit;padding:12px;margin-top:7px;border-radius:0}select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.plan-grid .project-inputs{margin-top:20px}.plan-grid .notes-label:first-child{margin-top:0}.plan-grid .notes-label[hidden]{display:none}#plan-error:empty{display:none}#plan-error{color:#ffbdab}[aria-disabled=true]{opacity:.5}.next-band>div>p:last-child:not(.eyebrow){margin-top:25px;color:var(--muted)}.controls-panel label,.controls-panel legend,.preview-meta{font-size:14px}.helper,.source-note,.diagram-note{font-size:13px}
@media(max-width:1100px){header{align-items:start;flex-direction:column;gap:18px}header nav{width:100%;justify-content:space-between;flex-wrap:wrap}header nav>a{display:block!important}.hero-content{padding-top:220px}.hero{min-height:860px}.renovation-services{grid-template-columns:1fr 1fr}.program-notice{align-items:start;flex-direction:column;gap:12px}}
@media(max-width:650px){header nav{gap:10px 20px;justify-content:start}header nav>a{font-size:14px}header .nav-cta{margin-left:auto}.hero{min-height:900px}.hero-content{padding-top:245px}.project-route{gap:17px;padding:28px 0;flex-wrap:wrap}.project-route>div{flex:1}.route-open{margin-left:34px;flex-basis:100%}.project-route h3{font-size:30px}.project-route p{font-size:14px}.roof-config,.plan-grid{grid-template-columns:1fr;gap:30px}.roof-preview,.plan-surface{position:relative;top:auto;padding:18px}.roof-preview>img{height:230px}.tool-heading h1{font-size:54px}.tool-heading{padding-top:32px}.renovation-services{gap:25px;grid-template-columns:1fr}.renovation-services h3{margin:14px 0}.plan-section{padding-block:50px}.program-notice strong{font-size:17px}.roof-selection h2{font-size:27px}.roof-selection>span{width:60px;height:60px}.roof-colors button{font-size:14px}.roof-chip{width:30px;height:35px}}
.roof-material-visual{width:100%;aspect-ratio:1;background-image:url('roof-materials.png');background-size:200% 200%;background-repeat:no-repeat;margin-top:22px;max-width:460px;margin-inline:auto}