/* ════════════════════════════════════════════════════════════
   SITE MOTION SYSTEM — motion.css  (brand-agnostic)
   ------------------------------------------------------------
   Load it on every page (order-independent — works before OR after
   the site's own stylesheet). To match the brand, set any of these
   on :root in the SITE'S css; each has a sensible fallback so you
   only override what you want:

     :root{
       --motion-1: 232,168,32;            primary accent  (r,g,b)
       --motion-2: 130,175,225;           secondary accent (r,g,b)
       --motion-accent: #CBA534;          solid accent: bars/progress
       --motion-accent-2: #E2C95A;        lighter accent
       --motion-ink: #0D2954;             deep brand color (dark accents)
       --motion-dark-rgb: 13,27,42;       dark brand color "r,g,b" — drives the video scrim
       --motion-nav-bg: rgba(255,255,255,.98);  scrolled-nav background
     }

   The JS (animations.js) reads --motion-1 / --motion-2 for the hero
   canvas. Honors prefers-reduced-motion automatically — the hero
   background video is paused + reset to its poster by animations.js
   (CSS alone cannot stop <video> playback).
   ════════════════════════════════════════════════════════════ */
/* ── Utmost Financial recolor (Heather Slate) ─────────────────────────────
   These values are the client's locked palette. The page stylesheet sets the
   same variables, so the motion layer stays in brand even if loaded alone. */
:root{
  --motion-1:203,165,52;              /* #CBA534 heather accent */
  --motion-2:216,227,242;              /* #D8E3F2 pale lilac */
  --motion-accent:#CBA534;
  --motion-accent-2:#E2C95A;
  --motion-ink:#1F3555;
  --motion-dark-rgb:10,31,63;          /* #0A1F3F drives the video scrim */
  --motion-nav-bg:rgba(255,255,255,.98);
}

:root { --motion-ease: cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  .rv,.rv-l,.rv-r,.rv-scale,.rv-stagger>* { opacity:1 !important; transform:none !important; }
  .orb,.mq-track { animation:none !important; }
  #hero-canvas,.banner-canvas { display:none !important; }
  /* hover kit: keep the color/glow feedback, suppress the movement */
  .hv-btn:hover,.hv-card:hover,
  .hv-card:hover .hv-icon,.hv-icon:hover,
  .hv-arrow:hover::after { transform:none !important; }
  .hv-btn::before { display:none !important; }
  /* the hero background video is paused + reset to its poster by
     animations.js — CSS cannot stop <video> playback */
}

/* page-load / page-leave fade */
body { animation: pgIn .5s ease both; }

body.leaving { opacity:0; transition:opacity .28s ease; }

@keyframes pgIn { from{opacity:0;} to{opacity:1;} }

/* scroll progress bar — RETIRED 2026-09-06 (owner ruling: reads as an AI template).
   No #sprog element, no rule. */

/* ── live video-background hero (the homepage standard, 2026-06) ──
   <video class="video-bg" autoplay muted loop playsinline
          aria-hidden="true" poster="…" src="…"></video>
   + a SEPARATE sibling <div class="video-scrim"></div> layered above.
   Set --motion-dark-rgb to the client's dark brand color ("r,g,b").
   The scrim is a LAYERED gradient: directional dark wash + bottom-up
   fade. NB: `at`-position syntax is radial-only — never use it inside
   linear-gradient() (the background silently drops → white section). */
.video-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none; filter:brightness(.5); }

.video-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(var(--motion-dark-rgb,13,27,42),.86) 0%, rgba(var(--motion-dark-rgb,13,27,42),.55) 48%, rgba(var(--motion-dark-rgb,13,27,42),.28) 100%),
    linear-gradient(0deg, rgba(var(--motion-dark-rgb,13,27,42),.92) 0%, rgba(var(--motion-dark-rgb,13,27,42),0) 45%);
}

/* ── inline live video (content, not background) ──
   <video class="video-live" autoplay muted loop playsinline poster="…" src="…">
   Sits in the page flow inside a .media-figure or .split-media, plays on its own
   and never shows a control bar. animations.js pauses it and resets it to its
   poster under prefers-reduced-motion, and pauses it off-screen. */
.video-live { width:100%; display:block; }

.video-live::-webkit-media-controls { display:none !important; }

.media-figure .video-live, .split-media .video-live { border-radius:inherit; }

/* inner page-heros carry the same live background treatment as the homepage hero,
   dimmed harder because reversed copy sits directly on top of them */
.page-hero .video-bg { filter:brightness(.34); }

.page-hero .video-scrim { background:
  linear-gradient(100deg, rgba(var(--motion-dark-rgb,13,27,42),.88) 0%, rgba(var(--motion-dark-rgb,13,27,42),.66) 50%, rgba(var(--motion-dark-rgb,13,27,42),.56) 100%),
  linear-gradient(0deg, rgba(var(--motion-dark-rgb,13,27,42),.82) 0%, rgba(var(--motion-dark-rgb,13,27,42),.16) 64%);
}

/* scroll-aware nav condense — solid background only; never
   backdrop-filter:blur() on a sticky/fixed nav (2026-06 perf rule).
   v1.2.0: .scrolled is applied with hysteresis (on past 96px, off under 24px)
   in animations.js — a site's .scrolled rule may shrink the nav, but the
   toggle can no longer flicker at the threshold (the 2026-09-06 bounce fix). */
[data-motion-nav] { transition: padding .3s var(--motion-ease), background .3s, box-shadow .3s; }

[data-motion-nav].scrolled {
  background: var(--motion-nav-bg,rgba(255,255,255,.98));
  box-shadow: 0 2px 0 rgba(13,41,84,.04), 0 10px 28px rgba(13,41,84,.12);
}

/* floating ambient orbs — live inside dark hero sections */
.orb-field { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.orb { position:absolute; border-radius:50%; filter:blur(44px); will-change:transform,opacity; }

.orb-1 { width:420px; height:420px; top:-90px; left:-70px;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.42), transparent 70%);
  animation:wtOrb1 9s ease-in-out infinite alternate; }

.orb-2 { width:360px; height:360px; bottom:-100px; right:-50px;
  background:radial-gradient(circle, rgba(var(--motion-2,130,175,225),.32), transparent 70%);
  animation:wtOrb2 12s ease-in-out infinite alternate; }

.orb-3 { width:300px; height:300px; top:45%; left:60%;
  background:radial-gradient(circle, rgba(var(--motion-1,232,168,32),.22), transparent 70%);
  animation:wtOrb3 7s ease-in-out infinite alternate; }

@keyframes wtOrb1 { 0%{opacity:.40;transform:scale(1);} 100%{opacity:.75;transform:scale(1.12) translate(2%,2%);} }

