/* ============================================================
   Nar Seva Foundation — Kindact-inspired design system
   ============================================================ */

/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("ee97f31b5af1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("094ba9c34293.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("11f6ab2d0f98.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("ee97f31b5af1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("094ba9c34293.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("11f6ab2d0f98.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("ee97f31b5af1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("094ba9c34293.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("11f6ab2d0f98.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("ee97f31b5af1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("094ba9c34293.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("11f6ab2d0f98.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("ee97f31b5af1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("094ba9c34293.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("11f6ab2d0f98.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4b17538334cf.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("560d9f41c0b6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("2cba32d0c155.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("38c3847fadc8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("4b17538334cf.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("560d9f41c0b6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("2cba32d0c155.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("38c3847fadc8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("4b17538334cf.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("560d9f41c0b6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("2cba32d0c155.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("38c3847fadc8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("4b17538334cf.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("560d9f41c0b6.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("2cba32d0c155.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("38c3847fadc8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* Palette */
  --cream:        #F4F0E6;
  --cream-2:      #EFEAdc;
  --paper:        #FBF9F3;
  --ink:          #101A2E;
  --ink-soft:     #2A3447;
  --muted:        #5C6678;
  --green:        #0A3D91;
  --green-bright: #2F6FD1;
  --green-deep:   #062451;
  --green-tint:   #D8E1F4;
  --green-tint-2: #E6ECF9;
  /* CTA accent (call-to-action buttons) */
  --cta:          #0A3D91;
  --cta-deep:     #072C6B;
  --sand:         #E6DFCB;
  --line:         rgba(16,26,46,0.12);

  /* Type */
  --display: 'Bricolage Grotesque', sans-serif;
  --body:    'Hanken Grotesk', sans-serif;

  /* Radii */
  --r-sm: 14px;
  --r:    22px;
  --r-lg: 34px;
  --r-xl: 48px;

  --maxw: 1300px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--green);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }

h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); font-weight: 600; line-height: 1.12; }
h2.section-title { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--muted); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 26px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn .arrow {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .4s var(--ease), background .3s;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--cta); color: #fff; }
.btn-primary .arrow { background: rgba(255,255,255,0.18); }
.btn-primary:hover { background: var(--cta-deep); }
.btn-primary:hover .arrow { transform: rotate(-45deg); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark .arrow { background: rgba(255,255,255,0.14); }
.btn-dark:hover .arrow { transform: rotate(-45deg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost .arrow { background: var(--ink); color: #fff; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost:hover .arrow { background: rgba(255,255,255,0.16); transform: rotate(-45deg); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light .arrow { background: var(--cta); color: #fff; }
.btn-light:hover .arrow { transform: rotate(-45deg); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  background: var(--green-deep); color: rgba(255,255,255,0.9);
  font-size: 0.84rem;
  transition: transform .45s var(--ease);
}
.topbar.hide { transform: translateY(-100%); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.topbar-msg { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 0 rgba(47,111,209,0.6); animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,111,209,0.55); } 70% { box-shadow: 0 0 0 8px rgba(47,111,209,0); } 100% { box-shadow: 0 0 0 0 rgba(47,111,209,0); } }
.topbar-meta { display: flex; align-items: center; gap: 16px; }
.topbar-meta a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.78); transition: color .25s; white-space: nowrap; }
.topbar-meta a:hover { color: #fff; }
.topbar-meta svg { width: 15px; height: 15px; }
.topbar-meta .sep { width: 1px; height: 16px; background: rgba(255,255,255,0.2); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 42px; left: 0; right: 0; z-index: 100;
  transition: padding .4s var(--ease), top .45s var(--ease);
  padding: 18px 0;
}
.nav.scrolled { padding: 12px 0; top: 0; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(251,249,243,0.72);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 9px 9px 22px;
  transition: box-shadow .4s, background .4s;
}
.nav.scrolled .nav-inner { box-shadow: 0 14px 40px -20px rgba(19,35,26,0.35); background: rgba(251,249,243,0.94); }
.nav-logo { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.nav-logo-text em { font-style: normal; font-weight: 500; color: var(--muted); }
.nav-logo .mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--green); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  position: relative;
  font-size: 0.94rem; font-weight: 500; color: var(--ink-soft);
  padding: 9px 14px; border-radius: 100px; transition: background .25s, color .25s;
}
.nav-links a:hover, .nav-links a.active { background: var(--green-tint); color: var(--green-deep); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.nav-burger span { width: 18px; height: 2px; background: var(--ink); transition: .3s; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 200; background: var(--cream); transform: translateY(-100%); transition: transform .5s var(--ease); display: flex; flex-direction: column; padding: 24px; overflow-y: auto; }
.drawer.open { transform: translateY(0); }
.drawer-top { display: flex; justify-content: space-between; align-items: center; }
.drawer-close { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 1.3rem; cursor: pointer; }
.drawer-links { display: flex; flex-direction: column; margin-top: 28px; }
.drawer-links a { display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-size: 1.85rem; font-weight: 600; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: padding-left .3s, color .3s; }
.drawer-links a svg { width: 22px; height: 22px; color: var(--green); opacity: 0; transform: translateX(-8px); transition: .3s; }
.drawer-links a:active, .drawer-links a:hover { padding-left: 14px; color: var(--green-deep); }
.drawer-links a:hover svg { opacity: 1; transform: none; }
.drawer-foot { margin-top: auto; padding-top: 28px; }
.drawer-contact { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.drawer-contact a { color: var(--muted); font-weight: 500; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 188px 0 40px; position: relative; overflow: hidden; }
.hero-blob {
  position: absolute; top: 60px; right: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, rgba(47,111,209,0.16), rgba(47,111,209,0) 65%);
  pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { margin: 22px 0 26px; }
.hero h1 .accent { color: var(--green); font-style: italic; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; align-items: center; }
/* hero trust row */
.hero-trust { display: flex; align-items: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.hero-avatars { display: flex; align-items: center; gap: 14px; }
.avatar-stack { display: flex; }
.avatar-stack span {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--cream);
  margin-left: -14px; background-size: cover; background-position: center;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.85rem;
}
.avatar-stack span:first-child { margin-left: 0; }
.hero-avatars .small { font-size: 0.82rem; color: var(--muted); max-width: 16ch; line-height: 1.3; }
.hero-avatars .small b { color: var(--ink); }
.hero-chip { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 10px 18px 10px 12px; box-shadow: 0 14px 30px -22px rgba(19,35,26,0.5); }
.hero-chip svg { width: 30px; height: 30px; flex-shrink: 0; }
.hero-chip b { display: block; font-size: 0.88rem; color: var(--ink); }
.hero-chip span { font-size: 0.78rem; color: var(--muted); }

/* hero visual */
.hero-visual { position: relative; }
.hero-img {
  border-radius: var(--r-xl);
  overflow: hidden; position: relative;
  aspect-ratio: 4 / 4.3;
  box-shadow: 0 40px 80px -50px rgba(19,35,26,0.6);
}
.hero-img .ph { position: absolute; inset: 0; }
.hero-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(251,249,243,0.92); backdrop-filter: blur(6px);
  border: none; border-radius: 100px; padding: 12px 20px 12px 14px;
  font-family: var(--body); font-weight: 600; font-size: 0.95rem; color: var(--ink);
  cursor: pointer; transition: transform .35s var(--ease), background .3s;
  box-shadow: 0 18px 40px -20px rgba(19,35,26,0.6);
}
.hero-play svg { width: 18px; height: 18px; color: #fff; background: var(--green); border-radius: 50%; padding: 8px; box-sizing: content-box; }
.hero-play:hover { transform: translate(-50%,-50%) scale(1.05); background: #fff; }
.hero-tag {
  position: absolute; left: 22px; top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(251,249,243,0.92); backdrop-filter: blur(6px);
  border-radius: 100px; padding: 8px 15px; font-size: 0.82rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 10px 26px -16px rgba(19,35,26,0.5);
}
.hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); animation: pulse 2s infinite; }
.hero-badge {
  position: absolute; left: -26px; bottom: 60px;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; line-height: 1.1;
  animation: spinBadge 18s linear infinite;
  box-shadow: 0 24px 50px -24px rgba(19,35,26,0.7);
}
.hero-badge .smile { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; }
@keyframes spinBadge { to { transform: rotate(360deg); } }
.hero-counter {
  position: absolute; right: -14px; top: 40px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 22px; text-align: center;
  box-shadow: 0 24px 50px -30px rgba(19,35,26,0.5);
  min-width: 140px;
}
.hero-counter .num { font-family: var(--display); font-weight: 700; font-size: 2.6rem; color: var(--green); line-height: 1; }
.hero-counter .lbl { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-band { padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 60px; overflow: hidden; }
.marquee-label { text-align: center; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 64px; padding-right: 64px; animation: scrollX 26s linear infinite; flex-shrink: 0; }
.marquee-track span { font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; opacity: 0.65; }
.marquee-track span::before { content: "✦"; color: var(--green); font-size: 1rem; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ============================================================
   SECTION GENERICS
   ============================================================ */
section { position: relative; }
.section { padding: 100px 0; }
.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head .lead { margin-top: 18px; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }

/* ---------- Key initiative cards ---------- */
.initiative { background: var(--green-deep); color: var(--paper); border-radius: var(--r-xl); padding: 60px clamp(28px,4vw,64px); }
.initiative .eyebrow { color: var(--green-bright); }
.initiative .eyebrow::before { background: var(--green-bright); }
.initiative h2 { color: var(--paper); font-size: clamp(1.9rem,3.4vw,3rem); max-width: 22ch; margin: 16px 0 0; }
.init-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 46px; }
.init-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r); padding: 32px; transition: transform .5s var(--ease), background .3s, border-color .3s; position: relative; }
.init-card:hover { transform: translateY(-10px); background: rgba(255,255,255,0.12); border-color: rgba(47,111,209,0.5); }
.init-card .init-ic { transition: transform .5s var(--ease); }
.init-card:hover .init-ic { transform: rotate(-8deg) scale(1.06); }
.init-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--green-bright); display: grid; place-items: center; margin-bottom: 22px; }
.init-ic svg { width: 30px; height: 30px; }
.init-card h3 { color: var(--paper); font-size: 1.5rem; margin-bottom: 10px; }
.init-card p { color: rgba(255,255,255,0.7); font-size: 0.98rem; }
.init-foot { margin-top: 40px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: rgba(255,255,255,0.85); font-size: 1.05rem; }
.init-foot b { color: #fff; }

/* ---------- Intro / who we are ---------- */
.intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.intro-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/6; position: relative; }
.intro-stats { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 150px; }
.stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem,4vw,3.4rem); color: var(--green); line-height: 1; }
.stat .lbl { color: var(--muted); margin-top: 8px; font-size: 0.95rem; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }

/* ---------- Mission / Vision ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }
.mv-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 44px; overflow: hidden; position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.mv-card::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--green); transition: width .5s var(--ease); }
.mv-card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -40px rgba(19,35,26,0.45); }
.mv-card:hover::after { width: 100%; }
.mv-card .mv-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--green-tint); display: grid; place-items: center; margin-bottom: 26px; }
.mv-card .mv-ic svg { width: 32px; height: 32px; color: var(--green-deep); }
.mv-card h3 { font-size: 1.7rem; margin-bottom: 14px; }
.mv-card p { color: var(--muted); font-size: 1.02rem; }
.mv-card .mv-img { margin-top: 30px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/8; position: relative; }

/* ---------- Testimonials (image design) ---------- */
.tmonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 54px; }
.tmonial { display: grid; grid-template-columns: 0.8fr 1.2fr; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tmonial:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -42px rgba(19,35,26,0.45); }
.tmonial-media { position: relative; overflow: hidden; min-height: 100%; }
.tmonial-media .ph { position: absolute; inset: 0; transition: transform .7s var(--ease); }
.tmonial:hover .tmonial-media .ph { transform: scale(1.06); }
.tmonial-body { padding: 34px 32px; position: relative; display: flex; flex-direction: column; }
.tmonial-quote-mark { font-family: var(--display); font-size: 4rem; line-height: 0.6; color: var(--green); opacity: 0.25; height: 30px; }
.tmonial blockquote { font-family: var(--display); font-weight: 500; font-size: 1.28rem; line-height: 1.32; color: var(--ink); letter-spacing: -0.01em; margin: 8px 0 0; }
.tmonial-stars { color: #E0A53B; letter-spacing: 3px; font-size: 1rem; margin: 18px 0 16px; }
.tmonial figcaption { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.tm-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; }
.tm-who { display: flex; flex-direction: column; line-height: 1.3; }
.tm-who b { font-family: var(--body); font-size: 1rem; color: var(--ink); }
.tm-who span { font-size: 0.85rem; color: var(--muted); }

/* ---------- Programs carousel ---------- */
.prog-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 50px 0 10px; scrollbar-width: none; }
.prog-track::-webkit-scrollbar { display: none; }
.prog-card { scroll-snap-align: start; flex: 0 0 380px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.prog-card:hover { transform: translateY(-10px); box-shadow: 0 34px 60px -38px rgba(19,35,26,0.5); }
.prog-card .pimg { aspect-ratio: 16/11; position: relative; overflow: hidden; }
.prog-card .pimg .ph { transition: transform .7s var(--ease); }
.prog-card:hover .pimg .ph { transform: scale(1.07); }
.prog-card .pbody { padding: 28px; }
.prog-card .ptag { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); font-weight: 600; }
.prog-card h3 { font-size: 1.5rem; margin: 12px 0 10px; }
.prog-card p { color: var(--muted); font-size: 0.97rem; margin-bottom: 22px; }
.prog-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--green-deep); border: 1px solid var(--line); padding: 9px 9px 9px 20px; border-radius: 100px; transition: background .35s var(--ease), color .3s, border-color .3s; }
.prog-link:hover { background: var(--green); color: #fff; border-color: var(--green); }
.prog-link .arrow { width: 24px; height: 24px; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s, color .3s; }
.prog-link .arrow svg { width: 12px; height: 12px; }
.prog-link:hover .arrow { transform: rotate(-45deg); background: rgba(255,255,255,0.22); color: #fff; }
.prog-card:hover .prog-link { border-color: var(--green); }
.carousel-ctrl { display: flex; gap: 10px; }
.carousel-ctrl button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; transition: background .3s, color .3s; }
.carousel-ctrl button:hover { background: var(--ink); color: #fff; }
.carousel-ctrl button svg { width: 18px; height: 18px; }

/* ---------- Approach (sticky) ---------- */
.approach { background: var(--ink); color: var(--paper); border-radius: var(--r-xl); padding: clamp(40px,5vw,80px); }
.approach .eyebrow { color: var(--green-bright); }
.approach .eyebrow::before { background: var(--green-bright); }
.approach h2 { color: var(--paper); }
.approach-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 54px; }
.ap-card { border-top: 2px solid rgba(255,255,255,0.16); padding-top: 26px; }
.ap-num { font-family: var(--display); font-weight: 700; color: var(--green-bright); font-size: 1rem; margin-bottom: 18px; }
.ap-ic { width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,0.08); display: grid; place-items: center; margin-bottom: 20px; }
.ap-ic svg { width: 28px; height: 28px; color: var(--green-bright); }
.ap-card h3 { color: var(--paper); font-size: 1.4rem; margin-bottom: 10px; }
.ap-card p { color: rgba(255,255,255,0.66); font-size: 0.97rem; }

/* ---------- Impact band ---------- */
.impact { text-align: center; }
.impact-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 60px; }
.istat { padding: 30px; }
.istat .num { font-family: var(--display); font-weight: 700; font-size: clamp(3rem,6vw,5rem); color: var(--green); line-height: 1; }
.istat .lbl { color: var(--muted); margin-top: 12px; font-size: 1.05rem; }
.istat + .istat { border-left: 1px solid var(--line); }

/* ---------- Get involved (3 ways) ---------- */
.help-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 54px; }
.help-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; transition: transform .5s var(--ease), background .4s, box-shadow .5s var(--ease); position: relative; overflow: hidden; }
.help-card:hover { transform: translateY(-10px); box-shadow: 0 34px 60px -40px rgba(19,35,26,0.4); }
.help-card .hnum { transition: opacity .4s, transform .5s var(--ease); }
.help-card:hover .hnum { opacity: 0.7; transform: translateY(-2px); }
.help-card:nth-child(1):hover { background: var(--green-tint); }
.help-card .hnum { font-family: var(--display); font-weight: 700; color: var(--green); opacity: 0.4; font-size: 2.2rem; }
.help-card h3 { font-size: 1.7rem; margin: 16px 0 12px; }
.help-card p { color: var(--muted); margin-bottom: 26px; }

/* ---------- Donation ---------- */
.donate-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: center; }
.donate-card { background: var(--green-deep); color: var(--paper); border-radius: var(--r-xl); padding: clamp(34px,4vw,60px); }
.donate-card .eyebrow { color: var(--green-bright); } .donate-card .eyebrow::before { background: var(--green-bright); }
.donate-card h2 { color: var(--paper); font-size: clamp(1.9rem,3.2vw,2.8rem); margin: 16px 0 18px; }
.donate-card p { color: rgba(255,255,255,0.74); margin-bottom: 30px; }
.progress-row { display: flex; justify-content: space-between; margin-bottom: 10px; }
.progress-row .pr { } .progress-row .pr .v { font-family: var(--display); font-weight: 700; font-size: 1.7rem; }
.progress-row .pr .k { font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.progress-row .pr.right { text-align: right; }
.bar { height: 12px; border-radius: 100px; background: rgba(255,255,255,0.14); overflow: hidden; margin-bottom: 30px; }
.bar i { display: block; height: 100%; width: 0; border-radius: 100px; background: var(--green-bright); transition: width 1.6s var(--ease); }
.donate-img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1/1; position: relative; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.faq-q .ic { width: 26px; height: 26px; border-radius: 50%; background: var(--green-tint); display: grid; place-items: center; flex-shrink: 0; transition: transform .4s var(--ease), background .3s; }
.faq-q .ic svg { width: 14px; height: 14px; }
.faq-item.open .faq-q .ic { transform: rotate(45deg); background: var(--green); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-a p { padding: 0 28px 26px; color: var(--muted); }

/* ---------- Final CTA ---------- */
.cta { background: var(--ink); border-radius: var(--r-xl); padding: clamp(50px,7vw,110px); text-align: center; position: relative; overflow: hidden; }
.cta .glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(47,111,209,0.5), transparent 70%); top: -200px; left: 50%; transform: translateX(-50%); filter: blur(20px); }
.cta-inner { position: relative; z-index: 2; }
.cta h2 { color: var(--paper); font-size: clamp(2.4rem,5.5vw,5rem); max-width: 16ch; margin: 18px auto 22px; }
.cta .lead { color: rgba(255,255,255,0.72); margin: 0 auto 38px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--green-deep); color: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: 70px; padding: 76px 0 36px; position: relative; overflow: hidden; }
.foot-watermark {
  position: absolute; left: 50%; bottom: -3.2vw; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; font-size: 23vw; line-height: 0.8;
  color: rgba(255,255,255,0.04); white-space: nowrap; pointer-events: none; letter-spacing: -0.03em;
}
.footer .wrap { position: relative; z-index: 2; }

