/* ============================================================
   CHSS — Center for Health Social Services
   Single clean stylesheet — no duplicates
   Navy #0B1F3A | Red #C0261D | Cream #F5F4EF | White #fff
   Fraunces (display) / Inter (body)
   ============================================================ */

:root {
  --navy:      #0B1F3A;
  --navy-mid:  #162D52;
  --red:       #C0261D;
  --red-dk:    #9E1E16;
  --cream:     #F5F4EF;
  --warm-grey: #E8E6DF;
  --text:      #2C2C2C;
  --muted:     #5C5C5C;
  --white:     #FFFFFF;
  --font-d: 'Fraunces', Georgia, serif;
  --font-b: 'Inter', system-ui, sans-serif;
  --max-w: 1200px;
  --px: clamp(18px, 5vw, 64px);
  --py: clamp(56px, 8vw, 104px);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: 0.28s;
}

/* ── Reset ───────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body  { font-family:var(--font-b); color:var(--text); background:var(--white); line-height:1.65; overflow-x:hidden }
img   { display:block; max-width:100%; height:auto }
a     { color:inherit; text-decoration:none }
ul    { list-style:none }
button,input,select,textarea { font-family:inherit }
button { cursor:pointer }

/* ── Layout ──────────────────────────────── */
.container { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--px) }

/* ── Typography helpers ──────────────────── */
.section-label {
  display:block; font-size:0.67rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.section-label.light { color:rgba(255,255,255,0.5) }
.section-headline {
  font-family:var(--font-d); font-size:clamp(1.75rem,3.8vw,2.9rem);
  font-weight:700; line-height:1.1; letter-spacing:-0.02em; color:var(--navy);
}
.section-headline.light { color:var(--white) }

/* ── Buttons ─────────────────────────────── */
.btn-primary {
  display:inline-block; background:var(--red); color:var(--white);
  font-size:0.84rem; font-weight:600; letter-spacing:0.04em;
  padding:13px 26px; border:2px solid var(--red);
  transition:background var(--t) var(--ease);
}
.btn-primary:hover { background:var(--red-dk); border-color:var(--red-dk) }
.btn-ghost {
  display:inline-block; background:transparent; color:var(--white);
  font-size:0.84rem; font-weight:500; letter-spacing:0.04em;
  padding:13px 26px; border:1.5px solid rgba(255,255,255,0.38);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.btn-ghost:hover { border-color:var(--white); background:rgba(255,255,255,0.08) }

/* ── Scroll reveal ───────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s var(--ease),transform 0.6s var(--ease) }
.reveal.in { opacity:1; transform:translateY(0) }


/* ══════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════ */
.nav-wrap {
  position:fixed; top:0; left:0; width:100%; z-index:900;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.nav-wrap.scrolled {
  background:rgba(11,31,58,0.97);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,0.07);
}
.nav-inner {
  display:flex; align-items:center;
  max-width:var(--max-w); margin-inline:auto;
  padding:0 var(--px); height:66px; gap:8px;
}
/* Logo link — video clipped to 40×40 */
.nav-logo {
  display:flex; align-items:center; gap:10px;
  margin-right:auto; flex-shrink:0; text-decoration:none;
}
.nav-logo-video-wrap {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-logo-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain;
  display: block;
}
.nav-org-name {
  font-family:var(--font-d); font-size:0.8rem; font-weight:600;
  color:var(--white); line-height:1.2; max-width:160px;
}
/* Nav links */
.nav-links { display:flex; align-items:center; list-style:none; gap:0 }
.nav-links a {
  display:block; color:rgba(255,255,255,0.75);
  font-size:0.74rem; font-weight:500;
  padding:7px 8px; white-space:nowrap;
  transition:color var(--t) var(--ease);
}
.nav-links a:hover { color:var(--white) }
.nav-links .nav-cta {
  background:var(--red); color:var(--white);
  padding:8px 14px; font-weight:600; margin-left:6px;
}
.nav-links .nav-cta:hover { background:var(--red-dk) }
.nav-links .nav-donate-link {
  color:#F5C47B !important; font-weight:600;
  border:1px solid rgba(245,196,123,0.35);
  padding:6px 10px; margin-left:2px;
  transition:background var(--t),border-color var(--t);
}
.nav-links .nav-donate-link:hover {
  background:rgba(245,196,123,0.1);
  border-color:rgba(245,196,123,0.7);
}
/* Burger */
.nav-burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; background:none; border:none; padding:8px; flex-shrink:0;
}
.nav-burger span {
  display:block; width:22px; height:2px;
  background:var(--white); border-radius:1px;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}


/* ══════════════════════════════════════════
   HERO SLIDESHOW
   Structural model: .hero is a column flexbox.
   1) .hero-nav-spacer is a fixed, non-negotiable
      reservation of space below the fixed header —
      this is what guarantees the header can never
      overlap the hero copy, on any viewport.
   2) .hero-body fills the remaining space and
      bottom-aligns .hero-content within it, which
      keeps the existing "content sits low, image
      breathes above it" composition intact.
══════════════════════════════════════════ */
:root { --nav-h:66px }

.hero {
  position:relative; width:100%;
  min-height:100vh; min-height:100svh;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.hero-slides { position:absolute; inset:0; z-index:0; pointer-events:none }
.hero-slide {
  position:absolute; inset:0; opacity:0;
  visibility:hidden; transition:opacity 1.1s ease;
}
.hero-slide.active { opacity:1; z-index:1; visibility:visible }
.hero-slide img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
}
.hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top,rgba(11,31,58,0.62) 0%,rgba(11,31,58,0) 55%),linear-gradient(155deg,rgba(11,31,58,0.50) 0%,rgba(11,31,58,0.30) 55%,rgba(11,31,58,0.10) 100%);
  pointer-events:none;
}
/* Guaranteed clearance under the fixed nav (66px) plus a comfortable gap */
.hero-nav-spacer {
  flex:0 0 auto;
  height:calc(var(--nav-h) + clamp(28px,6vh,64px));
}
/* Flexible zone — content is bottom-anchored inside whatever space remains */
.hero-body {
  flex:1 1 auto;
  display:flex; align-items:flex-end; width:100%;
}
.hero-content {
  position:relative; z-index:3;
  max-width:var(--max-w); margin-inline:auto;
  padding-inline:var(--px);
  padding-bottom:clamp(56px,8vw,92px);
  width:100%;
}
.hero-eyebrow {
  font-size:0.64rem; font-weight:600; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:18px;
}
.hero-headline {
  font-family:var(--font-d); font-size:clamp(2rem,5vw,4.2rem);
  font-weight:700; line-height:1.08; letter-spacing:-0.03em;
  color:var(--white); margin-bottom:20px; max-width:900px;
}
.hero-headline em { font-style:italic; color:#F5C47B }
.hero-subtext {
  font-size:clamp(0.88rem,1.4vw,0.98rem); color:rgba(255,255,255,0.68);
  max-width:440px; margin-bottom:32px; line-height:1.75;
}
.hero-actions { display:flex; gap:11px; flex-wrap:wrap }
.hero-dots {
  position:absolute; bottom:24px; right:var(--px);
  display:flex; gap:8px; z-index:4; align-items:center;
}
.hero-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.28); border:none; padding:0; cursor:pointer;
  transition:background 0.28s,transform 0.28s;
}
.hero-dot.active { background:var(--white); transform:scale(1.35) }
.hero-scroll-indicator { position:absolute; bottom:24px; left:var(--px); z-index:3 }
@media (max-height:640px) {
  .hero-nav-spacer { height:calc(var(--nav-h) + 32px) }
}
.scroll-line {
  width:1px; height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.48),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.8;transform:scaleY(1) }
  50%      { opacity:.28;transform:scaleY(.5) }
}


