/* ==========================================================================
   True Kind Foundation — stylesheet
   Cream paper and ink structure, carrying the four logo colours —
   blue, purple, green, red — as the accent system throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* ---- BRAND PALETTE, sampled from assets/img/logo.png -------------------
     Two tiers, because the pure logo colours are too light to carry small
     text on cream (green is 2.56:1, blue 3.32:1):
       --brand-*   exact logo colour. Fills, tints, rules, icons, graphics.
       --green/blue/purple/red   darkened just enough to clear AA as text.
       --*-btn     darkened just enough to carry white text.
     -------------------------------------------------------------------- */
  --brand-green:  #59B306;
  --brand-blue:   #0392D4;
  --brand-purple: #7D4AB1;
  --brand-red:    #DE3548;

  /* Text-safe (>=4.5:1 on both cream surfaces) */
  --green:       #3E7D04;
  --blue:        #0275AA;
  --purple:      #7D4AB1;
  --red:         #CC3142;

  /* Solid fills carrying white text (>=4.5:1) */
  --green-btn:   #408104;
  --blue-btn:    #0278AE;
  --purple-btn:  #7D4AB1;
  --clay:        #D53345;
  --clay-deep:   #A8243A;

  /* Darker steps for hover */
  --blue-deep:   #01587F;
  --purple-deep: #5B3480;
  --green-deep:  #2E5C03;

  /* All four logo colours as one rule — the brand signature */
  --brand-bar: linear-gradient(90deg,
                 var(--brand-blue) 0%, var(--brand-purple) 33%,
                 var(--brand-green) 66%, var(--brand-red) 100%);

  /* Neutrals */
  --ink:       #101F29;
  --ink-2:     #1C2E39;
  --paper:     #FCFAF6;
  --paper-2:   #F5F2EA;
  --paper-3:   #EDE8DC;

  /* Text */
  --text:      #29373F;
  --text-soft: #5B6870;
  --text-mute: #676E73;   /* 4.97:1 on paper, 4.63:1 on paper-2 — these carry
                             eyebrows, labels and captions, so they need AA */

  /* Hairlines — the primary way surfaces are separated here */
  --rule:        rgba(16,31,41,0.10);
  --rule-strong: rgba(16,31,41,0.18);
  --rule-invert: rgba(252,250,246,0.16);

  /* Type scale — wide contrast between display and body */
  --fs-display: clamp(2.6rem,  1.55rem + 4.1vw, 4.4rem);
  --fs-h1:      clamp(2.15rem, 1.55rem + 2.6vw, 3.35rem);
  --fs-h2:      clamp(1.75rem, 1.36rem + 1.7vw, 2.6rem);
  --fs-h3:      clamp(1.1rem,  1.04rem + 0.3vw, 1.3rem);
  --fs-lede:    clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  --fs-body:    1rem;
  --fs-sm:      0.925rem;
  --fs-xs:      0.82rem;
  --fs-mono:    0.68rem;
  --fs-label:   0.64rem;   /* uppercase mono labels — bumped on mobile */

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 18px;
  --sp-5: 26px;  --sp-6: 36px;  --sp-7: 52px;  --sp-8: 72px;
  --sp-9: 96px;  --sp-10:128px;

  /* Section rhythm — deliberately generous */
  --section-y:   clamp(76px, 5vw + 44px, 136px);
  --section-y-s: clamp(56px, 3.5vw + 32px, 92px);

  /* Shape */
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /* Elevation — barely there. Depth comes from hairlines, not shadow. */
  --shadow-1: 0 1px 2px rgba(16,31,41,0.03);
  --shadow-2: 0 2px 4px rgba(16,31,41,0.04), 0 12px 28px -20px rgba(16,31,41,0.20);
  --shadow-3: 0 4px 10px rgba(16,31,41,0.05), 0 30px 60px -34px rgba(16,31,41,0.32);

  /* Layout */
  --maxw:        1180px;
  --maxw-narrow: 760px;
  --gutter: clamp(22px, 4vw, 40px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.24,1);
  --dur:  .3s;

  /* Fonts */
  --font-body:    'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
h1{
  font-size:var(--fs-h1); font-weight:400;
  line-height:1.08; letter-spacing:-0.028em;
}
h2{
  font-size:var(--fs-h2); font-weight:400;
  line-height:1.12; letter-spacing:-0.024em;
}
h3{
  font-size:var(--fs-h3); font-weight:500;
  line-height:1.34; letter-spacing:-0.012em;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
strong,b{ font-weight:600; }

::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
}
.wrap-narrow{ max-width:var(--maxw-narrow); }

/* Grid items default to min-width:auto (= min-content), which lets a single
   long child push a column past the container. Opt every layout grid out. */
.story-grid > *, .contact-grid > *, .cp-wrap > *, .footprint-wrap > *,
.hero-grid > *, .work-grid > *, .mvv-grid > *, .commit-grid > *,
.tier-grid > *, .board-grid > *, .rings > *, .foot-grid > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *{ min-width:0; }

section{ padding-block:var(--section-y); }
section.tight-top{ padding-top:0; }
section.tight-bottom{ padding-bottom:0; }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--sp-7);
  margin-bottom:var(--sp-8);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--rule);
  flex-wrap:wrap;
}
/* Size in rem, never ch — ch resolves against this wrapper's body font, not
   the heading's, and silently caps every h2 at ~346px. */
.section-head > div{ flex:1 1 22rem; max-width:38rem; }
.section-head h2{ margin-top:var(--sp-4); }
.section-head > p{
  color:var(--text-soft);
  max-width:32rem; flex:0 1 24rem;
  font-size:var(--fs-sm); margin:0;
}
.section-head.center{
  flex-direction:column; align-items:center;
  text-align:center; border-bottom:none; padding-bottom:0;
}
.section-head.center > div{ max-width:42rem; }
.section-head.center .eyebrow{ justify-content:center; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--purple);
  display:flex; align-items:center; gap:12px;
  margin:0; font-weight:400;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background:currentColor; flex:none;
}

