/* CHA Dumpster Rental Eau Claire — Eau Claire, WI — styles.css
   Palette: every value below is copied verbatim from common.py's THEME_* constants, which were
   pixel-sampled programmatically (PIL, dominant-color-cluster analysis -- bucketed/tolerance-based
   averaging rather than a single percentile pick, since this logo's badge is a genuine gradient,
   not a flat fill). The gradient badge samples to a deep, saturated blue at its core, rgb(3,65,119)
   = #034177 (THEME_NAVY), fading toward a brighter mid-blue, rgb(30,144,207) = #1e90cf (THEME_BLUE),
   at its outer ring. THEME_NAVY and THEME_BLUE are those two sampled tones, used DIRECTLY (no
   derivation needed) as the two ends of the badge's own real gradient. THEME_NAVY_DARK (#022f56),
   THEME_BLUE_MID (#62b1dd), THEME_BLUE_LIGHT (#edf6fb) and THEME_SKY (#9acde9) are DERIVED blends
   toward black or white for surfaces the badge itself doesn't cover.

   Several recent siblings in this lineage have shipped blue badge logos, so this build deliberately
   differentiates on TWO axes at once: the sampled navy/blue gradient pair itself (distinct from any
   single-tone sibling badge) AND a CTA/accent color from a completely different hue family -- a
   deep pine/forest green, not another blue/teal/cyan variant several recent siblings have used for
   their own accent, and not the red/rust family used by the immediately prior sibling build
   (Harding & Son Norwalk's "Lighthouse Red" #a8321c) or by STJ St. Joseph's own rust accent.
   THEME_ACCENT ("Chippewa Pine," #235a36) is a genuine, disclosable tie to the real Chippewa Valley
   -- the pine woodlots and dairy pastureland ringing Eau Claire, and the "Eau Claire" (French,
   "clear water") river-and-forest namesake itself -- not an invented gimmick. Checked explicitly
   for a local color collision: UW-Eau Claire's Blugolds play in purple and gold, and regional
   prep/rec leagues run mostly navy/red combinations -- this build's deep forest green is neither
   purple-and-gold nor a rust/red, avoiding both. THEME_ACCENT_DARK (#194127) is a darkened accent
   for surfaces needing extra depth; THEME_ACCENT_LIGHT (#e9eeeb) is a light tint for section
   highlights.

   Shape/motif system: the real logo itself is a circular gradient badge with a dumpster icon and no
   river motif of its own, so this build's signature shape was chosen fresh rather than echoed from
   the artwork -- a small "confluence chevron," a genuine nod to the real confluence of the Chippewa
   and Eau Claire Rivers in downtown Eau Claire (Phoenix Park) -- the actual namesake "clear water"
   crossing the city is named for -- checked against the design-identity log's prior motifs
   (compass-rose, gable/roofline, canopy-road, gear, flame, gem, star, arrow, diamond, checker,
   lightning, wave, mountain, flower/petal, pine-tree, horseshoe) -- a converging river-confluence
   chevron has not been used. That confluence-chevron motif is echoed at three scales: the eyebrow
   tick (drawn inline by `common.py`'s `eyebrow()` as an ~18x18 SVG two-strokes-meeting-at-a-point
   glyph), the trust-bar "chip" (a navy disc ringed in the pine accent, matching the eyebrow tick's
   geometry without repeating its exact shape), and the hero's bottom edge (a dotted, scalloped
   "trailline" band built with a masked `repeating-radial-gradient`, standing in for a river's
   surface ripple rather than a coastal tideline or a row of rail-track rivets -- the underlying CSS
   class name `hero-trailline` is kept for structural compatibility with the cloned generator
   scripts). Cards carry a soft, shallow-angled dashed top border (`border-image` with a
   repeating-linear-gradient) that reads as an easy ripple line rather than a row of sharp radiating
   ticks. Card corners, and the shape system generally, are tuned toward soft rounded-squares
   ("squircle" family) — see the per-component comments below for detail.

   Headings and body copy both run off common.py's FONTS import: Bricolage Grotesque (headings, a
   confident, slightly quirky variable display grotesk with real weight range) paired with Public
   Sans (body, clean, highly legible, neutral -- also the US government's own USWDS typeface, a
   fitting quiet echo of this build's "real government, even the towns" civic-structure content) —
   checked against every prior sibling generator's FONTS line found on disk
   (`ls /root | grep ^gen_`) and against claude/build-playbook.md's design-identity log; this exact
   Bricolage-Grotesque + Public-Sans pairing appears in neither list.

   WCAG contrast (relative-luminance formula, computed with a standalone Python script, not
   estimated):
     white text on THEME_NAVY       (#034177): 10.36:1 — passes AAA comfortably (headings, footer, CTA buttons).
     white text on THEME_NAVY_DARK  (#022f56): 13.60:1 — passes AAA comfortably (topbar/deepest).
     white text on THEME_BLUE       (#1e90cf):  3.53:1 — fails AA for normal text; large-scale/
                                                          decorative use only, never dense text blocks.
     white text on THEME_BLUE_MID   (#62b1dd):  2.37:1 — fails AA; decorative-only (chip rings, ticks,
                                                          never a button/text-carrying fill).
     white text on THEME_SKY        (#9acde9):  1.71:1 — fails AA; decorative-only (dividers).
     white text on THEME_ACCENT     (#235a36):  8.12:1 — passes AAA comfortably; safe to use
                                                          directly as a text-carrying CTA/badge fill.
     white text on THEME_ACCENT_DARK(#194127): 11.50:1 — passes AAA comfortably (deeper accent fills).
     THEME_ACCENT on THEME_NAVY:                1.28:1 — decorative-only (thin ticks/rings on dark
                                                          panels), never text-on-text. */
