/* ============================================================
   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{
  --coal:#0e1116;
  --coal-2:#141922;
  --panel:#1a212c;
  --panel-2:#202834;
  --white:#f2f5f7;
  --mut:#a8b2bc;
  --mut-2:#7f8a95;
  --accent:#3865b2;
  --accent-dark:#284a86;
  --accent-dim:color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent:#ffffff;
  --line:rgba(242,245,247,.13);
  --line-light:rgba(242,245,247,.13);
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Barlow",sans-serif;
  --font-mono:"Montserrat",sans-serif;
  --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{
  position:sticky;top:0;z-index:80;background:rgba(14,17,22,.9);
  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(14,17,22,.97)}
.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}
/* 2026-08-18, Eliot: "logo is way too small" -- this logo is a wide (430x220) icon+2-line-wordmark
   lockup, so it reads cramped at the generic 84px template height. Bumped for this business only. */
/* 2026-09-03: fixed height + width:auto let a shrinking .logo container (overflow:hidden)
   crop the image horizontally instead of scaling it down -- width:auto sized the image off
   its own intrinsic aspect ratio with no regard for the container's actual available width.
   width:100% with max-height capping the height instead lets it shrink proportionally when
   squeezed, so it's only ever smaller, never visually clipped. */
.logo img{width:100%;height:auto;max-height:108px;max-width:340px;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:7px 11px;height:66px;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}}
/* 2026-09-04, Wayne: bumped logo bigger (was 72px, made the earlier "logo too small"
   complaint worse in the other direction at first attempt -- 108px pushed the burger
   clean off a 390px screen). 56px is the largest that still leaves the burger fully
   on-screen alongside the trimmed call-icon/Book-Consult/burger below. */
/* 2026-09-04, Wayne: logo/buttons bigger again, plus real space before the burger. Trimmed
   the header's own side padding (was ~1.1rem) to reclaim a bit more of the ~355px budget. */
@media(max-width:560px){.logo img{height:62px}.site-header .wrap{height:88px;padding-left:.55rem;padding-right:.55rem}}
.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;white-space:nowrap}
.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);margin-left:1.8rem}
.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)}
.btn-callicon{display:none}
@media(max-width:1120px){
  .nav,.header-phone{display:none}
  .burger{display:block}
  /* 2026-09-04, Wayne: hiding .header-phone above left mobile with zero quick-dial option
     until the hamburger menu was opened. This is the SAME .btn-callicon component already
     standard in the current master templates (construction/01+02) -- ported verbatim rather
     than inventing a new one-off button, per Wayne: "why don't you use what you always use?" */
  .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){.btn-callicon{margin-right:.9rem}}
@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(14,17,22,.58) 0%,rgba(14,17,22,.40) 45%,rgba(14,17,22,.10) 75%,rgba(14,17,22,0) 100%),linear-gradient(180deg,rgba(14,17,22,.34) 0%,rgba(14,17,22,.12) 38%,rgba(14,17,22,.20) 62%,rgba(14,17,22,.58) 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}}


/* ---------- 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}
/* 2026-09-09 fleet-wide fix (Arsen, recurring pattern -- A1 Patios, Custom Stone Tile "orphaned
   6th image card"): automatically lays out any real service count cleanly. */
@media(min-width:941px){
.svc-grid:has(.svc-card:only-child) .svc-card{grid-column:span 6}
.svc-grid:has(.svc-card:nth-child(2):last-child) .svc-card{grid-column:span 3}
.svc-grid:has(.svc-card:nth-child(3):last-child) .svc-card{grid-column:span 2}
.svc-grid:has(.svc-card:nth-child(4):last-child) .svc-card{grid-column:span 3}
.svc-grid:has(.svc-card:nth-child(5):last-child) .svc-card:nth-child(-n+3){grid-column:span 2}
.svc-grid:has(.svc-card:nth-child(5):last-child) .svc-card:nth-last-child(-n+2){grid-column:span 3}
.svc-grid:has(.svc-card:nth-child(6):last-child) .svc-card{grid-column:span 2}
}

.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%;height:clamp(210px,24vw,320px);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);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);color:var(--accent);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}