.foot-band { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.13); }
.foot-band-copy .nav-logo { color: var(--paper); margin-bottom: 18px; }
.foot-band-copy .nav-logo-text em { color: rgba(255,255,255,0.6); }
.foot-band-copy p { color: rgba(255,255,255,0.66); max-width: 44ch; margin-bottom: 22px; }
.foot-donate { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg); padding: 34px; }
.foot-donate h3 { color: var(--paper); font-size: 1.5rem; margin-bottom: 10px; }
.foot-donate p { color: rgba(255,255,255,0.66); font-size: 0.96rem; margin-bottom: 22px; }

.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.5fr; gap: 36px; padding: 50px 0; }
.foot-col h4 { color: var(--paper); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; font-family: var(--body); font-weight: 600; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.foot-col a, .foot-col .addr { color: rgba(255,255,255,0.68); font-size: 0.96rem; transition: color .25s; display: inline-flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.foot-col a:hover { color: var(--green-bright); }
.foot-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--green-bright); }
.news p { color: rgba(255,255,255,0.66); margin-bottom: 18px; font-size: 0.96rem; }
.news-form { display: flex; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 100px; padding: 6px; }
.news-form input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--paper); padding: 12px 18px; font-family: var(--body); font-size: 0.95rem; }
.news-form input::placeholder { color: rgba(255,255,255,0.5); }
.news-form button { border: none; background: var(--green-bright); color: var(--green-deep); width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: transform .4s var(--ease); flex-shrink: 0; }
.news-form button:hover { transform: rotate(-45deg); }
.news-form button svg { width: 18px; height: 18px; }

