/* =========================================================
   UCMF — Uganda Christian Medical Fellowship
   Stylesheet · Vanilla CSS · Mobile-first
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  /* Brand palette — blue & white emphasis (ICMDA / UCMF style) */
  --c-blue:        #1a5fb4;   /* primary brand blue */
  --c-blue-bright: #2470c8;   /* hover / lighter */
  --c-blue-deep:   #0e3a73;   /* deep brand (topbar / footer) */
  --c-blue-ink:    #082347;   /* near-black blue for body text */
  --c-blue-soft:   #e7f0fa;   /* light tint for cards / chips */
  --c-blue-mist:   #f4f8fd;   /* almost-white wash backgrounds */
  --c-navy:        #0e3a73;   /* alias kept for backward-compat */
  --c-navy-deep:   #061a2e;
  --c-sky:         #5b9bd5;
  --c-sky-soft:    #e7f0fa;
  --c-gold:        #f5b51e;   /* still used for highlights/CTAs */
  --c-gold-deep:   #d99a06;
  --c-cream:       #f4f8fd;   /* swapped warm cream → cool blue mist */
  --c-paper:       #ffffff;
  --c-ink:         #082347;
  --c-ink-soft:    #3b5680;
  --c-muted:       #6e83a3;
  --c-line:        #e1ebf5;
  --c-success:     #14a37f;

  /* Gradients */
  --g-hero: linear-gradient(135deg, rgba(14,58,115,.7) 0%, rgba(26,95,180,.55) 60%, rgba(91,155,213,.3) 100%);
  --g-deep: linear-gradient(135deg, #0e3a73 0%, #1a5fb4 100%);
  --g-soft: linear-gradient(160deg, #f4f8fd 0%, #e7f0fa 100%);

  /* Type — Montreal Sans first, Inter Tight as the open-source proxy */
  --f-sans:    "PP Neue Montreal", "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Ubuntu Sans", sans-serif;
  --f-display: "PP Neue Montreal", "Inter Tight", "Inter", system-ui, sans-serif;

  /* Type scale (fluid) */
  --fs-xs:    .78rem;
  --fs-sm:    .9rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.35rem;
  --fs-xl:    clamp(1.6rem, 2.4vw, 2.1rem);
  --fs-2xl:   clamp(2rem,  3.6vw, 3rem);
  --fs-3xl:   clamp(2.5rem, 5vw, 4rem);
  --fs-hero:  clamp(2.8rem, 6vw, 5.2rem);

  /* Layout */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(10,37,64,.06);
  --shadow:    0 8px 28px rgba(10,37,64,.10);
  --shadow-lg: 0 24px 60px rgba(10,37,64,.18);

  --container: 1200px;
  --container-wide: 1400px;
  --gutter: clamp(1rem, 3vw, 2rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .18s;
  --t:      .32s;
  --t-slow: .6s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-sans);
  font-size:var(--fs-base);
  line-height:1.6;
  letter-spacing:-.005em;
  color:var(--c-ink);
  background:var(--c-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none; transition:color var(--t-fast) var(--ease) }
button{ font:inherit; cursor:pointer; border:0; background:none }
ul,ol{ list-style:none }
h1,h2,h3,h4,h5{ font-family:var(--f-display); font-weight:600; line-height:1.15; color:var(--c-navy); letter-spacing:-.01em }
h1{ font-size:var(--fs-hero); letter-spacing:-.02em }
h2{ font-size:var(--fs-3xl); letter-spacing:-.02em }
h3{ font-size:var(--fs-xl) }
h4{ font-size:var(--fs-lg) }
p{ color:var(--c-ink-soft) }
::selection{ background:var(--c-sky); color:var(--c-navy) }

/* ---------- 3. Layout utilities ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.container-wide{ width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding: clamp(4rem, 8vw, 7rem) 0 }
.section-tight{ padding: clamp(3rem, 5vw, 4.5rem) 0 }
.section--cream{ background:var(--c-cream) }
.section--navy{ background:var(--g-deep); color:#fff }
.section--navy h2,.section--navy h3,.section--navy h4{ color:#fff }
.section--navy p{ color:rgba(255,255,255,.78) }
.grid{ display:grid; gap:1.5rem }
.flex{ display:flex }
.center{ text-align:center }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-blue);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:28px; height:2px; background:var(--c-gold);
}
.section--navy .eyebrow{ color:var(--c-sky) }
.lead{ font-size:var(--fs-md); color:var(--c-ink-soft); max-width:62ch }
.section-head{ max-width:780px; margin-bottom:3rem }
.section-head.center{ margin-inline:auto }
.divider{ height:1px; background:var(--c-line); border:0 }

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem;
  font-weight:600;
  font-size:var(--fs-sm);
  letter-spacing:.02em;
  border-radius:var(--radius-pill);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  white-space:nowrap;
  cursor:pointer;
}
.btn svg{ width:1em; height:1em }
.btn--primary{
  background:var(--c-blue);
  color:#fff;
  box-shadow:0 8px 22px rgba(26,95,180,.38);
}
.btn--primary:hover{ background:var(--c-blue-bright); transform:translateY(-2px); box-shadow:0 14px 30px rgba(26,95,180,.5) }
/* Solid-white-on-blue, used inside the colored navbar */
.btn--primary.nav__cta{
  background:#fff; color:var(--c-blue);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.btn--primary.nav__cta:hover{ background:var(--c-gold); color:var(--c-blue-deep) }
.btn--gold{ background:var(--c-gold); color:var(--c-navy); box-shadow:0 8px 22px rgba(245,181,30,.4) }
.btn--gold:hover{ background:var(--c-gold-deep); color:#fff; transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--c-navy); border:1.5px solid var(--c-navy) }
.btn--ghost:hover{ background:var(--c-navy); color:#fff }
.btn--ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6) }
.btn--ghost-light:hover{ background:#fff; color:var(--c-navy); border-color:#fff }
.btn--sm{ padding:.6rem 1.1rem; font-size:var(--fs-xs) }
.btn--lg{ padding:1.1rem 2rem; font-size:var(--fs-base) }

/* ---------- 5. Top bar + Header ---------- */
.topbar{
  background:var(--c-blue-deep);
  color:rgba(255,255,255,.9);
  font-size:var(--fs-xs);
  padding:.55rem 0;
  letter-spacing:.01em;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.topbar a{ display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.9); transition:color var(--t-fast) }
.topbar a:hover{ color:#fff }
.topbar__left,.topbar__right{ display:flex; gap:1.25rem; flex-wrap:wrap }

.header{
  position:sticky; top:0; z-index:100;
  background:var(--c-blue);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.header.is-scrolled{ box-shadow:0 6px 24px rgba(14,58,115,.25); background:var(--c-blue-deep) }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
  gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.8rem }
.brand img{
  height:54px; width:auto;
  /* Whiten the dark-blue logo so it stays crisp against the blue navbar */
  filter:brightness(0) invert(1);
  transition:filter var(--t-fast);
}
.brand__text{ line-height:1.05 }
.brand__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
  letter-spacing:-.01em;
}
.brand__sub{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}

.nav{ display:flex; align-items:center; gap:.4rem }
.nav__list{ display:flex; gap:.15rem; align-items:center }
.nav__item{ position:relative }
.nav__link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.65rem .95rem;
  font-weight:500; font-size:.92rem;
  color:rgba(255,255,255,.9);
  border-radius:var(--radius-sm);
  position:relative;
  transition:color var(--t-fast), background var(--t-fast);
}
.nav__link:hover{ color:#fff; background:rgba(255,255,255,.1) }
.nav__link.is-active{
  color:#fff;
  background:rgba(255,255,255,.14);
}
.nav__link.is-active::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.45rem; height:2px;
  background:var(--c-gold); border-radius:2px;
}
.nav__link .caret{ width:10px; height:10px; transition:transform var(--t-fast); opacity:.85 }
.nav__item:hover .caret{ transform:rotate(180deg) }

/* Menu toggle (mobile) on blue nav */
.menu-toggle{ color:#fff }
.menu-toggle:hover{ background:rgba(255,255,255,.12) }

.dropdown{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:240px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(8,35,71,.18);
  padding:.55rem;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:all var(--t) var(--ease);
}
.dropdown::before{
  /* little arrow / pointer */
  content:""; position:absolute; top:-6px; left:1.4rem;
  width:12px; height:12px; background:#fff;
  border-left:1px solid var(--c-line); border-top:1px solid var(--c-line);
  transform:rotate(45deg);
}
.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0) }
.dropdown a{
  display:block;
  padding:.7rem .9rem;
  border-radius:var(--radius-sm);
  font-size:.9rem;
  color:var(--c-ink);
  transition:background var(--t-fast), color var(--t-fast);
}
.dropdown a:hover{ background:var(--c-blue-soft); color:var(--c-blue) }

.nav__cta{ margin-left:.5rem }

.menu-toggle{
  display:none;
  width:46px; height:46px;
  border-radius:var(--radius-sm);
  align-items:center; justify-content:center;
  color:var(--c-navy);
}
.menu-toggle svg{ width:24px; height:24px }

/* ---------- 6. Hero (ICMDA-inspired split) ---------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:min(840px, 96vh);
  overflow:hidden;
  background:#fff;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero__split{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr 1fr;
  z-index:0;
}
.hero__split-img{
  background-size:cover; background-position:center;
  position:relative;
}
.hero__split-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%);
}
.hero__split-img--right::after{ background:linear-gradient(270deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%) }
.hero__center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:3rem 1rem;
  z-index:2;
}
.hero__veil{
  position:absolute;
  top:-5%; bottom:-5%;
  left:50%; transform:translateX(-50%);
  width:min(520px, 48vw);
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.82) 45%,
    rgba(255,255,255,0)   78%);
  z-index:1;
}
.hero__logo{
  height:150px; width:auto; margin-bottom:1.5rem;
  /* Hero logo keeps its original blue colors — only drop-shadow */
  filter:drop-shadow(0 10px 32px rgba(14,58,115,.25));
}
.hero__title{
  color:var(--c-blue-deep);
  font-size:clamp(2.3rem, 4.8vw, 3.6rem);
  line-height:1.08;
  margin:.5rem 0 .8rem;
  letter-spacing:-.02em;
  /* Keep the title inside the white veil so it never overlaps the side photos */
  max-width:min(480px, 44vw);
  text-wrap:balance;
}
.hero__title span{ color:var(--c-blue); display:inline-block }
.hero__title .break{ display:block }   /* forces second line */
.hero__motto{
  font-style:italic;
  color:var(--c-ink-soft);
  font-size:var(--fs-md);
  margin-bottom:2.4rem;
  max-width:min(420px, 42vw);
  text-wrap:balance;
}
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center }

