/* Section layouts, mobile first. Breakpoints: 48em (768px) and 64em (1024px). */

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-8) var(--s-11); isolation: isolate; }
/* Stage light: the cone and the pool where it lands. --light-on is each one's final opacity,
   which the lights-on flicker in base.css scales, so both stay in sync and end exactly here. */
.hero__pool { --light-on: 1; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 18% at var(--spot-x, 50%) 98%, var(--glow), var(--glow-none) 70%); opacity: var(--light-on); pointer-events: none; }
.hero__ring-a { width: 560px; height: 560px; left: -300px; top: -140px; background: var(--ring-fill); box-shadow: inset 0 0 0 1px var(--grid-line-major); }
.hero__ring-b { width: 340px; height: 340px; left: -190px; top: -30px; box-shadow: inset 0 0 0 1px var(--grid-line-major); }
.hero__spot { --light-on: .65; position: absolute; top: 0; left: var(--spot-x, 50%); width: 520px; height: 100%; margin-left: -260px; background: linear-gradient(180deg, var(--spot-top), var(--spot-mid) 62%, var(--spot-end)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); opacity: var(--light-on); pointer-events: none; }
.hero__grid { display: flex; flex-direction: column; gap: var(--s-4); }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.hero__eyebrow { align-self: flex-start; }
.hero__title { display: flex; flex-direction: column; }
.hero__line { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
.hero__line--gold { color: var(--gold-500); }
.hero__sub { max-width: 560px; font-size: var(--fs-lead); line-height: 1.55; color: var(--on-navy-body); }
.hero__actions { display: flex; flex-direction: column; gap: var(--s-4); }
.hero__aside { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 420px; margin: 18px auto 0; }
.hero__photo-wrap { position: relative; }
.hero__photo { width: 240px; box-shadow: 0 0 0 10px var(--grid-line-minor), 0 0 0 11px var(--ring-line); }
/* Hero photos sit in their own circles over the frame, so an incoming photo can travel in from outside it */
.hero__slides { position: absolute; inset: 0; pointer-events: none; }
.hero__slide { position: absolute; inset: 0; border-radius: var(--r-circle); overflow: hidden; }
.hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__pause { position: absolute; left: 2%; top: 2%; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-circle); background: var(--navy-900); color: var(--gold-500); cursor: pointer; box-shadow: 0 0 0 2px var(--gold-500); }
.hero__pause[hidden] { display: none; }
.hero__pause span { display: block; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.hero__pause[aria-pressed='true'] span { width: 0; height: 0; border-inline: 0; border-block: 8px solid transparent; border-left: 13px solid currentColor; margin-left: 4px; }
.hero__pause:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.badge { position: absolute; top: -6px; right: -40px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; height: 104px; border-radius: var(--r-circle); background: var(--gold-500); color: var(--navy-900); font-family: var(--font-display); font-weight: var(--fw-display); line-height: .9; text-align: center; transform: rotate(-12deg); box-shadow: 0 0 0 5px var(--navy-900); }
.badge b { font-size: var(--fs-badge); letter-spacing: -.03em; }
.badge span { font-size: calc(var(--fs-badge) * .53); letter-spacing: .02em; }
.hero__ticket { position: relative; z-index: 2; width: 100%; margin-top: calc(var(--s-8) * -1); }
.hero__scroll { position: absolute; left: var(--gutter); bottom: 34px; display: flex; align-items: center; gap: var(--s-3); color: var(--on-navy-muted); font-size: var(--fs-label); font-weight: var(--fw-bold); }
.hero__scroll i { display: block; width: 28px; height: 2px; background: currentColor; }

@media (min-width: 48em) {
  .hero__actions { flex-direction: row; }
  .hero__photo { width: 300px; }
  .badge { width: 136px; height: 136px; top: -14px; right: -52px; box-shadow: 0 0 0 6px var(--navy-900); }
  .hero__scroll i { width: 40px; }
}
@media (min-width: 64em) {
  .hero { padding-block: var(--s-12) 132px; }
  .hero__pool { background: radial-gradient(ellipse 34% 22% at var(--spot-x, 80%) 97%, var(--glow), var(--glow-none) 70%); }
  .hero__ring-a { width: 1100px; height: 1100px; left: -420px; top: -300px; }
  .hero__ring-b { width: 620px; height: 620px; left: -170px; top: -40px; }
  .hero__spot { --light-on: 1; left: var(--spot-x, 80%); width: 780px; margin-left: -390px; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
  .hero__copy { gap: 34px; }
  .hero__aside { max-width: none; margin: 0; }
  .hero__photo { width: clamp(260px, 23vw, 340px); }
  .hero__ticket { margin-top: -52px; }
}

/* ---------- Page header (inner pages) ---------- */
.phead { padding-block: var(--s-9) var(--s-10); }
.phead__ring-a { width: 480px; height: 480px; right: -260px; top: -200px; box-shadow: inset 0 0 0 1px var(--ring-line); }
.phead__ring-b { width: 220px; height: 220px; left: -110px; bottom: -130px; background: var(--ring-fill); box-shadow: inset 0 0 0 1px var(--grid-line-major); }
.phead__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.phead__title { font-weight: var(--fw-display); font-size: var(--fs-page-title); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; }
.phead__intro { max-width: 640px; font-size: var(--fs-lead); line-height: 1.55; color: var(--on-navy-body); }
@media (min-width: 48em) {
  .phead { padding-block: var(--s-11) var(--s-12); }
  .phead__ring-a { width: 900px; height: 900px; right: -420px; top: -420px; }
  .phead__ring-b { width: 320px; height: 320px; left: -160px; bottom: -200px; }
  .phead__inner { gap: var(--s-5); }
}
.notfound { padding-block: var(--s-10); }

/* ---------- Quick facts ---------- */
.facts { padding-block: var(--s-9) var(--s-7); }
.facts__list { display: grid; gap: 14px; }
.facts__item { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1.3125rem; line-height: 1.05; }
@media (min-width: 48em) {
  .facts { padding-block: var(--s-10) var(--s-8); }
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .facts__item { gap: var(--s-4); font-size: 1.5625rem; }
}
@media (min-width: 75em) { .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Tiles: flat colour blocks, lifted on hover ---------- */
.tile { display: flex; align-items: flex-start; gap: 14px; padding: var(--s-5); border-radius: var(--r-block); }
.tile::after { opacity: 0; }
.tile__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile p { color: var(--ink-600); }
.tile--light { --face: var(--surface-light); }
.tile--cream { --face: var(--gold-100); }
.tile--navy { --face: var(--navy-900); --shadow: var(--gold-500); color: var(--surface-white); }
.tile--navy700 { --face: var(--navy-700); --shadow: var(--gold-500); color: var(--surface-white); }
.tile--navy p, .tile--navy700 p { color: var(--on-navy-body); }
.tile--gold { --face: var(--gold-500); color: var(--navy-900); }
.tile--gold p { color: var(--navy-700); }
.tile__kicker.tile__kicker { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--ink-600); }
.tile--navy .tile__kicker { color: var(--on-navy-muted); }
.tile__title { font-size: var(--fs-title); line-height: 1; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .tile { transition: transform var(--dur-fast) var(--ease); }
  .tile:hover { transform: translateY(-4px); }
  .tile:hover::after { opacity: 1; }
}
@media (min-width: 48em) { .tile { padding: 28px; } }

/* ---------- About ---------- */
.about__ring { width: 340px; height: 340px; right: -170px; top: -120px; border: 40px solid var(--navy-a04); }
.about__inner { display: flex; flex-direction: column; gap: 30px; }
.about__head { display: flex; flex-direction: column; gap: var(--s-4); }
.about__lead { font-size: var(--fs-body-lg); color: var(--ink-600); }
.about__tiles { display: grid; gap: var(--s-3); }
.about__tiles .tile:nth-child(odd) { margin-right: var(--s-5); }
.about__tiles .tile:nth-child(even) { margin-left: var(--s-5); }
@media (min-width: 48em) {
  .about__ring { width: 640px; height: 640px; right: -260px; top: -220px; border-width: 64px; }
  .about__inner { gap: var(--s-10); }
  .about__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .about__tiles .tile.tile { margin-inline: 0; }
  .about__tiles .tile:first-child { grid-column: span 2; }
}
@media (min-width: 64em) {
  .about__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: end; }
  .about__head .shead { grid-column: span 7; }
  .about__lead { grid-column: 8 / span 5; }
  .about__tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .about__tiles .tile { flex-direction: column; gap: var(--s-4); }
  .about__tiles .tile:nth-child(1) { grid-column: span 5; padding: var(--s-8); }
  .about__tiles .tile:nth-child(1) h3 { font-size: 2rem; }
  .about__tiles .tile:nth-child(2) { grid-column: span 4; margin-top: var(--s-9); }
  .about__tiles .tile:nth-child(3) { grid-column: span 3; }
  .about__tiles .tile:nth-child(4) { grid-column: span 7; flex-direction: row; align-items: center; }
  .about__tiles .tile:nth-child(5) { grid-column: span 5; }
}

/* ---------- Journey ---------- */
.journey { padding-top: calc(var(--section-y) + var(--s-4)); }
.journey__ring { width: 480px; height: 480px; right: -280px; top: -160px; box-shadow: inset 0 0 0 1px var(--ring-line); }
.journey__inner { display: flex; flex-direction: column; gap: 28px; }
.track { position: relative; }
.track__line { display: none; }
.dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.dates__item { display: flex; flex-direction: column; gap: var(--s-1); }
.dates__item span { font-size: .75rem; line-height: 1.3; color: var(--on-navy-muted); }
.dates__item b { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1.0625rem; line-height: 1.15; color: var(--surface-white); }

.stages { position: relative; }
.stages__line { display: none; }
.stages__list { display: flex; flex-direction: column; gap: 10px; }
.stage__node { position: relative; display: block; width: 22px; height: 22px; border-radius: var(--r-circle); background: var(--navy-900); box-shadow: inset 0 0 0 3px var(--node-ring); }
.stage__node::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-circle); background: var(--gold-500); box-shadow: 0 0 0 5px var(--gold-a20); opacity: 0; transform: scale(.5); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.stage.is-next .stage__node::after, .stage.is-lit .stage__node::after { opacity: 1; transform: none; }
.stage__date { font-family: var(--font-display); font-weight: var(--fw-display); color: var(--gold-500); }
.stage__meta { display: flex; align-items: center; gap: 14px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-navy-muted); }
.stage__next { display: none; font-size: var(--fs-label); padding: 6px 10px; }
.stage.is-next .stage__next { display: inline-flex; }
.stage__title { text-transform: uppercase; color: var(--surface-white); }
.stage__desc { color: var(--on-navy-body); }
.outcome { display: flex; align-items: flex-start; gap: 10px; padding: 14px var(--s-4); border-radius: var(--r-block); box-shadow: inset 0 0 0 2px var(--gold-500); color: var(--surface-white); font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1.0625rem; line-height: 1.2; }
.outcome .i { width: 20px; height: 20px; margin-top: 1px; color: var(--gold-500); stroke-width: 2.4; }
.outcome--final { background: var(--gold-500); color: var(--navy-900); box-shadow: none; padding-inline: 22px; -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 10px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat; }
.outcome--final .i { color: var(--navy-900); stroke-width: 2; }

