/* ============================================================
   Dr. Shekar Patil's Health & Education Foundation
   Design system — adapted from the "Vivanta" brand language
   (elegant Playfair serif + Montserrat) in the Foundation's
   Institutional Navy / Heritage Gold / Purposeful White palette.
   ============================================================ */

:root{
  color-scheme: light only;   /* opt out of browser "force dark / auto dark theme" */
  /* ---- Brand palette (Foundation) ---- */
  --navy:        #0D2B50;   /* Institutional Navy — logo + primary dark   */
  --navy-900:    #081D37;   /* deeper navy for depth / gradients          */
  --navy-800:    #0B2544;
  --navy-700:    #17406C;   /* lighter navy for hovers / lines            */
  --navy-tint:   #E7ECF2;   /* very light navy wash                       */

  --heritage:    #899952;   /* Heritage Gold (olive) — graphic fills      */
  --gold:        #9A7D24;   /* deep gold — eyebrows / accents / links     */
  --gold-bright: #E6B24E;   /* warm amber — accents on dark navy          */
  --gold-soft:   #F0E6CE;   /* pale gold wash                             */

  --ivory:       #F8F4EF;   /* page background (warm Purposeful White)    */
  --cream-card:  #F1EBDF;   /* warm card fill                             */
  --sand:        #E7E4DA;   /* cool light card / icon circle              */
  --white:       #FFFFFF;

  --ink:         #26241E;   /* body text on light (warm near-black)       */
  --ink-soft:    #55524A;   /* secondary text on light                    */
  --ink-mute:    #7A776E;   /* muted captions                             */
  --on-navy:     #EEF1F5;   /* body text on navy                          */
  --on-navy-soft:#B7C2D0;   /* secondary text on navy                     */

  --line:        rgba(13,43,80,.12);
  --line-strong: rgba(13,43,80,.22);
  --line-navy:   rgba(255,255,255,.14);

  /* ---- Type ---- */
  --serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Rhythm ---- */
  --container: 1220px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(13,43,80,.05);
  --shadow:    0 18px 50px -24px rgba(13,43,80,.28);
  --shadow-lg: 0 40px 90px -40px rgba(8,29,55,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip;
  color-scheme:light only; background:var(--ivory);
  /* the header is fixed — without this every anchor lands with its heading
     hidden underneath it */
  scroll-padding-top:6.5rem; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* We render one light theme by design. Declaring an explicit dark block tells
   browsers and in-app WebViews the site is theme-aware, so their automatic
   "force dark" inversion stands down instead of guessing at our colours. */
@media (prefers-color-scheme: dark){
  html, body{ color-scheme:light only; background:var(--ivory); color:var(--ink); }
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
p{ margin:0; }
::selection{ background:var(--gold-bright); color:var(--navy); }

:focus-visible{ outline:3px solid var(--gold-bright); outline-offset:3px; border-radius:4px; }

/* ============================================================
   Layout helpers
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(5rem,8.5vw,8.5rem); position:relative; }
.section--tight{ padding-block:clamp(3rem,5vw,4.5rem); }
.section--navy{ background:var(--navy); color:var(--on-navy); }
.section--navy-deep{
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(154,125,36,.16), transparent 55%),
    linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%);
  color:var(--on-navy);
}
.section--cream{ background:var(--cream-card); }
.center{ text-align:center; }
.narrow{ max-width:760px; margin-inline:auto; }

/* ============================================================
   Typography components
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-weight:700;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.3rem;
}
.eyebrow::before{
  content:""; width:30px; height:1.5px; background:currentColor; display:inline-block; opacity:.8;
}
.eyebrow--center{ justify-content:center; }
.section--navy .eyebrow, .section--navy-deep .eyebrow{ color:var(--gold-bright); }

.display{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.5rem,1.6rem + 4.4vw,5rem);
  line-height:1.04; letter-spacing:-.015em; color:var(--navy);
}
h2.title, .title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem);
  line-height:1.13; letter-spacing:-.012em; color:var(--navy);
}
h3.subtitle, .subtitle{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  line-height:1.2; color:var(--navy);
}
.section--navy .display,.section--navy .title,.section--navy .subtitle,
.section--navy-deep .display,.section--navy-deep .title,.section--navy-deep .subtitle{ color:var(--white); }

.accent{ font-style:italic; color:var(--gold); font-weight:500; }
.section--navy .accent,.section--navy-deep .accent{ color:var(--gold-bright); }

.lead{
  font-size:clamp(1.06rem,1rem + .45vw,1.28rem);
  line-height:1.72; color:var(--ink-soft); font-weight:400;
}
.section--navy .lead,.section--navy-deep .lead{ color:var(--on-navy-soft); }
.muted{ color:var(--ink-mute); }
.section-head{ max-width:750px; margin-bottom:clamp(3rem,5vw,4.5rem); }
.section-head .lead{ margin-top:1.1rem; }
.section-head.center{ margin-inline:auto; }
.section-head.center .lead{ max-width:60ch; margin-inline:auto; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff; --btn-bd:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-weight:600; font-size:.9rem; letter-spacing:.03em;
  padding:1.05em 1.95em; border-radius:100px;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn svg{ width:1.05em; height:1.05em; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(13,43,80,.5); }
.btn--gold{ --btn-bg:var(--gold-bright); --btn-fg:var(--navy); --btn-bd:var(--gold-bright); font-weight:700; }
.btn--gold:hover{ box-shadow:0 16px 34px -14px rgba(230,178,78,.7); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--navy); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ --btn-bd:var(--navy); background:var(--navy); color:#fff; }
.section--navy .btn--ghost,.section--navy-deep .btn--ghost,.hero .btn--ghost{
  --btn-fg:#fff; --btn-bd:var(--line-navy);
}
.section--navy .btn--ghost:hover,.section--navy-deep .btn--ghost:hover,.hero .btn--ghost:hover{
  background:#fff; color:var(--navy); --btn-bd:#fff;
}
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

.textlink{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--gold);
  font-size:.95rem;
}
.textlink svg{ width:1.1em; height:1.1em; transition:transform .3s var(--ease); }
.textlink:hover svg{ transform:translateX(4px); }
.section--navy .textlink,.section--navy-deep .textlink{ color:var(--gold-bright); }

/* ============================================================
   Header / navigation
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding-block:1.1rem;
}
.site-header.scrolled{
  background:var(--ivory);
  box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(13,43,80,.4);
  padding-block:.65rem;
}
/* Solid header while the mobile menu is open (no blur/containing-block issues) */
body.nav-open .site-header{ background:var(--ivory); box-shadow:none; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav__logo{ display:flex; align-items:center; flex-shrink:0; }
.nav__logo img{ height:clamp(38px,4.2vw,52px); width:auto; transition:height .4s var(--ease); }
.scrolled .nav__logo img{ height:clamp(34px,3.6vw,44px); }
.nav__logo .logo-dark{ display:none; }
.site-header.scrolled .nav__logo .logo-light{ display:none; }
.site-header.scrolled .nav__logo .logo-dark{ display:block; }
.nav__menu{ display:flex; align-items:center; gap:2rem; }
.nav__item{ position:relative; display:inline-flex; }
.nav__link,.nav__trigger{
  position:relative; font-family:var(--sans); font-weight:500; font-size:.94rem; color:var(--on-navy);
  padding-block:.35rem; background:none; border:0; cursor:pointer; transition:color .35s var(--ease);
}
.nav__trigger{ display:inline-flex; align-items:center; gap:.35rem; line-height:1.2; }
.site-header.scrolled .nav__link,.site-header.scrolled .nav__trigger{ color:var(--navy); }
.nav__trigger .chev{ width:.65rem; height:.65rem; opacity:.7; transition:transform .3s var(--ease); }
.nav__item:hover .chev,.nav__item.open .chev{ transform:rotate(180deg); }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav__link:hover::after,.nav__link.active::after,.nav__item:hover .nav__trigger::after{ transform:scaleX(1); }

/* single dropdown (About) */
.nav__dropdown{
  position:absolute; top:100%; left:0; min-width:210px;
  background:var(--ivory); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:.55rem; display:flex; flex-direction:column; gap:.1rem; z-index:120;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.nav__dropdown::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:14px; }
.nav__item:hover .nav__dropdown,.nav__item:focus-within .nav__dropdown,.nav__item.open .nav__dropdown{
  opacity:1; visibility:visible; transform:translateY(8px);
}
.nav__dropdown a{
  padding:.62rem .9rem; border-radius:9px; font-size:.9rem; font-weight:500; color:var(--navy);
  white-space:nowrap; transition:background .2s, color .2s, padding-left .2s;
}
.nav__dropdown a:hover{ background:var(--navy); color:#fff; padding-left:1.15rem; }
.nav__actions{ display:flex; align-items:center; gap:1rem; }
.nav__menu .btn{ display:none; }           /* CTA lives in .nav__actions on desktop */
.nav__toggle{
  display:none; width:46px; height:46px; border:1.5px solid var(--line-navy);
  border-radius:12px; background:transparent; padding:0; position:relative;
  transition:border-color .35s var(--ease); touch-action:manipulation;
}
.site-header.scrolled .nav__toggle{ border-color:var(--line-strong); }
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:2px; background:#fff;
  transform:translate(-50%,-50%); transition:.3s var(--ease);
}
.site-header.scrolled .nav__toggle span,
.site-header.scrolled .nav__toggle span::before,
.site-header.scrolled .nav__toggle span::after,
body.nav-open .nav__toggle span::before,
body.nav-open .nav__toggle span::after{ background:var(--navy); }
.nav__toggle span::before{ transform:translate(-50%,-7px); }
.nav__toggle span::after{ transform:translate(-50%,5px); }
body.nav-open .nav__toggle span{ background:transparent; }
body.nav-open .nav__toggle span::before{ transform:translate(-50%,-50%) rotate(45deg); }
body.nav-open .nav__toggle span::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; color:var(--on-navy); overflow:hidden; isolation:isolate;
  min-height:min(94vh,900px); display:flex; align-items:center;
  padding-top:clamp(7rem,11vw,9rem); padding-bottom:clamp(3.5rem,7vw,5.5rem);
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:60% center; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(7,18,36,.84) 0%, rgba(7,18,36,.58) 30%, rgba(9,29,55,.2) 58%, rgba(9,29,55,0) 82%),
    linear-gradient(0deg, rgba(6,15,30,.3) 0%, transparent 32%);
}
.hero__inner{ position:relative; z-index:1; width:100%; }
.hero__copy{ max-width:660px; }
.hero__eyebrow{ color:var(--gold-bright); }
.hero h1{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(2.6rem,1.7rem + 4.4vw,4.7rem); line-height:1.05; letter-spacing:-.015em;
  margin:.2rem 0 1.4rem; text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}
.hero p.lead{ color:#e6ecf3; max-width:min(46ch,100%);
  text-shadow:0 1px 12px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.35); }
.hero .btn-row{ margin-top:2rem; }
.hero__stats{
  display:flex; flex-wrap:wrap; gap:1.8rem 2.6rem; margin-top:2.8rem;
  padding-top:2rem; border-top:1px solid rgba(255,255,255,.18);
}
.hero__stat b{
  display:block; font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem); line-height:1;
}
.hero__stat span{ font-size:.82rem; letter-spacing:.02em; color:var(--on-navy-soft); }

