/* ============================================================================
   Smart Mosque  ·  Public marketing site
   Built on Brand Guidelines Version 2.
   Palette: Midnight, White, Brass Gold. Type: Archivo. Vector + type only.
   Voice: vision-led, generational. No emoji. No stock photography.
   ========================================================================== */

:root {
  /* ── V2 palette (from Brand Guidelines V2) ── */
  --midnight:  #0B0710;   /* primary ground */
  --ink:       #15101D;   /* panels */
  --panel:     #181221;
  --line:      #2A2235;
  --line-soft: #221B2E;
  --white:     #FFFFFF;
  --grey:      #A99FB8;   /* secondary text on midnight */
  --soft:      #CBD5E1;
  --gold:      #C9A144;   /* brass, honour and accent */
  --gold-deep: #9A7A2E;
  --gold-soft: #E3C77E;
  --charcoal:  #50493B;
  --stone:     #F2EFE8;   /* light surface */
  --stone-2:   #FAF7F0;
  --stone-line:#E2DCD0;
  --cyan:      #38BDF8;   /* digital accent only, used sparingly, never on the mark */

  --maxw: 1180px;
  --pad-x: clamp(22px, 5vw, 64px);
  --pad-y: clamp(80px, 11vh, 150px);

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
/* Reserve the scrollbar gutter on both edges so centred content stays centred
   in the window (a classic scrollbar otherwise shifts everything ~7-8px left,
   which is visible on the large hero watermark). No effect with overlay scrollbars. */
html { scroll-behavior: smooth; scrollbar-gutter: stable both-edges; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; padding: 0; }

body {
  background: var(--midnight);
  color: var(--white);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-emoji: text;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

/* Quranic glyph: render as text, not emoji */
.glyph {
  font-family: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  font-weight: 400;
  font-feature-settings: "calt", "liga";
  font-variant-emoji: text;
}

/* ── focus visibility ── */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================================
   Layout primitives
   ========================================================================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--pad-y) 0; position: relative; scroll-margin-top: 84px; }

.sec-midnight { background: var(--midnight); color: var(--white); }
.sec-ink      { background: var(--ink);      color: var(--white); }
.sec-stone    { background: var(--stone);    color: var(--midnight); }

/* hairline divider between adjacent dark sections */
.sec-midnight + .sec-midnight,
.sec-ink + .sec-ink { border-top: 1px solid var(--line); }

/* ── kicker / eyebrow ── */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
}
.kicker::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.kicker.center { justify-content: center; }
.kicker.center::after { content: ""; width: 32px; height: 1px; background: var(--gold); }

