/* SYHF 2026 — Direction mockup styles. Tokens from tokens.css only. */

/* ---------------------------------------------------------------------
   [hidden] must actually hide. Any class that sets `display` outranks the
   browser's built-in [hidden] rule (equal specificity, author sheet wins),
   which silently broke three things: the completed form stayed in the
   document after submitting, the dashboard sign-in screen never went away
   after login, and hidden step buttons kept reserving space in their row.
   One global guarantee is safer than patching each case.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--syhs-paper);
  color: var(--syhs-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body { font-family: var(--font-arabic); }

.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------------
   Skip link + focus
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: -60px;
  background: var(--syhs-white);
  color: var(--syhs-ground);
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 200;
  transition: top 160ms var(--ease-editorial);
}
.skip-link:focus { top: var(--space-2); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   Review banner (not part of the site)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--syhs-ground-rgb), 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: 1.1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--syhs-ink);
  text-decoration: none;
  margin-inline-end: auto;
}
.brand__mark {
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}
.brand__word {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: var(--tracking-tight);
  color: var(--syhs-white);
}

.primary-nav { display: flex; align-items: center; gap: var(--space-4); }
/* Hidden above 860px by default — assets/js/mobile-nav.js only ever
   inserts this button, it never controls whether it's visible; that's
   this rule plus its max-width:860px override further down. */
.nav-burger { display: none; }
.primary-nav > a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  padding-block: 0.3rem;
}
.primary-nav > a::after {
  content: '';
  position: absolute;
  inset-inline: 0 100%;
  bottom: 0;
  height: 2px;
  background: var(--syhs-signal-alt);
  transition: inset-inline-end 220ms var(--ease-editorial);
}
.primary-nav > a:hover::after,
.primary-nav > a:focus-visible::after { inset-inline-end: 0; }

/* Components dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  padding-block: 0.3rem;
}
.nav-dropdown__trigger svg { transition: transform 200ms var(--ease-editorial); }
.nav-dropdown__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dropdown__trigger:hover,
.nav-dropdown__trigger[aria-expanded="true"] { color: var(--syhs-white); }

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  inset-inline-start: -1rem;
  width: 280px;
  background: var(--syhs-white);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px -12px rgba(22, 18, 31, 0.25), 0 0 0 1px var(--syhs-line-on-light);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms var(--ease-editorial), transform 200ms var(--ease-editorial), visibility 200ms;
}
.nav-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown__menu a {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--syhs-ink);
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible { background: var(--syhs-paper); }
.nav-dropdown__label { display: block; font-weight: 600; font-size: 0.92rem; }
.nav-dropdown__hint { display: block; font-size: 0.78rem; color: var(--syhs-ink-soft); margin-top: 0.15rem; }

.site-header__actions { display: flex; align-items: center; gap: 0.9rem; }
.lang-toggle {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.8rem;
}
.lang-toggle:hover { border-color: var(--syhs-tint-mint); color: var(--syhs-white); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* 44px is the smallest reliable touch target on both platforms. The padding
     alone produced 43px — close enough to look right and still short enough to
     be the button people miss on a phone. */
  min-height: 44px;
  gap: 0.15rem;
  text-decoration: none;
  font-weight: 600;
  padding: 0.75rem 1.3rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform 180ms var(--ease-editorial), background 180ms, border-color 180ms;
}
.btn:hover { transform: translateY(-2px); }
.btn__meta { font-size: 0.72rem; font-weight: 500; opacity: 0.75; }
/* Ink on the brand green, not white. White measures 3.45:1 on --syhs-signal-alt
   and fails AA at button sizes; ink measures ~4.95:1. Changing the text keeps
   the locked palette intact — darkening the green itself would not. Hover goes
   lighter (not darker) so the ink stays legible. */
.btn--signal { background: var(--syhs-signal-alt); color: var(--syhs-ink); }
.btn--signal:hover { background: color-mix(in srgb, var(--syhs-signal-alt) 82%, #fff); }
.btn--outline { border-color: rgba(80, 49, 124, 0.3); color: var(--syhs-ground); }
.btn--outline:hover { border-color: var(--syhs-ground); }

.hero__actions .btn--outline { border-color: rgba(255, 255, 255, 0.45); color: var(--syhs-white); }
.hero__actions .btn--outline:hover { border-color: var(--syhs-white); background: rgba(255, 255, 255, 0.08); }
.hero__actions .btn--outline .btn__meta { color: rgba(255, 255, 255, 0.7); }
.btn--ghost { color: var(--syhs-ink); border-color: var(--syhs-line-on-light); padding: 0.6rem 1.1rem; }
.btn--ghost:hover { border-color: var(--syhs-ink); }
.btn--compact { padding: 0.62rem 1.15rem; font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   Eyebrow
   --------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--syhs-tint-mint);
  margin: 0 0 var(--space-3);
}
.eyebrow--dark { color: var(--syhs-signal-alt); }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(102, 211, 161, 0.25); }

/* Bigger date treatment, per feedback */
.eyebrow--big {
  font-size: clamp(1.1rem, 0.85rem + 1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--syhs-white);
  gap: 0.7rem;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.eyebrow--big .eyebrow__text { display: inline-block; }
.eyebrow--big .eyebrow__dot { width: 10px; height: 10px; background: var(--syhs-tint-mint); box-shadow: 0 0 0 5px rgba(102, 211, 161, 0.22); }
.eyebrow__countdown {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--syhs-tint-mint);
  background: rgba(102, 211, 161, 0.14);
  border: 1px solid rgba(102, 211, 161, 0.3);
  padding: 0.25em 0.6em;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   HERO — cinematic video background, scroll-pinned reveal
   --------------------------------------------------------------------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: clip; color: var(--syhs-white); }
.hero__pin { position: relative; width: 100%; height: 100%; display: flex; align-items: center; }

.hero__video-wrap { position: absolute; inset: 0; z-index: 0; background: var(--syhs-ground); }
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__video-scrim {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background:
    linear-gradient(100deg, rgba(15, 10, 26, 0.86) 0%, rgba(15, 10, 26, 0.7) 32%, rgba(15, 10, 26, 0.4) 58%, rgba(15, 10, 26, 0.2) 78%, transparent 100%),
    linear-gradient(180deg, rgba(15, 10, 26, 0.45) 0%, rgba(15, 10, 26, 0.15) 40%, rgba(15, 10, 26, 0.7) 100%);
}
/* Text always needs to win against a moving video frame, not just the
   average case — a static scrim can't guarantee AA on every frame, so
   the headline/dek column gets its own anchored gradient underneath it. */
.hero__content::before {
  content: '';
  position: absolute;
  inset: -3rem -2rem -3rem -3rem;
  z-index: -1;
  background: radial-gradient(ellipse 90% 100% at 20% 50%, rgba(10, 6, 20, 0.65) 0%, rgba(10, 6, 20, 0.35) 55%, transparent 80%);
  pointer-events: none;
}
.hero__content { position: relative; }

.hero__grid { position: relative; z-index: 1; width: 100%; }
.hero__content { max-width: 46rem; }

/* The conference name is the hero's thesis now — the single biggest
   thing on the page — with dates/location and the editorial tagline
   sitting beneath it. */
.hero__name {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 1.1rem + 6.4vw, 6.4rem);
  font-weight: 700;
  line-height: 0.97;
  letter-spacing: var(--tracking-tighter);
  color: var(--syhs-white);
  margin: 0 0 var(--space-3);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}
.hero__meta {
  font-size: clamp(1rem, 0.85rem + 0.7vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--syhs-tint-mint);
  margin: 0 0 var(--space-3);
}
.hero__meta-link { color: inherit; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 200ms; }
.hero__meta-link:hover, .hero__meta-link:focus-visible { text-decoration-color: currentColor; }
.hero__meta-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.hero__tagline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.15rem);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 24ch;
}
.hero__tagline em { font-style: italic; color: var(--syhs-tint-mint); }

.hero__headline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  margin: 0 0 var(--space-3);
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}
.hero__headline em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--syhs-tint-mint); }
.reveal-line { display: block; }
.hero__headline .reveal-line { overflow: hidden; }