@keyframes wtOrb2 { 0%{opacity:.30;transform:scale(1);} 100%{opacity:.62;transform:scale(1.1) translate(-2%,-3%);} }

@keyframes wtOrb3 { 0%{opacity:.16;transform:translate(-50%,-50%) scale(1);} 100%{opacity:.38;transform:translate(-50%,-50%) scale(1.4);} }

/* hero / banner canvases */
#hero-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

.banner-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }

/* the section that holds a canvas/orbs must be position:relative and its
   content lifted above — add [data-motion-stage] to that section */
[data-motion-stage] { position:relative; }

[data-motion-stage] > .container,
[data-motion-stage] > div:not(.orb-field):not(.banner-canvas):not(.video-scrim) { position:relative; z-index:2; }

/* scroll reveal */
.rv { opacity:0; transform:translateY(22px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv.on { opacity:1; transform:none; }

.rv-l { opacity:0; transform:translateX(-26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-l.on { opacity:1; transform:none; }

.rv-r { opacity:0; transform:translateX(26px); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-r.on { opacity:1; transform:none; }

.rv-scale { opacity:0; transform:scale(.94); transition:opacity .9s var(--motion-ease),transform .9s var(--motion-ease); }

.rv-scale.on { opacity:1; transform:none; }

.rv-stagger > * { opacity:0; transform:translateY(22px); transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease); }

.rv-stagger.on > * { opacity:1; transform:none; }

.rv-stagger.on > *:nth-child(2){transition-delay:.08s;}

.rv-stagger.on > *:nth-child(3){transition-delay:.16s;}

.rv-stagger.on > *:nth-child(4){transition-delay:.24s;}

.rv-stagger.on > *:nth-child(5){transition-delay:.32s;}

.rv-stagger.on > *:nth-child(6){transition-delay:.40s;}

/* marquee trust ticker — CLIENT-REQUEST ONLY (removed from the
   standard 2026-06-22). Never wire a marquee by default; these rules
   stay dormant unless the client explicitly asks for one. */
.marquee { overflow:hidden; padding:14px 0; position:relative; }

.marquee--accent { background:linear-gradient(90deg, var(--motion-accent,#CBA534), var(--motion-accent-2,#E2C95A)); }

.marquee--ink { background:var(--motion-ink,#0D2954); }

.mq-track { display:flex; white-space:nowrap; animation:mqs 30s linear infinite; }

.marquee:hover .mq-track { animation-play-state:paused; }

.mq-item { display:inline-flex; align-items:center; gap:22px; padding:0 38px;
  font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }

.marquee--accent .mq-item { color:var(--motion-ink,#0D2954); }

.marquee--ink .mq-item { color:#fff; }

.mq-item span.dot { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }

@keyframes mqs { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ════════════════════════════════════════════════════════════
   HOVER-INTERACTION KIT (2026-08-25 — standard)
   ------------------------------------------------------------
   Harvested from the Wolf & Tiger reference build: the "sections
   respond to you" feel. CSS-only, no JS, additive opt-in hooks —
   never restyles a component's base look. Recolors entirely from
   the --motion-* brand variables (jewel tones under palette law).
   Only transform / opacity / box-shadow / color / border-color
   animate — never layout properties.
   Default accent is --motion-1; add .hv-2 to any hook to use
   --motion-2 instead.
   ════════════════════════════════════════════════════════════ */

/* 1 ── buttons: sheen sweep + lift + brand glow.
   <a class="btn hv-btn">Book a Consultation</a> */
.hv-btn { position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--motion-ease), box-shadow .35s var(--motion-ease); }

.hv-btn::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform:translateX(-101%); transition:transform .6s var(--motion-ease); }

.hv-btn:hover::before { transform:translateX(101%); }

.hv-btn:hover { transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(var(--motion-1,232,168,32),.30),
             0 0 40px rgba(var(--motion-1,232,168,32),.16); }

.hv-btn.hv-2:hover { box-shadow:0 14px 36px rgba(var(--motion-2,130,175,225),.30),
             0 0 40px rgba(var(--motion-2,130,175,225),.16); }

/* 2 ── links / nav items: underline grows in with a faint glow.
   <a class="nav-link hv-underline">Services</a>  (needs inline/inline-block) */
.hv-underline { position:relative; }

.hv-underline::after { content:''; position:absolute; left:0; bottom:-2px;
  width:100%; height:1.5px; background:var(--motion-accent,#CBA534);
  box-shadow:0 0 10px rgba(var(--motion-1,232,168,32),.45);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .35s var(--motion-ease); }

.hv-underline:hover::after, .hv-underline.on::after { transform:scaleX(1); }

/* 3 ── cards / tiles: lift + brand-tinted layered shadow + border tint.
   <div class="card hv-card"> … </div> */
.hv-card { transition:transform .3s var(--motion-ease), box-shadow .35s var(--motion-ease),
  border-color .3s, background .3s; }

.hv-card:hover { transform:translateY(-4px);
  border-color:rgba(var(--motion-1,232,168,32),.28);
  box-shadow:0 20px 52px rgba(var(--motion-1,232,168,32),.14),
             0 4px 16px rgba(var(--motion-1,232,168,32),.08),
             0 0 40px rgba(var(--motion-1,232,168,32),.12); }

.hv-card.hv-2:hover { border-color:rgba(var(--motion-2,130,175,225),.28);
  box-shadow:0 20px 52px rgba(var(--motion-2,130,175,225),.14),
             0 4px 16px rgba(var(--motion-2,130,175,225),.08),
             0 0 40px rgba(var(--motion-2,130,175,225),.12); }

/* 4 ── accent bar: a 3px brand bar grows across the card's top edge.
   Add .hv-bar to the SAME element as .hv-card (needs position + overflow). */
.hv-bar { position:relative; overflow:hidden; }

.hv-bar::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:var(--motion-accent,#CBA534);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--motion-ease); }

.hv-bar.hv-2::before { background:var(--motion-accent-2,#E2C95A); }

.hv-bar:hover::before { transform:scaleX(1); }

/* 5 ── ghost numeral recolor: a card's oversized numeral shifts from
   neutral to a translucent brand tint when its card is hovered.
   <div class="hv-card hv-bar"><span class="hv-num">01</span> … </div>
   (The numeral's base size/color belong to the site's own CSS —
   this hook only adds the hover recolor.) */
.hv-num { transition:color .3s; }

.hv-card:hover .hv-num { color:rgba(var(--motion-1,232,168,32),.16); }

.hv-card.hv-2:hover .hv-num { color:rgba(var(--motion-2,130,175,225),.16); }

/* 6 ── icon chips: gentle scale + soft glow when their card (or the
   icon itself) is hovered.  <span class="wi-icon hv-icon">✓</span> */
.hv-icon { transition:transform .3s var(--motion-ease), box-shadow .3s; }

.hv-card:hover .hv-icon, .hv-icon:hover { transform:scale(1.08);
  box-shadow:0 0 16px rgba(var(--motion-1,232,168,32),.32); }

.hv-card.hv-2:hover .hv-icon { box-shadow:0 0 16px rgba(var(--motion-2,130,175,225),.32); }

/* 7 ── arrow nudge on text CTAs.  <a class="hv-arrow">Our services</a> */
.hv-arrow::after { content:'→'; display:inline-block; margin-left:8px;
  transition:transform .25s var(--motion-ease); }

.hv-arrow:hover::after { transform:translateX(4px); }

/* ════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND — gradient drift (recolored to the client palette)
   Selected background effects for this build: particles, orbs, gradientdrift.
   Never more than two on a single surface. Bar canvases are intentionally
   not wired on inner page-heros or CTA bands.
   ════════════════════════════════════════════════════════════ */
:root{
  --anim-accent:#CBA534;
  --anim-ink:#1F3555;
  --anim-dark:#0A1F3F;
  --anim-tint:#D8E3F2;
}

.bg-gradientdrift{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,var(--anim-dark),
    color-mix(in srgb,var(--anim-dark) 70%,var(--anim-accent)),var(--anim-dark),
    color-mix(in srgb,var(--anim-dark) 85%,var(--anim-accent)));
  background-size:320% 100%;animation:bg-drift 26s ease-in-out infinite}

.bg-gradientdrift.is-light{opacity:.13;
  background:linear-gradient(115deg,var(--anim-tint),
    color-mix(in srgb,var(--anim-tint) 55%,var(--anim-accent)),var(--anim-tint),
    color-mix(in srgb,var(--anim-tint) 78%,var(--anim-accent)));
  background-size:320% 100%}

@keyframes bg-drift{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

@media (prefers-reduced-motion:reduce){.bg-gradientdrift{animation:none!important}}

/* ── Utmost Financial — site stylesheet (identical block on every page) ──
   Palette: Utmost Navy & Gold — the firm's real brand, taken from the flower
   logo kit and the live site's computed CSS custom properties.
     navy  #0D2954  primary — headings, dark surfaces, button fill
     gold  #E2C95A  bright accent — gold on navy only (9.9:1)
     gold  #CBA534  deep accent — rules, dots, hairlines, icon tints
   Gold is never body text on white (2.3:1). Every tint and surface below is
   derived from the navy. No purple anywhere. */
:root{
  --ink:#1F3555;            /* body text */
  --primary:#0D2954;        /* headings + dark surfaces */
  --deep:#0A1F3F;           /* deepest stage */
  --accent:#CBA534;         /* deep gold — rules, dots, hairlines, icon tint */
  --accent-deep:#0D2954;    /* interactive / button fill — the live site's CTA navy */
  --accent-soft:#E2C95A;    /* bright gold — accent text on navy (9.9:1) */
  --accent2:#D8E3F2;        /* pale navy tint */
  --link:#123C74;           /* text links — 10.9:1 on white, distinct from headings */
  --gold:#E2C95A;           /* alias, bright */
  --gold-deep:#CBA534;      /* alias, deep */
  --surface:#F4F7FB;        /* navy-tinted section wash */
  --surface-2:#E9EFF7;
  --line:#DCE4EE;
  --muted:#4E5D73;
  --white:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(13,41,84,.05),0 12px 32px rgba(13,41,84,.07);
  --shadow-lg:0 24px 64px rgba(13,41,84,.14);
  --wrap:1200px;
  --ff-head:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ff-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* motion system variables — recolor hooks read by motion.css + animations.js */
  --motion-1:203,165,52;
  --motion-2:216,227,242;
  --motion-accent:#CBA534;
  --motion-accent-2:#E2C95A;
  --motion-ink:#1F3555;
  --motion-dark-rgb:10,31,63;
  --motion-nav-bg:rgba(255,255,255,.98);
  /* animated-background variables */
  --anim-accent:#CBA534;
  --anim-ink:#1F3555;
  --anim-dark:#0A1F3F;
  --anim-tint:#D8E3F2;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

/* the side-entrance reveals translate +/-26px before they fire; clip (not hidden)
   contains that without creating a scroll container, so the sticky nav still works */
@supports (overflow:clip){html{overflow-x:clip;}}

body{margin:0;background:var(--white);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}

@supports (overflow:clip){body{overflow-x:clip;}}

img,video,svg{max-width:100%;height:auto;display:block;}

a{color:var(--link);text-decoration:none;}

a:hover{color:var(--primary);}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--accent-deep);outline-offset:2px;border-radius:4px;}

h1,h2,h3,h4{font-family:var(--ff-head);color:var(--primary);
  font-weight:600;line-height:1.16;letter-spacing:-.012em;margin:0 0 .55em;}

h1{font-size:clamp(2.3rem,4.6vw,3.5rem);}

h2{font-size:clamp(1.75rem,3vw,2.5rem);}

h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.28;}

h4{font-size:1.05rem;line-height:1.35;}

p{margin:0 0 1.15em;}

ul,ol{margin:0 0 1.15em;padding-left:1.15em;}

li{margin:0 0 .5em;}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px;}

.lede{font-size:1.14rem;color:var(--muted);}

.small{font-size:.9rem;}

.center{text-align:center;}

.measure{max-width:70ch;}

.measure-tight{max-width:58ch;}

.mx-auto{margin-left:auto;margin-right:auto;}

section{padding:clamp(60px,7vw,104px) 0;}

.sec-tint{background:var(--surface);}

.sec-tint-2{background:var(--surface-2);}

.sec-dark{background:var(--deep);color:#DCE6F2;}

.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff;}

.sec-dark p{color:#C7D6E8;}

.sec-dark a{color:var(--accent2);}

.sec-dark a.btn-light{color:var(--primary);}

.sec-dark a.btn-light:hover{color:var(--primary);}

.sec-dark a.btn-outline-light,.sec-dark a.btn-primary{color:#fff;}

.sec-dark a.text-cta{color:var(--accent-soft);}

.cta-band a.btn-light{color:var(--primary);}

.cta-band a.btn-outline-light{color:#fff;}

.rule{display:block;width:64px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 26px;}

.rule.is-center{margin-left:auto;margin-right:auto;}

.sec-head{max-width:64ch;margin-bottom:44px;}

.sec-head.is-center{margin-left:auto;margin-right:auto;text-align:center;}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ff-body);font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:15px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  text-align:center;line-height:1.2;}

.btn-primary{background:var(--accent-deep);color:#fff;}

.btn-primary:hover{background:#153E7E;color:#fff;}

.btn-ghost{background:transparent;color:var(--primary);border-color:var(--line);}

.btn-ghost:hover{border-color:var(--accent);color:var(--primary);}

.btn-light{background:#fff;color:var(--primary);}

.btn-light:hover{background:var(--accent2);color:var(--primary);}

.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}

.btn-outline-light:hover{border-color:#fff;color:#fff;}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

.text-cta{display:inline-block;font-weight:600;font-size:.96rem;color:var(--link);}

/* ── social utility row (above the nav) ── */
.social-row-wrap{background:var(--deep);color:#C2D1E4;}

.social-row-inner{display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:40px;flex-wrap:wrap;padding:6px 0;}

.util-note{font-size:.8rem;letter-spacing:.02em;color:#B0C2DA;}

.social-row{display:flex;align-items:center;gap:6px;}

.social-row:empty{display:none;}

.social-row a{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;color:#CFDCEC;
  border:1px solid rgba(207,220,236,.22);transition:background .25s,color .25s,border-color .25s;}

.social-row a:hover{background:var(--accent);color:var(--deep);border-color:var(--accent);}

.social-row svg{width:15px;height:15px;fill:currentColor;display:block;}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);}

.nav-inner{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:16px;}

.nav.scrolled .nav-inner{padding-top:9px;padding-bottom:9px;}

.brand{display:block;flex:0 0 auto;}

.brand img{width:212px;height:auto;}

.nav.scrolled .brand img{width:184px;}

.nav-menu{margin-left:auto;display:flex;align-items:center;gap:30px;}

.nav-list{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}

.nav-list>li{margin:0;position:relative;}

.nav-link{display:inline-block;font-weight:500;font-size:.97rem;color:var(--ink);padding:6px 0;}

.nav-link:hover,.nav-link.is-current{color:var(--primary);}

.has-sub>.sub{position:absolute;top:calc(100% + 14px);left:-18px;min-width:290px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:10px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;}

/* B4 — the 14px between the trigger and the panel was a hover dead zone: the
   pointer left .has-sub before it reached .sub and the menu shut mid-travel. An
   invisible bridge spans the gap so the panel is flush with the trigger's box
   for hit-testing while staying 14px clear of it visually. The .is-hovering
   class is the JS hover-intent latch (open on enter, close 220ms after leave,
   timer cancelled on re-entry) — it keeps the panel up across the diagonal
   travel into a sub-item that the bridge alone cannot cover. */
.has-sub>.sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}

.has-sub:hover>.sub,.has-sub:focus-within>.sub,.has-sub.is-open>.sub,
.has-sub.is-hovering>.sub{opacity:1;visibility:visible;transform:none;}

.sub a{white-space:normal;}

/* the Services mega panel is anchored to the bar rather than to its own <li>
   (.has-mega is position:static), so it hangs about 34px below the trigger row
   instead of the 14px the ordinary panels use. Its bridge spans that whole gap.
   The bridge only exists while the panel is visible, so it never blocks the
   other triggers when the menu is shut. */
.has-sub>.sub.is-mega::before{top:-34px;height:34px;}

.sub li{margin:0;}

.sub a{display:block;padding:10px 14px;border-radius:8px;font-size:.94rem;
  color:var(--ink);font-weight:500;}

.sub a:hover{background:var(--surface);color:var(--primary);}

.sub-toggle{display:none;}

.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:9px 14px;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--primary);cursor:pointer;}

/* ── hero (split) ── */
.hero{position:relative;overflow:hidden;background:var(--surface);
  border-bottom:1px solid var(--line);padding:0;}

.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch;}

.hero-copy{padding:clamp(52px,6vw,96px) clamp(24px,4vw,68px) clamp(52px,6vw,96px)
  max(24px,calc((100vw - var(--wrap))/2 + 24px));}

.hero-copy h1{margin-bottom:.42em;}

.hero-sub{font-size:1.16rem;color:var(--muted);max-width:46ch;margin-bottom:30px;}

.hero-trust{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.86rem;letter-spacing:.045em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px 16px;}

.hero-trust span{display:inline-flex;align-items:center;gap:8px;}

.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent);flex:0 0 auto;}

.hero-media{position:relative;min-height:clamp(360px,46vw,600px);overflow:hidden;
  background:var(--deep);}

.hero-media .video-bg{filter:brightness(.58);}

.hero-media .video-scrim{background:
  linear-gradient(105deg,rgba(10,31,63,.72) 0%,rgba(10,31,63,.40) 46%,rgba(10,31,63,.30) 100%),
  linear-gradient(0deg,rgba(10,31,63,.78) 0%,rgba(10,31,63,0) 52%);}

.hero-badge{position:absolute;left:32px;right:32px;bottom:30px;z-index:3;
  color:#fff;text-shadow:0 2px 18px rgba(6,18,38,.6);}

.hero-badge p{margin:0;font-size:1rem;color:#E7EEF7;max-width:36ch;}

.hero-badge .rule{margin-bottom:14px;background:var(--accent-soft);}

/* ── page hero (inner pages) ── */
.page-hero{position:relative;overflow:hidden;background:var(--deep);color:#E4EDF7;
  padding:clamp(64px,7vw,110px) 0 clamp(58px,6vw,94px);}

.page-hero h1{color:#fff;}

.page-hero .lede{color:#C6D5E8;}

.crumbs{font-size:.84rem;letter-spacing:.03em;color:#A6B9D2;margin-bottom:18px;}

.crumbs a{color:#CBD9EC;}

.crumbs a:hover{color:#fff;}

.crumbs span{padding:0 8px;opacity:.6;}

/* ── cards & grids ── */
.grid{display:grid;gap:24px;}

.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}

.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}

.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow);}

.card h3{margin-bottom:.45em;}

.card p:last-child{margin-bottom:0;}

.card-center{text-align:center;}

.card-center .ic{margin-left:auto;margin-right:auto;}

.ic{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;background:rgba(203,165,52,.15);color:var(--primary);margin-bottom:18px;}

.ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}

.num{font-family:var(--ff-head);font-size:2.6rem;line-height:1;color:var(--accent2);
  font-weight:700;margin-bottom:10px;display:block;}

.sec-dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);
  box-shadow:none;}

.sec-dark .ic{background:rgba(226,201,90,.16);color:var(--accent-soft);}

.sec-dark .num{color:rgba(255,255,255,.14);}

/* ── split media rows ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;}

.split.is-reverse .split-media{order:2;}

.split.is-top{align-items:start;}

.split-media{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);}

.split-media img,.split-media video{width:100%;display:block;}

.media-figure{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);}

.media-figure video{width:100%;display:block;}

.figure-note{font-size:.84rem;color:var(--muted);margin-top:12px;}

/* ── service list ── */
.svc-group{border-top:1px solid var(--line);padding-top:38px;margin-top:52px;}

.svc-group:first-of-type{border-top:0;margin-top:0;padding-top:0;}

.svc-group>h2{margin-bottom:.3em;}

.svc-group-lede{color:var(--muted);max-width:66ch;margin-bottom:30px;}

.svc-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 28px 24px;box-shadow:var(--shadow);}

.svc-item h3{margin-bottom:.4em;}

.svc-item p{font-size:.98rem;}

.svc-item p:last-of-type{margin-bottom:.7em;}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:0;list-style:none;}

.chip-row li{margin:0;}

.chip{display:inline-block;padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:.88rem;font-weight:500;color:var(--ink);}

.sec-dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#DDE7F3;}

.tick-list{list-style:none;padding:0;margin:0 0 1.15em;}

.tick-list li{position:relative;padding-left:30px;margin-bottom:.65em;}

.tick-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
  border-left:2px solid var(--accent-deep);border-bottom:2px solid var(--accent-deep);
  transform:rotate(-45deg);}

.sec-dark .tick-list li::before{border-color:var(--accent-soft);}

/* ── quotes ── */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow);}

.quote p{font-family:var(--ff-head);font-size:1.08rem;line-height:1.55;color:var(--primary);
  margin:0;}

.quote::before{content:"";display:block;width:34px;height:3px;background:var(--accent);
  border-radius:2px;margin-bottom:20px;}

.widget-slot{border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);
  padding:34px 28px;text-align:center;color:var(--muted);font-size:.95rem;}

.widget-slot strong{display:block;color:var(--primary);font-family:var(--ff-head);
  font-size:1.15rem;margin-bottom:8px;font-weight:600;}

/* ── stat / fact strip ── */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;}

.fact{background:#fff;padding:26px 24px;}

.fact dt{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;}

.fact dd{margin:0;font-family:var(--ff-head);font-size:1.16rem;color:var(--primary);
  font-weight:600;line-height:1.3;}

/* ── motto ── */
.motto{font-family:var(--ff-head);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;
  color:var(--primary);line-height:1.28;margin:0 0 .5em;}

.sec-dark .motto{color:#fff;}

/* ── forms ── */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,38px);box-shadow:var(--shadow);}

.field{margin-bottom:18px;}

.field label{display:block;font-size:.88rem;font-weight:600;color:var(--primary);
  margin-bottom:7px;}

.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.97rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 14px;}

.field textarea{min-height:150px;resize:vertical;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

.form-note{font-size:.85rem;color:var(--muted);margin-top:16px;}

/* ── contact / NAP ── */
.nap{list-style:none;padding:0;margin:0;}

.nap li{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start;}

.nap .ic{margin:0;flex:0 0 auto;width:38px;height:38px;border-radius:10px;}

.nap b{display:block;font-family:var(--ff-body);font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px;}

.nap span,.nap a{font-size:1rem;color:var(--ink);}

.nap a:hover{color:var(--accent-deep);}

.county-list{columns:3;column-gap:32px;list-style:none;padding:0;margin:0;}

.county-list li{break-inside:avoid;margin-bottom:.55em;font-size:.97rem;}

.county-list li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:11px;vertical-align:middle;}

/* ── owner portrait ── */
.portrait{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--deep);}

.portrait img{width:100%;display:block;}

.cred-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;}