.lede{
  font-size:var(--fs-lede);
  color:var(--text-soft);
  line-height:1.68;
  max-width:54ch;
}

.skip-link{
  position:fixed; top:-80px; left:20px; z-index:300;
  background:var(--ink); color:var(--paper);
  padding:12px 22px; border-radius:var(--radius-sm);
  text-decoration:none; font-weight:500; font-size:var(--fs-sm);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:20px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   4. HEADER / NAV
   -------------------------------------------------------------------------- */
.topbar{ background:var(--ink); color:var(--paper); }
.topbar-inner{
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-4); padding-block:10px;
  flex-wrap:wrap; text-align:center;
}
.topbar-msg{
  font-size:var(--fs-xs);
  color:rgba(252,250,246,0.72);
  letter-spacing:0.01em;
}
.topbar-donate{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--paper); font-weight:500; font-size:var(--fs-xs);
  text-decoration:none;
  padding-bottom:1px;
  border-bottom:1px solid rgba(252,250,246,0.45);
  transition:border-color var(--dur) var(--ease);
}
.topbar-donate:hover{ border-color:var(--paper); }
@media (max-width:620px){ .topbar-msg{ display:none; } }

/* The blur lives on a pseudo-element, NOT on the header itself: backdrop-filter
   makes an element a containing block for position:fixed descendants, which
   would size the mobile nav panel against the 140px header instead of the
   viewport and clip it to a sliver. */
header.site{
  position:sticky; top:0; z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
header.site::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(252,250,246,0.9);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
header.site.scrolled{ border-bottom-color:var(--rule); }
header.site::after{
  content:""; position:absolute; inset:auto 0 -3px; height:3px;
  background:var(--brand-bar);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5);
  max-width:var(--maxw); margin-inline:auto;
  padding:16px var(--gutter);
}
.brand{ display:flex; align-items:center; text-decoration:none; flex:none; }
.brand .mark{ height:42px; width:auto; }

.navlinks{
  display:flex; align-items:center; gap:var(--sp-5);
  list-style:none; margin:0; padding:0;
  font-size:0.88rem; font-weight:400;
}
.navlinks a{
  position:relative;
  text-decoration:none; color:var(--text-soft);
  padding:6px 1px; white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.navlinks a:not(.navcta)::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--brand-purple);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.navlinks a:not(.navcta):hover{ color:var(--ink); }
.navlinks a:not(.navcta):hover::after,
.navlinks a.active::after{ transform:scaleX(1); }
.navlinks a.active{ color:var(--purple); }

/* Must out-specify `.navlinks a` above or the pill inherits its 1px padding. */
.navlinks a.navcta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--clay); color:var(--paper);
  padding:11px 24px; border-radius:var(--radius-pill);
  font-weight:500; font-size:0.85rem; line-height:1.15;
  letter-spacing:0.01em;
  transition:background var(--dur) var(--ease);
}
.navlinks a.navcta::after{ display:none; }
.navlinks a.navcta:hover{ background:var(--clay-deep); color:var(--paper); }

.menubtn{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
  padding:0; flex:none;
}
.menubtn span,
.menubtn span::before,
.menubtn span::after{
  content:""; display:block; width:22px; height:1.5px;
  background:var(--ink);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menubtn span{ position:relative; }
.menubtn span::before{ position:absolute; top:-7px; }
.menubtn span::after{  position:absolute; top:7px; }
.menubtn[aria-expanded="true"] span{ background:transparent; }
.menubtn[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.menubtn[aria-expanded="true"] span::after{  transform:translateY(-7px) rotate(-45deg); }

@media (max-width:980px){
  .menubtn{ display:flex; }
  .navlinks{
    position:fixed; inset:0 0 0 auto;
    width:min(360px, 88vw);
    background:var(--paper);
    border-left:1px solid var(--rule);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:104px var(--sp-6) var(--sp-6);
    gap:0; font-size:1.05rem;
    overflow-y:auto;
    box-shadow:var(--shadow-3);
    /* Hidden state stays inside the viewport — an off-canvas translate
       creates a horizontal scrollbar on the document. */
    visibility:hidden; opacity:0; pointer-events:none;
    transform-origin:100% 50%; transform:scale(.98);
    transition:transform var(--dur) var(--ease), opacity .24s var(--ease),
               visibility 0s linear var(--dur);
  }
  .navlinks.open{
    visibility:visible; opacity:1; pointer-events:auto; transform:none;
    transition:transform var(--dur) var(--ease), opacity .24s var(--ease), visibility 0s;
  }
  .navlinks li{ width:100%; }
  .navlinks a{
    display:block; width:100%;
    padding:16px 2px;
    border-bottom:1px solid var(--rule);
  }
  .navlinks a:not(.navcta)::after{ display:none; }
  .navlinks a.navcta{
    display:flex; width:100%;
    margin-top:var(--sp-5); border-bottom:none;
    padding:16px 24px;
  }
  .nav-scrim{
    position:fixed; inset:0; z-index:55;
    background:rgba(16,31,41,0.42);
    opacity:0; pointer-events:none;
    transition:opacity var(--dur) var(--ease);
  }
  .nav-scrim.show{ opacity:1; pointer-events:auto; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:500; font-size:0.94rem; line-height:1;
  letter-spacing:0.01em;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; }

.btn-primary{ background:var(--clay); color:var(--paper); }
.btn-primary:hover{ background:var(--clay-deep); }
.btn-secondary{ background:var(--purple-btn); color:var(--paper); }
.btn-secondary:hover{ background:var(--purple-deep); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:var(--ink-2); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn-ghost:hover{ border-color:var(--brand-purple); color:var(--purple); }
.btn-on-dark{ background:transparent; color:var(--paper); border-color:rgba(252,250,246,0.42); }
.btn-on-dark:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-block{ width:100%; }
.btn[disabled], .btn[aria-busy="true"]{ opacity:.55; pointer-events:none; }

.btn-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }

.textlink{
  font-weight:500; font-size:var(--fs-sm);
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:2px;
  transition:border-color var(--dur) var(--ease);
}
.textlink:hover{ border-color:var(--ink); }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(64px, 6vw + 30px, 128px) clamp(56px, 5vw + 26px, 104px);
  background:
    radial-gradient(ellipse 55% 52% at 88% 4%,  rgba(3,146,212,0.16),  transparent 62%),
    radial-gradient(ellipse 46% 46% at 4% 96%,  rgba(125,74,177,0.12), transparent 60%),
    radial-gradient(ellipse 42% 40% at 60% 112%, rgba(89,179,6,0.10),  transparent 60%),
    radial-gradient(ellipse 30% 30% at 30% -6%,  rgba(222,53,72,0.07), transparent 60%),
    var(--paper);
}
.hero-grid{
  display:grid; grid-template-columns:1.12fr 0.88fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero h1{ font-size:var(--fs-display); margin-top:var(--sp-5); }
.hero h1 em{ font-style:italic; color:var(--clay); }
.hero .lede{ margin:var(--sp-6) 0 var(--sp-7); max-width:44ch; }

.hero-stats-strip{
  margin-top:clamp(52px, 6vw, 88px);
  padding-top:var(--sp-6);
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--sp-6);
}
.hstat b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem);
  color:var(--ink); display:block; line-height:1;
  letter-spacing:-0.03em;
}
.hstat span{
  font-size:var(--fs-xs); color:var(--text-soft);
  display:block; margin-top:var(--sp-3);
}

