/* STJ Dumpster Rental St Joseph — St. Joseph, MO — styles.css
   Palette: every value below is copied verbatim from common.py's THEME_* constants, which were
   pixel-sampled programmatically (PIL, every 2nd pixel, near-white/near-background pixels excluded
   -- the logo's own background is a very light blue-white, #f3fafa, NOT pure white, sampled and
   excluded separately from true white). This logo sampled to only ONE genuinely distinct real
   tone -- a single consistent blue, rgb(5,87,143) = #05578f (THEME_NAVY), used for the entire
   circular badge ring, the arched "STJ DUMPSTER RENTAL"/"ST JOSEPH" wordmark AND the dumpster
   icon -- a self-contained single-tone badge, the same general shape documented on several recent
   siblings (Trent Bros Kalamazoo, NWJ Newark, Canton, Birch & Son Conroe). THEME_NAVY is that one
   sampled tone, used DIRECTLY (no derivation needed) as the primary heading/button/panel color.
   THEME_NAVY_DARK (#043d64), THEME_BLUE (#3779a5), THEME_BLUE_MID (#5c92b6), THEME_BLUE_LIGHT
   (#ebf2f6) and THEME_SKY (#8eb3cd) are all DERIVED blends of THEME_NAVY toward black or white for
   panels, hover states and soft washes -- there is no second or third genuinely sampled logo tone
   to draw from.

   Several recent siblings in this lineage have shipped blue circular badge logos, so this build
   deliberately differentiates on TWO axes at once: the sampled navy itself (#05578f, distinctly
   brighter/more saturated than e.g. Canton's #1567a0 or NWJ's #0d4c71 -- kept honest rather than
   forced apart) AND a CTA/accent color from a completely different hue family (a warm rust/
   saddle-leather red-brown, not another blue/teal/cyan variant several recent siblings have used
   for their accent). THEME_ACCENT (#a84a22) is a genuine, disclosable tie to St. Joseph's real
   Pony Express/frontier-trail heritage -- saddle leather, harness tack and worn-trail earth tones
   -- not an invented gimmick. Checked explicitly for a local color collision: Missouri Western
   State University's Griffons play in black and vegas gold, and the St. Joseph Mustangs (summer
   collegiate baseball) play in navy and red -- this build's rust/saddle-brown is neither gold nor
   a bright fire-engine red, avoiding both. THEME_ACCENT_DARK (#763418) is a darkened accent for
   surfaces needing extra depth; THEME_ACCENT_LIGHT (#f5e9e4) is a light tint for section
   highlights.

   Shape/motif system: the real logo itself is a circular badge with a dumpster icon and no
   horse/trail motif of its own, so this build's signature shape was chosen fresh rather than
   echoed from the artwork -- a small horseshoe tick, a genuine nod to St. Joseph's real Pony
   Express/frontier-trail heritage (the city was the trail's real eastern starting point in 1860),
   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 has not been used. That horseshoe/trailline motif is
   echoed at three scales: the eyebrow tick (drawn inline by `common.py`'s `eyebrow()` as an
   ~18x18 SVG horseshoe-and-nail-hole glyph), the trust-bar "chip" (a navy disc ringed in the
   saddle-rust 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 worn frontier trail rather than a coastal
   tideline or a row of rail-track rivets). 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: Familjen Grotesk (headings, a
   warm, confident, slightly rounded grotesk display face with real weight range) paired with
   Instrument Sans (body, clean, highly legible, neutral grotesk) — 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 Familjen-Grotesk + Instrument-Sans
   pairing appears in neither list (Instrument Sans has been used before, but never paired with
   Familjen Grotesk).

   WCAG contrast (relative-luminance formula, computed with a standalone Python script, not
   estimated):
     white text on THEME_NAVY       (#05578f):  7.59:1 — passes AAA comfortably (headings, footer, CTA buttons).
     white text on THEME_NAVY_DARK  (#043d64): 11.31:1 — passes AAA comfortably (topbar/deepest).
     white text on THEME_BLUE       (#3779a5):  4.73:1 — passes AA comfortably; safe for smaller
                                                          text-carrying chips, never large dense blocks.
     white text on THEME_BLUE_MID   (#5c92b6):  3.36:1 — fails AA for normal text; decorative/
                                                          large-scale use only (chip rings, ticks,
                                                          never a button/text-carrying fill).
     white text on THEME_SKY        (#8eb3cd):  2.22:1 — fails AA; decorative-only (dividers).
     white text on THEME_ACCENT     (#a84a22):  5.73:1 — passes AA comfortably for normal text
                                                          (does not reach AAA); safe to use directly
                                                          as a text-carrying CTA/badge fill.
     white text on THEME_ACCENT_DARK(#763418):  9.66:1 — passes AAA comfortably (deeper accent fills).
     THEME_ACCENT on THEME_NAVY:                1.33: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:#043d64;   /* THEME_NAVY_DARK — deepest ink, topbar/footer panels */
  --navy:#05578f;        /* 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:#3779a5;        /* THEME_BLUE — derived secondary brand color */
  --blue-mid:#5c92b6;    /* THEME_BLUE_MID — hover states, rules */
  --ice:#8eb3cd;         /* derived light blue (THEME_SKY) — icon/text tint on dark backgrounds */
  --blue-light:#ebf2f6;  /* THEME_BLUE_LIGHT — soft section backgrounds/washes */
  --sky:#8eb3cd;         /* THEME_SKY — derived sky-blue highlight — decorative-only tertiary accent */
  /* ---- accent: sampled/chosen saddle-leather/trail rust — exact hex values from common.py
     THEME_ACCENT / THEME_ACCENT_DARK / THEME_ACCENT_LIGHT, tied to St. Joseph's real Pony
     Express/frontier-trail heritage — see contrast note ---- */
  --accent:#a84a22; --accent-dark:#763418; --accent-light:#f5e9e4;
  /* ---- neutrals ---- */
  --ink:#1c2430; --ink-2:#4b5262; --muted:#6c7689;
  --bg:#ffffff; --bg-soft:#ebf2f6; --bg-tint:#dbe3ea;
  --line:#dde4ec; --line-soft:#ebeff4;
  --white:#fff;
  --sans:'Instrument Sans',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head:'Familjen Grotesk',-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 horseshoe/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
     worn-trail-marker dots (repeating-radial-gradient) on a navy ground, echoing a frontier trail
     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 horseshoe tick, drawn inline by common.py's
   eyebrow() as an 18x18 <svg class="tick"> in the saddle-rust accent — a genuine nod to
   St. Joseph's real Pony Express/frontier-trail heritage — 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 worn frontier trail 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 horseshoe 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}
}