/* ══════════════════════════════════════════
   WHO WE ARE
══════════════════════════════════════════ */
.who-wrap {
  background:var(--white); padding-block:var(--py);
  border-bottom:1px solid var(--warm-grey);
}
.who-grid {
  display:grid; grid-template-columns:200px 1fr;
  gap:clamp(24px,5vw,72px); align-items:start; margin-bottom:56px;
}
.who-left .section-headline {
  font-size:clamp(0.95rem,1.6vw,1.35rem);
  line-height:1.65; letter-spacing:-0.01em;
}
.who-lead {
  font-family:var(--font-d); font-size:clamp(0.96rem,1.6vw,1.15rem);
  font-weight:400; line-height:1.65; color:#1A1A1A; margin-bottom:14px;
}
.who-body { font-size:0.9rem; line-height:1.8; color:var(--text-muted); margin-bottom:20px }
.who-reg {
  display:inline-block; font-size:0.68rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted);
  border:1px solid var(--warm-grey); padding:7px 13px;
}
.vm-row {
  display:grid; grid-template-columns:1fr auto 1fr;
  border-top:1px solid var(--warm-grey); padding-top:44px; align-items:start;
}
.vm-item { padding:0 clamp(12px,2.5vw,44px) }
.vm-item:first-child { padding-left:0 }
.vm-item:last-child  { padding-right:0 }
.vm-label {
  font-size:0.64rem; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
}
.vm-statement {
  font-family:var(--font-d); font-style:italic;
  font-size:clamp(0.98rem,1.6vw,1.3rem);
  font-weight:400; line-height:1.48; color:var(--navy); border:none;
}
.vm-divider { width:1px; min-height:80px; background:var(--warm-grey); align-self:stretch }


/* ══════════════════════════════════════════
   AREAS OF WORK
══════════════════════════════════════════ */
.work-wrap { background:var(--navy); padding-block:var(--py) }
.work-header { max-width:var(--max-w); margin-inline:auto; padding-inline:var(--px); margin-bottom:48px }
.work-header .section-headline { margin-top:10px }
.work-grid {
  max-width:var(--max-w); margin-inline:auto; padding-inline:var(--px);
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,0.1);
}
.work-item {
  padding:32px 24px;
  border-right:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:relative; overflow:hidden;
  transition:background var(--t) var(--ease);
}
.work-item:nth-child(3n) { border-right:none }
.work-item:hover { background:rgba(255,255,255,0.05) }
.work-item--wide {
  grid-column:span 2; display:grid;
  grid-template-columns:1fr 1fr; gap:20px; align-items:center;
}
.work-number {
  font-family:var(--font-d); font-size:3.5rem; font-weight:700;
  line-height:1; color:rgba(255,255,255,0.05);
  position:absolute; top:10px; right:14px; pointer-events:none; user-select:none;
}
.work-body h3 {
  font-family:var(--font-d); font-size:1.02rem; font-weight:600;
  color:var(--white); margin-bottom:8px; line-height:1.25;
}
.work-body p { font-size:0.83rem; line-height:1.75; color:rgba(255,255,255,0.52) }
.work-image-accent { overflow:hidden; border-radius:2px }
.work-image-accent img {
  width:100%; height:180px; object-fit:cover; object-position:center top;
  filter:brightness(0.7) saturate(0.85);
  transition:transform 0.5s var(--ease),filter 0.4s var(--ease);
}
.work-item:hover .work-image-accent img { transform:scale(1.04); filter:brightness(0.84) }
.work-image-accent--right { order:1 }