/* ── headings ── */
.h-display {
  font-weight: 700;
  font-size: clamp(32px, 6.3vw, 82px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h2 {
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  color: var(--grey);
  max-width: 60ch;
  text-wrap: pretty;
}
.sec-stone .lede { color: #5a5266; }
.accent { color: var(--gold); }
.accent-cyan { color: var(--cyan); }

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 26px; border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--midnight); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { border-color: currentColor; color: var(--white); }
.btn-ghost:hover { background: var(--white); color: var(--midnight); }
.sec-stone .btn-ghost { color: var(--midnight); }
.sec-stone .btn-ghost:hover { background: var(--midnight); color: var(--white); }
.btn .arw {
  width: 16px; height: 10px; position: relative; transition: transform .18s var(--ease);
}
.btn .arw::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.btn .arw::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.btn:hover .arw { transform: translateX(3px); }

/* ============================================================================
   Navigation
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 7, 16, 0.55);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), padding .25s var(--ease);
}
.nav.scrolled {
  background: rgba(11, 7, 16, 0.92);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding .25s var(--ease);
}
.nav.scrolled .nav-inner { padding-top: 11px; padding-bottom: 11px; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand .nav-mark { height: 30px; width: auto; flex: 0 0 auto; }
.nav-brand .nav-wordmark { height: 15px; width: auto; }
.nav.scrolled .nav-brand .nav-mark { height: 27px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--grey);
  position: relative; padding: 4px 0; transition: color .15s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--gold); transition: width .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a.active::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 18px; }

.nav-burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line);
  background: transparent; cursor: pointer; position: relative; border-radius: var(--r-sm);
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 50%; width: 18px; height: 1.6px; background: var(--white);
  transform: translateX(-50%); transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-burger span { top: 50%; transform: translate(-50%, -50%); }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
body.menu-open .nav-burger span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* mobile drawer */
.mobile-menu {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 55;
  background: var(--ink); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .32s var(--ease);
  padding: 96px 32px 40px; display: flex; flex-direction: column; gap: 6px;
}
body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu a {
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--white);
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.mobile-menu a.cta {
  margin-top: 24px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--gold); color: var(--midnight); border-bottom: none;
  padding: 15px 26px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.mobile-menu a.cta:hover { background: var(--gold-soft); transform: translateY(-2px); }
.menu-scrim {
  position: fixed; inset: 0; z-index: 54; background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
body.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }

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

/* ============================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--midnight);
  padding: clamp(96px, 15vh, 168px) var(--pad-x) clamp(72px, 11vh, 128px);
  position: relative; overflow: hidden; text-align: center;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 22%, rgba(201,161,68,0.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 88%, rgba(56,189,248,0.05), transparent 55%);
}
.hero::after { /* saff dot echo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 24px 24px, rgba(201,161,68,0.06) 1.3px, transparent 1.8px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 78%, transparent 100%);
}
/* faint mosque-mark watermark behind the hero content.
   Large and uniformly subtle: the dome crescent sits just below the nav,
   centred between the nav links and fully clear of the bar, the arches frame
   the whole headline, and the legs read to full length before fading out low
   in the hero. Default hidden; shown only where the dual-mask composite is
   supported, so unsupported engines never paint a bare gold rectangle. */
.hero-watermark {
  display: none;
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 6px;
  transform: translateX(-50%);
  width: min(1180px, 94vw);
  aspect-ratio: 918 / 859;
  background: var(--gold);
  -webkit-mask:
    url("assets/logo/smart-mosque-mark-white.png") center / 100% 100% no-repeat,
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    url("assets/logo/smart-mosque-mark-white.png") center / 100% 100% no-repeat,
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 70%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.08;
}
@supports (
  ((-webkit-mask-image: url("")) and (-webkit-mask-composite: source-in)) or
  ((mask-image: url("")) and (mask-composite: intersect))
) {
  .hero-watermark { display: block; }
}
/* On narrow screens the nav is shorter and the mark scales down: drop the
   negative offset so the crescent sits just below the nav in view, and widen
   slightly so the arches still frame the (taller, wrapped) headline. */
@media (max-width: 600px) {
  .hero-watermark {
    width: min(470px, 108vw);
    top: 16px;
  }
}

.hero-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-mark { width: clamp(78px, 11vw, 116px); margin-bottom: 34px; color: var(--gold); }
.hero-mark svg { width: 100%; height: auto; }
.hero .kicker { margin-bottom: 26px; }
.hero h1 { color: var(--white); max-width: 20ch; }
.hero h1 .dot { color: var(--gold); }
.hero-sub {
  margin: 30px auto 0; max-width: 60ch;
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 400; color: var(--soft); line-height: 1.7;
}
.hero-cta { margin-top: 42px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-event {
  margin-top: 40px; display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,0.02);
  font-size: 12.5px; letter-spacing: 0.06em; color: var(--grey);
}
.hero-event .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(201,161,68,0.6); animation: pulse 2.4s infinite;
}
.hero-event b { color: var(--white); font-weight: 600; }
.hero-event a { color: var(--gold); font-weight: 600; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201,161,68,0.55); }
  70% { box-shadow: 0 0 0 12px rgba(201,161,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,161,68,0); }
}
@media (prefers-reduced-motion: reduce) { .hero-event .pulse { animation: none; } }

/* ============================================================================
   Problem
   ========================================================================== */
