/* ==========================================================================
   International Tax Relief — brand.css
   Shared design system for all pages. Direction: v2 "Cross-Border Authority".
   Palette + type sampled from the approved logo. Keep every page linking this
   file so the header, footer, buttons, and type stay identical site-wide.
   ========================================================================== */

:root{
  --navy:#14315F;
  --ink:#0C1B3A;
  --gold:#BE9440;
  --gold-soft:#d3b473;
  --maroon:#7A1E2B;
  --paper:#FAF6EC;
  --white:#FFFFFF;
  --ink-70:rgba(255,255,255,.72);
  --ink-55:rgba(255,255,255,.55);
  --serif:"Fraunces","Cormorant Garamond",Georgia,"Palatino Linotype",Palatino,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --edge:clamp(1.25rem,5vw,4.5rem);
  --maxw:1220px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:#1a2740;
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.01em;}
p{margin:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--edge);}

/* screen-reader-only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";
  width:34px;height:1px;
  background:var(--gold);
  display:inline-block;
  opacity:.9;
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.95rem 1.8rem;border-radius:2px;
  transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
  cursor:pointer;border:1px solid transparent;
}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 30px -12px rgba(190,148,64,.6);}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.34);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);}
.btn-outline-navy{background:transparent;color:var(--navy);border:1px solid rgba(20,49,95,.3);}
.btn-outline-navy:hover{border-color:var(--gold);color:var(--gold);}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.arrow{transition:transform .25s ease;}
.btn:hover .arrow{transform:translateX(3px);}

/* ============ HEADER ============ */
header{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid rgba(190,148,64,.30);
  box-shadow:0 10px 34px -20px rgba(12,27,58,.40);
}
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1.5rem;padding-bottom:1.5rem;gap:1.5rem;
}
.brand img{width:clamp(184px,20vw,240px);height:auto;}
nav.mainnav{display:flex;align-items:center;gap:2.2rem;}
nav.mainnav a{
  font-size:.82rem;font-weight:500;letter-spacing:.06em;
  color:#3c4a68;transition:color .2s ease;position:relative;
}
nav.mainnav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:var(--gold);transition:width .25s ease;
}
nav.mainnav a:hover{color:var(--ink);}
nav.mainnav a:hover::after{width:100%;}
nav.mainnav a.is-active{color:var(--ink);}
nav.mainnav a.is-active::after{width:100%;}
.nav-cta{margin-left:.4rem;}
.nav-toggle{display:none;}

/* --- mobile navigation ---------------------------------------------------
   Under 900px the links collapse behind a toggle. Progressive enhancement:
   without JS (html has no .js class) the panel is simply always open, so the
   site is never left without navigation. */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;                 /* 44px tap target */
  flex-direction:column;justify-content:center;gap:5px;
}
.nav-toggle .bar{
  display:block;height:1.5px;width:100%;background:var(--navy);
  transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(max-width:900px){
  .header-solid{z-index:60;}
  .nav-toggle{display:flex;}
  nav.mainnav{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid rgba(190,148,64,.30);
    box-shadow:0 22px 44px -26px rgba(12,27,58,.55);
    padding:.25rem var(--edge) 1.4rem;
  }
  nav.mainnav.is-open{display:flex;}
  html:not(.js) nav.mainnav{display:flex;position:static;box-shadow:none;padding-inline:0;}
  nav.mainnav .navlink{
    display:block;padding:1rem 0;font-size:.98rem;
    border-bottom:1px solid rgba(20,49,95,.09);
  }
  nav.mainnav a::after{display:none;}
  .nav-cta{margin:1.2rem 0 0;text-align:center;padding:.9rem 1.2rem;}
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle .bar{transition:none;}
}

/* Inner-page header sits in the document flow (no hero behind it) */
.header-solid{position:relative;}
.header-solid + main .page-head{padding-top:clamp(2.5rem,6vw,4rem);}

/* ============ HERO ============ */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 78% 22%,#193c72 0%,var(--ink) 46%,#081327 100%);
  color:#fff;
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:8rem;padding-bottom:5rem;
  overflow:hidden;
}
/* meridian / longitude line motif */
.meridians{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
}
.meridians svg{width:100%;height:100%;}
.emblem-watermark{
  position:absolute;
  right:clamp(-140px,-6vw,-40px);
  top:50%;
  transform:translateY(-50%);
  width:min(60vw,720px);
  height:auto;
  opacity:.10;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 0 40px rgba(190,148,64,.15));
}
.hero-inner{position:relative;z-index:3;max-width:840px;}
.hero .eyebrow{color:var(--gold-soft);}
.hero h1{
  font-size:clamp(2.7rem,7vw,5.2rem);
  font-weight:400;
  letter-spacing:-.02em;
  margin-bottom:1.6rem;
}
.hero h1 em{font-style:italic;color:var(--gold-soft);}
.hero .sub{
  font-size:clamp(1.05rem,1.6vw,1.28rem);
  color:var(--ink-70);
  max-width:600px;
  margin-bottom:2.4rem;
  line-height:1.6;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.hero-meta{
  position:absolute;bottom:2.2rem;left:var(--edge);right:var(--edge);z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55);
}
.hero-meta .rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(190,148,64,.5),transparent);margin:0 0 .35rem;}
@media(max-width:640px){.hero-meta{display:none;}}

/* ============ PAGE HEAD (inner pages) ============ */
.page-head{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 80% 10%,#193c72 0%,var(--ink) 55%,#081327 100%);
  color:#fff;
  padding-top:clamp(8rem,14vw,11rem);
  padding-bottom:clamp(3.5rem,7vw,5.5rem);
}
.page-head .emblem-bg{
  position:absolute;right:clamp(-120px,-4vw,-30px);top:50%;transform:translateY(-50%);
  width:min(46vw,460px);opacity:.08;pointer-events:none;z-index:0;
}
.page-head .inner{position:relative;z-index:2;max-width:820px;}
.page-head h1{font-size:clamp(2.3rem,5vw,3.7rem);margin-bottom:1.1rem;}
.page-head p{color:var(--ink-70);font-size:clamp(1.05rem,1.6vw,1.24rem);max-width:620px;line-height:1.6;}
.crumb{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);margin-bottom:1.4rem;}
.crumb a{color:var(--gold-soft);}

/* ============ SECTION SHELL ============ */
section{position:relative;}
.band{padding-block:clamp(4.5rem,9vw,8rem);}
.section-head{max-width:720px;margin-bottom:clamp(2.4rem,5vw,3.6rem);}
.section-head h2{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:1.1rem;}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);color:#42506b;}
.prose p{color:#42506b;font-size:1.05rem;margin-bottom:1.1rem;max-width:680px;}
.prose h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.2rem);margin:2.4rem 0 1rem;}
.prose h3{color:var(--navy);font-size:1.3rem;margin:1.8rem 0 .7rem;}

/* ============ POSITIONING (dark) ============ */
.positioning{
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.positioning::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 15% 0%,rgba(25,60,114,.55),transparent 60%);
  pointer-events:none;
}
.positioning .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.positioning h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);}
.positioning p{color:var(--ink-70);font-size:clamp(1.05rem,1.5vw,1.2rem);margin-top:1.2rem;}
.positioning .quiet-mark{
  justify-self:center;width:min(78%,340px);opacity:.85;
}
@media(max-width:820px){
  .positioning .inner{grid-template-columns:1fr;}
  .positioning .quiet-mark{display:none;}
}

/* ============ SERVICES ============ */
.services{background:var(--paper);}
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.4vw,1.8rem);
}
.pillar{
  background:var(--white);
  border:1px solid rgba(20,49,95,.09);
  border-radius:4px;
  padding:clamp(1.8rem,3vw,2.4rem);
  position:relative;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  overflow:hidden;
}
.pillar::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .4s ease;
}
.pillar:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(12,27,58,.4);border-color:rgba(190,148,64,.4);}
.pillar:hover::before{transform:scaleY(1);}
.pillar .num{
  font-family:var(--serif);font-size:1rem;color:var(--gold);
  letter-spacing:.1em;margin-bottom:1.4rem;display:block;
  border-bottom:1px solid rgba(190,148,64,.3);padding-bottom:1rem;
}
.pillar h3{font-size:1.4rem;margin-bottom:.8rem;color:var(--navy);}
.pillar p{color:#4a5875;font-size:.98rem;}
/* pillar as a link (services index) */
a.pillar{display:block;}
a.pillar .more{margin-top:1.2rem;display:inline-flex;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);}
@media(max-width:820px){.pillars{grid-template-columns:1fr;}}

/* ============ RESOLUTION BAND ============ */
.resolution{
  background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden;
}
.resolution::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(190,148,64,.14) 1px,transparent 1px) 0 0/54px 100%,
    radial-gradient(70% 120% at 50% -10%,rgba(190,148,64,.16),transparent 60%);
  opacity:.5;pointer-events:none;
}
.resolution .inner{position:relative;z-index:2;max-width:860px;margin:0 auto;}
.resolution .eyebrow{justify-content:center;color:var(--gold-soft);}
.resolution .eyebrow::before{background:var(--gold);}
.resolution p.big{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.28;color:#fff;
}