.hero__content .reveal-line { opacity: 0; transform: translateY(0.6em); }
.hero__content .reveal-line.is-in { animation: line-up 0.9s var(--ease-editorial) forwards; }
.hero__name.reveal-line.is-in { animation-delay: 0.05s; }
.hero__meta.reveal-line.is-in { animation-delay: 0.22s; }
.hero__tagline.reveal-line.is-in { animation-delay: 0.36s; }
.hero__headline .reveal-line:nth-child(1).is-in { animation-delay: 0.3s; }
.hero__headline .reveal-line:nth-child(2).is-in { animation-delay: 0.43s; }
.hero__headline .reveal-line:nth-child(3).is-in { animation-delay: 0.56s; }
@keyframes line-up { to { opacity: 1; transform: translateY(0); } }

.hero__dek { max-width: 42ch; font-size: var(--fs-body-lg); color: rgba(255, 255, 255, 0.86); margin: 0 0 var(--space-4); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.reveal-fade { opacity: 0; transform: translateY(10px); animation: fade-up 0.8s var(--ease-editorial) 0.5s forwards; }
.hero__actions.reveal-fade { animation-delay: 0.85s; }
.hero__countdown-corner.reveal-fade { animation-delay: 1s; }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
/* The pill glows and the dot inside it bounces top-to-bottom, rather than
   the whole icon nudging as one piece — reads as a scroll track, not a
   generic arrow. */
.hero__scroll-cue svg { overflow: visible;
  filter: drop-shadow(0 0 6px rgba(var(--syhs-tint-mint-rgb), 0.65)); }
.hero__scroll-cue svg rect { filter: drop-shadow(0 0 4px rgba(var(--syhs-tint-mint-rgb), 0.5)); }
.hero__scroll-cue svg circle {
  transform-box: fill-box; transform-origin: center;
  animation: cue-dot-scroll 1.8s ease-in-out infinite;
}
@keyframes cue-dot-scroll {
  0%   { transform: translateY(-2px); opacity: 1; }
  60%  { transform: translateY(5px); opacity: 0.5; }
  100% { transform: translateY(-2px); opacity: 1; }
}

/* Cinematic pin stage 2 — hidden until the pinned scroll timeline
   reveals it (opacity/scale driven by GSAP, not CSS animation) */
/* Phase-B of the hero pin: the mission statement fades in behind the
   video, one phrase in it cycling on a timer (vanilla reimplementation
   of the pasted animated-hero's vertical slide+fade word rotation —
   no React/framer-motion). */
.hero__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
/* No-JS / reduced-motion fallback: render in normal flow instead of as
   an absolute overlay, so the text is never lost or stuck invisible. */
.hero__reveal--static {
  position: static;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  margin-top: var(--space-4);
}
.hero__reveal-para {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1rem + 3.6vw, 3.6rem);
  line-height: 1.25;
  color: var(--syhs-white);
  margin: 0;
  max-width: 30ch;
  text-align: center;
  padding-inline: var(--gutter);
}
.hero__reveal-cta { margin-top: var(--space-4); }
.cycle-word {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25em;
  vertical-align: bottom;
}
.cycle-word__item {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  white-space: nowrap;
  color: var(--syhs-tint-mint);
  font-weight: 700;
  opacity: 0;
  transform: translateY(55%);
  transition: transform 550ms var(--ease-editorial), opacity 550ms var(--ease-editorial);
}
.cycle-word__item.is-active { opacity: 1; transform: translateY(0); }
/* The three services sit statically next to each other — no cycling,
   just a colour differentiation from the surrounding white copy. */
.hero__reveal-service { color: var(--syhs-tint-violet); font-weight: 700; }
.cycle-word__item.is-exit { opacity: 0; transform: translateY(-55%); }

/* Countdown — wide rectangular strip, back on the hero's bottom-RIGHT
   (left-anchoring collided with the hero copy). */
.hero__countdown-corner {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vh, 3rem);
  text-align: right;
}
[dir="rtl"] .hero__countdown-corner { right: auto; left: var(--gutter); text-align: left; }
.hero__countdown-corner-label {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 0.85rem;
}
/* One wide rectangle of four units — bigger, right-anchored. */
.countdown {
  display: grid; grid-template-columns: repeat(4, auto); gap: 0.7rem;
  margin-inline-start: auto;
}
[dir="rtl"] .countdown { margin-inline-start: 0; margin-inline-end: auto; }
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(5.4rem, 4.4rem + 3vw, 7.4rem);
  padding: 1.15rem 1.1rem 0.95rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.countdown__digits {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(2.8rem, 2.1rem + 1.7vw, 4.1rem);
  color: var(--syhs-tint-mint);
  display: inline-block;
  line-height: 1;
}
/* The roll is a transform, never a fade.

   It used to start at opacity 0, which made the digits depend on the animation
   having finished in order to be legible at all — and a CSS animation does not
   always finish. Browsers throttle them in background tabs, and the countdown
   re-arms this one every time a value changes, so a page opened in a tab nobody
   has looked at yet sits with its digits at zero opacity: the labels reading
   "Days / Hrs / Min" above three blanks.

   Animating transform alone makes the resting state the readable state. It also
   reads better — a digit sliding up behind a clipped edge is a mechanical
   counter, which is what a countdown is, where a cross-fade is just a
   transition. */
.countdown__digits {
  /* Clip the travel so the digit arrives from behind an edge rather than
     floating over the card. */
  overflow: hidden;
}
.countdown__digits.tick { animation: digit-roll 0.42s var(--ease-mechanical); }
@keyframes digit-roll {
  0%   { transform: translateY(-58%); }
  62%  { transform: translateY(5%); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .countdown__digits.tick { animation: none; }
}
.countdown__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.3rem;
}
@media (max-width: 640px) {
  /* .hero__countdown-corner is a direct child of .hero__pin, not of a
     .wrap — position:absolute never needed its own gutter (right: var(--gutter)
     placed it directly), but switching to position:static drops it into
     normal flow with none, flush against the screen edge unlike every
     other stacked block above it (all inside .wrap.hero__grid). */
  .hero__countdown-corner { position: static; margin-top: var(--space-3); padding-inline: var(--gutter); text-align: left; }
  [dir="rtl"] .hero__countdown-corner { text-align: right; }
  /* Four fixed-width tiles in one row genuinely don't fit a 375px screen —
     this was overflowing the viewport horizontally, not just looking
     cramped. Two rows of two, each tile filling its share instead of a
     hardcoded min-width, actually fits. */
  .countdown { grid-template-columns: repeat(2, 1fr); justify-content: stretch; gap: 0.9rem 1rem; max-width: 20rem; }
  [dir="rtl"] .countdown { justify-content: stretch; }
  .countdown__unit { min-width: 0; width: 100%; padding: 0.75rem 0.4rem 0.65rem; }
  /* The desktop clamp tops out at 4.1rem, which is wider than half a phone
     screen can hold — that's what was spilling one tile's digits into the
     next. A fixed, smaller size here instead of a clamp: this layout only
     exists below 640px, so there's no viewport range left for a clamp to
     interpolate across. */
  .countdown__digits { font-size: 2rem; }

  /* The cycling word ("Medicine", "Radiology & Medical Imaging"...) is
     sized in JS to the widest phrase at the current font size, specifically
     so the sentence around it never reflows as it cycles (see script.js).
     That's fine at desktop sizes, but several of these phrases are long
     enough that their pixel width at the hero's ~30px serif exceeds a
     375px screen outright — the phrase was pushing the whole hero line
     horizontally off the viewport, not just wrapping awkwardly. Shrinking
     the font here keeps every phrase's measured width under what a phone
     screen can hold; max-width below is the hard backstop in case a future
     phrase is added that's still too wide even at this size. */
  .hero__reveal-para { font-size: 1.5rem; }
  .cycle-word { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Scroll-progress helix thread — fixed rail, fills as you scroll
   --------------------------------------------------------------------- */
.helix-thread-rail {
  position: fixed;
  top: 0;
  right: 0;
  width: 26px;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
}
[dir="rtl"] .helix-thread-rail { right: auto; left: 0; }
.helix-thread-svg { width: 100%; height: 100%; display: block; }
.helix-strand-track { stroke: rgba(80, 49, 124, 0.16); }
.helix-strand-fill {
  stroke-dasharray: var(--thread-len, 1400);
  stroke-dashoffset: var(--thread-len, 1400);
}
@media (max-width: 640px) {
  .helix-thread-rail { width: 16px; }
}

/* ---------------------------------------------------------------------
   COMPARISON — JSBC'25 vs SYHF'26, horizontal scroll-snap cards
   --------------------------------------------------------------------- */
.comparison {
  position: relative;
  background:
    radial-gradient(60% 55% at 88% 0%, rgba(var(--syhs-tint-violet-rgb), 0.14), transparent 70%),
    radial-gradient(50% 45% at 4% 100%, rgba(var(--syhs-tint-mint-rgb), 0.1), transparent 70%),
    var(--syhs-paper);
  padding-block: clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
}
/* The rebrand + the scale-up are the two facts this page most needs to
   land — the heading and the "now" figures below get outsized on purpose. */
.comparison__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3rem, 1.6rem + 6.5vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
  margin: 0 0 0.6rem;
  color: var(--syhs-ground);
}
.comparison__sub { color: var(--syhs-ink-soft); font-size: var(--fs-body-lg); margin: 0 0 var(--space-4); }

/* Four cards, always fully visible and centred — a 2x2 square block,
   not a horizontal strip that clips the last card off-screen. */
.comparison__track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: 54rem;
  margin-inline: auto;
}
.comparison-card {
  background: var(--syhs-white);
  border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: 0 12px 32px -18px rgba(22, 18, 31, 0.25);
}
.comparison-card--tbd { background: var(--syhs-paper); border-style: dashed; }
.comparison-card__label { font-weight: 600; font-size: 0.95rem; color: var(--syhs-ink-soft); margin: 0 0 var(--space-2); }
.comparison-card__rows { display: grid; gap: 0.6rem; margin-bottom: var(--space-2); }
.comparison-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--syhs-line-on-light);
}
.comparison-card__row--now { border-bottom: none; }
.comparison-card__year { font-size: 0.8rem; font-weight: 600; color: var(--syhs-ink-soft); }
.comparison-card__row--now .comparison-card__year { color: var(--syhs-ground); }
.comparison-card__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--syhs-ink-soft);
  display: inline-flex;
}
.comparison-card__row--now .comparison-card__num { font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); color: var(--syhs-signal-alt); }
.comparison-card__num-tbd { font-weight: 600; color: var(--syhs-ink-soft); font-size: 1.2rem; }
.comparison-card__delta {
  margin: 0;
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--syhs-signal-alt);
  background: rgba(63, 154, 118, 0.12);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.comparison-card__delta--tbd { color: var(--syhs-ink-soft); background: var(--syhs-line-on-light); }

