/* =========================================================
   THE SHIELD AND THE REPUBLIC — multi-page design system
   Display: Cabinet Grotesk 600/700  ·  Body: General Sans 400/500
   Cinematic, editorial, high-contrast. Gold used sparingly.
   ========================================================= */

:root{
  --ink:#f3efe2; --ink-soft:#bcc6bd; --ink-mut:#8a978d;
  --paper:#f4f0e4; --paper-ink:#122a1f; --paper-mut:#586a5e;
  --bg:#0a1a13; --bg-2:#0d2318; --deep:#060f0a;
  --gold:#c9a227; --gold-2:#e4cd7a;
  --line:rgba(228,205,122,.15); --line-strong:rgba(228,205,122,.34);
  --disp:"Cabinet Grotesk","Arial Narrow",system-ui,sans-serif;
  --body:"General Sans",system-ui,-apple-system,sans-serif;
  --maxw:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:120px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,60px)}

/* type */
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1}
h1{font-size:clamp(2.9rem,8vw,6.4rem);line-height:.92;text-transform:uppercase}
h2{font-size:clamp(2.1rem,5vw,4rem);line-height:.98;text-transform:uppercase}
h3{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.over{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.3em;
  font-size:.68rem;color:var(--gold);display:inline-flex;align-items:center;gap:12px}
.over::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.75}
.over.c{justify-content:center}
.mono{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:.14em;
  font-size:.7rem;text-transform:uppercase;color:var(--ink-mut)}
.lead{font-family:var(--body);font-weight:400;font-size:clamp(1.1rem,2vw,1.45rem);color:var(--ink-soft)}

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));
  z-index:200;transition:width .1s linear}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;border-bottom:1px solid transparent;transition:background .35s,border-color .35s}
.nav .wrap{display:flex;align-items:center;gap:24px;height:74px}
.nav.scrolled{background:rgba(8,20,14,.82);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:clamp(34px,4.6vw,46px);height:auto;object-fit:contain;transition:transform .4s;flex:none}
.brand:hover img{transform:rotate(6deg)}
.brand b{font-family:var(--disp);font-weight:700;font-size:clamp(.82rem,1.9vw,1.05rem);letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.brand span{display:block;font-size:clamp(.48rem,1.1vw,.58rem);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);margin-top:3px;font-family:var(--body);font-weight:500;white-space:nowrap}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px}
.lnk{position:relative;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);font-weight:500;padding:4px 0}
.lnk::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .3s cubic-bezier(.2,.7,.2,1)}
.lnk:hover{color:#fff}.lnk:hover::after,.lnk.active::after{width:100%}
.lnk.active{color:#fff}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:100px;
  padding:11px 22px;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s}
.pill:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 8px 26px rgba(201,162,39,.25);color:#fff;border-color:var(--gold)}
.pill.solid{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.pill.solid:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--deep);box-shadow:0 12px 34px rgba(201,162,39,.42)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);color:var(--ink);
  width:44px;height:40px;border-radius:9px;font-size:1.1rem;cursor:pointer}

/* CTA link (text + arrow) */
.cta{display:inline-flex;align-items:center;gap:11px;font-size:.8rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;padding:4px 0}
.cta .arw{width:28px;height:28px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;
  transition:transform .28s,background .28s,color .28s,border-color .28s,box-shadow .28s}
.cta:hover .arw{background:var(--gold);border-color:var(--gold);color:var(--deep);transform:translateX(4px);box-shadow:0 6px 18px rgba(201,162,39,.35)}
.cta.dark{color:var(--paper-ink)}.cta.dark .arw{border-color:rgba(18,42,31,.28)}
.cta.dark:hover .arw{color:#fff}

/* HERO (home) — brand backdrop with the seal as centrepiece */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(1100px 640px at 74% 32%,rgba(201,162,39,.16),transparent 60%),
    linear-gradient(158deg,var(--bg-2) 0%,var(--deep) 68%,#05100a 100%)}
.hero video,.hero .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.58}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,15,10,.5),rgba(6,15,10,.28) 38%,rgba(6,15,10,.85))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:clamp(52px,8vh,96px)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.hero h1{max-width:15ch}
.hero .lead{max-width:44ch;margin-top:22px}
.hero-ctas{display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:36px}
.hero-emblem{position:relative;justify-self:center;opacity:0;animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .5s forwards}
.hero-emblem::before{content:"";position:absolute;inset:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.28),rgba(201,162,39,.05) 55%,transparent 68%);
  filter:blur(8px);animation:glowPulse 5s ease-in-out infinite;z-index:0}
