/* Silent Honor Foundation — redesign design system (2026-08) */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --ground:#0C1322; --ground-2:#0F1728; --panel:#131D31; --panel-2:#0E1626;
  --line:#213049; --line-2:#2E3F5A;
  --ink:#EEF1F7; --ink-2:#A7B2C6; --ink-3:#6A7890;
  --red:#B91C1C; --red-hot:#E23B3B; --gold:#C9952A; --gold-2:#E3B65C;
  /* warm paper section */
  --paper:#F4EEE2; --paper-2:#EDE5D5; --paper-ink:#17202F; --paper-ink-2:#57607040;
  --paper-ink-2:#5A6376; --paper-line:#E0D7C4; --paper-gold:#A67A1B;
  --disp:"Oswald",Impact,"Arial Narrow",sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px; --r:5px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:#0C1322}
.sh{background:var(--ground);color:var(--ink);font-family:var(--body);line-height:1.7;
  -webkit-font-smoothing:antialiased;font-size:17px;overflow-x:hidden}
.sh a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,48px)}

.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);
  display:inline-flex;align-items:center;gap:13px}
/* Rules BOTH sides. With only a leading rule the flex row is asymmetric, so in a
   centred context (.auth-head) the text sits visibly right of true centre. */
.eyebrow::before,.eyebrow::after{content:"";width:28px;height:1px;background:var(--gold);opacity:.85;flex:0 0 auto}
.disp{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.01em;margin:0;text-wrap:balance}
.h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.015em;
  font-size:clamp(30px,4.2vw,50px);margin:14px 0 0;text-wrap:balance}
.lead{color:var(--ink-2);font-size:clamp(16px,1.35vw,18px);max-width:56ch;margin:0}
.red{color:var(--red-hot)}

.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;letter-spacing:.01em;font-size:15px;
  padding:15px 28px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 20px -8px rgba(226,59,59,.5)}
