/* ==========================================================================
   RHIC 2026 — Design System · "The Thread"
   Layers: fonts → tokens → base → utilities → buttons → header → hero →
           sections → embeds → coming-soon → footer → motion/reduced-motion
   ========================================================================== */

/* 1. FONTS ---------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. TOKENS --------------------------------------------------------------- */
:root {
  --navy-900: #081a2b;
  --navy-800: #0d2c49;
  --navy-700: #124166;
  --blue-500: #227ec2;
  --teal-600: #1e9789;
  --teal-500: #23ad9e;
  --teal-300: #7ed9cd;
  --surface-0: #ffffff;
  --surface-1: #f4f8fa;
  --sand-50: #faf7f2;
  --ink-900: #0e2233;
  --ink-600: #3e5468;
  --ink-400: #6b7e8f;
  --border: #dce6ee;
  --border-dark: rgba(255, 255, 255, 0.14);
  --gradient-brand: linear-gradient(135deg, #124166, #1b6e96, #23ad9e);
  --overlay: rgba(8, 26, 43, 0.72);
  --focus-ring: 0 0 0 3px rgba(35, 173, 158, 0.4);

  --shadow-1: 0 1px 2px rgba(8, 26, 43, 0.06);
  --shadow-2: 0 8px 24px rgba(8, 26, 43, 0.08);
  --shadow-3: 0 20px 48px rgba(8, 26, 43, 0.12);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s;
  --t-med: 0.3s;

  --container: 1240px;
  --gutter: 32px;
  --section-y: clamp(64px, 9vw, 120px);
  --header-h: 76px;
  --announce-h: 40px;
}
@media (max-width: 1023px) { :root { --gutter: 24px; } }
@media (max-width: 767px)  { :root { --gutter: 20px; --header-h: 64px; } }

/* 3. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Decorative layers are deliberately oversized and offset (hero facets, page-hero
   deco, the pillars branch), and GSAP's pin-spacer wraps pinned sections at their
   own measured width. Any of those can round a fraction of a pixel past the
   viewport and raise a horizontal scrollbar across the whole page.
   `clip` rather than `hidden`: hidden makes the element a scroll container, which
   breaks the sticky site header. clip contains the overflow without that side
   effect, and the fallback keeps older browsers on the current behaviour rather
   than silently breaking the header. */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: inherit;
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 700;
  text-wrap: balance;
}
p { margin: 0 0 1em; }
img, video, svg { max-width: 100%; height: auto; }
a { color: var(--blue-500); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--teal-600); }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
::selection { background: var(--teal-500); color: var(--navy-900); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal-500); color: var(--navy-900);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* 4. UTILITIES ------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* Adjacent sections stack a full pad each (~240px at desktop), which reads as
   dead air. Trim the seam so the boundary keeps a clear but not cavernous
   break; a background change still separates the two visually. */
.section + .section,
.section + .submission-categories,
.section + .submission-guidelines,
.submission-categories + .section,
.submission-guidelines + .section,
.submission-categories + .submission-guidelines,
.submission-guidelines + .submission-categories { padding-top: calc(var(--section-y) * 0.62); }
.section--dark { background: var(--navy-900); color: #fff; }
.section--dark .section-lede { color: rgba(255, 255, 255, 0.78); }
.section--tint { background: var(--surface-1); }
.section--sand { background: var(--sand-50); }

.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-600);
  margin-bottom: 14px;
}
.section-tag::before { content: ""; width: 28px; height: 2px; background: var(--teal-500); border-radius: 2px; }
.section--dark .section-tag { color: var(--teal-300); }
.section-title { font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-stretch: 110%; letter-spacing: -0.01em; }
.section-lede { font-size: 1.125rem; color: var(--ink-600); max-width: 46em; }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { text-align: center; }
.section-head--center .section-lede { margin-inline: auto; }

