/* ==========================================================================
   KEEP SANTOS  ·  Real Leadership for RSA
   Design system deep navy / midnight, white, silver, subtle gold.
   Flat color only. No gradients. No boxes. No rounded corners.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Navy family */
  --ink:        #050B18;   /* midnight deepest band            */
  --navy:       #0B1B3A;   /* primary brand navy                 */
  --navy-2:     #12294F;   /* raised navy                        */
  --navy-3:     #1B3A6B;   /* hairlines on navy                  */
  --steel:      #35507E;

  /* Neutrals */
  --white:      #FFFFFF;
  --paper:      #EEF0F3;   /* cool light band                    */
  --paper-2:    #E1E5EA;
  --silver:     #B9C1CE;   /* body copy on navy   9.5:1          */
  --silver-2:   #9AA5B5;   /* secondary copy, 5.8:1 on raised navy */
  --slate:      #4A5566;   /* body copy on paper                 */

  /* Accent */
  --gold:       #C9A227;   /* 7.2:1 on navy                      */
  --gold-2:     #E2C778;
  --gold-deep:  #7A6011;   /* gold that clears 4.5:1 on the light band */
  --brass:      #8D721B;   /* highlighter under white text, 4.61:1 */

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-text:    "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale px + vw, mirrors a governing-grade editorial scale */
  --t-xxl: calc(13.0px + 5.10vw);
  --t-xl:  calc(14.5px + 3.05vw);
  --t-lg:  calc(15.0px + 1.75vw);
  --t-md:  calc(15.2px + 1.05vw);
  --t-sm:  calc(14.6px + 0.55vw);
  --t-xs:  calc(13.4px + 0.24vw);
  --t-body:calc(15.1px + 0.30vw);
  --t-fine:calc(11.8px + 0.12vw);

  /* Rhythm */
  --pad-x:  clamp(20px, 6.2vw, 108px);
  --pad-y:  clamp(64px, 8.2vw, 148px);
  --rule:   1px;
  --maxw:   1560px;

  --line:   #1B3A6B;   /* hairline, re-pointed by each colour band */
  --hl-bar: var(--gold);  /* marker colour; brass on the dark bands    */
  --hl-ink: var(--ink);   /* text on the marker; white on dark bands  */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--navy);color:var(--white);
  font-family:var(--f-text);font-size:var(--t-body);font-weight:400;
  line-height:1.62;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:lining-nums tabular-nums;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);
  color:var(--ink);padding:14px 22px;font-family:var(--f-display);font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.skip:focus{left:0}

/* ---------- 3. Layout primitives ---------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.band{padding-block:var(--pad-y);position:relative}
/* Anchor links must clear the fixed header. */
section[id],main [id]{scroll-margin-top:clamp(76px,7vw,116px)}
.band--tight{padding-block:clamp(48px,5.4vw,96px)}

.bg-navy  {background:var(--navy);  color:var(--white); --curtain:var(--navy);   --line:var(--navy-3); --hl-ink:var(--white); --hl-bar:var(--brass)}
.bg-ink   {background:var(--ink);   color:var(--white); --curtain:var(--ink);    --line:var(--navy-3); --hl-ink:var(--white); --hl-bar:var(--brass)}
.bg-navy2 {background:var(--navy-2);color:var(--white); --curtain:var(--navy-2); --line:var(--steel); --hl-ink:var(--white); --hl-bar:var(--brass)}
.bg-paper {background:var(--paper); color:var(--navy);  --curtain:var(--paper);  --line:var(--paper-2)}
.bg-paper p,.bg-paper .lede{color:var(--slate)}
.bg-gold  {background:var(--gold);  color:var(--ink)}

/* Hairline rules replace containers throughout */
.hr{height:var(--rule);background:var(--line);border:0;width:100%}
.hr--gold{background:var(--gold);height:2px}

