/* ============================================================
   CONSTRUCTION / GENERAL TRADES template
   Design: IRON NIGHT / HI-VIS. Cold steel darks, safety yellow,
   Anton + Barlow + JetBrains Mono. Dark-dominant, ticket cards,
   split hero. Deliberately NOT the Flores skin.
   ============================================================ */
:root{
  /* 2026-08-22: was neutral near-black -- the whole site body/sections/footer run through this
     token, so a near-black --coal meant almost the entire site read as "black" no matter how
     much blue got added to individual accents (nav/hero/stat-band). Shifted the base dark tone
     itself into navy so blue is the site's actual dominant dark color, not just a stripe. */
  --coal:#0a1230;
  --coal-2:#0f1a3e;
  --panel:#131f4a;
  --panel-2:#182552;
  --white:#f2f5f7;
  --mut:#a8b2bc;
  --mut-2:#7f8a95;
  /* 2026-08-21: real brand colors from Jeff's onboarding form (primary #0634a7, accent #f7ce3b) --
     was never wired in, site was still on the generic template navy. Gold reads as the punchy
     highlight color for buttons/stars/CTA fills on this dark template; blue serves the secondary/
     hover role. */
  --accent:#f7ce3b;
  --accent-dark:#0634a7;
  --accent-dim:color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent:#0e1116;
  --line:rgba(242,245,247,.13);
  --line-light:rgba(242,245,247,.13);
  --font-display:"Anton",sans-serif;
  --font-body:"Barlow",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --max:1220px;
  --rad:0px;
  /* legacy aliases used by inline styles on inner pages */
  --ink:var(--coal);
  --ink-2:var(--coal-2);
  --paper:var(--panel);
  --paper-2:var(--panel);
  --bone:var(--panel);
  --bone-2:var(--coal-2);
  --red:var(--accent);
  --red-dark:var(--accent-dark);
  --steel:var(--mut-2);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--font-body);
  background:var(--coal);
  color:var(--white);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:.95;letter-spacing:.015em;text-transform:uppercase}