.hero__scroll{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-navy);
  opacity:.6;
}
.hero__scroll::after{ content:""; width:1px; height:30px; background:var(--c-navy); animation:scrollDown 1.8s ease-in-out infinite }
@keyframes scrollDown{
  0%{ transform:scaleY(0); transform-origin:top }
  50%{ transform:scaleY(1); transform-origin:top }
  51%{ transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* Compact page header for sub-pages */
.page-hero{
  position:relative;
  min-height:340px;
  display:flex; align-items:center;
  background-size:cover; background-position:center;
  color:#fff;
  isolation:isolate;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(14,58,115,.88), rgba(26,95,180,.62));
  z-index:-1;
}
.page-hero h1{ color:#fff; font-size:clamp(2.4rem, 5vw, 3.4rem); margin-bottom:.5rem }
.page-hero p{ color:rgba(255,255,255,.85); max-width:62ch; font-size:var(--fs-md) }
.breadcrumbs{
  display:flex; gap:.5rem; align-items:center;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.75);
  margin-bottom:1.1rem;
  text-transform:uppercase; letter-spacing:.16em;
}
.breadcrumbs a:hover{ color:#fff }

/* ---------- 7. Stats strip ---------- */
.stats-wrap{ padding-block: clamp(3rem, 6vw, 5rem) 0 }
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.5rem;
  background:var(--c-navy);
  border-radius:var(--radius-lg);
  padding:.75rem;
  position:relative;
  z-index:5;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.stats::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(94,177,230,.18) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(245,181,30,.10) 0%, transparent 40%);
  pointer-events:none;
}
.stat{
  text-align:center;
  padding:1.5rem 1rem;
  color:#fff;
  border-right:1px solid rgba(255,255,255,.08);
}
.stat:last-child{ border-right:0 }
.stat__num{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2rem, 3.5vw, 2.8rem);
  color:var(--c-sky);
  line-height:1;
}
.stat__label{
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-top:.4rem;
}

