/* ============================================================
   MALASHE FOUNDATION — Design System
   Dignity is a Right, Not a Privilege.
   ============================================================
   Palette (per PRD v2):
   Midnight Navy #14213D · Warm Gold #C89B3C · Ivory #F9FAFB
   Soft Slate #7B8794 · Forest Green #2F855A · Sunrise Orange #DD6B20
   Type: Playfair Display (headings) · Inter (body) · IBM Plex Mono (stats)
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
------------------------------------------------------------ */
:root{
  /* colour */
  --navy:        #14213D;
  --navy-2:      #1B2B4D;
  --navy-3:      #24365E;
  --navy-deep:   #0E1830;
  --gold:        #C89B3C;
  --gold-light:  #E3BE6B;
  --gold-deep:   #96741F;   /* AA-safe gold for small text on light bg */
  --ivory:       #F9FAFB;
  --cream:       #FBF7EE;
  --white:       #FFFFFF;
  --slate:       #7B8794;   /* dividers, quiet labels */
  --ink:         #17233B;   /* headings on light */
  --body:        #43526B;   /* body text on light — AA on ivory */
  --body-dark:   #C3CDDC;   /* body text on navy — AA on navy */
  --green:       #2F855A;
  --orange:      #DD6B20;
  --line:        rgba(20,33,61,.10);
  --line-gold:   rgba(200,155,60,.35);
  --line-dark:   rgba(249,250,251,.12);

  /* type */
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  /* rhythm */
  --container: 1180px;
  --container-wide: 1320px;
  --sect-y: clamp(4.5rem, 9vw, 7.5rem);
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 26px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: .25s;
  --t-med: .45s;

  /* elevation */
  --shadow-1: 0 6px 24px -8px rgba(20,33,61,.12);
  --shadow-2: 0 18px 44px -14px rgba(20,33,61,.22);
  --shadow-gold: 0 14px 38px -10px rgba(200,155,60,.35);
}

/* ------------------------------------------------------------
   2. RESET & BASE
------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--body);
  background:var(--ivory);
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul[class],ol[class]{list-style:none}
::selection{background:var(--gold);color:var(--navy)}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.15;font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem)}
h4{font-size:1.12rem}
p{max-width:68ch}
strong{color:var(--ink);font-weight:600}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark strong{color:var(--ivory)}
.on-dark{color:var(--body-dark)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{
  position:fixed;top:-4rem;left:1rem;z-index:2000;
  background:var(--navy);color:var(--ivory);padding:.7rem 1.2rem;border-radius:8px;
  transition:top .3s var(--ease);font-weight:600;font-size:.9rem;
}
.skip-link:focus{top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------
   3. LAYOUT UTILITIES
------------------------------------------------------------ */
.container{width:min(1180px,92vw);max-width:1180px;margin-left:auto;margin-right:auto}
.container--wide{width:min(1320px,94vw);max-width:1320px}
.section{padding-block:var(--sect-y);position:relative}
.section--dark{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%)}
.section--cream{background:var(--cream)}
.section--white{background:var(--white)}

.sect-head{max-width:760px;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.sect-head--center{margin-inline:auto;text-align:center}
.sect-head--center p{margin-inline:auto}
.sect-head p{margin-top:1rem;font-size:1.08rem}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.78rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:1.1rem;
}
.kicker::before{content:"";width:2.2rem;height:1px;background:var(--gold);flex-shrink:0}
.on-dark .kicker,.section--dark .kicker{color:var(--gold-light)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2vw,1.7rem)}

.divider-gold{width:56px;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;margin-block:1.2rem}

