/* ============================================================
   DESIGN TOKENS - extracted from the design master
   Rebrand: change these four colors + the CFG block below.
   ============================================================ */
:root{
  --primary:#1F1F1F;        /* near-black: bars, footer, headings, dark buttons */
  --secondary:#C4A25F;      /* gold: kickers, accents, gold buttons, stars */
  --gold-ink:#7F693D;       /* darkened gold for text-on-light (WCAG AA, secondary fails at 2.4:1) */
  --tertiary:#989898;       /* muted gray */
  --lightgold:#F7F2E9;      /* cream accent panels */
  --body:#333131;           /* body copy */
  --fieldborder:#686E77;    /* form input borders */
  --star:#C4A25F;           /* review stars (kept warm across themes) */
  --white:#fff;
  --font1:"DM Sans",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font1);font-size:16px;line-height:1.5;color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold-ink);text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}

/* ---------- type scale ---------- */
h1,h2,h3,h4{color:var(--primary);overflow-wrap:normal;text-wrap:balance}
p,li,summary,figcaption{orphans:2;text-wrap:pretty;widows:2}
.kicker{color:var(--gold-ink);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:normal;margin-bottom:10px}
.h-xl{font-size:clamp(38px,5.4vw,70px);font-weight:600;line-height:1;color:var(--white);text-shadow:0 2px 30px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.35);text-wrap:balance}
.h-xl .gold{color:var(--hero-accent,var(--secondary))}
/* Long city names must still read as one clean homeowner promise on phones. */
@media(max-width:640px){
  .website-only-hero-title--long [data-bind="heroPre"]{font-size:32px;white-space:nowrap}
  .website-only-hero-title--long .gold{font-size:46px;white-space:nowrap}
}
.h-lg{font-size:clamp(32px,4.6vw,60px);font-weight:700;line-height:1;margin-bottom:22px}
.sub{font-size:16px;color:var(--body);max-width:640px}

/* ---------- buttons: 50px, square, uppercase, .3s ease-in-out ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;width:300px;max-width:100%;
  background:var(--primary);color:var(--white);font-family:var(--font1);font-size:16px;font-weight:600;
  text-transform:uppercase;text-align:center;border:none;border-radius:0;cursor:pointer;
  transition:all .3s ease-in-out}
.btn:hover{background:var(--secondary);color:var(--primary)}
.btn.btn-gold{background:var(--secondary);border:1.8px solid var(--secondary);color:var(--primary)}
.btn.btn-gold:hover{background:var(--primary);border-color:var(--primary);color:var(--white)}
.btn.btn-gray{background:#8a8a8a}
.btn.btn-gray:hover{background:var(--secondary);color:var(--primary)}
.btn.btn-nav{width:200px;height:50px}
@media(max-width:640px){.btn{height:44px;font-size:14px}}

/* ---------- gold arrow link ---------- */
.goldlink{color:var(--gold-ink);font-size:14px;font-weight:700;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.goldlink i{transition:transform .3s ease-in-out}
.goldlink:hover i{transform:translateX(6px)}

/* ---------- fixed top: utility bar + nav ---------- */
.topfix{position:fixed;top:0;left:0;right:0;z-index:999}
.utilitybar{background:var(--primary);height:50px;display:flex;align-items:center;overflow:hidden;
  transition:height .3s ease-in-out}
.utilitybar .wrap{display:flex;justify-content:space-between;align-items:center;width:100%}
.utilitybar span{color:var(--white);font-size:15px}
.utilitybar a{color:var(--white);font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px;transition:color .3s ease-in-out}
.utilitybar a:hover{color:var(--secondary)}
.utilitybar .uq{color:var(--tertiary);font-weight:400;margin-right:10px;text-decoration:none}
body.scrolled .utilitybar{height:0}
@media(max-width:760px){.utilitybar span:first-child{display:none}.utilitybar .wrap{justify-content:center}}

.mainnav{background:var(--primary);transition:box-shadow .3s ease-in-out}
body.scrolled .mainnav{box-shadow:0 6px 24px rgba(0,0,0,.35)}
.mainnav .wrap{display:flex;align-items:center;justify-content:space-between;height:96px;gap:28px}
.brand{display:flex;align-items:center;gap:14px;color:var(--white)}
.brand .mark{width:56px;height:44px;flex:none;color:var(--white)}
.brand .bname{font-size:22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
.brand .bsub{display:block;font-size:10px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--tertiary);margin-top:3px}

.menutop{display:flex;align-items:center;gap:26px;list-style:none}
.menutop>li{position:relative}
.menutop>li>a{position:relative;color:var(--white);font-size:18px;font-weight:500;padding:8px 0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:color .3s ease-in-out}
.menutop>li>a i{font-size:12px;color:var(--secondary)}
.menutop>li>a:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--secondary);transition:width .3s,left .3s}
.menutop>li>a:hover:after{width:100%;left:0}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;padding-top:10px;z-index:3;min-width:230px;list-style:none}
.menutop>li:hover .dropdown-menu{display:block}
.dropdown-menu li a{display:block;background:var(--primary);color:var(--white);font-size:16px;font-weight:500;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);transition:all .3s ease-in-out}
.dropdown-menu li a:hover{background:var(--secondary);color:var(--primary)}
.hamburger{display:none;background:none;border:none;color:var(--white);font-size:26px;cursor:pointer}

/* offcanvas mobile menu */
.offcanvas{position:fixed;top:0;right:-320px;width:300px;height:100vh;background:var(--primary);z-index:9999999;
  transition:right .4s ease;padding:80px 28px 28px;overflow-y:auto}
.offcanvas.open{right:0}
.offcanvas a{display:block;color:var(--white);font-size:18px;font-weight:500;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.offcanvas a:hover{color:var(--secondary)}
.offcanvas .oc-close{position:absolute;top:22px;right:22px;background:none;border:none;color:var(--white);font-size:26px;cursor:pointer}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:9999998}
.scrim.on{opacity:1;pointer-events:auto}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(84vh,820px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--primary)}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media .slide{opacity:0;transition:opacity 1.5s ease}
.hero-media .slide.on{opacity:1}
/* Hero scrim — 2026-08-03. The old scrim faded to fully transparent by 78% across
   and left almost nothing directly under the headline, so the accent-colored second
   line sat on raw sky and became unreadable (Ryan: "the text is hard to read on top
   of the image"). Three stacked layers now: a strong left-to-right primary wash that
   never fully clears, a flat neutral darkener across the whole frame, and the
   existing bottom fade into the next section. Measured against the brightest hero
   photo in the pool this holds the headline above 4.5:1 in every theme. */
.hero:before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 88%, transparent) 0%, color-mix(in srgb, var(--primary) 68%, transparent) 42%, color-mix(in srgb, var(--primary) 30%, transparent) 72%, color-mix(in srgb, var(--primary) 18%, transparent) 100%),
    linear-gradient(rgba(0,0,0,.34) 0%, rgba(0,0,0,.34) 100%),
    linear-gradient(rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 45%, color-mix(in srgb, var(--primary) 62%, transparent) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:170px 0 50px}