/* ---------- 8. About preview / Mission ---------- */
.about-split{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.about-split__images{
  position:relative;
  aspect-ratio:1/1;
}
.about-split__images .img-a,
.about-split__images .img-b,
.about-split__images .img-c{
  position:absolute;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.about-split__images .img-a{ top:0; left:0; width:65%; aspect-ratio:4/5 }
.about-split__images .img-b{ bottom:0; right:0; width:60%; aspect-ratio:4/3; border:6px solid #fff }
.about-split__images .img-c{
  bottom:18%; left:6%; width:38%; aspect-ratio:1/1;
  border:6px solid var(--c-gold); background:var(--c-gold);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:var(--c-navy); padding:1rem; text-align:center;
}
.about-split__images img{ width:100%; height:100%; object-fit:cover }
.about-split__images .img-c strong{ font-family:var(--f-display); font-size:2.4rem; line-height:1; font-weight:700 }
.about-split__images .img-c span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem }

.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
  margin-top:2rem;
}
.pillar{ display:flex; gap:.7rem; align-items:flex-start }
.pillar__icon{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--c-blue-soft); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center;
}
.pillar__icon svg{ width:22px; height:22px }
.pillar h4{ font-size:.95rem; margin-bottom:.15rem }
.pillar p{ font-size:.85rem; line-height:1.5 }