/* ------------------------------------------------------------
   4. BUTTONS
------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;border-radius:999px;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;line-height:1;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  will-change:transform;white-space:nowrap;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.97)}
.btn svg{width:1.05em;height:1.05em;flex-shrink:0}

.btn--gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 120%);color:var(--navy);box-shadow:0 8px 22px -8px rgba(200,155,60,.55)}
.btn--gold:hover{box-shadow:var(--shadow-gold)}
.btn--outline{border:1.5px solid var(--gold);color:var(--gold-deep);background:transparent}
.btn--outline:hover{background:rgba(200,155,60,.09)}
.on-dark .btn--outline,.section--dark .btn--outline{color:var(--gold-light)}
.btn--navy{background:var(--navy);color:var(--ivory);box-shadow:var(--shadow-1)}
.btn--navy:hover{background:var(--navy-2)}
.btn--ghost{color:var(--gold-deep);padding:.6rem .4rem;gap:.4rem;font-weight:600}
.btn--ghost:hover{transform:translateX(4px)}
.btn--sm{padding:.65rem 1.3rem;font-size:.88rem}
.btn--lg{padding:1.15rem 2.4rem;font-size:1.05rem}

/* arrow link used on cards */
.link-more{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:.92rem;color:var(--gold-deep);
  transition:gap var(--t-fast) var(--ease);
}
.link-more:hover{gap:.75rem}
.link-more::after{content:"→";transition:transform var(--t-fast) var(--ease)}

/* ------------------------------------------------------------
   5. SCROLL PROGRESS + NAVIGATION
------------------------------------------------------------ */

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1100;
  padding-block:1.1rem;
  transition:background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),padding var(--t-med) var(--ease);
  background:transparent;
}
.site-nav.is-scrolled{
  background:rgba(14,24,48,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.45);
  padding-block:.65rem;
}
.nav-inner{width:min(var(--container-wide),94vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.nav-brand{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.brand-badge{
  width:46px;height:46px;border-radius:50%;background:var(--white);
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.35);
  border:1px solid rgba(200,155,60,.4);
}
.brand-badge img{width:70%;height:70%;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--ivory)}
.brand-sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-light);margin-top:.2rem}

.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  padding:.55rem .85rem;border-radius:8px;
  color:rgba(249,250,251,.82);font-size:.93rem;font-weight:500;
  transition:color var(--t-fast),background var(--t-fast);position:relative;
}
.nav-links a:hover{color:var(--ivory);background:rgba(249,250,251,.07)}
.nav-links a.is-active{color:var(--gold-light)}
.nav-links a.is-active::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.25rem;height:2px;
  background:var(--gold);border-radius:2px;
}
.nav-actions{display:flex;align-items:center;gap:.9rem}
.btn--nav{padding:.72rem 1.5rem;font-size:.9rem}

.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:10px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ivory);border-radius:2px;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* fullscreen mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:1050;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:.4rem;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-menu a{
  font-family:var(--font-head);font-size:1.7rem;color:var(--ivory);
  padding:.55rem 1.4rem;border-radius:12px;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s;
}
.mobile-menu.is-open a{opacity:1;transform:none}
.mobile-menu a.is-active{color:var(--gold-light)}
.mobile-menu .btn{margin-top:1.4rem;font-size:1.05rem}
.mobile-menu a:nth-child(1){transition-delay:.05s}.mobile-menu a:nth-child(2){transition-delay:.1s}
.mobile-menu a:nth-child(3){transition-delay:.15s}.mobile-menu a:nth-child(4){transition-delay:.2s}
.mobile-menu a:nth-child(5){transition-delay:.25s}.mobile-menu a:nth-child(6){transition-delay:.3s}
.mobile-menu a:nth-child(7){transition-delay:.35s}.mobile-menu .btn{transition-delay:.42s}

