/*
Theme Name: Water Works Plus
Theme URI: https://wwp-co.com
Author: Sonic — Miss Pepper AI
Description: Custom theme for Water Works Plus, LLC. Symptom-first architecture, Corporate Trust design DNA. Self-hosted fonts, CSS-only motion, WCAG AAA body contrast.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: waterworks
*/

/* ============================================================
   1. FONTS — self-hosted, subset to Latin. No third-party CDN.
   ============================================================ */
@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   2. TOKENS — locked in .factory/config/design-dna.json
   Every ratio below was measured, not estimated.
   ============================================================ */
:root{
  --ww-bg:#ffffff;
  --ww-ink:#0e1b2c;        /* 17.33:1 on white — AAA */
  --ww-navy:#123c6d;       /* 11.09:1 on white — AAA */
  --ww-link:#1558a8;       /*  7.02:1 on white — AAA */
  --ww-accent:#1d70d0;     /*  4.91:1 — LARGE TEXT / UI ONLY, never body */
  --ww-cta:#f59e0b;        /*  fill only — 2.15:1, never carries text */
  --ww-cta-ink:#0e1b2c;    /*  8.07:1 on amber — AAA */
  --ww-amber-dark:#fcd34d; /*  7.69:1 on navy — AAA */
  --ww-muted:#4a5563;      /*  7.58:1 on white — AAA */
  --ww-surface:#f6f8fa;    /*  muted stays 7.12:1 here */
  --ww-rule:#d9e0e8;
  --ww-ok:#136c43; --ww-warn:#8a4a00; --ww-danger:#a4231d;

  --ww-display:'Cabinet Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ww-body:'General Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --ww-max:72rem;
  --ww-measure:68ch;
  --ww-radius:8px;
  --ww-section:clamp(3rem,8vw,6rem);
  --ww-gutter:clamp(1.25rem,4vw,2rem);
  --ww-shadow:0 1px 2px rgba(14,27,44,.06),0 4px 12px rgba(14,27,44,.08);
  --ww-shadow-lift:0 2px 4px rgba(14,27,44,.08),0 10px 24px rgba(14,27,44,.12);
  --ww-t:180ms cubic-bezier(.2,.6,.3,1);
}

/* ============================================================
   3. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ww-bg);color:var(--ww-ink);
  font-family:var(--ww-body);font-size:1.125rem;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--ww-display);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ww-ink)}
h1{font-size:clamp(2rem,5.5vw,3.25rem)}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem);font-weight:700}
h3{font-size:clamp(1.25rem,2.5vw,1.5rem);font-weight:700}
p,li{max-width:var(--ww-measure)}
p{margin:0 0 1.25em}
a{color:var(--ww-link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--ww-navy)}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--ww-ink);outline-offset:2px;border-radius:2px}
.ww-on-navy :focus-visible,.ww-footer :focus-visible{outline-color:var(--ww-amber-dark)}
::selection{background:var(--ww-amber-dark);color:var(--ww-ink)}

.ww-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ww-ink);color:#fff;padding:.85rem 1.25rem;font-weight:600;border-radius:0 0 var(--ww-radius) 0}
.ww-skip:focus{left:0}
.ww-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ww-wrap{width:100%;max-width:var(--ww-max);margin-inline:auto;padding-inline:var(--ww-gutter)}
.ww-section{padding-block:var(--ww-section)}
.ww-surface{background:var(--ww-surface)}
.ww-navy-bg{background:var(--ww-navy);color:#fff}
.ww-navy-bg h2,.ww-navy-bg h3{color:#fff}
.ww-eyebrow{font-family:var(--ww-display);font-weight:700;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ww-muted);margin:0 0 .75rem}
.ww-navy-bg .ww-eyebrow{color:var(--ww-amber-dark)}
.ww-lede{font-size:1.25rem;color:var(--ww-muted);max-width:60ch}
.ww-navy-bg .ww-lede{color:#dbe5f0}

/* ============================================================
   4. BUTTONS — amber never carries white text (measured 2.15:1)
   ============================================================ */