.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.13); flex-wrap: wrap; gap: 16px; color: rgba(255,255,255,0.58); font-size: 0.9rem; }
.foot-bottom-right { display: flex; align-items: center; gap: 22px; }
.foot-bottom-right a { color: rgba(255,255,255,0.58); transition: color .25s; }
.foot-bottom-right a:hover { color: #fff; }
.to-top { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: var(--paper); padding: 10px 16px; border-radius: 100px; font-family: var(--body); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background .3s; }
.to-top:hover { background: var(--green-bright); color: var(--green-deep); }
.to-top svg { width: 15px; height: 15px; transition: transform .3s; }
.to-top:hover svg { transform: translateY(-3px); }

.foot-socials { display: flex; gap: 10px; }
.foot-socials a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; transition: background .3s, color .3s, transform .3s; }
.foot-socials a:hover { background: var(--green-bright); color: var(--green-deep); transform: translateY(-3px); }
.foot-socials svg { width: 18px; height: 18px; }

/* ============================================================
   PLACEHOLDER IMAGES
   ============================================================ */
.ph {
  background:
    repeating-linear-gradient(45deg, rgba(19,35,26,0.05) 0 12px, rgba(19,35,26,0.02) 12px 24px),
    var(--green-tint-2);
  display: grid; place-items: center; height: 100%; width: 100%;
}
.ph.dark {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 12px, rgba(255,255,255,0.02) 12px 24px),
    var(--green-deep);
}
.ph span { font-family: 'Courier New', monospace; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--green-deep); opacity: 0.7; text-align: center; padding: 0 16px; }
.ph.dark span { color: rgba(255,255,255,0.7); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .nav-ghost { display: none; }
}
@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  .hero-grid, .intro-grid, .donate-grid, .faq-grid { grid-template-columns: 1fr; }
  .mv-grid, .init-cards, .approach-grid, .impact-stats, .help-grid, .tmonial-grid { grid-template-columns: 1fr; }
  .banner-split-grid { grid-template-columns: 1fr; gap: 30px; }
  .banner-float { left: auto; right: 16px; bottom: 16px; }
  .istat + .istat { border-left: none; border-top: 1px solid var(--line); padding-top: 24px; }
  .foot-band { grid-template-columns: 1fr; gap: 28px; }
  .topbar-meta { display: none; }
  .topbar-inner { justify-content: center; }
}
@media (max-width: 920px) {
  /* hero: image first, then copy — stacked & readable */
  .hero { padding: 152px 0 30px; }
  .hero-visual { order: -1; }
  .hero-img { aspect-ratio: 16/12; }
  .hero-counter { right: 14px; top: 14px; }
  .hero-badge { left: auto; right: 24px; bottom: -40px; transform: none; width: 110px; height: 110px; font-size: 0.85rem; }
  .hero-tag { left: 14px; top: 14px; }
  .hero-play span { display: none; }
  .hero-play { padding: 14px; }
  .intro-grid { gap: 40px; }
  .intro-img { aspect-ratio: 16/10; }
  .donate-img { aspect-ratio: 16/10; }
  .split-head { flex-direction: column; align-items: flex-start; }
  .faq-grid { gap: 30px; }
  .tmonial { grid-template-columns: 1fr; }
  .tmonial-media { aspect-ratio: 16/9; min-height: 0; }
  .banner-img { aspect-ratio: 16/11; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .section { padding: 72px 0; }
  .initiative, .approach, .donate-card, .cta { padding-left: 24px; padding-right: 24px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .prog-card { flex: 0 0 300px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  /* who we are stats → tidy card row */
  .intro-stats { gap: 12px; }
  .stat { min-width: 0; flex: 1 1 0; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 10px; }
  .stat + .stat { padding-left: 10px; border-left: 1px solid var(--line); }
  .stat .num { font-size: 2rem; }
  .stat .lbl { font-size: 0.82rem; }
}
@media (max-width: 540px) {
  .wrap { padding: 0 16px; }
  .section { padding: 60px 0; }
  .nav { top: 0; padding: 12px 0; }
  .topbar { display: none; }
  .nav-inner { padding: 8px 8px 8px 16px; }
  .nav-logo-text { font-size: 1rem; }
  .nav-logo-text em { display: none; }
  .hero { padding: 124px 0 20px; }
  .hero-badge { width: 92px; height: 92px; font-size: 0.72rem; }
  .hero-counter { padding: 14px 16px; min-width: 116px; }
  .hero-counter .num { font-size: 2rem; }
  .init-card, .mv-card, .help-card, .foot-donate { padding: 26px; }
  .tmonial-body { padding: 28px 24px; }
  .tmonial blockquote { font-size: 1.15rem; }
  /* stats: 3 compact cards in a row */
  .intro-stats { gap: 8px; }
  .stat { padding: 14px 6px; }
  .stat .num { font-size: 1.6rem; }
  .stat .lbl { font-size: 0.72rem; }
  .stat + .stat { padding-left: 6px; }
  /* timeline compact */
  .tl-line { left: 23px; }
  .tl-item { grid-template-columns: 48px 1fr; gap: 14px; padding-bottom: 22px; }
  .tl-dot { width: 48px; height: 48px; }
  .tl-dot svg { width: 20px; height: 20px; }
  .tl-card { padding: 18px 18px; }
  .tl-card h3 { font-size: 1.15rem; }
  .tl-card .yr { font-size: 0.85rem; margin-bottom: 10px; }
  /* about hero banner */
  .banner-float { left: auto; right: 12px; bottom: 12px; padding: 11px 15px 11px 11px; }
  .banner-float .bf-ic { width: 38px; height: 38px; }
  .banner-float .bf-ic svg { width: 20px; height: 20px; }
  .banner-split .banner-stats { gap: 18px; }
  .banner-stats .num { font-size: 1.9rem; }
  .banner-img { aspect-ratio: 5/4; }
  .foot-cols { grid-template-columns: 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .faq-q { font-size: 1.05rem; padding: 20px 22px; }
  .cta-actions .btn, .help-card .btn { width: 100%; justify-content: center; }
  .foot-watermark { font-size: 32vw; bottom: -6vw; }
}

/* ============================================================
   PAGE BANNER (subpage hero)
   ============================================================ */
.page-banner { padding: 158px 0 70px; position: relative; overflow: hidden; }
.page-banner::before {
  content: ""; position: absolute; top: -160px; right: -140px; width: 560px; height: 560px;
  background: radial-gradient(circle at 40% 40%, rgba(47,111,209,0.14), rgba(47,111,209,0) 65%);
  pointer-events: none;
}
.page-banner .wrap { position: relative; z-index: 1; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a { color: var(--muted); transition: color .25s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb svg { width: 14px; height: 14px; opacity: 0.6; }
.breadcrumb .cur { color: var(--green-deep); font-weight: 600; }
.page-banner h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); max-width: 20ch; }
.page-banner .accent { color: var(--green); font-style: italic; }
.page-banner .lead { margin-top: 22px; max-width: 60ch; }
.banner-stats { display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.banner-stats .num { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--green); line-height: 1; }
.banner-stats .lbl { color: var(--muted); font-size: 0.92rem; margin-top: 6px; }

/* banner with image (about) */
.banner-split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.banner-split-media { position: relative; }
.banner-img { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3.6; position: relative; box-shadow: 0 40px 80px -52px rgba(19,35,26,0.6); }
.banner-float { position: absolute; left: -22px; bottom: 34px; display: flex; align-items: center; gap: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 20px 14px 14px; box-shadow: 0 22px 44px -26px rgba(19,35,26,0.5); }
.banner-float .bf-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--green-tint); display: grid; place-items: center; flex-shrink: 0; }
.banner-float .bf-ic svg { width: 24px; height: 24px; }
.banner-float b { display: block; font-size: 1rem; color: var(--ink); white-space: nowrap; }
.banner-float span { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.banner-split .banner-stats { gap: 30px; }

/* generic 2-col content with image */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-grid.rev .feature-media { order: 2; }
.feature-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3.4; position: relative; }
.feature-copy h2 { font-size: clamp(2rem,3.6vw,3rem); }
.feature-copy .lead { margin-top: 18px; }
.tick-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.tick-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-soft); }
.tick-list .tk { width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.tick-list .tk svg { width: 15px; height: 15px; color: var(--green-deep); }
.tick-list li b { color: var(--ink); }

/* value cards (about/approach generic) */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.value-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.value-card:hover { transform: translateY(-8px); box-shadow: 0 30px 56px -40px rgba(19,35,26,0.4); }
.value-card .v-ic { width: 58px; height: 58px; border-radius: 16px; background: var(--green-tint); display: grid; place-items: center; margin-bottom: 22px; }
.value-card .v-ic svg { width: 28px; height: 28px; color: var(--green-deep); }
.value-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
.value-card p { color: var(--muted); font-size: 0.97rem; }

/* timeline (animated) */
.timeline { position: relative; margin-top: 54px; }
.tl-line { position: absolute; left: 30px; top: 14px; bottom: 30px; width: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.tl-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(var(--green-bright), var(--green)); border-radius: 3px; transition: height .25s linear; }
.tl-item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 26px; align-items: start; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-marker { display: flex; justify-content: center; }
.tl-dot { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: transform .5s var(--ease), background .5s, color .5s, border-color .5s, box-shadow .5s; transform: scale(0.7); }
.tl-dot svg { width: 28px; height: 28px; }
.tl-item.act .tl-dot { transform: scale(1); background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 0 0 6px var(--green-tint); }
.tl-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; transition: transform .5s var(--ease), box-shadow .5s; }
.tl-item.act .tl-card { box-shadow: 0 22px 44px -34px rgba(19,35,26,0.4); }
.tl-card:hover { transform: translateX(6px); }
.tl-card .yr { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--green); background: var(--green-tint); padding: 4px 12px; border-radius: 100px; margin-bottom: 12px; }
.tl-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.tl-card p { color: var(--muted); max-width: 60ch; }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.team-card { position: relative; }
.team-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/3.4; position: relative; }
.team-photo .ph { transition: transform .7s var(--ease); }
.team-card:hover .team-photo .ph { transform: scale(1.06); }
.team-socials { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; opacity: 0; transform: translateY(10px); transition: .4s var(--ease); }
.team-card:hover .team-socials { opacity: 1; transform: none; }
.team-socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5); transition: background .25s, color .25s; }
.team-socials a:hover { background: var(--green); color: #fff; }
.team-socials svg { width: 16px; height: 16px; }
.team-card h3 { font-size: 1.25rem; margin-top: 18px; }
.team-card .role { color: var(--green); font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.team-card .bio { color: var(--muted); font-size: 0.92rem; margin-top: 10px; }
.team-lead { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 46px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 36px; }
.team-lead .team-photo { aspect-ratio: 4/4; }
.team-lead .quote { font-family: var(--display); font-size: clamp(1.4rem,2.2vw,2rem); line-height: 1.25; color: var(--ink); }
.team-lead .who { margin-top: 22px; }
.team-lead .who b { display: block; font-size: 1.1rem; }
.team-lead .who span { color: var(--green); font-weight: 600; font-size: 0.92rem; }

/* ============================================================
   GALLERY (masonry)
   ============================================================ */
.gallery-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.gfilter { border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); padding: 11px 20px; border-radius: 100px; font-family: var(--body); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.gfilter:hover { border-color: var(--green); color: var(--green-deep); }
.gfilter.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.masonry { display: flex; flex-wrap: wrap; gap: 18px; }
.masonry .gitem { position: relative; height: 264px; flex: 1 1 300px; min-width: 200px; border-radius: var(--r); overflow: hidden; cursor: pointer; transition: opacity .4s, transform .4s; }
.masonry .gitem .ph { width: 100%; height: 100%; transition: transform .7s var(--ease); }
.masonry .gitem:hover .ph { transform: scale(1.06); }
.masonry .gitem .gcap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px; background: linear-gradient(to top, rgba(14,61,36,0.78), rgba(14,61,36,0) 55%); opacity: 0; transition: opacity .4s; }
.masonry .gitem:hover .gcap { opacity: 1; }
.masonry .gitem .gcap span { color: #fff; font-weight: 600; font-size: 0.95rem; }
.masonry .gitem.hide { display: none; }
.gitem.tall { flex-basis: 240px; } .gitem.mid { flex-basis: 330px; } .gitem.wide { flex-basis: 460px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10,24,16,0.92); display: none; align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox-inner { max-width: 880px; width: 100%; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; }
.lightbox-inner .ph { aspect-ratio: 16/10; }
.lightbox-cap { padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; }
.lightbox-cap b { font-family: var(--display); font-size: 1.2rem; }
.lightbox-close { position: absolute; top: 26px; right: 26px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: start; }
.contact-cards { display: flex; flex-direction: column; gap: 16px; }
.contact-card { display: flex; gap: 18px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; transition: transform .4s var(--ease); }
.contact-card:hover { transform: translateX(6px); }
.contact-card .c-ic { width: 50px; height: 50px; border-radius: 14px; background: var(--green-tint); display: grid; place-items: center; flex-shrink: 0; }
.contact-card .c-ic svg { width: 24px; height: 24px; color: var(--green-deep); }
.contact-card h4 { font-size: 1.1rem; margin-bottom: 4px; }
.contact-card a, .contact-card p { color: var(--muted); font-size: 0.96rem; }
.contact-card a:hover { color: var(--green); }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(28px,3vw,44px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--ink-soft); }
.field input, .field textarea, .field select { width: 100%; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-family: var(--body); font-size: 0.98rem; color: var(--ink); outline: none; transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,111,209,0.15); }
.field textarea { resize: vertical; min-height: 130px; }
.map-embed { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/6; position: relative; margin-top: 26px; }