/* ---------- 9. Activity cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
}
.card{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  display:flex; flex-direction:column;
  border:1px solid var(--c-line);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.card__media{
  aspect-ratio:16/10;
  background-size:cover; background-position:center;
  position:relative;
}
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(10,37,64,.4));
}
.card__chip{
  position:absolute; top:1rem; left:1rem;
  background:rgba(255,255,255,.95);
  color:var(--c-navy);
  padding:.3rem .7rem;
  border-radius:var(--radius-pill);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  z-index:2;
}
.card__body{ padding:1.5rem; flex:1; display:flex; flex-direction:column; gap:.6rem }
.card__title{ font-family:var(--f-display); font-size:1.2rem; color:var(--c-navy); font-weight:600 }
.card__meta{ display:flex; gap:1rem; font-size:.8rem; color:var(--c-muted); flex-wrap:wrap }
.card__meta span{ display:inline-flex; align-items:center; gap:.3rem }
.card__body p{ font-size:.92rem; line-height:1.6 }
.card__link{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--c-blue); font-weight:600; font-size:.85rem;
  margin-top:auto;
}
.card__link::after{ content:"→"; transition:transform var(--t-fast) }
.card__link:hover::after{ transform:translateX(4px) }

/* Activity card alternate (icon + title) */
.activity-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
}
.activity{
  background:#fff;
  border-radius:var(--radius);
  padding:1.75rem;
  border:1px solid var(--c-line);
  transition:transform var(--t) var(--ease), border-color var(--t) var(--ease);
  position:relative; overflow:hidden;
}
.activity::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c-blue);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--t) var(--ease);
}
.activity:hover{ transform:translateY(-4px); border-color:var(--c-blue) }
.activity:hover::before{ transform:scaleY(1) }
.activity__icon{
  width:56px; height:56px; border-radius:14px;
  background:linear-gradient(135deg, var(--c-blue), var(--c-sky));
  color:#fff; display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.activity__icon svg{ width:26px; height:26px }
.activity h4{ font-size:1.1rem; margin-bottom:.4rem }
.activity p{ font-size:.9rem; line-height:1.6 }
.activity__time{
  margin-top:.85rem;
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-gold-deep);
  font-weight:600;
}

/* ---------- 10. Feature banner (ICMDA Congress style) ---------- */
.feature-banner{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  min-height:340px;
  background:#fff;
  box-shadow:var(--shadow);
}
.feature-banner__img{
  background-size:cover; background-position:center;
}
.feature-banner__center{
  text-align:center;
  padding:3rem 2rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #fff 0%, #fff 60%, rgba(255,255,255,.92) 100%);
  position:relative;
}
.feature-banner__center::before,
.feature-banner__center::after{
  content:""; position:absolute; top:0; bottom:0; width:60px;
  pointer-events:none;
}
.feature-banner__center::before{ left:0; background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)) }
.feature-banner__center::after{ right:0; background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)) }
.feature-banner__badge{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--c-blue);
  letter-spacing:.02em;
}
.feature-banner__badge sup{ font-size:.7rem; color:var(--c-gold-deep); margin-left:.3rem }
.feature-banner__title{
  font-family:var(--f-display);
  font-size:clamp(1.6rem, 2.5vw, 2.1rem);
  color:#2a7d4e;
  font-weight:700;
  margin:.4rem 0;
  letter-spacing:.04em;
}
.feature-banner__date{
  color:var(--c-navy); font-weight:500; letter-spacing:.04em;
  margin-bottom:1.2rem;
}

/* ---------- 11. Gallery ---------- */
.gallery-filter{
  display:flex; gap:.5rem; flex-wrap:wrap;
  justify-content:center; margin-bottom:2.5rem;
}
.gallery-filter button{
  padding:.55rem 1.1rem;
  border-radius:var(--radius-pill);
  font-size:.8rem; letter-spacing:.08em;
  background:#fff;
  border:1px solid var(--c-line);
  color:var(--c-ink-soft);
  transition:all var(--t-fast) var(--ease);
}
.gallery-filter button.is-active,
.gallery-filter button:hover{
  background:var(--c-navy); color:#fff; border-color:var(--c-navy);
}

.masonry{
  column-count:3;
  column-gap:1rem;
}
@media (max-width:900px){ .masonry{ column-count:2 } }
@media (max-width:560px){ .masonry{ column-count:1 } }
.masonry__item{
  break-inside:avoid;
  margin-bottom:1rem;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  cursor:zoom-in;
  background:var(--c-blue-soft);
}
.masonry__item img{
  width:100%; height:auto; display:block;
  transition:transform var(--t-slow) var(--ease), filter var(--t) var(--ease);
}
.masonry__item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,37,64,.65));
  opacity:0; transition:opacity var(--t) var(--ease);
}
.masonry__item:hover img{ transform:scale(1.05) }
.masonry__item:hover::after{ opacity:1 }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,26,46,.95);
  display:none;
  align-items:center; justify-content:center;
  padding:1.5rem;
}
.lightbox.is-open{ display:flex }
.lightbox img{
  max-width:90vw; max-height:88vh;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  color:#fff;
  width:50px; height:50px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  transition:background var(--t-fast);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,.2) }