/* Gallery auto-sliding strips (Wayne 2026-09-02, generalized for reuse on future template
   builds): matches rolluppainting.com's real Exterior/Interior gallery split, but also
   genuinely scrollable -- touch swipe, trackpad, mouse wheel, and click-drag all just work,
   because .slide-track-wrap is a REAL horizontal-scroll container, not a transform animation.
   wireSlideTracks() in site.js auto-advances scrollLeft on top of that and wraps it (the image
   list is duplicated once in the HTML) for a genuinely endless loop, pausing the moment a
   visitor touches it. Click a photo to open it in the existing lightbox (wireLightbox()
   already covers .slide-track img). Drop a `.slide-track-wrap` (optionally `.reverse`) with one
   `.slide-track` of <img>s (each duplicated once) into any template; no per-site JS needed. */
/* 2026-09-04: -webkit-overflow-scrolling:touch is a legacy property (removed as a concept in
   iOS 13+, which gives native momentum scrolling to overflow:auto by default without it) that's
   documented to sometimes push a scroll container onto its own compositor layer in a way that
   can silently ignore JS-driven scrollLeft writes until the user has touched it at least once --
   plausible explanation for "the carousel doesn't move" on a real phone that isn't reproducible
   in any desktop-browser test. Dropping it costs nothing on modern Safari and may fix this. */
/* 2026-09-04, Wayne: rebuilt from scratch after 3 targeted fixes (lazy-loading, measurement
   timing, -webkit-overflow-scrolling) still didn't get it moving on a real phone -- the whole
   approach (a JS rAF loop writing to scrollLeft every frame on a native overflow-x:auto
   container) is what's fragile, not any one bug in it. This now uses a plain CSS @keyframes
   transform animation instead: runs on the compositor, is not affected by touch/scroll-event
   interaction at all, and is the standard technique for this exact "infinite photo ticker"
   widget precisely because it just works everywhere, mobile included. */
.slide-track-wrap{overflow:hidden;width:100%;padding:1.6rem 0}
.slide-track{display:flex;gap:1rem;width:max-content;animation-name:slideTrackAnim;animation-timing-function:linear;animation-iteration-count:infinite}
.slide-track-wrap.reverse .slide-track{animation-direction:reverse}
.slide-track-wrap:hover .slide-track{animation-play-state:paused}
@keyframes slideTrackAnim{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.slide-track img{height:320px;width:auto;max-width:none;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line);-webkit-user-drag:none;user-select:none}
@media(max-width:760px){.slide-track img{height:220px}}

/* ---------- 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);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:var(--on-accent);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(--coal) 38%,rgba(14,17,22,.66) 70%,rgba(14,17,22,.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(--coal) 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:#0a0d11;color:var(--mut);border-top:0}
.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,.site-footer h3.f-h{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(9,11,15,.44),rgba(9,11,15,.32) 50%,rgba(9,11,15,.66))!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}
/* 2026-09-04: nav+cta being unshrinkable (fix above) meant logo was the ONLY flexible item,
   so it got crushed to ~88px wide at 1440px on a 7-item nav (Wayne: "look how small the logo
   is"). Give it a real floor and let the nav's own compact/condensed style (below) kick in at
   a wider breakpoint to share the squeeze instead of dumping 100% of it onto the logo. */
.site-header .logo{flex:0 1 auto;min-width:0;overflow:hidden}
/* 2026-09-04: the 190px floor below is a DESKTOP-only fix (nav+cta unshrinkable there, logo
   needs a floor so it doesn't get crushed to nothing). Applying it unconditionally pushed the
   burger button clean off-screen on mobile (390px: burger rendered at x=396, invisible) since
   mobile has no nav to make room for -- Wayne caught the missing mobile menu button live. */
@media(min-width:1121px){.site-header .logo{min-width:190px}}
.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)}}
/* 2026-09-03: flex:0 1 auto let this shrink below its links' natural combined width; the
   links themselves don't shrink individually, so "Contact" rendered OUTSIDE the nav's own box
   and visually overlapped .header-phone next to it (Wayne, live on Alta Vista at 1440px). The
   logo already tolerates shrinking (flex:0 1 auto below), so let it absorb the squeeze instead. */