/* trust bar under hero */
.trustbar{ background:var(--navy-900); color:var(--on-navy-soft); border-top:1px solid var(--line-navy); }
.trustbar .container{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.2rem; justify-content:center;
  padding-block:1.1rem; text-align:center; }
.trustbar span{ font-size:.82rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.55rem; }
.trustbar svg{ width:1.05rem; height:1.05rem; color:var(--gold-bright); flex-shrink:0; }

/* ============================================================
   Value / pillar chips (About)
   ============================================================ */
.about__top{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:stretch;
  margin-bottom:clamp(2rem,4vw,3.2rem); }
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; }
.value{ background:var(--ivory); padding:2rem 1.5rem; text-align:center; }
.value .ico{ width:48px; height:48px; border-radius:12px; background:var(--navy-tint); color:var(--navy);
  display:grid; place-items:center; margin:0 auto 1rem; }
.value .ico svg{ width:24px; height:24px; }
.value h4{ font-family:var(--sans); font-weight:700; font-size:1.02rem; color:var(--navy); margin-bottom:.35rem; letter-spacing:.01em; }
.value p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }

.mission-card{
  background:var(--navy); color:#fff; border-radius:var(--radius); padding:clamp(1.7rem,3vw,2.6rem);
  position:relative; overflow:hidden; box-shadow:var(--shadow);
  height:100%; display:flex; flex-direction:column; justify-content:center;
}
.mission-card::before{
  content:"“"; position:absolute; right:.6rem; top:-1.5rem; font-family:var(--serif);
  font-size:11rem; color:var(--gold-bright); opacity:.16; line-height:1;
}
.mission-card .eyebrow{ color:var(--gold-bright); }
.mission-card p{ font-family:var(--serif); font-size:clamp(1.15rem,1rem + .7vw,1.5rem); line-height:1.45; font-style:italic; }