/* Reveal system (IO adds .is-in; stagger via --d set by JS) */
.js .reveal { opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 5. BUTTONS --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  letter-spacing: 0.02em; line-height: 1;
  padding: 16px 30px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn--accent { background: var(--teal-500); color: var(--navy-900); }
.btn--accent:hover { background: var(--teal-600); color: var(--navy-900); transform: translateY(-1px); }
.btn--accent:active { transform: none; background: #17847a; }
.btn--primary { background: var(--navy-700); color: #fff; }
.btn--primary:hover { background: #0d3350; color: #fff; transform: translateY(-1px); }
.btn--primary:active { transform: none; background: #0a2a42; }
.btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--teal-300); color: #fff; }
.btn--outline { border-color: var(--navy-700); color: var(--navy-700); }
.btn--outline:hover { background: var(--navy-700); color: #fff; }
.btn--sm { padding: 11px 22px; font-size: 0.875rem; }
/* Touch devices: keep small buttons at the 44px minimum tap target. */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
}
.btn[disabled], .btn.is-disabled { opacity: 0.45; pointer-events: none; }
@media (max-width: 560px) {
  .btn { white-space: normal; }
  .hero__cta .btn, .band__cta .btn, .cd-band .btn { width: 100%; }
}
.btn .btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* 6. ANNOUNCEMENT BAR ------------------------------------------------------ */
.announce {
  background: var(--navy-700); color: rgba(255, 255, 255, 0.88);
  font-size: 0.8125rem; letter-spacing: 0.04em;
  text-align: center; padding: 10px var(--gutter);
}
.announce b { color: #fff; font-weight: 600; }
@media (max-width: 767px) { .announce { font-size: 0.75rem; } .announce .hide-sm { display: none; } }

/* 7. HEADER / NAV ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 26, 43, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dark);
  transition: box-shadow var(--t-med) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(8, 26, 43, 0.35); }
.site-header__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--header-h);
  transition: height var(--t-med) var(--ease);
}
.site-header.is-scrolled .site-header__row { height: calc(var(--header-h) - 8px); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 44px; width: auto; }
@media (max-width: 767px) { .brand img { height: 36px; } }

/* Second header row — the full nav gets its own band, so 10 items never
   compete with the brand and actions for width. */
.site-header__navrow {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
/* Centre the row so the links sit balanced under the brand/actions row. */
@media (min-width: 1024px) {
  .site-header__navrow .nav__list { justify-content: center; }
}
.nav { position: relative; }
.nav__list { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.82); padding: 13px 11px;
  position: relative; text-decoration: none; background: none; border: 0;
  transition: color var(--t-fast) var(--ease);
}
@media (min-width: 1280px) {
  .nav__link { font-size: 0.9rem; padding: 13px 15px; }
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: #fff; }

/* Glide pill: one shared highlight that travels between items rather than
   each link fading its own background. Positioned from JS. */
.nav__glide {
  position: absolute; top: 50%; left: 0; height: 34px; width: 0;
  transform: translateY(-50%); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(126, 217, 205, 0.28);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: transform var(--t-med) var(--ease-out-expo),
              width var(--t-med) var(--ease-out-expo),
              opacity var(--t-fast) var(--ease);
}
.nav.has-glide .nav__glide { opacity: 1; }
.nav__link > * , .nav__link { position: relative; z-index: 1; }

/* Thread underline — grows from the left, echoing the site's thread motif. */
.nav__link::after {
  content: ""; position: absolute; left: 11px; right: 100%; bottom: 6px; height: 2px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
  border-radius: 2px; transition: right var(--t-med) var(--ease-out-expo);
}
.nav__link:hover::after, .nav__item.is-open > .nav__link::after { right: 11px; }
@media (min-width: 1280px) {
  .nav__link::after { left: 15px; }
  .nav__link:hover::after, .nav__item.is-open > .nav__link::after { right: 15px; }
}
.nav__caret { transition: transform var(--t-med) var(--ease-out-expo); }
.nav__item.is-open > .nav__link .nav__caret,
.nav__item:hover > .nav__link .nav__caret { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 262px;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid rgba(126, 217, 205, 0.18);
  border-radius: 14px; box-shadow: var(--shadow-3);
  padding: 14px 14px 14px 40px; /* left inset holds the ladder rails */
  opacity: 0; visibility: hidden;
  /* Folding ladder: the panel unfolds downward from its top hinge. */
  transform: perspective(900px) rotateX(-82deg); transform-origin: top center;
  transition: opacity 0.2s var(--ease),
              transform 0.42s var(--ease-out-expo),
              visibility 0.42s;
  z-index: 110;
}
/* Two threads running the height of the panel — the ladder's rails. */
.nav__sub::after {
  content: ""; position: absolute; left: 19px; top: 16px; bottom: 16px; width: 9px;
  background:
    linear-gradient(var(--teal-500), var(--teal-500)) left / 1.5px 100% no-repeat,
    linear-gradient(var(--teal-500), var(--teal-500)) right / 1.5px 100% no-repeat;
  opacity: 0.45; transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease-out-expo) 0.1s;
  pointer-events: none;
}
/* Panels near the right edge open leftwards, otherwise they push the page
   wider (a hidden panel still counts toward scroll width). */
.nav__item:nth-last-child(2) > .nav__sub,
.nav__item:nth-last-child(3) > .nav__sub { left: auto; right: 0; }
/* Twin filaments dropping from the parent link into the ladder rails. */
.nav__sub::before {
  content: ""; position: absolute; left: 19px; top: -9px; width: 9px; height: 9px;
  background:
    linear-gradient(180deg, transparent, var(--teal-500)) left / 1.5px 100% no-repeat,
    linear-gradient(180deg, transparent, var(--teal-500)) right / 1.5px 100% no-repeat;
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s var(--ease-out-expo) 0.06s;
}
.nav__item.is-open > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1; visibility: visible; transform: perspective(900px) rotateX(0deg);
}
.nav__item.is-open > .nav__sub::before,
.nav__item:focus-within > .nav__sub::before { transform: scaleY(1); }
.nav__item.is-open > .nav__sub::after,
.nav__item:focus-within > .nav__sub::after { transform: scaleY(1); }
@media (hover: hover) and (min-width: 1024px) {
  .nav__item:hover > .nav__sub {
    opacity: 1; visibility: visible; transform: perspective(900px) rotateX(0deg);
  }
  .nav__item:hover > .nav__sub::before,
  .nav__item:hover > .nav__sub::after { transform: scaleY(1); }
}
/* Rungs: each row is spaced so the ladder reads as separate steps. */
.nav__sub li + li { margin-top: 6px; }
.nav__sub a {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; position: relative;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease-out);
}
/* Nut: a hex bolt seated across the two rails at each rung. */
.nav__sub a::before {
  content: ""; position: absolute; left: -25px; top: 50%; width: 11px; height: 11px;
  margin-top: -5.5px;
  background: var(--navy-700);
  box-shadow: inset 0 0 0 1.5px var(--teal-500);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease-out);
}
.nav__sub a:hover, .nav__sub a:focus-visible {
  color: #fff; background: rgba(255, 255, 255, 0.07); transform: translateX(3px);
}
/* the nut turns as you pick the rung */
.nav__sub a:hover::before, .nav__sub a:focus-visible::before {
  background: var(--teal-300); transform: rotate(90deg);
}
/* Sub-items cascade in, so the panel unfolds rather than just appearing. */
@media (prefers-reduced-motion: no-preference) {
  /* Rows cascade in so the panel unfolds instead of appearing all at once.
     The transition (incl. per-row delay) lives on the base rule — the open
     state only flips the values, so the delays are not overridden. */
  /* Each rung swings down on its own hinge, one after the next. */
  .nav__sub li {
    opacity: 0; transform: perspective(600px) rotateX(-70deg);
    transform-origin: top center;
    transition: opacity 0.24s var(--ease), transform 0.34s var(--ease-out-expo);
  }
  .nav__item.is-open > .nav__sub li,
  .nav__item:focus-within > .nav__sub li {
    opacity: 1; transform: perspective(600px) rotateX(0deg);
  }
  @media (hover: hover) and (min-width: 1024px) {
    .nav__item:hover > .nav__sub li {
      opacity: 1; transform: perspective(600px) rotateX(0deg);
    }
  }
  /* Closing collapses the whole ladder together (no reverse cascade), so the
     panel folds shut cleanly instead of unzipping rung by rung. */
  .nav__sub li { transition-delay: 0s; }
  .nav__item.is-open > .nav__sub li:nth-child(1),
  .nav__item:focus-within > .nav__sub li:nth-child(1) { transition-delay: 0.10s; }
  .nav__item.is-open > .nav__sub li:nth-child(2),
  .nav__item:focus-within > .nav__sub li:nth-child(2) { transition-delay: 0.16s; }
  .nav__item.is-open > .nav__sub li:nth-child(3),
  .nav__item:focus-within > .nav__sub li:nth-child(3) { transition-delay: 0.22s; }
  .nav__item.is-open > .nav__sub li:nth-child(4),
  .nav__item:focus-within > .nav__sub li:nth-child(4) { transition-delay: 0.28s; }
  .nav__item.is-open > .nav__sub li:nth-child(5),
  .nav__item:focus-within > .nav__sub li:nth-child(5) { transition-delay: 0.34s; }
  @media (hover: hover) and (min-width: 1024px) {
    .nav__item:hover > .nav__sub li:nth-child(1) { transition-delay: 0.10s; }
    .nav__item:hover > .nav__sub li:nth-child(2) { transition-delay: 0.16s; }
    .nav__item:hover > .nav__sub li:nth-child(3) { transition-delay: 0.22s; }
    .nav__item:hover > .nav__sub li:nth-child(4) { transition-delay: 0.28s; }
    .nav__item:hover > .nav__sub li:nth-child(5) { transition-delay: 0.34s; }
  }
}

.site-header__actions { display: flex; align-items: center; gap: 14px; margin-left: 6px; flex-shrink: 0; }
.brand { flex-shrink: 0; }
.patronage-chip {
  display: none; background: #fff; border-radius: var(--r-sm); padding: 5px 10px;
  line-height: 0; flex-shrink: 0;
}
.patronage-chip img { height: 30px; width: auto; }
/* The 1240px container is too narrow for 10 nav items plus the brand and
   actions, so the header alone widens on large screens. */
/* Even widened, the chip only fits on very large screens; below that it would
   sit under the last links. It still appears in the footer. */
/* Ministry mark: logo left, ministry right, burger far right. Kept on phones
   too (scaled down); hidden only on the very narrowest, where the logo and
   burger need the whole row. */
@media (min-width: 380px) { .patronage-chip { display: inline-flex; } }
@media (max-width: 1023px) {
  .patronage-chip { padding: 4px 8px; margin-left: auto; }
  .patronage-chip img { height: 20px; }
}
@media (max-width: 480px) { .patronage-chip img { height: 17px; } }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  position: relative; z-index: 130; flex-shrink: 0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; display: block; width: 22px; height: 2px; background: #fff;
  border-radius: 2px; margin: 5px auto; transition: transform var(--t-med) var(--ease),
    opacity var(--t-fast) var(--ease);
}
body.nav-open .nav-toggle::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span { opacity: 0; }
body.nav-open .nav-toggle::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .site-header .btn--register { display: none; }
  /* The nav becomes a fixed drawer; its row band must not reserve height or
     act as a containing block for it. */
  .site-header__navrow { border-top: 0; background: none; }
  .site-header__navrow, .site-header__navrow > .container {
    display: contents; /* drawer escapes the wrapper entirely */
  }
  .nav__glide { display: none; }
  /* the nav is position:fixed on mobile (out of flow) — push actions to the right edge */
  .site-header__actions { margin-left: auto; }
  /* drawer open: header sits ABOVE the overlay, fully opaque — nothing bleeds through */
  body.nav-open .site-header {
    z-index: 130; background: var(--navy-900);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav {
    position: fixed; inset: 0; z-index: 120; background: var(--navy-900);
    padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
    overflow-y: auto; margin: 0;
    opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
  }
  body.nav-open .nav { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--border-dark); }
  .nav__link {
    width: 100%; justify-content: space-between; padding: 19px 4px;
    font-size: 1.32rem; font-weight: 700; font-stretch: 108%;
    text-transform: uppercase; letter-spacing: 0.03em; color: #fff;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  body.nav-open .nav__link { opacity: 1; transform: none; }
  .nav__link::after { display: none; }
  .nav__sub {
    position: static; min-width: 0; background: none; border: 0; box-shadow: none;
    padding: 0 0 0 12px; transform: none; display: block;
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height 0.5s var(--ease-out-expo), opacity 0.35s var(--ease),
      visibility 0.5s, padding 0.5s var(--ease-out-expo);
  }
  .nav__item.is-open > .nav__sub {
    max-height: 440px; opacity: 1; visibility: visible; padding-bottom: 10px;
  }
  /* The desktop ladder fold is 3D and rail-based; the mobile accordion
     expands in flow instead, so reset the rungs, rails and nuts here. */
  .nav__sub li { opacity: 1; transform: none; transition: none; }
  .nav__sub::before, .nav__sub::after { display: none; }
  .nav__sub a::before { display: none; }
  .nav__sub li + li { margin-top: 0; }
  /* beat the desktop open-state fold, which also targets .is-open > .nav__sub */
  .nav__item.is-open > .nav__sub,
  .nav__item:focus-within > .nav__sub { transform: none; }
  .nav__sub a { opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s var(--ease-out-quint), transform 0.35s var(--ease-out-quint); }
  .nav__item.is-open > .nav__sub a { opacity: 1; transform: none; }
  .nav__item.is-open > .nav__sub a:nth-child(1) { transition-delay: 0.08s; }
  .nav__item.is-open > .nav__sub li:nth-child(2) a { transition-delay: 0.12s; }
  .nav__item.is-open > .nav__sub li:nth-child(3) a { transition-delay: 0.16s; }
  .nav__item.is-open > .nav__sub li:nth-child(4) a { transition-delay: 0.2s; }
  .nav__item.is-open > .nav__sub li:nth-child(5) a { transition-delay: 0.24s; }
  .nav__item.is-open > .nav__sub li:nth-child(6) a { transition-delay: 0.28s; }
  /* drawer backdrop: subtle RHIC facet field, no glassmorphism */
  .nav::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(420px 420px at 88% 12%, rgba(35, 173, 158, 0.1), transparent 65%),
      radial-gradient(360px 360px at 8% 92%, rgba(34, 126, 194, 0.08), transparent 65%);
  }
  .nav__sub a { font-size: 1rem; padding: 12px 10px; }
  .nav__mobile-cta { display: block; margin-top: 28px; }
  .nav__mobile-cta .btn { width: 100%; }
}
@media (min-width: 1024px) { .nav__mobile-cta { display: none; } }

/* 8. HERO ------------------------------------------------------------------ */
.hero {
  position: relative; background: var(--navy-900); color: #fff; overflow: hidden;
  min-height: min(calc(100svh - var(--header-h) - var(--announce-h)), 1040px);
  display: flex; align-items: center;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 82% 18%, rgba(34, 126, 194, 0.14), transparent 60%),
    radial-gradient(700px 700px at 8% 85%, rgba(35, 173, 158, 0.1), transparent 60%);
}
.hero__facets { position: absolute; right: -4%; top: -6%; width: 56%; opacity: 0.5; }
.hero__thread { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__thread path { stroke: var(--teal-500); stroke-width: 2; fill: none; }
.hero__thread circle { fill: var(--teal-300); }

.hero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 80px); align-items: center;
  padding-block: clamp(48px, 7vh, 88px);
  width: 100%;
}
.hero__eyebrow {
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-300);
  margin-bottom: 22px; display: flex; align-items: center; gap: 12px;
}
.hero__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--teal-500); }
.hero__title {
  font-size: clamp(1.8rem, 4.5vw, 3.9rem); font-weight: 800; font-stretch: 110%;
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.06; margin-bottom: 24px;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; }
.hero__title em { font-style: normal; color: var(--teal-300); }
.js:not(.has-gsap) .hero:not(.is-ready) .hero__title .line > span { transform: translateY(110%); }
.js:not(.has-gsap) .hero.is-ready .hero__title .line > span {
  animation: hero-line 0.75s var(--ease-out) both;
  animation-delay: calc(0.12s + var(--l, 0) * 0.09s);
}
.has-gsap .hero__title .line > span { transform: translateY(112%); }
@keyframes hero-line { from { transform: translateY(110%); } to { transform: translateY(0); } }

