/* Hegemonic Growth — shared stylesheet.
   Palette is taken from the canonical mark: near-black disc, cyan orbitals,
   mint and amber nodes. One stylesheet across every page so a subpage can
   never drift from the index. */

:root{
  --void:#03090E; --ground:#06121A; --panel:#0B1B25; --raise:#102530;
  --hair:#15303D; --hair-soft:#0F2430;
  --ice:#E7F3F8; --body:#9CB4C1; --muted:#61798A;
  --cyan:#7FD8F0; --cyan-hi:#A8E8FA; --cyan-dim:#3E7E95;
  --mint:#5EE9B5; --amber:#D2A03F;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.66; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 34px;}
a{color:var(--cyan); text-decoration:none;}
a:focus-visible{outline:1px solid var(--cyan); outline-offset:4px;}
p{margin:0 0 1.15rem;} strong{color:var(--ice); font-weight:500;}

.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--cyan);
  display:block;
}

/* ---------------- nav ---------------- */
nav{position:sticky; top:0; z-index:60; border-bottom:1px solid transparent;
    transition:background .35s, border-color .35s;}
nav.stuck{background:rgba(6,18,26,.9); backdrop-filter:blur(18px) saturate(1.3);
          border-bottom-color:var(--hair);}
nav .wrap{display:flex; align-items:center; justify-content:space-between;
          gap:24px; padding:18px 34px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:28px; height:28px; display:block;}
.brand b{font-weight:600; color:var(--ice); font-size:1rem; letter-spacing:-.012em;}
.brand span{color:var(--muted); font-weight:300;}
nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0;
       font-size:.83rem; align-items:center;}
nav ul a{color:var(--muted); transition:color .2s;}
nav ul a:hover, nav ul a[aria-current]{color:var(--ice);}
nav .portal{border:1px solid var(--hair); border-radius:999px; padding:7px 16px;
            color:var(--cyan)!important; font-family:"IBM Plex Mono",monospace;
            font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;}
nav .portal:hover{border-color:var(--cyan);}
/* Below 900px the section links used to be hidden outright, leaving Client
   access as the only control in the header — the site had no navigation at all
   on a tablet or a phone. Four short words do not need a disclosure menu; they
   need less room. Tighten first, and only wrap to a second row when tightening
   is no longer enough. */
@media (max-width:900px){
  nav .wrap{gap:16px; padding:16px 24px;}
  nav ul{gap:19px; font-size:.79rem;}
  nav .portal{padding:6px 12px; font-size:.66rem; letter-spacing:.08em;}
}
@media (max-width:620px){
  nav .wrap{flex-wrap:wrap; justify-content:space-between; gap:0 14px;
            padding:14px 20px 0;}
  nav ul{order:3; width:100%; margin-top:12px; padding:11px 0;
         gap:0; justify-content:space-between;
         border-top:1px solid var(--hair-soft);}
  nav ul li.always{margin-left:auto;}
  nav ul a{font-size:.8rem;}
}
@media (max-width:380px){
  nav ul{font-size:.74rem;}
  nav .portal{padding:5px 10px;}
}

/* ---------------- headings ---------------- */
h1{font-size:clamp(2.1rem,4.4vw,3.5rem); line-height:1.1; font-weight:600;
   letter-spacing:-.032em; color:var(--ice); margin:1.4rem 0 0; text-wrap:balance;}
h1 em{font-style:normal; color:var(--cyan);}
h2{font-size:clamp(1.55rem,2.9vw,2.4rem); line-height:1.2; font-weight:600;
   letter-spacing:-.026em; color:var(--ice); margin:1rem 0 1.15rem;
   text-wrap:balance; max-width:24ch;}
h3{font-size:.96rem; font-weight:600; color:var(--ice); margin:0 0 .45rem;
   letter-spacing:-.006em;}
.lede{font-size:1.05rem; max-width:58ch;}
section{padding:clamp(72px,9vw,120px) 0; border-bottom:1px solid var(--hair-soft);}
.page-head{padding:clamp(76px,10vw,132px) 0 clamp(40px,5vw,64px);
           border-bottom:1px solid var(--hair-soft);}

/* ---------------- stat band ---------------- */
.band{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
      border:1px solid var(--hair); border-radius:4px; margin-top:44px;
      background:linear-gradient(180deg,rgba(127,216,240,.045),transparent);}