.cred-list li{display:flex;gap:13px;align-items:flex-start;font-size:.99rem;}

.cred-list li::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--accent);
  margin-top:.55em;flex:0 0 auto;transform:rotate(45deg);}

/* ── CTA band ── */
.cta-band{position:relative;overflow:hidden;background:var(--primary);color:#fff;
  padding:clamp(58px,6vw,92px) 0;}

.cta-band h2{color:#fff;}

.cta-band p{color:#D3DFEE;}

/* ── legal pages ── */
.legal h2{font-size:clamp(1.35rem,2.1vw,1.75rem);margin-top:2.1em;}

.legal h3{font-size:1.1rem;margin-top:1.5em;}

.legal p,.legal li{font-size:1rem;}

.legal .updated{font-size:.9rem;color:var(--muted);}

/* ── footer ── */
.site-footer{position:relative;overflow:hidden;background:var(--deep);color:#C2CFE0;
  padding:clamp(56px,6vw,82px) 0 0;}

.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:40px;}

.site-footer h4{color:#fff;font-family:var(--ff-body);font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;margin-bottom:18px;}

.site-footer a{color:#C2CFE0;}

.site-footer a:hover{color:#fff;}

.site-footer p{color:#A5B8D1;font-size:.95rem;}

.footer-logo{width:210px;margin-bottom:20px;}

.f-links{list-style:none;padding:0;margin:0;}

.f-links li{margin-bottom:.6em;font-size:.95rem;}

.f-nap{list-style:none;padding:0;margin:0;font-size:.95rem;line-height:1.65;}

.f-nap li{margin-bottom:.65em;}

.f-nap b{display:block;color:#fff;font-weight:600;}

.f-bottom{margin-top:52px;border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0 96px;display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:center;justify-content:space-between;font-size:.87rem;color:#9DAECA;}

.f-bottom a{color:#9DAECA;}

.f-legal-links{display:flex;gap:22px;flex-wrap:wrap;}

/* ── chat entry point ── */
button.chat-launcher{position:fixed;right:22px;bottom:22px;z-index:80;display:inline-flex;
  align-items:center;gap:10px;background:var(--accent-deep);color:#fff;border:0;
  border-radius:999px;padding:14px 22px;font:inherit;font-weight:600;font-size:.95rem;
  cursor:pointer;box-shadow:0 14px 34px rgba(13,41,84,.32);}

button.chat-launcher svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}

div.chat-panel{position:fixed;right:22px;bottom:86px;z-index:81;width:min(340px,calc(100vw - 44px));
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 30px 70px rgba(13,41,84,.28);padding:24px 22px;display:none;}

.chat-panel.is-open{display:block;}

.chat-panel h4{font-family:var(--ff-head);font-size:1.12rem;margin-bottom:.4em;}

.chat-panel p{font-size:.93rem;color:var(--muted);margin-bottom:1em;}

.chat-panel .btn{width:100%;padding:12px 18px;font-size:.93rem;}

.chat-panel .btn+.btn{margin-top:10px;}

.chat-close{position:absolute;top:12px;right:12px;background:transparent;border:0;
  font-size:1.35rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;}

/* ── animated backgrounds (recolored from the client palette) ── */
.bg-gradientdrift{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,var(--anim-dark),
    color-mix(in srgb,var(--anim-dark) 70%,var(--anim-accent)),var(--anim-dark),
    color-mix(in srgb,var(--anim-dark) 85%,var(--anim-accent)));
  background-size:320% 100%;animation:bg-drift 26s ease-in-out infinite;}

.bg-gradientdrift.is-light{opacity:.13;
  background:linear-gradient(115deg,var(--anim-tint),
    color-mix(in srgb,var(--anim-tint) 55%,var(--anim-accent)),var(--anim-tint),
    color-mix(in srgb,var(--anim-tint) 78%,var(--anim-accent)));
  background-size:320% 100%;}

/* ── accent glow on light surfaces (revision, 2026-09-08) ──
   A faint heather bloom in opposite corners of every light section plus a hairline
   accent seam along its top edge, so the white stretches carry brand colour without
   turning into a tinted panel. Sits behind content via an isolated stacking context. */
section:not(.sec-dark):not(.cta-band):not(.page-hero):not(.hero){position:relative;isolation:isolate;}

section:not(.sec-dark):not(.cta-band):not(.page-hero):not(.hero)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 60% at 1% 0%,rgba(203,165,52,.14),rgba(203,165,52,0) 68%),
    radial-gradient(44% 56% at 99% 100%,rgba(216,227,242,.46),rgba(216,227,242,0) 66%);}

section:not(.sec-dark):not(.cta-band):not(.page-hero):not(.hero)::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(203,165,52,0),rgba(203,165,52,.38) 50%,rgba(203,165,52,0));}

.card,.svc-item,.quote,.form-card,.widget-slot{
  box-shadow:var(--shadow),0 0 30px -16px rgba(203,165,52,.62);}

.split-media,.media-figure,.portrait{
  box-shadow:var(--shadow-lg),0 0 46px -18px rgba(203,165,52,.72);}

.facts{box-shadow:0 1px 2px rgba(13,41,84,.05),0 0 36px -18px rgba(203,165,52,.66);}

.sec-dark .card,.sec-dark .quote{box-shadow:none;}

/* ── testimonial attribution ── */
.quote{display:flex;flex-direction:column;}

.quote p{flex:1 1 auto;}

.quote-src{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-style:normal;font-size:.88rem;line-height:1.5;}

.quote-src cite{display:block;font-style:normal;font-weight:600;color:var(--primary);
  font-size:.95rem;}

.quote-src .quote-plat{display:block;color:var(--muted);}

.sec-dark .quote-src{border-top-color:rgba(255,255,255,.14);}

.sec-dark .quote-src cite{color:#fff;}

.sec-dark .quote-src .quote-plat{color:#B7C8DE;}

/* ── embed placeholder slots ── */
.widget-slot.is-tall{min-height:400px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;}

/* ThemePort embed placeholder. The visible text is the key the converter reads,
   so it is the element's only text — the explanatory line sits outside it. A
   gold hairline and a navy label make it read as a deliberate slot in the
   design rather than an empty box. No iframe and no third-party script ships. */
.embed-ph{border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);background:var(--surface);padding:34px 28px;
  text-align:center;color:var(--primary);font-family:var(--ff-head);
  font-size:1.15rem;font-weight:600;line-height:1.35;}

.embed-ph.is-tall{min-height:400px;display:flex;align-items:center;
  justify-content:center;}

/* ── live video surfaces (revision, 2026-09-08) ──
   Inner page-heros carry the same live background treatment as the homepage hero;
   inline videos in the content flow autoplay muted and looping with no controls.
   Both are paused and reset to their poster by animations.js under reduced motion. */
.page-hero .video-bg{filter:brightness(.34);}

.page-hero .video-scrim{background:
  linear-gradient(100deg,rgba(10,31,63,.88) 0%,rgba(10,31,63,.66) 50%,rgba(10,31,63,.56) 100%),
  linear-gradient(0deg,rgba(10,31,63,.82) 0%,rgba(10,31,63,.16) 64%);}

.page-hero h1,.page-hero .lede,.page-hero .crumbs{text-shadow:0 2px 20px rgba(6,18,38,.62);}

.video-live{width:100%;display:block;background:var(--deep);}

.media-figure .video-live,.split-media .video-live{border-radius:inherit;}

/* reversed copy now sits over moving footage — lift the quietest text a step so it
   still clears AA on the brightest frame the clip can land on */
.page-hero .crumbs{color:#C0D0E4;}

.page-hero .crumbs a{color:#D3DFEE;}

/* the accent rule at the top of a quote is a fixed 34px mark, not a flex-stretched bar */
.quote::before{align-self:flex-start;flex:0 0 auto;}

/* ── responsive ── */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px;}
  .county-list{columns:2;}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-copy{padding:clamp(44px,7vw,64px) 24px;max-width:var(--wrap);margin:0 auto;width:100%;}
  .hero-media{min-height:320px;order:-1;}
  .split{grid-template-columns:1fr;}
  .split.is-reverse .split-media{order:0;}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .nav-toggle{display:inline-block;}
  .nav-menu{position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 22px;display:none;}
  .nav-menu.is-open{display:flex;}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list>li{border-bottom:1px solid var(--line);padding:4px 0;}
  .nav-link{padding:12px 0;font-size:1.02rem;}
  .has-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;}
  .sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer;
    font:inherit;color:var(--primary);}
  .sub-toggle::before{content:"+";font-size:1.1rem;line-height:1;}
  .has-sub.is-open .sub-toggle::before{content:"\2013";}
  .has-sub>.sub{position:static;width:100%;flex-basis:100%;opacity:1;visibility:visible;
    transform:none;display:none;box-shadow:none;border:0;padding:0 0 10px;min-width:0;}
  .has-sub>.sub::before{display:none;}
  .has-sub.is-hovering>.sub{display:none;}
  .has-sub.is-open>.sub{display:block;}
  .nav-cta{margin-top:16px;width:100%;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .g-2,.g-3,.g-4,.facts,.field-row{grid-template-columns:1fr;}
  .county-list{columns:1;}
  .footer-grid{grid-template-columns:1fr;}
  .social-row-inner{justify-content:center;}
  .util-note{width:100%;text-align:center;}
  button.chat-launcher{right:14px;bottom:14px;padding:12px 18px;}
  .f-bottom{padding-bottom:88px;}
  .chat-panel{right:14px;bottom:74px;}
}

@media print{.nav,.social-row-wrap,button.chat-launcher,div.chat-panel,.cta-band{display:none;}}

/* ── architecture nav: mega panel under Services ── */
.nav-list>li.has-mega{position:static;}

.has-sub>.sub.is-mega{left:auto;right:24px;top:100%;min-width:min(900px,calc(100vw - 48px));
  padding:24px 24px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px 26px;}

.sub-col{min-width:0;}

.sub-col+.sub-col{margin:0;}

.sub-all{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:10px;}

.sub-head{display:block;font-family:var(--ff-head);font-size:1rem;font-weight:600;
  color:var(--primary);padding:7px 10px;border-radius:8px;}

.sub-head:hover{background:var(--surface);color:var(--primary);}

.sub-col ul+.sub-head{margin-top:18px;}

.sub-col ul{list-style:none;margin:0 0 2px;padding:0;}

.sub-col li{margin:0;}

.sub-col ul a{display:block;padding:6px 10px 6px 20px;border-radius:8px;font-size:.9rem;
  color:var(--muted);font-weight:500;line-height:1.35;}

.sub-col ul a:hover{background:var(--surface);color:var(--primary);}

a.chip{color:var(--ink);}

a.chip:hover{border-color:var(--accent);background:var(--surface);color:var(--primary);}

.sec-dark a.chip:hover{background:rgba(255,255,255,.1);color:#fff;}

.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 26px;
  list-style:none;margin:0;padding:0;}

.link-grid li{margin:0 0 .35em;font-size:.97rem;}

.link-grid li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-right:11px;vertical-align:middle;}

.arch-block{border-top:1px solid var(--line);padding-top:26px;margin-top:34px;}

.arch-block:first-of-type{border-top:0;margin-top:0;padding-top:0;}

.arch-block h3{margin-bottom:.5em;}

@media (max-width:1080px){.link-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

@media (max-width:900px){
  /* the mega panel folds into the same tap accordion as the other menus: the
     unscoped .sub.is-mega display:grid outranks the mobile .sub display:none,
     so it has to be shut off explicitly here and re-opened only by .is-open,
     which is what the +/- .sub-toggle drives. The hover latch stays inert. */
  .has-sub>.sub.is-mega{min-width:0;grid-template-columns:1fr;padding:0 0 10px;gap:0;display:none;}
  .has-sub.is-hovering>.sub.is-mega{display:none;}
  .has-sub.is-open>.sub.is-mega{display:grid;}
  .sub-all{border-bottom:0;margin-bottom:0;padding-bottom:0;}
  .sub-head{padding:10px 0;font-size:.98rem;}
  .sub-col ul+.sub-head{margin-top:6px;}
  .sub-col ul a{padding:8px 0 8px 16px;}
}

@media (max-width:640px){.link-grid{grid-template-columns:1fr;}}

/* ══ Resources & Personal components (revision, attempt 3) ══════════════════
   Built from the same primitives as the approved system: .card surfaces, the
   .rule accent mark, --surface washes, --radius corners and the same shadow
   pair. Nothing here introduces a new colour that is not already a token. */

/* eyebrow — the live site labels every page section with one */
.eyebrow{display:block;font-family:var(--ff-body);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}

.page-hero .eyebrow{color:var(--accent-soft);}

.sec-dark .eyebrow{color:var(--accent-soft);}

/* educational disclaimer — verbatim live-site compliance text, gold-ruled */
.disclaimer{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--radius-sm);
  padding:22px 26px;margin:0 0 1.2em;}

.disclaimer b{display:block;font-family:var(--ff-body);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
  margin-bottom:9px;}

.disclaimer p{font-size:.91rem;line-height:1.65;color:var(--muted);margin:0 0 .8em;}

.disclaimer p:last-child{margin-bottom:0;}

.sec-dark .disclaimer{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);
  border-left-color:var(--accent-soft);}