/* ------------------------------------------------------------
   6. HERO (dark, shared) — home + inner page banners
------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;color:var(--body-dark);
  background:
    radial-gradient(1100px 620px at 78% 30%,rgba(200,155,60,.16),transparent 62%),
    linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 78%);
}
.hero--full{min-height:100svh;display:flex;align-items:center;padding-block:8.5rem 5rem}
.hero-glow{
  position:absolute;width:56vw;min-width:520px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(200,155,60,.32) 0%,rgba(200,155,60,.07) 45%,transparent 70%);
  filter:blur(60px);top:-12%;right:-10%;pointer-events:none;z-index:0;
}
.particles-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .container{position:relative;z-index:2}

.hero-label{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:1.3rem;
}
.hero-label::before{content:"";width:2.6rem;height:1px;background:var(--gold)}
.hero-tagline{
  font-family:var(--font-head);font-style:italic;font-size:1.12rem;color:var(--gold-light);
  margin-bottom:1rem;
}
.hero h1{color:var(--ivory);margin-bottom:1.4rem}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero-lead{font-size:1.13rem;max-width:34rem;margin-bottom:2.3rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.hero-visual{position:relative}
.hero-visual__frame{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(200,155,60,.28);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  background:var(--navy-2);
}
.hero-visual__frame img,.hero-visual__frame svg{width:100%;height:auto}
.hero-visual__caption{
  position:absolute;left:1.2rem;bottom:1.2rem;right:1.2rem;
  background:rgba(14,24,48,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-dark);border-radius:14px;padding:.9rem 1.2rem;
  font-size:.88rem;color:var(--body-dark);display:flex;gap:.8rem;align-items:center;
}
.hero-visual__caption .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex-shrink:0;animation:pulse-dot 2.4s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(200,155,60,.5)}55%{box-shadow:0 0 0 8px rgba(200,155,60,0)}}

.scroll-indicator{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(249,250,251,.55);
}
.scroll-indicator__line{width:1.5px;height:44px;background:rgba(249,250,251,.2);overflow:hidden;border-radius:2px}
.scroll-indicator__line::after{content:"";display:block;width:100%;height:45%;background:var(--gold);animation:scroll-hint 2.1s var(--ease) infinite}
@keyframes scroll-hint{0%{transform:translateY(-120%)}60%,100%{transform:translateY(260%)}}

/* inner page hero */
.page-hero{padding-block:10rem 5rem;position:relative;overflow:hidden}
.page-hero .hero-lead{margin-bottom:0}
.page-hero-breadcrumb{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(249,250,251,.5);margin-bottom:1.6rem;display:flex;gap:.6rem;align-items:center}
.page-hero-breadcrumb a{color:var(--gold-light)}
.breathe{animation:breathe 7s ease-in-out infinite;transform-origin:left center}
@keyframes breathe{0%,100%{transform:scale(.995)}50%{transform:scale(1.01)}}

/* ------------------------------------------------------------
   7. CARDS
------------------------------------------------------------ */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.8rem;position:relative;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med) var(--ease),background var(--t-med) var(--ease);
  box-shadow:var(--shadow-1);
}
.card:hover{transform:translateY(-7px);border-color:var(--line-gold);box-shadow:var(--shadow-2)}
.card > * + *{margin-top:.85rem}
.card h3{font-size:1.32rem}
.card p{font-size:.98rem}
.card .link-more{margin-top:1.15rem}

.card--dark{background:rgba(249,250,251,.045);border-color:var(--line-dark);box-shadow:none;color:var(--body-dark)}
.card--dark h3,.card--dark h4{color:var(--ivory)}
.card--dark:hover{background:rgba(249,250,251,.075);border-color:var(--line-gold);box-shadow:0 22px 50px -18px rgba(0,0,0,.5)}

.card-icon{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(140deg,rgba(200,155,60,.16),rgba(200,155,60,.05));
  border:1px solid rgba(200,155,60,.3);color:var(--gold-deep);
  margin-bottom:1.15rem;
}
.card-icon svg{width:27px;height:27px}
.card--dark .card-icon{color:var(--gold-light)}

/* value card grid */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* statistic card */
.stat-card{text-align:left;padding:1.9rem 1.7rem}
.stat-card .stat-num{
  font-family:var(--font-mono);font-weight:600;font-size:clamp(2.3rem,4vw,3.1rem);
  color:var(--gold);line-height:1;display:flex;align-items:baseline;gap:.1em;
}
.stat-card .stat-num .suffix{font-size:.55em;color:var(--gold-light)}
.stat-card .stat-label{font-weight:600;color:var(--ivory);margin-top:.7rem;font-size:1rem}
.stat-card .stat-desc{font-size:.88rem;margin-top:.45rem;color:var(--body-dark)}
.stat-card--light .stat-label{color:var(--ink)}
.stat-card--light .stat-desc{color:var(--body)}
.stat-card--light .stat-num{color:var(--gold-deep)}