.hero__tagline {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: rgba(255, 255, 255, 0.85);
  font-weight: 400; letter-spacing: 0.01em; margin-bottom: 30px;
}
.hero__tagline b { color: var(--teal-300); font-weight: 600; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 20px 36px;
  border-block: 1px solid var(--border-dark); padding-block: 18px; margin-bottom: 32px;
}
.hero__meta .meta__label {
  display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
.hero__meta .meta__value { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #fff; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero__patronage { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.03em; margin: 0; }

.js .hero__stagger { opacity: 0; transform: translateY(18px); }
.js:not(.has-gsap) .hero.is-ready .hero__stagger {
  animation: hero-fade 0.7s var(--ease-out) both;
  animation-delay: calc(0.45s + var(--s, 0) * 0.12s);
}
@keyframes hero-fade { to { opacity: 1; transform: none; } }

/* Facet-masked media */
.hero__media { position: relative; justify-self: center; width: min(100%, 430px); }
.hero__facet {
  position: relative; aspect-ratio: 9 / 15; overflow: hidden;
  clip-path: polygon(50% 0%, 79% 11%, 97% 36%, 100% 66%, 82% 91%, 50% 100%, 18% 91%, 0% 66%, 3% 36%, 21% 11%);
  background: var(--navy-800);
}
.hero__facet video, .hero__facet img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__facet::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(8, 26, 43, 0) 55%, rgba(8, 26, 43, 0.55));
}
.hero__facet-outline {
  position: absolute; inset: 0; transform: translate(16px, 18px); z-index: -1;
  clip-path: polygon(50% 0%, 79% 11%, 97% 36%, 100% 66%, 82% 91%, 50% 100%, 18% 91%, 0% 66%, 3% 36%, 21% 11%);
  background: linear-gradient(160deg, rgba(35, 173, 158, 0.35), rgba(34, 126, 194, 0.12));
  opacity: 0.55;
}
.js:not(.has-gsap) .hero.is-ready .hero__media { animation: hero-media 1s var(--ease-out) 0.3s both; }
@keyframes hero-media { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* The hero thread turns the corner at the bottom-left and runs horizontally
   at the same height as this label, so the line used to strike through the
   word. Sit the cue clear of that run: above the corner, and indented past
   the thread's vertical leg. */
.hero__scrollcue {
  position: absolute; left: calc(var(--gutter) + 42px); bottom: 92px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.hero__scrollcue::after {
  content: ""; width: 1px; height: 34px; background: linear-gradient(var(--teal-500), transparent);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue { 0%, 100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { display: none; }
  .hero { min-height: 0; }
  .hero__bg-mobile { position: absolute; inset: 0; overflow: hidden; }
  /* top-band crop (-13.5%) removes the film's baked-in watermarks (RHIC top-left,
     MoH top-right) so they never compete with the eyebrow/header logo; every
     scene's subject sits center/low, so nothing meaningful is lost */
  .hero__bg-mobile img, .hero__bg-mobile video {
    position: absolute; top: -13.5%; left: 0;
    width: 100%; height: 113.5%; object-fit: cover;
  }
  /* brand wash keeps typography WCAG-readable while the film stays visible */
  .hero__bg-mobile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(8, 26, 43, 0.82) 0%,
      rgba(8, 26, 43, 0.6) 34%,
      rgba(8, 26, 43, 0.62) 62%,
      rgba(8, 26, 43, 0.94) 100%);
  }
  .hero__thread { display: none; }
  .hero__scrollcue { display: none; }
}
@media (min-width: 1024px) { .hero__bg-mobile { display: none; } }

/* 9. PAGE HERO (subpages) -------------------------------------------------- */
.page-hero {
  position: relative; background: var(--navy-900); color: #fff; overflow: hidden;
  padding-block: clamp(56px, 9vw, 104px);
}
.page-hero__bg { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 26, 43, 0.95) 30%, rgba(8, 26, 43, 0.55));
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; margin-bottom: 10px;
}
.page-hero__lede { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; max-width: 44em; margin: 0; }

.breadcrumb-nav { margin-top: 22px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; }
.breadcrumbs a { color: rgba(255, 255, 255, 0.65); }
.breadcrumbs a:hover { color: var(--teal-300); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, 0.35); }
.breadcrumbs [aria-current] { color: var(--teal-300); }

/* 10. EMBED SHELL (Eventegration) ------------------------------------------ */
.embed-shell {
  position: relative; background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden;
}
.embed-shell iframe { display: block; width: 100%; border: 0; }
.embed-skeleton {
  position: absolute; inset: 0; z-index: 2; background: var(--surface-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 32px;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.embed-shell.is-loaded .embed-skeleton { opacity: 0; visibility: hidden; }
.embed-skeleton__mark {
  width: 46px; height: 58px;
  clip-path: polygon(50% 0%, 79% 11%, 97% 36%, 100% 66%, 82% 91%, 50% 100%, 18% 91%, 0% 66%, 3% 36%, 21% 11%);
  background: linear-gradient(160deg, var(--navy-700), var(--teal-500));
  animation: pulse-mark 1.6s var(--ease) infinite;
}
@keyframes pulse-mark { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } }
.embed-skeleton__text { font-family: var(--font-display); font-weight: 600; color: var(--ink-600); margin: 0; }
.embed-fallback { display: none; }
.embed-shell.is-failed .embed-skeleton { opacity: 0; visibility: hidden; }
.embed-shell.is-failed .embed-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; position: absolute; inset: 0; z-index: 3; background: var(--surface-1);
  text-align: center; padding: 32px;
}
.embed-help { margin-top: 18px; text-align: center; font-size: 0.9rem; color: var(--ink-600); }
.embed-help a { font-weight: 600; }

/* 11. COMING SOON ----------------------------------------------------------- */
.coming-soon {
  position: relative; background: var(--navy-900); color: #fff; overflow: hidden;
  min-height: min(calc(100svh - var(--header-h) - var(--announce-h)), 860px);
  display: flex; align-items: center; text-align: center;
}
.coming-soon .container { position: relative; z-index: 1; max-width: 760px; }
.coming-soon__tag { color: var(--teal-300); }
.coming-soon__title { font-size: clamp(2.1rem, 4.5vw, 3.4rem); font-stretch: 112%; text-transform: uppercase; }
.coming-soon__lede { color: rgba(255, 255, 255, 0.75); font-size: 1.1rem; }
.coming-soon__meta {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  border-block: 1px solid var(--border-dark); padding: 14px 8px; margin: 26px 0 30px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
}
.coming-soon__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* 12. FOOTER ---------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.78); position: relative; }
.site-footer__horizon { display: block; width: 100%; height: 70px; }
.site-footer__horizon path { stroke: var(--teal-500); stroke-width: 1.5; fill: none; opacity: 0.65; }
.site-footer__horizon circle { fill: var(--teal-300); }
.site-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(32px, 4vw, 56px); padding-block: 24px 56px;
}
.site-footer h2 {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal-300); margin-bottom: 18px;
}
.site-footer__brand img { height: 52px; width: auto; margin-bottom: 18px; }
.site-footer__brand p { font-size: 0.95rem; margin-bottom: 6px; }
.site-footer a { color: rgba(255, 255, 255, 0.78); }
.site-footer a:hover { color: var(--teal-300); }
.site-footer__links li { margin-bottom: 10px; font-size: 0.95rem; }
.footer-patronage { background: #fff; border-radius: var(--r-sm); padding: 10px 14px; display: inline-block; line-height: 0; margin-top: 6px; }
.footer-patronage img { height: 40px; width: auto; }
.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-dark); color: #fff;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.social-row a:hover { background: var(--teal-500); border-color: var(--teal-500); color: var(--navy-900); transform: translateY(-2px); }
.site-footer__bottom {
  border-top: 1px solid var(--border-dark); padding-block: 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.55);
}
/* Design credit sits last on desktop, centred when the row wraps on mobile. */
.site-footer__credit { margin-inline-start: auto; }
.site-footer__credit a { color: rgba(255, 255, 255, 0.72); }
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--teal-300); }
@media (max-width: 767px) {
  .site-footer__bottom { justify-content: center; text-align: center; }
  .site-footer__credit { margin-inline-start: 0; }
}
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .site-footer__grid { grid-template-columns: 1fr; } }

/* 13. HOME — SCALE STRIP ---------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-tile {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 30px 28px 26px; position: relative; overflow: hidden;
}
.stat-tile::after {
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--surface-1) 50%, transparent 50%);
}
.stat-tile__num {
  font-family: var(--font-display); font-weight: 800; font-stretch: 110%;
  font-size: clamp(2.3rem, 3.6vw, 3rem); line-height: 1; color: var(--navy-700);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 2px;
}
.stat-tile__num i { font-style: normal; color: var(--teal-500); font-size: 0.72em; }
.stat-tile__label { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: 10px 0 6px; color: var(--ink-900); }
.stat-tile__desc { font-size: 0.9rem; color: var(--ink-400); margin: 0; }
.stat-tile--seal .stat-tile__num { color: var(--teal-600); font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
@media (max-width: 1023px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stat-grid { grid-template-columns: 1fr; gap: 16px; } }

/* 14. SPLIT (About) --------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); display: block;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
}
.split__media::before {
  content: ""; position: absolute; inset: auto -16px -16px auto; width: 60%; height: 60%;
  border: 1.5px solid var(--teal-500); border-radius: var(--r-lg); opacity: 0.35; z-index: -1;
  clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 0 100%);
}
.split__body .btn { margin-top: 10px; }
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; }
  .split__media img { aspect-ratio: 16 / 10; }
}

/* 15. COUNTDOWN BAND -------------------------------------------------------- */
.cd-band { background: var(--navy-900); color: #fff; padding-block: clamp(44px, 6vw, 64px); position: relative; overflow: hidden; }
.cd-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 320px at 85% 50%, rgba(35, 173, 158, 0.12), transparent 65%);
}
.cd-band .container { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; justify-content: space-between; }
.cd-band__title { font-size: 1.35rem; font-stretch: 110%; margin: 0 0 6px; }
.cd-band__deadline { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); margin: 0; }
.cd-band__deadline b { color: var(--teal-300); font-weight: 600; }
.cd-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cd-box {
  min-width: 82px; text-align: center; padding: 14px 10px 11px;
  border: 1px solid var(--border-dark); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04);
}
.cd-box b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-box span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 560px) { .cd-box { min-width: 66px; padding: 11px 6px 9px; } .cd-box b { font-size: 1.5rem; } }
/* Narrow phones: 4-across overflows, so drop the countdown to an even 2x2 grid. */
@media (max-width: 400px) {
  .cd-row { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .cd-box { min-width: 0; }
}

/* 16. FEATURE CARDS (Why attend) ------------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 30px 28px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--teal-500); }
.feature-card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(35, 173, 158, 0.12); color: var(--teal-600); margin-bottom: 20px;
}
.feature-card h3 { font-size: 1.14rem; margin-bottom: 8px; }
.feature-card p { font-size: 0.95rem; color: var(--ink-600); margin: 0; }
@media (max-width: 1023px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .feature-grid { grid-template-columns: 1fr; gap: 16px; } }

/* 17. TRACKS (dark) --------------------------------------------------------- */
.tracks-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.track-chip {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  padding: 14px 24px; border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.88); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a.track-chip:hover { border-color: var(--teal-500); background: rgba(35, 173, 158, 0.14); color: #fff; }
.track-chip--more { border-style: dashed; color: var(--teal-300); }
.tracks-footer { margin-top: 36px; }

/* 18. JOURNEY TIMELINE ------------------------------------------------------ */
.journey ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; position: relative; counter-reset: none; }
.journey ol.journey-cols-4 { grid-template-columns: repeat(4, 1fr); }
.journey ol::before {
  content: ""; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px;
  background: linear-gradient(90deg, var(--teal-500), var(--border) 85%); border-radius: 2px;
}
.journey li { position: relative; padding-top: 30px; }
.journey li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-0); border: 3px solid var(--teal-500);
}
.journey__day { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-600); display: block; }
.journey__date { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-900); display: block; margin: 2px 0 10px; }
.journey h3 { font-size: 1.02rem; margin-bottom: 6px; }
.journey p { font-size: 0.88rem; color: var(--ink-600); margin: 0; }
@media (max-width: 1023px) {
  .journey ol, .journey ol.journey-cols-4 { grid-template-columns: 1fr; gap: 0; padding-left: 8px; }
  .journey ol::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--teal-500), var(--border) 90%); }
  .journey li { padding: 0 0 28px 34px; }
  .journey li::before { top: 2px; }
}