/* sliding-number digit-roll mechanic — one column per digit, GSAP-driven */
.digit-col { position: relative; display: inline-block; overflow: hidden; height: 1.15em; vertical-align: bottom; }
.digit-col__strip { display: flex; flex-direction: column; will-change: transform; }
.digit-col__strip span { height: 1.15em; line-height: 1.15em; text-align: center; }
.digit-lit { display: inline-block; vertical-align: bottom; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   TRACKS — clickable cards (replaces numbered-row list)
   --------------------------------------------------------------------- */
.tracks { background: var(--syhs-ground); color: var(--syhs-white); padding-block: clamp(4rem, 8vw, 7rem); }
.tracks__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  max-width: 18ch;
  margin: 0 0 var(--space-5);
}
/* Continuous marquee — the three tracks drift past on a loop (reuses
   the .marquee mechanic from the sponsors section); hover pauses it so
   the card underneath the pointer is always readable and clickable. */
.tracks__marquee { margin-top: var(--space-3); }
.tracks__marquee .marquee__group { gap: var(--space-4); padding-inline-end: var(--space-4); }
.track-card {
  flex: 0 0 min(74vw, 26rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 20rem;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--syhs-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: background 260ms var(--ease-editorial), border-color 260ms, box-shadow 400ms;
}
.track-card:hover, .track-card:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--syhs-tint-mint);
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.75);
}
.track-card__index { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--syhs-tint-mint); margin-bottom: var(--space-3); }
.track-card__title { margin: 0 0 0.6rem; font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.15; }
.track-card__desc { margin: 0 0 var(--space-3); color: rgba(255, 255, 255, 0.78); flex-grow: 1; }
.track-card__cta { margin-top: auto; font-weight: 600; color: var(--syhs-tint-mint); font-size: 0.95rem; }
.track-card:hover .track-card__cta, .track-card:focus-visible .track-card__cta { text-decoration: underline; }
.tracks__hint {
  text-align: center;
  margin: var(--space-4) 0 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------
   PARTNERS — horizontal scroll-snap
   --------------------------------------------------------------------- */
.partners {
  background:
    radial-gradient(55% 60% at 10% 0%, rgba(var(--syhs-tint-mint-rgb), 0.1), transparent 70%),
    radial-gradient(45% 50% at 96% 100%, rgba(var(--syhs-tint-violet-rgb), 0.12), transparent 70%),
    var(--syhs-paper);
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
.partners__heading { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); letter-spacing: var(--tracking-tighter); margin: 0 0 0.5rem; color: var(--syhs-ground); }
.partners__sub { color: var(--syhs-ink-soft); font-size: var(--fs-body-lg); margin: 0 0 var(--space-4); }

.partners__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 0.5rem 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--syhs-tint-violet) transparent;
}
.partner-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 30vw, 340px);
  background: var(--syhs-white);
  border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: 0 12px 32px -18px rgba(22, 18, 31, 0.2);
}
.partner-card__logo-wrap {
  height: 56px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}
.partner-card__logo { max-height: 100%; max-width: 100%; object-fit: contain; }
.partner-card__name { margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 700; }
.partner-card__role { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syhs-signal-alt); }
.partner-card__desc { margin: 0; color: var(--syhs-ink-soft); font-size: 0.92rem; }

/* Logo-forward partner presentation — no card box, just a big logo with
   text underneath (only 2 partners now, so a static row reads cleaner
   than a scroll rail). */
.partners__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); position: relative; }
/* A thin centred divider — there are exactly two co-equal partners here,
   so the line reads as "a pair," not decoration. */
.partners__row::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; inset-inline-start: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--syhs-line-on-light) 20%, var(--syhs-line-on-light) 80%, transparent);
}
.partner-feature { text-align: center; }
.partner-feature__logo { max-width: 100%; max-height: 128px; width: auto; margin: 0 auto var(--space-3); display: block; object-fit: contain; }
.partner-feature__name { margin: 0 0 0.3rem; font-size: 1.4rem; font-weight: 700; color: var(--syhs-ink); }
.partner-feature__role { margin: 0 0 0.7rem; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syhs-signal-alt); }
.partner-feature__desc { margin: 0 auto; max-width: 42ch; color: var(--syhs-ink-soft); font-size: 0.95rem; }
@media (max-width: 640px) {
  .partners__row { grid-template-columns: 1fr; gap: var(--space-4); }
  .partners__row::before { display: none; }
}

/* ---------------------------------------------------------------------
   SPONSORS — tiered per the actual packages doc (Title > Platinum > Gold
   featured; Silver/Bronze grouped in a rolling marquee, matching the
   doc's own "rotating slate of small logos" language for those tiers).
   No sponsors are signed yet — every slot below is honestly labeled as
   reserved, not an invented company.
   --------------------------------------------------------------------- */
.sponsors { background: var(--syhs-white); padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--syhs-line-on-light); }
.sponsors__heading { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); letter-spacing: var(--tracking-tighter); margin: 0 0 0.5rem; color: var(--syhs-ground); }
.sponsors__sub { color: var(--syhs-ink-soft); font-size: var(--fs-body-lg); margin: 0 0 var(--space-5); }