.sh a.btn-red,.sh a.btn-red:hover{color:#fff}
.btn-red:hover{background:var(--red-hot);transform:translateY(-2px)}
.btn-navy{background:#0B1220;color:#fff;box-shadow:0 6px 20px -8px rgba(11,18,32,.5)}
.sh a.btn-navy,.sh a.btn-navy:hover{color:#fff}
.btn-navy:hover{background:#1A2540;transform:translateY(-2px)}
.btn-ghost{background:#1A2540;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:#22304D;border-color:var(--gold);color:var(--gold-2)}

.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #E7E1D3}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:inline-flex;align-items:center}
.logo-img{height:46px;width:auto;display:block}
.brand{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:18px;display:inline-flex;align-items:center;gap:12px}
.brand .bar{width:3px;height:20px;background:var(--gold);border-radius:2px}
.brand .b-honor{color:var(--red-hot)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:14px;font-weight:600;color:#3B4658}
.nav a:hover{color:var(--red)}
.nav .btn{padding:11px 22px;font-size:14px}
.nav .btn-red{color:#fff}
.nav .btn-navy{color:#fff}
@media(max-width:880px){.nav a:not(.btn){display:none}.logo-img{height:40px}}

/* hero */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 66% at 80% 18%,rgba(216,164,66,.22),transparent 60%),
             radial-gradient(52% 60% at 6% 92%,rgba(185,28,28,.11),transparent 62%),
             linear-gradient(180deg,rgba(201,149,42,.055),transparent 26%)}
/* Topographic contour texture (VAB brand). The PNG's dark contour lines mask a
   solid brand-colour fill, so the map reads as faint COLOURED hairlines over the
   navy. Each section picks a palette colour (gold / white / red / blue) and a
   different crop of the map so no two bands read the same. Low opacity; the only
   light ground (the cream steps band) gets a faint navy instead. */
.terrain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  background-color:var(--gold-2);
  -webkit-mask:url(../images/terrainlines.png) center/cover no-repeat;
          mask:url(../images/terrainlines.png) center/cover no-repeat;
  opacity:.16}
.hero .terrain{background-color:var(--gold-2);opacity:.18;-webkit-mask-position:72% 50%;mask-position:72% 50%}
.mission{position:relative}
.mission .terrain{background-color:var(--ink);opacity:.13;-webkit-mask-position:20% 42%;mask-position:20% 42%}
.mission .wrap{position:relative;z-index:1}
.donate .terrain{background-color:var(--red-hot);opacity:.16;-webkit-mask-position:90% 14%;mask-position:90% 14%}
.steps{position:relative;overflow:hidden}
.steps .terrain{background-color:var(--paper-ink);opacity:.07;-webkit-mask-position:12% 88%;mask-position:12% 88%}
.steps .wrap{position:relative;z-index:1}
.hero .wrap{position:relative;z-index:1}
.hero-lede{max-width:820px}
.hero-copy{display:grid;grid-template-columns:1px 1fr;gap:clamp(20px,2.6vw,34px)}
.hero-rule{width:1px;background:linear-gradient(var(--gold),transparent);align-self:stretch;margin-top:8px}
.hero h1{font-size:clamp(44px,6.6vw,84px)}
.hero h1 .l{display:block}
.hero .eyebrow{margin-bottom:24px}
.hero-sub{margin:26px 0 0;max-width:52ch;color:var(--ink-2);font-size:clamp(16px,1.35vw,18.5px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.ribbon{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.ribbon .item{font-size:13.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:10px}
.ribbon .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 auto}
/* Full-bleed hero photo. The image dissolves upward into --ground so there is no
   visible top edge: the gradient is opaque navy at the top of the frame and only
   clears once it reaches the subject, so the copy above sits on flat navy and the
   photo appears to emerge out of the page rather than sit in a box. */
.hero-bleed{position:relative;margin:clamp(30px,4.5vw,58px) 0 0;line-height:0}
/* The IMAGE itself fades out at the top (alpha mask), rather than being an opaque
   box with navy painted over it. Painting it would cut a hard line across the
   hero's topographic texture where the photo's top edge lands; masking lets the
   texture and background run continuously through the fade. */
.hero-bleed-img{display:block;width:100%;object-fit:cover;object-position:50% 72%;
  aspect-ratio:16/9;max-height:min(78vh,760px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 13%,rgba(0,0,0,.82) 26%,#000 38%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 13%,rgba(0,0,0,.82) 26%,#000 38%)}
/* Top-only fade: the photo emerges out of the navy and then runs CLEAN to its
   bottom edge, so scrolling moves you past the gradient onto the full, unveiled
   image before the next section begins. Fading the bottom back out (an earlier
   pass did) removes that payoff and just reads as a vignette. */
.hero-bleed::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(12,19,34,.34) 0%,
    rgba(12,19,34,.18) 26%,
    rgba(12,19,34,0) 46%)}
/* keep a hint of the brand rule bleeding across the seam */
.hero-bleed::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;
  background:var(--red);z-index:2;opacity:.9}
/* Mobile: the hero becomes one full screen. The photo is ANCHORED TO THE BOTTOM
   and the copy sits over it, so the gradient dissolves the photo up behind the
   headline instead of the two sitting in separate stacked blocks -- that overlap
   is what makes the reference read as one image rather than "text, then a photo".
   Needs a portrait/tall source here (see <picture>): object-fit:cover in a tall
   box would crop a landscape frame hard and blow up the subjects. */
@media(max-width:900px){
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;
    padding-top:clamp(30px,7vw,52px)}
  .hero .wrap{position:relative;z-index:2}
  /* Photo runs up behind the copy; the headroom band at the top of the source is
     already ramped to navy, so the gradient only has to finish the job. Text
     spacing is untouched -- the image rises under it rather than pushing it. */
  .hero-bleed{position:absolute;left:0;right:0;bottom:0;height:88%;margin:0;z-index:1}
  .hero-bleed-img{width:100%;height:100%;aspect-ratio:auto;max-height:none;
    object-fit:cover;object-position:50% 100%}
  /* Hold the image well back through the copy zone -- the sky is bright and the
     body colour (--ink-2) is light, so letting it through here drops contrast
     below WCAG AA. Opacity is bought back only once the text has ended. */
  .hero-bleed-img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,.15) 42%,rgba(0,0,0,.52) 56%,#000 68%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.05) 26%,rgba(0,0,0,.15) 42%,rgba(0,0,0,.52) 56%,#000 68%)}
  .hero-bleed::after{background:linear-gradient(180deg,
    rgba(12,19,34,.70) 0%,
    rgba(12,19,34,.56) 34%,
    rgba(12,19,34,.24) 50%,
    rgba(12,19,34,0) 64%)}
  .hero-bleed::before{display:none}
  .hero h1{font-size:clamp(34px,8.8vw,46px)}
  /* Tighten the copy block so it clears the photo's bright zone: every pixel saved
     here is a pixel the image gets to show at full strength instead of under a scrim. */
  /* the middot is wrapped in &nbsp; so the string cannot break at a space -- it has
     to fit on one line or it breaks mid-token ("501(C) / (3)"). Size it to fit. */
  .hero .eyebrow{font-size:10px;letter-spacing:.1em;margin-bottom:16px;gap:9px}
  .hero .eyebrow::before,.hero .eyebrow::after{width:18px}
  .hero-sub{margin-top:14px;font-size:14.5px;line-height:1.52}
  .hero-actions{margin-top:18px;gap:9px}
  .hero-actions .btn{padding:13px 22px;font-size:14.5px}
  /* The trust strip is hidden here, not deleted: bottom-anchoring the photo fixes
     where the subjects sit, so anything after the CTAs lands on their faces. It
     still shows on desktop, where there is room above the image band. */
  .hero .ribbon{display:none}
}

/* mission */
.mission{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-2)}
.mission .wrap{padding:clamp(44px,6vw,72px) clamp(22px,4vw,48px)}
.mission-quote{font-family:var(--disp);font-weight:500;text-transform:uppercase;line-height:1.14;
  font-size:clamp(23px,2.9vw,37px);letter-spacing:.012em;max-width:24ch;margin:22px 0 0;text-wrap:balance;color:var(--ink)}
.mission-quote em{color:var(--gold-2);font-style:normal}

.section{padding:clamp(66px,8vw,110px) 0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.sec-head .lead{margin-top:16px}

/* stats — restored bordered grid + red ticks */
.stats{background:linear-gradient(180deg,var(--ground),var(--panel-2))}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ground);padding:32px 26px 30px;position:relative}
.stat::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--red)}
.stat:nth-child(1)::before,.stat:nth-child(3)::before{background:var(--gold)}
.stat .n{font-family:var(--disp);font-weight:700;line-height:.86;font-size:clamp(48px,6vw,76px);color:var(--ink);font-variant-numeric:tabular-nums}
.stat:nth-child(1) .n,.stat:nth-child(3) .n{color:var(--gold-2)}
.stat:nth-child(2) .n{color:var(--red-hot)}
.stat .l{margin-top:14px;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:24ch}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.stat-grid{grid-template-columns:1fr}}

