/* ===================================================================
   Brightside Construction — Workmanlike Trustworthy · Bright Side Yellow
   Locked direction (build_recipes.locked_direction):
   bg #FFFFFF · surface #F3F3EF · ink #050403 · ink-soft #5A5F66
   accent #FDFD05 · accent-on #050403 · Manrope/Inter · radius 8px · standard
   =================================================================== */

/* ---- Self-hosted variable fonts (BUILD-STANDARDS §6b) ---- */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;
  font-display:swap;src:url(/assets/fonts/manrope.woff2) format("woff2");
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;
  font-display:swap;src:url(/assets/fonts/inter.woff2) format("woff2");
}
/* Wave 8 (8.2) — ONE deliberate founder signature on /about only. A real
   signature is a mark, not body type, so this is the single sanctioned
   exception to design.md's script-font ban. Loaded + used for nothing else. */
@font-face{
  font-family:'Caveat';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/fonts/caveat.woff2) format("woff2");
}
/* Metric-matched fallbacks (kill FOUT/faux-bold layout shift) */
@font-face{
  font-family:'Manrope Fallback';src:local('Arial');
  size-adjust:103%;ascent-override:101%;descent-override:28%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';src:local('Arial');
  size-adjust:107%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%;
}

:root{
  --bg:#FFFFFF;
  --surface:#F3F3EF;
  --ink:#050403;
  --ink-soft:#5A5F66;
  --accent:#FDFD05;
  --accent-2:#FFD400;          /* hover gold */
  --accent-on:#050403;
  --line:#E4E3DD;
  --line-strong:#050403;

  --font-head:'Manrope','Manrope Fallback',system-ui,sans-serif;
  --font-body:'Inter','Inter Fallback',system-ui,sans-serif;

  --radius:8px;
  --radius-sm:6px;
  --maxw:1180px;
  --pad-sec:clamp(3.25rem,6vw,5.5rem);
  --shadow-sm:0 1px 2px rgba(5,4,3,.06),0 2px 8px rgba(5,4,3,.05);
  --shadow-md:0 6px 24px rgba(5,4,3,.10);
  --header-h:72px;

  --load-hero-video:1;          /* JS reads this; 0 on phones = static poster only */
}
@media (max-width:767px){:root{--load-hero-video:0}}

*{box-sizing:border-box}
*{font-synthesis:none}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =================================================================
   Entrance reveals (Wave 2, item 2.6)
   Major sections fade + rise once on scroll-in. IntersectionObserver in
   main.js adds .is-in. JS only sets [data-reveal]'s start state when it
   confirms support + motion is allowed, so no-JS + reduced-motion users
   ALWAYS see the visible end-state, never a blank frame.
   ================================================================= */
[data-reveal]{opacity:1;transform:none}
.reveal-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-ready [data-reveal]{opacity:1;transform:none;transition:none}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:clamp(1rem,.3vw + .94rem,1.125rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:var(--font-head);font-weight:800;line-height:1.1;margin:0;letter-spacing:-.018em;text-wrap:balance}
/* Accent word inside a headline. Clean yellow in the SAME weight/style as the
   headline (no italic, no outline stroke). A soft shadow keeps it legible over
   the photo/video hero and on the dark subheros. ONLY used on dark grounds —
   yellow on a white section is illegible (design.md), so light-section
   headlines do not use .hl. */
.hl{color:var(--accent);text-shadow:0 1px 8px rgba(0,0,0,.4)}
h2{font-size:clamp(1.75rem,3.2vw + .5rem,2.65rem)}
h3{font-size:clamp(1.2rem,1.4vw + .6rem,1.5rem);font-weight:700;line-height:1.25}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.accent{color:var(--accent);-webkit-text-stroke:.4px var(--line-strong)}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem;display:flex;align-items:center;gap:.55rem}
.kicker::before{content:"";width:26px;height:3px;background:var(--accent);border:1px solid var(--line-strong);border-radius:2px}
.lede{color:var(--ink-soft);max-width:60ch;font-size:clamp(1.02rem,.4vw + .95rem,1.18rem)}
section{padding:var(--pad-sec) 0}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-head);font-weight:800;font-size:1rem;letter-spacing:.005em;
  padding:.85rem 1.5rem;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,filter .15s ease,background .15s ease,box-shadow .15s ease;
  touch-action:manipulation;text-align:center;line-height:1.15;
}
.btn--primary{background:var(--accent);color:var(--accent-on);border-color:var(--line-strong);box-shadow:0 2px 0 var(--line-strong)}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--onlight{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--lg{padding:1rem 1.7rem;font-size:1.06rem}
@media (hover:hover){
  .btn--primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 4px 0 var(--line-strong)}
  .btn--secondary:hover{background:var(--ink);color:#fff}
  .btn--onlight:hover{filter:brightness(1.15)}
}
.btn--primary:active{transform:translateY(0);box-shadow:0 1px 0 var(--line-strong)}
/* Wave 3 (3.6 — keep the flat Bright-Side-yellow identity, add SUBTLE depth):
   primary button gets a subtle yellow→warm-gold vertical gradient that still
   reads as the brand yellow, KEEPING the 2px black border + offset shadow that
   echo the logo. Hover deepens to solid warm-gold + a sharper offset shadow
   (3.7). Not a generic SaaS gradient — the black border + hard offset stay. */
.btn--primary{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 100%)}
@media (hover:hover){
  .btn--primary:hover{background:linear-gradient(180deg,var(--accent-2) 0%,#F0C400 100%);transform:translateY(-2px);box-shadow:0 5px 0 var(--line-strong),0 10px 18px rgba(5,4,3,.22)}
}
/* The dark final-CTA button keeps its solid ink fill; just deepen the hover shadow (3.7). */
@media (hover:hover){.finalcta .btn--primary:hover{box-shadow:0 5px 0 rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.3)}}

/* =================================================================
   Wave 3 (3.4 + 3.8): Universal focus-visible rings — the accessibility win.
   2px accent outline + 4px offset on every focusable element. Keyboard users
   get a clear, WCAG-visible ring; mouse users don't (focus-visible only).
   On yellow grounds the accent-on-accent ring would vanish, so those surfaces
   use the ink color. Any bare outline:none is paired with a real replacement.
   ================================================================= */
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
/* On the bright-yellow surfaces, a yellow ring is invisible — use ink instead. */
.finalcta a:focus-visible,.finalcta button:focus-visible,
.callbar a:focus-visible,
.btn--primary:focus-visible,
.town--home:focus-visible{outline-color:var(--ink)}
/* The flat finalcta primary button is dark on yellow — keep its ring accent. */
.finalcta .btn--primary:focus-visible{outline-color:var(--accent)}

/* =================================================================
   Header / nav  (P-003 transparent-on-load → opaque-on-scroll)
   ================================================================= */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:var(--header-h);max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand img{height:44px;width:44px;border-radius:50%;object-fit:cover;background:#fff}
.brand .wordmark{font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;line-height:1.05;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);transition:color .25s ease,text-shadow .25s ease}
.brand .wordmark small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}

