/* Shared shell for the content pages (Mission, Support) so they match the
   home page. One file, so a colour change happens once rather than per page. */
:root{
  color-scheme: dark;
  --bg:#0B0B0F;
  --surface:#15151C;
  --line:rgba(255,255,255,0.10);
  --text:#FFFFFF;
  --muted:#9B96A8;
  --pink:#F94382;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:clip; max-width:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; max-width:100%;
}

/* ── the same pink halo the home page has behind its logo ─────────────── */
.sitehead{position:relative; display:block; padding:38px 18px 22px; text-align:center;}
.sitehead::before{
  content:""; position:absolute; inset:-150px -20% -30px -20%;
  background:radial-gradient(58% 52% at 50% 34%, rgba(249,67,130,0.22), rgba(11,11,15,0) 72%);
  pointer-events:none;
}
.sitehead img{
  /* Matches the home page exactly — same width, same padding above and below. */
  position:relative; width:min(320px,72vw); height:auto; display:block; margin:0 auto;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,0.45));
}
/* Phone only — matches the home page. */
@media (max-width:520px){ .sitehead img{width:62vw;} }
@media (prefers-reduced-motion: no-preference){
  .sitehead img{animation:headIn .8s cubic-bezier(.22,.61,.36,1) both;}
  @keyframes headIn{from{opacity:0; transform:translateY(-10px) scale(.94);} to{opacity:1; transform:none;}}
}

/* ── navigation: identical to the home page ───────────────────────────── */
.navbtn{
  position:fixed; top:16px; right:16px; z-index:60;
  width:44px; height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:rgba(21,21,28,0.72); border:1px solid var(--line); border-radius:12px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  cursor:pointer; padding:0;
}
.navbtn span{
  display:block; width:18px; height:2px; border-radius:2px; background:var(--text);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s linear;
}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.navbtn:focus-visible{outline:2px solid var(--pink); outline-offset:3px;}
.navmenu{
  position:fixed; top:70px; right:16px; z-index:59;
  display:flex; flex-direction:column; min-width:174px;
  background:rgba(21,21,28,0.94); border:1px solid var(--line); border-radius:14px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,0.55); overflow:hidden;
}
.navmenu a{
  padding:13px 18px; color:var(--text); text-decoration:none;
  font-size:14.5px; font-weight:600; letter-spacing:0.01em;
  border-bottom:1px solid var(--line);
}
.navmenu a:last-child{border-bottom:none;}
/* An author display rule beats the UA stylesheet's [hidden]{display:none}. */
.navmenu[hidden]{display:none;}
.navmenu a:hover{background:rgba(255,255,255,0.06); color:var(--pink);}
@media (prefers-reduced-motion: no-preference){
  .navmenu{transform-origin:top right; animation:navIn .22s cubic-bezier(.22,.61,.36,1) both;}
  @keyframes navIn{from{opacity:0; transform:translateY(-6px) scale(.97);} to{opacity:1; transform:none;}}
}

/* ── page content ─────────────────────────────────────────────────────── */
.wrap{max-width:760px; margin:0 auto; padding:10px 20px 72px;}
/* The 20px below used to make room for the company line under the h1. With
   that gone, the rule sat marooned below the heading. */
header{margin-bottom:24px; padding-bottom:10px; border-bottom:1px solid var(--line);}
h1{font-size:clamp(26px,4.6vw,34px); margin:0; letter-spacing:-0.025em; font-weight:800;}
h2{font-size:19px; margin:34px 0 12px; letter-spacing:-0.01em; font-weight:700;}
p{margin:12px 0; color:#D9D6E0;}
.lede{font-size:1.08em; font-weight:500; line-height:1.72; color:var(--text);}
.body-secondary{color:var(--muted);}
.meta{color:var(--muted); font-size:14px;}
.meta a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line);}
a{color:var(--pink); text-decoration:none;}
a:hover{text-decoration:underline;}
strong{color:var(--text);}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:20px; margin:18px 0;
}
.card p{margin:0;}
.card.highlight{border-left:4px solid var(--pink); border-radius:4px 16px 16px 4px;}
ul{margin:10px 0 10px 18px; padding:0;}
li{margin:8px 0; color:#D9D6E0;}
.values{list-style:none; padding:0; margin:0;}
.values li{display:flex; align-items:flex-start; gap:12px; padding:15px 0; border-bottom:1px solid var(--line);}
.values li:last-child{border-bottom:none;}
.values .icon{font-size:20px; flex-shrink:0; width:28px; text-align:center;}
.values li p{margin:0; font-size:15px; color:#D9D6E0;}
.foot{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px;}
.foot a{color:var(--muted); border-bottom:1px solid var(--line); text-decoration:none;}
.foot a:hover{color:var(--text);}
.dot{padding:0 6px;}