/*
 * Body is a bare presentational atom: section-specific styling is owned by
 * the consuming component via --body-* custom properties set on an
 * ancestor, which these rules read.
 */

._body_tge24_7 {
  color: var(--body-color, inherit);
  font-size-adjust: from-font;
  font-family: var(--body-font-family, var(--font-inter));
  font-size: var(--body-font-size, inherit);
  font-weight: var(--body-font-weight, inherit);
  line-height: var(--body-line-height, inherit);
  letter-spacing: var(--body-letter-spacing, inherit);
  text-transform: var(--body-text-transform, inherit);
}

/*
 * The eyebrow variants are the exception: a small-caps kicker treatment
 * that repeats above headings across sections, so it lives here rather
 * than being re-declared per caller. A caller's --body-* tokens still win.
 */

._eyebrow_tge24_24,
._eyebrowAccent_tge24_25 {
  font-family: var(--body-font-family, var(--font-mono));
  font-size: var(--body-font-size, var(--step--2));
  font-weight: var(--body-font-weight, 400);
  letter-spacing: var(--body-letter-spacing, 0.2em);
  text-transform: var(--body-text-transform, uppercase);
}

._eyebrow_tge24_24 {
  color: var(--body-color, var(--blue-bright));
}

/* Same treatment one step paler -- the mockup used a green here ("
   .eyebrow.g"), which the all-blue key-visual palette replaces with the
   soft end of the blue ramp rather than a second hue. */

._eyebrowAccent_tge24_25 {
  color: var(--body-color, var(--blue-soft));
}
/*
 * BrandPanel: the footer's own-brand identity block -- organiser wordmark,
 * a tagline, then a grid of the organisation's own masthead marks. The grid
 * (not a wrapping row) exists because five marks of five different widths
 * won't fit one line in a narrow footer column; three columns of
 * max-content produce a designed three-and-two instead of an uneven wrap.
 */
._brandPanel_l1cib_8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

._brandPanelLogo_l1cib_14 {
  display: block;
  width: auto;
  --image-height: clamp(38px, 3.4vw, 52px);
}

._brandPanelTagline_l1cib_20 {
  margin-top: var(--sp-m);
  max-width: 38ch;
  --body-font-size: var(--step--1);
  --body-color: var(--t-46);
  --body-line-height: 1.7;
}

._brandPanelMastheads_l1cib_28 {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  align-items: center;
  justify-items: start;
  gap: clamp(0.85rem, 1.6vw, 1.4rem) clamp(0.9rem, 2.4vw, 2rem);
  margin-top: var(--sp-m);
}

@media (max-width: 1180px) {

._brandPanelMastheads_l1cib_28 {
    grid-template-columns: repeat(3, max-content);
}
  }

._brandPanelMastheadWrap_l1cib_41 {
  display: block;
  width: auto;
  opacity: 0.78;
}

._brandPanelMastheadWrap_l1cib_41[data-mark="st"],._brandPanelMastheadWrap_l1cib_41[data-mark="bt"],._brandPanelMastheadWrap_l1cib_41[data-mark="bh"] {
    --image-height: clamp(11px, 1vw, 15px);
  }

._brandPanelMastheadWrap_l1cib_41[data-mark="tm"] {
    --image-height: clamp(16px, 1.45vw, 22px);
  }

._brandPanelMastheadWrap_l1cib_41[data-mark="zb"] {
    --image-height: clamp(20px, 1.8vw, 27px);
  }
/* Soft radial-gradient blob field, run through a shared displacement filter
   (defined inline in the SVG) so the blobs read with warped, organic edges
   instead of as clean circles. In the source mockup this layer has a base
   state (.kv-warp) where each blob drifts on its own keyframe, and a
   ".hero.ascend .kv-warp" override that this component's only caller
   (the "ascend" hero) always applies: it disables the per-blob animation and
   drifts the whole layer as one transform instead, because animating five
   ellipses individually re-runs the (expensive) displacement filter on every
   frame and stutters under scroll. This component has no state/variant prop
   -- see GradientField.tsx -- so the two states are collapsed into the one
   always-on look below rather than shipping keyframes that never run. */
._gradientField_cqs6w_12 {
  position: absolute;
  inset: -14%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.34;
  will-change: transform;
  animation: _gradientFieldDrift_cqs6w_1 54s var(--ease) infinite alternate;
}

._gradientField_cqs6w_12 svg {
  width: 100%;
  height: 100%;
}

._gradientFieldGroup_cqs6w_27 {
  filter: url(#heroWarp);
}

._gradientFieldBlob_cqs6w_31 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes _gradientFieldDrift_cqs6w_1 {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }
  100% {
    transform: translate3d(2.5%, 2%, 0) scale(1.09);
  }
}

/* Displacement mapping is costly on mobile GPUs -- fall back to a plain
   blur below 680px, matching the mockup's responsive fallback. */
@media (max-width: 680px) {
  ._gradientFieldGroup_cqs6w_27 {
    filter: blur(40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._gradientFieldGroup_cqs6w_27 {
    filter: blur(46px);
  }
}
/*
 * Heading is a bare presentational atom. It carries no classNames of its
 * own beyond this base rule -- section-specific visual styling (e.g. the
 * hero title) is owned by the consuming component via --heading-* custom
 * properties set on an ancestor, which this rule reads.
 */

._heading_1pw4l_8 {
  margin: var(--heading-margin, 0);
  max-width: var(--heading-max-width, inherit);
  color: var(--heading-color, inherit);
  font-family: var(--heading-font-family, inherit);
  font-size-adjust: from-font;
  font-size: var(--heading-font-size, inherit);
  font-weight: var(--heading-font-weight, inherit);
  line-height: var(--heading-line-height, inherit);
  letter-spacing: var(--heading-letter-spacing, inherit);
  text-transform: var(--heading-text-transform, inherit);
}

/*
 * The one exception is the "visuallyHidden" variant below: the standard
 * screen-reader-only clip pattern, used when a heading exists for the
 * document outline/a11y tree but a different element is the visible label
 * -- reusable as-is on any future section, so it is baked into Heading
 * itself as an additive, opt-in variant rather than re-declared per caller.
 */

._visuallyHidden_1pw4l_29 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
._lightbox_1klaa_1 {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 5rem);
  background: rgba(0, 10, 16, 0.94);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

._lightboxOpen_1klaa_14 {
  opacity: 1;
}

._lightboxFig_1klaa_18 {
  margin: 0;
  width: min(100%, 1600px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
}

._lightboxFig_1klaa_18 img {
  max-width: 100%;
  max-height: calc(100vh - 13rem);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  display: block;
}

._lightboxFig_1klaa_18 video {
  width: 100%;
  max-height: calc(100vh - 12rem);
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

._lightboxFig_1klaa_18 figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  text-align: center;
  font-size: var(--step--1);
  color: var(--t-62);
  max-width: 70ch;
  margin-inline: auto;
  line-height: 1.55;
}

._lightboxFig_1klaa_18 figcaption b {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.018em;
  color: var(--t-100);
}

._lightboxCount_1klaa_65 {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--t-46);
}

._lightboxNav_1klaa_76 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  border: 1px solid var(--hair-strong);
  color: var(--t-100);
  background: rgba(255, 255, 255, 0.05);
  transition: 0.3s var(--ease);
}

._lightboxNav_1klaa_76:hover {
  border-color: var(--cyan);
  background: rgba(79, 209, 240, 0.12);
}

._lightboxPrev_1klaa_96 {
  left: clamp(0.75rem, 2.5vw, 2rem);
}

._lightboxNext_1klaa_100 {
  right: clamp(0.75rem, 2.5vw, 2rem);
}

._lightboxClose_1klaa_104 {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 2rem);
  right: clamp(0.75rem, 2.5vw, 2rem);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  display: grid;
  place-items: center;
  transition: 0.3s var(--ease);
}

._lightboxClose_1klaa_104:hover {
  border-color: var(--cyan);
  background: rgba(79, 209, 240, 0.1);
}

._lightboxClose_1klaa_104 span {
  position: absolute;
  width: 17px;
  height: 1.5px;
  background: var(--t-100);
  border-radius: 2px;
}

._lightboxClose_1klaa_104 span:first-child {
  transform: rotate(45deg);
}

._lightboxClose_1klaa_104 span:last-child {
  transform: rotate(-45deg);
}

@media (max-width: 680px) {
  ._lightbox_1klaa_1 {
    padding: clamp(1rem, 4vw, 3rem);
  }

  ._lightboxFig_1klaa_18 img {
    max-height: calc(100vh - 15rem);
  }

  ._lightboxFig_1klaa_18 figcaption {
    padding-inline: var(--sp-s);
  }
}
._mediaTile_104vs_1 {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  flex: none;
  background: var(--ink-800);
  border: 0;
  height: clamp(230px, 20vw, 360px);
  aspect-ratio: 3 / 2;
  margin-right: clamp(5px, 0.6vw, 10px);
}

._mediaTileTall_104vs_14 {
  aspect-ratio: 2 / 3;
}

._mediaTileWide_104vs_18 {
  aspect-ratio: 16 / 9;
}

._mediaTile_104vs_1 img,
._mediaTile_104vs_1 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