.sec-dark .disclaimer p,.sec-dark .disclaimer b{color:#C0D0E4;}

/* calculator ─ form on the left, live result panel on the right */
.calc{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3vw,44px);
  align-items:start;}

.calc-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow),0 0 30px -16px rgba(203,165,52,.62);}

.calc-form h2,.calc-form h3{margin-bottom:.5em;}

.calc-form .field:last-of-type{margin-bottom:8px;}

.field .hint{display:block;font-weight:400;font-size:.82rem;color:var(--muted);margin-top:5px;}

.calc-out{background:var(--primary);color:#fff;border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-lg);}

.calc-out h3{color:#fff;margin-bottom:.5em;}

.calc-out .rule{background:var(--accent-soft);margin-bottom:20px;}

.res-list{list-style:none;padding:0;margin:0;}

.res-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;margin:0;border-bottom:1px solid rgba(255,255,255,.15);}

.res-list li:last-child{border-bottom:0;}

.res-k{font-size:.9rem;color:#C6D5E8;flex:1 1 auto;}

.res-v{font-family:var(--ff-head);font-size:1.28rem;font-weight:700;line-height:1.2;
  color:var(--accent-soft);text-align:right;flex:0 0 auto;}

.res-v.is-plain{color:#fff;font-size:1.02rem;font-family:var(--ff-body);font-weight:600;}

.res-note{font-size:.86rem;line-height:1.6;color:#B7C8DE;margin:18px 0 0;}

.res-block{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);}

.res-block h4{color:#fff;font-family:var(--ff-body);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px;}

.res-block ul{list-style:none;padding:0;margin:0;}

.res-block li{position:relative;padding-left:20px;margin-bottom:.55em;font-size:.93rem;
  color:#DCE6F2;line-height:1.55;}

.res-block li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent-soft);}

.res-block li:last-child{margin-bottom:0;}

/* yes/no switch rows (cleanup estimator) */
.switch-list{margin:6px 0 4px;padding:0;list-style:none;border-top:1px solid var(--line);}

.switch-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0;padding:12px 0;border-bottom:1px solid var(--line);}

.switch-list label{font-size:.94rem;font-weight:500;color:var(--ink);flex:1 1 auto;
  cursor:pointer;margin:0;}

.switch-list input{width:19px;height:19px;flex:0 0 auto;accent-color:var(--accent-deep);
  cursor:pointer;margin:0;}

/* segmented 4-point scale (CFO readiness) */
.scale{margin:0 0 26px;}

.scale>p{font-size:.97rem;font-weight:500;color:var(--primary);margin:0 0 10px;}

.scale-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}

.scale-opts input{position:absolute;opacity:0;width:1px;height:1px;}

.scale-opts label{display:block;text-align:center;font-size:.83rem;font-weight:500;
  padding:10px 6px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--muted);cursor:pointer;line-height:1.25;
  transition:background .18s,color .18s,border-color .18s;}

