/* ==========================================================================
   Babcock Insurance & Financial Group — Brand True (Navy)
   Locked direction: Georgia / Helvetica Neue system stack, navy #0F2D49 on white.
   System fonts only -> no webfont fetch, no FOUT (BUILD-STANDARDS §6b satisfied).
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#F5F6F8;
  --surface-2:#EDEFF3;
  --ink:#14273F;
  --ink-soft:#5E6A7A;
  --accent:#0F2D49;          /* the real Babcock logo navy */
  --accent-2:#1C4E80;        /* lighter brand blue — links + hover state of the navy CTA */
  --accent-on:#FFFFFF;
  --gold:#B8862F;            /* restrained warm accent (heritage nod, used sparingly) — decorative marks + text on DARK */
  --gold-deep:#835F08;       /* darker gold for accent TEXT on white (WCAG AA: 5.8:1 vs #B8862F's 3.2:1) */
  --line:rgba(20,39,63,.12);
  --radius:4px;
  --nav-h:76px;

  --font-heading:Georgia,'Times New Roman',serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;

  --pad-section:clamp(48px,7vw,96px);
  --wrap:1160px;
  --gap:clamp(20px,3vw,28px);

  --shadow-sm:0 1px 2px rgba(20,39,63,.06),0 2px 8px rgba(20,39,63,.06);
  --shadow-md:0 6px 24px rgba(20,39,63,.10);
  --shadow-lg:0 18px 50px rgba(15,45,73,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}                 /* P-007: smooth ANCHOR scroll only (native wheel, no inertia) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--accent-2); text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-heading); color:var(--ink); font-weight:700; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; margin:0}
/* Editorial italic accent word in hero/subhero H1s. Kept the SAME color as the
   headline (white over photo/navy) to honor the one-accent-color restraint rule;
   the shift is style, not hue. Georgia has a true italic. */
.hero h1 em,.subhero h1 em{font-style:italic; font-weight:inherit; color:inherit; letter-spacing:0}
.nowrap{white-space:nowrap}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:1000; background:var(--accent); color:#fff; padding:10px 16px; border-radius:var(--radius)}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:4px}

/* The brand navy (--accent #0F2D49) is the site's accent: eyebrows carry a short
   leading rule in it. On dark sections navy can't be seen, so those revert to a
   light neutral rather than introducing a second hue. */
