/* ════════════════════════════════════════════════════════════
   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: #e8a820;          solid accent: bars/progress
       --motion-accent-2: #f5c842;        lighter accent
       --motion-ink: #0f2540;             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).
   ════════════════════════════════════════════════════════════ */
: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%);
}

/* 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(15,37,64,.04), 0 10px 28px rgba(15,37,64,.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,#e8a820), var(--motion-accent-2,#f5c842)); }

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

.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,#0f2540); }

.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,#e8a820);
  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,#e8a820);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .4s var(--motion-ease); }

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

.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); }

/* ════════════════════════════════════════════════════════════
   DROPDOWN MENUS — HOVER BRIDGE + CLOSE DELAY  (LAW, 2026-09-09, v1.3.0)
   ------------------------------------------------------------
   Utmost Financial (job 37, 2026-09-09): a nav dropdown closed the
   instant the pointer crossed the gap between its trigger and the
   panel below it — the gap was a hover dead zone, and the panel
   shut before the pointer ever reached it. Full story, the two
   rules, and the reproduce test: SKILL.md, "Dropdown menus — the
   hover bridge + close delay (LAW, 2026-09-09)".

   RULE 1 (this block): no dead zone between trigger and panel. An
   invisible ::before bridge on the panel spans exactly the gap
   between it and its trigger, so the panel is flush with the
   trigger's hit box for pointer purposes while staying visually
   clear of it — the site's own visual design is untouched. The
   bridge is disabled on the <=900px tap panel, where the menu opens
   by tap/class, not hover.
   RULE 2 (the close delay, >=200ms + cancel-on-re-entry) is the JS
   half — see assets/animations.js `initDropdownKit()`.

   Hook: [data-motion-dropdown] is the standard trigger hook for a
   new build (pair it with a [data-motion-dropdown-panel] child for
   the panel); a site already using the .has-drop / .has-sub
   convention with a .drop panel (the MAC marketing site itself, the
   source of this fix) is picked up automatically — no markup change
   required. NO-OP GUARD: every rule below is scoped to these three
   trigger selectors, so a page with none of them gets zero rules
   and zero visual change. --motion-dropdown-gap lets a site match
   its own trigger-to-panel spacing (defaults to 16px, the MAC
   value); this block does not set the panel's position/width/
   colors — those stay owned by the site's own CSS. */
[data-motion-dropdown],.has-drop,.has-sub { position:relative; }

[data-motion-dropdown] > [data-motion-dropdown-panel]::before,
[data-motion-dropdown] > .drop::before,
.has-drop > .drop::before,
.has-sub > .drop::before {
  content:''; position:absolute; left:0; right:0;
  top:calc(var(--motion-dropdown-gap,16px) * -1);
  height:var(--motion-dropdown-gap,16px);
}

@media (max-width:900px) {
  /* no hover bridge on the tap panel — mobile opens by tap/class */
  [data-motion-dropdown] > [data-motion-dropdown-panel]::before,
  [data-motion-dropdown] > .drop::before,
  .has-drop > .drop::before,
  .has-sub > .drop::before { display:none; }
}

/* ============================================================
   Accounting & Bookkeeping By Carl — shared stylesheet
   This block is byte-identical on every page (ThemePort maps it
   to one shared stylesheet on conversion).
   ============================================================ */
:root{
  /* ---- brand palette ---- */
  --white:#ffffff;
  --surface:#edf3fb;          /* brand tint band */
  --surface-2:#f5f8fd;        /* lighter cool tint */
  --line:#dce5f2;
  --line-2:#e6ecf5;
  --ink:#05275c;              /* headings (brand navy) */
  --body:#3b4658;             /* body copy */
  --muted:#5b6678;
  --brand:#004aad;
  --brand-hover:#003c8f;
  --brand-deep:#05275c;
  --dark:#05275c;
  --dark-2:#05275c;
  --accent:#a7e66e;
  --accent-text:#004aad;      /* links: brand blue, AA on white */
  --accent-soft:#a7e66e;
  --radius:14px;
  --shadow:0 1px 2px rgba(5,39,92,.05), 0 12px 32px rgba(5,39,92,.07);
  --wrap:1180px;

  /* ---- motion layer (assets/motion.css + assets/animations.js read these) ---- */
  --motion-1:167,230,110;
  --motion-2:173,203,242;
  --motion-accent:#a7e66e;
  --motion-accent-2:#adcbf2;
  --motion-ink:#05275c;
  --motion-dark-rgb:5,39,92;
  --motion-nav-bg:rgba(255,255,255,.98);

  /* ---- animated background layer ---- */
  --anim-accent:#a7e66e;
  --anim-ink:#05275c;
  --anim-dark:#05275c;
  --anim-tint:#edf3fb;
}

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

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