/* ══════════════════════════════════════════
   FEATURED PROJECT
══════════════════════════════════════════ */
.eccd-wrap { display:grid; grid-template-columns:1fr 1fr; min-height:520px }
.eccd-image-col { position:relative; overflow:hidden }
.eccd-main-image { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.7s var(--ease) }
.eccd-wrap:hover .eccd-main-image { transform:scale(1.02) }
.eccd-content-col {
  background:var(--cream); padding:clamp(32px,5vw,70px);
  display:flex; flex-direction:column; justify-content:center;
}
.eccd-content-col .section-headline { margin-bottom:16px; margin-top:10px }
.eccd-body { font-size:0.87rem; line-height:1.8; color:var(--text-muted); margin-bottom:12px }
.eccd-logos {
  display:flex; align-items:center; gap:16px;
  padding:16px 0; border-top:1px solid var(--warm-grey); border-bottom:1px solid var(--warm-grey);
  margin-bottom:22px;
}
.eccd-logo-item img { height:44px; width:auto; object-fit:contain }
.eccd-training-cta { display:flex; flex-direction:column; gap:14px }
.training-offer {
  background:var(--white); border:1px solid var(--warm-grey);
  border-left:3px solid var(--navy); padding:14px 18px;
}
.training-label {
  font-size:0.6rem; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:4px;
}
.training-title { font-size:0.84rem; font-weight:600; color:var(--navy); margin-bottom:6px; line-height:1.35 }
.training-price { font-family:var(--font-d); font-size:1.4rem; font-weight:700; color:var(--navy) }
.training-price span { font-family:var(--font-b); font-size:0.72rem; font-weight:400; color:var(--text-muted); margin-left:4px }