.problem { text-align: center; }
.problem .punch {
  margin: 26px auto 0; max-width: 20ch;
  font-weight: 700; font-size: clamp(26px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
}
.problem .punch .accent { color: var(--gold); }
.problem .lede { margin: 30px auto 0; text-align: center; }

/* ============================================================================
   Two-column intro (vision / strategy heads)
   ========================================================================== */
.split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.split .head h2 { margin-top: 16px; }
.split .head .lede { margin-top: 24px; }

/* ── value rows (vision) ── */
.value-list { display: flex; flex-direction: column; }
.value-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 22px;
  padding: 26px 0; border-top: 1px solid var(--stone-line);
}
.sec-midnight .value-row, .sec-ink .value-row { border-top-color: var(--line); }
.value-row:last-child { border-bottom: 1px solid var(--stone-line); }
.sec-midnight .value-row:last-child, .sec-ink .value-row:last-child { border-bottom-color: var(--line); }
.value-row .vr-num {
  width: 40px; height: 40px; border: 1px solid var(--gold); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex: 0 0 auto;
}
.value-row h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.value-row p { font-size: 15px; color: var(--grey); line-height: 1.6; }
.sec-stone .value-row p { color: #5a5266; }

/* ============================================================================
   System  ·  the saff loop
   ========================================================================== */
.system-head { text-align: center; margin-bottom: 64px; }
.system-head h2 { margin: 18px auto 0; max-width: 22ch; }
.system-head .lede { margin: 26px auto 0; text-align: center; }

.saff {
  display: grid; grid-template-columns: repeat(6, 1fr);
  position: relative; max-width: 1080px; margin: 0 auto;
}
.saff-line {
  position: absolute; left: 8%; right: 8%; top: 27px; height: 1px;
  background: var(--line); z-index: 0;
}
.saff-line .saff-fill {
  position: absolute; inset: 0 100% 0 0; background: var(--gold);
  box-shadow: 0 0 12px rgba(201,161,68,0.55);
  transition: right 1.6s var(--ease);
}
.station { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 0 8px; }
.station .node {
  width: 54px; height: 54px; border-radius: 50%; background: var(--midnight);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.station .node::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--line);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.station.lit .node { border-color: var(--gold); }
.station.lit .node::before { background: var(--gold); box-shadow: 0 0 16px rgba(201,161,68,0.7); }
.station .st-num { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; color: var(--gold); }
.station .st-label { font-size: 15px; font-weight: 600; color: var(--white); }
.station .st-meta { font-size: 12.5px; color: var(--grey); line-height: 1.45; max-width: 17ch; }

.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line);
}
.pillar .p-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pillar h3 { margin-top: 14px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.pillar p { margin-top: 12px; font-size: 15px; color: var(--grey); line-height: 1.6; }

/* ============================================================================
   Phased strategy
   ========================================================================== */
.phases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--stone-line); border: 1px solid var(--stone-line); margin-top: 8px; }
.sec-midnight .phases, .sec-ink .phases { background: var(--line); border-color: var(--line); }
.phase {
  background: var(--stone); padding: 38px 34px; display: flex; flex-direction: column; gap: 12px;
}
.sec-midnight .phase, .sec-ink .phase { background: var(--ink); }
.phase .ph-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.phase h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.phase .ph-dur { font-size: 14px; color: var(--gold-deep); font-weight: 600; }
.sec-midnight .phase .ph-dur, .sec-ink .phase .ph-dur { color: var(--gold); }
.phase .ph-body { font-size: 15px; color: #5a5266; line-height: 1.6; }
.sec-midnight .phase .ph-body, .sec-ink .phase .ph-body { color: var(--grey); }
.phase .ph-out { margin-top: 6px; font-size: 14px; color: var(--midnight); font-weight: 600; line-height: 1.5; }
.sec-midnight .phase .ph-out, .sec-ink .phase .ph-out { color: var(--white); }

/* ============================================================================
   Programme weeks
   ========================================================================== */
.programme-head { text-align: center; margin-bottom: 56px; }
.programme-head h2 { margin: 18px auto 0; max-width: 24ch; }
.programme-head .lede { margin: 24px auto 0; text-align: center; }
.weeks { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--stone-line); }
.week {
  padding: 32px 28px; border-right: 1px solid var(--stone-line); border-bottom: 1px solid var(--stone-line);
  display: flex; flex-direction: column; gap: 12px; transition: background .18s var(--ease);
}
.week:hover { background: var(--stone-2); }
.week:nth-child(3n) { border-right: 0; }
.week:nth-last-child(-n+3) { border-bottom: 0; }
.week .wk-num { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.week h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; color: var(--midnight); }
.week .wk-q { font-size: 14.5px; font-style: italic; color: #6b6276; }
.week .wk-do { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--stone-line); font-size: 13px; color: #4a4356; line-height: 1.55; }

/* ============================================================================
   Event  ·  AI Future Skills Day
   ========================================================================== */
.event { position: relative; overflow: hidden; }
.event::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,161,68,0.12), transparent 60%);
}
.event-inner { position: relative; z-index: 1; }
.event-head { text-align: center; }
.event-title {
  margin-top: 10px; font-weight: 700; font-size: clamp(29px, 5.8vw, 78px); line-height: 1.02; letter-spacing: -0.03em;
}
.event-tag { margin-top: 18px; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); }

