/* ============================================
   BDI — Design tokens
   Navy + orange taken from the logo mark; warm
   cream ground. Plus Jakarta Sans for structure,
   Fraunces italic for the occasional accent word.
   ============================================ */
:root{
  --navy: #1F3B8C;
  --navy-700: #172E6E;
  --navy-900: #0E1B45;
  --orange: #F17A21;
  --orange-600: #E0660F;
  --orange-ink: #B9510A;      /* orange that passes contrast as small text on light */
  --peach: #FFF1E4;
  --cream: #FBF7F0;
  --sand: #F4ECDF;
  --white: #fff;
  --ink: #1A1F2E;
  --ink-soft: #545B6B;
  --line: rgba(14,27,69,0.12);

  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --max: 1200px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 36px;

  --shadow-sm: 0 1px 2px rgba(14,27,69,0.05), 0 6px 18px -8px rgba(14,27,69,0.12);
  --shadow: 0 24px 50px -24px rgba(14,27,69,0.35);
  --shadow-lg: 0 40px 80px -30px rgba(14,27,69,0.45);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; }
body{
  margin:0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{
  font-family: var(--sans);
  color: var(--navy-900);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.025em;
}
h1{ font-size: clamp(2.6rem, 5.4vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.04; }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
h1 em, h2 em{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--orange-600);
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
a{ color: var(--orange-ink); }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--navy-900); color:#fff; padding:10px 16px;
  z-index:300; border-radius: 8px;
}
.skip-link:focus{ left:16px; top:16px; }

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