.hero-kicker{color:var(--white);font-size:16px;font-weight:500;text-transform:uppercase;margin-bottom:18px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-assurances{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.hero-assurances li{display:flex;align-items:center;gap:9px;color:var(--white);font-size:14.5px;font-weight:600;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero-assurances i{color:var(--hero-accent,var(--secondary));font-size:15px}
@media(max-width:640px){.hero-assurances{gap:8px 0;flex-direction:column}}
.hero-note{margin-top:26px;color:var(--white);font-size:16px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-note a{color:var(--secondary);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* estimate band inside hero bottom */
.estimate{position:relative;z-index:2;background:color-mix(in srgb, var(--primary) 80%, transparent);backdrop-filter:blur(2px);padding:30px 0 38px;margin-top:64px}
.estimate h2{color:var(--white);font-size:24px;font-weight:600;text-transform:uppercase;margin-bottom:18px}
.est-grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:22px;align-items:end}
.f-field label{display:block;color:var(--white);font-size:16px;font-weight:700;margin-bottom:8px}
.f-field input{width:100%;height:50px;background:var(--white);border:1px solid var(--fieldborder);border-bottom:3px solid var(--secondary);border-radius:0;
  padding:0 14px;font-family:var(--font1);font-size:16px;color:var(--body)}
.f-field input:focus{outline:2px solid var(--secondary);outline-offset:0}
.est-grid .btn{width:230px}
@media(max-width:1080px){.est-grid{grid-template-columns:1fr 1fr}.est-grid .btn{width:100%}}
@media(max-width:640px){.est-grid{grid-template-columns:1fr}.hero-inner{padding-top:190px}}
.thanks{display:none;color:var(--white);font-size:18px;padding:14px 0}
.thanks strong{color:var(--secondary)}

/* ---------- next steps (what happens after you submit): fail-closed, renders only with
   exactly 3 cfg.trust.nextSteps strings. Compact numbered strip under the hero form,
   reusing the process-card numbered-circle language at hero scale. ---------- */
.next-steps{margin-top:24px}
.next-steps .ns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.next-steps .ns-item{display:flex;align-items:center;gap:12px}
.next-steps .pnum{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;
  border-radius:50%;background:var(--secondary);color:var(--primary);font-weight:700;font-size:14px}
.next-steps p{color:var(--white);font-size:14px;line-height:1.35;margin:0}
@media(max-width:760px){.next-steps .ns-grid{grid-template-columns:1fr}}

/* ---------- generic section rhythm ---------- */
section.pad{padding:110px 0}
@media(max-width:760px){section.pad{padding:64px 0}}

/* ---------- rating band ---------- */
.rating-band{background:var(--lightgold);padding:56px 0}
.rating-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.rating-big{font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--primary);line-height:1.1}
.rating-big .gold{color:var(--gold-ink)}
.stars{color:var(--star);font-size:20px;letter-spacing:3px}
.rating-meta{font-size:16px;color:var(--body)}
.rating-meta a{font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- services split: sticky left + vertical carousel right ---------- */
.split{display:grid;grid-template-columns:420px 1fr;gap:70px;align-items:start}
.split-left{position:sticky;top:150px}
.split-left .btn{margin-top:30px}
@media(max-width:980px){.split{grid-template-columns:1fr}.split-left{position:static}}
.svc-card{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:center;background:var(--white);
  border-bottom:1px solid #e7e2d8;padding:36px 0}
.svc-card h3{font-size:24px;font-weight:700;margin-bottom:12px}
.svc-card p{margin-bottom:16px}
.svc-card .thumb{height:200px;overflow:hidden}
.svc-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc-card:hover .thumb img{transform:scale(1.05)}
@media(max-width:640px){.svc-card{grid-template-columns:1fr}.svc-card .thumb{order:-1;height:180px}}

/* ---------- tiers (Good/Better/Forever roof module): fail-closed, renders only with
   2-3 real cfg.tiers items. Render/array order = display order -- authors put the
   PREMIUM tier FIRST (reveal-highest-first anchors the comparison). No prices in v1:
   materials/longevity ("cost vs investment") framing only. First card is highlighted. ---------- */
.tiers-sec{background:var(--lightgold)}
.tiers-sec .kicker,.tiers-sec .h-lg{text-align:center}
.tiers-grid{display:grid;gap:22px;margin-top:46px}
.tier-card{background:var(--white);border:1px solid #e7e2d8;border-radius:10px;padding:32px 26px}
.tier-card h3{font-size:22px;font-weight:700;margin-bottom:12px}
.tier-card p{font-size:15px;color:var(--body);margin-bottom:14px}
.tier-card .note{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tertiary)}
.tier-card.tier-best{background:var(--primary);border-color:var(--primary)}
.tier-card.tier-best h3,.tier-card.tier-best p{color:var(--white)}
.tier-card.tier-best .note{color:var(--gold-ink)}
@media(max-width:900px){.tiers-grid{grid-template-columns:1fr!important}}

/* slick dots - dark active, gray idle */
.slick-dots{display:flex!important;gap:10px;justify-content:center;list-style:none;margin-top:34px}
.slick-dots button{font-size:0;width:11px;height:11px;border-radius:50%;border:none;background:#cfcabd;cursor:pointer;transition:background .3s ease-in-out}
.slick-dots .slick-active button{background:var(--primary)}

/* ---------- process (how it works) ---------- */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
.process-card{background:var(--white);border:1px solid #e7e2d8;border-radius:10px;padding:28px 22px}
.process-card .pnum{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--lightgold);color:var(--gold-ink);font-weight:700;font-size:17px;margin-bottom:16px}
.process-card h3{font-size:18px;font-weight:700;margin-bottom:8px}
.process-card p{font-size:14.5px;color:var(--body)}
@media(max-width:980px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process-grid{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.reviews-sec{background:var(--lightgold);position:relative}
.reviews-sec .kicker,.reviews-sec .h-lg{text-align:center}
.rev-track{margin-top:46px}
.rev-card{background:var(--white);border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,.24);padding:30px;margin:6px 14px;min-height:330px}
.rev-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--primary);color:var(--secondary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;flex:none}
.rev-name{font-size:18px;font-weight:700;color:var(--primary)}
.rev-card .stars{font-size:16px}
.rev-card p{font-size:15.5px}
.rev-meta{margin-top:12px;font-size:13px;color:var(--tertiary)}
.rev-fine{text-align:center;margin-top:26px;font-size:13.5px;color:var(--tertiary)}

/* ---------- stats / seal ---------- */
.stats-sec{padding:90px 0}
.stats-grid{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.seal{display:flex;align-items:center;gap:24px}
.seal i{font-size:84px;color:var(--secondary)}
.seal h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1.15;max-width:340px}
.counter b{display:block;font-size:clamp(52px,5.4vw,76px);font-weight:900;color:var(--primary);line-height:1;letter-spacing:-.01em}
.counter b .gold{color:var(--gold-ink)}
.counter>span{display:block;font-size:15px;font-weight:700;text-transform:uppercase;color:var(--tertiary);letter-spacing:.1em;margin-top:8px}

/* ---------- about split ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about-grid .photo{height:560px;overflow:hidden}
.about-grid .photo img{width:100%;height:100%;object-fit:cover}
.about-grid p{margin-bottom:18px}
.gtee{border-left:3px solid var(--secondary);background:var(--lightgold);padding:18px 22px;font-size:16px;margin-top:6px}
.crew-list .ft-h{color:var(--gold-ink);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
/* crew rows: circular avatar (left) + name/role (right), vertically centered. Real photo
   at cfg.crew[].photo when one exists; falls back to an initials circle (same visual
   language as the review-card avatar) so a crew member without a photo never looks
   broken. Ryan, 2026-08-03: "real photos, little avatar-style circular photos right next
   to the name... those would go a long way." */
.crew-row{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.crew-avatar{width:56px;height:56px;border-radius:50%;flex:none;display:block;object-fit:cover}
.crew-avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--secondary);font-weight:700;font-size:17px}
.crew-info{display:flex;flex-direction:column;gap:2px}
.crew-info b{font-size:15.5px;color:var(--primary);line-height:1.25}
.crew-info small{font-size:13px;color:var(--tertiary);line-height:1.25}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}.about-grid .photo{height:380px;order:-1}}

/* ---------- badge strip ----------
   Was a flex row with justify-content:space-between + wrap: N items (cfg.badges +
   cfg.certs, appended into the same strip) wrapped unpredictably -- 6 items came out
   4-then-2, and the orphan pair got stretched edge-to-edge by space-between, reading as
   asymmetric (Ryan, 2026-08-03: "a lot of these badges are oddly sorted"). Fixed with a
   real grid: equal-size cells, deliberate column counts per breakpoint (3 desktop / 2
   tablet / 1 mobile), so any item count lands in even rows and a short last row just
   leaves empty cells on the right instead of spreading. Icon column is a fixed width so
   every label's text baseline lines up regardless of which Font Awesome glyph it uses. */
.badges{border-top:1px solid #eee9dd;border-bottom:1px solid #eee9dd;padding:44px 0}
.badges .wrap{display:grid;grid-template-columns:repeat(3,1fr);column-gap:26px;row-gap:34px;align-items:start}
.badge-item{display:flex;align-items:center;gap:16px;color:var(--primary)}
.badge-item i{font-size:44px;color:var(--secondary);flex:none;width:44px;text-align:center}
.badge-item b{display:block;font-size:20px;font-weight:800;line-height:1.2}
.badge-item small{font-size:14px;color:var(--tertiary);text-transform:uppercase;font-weight:700;letter-spacing:.06em}
@media(max-width:900px){.badges .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.badges .wrap{grid-template-columns:1fr;row-gap:24px}}

/* ---------- gallery ---------- */
.gallery-sec .kicker,.gallery-sec .h-lg{text-align:center}
/* consistent card sizing, real 16:9 aspect box (never squashed -- object-fit:cover
   crops instead of stretching, and now the BOX itself is a locked ratio instead of a
   fixed px height, so real photos of any native size fill it identically). */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
.gal-grid figure{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:pointer;background:var(--primary)}
.gal-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-grid figure:hover img{transform:scale(1.06)}
.gal-grid .tag{position:absolute;top:14px;left:14px;background:var(--primary);color:var(--white);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;z-index:1}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr}}
.gal-cta{display:flex;justify-content:center;margin-top:36px}
/* lightbox: click-through prev/next + caption, so it's a real gallery viewer, not a
   single dead-end enlarge. Same aspect-safe object-fit:contain for the big view. */
.lightbox{position:fixed;inset:0;background:rgba(17,17,17,.92);display:none;align-items:center;justify-content:center;z-index:99999;padding:34px}
.lightbox.on{display:flex}
.lightbox .lb-stage{position:relative;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-width:92vw;max-height:78vh;object-fit:contain}
.lightbox .lb-cap{color:#fff;font-size:15px;margin-top:14px;text-align:center}
.lightbox .lb-cap b{color:var(--secondary)}
.lightbox .lb-close{position:absolute;top:20px;right:26px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:22px;width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox .lb-nav:hover{background:rgba(255,255,255,.24)}
.lightbox .lb-prev{left:-10px}
.lightbox .lb-next{right:-10px}
@media(max-width:760px){.lightbox .lb-prev{left:4px}.lightbox .lb-next{right:4px}}
/* before/after: real drag-to-compare slider (2026-08-03 rebuild). Ryan: "The before and
   after is not working well at all... it needs to absolutely happen." The old
   click-to-reveal opacity toggle is retired. New approach, config-gated on
   cfg.beforeAfter, still fail-closed:
   - build_demo.py's inject_before_after() renders a REAL, static, no-JS 2-up fallback
     (two full images side by side, each captioned Before/After) directly into #baGrid
     at build time -- a no-JS visitor or a crawler still gets real content, never an
     empty div.
   - The script at the bottom of this file progressively enhances each .ba-item's
     .ba-static into a draggable overlay slider: fixed 16:9 box, clip-path reveals the
     "before" layer over the "after" layer, divider handle drags via Pointer Events
     (mouse + touch, one code path), and is a real role="slider" that responds to
     ArrowLeft/ArrowRight/Home/End when focused. No layout shift between the two states
     -- both are the same 16:9 footprint. */
.ba-wrap{margin-top:56px}
.ba-wrap .ba-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.ba-meta{margin-top:10px;font-size:14px;color:var(--body)}
.ba-meta b{display:block;font-size:15px;color:var(--primary);margin-bottom:2px}
/* no-JS fallback: two real full images side by side, same 16:9 footprint as the slider */
.ba-static{position:relative;width:100%;aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden;border-radius:8px;background:var(--primary)}
.ba-fig{position:relative;margin:0;overflow:hidden}
.ba-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* JS-enhanced drag-to-compare slider (replaces .ba-static when the script runs) */
.ba-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--primary);touch-action:none;cursor:ew-resize}
.ba-frame .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.ba-divider{position:absolute;top:0;bottom:0;width:44px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;cursor:ew-resize}
.ba-divider::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}
.ba-handle{position:relative;width:44px;height:44px;border-radius:50%;background:var(--secondary);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none}
.ba-divider:focus-visible .ba-handle{outline:2px solid var(--white);outline-offset:2px}
.ba-badge{position:absolute;top:14px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;z-index:2;pointer-events:none}
.ba-badge-before{left:14px}
.ba-badge-after{right:14px}

/* ---------- pricing band ---------- */
.price-band{background:var(--primary);padding:90px 0}
.price-band .kicker{margin-bottom:10px}
.price-band h2{color:var(--white);font-size:clamp(30px,3.6vw,46px);font-weight:700;line-height:1.05;margin-bottom:16px}
.price-band p{color:#cfcccc;max-width:620px;margin-bottom:28px}
.price-band a.tellink{color:var(--secondary);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- FAQ ---------- */
.faq-sec{background:var(--lightgold)}
.faq-sec .kicker,.faq-sec .h-lg{text-align:center}
.faq-list{max-width:820px;margin:44px auto 0}
.faq-list details{background:var(--white);border-radius:10px;box-shadow:0 0 5px rgba(0,0,0,.12);margin-bottom:14px;overflow:hidden}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:20px 24px;font-size:18px;font-weight:700;color:var(--primary)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary i{color:var(--secondary);transition:transform .3s ease-in-out;flex:none}
.faq-list details[open] summary i{transform:rotate(45deg)}
.faq-a{padding:0 24px 22px;font-size:15.5px}
.faq-guides-line{max-width:820px;margin:22px auto 0;font-size:14.5px;color:var(--tertiary);text-align:center}
.faq-guides-line a{text-decoration:underline;text-underline-offset:3px}

/* ---------- service areas ---------- */
.areas-sec .kicker,.areas-sec .h-lg,.areas-intro{text-align:center}
.areas-intro{margin:14px auto 0;max-width:620px}
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px}
.city-card{border:1px solid #e7e2d8;padding:26px 24px;color:var(--primary);font-size:19px;font-weight:700;
  display:block;position:relative;background:var(--white)}
.city-card span{display:block;font-size:14.5px;font-weight:400;color:var(--body);margin-top:7px}
.city-card i{position:absolute;top:28px;right:22px;color:var(--secondary);transition:transform .3s ease-in-out}
@media(max-width:860px){.city-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.city-grid{grid-template-columns:1fr}}

/* ---------- final CTA ---------- */
.finalcta{background:var(--primary);text-align:center;padding:110px 0}
.finalcta h2{color:var(--white);font-size:clamp(32px,4.4vw,56px);font-weight:700;line-height:1.05;margin-bottom:16px}
.finalcta h2 .gold{color:var(--secondary)}
.finalcta p{color:#cfcccc;max-width:560px;margin:0 auto 34px}
.finalcta .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ---------- assurance strip: fail-closed, renders only with CFG.assurance ---------- */
.assurance-strip{background:var(--lightgold);border-top:1px solid #eee9dd;border-bottom:1px solid #eee9dd;padding:34px 0}
.assurance-strip .wrap{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.assurance-chip{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid #e7e2d8;border-radius:10px;padding:16px 22px;max-width:320px}
.assurance-chip i{font-size:22px;color:var(--secondary);flex:none}
.assurance-chip b{display:block;font-size:15px;font-weight:700;color:var(--primary)}
.assurance-chip span span{display:block;font-size:13.5px;color:var(--body);margin-top:2px}

/* ---------- honesty band: fail-closed, renders only with CFG.trust.honesty ---------- */
.honesty-band{background:var(--primary);padding:90px 0}
.honesty-band h2{color:var(--white);font-size:clamp(28px,3.6vw,44px);font-weight:700;text-align:center;margin-bottom:30px}
.honesty-band .honesty-list{max-width:680px;margin:0 auto}
.honesty-band .honesty-list p{color:#cfcccc;font-size:16.5px;line-height:1.6;margin-bottom:16px}
.honesty-band .honesty-list p:last-child{margin-bottom:0}

/* ---------- review objection-tag filter chips: fail-closed, renders only with
   2+ distinct cfg.reviews[].tag values. No tags -> row stays hidden, carousel unchanged. ---------- */
.rev-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:8px}
.rev-chip{background:var(--white);border:1px solid #e7e2d8;border-radius:999px;padding:9px 18px;
  font-family:var(--font1);font-size:13.5px;font-weight:700;color:var(--primary);cursor:pointer;transition:all .3s ease-in-out}
.rev-chip.active{background:var(--primary);color:var(--white);border-color:var(--primary)}
.rev-chip:hover{border-color:var(--secondary)}

/* ---------- gallery photo location chip: renders only when a cfg.gallery item has 'location' ---------- */
.gal-grid .loc{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.55);color:var(--white);
  font-size:11px;font-weight:600;letter-spacing:.02em;padding:5px 9px;border-radius:4px;z-index:1}

/* ---------- footer ---------- */
footer{background:var(--primary);color:#d8d5d0;padding:90px 0 0}
.ft-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:60px}
.ft-brand .mark{width:64px;height:50px;color:var(--white);margin-bottom:18px}
.ft-brand .bname{color:var(--white);font-size:22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ft-brand p{font-size:15px;margin-top:14px;max-width:300px}
.social{display:flex;gap:12px;margin-top:22px}
.social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:16px;border-radius:50%;transition:all .3s ease-in-out}
.social a:hover{background:var(--secondary);border-color:var(--secondary)}
.ft-mid .rateline{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--white);margin-bottom:26px}
.ft-h{display:block;color:var(--white);font-size:19px;font-weight:700;margin-bottom:10px}
.ft-mid p{font-size:15.5px;margin-bottom:6px}
.ft-btns{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.ft-btns .btn{width:230px;height:48px;font-size:14px}
.quicklinks{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.quicklinks a{display:block;color:#d8d5d0;font-size:15.5px;padding:9px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.2);transition:color .3s ease-in-out}
.quicklinks a:hover{color:var(--secondary)}
.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:70px;padding:26px 0;font-size:14.5px}
.copyright .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.copyright a{color:#d8d5d0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr}}
.demo-banner{display:none;background:#FFF4CE;color:#172B46;border-bottom:1px solid #E8C85D;padding:10px 18px;text-align:center;font-size:13px;font-weight:800;line-height:1.35}
.demo-banner.on{display:block}
.proof-media{background:var(--lightgold)}
.proof-media-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;margin-top:30px}
.proof-media-card{position:relative;min-height:260px;overflow:hidden;border-radius:10px;background:var(--primary);color:#fff}
.proof-media-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.56}
.proof-media-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(8,24,43,.92))}
.proof-media-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:20px}
.proof-media-copy b{display:block;font-size:20px;margin-bottom:5px}
.proof-media-copy span{font-size:14px;line-height:1.4;color:#E7ECF2}
.proof-play{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--secondary);color:var(--primary);margin-bottom:12px}
@media(max-width:820px){.proof-media-grid{grid-template-columns:1fr}.proof-media-card{min-height:230px}}

/* ---------- floating conversion elements ---------- */
.textus{position:fixed;right:0;top:52%;background:var(--secondary);color:var(--primary);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;padding:14px 10px;writing-mode:vertical-rl;z-index:998;transition:background .3s ease-in-out}
.textus:hover{background:var(--primary)}
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:997;background:var(--primary);padding:10px 12px;gap:10px;box-shadow:0 -6px 18px rgba(0,0,0,.3)}
.callbar .btn{flex:1;width:auto;height:46px;font-size:14px}
@media(max-width:900px){.callbar{display:flex}.textus{display:none}footer{padding-bottom:70px}}

@media(max-width:1220px){.menutop{display:none}.hamburger{display:block}.mainnav .btn-nav{display:none}}

/* ---------- focus-visible (keyboard only, not mouse clicks) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,.slick-arrow:focus-visible,.slick-dots button:focus-visible,.city-card:focus-visible{
  outline:2px solid var(--secondary);outline-offset:2px}
.faq-list summary:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}

/* ---------- tap targets: 44x44 minimum hit area via invisible pseudo-element, no visual change ---------- */
.hamburger{position:relative}
.hamburger::after,.offcanvas .oc-close::after{content:"";position:absolute;inset:-11px}
.slick-prev,.slick-next{min-width:44px;min-height:44px}

/* ---------- layout shift: reserve width so counter digits never jump ---------- */
.counter .count{display:inline-block;min-width:2.4ch;text-align:left}

/* ---------- reduced motion: content fully visible, no animation ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media .slide{transition:none}
  [data-aos]{transition:none!important;transform:none!important;opacity:1!important}
  .count{transition:none}
}
/* ---------- instant estimate quiz (ported verbatim from the old estimate.html) ---------- */
.estimate-quiz-sec .head-block{text-align:center;max-width:640px;margin:0 auto 34px}
.qz-card{max-width:640px;margin:0 auto;background:var(--white);border:1px solid #e7e2d8;border-radius:10px;
  box-shadow:0 0 5px rgba(0,0,0,.12);padding:34px 26px}
@media(max-width:640px){.qz-card{padding:26px 18px}}
.qz-dots{display:flex;gap:10px;justify-content:center;margin-bottom:26px}
.qz-dots span{width:11px;height:11px;border-radius:50%;background:#cfcabd;transition:background .3s ease-in-out}
.qz-dots span.active{background:var(--primary)}
.qz-back{display:inline-flex;align-items:center;gap:8px;color:var(--tertiary);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;background:none;border:none;cursor:pointer;margin-bottom:18px;padding:6px 0}
.qz-back:hover{color:var(--gold-ink)}
.qz-step h2{font-size:clamp(22px,3.4vw,28px);font-weight:700;margin-bottom:22px;text-align:center}
.qz-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:64px;
  padding:0 22px;margin-bottom:14px;background:var(--white);border:1.8px solid #e7e2d8;color:var(--primary);
  font-family:var(--font1);font-size:17px;font-weight:600;text-align:left;cursor:pointer;transition:all .2s ease-in-out}
.qz-opt:hover,.qz-opt:focus-visible{border-color:var(--secondary);background:var(--lightgold)}
.qz-opt i{color:var(--secondary);flex:none}
.qz-opt.selected{border-color:var(--secondary);background:var(--lightgold)}
.qz-recap{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:6px}
.qz-chip{display:inline-flex;background:var(--lightgold);border:1px solid #e7e2d8;border-radius:999px;
  padding:7px 15px;font-size:13px;font-weight:700;color:var(--primary)}
.qz-price-wrap{text-align:center;margin:18px 0 8px}
.qz-price{font-size:clamp(32px,6vw,50px);font-weight:900;color:var(--primary);line-height:1.05}
.qz-price-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tertiary);margin-top:6px}
.qz-disclaimer{border-left:3px solid var(--secondary);background:var(--lightgold);padding:16px 20px;
  font-size:14.5px;color:var(--body);margin:20px 0}
.qz-form{display:grid;gap:18px;margin-top:22px}
.qz-form .f-field label{display:block;color:var(--primary);font-size:15px;font-weight:700;margin-bottom:8px}
.qz-form .f-field input{width:100%;height:50px;background:var(--white);border:1px solid var(--fieldborder);
  border-bottom:3px solid var(--secondary);border-radius:0;padding:0 14px;font-family:var(--font1);font-size:16px;color:var(--body)}
.qz-form .f-field input:focus{outline:2px solid var(--secondary);outline-offset:0}
.qz-form .btn{width:100%}
.qz-thanks{display:none;background:var(--lightgold);border-left:3px solid var(--secondary);padding:20px 22px;margin-top:8px}
.qz-thanks strong{color:var(--primary)}

/* ---------- roof report card ---------- */
.reportcard-sec .kicker,.reportcard-sec .h-lg,.reportcard-sec .sub{text-align:center}
.rc-card{max-width:760px;margin:40px auto 0;background:var(--white);border:1px solid #e7e2d8;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.08);overflow:hidden}
.rc-head{background:var(--primary);color:#fff;display:flex;align-items:center;gap:22px;padding:28px 32px}
.rc-grade{flex:none;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900}
.rc-head h3{font-size:20px;font-weight:700;margin-bottom:4px;color:#fff}
.rc-head p{color:#d8d5d0;font-size:14px;margin:0}
.rc-rows{padding:10px 32px 26px}
.rc-row{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid #eee9dd}
.rc-row:last-child{border-bottom:none}
.rc-badge{flex:none;width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;margin-top:2px}
.rc-row h4{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:3px}
.rc-row p{font-size:14.5px;color:var(--body);margin:0}
.rc-foot{background:var(--lightgold);padding:18px 32px;font-size:13.5px;color:var(--body)}
@media(max-width:640px){.rc-head{flex-direction:column;text-align:center}.rc-rows{padding:10px 20px 22px}.rc-foot{padding:16px 20px}}

/* ---------- financing calculator ---------- */
.financing-sec .kicker,.financing-sec .h-lg,.financing-sec .sub{text-align:center}
.fin-card{max-width:820px;margin:40px auto 0;background:var(--white);border:1px solid #e7e2d8;border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.08);display:grid;grid-template-columns:1.1fr .9fr}
.fin-calc{padding:34px 34px;display:flex;flex-direction:column;gap:24px}
.fin-field label{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;color:var(--primary);margin-bottom:10px}
.fin-live{color:var(--secondary);font-weight:800}
.fin-field input[type=range]{width:100%;accent-color:var(--secondary)}
.fin-result{background:var(--lightgold);padding:34px 30px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.fin-monthly{font-size:clamp(34px,5vw,46px);font-weight:900;color:var(--primary);line-height:1}
.fin-monthly span{font-size:16px;font-weight:700;color:var(--tertiary)}
.fin-math{font-size:13.5px;color:var(--body);margin-top:10px}
.fin-note{font-size:12.5px;color:var(--tertiary);margin-top:18px;line-height:1.5}
@media(max-width:820px){.fin-card{grid-template-columns:1fr}}

/* ---------- homeowner guides accordion extras ---------- */
.guides-sec .faq-cta{font-weight:700;color:var(--primary);margin-top:14px}
.guides-sec .guide-sources{font-size:13px;color:var(--tertiary);margin-top:14px}
.guides-sec .guides-subhead{font-size:15px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.04em;margin:44px 0 18px;text-align:center}

/* ---------- verified & documented ---------- */
.verify-sec .kicker,.verify-sec .h-lg,.verify-sec .sub{text-align:center}
.verify-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:40px}
.verify-card{background:var(--white);border:1px solid #e7e2d8;border-radius:10px;padding:24px 26px}
.verify-card .rf-kicker{color:var(--gold-ink);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.verify-card p{font-size:15px;margin-bottom:8px}
.verify-card a{font-weight:700;text-decoration:underline;text-underline-offset:4px}


.website-only-contact-actions{display:flex;flex-wrap:wrap;gap:14px}
.website-only-contact-actions .btn{width:min(300px,100%)}
.website-only-contact .btn-gray,.textus{display:none!important}
@media(max-width:640px){.website-only-contact-actions{display:grid}.website-only-contact-actions .btn{width:100%}}

.brand .mark{width:auto;height:72px;flex:none;object-fit:contain;margin:14px 0}.ft-brand .mark{width:auto;height:82px;object-fit:contain;margin-bottom:18px}.brand>span{display:none}.ft-brand .bname{display:none}
:root{--hero-accent:#E8833A}

.bs-lock{display:flex;align-items:center;gap:11px;width:fit-content;margin:20px 0 0;order:2;text-decoration:none;cursor:pointer}
.bs-lock:hover{opacity:.88}
.bs-lock svg{width:38px;height:auto;flex:none}
.bs-word{font-weight:800;font-size:22px;letter-spacing:-.01em;color:#FBF7EE;line-height:1}
.bs-word em{font-style:normal;color:#FFC839}
#bsPop{position:fixed;inset:0;z-index:99999999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(6,14,26,.62);overflow:auto}
#bsPop.on{display:flex}
#bsPop .bs-card{background:#0C2340;background:radial-gradient(120% 130% at 30% 0%,#14335C 0%,#0C2340 62%);color:#FBF7EE;max-width:1000px;width:100%;max-height:calc(100dvh - 48px);overflow:auto;padding:clamp(30px,4vw,48px);position:relative;text-align:left;
  box-shadow:0 30px 80px rgba(0,0,0,.45);font-family:var(--font1);display:flex;flex-direction:column}
#bsPop .bs-popup-grid{order:1;width:100%;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(212px,.88fr);grid-template-areas:"copy proof";column-gap:clamp(28px,5vw,60px);align-items:center}
#bsPop .bs-copy{grid-area:copy;min-width:0}
#bsPop h3{color:#fff;font-size:clamp(20px,3vw,33px);font-weight:800;line-height:1.1;margin:0;letter-spacing:-.025em}
#bsPop h3 span{display:block}
#bsPop .bs-sub{margin:14px 0 0;font-size:16px;line-height:1.45;color:#EAF0F8}
#bsPop .bs-sub b{color:#fff;font-weight:700}
#bsPop .bs-ways{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
#bsPop .bs-ways li{position:relative;padding-left:22px;font-size:14px;line-height:1.42;color:#D9E1ED}
#bsPop .bs-ways li::before{content:"";position:absolute;left:0;top:.46em;width:11px;height:7px;border-left:3px solid #FFC839;border-bottom:3px solid #FFC839;transform:rotate(-45deg)}
#bsPop .bs-ways li b{display:block;color:#fff;font-weight:700}
#bsPop .bs-price{margin:17px 0 0;padding:14px 16px;border-radius:11px;background:rgba(255,200,57,.1);border:1px solid rgba(255,200,57,.34)}
#bsPop .bs-price p{margin:0;font-size:15px;line-height:1.45;color:#EAF0F8}
#bsPop .bs-price p.big{color:#fff;font-size:clamp(17px,2vw,20px);font-weight:800;letter-spacing:-.015em}
#bsPop .bs-price del{color:#B9C4D4;text-decoration-thickness:2px;margin-right:8px}
#bsPop .bs-price strong{color:#fff}
#bsPop .bs-actions{min-width:0;margin-top:17px}
#bsPop .bs-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;width:auto;padding:0 25px;background:#FFC839;color:#0C2340;border-radius:999px;
  font-size:16.5px;font-weight:800;text-transform:none;letter-spacing:0;text-decoration:none;margin:0;box-shadow:0 3px 0 #E9BC17;transition:filter .2s}
#bsPop .bs-cta:hover{filter:brightness(1.06)}
#bsPop .bs-files{color:#D9E1ED;font-size:13.5px;line-height:1.45;margin:11px 0 0;max-width:430px}
#bsPop .bs-close{position:absolute;top:14px;right:18px;z-index:3;background:none;border:0;color:#B9C4D4;font-size:26px;line-height:1;cursor:pointer}
#bsPop .bs-later{display:block;order:3;align-self:flex-end;text-align:right;margin-top:9px;color:#B9C4D4;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#bsPop .bs-proof{grid-area:proof;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0}
#bsPop .bs-phone-figure{width:min(100%,244px);margin:0}
#bsPop .bs-sample{display:block;margin:0 0 8px;color:#B9C4D4;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#bsPop .bs-phone{position:relative;width:100%;aspect-ratio:9/19.5;background:#fff;border:8px solid #111820;border-radius:42px;box-shadow:0 18px 42px rgba(0,0,0,.3);color:#111820;overflow:hidden}
#bsPop .bs-phone-island{position:absolute;z-index:2;top:8px;left:50%;width:74px;height:21px;border-radius:20px;background:#111820;transform:translateX(-50%)}
#bsPop .bs-phone-status{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 18px;color:#111820;font-size:11px;font-weight:800}
/* ---- the Google search chrome: a plain, obviously-illustrative mock ---- */
/* ---- GBP knowledge-panel replica (2026-08-04, Ryan's Edvin screenshots) ----
   This must read as HIS actual Google Business page, not a stylized search list.
   Colors are Google's own: #1a73e8 action blue, #dadce0 borders, #70757a grey. */
#bsPop .bs-gbp{padding:0 0 10px;font-family:Roboto,Arial,-apple-system,sans-serif;text-align:left}
#bsPop .bs-gbp-map{height:98px;margin:0 0 10px;position:relative;overflow:hidden;
  background:
    linear-gradient(115deg,transparent 46%,#d7e7d0 46% 58%,transparent 58%),
    linear-gradient(65deg,transparent 30%,#cfe0f5 30% 37%,transparent 37%),
    repeating-linear-gradient(0deg,#eef1ec 0 14px,#e4e9e2 14px 15px),
    repeating-linear-gradient(90deg,#eef1ec 0 22px,#e4e9e2 22px 23px)}
#bsPop .bs-gbp-pin{position:absolute;left:50%;top:44%;width:12px;height:12px;transform:translate(-50%,-50%);
  background:#EA4335;border-radius:50% 50% 50% 0;rotate:-45deg}
#bsPop .bs-gbp-pin:after{content:"";position:absolute;inset:3px;background:#fff;border-radius:50%}
#bsPop .bs-gbp-body{padding:0 15px}
#bsPop .bs-gbp-name{margin:0;color:#202124;font-size:18px;font-weight:500;line-height:1.25}
#bsPop .bs-gbp-cat{margin:3px 0 12px;color:#70757a;font-size:12px}
#bsPop .bs-gbp-pills{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 4px}
#bsPop .bs-pill{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border:1px solid #dadce0;
  border-radius:999px;background:#fff;color:#1a73e8;font-size:11.5px;font-weight:500;white-space:nowrap}
#bsPop .bs-pill svg{width:12px;height:12px;fill:#1a73e8;flex:none}
#bsPop .bs-pill.off{color:#bdc1c6;border-color:#e8eaed;background:#f8f9fa;position:relative}
#bsPop .bs-pill.off svg{fill:#bdc1c6}
#bsPop .bs-gbp-point{display:flex;align-items:center;gap:5px;margin:8px 0 10px;color:#0C2340;font-size:11px;font-weight:800}
#bsPop .bs-gbp-point i{display:block;width:0;height:0;border:4px solid transparent;border-bottom-color:#FFC839;flex:none;margin-left:14px}
#bsPop .bs-gbp-point span{background:#FFC839;border-radius:4px;padding:2px 6px}
#bsPop .bs-gbp-line{margin:9px 0 0;color:#202124;font-size:12px}
#bsPop .bs-gbp-line b{font-weight:700}
#bsPop .bs-gbp-line a{color:#1a73e8;text-decoration:none}
#bsPop .bs-gbp-rv{margin:13px 0 0;border-top:1px solid #e8eaed;padding:11px 0 0}
#bsPop .bs-gbp-rv-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
#bsPop .bs-gbp-rv-head b{color:#202124;font-size:14px;font-weight:500}
#bsPop .bs-gbp-rv-btn{display:inline-block;border:1px solid #dadce0;border-radius:4px;background:#f8f9fa;
  color:#3c4043;font-size:10px;font-weight:600;padding:4px 8px;margin-left:4px}
#bsPop .bs-gbp-rv-line{color:#1a73e8;font-size:12px}
#bsPop .bs-gbp-stars{color:#fbbc04;font-size:12px;letter-spacing:.5px}
@media(max-width:760px){
  #bsPop{align-items:flex-start;padding:12px}
  #bsPop .bs-card{max-height:calc(100dvh - 24px);padding:30px 24px 24px}
  #bsPop .bs-popup-grid{grid-template-columns:1fr;grid-template-areas:"copy" "proof";gap:20px}
  #bsPop .bs-phone-figure{width:min(100%,236px)}
  #bsPop .bs-proof{justify-content:center;padding-top:2px}
  #bsPop .bs-later{margin-top:13px}
}
@media(max-width:400px){
  #bsPop .bs-card{padding-right:20px;padding-left:20px}
  #bsPop h3{font-size:20px}
  #bsPop .bs-phone-figure{width:224px}
}
.bs-tab{position:fixed;left:0;top:52%;z-index:9999990;background:#0C2340;color:#FBF7EE;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 14px 12px 12px;border:0;border-radius:0 14px 14px 0;box-shadow:0 4px 18px rgba(0,0,0,.3);cursor:pointer;
  font-family:var(--font1);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transform:translateY(-50%)}
.bs-tab span{writing-mode:vertical-rl;transform:rotate(180deg)}
.bs-tab svg{width:18px;height:auto;transform:rotate(90deg)}
.bs-tab b{color:#FFC839;font-weight:800}
.bs-tab:hover{background:#14335C}
@media(max-width:1300px){.bs-tab{display:none}}
.bs-embed .bs-tab,.bs-embed .textus,.bs-embed #bsPop{display:none!important}
@media(prefers-reduced-motion:reduce){#bsPop *{animation:none!important;transition:none!important}}


:root{--primary:#1B2D45;--secondary:#E8833A;--gold-ink:#91400b;--lightgold:#F1F4F8;--body:#2E3542;--fieldborder:#6B7480;--star:#E9A83A}
.topfix{position:relative!important;top:auto!important}.utilitybar{display:none!important}.demo-banner{display:block!important;padding:12px 24px;background:#fff0dc;color:#603900;text-align:center;font:600 14px/1.4 "DM Sans",sans-serif}.hero{margin-top:0!important;padding-top:0!important}.hero-inner{padding-top:72px!important}.hero-media img{opacity:0;transition:opacity 1s}.hero-media img.on{opacity:1}.brand-demo{font-size:25px;font-weight:800;color:white;letter-spacing:-1px}.brand-demo span{color:var(--secondary)}.svc-track{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.sample-card{background:#f1f4f8;border:1px solid #dce2e9;padding:20px}.sample-card img{width:100%;height:180px;object-fit:cover;margin-bottom:18px}.sample-card h3{font-size:24px;margin-bottom:10px}.sample-card p{margin-bottom:14px}.sample-card a{font-weight:700}.estimate-quiz-sec{display:block!important}.gal-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.gal-grid figure img{width:100%;height:240px;object-fit:cover}.gal-grid figure{position:relative}.gal-grid .tag{position:absolute;bottom:0;background:#17293de8;color:white;padding:10px;font-size:14px}.baWrap{margin-top:40px}.compare{position:relative;aspect-ratio:16/9;overflow:hidden}.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.ba-grid input{width:100%;accent-color:#E8833A}.ba-grid label{display:block;margin-top:14px;font-weight:600}.sample-note{font-size:14px;padding:14px 0}.qz-options{display:grid;gap:10px;max-width:700px;margin:24px auto}.qz-options button{background:white;border:1px solid #1b2d45;padding:18px;text-align:left;color:#1b2d45;font:600 18px "DM Sans",sans-serif;cursor:pointer}.qz-options button:hover{background:#e8833a;color:#17293d}.quiz-result{max-width:700px;margin:24px auto;padding:26px;background:white;border-left:5px solid #e8833a}.quiz-result h3{font-size:28px;margin-bottom:10px}.menu-simple{display:flex;gap:24px;align-items:center}.menu-simple a{color:white;font-weight:600}.faq-list details{border-bottom:1px solid #b6c2cd;padding:20px 0}.faq-list summary{font-weight:700;font-size:20px;cursor:pointer}.faq-list p{padding-top:15px}.sample-footer{padding:40px 24px;background:#1b2d45;color:white;text-align:center}dialog{margin:auto;max-width:520px;padding:32px;border:2px solid #1b2d45}dialog::backdrop{background:#0009}dialog h2{font-size:28px}dialog p{margin:18px 0}dialog button{padding:12px 24px;background:#1b2d45;color:white;cursor:pointer}h1,h2,h3{text-wrap:balance}.header-demo{padding:26px 0;background:#1b2d45}.header-demo .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}.head-block{text-align:center}.estimate-quiz-sec h2{max-width:650px;margin-inline:auto}.finalcta{padding:60px 24px}.finalcta .btn{margin-top:24px}
@media(max-width:650px){.brand-demo{font-size:21px}.header-demo{padding:20px 0}.menu-simple a:not(:last-child){display:none}.menu-simple{gap:8px}.menu-simple a{font-size:14px}.hero-inner{padding-top:42px!important}.h-xl{font-size:40px!important}.svc-track,.gal-grid,.ba-grid{grid-template-columns:1fr!important}.gal-grid figure img{height:240px}.pad{padding:48px 0!important}.demo-banner{text-align:left;padding:12px 20px}.sample-card{padding:16px}.qz-options button{font-size:17px}.hero-form{padding:22px!important}}

.finalcta h2{font-size:clamp(32px,4vw,54px)}
/* Website content extends the earlier client-brand design. */
body{font-family:Arial,Helvetica,sans-serif}h1,h2,h3{font-family:Arial,Helvetica,sans-serif;text-wrap:balance}p,li{text-wrap:pretty}.skip-link{position:absolute;top:-100px;left:16px;background:#fff;color:#102435;padding:14px;z-index:100}.skip-link:focus{top:8px}.header-demo{position:relative}.menu-simple{flex-wrap:wrap;justify-content:flex-end}.menu-simple .nav-cta{border:1px solid currentColor;padding:10px 13px}.menu-simple a{min-height:44px;display:inline-flex;align-items:center}.motion-toggle{position:absolute;right:18px;top:18px;z-index:4;background:#102435d9;color:white;border:1px solid #ffffff80;padding:9px 13px;font-size:12px;cursor:pointer}.hero{position:relative}.roof-page{padding-top:35px;padding-bottom:70px}.page-intro{padding:16px 0 35px;max-width:900px}.page-intro h1{font-size:clamp(34px,4.7vw,60px);line-height:1.08;letter-spacing:-.035em;margin:18px 0}.page-intro .sub{font-size:20px;line-height:1.55;max-width:650px}.crumb{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#526275}.crumb a{color:inherit}.service-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:64px}.service-copy section{padding:24px 0;border-top:1px solid #d5dde3}.service-copy h2,.service-aside h2,.roof-faq h2,.related h2,.contact-layout h2,.narrow h2{font-size:27px;line-height:1.18;margin:0 0 14px}.service-copy p{font-size:17px;line-height:1.7;max-width:590px}.scope-list{padding-left:22px;line-height:1.9}.service-aside{background:#f0f4f6;align-self:start}.service-aside>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.service-aside>div{padding:28px}.service-aside p{line-height:1.65}.quiet{font-size:13px!important;color:#506274}.roof-faq{padding:36px 0}.roof-faq details{border-top:1px solid #d5dde3;padding:18px 0}.roof-faq summary{font-size:18px;font-weight:700;cursor:pointer}.roof-faq p{max-width:720px;line-height:1.7}.related{border-top:2px solid #102435;padding-top:28px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}.related h2{width:100%}.related a{color:#102435;text-underline-offset:5px}.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:30px 0}.step-grid article,.step-grid section{border-top:1px solid #cad3da;padding-top:24px}.step-grid b{display:block;color:#995919;font-size:24px;margin-bottom:15px}.step-grid h2,.step-grid h3{font-size:25px;line-height:1.2}.step-grid p{line-height:1.65}.roof-process{background:#f1f5f7}.roof-process h2{font-size:35px;max-width:800px}.roof-process a{color:#102435;font-weight:700}.roof-footer{background:#102435;color:#fff}.roof-footer>.wrap{padding-top:38px;padding-bottom:35px}.footer-top{display:flex;justify-content:space-between;gap:24px}.footer-top .brand-demo{color:white}.roof-footer nav{display:flex;gap:16px 26px;flex-wrap:wrap;margin-top:20px}.roof-footer nav a{font-size:14px;color:#e0e7ed;text-underline-offset:4px;min-height:30px}.roof-disclaimer{font-size:12px;color:#bac8d5;line-height:1.65;border-top:1px solid #486072;padding-top:18px;margin-top:22px;max-width:950px}.service-links{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:35px 0}.service-links>a{display:block;padding:26px;background:#eff4f7;color:#102435;text-decoration:none}.service-links h3{font-size:25px}.service-links p{line-height:1.7}.service-links span{font-weight:700;text-decoration:underline}.contact-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:70px}.contact-layout label{display:block;font-weight:700;margin:0 0 8px}.contact-layout label span{font-weight:400}.contact-layout input,.contact-layout select,.contact-layout textarea{font:inherit;display:block;width:100%;padding:13px;border:1px solid #9eacb8;border-radius:0;background:white;color:#102435;margin-bottom:23px;min-height:48px}.contact-layout textarea{resize:vertical}.contact-layout aside{padding:30px;background:#eff4f7;align-self:start}.contact-layout li{margin:16px 0;line-height:1.65}.contact-layout ol{padding-left:22px}.contact-layout aside p{line-height:1.65}.contact-layout .btn{cursor:pointer;border:0}.contact-layout .bot-field{position:absolute;left:-10000px;max-width:1px;overflow:hidden}.contact-layout input:focus,.contact-layout textarea:focus,.contact-layout select:focus{outline:3px solid #f0a43a;outline-offset:2px}#request-result:not(:empty){margin-top:22px;padding:20px;background:#e1f4e8;border-left:4px solid #176239;line-height:1.65}#request-result[data-error="true"]{background:#fff1e7;border-color:#b33c16}.narrow{max-width:700px;line-height:1.8}.narrow h2{margin-top:30px}.qz-options>a{text-transform:none!important}.hero-assurances{flex-wrap:wrap}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d47716;outline-offset:3px}.sample-card a{display:inline-block;min-height:44px;padding-top:8px}.page-intro .sub{margin-bottom:0}.roof-faq details p{margin:16px 0 0}
@media(max-width:800px){.header-demo .wrap{display:block;padding-top:18px;padding-bottom:16px}.menu-simple{justify-content:flex-start;gap:5px 18px;margin-top:12px}.menu-simple a{font-size:13px}.menu-simple .nav-cta{padding:7px 10px}.service-layout,.contact-layout{grid-template-columns:1fr;gap:24px}.step-grid{grid-template-columns:1fr;gap:14px}.step-grid article,.step-grid section{padding-top:18px}.roof-page{padding-top:18px}.service-aside{display:grid;grid-template-columns:1fr 1fr}.service-aside>img{height:100%}.service-aside>div{padding:24px}.service-aside .btn{font-size:13px;padding:13px}.roof-process h2{font-size:30px}.footer-top{display:block}}
@media(max-width:540px){.service-aside,.service-links{grid-template-columns:1fr}.service-copy section{padding:20px 0}.page-intro .sub{font-size:18px}.contact-layout aside{padding:24px}.service-copy h2,.contact-layout h2{font-size:25px}.related h2{font-size:25px}.footer-top p{font-size:14px}.menu-simple{gap:2px 14px}.motion-toggle{right:12px;top:10px;padding:8px;font-size:11px}.roof-process h2{font-size:30px}.page-intro h1{font-size:36px}}
@media(max-width:800px){.menu-simple a:not(:last-child){display:inline-flex!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.motion-toggle{display:none}}