/* ---------- 4. Typography ------------------------------------------------ */
.eyebrow{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(11px,.78vw,14px);text-transform:uppercase;
  letter-spacing:.22em;color:var(--gold);line-height:1.5;
  display:block;margin-bottom:clamp(18px,1.9vw,30px);
}
.eyebrow::after{content:"";display:inline-block;vertical-align:middle;
  height:1px;background:var(--gold);margin-left:16px;
  width:0;transition:width 1s var(--ease) .1s}
.eyebrow.is-in::after{width:clamp(40px,5.5vw,110px)}
.eyebrow--mute{color:var(--silver-2)}
.eyebrow--mute::after{background:var(--silver-2)}
.bg-paper .eyebrow{color:var(--gold-deep)}
.bg-paper .eyebrow::after{background:var(--gold-deep)}
.bg-gold .eyebrow{color:var(--ink)}
.bg-gold .eyebrow::after{background:var(--ink)}

h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--f-display);font-weight:900;
  font-variation-settings:"wdth" 102,"wght" 900;
  text-transform:uppercase;line-height:.98;letter-spacing:-.018em;
  text-wrap:balance;
}
h1 em,h2 em,h3 em,.h1 em,.h2 em,.h3 em{font-style:normal}
.h-xxl{font-size:var(--t-xxl)}
.h-xl {font-size:var(--t-xl)}
.h-lg {font-size:var(--t-lg);line-height:1.02}
.h-md {font-size:var(--t-md);line-height:1.06;letter-spacing:-.012em}
.h-sm {font-size:var(--t-sm);line-height:1.14;letter-spacing:.006em}