.nav-links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-links > li > a, .nav-links > li > button{
  font-family:var(--font-body);font-weight:600;font-size:.95rem;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.5);padding:.5rem .7rem;border-radius:var(--radius-sm);
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:color .25s ease,background .15s ease;
}
@media (hover:hover){.nav-links > li > a:hover,.nav-links > li > button:hover{background:rgba(255,255,255,.14)}}
.nav-cta{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.nav-phone{font-family:var(--font-head);font-weight:800;font-size:1rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);display:none}
.nav .btn{padding:.6rem 1.05rem;font-size:.92rem}

/* scrolled state */
.site-header.is-scrolled{background:var(--surface);box-shadow:var(--shadow-sm);border-bottom-color:var(--line)}
.site-header.is-scrolled .brand .wordmark,
.site-header.is-scrolled .nav-links > li > a,
.site-header.is-scrolled .nav-links > li > button,
.site-header.is-scrolled .nav-phone{color:var(--ink);text-shadow:none}
@media (hover:hover){.site-header.is-scrolled .nav-links > li > a:hover,.site-header.is-scrolled .nav-links > li > button:hover{background:rgba(5,4,3,.06)}}

/* Services dropdown (§7a) */
.has-dropdown{position:relative}
.has-dropdown::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px}
.submenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  width:min(620px,calc(100vw - 2rem));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);
  padding:.6rem;list-style:none;margin:0;opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease;z-index:70;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:.35rem;
}
.submenu::before{content:"";position:absolute;left:50%;top:.9rem;bottom:.9rem;width:1px;background:var(--line)}
.has-dropdown:hover .submenu,.has-dropdown:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .7rem;border-radius:8px;color:var(--ink);text-shadow:none}
.submenu a .ico{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--accent);border:1.5px solid var(--line-strong);display:grid;place-items:center}
.submenu a .ico svg{width:18px;height:18px;color:var(--ink)}
.submenu a b{font-family:var(--font-head);font-weight:700;font-size:.95rem;display:block}
.submenu a span{font-size:.8rem;color:var(--ink-soft)}
@media (hover:hover){.submenu a:hover{background:var(--surface)}}

/* mobile drawer */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:2.5px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.site-header.is-scrolled .nav-toggle span,.site-header.is-open .nav-toggle span{background:var(--ink);box-shadow:none}

@media (max-width:880px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:flex}
  .nav .btn{display:none}
  /* open drawer → header forced opaque (§7a) */
  .site-header.is-open{background:var(--surface);box-shadow:var(--shadow-sm);border-bottom-color:var(--line)}
  .site-header.is-open .brand .wordmark{color:var(--ink);text-shadow:none}
  .site-header.is-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .site-header.is-open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.is-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .drawer{
    position:fixed;inset:var(--header-h) 0 0 0;background:var(--surface);z-index:55;
    transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;overscroll-behavior:contain;
    padding:1.25rem clamp(1.1rem,5vw,2rem) calc(2rem + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:.25rem;
  }
  .drawer.is-open{transform:translateX(0)}
  .drawer > a{display:block;font-family:var(--font-head);font-weight:700;font-size:1.18rem;padding:.85rem .25rem;border-bottom:1px solid var(--line);color:var(--ink)}
  .drawer .drawer-sub{display:flex;flex-direction:column}
  .drawer .drawer-sub a{display:block;font-family:var(--font-body);font-size:1rem;font-weight:600;color:var(--ink-soft);padding:.6rem .25rem .6rem 1rem;border-bottom:1px solid var(--line)}
  .drawer .btn{margin-top:1.1rem;width:100%}
  .drawer .drawer-phone{margin-top:.4rem;font-family:var(--font-head);font-weight:800;font-size:1.2rem;text-align:center;padding:.6rem}
}
@media (min-width:881px){.drawer{display:none}}

/* =================================================================
   Hero — image-overlay-text (Portfolio-Forward, §12d)
   ================================================================= */