.eyebrow{display:inline-flex; align-items:center; gap:11px; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--accent)}
.eyebrow::before{content:""; width:24px; height:2px; background:var(--accent); border-radius:2px; flex-shrink:0}
.section{padding-block:var(--pad-section)}
.section--tint{background:var(--surface)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body); font-weight:700; font-size:1rem; line-height:1; padding:15px 26px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; text-align:center; touch-action:manipulation; transition:transform .12s ease, background .18s ease, color .18s ease, box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent); color:var(--accent-on); border-color:var(--accent); box-shadow:0 3px 10px rgba(15,45,73,.16)}
.btn--primary:hover{background:var(--accent-2); border-color:var(--accent-2); color:#fff; box-shadow:0 10px 26px rgba(15,45,73,.30)}
.btn--onlight{background:var(--accent); color:#fff}
/* Primary CTA is the brand navy everywhere, including over the hero/subhero. Because
   navy-on-navy would lose its shape, the dark-section primary carries a hairline
   light edge + a soft drop shadow so the button still reads. */
.btn--light{background:var(--accent); color:#fff; border-color:rgba(255,255,255,.45); box-shadow:0 8px 24px rgba(0,0,0,.34)}
.btn--light:hover{background:var(--accent-2); color:#fff; border-color:rgba(255,255,255,.8)}
/* secondary CTA on dark sections: light outline, so it reads as the quieter half of the pair */
.btn--ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.2); border-color:#fff; color:#fff}
.btn--ghostdark{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn--ghostdark:hover{background:var(--accent); color:#fff}
.btn--lg{padding:17px 32px; font-size:1.05rem}
/* hero secondary CTA: fully transparent — the milky fill was washing out the white
   phone number. Legibility comes from the border + a text shadow instead. */
.btn--heroline{background:transparent; color:#fff; border-color:rgba(255,255,255,.6); text-shadow:0 1px 10px rgba(0,0,0,.6)}
.btn--heroline:hover{background:rgba(255,255,255,.16); border-color:#fff; color:#fff}

/* ==========================================================================
   Header (P-003: transparent over hero -> solid white on scroll)
   ========================================================================== */
.site-header{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; transition:background .3s ease, box-shadow .3s ease, height .3s ease;
  padding-top:env(safe-area-inset-top)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0}
/* Logo art is knocked out of its navy rectangle, so the mark sits directly on the
   page: the white lockup over the hero, the navy lockup once the header goes solid. */
.brand img{height:44px; width:auto}
.brand__mark--dark{display:none}
.site-header.is-solid .brand__mark--light{display:none}
.site-header.is-solid .brand__mark--dark{display:block}
.nav{display:flex; align-items:center; gap:2px}
.nav a{color:#fff; font-family:var(--font-body); font-weight:600; font-size:.96rem; padding:10px 11px; border-radius:var(--radius); white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,.45); transition:color .2s ease, background .2s ease, opacity .2s}
.nav a:hover{opacity:.85}
.nav .util{font-size:.86rem; opacity:.9}
.header-phone-ico{width:15px;height:15px;fill:currentColor}
.lock-ico{width:13px; height:13px; flex-shrink:0}
/* Client portal = a UTILITY action, not a button. It reads as a quiet icon-led
   link set off by a hairline divider, closing out the right side of the nav. */
.nav a.client-login{display:inline-flex; align-items:center; gap:.4em; font-weight:600; font-size:.82rem; letter-spacing:.01em;
  padding:8px 0 8px 16px; margin-left:10px; margin-right:4px; border-left:1px solid rgba(255,255,255,.28);
  border-radius:0; color:rgba(255,255,255,.82); opacity:1}
.nav a.client-login:hover{opacity:1; background:transparent; color:#fff}
.nav a.client-login .lock-ico{opacity:.85}
.site-header.is-solid .nav a.client-login{color:var(--ink-soft); border-left-color:var(--line); text-shadow:none}
.site-header.is-solid .nav a.client-login:hover{color:var(--accent)}

/* scrolled / solid state */
.site-header.is-solid{background:#fff; box-shadow:0 1px 0 var(--line),0 6px 24px rgba(20,39,63,.06); height:66px}
.site-header.is-solid .nav a{color:var(--ink); text-shadow:none}
.site-header.is-solid .nav a:hover{color:var(--accent)}
.site-header.is-solid .brand .wordmark{color:var(--ink)}

/* Services dropdown (§7a) */
.has-dropdown{position:relative}
.has-dropdown>a::after{content:"▾"; font-size:.7em; margin-left:.35em; opacity:.8}
.has-dropdown::after{content:""; position:absolute; left:0; right:0; top:100%; height:18px} /* hover bridge */
.dropdown{position:absolute; left:0; top:calc(100% + 12px); min-width:280px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:70}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown a{display:flex; flex-direction:column; gap:2px; color:var(--ink)!important; text-shadow:none!important; padding:10px 12px; border-radius:6px}
.dropdown a:hover{background:var(--surface)}
.dropdown .d-t{font-weight:700; font-size:.98rem}
.dropdown .d-d{font-size:.82rem; color:var(--ink-soft); font-weight:400}

/* mobile nav toggle */
.nav-toggle{display:none; background:transparent; border:0; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; touch-action:manipulation}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block; width:24px; height:2px; background:#fff; position:relative; transition:.25s}
.site-header.is-solid .nav-toggle span,.site-header.is-solid .nav-toggle span::before,.site-header.is-solid .nav-toggle span::after{background:var(--ink)}
.nav-toggle span::before{position:absolute; top:-7px}
.nav-toggle span::after{position:absolute; top:7px}

/* ==========================================================================
   Hero (P-011 full-bleed, P-001 entrance, P-010 parallax, P-002 legibility)
   ========================================================================== */
.hero{position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; overflow:hidden; isolation:isolate;
  background:#0a1f33 url('assets/images/hero-stl-poster.webp') center 42% / cover}
/* Cinematic St. Louis metro video. The poster IS the video's exact first frame and
   shares the same object-position, so it simply comes to life in place: playback
   begins from that frame with no crossfade and no shift. */
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:-2}
@media (prefers-reduced-motion:reduce){ .hero__video{display:none} }
/* Mobile gets a smaller art-directed poster (the .hero background); the video enriches desktop only. */
@media (max-width:768px){ .hero{background-image:url('assets/images/hero-stl-poster-mobile.webp'); background-position:50% 38%} .hero__video{display:none} }
/* Directional scrim: darkens the LEFT (where the copy sits) and lets the skyline show on the right. */
.hero__scrim{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(9,26,44,.84) 0%, rgba(9,26,44,.60) 34%, rgba(9,26,44,.26) 64%, rgba(9,26,44,.10) 100%),
    linear-gradient(0deg, rgba(9,26,44,.5) 0%, rgba(9,26,44,.08) 32%, rgba(9,26,44,0) 60%);}
.hero .wrap{position:relative; z-index:1; padding-top:calc(var(--nav-h) + 3vh); padding-bottom:6vh; width:100%}
.hero__inner{max-width:760px}
.hero .eyebrow{color:#cdd8e6; display:inline-flex; margin-bottom:18px; text-shadow:0 1px 10px rgba(0,0,0,.75)}
.hero .eyebrow::before{background:#cdd8e6}
.hero h1{color:#fff; font-size:clamp(2.15rem,4.5vw,3.55rem); line-height:1.07; letter-spacing:-.02em; text-shadow:0 2px 22px rgba(0,0,0,.45); margin:0; max-width:19ch}
.hero p.lead{color:#e7edf4; font-size:clamp(1.08rem,1.7vw,1.3rem); line-height:1.55; max-width:34em; margin:22px 0 0; text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero__trust{display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); color:#dce4ee; font-size:.98rem}
.hero__trust b{color:#fff}
.hero__trust .star{color:#ffd27a}
.hero__trust span{display:inline-flex; align-items:center; gap:.5em; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero__verify{display:inline-flex; align-items:center; gap:.4em; color:#dce4ee; font-weight:600; font-size:.9rem; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.4); text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero__verify:hover{color:#fff; text-decoration-color:#fff}
.hero__verify svg{width:14px; height:14px}
/* emphasis goal-words in the H1: white Georgia italic (style shift, not hue) per the one-accent-color restraint rule in the locked direction */
/* .hero-em is the ANIMATION group (word + its punctuation, and "and" on the last one)
   so each phrase arrives complete instead of leaving gaps that fill in later.
   The italic accent styling lives on the <em> inside it. */
.hero h1 .hero-em{display:inline-block}

/* P-001 cinematic entrance */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow{animation:riseIn .8s .15s both}
  .hero h1{animation:riseIn .9s .28s both}
  .hero p.lead{animation:riseIn .9s .42s both}
  .hero__cta{animation:riseIn .9s .56s both}
  .hero__trust{animation:riseIn .9s .7s both}
  /* the three gold goal-words focus in, staggered, after the headline settles */
  .hero h1 .hero-em{opacity:0; transform:translateY(.35em); filter:blur(8px); animation:heroEmIn 1.7s cubic-bezier(.22,.78,.32,1) both; animation-delay:calc(var(--d,0)*480ms + 760ms)}
}
@keyframes riseIn{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)}}
@keyframes heroEmIn{from{opacity:0; transform:translateY(.55em); filter:blur(9px)} to{opacity:1; transform:none; filter:blur(0)}}

/* ==========================================================================
   Credential ribbon
   ========================================================================== */
.creds{background:var(--accent); color:#fff}
.creds .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding-block:20px}
.cred{display:inline-flex; align-items:center; gap:.5em; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius); padding:9px 15px; font-size:.9rem; font-weight:600; color:#eaf1f8; background:rgba(255,255,255,.05)}
.cred .star{color:#ffd27a}
.cred b{color:#fff}
.cred .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ==========================================================================
   Section header (centered, width-constrained §7b-3)
   ========================================================================== */
.sec-head{max-width:760px; margin:0 auto clamp(28px,4vw,44px); text-align:center}
.sec-head .eyebrow{display:inline-flex; margin-bottom:14px}
.sec-head .eyebrow::before{display:none}   /* centered eyebrow: drop the leading rule; the accent is the gold rule under the heading */
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.sec-head h2::after{content:""; display:block; width:46px; height:3px; background:var(--accent); border-radius:2px; margin:16px auto 0}
.sec-head p{color:var(--ink-soft); font-size:1.1rem; margin:14px auto 0; max-width:56ch}

/* ---- services (segmented) ---- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.svc{background:#fff; border:1px solid var(--line); border-radius:8px; padding:32px 28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease, border-color .22s}
.svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(15,45,73,.28)}
.svc__ic{width:52px; height:52px; border-radius:10px; background:linear-gradient(150deg,var(--accent),var(--accent-2)); display:grid; place-items:center; margin-bottom:18px; color:#fff;
  box-shadow:0 8px 18px rgba(15,45,73,.22), 0 0 0 4px rgba(28,78,128,.08)}  /* depth: drop shadow + soft accent ring (W4 4.8) */
.svc:hover .svc__ic{box-shadow:0 12px 26px rgba(15,45,73,.30), 0 0 0 5px rgba(28,78,128,.12)}
.svc__ic svg{width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.7}
.svc h3{font-size:1.42rem; margin-bottom:10px}
.svc p{color:var(--ink-soft); font-size:1rem; margin-bottom:18px}
.svc__list{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:8px}
.svc__list li{font-size:.95rem; color:var(--ink); padding-left:24px; position:relative}
.svc__list li::before{content:"✓"; position:absolute; left:0; color:var(--accent-2); font-weight:700}
.svc__link{margin-top:auto; font-weight:700; color:var(--accent-2); display:inline-flex; align-items:center; gap:.4em}
.svc__link:hover{gap:.7em; color:var(--accent)}

/* ---- why independent (compare) ---- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); max-width:960px; margin-inline:auto}
.compare__col{background:#fff; border:1px solid var(--line); border-radius:8px; padding:30px 28px}
.compare__col h3{font-size:1.18rem; margin-bottom:16px; font-family:var(--font-body); font-weight:700; letter-spacing:0}
.compare__col ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.compare__col li{position:relative; padding-left:28px; color:var(--ink-soft); line-height:1.5}
.compare__them li::before{content:"✕"; position:absolute; left:0; top:0; color:#b0879a; font-weight:700}
.compare__us{background:var(--accent); color:#fff; border-color:var(--accent)}
.compare__us h3{color:#fff}
.compare__us li{color:#dbe6f1}
.compare__us li::before{content:"✓"; position:absolute; left:0; top:0; color:#ffd27a; font-weight:700}

/* ---- family band ---- */
.family{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; max-width:1000px; margin-inline:auto}
.family__copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px}
.family__copy p{color:var(--ink-soft); font-size:1.08rem}
.family__faces{display:flex; gap:22px; justify-content:center}
.face{text-align:center}
.family__faces .face{flex:0 0 auto}  /* never let the flex row shrink a face into an oval (shorter caption used to squish Mike's) */
.face img{width:150px; height:150px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:var(--shadow-md), 0 0 0 1px rgba(15,45,73,.10); margin-inline:auto}  /* white inner ring + hairline navy outer ring + drop glow (W4 4.6) */
/* Collapse the family band to a single column on tablet/phone. Without this the
   two 150px face images hold the right track open and push the section ~37px
   past the viewport, clipping Michael's photo under body{overflow-x:hidden}. */
@media (max-width:760px){ .family{grid-template-columns:minmax(0,1fr); gap:30px} .family__copy,.family__faces{min-width:0} .family__faces{justify-content:flex-start; flex-wrap:wrap} }
.face .nm{display:block; font-family:var(--font-heading); font-weight:700; font-size:1.1rem; margin-top:14px; color:var(--ink)}
.face .rl{display:block; font-size:.85rem; color:var(--ink-soft)}

/* ---- Stat row (editorial "by the numbers": Georgia display numerals + gold accent bar + small label) ---- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); max-width:900px; margin-inline:auto; text-align:center}
.stat__bar{width:34px; height:3px; background:var(--gold); border-radius:2px; margin:0 auto 16px}
.stat__num{font-family:var(--font-heading); font-weight:700; color:var(--accent); font-size:clamp(2.6rem,5.2vw,3.7rem); line-height:1; letter-spacing:-.02em}
.stat__label{margin-top:12px; font-size:.96rem; color:var(--ink-soft); line-height:1.45; max-width:22ch; margin-inline:auto}
@media (max-width:620px){ .stat-row{grid-template-columns:1fr; gap:28px; max-width:340px} }

/* ---- reviews (centered row of 3, §7b-4) ---- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.reviews:has(> .review:only-child){grid-template-columns:minmax(0,620px); justify-content:center}
.review{background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px 26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.review__stars{color:#e6a935; letter-spacing:2px; font-size:1rem; margin-bottom:12px}
.review__text{font-size:1.02rem; line-height:1.6; color:var(--ink); margin-bottom:18px}
.review__by{margin-top:auto; font-size:.92rem; color:var(--ink-soft)}
.review__by b{color:var(--ink)}
.reviews-cta{text-align:center; margin-top:36px}
.agg-strip{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:center; margin:0 auto 34px; color:var(--ink-soft); font-size:1rem}
.agg-strip b{color:var(--ink)} .agg-strip .star{color:#e6a935}

/* P-004 pull-quote reveal */
.pullquote{max-width:900px; margin:0 auto; text-align:center; padding-block:clamp(16px,3vw,28px)}
.pullquote blockquote{font-family:var(--font-heading); font-style:italic; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.34; color:var(--accent); margin:0; text-wrap:balance}
.pullquote cite{display:block; margin-top:18px; font-style:normal; font-size:1rem; color:var(--ink-soft)}
.pullquote cite b{color:var(--ink)}

/* ---- FAQ (centered §7b) ---- */
.faq-wrap{max-width:800px; margin-inline:auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none; cursor:pointer; padding:22px 44px 22px 4px; position:relative; font-family:var(--font-heading); font-weight:700; font-size:1.18rem; color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:grid; place-items:center; border:2px solid var(--accent-2); border-radius:50%; font-size:1.3rem; line-height:1; color:var(--accent-2); font-family:var(--font-body); transition:background .22s ease, color .22s ease, border-color .22s ease}
.faq-item[open] summary::after{content:"–"; background:var(--accent-2); border-color:var(--accent-2); color:#fff}
.faq-item__a{padding:0 4px 24px; color:var(--ink-soft); font-size:1.03rem; line-height:1.6}
.faq-item__a p:last-child{margin-bottom:0}

/* ---- closer ---- */
.closer{background:linear-gradient(160deg,var(--accent) 0%,#0a2138 100%); color:#fff; text-align:center; border-radius:14px; padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px); max-width:1000px; margin-inline:auto; box-shadow:var(--shadow-lg)}
.closer h2{color:#fff; font-size:clamp(1.9rem,3.6vw,2.8rem)}
.closer p{color:#d7e1ec; font-size:1.15rem; max-width:52ch; margin:16px auto 28px}
.closer__cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.closer__phone{font-family:var(--font-heading); font-weight:700; color:#fff; font-size:1.35rem; display:inline-flex; align-items:center; gap:.4em; margin-top:6px}
/* Wave 7 (7.4): real trust signal within reach of every closer CTA (mirrors the hero trust strip) */
.closer__trust{margin:22px auto 0; font-size:.92rem; color:#c8d3e0; letter-spacing:.01em; max-width:60ch}
.closer__trust .star{color:#ffd27a; font-style:normal}
.closer__trust b{color:#fff; font-weight:700}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:#0b1c30; color:#c3cede; padding-block:clamp(44px,6vw,68px) 28px; font-size:.95rem}
.foot-grid{display:grid; grid-template-columns:1.35fr 1fr 1.5fr 1.15fr; gap:clamp(24px,4vw,48px)}
.site-footer .foot-title{color:var(--gold); font-family:var(--font-body); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px}
.site-footer a{color:#c3cede} .site-footer a:hover{color:#fff}
.foot-brand img{height:42px; width:auto; border-radius:5px; margin-bottom:14px}
.foot-list{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.foot-list--2col{grid-template-columns:1fr 1fr; gap:9px 22px}          /* Company column runs two-up so the footer isn't a tall single stack */
@media (max-width:520px){ .foot-list--2col{grid-template-columns:1fr} }
/* premium client-portal callout (footer) — a deliberate account entry, not a link in the list */
.foot-login{display:inline-flex; align-items:center; gap:11px; margin-top:16px; padding:11px 15px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(255,255,255,.03); transition:border-color .2s ease, background .2s ease}
.foot-login:hover{border-color:var(--gold); background:rgba(255,255,255,.06)}
.foot-login__ic{width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:8px; background:rgba(184,134,47,.16); color:var(--gold)}
.foot-login__ic svg{width:17px; height:17px}
.foot-login__tx{display:flex; flex-direction:column; line-height:1.3}
.foot-login__tx b{color:#fff; font-size:.95rem; font-weight:700}
.foot-login__tx span{color:#8ea4bd; font-size:.82rem}
.foot-login:hover .foot-login__tx span{color:#c3cede}
.foot-nap{font-style:normal; line-height:1.8}
.foot-nap a{color:#fff; font-weight:600}
.foot-disc{font-size:.8rem; color:#8b99ac; line-height:1.6; margin-top:22px; border-top:1px solid rgba(255,255,255,.1); padding-top:18px}
.foot-bottom{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center; margin-top:22px; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; font-size:.85rem; color:#8b99ac}
.foot-bottom a.lc{color:#7fb2e6; font-weight:700; text-decoration:underline}
.foot-bottom a.lc:hover{color:#a9cef0}
.foot-legal a{color:#8b99ac; margin-left:14px}

/* ==========================================================================
   Mobile call bar (§7a — hidden on load, reveals on scroll; safe-area)
   ========================================================================== */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  grid-template-columns:1fr 1fr; gap:10px; align-items:center;
  background:var(--accent); padding:12px 16px; padding-bottom:max(14px,env(safe-area-inset-bottom));
  box-shadow:0 48px 0 0 var(--accent), 0 -6px 24px rgba(0,0,0,.18);
  transform:translateY(calc(100% + 48px + env(safe-area-inset-bottom,0px))); transition:transform .3s ease}
.callbar.is-visible{transform:translateY(0)}
.callbar .btn{width:100%; justify-content:center; padding:14px 12px}
.callbar .btn--callnow{background:#fff; color:var(--accent); border-color:#fff}
.callbar .btn--quote{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}

/* ==========================================================================
   Scroll-reveal (P-008 fade + rise)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* ==========================================================================
   Mobile drawer + responsive
   ========================================================================== */
.drawer{position:fixed; left:0; right:0; top:var(--drawer-top,66px); bottom:0; z-index:58; background:#fff; padding:12px 20px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; overscroll-behavior:contain; transform:translateX(100%); transition:transform .3s ease; display:none}
.drawer.is-open{transform:translateX(0)}
.drawer a{display:block; color:var(--ink); font-size:1.15rem; font-weight:600; padding:15px 6px; border-bottom:1px solid var(--line)}
.drawer .d-sub{font-size:.95rem; color:var(--ink-soft); font-weight:400; padding-left:18px}
.drawer .drawer-call{margin-top:22px}
.drawer .drawer-call .btn{width:100%; justify-content:center}
.drawer .drawer-call .client-login--drawer{display:inline-flex; align-items:center; justify-content:center; gap:.5em; width:100%; margin-top:12px; padding:13px; border:1px solid var(--line); border-radius:var(--radius); color:var(--accent); font-size:1rem; font-weight:700}
.drawer .drawer-call .client-login--drawer:hover{background:var(--surface)}

@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .family{grid-template-columns:1fr; text-align:center}
  .family__copy{order:2}
}
@media (max-width:820px){
  .svc-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
  .compare{grid-template-columns:1fr; max-width:480px}
  .reviews{grid-template-columns:1fr; max-width:460px; margin-inline:auto}
}
@media (max-width:940px){
  .nav{display:none}
    .nav-toggle{display:inline-flex}
  .drawer{display:block}
  .site-header.is-open{background:#fff; box-shadow:0 1px 0 var(--line)}
  .site-header.is-open .nav-toggle span,.site-header.is-open .nav-toggle span::before,.site-header.is-open .nav-toggle span::after{background:var(--ink)}
  .site-header.is-open ~ .callbar{transform:translateY(120%)}
}
@media (max-width:760px){
  .callbar{display:grid}
  .foot-grid{grid-template-columns:1fr}
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))} /* footer clears the dock, §7a */
}
@media (max-width:560px){
  .hero__cta,.closer__cta{display:grid; grid-template-columns:max-content; gap:12px} /* §7b-5 uniform stacked width */
  .hero__cta{justify-content:flex-start}
  .closer__cta{justify-content:center}
  .family__faces{gap:16px}
  .face img{width:120px;height:120px}
  /* Pin hero/subhero display type to fixed rem on phones. The clamp() floor
     already governs real devices; fixing it here removes any dependence on how
     `vw` resolves (some capture tools measure vw off a wider layout viewport)
     and guarantees the headline wraps inside the viewport, never clipping. */
  .hero h1{font-size:2.3rem; line-height:1.08}
  .hero p.lead{font-size:1.05rem}
  .subhero h1{font-size:1.95rem}
  .subhero p{font-size:1.03rem}
  .hero h1,.subhero h1,.hero p.lead,.subhero p{overflow-wrap:break-word}
}
@media (hover:hover){ /* keep hover effects off touch (§7c #4) — already scoped where it matters */ }

/* ---- Print (§L: hide sticky/nav chrome, dark backgrounds) ---- */
@media print{
  .site-header,.callbar,.drawer,.hero__video,.hero__scrim,.nav-toggle{display:none!important}
  .hero,.subhero{min-height:auto!important;height:auto!important;background:#fff!important;color:#000!important;padding-top:20px!important}
  .hero h1,.subhero h1,.hero p,.subhero p,.hero .eyebrow,.subhero .eyebrow{color:#000!important;text-shadow:none!important}
  .closer{background:#fff!important;color:#000!important;box-shadow:none!important}
  .closer h2,.closer p{color:#000!important}
  a{color:#000!important;text-decoration:underline}
  .reveal{opacity:1!important;transform:none!important}
  body{font-size:12pt}
}

/* ---- Footer "Last updated" (§4d freshness) ---- */
.foot-updated{font-size:12px;color:#8b99ac;margin-top:2px}

/* ==========================================================================
   INTERIOR-PAGE PATTERNS (inherited by every non-home page)
   ========================================================================== */

/* ---- Multi-column dropdown (§7a: 6+ items break into columns) ---- */
.dropdown--2col{min-width:440px; display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(3,auto); gap:2px 6px; position:absolute}
.dropdown--2col::before{content:""; position:absolute; left:50%; top:12px; bottom:12px; width:1px; background:var(--line); transform:translateX(-.5px)}

/* ---- Interior sub-hero (navy band; header stays transparent over it, P-003) ---- */
.subhero{position:relative; background:linear-gradient(155deg,#0f2d49 0%,#0a2138 100%); color:#fff; overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(34px,6vw,64px)); padding-bottom:clamp(34px,6vw,60px)}
.subhero::after{content:""; position:absolute; inset:0; background:radial-gradient(90% 120% at 85% 15%, rgba(28,78,128,.35) 0%, rgba(10,33,56,0) 60%); pointer-events:none}
.subhero .wrap{position:relative; z-index:1}
.subhero .eyebrow{color:#9db4cc; display:inline-flex; margin-bottom:12px}
.subhero .eyebrow::before{background:#9db4cc}
.subhero h1{color:#fff; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; max-width:20ch}
.subhero p{color:#d7e1ec; font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.55; max-width:54ch; margin:16px 0 0}
.subhero__cta{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:560px){ .subhero__cta{display:grid; grid-template-columns:max-content; gap:12px} }
/* Statement hero cadence for the brand/manifesto pages (mission, values, process, about):
   a deliberately larger, tighter H1 + more top air + a left-origin glow, so a "why we do
   this" statement page reads differently from a "get a quote" service page. This is the
   site's third hero rhythm (Wave 5 §5.3), within the locked navy/serif/gold system. */
.subhero--statement{padding-top:calc(var(--nav-h) + clamp(48px,8vw,90px))}
.subhero--statement::after{background:radial-gradient(80% 120% at 16% 22%, rgba(28,78,128,.40) 0%, rgba(10,33,56,0) 62%)}
.subhero--statement h1{font-size:clamp(2.3rem,5.2vw,4rem); max-width:16ch; letter-spacing:-.015em}
.subhero--statement p{max-width:50ch}
@media (max-width:560px){ .subhero--statement h1{font-size:2.15rem} }

/* ---- Breadcrumb-free page: answer-first lead capsule band ---- */
.answer{max-width:820px}
.answer h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.answer p{color:var(--ink-soft); font-size:1.12rem; margin-top:14px}
.cite{font-size:.92rem; color:var(--ink-soft); margin-top:12px}
.cite a{color:var(--accent-2); text-decoration:underline}

/* ---- Editorial prose (legal, mission, values intro, long copy) ---- */
.prose{max-width:760px; margin-inline:auto}
/* Handwritten founder sign-off (About). System cursive stack only — no webfont,
   honors §6b self-hosted-fonts; a typographic flourish, not a forged autograph. */
.prose p.signature-script{font-family:'Snell Roundhand','Segoe Script','Brush Script MT','Apple Chancery',cursive; font-weight:400; font-size:clamp(1.9rem,5vw,2.55rem); line-height:1.15; color:var(--accent); margin-top:22px; overflow-wrap:break-word}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:36px 0 12px}
.prose h3{font-size:1.25rem; margin:26px 0 10px}
.prose p,.prose li{color:var(--ink-soft); font-size:1.05rem; line-height:1.7}
.prose ul,.prose ol{padding-left:22px; margin:0 0 16px}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent-2); text-decoration:underline}
.prose strong{color:var(--ink)}
.prose .updated{font-size:.9rem; color:var(--ink-soft); margin-bottom:8px}

/* ---- Two-column service layout (prose beside an aside) ---- */
.svc-layout{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,52px); align-items:start}
.svc-layout .aside{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px 24px; position:sticky; top:90px}
.svc-layout .aside h3{font-family:var(--font-body); font-weight:700; font-size:1.05rem; margin-bottom:12px}
.svc-layout .aside .btn{width:100%; justify-content:center; margin-top:6px}
.svc-layout .aside .phone{display:block; text-align:center; margin-top:12px; font-family:var(--font-heading); font-weight:700; font-size:1.2rem; color:var(--ink)}
@media (max-width:820px){ .svc-layout{grid-template-columns:1fr} .svc-layout .aside{position:static} }

/* coverage checklist (service pages) */
.cover-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin:8px 0 4px}
.cover-grid li{list-style:none; padding-left:28px; position:relative; color:var(--ink); line-height:1.5}
.cover-grid li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--accent-2); font-weight:700}
.cover-grid li b{display:block}
.cover-grid li span{color:var(--ink-soft); font-size:.95rem}
@media (max-width:560px){ .cover-grid{grid-template-columns:1fr} }

/* ---- Process steps (/our-process) ---- */
.steps{display:grid; gap:18px; max-width:820px; margin-inline:auto; counter-reset:step}
.step{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 26px; box-shadow:var(--shadow-sm)}
.step__n{counter-increment:step; width:46px; height:46px; border-radius:50%; background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff; display:grid; place-items:center; font-family:var(--font-heading); font-weight:700; font-size:1.2rem;
  box-shadow:0 8px 18px rgba(15,45,73,.22), 0 0 0 4px rgba(28,78,128,.08)}  /* matches svc icon depth (W4 4.8) */
.step__n::before{content:counter(step)}
.step h3{font-size:1.25rem; margin-bottom:6px}
.step p{color:var(--ink-soft); margin:0}

/* ---- Values grid (/our-values) ---- */
.values-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); max-width:960px; margin-inline:auto}
.value{background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:26px 26px; box-shadow:var(--shadow-sm)}
.value h3{font-size:1.3rem; margin-bottom:8px}
.value p{color:var(--ink-soft); margin:0}
@media (max-width:720px){ .values-grid{grid-template-columns:1fr; max-width:520px} }

/* ---- Team grid (/team) ---- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.tcard{background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 24px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.tcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(15,45,73,.28)}
.tcard img{width:130px; height:130px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; margin:0 auto 16px; border:4px solid #fff; box-shadow:var(--shadow-md), 0 0 0 1px rgba(15,45,73,.10); transition:transform .3s ease}  /* white inner ring + hairline navy outer ring + drop glow (W4 4.6) */
.tcard:hover img{transform:scale(1.05)}
.tcard .nm{font-family:var(--font-heading); font-weight:700; font-size:1.28rem}
.tcard .rl{color:var(--accent-2); font-weight:600; font-size:.92rem; margin-top:2px}
.tcard p{color:var(--ink-soft); font-size:.95rem; margin:12px 0 14px}
.tcard .tlinks{display:flex; gap:14px; justify-content:center; font-size:.9rem}
.tcard .tlinks a{display:inline-flex; align-items:center; gap:.4em}
.tcard .tlinks svg{width:15px; height:15px; flex-shrink:0}
.tcard .tlinks .li-ico{fill:currentColor}
/* Owners get no special bar — they read the same as the rest of the team. */
.tcard.owner{grid-column:span 1}
@media (max-width:820px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .team-grid{grid-template-columns:1fr; max-width:360px; margin-inline:auto} }

/* ---- Contact form ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start}
.contact-info .row{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px}
.contact-info .ic{width:44px; height:44px; border-radius:10px; background:var(--surface); color:var(--accent); display:grid; place-items:center; flex-shrink:0}
.contact-info .ic svg{width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.8}
.contact-info .row b{display:block; color:var(--ink)}
.contact-info .row a{font-size:1.15rem; font-weight:600}
.form{position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-md); overflow:hidden}
/* Wave 7 (7.1): tonal navy->brand-blue accent bar (deliberately NOT a loud multi-hue gradient, stays on Brand True) */
.form::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%)}
/* Wave 7 (7.1): expectation-setter block above the fields */
.form__promise{list-style:none; margin:2px 0 22px; padding:16px 18px; display:grid; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.form__promise li{position:relative; padding-left:26px; font-size:.95rem; line-height:1.35; color:var(--ink)}
.form__promise li::before{content:""; position:absolute; left:4px; top:2px; width:6px; height:11px; border:solid var(--accent-2); border-width:0 2px 2px 0; transform:rotate(45deg)}
.form .field{margin-bottom:16px}
.form label{display:block; font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:6px}
.form input,.form select,.form textarea{width:100%; font-family:var(--font-body); font-size:16px; padding:13px 14px; border:1px solid #c9d2dd; border-radius:var(--radius); background:#fff; color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.form textarea{min-height:120px; resize:vertical}
.form .btn{width:100%; justify-content:center; margin-top:6px}
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .consent{font-size:.82rem; color:var(--ink-soft); margin-top:12px}
.form-note{font-size:.9rem; margin-top:14px; padding:12px 14px; border-radius:var(--radius); display:none}
.form-note.ok{display:block; background:#e8f3ec; color:#1c5e37; border:1px solid #bfe0cd}
.form-note.err{display:block; background:#fbeaea; color:#8a2b2b; border:1px solid #eccaca}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }

/* ---- Simple CTA band (interior closers reuse .closer) + link list (resources) ---- */
.link-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); max-width:960px; margin-inline:auto}
.link-card{display:block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 26px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s}
.link-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(15,45,73,.28)}
.link-card h3{font-size:1.2rem; margin-bottom:6px; color:var(--ink)}
.link-card p{color:var(--ink-soft); font-size:.96rem; margin:0}
@media (max-width:640px){ .link-cards{grid-template-columns:1fr} }

/* ---- Legal pages ---- */
.legal-wrap{max-width:760px; margin-inline:auto}
.legal-wrap h2{font-size:clamp(1.3rem,2.4vw,1.7rem); margin:34px 0 10px}
.legal-wrap h3{font-size:1.14rem; margin:22px 0 8px}
.legal-wrap p,.legal-wrap li{color:var(--ink-soft); line-height:1.72; font-size:1.02rem}
.legal-wrap ul{padding-left:22px; margin:0 0 16px}
.legal-wrap li{margin-bottom:8px}
.legal-wrap a{color:var(--accent-2); text-decoration:underline}
.legal-wrap strong{color:var(--ink)}
.legal-meta{font-size:.9rem; color:var(--ink-soft); margin-bottom:24px}