.ww-cta,.ww-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.9rem 1.6rem;border-radius:var(--ww-radius);
  font-family:var(--ww-display);font-weight:700;font-size:1.125rem;letter-spacing:-.01em;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform var(--ww-t),box-shadow var(--ww-t),background-color var(--ww-t);
}
.ww-cta{background:var(--ww-cta);color:var(--ww-cta-ink);box-shadow:var(--ww-shadow)}
.ww-cta:hover{background:#ffb01f;color:var(--ww-cta-ink);transform:translateY(-2px);box-shadow:var(--ww-shadow-lift)}
.ww-cta:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(14,27,44,.25)}
.ww-btn-ghost{background:transparent;color:var(--ww-navy);border-color:var(--ww-navy)}
.ww-btn-ghost:hover{background:var(--ww-navy);color:#fff;transform:translateY(-2px)}
.ww-on-navy .ww-btn-ghost,.ww-navy-bg .ww-btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.ww-on-navy .ww-btn-ghost:hover,.ww-navy-bg .ww-btn-ghost:hover{background:#fff;color:var(--ww-navy)}

/* ============================================================
   5. HEADER
   ============================================================ */
.ww-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--ww-rule)}
.ww-header-in{display:flex;align-items:center;gap:1rem;min-height:76px}
.ww-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ww-ink);margin-right:auto}
.ww-brand-mark{width:40px;height:40px;flex:0 0 auto}
.ww-brand-name{font-family:var(--ww-display);font-weight:800;font-size:1.1875rem;line-height:1.05;letter-spacing:-.02em}
.ww-brand-sub{display:block;font-family:var(--ww-body);font-weight:400;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ww-muted)}
.ww-nav{display:none}
.ww-nav ul{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
.ww-nav li{max-width:none}
.ww-nav a{font-family:var(--ww-display);font-weight:700;font-size:1rem;color:var(--ww-ink);text-decoration:none;padding:.5rem 0;border-bottom:2px solid transparent}
.ww-nav a:hover,.ww-nav a[aria-current="page"]{color:var(--ww-navy);border-bottom-color:var(--ww-cta)}
.ww-header-cta{display:none}
.ww-burger{margin-left:auto;width:48px;height:48px;display:grid;place-items:center;background:transparent;border:2px solid var(--ww-rule);border-radius:var(--ww-radius);cursor:pointer}
.ww-burger span{display:block;width:22px;height:2px;background:var(--ww-ink);box-shadow:0 -7px 0 var(--ww-ink),0 7px 0 var(--ww-ink)}
.ww-burger[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
.ww-burger[aria-expanded="true"] span::after{content:"";display:block;width:22px;height:2px;background:var(--ww-ink);transform:rotate(-90deg)}
.ww-mobile-nav{display:none;border-top:1px solid var(--ww-rule);background:#fff}
.ww-mobile-nav.is-open{display:block}
.ww-mobile-nav ul{list-style:none;margin:0;padding:.5rem 0 1rem}
.ww-mobile-nav li{max-width:none;border-bottom:1px solid var(--ww-rule)}
.ww-mobile-nav a{display:block;padding:1rem var(--ww-gutter);min-height:48px;font-family:var(--ww-display);font-weight:700;color:var(--ww-ink);text-decoration:none}

@media(min-width:900px){
  .ww-nav{display:block}
  .ww-header-cta{display:inline-flex}
  .ww-burger{display:none}
  .ww-mobile-nav{display:none!important}
}

/* ============================================================
   6. HERO — split. Right half is the symptom selector, not an image.
   ============================================================ */
.ww-hero{background:var(--ww-navy);color:#fff;padding-block:clamp(2.5rem,7vw,4.5rem)}
.ww-hero h1{color:#fff}
.ww-hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start}
.ww-hero-kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ww-display);font-weight:700;font-size:.875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ww-amber-dark);border:1px solid rgba(252,211,77,.35);border-radius:999px;padding:.35rem .85rem;margin-bottom:1.25rem}
.ww-hero p.ww-hero-sub{font-size:1.1875rem;color:#dbe5f0;max-width:52ch}
.ww-hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}
.ww-hero-note{font-size:1rem;color:#dbe5f0;margin-top:1.1rem}
@media(min-width:960px){.ww-hero-grid{grid-template-columns:1.05fr .95fr}}

/* ============================================================
   7. SYMPTOM SELECTOR — the primary interaction
   ============================================================ */
.ww-symptoms{background:#fff;border-radius:var(--ww-radius);box-shadow:var(--ww-shadow-lift);overflow:hidden;color:var(--ww-ink)}
.ww-symptoms-head{padding:1.25rem 1.35rem;border-bottom:2px solid var(--ww-rule);background:var(--ww-surface)}
.ww-symptoms-head h2{font-size:1.25rem;margin:0}
.ww-symptoms-head p{font-size:1rem;color:var(--ww-muted);margin:.35rem 0 0}
.ww-symptom{border-bottom:1px solid var(--ww-rule)}
.ww-symptom:last-child{border-bottom:0}
.ww-symptom-btn{
  width:100%;min-height:56px;display:flex;align-items:center;gap:.85rem;
  padding:1rem 1.35rem;background:#fff;border:0;cursor:pointer;text-align:left;
  font-family:var(--ww-display);font-weight:700;font-size:1.0625rem;color:var(--ww-ink);
  transition:background-color var(--ww-t);
}
.ww-symptom-btn:hover{background:var(--ww-surface)}
.ww-symptom-chev{margin-left:auto;flex:0 0 auto;width:20px;height:20px;transition:transform var(--ww-t);color:var(--ww-navy)}
.ww-symptom-btn[aria-expanded="true"] .ww-symptom-chev{transform:rotate(180deg)}
.ww-symptom-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 240ms cubic-bezier(.2,.6,.3,1)}
.ww-symptom-btn[aria-expanded="true"]+.ww-symptom-panel{grid-template-rows:1fr}
.ww-symptom-panel>div{overflow:hidden}
.ww-symptom-inner{padding:0 1.35rem 1.35rem}
.ww-causes{list-style:none;margin:0 0 1rem;padding:0;counter-reset:c}
.ww-causes li{max-width:none;display:flex;gap:.8rem;padding:.7rem 0;border-bottom:1px dashed var(--ww-rule);font-size:1rem;align-items:baseline}
.ww-causes li:last-child{border-bottom:0}
.ww-causes li::before{counter-increment:c;content:counter(c);flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ww-navy);color:#fff;font-family:var(--ww-display);font-weight:700;font-size:.8125rem}
.ww-cost{margin-left:auto;flex:0 0 auto;font-weight:600;font-size:.9375rem;color:var(--ww-muted);white-space:nowrap;padding-left:.75rem}
/* Narrow screens: "Most expensive - and least likely" cannot sit on one nowrap line
   next to the cause text in 292px. Drop it to its own line, indented under the text. */
@media(max-width:639px){
  .ww-cost{flex:0 1 auto;white-space:normal;text-align:right;max-width:44%;font-size:.875rem}
}
.ww-cheapest{display:inline-block;font-size:.8125rem;font-weight:600;color:var(--ww-ok);border:1px solid var(--ww-ok);border-radius:999px;padding:.1rem .5rem;margin-bottom:.75rem}

/* ============================================================
   8. TRUST STAT BAR
   ============================================================ */
/* Counters: the real number lives in the HTML as text and is ALWAYS visible.
   A CSS @property counter() was prototyped here and removed — there is no
   reliable @supports test for @property registration, so unsupported browsers
   would have rendered an empty stat. Motion is a rise-in instead: same felt
   effect, zero chance of a blank number on a bad connection. */
.ww-trustbar{background:var(--ww-ink);color:#fff;padding-block:clamp(1.5rem,4vw,2.25rem)}
.ww-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem;text-align:center}
@media(min-width:820px){.ww-trust-grid{grid-template-columns:repeat(4,1fr)}}
.ww-stat{display:flex;flex-direction:column;gap:.2rem;animation:ww-rise 260ms ease-out both;animation-delay:calc(var(--i,0)*70ms)}
.ww-stat-num{font-family:var(--ww-display);font-weight:800;font-size:clamp(1.75rem,4.6vw,2.6rem);line-height:1;color:var(--ww-amber-dark);letter-spacing:-.03em}
.ww-stat-label{font-size:.9375rem;color:#c5d3e2;max-width:none}

/* ============================================================
   9. BADGE ROW
   ============================================================ */
.ww-badges{border-bottom:1px solid var(--ww-rule);padding-block:1.25rem;background:#fff}
.ww-badge-list{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
.ww-badge-list li{max-width:none;display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:var(--ww-muted)}
.ww-badge-list svg{width:20px;height:20px;flex:0 0 auto;color:var(--ww-navy)}

/* ============================================================
   10. CARDS — load-time stagger, visible by default
   ============================================================ */
.ww-card-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:640px){.ww-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ww-card-grid.ww-3{grid-template-columns:repeat(3,1fr)}}
.ww-card-grid>li{max-width:none;animation:ww-rise 220ms ease-out both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes ww-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ww-card{height:100%;display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid var(--ww-rule);border-radius:var(--ww-radius);padding:1.5rem;transition:box-shadow var(--ww-t),transform var(--ww-t),border-color var(--ww-t)}
.ww-card:hover{box-shadow:var(--ww-shadow-lift);transform:translateY(-2px);border-color:#bcc9d6}
.ww-card h3{margin:0}
.ww-card p{font-size:1rem;color:var(--ww-muted);margin:0;max-width:none}
.ww-card-icon{width:48px;height:48px;color:var(--ww-navy)}
@media(min-width:1000px){.ww-card-icon{width:56px;height:56px}}
.ww-card-link{margin-top:auto;padding-top:.75rem;font-family:var(--ww-display);font-weight:700;font-size:1rem;color:var(--ww-link);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.ww-card-link:hover{text-decoration:underline}
.ww-card a::after{content:"";position:absolute;inset:0}
.ww-card{position:relative}

/* ============================================================
   11. CONTRARIAN / PROOF BAND
   ============================================================ */
.ww-quote{border-left:4px solid var(--ww-cta);padding:.25rem 0 .25rem 1.5rem;margin:0}
.ww-quote p{font-family:var(--ww-display);font-weight:700;font-size:clamp(1.375rem,3.2vw,1.875rem);line-height:1.3;letter-spacing:-.02em;margin:0 0 .75rem}
.ww-split{display:grid;gap:clamp(1.75rem,4vw,3rem)}
@media(min-width:900px){.ww-split{grid-template-columns:1fr 1fr;align-items:center}}

/* ============================================================
   12. AREA LIST
   ============================================================ */
.ww-area-cols{columns:2;column-gap:2rem;list-style:none;margin:0;padding:0}
@media(min-width:700px){.ww-area-cols{columns:3}}
@media(min-width:1000px){.ww-area-cols{columns:4}}
.ww-area-cols li{max-width:none;break-inside:avoid;padding:.3rem 0;font-size:1rem}
.ww-area-cols a{color:var(--ww-ink);text-decoration:none}
.ww-area-cols a:hover{color:var(--ww-link);text-decoration:underline}

/* ============================================================
   13. STICKY MOBILE CALL BAR
   ============================================================ */
.ww-callbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:flex;background:var(--ww-cta);border-top:2px solid rgba(14,27,44,.18)}
.ww-callbar a{flex:1;min-height:56px;display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--ww-display);font-weight:800;font-size:1.125rem;color:var(--ww-cta-ink);text-decoration:none}
.ww-callbar a+a{border-left:2px solid rgba(14,27,44,.18)}
.ww-callbar svg{width:22px;height:22px}
body{padding-bottom:56px}
@media(min-width:900px){.ww-callbar{display:none}body{padding-bottom:0}}

/* ============================================================
   14. FOOTER
   ============================================================ */
.ww-footer{background:var(--ww-ink);color:#c5d3e2;padding-block:clamp(2.5rem,6vw,4rem) 1.5rem;font-size:1rem}
.ww-footer h2,.ww-footer h3{color:#fff;font-size:1.0625rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.9rem}
.ww-footer a{color:#dbe5f0}
.ww-footer a:hover{color:var(--ww-amber-dark)}
.ww-footer-grid{display:grid;gap:2rem}
@media(min-width:760px){.ww-footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ww-footer ul{list-style:none;margin:0;padding:0}
.ww-footer li{max-width:none;padding:.28rem 0}
.ww-footer-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);font-size:.9375rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.ww-license{font-weight:600;color:var(--ww-amber-dark)}

/* ============================================================
   15. CONTENT (interior pages)
   ============================================================ */
.ww-prose h2{margin-top:2.25em}
.ww-prose h3{margin-top:1.75em}
.ww-prose ul,.ww-prose ol{padding-left:1.35em}
.ww-prose li{margin-bottom:.5em}
.ww-prose table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:1rem;display:block;overflow-x:auto}
.ww-prose th,.ww-prose td{border:1px solid var(--ww-rule);padding:.7rem .85rem;text-align:left}
.ww-prose th{background:var(--ww-surface);font-weight:600}

/* ============================================================
   16. REDUCED MOTION — full honor
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.ww-callbar,.ww-header,.ww-burger{display:none!important}body{padding-bottom:0}}

/* ============================================================
   17. TAP TARGET FLOOR — 48px min, enforced not assumed.
   Added after a real-browser audit found 58 sub-44px targets.
   ============================================================ */
.ww-card-link{min-height:48px;display:inline-flex;align-items:center}
.ww-nav a{display:inline-flex;align-items:center;min-height:48px}
.ww-area-cols a{display:flex;align-items:center;min-height:48px;padding:.15rem 0}
.ww-footer li{padding:0}
.ww-footer li a{display:flex;align-items:center;min-height:48px}
.ww-footer-legal a{display:inline-flex;align-items:center;min-height:48px}
.ww-badge-list li{min-height:44px}
/* Card titles are covered by a stretched ::after, so the real target is the
   whole card — but give the text itself a comfortable box anyway. */
.ww-card h3 a{display:inline-block;min-height:32px}
.ww-footer p a{display:inline-flex;align-items:center;min-height:48px}
.ww-nav a{padding-inline:.35rem}

/* ============================================================
   18. PLACE BAND — terrain imagery. Lazy, below the fold.
   ============================================================ */
.ww-band{position:relative;background:var(--ww-ink)}
.ww-band-img{width:100%;height:clamp(260px,42vw,460px);object-fit:cover;display:block;opacity:.62}
.ww-band-cap{position:absolute;inset:auto 0 0 0;padding-block:clamp(1.25rem,4vw,2.25rem);
  background:linear-gradient(to top,rgba(14,27,44,.94),rgba(14,27,44,.72) 55%,rgba(14,27,44,0))}
.ww-band-cap .ww-eyebrow{color:var(--ww-amber-dark);margin-bottom:.4rem}
.ww-band-text{color:#fff;font-family:var(--ww-display);font-weight:700;
  font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.4;letter-spacing:-.01em;max-width:52ch;margin:0}

/* ============================================================
   19. HERO BACKGROUND + PROOF LIST
   The image sits UNDER a solid navy scrim so white text keeps its
   measured 11:1 ratio — the photo never carries contrast duty.
   ============================================================ */
.ww-hero{position:relative;isolation:isolate;overflow:hidden}
.ww-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-2;opacity:.55}
.ww-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(18,60,109,.985) 0%,rgba(18,60,109,.97) 38%,rgba(18,60,109,.80) 62%,rgba(18,60,109,.42) 100%)}
/* Mobile: the hero is ~2200px tall once the symptom card stacks, so a full-bleed
   cover image gets stretched ~5x vertically into an unreadable smear. Below 960px
   the photo runs in flow as a real 16:9 band at the top and the text sits on solid
   navy (12.6:1) instead of on a dimmed photo. */
@media(max-width:959px){
  .ww-hero{padding-top:0}
  .ww-hero::before{display:none}
  .ww-hero-bg{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;
    object-fit:cover;object-position:center 55%;opacity:1;z-index:auto;
    margin:0 0 clamp(1.75rem,6vw,2.5rem)}
}
.ww-hero-proof{list-style:none;margin:1.75rem 0 0;padding:1.5rem 0 0;border-top:1px solid rgba(255,255,255,.2)}
.ww-hero-proof li{max-width:52ch;display:flex;gap:.7rem;align-items:flex-start;padding:.45rem 0;font-size:1.0625rem;color:#dbe5f0}
.ww-hero-proof svg{flex:0 0 auto;margin-top:.32rem;color:var(--ww-amber-dark)}
.ww-hero-proof strong{color:#fff;font-weight:600}

/* ============================================================
   20. FIGURES, WORK GRID, AREA PAIR
   ============================================================ */
.ww-figure{margin-top:clamp(2rem,5vw,3rem)}
.ww-figure img{width:100%;border-radius:var(--ww-radius);border:1px solid var(--ww-rule)}
.ww-figcap,.ww-area-pair figcaption{margin:.75rem 0 0;font-size:1rem;color:var(--ww-muted);max-width:64ch}

.ww-work-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;list-style:none;margin:2rem 0 0;padding:0}
@media(min-width:640px){.ww-work-grid{grid-template-columns:repeat(3,1fr)}}
.ww-work-grid>li{max-width:none;animation:ww-rise 220ms ease-out both}
.ww-work-grid>li:nth-child(2){animation-delay:60ms}
.ww-work-grid>li:nth-child(3){animation-delay:120ms}
.ww-work-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--ww-radius);border:1px solid var(--ww-rule)}
.ww-work-grid h3{margin:.9rem 0 .35rem;font-size:1.25rem}
.ww-work-grid p{font-size:1rem;color:var(--ww-muted);margin:0;max-width:none}

.ww-area-pair{display:grid;gap:1.5rem;grid-template-columns:1fr;margin:0 0 2.25rem}
@media(min-width:800px){.ww-area-pair{grid-template-columns:1fr 1fr}}
.ww-area-pair figure{margin:0}
.ww-area-pair img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--ww-radius);border:1px solid var(--ww-rule)}

/* ============================================================
   21. SONIC BOOM — conversion layer
   All contrast values below were computed, not estimated.
   ============================================================ */

/* --- Hero: the arrival answer. BRAND-BRIEF s1 - the #1 customer fear is
   "nobody will show up", not price. It gets body weight, not fine print. --- */
.ww-hero-answer{display:flex;gap:.85rem;align-items:flex-start;margin:1.75rem 0 0;
  padding:1rem 1.15rem;border:1px solid rgba(252,211,77,.42);border-radius:var(--ww-radius);
  background:rgba(255,255,255,.06);max-width:56ch}
.ww-hero-answer svg{flex:0 0 auto;margin-top:.15rem;color:var(--ww-amber-dark)}
.ww-hero-answer strong{display:block;color:#fff;font-weight:600;font-size:1.0625rem;line-height:1.4}
.ww-hero-answer span{display:block;margin-top:.3rem;color:#dbe5f0;font-size:1rem;line-height:1.55}

/* --- The order we work in (named process) --- */
.ww-steps{list-style:none;counter-reset:s;margin:2.25rem 0 0;padding:0;
  display:grid;gap:0;max-width:72ch}
.ww-steps li{max-width:none;position:relative;padding:0 0 1.75rem 3.75rem;border-left:2px solid var(--ww-rule);
  margin-left:1.25rem}
.ww-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.ww-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:-1.3rem;top:-.15rem;
  width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;
  background:var(--ww-navy);color:#fff;font-family:var(--ww-display);font-weight:700;font-size:1.0625rem;
  box-shadow:0 0 0 6px var(--ww-bg)}
.ww-steps h3{margin:.15rem 0 .4rem;font-size:1.1875rem;line-height:1.35}
.ww-steps p{margin:0;color:var(--ww-muted);max-width:60ch}

/* --- Evidence: structural incentive, not testimonials --- */
.ww-why{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:860px){.ww-why{grid-template-columns:repeat(3,1fr)}}
.ww-why>li{max-width:none;background:#fff;border:1px solid var(--ww-rule);
  border-top:3px solid var(--ww-navy);border-radius:var(--ww-radius);padding:1.6rem 1.5rem}
.ww-why svg{color:var(--ww-navy)}
.ww-why h3{margin:.9rem 0 .5rem;font-size:1.1875rem;line-height:1.35}
.ww-why p{margin:0;color:var(--ww-muted)}
.ww-why-foot{margin:1.75rem 0 0;max-width:76ch;color:var(--ww-muted)}

/* --- Closing section: phone dominant, callback secondary --- */
.ww-close-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.ww-close-grid{grid-template-columns:1.15fr .85fr}}
.ww-close-main h2{margin-top:0}
.ww-cta-lg{font-size:1.25rem;padding:1.05rem 2rem}
.ww-close-hours{display:flex;gap:.55rem;align-items:center;margin:1.1rem 0 0;
  color:var(--ww-amber-dark);font-weight:600;font-size:1.0625rem}
.ww-close-hours svg{flex:0 0 auto}
.ww-close-trust{list-style:none;margin:1.6rem 0 0;padding:1.4rem 0 0;
  border-top:1px solid rgba(255,255,255,.22)}
.ww-close-trust li{max-width:60ch;display:flex;gap:.6rem;align-items:flex-start;
  padding:.4rem 0;color:#dbe5f0;font-size:1rem;line-height:1.55}
.ww-close-trust svg{flex:0 0 auto;margin-top:.3rem;color:var(--ww-amber-dark)}

/* --- Callback form (secondary path only) --- */
.ww-callback{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--ww-radius);padding:clamp(1.4rem,4vw,1.9rem)}
.ww-cb-h{margin:0 0 .35rem;font-size:1.25rem;color:#fff}
.ww-cb-sub{margin:0 0 1.25rem;color:#dbe5f0;font-size:1rem}
.ww-cb-field{margin:0 0 1rem}
.ww-cb-field label{display:block;margin-bottom:.4rem;color:#fff;font-weight:600;font-size:1rem}
.ww-cb-field input,.ww-cb-field textarea{width:100%;min-height:48px;padding:.7rem .85rem;
  font:inherit;font-size:1.0625rem;color:var(--ww-ink);background:#fff;
  border:1px solid rgba(255,255,255,.5);border-radius:8px}
.ww-cb-field textarea{min-height:88px;resize:vertical;line-height:1.5}
.ww-cb-field input:focus-visible,.ww-cb-field textarea:focus-visible{
  outline:3px solid var(--ww-amber-dark);outline-offset:2px}
.ww-cb-field input::placeholder,.ww-cb-field textarea::placeholder{color:#4a5563}
.ww-btn-ghost-light{width:100%;min-height:52px;background:transparent;color:#fff;
  border:2px solid var(--ww-amber-dark);font-size:1.0625rem}
.ww-btn-ghost-light:hover{background:var(--ww-cta);color:var(--ww-cta-ink);border-color:var(--ww-cta)}
.ww-cb-fine{margin:.9rem 0 0;color:#dbe5f0;font-size:.9375rem;line-height:1.5}
.ww-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ww-cb-note{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 1.25rem;padding:.9rem 1rem;
  border-radius:8px;font-size:1.0625rem;line-height:1.55}
.ww-cb-note svg{flex:0 0 auto;margin-top:.25rem}
.ww-cb-ok{background:rgba(252,211,77,.14);border:1px solid rgba(252,211,77,.5);color:#fff}
.ww-cb-ok svg{color:var(--ww-amber-dark)}
.ww-cb-err{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.42);color:#fff}
.ww-map-link{display:inline-block;min-height:auto}
/* Process section: intro left, sequence right — fills the measure at desktop
   instead of leaving 40% of the row empty. Single column below 1000px. */
.ww-order-grid{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:1000px){
  .ww-order-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .ww-order-intro{position:sticky;top:110px}
  .ww-steps{margin-top:.35rem}
}
.ww-order-intro h2{margin-top:.25rem}
.ww-order-intro .ww-lede{margin-bottom:0}

/* ============================================================
   22. SERVICE PAGE TEMPLATE (Stage 4)
   Inherits every Sonic Boom pattern; adds only what a service page needs.
   ============================================================ */

/* --- Breadcrumbs --- */
.ww-crumbs{background:var(--ww-surface);border-bottom:1px solid var(--ww-rule)}
.ww-crumbs ol{list-style:none;margin:0;padding:.75rem 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:.35rem;font-size:.9375rem}
.ww-crumbs li{max-width:none;display:flex;align-items:center;gap:.35rem}
.ww-crumbs a{color:#14539b;text-decoration:none;min-height:auto}
.ww-crumbs a:hover{text-decoration:underline}
.ww-crumbs svg{color:var(--ww-muted);transform:rotate(-90deg);flex:0 0 auto}
.ww-crumbs [aria-current]{color:var(--ww-muted)}

/* --- Page hero: single column, shorter than the homepage hero --- */
.ww-hero-page{padding-block:clamp(2.5rem,6vw,4rem)}
.ww-hero-narrow{max-width:60ch}
.ww-hero-page h1{font-size:clamp(2rem,4.6vw,3.25rem)}

/* --- Problem: the symptoms that lead here --- */
.ww-symlist{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:1fr}
@media(min-width:760px){.ww-symlist{grid-template-columns:repeat(2,1fr)}}
.ww-symlist>li{max-width:none;display:flex;gap:1rem;align-items:flex-start;
  padding:1.25rem 1.35rem;background:#fff;border:1px solid var(--ww-rule);
  border-left:3px solid var(--ww-navy);border-radius:var(--ww-radius)}
.ww-symlist svg{flex:0 0 auto;margin-top:.15rem;color:var(--ww-navy)}
.ww-symlist h3{margin:0 0 .35rem;font-size:1.125rem;line-height:1.35}
.ww-symlist h3 a{color:var(--ww-link);text-decoration:none;min-height:auto}
.ww-symlist h3 a:hover{text-decoration:underline}
.ww-symlist p{margin:0;color:var(--ww-muted);font-size:1rem}

/* --- Scope stop: mandatory on every service page (BRAND-BRIEF s6) --- */
.ww-scope{display:flex;gap:.85rem;align-items:flex-start;margin:2rem 0 0;
  padding:1.15rem 1.35rem;background:#fff;border:1px solid var(--ww-rule);
  border-left:3px solid var(--ww-cta);border-radius:var(--ww-radius);max-width:78ch}
.ww-scope svg{flex:0 0 auto;margin-top:.15rem;color:var(--ww-navy)}
.ww-scope span{color:var(--ww-ink)}

/* --- FAQ: same 0fr->1fr mechanism as the homepage symptom accordion --- */
.ww-faq-wrap{max-width:78ch}
.ww-faq{margin-top:2rem;background:#fff;border:1px solid var(--ww-rule);
  border-radius:var(--ww-radius);overflow:hidden}
.ww-faq-item{border-bottom:1px solid var(--ww-rule)}
.ww-faq-item:last-child{border-bottom:0}
.ww-faq h3{margin:0;font-size:1.0625rem}
.ww-faq-btn{width:100%;min-height:56px;display:flex;gap:.9rem;align-items:center;
  padding:1rem 1.35rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--ww-display);font-weight:700;font-size:1.0625rem;line-height:1.4;
  color:var(--ww-ink)}
.ww-faq-btn:hover{background:var(--ww-surface)}
.ww-faq-chev{margin-left:auto;flex:0 0 auto;width:20px;height:20px;color:var(--ww-navy);
  transition:transform var(--ww-t)}
.ww-faq-btn[aria-expanded="true"] .ww-faq-chev{transform:rotate(180deg)}
.ww-faq-item.is-closed .ww-faq-chev{transform:none}
.ww-faq-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows 240ms cubic-bezier(.2,.6,.3,1)}
.ww-faq-item.is-closed .ww-faq-panel{grid-template-rows:0fr}
.ww-faq-panel>div{overflow:hidden}
.ww-faq-inner{padding:0 1.35rem 1.35rem}
.ww-faq-inner p{margin:0 0 .8rem;color:var(--ww-muted)}
.ww-faq-inner p:last-child{margin-bottom:0}

/* --- Related links --- */
.ww-related{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:1fr}
@media(min-width:700px){.ww-related{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.ww-related{grid-template-columns:repeat(3,1fr)}}
.ww-related>li{max-width:none}
.ww-related a{display:block;min-height:48px;height:100%;padding:1.35rem;background:#fff;
  border:1px solid var(--ww-rule);border-radius:var(--ww-radius);text-decoration:none;
  transition:transform var(--ww-t),box-shadow var(--ww-t),border-color var(--ww-t)}
.ww-related a:hover{transform:translateY(-2px);box-shadow:var(--ww-shadow-lift);
  border-color:var(--ww-navy)}
.ww-related svg{color:var(--ww-navy)}
.ww-related-t{display:block;margin:.75rem 0 .3rem;font-family:var(--ww-display);
  font-weight:700;font-size:1.125rem;color:var(--ww-link)}
.ww-related-n{display:block;color:var(--ww-muted);font-size:1rem;line-height:1.55}
.ww-related-area{display:flex;gap:.75rem;align-items:flex-start;margin:2rem 0 0;
  color:var(--ww-muted);max-width:76ch}
.ww-related-area svg{flex:0 0 auto;margin-top:.2rem;color:var(--ww-navy)}
.ww-related-area a{color:var(--ww-link)}

/* Service-page hero on mobile: same in-flow photo treatment as the homepage. */
@media(max-width:959px){
  .ww-hero-page{padding-top:0}
  .ww-hero-page .ww-hero-bg{aspect-ratio:2/1}
}
/* Whole symptom card is the tap target (the 21px heading link alone fails 44px). */
.ww-symlist>li{position:relative}
.ww-symlist h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--ww-radius)}
.ww-symlist>li:hover{border-color:var(--ww-navy);box-shadow:var(--ww-shadow)}
.ww-symlist h3 a:focus-visible::after{outline:3px solid var(--ww-accent);outline-offset:2px}

/* ============================================================
   23. SONIC BOOM — service page conversion layer
   ============================================================ */

/* --- Mid-page CTA band. Long pages persuade far past the hero CTA. --- */
.ww-ctaband{background:var(--ww-navy);color:#fff;padding-block:clamp(1.75rem,4vw,2.5rem)}
.ww-ctaband-in{display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.ww-ctaband-in{grid-template-columns:1.35fr .65fr}}
.ww-ctaband-line{margin:0;font-family:var(--ww-display);font-weight:700;
  font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.35;color:#fff;max-width:44ch}
.ww-ctaband-trust{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.4rem 1.5rem;color:#dbe5f0;font-size:1rem;line-height:1.5}
.ww-ctaband-trust li{max-width:none;display:flex;gap:.4rem;align-items:flex-start}
.ww-ctaband-trust svg{flex:0 0 auto;margin-top:.28rem;color:var(--ww-amber-dark)}
.ww-ctaband-act{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
@media(min-width:900px){.ww-ctaband-act{align-items:flex-end;text-align:right}}
.ww-ctaband-hours{color:var(--ww-amber-dark);font-weight:600;font-size:1rem}

/* --- "What to have ready when you call" --- */
.ww-prep-wrap{max-width:74ch}
.ww-prep{list-style:none;counter-reset:p;margin:2rem 0 0;padding:0}
.ww-prep li{max-width:none;position:relative;padding:.9rem 0 .9rem 3.1rem;
  border-bottom:1px dashed var(--ww-rule);color:var(--ww-muted);font-size:1.0625rem;line-height:1.6}
.ww-prep li:last-child{border-bottom:0}
.ww-prep li::before{counter-increment:p;content:counter(p);position:absolute;left:0;top:.85rem;
  width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;
  background:var(--ww-surface);border:1px solid var(--ww-rule);color:var(--ww-navy);
  font-family:var(--ww-display);font-weight:700;font-size:.9375rem}
.ww-prep strong{color:var(--ww-ink);font-weight:600}
.ww-prep-foot{display:flex;gap:.75rem;align-items:flex-start;margin:1.75rem 0 0;
  padding:1.1rem 1.3rem;background:var(--ww-surface);border-radius:var(--ww-radius);
  border-left:3px solid var(--ww-cta);max-width:74ch}
.ww-prep-foot svg{flex:0 0 auto;margin-top:.2rem;color:var(--ww-navy)}
.ww-prep-foot span{color:var(--ww-ink)}
/* Compact call point at the end of the FAQ — the second natural decision moment. */
.ww-faq-cta{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:center;margin:1.75rem 0 0;
  padding:1.25rem 1.4rem;background:var(--ww-surface);border:1px solid var(--ww-rule);
  border-left:3px solid var(--ww-cta);border-radius:var(--ww-radius)}
.ww-faq-cta span{flex:1 1 22ch;color:var(--ww-ink);font-size:1.0625rem;line-height:1.55}
.ww-btn-outline{background:#fff;color:var(--ww-navy);border:2px solid var(--ww-navy);
  min-height:48px;white-space:nowrap}
.ww-btn-outline:hover{background:var(--ww-navy);color:#fff}

/* ============================================================
   24. DESKTOP LAYOUT CORRECTIONS

   Three real defects were measured at 1440/1600 and are fixed here.
   ============================================================ */

/* --- 1. Ragged left edge. `.ww-faq-wrap` and `.ww-prep-wrap` carried their own
   max-width on the same element as `.ww-wrap` (which centres itself), so those
   two sections sat 167px and 188px further right than every other section.
   Measured left edges at 1440: 144, 144, 144 … 311 … 332. Both sections now
   render through `.ww-order-grid` (see 25), so the container never moves. --- */
.ww-faq,.ww-prep,.ww-prep-foot,.ww-faq-cta{margin-inline:0}

/* --- 2. `.ww-split` was `align-items:center`, so the short left column floated
   against the tall right one and the two columns shared no top edge. --- */
@media(min-width:900px){.ww-split{align-items:start}}

/* --- 3. Vertical rhythm. 96px top + 96px bottom put 192px of dead space
   between every pair of sections at desktop. Consecutive sections on the same
   ground now share one gap instead of stacking two. --- */
:root{--ww-section:clamp(2.75rem,5.2vw,4.5rem)}
.ww-section+.ww-section{padding-top:0}
.ww-section+.ww-section.ww-surface,.ww-surface+.ww-section{padding-top:var(--ww-section)}

/* --- Process section: the sticky intro left a tall empty column beside the
   steps. Give it a narrower measure and let the steps start at the same top. --- */
@media(min-width:1000px){
  .ww-order-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,4vw,3.5rem)}
  .ww-order-intro{position:static}
  .ww-order-intro .ww-lede{font-size:1.0625rem}
}

/* --- Card grid column count is driven by the number of cards, not by a fixed
   rule. Eight services across three columns left an orphan row of two; forcing
   four columns everywhere then did the same thing to the six-item "what this
   covers" grid. Four across only when the count divides by four. --- */
@media(min-width:1200px){
  .ww-card-grid.ww-3{grid-template-columns:repeat(3,1fr)}
  .ww-card-grid.ww-3:has(>:nth-child(4):last-child),
  .ww-card-grid.ww-3:has(>:nth-child(8):last-child){grid-template-columns:repeat(4,1fr)}
}

/* --- Work grid images were postage-stamp sized against a 1152px container. --- */
.ww-work-grid img{aspect-ratio:4/3}
@media(min-width:1000px){.ww-work-grid{gap:2rem}}

/* --- Section headings and ledes: keep a readable measure without shrinking the
   block they sit in, so the left edge never moves. --- */
.ww-section>.ww-wrap>h2{max-width:26ch}
@media(min-width:1000px){.ww-section>.ww-wrap>h2{max-width:none}}
.ww-section>.ww-wrap>.ww-lede{max-width:64ch}

/* --- Service hero: two columns at desktop so the right half is not dead navy --- */
.ww-hero-page-grid{display:grid;gap:clamp(2rem,4vw,3.25rem);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.ww-hero-page-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.ww-hero-page .ww-hero-narrow{max-width:none}

.ww-facts{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--ww-radius);padding:clamp(1.35rem,3vw,1.75rem)}
.ww-facts-h{margin:0 0 1rem;font-family:var(--ww-display);font-weight:700;font-size:.8125rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ww-amber-dark)}
.ww-facts-list{margin:0;display:grid;gap:.85rem}
.ww-facts-list>div{display:grid;gap:.15rem;padding-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.16)}
.ww-facts-list>div:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:560px){.ww-facts-list>div{grid-template-columns:8.5rem 1fr;gap:.15rem 1rem;align-items:baseline}}
.ww-facts-list dt{font-family:var(--ww-display);font-weight:700;font-size:.9375rem;color:var(--ww-amber-dark)}
.ww-facts-list dd{margin:0;color:#fff;font-size:1rem;line-height:1.5}
.ww-facts-flag{display:flex;gap:.65rem;align-items:flex-start;margin:1.25rem 0 0;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.26)}
.ww-facts-flag svg{flex:0 0 auto;margin-top:.15rem;color:var(--ww-amber-dark)}
.ww-facts-flag span{color:#dbe5f0;font-size:1rem;line-height:1.55}

/* Service hero photo was reading as a ghost behind the overlay; h1 measured
   11.09:1 so there is headroom to let the subject show. But the homepage scrim
   fades to .42 alpha on the right because that half of the homepage hero is
   empty. The service hero now puts the "At a glance" panel there, so the right
   edge has to carry body text: measured white-on-photo at 5.54:1 with the old
   gradient. The service hero gets its own flatter scrim, and the panel gets a
   real navy ground of its own instead of a 7% white wash. */
.ww-hero-page .ww-hero-bg{opacity:.78}
.ww-hero-page::before{
  background:linear-gradient(100deg,rgba(18,60,109,.985) 0%,rgba(18,60,109,.96) 46%,rgba(18,60,109,.90) 100%)}
.ww-hero-page .ww-facts{background:rgba(10,32,58,.62);border-color:rgba(255,255,255,.30)}
@media(max-width:959px){.ww-hero-page .ww-hero-bg{opacity:1}}


/* ============================================================
   25. FAQ + PREP: TWO-COLUMN AT DESKTOP

   Both sections rendered as a ~780px list inside a 1152px container with the
   right half empty, which is what made the page read as unfinished at 1440.
   They now use the same intro-left / content-right grid as the process section,
   so the whole page shares one desktop rhythm instead of three.
   ============================================================ */
.ww-faq-grid .ww-faq{margin-top:0}
.ww-faq-grid .ww-faq-cta{margin-top:1.5rem}
.ww-prep-grid .ww-prep{margin-top:0}

/* The intro column is short in both sections; without this the heading floats
   mid-column against a tall list. */
@media(min-width:1000px){
  .ww-faq-grid .ww-order-intro,.ww-prep-grid .ww-order-intro{position:sticky;top:110px}
}

/* Breadcrumb "Home" measured 41x25 — under the 44px target the rest of the site
   holds. Padding, not min-height, so the crumb bar keeps its height. */
.ww-crumbs ol{padding:.35rem 0}
.ww-crumbs a,.ww-crumbs [aria-current]{display:inline-flex;align-items:center;
  min-height:44px;padding-block:0}