._mediaTile_104vs_1:hover img,
._mediaTile_104vs_1:focus-visible img {
  transform: scale(1.04);
}

._mediaTileWide_104vs_18::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 18, 27, 0.22) 0%,
    rgba(0, 18, 27, 0) 38%,
    rgba(0, 18, 27, 0) 62%,
    rgba(0, 18, 27, 0.42)
  );
}

._mediaTileWide_104vs_18::after {
  content: none;
}

._mediaTilePlay_104vs_55 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(40px, 3.6vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(0, 18, 27, 0.42);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition:
    transform 0.3s var(--ease),
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

._mediaTilePlay_104vs_55::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

._mediaTileWide_104vs_18:hover ._mediaTilePlay_104vs_55,
._mediaTileWide_104vs_18:focus-visible ._mediaTilePlay_104vs_55 {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 18, 27, 0.62);
  border-color: #4fd1f0;
}

._mediaTileTag_104vs_93 {
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: clamp(0.6944rem, 0.679rem + 0.0769vw, 0.7383rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-100);
  padding: 0.32em 0.66em;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(0, 18, 27, 0.5);
  backdrop-filter: blur(6px);
}

._mediaTile_104vs_1::after {
  content: "";
  position: absolute;
  inset: auto 0.55rem 0.55rem auto;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 10px no-repeat;
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

._mediaTile_104vs_1:hover::after,
._mediaTile_104vs_1:focus-visible::after {
  opacity: 1;
  transform: none;
}

._mediaTile_104vs_1:focus-visible {
  outline: 2px solid #4fd1f0;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  ._mediaTile_104vs_1 img {
    transition: none;
  }

  ._mediaTile_104vs_1:hover img {
    transform: none;
  }
}
/* ---------- the strip along the foot of the fold ----------
   Full-bleed, and deliberately not a scroll container: it clips, and the
   track inside it moves under its own animation -- a scrollable strip that
   also auto-scrolls would fight the user's own drag gesture. It also
   carries the section's own foot-of-fold placement (margin-top / z-index),
   folded in from the mockup's ".hero.ascend .hl" ancestor-state rule since
   that "ascend" state belongs to the surrounding hero, not this component. */
._highlightsStrip_ze17y_8 {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5px, 0.6vw, 10px);
  margin-top: clamp(3rem, 6vh, 5rem);
  z-index: 7;
  cursor: grab;
  touch-action: pan-y;
}
._highlightsStrip_ze17y_8._highlightsStripHeld_ze17y_17 {
    cursor: grabbing;
    user-select: none;
  }
._highlightsStrip_ze17y_8._highlightsStripHeld_ze17y_17 * {
      user-select: none;
    }
/* Pausing on hover is not decoration: the frames are buttons, and a
     target that slides out from under the cursor cannot be clicked
     reliably. Focus pauses it too, for anyone tabbing through. */
._highlightsStrip_ze17y_8:hover ._highlightsStripTrack_ze17y_29,._highlightsStrip_ze17y_8:focus-within ._highlightsStripTrack_ze17y_29 {
    animation-play-state: paused;
  }
/* Once a drag has just finished, hovering (the pointer is already over
     the strip) should not immediately re-pause it -- that would look like
     the ticker refusing to restart. The affordance clears again as soon as
     the pointer actually leaves the strip. */
._highlightsStrip_ze17y_8._highlightsStripResumed_ze17y_38:hover ._highlightsStripTrack_ze17y_29,._highlightsStrip_ze17y_8._highlightsStripResumed_ze17y_38:focus-within ._highlightsStripTrack_ze17y_29 {
    animation-play-state: running;
  }
@media (prefers-reduced-motion: reduce) {
._highlightsStrip_ze17y_8 {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
  }

/* The travel is exactly -50%: the track holds the run twice, so at the end
   of a cycle the second copy is sitting where the first started and the
   next cycle is indistinguishable from the last. The duration is a rate --
   23 frames at roughly a frame every 4.8 seconds. */
._highlightsStripTrack_ze17y_29 {
  display: flex;
  align-items: center;
  width: max-content;
  animation: _highlightsStripRun_ze17y_1 111s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
._highlightsStripTrack_ze17y_29 {
    /* the ticker stops, and the strip becomes an ordinary sideways
       scroller so the frames past the fold are still reachable */
    animation: none;
}
  }

@keyframes _highlightsStripRun_ze17y_1 {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
._legalBar_yz37i_1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-xs) var(--sp-l);
  flex-wrap: wrap;
  border-top: 1px solid var(--hair);
  padding-block: var(--sp-m) var(--sp-xl);
}

._legalBarLinks_yz37i_11 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  font-size: var(--step--2);
  color: var(--t-46);
}

._legalBarLinks_yz37i_11 a {
    transition: color 0.3s var(--ease);
  }

:is(._legalBarLinks_yz37i_11 a):hover {
      color: var(--cyan-bright);
    }

._legalBarLegal_yz37i_27 {
  max-width: 74ch;
  font-size: var(--step--2);
  line-height: 1.8;
  color: var(--t-46);
}

._legalBarLegal_yz37i_27 a {
    color: var(--t-62);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

:is(._legalBarLegal_yz37i_27 a):hover {
      color: var(--cyan-bright);
    }
._mediaCard_118l0_1 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Containing block for the title link's stretched ::after. */
  position: relative;
  /* Keeps the five columns near-uniform across headline lengths. */
  min-height: clamp(260px, 24vw, 320px);
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color 0.35s var(--ease),
    transform 0.35s var(--ease),
    background 0.35s var(--ease);
}

._mediaCard_118l0_1:hover {
    border-color: var(--hair-strong);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
  }

/* --brand comes from the shared [data-masthead] rules in global.css. */

/* The article photo, or the brand tile when there is none. */
._mediaCardMedia_118l0_26 {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--brand);
  /* Keeps the z-indexes below local to this tile. */
  isolation: isolate;

  /* Image sets object-fit: contain on mobile, which letterboxes. */
}
._mediaCardMedia_118l0_26 > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
    /* Without these the hover transform paints above the scrim. */
    position: relative;
    z-index: 0;
  }
/* Bottom-weighted scrim: carries the wordmark's contrast over the photo. */
._mediaCardMedia_118l0_26::before {
    content: "";
    position: absolute;
    /* Bled past the tile so no edge meets the image. */
    inset: -100px;
    z-index: 1;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.28) 34%,
      rgba(0, 0, 0, 0) 68%
    );
  }
/* No photo: brand colour, centred mark, decorative gradient. */
._mediaCardMedia_118l0_26[data-placeholder="true"] {
    display: grid;
    place-items: center;
  }
._mediaCardMedia_118l0_26[data-placeholder="true"]::before {
      background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.16),
        rgba(0, 0, 0, 0.2)
      );
    }
@media (max-width: 680px) {
._mediaCardMedia_118l0_26 {
    aspect-ratio: 2 / 1;
}
  }

._mediaCard_118l0_1:hover ._mediaCardMedia_118l0_26 > img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  ._mediaCardMedia_118l0_26 > img {
    transition: none;
  }

  ._mediaCard_118l0_1:hover ._mediaCardMedia_118l0_26 > img {
    transform: none;
  }
}

/* Sized by width through this wrapper; Image takes no styling prop. */
._mediaCardWordmark_118l0_94 {
  /* Corner overlay over a photo; centred on a brand tile. */
  position: absolute;
  left: var(--sp-s);
  bottom: var(--sp-s);
  /* Above the scrim. */
  z-index: 2;
  display: block;
  width: min(52%, clamp(76px, 7.6vw, 116px));

  /* Stacked lockups, held back so they do not tower. */
}
._mediaCard_118l0_1[data-masthead="zb"] ._mediaCardWordmark_118l0_94 {
    width: min(28%, clamp(40px, 3.9vw, 60px));
  }
._mediaCard_118l0_1[data-masthead="tm"] ._mediaCardWordmark_118l0_94 {
    width: min(36%, clamp(52px, 5.1vw, 78px));
  }
/* Larger when centred: the mark is the tile's whole subject. */
._mediaCardMedia_118l0_26[data-placeholder="true"] ._mediaCardWordmark_118l0_94 {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(74%, clamp(104px, 11vw, 168px));
  }
._mediaCard_118l0_1[data-masthead="zb"] ._mediaCardMedia_118l0_26[data-placeholder="true"] ._mediaCardWordmark_118l0_94 {
    width: min(40%, clamp(56px, 5.6vw, 86px));
  }
._mediaCard_118l0_1[data-masthead="tm"] ._mediaCardMedia_118l0_26[data-placeholder="true"] ._mediaCardWordmark_118l0_94 {
    width: min(52%, clamp(74px, 7.4vw, 112px));
  }

._mediaCardBody_118l0_130 {
  padding: var(--sp-s) var(--sp-s) var(--sp-m);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.55em;
}

@media (max-width: 680px) {

._mediaCardBody_118l0_130 {
    padding: var(--sp-s);
}
  }

._mediaCardPub_118l0_142 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-46);
}