/* ============================================================
   Initiatives (5 umbrella orgs)
   ============================================================ */
.initiatives{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.25rem; }
.init-card{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.7rem; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
  display:flex; flex-direction:column; min-height:100%;
}
.init-card::after{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg,var(--heritage),var(--gold-bright)); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.init-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; }
.init-card:hover::after{ transform:scaleX(1); }
/* flagship focus: Health & Education sit larger and keep a permanent gold accent */
.init-card--wide::after{ transform:scaleX(1); }
.init-card--wide{ grid-column:span 3; background:linear-gradient(180deg,#fff 0%, #FBF7EE 100%); }
.init-card--wide h3{ font-size:1.6rem; }
/* flagship cards with a photo banner */
.init-card--feature{ padding:0; display:flex; flex-direction:column; }
.init-card__media{ margin:0; height:210px; overflow:hidden; }
.init-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.init-card--feature:hover .init-card__media img{ transform:scale(1.05); }
.init-card__inner{ padding:1.9rem 1.7rem 2rem; display:flex; flex-direction:column; flex:1; }
.init-card--feature .init-card__ico{ margin-top:-3.7rem; box-shadow:var(--shadow); position:relative; z-index:2; }
.init-card--third{ grid-column:span 2; }
.init-card__flag{
  position:absolute; top:1.3rem; right:1.3rem; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); background:var(--gold-soft); padding:.3rem .7rem; border-radius:100px;
}
.init-card__ico{
  width:60px; height:60px; border-radius:16px; background:var(--navy); color:var(--gold-bright);
  display:grid; place-items:center; margin-bottom:1.3rem; transition:transform .45s var(--ease);
}
.init-card__ico svg{ width:32px; height:32px; }
.init-card:hover .init-card__ico{ transform:rotate(-6deg) scale(1.05); }
.init-card__num{ font-family:var(--serif); color:var(--line-strong); font-size:1rem; font-weight:600; margin-bottom:.4rem; }
.init-card h3{ font-family:var(--serif); font-size:1.4rem; color:var(--navy); margin-bottom:.55rem; line-height:1.15; }
.init-card p{ font-size:.92rem; color:var(--ink-soft); line-height:1.58; margin-bottom:1.1rem; }
.init-card ul{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; }
.init-card li{ font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--navy);
  background:var(--sand); padding:.32rem .7rem; border-radius:100px; }
.init-card--wide .init-card__ico{ background:linear-gradient(140deg,var(--navy),var(--navy-700)); }

/* ============================================================
   Founder
   ============================================================ */
.founder__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.founder__photo{ position:relative; }
.founder__photo .frame{
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; position:relative;
  /* light, gallery-style panel with a hairline border (matches the team cards) */
  background:linear-gradient(180deg,#F4F7FA 0%, #E4EAF2 100%);
  border:1px solid rgba(13,43,80,.12);
  box-shadow:0 28px 60px -42px rgba(13,43,80,.45);
}
.founder__photo .frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(118% 82% at 50% 36%, transparent 58%, rgba(13,43,80,.09) 100%);
}
.founder__photo .frame img,.founder__photo .frame svg{ width:100%; height:100%; object-fit:cover; }
.founder__photo .credential{
  position:absolute; right:-1.1rem; bottom:1.6rem; background:var(--ivory); color:var(--navy);
  border-radius:var(--radius); padding:1rem 1.2rem; box-shadow:var(--shadow); text-align:center; max-width:160px;
}
.founder__photo .credential b{ font-family:var(--serif); font-size:1.9rem; display:block; line-height:1; color:var(--navy); }
.founder__photo .credential span{ font-size:.72rem; color:var(--ink-mute); letter-spacing:.02em; }
.founder__name{ font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem); color:var(--navy); margin:.4rem 0 .2rem; }
.founder__role{ color:var(--gold); font-weight:600; margin-bottom:1.3rem; }
.founder__role b{ color:var(--navy); }
/* Founder vision block (replaces the credentials grid) */
.vision-card{
  background:var(--sand); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.1rem); margin-top:clamp(1.6rem,3vw,2.2rem);
}
.vision-card__ico{
  width:54px; height:54px; border-radius:14px; background:var(--white); color:var(--gold);
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
}
.vision-card__ico svg{ width:27px; height:27px; }
.vision-card__label{
  display:block; font-family:var(--sans); font-weight:700; font-size:.75rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:1.1rem 0 .65rem;
}
.vision-card p{ color:var(--ink-soft); font-size:1rem; line-height:1.72; }

.creds__label{ margin:1.9rem 0 .9rem; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); }
.creds{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.cred{ display:flex; gap:.9rem; align-items:flex-start;
  background:var(--white); border:1px solid var(--line); border-radius:14px;
  padding:1.05rem 1.15rem; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.cred:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
.cred__ico{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold); }
.cred__ico svg{ width:20px; height:20px; }
.cred__body{ min-width:0; }
.cred__body b{ display:block; color:var(--navy); font-size:.92rem; line-height:1.3; margin-bottom:.2rem; }
.cred__body span{ display:block; font-size:.8rem; color:var(--ink-mute); line-height:1.45; }

/* ============================================================
   Team & mentors
   ============================================================ */
.team-subhead{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);
  color:var(--navy); margin:0 0 1.5rem; display:flex; align-items:center; gap:1.1rem; letter-spacing:-.01em;
}
.team-subhead::after{ content:""; flex:1; height:1px; background:var(--line-strong); opacity:.5; }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.team-grid--4{ grid-template-columns:repeat(3,1fr); }
.team-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.team-card__photo{ aspect-ratio:4/3; overflow:hidden; background:#EAEEF4; }
.team-card__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  transition:transform .6s var(--ease); }
.team-card:hover .team-card__photo img{ transform:scale(1.04); }
.team-card__body{ padding:1.15rem 1.3rem 1.35rem; }
.team-card__body h4{ font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--navy); line-height:1.2; }
.team-card .role{ color:var(--gold); font-weight:600; font-size:.84rem; margin:.3rem 0 .1rem; }
.team-card .org{ color:var(--ink-mute); font-size:.82rem; line-height:1.45; }
.team-card .desc{ color:var(--ink-soft); font-size:.85rem; line-height:1.55; margin-top:.75rem;
  border-top:1px solid var(--line); padding-top:.75rem; }