:root{
  /* ---- brand: exact hex values from common.py (THEME_NAVY / THEME_NAVY_DARK / THEME_BLUE /
     THEME_BLUE_MID / THEME_BLUE_LIGHT / THEME_SKY), derived from the real logo's single sampled
     navy ---- */
  --blue-dark:#022f56;   /* THEME_NAVY_DARK — deepest ink, topbar/footer panels */
  --navy:#034177;        /* THEME_NAVY — exact sampled logo navy, buttons, borders, brand marks */
  --navy-mid:#1c6a9e;    /* derived mid-tone between navy and blue — links, labels, hover states */
  --blue:#1e90cf;        /* THEME_BLUE — derived secondary brand color */
  --blue-mid:#62b1dd;    /* THEME_BLUE_MID — hover states, rules */
  --ice:#9acde9;         /* derived light blue (THEME_SKY) — icon/text tint on dark backgrounds */
  --blue-light:#edf6fb;  /* THEME_BLUE_LIGHT — soft section backgrounds/washes */
  --sky:#9acde9;         /* THEME_SKY — derived sky-blue highlight — decorative-only tertiary accent */
  /* ---- accent: "Chippewa Pine" deep forest green — exact hex values from common.py
     THEME_ACCENT / THEME_ACCENT_DARK / THEME_ACCENT_LIGHT, tied to the real Chippewa Valley pine
     woodlots and dairy pastureland ringing Eau Claire — see contrast note ---- */
  --accent:#235a36; --accent-dark:#194127; --accent-light:#e9eeeb;
  /* ---- neutrals ---- */
  --ink:#1c2430; --ink-2:#4b5262; --muted:#6c7689;
  --bg:#ffffff; --bg-soft:#edf6fb; --bg-tint:#dcebf5;
  --line:#dde4ec; --line-soft:#ebeff4;
  --white:#fff;
  --sans:'Public Sans',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head:'Bricolage Grotesque',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1200px; --gut:20px;
  /* ---- shape motif: soft rounded-squares ("squircle" family) throughout, echoing the logo's own
     rounded-square badge shape — the eyebrow tick, trust-chip and card-top-border components carry
     the signature confluence-chevron/trailline treatment defined at their own rules below ---- */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-card:20px; --r-btn:10px; --r-pill:999px;
  /* trailline band: used once as the hero's bottom-edge treatment — a scalloped row of small
     ripple-marker dots (repeating-radial-gradient) on a navy ground, echoing a river's surface
     rather than a diagonal linear-gradient tick stripe or a coastal tideline */
  --wave-band:repeating-radial-gradient(circle at 12px 100%,transparent 0 8px,var(--accent) 8px 10px,transparent 10px 24px),var(--navy);
  --sh-1:0 1px 0 rgba(9,42,65,.07),0 2px 8px rgba(9,42,65,.09);
  --sh-2:0 8px 22px rgba(9,42,65,.18);
  --sh-3:0 18px 46px rgba(9,42,65,.26);
  --t:.16s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,iframe{max-width:100%}
img{height:auto;display:block}
h1,h2,h3{font-family:var(--head);color:var(--navy);line-height:1.1;margin:0 0 .5em;letter-spacing:-.005em;
  font-weight:700;text-transform:none}
h4{font-family:var(--head);font-weight:700;text-transform:none;letter-spacing:-.005em;line-height:1.28;color:var(--navy);margin:0 0 .5em}
h1{font-size:clamp(2.2rem,1.45rem + 2.9vw,3.65rem);line-height:1.04;font-weight:800}
h2{font-size:clamp(1.6rem,1.2rem + 1.55vw,2.4rem);font-weight:700}
h3{font-size:clamp(1.18rem,1.05rem + .5vw,1.42rem);line-height:1.2;font-weight:700}
h4{font-size:1.08rem}
p{margin:0 0 1.05em}
a{color:var(--navy-mid);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
li{margin:0 0 .45em}
strong{font-weight:700;color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0;font-weight:700}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.ico{width:22px;height:22px;flex:0 0 auto}

/* ---------- buttons (standard rounded-rectangle shape family, THEME_ACCENT harbor rust-red for
   the primary CTA — chosen over the lighter THEME_BLUE because it clears WCAG AA for white button
   text at 5.82:1, where THEME_BLUE_MID would fail at 3.59:1 — see the file header note.
   A thin white underline grows in from the left on hover) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);
  font-weight:700;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;padding:.78em 1.6em;border-radius:var(--r-btn);
  border:2px solid transparent;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  text-decoration:none;line-height:1.15;text-align:center;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.85);transition:width var(--t)}
.btn:hover::after{width:100%}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:19px;height:19px}
/* white text on THEME_ACCENT clears 6.15:1 (passes AAA for normal text),
   9.66:1 on the darker THEME_ACCENT_DARK hover fill -- THEME_BLUE is never used as a text-
   carrying button fill (3.60:1, fails AA), per the file header contrast note */
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 13px rgba(181,58,46,.35)}
.btn-primary:hover{background:var(--accent-dark);color:#fff;box-shadow:0 9px 20px rgba(127,41,32,.42)}
.btn-primary:active{box-shadow:0 2px 7px rgba(181,58,46,.32)}
.btn-red{background:var(--accent);color:#fff;box-shadow:0 4px 13px rgba(181,58,46,.35)}
.btn-red:hover{background:var(--accent-dark);color:#fff;box-shadow:0 9px 20px rgba(127,41,32,.42)}
.btn-red:active{box-shadow:0 2px 7px rgba(181,58,46,.32)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 4px 13px rgba(28,58,139,.34)}
.btn-navy:hover{background:var(--blue-dark);color:#fff;box-shadow:0 9px 20px rgba(9,42,65,.4)}
.btn-navy:active{box-shadow:0 2px 7px rgba(28,58,139,.34)}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 4px 13px rgba(9,42,65,.18)}
.btn-white:hover{background:var(--blue-light);color:var(--blue-dark);box-shadow:0 9px 20px rgba(9,42,65,.22)}
.btn-white:active{box-shadow:0 2px 7px rgba(9,42,65,.18)}
.btn-white::after{background:var(--blue)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}
.sec .btn-ghost{color:var(--navy);border-color:var(--navy)}
.sec .btn-ghost:hover{background:var(--navy);color:#fff}
.btn-lg{font-size:1.1rem;padding:.88em 1.9em}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin:1.4rem 0 0;align-items:stretch}

/* ---------- eyebrow (signature motif: a small confluence-chevron tick, drawn inline by
   common.py's eyebrow() as an 18x18 <svg class="tick"> in the pine accent — a genuine nod to
   the real confluence of the Chippewa and Eau Claire Rivers — sized/aligned here, no fill/background
   of our own layered behind it, so the inline SVG's own stroke reads cleanly) ---------- */
.eyebrow{display:flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.83rem;color:var(--navy-mid);margin:0 0 .75em}
.eyebrow .tick{display:inline-block;width:18px;height:18px;flex:0 0 auto}
.hero .eyebrow,.ctaband .eyebrow{color:var(--ice)}

/* ---------- topbar / header ---------- */
.topbar{background:var(--blue-dark);color:#c3d7ee;font-size:.83rem}
.topbar-in{display:flex;gap:26px;align-items:center;justify-content:space-between;min-height:38px;flex-wrap:wrap}
.tb-item{display:inline-flex;align-items:center;gap:.5em}
.tb-item .ico{width:15px;height:15px;color:var(--ice)}
.site-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:3px solid var(--navy);box-shadow:var(--sh-1)}
.head-in{display:flex;align-items:center;gap:14px;min-height:78px;flex-wrap:nowrap;min-width:0}
.brand{display:flex;align-items:center;gap:11px;flex:0 1 auto;text-decoration:none;min-width:0;overflow:hidden}
.brand:hover{text-decoration:none}
.brand img{height:58px;width:auto;flex:0 0 auto}
.brand-word{font-family:var(--sans);font-weight:700;font-size:.86rem;line-height:1.15;color:var(--navy);
  text-transform:uppercase;letter-spacing:.03em;padding-left:13px;border-left:4px solid var(--blue);white-space:nowrap}
.brand-word small{display:block;font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.08em;
  color:var(--muted);text-transform:uppercase;margin-top:4px}
.mainnav{margin-left:auto}
.navlist{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.navlist>li{position:relative;margin:0}
.navlist>li>a{display:block;padding:11px 13px;font-family:var(--sans);font-weight:700;font-size:.9rem;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.02em;color:var(--navy);border-radius:var(--r-sm);transition:background var(--t),color var(--t);position:relative}
.navlist>li>a:hover{background:var(--bg-tint);color:var(--navy-mid);text-decoration:none}
.navlist>li>a[aria-current="page"],.navlist>li>a.is-active{color:var(--navy-mid)}
.navlist>li>a[aria-current="page"]::after,.navlist>li>a.is-active::after{content:"";position:absolute;left:13px;right:13px;
  bottom:5px;height:3px;border-radius:1px;background:var(--accent)}
.has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;vertical-align:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute;top:100%;left:0;min-width:268px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--line);border-top:3px solid var(--blue);
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh-3);padding:8px;list-style:none;margin:6px 0 0;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity var(--t),transform var(--t),visibility var(--t);z-index:70}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub li{margin:0}
.sub a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;color:var(--ink-2);text-transform:none;font-family:var(--sans)}
.sub a:hover{background:var(--bg-tint);color:var(--navy-mid);text-decoration:none}
.sub-toggle{display:none}
.head-call{flex:0 0 auto;white-space:nowrap}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:44px;padding:0 10px;
  background:var(--navy);border:0;border-radius:var(--r-sm);cursor:pointer;margin-left:auto}