.hero-emblem img{position:relative;z-index:1;width:min(420px,38vw);
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.5));animation:floaty 7s ease-in-out infinite}
.hmeta{position:absolute;z-index:2;left:0;right:0;bottom:20px}
.hmeta .wrap{display:flex;justify-content:space-between;align-items:flex-end}
.cue{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-mut)}
.cue .bar{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* page hero (interior, photo) */
.phero{position:relative;min-height:70svh;display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(150deg,var(--bg-2),var(--deep))}
.phero .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,15,10,.35),rgba(6,15,10,.55) 40%,rgba(6,15,10,.9))}
.phero .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:clamp(44px,7vh,80px)}
.phero h1{max-width:18ch;font-size:clamp(2.6rem,6.5vw,5.2rem)}
.phero .lead{max-width:56ch;margin-top:18px}

/* section counter (home subnav) */
.subnav{position:sticky;top:74px;z-index:80;background:rgba(6,15,10,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;align-items:center;gap:6px;height:54px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mut);
  padding:8px 15px;border-radius:100px;transition:.2s}
.subnav a:hover{color:var(--ink)}.subnav a.active{color:var(--deep);background:var(--gold)}
.subnav .cnt{margin-left:auto;padding-left:18px;white-space:nowrap}

/* bands */
.band{padding:clamp(48px,6vw,92px) 0;position:relative}
.band.paper{background:var(--paper);color:var(--paper-ink)}
.band.paper .lead{color:var(--paper-mut)}
.band.deep{background:var(--deep)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.sec-head .lbl{max-width:62%}
.sec-head h2{margin-top:16px}

/* statement + columns */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:52px}
.cols p{color:var(--ink-soft);font-size:1.05rem}
.band.paper .cols p{color:var(--paper-mut)}

/* metric strip (not shadow cards) */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px}
.metrics .cell{background:var(--bg);padding:38px 32px;transition:transform .3s,filter .3s,background .3s}
.metrics .cell:hover{transform:scale(1.02);filter:brightness(1.08)}
.band.paper .metrics{background:rgba(18,42,31,.12);border-color:rgba(18,42,31,.12)}
.band.paper .metrics .cell{background:var(--paper)}
.band.paper .metrics .cell:hover{filter:brightness(.98)}
.metrics .k{font-family:var(--disp);font-weight:700;font-size:2.6rem;color:var(--gold);line-height:1;margin-bottom:14px}
.metrics p{margin:8px 0 0;color:var(--ink-soft);font-size:.95rem}
.band.paper .metrics p{color:var(--paper-mut)}

/* pinned story showcase */
.showcase{display:grid;grid-template-columns:1fr 1fr}
.stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,var(--bg-2),var(--deep))}
.stage .numeral{position:absolute;font-family:var(--disp);font-weight:700;font-size:clamp(9rem,22vw,20rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(228,205,122,.45);transition:opacity .5s}
.stage .numeral.on{-webkit-text-stroke:1.5px var(--gold-2);color:rgba(228,205,122,.06)}
.stage .ghost{position:absolute;width:62%;opacity:.09}
.stage .cap{position:absolute;bottom:8%;left:0;right:0;text-align:center;color:var(--gold-2);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem}
.chapters{padding:8vh clamp(22px,4vw,64px)}
.chapter-block{min-height:78vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);
  padding:40px 0;opacity:.4;transition:opacity .4s}
.chapter-block:first-child{border-top:0}.chapter-block.active{opacity:1}
.chapter-block .cn{font-family:var(--disp);font-weight:600;color:var(--gold);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.chapter-block h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.8rem);text-transform:uppercase;margin-bottom:16px;line-height:1}
.chapter-block p{color:var(--ink-soft);max-width:42ch}