.band > div{padding:26px 24px; border-right:1px solid var(--hair);}
.band > div:last-child{border-right:none;}
@media (max-width:760px){ .band > div{border-right:none; border-bottom:1px solid var(--hair);} }
.band .n{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
         font-size:1.75rem; font-weight:400; color:var(--cyan);
         letter-spacing:-.022em; display:block; line-height:1;}
.band .k{font-size:.78rem; color:var(--muted); margin-top:11px; display:block; line-height:1.5;}
.band .mint .n{color:var(--mint);} .band .amber .n{color:var(--amber);}

/* ---------------- panel grid ---------------- */
.grid{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair);
      border-radius:4px; margin-top:42px; overflow:hidden;
      grid-template-columns:repeat(auto-fit,minmax(256px,1fr));}
.grid > div{background:var(--panel); padding:30px 28px;}
.grid p{font-size:.92rem; margin:.55rem 0 0;}

/* ---------------- definition rows ---------------- */
.rows{margin-top:44px; border-top:1px solid var(--hair-soft);}
.rows > div{display:grid; grid-template-columns:196px 1fr; gap:0 42px;
            padding:28px 0; border-bottom:1px solid var(--hair-soft);}
.rows .k{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.2em;
         text-transform:uppercase; color:var(--cyan); padding-top:.4rem;}
.rows p{margin:0; font-size:.97rem; max-width:64ch;}
.rows p + p{margin-top:.8rem;}
@media (max-width:720px){ .rows > div{grid-template-columns:1fr; gap:10px;} }

/* ---------------- pull ---------------- */
.pull{padding:clamp(78px,10vw,140px) 0; text-align:center;
      border-bottom:1px solid var(--hair-soft);}
.pull p{font-size:clamp(1.4rem,3vw,2.15rem); line-height:1.38; color:var(--ice);
        max-width:27ch; margin:0 auto; letter-spacing:-.02em; font-weight:300;}
.pull em{font-style:normal; color:var(--cyan);}
.pull cite{display:block; font-family:"IBM Plex Mono",monospace; font-style:normal;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:24px;}

/* ---------------- chips ---------------- */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:28px;}
.chips span{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--body);
  border:1px solid var(--hair); border-radius:2px; padding:8px 13px;
  background:var(--panel);}

/* ---------------- cta / forms ---------------- */
.cta{border:1px solid var(--hair); border-radius:6px;
     padding:clamp(38px,6vw,60px); text-align:center;
     background:linear-gradient(180deg,rgba(127,216,240,.05),transparent);}
.cta h2{margin:1rem auto 1.1rem;} .cta .lede{margin:0 auto 2rem;}
.btn{display:inline-block; padding:13px 30px; border-radius:3px;
     font-family:"IBM Plex Mono",monospace; font-size:.8rem; letter-spacing:.09em;
     background:transparent; color:var(--cyan-hi); border:1px solid var(--cyan);
     transition:background .2s,color .2s; cursor:pointer;}