@media (max-width: 63.99em) {
  .dates__item { padding: var(--s-3) 14px; border-radius: var(--r-block); background: var(--navy-700); }
  .dates__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dates__item.is-next { background: var(--gold-500); }
  .dates__item.is-next span { color: var(--navy-700); }
  .dates__item.is-next b { color: var(--navy-900); }

  /* Stage cards are an accordion on small screens */
  .stage { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 34px; column-gap: 14px; row-gap: var(--s-1); align-items: center; padding: 14px 14px 14px var(--s-4); border-radius: var(--r-block); background: var(--navy-700); }
  .stage__node { grid-column: 1; grid-row: 1 / span 3; }
  .stage__meta { grid-column: 2; grid-row: 1; }
  .stage__date { grid-column: 2; grid-row: 2; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; }
  .stage__title { grid-column: 2; grid-row: 3; font-size: 1rem; line-height: 1.15; }
  .stage__toggle { all: unset; box-sizing: border-box; grid-column: 3; grid-row: 1 / span 3; cursor: pointer; border-radius: var(--r-circle); }
  .stage__toggle::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-block); }
  .stage__toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
  .stage__panel { position: relative; z-index: 1; grid-column: 2 / -1; grid-row: 4; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) 0 var(--s-1); }
  .js .stage:not(.is-open) .stage__panel { display: none; }
  .js .stage.is-open .stage__panel { animation: fade var(--dur-fast) var(--ease) both; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .dates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dates__item:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 64em) {
  .journey__ring { width: 1000px; height: 1000px; right: -560px; top: -380px; }
  .journey__inner { gap: 56px; }

  /* Date track: markers are spaced by real time. --pos (0 to 1) is set from the config in main.js */
  .track__line { display: block; position: absolute; left: 0; right: 0; top: 94px; height: 3px; background: var(--track-line); }
  .track__line--fill { background: var(--gold-500); transform-origin: left center; }
  .dates { display: block; position: relative; height: 190px; }
  .dates__item { position: absolute; left: calc(var(--pos, 0) * 100%); top: 0; width: 190px; gap: 3px; text-align: center; transform: translateX(-50%); }
  .dates__item:nth-child(even) { top: 124px; }
  .dates__item span { font-size: var(--fs-label); }
  .dates__item b { font-size: 1.25rem; line-height: 1.1; letter-spacing: var(--ls-snug); white-space: nowrap; }
  .dates__item::before { content: ''; position: absolute; left: 50%; top: 88px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: var(--r-circle); background: var(--navy-900); box-shadow: inset 0 0 0 3px var(--node-ring); }
  .dates__item:nth-child(even)::before { top: -36px; }
  .dates__item.is-next::before { background: var(--surface-white); box-shadow: 0 0 0 6px var(--track-line); }
  .dates__item[data-align='start'] { text-align: left; transform: none; }
  .dates__item[data-align='start']::before { left: 0; margin-left: 0; }
  .dates__item[data-align='before'], .dates__item[data-align='end'] { text-align: right; transform: translateX(-100%); }
  .dates__item[data-align='before'] { padding-right: var(--s-3); }
  .dates__item[data-align='before']::before { left: auto; right: -7.5px; margin-left: 0; }
  .dates__item[data-align='end']::before { left: auto; right: 0; margin-left: 0; }

  /* Stage rows on a vertical line */
  .stages__line { display: block; position: absolute; left: 27px; top: 54px; bottom: 54px; width: 3px; background: var(--white-a10); }
  .stages__line--fill { background: var(--gold-500); transform-origin: top center; }
  .stages__list { gap: 0; }
  .stage { position: relative; display: grid; grid-template-columns: 56px clamp(170px, 16vw, 230px) minmax(0, 1fr) clamp(230px, 21vw, 300px); column-gap: var(--s-7); row-gap: var(--s-3); align-items: start; padding: 36px 0; }
  .stage__node { grid-column: 1; grid-row: 1 / span 3; width: 24px; height: 24px; margin: 6px 0 0 var(--s-4); z-index: 1; }
  .stage__node::after { box-shadow: 0 0 0 6px var(--gold-a20); }
  .stage__date { grid-column: 2; grid-row: 1 / span 3; }
  .stage__date b { display: block; font-size: var(--fs-date-numeral); line-height: .82; letter-spacing: -.045em; color: var(--surface-white); white-space: nowrap; }
  .stage__date b.is-range { font-size: var(--fs-date-range); }
  .stage__date span { display: block; margin-top: var(--s-3); font-weight: var(--fw-heading); font-size: 1.25rem; letter-spacing: .02em; }
  .stage__meta { grid-column: 3; grid-row: 1; font-size: .9375rem; }
  .stage__title { grid-column: 3; grid-row: 2; font-size: var(--fs-title); line-height: 1; }
  .stage__toggle { display: none; }
  .stage__panel { display: contents; }
  .stage__desc { grid-column: 3; grid-row: 3; font-size: 1.0625rem; }
  .outcome { grid-column: 4; grid-row: 1 / span 3; gap: var(--s-3); padding: 18px var(--s-5); font-size: 1.25rem; }
  .outcome .i { width: 22px; height: 22px; margin-top: 2px; }
  .outcome--final { padding: 22px 26px; }
}