body{margin:0;background:var(--white);color:var(--body);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}

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

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

a:hover{color:var(--ink)}

h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  color:var(--ink);margin:0 0 .5em;line-height:1.18;font-weight:600;letter-spacing:-.01em}

h1{font-size:clamp(2.1rem,4.6vw,3.35rem)}

h2{font-size:clamp(1.65rem,3vw,2.4rem)}

h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}

h4{font-size:1.05rem}

p{margin:0 0 1.1em}

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

li{margin-bottom:.45em}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

.social-row :focus-visible,.hero :focus-visible,.page-hero :focus-visible,.cta-band :focus-visible,.footer :focus-visible{outline-color:var(--accent)}

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

.narrow{max-width:800px}

.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:12px 18px;z-index:200}

.skip:focus{left:8px;top:8px;color:#fff}

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

.eq{max-width:70ch}

.center{text-align:center}

.center.eq{margin-left:auto;margin-right:auto}

/* ---------- social utility strip (above the nav) ---------- */
.social-row{background:var(--brand-deep);border-bottom:1px solid rgba(255,255,255,.08)}

.social-row:not(:has(a)){display:none}

.social-row .container{display:flex;align-items:center;justify-content:flex-end;gap:2px;min-height:38px}

.social-row a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:8px;color:rgba(255,255,255,.82);transition:color .25s,background .25s}

.social-row a:hover{color:#fff;background:rgba(255,255,255,.12)}

.social-row svg{width:17px;height:17px;fill:currentColor}

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

.nav.scrolled{padding:9px 0;box-shadow:0 6px 24px rgba(5,39,92,.09)}

.nav .container{display:flex;align-items:center;gap:26px}

.brand-lockup{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--ink)}

.brand-logo{display:block;height:42px;width:auto;max-width:100%;transition:height .3s ease}

.nav.scrolled .brand-logo{height:34px}

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

.nav .btn-primary{order:3}

.nav-toggle{order:4}

.nav-links li{margin:0}

.nav-links a{color:var(--ink);font-weight:500;font-size:.96rem;padding:4px 0}

.nav-links a:hover{color:var(--brand)}

body.p-home .nav-links a[href="index.html"],
body.p-services-category .nav-links a[href="services.html"],
body.p-services .nav-links a[href="services.html"],
body.p-about .nav-links a[href="about.html"],
body.p-contact .nav-links a[href="contact.html"]{color:var(--brand)}

body.p-home .nav-links a[href="index.html"]::after,
body.p-services-category .nav-links a[href="services.html"]::after,
body.p-services .nav-links a[href="services.html"]::after,
body.p-about .nav-links a[href="about.html"]::after,
body.p-contact .nav-links a[href="contact.html"]::after{transform:scaleX(1)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;cursor:pointer}

.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:10px;font-weight:600;font-size:.97rem;
  border:1px solid transparent;cursor:pointer;text-align:center}

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

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

.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

.btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