/* ============================================================
   Stats band
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-navy);
  border:1px solid var(--line-navy); border-radius:var(--radius); overflow:hidden; }
.stat{ background:transparent; padding:clamp(1.6rem,3vw,2.4rem) 1.4rem; text-align:center; }
.stat b{ font-family:var(--serif); font-weight:600; color:var(--gold-bright);
  font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem); line-height:1; display:block; }
.stat span{ display:block; margin-top:.5rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--on-navy-soft); }

/* ============================================================
   Allied trust
   ============================================================ */
.trust__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.trust__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:3/4; }
.trust__media img,.trust__media svg{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.trust__tagline{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--gold); }
.trust__list{ display:grid; gap:1rem; margin-top:1.6rem; }
.trust__list li{ display:flex; gap:.9rem; align-items:flex-start; font-size:.96rem; color:var(--ink-soft); }
.trust__list svg{ width:1.4rem; height:1.4rem; color:var(--heritage); flex-shrink:0; margin-top:.1rem; }
.trust__list b{ color:var(--navy); }
.quote-block{ border-left:3px solid var(--gold-bright); padding:.4rem 0 .4rem 1.3rem; margin:1.8rem 0;
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--navy); }

.program-tags{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.program-tags li{ font-size:.78rem; font-weight:600; color:var(--navy); background:var(--white);
  border:1px solid var(--line); padding:.45rem .85rem; border-radius:100px; }

/* ============================================================
   Video / health camp highlight
   ============================================================ */
.video-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  background:#000; border:1px solid var(--line-navy); }
.video-wrap video{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#000; }
.video-tag{ position:absolute; left:.7rem; top:.7rem; z-index:3; display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(13,43,80,.6); color:#fff; padding:.24rem .55rem; border-radius:100px; font-size:.66rem; font-weight:600;
  letter-spacing:.05em; }
.video-tag .live{ width:6px; height:6px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 0 0 rgba(230,178,78,.7);
  animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(230,178,78,0);} 100%{ box-shadow:0 0 0 0 rgba(230,178,78,0);} }
.video-caption{ margin-top:1rem; font-size:.86rem; color:var(--on-navy-soft); display:flex; align-items:center; gap:.5rem; }
.video-caption--light{ color:var(--ink-mute); }
.video-caption--light svg{ color:var(--gold); }

/* enlarged video + highlights */
.camp-media{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center; }

/* moving gallery (marquee) */
.marquee{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0, #000 6%, #000 94%, transparent 100%); }
.marquee__track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee figure{ margin:0 1rem 0 0; flex:0 0 auto; width:clamp(280px,32vw,430px); aspect-ratio:16/10;
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); }
.marquee figure img{ width:100%; height:100%; object-fit:cover; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; flex-wrap:wrap; width:auto; } }

.impact-highlights{ display:grid; gap:1.1rem; }
.impact-highlights li{ display:flex; gap:1rem; align-items:flex-start; }
.impact-highlights .n{ font-family:var(--serif); font-weight:600; color:var(--gold-bright); font-size:1.6rem; line-height:1;
  min-width:3.6rem; }
.impact-highlights b{ color:#fff; display:block; font-size:1rem; }
.impact-highlights span{ color:var(--on-navy-soft); font-size:.88rem; }

/* ============================================================
   Approach / care model timeline
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; counter-reset:step; }
.step{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; position:relative; }
.step .n{ font-family:var(--serif); font-weight:600; color:var(--gold); font-size:1.05rem; }
.step .ico{ width:44px; height:44px; border-radius:12px; background:var(--navy-tint); color:var(--navy);
  display:grid; place-items:center; margin:.6rem 0 1rem; }
.step .ico svg{ width:22px; height:22px; }
.step h4{ font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--navy); margin-bottom:.35rem; }
.step p{ font-size:.86rem; color:var(--ink-soft); line-height:1.5; }

/* ============================================================
   Partners
   ============================================================ */
.partners{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.partner{ background:var(--white); border:1px solid var(--line); border-radius:100px; padding:.7rem 1.35rem;
  font-weight:600; font-size:.9rem; color:var(--navy); }
.partner span{ color:var(--gold); }

/* ============================================================
   Contact
   ============================================================ */
#contact{ position:relative; isolation:isolate; }
#contact::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(8,21,41,.9), rgba(6,15,30,.94)), url("../img/trust/camps/camp-crowd.webp") center/cover; }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
.contact__cards{ display:grid; gap:1rem; margin-top:1.8rem; }
.contact-card{ display:flex; gap:1rem; align-items:flex-start; background:rgba(255,255,255,.05);
  border:1px solid var(--line-navy); border-radius:var(--radius); padding:1.2rem 1.3rem; }
.contact-card .ico{ width:46px; height:46px; border-radius:12px; background:rgba(230,178,78,.14); color:var(--gold-bright);
  display:grid; place-items:center; flex-shrink:0; }
.contact-card .ico svg{ width:22px; height:22px; }
.contact-card b{ color:#fff; display:block; font-size:.95rem; margin-bottom:.15rem; }
.contact-card a,.contact-card p{ color:var(--on-navy-soft); font-size:.9rem; }
.contact-card a:hover{ color:var(--gold-bright); }

.form{ background:var(--ivory); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow); }
.form h3{ font-family:var(--serif); font-size:1.5rem; color:var(--navy); margin-bottom:.4rem; }
.form p.sub{ color:var(--ink-mute); font-size:.9rem; margin-bottom:1.4rem; }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--navy); margin-bottom:.4rem; letter-spacing:.02em; }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:.95rem; color:var(--ink);
  padding:.85em 1em; border:1.5px solid var(--line-strong); border-radius:12px; background:#fff;
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(154,125,36,.14); }
.field textarea{ resize:vertical; min-height:120px; }
.form .btn{ width:100%; margin-top:.4rem; }
.form__note{ font-size:.78rem; color:var(--ink-mute); text-align:center; margin-top:.9rem; }