.lede{font-size:var(--t-xs);line-height:1.58;color:var(--silver);max-width:none}
.bg-paper .lede{color:var(--slate)}
.fine{font-size:var(--t-fine);line-height:1.6;color:var(--silver-2);letter-spacing:.012em}
.bg-paper .fine{color:#5C6675}

.gold{color:var(--gold)}
.mono{font-family:var(--f-display);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:clamp(11px,.72vw,13px)}

/* ---------- 5. Highlighter (per-word marker sweep) ----------------------- */
.hl-w{position:relative;display:inline-block;white-space:pre}
.hl-w:first-child{margin-left:-.1em;padding-left:.1em}
.hl-w:last-child{margin-right:-.1em;padding-right:.1em}
.hl-w::before{
  content:"";position:absolute;left:0;right:-.02em;top:.09em;bottom:.03em;
  background:var(--hl-bar);transform:scaleX(0);transform-origin:left center;
  z-index:0;transition:transform .5s var(--ease-2);
}
.hl-w > i{position:relative;z-index:1;font-style:inherit;
  transition:color .3s ease .12s}
.lit .hl-w::before{transform:scaleX(1)}
.lit .hl-w > i{color:var(--hl-ink)}

/* ---------- 6. Word / line reveal animation ------------------------------ */
.rv-w{display:inline-block;white-space:pre;opacity:0;transform:translateY(.42em);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv-w > i{font-style:normal}
.is-in .rv-w{opacity:1;transform:none}

.ln{display:block;overflow:hidden;
  padding-block:.1em .06em;margin-block:-.1em -.06em}
.ln > span{display:block;transform:translateY(102%);
  transition:transform .82s var(--ease)}
.is-in .ln > span{transform:none}
.ln:nth-child(2) > span{transition-delay:.08s}
.ln:nth-child(3) > span{transition-delay:.16s}
.ln:nth-child(4) > span{transition-delay:.24s}

.fade{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fade.is-in{opacity:1;transform:none}
.fade-d1{transition-delay:.1s}.fade-d2{transition-delay:.2s}
.fade-d3{transition-delay:.3s}.fade-d4{transition-delay:.4s}

.wipe{position:relative;overflow:hidden}
.wipe::after{content:"";position:absolute;inset:0;z-index:2;
  background:var(--curtain,var(--ink));transform-origin:right center;
  transition:transform 1.02s var(--ease-2)}
.wipe.is-in::after{transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  .rv-w,.fade,.ln > span{opacity:1!important;transform:none!important;
    transition:none!important}
  .wipe::after{transform:scaleX(0)!important;transition:none!important}
  .eyebrow::after,.eyebrow.is-in::after{width:clamp(40px,5.5vw,110px);transition:none}
  .hl-w::before{transform:scaleX(1)!important;transition:none!important}
  .hl-w > i{color:var(--hl-ink)}
}

/* Scripts blocked or failed: show everything, animate nothing. */
html:not(.js) .rv-w,html:not(.js) .fade{opacity:1;transform:none}
html:not(.js) .ln > span{transform:none}
html:not(.js) .wipe::after{transform:scaleX(0)}
html:not(.js) .eyebrow::after{width:clamp(40px,5.5vw,110px)}

/* ---------- 7. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(12px,.82vw,14.5px);
  padding:19px 34px;border:0;cursor:pointer;text-align:center;
  transition:background-color .28s var(--ease),color .28s var(--ease);
}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-2)}
.btn--white{background:var(--white);color:var(--navy)}
.btn--white:hover{background:var(--paper-2)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--ink)}
.btn--ghost{background:transparent;color:var(--white);
  box-shadow:inset 0 0 0 var(--rule) var(--steel)}
.btn--ghost:hover{background:var(--white);color:var(--navy);
  box-shadow:inset 0 0 0 var(--rule) var(--white)}
.btn--sm{padding:14px 24px;letter-spacing:.13em}

/* Underline-accent text link */
.ulink{
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(11.5px,.78vw,13.5px);
  display:inline-block;padding-bottom:8px;position:relative;color:var(--white);
}
.ulink::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gold);transform-origin:left;transition:transform .4s var(--ease)}
.ulink:hover::after{transform:scaleX(.42)}
.bg-paper .ulink{color:var(--navy)}

/* ---------- 8. Wordmark -------------------------------------------------- */
.mark{display:inline-block;text-align:left;line-height:1}
.mark__name{
  font-family:var(--f-display);font-weight:900;
  font-variation-settings:"wdth" 112,"wght" 900;
  text-transform:uppercase;letter-spacing:.005em;display:block;color:var(--white);
}
.mark__rule{display:block;background:var(--white);
  height:max(1.5px,.013em);margin:-.088em 0 .125em}
.mark__sub{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  display:flex;color:var(--white);white-space:nowrap;
  justify-content:space-between;letter-spacing:0;
}
.mark__sub > i{font-style:normal;display:block}
.mark__sub > i[data-sp]{flex:0 0 auto}
/* Pre-JS fallback keeps the lockup correct if scripts never run. */
.mark__sub:not([data-fit]){display:block;letter-spacing:.26em;text-indent:.26em}
.mark__for{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  margin-top:.42em;color:var(--gold);
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;white-space:nowrap;
}
.mark__for::before,.mark__for::after{content:"";height:1px;background:var(--gold);flex:1 1 auto;max-width:2.4em}
.mark__for em{font-style:normal;text-transform:lowercase;letter-spacing:.02em;
  font-weight:400;font-family:var(--f-text)}

/* hero scale */
.mark--hero .mark__name,.mark--hero .mark__rule{font-size:clamp(56px,9.6vw,168px)}
.mark--hero .mark__sub{font-size:clamp(11.4px,1.86vw,32px);letter-spacing:.276em;
  text-indent:.276em}
.mark--hero .mark__for{font-size:clamp(9.5px,1.02vw,17px)}
/* nav scale */
.mark--nav .mark__name,.mark--nav .mark__rule{font-size:clamp(21px,1.62vw,29px)}
.mark--nav .mark__rule{height:1.5px}
.mark--nav .mark__sub{font-size:clamp(5.4px,.42vw,7.6px);letter-spacing:.28em;
  text-indent:.28em}
.mark--nav .mark__for{font-size:clamp(5.2px,.4vw,7.2px);margin-top:.34em;gap:.42em}
/* footer scale */
.mark--foot .mark__name,.mark--foot .mark__rule{font-size:clamp(40px,5.4vw,86px)}
.mark--foot .mark__sub{font-size:clamp(8.4px,1.06vw,17px);letter-spacing:.276em;
  text-indent:.276em}
.mark--foot .mark__for{font-size:clamp(8px,.62vw,11px)}

/* ---------- 9. Progress + Header ---------------------------------------- */
.prog{position:fixed;inset:0 auto auto 0;height:3px;width:100%;z-index:120;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

.hdr{position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(5,11,24,0);transition:background-color .4s var(--ease),
  border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:var(--rule) solid transparent;
  padding-block:clamp(14px,1.5vw,26px)}
.hdr.is-stuck{background:var(--ink);border-bottom-color:var(--navy-3);
  padding-block:clamp(10px,1vw,15px)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:28px}
.hdr__nav{display:flex;align-items:center;gap:clamp(16px,2vw,38px)}
.hdr__nav a{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(10.5px,.72vw,12.6px);color:var(--silver);
  padding-block:6px;position:relative;transition:color .25s ease;white-space:nowrap;
  text-shadow:0 1px 10px rgba(5,11,24,.65)}
.hdr.is-stuck .hdr__nav a{text-shadow:none}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.hdr__nav a:hover{color:var(--white)}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__cta{display:flex;align-items:center;gap:14px}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;
  width:46px;height:44px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--white);
  transition:transform .34s var(--ease),opacity .2s ease}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1180px){
  .hdr__nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:6px;
    padding:0 var(--pad-x);clip-path:inset(0 0 100% 0);
    transition:clip-path .55s var(--ease)}
  .hdr__nav[data-open="true"]{clip-path:inset(0 0 0 0)}
  .hdr__nav a{font-size:clamp(22px,5.4vw,40px);letter-spacing:.05em;color:var(--white);
    padding-block:11px;font-family:var(--f-display);font-weight:900}
  .burger{display:block;z-index:2}
  .hdr__cta .btn{display:none}
}