.btn:hover{background:var(--cyan); color:#04121A;}
label{display:block; font-family:"IBM Plex Mono",monospace; font-size:10px;
      letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
      margin:0 0 8px;}
input{width:100%; background:var(--void); border:1px solid var(--hair);
      border-radius:3px; padding:13px 15px; color:var(--ice); font-size:.95rem;
      font-family:Manrope,sans-serif;}
input:focus{outline:none; border-color:var(--cyan);}

footer{padding:52px 0 74px; color:var(--muted); font-size:.82rem;}
footer .cols{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between;}
footer b{color:var(--ice); font-weight:600;}
footer nav{position:static; border:none;}
footer .flinks{display:flex; flex-wrap:wrap; gap:20px; margin-top:26px;
               padding-top:22px; border-top:1px solid var(--hair-soft);}
footer .flinks a{color:var(--muted); font-size:.79rem;}
footer .flinks a:hover{color:var(--ice);}
.disclaimer{margin-top:20px; font-size:.73rem; color:#465C6B; max-width:82ch; line-height:1.6;}

/* ---------------- reveal ---------------- */
/* Scroll reveal. The distance is small and the easing decelerates hard, so
   elements settle rather than slide — a long travel reads as a template effect.
   A slight blur on entry does most of the perceived quality here: it reads as
   focus being found, and it is what separates this from a fade. */
.rv{opacity:0; transform:translateY(14px); filter:blur(4px); will-change:opacity,transform;
    transition:opacity .72s cubic-bezier(.2,.65,.25,1),
               transform .72s cubic-bezier(.2,.65,.25,1),
               filter .72s cubic-bezier(.2,.65,.25,1);}
.rv.in{opacity:1; transform:none; filter:none;}

/* Hero entrance. Sequenced after the preloader lifts rather than on load, so
   the two do not overlap and the page assembles in one continuous movement. */
.hero-inner > *{opacity:0; transform:translateY(16px); filter:blur(5px);}
body.lit .hero-inner > *{
  opacity:1; transform:none; filter:none;
  transition:opacity .85s cubic-bezier(.2,.65,.25,1),
             transform .85s cubic-bezier(.2,.65,.25,1),
             filter .85s cubic-bezier(.2,.65,.25,1);}
body.lit .hero-inner > :nth-child(1){transition-delay:.02s;}
body.lit .hero-inner > :nth-child(2){transition-delay:.10s;}
body.lit .hero-inner > :nth-child(3){transition-delay:.19s;}
body.lit .hero-inner > :nth-child(4){transition-delay:.28s;}
@media (prefers-reduced-motion:reduce){
  .hero-inner > *{opacity:1; transform:none; filter:none;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;} .rv{opacity:1; transform:none; transition:none;}
}


/* ---------------- mathematics ----------------
   Variables set in an italic serif so notation reads as notation; operators and
   numerals in mono so they align. A formula is a figure, not a decoration, so it
   gets a caption and a definition list like any other exhibit. */
.eq{background:linear-gradient(160deg,var(--panel),var(--void) 130%);
    border:1px solid var(--hair); border-left:2px solid var(--cyan-dim);
    border-radius:4px; padding:28px 30px; margin:28px 0; overflow-x:auto;}
.eq .expr{font-family:"IBM Plex Mono",monospace; font-size:1.16rem;
          color:var(--ice); white-space:nowrap; letter-spacing:.01em;}
.eq .expr i{font-family:Newsreader,Georgia,serif; font-style:italic;
            font-size:1.2em; color:var(--cyan-hi); padding:0 .04em;}
.eq .expr sub{font-size:.62em; color:var(--muted);}
.eq .expr .op{color:var(--muted); padding:0 .3em;}
.eq figcaption{font-size:.84rem; color:var(--muted); margin-top:16px;
               line-height:1.55; max-width:70ch;}
.eq dl{display:grid; grid-template-columns:auto 1fr; gap:7px 16px;
       margin:16px 0 0; font-size:.84rem;}
.eq dt{font-family:Newsreader,Georgia,serif; font-style:italic;
       color:var(--cyan-hi); font-size:1.02rem;}
.eq dd{margin:0; color:var(--muted);}

/* ---------------- portal surface ----------------
   The client area should read as an instrument, not a marketing page: a framed
   terminal with a status line, monospaced throughout. */
.terminal{border:1px solid var(--hair); border-radius:6px; overflow:hidden;
          background:var(--panel);}
.terminal .bar{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:13px 20px; border-bottom:1px solid var(--hair);
  background:var(--void); font-family:"IBM Plex Mono",monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);}
.terminal .bar .dot{display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--mint); margin-right:9px; vertical-align:middle;}
.terminal .body{padding:34px 32px;}
.terminal .row{display:flex; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--hair-soft);
  font-family:"IBM Plex Mono",monospace; font-size:.82rem;}
.terminal .row:last-child{border-bottom:none;}
.terminal .row span:first-child{color:var(--muted); letter-spacing:.06em;}
.terminal .row span:last-child{color:var(--ice); font-variant-numeric:tabular-nums;}

/* ---------------- people ---------------- */
.members{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair);
         border-radius:4px; margin-top:44px; overflow:hidden;
         grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.member{background:var(--panel); padding:34px 32px; display:flex;
        flex-direction:column;}
.mhead{display:flex; align-items:baseline; justify-content:space-between;
       gap:16px; padding-bottom:14px; margin-bottom:16px;
       border-bottom:1px solid var(--hair-soft);}
.member h3{font-size:1.16rem; margin:0 0 4px; letter-spacing:-.014em;}
.mrole{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.2em;
       text-transform:uppercase; color:var(--cyan);}