.site-header .nav{flex:0 0 auto;min-width:0}
.landing-header .wrap{justify-content:space-between}
.landing-nav-cta{padding:.65rem 1.1rem;font-size:.78rem;white-space:nowrap}
@media(max-width:480px){.landing-nav-cta{padding:.55rem .8rem;font-size:.7rem}}
.site-header .header-cta{flex:0 0 auto}
/* 2026-09-03: the blanket .header-phone{display:none} here hid the ONLY phone number visible
   after scrolling (the topbar above it is not sticky, only .site-header is) -- Wayne caught this
   live on Alta Vista. The header .wrap max-width fix (below, HEADER OVERFLOW section bumped to
   1400px) already gives this room it didn't have when the hide was added; showing it again. */
@media(max-width:1650px){.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}
.mm-close{display:none}
@media(max-width:1300px){
  .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:.9rem}
  .site-header .header-cta .btn-nav{display:none}
}
@media(max-width:720px){
  .header-cta{gap:.9rem}
  /* 2026-09-04, Wayne: logo/call-icon/Book-Consult all bumped bigger again. Every px here is
     shared out of the same ~355px of real header width on a 390px phone -- burger trimmed
     slightly (Wayne didn't ask for it bigger) to make room. */
  /* margin-right on the LAST element before the burger is the actual "space before the menu"
     Wayne asked for -- bumped from .3rem to .5rem (a real, visible gap) at the cost of a
     touch of its own padding, to stay inside the same overall width budget. */
  .btn-mobook{margin-right:.5rem;padding:.4rem .4rem;font-size:.6rem;letter-spacing:0}
  .btn-callicon{width:40px!important;height:40px!important;margin-right:.25rem!important}
  .btn-callicon svg{width:17px!important;height:17px!important}
  .burger{width:26px;height:26px;margin-left:0}
  /* 2026-09-04, Wayne: "logo still pretty small on mobile" -- the desktop-only
     `.site-header .logo{flex:0 1 auto;overflow:hidden}` (HEADER OVERFLOW patch, further up
     this file) is MORE specific than the base `.logo{flex:none}`, so it wins at every width,
     including mobile, letting the logo shrink+clip here too even though nothing on mobile
     needs it to. Already-fixed in the current master templates; ported the same override. */
  .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}
}
@media(max-width:400px){
  /* 2026-09-08 fleet sweep: burger measured off-screen on real widths -- .btn-callicon
     (44px + .6rem margin) is the one removable element here; the mobile menu's own mm-cta
     already has a "Call ..." link, so hiding this shortcut loses no real reachability. */
  .btn-callicon{display:none}
  /* at the narrowest real phone widths the logo still ate enough room to leave the burger
     ~11px off-screen even after every other trim -- shrink it slightly only at this range. */
  .logo img{max-width:105px!important}
}
@media(max-width:720px){
  .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}
  /* 2026-09-04, Wayne: the old min-height:auto (was "let the whole hero + both CTAs fit in
     one screen instead of forcing 88vh") collapsed the hero so short the next section's
     stat band was already visible without scrolling. Give it real height back, just less
     than desktop's 88-92vh, so both CTAs still fit without cramming the hero to nothing. */
  /* 2026-09-04, Wayne: still looked short on his real phone even at 78vh. vh on mobile Safari
     is calculated against the browser's LARGEST possible viewport (address bar hidden), so a
     percentage of it can render visibly shorter than intended while the bar is showing on
     first load. dvh tracks the actual current viewport instead -- same two-step fallback
     pattern already used for .mobile-menu further down this file (dvh unsupported = ignored,
     falls back to the vh line above it). Also bumped the target itself higher (88vh/86vh). */
  .hero{min-height:min(88vh,760px)!important;min-height:min(88dvh,760px)!important}
  .hero .wrap{min-height:min(80vh,680px)!important;min-height:min(80dvh,680px)!important;padding-top:3rem!important;padding-bottom:1.8rem!important}
  /* 2026-09-04, Wayne: with the hero now taller (88vh/dvh), tag/title/CTAs looked clumped
     together in the middle. Bigger gap after the tag, and more room before the buttons/proof
     line below, spreads the content out to use the extra height instead of just centering
     a tight cluster in it. */
  .hero .hero-tag{margin-bottom:2rem!important;font-size:.72rem!important}
  /* 2026-09-04, Wayne: "Logan, UT · Epoxy Flooring" wrapped to 2 lines on the ad-landing
     pages -- scoped to data-landing only since the homepage's longer tag text ("...Concrete
     Coatings Contractor") would overflow instead of wrap at these same tighter values. */
  body[data-landing] .hero .hero-tag{white-space:nowrap!important;letter-spacing:.12em!important;font-size:.68rem!important}
  .hero h1{font-size:clamp(2.1rem,10vw,3.1rem)!important;line-height:1.05!important}
  .hero p{font-size:.94rem!important;margin:.9rem auto 2rem!important}
  .hero-ctas{gap:.6rem;margin-top:.4rem}
  .hero .hero-proof{margin-top:1.6rem!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}}