/* Ripple mark — monochrome hairlines */
.ripple-wrap{
  position:relative; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.ripple-wrap svg{ width:100%; height:100%; overflow:visible; }
.ripple-ring{
  fill:none; stroke:var(--ink); stroke-opacity:.16; stroke-width:1;
  transform-origin:center; transform-box:fill-box;
  animation:rippleOut 5.5s var(--ease) infinite;
}
.ripple-ring.r2{ animation-delay:1.4s; }
.ripple-ring.r3{ animation-delay:2.8s; }
.ripple-ring.r4{ animation-delay:4.2s; }
@keyframes rippleOut{
  0%{ transform:scale(.3); opacity:0; }
  14%{ opacity:.85; }
  100%{ transform:scale(1); opacity:0; }
}
.ripple-core{ fill:var(--ink); }
.ripple-core-mark{ fill:var(--paper); }

@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .ripple-wrap{ max-width:220px; margin-inline:auto; order:-1; }
  .hero-stats-strip{ grid-template-columns:repeat(2,1fr); gap:var(--sp-6) var(--sp-5); }
}
@media (max-width:560px){
  .ripple-wrap{ max-width:150px; }
  .btn-row .btn, .btn-row .login-trigger{ flex:1 1 100%; }
}

/* Inner-page hero */
.inner-hero{
  position:relative;
  padding-block:clamp(44px, 4vw + 22px, 80px) clamp(48px, 4vw + 24px, 84px);
  background:
    radial-gradient(ellipse 50% 60% at 90% 0%, rgba(3,146,212,0.12),  transparent 62%),
    radial-gradient(ellipse 40% 50% at 2% 100%, rgba(125,74,177,0.09), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--rule);
}
.inner-hero h1{ margin-top:var(--sp-5); max-width:19ch; }
.inner-hero .lede{ margin-top:var(--sp-5); }

.breadcrumb{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--text-mute); margin:0 0 var(--sp-5);
}
.breadcrumb a{ text-decoration:none; color:var(--text-mute); }
.breadcrumb a:hover{ color:var(--ink); }

/* --------------------------------------------------------------------------
   7. SURFACES
   -------------------------------------------------------------------------- */