/* services with icons */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:var(--ground);padding:34px 28px 38px;position:relative;transition:background .22s ease}
.svc::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .3s ease}
.svc:hover{background:var(--panel)}
.svc:hover::after{width:100%}
.svc .ico{width:34px;height:34px;color:var(--gold-2);margin-bottom:18px}
.svc h3{font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.svc p{color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0}
@media(max-width:880px){.svc-grid{grid-template-columns:1fr}}

/* steps — WARM light section */
.steps{background:var(--paper);color:var(--paper-ink)}
.steps .eyebrow{color:var(--paper-gold)}
.steps .eyebrow::before,.steps .eyebrow::after{background:var(--paper-gold)}
.steps .h2{color:var(--paper-ink)}
.steps .lead{color:var(--paper-ink-2)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,52px);margin-top:6px}
.step{position:relative}
.step .num{font-family:var(--disp);font-weight:700;font-size:56px;line-height:.9;color:transparent;
  -webkit-text-stroke:1.5px var(--paper-gold)}
.step .num b{ -webkit-text-stroke:0;color:var(--red)}
.step h3{font-weight:700;font-size:19px;margin:16px 0 10px;letter-spacing:-.01em;color:var(--paper-ink)}
.step p{color:var(--paper-ink-2);font-size:15px;margin:0;line-height:1.6}
.steps .btn-red{box-shadow:0 8px 22px -10px rgba(185,28,28,.55)}
@media(max-width:760px){.step-grid{grid-template-columns:1fr;gap:34px}}