.burger span{display:block;height:3px;background:#fff;border-radius:1px;transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.navscrim{position:fixed;inset:0;background:rgba(9,42,65,.5);z-index:58;backdrop-filter:blur(2px)}

/* ---------- hero (deep navy field, closing on the signature trailline band at the base, standing
   in for a river's surface ripple rather than a solid gradient bar or a coastal tideline) ---------- */
.hero{position:relative;background:linear-gradient(155deg,var(--blue-dark) 0%,var(--navy) 55%,var(--navy-mid) 100%);
  color:#e7edfa;overflow:hidden;isolation:isolate;border-top:10px solid var(--blue)}
.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;z-index:0;pointer-events:none;
  background:linear-gradient(var(--blue),var(--navy-mid))}
.hero::after{content:"";position:absolute;right:-6%;top:-14%;width:min(360px,46vw);aspect-ratio:1;
  background:repeating-radial-gradient(circle,rgba(181,58,46,.16) 0 2px,transparent 2px 15px);
  -webkit-mask-image:radial-gradient(circle,transparent 0 34%,#000 40% 68%,transparent 74%);
  mask-image:radial-gradient(circle,transparent 0 34%,#000 40% 68%,transparent 74%);
  z-index:0;pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;padding-block:clamp(46px,6vw,84px)}
.hero-copy{min-width:0}
.hero h1{color:#fff;margin-bottom:.42em;text-wrap:balance}
.hero .lede{font-size:clamp(1.03rem,.97rem + .34vw,1.22rem);color:#d3e2f6;max-width:60ch;margin-bottom:0}
.hero-ticks{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:10px 26px}
.hero-ticks li{display:flex;align-items:center;gap:.55em;margin:0;font-weight:700;font-size:.94rem;color:#e0eafb}
.hero-ticks .ico{width:18px;height:18px;flex:0 0 18px;padding:2px;background:var(--accent-light);color:var(--navy);border-radius:4px}
.hero-media{position:relative}
.hero-media img{border-radius:var(--r-lg);box-shadow:0 24px 56px rgba(3,9,15,.55);border:5px solid #fff;object-fit:cover;width:100%;height:auto;min-height:min(520px,50vw);aspect-ratio:1408/768}
.hero-badge{position:absolute;left:-14px;bottom:-18px;background:var(--blue-dark);color:#fff;border-radius:var(--r) var(--r-lg) var(--r-lg) var(--r);
  padding:14px 22px 14px 18px;box-shadow:var(--sh-3);display:flex;align-items:center;gap:12px;max-width:78%;border-left:6px solid var(--accent)}
@media (max-width:1000px){.hero-badge{position:static;max-width:none;margin-top:14px;left:auto;bottom:auto}}
.hero-badge .ico{width:28px;height:28px;color:var(--ice)}
.hero-badge strong{display:block;font-family:var(--head);font-weight:800;font-size:1.1rem;line-height:1.15;letter-spacing:-.005em}
.hero-badge span{font-size:.83rem;color:#b9cbe6}
.hero-page .hero-in{padding-block:clamp(36px,4.4vw,60px)}
.hero-page h1{font-size:clamp(1.95rem,1.35rem + 2.2vw,2.95rem)}
.hero-trailline{position:relative;height:16px;z-index:1;background:var(--wave-band)}
.hero-trailline::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.3)}
.hero-trailline::after{content:"";display:block;height:6px;background:var(--blue-dark)}

/* ---------- crumbs ---------- */
.crumbs{background:var(--bg-soft);border-bottom:1px solid var(--line-soft);font-size:.845rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45em;padding:11px 0;margin:0;color:var(--muted)}
.crumbs li{margin:0;display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin-right:.55em;color:#b7c0d0}
.crumbs a{color:var(--ink-2);font-weight:700}

/* ---------- trust bar (signature motif: a concentric-ring chip — a navy disc ringed with thin
   accent-colored rings, built with a `repeating-radial-gradient` masked to a thin donut with
   `mask-image:radial-gradient(...)` — a plain, sturdy ring treatment (border-radius arch,
   scalloped clip-path, picket-top polygon are all avoided) that pairs with the confluence-chevron eyebrow
   tick without repeating its exact shape) ---------- */
.trust{background:var(--bg-soft);border-bottom:1px solid var(--line-soft)}
.trust-list{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.trust-list>*{min-width:0}
.trust-item>div{min-width:0}
.trust-item{display:flex;align-items:flex-start;gap:14px;margin:0}
.trust-chip{position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(9,42,65,.28)}
.trust-chip::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at center,var(--accent) 0 2px,transparent 2px 6px);
  -webkit-mask-image:radial-gradient(circle,transparent 0 62%,#000 68% 100%);
  mask-image:radial-gradient(circle,transparent 0 62%,#000 68% 100%)}
.trust-chip .ico{position:relative;z-index:1;width:22px;height:22px;color:#fff}
.trust-item strong{display:block;font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--navy);line-height:1.25}
.trust-item span{display:block;font-size:.87rem;color:var(--muted);line-height:1.45;margin-top:2px}

/* ---------- sections ---------- */
.sec{padding-block:clamp(44px,5.4vw,76px)}
.sec-alt{background:var(--bg-soft)}
.sec-head{max-width:74ch;margin-bottom:2.1rem}
.sec-head h2{margin-bottom:.35em;text-wrap:balance}
.sec-sub{color:var(--ink-2);font-size:1.04rem;margin:0}
.sec-narrow .wrap{max-width:900px}
.sec-faq{background:var(--bg-soft)}
.sec-contact{padding-top:clamp(36px,4.6vw,64px)}
.sec-links{background:var(--bg-soft)}
.prose{max-width:76ch}
.prose a{overflow-wrap:anywhere}
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.5em}
.prose>:first-child{margin-top:0}
.prose ul li,.prose ol li{margin-bottom:.55em}

/* ---------- cards (signature motif: soft rounded-square (squircle) corners — noticeably rounder
   than a prior circular-badge sibling's more angular tuning, echoing the logo's own rounded-
   square badge shape — with a gently-dashed, shallow-angled top border, built with `border-image`
   on a `repeating-linear-gradient`. Not a solid rule and not the prior sibling's steep, tightly-
   spaced sunburst-tick dashes — the wider, shallower rhythm here reads as an easy ripple line
   rather than a row of radiating ticks) ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.cards>*{min-width:0}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;margin:0;background:#fff;border:1px solid var(--line);
  border-top:4px solid;border-image:repeating-linear-gradient(12deg,var(--accent) 0 10px,transparent 10px 22px) 4;
  border-radius:var(--r-card);
  padding:26px 22px 22px;box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column;min-width:0}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.card-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--navy);color:var(--accent-light);margin-bottom:14px}
.card-ico .ico{width:23px;height:23px}
.card h3{margin-bottom:.4em}
.card h3 a{color:var(--navy)}
.card h3 a:hover{color:var(--navy-mid);text-decoration:none}
.card p{color:var(--ink-2);font-size:.95rem;margin-bottom:1em}
.card-link{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;font-family:var(--sans);
  font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;color:var(--navy-mid)}
.card-link .ico{width:17px;height:17px;transition:transform var(--t)}
.card-link:hover{text-decoration:none}
.card-link:hover .ico{transform:translateX(4px)}
.sec-alt .card{background:#fff}

/* ---------- steps (a squared-off number tile in THEME_BLUE) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{margin:0;position:relative;padding-top:6px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:var(--blue);color:#fff;font-family:var(--head);font-weight:800;font-size:1.3rem;margin-bottom:13px;
  box-shadow:0 4px 10px rgba(44,79,136,.4)}
.step h3{margin-bottom:.35em}
.step p{color:var(--ink-2);font-size:.95rem;margin:0}

/* ---------- split / feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split>*{min-width:0}
.split-media img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%;aspect-ratio:1408/768;object-fit:cover}
.split-copy>:last-child{margin-bottom:0}
.checklist{list-style:none;padding:0;margin:1.1rem 0}
.checklist li{display:flex;gap:.7em;align-items:flex-start;margin-bottom:.7em;font-size:.98rem}
.checklist .ico{width:20px;height:20px;flex:0 0 20px;margin-top:2px;padding:3px;background:var(--blue-light);color:var(--navy);border-radius:6px}
.fig{margin:1.8rem 0}
.fig img{border-radius:var(--r);box-shadow:var(--sh-1);width:100%}
.fig figcaption{font-size:.85rem;color:var(--muted);margin-top:.6em;text-align:center;font-style:italic}

/* ---------- team grid (rounded photo cards, thin accent rule under the photo) ---------- */
.team-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.team-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-1);overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.team-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--bg-tint)}
.team-body{padding:16px 18px 20px;border-top:3px solid var(--accent)}
.team-name{font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--navy);margin:0}
.team-role{display:block;font-family:var(--sans);font-weight:600;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--navy-mid);margin:.25em 0 .6em}
.team-bio{color:var(--ink-2);font-size:.92rem;margin:0}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;border-radius:var(--r);
  border:1px solid var(--line);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.94rem}
.tbl-compare{min-width:640px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--blue-dark);color:#fff;font-family:var(--sans);font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:3px solid var(--accent)}
tbody tr:nth-child(even){background:var(--bg-soft)}
tbody tr:last-child td{border-bottom:0}
td a{font-weight:700}

/* ---------- FAQ ---------- */
.faqs{display:grid;gap:12px;max-width:56rem}
.faq{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:box-shadow var(--t),border-color var(--t)}
.faq[open]{box-shadow:var(--sh-2);border-left-color:var(--accent)}
.faq summary{cursor:pointer;list-style:none;padding:17px 56px 17px 20px;font-family:var(--sans);font-weight:700;
  font-size:1.02rem;color:var(--navy);position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:23px;top:26px;background:var(--navy-mid);
  transition:transform var(--t),background var(--t)}
.faq summary::before{width:14px;height:3px}
.faq summary::after{width:3px;height:14px;right:29px;top:20px}
.faq[open] summary::after{transform:rotate(90deg)}
.faq[open] summary::before,.faq[open] summary::after{background:var(--accent)}
.faq summary:hover{background:var(--bg-soft)}
.faq-a{padding:0 20px 18px;color:var(--ink-2)}
.faq-a p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(120deg,var(--blue-dark),var(--navy) 72%);color:#fff;position:relative;overflow:hidden;
  border-top:7px solid var(--accent)}
.ctaband::before{content:"";position:absolute;left:0;top:0;right:0;height:7px;
  background:linear-gradient(90deg,var(--blue-mid),var(--ice) 50%,var(--blue-mid))}
.ctaband-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  padding-block:clamp(34px,4vw,54px)}
.ctaband h2{color:#fff;margin-bottom:.3em}
.ctaband p{color:#d3e2f6;margin:0;max-width:62ch}
.ctaband-act{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.ctaband-note{font-size:.83rem;color:#9fbcdc}

/* ---------- reviews ---------- */
.revs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--sh-1)}
.stars{display:flex;gap:2px;margin-bottom:12px}
.stars .ico{width:17px;height:17px;color:var(--accent)}
.rev blockquote{margin:0 0 14px}
.rev blockquote p{margin:0;color:var(--ink-2);font-size:.96rem}
.rev-by{margin:0;font-size:.87rem}
.rev-by strong{display:block;color:var(--navy)}
.rev-by span{color:var(--muted)}

/* ---------- link grid ---------- */
.linkgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.linkgrid li{margin:0}
.linkgrid a{display:flex;align-items:center;gap:.6em;padding:13px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);font-weight:700;font-size:.94rem;color:var(--navy);transition:all var(--t);min-width:0}
.linkgrid a:hover{border-color:var(--accent);background:var(--bg-tint);text-decoration:none;transform:translateX(3px)}
.linkgrid .ico{width:16px;height:16px;color:var(--navy-mid);flex:0 0 16px}
.linkgrid span{min-width:0;overflow-wrap:anywhere}

/* ---------- resources ---------- */
.sec-res{background:var(--bg-soft)}
.res-intro{max-width:74ch;color:var(--ink-2)}
.reslist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.reslist li{margin:0;padding:14px 17px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r-sm);font-size:.94rem}
.reslist a{font-weight:700}
.res-note{color:var(--muted);display:block;font-size:.86rem;margin-top:2px}