/* The H3 reads these tokens from here, scoped per card. */
._mediaCardTitle_118l0_151 {
  --heading-font-family: var(--font-serif);
  --heading-font-weight: 600;
  --heading-font-size: var(--step-0);
  --heading-line-height: 1.32;
  --heading-letter-spacing: -0.01em;
  --heading-color: var(--t-80);

  /* Real headlines vary; clamped to keep card heights even. */
}
._mediaCardTitle_118l0_151 h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
/* Stretched link: ::after covers the card, headline stays the name. */
._mediaCardTitle_118l0_151 h3 a {
    color: inherit;
    text-decoration: none;
  }
:is(._mediaCardTitle_118l0_151 h3 a)::after {
      content: "";
      position: absolute;
      inset: 0;
    }

._mediaCard_118l0_1:hover ._mediaCardTitle_118l0_151 {
  --heading-color: var(--t-100);
}
._prismFan_vccop_1 {
  position: absolute;
  left: 36%;
  top: 11.5%;
  width: 190%;
  height: 132%;
  transform: translateX(-50%);
  z-index: 2;
}

._prismFan_vccop_1 svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

._prismFanWedgeLight_vccop_17 {
  opacity: 0;
  animation: _prismFanWedgePulse_vccop_1 7.2s var(--ease) infinite alternate;
  animation-delay: var(--d);
}

@keyframes _prismFanWedgePulse_vccop_1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: var(--a);
  }
}

/* light sweeping outward from the apex, clipped to the fan */
._prismFanSweep_vccop_33 {
  transform-box: view-box;
  transform-origin: 500px 0;
  animation: _prismFanSweepOut_vccop_1 8.5s var(--ease) infinite;
}

@keyframes _prismFanSweepOut_vccop_1 {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  62% {
    transform: scale(1.75);
    opacity: 0;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* the bloom sitting on the apex itself */
._prismFanApex_vccop_58 {
  transform-box: view-box;
  transform-origin: 500px 0;
  animation: _prismFanApexBreathe_vccop_1 4.6s var(--ease) infinite alternate;
}

@keyframes _prismFanApexBreathe_vccop_1 {
  0% {
    opacity: 0.55;
    transform: scale(0.86);
  }
  100% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@media (max-width: 900px) {
  ._prismFan_vccop_1 {
    left: 29%;
    top: 5%;
    width: 290%;
    height: 120%;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._prismFanWedgeLight_vccop_17,
  ._prismFanSweep_vccop_33,
  ._prismFanApex_vccop_58 {
    animation: none !important;
  }

  ._prismFanWedgeLight_vccop_17 {
    opacity: calc(var(--a) * 0.5);
  }

  ._prismFanSweep_vccop_33 {
    opacity: 0;
  }
}
/*
 * NewsCard: a full-bleed photo, serif headline, and byline/date footer.
 * Reveals with a rise-in animation staggered by grid position -- the
 * consuming grid renders cards in a fixed relative order, so the stagger is
 * expressed with :nth-child rather than a JS-computed style/prop (see
 * CLAUDE.md rule 7). Capped at the ninth card and beyond, matching the
 * source mockup's Math.min(i, 8) * 45ms.
 */
._newsCard_1hddh_9 {
  display: flex;
  flex-direction: column;
  /* Containing block for the headline link's stretched ::after. */
  position: relative;
  min-height: clamp(260px, 24vw, 320px);
  background: var(--ink-900);
  border: 1px solid var(--hair);
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease);
  opacity: 0;
  transform: translateY(14px);
  animation: _newsCardRise_1hddh_1 0.6s var(--ease) forwards;
}
._newsCard_1hddh_9:hover {
    background: var(--ink-800);
    border-color: var(--hair-strong);
  }
._newsCard_1hddh_9:nth-child(1) {
    animation-delay: 0ms;
  }
._newsCard_1hddh_9:nth-child(2) {
    animation-delay: 45ms;
  }
._newsCard_1hddh_9:nth-child(3) {
    animation-delay: 90ms;
  }
._newsCard_1hddh_9:nth-child(4) {
    animation-delay: 135ms;
  }
._newsCard_1hddh_9:nth-child(5) {
    animation-delay: 180ms;
  }
._newsCard_1hddh_9:nth-child(6) {
    animation-delay: 225ms;
  }
._newsCard_1hddh_9:nth-child(7) {
    animation-delay: 270ms;
  }
._newsCard_1hddh_9:nth-child(8) {
    animation-delay: 315ms;
  }
._newsCard_1hddh_9:nth-child(n + 9) {
    animation-delay: 360ms;
  }

@keyframes _newsCardRise_1hddh_1 {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._newsCard_1hddh_9 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

._newsCardMedia_1hddh_81 {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ink-800);
}

._newsCardMedia_1hddh_81 > img {
    height: 100%;
    object-fit: cover;
    transition:
      transform 0.6s var(--ease),
      opacity 0.4s var(--ease);
  }

/* No photograph: the masthead's own colour with its wordmark centred, the
     same stand-in MediaCard uses. --brand comes from the [data-masthead] rules
     in global.css; the plain fill is the fallback for a card given no
     masthead. */

._newsCardMedia_1hddh_81[data-placeholder="true"] {
    display: grid;
    place-items: center;
    background: var(--brand, var(--ink-800));
  }

._newsCardMedia_1hddh_81[data-placeholder="true"]::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.16),
        rgba(0, 0, 0, 0.2)
      );
    }

/* Sized by width through this wrapper, since Image takes no styling prop. The
   stacked Zaobao and Tamil Murasu lockups are held back so they do not tower
   over the single-line marks. */
._newsCardWordmark_1hddh_121 {
  position: relative;
  display: block;
  width: min(62%, clamp(96px, 10vw, 150px));
}
._newsCard_1hddh_9[data-masthead="zb"] ._newsCardWordmark_1hddh_121 {
    width: min(34%, clamp(52px, 5vw, 78px));
  }
._newsCard_1hddh_9[data-masthead="tm"] ._newsCardWordmark_1hddh_121 {
    width: min(44%, clamp(68px, 6.6vw, 100px));
  }

._newsCard_1hddh_9:hover ._newsCardMedia_1hddh_81 > img {
  transform: scale(1.04);
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  ._newsCardMedia_1hddh_81 > img {
    transition: none;
  }

  ._newsCard_1hddh_9:hover ._newsCardMedia_1hddh_81 > img {
    transform: none;
  }
}

._newsCardBody_1hddh_150 {
  padding: var(--sp-m);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  --heading-margin: 0;
  --heading-font-family: var(--font-serif);
  --heading-font-weight: 600;
  --heading-font-size: var(--step-1);
  --heading-line-height: 1.26;
  --heading-letter-spacing: -0.012em;
  --heading-color: #fff;

  /*
   * Stretched link. The anchor keeps the headline as its accessible name, but
   * its ::after covers the whole card so the entire surface is clickable.
   * The focus ring follows the anchor's own box, i.e. the headline text.
   */
}

._newsCardBody_1hddh_150 h3 a {
    color: inherit;
    text-decoration: none;
  }

:is(._newsCardBody_1hddh_150 h3 a)::after {
      content: "";
      position: absolute;
      inset: 0;
    }

._newsCardFoot_1hddh_181 {
  margin-top: auto;
  padding-top: var(--sp-m);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-s);
  border-top: 1px solid var(--hair);
  font-family: var(--font-inter);
  font-size: var(--step--1);
  color: var(--t-46);
}

._newsCardFoot_1hddh_181 time {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.06em;
  }

._newsCardBy_1hddh_200 {
  color: var(--t-80);
}
/* Each masthead's header pins under the nav for as long as you are inside
   that masthead's run, then the next one pushes it out. Sticky is bounded by
   .publicationGroup, which is exactly the run it belongs to. */
._publicationGroup_1kv6u_3 + ._publicationGroup_1kv6u_3 {
  margin-top: var(--sp-2xl);
}

._publicationGroupHead_1kv6u_8 {
  position: sticky;
  top: var(--nav-h, 6.9rem);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-s) 0;
  background: rgba(0, 18, 27, 0.88);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hair-strong);
}

@media (max-width: 680px) {

._publicationGroupHead_1kv6u_8 {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

    ._publicationGroupHead_1kv6u_8::-webkit-scrollbar {
      display: none;
    }
  }

@media (min-width: 901px) {

._publicationGroupHead_1kv6u_8 {
    top: var(--nav-h-mobile-up);
}
  }

._publicationGroupMark_1kv6u_36 {
  width: clamp(26px, 2.4vw, 34px);
  aspect-ratio: 1;
  flex: none;
  display: block;
  border-radius: 6px;
  overflow: hidden;
}

._publicationGroupName_1kv6u_45 {
  --heading-font-family: var(--font-primary);
  --heading-font-weight: 700;
  --heading-font-size: var(--step-1);
  --heading-line-height: 1.2;
  --heading-letter-spacing: -0.018em;
  --heading-color: var(--t-100);
}

@media (max-width: 680px) {

._publicationGroupName_1kv6u_45 {
    flex: none;
    white-space: nowrap;
}
  }

._publicationGroupCta_1kv6u_59 {
  margin-left: auto;
  flex: none;
  display: inline-flex;
}

@media (max-width: 680px) {

._publicationGroupCta_1kv6u_59 {
    padding-left: var(--sp-xs);
}
  }

._publicationGroupCta_1kv6u_59 a {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan-bright);
    border-bottom: 1px solid rgba(79, 209, 240, 0.38);
    padding-bottom: 0.3em;
    transition:
      color 0.3s var(--ease),
      border-color 0.3s var(--ease);
  }