@media (max-width: 1000px) {
  .feature-grid, .contact-grid, .team-lead { grid-template-columns: 1fr; gap: 36px; }
  .feature-grid.rev .feature-media { order: -1; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr 1fr; }
  .masonry { columns: 2; }
  /* About hero: stack copy over image (authoritative — after base defs) */
  .banner-split-grid { grid-template-columns: 1fr; gap: 30px; }
  .banner-split-media { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
  .banner-img { aspect-ratio: 16/10; }
  .banner-float { left: auto; right: 16px; bottom: 16px; }
}
@media (max-width: 760px) {
  .page-banner { padding: 130px 0 56px; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .banner-stats { gap: 26px; }
}
@media (max-width: 540px) {
  .masonry { columns: 1; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* About hero (authoritative) */
  .banner-img { aspect-ratio: 5/4; }
  .banner-float { left: auto; right: 12px; bottom: 12px; padding: 10px 14px 10px 10px; gap: 10px; }
  .banner-float .bf-ic { width: 36px; height: 36px; border-radius: 10px; }
  .banner-float .bf-ic svg { width: 19px; height: 19px; }
  .banner-float b { font-size: 0.92rem; }
  .banner-float span { font-size: 0.76rem; }
  .banner-split .banner-stats { gap: 16px; }
  .banner-stats .num { font-size: 1.85rem; }
  .banner-stats .lbl { font-size: 0.8rem; }
  /* Timeline compact + smaller icons (authoritative — after base defs) */
  .tl-line { left: 21px; }
  .tl-item { grid-template-columns: 44px 1fr; gap: 14px; padding-bottom: 22px; }
  .tl-dot { width: 44px; height: 44px; }
  .tl-dot svg { width: 18px; height: 18px; }
  .tl-item.act .tl-dot { box-shadow: 0 0 0 4px var(--green-tint); }
  .tl-card { padding: 18px 18px; }
  .tl-card h3 { font-size: 1.15rem; }
  .tl-card .yr { font-size: 0.85rem; margin-bottom: 10px; }
}

/* Editorial photography */
img.ph { background: none; display: block; }
/* Placeholders that have no photograph yet still need to occupy space, now
   that their containers no longer carry a fixed aspect-ratio. */
div.ph { min-height: 220px; }
#lbPh { position: relative; }
#lbPh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--green-deep); }
#lbPh span { display: none; }

/* Hero story video */
.video-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,20,14,0.88); }
.video-modal.open { display: flex; }
.video-frame { width: min(960px, 100%); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8); }
.video-frame video { width: 100%; height: auto; display: block; background: #000; }
.video-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.92); color: var(--green-deep); font-size: 1.1rem; line-height: 1; }