/* ══════════════════════════════════════════
   PROJECTS IN ACTION
══════════════════════════════════════════ */
.projects-wrap { background:var(--white); padding-block:var(--py); border-top:1px solid var(--warm-grey) }
.projects-header { margin-bottom:36px }
.projects-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px }
.project-card { background:var(--cream); overflow:hidden; display:flex; flex-direction:column }
.project-card--large { grid-column:span 7 }
.project-card:not(.project-card--large) { grid-column:span 5 }
.projects-grid .project-card:nth-child(n+3) { grid-column:span 4 }
.project-card-image { overflow:hidden; flex-shrink:0; aspect-ratio:16/9 }
.project-card--large .project-card-image { aspect-ratio:16/10 }
.project-card-image img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 0.5s var(--ease);
}
.project-card:hover .project-card-image img { transform:scale(1.04) }
.project-card-body { padding:18px 20px 22px; flex:1 }
.project-tag { font-size:0.6rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-bottom:6px }
.project-card h3 { font-family:var(--font-d); font-size:1rem; font-weight:600; color:var(--navy); margin-bottom:6px; line-height:1.25 }
.project-card p  { font-size:0.82rem; line-height:1.7; color:var(--text-muted) }
/* French Embassy badge */
.project-funder-logo { margin-top:10px }
.fr-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--warm-grey); padding:5px 10px; background:var(--white) }
.fr-flag-sm { display:flex; width:26px; height:18px; overflow:hidden; border-radius:2px; flex-shrink:0 }
.fr-flag-sm span,.fr-flag-lg span { flex:1; display:block }
.fr-blue         { background:#002395 }
.fr-white-stripe { background:#fff; border-left:1px solid #ddd; border-right:1px solid #ddd }
.fr-red          { background:#ED2939 }
.fr-badge-text strong { display:block; font-size:0.76rem; font-weight:700; color:var(--navy); line-height:1.2 }
.fr-badge-text span   { display:block; font-size:0.64rem; color:var(--text-muted) }


/* ══════════════════════════════════════════
   IMPACT
══════════════════════════════════════════ */
.impact-wrap { background:var(--navy); padding-block:var(--py) }
.impact-wrap .section-headline { color:var(--white); margin-top:10px; margin-bottom:8px }
.impact-source-note { font-size:0.78rem; color:rgba(255,255,255,0.36); margin-bottom:48px; max-width:500px; line-height:1.6 }
.impact-figures {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.1);
  border-left:1px solid rgba(255,255,255,0.1); margin-bottom:64px;
}
.impact-item {
  padding:32px 24px;
  border-right:1px solid rgba(255,255,255,0.1);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.impact-number {
  display:block; font-family:var(--font-d);
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  font-weight:700; color:#F5C47B; line-height:1; margin-bottom:7px;
}
.impact-label { font-size:0.76rem; line-height:1.55; color:rgba(255,255,255,0.48) }
.states-wrap { padding-top:48px; border-top:1px solid rgba(255,255,255,0.1) }
.states-wrap .section-label { margin-bottom:20px }
.states-grid { display:flex; flex-wrap:wrap }
.state-name {
  font-family:var(--font-d); font-size:clamp(0.88rem,1.5vw,1.15rem);
  font-weight:400; color:rgba(255,255,255,0.7);
  padding:10px 22px 10px 0; margin-right:22px;
  border-bottom:1px solid rgba(255,255,255,0.12); white-space:nowrap;
}


/* ══════════════════════════════════════════
   OUR PARTNERS
══════════════════════════════════════════ */
.partners-wrap { background:var(--cream); padding-block:clamp(48px,7vw,88px); border-top:1px solid var(--warm-grey) }
.partners-headline { margin-top:10px; margin-bottom:40px }
.partners-row { display:flex; align-items:stretch; border:1px solid var(--warm-grey); gap:1px; background:var(--warm-grey); overflow:hidden }
.partner-item { flex:1; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 14px; text-align:center; gap:10px; transition:background var(--t) var(--ease); min-width:0 }
.partner-item:hover { background:#FAFAF8 }
.partner-logo-zone { height:60px; width:100%; display:flex; align-items:center; justify-content:center }
.partner-logo-zone img { max-height:52px; max-width:110px; width:auto; object-fit:contain }
.partner-name { font-size:0.65rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; line-height:1.4 }
.fr-logo-lg { display:flex; align-items:center; gap:9px; justify-content:center }
.fr-flag-lg { display:flex; width:40px; height:28px; overflow:hidden; border-radius:3px; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,0.12) }
.fr-text-lg strong { display:block; font-size:0.82rem; font-weight:700; color:var(--navy); line-height:1.2; text-align:left }
.fr-text-lg em     { display:block; font-size:0.65rem; font-style:normal; color:var(--text-muted); text-align:left }
.phil-logo { display:flex; flex-direction:column; align-items:center; gap:7px }
.phil-icon { width:48px; height:48px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center }
.phil-word { font-family:var(--font-d); font-size:0.98rem; font-weight:700; font-style:italic; color:var(--navy) }
.phil-sub  { font-size:0.58rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.12em; font-weight:600 }


/* ══════════════════════════════════════════
   FOUNDER SECTION
══════════════════════════════════════════ */
.founder-wrap { background:var(--cream); padding-block:var(--py); border-top:1px solid var(--warm-grey) }
.founder-inner {
  display:grid; grid-template-columns:300px 1fr;
  gap:clamp(40px,6vw,96px); align-items:start;
}
.founder-image-col { position:relative; z-index:0 }
.founder-image-col::after {
  content:''; position:absolute;
  inset:14px -14px -14px 14px;
  background:var(--navy); border-radius:3px; z-index:-1;
}
.founder-photo-frame {
  overflow:hidden; border-radius:3px;
  box-shadow:0 8px 32px rgba(11,31,58,0.18);
  position:relative; z-index:1;
}
.founder-photo-frame img {
  width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:center 10%; display:block;
}
.founder-content-col .section-headline { margin-top:10px; margin-bottom:6px }
.founder-role-tag {
  display:inline-block; font-size:0.68rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--white); background:var(--red); padding:5px 14px; margin-bottom:28px;
}
.founder-bio { font-size:0.88rem; line-height:1.85; color:var(--text-muted); margin-bottom:12px }


/* ══════════════════════════════════════════
   BOARD MEMBERS
   Chairman: featured full-width card (navy)
   Others: clean 2-col card grid
══════════════════════════════════════════ */
.people-wrap { background:var(--white); padding-block:var(--py); border-top:1px solid var(--warm-grey) }
.people-headline { margin-top:8px; margin-bottom:40px }

/* Chairman featured card */
.chairman-featured {
  display:grid; grid-template-columns:180px 1fr;
  gap:36px; align-items:start;
  background:var(--navy); padding:40px;
  margin-bottom:3px;
}
.chairman-photo-col { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center }
.chairman-photo {
  width:150px; height:150px; border-radius:50%;
  overflow:hidden; border:4px solid rgba(255,255,255,0.18);
}
.chairman-photo img { width:100%; height:100%; object-fit:cover; object-position:center top }
.chairman-badge {
  display:inline-block; font-size:0.58rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  background:var(--red); color:var(--white); padding:4px 12px; border-radius:2px;
}
.chairman-text .person-name  { color:var(--white) }
.chairman-text .person-role  { color:rgba(255,255,255,0.42) }
.chairman-text .person-bio   { color:rgba(255,255,255,0.65) }
.chairman-text .read-more-btn { color:rgba(255,255,255,0.42) }
.chairman-text .read-more-btn:hover { color:var(--white) }

/* Regular board grid — 2 columns */
.board-members-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:3px; background:var(--warm-grey); border:1px solid var(--warm-grey);
}
/* Individual card */
.board-card {
  background:var(--white); padding:32px 28px;
  display:flex; flex-direction:column;
  transition:background var(--t) var(--ease);
}
.board-card:hover { background:#FCFCFB }

/* Photo circle — 88px */
.board-photo {
  width:88px; height:88px; border-radius:50%;
  overflow:hidden; border:3px solid var(--warm-grey);
  background:var(--warm-grey); margin-bottom:18px; flex-shrink:0;
}
.board-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block }

/* Shared name/role/bio/read-more */
.person-name {
  font-family:var(--font-d); font-size:1.05rem; font-weight:700;
  color:var(--navy); margin-bottom:3px; line-height:1.2;
}
.person-role {
  font-size:0.63rem; font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
}
.person-bio { font-size:0.83rem; line-height:1.78; color:var(--text-muted); margin-bottom:5px }
.bio-extra   { display:none }
.bio-extra.open { display:block }
.read-more-btn {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:10px; background:none; border:none; padding:0;
  font-size:0.68rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--navy); cursor:pointer;
  transition:color var(--t) var(--ease);
}
.read-more-btn:hover { color:var(--red) }
.read-more-btn svg { transition:transform var(--t) var(--ease) }
.read-more-btn.open svg { transform:rotate(180deg) }


