/* Cape Coral Brothers Dumpster Rental — styles.css
   Palette: every value below is copied verbatim from common.py's THEME_* constants, which were
   pixel-sampled programmatically (PIL + numpy mode-bucketing across three separate bands of the
   real supplied logo file — the top "CAPE CORAL" pill, the "BROTHERS" banner, and the bottom
   "DUMPSTER RENTAL" band) directly from the client's real supplied logo — a two-tone-blue
   rounded-square ("squircle") badge with a dumpster icon and a wave/splash motif at its center.
   All three bands converged on the same navy, rgb(22,76,126) = #164c7e (THEME_BLUE, the primary
   brand color). THEME_NAVY (#0f3558) and THEME_NAVY_DARK (#081d30) are derived by blending that
   sampled navy 30%/62% toward black, for structural panels and CTA backgrounds; THEME_BLUE_MID
   (#7897b4) and THEME_BLUE_LIGHT (#e8edf2) are derived blends of the sampled navy toward white,
   for hover states and soft section washes. THEME_ACCENT (#ff6f59) is a warm coral-orange — a
   genuine, common real-world color pun for a business in this specific city ("Cape CORAL"), not
   an invented gimmick — used only decoratively (ticks, rings, borders, icon washes); see the WCAG
   note below for why it never carries body text directly. THEME_ACCENT_DARK (#b24e3e) is a
   darkened accent for the rare case an accent fill needs to carry white text; THEME_ACCENT_LIGHT
   (#ffe5e1) is a light tint for section highlights.

   Shape/motif system: drawn directly from the client's own logo artwork, same as the immediately
   prior sibling, but the artwork itself is different — the real logo's single most distinctive
   feature is a small wave/splash curling beneath the dumpster icon at the badge's center, a
   genuine nod to Cape Coral's real 400-mile canal system, not a radiating sunburst. That wave is
   echoed at three scales: the eyebrow tick (two stacked asymmetric wave-crest curls, drawn inline
   by `common.py`'s `eyebrow()` as a ~20x14 SVG), the trust-bar "chip" (a navy disc ringed with
   concentric ripple rings, built with a masked `repeating-radial-gradient` — a genuinely different
   construction method than the prior sibling's `repeating-conic-gradient` sunburst, or any other
   sibling's `border-radius` arch, `clip-path` polygon, or rounded-pill chip), and the hero's
   bottom edge (a scalloped wave-crest band built with a `repeating-radial-gradient`, replacing
   the prior sibling's diagonal sunburst-tick stripes). Cards carry a soft, shallow-angled dashed
   top border (`border-image` with a repeating-linear-gradient) that reads as a gentle ripple
   rhythm rather than a row of sharp radiating ticks. Card corners, and the shape system generally,
   are tuned toward soft rounded-squares ("squircle" family) — a direct echo of the logo's own
   rounded-square badge shape, distinct from the prior sibling's circular badge and its matching
   circular/sunburst motif — see the per-component comments below for detail.

   Headings run in Plus Jakarta Sans, a rounded, warm-but-confident geometric grotesk that reads
   well at large display sizes without tipping into a "cutesy beach town" register. Body copy runs
   in Noto Sans, a clean, highly legible humanist workhorse. Both are unused anywhere else in this
   lineage (see common.py's own comment for the full pairing history and why this final choice was
   reached after two earlier candidates collided with prior siblings).

   WCAG contrast (relative-luminance formula, computed programmatically, not estimated):
     white text on THEME_BLUE   (#164c7e):   8.86:1 — passes AAA; used for primary-button fills
                                                        and any dark panel needing white text.
     white text on THEME_NAVY   (#0f3558):  12.53:1 — passes AAA comfortably (header/footer).
     white text on THEME_NAVY_DARK(#081d30):17.10:1 — passes AAA comfortably (topbar/deepest).
     white text on THEME_ACCENT (#ff6f59):   2.74:1 — FAILS AA; the raw coral never carries white
                                                        text at any size, only decorative ticks/
                                                        rings/borders against navy or white surfaces.
     white text on THEME_ACCENT_DARK:        5.18:1 — passes AA (the rare accent-fill-with-white-
                                                        text case, e.g. a coral badge chip).
     THEME_ACCENT on THEME_NAVY_DARK:        6.25:1 — passes AA comfortably (decorative wave/ripple
                                                        ticks and rings drawn on dark panels).
     THEME_ACCENT on THEME_NAVY:             4.58:1 — passes AA for large-scale/non-text graphics
                                                        only (never for small eyebrow-scale text). */
