/* =========================================================================
   Medicarians Vegas 2027 — prototype stylesheet
   Figma: 6wbPIuKFZEt5jGwWaKqKVC (node 11:1498)
   ========================================================================= */

/* ---------------------------------------------------------------- Fonts --
   Both display weights the design uses: Extra Bold (800) for section headings
   and card titles, Heavy (900) for the hero headline, nav, buttons and
   eyebrows.

   Served as OTF because that's what was supplied and there's no converter on
   this machine. ~68KB each, fine for a prototype — `woff2_compress` would
   roughly halve them for production.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Articulat CF";
  src: url("assets/fonts/Articulat_CF_Extra_Bold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("assets/fonts/Articulat_CF_Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- Tokens -- */
:root {
  --navy: #051135;
  --blue: #0281fb;
  --blue-deep: #043ca7;
  --cyan: #00cafc;
  --coral: #f27562;
  --pink: #fb98b4;
  --violet: #6b47da;

  /* From the brand guidelines — the two spectrum colours the palette was
     missing. Used only by the bloom plates below. */
  --teal: #5ecba1;
  --magenta: #d949b3;

  --ink-muted: #4d5470;
  --ink-faint: #6d7490;
  --line: #e0e3ee;
  --line-strong: #c3c7d8;
  --surface: #f7f8fc;

  --font-display: "Articulat CF", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, Arial, sans-serif;

  --gutter: 48px;
  --maxw: 1344px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-pill: 999px;

  --shadow-blue: 0 10px 18px rgba(2, 129, 251, 0.42);
  --shadow-pink: 0 10px 18px rgba(251, 152, 180, 0.24);
  --shadow-card: 0 6px 16px rgba(4, 60, 167, 0.1);

  --header-h: 77px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  background: #fff;
  color: var(--navy);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; }

/* ------------------------------------------------------------ Utilities -- */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 96px; }
.section--slim { padding-block: 64px; }
.section--tint { background: var(--surface); }
.section--navy { background: var(--navy); color: #fff; }

/* ------------------------------------------------------------ Bloom plates --
   The brand's "Bloom Plates" device: two or three soft-edged radial colour
   fields over ink. Their plates are full-bleed artwork, whereas these sit
   behind body copy, so the blooms are held well back from full strength — see
   --bloom-strength. The guidelines' rule is "place copy over the calm side",
   so each section below moves the bloom centres away from its reading column.

   z-index:-1 on the layer plus isolation on the section keeps it behind the
   content without needing a z-index on every child — same trick as the hero.
   ---------------------------------------------------------------------------- */
.section--bloom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.section--bloom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 60% at var(--bloom-a-at, 78% 12%),
      var(--bloom-a, var(--blue)) 0%, transparent 62%),
    radial-gradient(50% 65% at var(--bloom-b-at, 15% 85%),
      var(--bloom-b, var(--magenta)) 0%, transparent 62%),
    radial-gradient(40% 55% at var(--bloom-c-at, 60% 60%),
      var(--bloom-c, var(--teal)) 0%, transparent 65%);
  opacity: var(--bloom-strength, 0.2);
  pointer-events: none;
}

/* -------------------------------------------------------------- Type ----- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}
.eyebrow--sm { font-size: 12px; }
.eyebrow--blue { color: var(--blue); }
.eyebrow--pink { color: var(--pink); }
.eyebrow--cyan { color: var(--cyan); }
.eyebrow--navy { color: var(--navy); }
.eyebrow--light { color: #fff; }

.h2 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
}
.h2--light { color: #fff; }

.h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 26.4px;
  letter-spacing: -0.33px;
  color: var(--navy);
}

.h3-lg {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.h3-lg--navy { color: var(--navy); }

.section-head { max-width: 588px; }
/* For headings the 588px cap breaks onto a third line. 720px is the narrowest
   width that fits "There Is More to Medicarians Than Medicare." in two. */