.icon{
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============ Shared type bits ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 18px;
}
.eyebrow::before{
  content:""; width: 24px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.on-dark .eyebrow{ color: var(--orange); }
.on-dark h1, .on-dark h2, .on-dark h3{ color:#fff; }
.on-dark h1 em, .on-dark h2 em{ color: var(--orange); }

.lead{ font-size: 1.25rem; line-height: 1.55; font-weight: 500; color: var(--ink); }
.muted{ color: var(--ink-soft); }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  padding: 16px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn .icon{ width:18px; height:18px; transition: transform .2s var(--ease); }
.btn:hover .icon-arrow{ transform: translateX(4px); }
.btn-primary{
  background: var(--orange);
  color: var(--navy-900);
  box-shadow: 0 12px 26px -12px rgba(241,122,33,0.8);
}
.btn-primary:hover{ background:#FF8A36; transform: translateY(-2px); }
.btn-navy{ background: var(--navy-900); color:#fff; }
.btn-navy:hover{ background: var(--navy); transform: translateY(-2px); }
.btn-ghost{ border-color: rgba(14,27,69,0.22); color: var(--navy-900); }
.btn-ghost:hover{ background: var(--navy-900); border-color: var(--navy-900); color:#fff; }
.btn-light{ border-color: rgba(255,255,255,0.35); color:#fff; }
.btn-light:hover{ background:#fff; border-color:#fff; color: var(--navy-900); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.7; cursor: progress; transform:none; }

/* ============ Announcement bar ============ */
.topbar{ background: var(--navy-900); color:#fff; font-size: 0.88rem; }
.topbar-inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap: 6px 12px; padding-block: 9px; text-align:center;
}
.topbar-pill{
  background: var(--orange); color: var(--navy-900);
  font-weight: 800; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.topbar a{
  color:#fff; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}
.topbar a .icon{ width:15px; height:15px; }
.topbar a:hover{ color: var(--orange); border-color: var(--orange); }

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
.site-header.scrolled{
  border-color: var(--line);
  box-shadow: 0 10px 30px -20px rgba(14,27,69,0.4);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  min-height: 78px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark{ width:50px; height:41px; object-fit:cover; object-position: top center; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text strong{
  font-size: 1.22rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--navy); text-transform: uppercase;
}
.brand-text small{
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy); margin-top: 5px;
}

.primary-nav{ display:flex; align-items:center; gap: 2px; }
.primary-nav a{
  position:relative;
  color: var(--ink);
  text-decoration:none;
  font-size: 0.93rem;
  font-weight: 600;
  padding: 10px 13px;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.primary-nav a:hover{ color: var(--navy); background: var(--sand); }
.primary-nav a.active{ color: var(--navy); }
.primary-nav a.active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px;
  height:2px; border-radius:2px; background: var(--orange);
}
.nav-new{
  display:inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--orange); color: var(--navy-900);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.primary-nav a.nav-cta{
  background: var(--navy-900); color:#fff;
  padding: 12px 22px; margin-left: 10px;
}
.primary-nav a.nav-cta:hover{ background: var(--navy); }
.primary-nav a.nav-cta::after{ display:none; }

.nav-toggle{
  display:none;
  width: 46px; height: 46px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background: var(--sand); border:none; border-radius: 12px; cursor:pointer;
}
.nav-toggle span:not(.sr-only){
  width:22px; height:2px; background:var(--navy-900); display:block; border-radius:2px;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ============ Sections shared ============ */
.section{ padding-block: clamp(76px, 10vw, 128px); }
.bg-white{ background: #fff; }
.bg-sand{ background: var(--sand); }
.bg-navy{ background: var(--navy-900); color:#fff; }
.section-head{ max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-sub{ font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }
.center .section-sub{ margin-inline:auto; }
.on-dark .section-sub{ color: rgba(255,255,255,0.78); }

.icon-badge{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background: rgba(241,122,33,0.13); color: var(--orange-ink);
  margin-bottom: 22px;
}
.icon-badge .icon{ width:28px; height:28px; }
.icon-badge.navy{ background: rgba(31,59,140,0.1); color: var(--navy); }

.check-list li{
  display:flex; gap:10px; align-items:flex-start;
  padding: 6px 0; font-size: 0.95rem; line-height: 1.45;
}
.check-list .icon{ width:18px; height:18px; margin-top: 2px; color: var(--orange-ink); stroke-width: 2.6; }

.chip{
  display:inline-flex; align-items:center;
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 600;
  background: rgba(241,122,33,0.16); color: #FFBC8A;
}

/* ============ Hero ============ */
.hero{
  position:relative;
  overflow:hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(72px, 9vw, 124px);
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(241,122,33,0.14), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(48px, 7vw, 96px);
  align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background:#fff; border: 1px solid var(--line);
  font-size: 0.86rem; font-weight: 600; color: var(--navy-900);
  margin-bottom: 26px; box-shadow: var(--shadow-sm);
}
.hero-eyebrow .icon{ width:16px; height:16px; color: var(--orange-ink); }
.hero h1{ margin-bottom: 24px; }
.hero-lede{
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-proof{
  display:flex; flex-wrap:wrap; gap: 20px clamp(28px, 4vw, 52px);
  margin-top: 48px; padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-proof li{ display:flex; flex-direction:column; max-width: 230px; }
.hero-proof strong{
  font-size: 2.4rem; font-weight: 800; color: var(--navy);
  line-height: 1; letter-spacing: -0.04em;
}
.hero-proof strong span{ color: var(--orange-600); }
.hero-proof small{ font-size: 0.9rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }

.hero-media{ position:relative; justify-self:end; width: min(100%, 490px); }
.hero-media::before{
  content:""; position:absolute; z-index:0;
  top:-30px; right:-30px; width: 64%; height: 72%;
  background: var(--orange);
  border-radius: var(--r-xl);
  transform: rotate(6deg);
}
.hero-media::after{
  content:""; position:absolute; z-index:0;
  left:-40px; bottom:-40px; width:190px; height:190px;
  background-image: radial-gradient(var(--navy) 2px, transparent 2.6px);
  background-size: 18px 18px;
  opacity: .28;
}
.hero-photo{
  position:relative; z-index:1; margin:0;
  border-radius: var(--r-xl); overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.hero-photo img{ width:100%; aspect-ratio: 4 / 5; object-fit:cover; object-position: 50% 45%; }
.hero-card{
  position:absolute; z-index:2; left:-44px; bottom:44px;
  display:flex; gap:14px; align-items:center;
  background:#fff; padding: 16px 22px 16px 16px;
  border-radius: var(--r); box-shadow: var(--shadow);
  max-width: 290px;
}
.hero-card-icon{
  width:48px; height:48px; border-radius:14px;
  background: var(--navy-900); color: var(--orange);
  display:grid; place-items:center; flex-shrink:0;
}
.hero-card-icon .icon{ width:24px; height:24px; }
.hero-card strong{ display:block; color: var(--navy-900); font-size: 0.98rem; line-height:1.3; }
.hero-card div span{ display:block; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.4; }

/* ============ Focus strip ============ */
.focus-strip{ padding-block: clamp(44px, 5vw, 60px); }
.focus-strip-inner{ display:grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.focus-strip h2{
  font-size: 1.5rem; line-height:1.2; color:#fff; margin:0;
}
.focus-strip h2 small{
  display:block; font-size: 0.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--orange); margin-bottom: 10px;
}
.focus-items{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.focus-item{
  display:flex; flex-direction:column; gap: 14px;
  padding: 20px 16px 18px;
  border-radius: var(--r);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 0.9rem; font-weight: 600; line-height: 1.3; color:#fff;
  transition: background .25s, transform .25s var(--ease), border-color .25s;
}
.focus-item:hover{ background: rgba(255,255,255,0.09); border-color: rgba(241,122,33,0.5); transform: translateY(-4px); }
.focus-item .icon{ width:30px; height:30px; color: var(--orange); stroke-width: 1.8; }
.focus-item small{ display:block; font-weight:500; color: rgba(255,255,255,0.62); font-size: 0.78rem; margin-top: 3px; }

/* ============ About ============ */
.about-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items:center;
}
.about-copy p{ color: var(--ink-soft); max-width: 60ch; }
.about-copy .lead{ color: var(--ink); }
.belief-card{
  position:relative; overflow:hidden;
  margin: 0;
  background: var(--navy);
  color:#fff;
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 60px) clamp(32px, 4vw, 52px) clamp(32px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
}
.belief-card::before{
  content:"\201C";
  position:absolute; top: -18px; left: 26px;
  font-family: var(--serif); font-size: 9rem; line-height:1;
  color: var(--orange);
}
.belief-card::after{
  content:""; position:absolute; right:-90px; bottom:-90px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241,122,33,0.45), transparent 70%);
}
.belief-card p{
  position:relative; z-index:1;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.5;
  margin: 28px 0 0;
}
.belief-card footer{
  position:relative; z-index:1;
  margin-top: 26px; font-size: 0.85rem; font-weight:700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
}

.vm-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: clamp(56px, 7vw, 88px);
}
.vm-card{
  background:#fff; border-radius: var(--r-lg);
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.vm-card h3{ font-size: 1.4rem; }
.vm-card p{ color: var(--ink-soft); margin:0; font-size: 1.02rem; }

.values{ margin-top: clamp(64px, 8vw, 96px); }
.values-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap: 12px 40px; margin-bottom: 30px;
}
.values-head h2{ margin:0; }
.values-head p{ margin:0; max-width: 44ch; color: var(--ink-soft); }
.values-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.value{
  padding: 26px 24px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.value:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: rgba(241,122,33,0.45); }
.value-num{ font-size: 0.78rem; font-weight: 800; color: var(--orange-ink); letter-spacing: .1em; }
.value h3{ font-size: 1.1rem; margin: 10px 0 6px; }
.value p{ font-size: 0.93rem; color: var(--ink-soft); margin:0; line-height: 1.55; }

/* ============ Our work / pillars ============ */
.pillars{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.pillar{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:#fff;
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.pillar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background: var(--orange);
  transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.pillar:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.pillar:hover::before{ transform: scaleX(1); }
.pillar-num{
  position:absolute; top: 26px; right: 30px;
  font-size: 3.6rem; font-weight: 800; line-height:1;
  color: rgba(14,27,69,0.06);
}
.pillar h3{ font-size: 1.38rem; margin-bottom: 12px; }
.pillar > p{ color: var(--ink-soft); font-size: 0.98rem; }
.pillar .check-list{ margin: 6px 0 26px; }
.pillar-goal{
  margin-top:auto;
  padding: 16px 18px;
  background: var(--peach);
  border-radius: var(--r-sm);
  font-size: 0.9rem; line-height: 1.5; color: var(--navy-900);
}
.pillar-goal strong{ color: var(--orange-ink); }

/* ============ Impact / experience ============ */
.experience{
  display:grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items:start;
}
.exp-panel{
  position:relative; overflow:hidden;
  background: var(--navy);
  color:#fff;
  border-radius: var(--r-xl);
  padding: clamp(32px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
}
.exp-panel::after{
  content:""; position:absolute; top:-80px; right:-80px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241,122,33,0.55), transparent 70%);
}
.exp-kicker{
  position:relative; z-index:1;
  font-size: 0.78rem; font-weight: 700; letter-spacing:.14em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 14px;
}
.exp-stat-num{
  position:relative; z-index:1;
  font-size: clamp(4.6rem, 9vw, 7.2rem); font-weight: 800;
  line-height: .9; letter-spacing: -0.06em; color:#fff;
}
.exp-stat-num span{ color: var(--orange); letter-spacing: 0; margin-right: 4px; }
.exp-stat-label{ font-size: 1.1rem; color: rgba(255,255,255,0.82); margin: 14px 0 0; }
.exp-places{ display:grid; gap: 10px; margin-top: 32px; }
.exp-place{
  display:flex; gap:14px; align-items:center;
  padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
}
.exp-place .icon{ color: var(--orange); width: 22px; height: 22px; }
.exp-place strong{ display:block; line-height:1.3; }
.exp-place small{ color: rgba(255,255,255,0.68); font-size: 0.84rem; }
.exp-themes{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 26px; }

.exp-copy p{ color: var(--ink-soft); }
.exp-copy .lead{ color: var(--ink); }
.support-title{
  font-size: 0.78rem; font-weight: 700; letter-spacing:.14em; text-transform: uppercase;
  color: var(--navy); margin: 32px 0 14px;
}
.support-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.support-item{
  background:#fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 18px;
}
.support-item .icon{ color: var(--navy); width:26px; height:26px; margin-bottom: 12px; }
.support-item strong{ display:block; font-size: 0.98rem; color: var(--navy-900); line-height:1.3; }
.support-note{ font-size: 0.92rem; margin: 14px 0 0; }

.next-card{
  position:relative;
  margin-top: 28px;
  padding: 28px 28px 28px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #FFF3E7 0%, #FFE2C8 100%);
  border: 1px solid rgba(241,122,33,0.35);
}
.next-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.74rem; font-weight: 800; letter-spacing:.12em; text-transform: uppercase;
  color: var(--orange-ink); margin-bottom: 10px;
}
.next-tag .icon{ width:16px; height:16px; }
.next-card h3{ font-size: 1.35rem; margin-bottom: 10px; }
.next-card p{ color: #4A3B2E; margin-bottom: 18px; }

.report{
  display:grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 80px);
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.report h3{ font-size: 1.6rem; }
.report p{ color: var(--ink-soft); }
.report-list{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 32px; align-content:start; }
.report-list li{ border-bottom: 1px solid var(--line); padding: 12px 0; }

/* ============ Priority: Kala-azar ============ */
.priority{ position:relative; overflow:hidden; }
.priority::before{
  content:""; position:absolute; right:-240px; top:-240px;
  width: 680px; height: 680px; border-radius:50%;
  background: radial-gradient(circle, rgba(241,122,33,0.22), transparent 65%);
}
.priority .wrap{ position:relative; }
.urgent{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(241,122,33,0.14); border: 1px solid rgba(241,122,33,0.4);
  color: var(--orange); font-size: 0.8rem; font-weight: 800; letter-spacing:.12em; text-transform: uppercase;
  margin-bottom: 22px;
}
.urgent-dot{ position:relative; width:8px; height:8px; border-radius:50%; background: var(--orange); }
.urgent-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: var(--orange); animation: ping 1.8s var(--ease) infinite;
}
@keyframes ping{ 0%{ transform:scale(1); opacity:.8; } 80%,100%{ transform:scale(3); opacity:0; } }

.priority-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items:start;
}
.priority-body p{ color: rgba(255,255,255,0.78); max-width: 62ch; }
.priority-body .lead{ color:#fff; }
.focus-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 36px);
}
.focus-card h3{ font-size: 1.1rem; margin-bottom: 18px; }
.focus-steps{ counter-reset: f; display:grid; gap: 10px; }
.focus-steps li{
  counter-increment: f;
  display:flex; align-items:center; gap:14px;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.05);
  font-weight: 600; font-size: 0.98rem;
}
.focus-steps li::before{
  content: counter(f, decimal-leading-zero);
  width: 34px; height: 34px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius: 10px; background: var(--orange); color: var(--navy-900);
  font-size: 0.78rem; font-weight: 800;
}
.priority-quote{
  margin: clamp(52px, 7vw, 80px) 0 34px;
  padding-left: 28px;
  border-left: 4px solid var(--orange);
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.3;
  max-width: 30ch; color:#fff;
}
.priority-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============ Approach ============ */
.process{
  position:relative;
  display:grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px;
  margin-bottom: clamp(56px, 7vw, 84px);
  counter-reset: p;
}
.process::before{
  content:""; position:absolute; top: 29px; left: 6%; right: 6%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 14px);
}
.process li{ position:relative; text-align:center; counter-increment: p; }
.process li::before{
  content: counter(p);
  width: 60px; height: 60px; margin: 0 auto 12px;
  display:grid; place-items:center;
  border-radius: 50%;
  background: #fff; border: 2px solid var(--orange);
  font-weight: 800; font-size: 1.1rem; color: var(--navy-900);
  position:relative;
  transition: background .25s, transform .25s var(--ease);
}
.process li:hover::before{ background: var(--orange); transform: scale(1.08); }
.process li span{ font-weight: 700; color: var(--navy-900); font-size: 0.95rem; }

.principles{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 20px; }
.principle{
  grid-column: span 2;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), background .25s;
}
.principle:nth-child(4), .principle:nth-child(5){ grid-column: span 3; }
.principle:hover{ transform: translateY(-4px); background:#fff; }
.principle .icon-badge{ width:50px; height:50px; border-radius: 14px; margin-bottom: 18px; }
.principle .icon-badge .icon{ width:24px; height:24px; }
.principle h3{ font-size: 1.15rem; }
.principle p{ color: var(--ink-soft); font-size: 0.96rem; margin: 0; }

/* ============ Volunteer band ============ */
.volunteer{ padding-block: clamp(56px, 7vw, 96px); }
.volunteer-card{
  position:relative; overflow:hidden;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(36px, 5vw, 64px);
  align-items:center;
  background: linear-gradient(135deg, var(--orange) 0%, #F7A04F 100%);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5.5vw, 72px);
  color: var(--navy-900);
}
.volunteer-card::before{
  content:""; position:absolute; right: -6%; top: -20%;
  width: 58%; height: 140%;
  background: #fff; opacity: .14;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.volunteer-copy{ position:relative; z-index:1; }
.volunteer-copy h2{ color: var(--navy-900); font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.volunteer-copy h2 em{ color: #fff; font-weight:600; }
.volunteer-copy p{ font-size: 1.1rem; max-width: 52ch; }
.pill{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--navy-900); color:#fff;
  font-size: 0.86rem; font-weight: 700; margin-bottom: 22px;
}
.pill .icon{ width:16px; height:16px; color: var(--orange); }
.volunteer-actions{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px; }
.volunteer-actions .btn-ghost{ border-color: rgba(14,27,69,0.45); }
.volunteer-poster{
  position:relative; z-index:1;
  justify-self:center;
  width: min(100%, 300px);
  display:block;
  border-radius: 16px;
  border: 7px solid #fff;
  box-shadow: 0 34px 60px -24px rgba(14,27,69,0.6);
  transform: rotate(4deg);
  transition: transform .4s var(--ease);
  overflow:hidden;
}
.volunteer-poster:hover{ transform: rotate(0) scale(1.03); }

/* ============ Governance ============ */
.gov-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(40px, 6vw, 88px); align-items:center;
}
.gov-copy p{ color: var(--ink-soft); }
.gov-copy .check-list{ margin-top: 22px; }
.gov-copy .check-list li{ font-size: 1rem; color: var(--ink); }
.org-chart{ display:flex; flex-direction:column; }
.org-box{
  display:flex; gap: 18px; align-items:center;
  background:#fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.org-box:first-child{ background: var(--navy-900); border-color: var(--navy-900); }
.org-box:first-child strong{ color:#fff; }
.org-box:first-child div span{ color: rgba(255,255,255,0.7); }
.org-level{
  width: 46px; height: 46px; flex-shrink:0; border-radius: 14px;
  display:grid; place-items:center;
  background: var(--orange); color: var(--navy-900);
}
.org-level .icon{ width:22px; height:22px; }
.org-box strong{ display:block; font-size: 1.1rem; color: var(--navy-900); line-height: 1.3; }
.org-box div span{ display:block; font-size: 0.92rem; color: var(--ink-soft); line-height:1.45; }
.org-connector{
  width: 2px; height: 30px; margin-left: 46px;
  background: repeating-linear-gradient(180deg, var(--orange) 0 6px, transparent 6px 10px);
}

/* ============ Partner ============ */
.partner-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px;
  margin-bottom: 40px;
}
.partner-tile{
  display:flex; align-items:center; gap: 14px;
  padding: 20px; border-radius: var(--r);
  background: var(--cream); border: 1px solid var(--line);
  font-weight: 600; color: var(--navy-900); font-size: 0.96rem; line-height: 1.35;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.partner-tile:hover{ transform: translateY(-3px); border-color: var(--orange); background:#fff; }
.partner-tile .icon{ width:24px; height:24px; color: var(--orange-ink); }
.partner-cta{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap: 24px;
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  background: var(--navy);
  color:#fff;
}
.partner-cta p{ margin:0; max-width: 62ch; color: rgba(255,255,255,0.88); font-size: 1.05rem; }

/* ============ Contact ============ */
.contact-grid{
  display:grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px; align-items:stretch;
}
.contact-info{
  position:relative; overflow:hidden;
  background: var(--navy-900); color:#fff;
  border-radius: var(--r-xl);
  padding: clamp(32px, 4vw, 52px);
}
.contact-info::after{
  content:""; position:absolute; right:-100px; bottom:-100px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241,122,33,0.4), transparent 70%);
}
.contact-info > p{ color: rgba(255,255,255,0.78); }
.contact-list{ position:relative; z-index:1; display:grid; gap: 18px; margin-top: 34px; }
.contact-list li{ display:flex; gap: 14px; align-items:flex-start; }
.contact-icon{
  width:46px; height:46px; flex-shrink:0; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.08); color: var(--orange);
}
.contact-icon .icon{ width:20px; height:20px; }
.contact-list small{
  display:block; color: rgba(255,255,255,0.58);
  font-size: 0.74rem; font-weight: 700; letter-spacing:.1em; text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-list a, .contact-list .val{
  color:#fff; text-decoration:none; font-weight: 600; overflow-wrap:anywhere; font-size: 0.98rem;
}
.contact-list a:hover{ color: var(--orange); }

.contact-form{
  background:#fff; border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.contact-form h3{ font-size: 1.5rem; margin-bottom: 6px; }
.contact-form > p{ color: var(--ink-soft); margin-bottom: 28px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-row{ margin-bottom: 8px; }
.form-row.full{ grid-column: 1 / -1; }
.contact-form label{
  display:block; font-size: 0.88rem; font-weight: 700;
  color: var(--navy-900); margin-bottom: 7px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  font: inherit; font-size: 1rem;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.contact-form select{
  appearance: none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230E1B45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
  padding-right: 44px;
}
.contact-form textarea{ resize: vertical; min-height: 140px; }
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{ border-color: var(--line); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--navy); background:#fff;
  box-shadow: 0 0 0 4px rgba(31,59,140,0.12);
}
.field-error{ display:block; color:#B3261E; font-size: 0.82rem; min-height: 1.3em; margin-top: 4px; }
.form-status{ margin: 14px 0 0; font-size: 0.94rem; font-weight: 600; min-height: 1.3em; }
.form-status.success{ color: #2E7D4F; }
.form-status.error{ color: #B3261E; }

/* ============ Footer ============ */
.site-footer{
  background: var(--navy-900);
  color: rgba(255,255,255,0.74);
  padding-top: clamp(60px, 7vw, 92px);
}
.footer-grid{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-logo{
  display:inline-block; background:#fff; border-radius: 16px; padding: 10px 14px;
}
.footer-logo img{ width: 64px; }
.footer-brand p{ margin: 20px 0 0; max-width: 34ch; font-size: 0.96rem; }
.footer-col h4{
  color:#fff; font-size: 0.78rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col a, .footer-col span{
  display:block; color: rgba(255,255,255,0.74); text-decoration:none;
  padding: 5px 0; font-size: 0.95rem; overflow-wrap:anywhere;
}
.footer-col a:hover{ color: var(--orange); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap: 12px; padding-block: 24px;
  font-size: 0.88rem; color: rgba(255,255,255,0.55);
}
.footer-bottom p{ margin:0; }
.back-to-top{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color:#fff; font: inherit; font-size: 0.86rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; cursor:pointer;
  transition: background .2s, border-color .2s;
}
.back-to-top .icon{ width:16px; height:16px; transform: rotate(-90deg); }
.back-to-top:hover{ background: var(--orange); border-color: var(--orange); color: var(--navy-900); }

/* ============================================
   Careers page
   ============================================ */
.page-hero{
  position:relative; overflow:hidden;
  padding-block: clamp(56px, 8vw, 110px);
}
.page-hero::before{
  content:""; position:absolute; left:-260px; bottom:-320px;
  width: 720px; height: 720px; border-radius:50%;
  background: radial-gradient(circle, rgba(241,122,33,0.22), transparent 65%);
}
.page-hero::after{
  content:""; position:absolute; right: 0; top: 0;
  width: 42%; height: 100%;
  background-image: radial-gradient(rgba(255,255,255,0.1) 1.5px, transparent 2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero-grid{
  display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(48px, 7vw, 96px); align-items:center;
}
.breadcrumb{
  display:flex; gap: 8px; align-items:center;
  font-size: 0.88rem; color: rgba(255,255,255,0.6); margin-bottom: 26px;
}
.breadcrumb a{ color: rgba(255,255,255,0.85); text-decoration:none; }
.breadcrumb a:hover{ color: var(--orange); }
.hero-badges{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 26px; }
.badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.88rem; font-weight: 600; color:#fff;
}
.badge .icon{ width:17px; height:17px; color: var(--orange); }
.page-hero h1{ font-size: clamp(3rem, 7vw, 5.6rem); }
.page-hero .hero-lede{ color: rgba(255,255,255,0.8); max-width: 54ch; }

.poster-frame{
  position:relative; justify-self:center;
  width: min(100%, 390px);
  padding:0; border:0; background:none; cursor: zoom-in;
  font: inherit; color: inherit;
}
.poster-frame::before{
  content:""; position:absolute; inset: 6% -5% -4% 8%;
  background: var(--orange); border-radius: 22px;
  transform: rotate(-4deg);
}
.poster-frame img{
  position:relative;
  width:100%; border-radius: 18px;
  box-shadow: 0 44px 80px -30px rgba(0,0,0,0.75);
  transform: rotate(2.5deg);
  transition: transform .45s var(--ease);
}
.poster-frame:hover img{ transform: rotate(0) scale(1.02); }
.poster-frame{ margin-bottom: 52px; }
.poster-hint{
  position:absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%);
  display:inline-flex; align-items:center; gap: 8px; white-space:nowrap;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color:#fff;
  font-size: 0.86rem; font-weight: 700;
  transition: background .2s, border-color .2s;
}
.poster-frame:hover .poster-hint{ background: var(--orange); border-color: var(--orange); color: var(--navy-900); }
.poster-frame:hover .poster-hint .icon{ color: var(--navy-900); }
.poster-hint .icon{ width:16px; height:16px; color: var(--orange); }

.role-grid{
  display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 80px); align-items:start;
}
.role-copy p{ color: var(--ink-soft); max-width: 60ch; }
.role-copy .lead{ color: var(--ink); }
.role-copy h3{ margin-top: 36px; }
.role-copy .check-list li{ font-size: 1.02rem; color: var(--ink); padding: 8px 0; }
.role-note{
  display:flex; gap: 12px; align-items:flex-start;
  margin-top: 28px; padding: 18px 20px;
  border-radius: var(--r); background: var(--peach);
  color: #4A3B2E; font-size: 0.98rem;
}
.role-note .icon{ color: var(--orange-ink); width:22px; height:22px; margin-top: 2px; }
.glance{
  position: sticky; top: 110px;
  background:#fff; border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 36px);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.glance h3{ font-size: 1.2rem; margin-bottom: 8px; }
.glance dl{ margin: 0 0 24px; }
.glance-row{
  display:flex; gap: 14px; align-items:flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.glance-row .contact-icon{ background: var(--cream); color: var(--orange-ink); width:42px; height:42px; border-radius: 12px; }
.glance dt{ font-size: 0.74rem; font-weight: 700; letter-spacing:.1em; text-transform: uppercase; color: var(--ink-soft); }
.glance dd{ margin: 2px 0 0; font-weight: 600; color: var(--navy-900); line-height: 1.45; overflow-wrap:anywhere; }
.glance dd a{ color: var(--navy); }

.areas-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.area-card{
  background:#fff; border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.area-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(241,122,33,0.45); }
.area-card h3{ font-size: 1.15rem; }
.area-card p{ color: var(--ink-soft); font-size: 0.96rem; margin:0; }

.why-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.why-card{
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 36px);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}
.why-card .icon-badge{ background: var(--orange); color: var(--navy-900); }
.why-card p{ color: rgba(255,255,255,0.78); margin: 0; }

.steps{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; counter-reset: s; }
.step{
  position:relative; counter-increment: s;
  background: #fff; border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 36px);
  border: 1px solid var(--line);
}
.step::before{
  content: counter(s);
  display:grid; place-items:center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy-900); color: #fff;
  font-weight: 800; font-size: 1.1rem; margin-bottom: 20px;
}
.step h3{ font-size: 1.15rem; }
.step p{ color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 16px; }
.step p:last-child{ margin-bottom: 0; }
.step .email-link{
  display:inline-flex; align-items:center; gap: 8px;
  font-weight: 700; color: var(--navy); text-decoration:none; overflow-wrap:anywhere;
}
.step .email-link:hover{ color: var(--orange-ink); }
.share-row{ display:flex; flex-wrap:wrap; gap: 8px; }
.share-btn{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--cream);
  font: inherit; font-weight: 600; font-size: 0.88rem;
  color: var(--navy-900); text-decoration:none; cursor:pointer;
  transition: border-color .2s, background .2s;
}
.share-btn .icon{ width:17px; height:17px; }
.share-btn:hover{ border-color: var(--navy-900); background:#fff; }

.closing-wrap{ padding-top: 0; }
.closing{
  text-align:center;
  background: linear-gradient(135deg, var(--orange) 0%, #F7A04F 100%);
  border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
  position:relative; overflow:hidden;
}
.closing::before{
  content:""; position:absolute; left:50%; top:-10%;
  width: 70%; height: 130%; transform: translateX(-50%);
  background:#fff; opacity:.12;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.closing > *{ position:relative; }
.closing h2{ color: var(--navy-900); font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 10px; }
.closing h2 em{ color:#fff; font-weight: 600; }
.closing p{ font-size: 1.15rem; color: var(--navy-900); max-width: 52ch; margin: 0 auto 30px; }
.closing .hero-actions{ justify-content:center; }

/* Poster lightbox */
.poster-dialog{
  border:0; padding:0; background: transparent;
  max-width: min(94vw, 680px); max-height: 94vh;
  overflow: visible;
}
.poster-dialog::backdrop{ background: rgba(8,14,36,0.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.poster-dialog img{ max-height: 90vh; width:auto; margin: 0 auto; border-radius: 14px; }
.dialog-close{
  position:absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  display:grid; place-items:center;
  background:#fff; color: var(--navy-900); border:0; cursor:pointer;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.5);
}
.dialog-close .icon{ width:22px; height:22px; }

/* ============ Reveal on scroll (only when JS runs) ============ */
.js [data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].in-view{ opacity:1; transform:none; }

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

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1140px){
  .focus-strip-inner{ grid-template-columns: 1fr; gap: 24px; }
  .focus-items{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .values-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .partner-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .primary-nav a{ padding: 10px 10px; }
}

@media (max-width: 1060px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap: 2px;
    padding: 12px clamp(20px, 4vw, 40px) 22px;
    background:#fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(14,27,69,0.4);
    display:none;
  }
  .primary-nav.open{ display:flex; }
  .primary-nav a{ padding: 13px 14px; border-radius: 12px; font-size: 1rem; }
  .primary-nav a.active::after{ display:none; }
  .primary-nav a.active{ background: var(--sand); }
  .primary-nav a.nav-cta{ margin: 10px 0 0; text-align:center; }
}

@media (max-width: 960px){
  .hero-grid, .about-grid, .experience, .priority-grid, .gov-grid,
  .contact-grid, .volunteer-card, .page-hero-grid, .role-grid, .report{
    grid-template-columns: 1fr;
  }
  .hero-media{ justify-self:center; width: min(100%, 460px); margin-top: 12px; }
  .pillars{ grid-template-columns: 1fr; }
  .principles{ grid-template-columns: 1fr 1fr; }
  .principle, .principle:nth-child(4), .principle:nth-child(5){ grid-column: auto; }
  .principle:last-child{ grid-column: 1 / -1; }
  .areas-grid, .why-grid, .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process{ grid-template-columns: repeat(4, minmax(0,1fr)); row-gap: 28px; }
  .process::before{ display:none; }
  .glance{ position: static; }
  .volunteer-poster{ transform: rotate(2deg); width: min(100%, 280px); }
  .poster-frame{ width: min(100%, 340px); }
}

@media (max-width: 640px){
  body{ font-size: 1rem; }
  .topbar-inner{ font-size: 0.82rem; }
  .brand-mark{ width:44px; height:36px; }
  .brand-text strong{ font-size: 1.08rem; }
  .brand-text small{ font-size: 0.54rem; }
  .header-inner{ min-height: 68px; }
  .hero-actions .btn, .priority-actions .btn, .volunteer-actions .btn{ flex: 1 1 100%; }
  .hero-media::before{ top:-16px; right:-12px; }
  .hero-media::after{ left:-16px; bottom:-20px; }
  .hero-card{ left: 14px; right: 14px; bottom: 14px; max-width:none; }
  .hero-photo img{ aspect-ratio: 4 / 4.4; }
  .focus-items{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vm-grid, .values-grid, .support-grid, .report-list, .principles,
  .partner-grid, .form-grid, .areas-grid, .why-grid, .steps, .footer-grid{
    grid-template-columns: 1fr;
  }
  .process{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px 4px; }
  .process li::before{ width: 48px; height: 48px; font-size: 1rem; }
  .process li span{ font-size: 0.82rem; }
  .belief-card::before{ font-size: 7rem; }
  .partner-cta .btn{ width:100%; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .page-hero h1{ font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .poster-hint{ font-size: 0.8rem; }
}