/* =========================================================================
   Birdies for Everyone — Hong Kong NGO teaching golf to kids of all abilities
   -------------------------------------------------------------------------
   Layout + typographic system modelled closely on RadiatingHope (radiatinghope.org):
   airy white ground, very large LIGHT-weight grotesque headings (h1 ~80px / 400 /
   line-height 1.0 / tight tracking), ~90px section rhythm, sticky mega-menu,
   full-bleed hero, "our story" + big stat, donation band, four-way help grid,
   tabbed events, stories carousel, feature band, news, deep footer.
   Everything is sized in fluid clamp()/vw so the whole design LIQUID-SCALES with
   the viewport (proportions calibrated to RadiatingHope at 1440px).
   Re-skinned in a bright golf palette. WCAG 2.1 AA throughout.
   ========================================================================= */

:root {
  /* ---- palette (bright golf accents on white) ---- */
  --paper:    #ffffff;   /* RH-style white ground */
  --paper-2:  #f4f8f2;   /* faint grass wash for alternating sections */
  --sky-tint: #eaf5fb;
  --ink:      #14231a;   /* near-black text */
  --muted:    #4b5a50;   /* secondary text (AA on white) */
  --line:     rgba(20,35,26,.12);

  --grass:      #2f9e5b;
  --grass-btn:  #1e7a46;  /* white text passes AA */
  --grass-deep: #123f26;  /* deep heading green */
  --sun:        #ffc93c;
  --sun-d:      #f0b400;
  --sky:        #2f9fd4;

  --on-dark:      #ffffff;
  --on-dark-dim:  rgba(255,255,255,.84);
  --on-dark-line: rgba(255,255,255,.22);

  /* ---- LIQUID type scale — targets match RadiatingHope @1440px, and keep
     scaling fluidly above/below (no breakpoint jumps). vw = target/1440*100. ---- */
  --fs-hero:    clamp(2.75rem, 5.6vw, 6.6rem);   /* 80px @1440 → up to ~106 */
  --fs-h2:      clamp(2.15rem, 5.2vw, 6rem);     /* 75px @1440 */
  --fs-h3:      clamp(1.3rem, 1.85vw, 1.9rem);
  --fs-lead:    clamp(1.2rem, 1.7vw, 1.85rem);
  --fs-body:    clamp(1.0625rem, 1.25vw, 1.4rem);/* 18px @1440 */
  --fs-nav:     clamp(1rem, 1.15vw, 1.22rem);
  --fs-eyebrow: clamp(.72rem, .82vw, .95rem);
  --fs-stat:    clamp(3.2rem, 8.3vw, 9.5rem);
  --fs-small:   clamp(.82rem, .9vw, 1rem);

  /* ---- LIQUID spacing ---- */
  --pad-sec: clamp(3.75rem, 6.25vw, 9rem);       /* ~90px @1440 section rhythm */
  --edge:    clamp(1.25rem, 5.55vw, 6rem);       /* ~80px @1440 side padding */
  --gap:     clamp(1rem, 1.9vw, 2.2rem);
  --maxw:    100rem;                              /* wide, airy container */

  --header-h: clamp(4.25rem, 5.4vw, 6rem);       /* ~78px @1440 */
  --radius:   clamp(14px, 1.4vw, 22px);
  --radius-sm: 12px;
  --shadow:   0 2px 6px rgba(20,60,35,.05), 0 20px 44px -24px rgba(20,60,35,.28);
  --shadow-lg:0 4px 12px rgba(20,60,35,.07), 0 40px 70px -30px rgba(20,60,35,.38);

  --font: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang HK", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip (not hidden) so the body never becomes a scroll container */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* RadiatingHope headings: very large, LIGHT (400), tight line-height + tracking */
h1, h2, h3 { margin: 0; font-family: var(--font); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
section[id], [id]#top { scroll-margin-top: calc(var(--header-h) + 1rem); }

:focus-visible {
  outline: 3px solid var(--grass-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,201,60,.9);
  border-radius: 8px;
}

/* ---- utilities ---- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--grass-btn); margin: 0 0 clamp(1rem,1.6vw,1.6rem); }
.eyebrow--onphoto { color: #fff; }
.section-title { font-size: var(--fs-h2); color: var(--ink); }
.statement { font-size: var(--fs-h2); color: var(--ink); line-height: 1.05; }
.section-head { max-width: 46ch; margin-bottom: clamp(2rem,3.6vw,3.6rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.section-intro { color: var(--muted); margin-top: clamp(.8rem,1.2vw,1.2rem); font-size: var(--fs-lead); line-height: 1.45; }
.u-grass { color: var(--grass); }

.tag { display:inline-block; font:600 .62em/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.02em; color:var(--muted); background:rgba(20,35,26,.06); border:1px solid var(--line); padding:.3em .5em; border-radius:6px; vertical-align:middle; }
.tag--onbtn { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); color:#fff; }

.link-arrow { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--grass-btn); font-size: var(--fs-body); }
.link-arrow span { transition: transform .25s ease; }
.link-arrow:hover span { transform: translateX(5px); }

/* =========================================================================
   BUTTONS — RadiatingHope-style pills
   ========================================================================= */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font); font-weight:600; font-size:var(--fs-nav); letter-spacing:-.01em; padding:.85em 1.6em; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .18s ease, background-color .2s, border-color .2s, color .2s; text-align:center; line-height:1; }