/* countdown */
.countdown-heading {
  text-align: center; margin: 42px auto 0; font-size: 15px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.countdown-heading[hidden] { display: none; }
.countdown { display: flex; justify-content: center; gap: clamp(14px, 3vw, 36px); margin: 24px 0 48px; }
.cd-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 64px; }
.cd-num {
  font-size: clamp(34px, 5.5vw, 60px); font-weight: 700; letter-spacing: -0.02em; color: var(--white);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cd-cell .cd-lab { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.cd-sep { font-size: clamp(28px, 4vw, 48px); color: var(--line); align-self: flex-start; line-height: 1; }
.countdown.passed { display: none; }
.event-live { text-align: center; margin: 40px auto; font-size: 18px; color: var(--gold); font-weight: 600; }
.event-live[hidden] { display: none; }

/* speakers */
.speakers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 52px); max-width: 720px; margin: 8px auto 0; }
.speaker { display: flex; flex-direction: column; align-items: center; text-align: center; }
.arch-frame { position: relative; width: clamp(190px, 28vw, 268px); aspect-ratio: 332 / 404; }
.arch-frame .arch-key { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); max-width: none; }
.arch-win {
  position: absolute; inset: 0; overflow: hidden; background: #ffffff;
  /* clip the photo to the mosque-arch with an external SVG mask file. The prior
     inline ;utf8 data-URI failed to load, which let the rectangular photo spill
     past the arch outline. An external file loads reliably across browsers. */
  -webkit-mask: url("assets/arch-mask.svg") center / 100% 100% no-repeat;
  mask: url("assets/arch-mask.svg") center / 100% 100% no-repeat;
}
/* contain (not cover): show the whole head; the arch peak would otherwise
   slice the top of a width-filling headshot. White photo backgrounds blend
   into the white frame so the side margins are invisible. The ~6% top inset
   keeps the crown clear of the narrow arch peak (per Codex review). */