/* 2026-09-04, Wayne: only 4 real reviews exist -- 2-on-2 fills the row width cleanly, a
   3-then-1 wrap looks unbalanced. Scoped to testimonials.html + the 3 ad-landing pages;
   the homepage keeps the base 3-col rule above since it only ever shows 3 reviews. */
.reviews-2col{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.reviews-2col{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}
.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}

/* 2026-09-05 (client): "have a different idea in mind" line was getting skipped as plain body
   text -- a bordered, accent-tinted callout box makes it a distinct visual stop instead of
   blending into the surrounding paragraph copy. Tint uses color-mix so it stays subtle, not
   another solid-accent block (that's exactly what the client asked to get rid of elsewhere). */
.idea-callout{display:inline-block;background:color-mix(in srgb, var(--accent) 14%, transparent);border:1px solid var(--accent);border-radius:8px;padding:1.1rem 1.5rem;max-width:640px}
.idea-callout p{margin:0;font-size:1.1rem;font-weight:700;line-height:1.45}
.idea-callout .acc{color:var(--accent)}

/* 2026-09-05: the lead-gen form column is shorter than the 6-item feature list beside it,
   leaving a big empty gap under the form at desktop widths. Sticky keeps it visible while
   the longer list scrolls past instead of leaving dead space -- but ONLY at the >=941px
   width where .grid-2 is actually 2 columns; below that it stacks to 1 column and doesn't
   need it (and sticking a stacked-order element there would be pointless at best). */