/* Layout overrides */

/* ---------- Page width ---------- */
:root { --maxw: 1340px; }

/* ---------- Photographs keep their own proportions ----------
   The stock layout pinned every photo to a fixed aspect-ratio and cropped it
   with object-fit: cover. These boxes now take their height from the image. */
.hero-img,
.intro-img,
.donate-img,
.banner-img,
.feature-media,
.mv-card .mv-media,
.prog-card .pimg,
.team-photo,
.masonry .gitem {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  align-self: start;
}
.hero-img img.ph,
.intro-img img.ph,
.donate-img img.ph,
.banner-img img.ph,
.feature-media img.ph,
.mv-card .mv-media img.ph,
.prog-card .pimg img.ph,
.team-photo img.ph,
.masonry .gitem img.ph {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* The testimonial photo shares a row with the quote, so it does have to fill a
   column — contain on a tint keeps the whole frame visible regardless. */
.tmonial-media { background: var(--green-tint-2); }
.tmonial-media img.ph { object-fit: contain; }

/* ---------- Slots still waiting on a photograph ---------- */
.ph.ph-blank {
  background: linear-gradient(140deg, var(--green-tint) 0%, var(--green-tint-2) 100%);
}

/* ---------- Brand lockup ---------- */
.nav-logo-mark {
  height: 60px; width: auto; display: block; flex-shrink: 0;
  background: none; border-radius: 0; box-shadow: none;
}
/* The emblem's outer strokes are navy, so it needs a light chip to stay
   legible on the dark footer band. */
.foot-band-copy .nav-logo-mark {
  background: var(--paper); border-radius: 14px; padding: 6px;
}

/* ---------- Back to top ---------- */
/* Arrow only — a round icon button rather than a labelled pill. */
.to-top {
  gap: 0; width: 44px; height: 44px; padding: 0;
  justify-content: center; border-radius: 50%; flex-shrink: 0;
}
.to-top svg { width: 18px; height: 18px; }

/* ---------- Studio credit ---------- */
.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;
}
.foot-credit {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.58); transition: color .25s;
}
.foot-credit:hover { color: #fff; }
.foot-heart { color: #E8574B; font-size: 1.05em; line-height: 1; }

/* ---------- Contact map ---------- */
.map-embed { aspect-ratio: 4/3; background: var(--green-tint-2); }
.map-frame { width: 100%; height: 100%; border: 0; display: block; }
.map-directions {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-weight: 600; font-size: 0.94rem; color: var(--green-deep);
  border-bottom: 1px solid transparent; transition: border-color .25s;
}
.map-directions:hover { border-bottom-color: var(--green); }

/* ---------- Mission & vision ---------- */
.mv-grid { gap: 28px; align-items: stretch; }
.mv-card { padding: 0; display: flex; flex-direction: column; }
.mv-card .mv-media { overflow: hidden; background: var(--green-tint-2); align-self: stretch; }
.mv-card .mv-media img.ph { transition: transform .7s var(--ease); }
.mv-card:hover .mv-media img.ph { transform: scale(1.04); }
.mv-card .mv-body { flex: 1; display: flex; flex-direction: column; padding: 0 44px 44px; }
.mv-card .mv-ic {
  position: relative; z-index: 1; margin: -42px 0 24px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 20px 38px -20px rgba(19,35,26,0.5);
}
.mv-card h3 { font-size: 1.85rem; }
.mv-card p { font-size: 1.04rem; line-height: 1.65; }

/* ---------- Team ---------- */
.team-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.team-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 20px 26px; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.team-card:hover {
  transform: translateY(-6px); border-color: var(--green);
  box-shadow: 0 34px 60px -40px rgba(19,35,26,0.45);
}
.team-photo { border-radius: var(--r); background: var(--green-tint-2); }
.team-card h3 { font-size: 1.3rem; margin-top: 20px; }
.team-card .role { font-size: 0.92rem; }
.team-card .bio { font-size: 0.94rem; }
/* Stock cards linked their Instagram/LinkedIn icons to "#" — the markup is
   gone, this covers any card the rebuild did not reach. */
.team-socials { display: none; }

/* ---------- Gallery ---------- */
/* Each tile keeps its own height instead of being cropped to a uniform 264px
   row. A grid rather than CSS columns: multi-column balancing with
   break-inside: avoid silently pushed tall tiles into overflow columns that
   never painted, so a third of the gallery went missing. */
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.masonry .gitem { display: block; width: 100%; height: auto; margin: 0; }
.masonry .gitem .ph { width: 100%; height: auto; }
.masonry .gitem div.ph { min-height: 240px; }

@media (max-width: 1000px) {
  .masonry { grid-template-columns: repeat(2, 1fr); }
  /* "Who we are" stacks image-first because the photo comes first in source
     order. Read the copy first on narrow screens. */
  .intro-copy { order: 1; }
  .intro-img { order: 2; }
}
@media (max-width: 920px) {
  /* Same reasoning for the hero: headline and buttons before the film. The
     stock rule pulled the visual above the copy. */
  .hero-visual { order: 0; margin-bottom: 46px; }
  /* Testimonials stack here, so the photo no longer has to fill a column
     alongside the quote — it can take its own height instead of sitting
     letterboxed on a tint. */
  .tmonial-media { aspect-ratio: auto; height: auto; min-height: 0; background: none; }
  .tmonial-media img.ph { position: static; width: 100%; height: auto; object-fit: contain; }
}
@media (max-width: 760px) {
  .mv-card .mv-body { padding: 0 26px 26px; }
  .mv-card .mv-ic { margin-top: -34px; }
  /* Stacked footer bottom bar reads better centred. */
  .foot-bottom { align-items: center; text-align: center; gap: 20px; }
  .foot-bottom-right { justify-content: center; }
}
@media (max-width: 620px) {
  .masonry { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Home overrides */

/* ---------- Hero headline ---------- */
/* "Empowering lives creating hopes" wraps to two lines at most widths. The
   stock 1.12 leading was tuned for a headline with a lowercase descender-heavy
   first line; at this length the two lines read as one block when they are set
   solid. Overrides h1 { line-height: 1.12 } at line 373 on specificity, and
   sits alongside the existing .hero h1 { margin: 22px 0 26px } at line 498. */
.hero h1 { line-height: 1; }

/* ---------- Testimonials ---------- */
/* One card per row at every width. The stock grid was two-up, which left each
   quote in a narrow column; full-bleed rows give the quote room to breathe and
   stop the two cards fighting for the same eye line. */
.tmonial-grid { grid-template-columns: 1fr; }

/* The card is itself a media/body grid. Its stock 0.8fr/1.2fr split gave the
   photo 40% — fine inside a half-width card (~263px on a 1340px page), absurd
   now that the card spans the full page (~536px, a photo bigger than the quote
   it illustrates). 0.45fr/1.55fr puts the media column back at roughly its old
   ~300px while the quote takes the rest, and it suits the near-landscape
   testimonial photographs, which are letterboxed by object-fit: contain if the
   column goes tall and narrow.

   Scoped to min-width: 921px on purpose. The base stylesheet stacks the card
   with .tmonial { grid-template-columns: 1fr } inside @media (max-width:920px)
   at line 843; media queries add no specificity, so an unconditional rule here
   would sit later in source order and silently undo that stacking on phones. */
@media (min-width: 921px) {
  .tmonial { grid-template-columns: 0.45fr 1.55fr; }
}

/* ---------- Stacked hero and intro: copy first, picture second ---------- */
/* Both .hero-grid (line 496) and .intro-grid (line 607) collapse to a single
   column at max-width: 1000px. Source order then decides what lands on top,
   and in both cases that is wrong for reading:
     - .hero-visual came second but the stock sheet actively pulled it up with
       .hero-visual { order: -1 } inside @media (max-width:920px) at line 831;
     - .intro-img is genuinely first in the markup, so the photograph landed
       above the "Who we are" eyebrow and heading.
   Ordering BOTH children of each grid — rather than nudging one of them — is
   what makes this stick: with an explicit order on the copy as well, nothing
   can reorder the pair by touching a single selector. One block at the same
   1000px breakpoint the grids collapse at also closes the 921-1000px band,
   which the stock 920px rules never covered. */
@media (max-width: 1000px) {
  .hero-copy { order: 1; }
  /* .hero-grid already carries gap: 50px (line 496), which becomes the row gap
     once the columns collapse — so the film is spaced from the copy without any
     margin of its own. The stock margin-bottom: 46px, added back when the film
     sat above the copy, would stack on top of that gap rather than replace it;
     both margins are zeroed so the grid gap is the single source of the spacing. */
  .hero-visual { order: 2; margin-top: 0; margin-bottom: 0; }
  .intro-copy { order: 1; }
  .intro-img { order: 2; }
}

/* The headline steps down to 2.2rem on phones. h1's clamp (line 373) floors at
   2.6rem, so every phone got the same 41.6px regardless of width — at 375px
   that is a three-line headline crowding the eyebrow above it. Scoped to .hero
   so .page-banner h1, which has its own clamp, is unaffected. 760px is the
   phone tier already used for the radius cap and the footer bar. */
@media (max-width: 760px) {
  .hero h1 { font-size: 2.2rem; }
}

/* Inner page overrides */

/* Scoped to mission.html and projects.html via the body class stamped above.
   Every selector here is (0,2,0) or better, so it outranks the stock rules
   inside @media blocks earlier in the sheet without !important. Breakpoints
   stay on the sheet's existing ladder: 1080 / 1000 / 920 / 760 / 620 / 540. */

/* ============================================================
   MISSION
   ============================================================ */

/* The mission and vision cards need no rules of their own — restyleMissionVision
   above gives them the structure apply-layout.js's .mv-media / .mv-body block
   was already written against, and .mv-grid collapses to one column at 1000px
   in the stock sheet. */

/* .value-card kept a flat 36px inset at every width. On a 375px screen that is
   343px of card holding 271px of line length; the heading and the icon tile
   both sit closer to the border than to each other. Fluid padding buys back
   roughly 24px a side without touching the desktop figure. */
.page-mission .value-card { padding: clamp(24px, 3.4vw, 36px); }
.page-mission .value-grid { gap: clamp(16px, 2vw, 22px); }

/* The dark approach panel drops only its left and right padding on small
   screens (the stock rule at 760px sets padding-left/right and nothing else),
   so 80px of top and bottom air survives down to 375px against a 24px inset —
   a tall, pinched box. One fluid shorthand keeps the panel square at every
   width and restores the full 80px on wide screens. */
.page-mission .approach { padding: clamp(26px, 5vw, 80px); }

/* ============================================================
   PROJECTS
   ============================================================ */

/* The ladder the inline style used to block. minmax(0,1fr) rather than 1fr:
   removing the min-content floor means these tracks can never grow wider than
   their container no matter how long a word or how wide a pill lands in them,
   and min-width:0 does the same for the cards sitting in the tracks (grid items
   default to min-width:auto, which is a min-content floor of its own). */
.page-projects .help-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
.page-projects .prog-card,
.page-projects .prog-card .pbody { min-width: 0; }

/* Cards in a row stretch to a common height, but .pbody was a plain block, so
   the "Support this" pill sat wherever the copy happened to end — three cards
   in a row, three different button heights. A two-row grid (photo, then body)
   with the body as a flex column pins the pill to the bottom of every card.
   Grid rather than flex on the card itself: .prog-card .pimg carries
   align-self:start from apply-layout.js, which in a flex column would be read
   on the horizontal axis and shrink the photograph to its own width. In a grid
   row sized auto it is inert, and justify-self still stretches the photo. */
.page-projects .prog-card { display: grid; grid-template-rows: auto 1fr; }
.page-projects .prog-card .pbody {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
}
.page-projects .prog-link { margin-top: auto; align-self: flex-start; }

/* The key-initiative panel has the same lopsided padding as the approach panel
   on the mission page — 60px top and bottom against 24px at the sides once the
   760px rule lands. Same fix, so the two dark panels read as one treatment. */
.page-projects .initiative { padding: clamp(26px, 4.5vw, 60px) clamp(26px, 4.8vw, 64px); }

/* Three short figures — 15, 500+, 100% — read as a row. The stock sheet stacks
   them at 1000px into three blocks of 30px padding around a 48px numeral, which
   is most of a phone screen of dead space for three words. Keeping the row and
   scaling the type down instead holds the comparison together; the numerals are
   short enough that a 108px track at 375px is comfortable. */
.page-projects .impact-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 24px);
}
.page-projects .istat { padding: clamp(6px, 2vw, 30px); }
.page-projects .istat + .istat {
  border-left: 1px solid var(--line); border-top: 0;
  padding-top: clamp(6px, 2vw, 30px);
}
.page-projects .istat .num { font-size: clamp(1.9rem, 5.4vw, 5rem); }
.page-projects .istat .lbl { font-size: clamp(0.76rem, 1.1vw, 1.05rem); margin-top: clamp(6px, 1vw, 12px); }

@media (max-width: 1000px) {
  /* Stacked, the 22px grid gap falls between one card's last line and the next
     card's 2px top rule, which reads as a squeeze rather than a divider. */
  .page-mission .approach-grid { gap: 34px; }

  /* Six programme cards in a single column is a very long scroll, and each card
     would carry a ~950px-wide photograph. Two columns holds until 620px. */
  .page-projects .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* .prog-link is 9px of padding around a 24px arrow — a 42px target, just
     under the 44px minimum. Only worth changing where it is actually tapped. */
  .page-projects .prog-link { padding: 11px 11px 11px 22px; }
}

@media (max-width: 620px) {
  .page-projects .help-grid { grid-template-columns: minmax(0, 1fr); }

  /* Three banner figures in a flex row with a 26px gap need ~427px and wrap
     2 + 1 on a phone, which leaves the third stat orphaned under the first.
     An even three-column grid keeps the row intact. */
  .page-projects .page-banner .banner-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  }
  .page-projects .page-banner .banner-stats .num { font-size: 1.7rem; }
  .page-projects .page-banner .banner-stats .lbl { font-size: 0.78rem; }
}

/* Mobile & media polish */

/* ---------- 1. Photo corners on phones ----------
   The radius scale is --r-sm 14 / --r 22 / --r-lg 34 / --r-xl 48. At phone
   width a 34–48px corner eats a visible bite out of a ~340px-wide photograph.

   Redefining the tokens inside the media query (:root { --r-lg: 20px; … })
   would be tidier, but the same two tokens carry surfaces that are *meant* to
   stay large: .footer's top corners (--r-xl, the shape where the dark band
   meets the page), the big dark panels .initiative / .approach / .donate-card
   / .cta, plus .form-card, .team-lead, .help-card, .value-card, .foot-donate.
   Flattening those to 20px restyles the whole page; the user asked about
   images. So the cap is applied to the media boxes by name instead.

   Untouched by design: everything at border-radius 50% (avatars, icon buttons,
   .hero-badge, .tl-dot) and 100px (pills, .bar, .news-form) — those are shape,
   not corner rounding.

   760px is the phone tier of the sheet's existing ladder (1080/1000/920/760/
   620/540). 920 and 1000 are where the grids stack — photos are still 700px+
   wide there and carry the larger curve fine. 540 would leave every handset
   between 541 and 760 uncapped, which is most of them. */
@media (max-width: 760px) {
  .hero-img,
  .intro-img,
  .donate-img,
  .banner-img,
  .feature-media,
  .team-photo,
  .mv-card .mv-img,
  .masonry .gitem,
  .map-embed,
  .video-frame,
  .lightbox-inner,
  .mv-card,
  .prog-card,
  .tmonial,
  .team-card {
    border-radius: 20px;
  }
}

/* ---------- 2. Footer bottom bar, stacked ----------
   Screenshot: copyright / credit / "Privacy & Legal" left-aligned in a column
   with the round arrow sitting inline beside the Privacy link. Wanted: the
   three text rows centred, the arrow alone on the last row at the left.

   Scoped to the stacked state only. Above 760px the bar is a single
   space-between row with the arrow at the right end, which is already correct
   — moving it would be a regression on desktop.

   No markup change was needed. The button is already the last node of the bar
   in source order; the only reason align-self: flex-start would have put it
   under the Privacy link rather than at the page's left edge is that its
   wrapper shrink-wraps, so the wrapper is given width: 100% and turned into a
   centred column of its own. That leaves id="toTop" and the aria-label
   completely untouched, which matters because the inline script binds by id. */
@media (max-width: 760px) {
  .foot-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .foot-bottom-right {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  /* Last child of the last child = the very bottom of the bar. */
  .foot-bottom-right .to-top { align-self: flex-start; }
}

/* ---------- 3. Boxes taller than the photograph they hold ----------
   apply-layout.js already released the main photo boxes (.hero-img,
   .intro-img, .donate-img, .banner-img, .feature-media, .mv-card .mv-media,
   .prog-card .pimg, .team-photo, .masonry .gitem) from their fixed
   aspect-ratio. Those also beat the mobile aspect-ratio overrides at
   styles.css 832/839/840/845/897/1055/1069 — a media query adds no
   specificity, and the override block is later in the file. What follows is
   the set that list did not reach. */

/* .tmonial-media — the worst of them, and the one in the user's screenshot.
   It is a grid column with min-height: 100% and an absolutely-positioned
   image; apply-layout switched the image to object-fit: contain and painted
   the box with --green-tint-2 so the leftover space at least looked
   deliberate. Below 920px it already stacks and was fixed there. This does the
   same thing at *every* width: the image goes back into flow, so the box takes
   its height from the photo, align-self: start stops the grid stretching it to
   the quote's height, and with no tint left there is no band to see.
   contain-on-auto-height rather than cover, because these are portraits of
   people and cropping a wide short column would cut faces. Sized this way it
   also survives .tmonial-grid going full-width (one card per row): the media
   column simply gets wider and the photo gets taller with it. */
.tmonial-media {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  align-self: start;
  background: none;
}
.tmonial-media .ph {
  position: static;
  width: 100%;
  height: auto;
}
.tmonial-media img.ph { object-fit: contain; }

/* .mv-card .mv-img — mission.html. index.html's cards were restructured to
   .mv-media by apply-layout and picked up its treatment; mission.html still
   uses the original .mv-img, which keeps aspect-ratio 16/8 and, because no
   object-fit rule ever reaches it, renders its 792x480 photo *stretched* to
   fill. Same release as the rest, which fixes the distortion and the band. */
.mv-card .mv-img {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
}
.mv-card .mv-img img.ph {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* .team-lead .team-photo — about.html, the founder portrait. apply-layout
   releases .team-photo (0,1,0) but ".team-lead .team-photo { aspect-ratio:
   4/4 }" at styles.css:993 is (0,2,0) and outranks it, so the founder's
   572x537 photo still sat in a square box on the tint added at 1219. Matched
   selector, so this wins on source order. */
.team-lead .team-photo {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  background: none;
}

/* #lbPh — the gallery lightbox. A 16/10 box on --green-deep holding a
   contain-fitted image, so an 803x1095 portrait showed at about a third of the
   modal width inside a dark frame. The card now shrink-wraps the photo: the
   image comes back into flow at its natural size, capped to the viewport, and
   .lightbox-inner sizes to it. Safe against the empty initial src because the
   two click handlers (one adds .open, the other assigns src) run in the same
   event dispatch, so the browser only ever paints the populated state. */
.lightbox-inner { width: auto; max-width: min(880px, 100%); }
#lbPh {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  display: block;
  background: none;
}
#lbPh img {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 74vh;
  margin: 0 auto;
  background: none;
}