.hero{position:relative;min-height:88vh;min-height:88dvh;display:flex;align-items:flex-end;padding-top:calc(var(--header-h) + 2rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img,.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__video{z-index:1}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}
.hero__scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(5,4,3,.55) 0%,rgba(5,4,3,.18) 32%,rgba(5,4,3,.45) 72%,rgba(5,4,3,.82) 100%),
  linear-gradient(90deg,rgba(5,4,3,.62) 0%,rgba(5,4,3,.20) 55%,rgba(5,4,3,0) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero__inner{max-width:42rem;color:#fff;position:relative}
/* Wave 3 (3.3): subtle radial halo behind the hero text column. LOW alpha so it
   lifts the H1 off the video without muddying legibility (verified on the mobile
   shot). The dark scrim does the heavy lifting; this just warms the text ground. */
.hero__inner::before{content:"";position:absolute;z-index:-1;left:-12%;top:-8%;width:115%;height:130%;background:radial-gradient(60% 55% at 32% 38%,rgba(253,253,5,.10),rgba(5,4,3,0) 70%);pointer-events:none}
.hero .eyebrow{color:#fff;opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.5);display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem}
.hero .eyebrow b{color:var(--accent);-webkit-text-stroke:.4px rgba(0,0,0,.5)}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.2vw + .5rem,4.25rem);margin:1rem 0 0;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero__sub{color:rgba(255,255,255,.94);font-size:clamp(1.08rem,.6vw + 1rem,1.3rem);margin-top:1.15rem;max-width:50ch;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.9rem;font-size:.92rem;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.hero__trust span{display:inline-flex;align-items:center;gap:.45rem}
.hero__trust .tick{color:var(--accent);font-weight:800}

/* Hero credibility card (Wave 1, item 1.5 substitute).
   NO fabricated customer quote — real signals only: BBB A+, insured & bonded,
   local family since 2022, fast storm response. Glassmorphic panel over the
   video hero, sized so it reinforces the text column without crowding it. */
.glass-card{
  margin-top:2rem;display:inline-flex;flex-wrap:wrap;gap:.95rem 1.1rem;
  padding:1.05rem 1.2rem;border-radius:14px;max-width:34rem;
  background:rgba(5,4,3,.42);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(5,4,3,.35);
}
.glass-card .cred{display:flex;align-items:center;gap:.6rem;min-width:calc(50% - .6rem);color:#fff}
.glass-card .cred svg{flex:0 0 auto;width:20px;height:20px;color:var(--accent)}
.glass-card .cred b{display:block;font-family:var(--font-head);font-weight:800;font-size:.95rem;line-height:1.15;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.glass-card .cred span{display:block;font-size:.78rem;color:rgba(255,255,255,.82);text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (max-width:560px){.glass-card{gap:.85rem 1rem;padding:1rem}.glass-card .cred{min-width:100%}}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){.glass-card{background:rgba(5,4,3,.66)}}

/* =================================================================
   Trust bar
   ================================================================= */
.trustbar{background:var(--ink);color:#fff}
.trustbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 2rem;padding:1.05rem clamp(1.1rem,4vw,2rem);text-align:center}
.trustbar b{font-weight:700}
.trustbar .item{display:inline-flex;align-items:center;gap:.5rem;font-size:.94rem;font-weight:600;transition:color .18s ease}
.trustbar .item svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
/* Wave 3 (3.5 adapted — no third-party logos exist to marquee; static
   credential strip retained, no fabricated logos). The strip stays static; each
   real credential gets a subtle attention-reward on hover (icon lift). */
@media (hover:hover){.trustbar .item:hover svg{transform:translateY(-2px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.trustbar .item,.trustbar .item svg{transition:none}.trustbar .item:hover svg{transform:none}}
.trustbar .sep{width:5px;height:5px;border-radius:50%;background:var(--accent);display:none}
@media (min-width:760px){.trustbar .sep{display:inline-block}}

/* =================================================================
   Services grid
   ================================================================= */
.section-head{max-width:62ch}
.services-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(3,1fr);margin-top:2.4rem}
@media (max-width:820px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.services-grid{grid-template-columns:1fr}}
.scard{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.55rem;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease;position:relative;display:flex;flex-direction:column}
/* Wave 3 (3.1): cards lift -6px with a deeper shadow; the accent icon tile is
   the card's "inner image" — it scales + rotates a hair on hover. */
@media (hover:hover){.scard:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(5,4,3,.16);border-color:var(--line-strong)}}
/* Wave 4 (4.8): icon-tile depth — hard offset (ink), a soft blurred drop
   beneath, and a faint accent glow ring so the yellow tile reads raised, not
   pasted-on. The 2px ink border is the brand's hard-edge idiom; the shadows add
   the dimensionality. */
.scard__ico{width:50px;height:50px;border-radius:12px;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;margin-bottom:1rem;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
  box-shadow:0 2px 0 var(--line-strong), 0 7px 14px -4px rgba(5,4,3,.28), 0 0 0 4px rgba(253,253,5,.16)}
.scard__ico svg{width:26px;height:26px;color:var(--ink)}
@media (hover:hover){.scard:hover .scard__ico{transform:scale(1.08) rotate(-3deg);box-shadow:0 4px 0 var(--line-strong), 0 11px 20px -5px rgba(5,4,3,.34), 0 0 0 5px rgba(253,253,5,.22)}}
@media (prefers-reduced-motion:reduce){.scard,.scard__ico{transition:none}.scard:hover{transform:none}.scard:hover .scard__ico{transform:none}}
/* Wave 3 (3.2 adapted — no persona cards on this site): refined hover reveal on
   the service cards. An accent top-bar wipes in left→right on hover (the spirit
   of the persona-card gradient-bar reveal), capped by the card's rounded corners. */
.scard{overflow:hidden}
.scard::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);border-bottom:1px solid var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.scard:hover::after{transform:scaleX(1)}}
.scard--accent::after{background:var(--accent)}
@media (prefers-reduced-motion:reduce){.scard::after{transition:none}.scard:hover::after{transform:scaleX(1)}}
.scard h3{margin-bottom:.4rem}
.scard p{color:var(--ink-soft);font-size:.96rem;margin:0 0 1rem}
.scard__link{margin-top:auto;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem}
.scard__link svg{width:16px;height:16px;transition:transform .15s ease}
@media (hover:hover){.scard:hover .scard__link svg{transform:translateX(4px)}}
.scard--accent{background:var(--ink);color:#fff;border-color:var(--ink)}
.scard--accent h3{color:#fff}
.scard--accent p{color:rgba(255,255,255,.8)}
.scard--accent .scard__link{color:var(--accent)}
.scard--accent .scard__ico{background:var(--accent)}

/* =================================================================
   Storm band (the wedge)
   ================================================================= */
.storm{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.storm__bg{position:absolute;inset:0;opacity:.30}
.storm__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.storm__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,3,.92),rgba(5,4,3,.62))}
.storm .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr auto;gap:1.5rem 2rem;align-items:center}
.storm__tag{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-family:var(--font-head);letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--accent);margin-bottom:.7rem}
.storm h2{color:#fff;font-size:clamp(1.6rem,2.6vw + .5rem,2.3rem)}
.storm p{color:rgba(255,255,255,.85);margin:.7rem 0 0;max-width:54ch}
.storm__cta{display:flex;flex-direction:column;gap:.6rem;align-items:stretch}
.storm__cta .micro{font-size:.82rem;color:rgba(255,255,255,.7);text-align:center}
@media (max-width:760px){.storm .wrap{grid-template-columns:1fr}.storm__cta{align-items:flex-start}}

/* =================================================================
   Why-us split
   ================================================================= */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:2rem}}
/* Wave 4 (4.6): framed-image treatment — outer drop-glow (warm accent + ink
   depth) + an inner ring drawn with ::before (inset box-shadow can't paint over
   an overflow:hidden child, so the ring is its own layer above the image). */
.split__media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px -14px rgba(5,4,3,.34), 0 6px 16px -8px rgba(253,253,5,.28)}
.split__media img{width:100%;height:100%;object-fit:cover;display:block}
/* inner border ring — sits above the image, never clipped, never tinted by it */
.split__media::before{content:"";position:absolute;inset:0;z-index:2;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 3px rgba(5,4,3,.06) inset}
/* Wave 4 (4.7): gradient bottom-fade overlay grounds the image + seats any
   future caption. Kept on the split image; the video hero already carries its
   own dual scrim (.hero__scrim L224) so it needs no added fade here. */
.split__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,4,3,.42) 0%,rgba(5,4,3,.12) 48%,rgba(5,4,3,0) 100%)}
.split__media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1rem 1.1rem;background:linear-gradient(0deg,rgba(5,4,3,.85),transparent);color:rgba(255,255,255,.92);font-size:.82rem}
.checklist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.checklist .mark{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent);border:1.5px solid var(--line-strong);display:grid;place-items:center;margin-top:1px}
.checklist .mark svg{width:15px;height:15px;color:var(--ink)}
.checklist b{font-weight:700}
.checklist span{color:var(--ink-soft)}