:is(._publicationGroupCta_1kv6u_59 a)::after {
      content: "\2192";
      transition: transform 0.3s var(--ease);
    }

:is(._publicationGroupCta_1kv6u_59 a):hover {
      color: #fff;
      border-bottom-color: var(--cyan-bright);
    }

:is(._publicationGroupCta_1kv6u_59 a):hover::after {
        transform: translateX(3px);
      }

._publicationGroupGrid_1kv6u_99 {
  margin-top: var(--sp-s);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-m);
}

@media (max-width: 1080px) {

._publicationGroupGrid_1kv6u_99 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
  }

@media (max-width: 680px) {

._publicationGroupGrid_1kv6u_99 {
    grid-template-columns: minmax(0, 1fr);
}
  }

._publicationGroupGrid_1kv6u_99[data-grid-variant="hairline"] {
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
  }
._scheduleRow_1e977_1 {
  display: grid;
  grid-template-columns: clamp(80px, 8vw, 132px) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-m);
  padding: var(--sp-m) 0;
  border-bottom: 1px solid var(--hair);
}

@media (max-width: 999px) {

._scheduleRow_1e977_1 {
    grid-template-columns: 1fr;
    gap: var(--sp-s);
}
  }

._scheduleRowTime_1e977_15 {
  display: block;
  padding-top: 0.18em;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--cyan-bright);
}

@media (max-width: 999px) {

._scheduleRowTime_1e977_15 {
    padding-top: 0;
}
  }

._scheduleRowTitle_1e977_28 {
  display: block;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--t-62);
}
/* This is future CSS syntax following the Custom Media Specification. */
/* Compiled down with postcss-custom-media. */
/* https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media */
._disclosureButton_a5gp1_3 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  width: 100%;
  gap: var(--sp-s);
  padding: var(--sp-m) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.35s var(--ease);
}
._disclosureButton_a5gp1_3:hover {
    background: rgba(255, 255, 255, 0.022);
  }

@media (min-width: 1000px) {
  ._disclosureButton_a5gp1_3 {
    grid-template-columns: clamp(80px, 8vw, 132px) minmax(0, 1fr) auto;
    gap: var(--sp-m);
  }
}

._disclosureButtonTime_a5gp1_30 {
  display: block;
  grid-column: 1 / -1;
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--cyan-bright);
  letter-spacing: 0.02em;
}

@media (min-width: 1000px) {
  ._disclosureButtonTime_a5gp1_30 {
    grid-column: auto;
    padding-top: 0.18em;
  }
}

._disclosureButtonKind_a5gp1_47 {
  display: block;
  margin-bottom: 0.65em;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-46);
}

._disclosureButtonTitle_a5gp1_57 {
  display: block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--step-2, 1.44rem);
  letter-spacing: -0.025em;
  line-height: 1.14;
  color: var(--t-100);
}

._disclosureButtonSub_a5gp1_67 {
  display: block;
  margin-top: 0.6em;
  font-size: var(--step--1);
  color: var(--t-46);
}

._disclosureButtonIcon_a5gp1_74 {
  position: relative;
  display: grid;
  flex: none;
  width: clamp(34px, 3vw, 42px);
  aspect-ratio: 1;
  margin-top: 0.1em;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  place-items: center;
  transition: 0.4s var(--ease);
}

._disclosureButtonIcon_a5gp1_74::before,._disclosureButtonIcon_a5gp1_74::after {
    content: "";
    position: absolute;
    background: var(--t-80);
    transition: 0.4s var(--ease);
  }

._disclosureButtonIcon_a5gp1_74::before {
    width: 11px;
    height: 1px;
  }

._disclosureButtonIcon_a5gp1_74::after {
    width: 1px;
    height: 11px;
  }

._disclosureButton_a5gp1_3[aria-expanded="true"] ._disclosureButtonIcon_a5gp1_74 {
  background: rgba(79, 209, 240, 0.1);
  border-color: var(--cyan);
}

:is(._disclosureButton_a5gp1_3[aria-expanded="true"] ._disclosureButtonIcon_a5gp1_74)::after {
    opacity: 0;
    transform: rotate(90deg);
  }
._cardHitArea_1n6ng_1 {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
._cardHitArea_1n6ng_1:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 2px;
  }
._speakerCard_69iaj_1 {
  position: relative;
  overflow: hidden;
  padding: var(--sp-l) var(--sp-m) var(--sp-m);
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.012)
  );
  transition: 0.4s ease;
}

._speakerCard_69iaj_1::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--cyan-bright),
      var(--blue-mid) 50%,
      var(--blue-bright),
      transparent
    );
    opacity: 0;
    transition: opacity 0.4s ease;
  }

._speakerCard_69iaj_1:hover::before {
    opacity: 1;
  }

/* the affordance is the card lifting, not the whole card matching :hover --
     CardHitArea's button covers the card, so the hover/focus that should
     drive this lift comes from that button specifically. */

._speakerCard_69iaj_1:has(button:hover),._speakerCard_69iaj_1:has(button:focus-visible) {
    border-color: var(--hair-strong);
    background: linear-gradient(
      158deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.02)
    );
    transform: translateY(-2px);
  }

@media (prefers-reduced-motion: reduce) {
    ._speakerCard_69iaj_1:has(button:hover) {
      transform: none;
    }
  }

._speakerCard_69iaj_1[data-variant="directory"] {
    display: flex;
    flex-direction: column;
  }

._speakerCardTop_69iaj_61 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-s);
  text-align: center;
  /* inherited by the name and role/org lines: short, centred text wraps
     into even lines instead of leaving a lone word on the last one. */
  text-wrap: balance;
}

._speakerCardAvatar_69iaj_72 {
  display: grid;
  overflow: hidden;
  flex: none;
  width: clamp(72px, 6vw, 87px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(
    140deg,
    var(--cyan-bright),
    var(--blue-mid) 60%,
    var(--blue-bright)
  );
  color: #00243f;
  font-family: var(--font-primary);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.02em;
}

._speakerCardAvatar_69iaj_72 img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

._speakerCardAvatarTba_69iaj_100 {
  border: 1px dashed var(--hair-strong);
  background: none;
  color: var(--t-30, rgba(234, 242, 245, 0.3));
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
}

._speakerCardName_69iaj_109 {
  font-family: var(--font-primary);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--t-100);
}

._speakerCardRole_69iaj_118 {
  margin-top: 0.45em;
  color: var(--t-46);
  font-family: var(--font-inter);
  font-size: var(--step--1);
  line-height: 1.5;
}

._speakerCardTag_69iaj_126 {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--blue-bright);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* a fixed gap rather than margin-top: auto -- pinning the list to the card's
   foot left the card with the longest role/org almost no room above its
   divider, so the space between title and divider varied card to card. */
._speakerCardSessions_69iaj_142 {
  margin-top: var(--sp-s);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--hair);
  color: var(--t-62);
  font-family: var(--font-inter);
  font-size: var(--step--1);
  line-height: 1.5;
  text-align: center;
}

._speakerCardSessionPart_69iaj_153 {
  display: block;
  /* the lines are short and centred, so balancing them evens out every line
     rather than leaving a lone word (widow) hanging on the last one. */
  text-wrap: balance;

  /* the same --sp-s the list uses above and below its own top divider, so
     every divider on the card has an equal gap either side of it. */
}

._speakerCardSessionPart_69iaj_153 + ._speakerCardSessionPart_69iaj_153 {
    margin-top: var(--sp-s);
    padding-top: var(--sp-s);
    border-top: 1px solid var(--hair);
  }

._speakerCardSessionPart_69iaj_153 b {
    color: var(--t-100);
    font-weight: 600;
  }
._slot_43lao_1 {
  border-bottom: 1px solid var(--hair);
}

._slotPanel_43lao_5 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

._slot_43lao_1[data-expanded="true"] ._slotPanel_43lao_5 {
    grid-template-rows: 1fr;
  }

._slotPanelInner_43lao_15 {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.5s;
}

._slot_43lao_1[data-expanded="true"] ._slotPanelInner_43lao_15 {
    visibility: visible;
    transition-delay: 0s;
  }

._panelIn_43lao_26 {
  padding: 0 0 var(--sp-l) clamp(80px, 8vw, 132px);
}

@media (max-width: 999px) {

._panelIn_43lao_26 {
    padding-left: 0;
}
  }

._agendaAbstract_43lao_34 {
  max-width: 68ch;
  padding-left: var(--sp-m);
  border-left: 1px solid var(--hair);
  --body-font-family: var(--font-serif);
  --body-font-size: var(--step-0);
  --body-font-weight: 350;
  --body-line-height: 1.65;
  --body-color: var(--t-62);
}

@media (max-width: 640px) {

._agendaAbstract_43lao_34 {
    --body-font-size: var(--step--1);
}
  }