.surface-paper2{
  background:
    linear-gradient(165deg, rgba(3,146,212,0.06) 0%, rgba(125,74,177,0.045) 45%,
                    rgba(89,179,6,0.055) 100%),
    var(--paper-2);
}
.surface-ink,
.surface-purple{
  background:
    radial-gradient(ellipse 60% 70% at 90% 0%, rgba(3,146,212,0.22), transparent 60%),
    linear-gradient(140deg, #4A2E6B 0%, #3A2355 55%, #2C1A42 100%);
  color:rgba(252,250,246,0.82);
}

.surface-ink h1, .surface-ink h2, .surface-ink h3,
.surface-purple h1, .surface-purple h2, .surface-purple h3{ color:var(--paper); }
.surface-ink .eyebrow,
.surface-purple .eyebrow{ color:rgba(252,250,246,0.62); }
.surface-ink .section-head,
.surface-purple .section-head{ border-bottom-color:var(--rule-invert); }
.surface-ink .section-head > p,
.surface-purple .section-head > p{ color:rgba(252,250,246,0.72); }

/* --------------------------------------------------------------------------
   8. CARDS — hairline construction, no drop shadow at rest
   -------------------------------------------------------------------------- */
.card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:var(--sp-6);
}
.card-hover{ transition:border-color var(--dur) var(--ease); }
.card-hover:hover{ border-color:var(--rule-strong); }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
@media (max-width:1000px){ .grid-4,.grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* Mission / value cards */
.mvv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.mvv-card{
  background:transparent;
  border-top:1px solid var(--rule-strong);
  border-radius:0;
  padding:var(--sp-6) var(--sp-5) var(--sp-5) 0;
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.mvv-icon{
  width:38px; height:38px; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
}
.mvv-icon svg{
  width:26px; height:26px;
  stroke:var(--brand-blue); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.mvv-card:nth-child(2) .mvv-icon svg{ stroke:var(--brand-purple); }
.mvv-card:nth-child(3) .mvv-icon svg{ stroke:var(--brand-red); }
.mvv-card:nth-child(4) .mvv-icon svg{ stroke:var(--brand-green); }
.mvv-card h3{ margin:0; }
.mvv-card p{ margin:0; color:var(--text-soft); font-size:var(--fs-sm); }
.surface-ink .mvv-card{ border-top-color:var(--rule-invert); }
.surface-ink .mvv-card p{ color:rgba(252,250,246,0.72); }
/* Four-item variants get four columns rather than 3 + an orphan */
.mvv-grid:has(> :nth-child(4)){ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .mvv-grid:has(> :nth-child(4)){ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .mvv-grid,
  .mvv-grid:has(> :nth-child(4)){ grid-template-columns:1fr; gap:0; }
}

/* Impact rings */
.rings{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--rule);
}
.ring-card{
  padding:var(--sp-7) var(--sp-5);
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--sp-4);
}
.ring-card:last-child{ border-right:none; }
.ring-card svg{ width:108px; height:108px; }
.ring-track{ fill:none; stroke:var(--rule); stroke-width:3; }
.ring-progress{
  fill:none; stroke:var(--brand-blue); stroke-width:4; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:50% 50%;
  stroke-dasharray:339; stroke-dashoffset:339;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.ring-card:nth-child(2) .ring-progress{ stroke:var(--brand-purple); }
.ring-card:nth-child(3) .ring-progress{ stroke:var(--brand-green); }
.ring-card:nth-child(4) .ring-progress{ stroke:var(--brand-red); }
.ring-num{
  font-family:var(--font-display); font-size:1.4rem; font-weight:400;
  fill:var(--ink); letter-spacing:-0.02em;
}
.ring-card h3{ font-size:1rem; }
.ring-card p{ margin:0; font-size:var(--fs-xs); color:var(--text-soft); }
@media (max-width:900px){
  .rings{ grid-template-columns:repeat(2,1fr); }
  .ring-card:nth-child(2){ border-right:none; }
  .ring-card:nth-child(1),.ring-card:nth-child(2){ border-bottom:1px solid var(--rule); }
}
@media (max-width:460px){
  .rings{ grid-template-columns:1fr; }
  .ring-card{ border-right:none; border-bottom:1px solid var(--rule); }
  .ring-card:last-child{ border-bottom:none; }
}

/* Program cards — quiet tinted panels, brand colour in the linework only */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.work-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden; padding:0;
  display:flex; flex-direction:column;
  transition:border-color var(--dur) var(--ease);
}
.work-card:hover{ border-color:var(--rule-strong); }
.work-media{
  aspect-ratio:16/9; position:relative;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--rule);
}
.work-media svg{ width:52%; height:52%; stroke-width:1.1; }
.work-card:nth-child(1) .work-media{ background:rgba(3,146,212,0.10);  color:var(--brand-blue); }
.work-card:nth-child(2) .work-media{ background:rgba(125,74,177,0.10); color:var(--brand-purple); }
.work-card:nth-child(3) .work-media{ background:rgba(89,179,6,0.12);   color:var(--brand-green); }
.work-card:nth-child(4) .work-media{ background:rgba(222,53,72,0.10);  color:var(--brand-red); }
.work-card:nth-child(5) .work-media{ background:rgba(16,31,41,0.06);   color:var(--ink); }
/* The tag is text sitting ON the tint, so it needs a step darker again than
   the on-cream text colour — the tint drops each pairing about 0.8:1. */
.work-card:nth-child(1) .work-media-tag{ color:#026C9D; }
.work-card:nth-child(2) .work-media-tag{ color:#7D4AB1; }
.work-card:nth-child(3) .work-media-tag{ color:#397304; }
.work-card:nth-child(4) .work-media-tag{ color:#BA2D3C; }
.work-media-tag{
  position:absolute; top:14px; left:16px;
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:0.16em;
  color:currentColor; opacity:.85;
}
.work-body{
  padding:var(--sp-5) var(--sp-5) var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-3); flex:1;
}
.work-body p{ margin:0; color:var(--text-soft); font-size:var(--fs-sm); flex:1; }
.work-body .textlink{ align-self:flex-start; margin-top:var(--sp-2); }
@media (max-width:1000px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){  .work-grid{ grid-template-columns:1fr; } }

/* Board */
.board-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--sp-6) var(--sp-5);
}
.board-card{
  border-top:1px solid var(--rule-strong);
  padding-top:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.board-avatar{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:400; font-size:0.8rem;
  letter-spacing:0.06em;
  color:var(--blue);
  border:1.5px solid var(--brand-blue);
  margin-bottom:var(--sp-3);
}
.board-card:nth-child(4n+2) .board-avatar{ border-color:var(--brand-purple); color:var(--purple); }
.board-card:nth-child(4n+3) .board-avatar{ border-color:var(--brand-green);  color:var(--green); }
.board-card:nth-child(4n+4) .board-avatar{ border-color:var(--brand-red);    color:var(--red); }
.board-card h3{ font-size:1.05rem; margin:0; }
.board-card .role{
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--text-mute); margin:0 0 var(--sp-2);
}
.board-card p:last-child{ margin:0; font-size:var(--fs-xs); color:var(--text-soft); }
@media (max-width:900px){ .board-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .board-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   9. COMMITMENTS
   -------------------------------------------------------------------------- */
.commit-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-6) var(--sp-5);
}
.commit-card{
  position:relative;
  border-top:2px solid var(--brand-blue);
  padding:var(--sp-5) var(--sp-5) 0 0;
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.commit-card:nth-child(2){ border-top-color:var(--brand-purple); }
.commit-card:nth-child(3){ border-top-color:var(--brand-green); }
.commit-card:nth-child(4){ border-top-color:var(--brand-red); }
.commit-num{
  font-family:var(--font-mono); font-size:var(--fs-mono);
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--blue);
}
.commit-card:nth-child(2) .commit-num{ color:var(--purple); }
.commit-card:nth-child(3) .commit-num{ color:var(--green); }
.commit-card:nth-child(4) .commit-num{ color:var(--red); }
.commit-card h3{ margin:0; }
.commit-card p{ margin:0; color:var(--text-soft); font-size:var(--fs-sm); }
.surface-ink .commit-card{ border-top-color:var(--rule-invert); }
.surface-ink .commit-card p{ color:rgba(252,250,246,0.72); }
@media (max-width:1000px){ .commit-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){  .commit-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   10. STORY / TRUST / STATEMENT
   -------------------------------------------------------------------------- */
.story-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:clamp(36px, 5vw, 80px); align-items:start;
}
.story-grid .prose p{ color:var(--text-soft); line-height:1.8; margin-bottom:var(--sp-4); }
@media (max-width:920px){ .story-grid{ grid-template-columns:1fr; } }

.trust-panel{
  border-radius:var(--radius);
  padding:var(--sp-6);
  background:linear-gradient(150deg, #4A2E6B 0%, #33204C 100%);
  color:rgba(252,250,246,0.85);
}
.trust-panel dd{ color:var(--paper); }
.trust-panel dt{ color:rgba(252,250,246,0.6); }
.trust-panel h3{ color:var(--paper); }
.trust-panel h3{ margin-bottom:var(--sp-5); }
.trust-panel dl{ display:grid; gap:var(--sp-4); margin:0; }
.trust-panel dt{
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--text-mute); margin-bottom:5px;
}
.trust-panel dd{ margin:0; font-weight:500; font-size:var(--fs-sm); }


.statement{
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(1.45rem, 1.05rem + 1.7vw, 2.15rem);
  line-height:1.36; letter-spacing:-0.02em;
  margin:0 0 var(--sp-6); color:var(--paper);
}
.body-invert{ color:rgba(252,250,246,0.78); }
.body-invert a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }

.fact-list{ list-style:none; margin:0; padding:0; display:grid; }
.fact-list li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:var(--sp-4);
  padding:var(--sp-5) 0;
  border-top:1px solid var(--rule-invert);
  font-size:var(--fs-sm); color:rgba(252,250,246,0.8);
}
.fact-list li:first-child{ padding-top:0; border-top:none; }
.fact-list b{
  color:rgba(252,250,246,0.55); font-family:var(--font-mono);
  font-weight:400; font-size:var(--fs-mono);
  text-transform:uppercase; letter-spacing:0.16em;
  padding-top:5px;
}
@media (max-width:520px){ .fact-list li{ grid-template-columns:1fr; gap:var(--sp-2); } }

/* --------------------------------------------------------------------------
   11. VOICES — editorial pull-quotes on light
   -------------------------------------------------------------------------- */
.voice-track{
  display:flex; gap:var(--sp-5);
  overflow-x:auto; padding-bottom:var(--sp-4);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.voice-track::-webkit-scrollbar{ height:2px; }
.voice-track::-webkit-scrollbar-track{ background:var(--rule); }
.voice-track::-webkit-scrollbar-thumb{ background:var(--rule-strong); }
.voice-card{
  scroll-snap-align:start; flex:0 0 min(330px, 80vw);
  border-top:1px solid var(--rule-strong);
  padding:var(--sp-5) 0 0;
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.voice-card blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:1.12rem; line-height:1.5; letter-spacing:-0.01em;
  margin:0; color:var(--ink);
}
.voice-who{ display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; }
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--brand-blue); color:var(--blue);
  font-family:var(--font-mono); font-weight:400; font-size:0.7rem;
}
.voice-card:nth-child(2) .avatar{ border-color:var(--brand-purple); color:var(--purple); }
.voice-card:nth-child(3) .avatar{ border-color:var(--brand-green);  color:var(--green); }
.voice-card:nth-child(4) .avatar{ border-color:var(--brand-red);    color:var(--red); }
.voice-who b{ display:block; font-size:var(--fs-sm); font-weight:500; color:var(--ink); }
.voice-who span{ font-size:var(--fs-xs); color:var(--text-mute); }

/* --------------------------------------------------------------------------
   12. CTA BAND + BANK DETAILS
   -------------------------------------------------------------------------- */
.ctaband{
  background:linear-gradient(120deg, var(--blue-deep) 0%, #0278AE 38%, var(--purple-deep) 100%);
  padding-block:var(--section-y-s);
}
.ctaband h2{ color:var(--paper); }
.ctaband .btn-primary{ background:var(--paper); color:var(--ink); }
.ctaband .btn-primary:hover{ background:var(--paper-3); }
.ctaband .btn-ghost{ color:var(--paper); border-color:rgba(252,250,246,0.45); }
.ctaband .btn-ghost:hover{ background:rgba(252,250,246,0.12); border-color:var(--paper); color:var(--paper); }
.ctaband-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap;
}
.ctaband h2{ max-width:22ch; }
.surface-ink.ctaband,
.ctaband.surface-ink h2{ color:var(--paper); }

