:root{
    --bg:#080808;
    --surface:#0d0d0d;
    --surface-2:#131313;
    --ink:#f5f3ee;
    --ink-mute:rgba(245,243,238,.55);
    --ink-faint:rgba(245,243,238,.28);
    --hair:rgba(245,243,238,.08);
    --hair-strong:rgba(245,243,238,.16);
    --acc:#c8ff00;
    --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
    --disp:'Space Grotesk','Inter',sans-serif;
    --tam:'Noto Sans Tamil',var(--disp);
    --edge:clamp(20px,4vw,56px);
    --stack:clamp(56px,7vw,110px);
    /* Aliases: some sections below were written against these names.
       Mapped onto the palette above so every section stays on-theme. */
    --lime:var(--acc);
    --bg-card:var(--surface);
    --bg-card-2:var(--surface-2);
    --text-white:var(--ink);
    --text-faint:var(--ink-mute);
    --container-max:1200px;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{color-scheme:dark}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  html{scroll-behavior:smooth}
  body{overflow-x:hidden;font-size:16px;line-height:1.55;font-weight:400}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  ::selection{background:var(--acc);color:#000}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  }

  /* ---------- Layout primitives ---------- */
  .wrap{padding-left:var(--edge);padding-right:var(--edge)}
  .container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--edge);padding-right:var(--edge)}

  /* Small utility classes (spacing/weight) used inline in the markup */
  .mt-2{margin-top:.5rem}
  .mb-3{margin-bottom:1rem}
  .fw-semibold{font-weight:600}

  /* Simple responsive grid for the "Four things" cards.
     Scoped to .order-section so it can't collide with the unrelated
     .row used by the registration form further down the page. */
  .order-section .row{display:flex;flex-wrap:wrap;margin:0 -.6rem;row-gap:1.2rem}
  .order-section .row > [class*="col-"]{padding:0 .6rem;min-width:0}
  .order-section .col-6{flex:0 0 50%;max-width:50%}
  @media (min-width:992px){.order-section .col-lg-3{flex:0 0 25%;max-width:25%}}
  @media (max-width:479px){.order-section .col-6{flex:0 0 100%;max-width:100%}}
  .rule{height:1px;background:var(--hair);width:100%}
  .eyebrow{font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
  .eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);vertical-align:middle;margin-right:10px;transform:translateY(-1px)}
  .eyebrow.light{display:flex;align-items:center;color:var(--ink-mute)}
  .eyebrow-bar{display:inline-block;width:18px;height:1px;background:var(--acc);margin-right:10px;flex-shrink:0}
  .meta-sub{color:var(--ink-mute);font-weight:400;font-size:13px;margin-top:2px}

  /* ---------- Nav ---------- */
  .nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--edge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(8,8,8,.55);border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
  .nav.is-stuck{border-bottom-color:var(--hair);background:rgba(8,8,8,.82)}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;letter-spacing:.02em;text-decoration:none;flex-shrink:0}
  .brand-mark{width:26px;height:26px;position:relative;display:grid;place-items:center}
  .brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--ink)}
  .brand-mark::before{width:2px;height:22px}
  .brand-mark::after{width:22px;height:2px}
  .brand-mark span{position:absolute;inset:auto;width:6px;height:6px;background:var(--acc);border-radius:50%;bottom:-2px;right:-2px}
  .brand-text{font-size:14px}
  .brand-text small{display:block;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:2px}
  .brand-logo{width: 150px;height:auto;display:block;object-fit:contain}

  /* Left cluster of the header: logo + back-to-home, always visible (not part of the collapsing mobile menu) */
  .nav-left{display:flex;align-items:center;gap:14px;min-width:0}
  .nav-back{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:8px 14px;border:1px solid var(--hair-strong);border-radius:999px;font-family:var(--disp);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;transition:color .2s ease,border-color .2s ease,gap .2s ease}
  .nav-back:hover{color:var(--acc);border-color:var(--acc);gap:11px}
  .nav-back .arw{display:inline-block;width:12px;height:8px;position:relative;flex-shrink:0}
  .nav-back .arw::before{content:"";position:absolute;width:12px;height:1.5px;background:currentColor;top:50%;left:0;transform:translateY(-50%)}
  .nav-back .arw::after{content:"";position:absolute;width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);left:0;top:1px}
  @media (max-width:560px){
    .brand-logo{width:110px}
    .nav-back{padding:8px;border-radius:50%}
    .nav-back-text{display:none}
  }

  /* Hamburger toggle (mobile only) */
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;flex-shrink:0;z-index:60}
  .nav-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* Menu group: links + utility links + CTA, all in one flex row on desktop */
  .nav-menu{display:flex;align-items:center;gap:28px}
  .nav-links{display:flex;gap:24px;align-items:center}
  .nav-links a{font-size:13px;color:var(--ink-mute);white-space:nowrap;transition:color .2s ease}
  .nav-links a:hover{color:var(--ink)}
  .nav-utility{display:flex;gap:18px;align-items:center;padding-left:24px;border-left:1px solid var(--hair)}
  .nav-utility a{font-size:12px;color:#000;white-space:nowrap;transition:color .2s ease}
  .nav-utility a:hover{color:#000}
  .nav-cta{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#000;padding:10px 16px;border-radius:999px;font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.02em;white-space:nowrap;transition:transform .2s ease}
  .nav-cta:hover{transform:translateY(-1px)}
  .nav-current{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:white;white-space:nowrap}
  .nav-current .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);flex-shrink:0}
  @media (max-width:1099px){.nav-current{width:100%;padding:12px 0;border-bottom:1px solid var(--hair)}}

  /* Mobile: collapse into a dropdown panel triggered by the hamburger.
     Raised from 899px to 1099px — below that width the full desktop
     nav (logo + 4 links + 3 utility links + CTA) doesn't fit
     comfortably on tablets / small laptops. */
  @media (max-width:1099px){
    .nav-menu{position:fixed;top:0;right:0;left:0;display:flex;flex-direction:column;align-items:stretch;gap:0;
      padding:calc(64px + var(--edge)) var(--edge) 28px;
      background:rgba(8,8,8,.97);backdrop-filter:blur(12px);
      border-bottom:1px solid var(--hair);
      transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
      transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
    .nav-menu.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease,transform .25s ease}
    .nav-links{flex-direction:column;align-items:flex-start;gap:0}
    .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px}
    .nav-utility{flex-direction:column;align-items:flex-start;gap:0;padding-left:0;border-left:0;margin-top:4px}
    .nav-utility a{width:100%;padding:12px 0;border-bottom:1px solid var(--hair);font-size:13px}
    .nav-cta{justify-content:center;margin-top:20px}
  }
  @media (min-width:1100px){.nav-toggle{display:none}}
  /* Tighten the gaps a touch right after the cutover so the full
     desktop nav doesn't feel cramped on smaller laptop widths. */
  @media (min-width:1100px) and (max-width:1279px){
    .nav-menu{gap:18px}
    .nav-links{gap:16px}
    .nav-utility{gap:12px;padding-left:16px}
    .nav-cta{padding:9px 13px;font-size:12px}
  }

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:100svh;padding:calc(72px + var(--edge)) var(--edge) var(--stack);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
  .hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(60% 40% at 85% 15%, rgba(200,255,0,.08), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(255,255,255,.03), transparent 60%);
    z-index:-1;pointer-events:none}
  .hero-tam{position:absolute;right:-2vw;top:14vh;font-family:var(--tam);font-weight:700;font-size:clamp(120px,22vw,340px);line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(245,243,238,.06);letter-spacing:-.02em;user-select:none;pointer-events:none;z-index:-1;writing-mode:horizontal-tb}
  @media (min-width:900px){.hero-tam{right:-4vw;top:10vh}}

  .hero-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .hero-meta{display:flex;flex-direction:column;gap:2px}
  .hero-meta strong{font-family:var(--disp);font-weight:600;letter-spacing:.02em;font-size:13px}
  .hero-meta span{color:var(--ink-mute);font-size:12px}

  .hero-main{margin-top:14vh}
  .hero-title{font-family:var(--disp);font-weight:700;font-size:clamp(72px,15vw,220px);line-height:.86;letter-spacing:-.045em;margin:0}
  .hero-title .yr{display:inline-block;font-size:clamp(28px,4.5vw,64px);letter-spacing:-.02em;vertical-align:top;margin-left:.15em;margin-top:.4em;color:var(--ink-mute);font-weight:500}
  .hero-lede{max-width:640px;margin-top:36px;font-size:clamp(17px,1.7vw,22px);line-height:1.4;color:var(--ink);font-weight:400}
  .hero-lede em{font-style:normal;color:var(--acc);font-family:var(--tam);font-weight:500}

  .hero-bottom{margin-top:auto;padding-top:56px;display:grid;grid-template-columns:1fr;gap:32px;align-items:end}
  @media (min-width:900px){.hero-bottom{grid-template-columns:1.2fr auto 1fr;gap:48px}}

  .hero-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;max-width:520px}
  .hero-info dt{font-family:var(--disp);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
  .hero-info dd{margin:0;font-family:var(--disp);font-size:15px;font-weight:500;line-height:1.3}
  .hero-info dd span{display:block;color:var(--ink-mute);font-weight:400;font-size:13px;margin-top:2px}

  .cta{display:inline-flex;align-items:center;gap:14px;padding:20px 28px;background:var(--acc);color:#000;border-radius:2px;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.02em;transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
  .cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -20px rgba(200,255,0,.55)}
  .cta .arw{display:inline-block;width:18px;height:10px;position:relative}
  .cta .arw::before,.cta .arw::after{content:"";position:absolute;background:#000}
  .cta .arw::before{width:18px;height:1.5px;top:50%;transform:translateY(-50%)}
  .cta .arw::after{width:8px;height:8px;border-top:1.5px solid #000;border-right:1.5px solid #000;transform:rotate(45deg);right:0;top:1px}

  .hero-scroll{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);justify-self:end}
  .hero-scroll::before{content:"";width:60px;height:1px;background:var(--hair-strong)}

  /* Rising entrance for hero (single moment) */
  .rise{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .rise-1{animation-delay:.05s}
  .rise-2{animation-delay:.2s}
  .rise-3{animation-delay:.4s}
  .rise-4{animation-delay:.55s}
  .rise-5{animation-delay:.7s}
  @keyframes rise{to{opacity:1;transform:none}}

  /* ---------- Section frame ---------- */
  .sec{padding:var(--stack) var(--edge);position:relative}
  .sec-head{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:64px}
  @media (min-width:900px){.sec-head{grid-template-columns:200px 1fr;gap:80px;align-items:start}}
  .sec-head .eyebrow{padding-top:8px}
  .sec-title{font-family:var(--disp);font-weight:600;font-size:clamp(32px,5vw,64px);line-height:1;letter-spacing:-.035em;margin:0;max-width:14ch}

  /* ---------- 22K vision (monumental) ---------- */
  .vision{border-top:1px solid var(--hair)}
  .vision-inner{display:grid;grid-template-columns:1fr;gap:56px;align-items:end}
  @media (min-width:900px){.vision-inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:72px}}
  .big-num{font-family:var(--disp);font-weight:600;font-size:clamp(72px,12vw,300px);line-height:.82;letter-spacing:-.06em;margin:0;color:var(--ink);position:relative;min-width:0;max-width:100%;overflow-wrap:break-word}
  .big-num sup{position:absolute;top:.35em;right:auto;margin-left:.1em;font-size:.12em;letter-spacing:0;color:var(--acc);font-weight:500;vertical-align:baseline}
  .vision-body{padding-bottom:16px;min-width:0}
  .vision-body p{font-size:clamp(17px,1.7vw,22px);line-height:1.5;margin:0 0 20px;max-width:36ch}
  .vision-body p:last-child{margin-bottom:0;color:var(--ink-mute);font-size:15px;line-height:1.6;max-width:44ch}
  .verse{border-left:1px solid var(--acc);padding:8px 0 8px 20px;margin:32px 0;font-family:var(--tam);font-size:18px;line-height:1.5}
  .verse cite{display:block;margin-top:8px;font-family:var(--disp);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

  /* ---------- Bigger-than-us ---------- */
  .bigger{border-top:1px solid var(--hair);text-align:left}
  .bigger-stack{display:flex;flex-direction:column;gap:14px;margin:32px 0 0}
  .bigger-line{font-family:var(--disp);font-weight:600;font-size:clamp(36px,7vw,96px);line-height:.98;letter-spacing:-.035em;color:var(--ink-faint);transition:color .3s ease}
  .bigger-line strong{font-weight:600;color:var(--ink);display:inline}
  .bigger-line.is-final{color:var(--ink)}
  .bigger-line.is-final .acc{color:var(--acc)}

  /* ---------- Four pillars (numbered sequence) ---------- */
  .pillars{border-top:1px solid var(--hair)}
  .pillars-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
  .pillar{display:grid;grid-template-columns:80px 1fr;gap:20px;padding:36px 0;border-bottom:1px solid var(--hair);align-items:baseline;transition:background .3s ease}
  @media (min-width:900px){.pillar{grid-template-columns:120px 260px 1fr;gap:56px;padding:52px 0;align-items:center}}
  .pillar:hover{background:linear-gradient(90deg,rgba(200,255,0,.02),transparent 40%)}
  .pillar-num{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--ink-faint);letter-spacing:.02em}
  .pillar-word{font-family:var(--disp);font-weight:600;font-size:clamp(32px,5vw,56px);line-height:1;letter-spacing:-.03em}
  .pillar-desc{color:var(--ink-mute);font-size:16px;line-height:1.55;max-width:52ch;grid-column:1/-1}
  @media (min-width:900px){.pillar-desc{grid-column:auto}}

  /* ---------- Speakers (both featured, stacked rows) ---------- */
  .speakers{border-top:1px solid var(--hair)}
  .spk-row{display:grid;grid-template-columns:1fr;gap:36px;padding:56px 0;border-bottom:1px solid var(--hair);align-items:center}
  .spk-row:first-of-type{padding-top:0}
  .spk-row:last-of-type{border-bottom:0;padding-bottom:0}
  @media (min-width:900px){.spk-row{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;padding:80px 0}}

  .spk-media{position:relative;aspect-ratio:4/5;background:var(--surface-2);overflow:hidden;isolation:isolate}
  .spk-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,8,.35));pointer-events:none;z-index:2}
  .spk-slide{position:absolute;inset:0;will-change:opacity}
  .spk-slide img{width:100%;height:100%;object-fit:cover;display:block}
  .spk-slide-1{opacity:1;animation:sfade1 10s infinite ease-in-out}
  .spk-slide-2{opacity:0;animation:sfade2 10s infinite ease-in-out}
  @keyframes sfade1{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
  @keyframes sfade2{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}



  /* ================= STATS ================= */
.stats-section{
  position:relative;
  padding:var(--stack) 0;
  overflow:hidden;
  background:#050810;
}
.stats-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
}
.stats-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(5,8,16,.95) 20%, rgba(5,8,16,.65) 100%);
}
.stats-number{
  font-size:5.5rem;
  font-weight:800;
  line-height:1;
  margin:1rem 0 .6rem;
}
.stats-caption{font-size:1.05rem; color:#d9d9d9;}
.stats-body{
  color:#c3c3c3;
  font-size:.95rem;
  line-height:1.7;
  margin-bottom:1rem;
}
.stats-body strong{color:var(--lime); font-weight:700;}

/* ================= ORDER (FOUR THINGS) ================= */
.order-section{background:#0a0a0a; padding:var(--stack) 0; border-top:1px solid var(--hair);}
.order-card{
  background:var(--bg-card);
  border-radius:12px;
  padding:1.8rem 1.2rem;
  text-align:center;
  height:100%;
  transition:transform .2s ease, background .2s ease;
}
.order-card:hover{background:var(--bg-card-2); transform:translateY(-4px);}
.order-card i{
  font-size:1.6rem;
  color:var(--lime);
  margin-bottom:.9rem;
  display:block;
}
.order-card h6{font-weight:600; margin-bottom:.4rem;}
.order-card p{color:var(--text-faint); font-size:.82rem;}
  /* =========================================================
   SPEAKERS SECTION
========================================================= */

.speakers-section {
  background: #000;
  padding: var(--stack) 0;
  border-top: 1px solid var(--hair);
  color: #fff;
}

.speakers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.section-eyebrow {
  color: var(--lime);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  margin-bottom: .6rem;
}

.speakers-title {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
}


/* =========================================================
   SPEAKER ROW
========================================================= */

.speaker-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 3.5rem;

  background: #000;

  border: 1px solid rgba(215, 255, 63, .18);
  border-radius: 18px;
  overflow: hidden;

  /* GREEN THEME GLOW */
  box-shadow:
    0 0 0 1px rgba(215, 255, 63, .04),
    0 0 25px rgba(215, 255, 63, .08),
    0 0 60px rgba(215, 255, 63, .04);

  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}


/* Hover green glow */

.speaker-row:hover {
  border-color: rgba(215, 255, 63, .45);

  box-shadow:
    0 0 0 1px rgba(215, 255, 63, .08),
    0 0 30px rgba(215, 255, 63, .16),
    0 0 80px rgba(215, 255, 63, .08);

  transform: translateY(-3px);
}


.speaker-row:last-child {
  margin-bottom: 0;
}


/* =========================================================
   ALTERNATING LAYOUT
========================================================= */

.speaker-row--reverse {
  flex-direction: row-reverse;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.speaker-row__img {
  flex: 0 0 42%;
  max-width: 42%;
  position: relative;

  background: #000;
}


/* =========================================================
   IMAGE SLIDER
========================================================= */

.speaker-image-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;

  overflow: hidden;

  background: #000;
}


.speaker-img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  /* Speaker 1's slider (cutout PNGs) — fill the frame completely
     while keeping the whole image visible, nothing cropped off. */
  object-fit: contain;
  object-position: center;

  opacity: 0;
  transform: scale(1.02);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


.speaker-img.active {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   SPEAKER SECTION — REVEAL + IMAGE MOTION
========================================================= */

/* ---- Future images: safe default fit ----
   Any new photo fills the frame without stretching.
   Per-image override: <img ... style="--fit:contain; --pos:center 20%">  */
.speaker-img,
.single-image .speaker-img {
  /*object-fit: var(--fit, cover);
  object-position: var(--pos, center 20%);*/
}

/* ---- Container: start hidden ---- */
.speaker-row {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity .8s cubic-bezier(.22, .61, .36, 1),
    transform .8s cubic-bezier(.22, .61, .36, 1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.speaker-row.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* keep the existing hover lift working after reveal */
.speaker-row.is-in:hover {
  transform: translateY(-3px);
}

/* ---- Image frame: wipe + zoom out on reveal ---- */
.speaker-row .speaker-image-slider {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.22, .61, .36, 1);
}

.speaker-row.is-in .speaker-image-slider {
  clip-path: inset(0 0 0 0);
}

/* ---- Slow drift on the visible photo (very subtle) ---- */
.speaker-row.is-in .speaker-img.active {
  animation: spk-drift 24s ease-in-out infinite alternate;
}

@keyframes spk-drift {
  from { transform: scale(1);     }
  to   { transform: scale(1.055); }
}

/* ---- Text: staggered fade-up ---- */
.speaker-row__content > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s ease,
    transform .7s ease;
}

.speaker-row.is-in .speaker-row__content > * {
  opacity: 1;
  transform: translateY(0);
}

.speaker-row.is-in .speaker-row__content > *:nth-child(1) { transition-delay: .18s; }
.speaker-row.is-in .speaker-row__content > *:nth-child(2) { transition-delay: .28s; }
.speaker-row.is-in .speaker-row__content > *:nth-child(3) { transition-delay: .38s; }
.speaker-row.is-in .speaker-row__content > *:nth-child(4) { transition-delay: .48s; }

/* ---- Light sweep across the photo on hover ---- */
.speaker-image-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(215, 255, 63, .10) 50%,
    transparent 62%
  );
  transform: translateX(-110%);
  transition: transform .9s ease;
}

.speaker-row:hover .speaker-image-slider::after {
  transform: translateX(110%);
}

/* ---- Accessibility / low-power devices ---- */
@media (prefers-reduced-motion: reduce) {
  .speaker-row,
  .speaker-row__content > *,
  .speaker-row .speaker-image-slider {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .speaker-row.is-in .speaker-img.active { animation: none; }
}


/* =========================================================
   SINGLE IMAGE (Speakers 2 & 3 — full-bleed, edge-to-edge)
========================================================= */

.single-image .speaker-img {
  opacity: 1;
  transform: scale(1);

  /* Show the whole photo, uncropped and centered — matches Speaker 1's framing. */
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   IMAGE ARROWS
========================================================= */

.speaker-img-prev,
.speaker-img-next {
  position: absolute;
  top: 50%;

  transform: translateY(-50%);

  width: 36px;
  height: 36px;

  border: 1px solid rgba(215, 255, 63, .25);
  border-radius: 50%;

  background: rgba(0, 0, 0, .75);
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  cursor: pointer;

  transition: .3s ease;
}


.speaker-img-prev {
  left: 14px;
}


.speaker-img-next {
  right: 14px;
}


.speaker-image-slider:hover .speaker-img-prev,
.speaker-image-slider:hover .speaker-img-next {
  opacity: 1;
}


.speaker-img-prev:hover,
.speaker-img-next:hover {
  background: var(--lime);
  color: #000;

  border-color: var(--lime);

  box-shadow:
    0 0 15px rgba(215, 255, 63, .35);
}


/* =========================================================
   IMAGE DOTS
========================================================= */

.image-dots {
  position: absolute;

  bottom: 14px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 6px;

  z-index: 5;
  cursor: pointer;
}


.image-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: rgba(255,255,255,.45);
  cursor: pointer;

  transition: .3s ease;
}


.image-dot.active {
  width: 18px;

  border-radius: 10px;

  background: var(--lime);

  box-shadow:
    0 0 8px rgba(215, 255, 63, .5);
}


/* =========================================================
   HIDE CONTROLS FOR SINGLE IMAGE
========================================================= */

.single-image .speaker-img-prev,
.single-image .speaker-img-next,
.single-image .image-dots {
  display: none;
}


/* =========================================================
   SPEAKER CONTENT
========================================================= */

.speaker-row__content {
  flex: 1;

  padding: 3rem 3rem;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: #000;
}


.speaker-name {
  color: #fff;

  font-size: 1.45rem;
  font-weight: 700;

  line-height: 1.2;

  margin-bottom: .9rem;
}


.speaker-bio {
  color: #a5a5a5;

  font-size: .88rem;

  line-height: 1.7;

  margin-bottom: 1.4rem;

  max-width: 650px;
}


/* =========================================================
   TAGS
========================================================= */

.speaker-tags {
  display: flex;
  flex-wrap: wrap;

  gap: .5rem;

  margin-top: auto;
}


.speaker-tags span {
  display: inline-flex;
  align-items: center;

  padding: .42rem .78rem;

  border: 1px solid rgba(215, 255, 63, .16);

  border-radius: 50px;

  color: #cfcfcf;

  font-size: .7rem;
  font-weight: 500;

  background: rgba(215, 255, 63, .025);

  transition: .3s ease;
}


.speaker-tags span:hover {
  color: var(--lime);

  border-color: var(--lime);

  background: rgba(215, 255, 63, .06);

  box-shadow:
    0 0 12px rgba(215, 255, 63, .12);
}
 /* ===== Green glow on the speaker photo only — cannot affect container size ===== */
  .speaker-glow-right {
    filter:
      drop-shadow(0 0 40px rgba(178, 255, 36, 0.35))
      drop-shadow(0 0 90px rgba(150, 230, 30, 0.20));
  }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

  .speakers-title {
    font-size: 2rem;
  }


  .speaker-row,
  .speaker-row--reverse {
    flex-direction: column;
  }


  .speaker-row__img {
    flex: none;

    width: 100%;
    max-width: 100%;
  }


  .speaker-image-slider {
    height: 320px;
    min-height: 320px;
  }


  .speaker-row__content {
    padding: 2.2rem 2rem;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .speakers-header {
    align-items: flex-start;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 2rem;
  }


  .speakers-title {
    font-size: 1.7rem;
  }


  .speaker-row {
    margin-bottom: 2rem;

    border-radius: 14px;

    box-shadow:
      0 0 18px rgba(215, 255, 63, .07);
  }


  .speaker-image-slider {
    height: 260px;
    min-height: 260px;
  }


  .speaker-row__content {
    padding: 1.6rem 1.25rem;
  }


  .speaker-name {
    font-size: 1.2rem;
  }


  .speaker-bio {
    font-size: .82rem;
    line-height: 1.65;
  }


  .speaker-tags span {
    font-size: .67rem;
    padding: .38rem .68rem;
  }


  /* Always show arrows on mobile */
  .speaker-img-prev,
  .speaker-img-next {
    opacity: 1;

    width: 32px;
    height: 32px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .speaker-image-slider {
    height: 230px;
    min-height: 230px;
  }


  .speaker-row__content {
    padding: 1.4rem 1rem;
  }


  .speaker-name {
    font-size: 1.15rem;
  }


  .speaker-bio {
    font-size: .8rem;
  }


  .speaker-tags {
    gap: .4rem;
  }


  .speaker-tags span {
    font-size: .64rem;
  }

}

  /* Cutout PNGs (transparent bg portraits) sit on a warm dark backdrop */
  .spk-media.cutout{background:
    radial-gradient(70% 60% at 65% 35%, rgba(200,255,0,.055), transparent 65%),
    radial-gradient(80% 80% at 30% 90%, rgba(255,255,255,.03), transparent 65%),
    linear-gradient(180deg,#1c1c1c,#0d0d0d)}
  .spk-media.cutout .spk-slide img{object-fit:cover;object-position:right center;filter:none}

  /* Photo portraits get a very subtle grade.
     Default object-position favours the top of the frame so faces
     aren't cropped out on a tall 4:5 box. Override per-image with an
     inline style="object-position:__ __" (see speakers 1 & 2 above)
     if a specific photo needs different framing. */
  .spk-media.photo .spk-slide img{filter:grayscale(.05) contrast(1.02);object-position:center 18%}

  /* Slideshow counter (bottom-right corner) */
  .spk-count{position:absolute;bottom:16px;right:16px;z-index:3;display:flex;gap:6px}
  .spk-count span{width:18px;height:2px;background:rgba(245,243,238,.25);display:block}
  .spk-count span.on{background:var(--acc)}
  .spk-count span:nth-child(1){animation:tickA 10s infinite ease-in-out}
  .spk-count span:nth-child(2){animation:tickB 10s infinite ease-in-out}
  @keyframes tickA{0%,40%{background:var(--acc)}50%,100%{background:rgba(245,243,238,.25)}}
  @keyframes tickB{0%,40%{background:rgba(245,243,238,.25)}50%,90%{background:var(--acc)}100%{background:rgba(245,243,238,.25)}}

  .spk-info{padding:8px 0;min-width:0}
  .spk-role{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:18px}
  .spk-name{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.03em;margin:0 0 8px}
  .spk-name-tam{font-family:var(--tam);font-weight:500;font-size:16px;color:var(--ink-mute);margin:0 0 26px}
  .spk-bio{color:var(--ink-mute);font-size:15px;line-height:1.65;max-width:56ch;margin:0}
  .spk-bio + .spk-bio{margin-top:14px}
  .spk-tags{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
  .spk-tags li{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:6px 12px;border:1px solid var(--hair-strong);border-radius:999px}

  /* ---------- Wherever (ticker) ---------- */
  .wherever{border-top:1px solid var(--hair);padding:var(--stack) 0;position:relative}
  .wherever .wrap{padding-bottom:56px}
  .marquee{overflow:hidden;position:relative;padding:20px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:inline-flex;white-space:nowrap;gap:64px;animation:mq 45s linear infinite;padding-right:64px}
  .marquee-track span{font-family:var(--disp);font-weight:600;font-size:clamp(40px,6vw,80px);letter-spacing:-.02em;color:var(--ink-faint)}
  .marquee-track span.on{color:var(--ink)}
  .marquee-track span.acc{color:var(--acc)}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .wherever-lede{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-.02em;max-width:22ch;margin:0 var(--edge) 40px}

  /* ---------- You have a place ---------- */
  .place{border-top:1px solid var(--hair)}
  .place-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  @media (min-width:700px){.place-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (min-width:1100px){.place-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
  .place-cell{background:var(--bg);padding:32px 20px;font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--ink);transition:background .3s ease,color .3s ease;position:relative}
  .place-cell::before{content:attr(data-num);position:absolute;top:12px;right:14px;font-size:10px;color:var(--ink-faint);letter-spacing:.1em}
  .place-cell:hover{background:var(--surface);color:var(--acc)}
  .place-note{padding:32px var(--edge) 0;color:var(--ink-mute);font-size:15px;max-width:44ch}

  /* ---------- Event details ---------- */
  .event{border-top:1px solid var(--hair);background:var(--surface)}
  .event-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  @media (min-width:900px){.event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .event-item{padding:44px 0;border-bottom:1px solid var(--hair);min-width:0}
  @media (min-width:900px){.event-item{border-bottom:0;border-right:1px solid var(--hair);padding:56px 40px}
    .event-item:last-child{border-right:0}
    .event-item:first-child{padding-left:0}}
  .event-item:last-child{border-bottom:0}
  .event-item .eyebrow{margin-bottom:20px;display:block}
  .event-item .val{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1;letter-spacing:-.025em;margin:0 0 10px}
  .event-item .sub{color:var(--ink-mute);font-size:15px;line-height:1.55;margin:0}
  .event-item .sub-tam{font-family:var(--tam);color:var(--ink-mute);font-size:15px;line-height:1.55;margin:6px 0 0}

/* ================= WHERE YOU BELONG ================= */
.belong-section{background:#0a0a0a; padding:var(--stack) 0;}
.belong-sub{color:var(--text-faint); font-size:.85rem;}
.belong-pill{
  background:var(--bg-card);
  border-radius:10px;
  padding:1.1rem 1rem;
  text-align:center;
  font-weight:600;
  font-size:.92rem;
  color:#e6e6e6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:100%;
}
.belong-pill i{font-size:1.1rem;}
.belong-pill.active{
  background:var(--lime);
  color:#111;
}

/* ================= COUNTDOWN ================= */
.countdown-section{background:#0a0a0a; padding:var(--stack) 0; border-top:1px solid var(--hair);}
.countdown-box{
  background:var(--bg-card);
  border-radius:14px;
  padding:1.6rem 1.8rem;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:stretch;
  gap:1.8rem;
  margin-top:1.2rem;
      box-shadow: rgb(57 93 23 / 25%) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.countdown-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.5rem;
  min-width:0;
}
.countdown-place{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  font-size:.92rem;
}
.countdown-place i {
  color: var(--lime);
  font-size: 1.5rem;
  margin-top: .2rem;
}

.countdown-place i.map {
  color: black;
  font-size: 1.5rem;
  margin-top: .2rem;
}
.countdown-timer{
  display:flex;
  gap:.8rem;
}
.timer-block{
  background:#0d0d0d;
  border-radius:10px;
  min-width:72px;
  padding:.8rem .6rem;
  text-align:center;
}
.timer-block span{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-white);
}
.timer-block small{
  color:var(--text-faint);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ---------- Countdown: map / directions ---------- */
.countdown-place-text{display:flex;flex-direction:column}
.countdown-map-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.map-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--hair-strong);font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink);white-space:nowrap;transition:border-color .2s ease,color .2s ease,transform .2s ease}
.map-btn:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.map-btn.is-primary{background:var(--acc);color:#000;border-color:var(--acc)}
.map-btn.is-primary:hover{color:#000;opacity:.9}
.map-btn i{font-size:14px}
@media (max-width:479px){.countdown-map-actions{width:100%}.map-btn{flex:1;justify-content:center}}

/* ---------- Countdown: clickable venue map card ---------- */
.venue-map-card{
  position:relative;
  display:block;
  min-height:220px;
  border-radius:14px;
  overflow:hidden;
  background:#0d0d0d;
  border:1px solid var(--hair-strong);
  isolation:isolate;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.venue-map-card:hover,
.venue-map-card:focus-within{
  border-color:var(--acc);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

.venue-map-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border:0;
  filter:grayscale(.15) contrast(1.05) brightness(.92);
  transition:filter .3s ease;
}
.venue-map-card:hover .venue-map-frame,
.venue-map-card:focus-within .venue-map-frame{
  filter:grayscale(0) contrast(1.05) brightness(1);
}

/* darken the bottom of the map so the caption text stays readable */
.venue-map-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
  z-index:1;
}

.venue-map-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--acc);
  color:#000;
  font-family:var(--disp);
  font-weight:700;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  pointer-events:none;
}
.venue-map-badge i{font-size:12px}

.venue-map-caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
}
.venue-map-caption-title{
  font-family:var(--tam);
  color:var(--ink);
  font-size:.88rem;
  font-weight:600;
  line-height:1.35;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.venue-map-caption-sub{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--disp);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--acc);
  text-decoration:none;
  pointer-events:auto;
  cursor:pointer;
  width:max-content;
}
.venue-map-caption-sub:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.venue-map-caption-sub .arw{
  width:14px;height:14px;position:relative;display:inline-block;
}
.venue-map-caption-sub .arw::before,
.venue-map-caption-sub .arw::after{
  content:"";position:absolute;background:var(--acc);transition:transform .25s ease;
}
.venue-map-caption-sub .arw::before{width:10px;height:2px;top:6px;left:0}
.venue-map-caption-sub .arw::after{width:6px;height:6px;border-top:2px solid var(--acc);border-right:2px solid var(--acc);top:2px;left:4px;transform:rotate(45deg);background:none}
.venue-map-card:hover .venue-map-caption-sub .arw::before,
.venue-map-card:hover .venue-map-caption-sub .arw::after{transform:translateX(3px) rotate(45deg)}
.venue-map-card:hover .venue-map-caption-sub .arw::before{transform:translateX(3px)}

@media (max-width:900px){
  .countdown-box{grid-template-columns:1fr}
  .venue-map-card{order:-1; min-height:200px}
}

  /* ---------- Register ---------- */
  .register{border-top:1px solid var(--hair)}
  .register-inner{display:grid;grid-template-columns:1fr;gap:48px}
  @media (min-width:900px){.register-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:80px}}

  /* Form-only layout: no side content, form centered with a comfortable max-width */
  .register-inner--centered{display:flex;justify-content:center}
  .register-inner--centered .form{width:100%;max-width:560px}
  @media (min-width:900px){.register-inner--centered{grid-template-columns:1fr}}
  .sec-head--centered{justify-items:center;text-align:center}
  .sec-head--centered .eyebrow{justify-content:center;padding-top:0}
  .reg-lede h3{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0 0 20px;max-width:16ch}
  .reg-lede p{color:var(--ink-mute);font-size:15px;line-height:1.6;max-width:44ch;margin:0 0 12px}
  .reg-quote{margin-top:32px;padding:20px 0 0;border-top:1px solid var(--hair);font-family:var(--tam);font-size:16px;line-height:1.5;color:var(--ink)}
  .reg-quote cite{display:block;font-family:var(--disp);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px}

  /* ---------- Prayers page: QR / join column + animated prayer list ---------- */
  .prayer-inner{min-width:0}
  .prayer-join{min-width:0}
  .prayer-join h3{font-family:var(--disp);font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;margin:0 0 20px;max-width:16ch}
  .prayer-join > p{color:var(--ink-mute);font-size:15px;line-height:1.6;max-width:44ch;margin:0 0 28px}
  .prayer-qr-box{display:inline-block;padding:16px;background:#fff;border:1px solid var(--hair-strong);border-radius:6px;margin-bottom:22px;line-height:0}
  .prayer-qr-img{width:180px;height:180px;object-fit:contain;border-radius:2px}
  .prayer-wa-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);transition:gap .2s ease}
  .prayer-wa-link:hover{gap:14px}
  .prayer-wa-link .arw{display:inline-block;width:16px;height:9px;position:relative;flex-shrink:0}
  .prayer-wa-link .arw::before{content:"";position:absolute;width:16px;height:1.5px;background:currentColor;top:50%;left:0;transform:translateY(-50%)}
  .prayer-wa-link .arw::after{content:"";position:absolute;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);right:0;top:1px}

  .prayer-list-wrap{min-width:0}
  .prayer-list-eyebrow{margin-bottom:22px}
  .prayer-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
  .prayer-item{display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--hair);
    opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .prayer-item.is-in{opacity:1;transform:translateY(0)}
  .prayer-item.is-in:nth-child(1){transition-delay:.05s}
  .prayer-item.is-in:nth-child(2){transition-delay:.16s}
  .prayer-item.is-in:nth-child(3){transition-delay:.27s}
  .prayer-item.is-in:nth-child(4){transition-delay:.38s}
  .prayer-item.is-in:nth-child(5){transition-delay:.49s}
  .prayer-num{font-family:var(--disp);font-weight:600;font-size:20px;line-height:1.5;color:var(--acc);letter-spacing:-.02em}
  .prayer-text{margin:0;font-size:16px;line-height:1.65;color:var(--ink)}
  @media (prefers-reduced-motion:reduce){.prayer-item{opacity:1;transform:none;transition:none}}
  @media (max-width:599px){
    .prayer-item{grid-template-columns:32px 1fr;gap:14px;padding:18px 0}
    .prayer-num{font-size:16px}
    .prayer-text{font-size:15px}
    .prayer-qr-img{width:150px;height:150px}
  }

  /* ---------- Register / Volunteer form — "boxed" card style ----------
     Each field is its own clearly-bordered rounded box, spaced apart with
     a visible gap, instead of a single seamless bordered table. This makes
     every field pop as its own card, keeps the dark theme, and highlights
     the active field with the lime accent so people always know where
     they're typing. Shared by index.php (#register) and to_volunteer.php
     (#register) since both forms use these same .form/.row/.field classes. */

  .form{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    background:var(--surface);
    border:1px solid var(--hair-strong);
    border-radius:20px;
    padding:22px;
    box-shadow: 0 24px 60px -20px rgb(141 178 7 / 69%);
    min-width:0;
  }
  .row{display:grid;grid-template-columns:1fr;gap:0px}
  @media (min-width:600px){.row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

  .field{
    padding:16px 18px;
    border:1.5px solid var(--hair-strong);
    border-radius:14px;
    background:#181818;
    position:relative;
    min-width:0;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
   box-shadow: 
  0 4px 12px rgba(200, 255, 0, 0.20),
  0 8px 25px rgba(200, 255, 0, 0.12);
  }
  .field:hover{border-color:var(--hair-strong);background:#1c1c1c}
  .field label{display:block;font-family:var(--disp);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;transition:color .2s ease}
  .field input,.field select,.field textarea{width:100%;background:transparent;border:0;color:var(--ink) !important;-webkit-text-fill-color:var(--ink);caret-color:var(--acc);font-family:var(--sans);font-size:13px;padding:0;outline:0}
  .field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:1}
  /* Fix: browsers force a light autofill background with dark text by default,
     which makes typed/autofilled text invisible on this dark form. Force it
     back to the theme colours. */
  .field input:-webkit-autofill,
  .field input:-webkit-autofill:hover,
  .field input:-webkit-autofill:focus,
  .field textarea:-webkit-autofill,
  .field select:-webkit-autofill{
    -webkit-text-fill-color:var(--ink) !important;
    -webkit-box-shadow:0 0 0px 1000px #181818 inset !important;
    box-shadow:0 0 0px 1000px #181818 inset !important;
    transition:background-color 9999s ease-in-out 0s;
  }
  .field:focus-within input:-webkit-autofill,
  .field:focus-within textarea:-webkit-autofill,
  .field:focus-within select:-webkit-autofill{
    -webkit-box-shadow:0 0 0px 1000px #1f1f1f inset !important;
    box-shadow:0 0 0px 1000px #1f1f1f inset !important;
  }
  /* Focused field: box lifts slightly and glows in the accent colour so
     it's obvious — and friendly — which box you're currently filling in */
  .field:focus-within{
    background:#1f1f1f;
    border-color:var(--acc);
    box-shadow:0 0 0 4px rgba(200,255,0,.14);
    transform:translateY(-1px);
  }
  .field:focus-within label{color:var(--acc)}
  .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),linear-gradient(-45deg,transparent 50%,var(--ink-mute) 50%);background-position:calc(100% - 12px) 50%,calc(100% - 6px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:24px}
  .field select option{background:#181818;color:var(--ink)}

  .form-actions{padding:6px 2px 0;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
  .form-actions button{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;background:var(--acc);color:#000;padding:17px 24px;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.02em;border-radius:12px;box-shadow:0 10px 28px -10px rgba(200,255,0,.45);transition:transform .2s ease, box-shadow .2s ease}
  .form-actions button:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(200,255,0,.55)}
  .form-actions button:disabled{opacity:.6;cursor:not-allowed;transform:none}
  .form-actions small{color:var(--ink-faint);font-size:12px;line-height:1.5}
  .form-ok{padding:32px 22px;color:var(--acc);font-family:var(--disp);font-weight:500;display:none}
  .form-ok.on{display:block}
  .req-mark{color:var(--acc);margin-left:3px}

  /* Error banner: its own boxed card too, so it's impossible to miss */
  .form-error{
    background:rgba(255,107,107,.1) !important;
    border:1.5px solid rgba(255,107,107,.45);
    border-radius:12px;
    padding:12px 16px !important;
    font-size:13px;
    line-height:1.5;
  }

  @media (max-width:420px){
    .form{padding:16px;border-radius:16px;gap:12px}
    .row{gap:12px}
    .field{padding:14px 16px;border-radius:12px}
    .form-actions button{padding:16px 20px}
  }



  /* ---------- Success modal: refinements ---------- */
.modal-box{
  max-width:460px;
  padding:48px 36px 34px;
}
.modal-box h3{
  font-size:clamp(24px,3.6vw,32px);
  line-height:1.15;
  margin:0 0 14px;
}
.modal-box p{
  max-width:38ch;
  margin:0 auto 24px;
}
.modal-details{
  font-family:var(--disp);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acc);
  margin-bottom:10px;
  min-height:0;
}
.modal-details:empty{display:none}
.modal-note{
  font-size:13px !important;
  color:var(--ink-faint) !important;
  margin-bottom:26px !important;
}
.modal-note:empty{display:none}
.modal-ok{width:100%;max-width:260px}
.modal-dismiss{
  display:block;
  margin:18px auto 0;
  font-family:var(--disp);
  font-size:12px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink-mute);
  text-decoration:underline;
  text-underline-offset:4px;
  transition:color .2s ease;
}
.modal-dismiss:hover{color:var(--ink)}

/* pop-in animation on the card */
.modal-overlay.is-open .modal-box{
  animation:modal-pop .38s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes modal-pop{
  from{opacity:0;transform:translateY(22px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media (max-width:479px){
  .modal-box{padding:40px 22px 28px}
  .modal-ok{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .modal-overlay.is-open .modal-box{animation:none}
}

  /* ---------- Hard guard: form fields must always stay readable ----------
     If .register / .form / .field ever gets a lighter background elsewhere
     in this file, these rules keep the label, typed text, placeholder and
     dropdown text high-contrast against whatever that background is. */
  .form{color-scheme:dark}
  .form .field,
  .form .row .field{background:#181818 !important}
  .form .field:focus-within{background:#1f1f1f !important;border-color:var(--acc) !important}
  .form .field label{color:#b9b9b9 !important}
  .form .field:focus-within label{color:var(--acc) !important}
  .form .field input,
  .form .field select,
  .form .field textarea{
    color:#ffffff !important;
    -webkit-text-fill-color:#d6d6d6 !important;
    caret-color:#ffffff !important;
    background:transparent !important;
  }
  .form .field input::placeholder,
  .form .field textarea::placeholder{color:rgba(255,255,255,.32) !important;opacity:1 !important}
  .form .field select option{background:#181818 !important;color:#ffffff !important}

  /* ---------- Registration success modal ---------- */
  .modal-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
    background:rgba(8,8,8,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
  .modal-overlay.is-open{opacity:1;visibility:visible;transition:opacity .3s ease}
  .modal-box{position:relative;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--hair-strong);
    padding:44px 32px 32px;text-align:center;border-radius:2px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
    transform:translateY(18px) scale(.97);transition:transform .35s ease}
  .modal-overlay.is-open .modal-box{transform:translateY(0) scale(1)}
  .modal-icon{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--acc);color:#000;
    display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;font-family:var(--disp)}
  .modal-box h3{font-family:var(--disp);font-weight:600;font-size:26px;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
  .modal-box p{color:var(--ink-mute);font-size:14px;line-height:1.6;max-width:34ch;margin:0 auto 28px}
  .modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
    color:var(--ink-mute);font-size:20px;line-height:1;border-radius:50%;transition:background .2s ease,color .2s ease}
  .modal-close:hover{background:var(--hair);color:var(--ink)}
  .modal-details{text-align:left;background:var(--surface-2);border:1px solid var(--hair-strong);border-radius:6px;padding:14px 16px;margin:0 0 24px;display:grid;gap:8px}
  .modal-details .mrow{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:1.4}
  .modal-details .mrow span:first-child{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-family:var(--disp);flex-shrink:0}
  .modal-details .mrow span:last-child{color:var(--ink);text-align:right;word-break:break-word}
  .modal-note{color:var(--ink-mute);font-size:12px;line-height:1.6;margin:-14px 0 22px}
  .modal-ok{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#000;
    padding:14px 32px;font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.02em;
    border-radius:2px;transition:transform .2s ease}
  .modal-ok:hover{transform:translateY(-1px)}
  body.modal-lock{overflow:hidden}

  /* ---------- Final CTA ---------- */
  .final{padding:var(--stack) var(--edge);border-top:1px solid var(--hair);text-align:left;position:relative;overflow:hidden;isolation:isolate}
  .final::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 20% 100%, rgba(200,255,0,.08), transparent 60%);z-index:-1}
  .final h2{font-family:var(--disp);font-weight:700;font-size:clamp(40px,9vw,140px);line-height:.9;letter-spacing:-.045em;margin:0 0 32px;max-width:14ch;overflow-wrap:break-word}
  .final h2 .q{color:var(--ink-faint);font-weight:500}
  .final-yes{font-family:var(--disp);font-weight:700;font-size:clamp(56px,13vw,200px);line-height:.86;letter-spacing:-.05em;color:var(--acc);margin:0;overflow-wrap:break-word}
  .final-under{margin:40px 0 0;display:flex;flex-wrap:wrap;gap:24px;align-items:center;color:var(--ink-mute);font-family:var(--disp);font-size:13px;letter-spacing:.02em}
  .final-under a.cta{margin-right:8px}

  /* ---------- Footer ---------- */
  footer{padding:var(--stack) var(--edge) 56px;border-top:1px solid var(--hair);background:var(--bg)}
  .foot{display:grid;grid-template-columns:1fr;gap:36px}
  @media (min-width:900px){.foot{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:64px}}
  .foot-brand{max-width:36ch}
  .foot-brand .brand{margin-bottom:16px}
  .foot-brand p{color:var(--ink-mute);font-size:14px;line-height:1.6;margin:0}
  .foot-brand p.tam{font-family:var(--tam);margin-top:8px;color:var(--ink)}
  .foot h4{font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px;font-weight:500}
  .foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
  .foot ul a{font-size:14px;color:var(--ink-mute);transition:color .2s ease}
  .foot ul a:hover{color:var(--acc)}
  .foot-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--ink-faint);font-size:12px;letter-spacing:.02em}

  /* ---------- Extra responsive tuning: tablets ---------- */
  @media (min-width:700px) and (max-width:1023px){
    .hero-main{margin-top:10vh}
    .vision-inner{grid-template-columns:1fr}
    .big-num{font-size:clamp(90px,18vw,200px)}
    .spk-row{grid-template-columns:1fr}
    .event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .event-item:nth-child(2){border-right:0}
  }

  /* ---------- Extra responsive tuning: small phones ---------- */
  @media (max-width:480px){
    .hero-info{grid-template-columns:1fr}
    .hero-main{margin-top:9vh}
    .hero-title{font-size:clamp(56px,17vw,90px)}
    .hero-lede{margin-top:24px}
    .big-num{font-size:clamp(72px,22vw,140px)}
    .bigger-line{font-size:clamp(30px,9vw,56px)}
    .pillar{grid-template-columns:1fr}
    .pillar-num{order:1}
    .pillar-word{order:2}
    .pillar-desc{order:3}
    .place-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .final h2{font-size:clamp(36px,12vw,60px)}
    .final-yes{font-size:clamp(48px,18vw,90px)}
    .foot-base{flex-direction:column;gap:8px}
  }

  /* ---------- Extra responsive tuning: laptop/desktop cap ---------- */
  @media (min-width:1440px){
    .wrap,.sec,.hero,.nav,.final{padding-left:clamp(56px,6vw,120px);padding-right:clamp(56px,6vw,120px)}
  }
  /* ---------- Back link (sub-pages) ---------- */
  .back-link{display:inline-flex;align-items:center;gap:10px;margin:calc(70px + 28px) var(--edge) 0;font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);transition:color .2s ease,gap .2s ease}
  .back-link:hover{color:var(--acc);gap:14px}
  .back-link .arw{display:inline-block;width:14px;height:9px;position:relative;flex-shrink:0}
  .back-link .arw::before{content:"";position:absolute;width:14px;height:1.5px;background:currentColor;top:50%;left:0;transform:translateY(-50%)}
  .back-link .arw::after{content:"";position:absolute;width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);left:0;top:1px}

/* =========================================================
   RESPONSIVE PATCH — added for STATS / BELONG PILLS / COUNTDOWN
   These three blocks had no breakpoints in the original file
   (unlike every other section, which already used clamp() or
   media queries). Sized to match the tablet/mobile breakpoints
   already used elsewhere (991px / 767px / 480px).
========================================================= */

/* --- Stats: keep the big number and copy legible as it shrinks --- */
@media (max-width:991px){
  .stats-number{font-size:clamp(2.75rem,9vw,4.5rem)}
}
@media (max-width:767px){
  .stats-number{font-size:clamp(2.4rem,11vw,3.6rem);margin:.8rem 0 .5rem}
  .stats-caption{font-size:.95rem}
  .stats-body{font-size:.88rem}
}
@media (max-width:480px){
  .stats-number{font-size:clamp(2.1rem,14vw,3rem)}
  /* darken the right side too so text stays readable when the bg
     image and text stack instead of sitting side by side */
  .stats-overlay{background:linear-gradient(180deg, rgba(5,8,16,.95) 30%, rgba(5,8,16,.75) 100%)}
}

/* --- Belong pills: fluid CSS-grid so it reflows correctly no matter
   how many .col-* items the markup puts inside .row --- */
.belong-section .row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin:0;
}
.belong-section .row > [class*="col-"]{
  padding:0;
  max-width:none;
  flex:none;
  width:auto;
}
@media (min-width:700px){
  .belong-section .row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:992px){
  .belong-section .row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:420px){
  .belong-section .row{grid-template-columns:1fr}
  .belong-pill{font-size:.85rem;padding:1rem .9rem}
}

/* --- Countdown: stack on tablet/mobile so the timer never
   forces horizontal scroll, shrink the blocks on small phones --- */
@media (max-width:767px){
  .countdown-box{grid-template-columns:1fr;align-items:stretch;padding:1.3rem 1.2rem}
  .countdown-place{font-size:.88rem}
  .countdown-timer{justify-content:center;flex-wrap:wrap;gap:.6rem}
  .venue-map-card{min-height:180px}
}
@media (max-width:420px){
  .timer-block{min-width:60px;padding:.65rem .4rem}
  .timer-block span{font-size:1.15rem}
  .timer-block small{font-size:.62rem}
}


/* ---------- Form sending loader ---------- */
.form{position:relative}

.btn-spinner,
.form-loader-spin{
  display:inline-block;
  flex-shrink:0;
  border-radius:50%;
  animation:emerge-spin .75s linear infinite;
}
.btn-spinner{
  width:18px;height:18px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:#000;
}
.form-loader-spin{
  width:40px;height:40px;
  border:3px solid var(--hair-strong);
  border-top-color:var(--acc);
}
/* the global :disabled style dims the button; while sending, keep it fully visible */
.form-actions button.is-loading:disabled{opacity:1;cursor:progress;transform:none}

.form-loader{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:20px;text-align:center;
  background:rgba(13,13,13,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-radius:inherit;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
.form.is-sending .form-loader{opacity:1;visibility:visible;transition:opacity .2s ease}
.form-loader-text{
  margin:0;
  font-family:var(--disp);font-size:14px;font-weight:500;letter-spacing:.02em;
  color:var(--ink);
}
@keyframes emerge-spin{to{transform:rotate(360deg)}}

/* the global reduced-motion rule freezes animations; a frozen spinner looks broken,
   so let it keep turning, just slower */
@media (prefers-reduced-motion:reduce){
  .btn-spinner,.form-loader-spin{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
}

/* ---------- Footer social links ---------- */
.foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.foot-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid var(--hair-strong);border-radius:50%;
  color:var(--ink-mute);font-size:18px;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.foot-social a:hover,
.foot-social a:focus-visible{background:var(--acc);border-color:var(--acc);color:#000;transform:translateY(-2px)}
.foot-social a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* =========================================================
   VIDEO GALLERY
========================================================= */

.video-section {
  background: #000;
  padding: var(--stack) 0;
  border-top: 1px solid var(--hair);
  color: #fff;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem;
}

.video-card {
  background: #000;
  border: 1px solid rgba(215, 255, 63, .18);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(215, 255, 63, .08);
  transition: border-color .3s ease, box-shadow .3s ease;
}

.video-card:hover {
  border-color: rgba(215, 255, 63, .4);
  box-shadow: 0 0 60px rgba(215, 255, 63, .16);
}

/* First card spans the full row and is capped so it never gets huge */
.video-card--featured {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

/* 16:9 responsive frame — the iframe / thumbnail always fills it */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d0d0d;
}

.video-frame iframe,
.video-frame__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-frame__thumb {
  object-fit: cover;
}

.video-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 60%);
  transition: background .3s ease;
}

.video-play:hover { background: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,0) 60%); }

.video-play:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -4px;
}

.video-play__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 9vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  color: #000;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 0 0 8px rgba(200, 255, 0, .18), 0 0 40px rgba(200, 255, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.video-play__icon i { margin-left: 4%; line-height: 1; }

.video-play:hover .video-play__icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 12px rgba(200, 255, 0, .2), 0 0 60px rgba(200, 255, 0, .45);
}

@media (max-width: 767px) {
  .video-grid { gap: 1rem; }
  .video-card { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .video-card, .video-play, .video-play__icon { transition: none; }
}