.btn-outline{background:#fff;color:var(--brand);border-color:var(--brand)}

.btn-outline:hover{background:var(--brand);color:#fff}

.btn-sm{padding:11px 20px;font-size:.92rem}

.text-link{color:var(--accent-text);font-weight:600;display:inline-flex;align-items:center}

.text-link:hover{color:var(--ink)}

/* ---------- sections ---------- */
.section{padding:88px 0}

.section-sm{padding:60px 0}

.section--tint{background:var(--surface)}

.section--cool{background:var(--surface-2)}

.section-head{max-width:720px;margin-bottom:44px}

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

.section-head p{color:var(--muted);margin-bottom:0}

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

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

/* ---------- homepage hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--dark);
  min-height:clamp(560px,78vh,720px);display:flex;align-items:center;padding:96px 0}

.hero .container{position:relative;z-index:3}

.hero-inner{max-width:760px}

.hero h1{color:#fff;text-shadow:0 2px 26px rgba(2,12,31,.55);margin-bottom:.42em}

.hero p.hero-sub{color:#e8f0fb;font-size:1.18rem;max-width:620px;
  text-shadow:0 1px 14px rgba(2,12,31,.5);margin-bottom:1.9em}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:34px}

.trust-line{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;margin:0;padding:0}

.trust-line li{display:flex;align-items:center;gap:9px;color:#e1ebf8;font-size:.9rem;
  letter-spacing:.02em;margin:0;text-shadow:0 1px 10px rgba(2,12,31,.55)}

.trust-line li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 6px}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--dark);padding:92px 0 76px;color:#fff}

.page-hero .container{position:relative;z-index:3}

.page-hero h1{color:#fff;margin-bottom:.35em}

.page-hero p{color:#e6eef9;max-width:640px;font-size:1.1rem;margin-bottom:0}

.page-hero .rule{background:var(--accent-soft)}

.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 20px;
  font-size:.86rem;color:#c6d6ee}

.crumbs li{margin:0}

.crumbs li+li::before{content:"/";margin-right:8px;opacity:.55}

.crumbs a{color:#eef4fc}

.crumbs a:hover{color:#fff}

/* ---------- animated background: gradient drift ---------- */
.bg-gradientdrift{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(115deg,var(--anim-dark),#0b3f8c,var(--anim-dark),#07306f);
  background-size:320% 100%;animation:bg-drift 26s ease-in-out infinite}

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

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

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

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

.g4{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:.4em}

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

.card-icon{display:block;color:var(--brand);margin-bottom:16px}

.card-icon svg{width:27px;height:27px;fill:currentColor}

.card-media{padding:0;overflow:hidden;display:flex;flex-direction:column}

.card-media>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.card-media>.card-body{padding:26px 28px 30px;flex:1}

.card-media>.card-body p:last-child{margin-bottom:0}

.card .sc-n{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:2rem;
  color:rgba(5,39,92,.12);line-height:1;margin-bottom:10px}

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

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

.svc h2{margin-bottom:.45em}

.svc p:last-of-type{margin-bottom:.8em}

.group-head{margin:70px 0 30px}

.group-head:first-child{margin-top:0}

.group-head h2{margin-bottom:.25em}

.group-head p{color:var(--muted);margin-bottom:0}

/* ---------- services overview: scannable blocks ---------- */
.svc-intro{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}

.svc-intro .lede{margin-bottom:1em}

.checks--tight{margin-bottom:1.1em}

.checks--tight li{margin-bottom:.4em}

.jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.jump-link{position:relative;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}

.jump-link:hover{color:var(--brand)}

.jump-n{font-family:"Source Serif 4",Georgia,serif;font-size:1.6rem;line-height:1;color:var(--brand)}

.group-split{margin-bottom:48px}

.group-split h2{margin-bottom:.4em}

.feature-split{margin-top:64px}

.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

.svc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column}

.svc-card>p{margin-bottom:.9em}

.svc-card .text-link{margin-top:auto}

.svc-card--media{padding:0;overflow:hidden}

.svc-card--media>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.svc-card--media .svc-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}

.svc-card--media .svc-body .text-link{margin-top:auto}

h2.svc-title{font-size:clamp(1.25rem,1.9vw,1.55rem);margin-bottom:.45em}

.fix-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}

.fix-list h3{font-size:1.02rem;margin-bottom:.6em;color:var(--brand)}

.table-wrap{overflow-x:auto;margin-top:6px}

.rhythm{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;font-size:.94rem}

.rhythm th,.rhythm td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}

.rhythm thead th{background:var(--brand);color:#fff;font-weight:600;font-size:.84rem;letter-spacing:.04em}

.rhythm tbody th{color:var(--ink);font-weight:600}

.rhythm tbody tr:last-child th,.rhythm tbody tr:last-child td{border-bottom:0}

.scope-panel{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow)}

.scope-panel h2{margin-bottom:.45em}

.scope-panel p{margin-bottom:0}

.steps{list-style:none;counter-reset:st;padding:0;margin:0}

.steps li{counter-increment:st;position:relative;padding-left:52px;margin-bottom:18px}

.steps li:last-child{margin-bottom:0}

.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"Source Serif 4",Georgia,serif;font-weight:600}

.steps strong{color:var(--ink)}

@media (max-width:980px){
  .svc-intro,.scope-panel{grid-template-columns:1fr;gap:30px}
}

@media (max-width:820px){
  .svc-grid,.fix-list{grid-template-columns:1fr}
  .scope-panel{padding:28px 22px}
}

/* ---------- split media blocks ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}

.split.rev{grid-template-columns:.95fr 1.05fr}

.split img{border-radius:var(--radius);box-shadow:var(--shadow)}

.figure{position:relative}

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

/* ---------- feature list ---------- */
.checks{list-style:none;padding:0;margin:0 0 1.4em}

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

.checks li::before{content:"";position:absolute;left:0;top:.58em;width:15px;height:8px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg)}