/* 19. OMAN INTERLUDE -------------------------------------------------------- */
.oman { background: var(--navy-900); color: #fff; padding-block: var(--section-y) 0; overflow: hidden; }
.oman .section-lede { color: rgba(255, 255, 255, 0.78); }
.oman .section-tag { color: var(--teal-300); }
/* Five 220x800 portrait slats, always in ONE row at every breakpoint, and
   always shown whole. Height comes from the source ratio rather than a fixed
   value, so nothing is cropped and nothing scrolls sideways: as the viewport
   narrows the columns narrow with it and the row simply gets shorter. */
.oman__slats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin-top: clamp(36px, 5vw, 64px);
}
/* min-width:0 lets a grid item shrink below its content's intrinsic width —
   without it the 220px-wide image floors the column and overflows the track. */
.oman__slats figure { margin: 0; overflow: hidden; min-width: 0; }
.oman__slats img {
  width: 100%; height: auto; aspect-ratio: 220 / 800; object-fit: cover;
  display: block; transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) { .oman__slats figure:hover img { transform: scale(1.05); } }
@media (max-width: 767px) { .oman__slats { gap: 4px; } }

/* 20. GRADIENT BAND + CLOSING ----------------------------------------------- */
.band { background: var(--gradient-brand); color: #fff; text-align: center; padding-block: clamp(56px, 8vw, 88px); }
.band .section-title { color: #fff; }
.band p { color: rgba(255, 255, 255, 0.88); max-width: 52em; margin-inline: auto; }
.band__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

.closing { background: var(--navy-900); color: #fff; text-align: center; padding-block: clamp(72px, 10vw, 120px); position: relative; overflow: hidden; }
.closing::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 50% 110%, rgba(35, 173, 158, 0.14), transparent 70%);
}
.closing .container { position: relative; }
.closing .section-title { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.closing p { color: rgba(255, 255, 255, 0.78); max-width: 46em; margin-inline: auto; }

/* 20a. ABOUT PAGE ----------------------------------------------------------- */
.num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.num-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.num-item__chip {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--teal-500); color: var(--navy-700);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.num-item__label { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
@media (max-width: 767px) { .num-grid { grid-template-columns: 1fr; gap: 0; } }

/* Audience photo cards — "Who Should Attend" ---------------------------------- */
.aud-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.aud-card { margin: 0; }
.aud-card__media {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-1);
  aspect-ratio: 307 / 280;
}
.aud-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-med) var(--ease-out);
}
/* Navy scrim anchors the number and keeps the photos reading as one set. */
.aud-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 26, 43, 0.55) 0%, rgba(8, 26, 43, 0) 46%);
}
.aud-card__num {
  position: absolute; left: 10px; bottom: 8px; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: #fff; letter-spacing: 0.02em; text-shadow: 0 1px 6px rgba(8, 26, 43, 0.5);
}
.aud-card__label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.94rem;
  color: var(--ink-900); margin-top: 10px; line-height: 1.35;
}
.aud-card:hover .aud-card__media img { transform: scale(1.06); }
.aud-card:hover .aud-card__media { border-color: var(--teal-500); }

@media (max-width: 1200px) { .aud-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .aud-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 620px)  { .aud-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 360px)  { .aud-card__label { font-size: 0.86rem; } }
@media (prefers-reduced-motion: reduce) {
  .aud-card__media img { transition: none; }
  .aud-card:hover .aud-card__media img { transform: none; }
}

.exp-banner { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 440px; display: flex; align-items: center; }
.exp-banner__bg { position: absolute; inset: 0; }
.exp-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.exp-banner__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 26, 43, 0.15), rgba(8, 26, 43, 0.82) 65%); }
.exp-banner__panel { position: relative; z-index: 1; color: #fff; max-width: 520px; margin-left: auto; padding: clamp(28px, 5vw, 56px); }
.exp-banner__panel .section-tag { color: var(--teal-300); }
.exp-banner__panel h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-stretch: 110%; }
.exp-banner__panel p { color: rgba(255, 255, 255, 0.88); margin: 0; }

.leader-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.leader-card {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 30px; display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden; height: 100%;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease-out);
}
/* Facet notch, echoing .stat-tile — ties the card into the wider system. */
.leader-card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--surface-1) 50%, transparent 50%);
}
.leader-card:hover { border-color: var(--teal-500); box-shadow: var(--shadow-2); transform: translateY(-3px); }
/* Fixed two-line eyebrow so both avatar rows start on the same baseline. */
.leader-card__tag {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-600); margin: 0 0 4px;
  line-height: 1.5; min-height: 3em; /* reserve 2 lines so avatar rows align */
}
.leader-card__head { display: flex; gap: 18px; align-items: center; }
.leader-card__head img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: top center;
  flex-shrink: 0; border: 2px solid var(--border); background: var(--surface-1);
}
.leader-card__role { font-size: 0.85rem; color: var(--ink-400); margin: 2px 0 0; }
.leader-card h3 { font-size: 1.15rem; margin: 0; }
.leader-card blockquote { margin: 0; font-size: 0.97rem; color: var(--ink-600); border-left: 3px solid var(--teal-500); padding-left: 16px; }
/* Push the CTA to the bottom so buttons align across cards of unequal text. */
.leader-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 1023px) {
  .leader-grid { grid-template-columns: 1fr; }
  .leader-card__tag { min-height: 0; }
}

/* Leadership message modal — branded shell over Bootstrap's dialog ------------- */
/* Navy brand scrim instead of Bootstrap's flat black. */
.modal-backdrop.show { background-color: var(--overlay); opacity: 1; }
@supports (backdrop-filter: blur(2px)) {
  .leader-modal { backdrop-filter: blur(3px); }
}
.leader-modal .modal-content {
  border: 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-3); background: var(--surface-0);
}
.leader-modal .modal-dialog { max-width: 860px; }

.leader-modal__head {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--gradient-brand); color: #fff;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 44px) clamp(26px, 3.4vw, 36px);
}
.leader-modal__facets { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.leader-modal__thread {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 68px; z-index: -1;
  fill: none; stroke: var(--teal-300); stroke-opacity: 0.5; stroke-width: 1.5;
}
.leader-modal__thread circle { fill: var(--teal-300); stroke: none; }

.leader-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.leader-modal__close svg { width: 18px; height: 18px; }
.leader-modal__close:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--teal-300); transform: rotate(90deg); }
.leader-modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.leader-modal__id { display: flex; gap: clamp(16px, 2.4vw, 24px); align-items: center; padding-right: 48px; }
.leader-modal__id img {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; object-position: top center;
  border: 3px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12);
}
.leader-modal__eyebrow {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-300); margin: 0 0 8px;
}
.leader-modal__name {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-stretch: 110%;
  font-weight: 700; line-height: 1.2; color: #fff; margin: 0;
}
.leader-modal__role { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); margin: 6px 0 0; }

.leader-modal__body { padding: clamp(26px, 3.4vw, 40px) clamp(24px, 4vw, 44px); position: relative; }
/* Oversized quote mark, tying back to the cards' blockquote rule. */
.leader-modal__body::before {
  content: "\201C"; position: absolute; top: 4px; left: clamp(12px, 2vw, 22px);
  font-family: var(--font-display); font-size: 6rem; line-height: 1;
  color: var(--teal-500); opacity: 0.14; pointer-events: none;
}
.leader-modal__body p {
  position: relative; margin: 0; color: var(--ink-600);
  font-size: 1.02rem; line-height: 1.75;
  border-left: 3px solid var(--teal-500); padding-left: clamp(16px, 2vw, 22px);
}
/* Entrance: lift + settle, matching the site's ease-out-expo motion language. */
.leader-modal.fade .modal-dialog {
  transform: translateY(24px) scale(0.98);
  transition: transform var(--motion-med, 350ms) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity var(--motion-med, 350ms) var(--ease);
}
.leader-modal.show .modal-dialog { transform: translateY(0) scale(1); }

/* The header must never be squeezed by the scrollable body — it holds the
   name/role and would clip them. Let it keep its intrinsic height. */
.leader-modal .modal-dialog-scrollable .leader-modal__head { flex-shrink: 0; }
.leader-modal__name { overflow-wrap: anywhere; }

@media (max-width: 575px) {
  .leader-modal__id { flex-direction: column; align-items: flex-start; text-align: left; padding-right: 40px; }
  .leader-modal__id img { width: 76px; height: 76px; }
  /* Narrow screens: scroll the whole dialog so the header can't be clipped. */
  .leader-modal .modal-dialog-scrollable { max-height: calc(100% - 1rem); }
  .leader-modal .modal-dialog-scrollable .modal-content { overflow-y: auto; }
  .leader-modal .modal-dialog-scrollable .modal-body { overflow-y: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .leader-modal.fade .modal-dialog { transform: none; transition: none; }
  .leader-card { transition: none; }
  .leader-card:hover { transform: none; }
  .leader-modal__close:hover { transform: none; }
}

.rh-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rh-chip {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 20px;
  border: 1px solid var(--border-dark); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9);
}
.rh-chip b { font-size: 1.25rem; color: var(--teal-300); font-variant-numeric: tabular-nums; }
.rh-quote { border-left: 3px solid var(--teal-500); padding: 6px 0 6px 20px; margin: 24px 0; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; }