/* ---------- Who can participate ---------- */
.who__inner { display: flex; flex-direction: column; gap: 26px; }
.who__tiles { display: grid; gap: var(--s-3); }
.who__fee { font-size: 2.125rem; line-height: var(--lh-tight); text-transform: uppercase; color: var(--gold-500); }
@media (min-width: 48em) {
  .who__inner { gap: 56px; }
  .who__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .who__tiles .tile { flex-direction: column; }
  .who__tiles .tile__body { gap: 14px; }
  .who__fee { font-size: 2.75rem; }
}
@media (min-width: 64em) { .who__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Pitch Blueprint ---------- */
.blueprint__ring { width: 440px; height: 440px; right: -220px; bottom: -140px; background: var(--navy-a07); }
.blueprint__inner { display: flex; flex-direction: column; gap: var(--s-6); }
.blueprint__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.blueprint__sub { font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: var(--navy-700); }
.blueprint__parts { display: flex; flex-direction: column; gap: var(--s-3); }
.blueprint__label { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
/* Deliverable specs: a flat navy block, one row per requirement */
.spec { display: grid; gap: var(--s-5); margin: 0; padding: var(--s-6) var(--s-5); border-radius: var(--r-block); background: var(--navy-900); color: var(--surface-white); }
.spec__row { display: grid; gap: var(--s-1); }
.spec dt { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--on-navy-muted); }
.spec dd { margin: 0; font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-title); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--gold-500); }
.spec dd span { display: block; margin-top: var(--s-1); font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; color: var(--on-navy-body); }
.pillars { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pillars li { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-block); }
.pillars li:nth-child(odd) { background: var(--navy-a07); }
.pillars__num { width: 62px; flex: none; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-pillar); line-height: .82; letter-spacing: -.045em; color: var(--navy-900); }
.pillars__body { display: flex; flex-direction: column; gap: var(--s-1); }
.pillars__body p { color: var(--navy-700); }
@media (min-width: 64em) {
  .blueprint__ring { width: 820px; height: 820px; left: -410px; right: auto; bottom: -410px; }
  /* The heading group joins the grid so the right column can sit on the same baseline as the title's first line */
  .blueprint__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: var(--s-5) var(--s-6); align-items: start; }
  .blueprint__head { display: contents; }
  .blueprint__tag { grid-column: 1 / span 5; grid-row: 1; }
  .blueprint__title { grid-column: 1 / span 5; grid-row: 2; align-self: baseline; }
  .blueprint__sub { grid-column: 1 / span 5; grid-row: 3; }
  .spec { grid-column: 1 / span 5; grid-row: 4; gap: var(--s-6); padding: var(--s-7); margin-top: var(--s-1); }
  .blueprint__parts { grid-column: 6 / span 7; grid-row: 2 / span 3; align-self: baseline; gap: var(--s-4); }
  .pillars { gap: var(--s-2); }
  .pillars li { gap: var(--s-6); padding: 22px var(--s-6); }
  .pillars__num { width: 108px; font-size: var(--fs-pillar); line-height: .8; }
  .pillars__body { gap: 6px; }
  .pillars__body h3 { font-size: 1.75rem; }
  .pillars__body p { font-size: 1.0625rem; }
}

