/* ==========================================================================
   SKILL-BUILD INITIATIVE — Core stylesheet
   Brand: royal blue #042CCA · gold #FECD04 · Montserrat
   Built accessibility-first (WCAG 2.2 AA target)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand */
  --blue:        #042CCA;
  --blue-deep:   #021874;
  --blue-night:  #060E2B;
  --gold:        #FECD04;
  --gold-deep:   #D9A800;

  /* Neutrals */
  --ink:         #0A1030;
  --body:        #3A4160;
  --mist:        #F4F6FD;
  --line:        #DCE2F6;
  --white:       #FFFFFF;

  /* Surfaces (flipped by high-contrast / dark mode) */
  --page-bg:     var(--white);
  --page-fg:     var(--body);
  --head-fg:     var(--ink);
  --card-bg:     var(--white);
  --card-line:   var(--line);
  --band-bg:     var(--mist);

  /* Type */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --a11y-scale: 1;          /* driven by the accessibility dock */
  --a11y-space: 0em;
  --a11y-leading: 1.7;

  --fs-hero:  clamp(2.6rem, 6.6vw, 5.1rem);
  --fs-h2:    clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-lead:  clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .75rem;

  /* Space + shape */
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --max: 1220px;
  --max-narrow: 780px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(6,14,43,.06);
  --shadow-md: 0 14px 40px -18px rgba(6,14,43,.35);
  --shadow-lg: 0 30px 70px -30px rgba(4,44,202,.45);

  /* Motion */
  --ease: cubic-bezier(.22,.75,.28,1);
  --dur: .55s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  margin:0;
  font-family:var(--font);
  font-size:calc(var(--fs-body) * var(--a11y-scale));
  line-height:var(--a11y-leading);
  letter-spacing:var(--a11y-space);
  color:var(--page-fg);
  background:var(--page-bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{ max-width:100%; display:block; }
a{ color:var(--blue); text-underline-offset:.22em; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ color:var(--head-fg); font-weight:800; line-height:1.12; letter-spacing:-.022em; margin:0 0 .6em; }
h1{ font-size:calc(var(--fs-hero) * var(--a11y-scale)); font-weight:900; }
h2{ font-size:calc(var(--fs-h2) * var(--a11y-scale)); }
h3{ font-size:calc(var(--fs-h3) * var(--a11y-scale)); font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }

/* Keyboard focus — never removed, always visible on both light and dark */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
.on-dark :focus-visible, .site-footer :focus-visible{ outline-color:var(--gold); }

/* Screen-reader only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:1rem; top:-100px; z-index:2000;
  background:var(--gold); color:var(--ink); font-weight:700;
  padding:.85rem 1.35rem; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--max-narrow); }
.section{ padding-block:clamp(3.6rem, 8vw, 7rem); position:relative; }
.section--mist{ background:var(--band-bg); }
.section--night{ background:var(--blue-night); color:#C6CCEA; }
.section--night h2,.section--night h3{ color:#fff; }
.section--blue{ background:var(--blue); color:#DCE2FF; }
.section--blue h2,.section--blue h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:calc(var(--fs-eyebrow) * var(--a11y-scale));
  font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:1rem;
}
.eyebrow::before{ content:""; width:26px; height:3px; background:var(--gold); border-radius:2px; }
.section--night .eyebrow,.section--blue .eyebrow{ color:var(--gold); }

.lead{ font-size:calc(var(--fs-lead) * var(--a11y-scale)); }
.section-head{ max-width:44ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

.grid{ display:grid; gap:clamp(1rem,2.2vw,1.75rem); }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:calc(.95rem * var(--a11y-scale));
  text-decoration:none; letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  min-height:48px;                     /* WCAG 2.2 target size */
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:0 10px 26px -12px rgba(254,205,4,.9); }
.btn--gold:hover{ background:#ffd93b; box-shadow:0 16px 34px -12px rgba(254,205,4,1); }
.btn--blue{ background:var(--blue); color:#fff; box-shadow:var(--shadow-lg); }
.btn--blue:hover{ background:var(--blue-deep); }
.btn--ghost{ border-color:currentColor; color:inherit; background:transparent; }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--outline{ border-color:var(--blue); color:var(--blue); background:transparent; }
.btn--outline:hover{ background:var(--blue); color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* --------------------------------------------------------------------------
   5. HEADER + NAV
   -------------------------------------------------------------------------- */
.topbar{
  background:var(--blue-night); color:#AAB4E0;
  font-size:calc(.78rem * var(--a11y-scale)); padding:.5rem 0;
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; align-items:center; justify-content:space-between; }
.topbar a{ color:#DDE3FF; text-decoration:none; }
.topbar a:hover{ color:var(--gold); text-decoration:underline; }
.topbar__contact{ display:flex; flex-wrap:wrap; gap:1.1rem; }

.site-header{
  position:sticky; top:0; z-index:900;
  border-bottom:1px solid var(--card-line);
}
/* The frosted-glass effect lives on a ::before layer, not on .site-header
   itself. backdrop-filter (like transform/filter/contain) makes an element
   the CSS containing block for any position:fixed descendant — if it sat on
   .site-header directly, the mobile nav drawer (fixed, nested inside the
   header) would size itself against the header's own ~78px box instead of
   the viewport, collapsing to a sliver instead of a full-height panel.
   Putting the blur on a separate, empty pseudo-element sidesteps that
   entirely: the pseudo has no descendants, so nothing is trapped by it. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck::before{ box-shadow:0 8px 30px -18px rgba(6,14,43,.5); }
.site-header .wrap{ display:flex; align-items:center; gap:1rem; min-height:78px; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.brand img{ width:46px; height:46px; border-radius:10px; }
.brand__name{ font-weight:900; color:var(--ink); line-height:1.06; font-size:calc(1.02rem * var(--a11y-scale)); letter-spacing:-.02em; }
.brand__tag{ display:block; font-weight:600; font-size:calc(.66rem * var(--a11y-scale)); letter-spacing:.13em; text-transform:uppercase; color:var(--blue); }

.nav{ display:flex; align-items:center; gap:.15rem; }
.nav__item{ position:relative; }
.nav__item.has-sub{ display:flex; align-items:center; }
.nav__link{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.7rem .8rem; border-radius:var(--r-sm);
  font-weight:600; font-size:calc(.9rem * var(--a11y-scale));
  color:var(--ink); text-decoration:none; background:none; border:0;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover{ color:var(--blue); background:var(--mist); }
.nav__link[aria-current="page"]{ color:var(--blue); }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:3px;
  background:var(--gold); border-radius:2px;
}
.nav__caret-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-left:-.4rem; padding:0; border-radius:var(--r-sm);
  background:none; border:0; color:var(--ink); cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__caret-btn:hover,.nav__caret-btn[aria-expanded="true"]{ color:var(--blue); background:var(--mist); }
.nav__caret{ width:9px; height:9px; transition:transform .25s var(--ease); }
.nav__caret-btn[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }

.submenu{
  position:absolute; top:calc(100% + .4rem); left:0; min-width:264px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:.5rem; z-index:20;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item.is-open .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{
  display:block; padding:.62rem .8rem; border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; font-size:calc(.88rem * var(--a11y-scale)); font-weight:600;
}
.submenu a:hover{ background:var(--mist); color:var(--blue); }
.submenu a small{ display:block; font-weight:500; color:var(--body); font-size:calc(.74rem * var(--a11y-scale)); }

.header-cta{ display:flex; align-items:center; gap:.5rem; }
.header-cta .btn{ padding:.7rem 1.3rem; }

/* Mobile drawer: see the consolidated NAVIGATION block at the end of this file. */

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; color:#E4E9FF;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(254,205,4,.20) 0%, transparent 52%),
    radial-gradient(90% 80% at 8% 92%, rgba(4,44,202,.85) 0%, transparent 60%),
    linear-gradient(155deg, #021874 0%, #042CCA 46%, #06103a 100%);
  padding-block:clamp(3.5rem,9vw,7.5rem);
}
/* The gold crescent from the logo, re-used as the page's signature motif */
.hero__arc{
  position:absolute; right:-16%; top:-22%; width:min(760px,88vw); aspect-ratio:1;
  border-radius:50%; border:clamp(28px,5vw,60px) solid var(--gold);
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);
  opacity:.13; pointer-events:none;
  animation:arcDrift 26s ease-in-out infinite alternate;
}
@keyframes arcDrift{ from{ transform:rotate(-8deg) scale(1);} to{ transform:rotate(6deg) scale(1.06);} }
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent 78%);
}
.hero .wrap{ position:relative; z-index:2; display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; }
@media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } }

.hero__badge{
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .95rem .45rem .5rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:999px; font-size:calc(.78rem * var(--a11y-scale)); font-weight:600; color:#fff; margin-bottom:1.4rem;
}
.hero__badge b{ background:var(--gold); color:var(--ink); border-radius:999px; padding:.2rem .6rem; font-size:calc(.7rem * var(--a11y-scale)); letter-spacing:.06em; }
.hero h1{ color:#fff; margin-bottom:.5em; }
.hero h1 .accent{ color:var(--gold); }
.hero__sub{ font-size:calc(clamp(1.02rem,1.5vw,1.24rem) * var(--a11y-scale)); max-width:52ch; color:#D3DAFF; margin-bottom:1.8rem; }
.hero .btn-row{ margin-bottom:2.4rem; }

.hero__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem 1.6rem; border-top:1px solid rgba(255,255,255,.2); padding-top:1.5rem; }
.hero__stat b{ display:block; font-size:calc(clamp(1.7rem,3vw,2.3rem) * var(--a11y-scale)); font-weight:900; color:var(--gold); line-height:1; letter-spacing:-.03em; }
.hero__stat span{ font-size:calc(.8rem * var(--a11y-scale)); color:#BAC3EE; }

/* Shield-shaped hero visual, echoing the logo */
.shield{
  position:relative; aspect-ratio:1/1.12; width:100%; max-width:420px; margin-inline:auto;
  background:#fff; border-radius:44px 44px 46% 46% / 44px 44px 40% 40%;
  display:grid; place-items:center; padding:2.2rem;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
.shield img{ width:74%; }
.shield__pulse{
  position:absolute; inset:-18px; border-radius:inherit; border:2px solid rgba(254,205,4,.55);
  animation:pulseRing 3.4s var(--ease) infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(.97); opacity:.9;} 70%{ transform:scale(1.06); opacity:0;} 100%{ opacity:0;} }

/* --------------------------------------------------------------------------
   7. QUICK LINKS STRIP
   -------------------------------------------------------------------------- */
.quicklinks{ margin-top:-3.2rem; position:relative; z-index:5; }
.quicklinks .grid{ gap:1px; background:var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-md); }
.quicklink{
  background:#fff; padding:1.6rem 1.4rem; text-decoration:none; color:var(--ink);
  display:block; transition:background .25s var(--ease), transform .25s var(--ease);
}
.quicklink:hover{ background:var(--mist); }
.quicklink__icon{ width:44px; height:44px; border-radius:12px; background:var(--mist); color:var(--blue); display:grid; place-items:center; margin-bottom:.9rem; transition:.25s var(--ease); }
.quicklink:hover .quicklink__icon{ background:var(--blue); color:#fff; transform:translateY(-3px); }
.quicklink b{ display:block; font-size:calc(1.02rem * var(--a11y-scale)); margin-bottom:.25rem; }
.quicklink span{ font-size:calc(.85rem * var(--a11y-scale)); color:var(--body); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--r-md);
  padding:1.7rem; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:#C3CCF2; }
.card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--blue),var(--blue-deep)); color:var(--gold); margin-bottom:1.1rem;
}
.card p{ font-size:calc(.94rem * var(--a11y-scale)); margin-bottom:0; }
.card__link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-weight:700; font-size:calc(.88rem * var(--a11y-scale)); text-decoration:none; }
.card__link::after{ content:"→"; transition:transform .25s var(--ease); }
.card:hover .card__link::after{ transform:translateX(4px); }