/* =================================================================
   Process steps
   ================================================================= */
.process{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.4rem;counter-reset:step}
@media (max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.4rem;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
/* Wave 3 (3.1 family): process step cards lift + the number tile nudges up. */
@media (hover:hover){.step:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(5,4,3,.14);border-color:var(--line-strong)}.step:hover .step__n{transform:translateY(-2px);box-shadow:0 4px 0 var(--line-strong)}}
@media (prefers-reduced-motion:reduce){.step{transition:none}.step:hover{transform:none}.step:hover .step__n{transform:none}}
.step__n{counter-increment:step;font-family:var(--font-head);font-weight:800;font-size:1.05rem;width:2.4rem;height:2.4rem;border-radius:10px;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;margin-bottom:.9rem;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease}
.step__n::before{content:counter(step)}
.step h3{font-size:1.1rem;margin-bottom:.35rem}
.step p{color:var(--ink-soft);font-size:.92rem;margin:0}

/* =================================================================
   Reputation / proof
   ================================================================= */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
@media (max-width:780px){.proof{grid-template-columns:1fr}}
/* Premium stat row (Wave 2, item 2.3): accent bar above each card, an oversized
   display-face numeral, then a small uppercase label. The numeral is the hero
   of the card; the label tucks under it. */
.pcard{border:1px solid var(--line);border-radius:14px;padding:1.7rem 1.5rem 1.5rem;background:var(--bg);text-align:left;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pcard::before{content:"";position:absolute;top:0;left:0;width:48px;height:5px;background:var(--accent);border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);border-bottom-right-radius:3px}
@media (hover:hover){.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}}
.pcard .big{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,4vw + 1rem,3.4rem);line-height:.95;letter-spacing:-.03em;display:flex;align-items:baseline;gap:.4rem;margin-top:.3rem}
.pcard .big .y{color:var(--accent);-webkit-text-stroke:.6px var(--line-strong)}
.pcard .stat-label{font-family:var(--font-head);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:.85rem 0 .4rem}
.pcard h3{font-size:1.05rem;margin:0 0 .3rem}
.pcard p{color:var(--ink-soft);font-size:.92rem;margin:0}

/* =================================================================
   Service area
   ================================================================= */
.area{background:var(--ink);color:#fff}
.area h2{color:#fff}
.area .lede{color:rgba(255,255,255,.8)}
.towns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.town{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:.45rem 1rem;font-size:.9rem;font-weight:600;color:#fff;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.town--home{background:var(--accent);color:var(--ink);border-color:var(--accent)}
/* Wave 3: linkable town chips reward attention on hover. */
@media (hover:hover){a.town:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.town{transition:none}a.town:hover{transform:none}}

/* =================================================================
   FAQ (centered, §7b)
   ================================================================= */
.faq-wrap{max-width:780px;margin-inline:auto}
.faq-head{text-align:center;margin-bottom:2rem}
.faq-head .kicker{justify-content:center}
.faq{display:grid;gap:.7rem}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.25rem;font-family:var(--font-head);font-weight:700;font-size:1.04rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
/* +/− cross-morph toggle (Wave 2, item 2.4). Circular, accent on open, the
   vertical bar of the plus rotates away to leave a minus. CSS-drawn, no SVG. */
.faq summary .chev{flex:0 0 auto;position:relative;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);transition:background .2s ease,border-color .2s ease}
.faq summary .chev::before,.faq summary .chev::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2.4px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s cubic-bezier(.22,.61,.36,1),background .2s ease}
.faq summary .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .chev{background:var(--accent);border-color:var(--line-strong)}
.faq details[open] summary .chev::after{transform:translate(-50%,-50%) rotate(0deg)}
@media (prefers-reduced-motion:reduce){.faq summary .chev::before,.faq summary .chev::after{transition:none}}
.faq .faq__a{padding:0 1.25rem 1.2rem;color:var(--ink-soft)}
.faq .faq__a p{margin:0}

/* =================================================================
   Final CTA
   ================================================================= */
.finalcta{background:var(--accent);color:var(--accent-on);text-align:center}
.finalcta h2{color:var(--accent-on)}
.finalcta p{color:rgba(5,4,3,.78);max-width:48ch;margin:1rem auto 1.9rem}
.finalcta .btn--primary{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.35)}
@media (hover:hover){.finalcta .btn--primary:hover{filter:brightness(1.2);background:var(--ink)}}
.finalcta .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.finalcta .micro{margin-top:1.1rem;font-size:.85rem;color:rgba(5,4,3,.7)}

/* =================================================================
   Footer
   ================================================================= */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);padding:3rem 0 2rem}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
@media (max-width:780px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-cols{grid-template-columns:1fr}}
.site-footer .brand .wordmark{color:#fff;text-shadow:none}
.site-footer p{font-size:.92rem;margin:.3rem 0}
/* Accent-color footer section titles (Wave 2, item 2.5). Near-black footer
   already in place (var(--ink)); titles go accent yellow for editorial lift. */
.site-footer h3{color:var(--accent);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .8rem;font-weight:800}
.site-footer a{color:rgba(255,255,255,.82)}
@media (hover:hover){.site-footer a:hover{color:#fff}}
.site-footer .fphone{font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.2rem;padding-top:1.3rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.82rem}
.footer-bottom .lc a{color:var(--accent);font-weight:700}

/* =================================================================
   Mobile sticky call bar (§7a — hidden on load, reveals on scroll)
   ================================================================= */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  background:var(--accent);border-top:2px solid var(--line-strong);
  padding:.7rem clamp(1rem,4vw,1.5rem);padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
  transform:translateY(calc(100% + env(safe-area-inset-bottom)));transition:transform .3s ease;
  box-shadow:0 -4px 20px rgba(5,4,3,.18);
}
.callbar.is-visible{transform:translateY(0)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:44px;font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--ink)}
.callbar a svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}
@media (max-width:880px){.callbar{display:block}}

/* spacing helpers */
.mt-sm{margin-top:1.1rem}
.center{text-align:center}

/* =================================================================
   INTERIOR PAGES (services, emergency, about, work, contact)
   Inherit the homepage chrome + section patterns (BUILD-STANDARDS §13 Step 2)
   ================================================================= */