.scale-opts label:hover{border-color:var(--accent);}

.scale-opts input:checked+label{background:var(--accent-deep);border-color:var(--accent-deep);
  color:#fff;}

.scale-opts input:focus-visible+label{outline:3px solid var(--accent-deep);outline-offset:2px;}

/* guide download card */
.dl-card{display:flex;flex-wrap:wrap;align-items:center;gap:24px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:26px 28px;}

.dl-card .ic{margin:0;flex:0 0 auto;}

.dl-meta{flex:1 1 260px;}

.dl-meta b{display:block;font-family:var(--ff-head);font-size:1.14rem;font-weight:600;
  color:var(--primary);line-height:1.3;margin-bottom:4px;}

.dl-meta span{display:block;font-size:.88rem;color:var(--muted);}

/* FAQ accordion — native <details>, no script, keyboard-operable */
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow),0 0 30px -16px rgba(203,165,52,.62);overflow:hidden;}

.faq+.faq{margin-top:14px;}

.faq>summary{cursor:pointer;list-style:none;display:block;position:relative;
  padding:20px 58px 20px 26px;font-family:var(--ff-head);font-size:1.05rem;
  font-weight:600;line-height:1.35;color:var(--primary);}

.faq>summary::-webkit-details-marker{display:none;}

.faq>summary::after{content:"";position:absolute;right:26px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s ease;}

