

:root{
  --canvas:#F5F5F4; --white:#FFFFFF;
  --gray:#2E333A;            /* dark gray — primary type */
  --gray-2:#454B54;
  --mid:#666D76; --soft:#8D949C;
  --navy:#1E3A5F; --navy-dp:#132845; --navy-lt:#35619A; --navy-br:#6E9AC4;
  --line:rgba(46,51,58,.14); --line-2:rgba(46,51,58,.07);
  --grad:linear-gradient(98deg,#132845 0%,#1E3A5F 22%,#3E6FA8 52%,#2C5182 74%,#16294A 100%);
  --grad-br:linear-gradient(98deg,#3E6FA8 0%,#7BA6CE 26%,#9CC6EE 52%,#5B93CE 76%,#2C5182 100%);
}
html,body{background:var(--canvas)}
.bleed{background-image:url('img/hero-scales.jpg');background-position:50% 50%}
.grain{opacity:.022;mix-blend-mode:multiply}

/* ── nav ─────────────────────────────────────────── */
nav{padding:34px 74px 0}
.mark .wm b{color:var(--gray);letter-spacing:.24em;font-weight:600;font-size:19px}
.mark .wm i{color:var(--navy);opacity:.9;letter-spacing:.38em}
.links a{color:var(--mid);font-weight:500}
.links a.on{color:var(--gray)}
.links a.on::after{background:var(--navy)}
.tel{color:var(--gray)}
.tel s{color:var(--navy)}
.btn{background:var(--navy);border-color:var(--navy);color:#FFF;padding:16px 28px}
.btn .ar{color:rgba(255,255,255,.66)}
.btn.ghost{background:rgba(255,255,255,.55);color:var(--gray);border-color:var(--line)}
.btn.ghost .ar{color:var(--navy)}
.btn.lite{background:#FFF;border-color:#FFF;color:var(--gray)}
.btn.lite .ar{color:var(--navy-lt)}
.btn.outline{background:none;border-color:rgba(255,255,255,.34);color:#FFF}
.btn.outline .ar{color:var(--navy-br)}

.eyebrow{color:var(--navy);letter-spacing:.40em}
.eyebrow .r{background:linear-gradient(90deg,var(--navy),rgba(0,0,0,0));height:1px}
.eyebrow .r.l{background:linear-gradient(270deg,var(--navy),rgba(0,0,0,0))}
.lede{color:var(--mid)}

/* ── the headline lockup (shared) ────────────────── */
.hl .a{font:800 74px/.98 'Outfit',sans-serif;letter-spacing:-.036em;text-transform:uppercase;
  color:var(--gray)}
.hl .b{display:flex;align-items:center;gap:20px;margin:20px 0 14px}
.hl .b .rule{width:74px;height:2px;background:var(--navy);opacity:.75;flex:none}
.hl .b em{font:600 italic 44px/1 'Cormorant',serif;color:var(--gray-2);letter-spacing:.004em;
  white-space:nowrap}
.hl .c{font:900 96px/.94 'Outfit',sans-serif;letter-spacing:-.044em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* SETTLEMENT sweep — a bright glint travels left to right across the word, fully
   clearing both edges before and after, then pauses off-screen before looping. The
   base darkens under where the glint crosses so it reads against navy instead of
   washing out. Layer is 220% wide: background-position 130%→-30% puts the glint's
   visible transit across roughly half of that travel, which is what actually reads
   as a deliberate sweep rather than a flicker (verified frame-by-frame — the naive
   -150%→150% version at 400% width only showed the peak on-screen for ~5% of the
   travel, which is why it looked like it barely moved). */
.hl .c#mono{
  background-image:
    linear-gradient(104deg,
      rgba(255,255,255,0) 40%, rgba(255,255,255,.4) 46%,
      rgba(255,255,255,1) 50%, rgba(255,255,255,.4) 54%,
      rgba(255,255,255,0) 60%),
    linear-gradient(104deg,
      #0D1F35 0%, #152C48 15%, #1E3A5F 32%, #2B5183 45%,
      #142944 50%, #2B5183 55%, #27476F 68%, #17304F 84%, #0D1F35 100%);
  background-size:220% 100%, 100% 100%;
  background-position:130% 0, 0 0;
}
.hl .c#mono.sweep{
  animation:settlementSweep 3.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes settlementSweep{
  0%{ background-position:130% 0, 0 0; }
  45%{ background-position:-30% 0, 0 0; }
  100%{ background-position:-30% 0, 0 0; }
}

/* inverted, for the dark panel */
.inv .a{color:#F4F6F8}
.inv .b .rule{background:var(--navy-br);opacity:.9}
.inv .b em{color:rgba(244,246,248,.80)}
.inv .c{background:var(--grad-br);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── stat strip ──────────────────────────────────── */
.strip{position:relative;z-index:5;display:flex;align-items:stretch;
  border-top:1px solid var(--line-2);background:rgba(255,255,255,.72);backdrop-filter:blur(16px)}
.strip .c{flex:1;padding:26px 34px 28px;border-right:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:14px}
.strip .c:last-child{border-right:0}
.strip b{font:400 36px/1 'Playfair',serif;color:var(--gray);letter-spacing:-.025em;white-space:nowrap}
.strip b i{font-style:normal;color:var(--navy)}
.strip span{font:500 9px/1.55 'Inter',sans-serif;color:var(--soft);letter-spacing:.22em;
  text-transform:uppercase}

.trust{display:flex;align-items:center;gap:24px}
.trust span{font:500 9.5px/1 'Inter',sans-serif;color:var(--soft);letter-spacing:.26em;
  text-transform:uppercase}
.trust i{width:1px;height:11px;background:var(--line);display:block}
.scroll{display:flex;align-items:center;gap:13px;font:500 9.5px/1 'Inter',sans-serif;
  color:var(--soft);letter-spacing:.32em;text-transform:uppercase}
.scroll .bar{width:58px;height:1px;background:linear-gradient(90deg,var(--line),rgba(0,0,0,0))}

/* ═══ FONT PAIRING TEST FACES ═══ */
@font-face{font-family:'Instrument';src:url('fonts/instrument-serif-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Instrument';src:url('fonts/instrument-serif-latin-400-italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-700-normal.woff2')format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-900-normal.woff2')format('woff2');font-weight:900;font-display:block}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-400-italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-latin-600-italic.woff2')format('woff2');font-weight:600;font-style:italic;font-display:block}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-500-normal.woff2')format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-700-normal.woff2')format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-800-normal.woff2')format('woff2');font-weight:800;font-display:block}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-900-normal.woff2')format('woff2');font-weight:900;font-display:block}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-500-normal.woff2')format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-700-normal.woff2')format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Manrope';src:url('fonts/manrope-latin-800-normal.woff2')format('woff2');font-weight:800;font-display:block}
@font-face{font-family:'Baskerville';src:url('fonts/libre-baskerville-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Baskerville';src:url('fonts/libre-baskerville-latin-400-italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Sora';src:url('fonts/sora-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Sora';src:url('fonts/sora-latin-500-normal.woff2')format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Sora';src:url('fonts/sora-latin-700-normal.woff2')format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Sora';src:url('fonts/sora-latin-800-normal.woff2')format('woff2');font-weight:800;font-display:block}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-300-italic.woff2')format('woff2');font-weight:300;font-style:italic;font-display:block}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'DMSans';src:url('fonts/dm-sans-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'DMSans';src:url('fonts/dm-sans-latin-500-normal.woff2')format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'DMSans';src:url('fonts/dm-sans-latin-700-normal.woff2')format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'DMSans';src:url('fonts/dm-sans-latin-900-normal.woff2')format('woff2');font-weight:900;font-display:block}
@font-face{font-family:'DMSerif';src:url('fonts/dm-serif-display-latin-400-normal.woff2')format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'DMSerif';src:url('fonts/dm-serif-display-latin-400-italic.woff2')format('woff2');font-weight:400;font-style:italic;font-display:block}