/* ══════════════════════════════════════════
   DONATE SECTION
══════════════════════════════════════════ */
.donate-wrap {
  background:var(--navy); padding-block:var(--py);
  position:relative; overflow:hidden;
}
.donate-wrap::before {
  content:''; position:absolute;
  width:600px; height:600px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.05);
  top:-200px; right:-200px; pointer-events:none;
}
.donate-wrap::after {
  content:''; position:absolute;
  width:400px; height:400px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.04);
  bottom:-150px; left:-100px; pointer-events:none;
}
/* Two-col layout inside container */
.donate-layout {
  display:grid; grid-template-columns:1fr 440px;
  gap:clamp(40px,5vw,80px); align-items:center;
  position:relative; z-index:1;
}
/* Left: message */
.donate-headline {
  font-family:var(--font-d); font-size:clamp(1.7rem,3.2vw,2.6rem);
  font-weight:700; line-height:1.14; color:var(--white);
  margin-bottom:14px; letter-spacing:-0.025em;
}
.donate-subtext { font-size:0.88rem; line-height:1.8; color:rgba(255,255,255,0.56); margin-bottom:28px }
.donate-promises { list-style:none; display:flex; flex-direction:column; gap:11px }
.donate-promises li { display:flex; align-items:flex-start; gap:10px; font-size:0.84rem; color:rgba(255,255,255,0.7); line-height:1.5 }
.donate-promises li svg { color:#4ade80; flex-shrink:0; margin-top:1px }
/* Right: card */
.donate-card {
  background:var(--white); padding:32px 28px;
  box-shadow:0 24px 64px rgba(0,0,0,0.35);
}
.donate-card-title {
  font-family:var(--font-d); font-size:1.25rem;
  font-weight:700; color:var(--navy); margin-bottom:3px;
}
.donate-card-sub { font-size:0.76rem; color:var(--text-muted); margin-bottom:20px }
/* 3-col amount grid */
.donate-amounts {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;
}
.donate-amt-btn {
  border:1.5px solid var(--warm-grey); background:var(--cream); color:var(--navy);
  font-family:var(--font-b); font-weight:600; font-size:0.84rem;
  padding:12px 6px; cursor:pointer; border-radius:3px;
  transition:all var(--t) var(--ease); white-space:nowrap;
}
.donate-amt-btn:hover { border-color:var(--navy); background:rgba(11,31,58,0.06) }
.donate-amt-btn.active { border-color:var(--red); background:rgba(192,38,29,0.07); color:var(--red) }
/* Custom input */
.donate-custom-row { display:none; margin-bottom:12px }
.donate-custom-row label {
  display:block; font-size:0.67rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px;
}
.donate-custom-row input {
  width:100%; border:1.5px solid var(--warm-grey); padding:10px 12px;
  font-family:var(--font-b); font-size:0.92rem; color:var(--text);
  outline:none; border-radius:3px; transition:border-color var(--t) var(--ease);
}
.donate-custom-row input:focus { border-color:var(--navy) }
/* Impact note */
.donate-impact-note {
  font-size:0.76rem; font-weight:500; color:var(--navy);
  background:rgba(11,31,58,0.06); border-left:3px solid var(--navy);
  padding:8px 12px; margin-bottom:16px; line-height:1.55; border-radius:0 3px 3px 0;
}
/* Main CTA */
.donate-cta-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:var(--red); color:var(--white);
  font-family:var(--font-b); font-weight:700; font-size:0.94rem;
  padding:14px; border-radius:3px; text-align:center;
  transition:background var(--t) var(--ease),transform 0.18s;
  box-shadow:0 4px 16px rgba(192,38,29,0.28);
}
.donate-cta-btn:hover { background:var(--red-dk); transform:translateY(-1px) }
/* Divider */
.donate-divider {
  display:flex; align-items:center; gap:12px; margin:12px 0;
  color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em;
}
.donate-divider::before,.donate-divider::after { content:''; flex:1; height:1px; background:var(--warm-grey) }
/* WhatsApp option */
.donate-wa-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; background:#25D366; color:var(--white);
  font-family:var(--font-b); font-weight:600; font-size:0.84rem;
  padding:12px; border-radius:3px; text-align:center;
  transition:background var(--t) var(--ease);
}
.donate-wa-btn:hover { background:#1EB457 }
/* Secure note */
.donate-secure-note { font-size:0.68rem; color:var(--text-muted); text-align:center; margin-top:10px; line-height:1.5 }
.donate-secure-note a { color:var(--navy); font-weight:600 }


/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
.contact-wrap { background:var(--navy); padding-block:var(--py) }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:start }
.contact-headline {
  font-family:var(--font-d); font-size:clamp(1.4rem,2.8vw,2.1rem);
  font-weight:700; line-height:1.2; color:var(--white); margin-bottom:12px; letter-spacing:-0.02em;
}
.contact-subtext { font-size:0.86rem; line-height:1.75; color:rgba(255,255,255,0.48); margin-bottom:28px }
.contact-details { display:flex; flex-direction:column; gap:16px; margin-bottom:28px }
.contact-detail-row { display:flex; gap:10px; align-items:flex-start }
.detail-icon { font-size:0.9rem; color:rgba(255,255,255,0.26); flex-shrink:0; margin-top:2px }
.contact-detail-row strong { display:block; font-size:0.65rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.34); margin-bottom:3px }
.contact-detail-row p { font-size:0.84rem; line-height:1.6; color:rgba(255,255,255,0.6) }
.contact-detail-row a { color:rgba(255,255,255,0.6); transition:color var(--t) var(--ease) }
.contact-detail-row a:hover { color:var(--white) }
.social-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px }
.social-link { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.5); transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease) }
.social-link:hover { border-color:var(--white); color:var(--white); background:rgba(255,255,255,0.08) }
.social-link--wa { width:auto; padding:0 12px; gap:6px; font-size:0.72rem; font-weight:600; background:#25D366; border-color:#25D366; color:var(--white) }
.social-link--wa:hover { background:#1EB457; border-color:#1EB457; color:var(--white) }
.enquiry-form { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); padding:clamp(20px,3.5vw,38px) }
.form-heading { font-family:var(--font-d); font-size:1.15rem; font-weight:600; color:var(--white); margin-bottom:20px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-group { display:flex; flex-direction:column; gap:5px; margin-bottom:13px }
.form-group:last-of-type { margin-bottom:16px }
.form-group label { font-size:0.65rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.38) }
.form-group label span { color:var(--red) }
.form-group input,.form-group select,.form-group textarea { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); padding:10px 12px; font-size:0.86rem; color:var(--white); outline:none; border-radius:0; -webkit-appearance:none; appearance:none; width:100%; transition:border-color var(--t) var(--ease),background var(--t) var(--ease) }
.form-group input::placeholder,.form-group textarea::placeholder { color:rgba(255,255,255,0.24) }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:rgba(255,255,255,0.38); background:rgba(255,255,255,0.1) }
.form-group select option { background:var(--navy); color:var(--white) }
.form-group textarea { resize:vertical; min-height:96px }
.form-submit { width:100%; background:var(--red); color:var(--white); border:2px solid var(--red); padding:13px; font-size:0.84rem; font-weight:600; letter-spacing:0.05em; transition:background var(--t) var(--ease) }
.form-submit:hover { background:var(--red-dk); border-color:var(--red-dk) }
.form-feedback { margin-top:8px; font-size:0.77rem; min-height:15px; color:rgba(255,255,255,0.5) }