/* ============ FOUNDER ============ */
.founder{background:var(--white);}
.founder .inner{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.portrait{
  position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  background:radial-gradient(120% 100% at 30% 20%,#193c72,var(--ink));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(190,148,64,.35);
  box-shadow:0 30px 60px -34px rgba(12,27,58,.55);
}
.portrait img{width:100%;height:100%;object-fit:cover;}
.portrait::before{
  content:"";position:absolute;inset:14px;border:1px solid rgba(190,148,64,.4);border-radius:4px;pointer-events:none;z-index:2;
}
.monogram{
  font-family:var(--serif);font-size:clamp(4rem,9vw,6.6rem);color:var(--gold-soft);
  letter-spacing:.02em;line-height:1;
}
.portrait .cap{
  position:absolute;bottom:20px;left:0;right:0;text-align:center;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-55);
}
.founder h2{font-size:clamp(2rem,3.6vw,2.8rem);color:var(--navy);margin-bottom:.4rem;}
.founder .role{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-bottom:1.5rem;
}
.founder p{color:#42506b;font-size:1.05rem;margin-bottom:1.1rem;}
@media(max-width:820px){
  .founder .inner{grid-template-columns:1fr;}
  .portrait{max-width:340px;margin:0 auto;}
}

/* ============ CLOSING CTA ============ */
.closing{
  background:radial-gradient(120% 120% at 80% 10%,#193c72 0%,var(--ink) 55%,#081327 100%);
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.closing .emblem-bg{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(70vw,560px);opacity:.07;pointer-events:none;z-index:0;
}
.closing .inner{position:relative;z-index:2;max-width:720px;margin:0 auto;}
.closing h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:1.2rem;}
.closing p{color:var(--ink-70);font-size:1.15rem;margin-bottom:2.2rem;max-width:540px;margin-inline:auto;}
.closing .cta-row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;}
.closing .email{
  margin-top:1.8rem;font-size:.82rem;letter-spacing:.12em;color:var(--ink-55);text-transform:uppercase;
}
.closing .email a{color:var(--gold-soft);border-bottom:1px solid rgba(190,148,64,.4);padding-bottom:2px;}

/* ============ CONTACT / FORM ============ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.field{margin-bottom:1.2rem;}
.field label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-weight:600;margin-bottom:.5rem;}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:1rem;color:#1a2740;
  background:var(--white);border:1px solid rgba(20,49,95,.2);border-radius:3px;
  padding:.85rem 1rem;transition:border-color .2s ease,box-shadow .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(190,148,64,.18);
}
.field textarea{min-height:150px;resize:vertical;}
.contact-aside{background:var(--white);border:1px solid rgba(20,49,95,.09);border-radius:4px;padding:clamp(1.6rem,3vw,2.2rem);}
.contact-aside h3{color:var(--navy);font-size:1.3rem;margin-bottom:1rem;}
.contact-aside dl{margin:0;}
.contact-aside dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:1.1rem;font-weight:600;}
.contact-aside dd{margin:.3rem 0 0;color:#42506b;font-size:1rem;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}

/* AutoDrive (GHL) inline form — 2026-09-12. The embedded form only lays out in TWO columns
   when its iframe is >= 656px wide (measured), so the form gets the full column and the aside
   only moves beside it once there is room for both (>= 1180px leaves the iframe ~700px).
   Below that they stack, form first. min-height = the embed's own data-height, so the layout
   doesn't jump from 150px before form_embed.js sizes the iframe (it grows past this on
   mobile, where the form is one column and taller). */
.contact-embed-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.contact-embed{min-width:0;}
.contact-embed iframe{display:block;min-height:938px;}
@media(min-width:1180px){.contact-embed-grid{grid-template-columns:minmax(0,1fr) 300px;}}

/* Thank You + Schedule — FOCUSED pages (Cre8 OS conversion flow, 2026-09-15). One heading, one
   line, then the AutoDrive scheduler immediately, so it sits above the fold. No hero band.
   Scheduler gets the full column (capped so the session cards don't stretch on wide screens);
   min-height covers the moment before form_embed.js sizes the iframe (~380–790px measured). */
.focus-page{background:var(--white);padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(3rem,6vw,4.5rem);}
.focus-head{max-width:760px;margin:0 auto clamp(1.1rem,2.2vw,1.6rem);text-align:center;}
.focus-head h1{color:var(--navy);font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;margin:0 0 .6rem;}
.focus-head p{color:#1a2740;font-size:clamp(1.05rem,1.6vw,1.2rem);margin:0;}
.focus-head strong{color:var(--navy);}
.schedule-embed{max-width:960px;margin:0 auto;}
.schedule-embed iframe{display:block;min-height:380px;}
/* On phones form_embed.js sizes the session picker ~19px short of its content (477 vs 496
   measured at 390) and scrolling="no" clips the card's bottom edge. Floor it; taller states
   (the booking calendar, ~770px) still win because the script sets a larger inline height. */
@media(max-width:600px){.schedule-embed iframe{min-height:510px;}}
.schedule-fallback{max-width:62ch;margin:clamp(1.2rem,2.5vw,1.8rem) auto 0;text-align:center;color:#42506b;font-size:.95rem;}
.schedule-fallback:empty{display:none;}
.schedule-fallback a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.4);}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:var(--ink-55);padding-block:clamp(3rem,6vw,4.5rem);border-top:1px solid rgba(190,148,64,.18);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;align-items:start;}
footer .brand img{width:210px;margin-bottom:1.3rem;}
footer .about{max-width:320px;font-size:.92rem;line-height:1.7;}
footer h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem;font-weight:600;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
footer ul a{font-size:.92rem;color:var(--ink-70);transition:color .2s ease;}
footer ul a:hover{color:#fff;}
.footer-bottom{
  margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
}
.disclaimer{font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.4);max-width:640px;}
.copyright{font-size:.78rem;letter-spacing:.08em;color:rgba(255,255,255,.4);}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:2rem;}}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
/* keep content visible if JS never runs */
html:not(.js) .reveal{opacity:1 !important;transform:none !important;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
  .meridian-drift{animation:none!important;}
}

.meridian-drift{animation:drift 40s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translateX(-2%);}to{transform:translateX(2%);}}

/* ============================================================================
   v2 — components added 2026-08-23 for the client-answers rebuild.
   Order matters only for .beats (dark band) — everything else is standalone.
   ========================================================================= */

/* --- accessibility ------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--ink);padding:.8rem 1.4rem;
  font-family:var(--sans);font-size:.85rem;font-weight:600;border-radius:0 0 4px 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* --- the four beats (homepage signature) --------------------------------- */
.beats{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
}
.beats .emblem-bg{
  position:absolute;right:-9%;top:50%;transform:translateY(-50%);
  width:640px;max-width:60%;opacity:.05;pointer-events:none;
}
.beats .wrap{position:relative;z-index:2;}
.beats h2{color:#fff;}
.beat-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  counter-reset:beat;
}
.beat{position:relative;padding-top:1.6rem;counter-increment:beat;}
.beat-rule{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(190,148,64,.16) 100%);
}
.beat::after{
  content:counter(beat,decimal-leading-zero);
  position:absolute;top:.9rem;right:0;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;
  color:var(--gold);opacity:.75;
}
.beat h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  color:#fff;margin:0 0 .7rem;line-height:1.25;
}
.beat p{
  color:var(--ink-70);font-size:.94rem;line-height:1.75;margin:0;
}
@media(max-width:960px){
  .beat-list{grid-template-columns:repeat(2,1fr);gap:2rem 1.8rem;}
}
@media(max-width:560px){
  .beat-list{grid-template-columns:1fr;gap:1.7rem;}
  .beats .emblem-bg{right:-30%;opacity:.04;}
}

/* --- fee table ----------------------------------------------------------- */
.fee-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fee-table{
  width:100%;min-width:420px;border-collapse:collapse;
  font-family:var(--sans);font-size:.95rem;
  background:var(--white);
  border:1px solid rgba(20,49,95,.12);
}
.fee-table caption{text-align:left;}
.fee-table thead th{
  background:var(--navy);color:#fff;text-align:left;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:.85rem 1.1rem;
}
.fee-table thead th:last-child{text-align:right;}
.fee-table tbody th{
  text-align:left;font-weight:500;color:var(--ink);
  padding:.85rem 1.1rem;border-top:1px solid rgba(20,49,95,.1);
}
.fee-table tbody td{
  text-align:right;white-space:nowrap;color:var(--navy);font-weight:600;
  padding:.85rem 1.1rem;border-top:1px solid rgba(20,49,95,.1);
  font-variant-numeric:tabular-nums;
}
.fee-table tbody tr:nth-child(even) th,
.fee-table tbody tr:nth-child(even) td{background:rgba(250,246,236,.7);}
.fee-caveat{
  margin-top:1.1rem;font-size:.86rem;line-height:1.7;color:#6b7890;max-width:70ch;
}
@media(max-width:560px){
  .fee-table{font-size:.88rem;min-width:360px;}
  .fee-table thead th,.fee-table tbody th,.fee-table tbody td{padding:.7rem .8rem;}
}

/* --- tick list ----------------------------------------------------------- */
.ticks{list-style:none;margin:0 0 1.8rem;padding:0;}
.ticks li{
  position:relative;padding-left:1.7rem;margin-bottom:.75rem;
  color:#42506b;font-size:1.03rem;line-height:1.8;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.62rem;height:.62rem;border:1px solid var(--gold);
  transform:rotate(45deg);
}

/* --- credentials --------------------------------------------------------- */
.creds-head{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:2rem 0 .9rem;font-weight:600;
}
.creds{list-style:none;margin:0;padding:0;}
.creds li{
  position:relative;padding-left:1.2rem;margin-bottom:.5rem;
  font-family:var(--sans);font-size:.95rem;color:#42506b;line-height:1.6;
}
.creds li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.38rem;height:.38rem;background:var(--gold);border-radius:50%;
}
.positioning .creds li,.beats .creds li{color:var(--ink-70);}

/* --- note card ----------------------------------------------------------- */
.note-card{
  background:var(--white);border:1px solid rgba(20,49,95,.1);
  border-left:3px solid var(--gold);
  padding:clamp(1.6rem,3.5vw,2.4rem);max-width:820px;
}
.note-card h3{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(1.2rem,2vw,1.5rem);margin:.5rem 0 .8rem;
}
.note-card p{color:#42506b;font-size:1rem;line-height:1.8;margin:0;}

/* --- FAQ disclosure ------------------------------------------------------ */
.qa-list{border-top:1px solid rgba(20,49,95,.12);}
.qa{border-bottom:1px solid rgba(20,49,95,.12);}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.4;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{
  content:"";flex:0 0 auto;margin-top:.45em;
  width:.62rem;height:.62rem;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s ease;
}
.qa[open] summary::after{transform:rotate(-135deg);}
.qa summary:hover{color:var(--ink);}
.qa-body{padding:0 0 1.5rem;}
.qa-body p{color:#42506b;font-size:1.02rem;line-height:1.85;max-width:74ch;margin:0;}

/* --- misc text ----------------------------------------------------------- */
.fineprint{
  margin-top:1.8rem;font-size:.88rem;line-height:1.7;
  color:#6b7890;font-style:italic;max-width:70ch;
}
.textlink{
  color:var(--navy);font-family:var(--sans);font-size:.92rem;font-weight:500;
  border-bottom:1px solid rgba(190,148,64,.55);padding-bottom:2px;
}
.textlink:hover{color:var(--gold);}
.formnote{
  margin-top:1rem;font-size:.85rem;line-height:1.7;color:#6b7890;
}
.formnote a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.5);}
.aside-note{
  margin-top:1.6rem;font-size:.85rem;color:#6b7890;line-height:1.7;
}
.contact-aside dd a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.4);}

/* --- guarantee images never blow out a grid track (Stage 7 overflow rule) - */
.pillars img,.prose img,.contact-grid img,.beat-list img{max-width:100%;height:auto;}

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

/* --- content measure -----------------------------------------------------
   Single-column content must share the page-head's column so the eye follows
   one left edge down the page. .page-head .inner is 820px; .wrap.narrow
   matches it exactly. Never set an ad-hoc max-width on a .wrap.            */
.wrap.narrow{max-width:820px;}
.wrap.narrow .prose p{max-width:none;}

/* Beat headings vary in line count; subgrid keeps every body copy on one
   baseline instead of stepping down with the heading above it. */