.btn--lg { padding: 1em 1.9em; }
.btn--block { width:100%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background:var(--grass-btn); color:#fff; border-color:var(--grass-btn); }
.btn--primary:hover { background:var(--grass-deep); border-color:var(--grass-deep); }
.btn--sun { background:var(--sun); color:var(--grass-deep); border-color:var(--sun); }
.btn--sun:hover { background:var(--sun-d); border-color:var(--sun-d); }
.btn--outline { background:transparent; color:var(--grass-deep); border-color:var(--grass-btn); }
.btn--outline:hover { background:var(--grass-btn); color:#fff; }
.btn--ghost-light { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.85); }
.btn--ghost-light:hover { background:#fff; color:var(--grass-deep); }

/* =========================================================================
   PRELOADER
   ========================================================================= */
#loader { position:fixed; inset:0; z-index:300; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; transition:opacity .5s ease, visibility .5s; }
#loader.is-gone { opacity:0; visibility:hidden; }
.loader__mark { animation: bob 1.2s ease-in-out infinite; }
.loader__bar { width:130px; height:5px; border-radius:999px; background:var(--line); overflow:hidden; }
.loader__bar span { display:block; height:100%; width:40%; border-radius:999px; background:var(--grass); animation:slide 1.1s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes slide { 0%{transform:translateX(-120%)} 100%{transform:translateX(360%)} }

/* =========================================================================
   ANNOUNCEMENT BAR
   ========================================================================= */
.topbar { background:var(--grass-deep); color:#fff; display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; padding:.55rem var(--edge); font-size:var(--fs-small); }
.topbar__msg { margin:0; color:var(--on-dark-dim); }
.topbar__tag { display:inline-block; background:var(--sun); color:var(--grass-deep); font-weight:700; font-size:.85em; letter-spacing:.05em; text-transform:uppercase; padding:.2em .6em; border-radius:999px; margin-right:.5rem; }
.topbar__link { color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.topbar__cta { background:var(--sun); color:var(--grass-deep); font-weight:600; padding:.35em 1em; border-radius:999px; }
.topbar__cta:hover { background:#fff; }

/* =========================================================================
   HEADER · sticky mega-menu (transparent over hero → solid on scroll)
   ========================================================================= */
.header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; }
.header.is-scrolled { border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(20,60,35,.5); }
.header__inner { max-width:var(--maxw); margin-inline:auto; min-height:var(--header-h); padding-inline:var(--edge); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,2vw,2rem); }

.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brand__mark svg { width: clamp(30px,2.5vw,40px); height:auto; }
.brand__text { font-family:var(--font); font-weight:600; font-size:var(--fs-nav); line-height:1; color:var(--grass-deep); letter-spacing:-.02em; }
.brand__text span { display:block; font-size:.6em; font-weight:500; color:var(--grass); letter-spacing:.02em; margin-top:3px; }

.mainnav { display:flex; align-items:center; justify-content:center; gap:clamp(.4rem,1.2vw,1.4rem); }
.mainnav__list { display:flex; align-items:center; gap:clamp(.2rem,.8vw,1rem); }
.has-mega { position:relative; }
.mainnav__top { display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; cursor:pointer; font-family:var(--font); font-weight:500; font-size:var(--fs-nav); color:var(--ink); padding:.5rem .55rem; border-radius:10px; letter-spacing:-.01em; }
.mainnav__top:hover { color:var(--grass-btn); }
.caret { width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; }
.has-mega:hover .caret, .has-mega:focus-within .caret, .has-mega.is-open .caret { transform:rotate(-135deg) translateY(-1px); }

.mega { display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:clamp(240px,20vw,320px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:.6rem; }
.mega a { display:block; padding:.7rem .8rem; border-radius:10px; }
.mega a strong { display:block; font-weight:600; color:var(--grass-deep); font-size:1rem; letter-spacing:-.01em; }
.mega a span { display:block; color:var(--muted); font-size:.86rem; margin-top:2px; }
.mega a:hover { background:var(--paper-2); }
@media (hover:hover) and (min-width:981px){ .has-mega:hover > .mega, .has-mega:focus-within > .mega { display:block; } }
.has-mega.is-open > .mega { display:block; }

.mainnav__aside { display:flex; align-items:center; gap:clamp(.6rem,1.2vw,1.4rem); }
.mainnav__plain { font-weight:500; font-size:var(--fs-nav); color:var(--ink); padding:.4rem 0; letter-spacing:-.01em; }
.mainnav__plain:hover { color:var(--grass-btn); }
.mainnav__social { color:var(--grass-deep); display:inline-flex; padding:4px; }
.mainnav__social:hover { color:var(--grass-btn); }

.header__actions { display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.nav-toggle { display:none; width:clamp(42px,4vw,52px); height:clamp(42px,4vw,52px); align-items:center; justify-content:center; background:transparent; border:2px solid var(--grass-btn); border-radius:12px; color:var(--grass-btn); cursor:pointer; }
.nav-toggle__bars { display:inline-flex; flex-direction:column; gap:4px; width:20px; }
.nav-toggle__bars span { height:2.6px; background:currentColor; border-radius:2px; transition:transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* =========================================================================
   HERO — full-bleed, bottom-left headline (RadiatingHope)
   ========================================================================= */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 2vh) 0 clamp(2.4rem,5vw,5rem); overflow:hidden; margin-top: calc(-1 * var(--header-h)); }
.hero__media { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#2f9e5b 0%, #1e7a46 45%, #123f26 100%); will-change:transform; }
/* drop a real <img> or <video> straight into .hero__media / .scene__media / .page-hero__media — it covers the slot */
.hero__media > img, .hero__media > video,
.scene__media > img, .scene__media > video,
.page-hero__media > img, .page-hero__media > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.15) 34%, rgba(0,0,0,.62) 100%); }
.hero__inner { position:relative; z-index:1; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge); }
.hero__title { font-size:var(--fs-hero); color:#fff; font-weight:400; line-height:1.0; letter-spacing:-.03em; margin:.4rem 0 clamp(1rem,1.8vw,1.6rem); text-shadow:0 2px 30px rgba(0,0,0,.3); }
.hero__title .hl { color:var(--sun); }
.hero__support { color:#fff; font-size:var(--fs-lead); font-weight:400; max-width:28ch; text-shadow:0 1px 16px rgba(0,0,0,.4); margin-bottom:clamp(1.4rem,2.4vw,2.2rem); line-height:1.35; }
.hero__cta { display:flex; flex-wrap:wrap; gap:clamp(.7rem,1vw,1rem); }
.hero__scroll { position:absolute; z-index:1; right:var(--edge); bottom:1.6rem; display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; color:#fff; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.hero__scroll-dot { width:22px; height:34px; border:2px solid rgba(255,255,255,.7); border-radius:999px; position:relative; }
.hero__scroll-dot::after { content:""; position:absolute; top:6px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:#fff; animation:scrolldot 1.6s ease-in-out infinite; }
@keyframes scrolldot { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }

/* =========================================================================
   MISSION / OUR STORY
   ========================================================================= */
.mission { padding:var(--pad-sec) 0; }
.mission__grid { display:grid; grid-template-columns:1.5fr .85fr; gap:clamp(2rem,5vw,6rem); align-items:center; }
.mission__body { color:var(--muted); margin:clamp(1.2rem,2vw,2rem) 0 clamp(1.4rem,2vw,2rem); font-size:var(--fs-lead); line-height:1.5; max-width:52ch; }
.mission__stat { text-align:left; }
.mission__stat-num { display:block; font-family:var(--font); font-weight:400; font-size:var(--fs-stat); line-height:.92; color:var(--grass); letter-spacing:-.04em; }
.mission__stat-label { display:block; margin-top:.6rem; color:var(--muted); font-weight:500; font-size:var(--fs-body); }
.mission__flags { margin-top:clamp(1.2rem,2vw,2rem); max-width:340px; }

/* =========================================================================
   DONATION BAND
   ========================================================================= */
.give { background:var(--grass-deep); color:#fff; padding:var(--pad-sec) 0; }
.give__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.give .section-title { color:#fff; }
.give__body { color:var(--on-dark-dim); margin:clamp(1rem,1.8vw,1.6rem) 0 clamp(1.4rem,2vw,2rem); font-size:var(--fs-lead); max-width:46ch; line-height:1.45; }
.give__impact { display:grid; gap:.7rem; margin-bottom:clamp(1.6rem,2.4vw,2.4rem); }
.give__impact li { display:flex; align-items:baseline; gap:.9rem; border-top:1px solid var(--on-dark-line); padding-top:.7rem; }
.give__impact strong { font-family:var(--font); font-weight:500; color:var(--sun); font-size:var(--fs-h3); min-width:5.5em; letter-spacing:-.01em; }
.give__impact span { color:var(--on-dark-dim); }
.give__impact .tag { background:rgba(255,255,255,.12); border-color:var(--on-dark-line); color:var(--on-dark-dim); }
.give__media .ph { border-color:rgba(255,255,255,.3); }
.ph--tall { aspect-ratio:4/5; }

/* =========================================================================
   FOUR WAYS TO HELP
   ========================================================================= */
.ways { padding:var(--pad-sec) 0; }
.ways__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.waycard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.waycard:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.waycard__media { aspect-ratio:4/3; position:relative; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,rgba(20,83,45,.05) 0 12px,rgba(20,83,45,.09) 12px 24px), var(--paper-2); border-bottom:1px solid var(--line); }
.waycard__body { padding:clamp(1.1rem,1.6vw,1.6rem); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.waycard__body h3 { font-size:var(--fs-h3); color:var(--grass-deep); font-weight:500; }
.waycard__body p { color:var(--muted); font-size:var(--fs-body); flex:1; }

/* =========================================================================
   PROGRAMME · tabs + events
   ========================================================================= */
.programme { background:var(--paper-2); padding:var(--pad-sec) 0; }
.tabs__list { display:inline-flex; gap:.4rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.35rem; margin-bottom:clamp(1.6rem,2.4vw,2.4rem); }
.tabs__tab { font-family:var(--font); font-weight:500; font-size:var(--fs-nav); padding:.7em 1.5em; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; transition:background-color .2s,color .2s; }
.tabs__tab[aria-selected="true"] { background:var(--grass-btn); color:#fff; }
.tabs__panel[hidden]{ display:none; }
.events { display:grid; gap:.9rem; margin-bottom:1.4rem; }
.event { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,1.6vw,1.6rem); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:clamp(.9rem,1.3vw,1.3rem); }
.event__date { display:flex; flex-direction:column; align-items:center; justify-content:center; width:clamp(64px,5vw,78px); height:clamp(64px,5vw,78px); border-radius:14px; background:var(--sky-tint); color:var(--grass-deep); line-height:1; flex:none; }
.event__dow { font-size:.7em; letter-spacing:.08em; text-transform:uppercase; color:var(--sky); font-weight:700; }
.event__day { font-family:var(--font); font-weight:500; font-size:1.7rem; margin:.1rem 0; letter-spacing:-.02em; }
.event__mon { font-size:.7em; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.event__title { font-weight:600; font-size:var(--fs-h3); color:var(--ink); letter-spacing:-.01em; }
.event__meta { color:var(--muted); font-size:var(--fs-small); margin-top:.2rem; }
.event__cta { flex:none; }

/* =========================================================================
   STORIES carousel + stat strip
   ========================================================================= */
.stories { padding:var(--pad-sec) 0; }
.stories__nav { display:flex; gap:.6rem; }
.stories__arrow { width:clamp(44px,3.4vw,52px); height:clamp(44px,3.4vw,52px); border-radius:50%; border:2px solid var(--grass-btn); background:transparent; color:var(--grass-btn); font-size:1.2rem; cursor:pointer; transition:background-color .2s,color .2s; }
.stories__arrow:hover { background:var(--grass-btn); color:#fff; }
.stories__swiper { padding:4px var(--edge) 8px; margin-top:.5rem; }
.storycard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:auto; display:flex; flex-direction:column; }
.storycard__media { aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,rgba(47,159,212,.06) 0 12px,rgba(47,159,212,.12) 12px 24px), var(--sky-tint); border-bottom:1px solid var(--line); }
.storycard__quote { font-family:var(--font); font-weight:400; font-size:var(--fs-h3); line-height:1.35; color:var(--grass-deep); padding:clamp(1.1rem,1.5vw,1.5rem) clamp(1.1rem,1.5vw,1.5rem) .6rem; margin:0; letter-spacing:-.01em; }
.storycard__cite { padding:0 clamp(1.1rem,1.5vw,1.5rem) clamp(1.1rem,1.5vw,1.5rem); color:var(--muted); font-weight:600; font-size:var(--fs-small); }
.swiper.stories__swiper { --swiper-theme-color:var(--grass-btn); }

.statstrip { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,3vw,2.4rem); margin-top:clamp(2.4rem,4vw,3.6rem); padding-top:clamp(2rem,3vw,2.6rem); border-top:1px solid var(--line); }
.statstrip__num { display:block; font-family:var(--font); font-weight:400; font-size:clamp(2.6rem,5.5vw,4.4rem); line-height:1; color:var(--grass); letter-spacing:-.03em; }
.statstrip li span:last-child { display:block; margin-top:.4rem; color:var(--muted); font-weight:500; font-size:var(--fs-small); }

/* =========================================================================
   FEATURE BAND — The Birdies Cup
   ========================================================================= */
.feature { position:relative; min-height:min(80vh,760px); display:flex; align-items:center; overflow:hidden; }
.feature__media { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2f9fd4 0%, #1e7a46 60%, #123f26 100%); }
.feature__scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.12) 100%); }
.feature__inner { position:relative; z-index:1; max-width:44rem; margin-left:var(--edge); margin-right:1.25rem; padding:2rem 0; color:#fff; }
.feature__title { font-size:var(--fs-hero); color:#fff; font-weight:400; letter-spacing:-.03em; margin:.3rem 0 clamp(1rem,1.6vw,1.4rem); line-height:1; text-shadow:0 2px 24px rgba(0,0,0,.4); }
.feature__body { color:#fff; font-size:var(--fs-lead); line-height:1.5; margin-bottom:clamp(1.4rem,2vw,2rem); text-shadow:0 1px 14px rgba(0,0,0,.35); max-width:40ch; }

/* =========================================================================
   GALLERY
   ========================================================================= */
.gallery-sec { padding:var(--pad-sec) 0; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.gallery__consent { margin-top:1.6rem; color:var(--muted); font-size:var(--fs-small); display:inline-flex; align-items:center; gap:.5rem; }

/* =========================================================================
   PARTNERS
   ========================================================================= */
.partners { padding:var(--pad-sec) 0; }
.logos { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.logo__name { font-size:var(--fs-small); font-weight:600; color:var(--muted); text-align:center; }

/* =========================================================================
   NEWS
   ========================================================================= */
.news { padding:var(--pad-sec) 0; background:var(--paper-2); }
.news__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.newscard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.newscard:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.newscard__media { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,rgba(20,83,45,.05) 0 12px,rgba(20,83,45,.09) 12px 24px), var(--paper-2); border-bottom:1px solid var(--line); }
.newscard__body { padding:clamp(1.1rem,1.5vw,1.5rem); }
.newscard__date { font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; color:var(--sky); font-weight:700; }
.newscard__title { font-weight:600; font-size:var(--fs-h3); color:var(--grass-deep); margin:.5rem 0 1rem; line-height:1.25; letter-spacing:-.01em; }

/* =========================================================================
   FOOTER CTA BAND
   ========================================================================= */
.cta-band { background:var(--sun); }
.cta-band__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(3rem,5vw,5rem) var(--edge); }
.cta-band__title { font-size:var(--fs-h2); color:var(--grass-deep); max-width:18ch; font-weight:400; letter-spacing:-.02em; }
.cta-band .btn--sun { background:var(--grass-deep); color:#fff; border-color:var(--grass-deep); }
.cta-band .btn--sun:hover { background:var(--ink); border-color:var(--ink); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background:var(--ink); color:var(--on-dark-dim); padding:var(--pad-sec) 0 2rem; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,4rem); }
.footer__big { font-family:var(--font); font-weight:400; font-size:var(--fs-h2); color:#fff; line-height:1; letter-spacing:-.03em; }
.footer__tagline { margin:.9rem 0 1.2rem; color:var(--on-dark-dim); }
.footer__social { display:inline-flex; align-items:center; gap:.5rem; color:var(--on-dark-dim); font-weight:500; }
.footer__social:hover { color:#fff; }
.footer__head { font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase; color:var(--sun); font-weight:700; margin-bottom:1rem; }
.footer__col a { display:block; color:var(--on-dark-dim); line-height:1.9; font-size:var(--fs-body); }
.footer__col a:hover { color:#fff; }
.footer__col .tag, .footer__social .tag { background:rgba(255,255,255,.1); border-color:var(--on-dark-line); color:var(--on-dark-dim); }
.footer__legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:clamp(2.4rem,4vw,3.4rem); padding-top:1.6rem; border-top:1px solid var(--on-dark-line); font-size:var(--fs-small); color:rgba(255,255,255,.55); }

/* =========================================================================
   PAGE HERO (sub-page media landing band — full-bleed image/video slot)
   ========================================================================= */
.page-hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; color:#fff; padding:calc(var(--header-h) + 2vh) 0 clamp(2.6rem,5vw,5rem); overflow:hidden; background:#123f26; margin-top: calc(-1 * var(--header-h)); }
.page-hero__media { position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(150deg,#2f9e5b 0%, #1e7a46 52%, #123f26 100%); will-change:transform; }
.page-hero__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.6) 100%); }
.page-hero .wrap { position:relative; z-index:2; width:100%; }
.page-hero .eyebrow { color:var(--sun); }
.page-hero__title { font-size:clamp(2.4rem,6vw,5.2rem); color:#fff; font-weight:400; letter-spacing:-.03em; line-height:1.02; margin:.2rem 0 0; }
.page-hero__intro { color:rgba(255,255,255,.85); font-size:var(--fs-lead); margin-top:clamp(.8rem,1.4vw,1.3rem); max-width:54ch; line-height:1.4; }

/* =========================================================================
   FULL-PAGE MEDIA SCENE (image/video landing + immersive scroll scenes)
   ========================================================================= */
.scene { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#123f26; }
.scene--center { align-items:center; }
.scene__media { position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(150deg,#2f9fd4 0%, #1e7a46 55%, #123f26 100%); will-change:transform; }
.scene__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.62) 100%); }
.scene__inner { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge); padding-block:clamp(3rem,7vh,6rem); color:#fff; }
.scene__title { font-size:var(--fs-hero); color:#fff; font-weight:400; letter-spacing:-.03em; line-height:1.0; margin:.3rem 0 clamp(1rem,1.6vw,1.4rem); text-shadow:0 2px 24px rgba(0,0,0,.4); }
.scene__body { color:rgba(255,255,255,.92); font-size:var(--fs-lead); line-height:1.45; max-width:46ch; margin-bottom:clamp(1.4rem,2vw,2rem); text-shadow:0 1px 14px rgba(0,0,0,.35); }
.scene .eyebrow { color:var(--sun); }
/* a floating "media caption" chip so empty slots read as intentional image space */
.media-note { position:absolute; z-index:2; right:var(--edge); top:calc(var(--header-h) + 1rem); font:600 var(--fs-small)/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.04em; color:#fff; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.25); padding:.5em .8em; border-radius:8px; }

/* =========================================================================
   SLIDE-DECK SCROLL: gentle snap for full-page scenes + GSAP parallax hooks
   ========================================================================= */
@media (min-width:981px) and (prefers-reduced-motion: no-preference) {
  /* proximity = the standard for full-page sections: it eases you onto a landing
     when you scroll near it, but never forces the snap or traps taller content
     (mandatory does, which read as "way too strong"). */
  html { scroll-snap-type: y proximity; }
  .hero, .scene, .page-hero { scroll-snap-align: start; }
}
/* parallax: JS gives the media a slight overscan so it can drift without gaps */
.js-parallax .hero__media, .js-parallax .scene__media, .js-parallax .page-hero__media { top:-8%; bottom:-8%; height:auto; }

/* =========================================================================
   ACTIVE NAV STATE (set by main.js from <body data-page/data-group>)
   ========================================================================= */
.mainnav__top.is-active { color:var(--grass-btn); position:relative; }
.mainnav__top.is-active::after { content:""; position:absolute; left:.55rem; right:1.1rem; bottom:1px; height:2px; background:var(--sun); border-radius:2px; }
.mainnav__plain.is-active, .mainnav__plain[aria-current="page"] { color:var(--grass-btn); }
.mega a.is-active { background:var(--paper-2); }
.mega a.is-active strong { color:var(--grass-btn); }
@media (max-width:980px){
  .mainnav__top.is-active::after { display:none; }
  .mainnav__plain.is-active, .mainnav__top.is-active { box-shadow:inset 3px 0 0 var(--sun); padding-left:.7rem; }
}

/* =========================================================================
   PLACEHOLDERS
   ========================================================================= */
.ph { position:relative; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(45deg,rgba(20,83,45,.05) 0 12px,rgba(20,83,45,.09) 12px 24px), var(--paper-2); border:2px dashed rgba(20,83,45,.28); border-radius:var(--radius); color:var(--grass-deep); }
.ph--gal { aspect-ratio:1/1; }
.ph--logo { flex-direction:column; gap:.6rem; aspect-ratio:3/2; background:var(--paper); border-style:solid; border-color:var(--line); }
.ph__label { font:700 var(--fs-small)/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; letter-spacing:.04em; background:var(--paper); color:var(--grass-deep); padding:.45em .7em; border-radius:8px; box-shadow:var(--shadow); }
.ph__label--onphoto { background:rgba(0,0,0,.55); color:#fff; }

/* =========================================================================
   SKIP LINK
   ========================================================================= */
.skip-link { position:absolute; left:12px; top:-80px; z-index:400; background:var(--grass-deep); color:#fff; font-weight:600; padding:.8rem 1.2rem; border-radius:999px; box-shadow:var(--shadow-lg); transition:top .2s; }
.skip-link:focus { top:12px; }

/* =========================================================================
   REVEAL-ON-SCROLL (pure CSS + IntersectionObserver; safe fallbacks)
   ========================================================================= */
.reveal { opacity:0; transform:translateY(30px); }
.reveal.is-in { opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.19,1,.22,1); }
.reveal-lines .line { display:block; overflow:hidden; }
.reveal-lines .line__i { display:block; transform:translateY(112%); opacity:0; transition:transform .85s cubic-bezier(.19,1,.22,1), opacity .6s ease; }
.reveal-lines.is-in .line__i { transform:none; opacity:1; }
.reveal-lines.is-in .line:nth-child(2) .line__i { transition-delay:.08s; }
.reveal-lines.is-in .line:nth-child(3) .line__i { transition-delay:.16s; }

/* =========================================================================
   RESPONSIVE  (layout tiers; type/spacing already scale fluidly)
   ========================================================================= */
@media (max-width:1080px){ .ways__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px){
  .mission__grid, .give__grid { grid-template-columns:1fr; }
  .give__media { order:-1; max-width:520px; }
  .news__grid { grid-template-columns:1fr; }
  .statstrip { grid-template-columns:repeat(2,1fr); gap:2rem; }
  .logos { grid-template-columns:repeat(2,1fr); }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1 / -1; }
  .section-head--row { flex-direction:column; align-items:flex-start; }
  .stories__nav { display:none; }

  .nav-toggle { display:inline-flex; }
  .header__cta { display:none; }
  .header__inner { grid-template-columns:auto auto; }
  .mainnav { position:fixed; inset:var(--header-h) 0 0 auto; width:min(360px,88vw); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; background:var(--paper); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); padding:1rem clamp(18px,5vw,28px) 2rem; overflow-y:auto; transform:translateX(100%); transition:transform .3s cubic-bezier(.19,1,.22,1); }
  .mainnav.is-open { transform:none; }
  .mainnav__list { flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .has-mega { border-bottom:1px solid var(--line); }
  .mainnav__top { width:100%; justify-content:space-between; font-size:1.15rem; padding:1rem .2rem; }
  .mega { position:static; display:none; min-width:0; border:0; box-shadow:none; padding:0 0 .6rem; background:transparent; }
  .has-mega.is-open > .mega { display:block; }
  .mainnav__aside { flex-direction:column; align-items:stretch; gap:0; margin-top:.4rem; }
  .mainnav__plain { padding:1rem .2rem; border-bottom:1px solid var(--line); font-size:1.15rem; }
  .mainnav__social { padding:1rem .2rem; }
}
@media (max-width:620px){
  .ways__grid, .logos, .gallery, .statstrip, .footer__grid { grid-template-columns:1fr; }
  .event { grid-template-columns:auto 1fr; }
  .event__cta { grid-column:1 / -1; justify-self:start; }
  .brand__text span { display:none; }
}

/* =========================================================================
   REDUCED MOTION & NO-JS SAFETY
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .reveal, .reveal-lines, .reveal-lines .line__i { opacity:1 !important; transform:none !important; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .btn:hover, .waycard:hover, .newscard:hover { transform:none; }
  #loader { display:none; }
}