/* full-bleed photo caption */
.bleed{position:relative;min-height:86svh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(150deg,var(--bg-2),var(--deep))}
.bleed .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.08);transition:transform 1.3s ease}
.bleed.in .cover{transform:scale(1)}
.bleed::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,15,10,.15),rgba(6,15,10,.82))}
.bleed .wrap{position:relative;z-index:2;padding-top:90px;padding-bottom:clamp(44px,7vw,92px)}
.bleed h2{max-width:18ch}
.bleed .lead{max-width:52ch;margin-top:18px;color:var(--ink-soft)}
.bleed .credit{position:absolute;right:clamp(16px,4vw,40px);bottom:14px;z-index:2}

/* split photo + text */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch}
.split .ph{position:relative;min-height:66vh;overflow:hidden;background:linear-gradient(150deg,var(--bg-2),var(--deep))}
.split .ph .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .tx{padding:clamp(40px,5vw,84px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.split.rev-order .ph{order:2}

/* timeline */
.tline{overflow:hidden;border-top:1px solid var(--line);margin-top:44px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ttrack{display:flex;width:max-content;will-change:transform}
.tline .stop{flex:0 0 auto;min-width:min(340px,74vw);padding:34px 34px 34px 0;border-right:1px solid var(--line);position:relative}
@media (prefers-reduced-motion:reduce){.tline,.lstrip{overflow-x:auto}}
.tline .stop::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--gold)}
.tline .stop .yr{font-family:var(--disp);font-weight:700;font-size:2.8rem}
.tline .stop .d{color:var(--ink-mut);margin-top:8px;max-width:26ch}

/* voices */
.voice-lg{max-width:24ch;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.02}
.voice-lg .q{color:var(--gold)}
.vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:60px}
.vrow blockquote{margin:0;border-top:1px solid var(--line);padding-top:22px}
.vrow p{font-family:var(--body);font-style:italic;font-size:1.06rem;color:var(--ink-soft)}
.vrow cite{font-style:normal;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-weight:700}

/* category list (voices/press) */
.rows{margin-top:44px;border-top:1px solid var(--line)}
.rows .r{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line);transition:background .3s,padding-left .3s}
.rows .r:hover{background:rgba(228,205,122,.04);padding-left:14px}
.rows .r .n{font-family:var(--disp);font-weight:700;color:var(--gold);font-size:1.1rem}
.rows .r h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.rows .r p{margin:6px 0 0;color:var(--ink-mut);font-size:.92rem;max-width:60ch}

/* crew */
.crew-dept{border-top:1px solid var(--line);padding:44px 0}
.crew-dept:last-child{border-bottom:1px solid var(--line)}
.crew-dept .g2{display:grid;grid-template-columns:.8fr 2.2fr;gap:40px;align-items:start}
.crew-dept h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.5rem}
.crew-dept .sub{color:var(--ink-mut);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;margin-top:10px}
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px}
.person{position:relative;display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid transparent;border-radius:16px;z-index:1;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s,background .32s}
.person:hover{transform:translateY(-6px) scale(1.035);z-index:6;border-color:var(--line-strong);
  background:linear-gradient(160deg,rgba(228,205,122,.07),rgba(228,205,122,.02));box-shadow:0 24px 55px rgba(0,0,0,.42)}