@supports (grid-template-rows: subgrid){
  .beat-list{grid-template-rows:auto auto;}
  .beat{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;}
}
.beat h3{text-wrap:balance;}
.page-head h1{text-wrap:balance;}

/* Footer copyright: `white-space:nowrap` overflowed the viewport below ~375px on every page
   (found independently by two designers during the 2026-08-23 redesign). The line is allowed to
   wrap on narrow screens; the nowrap only ever mattered beside the disclaimer at desktop width. */
@media(min-width:761px){ .copyright{white-space:nowrap;} }


/* ==========================================================================
   INNER-PAGE REDESIGN — merged 2026-08-23.
   Five page systems, each namespaced. They share the tokens above and add no new colors.
   Every rule below is scoped to its page prefix; none redefine a shared class.
   ========================================================================== */


/* ---------- SERVICES — the practice index (01–10 across three strata, ground changes per group) ---------- */
/* ==========================================================================
   SERVICES INDEX — page-scoped styles, prefix .svc-
   Structural idea: the page is the practice's index. One continuous 01–10
   numeration runs down three strata; each stratum keeps its own standing
   rail (roman numeral + group name + group line) and its own ground.
   ========================================================================== */

/* --- masthead ----------------------------------------------------------- */
.svc-mast{
  background:var(--paper);
  padding-top:clamp(2.75rem,6vw,5rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.svc-mast-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:end;
}
.svc-crumb{
  font-family:var(--sans);font-size:.7rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#8791a5;
  margin:0 0 clamp(1.6rem,4vw,2.6rem);
}
.svc-crumb a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.5);padding-bottom:2px;}
.svc-crumb a:hover{color:var(--gold);}
.svc-mast h1{
  font-size:clamp(3rem,9.6vw,6.4rem);
  font-weight:400;letter-spacing:-.03em;line-height:.95;
  color:var(--ink);margin:0;
}
.svc-mast h1 .svc-mast-em{display:block;font-style:italic;color:var(--navy);}
.svc-mast-rule{
  height:1px;background:linear-gradient(90deg,var(--gold) 0%,rgba(190,148,64,.14) 68%,transparent 100%);
  margin:clamp(1.4rem,3vw,2rem) 0 1.2rem;
}
.svc-mast-count{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.3rem;
}
.svc-mast-intro{
  color:#42506b;font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.72;max-width:44ch;margin:0;
}

/* --- table of contents --------------------------------------------------- */
.svc-toc{border-top:1px solid rgba(20,49,95,.18);padding-top:1.1rem;}
.svc-toc-h{
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:#8791a5;
  margin:0 0 .4rem;
}
.svc-toc ol{list-style:none;margin:0;padding:0;}
.svc-toc a{
  display:flex;align-items:baseline;gap:0;
  padding:.85rem 0;min-height:44px;
  border-bottom:1px solid rgba(20,49,95,.1);
  transition:color .2s ease;
}
.svc-toc li:last-child a{border-bottom:0;}
.svc-toc-rn{
  flex:0 0 2.1rem;
  font-family:var(--serif);font-size:.92rem;font-weight:500;
  letter-spacing:.06em;color:var(--gold);
}
.svc-toc-name{
  font-family:var(--sans);font-size:.93rem;font-weight:500;color:var(--navy);
  line-height:1.35;
}
.svc-toc-lead{
  flex:1 1 auto;min-width:1.2rem;
  border-bottom:1px dotted rgba(20,49,95,.34);
  margin:0 .7rem .3rem;
}
.svc-toc-rng{
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  letter-spacing:.1em;color:#6b7890;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.svc-toc a:hover .svc-toc-name{color:var(--gold);}
.svc-toc a:hover .svc-toc-lead{border-bottom-color:rgba(190,148,64,.6);}

/* --- stratum shell ------------------------------------------------------- */
.svc-stratum{scroll-margin-top:1rem;position:relative;}
.svc-light{background:var(--paper);}
.svc-plain{background:var(--white);}
.svc-deep{background:var(--ink);overflow:hidden;}
.svc-deep::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(190,148,64,.10) 1px,transparent 1px) 0 0/78px 100%,
    radial-gradient(88% 120% at 12% -10%,rgba(25,60,114,.62),transparent 62%);
  opacity:.62;
}
.svc-deep .svc-emblem{
  position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:min(52vw,620px);opacity:.055;pointer-events:none;z-index:0;
}
.svc-stratum > .wrap{position:relative;z-index:2;}
.svc-stratum-inner{
  display:grid;
  grid-template-columns:minmax(215px,1fr) minmax(0,2.55fr);
  gap:clamp(1.8rem,4.5vw,4.5rem);
  padding-block:clamp(3.2rem,6.5vw,6rem);
  align-items:start;
}

/* --- standing rail ------------------------------------------------------- */
.svc-rail{position:sticky;top:clamp(1.5rem,4vw,3rem);}
.svc-rn{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.5rem);line-height:1;
  letter-spacing:.02em;color:var(--gold);margin:0 0 .7rem;
}
.svc-rail h2{
  font-size:clamp(1.5rem,2.5vw,2.05rem);
  color:var(--navy);margin:0 0 .95rem;text-wrap:balance;
}
.svc-rail-line{
  color:#42506b;font-size:.97rem;line-height:1.75;margin:0;max-width:34ch;
}
.svc-rail-count{
  display:block;margin-top:1.4rem;padding-top:1rem;
  border-top:1px solid rgba(20,49,95,.16);
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:#8791a5;
}
.svc-deep .svc-rail h2{color:#fff;}
.svc-deep .svc-rail-line{color:var(--ink-70);}
.svc-deep .svc-rail-count{border-top-color:rgba(255,255,255,.18);color:var(--ink-55);}

/* --- the index rows ------------------------------------------------------ */
.svc-rows{list-style:none;margin:0;padding:0;}
.svc-row{border-top:1px solid rgba(20,49,95,.14);}
.svc-row:last-child{border-bottom:1px solid rgba(20,49,95,.14);}
.svc-deep .svc-row{border-top-color:rgba(255,255,255,.14);}
.svc-deep .svc-row:last-child{border-bottom-color:rgba(255,255,255,.14);}

.svc-link{
  position:relative;display:grid;
  grid-template-columns:clamp(2.9rem,4.4vw,4.1rem) minmax(0,1.18fr) minmax(0,1fr) 1.4rem;
  gap:clamp(1rem,2.6vw,2.4rem);
  align-items:start;
  padding-block:clamp(1.45rem,2.6vw,2.05rem);
  padding-inline:1rem;margin-inline:-1rem;
  transition:background .3s ease;
}
.svc-link::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.svc-link:hover{background:rgba(255,255,255,.62);}
.svc-plain .svc-link:hover{background:var(--paper);}
.svc-deep .svc-link:hover{background:rgba(255,255,255,.035);}
.svc-link:hover::before,.svc-link:focus-visible::before{transform:scaleX(1);}

.svc-n{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  color:rgba(20,49,95,.36);
  transition:color .3s ease;
}
.svc-deep .svc-n{color:rgba(211,180,115,.42);}
.svc-link:hover .svc-n{color:var(--gold);}

.svc-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.18rem,2vw,1.72rem);line-height:1.18;
  letter-spacing:-.01em;color:var(--navy);margin:0;
  text-wrap:balance;
  transition:color .25s ease;
}
.svc-deep .svc-title{color:#fff;}
.svc-link:hover .svc-title{color:var(--gold);}
.svc-deep .svc-link:hover .svc-title{color:var(--gold-soft);}

.svc-gloss{
  display:block;color:#42506b;font-size:.97rem;line-height:1.72;
  padding-top:.16rem;
}
.svc-deep .svc-gloss{color:var(--ink-70);}
.svc-refs{
  display:block;margin-top:.7rem;
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
  line-height:1.9;
}
.svc-deep .svc-refs{color:var(--gold-soft);}

.svc-arw{
  justify-self:end;align-self:start;
  font-family:var(--sans);font-size:1rem;line-height:1;
  color:rgba(20,49,95,.3);
  transition:transform .3s ease,color .3s ease;
}
.svc-link .svc-arw{margin-top:.34rem;}
.svc-deep .svc-arw{color:rgba(255,255,255,.34);}
.svc-link:hover .svc-arw{color:var(--gold);transform:translateX(4px);}

/* --- end matter (aside + fees pointer) ----------------------------------- */
.svc-end{background:var(--paper);border-top:1px solid rgba(20,49,95,.12);}
.svc-end-row{
  display:grid;
  grid-template-columns:minmax(215px,1fr) minmax(0,2.55fr);
  gap:clamp(1.2rem,4.5vw,4.5rem);
  padding-block:clamp(2.6rem,5vw,4rem);
  align-items:start;
}
.svc-end-row + .svc-end-row{border-top:1px solid rgba(190,148,64,.4);}
.svc-end-label{
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0;
}
.svc-end-sub{
  display:block;margin-top:.5rem;letter-spacing:.02em;text-transform:none;
  font-size:.83rem;font-weight:400;color:#8791a5;font-style:italic;
}
.svc-end-row h2{
  font-size:clamp(1.3rem,2.2vw,1.75rem);color:var(--navy);margin:0 0 .9rem;
  text-wrap:balance;
}
.svc-end-row p{color:#42506b;font-size:1rem;line-height:1.8;max-width:62ch;margin:0;}
.svc-end-row .svc-fees-line{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.5vw,1.95rem);line-height:1.32;
  color:var(--ink);margin:0 0 1.3rem;max-width:24ch;letter-spacing:-.01em;
}
.svc-end-row .svc-fees-note{margin-bottom:1.6rem;}
.svc-fees-link{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
}
.svc-fees-link span:not(.svc-arw){border-bottom:1px solid rgba(190,148,64,.7);padding-bottom:3px;}
.svc-fees-link .svc-arw{align-self:center;color:var(--gold);}
.svc-fees-link:hover{color:var(--gold);}
.svc-fees-link:hover .svc-arw{transform:translateX(4px);color:var(--gold);}

/* --- responsive ---------------------------------------------------------- */
@media(max-width:1000px){
  /* below the four-column measure the row folds: title over gloss, and the
     end-of-row arrow becomes an inline mark on the title so it is never
     orphaned on a line of its own. */
  .svc-link{grid-template-columns:clamp(2.6rem,5vw,3.4rem) minmax(0,1fr);}
  .svc-gloss{grid-column:2 / 3;padding-top:.55rem;}
  .svc-link .svc-arw{display:none;}
  .svc-title::after{
    content:" \2192";color:var(--gold);font-family:var(--sans);
    font-size:.72em;font-weight:400;white-space:nowrap;padding-left:.18em;
  }
  .svc-deep .svc-title::after{color:var(--gold-soft);}
}
@media(max-width:900px){
  .svc-mast-grid{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem);align-items:start;}
  .svc-mast-intro{max-width:52ch;}
  .svc-stratum-inner,.svc-end-row{grid-template-columns:1fr;}
  .svc-rail{position:static;}
  .svc-rail-count{margin-bottom:.4rem;}
  .svc-end-label{margin-bottom:.2rem;}
}
@media(max-width:560px){
  .svc-mast h1{font-size:clamp(2.7rem,13vw,3.6rem);}
  .svc-link{
    grid-template-columns:2.5rem minmax(0,1fr);
    gap:.9rem;padding-inline:.6rem;margin-inline:-.6rem;
  }
  .svc-n{font-size:1.35rem;}
  .svc-title{font-size:1.14rem;}
  .svc-toc-name{font-size:.9rem;}
  .svc-toc-lead{display:none;}
  .svc-toc-rng{margin-left:auto;padding-left:1rem;}
}
@media(prefers-reduced-motion:reduce){
  /* brand.css already kills every transition; the hover rule still appears,
     it just appears instantly. Nothing is animated on load. */
  .svc-link::before,.svc-arw,.svc-n,.svc-title{transition:none;}
}