/* quote card */
.quote-card{
  position:relative;border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,3.6rem);
  background:linear-gradient(150deg,var(--navy-2),var(--navy-deep));
  border:1px solid rgba(200,155,60,.3);color:var(--body-dark);
  overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.5);
}
.quote-card::before{
  content:"\201C";position:absolute;top:-.15em;left:.12em;
  font-family:var(--font-head);font-size:9rem;line-height:1;color:rgba(200,155,60,.18);
  pointer-events:none;
}
.quote-card blockquote{
  font-family:var(--font-head);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.5;color:var(--ivory);position:relative;z-index:1;max-width:none;
}
.quote-card figcaption{
  margin-top:1.6rem;display:flex;align-items:center;gap:.9rem;position:relative;z-index:1;
  font-size:.95rem;
}
.quote-card figcaption b{color:var(--gold-light);font-weight:600;display:block}
.quote-card figcaption span{font-size:.83rem;color:var(--body-dark)}
.quote-glow{
  position:absolute;inset:-40%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(200,155,60,.25) 85%,transparent 100%);
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* media/illustration panel (photo placeholder) */
.media-panel{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  border:1px solid var(--line);box-shadow:var(--shadow-2);
  background:var(--navy-2);
}
.media-panel img,.media-panel svg{width:100%;height:100%;object-fit:cover;display:block}
.media-panel figcaption{
  position:absolute;left:1rem;bottom:1rem;right:1rem;
  background:rgba(14,24,48,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--body-dark);font-size:.84rem;padding:.7rem 1rem;border-radius:10px;
  border:1px solid var(--line-dark);
}

/* ------------------------------------------------------------
   8. FLOATING WORDS backdrop
------------------------------------------------------------ */
.float-words{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.float-words span{
  position:absolute;bottom:-15%;
  font-family:var(--font-head);font-style:italic;font-weight:600;
  font-size:clamp(3rem,8vw,6.5rem);color:var(--navy);opacity:0;
  animation:float-up linear infinite;white-space:nowrap;
}
.section--dark .float-words span,.on-dark .float-words span{color:var(--ivory)}
@keyframes float-up{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.05}
  70%{opacity:.05}
  100%{transform:translateY(-115vh);opacity:0}
}

/* ------------------------------------------------------------
   9. PINNED PROGRAMME SHOWCASE
------------------------------------------------------------ */
.showcase{position:relative}
.showcase__stage{position:relative}
.showcase__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}

.emblem{position:relative;width:min(340px,72vw);aspect-ratio:1;margin-inline:auto}
.emblem__badge{
  position:absolute;inset:22%;border-radius:50%;background:var(--white);
  display:grid;place-items:center;box-shadow:0 24px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(200,155,60,.35);
}
.emblem__badge img{width:62%;height:62%;object-fit:contain}
.emblem__ring{position:absolute;border-radius:50%;border:1px solid rgba(200,155,60,.4)}
.emblem__ring--1{inset:12%;border-style:dashed;animation:spin 26s linear infinite}
.emblem__ring--2{inset:4%;border-color:rgba(200,155,60,.22);animation:spin 40s linear infinite reverse}
.emblem__ring--3{inset:-5%;border-color:rgba(123,135,148,.25);animation:spin 60s linear infinite}
.emblem__ring i{
  position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px rgba(200,155,60,.8);
}

/* default (stacked / no-JS / mobile) presentation */
.showcase__panels{display:grid;gap:1.4rem}
.showcase-panel{position:relative}
.showcase-panel .panel-num{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.25em;color:var(--gold-light);
  display:block;margin-bottom:.8rem;
}
.showcase-panel h3{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ivory)}
.showcase-panel p{margin-top:.9rem;color:var(--body-dark)}
.showcase-panel .panel-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.panel-chip{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  padding:.42rem .85rem;border-radius:999px;
  border:1px solid rgba(200,155,60,.35);color:var(--gold-light);
  background:rgba(200,155,60,.07);
}
.showcase-panel .btn{margin-top:1.6rem}