.section-head--wide { max-width: 720px; }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head__lede {
  margin-top: 16px;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--ink-muted);
}
.section-head__lede--light { color: #fff; }

/* ------------------------------------------------------------- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 10px 20px; font-size: 12px; }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover { background: #0a72da; }

.btn--deep {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn--deep:hover { background: #05339a; }

.btn--pink {
  background: var(--pink);
  color: #fff;
  box-shadow: var(--shadow-pink);
}
.btn--pink:hover { background: #f9829f; }

.btn--outline-light {
  border-color: #fff;
  color: #fff;
}
.btn--outline-light:hover { background: #fff; color: var(--navy); }

.btn--outline-dark {
  border-color: var(--line-strong);
  color: var(--navy);
  font-weight: 800;
}
.btn--outline-dark:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

/* =========================================================== Site header == */
/* Fixed from the first pixel rather than swapping absolute → fixed past the
   hero, so it's genuinely sticky the whole way down.

   The glass is the iOS recipe: heavy blur plus saturation (the saturate is what
   stops the backdrop going flat and grey), a low-alpha fill, a hairline top
   border, and an inset highlight along the top edge for the specular cue.
   .is-stuck just deepens it once there's content rather than hero behind. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(5, 17, 53, 0.4);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-stuck {
  background: rgba(5, 17, 53, 0.72);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 8px 32px rgba(5, 17, 53, 0.3);
}

/* No backdrop-filter (older Safari/Firefox without the flag): fall back to an
   opaque bar, since translucent-without-blur is unreadable over photography. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(5, 17, 53, 0.88); }
  .site-header.is-stuck { background: rgba(5, 17, 53, 0.96); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 18px var(--gutter);
}

.site-header__logo img { width: 192px; height: 35px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-nav__list a {
  position: relative;
  display: block;
  padding-block: 4px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: #fff;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.site-nav__list a:hover::after { transform: scaleX(1); }

/* Hamburger — hidden until the nav stops fitting */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================== Hero == */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 995px;
  padding-block: calc(var(--header-h) + 113px) 72px;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 17, 53, 0.8);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__lockup {
  width: min(372px, 80%);
  height: auto;
}

.hero__title {
  max-width: 864px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1.11;
  letter-spacing: -0.037em;
  color: #fff;
  text-wrap: balance;
}

.hero__date {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.3;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--cyan);
}

.hero__lede {
  max-width: 783px;
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: #fff;
}

.hero__copy .btn { margin-top: 26px; }

/* Hero stats */
/* Same glass as the header. The fill is a top-to-bottom gradient rather than a
   flat tint — that vertical falloff plus the inset top highlight is what reads
   as a pane of glass instead of a translucent box. A little brand blue is mixed
   into the lower stop so it doesn't go colourless over the hero. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.003), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(2, 129, 251, 0.1), rgba(2, 129, 251, 0.04)),
    rgba(5, 17, 53, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 8px 32px rgba(5, 17, 53, 0.28);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stats { background: rgba(5, 17, 53, 0.72); }
}
.stat {
  padding-left: 12px;
  border-left: 2px solid var(--coral);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.stat__label {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--coral);
}
.stat__note {
  margin-top: 6px;
  font-size: 13px;
  line-height: 18.2px;
  color: #fff;
}

/* ========================================================= Logo wall ====== */
.logo-wall { padding-block: 64px; }

/* This heading runs the full container width in the design, unlike the
   588px-capped headers elsewhere. */
.logo-wall .section-head { max-width: none; }

/* --- Marquee ------------------------------------------------------------
   Three full-bleed rows, the middle one running the other way. Each track
   holds the row's names twice and slides exactly one copy width, so the loop
   is seamless with no JS.
   ------------------------------------------------------------------------ */
.logo-marquee {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
}

.logo-track-wrap {
  overflow: hidden;
  /* Fade both ends into the section tint so rows don't hard-cut at the edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
  display: flex;
  width: max-content;
  animation: logo-marquee var(--speed, 60s) linear infinite;
}
.logo-track--reverse { animation-direction: reverse; }

/* Let people stop it to actually read a name. */
.logo-track-wrap:hover .logo-track,
.logo-track-wrap:focus-within .logo-track { animation-play-state: paused; }

/* The gap lives on the item rather than the track: with `gap`, two copies plus
   the seam between them don't total exactly twice one copy, so translateX(-50%)
   slips by half a gap every lap. Folding the gap into the item makes the halves
   exact. */
.logo-track__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 84px;
  margin-right: 16px;
  padding: 0 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  text-align: center;
  white-space: nowrap;
  color: var(--ink-muted);
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.logo-wall__cta {
  display: flex;
  width: fit-content;
  margin: 40px auto 0;
}

/* ========================================================== Audience ====== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 32px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.audience-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 32px;
  background: #fff;
}
.audience-card .h3 { margin-top: 24px; }
.audience-card__points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.audience-card__points li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--ink-muted);
}
.audience-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* ========================================================== Programs ====== */
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.program-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* The logos are wordmarks carrying the programme name, so they stand in for the
   card heading — the h3 keeps its accessible name from the img alt.
   Normalised on WIDTH, not height: two of the three are Medicarians lockups
   sharing one wordmark, and matching heights across their different aspect
   ratios rendered that shared wordmark at two different sizes. The height cap
   is only a backstop, and the fixed row keeps the copy below aligned. */
.program-card__logo {
  display: flex;
  align-items: center;
  min-height: 64px;
  margin-top: 20px;
}
.program-card__logo img {
  width: auto;
  height: auto;
  max-width: min(210px, 100%);
  max-height: 64px;
}

.program-card__body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--ink-muted);
}
/* margin-top:auto pins the date to the bottom so the three cards agree even
   though their copy runs to different lengths. */