.lightbox__close{ top:1.5rem; right:1.5rem }
.lightbox__nav--prev{ left:1.5rem; top:50%; transform:translateY(-50%) }
.lightbox__nav--next{ right:1.5rem; top:50%; transform:translateY(-50%) }

/* ---------- 12. Events ---------- */
.event-feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  margin-bottom:3rem;
}
.event-feature__media{
  background-size:cover; background-position:center;
  min-height:380px;
  position:relative;
}
.event-feature__media::before{
  content:"FEATURED EVENT";
  position:absolute; top:1.5rem; left:1.5rem;
  background:var(--c-gold); color:var(--c-navy);
  padding:.4rem .9rem; border-radius:var(--radius-pill);
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
}
.event-feature__body{ padding:clamp(2rem, 4vw, 3rem); display:flex; flex-direction:column; justify-content:center; gap:1rem }
.event-feature__date{
  display:inline-flex; gap:.5rem; align-items:center;
  color:var(--c-blue); font-weight:600;
  font-size:.85rem; letter-spacing:.06em;
}
.event-feature__title{ font-family:var(--f-display); color:var(--c-navy); font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.15 }
.event-feature__meta{ display:flex; gap:1.5rem; flex-wrap:wrap; color:var(--c-ink-soft); font-size:.88rem; padding:.8rem 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line) }
.event-feature__meta span{ display:flex; align-items:center; gap:.4rem }
.event-feature__cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem }

.event-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
}
.event-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; gap:0;
  border:1px solid var(--c-line);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.event-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.event-card__date{
  flex-shrink:0;
  width:90px;
  background:var(--g-deep); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:1rem .5rem;
}
.event-card__date strong{ font-family:var(--f-display); font-size:2rem; line-height:1 }
.event-card__date span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem; color:var(--c-sky) }
.event-card__body{ padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1 }
.event-card__body h4{ font-size:1.05rem; color:var(--c-navy) }
.event-card__body p{ font-size:.85rem; line-height:1.5; color:var(--c-ink-soft) }
.event-card__loc{ font-size:.78rem; color:var(--c-muted); display:flex; align-items:center; gap:.3rem; margin-top:auto }

/* ---------- 13. Blog ---------- */
.blog-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:2rem;
}
.post{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.post__media{ aspect-ratio:16/10; background-size:cover; background-position:center }
.post__body{ padding:1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1 }
.post__category{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-blue); font-weight:700;
}
.post__title{ font-family:var(--f-display); color:var(--c-navy); font-size:1.2rem; line-height:1.3 }
.post__excerpt{ font-size:.9rem; line-height:1.6; color:var(--c-ink-soft) }
.post__foot{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--c-line);
  padding-top:1rem; margin-top:auto;
  font-size:.78rem; color:var(--c-muted);
}

/* ---------- 14. Team ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.5rem;
}
.member{
  text-align:center;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:1.5rem;
  border:1px solid var(--c-line);
  transition:transform var(--t) var(--ease);
}
.member:hover{ transform:translateY(-4px) }
.member__photo{
  width:140px; height:140px;
  border-radius:50%;
  margin:0 auto 1rem;
  background-size:cover; background-position:center;
  border:4px solid var(--c-blue-soft);
}
.member__name{ font-family:var(--f-display); font-size:1.05rem; color:var(--c-navy); margin-bottom:.2rem }
.member__role{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-blue); font-weight:600; margin-bottom:.6rem }
.member__bio{ font-size:.85rem; color:var(--c-ink-soft); line-height:1.5 }
.member__contact{ display:flex; justify-content:center; gap:.7rem; margin-top:.9rem }
.member__contact a{
  width:34px; height:34px; border-radius:50%;
  background:var(--c-blue-soft); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center;
}
.member__contact a:hover{ background:var(--c-blue); color:#fff }
.member__contact svg{ width:15px; height:15px }

/* ---------- 15. Donate / Membership ---------- */
.donate-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
}
.tier{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:2rem;
  border:1px solid var(--c-line);
  position:relative;
  display:flex; flex-direction:column; gap:1rem;
  transition:all var(--t) var(--ease);
}
.tier:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.tier--featured{
  background:var(--g-deep);
  color:#fff;
  border-color:transparent;
  transform:scale(1.03);
  box-shadow:var(--shadow-lg);
}
.tier--featured h3, .tier--featured .tier__price{ color:#fff }
.tier--featured p, .tier--featured li{ color:rgba(255,255,255,.85) }
.tier--featured::before{
  content:"Most chosen";
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--c-gold); color:var(--c-navy);
  padding:.3rem .9rem; border-radius:var(--radius-pill);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.tier__level{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-blue); font-weight:700 }