.display-xl{font-size:clamp(3rem,8.4vw,7.2rem)}
.display-lg{font-size:clamp(2.3rem,5.2vw,4.4rem)}
.display-md{font-size:clamp(1.7rem,3.4vw,2.7rem)}
.display-sm{font-size:clamp(1.2rem,2.1vw,1.6rem)}
.kicker{
  font-family:var(--font-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.65rem;margin-bottom:1.15rem;
}
.kicker::before{content:"//";font-weight:700;letter-spacing:0}
.kicker.center{justify-content:center}
.lead{font-size:clamp(1.03rem,1.4vw,1.22rem);color:var(--mut);max-width:58ch;font-weight:400}
.muted{color:var(--mut-2)}
.on-dark .lead,.on-dark .muted,.dark .lead,.dark .muted,.dark2 .lead,.dark2 .muted{color:var(--mut)}
.outline{color:transparent;-webkit-text-stroke:1.6px var(--accent)}
.acc,.red{color:var(--accent);-webkit-text-stroke:0}
.statement{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,4.8vw,3.9rem);line-height:.96;max-width:20ch}
.statement em{font-style:normal;color:var(--accent)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.6rem)}
.section{padding:clamp(4.2rem,8vw,7.5rem) 0;position:relative}
.section.tight{padding:clamp(2.6rem,5vw,4.2rem) 0}
.dark{background:var(--coal-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark2{background:var(--panel)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:940px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- hazard / rules ---------- */
.hazard{height:14px;background:var(--accent);background-image:repeating-linear-gradient(135deg,var(--hazard-ink,#0a0d11) 0 14px,rgba(0,0,0,0) 14px,rgba(0,0,0,0) 28px)}
/* When the page's last section before the footer is itself a .cta-band (the common case --
   every page ends on a CTA), the footer's own .hazard stripe lands right under the
   cta-band's giant background text with almost no gap, reading as two stripes sandwiching
   a half-cut-off watermark instead of one clean transition (Wayne, live screenshot on
   Sarber Construction and Eco Lawn Pros, 2026-08-10). The cta-band's own accent-color
   block already IS the transition; a second stripe right after it is redundant. Use ~
   (general sibling) not + (adjacent) since <script src="site.js"> sits between them in the DOM. */
.cta-band ~ footer .hazard{display:none}
.rule{height:1px;background:var(--line)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:1.02rem 1.75rem;border:2px solid transparent;border-radius:0;
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
  position:relative;
}
.btn:active{transform:translateY(1px)}
.btn-solid,.btn-red{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-solid:hover,.btn-red:hover{background:var(--white);border-color:var(--white);color:var(--coal);box-shadow:0 8px 30px color-mix(in srgb, var(--accent) 18%, transparent)}
.btn-ink{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-ink:hover{background:var(--accent);color:var(--on-accent)}
.btn-ghost{border-color:var(--line);color:var(--white);background:transparent}
.btn-ghost:hover{border-color:var(--white);background:var(--white);color:var(--coal)}
.btn-ghost-light,.btn-light{border-color:rgba(242,245,247,.45);color:var(--white);background:transparent}
.btn-ghost-light:hover,.btn-light:hover{background:var(--white);border-color:var(--white);color:var(--coal)}
.btn-lightsolid{background:var(--white);border-color:var(--white);color:var(--coal)}
.btn-lightsolid:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- topbar ---------- */
.topbar{background:var(--accent);color:var(--on-accent);font-family:var(--font-mono);font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:1.5rem}.topbar .area{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar a{flex:0 0 auto;white-space:nowrap}
.topbar a{color:var(--on-accent);font-weight:800}
.topbar a:hover{text-decoration:underline}
@media(max-width:720px){.topbar .area{display:none}.topbar .wrap{justify-content:center}}

/* ---------- header ---------- */
.site-header{
  /* 2026-08-21: was hardcoded near-black, completely ignoring the brand blue below -- this is
     the #1 spot a nav reads as "on-brand" so it gets the real color, not just the gold accent. */
  position:sticky;top:0;z-index:80;background:rgba(6,52,167,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease,background .25s ease;
}
.site-header.scrolled{box-shadow:0 10px 34px rgba(0,0,0,.5);background:rgba(6,52,167,.98)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:92px}
.logo{display:flex;align-items:center;gap:.7rem;flex:none}
.logo img{height:92px;width:auto;max-width:min(24vw,230px);display:block;object-fit:contain}
/* dark logo on the dark nav -> white chip so it reads; light/white logos show bare */
.logo img.logo-chip{background:#fff;border-radius:8px;padding:6px 10px;height:52px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.site-footer .logo img{height:100px}
.site-footer .logo img.logo-chip{height:84px}
/* wordmark logo (greenfield / no real logo image) */
.site-header .logo{margin-right:2.5rem;flex:0 1 auto;min-width:0}
.site-header .header-cta{margin-left:2.5rem;flex:0 0 auto}
.logo-word{font-family:var(--font-display);max-width:min(24vw,300px);white-space:nowrap;overflow:hidden;text-overflow:clip;flex:0 1 auto;text-transform:uppercase;letter-spacing:.02em;line-height:.9;font-size:clamp(.95rem,1.45vw,1.4rem);color:var(--white);display:inline-block;position:relative;padding-left:.85rem}
.logo-word::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.5em;background:var(--accent)}
.site-footer .logo-word{font-size:1.7rem}
@media(max-width:560px){.logo-word{font-size:1.3rem}}
@media(max-width:560px){.logo img{height:58px;max-width:42vw}.site-header .wrap{height:80px}}
.nav{display:flex;align-items:center;gap:1.45rem}
.nav>a{font-weight:600;font-size:.87rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem 0;position:relative;white-space:nowrap;color:#dfe5ea}
.nav>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .22s ease}
.nav>a:hover,.nav>a.active{color:var(--white)}
.nav>a:hover::after,.nav>a.active::after{width:100%}
.nav .has-drop{position:relative}
.nav .has-drop>a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.87rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem 0;color:#dfe5ea}
.nav .has-drop>a:hover,.nav .has-drop>a.active{color:var(--white)}
.drop{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,8px);
  background:var(--panel);min-width:255px;padding:.55rem 0;border:1px solid var(--line);
  opacity:0;visibility:hidden;transition:all .22s ease;box-shadow:0 22px 50px rgba(0,0,0,.55);
}
.drop::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:block;color:var(--white);padding:.55rem 1.2rem;font-size:.85rem;font-weight:600;letter-spacing:.03em}
.drop a:hover{background:var(--accent);color:var(--on-accent)}
.header-cta{display:flex;align-items:center;gap:1rem;flex:none}
.header-phone{font-family:var(--font-mono);font-weight:600;font-size:.85rem;white-space:nowrap;color:var(--white)}
.header-phone:hover{color:var(--accent)}
.btn-nav{padding:.72rem 1.25rem;font-size:.82rem}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;z-index:120}
.burger span{display:block;width:26px;height:3px;background:var(--white);margin:5px auto;transition:all .25s ease}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:1680px){
  .nav,.header-phone{display:none}
  .burger{display:block}
}
@media(max-width:560px){.btn-nav{display:none}}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;background:var(--coal);z-index:110;color:var(--white);
  display:flex;flex-direction:column;justify-content:center;padding:5rem clamp(1.4rem,7vw,3.5rem) 3rem;
  opacity:0;visibility:hidden;transition:opacity .28s ease;overflow-y:auto;
}
.mobile-menu::before{content:"";position:fixed;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,var(--coal) 14px 28px)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a.mm-link{
  font-family:var(--font-display);font-size:clamp(1.8rem,7vw,2.7rem);text-transform:uppercase;
  padding:.35rem 0;border-bottom:1px solid var(--line);display:block;
  transform:translateY(14px);opacity:0;transition:all .3s ease;
}
.mobile-menu.open a.mm-link{transform:none;opacity:1}
.mobile-menu a.mm-link:hover{color:var(--accent)}
.mobile-menu .mm-sub{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:1.6rem 0 .5rem}
.mobile-menu .mm-svc a{display:block;padding:.3rem 0;font-weight:600;color:var(--mut)}
.mobile-menu .mm-svc a:hover{color:var(--accent)}
.mobile-menu .mm-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- HOME split hero ---------- */
.hero-split{position:relative;border-bottom:1px solid var(--line);overflow:clip}
.hero-split .hs-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:min(86vh,780px)}
.hs-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.6rem,5vw,4rem) clamp(1.1rem,4vw,3.4rem) clamp(2.6rem,5vw,4rem) max(clamp(1.1rem,4vw,2.6rem),calc((100vw - var(--max))/2 + 2.6rem));position:relative}
.hs-copy::before{content:"42.02 N / 93.65 W";position:absolute;top:2rem;right:0;writing-mode:vertical-rl;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.34em;color:var(--mut-2);text-transform:uppercase}
.hs-tag{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;display:flex;gap:.65rem;align-items:center}
.hs-tag::before{content:"//";font-weight:700;letter-spacing:0}
.hs-copy h1{font-size:clamp(3.2rem,6.8vw,6.2rem);max-width:11ch;line-height:.94}
.hs-copy h1 .acc{color:var(--accent)}
.hs-copy::after{content:"AIRBORNE";position:absolute;left:-.04em;bottom:-.14em;font-family:var(--font-display);font-size:clamp(6rem,16vw,14rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.05);pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.hs-copy>*{position:relative;z-index:1}
.hl{display:block;overflow:hidden;padding-bottom:.42em;margin-bottom:-.34em}
.hl-in{display:inline-block;transform:translateY(112%);animation:heroLine .95s cubic-bezier(.19,.8,.22,1) .08s forwards}
.hl:nth-child(2) .hl-in{animation-delay:.2s}
.hl:nth-child(3) .hl-in{animation-delay:.32s}
@keyframes heroLine{to{transform:none}}
.hload{opacity:0;transform:translateY(20px);animation:heroFade .9s cubic-bezier(.2,.6,.2,1) .18s forwards}
.hload-d2{animation-delay:.52s}.hload-d3{animation-delay:.7s}.hload-d4{animation-delay:.88s}
@keyframes heroFade{to{opacity:1;transform:none}}
.hs-copy p{margin:1.4rem 0 1.9rem;max-width:50ch;font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--mut)}
.btn-hero{padding:1.05rem 1.7rem;font-size:1.02rem;box-shadow:0 12px 36px color-mix(in srgb, var(--accent) 22%, transparent)}
.hero-proof{margin-top:1.2rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;color:var(--mut);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.hero-proof .stars{color:var(--accent);letter-spacing:.14em;font-size:.9rem}
.hero-proof b{font-size:.95rem;color:var(--white)}
.hs-media{position:relative;min-height:420px;clip-path:polygon(11% 0,100% 0,100% 100%,0 100%);overflow:hidden}
.hs-imgwrap{position:absolute;inset:-8% 0;will-change:transform}
.hs-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:contrast(1.15) saturate(.8) brightness(.92) hue-rotate(-6deg);transform:scale(1.1);transform-origin:50% 26%;animation:hsKb 18s cubic-bezier(.22,.6,.3,1) forwards}
@keyframes hsKb{to{transform:scale(1.01)}}
.hs-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");background-size:180px 180px}
.hs-media::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(14,17,22,.78) 0%,rgba(14,17,22,.1) 52%,rgba(18,28,44,.48) 100%),radial-gradient(120% 90% at 60% 20%,transparent 45%,rgba(10,13,18,.5) 100%);z-index:1}
.hs-media::after{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(135deg,var(--accent) 0 16px,var(--coal) 16px 32px);transform:skewX(-6.4deg);transform-origin:top;z-index:2}
.hs-plate{position:absolute;right:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2.2rem);z-index:3;background:rgba(14,17,22,.86);backdrop-filter:blur(6px);border:1px solid var(--line);border-left:4px solid var(--accent);padding:.9rem 1.2rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);max-width:min(320px,80%)}
.hs-plate b{color:var(--accent);font-weight:700;display:block;margin-bottom:.15rem}
.hero-strip{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.4rem 2.6rem;padding:1.05rem 0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2)}
.hero-strip b{color:var(--accent);font-weight:700}
@media(max-width:940px){
  .hero-split .hs-grid{grid-template-columns:1fr;min-height:0}
  .hs-media{min-height:360px;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);order:2}
  .hs-media::after{display:none}
  .hs-copy{order:1;padding:clamp(2.6rem,8vw,4rem) clamp(1.1rem,4vw,2.6rem)}
  .hs-copy::before,.hs-copy::after{display:none}
}
@media(prefers-reduced-motion:reduce){.hs-imgwrap img{animation:none;transform:none}.hl-in{animation:none;transform:none}.hload{animation:none;opacity:1;transform:none}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}