@media(min-width:941px){#lead-gen .lead-gen-form{position:sticky;top:110px;align-self:start}}

/* a11y: skip link (visible only on keyboard focus) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:#fff;color:#000;padding:.7rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{left:8px;top:8px;outline:3px solid #000}
main{display:block}

/* reserves the topbar+header real height before site.js injects it (prevents CLS); not used on data-landing pages */
#siteHeaderPlaceholder{height:131px}
@media(max-width:560px){#siteHeaderPlaceholder{height:127px}}

/* decorative watermark text is rendered from data-t so it is not a text node (a11y contrast + cleaner crawlable text) */
.giant::before{content:attr(data-t)}

/* ==== 2026-09-28 Alta Vista picture-led layer (client form avoidNotes: "keep it simple, like
   apple.com, mainly pictures"). Serif display font to match the logo lettering, sentence-case
   headlines, big real photos, one-line captions. Construction hazard stripes and ghost
   watermark words removed. Header placeholder height is unchanged. ==== */
h1,h2,h3,h4{font-weight:600;text-transform:none;letter-spacing:-.005em;line-height:1.1}
.display-xl{font-size:clamp(2.1rem,5.2vw,4.3rem)}
.display-lg{font-size:clamp(1.8rem,4vw,3.2rem)}
.display-md{font-size:clamp(1.45rem,2.8vw,2.2rem)}
.display-sm{font-size:clamp(1.15rem,1.8vw,1.4rem)}
h1,h2,h3{overflow-wrap:break-word}
.kicker{font-weight:600;letter-spacing:.3em;font-size:.72rem}
.kicker::before{content:none}
.hazard,.page-hero::after,.cta-band::before,.media.frame::before,.media.frame::after,.giant,.giant-bg{display:none!important}
.mobile-menu a.mm-link,.mobile-menu .mm-toggle{text-transform:none}
.btn{border-radius:999px}
.rev-author{text-transform:none;font-weight:600}
.page-hero h1{max-width:22ch}
.page-hero .bgimg img{filter:none}

/* header + footer logo: horizontal lockup (mountain mark placed beside the wordmark) */
.site-header .logo img{width:262px;max-width:100%;height:auto;max-height:none}
.site-footer .logo img{width:300px;max-width:100%;height:auto}
@media(min-width:1121px) and (max-width:1320px){.site-header .logo img{width:205px}.site-header .logo{margin-right:1.2rem}.site-header .header-cta{margin-left:1.2rem}}
@media(max-width:1120px){.site-header .logo img{width:250px}}
@media(max-width:720px){.site-header .logo img{width:212px!important;max-width:none!important}
  .btn-mobook{font-size:.72rem;padding:.45rem .7rem}
  .site-header .logo{margin-right:.5rem}.site-header .header-cta{margin-left:0;gap:.5rem}}
@media(max-width:480px) and (min-width:401px){.site-header .logo img{width:200px!important}}
@media(max-width:400px){.site-header .logo img{width:198px!important;max-width:none!important}}

/* picture-led blocks */
.pl-sec{padding:clamp(3.4rem,8vw,6.5rem) 0}
.pl-sec.alt{background:var(--coal-2)}
.pl-head{text-align:center;max-width:760px;margin:0 auto clamp(1.8rem,4vw,2.8rem)}
.pl-head .kicker{justify-content:center}
.pl-head p{color:var(--mut);font-size:clamp(1.02rem,1.5vw,1.2rem);margin-top:.9rem}
.pl-copy{max-width:66ch;margin:0 auto;color:var(--mut);font-size:clamp(1rem,1.35vw,1.12rem)}
.pl-copy p+p{margin-top:.9rem}
.pl-copy a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.pl-ctas{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}

.pl-hero{padding:clamp(3rem,7vw,5.5rem) 0 0;text-align:center}
.pl-hero .kicker{justify-content:center;margin-bottom:1rem}
.pl-hero h1{font-size:clamp(2.3rem,6vw,4.9rem);max-width:18ch;margin:0 auto}
.pl-hero .pl-lead{color:var(--mut);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:44ch;margin:1.1rem auto 0}
.pl-hero-photo{margin:clamp(2rem,5vw,3.4rem) auto 0;max-width:1400px;padding:0 clamp(.8rem,3vw,2rem)}
.pl-hero-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:22px}
@media(max-width:720px){.pl-hero-photo img{aspect-ratio:4/3;border-radius:16px}}

.pl-photo{border-radius:18px;overflow:hidden;background:var(--panel);position:relative}
.pl-photo img{width:100%;height:100%;object-fit:cover}
.pl-cap{font-size:.92rem;color:var(--mut);margin-top:.7rem;text-align:center}

.pl-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.pl-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pl-tile{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--panel);isolation:isolate}
.pl-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1);z-index:-2}
.pl-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,10,13,0) 40%,rgba(8,10,13,.82) 100%)}
a.pl-tile:hover img{transform:scale(1.04)}
.pl-tile .pl-tt{position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,2.2vw,1.6rem)}
.pl-tile h2,.pl-tile h3{font-size:clamp(1.3rem,2.2vw,1.9rem);color:#fff}
.pl-tile p{color:#e3e8ee;font-size:.98rem;margin-top:.3rem}
.pl-tile .pl-more{display:inline-block;margin-top:.45rem;color:#fff;font-weight:600;font-size:.92rem}
@media(max-width:900px){.pl-tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pl-tiles,.pl-tiles.three{grid-template-columns:1fr}.pl-tile{aspect-ratio:4/3}}

.pl-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.pl-duo .pl-photo{aspect-ratio:4/3}
.pl-duo .pl-photo.tall,.pl-photo.tall{aspect-ratio:3/4}
.pl-label{position:absolute;top:.8rem;left:.8rem;background:rgba(10,13,17,.78);color:#fff;font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px}
@media(max-width:640px){.pl-duo{grid-template-columns:1fr}}

.pl-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.pl-split .pl-photo{aspect-ratio:4/3}
.pl-split h2{margin-bottom:.9rem}
.pl-split p{color:var(--mut)}
.pl-split p+p{margin-top:.8rem}
.pl-split.flip>:first-child{order:2}
@media(max-width:860px){.pl-split{grid-template-columns:1fr}.pl-split.flip>:first-child{order:0}}

.pl-rating{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin:0 auto 1.8rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.2rem;width:max-content;max-width:100%}
.pl-rating b{font-family:var(--font-display);font-size:1.5rem;color:#fff;line-height:1}
.pl-rating .stars{color:#f5c542!important;letter-spacing:.12em;margin:0}
.pl-rating span{color:var(--mut);font-size:.95rem}
.pl-rev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.pl-rev .rev-card{border-radius:16px;border-top-width:1px;padding:1.5rem}
.pl-rev .rev-card .stars{color:#f5c542!important}
.pl-rev .rev-quote{font-size:1rem}
@media(max-width:940px){.pl-rev{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pl-rev{grid-template-columns:1fr}}

.pl-points{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.4rem}
.pl-points span{border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:.9rem;color:var(--white);background:var(--panel)}
.pl-faq{max-width:820px;margin:0 auto}
.pl-faq .faq-item{border-radius:14px}
body .cta-band .kicker{color:#fff}
.cta-band h2{max-width:20ch}
.pl-foot-lic{color:var(--mut)}
@media(max-width:560px){.pl-foot-lic{display:block;margin-top:.25rem}.pl-sep{display:none}}
.pl-copy h2,.pl-copy h3{color:var(--white)}
@media(min-width:521px){.gal-item.wide{grid-column:span 2;aspect-ratio:8/3}}
.crumbs::before{content:none!important}
.site-footer .logo img{width:260px!important;max-width:100%!important;height:auto!important}
.pl-head p a,.pl-split p a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* 2026-09-28 inner heroes: photo clearly visible, scrim dark on the text side only */
.page-hero{padding:clamp(8rem,14vw,11.5rem) 0 clamp(4rem,7vw,6rem)}
.page-hero .bgimg{inset:0!important}
.page-hero .bgimg img{object-position:center 38%}
.page-hero::before{background:linear-gradient(90deg,rgba(10,13,17,.86) 0%,rgba(10,13,17,.78) 40%,rgba(10,13,17,.42) 66%,rgba(10,13,17,.08) 100%)!important}
.page-hero h1{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.page-hero .lead{color:#e6ebf0!important;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.page-hero .crumbs,.page-hero .crumbs a{color:#d3dae1}
@media(max-width:720px){
  .page-hero{padding-top:15rem}
  .page-hero::before{background:linear-gradient(180deg,rgba(10,13,17,.02) 0%,rgba(10,13,17,.18) 30%,rgba(10,13,17,.84) 46%,rgba(10,13,17,.9) 100%)!important}
}

/* a11y contrast overrides (2026-09-26, axe-core verified) */
:root{--accent-text:#7a9cd8}
body .acc,body .red,body .kicker,body .btn-ink,body .statement em,body .mobile-menu .mm-sub,body .hs-tag,body .hs-copy h1 .acc,body .hero-proof .stars,body .hs-plate b,body .hero-strip b,body .hero-tag,body .svc-num,body .svc-link,body .bvl-specs .row b,body .go,body .area-row .co,body .tc-label,body .stars,body .crumbs::before,body .spec-table td:first-child,body .faq-item summary::after,body .site-footer h4,body .site-footer h3.f-h,body .modal .m-sub a,body .f-err,body .m-confirm .row b,body .rev-date,body .rev-more,body .step::before{color:var(--accent-text)}
body .cta-band .btn-solid,body .cta-band .btn-red,body .cta-band .btn-ghost-light:hover,body .cta-band .btn-light:hover,body .cta-band .btn-ghost:hover,body .cta-band .btn-ink:hover{color:var(--accent-text)}
body .idea-callout .acc{color:#9db6e3}

/* ---------- GHL form popup (Website form, wired 2026-09-28) ---------- */
.modal.modal-ghl{width:min(640px,100%);background:var(--coal-2);border-top:4px solid var(--accent)}
.modal-ghl .modal-inner{padding-bottom:1.2rem}
.modal-ghl .m-kicker{font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text,var(--accent));margin:0 0 .7rem}
.modal-ghl h3{font-family:var(--font-display);color:var(--white);font-size:clamp(1.5rem,4.2vw,2rem);line-height:1.02;padding-right:2.6rem}
.modal-ghl .m-sub{font-family:var(--font-body);margin-bottom:0}
.modal-ghl iframe{background:#fff;border-radius:var(--rad,0)!important}

/* ---------- SEO copy in collapsed <details> (2026-09-28): indexed, visually quiet ---------- */
.more-about{max-width:820px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;border-top:1px solid var(--line);text-align:left}
.more-about summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;padding:1rem 0;font-family:var(--font-body);font-size:.95rem;font-weight:500;letter-spacing:.02em;color:var(--mut)}
.more-about summary::-webkit-details-marker{display:none}
.more-about summary::before{content:"+";flex:none;font-size:1.15rem;line-height:1;color:var(--mut);transition:transform .2s ease}
.more-about[open] summary::before{transform:rotate(45deg)}
.more-about summary:hover{color:var(--white)}
.more-about summary:focus-visible{outline:2px solid var(--accent-text,var(--accent));outline-offset:3px}
.more-about-body{padding:.3rem 0 1.2rem;color:var(--mut);max-width:70ch}
.more-about-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.1;color:var(--white);margin:.3rem 0 1rem}
.more-about-body h3{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.15;color:var(--white);margin:1.6rem 0 .6rem}
.more-about-body p{margin:0 0 .9rem}
.more-about-body a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* QC alta-gridgap-01 (2026-09-29): last tile row filled, fleet last-row pattern (6-track; site-only). */
@media(min-width:901px){
  .pl-tiles.three{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pl-tiles.three>.pl-tile{grid-column:span 2}
  .pl-tiles.three>.pl-tile:last-child:nth-child(3n+2),
  .pl-tiles.three>.pl-tile:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
  .pl-tiles.three>.pl-tile:last-child:nth-child(3n+1){grid-column:3 / span 2}
}
@media(min-width:641px) and (max-width:900px){
  .pl-tiles.three>.pl-tile:last-child:nth-child(odd){grid-column:1 / -1}
}

/* nav-phone (2026-09-29, Arsen rule: a visible phone button in the header at every width). The full number shows where it fits (existing rules);
   this icon button shows in every range where the number is hidden. Hidden only below 340px, where the header has no room (mobile menu keeps the Call link). */
.site-header .header-cta .btn-callicon{align-items:center;justify-content:center;width:40px;height:40px;margin:0 .5rem 0 0;border:1px solid var(--line,rgba(255,255,255,.28));border-radius:8px;color:var(--white,#fff);flex:none}
.site-header .header-cta .btn-callicon svg{width:18px;height:18px}
.site-header .header-cta .btn-callicon:hover,.site-header .header-cta .btn-callicon:active{border-color:var(--accent);color:var(--accent)}
@media(max-width:1120px){.site-header .header-cta .btn-callicon{display:inline-flex!important}}
@media(max-width:355px){.site-header .header-cta .btn-callicon{display:inline-flex!important}.site-header .header-cta .btn-mobook,.site-header .header-cta .btn-nav{display:none!important}}
/* nav-phone: make room for the call icon in the phone header without shrinking the logo or the 40px tap target (spacing only). */
@media(max-width:430px){
  .site-header .wrap{gap:.5rem}
  .site-header .logo{margin-right:0}
  .site-header .header-cta{gap:.375rem}
  .site-header .header-cta .btn-callicon{margin:0}
  .site-header .header-cta .btn-mobook{margin-right:0;padding-left:.6rem;padding-right:.6rem}
}
@media(max-width:380px){
  .site-header .wrap{padding-left:.4rem;padding-right:.4rem}
  .site-header .logo img{width:188px!important;max-width:188px!important}
  .site-header .header-cta .btn-mobook{padding-left:.45rem;padding-right:.45rem}
}