/* RJ Dumpster Rental Littleton — Littleton, CO — 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) from the real supplied logo
   file. The badge samples to a clean, essentially FLAT two-tone split -- a deep navy ring/wordmark,
   rgb(7,55,128) = #073780 (THEME_NAVY), and a slightly brighter mid-blue icon fill, rgb(28,105,170)
   = #1c69aa (THEME_BLUE) -- not a gradient (confirmed via a cluster-histogram check: two dominant
   peaks, few intermediate pixels). THEME_NAVY and THEME_BLUE are those two sampled tones, used
   DIRECTLY. THEME_NAVY_DARK (#052960), THEME_BLUE_MID (#6096c4), THEME_BLUE_LIGHT (#eff4f9) and
   THEME_SKY (#99bcd9) are DERIVED blends toward black or white for surfaces the badge itself
   doesn't cover.

   Many recent siblings in this lineage have shipped blue circular badge logos, so this build
   deliberately differentiates on TWO axes at once: the exact sampled navy/blue hue pair itself
   (checked against every other blue-badge sibling's own sampled hex values on disk -- distinct from
   all of them) AND a CTA/accent color from a completely different hue family -- a warm Rocky
   Mountain sunset/rust-orange, not another blue/teal/cyan variant, and not the red/rust family used
   by CHA Dumpster Rental Eau Claire's own "Chippewa Pine" green or by Harding & Son Norwalk's
   "Lighthouse Red." THEME_ACCENT ("Foothills Sunset," #c1602c) is a genuine, disclosable tie to the
   real Front Range foothills sunset visible from Littleton looking west toward the mountains -- not
   an invented gimmick. Raw THEME_ACCENT only clears 4.22:1 with white text (just under the 4.5:1 AA
   floor for normal text), so it stays reserved for decorative/non-text surfaces; THEME_ACCENT_DARK
   (#87431f, 7.36:1 with white) is the text-safe fill used on every text-carrying accent button --
   see the contrast note above `.btn-primary` below. THEME_ACCENT_LIGHT (#f8ece6) is a light tint
   for section highlights.

   Shape/motif system: the real logo's own small upward-arrow accent (inside the "RJ" wordmark, over
   the dumpster icon) inspired this build's signature shape -- a "peak spark," a small three-pronged
   upward tick evoking a mountain summit/sunburst, echoing both the logo's own arrow accent and the
   real Front Range foothills west of Littleton -- 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/ridgeline, flower/petal, pine-tree, horseshoe, confluence-
   chevron) -- a three-pronged peak-spark tick has not been used. That motif is echoed at three
   scales: the eyebrow tick (drawn inline by `common.py`'s `eyebrow()` as an ~18x18 SVG three-stroke
   glyph), the trust-bar "chip" (a navy disc ringed in the sunset 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 jagged ridge-
   line rather than a river's ripple or a coastal tideline -- 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 ridgeline 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: Sora (headings, a confident
   geometric grotesk with a wide weight range) paired with Inter (body, clean, extremely legible
   workhorse) — 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; Sora+Inter
   was used once before in this lineage (Canton Dumpster Rental Group) but distinguished here by a
   different weight range/usage and a completely different color palette and divider motif.

   WCAG contrast (relative-luminance formula, computed with a standalone Python script, not
   estimated -- matches the note in common.py exactly):
     white text on THEME_NAVY       (#073780): 11.25:1 — passes AAA comfortably (headings, footer, CTA buttons).
     white text on THEME_NAVY_DARK  (#052960): 14.07:1 — passes AAA comfortably (topbar/deepest).
     white text on THEME_BLUE       (#1c69aa):  5.75:1 — passes AA for normal text, not AAA; used for
                                                          decorative/large surfaces, not small body text.
     white text on THEME_BLUE_MID   (#6096c4):  low    — decorative-only (chip rings, ticks, never a
                                                          button/text-carrying fill).
     white text on THEME_SKY        (#99bcd9):  low    — decorative-only (dividers).
     white text on THEME_ACCENT     (#c1602c):  4.22:1 — just UNDER the 4.5:1 AA floor for normal
                                                          text; reserved for decorative/non-text
                                                          surfaces only (borders, rules, ticks) —
                                                          NEVER a text-carrying button/badge fill.
     white text on THEME_ACCENT_DARK(#87431f):  7.36:1 — passes AA comfortably; the actual fill used
                                                          on every text-carrying accent button
                                                          (`.btn-primary`/`.btn-red`).
     white text on --accent-darker  (#70381a):  9.25:1  — passes AAA; accent-button hover fill.
     THEME_NAVY text on THEME_ACCENT_LIGHT:      9.71:1 — passes AAA (accent-tinted card backgrounds). */