.program-card__meta {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--blue-deep);
}

/* Copy runs top-left in both navy sections, so the bloom centres are pushed
   right and low to keep the reading column calm. The two use different spectrum
   pairs so they don't read as the same plate twice. */
.agenda {
  --bloom-a-at: 88% 8%;
  --bloom-b-at: 4% 96%;
  --bloom-c-at: 66% 58%;
  --bloom-strength: 0.2;
}
.schedule {
  --bloom-a: var(--cyan);
  --bloom-b: var(--violet);
  --bloom-c: var(--blue);
  --bloom-a-at: 92% 22%;
  --bloom-b-at: 8% 86%;
  --bloom-c-at: 50% 50%;
  --bloom-strength: 0.15;
}
/* Lowest of the three — the footer is nearly all 13–14px link text. */
.site-footer {
  --bloom-a-at: 84% 6%;
  --bloom-b-at: 8% 92%;
  --bloom-c-at: 45% 55%;
  --bloom-strength: 0.13;
}

/* ============================================================ Agenda ====== */
.topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 536px));
  justify-content: space-between;
  column-gap: clamp(48px, 14vw, 268px);
  margin-top: 40px;
}
.topic {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding-block: 20px;
  border-bottom: 1px solid rgba(224, 227, 238, 0.35);
}
.topic__num {
  flex: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  color: var(--pink);
}
.topic__title {
  font-size: 14px;
  line-height: 20.8px;
  letter-spacing: -0.24px;
  color: #fff;
}

/* Shared promo banner (Apply to Speak / Sponsor) */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
  padding: 56px 32px;
  border-radius: var(--r-md);
}
.banner--speak { background: linear-gradient(90deg, var(--blue-deep), var(--violet)); }
.banner--sponsor {
  margin-top: 0;
  background: linear-gradient(90deg, var(--blue-deep), var(--navy));
}
.banner__copy { max-width: 678px; }
.banner__body {
  margin-top: 10px;
  font-size: 16px;
  line-height: 22.4px;
  color: #fff;
}
.banner__body--sm { font-size: 14px; max-width: 534px; }

/* ========================================================== Speakers ====== */
/* Flex rather than grid: 26 speakers don't divide evenly by any sensible column
   count, and this centres the short final row instead of leaving it orphaned
   hard-left. --cols is the only thing the breakpoints need to change. */
.speaker-grid {
  --cols: 5;
  --col-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px var(--col-gap);
  margin-top: 30px;
}
.speaker-card {
  flex: 0 1 calc((100% - var(--col-gap) * (var(--cols) - 1)) / var(--cols));
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 12px;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.speaker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(4, 60, 167, 0.16);
}
.speaker-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Only one real headshot has been sourced. The rest get a monogram rather than
   that person's face repeated under 25 other people's names. */
.speaker-card__photo--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, rgba(2, 129, 251, 0.16), rgba(4, 60, 167, 0.08));
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue-deep);
}
.speaker-card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-inline: 12px;
}
.speaker-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.24px;
  color: var(--navy);
}
.speaker-card__role {
  font-size: 14px;
  line-height: 18.2px;
  color: var(--ink-muted);
}
.speaker-card__org {
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.speakers__cta {
  display: flex;
  width: fit-content;
  margin: 30px auto 0;
}

/* ========================================================== Schedule ====== */
.schedule__days { margin-top: 40px; }

/* --- Day tabs -----------------------------------------------------------
   Built by script.js. Without it every day stays stacked and visible, so
   everything below is scoped to .is-tabbed. The cyan underline is the same
   device the header nav uses.
   ------------------------------------------------------------------------ */
.sched-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 40px;
  margin-top: 40px;
  border-bottom: 1px solid rgba(224, 227, 238, 0.22);
}