/* ---------- Stats band ---------- */
.stats { padding-block: 56px; }
.stats__ring-a { width: 420px; height: 420px; right: -230px; top: -220px; box-shadow: inset 0 0 0 1px var(--ring-line); }
.stats__ring-b { display: none; }
.stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stats__item { display: flex; flex-direction: column; gap: 10px; padding: var(--s-5) var(--s-4); border-radius: var(--r-block); background: var(--navy-700); }
.stats__item:nth-child(even) { margin-top: var(--s-5); }
.stat { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-stat); line-height: .9; letter-spacing: -.045em; color: var(--gold-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1rem; color: var(--surface-white); }
@media (min-width: 48em) { .stats__list { gap: var(--s-5); } .stats__item { padding: var(--s-7) var(--s-6); } }
@media (min-width: 64em) {
  .stats { padding-block: 112px; }
  .stats__ring-a { width: 760px; height: 760px; right: -240px; top: -360px; }
  .stats__ring-b { display: block; width: 320px; height: 320px; left: -160px; bottom: -160px; box-shadow: inset 0 0 0 3px var(--gold-a45); }
  .stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .stats__item.stats__item { gap: 14px; padding: 0; margin: 0; background: none; }
  .stat__label { font-size: 1.25rem; }
}

/* ---------- Horizontal scroller (mobile) ---------- */
.scroller { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: var(--s-1) var(--gutter) var(--s-3); scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: none; }