/* legacy hero classes (inner use) */
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-tag{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem;display:flex;gap:.7rem;align-items:center}

/* ---------- HOME full-bleed centered hero (Caruth skin) ---------- */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:center;color:var(--white);isolation:isolate;overflow:clip;text-align:center;border-bottom:1px solid var(--line)}
.hero .hero-bg{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:contrast(1.04) saturate(1.14) brightness(1.06);transform:scale(1.08);transform-origin:50% 40%;animation:heroKb 16s cubic-bezier(.22,.6,.3,1) forwards}
.hero .hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 78% 62% at 50% 50%,rgba(6,8,14,.46) 0%,rgba(6,8,14,.30) 45%,rgba(6,8,14,.08) 75%,rgba(6,8,14,0) 100%),linear-gradient(180deg,rgba(6,8,14,.22) 0%,rgba(6,8,14,.08) 38%,rgba(6,8,14,.18) 62%,rgba(6,8,14,.62) 92%,rgba(6,8,14,.72) 100%)}
.hero .wrap{padding-top:5.5rem;padding-bottom:clamp(1.5rem,3.5vh,2.6rem);width:100%;display:flex;flex-direction:column;align-items:center}
.hero .hero-tag{justify-content:center;margin-bottom:1.7rem;color:#fff;font-size:.86rem;text-shadow:0 1px 14px rgba(0,0,0,.92),0 0 4px rgba(0,0,0,.7)}
.hero .hero-tag::before,.hero .hero-tag::after{content:"";width:2.4rem;height:2px;background:var(--accent)}
.hero h1{max-width:none;margin-left:auto;margin-right:auto;font-size:clamp(2rem,5.6vw,5.2rem);line-height:1.1;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.48)}
.hero h1 .hl-in{white-space:normal;overflow-wrap:break-word}
.hero h1 .acc{color:var(--accent)}
.hero p{margin:1.7rem auto 2rem;max-width:46ch;font-size:clamp(1rem,1.5vw,1.15rem);color:#e7ebef;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.hero .hero-ctas{justify-content:center}
.hero .hero-proof{margin-top:1.6rem;justify-content:center;color:#e7ebef;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.hero .hero-strip{border-top:1px solid var(--line-light);margin-top:clamp(1.2rem,3vh,2rem);padding-top:1.1rem;justify-content:center}
.hero-scroll{position:absolute;right:clamp(1.1rem,3vw,2.6rem);bottom:0;height:5.5rem;width:2px;overflow:hidden;z-index:1}
.hero-scroll span{position:absolute;left:0;top:-100%;width:2px;height:100%;background:linear-gradient(180deg,transparent,var(--accent));animation:scrollCue 2.4s cubic-bezier(.6,.1,.3,.9) 1.4s infinite}
@keyframes heroKb{to{transform:scale(1)}}
@keyframes scrollCue{0%{top:-100%}55%{top:100%}100%{top:100%}}
@media(max-width:940px){.hero{min-height:min(92vh,760px)}.hero-scroll{display:none}}
@media(prefers-reduced-motion:reduce){.hero .hero-bg img{animation:none;transform:none}}

/* ---------- stat band ---------- */
/* 2026-08-21: was on gold (matches nav topbar right above it, so blue never appeared past the
   header) -- moved to the brand blue so blue shows up as a real second structural color down the
   page, not just a strip at the very top. */
.statband{background:var(--accent-dark);color:var(--white);position:relative;overflow:clip}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding-top:clamp(1.8rem,4vw,2.8rem);padding-bottom:clamp(1.8rem,4vw,2.8rem)}
.stat{border-left:3px solid var(--accent);padding-left:1.1rem}
.stat .sv{font-family:var(--font-display);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1}
.stat .sl{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-top:.35rem}
@media(max-width:940px){.statband .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.statband .wrap{grid-template-columns:1fr 1fr;gap:1.4rem .9rem}.stat .sv{font-size:1.9rem}}

/* ---------- marquee (retired; safety stub) ---------- */
.marquee{display:none}

/* ---------- service ticket cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem}
.svc-card{grid-column:span 2;position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.svc-card.wide{grid-column:span 3}
.svc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:3}
.svc-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb, var(--accent) 50%, transparent);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card img{position:relative;width:100%;aspect-ratio:16/9.5;object-fit:cover;filter:saturate(.82) contrast(1.04);transition:filter .4s ease,transform .6s cubic-bezier(.2,.6,.2,1)}
.svc-card:hover img{filter:saturate(1.05);transform:scale(1.04)}
.svc-card .imgbox,.svc-card>img{overflow:hidden}
.svc-body{position:relative;z-index:2;padding:1.45rem 1.45rem 1.55rem;display:flex;flex-direction:column;gap:.5rem;flex:1;background:var(--panel)}
.svc-num{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--accent)}
.svc-body h3{font-size:1.45rem;letter-spacing:.02em}
.svc-body p{font-size:.93rem;color:var(--mut)}
.svc-link{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:.5rem;margin-top:auto;padding-top:.5rem}
@media(max-width:940px){.svc-card,.svc-card.wide{grid-column:span 3}}
@media(max-width:620px){.svc-card,.svc-card.wide{grid-column:span 6}}

/* ---------- boom vs line selector (signature) ---------- */
.bvl{border:1px solid var(--line);background:var(--coal-2)}
.bvl-tabs{display:grid;grid-template-columns:1.05fr .95fr}/* MUST match .bvl-panel's columns. They were 1fr 1fr vs 1.05fr .95fr, so the Residential/Commercial tab divider sat ~25px off from the text/image divider underneath it on every contractor site (Wayne, 2026-08-06). */
.bvl-tab{font-family:var(--font-display);font-size:clamp(1.3rem,3vw,2.1rem);text-transform:uppercase;letter-spacing:.02em;padding:1.15rem 1rem;background:var(--panel);color:var(--mut-2);border:0;border-bottom:1px solid var(--line);cursor:pointer;transition:all .25s ease;position:relative}
.bvl-tab+.bvl-tab{border-left:1px solid var(--line)}
.bvl-tab.on{background:var(--accent);color:var(--on-accent)}
.bvl-tab:not(.on):hover{color:var(--white)}
.bvl-panel{display:none;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch}
.bvl-panel.on{display:grid}
.bvl-info{padding:clamp(1.6rem,4vw,2.8rem)}
.bvl-info h3{font-size:clamp(1.5rem,2.8vw,2.2rem);margin-bottom:.6rem}
.bvl-info>p{color:var(--mut);max-width:52ch}
.bvl-specs{margin-top:1.4rem;border-top:1px solid var(--line)}
.bvl-specs .row{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:1rem;padding:.7rem .1rem;border-bottom:1px solid var(--line);font-size:.95rem}
.bvl-specs .row b{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bvl-media{position:relative;min-height:300px}
.bvl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bvl-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--coal-2) 0,rgba(14,17,22,0) 30%)}
@media(max-width:880px){.bvl-panel{grid-template-columns:1fr}.bvl-media{min-height:240px;order:-1}.bvl-media::before{background:linear-gradient(0deg,var(--coal-2) 0,rgba(14,17,22,0) 40%)}}