.faq[open]>summary::after{transform:rotate(-135deg);top:30px;}

.faq>summary:hover{background:var(--surface);}

.faq-body{padding:0 26px 24px;}

.faq-body p,.faq-body li{font-size:.98rem;color:var(--ink);}

.faq-body p:last-child,.faq-body ul:last-child{margin-bottom:0;}

@media (prefers-reduced-motion:reduce){.faq>summary::after{transition:none;}}

/* resource index rows (calculator / guide listings) */
.idx{list-style:none;padding:0;margin:0;display:grid;gap:16px;}

.idx>li{margin:0;}

.idx-item{display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;}

.idx-item:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);color:inherit;}

.idx-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px;}

.idx-head h3{margin:0;font-size:1.16rem;}

.idx-item p{font-size:.96rem;color:var(--muted);margin:0 0 10px;}

.idx-item .text-cta{margin:0;}

@media (prefers-reduced-motion:reduce){.idx-item{transition:none;}}

/* credential badge row (ProAdvisor) */
.badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0 0 1.2em;
  padding:0;list-style:none;}

.badge-row li{margin:0;}

.badge{display:inline-flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.9rem;font-weight:600;color:var(--primary);line-height:1.25;}

.badge svg{width:26px;height:26px;flex:0 0 auto;}