/* ---------- Judges, prizes, venue ---------- */
.tba { padding-block: var(--s-10); }
.tba__list .tile { flex-direction: column; gap: var(--s-3); width: 268px; }
.tba__venue { font-size: var(--fs-sm); color: var(--ink-600); }
@media (min-width: 48em) {
  .tba { padding-block: 112px; }
  .tba__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-items: start; overflow: visible; margin: 0; padding: 0; }
  .tba__list .tile { width: auto; gap: var(--s-4); }
  .tba__list .tile:nth-child(2) { margin-top: 36px; }
}

/* ---------- Past editions ---------- */
.past__inner { display: flex; flex-direction: column; gap: var(--s-7); }
.past__group { display: flex; flex-direction: column; gap: var(--s-4); }
.past__text { display: flex; flex-direction: column; gap: 6px; }
.past__title { letter-spacing: var(--ls-snug); }
.past__text p { color: var(--ink-600); }
.past__photos { align-items: center; }
.past__photos .ph--rect { width: 270px; height: 190px; }
.past__photos .ph--circle { width: 190px; }
@media (min-width: 64em) {
  .past__inner { gap: 56px; }
  .past__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); align-items: start; }
  .past__group { gap: 22px; }
  .past__group:nth-child(2) { margin-top: var(--s-11); }
  .past__text { gap: var(--s-2); }
  .past__text .past__title { font-size: 2rem; }
  .past__text p { font-size: 1.0625rem; }
  .past__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 260px 210px; gap: var(--s-4); align-items: stretch; overflow: visible; margin: 0; padding: 0; }
  .past__photos .ph--rect { width: auto; height: auto; }
  .past__photos .ph--wide { grid-column: span 2; }
  .past__photos .ph--circle { width: 210px; justify-self: center; }
}
@media (max-width: 63.99em) { .past__groups { display: flex; flex-direction: column; gap: var(--s-7); } }