/* ============================================================
   Success modal
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:1.25rem; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(6,15,30,.62); animation:modalFade .25s ease both; }
.modal__box{
  position:relative; width:100%; max-width:450px; text-align:center;
  background:var(--ivory); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(2rem,4vw,2.9rem); animation:modalPop .32s var(--ease) both;
}
.modal__icon{
  width:66px; height:66px; border-radius:50%; background:var(--gold-soft); color:var(--gold);
  display:grid; place-items:center; margin:0 auto 1.3rem;
}
.modal__icon svg{ width:31px; height:31px; }
.modal__box h3{ font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem); color:var(--navy); margin-bottom:.65rem; }
.modal__box p{ color:var(--ink-soft); line-height:1.7; margin-bottom:1.7rem; }
@keyframes modalFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalPop{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:var(--navy-900); color:var(--on-navy-soft); padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer__brand img{ height:52px; width:auto; margin-bottom:1.1rem; }
.footer__brand p{ font-size:.9rem; max-width:34ch; }
.footer h5{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:1.1rem; }
.footer ul li{ margin-bottom:.6rem; }
.footer a{ font-size:.9rem; transition:color .25s; }
.footer a:hover{ color:#fff; }
.footer address{ font-style:normal; font-size:.9rem; line-height:1.7; }
.socials{ display:flex; gap:.6rem; margin-top:1.2rem; }
.socials a{ width:40px; height:40px; border:1px solid var(--line-navy); border-radius:10px; display:grid; place-items:center;
  color:var(--on-navy-soft); transition:.3s var(--ease); }
.socials a:hover{ background:var(--gold-bright); color:var(--navy); border-color:var(--gold-bright); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }
.footer__bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-navy);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.82rem; }
.footer__bottom a:hover{ color:var(--gold-bright); }
.footer__credit{ flex-basis:100%; text-align:center; margin-top:.5rem;
  font-size:.72rem; letter-spacing:.05em; color:rgba(238,241,245,.5); }
.footer__credit a{ color:rgba(238,241,245,.72); font-weight:600;
  border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.footer__credit a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

/* ============================================================
   Decorative
   ============================================================ */
.sketch-divider{ display:block; width:100%; height:auto; color:var(--heritage); opacity:.5; }
.section-label-side{ position:absolute; }

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .initiatives{ grid-template-columns:repeat(4,1fr); }
  .init-card--wide{ grid-column:span 2; }
  .init-card--third{ grid-column:span 2; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:2rem; }
}
@media (max-width:900px){
  .nav__menu{
    position:fixed; top:0; right:0; left:auto; width:min(86vw,370px); background:var(--ivory);
    height:100vh; height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:5.5rem 2rem 2.5rem; transform:translateX(105%); transition:transform .45s var(--ease);
    box-shadow:var(--shadow-lg); z-index:99; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav__menu{ transform:translateX(0); }
  .nav__item{ width:100%; display:block; border-bottom:1px solid var(--line); }
  .nav__link,.nav__trigger{ font-size:1.2rem; font-family:var(--serif); color:var(--navy) !important;
    padding:.9rem 0; width:100%; }
  .nav__link:not(.nav__trigger){ display:block; border-bottom:1px solid var(--line); }
  .nav__trigger{ justify-content:space-between; }
  .nav__trigger .chev{ width:1rem; height:1rem; opacity:.6; }
  .nav__link::after{ display:none; }
  .nav__dropdown{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; padding:0; gap:0;
    max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
  }
  .nav__dropdown::before{ display:none; }
  .nav__item.open .nav__dropdown{ max-height:260px; padding-bottom:.5rem; }
  .nav__dropdown a{ white-space:normal; font-size:1rem; padding:.55rem .9rem; color:var(--ink-soft); }
  .nav__dropdown a:hover{ background:transparent; color:var(--gold); padding-left:.9rem; }
  .nav__menu .btn{ display:inline-flex; justify-content:center; margin-top:1.4rem; }
  .nav__toggle{ display:block; z-index:100; }
  .nav__actions .btn{ display:none; }
  .hero{ min-height:auto; }
  /* much lighter scrim so the campus image stays visible on phones */
  .hero::after{ background:
    linear-gradient(180deg, rgba(7,18,36,.58) 0%, rgba(7,18,36,.34) 45%, rgba(7,18,36,.68) 100%); }
  .hero__bg img{ object-position:62% center; }
  .about__top,.founder__grid,.trust__grid,.contact__grid,.camp-media{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr 1fr; }
  .founder__photo{ max-width:440px; }
  .steps{ grid-template-columns:1fr 1fr; }
  .team-grid,.team-grid--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .values{ grid-template-columns:1fr; }
  .value{ text-align:center; padding:1.7rem 1.4rem; }
  .value .ico{ margin-inline:auto; }
  .initiatives{ grid-template-columns:1fr; }
  .init-card--wide,.init-card--third{ grid-column:span 1; }
  .stats{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .creds{ grid-template-columns:1fr; }
  .camp-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:118px; }
  .team-grid{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .team-grid--4{ grid-template-columns:1fr; }
  .team-card__body{ padding:.8rem .9rem 1rem; }
  .team-card__body h4{ font-size:.98rem; line-height:1.2; }
  .team-card .role{ font-size:.75rem; }
  .team-card .org{ font-size:.75rem; }
  .footer__grid{ grid-template-columns:1fr; }
  .founder__photo .credential{ right:0; }
  .btn{ width:100%; }
  .hero .btn-row .btn{ width:100%; }
  /* trust bar -> clean divided list on mobile */
  .trustbar .container{ flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding-block:.3rem; text-align:left; }
  .trustbar span{ width:100%; padding:.9rem .15rem; border-bottom:1px solid var(--line-navy);
    font-size:.88rem; letter-spacing:.01em; }
  .trustbar span:last-child{ border-bottom:0; }
  .trustbar svg{ width:1.15rem; height:1.15rem; }
}

/* ============================================================
   THE ALLIED TRUST CHAPTER
   #trust · #impact · #camps · #patrons · #villages · #referral
   · #hpv · #partners
   ============================================================ */

/* ---- Photo slots ------------------------------------------
   Every trust photograph sits in a [data-slot] wrapper holding the
   <img> plus a .slot-fallback label behind it. When the photograph
   has not been supplied yet the image fails, main.js marks the
   wrapper .is-empty, and the labelled placeholder shows through —
   so the layout never breaks and never shows a broken-image icon. */
[data-slot]{ position:relative; overflow:hidden; background:var(--navy-tint); }
[data-slot] img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  color:transparent;              /* no alt text painted over the placeholder */
  opacity:0;                      /* revealed by .is-filled once it decodes  */
  transition:opacity .45s var(--ease);
}
/* Images are lazy, so a slot with no file never fires `error` — the state
   that matters is "did it decode", not "did it fail". main.js adds
   .is-filled on a successful load; until then the labelled placeholder
   shows and no broken-image icon is ever painted. */
[data-slot].is-filled img{ opacity:1; }
[data-slot].is-filled .slot-fallback{ display:none; }
.slot-fallback{
  position:absolute; inset:0; z-index:0; display:grid; place-items:center; text-align:center;
  padding:.6rem; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(13,43,80,.34);
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(13,43,80,.045) 9px 18px);
}
[data-slot].is-empty img{ display:none; }
.section--navy [data-slot],.section--navy-deep [data-slot]{ background:rgba(255,255,255,.05); }
.section--navy .slot-fallback,.section--navy-deep .slot-fallback{
  color:rgba(230,178,78,.5);
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.05) 9px 18px);
}