/* ---------- 10. Hero ----------------------------------------------------- */
.hero{background:var(--ink);position:relative;overflow:hidden}

/* Stacked, the message leads and the portrait follows. */
.hero__inner{position:relative;display:flex;flex-direction:column}
.hero__type{order:1;position:relative;z-index:2;
  padding-top:clamp(104px,15vw,168px);padding-bottom:0}
.hero__figure{order:2;position:relative;z-index:1;margin:0 auto;
  width:min(84%,430px);padding-top:clamp(18px,3vw,40px)}
.hero__figure img{display:block;width:100%;height:auto}

.hero__mark{margin-bottom:clamp(22px,3vw,48px)}
.hero h1{margin-top:clamp(16px,2vw,32px);
  font-size:clamp(27px,2.72vw,50px);line-height:1.04;letter-spacing:-.012em}

/* Full-width action bar: the hero paragraph runs the entire width of the site */
.hero__bar{background:var(--navy);position:relative;z-index:3}
.hero__bar::before{content:"";position:absolute;left:0;right:0;top:0;
  height:var(--rule);background:var(--navy-3)}
.hero__bar-in{padding-block:clamp(40px,4.4vw,72px);display:block}
.hero__quote{max-width:min(78ch,1060px);margin-inline:auto;
  border-left:3px solid var(--gold);
  padding-left:clamp(22px,2.8vw,54px)}
.hero__quote .qm{display:block;font-family:var(--f-display);font-weight:900;
  font-size:clamp(58px,6.4vw,116px);line-height:.56;color:var(--gold);
  margin-bottom:clamp(4px,.7vw,12px);user-select:none}
.hero__quote p + p{margin-top:clamp(14px,1.3vw,22px)}
.hero__quote p{font-family:var(--f-display);font-weight:500;
  font-size:clamp(16.4px,1.28vw,24px);line-height:1.55;letter-spacing:-.003em;
  color:var(--white);text-align:justify;text-justify:inter-word;hyphens:auto}
@media (max-width:760px){
  .hero__quote p{text-align:left;hyphens:none}
}
.hero__quote cite{display:block;font-style:normal;
  margin-top:clamp(20px,2.1vw,34px);
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(10px,.72vw,12.5px);color:var(--gold)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;
  max-width:min(78ch,1060px);margin:clamp(28px,2.8vw,46px) auto 0;
  padding-top:clamp(26px,2.6vw,42px);
  padding-left:clamp(25px,2.8vw,57px);
  border-top:var(--rule) solid var(--navy-3)}

