/* NETDAK EDITORIAL FINISH — version 4 */
:root{--ink:#18282a;--deep:#0b2528;--deep2:#173c3e;--sea:#1b665f;--sea2:#2e7b71;--mint:#bddcd1;--paper:#f9faf7;--soft:#f0f3ef;--line:#dce5df;--max:1240px;--shadow:0 24px 72px rgba(9,36,33,.09)}
body{font-size:15px;line-height:1.65}
html{scroll-padding-top:90px}
.container{width:min(var(--max),calc(100% - 80px))}
.site-alert{font-weight:600;letter-spacing:.015em}
.site-header{box-shadow:0 1px 0 rgba(4,22,22,.09);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 10px 35px rgba(14,38,34,.1)}
.header-content{height:80px;gap:20px}
.brand{gap:12px}.brand-mark{height:44px;width:44px;border-radius:6px;overflow:hidden}
.brand-words strong{font-weight:800;letter-spacing:-.065em}.brand-words small{letter-spacing:.12em}
.nav{gap:22px}.nav a{position:relative;font-size:12px;font-weight:700}
.nav a:after{content:'';position:absolute;left:0;right:100%;height:2px;bottom:-9px;background:#217b6b;transition:right .25s}
.nav a:hover:after,.nav a.active:after{right:0}
.btn{min-height:46px;transition:transform .23s,background .23s,box-shadow .23s,filter .23s;letter-spacing:-.006em}
.btn:active{transform:translateY(0) scale(.985)}
.hero{min-height:780px;background:#112f31}
.hero:before{position:absolute;content:'';inset:0;z-index:-3;background:url('/assets/roof-illustration.svg') center right/cover no-repeat}
.hero::after{background:linear-gradient(90deg,rgba(5,22,23,.95) 0%,rgba(8,28,29,.85) 35%,rgba(5,27,28,.2) 85%),linear-gradient(0deg,rgba(4,25,27,.3),transparent 55%)}
.hero-photo{object-position:55% 40%}
.hero .eyebrow{margin-bottom:24px}
.hero h1{font-size:clamp(3.5rem,5.6vw,5.85rem);letter-spacing:-.06em;line-height:1.065}
.hero-content{padding:88px 0 120px;max-width:750px}
.hero .hero-sub{max-width:505px;margin:27px 0 29px;font-size:17px;line-height:1.7}
.hero-stats{gap:18px 29px;margin-top:48px}
.hero-stat{font-weight:500;gap:11px}.hero-stat b{font-size:21px}
.hero-review{width:300px;padding:23px 24px;bottom:30px;border-left:3px solid #a9d0c0}
.section{padding:103px 0}.section h2{letter-spacing:-.062em;line-height:1.12}
.section-head{margin-bottom:41px}
.roof-detail-list{margin-top:27px}
.roof-detail{padding:15px 12px}
.roof-detail.selected{border-left:3px solid #1e7a6f;background:#f2f7f3}
.roof-detail b{font-size:16px}
.roof-visual{border-radius:8px;box-shadow:0 26px 60px #0d42331d}
.service-grid{gap:18px}
.service-card{border-radius:8px;box-shadow:0 8px 30px rgba(17,50,46,.035);padding:33px;min-height:345px}
.service-card:before{content:'';height:3px;width:0;position:absolute;top:0;left:0;background:#32917e;transition:width .32s}
.service-card:hover:before{width:100%}
.service-card.featured:before{width:56px;background:#83c3b0}
.service-icon{margin-top:33px}
.service-card h3{font-size:22px}
.review-card{border-radius:7px}
.compare{border-radius:8px;box-shadow:0 16px 46px #192b2921}
.compare input{cursor:ew-resize}
.wizard,.form-card{border-radius:9px;box-shadow:0 13px 48px #122a2410}
.choice{transition:background .16s,border-color .16s,transform .16s}
.choice:hover{transform:translateY(-1px)}
.field{transition:border-color .2s,box-shadow .2s}
.field:focus{border-color:#177268;box-shadow:0 0 0 3px rgba(23,114,104,.13);outline:none}
.roof-demo{border-radius:8px}
.footer-top-cta{background:#185d57}.footer-bottom{border-color:#3b5351}
.floating-wa{transition:transform .2s,box-shadow .2s}.floating-wa:hover{transform:translateY(-4px);box-shadow:0 14px 34px #001a1252}
/* Real, scrollable, button-operable review carousel at all widths */
.reviews{overflow:hidden}.review-track{display:flex!important;gap:17px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 1px 9px;overscroll-behavior-x:contain}
.review-track::-webkit-scrollbar{display:none}
.review-track .review-card{display:flex!important;flex:0 0 calc((100% - 17px)/2);scroll-snap-align:start;min-width:0}
.review-controls button{touch-action:manipulation}
/* Fix sub-page image loading fallback and improve photo cropping */
.sub-hero{background:#1b393a}.sub-hero .sub-image{opacity:.9}
.gallery figure{border-radius:7px}.gallery figcaption{letter-spacing:.01em}
/* FAQ that feels part of the site */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:11%;align-items:start}
.faq-intro{max-width:420px}
.faq-intro p{margin-top:22px;color:var(--muted)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:0 0}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;font:700 16px/1.4 Sora,Arial,sans-serif;letter-spacing:-.03em;padding:22px 4px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';color:var(--sea);font:400 26px Arial,sans-serif}
.faq-list details[open] summary:after{content:'−'}
.faq-list details p{color:var(--muted);font-size:14px;padding:0 28px 24px 4px;line-height:1.8}
/* clear in-context inline validation, no popup */
.form-error{margin-top:11px;color:#8a2323;font-size:13px;font-weight:700;min-height:0}
.form-error:empty{display:none}
/* Photo fallbacks are deliberately illustrated, not falsely described as photography */
.fallback-note{position:absolute;z-index:2;bottom:12px;right:12px;background:rgba(10,38,39,.82);color:#fff;font:600 10px 'DM Sans',Arial,sans-serif;letter-spacing:.06em;border-radius:3px;padding:6px 9px}
.hero .fallback-note,.sub-hero .fallback-note{display:none}
@media(max-width:1160px){.container{width:min(var(--max),calc(100% - 56px))}.nav{gap:13px}.header-actions{gap:9px}.header-actions .btn{padding:12px 14px}}
@media(max-width:1000px){.header-content{height:76px}.nav{display:none}.header-actions .btn{display:none}.menu-toggle{display:flex}.mobile-nav{inset:108px 0 0}.review-track .review-card{flex-basis:calc((100% - 17px)/2)}.faq-grid{gap:6%}}
@media(max-width:920px){.hero-review{display:none}.faq-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:620px){.container{width:calc(100% - 36px)}.header-content{height:69px}.mobile-nav{inset:96px 0 0}.hero{min-height:710px}.hero::after{background:linear-gradient(90deg,rgba(5,22,23,.95) 0%,rgba(8,28,29,.81) 76%,rgba(5,27,28,.52))}.hero-content{padding:94px 0 95px}.hero h1{font-size:clamp(2.9rem,11.5vw,4.4rem);line-height:1.09}.hero .hero-sub{font-size:15px;max-width:365px;margin:22px 0}.hero .eyebrow{font-size:9px}.hero-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-buttons .btn{width:100%;max-width:none;min-height:51px;gap:5px;padding:12px 8px;font-size:11px}.hero-buttons svg{width:15px}.hero-stats{margin-top:31px;gap:15px}.hero-stat b{font-size:16px}.hero-stat span{font-size:10px}.section{padding:75px 0}.section h2{font-size:clamp(2.1rem,9vw,3.6rem)}.review-track .review-card{flex-basis:100%}.review-track{gap:12px}.faq-list summary{font-size:14px;padding:19px 0}.faq-intro p{margin-top:14px}.service-card{padding:24px;min-height:300px}.floating-wa{right:12px;bottom:83px}.mobile-bottom a{min-height:47px;display:flex;align-items:center;justify-content:center}.roof-demo{border-radius:5px}.field{font-size:16px}}
@media(prefers-reduced-motion:reduce){.review-track{scroll-behavior:auto!important}}

/* Keep mobile drawer aligned with shrinking sticky header after the announcement bar scrolls away. */
@media(max-width:1000px){.site-header.scrolled + .mobile-nav{top:76px}}
@media(max-width:620px){.site-header.scrolled + .mobile-nav{top:69px}.brand-words small{font-size:8px}}