/* A++ Title — the one, most prominent slot */
.sponsor-title {
  display: block;
  text-decoration: none;
  background: linear-gradient(135deg, var(--syhs-ground) 0%, var(--syhs-deep-violet) 100%);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: var(--space-4);
  transition: box-shadow 260ms var(--ease-editorial);
  box-shadow: 0 20px 50px -20px rgba(80, 49, 124, 0.5);
}
/* transform on hover is GSAP-driven (script.js) */
.sponsor-title:hover, .sponsor-title:focus-visible { box-shadow: 0 28px 60px -18px rgba(80, 49, 124, 0.6); }
.sponsor-title__tier {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--syhs-tint-mint);
  margin: 0 0 var(--space-2);
}
.sponsor-title__count { font-weight: 600; text-transform: none; letter-spacing: normal; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; }
.sponsor-title__name { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); color: var(--syhs-white); margin: 0 0 var(--space-2); max-width: 22ch; line-height: 1.2; }
.sponsor-title__desc { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-body-lg); max-width: 55ch; margin: 0 0 var(--space-3); }
.sponsor-title__cta { font-weight: 600; color: var(--syhs-tint-mint); font-size: 0.9rem; }
.sponsor-title:hover .sponsor-title__cta { text-decoration: underline; }

/* A+ Platinum / A Gold — prominent, clickable, decreasing scale */
.sponsor-tier-row { margin-bottom: var(--space-4); }
.sponsor-tier-row__label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--syhs-ink);
  margin: 0 0 var(--space-2);
}
.sponsor-tier-row__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.sponsor-tier-row__grid--gold { grid-template-columns: repeat(3, 1fr); }
.sponsor-tier-row__grid--silver { grid-template-columns: repeat(4, 1fr); }

.sponsor-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color 220ms;
}
/* transform on hover is GSAP-driven (script.js) */
.sponsor-card--platinum {
  background: var(--syhs-paper);
  border: 1.5px solid var(--syhs-tint-violet);
  min-height: 130px;
  justify-content: center;
}
.sponsor-card--gold {
  background: var(--syhs-paper);
  border: 1.5px dashed var(--syhs-line-on-light);
  min-height: 90px;
  justify-content: center;
}
/* Silver: one step below Gold — same card, shorter and quieter. */
.sponsor-card--silver {
  background: var(--syhs-paper);
  border: 1.5px dashed var(--syhs-line-on-light);
  min-height: 72px;
  padding: var(--space-2) var(--space-3);
  justify-content: center;
  gap: 0.3rem;
}
.sponsor-card--platinum:hover { border-color: var(--syhs-ground); }
.sponsor-card--gold:hover, .sponsor-card--silver:hover { border-color: var(--syhs-signal-alt); }
.sponsor-card__label { font-weight: 700; color: var(--syhs-ink); }
.sponsor-card--gold .sponsor-card__label { font-size: 0.9rem; }
.sponsor-card--silver .sponsor-card__label { font-size: 0.85rem; }
.sponsor-card__desc { color: var(--syhs-ink-soft); font-size: 0.85rem; }
.sponsor-card__cta { font-weight: 600; color: var(--syhs-signal-alt); font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   SPONSOR-LEAD — top-tier carousel right after the hero, on the ground
   colour so it reads as a continuation of the cinematic opening, not a
   new "section." Reuses the .marquee mechanic below with a bigger slot.
   --------------------------------------------------------------------- */
.sponsor-lead { background: var(--syhs-ground); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.sponsor-lead .eyebrow--dark { color: rgba(255, 255, 255, 0.7); margin-bottom: var(--space-3); }
.sponsor-lead .eyebrow__dot { background: var(--syhs-tint-mint); }
.marquee-slot--lead {
  min-width: 15rem;
  height: 5.2rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

/* B Silver / C Bronze — rolling marquee, no click-through */
.sponsor-marquee__label { font-size: 0.85rem; font-weight: 600; color: var(--syhs-ink-soft); margin: 0 0 var(--space-2); }
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 26s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: var(--space-3); padding-inline-end: var(--space-3); flex-shrink: 0; }
.marquee-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 140px;
  height: 56px;
  border: 1px dashed var(--syhs-line-on-light);
  border-radius: var(--radius-sm);
  color: var(--syhs-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  padding-inline: var(--space-2);
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee__track { animation-name: marquee-scroll-rtl; }
@keyframes marquee-scroll-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .tracks__track, .track-card, .track-card__cta { transition: none; }
  /* Swap the cycling word for the plain joined phrase instead of animating it */
  .cycle-word { display: none; }
  .hero__reveal .sr-only {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
    color: var(--syhs-tint-mint); font-weight: 700;
  }
}

.sponsors__cta { margin-top: var(--space-4); }

.closing-space { height: 20vh; }

/* ---------------------------------------------------------------------
   Footer — brand + site map + contact, over a quiet bottom bar
   --------------------------------------------------------------------- */
.site-footer { background: var(--syhs-ink); color: rgba(255, 255, 255, 0.62); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--space-5) var(--space-4);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.site-footer__logo { display: inline-flex; flex-direction: column; gap: 0.7rem; text-decoration: none; color: var(--syhs-white); }
.site-footer__logo-img { width: 60px; height: 60px; object-fit: contain; }
.site-footer__logo-full {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syhs-tint-mint);
}
.site-footer__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: var(--space-3) 0 var(--space-3);
  max-width: 34ch;
}
.site-footer__social { list-style: none; display: flex; gap: 0.6rem; margin: 0; padding: 0; }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.8);
  transition: color 200ms, border-color 200ms, background 200ms;
}
.site-footer__social a:hover { color: var(--syhs-ink); background: var(--syhs-tint-mint); border-color: var(--syhs-tint-mint); }
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.site-footer__col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-3);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.site-footer__col a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 0.95rem; transition: color 180ms; }
.site-footer__col a:hover, .site-footer__col a:focus-visible { color: var(--syhs-tint-mint); }
.site-footer__placeholder { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); margin: var(--space-3) 0 0; max-width: 24ch; }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: var(--space-3);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__bar-inner p { margin: 0; }
/* The builder's credit: same muted voice as the copyright line beside it,
   and only the name is a link. It should read as a signature, not a banner. */