/* Interior hero — type-led brand band (no faked work photos) */
.subhero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:calc(var(--header-h) + clamp(2.5rem,5vw,4rem)) 0 clamp(2.5rem,5vw,4rem)}
.subhero::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;right:-160px;top:-220px;background:radial-gradient(circle,rgba(253,253,5,.14),rgba(253,253,5,0) 70%);pointer-events:none;z-index:1}
.subhero--emergency::after{background:radial-gradient(circle,rgba(253,253,5,.22),rgba(253,253,5,0) 70%)}
.subhero .wrap{position:relative;z-index:2}
.subhero .eyebrow{color:var(--accent);-webkit-text-stroke:.3px rgba(0,0,0,.4)}
.subhero h1{color:#fff;font-size:clamp(2.1rem,3.6vw + 1rem,3.4rem);max-width:18ch;margin-top:.6rem}
.subhero__sub{color:rgba(255,255,255,.85);font-size:clamp(1.05rem,.5vw + 1rem,1.22rem);max-width:60ch;margin-top:1.1rem}
.subhero .hero__cta{margin-top:1.7rem}

/* Mobile CTA rows: stack full-width so the second button never clips off-screen
   on narrow phones (Wave 1 gut-test fix — emergency + services hub at 430px). */
@media (max-width:560px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}

/* Breadcrumb */
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:.4rem}
.breadcrumb a{color:rgba(255,255,255,.6)}
@media (hover:hover){.breadcrumb a:hover{color:#fff}}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current]{color:var(--accent)}

/* Long-form prose (service/about content) */
.prose{max-width:68ch}
.prose h2{margin-top:0}
.prose h3{margin:2rem 0 .6rem}
/* Long-form body copy gets text-wrap: pretty (Wave 2, item 2.10) — better rag
   + no single-word orphan lines in multi-line paragraphs. (No blog on this
   site; .prose is the site's long-form surface: service + about content.) */
.prose p{color:var(--ink-soft);margin:0 0 1.1rem;text-wrap:pretty}
.prose ul{margin:0 0 1.2rem;padding-left:0;list-style:none;display:grid;gap:.7rem}
.prose ul li{position:relative;padding-left:1.9rem;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:0;top:.45em;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--accent);border:1.5px solid var(--line-strong)}
.prose ul li::after{content:"";position:absolute;left:.3rem;top:.62em;width:.42rem;height:.24rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}

/* Layout: content + aside (sticky CTA / quick facts) */
.page-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.page-grid{grid-template-columns:1fr}}
.aside-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.6rem;position:sticky;top:calc(var(--header-h) + 1rem)}
@media (max-width:900px){.aside-card{position:static}}
.aside-card h3{font-size:1.15rem;margin-bottom:.4rem}
.aside-card p{color:var(--ink-soft);font-size:.94rem}
.aside-card .btn{width:100%;margin-top:.7rem}
.aside-card .factline{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);padding:.55rem 0;border-top:1px solid var(--line)}
.aside-card .factline:first-of-type{border-top:0}
.aside-card .factline b{color:var(--ink)}
/* Refined custom check mark for aside facts (replaces emoji bullets, Wave 1).
   Accent disc + CSS-drawn tick, same idiom as .prose ul markers. No emoji. */
.aside-card .factline .fcheck{flex:0 0 auto;position:relative;width:1.15rem;height:1.15rem;margin-top:.12em;border-radius:50%;background:var(--accent);border:1.5px solid var(--line-strong)}
.aside-card .factline .fcheck::after{content:"";position:absolute;left:.32rem;top:.32rem;width:.42rem;height:.22rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}

/* Cost / spec callout */
.cost{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:1.3rem 1.5rem;margin:1.6rem 0}
.cost .lab{font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cost .num{font-family:var(--font-head);font-weight:800;font-size:1.5rem;margin:.2rem 0}
.cost .fine{font-size:.85rem;color:var(--ink-soft);margin:0}

/* Info grid (3-up facts / steps reused on interior pages) */
.infogrid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.8rem}
.infocard{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:1.3rem;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
/* Wave 4 (4.8): same icon-tile depth on the smaller infocard tile. */
.infocard .ic{width:42px;height:42px;border-radius:10px;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;margin-bottom:.8rem;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
  box-shadow:0 2px 0 var(--line-strong), 0 6px 12px -4px rgba(5,4,3,.26), 0 0 0 4px rgba(253,253,5,.15)}
.infocard .ic svg{width:22px;height:22px;color:var(--ink)}
/* Wave 3 (3.1): feature/info cards lift + icon zoom on hover. */
@media (hover:hover){.infocard:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(5,4,3,.16);border-color:var(--line-strong)}.infocard:hover .ic{transform:scale(1.08) rotate(-3deg);box-shadow:0 4px 0 var(--line-strong), 0 10px 18px -5px rgba(5,4,3,.32), 0 0 0 5px rgba(253,253,5,.2)}}
@media (prefers-reduced-motion:reduce){.infocard,.infocard .ic{transition:none}.infocard:hover,.infocard:hover .ic{transform:none}}
.infocard h3{font-size:1.08rem;margin-bottom:.3rem}
.infocard p{color:var(--ink-soft);font-size:.92rem;margin:0}

/* Storm checklist (emergency page numbered steps, reuses .steps) */
.alert{background:#FFF8D6;border:1px solid var(--accent);border-left:4px solid var(--line-strong);border-radius:12px;padding:1.2rem 1.4rem;margin:1.5rem 0}
.alert b{color:var(--ink)}

/* =================================================================
   CONTACT FORM (§9b + §9c: native form, honeypot, pixel capture)
   ================================================================= */
.form{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-sm)}
/* 7.1 gradient top accent bar — brand yellow→gold, clipped to the card's top edge */
.form--accent{position:relative;overflow:hidden}
.form--accent::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%)}
.form--accent>*{position:relative}
.form__head h2,.form__head h3{margin:0 0 .3rem}
.form__head p{color:var(--ink-soft);margin:0 0 1.2rem}
/* 7.1 expectation-setter — three family-warm lines above the fields */
.form__expect{list-style:none;margin:0 0 1.4rem;padding:1rem 1.1rem;display:grid;gap:.7rem;
  background:linear-gradient(180deg,rgba(253,253,5,.10),rgba(253,253,5,.04));
  border:1px solid var(--line);border-radius:12px}