/* ---------- service rows (services index) ---------- */
.svc-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line);position:relative}
.svc-row:last-of-type{border-bottom:1px solid var(--line)}
.svc-row .idx{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.8rem);color:transparent;-webkit-text-stroke:1.5px var(--accent);line-height:1}
.svc-row h3{font-size:clamp(1.7rem,3.4vw,2.8rem)}
.svc-row h3 a{transition:color .2s ease}
.svc-row h3 a:hover{color:var(--accent)}
.svc-row p{color:var(--mut);max-width:48ch;margin-top:.6rem}
.svc-row .media{overflow:hidden}
.svc-row .media img{aspect-ratio:16/9;width:100%;object-fit:cover;filter:saturate(.85);transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .4s ease}
.svc-row:hover .media img{transform:scale(1.05);filter:saturate(1.05)}
@media(max-width:820px){.svc-row{grid-template-columns:1fr}}
.go{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:.5rem;margin-top:.9rem}
.go:hover{text-decoration:underline}

/* ---------- numbered feature rows ---------- */
.feat{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.8rem 0;border-top:1px solid var(--line);align-items:start}
.feat:last-child{border-bottom:1px solid var(--line)}
.feat .n{font-family:var(--font-display);font-size:2rem;color:transparent;-webkit-text-stroke:1.4px var(--accent-dark);line-height:1}
.feat h3{font-size:1.28rem;letter-spacing:.02em;margin-bottom:.4rem}
.feat p{color:var(--mut);max-width:60ch}
.light .feat,.feat.light{border-color:var(--line)}
.light .feat p,.feat.light p{color:var(--mut)}