.tier--featured .tier__level{ color:var(--c-sky) }
.tier__price{ font-family:var(--f-display); font-size:2.2rem; color:var(--c-navy); font-weight:700; line-height:1 }
.tier__price small{ font-size:.8rem; color:var(--c-muted); font-weight:400; margin-left:.3rem }
.tier ul{ display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem }
.tier li{ font-size:.88rem; color:var(--c-ink-soft); display:flex; gap:.5rem; align-items:flex-start }
.tier li::before{
  content:"✓"; color:var(--c-success); font-weight:700; flex-shrink:0;
}
.tier--featured li::before{ color:var(--c-gold) }
.tier .btn{ margin-top:auto; justify-content:center }

/* ---------- 16. Forms ---------- */
.form{
  display:grid; gap:1.1rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr } }
.field label{
  display:block;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-ink-soft);
  margin-bottom:.4rem;
  font-weight:600;
}
.field input, .field textarea, .field select{
  width:100%;
  padding:.95rem 1.1rem;
  font-family:inherit; font-size:.95rem;
  background:#fff;
  border:1.5px solid var(--c-line);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;
  border-color:var(--c-blue);
  box-shadow:0 0 0 4px rgba(30,95,168,.12);
}
.field textarea{ resize:vertical; min-height:140px }
.field--check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--c-ink-soft) }
.field--check input{ width:auto; margin-top:.3rem }
.form-status{
  padding:.8rem 1rem; border-radius:var(--radius-sm);
  background:var(--c-blue-soft); color:var(--c-navy);
  font-size:.88rem;
  display:none;
}
.form-status.is-visible{ display:block }
.form-status.is-error{ background:#fde8e8; color:#9b1c1c }

/* ---------- 17. CTA strip ---------- */
.cta-strip{
  position:relative;
  background:url('../images/gallery/img17.webp') center/cover no-repeat fixed;
  isolation:isolate;
  text-align:center;
  padding:clamp(4rem, 8vw, 6rem) 0;
  color:#fff;
}
.cta-strip::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(14,58,115,.92), rgba(26,95,180,.75));
  z-index:-1;
}
.cta-strip h2{ color:#fff; max-width:24ch; margin:0 auto 1rem }
.cta-strip p{ color:rgba(255,255,255,.85); max-width:60ch; margin:0 auto 1.8rem }
.cta-strip .btn-row{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }

/* ---------- 18. Contact info ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1.4fr; gap:3rem;
  align-items:start;
}
.contact-info{
  display:grid; gap:1.5rem;
}
.info-card{
  background:#fff; border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:1.4rem;
  display:flex; gap:1rem; align-items:flex-start;
}
.info-card__icon{
  width:48px; height:48px; border-radius:12px;
  background:var(--c-blue-soft); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.info-card__icon svg{ width:22px; height:22px }
.info-card h4{ font-size:.95rem; margin-bottom:.3rem }
.info-card p, .info-card a{ font-size:.88rem; color:var(--c-ink-soft); line-height:1.5 }
.info-card a:hover{ color:var(--c-blue) }

/* ---------- 19. Footer ---------- */
.footer{
  background:var(--c-blue-deep);
  color:rgba(255,255,255,.78);
  padding:clamp(3rem, 6vw, 5rem) 0 0;
}
.footer .brand img{ filter:brightness(0) invert(1) }  /* clear white logo on blue footer */
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3rem;
}
.footer__brand{ display:flex; flex-direction:column; gap:1rem; max-width:340px }
.footer__brand .brand{ color:#fff }
.footer__brand .brand__title{ color:#fff }
.footer__brand p{ font-size:.88rem; color:rgba(255,255,255,.7); line-height:1.6 }
.footer h5{
  color:#fff; font-family:var(--f-display); font-size:.95rem;
  margin-bottom:1rem; letter-spacing:.02em;
}
.footer ul{ display:flex; flex-direction:column; gap:.55rem }
.footer a{ color:rgba(255,255,255,.7); font-size:.88rem }
.footer a:hover{ color:var(--c-sky) }
.socials{ display:flex; gap:.5rem; margin-top:.6rem }
.socials a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.socials a:hover{ background:var(--c-blue); color:#fff }
.socials svg{ width:16px; height:16px }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.5rem 0;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.55);
}
.footer__bottom a{ font-size:.8rem }

/* ---------- 19b. Image-pillar (About mini-cards) ---------- */
.image-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.85rem;
  margin-top:2rem;
}
.ip{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--c-line);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  isolation:isolate;
}
.ip:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.ip__img{
  aspect-ratio:4/3;
  background-size:cover; background-position:center;
  position:relative;
}
.ip__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,37,64,0) 40%, rgba(10,37,64,.55));
}
.ip__body{ padding:.9rem 1rem 1rem }
.ip__icon{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  width:36px; height:36px; border-radius:10px;
  background:rgba(255,255,255,.95); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(10,37,64,.2);
}
.ip__icon svg{ width:18px; height:18px }
.ip h4{ font-size:.92rem; margin-bottom:.15rem; color:var(--c-navy) }
.ip p{ font-size:.78rem; line-height:1.45; color:var(--c-ink-soft) }