.bank-details{
  margin-top:var(--sp-6); margin-bottom:0;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--paper);
  padding:var(--sp-5) var(--sp-6);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--sp-5);
}
.bank-details > div{ min-width:0; }
.bank-details dt{
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--text-mute); margin-bottom:7px;
}
.bank-details dd{
  margin:0; font-weight:500; font-size:var(--fs-sm);
  color:var(--ink); overflow-wrap:anywhere;
}
.surface-ink .bank-details{
  background:transparent; border-color:var(--rule-invert);
}
.surface-ink .bank-details dt{ color:rgba(252,250,246,0.55); }
.surface-ink .bank-details dd{ color:var(--paper); }
@media (max-width:900px){ .bank-details{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .bank-details{ grid-template-columns:1fr; } }

/* Donate tiers */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.tier-card{
  border-top:2px solid var(--brand-blue);
  padding:var(--sp-5) var(--sp-5) 0 0;
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.tier-card:nth-child(2){ border-top-color:var(--brand-purple); }
.tier-card:nth-child(3){ border-top-color:var(--brand-green); }
.tier-amount{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem, 1.5rem + 1.7vw, 2.7rem);
  color:var(--ink); line-height:1; letter-spacing:-0.035em;
}
.tier-card h3{ margin:0; }
.tier-card p{ margin:0; color:var(--text-soft); font-size:var(--fs-sm); flex:1; }
@media (max-width:820px){ .tier-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.form-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(26px, 3.2vw, 44px);
}
.surface-paper2 .form-card{ background:var(--paper); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-5); }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-size:var(--fs-xs); font-weight:500; color:var(--ink);
  letter-spacing:0.01em;
}
fieldset.field{ border:none; padding:0; margin:0; }
.field-legend{
  font-size:var(--fs-xs); font-weight:500; color:var(--ink);
  letter-spacing:0.01em; padding:0; margin-bottom:9px;
}
/* A single form shouldn't run the full 1180px measure */
.narrow-block{ max-width:58rem; margin-inline:auto; }
.field .req{ color:var(--clay); }
.field > input,
.field > select,
.field > textarea{
  font-family:var(--font-body); font-size:0.95rem; color:var(--text);
  padding:13px 15px;
  border-radius:var(--radius-sm);
  border:1px solid var(--rule-strong);
  background:var(--paper);
  outline:none; width:100%;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field > input::placeholder,
.field > textarea::placeholder{ color:var(--text-mute); }
.field > input:hover, .field > select:hover, .field > textarea:hover{ border-color:var(--text-mute); }
.field > input:focus, .field > select:focus, .field > textarea:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(16,31,41,0.07);
}
.field > textarea{ resize:vertical; min-height:118px; }
.field > select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B6870' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:40px;
}
.field-error{ font-size:var(--fs-xs); color:var(--clay-deep); font-weight:500; display:none; }
.field.invalid > input,
.field.invalid > select,
.field.invalid > textarea{ border-color:var(--clay); }
.field.invalid > input:focus,
.field.invalid > select:focus,
.field.invalid > textarea:focus{ box-shadow:0 0 0 3px rgba(158,48,64,0.12); }
.field.invalid .field-error{ display:block; }

.checkbox-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-check{
  display:inline-flex; align-items:center; gap:10px;
  /* flex:none is load-bearing — as shrinkable items these wrap their labels
     onto three lines and the pill radius turns them into giant ovals. */
  flex:0 0 auto; max-width:100%;
  white-space:nowrap;
  padding:9px 18px 9px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--rule-strong);
  font-size:var(--fs-xs); line-height:1.4; cursor:pointer;
  background:transparent; user-select:none;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.chip-check:hover{ border-color:var(--text-mute); }
.chip-check input{
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; margin:0; flex:none;
  border:1px solid var(--rule-strong); border-radius:4px;
  background:transparent; position:relative; cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.chip-check input:checked{ background:var(--ink); border-color:var(--ink); }
.chip-check input:checked::after{
  content:""; position:absolute; left:4.5px; top:1.5px;
  width:4px; height:8px;
  border:solid var(--paper); border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg);
}
.chip-check:has(input:checked){ border-color:var(--ink); background:rgba(16,31,41,0.035); }
.chip-check:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:420px){ .chip-check{ white-space:normal; } }

.hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.form-submit{
  margin-top:var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
}
.form-note{ font-size:var(--fs-xs); color:var(--text-mute); margin:var(--sp-4) 0 0; }
.form-alert{
  display:none; margin-top:var(--sp-4);
  padding:14px 18px; border-radius:var(--radius-sm);
  font-size:var(--fs-sm); line-height:1.55;
  border:1px solid;
}
.form-alert.show{ display:block; }
.form-alert.success{ background:rgba(74,107,34,0.07); border-color:rgba(74,107,34,0.3); color:var(--green-deep); }
.form-alert.error{   background:rgba(158,48,64,0.06); border-color:rgba(158,48,64,0.3); color:var(--clay-deep); }
.spinner{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(252,250,246,0.35); border-top-color:var(--paper);
  animation:spin .7s linear infinite; display:none;
}
[aria-busy="true"] .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   14. MODAL
   -------------------------------------------------------------------------- */
.login-trigger{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--rule-strong);
  color:var(--ink); font-family:var(--font-body);
  border-radius:var(--radius-pill); padding:14px 26px;
  font-size:0.94rem; font-weight:500; cursor:pointer; line-height:1;
  transition:border-color var(--dur) var(--ease);
}
.login-trigger:hover{ border-color:var(--ink); }