/* ---------- Sponsors ---------- */
.sponsors__inner { display: flex; flex-direction: column; gap: 22px; }
.sponsors__main { display: flex; flex-direction: column; gap: 22px; }
.sponsors__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.logo-tile { position: relative; height: 100px; border-radius: var(--r-block); overflow: hidden; }
.logo-tile__layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: .75rem; font-weight: var(--fw-bold); text-align: center; }
.logo-tile__layer .i { width: 26px; height: 26px; stroke-width: 1.5; }
.logo-tile__layer img { max-width: 70%; max-height: 60%; object-fit: contain; }
.logo-tile__c { background: var(--gold-100); color: var(--navy-900); }
.logo-tile__c .i { color: var(--navy-600); }
.logo-tile__g { background: var(--surface-light); color: var(--ink-600); transition: opacity var(--dur) var(--ease); }
.logo-tile__g .i { color: var(--placeholder-icon); }
.logo-tile__g img { filter: grayscale(1); }
@media (hover: hover) and (pointer: fine) { .logo-tile:hover .logo-tile__g { opacity: 0; } }
.panel { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 0 var(--s-6); padding: 26px 22px 30px; border-radius: var(--r-block); background: var(--navy-900); color: var(--surface-white); clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.panel h3 { font-size: 1.875rem; line-height: var(--lh-tight); text-transform: uppercase; }
.panel p { font-weight: var(--fw-medium); color: var(--on-navy-body); }
.panel .btn { align-self: flex-start; }
@media (min-width: 48em) { .logo-tile { height: 150px; } .logo-tile__layer { font-size: var(--fs-label); gap: var(--s-2); } }
@media (min-width: 64em) {
  .sponsors__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
  .sponsors__main { grid-column: span 7; gap: 36px; }
  .sponsors__grid { gap: var(--s-4); }
  .panel { grid-column: 9 / span 4; margin: 120px 0 0; gap: var(--s-5); padding: var(--s-8) 34px 42px; clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
  .panel h3 { font-size: 2.5rem; }
  .panel p { font-size: 1.0625rem; }
}

/* ---------- Team ---------- */
.team__inner { display: flex; flex-direction: column; }
.team__list { display: flex; flex-direction: column; gap: var(--s-9); }
.member { position: relative; display: flex; flex-direction: column; gap: var(--s-5); }
.member__photo { width: calc(100% - var(--offset)); aspect-ratio: 4 / 5; box-shadow: var(--offset) var(--offset) 0 var(--gold-500); }
/* Team photos show in natural colour: no duotone tint, no grayscale. Only the slight hover zoom remains. */
.member__photo img { object-position: center 20%; filter: none; mix-blend-mode: normal; }
.member__media { position: relative; width: calc(100% - var(--offset)); }
.member__media .member__photo { width: 100%; }
/* LinkedIn button: translucent white circle at the bottom centre of the photo */
.member__in { position: absolute; left: 50%; bottom: var(--s-4); z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--s-9); height: var(--s-9); border-radius: var(--r-circle); background: var(--white-a80); color: var(--navy-900); transform: translateX(-50%); transition: transform var(--dur-fast) var(--ease); }
.member__in .i { width: 22px; height: 22px; stroke-width: 1.9; }
.member__in:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .member__in:hover { transform: translateX(-50%) scale(1.08); } }
.member__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.member__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.member__zoom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease); }
.member__name { font-size: var(--fs-member); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); text-transform: uppercase; }
.member__role { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--navy-700); }
.member__bio { margin-top: var(--s-2); max-width: 720px; font-size: var(--fs-body-lg); color: var(--ink-600); }
.member__bio .word { white-space: nowrap; }
/* Hover mode (set by main.js only for a mouse, 768px and up, motion allowed). --drop centres the name and post beside the photo.
   The description is split into letters that switch on one after another, so the typing uses opacity only. */