/* active pinned mode (set by JS on desktop) */
.showcase--pinned .showcase__stage{height:100vh;display:flex;align-items:center}
.showcase--pinned .showcase__panels{position:relative;min-height:340px;display:block}
.showcase--pinned .showcase-panel{position:absolute;inset:0;opacity:0;visibility:hidden;display:flex;flex-direction:column;justify-content:center}
.showcase--pinned .showcase-panel.is-current{opacity:1;visibility:visible}

.showcase__dots{display:none;justify-content:center;gap:.7rem;margin-top:2.5rem}
.showcase--pinned .showcase__dots{display:flex}
.showcase__dots button{
  width:34px;height:5px;border-radius:3px;background:rgba(249,250,251,.18);
  transition:background var(--t-fast),transform var(--t-fast);
}
.showcase__dots button.is-current{background:var(--gold)}
.showcase__dots button:hover{transform:scaleY(1.6)}

/* ------------------------------------------------------------
   10. MARQUEE (partners)
------------------------------------------------------------ */
.marquee{overflow:hidden;position:relative;padding-block:1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee__track{display:flex;gap:1.2rem;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.partner-chip{
  display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  padding:1rem 1.8rem;border-radius:14px;
  border:1px solid var(--line);background:var(--white);
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--ink);
  box-shadow:var(--shadow-1);
}
.partner-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.section--dark .partner-chip{background:rgba(249,250,251,.05);border-color:var(--line-dark);color:var(--ivory);box-shadow:none}

/* sponsors — static row used while the sponsor list is small
   (content-render.js switches to the marquee automatically at 5+) */
.sponsor-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1.2rem;padding-block:1rem}
.sponsor-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  min-width:220px;padding:1.4rem 2.2rem;border-radius:14px;
  border:1px solid var(--line);background:var(--white);
  box-shadow:var(--shadow-1);text-align:center;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast);
}
a.sponsor-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-gold)}
.sponsor-item img{max-height:56px;width:auto;object-fit:contain}
.sponsor-item img+.sponsor-name{font-size:.8rem;color:var(--slate);font-family:var(--font-mono);letter-spacing:.06em}
.sponsor-item.no-logo .sponsor-name{font-family:var(--font-head);font-weight:600;font-size:1.3rem;color:var(--ink)}
.sponsor-note{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.sponsor-item--invite{border-style:dashed;border-color:var(--line-gold);background:transparent;box-shadow:none}
.sponsor-item--invite .sponsor-name{font-size:1rem!important;color:var(--gold-deep)!important;font-family:var(--font-body)!important;font-weight:500!important}
.section--dark .sponsor-item{background:rgba(249,250,251,.05);border-color:var(--line-dark)}
.section--dark .sponsor-item.no-logo .sponsor-name{color:var(--ivory)}
.section--dark .sponsor-item--invite{background:transparent}

/* goals — small tag marking numbers as targets, not achievements */
.goal-tag{
  display:inline-block;vertical-align:middle;margin-left:.45rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-light);border:1px solid rgba(200,155,60,.45);border-radius:999px;padding:.1rem .55rem;
}

/* honest empty-state cards (stories & gallery before first cycle) */
.empty-card{text-align:center;padding:3rem 2.4rem}
.empty-card h3{font-size:1.35rem}
.empty-card p{margin-top:.8rem;max-width:56ch;margin-inline:auto}

/* donations "opening soon" notice */
.donate-soon{
  margin-top:1.6rem;padding:1.1rem 1.5rem;border-radius:var(--radius-sm);
  border:1px solid var(--line-gold);background:rgba(200,155,60,.08);color:var(--ink);
}
.donate-soon a{color:var(--gold-deep);font-weight:600;text-decoration:underline}
.section--dark .donate-soon{color:var(--ivory)}