._spkGrid_43lao_49 {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(clamp(240px, 21vw, 300px), 1fr)
  );
  gap: var(--sp-s);
  margin-top: var(--sp-m);
}
._speakerBioModal_m7210_1 {
  /* Reset browser dialog defaults */
  border: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3.5rem);
  /* the dialog is fixed-positioned, so inset fills the viewport exactly --
     100vw/100vh would overshoot by the scrollbar width and force a
     horizontal scrollbar on the page behind it */
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  background: transparent;

  display: grid;
  place-items: center;

  /* EXIT ANIMATION */
  opacity: 0;
  transition:
    opacity 0.3s var(--ease),
    display 0.3s var(--ease) allow-discrete,
    overlay 0.3s var(--ease) allow-discrete;
}

._speakerBioModal_m7210_1::backdrop {
  background: rgba(0, 10, 16, 0.94);
  backdrop-filter: blur(14px);

  /* EXIT ANIMATION */
  opacity: 0;
  transition:
    opacity 0.3s var(--ease),
    display 0.3s var(--ease) allow-discrete,
    overlay 0.3s var(--ease) allow-discrete;
}

._speakerBioModal_m7210_1[open],
._speakerBioModal_m7210_1[open]::backdrop {
  opacity: 1;
}

@starting-style {
  ._speakerBioModal_m7210_1[open],
  ._speakerBioModal_m7210_1[open]::backdrop {
    opacity: 0;
  }
}

._speakerBioModalCard_m7210_51 {
  position: relative;
  width: min(100%, 1080px);
  max-height: min(88vh, 54rem);
  /* column flex so the grid is capped at the card's max-height and the bio
     column scrolls inside it rather than being clipped */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair-strong);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(158deg, #062231, #03151f 62%, #021017);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.34s var(--ease);
}

._speakerBioModal_m7210_1[open] ._speakerBioModalCard_m7210_51 {
    transform: none;
  }

@media (max-width: 860px) {

._speakerBioModalCard_m7210_51 {
    max-height: 92vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
  }

@media (prefers-reduced-motion: reduce) {

._speakerBioModalCard_m7210_51 {
    transition: none;
    transform: none;
}
  }

._speakerBioModalGrid_m7210_83 {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;

  /* stacked: the whole card scrolls, so the grid keeps its natural height */
}

@media (max-width: 860px) {

._speakerBioModalGrid_m7210_83 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    flex: none;
}
  }

._speakerBioModalSide_m7210_98 {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border-right: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.022);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 860px) {

._speakerBioModalSide_m7210_98 {
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
    padding-right: clamp(4rem, 16vw, 4.5rem);
}
  }

._speakerBioModalAvatar_m7210_118 {
  width: clamp(112px, 11vw, 168px);
  aspect-ratio: 1;
  margin-bottom: var(--sp-m);
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(
    140deg,
    var(--cyan-bright),
    var(--blue-mid) 60%,
    var(--blue-bright)
  );
  color: #00243f;
  font-family: var(--font-primary);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: 0.02em;
}

._speakerBioModalAvatar_m7210_118 img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

@media (max-width: 860px) {

._speakerBioModalAvatar_m7210_118 {
    width: clamp(96px, 26vw, 132px);
}
  }

._speakerBioModalAvatarTba_m7210_150 {
  border: 1px dashed var(--hair-strong);
  background: none;
  color: var(--t-30, rgba(234, 242, 245, 0.3));
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
}

._speakerBioModalTag_m7210_159 {
  display: block;
  margin-bottom: 0.7em;
  color: var(--blue-bright);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

._speakerBioModalName_m7210_170 {
  margin: 0;
  color: var(--t-100);
  font-family: var(--font-primary);
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
}

._speakerBioModalRole_m7210_180 {
  margin: 0.6em 0 0;
  color: var(--t-100);
  font-family: var(--font-inter);
  font-size: var(--step-0);
  line-height: 1.5;
}

._speakerBioModalOrg_m7210_188 {
  margin: 0.65em 0 0;
  color: var(--cyan-bright);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

._speakerBioModalSessions_m7210_198 {
  margin: var(--sp-m) 0 0;
  padding-top: var(--sp-m);
  border-top: 1px solid var(--hair);
  color: var(--t-62);
  font-family: var(--font-inter);
  font-size: var(--step--1);
  line-height: 1.55;
}

._speakerBioModalSessions_m7210_198 span {
    display: block;
  }

._speakerBioModalSessions_m7210_198 span + span {
    margin-top: 0.6em;
  }

._speakerBioModalSessions_m7210_198 b {
    color: var(--t-100);
    font-weight: 600;
  }

._speakerBioModalBody_m7210_221 {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  padding-right: calc(clamp(0.75rem, 2.5vw, 2rem) + 3.6rem);
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

._speakerBioModalBody_m7210_221 p {
    max-width: 60ch;
    color: var(--t-78, var(--t-62));
    font-family: var(--font-serif);
    font-size: var(--step-0);
    font-weight: 350;
    line-height: 1.68;
  }

._speakerBioModalBody_m7210_221 p + p {
    margin-top: 1em;
  }

._speakerBioModalBody_m7210_221:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: -4px;
  }

@media (max-width: 860px) {

._speakerBioModalBody_m7210_221 {
    overflow: visible;
    padding-right: clamp(1.25rem, 5vw, 2rem);
}
  }

._speakerBioModalClose_m7210_252 {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 2rem);
  right: clamp(0.75rem, 2.5vw, 2rem);
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: none;
  display: grid;
  place-items: center;
  transition: 0.3s var(--ease);
}

._speakerBioModalClose_m7210_252:hover {
    border-color: var(--cyan);
    background: rgba(79, 209, 240, 0.1);
  }

._speakerBioModalClose_m7210_252 span {
    position: absolute;
    width: 17px;
    height: 1.5px;
    background: var(--t-100);
    border-radius: 2px;
  }

._speakerBioModalClose_m7210_252 span:first-child {
    transform: rotate(45deg);
  }

._speakerBioModalClose_m7210_252 span:last-child {
    transform: rotate(-45deg);
  }
._sponsorGroup_14kcg_1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 0.7rem + 0.23vw, 0.88rem);
}

._sponsorGroupLabel_14kcg_8 {
  font-family: var(--font-mono);
  font-size: clamp(0.6944rem, 0.679rem + 0.0769vw, 0.7383rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00252f;
}

._sponsorGroupRow_14kcg_16 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  min-height: 34px;
}

/* the masthead row (5 wordmarks) gets a tighter, steeper gap ramp so all five
   still fit on one line at the column's narrowest point. */
._sponsorGroupRowMasthead_14kcg_26 {
  gap: clamp(0.5rem, calc(3.1vw - 1.5rem), 1.35rem);
}

/* rows inside the presenting-sponsor / venue-partner pair have room to
   spare, and their marks are centred on each other rather than hung from a
   shared top edge. The presenting group is the only one carrying two marks,
   so this gap is effectively the space between OCBC and OCBC Premier. */
._sponsorGroupRowPair_14kcg_34 {
  align-items: center;
  gap: clamp(1.75rem, 2.4vw, 3.25rem);
}

._sponsorGroupLogoWrap_14kcg_39 {
  display: block;
  width: auto;

  /* per-mark heights: the mastheads and sponsor marks ship at wildly
     different aspect ratios, so a single shared height would make the wide
     ones shout and the stacked ones vanish. The five mastheads are held at
     their measured size because the row is tuned to exactly fill the fold's
     right column on one line -- growing them wraps it. */
}

._sponsorGroupLogoWrap_14kcg_39[data-mark="st"],._sponsorGroupLogoWrap_14kcg_39[data-mark="bt"],._sponsorGroupLogoWrap_14kcg_39[data-mark="bh"] {
    --image-height: clamp(11px, 1vw, 17px);
  }

._sponsorGroupLogoWrap_14kcg_39[data-mark="tm"] {
    --image-height: clamp(16px, 1.45vw, 19px);
  }

._sponsorGroupLogoWrap_14kcg_39[data-mark="zb"] {
    --image-height: clamp(22px, 1.98vw, 33px);
  }

._sponsorGroupLogoWrap_14kcg_39[data-mark="ocbc"] {
    --image-height: clamp(29px, 2.73vw, 42px);
  }

._sponsorGroupLogoWrap_14kcg_39[data-mark="ocbcp"] {
    --image-height: clamp(53px, 4.76vw, 73px);
  }

._sponsorGroupLogoWrap_14kcg_39[data-mark="aws"],._sponsorGroupLogoWrap_14kcg_39[data-mark="mbs"] {
    --image-height: clamp(40.5px, 3.68vw, 45.3px);
  }

._sponsorGroupLogoWrap_14kcg_39[data-mark="sph"] {
    --image-height: clamp(42px, 3.82vw, 60px);
  }

/* stands in for a mark that has not been supplied yet, drawn in the same
   dashed idiom the programme section uses for speakers still to be
   announced. */
._sponsorGroupSlot_14kcg_82 {
  display: grid;
  flex: none;
  place-items: center;
  height: clamp(53px, 4.76vw, 73px);
  aspect-ratio: 2.6;
  padding-inline: 0.6em;
  border: 1px dashed rgba(0, 37, 47, 0.42);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: clamp(0.6944rem, 0.679rem + 0.0769vw, 0.7383rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00252f;
}
._statCard_1e3nz_1 {
  padding: var(--sp-m) clamp(1rem, 1.8vw, 1.75rem);
  border-right: 1px solid var(--hair);
}

._statCard_1e3nz_1:last-child {
    border-right: 0;
  }

._statCardLabel_1e3nz_10 {
  margin-bottom: 0.7em;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-46);
}