.sec-dark .badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);
  color:#fff;}

/* topic anchor offset so #conversations lands clear of the sticky bar */
[id]{scroll-margin-top:104px;}

@media (max-width:900px){
  .calc{grid-template-columns:1fr;}
  .scale-opts{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
  .disclaimer{padding:20px;}
  .dl-card{padding:22px;}
  .faq>summary{padding:18px 48px 18px 20px;font-size:1rem;}
  .faq>summary::after{right:20px;}
  .faq-body{padding:0 20px 20px;}
  .idx-item{padding:22px 20px;}
}

/* the footer gains a Resources column — five tracks on the widest layout,
   folding to three, two and one as the viewport narrows. Declared after the
   original responsive block so these win at every breakpoint. */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:34px;}

@media (max-width:1180px){.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

@media (max-width:820px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* two-up listing helpers used by the Personal and Resources pages */
.idx-2{grid-template-columns:repeat(2,minmax(0,1fr));}

.cols-2{columns:2;column-gap:44px;}

.cols-2 li{break-inside:avoid;}

@media (max-width:760px){.idx-2{grid-template-columns:1fr;}.cols-2{columns:1;}}

.scale-opts{position:relative;}

/* ── ThemePort blog/utility templates (namespaced, no collision with site CSS) ── */
.tp-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; width: 100%; }
.tp-page-hero { background: #0D2954; padding: 88px 0 56px; }
.tp-page-hero h1 { color: #fff; font-family: 'Georgia', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0; }
.tp-page-hero .tp-meta { color: rgba(255,255,255,.75); margin: 12px 0 0; }
.tp-section { padding: 64px 0; }
.tp-content { max-width: 820px; }
.tp-content p, .tp-content ul, .tp-content ol { margin: 0 0 1.2em; }
.tp-content h2, .tp-content h3 { font-family: 'Georgia', serif; color: #0D2954; margin: 1.6em 0 .6em; line-height: 1.25; }
.tp-content img, .tp-featured { max-width: 100%; height: auto; border-radius: 8px; margin: 0 0 1.4em; }
.tp-policy { max-width: 900px; width: 100%; }
.tp-policy h2, .tp-policy h3 { font-family: 'Georgia', serif; color: #0D2954; margin: 1.6em 0 .6em; }
.tp-policy p, .tp-policy ul { margin: 0 0 1.1em; }
.tp-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.tp-post-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 24px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.tp-post-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; margin-bottom: 16px; }
.tp-post-card h2 { font-family: 'Georgia', serif; font-size: 1.3rem; line-height: 1.3; margin: 0 0 8px; }
.tp-post-card h2 a { color: #0D2954; text-decoration: none; }
.tp-meta { color: rgba(0,0,0,.5); font-size: .85rem; margin: 0 0 10px; }
.tp-readmore { color: #E2C95A; font-weight: 700; text-decoration: none; }
.tp-pagination { margin-top: 40px; text-align: center; }
.tp-pagination .page-numbers { display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid rgba(0,0,0,.15); border-radius: 6px; color: #0D2954; text-decoration: none; }
.tp-pagination .page-numbers.current { background: #0D2954; color: #fff; }


/* ── ThemePort v2.8.0 — count-adaptive team tiers ────────────────────────── */
.tp-team{display:grid;justify-content:center;align-items:start;gap:2rem;margin-left:auto;margin-right:auto}
.tp-team__card{text-align:center}
.tp-team__photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;display:block}
.tp-team__body h3{margin:.85rem 0 .15rem}
.tp-team__role{display:block;opacity:.75;font-size:.95em}
.tp-team__bio{margin-top:.65rem;text-align:left}

/* 1 — FOUNDER FEATURE: large portrait beside the full bio. Reads as a complete
   solo-firm About section, never as a team page with one lonely card. */
.tp-team--solo{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:2.5rem;max-width:900px;text-align:left}
.tp-team--solo .tp-team__card{display:contents}
.tp-team--solo .tp-team__photo{grid-column:1}
.tp-team--solo .tp-team__body{grid-column:2;text-align:left}
.tp-team--solo .tp-team__body h3{margin-top:0;font-size:1.6em}
@media (max-width:720px){
  .tp-team--solo{grid-template-columns:minmax(0,1fr);max-width:420px}
  .tp-team--solo .tp-team__photo,.tp-team--solo .tp-team__body{grid-column:1}
}

/* 2 — balanced centered pair, generous cards side by side */
.tp-team--pair{grid-template-columns:repeat(2,minmax(0,300px));gap:2.5rem;max-width:700px}

/* 3–4 — one centered row of equal cards */
.tp-team--row{grid-template-columns:repeat(auto-fit,minmax(0,240px));max-width:1040px}

/* 5+ — full multi-row grid; photos smallest, density highest */
.tp-team--grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:1160px;gap:1.75rem}
.tp-team--grid .tp-team__bio{font-size:.94em}

@media (max-width:640px){
  .tp-team--pair,.tp-team--row,.tp-team--grid{grid-template-columns:minmax(0,1fr);max-width:380px}
}