.arch-win img { position: absolute; left: 0; top: 6%; width: 100%; height: 94%; object-fit: contain; object-position: center; }
.arch-win.left img, .arch-win.right img { transform: none; }
/* Shabir's photo sits to the right in its frame; nudge it left to centre his head. */
.arch-win.left img { object-position: 13% center; }
.speaker .sp-name { margin-top: 24px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.015em; }
.speaker .sp-role { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.speaker .sp-bio { margin-top: 12px; font-size: 15px; color: var(--grey); line-height: 1.55; max-width: 32ch; }
.speaker .sp-bio b { color: var(--soft); font-weight: 600; }

/* three levels */
.levels { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.levels .lv-eye { text-align: center; }
.levels-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; margin-top: 32px; }
.level { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 14px; }
.level .lv-num { width: 40px; height: 40px; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.level h4 { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.015em; }
.level p { font-size: 14px; color: var(--grey); line-height: 1.5; max-width: 24ch; }
.lv-arw { display: flex; align-items: center; justify-content: center; color: var(--gold-deep); padding-top: 8px; }
.lv-arw svg { width: 34px; height: 18px; }
.levels-take { margin: 36px auto 0; text-align: center; max-width: 58ch; font-size: 16px; color: var(--soft); }
.levels-take b { color: var(--white); font-weight: 600; }

/* event meta + cta */
.event-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-top: 64px;
}
.em-cell { background: var(--ink); padding: 26px 24px; display: flex; gap: 14px; align-items: flex-start; }
.em-cell .em-ic { color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.em-cell .em-ic svg { width: 26px; height: 26px; }
.em-cell .em-v { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; color: var(--white); }
.em-cell .em-k { margin-top: 5px; font-size: 13px; color: var(--grey); line-height: 1.4; }

.event-cta {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 38px 34px; border: 1px solid var(--gold-deep); background: var(--ink);
}
.event-cta .ec-text h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: -0.01em; }
.event-cta .ec-text h3 em { font-style: normal; color: var(--gold); }
.event-cta .ec-text p { margin: 10px auto 0; max-width: 60ch; font-size: 15px; color: var(--grey); line-height: 1.6; }
.event-cta .ec-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.event-cta .ec-note { font-size: 12px; color: var(--gold); letter-spacing: 0.04em; }

/* ============================================================================
   Principles
   ========================================================================== */
.principles-head { text-align: center; margin-bottom: 56px; }
.principles-head h2 { margin: 18px auto 0; max-width: 18ch; }
.principles-head .lede { margin: 24px auto 0; text-align: center; }
.principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.principle { background: var(--midnight); padding: 32px 30px; display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; }
.sec-ink .principle { background: var(--ink); }
.principle .pr-num { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); padding-top: 4px; }
.principle h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.principle p { font-size: 14.5px; color: var(--grey); line-height: 1.6; }

/* ============================================================================
   Anchor quote
   ========================================================================== */
.anchor { text-align: center; position: relative; overflow: hidden; }
.anchor::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,161,68,0.12), transparent 62%); }
.anchor-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; }
.anchor .a-rule { width: 72px; height: 1px; background: var(--gold); margin: 0 auto 40px; box-shadow: 0 0 14px rgba(201,161,68,0.55); }
.anchor blockquote {
  font-weight: 700; font-size: clamp(26px, 4.2vw, 50px); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--white); max-width: 24ch; margin: 0 auto; text-wrap: balance;
}
.anchor blockquote .accent { color: var(--gold); }
.anchor figcaption { margin-top: 42px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey); }

/* ============================================================================
   Get involved
   ========================================================================== */
.involve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.involve-card {
  background: var(--ink); border: 1px solid var(--line); padding: 44px 40px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.involve-card .ic-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.involve-card h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--white); }
.involve-card p { font-size: 15.5px; color: var(--grey); line-height: 1.65; }
.involve-card .btn { margin-top: 8px; }
.involve-card .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.45); }
.involve-card .btn-ghost:hover { background: var(--white); color: var(--midnight); border-color: var(--white); }

/* ============================================================================
   Footer
   ========================================================================== */