/* ---- Shared label ---- */
.rail-label{
  display:flex; align-items:center; gap:.7rem;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--gold); margin:0 0 1.2rem;
}
.rail-label::after{ content:""; flex:1; height:1px; background:var(--line); }
.rail-label--onnavy{ color:var(--gold-bright); }
.rail-label--onnavy::after{ background:var(--line-navy); }
.center .rail-label::after{ display:none; }

/* ---- Chapter opener ---- */
.chapter-open__grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.chapter-open__tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,1rem + .6vw,1.45rem);
  color:var(--gold-bright); margin-top:.9rem;
}
.chapter-open .lead b{ color:#fff; font-weight:600; }
.quote-block--onnavy{ color:var(--gold-bright); }
.trust__list--onnavy li{ color:var(--on-navy-soft); }
.trust__list--onnavy b{ color:#fff; }
.trust__list--onnavy svg{ color:var(--gold-bright); }
.chapter-open__lede{
  font-family:var(--serif); font-size:clamp(1.2rem,1rem + .8vw,1.6rem); color:#fff;
  text-align:center; margin:clamp(3rem,6vw,4.5rem) auto clamp(1.6rem,3vw,2.2rem);
}

.dedication{ margin:0; }
.dedication__frame{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  border:9px solid rgba(255,255,255,.09); outline:1px solid rgba(230,178,78,.45); outline-offset:5px;
}
.dedication__frame img{ object-position:center top; }
.dedication figcaption{ margin-top:1.6rem; text-align:center; }
.dedication figcaption b{ display:block; font-family:var(--serif); font-size:1.12rem; color:#fff; line-height:1.3; }
.dedication figcaption span{ display:block; margin-top:.35rem; font-size:.8rem; color:var(--on-navy-soft); letter-spacing:.03em; }

/* ---- Programme navigator ----------------------------------
   Three doors into the chapter. Centred, equal height, with an
   explicit "See the programme" cue so the cards read as links
   rather than as decoration. */
.prog-nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.4rem); }
.prog-nav li{ display:flex; }
.prog-nav a{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; padding:2.5rem 1.7rem 1.9rem;
  background:rgba(255,255,255,.045); border:1px solid var(--line-navy);
  border-radius:var(--radius);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease);
}
.prog-nav a:hover{
  background:rgba(255,255,255,.085); border-color:rgba(230,178,78,.55);
  transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(0,0,0,.75);
}
.prog-nav__ico{
  display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  background:rgba(230,178,78,.13); color:var(--gold-bright);
  border:1px solid rgba(230,178,78,.28);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.prog-nav a:hover .prog-nav__ico{ background:rgba(230,178,78,.22); transform:scale(1.06); }
.prog-nav__ico svg{ width:27px; height:27px; }
.prog-nav__num{
  margin-top:1.35rem; font-size:.68rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-bright);
}
.prog-nav b{
  margin-top:.55rem; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.2rem,1.05rem + .4vw,1.4rem); color:#fff; line-height:1.25;
}
.prog-nav__desc{
  margin-top:.75rem; font-size:.9rem; line-height:1.6; color:var(--on-navy-soft);
  max-width:34ch;
}
/* margin-top:auto pins the cue to the bottom, so all three line up even
   when the descriptions run to different lengths */
.prog-nav__cue{
  margin-top:auto; padding-top:1.6rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-bright);
}
.prog-nav__cue svg{ width:1.15em; height:1.15em; transition:transform .35s var(--ease); }
.prog-nav a:hover .prog-nav__cue svg{ transform:translateX(5px); }

/* ---- Five-up stats ---- */
.stats--five{ grid-template-columns:repeat(5,1fr); }

/* ---- Camps ---- */
.camp-lead{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
.camp-lead__media{
  margin:0; aspect-ratio:16/9; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); background:var(--navy-tint);
}
.impact-highlights--light b{ color:var(--navy); }
.impact-highlights--light .n{ color:var(--gold); }
.impact-highlights--light span{ color:var(--ink-soft); }

.camp-years{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.camp-year a{ display:block; }
.camp-year figure{
  margin:0 0 .8rem; aspect-ratio:3/2; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--navy-tint); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.camp-year a:hover figure{ transform:translateY(-5px); box-shadow:var(--shadow); }
.camp-year b{ display:block; font-family:var(--serif); font-size:1.35rem; color:var(--navy); line-height:1.1; }
.camp-year span{ display:block; font-size:.78rem; color:var(--ink-mute); margin-top:.15rem; }

/* ---- Patrons -----------------------------------------------
   These cards deliberately break the site's own hover language.
   No lift, no zoom, no shadow, no crop. The stillness is the
   respect, and the contrast with every other card is intentional.
   Do not "fix" it to match.                                     */
.patrons-lead{
  margin:0; aspect-ratio:2/1; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); background:var(--sand);
}
.patrons{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3rem); }
.patron{ text-align:center; }
.patron__frame{
  aspect-ratio:4/5; background:var(--ivory);
  border:10px solid var(--white); outline:1px solid rgba(154,125,36,.55); outline-offset:4px;
  border-radius:2px; box-shadow:none;
}
/* A seer is never cropped. Letterboxing is acceptable; a cut-off
   hand mid-blessing is not. */