/* Pillars — numbering is used because the five pillars are a stated sequence */
.pillar{ padding-top:2.6rem; }
.pillar__num{
  position:absolute; top:1.1rem; right:1.3rem; font-weight:900; letter-spacing:-.05em;
  font-size:calc(3.1rem * var(--a11y-scale)); line-height:1; color:var(--mist);
}
.section--night .pillar{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); }
.section--night .pillar__num{ color:rgba(255,255,255,.09); }
.section--night .card p{ color:#B9C1E4; }
.pillar ul{ margin-top:1rem; display:grid; gap:.45rem; }
.pillar li{ font-size:calc(.86rem * var(--a11y-scale)); padding-left:1.35rem; position:relative; }
.pillar li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* Projects — He / She / Gen Impact */
.project{
  display:grid; gap:0; border:1px solid var(--card-line); border-radius:var(--r-lg); overflow:hidden;
  background:#fff; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.project__head{ padding:1.9rem 1.7rem 1.4rem; background:linear-gradient(150deg,var(--blue),var(--blue-deep)); color:#fff; position:relative; }
.project--she .project__head{ background:linear-gradient(150deg,#7a1fb8,#3a0a75); }
.project--gen .project__head{ background:linear-gradient(150deg,var(--gold-deep),#8a6a00); }
.project__head h3{ color:#fff; margin:0; font-size:calc(1.45rem * var(--a11y-scale)); font-weight:900; letter-spacing:-.02em; }
.project__head span{ font-size:calc(.76rem * var(--a11y-scale)); text-transform:uppercase; letter-spacing:.15em; font-weight:700; opacity:.85; }
.project__body{ padding:1.6rem 1.7rem 1.9rem; }
.project__body p{ font-size:calc(.94rem * var(--a11y-scale)); }

/* Training programme chips */
.programme{
  display:flex; gap:1rem; align-items:flex-start; padding:1.25rem 1.35rem;
  background:#fff; border:1px solid var(--card-line); border-radius:var(--r-md);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.programme:hover{ border-color:var(--blue); transform:translateX(4px); }
.programme__tag{ flex:0 0 auto; background:var(--mist); color:var(--blue); border-radius:10px; width:42px; height:42px; display:grid; place-items:center; font-weight:900; }
.programme h4{ margin:0 0 .3rem; font-size:calc(1rem * var(--a11y-scale)); color:var(--ink); }
.programme p{ margin:0; font-size:calc(.87rem * var(--a11y-scale)); }

/* --------------------------------------------------------------------------
   9. SPLIT / MEDIA SECTIONS
   -------------------------------------------------------------------------- */
.split{ display:grid; gap:clamp(1.8rem,4vw,3.6rem); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:center; }
.split--reverse > :first-child{ order:2; }
@media (max-width:760px){ .split--reverse > :first-child{ order:0; } }

/* Vertical story player — sized for the client's own portrait footage */
.reel{
  position:relative; width:min(300px,100%); margin-inline:auto;
  border-radius:34px; padding:12px; background:linear-gradient(160deg,var(--gold),var(--gold-deep));
  box-shadow:var(--shadow-lg);
}
.reel video{ width:100%; border-radius:24px; background:#000; aspect-ratio:280/640; object-fit:cover; }
.reel__label{
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:calc(.7rem * var(--a11y-scale)); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:.5rem 1.1rem; border-radius:999px; white-space:nowrap;
}

/* SDG chips */
.sdg{ display:flex; flex-wrap:wrap; gap:.7rem; }
.sdg li{
  display:flex; align-items:center; gap:.55rem; padding:.6rem 1rem;
  border:1px solid var(--card-line); border-radius:999px; background:#fff;
  font-size:calc(.85rem * var(--a11y-scale)); font-weight:600; color:var(--ink);
}
.sdg b{ background:var(--blue); color:#fff; border-radius:999px; padding:.15rem .55rem; font-size:calc(.72rem * var(--a11y-scale)); }
.section--mist .sdg li{ background:#fff; }

/* --------------------------------------------------------------------------
   10. NEWS / EVENTS
   -------------------------------------------------------------------------- */
.post{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--card-line); border-radius:var(--r-md); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.post:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.post__media{ aspect-ratio:16/10; background:linear-gradient(140deg,var(--blue-deep),var(--blue)); position:relative; display:grid; place-items:center; }
.post__media::after{ content:""; position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; border:14px solid rgba(254,205,4,.4); }
.post__media img{ width:100%; height:100%; object-fit:cover; }
.post__body{ padding:1.4rem 1.5rem 1.7rem; }
.post__meta{ font-size:calc(.76rem * var(--a11y-scale)); text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--blue); margin-bottom:.55rem; }
.post h3{ font-size:calc(1.06rem * var(--a11y-scale)); margin-bottom:.5rem; }
.post p{ font-size:calc(.9rem * var(--a11y-scale)); margin-bottom:0; }

.event{ display:flex; gap:1.2rem; align-items:flex-start; padding:1.3rem 0; border-bottom:1px solid var(--card-line); }
.event__date{
  flex:0 0 auto; width:72px; text-align:center; border-radius:14px; overflow:hidden; border:1px solid var(--card-line);
}
.event__date b{ display:block; background:var(--blue); color:#fff; font-size:calc(1.4rem * var(--a11y-scale)); padding:.35rem 0; font-weight:900; }
.event__date span{ display:block; background:#fff; color:var(--ink); font-size:calc(.7rem * var(--a11y-scale)); font-weight:700; letter-spacing:.1em; padding:.3rem 0; text-transform:uppercase; }
.event h3{ font-size:calc(1.02rem * var(--a11y-scale)); margin-bottom:.3rem; }
.event p{ margin:0; font-size:calc(.86rem * var(--a11y-scale)); }

/* --------------------------------------------------------------------------
   11. DONATE BAND + MODAL
   -------------------------------------------------------------------------- */
.donate-band{ background:linear-gradient(140deg,var(--gold) 0%, #ffdf5e 55%, var(--gold) 100%); color:var(--ink); }
.donate-band h2,.donate-band h3{ color:var(--ink); }
.donate-band .eyebrow{ color:var(--blue-deep); }
.donate-band .eyebrow::before{ background:var(--blue); }

.modal{
  position:fixed; inset:0; z-index:1500; display:grid; place-items:center;
  padding:1rem; background:rgba(6,14,43,.72); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal__panel{
  width:min(560px,100%); max-height:90vh; overflow-y:auto; background:#fff;
  border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2.4rem);
  transform:translateY(24px) scale(.97); transition:transform .35s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.modal.is-open .modal__panel{ transform:translateY(0) scale(1); }
.modal__close{
  position:absolute; top:1rem; right:1rem; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:#fff; font-size:1.3rem; line-height:1; color:var(--ink);
}
.modal__panel{ position:relative; }

.amounts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:.6rem; margin-bottom:1rem; }
.amount{
  padding:.85rem .4rem; border:2px solid var(--line); border-radius:var(--r-sm);
  background:#fff; font-weight:800; color:var(--ink); transition:.22s var(--ease); min-height:48px;
}
.amount:hover{ border-color:var(--blue); }
.amount.is-active{ border-color:var(--blue); background:var(--blue); color:#fff; }
.freq{ display:flex; gap:.5rem; background:var(--mist); padding:.35rem; border-radius:999px; margin-bottom:1.2rem; }
.freq button{ flex:1; padding:.7rem; border:0; border-radius:999px; background:transparent; font-weight:700; color:var(--body); min-height:44px; }
.freq button.is-active{ background:#fff; color:var(--blue); box-shadow:var(--shadow-sm); }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:700; font-size:calc(.88rem * var(--a11y-scale)); color:var(--ink); margin-bottom:.4rem; }
.field .hint{ display:block; font-weight:500; color:var(--body); font-size:calc(.8rem * var(--a11y-scale)); margin-top:.2rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:2px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:calc(.95rem * var(--a11y-scale)); color:var(--ink); background:#fff; min-height:48px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 4px rgba(4,44,202,.14); outline:none; }
.field textarea{ min-height:130px; resize:vertical; }
.checks{ display:grid; gap:.5rem; }
.checks label{ display:flex; gap:.6rem; align-items:flex-start; font-weight:500; font-size:calc(.9rem * var(--a11y-scale)); color:var(--body); }
.checks input{ width:20px; height:20px; margin-top:.25rem; accent-color:var(--blue); }
.form-note{ font-size:calc(.8rem * var(--a11y-scale)); color:var(--body); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--blue-night); color:#A9B2DC; padding-top:clamp(3rem,6vw,5rem); }
.site-footer h4{ color:#fff; font-size:calc(.86rem * var(--a11y-scale)); text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.1rem; }
.site-footer a{ color:#C9D1F5; text-decoration:none; font-size:calc(.9rem * var(--a11y-scale)); }
.site-footer a:hover{ color:var(--gold); text-decoration:underline; }
.footer-grid{ display:grid; gap:2.4rem; grid-template-columns:1.4fr repeat(3,1fr); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } }
.footer-grid ul{ display:grid; gap:.6rem; }
.footer-brand img{ width:56px; border-radius:12px; margin-bottom:1rem; }
.socials{ display:flex; gap:.5rem; margin-top:1.2rem; }
.socials a{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; transition:.25s var(--ease);
}
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.newsletter{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.newsletter input{ flex:1 1 190px; padding:.8rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; min-height:48px; }
.newsletter input::placeholder{ color:#8E98C8; }
.footer-bottom{
  margin-top:3rem; border-top:1px solid rgba(255,255,255,.14); padding:1.4rem 0;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; font-size:calc(.82rem * var(--a11y-scale));
}

/* --------------------------------------------------------------------------
   14. ACCESSIBILITY DOCK  ← the site's signature feature
   -------------------------------------------------------------------------- */
.a11y-launch{
  position:fixed; right:16px; bottom:16px; z-index:1200;
  width:60px; height:60px; border-radius:50%; border:3px solid var(--gold);
  background:var(--blue); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow-lg);
  transition:transform .3s var(--ease);
}
.a11y-launch:hover{ transform:scale(1.07); }
.a11y-panel{
  position:fixed; right:16px; bottom:88px; z-index:1201; width:min(330px,calc(100vw - 32px));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 70px -25px rgba(6,14,43,.6); padding:1.3rem;
  max-height:min(70vh,620px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.a11y-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.a11y-panel h2{ font-size:calc(1.02rem * var(--a11y-scale)); margin-bottom:.2rem; }
.a11y-panel > p{ font-size:calc(.8rem * var(--a11y-scale)); margin-bottom:1rem; }
.a11y-group{ margin-bottom:1.1rem; }
.a11y-group > span{ display:block; font-size:calc(.72rem * var(--a11y-scale)); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:.5rem; }
.a11y-steps{ display:flex; gap:.4rem; align-items:center; }
.a11y-steps button{ flex:1; min-height:44px; border:2px solid var(--line); border-radius:var(--r-sm); background:#fff; font-weight:800; color:var(--ink); }
.a11y-steps button:hover{ border-color:var(--blue); }
.a11y-steps output{ flex:1.2; text-align:center; font-weight:700; font-size:calc(.85rem * var(--a11y-scale)); }
.a11y-toggles{ display:grid; gap:.4rem; }
.a11y-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; min-height:48px; padding:.6rem .85rem; text-align:left;
  border:2px solid var(--line); border-radius:var(--r-sm); background:#fff;
  font-weight:600; font-size:calc(.87rem * var(--a11y-scale)); color:var(--ink);
}
.a11y-toggle:hover{ border-color:var(--blue); }
.a11y-toggle[aria-pressed="true"]{ border-color:var(--blue); background:var(--mist); }
.a11y-toggle .pip{ width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; flex:0 0 auto; transition:.25s var(--ease); }
.a11y-toggle .pip::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.25s var(--ease); }
.a11y-toggle[aria-pressed="true"] .pip{ background:var(--blue); }
.a11y-toggle[aria-pressed="true"] .pip::after{ left:19px; }
.a11y-reset{ width:100%; min-height:44px; border:0; border-radius:var(--r-sm); background:var(--ink); color:#fff; font-weight:700; }

/* Reading guide bar */
.reading-guide{
  position:fixed; left:0; right:0; height:44px; z-index:1100; pointer-events:none; display:none;
  border-top:2px solid var(--gold); border-bottom:2px solid var(--gold);
  background:rgba(254,205,4,.14);
}
html.a11y-guide .reading-guide{ display:block; }

/* --- Accessibility modes applied to <html> --- */
html.a11y-links a:not(.btn):not(.brand){ text-decoration:underline !important; font-weight:700; }
html.a11y-readable body{ --a11y-space:.055em; --a11y-leading:2; word-spacing:.16em; }
html.a11y-nomotion *,html.a11y-nomotion *::before,html.a11y-nomotion *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
html.a11y-bigcursor, html.a11y-bigcursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 2l30 16-13 3-5 13z' fill='%23042CCA' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto;
}
html.a11y-contrast{
  --page-bg:#000; --page-fg:#FFF; --head-fg:#FFD800; --card-bg:#000;
  --card-line:#FFF; --band-bg:#000; --mist:#111; --line:#FFF; --blue:#4DA6FF; --ink:#FFF; --body:#FFF;
}
html.a11y-contrast body{ background:#000; color:#fff; }
html.a11y-contrast .site-header,html.a11y-contrast .card,html.a11y-contrast .post,
html.a11y-contrast .project,html.a11y-contrast .programme,html.a11y-contrast .modal__panel,
html.a11y-contrast .a11y-panel,html.a11y-contrast .quicklink,html.a11y-contrast .sdg li{
  background:#000 !important; color:#fff !important; border-color:#fff !important; box-shadow:none !important;
}
html.a11y-contrast .hero,html.a11y-contrast .section--mist,html.a11y-contrast .section--night,
html.a11y-contrast .section--blue,html.a11y-contrast .donate-band,html.a11y-contrast .site-footer,
html.a11y-contrast .project__head,html.a11y-contrast .post__media,html.a11y-contrast .topbar{
  background:#000 !important; color:#fff !important;
}
html.a11y-contrast h1,html.a11y-contrast h2,html.a11y-contrast h3,html.a11y-contrast h4{ color:#FFD800 !important; }
html.a11y-contrast a{ color:#4DA6FF !important; }
html.a11y-contrast .btn{ background:#FFD800 !important; color:#000 !important; border-color:#fff !important; }
html.a11y-contrast .hero__arc,html.a11y-contrast .hero__grid{ display:none; }

/* --------------------------------------------------------------------------
   15. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* --------------------------------------------------------------------------
   16. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.topbar,.a11y-launch,.a11y-panel,.reading-guide,.site-footer,.modal{ display:none !important; }
  body{ color:#000; background:#fff; }
}

/* ==========================================================================
   17. EDITORIAL LAYER — the Potter's House pattern, in Skill-Build's brand
   Photo-led, full-bleed, alternating bands, oversized display type.
   ========================================================================== */

/* Announcement strip — scrolls continuously; the ticker feel is deliberate */
.announce{
  background:var(--blue-night); color:#fff; padding:.6rem 0;
  font-size:calc(.8rem * var(--a11y-scale));
  overflow:hidden;
}
.announce .wrap{ display:flex; overflow:hidden; justify-content:flex-start; }
.announce .marquee__track{ gap:2.6rem; animation-name:marquee; animation-duration:20s; animation-timing-function:linear; animation-iteration-count:infinite; }
.announce .marquee__set{ gap:2.6rem; }
.announce:hover .marquee__track,.announce:focus-within .marquee__track{ animation-play-state:paused; }
.announce a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; white-space:nowrap; }
.announce a:hover{ color:var(--gold); }
.announce .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto; }

/* ---- Full-bleed cinematic hero ---- */
.hero-film{
  position:relative; min-height:min(86vh,780px); display:grid; place-items:center;
  text-align:center; color:#fff; overflow:hidden; padding:6rem 0 5rem;
  background:#020a24;
}
.hero-film__media{ position:absolute; inset:0; }
.hero-film__media img,.hero-film__media video{ width:100%; height:100%; object-fit:cover; }
.hero-film__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,10,36,.72) 0%, rgba(4,44,202,.55) 45%, rgba(2,10,36,.9) 100%);
}
.hero-film .wrap{ position:relative; z-index:2; }
.hero-film .eyebrow{ color:var(--gold); justify-content:center; }
.hero-film h1{
  color:#fff; text-transform:uppercase; letter-spacing:-.03em; line-height:.94;
  font-size:calc(clamp(2.5rem,8vw,6.2rem) * var(--a11y-scale)); margin-bottom:.35em;
}
.hero-film h1 em{ font-style:normal; color:var(--gold); display:block; }
.hero-film p{ max-width:56ch; margin-inline:auto; color:#D6DCFF; font-size:calc(clamp(1rem,1.5vw,1.2rem) * var(--a11y-scale)); }
.hero-film .btn-row{ justify-content:center; margin-top:2rem; }
.hero-film__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:2;
  color:#fff; opacity:.7; font-size:calc(.7rem * var(--a11y-scale)); letter-spacing:.2em; text-transform:uppercase;
}

/* ---- Alternating editorial band ---- */
.band{ padding-block:clamp(3rem,7vw,6rem); }
.band__inner{
  display:grid; gap:clamp(1.8rem,5vw,4.5rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.band--flip .band__inner > .band__text{ order:-1; }
.band__text .eyebrow{ margin-bottom:.6rem; }
.band__text h2{
  text-transform:uppercase; letter-spacing:-.025em; line-height:1.02;
  font-size:calc(clamp(1.85rem,4.2vw,3.35rem) * var(--a11y-scale));
}
.band__text p{ max-width:48ch; font-size:calc(clamp(1rem,1.2vw,1.1rem) * var(--a11y-scale)); }
.arrow-link{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:800; text-decoration:none;
  font-size:calc(.95rem * var(--a11y-scale)); letter-spacing:.01em; padding:.4rem 0;
  border-bottom:2px solid currentColor; min-height:44px;
}
.arrow-link::after{ content:"→"; transition:transform .28s var(--ease); }
.arrow-link:hover::after{ transform:translateX(6px); }
.section--night .arrow-link,.hero-film .arrow-link{ color:var(--gold); }

/* ---- Photo slot: a designed placeholder, not a grey box ----
   Replace .ph markup with <img> once the client supplies photography. */
.ph{
  position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:linear-gradient(148deg,var(--blue) 0%,var(--blue-deep) 55%,#020a24 100%);
  display:grid; place-items:center; box-shadow:var(--shadow-md);
}
.ph--tall{ aspect-ratio:4/5; }
.ph--wide{ aspect-ratio:3/2; }
.ph--square{ aspect-ratio:1; }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph::before{        /* the logo crescent, used as a watermark */
  content:""; position:absolute; width:62%; aspect-ratio:1; border-radius:50%;
  border:clamp(16px,4vw,34px) solid var(--gold); opacity:.16;
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);
  transform:rotate(-12deg);
}
.ph__note{
  position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:3;
  background:rgba(2,10,36,.72); backdrop-filter:blur(8px); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:12px;
  padding:.6rem .85rem; font-size:calc(.74rem * var(--a11y-scale)); line-height:1.45;
}
.ph__note b{ display:block; color:var(--gold); font-size:calc(.66rem * var(--a11y-scale)); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.15rem; }

/* ---- Next-steps grid (their Salvation / Membership / Volunteer cards) ---- */
.step{
  display:block; text-decoration:none; color:inherit; border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--card-line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.step .ph{ border-radius:0; box-shadow:none; }
.step__body{ padding:1.4rem 1.4rem 1.7rem; }
.step__body h3{ text-transform:uppercase; font-size:calc(1rem * var(--a11y-scale)); letter-spacing:.02em; margin-bottom:.4rem; }
.step__body p{ font-size:calc(.88rem * var(--a11y-scale)); margin:0; }

/* ---- Event cards with date overlay ---- */
.ev{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--card-line); }
.ev .ph{ border-radius:0; box-shadow:none; }
.ev__date{
  position:absolute; top:1rem; left:1rem; z-index:4; background:#fff; color:var(--ink);
  border-radius:12px; padding:.45rem .75rem; text-align:center; box-shadow:var(--shadow-sm);
}
.ev__date b{ display:block; font-size:calc(1.35rem * var(--a11y-scale)); line-height:1; font-weight:900; }
.ev__date span{ font-size:calc(.66rem * var(--a11y-scale)); letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--blue); }
.ev__body{ padding:1.2rem 1.3rem 1.5rem; }
.ev__body h3{ text-transform:uppercase; font-size:calc(.98rem * var(--a11y-scale)); margin-bottom:.5rem; }
.ev__meta{ display:grid; gap:.3rem; font-size:calc(.82rem * var(--a11y-scale)); }
.ev__meta span{ display:flex; gap:.45rem; align-items:center; }

/* ---- Info tiles (their "Service times / Location" pair) ---- */
.info-tiles{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.info-tile{ display:flex; gap:.9rem; align-items:flex-start; }
.info-tile svg{ flex:0 0 auto; color:var(--gold); }
.info-tile h4{ text-transform:uppercase; letter-spacing:.12em; font-size:calc(.75rem * var(--a11y-scale)); margin-bottom:.3rem; color:inherit; opacity:.75; }
.info-tile p{ margin:0; font-weight:700; font-size:calc(1rem * var(--a11y-scale)); color:inherit; }

/* ---- Full-bleed media band ---- */
.mediaband{ position:relative; overflow:hidden; background:var(--blue-night); color:#C6CCEA; }
.mediaband__inner{ display:grid; gap:clamp(1.8rem,4vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:center; padding-block:clamp(3rem,7vw,5.5rem); }
.mediaband h2{ text-transform:uppercase; font-size:calc(clamp(1.7rem,3.6vw,2.9rem) * var(--a11y-scale)); letter-spacing:-.02em; }
.storebadges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.storebadges a{
  display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.2rem; min-height:48px;
  border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#fff; text-decoration:none;
  font-weight:700; font-size:calc(.85rem * var(--a11y-scale)); transition:.25s var(--ease);
}
.storebadges a:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

/* Section heads used in the editorial layer */
.head-xl{ text-transform:uppercase; letter-spacing:-.025em; font-size:calc(clamp(1.9rem,4.4vw,3.4rem) * var(--a11y-scale)); line-height:1.02; }

/* Hero media fills the section: cancel the aspect-ratio the .ph modifier sets */
.hero-film__media .ph{ aspect-ratio:auto; width:100%; height:100%; border-radius:0; box-shadow:none; }
.hero-film__media .ph::before{ width:48%; transform:rotate(-12deg) translateX(28%); opacity:.2; }

/* ==========================================================================
   18. MOTION LAYER — sliders, marquee, Ken Burns, image reveals
   ========================================================================== */

/* ---- Generic accessible slider (hero + testimonials) ---- */
.slider{ position:relative; }
.slider__track{ position:relative; }
.slider__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.slider__slide.is-active{ opacity:1; visibility:visible; }
.slider--flow .slider__track{ display:flex; transition:transform .6s var(--ease); }
.slider--flow .slider__slide{ position:relative; inset:auto; opacity:1; visibility:visible; flex:0 0 100%; }

.slider__dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.4rem; }
.slider__dots button{
  width:44px; height:44px; border:0; background:none; display:grid; place-items:center; padding:0;
}
.slider__dots button::before{
  content:""; width:10px; height:10px; border-radius:50%; background:currentColor; opacity:.35;
  transition:.25s var(--ease);
}
.slider__dots button[aria-selected="true"]::before{ opacity:1; width:30px; border-radius:5px; background:var(--gold); }

.slider__arrows{ display:flex; gap:.5rem; }
.slider__arrows button{
  width:48px; height:48px; border-radius:50%; border:2px solid currentColor; background:transparent;
  color:inherit; display:grid; place-items:center; transition:.25s var(--ease);
}
.slider__arrows button:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* Hero slideshow with slow Ken Burns push */
.hero-film__media .slider,.hero-film__media .slider__track{ position:absolute; inset:0; }
.hero-film__media .slider__slide img{ width:100%; height:100%; object-fit:cover; }
.hero-film__media .slider__slide.is-active img{ animation:kenburns 12s linear forwards; }
@keyframes kenburns{ from{ transform:scale(1.02) translate3d(0,0,0);} to{ transform:scale(1.14) translate3d(-1.5%,-1%,0);} }
html.a11y-nomotion .hero-film__media .slider__slide.is-active img{ animation:none; }

.hero-film__dots{ position:absolute; left:0; right:0; bottom:3.4rem; z-index:3; color:#fff; }

/* ---- Infinite partner marquee ---- */
.marquee{ overflow:hidden; position:relative; padding-block:1.4rem; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--band-bg),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--band-bg),transparent); }
.marquee__track{ display:flex; gap:3.5rem; width:max-content; animation:marquee 32s linear infinite; }
.marquee__set{ display:flex; align-items:center; gap:3.5rem; }
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.marquee__item{
  display:flex; align-items:center; gap:.6rem; white-space:nowrap;
  font-weight:800; letter-spacing:.02em; color:var(--ink); opacity:.55;
  font-size:calc(1.05rem * var(--a11y-scale));
}
.marquee__item svg{ color:var(--blue); flex:0 0 auto; }
html.a11y-nomotion .marquee__track{ animation:none; }

/* ---- Testimonial slide ---- */
.quote{ text-align:center; max-width:44rem; margin-inline:auto; }
.quote blockquote{
  margin:0 0 1.4rem; font-size:calc(clamp(1.15rem,2.2vw,1.6rem) * var(--a11y-scale));
  font-weight:600; line-height:1.5; color:inherit;
}
.quote cite{ font-style:normal; font-weight:800; display:block; }
.quote cite span{ display:block; font-weight:500; opacity:.7; font-size:calc(.86rem * var(--a11y-scale)); }
.quote__mark{ font-size:3.4rem; line-height:1; color:var(--gold); font-weight:900; }

/* ---- Photography treatment: slow zoom on hover, soft reveal on scroll ---- */
.ph{ background:linear-gradient(148deg,var(--blue) 0%,var(--blue-deep) 55%,#020a24 100%); }
.ph img{ transition:transform 1.1s var(--ease); }
.step:hover .ph img,.ev:hover .ph img,.band .ph:hover img{ transform:scale(1.06); }
html.a11y-nomotion .ph img{ transition:none; }
figure.ph{ margin:0; }

/* Photo credit chip */
.ph__credit{
  position:absolute; right:.6rem; bottom:.6rem; z-index:3;
  background:rgba(2,10,36,.6); color:#fff; border-radius:8px;
  padding:.25rem .5rem; font-size:calc(.62rem * var(--a11y-scale)); letter-spacing:.04em;
}

/* Hero dots sit above the gradient overlay */
.hero-film__dots{ position:absolute; left:0; right:0; bottom:3.4rem; z-index:5; color:#fff; }

/* ==========================================================================
   19. POTTER'S-HOUSE SECTION PARITY
   Hero video, "Rooted in" split block, icon-badged next steps,
   date-under-image event cards, staggered sector grid.
   ========================================================================== */

/* ---- Hero: full-bleed muted looping video ---- */
.hero-film__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-film__media--video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,10,36,.62) 0%, rgba(4,44,202,.42) 48%, rgba(2,10,36,.88) 100%);
}
html.a11y-nomotion .hero-film__video{ display:none; }
html.a11y-nomotion .hero-film__media--video{ background:linear-gradient(155deg,#021874,#042CCA 55%,#060E2B); }

/* Small play/pause control so motion is never forced on anyone */
.hero-film__toggle{
  position:absolute; right:1rem; bottom:1rem; z-index:6;
  min-width:48px; min-height:48px; padding:.6rem 1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(2,10,36,.5);
  color:#fff; font-weight:700; font-size:calc(.78rem * var(--a11y-scale)); backdrop-filter:blur(6px);
}
.hero-film__toggle:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

/* ---- "Rooted in ability" — centred statement flanked by two portraits ---- */
.rooted__inner{
  display:grid; gap:clamp(1rem,3vw,2.4rem); align-items:center;
  grid-template-columns:1fr 1.25fr 1fr;
}
@media (max-width:860px){
  .rooted__inner{ grid-template-columns:1fr 1fr; }
  .rooted__text{ grid-column:1 / -1; order:-1; }
}
.rooted__text{ text-align:center; }
.rooted__text h2{
  text-transform:uppercase; letter-spacing:-.025em; line-height:1.02;
  font-size:calc(clamp(1.7rem,3.6vw,2.9rem) * var(--a11y-scale));
}
.rooted__text p{ font-weight:700; font-size:calc(1.1rem * var(--a11y-scale)); }
.rooted .ph{ aspect-ratio:4/5; }
.rooted .ph:first-child{ transform:translateY(-1.4rem); }
.rooted .ph:last-child{ transform:translateY(1.4rem); }
@media (max-width:860px){ .rooted .ph{ transform:none !important; } }

/* ---- Next-step cards: circular icon badge overlapping the image ---- */
.step{ position:relative; }
.step__badge{
  position:absolute; left:1.1rem; z-index:4; width:54px; height:54px; border-radius:50%;
  background:var(--gold); color:var(--ink); display:grid; place-items:center;
  box-shadow:var(--shadow-md); transition:transform .3s var(--ease);
}
.step:hover .step__badge{ transform:scale(1.08) rotate(-6deg); }
.step__body{ padding-top:2.4rem; }

/* ---- Event cards: date sits under the image, meta rows carry icons ---- */
.ev__stamp{
  display:flex; align-items:baseline; gap:.45rem; margin-bottom:.5rem;
  font-weight:900; color:var(--blue); letter-spacing:.02em;
}
.ev__stamp span{ font-size:calc(.76rem * var(--a11y-scale)); text-transform:uppercase; letter-spacing:.14em; }
.ev__stamp b{ font-size:calc(1.7rem * var(--a11y-scale)); line-height:1; }
.ev__meta span svg{ flex:0 0 auto; color:var(--blue); }

/* ---- Staggered sector grid ---- */
.stagger{ display:grid; gap:clamp(1rem,2.4vw,1.9rem); grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .stagger{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stagger{ grid-template-columns:1fr; } }
.stagger > *:nth-child(even){ margin-top:clamp(0rem,4vw,3.2rem); }
.stagger > *:nth-child(3n+1) .ph{ aspect-ratio:3/2; }
.stagger > *:nth-child(3n+2) .ph{ aspect-ratio:4/5; }
.stagger > *:nth-child(3n+3) .ph{ aspect-ratio:1; }
@media (max-width:560px){
  .stagger > *:nth-child(even){ margin-top:0; }
  .stagger .ph{ aspect-ratio:3/2 !important; }
}

/* ==========================================================================
   20. TPH PARITY v2 — matched against the full-page capture
   Dark-dominant rhythm, ghost section titles, hero overlay carousel,
   overlay next-step cards, ministries split, podcast panel.
   SBI brand navy stands in for their black; SBI gold for their white accent.
   ========================================================================== */

.tph-dark{ background:var(--blue-night); color:#AEB6DA; }
.tph-dark h2,.tph-dark h3,.tph-dark h4{ color:#fff; }
.tph-light{ background:#E9EBF2; color:var(--body); }

/* ---- Ghost section title sitting behind the heading ---- */
.ghosted{ position:relative; }
.ghost{
  position:absolute; left:50%; top:-.35em; transform:translateX(-50%);
  font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:1;
  font-size:clamp(3.2rem,9vw,8.5rem); white-space:nowrap; pointer-events:none;
  color:rgba(255,255,255,.045); z-index:0;
}
.tph-light .ghost{ color:rgba(10,16,48,.05); }
.ghosted > *:not(.ghost){ position:relative; z-index:1; }

.tph-h2{
  text-transform:uppercase; letter-spacing:-.03em; line-height:1.02; text-align:center;
  font-size:calc(clamp(1.9rem,5vw,3.6rem) * var(--a11y-scale)); margin-bottom:.5em;
}

/* ---- Hero: centred content, right-hand social rail, overlay carousel ---- */
.hero-tph{
  position:relative; min-height:min(92vh,860px); display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; background:#04091f; padding:6rem 0 0;
}
.hero-tph__media{ position:absolute; inset:0; }
.hero-tph__media video,.hero-tph__media img{ width:100%; height:100%; object-fit:cover; }

/* Background carousel: up to 3 stacked layers crossfading into each other.
   Each slide gets its own flat semi-transparent black tint (rather than one
   shared overlay on the container), so every slide — current and any added
   later — is guaranteed the same darkened-but-visible treatment. */
.herobg__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s var(--ease);
}
.herobg__slide::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.5);
}
.herobg__slide.is-active{ opacity:1; z-index:1; }
html.a11y-nomotion .herobg__slide{ transition:none; }
.hero-tph__inner{ position:relative; z-index:2; text-align:center; color:#fff; }
.hero-tph .eyebrow{ justify-content:center; color:#fff; font-size:calc(1.35rem * var(--a11y-scale)); }
.hero-tph .eyebrow::before{ background:var(--gold); }
.hero-tph h1{
  color:#fff; text-transform:uppercase; letter-spacing:-.035em; line-height:.95;
  font-size:calc(clamp(3rem,10.5vw,7.6rem) * var(--a11y-scale)); margin-bottom:1.4rem;
  max-width:11ch; margin-inline:auto;
}
.hero-tph .btn-row{ justify-content:center; }
.hero-tph .btn{ padding:.75rem 1.5rem; font-size:calc(.85rem * var(--a11y-scale)); }
.hero-tph__rail{
  position:absolute; right:1.1rem; top:50%; bottom:auto; transform:translateY(-50%); z-index:4;
  display:grid; gap:.55rem;
}
.hero-tph__rail a{
  width:34px; height:34px; border-radius:50%; background:#fff; color:var(--blue-night);
  display:grid; place-items:center; transition:.25s var(--ease);
}
.hero-tph__rail a:hover{ background:var(--gold); }

/* The dark card that overlaps the bottom of the hero and rotates */
.herocard{
  position:relative; z-index:3; margin-top:auto; padding-top:clamp(2rem,6vw,5rem);
}
.herocard__panel{
  background:rgba(6,14,43,.94); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  width:80%; max-width:none; padding:1.6rem 1.9rem 1.3rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
}
.herocard .slider__track{ position:relative; min-height:8.5rem; }
.herocard .slider__slide{ display:grid; grid-template-columns:1fr auto; gap:1.2rem; align-items:center; }
.herocard .slider__slide.is-active{ position:relative; }
.herocard .eyebrow{ justify-content:flex-start; margin-bottom:.4rem; color:var(--gold); }
.herocard h2{
  color:#fff; text-transform:uppercase; letter-spacing:-.02em; margin-bottom:.4rem;
  font-size:calc(clamp(1.25rem,2.6vw,1.85rem) * var(--a11y-scale));
}
.herocard p{ color:#C2CAEC; font-size:calc(.88rem * var(--a11y-scale)); margin-bottom:.3rem; }
.herocard .arrow-link{ font-size:calc(.85rem * var(--a11y-scale)); border-bottom-width:1px; color:var(--gold); }
.herocard__thumb{ width:180px; aspect-ratio:4/3; border-radius:14px; overflow:hidden; flex:0 0 auto; }
.herocard__thumb img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .herocard__panel{ width:100%; } }
@media (max-width:620px){
  .herocard .slider__slide{ grid-template-columns:1fr; }
  .herocard__thumb{ width:100%; aspect-ratio:16/9; order:-1; }
}
/* Dash indicators, like their orange ticks */
.herocard .slider__dots{ justify-content:flex-start; margin-top:.6rem; }
.herocard .slider__dots button::before{ width:22px; height:3px; border-radius:2px; background:#fff; opacity:.3; }
.herocard .slider__dots button[aria-selected="true"]::before{ width:34px; background:var(--gold); opacity:1; }

/* ---- Plan your visit: one bar, icon pairs split by hairlines ---- */
.visitbar{ border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.visitbar__inner{
  display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  padding-block:2rem; text-align:center;
}
.visitbar__inner > *{ display:flex; gap:.9rem; justify-content:center; align-items:flex-start; text-align:left; }
.visitbar__inner > * + *{ border-left:1px solid rgba(255,255,255,.14); }
@media (max-width:620px){ .visitbar__inner > * + *{ border-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:1.2rem; } }
.visitbar h4{ text-transform:uppercase; letter-spacing:.14em; font-size:calc(.7rem * var(--a11y-scale)); margin-bottom:.3rem; opacity:.8; }
.visitbar p{ margin:0; font-weight:700; color:#fff; font-size:calc(.9rem * var(--a11y-scale)); }
.visitbar svg{ color:var(--gold); flex:0 0 auto; }

/* ---- Rooted: centred statement, two offset portraits ---- */
.rooted2__inner{ display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:clamp(1rem,3vw,2.6rem); align-items:center; }
@media (max-width:860px){ .rooted2__inner{ grid-template-columns:1fr 1fr; } .rooted2__text{ grid-column:1/-1; order:-1; } }
.rooted2__text{ text-align:center; }
.rooted2__text h2{ text-transform:uppercase; letter-spacing:-.03em; line-height:1.04; font-size:calc(clamp(1.5rem,3.4vw,2.6rem) * var(--a11y-scale)); }
.rooted2__text p{ font-weight:700; font-size:calc(1.05rem * var(--a11y-scale)); margin-bottom:1.4rem; }
.rooted2 figure{ border-radius:20px; overflow:hidden; margin:0; aspect-ratio:4/5; box-shadow:var(--shadow-md); }
.rooted2 figure img{ width:100%; height:100%; object-fit:cover; }
.rooted2 figure:first-child{ transform:translateY(1.6rem); }
@media (max-width:860px){ .rooted2 figure{ transform:none !important; } }

/* ---- Engage: image cards with the label overlaid on the photo ---- */
.overlay-grid{ display:grid; gap:.5rem; grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .overlay-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .overlay-grid{ grid-template-columns:1fr; } }
.ocard{ position:relative; display:block; overflow:hidden; border-radius:6px; text-decoration:none; color:#fff; aspect-ratio:3/4; }
.ocard img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.ocard:hover img{ transform:scale(1.07); }
.ocard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(4,9,31,.9) 100%);
}
.ocard__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.1rem 1.3rem; }
.ocard__icon{ width:32px; height:32px; margin-bottom:.6rem; color:var(--gold); }
.ocard h3{ color:#fff; text-transform:none; font-size:calc(.98rem * var(--a11y-scale)); margin-bottom:.3rem; }
.ocard p{ margin:0; font-size:calc(.78rem * var(--a11y-scale)); color:#D5DBF3; line-height:1.5; }
.ocard b{ color:#fff; }
html.a11y-nomotion .ocard img{ transition:none; }

/* ---- Events: image, stacked date beside title, meta rows, corner arrow ---- */
.ecard{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:8px; overflow:hidden; position:relative; }
.ecard > figure{ margin:0; aspect-ratio:16/10; overflow:hidden; }
.ecard > figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.ecard:hover > figure img{ transform:scale(1.06); }
.ecard__body{ padding:1.2rem 1.3rem 1.5rem; display:grid; grid-template-columns:auto 1fr; gap:0 1rem; }
.ecard__date{ text-align:center; color:#fff; }
.ecard__date span{ display:block; font-size:calc(.66rem * var(--a11y-scale)); letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--gold); }
.ecard__date b{ display:block; font-size:calc(1.55rem * var(--a11y-scale)); font-weight:900; line-height:1.05; }
.ecard h3{ text-transform:uppercase; font-size:calc(.92rem * var(--a11y-scale)); letter-spacing:.01em; margin:0 0 .7rem; align-self:center; }
.ecard__meta{ grid-column:1/-1; display:grid; gap:.4rem; margin-top:.4rem; font-size:calc(.78rem * var(--a11y-scale)); }
.ecard__meta span{ display:flex; gap:.5rem; align-items:center; }
.ecard__meta svg{ color:var(--gold); flex:0 0 auto; }
.ecard__go{ position:absolute; right:1rem; bottom:1rem; color:var(--gold); }

/* ---- Ministries: text column left, staggered image grid right ---- */
.mins{ display:grid; gap:clamp(1.6rem,4vw,3.5rem); grid-template-columns:.85fr 1.15fr; align-items:center; }
@media (max-width:900px){ .mins{ grid-template-columns:1fr; } }
.mins__text h2{ text-transform:uppercase; letter-spacing:-.03em; line-height:1.05; font-size:calc(clamp(1.5rem,3.2vw,2.4rem) * var(--a11y-scale)); }
.mins__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.mins__grid > *:nth-child(odd){ margin-top:1.8rem; }
@media (max-width:560px){ .mins__grid > *:nth-child(odd){ margin-top:0; } }
.mcard{ position:relative; display:block; border-radius:8px; overflow:hidden; text-decoration:none; aspect-ratio:1; }
.mcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.mcard:hover img{ transform:scale(1.07); }
.mcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(4,9,31,.85) 100%); }
.mcard span{
  position:absolute; left:.9rem; bottom:.9rem; right:.9rem; z-index:2; color:#fff;
  font-weight:800; font-size:calc(.86rem * var(--a11y-scale));
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
}
.mcard span::after{ content:"→"; color:var(--gold); }
html.a11y-nomotion .mcard img,html.a11y-nomotion .ecard > figure img{ transition:none; }

/* ---- Podcast / give panel ---- */
.panel{
  background:#0B1436; border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem);
  align-items:center; padding:clamp(1.4rem,3.5vw,2.6rem); overflow:hidden;
}
@media (max-width:820px){ .panel{ grid-template-columns:1fr; } }
.panel figure{ margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/3; }
.panel figure img{ width:100%; height:100%; object-fit:cover; }
.panel h2{ text-transform:uppercase; letter-spacing:-.02em; font-size:calc(clamp(1.4rem,3vw,2.3rem) * var(--a11y-scale)); }
.panel p{ color:#B7BFE3; font-size:calc(.92rem * var(--a11y-scale)); }

/* ==========================================================================
   21. HERO CARD CENTRED · NEW HAMBURGER · FULL RESPONSIVE PASS
   ========================================================================== */

/* ---- Hero card: centred, with breathing room under it ---- */
.herocard{ padding-bottom:clamp(1.6rem,4vw,3.2rem); }
.herocard__panel{ margin-inline:auto; }
.herocard .slider__dots{ justify-content:center; }
.hero-tph{ padding-bottom:0; }

/* ---- The hamburger ------------------------------------------------------
   Three bars of unequal width that level out on hover and cross into an X
   when open. 48px target, animated with transforms only.                   */
.burger{
  display:none; position:relative; width:48px; height:48px; flex:0 0 auto;
  border:0; border-radius:14px; background:var(--mist); padding:0;
  transition:background .25s var(--ease);
}
.burger:hover{ background:#DDE3F7; }
.burger[aria-expanded="true"]{ background:var(--blue); }
.burger__bars{ position:absolute; inset:0; display:grid; place-items:center; }
.burger__bars i{
  position:absolute; left:50%; height:2.5px; border-radius:2px; background:var(--ink);
  transform-origin:center; transition:width .3s var(--ease), transform .38s var(--ease),
                                      opacity .2s var(--ease), background .25s var(--ease);
}
.burger__bars i:nth-child(1){ width:20px; transform:translate(-50%,-7px); }
.burger__bars i:nth-child(2){ width:14px; transform:translate(-50%,0); }
.burger__bars i:nth-child(3){ width:20px; transform:translate(-50%,7px); }
.burger:hover .burger__bars i:nth-child(2){ width:20px; }
.burger[aria-expanded="true"] .burger__bars i{ background:#fff; width:22px; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2){ opacity:0; transform:translate(-50%,0) scaleX(.2); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(3){ transform:translate(-50%,0) rotate(-45deg); }

/* ---- Full-screen drawer -------------------------------------------------- */
.navscrim{
  position:fixed; inset:0; z-index:940; background:rgba(6,14,43,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.navscrim.is-open{ opacity:1; visibility:visible; }

@media (max-width:1080px){
  .burger{ display:block; }
}

/* ---- Responsive pass ----------------------------------------------------- */
@media (max-width:1080px){
  .rooted2 figure:first-child{ transform:none; }
}
@media (max-width:760px){
  .site-header .wrap{ min-height:66px; }
  .brand img{ width:38px; height:38px; }
  .brand__tag{ display:none; }
  .ghost{ font-size:clamp(2.4rem,15vw,4.5rem); }
  .visitbar__inner{ text-align:left; }
  .visitbar__inner > *{ justify-content:flex-start; }
  .panel{ padding:1.2rem; }
  .panel figure{ aspect-ratio:16/10; }
  .overlay-grid{ gap:.6rem; }
  .ocard{ aspect-ratio:4/3; }
}
@media (max-width:1080px){
  /* Below desktop, don't centre-then-push-to-bottom across a 92vh box — that
     leaves a huge dead gap above the carousel card. Flow compactly instead. */
  .hero-tph{
    min-height:auto; justify-content:flex-start;
    padding-top:calc(env(safe-area-inset-top,0px) + 5.6rem);
  }
  .hero-tph__inner{ margin-bottom:2.2rem; }
  .herocard{ margin-top:0; padding-top:0; }
}
@media (max-width:480px){
  .hero-tph{ padding-top:calc(env(safe-area-inset-top,0px) + 4.4rem); }
  .hero-tph h1{ font-size:calc(clamp(1.9rem,10vw,2.6rem) * var(--a11y-scale)); }
  .hero-tph .btn-row .btn{ width:100%; }
  .herocard__panel{ padding:1.2rem 1.1rem 1rem; }
  .herocard h2{ font-size:calc(1.2rem * var(--a11y-scale)); }
  .btn{ padding:.85rem 1.3rem; }
  .a11y-launch{ width:54px; height:54px; right:12px; bottom:12px; }
  .a11y-panel{ right:12px; bottom:76px; }
  .footer-bottom{ flex-direction:column; }
}
@media (max-width:380px){
  :root{ --gutter:1rem; }
  .ocard{ aspect-ratio:16/10; }
}
/* Landscape phones: don't let a tall hero swallow the screen */
@media (max-height:520px) and (orientation:landscape){
  .hero-tph{ min-height:auto; padding-block:3rem 0; }
  .nav{ padding-top:4.4rem; }
}

/* The off-canvas drawer is position:fixed; clip (not hidden) keeps it from
   extending the scroll width without turning <html> into a scroll container,
   so the sticky header keeps working. */
html{ overflow-x:clip; }

/* The drawer lives inside .site-header (z-index 900), which is its own
   stacking context — so the scrim has to sit BELOW the header, not above it,
   or it swallows every tap meant for the menu. */
.navscrim{ z-index:890; }
/* Keep the accessibility button from floating over the open drawer */
body:has(.nav.is-open) .a11y-launch{ opacity:0; pointer-events:none; }

/* ==========================================================================
   22. PHP BUILD — logo-only brand, media component, inner pages, forms
   ========================================================================== */

/* ---- Brand: the mark on its own, no wordmark beside it ---- */
.brand{ display:inline-flex; align-items:center; margin-right:auto; padding:.2rem; }
.brand img{ width:52px; height:52px; border-radius:12px; display:block; }
@media (max-width:760px){ .brand img{ width:42px; height:42px; border-radius:10px; } }

/* ---- THE MEDIA COMPONENT ------------------------------------------------
   Every image on the site is wrapped in this. The box holds a fixed ratio;
   the photo fills it via object-fit:cover. Upload a portrait phone photo into
   a landscape slot and it crops — it never stretches and never letterboxes.
   If the file is missing the brand gradient shows instead of a broken icon. */
.media{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-md);
  background:linear-gradient(148deg,var(--blue) 0%,var(--blue-deep) 55%,#020a24 100%);
  display:block;
}
.media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease);
}
.media--empty::after,.media__placeholder{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 15%, rgba(254,205,4,.22) 0%, transparent 55%),
    linear-gradient(148deg,var(--blue) 0%,var(--blue-deep) 55%,#020a24 100%);
}
.media__placeholder::after{
  content:""; position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-12deg); border-radius:50%;
  border:clamp(12px,3vw,26px) solid rgba(254,205,4,.28);
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);
}
.media__caption{
  position:absolute; left:.7rem; right:.7rem; bottom:.7rem; z-index:2;
  background:rgba(2,10,36,.7); backdrop-filter:blur(6px); color:#fff;
  border-radius:10px; padding:.45rem .7rem; font-size:calc(.74rem * var(--a11y-scale));
}
.media--round{ border-radius:50%; }
.media--flat{ border-radius:0; }
a:hover > .media img, .card:hover .media img, .step:hover .media img{ transform:scale(1.06); }
html.a11y-nomotion .media img{ transition:none; }

/* ---- Inner-page hero ---- */
.pagehero{
  position:relative; overflow:hidden; color:#fff; background:var(--blue-night);
  padding-block:clamp(3.4rem,9vw,6rem);
}
.pagehero__media{ position:absolute; inset:0; }
.pagehero__media img{ width:100%; height:100%; object-fit:cover; }
.pagehero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(2,10,36,.94) 0%,rgba(4,44,202,.72) 60%,rgba(2,10,36,.9) 100%);
}
.pagehero--plain::after{
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(254,205,4,.16) 0%, transparent 55%),
    linear-gradient(150deg,#021874 0%,#042CCA 55%,#060E2B 100%);
}
.pagehero .wrap{ position:relative; z-index:2; }
.pagehero .eyebrow{ color:var(--gold); }
.pagehero h1{
  color:#fff; text-transform:uppercase; letter-spacing:-.03em; line-height:1.02;
  font-size:calc(clamp(1.9rem,5.4vw,3.6rem) * var(--a11y-scale)); max-width:20ch;
}
.pagehero .lead{ color:#D3DAFF; max-width:60ch; margin-bottom:0; }

/* ---- Long-form prose ---- */
.prose{ max-width:70ch; }
.prose p{ font-size:calc(1rem * var(--a11y-scale)); }
.prose h3{ margin-top:2rem; }
.prose > *:first-child{ margin-top:0; }
.ticks{ display:grid; gap:.7rem; margin:1.2rem 0; }
.ticks li{ position:relative; padding-left:1.9rem; font-size:calc(.95rem * var(--a11y-scale)); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:14px; height:8px;
  border-left:2.5px solid var(--gold); border-bottom:2.5px solid var(--gold);
  transform:rotate(-45deg);
}
.tph-dark .ticks li::before,.section--night .ticks li::before{ border-color:var(--gold); }

/* Numbered list used for the five pillars (a stated sequence) */
.numbered{ counter-reset:n; display:grid; gap:1.2rem; }
.numbered > li{ counter-increment:n; position:relative; padding-left:3.4rem; }
.numbered > li::before{
  content:counter(n,decimal-leading-zero); position:absolute; left:0; top:-.1em;
  font-weight:900; font-size:calc(1.5rem * var(--a11y-scale)); color:var(--gold); line-height:1;
}

/* ---- Definition-style cards (values, objectives, SDGs) ---- */
.deck{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.deck__item{
  background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--r-md);
  padding:1.4rem 1.5rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.deck__item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.deck__item h3{ font-size:calc(1rem * var(--a11y-scale)); margin-bottom:.45rem; }
.deck__item p{ font-size:calc(.9rem * var(--a11y-scale)); margin:0; }
.tph-dark .deck__item{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); }
.tph-dark .deck__item p{ color:#AEB6DA; }
.deck__num{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:var(--blue); color:#fff; font-weight:900; margin-bottom:.8rem;
  font-size:calc(.9rem * var(--a11y-scale));
}

/* ---- Forms and alerts ---- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.alert{
  margin:1.4rem 0 0; padding:.95rem 1.2rem; border-radius:var(--r-sm);
  border-left:4px solid var(--blue); background:var(--mist); color:var(--ink);
  font-weight:600; font-size:calc(.92rem * var(--a11y-scale));
}
.alert--success{ border-color:#1B8A4B; background:#E9F7EF; }
.alert--error{ border-color:#C62828; background:#FDECEC; }
.form-card{
  background:#fff; border:1px solid var(--card-line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,3.5vw,2.2rem);
}
.field-row{ display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.required{ color:#C62828; }

/* ---- Tables (used on the accessibility statement) ---- */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:calc(.9rem * var(--a11y-scale)); }
table.data th,table.data td{ text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--card-line); }
table.data th{ font-weight:800; color:var(--ink); }

/* ---- Accordion (FAQ) ---- */
.faq{ border-top:1px solid var(--card-line); }
.faq__item{ border-bottom:1px solid var(--card-line); }
.faq__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem .2rem; background:none; border:0; text-align:left;
  font-weight:700; color:var(--ink); font-size:calc(1rem * var(--a11y-scale)); min-height:56px;
}
.faq__q:hover{ color:var(--blue); }
.faq__q::after{ content:"+"; font-size:1.5rem; font-weight:400; color:var(--blue); line-height:1; }
.faq__q[aria-expanded="true"]::after{ content:"–"; }
.faq__a{ padding:0 .2rem 1.3rem; max-width:72ch; }
.faq__a p:last-child{ margin-bottom:0; }

/* ---- Breadcrumbs ---- */
.crumbs{ font-size:calc(.8rem * var(--a11y-scale)); padding:1rem 0 0; color:var(--body); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; list-style:none; margin:0; padding:0; }
.crumbs li{ list-style:none; }
.crumbs li+li::before{ content:"/"; margin-right:.4rem; opacity:.5; }
.crumbs a{ text-decoration:none; color:var(--body); }
.crumbs a:hover{ text-decoration:underline; color:var(--blue); }
.crumbs li[aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   23. HOMEPAGE POLISH — ghost clip, Surge spacing, 80% drawer, darker overlay
   ========================================================================== */

/* Hero overlay is now per-slide (see .herobg__slide::after above), so
   nothing to override here — kept as a marker so future edits know where
   the old shared-overlay approach used to live. */

/* ---- Ghost text: clip inside its own section so it never bleeds upward -- */
.ghosted{ overflow:hidden; }

@media (max-width:1080px){
  .ghost{
    top:0.4rem;                                 /* was -.35em — no longer bleeds up */
    font-size:clamp(1.8rem,10vw,4.5rem);        /* smaller so it fits on narrow screens */
  }
}

/* ---- The Surge section: reduce top padding on tablet / mobile ----------- */
@media (max-width:900px){
  section.section.tph-dark .panel{             /* Surge / Give panels */
    gap:clamp(1rem,3vw,1.6rem);
  }
  .section.section--surge-reduce{              /* applied in index.php */
    padding-block-start:1.8rem !important;
  }
}

/* Suppress old toggle since it's been removed from HTML */
.hero-film__toggle{ display:none !important; }

/* ==========================================================================
   24. GHOST TEXT CLIP + BRAND POLISH
   ========================================================================== */

/* Ghost titles must never bleed past their own section */
.ghosted{ overflow:hidden; contain:layout; }
@media (max-width:1080px){
  .ghost{ top:0.6rem; font-size:clamp(1.7rem,9.5vw,4rem); }
}

.site-header .brand{ text-decoration:none; }

/* ==========================================================================
   25. NAVIGATION — single consolidated implementation (≤1080px)
   This is the ONLY place the mobile/tablet drawer is defined. It sits last
   in the file on purpose, so it always wins the cascade without needing
   !important. If the drawer ever needs changing again, this is the one
   block to edit — nothing else in this file touches .nav below 1081px.
   ========================================================================== */

@media (min-width:1081px){
  .burger{ display:none; }
  .nav__actions{ display:none; }
  .nav__top{ display:none; }
  .nav__idx{ display:none; }
  .nav__ghost{ display:none; }
  /* The mobile-only scroll wrapper must vanish from the box model at desktop
     so .nav__item stays a direct flex child of .nav, same as before. */
  .nav__list{ display:contents; }
}

@media (max-width:1080px){
  .header-cta .btn--outline{ display:none; }
  .header-cta .btn--gold{ display:none; }
  .burger{ display:flex; }

  /* .nav is a fixed-height flex column: top bar and actions are pinned,
     only .nav__list (the middle) ever scrolls, and only if a device is too
     short to fit everything — by default nothing scrolls at all. */
  .nav{
    position:fixed; inset:0 0 0 auto; z-index:950;
    height:100dvh; height:100vh;
    width:min(440px,84vw);
    background:linear-gradient(165deg,#020a24 0%,var(--blue-night) 46%,#050d2e 100%);
    color:#fff;
    display:flex; flex-direction:column;
    padding:0; margin:0; overflow:hidden;
    border-left:0; gap:0;
    transform:translateX(100%); visibility:hidden;
    transition:transform .5s cubic-bezier(.16,1,.3,1), visibility .5s;
    box-shadow:-40px 0 80px -30px rgba(0,0,0,.75);
    isolation:isolate;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; }

  /* Rotated brand watermark running down the right edge — echoes the
     ghost-text device used throughout the rest of the site */
  .nav__ghost{
    position:absolute; z-index:-1; right:-2.4rem; top:38%;
    transform:rotate(90deg); transform-origin:right top;
    font-weight:900; text-transform:uppercase; letter-spacing:.3em;
    font-size:clamp(2.2rem,11vw,3.4rem); color:rgba(255,255,255,.045);
    white-space:nowrap; pointer-events:none;
  }
  /* Diagonal gold accent + soft glow, purely cosmetic */
  .nav::after{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    top:-22%; right:-35%; width:75%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle,rgba(254,205,4,.18) 0%,rgba(254,205,4,0) 70%);
    opacity:0; transition:opacity .9s var(--ease) .15s;
  }
  .nav.is-open::after{ opacity:1; }
  .nav::before{
    content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; width:5px;
    background:linear-gradient(180deg,var(--gold),rgba(254,205,4,.15));
    transform:scaleY(0); transform-origin:top; transition:transform .6s var(--ease) .1s;
  }
  .nav.is-open::before{ transform:scaleY(1); }

  /* Drawer top bar: brand mark + close — fixed, never scrolls */
  .nav__top{
    display:flex; align-items:center; gap:.6rem; flex:0 0 auto;
    padding:calc(env(safe-area-inset-top,0px) + .8rem) 1.4rem .7rem;
    border-bottom:1px solid rgba(254,205,4,.18);
  }
  .nav__top img{ width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
  .nav__top span{ font-weight:800; font-size:calc(.85rem * var(--a11y-scale)); letter-spacing:-.01em; }
  .nav__close{
    margin-left:auto; width:34px; height:34px; border-radius:50%; flex:0 0 auto;
    display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    color:#fff; transition:background .25s var(--ease), transform .35s var(--ease), color .25s var(--ease);
  }
  .nav__close:hover{ background:var(--gold); color:var(--ink); transform:rotate(90deg); }

  /* The only scrollable region — flexes to fill whatever space the pinned
     top bar and bottom actions leave behind. */
  .nav__list{
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .nav__item{
    flex:0 0 auto; position:relative; display:flex; align-items:center; flex-wrap:wrap;
    padding:0 1.4rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .nav__idx{
    flex:0 0 auto; width:1.9rem;
    font-weight:700; font-size:calc(.68rem * var(--a11y-scale)); letter-spacing:.08em;
    color:rgba(254,205,4,.65); transition:color .3s var(--ease);
  }

  .nav__link{
    flex:1 1 auto; color:#fff; background:none; border-radius:0;
    font-weight:800; text-transform:uppercase; letter-spacing:.01em;
    font-size:calc(1.02rem * var(--a11y-scale));
    padding:.72rem 0; min-height:40px;
    display:flex; align-items:center; position:relative;
    transition:color .25s var(--ease);
  }
  .nav__link::after{
    content:""; position:absolute; left:0; bottom:.5rem; height:2px; width:0;
    background:var(--gold); transition:width .35s var(--ease);
  }
  .nav__link:hover{ color:var(--gold); }
  .nav__link:hover::after{ width:2.2rem; }
  .nav__item:has(.nav__link:hover) .nav__idx{ color:var(--gold); }
  .nav__link[aria-current="page"]{ color:var(--gold); }
  .nav__link[aria-current="page"]::after{ width:2.2rem; }

  .nav__caret-btn{
    flex:0 0 auto; width:30px; height:30px; margin-left:.4rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    color:#fff; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  }
  .nav__caret-btn:hover,.nav__caret-btn[aria-expanded="true"]{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
  .nav__caret{ width:10px; height:10px; transition:transform .35s var(--ease); }
  .nav__caret-btn[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }

  /* Accordion via max-height — reliable across browsers, unlike animating
     an intrinsic-sized grid track, which some mobile browsers size wrong
     and can visually collapse onto the sibling below it. max-height always
     reserves real layout space, so nothing ever overlaps. */
  .submenu{
    position:static; top:auto; left:auto; min-width:0;
    flex-basis:100%; width:100%; margin-left:1.9rem;
    background:none; border:0; box-shadow:none; border-radius:0; padding:0; z-index:auto;
    opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .nav__item.is-open .submenu{ max-height:70vh; }
  .submenu__inner{
    padding:.1rem 0 .6rem;
    border-left:1.5px solid rgba(254,205,4,.3);
  }
  .submenu a{
    display:block; opacity:0; transform:translateX(-8px);
    color:#B9C1E4; font-weight:600; border-radius:0;
    font-size:calc(.84rem * var(--a11y-scale));
    padding:.4rem 0 .4rem 1rem;
    transition:color .2s var(--ease), opacity .35s var(--ease) .1s, transform .35s var(--ease) .1s;
  }
  .nav__item.is-open .submenu a{ opacity:1; transform:translateX(0); }
  .submenu a:hover{ color:var(--gold); }
  .submenu a small{ display:block; color:#7E8ABE; font-weight:500; font-size:.8em; }

  /* Bottom actions — pinned, left-aligned to match the rest of the drawer */
  .nav__actions{
    display:flex; flex-direction:column; align-items:flex-start; gap:.85rem; flex:0 0 auto;
    padding:.9rem 1.4rem calc(env(safe-area-inset-bottom,0px) + 1rem);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .nav__donate{
    width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem 1.3rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
    font-size:calc(.86rem * var(--a11y-scale));
    box-shadow:0 0 0 0 rgba(254,205,4,.5); animation:navGlow 2.6s ease-in-out infinite;
  }
  .nav__donate svg{ transition:transform .3s var(--ease); }
  .nav__donate:hover{ animation-play-state:paused; }
  .nav__donate:hover svg{ transform:translateX(4px); }

  .nav__socials{ display:flex; justify-content:flex-start; gap:.6rem; align-self:flex-start; }
  .nav__socials a{
    width:32px; height:32px; border-radius:50%;
    display:grid; place-items:center; color:#fff;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  }
  .nav__socials a svg{ width:14px; height:14px; }
  .nav__socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-3px); }

  /* Staggered entrance for every row as the drawer slides in */
  .nav__top, .nav__item, .nav__actions{
    opacity:0; transform:translateY(12px);
    transition:opacity .45s var(--ease), transform .45s var(--ease);
  }
  .nav.is-open .nav__top, .nav.is-open .nav__item, .nav.is-open .nav__actions{ opacity:1; transform:translateY(0); }
  .nav.is-open .nav__top{ transition-delay:.05s }
  .nav.is-open .nav__list .nav__item:nth-child(1){ transition-delay:.09s }
  .nav.is-open .nav__list .nav__item:nth-child(2){ transition-delay:.12s }
  .nav.is-open .nav__list .nav__item:nth-child(3){ transition-delay:.15s }
  .nav.is-open .nav__list .nav__item:nth-child(4){ transition-delay:.18s }
  .nav.is-open .nav__list .nav__item:nth-child(5){ transition-delay:.21s }
  .nav.is-open .nav__list .nav__item:nth-child(6){ transition-delay:.24s }
  .nav.is-open .nav__list .nav__item:nth-child(7){ transition-delay:.27s }
  .nav.is-open .nav__actions{ transition-delay:.32s }

  html.a11y-nomotion .nav,
  html.a11y-nomotion .nav__top, html.a11y-nomotion .nav__item, html.a11y-nomotion .nav__actions,
  html.a11y-nomotion .submenu, html.a11y-nomotion .submenu a, html.a11y-nomotion .nav__caret,
  html.a11y-nomotion .nav__close, html.a11y-nomotion .nav__donate, html.a11y-nomotion .nav__socials a,
  html.a11y-nomotion .nav::before, html.a11y-nomotion .nav::after{
    transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;
  }
  html.a11y-nomotion .submenu{ max-height:0; }
  html.a11y-nomotion .nav__item.is-open .submenu{ max-height:70vh; }
}

@keyframes navGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(254,205,4,.45); }
  50%{ box-shadow:0 0 0 10px rgba(254,205,4,0); }
}
@media (max-width:380px){
  .nav{ width:100vw; }
}


/* ==========================================================================
   26. HERO CAROUSEL — resilient fallbacks
   If a slide's real photo/video fails (blocked CDN, offline, slow network),
   it falls back to one of three distinct brand-coloured treatments instead
   of a blank layer — so the crossfade stays visibly a carousel regardless
   of whether the external media loads.
   ========================================================================== */
.herobg__slide--fallback img,
.herobg__slide--fallback video{ display:none; }

.herobg__slide--1.herobg__slide--fallback{
  background:linear-gradient(135deg,#021874 0%,#042CCA 55%,#0a1550 100%);
}
.herobg__slide--2.herobg__slide--fallback{
  background:linear-gradient(200deg,#042CCA 0%,#020a24 70%);
}
.herobg__slide--3.herobg__slide--fallback{
  background:radial-gradient(120% 100% at 20% 20%,#0a3fd9 0%,#021030 75%);
}
.herobg__slide--fallback::after{
  content:""; position:absolute; left:50%; top:50%; width:46%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-12deg); border-radius:50%;
  border:clamp(16px,4vw,34px) solid rgba(254,205,4,.22);
  clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);
}