/* ------------------------------------------------------------
   11. TIMELINE
------------------------------------------------------------ */
.timeline{position:relative;padding-left:2.2rem;display:grid;gap:2.2rem}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(200,155,60,.1))}
.timeline-item{position:relative}
.timeline-item::before{
  content:"";position:absolute;left:-2.2rem;top:.35rem;width:18px;height:18px;border-radius:50%;
  background:var(--ivory);border:3px solid var(--gold);box-shadow:0 0 0 5px rgba(200,155,60,.14);
}
.timeline-item .tl-year{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;color:var(--gold-deep);font-weight:600}
.timeline-item h4{margin-top:.35rem;font-size:1.15rem}
.timeline-item p{margin-top:.4rem;font-size:.95rem}
.tl-tag{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.25rem .7rem;border-radius:999px;margin-left:.6rem;vertical-align:middle;
  background:rgba(47,133,90,.12);color:var(--green);border:1px solid rgba(47,133,90,.3)}
.tl-tag--future{background:rgba(221,107,32,.1);color:var(--orange);border-color:rgba(221,107,32,.3)}

/* ------------------------------------------------------------
   12. FORMS
------------------------------------------------------------ */
.form{display:grid;gap:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field label{display:block;font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:.45rem}
.field .req{color:var(--orange)}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem 1.05rem;border-radius:12px;
  border:1.5px solid var(--line);background:var(--white);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,155,60,.15);
}
.field textarea{min-height:130px;resize:vertical}
.field .error-msg{display:none;font-size:.82rem;color:#C53030;margin-top:.4rem}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#C53030}
.field.has-error .error-msg{display:block}
.form-note{font-size:.84rem;color:var(--slate)}

.form-success{
  display:none;text-align:center;padding:3rem 1.5rem;
}
.form.is-done{display:none}
.form-success.is-shown{display:block;animation:success-in .5s var(--ease)}
@keyframes success-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.success-check{
  width:76px;height:76px;margin:0 auto 1.4rem;border-radius:50%;
  background:rgba(47,133,90,.12);border:2px solid var(--green);
  display:grid;place-items:center;color:var(--green);
}
.success-check svg{width:36px;height:36px}
.success-check svg path{stroke-dasharray:48;stroke-dashoffset:48;animation:draw-check .6s .25s var(--ease) forwards}
@keyframes draw-check{to{stroke-dashoffset:0}}
.form-success h3{color:var(--green)}
.form-success p{margin:.8rem auto 0;font-size:.95rem}

/* ------------------------------------------------------------
   13. NEWS / ARTICLES / GALLERY
------------------------------------------------------------ */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.4rem}
.filter-chip{
  padding:.55rem 1.25rem;border-radius:999px;font-size:.88rem;font-weight:600;
  border:1.5px solid var(--line);color:var(--body);background:var(--white);
  transition:all var(--t-fast) var(--ease);
}
.filter-chip:hover{border-color:var(--line-gold);transform:translateY(-2px)}
.filter-chip.is-active{background:var(--navy);color:var(--ivory);border-color:var(--navy)}

.article-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.article-card > * + *{margin-top:0}
.article-card .article-media{aspect-ratio:16/9.5;overflow:hidden;background:var(--navy-2);position:relative}
.article-card .article-media img,.article-card .article-media svg{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.article-card:hover .article-media img,.article-card:hover .article-media svg{transform:scale(1.05)}
.article-card .article-body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--slate)}
.article-meta .cat{color:var(--gold-deep);font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.article-meta .sep{opacity:.5}
.article-card h3{font-size:1.25rem;line-height:1.3}
.article-card .excerpt{font-size:.95rem;flex:1}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.gallery-tile{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);cursor:pointer;padding:0;background:var(--navy-2);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);
}
.gallery-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.gallery-tile img,.gallery-tile svg{width:100%;height:100%;object-fit:cover}
.gallery-tile .tile-label{
  position:absolute;left:.8rem;bottom:.8rem;z-index:2;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(14,24,48,.75);color:var(--gold-light);padding:.35rem .75rem;border-radius:999px;
}