.site-footer__credit a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 3px;
  transition: color 180ms, text-decoration-color 180ms;
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--syhs-tint-mint); text-decoration-color: currentColor; }
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-footer__nav { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   RTL — mirrors layout direction, not just text. Used by index.ar.html.
   --------------------------------------------------------------------- */
[dir="rtl"] .hero__video-scrim {
  background:
    linear-gradient(180deg, rgba(22, 15, 38, 0.55) 0%, rgba(22, 15, 38, 0.35) 45%, rgba(22, 15, 38, 0.85) 100%),
    linear-gradient(260deg, rgba(80, 49, 124, 0.55) 0%, rgba(14, 71, 106, 0.25) 60%, transparent 100%);
}
[dir="rtl"] .track-card:hover,
[dir="rtl"] .track-card:focus-visible { transform: translateY(-6px); }
[dir="rtl"] .nav-dropdown__trigger svg { transform: scaleX(-1); }
[dir="rtl"] .nav-dropdown__trigger[aria-expanded="true"] svg { transform: scaleX(-1) rotate(180deg); }

/* ---------------------------------------------------------------------
   Mobile — authored, not the desktop grid collapsed (Design Standard §7)
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .hero__content { max-width: 100%; }
  .hero__headline { font-size: clamp(2.5rem, 1.6rem + 5vw, 4rem); }

  /* .hero__pin is a flex ROW (see base rule above) so .hero__content and
     .hero__reveal sit side by side — fine on desktop, where the GSAP
     timeline in script.js keeps .hero__reveal absolutely positioned and
     only fades it in over the content. Below this same breakpoint that
     timeline is skipped entirely (script.js's heroIsMobile branch) and
     .hero__reveal switches to position:static instead, meaning it becomes
     a real flex sibling — and a row layout squeezed both blocks into half
     the screen each, pushing the mission line's cycling word (already the
     widest thing on the page) straight off the right edge. Stack them so
     "static content under the headline," which is what that branch's own
     comment says it wants, is actually what renders. */
  /* .hero itself was still fixed at height:100vh with overflow:clip (the
     desktop pin's own doing — the pin needs a fixed frame to scrub inside).
     Stacked mobile content is routinely taller than one screen, so the
     video-wrap (inset:0 on .hero) stopped at the 100vh line while
     .hero__reveal's text and CTA kept going past it — clipped away
     entirely where they overlapped the next section (sponsor marquee)
     starting right at that same 100vh mark. Auto-height lets the hero box
     (and the video/scrim filling it) grow to whatever the real stack needs. */
  .hero { height: auto; min-height: 100vh; }
  .hero__pin { height: auto; flex-direction: column; align-items: stretch; gap: var(--space-5); padding-block: var(--space-4); }
  /* The bobbing "Scroll" hint only means something against the desktop
     pin's scroll-jack; on mobile there's no pin to hint at, and with the
     hero now taller than one screen its absolute bottom offset landed
     mid-way through the reveal paragraph instead of the actual page end. */
  .hero__scroll-cue { display: none; }

  /* The stack above relies on each block's own margin-top for spacing —
     fine on desktop where only .hero__content is ever visible at once, but
     stacked on mobile the three blocks' original margins (24px, 40px) read
     as cramped against this much text in one column. --space-5 above opens
     the gaps between blocks; this opens the gap the headline leaves before
     its own tagline, tight for the same reason. */
  .hero__tagline { margin-top: var(--space-3); }

  /* Marquee keeps drifting on mobile (it's touch-scrollable too); the
     hover-to-pause hint just doesn't apply without a pointer. */
  .track-card { flex-basis: 82vw; min-height: 0; }
  .tracks__hint { display: none; }
  .sponsor-tier-row__grid { grid-template-columns: 1fr; }
  .sponsor-tier-row__grid--gold { grid-template-columns: repeat(2, 1fr); }
  .sponsor-tier-row__grid--silver { grid-template-columns: repeat(2, 1fr); }

  /* Slimmer, not gone — the signature motif was previously switched off
     entirely below 860px, which meant it never reached most real visitors.
     10px reads as a thread, not a squeezed third rail. */
  .helix-thread-rail { width: 10px; opacity: 0.7; }

  /* ---- Mobile nav: collapse behind a toggle, don't wrap in place --------
     This used to just let .primary-nav wrap onto extra rows below 860px,
     which pushed the hero (and, worse, the countdown's overflow bug right
     above) below the fold on a phone. Collapsing behind a hamburger, wired
     by assets/js/mobile-nav.js, keeps the header one compact row always.
     display:none for the button itself was only ever set in this
     max-width:860px block — meaning it had no rule at all above that width
     and fell back to a <button>'s default display, showing on desktop too. */
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; margin-inline-start: auto;
    border-radius: 10px; border: 1px solid currentColor; background: transparent;
    color: inherit; cursor: pointer; padding: 0;
  }
  .nav-burger svg { transition: transform 160ms ease; }
  .nav-burger.is-active svg { transform: rotate(90deg); }

  .site-header__inner { flex-wrap: nowrap; row-gap: 0; position: relative; }
  .primary-nav {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--syhs-ground); padding: 0.5rem 1.2rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    max-height: calc(100vh - 4rem); overflow-y: auto;
  }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a { padding: 0.85rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-dropdown { width: 100%; }
  .nav-dropdown__menu { position: static; width: 100%; box-shadow: none; inset-inline-start: 0; }
}

@media (max-width: 640px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { align-items: flex-start; }
  .comparison__track { grid-template-columns: 1fr; max-width: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dna-draw__strand { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ===========================================================================
   OUR TEAM — grouped showcase (executive / scientific / operational)
   Staggered photo grid ↔ hover-linked name list.
   ========================================================================== */
.team { background: var(--syhs-paper); color: var(--syhs-ink); padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.team__heading { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
.team__heading em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--syhs-deep-violet); }
.team__tabs { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light); border-radius: 999px; padding: 0.4rem; margin-bottom: var(--space-4); }
.team__tab { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--syhs-ink-soft); padding: 0.55rem 1.2rem; border-radius: 999px; transition: background 200ms, color 200ms; }
.team__tab:hover { color: var(--syhs-ink); }
.team__tab.is-active { background: var(--syhs-ground); color: var(--syhs-white); }
.team__blurb { color: var(--syhs-ink-soft); max-width: 44rem; margin: 0 0 var(--space-4); line-height: 1.55; }

.tm { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.tm__grid { display: flex; gap: 0.7rem; }
.tm__col { display: flex; flex-direction: column; gap: 0.7rem; }
.tm__col--2 { margin-top: 3.2rem; }
.tm__col--3 { margin-top: 1.5rem; }

.tm-card { margin: 0; width: clamp(96px, 11vw, 155px); aspect-ratio: 1 / 1.08; border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(140deg, var(--syhs-deep-violet), var(--syhs-navy)); cursor: pointer; display: grid; place-items: center;
  filter: grayscale(1) brightness(0.8); transition: filter 480ms var(--ease-editorial), opacity 380ms, transform 420ms var(--ease-editorial); }
.tm-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-card__ph { width: 56%; height: 56%; color: rgba(255,255,255,0.45); display: block; }
.tm-card__ph svg { width: 100%; height: 100%; }
.tm-card:focus-visible { outline: 2px solid var(--syhs-signal); outline-offset: 3px; }
.tm-card.is-placeholder { background: repeating-linear-gradient(135deg, rgba(80,49,124,0.18) 0 10px, rgba(80,49,124,0.10) 10px 20px); }
.tm-card.is-placeholder .tm-card__ph { color: rgba(80,49,124,0.42); }
.team__panel.is-hovering .tm-card { opacity: 0.55; }
.tm-card.is-active { filter: grayscale(0) brightness(1); opacity: 1 !important; transform: translateY(-5px) scale(1.03); box-shadow: 0 22px 45px -24px rgba(22,18,31,0.6); }

.tm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); align-content: start; }
.tm-row { cursor: pointer; transition: opacity 300ms; }
.tm-row:focus-visible { outline: 2px solid var(--syhs-signal); outline-offset: 3px; border-radius: 6px; }
.team__panel.is-hovering .tm-row { opacity: 0.45; }
.tm-row.is-active { opacity: 1 !important; }
.tm-row__head { display: flex; align-items: center; gap: 0.6rem; }
.tm-row__bar { width: 1rem; height: 0.72rem; border-radius: 5px; background: rgba(22,18,31,0.22); flex-shrink: 0; transition: width 300ms, background 300ms; }
.tm-row.is-active .tm-row__bar { width: 1.45rem; background: var(--syhs-signal); }
.tm-row__name { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--syhs-ink); }
.tm-row.is-placeholder .tm-row__name { color: var(--syhs-ink-soft); font-style: italic; font-weight: 600; }
.tm-row__social { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--syhs-ink-soft);
  opacity: 0; transform: translateX(-6px); transition: opacity 200ms, transform 200ms, color 160ms, background 160ms; }
.tm-row__social svg { width: 13px; height: 13px; }
.tm-row.is-active .tm-row__social { opacity: 1; transform: none; }
.tm-row__social:hover { color: var(--syhs-white); background: var(--syhs-ground); }
.tm-row__role { display: block; margin-top: 0.35rem; padding-inline-start: 1.6rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--syhs-ink-soft); }

@media (max-width: 860px) {
  .tm { grid-template-columns: 1fr; }
  .tm__grid { overflow-x: auto; padding-bottom: 0.4rem; }
  .tm__list { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-card, .tm-row, .tm-row__bar, .tm-row__social { transition: none; }
}

/* --- Team page hero + app bar (team.html) ------------------------------ */
.app-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: 0.9rem var(--gutter); background: var(--syhs-paper); border-bottom: 1px solid var(--syhs-line-on-light); }
.app-bar--dark { background: var(--syhs-ground); border-bottom-color: rgba(255,255,255,0.1); }
/* Shared dark-header nav. These lived in info.css, so competitions.html —
   which does not load it — rendered its nav as raw blue browser links. */