:root{
  /* ---- brand: exact hex values from common.py (THEME_NAVY / THEME_NAVY_DARK / THEME_BLUE /
     THEME_BLUE_MID / THEME_BLUE_LIGHT), pixel-sampled from the real Cape Coral Brothers logo file ---- */
  --blue-dark:#081d30;   /* THEME_NAVY_DARK — deepest ink, topbar/footer panels */
  --navy:#0f3558;        /* THEME_NAVY — deepened sampled navy, buttons, borders, brand marks */
  --navy-mid:#12406b;    /* derived mid-tone between navy and blue — links, labels, hover states */
  --blue:#164c7e;        /* THEME_BLUE — exact sampled navy — primary brand color */
  --blue-mid:#7897b4;    /* THEME_BLUE_MID — hover states, rules */
  --ice:#a8c0d6;         /* derived light blue (blue-mid blended further toward white) — icon/text tint on dark backgrounds */
  --blue-light:#e8edf2;  /* THEME_BLUE_LIGHT — soft section backgrounds/washes */
  /* ---- accent: exact sampled warm coral-orange — exact hex values from common.py
     THEME_ACCENT / THEME_ACCENT_DARK / THEME_ACCENT_LIGHT — decorative use only, see contrast note ---- */
  --accent:#ff6f59; --accent-dark:#b24e3e; --accent-light:#ffe5e1;
  /* ---- neutrals ---- */
  --ink:#1c2430; --ink-2:#4b5262; --muted:#6c7689;
  --bg:#ffffff; --bg-soft:#e8edf2; --bg-tint:#d9e5ee;
  --line:#dde3ea; --line-soft:#eceff4;
  --white:#fff;
  --sans:'Noto Sans',-apple-system,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head:'Plus Jakarta Sans',-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 — noticeably softer/rounder than a prior circular-badge sibling's
     more angular tuning; the eyebrow tick, trust-chip and card-top-border components carry the
     signature wave-crest/ripple treatment defined at their own rules below ---- */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-card:20px; --r-btn:10px; --r-pill:999px;
  /* wave-crest band: used once as the hero's bottom-edge treatment — a scalloped row of soft
     ripple crests (repeating-radial-gradient) on a navy ground, not the diagonal linear-gradient
     tick stripes a prior sibling used */
  --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(8,29,48,.07),0 2px 8px rgba(8,29,48,.09);
  --sh-2:0 8px 22px rgba(8,29,48,.18);
  --sh-3:0 18px 46px rgba(8,29,48,.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_BLUE for the primary CTA —
   the exact sampled ring color, chosen over the lighter accent sky-blue because it clears WCAG AA
   for white button text at 6.96:1, where the raw accent color would fail at 2.39: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_BLUE clears 6.96:1 (comfortably meets AA for normal text, just under AAA),
   ~10.7:1 on the darker THEME_NAVY hover fill */
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 13px rgba(22,76,126,.35)}
.btn-primary:hover{background:var(--navy);color:#fff;box-shadow:0 9px 20px rgba(15,53,88,.42)}
.btn-primary:active{box-shadow:0 2px 7px rgba(22,76,126,.32)}
.btn-red{background:var(--blue);color:#fff;box-shadow:0 4px 13px rgba(22,76,126,.35)}
.btn-red:hover{background:var(--navy);color:#fff;box-shadow:0 9px 20px rgba(15,53,88,.42)}
.btn-red:active{box-shadow:0 2px 7px rgba(22,76,126,.32)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 4px 13px rgba(15,53,88,.34)}
.btn-navy:hover{background:var(--blue-dark);color:#fff;box-shadow:0 9px 20px rgba(8,29,48,.4)}
.btn-navy:active{box-shadow:0 2px 7px rgba(15,53,88,.34)}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 4px 13px rgba(8,29,48,.18)}
.btn-white:hover{background:var(--blue-light);color:var(--blue-dark);box-shadow:0 9px 20px rgba(8,29,48,.22)}
.btn-white:active{box-shadow:0 2px 7px rgba(8,29,48,.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 wave-crest tick — two stacked asymmetric wave
   curls, drawn inline by common.py's eyebrow() as a ~20x14 <svg class="tick"> in the sampled
   coral accent — a direct, literal echo of the real logo's own wave/splash motif curling beneath
   the dumpster icon at the badge's center — 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:20px;height:14px;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(8,29,48,.5);z-index:58;backdrop-filter:blur(2px)}

/* ---------- hero (deep navy field, closing on the signature wave-crest band at the base instead
   of a solid gradient bar or the prior sibling's diagonal sunburst-tick stripes; the faint ring
   at top-right is now built from concentric ripple rings, not radiating rays) ---------- */
.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(255,111,89,.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-tideline{position:relative;height:16px;z-index:1;background:var(--wave-band)}
.hero-tideline::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.3)}
.hero-tideline::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-ripple chip — a navy disc ringed with thin
   accent-colored ripple rings, built with a `repeating-radial-gradient` masked to a thin donut
   with `mask-image:radial-gradient(...)` — a genuinely different construction method from the
   prior sibling's `repeating-conic-gradient` sunburst chip, and from every other sibling's chip
   (border-radius arch, scalloped clip-path, picket-top polygon, plain rounded pill) — and the
   one motif actually printed on this client's own logo, echoing water ripples rather than rays) ---------- */
.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(8,29,48,.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(22,76,126,.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(8,29,48,.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(8,29,48,.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(8,29,48,.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}
}