/* ---------- process timeline ---------- */
.steps{position:relative;counter-reset:step;display:grid;grid-template-columns:1fr;gap:0;max-width:820px}
.step{position:relative;padding:1.6rem 0 1.6rem 5.4rem;border:0;background:transparent;transition:none}
.step::after{content:"";position:absolute;left:1.55rem;top:0;bottom:0;width:2px;background:var(--line)}
.step:first-child::after{top:1.4rem}
.step:last-child::after{bottom:auto;height:1.4rem}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;left:0;top:1.15rem;width:3.15rem;height:3.15rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.15rem;
  background:var(--coal);border:2px solid var(--accent-dark);color:var(--white);z-index:2;
  transition:background .25s ease,color .25s ease;
}
.step:hover::before{background:var(--accent);color:var(--on-accent)}
.step h3{font-size:1.35rem;letter-spacing:.02em;margin-bottom:.4rem}
.step p{font-size:.98rem;color:var(--mut);max-width:58ch}

/* ---------- gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gal-item{position:relative;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line)}
.gal-item.tall{grid-row:span 2;aspect-ratio:auto}
.gal-item img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .4s ease}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.08)}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:.55rem .9rem;background:var(--accent);color:var(--on-accent);font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transform:translateY(101%);transition:transform .3s ease}
.gal-item:hover figcaption{transform:none}
@media(max-width:940px){.gal-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gal-grid{grid-template-columns:1fr}.gal-item.tall{grid-row:span 1;aspect-ratio:4/3}}
.lightbox{position:fixed;inset:0;background:rgba(8,10,13,.95);z-index:200;display:none;align-items:center;justify-content:center;padding:3rem 1rem}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,94vw);max-height:84vh;object-fit:contain}
.lb-close{position:absolute;top:1.2rem;right:1.4rem;background:none;border:2px solid var(--white);color:var(--white);width:46px;height:46px;font-size:1.2rem;cursor:pointer;transition:all .2s ease}
.lb-close:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:2px solid var(--white);color:var(--white);width:46px;height:46px;font-size:1.1rem;cursor:pointer;transition:all .2s ease}
.lb-nav:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lb-prev{left:1.2rem}.lb-next{right:1.2rem}

/* ---------- area chips + rows ---------- */
.area-list{display:flex;flex-wrap:wrap;gap:.7rem}
.area-chip{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:.55rem 1.05rem;background:transparent;color:var(--mut);transition:all .2s ease}
.area-chip:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.area-rows{border-top:1px solid var(--line)}
.area-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.05rem .2rem;border-bottom:1px solid var(--line);transition:background .2s ease,padding .2s ease}
.area-row:hover{background:var(--panel);padding-left:.8rem;padding-right:.4rem}
.area-row .nm{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.3rem,2.7vw,2rem);letter-spacing:.02em}
.area-row .co{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-align:right}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
@media(max-width:820px){.trust{grid-template-columns:1fr}}
.trust-card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent-dark);padding:2.1rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.trust-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.45);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.tc-label{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.tc-label::before{content:"//";letter-spacing:0}
.stars{color:var(--accent);letter-spacing:.18em;font-size:1.05rem}

/* ---------- CTA band (hi-vis) ---------- */
.cta-band{position:relative;isolation:isolate;color:var(--on-accent);text-align:center;overflow:clip;background:var(--accent)}
.cta-band .bgimg{display:none}
.cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;background:var(--accent);background-image:repeating-linear-gradient(135deg,var(--coal-2) 0 14px,rgba(0,0,0,0) 14px,rgba(0,0,0,0) 28px)}
.cta-band .kicker{color:var(--on-accent)}
.cta-band h2{max-width:16ch;margin:0 auto}
.cta-band p{max-width:54ch;margin:1.2rem auto 2rem;color:rgba(14,17,22,.78);font-weight:500}
.cta-band .hero-ctas{justify-content:center}
.cta-band .btn-solid,.cta-band .btn-red{background:var(--coal);border-color:var(--coal);color:var(--accent)}
.cta-band .btn-solid:hover,.cta-band .btn-red:hover{background:#000;border-color:#000;color:var(--white);box-shadow:none}
.cta-band .btn-ghost-light,.cta-band .btn-light,.cta-band .btn-ghost{border-color:var(--coal);color:var(--on-accent)}
.cta-band .btn-ghost-light:hover,.cta-band .btn-light:hover,.cta-band .btn-ghost:hover{background:var(--coal);color:var(--accent)}
.cta-band .btn-ink{border-color:var(--coal);color:var(--on-accent);background:transparent}
.cta-band .btn-ink:hover{background:var(--coal);color:var(--accent)}
.cta-band .giant-bg{position:absolute;inset:auto 0 -1vw 0;z-index:-1;font-family:var(--font-display);text-transform:uppercase;font-size:clamp(4rem,15vw,13rem);line-height:.8;color:transparent;-webkit-text-stroke:1.6px rgba(14,17,22,.16);user-select:none;pointer-events:none;white-space:nowrap;overflow:hidden}

/* ---------- page hero (inner) ---------- */
.page-hero{position:relative;isolation:isolate;color:var(--white);padding:clamp(6rem,12vw,8.5rem) 0 clamp(3rem,6vw,4.5rem);overflow:clip;border-bottom:1px solid var(--line)}
.page-hero .bgimg{position:absolute;inset:0 0 0 30%;z-index:-2}
.page-hero .bgimg img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--accent-dark) 38%,rgba(6,52,167,.66) 70%,rgba(6,52,167,.45) 100%)}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(135deg,var(--accent) 0 16px,var(--accent-dark) 16px 32px)}
.page-hero.plain{background:var(--coal-2)}
.page-hero.plain::after{display:none}
.crumbs{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-2);margin-bottom:1.3rem}
.crumbs::before{content:"// ";color:var(--accent)}
.crumbs a:hover{color:var(--accent)}
.page-hero h1{max-width:17ch}
.page-hero .lead{color:var(--mut);margin-top:1.2rem}
.page-hero .lead a{color:var(--white)}