.form__expect li{display:flex;align-items:flex-start;gap:.65rem;font-weight:600;color:var(--ink);line-height:1.4}
.form__expect .fcheck{flex:0 0 auto;position:relative;width:1.15rem;height:1.15rem;margin-top:.12em;border-radius:50%;background:var(--accent);border:1.5px solid var(--line-strong)}
.form__expect .fcheck::after{content:"";position:absolute;left:.32rem;top:.32rem;width:.42rem;height:.22rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__row{margin-bottom:1rem}
.form__row--2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form__row--2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-family:var(--font-head);font-weight:700;font-size:.85rem}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:8px;padding:.7rem .8rem;width:100%;transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:120px;resize:vertical}
/* Bare outline removed only because it's immediately replaced (3.8): border
   darkens + a 3px accent halo on focus; keyboard users also get the universal
   :focus-visible ring on top. No dangling outline:none. */
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(253,253,5,.5)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-color:var(--ink)}
.form__submit{width:100%;margin-top:.4rem}
.form__fine{font-size:.85rem;color:var(--ink-soft);text-align:center;margin:.9rem 0 0}
.form__fine a{font-weight:700;color:var(--ink)}
.form__success{padding:14px 16px;margin-top:14px;border-radius:10px;background:#E7F4ED;color:#1E6B45;font-weight:600;text-align:center}

/* =================================================================
   WORK / portfolio (softened until real photos arrive)
   ================================================================= */
.work-note{background:var(--surface);border:1px dashed var(--line-strong);border-radius:14px;padding:1.6rem 1.8rem;margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between}
.work-note p{margin:0;color:var(--ink-soft);max-width:60ch}
.work-types{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:2rem}
.work-type{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.4rem;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
/* Wave 4 (4.9): work-type cards get the gallery-card idiom. These are type-led
   (no real project photos yet, §12c honest-imagery constraint — never a fake
   gallery), so the "image zoom" maps to an accent icon tile that scales on
   hover, and the caption ("See deck work") fades + slides up on hover. */
.work-type .ico{width:46px;height:46px;border-radius:11px;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;margin-bottom:.9rem;color:var(--ink);
  box-shadow:0 2px 0 var(--line-strong), 0 6px 12px -4px rgba(5,4,3,.26), 0 0 0 4px rgba(253,253,5,.15);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease}
.work-type .ico svg{width:24px;height:24px}
.work-type h3{font-size:1.1rem;margin-bottom:.3rem}
.work-type p{color:var(--ink-soft);font-size:.93rem;margin:0 0 .9rem}
.work-type .more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-family:var(--font-head);font-size:.9rem;color:var(--ink);
  opacity:.62;transform:translateY(2px);transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
.work-type .more::after{content:"";width:14px;height:9px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s cubic-bezier(.22,.61,.36,1)}
/* Wave 3 (3.1) + Wave 4 (4.9): card lift + icon zoom + caption reveal on hover. */
@media (hover:hover){
  .work-type:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(5,4,3,.16);border-color:var(--line-strong)}
  .work-type:hover .ico{transform:scale(1.08) rotate(-3deg);box-shadow:0 4px 0 var(--line-strong), 0 10px 18px -5px rgba(5,4,3,.32), 0 0 0 5px rgba(253,253,5,.2)}
  .work-type:hover .more{opacity:1;transform:translateY(0)}
  .work-type:hover .more::after{transform:translateX(3px)}
}
.work-type:focus-visible .more{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.work-type,.work-type .ico,.work-type .more{transition:none}.work-type:hover{transform:none}.work-type:hover .ico{transform:none}.work-type .more{opacity:1;transform:none}}

/* =================================================================
   WAVE 5 — Cross-page distinctiveness
   One distinguishing visual element per service detail page, so no
   page reads as "the template with different words." Each is a
   different SHAPE, all built from the locked palette + idioms (no new
   color, no new font, no fabricated content — every figure is real
   copy already on the page).
   ================================================================= */

/* 5.4a — SIDING: vinyl vs fiber-cement spec comparison (2-column table card) */
.spec-compare{margin:1.8rem 0 .4rem;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(5,4,3,.3)}
.spec-compare__head{display:grid;grid-template-columns:1.1fr 1fr 1fr}
.spec-compare__head>*{padding:.85rem 1rem;font-family:var(--font-head);font-weight:800;font-size:.92rem}
.spec-compare__head .c-spec{background:var(--ink);color:#fff}
.spec-compare__head .c-a{background:var(--accent);color:var(--ink);border-left:2px solid var(--line-strong)}
.spec-compare__head .c-b{background:var(--surface);color:var(--ink);border-left:1px solid var(--line)}
.spec-compare__row{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-top:1px solid var(--line)}
.spec-compare__row>*{padding:.8rem 1rem;font-size:.94rem;color:var(--ink-soft)}
.spec-compare__row .c-spec{font-family:var(--font-head);font-weight:700;color:var(--ink);background:var(--surface)}
.spec-compare__row .c-a{border-left:2px solid var(--line-strong);background:rgba(253,253,5,.06)}
.spec-compare__row .c-b{border-left:1px solid var(--line)}
.spec-compare__row b{color:var(--ink);font-weight:700}
.spec-compare__note{font-size:.8rem;color:var(--ink-soft);margin:.7rem 0 0;font-style:italic}
@media (max-width:560px){
  .spec-compare__head,.spec-compare__row{grid-template-columns:1fr}
  .spec-compare__head .c-spec{display:none}
  .spec-compare__row .c-spec{border-bottom:1px solid var(--line)}
  .spec-compare__row .c-a,.spec-compare__row .c-b{border-left:0;border-top:1px solid var(--line)}
  .spec-compare__row .c-a::before{content:"Vinyl";display:block;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:.15rem}
  .spec-compare__row .c-b::before{content:"Fiber cement";display:block;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:.15rem}
}

/* 5.4b — DECK: repair-vs-replace two-path decision block */
.decide{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.8rem 0 .4rem}
@media (max-width:600px){.decide{grid-template-columns:1fr}}
.decide__card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.4rem;position:relative;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
.decide__card::before{content:"";position:absolute;top:0;left:1.4rem;right:1.4rem;height:4px;border-radius:0 0 4px 4px;background:var(--accent)}
.decide__tag{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:.3rem 0 .5rem}
.decide__card h4{font-family:var(--font-head);font-size:1.18rem;margin:0 0 .5rem;color:var(--ink)}
.decide__card ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.decide__card li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--ink-soft)}
.decide__card li::before{content:"";position:absolute;left:0;top:.5em;width:.85rem;height:.85rem;border-radius:50%;background:var(--accent);border:1.5px solid var(--line-strong)}
.decide__card li::after{content:"";position:absolute;left:.24rem;top:.62em;width:.36rem;height:.2rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
@media (hover:hover){.decide__card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(5,4,3,.14);border-color:var(--line-strong)}}
@media (prefers-reduced-motion:reduce){.decide__card{transition:none}.decide__card:hover{transform:none}}