.lightbox{
  position:fixed;inset:0;z-index:1500;display:none;place-items:center;
  background:rgba(10,16,32,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:2rem;
}
.lightbox.is-open{display:grid;animation:success-in .35s var(--ease)}
.lightbox__content{max-width:min(920px,92vw);width:100%}
.lightbox__media{border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6);background:var(--navy-2)}
.lightbox__media img,.lightbox__media svg{width:100%;height:auto;max-height:74vh;object-fit:contain}
.lightbox__caption{color:var(--body-dark);text-align:center;margin-top:1.1rem;font-size:.92rem}
.lightbox__close{
  position:absolute;top:1.4rem;right:1.6rem;width:48px;height:48px;border-radius:50%;
  background:rgba(249,250,251,.08);color:var(--ivory);font-size:1.5rem;line-height:1;
  border:1px solid var(--line-dark);transition:background var(--t-fast),transform var(--t-fast);
}
.lightbox__close:hover{background:rgba(249,250,251,.16);transform:rotate(90deg)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(249,250,251,.08);color:var(--ivory);font-size:1.4rem;border:1px solid var(--line-dark);
  transition:background var(--t-fast)}
.lightbox__nav:hover{background:rgba(200,155,60,.3)}
.lightbox__nav--prev{left:1.4rem}.lightbox__nav--next{right:1.4rem}

/* article reader dialog */
.reader{
  position:fixed;inset:0;z-index:1500;display:none;
  background:rgba(10,16,32,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  overflow-y:auto;padding:4.5rem 1.2rem;
}
.reader.is-open{display:block;animation:success-in .35s var(--ease)}
.reader__panel{
  max-width:760px;margin-inline:auto;background:var(--ivory);border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,3.5rem);position:relative;box-shadow:0 50px 120px rgba(0,0,0,.5);
}
.reader__panel h2{margin-block:.8rem 1.2rem}
.reader__panel p + p{margin-top:1rem}
.reader__panel .article-meta{margin-bottom:.4rem}

/* FAQ */
.faq{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);overflow:hidden;transition:border-color var(--t-fast)}
.faq + .faq{margin-top:.8rem}
.faq[open]{border-color:var(--line-gold)}
.faq summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem 1.4rem;font-weight:600;color:var(--ink);cursor:pointer;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-deep);transition:transform var(--t-fast) var(--ease);line-height:1}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 1.4rem 1.3rem;font-size:.96rem}

/* ------------------------------------------------------------
   14. MISC BANDS
------------------------------------------------------------ */
.cta-band{position:relative;overflow:hidden;text-align:center}
.cta-band .container{position:relative;z-index:2;max-width:820px}
.cta-band h2{color:var(--ivory);margin-bottom:1.1rem}
.cta-band p{margin-inline:auto;margin-bottom:2.2rem}
.cta-band .hero-cta{justify-content:center}

.impact-note{
  display:flex;gap:1rem;align-items:flex-start;
  border:1px solid rgba(200,155,60,.35);border-radius:var(--radius-sm);
  background:rgba(200,155,60,.07);padding:1.2rem 1.4rem;font-size:.92rem;
}
.impact-note svg{width:22px;height:22px;color:var(--gold-deep);flex-shrink:0;margin-top:.15rem}
.section--dark .impact-note svg{color:var(--gold-light)}

.badge-row{display:flex;flex-wrap:wrap;gap:.7rem}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;color:var(--ink);
  border:1px solid var(--line);background:var(--white);
  padding:.55rem 1.1rem;border-radius:999px;box-shadow:var(--shadow-1);
}
.badge svg{width:16px;height:16px;color:var(--gold-deep)}
.section--dark .badge{background:rgba(249,250,251,.06);border-color:var(--line-dark);color:var(--ivory);box-shadow:none}
.section--dark .badge svg{color:var(--gold-light)}

/* contact info */
.info-tile{display:flex;gap:1.1rem;align-items:flex-start}
.info-tile .card-icon{margin-bottom:0;width:50px;height:50px;border-radius:14px}
.info-tile h4{margin-bottom:.25rem}
.info-tile a{color:var(--gold-deep);font-weight:600}
.info-tile a:hover{text-decoration:underline}
.info-tile p{font-size:.94rem}

.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-2);line-height:0}
.map-frame iframe{width:100%;height:420px;border:0}