/* ---------- SERVICE DETAIL — the matter file (vertical navy spine + ivory reading column) ---------- */
/* ==========================================================================
   SERVICE DETAIL — "the matter file"
   Namespace: .dtl-
   One idea: the page is a case file opened on its side — a full-height navy
   spine on the left carrying the record (crumb, practice group, who it
   applies to, contents, next step), and an ivory reading column on the right
   carrying the prose. The two-tone split is VERTICAL, so this page never
   reads as the site's usual stack of horizontal bands.
   ========================================================================== */

/* ---- the split ---------------------------------------------------------- */
.dtl-file{
  --dtl-top:clamp(8rem,13vw,10rem);   /* fallback: absolute/transparent header */
  --dtl-bot:clamp(4.5rem,8vw,7rem);
  background:var(--paper);
  overflow-x:clip;          /* contains the rail's -100vw bleed; unlike
                               overflow:hidden this is NOT a scroll container,
                               so the sticky rail keeps working */
  padding-top:var(--dtl-top);
  padding-bottom:var(--dtl-bot);
}
.dtl-grid{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  column-gap:clamp(2.25rem,5vw,4.75rem);
  align-items:stretch;
}

/* Inner pages ship .header-solid, which is position:relative and therefore in
   flow — same convention brand.css uses for `.header-solid + main .page-head`. */
.header-solid + main .dtl-file{--dtl-top:clamp(3rem,6vw,5rem);}

/* ---- left spine (navy, bleeds to the viewport edge) --------------------- */
.dtl-rail{position:relative;padding-right:clamp(1.5rem,2.5vw,2.25rem);}
.dtl-rail::before{
  content:"";position:absolute;z-index:0;
  left:-100vw;right:0;
  top:calc(-1 * var(--dtl-top));
  bottom:calc(-1 * var(--dtl-bot));
  background:var(--ink);
}
.dtl-rail::after{            /* the file's cut edge */
  content:"";position:absolute;z-index:0;
  right:0;width:1px;
  top:calc(-1 * var(--dtl-top));
  bottom:calc(-1 * var(--dtl-bot));
  background:linear-gradient(180deg,rgba(190,148,64,.55) 0%,rgba(190,148,64,.18) 45%,rgba(190,148,64,.05) 100%);
}
.dtl-rail-mark{
  position:absolute;z-index:0;
  left:-96px;bottom:calc(-1 * var(--dtl-bot) + 2rem);
  width:340px;height:auto;opacity:.06;pointer-events:none;
}
.dtl-rail-in{position:sticky;top:2.25rem;z-index:1;}

.dtl-crumb{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-55);margin:0 0 1.5rem;line-height:1.9;
}
.dtl-crumb a{color:var(--gold-soft);}
.dtl-crumb a:hover{color:var(--gold);}
.dtl-crumb .sep{opacity:.45;padding:0 .45rem;}

.dtl-rule{height:1px;background:linear-gradient(90deg,rgba(190,148,64,.75),rgba(190,148,64,.06));margin:0 0 1.6rem;}

.dtl-rec{margin:0;}
.dtl-rec dt{
  font-family:var(--sans);font-size:.64rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.52);margin:0 0 .5rem;
}
.dtl-rec dd{
  margin:0 0 1.65rem;color:#fff;font-size:.95rem;line-height:1.6;
}
.dtl-rec dd a{
  color:#fff;border-bottom:1px solid rgba(190,148,64,.5);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.dtl-rec dd a:hover{color:var(--gold-soft);border-color:var(--gold);}
.dtl-rec dd.dtl-rec-quiet{color:var(--ink-70);font-size:.92rem;line-height:1.75;}

/* contents index — desktop only; it is navigation, not content */
.dtl-idx{list-style:none;margin:0;padding:0;}
.dtl-idx li{border-top:1px solid rgba(255,255,255,.09);}
.dtl-idx li:last-child{border-bottom:1px solid rgba(255,255,255,.09);}
.dtl-idx a{
  display:flex;align-items:baseline;gap:.85rem;
  padding:.72rem 0;min-height:44px;
  font-size:.86rem;color:var(--ink-70);transition:color .2s ease;
}
.dtl-idx a:hover{color:var(--gold-soft);}
.dtl-idx .n{
  font-family:var(--serif);font-size:.72rem;color:var(--gold);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

.dtl-next-rail{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid rgba(190,148,64,.28);}
.dtl-next-rail .btn{
  width:100%;justify-content:space-between;text-align:left;
  padding-inline:1.15rem;font-size:.76rem;letter-spacing:.055em;
}
.dtl-mail{margin-top:1rem;font-size:.82rem;line-height:1.6;}
.dtl-mail a{color:var(--gold-soft);border-bottom:1px solid rgba(190,148,64,.35);padding-bottom:2px;word-break:break-word;}
.dtl-mail a:hover{color:var(--gold);}

/* Small inline links (crumb, practice group, email) keep their tight
   underlines but get a >=44px touch area via an invisible overlay. */
.dtl-crumb a,.dtl-rec dd a,.dtl-mail a,.dtl-next-mail a{position:relative;}
.dtl-crumb a::after,.dtl-rec dd a::after,.dtl-mail a::after,.dtl-next-mail a::after{
  content:"";position:absolute;inset:-15px 0;
}

/* ---- right reading column ----------------------------------------------- */
.dtl-main{min-width:0;}
.dtl-main h1{
  font-size:clamp(2.15rem,4.4vw,3.35rem);
  color:var(--ink);text-wrap:balance;margin:0 0 1.5rem;
}
.dtl-lede{
  font-size:clamp(1.06rem,1.45vw,1.2rem);
  line-height:1.75;color:#42506b;max-width:60ch;margin:0;
}
.dtl-extra{margin-top:1.4rem;max-width:64ch;}
.dtl-extra p{color:#42506b;font-size:1.02rem;line-height:1.8;margin:0 0 1.1rem;}
.dtl-extra p:last-child{margin-bottom:0;}
/* Only one service carries an extra prose block, so its heading was never styled by the
   page's designer. Give it a real sub-heading voice rather than letting an <h2> render
   at body size — it sits inside the overview, so it stays quieter than a .dtl-h2. */
.dtl-extra h2{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.25;
  margin:2.2rem 0 .9rem;
}
.dtl-extra h2::after{
  content:"";display:block;width:2.2rem;height:1px;
  background:var(--gold);margin-top:.7rem;opacity:.7;
}

.dtl-sec{margin-top:clamp(2.9rem,6vw,4.25rem);}
.dtl-h2{
  display:flex;align-items:center;gap:1.1rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy);margin:0 0 1.5rem;line-height:1.5;
}
.dtl-h2::after{
  content:"";flex:1 1 auto;height:1px;min-width:1.5rem;
  background:linear-gradient(90deg,rgba(190,148,64,.6),rgba(190,148,64,0));
}

/* covers — numbered rows, counters so the generator only emits <li>text</li> */
.dtl-covers{list-style:none;margin:0;padding:0;counter-reset:dtlc;max-width:64ch;}
.dtl-covers li{
  counter-increment:dtlc;
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:.25rem;align-items:baseline;
  padding:1rem 0;
  border-top:1px solid rgba(20,49,95,.13);
  color:#42506b;font-size:1.04rem;line-height:1.7;
}
.dtl-covers li:last-child{border-bottom:1px solid rgba(20,49,95,.13);}
.dtl-covers li::before{
  content:counter(dtlc,decimal-leading-zero);
  font-family:var(--serif);font-size:.82rem;font-weight:500;
  color:var(--gold);letter-spacing:.04em;font-variant-numeric:tabular-nums;
}

/* engagement basis — a fee is a fact, not a spreadsheet row */
.dtl-fee{
  background:var(--white);
  border:1px solid rgba(20,49,95,.10);
  border-left:2px solid var(--gold);
  padding:clamp(1.5rem,3vw,2.1rem);
  max-width:64ch;
}
.dtl-fee-set{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.25rem,3vw,2.25rem);
}
.dtl-fee-item + .dtl-fee-item{
  padding-left:clamp(1.25rem,3vw,2.25rem);
  border-left:1px solid rgba(20,49,95,.12);
}
/* two fees whose names wrap to different depths must still share a baseline
   (same trick brand.css uses for .beat) */
@supports (grid-template-rows:subgrid){
  .dtl-fee-set{grid-template-rows:auto auto;}
  .dtl-fee-item{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start;}
}
.dtl-fee-name{
  font-size:.82rem;line-height:1.6;color:#6b7890;
  margin:0 0 .55rem;max-width:26ch;
}
.dtl-fee-val{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(2.1rem,4.4vw,2.9rem);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0;
}
.dtl-fee-val--text{font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.3;letter-spacing:0;}
.dtl-fee-kind{
  display:block;margin-top:.75rem;
  font-family:var(--sans);font-size:.63rem;font-weight:600;line-height:1.5;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.dtl-fee-caveat{
  margin:clamp(1.4rem,3vw,1.9rem) 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(20,49,95,.10);
  font-size:.85rem;line-height:1.75;color:#6b7890;
}

/* also in this group — editorial rows, deliberately not a card grid */
.dtl-also{max-width:64ch;}
.dtl-also-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:1rem;
  padding:1.2rem 1rem;margin-inline:-1rem;
  border-top:1px solid rgba(20,49,95,.13);
  transition:background .25s ease;
}
.dtl-also-row:last-child{border-bottom:1px solid rgba(20,49,95,.13);}
.dtl-also-name{
  display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;
  color:var(--ink);line-height:1.3;margin-bottom:.3rem;
  transition:color .25s ease;
}
.dtl-also-desc{display:block;font-size:.92rem;line-height:1.65;color:#6b7890;}
.dtl-also-go{
  font-size:1rem;color:var(--gold);
  transition:transform .25s ease,opacity .25s ease;opacity:.55;
}
.dtl-also-row:hover{background:var(--white);}
.dtl-also-row:hover .dtl-also-name{color:var(--navy);}
.dtl-also-row:hover .dtl-also-go{transform:translateX(4px);opacity:1;}
.dtl-also-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* sign-off — the document ends; no bolt-on gold band */
.dtl-signoff{margin-top:clamp(3rem,6vw,4.25rem);max-width:64ch;}
.dtl-next{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.25rem clamp(1.25rem,3vw,2rem);
  background:var(--white);
  border:1px solid rgba(20,49,95,.10);
  border-top:2px solid var(--gold);
  padding:clamp(1.4rem,3vw,1.9rem);
}
.dtl-next-copy{min-width:min(100%,17rem);flex:1 1 17rem;}
.dtl-next-line{font-family:var(--serif);font-size:1.12rem;line-height:1.4;color:var(--ink);margin:0;}
.dtl-next-mail{margin:.55rem 0 0;font-size:.86rem;}
.dtl-next-mail a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.5);padding-bottom:2px;word-break:break-word;}
.dtl-next-mail a:hover{color:var(--gold);}
.dtl-disclaimer{margin-top:1.5rem;}