/* ---------- 19c. Activity cards with photos ---------- */
.activity-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:1.5rem;
}
.acard{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  isolation:isolate;
}
.acard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.acard__media{
  position:relative;
  aspect-ratio:16/10;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.acard__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,37,64,0) 30%, rgba(10,37,64,.7));
}
.acard__badge{
  position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.96);
  color:var(--c-blue);
  padding:.35rem .7rem;
  border-radius:var(--radius-pill);
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(10,37,64,.22);
}
.acard__badge svg{ width:14px; height:14px }
.acard__chip-time{
  position:absolute; bottom:1rem; left:1rem; z-index:2;
  color:#fff;
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:.4rem;
}
.acard__chip-time svg{ width:14px; height:14px }
.acard__body{ padding:1.5rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.acard__body h4{ font-size:1.15rem; color:var(--c-navy); font-family:var(--f-display) }
.acard__body p{ font-size:.9rem; line-height:1.6; color:var(--c-ink-soft) }
.acard__more{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.82rem; color:var(--c-blue);
  margin-top:auto; padding-top:.4rem;
}
.acard__more::after{ content:"→"; transition:transform var(--t-fast) }
.acard:hover .acard__more::after{ transform:translateX(4px) }

/* ---------- 19d. Photo strip (between sections) ---------- */
.photo-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:.25rem;
  height:120px;
  overflow:hidden;
}
.photo-strip > div{
  background-size:cover; background-position:center;
  transition:transform var(--t) var(--ease), filter var(--t) var(--ease);
  filter:saturate(.95);
}
.photo-strip > div:hover{ transform:scale(1.05); filter:saturate(1.1) }
@media (max-width:700px){ .photo-strip{ grid-template-columns:repeat(3, 1fr); height:100px } .photo-strip > div:nth-child(n+4){ display:none } }

/* ---------- 19e. Floating action buttons ---------- */
.float-btn{
  position:fixed;
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 12px 28px rgba(8,35,71,.28);
  z-index:90;
  cursor:pointer;
  border:0;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .2s var(--ease);
  text-decoration:none;
}
.float-btn:hover{ transform:translateY(-4px) scale(1.05); box-shadow:0 18px 38px rgba(8,35,71,.36) }
.float-btn:focus-visible{ outline:3px solid rgba(255,255,255,.7); outline-offset:3px }
.float-btn svg{ width:28px; height:28px }