@media (min-width:1081px){
  /* Two columns, both centred on the same axis, so the portrait sits beside
     the wordmark rather than being anchored to an edge and clipped by it. */
  .hero__inner{display:grid;align-items:end;
    grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);
    gap:clamp(28px,4vw,80px);
    padding-top:clamp(96px,8.5vw,132px);
    padding-bottom:0;
    min-height:min(86vh,880px)}
  /* The type lifts off the bar; the portrait sits flush on it, so his hands
     land exactly where the next band begins. */
  /* Portrait bottoms out on the bar; the wordmark centres in the space beside
     it rather than being dragged down with it. */
  .hero__type{padding-top:0;padding-bottom:clamp(52px,5.2vw,96px);align-self:center}
  .hero__figure{width:auto;padding-top:0;margin:0;
    justify-self:center;align-self:end;line-height:0}
  /* Sized to sit whole between the header and the bar, head clear of both. */
  .hero__figure img{width:auto;margin-inline:auto;
    max-height:min(64vh,660px);max-width:100%}
}
@media (min-width:1400px){
  .hero__figure img{max-height:min(68vh,720px)}
}

/* ---------- 11. Image marquee -------------------------------------------- */
.strip{background:var(--ink);padding-block:0;overflow:hidden;position:relative}
.strip__track{display:flex;gap:3px;width:max-content;
  animation:marq 88s linear infinite;will-change:transform}
.strip:hover .strip__track,.strip:focus-within .strip__track{animation-play-state:paused}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.strip__item{flex:0 0 auto;position:relative;overflow:hidden;
  width:clamp(148px,17vw,268px);height:clamp(198px,22.6vw,358px)}
.strip__item img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.04);transition:filter .5s var(--ease),transform .8s var(--ease)}
.strip__item::after{content:"";position:absolute;inset:0;background:var(--navy);
  opacity:.3;transition:opacity .5s var(--ease)}
.strip__item:hover img{filter:none;transform:scale(1.045)}
.strip__item:hover::after{opacity:0}
@media (prefers-reduced-motion:reduce){
  .strip__track{animation:none}
  .strip{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 12. Stat band ------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:clamp(26px,3vw,50px) clamp(16px,2vw,38px) clamp(26px,3vw,46px) 0;
  border-top:var(--rule) solid var(--line)}
.stat + .stat{border-left:var(--rule) solid var(--line);
  padding-left:clamp(16px,2vw,38px)}
@media (max-width:899px){
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(even){border-left:var(--rule) solid var(--line);
    padding-left:clamp(16px,2vw,38px)}
}
.stat__n{font-family:var(--f-display);font-weight:900;
  font-variation-settings:"wdth" 106,"wght" 900;
  font-size:clamp(46px,5.4vw,92px);line-height:.86;color:var(--white);
  letter-spacing:-.03em;display:block}
.stat__n--word{font-size:clamp(38px,4.3vw,72px);letter-spacing:-.02em}
.stat__n sup{font-size:.38em;vertical-align:super;color:var(--gold);
  letter-spacing:0;margin-left:.04em}
.stat__l{display:block;margin-top:clamp(12px,1.3vw,20px);color:var(--silver-2);
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:clamp(10px,.7vw,12px);line-height:1.65}

/* ---------- 13. Alternating record rows ---------------------------------- */
.rec{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,54px);
  padding-block:clamp(48px,5.6vw,104px);
  border-top:var(--rule) solid var(--line);align-items:center}