/* ---- responsive --------------------------------------------------------- */
@media(max-width:1020px){
  .dtl-grid{grid-template-columns:minmax(0,272px) minmax(0,1fr);}
}

@media(max-width:900px){
  /* The spine lies down: it becomes the file tab across the top. */
  .dtl-file{--dtl-bot:clamp(3.5rem,8vw,5rem);}
  .dtl-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(2.25rem,7vw,3rem);}
  .dtl-rail{
    padding-right:0;
    padding-bottom:clamp(1.9rem,6vw,2.5rem);
  }
  .dtl-rail::before{left:-100vw;right:-100vw;bottom:0;}
  .dtl-rail::after{                       /* cut edge lies down with the tab */
    left:-100vw;right:-100vw;width:auto;
    top:auto;bottom:0;height:1px;
    background:linear-gradient(90deg,rgba(190,148,64,.5),rgba(190,148,64,.06));
  }
  .dtl-rail-in{position:relative;top:auto;}   /* must stay POSITIONED: z-index:1 keeps it above the navy ::before */
  .dtl-rail::after{            /* the file's cut edge */
  content:"";position:absolute;z-index:0;
  right:0;width:1px;
  top:calc(-1 * var(--dtl-top));
  bottom:calc(-1 * var(--dtl-bot));
  background:linear-gradient(180deg,rgba(190,148,64,.55) 0%,rgba(190,148,64,.18) 45%,rgba(190,148,64,.05) 100%);
}
.dtl-rail-mark{display:none;}
  .dtl-crumb{margin-bottom:1.2rem;}
  .dtl-rec dd:last-of-type{margin-bottom:0;}
  .dtl-rec--idx,.dtl-next-rail{display:none;}  /* jump-nav + repeat CTA; the sign-off carries the CTA */
  .dtl-lede{max-width:none;}
  .dtl-covers,.dtl-fee,.dtl-also,.dtl-signoff,.dtl-extra{max-width:none;}
}

@media(max-width:620px){
  .dtl-h2{flex-wrap:wrap;gap:.55rem;}
  .dtl-h2::after{flex:1 0 100%;min-width:0;}
  .dtl-fee-set{grid-template-columns:minmax(0,1fr);}
  .dtl-fee-item + .dtl-fee-item{
    padding-left:0;border-left:0;
    padding-top:1.4rem;border-top:1px solid rgba(20,49,95,.12);
  }
  .dtl-covers li{grid-template-columns:2.1rem minmax(0,1fr);font-size:1rem;}
  .dtl-also-row{grid-template-columns:minmax(0,1fr) auto;padding-inline:.65rem;margin-inline:-.65rem;}
  .dtl-also-name{font-size:1.08rem;}
  .dtl-next .btn{width:100%;}
}

@media(prefers-reduced-motion:reduce){
  .dtl-also-row,.dtl-also-go,.dtl-also-name{transition:none;}
}


/* ---------- FEES — the schedule of charges (navy engraved ledger) ---------- */
/* ==========================================================================
   FEES — "The Plate"
   One structural idea: the page IS the schedule of charges. A deep-navy
   engraved plate carries the whole ledger — numbered entries, a continuous
   gold column rule, large ivory tabular numerals — and the ivory band beneath
   is the endorsement that a printed tariff carries at its foot.
   All new classes namespaced .fee-* (avoiding the existing .fee-table,
   .fee-wrap, .fee-caveat in brand.css).
   ========================================================================== */

/* ---------- the plate ---------------------------------------------------- */
.fee-plate{
  --fee-numw:3.1rem;
  --fee-figw:16.5rem;
  --fee-gap:2rem;
  position:relative;
  overflow:hidden;
  background:radial-gradient(135% 95% at 88% -12%,#1b4180 0%,var(--ink) 46%,#050e1c 100%);
  color:#fff;
  padding-top:clamp(3rem,6.5vw,5rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.fee-plate .fee-emblem{
  position:absolute;
  right:clamp(-160px,-6vw,-40px);
  top:clamp(-60px,-4vw,-20px);
  width:min(52vw,520px);
  opacity:.055;
  pointer-events:none;
  z-index:0;
}
.fee-plate .wrap{position:relative;z-index:2;}

.fee-crumb{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-55);margin:0 0 1.4rem;
}
.fee-crumb a{
  display:inline-block;
  padding-block:1rem;margin-block:-1rem;   /* ≥44px tap target, no added rhythm */
  color:var(--gold-soft);
}
.fee-crumb a:hover{color:var(--gold);}

/* head: title block left, notation key right (asymmetric, baseline-shared) */
.fee-head{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:end;
  padding-bottom:clamp(2.6rem,5vw,4rem);
}
.fee-head .eyebrow{color:var(--gold-soft);}
.fee-head h1{
  font-size:clamp(2.4rem,5.4vw,4.05rem);
  margin:0 0 1.15rem;
  text-wrap:balance;
  letter-spacing:-.015em;
}
.fee-head h1 em{font-style:italic;color:var(--gold-soft);}
.fee-lede{
  color:var(--ink-70);
  font-size:clamp(1.03rem,1.5vw,1.18rem);
  line-height:1.65;
  max-width:38ch;
  margin:0;
}

/* notation key — declares the schedule's two non-numeric conventions up front,
   so a row that isn't a figure reads as notation, not as missing data. */
.fee-key{
  border-top:1px solid rgba(190,148,64,.42);
  padding-top:1.1rem;
}
.fee-key-label{
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1rem;
}
.fee-key dl{margin:0;}
.fee-key dt{margin:0 0 .2rem;}
.fee-key dd{
  margin:0 0 1rem;
  font-size:.86rem;line-height:1.6;color:var(--ink-55);
}
.fee-key dd:last-child{margin-bottom:0;}

/* ---------- the ledger --------------------------------------------------- */
.fee-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* the continuous column rule — the one ornament that does real work:
   it separates description from figure the way a printed tariff does. */
.fee-scroll::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  right:calc(var(--fee-figw) + (var(--fee-gap) / 2));
  width:1px;
  background:linear-gradient(180deg,rgba(190,148,64,.42),rgba(190,148,64,.14));
  pointer-events:none;
}

.fee-ledger{
  list-style:none;
  margin:0;
  padding:0;
  border-bottom:1px solid rgba(190,148,64,.34);
}
.fee-grid{
  display:grid;
  grid-template-columns:var(--fee-numw) minmax(0,1fr) var(--fee-figw);
  column-gap:var(--fee-gap);
  align-items:baseline;
}

.fee-colhead{
  border-top:1px solid rgba(190,148,64,.34);
  border-bottom:1px solid rgba(190,148,64,.34);
  padding-block:.85rem;
}
.fee-colhead span{
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.fee-colhead .fee-c3{padding-left:calc(var(--fee-gap) / 2);}

.fee-row{
  border-top:1px solid rgba(255,255,255,.085);
  padding-block:1rem;
  transition:background .25s ease;
}
.fee-row:first-child{border-top:0;}
.fee-row:hover{background:rgba(255,255,255,.035);}
/* the two notation rows carry their own faint ground so the absence of a
   figure reads as a deliberate class of entry */
.fee-row.is-scoped{background:rgba(190,148,64,.055);}
.fee-row.is-scoped:hover{background:rgba(190,148,64,.09);}

.fee-num{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;color:var(--gold);opacity:.75;
  font-variant-numeric:tabular-nums lining-nums;
}

.fee-name{
  font-family:var(--sans);
  font-size:clamp(.98rem,1.15vw,1.07rem);
  font-weight:400;line-height:1.45;color:#fff;
  margin:0;
  text-wrap:pretty;
}
.fee-name a{
  display:inline-block;
  padding-block:.7rem;                 /* keeps the tap target ≥44px */
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.26em;
  text-decoration-color:rgba(190,148,64,.42);
  transition:color .2s ease,text-decoration-color .2s ease;
}
.fee-name a:hover{color:var(--gold-soft);text-decoration-color:var(--gold);}
.fee-plain{padding-block:.7rem;}

/* the one row with two destinations shows them rather than hiding one */
.fee-sub{
  margin:.35rem 0 -.2rem;
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);
}
.fee-sub a{
  display:inline-block;
  padding:.85rem .55rem;               /* ≥44px tap target … */
  margin-block:-.5rem;                 /* … without inflating the row */
  color:var(--gold-soft);
  transition:color .2s ease;
}
.fee-sub a:first-of-type{margin-left:-.55rem;}
.fee-sub a:hover{color:var(--gold);}
.fee-sub .sep{opacity:.4;}

.fee-figure{
  padding-left:calc(var(--fee-gap) / 2);
  text-align:left;
}
.fee-amt{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(1.9rem,2.9vw,2.55rem);
  line-height:1;
  letter-spacing:-.018em;
  color:var(--paper);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
}
.fee-cur{
  font-size:.46em;
  vertical-align:.72em;
  color:var(--gold-soft);
  letter-spacing:.01em;
  margin-right:.1em;
}
.fee-unit{
  display:inline-block;
  margin-left:.62rem;
  font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);
  white-space:nowrap;
}
/* notation, not a blank */
.fee-words{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.05rem,1.35vw,1.24rem);
  line-height:1.35;
  color:var(--gold-soft);
  display:inline-block;
  text-wrap:balance;
}
.fee-mark{
  display:inline-block;
  width:.5rem;height:.5rem;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  margin-right:.6rem;
  vertical-align:.06em;
}