._statCardValue_1e3nz_19 {
  font-family: var(--font-primary);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--t-100);
}

._statCardValueEmphasis_1e3nz_28 {
  font-style: normal;
  color: var(--cyan-bright, #4fd1f0);
}

._statCardValueMuted_1e3nz_33 {
  font-weight: 400;
  color: var(--t-46);
}

._statCardCaption_1e3nz_38 {
  margin-top: 0.4em;
  font-family: var(--font-inter);
  font-size: var(--step--1);
  color: var(--t-46);
}
._button_1l3uj_1 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-radius: 100px;
  padding: 0.72em 1.4em;
  background: var(--button-background, transparent);
  color: var(--button-color, var(--t-62));
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
._button_1l3uj_1:hover {
    color: var(--button-hover-color, var(--t-100));
  }
._tabBar_1oin6_1 {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  vertical-align: middle;
  background: var(--tab-bar-background, rgba(255, 255, 255, 0.03));
  backdrop-filter: var(--tab-bar-backdrop-filter, none);
  border: 1px solid var(--hair-strong);
  border-radius: 100px;
}

@media (max-width: 680px) {
  ._tabBar_1oin6_1 {
    width: max-content;
  }
}

/* The selected tab is a filled pill, so hover shares its resting colour --
   Button's default hover is this pill's own background. */
._tabBar_1oin6_1 button[aria-selected="true"] {
  --button-background: var(--tab-active-background, var(--t-100));
  --button-color: var(--tab-active-color, var(--ink-900));
  --button-hover-color: var(--tab-active-color, var(--ink-900));
}
._tabTitlePanel_yhw4v_1 {
  grid-area: 1 / 1;
  opacity: 1;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear;
}

@media (prefers-reduced-motion: reduce) {

._tabTitlePanel_yhw4v_1 {
    transition: none;
}
  }

._tabTitlePanelHidden_yhw4v_13 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear 0.35s;
}

._tabTitlePanelEyebrow_yhw4v_22 {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  --body-color: var(--blue-bright);
  --body-font-family: var(--font-mono);
  --body-font-size: var(--step--2);
  --body-letter-spacing: 0.2em;
  --body-text-transform: uppercase;
}

._tabTitlePanelEyebrow_yhw4v_22::before {
    content: "";
    width: clamp(18px, 2.4vw, 34px);
    height: 1px;
    flex: none;
    background: var(--grad-rule);
  }

._tabTitlePanelEyebrow_yhw4v_22._tabTitlePanelEyebrowAccent_yhw4v_40 {
    --body-color: var(--blue-soft);
  }

._tabTitlePanelHeading_yhw4v_45 {
  --heading-color: var(--t-100);
  --heading-font-family: var(--font-primary);
  --heading-font-size: var(--step-4);
  --heading-font-weight: 700;
  --heading-line-height: 1.08;
  --heading-letter-spacing: -0.022em;
  --heading-max-width: 16ch;
  --heading-margin: var(--sp-m) 0 0;
}
/* The footer's inverted key visual: converging wave lines anchoring the
   page. Absolutely positioned behind the footer content, from the source
   mockup's .foot-kv rule. */
._waveField_mwe4i_4 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(62%, 520px);
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}

._waveField_mwe4i_4 svg {
  width: 100%;
  height: 100%;
}
._main_aq12p_1 {
  display: flex;
  flex-direction: column;
  /* This page's sections are all full-bleed and re-constrain their own content
     column (heroIn, curtainShell, detailsShell, ...), so main drops the global
     920px cap and gutter rather than having each section break back out of it. */
  max-width: none;
  padding-inline: 0;
}

/* ================= HERO ================= *
 * Only the "ascend" hero variant from the mockup is ever rendered on this
 * page, so the base .hero primitive and its .ascend override are folded
 * into one effective set of rules here rather than kept as two layers.
 */
._hero_aq12p_13 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: auto;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(9.5rem, 16vh, 13rem) 0;
  background: var(--ink-900);
  /* the strip along the foot of the fold pulls the next section up under it */
  --hero-seam: calc(var(--sp-3xl) * 0.58);
  margin-bottom: calc(-1 * var(--hero-seam));
  z-index: 2;
}
._hero_aq12p_13 ::selection {
    background: var(--kv-deep);
    color: var(--kv-pale);
  }
@media (max-width: 680px) {
._hero_aq12p_13 {
    padding-block: clamp(9rem, 15vh, 11rem) 0;
}
  }

/* ---------- backdrop stage ---------- */
._heroStage_aq12p_42 {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* the stage holds blended layers and two SVG filters; without its own
     compositor layer the browser repaints all of it on every scroll frame */
  transform: translateZ(0);
}

._heroGround_aq12p_53 {
  position: absolute;
  inset: 0;
  /* deeper than the brand artwork on purpose: the prism's pale wedges are
     only legible if the ground sits well below them in value */
  background:
    radial-gradient(
      38% 34% at 27% -4%,
      #fff 0%,
      rgb(255 255 255 / 50%) 26%,
      rgb(255 255 255 / 0%) 66%
    ),
    radial-gradient(
      58% 48% at 2% 92%,
      rgb(201 222 239 / 34%),
      rgb(201 222 239 / 0%) 62%
    ),
    linear-gradient(158deg, #d2e4f2 0%, #bdd8ed 30%, #a3c8e5 62%, #8bb9de 100%);
}

/* ---------- shine ---------- */
._heroShine_aq12p_74 {
  position: absolute;
  left: 30%;
  top: -14%;
  width: 52%;
  height: 52%;
  transform: translateX(-50%);
  z-index: 5;
  mix-blend-mode: screen;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgb(255 255 255 / 95%),
    rgb(255 255 255 / 42%) 38%,
    rgb(255 255 255 / 0%) 72%
  );
  animation: _heroShineBreathe_aq12p_1 6.4s var(--ease) infinite alternate;
}
@media (max-width: 900px) {
._heroShine_aq12p_74 {
    left: 26%;
    top: -16%;
    width: 88%;
    height: 34%;
}
  }
@media (prefers-reduced-motion: reduce) {
._heroShine_aq12p_74 {
    animation: none !important;
}
  }

@keyframes _heroShineBreathe_aq12p_1 {
  0% {
    opacity: 0.5;
    transform: translateX(-50%) scale(0.92);
  }

  100% {
    opacity: 0.88;
    transform: translateX(-50%) scale(1.1);
  }
}

._heroGrain_aq12p_115 {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* ---------- content on the light ground (folds the mockup's shared
   ".shell" max-width/gutter treatment into this component's own row, same
   precedent as StickyNavIn) ---------- */
._heroIn_aq12p_127 {
  position: relative;
  z-index: 7;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  box-sizing: border-box;
}

/* Two columns, two rows, with the display line spanning both:
 *   "copy pub"   the mastheads sit beside the display line, tops level
 *   "copy spon"  the sponsor container (organiser, presenting, cloud, venue)
 *                follows underneath them
 * .heroMarks and .sponsors are display:contents so their children become
 * grid items directly, letting the copy span three rows on one side while the
 * other side splits, without a second nested grid. */
._heroGrid_aq12p_144 {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  grid-template-areas:
    "copy pub"
    "copy spon";
  column-gap: var(--sp-s);
  row-gap: clamp(1.25rem, 2.5vh, 2rem);
  align-items: start;
  justify-items: start;
  --hero-title-size: clamp(2.232rem, 0.9rem + 3.7vw, 4rem);
}

@media (max-width: 1080px) {
  ._heroGrid_aq12p_144 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "pub"
      "spon";
    row-gap: var(--sp-xl);
    justify-items: start;
  }
}

._heroMarks_aq12p_141,
._sponsors_aq12p_141 {
  display: contents;
}

._heroCopy_aq12p_174 {
  grid-area: copy;
  justify-self: start;
  margin-top: 0;
  --heading-margin: var(--sp-s) 0 0;
  --heading-max-width: none;
  --heading-color: #000;
  --heading-font-family: var(--font-primary);
  --heading-font-size: var(--hero-title-size);
  --heading-font-weight: 800;
  --heading-line-height: 0.92;
  --heading-letter-spacing: -0.042em;
  --heading-text-transform: uppercase;
}

@media (max-width: 900px) {

._heroCopy_aq12p_174 {
    --heading-font-size: clamp(2.016rem, 0.936rem + 5.904vw, 3.672rem);
}
  }

@media (max-width: 680px) {

._heroCopy_aq12p_174 {
    --heading-font-size: clamp(1.584rem, 0.576rem + 5.472vw, 2.736rem);
    --heading-letter-spacing: -0.045em;
}
  }

._heroEyebrow_aq12p_198 {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  --body-color: var(--kv-deep);
  --body-font-family: var(--font-mono);
  --body-font-size: var(--step--2);
  --body-letter-spacing: 0.2em;
  --body-text-transform: uppercase;
}

._heroEyebrow_aq12p_198::before {
  content: "";
  width: clamp(18px, 2.4vw, 34px);
  height: 1px;
  flex: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--kv-deep) 40%,
    var(--kv-deep)
  );
}

._heroTitleL1_aq12p_222 {
  display: block;
}