/* courses */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.course{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 30px;display:flex;flex-direction:column;gap:13px;transition:transform .18s ease,border-color .18s ease}
.course:hover{transform:translateY(-4px);border-color:var(--gold)}
.course .ct{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-2);align-self:flex-start}
.course .ct.dev{color:var(--ink-3)}
.course h3{font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0}
.course p{color:var(--ink-2);font-size:14.5px;line-height:1.62;margin:0;flex:1}
.course .go{font-size:13.5px;font-weight:600;color:var(--ink)}
.course:hover .go{color:var(--gold-2)}
@media(max-width:880px){.course-grid{grid-template-columns:1fr}}

/* donate */
.donate{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.donate-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(100% 130% at 100% 0%,rgba(185,28,28,.15),transparent 55%),
             radial-gradient(95% 120% at 0% 100%,rgba(201,149,42,.11),transparent 56%)}
.donate .wrap{position:relative;z-index:1;padding:clamp(66px,8vw,110px) clamp(22px,4vw,48px)}
.donate-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center}
.sig{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(21px,2.5vw,30px);line-height:1.16;
  color:var(--gold-2);border-left:2px solid var(--red);padding-left:20px;margin:26px 0 0;text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{font-family:var(--disp);font-weight:600;font-size:19px;padding:13px 22px;border:1px solid var(--line-2);border-radius:var(--r);
  background:transparent;cursor:pointer;color:var(--ink);transition:border-color .15s ease,color .15s ease,background .15s ease}
.chip:hover,.chip.on{border-color:var(--gold);color:var(--gold-2);background:rgba(201,149,42,.07)}
.chip.other{font-family:var(--body);font-weight:600;font-size:14px}
.donate-cta{margin-top:24px}
/* Custom-amount field, revealed by the "Other" chip. Hidden via the [hidden]
   attribute so it is out of the tab order and invisible to screen readers until
   it is actually in play; display:flex on .donate-other would defeat that. */
.donate-other{margin-top:18px}
.donate-other[hidden]{display:none}
.donate-other-label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:9px}
.donate-other-field{display:flex;align-items:center;gap:2px;max-width:220px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2);
  transition:border-color .15s ease}
.donate-other-field:focus-within{border-color:var(--gold)}
.donate-other-prefix{font-family:var(--disp);font-weight:600;font-size:19px;color:var(--gold-2);padding:0 4px 0 16px}
/* 16px minimum keeps iOS Safari from zooming the page when the field is focused. */
.donate-other-input{flex:1;min-width:0;font-family:var(--disp);font-weight:600;font-size:19px;
  padding:12px 14px 12px 4px;border:0;background:transparent;color:var(--ink);
  -moz-appearance:textfield;appearance:textfield}
.donate-other-input:focus{outline:none}
.donate-other-input::placeholder{color:var(--ink-3)}
.donate-other-input::-webkit-outer-spin-button,
.donate-other-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.footnote{font-size:12.5px;color:var(--ink-3);margin-top:24px;line-height:1.7;max-width:44ch}
@media(max-width:820px){.donate-grid{grid-template-columns:1fr}}