.app-bar__links { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.8rem); }
.app-bar__links a { color: rgba(255,255,255,0.82); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.app-bar__links a:hover { color: #fff; }
.app-bar__cta { background: var(--syhs-signal); color: #fff !important; padding: 0.5rem 1.1rem; border-radius: 999px; }
.app-bar__cta:hover { background: var(--syhs-signal-alt); }
.app-bar__brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--syhs-white); font-weight: 700; letter-spacing: 0.04em; }
/* Used on both <a> and <button> (Sign out). Without the reset the button
   renders with the browser's own grey chrome next to its plain-text siblings. */
.app-bar__back { text-decoration: none; color: rgba(255,255,255,0.7); font-size: 0.9rem;
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.9rem;
  cursor: pointer; -webkit-appearance: none; appearance: none; }
.app-bar__back:hover { color: var(--syhs-tint-mint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.team-hero { position: relative; overflow: hidden; background: var(--syhs-ground); color: var(--syhs-white); padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.team-hero__aurora { position: absolute; inset: -30%;
  background: radial-gradient(38% 40% at 22% 26%, rgba(102,211,161,0.5), transparent 62%),
              radial-gradient(42% 44% at 82% 22%, rgba(150,130,202,0.55), transparent 62%),
              radial-gradient(46% 46% at 60% 96%, rgba(14,71,106,0.6), transparent 62%);
  filter: blur(48px); animation: teamAurora 24s ease-in-out infinite alternate; }
@keyframes teamAurora { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.14); } }
.team-hero__inner { position: relative; z-index: 1; }
.team-hero__title { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: var(--tracking-tighter); font-weight: 700; margin: 0 0 var(--space-4); }
.team-hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--syhs-tint-mint); }
.team-hero__lede { max-width: 44rem; color: rgba(255,255,255,0.85); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.55; margin: 0; }
@media (prefers-reduced-motion: reduce) { .team-hero__aurora { animation: none; } }

/* --- Operational team: departments, leaders, members ------------------- */
.ops { display: grid; gap: var(--space-4); }
.ops-dept {
  background: var(--syhs-white); border: 1px solid var(--syhs-line-on-light);
  border-radius: var(--radius-md); padding: clamp(1.1rem, 2.5vw, 1.8rem);
  box-shadow: 0 18px 44px -34px rgba(22,18,31,0.5);
  opacity: 0; transform: translateY(24px);
  transition: opacity 600ms var(--ease-editorial), transform 600ms var(--ease-editorial), border-color 260ms;
  transition-delay: calc(var(--i) * 30ms);
}
.ops-dept.is-in { opacity: 1; transform: none; }
.ops-dept:hover { border-color: var(--syhs-tint-violet); }
.ops-dept__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: var(--space-3);
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--syhs-line-on-light); }
.ops-dept__num { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--syhs-signal-alt); }
.ops-dept__name { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0; }
.ops-dept__count { margin-inline-start: auto; font-size: 0.75rem; font-weight: 700; color: var(--syhs-ink-soft);
  background: var(--syhs-paper); border: 1px solid var(--syhs-line-on-light); border-radius: 999px; padding: 0.2rem 0.6rem; }
.ops-group + .ops-group { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--syhs-line-on-light); }
.ops-group__name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700;
  color: var(--syhs-deep-violet); margin: 0 0 0.8rem; }

/* Leaders — photo + highlighted name */
.ops-leaders { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.ops-leader { width: 122px; margin: 0; text-align: center; }
.ops-leader__photo { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 0.5rem;
  border-radius: 999px; overflow: hidden; background: linear-gradient(135deg, var(--syhs-ground), var(--syhs-navy));
  box-shadow: 0 0 0 3px rgba(102,211,161,0.35), 0 10px 24px -12px rgba(22,18,31,0.6);
  transition: transform 300ms var(--ease-editorial), box-shadow 300ms; }
.ops-leader__photo img { width: 100%; height: 100%; object-fit: cover; }
.ops-leader__photo svg { width: 52%; height: 52%; color: rgba(255,255,255,0.6); }
.ops-leader:hover .ops-leader__photo { transform: translateY(-4px) scale(1.05); box-shadow: 0 0 0 3px var(--syhs-tint-mint), 0 16px 32px -12px rgba(22,18,31,0.7); }
.ops-leader__name { display: block; font-weight: 800; font-size: 0.86rem; color: var(--syhs-ink); line-height: 1.25; }
.ops-leader__role { display: block; font-size: 0.7rem; color: var(--syhs-signal-alt); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem; }

/* Members — names only */
.ops-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.ops-members li { font-size: 0.85rem; color: var(--syhs-ink-soft); background: var(--syhs-paper);
  border: 1px solid var(--syhs-line-on-light); border-radius: 999px; padding: 0.32rem 0.75rem;
  transition: color 200ms, border-color 200ms, transform 200ms; }
.ops-members li:hover { color: var(--syhs-ink); border-color: var(--syhs-tint-violet); transform: translateY(-2px); }
@media (max-width: 560px) { .ops-leader { width: 100px; } .ops-leader__photo { width: 74px; height: 74px; } }

/* --- RTL / Arabic (shared translation layer) --------------------------- */
html.is-ar body, html[dir="rtl"] body { font-family: var(--font-arabic), var(--font-sans); }
html.is-ar .info-hero__title em, html.is-ar .intro__title em, html.is-ar .team-hero__title em,
html.is-ar .day__num span, html.is-ar .chooser__title { font-family: var(--font-arabic); font-style: normal; }
html.is-ar .app-bar__back, html.is-ar .stage-nav__brand { flex-direction: row-reverse; }
html.is-ar .info-hero__facts, html.is-ar .sess__top { direction: rtl; }
html.is-ar .sess__daytag { margin-inline-start: auto; margin-inline-end: 0; }
html.is-ar .faq-item summary { flex-direction: row-reverse; text-align: right; }
html.is-ar .ops-dept__count { margin-inline-start: auto; }
html.is-ar .bar-row { direction: rtl; }
.lang-switch { font-size: 0.85rem; font-weight: 700; text-decoration: none; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 0.45rem 0.9rem; white-space: nowrap;
  transition: border-color 200ms, color 200ms; }
.lang-switch:hover { border-color: var(--syhs-tint-mint); color: #fff; }
.app-bar:not(.app-bar--dark) .lang-switch { color: var(--syhs-ink-soft); border-color: var(--syhs-line-on-light); }
.app-bar:not(.app-bar--dark) .lang-switch:hover { color: var(--syhs-ink); border-color: var(--syhs-ground); }

/* Hero reveal — "empowering youth" highlight */
.hero__reveal-empower { font-weight: 800; color: var(--syhs-white); }
.hero__reveal-empower em {
  font-style: normal; font-weight: 800; color: var(--syhs-tint-mint);
  position: relative; white-space: nowrap;
}
.hero__reveal-empower em::after {
  content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: -0.06em; height: 0.42em;
  background: linear-gradient(90deg, rgba(102,211,161,0.34), rgba(150,130,202,0.30));
  border-radius: 3px; z-index: -1;
}

/* Shared: the components section heading row (also used by index.ar.html). */
.tracks__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.tracks__head .tracks__heading { margin-bottom: 0; }

/* ===========================================================================
   TRACK SELECT — FIFA-style team chooser (home "components" section)
   Big centre crest, the adjacent tracks peeking at the sides, a colour wash
   that swaps with the selection. Per-track colours are locked tokens; the
   text tints are mixed toward white so every label clears AA on the ground.
   ========================================================================== */
.track-select {
  --ts-c1: var(--syhs-tint-violet); --ts-c2: var(--syhs-ground);
  --ts-wash: radial-gradient(60% 60% at 50% 38%, rgba(var(--syhs-tint-violet-rgb), 0.55), transparent 70%);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(0.75rem, 2vw, 2rem) clamp(4.5rem, 8vw, 5.5rem);
  border-radius: var(--radius-md);
  background: var(--syhs-ground);
  outline: none;
}
.track-select:focus-visible { box-shadow: var(--focus-ring); }
.track-select__wash { position: absolute; inset: -30%; background: var(--ts-wash); filter: blur(40px); transition: background 620ms var(--ease-editorial); pointer-events: none; }
/* Scrim between the colour wash and the content. The mint and violet washes
   lift the backdrop to a mid-tone where no text colour — not even pure white —
   can reach AA; this pulls it back down while leaving the hue clearly read. */
.track-select::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--syhs-ink) 42%, transparent);
}
.track-select::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: linear-gradient(90deg, var(--ts-c1), var(--ts-c2)); transition: background 620ms; }