/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer { background:#07131F }
.footer-top { padding-block:clamp(40px,5.5vw,64px) }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:34px }
.footer-logo-video { width:52px !important; height:52px !important; object-fit:contain; display:block; margin-bottom:12px; border-radius:6px; max-width:52px !important; max-height:52px !important }
.footer-tagline { font-size:0.77rem; line-height:1.7; color:rgba(255,255,255,0.3); max-width:240px }
.footer-nav-col h4,.footer-contact-col h4 { font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.26); margin-bottom:12px }
.footer-nav-col ul { display:flex; flex-direction:column; gap:8px }
.footer-nav-col a { font-size:0.8rem; color:rgba(255,255,255,0.42); transition:color var(--t) var(--ease) }
.footer-nav-col a:hover { color:rgba(255,255,255,0.78) }
.footer-contact-col p { font-size:0.77rem; line-height:1.7; color:rgba(255,255,255,0.38); margin-bottom:4px }
.footer-contact-col a { color:rgba(255,255,255,0.42); transition:color var(--t) var(--ease) }
.footer-contact-col a:hover { color:rgba(255,255,255,0.78) }
.footer-socials { display:flex; gap:6px; margin-top:12px }
.footer-socials a { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid rgba(255,255,255,0.1); font-size:0.66rem; font-weight:700; font-style:normal; color:rgba(255,255,255,0.32); transition:border-color var(--t) var(--ease),color var(--t) var(--ease) }
.footer-socials a:hover { border-color:rgba(255,255,255,0.34); color:var(--white) }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05); padding-block:16px }
.footer-bottom p { font-size:0.69rem; color:rgba(255,255,255,0.16) }