/* ---------- credential chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0}

.chips li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-size:.9rem;font-weight:500;color:var(--ink);margin:0}

.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}

/* ---------- monogram (stands in until the client photo arrives) ---------- */
.monogram{width:210px;height:210px;border-radius:50%;flex:0 0 210px;
  background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 44px rgba(5,39,92,.18)}

.monogram img,.split .monogram img{width:66%;height:auto;display:block;border-radius:0;box-shadow:none}

.monogram-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}

.monogram-wrap .who{font-weight:600;color:var(--ink)}

.monogram-wrap .who span{display:block;font-weight:400;color:var(--muted);font-size:.9rem}

/* ---------- reviews slot ---------- */
.reviews-slot:empty{display:none}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}

.areas li{background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:10px 16px;font-size:.92rem;color:var(--ink);margin:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:84px 0}

.cta-band .container{position:relative;z-index:3}

.cta-band h2{color:#fff}

.cta-band p{color:#e6eef9;margin-bottom:1.8em}

.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.field{display:flex;flex-direction:column;gap:7px}

.field.full{grid-column:1/-1}

.field label{font-size:.88rem;font-weight:600;color:var(--ink)}

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

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

.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline:none;
  box-shadow:0 0 0 3px rgba(0,74,173,.18)}

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

/* ---------- embed slots ---------- */
.embed-slot{border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);
  min-height:460px;display:flex;align-items:center;justify-content:center;padding:34px;text-align:center}

.embed-slot p{color:var(--muted);margin:0;max-width:34ch}

.map-slot{min-height:300px}

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

.nap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 22px;align-items:baseline}

.nap dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.nap dd{margin:0;color:var(--ink);font-weight:500}

.nap dd a{color:var(--ink)}

.nap dd a:hover{color:var(--brand)}

.nap .fine{font-size:.85rem;color:var(--muted);font-weight:400;display:block;margin-top:4px}

/* ---------- legal pages ---------- */
.legal h2{margin-top:2.2em;font-size:1.5rem}

.legal h3{margin-top:1.6em;font-size:1.12rem}

.legal .updated{color:var(--muted);font-size:.92rem;margin-bottom:2.4em}

/* ---------- footer ---------- */
.footer{background:var(--dark-2);color:#dce6f4;padding:74px 0 0;font-size:.95rem;border-top:1px solid rgba(173,203,242,.14)}

.footer a{color:#dce6f4}

.footer a:hover{color:#fff}

.footer h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:Inter,sans-serif;font-weight:600;margin-bottom:18px}

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

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

.footer ul li{margin-bottom:.6em}

.footer .f-logo{display:block;width:250px;max-width:100%;height:auto;margin-left:-8px}

.footer .f-about{color:#bacbe4;margin-top:18px;max-width:34ch}

.footer .f-social{display:flex;gap:6px;margin-top:20px}

.footer .f-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:8px;background:rgba(255,255,255,.08);color:#e6eef9}

.footer .f-social a:hover{background:rgba(167,230,110,.30);color:#fff}

.footer .f-social svg{width:16px;height:16px;fill:currentColor}

.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:56px;padding:24px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:.86rem;color:#a8bbda}

.footer-bottom a{color:#a8bbda}

.footer-legal{display:flex;flex-wrap:wrap;gap:18px}

.f-creds{color:#b3c5e2;font-size:.86rem;margin-top:14px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split.rev{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
}

@media (max-width:820px){
  body{font-size:16.5px}
  .section{padding:64px 0}
  .nav-toggle{display:block;order:3}
  .nav .container{flex-wrap:wrap;gap:14px}
  .nav-links{order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;display:none;
    border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links li:last-child{border-bottom:0}
  .nav-links a{display:block;padding:14px 2px}
  .nav.open .nav-links{display:flex}
  .nav .btn-primary{order:2;padding:11px 18px;font-size:.9rem}
  .hero{min-height:auto;padding:72px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .nap dl{grid-template-columns:1fr;gap:4px}
  .nap dd{margin-bottom:14px}
  .monogram{width:164px;height:164px;flex-basis:164px}
  .brand-logo{height:26px}
  .nav.scrolled .brand-logo{height:24px}
  .footer-grid{grid-template-columns:1fr}
}

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

/* ── 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: #05275c; 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: #05275c; 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: #05275c; 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: #05275c; text-decoration: none; }
.tp-meta { color: rgba(0,0,0,.5); font-size: .85rem; margin: 0 0 10px; }
.tp-readmore { color: #a7e66e; 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: #05275c; text-decoration: none; }
.tp-pagination .page-numbers.current { background: #05275c; 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}
}