.footer { background: var(--midnight); color: var(--grey); padding: 72px var(--pad-x) 44px; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; align-items: start; }
.footer-brand .fb-lockup { width: 168px; }
.footer-brand .fb-powered { margin-top: 24px; display: flex; align-items: center; gap: 13px; }
.footer-brand .fb-powered .pb { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #6f6880; }
.footer-brand .fb-powered .pb-infraly { display: inline-flex; align-items: center; gap: 9px; }
.footer-brand .fb-powered .pb-mark { height: 18px; width: auto; display: block; }
.footer-brand .fb-powered .pb-word { height: 12.5px; width: auto; display: block; color: var(--soft); }
.footer-brand .fb-line { margin-top: 22px; max-width: 38ch; font-size: 13.5px; line-height: 1.6; color: var(--grey); }
.footer-col h4 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--soft); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col ul li a { font-size: 14px; color: var(--grey); transition: color .15s var(--ease); }
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom {
  max-width: var(--maxw); margin: 52px auto 0; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal);
}
.footer-bottom a { color: var(--charcoal); }
.footer-bottom a:hover { color: var(--grey); }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-right .btn { display: none; }
  .nav-burger { display: block; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .pillars { grid-template-columns: 1fr; gap: 22px; }
  .phases { grid-template-columns: 1fr; }
  .weeks { grid-template-columns: repeat(2, 1fr); }
  .week:nth-child(3n) { border-right: 1px solid var(--stone-line); }
  .week:nth-child(2n) { border-right: 0; }
  .week:nth-last-child(-n+3) { border-bottom: 1px solid var(--stone-line); }
  .week:nth-last-child(-n+2) { border-bottom: 0; }
  .principles-grid { grid-template-columns: 1fr; }
  .involve-grid { grid-template-columns: 1fr; }
  .event-meta { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .saff { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .saff-line { display: none; }
  .speakers { grid-template-columns: 1fr; gap: 44px; }
  .levels-row { grid-template-columns: 1fr; gap: 20px; }
  .lv-arw { transform: rotate(90deg); padding: 4px 0; }
}

@media (max-width: 540px) {
  .weeks { grid-template-columns: 1fr; }
  .week:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--stone-line); }
  .week:last-child { border-bottom: 0; }
  .event-meta { grid-template-columns: 1fr; }
  .countdown { gap: 10px; }
  .cd-cell { min-width: 52px; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* keep eyebrows on one line on narrow phones */
  .kicker { letter-spacing: 0.14em; gap: 10px; font-size: 11px; }
  .kicker::before, .kicker::after { width: 18px; }
}

/* print niceties */
@media print {
  .nav, .nav-burger, .mobile-menu, .menu-scrim, .hero-cta, .countdown { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 24px 0; }
}

/* ============================================================================
   Scrollytelling  ·  the prophetic model (three arches: child, parent, educator)
   Scroll-scrubbed: each arch lights gold in turn, then unite under the crescent.
   ========================================================================== */
.scrolly { position: relative; background: var(--midnight); scroll-margin-top: 84px; }
.scrolly-track { height: 360vh; position: relative; }
.scrolly-stage {
  position: sticky; top: 0; height: 100vh; min-height: 620px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.scrolly-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 46% at 50% 40%, rgba(201,161,68,0.16), transparent 62%);
}
.scrolly-stage::after { /* faint saff dot field */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 24px 24px, rgba(201,161,68,0.05) 1.3px, transparent 1.8px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 78%, transparent);
}
.scrolly-inner {
  position: relative; z-index: 1; width: 100%; max-width: 900px; padding: 0 var(--pad-x);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.scrolly-inner > .kicker { margin-bottom: clamp(22px, 4vh, 40px); }
.arches { position: relative; width: min(74vw, 440px); aspect-ratio: 363 / 350; }
.arches svg { width: 100%; height: 100%; display: block; overflow: visible; will-change: transform; }
.arches .gold { opacity: 0; }              /* driven directly by scroll JS, no transition */
.arch-label {
  position: absolute; top: 100%; transform: translate(-50%, 10px);
  font-size: clamp(11px, 1.5vw, 13.5px); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); opacity: 0; white-space: nowrap;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.arch-label.in { opacity: 1; transform: translate(-50%, 0); }
.lbl-child { left: 21%; } .lbl-parent { left: 50%; } .lbl-educator { left: 79%; }
.scrolly-caps { position: relative; width: 100%; min-height: 4.4em; margin-top: clamp(54px, 8vh, 92px); }
.scrolly-caps .cap {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 100%; max-width: 24ch; margin: 0 auto;
  font-weight: 700; font-size: clamp(22px, 3.6vw, 40px); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--white); opacity: 0; transition: opacity .5s var(--ease); text-wrap: balance;
}
.scrolly-caps .cap.in { opacity: 1; }
.scrolly-caps .cap .accent { color: var(--gold); }
.scrolly-close {
  position: relative; z-index: 1; text-align: center;
  padding: clamp(64px, 12vh, 130px) var(--pad-x) clamp(80px, 14vh, 150px);
}
.scrolly-close .kicker { margin-bottom: 18px; }
.scrolly-close h2 { margin: 0 auto; max-width: 18ch; }
.scrolly-close .lede { margin: 26px auto 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .scrolly-track { height: auto; }
  .scrolly-stage { position: static; height: auto; padding: var(--pad-y) 0; }
  .arches .gold { opacity: 1; }
  .arch-label { opacity: 1; transform: translate(-50%, 0); }
  .scrolly-caps { min-height: 0; }
  .scrolly-caps .cap { position: static; transform: none; opacity: 0; max-width: 24ch; }
  .scrolly-caps .cap:last-child { opacity: 1; }
}
@media (max-width: 560px) {
  .scrolly-track { height: 320vh; }
  .lbl-child { left: 19%; } .lbl-educator { left: 81%; }
}