.patron__frame img{ object-fit:contain; }
.patron__body{ margin-top:1.7rem; }
.patron__name{ display:block; font-family:var(--serif); font-weight:600; font-size:1.28rem; color:var(--navy); line-height:1.25; }
.patron__math{ display:block; font-size:.86rem; color:var(--gold); font-weight:600; margin-top:.35rem; }
.patron__act{ display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.55; margin-top:.5rem; }


/* ---- The village ledger ---- */
.vhero{
  margin:0; position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:2/1; box-shadow:var(--shadow-lg);
}
.vhero figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2.6rem 1.6rem 1.15rem;
  font-size:.85rem; color:#EEF1F5;
  background:linear-gradient(180deg,transparent,rgba(8,29,55,.85));
}
.vstats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-navy);
  border:1px solid var(--line-navy); border-radius:var(--radius); overflow:hidden;
  margin-top:clamp(2rem,4vw,3rem);
}
.vstats li{ padding:1.5rem 1.2rem; text-align:center; background:rgba(255,255,255,.02); }
.vstats b{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,1.4rem + 1.6vw,2.8rem); color:var(--gold-bright); line-height:1; }
.vstats span{ display:block; margin-top:.5rem; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--on-navy-soft); }

.vledger{ margin-top:clamp(2.5rem,5vw,4rem); }
.vledger__head{
  display:flex; flex-wrap:wrap; gap:1.4rem 2rem; align-items:flex-end; justify-content:space-between;
  padding-bottom:1.3rem; border-bottom:1px solid var(--line-navy); margin-bottom:.4rem;
}
.vledger__note{ font-size:.85rem; color:var(--on-navy-soft); max-width:46ch; margin-top:.4rem; }
.vledger__note b{ color:var(--gold-bright); font-weight:600; }
.vledger__empty{ padding:2.5rem 0; text-align:center; color:var(--on-navy-soft); font-size:.92rem; }
.vledger__foot{ margin-top:2rem; font-size:.82rem; line-height:1.65; color:var(--on-navy-soft); max-width:78ch; }