.rec__media{position:relative;overflow:hidden}
.rec__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rec__media--wide img{aspect-ratio:3/2}
.rec__media--tall img{aspect-ratio:3/4}
/* Focal points for photographs whose subject is not centred in the frame. */
.fp-low   img,img.fp-low   {object-position:50% 78%}
.fp-lower img,img.fp-lower {object-position:50% 88%}
.fp-mid   img,img.fp-mid   {object-position:50% 62%}
.fp-high  img,img.fp-high  {object-position:50% 26%}
.fp-right img,img.fp-right {object-position:76% 48%}
.rec__tag{position:absolute;left:0;bottom:0;z-index:3;background:var(--gold);color:var(--ink);
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;font-size:clamp(9.5px,.66vw,11.5px);padding:11px 18px}
.rec__body > * + *{margin-top:clamp(16px,1.5vw,26px)}
.rec__num{font-family:var(--f-display);font-weight:900;font-size:clamp(13px,.9vw,16px);
  letter-spacing:.2em;color:var(--gold)}
.rec__list{margin-top:clamp(20px,2vw,32px)}
.rec__list li{display:flex;gap:16px;padding-block:12px;
  border-top:var(--rule) solid var(--line);
  font-size:var(--t-fine);color:var(--silver);letter-spacing:.01em;line-height:1.5}
.rec__list li b{font-family:var(--f-display);font-weight:800;color:var(--gold);
  flex:0 0 auto;letter-spacing:.06em;min-width:4.4em}
.bg-paper .rec__list li{color:var(--slate)}
.bg-paper .rec__list li b{color:var(--gold-deep)}

@media (min-width:1000px){
  .rec{grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(40px,5vw,110px)}
  .rec--right .rec__media{order:2}
  .rec--right .rec__body {order:1}
  .rec--right{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}

/* ---------- 14. Priorities ----------------------------------------------- */
.pri{border-top:var(--rule) solid var(--line);padding-block:clamp(28px,3vw,48px);
  display:grid;grid-template-columns:1fr;gap:clamp(12px,1.4vw,24px);
  transition:background-color .4s var(--ease)}
.pri:last-child{border-bottom:var(--rule) solid var(--line)}
.pri__n{font-family:var(--f-display);font-weight:900;font-size:clamp(13px,.94vw,17px);
  letter-spacing:.2em;color:var(--gold)}
@media (min-width:900px){
  .pri{grid-template-columns:auto minmax(0,4.2fr) minmax(0,6fr);
    gap:clamp(24px,3.4vw,72px);align-items:start}
}

/* ---------- 15. Accomplishments ------------------------------------------ */
.acc{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1000px){.acc{grid-template-columns:repeat(2,1fr);
  column-gap:clamp(48px,6vw,120px)}}
.acc__group{padding-block:clamp(28px,2.8vw,44px);
  border-top:var(--rule) solid var(--line);break-inside:avoid}
.acc__head{font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(12px,.86vw,15px);color:var(--gold);
  margin-bottom:clamp(14px,1.4vw,22px)}
.bg-paper .acc__head{color:var(--gold-deep)}
.acc__group li{display:grid;grid-template-columns:1fr;gap:2px;padding-block:9px;
  font-size:var(--t-fine);line-height:1.5}
.acc__group li + li{border-top:var(--rule) solid rgba(53,80,126,.42)}
.bg-paper .acc__group li + li{border-top-color:rgba(0,0,0,.08)}
.acc__group li span{color:var(--silver-2);font-family:var(--f-display);
  font-weight:700;letter-spacing:.11em;font-size:.86em;text-transform:uppercase}
.mk{width:15px;height:15px;flex:0 0 auto;fill:none;stroke-width:2.1;
  stroke-linecap:square;stroke-linejoin:miter;margin-top:.34em}
.mk--done{stroke:var(--gold)}
.mk--now {stroke:var(--silver-2)}
.mk--blank{visibility:hidden}
.bg-paper .mk--done{stroke:var(--gold-deep)}
.acc__group li strong{font-weight:500;color:var(--white);
  font-family:var(--f-text);letter-spacing:.006em}
.bg-paper .acc__group li strong{color:var(--navy)}
.acc__group li strong .acc__state{color:var(--silver-2);letter-spacing:.1em;
  font-size:.82em;white-space:nowrap}
.bg-paper .acc__group li strong .acc__state{color:#5C6675}
@media (min-width:640px){
  .acc__group li{grid-template-columns:minmax(0,1fr) auto;
    gap:18px;align-items:baseline}
  .acc__group li span{text-align:right;white-space:nowrap}
}
.acc__group li:has(.mk){grid-template-columns:auto minmax(0,1fr);
  gap:14px;align-items:start}
/* Fallback for engines without :has(); the mark simply leads the line. */
.mk + strong{display:block}

/* ---------- 16. Timeline ------------------------------------------------- */
.tl{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,96px)}
@media (min-width:1000px){.tl{grid-template-columns:repeat(2,1fr)}}
.tl__col > h3{margin-bottom:clamp(20px,2.2vw,34px)}
.tl__item{padding-block:clamp(16px,1.6vw,26px);
  border-top:var(--rule) solid var(--line);position:relative;padding-left:26px}
.tl__item::before{content:"";position:absolute;left:0;top:calc(clamp(16px,1.6vw,26px) + .5em);
  width:9px;height:9px;background:var(--gold)}
.tl__yr{font-family:var(--f-display);font-weight:800;letter-spacing:.16em;
  font-size:clamp(10.5px,.72vw,12.5px);color:var(--gold);text-transform:uppercase;
  display:block;margin-bottom:5px}
.tl__t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;font-size:clamp(14px,1.06vw,19px);line-height:1.24;
  color:var(--white);display:block}