/* ---------- content blocks ---------- */
.media{overflow:hidden;position:relative}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.media:hover img{transform:scale(1.04)}
.media.frame,.media.frame-red{border:1px solid var(--line);padding:0}
.media.frame::after,.media.frame-red::after{content:"";position:absolute;top:0;left:0;width:52px;height:8px;background:var(--accent);z-index:2}
.media.frame::before,.media.frame-red::before{content:"";position:absolute;bottom:0;right:0;width:52px;height:8px;background:var(--accent);z-index:2}
.hero-badge{display:inline-block;background:var(--accent);color:var(--on-accent);padding:.85rem 1.15rem;font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.check-list li{display:flex;gap:.85rem;padding:.5rem 0;align-items:flex-start;color:var(--mut)}
.check-list li::before{content:"";flex:none;width:20px;height:20px;margin-top:.25rem;background:var(--accent);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.spec-table{width:100%;border-collapse:collapse;font-size:.97rem}
.spec-table td{padding:.9rem .2rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--white)}
.spec-table td:first-child{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);width:40%}
.spec-table a{color:var(--white)}

/* ---------- FAQ ---------- */
.faq-item{border:1px solid var(--line);background:var(--panel);margin-bottom:.9rem;overflow:hidden;transition:border-color .25s ease}
.faq-item:hover,.faq-item[open]{border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.4rem;font-weight:600;font-size:1.04rem;color:var(--white)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-display);color:var(--accent);font-size:1.3rem;transition:transform .25s ease;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 1.4rem 1.3rem;color:var(--mut);max-width:75ch}

/* ---------- footer ---------- */
.site-footer{background:var(--coal);color:var(--mut);border-top:3px solid var(--accent-dark)}
.footer-cta{border-bottom:1px solid var(--line);position:relative}
.footer-cta::before{content:none}
.footer-cta .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.4rem;padding-top:2.8rem;padding-bottom:2.8rem}
.footer-cta h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.4rem);max-width:22ch}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2.4rem;padding:3.4rem 0}
@media(max-width:940px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer h4{color:var(--accent);font-size:1rem;margin-bottom:1.1rem;letter-spacing:.08em}
.site-footer li{margin:.45rem 0}
.site-footer a:hover{color:var(--accent)}
.f-about{max-width:34ch;font-size:.94rem;margin-top:1.2rem}
.f-phone{font-family:var(--font-mono);color:var(--white);font-weight:600}
.footer-bottom{border-top:1px solid var(--line);padding:1.3rem 0;font-size:.8rem;color:var(--mut-2)}
.footer-bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem}
.footer-bottom a:hover{color:var(--accent)}

/* ---------- modal (2-step quote) ---------- */
.modal-veil{position:fixed;inset:0;background:rgba(8,10,13,.82);backdrop-filter:blur(5px);z-index:300;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-veil.open{display:flex}
.modal{background:var(--coal-2);border:1px solid var(--line);width:min(620px,100%);max-height:92vh;overflow-y:auto;position:relative;animation:modalIn .3s cubic-bezier(.2,.7,.3,1)}
@keyframes modalIn{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.modal-inner{padding:clamp(1.5rem,4vw,2.4rem)}
.modal-close{position:absolute;top:.95rem;right:.95rem;width:40px;height:40px;border:1px solid var(--line);background:var(--panel);color:var(--white);font-size:1.05rem;cursor:pointer;z-index:2;transition:all .2s ease}
.modal-close:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.m-steps{display:flex;gap:.5rem;margin-bottom:1.4rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);flex-wrap:wrap}
.m-steps span{display:flex;align-items:center;gap:.45rem}
.m-steps span::before{content:"";width:26px;height:3px;background:var(--line);transition:background .3s ease}
.m-steps span.on{color:var(--white)}
.m-steps span.on::before{background:var(--accent)}
.modal h3{font-size:1.5rem;letter-spacing:.02em;margin-bottom:.4rem}
.modal .m-sub{color:var(--mut);font-size:.94rem;margin-bottom:1.4rem}
.modal .m-sub a{color:var(--accent);font-weight:700}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.f-row{grid-template-columns:1fr}}
.f-field{margin-bottom:.95rem}
.f-field label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:.4rem}
.f-field input,.f-field select,.f-field textarea{
  width:100%;padding:.85rem .95rem;border:1.5px solid var(--line);border-radius:0;
  background:var(--coal);font-family:var(--font-body);font-size:.98rem;color:var(--white);transition:border-color .2s ease;
}
.f-field select option{background:var(--coal);color:var(--white)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--accent)}
.f-field textarea{min-height:92px;resize:vertical}
.f-err{color:var(--accent);font-size:.84rem;margin-top:.5rem;display:none;font-weight:600}
.day-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:1.1rem}
@media(max-width:520px){.day-grid{grid-template-columns:repeat(3,1fr)}}
.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
@media(max-width:520px){.time-grid{grid-template-columns:repeat(3,1fr)}}
.pick{border:1.5px solid var(--line);background:var(--coal);padding:.6rem .3rem;text-align:center;cursor:pointer;font-family:var(--font-mono);font-size:.78rem;transition:all .18s ease;color:var(--white)}
.pick small{display:block;font-size:.62rem;color:var(--mut-2);letter-spacing:.1em;text-transform:uppercase}
.pick:hover{border-color:var(--accent)}
.pick.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pick.sel small{color:rgba(14,17,22,.7)}
.m-actions{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}
.m-back{background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:.9rem .4rem}
.m-back:hover{color:var(--accent)}
.m-confirm{background:var(--panel);border:1px solid var(--line);padding:1.1rem 1.2rem;margin-bottom:1.2rem}
.m-confirm .row{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;font-size:.93rem}
.m-confirm .row b{font-family:var(--font-mono);font-weight:500;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.m-done{text-align:center;padding:1.5rem 0 .5rem}
.m-done .big{width:72px;height:72px;margin:0 auto 1.2rem;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:1.9rem}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* big outline word */
.giant{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.8rem,7.5vw,6rem);line-height:.92;color:transparent;-webkit-text-stroke:1.6px color-mix(in srgb, var(--accent) 32%, transparent);user-select:none;max-width:100%;overflow:hidden}