.team-hover .member__head { transform: translateY(var(--drop, 0px)); transition: transform var(--dur-slow) var(--ease); }
.team-hover .member:is(:hover, :focus-visible) .member__head { transform: none; }
.team-hover .member__bio .ch { opacity: 0; }
.team-hover .member:is(:hover, :focus-visible) .member__bio .ch { opacity: 1; transition: opacity 0s linear; transition-delay: calc(var(--i) * var(--step, 10ms) + 300ms); }
@media (hover: hover) and (pointer: fine) { .member:hover .member__zoom { transform: scale(1.03); } }
@media (min-width: 48em) {
  .team__list { gap: var(--s-7); }
  .member { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: start; }
  .member__media { width: auto; }
  .member__text { padding-top: var(--s-1); }
}
@media (min-width: 64em) {
  .team__list { gap: var(--s-8); }
}

/* ---------- FAQ ---------- */
.faq__inner { display: flex; flex-direction: column; gap: 26px; }
.faq__list { display: flex; flex-direction: column; gap: var(--s-2); }
.faq__item { border-radius: var(--r-block); background: var(--surface-light); }
.faq__item.is-open { background: var(--gold-100); }
.faq__q { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 60px; padding: 15px var(--s-4); border-radius: var(--r-block); font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1.0625rem; line-height: 1.25; letter-spacing: var(--ls-snug); text-transform: none; color: var(--navy-900); cursor: pointer; }
.faq__q:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.faq__a { padding: 0 var(--s-4) var(--s-4); max-width: 640px; color: var(--navy-700); }
.js .faq__item:not(.is-open) .faq__panel { display: none; }
.js .faq__item.is-open .faq__panel { animation: fade var(--dur-fast) var(--ease) both; }
html:not(.js) .faq__q .pm { display: none; }
.faq__more { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-4); }
.faq__more-title { font-size: var(--fs-title); line-height: 1; letter-spacing: var(--ls-snug); }
.faq__more p { font-size: var(--fs-body-lg); color: var(--ink-600); }
.faq__mail { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-bold); color: var(--navy-900); text-decoration-color: var(--gold-500); text-decoration-thickness: 3px; text-underline-offset: 4px; }
@media (min-width: 64em) {
  .faq__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
  .faq__more { grid-column: 1 / span 4; grid-row: 1; margin-top: 0; }
  .faq__more-title { font-size: 2.5rem; }
  .faq__list { grid-column: 6 / span 7; grid-row: 1; gap: 10px; }
  .faq__q { min-height: 66px; padding: 18px 22px; gap: var(--s-4); font-size: 1.1875rem; }
  .faq__q .pm { width: 36px; height: 36px; }
  .faq__a { padding: 0 22px 22px; font-size: 1.0625rem; }
}