.prof{font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.16em;
      text-transform:uppercase; color:var(--muted); border:1px solid var(--hair);
      border-radius:2px; padding:5px 10px; white-space:nowrap; align-self:center;}
.prof:hover{color:var(--ice); border-color:var(--cyan);}
.mfocus{font-family:"IBM Plex Mono",monospace; font-size:.74rem;
        letter-spacing:.05em; color:var(--muted); margin:0 0 14px;}
.member > p:not(.mfocus){font-size:.92rem; margin:0; flex:1;}
.member .chips{margin-top:20px;}
.member .chips span{font-size:9.5px; padding:6px 10px;}


/* ---------------- auth card ----------------
   Modelled on the Meridian engagement room: one centred card on an empty
   ground, nothing else competing with it. A portal that shows a marketing page
   behind the login does not read as a portal. */
.authwrap{min-height:calc(100vh - 76px); display:flex; align-items:center;
          justify-content:center; padding:60px 24px;}
.authcard{width:100%; max-width:430px; border-radius:16px; padding:46px 42px;
          background:linear-gradient(180deg,#0E212C,#081720);
          border:1px solid var(--hair);
          box-shadow:0 50px 110px -60px #000, inset 0 1px 0 rgba(127,216,240,.07);}
.authcard .mark{width:64px; height:64px; margin:0 auto 24px; display:block;
                border-radius:50%; background:transparent;
                box-shadow:0 0 0 1px var(--hair), 0 0 44px -12px var(--cyan);}
.authcard h1{font-size:1.7rem; text-align:center; margin:0 0 8px;
             letter-spacing:-.02em;}
.authcard .sub{font-family:"IBM Plex Mono",monospace; font-size:10.5px;
               letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
               text-align:center; margin:0 0 34px;}
.authcard .field{margin-bottom:18px;}
.authcard button{width:100%; margin-top:8px;
  background:linear-gradient(180deg,var(--cyan),#5FB6D4); color:#04121A;
  border:none; border-radius:6px; padding:14px; font-weight:600;
  font-family:Manrope,sans-serif; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer;}
.authcard button:hover{filter:brightness(1.08);}
.authcard .note{font-size:.83rem; color:var(--muted); text-align:center;
                margin:24px 0 0; line-height:1.6;}
.authcard .trust{font-size:.75rem; color:#4A5C6B; text-align:center;
  margin:24px 0 0; padding-top:20px; border-top:1px solid var(--hair-soft);
  line-height:1.6;}

/* ---------------- publications ---------------- */
.pubs{margin-top:40px; border-top:1px solid var(--hair-soft);}
.pub{display:grid; grid-template-columns:1fr auto; gap:6px 24px;
     padding:20px 0; border-bottom:1px solid var(--hair-soft); align-items:baseline;}
.pub .t{color:var(--ice); font-size:.97rem; line-height:1.45;}
.pub .v{font-family:"IBM Plex Mono",monospace; font-size:.76rem;
        color:var(--cyan); white-space:nowrap; letter-spacing:.04em;}
.pub .a{grid-column:1/-1; font-size:.82rem; color:var(--muted); margin:0;}
@media (max-width:640px){ .pub{grid-template-columns:1fr;} .pub .v{white-space:normal;} }

/* ---------------- team initials mark ---------------- */
.mono-mark{width:52px; height:52px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace; font-size:1rem; letter-spacing:.06em;
  color:var(--cyan); background:linear-gradient(150deg,var(--raise),var(--void));
  border:1px solid var(--hair);}
.member .mhead{align-items:center;}
.mid{display:flex; gap:16px; align-items:center;}


/* ================= refinement pass ================= */

/* Containers carry the radius; cells inside stay square so the seam reads as a
   rule rather than as a row of separate bubbles. */
.grid, .band, .pubs, .members{border-radius:12px;}
.grid > div, .band > div, .member{border-radius:0;}

/* Panels lift very slightly toward the pointer. Enough to feel responsive,
   not enough to look like a marketing card. */
.grid > div, .member{transition:background .25s ease;}
.grid > div:hover, .member:hover{background:var(--raise);}

/* A second, warmer light source on panels so a grid of them has depth rather
   than reading as flat tiles. */
.grid > div{position:relative;}
.grid > div::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 0% 0%,rgba(127,216,240,.05),transparent 62%);}
.grid > div > *{position:relative;}

.grid h3{margin:.9rem 0 .5rem; font-size:1.04rem;}
.grid .eyebrow{font-size:9.5px;}

/* Statement blocks get more air than body sections; the pause is the point. */
.pull p{max-width:24ch;}

/* ---- controls ---- */
.btn{border-radius:6px; padding:13px 26px; font-weight:500;
     transition:background .2s ease, border-color .2s ease, color .2s ease;}
.btn.solid{background:linear-gradient(180deg,var(--cyan),#5FB6D4);
           color:#04121A; border-color:transparent; font-weight:600;}
.btn.solid:hover{filter:brightness(1.08); background:linear-gradient(180deg,var(--cyan-hi),#6CC2DE);}
.btn.ghost{background:transparent; color:var(--body); border-color:var(--hair);}
.btn.ghost:hover{color:var(--ice); border-color:var(--cyan-dim); background:transparent;}

/* ---- CTA ---- */
.cta{border-radius:14px; border-color:var(--hair);
     background:radial-gradient(120% 140% at 50% 0%,rgba(127,216,240,.07),transparent 60%),
                linear-gradient(180deg,var(--panel),var(--void));}

/* ---- stat band ---- */
.band{background:linear-gradient(180deg,var(--panel),var(--void));}
.band > div{padding:30px 26px;}
.band .n{font-size:1.9rem;}

/* ---- nav pill ---- */
nav .portal{transition:border-color .2s ease, background .2s ease;}
nav .portal:hover{background:rgba(127,216,240,.06);}


/* ---------------- note card ----------------
   One note on a wide list reads as an empty page. A single substantial card
   reads as a firm that publishes rarely, which is the truthful framing. */
.note-card{display:block; text-decoration:none; border:1px solid var(--hair);
  border-radius:12px; padding:38px 40px; margin-top:44px;
  background:linear-gradient(160deg,var(--panel),var(--void) 130%);
  transition:border-color .25s ease, background .25s ease;}
.note-card:hover{border-color:var(--cyan-dim); background:var(--raise);}
.nmeta{display:flex; gap:18px; align-items:baseline; margin-bottom:16px;}
.nnum{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan);}
.ndate{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);}
.note-card h2{font-size:1.62rem; margin:0 0 .9rem; max-width:26ch;
  letter-spacing:-.022em;}
.note-card p{color:var(--body); font-size:.98rem; max-width:62ch; margin:0;}
.nread{display:inline-block; margin-top:22px; font-family:"IBM Plex Mono",monospace;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);}
.note-card:hover .nread{color:var(--cyan-hi);}



/* ---------------- mandate terms ----------------
   A fee is read as a pair of numbers, not as a sentence, so the numerals carry
   their own labels and the prose sits underneath rather than around them. The
   discretionary panel is weighted heavier because it is the term a reader came
   to find, and a fee that has to be hunted for reads as negotiable. */
.terms{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair);
       border-radius:4px; margin-top:42px; overflow:hidden;
       grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.term{background:var(--panel); padding:30px 30px 32px; display:flex; flex-direction:column;}
.term.lead{background:linear-gradient(168deg,var(--raise),var(--panel) 60%);
           border-left:2px solid var(--cyan-dim);}
.thead{display:flex; align-items:baseline; justify-content:space-between; gap:14px;}
.ttag{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.18em;
      text-transform:uppercase; color:var(--muted); border:1px solid var(--hair-soft);
      border-radius:2px; padding:4px 8px; white-space:nowrap;}

.feegrid{display:grid; grid-template-columns:1fr 1fr; gap:26px;
         margin:24px 0 22px; padding-bottom:22px;
         border-bottom:1px solid var(--hair-soft);}
.feegrid.single{grid-template-columns:1fr;}
.fnum{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
      color:var(--ice); line-height:1; display:flex; align-items:baseline;}
.fnum .n{font-size:clamp(2.3rem,4.6vw,3.1rem); font-weight:500; letter-spacing:-.035em;}
.fnum .u{font-size:1.05rem; color:var(--cyan); margin-left:.06em;}
.feegrid.single .fnum .n{font-size:clamp(1.6rem,3vw,2rem); letter-spacing:-.015em;}
.flab{display:block; margin-top:.7rem; color:var(--ice); font-size:.9rem; font-weight:500;}
.fsub{display:block; margin-top:.18rem; color:var(--muted); font-size:.82rem; line-height:1.5;}

.term p{font-size:.92rem; margin:0;}
.term p + p{margin-top:.85rem;}
.tnote{margin-top:26px; font-size:.8rem; color:var(--muted); max-width:80ch;}
@media (max-width:420px){ .feegrid{grid-template-columns:1fr; gap:20px;} }

/* ---------------- source attribution ----------------
   Set apart from the caption it follows so the claim and the reference for it
   are not read as one sentence. Present for a reader who checks, quiet for one
   who does not. */
.eq figcaption .cite{
  display:block; margin-top:.7rem; font-size:.76rem; line-height:1.5;
  color:var(--muted); letter-spacing:.01em;
}

/* ---------------- index preloader ----------------
   A progress bar is the wrong instrument: it implies waiting, and nothing here
   is slow enough to need one. What happens instead is the mark resolving and
   the wordmark's letterspacing settling from wide to set — the typographic
   equivalent of something coming into focus, which is also the firm's claim.

   Timing is deliberately unhurried at the start and quick to leave. Total hold
   is a little over a second; the exit is 0.55s and takes the whole panel with a
   slight lift, so the page is already composed underneath when it clears.

   The dismissal is a CSS animation, not a script. If JavaScript fails or is
   blocked the panel still lifts on schedule; the script only removes the node
   afterwards so it cannot hold focus. Reduced motion skips all of it. */
#preload{
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(120% 90% at 50% 45%, #08161F 0%, var(--void) 68%);
  display:grid; place-items:center;
  animation:pl-lift .55s cubic-bezier(.4,0,.2,1) 1.05s forwards;
}
.pl-mark{display:grid; justify-items:center; gap:0;}
.pl-mark img{
  width:52px; height:52px; display:block; opacity:0;
  animation:pl-mark .9s cubic-bezier(.16,.84,.32,1) .04s forwards;
}
.pl-word{
  margin-top:20px; font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; text-transform:uppercase; color:var(--body);
  letter-spacing:.66em; text-indent:.66em;   /* indent offsets trailing space */
  opacity:0; white-space:nowrap;
  animation:pl-word .95s cubic-bezier(.16,.84,.32,1) .30s forwards;
}
.pl-rule{
  display:block; width:132px; height:1px; margin-top:18px;
  background:linear-gradient(90deg,transparent,var(--cyan-dim) 22%,
                             var(--cyan-dim) 78%,transparent);
  transform:scaleX(0); transform-origin:center;
  animation:pl-rule .95s cubic-bezier(.16,.84,.32,1) .22s forwards;
}
@keyframes pl-mark{
  from{opacity:0; transform:scale(.86); filter:blur(7px);}
  to  {opacity:1; transform:none; filter:none;}
}
@keyframes pl-word{
  from{opacity:0; letter-spacing:1.05em; text-indent:1.05em;}
  to  {opacity:.82; letter-spacing:.26em; text-indent:.26em;}
}
@keyframes pl-rule{ to{transform:scaleX(1);} }
@keyframes pl-lift{
  to{opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);}
}
@media (prefers-reduced-motion:reduce){
  #preload{animation:none; opacity:0; visibility:hidden; pointer-events:none;}
  .pl-mark img{opacity:1; animation:none;}
  .pl-word{opacity:.82; letter-spacing:.26em; text-indent:.26em; animation:none;}
  .pl-rule{transform:scaleX(1); animation:none;}
}

/* The people band. A pull quote already exists; this is the same device used
   once more, so it needs a link and a little less weight to avoid reading as a
   repeat. The link is the point — the claim is checkable on the team page. */
.pull.people p{max-width:34ch;}
.plink{display:inline-block; margin-top:22px; font-family:"IBM Plex Mono",monospace;
       font-size:10px; letter-spacing:.2em; text-transform:uppercase;
       color:var(--cyan); border-bottom:1px solid var(--cyan-dim); padding-bottom:5px;
       transition:color .2s, border-color .2s;}
.plink:hover{color:var(--cyan-hi); border-color:var(--cyan);}

/* Eligibility / structure / status. Three short columns under the fee panels,
   set quieter than the terms themselves — this is the apparatus a reader checks
   after the number, and it should read as settled procedure rather than as a
   second pitch. */
.elig{display:grid; gap:28px 40px; margin-top:34px;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.elig .eyebrow{display:block; margin-bottom:.6rem;}
.elig p{font-size:.86rem; color:var(--muted); margin:0; line-height:1.65;}