/* 5.4c — WINDOW: why-replace benefit row (diagram-style stat tiles) */
.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.8rem 0 .4rem}
@media (max-width:720px){.benefit-row{grid-template-columns:1fr}}
.benefit{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem;text-align:center;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
.benefit__ico{width:46px;height:46px;margin:0 auto .8rem;border-radius:50%;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;
  box-shadow:0 2px 0 var(--line-strong), 0 6px 12px -4px rgba(5,4,3,.26), 0 0 0 4px rgba(253,253,5,.15)}
.benefit__ico svg{width:24px;height:24px;color:var(--ink)}
.benefit h4{font-family:var(--font-head);font-size:1.05rem;margin:0 0 .3rem;color:var(--ink)}
.benefit p{font-size:.9rem;color:var(--ink-soft);margin:0}
@media (hover:hover){.benefit:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(5,4,3,.14);border-color:var(--line-strong)}}
@media (prefers-reduced-motion:reduce){.benefit{transition:none}.benefit:hover{transform:none}}

/* 5.4d — GUTTER: "signs you need gutter work" checklist card */
.checklist{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.6rem;margin:1.8rem 0 .4rem;box-shadow:0 10px 30px -18px rgba(5,4,3,.3)}
.checklist__head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.checklist__head .badge{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;
  box-shadow:0 2px 0 var(--line-strong)}
.checklist__head .badge svg{width:21px;height:21px;color:var(--ink)}
.checklist__head h4{font-family:var(--font-head);font-size:1.12rem;margin:0;color:var(--ink)}
.checklist ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.checklist li{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--ink-soft)}
.checklist li:first-child{border-top:0}
.checklist li .tick{flex:0 0 auto;position:relative;width:1.25rem;height:1.25rem;margin-top:.1em;border-radius:50%;background:var(--accent);border:1.5px solid var(--line-strong)}
.checklist li .tick::after{content:"";position:absolute;left:.34rem;top:.36rem;width:.46rem;height:.24rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.checklist li b{color:var(--ink);font-weight:700}
.checklist__foot{margin:1rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.checklist__foot b{color:var(--ink)}

/* 5.4e — DOOR & CEILING: problem -> consequence "catch it early" strip */
.cascade{margin:1.8rem 0 .4rem;display:grid;gap:.9rem}
.cascade__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;border-left:4px solid var(--accent);padding:1rem 1.3rem}
.cascade__cause,.cascade__effect{display:flex;flex-direction:column;gap:.15rem}
.cascade__lab{font-family:var(--font-head);font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cascade__row .cascade__cause .cascade__txt{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:1rem}
.cascade__row .cascade__effect .cascade__txt{color:var(--ink-soft);font-size:.94rem}
.cascade__arrow{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;box-shadow:0 2px 0 var(--line-strong)}
.cascade__arrow svg{width:17px;height:17px;color:var(--ink)}
@media (max-width:600px){
  .cascade__row{grid-template-columns:1fr;gap:.55rem;text-align:left}
  .cascade__arrow{transform:rotate(90deg);margin:.1rem 0}
}
.cascade__foot{margin:.4rem 0 0;font-size:.9rem;color:var(--ink-soft)}
.cascade__foot b{color:var(--ink)}

/* 5.3 — Hero rhythm: per-page subhero modifiers so the service heroes
   are NOT pixel-identical. Each varies ONE dimension within the locked
   direction (H1 size band, sub width, or eyebrow rhythm). */
.subhero--deck h1{font-size:clamp(2.15rem,3.7vw + 1rem,3.5rem)}
.subhero--deck .subhero__sub{max-width:54ch}
.subhero--window h1{font-size:clamp(2.05rem,3.4vw + 1rem,3.25rem);max-width:20ch}
.subhero--window .subhero__sub{max-width:62ch}
.subhero--gutter h1{max-width:16ch}
.subhero--gutter .subhero__sub{max-width:52ch}
.subhero--siding .subhero__sub{max-width:58ch}
.subhero--siding h1{max-width:17ch}
.subhero--repairs h1{font-size:clamp(1.95rem,3.2vw + 1rem,3.15rem);max-width:22ch}
.subhero--repairs .subhero__sub{max-width:58ch}

/* =================================================================
   Wave 8 (8.4) — 44x44 tap-target floor on the mobile layout.
   Primary CTAs (.btn, .callbar, .faq summary, drawer main links) already
   clear 44px via their padding. This block raises the SECONDARY tappable
   targets — town chips, drawer sub-menu links, and footer nav links — to
   the 44px floor. Scoped to the mobile width breakpoint (not pointer:coarse,
   which some engines evaluate inconsistently) so it reliably fires on the
   mobile layout while leaving desktop spacing untouched. Inline links inside
   running prose + breadcrumbs are intentionally exempt (WCAG 2.5.5 inline
   exception) — making them 44px tall would break the text flow.
   ================================================================= */
@media (max-width:880px){
  /* Town chips (home + service-area pages) — links must be 44px tall. */
  a.town{min-height:44px;display:inline-flex;align-items:center}
  /* Mobile drawer sub-menu links (service list inside the nav drawer). */
  .drawer .drawer-sub a{min-height:44px;display:flex;align-items:center}
  /* Footer nav links — give each its own 44px-tall hit row. */
  .site-footer .footer-cols p > a{min-height:44px;display:inline-flex;align-items:center}
  .site-footer .footer-cols p:has(> a){margin:.1rem 0}
  /* Footer phone + bottom-row links keep a comfortable 44px target. */
  .site-footer .fphone,
  .footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
}

/* =================================================================
   Wave 8 (8.2) — founder signature mark (about page, ONE instance).
   The only place the Caveat face is used. Sits under the founder story
   as Ryan's signed name; tasteful, not novelty body type.
   ================================================================= */
.founder-sign{margin-top:1.25rem;display:flex;flex-direction:column;gap:.15rem}
.signature-script{
  font-family:'Caveat','Segoe Script','Bradley Hand',cursive;
  font-weight:600;font-size:clamp(2.2rem,5vw,2.9rem);line-height:.9;
  color:var(--ink);transform:rotate(-3deg);transform-origin:left center;
}
.founder-sign .sign-role{font-size:.85rem;color:var(--ink-soft);letter-spacing:.02em;padding-left:.15rem}

/* =================================================================
   PORTFOLIO GALLERY + LIGHTBOX (/work) + homepage rail
   NOTE: /assets/images/work/* are PLACEHOLDER stock (gorgeous exterior/
   deck shots) to be SWAPPED for the customer's real project photos before
   launch. Captions are honest work-types, not claimed specific jobs.
   ================================================================= */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
@media (max-width:880px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}
.gallery-item{position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--surface);aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .95rem .85rem;background:linear-gradient(0deg,rgba(5,4,3,.85),rgba(5,4,3,.1) 70%,transparent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:-.01em;text-align:left}
.gallery-item .gz{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;background:var(--accent);border:2px solid var(--line-strong);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease}
.gallery-item .gz svg{width:16px;height:16px;color:var(--ink)}
@media (hover:hover){.gallery-item:hover img{transform:scale(1.06)}.gallery-item:hover .gz{opacity:1;transform:scale(1)}}
.gallery-item:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.gallery-note{margin-top:1.6rem;font-size:.92rem;color:var(--ink-soft);text-align:center}

/* Lightbox (built by main.js) */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,4,3,.93);display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);opacity:0;transition:opacity .2s ease}
.lightbox.is-open{display:flex}
.lightbox.is-shown{opacity:1}
.lightbox__stage{position:relative;max-width:1100px;width:100%;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.lightbox__img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);background:#111}
.lightbox__cap{color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.05rem;text-align:center}
.lightbox__btn{position:fixed;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);color:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .15s ease,border-color .15s ease;touch-action:manipulation}
@media (hover:hover){.lightbox__btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}}
.lightbox__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lightbox__close{top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right))}
.lightbox__prev{left:max(.8rem,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
.lightbox__next{right:max(.8rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}
.lightbox__btn svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.lightbox,.gallery-item img,.gallery-item .gz,.rail-card img{transition:none}}

/* Homepage portfolio rail (horizontal scroll-snap teaser -> /work) */
.rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:2.2rem .2rem 1rem;margin-inline:calc(-1 * clamp(1.1rem,4vw,2rem));padding-inline:clamp(1.1rem,4vw,2rem)}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.rail-card{flex:0 0 auto;width:min(78vw,340px);scroll-snap-align:start;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--surface);cursor:zoom-in;display:block;padding:0}
.rail-card img{width:100%;height:100%;object-fit:cover}
.rail-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;background:linear-gradient(0deg,rgba(5,4,3,.82),transparent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.95rem;text-align:left}
@media (hover:hover){.rail-card:hover img{transform:scale(1.06)}}
.rail-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.rail-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.rail-head .seeall{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.rail-head .seeall svg{width:16px;height:16px;transition:transform .15s ease}
@media (hover:hover){.rail-head .seeall:hover svg{transform:translateX(4px)}}

/* =================================================================
   HERO CREDIBILITY BAR — straddles the hero/services seam
   (Barnett trustcard / Nourished CTA-bar pattern). Replaces the old
   in-hero glass card + full-width trustbar; declutters the hero.
   ================================================================= */
.herobar{position:relative;z-index:6;max-width:var(--maxw);margin:clamp(-4.5rem,-6vw,-3rem) auto 0;padding:0 clamp(1.1rem,4vw,2rem)}
.herobar__card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(5,4,3,.18);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.herobar__item{display:flex;gap:.7rem;align-items:flex-start;padding:1.25rem 1.2rem;border-left:1px solid var(--line)}
.herobar__item:first-child{border-left:0}
.herobar__item .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--accent);border:1.5px solid var(--line-strong);display:grid;place-items:center}
.herobar__item .ic svg{width:18px;height:18px;color:var(--ink)}
.herobar__item b{display:block;font-family:var(--font-head);font-weight:800;font-size:.95rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.herobar__item span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.1rem}
@media (max-width:820px){
  .herobar{margin-top:clamp(-3rem,-8vw,-2rem)}
  .herobar__card{grid-template-columns:1fr 1fr}
  .herobar__item{border-left:0;border-top:1px solid var(--line)}
  .herobar__item:first-child,.herobar__item:nth-child(2){border-top:0}
}
@media (max-width:460px){
  .herobar__card{grid-template-columns:1fr}
  .herobar__item{border-left:0;border-top:1px solid var(--line)}
  .herobar__item:first-child{border-top:0}
  .herobar__item:nth-child(2){border-top:1px solid var(--line)}
}