/* util */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:3rem}
.center{text-align:center}
.sec-head{max-width:780px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head.center{margin-left:auto;margin-right:auto}

/* ===== HERO DOMINANCE (permanent 2026-07-28) - centered, big, present; kills the narrow "prison box" (Eliot) ===== */
.hero .wrap{align-items:center!important;text-align:center!important;padding-top:7rem!important;padding-bottom:3.5rem!important;min-height:88vh!important;justify-content:center!important;max-width:min(1560px,95vw)!important;padding-left:clamp(1.5rem,4vw,3.5rem)!important;padding-right:clamp(1.5rem,4vw,3.5rem)!important}
.hero .wrap>*{margin-left:auto!important;margin-right:auto!important}
.hero .hero-tag{justify-content:center!important}
.hero h1{max-width:22ch!important;text-align:center!important;margin:0 auto!important;font-size:clamp(3rem,8.6vw,7.2rem)!important;line-height:1.0!important;letter-spacing:-.01em!important}
.hero p{max-width:58ch!important;text-align:center!important;margin:1.9rem auto 2.3rem!important;font-size:clamp(1.08rem,1.6vw,1.32rem)!important}
.hero .hero-strip{justify-content:center!important}
.hero .hero-bg::after{background:linear-gradient(180deg,rgba(6,52,167,.40),rgba(6,52,167,.20) 50%,rgba(6,52,167,.94))!important}
/* readability: brighten the accent eyebrow + proof text so it reads cleanly on the photo
   instead of just relying on the dark gradient above (Sarber Construction real-client
   fix, 2026-08-10 -- was hand-applied there only, generalizing it here). */
.hero .hero-tag{color:#f4f0ee!important;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7)!important;font-weight:600!important}
.hero .hero-tag::before,.hero .hero-tag::after{background:var(--accent)!important}
.hero .hero-proof{color:#f1eeec!important;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.65)!important}
.hero .hero-proof b{color:#fff!important}

/* ===== HERO v3 (Eliot 2026-07-28): stretch WIDER horizontally (was cramped in a narrow center column) + fit a longer headline ===== */
.hero .wrap{max-width:min(1560px,95vw)!important;padding-left:clamp(1.5rem,4vw,3.5rem)!important;padding-right:clamp(1.5rem,4vw,3.5rem)!important}
.hero h1{max-width:min(1320px,94vw)!important;font-size:clamp(2.5rem,6.6vw,5.9rem)!important;line-height:1.03!important}
.hero p{max-width:64ch!important}

/* ===== HERO CONTRAST SCRIM (permanent 2026-07-30): always-readable text on ANY hero photo, esp. bright/orange (Money Saving amber-on-sunset). Soft bottom-up gradient above image, below text. ===== */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(8,10,13,.52) 0%,rgba(8,10,13,.24) 40%,rgba(8,10,13,.05) 72%,transparent 100%)}

/* the hazard band IS the divider; a section border-bottom on top of it draws a
   hairline between the section and the stripes (Wayne, 2026-08-06) */
.section:has(+ .cta-band){border-bottom:0}
.cta-band{border-top:0}

/* HEADER OVERFLOW (2026-08-06). A long business name pushed the nav + phone + CTA past the
   1220px wrap: "Gotham Restoration Group Inc" overflowed by 147px and its Get-a-Free-Quote
   button ran off the right edge of a 1440px viewport. Let the wordmark shrink instead of the
   CTA, and drop the duplicate header phone before anything can clip (the topbar still shows it). */
.site-header .wrap{gap:1rem;min-width:0;max-width:1600px}
.site-header .logo{flex:0 0 auto}
.site-header .logo-word{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(30vw,330px)}
/* On a phone the brand owns the row apart from the burger, so 30vw (117px at 390) cut
   "Teddy's Cleaning" to "Teddy'". Give it the row minus the burger + padding. */
/* 2026-08-09: 132px only reserved room for the burger. The new .btn-mobook
   (below 1300px, so always present at this width) needed room too -- found live
   via nav_check.js flagging a clipped wordmark on the light-template-demo site
   the moment the mobile book button was added. */
@media(max-width:760px){.site-header .logo-word{max-width:calc(100vw - 210px)}}
.site-header .nav{flex:0 1 auto;min-width:0}
.site-header .header-cta{flex:0 0 auto}
/* header-phone shown by default (2026-08-17, Wayne): number belongs next to the book button on every site, not hidden behind the topbar alone. Nav/logo already shrink first via flex:0 1 auto + min-width:0, so this does not reintroduce the pre-2026-08-06 overflow bug. */
@media(max-width:1680px){.site-header .nav{gap:1.05rem}.site-header .nav>a,.site-header .nav .has-drop>a{font-size:.8rem}}

/* HERO HEADLINE ON SAME-HUE PHOTOS (2026-08-06). A green accent word sat on a green lawn and
   was unreadable (Eliot on T.N.A). Scoped per-site via .hero-acc-neutral on <body>. */
.hero h1 .acc{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}

/* Small hero copy needs its own shadow: on a bright hero photo the scrim alone is not
   enough (Eliot 2026-08-06, Eddie Jaguar sunlit canopy). */
.hero p,.hero .hero-tag,.hero .hero-proof{text-shadow:0 1px 8px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.55)}

/* ---- MOBILE FIXES (2026-08-09, ported from ACBrise/Sarber real-client fixes) ----------
   Placed at the END of this file on purpose: HERO DOMINANCE/v3/v4 above are unconditional
   !important rules, so a same-specificity mobile override declared earlier in the
   cascade loses and silently never applies. Confirmed real on Sarber Construction: the
   hero rendered with the full desktop 7rem top padding + 88vh min-height on every phone,
   so the hero + its own CTA button could not fit one mobile screen without scrolling, on
   EVERY site built from this template, since day one -- this is not a one-off bug. */
.btn-mobook{display:none}
/* tap-to-call icon replaces the full phone number on mobile (2026-08-17, Wayne) -- no room for the full number in the mobile header, but the number must always be one tap away. */
.btn-callicon{display:none}
.mm-close{display:none}
@media(max-width:1680px){
  .btn-mobook{display:inline-flex;align-items:center;margin-right:1.1rem;
    padding:.7rem 1.05rem;font-size:.82rem;min-height:44px;white-space:nowrap}
  .site-header .header-cta{display:flex;align-items:center;gap:0}
  /* those 2.5rem margins exist to clear the desktop nav, which is display:none here --
     left in place they reserve 80px of dead space the mobile header no longer needs, and
     with the call-icon added (2026-08-17) that was enough to push the burger off-screen
     on real logos/business names (Creative Homes: burger clipped to 8px visible). */
  .site-header .logo{margin-right:0}
  .site-header .header-cta{margin-left:0}
  .site-header .header-cta .btn-nav{display:none}
  .site-header .header-phone{display:none}
  .btn-callicon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:.6rem;border:1px solid var(--line);border-radius:8px;color:var(--white);flex:none}
  .btn-callicon:hover,.btn-callicon:active{border-color:var(--accent);color:var(--accent)}
  .btn-callicon svg{width:19px;height:19px}
}
@media(max-width:720px){
  .header-cta{gap:.4rem}
  .btn-mobook{margin-right:.85rem;padding:.42rem .38rem;font-size:.56rem;letter-spacing:0}
  .burger{width:32px;height:32px;margin-left:.1rem}
  /* the flex-shrink that lets a long business name compress on desktop was crushing the logo
     itself down to a sliver on a real phone width (ACBrise: 112px natural -> 37px rendered,
     clipped by overflow:hidden -- 2026-08-17, Wayne). The mobile header-cta is compact (icon +
     book button + burger), so there is always room to let the logo keep its natural width. */
  .logo{flex:0 0 auto!important;overflow:visible!important}
  /* the wordmark fallback (no real logo yet) can still clip a long placeholder
     name at this width once burger+book both compete for room; a real logo
     image is unaffected since it sizes off .logo img, not this rule */
  .site-header .logo-word{font-size:1.05rem!important;max-width:calc(100vw - 215px)!important}
  .mm-close{display:flex;align-items:center;justify-content:center;position:fixed;
    top:.6rem;right:.9rem;z-index:140;background:rgba(255,255,255,.10);border:0;border-radius:50%;
    color:var(--white);font-size:2rem;line-height:1;cursor:pointer;width:46px;height:46px}
  /* dvh so iOS Safari's URL bar cannot clip the menu or the hero */
  .mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-top:5rem;padding-bottom:3rem;height:100vh;height:100dvh}
  /* fill the actual mobile screen (dvh accounts for the address bar, unlike 100vh) so the hero
     reads as a deliberate full-screen opener instead of trailing into a sliver of the next
     section -- but keep content itself compact (reduced padding/type below) so nothing needs
     the old 88vh-forces-scroll-to-see-the-CTA bug this replaced (Wayne 2026-08-23). */
  .hero{min-height:100vh!important;min-height:100dvh!important}
  .hero .wrap{min-height:auto!important;padding-top:3rem!important;padding-bottom:1.8rem!important}
  .hero .hero-tag{margin-bottom:1rem!important;font-size:.72rem!important}
  .hero h1{font-size:clamp(1.8rem,8.4vw,2.5rem)!important;line-height:1.05!important}
  .hero p{font-size:.94rem!important;margin:.9rem auto 1.1rem!important}
  .hero-ctas{gap:.6rem}
  .hero .hero-proof{margin-top:.9rem!important;font-size:.7rem!important}
  .modal{max-height:88vh;max-height:88dvh}
  .modal-veil{align-items:flex-start;padding:1rem .75rem}
  .modal .m-actions{position:sticky;bottom:0;background:var(--coal-2);
    padding:.9rem 0 .2rem;margin-top:.6rem;border-top:1px solid var(--line);z-index:5}
  .modal .m-inner,.modal form,.modal-inner{padding-bottom:.2rem}
}