/* ---------- location / area chips (small rounded-square tag, not a full pill, with a sky-blue
   accent "node" dot) ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0}
.chips li{margin:0}
.chips a{display:inline-flex;align-items:center;gap:.55em;padding:8px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:.9rem;font-weight:700;color:var(--navy);transition:all var(--t)}
.chips a::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:2px;background:var(--accent);
  box-shadow:inset 0 1px 1px rgba(9,42,65,.35)}
.chips a:hover{background:var(--navy);border-color:var(--navy);color:#fff;text-decoration:none}
.chips a:hover::before{background:var(--accent-light)}
.factgrid{list-style:none;padding:0;margin:1.4rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.factgrid li{margin:0;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:17px 19px;min-width:0;overflow-wrap:anywhere}
.factgrid strong{display:block;font-family:var(--sans);font-size:.79rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--navy-mid);margin-bottom:4px}

/* ---------- blog ---------- */
.postgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.post-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post-body{padding:20px;display:flex;flex-direction:column;flex:1;border-top:3px solid var(--accent)}
.post-meta{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-bottom:.6em}
.post h3{font-size:1.13rem;margin-bottom:.45em}
.post h3 a{color:var(--navy)}
.post p{font-size:.93rem;color:var(--ink-2);margin-bottom:1em}
.post .card-link{margin-top:auto}
.article{max-width:76ch;margin-inline:auto}
.article-head{max-width:76ch;margin-inline:auto}
.article h2{margin-top:2em;padding-top:.15em}
.article h3{margin-top:1.6em}
.article table{font-size:.9rem}
.article .table-scroll{max-width:100%}
.prose img{max-width:100%;height:auto}
.article pre,.article code{overflow-wrap:anywhere}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.88rem;color:var(--muted);
  padding-bottom:1.3rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem}