.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(16,31,41,0.55);
  backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:var(--sp-5);
}
.modal-overlay.open{ display:flex; }
.modal-panel{
  background:var(--paper); border-radius:var(--radius);
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  max-width:420px; width:100%; position:relative;
  box-shadow:var(--shadow-3);
  max-height:90vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:18px; right:18px;
  background:none; border:none; cursor:pointer;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--text-soft);
  transition:color var(--dur) var(--ease);
}
.modal-close:hover{ color:var(--ink); }
.modal-panel h3{ font-size:1.3rem; margin-bottom:6px; }
.modal-sub{ color:var(--text-soft); font-size:var(--fs-sm); margin:0 0 var(--sp-5); }
.modal-panel .field{ margin-bottom:var(--sp-4); }
.modal-note{
  margin:var(--sp-5) 0 0; font-size:var(--fs-xs);
  color:var(--text-mute); line-height:1.6;
  padding-top:var(--sp-4); border-top:1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   15. PRESS
   -------------------------------------------------------------------------- */
.press-list{ display:grid; border-top:1px solid var(--rule); }
.press-card{
  display:grid; grid-template-columns:9rem 1fr; gap:var(--sp-6);
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.press-date{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  color:var(--text-mute); line-height:1.6; padding-top:3px;
}
.press-tag{
  font-family:var(--font-mono); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:0.16em;
  color:var(--green); display:inline-block; margin-bottom:var(--sp-3);
}
.press-card h3{ margin-bottom:var(--sp-3); }
.press-card p{ margin:0 0 var(--sp-4); color:var(--text-soft); font-size:var(--fs-sm); }
@media (max-width:640px){ .press-card{ grid-template-columns:1fr; gap:var(--sp-3); } }

.note-box{
  text-align:center; padding:var(--sp-7) var(--sp-5);
  border:1px solid var(--rule); border-radius:var(--radius);
  color:var(--text-soft); font-size:var(--fs-sm);
}

/* --------------------------------------------------------------------------
   16. CHAIRPERSON
   -------------------------------------------------------------------------- */
.cp-wrap{
  display:grid; grid-template-columns:0.62fr 1.38fr;
  gap:clamp(34px, 5vw, 72px); align-items:start;
}
.cp-portrait{
  aspect-ratio:4/5; border-radius:var(--radius);
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:sticky; top:120px;
}
.cp-portrait .ph{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:var(--sp-4);
  color:var(--text-mute); font-size:var(--fs-xs);
  text-align:center; padding:var(--sp-5);
}
.cp-portrait .ph svg{ width:44px; height:44px; stroke:var(--text-mute); fill:none; stroke-width:1; }
.cp-message p{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.1rem, 1rem + 0.5vw, 1.34rem);
  line-height:1.78; color:var(--ink-2); margin:0 0 var(--sp-5);
}
.cp-message p:first-of-type::first-letter{
  font-size:3.6rem; font-weight:400; float:left;
  line-height:.76; margin:10px 14px 0 0; color:var(--clay);
  font-family:var(--font-display);
}
.cp-sign{
  margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:var(--sp-4);
}
.cp-sign-mark{
  font-family:var(--font-display); font-style:italic;
  font-size:1.6rem; color:var(--text-mute);
}
.cp-sign b{ display:block; font-size:0.96rem; font-weight:500; color:var(--ink); }
.cp-sign span{ font-size:var(--fs-xs); color:var(--text-soft); }
@media (max-width:920px){
  .cp-wrap{ grid-template-columns:1fr; }
  .cp-portrait{ max-width:240px; position:static; }
}

/* --------------------------------------------------------------------------
   17. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:clamp(32px, 4vw, 64px); align-items:start;
}
.contact-info-card{
  background:linear-gradient(150deg, #4A2E6B 0%, #33204C 100%);
  color:rgba(252,250,246,0.85);
  border-radius:var(--radius); padding:var(--sp-6);
}
.contact-info-card h3{ color:var(--paper); margin-bottom:var(--sp-5); }
.contact-row{
  display:flex; gap:var(--sp-4);
  padding:var(--sp-4) 0;
  border-top:1px solid var(--rule-invert);
  font-size:var(--fs-sm);
}
.contact-row:first-of-type{ border-top:none; padding-top:0; }
.contact-row .ci{
  width:18px; height:18px; flex:none;
  stroke:var(--brand-blue); fill:none; stroke-width:1.5; margin-top:4px;
}
.contact-row b{
  display:block; font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:0.16em;
  font-family:var(--font-mono);
  color:rgba(252,250,246,0.55); margin-bottom:5px; font-weight:400;
}
.contact-row a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--rule-invert); }
.contact-row a:hover{ border-color:var(--paper); }
@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   18. FOOTPRINT MAP
   -------------------------------------------------------------------------- */
.footprint-wrap{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px, 4vw, 64px); align-items:center;
}
.india-map-panel{
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--sp-6);
  display:flex; align-items:center; justify-content:center;
}
.india-map-panel svg{ width:100%; max-width:330px; height:auto; margin-inline:auto; }
.india-shape{ fill:rgba(16,31,41,0.035); stroke:var(--ink); stroke-width:1; stroke-opacity:.25; }
.india-pin circle.dot{ fill:var(--brand-red); }
.india-pin circle.pulse{
  fill:none; stroke:var(--clay); stroke-width:1; opacity:.6;
  transform-origin:center; transform-box:fill-box;
  animation:pinPulse 3s ease-out infinite;
}
@keyframes pinPulse{
  0%{ transform:scale(.6); opacity:.7; }
  100%{ transform:scale(2.6); opacity:0; }
}
.india-pin text{
  font-family:var(--font-mono); font-size:6px;
  fill:var(--text-soft); font-weight:400;
}
.map-caption{
  text-align:center; font-size:var(--fs-xs);
  color:var(--text-soft); margin:var(--sp-5) 0 0;
}
.footprint-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-6); margin-top:var(--sp-6); }
.footprint-list div{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-sm); color:var(--text);
  padding:12px 0; border-bottom:1px solid var(--rule);
}
.fp-dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-red); flex:none; }
@media (max-width:920px){ .footprint-wrap{ grid-template-columns:1fr; } }
@media (max-width:520px){ .footprint-list{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
footer.site::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:var(--brand-bar);
}
footer.site{
  position:relative;
  background:linear-gradient(160deg, #1A2333 0%, #241A3D 60%, #2C1A42 100%);
  color:rgba(252,250,246,0.72);
  padding-block:var(--sp-9) var(--sp-6);
}
.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--sp-7);
  padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--rule-invert);
}
.foot-mark{
  height:52px; width:auto; background:var(--paper);
  padding:8px 14px; border-radius:var(--radius-sm);
  margin-bottom:var(--sp-5);
}
.foot-about{
  font-size:var(--fs-sm); line-height:1.7;
  max-width:32ch; color:rgba(252,250,246,0.66);
}
.foot-reg{
  font-size:var(--fs-xs); color:rgba(252,250,246,0.5);
  margin:var(--sp-4) 0 0; line-height:1.9;
}
.foot-reg b{ color:rgba(252,250,246,0.78); font-weight:500; }
.foot-col h4{
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(252,250,246,0.5); margin:0 0 var(--sp-5); font-weight:400;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.foot-col li{ font-size:var(--fs-sm); line-height:1.6; color:rgba(252,250,246,0.66); }
.foot-col a{
  text-decoration:none; font-size:var(--fs-sm);
  color:rgba(252,250,246,0.78);
  transition:color var(--dur) var(--ease);
}
.foot-col a:hover{ color:var(--paper); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--sp-4);
  padding-top:var(--sp-5);
  font-size:var(--fs-xs); color:rgba(252,250,246,0.5);
}
.foot-social{ display:flex; gap:var(--sp-4); }
.foot-social a{
  display:flex; width:34px; height:34px;
  align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--rule-invert);
  transition:border-color var(--dur) var(--ease);
}
.foot-social a svg{ width:16px; height:16px; stroke:rgba(252,250,246,0.66); fill:none; }
.foot-social a:hover{ border-color:rgba(252,250,246,0.5); }
.foot-social a:hover svg{ stroke:var(--paper); }
@media (max-width:920px){ .foot-grid{ grid-template-columns:1fr 1fr; row-gap:var(--sp-7); } }
@media (max-width:520px){
  .foot-grid{ grid-template-columns:1fr; }
  .ctaband-head{ align-items:flex-start; }
}