.person .pinfo{min-width:0}
.person .av{transform-origin:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.person:hover .av{transform:scale(1.55);box-shadow:0 0 0 4px rgba(228,205,122,.55),0 20px 46px rgba(0,0,0,.5),0 0 34px rgba(201,162,39,.4)}
.person .nm{transition:color .25s}
.person:hover .nm{color:#fff}
.person .bio{margin-top:0;max-height:0;opacity:0;overflow:hidden;color:var(--ink-soft);font-size:.9rem;line-height:1.5;
  transition:max-height .38s ease,opacity .34s ease,margin-top .34s ease}
.person:hover .bio{max-height:140px;opacity:1;margin-top:10px}
.person.open:hover{transform:translateY(-4px);background:transparent;box-shadow:none;border-color:var(--line)}
.band.paper .person .bio{color:var(--paper-mut)}
/* touch / mobile: no hover — show bios, keep it calm */
@media (hover:none),(max-width:640px){
  .person .bio{max-height:none;opacity:1;margin-top:8px}
  .person:hover{transform:none;box-shadow:none;background:transparent;border-color:transparent}
  .person:hover .av{transform:none;box-shadow:none}
}
.person .av{width:92px;height:92px;flex:0 0 92px;border-radius:50%;display:grid;place-items:center;position:relative;overflow:hidden;
  font-family:var(--disp);font-weight:700;color:var(--gold-2);border:1px solid var(--line-strong);font-size:1.5rem;background:rgba(228,205,122,.04)}
.person .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.person .nm{font-family:var(--disp);font-weight:600;font-size:1.08rem}
.person .nm a{color:inherit;border-bottom:1px solid var(--line-strong);transition:border-color .2s,color .2s}
.person .nm a:hover{color:var(--gold-2);border-color:var(--gold-2)}
.person .rl{color:var(--ink-mut);font-size:.85rem;margin-top:2px}
.person.open .nm{color:var(--ink-mut);font-style:italic}.person.open .av{border-style:dashed;color:var(--gold)}
.band.paper .crew-dept{border-color:rgba(18,42,31,.14)}
.band.paper .person .rl,.band.paper .crew-dept .sub{color:var(--paper-mut)}
.band.paper .person .av{border-color:rgba(18,42,31,.24);color:#94770f}

/* journal editorial list */
.jlist{margin-top:40px}
.jitem{display:grid;grid-template-columns:150px 1fr auto;gap:30px;align-items:baseline;padding:32px 0;border-top:1px solid var(--line);transition:padding-left .3s,background .3s}
.jitem:last-child{border-bottom:1px solid var(--line)}
.jitem:hover{padding-left:12px;background:rgba(228,205,122,.03)}
.jitem .tag{color:var(--gold);font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.jitem h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2rem)}
.jitem p{margin:10px 0 0;color:var(--ink-soft);max-width:60ch}

/* forms */
.form{display:grid;gap:20px;max-width:680px}
.form .row{display:grid;gap:20px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mut);font-weight:600}
.field input,.field select,.field textarea{background:rgba(255,255,255,.03);border:1px solid var(--line-strong);
  border-radius:12px;padding:15px 17px;color:var(--ink);font-family:var(--body);font-size:.98rem;transition:.25s}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mut)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.18);background:rgba(255,255,255,.05)}
.form .note{color:var(--ink-mut);font-size:.85rem}
.form .ok{color:var(--gold-2);font-weight:600;min-height:1.2em}
.btn{justify-self:start;border:0;cursor:pointer;background:var(--gold);color:var(--deep);border-radius:100px;
  padding:14px 30px;font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;
  transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{background:var(--gold-2);transform:translateY(-1px) scale(1.02);box-shadow:0 12px 34px rgba(201,162,39,.42)}
.form-2{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.form-aside .rows{margin-top:0}

/* finale CTA */
.finale{position:relative;min-height:80svh;display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;background:linear-gradient(160deg,var(--bg-2),var(--deep))}
.finale .ghost{position:absolute;width:min(680px,90vw);opacity:.07;z-index:0}
.finale .wrap{position:relative;z-index:2}
.finale h2{max-width:16ch;margin:0 auto}
.finale .lead{max-width:46ch;margin:22px auto 0}
.finale .row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* footer */
.foot{background:var(--deep);border-top:1px solid var(--line);padding:70px 0 34px}
.foot .news{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:46px;margin-bottom:46px;flex-wrap:wrap}
.foot .news h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.4rem);max-width:16ch}
.foot .nform{display:flex;gap:10px;min-width:min(420px,92vw)}
.foot .nform input{flex:1;background:transparent;border:1px solid var(--line-strong);border-radius:100px;padding:14px 20px;color:var(--ink);font-family:var(--body);font-size:.9rem}
.foot .nform input::placeholder{color:var(--ink-mut)}
.foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-mut);margin:0 0 16px;font-weight:600}
.foot a.fl{display:block;color:var(--ink-soft);padding:5px 0;font-size:.9rem;transition:color .2s,transform .2s}
.foot a.fl:hover{color:var(--gold-2);transform:translateX(3px)}
.foot .mission{color:var(--ink-mut);max-width:32ch;margin-top:14px}
.foot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-mut);font-size:.75rem;border-top:1px solid var(--line);margin-top:44px;padding-top:22px}
.foot .base .motto{color:var(--gold-2);letter-spacing:.2em;text-transform:uppercase}