/* ---------- endorsement (the client's required caveat) ------------------- */
.fee-endorse{
  margin-top:clamp(2.2rem,4.5vw,3.2rem);
  margin-left:calc(var(--fee-numw) + var(--fee-gap));
  border-left:2px solid var(--gold);
  padding-left:clamp(1.1rem,2vw,1.6rem);
  max-width:66ch;
}
.fee-endorse-label{
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0 0 .7rem;
}
.fee-endorse p{
  color:var(--ink-70);font-size:.98rem;line-height:1.8;margin:0;
}

/* ---------- terms band (ivory) ------------------------------------------- */
.fee-terms-band{background:var(--paper);}
.fee-terms-grid{
  display:grid;
  /* grid children must be allowed to shrink below their content width, or the
     unbreakable email address widens the column and the page with it */
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2.4rem,6vw,5.5rem);
  align-items:start;
}
.fee-terms-grid h2{
  color:var(--navy);
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  margin:0 0 1.1rem;
  text-wrap:balance;
}
.fee-terms-intro{
  color:#42506b;font-size:1.02rem;line-height:1.8;margin:0 0 2rem;max-width:34ch;
}
.fee-terms-grid > *{min-width:0;}
.fee-cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.fee-email{
  margin:1.5rem 0 0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#6b7890;
}
.fee-email a{
  display:inline-block;padding-block:.75rem;
  overflow-wrap:anywhere;
  color:var(--navy);border-bottom:1px solid rgba(190,148,64,.5);
}
.fee-email a:hover{color:var(--gold);}

.fee-terms{list-style:none;margin:0;padding:0;counter-reset:fee-term;}
.fee-term{
  counter-increment:fee-term;
  position:relative;
  border-top:1px solid rgba(20,49,95,.14);
  padding:1.6rem 0 1.6rem 3.4rem;
}
.fee-term:last-child{border-bottom:1px solid rgba(20,49,95,.14);}
.fee-term::before{
  content:counter(fee-term,upper-roman);
  position:absolute;left:0;top:1.75rem;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;color:var(--gold);
}
.fee-term h3{
  font-family:var(--sans);
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);margin:0 0 .6rem;
}
.fee-term p{color:#42506b;font-size:1.01rem;line-height:1.8;margin:0;max-width:52ch;}
.fee-term p.fee-caution{font-style:italic;color:#6b7890;font-size:.96rem;}

/* ---------- responsive ---------------------------------------------------- */
@media(max-width:1080px){
  .fee-plate{--fee-figw:14rem;--fee-gap:1.5rem;}
}
@media(max-width:900px){
  .fee-head{grid-template-columns:1fr;gap:2.4rem;align-items:start;}
  .fee-lede{max-width:52ch;}
  .fee-key{max-width:44ch;}
}
@media(max-width:820px){
  .fee-terms-grid{grid-template-columns:1fr;gap:2.6rem;}
  .fee-terms-intro{max-width:52ch;}
}

/* Phone: the table stops being a table. Each service becomes a numbered
   entry — hanging index, name, then the figure on its own line beneath it,
   so a long notation sets as comfortably as a short numeral. */
@media(max-width:760px){
  .fee-scroll::after{display:none;}
  .fee-colhead{display:none;}
  .fee-ledger{border-top:1px solid rgba(190,148,64,.34);}
  .fee-grid{
    grid-template-columns:2.5rem minmax(0,1fr);
    grid-template-areas:
      "num  name"
      ".    fig";
    column-gap:.75rem;
    row-gap:.25rem;
    align-items:start;
  }
  .fee-num{grid-area:num;line-height:2.6;}
  .fee-c2{grid-area:name;}
  .fee-figure{grid-area:fig;padding-left:0;padding-bottom:.35rem;}
  .fee-row{padding-block:.85rem;}
  .fee-amt{font-size:1.95rem;}
  .fee-words{font-size:1.12rem;}
  .fee-unit{margin-left:.5rem;}
  .fee-endorse{margin-left:0;}
}
@media(max-width:420px){
  .fee-plate .fee-emblem{width:min(72vw,300px);right:-90px;}
  .fee-email{font-size:.74rem;letter-spacing:.05em;}
  .fee-grid{grid-template-columns:2.1rem minmax(0,1fr);column-gap:.6rem;}
  .fee-amt{font-size:1.8rem;}
  .fee-unit{display:block;margin-left:0;margin-top:.4rem;}
}


/* ---------- FAQ — the reference spread (sticky navy index rail + ivory entries) ---------- */
/* ==========================================================================
   FAQ page — "the reference spread"
   A navy index rail running the full height of the page beside an ivory
   column of numbered, always-open entries. No accordions: every answer is
   set out in full, so the page works identically with JS off.
   All new classes namespaced .faq-
   ========================================================================== */

/* ---------- masthead ----------------------------------------------------- */
.faq-masthead{
  background:var(--paper);
  padding-top:clamp(2.4rem,5vw,4rem);
  padding-bottom:clamp(2rem,4vw,3.2rem);
}
.faq-masthead .faq-mast-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,4rem);
  align-items:end;
}
.faq-crumb{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:#6b7890;margin:0 0 1.3rem;
}
.faq-crumb a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.5);padding-bottom:1px;}
.faq-crumb a:hover{color:var(--gold);}
.faq-masthead h1{
  font-size:clamp(2.5rem,5.6vw,4.3rem);
  color:var(--ink);
  letter-spacing:-.022em;
  margin:0 0 1.1rem;
  text-wrap:balance;
}
.faq-masthead h1 em{font-style:italic;color:var(--gold);}
.faq-lede{
  color:#42506b;
  font-size:clamp(1.04rem,1.5vw,1.2rem);
  line-height:1.65;
  max-width:46ch;
}
.faq-mast-note{
  border-top:1px solid var(--gold);
  padding-top:1rem;
}
.faq-mast-note .k{
  display:block;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.6rem;
  font-variant-numeric:tabular-nums;
}
.faq-mast-note p{
  font-size:.88rem;line-height:1.75;color:#6b7890;max-width:34ch;margin:0;
}

/* ---------- the spread: navy rail + ivory entries ------------------------ */
.faq-spread{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--edge);
  display:grid;
  grid-template-columns:288px minmax(0,1fr);
  gap:clamp(2rem,4.4vw,4.4rem);
  align-items:start;
}

/* rail ------------------------------------------------------------------- */
.faq-rail{
  position:relative;
  background:var(--ink);
  align-self:stretch;
  padding:1.9rem 1.5rem 2.4rem;
  color:#fff;
}
/* bleed the navy out to the left viewport edge */
.faq-rail::before{
  content:"";position:absolute;top:0;bottom:0;right:100%;
  width:100vw;background:var(--ink);
}
/* meridian hairlines */
.faq-rail::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(190,148,64,.09) 0 1px,transparent 1px 46px);
  opacity:.75;
}
.faq-rail-inner{
  position:sticky;top:1.6rem;z-index:2;
  max-height:calc(100vh - 3.2rem);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(190,148,64,.45) transparent;
}
.faq-rail-inner::-webkit-scrollbar{width:4px;}
.faq-rail-inner::-webkit-scrollbar-thumb{background:rgba(190,148,64,.45);}
.faq-rail-mark{width:38px;height:auto;opacity:.9;margin-bottom:1.15rem;}
.faq-rail-title{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  margin:0 0 .3rem;line-height:1;
}
.faq-rail-sub{
  font-size:.72rem;color:rgba(255,255,255,.4);letter-spacing:.04em;
  margin:0 0 1.5rem;
}
.faq-rail-group{
  font-family:var(--sans);font-size:.64rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin:1.5rem 0 .35rem;
  padding-bottom:.45rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.faq-rail-group:first-of-type{margin-top:0;}
.faq-rail ol{list-style:none;margin:0;padding:0;}
.faq-rail-link{
  display:grid;
  grid-template-columns:2.05rem minmax(0,1fr);
  align-items:baseline;
  gap:.15rem;
  min-height:44px;
  padding:.62rem 0 .5rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .2s ease;
}
.faq-rail-link .n{
  font-size:.68rem;font-weight:600;letter-spacing:.1em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.faq-rail-link .t{
  font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.76);
  transition:color .2s ease;
}
.faq-rail-link .f{
  grid-column:2;
  display:block;
  font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.85;margin-top:.28rem;
  font-variant-numeric:tabular-nums;
}
.faq-rail-link:hover .t,
.faq-rail-link:focus-visible .t{color:#fff;}
.faq-rail-link:hover .n{color:var(--gold-soft);}
.faq-rail-see{
  display:flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.6rem 0;
  font-size:.8rem;font-style:italic;color:rgba(255,255,255,.6);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.faq-rail-see:hover{color:var(--gold-soft);}
.faq-rail-see .ar{color:var(--gold);font-style:normal;}

/* entries column ---------------------------------------------------------- */
.faq-col{min-width:0;padding-bottom:clamp(2.5rem,5vw,4rem);}

.faq-sechead{
  display:flex;align-items:baseline;gap:1rem;
  margin:0 0 .4rem;
  padding-top:clamp(1.6rem,3vw,2.4rem);
}
.faq-sechead h2{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin:0;flex:0 0 auto;line-height:1.4;
}
.faq-sechead .rule{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(190,148,64,.55),rgba(20,49,95,.12));}
.faq-sechead .range{
  flex:0 0 auto;font-size:.68rem;letter-spacing:.16em;color:#6b7890;
  font-variant-numeric:tabular-nums;
}

.faq-entry{
  border-top:1px solid rgba(20,49,95,.14);
  padding:1.5rem 0 2.3rem;
  scroll-margin-top:1.5rem;
  transition:border-color .3s ease;
}
.faq-entry:first-of-type{border-top-color:rgba(20,49,95,.22);}
.faq-entry-top{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem 1.2rem;
  margin-bottom:.9rem;
}
.faq-num{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;color:var(--gold);
  font-variant-numeric:tabular-nums;
  padding:.15rem .05rem;
  transition:color .3s ease;
}
.faq-chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem;
  justify-content:flex-end;
}
.faq-chip{
  font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.3rem .58rem;
  border:1px solid rgba(20,49,95,.18);
  color:#6b7890;
  background:rgba(255,255,255,.5);
  border-radius:2px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.faq-chip.is-form{
  border-color:rgba(190,148,64,.55);
  color:var(--navy);
  background:rgba(190,148,64,.09);
}
.faq-entry h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.22rem,2.1vw,1.62rem);
  line-height:1.28;color:var(--navy);
  margin:0 0 .95rem;
  max-width:32ch;
  text-wrap:balance;
}
.faq-answer p{
  color:#42506b;font-size:1.03rem;line-height:1.88;
  max-width:66ch;margin:0 0 .9rem;
}
.faq-answer p:last-child{margin-bottom:0;}
.faq-see{
  display:flex;align-items:center;flex-wrap:wrap;gap:.45rem .9rem;
  margin-top:1.25rem;
}
.faq-see .lbl{
  font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#98a2b6;
}
.faq-see a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--sans);font-size:.83rem;font-weight:500;
  color:var(--navy);
  border-bottom:1px solid rgba(190,148,64,.5);
  padding:.15rem 0;
  transition:color .2s ease,border-color .2s ease;
}
.faq-see a::before{content:"→";color:var(--gold);font-size:.8em;}
.faq-see a:hover{color:var(--gold);border-color:var(--gold);}