/* footer */
.foot{border-top:1px solid #E7E1D3;background:#fff}
.foot .wrap{padding:48px clamp(22px,4vw,48px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:center}
.foot .brand{font-size:18px;color:#17202F}
.foot .fnav{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot .fnav a{font-size:13.5px;font-weight:600;color:#3B4658}
.foot .fnav a:hover{color:var(--red)}
.foot .cr{font-size:12.5px;color:#5B6376;width:100%;border-top:1px solid #E7E1D3;padding-top:22px}

.rev{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}.btn,.svc,.course,.chip,.svc::after,*{transition:none!important}}

/* mobile navigation */
.nav-toggle{display:none;background:none;border:0;color:#3B4658;font-size:26px;line-height:1;cursor:pointer;padding:4px 6px}
@media(max-width:880px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E7E1D3;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;display:none;box-shadow:0 14px 26px -14px rgba(0,0,0,.18)}
  .nav.open{display:flex}
  .nav.open a:not(.btn){display:block;padding:13px 26px;color:#3B4658}
  .nav .btn{margin:8px 26px}
}

/* ===== interior pages (about, etc.) ===== */
.page-hero{position:relative;overflow:hidden;padding:clamp(58px,8vw,104px) 0 clamp(38px,5vw,60px);border-bottom:1px solid var(--line);
  background:radial-gradient(72% 80% at 82% 8%,rgba(216,164,66,.15),transparent 60%),radial-gradient(55% 70% at 0% 100%,rgba(185,28,28,.09),transparent 62%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .terrain{background-color:#6FA8DC;opacity:.16;-webkit-mask-position:30% 28%;mask-position:30% 28%}
.page-hero h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.96;letter-spacing:.01em;font-size:clamp(40px,6.4vw,78px);margin:16px 0 0;text-wrap:balance}
.page-hero .lead{margin-top:22px;font-size:clamp(16px,1.5vw,19px)}

.story-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,58px);align-items:start}
.story-copy p{color:var(--ink-2);margin:0 0 16px;font-size:16px;line-height:1.78}
.story-copy p:last-child{margin-bottom:0}
@media(max-width:820px){.story-grid{grid-template-columns:1fr;gap:20px}}

.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.value{background:var(--ground);padding:30px 24px 34px;position:relative}
.value::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--gold)}
.value h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.02em;margin:14px 0 10px}
.value p{color:var(--ink-2);font-size:14px;line-height:1.62;margin:0}
@media(max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.value-grid{grid-template-columns:1fr}}

.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.board{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.board.open{opacity:.6}
.board .photo{aspect-ratio:1/1;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:46px;color:var(--line-2)}
.board .photo img{width:100%;height:100%;object-fit:cover}
.board .info{padding:20px 22px 24px}
.board .bn{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:19px;letter-spacing:.01em}
.board .br{color:var(--gold-2);font-size:12.5px;font-weight:600;letter-spacing:.02em;margin:4px 0 12px}
.board .bb{color:var(--ink-2);font-size:13.5px;line-height:1.62;margin:0}
.board .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.board .tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);padding:4px 9px}
@media(max-width:900px){.board-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.board-grid{grid-template-columns:1fr}}

.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.staff{background:var(--ground);border:1px solid var(--line);padding:30px 26px;text-align:center}
.staff.open{opacity:.6}
.staff .av{width:62px;height:62px;border-radius:50%;background:var(--panel);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px;color:var(--gold-2)}
.staff .sn{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.01em}
.staff .st{color:var(--gold-2);font-size:12.5px;font-weight:600;margin:5px 0 12px}
.staff .sb{color:var(--ink-2);font-size:13.5px;line-height:1.62;margin:0}
@media(max-width:820px){.staff-grid{grid-template-columns:1fr}}

.join{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.join-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(100% 130% at 100% 0%,rgba(185,28,28,.15),transparent 55%),radial-gradient(95% 120% at 0% 100%,rgba(201,149,42,.11),transparent 56%)}
.join .wrap{position:relative;z-index:1;padding:clamp(64px,8vw,104px) clamp(22px,4vw,48px)}
.join-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.positions-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px}
.positions{display:flex;flex-direction:column;border:1px solid var(--line);background:rgba(255,255,255,.015)}
.position{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line)}
.position:last-child{border-bottom:0}
.position .pt{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.position .py{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
@media(max-width:820px){.join-grid{grid-template-columns:1fr}}

/* who-we-serve band */
.serve .sec-head{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.serve .lead{max-width:60ch;margin:16px auto 0}
.branches{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.branch{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--ink);border:1px solid var(--line-2);padding:10px 18px;transition:border-color .15s,color .15s}
.branch:hover{border-color:var(--gold);color:var(--gold-2)}

/* ===== forms / contact / faq / donate ===== */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.form{display:grid;gap:16px;margin-top:8px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  font-family:var(--body);font-size:15px;padding:12px 14px;border-radius:var(--r);outline:none;transition:border-color .15s ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field textarea{min-height:132px;resize:vertical}
.form-note{font-size:13.5px;margin:2px 0 0;min-height:1em}
.form-note.ok{color:#57c07d}.form-note.err{color:var(--red-hot)}
@media(max-width:640px){.form .row{grid-template-columns:1fr}}
.contact-info .lead{margin-bottom:22px}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:8px}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.faq-q{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:16px;letter-spacing:.01em;margin:0 0 9px;color:var(--ink)}
.faq-a{color:var(--ink-2);font-size:14.5px;line-height:1.72;margin:0}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.support{background:var(--panel);border:1px solid var(--line);padding:28px 26px;position:relative}
.support::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--gold)}
.support h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:18px;letter-spacing:.01em;margin:14px 0 10px}
.support p{color:var(--ink-2);font-size:14px;line-height:1.64;margin:0}
@media(max-width:820px){.support-grid{grid-template-columns:1fr}}
.donate-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,42px)}
.donate-panel .chips{margin:22px 0 8px}
.donate-panel .donate-cta{margin-top:20px}