/* ══════════════════════════════════════════
   FLOATING BUTTON STACK — bottom-right
   Donate pill sits directly above WA circle.
   The whole stack fades in together via .show.
══════════════════════════════════════════ */
.float-stack {
  position: fixed;
  bottom: 22px;
  right: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.float-stack.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Donate pill */
.donate-float {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 11px 18px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(192,38,29,0.38);
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.donate-float:hover { background:var(--red-dk); transform:translateY(-2px) }

/* WhatsApp circle */
.wa-float {
  background: #25D366;
  color: var(--white);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  transition: background 0.2s, transform 0.2s;
}
.wa-float:hover { background:#1EB457; transform:translateY(-2px) }


/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:26px }
  .projects-grid { grid-template-columns:1fr 1fr }
  .project-card--large,.project-card:not(.project-card--large),.projects-grid .project-card:nth-child(n+3) { grid-column:span 1 }
  .impact-figures { grid-template-columns:repeat(2,1fr) }
  .donate-layout { grid-template-columns:1fr 400px }
}

@media (max-width:960px) {
  .founder-inner { grid-template-columns:260px 1fr; gap:40px }
  .donate-layout { grid-template-columns:1fr }
  .donate-layout .donate-card { max-width:540px }
  .chairman-featured { grid-template-columns:140px 1fr; gap:24px }
  .chairman-photo { width:120px; height:120px }
}

@media (max-width:860px) {
  .who-grid { grid-template-columns:1fr; gap:20px }
  .who-left .section-headline { font-size:1.1rem; line-height:1.55 }
  .vm-row { grid-template-columns:1fr; gap:0 }
  .vm-divider { display:none }
  .vm-item { padding:0; border-top:1px solid var(--warm-grey); padding-top:24px }
  .vm-item:first-child { border-top:none; padding-top:0 }
  .work-grid { grid-template-columns:1fr 1fr }
  .work-item:nth-child(3n) { border-right:1px solid rgba(255,255,255,0.08) }
  .work-item:nth-child(2n) { border-right:none }
  .work-item--wide { grid-column:span 2; grid-template-columns:1fr; gap:14px }
  .eccd-wrap { grid-template-columns:1fr }
  .eccd-image-col { height:260px }
  .partners-row { flex-wrap:wrap }
  .partner-item { flex:0 0 calc(50% - 1px); min-width:0 }
  .contact-grid { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr 1fr }
}

@media (max-width:760px) {
  .founder-inner { grid-template-columns:1fr }
  .founder-image-col::after { display:none }
  .founder-photo-frame img { aspect-ratio:4/3; object-position:center 15% }
  .chairman-featured { grid-template-columns:1fr; text-align:center }
  .chairman-photo-col { align-items:center }
  .chairman-photo { width:110px; height:110px }
  .board-members-grid { grid-template-columns:1fr }
  .donate-layout .donate-card { max-width:100% }
}

/* Nav burger activates earlier than the general mobile breakpoint — the
   desktop nav-links row starts clipping off the right edge around 880px
   (visible at the 768px tablet checkpoint), so the burger menu takes over
   from 920px down, well before that happens. */
@media (max-width:920px) {
  .nav-burger { display:flex }
  .nav-org-name { display:none }
  .nav-links { display:none; position:fixed; inset:0; background:var(--navy); flex-direction:column; justify-content:center; align-items:center; gap:2px; z-index:850; padding:28px; list-style:none }
  .nav-links.open { display:flex }
  .nav-links li { width:100%; text-align:center }
  .nav-links a { font-size:1rem; padding:13px 10px }
  .nav-links .nav-cta { margin-left:0; margin-top:8px; display:block; text-align:center }
  .nav-links .nav-donate-link { border:1px solid rgba(245,196,123,0.35); display:block; margin-left:0 }
}

@media (max-width:640px) {
  .hero-headline { font-size:clamp(2rem,9.5vw,2.65rem); margin-bottom:16px }
  .hero-eyebrow { margin-bottom:12px }
  .hero-subtext { max-width:100%; margin-bottom:24px }
  .hero-nav-spacer { height:calc(var(--nav-h) + clamp(18px,4vh,36px)) }
  .hero-content { padding-bottom:132px }
  .hero-scroll-indicator { display:none }
  .hero-dots { bottom:14px; right:14px }
  .who-grid { grid-template-columns:1fr }
  .work-grid { grid-template-columns:1fr }
  .work-item { border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.08) }
  .work-item--wide { grid-column:span 1; grid-template-columns:1fr }
  .eccd-image-col { height:210px }
  .eccd-content-col { padding:26px 18px }
  .projects-grid { grid-template-columns:1fr !important }
  .project-card--large,.project-card,.projects-grid .project-card:nth-child(n+3) { grid-column:span 1 !important }
  .impact-figures { grid-template-columns:1fr 1fr }
  .impact-item { padding:20px 14px }
  .impact-number { font-size:1.4rem }
  .states-grid { flex-direction:column }
  .state-name { padding:9px 0; margin:0; border-right:none; white-space:normal; border-bottom:1px solid rgba(255,255,255,0.1) }
  .partners-row { flex-direction:column }
  .partner-item { flex:1 1 100%; padding:24px 18px }
  .enquiry-form { padding:18px 14px }
  .footer-grid { grid-template-columns:1fr }
  .footer-tagline { max-width:100% }
  .donate-card { padding:24px 18px }
  .donate-amounts { grid-template-columns:repeat(3,1fr) }
  .donate-amt-btn { font-size:0.76rem; padding:10px 4px }
  /* donate-float is inside .float-stack — no individual positioning needed */
}

@media (max-width:420px) {
  :root { --px:16px }
  .hero-headline { font-size:clamp(1.9rem,10.5vw,2.3rem) }
  .btn-primary,.btn-ghost { padding:11px 16px; font-size:0.8rem }
  .impact-figures { grid-template-columns:1fr }
  .who-left .section-headline { font-size:0.95rem }
  .board-card,.chairman-featured { padding:24px 16px }
  .eccd-content-col { padding:20px 14px }
  .partner-item { padding:20px 14px }
  .hero-dots { gap:6px }
  .hero-dot { width:7px; height:7px }
  .donate-amounts { grid-template-columns:1fr 1fr }
}


/* duplicate float block removed — see primary float-stack rules above */


/* ══════════════════════════════════════════════════
   BANK DETAILS MODAL
══════════════════════════════════════════════════ */
.bank-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11,31,58,0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bank-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.bank-modal {
  background: var(--white);
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 36px 32px;
  position: relative;
  transform: translateY(16px);
  transition: transform 0.3s ease;
}
.bank-modal-overlay.open .bank-modal {
  transform: translateY(0);
}
.bank-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1;
  color: var(--muted);
  transition: color 0.2s;
}
.bank-modal-close:hover { color: var(--navy) }
.bank-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: var(--red);
}
.bank-modal-header h2 {
  font-family: var(--font-d);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.bank-modal-header p {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 2px 0 0;
}
.bank-modal-intro {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--warm-grey);
}
.bank-modal-intro a { color: var(--navy); font-weight: 600 }
.bank-accounts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.bank-account {
  border: 1px solid var(--warm-grey);
  border-left: 4px solid var(--navy);
  padding: 18px 20px;
}
.bank-currency-tag {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.bank-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--warm-grey);
  font-size: 0.84rem;
}
.bank-detail-row:last-child { border-bottom: none }
.bank-detail-row span { color: var(--muted); flex-shrink: 0 }
.bank-detail-row strong { color: var(--navy); text-align: right }
.bank-modal-note {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--warm-grey);
}
.bank-modal-note a { color: var(--navy) }