/* Pillars + The Thread */
.pillars { position: relative; display: grid; gap: 28px; }
.pillars__thread { position: absolute; left: 47px; top: -36px; height: calc(100% + 72px); width: 4px; z-index: 0; pointer-events: none; }
.pillars__thread path { stroke: var(--teal-500); stroke-width: 2.5; fill: none; }
.pillar {
  position: relative; z-index: 1; color: #fff; border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px) clamp(28px, 4vw, 44px) 96px;
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
}
.pillar--sustainability { background: linear-gradient(135deg, #14835d, #22b287); }
.pillar--leadership { background: linear-gradient(135deg, #183454, #22476b); }
.pillar--innovation { background: linear-gradient(135deg, #148eb8, #25abd1); }
.pillar__node {
  position: absolute; left: 36px; top: clamp(28px, 4vw, 44px); width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-0); border: 4px solid var(--teal-500); transform: translateX(-50%);
}
.pillar__kicker { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 6px; }
.pillar h3 { font-size: 1.5rem; font-stretch: 110%; margin-bottom: 4px; }
.pillar__sub { font-family: var(--font-display); font-weight: 600; color: rgba(255, 255, 255, 0.85); margin-bottom: 14px; }
.pillar p { color: rgba(255, 255, 255, 0.92); margin-bottom: 10px; }
.pillar p:last-child { margin-bottom: 0; font-weight: 600; }
@media (max-width: 640px) {
  .pillar { padding-left: 64px; }
  .pillars__thread { left: 31px; }
  .pillar__node { left: 24px; }
}

.thread-story { position: relative; overflow: hidden; }
.thread-story__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.thread-story__svg path { stroke: var(--teal-500); stroke-width: 2; fill: none; opacity: 0.8; }
.thread-story .container { position: relative; z-index: 1; }

.luban-media { position: relative; text-align: center; }
.luban-media img { max-width: min(78%, 380px); filter: drop-shadow(0 24px 40px rgba(8, 26, 43, 0.28)); }
@media (prefers-reduced-motion: no-preference) {
  .luban-media img { animation: luban-float 5.5s ease-in-out infinite; }
}
@keyframes luban-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 20c. SCIENTIFIC PROGRAMME -------------------------------------------------- */
.journey ul { margin-top: 8px; }
/* Nested inside .journey li, which carries padding-top:30px for the timeline
   step dots. That padding must be cleared here, otherwise the absolutely
   positioned dash below pins to the top of a 30px-taller box and reads as an
   orphaned bullet floating above its own text. */
.journey ul li {
  font-size: 0.86rem; color: var(--ink-600); position: relative;
  padding: 0 0 0 16px; margin-bottom: 4px;
}
.journey ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 2px; background: var(--teal-500); }

.tracks-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 32px; }
.tracks-index li {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink-900);
  transition: border-color var(--t-med) var(--ease);
}
/* Thumbnail replaces the dot marker, so the dot must not also render. */
.tracks-index li::before { content: none; }
.track-ico {
  flex: 0 0 auto; width: 52px; height: 52px; object-fit: contain;
  border-radius: var(--r-sm); background: var(--surface-1); padding: 2px;
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease);
}
.tracks-index li:hover { border-bottom-color: var(--teal-500); }
.tracks-index li:hover .track-ico { transform: scale(1.08); background: rgba(35, 173, 158, 0.12); }
@media (max-width: 1023px) { .tracks-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .tracks-index { grid-template-columns: 1fr; } }
@media (max-width: 400px)  { .track-ico { width: 46px; height: 34px; } }
@media (prefers-reduced-motion: reduce) {
  .track-ico, .tracks-index li { transition: none; }
  .tracks-index li:hover .track-ico { transform: none; }
}

.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.overview-card { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); }
.overview-card h3 { font-size: 1.3rem; }
.check-list li { position: relative; padding: 8px 0 8px 30px; font-weight: 500; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal-500);
  clip-path: none;
}
.check-list li::after {
  content: ""; position: absolute; left: 4px; top: 17px; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
@media (max-width: 1023px) { .overview-grid { grid-template-columns: 1fr; } }

.status-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px;
  border: 1.5px dashed var(--teal-300); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--teal-300);
  max-width: 100%; /* never push past the container on narrow screens */
}
.status-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-300);
  flex: 0 0 auto; /* dot must not shrink when the label wraps */
}

.dates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.date-card {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 22px 20px; text-align: center;
}
.date-card .date { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy-700); margin-bottom: 6px; }
.date-card h3, .date-card h4 { font-size: 0.88rem; color: var(--ink-600); font-weight: 500; font-family: var(--font-body); margin: 0; }
.date-card--hot { border-color: var(--teal-500); box-shadow: var(--shadow-1); }
.date-card--hot .date { color: var(--teal-600); }
/* Four cards divide evenly into 2x2, so the last one no longer needs to span
   the row (it did when there were five). */
@media (max-width: 1023px) { .dates-grid { grid-template-columns: repeat(2, 1fr); } }

/* Abstract submission tabs (restyled legacy block) */
.submission-categories { padding-block: var(--section-y); background: var(--surface-1); }
.submission-categories .section-heading h2 { font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-stretch: 110%; }
.submission-categories .section-heading p { color: var(--ink-600); max-width: 46em; margin-inline: auto; }
.track-tabs { gap: 8px; max-height: 620px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.track-tabs .nav-link {
  text-align: left; width: 100%; background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 12px; color: var(--ink-900); font-family: var(--font-display); font-weight: 600;
  font-size: 0.93rem; padding: 14px 18px; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.track-tabs .nav-link:hover { border-color: var(--teal-500); background: var(--surface-0); color: var(--ink-900); }
.track-tabs .nav-link.active { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.submission-categories .tab-content {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px); height: 100%;
}
.track-content h3 { font-size: 1.35rem; margin-bottom: 20px; }
.content-block { margin-bottom: 22px; }
.content-block:last-child { margin-bottom: 0; }
.content-block h4, .content-block h5 {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-600); margin-bottom: 8px;
}
.content-block p { color: var(--ink-600); margin-bottom: 0; font-size: 0.97rem; }
.content-block ul li { position: relative; padding-left: 20px; margin-bottom: 5px; color: var(--ink-600); font-size: 0.97rem; }
.content-block ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--teal-500); }
.submission-note { text-align: center; margin-top: 28px; color: var(--ink-400); font-size: 0.92rem; }
@media (max-width: 991px) { .track-tabs { max-height: none; flex-direction: row !important; flex-wrap: wrap; overflow: visible; margin-bottom: 18px; } .track-tabs .nav-link { width: auto; } }

/* Submission guidelines (restyled legacy block) */
.submission-guidelines { padding-block: var(--section-y); }
@media (max-width: 767px) {
  .submission-guidelines .row, .submission-categories .row { --bs-gutter-x: 1.5rem; }
}
.guideline-card, .presentation-wrapper { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); height: 100%; }
.guideline-card h3, .presentation-wrapper h3 { font-size: 1.3rem; margin-bottom: 18px; }
.guideline-list li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; color: var(--ink-600); }
.guideline-list li i { color: var(--teal-500); }
.presentation-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--border); }
.presentation-card:first-of-type { border-top: 0; }
.presentation-card .icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(35, 173, 158, 0.12); color: var(--teal-600); font-size: 1.1rem;
}
.presentation-card h4 { font-size: 1.05rem; margin-bottom: 4px; }
.presentation-card p { color: var(--ink-600); font-size: 0.95rem; margin: 0; }

/* 20d. WORKSHOPS + REGISTRATION SHELLS -------------------------------------- */
.embed-shell iframe { min-height: clamp(860px, calc(100svh - 200px), 1200px); }
.embed-shell--app iframe { min-height: clamp(900px, calc(100svh - 140px), 1400px); }
.embed-wrap { max-width: 1240px; margin-inline: auto; }
.embed-wrap--form { max-width: 960px; }
@media (max-width: 767px) {
  .embed-wrap { padding-inline: 0; }
  .embed-wrap .embed-shell { border-radius: 0; border-left: 0; border-right: 0; }
}

.note-card {
  background: var(--surface-0); border: 1px solid var(--border); border-left: 4px solid var(--teal-500);
  border-radius: var(--r-md); padding: 26px 28px;
}
.note-card h3, .note-card h4 { font-size: 1.08rem; margin-bottom: 10px; }
.note-card ul li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; color: var(--ink-600); font-size: 0.95rem; }
.note-card ul li i { color: var(--teal-600); }

.info-chips { display: flex; flex-wrap: wrap; gap: 12px 28px; border-block: 1px solid var(--border); padding-block: 16px; margin-bottom: 26px; }
.info-chips .meta__label { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 3px; }
.info-chips .meta__value { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-900); }

/* 20e. REGISTRATION --------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.price-card {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 28px; display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--teal-500); }
.price-card--featured { border-color: var(--teal-500); box-shadow: var(--shadow-1); }
.price-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.price-card__icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(35, 173, 158, 0.12); color: var(--teal-600); font-size: 1.15rem;
}
.price-card__amount { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); }
.price-card__amount small { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-400); }
.price-card__amount b { font-size: 2.2rem; font-weight: 800; color: var(--navy-700); font-variant-numeric: tabular-nums; }
.price-card h3 { font-size: 1.08rem; margin: 0; }
.price-card .btn { margin-top: 16px; align-self: flex-start; }
@media (max-width: 1023px) { .price-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .price-grid { grid-template-columns: 1fr; } }

.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mini-card {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 20px; display: flex; align-items: center; gap: 14px;
}
.mini-card .icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: rgba(35, 173, 158, 0.12); color: var(--teal-600); font-size: 1.05rem;
}
.mini-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; margin: 0; }
@media (max-width: 1023px) { .mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .mini-grid { grid-template-columns: 1fr; } }

.doc-list { display: grid; gap: 8px; margin-top: 10px; }
.journey .doc-list li,
.doc-list li {
  display: flex; gap: 10px; align-items: baseline; color: var(--ink-600); font-size: 0.93rem;
  padding: 0; margin: 0; position: static;
}
/* The bi-icon is this list's marker — suppress the inherited .journey ul li
   dash, which would otherwise render as a second, orphaned bullet. Needs to
   out-specify `.journey ul li::before`. */