/* Mobile menu: Services expands in place instead of a duplicate "Our Services" list below */
.mobile-menu .mm-toggle{background:none;border:0;width:100%;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;color:inherit;
  font-family:var(--font-display);font-size:clamp(1.8rem,7vw,2.7rem);line-height:1.1;
  padding:.35rem 0;border-bottom:1px solid var(--line)}
.mobile-menu .mm-caret{font-size:.6em;transition:transform .25s ease;opacity:.7;margin-left:.6rem}
.mobile-menu .mm-toggle.open .mm-caret{transform:rotate(180deg)}
.mobile-menu .mm-svc{display:none}
.mobile-menu .mm-svc.open{display:block}
.mobile-menu .mm-svc a{display:block;padding:.55rem 0 .55rem 1rem;font-weight:600;color:var(--mut);
  border-bottom:1px solid var(--line)}
.mobile-menu .mm-svc a:hover{color:var(--accent)}


/* ---------- reviews (real Google reviews) — injected by populate_reviews.js ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.reviews{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;background:var(--panel,#161a21);border:1px solid var(--line,rgba(255,255,255,.08));border-top:3px solid var(--accent);padding:1.9rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
/* 2026-08-21: 9-review homepage strip -- clamp quote length so one long review doesn't force
   every card in its row to stretch to match it (varying real review lengths otherwise made rows
   uneven and left short reviews looking like empty boxes on both mobile and desktop). */
.reviews-9 .rev-card .rev-quote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.reviews-9 .rev-card .rev-quote{-webkit-line-clamp:5}}
.rev-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.45);border-color:var(--accent)}
.rev-card .stars{margin-bottom:1rem}
.rev-quote{font-size:1.02rem;line-height:1.6;flex:1}
.rev-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.rev-author{font-family:var(--font-display,inherit);text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem}
.rev-date{font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-align:right;white-space:nowrap}
.rev-src{font-family:var(--font-mono,monospace);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2,#8b93a1);text-align:center;margin-top:2rem}