/* ---------- Closing CTA ---------- */
.cta { padding-block: var(--s-12) 132px; text-align: center; }
.cta__ring-a { width: 520px; height: 520px; left: 50%; top: -90px; margin-left: -260px; box-shadow: inset 0 0 0 2px var(--navy-a10); }
.cta__ring-b { width: 260px; height: 260px; left: 50%; bottom: -200px; margin-left: -130px; background: var(--navy-900); }
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
.cta__title { font-size: var(--fs-cta); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.cta .btn { align-self: stretch; min-height: 58px; font-size: 1.1875rem; }
.cta__deadline { font-weight: var(--fw-bold); color: var(--navy-700); }
@media (min-width: 48em) {
  .cta { padding-block: 168px 200px; }
  .cta__ring-a { width: 1100px; height: 1100px; top: -260px; margin-left: -550px; }
  .cta__ring-b { width: 500px; height: 500px; bottom: -370px; margin-left: -250px; }
  .cta__inner { gap: 34px; }
  .cta .btn { align-self: center; min-height: 64px; padding-inline: 36px; font-size: 1.25rem; }
  .cta__deadline { font-size: 1.125rem; }
}

/* ---------- Footer ---------- */
.footer { padding-block: 56px 112px; }
.footer__grid { display: flex; flex-direction: column; gap: var(--s-7); }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.footer__tag { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-footer-tag); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; }
.footer__tag span { color: var(--gold-500); }
.footer__col { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__h { font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--gold-500); }
.footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); }
.footer__links a, .footer__contact { position: relative; display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-width: var(--tap); min-height: var(--tap); text-decoration: none; color: var(--on-navy-body); }
.footer__contact .i { width: 18px; height: 18px; stroke-width: 1.75; }
.footer__socials { display: flex; gap: 10px; }
.footer__base { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-7); padding-top: var(--s-5); font-size: var(--fs-sm); color: var(--on-navy-muted); box-shadow: inset 0 2px 0 var(--white-a08); }
@media (min-width: 48em) {
  .footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); }
  .footer__brand { grid-column: span 5; gap: 22px; }
  .footer__col:nth-child(2) { grid-column: span 3; }
  .footer__col:nth-child(3), .footer__col:nth-child(4) { grid-column: span 2; }
  .footer__links { grid-template-columns: 1fr; }
  .footer__base { flex-direction: row; justify-content: space-between; margin-top: var(--s-10); padding-top: var(--s-6); }
}
@media (min-width: 64em) { .footer { padding-block: 88px var(--s-8); } }