/* ============================================================
   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:#16a34a;
  --accent-dark:#107a37;
  --accent-dim:rgba(22,163,74,.14);
  --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:12px;background:repeating-linear-gradient(135deg,var(--accent) 0 16px,var(--coal) 16px 32px)}
/* 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,
   2026-08-10 -- confirmed the same bug live on Sarber Construction too, so this is a
   template-wide gap, not specific to this site). 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 the <script src="site.js"> tag 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 rgba(22,163,74,.18)}
.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:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:1rem}
.topbar a{color:var(--on-accent);font-weight:700}
.topbar a:hover{text-decoration:underline}
.topbar .tagline{display:none}
/* On mobile the phone number alone read as thin/low-value (Wayne, live screenshot,
   2026-08-10) -- the phone is already prominent in the hero's own CALL button just
   below, so swap this thin strip for the real tagline off their branded truck decal
   instead of duplicating the number here. */
@media(max-width:720px){.topbar .area,.topbar a{display:none}.topbar .tagline{display:block}.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:1.5rem;height:92px}
.logo{display:flex;align-items:center;gap:.7rem;flex:none}
.logo img{height:86px;width:auto;max-width:300px;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:transparent;border-radius:0;padding:0;box-shadow:none}
.site-footer .logo img{height:100px}
.site-footer .logo img.logo-chip{height:100px;background:transparent;padding:0;box-shadow:none}
/* wordmark logo (greenfield / no real logo image) */
.logo-word{font-family:var(--font-display);max-width:min(40vw,440px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.02em;line-height:.9;font-size:clamp(1.7rem,2.7vw,2.15rem);font-weight:800;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:64px}.site-header .wrap{height:78px}}
.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)}
.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:1120px){
  .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 rgba(22,163,74,.22)}
.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.05) saturate(1.02);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:linear-gradient(180deg,rgba(14,17,22,.66) 0%,rgba(14,17,22,.36) 36%,rgba(14,17,22,.42) 60%,rgba(14,17,22,.84) 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:nowrap}
.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 ---------- */
.statband{background:var(--accent);color:var(--on-accent);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(--on-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}
/* 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:rgba(22,163,74,.5);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:1fr 1fr}
.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}

/* ---------- 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:rgba(22,163,74,.45)}
.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:12px;background:repeating-linear-gradient(135deg,var(--coal) 0 16px,transparent 16px 32px)}
.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,.82);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:8px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,transparent 14px 28px);opacity:.85}
.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:rgba(22,163,74,.45)}
.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:1px solid var(--line)}
.footer-cta{border-bottom:1px solid var(--line);position:relative}
.footer-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(135deg,var(--accent) 0 14px,transparent 14px 28px)}
.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 rgba(22,163,74,.32);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,.78),rgba(9,11,15,.64) 50%,rgba(9,11,15,.86))!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,.82) 0%,rgba(8,10,13,.55) 38%,rgba(8,10,13,.15) 70%,transparent 100%)}


/* ---------- 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}
.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}

.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}

/* ---- 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}
.btn-callicon{display:none}
@media(max-width:1300px){
  /* header-phone only collides with .btn-mobook once it appears in this range (0px gap,
     real screenshot 2026-08-10) -- hide it here, not unconditionally, so it can show at
     wide desktop next to the Request a Callback button as intended. */
  .header-phone{display:none}
  .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}
  .btn-callicon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:.9rem;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:.9rem}
  .btn-mobook{margin-right:.85rem;padding:.42rem .38rem;font-size:.56rem;letter-spacing:0}
  .btn-callicon{margin-right:.9rem}
  .burger{width:32px;height:32px;margin-left:.1rem}
  /* 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){
  /* burger measured off-screen by ~43px at 320px even after shortening .btn-mobook -- hide the
     redundant call-icon shortcut; the mobile menu's own mm-cta already has a "Call ..." link. */
  .btn-callicon{display:none}
}
@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}
  /* Full-bleed hero: fill the whole screen edge to edge instead of stopping short and
     leaving a flat gap before the stat band (Wayne, live screenshot, 2026-08-10 -- the
     content itself is only ~540px tall at 390 wide, well under one screen, so growing
     the box to 100dvh just re-centers it with more breathing room; it does NOT reintroduce
     the original bug this block existed to fix, which was TEXT overflowing horizontally
     and pushing content taller than the box, not the box being too short for the content). */
  .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}
}