.journey ul.doc-list li::before,
.doc-list li::before { content: none; display: none; }
.doc-list li i { color: var(--teal-600); flex: 0 0 auto; line-height: 1.5; }

/* 20b. QA MODE (dev screenshots: ?qa=1) ------------------------------------- */
body.qa-mode *, body.qa-mode *::before, body.qa-mode *::after { animation: none !important; transition: none !important; }
body.qa-mode .reveal, body.qa-mode .hero__stagger { opacity: 1 !important; transform: none !important; }
.js body.qa-mode .hero__title .line > span, body.qa-mode .hero__title .line > span { transform: none !important; }
body.qa-mode .hero__media { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   MOTION 2.0 — signature layer (GSAP-owned; CSS provides fallbacks + states)
   ========================================================================== */
:root {
  --motion-fast: 180ms;
  --motion-med: 350ms;
  --motion-slow: 700ms;
  --motion-cine: 1200ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* When GSAP is active it owns the hero — disable the CSS keyframe fallbacks */
.has-gsap .hero.is-ready .hero__title .line > span,
.has-gsap .hero.is-ready .hero__stagger,
.has-gsap .hero.is-ready .hero__media { animation: none; }
.has-gsap .hero__facet video, .has-gsap .hero__facet img { will-change: transform; }

/* Journey: scrub-driven progress line + sequential node activation */
.journey ol::before {
  background: linear-gradient(90deg, var(--teal-500) calc(var(--jp, 0) * 100%), var(--border) calc(var(--jp, 0) * 100%));
}
.journey li::before {
  transition: transform var(--motion-med) var(--ease-out-quint), box-shadow var(--motion-med) var(--ease),
    background-color var(--motion-med) var(--ease), border-color var(--motion-med) var(--ease);
}
.journey li.is-active::before {
  background: var(--teal-500); transform: scale(1.2);
  box-shadow: 0 0 0 7px rgba(35, 173, 158, 0.16);
}
.journey li .journey__day { transition: color var(--motion-med) var(--ease); }
.journey li.is-active .journey__day { color: var(--teal-600); }
@media (max-width: 1023px) {
  .journey ol::before, .journey ol.journey-cols-4::before {
    background: linear-gradient(180deg, var(--teal-500) calc(var(--jp, 0) * 100%), var(--border) calc(var(--jp, 0) * 100%));
  }
}

/* Tracks: spotlight field + node-dot hover (no layout shift) */
.tracks-spot { position: relative; }
.tracks-spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(35, 173, 158, 0.12), transparent 70%);
  transition: opacity 0.4s var(--ease);
}
.tracks-spot.is-lit::before { opacity: 1; }
.track-chip { position: relative; transition: border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
.track-chip::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--teal-300); opacity: 0; transform: scale(0.4);
  transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease-out-quint);
}
a.track-chip:hover, a.track-chip:focus-visible { transform: translateY(-2px); }
a.track-chip:hover::before, a.track-chip:focus-visible::before { opacity: 1; transform: scale(1); }

/* About pillars: scroll-story focus states (GSAP toggles .is-lit) */
.has-gsap .pillar { opacity: 0.45; transform: scale(0.985); transition: opacity 0.55s var(--ease-out-quint), transform 0.55s var(--ease-out-quint); }
.has-gsap .pillar.is-lit { opacity: 1; transform: scale(1); }
.has-gsap .pillar .pillar__node { transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease-out-quint); }
.has-gsap .pillar.is-lit .pillar__node { box-shadow: 0 0 0 8px rgba(35, 173, 158, 0.18); transform: translateX(-50%) scale(1.12); }

/* Closing CTA: thread arrival */
.closing__thread { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 130px; width: 40px; overflow: visible; }
.closing__thread path { stroke: var(--teal-500); stroke-width: 2; fill: none; }
.closing__thread circle { fill: var(--teal-300); }

/* Buttons: press + focus polish */
.btn:active { transform: scale(0.985); }