.sched-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 16px;
  background: none;
  border: 0;
  text-align: left;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.18s ease;
}
.sched-tab:hover { color: rgba(255, 255, 255, 0.88); }
.sched-tab.is-on { color: #fff; }

.sched-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.sched-tab.is-on::after { transform: scaleX(1); }

.sched-tab__dow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.sched-tab__date {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: inherit;
  transition: color 0.18s ease;
}
.sched-tab.is-on .sched-tab__date { color: var(--pink); }

/* In tabbed mode the tab carries the day label, so the in-panel one goes. */
.schedule.is-tabbed .schedule__days { margin-top: 0; }
.schedule.is-tabbed .day__label { display: none; }
.schedule.is-tabbed .day {
  display: none;
  padding-block: 12px 0;
  border: 0;
}
.schedule.is-tabbed .day.is-on { display: block; }

.schedule.is-tabbed .day.is-on .day__row {
  animation: sched-row-in 0.42s ease both;
  animation-delay: var(--d, 0s);
}
@keyframes sched-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.day {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  padding-block: 32px;
  border-top: 1px solid rgba(224, 227, 238, 0.22);
}
.day:last-child { border-bottom: 1px solid rgba(224, 227, 238, 0.22); }

.day__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.day__dow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}
.day__date {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--pink);
}

.day__rows {
  display: flex;
  flex-direction: column;
}
.day__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding-block: 11px;
  border-bottom: 1px solid rgba(224, 227, 238, 0.14);
}
.day__row:last-child { border-bottom: 0; }
.day__time {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 20.8px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--cyan);
}
.day__event {
  font-size: 14px;
  line-height: 20.8px;
  letter-spacing: -0.24px;
  color: #fff;
}

/* ========================================================== Sponsors ====== */
.tiers {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 48px;
}
.tier__label {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--blue);
}
.tier__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.tier__item {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* Placeholder until real sponsor logos are sourced — same treatment as the
   logo wall's chips. */
.tier__chip {
  display: block;
  width: 112px;
  height: 22px;
  background: var(--line);
  border-radius: 3px;
}

/* Tier rank is carried by scale rather than colour, so the wall still reads as
   one grid. */
.tier--title .tier__item {
  padding: 22px 32px;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
.tier--title .tier__chip { width: 176px; height: 30px; }

.tier--platinum .tier__item { padding: 18px 24px; }
.tier--platinum .tier__chip { width: 132px; height: 24px; }

.tier--silver .tier__item { padding: 12px 18px; }
.tier--silver .tier__chip { width: 96px; height: 20px; }

.sponsors__cta {
  display: flex;
  width: fit-content;
  margin: 48px auto 0;
}

/* ============================================================= Venue ====== */
.venue__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
}
.venue__copy { flex: 1 1 588px; max-width: 645px; }
.venue__body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--ink-muted);
}
.venue__photo {
  flex: 0 1 624px;
  width: 624px;
  height: 416px;
  object-fit: cover;
  border-radius: var(--r-md);
}

.venue-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 64px;
  margin-block: 38px;
}
.venue-stat__value {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -1.08px;
  color: var(--navy);
}
.venue-stat__note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18.2px;
  color: var(--ink-faint);
}

/* ======================================================== Newsletter ====== */
.newsletter { background: var(--cyan); }
.newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.newsletter__copy { flex: 1 1 471px; max-width: 471px; }
.newsletter__body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--navy);
}

.newsletter__form { flex: 0 1 471px; }
.newsletter__row {
  display: flex;
  gap: 12px;
}
.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 51px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--navy);
}
.newsletter__input::placeholder { color: var(--ink-faint); }
.newsletter__input:focus-visible { outline-color: var(--blue-deep); }
.newsletter__row .btn { flex: 0 0 auto; height: 51px; }
.newsletter__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 20.8px;
  color: var(--blue-deep);
}

/* =========================================================== Footer ======= */
.site-footer {
  padding-block: 96px 48px;
  background: var(--navy);
  color: #fff;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.site-footer__blurb {
  max-width: 296px;
  font-size: 14px;
  line-height: 22.4px;
}
.site-footer__date {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}
.site-footer__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 12.6px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}
.site-footer__list { margin-top: 16px; }
.site-footer__list a {
  display: block;
  padding-block: 7px;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.15s ease;
}
.site-footer__list a:hover { color: var(--cyan); }