/* This site's actual headline ("Lawn care, mowing & landscaping,") is longer than the
   template default it was tuned against -- even at the clamp's floor size it still
   needed 447px on one line inside a 366px hero at 390px wide (real device screenshot,
   Wayne 2026-08-10). The nowrap is for the line-reveal animation's mask, not a hard
   requirement; letting it wrap here just makes the reveal cover 2 lines instead of 1.
   Ported from Sarber Construction's hero readability pass, which had already solved
   this the cleaner way (wrap below 1200px, restore the reveal's nowrap above it) --
   this exact block existed hand-tuned on Sarber and was never generalized or ported
   to this site, same gap as the mobile-fixes backport (Wayne, 2026-08-10). */
.hero h1 .hl-in{white-space:normal!important}
@media(min-width:1200px){.hero h1 .hl-in{white-space:nowrap!important}}
.hero p{max-width:74ch!important}
.hero .hero-ctas{justify-content:center!important}
/* readability: brighten the accent eyebrow + proof text so it reads cleanly on the photo */
.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}
/* the darker "v3/v4 unconditional" gradient above still applies at 100% opacity through
   the whole hero, making the actual photo read as flat black instead of a real scene --
   Sarber's real-client fix lightens the middle band so the photo shows through. */
.hero .hero-bg::after{background:linear-gradient(180deg,rgba(9,11,15,.72),rgba(9,11,15,.42) 46%,rgba(9,11,15,.5) 66%,rgba(9,11,15,.86))!important}

/* 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)}

/* 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) */
#siteHeaderPlaceholder{height:129px}
@media(max-width:560px){#siteHeaderPlaceholder{height:115px}}

/* 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)}

/* eco-lawn-pros 2026-09-28 (client builder): mascot logo legible on phones (artwork unchanged, only sized up) */
@media(max-width:560px){
  .site-header .logo img{height:96px;max-width:none}
  .site-header .wrap{height:104px}
  #siteHeaderPlaceholder{height:141px}
}
/* ghost watermark words removed from the markup; keep any leftover hidden */
.giant-bg,.giant{display:none!important}

/* eco-lawn-pros 2026-09-28: rating badge (replaces filler rating card), promo pill, owner note */
.rating-badge{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .8rem;margin:0 auto;padding:1rem 1.3rem;border:1px solid var(--line,rgba(255,255,255,.12));font-family:var(--font-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.rating-badge b{font-size:1.25rem}
.rating-badge a{color:inherit;text-decoration:underline}
.promo-pill{display:inline-block;margin:.9rem auto 0;background:var(--coal,#0e1116);color:#fff;padding:.6rem 1rem;font-family:var(--font-mono);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.owner-note{max-width:760px;margin:2rem auto 0;padding:1.4rem 1.6rem;border-left:3px solid var(--accent)}
.owner-note p{margin-top:.5rem;line-height:1.6}
.rev-noted{opacity:.75;font-style:italic}
.cta-band .promo-pill,.promo-pill{color:#fff!important;background:var(--coal,#0e1116)!important;max-width:none}
/* two-photo before/after pairs: 2 columns on desktop instead of 2 of 4 tiles */
@media(min-width:641px){.gal-grid.ba-grid{grid-template-columns:1fr 1fr}}
.award-badge{margin-top:.8rem;gap:.4rem 1.6rem;font-size:.74rem}

/* review grid: a lone card in the last row spans the full row (no orphan gap) */
@media(min-width:901px){.reviews>.rev-card:last-child:nth-child(3n+1){grid-column:1/-1}}
@media(min-width:641px) and (max-width:900px){.reviews>.rev-card:last-child:nth-child(2n+1){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:1300px){.site-header .header-cta .btn-callicon{display:inline-flex!important}}
@media(max-width:340px){.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}}