/* deep-link highlight (pure CSS, no JS) */
.faq-entry:target{border-top-color:var(--gold);}
.faq-entry:target .faq-num{color:var(--ink);}

/* the fees cross-reference plate ------------------------------------------ */
.faq-xref{
  background:var(--white);
  border:1px solid rgba(20,49,95,.1);
  border-left:3px solid var(--gold);
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  margin:1.9rem 0 .4rem;
}
.faq-xref .k{
  display:block;font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.7rem;
}
.faq-xref h3{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.18rem,2vw,1.5rem);
  color:var(--navy);margin:0 0 .8rem;line-height:1.3;
}
.faq-xref p{color:#42506b;font-size:1rem;line-height:1.82;margin:0 0 .9rem;max-width:62ch;}
.faq-xref p:last-of-type{margin-bottom:1.2rem;}

/* the closing plate ------------------------------------------------------- */
.faq-ask{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  background:var(--white);
  border:1px solid rgba(190,148,64,.4);
  padding:clamp(1.8rem,4vw,2.8rem);
  box-shadow:0 26px 50px -38px rgba(12,27,58,.5);
}
.faq-ask .k{
  display:block;font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.7rem;
}
.faq-ask h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2rem);color:var(--navy);
  margin:0 0 .8rem;line-height:1.22;max-width:22ch;
}
.faq-ask p{color:#42506b;font-size:1rem;line-height:1.8;margin:0;max-width:58ch;}
.faq-ask-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;
  margin-top:1.5rem;
}
.faq-ask .faq-ask-mail{
  margin:0;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#6b7890;
}
.faq-ask .faq-ask-mail a{color:var(--navy);border-bottom:1px solid rgba(190,148,64,.5);}
.faq-ask .faq-ask-mail a:hover{color:var(--gold);}

/* the colophon / disclaimer band ------------------------------------------ */
.faq-colophon{
  position:relative;overflow:hidden;
  background:var(--navy);
  color:#fff;
  border-top:1px solid rgba(190,148,64,.45);
  padding-block:clamp(2.8rem,6vw,4.4rem);
  margin-top:clamp(2.8rem,6vw,4.5rem);
}
.faq-colophon .faq-emblem{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(40vw,320px);opacity:.07;pointer-events:none;z-index:0;
}
.faq-colophon .faq-colo-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:2.05rem minmax(0,1fr);
  gap:0 1.2rem;max-width:860px;
}
.faq-colophon .n{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:2.1;
}
.faq-colophon .k{
  display:block;font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);
  margin-bottom:.65rem;
}
.faq-colophon h2{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.85rem);color:#fff;margin:0 0 .9rem;line-height:1.3;
}
.faq-colophon p{
  color:var(--ink-70);font-size:1rem;line-height:1.85;max-width:62ch;margin:0;
}

/* ---------- responsive --------------------------------------------------- */
@media(max-width:1020px){
  .faq-spread{
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding-inline:0;
  }
  .faq-rail{
    padding:clamp(1.6rem,4vw,2.2rem) var(--edge) clamp(1.8rem,4vw,2.4rem);
    margin-bottom:clamp(2rem,5vw,3rem);
  }
  .faq-rail::before{display:none;}
  .faq-rail-inner{position:static;max-height:none;overflow:visible;}
  .faq-col{padding-inline:var(--edge);}
  .faq-rail-link{grid-template-columns:2.3rem minmax(0,1fr);}
  .faq-rail-link .t{font-size:.94rem;}
}
@media(min-width:561px) and (max-width:1020px){
  /* two-up contents on tablet so the index doesn't run the whole screen */
  .faq-rail ol{display:grid;grid-template-columns:1fr 1fr;gap:0 2.2rem;}
  .faq-rail ol li{min-width:0;display:flex;}
  .faq-rail ol li .faq-rail-link{flex:1 1 auto;align-content:start;}
}
@media(max-width:900px){
  .faq-masthead .faq-mast-grid{grid-template-columns:minmax(0,1fr);gap:1.8rem;align-items:start;}
  .faq-mast-note p{max-width:52ch;}
}
@media(max-width:560px){
  .faq-ask .btn{width:100%;}
  .faq-ask h2{max-width:none;}
}
/* touch widths: expand the hit area of the small inline links to 44px
   without moving their underline away from the text */
@media(max-width:820px){
  .faq-see{gap:1rem 1.1rem;}
  .faq-see a,.faq-crumb a,.faq-ask-mail a{position:relative;}
  .faq-see a::after,.faq-crumb a::after,.faq-ask-mail a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
}
@media(max-width:560px){
  .faq-entry-top{gap:.55rem;}
  .faq-chips{justify-content:flex-start;width:100%;}
  .faq-entry h3{max-width:none;font-size:1.2rem;}
  .faq-answer p{font-size:1rem;line-height:1.82;}
  .faq-colophon .faq-colo-grid{grid-template-columns:minmax(0,1fr);}
  .faq-colophon .n{line-height:1.4;margin-bottom:.6rem;}
  .faq-sechead{flex-wrap:wrap;gap:.5rem .8rem;}
  .faq-sechead .rule{min-width:2rem;}
}
@media(prefers-reduced-motion:reduce){
  .faq-entry,.faq-num,.faq-see a,.faq-rail-link,.faq-rail-link .t{transition:none;}
}


/* ---------- ABOUT — the instrument plate (credentials as the portrait) ---------- */
/* ==========================================================================
   ABOUT — "the mounted plate"
   All new classes are namespaced .abt-*  (merge into brand.css later)
   ========================================================================== */

/* ---------- 1. OPENING: nameplate left / mounted instrument plate right --- */
.abt-open{
  background:var(--paper);
  padding-block:clamp(2.4rem,5vw,4.2rem) clamp(4rem,8vw,7rem);
  position:relative;
}
.abt-open-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,398px);
  grid-template-areas:
    "head  plate"
    "bio   plate";
  /* the plate spans both rows; without a flexible second row the browser
     dumps its extra height into row 1 and strands the nameplate rule ~600px
     above the biography */
  grid-template-rows:auto 1fr;
  column-gap:clamp(2.4rem,5.2vw,5.2rem);
  row-gap:clamp(1.3rem,2.2vw,1.9rem);
  align-items:start;
}
.abt-head{grid-area:head;}
.abt-bio{grid-area:bio;}
.abt-plate{grid-area:plate;}

.abt-crumb{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted,#6b7890);margin:-.7rem 0 1rem;
}
/* inline-flex + min-height keeps the tap target at 44px without pushing the
   gold underline away from the word */
.abt-crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);}
.abt-crumb a span{border-bottom:1px solid rgba(190,148,64,.5);padding-bottom:2px;}
.abt-crumb a:hover{color:var(--gold);}

.abt-role{margin-bottom:1.4rem;}

.abt-name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.55rem,6.4vw,4.5rem);
  line-height:.98;letter-spacing:-.025em;
  color:var(--ink);margin:0;
}
.abt-name .abt-suffix{
  display:block;margin-top:1.15rem;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(.7rem,1vw,.8rem);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);
}
.abt-hair{
  height:1px;margin-top:clamp(1.7rem,3vw,2.3rem);
  background:linear-gradient(90deg,var(--gold) 0%,rgba(190,148,64,.55) 34%,rgba(190,148,64,0) 100%);
}

.abt-bio p{
  color:#42506b;font-size:1.04rem;line-height:1.82;
  margin:0 0 1.15rem;max-width:37em;
}
.abt-bio p:last-child{margin-bottom:0;}
.abt-bio .abt-lede{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.24rem,2.1vw,1.6rem);
  line-height:1.44;color:var(--navy);
  margin-bottom:1.7rem;max-width:24em;
}

/* ---------- the plate itself --------------------------------------------- */
.abt-plate{
  position:relative;align-self:start;
  margin:0;                       /* <figure> default margin would inset it 40px */
  background:linear-gradient(180deg,#173763 0%,#0F2549 58%,var(--ink) 100%);
  border:1px solid rgba(190,148,64,.36);
  border-radius:3px;overflow:hidden;
  box-shadow:0 44px 74px -44px rgba(12,27,58,.62);
}
.abt-aperture{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(122% 96% at 34% 18%,#1C4179 0%,#0B1A31 76%);
}
.abt-etch{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.abt-emblem{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58%;max-width:224px;opacity:.26;z-index:2;
}
/* the vignette + bezel sit ABOVE the photo, so the plate still reads as an
   instrument once a real portrait is dropped in */
.abt-aperture::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(118% 88% at 50% 38%,rgba(11,26,49,0) 42%,rgba(8,18,36,.62) 100%);
}
.abt-bezel{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;}
/* PORTRAIT DROP-IN — see the commented <img> in the markup below */
.abt-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;z-index:3;
}

.abt-creds{
  border-top:1px solid rgba(190,148,64,.36);
  padding:clamp(1.2rem,2.3vw,1.6rem) clamp(1.2rem,2.3vw,1.6rem) clamp(1.4rem,2.6vw,1.85rem);
}
.abt-creds-h{
  font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1rem;
}
.abt-cred-list{list-style:none;margin:0;padding:0;}
.abt-cred{
  position:relative;
  padding:.78rem 0 .78rem 1.4rem;
  border-top:1px solid rgba(211,180,115,.2);
  font-family:var(--serif);font-weight:400;
  font-size:1rem;line-height:1.45;
  color:rgba(255,255,255,.93);
}
.abt-cred:first-child{border-top:0;}
.abt-cred::before{
  content:"";position:absolute;left:1px;top:1.32rem;
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg);
}

/* ---------- 2. THE FIRM: navy band, statement + two-column setting -------- */
.abt-firm{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding-block:clamp(4rem,8vw,7rem);
}
.abt-firm-art{
  position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:min(780px,60%);opacity:.6;pointer-events:none;z-index:1;
}
.abt-firm .wrap{position:relative;z-index:2;}
.abt-firm .eyebrow{color:var(--gold-soft);}
.abt-firm-lead{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(1.62rem,3.3vw,2.55rem);
  line-height:1.22;letter-spacing:-.012em;
  max-width:19ch;margin:0;
}
.abt-cols{
  margin-top:clamp(2.2rem,4.4vw,3.2rem);
  padding-top:clamp(1.9rem,3.6vw,2.6rem);
  border-top:1px solid rgba(190,148,64,.34);
  columns:2;column-gap:clamp(2rem,4.4vw,4rem);
  column-rule:1px solid rgba(190,148,64,.24);
  orphans:2;widows:2;
}
.abt-cols p{
  color:var(--ink-70);font-size:1.01rem;line-height:1.82;
  margin:0 0 1.2rem;break-inside:avoid;
}
.abt-cols p:last-child{margin-bottom:0;}
.abt-cols .abt-refer{color:var(--gold-soft);}