/* ============================================================================
   Registration  ·  /register and /success
   ========================================================================== */
.reg-body { min-height: 100vh; display: flex; flex-direction: column; }
.reg-top {
  border-bottom: 1px solid var(--line);
  padding: 18px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.reg-top .reg-brand { display: flex; align-items: center; gap: 12px; }
.reg-top .reg-brand img.m { height: 28px; width: auto; }
.reg-top .reg-brand img.w { height: 14px; width: auto; }
.reg-top .reg-back { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.reg-top .reg-back:hover { color: var(--white); }

.reg-main { flex: 1; padding: clamp(40px, 7vh, 80px) var(--pad-x); }
.reg-grid {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start;
}

/* left: event summary */
.reg-summary .kicker { margin-bottom: 18px; }
.reg-summary h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.reg-summary .rs-tag { margin-top: 14px; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.reg-facts { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.reg-fact { display: flex; gap: 14px; align-items: flex-start; }
.reg-fact .rf-ic { color: var(--gold); flex: 0 0 auto; margin-top: 1px; }
.reg-fact .rf-ic svg { width: 22px; height: 22px; }
.reg-fact .rf-v { font-size: 15.5px; font-weight: 600; color: var(--white); }
.reg-fact .rf-k { font-size: 13.5px; color: var(--grey); margin-top: 3px; }
.reg-price { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.reg-price .rp-amt { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--gold); }
.reg-price .rp-per { font-size: 14px; color: var(--grey); }

/* right: form card */
.reg-card { background: var(--ink); border: 1px solid var(--line); padding: clamp(26px, 4vw, 40px); }
.reg-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
.reg-card .rc-sub { font-size: 14px; color: var(--grey); margin-bottom: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--soft); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--white);
  background: var(--midnight); border: 1px solid var(--line); border-radius: 6px;
  padding: 13px 14px; width: 100%; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 76px; }
.field input::placeholder, .field textarea::placeholder { color: #6b6276; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,161,68,0.18);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23A99FB8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.check {
  grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; color: var(--soft); line-height: 1.5; cursor: pointer;
}
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.form-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.form-actions .btn { justify-content: center; width: 100%; padding: 17px 26px; font-size: 13px; }
.form-actions .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.form-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--grey); }
.form-secure svg { width: 14px; height: 14px; color: var(--gold); }
.form-error {
  display: none; margin-top: 16px; padding: 12px 16px; border: 1px solid #6e2b2b; background: rgba(120,40,40,0.18);
  color: #f0b4b4; font-size: 13.5px; border-radius: 6px;
}
.form-error.show { display: block; }

@media (max-width: 860px) {
  .reg-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* success page */
.success-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px var(--pad-x); text-align: center; }
.success-inner { max-width: 560px; }
.success-mark { width: 84px; margin: 0 auto 28px; }
.success-badge {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 26px;
  border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.success-badge svg { width: 30px; height: 30px; }
.success-inner h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 700; letter-spacing: -0.02em; }
.success-inner p { margin-top: 18px; font-size: 16px; color: var(--grey); line-height: 1.65; }
.success-card { margin-top: 32px; border: 1px solid var(--line); background: var(--ink); padding: 26px 28px; text-align: left; }
.success-card .sc-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
.success-card .sc-row svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; margin-top: 2px; }
.success-card .sc-row span { font-size: 14.5px; color: var(--soft); }
.success-actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }