/* ==========================================================================
   USWMC design system

   Disciplined on purpose. The previous build carried 25 font sizes and
   25 colours, including 13.3333px and 19.305px. Real institutional finance
   sites run far tighter: Bank of America 5 type tokens, Trade Republic 5,
   Ramp 7, Lloyds 8. This system uses 8 type tokens and 10 colours.

   Rules:
     - Two families only. Cormorant Garamond (display), Inter (everything).
     - Radius is 0. No timid 3px corners.
     - No box shadows. Hierarchy comes from hairlines and ground colour.
     - Gold is an accent: rules, small caps, hover states. Never a fill.
     - No em dashes or en dashes in copy.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* 10 colours, no more */
  --navy-900:#081729;   /* deepest ground, footer */
  --navy-800:#0E2240;   /* primary navy */
  --navy-700:#1A335A;   /* hover on navy */
  --gold:#C9A84C;       /* accent on dark */
  --gold-deep:#A88836;  /* accent on light, passes AA */
  --paper:#FAF8F2;      /* default ground */
  --cream:#F4F0E5;      /* alternating ground */
  --ink:#131C2E;        /* headlines */
  --body:#2F3B4E;       /* body copy */
  --muted:#5B6776;      /* secondary copy */
  --line:#E2DDD0;       /* hairline on light */
  --line-dark:rgba(250,248,242,.16);  /* neutral hairline on dark, was gold-tinted */
  --alert:#8C2F2F;      /* form errors only */

  /* Text on dark grounds. Exactly three steps, no ad-hoc alphas.
     The old build had 0.5, 0.55, 0.7, 0.72, 0.74 and 0.95 side by side,
     which is six values for three actual jobs. */
  --on-dark-strong:#FAF8F2;
  --on-dark:rgba(250, 248, 242, 0.72);
  --on-dark-soft:rgba(250, 248, 242, 0.50);

  --f-display:"Cormorant Garamond",Georgia,serif;
  --f-sans:"Inter",system-ui,-apple-system,sans-serif;

  /* 8 type tokens */
  --t-display:clamp(40px,6vw,76px);
  --t-h1:clamp(34px,4.4vw,56px);
  --t-h2:clamp(26px,3vw,38px);
  --t-h3:20px;
  --t-body:17px;
  --t-small:15px;
  --t-label:12px;
  --t-fine:12px;

  /* Vertical rhythm. Four distinct steps, not one value repeated.
     A flat rhythm reads as machine-stamped; real sites vary the interval
     by how big a break in thought the boundary represents. */
  --space-tight:clamp(28px,4vw,48px);    /* within a group */
  --space-block:clamp(48px,6vw,88px);    /* between related blocks */
  --space-section:clamp(72px,9vw,136px); /* between sections */
  --space-major:clamp(104px,14vw,216px); /* hero to content, and before the close */

  --gutter:24px;
  --header-h:76px;
}
@media(min-width:1024px){ :root{ --gutter:48px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-family:var(--f-sans)}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
button{font:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
::selection{background:var(--gold);color:var(--navy-900)}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
[hidden]{display:none!important}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:820px}
.section{padding-block:var(--space-section)}
.section-sm{padding-block:var(--space-block)}
.section-major{padding-block:var(--space-major)}
/* First section after the hero gets the larger interval: the break from
   an immersive dark hero into content is the biggest on the page. */
.hero + .section,.phead + .section{padding-top:var(--space-major)}

.ground-paper{background:var(--paper)}
.ground-cream{background:var(--cream)}
.ground-navy{background:var(--navy-800);color:var(--on-dark)}
.ground-navy9{background:var(--navy-900);color:var(--on-dark)}
.ground-navy h1,.ground-navy h2,.ground-navy h3,
.ground-navy9 h1,.ground-navy9 h2,.ground-navy9 h3{color:var(--paper)}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-weight:300;font-size:var(--t-display);
  line-height:1.04;letter-spacing:-.02em;color:var(--ink);overflow-wrap:break-word}
.h1{font-family:var(--f-display);font-weight:300;font-size:var(--t-h1);
  line-height:1.08;letter-spacing:-.015em;color:var(--ink);overflow-wrap:break-word}
.h2{font-family:var(--f-display);font-weight:300;font-size:var(--t-h2);
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.h3{font-family:var(--f-sans);font-weight:600;font-size:var(--t-h3);
  line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.label{font-family:var(--f-sans);font-weight:600;font-size:var(--t-label);
  line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.ground-navy .label,.ground-navy9 .label{color:var(--gold)}
.lede{font-size:var(--t-body);line-height:1.75;color:var(--body);max-width:62ch}
.ground-navy .lede,.ground-navy9 .lede{color:var(--on-dark)}
.small{font-size:var(--t-small);line-height:1.7;color:var(--muted)}
.fine{font-size:var(--t-fine);line-height:1.65;color:var(--muted)}
.num{font-family:var(--f-display);font-weight:300;font-size:56px;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---------- rules and accents ---------- */
.rule-gold{width:44px;height:1px;background:var(--line);border:0;margin:0 0 22px}
.ground-navy .rule-gold,.ground-navy9 .rule-gold{background:var(--line-dark)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;
  font-weight:600;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;
  transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn svg{flex:none;transition:transform 200ms ease}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--navy-800);color:var(--paper)}
.btn-primary:hover{background:var(--navy-700)}
.btn-invert{background:var(--paper);color:var(--navy-800)}
.btn-invert:hover{background:var(--cream)}
.btn-quiet{border:1px solid var(--line);color:var(--ink)}
.btn-quiet:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.btn-quiet-dark{border:1px solid var(--line-dark);color:var(--paper)}
.btn-quiet-dark:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- header ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:60;
  background:var(--paper);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.mark{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;align-items:center}
.mark b{font-family:var(--f-display);font-weight:600;font-size:22px;letter-spacing:.09em;color:var(--ink)}
.nav{display:none;align-items:center;gap:30px}
.nav > li{position:relative}
.nav a,.nav button,.navlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:var(--t-label);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.nav a:hover,.nav button:hover,.navlink:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--gold-deep)}
.hdr-act{display:none;align-items:center;gap:20px}
@media(min-width:1080px){.nav,.hdr-act{display:flex}.burger{display:none!important}}

/* dropdown */
.menu{position:absolute;top:100%;left:-18px;min-width:260px;
  background:var(--paper);border:1px solid var(--line);padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity 180ms ease,transform 180ms ease,visibility 180ms}
.nav li:hover .menu,.nav li:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-height:auto;padding:11px 18px;text-transform:none;letter-spacing:normal;
  font-size:var(--t-small);font-weight:500;color:var(--ink)}
.menu a span{font-size:var(--t-fine);font-weight:400;color:var(--muted);letter-spacing:normal}
.menu a:hover{background:var(--cream);color:var(--gold-deep)}

.burger{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-right:-12px;color:var(--ink)}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:70;height:100dvh;background:var(--navy-800);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);flex:none}
.sheet-top .mark b{color:var(--paper)}
.sheet-body{flex:1;overflow-y:auto;padding-bottom:40px}
.sheet-link{display:flex;align-items:center;min-height:54px;border-top:1px solid var(--line-dark);
  font-family:var(--f-display);font-weight:300;font-size:26px;color:var(--paper)}
.sheet-sub{padding-left:18px;font-size:20px;color:var(--on-dark)}
.sheet .btn{width:100%;margin-top:28px}

/* ---------- page head ---------- */
.phead{background:var(--navy-800);position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + 56px);padding-bottom:56px}
@media(min-width:1024px){.phead{padding-top:calc(var(--header-h) + 88px);padding-bottom:80px}}
.phead::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line-dark)}
.phead .h1{color:var(--paper);max-width:20ch}
.phead .lede{color:var(--on-dark);margin-top:20px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-800);
  padding-top:calc(var(--header-h) + 56px);padding-bottom:64px}
@media(min-width:1024px){
  .hero{padding-top:calc(var(--header-h) + 104px);padding-bottom:112px;min-height:92svh;
    display:flex;align-items:center}
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,34,64,.93) 0%,rgba(14,34,64,.78) 40%,rgba(8,23,41,.52) 100%)}
.hero-in{position:relative;width:100%}
.hero .display{color:var(--paper)}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.hero-rule{position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line-dark)}

/* ---------- grids ---------- */
.grid{display:grid;gap:32px}
@media(min-width:1024px){
  .g12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px}
  /* grid-column-end, not the shorthand: a later grid-column-start would
     otherwise reset the end to auto and collapse the item to one track. */
  .c3{grid-column-end:span 3}.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}
  .c6{grid-column-end:span 6}.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}
  .start5{grid-column-start:5}.start7{grid-column-start:7}.start9{grid-column-start:9}
  .sticky{position:sticky;top:calc(var(--header-h) + 40px)}
}

/* ---------- stat strip, hairlines not cards ---------- */
.stats{display:grid;border:1px solid var(--line-dark)}
/* Three across only on tablet. On desktop the panel is a narrow column,
   so stacking keeps the labels on one line. */
@media(min-width:640px) and (max-width:1023px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{padding:24px 26px;border-top:1px solid var(--line-dark)}
.stat:first-child{border-top:0}
@media(min-width:640px) and (max-width:1023px){
  .stat{border-top:0;border-left:1px solid var(--line-dark)}
  .stat:first-child{border-left:0}
}
.stat .num{color:var(--paper)}
.stat .label{display:block;margin-top:8px}

/* ---------- ruled list ---------- */
.rows > li{border-top:1px solid var(--line)}
.rows a,.rows .static{display:flex;align-items:flex-start;justify-content:space-between;
  gap:22px;min-height:44px;padding-block:24px}
.rows .h3{transition:color 200ms ease}
.rows a:hover .h3{color:var(--gold-deep)}
.rows p{margin-top:6px;font-size:var(--t-small);line-height:1.65;color:var(--muted);max-width:56ch}
.rows svg{flex:none;margin-top:5px;color:var(--gold-deep);transition:transform 200ms ease,opacity 200ms ease}
@media(min-width:1024px){
  .rows a svg{opacity:0}
  .rows a:hover svg{opacity:1;transform:translateX(4px)}
}

/* ---------- numbered rows ---------- */
.numrow{border-top:1px solid var(--line);padding-block:36px}
.numrow .n{font-family:var(--f-display);font-weight:300;font-size:56px;line-height:1;color:var(--line)}
@media(min-width:1024px){
  .numrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:48px}
  .numrow .n{grid-column:span 2;font-size:96px}
  .numrow .b{grid-column:4/span 7}
}

/* ---------- pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border:1px solid var(--line);color:var(--gold-deep);
  font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.ground-navy .pill,.ground-navy9 .pill{border-color:var(--line-dark);color:var(--gold)}

/* ---------- quote ---------- */
.quote p{font-family:var(--f-display);font-weight:300;color:var(--on-dark-strong);
  font-size:clamp(23px,3vw,40px);line-height:1.32}
.quote footer{margin-top:28px}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-h2);
  line-height:1.18;color:var(--ink);margin-top:56px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-h3);font-weight:600;color:var(--ink);margin-top:32px}
.prose p{margin-top:16px}
.prose ul{margin-top:16px}
.prose ul li{position:relative;padding-left:22px;margin-top:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--gold-deep)}
.prose a{color:var(--gold-deep);border-bottom:1px solid var(--line)}
.prose a:hover{border-bottom-color:var(--gold-deep)}
.prose strong{font-weight:600;color:var(--ink)}

.tel{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-deep)}
.tel:hover{color:var(--ink)}

/* ---------- forms ---------- */
.form{border:1px solid var(--line);background:var(--paper);padding:26px}
@media(min-width:1024px){.form{padding:36px}}
.field{margin-bottom:22px}
.field label{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;margin-top:6px;padding:8px 0;
  font-family:var(--f-sans);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;transition:border-color 200ms ease}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold-deep)}
.err{margin-top:6px;font-size:var(--t-fine);color:var(--alert)}

/* ---------- footer ---------- */
.ft{background:var(--navy-900);color:var(--on-dark)}
.ft-top{padding-top:var(--space-major);padding-bottom:var(--space-block)}
@media(min-width:1024px){.ft-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:44px}
  .ft-brand{grid-column:span 3}.ft-cols{grid-column:4/span 9}}
.ft-cols{display:grid;gap:32px;margin-top:40px}
@media(min-width:640px){.ft-cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ft-cols{grid-template-columns:repeat(4,1fr);margin-top:0}}
.ft h2{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ft-cols a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-small);color:var(--on-dark)}
.ft-cols a:hover{color:var(--paper)}
.ft-fine{border-top:1px solid var(--line-dark)}
.ft-fine ol{display:grid;gap:14px;padding-block:40px}
@media(min-width:768px){.ft-fine ol{grid-template-columns:repeat(2,1fr);gap:14px 44px}}
.ft-fine li{font-size:var(--t-fine);line-height:1.65;color:var(--on-dark-soft)}
.ft-fine b{color:var(--gold);font-weight:600;margin-right:5px}
.ft-copy{border-top:1px solid var(--line-dark);padding-block:24px;
  font-size:var(--t-fine);color:var(--on-dark-soft)}

/* ---------- reveal ---------- */
.js-anim .reveal{opacity:0;transform:translateY(14px)}
.reveal{transition:opacity 640ms cubic-bezier(.16,1,.3,1),transform 640ms cubic-bezier(.16,1,.3,1)}
.reveal.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- document rail (legal pages) ---------- */
.doc-rail{margin-top:14px}
.doc-rail a{display:flex;align-items:center;min-height:44px;padding-left:14px;
  border-left:1px solid var(--line);font-size:var(--t-small);color:var(--muted);
  transition:color 200ms ease,border-color 200ms ease}
.doc-rail a:hover,.doc-rail a[aria-current="true"]{color:var(--gold-deep);border-left-color:var(--gold-deep)}
@media(min-width:1024px){.start3{grid-column-start:3}}

/* ---------- auth ---------- */
.auth{display:grid;min-height:100svh;background:var(--navy-800)}
@media(min-width:1024px){.auth{grid-template-columns:1fr 1fr}}
.auth-art{position:relative;display:none;overflow:hidden}
@media(min-width:1024px){.auth-art{display:block}}
.auth-art img{width:100%;height:100%;object-fit:cover}
.auth-art .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,34,64,.70),rgba(8,23,41,.92))}
.art-copy{position:absolute;inset-inline:0;bottom:0;padding:48px}
.auth-panel{display:flex;flex-direction:column;justify-content:center;
  background:var(--paper);padding:40px var(--gutter)}
@media(min-width:1024px){.auth-panel{padding:64px}}
.auth-inner{width:100%;max-width:420px;margin-inline:auto}
.realm{margin-top:28px;border:1px solid var(--line)}
.realm a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:76px;padding:16px 20px;border-top:1px solid var(--line);
  color:var(--gold-deep);transition:background-color 200ms ease}
.realm a:first-child{border-top:0}
.realm a:hover{background:var(--cream)}
.realm a svg{flex:none;transition:transform 200ms ease}
.realm a:hover svg{transform:translateX(4px)}

/* ---------- terms and disclosures gate ---------- */
.gate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:var(--gutter);background:rgba(8,23,41,.86)}
.gate-card{width:100%;max-width:600px;max-height:86dvh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);padding:28px}
@media(min-width:768px){.gate-card{padding:40px}}
.gate-card a{color:var(--gold-deep);border-bottom:1px solid var(--line)}
.gate-card a.btn{border-bottom:0}

/* ---------- footer disclosures tab ---------- */
.disc{border-top:1px solid var(--line-dark);margin-top:0}
.disc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;cursor:pointer;list-style:none;color:var(--gold)}
.disc summary::-webkit-details-marker{display:none}
.disc summary svg{transition:transform 220ms ease;flex:none}
.disc[open] summary svg{transform:rotate(180deg)}
.disc-body{padding-bottom:40px;max-width:80ch}
.disc-body p{margin-top:14px;font-size:var(--t-fine);line-height:1.75;color:var(--on-dark-soft)}
.disc-body h3{margin-top:26px;font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* ---------- group divisions ---------- */
.divlist{margin-top:var(--space-block)}
.divrow{border-top:1px solid var(--line)}
.divrow a{display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:22px;padding-block:28px;min-height:44px}
.divrow img{width:64px;height:64px;object-fit:contain;flex:none}
@media(min-width:768px){
  .divrow a{gap:32px;padding-block:36px}
  .divrow img{width:84px;height:84px}
}
.divrow .h3{transition:color 200ms ease}
.divrow a:hover .h3{color:var(--gold-deep)}
.divcopy{margin-top:8px;font-size:var(--t-small);line-height:1.65;
  color:var(--muted);max-width:58ch}
.divrow svg{flex:none;margin-top:6px;color:var(--gold-deep);
  transition:transform 200ms ease,opacity 200ms ease}
@media(min-width:1024px){
  .divrow a svg{opacity:0}
  .divrow a:hover svg{opacity:1;transform:translateX(4px)}
}

/* visually hidden, still read by screen readers */
.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}
.divhost{display:inline-block;margin-top:10px;font-size:var(--t-label);font-weight:500;
  letter-spacing:.08em;color:var(--gold-deep);border-bottom:1px solid var(--line)}
.divrow a:hover .divhost{border-bottom-color:var(--gold-deep)}
.extlink{flex:none;margin-top:6px;color:var(--gold-deep);transition:transform 200ms ease}
.divrow a:hover .extlink{transform:translate(2px,-2px)}



/* ---------- gallery ---------- */
.gal{margin-top:var(--space-block)}
.gal-frame{position:relative;overflow:hidden;background:var(--navy-800);
  aspect-ratio:3/2}
.gal-track{display:flex;height:100%;transition:transform 620ms cubic-bezier(.16,1,.3,1)}
.gal-slide{flex:0 0 100%;height:100%}
.gal-slide img{width:100%;height:100%;object-fit:cover}
.gal-bar{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:16px}
@media(min-width:700px){
  .gal-bar{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
}
/* min-width:0 so the caption can shrink; flex items default to min-width:auto
   and refused to, which pushed the nav 44px past the viewport at 375. */
.gal-cap{min-width:0;font-size:var(--t-small);line-height:1.6;color:var(--muted);max-width:56ch}
.gal-nav{display:flex;align-items:center;gap:8px;flex:none}
.gal-nav button{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);color:var(--ink);
  transition:border-color 200ms ease,color 200ms ease}
.gal-nav button:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.gal-nav button[disabled]{opacity:.35;cursor:default}
.gal-nav button[disabled]:hover{border-color:var(--line);color:var(--ink)}
.gal-dots{display:flex;gap:6px;margin-left:6px;flex-wrap:wrap}
.gal-dots button{width:16px;height:44px;border:0;display:inline-flex;align-items:center;
  justify-content:center}
@media(min-width:700px){.gal-dots button{width:22px}}
.gal-dots span{display:block;width:100%;height:1px;background:var(--line)}
.gal-dots button[aria-current="true"] span{background:var(--gold-deep);height:2px}
@media(prefers-reduced-motion:reduce){.gal-track{transition:none}}

/* ---------- marker underline ----------
   Replaces the italic on the hero's second line. An italic reads as a font
   change; a marker stroke reads as someone deliberately underlining it.

   The reveal is a clip on a wrapper, not stroke-dasharray. Dash maths needs
   the path length, and pathLength normalisation fights vector-effect:
   non-scaling-stroke once preserveAspectRatio="none" scales non-uniformly,
   which left the tail of the stroke undrawn. Clipping a wrapper is
   length-independent and cannot get that wrong. */
.mark-ul{position:relative;display:inline-block}
.mark-ul .mark-clip{
  position:absolute;left:-.06em;bottom:-.18em;width:calc(100% + .12em);height:.30em;
  overflow:hidden;pointer-events:none;
  clip-path:inset(0 100% 0 0);
}
.mark-ul svg{display:block;width:100%;height:100%;overflow:visible}
.mark-ul svg path{
  fill:none;stroke:var(--gold);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.reveal.on .mark-ul .mark-clip{
  animation:mark-draw 780ms cubic-bezier(.25,.9,.3,1) 300ms forwards;
}
@keyframes mark-draw{to{clip-path:inset(0 0 0 0)}}

@media(prefers-reduced-motion:reduce){
  .mark-ul .mark-clip{clip-path:inset(0 0 0 0);animation:none}
}

/* ==========================================================================
   Motion, kept deliberately small.
   The reference guides are near unanimous: Ramp "smooth and deliberate, no
   harsh transitions"; Stripe's guide refuses to infer motion at all. So there
   are three effects on this site and they all use the same clip technique as
   the hero marker, which keeps the language consistent.
   ========================================================================== */

/* 1. Masked line reveal. Display lines rise from behind a mask rather than
      fading. This is the editorial move: it reads as typesetting, not as a
      web animation. */
.rise{display:block;overflow:hidden;
  /* The mask box extends below the baseline so the hero marker, which sits
     under the text, is not clipped by overflow:hidden. Negative margin keeps
     the layout identical. */
  padding-bottom:.26em;margin-bottom:-.26em}
/* Only hide when JS is present and has flagged the document. Without this,
   a failed or blocked script leaves content permanently invisible. */
.js-anim .rise > span{transform:translateY(105%)}
.rise > span{display:block;transition:transform 780ms cubic-bezier(.16,1,.3,1)}
.reveal.on .rise > span,.rise.on > span{transform:translateY(0)}
.rise:nth-of-type(2) > span{transition-delay:80ms}
.rise:nth-of-type(3) > span{transition-delay:160ms}

/* 2. Images wipe in from the left instead of fading. A fade says "loading";
      a wipe says "placed". */
.js-anim .wipe-in{clip-path:inset(0 100% 0 0)}
.wipe-in{transition:clip-path 900ms cubic-bezier(.16,1,.3,1) 120ms}
.reveal.on .wipe-in,.wipe-in.on{clip-path:inset(0 0 0 0)}

/* 3. Ruled rows draw a gold rule across on hover, same gesture as the marker. */
.rows > li,.divrow{position:relative}
.rows > li::after,.divrow::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--gold-deep);transform:scaleX(0);transform-origin:left;
  transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.rows > li:hover::after,.divrow:hover::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .rise > span{transform:none;transition:none}
  .wipe-in{clip-path:inset(0 0 0 0);transition:none}
  .rows > li::after,.divrow::after{display:none}
}

/* ---------- static figure row (replaced the slideshow) ---------- */
.figrow{display:grid;gap:24px;margin-top:var(--space-block)}
@media(min-width:760px){.figrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.figrow figure{margin:0}
.figrow img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.figrow figcaption{margin-top:10px}

/* ---------- grouped services ---------- */
.svc-grid{display:grid;gap:40px}
@media(min-width:820px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.svc-col{position:relative;border-top:1px solid var(--line);padding-top:18px}
.svc-col .label{display:inline-block}
.svc-num{position:absolute;top:18px;right:0;font-family:var(--f-display);
  font-weight:300;font-size:20px;color:var(--line)}
.svc-col ul{margin-top:14px}
.svc-col li + li{margin-top:2px}
.svc-col a{display:block;padding-block:12px;border-top:1px solid var(--line)}
.svc-col li:first-child a{border-top:0}
.svc-n{display:block;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink);
  transition:color 200ms ease}
.svc-b{display:block;margin-top:4px;font-size:var(--t-small);line-height:1.55;color:var(--muted)}
.svc-col a:hover .svc-n{color:var(--gold-deep)}

/* ---------- full-width image band ----------
   Lost when the marker section was rewritten and the file was truncated
   after it. Without this, six pages rendered their band at the image's
   intrinsic height, roughly 1000px each. */
.band{position:relative;height:clamp(220px,32vw,400px);overflow:hidden;
  background:var(--navy-800)}
.band img{width:100%;height:100%;object-fit:cover}

@media(min-width:1024px){.start6{grid-column-start:6}}