/* ---------- 3. GEOGRAPHY: the differentiator, given its own air ----------- */
.abt-geo{
  position:relative;overflow:hidden;background:var(--white);
  padding-block:clamp(3.2rem,6.4vw,5.4rem);
  border-bottom:1px solid rgba(20,49,95,.08);
}
.abt-geo-art{
  position:absolute;right:-10%;top:50%;transform:translateY(-50%);
  width:min(700px,58%);opacity:.75;pointer-events:none;z-index:1;
}
.abt-geo .wrap{position:relative;z-index:2;}
.abt-geo-grid{
  display:grid;grid-template-columns:minmax(140px,196px) minmax(0,1fr);
  gap:clamp(.9rem,3vw,3rem);align-items:start;
}
.abt-geo-h{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--navy);
  margin:0;padding-top:1.1rem;border-top:1px solid var(--gold);
}
.abt-geo-p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.36;letter-spacing:-.012em;
  color:var(--navy);margin:0;max-width:19em;
}
.abt-place{border-bottom:2px solid var(--gold-soft);padding-bottom:2px;}

/* ---------- 4. WHO WE WORK WITH: margin-noted entries --------------------- */
.abt-who{background:var(--paper);padding-block:clamp(4rem,8vw,7rem);}
.abt-who-h{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.85rem,3.8vw,2.7rem);line-height:1.14;
  letter-spacing:-.018em;margin:0 0 clamp(2rem,4vw,3rem);max-width:16ch;
}
.abt-entry{
  display:grid;grid-template-columns:minmax(140px,196px) minmax(0,1fr);
  gap:clamp(.6rem,3vw,3rem);align-items:start;
  padding-top:clamp(1.3rem,2.6vw,1.9rem);
  margin-top:clamp(1.3rem,2.6vw,1.9rem);
  border-top:1px solid rgba(20,49,95,.13);
}
.abt-entry:first-of-type{margin-top:0;border-top:1px solid rgba(190,148,64,.6);}
.abt-entry-k{
  display:flex;align-items:baseline;gap:.75rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--navy);
  margin:0;line-height:1.5;
}
.abt-entry-n{color:var(--gold);letter-spacing:.12em;font-size:.66rem;}
.abt-entry p{
  color:#42506b;font-size:1.05rem;line-height:1.84;margin:0;max-width:60ch;
}

/* ---------- 5. CLOSE: the four beats as one engraved line ----------------- */
.abt-close{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
  padding-block:clamp(4rem,8vw,7rem);
}
.abt-close-emblem{
  position:absolute;left:-7%;top:50%;transform:translateY(-50%);
  width:min(560px,52%);opacity:.055;pointer-events:none;z-index:1;
}
.abt-close .wrap{position:relative;z-index:2;}
.abt-close-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2.2rem,5vw,4.6rem);align-items:end;
}
.abt-beats{
  font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(1.48rem,3.3vw,2.42rem);
  line-height:1.32;letter-spacing:-.014em;margin:0;max-width:17ch;
}
.abt-beats .abt-beat{display:inline-block;}
.abt-beats .abt-stop{color:var(--gold);}
.abt-close-side{
  border-left:1px solid rgba(190,148,64,.32);
  padding-left:clamp(1.4rem,3vw,2.6rem);
}
.abt-close .eyebrow{color:var(--gold-soft);}
.abt-close-side p{
  color:var(--ink-70);font-size:1.02rem;line-height:1.78;margin:0 0 1.9rem;
}
.abt-close-side .abt-email{
  margin:.9rem 0 0;font-size:.95rem;color:var(--ink-55);
}
.abt-close-side .abt-email a{
  display:inline-flex;align-items:center;min-height:44px;color:var(--gold-soft);
}
.abt-close-side .abt-email a span{
  border-bottom:1px solid rgba(190,148,64,.4);padding-bottom:2px;
}

/* ---------- responsive ---------------------------------------------------- */
@media(max-width:1040px){
  .abt-open-grid{
    grid-template-columns:minmax(0,1fr) minmax(280px,340px);
    column-gap:clamp(2rem,4vw,3rem);
  }
  .abt-firm-lead{max-width:22ch;}
}
@media(max-width:880px){
  .abt-open-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "plate" "bio";
    grid-template-rows:auto;
    row-gap:clamp(2rem,5vw,2.6rem);
  }
  .abt-plate{max-width:400px;}
  .abt-bio .abt-lede{max-width:none;}
  .abt-cols{columns:1;column-rule:none;}
  .abt-firm-lead{max-width:none;}
  .abt-firm-art,.abt-geo-art{opacity:.35;}
  .abt-geo-grid,.abt-entry{grid-template-columns:minmax(0,1fr);}
  .abt-geo-h{padding-top:.9rem;margin-bottom:.3rem;}
  .abt-geo-p{max-width:none;}
  .abt-who-h{max-width:none;}
  .abt-entry-k{margin-bottom:.55rem;}
  .abt-close-grid{grid-template-columns:minmax(0,1fr);align-items:start;}
  .abt-beats{max-width:none;}
  .abt-close-side{
    border-left:0;padding-left:0;
    border-top:1px solid rgba(190,148,64,.32);padding-top:clamp(1.6rem,4vw,2.2rem);
  }
}
@media(max-width:420px){
  .abt-emblem{width:60%;}
  .abt-cred{font-size:.97rem;}
}

/* Long unbreakable strings — the public email is 32 characters with no break
   opportunity and overflowed the viewport at 320px (found on faq.html, but it
   is printed on most pages). Break it only when it genuinely cannot fit. */
.faq-ask-mail, .faq-ask-mail a,
.fee-mail, .fee-mail a,
.dtl-mail, .dtl-mail a, .dtl-next-mail, .dtl-next-mail a,
.abt-email, .abt-email a,
.closing .email, .closing .email a,
.formnote, .formnote a,
.contact-aside dd, .contact-aside dd a,
footer a[href^="mailto:"]{
  overflow-wrap:anywhere;
}

/* ============================================================================
   WIDE-SCREEN MEASURE — 2026-08-23 (operator review)
   The 1220px container was designed against a 1280px canvas. On a 1920 display it
   left 588px of dead space before the hero's first word, and 908px at 2560 — the
   page read as a narrow column adrift in the middle of the screen. Let the shell
   breathe with the viewport instead of pinning it at 1220.
   ========================================================================= */
@media(min-width:1500px){
  :root{ --maxw:1400px; --edge:clamp(4.5rem,6vw,7rem); }
}
@media(min-width:1900px){
  :root{ --maxw:1560px; }
}

/* The hero is a left-anchored statement, not a centred block.
   NOTE: .hero-inner IS the .wrap (one element, two classes). Capping it shrinks the
   shell and `margin:0 auto` then re-centres the whole hero — which is what put the
   headline 588px from the left edge. So the shell keeps the full --maxw and the
   MEASURE is constrained on the text itself. */
.hero-inner{max-width:var(--maxw);width:100%;flex:1 1 auto;}
.hero-inner #hero-title{max-width:15ch;}
.hero-inner .sub{max-width:54ch;}
.hero-inner .eyebrow{margin-left:0;}

/* FAQ rail: the navy ground already bleeds to the viewport edge, but its CONTENT
   was centred inside the 1220 shell, so on a wide screen the index floated in the
   middle of a large empty navy field. Pull it toward the bleed edge it belongs to. */
@media(min-width:1500px){
  .faq-rail-inner{ padding-left:0; margin-left:calc(-1 * clamp(0px, (100vw - var(--maxw)) / 2 - 2rem, 12rem)); }
}


/* --- About portrait, installed 2026-08-23 -------------------------------
   Client supplied a 616x561 headshot (Squarespace caps it there). It is nearly
   square, so the plate's original 4:5 aperture would both crop her badly and
   upscale a small file. The frame follows the photograph instead.
   The etched compass field and emblem were the stand-in for a MISSING portrait —
   they are [hidden] now rather than deleted, so removing the <img> restores the
   original plate exactly. The gold bezel and the engraved credential caption stay. */
.abt-aperture{aspect-ratio:5/6;}
.abt-photo{
  position:absolute;inset:0;z-index:3;
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  display:block;
}
/* A quiet navy duotone wash ties the warm photo to the plate's palette. */
.abt-photo{filter:saturate(.92) contrast(1.02);}
.abt-aperture::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,27,58,0) 52%,rgba(12,27,58,.42) 100%);
}
[data-when="no-photo"][hidden]{display:none;}

/* --- The globe (Why Clients Choose Us) ------------------------------------
   Replaces a sixth reuse of the compass emblem. Generated by tools/build_globe.py
   from real orthographic projection; the markers are the client's own stated
   geography, so it carries information rather than filling space. */
.globe-mark{
  justify-self:center;
  width:min(88%,440px);height:auto;
  opacity:.96;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));
}
@media(max-width:820px){
  .globe-mark{width:min(72%,320px);margin-top:2.5rem;}
}

/* Homepage founder portrait now carries the real photograph (installed 2026-08-23).
   Ratio follows the supplied file (467x561) so nothing is upscaled or over-cropped;
   the caption keeps its scrim so the name stays legible over the image. */
.founder .portrait{aspect-ratio:5/6;}
.founder .portrait img{object-position:50% 20%;}

/* Contact form fallback notice — visible only while no endpoint is wired. */
.form-fallback{
  margin-top:1rem;padding:.9rem 1.1rem;
  border-left:3px solid var(--maroon);background:rgba(122,30,43,.05);
  font-size:.9rem;line-height:1.65;color:#42506b;
}
.form-fallback[hidden]{display:none;}

/* Launch-stopgap notice (contact page). Visible only while the firm has no published
   contact route; the generator omits it entirely once EMAIL or FORM_ENDPOINT is set. */
.notice{
  border-left:3px solid var(--gold);
  background:var(--paper);
  padding:clamp(1.2rem,2.5vw,1.6rem) clamp(1.3rem,3vw,1.9rem);
  margin-bottom:clamp(2rem,4vw,3rem);
  max-width:70ch;
}
.notice-h{
  font-family:var(--serif);font-size:1.12rem;color:var(--navy);
  margin:0 0 .5rem;font-weight:500;
}
.notice p{color:#42506b;font-size:.98rem;line-height:1.75;margin:0;}