.vfilter{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.vsearch{ position:relative; display:inline-flex; align-items:center; }
.vsearch svg{ position:absolute; left:.85rem; width:1rem; height:1rem; color:var(--on-navy-soft); pointer-events:none; }
.vsearch input{
  font-family:var(--sans); font-size:.88rem; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid var(--line-navy);
  border-radius:100px; padding:.62rem 1rem .62rem 2.4rem; width:min(230px,52vw);
}
.vsearch input::placeholder{ color:var(--on-navy-soft); }
.vsearch input:focus{ outline:none; border-color:var(--gold-bright); background:rgba(255,255,255,.1); }
.vchips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.vchip{
  font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--on-navy-soft);
  background:transparent; border:1px solid var(--line-navy); border-radius:100px; padding:.5rem .95rem;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.vchip:hover{ color:#fff; border-color:rgba(255,255,255,.35); }
.vchip.is-on{ color:var(--navy); background:var(--gold-bright); border-color:var(--gold-bright); }

.vcluster{ border-bottom:1px solid var(--line-navy); }
.vcluster[hidden]{ display:none; }
.vcluster__sum{
  display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none;
  padding:1.15rem .2rem; transition:color .25s var(--ease);
}
.vcluster__sum::-webkit-details-marker{ display:none; }
.vcluster__sum:hover .vcluster__name{ color:var(--gold-bright); }
.vcluster__name{ font-family:var(--serif); font-size:clamp(1.2rem,1rem + .5vw,1.5rem); color:#fff; font-weight:600; transition:color .25s var(--ease); }
.vcluster__count{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--on-navy-soft); margin-left:auto; }
.vcluster__chev{ width:1rem; height:1rem; color:var(--gold-bright); flex-shrink:0; transition:transform .3s var(--ease); }
.vcluster[open] .vcluster__chev{ transform:rotate(180deg); }
.vcluster__body{
  padding:.2rem 0 1.8rem; margin-left:.4rem; padding-left:1.1rem;
  border-left:1px solid rgba(230,178,78,.3);   /* the parent -> hamlet hierarchy, in one line */
  content-visibility:auto; contain-intrinsic-size:auto 400px;
}
.vcluster__desc{ font-size:.87rem; color:var(--on-navy-soft); margin-bottom:1.2rem; }
.vrows{ display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem 2rem; }
.vrow{ display:flex; align-items:center; gap:1.1rem; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
.vrow[hidden]{ display:none; }
/* big enough to actually read the scene — the row's job is to show the
   place the team went to, which a 52px icon could not do */
.vrow__thumb{
  flex:0 0 auto; width:128px; height:96px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05); border:1px solid var(--line-navy);
}
.vrow__thumb.is-clickable{ cursor:zoom-in; transition:border-color .25s var(--ease); }
.vrow__thumb.is-clickable:hover{ border-color:var(--gold-bright); }
.vrow__body{ flex:1; min-width:0; }
.vrow__name{ display:block; font-size:1.05rem; color:#fff; font-weight:500; line-height:1.25; }
.vrow__badge{
  display:inline-block; margin-top:.28rem; font-size:.64rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; padding:.2rem .5rem; border-radius:4px;
}
.vrow__badge--village{ color:#D9E3EF; background:rgba(255,255,255,.1); }
.vrow__badge--tanda{ color:var(--gold-bright); background:rgba(230,178,78,.16); }
.vrow__badge--ward{ color:#CFE0C6; background:rgba(137,153,82,.24); }

/* ---- Referral chain ---- */
.steps--three{ grid-template-columns:repeat(3,1fr); }
.referral-media{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.6rem; }
.referral-media figure{
  margin:0; aspect-ratio:3/2; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--sand); box-shadow:var(--shadow-sm);
}

/* ---- HPV ---- */
.hpv__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.hpv__facts{ display:flex; flex-wrap:wrap; gap:1rem 3rem; margin:1.8rem 0; }
.hpv__facts b{ display:block; font-family:var(--serif); font-size:2.2rem; color:var(--gold); line-height:1; }
.hpv__facts span{ display:block; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-top:.4rem; }
.hpv__gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.hpv__gallery li{ margin:0; }
/* the first frame runs full width — the drive's banner is the establishing shot */
.hpv__gallery li:nth-child(2){ grid-column:span 2; }
.hpv__gallery figure{
  margin:0; height:100%; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--sand); box-shadow:var(--shadow-sm); cursor:zoom-in;
}
.hpv__gallery li:nth-child(2) figure{ aspect-ratio:2/1; }
.hpv__note{
  margin-top:1rem; font-size:.78rem; line-height:1.6; color:var(--ink-mute);
  padding-left:.9rem; border-left:2px solid var(--line-strong);
}
.hpv__partners{ font-size:.88rem; color:var(--ink-soft); margin-top:1.4rem; }
.hpv__partners b{ color:var(--navy); }
.dose{ border-top:1px solid var(--line); padding-top:1.7rem; }
/* dots on their own row with the connector between them; labels sit BELOW,
   so the line never crosses the text */
.dose__track{ display:flex; align-items:flex-start; gap:0; }
.dose__dot{ position:relative; flex:1; padding-top:2.1rem; }
.dose__dot::before{
  content:""; position:absolute; left:0; top:2px; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--gold); background:transparent; z-index:1;
}
.dose__dot.is-done::before{ background:var(--gold); }
.dose__dot:not(:last-child)::after{
  content:""; position:absolute; left:17px; right:.6rem; top:8px; height:2px; z-index:0;
  background:linear-gradient(90deg,var(--gold),rgba(154,125,36,.3));
}
/* both doses given — the connector runs solid rather than fading out */
.dose__track:has(.dose__dot:last-child.is-done) .dose__dot:not(:last-child)::after{ background:var(--gold); }
.dose__dot b{ display:block; font-size:.95rem; color:var(--navy); font-weight:700; }
.dose__dot span{ display:block; font-size:.8rem; color:var(--ink-mute); margin-top:.1rem; }
.dose__note{ font-size:.84rem; color:var(--ink-soft); line-height:1.6; margin-top:1.1rem; }

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:clamp(1rem,5vw,3rem);
  background:rgba(8,29,55,.93); opacity:0; visibility:hidden; transition:opacity .3s var(--ease),visibility .3s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:82vh; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
.lightbox__cap{ margin-top:1rem; text-align:center; font-size:.88rem; color:var(--on-navy-soft); }
.lightbox__close{
  position:absolute; top:1.2rem; right:1.2rem; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid var(--line-navy);
}
.lightbox__close:hover{ background:rgba(255,255,255,.22); }
.lightbox__close svg{ width:20px; height:20px; }

/* ---- Chapter responsive ---- */
@media (max-width:1024px){
  .chapter-open__grid,.camp-lead,.hpv__grid{ grid-template-columns:1fr; }
  .dedication{ max-width:340px; margin-inline:auto; }
  .prog-nav{ grid-template-columns:1fr 1fr; }
  .stats--five{ grid-template-columns:repeat(3,1fr); }
  .patrons{ grid-template-columns:repeat(2,1fr); }
  .steps--three{ grid-template-columns:1fr; }
  .vrows{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .vstats,.referral-media{ grid-template-columns:1fr 1fr; }
  .camp-years{ grid-template-columns:1fr 1fr; }
  .stats--five{ grid-template-columns:1fr 1fr; }
  .patrons{ grid-template-columns:1fr; max-width:330px; margin-inline:auto; }
  .vledger__head{ flex-direction:column; align-items:stretch; }
  .vfilter{ justify-content:flex-start; }
  .vsearch input{ width:100%; }
  .referral-media figure:last-child{ grid-column:span 2; }
  .vhero,.patrons-lead{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .prog-nav a:hover,.camp-year a:hover figure{ transform:none; }
  .prog-nav a:hover .prog-nav__ico{ transform:none; }
  .prog-nav a:hover .prog-nav__cue svg{ transform:none; }
}

/* ---- Awareness: the seven signs ---- */
.signs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.sign{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.6rem;
}
.sign__ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  background:var(--gold-soft); color:var(--gold); margin-bottom:1.1rem;
}
.sign__ico svg{ width:24px; height:24px; }
.sign h3{ font-family:var(--sans); font-weight:700; font-size:.98rem; color:var(--navy); line-height:1.35; margin-bottom:.45rem; }
.sign p{ font-size:.86rem; color:var(--ink-soft); line-height:1.55; }
.signs__foot{
  margin-top:1.8rem; padding:1.5rem 1.7rem; border-radius:var(--radius);
  background:var(--navy-tint); border-left:3px solid var(--gold);
  font-size:.93rem; line-height:1.7; color:var(--ink-soft); max-width:82ch;
}
@media (max-width:1024px){ .signs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .signs{ grid-template-columns:1fr; } }


/* ---- Camp stations ---- */
.stations{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.4rem); }
.station figure{
  margin:0 0 .75rem; aspect-ratio:3/2; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--navy-tint); box-shadow:var(--shadow-sm); cursor:zoom-in;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.station figure:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.station b{ font-family:var(--sans); font-weight:700; font-size:.95rem; color:var(--navy); }


/* ---- Patrons: moments, not portraits ------------------------
   The archive holds ceremonial photographs, so the unit here is the
   occasion. Still no hover motion — the stillness is the respect. */
.patrons-lead{ position:relative; }
.patrons-lead figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:2.6rem 1.6rem 1.2rem;
  font-size:.88rem; color:#EEF1F5;
  background:linear-gradient(180deg,transparent,rgba(8,29,55,.85));
}
.moments{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.5vw,2.2rem); }
.moment figure{
  margin:0 0 1rem; aspect-ratio:3/2; overflow:hidden;
  background:var(--ivory);
  border:8px solid var(--white); outline:1px solid rgba(154,125,36,.45); outline-offset:3px;
  border-radius:2px; box-shadow:none; cursor:zoom-in;
}
.moment b{ display:block; font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--navy); line-height:1.25; }
.moment span{ display:block; font-size:.85rem; color:var(--ink-soft); line-height:1.55; margin-top:.35rem; }

/* ---- Responsive for the new rails ---- */
@media (max-width:1024px){
  .stations{ grid-template-columns:1fr 1fr; }
  .moments{ grid-template-columns:1fr 1fr; }
  .hpv__gallery{ grid-template-columns:1fr 1fr; }
  .hpv__gallery li:nth-child(2){ grid-column:span 2; }
}
@media (max-width:560px){
  .prog-nav{ grid-template-columns:1fr; }
  .vrow__thumb{ width:96px; height:72px; }
  .stations{ grid-template-columns:1fr 1fr; }
  .moments{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .station figure:hover{ transform:none; }
}