/* --------------------------------------------------------------------------
   20. PENDING-CONTENT FLAG
   Marks sections awaiting real client data. Delete the element to remove.
   -------------------------------------------------------------------------- */
/* Block, not flex: these notes contain inline <code>, and in a flex container
   each text run becomes its own item, laying the sentence out in columns. */
.pending{
  display:block; position:relative;
  border:1px dashed var(--rule-strong);
  border-radius:var(--radius-sm);
  padding:11px 16px 11px 36px;
  font-family:var(--font-mono); font-size:0.7rem; line-height:1.7;
  color:var(--text-soft); letter-spacing:0.02em;
  max-width:74ch; background:transparent;
}
.pending::before{
  content:"◇"; position:absolute; left:15px; top:12px;
  font-size:0.62rem; line-height:1.7;
}
.pending code{ font-family:inherit; color:var(--ink); }
.pending-block{ margin-top:var(--sp-5); }
.surface-ink .pending code{ color:var(--paper); }
.pending-inline{
  font-family:var(--font-mono); font-size:0.72rem;
  color:var(--text-mute); border-bottom:1px dashed var(--rule-strong);
  white-space:nowrap;
}
.surface-ink .pending{
  border-color:var(--rule-invert); color:rgba(252,250,246,0.62);
}
.surface-ink .pending-inline{ color:rgba(252,250,246,0.6); }

/* --------------------------------------------------------------------------
   21. SCROLL REVEAL + UTILITIES
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal-fade{ opacity:0; transition:opacity .7s ease; }
.reveal-fade.in{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-fade{ opacity:1 !important; transform:none !important; }
}

.center{ text-align:center; }
.mt-0{ margin-top:0; }
.mt-4{ margin-top:var(--sp-4); }
.mt-5{ margin-top:var(--sp-5); }
.mt-6{ margin-top:var(--sp-6); }
.mb-6{ margin-bottom:var(--sp-6); }
.mb-8{ margin-bottom:var(--sp-8); }
.muted{ color:var(--text-soft); }
.stack-center{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--sp-4);
}
.stack-center p{ max-width:50ch; }
.surface-ink .muted{ color:rgba(252,250,246,0.72); }


/* --------------------------------------------------------------------------
   22. MOBILE ERGONOMICS
   Small mono labels and inline links are legible/tappable at desktop size but
   fall under 11px text and 32px touch targets on a phone. Scale them up here
   rather than compromising the desktop typography.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  :root{
    --fs-mono:  0.74rem;
    --fs-label: 0.72rem;
    --fs-xs:    0.85rem;
  }

  /* Touch targets — 40px minimum on anything tappable */
  .topbar-donate{ padding:9px 2px; }
  .textlink{ display:inline-block; padding-block:9px; }
  .breadcrumb{ line-height:2.4; }
  .breadcrumb a{ display:inline-block; padding-block:7px; }
  .foot-col ul{ gap:2px; }
  .foot-col a{ display:inline-block; padding-block:10px; }
  .foot-col li{ padding-block:2px; }
  .contact-row a{ display:inline-block; padding-block:6px; }
  .foot-social a{ width:42px; height:42px; }
  .modal-close{ width:42px; height:42px; top:12px; right:12px; }
  .chip-check{ padding-block:12px; }
  .field > input, .field > select, .field > textarea{ padding:14px 15px; font-size:16px; }
  .btn{ padding:16px 30px; }

  /* Readability */
  .pending{ font-size:0.76rem; }
  .pending-inline{ font-size:0.76rem; }
  .avatar{ font-size:0.76rem; width:42px; height:42px; }
  .map-caption{ font-size:var(--fs-xs); }
}

/* Never let a 16px form field trigger iOS zoom-on-focus */
@media (max-width:820px) and (hover:none){
  .field > input, .field > select, .field > textarea{ font-size:16px; }
}