.article-meta span{display:inline-flex;align-items:center;gap:.4em}
.article-hero{margin:0 0 2rem}
.article-hero img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%;aspect-ratio:1408/768;object-fit:cover}
.pullbox{background:var(--bg-tint);border-left:4px solid var(--navy-mid);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 22px;margin:1.9rem 0}
.pullbox p:last-child{margin-bottom:0}
.article ul,.article ol{padding-left:1.35em}
.article a{font-weight:700}

/* ---------- contact (call card: navy panel, accent rule down the left edge) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-grid>*{min-width:0}
.callcard{min-width:0}
.nap-block li{min-width:0;overflow-wrap:anywhere}
.callcard{background:linear-gradient(150deg,var(--blue-dark),var(--navy));color:#fff;border-radius:var(--r-card);
  padding:32px;box-shadow:var(--sh-3);border-left:6px solid var(--accent)}
.callcard h2{color:#fff}
.callcard p{color:#d3e2f6}
.callcard .btn{width:100%}
.nap-block{list-style:none;padding:0;margin:1.4rem 0 0}
.nap-block li{display:flex;gap:.8em;align-items:flex-start;margin-bottom:1em;color:#e3ecfa}
.nap-block .ico{color:var(--ice);margin-top:3px}
.nap-block a{color:#fff;font-weight:700}
.mapwrap{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);line-height:0;background:var(--bg-soft)}
.mapwrap iframe{display:block;width:100%;border:0}

/* ---------- footer ---------- */
.site-foot{background:var(--blue-dark);color:#b9cbe6;padding-top:clamp(40px,5vw,62px);margin-bottom:64px;border-top:6px solid var(--accent)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:34px;padding-bottom:38px}
.foot-grid>*{min-width:0}
.foot-col{min-width:0}
.foot-brand img{height:60px;width:auto;background:#fff;border-radius:var(--r-sm);padding:7px 10px;margin-bottom:14px}
.foot-blurb{font-size:.9rem;line-height:1.6;color:#9bb4d4}
.foot-h{font-family:var(--sans);font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:#fff;font-weight:700;
  margin:0 0 14px;padding-bottom:9px;border-bottom:3px solid var(--accent);display:inline-block}
.foot-h2{margin-top:24px}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list li{margin-bottom:.5em}
.foot-list a,.foot-more a{color:#b9cbe6;font-size:.9rem;transition:color var(--t),padding var(--t)}
.foot-list a:hover,.foot-more a:hover{color:#fff;text-decoration:none;padding-left:4px}
.foot-locs{column-count:1}
.foot-nap{margin:16px 0 0;font-size:.9rem}
.nap-line{display:flex;gap:.65em;align-items:flex-start;margin-bottom:.7em}
.nap-line .ico{width:17px;height:17px;color:var(--ice);margin-top:3px;flex:0 0 17px}
.nap-line a{color:#eaf1fb;font-weight:700}
.foot-mail{overflow-wrap:anywhere}
.socials{display:flex;gap:10px;margin:18px 0 0}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.09);color:#e3ecfa;transition:background var(--t),color var(--t)}
.socials a:hover{background:var(--accent);color:var(--blue-dark)}
.socials svg{width:19px;height:19px}
.foot-more{margin:12px 0 0}
.foot-more a{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--ice)}
.foot-more .ico{width:15px;height:15px}
.foot-res{font-size:.82rem;color:#7f97bd;margin:12px 0 0;line-height:1.55}
.foot-res a{color:#b9cbe6}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding:18px 0}
.foot-bottom-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:#8ea3c6}
.foot-bottom p{margin:0}
.foot-legal a{color:#b9cbe6}
.foot-legal span{margin:0 4px;color:#50658e}

/* ---------- sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.6em;background:var(--blue);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;
  padding:15px 12px;box-shadow:0 -4px 18px rgba(9,42,65,.3)}
.callbar a:hover{background:var(--navy);color:#fff;text-decoration:none}
.callbar .ico{width:21px;height:21px}

/* ---------- 404 ---------- */
.err{text-align:center;padding-block:clamp(60px,8vw,110px)}
.err h1{font-size:clamp(3.4rem,2rem + 6vw,6rem);color:var(--navy-mid);margin-bottom:.1em}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}
  .foot-map{grid-column:1/-1}
}
@media (max-width:1100px){
  .head-in{min-height:70px}
  .mainnav{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);max-width:100vw;background:#fff;z-index:59;
    display:none;overflow-y:auto;overflow-x:hidden;
    padding:84px 18px 32px;box-shadow:-10px 0 40px rgba(9,42,65,.24);margin-left:0}
  .mainnav.open{display:block;animation:navslide .24s cubic-bezier(.4,0,.2,1) both}
  @keyframes navslide{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .navlist{flex-direction:column;align-items:stretch;gap:2px}
  .navlist>li>a{padding:13px 14px;font-size:1.02rem;border-bottom:1px solid var(--line-soft);border-radius:0}
  .has-sub{display:grid;grid-template-columns:1fr auto}
  .has-sub>a::after{display:none}
  .sub-toggle{display:flex;align-items:center;justify-content:center;width:46px;background:none;border:0;
    border-bottom:1px solid var(--line-soft);cursor:pointer;color:var(--navy)}
  .sub-toggle svg{width:18px;height:18px;transition:transform var(--t)}
  .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .sub{position:static;grid-column:1/-1;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-radius:0;padding:0 0 0 14px;margin:0;display:none;background:var(--bg-soft)}
  .sub.open{display:block}
  .burger{display:flex;position:relative;z-index:62}
  .head-call{margin-left:auto;order:2;position:relative;z-index:62}
  .burger{order:3;margin-left:8px}
  .brand{order:1;position:relative;z-index:62}
  .tb-hours{display:none}
  .brand-word{display:none}
  .navlist>li{position:static}
}
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-media img{min-height:0}
  .hero-media{order:-1}
  .trust-list{grid-template-columns:repeat(2,1fr)}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr;gap:16px}
  .postgrid{grid-template-columns:repeat(2,1fr)}
  .linkgrid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:30px}
  .split-media{order:-1}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .factgrid{grid-template-columns:repeat(2,1fr)}
  .foot-locs{column-count:2;column-gap:20px}
}
@media (max-width:820px){
  body{font-size:16.5px}
  .cards-3,.cards-2{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .reslist{grid-template-columns:1fr}
  .callbar{display:block}
  .site-foot{margin-bottom:60px}
}
@media (max-width:640px){
  :root{--gut:16px}
  .postgrid{grid-template-columns:1fr}
  .cards-4{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:16px}
  .linkgrid{grid-template-columns:1fr}
  .factgrid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .foot-locs{column-count:1}
  .foot-bottom-in{flex-direction:column;gap:8px}
  .btnrow .btn{width:100%}
  .hero-ticks{flex-direction:column;gap:8px}
  .ctaband-act{width:100%}
  .ctaband-act .btn{width:100%}
  .topbar-in{justify-content:center;font-size:.78rem}
}
@media (max-width:520px){
  .head-in{gap:10px}
  .brand-word{display:none}
}
@media (max-width:430px){
  .head-call-txt{display:none}
  .head-call{padding:.8em .95em}
  .brand img{height:46px}
  .head-in{gap:8px}
  .brand img{height:44px}
  .callbar a{font-size:.98rem}
}
@media print{
  .site-head,.topbar,.callbar,.ctaband,.navscrim,.site-foot .mapwrap{display:none!important}
  body{font-size:11pt}
}