/* Operation Warrior Resolution
   WHITE ground. No tan, no beige, no cream, including rule colours.
   Deep field green rather than flag red or navy: it carries the military
   association without the cliche, and it is distinct from the gold, the navy
   and the rose used on the other MIC 2026 builds. One signal colour, reserved
   for giving, because a nonprofit needs exactly one urgent call.
   Type floor is 16px everywhere. */

:root{
  --ink:#141C18;
  --ink-2:#1E2A23;
  --ink-3:#2A3A31;
  --green:#3B5A42;         /* on white, passes contrast at body size */
  --green-lift:#94C4A2;    /* on the dark ground */
  --signal:#C4552E;        /* GIVING ONLY. Never a generic accent. */
  --paper:#FFFFFF;
  --paper-2:#F1F4F1;
  --white:#fff;
  --text:#15201A;
  --muted:#5D6B62;
  --muted-dark:#A9BCB0;
  --line:#DFE6E0;
  --line-dark:rgba(255,255,255,.15);

  --display:'Newsreader',Georgia,serif;
  --body:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,sans-serif;

  --wrap:1200px;
  --gut:clamp(20px,5vw,60px);
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font:400 17.5px/1.72 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.12;
  letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5vw,64px)}
h2{font-size:clamp(28px,3.6vw,46px)}
h3{font-size:clamp(20px,1.9vw,26px)}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sec{padding:clamp(58px,8vw,108px) 0}
.sec-tight{padding:clamp(40px,5.5vw,72px) 0}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.66;color:var(--muted)}
.dark .lede{color:var(--muted-dark)}
.eyebrow{font:600 16px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);margin:0 0 18px;display:block}
.dark .eyebrow{color:var(--green-lift)}
.measure{max-width:66ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;padding:12px 18px;
  border-radius:8px;box-shadow:0 8px 30px #0003}
:focus-visible{outline:3px solid var(--green-lift);outline-offset:3px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 17px/1 var(--body);
  padding:16px 28px;border-radius:6px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s,background .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn-fill{background:var(--green);color:#fff}
.btn-fill:hover{background:#2E4834}
.btn-give{background:var(--signal);color:#fff}   /* giving only */
.btn-give:hover{background:#A8441F}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.dark .btn-ghost{border-color:var(--line-dark);color:#fff}
.dark .btn-ghost:hover{border-color:var(--green-lift);color:var(--green-lift)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:#141C18f5;
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
.hdr-in{display:flex;align-items:center;gap:20px;max-width:var(--wrap);
  margin:0 auto;padding:14px var(--gut)}
.brand{display:flex;flex-direction:column;text-decoration:none;flex:none;line-height:1.06}
.brand b{font:500 20px/1.08 var(--display);color:#fff;letter-spacing:-.01em}
.brand i{font:600 16px/1 var(--body);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-lift);margin-top:6px}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{font:600 16px/1 var(--body);color:#E4EAE6;text-decoration:none;padding:8px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--green-lift);border-color:var(--green-lift)}
.hdr .btn{padding:12px 20px;font-size:16px}
/* Cascade fix: `.nav a` is (0,1,1) and `.btn-*` is (0,1,0), so the nav colour
   would otherwise win and the header button's label would vanish. */
.nav a.btn-give{color:#fff}
.nav a.btn-fill{color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;
  cursor:pointer;color:#E4EAE6}
.burger svg{width:26px;height:26px}
@media(max-width:1020px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--ink-2);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
    padding:96px 26px 26px;transform:translateX(100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);margin-left:0;overflow-y:auto}
  .nav[data-open=true]{transform:translateX(0)}
  .nav a{font-size:18px;padding:15px 0;border-bottom:1px solid var(--line-dark)}
  .nav a:hover,.nav a[aria-current=page]{border-color:var(--line-dark)}
  .nav .btn{margin-top:18px;justify-content:center}
  .burger{display:block}
  .scrim{position:fixed;inset:0;background:#000;opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s;z-index:55}
  .scrim[data-open=true]{opacity:.55;visibility:visible}
}
@media(max-width:400px){.brand i{display:none}}

/* ---------- hero over photography ---------- */
.hero{position:relative;min-height:min(78vh,700px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#141C1866 0%,#141C1833 40%,#141C18ee 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut) clamp(44px,6vw,80px)}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{color:#DCE6DF;max-width:48ch;margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.motto{font:600 16px/1 var(--body);letter-spacing:.34em;text-transform:uppercase;
  color:var(--green-lift);margin-top:26px}

.dark{background:var(--ink);color:#fff}
.dark h2,.dark h3{color:#fff}
.tint{background:var(--paper-2)}

/* ---------- impact figures ---------- */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,26px);
  margin-top:46px}
.stat b{display:block;font:500 clamp(30px,3.4vw,44px)/1 var(--display);
  color:var(--green-lift);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font:400 16px/1.42 var(--body);
  color:var(--muted-dark)}
@media(max-width:940px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- programme grid ---------- */
.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.prog{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);
  transition:transform .25s,border-color .25s}
.prog:hover{transform:translateY(-3px);border-color:var(--green)}
.prog img{width:100%;aspect-ratio:16/10;object-fit:cover}
.prog .b{padding:24px;display:flex;flex-direction:column;gap:9px;flex:1}
.prog h3{font-size:21px}
.prog p{margin:0;font-size:16.5px;color:var(--muted);flex:1}
.prog .go{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--body);
  color:var(--green)}
.prog .go svg{width:17px;height:17px}
@media(max-width:920px){.progs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.progs{grid-template-columns:1fr}}

/* ---------- split ---------- */
.split{display:grid;gap:clamp(30px,5vw,68px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.shot{border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.shot img{width:100%}

/* ---------- press band ---------- */
.press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,5vw,64px);margin-top:36px}
.press img{height:34px;width:auto;opacity:.75}
.press img:hover{opacity:1}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose p{font-size:17.5px;line-height:1.8}
.prose h3{margin:34px 0 12px}
.prose ul{margin:0 0 1.2em;padding-left:20px}
.prose li{margin-bottom:9px}

/* ---------- form ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,36px)}
.fld{margin-bottom:18px}
.fld label{display:block;font:600 16px/1 var(--body);margin-bottom:8px}
.fld input,.fld textarea,.fld select{width:100%;font:400 17px/1.5 var(--body);
  color:var(--text);background:var(--paper-2);border:1px solid var(--line);
  border-radius:6px;padding:14px 16px}
.fld textarea{min-height:130px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:16px;color:var(--muted);margin:14px 0 0}
.msg{margin-top:16px;font:600 17px/1.5 var(--body);display:none}
.msg[data-on]{display:block}
.msg.ok{color:#1c7a4a}.msg.err{color:#b3261e}

/* ---------- contact strip ---------- */
.cstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.cstrip .k{font:600 16px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-dark);display:block;margin-bottom:11px}
.cstrip a,.cstrip p{font-size:17px;margin:0;color:#fff;text-decoration:none}
.cstrip a:hover{color:var(--green-lift)}
@media(max-width:760px){.cstrip{grid-template-columns:1fr;gap:18px}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding:clamp(52px,6.5vw,82px) 0 28px;
  border-top:1px solid var(--line-dark)}
.foot-top{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:38px}
.foot p{color:var(--muted-dark);font-size:17px}
.foot h4{font:600 16px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a{color:var(--muted-dark);text-decoration:none;font-size:17px}
.foot a:hover{color:var(--green-lift)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);
  font-size:16px;color:var(--muted-dark)}
@media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:28px}}

/* ---------- reveal: default VISIBLE ---------- */
.rv{opacity:1}
.ready .rv{opacity:0;transform:translateY(20px)}
.ready .rv.in{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.7,.3,1),transform .75s cubic-bezier(.22,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .ready .rv,.ready .rv.in{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}