: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:#052960;   /* THEME_NAVY_DARK — deepest ink, topbar/footer panels */
  --navy:#073780;        /* THEME_NAVY — exact sampled logo navy, buttons, borders, brand marks */
  --navy-mid:#125095;    /* derived mid-tone between navy and blue — links, labels, hover states */
  --blue:#1c69aa;        /* THEME_BLUE — derived secondary brand color */
  --blue-mid:#6096c4;    /* THEME_BLUE_MID — hover states, rules */
  --ice:#99bcd9;         /* derived light blue (THEME_SKY) — icon/text tint on dark backgrounds */
  --blue-light:#eff4f9;  /* THEME_BLUE_LIGHT — soft section backgrounds/washes */
  --sky:#99bcd9;         /* THEME_SKY — derived sky-blue highlight — decorative-only tertiary accent */
  /* ---- accent: "Foothills Sunset" warm Rocky Mountain rust-orange — exact hex values from
     common.py THEME_ACCENT / THEME_ACCENT_DARK / THEME_ACCENT_LIGHT, tied to the real Front Range
     foothills sunset visible west of Littleton — see contrast note above .btn-primary ---- */
  --accent:#c1602c; --accent-dark:#87431f; --accent-darker:#70381a; --accent-light:#f8ece6;
  /* ---- neutrals ---- */
  --ink:#1c2430; --ink-2:#4b5262; --muted:#6c7689;
  --bg:#ffffff; --bg-soft:#eff4f9; --bg-tint:#dde8f2;
  --line:#dde4ec; --line-soft:#ebeff4;
  --white:#fff;
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head:'Sora',-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 peak-spark/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
     ridgeline-marker dots (repeating-radial-gradient) on a navy ground, echoing a jagged foothills
     skyline 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(5,41,96,.07),0 2px 8px rgba(5,41,96,.09);
  --sh-2:0 8px 22px rgba(5,41,96,.18);
  --sh-3:0 18px 46px rgba(5,41,96,.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}
/* Raw THEME_ACCENT (#c1602c) only clears 4.22:1 with white text -- just under the 4.5:1 AA floor
   for normal-size text (see common.py's WCAG note). Text-carrying buttons therefore use the
   darker, text-safe THEME_ACCENT_DARK (#87431f, 7.36:1 with white) as their FILL, never the raw
   bright accent -- the bright accent stays reserved for decorative, non-text surfaces (thin
   borders, rules, ticks) elsewhere in this file. --accent-darker (an extra 20% toward black) is
   the hover fill, at 9.25:1 with white. */
.btn-primary{background:var(--accent-dark);color:#fff;box-shadow:0 4px 13px rgba(135,67,31,.35)}
.btn-primary:hover{background:var(--accent-darker);color:#fff;box-shadow:0 9px 20px rgba(107,54,22,.42)}
.btn-primary:active{box-shadow:0 2px 7px rgba(135,67,31,.32)}
.btn-red{background:var(--accent-dark);color:#fff;box-shadow:0 4px 13px rgba(135,67,31,.35)}
.btn-red:hover{background:var(--accent-darker);color:#fff;box-shadow:0 9px 20px rgba(107,54,22,.42)}
.btn-red:active{box-shadow:0 2px 7px rgba(135,67,31,.32)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 4px 13px rgba(7,55,128,.34)}
.btn-navy:hover{background:var(--blue-dark);color:#fff;box-shadow:0 9px 20px rgba(5,41,96,.4)}
.btn-navy:active{box-shadow:0 2px 7px rgba(7,55,128,.34)}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 4px 13px rgba(5,41,96,.18)}
.btn-white:hover{background:var(--blue-light);color:var(--blue-dark);box-shadow:0 9px 20px rgba(5,41,96,.22)}
.btn-white:active{box-shadow:0 2px 7px rgba(5,41,96,.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 peak-spark tick, drawn inline by
   common.py's eyebrow() as an 18x18 <svg class="tick"> in the sunset accent — a genuine nod to
   the real Front Range foothills west of Littleton and the logo's own upward-arrow accent —
   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(5,41,96,.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(135,67,31,.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 peak-spark 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(5,41,96,.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(5,41,96,.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(5,41,96,.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(5,41,96,.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}
}