/* Deliberately not touched: .map-embed keeps aspect-ratio 4/3. It holds an
   <iframe>, which has no intrinsic size — the ratio is the only thing giving
   the map any height at all, so it is not letterboxing. */

/* Refinements */

/* ---------- Who we are: the dialysis-machine portrait ----------
   dialysis-machine.png is 803x1095, a tall portrait. On its own it towers over
   the copy beside it, so on desktop the frame is stretched to the copy's height
   and the machine covered into it — full-bleed, no letterbox band, no dwarfing.
   On stacked widths a gentle 4/5 crop keeps it tall enough to read without
   eating the screen. Centre framing keeps the machine in shot either way. */
@media (min-width: 1001px) {
  .intro-grid { align-items: stretch; }
  .intro-img { align-self: stretch; overflow: hidden; }
  .intro-img img.ph { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}
@media (max-width: 1000px) {
  .intro-img { aspect-ratio: 4/5; overflow: hidden; }
  .intro-img img.ph { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* ---------- Testimonials ----------
   Fuller editorial cards: the photograph fills its column edge to edge (cover,
   so no tinted band — the letterboxing apply-mobile disguised is gone), a large
   quotation glyph sits as a faint watermark, the quote itself is set larger,
   and a hairline rule lifts the attribution onto its own footer. The photo
   column is a fixed 320px on desktop so a full-width card cannot hand the image
   half the row. */
.tmonial-grid { gap: 28px; }
.tmonial { align-items: stretch; }
.tmonial-media { position: relative; overflow: hidden; min-height: 100%; background: none; }
.tmonial-media img.ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.tmonial-body { padding: 46px 46px 40px; }
.tmonial-quote-mark {
  position: absolute; top: 18px; right: 34px; margin: 0; height: auto;
  font-size: 7rem; line-height: 1; opacity: 0.1; pointer-events: none;
}
.tmonial blockquote { font-size: 1.45rem; line-height: 1.5; margin: 6px 0 0; max-width: 46ch; }
.tmonial-stars { margin: 22px 0 0; font-size: 1.05rem; letter-spacing: 4px; }
.tmonial figcaption {
  margin-top: 24px; padding-top: 22px; gap: 15px;
  border-top: 1px solid var(--line);
}
.tm-av { width: 52px; height: 52px; font-size: 0.95rem; }
.tm-who b { font-size: 1.05rem; }

@media (min-width: 921px) {
  .tmonial { grid-template-columns: 320px 1fr; }
}
@media (max-width: 920px) {
  /* Stacked: the photo becomes a clean banner crop instead of collapsing. */
  .tmonial-media { aspect-ratio: 16/10; min-height: 0; }
}
@media (max-width: 540px) {
  .tmonial-body { padding: 32px 26px 28px; }
  .tmonial blockquote { font-size: 1.2rem; }
  .tmonial-quote-mark { font-size: 5rem; top: 10px; right: 22px; }
}

/* ---------- Our journey (zig-zag timeline) ----------
   The rail runs down the centre and the cards alternate left and right, each
   joined to its centred dot by a short connector. The markup is untouched, and
   so is the page script that drives it: the rail is still one vertical bar with
   the dots sitting on it in DOM order, and the .act toggle keys off each dot's
   vertical centre against a trigger line — none of which cares which side a
   card is on, so the scroll behaviour and the progress fill keep working.

   tl-line is the timeline's first child, so the four items are nth-child 2..5:
   even (2,4 = 2023, 2025) sit LEFT, odd (3,5 = 2024, 2026) sit RIGHT. Below
   760px it all collapses back to a single left rail with the cards stacked to
   its right — the only thing that fits a phone. */
.timeline { max-width: 1000px; margin: 56px auto 0; }
.tl-line { left: 50%; transform: translateX(-50%); width: 3px; }
.tl-item { grid-template-columns: 1fr 70px 1fr; align-items: center; column-gap: 40px; padding-bottom: 40px; }
.tl-marker { grid-column: 2; }
.tl-dot { width: 70px; height: 70px; box-shadow: 0 12px 26px -16px rgba(19,35,26,0.4); }
.tl-dot svg { width: 30px; height: 30px; }
.tl-item.act .tl-dot {
  box-shadow: 0 0 0 6px var(--green-tint), 0 14px 30px -16px rgba(19,35,26,0.45);
}

.tl-card {
  position: relative; padding: 26px 30px; border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -38px rgba(19,35,26,0.45); }
.tl-item.act .tl-card { box-shadow: 0 22px 44px -34px rgba(19,35,26,0.4); }
.tl-card .yr { font-size: 1rem; padding: 5px 14px; margin-bottom: 14px; transition: background .4s, color .4s; }
.tl-item.act .tl-card .yr { background: var(--green); color: #fff; }
.tl-card h3 { font-size: 1.42rem; margin-bottom: 10px; }
.tl-card p { line-height: 1.65; }

/* Connector from the centred dot to each card, aligned to the dot's centre
   (align-items: center puts the card's own centre on the same line) and
   coloured on the active step. */
.tl-card::before {
  content: ''; position: absolute; top: 50%; width: 40px; height: 2px;
  background: var(--line); transition: background .4s;
}
.tl-item.act .tl-card::before { background: var(--green); }

/* Left column: text ranged toward the rail, accent + connector on the right. */
.tl-item:nth-child(even) .tl-card {
  grid-column: 1; text-align: right; border-right: 3px solid transparent;
}
.tl-item:nth-child(even) .tl-card::before { right: -40px; }
.tl-item:nth-child(even) .tl-card p { margin-left: auto; }
.tl-item:nth-child(even).act .tl-card,
.tl-item:nth-child(even) .tl-card:hover { border-right-color: var(--green); }

/* Right column: accent + connector on the left. */
.tl-item:nth-child(odd) .tl-card {
  grid-column: 3; text-align: left; border-left: 3px solid transparent;
}
.tl-item:nth-child(odd) .tl-card::before { left: -40px; }
.tl-item:nth-child(odd).act .tl-card,
.tl-item:nth-child(odd) .tl-card:hover { border-left-color: var(--green); }

@media (max-width: 760px) {
  .timeline { max-width: none; margin-top: 48px; }
  .tl-line { left: 25px; transform: none; }
  .tl-item { grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; }
  .tl-marker { grid-column: 1; }
  .tl-dot { width: 52px; height: 52px; }
  .tl-dot svg { width: 22px; height: 22px; }
  .tl-item:nth-child(even) .tl-card,
  .tl-item:nth-child(odd) .tl-card {
    grid-column: 2; text-align: left; padding: 20px 20px;
    border: 1px solid var(--line); border-left: 3px solid transparent; border-right-width: 1px;
  }
  .tl-item:nth-child(even) .tl-card p { margin-left: 0; }
  .tl-item:nth-child(even) .tl-card::before,
  .tl-item:nth-child(odd) .tl-card::before { left: -16px; right: auto; width: 16px; }
  .tl-item:nth-child(even).act .tl-card,
  .tl-item:nth-child(odd).act .tl-card,
  .tl-item:nth-child(even) .tl-card:hover,
  .tl-item:nth-child(odd) .tl-card:hover { border-left-color: var(--green); border-right-color: var(--line); }
  .tl-card h3 { font-size: 1.2rem; }
}