/* ===== Leaders of Nigeria ===== */
.lstrip{overflow:hidden;margin-top:40px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ltrack{display:flex;gap:22px;width:max-content;will-change:transform}
@keyframes marquee{to{transform:translateX(-50%)}}
.leader{flex:0 0 auto;width:158px;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  text-align:center;font-family:inherit}
.lph{display:grid;place-items:center;position:relative;width:158px;height:190px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-strong);background:linear-gradient(160deg,var(--bg-2),var(--deep));
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s}
.lph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.lmono{font-family:var(--disp);font-weight:700;font-size:2rem;color:var(--gold-2);opacity:.9}
.leader:hover .lph{transform:translateY(-8px) scale(1.06);box-shadow:0 24px 50px rgba(0,0,0,.55);border-color:var(--gold)}
.lname{display:block;font-family:var(--disp);font-weight:600;font-size:.82rem;line-height:1.15;margin-top:12px;text-transform:uppercase}
.lyears{display:block;font-size:.72rem;color:var(--ink-mut);margin-top:4px;font-variant-numeric:tabular-nums}
/* leaders page grid */
.lera{padding-top:44px}
.lera+.lera{border-top:1px solid var(--line);margin-top:20px}
.lera>.over{margin-bottom:28px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:34px 22px}
.lgrid .leader{width:auto}
.lgrid .lph{width:100%;height:220px}
/* modal */
.lmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.lmodal.open{display:flex}
.lmodal-bg{position:absolute;inset:0;background:rgba(4,10,7,.74);backdrop-filter:blur(7px)}
.lmodal-card{position:relative;z-index:2;width:100%;max-width:780px;max-height:88vh;display:grid;grid-template-columns:320px 1fr;align-items:stretch;
  background:linear-gradient(165deg,var(--bg-2),var(--deep));border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  box-shadow:0 44px 100px rgba(0,0,0,.6);animation:popin .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes popin{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.lmodal-ph{position:relative;display:grid;place-items:center;min-height:460px;background:linear-gradient(160deg,#12261c,var(--deep));
  box-shadow:inset 0 0 0 1px rgba(228,205,122,.14)}
.lmodal-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.lmono{display:none}
.lmodal-tx{padding:36px;max-height:88vh;overflow:auto}
.lmodal-tx .lm-office{margin-bottom:14px}
.lmodal-tx .lm-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.02;margin:0 0 6px}
.lm-years{color:var(--gold-2);margin-bottom:18px}
.lm-bio{color:var(--ink-soft);line-height:1.72;font-size:1.02rem}
.lmodal-x{position:absolute;top:12px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;cursor:pointer;line-height:1;
  background:rgba(0,0,0,.45);border:1px solid var(--line-strong);color:var(--ink);font-size:1.4rem;transition:.2s}
.lmodal-x:hover{background:var(--gold);color:var(--deep);border-color:var(--gold)}
@media (max-width:620px){.lmodal-card{grid-template-columns:1fr;max-width:460px;max-height:92vh;overflow:auto}
  .lmodal-ph{min-height:360px}.lmodal-tx{max-height:none;padding:26px}}

/* reveal */
.rev{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}

/* responsive */
@media (max-width:960px){
  .hero{align-items:flex-end}
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:20px}
  .hero-emblem{order:-1}.hero-emblem img{width:210px}
  .hero h1,.hero .lead{margin-inline:auto}.hero-ctas{justify-content:center}
  .cols{grid-template-columns:1fr;gap:26px}
  .metrics{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr}.stage{display:none}.chapter-block{min-height:auto;opacity:1}
  .split{grid-template-columns:1fr}.split .ph{min-height:52vh}.split.rev-order .ph{order:0}
  .vrow{grid-template-columns:1fr}
  .crew-dept .g2{grid-template-columns:1fr;gap:20px}.people{grid-template-columns:1fr}
  .form-2{grid-template-columns:1fr;gap:36px}
  .jitem{grid-template-columns:1fr;gap:8px}
  .rows .r{grid-template-columns:44px 1fr;gap:16px}.rows .r .cta{display:none}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;background:rgba(6,15,10,.97);
    border-bottom:1px solid var(--line);padding:12px 24px 22px;display:none}
  .nav-links.show{display:flex}
  .nav-links .lnk{padding:14px 0;border-bottom:1px solid var(--line);width:100%}
  .nav-links .pill{width:100%;justify-content:center;margin-top:12px}
  .nav-toggle{display:block}.hmeta{display:none}
  .form .row{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr}.foot .news{flex-direction:column;align-items:flex-start}
}
/* =========================================================
   SITE-WIDE MOTION LAYER
   ========================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes navDrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.16) translateY(-2.5%)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* nav intro */
