/* ═══════════════════════════════════════════════════════════════
   ACSS9 — Connected Tides landing page
   Design source: Figma "ACSS9 — Connected Tides Landing Page" (1440px)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Fonts ─────────────────────────── */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Orbit';
  src: url('assets/fonts/orbit-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────── Tokens ─────────────────────────── */
:root {
  /* palette */
  --navy:        #041058;
  --navy-deep:   #051a4f;
  --navy-ink:    #061840;
  --slate:       #1f3d61;
  --blue:        #329ad2;
  --violet:      #884aef;
  --magenta:     #ff5cd9;
  --link:        #0075b2;
  --page:        #e5f5fe;
  --ice:         #ecf8ff;   /* shared band colour for every content section */

  /* Layout: one content column for the whole page.
     At 1440 this resolves to Figma's 1280 column inside 80px gutters;
     on wider screens it grows with the viewport (capped) so the page
     fills the display instead of sitting as a fixed board in the middle.
     Percentages, not vw — vw includes the scrollbar and would push the
     column off-centre by ~half a scrollbar width.
     Cap is the design's own 1280 column: at >=1440 the layout is
     pixel-identical to Figma, and the bands stay full-bleed either side. */
  --edge: max(24px, calc((100% - min(88.8889%, 1280px)) / 2));

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

/* ─────────────────────────── Reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, ol, li { margin: 0; padding: 0; }
ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b { font-weight: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: #fff;
  color: var(--navy);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 1.2px;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid #058cc9; outline-offset: 3px; border-radius: 4px; }

/* Every band is full-bleed — backgrounds and imagery run edge to edge.
   Content inside is capped at its Figma width and centred, so the 1440
   composition is preserved without the page looking like a floating board. */
.hero, .opening, .chapters, .speakers,
.experience, .sponsors, .cta {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Sections are padded to the shared content column, so every row lines up
   on the same left/right edge. (Figma's per-section gutters drifted between
   70 and 105px; that drift is what made the bands look unrelated.) */
.opening, .chapters, .speakers,
.experience, .sponsors, .cta {
  padding-inline: var(--edge);
}

.opening__row, .chapters__rows, .speakers__row,
.experience__row, .sponsors__row, .cta__row {
  width: 100%;
  margin-inline: auto;
}

/* Reveal-on-scroll (progressively enhanced; JS adds .is-in) */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }

/* ═══════════════════════════ 01 HERO ═══════════════════════════
   Frame 1440 × 788. Design unit --u scales the centred lockup so the
   composition keeps its exact proportions at any width.            */
.hero {
  /* 1 design px at 1440, matching the content column's cap */
  --u: calc(min(100vw, 1440px) / 1440);
  /* Was a flat 788px (the Figma frame). Now fills the viewport, never
     shorter than the design and capped so very tall windows don't stretch
     the composition. svh so mobile browser chrome doesn't overshoot. */
  height: clamp(788px, 100vh, 1040px);
  height: clamp(788px, 100svh, 1040px);
  /* Figma's 75px frame inset, nudged down so the lockup clears the top bar
     with more air. .hero__center is the only in-flow child, so this padding
     is what sets the lockup's vertical position. */
  padding-top: 110px;
  background: var(--page);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Figma insets the photo 75px from the top of the frame, which left a flat
   band of page colour behind the header. Flush to the top instead — same
   image, no crop, and the nav now sits on the sky it was designed for. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* bias the crop downward so the wave/coastline stays in frame as the
     hero gets taller or wider */
  object-position: center 65%;
  z-index: 0;
}

/* Hero / Fade to Ice Blue — starts at Figma's y 492 but resolves at the
   hero's own bottom edge, in the next section's colour, so the photo
   dissolves into the Opening band with no seam. */
.hero__fade {
  position: absolute;
  left: -5px;
  top: 62.4%;   /* Figma's y 492 of 788, kept proportional as the hero grows */
  bottom: 0;
  width: calc(100% + 10px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(236, 248, 255, 0) 0%,
    rgba(236, 248, 255, 0.30) 48%,
    rgba(236, 248, 255, 0.72) 72%,
    rgba(236, 248, 255, 0.94) 89%,
    var(--ice) 100%);
}

/* ── Top bar ──
   Fixed glass header: transparent while it sits on the hero sky, frosted
   ice once the page scrolls (JS toggles .is-scrolled). */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px var(--edge);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.topbar.is-scrolled {
  padding-block: 9px;
  background: rgba(236, 248, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow:
    0 1px 0 rgba(31, 122, 184, .16),
    0 14px 32px -20px rgba(5, 26, 79, .3);
}

.topbar__logo { flex: 0 0 auto; }
.topbar__logo img {
  display: block;
  width: 104px;
  height: auto;
  transition: width .35s ease;
}
.topbar.is-scrolled .topbar__logo img { width: 88px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
}
.nav__link {
  position: relative;
  padding: 8px 1px;
  font: 600 11px/15px var(--font-body);
  letter-spacing: 1.32px;
  color: var(--navy);
  white-space: nowrap;
  transition: color .25s ease;
}
/* tide underline: the brand gradient slides in from the left */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet), var(--magenta));
  transition: right .3s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { right: 0; }
.nav__link:hover,
.nav__link:focus-visible { color: #0085c2; }

/* matches the footer's .btn-solid, sized down for the bar */
.btn-register {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--navy);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 1.5px;
  color: #fff;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-register:hover,
.btn-register:focus-visible {
  background: #0a2277;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(4, 16, 88, .5);
}

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 34px;
  padding: 8px 6px;
  border: 1px solid rgba(4, 16, 88, .4);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle span + span { margin-top: 4px; }

/* ── Hero centre content — 765 wide, gap 14 ── */
.hero__center {
  position: relative;
  z-index: 2;
  width: calc(765 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
}

.hero__title { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ACSS + 9 lockup — Figma group 764.709 × 348, pulled up 32px */
.lockup {
  position: relative;
  width: calc(764.709 * var(--u));
  height: calc(348 * var(--u));
  margin-bottom: calc(-32 * var(--u));
  font-weight: 400;
}
.lockup__acss {
  position: absolute;
  left: 0;
  top: calc(47.171 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(231.235 * var(--u));
  line-height: 1.219;
  color: var(--navy);
  white-space: nowrap;
}
.lockup__nine {
  position: absolute;
  left: calc(619.71 * var(--u));
  top: 0;
  font-family: 'Orbit', var(--font-display);
  font-weight: 400;
  font-size: calc(240.484 * var(--u));
  line-height: 1.447;
  background: linear-gradient(180deg,
    #329ad2 22.661%,
    #884aef 41.5%,
    rgba(255, 92, 217, .85) 86.333%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(30.523 * var(--u));
  line-height: 1.219;
  letter-spacing: calc(5.4941 * var(--u));
  margin-right: calc(-5.4941 * var(--u)); /* offset trailing tracking so the line stays optically centred */
  color: var(--navy);
  white-space: nowrap;
}

/* ── Event details — 650 wide, gap 22 ── */
.hero__details {
  width: calc(650 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22 * var(--u));
}

/* CONNECT · COLLABORATE · SECURE — absolute offsets straight from Figma */
.pillars {
  position: relative;
  width: calc(641.591 * var(--u));
  height: calc(28 * var(--u));
}
.pillars__word {
  position: absolute;
  top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(23.123 * var(--u));
  line-height: 1.219;
  letter-spacing: calc(4.1622 * var(--u));
  white-space: nowrap;
}
.pillars__word--connect { left: 0;                       color: var(--blue); }
.pillars__word--collab  { left: calc(221.985 * var(--u)); color: var(--violet); }
.pillars__word--secure  { left: calc(522.591 * var(--u)); color: var(--magenta); }

.pillars__dot {
  position: absolute;
  top: calc(10.174 * var(--u));
  width: calc(6.475 * var(--u));
  height: calc(6.475 * var(--u));
  border-radius: 50%;
  background: var(--navy);
}
.pillars__dot--1 { left: calc(179.438 * var(--u)); }
.pillars__dot--2 { left: calc(480.043 * var(--u)); }

/* gradient rule — zero-height box in Figma, stroke overflows */
.hero__rule { position: relative; width: calc(127.642 * var(--u)); height: 0; }
.hero__rule img {
  position: absolute;
  left: 0;
  top: calc(-2.312 * var(--u));
  width: 100%;
  height: calc(4.625 * var(--u));
}

.hero__when {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(23.123 * var(--u));
  line-height: 1.75;
  letter-spacing: calc(4.1622 * var(--u));
  margin-right: calc(-4.1622 * var(--u));
  text-align: center;
  color: var(--navy);
  white-space: nowrap;
}

/* ═══════════════════ 02 OPENING STATEMENT ═══════════════════ */
.opening {
  padding-block: 45px;
  background: var(--ice);
}
.opening__row { display: flex; gap: 110px; align-items: flex-start; }

.opening__statement {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 580px;
  flex: 0 0 auto;
  font-family: var(--font-body);
}
/* two lines, set to fit the column rather than a fixed 54px that forced
   the wrap onto four */
.opening__headline {
  font: 500 clamp(30px, 3.6vw, 48px)/1.2 var(--font-body);
  color: var(--navy-deep);
  text-wrap: balance;
}
/* watermark continuation of the headline — readable, not invisible */
.opening__ghost {
  font: 500 clamp(46px, 5.6vw, 78px)/1 var(--font-body);
  letter-spacing: 2px;
  color: transparent;
  background: linear-gradient(90deg, rgba(26, 107, 184, .30), rgba(136, 74, 239, .22));
  -webkit-background-clip: text;
  background-clip: text;
}

.opening__context {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 560px;
  flex: 0 0 auto;
  padding-top: 6px;
}
.opening__body {
  width: 520px;
  max-width: 62ch;   /* the column flexes; the line length must not */
  font: 400 17px/1.65 var(--font-body);
  color: rgba(33, 64, 99, .92);
}
.opening__body p + p { margin-top: 15px; }
.opening__body p:first-child {
  font-size: 18px;
  color: rgba(20, 61, 110, .95);   /* lead paragraph sits slightly forward */
}

/* plain hairline — the Figma asset carried a ring marker on the end */
.opening__rule {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(61, 153, 214, .55), rgba(61, 153, 214, 0));
}

/* Numbers sit in one navy weight so the three read as a set rather than
   three competing hues. */
.opening__stats { display: flex; flex-wrap: wrap; gap: 20px 44px; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 132px;
}
.stat dt {
  font: 600 44px/1 var(--font-body);
  letter-spacing: -1.5px;
  color: var(--navy-deep);
}
.stat dd {
  margin: 0;
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(33, 64, 99, .72);
}

/* ══════════════════ SPEAKERS  (Figma frame 04) ══════════════════ */
.speakers {
  padding-block: 48px 80px;
  background: var(--ice);
}
/* Heading spans the row instead of sitting in a 300px column that forced it
   onto three lines; the cards get the full width underneath. */
.speakers__row { display: flex; flex-direction: column; gap: clamp(34px, 3.6vw, 52px); }
.speakers__head { display: flex; flex-direction: column; gap: 12px; }
.speakers__eyebrow {
  font: 600 14px/17px var(--font-body);
  letter-spacing: 1.4px;
  color: var(--link);
}
.speakers__heading {
  font: 500 clamp(30px, 4.2vw, 54px)/1.12 var(--font-body);
  color: var(--navy-deep);
  text-wrap: balance;
}

/* One grid, one card language. The announced speaker is a full-bleed
   portrait with the caption overlaid on a scrim — the same treatment as
   the chapter slideshow — and the unannounced slots are sealed dark cards
   of identical build, so the row reads as one set. */
.speakers__grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.spk {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 30vw, 430px);
  border-radius: 20px;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.spk:hover { transform: translateY(-6px); box-shadow: 0 20px 44px -22px rgba(5, 26, 79, .55); }

.spk__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* keep the face in frame on any crop */
}
/* scrim under the caption, matching the slideshow's */
.spk--live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(3, 12, 40, .78) 0%,
    rgba(3, 12, 40, .34) 30%,
    transparent 55%);
}

.spk__info {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spk__name {
  font: 600 15px/1.25 var(--font-body);
  letter-spacing: 1px;
  color: #fff;
}
.spk__role {
  font: 500 13px/1.35 var(--font-body);
  color: rgba(255, 255, 255, .78);
}

/* ── Unannounced slots: sealed, not unfinished ── */
.spk--tba {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(90, 200, 245, .22);
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(90, 200, 245, .30) 0%, rgba(90, 200, 245, 0) 62%),
    linear-gradient(168deg, #0d1836 0%, #060b1e 58%, #04070f 100%);
}
/* faint sweep across the surface on hover — alive, but sealed */
.spk--tba::before {
  content: '';
  position: absolute;
  inset: -40% -140%;
  background: linear-gradient(74deg,
    transparent 42%,
    rgba(255, 255, 255, .07) 50%,
    transparent 58%);
  transform: translateX(-38%);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.spk--tba:hover::before { transform: translateX(38%); }

.spk__mark {
  font: 600 14px/1 var(--font-body);
  letter-spacing: 3.4px;
  text-indent: 3.4px;        /* re-centre against the trailing tracking */
  color: rgba(196, 228, 250, .78);
}
.spk--tba .spk__name { color: rgba(196, 228, 250, .62); }

/* ═════════════ CHAPTER SLIDESHOW  (Figma frame 03) ═════════════ */
.chapters {
  padding-block: 45px 110px;
  background: var(--ice);
}

.chapters__rows { position: relative; }

/* ── Chapter slideshow ──────────────────────────────────────────
   Slides stack in one grid cell so the stage never jumps height
   between chapters; only opacity/transform animate.               */
/* The stage owns the rounded clip. Clipping each slide individually let
   the compositor drop the radius mid-animation (transform-on-child +
   overflow bug), which flashed square corners during every crossfade.
   isolation + translateZ pin the clip to its own layer. */
.slideshow__stage {
  display: grid;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

.slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  /* taller than the sources' native 3:1 — object-fit crops the 3840x1280
     art vertically to suit, which is the intended trade */
  aspect-ratio: 11 / 5;
  min-height: 520px;
  padding: clamp(28px, 4vw, 60px);
  padding-bottom: calc(clamp(28px, 4vw, 60px) + 30px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.slide[hidden] { display: flex; }   /* hidden drives a11y, CSS drives paint */
.slide.is-active { opacity: 1; visibility: visible; }

.slide--01 { --accent: #5ac8f5; }
.slide--02 { --accent: #b79dff; }
.slide--03 { --accent: #ff7ad4; }

.slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.slide.is-active .slide__media { transform: none; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; }

.slide--01 .slide__media { background: linear-gradient(90deg, #17598c 0%, #21265c 100%); }
.slide--02 .slide__media { background: linear-gradient(90deg, #0552ad 0%, #402e9e 100%); }
.slide--03 .slide__media {
  background: radial-gradient(69.44% 69.44% at 47.22% 50%,
    rgba(242, 51, 178, .72)   0%,
    rgba(193, 66, 186, .7525) 11.25%,
    rgba(144, 82, 194, .785)  22.5%,
    rgba(95, 97, 201, .8175)  33.75%,
    rgba(46, 112, 209, .85)   45%,
    rgba(36, 89, 173, .8875)  58.75%,
    rgba(26, 66, 138, .925)   72.5%,
    rgba(15, 43, 102, .9625)  86.25%,
    rgba(5, 20, 66, 1)        100%);
}

/* scrim so the copy holds contrast over the photography */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg,
    rgba(3, 12, 40, .82) 0%,
    rgba(3, 12, 40, .48) 38%,
    rgba(3, 12, 40, .06) 72%,
    transparent 100%);
}

.slide__copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* staggered rise, keyed off the active state */
.slide__label, .slide__heading, .slide__text {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.slide.is-active .slide__label   { opacity: 1; transform: none; transition-delay: .10s; }
.slide.is-active .slide__heading { opacity: 1; transform: none; transition-delay: .18s; }
.slide.is-active .slide__text    { opacity: 1; transform: none; transition-delay: .26s; }

.slide__label {
  font: 600 14px/17px var(--font-body);
  letter-spacing: 1.4px;
  color: var(--accent);
}
.slide__heading {
  font: 500 clamp(26px, 3.2vw, 42px)/1.16 var(--font-body);
  color: #fff;
  text-wrap: balance;
}
.slide__text {
  font: 400 clamp(15px, 1.25vw, 17px)/1.6 var(--font-body);
  max-width: 58ch;
  color: rgba(255, 255, 255, .82);
}

/* ── Progress rails, overlaid inside the stage ──
   Same grid cell as the slides, pinned to the bottom edge. Bare rails:
   no numbers, no labels, no chevrons. ── */
.slideshow__tabs {
  grid-area: 1 / 1;
  position: relative;
  z-index: 3;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 clamp(28px, 4vw, 60px) clamp(24px, 3.4vw, 50px);
}
.tab {
  position: relative;
  padding: 11px 0;          /* rail is 3px; padding lifts the box to 25px */
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 25px was an easy target to miss with a cursor. Extend to 45px without
   moving the rail: mostly downward, into the stage's empty bottom margin,
   so the overlay never covers the last line of the slide copy above it. */
.tab::before {
  content: '';
  position: absolute;
  inset: -5px 0 -15px;
}
.tab--01 { --fill: #5ac8f5; }
.tab--02 { --fill: #b79dff; }
.tab--03 { --fill: #ff7ad4; }

.tab__rail {
  display: block;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .3);
  transition: background .3s ease;
}
.tab:hover .tab__rail { background: rgba(255, 255, 255, .5); }
/* the page-wide focus ring is a mid blue — invisible on the dark stage */
.tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

.tab__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--fill);
}
.tab.is-active .tab__fill { width: 100%; transition: width .4s ease; }
/* while autoplay runs the fill doubles as a progress bar */
.slideshow.is-playing .tab.is-active .tab__fill {
  width: 0;
  transition: none;
  animation: tab-progress var(--interval, 7000ms) linear forwards;
}
@keyframes tab-progress { to { width: 100%; } }

/* ═══════════════════════ EXPERIENCE ═══════════════════════
   Same card language as the speakers row — cropped media, caption on a
   scrim — on a 12-column grid so the two feature cards (gala, hotel) sit
   half-width and the four island cards run quarter-width beneath. One
   grid, one rule per span. */
.experience {
  padding-block: 48px 80px;
  background: var(--ice);
}
.experience__row { display: flex; flex-direction: column; gap: clamp(30px, 3.4vw, 46px); }
.experience__head { display: flex; flex-direction: column; gap: 12px; }
.experience__eyebrow {
  font: 600 14px/17px var(--font-body);
  letter-spacing: 1.4px;
  color: var(--link);
}
.experience__heading {
  font: 500 clamp(30px, 4.2vw, 54px)/1.12 var(--font-body);
  color: var(--navy-deep);
  text-wrap: balance;
}
.experience__intro {
  max-width: 58ch;
  font: 400 clamp(15px, 1.3vw, 17px)/1.6 var(--font-body);
  color: var(--slate);
}

.experience__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
.exp {
  position: relative;
  overflow: hidden;
  grid-column: span 3;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.exp--feature { grid-column: span 6; aspect-ratio: 16 / 10; }
.exp:hover { transform: translateY(-6px); box-shadow: 0 20px 44px -22px rgba(5, 26, 79, .55); }

/* Placeholder panel — swapped for .exp__photo when artwork lands. */
.exp__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(90, 200, 245, .32) 0%, rgba(90, 200, 245, 0) 60%),
    linear-gradient(168deg, #0d1836 0%, #060b1e 58%, #04070f 100%);
}
.exp__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp__mark {
  font: 600 13px/1 var(--font-body);
  letter-spacing: 3.4px;
  text-indent: 3.4px;
  color: rgba(196, 228, 250, .55);
}
.exp::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
    rgba(3, 12, 40, .82) 0%,
    rgba(3, 12, 40, .38) 38%,
    transparent 66%);
}

.exp__info {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.exp__label {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 1.6px;
  color: rgba(140, 214, 250, .92);
}
.exp__name {
  font: 600 clamp(15px, 1.5vw, 20px)/1.25 var(--font-body);
  letter-spacing: .4px;
  color: #fff;
  text-wrap: balance;
}
.exp__text {
  font: 400 14px/1.5 var(--font-body);
  color: rgba(255, 255, 255, .8);
  max-width: 46ch;
}

/* ═══════════════════════ SPONSORS ═══════════════════════
   Tier hierarchy is carried by card size and density, not colour:
   Diamond largest and fewest, down to Partners & Booth smallest and
   most. Cards are logo stand-ins until real artwork lands. */
.sponsors {
  padding-block: 48px 80px;
  background: var(--ice);
}
.sponsors__row { display: flex; flex-direction: column; gap: clamp(30px, 3.4vw, 46px); }
.sponsors__head { display: flex; flex-direction: column; gap: 12px; }
.sponsors__eyebrow {
  font: 600 14px/17px var(--font-body);
  letter-spacing: 1.4px;
  color: var(--link);
}
.sponsors__heading {
  font: 500 clamp(30px, 4.2vw, 54px)/1.12 var(--font-body);
  color: var(--navy-deep);
  text-wrap: balance;
}

.s-tier { display: flex; flex-direction: column; gap: 14px; }
.s-tier__label {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 13px/1 var(--font-body);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tier, var(--slate));
}
/* rule runs from the label to the right edge */
.s-tier__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(31, 122, 184, .34), rgba(31, 122, 184, 0));
}
.s-tier--diamond  { --tier: #007ab8; }
.s-tier--platinum { --tier: #663bcc; }
.s-tier--gold     { --tier: #a97a1a; }
.s-tier--booth    { --tier: rgba(31, 61, 97, .6); }

.s-tier__grid {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
}
.s-tier--diamond  .s-tier__grid { grid-template-columns: repeat(2, 1fr); }
.s-tier--platinum .s-tier__grid { grid-template-columns: repeat(3, 1fr); }
.s-tier--gold     .s-tier__grid { grid-template-columns: repeat(4, 1fr); }
.s-tier--booth    .s-tier__grid { grid-template-columns: repeat(6, 1fr); }

.s-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  text-align: center;
  border: 1px solid rgba(115, 194, 245, .4);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: var(--slate);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 1px;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}
.s-logo:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 122, 184, .5);
  box-shadow: 0 14px 30px -18px rgba(5, 26, 79, .4);
}
.s-tier--diamond  .s-logo { min-height: 112px; font-size: 21px; }
.s-tier--platinum .s-logo { min-height: 92px;  font-size: 17px; }
.s-tier--gold     .s-logo { min-height: 74px;  font-size: 15px; }
.s-tier--booth    .s-logo { min-height: 58px;  font-size: 12px; letter-spacing: 1.4px; }

/* Unfilled slots — the sealed dark treatment from the TBA speaker cards,
   scaled to the booth tile. Withheld, not missing. */
.s-logo--tba {
  flex-direction: column;
  gap: 3px;
  border-color: rgba(90, 200, 245, .22);
  background:
    radial-gradient(120% 90% at 50% 122%, rgba(90, 200, 245, .28) 0%, rgba(90, 200, 245, 0) 62%),
    linear-gradient(168deg, #0d1836 0%, #060b1e 58%, #04070f 100%);
}
.s-logo--tba:hover { transform: none; box-shadow: none; border-color: rgba(90, 200, 245, .38); }
.s-logo__mark {
  font-size: 12px;
  letter-spacing: 2.4px;
  text-indent: 2.4px;        /* re-centre against the trailing tracking */
  color: rgba(196, 228, 250, .8);
}
.s-logo__label {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .9px;
  color: rgba(196, 228, 250, .5);
}

/* ── Sponsorship enquiry ──
   Sits below the tiers, where a prospective partner has just read a wall
   of TBA. Light panel rather than a dark card: it is an invitation, not
   another withheld slot. */
.s-enquiry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  /* on top of .sponsors__row's own gap — the panel is a change of subject
     from the tiers above it, so it wants a clear break, not a row spacing */
  margin-top: clamp(22px, 3.4vw, 46px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 40px);
  border: 1px solid rgba(115, 194, 245, .48);
  border-radius: 20px;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(90, 200, 245, .16) 0%, rgba(90, 200, 245, 0) 60%),
    rgba(255, 255, 255, .74);
}
.s-enquiry__copy {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s-enquiry__label {
  font: 600 12px/1 var(--font-body);
  letter-spacing: 2px;
  color: var(--link);
}
.s-enquiry__heading {
  font: 600 clamp(20px, 2.2vw, 27px)/1.2 var(--font-body);
  color: var(--navy-deep);
}
.s-enquiry__text {
  max-width: 52ch;
  font: 400 15px/1.6 var(--font-body);
  color: rgba(31, 61, 97, .85);
}

/* The address is the button. Shown in full so it can be read or copied
   without opening a mail client — plenty of people will not have one
   wired up, and a bare mailto: would be a dead end for them. */
.s-enquiry__mail {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 26px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.s-enquiry__mail:hover,
.s-enquiry__mail:focus-visible {
  background: #0a2277;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(4, 16, 88, .5);
}
.s-enquiry__mail-label {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.s-enquiry__mail-addr {
  font: 600 clamp(15px, 1.5vw, 17px)/1.3 var(--font-body);
  letter-spacing: .2px;
  /* the address must never be the thing that forces a horizontal scroll */
  overflow-wrap: anywhere;
}

/* ═══════════════════════ 08 CLOSING CTA ═══════════════════════ */
.cta {
  padding-block: 120px 36px;   /* top padding is the blend zone */
  background: #f2fbff;
}
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* source has its wave detail in the lower half; the 180° flip lifts it
     to the top of the footer, so anchor the crop there */
  object-position: center bottom;
  transform: rotate(180deg);
  z-index: 0;
}
.cta__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(242, 250, 255, .94) 0%,
    rgba(227, 245, 255, .72) 58%,
    rgba(194, 240, 250, .28) 100%);
}
/* Seamless join: paint the sponsors band's exact gradient across the top
   of the footer and mask it out downward, so the wave emerges from the
   previous section instead of starting at a hard edge. */
.cta__blend {
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  z-index: 1;
  pointer-events: none;
  background: var(--ice);
  -webkit-mask-image: linear-gradient(180deg, #000 12%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 12%, transparent 100%);
}

.cta__row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 90px);
}
.cta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
}
.cta__eyebrow {
  font: 600 13px/normal var(--font-body);
  letter-spacing: 2.08px;
  color: #1a4d7d;
}
.cta__heading {
  font: 500 clamp(32px, 3.6vw, 48px)/1.1 var(--font-body);
  color: var(--navy-ink);
}
.cta__sub {
  max-width: 42ch;
  font: 400 16px/1.6 var(--font-body);
  color: rgba(20, 61, 110, .85);
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 13px 26px;
  border-radius: 10px;
  background: var(--navy);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 1.5px;
  color: #fff;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-solid:hover,
.btn-solid:focus-visible {
  background: #0a2277;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(4, 16, 88, .5);
}

/* three labelled columns: explore / social / summit facts */
.cta__info {
  display: flex;
  gap: clamp(36px, 4.5vw, 70px);
  padding-top: 8px;
}
.cta__col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta__label {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(26, 77, 125, .62);
}
.cta__nav { display: flex; flex-direction: column; gap: 11px; }
.cta__nav a {
  font: 600 13px/1.2 var(--font-body);
  color: var(--navy-deep);
  transition: color .25s ease;
}
.cta__nav a:hover, .cta__nav a:focus-visible { color: #0085c2; }

.cta__socials { display: flex; gap: 14px; }
.cta__socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(4, 16, 88, .28);
  border-radius: 50%;
  color: var(--navy-deep);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.cta__socials a:hover,
.cta__socials a:focus-visible {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

.cta__when {
  font: 600 13px/1.7 var(--font-body);
  letter-spacing: .6px;
  color: var(--navy-deep);
}

/* baseline bar */
.cta__base {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 22px;
  border-top: 1px solid rgba(31, 122, 184, .22);
}
.cta__brand {
  width: 90px;
  height: auto;
  object-fit: contain;
}
.cta__legal {
  font: 500 11px/1.5 var(--font-body);
  letter-spacing: .6px;
  color: rgba(26, 77, 125, .66);
}
/* underlined so it reads as a link at 11px, where colour alone is too weak */
.cta__legal a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta__legal a:hover { color: #0085c2; }

/* ═══════════════════════════════════════════════════════════════
   Responsive — the 1440 composition scales, then reflows.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fluid columns: the inner blocks flex to the content column instead of
 holding their Figma pixel widths, so a wider viewport widens the layout
 rather than leaving dead space down the right-hand side. ── */
.opening__row     { gap: clamp(40px, 7vw, 110px); }
.opening__statement, .opening__context { width: auto; flex: 1 1 0; min-width: 0; }
.opening__ghost, .opening__body { width: 100%; }







/* ── ≤1080px: editorial rows lose their fixed heights, cards wrap ── */
@media (max-width: 1080px) {
  .cta__row  { flex-direction: column; }
  .cta__info { flex-wrap: wrap; padding-top: 0; }

  .s-tier--gold  .s-tier__grid { grid-template-columns: repeat(2, 1fr); }
  .s-tier--booth .s-tier__grid { grid-template-columns: repeat(3, 1fr); }

  .exp { grid-column: span 6; }        /* island cards pair up */

  .speakers__grid { grid-template-columns: repeat(3, 1fr); }
  .spk--live { grid-column: 1 / -1; height: clamp(360px, 44vw, 460px); }
  .spk { height: clamp(240px, 30vw, 340px); }
  .spk--live .spk__photo { object-position: center 22%; }





}

/* ── ≤820px: single-column stacks, off-canvas nav ── */
@media (max-width: 820px) {
  .hero { height: auto; min-height: 100svh; padding-bottom: 60px; }
  .hero__fade { top: 55%; bottom: 0; }

  .topbar { padding: 12px 24px; }
  .topbar__logo img { width: 92px; }

  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: -1;               /* under the bar itself, so the logo stays on top */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 76px 24px 26px;
    background: rgba(236, 248, 255, .92);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 24px 44px -24px rgba(5, 26, 79, .35);
    transform: translateY(-105%);
    transition: transform .38s cubic-bezier(.22,.61,.36,1);
  }
  .nav.is-open { transform: none; }
  .nav__link { padding: 14px 0; font-size: 13px; letter-spacing: 1.6px; }
  .nav__link::after { bottom: 8px; }
  .btn-register { align-self: flex-start; margin-top: 14px; }

  .opening__row { flex-direction: column; gap: 40px; }
  .opening__statement, .opening__context { width: 100%; }

  .exp--feature { grid-column: 1 / -1; aspect-ratio: 16 / 11; }

  .chapters { padding-block: 40px 60px; }
  .slide { aspect-ratio: 4 / 3; min-height: 460px; }
  .slide__copy { max-width: none; }
  .slideshow__tabs { gap: 8px; }



}

/* ── ≤560px: phone ── */
@media (max-width: 560px) {
  .hero { --u: calc(100vw / 860); }
  .slide { aspect-ratio: 4 / 5; }
  .exp--feature { aspect-ratio: 4 / 3; }
  .speakers__grid { grid-template-columns: repeat(2, 1fr); }
  .spk { height: clamp(200px, 46vw, 260px); }
  .spk--live { height: clamp(300px, 80vw, 380px); }
  .s-tier--diamond .s-tier__grid, .s-tier--platinum .s-tier__grid { grid-template-columns: 1fr; }
  .s-tier--booth .s-tier__grid { grid-template-columns: repeat(2, 1fr); }
  .s-tier--diamond .s-logo { min-height: 88px; font-size: 18px; }
  /* the mail button spans the panel rather than sitting as a stub */
  .s-enquiry { flex-direction: column; align-items: stretch; }
  .s-enquiry__mail { flex: 1 1 auto; }
  .cta { padding-block: 90px 28px; }
  .cta__base { flex-direction: column; align-items: flex-start; gap: 10px; }
  .opening { padding-block: 36px; }
  .opening__headline { font-size: clamp(28px, 8.4vw, 40px); }
  .opening__ghost    { font-size: clamp(40px, 12vw, 56px); }
  .opening__stats    { gap: 16px 28px; }
  .stat              { min-width: 116px; }
  .stat dt           { font-size: 34px; letter-spacing: -1px; }
}

/* ── ≤860px: keep the hero lockup legible instead of shrinking to nothing ── */
@media (max-width: 860px) {
  .hero { --u: calc(100vw / 860); }
}


/* ═══════════════════ GSAP layer (motion.js) ═══════════════════ */
/* Loading veil. If GSAP never runs, the keyframe below clears it on its
   own; motion.js takes over the exit when the choreography is live. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--ice);
  pointer-events: none;
  animation: veil-out .6s ease 2.4s forwards;
}
.veil__logo { opacity: 0; transform: translateY(14px); }
html.has-gsap .veil { animation: none; }
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }

/* Lenis owns scrolling when active; native smooth would double-animate */
html.lenis { scroll-behavior: auto; }

/* native anchor fallback lands sections clear of the fixed bar */
#opening, #speakers, #chapters, #partners, #cta { scroll-margin-top: 84px; }

/* speaker tilt: GSAP drives the card transform, so CSS steps back from it */
html.has-gsap .speakers__grid { perspective: 1100px; }
html.has-gsap .spk { transform-style: preserve-3d; transition: box-shadow .5s ease; }
html.has-gsap .spk:hover { transform: none; }

/* ─────────────────── Reduced motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}