._heroTitleL2_aq12p_226 {
  display: block;
}

/* the display line's sweep, re-keyed to the light ground */
._heroTitleSweep_aq12p_231 {
  background: linear-gradient(
    100deg,
    #000 8%,
    #0d4a87 34%,
    #1c7fd6 50%,
    #0d4a87 66%,
    #000 92%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: _heroTitleSweep_aq12p_231 16s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
._heroTitleSweep_aq12p_231 {
    animation: none !important;
}
  }

@keyframes _heroTitleSweep_aq12p_231 {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 220% 0;
  }
}

._heroSub_aq12p_261 {
  margin: 0;
  margin-top: var(--sp-l);
  --body-color: #000;
  --body-font-family: var(--font-primary);
  --body-font-weight: 800;
  --body-text-transform: uppercase;
  /* clears WCAG's large-text bracket (3:1) at this size and weight */
  --body-font-size: clamp(1.296rem, 0.5184rem + 1.116vw, 1.476rem);
  --body-line-height: 1.15;
  --body-letter-spacing: -0.012em;
}

/* the marks stack starts here, dropped past the eyebrow so the "Presented by"
 * label's cap top lines up with the cap top of the display title's first line
 * rather than with the eyebrow above it. The mastheads below inherit the
 * offset by sitting in the next row.
 *   3.4em  the eyebrow: a 1.4 line box plus the <p>'s 1em UA margin above and
 *          below (margins do not collapse inside the flex .heroEyebrow)
 *   sp-s   the heading's top margin
 *   last   optical: each text's cap top sits below its own box top (about
 *          0.12em of the title, 0.38em of the label), so cancel the difference */
._pub_aq12p_283 {
  grid-area: pub;
  margin-top: calc(
    var(--step--2) * 3.4 + var(--sp-s) + var(--hero-title-size) * 0.12 -
      var(--step--2) * 0.38
  );
}
@media (max-width: 1080px) {
._pub_aq12p_283 {
    margin-top: 0;
}
  }

/* Three rows: the organiser (SPH) and the presenting sponsor's pair of marks
 * (OCBC + OCBC Premier) each take a row on their own, and the cloud and venue
 * partners (AWS + MBS) share the third. The row assignment keys off source order rather
 * than a class per group, since the three <SponsorGroup>s are rendered in
 * that order and each owns its own root element. */
._spPair_aq12p_300 {
  grid-area: spon;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: start;
  justify-content: start;
  gap: clamp(1rem, 2vh, 1.75rem) clamp(1.5rem, 2.75vw, 3.25rem);
  margin-top: clamp(1rem, 3vh, 2.5rem);
  /* no inline padding: the groups' left edge must line up with .pub above */
  padding-block: clamp(0.75rem, 2vh, 1.75rem);
  position: relative;
  isolation: isolate;

  /* a soft, irregular bloom of light rather than a hard card, echoing the
   * glow rising from the bottom right of the key visual. Every bloom is
   * anchored to the bottom edge and rises to a different height and width,
   * so the light wells up from below the marks with an uneven, cloudy top
   * edge (tallest just right of centre, a lower shoulder on the left) while
   * the broad central bloom keeps every mark, top row included, on a light
   * ground. Each bloom eases out over several stops and the whole plate is
   * heavily blurred, so there is no visible rim where the light meets the
   * blue. The plate overhangs the box (most at the bottom, so the source
   * of the light sits below the logos), and positions and sizes are
   * percentages of it while the blur and overhang scale with the viewport,
   * so the shape holds from phone to desktop; .hero clips the overhang, so it
   * never adds horizontal scroll. */
}
._spPair_aq12p_300::before {
    content: "";
    position: absolute;
    /* the side overhang also covers the inline padding the box used to
       carry, so the plate keeps its width now that the box is narrower */
    inset: calc(-1 * clamp(2rem, 5vw, 5rem))
      calc(-1 * clamp(3rem, 7.5vw, 7.25rem)) calc(-1 * clamp(3rem, 7vw, 7rem));
    z-index: -1;
    background:
      radial-gradient(
        ellipse 76% 125% at 50% 100%,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.68) 40%,
        rgba(255, 255, 255, 0.4) 70%,
        rgba(255, 255, 255, 0.12) 88%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        ellipse 50% 140% at 62% 100%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.25) 55%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        ellipse 48% 115% at 24% 100%,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.22) 55%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        ellipse 44% 95% at 86% 100%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.26) 55%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        ellipse 32% 75% at 8% 100%,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.14) 55%,
        rgba(255, 255, 255, 0) 100%
      );
    filter: blur(clamp(24px, 4vw, 56px));
    pointer-events: none;
  }
._spPair_aq12p_300 > :nth-child(-n + 2) {
    grid-column: 1 / -1;
  }
@media (max-width: 420px) {
._spPair_aq12p_300 {
    grid-template-columns: minmax(0, 1fr);
}

    ._spPair_aq12p_300 > :nth-child(-n + 2) {
      grid-column: auto;
    }
  }

/* ================= CURTAIN RAISER ================= *
 * Sits directly under the hero on the same ink ground, so the fold's teal
 * hand-off (the ::before wash below) carries the hero's colour down into it
 * rather than leaving a hard edge under the plinth.
 */
._curtainSection_aq12p_389 {
  position: relative;
  background: var(--ink-900);
}
._curtainSection_aq12p_389::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 46vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgb(139 185 222 / 13%) 0%,
      rgb(139 185 222 / 10%) 18%,
      rgb(139 185 222 / 6%) 40%,
      rgb(139 185 222 / 2%) 68%,
      rgb(139 185 222 / 0%) 100%
    );
  }

/* same shared max-width/gutter treatment as StickyNavIn/heroIn */
._curtainShell_aq12p_412 {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  padding-block: var(--sp-3xl);
  box-sizing: border-box;
}

._curtainHead_aq12p_423 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-m) var(--sp-2xl);
  flex-wrap: wrap;
}

@media (max-width: 680px) {

._curtainHead_aq12p_423 {
    gap: var(--sp-s);
}
  }

._curtainEyebrow_aq12p_435 {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  --heading-color: var(--blue-bright);
  --heading-font-family: var(--font-mono);
  --heading-font-size: var(--step--2);
  --heading-letter-spacing: 0.2em;
  --heading-text-transform: uppercase;
}

._curtainEyebrow_aq12p_435::before {
    content: "";
    width: clamp(18px, 2.4vw, 34px);
    height: 1px;
    flex: none;
    background: var(--grad-rule);
  }

._curtainNote_aq12p_454 {
  /* font-size set directly here (not just via --body-font-size) so the
   * 60ch max-width below resolves against the same size as the rendered
   * text, rather than the wrapper's inherited default. */
  font-size: var(--step--1);
  max-width: 60ch;
  --body-font-size: var(--step--1);
  --body-line-height: 1.6;
  --body-color: var(--t-62);
}

._curtainGrid_aq12p_465 {
  margin-top: var(--sp-l);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-s);
}

@media (max-width: 1240px) {

._curtainGrid_aq12p_465 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
  }

@media (max-width: 680px) {

._curtainGrid_aq12p_465 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-m);
}
  }

/* ================= EVENT DETAILS ================= *
 * Its own section on ink, so the fact bar keeps the light-on-dark treatment
 * it was drawn for. Full-bleed like hero/curtain, re-constraining its own
 * content column via detailsShell.
 */
._detailsSection_aq12p_486 {
  position: relative;
  background: var(--ink-900);
}

/* same shared max-width/gutter treatment as heroIn/curtainShell */
._detailsShell_aq12p_492 {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  padding-block: var(--sp-xs);
  box-sizing: border-box;
}

._detailsHead_aq12p_501 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-l);
  flex-wrap: wrap;
  margin-bottom: var(--sp-l);
  --heading-color: var(--t-100);
  --heading-font-family: var(--font-primary);
  --heading-font-size: var(--step-4);
  --heading-font-weight: 700;
  --heading-line-height: 1.08;
  --heading-letter-spacing: -0.022em;
  --heading-max-width: 16ch;
  --heading-margin: var(--sp-m) 0 0;
}

._detailsEyebrow_aq12p_518 {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  --body-color: var(--blue-bright);
  --body-font-family: var(--font-mono);
  --body-font-size: var(--step--2);
  --body-letter-spacing: 0.2em;
  --body-text-transform: uppercase;
}

._detailsEyebrow_aq12p_518::before {
    content: "";
    width: clamp(18px, 2.4vw, 34px);
    height: 1px;
    flex: none;
    background: var(--grad-rule);
  }

._detailsFactbar_aq12p_537 {
  margin-top: 0;
  border: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgb(255 255 255 / 1.8%);
  backdrop-filter: blur(6px);
}

@media (max-width: 900px) {

._detailsFactbar_aq12p_537 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    ._detailsFactbar_aq12p_537 > div:nth-child(2n) {
      border-right: 0;
    }

    ._detailsFactbar_aq12p_537 > div:nth-child(n + 3) {
      border-top: 1px solid var(--hair);
    }
  }

@media (max-width: 680px) {

._detailsFactbar_aq12p_537 {
    grid-template-columns: minmax(0, 1fr);
}

    ._detailsFactbar_aq12p_537 > div {
      border-right: 0;
      border-top: 1px solid var(--hair);
    }

    ._detailsFactbar_aq12p_537 > div:first-child {
      border-top: 0;
    }
  }