/* Mobile modal */
@media (max-width: 480px) {
  .bank-modal { padding: 32px 20px 24px }
  .bank-detail-row { flex-direction: column; gap: 3px }
  .bank-detail-row strong { text-align: left }
}


/* ══════════════════════════════════════════════════
   GALLERY SECTION
══════════════════════════════════════════════════ */
.gallery-wrap {
  background: var(--white);
  padding-block: var(--py);
  border-top: 1px solid var(--warm-grey);
}
.gallery-wrap .section-headline { margin-top: 8px; margin-bottom: 10px }
.gallery-intro {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 500px;
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Filter tabs */
.gallery-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.gallery-tab {
  background: none;
  border: 1.5px solid var(--warm-grey);
  color: var(--muted);
  font-family: var(--font-b);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.gallery-tab:hover { border-color: var(--navy); color: var(--navy) }
.gallery-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Photo/video grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--warm-grey);
  cursor: pointer;
  aspect-ratio: 4/3;
}
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.05);
}
.gallery-item.hidden { display: none }

/* Caption overlay */
.gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(11,31,58,0.8), transparent);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 24px 14px 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Video play button overlay */
.gallery-item--video .gallery-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(11,31,58,0.35);
  transition: background 0.25s ease;
}
.gallery-item--video:hover .gallery-play-btn {
  background: rgba(192,38,29,0.5);
}

.gallery-upload-note {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--warm-grey);
}
.gallery-upload-note a { color: var(--navy); font-weight: 600 }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(7,19,31,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto }
.lightbox-content {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-content img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 2px;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 22px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 2rem; line-height: 1;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--white) }
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 1.2rem; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.18); color: var(--white) }
.lightbox-prev { left: 18px }
.lightbox-next { right: 18px }

/* Gallery responsive */
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr }
  .lightbox-prev { left: 8px }
  .lightbox-next { right: 8px }
}


/* ══════════════════════════════════════════
   GALLERY SECTION
══════════════════════════════════════════ */
.gallery-wrap {
  background: var(--white);
  padding-block: var(--py);
  border-top: 1px solid var(--warm-grey);
}
.gallery-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.gallery-header .section-headline { margin-top: 8px }

/* Tab switcher */
.gallery-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--warm-grey);
  overflow: hidden;
}
.gallery-tab {
  background: var(--cream);
  border: none;
  padding: 9px 20px;
  font-family: var(--font-b);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t), color var(--t);
  border-right: 1px solid var(--warm-grey);
}
.gallery-tab:last-child { border-right: none }
.gallery-tab.active {
  background: var(--navy);
  color: var(--white);
}

/* Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--warm-grey);
  cursor: pointer;
}
.gallery-item--wide  { grid-column: span 2 }
.gallery-item--tall  { grid-row: span 2 }

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 200px;
  transition: transform 0.5s var(--ease);
}
.gallery-item:hover img,
.gallery-item:hover video { transform: scale(1.04) }

/* Video play overlay */
.gallery-item--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,31,58,0.28);
  pointer-events: none;
  transition: background 0.3s;
}
.gallery-item--video:hover::after { background: rgba(11,31,58,0.12) }
.gallery-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.gallery-play-icon svg { margin-left: 3px }

/* Panel visibility */
.gallery-panel { display: none }
.gallery-panel.active { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px }

/* Caption overlay on hover */
.gallery-item-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(11,31,58,0.8), transparent);
  color: var(--white);
  font-size: 0.74rem;
  padding: 24px 12px 10px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.gallery-item:hover .gallery-item-caption { opacity: 1 }

/* Lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7,19,31,0.96);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gallery-lightbox.open { display: flex }
.gallery-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox-inner img,
.gallery-lightbox-inner video {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}
.gallery-lightbox-close {
  position: absolute;
  top: -40px; right: 0;
  background: none; border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.8rem; line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}
.gallery-lightbox-close:hover { color: var(--white) }

/* Responsive gallery */
@media (max-width: 900px) {
  .gallery-grid,
  .gallery-panel.active { grid-template-columns: repeat(2, 1fr) }
  .gallery-item--wide  { grid-column: span 2 }
  .gallery-item--tall  { grid-row: span 1 }
}
@media (max-width: 520px) {
  .gallery-grid,
  .gallery-panel.active { grid-template-columns: 1fr 1fr }
  .gallery-item--wide  { grid-column: span 2 }
}

/* gallery misc */
.gallery-intro { font-size:0.9rem; color:var(--muted); margin-bottom:28px; max-width:540px }
.gallery-upload-note { font-size:0.78rem; color:var(--muted); margin-top:24px; text-align:center }
.gallery-upload-note a { color:var(--navy); font-weight:600 }


/* ── Gallery: neutralise legacy 4/3 ratio so gallery.html's own grid controls sizing ── */
.gallery-panel .gallery-item { aspect-ratio: auto }
.gallery-panel .gallery-item img,
.gallery-panel .gallery-item video { object-position: center 30% }
.gallery-panel.active { grid-auto-flow: dense }
@media (min-width:861px) { #panel-all .story-more-card { grid-column: span 3 } }