.site-footer__list--mail {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer__list--mail a {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px;
  line-height: 19.5px;
}
.site-footer__bottom a { transition: color 0.15s ease; }
.site-footer__bottom a:hover { color: var(--cyan); }

/* =========================================================================
   Responsive
   ========================================================================= */

/* --- 1180px: nav collapses, dense grids ease off ------------------------- */
@media (max-width: 1180px) {
  :root { --gutter: 32px; }

  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px var(--gutter) 28px;
    background: rgba(5, 17, 53, 0.82);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(5, 17, 53, 0.35);
    /* The header is fixed, so on a short screen the panel would otherwise run
       off the bottom with no way to reach the last links. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* collapsed by default */
    display: none;
  }
  .site-nav.is-open { display: flex; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list a {
    padding-block: 14px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .site-nav__list a::after { display: none; }
  .site-nav__cta {
    margin-top: 20px;
    align-self: flex-start;
    font-size: 14px;
    padding: 14px 26px;
  }

  .speaker-grid { --cols: 4; }
  .venue__photo { flex-basis: 45%; width: 45%; height: 360px; }

  .day { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
  .day__row { grid-template-columns: 165px minmax(0, 1fr); gap: 16px; }
}

/* --- 900px: two-up everywhere, banners stack ----------------------------- */
@media (max-width: 900px) {
  .section { padding-block: 72px; }
  .section--slim { padding-block: 56px; }

  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 72px) 56px;
  }
  .hero__inner { gap: 40px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .audience-grid { grid-template-columns: repeat(2, 1fr); }
  .speaker-grid { --cols: 3; }

  .program-grid { grid-template-columns: 1fr; gap: 16px; }
  .program-card__meta { margin-top: 20px; padding-top: 0; }

  .day {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-block: 28px;
  }

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

  .banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 40px 28px;
  }
  .banner .btn { width: 100%; }

  .venue__inner { flex-direction: column; gap: 40px; }
  .venue__copy { flex: 1 1 auto; max-width: none; }
  .venue__photo {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .newsletter__inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .newsletter__copy, .newsletter__form { flex: 1 1 auto; max-width: none; }

  .site-footer { padding-block: 72px 40px; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* --- 640px: single column ------------------------------------------------ */
@media (max-width: 640px) {
  :root { --gutter: 24px; }

  .section { padding-block: 56px; }
  .section--slim { padding-block: 48px; }

  .hero { padding-block: calc(var(--header-h) + 56px) 48px; }
  .hero__copy .btn,
  .speakers__cta,
  .logo-wall__cta,
  .sponsors__cta { width: 100%; }

  /* 2×2 rather than a single column — four stacked stats pushed the hero CTA
     well below the fold. */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
    padding: 20px;
  }
  .stat { padding-left: 10px; }
  .stat__value { font-size: clamp(22px, 6vw, 30px); }
  .stat__label { margin-top: 8px; }

  /* The notes ran to three lines each in a half-width column. Hidden visually
     rather than removed, so the figures still read the same to a screen
     reader as they do on desktop. */
  .stat__note {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .logo-marquee { gap: 12px; margin-top: 32px; }
  .logo-track__item {
    min-width: 150px;
    height: 68px;
    margin-right: 12px;
    padding: 0 18px;
    font-size: 13px;
  }

  .audience-grid { grid-template-columns: 1fr; }
  .audience-card { min-height: 0; padding: 24px; }

  .speaker-grid { --cols: 2; --col-gap: 16px; gap: 20px var(--col-gap); }
  .speaker-card__name { font-size: 16px; }

  .program-card { padding: 24px; }

  .day__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding-block: 12px;
  }

  .sched-tabs { gap: 4px 24px; }
  .sched-tab { padding-bottom: 12px; }
  .sched-tab__dow { font-size: 17px; }
  .sched-tab__date { font-size: 11px; }

  .tiers { gap: 32px; }
  .tier__list { gap: 10px; }
  .tier__item { padding: 12px 16px; }
  .tier__chip { width: 88px; height: 20px; }
  .tier--title .tier__item { padding: 18px 22px; }
  .tier--title .tier__chip { width: 132px; height: 26px; }
  .tier--platinum .tier__item { padding: 14px 18px; }
  .tier--platinum .tier__chip { width: 100px; height: 22px; }
  .tier--silver .tier__chip { width: 78px; height: 18px; }

  .banner { padding: 32px 24px; }

  .venue-stats { gap: 32px; margin-block: 28px; }

  .newsletter__row { flex-direction: column; }
  .newsletter__row .btn { width: 100%; }

  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  /* Zeroing the duration would leave the marquee parked at its end state,
     mid-loop. Stop it outright and hand the row over to the user to scroll,
     with the edge fade removed so nothing looks clipped. */
  .logo-track {
    animation: none !important;
    transform: none !important;
  }
  .logo-track-wrap {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}