.ts-arrow { position: relative; z-index: 2; width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.24); color: #fff; cursor: pointer;
  backdrop-filter: blur(6px); transition: background 200ms, transform 200ms, border-color 200ms; }
.ts-arrow svg { width: 22px; height: 22px; }
.ts-arrow:hover { background: var(--ts-c1); border-color: var(--ts-c1); transform: scale(1.08); }
.ts-arrow:focus-visible { box-shadow: var(--focus-ring); }

.ts-stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr minmax(0, 2.1fr) 1fr; align-items: center; gap: clamp(0.5rem, 2vw, 2rem); }

/* Centre card */
.ts-card { position: relative; text-align: center; color: #fff; padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2.4rem);
  background: linear-gradient(165deg, color-mix(in srgb, var(--syhs-ink) 38%, transparent), color-mix(in srgb, var(--syhs-ink) 52%, transparent));
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-md);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75); backdrop-filter: blur(8px); }
.ts-card__badge { position: absolute; top: 0.9rem; inset-inline-end: 1.1rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: rgba(255,255,255,0.75); }
.ts-crest { display: grid; place-items: center; width: clamp(84px, 12vw, 128px); aspect-ratio: 1; margin: 0 auto var(--space-3);
  border-radius: 50%; color: #fff; background: linear-gradient(150deg, var(--ts-c1), var(--ts-c2));
  box-shadow: 0 0 0 6px rgba(255,255,255,0.10), 0 18px 40px -18px var(--ts-c2); transition: background 620ms; }
.ts-crest__svg { width: 62%; height: 62%; }
.ts-card__sub { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 700;
  color: color-mix(in srgb, var(--ts-c1) 30%, #fff); margin: 0 0 0.35rem; }
.ts-card__name { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: var(--tracking-tighter); font-weight: 800; margin: 0 0 0.7rem; text-transform: uppercase; }
.ts-card__blurb { max-width: 34rem; margin: 0 auto var(--space-4); color: rgba(255,255,255,0.82); line-height: 1.5; font-size: 0.98rem; }
.ts-stats { list-style: none; display: flex; justify-content: center; gap: clamp(1.2rem, 4vw, 3rem); margin: 0 0 var(--space-4); padding: 0; }
.ts-stats li { display: flex; flex-direction: column; }
.ts-stats strong { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ts-stats span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.78); margin-top: 0.3rem; }
.ts-card__cta { display: inline-block; background: #fff; color: var(--syhs-ground); text-decoration: none; font-weight: 700;
  padding: 0.8rem 1.6rem; border-radius: 999px; transition: transform 200ms, background 200ms, color 200ms; }
.ts-card__cta:hover { transform: translateY(-2px); background: var(--ts-c2); color: #fff; }
.ts-card__cta:focus-visible { box-shadow: var(--focus-ring); }

/* Side peeks */
.ts-peek { background: none; border: 0; cursor: pointer; color: rgba(255,255,255,0.85); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.5rem; transition: color 220ms, transform 220ms, opacity 220ms; opacity: 0.8; }
.ts-peek:hover { color: #fff; opacity: 1; transform: translateY(-4px); }
.ts-peek:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm, 8px); opacity: 1; }
.ts-peek__crest { display: grid; place-items: center; width: clamp(50px, 7vw, 78px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: var(--pc, #fff); }
.ts-peek__crest .ts-crest__svg { width: 58%; height: 58%; }
.ts-peek__name { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; }

/* Crest selector */
.ts-dots { position: absolute; z-index: 2; left: 50%; bottom: clamp(1rem, 3vw, 1.6rem); transform: translateX(-50%);
  display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.ts-dot { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600;
  min-height: 44px; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; padding: 0.35rem 0.9rem 0.35rem 0.4rem; transition: background 200ms, color 200ms, border-color 200ms; }
.ts-dot__crest { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--pc, #fff); }
.ts-dot__crest .ts-crest__svg { width: 62%; height: 62%; }
.ts-dot:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.ts-dot:focus-visible { box-shadow: var(--focus-ring); }
.ts-dot.is-active { background: #fff; color: var(--syhs-ground); border-color: #fff; }
.ts-dot.is-active .ts-dot__crest { background: var(--pc); color: #fff; }

@media (max-width: 780px) {
  .ts-stage { grid-template-columns: 1fr; }
  .ts-peek { display: none; }
  .ts-arrow { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .track-select__wash, .track-select::after, .ts-crest, .ts-arrow, .ts-peek, .ts-dot, .ts-card__cta { transition: none; }
}
/* --- Shared footer: logos (SYHF + KAU) + socials ------------------------ */
.site-footer__brandcol { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__logos { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__logo { height: 46px; width: auto; display: block; border-radius: 6px; background: #fff; padding: 4px 8px; }
.site-footer__logo--kau { background: #fff; }
.site-footer__logo-sep { width: 1px; height: 34px; background: rgba(255,255,255,0.28); }
.site-footer__tag { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin: 0; }
.site-footer__social { list-style: none; display: flex; gap: 0.6rem; margin: 0; padding: 0; }
.site-footer__social a,
.site-footer__social button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  padding: 0; font: inherit; cursor: pointer;
  transition: background 200ms, color 200ms, transform 200ms, border-color 200ms; }
.site-footer__social a:hover,
.site-footer__social button:hover,
.site-footer__social button:focus-visible { background: var(--syhs-tint-mint); color: var(--syhs-ground);
  border-color: var(--syhs-tint-mint); transform: translateY(-3px); }
.site-footer__social svg { width: 19px; height: 19px; }
.site-footer__inner { display: grid; grid-template-columns: minmax(15rem, 22rem) 1fr; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); }
@media (max-width: 820px) { .site-footer__inner { grid-template-columns: 1fr; } }

/* Header: KAU lockup beside our mark */
.brand__kau { height: 30px; width: auto; display: block; background: #fff; border-radius: 5px; padding: 2px 5px; }
.brand__sep { width: 1px; height: 22px; background: rgba(255,255,255,0.3); margin-inline: 0.55rem; }

/* JSBC'25 → recap page link */
.comparison__jsbc { color: inherit; text-decoration: none; border-bottom: 3px solid var(--syhs-signal-alt);
  transition: color 200ms, border-color 200ms; }
.comparison__jsbc:hover { color: var(--syhs-signal-alt); }
.comparison__link { color: var(--syhs-signal-alt); font-weight: 700; text-decoration: none; margin-inline-start: 0.5rem; font-size: 0.92rem; }
.comparison__link:hover { text-decoration: underline; }

/* ===========================================================================
   SYHF COMPONENTS — full-width cards, stacked (assets/js/track-chooser.js)
   Replaces the one-at-a-time crest chooser: all four components are legible
   at once, which is what this section is for. Dark surface throughout.
   ========================================================================== */
.comps { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: var(--space-5); }

.comp { position: relative; overflow: hidden; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(165deg, color-mix(in srgb, var(--syhs-ink) 34%, transparent),
                                      color-mix(in srgb, var(--syhs-ink) 52%, transparent));
  box-shadow: 0 34px 70px -40px rgba(0,0,0,0.8);
  transition: transform 260ms var(--ease-editorial), border-color 260ms; }
.comp:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c1) 55%, transparent); }

/* The component's own colour, kept behind a scrim so text stays readable. */
.comp__wash { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 12% 0%, rgba(var(--c-rgb), 0.42), transparent 72%); }
.comp::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
  background: linear-gradient(90deg, var(--c1), var(--c2)); }

.comp__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: clamp(96px, 12vw, 168px) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem); }

.comp__crest { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 8px rgba(255,255,255,0.08), 0 20px 44px -20px var(--c2); }
.comp__crest-svg { width: 58%; height: 58%; }

.comp__index { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.72); display: flex; align-items: center; gap: 0.6rem; }
.comp__index span { color: var(--syhs-ground); background: var(--c1); border-radius: 5px;
  padding: 0.15rem 0.4rem; font-variant-numeric: tabular-nums; }
.comp__name { margin: 0 0 0.7rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  font-weight: 800; line-height: 1.03; letter-spacing: var(--tracking-tighter);
  text-transform: uppercase; color: #fff; }
.comp__blurb { margin: 0 0 var(--space-4); max-width: 56ch; line-height: 1.55;
  font-size: var(--fs-body-lg); color: rgba(255,255,255,0.86); }

.comp__stats { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0 0 var(--space-4); padding: 0; }
.comp__stats li { display: flex; flex-direction: column; }
.comp__stats strong { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums; }
.comp__stats span { margin-top: 0.3rem; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.78); }

.comp__cta { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-weight: 700; font-size: 1.05rem; min-height: 48px; padding: 0.8rem 1.7rem;
  border-radius: 999px; background: #fff; color: var(--syhs-ground);
  transition: transform 200ms, background 200ms; }
.comp__cta:hover { transform: translateY(-2px); background: var(--c1); color: var(--syhs-ground); }
.comp__cta:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; }

/* Only the Competitions tile carries a second action (its "Full details &
   FAQ" dialog lives on competitions.html) — every other tile keeps its
   single CTA, so this wrapper costs nothing when detailsHref is absent. */
.comp__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.comp__details-link { font-size: 0.92rem; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; color: rgba(255,255,255,0.78); transition: color 160ms ease; }
.comp__details-link:hover, .comp__details-link:focus-visible { color: #fff; }

@media (max-width: 720px) {
  .comp__inner { grid-template-columns: 1fr; }
  .comp__crest { width: clamp(84px, 26vw, 120px); }
  .comp__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .comp { transition: none; }
  .comp:hover { transform: none; }
  .comp__cta:hover { transform: none; }
}

/* ============================================================================
   APP BAR — narrow screens
   The bar is a single non-wrapping flex row, which is fine until a page puts
   four things in it (brand, a CTA, sign out, the language toggle). On a phone
   the last two were being clipped off the edge entirely. Let it wrap, and stop
   the brand from forcing a three-line column.
   ========================================================================== */
@media (max-width: 40em) {
  .app-bar { flex-wrap: nowrap; row-gap: 0; padding-block: 0.7rem; position: relative; }
  .app-bar__brand { white-space: nowrap; font-size: 0.95rem; }
  .app-bar__brand img { width: 26px; height: 26px; }
  .app-bar__back,
  .lang-switch { flex: 0 0 auto; white-space: nowrap; font-size: 0.85rem; }
}

/* .app-bar__links (the inline nav most inner pages use — team.html,
   venue.html, competitions.html...) hid at 40em/640px while .nav-burger
   (the button meant to replace it, styled a few hundred lines up) shows
   starting at 860px — the two breakpoints didn't match, so between 641px
   and 860px both rendered at once: the full "Main Stage / Competitions"
   link row *and* the hamburger, together wider than the header, pushing
   the whole page into horizontal scroll. Same width the hamburger itself
   uses, so the two now hand off at the same point. */
@media (max-width: 860px) {
  /* Same fix as .primary-nav above: a multi-link nav that used to wrap onto
     an extra row now collapses behind assets/js/mobile-nav.js's toggle
     instead, so the header itself never grows past one row. */
  .app-bar__links {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--syhs-ground); padding: 0.5rem 1.2rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    max-height: calc(100vh - 4rem); overflow-y: auto; z-index: 40;
  }
  .app-bar__links.is-open { display: flex; }
  .app-bar__links a { padding: 0.85rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* ============================================================================
   SITE SEARCH  (assets/js/search.js)
   ========================================================================== */
.sf-open { display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9); font: inherit; font-size: 0.86rem; font-weight: 600;
  -webkit-appearance: none; appearance: none; transition: border-color 160ms, background 160ms; }
.sf-open:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.12); color: #fff; }
.sf-open:focus-visible { outline: 3px solid var(--syhs-tint-mint); outline-offset: 2px; }
.app-bar:not(.app-bar--dark) .sf-open { border-color: var(--syhs-line-on-light);
  background: transparent; color: var(--syhs-ink-soft); }

.sf { position: fixed; inset: 0; z-index: 200; display: grid; align-items: start;
  justify-items: center; padding: clamp(3rem, 10vh, 7rem) var(--gutter) 2rem; }
.sf__scrim { position: absolute; inset: 0; background: rgba(14,9,26,0.72);
  backdrop-filter: blur(3px); }
.sf__panel { position: relative; width: min(40rem, 100%); max-height: 76vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-md); background: #fff;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); }

.sf__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border-bottom: 1px solid var(--syhs-line-on-light); }
.sf__input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit;
  font-size: 1.05rem; color: var(--syhs-ink); padding: 0.6rem 0; }
.sf__input:focus { outline: none; }
.sf__close { flex: 0 0 auto; border: 1px solid var(--syhs-line-on-light); background: none;
  border-radius: 6px; padding: 0.3rem 0.55rem; font: inherit; font-size: 0.72rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--syhs-ink-soft); cursor: pointer; }