/* =================================================================
   REVISION 2 (operator feedback): herobar pop-cascade, why-us
   centered header + side-by-side list/image, interior hero photos.
   ================================================================= */

/* Herobar items pop up independently when the bar scrolls into view
   (Hughes Residential pattern: staggered cascade). The card itself no
   longer slides as a whole; the items animate one after another. */
.reveal-ready .herobar[data-reveal]{opacity:1;transform:none;transition:none}
.reveal-ready .herobar .herobar__item{opacity:0}
.herobar.is-in .herobar__item{animation:herobar-pop .5s cubic-bezier(.4,.1,.2,1) both}
.herobar.is-in .herobar__item:nth-child(1){animation-delay:.05s}
.herobar.is-in .herobar__item:nth-child(2){animation-delay:.17s}
.herobar.is-in .herobar__item:nth-child(3){animation-delay:.29s}
.herobar.is-in .herobar__item:nth-child(4){animation-delay:.41s}
@keyframes herobar-pop{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal-ready .herobar .herobar__item{opacity:1}
  .herobar.is-in .herobar__item{animation:none}
}

/* Why-us: centered eyebrow + headline + body above; list and image
   side by side below so they read as one balanced pair. */
.why-head{max-width:64ch;margin:0 auto;text-align:center}
.why-head .kicker{justify-content:center}
.why-head .lede{margin-inline:auto}
.why-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;margin-top:2.4rem}
@media (max-width:880px){.why-row{grid-template-columns:1fr;gap:1.8rem}}
.why-row .checklist{margin:0}
.why-cta{display:flex;justify-content:center;margin-top:2rem}

/* Interior page heroes get a darkened background photo behind the
   ink ground + the existing accent glow (operator: no more plain black). */
.subhero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.4}
.subhero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,4,3,.45) 0%,rgba(5,4,3,.62) 55%,rgba(5,4,3,.8) 100%);pointer-events:none}
.subhero > .wrap{position:relative;z-index:2}

/* Skip-to-content link (a11y, Section G) — off-screen until focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0;outline:3px solid var(--accent);outline-offset:2px}

/* Print: drop chrome + motion, ink-on-white, expand link targets (Section L) */
@media print{
  .site-header,.callbar,.drawer,.nav-toggle,.skip-link,.lightbox,.hero__video,.subhero__photo,.herobar{display:none!important}
  *{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
  .hero,.subhero{min-height:auto!important;padding:1.5rem 0!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  a[href^="tel:"]::after,a[href^="mailto:"]::after{content:""}
}