/* Nav: current page indicator */
.nav__link[aria-current="page"] { color: #fff; }
.nav__link[aria-current="page"]::after { right: 13px; }

/* Mobile menu: wipe reveal instead of plain fade */
@media (max-width: 1023px) {
  .nav {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.55s var(--ease-out-expo), opacity 0.3s var(--ease), visibility 0.55s;
  }
  body.nav-open .nav { clip-path: inset(0 0 0% 0); }
}

/* Page-hero entrance states (GSAP-owned) */
.has-gsap .page-hero__bg img { will-change: transform; }

/* ==========================================================================
   MOTION 3.0 — high-intensity layer (text-fill, intro, transitions)
   ========================================================================== */

/* Scroll-driven text fill — signature typographic system.
   --fill scrubbed 0%→100% by motion.js on [data-tfill] elements. */
.has-gsap [data-tfill] {
  --fill: 0%;
  background-image: linear-gradient(90deg, var(--tf-on) var(--fill), var(--tf-off) var(--fill));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.has-gsap [data-tfill="up"] {
  background-image: linear-gradient(0deg, var(--tf-on) var(--fill), var(--tf-off) var(--fill));
}
/* palette per context */
[data-tfill] { --tf-on: var(--navy-700); --tf-off: #b9c9d6; }
.section--dark [data-tfill], .oman [data-tfill], .closing [data-tfill], .cd-band [data-tfill] {
  --tf-on: var(--teal-300); --tf-off: rgba(255, 255, 255, 0.28);
}
.pillar [data-tfill] { --tf-on: #ffffff; --tf-off: rgba(255, 255, 255, 0.38); }
/* outline variant for giant editorial moments */
.has-gsap [data-tfill].tfill-outline { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35); }
/* fallbacks: readable final state without GSAP / with reduced motion */
html:not(.has-gsap) [data-tfill] { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  [data-tfill] { background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
}

/* Journey dates fill sequentially with the progress line (set via --dfill) */
.has-gsap .journey__date {
  background-image: linear-gradient(90deg, var(--teal-600) var(--dfill, 0%), var(--ink-900) var(--dfill, 0%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .has-gsap .journey__date { background: none; color: var(--ink-900); -webkit-text-fill-color: currentColor; }
}

/* Tracks: living-system hover — siblings recede, target lifts */
@media (hover: hover) {
  .tracks-cta:hover .track-chip:not(:hover) { opacity: 0.45; }
  .track-chip { transition: border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), opacity var(--motion-med) var(--ease); }
}

/* Branded intro overlay (≤1s, skipped on revisit + reduced motion + no JS) */
.intro {
  position: fixed; inset: 0; z-index: 400; background: var(--navy-900);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.intro svg { width: 116px; height: 145px; overflow: visible; }
.intro path { stroke: var(--teal-500); stroke-width: 2; fill: none; }
.intro [data-intro-mark] { filter: drop-shadow(0 0 5px rgba(35, 173, 158, 0.4)); }
.intro [data-intro-comet] {
  stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 9px rgba(126, 217, 205, 1));
}
.intro circle { fill: var(--teal-300); }
.intro [data-intro-node] { filter: drop-shadow(0 0 8px rgba(126, 217, 205, 0.9)); }
.intro [data-intro-pulse] { opacity: 0; fill: #ffffff; filter: drop-shadow(0 0 8px rgba(126, 217, 205, 1)); }
.intro [data-intro-pulse] { r: 3; }
html:not(.js) .intro, html:not(.has-gsap) .intro { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }
/* absolute failsafe: overlay can never trap the page */
.intro { animation: intro-failsafe 0.3s var(--ease) 2.4s forwards; }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

/* Mobile menu: thread line accompanies the wipe */
@media (max-width: 1023px) {
  .nav::before {
    content: ""; position: absolute; left: var(--gutter); top: calc(var(--header-h) + 20px); bottom: 40px;
    width: 2px; background: linear-gradient(180deg, var(--teal-500), transparent);
    transform: scaleY(0); transform-origin: top;
    transition: transform 0.7s var(--ease-out-expo) 0.15s;
  }
  body.nav-open .nav::before { transform: scaleY(1); }
  .nav__list { position: relative; padding-left: 18px; }
}

/* Scientific network (about thread-story) */
.net-node { fill: var(--teal-300); }
.thread-story__svg .net-line { stroke: var(--teal-500); stroke-opacity: 0.55; stroke-width: 1.5; fill: none; }

/* Footer social: inline SVG glyphs */
.social-row a svg { width: 17px; height: 17px; display: block; }

/* ==========================================================================
   MOTION 4.0 — cinematic scene layer (desktop pins, stages, ghost type)
   ========================================================================== */

/* Tracks → typography wall (desktop, GSAP present) */
@media (min-width: 1024px) {
  .has-gsap .tracks-cta { gap: 6px 34px; }
  .has-gsap .tracks-cta .track-chip {
    border: 0; background: transparent; border-radius: 0;
    font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-stretch: 108%; font-weight: 700;
    padding: 10px 4px 10px 26px; letter-spacing: 0.005em;
  }
  .has-gsap .tracks-cta .track-chip::before { left: 4px; width: 8px; height: 8px; margin-top: -4px; }
  .has-gsap .tracks-cta a.track-chip:hover { background: transparent; transform: translateX(6px); }
  .has-gsap .tracks-cta .track-chip--more { font-size: 1.05rem; align-self: center; border: 1px dashed var(--border-dark); border-radius: var(--r-pill); padding: 12px 22px; }
}

/* Journey ghost date — giant watermark digits behind the timeline */
.journey .container { position: relative; }
.journey ol { position: relative; z-index: 1; }
.journey__ghost {
  position: absolute; right: 2vw; top: 46%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; font-stretch: 110%;
  font-size: clamp(180px, 22vw, 300px); line-height: 1; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(18, 65, 102, 0.13);
  z-index: 0; opacity: 0;
}

/* Oman takeover scale (desktop)
   The cinematic scene used to pin a fixed slat height, which re-cropped the
   220x800 source. Client asked for the full photo in a single row, so the
   height is left to aspect-ratio and the scene keeps only its scroll effects. */
.oman__lead { display: block; width: 100%; height: 44px; margin-top: clamp(28px, 4vw, 48px); }
.oman__lead path { stroke: var(--teal-500); stroke-width: 2; fill: none; }

/* Pillars cinematic stage (desktop pinned scene; mobile keeps stacked flow) */
.pillars__branch { display: none; }
.pillars--stage { height: 100vh; min-height: 660px; display: block; }
.pillars--stage .pillar {
  position: absolute; left: 50%; top: 50%; width: min(860px, 90%);
  margin: 0; will-change: transform;
  /* GSAP owns transform/opacity on the stage. Stated here too so a pillar is
     never left invisible by the .reveal defaults if the timeline has not run
     yet (or the script failed) — an absolutely-positioned card stuck at
     opacity:0 leaves a blank slot and no way to recover it. */
  opacity: 1;
}
.pillars--stage .pillar__node { display: none; }
.pillars--stage .pillars__thread { display: none; }
.pillars--stage .pillars__branch {
  display: block; position: absolute; inset: -4% 0; width: 100%; height: 108%; z-index: 0;
}
.pillars__branch path { stroke: var(--teal-500); stroke-width: 2; fill: none; }
.pillars--stage .pillar { z-index: 1; }

/* Closing echo typography (layered depth + hover split) */
.closing .container { position: relative; }
.closing__echo {
  position: absolute; left: 0; width: 100%; text-align: center; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-stretch: 112%;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.12; margin: 0;
  z-index: 0; white-space: nowrap;
}
.closing__echo--a { color: rgba(126, 217, 205, 0.14); }
.closing__echo--b { color: rgba(255, 255, 255, 0.07); }
.closing .section-title { position: relative; z-index: 1; }

/* Internal page-hero decorative layer (injected by motion.js) */
.page-hero__deco { position: absolute; right: -3%; top: -18%; height: 140%; opacity: 0.55; pointer-events: none; }
.page-hero__deco path { fill: none; stroke-width: 1.5; }
.page-hero__deco .deco-facet { stroke: rgba(126, 217, 205, 0.16); }
.page-hero__deco .deco-thread { stroke: var(--teal-500); stroke-width: 2; }
.page-hero__deco circle { fill: var(--teal-300); }

/* ==========================================================================
   MOTION 6.0 — flip cards, body-text fill, why-stage, contact thread
   ========================================================================== */

/* Scroll-driven BODY text fill (applied by motion.js as [data-bfill]) */
.has-gsap [data-bfill] {
  --fill: 0%;
  background-image: linear-gradient(90deg, var(--bf-on) var(--fill), var(--bf-off) var(--fill));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
[data-bfill] { --bf-on: var(--ink-600); --bf-off: #c5d3df; }
.section--dark [data-bfill], .oman [data-bfill], .closing [data-bfill], .cd-band [data-bfill],
.band [data-bfill], .thread-story [data-bfill], .pillar [data-bfill], .coming-soon [data-bfill],
.exp-banner__panel [data-bfill], .page-hero [data-bfill] {
  --bf-on: rgba(255, 255, 255, 0.86); --bf-off: rgba(255, 255, 255, 0.3);
}
/* word-split variant: parent renders normally, each word fills in sequence
   while staying inline — natural wrapping is untouched */
.has-gsap [data-bfill].is-split { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.has-gsap [data-bfill].is-split .bfill-word {
  background-image: linear-gradient(90deg, var(--bf-on) var(--fill), var(--bf-off) var(--fill));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Word spans must stay inline so they wrap normally. Inside a flex parent
   (e.g. .status-chip) each word would otherwise become a non-wrapping flex
   item and spill past the container on narrow screens. */
.has-gsap [data-bfill].is-split .bfill-word { display: inline; }
.status-chip.is-split { flex-wrap: wrap; row-gap: 2px; }
html:not(.has-gsap) [data-bfill] { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  [data-bfill], [data-bfill] .bfill-line, [data-bfill] .bfill-word { background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
}

/* Flip cards (built by motion.js from [data-flip] feature cards) */
.flip-card { perspective: 1100px; min-height: 252px; padding: 0 !important; cursor: pointer; }
.flip-card:focus-visible { box-shadow: var(--focus-ring); }
.flip-inner {
  position: relative; width: 100%; height: 100%; min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.75s var(--ease-out-expo);
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) {
  .flip-card:hover .flip-inner, .flip-card:focus-visible .flip-inner { transform: rotateY(180deg); }
}
.flip-face {
  position: absolute; inset: 0; border-radius: var(--r-md);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 28px;
}
.flip-front .feature-card__icon { margin-bottom: 18px; }
.flip-front h3 { margin-bottom: 0; }
.flip-front::after {
  content: ""; position: absolute; right: 16px; bottom: 14px; width: 18px; height: 18px;
  border-right: 2px solid var(--teal-500); border-bottom: 2px solid var(--teal-500);
  border-bottom-right-radius: 6px; opacity: 0.6;
}
.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--navy-700), #16645f);
  color: #fff;
}
.flip-back h4 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-300); margin-bottom: 10px;
}
.flip-back p { color: rgba(255, 255, 255, 0.92); margin: 0; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner, .flip-card:hover .flip-inner { transition: none; }
}

/* Why-Attend pinned stage (desktop, built by motion.js) */
.why-stage { position: relative; height: 78vh; min-height: 560px; overflow: hidden; }
.why-frame {
  position: absolute; left: 50%; top: 50%; width: min(960px, 94%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; z-index: 1;
}
.why-frame::before {
  content: attr(data-num); position: absolute; right: -13%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; font-stretch: 110%;
  font-size: clamp(150px, 15vw, 230px); line-height: 1; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(18, 65, 102, 0.14); z-index: -1;
}

/* Contact: connecting thread behind the three contact cards */
.contact-grid-wrap { position: relative; }
.contact-grid-wrap .feature-grid { position: relative; z-index: 1; }
.contact-thread { position: absolute; left: 2%; width: 96%; top: 55%; height: 44px; z-index: 0; overflow: hidden; }
.contact-thread path { stroke: var(--teal-500); stroke-width: 2; fill: none; }
.contact-thread circle { fill: var(--teal-300); }

/* Premium button label-roll (text rolls out upward, duplicate rolls in) */
.btn .btn__label { position: relative; display: inline-block; overflow: hidden; vertical-align: baseline; }
.btn .btn__label-inner { display: block; transition: transform 0.5s var(--ease-out-expo); will-change: transform; }
.btn .btn__label-inner--dup { position: absolute; inset: 0; transform: translateY(115%); }
@media (hover: hover) {
  .btn:hover .btn__label-inner:not(.btn__label-inner--dup) { transform: translateY(-115%); }
  .btn:hover .btn__label-inner--dup { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .btn .btn__label-inner { transition: none; }
  .btn:hover .btn__label-inner:not(.btn__label-inner--dup) { transform: none; }
  .btn:hover .btn__label-inner--dup { transform: translateY(115%); }
}

/* ==========================================================================
   MOTION 7.0 — track rails, stage guards, stats sweep
   ========================================================================== */

/* Track chips as two opposing rails (theme unchanged: navy field, teal accents) */
/* rails break out of the container so they read as full-bleed marquees */
.tracks-rails { display: block; width: 100vw; margin-left: calc(50% - 50vw); }
.track-rail { overflow: hidden; margin-bottom: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track-lane { display: flex; gap: 12px; width: max-content; will-change: transform; }
.track-lane .track-chip { flex: 0 0 auto; }
.tracks-more { margin-top: 22px; padding-left: max(var(--gutter), calc(50vw - var(--container) / 2)); }
@media (max-width: 767px) {
  .track-rail { margin-bottom: 10px; }
  .track-lane { gap: 8px; }
  .track-lane .track-chip { font-size: 0.9rem; padding: 11px 18px; }
}
/* desktop typography-wall styling must not fight the rails */
@media (min-width: 1024px) {
  .has-gsap .tracks-rails .track-chip {
    border: 1px solid var(--border-dark); border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.02);
    font-size: clamp(1rem, 1.15vw, 1.2rem); padding: 13px 24px;
  }
  .has-gsap .tracks-rails a.track-chip:hover { transform: translateY(-2px); background: rgba(35, 173, 158, 0.14); }
  .has-gsap .tracks-rails .track-chip::before { left: 11px; }
  .has-gsap .tracks-rails .track-chip--more { font-size: 0.95rem; }
}

/* Why-stage is a DESKTOP-ONLY scene — mobile always keeps the flat grid */
@media (max-width: 1023px) {
  .why-stage { height: auto !important; min-height: 0 !important; display: grid !important; }
  .why-frame { position: static !important; width: auto !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important; display: contents !important; }
  .why-frame::before { display: none !important; }
  .journey__ghost { display: none !important; }
}


/* screen-reader-only utility (labels that must not render visually) */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Call-for-papers CTA: shown in a waiting state until the portal URL exists */
.cfp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.cfp-cta .btn[disabled] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.cfp-cta__note { font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); }

/* 21. TRACK EXPLORER -------------------------------------------------------
   Searchable track cards that expand into a full session agenda. The agenda is
   rendered server-side inside each card (no fetch), so search, deep links and
   no-JS all work off the same DOM. */

/* --- search bar --- */
.tx-search { max-width: 620px; margin: 0 auto clamp(28px, 4vw, 44px); }
.tx-search__field { position: relative; display: flex; align-items: center; }
.tx-search__ico {
  position: absolute; left: 18px; width: 18px; height: 18px;
  color: var(--ink-400); pointer-events: none;
}
.tx-search input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink-900);
  padding: 15px 46px 15px 48px;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--r-pill); box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tx-search input::placeholder { color: var(--ink-400); }
/* suppress the native search widget's own clear button — we render our own */
.tx-search input::-webkit-search-cancel-button,
.tx-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.tx-search input:focus { outline: none; border-color: var(--teal-500); box-shadow: var(--focus-ring); }
.tx-search__clear {
  position: absolute; right: 8px; display: grid; place-items: center;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-400); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tx-search.has-value .tx-search__clear { opacity: 1; visibility: visible; }
.tx-search__clear:hover { color: var(--ink-900); background: var(--surface-1); }
.tx-search__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tx-search__count {
  margin: 12px 0 0; text-align: center; font-size: 0.9rem; color: var(--ink-400);
  min-height: 1.2em;
}

/* --- card grid --- */
.tx-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: start;
}
.tx-grid > li::before { content: none; }
@media (max-width: 1023px) { .tx-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 640px)  { .tx-grid { grid-template-columns: 1fr; } }

/* A card that is open spans the full row so the agenda gets real width. */
.tx-card.is-open { grid-column: 1 / -1; }

.tx-card {
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease-out);
}
.tx-card:hover { box-shadow: var(--shadow-2); border-color: #c5d7e4; }
.tx-card:hover:not(.is-open) { transform: translateY(-3px); }
.tx-card.is-open { box-shadow: var(--shadow-3); border-color: var(--teal-500); }
.tx-card[hidden] { display: none; }

/* --- card header (the clickable summary) --- */
.tx-card__btn {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.tx-card__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.tx-card__ico {
  flex: none; width: 54px; height: 40px; object-fit: contain;
  border-radius: var(--r-sm); background: var(--surface-1);
  transition: transform var(--t-med) var(--ease-out), background var(--t-med) var(--ease);
}
.tx-card__btn:hover .tx-card__ico { transform: scale(1.07); background: rgba(35, 173, 158, 0.12); }
.tx-card__txt { flex: 1 1 auto; min-width: 0; }
.tx-card__name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.3; color: var(--navy-800);
  /* long track names must wrap, never widen the grid column */
  overflow-wrap: anywhere;
}
.tx-card__meta {
  display: block; margin-top: 4px; font-size: 0.82rem; color: var(--ink-400);
}
/* chevron */
.tx-card__chev {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-1); color: var(--navy-700);
  transition: transform var(--t-med) var(--ease-out), background var(--t-med) var(--ease);
}
.tx-card__chev svg { width: 13px; height: 13px; }
.tx-card.is-open .tx-card__chev { transform: rotate(180deg); background: var(--teal-500); color: #fff; }

/* "Coming soon" tracks stay visible but read as clearly pending. */
.tx-card--soon .tx-card__ico { filter: grayscale(1); opacity: 0.55; }
.tx-card--soon .tx-card__name { color: var(--ink-600); }
.tx-soon-tag {
  display: inline-block; margin-top: 5px; padding: 3px 10px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-600); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-pill);
}

/* --- expanding panel ---------------------------------------------------
   Height is animated via a max-height set in JS from scrollHeight, so the
   transition has a real end value; JS clears it on transitionend so a card
   left open can still reflow (font load, resize, rotate). */
.tx-card__panel {
  overflow: hidden; max-height: 0;
  transition: max-height var(--motion-med) var(--ease-out-quint);
}
.tx-card:not(.is-open) .tx-card__panel { visibility: hidden; }
.tx-card__panel-in { padding: 4px 18px 20px; border-top: 1px solid var(--border); }

.tx-day + .tx-day { margin-top: 22px; }
.tx-day__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 14px 0 10px;
}
.tx-day__date {
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--navy-700);
}
.tx-day__coord { font-size: 0.84rem; color: var(--ink-400); }

/* --- toolbar: day tabs + type filters ------------------------------------ */
.tx-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; padding: 14px 0 4px;
}
.tx-daytabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-daytab {
  font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--ink-600);
  padding: 8px 15px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-0); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tx-daytab:hover { border-color: var(--teal-500); color: var(--navy-800); }