/* donation tiers */
.tier-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.tier-card .tier-amount{
  font-family:var(--font-mono);font-weight:600;font-size:2.4rem;color:var(--gold-deep);line-height:1;
}
.tier-card .tier-amount small{font-size:.45em;vertical-align:super}
.tier-card.is-featured{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.tier-card .tier-tag{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--navy);color:var(--gold-light);padding:.3rem .9rem;border-radius:999px;
  position:absolute;top:-0.8rem;left:50%;transform:translateX(-50%);
}

/* ------------------------------------------------------------
   15. FOOTER
------------------------------------------------------------ */
.site-footer{background:var(--navy-deep);color:var(--body-dark);padding-top:4.5rem;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,155,60,.5),transparent)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.6rem;padding-bottom:3rem}
.footer-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.footer-brand .brand-badge{width:52px;height:52px}
.site-footer h4{color:var(--ivory);font-family:var(--font-body);font-size:.85rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem}
.footer-links{display:grid;gap:.6rem}
.footer-links a{color:var(--body-dark);font-size:.94rem;transition:color var(--t-fast),padding-left var(--t-fast) var(--ease)}
.footer-links a:hover{color:var(--gold-light);padding-left:5px}
.footer-mission{font-size:.94rem;max-width:30ch}
.footer-contact{display:grid;gap:.7rem;font-size:.92rem}
.footer-contact a{color:var(--gold-light)}
.footer-contact a:hover{text-decoration:underline}
.social-row{display:flex;gap:.7rem;margin-top:1.4rem}
.social-row a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-dark);color:var(--body-dark);
  transition:all var(--t-fast) var(--ease);
}
.social-row a:hover{border-color:var(--gold);color:var(--gold-light);transform:translateY(-3px)}
.social-row svg{width:18px;height:18px}
.newsletter-form{display:flex;gap:.6rem;margin-top:.4rem}
.newsletter-form input{
  flex:1;min-width:0;padding:.8rem 1.1rem;border-radius:999px;
  border:1px solid var(--line-dark);background:rgba(249,250,251,.06);color:var(--ivory);
}
.newsletter-form input::placeholder{color:rgba(195,205,220,.55)}
.newsletter-form input:focus{outline:none;border-color:var(--gold)}
.footer-bottom{
  border-top:1px solid var(--line-dark);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.84rem;color:rgba(195,205,220,.65);
}
.footer-bottom .legal-links{display:flex;gap:1.4rem}
.footer-bottom a:hover{color:var(--gold-light)}

/* ------------------------------------------------------------
   16. REVEAL-ON-SCROLL (progressive enhancement)
   Content is visible by default; the .js-anim class (added
   inline in <head> when motion is allowed) hides reveal targets
   until GSAP animates them in. main.js removes .js-anim if GSAP
   fails to load, so content can never be stranded hidden.
------------------------------------------------------------ */
.js-anim [data-reveal]{opacity:0;transform:translateY(24px);will-change:transform,opacity}
.js-anim [data-reveal="fade"]{transform:none}
.js-anim [data-reveal="left"]{transform:translateX(-24px)}
.js-anim [data-reveal="right"]{transform:translateX(24px)}
.js-anim [data-reveal="scale"]{transform:scale(.96)}

/* ------------------------------------------------------------
   17. REDUCED MOTION & RESPONSIVE
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .float-words,.particles-canvas,.scroll-indicator{display:none!important}
}

@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .btn--nav{display:none}
  .mobile-menu .btn--nav{display:inline-flex}
  .hero-grid,.showcase__inner{grid-template-columns:1fr}
  .hero--full{padding-top:7.5rem}
  .hero-visual{max-width:560px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:1rem}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .btn{padding:1rem 1.7rem}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .scroll-indicator{display:none}
  .map-frame iframe{height:320px}
  .newsletter-form{flex-direction:column}
  .newsletter-form .btn{width:100%}
}
@media (max-width:520px){
  .grid-4,.values-grid,.gallery-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .quote-card::before{font-size:6rem}
}

/* print — keep it readable */
@media print{
  .site-nav,.mobile-menu,.scroll-indicator,.site-footer .newsletter-form{display:none!important}
  body{background:#fff;color:#000}
}