/* ================= PROGRAMME + SPEAKERS + ABOUT (tabbed) ================= *
 * One section, three panels (Programme / Speakers / About the Summit)
 * switched by TabBar. The About panel alone shows the ambient film loop
 * behind it -- .programmeMedia stays opacity:0 except when data-tab="about".
 * Full-bleed like curtain/details.
 */
._anchor_aq12p_577 {
  display: block;
}

._programmeSection_aq12p_581 {
  position: relative;
  overflow: clip;
  background: var(--ink-900);
}

._programmeSection_aq12p_581::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 46vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgb(139 185 222 / 13%) 0%,
      rgb(139 185 222 / 10%) 18%,
      rgb(139 185 222 / 6%) 40%,
      rgb(139 185 222 / 2%) 68%,
      rgb(139 185 222 / 0%) 100%
    );
  }

._programmeMedia_aq12p_574 {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

._programmeSection_aq12p_581[data-tab="about"] ._programmeMedia_aq12p_574 {
    opacity: 1;
  }

._programmeMedia_aq12p_574 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
  }

._programmeMediaFallback_aq12p_624 {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 20% 30%, rgb(0 166 221 / 30%), transparent 60%),
    radial-gradient(70% 90% at 80% 70%, rgb(0 179 137 / 26%), transparent 60%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900) 70%);
}

._programmeScrim_aq12p_633 {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--ink-900) 0%,
    rgb(0 18 27 / 62%) 26%,
    rgb(0 18 27 / 72%) 74%,
    var(--ink-900) 100%
  );
}

._programmeSection_aq12p_581[data-tab="about"] ._programmeScrim_aq12p_633 {
    opacity: 1;
  }

/* same shared max-width/gutter treatment as heroIn/curtainShell/detailsShell */
._programmeIn_aq12p_651 {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  padding-block: var(--sp-3xl);
  box-sizing: border-box;
}

._comboHead_aq12p_662 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-m) var(--sp-l);
  flex-wrap: wrap;
}

/* both titles occupy the same grid cell, so the tab bar never shifts
   sideways as the heading changes length -- TabTitlePanel positions itself
   with grid-area:1/1 and toggles visibility via its own hidden prop. */
._comboTitles_aq12p_673 {
  display: grid;
  flex: 1 1 22ch;
  min-width: 0;
}

._tabBarScroll_aq12p_679 {
  position: sticky;
  top: var(--nav-h, 6.9rem);
  z-index: 20;
  margin: var(--sp-l) calc(-1 * clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem)) 0;
  padding: var(--sp-s) clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  --tab-bar-background: rgb(0 18 27 / 90%);
  --tab-bar-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hair);
}

@media (max-width: 680px) {

._tabBarScroll_aq12p_679 {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

    ._tabBarScroll_aq12p_679::-webkit-scrollbar {
      display: none;
    }
  }

@media (min-width: 901px) {

._tabBarScroll_aq12p_679 {
    top: var(--nav-h-mobile-up);
}
  }

._comboPanel_aq12p_704 {
  margin-top: var(--sp-l);
  animation: _comboPanelFadeIn_aq12p_1 0.45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {

._comboPanel_aq12p_704 {
    animation: none !important;
}
  }

@keyframes _comboPanelFadeIn_aq12p_1 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Programme panel ---------- */
._programmeNote_aq12p_726 {
  --body-color: var(--t-100);
  --body-font-size: var(--step-0);
}

._programmeDayhead_aq12p_731 {
  margin-top: var(--sp-xl);
  padding-bottom: var(--sp-s);
  border-bottom: 1px solid var(--hair);
}

._programmeDayhead_aq12p_731 p {
    display: flex;
    align-items: baseline;
    gap: var(--sp-xs);
    flex-wrap: wrap;
  }

._programmeDayhead_aq12p_731 b {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: -0.018em;
    color: var(--t-100);
  }

._programmeDayhead_aq12p_731 span {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-46);
  }

._day_aq12p_760 {
  display: flex;
  flex-direction: column;
}

._progFoot_aq12p_765 {
  margin-top: var(--sp-l);
  max-width: 65ch;
  --body-font-size: var(--step--1);
  --body-color: var(--t-46);
}

/* ---------- Speakers directory panel ---------- */
._spkSub_aq12p_773 + ._spkSub_aq12p_773 {
  margin-top: var(--sp-2xl);
}

._speakerDirectorySubTitle_aq12p_777 {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding-bottom: var(--sp-s);
  border-bottom: 1px solid var(--hair-strong);
  --heading-color: var(--t-100);
  --heading-font-family: var(--font-primary);
  --heading-font-weight: 700;
  --heading-font-size: var(--step-1);
  --heading-letter-spacing: -0.018em;
}

._speakerDirectorySubTitleCount_aq12p_790 {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--t-62);
}

._spkDirGrid_aq12p_798 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-s);
  margin-top: var(--sp-l);
}

@media (max-width: 1080px) {

._spkDirGrid_aq12p_798 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
  }

@media (max-width: 680px) {

._spkDirGrid_aq12p_798 {
    grid-template-columns: minmax(0, 1fr);
}
  }

/* ---------- About panel ---------- */
._infoHead_aq12p_814 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xl);
}

._aboutVideo_aq12p_821 {
  width: 100%;
  max-width: 1280px;
}

._aboutVideo_aq12p_821 video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
  }

._aboutCopy_aq12p_833 {
  width: 100%;
  max-width: 960px;
  --body-color: var(--t-62);
  --body-font-size: var(--step-0);
  --body-line-height: 1.72;
}

._aboutCopy_aq12p_833 > * + * {
    margin-top: var(--sp-s);
  }

._aboutPull_aq12p_845 {
  margin-top: var(--sp-m);
  padding-left: var(--sp-m);
  border-left: 1px solid var(--hair-strong);
  --body-font-family: var(--font-serif);
  --body-font-size: var(--step-1);
  --body-font-weight: 350;
  --body-line-height: 1.5;
  --body-color: var(--t-80, var(--t-62));
}

._aboutPull_aq12p_845 b {
    color: var(--blue-bright);
    font-weight: 600;
  }

/* ================= NEWS & COVERAGE ================= *
 * Full-bleed like curtain/details/programme, on the same ink ground.
 */
._coverageSection_aq12p_864 {
  position: relative;
  background: var(--ink-900);
}

/* same shared max-width/gutter treatment as heroIn/curtainShell/detailsShell */
._coverageIn_aq12p_870 {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  padding-block: var(--sp-3xl);
  box-sizing: border-box;
}

._coverageHead_aq12p_879 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-l);
  flex-wrap: wrap;
  --heading-color: var(--t-100);
  --heading-font-family: var(--font-primary);
  --heading-font-weight: 700;
  --heading-line-height: 1.08;
  --heading-letter-spacing: -0.022em;
  --heading-font-size: var(--step-4);
  --heading-max-width: 16ch;
  --heading-margin: var(--sp-m) 0 0;
}

._coverageEyebrow_aq12p_895 {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

._coverageEyebrow_aq12p_895::before {
    content: "";
    width: clamp(18px, 2.4vw, 34px);
    height: 1px;
    flex: none;
    background: var(--grad-rule);
  }

._coverageNote_aq12p_909 {
  font-size: var(--step--1);
  max-width: 34ch;
  --body-font-size: var(--step--1);
  --body-color: var(--t-46);
}

._pubGroups_aq12p_916 {
  margin-top: var(--sp-xl);
}

/* ================= FOOTER / PARTNERS ================= *
 * Full-bleed like every other section on the page, on the same ink ground.
 * WaveField (the footer's own inverted key visual) is absolutely positioned
 * behind .partnersIn by its own component CSS.
 */
._partnersSection_aq12p_925 {
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
  padding-top: var(--sp-2xl);
}

/* same shared max-width/gutter treatment as heroIn/curtainShell/detailsShell */
._partnersIn_aq12p_923 {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 3.25vw, 5.5rem);
  box-sizing: border-box;
}

._partnersGrid_aq12p_943 {
  display: grid;
  grid-template-columns: minmax(0, 3fr) repeat(2, minmax(0, 0.5fr));
  gap: var(--sp-xl);
  padding-bottom: var(--sp-2xl);
}

@media (max-width: 1200px) {

._partnersGrid_aq12p_943 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-l);
}
  }

@media (max-width: 680px) {

._partnersGrid_aq12p_943 {
    grid-template-columns: minmax(0, 1fr);
}
  }

._partnersNavColumn_aq12p_959 {
  --heading-font-family: var(--font-mono);
  --heading-font-weight: 500;
  --heading-font-size: var(--step--2);
  --heading-letter-spacing: 0.18em;
  --heading-text-transform: uppercase;
  --heading-color: var(--t-46);
  --heading-margin: 0 0 var(--sp-s);
}

._partnersNavList_aq12p_969 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

._partnersNavList_aq12p_969 a {
    font-size: var(--step--1);
    color: var(--t-62);
    transition: color 0.3s var(--ease);
  }

:is(._partnersNavList_aq12p_969 a):hover {
      color: var(--cyan-bright);
    }