.tx-daytab.is-on { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.tx-daytab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tx-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-filter {
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink-600);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-0); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.tx-filter:hover { border-color: var(--teal-500); color: var(--navy-800); }
.tx-filter.is-on { background: rgba(35, 173, 158, 0.14); border-color: var(--teal-500); color: var(--teal-600); }
.tx-filter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tx-filter__n { opacity: 0.65; font-weight: 500; }

.tx-day.is-hidden { display: none; }
.tx-nomatch { padding: 26px 4px; text-align: center; color: var(--ink-400); font-size: 0.9rem; }

/* --- agenda rows -------------------------------------------------------
   A definition-style two-column layout rather than a <table>: it collapses to
   one column on mobile without the horizontal scroll a table would force.
   The left column doubles as a timeline rail, echoing the site's "Thread". */
.tx-sessions { list-style: none; margin: 0; padding: 0; position: relative; }
.tx-sessions > li::before { content: none; }

/* sticky day header so the date stays visible down a long agenda */
.tx-day__head {
  position: sticky; top: calc(var(--header-h) - 4px); z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 12px 0 10px; margin-bottom: 2px;
  background: linear-gradient(var(--surface-0) 78%, rgba(255, 255, 255, 0));
}

.tx-row {
  /* the column must fit "11:00 AM – 11:15 AM" without touching the rail */
  display: grid; grid-template-columns: 158px 1fr; gap: 4px 26px;
  padding: 14px 0; position: relative;
}
/* the rail itself: a hairline behind the time column */
.tx-row::before {
  content: ""; position: absolute; left: 172px; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.tx-row:first-child::before { top: 18px; }
.tx-row:last-child::before  { bottom: auto; height: 18px; }
/* the node on the rail */
.tx-row::after {
  content: ""; position: absolute; left: 169px; top: 19px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface-0); border: 2px solid var(--teal-500);
}
.tx-row--break::after { border-color: var(--border); }

.tx-row__time {
  font-size: 0.84rem; font-weight: 600; color: var(--navy-700);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px;
}
.tx-row__time--tba { color: var(--ink-400); font-weight: 500; }
.tx-row__topic { font-size: 0.97rem; color: var(--ink-900); line-height: 1.45; overflow-wrap: anywhere; }
.tx-row__topic--tba { color: var(--ink-400); font-style: italic; }
.tx-row__people { margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }

/* speaker line: avatar + name/country/role */
.tx-row__person { display: flex; align-items: flex-start; gap: 9px; }
.tx-av {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--navy-700); background: rgba(35, 173, 158, 0.13);
  font-family: var(--font-display);
}
.tx-row__who { min-width: 0; font-size: 0.87rem; line-height: 1.45; }
.tx-row__nm { font-weight: 600; color: var(--navy-800); }
.tx-flag {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--blue-500); background: rgba(34, 126, 194, 0.11);
  border-radius: var(--r-pill); vertical-align: 1px; white-space: nowrap;
}
.tx-row__rl { display: block; color: var(--ink-400); }
.tx-row__mods { margin-top: 7px; font-size: 0.83rem; color: var(--ink-400); }

/* session-type chip */
.tx-tag {
  display: inline-block; margin-bottom: 5px; padding: 2px 9px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--teal-600); background: rgba(35, 173, 158, 0.1);
  border-radius: var(--r-pill);
}
.tx-tag--keynote  { color: #fff; background: var(--teal-600); }
.tx-tag--workshop { color: var(--blue-500); background: rgba(34, 126, 194, 0.12); }
.tx-tag--panel    { color: #8a5a00; background: rgba(214, 158, 46, 0.16); }
.tx-tag--research { color: #6b3fa0; background: rgba(124, 77, 178, 0.13); }
.tx-tag--ceremony { color: var(--navy-700); background: rgba(18, 65, 102, 0.1); }
.tx-tag--case     { color: #0f7b6c; background: rgba(35, 173, 158, 0.13); }
.tx-tag--lecture  { color: var(--ink-600); background: var(--surface-1); }

/* breaks read as quiet dividers, not sessions */
.tx-row--break { background: var(--surface-1); border-radius: var(--r-sm); padding: 9px 14px; margin: 4px 0; border-top: 0; }
.tx-row--break + .tx-row { border-top: 0; }
.tx-row--break .tx-row__topic { font-size: 0.88rem; color: var(--ink-400); font-weight: 500; }

/* day / section divider inside a sheet */
.tx-divider {
  margin: 18px 0 8px; padding: 10px 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  line-height: 1.4; color: var(--navy-800); background: rgba(35, 173, 158, 0.08);
  border-left: 3px solid var(--teal-500); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  /* section headers are full sentences — they must wrap, not widen the panel */
  overflow-wrap: anywhere; white-space: normal;
}
/* the rail must not run through a section header */
.tx-divider + .tx-row::before { top: 18px; }

/* Arabic tracks render right-to-left within their own panel only */
.tx-day[dir="rtl"] { text-align: right; }
.tx-day[dir="rtl"] .tx-row { grid-template-columns: 1fr 158px; }
.tx-day[dir="rtl"] .tx-row__time { grid-column: 2; grid-row: 1; }
.tx-day[dir="rtl"] .tx-row__body { grid-column: 1; grid-row: 1; }
/* mirror the rail to the right edge of the time column */
.tx-day[dir="rtl"] .tx-row::before { left: auto; right: 172px; }
.tx-day[dir="rtl"] .tx-row::after  { left: auto; right: 169px; }
.tx-day[dir="rtl"] .tx-row__person { flex-direction: row-reverse; }
.tx-day[dir="rtl"] .tx-flag { margin-left: 0; margin-right: 7px; }
.tx-day[dir="rtl"] .tx-divider { border-left: 0; border-right: 3px solid var(--teal-500); border-radius: var(--r-sm) 0 0 var(--r-sm); }

@media (max-width: 640px) {
  /* one column: the rail would waste ~40% of a phone's width, so drop it */
  .tx-row { grid-template-columns: 1fr; gap: 3px; padding-left: 0; }
  .tx-row::before, .tx-row::after { display: none; }
  .tx-row { border-top: 1px solid var(--border); }
  .tx-row:first-child { border-top: 0; }
  .tx-day[dir="rtl"] .tx-row { grid-template-columns: 1fr; }
  .tx-day[dir="rtl"] .tx-row__time,
  .tx-day[dir="rtl"] .tx-row__body { grid-column: 1; grid-row: auto; }
  .tx-card__panel-in { padding-inline: 14px; }
  .tx-toolbar { gap: 10px; }
  .tx-filters, .tx-daytabs { width: 100%; }
  /* the day header cannot stick on mobile: the drawer header already occupies
     that space and a second sticky band eats the small viewport */
  .tx-day__head { position: static; }
}

/* empty-state when a search matches nothing */
.tx-empty {
  display: none; text-align: center; padding: 40px 20px; color: var(--ink-400);
}
.tx-empty.is-on { display: block; }

/* no-JS: panels are open and the search box is pointless */
html:not(.js) .tx-search { display: none; }
html:not(.js) .tx-card__panel { max-height: none; visibility: visible; }
html:not(.js) .tx-card__chev { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tx-card, .tx-card__ico, .tx-card__chev, .tx-card__panel,
  .tx-daytab, .tx-filter { transition: none; }
  .tx-card:hover:not(.is-open) { transform: none; }
  .tx-card__btn:hover .tx-card__ico { transform: none; }
}

/* 22. REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal, .hero__stagger, .js .hero:not(.is-ready) .hero__title .line > span { opacity: 1 !important; transform: none !important; }
  .hero__scrollcue::after { animation: none; }
}