/* course modules breakdown */
.modules{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.module{background:var(--ground);padding:22px 24px;display:flex;gap:16px}
.module .mn{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--gold-2);line-height:1;min-width:34px}
.module .mt{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:.02em;margin:0 0 5px;color:var(--ink)}
.module .mc{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin:0 0 7px}
.module .md{color:var(--ink-2);font-size:12.5px;line-height:1.55;margin:0}
@media(max-width:720px){.modules{grid-template-columns:1fr}}

/* ===== auth pages ===== */
.auth-wrap{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:56px 20px;
  background:radial-gradient(70% 70% at 80% 8%,rgba(216,164,66,.13),transparent 60%),radial-gradient(60% 70% at 4% 100%,rgba(185,28,28,.09),transparent 62%)}
.auth-card{position:relative;z-index:1;width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,44px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.auth-card.wide{max-width:760px}
/* Logo plate — the wordmark is black-on-transparent, so it sits on a white
   chip to stay legible (and keep the flag colours) over the dark card. */
.auth-brand{display:inline-flex;background:#fff;border-radius:8px;padding:13px 18px;margin-bottom:22px;box-shadow:0 10px 28px -14px rgba(0,0,0,.55)}
.auth-brand img{display:block;width:100%;max-width:230px;height:auto}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head .eyebrow{justify-content:center}
.auth-head h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(28px,4vw,38px);line-height:1;margin:14px 0 8px;letter-spacing:.01em}
.auth-head p{color:var(--ink-2);font-size:14.5px;margin:0;line-height:1.6}
.auth-alt{text-align:center;margin-top:22px;font-size:14px;color:var(--ink-2)}
.auth-alt a{color:var(--gold-2);font-weight:600}
.btn-block{width:100%;justify-content:center}
.forgot-link{text-align:right;margin-top:-4px}
.forgot-link a{font-size:13px;color:var(--gold-2);font-weight:600}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.5}
.consent input{margin-top:3px;flex:0 0 auto}
.consent a{color:var(--gold-2)}