/* WhatsApp — brand green, bottom-left, with subtle pulse halo */
.float-whatsapp{
  background:#25d366;
  left:1.5rem; bottom:1.5rem;
  position:fixed;
}
.float-whatsapp:hover{ background:#1ebe57 }
.float-whatsapp::after{
  content:""; position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid #25d366;
  opacity:0;
  animation:floatPulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes floatPulse{
  0%   { opacity:.7; transform:scale(1) }
  100% { opacity:0;  transform:scale(1.55) }
}

/* Live chat — brand blue, bottom-right, sits above the back-to-top */
.float-chat{
  background:var(--c-blue);
  right:1.5rem; bottom:5.7rem;
}
.float-chat:hover{ background:var(--c-blue-bright) }
.float-chat.is-active{ background:var(--c-blue-deep) }

/* Back to top — deep blue, bottom-right corner, hidden until you scroll */
.float-top{
  background:var(--c-blue-deep);
  right:1.5rem; bottom:1.5rem;
  width:46px; height:46px;
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
}
.float-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto }
.float-top svg{ width:20px; height:20px }
.float-top:hover{ background:var(--c-blue) }

/* Chat panel — pops up next to the chat button */
.chat-panel{
  position:fixed;
  right:1.5rem; bottom:7rem;
  width:340px;
  max-width:calc(100vw - 3rem);
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(8,35,71,.28), 0 0 0 1px var(--c-line);
  z-index:95;
  overflow:hidden;
  transform:translateY(16px) scale(.96);
  transform-origin:bottom right;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.chat-panel.is-open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.chat-panel__head{
  background:var(--g-deep);
  color:#fff;
  padding:1.1rem 1.3rem;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  position:relative;
}
.chat-panel__head::before{
  /* decorative dot */
  content:""; position:absolute; top:1.4rem; left:1.3rem;
  width:8px; height:8px; border-radius:50%;
  background:#5cf08a; box-shadow:0 0 0 4px rgba(92,240,138,.25);
}
.chat-panel__head > div{ padding-left:1.2rem }
.chat-panel__head strong{
  display:block; font-family:var(--f-display);
  font-size:1.05rem; font-weight:600; letter-spacing:-.01em;
}
.chat-panel__head span{ font-size:.78rem; color:rgba(255,255,255,.78); display:block; margin-top:.15rem }
.chat-panel__close{
  color:#fff; font-size:1.6rem; line-height:1;
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast);
}
.chat-panel__close:hover{ background:rgba(255,255,255,.18) }

.chat-panel__body{ padding:1.2rem; display:flex; flex-direction:column; gap:.5rem }
.chat-panel__body > p{
  font-size:.85rem; color:var(--c-ink-soft);
  margin-bottom:.3rem;
}
.chat-option{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1rem;
  background:var(--c-blue-soft);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
  font-size:.9rem; font-weight:500;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.chat-option:hover{ background:var(--c-blue); color:#fff; transform:translateX(3px) }
.chat-option:hover svg{ color:#fff }
.chat-option svg{ flex-shrink:0; color:var(--c-blue); transition:color var(--t-fast) }

/* Mobile — tighter spacing */
@media (max-width:640px){
  .float-btn{ width:52px; height:52px }
  .float-btn svg{ width:24px; height:24px }
  .float-whatsapp{ left:1rem; bottom:1rem }
  .float-chat{ right:1rem; bottom:4.6rem }
  .float-top{ right:1rem; bottom:1rem; width:42px; height:42px }
  .float-top svg{ width:18px; height:18px }
  .chat-panel{ right:1rem; bottom:5.4rem; width:calc(100vw - 2rem) }
}

/* ---------- 20. Reveal-on-scroll ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none }
.reveal--delay-1{ transition-delay:.1s }
.reveal--delay-2{ transition-delay:.2s }
.reveal--delay-3{ transition-delay:.3s }

/* ---------- 21. Responsive ---------- */
@media (max-width:1024px){
  .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer__grid > *:nth-child(4){ grid-column:span 2 }
  .feature-banner{ grid-template-columns:1fr 1.3fr 1fr }
  .event-feature{ grid-template-columns:1fr }
  .event-feature__media{ min-height:280px }
  .contact-grid{ grid-template-columns:1fr }
}
@media (max-width:880px){
  .nav__list, .nav__cta{ display:none }
  .menu-toggle{ display:flex }
  .nav{ position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw);
    background:#fff; flex-direction:column; align-items:stretch;
    padding:5.5rem 1.5rem 2rem; gap:0;
    transform:translateX(100%);
    transition:transform var(--t) var(--ease);
    box-shadow:-20px 0 40px rgba(14,58,115,.18);
    z-index:120;
    overflow-y:auto;
  }
  /* Inside the open mobile menu, nav links revert to dark on white */
  .nav.is-open .nav__link{ color:var(--c-ink); background:transparent }
  .nav.is-open .nav__link:hover,
  .nav.is-open .nav__link.is-active{ color:var(--c-blue); background:var(--c-blue-soft) }
  .nav.is-open .nav__link.is-active::after{ display:none }
  .nav.is-open{ transform:translateX(0) }
  .nav.is-open .nav__list, .nav.is-open .nav__cta{ display:flex }
  .nav__list{ flex-direction:column; gap:.2rem; width:100%; align-items:stretch }
  .nav__link{ padding:.9rem 1rem; width:100% }
  .nav__cta{ margin:1.5rem 0 0 }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:2px solid var(--c-blue-soft);
    border-radius:0; margin-left:1rem; padding:.2rem 0 .4rem .2rem }
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(10,37,64,.5);
    z-index:110; opacity:0; pointer-events:none;
    transition:opacity var(--t) var(--ease);
  }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto }
  .feature-banner{ grid-template-columns:1fr; min-height:auto }
  .feature-banner__img{ min-height:160px }
  .about-split{ grid-template-columns:1fr }
  .about-split__images{ max-width:480px; margin-inline:auto }
}
@media (max-width:640px){
  .hero__split{ grid-template-columns:1fr; grid-template-rows:1fr 1fr }
  .hero__split-img--right{ display:block }
  .hero__veil{ width:92vw; top:auto; bottom:auto; height:60%; top:20% }
  .hero__title{ max-width:88vw; font-size:clamp(2rem, 8vw, 2.6rem) }
  .hero__motto{ max-width:84vw }
  .topbar__left{ display:none }
  .stat{ border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:1.1rem }
  .stat:last-child{ border-bottom:0 }
  .footer__grid{ grid-template-columns:1fr; gap:2rem }
  .footer__grid > *:nth-child(4){ grid-column:auto }
  .footer__bottom{ flex-direction:column; text-align:center }
  .event-card{ flex-direction:column }
  .event-card__date{ width:100%; flex-direction:row; gap:.6rem; padding:.7rem }
  .event-card__date strong{ font-size:1.4rem }
  .gallery-filter{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:.5rem }
  .gallery-filter button{ flex-shrink:0 }
  .tier--featured{ transform:none }
}

/* ---------- 22. Print + reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
}