.tl__d{display:block;margin-top:6px;font-size:var(--t-fine);color:var(--silver-2)}

/* ---------- 17. News ----------------------------------------------------- */
.news{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,64px);
  align-items:center}
@media (min-width:1000px){.news{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.news__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.news__src{font-family:var(--f-display);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;font-size:clamp(10px,.7vw,12px);color:var(--gold);
  display:flex;gap:14px;align-items:center;margin-bottom:18px}
.news__src::before{content:"";width:26px;height:2px;background:var(--gold)}

/* ---------- 18. Forms (no boxes underline fields only) ----------------- */
.form{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.2vw,34px)}
@media (min-width:760px){.form--2{grid-template-columns:repeat(2,1fr)}}
.f{display:flex;flex-direction:column;gap:8px}
.f--full{grid-column:1/-1}
.f label{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.17em;font-size:clamp(10px,.68vw,11.8px);color:var(--gold)}
.bg-paper .f label{color:var(--gold-deep)}
.f label .req{color:var(--silver-2);font-weight:400;letter-spacing:.06em}
.bg-paper .f label .req{color:#5C6675}
.f select{appearance:none;-webkit-appearance:none;cursor:pointer}
.f input,.f textarea,.f select{
  background:transparent;border:0;border-bottom:2px solid var(--steel);
  padding:12px 0;color:var(--white);font-size:var(--t-xs);font-weight:500;
  border-radius:0;transition:border-color .3s var(--ease);width:100%}
.bg-paper .f input,.bg-paper .f textarea,.bg-paper .f select{color:var(--navy);border-bottom-color:#B7BECA}
.f input::placeholder,.f textarea::placeholder{color:var(--silver-2);font-weight:400}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom-color:var(--gold)}
.f textarea{resize:vertical;min-height:120px;line-height:1.6}
.f select option{background:var(--navy);color:var(--white)}
.bg-paper .f select option{background:var(--white);color:var(--navy)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

.check{display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  padding-top:4px;grid-column:1/-1}
.check--lead{padding-top:clamp(8px,1vw,18px)}
.check--lead .check__t{font-size:var(--t-xs)}
.check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:24px;height:24px;margin:0;background:transparent;border-radius:0;
  box-shadow:inset 0 0 0 2px var(--steel);transition:background-color .22s,box-shadow .22s;
  position:relative;top:2px;cursor:pointer}
.bg-paper .check input{box-shadow:inset 0 0 0 2px #B7BECA}
.check input:checked{background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.check input:checked::after{content:"";position:absolute;left:8px;top:3.5px;
  width:6px;height:13px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;
  transform:rotate(42deg)}
.check__t{font-size:var(--t-fine);color:var(--silver);line-height:1.6}
.bg-paper .check__t{color:var(--slate)}
.check__t b{color:var(--white);font-weight:700}
.bg-paper .check__t b{color:var(--navy)}

.disc{grid-column:1/-1;display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .4s ease,padding .5s var(--ease);
  border-left:3px solid var(--gold);padding:0 0 0 20px}
.disc > div{overflow:hidden;min-height:0}
.disc[data-on="true"]{grid-template-rows:1fr;opacity:1;padding:18px 0 18px 20px}
.disc p + p{margin-top:11px}

.form__submit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;margin-top:6px}

/* ---------- 19. Support / donate ----------------------------------------- */
.support{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,56px);
  align-items:center}
@media (min-width:1000px){.support{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.amt{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.4vw,34px)}
.amt a{font-family:var(--f-display);font-weight:800;letter-spacing:.08em;
  font-size:clamp(14px,1.1vw,19px);padding:16px 26px;
  box-shadow:inset 0 0 0 var(--rule) var(--steel);color:var(--white);
  transition:background-color .26s var(--ease),color .26s var(--ease),box-shadow .26s}
.amt a:hover{background:var(--gold);color:var(--ink);box-shadow:inset 0 0 0 var(--rule) var(--gold)}

/* ---------- 20. Quote ---------------------------------------------------- */
.quote{border-left:3px solid var(--gold);padding-left:clamp(22px,3vw,52px)}
.quote p{font-family:var(--f-display);font-weight:800;
  font-size:var(--t-md);line-height:1.18;letter-spacing:-.008em;
  text-transform:none;color:var(--white)}
.bg-paper .quote p{color:var(--navy)}
.quote cite{display:block;margin-top:clamp(18px,1.8vw,28px);font-style:normal;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:clamp(10px,.7vw,12px);color:var(--gold)}

/* ---------- 21. Footer --------------------------------------------------- */
.foot{background:var(--ink);--line:var(--navy-3)}
.foot__top{display:grid;grid-template-columns:1fr;gap:clamp(38px,4vw,72px);
  padding-block:clamp(56px,6vw,110px)}
@media (min-width:900px){.foot__top{grid-template-columns:auto 1fr;
  align-items:start;gap:clamp(48px,8vw,160px)}}
.foot__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,56px)}
@media (min-width:640px){.foot__nav{grid-template-columns:repeat(3,1fr)}}
.foot__nav h4{font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;font-size:clamp(10px,.7vw,12px);color:var(--gold);
  margin-bottom:18px}
.foot__nav li{padding-block:2px}
.foot__nav a{font-size:var(--t-fine);color:var(--silver);transition:color .22s;
  display:inline-block;padding-block:6px;min-height:24px}
.foot__nav a:hover{color:var(--white)}
.foot__bot{border-top:var(--rule) solid var(--line);
  padding-block:clamp(24px,2.4vw,38px);display:flex;flex-wrap:wrap;
  gap:16px 34px;justify-content:space-between;align-items:center}

/* ---------- 22. Interior pages ------------------------------------------- */
.doc{max-width:920px}
.doc h2{margin-top:clamp(44px,4.4vw,76px);margin-bottom:clamp(14px,1.4vw,22px)}
.doc h3{margin-top:clamp(30px,3vw,46px);margin-bottom:10px;
  font-size:clamp(14px,1vw,18px);letter-spacing:.05em}
.doc p{color:var(--silver);font-size:var(--t-fine);line-height:1.75}
.doc p + p{margin-top:14px}
.doc ul{margin-top:14px}
.doc ul li{position:relative;padding-left:22px;padding-block:7px;
  color:var(--silver);font-size:var(--t-fine);line-height:1.7}
.doc ul li::before{content:"";position:absolute;left:0;top:1.02em;
  width:7px;height:7px;background:var(--gold)}
.doc a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.doc a:hover{color:var(--gold-2)}

/* ---------- 23. Utility -------------------------------------------------- */
.mt-s{margin-top:clamp(16px,1.6vw,26px)}
.mt-m{margin-top:clamp(26px,2.8vw,46px)}
.mt-l{margin-top:clamp(40px,4.4vw,78px)}
.max-70{max-width:70ch}
.max-60{max-width:60ch}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}