.sf__close:hover { color: var(--syhs-ink); border-color: var(--syhs-ground); }

.sf__status { margin: 0; padding: 0.5rem 1.1rem; font-size: 0.8rem; color: var(--syhs-ink-soft);
  border-bottom: 1px solid var(--syhs-line-on-light); }
.sf__results { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.sf__hit { display: flex; align-items: baseline; gap: 0.8rem; padding: 0.75rem 1.1rem;
  text-decoration: none; color: var(--syhs-ink); border-bottom: 1px solid var(--syhs-line-on-light); }
.sf__hit:last-child { border-bottom: 0; }
.sf__hit:hover, .sf__hit.is-active { background: color-mix(in srgb, var(--syhs-ground) 7%, transparent); }
.sf__hit.is-active { outline: 2px solid var(--syhs-ground); outline-offset: -2px; }

.sf__kind { flex: 0 0 auto; min-width: 4.6rem; font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 0.2rem 0.45rem;
  border-radius: 5px; text-align: center; color: #fff; }
.sf__kind--page    { background: var(--syhs-navy); }
.sf__kind--track   { background: var(--syhs-ground); }
.sf__kind--session { background: var(--syhs-signal); }
.sf__kind--person  { background: var(--syhs-deep-violet); }

.sf__text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sf__title { font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.sf__sub { font-size: 0.82rem; color: var(--syhs-ink-soft); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 40em) {
  .sf { padding-top: 1rem; }
  .sf__panel { max-height: 88vh; }
  .sf-open span { display: none; }        /* icon only, the bar is tight */
  .sf-open { padding: 0.45rem 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .sf-open { transition: none; } }

/* On the minimal headers the trigger sits inline with the back link rather
   than inside a nav list, so it needs its own light-surface treatment. */
.app-bar > .sf-open { margin-inline-start: auto; }
.stage-nav > .sf-open { border-color: rgba(255,255,255,0.35); }

/* ============================================================================
   PRINT
   People print the schedule and carry it around the venue. Printed from the
   browser today, every page wastes its first sheet on navigation, buttons and
   a hero image, and prints link text with no way to know where it points.
   ========================================================================== */
@media print {
  /* Interface that cannot be used on paper. */
  .app-bar, .site-header, .primary-nav, .nav-dropdown, .app-bar__links,
  .skip-link, .sf-open, .sf, .lang-toggle, .btn, .cta, .site-footer__nav,
  video, .hero__video, .info-hero__aurora, .tk__scrim, .scroll-cue {
    display: none !important;
  }

  :root { --syhs-ink: #000; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /* Backgrounds do not print by default and images cost ink; keep the page
     readable as black text on white rather than pale grey on white. */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a { text-decoration: underline; }

  /* A printed link is useless without its destination. Internal anchors and
     javascript hrefs are skipped — only real destinations are worth the ink. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  /* Keep a session and its details on one sheet. */
  .stage-card, .tk, .pp-card, .area, tr, li, .info-sec { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Reveal anything the scroll animations left hidden, or the sheet prints blank. */
  [class*="reveal"], .is-in, .pp-card, .tk { opacity: 1 !important; transform: none !important; }

  @page { margin: 15mm; }
}