.nav{animation:navDrop .7s cubic-bezier(.2,.7,.2,1) both}

/* hero + interior-hero entrances (on load) */
.hero .over,.hero h1,.hero .lead,.hero .hero-ctas,
.phero .over,.phero h1,.phero .lead{opacity:0;animation:fadeUp .95s cubic-bezier(.2,.7,.2,1) forwards}
.hero .over,.phero .over{animation-delay:.2s}
.hero h1,.phero h1{animation-delay:.36s}
.hero .lead,.phero .lead{animation-delay:.56s}
.hero .hero-ctas{animation-delay:.74s}
.hero .hmeta{opacity:0;animation:fadeUp 1s ease .95s forwards}

/* brand seal gentle float + shimmer on hover already present */
.brand img{animation:floaty 6s ease-in-out infinite}

/* ken-burns on photography */
.phero .cover,.split .ph .cover{animation:kenburns 26s ease-in-out infinite alternate}
.bleed .cover{animation:kenburns 30s ease-in-out infinite alternate}
.bleed.in .cover{transform:none} /* keep reveal scale-in, kenburns takes over after */

/* slowly rotating ghost seals */
.stage .ghost,.finale .ghost{animation:spinSlow 120s linear infinite}

/* scroll cue + timeline dot pulse */
.tline .stop::before{animation:glowPulse 2.6s ease-in-out infinite}

/* progress bar draws with a subtle origin */
.progress{transform-origin:left}

/* reveal directional variants + child stagger (delays set inline by JS) */
.rev.left{transform:translateX(-30px)}
.rev.right{transform:translateX(30px)}
.rev.scale{transform:scale(.94)}
.rev.left.in,.rev.right.in,.rev.scale.in{transform:none}

/* metric count-up emphasis */
.metrics .k{will-change:contents}
.metrics .cell.in .k{animation:glowPulse 1.2s ease}

/* row hover accent bar */
.rows .r{position:relative}
.rows .r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rows .r:hover::before{transform:scaleY(1)}

/* person avatar pop on hover */
.person{transition:transform .25s}
.person:hover{transform:translateY(-3px)}
.person:hover .av{box-shadow:0 0 0 3px rgba(201,162,39,.18);transition:box-shadow .25s}

/* chapter numeral cross-fade already handled; add scale */
.stage .numeral{transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);transform:scale(.9)}
.stage .numeral.on{transform:scale(1)}

/* jitem arrow slide */
.jitem .cta .arw{transition:transform .3s}
.jitem:hover .cta .arw{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  .rev,.hero .over,.hero h1,.hero .lead,.hero .hero-ctas,.phero .over,.phero h1,.phero .lead,.hero .hmeta{opacity:1;transform:none}}