/* ===========================================================
   Variation 5 — Leadership Summit 2026
   Design system + page styles. Based on VISUAL.md.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Archivo+Black&display=swap');

/* -----------------------------------------------------------
   Tokens
   ----------------------------------------------------------- */
.v5,
.v5 *,
.v5 *::before,
.v5 *::after {
  box-sizing: border-box;
}

/* Reserve scrollbar space always — prevents the ~15px viewport shift
   when navigating between short pages (no scrollbar) and tall pages
   (scrollbar present). That shift was causing the nav-bar "jerk". */
html.v5 { scrollbar-gutter: stable; }

.v5 {
  /* Type — one family, restrained weights only */
  --v5-display: 'Archivo', system-ui, sans-serif;
  --v5-sans: 'Archivo', system-ui, sans-serif;
  font-size: 15px;

  /* Palette — restrained navy/white surface, Signal Orange ≤10% punctuation */
  --v5-bg: #ffffff;
  --v5-ink: #0a1a4c;               /* deep navy text — high contrast on white */
  --v5-ink-strong: #051036;        /* deeper navy for emphasis */
  --v5-ink-muted: #5a6388;
  --v5-ink-soft: #8b91ac;
  --v5-accent: #FF9332;            /* Signal Orange — primary CTA on light surfaces */
  --v5-accent-deep: #E67711;       /* darker orange for hover */
  --v5-accent-soft: #f2f3f8;
  --v5-surface-dark: #0032A0;       /* Signal Brand Blue — primary dark surface */
  --v5-surface-soft: #f2f3f8;
  --v5-surface-softer: #f8f9fc;
  --v5-rule: #e1e4ee;
  --v5-rule-soft: #ecedf3;
  --v5-on-dark: #f4f5fb;
  --v5-on-accent: #0a1a4c;         /* deep navy text on orange */

  /* Layout — calibrated to Cyclix reference at 1512px viewport */
  --v5-container: 1600px;
  --v5-pad-x: clamp(24px, 13.5vw, 220px);          /* ~204px @ 1512 */
  --v5-section-y: clamp(48px, 5vw, 76px);          /* ~76px @ 1512 — sections fit viewport */
  --v5-section-y-tight: clamp(32px, 3.5vw, 52px);

  /* Radii */
  --v5-r-thumb: 16px;
  --v5-r-card: 20px;
  --v5-r-hero: 24px;
  --v5-r-img: 32px;                                /* hero/feature image radius */
  --v5-r-pill: 999px;

  /* Motion (cycle 5 adds reveals) */
  --v5-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v5-fast: 200ms;
  --v5-mid: 400ms;
  --v5-slow: 600ms;

  background: var(--v5-bg);
  color: var(--v5-ink);
  font-family: var(--v5-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.v5 ::selection {
  background: var(--v5-accent);
  color: var(--v5-on-accent);
}

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

:where(.v5 a) {
  color: inherit;
  text-decoration: none;
}

:where(.v5 button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:where(.v5 dl, .v5 dd, .v5 dt, .v5 figure, .v5 ol, .v5 ul, .v5 p) {
  margin: 0;
  padding: 0;
}

.v5 details > summary {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.v5 :focus-visible {
  outline: 2px solid var(--v5-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.v5__btn:focus-visible {
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .v5 *,
  .v5 *::before,
  .v5 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------
   Cycle 5 — Scroll reveals
   ----------------------------------------------------------- */
.v5--motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--v5-slow) var(--v5-ease),
    transform var(--v5-slow) var(--v5-ease);
  will-change: opacity, transform;
}

.v5--motion-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Staggered delays — only the first ~6 because the eye does not register more. */
.v5--motion-ready [data-reveal][data-reveal-delay='1'] { transition-delay: 80ms; }
.v5--motion-ready [data-reveal][data-reveal-delay='2'] { transition-delay: 160ms; }
.v5--motion-ready [data-reveal][data-reveal-delay='3'] { transition-delay: 240ms; }
.v5--motion-ready [data-reveal][data-reveal-delay='4'] { transition-delay: 320ms; }
.v5--motion-ready [data-reveal][data-reveal-delay='5'] { transition-delay: 400ms; }
.v5--motion-ready [data-reveal][data-reveal-delay='6'] { transition-delay: 480ms; }

/* Soften reveal variant: just opacity, no translate, for big surfaces */
.v5--motion-ready [data-reveal='fade'] {
  transform: none;
  transition: opacity var(--v5-slow) var(--v5-ease);
}

/* Card-stack reveal — slightly larger Y lift and softer scale for cards that
   should feel like they "settle" into place rather than just fade up. Used
   on travel cards and FAQ items (schedule days use sticky-stack instead). */
.v5--motion-ready .v5__travel-card[data-reveal],
.v5--motion-ready .v5__faq-item[data-reveal] {
  transform: translateY(22px) scale(0.992);
}
.v5--motion-ready .v5__travel-card[data-reveal].is-in,
.v5--motion-ready .v5__faq-item[data-reveal].is-in {
  transform: none;
}

/* Schedule days override: no reveal transform, they use sticky-stack scroll. */
.v5--motion-ready .v5__sched-day[data-reveal] { opacity: 1; transform: none; }

/* -----------------------------------------------------------
   Page-hero bridge image (agenda + faqs)
   A single landscape photo that sits between the page-hero and the
   main content. Generous radius, soft shadow, no overlay.
   ----------------------------------------------------------- */
.v5__section--bridge {
  padding-block: clamp(24px, 3vw, 48px) !important;
}

.v5__page-bridge {
  margin: 0;
  border-radius: var(--v5-r-hero);
  overflow: hidden;
  aspect-ratio: 21 / 8;
  box-shadow: 0 18px 48px -24px rgba(10, 26, 76, 0.18);
}

.v5__page-bridge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .v5__page-bridge { aspect-ratio: 16 / 10; border-radius: var(--v5-r-card); }
}

/* -----------------------------------------------------------
   Cycle 5 — Marquee edge mask
   ----------------------------------------------------------- */
.v5__marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 4%,
    black 96%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 4%,
    black 96%,
    transparent 100%
  );
}

/* -----------------------------------------------------------
   Cycle 5 — Refined hover states
   ----------------------------------------------------------- */
.v5__btn--primary:hover {
  transform: translateY(-1px);
}

.v5__btn--secondary:hover {
  transform: translateY(-1px);
}

/* Images keep clipping for rounded frames, but no hover scaling — none
   of these images are themselves clickable. */
.v5__hero-media,
.v5__feature-media,
.v5__days-img,
.v5__travel-card-img {
  overflow: hidden;
}


/* FAQ chevron icon already animates; add subtle column shift on hover */
.v5__faq-summary {
  transition:
    color var(--v5-fast) var(--v5-ease),
    padding-left var(--v5-mid) var(--v5-ease);
}

.v5__faq-summary:hover {
  padding-left: 6px;
}

/* -----------------------------------------------------------
   Floating detail strip — persistent summit metadata, bottom-left
   ----------------------------------------------------------- */
.v5__detail-strip {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  background: #ffffff;
  color: var(--v5-ink);
  border-radius: var(--v5-r-pill);
  box-shadow:
    0 10px 32px rgba(10, 26, 76, 0.10),
    0 0 0 1px rgba(10, 26, 76, 0.06);
}

.v5__detail-strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v5__detail-strip-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v5-ink-soft);
  line-height: 1;
}

.v5__detail-strip-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--v5-ink);
  line-height: 1.1;
  white-space: nowrap;
}

.v5__detail-strip-sep {
  width: 1px;
  height: 28px;
  background: var(--v5-rule);
}

@media (max-width: 720px) {
  .v5__detail-strip {
    display: none;            /* don't compete with the switcher on small screens */
  }
}

/* -----------------------------------------------------------
   Container
   ----------------------------------------------------------- */
.v5__wrap {
  width: 100%;
  max-width: var(--v5-container);
  margin-inline: auto;
  padding-inline: var(--v5-pad-x);
}

/* -----------------------------------------------------------
   Typography
   ----------------------------------------------------------- */
/* Heading defaults wrapped in :where() so they contribute 0 specificity
   and any modifier class (.v5__display-xl, .v5__section-h, etc.) wins. */
:where(.v5 h1, .v5 h2, .v5 h3, .v5 h4) {
  margin: 0;
  font-family: var(--v5-sans);
  font-weight: 500;
  color: var(--v5-ink);
  letter-spacing: -0.015em;
}

.v5 p {
  margin: 0;
}

.v5__display-xl {
  font-family: var(--v5-sans);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--v5-ink);
}

.v5__display-l {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--v5-ink);
}

.v5__section-h {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--v5-ink);
  font-weight: 500;
}

.v5__sub-h {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--v5-ink);
}

.v5__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--v5-ink-muted);
  font-weight: 400;
  max-width: 56ch;                                  /* two-line ceiling */
}

/* Small pill label above section headings. The orange dot is the only
   spot where the accent gets to live inside neutral chrome. */
.v5__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 6px;
  border-radius: var(--v5-r-pill);
  background: var(--v5-surface-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v5-ink);
  line-height: 1;
  align-self: flex-start;          /* keep from stretching inside flex columns */
  width: fit-content;
}

.v5__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--v5-accent);
  display: inline-block;
  flex-shrink: 0;
}

.v5__eyebrow--on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--v5-on-dark);
}

/* In containers with a generous flex gap (close-card, composite-main),
   the eyebrow→title pairing needs to read as one block — pull the
   heading up so the gap between them is ~16px regardless of context. */
.v5__close-card .v5__eyebrow + .v5__close-title,
.v5__composite-main .v5__eyebrow + h2 {
  margin-top: -28px;
}

/* Emphasis: weight-only (no italic in the Archivo cuts we load).
   Bumps one grade above the surrounding text wherever it appears. */
.v5 em {
  font-style: normal;
  font-weight: 700;
  color: var(--v5-ink);
}

.v5__display-xl em,
.v5__page-hero-title em,
.v5__section-h em,
.v5__close-title em,
.v5__feature-title em {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* -----------------------------------------------------------
   Floating tag (image overlay)
   ----------------------------------------------------------- */
/* Floating tag pill — white with an orange icon, dropped over imagery.
   The orange lives inside the icon so the pill itself stays neutral. */
.v5__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  color: var(--v5-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border-radius: var(--v5-r-pill);
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 2px 8px rgba(10, 26, 76, 0.10),
    0 0 0 1px rgba(10, 26, 76, 0.04);
}

/* Pills hidden from the design — text-only and now off entirely */
.v5__tag { display: none !important; }

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.v5__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;                              /* trimmed for a lighter footprint */
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--v5-r-pill);
  transition: background-color var(--v5-fast) var(--v5-ease),
    color var(--v5-fast) var(--v5-ease),
    transform var(--v5-fast) var(--v5-ease);
  white-space: nowrap;
}

.v5__btn--primary {
  background: var(--v5-accent);
  color: var(--v5-on-accent);
}

.v5__btn--primary:hover {
  background: var(--v5-accent-deep);
}

/* On dark surfaces the primary CTA flips to a white pill with navy ink,
   so orange stays a punctuation color and doesn't compete with the dark field. */
.v5__composite-cta .v5__btn--primary,
.v5__close-card .v5__btn--primary,
.v5__travel-card--early .v5__btn--primary {
  background: var(--v5-on-dark);
  color: var(--v5-ink);
}

.v5__composite-cta .v5__btn--primary:hover,
.v5__close-card .v5__btn--primary:hover,
.v5__travel-card--early .v5__btn--primary:hover {
  background: #ffffff;
}

.v5__btn--secondary {
  background: transparent;
  color: var(--v5-ink);
  border: 1px solid var(--v5-rule);
}

.v5__btn--secondary:hover {
  background: var(--v5-surface-soft);
  border-color: var(--v5-ink);
}

.v5__btn-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------
   Nav
   ----------------------------------------------------------- */
.v5__nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* -----------------------------------------------------------
   Home-page hero: single-logo morph
   The nav's brand element is transformed (JS-driven) to sit big + centered
   in the hero at scrollY=0, then continuously morphs back to its natural
   nav position over the first ~280px of scroll. After the logo arrives,
   the rest of the nav (links + CTA + bg) fades in (--nav-reveal: 0 -> 1).
   ----------------------------------------------------------- */

/* Screen-reader-only utility. */
.v5__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Empty slot in the hero stack — reserves the vertical space the
   transformed brand occupies so the layout doesn't collapse around it. */
.v5__hero-logo-slot {
  height: clamp(96px, 14vw, 180px);
  pointer-events: none;
}

/* When the home-page hero is present, the brand becomes the morph target.
   We keep it visible (it IS the hero logo at scroll=0), but the JS applies
   its transform inline. transform-origin: center keeps the scale anchored. */
html.v5:has(.v5__hero--logo-morph) .v5__brand {
  z-index: 60;                       /* float above all nav children during morph */
  transform-origin: center center;
  will-change: transform;
}

/* Nav links + CTA + background stay fully visible at all times.
   Only the brand morphs from hero size back into its nav slot.
   (The --nav-reveal variable is still set by JS but no longer wired
   to opacity, so it's a no-op for visibility.) */

.v5__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;                                    /* tighter, less heavy header */
  width: 100%;
  max-width: var(--v5-container);
  margin-inline: auto;
  padding-inline: var(--v5-pad-x);
  gap: 32px;
}

/* Push the <nav> all the way to the right so the links sit next to the
   Register button. Brand stays left. */
.v5__nav-inner > nav { margin-left: auto; }

.v5__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  transition: opacity var(--v5-fast) var(--v5-ease);
}

.v5__brand:hover { opacity: 0.78; }
.v5__brand:focus-visible {
  outline: 2px solid var(--v5-ink-strong);
  outline-offset: 4px;
}

/* Frame holds the layout box at nav-size; the SVG inside renders at
   near-native resolution and is downscaled via CSS transform. When the
   home-page morph then transforms the parent .v5__brand up to scale 3,
   the cumulative effective scale of the image is ~1, so the embedded
   wordmark raster is painted close to its native pixel resolution
   instead of being upsampled from a 192px-wide rasterisation. */
/* SVG logo — rasterizes natively at every size + DPR, so no transform-scale
   trick is needed. Sized directly via CSS width/height. The home-page
   hero-morph applies its own scale transform to grow this UP for the hero
   state; the SVG re-rasterizes sharp at every step of the morph. */
.v5 .v5__brand-mark {
  display: block;
  width: 128px;                                    /* 20% smaller than the previous 160 */
  height: 39px;                                    /* 593:180 aspect ratio */
  max-width: none;
}

.v5__nav-links {
  display: flex;
  align-items: center;
  gap: 4px;                                        /* tighter — the pill spacing carries the rhythm */
  list-style: none;
  margin: 0;
  padding: 0;
}

.v5__nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--v5-ink-muted);
  position: relative;
  padding: 9px 14px;                               /* gives the active pill room */
  border-radius: 999px;                            /* pill */
  transition:
    color var(--v5-fast) var(--v5-ease),
    background-color var(--v5-fast) var(--v5-ease);
}

.v5__nav-link:hover {
  color: var(--v5-ink-strong);
  background: var(--v5-surface-soft);
}

.v5__nav-link[aria-current='page'] {
  color: var(--v5-ink-strong);
  background: var(--v5-surface-soft);
}

.v5__nav-link:focus-visible {
  outline: 2px solid var(--v5-ink-strong);
  outline-offset: 2px;
}

.v5__nav-cta {
  padding: 12px 22px;                              /* sits cleanly next to the nav pills */
  font-size: 14.5px;
}

.v5__nav-cta:focus-visible {
  outline: 2px solid var(--v5-ink-strong);
  outline-offset: 3px;
}

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.v5__hero {
  padding: clamp(64px, 7vw, 112px) 0 clamp(72px, 8vw, 120px);
}

.v5__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* even 50/50 split */
  gap: clamp(48px, 6vw, 96px);
  align-items: center;                                     /* match reference: vertically centered */
}

/* Centered, stacked hero (eyebrow → headline → wide video) */
.v5__hero--centered {
  padding-top: clamp(32px, 3.5vw, 56px);
  padding-bottom: clamp(40px, 4vw, 64px);
}

.v5__hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow — neutral soft pill, sentence-case, no orange dot, to match reference */
.v5__hero-eyebrow {
  align-self: center;
  background: #EFEFF2;
  color: #1A1A1F;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px 7px;
}

.v5__hero-eyebrow::before { display: none; }

/* Headline — large, tight, no width constraint (line breaks are explicit) */
.v5__hero-stack .v5__hero-title {
  margin: 16px 0 0;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 600;                 /* semi-bold; falls back to medium if 600 not loaded */
  max-width: none;
}

.v5__hero-headline {
  margin: 20px 0 0;
  max-width: 16ch;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #0B1530;
}

.v5 .v5__hero-subhead {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.45;
  color: #3A3F4F;
  font-weight: 400;
}

@media (max-width: 720px) {
  .v5__hero-headline { font-size: clamp(34px, 9vw, 52px); max-width: none; }
  .v5__hero-subhead { font-size: 16px; }
}

/* Media — wide letterbox, breaks out wider than the headline.
   Chained class to win specificity over the base `.v5__hero-media` rule below. */
.v5__hero-media.v5__hero-media--video {
  position: relative;
  width: 100%;
  max-width: 1120px;
  aspect-ratio: 2 / 1;
  border-radius: clamp(20px, 1.5vw, 28px);
  overflow: hidden;
  margin: clamp(28px, 3vw, 40px) auto 0;
}

.v5__hero-media--video .v5__hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.v5__hero-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #1A1A1F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease;
}

.v5__hero-play:hover { transform: scale(1.05); }
.v5__hero-play svg { width: 26px; height: 26px; margin-left: 2px; }
.v5__hero-media--video.is-playing .v5__hero-play { display: none; }

@media (max-width: 720px) {
  .v5__hero-stack .v5__hero-title { font-size: clamp(40px, 11vw, 64px); }
  .v5__hero-media.v5__hero-media--video { aspect-ratio: 16 / 10; min-height: 0; }
  .v5__hero-play { width: 60px; height: 60px; }
  .v5__hero-play svg { width: 22px; height: 22px; }
}

.v5__hero-copy {
  display: flex;
  flex-direction: column;
  gap: 32px;                                        /* generous breathing room */
  max-width: 600px;
}

.v5__hero-title {
  margin: 0;
}

/* Single weight in the hero headline — kill the em weight bump */
.v5__hero-title em {
  font-weight: inherit;
  letter-spacing: inherit;
}

.v5__hero-lede {
  margin: 0;                                        /* spacing handled by parent gap */
  max-width: 52ch;
}

.v5__hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 4px;                                  /* gap handles the rest */
  flex-wrap: wrap;
}

.v5__hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--v5-rule);
}

.v5__hero-meta-item dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v5-ink-soft);
  margin-bottom: 4px;
}

.v5__hero-meta-item dd {
  font-size: 15px;
  font-weight: 500;
  color: var(--v5-ink);
  margin: 0;
  line-height: 1.35;
}

.v5__hero-media {
  position: relative;
  border-radius: var(--v5-r-img);
  overflow: visible;
  aspect-ratio: 4 / 5;                             /* shorter portrait for viewport fit */
}

.v5__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--v5-r-img);
}

/* Hero pills are larger than the shared default so they read at hero scale */
.v5__hero-media .v5__tag {
  font-size: 16px;
  padding: 14px 22px;
  box-shadow:
    0 6px 16px rgba(10, 26, 76, 0.12),
    0 0 0 1px rgba(10, 26, 76, 0.04);
}

.v5__hero-media .v5__tag--a { top: 32px; left: -16px; }
.v5__hero-media .v5__tag--b { top: 38%; right: -22px; }
.v5__hero-media .v5__tag--c { bottom: 56px; left: 28px; }
.v5__hero-media .v5__tag--d { bottom: -14px; right: 48px; }

/* -----------------------------------------------------------
   Marquee strip (creative layer)
   ----------------------------------------------------------- */
.v5__marquee {
  border-block: 0;
  background: var(--v5-bg);
  overflow: hidden;
  position: relative;
  --marquee-dur: 80s;
}

.v5__marquee-track {
  display: flex;
  width: max-content;
  padding-block: 32px;
  gap: 72px;
  animation: v5-marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}

.v5__marquee-track:hover {
  animation-play-state: paused;
}

.v5__marquee-item {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--v5-ink-soft);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity var(--v5-fast) var(--v5-ease), color var(--v5-fast) var(--v5-ease);
}

.v5__marquee-item:hover {
  opacity: 1;
  color: var(--v5-ink);
}

.v5__marquee-item::after {
  content: none;
}

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

/* -----------------------------------------------------------
   Pull quote
   ----------------------------------------------------------- */
.v5__quote {
  display: block;
  padding-block: clamp(56px, 7vw, 96px);
  text-align: center;
}

.v5__quote-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.v5__quote-text {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--v5-ink);
  max-width: 36ch;
  margin: 0;
}

.v5__quote-text em {
  font-style: normal;
  font-weight: 500;
  color: var(--v5-ink);
}

.v5__quote-attr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: var(--v5-ink-muted);
}

.v5__quote-attr-name {
  font-weight: 500;
  color: var(--v5-ink);
}

.v5__quote-attr-line {
  width: 32px;
  height: 1px;
  background: var(--v5-ink-soft);
}

/* -----------------------------------------------------------
   Background numerals for days
   ----------------------------------------------------------- */
.v5__day {
  position: relative;
  overflow: hidden;
}

.v5__day > * {
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------
   Section heading pattern
   ----------------------------------------------------------- */
.v5__section {
  padding-block: var(--v5-section-y);
  scroll-margin-top: 88px;
}

/* Section padding modifiers — replace repeated inline overrides. */
.v5__section.v5__section--flush-top { padding-top: 0; }
.v5__section.v5__section--tight-top { padding-top: var(--v5-section-y-tight); }
.v5__section.v5__section--tight-block { padding-block: var(--v5-section-y-tight); }

.v5__section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin-bottom: 48px;
}

/* -----------------------------------------------------------
   Composite section (2-row card grid)
   ----------------------------------------------------------- */
.v5__composite {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 12px);
}
/* Allow the swoosh inside the CTA card to grow to full viewport width.
   We clip at body level so the bleed never causes horizontal page scroll
   but the swoosh isn't constrained by the composite/card width. */
html.v5, body.v5 { overflow-x: clip; }
@supports not (overflow: clip) {
  html.v5, body.v5 { overflow-x: hidden; }
}

.v5__composite-row {
  display: grid;
  gap: clamp(8px, 0.8vw, 12px);
}

.v5__composite-row--top {
  grid-template-columns: 1fr;             /* single merged card */
}

.v5__composite-row--bottom {
  grid-template-columns: minmax(0, 1.33fr) minmax(0, 1fr);  /* ~57/43 */
}

/* Decorative swoosh inside the navy CTA card — uses the full "Extendede
   Swoosh.svg" (2743×270, 10.16:1 ratio). The image is sized by HEIGHT and
   centered relative to the viewport (via 100vw band) so the full ribbon
   reveals end-to-end across the page in one go, regardless of how narrow
   the card is. Body-level overflow-x:clip prevents horizontal scroll. */
/* Decorative swoosh inside the navy CTA card — uses the full "Extendede
   Swoosh.svg" (2743×270, 10.16:1 ratio). The image is sized by HEIGHT and
   centered relative to the viewport (via 100vw band) so the full ribbon
   reveals end-to-end across the page in one go, regardless of how narrow
   the card is. Body-level overflow-x:clip prevents horizontal scroll. */
.v5__composite-cta-swoosh {
  position: relative;
  /* Break out of the card horizontally — span the whole viewport */
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  /* Height set so width (= height × 10.16) reaches viewport width.
     At a 1440px viewport, 100vw × 270/2743 ≈ 141.7px tall. */
  height: clamp(73px, 11.92vw, 194px);
  margin-block: clamp(8px, 1.2vw, 20px);
  flex: 0 0 auto;
  overflow: visible;
}
.v5__composite-cta-swoosh img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Full viewport width — the swoosh shows end to end. */
  width: 100vw;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 10px 24px rgba(255, 140, 0, 0.30));
}

/* Styled inline-SVG variant — same placement as the legacy <img>,
   but rendered with multi-layer gradients + animated shimmer for depth. */
.v5__signal-ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100%;
  display: block;
  max-width: none;
  pointer-events: none;
  overflow: visible;
  isolation: isolate;            /* contain mix-blend-mode layers within the SVG */
  /* Structural drop shadow — replaces the old soft halo. Tight, defined,
     reads as physical depth instead of marketing glow. */
  filter: drop-shadow(0 6px 14px rgba(40, 14, 0, 0.28));
}

.v5__signal-ribbon__shimmer {
  transform: translateX(-1070px);
  animation: v5SignalRibbonShimmer 2.6s ease-in-out infinite;
}

@keyframes v5SignalRibbonShimmer {
  0%   { transform: translateX(-1070px); }
  100% { transform: translateX(2743px); }
}

@media (prefers-reduced-motion: reduce) {
  .v5__signal-ribbon__shimmer { animation: none; }
}

@media (max-width: 480px) {
  .v5__composite-cta-swoosh {
    height: clamp(46px, 11.92vw, 61px);            /* +10% mobile stops again */
    margin-block: 6px;
  }
}

/* Big top card — dark blue body on the left, photo on the right,
   both held inside one rounded surface. */
.v5__composite-main {
  background: var(--v5-surface-dark);
  color: var(--v5-on-dark);
  border-radius: var(--v5-r-hero);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  overflow: hidden;
  min-height: clamp(280px, 22vw, 380px);
}

.v5__composite-main-body {
  padding: clamp(24px, 2.8vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.4vw, 32px);
}

.v5__composite-main h2 {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--v5-on-dark);
  max-width: 22ch;
}

.v5__composite-main .v5__btn--ghost {
  align-self: flex-start;
  background: var(--v5-on-dark);
  color: var(--v5-ink);
}

.v5__composite-main .v5__btn--ghost:hover {
  background: #fff;
}

.v5__composite-main-image {
  position: relative;
  padding: clamp(16px, 1.8vw, 28px);
  min-height: 100%;
}

.v5__composite-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--v5-r-card);
}

/* Bottom-left card — light gray, dark text, with photo + floating chips */
.v5__composite-mission {
  background: var(--v5-surface-softer);
  color: var(--v5-ink);
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--v5-r-hero);
  border: 1px solid var(--v5-rule);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 28px);
}

.v5__composite-mission-body {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--v5-ink);
  max-width: 38ch;
}

.v5__composite-mission-photo {
  position: relative;
  border-radius: var(--v5-r-card);
  overflow: hidden;
  flex: 1;
  min-height: 96px;
}

.v5__composite-mission-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v5__composite-mission-photo .v5__tag--a { top: 20px; left: 20px; }
.v5__composite-mission-photo .v5__tag--b { top: 50%; right: 20px; transform: translateY(-50%); }
.v5__composite-mission-photo .v5__tag--c { bottom: 20px; left: 20px; }

/* Bottom-right card — dark blue. The heading text fills the entire card
   and is vertically centered. The swoosh and register button float at the
   bottom (absolutely positioned) so they don't displace the heading. */
/* Bottom-right card — dark blue. Three children: heading group → swoosh
   ribbon (spans 100vw, breaks out horizontally) → register button. Layout
   is flex column with space-between, so the swoosh always sits between
   the heading and the button. Top padding is the largest stop so the
   heading sits roughly at the visual centre of the card. */
.v5__composite-cta {
  position: relative;
  background: var(--v5-surface-dark);
  color: var(--v5-on-dark);
  padding: clamp(72px, 7.5vw, 112px) clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 40px);
  border-radius: var(--v5-r-hero);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 1.8vw, 32px);
}

.v5__composite-cta h3 {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--v5-on-dark);
  max-width: none;
  text-wrap: balance;
}

.v5__composite-cta p {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: rgba(244, 245, 251, 0.72);
  max-width: 36ch;
  margin-top: 16px;
}

.v5__composite-cta-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.v5__composite-cta .v5__btn--primary {
  background: var(--v5-on-dark);
  color: var(--v5-ink);
}

.v5__composite-cta .v5__btn--primary:hover {
  background: #fff;
}


@media (max-width: 960px) {
  .v5__composite-row--bottom {
    grid-template-columns: 1fr;
  }
  .v5__composite-main {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .v5__composite-main-image {
    aspect-ratio: 4 / 3;
  }
}

/* -----------------------------------------------------------
   Numbered days
   ----------------------------------------------------------- */
.v5__days {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* Image stack pins to the top as the day list on the right scrolls past. */
.v5__days-images {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);                /* more breathing room between images */
  position: sticky;
  top: 112px;
  height: fit-content;
  align-self: start;
}

.v5__days-img {
  position: relative;
  border-radius: var(--v5-r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;                                  /* consistent width across all three */
  margin: 0;                                    /* drop the staggered offsets */
}

.v5__days-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v5__days-list {
  display: flex;
  flex-direction: column;
}

.v5__day {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--v5-rule);
}

.v5__day:last-child {
  border-bottom: 1px solid var(--v5-rule);
}

.v5__day-num {
  font-family: var(--v5-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v5-ink-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

.v5__day-date {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v5-ink-soft);
  margin-bottom: 6px;
}

.v5__day-title {
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.2;
  margin-bottom: 6px;
}

.v5__day-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--v5-ink-muted);
  max-width: 58ch;
}

.v5__day-sub {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  max-width: 58ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v5-ink-muted);
}

.v5__day-sub > li {
  padding-left: 18px;
  position: relative;
}

.v5__day-sub > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--v5-orange, #F58B2A);
}

.v5__day-sub > li strong {
  color: var(--v5-ink, #0B1530);
  font-weight: 600;
}

.v5__composite-main-lede {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
}

.v5__day--optional .v5__day-date {
  color: var(--v5-ink-soft);
}

.v5__day-title {
  font-weight: 500;
}

/* -----------------------------------------------------------
   Why Attend — closing CTA section
   ----------------------------------------------------------- */
.v5__section--why {
  padding-block: var(--v5-section-y);
}

/* Outer container: photo is the background, white card overlays on the right,
   warm orange light spills in from the left edge. */
.v5__why {
  position: relative;
  border-radius: var(--v5-r-hero, 28px);
  overflow: hidden;
  isolation: isolate;
  background: #0B1530;
  min-height: clamp(380px, 38vw, 500px);
  padding: clamp(20px, 2.4vw, 36px);
  display: flex;
  align-items: center;
  justify-content: flex-start;          /* card pinned to the left */
}

/* Warm orange light spilling in from the left edge — sits behind and around
   the card so it reads as a halo, then fades into the photo past midpoint. */
.v5__why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(75% 100% at -4% 50%,
      rgba(245, 139, 42, 0.92) 0%,
      rgba(245, 139, 42, 0.62) 24%,
      rgba(245, 139, 42, 0.24) 50%,
      transparent 72%),
    linear-gradient(to right,
      rgba(11, 21, 48, 0.18) 0%,
      rgba(11, 21, 48, 0.04) 45%,
      rgba(11, 21, 48, 0) 65%);
  pointer-events: none;
}

/* --- Photo: full-bleed background of the container ----------------------- */
.v5__why-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0B1530;
}

/* Specificity bump — `.v5 img { height: auto }` was beating the bare class.
   Using two classes keeps it ahead without resorting to !important. */
.v5 .v5__why-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Bias toward the speaker's upper body / face in the new landscape photo. */
  object-position: 60% 32%;
  display: block;
  transform: scale(1.04);              /* prevents the edge-pixel sliver during reveal */
  transition: transform 1100ms cubic-bezier(.2,.65,.2,1);
}

.v5__why.is-in .v5__why-photo,
[data-reveal].is-in .v5__why-photo { transform: scale(1.0); }

/* --- Content card: white, overlaid on the left --------------------------- */
.v5__why-card {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  color: var(--v5-ink, #0B1530);
  border-radius: clamp(18px, 1.6vw, 24px);
  padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1vw, 18px);
  width: clamp(360px, 44%, 480px);
  box-shadow: 0 24px 48px -28px rgba(11, 21, 48, 0.45);
  overflow: hidden;
}

/* Thin orange accent rule above the eyebrow, sitting flush with the top edge. */
.v5__why-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(22px, 2.2vw, 32px);
  width: 48px;
  height: 3px;
  background: var(--v5-orange, #F58B2A);
  border-radius: 0 0 4px 4px;
  z-index: 1;
}

.v5__why-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v5__why-h {
  font-family: var(--v5-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--v5-ink, #0B1530);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.v5__why-card > * { position: relative; z-index: 2; }

.v5 .v5__why-card .v5__why-lede {
  margin: 0;
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.5;
  color: rgba(11, 21, 48, 0.72);
  max-width: 52ch;
}

.v5 .v5__why-card .v5__why-leave {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 21, 48, 0.5);
}

/* Numbered outcome list — light dividers tuned for the white card. */
.v5__why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid rgba(11, 21, 48, 0.12);
}

.v5__why-list > li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 10px 2px;
  border-top: 1px solid rgba(11, 21, 48, 0.12);
  transition: padding-left 220ms ease;
}

.v5__why-list-num {
  font-family: var(--v5-sans);
  font-feature-settings: "tnum" 1;     /* tabular numerals so 01/02/03 align */
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--v5-orange, #F58B2A);
  align-self: start;
  padding-top: 2px;                    /* optical line-up with first text line */
}

.v5__why-list-text {
  font-size: clamp(13px, 0.9vw, 14.5px);
  line-height: 1.45;
  color: var(--v5-ink, #0B1530);
  text-wrap: pretty;
}

/* CTA row */
.v5__why-cta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.v5__why-cta-note {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(11, 21, 48, 0.6);
}

/* Dark filled primary CTA — inverse of the surrounding white card. */
.v5__why-card .v5__btn--primary {
  background: var(--v5-ink, #0B1530);
  color: #FFFFFF;
  border-color: var(--v5-ink, #0B1530);
}

.v5__why-card .v5__btn--primary:hover {
  background: #15224a;
  border-color: #15224a;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .v5__why {
    min-height: 0;
    padding: clamp(20px, 4vw, 32px);
    align-items: flex-end;             /* card drops to the bottom of the image */
    aspect-ratio: 5 / 6;                /* portrait-ish container at narrow widths */
  }
  .v5__why-card {
    width: 100%;
    padding: clamp(24px, 5vw, 36px) clamp(22px, 4.5vw, 32px);
  }
  .v5__why-h { max-width: none; }
  .v5__why-list > li { grid-template-columns: 44px 1fr; gap: 16px; }
  .v5__why::before {
    background:
      radial-gradient(120% 70% at -10% 0%,
        rgba(245, 139, 42, 0.82) 0%,
        rgba(245, 139, 42, 0.45) 28%,
        rgba(245, 139, 42, 0.15) 55%,
        transparent 78%);
  }
}

@media (max-width: 520px) {
  .v5__why-stat { padding: 12px 14px; gap: 12px; max-width: 86%; }
  .v5__why-stat-num { font-size: 30px; }
  .v5__why-stat-label { font-size: 11.5px; }
  .v5__why-chip { font-size: 11.5px; padding: 7px 12px; }
  .v5__why-list > li { padding: 14px 4px; }
  .v5__why-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .v5__why-cta-note { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .v5 .v5__why-photo {
    transform: scale(1);
    transition: none;
  }
}

/* -----------------------------------------------------------
   Speakers grid — six cards in one row
   ----------------------------------------------------------- */
.v5__speakers {
  padding-block: var(--v5-section-y);
}

.v5__speakers-head {
  margin-bottom: clamp(40px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v5__speakers-head .v5__section-h {
  white-space: nowrap;
}

.v5__speakers-head .v5__lede {
  max-width: 62ch;                       /* two-line ceiling for the typical lede */
}

@media (max-width: 720px) {
  .v5__speakers-head .v5__section-h {
    white-space: normal;                 /* allow wrap below 720px viewport */
  }
}

.v5__speakers-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}

.v5__speaker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  min-width: 0;
}

.v5__speaker-img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--v5-r-card);
  overflow: hidden;
  background: var(--v5-surface-soft);
  transition: transform var(--v5-mid) var(--v5-ease);
}

.v5__speaker:hover .v5__speaker-img {
  transform: translateY(-2px);
}

.v5__speaker-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--v5-mid) var(--v5-ease);
}

.v5__speaker:hover .v5__speaker-img img {
  transform: scale(1.04);
}

.v5__speaker-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--v5-ink);
  line-height: 1.2;
}

.v5__speaker-role {
  display: block;
  font-size: 11px;
  color: var(--v5-ink-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

@media (max-width: 960px) {
  .v5__speakers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 28px;
  }
}

@media (max-width: 600px) {
  .v5__speakers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------
   The room — single background image with color bleed from the left
   ----------------------------------------------------------- */
/* "Room" section — type sits directly on the photo, no card surface.
   Modernized via: (1) subtle brand-blue tint on the photo so it feels
   designed, not literal stock; (2) localized radial darkening behind
   the text only — not a global overlay; (3) editorial typography
   anchored bottom-left with generous breathing room. */
.v5__room {
  position: relative;
  isolation: isolate;
  border-radius: var(--v5-r-hero);
  overflow: hidden;
  min-height: clamp(480px, 56vw, 680px);
  padding: clamp(32px, 4.5vw, 72px);
  color: var(--v5-on-dark);
  background: var(--v5-surface-dark);
  display: flex;
  align-items: flex-end;
}

.v5__room-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.v5__room-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
}

/* Layer 1 — very subtle navy wash over the whole photo. Light multiply
   tint so the photo reads as part of the palette, not literal stock. */
.v5__room::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(10, 26, 76, 0.08);
  mix-blend-mode: multiply;
}

/* Layer 2 — soft, wide bloom behind the text. Generous radius and
   gradual stops so the fade is imperceptible — no visible edge. */
.v5__room::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 130% at 25% 100%,
      rgba(0, 22, 72, 0.34) 0%,
      rgba(0, 22, 72, 0.22) 25%,
      rgba(0, 22, 72, 0.12) 55%,
      rgba(0, 22, 72, 0.04) 80%,
      rgba(0, 22, 72, 0.00) 100%);
}

/* Text block — no card surface, just type on the photo. */
.v5__room-body {
  position: relative;
  z-index: 3;
  max-width: min(560px, 70%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.v5__room-title {
  color: var(--v5-on-dark);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  /* Subtle text shadow for legibility — reads as a soft halo,
     not a hard drop shadow. */
  text-shadow: 0 2px 16px rgba(0, 20, 80, 0.4);
}

.v5__room-lede {
  color: rgba(244, 245, 251, 0.94);
  max-width: 48ch;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 20, 80, 0.5);
}

/* -----------------------------------------------------------
   THE ROOM — pinned scene transition
   Inside a rounded card centered in white space. Scene A is the
   room photo. Orange sweeps up. Pattern wave rows mask in bottom→top.
   Headline + lede land alongside the upper-middle rows. Driven by
   --p (0..1) set by js/v5-room-pin.js.
   ----------------------------------------------------------- */
.v5-rp {
  --p: 0;
  position: relative;
  background: var(--v5-bg);
}

/* Track defines the scroll distance the pin will hold. Animation is
   scroll-driven (reverses on scroll up) and compressed into a short
   window so the full sequence completes quickly. */
.v5-rp__track {
  position: relative;
  height: 175vh;
}

/* Stage is the pinned 100vh viewport — white surface that frames the card. */
.v5-rp__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--v5-bg);
  display: grid;
  place-items: center;
  /* Match the site container/gutter used by .v5__wrap so the card
     aligns with every other section's edge. */
  padding-inline: var(--v5-pad-x);
  padding-block: clamp(48px, 10vh, 120px);
}

/* The card — clipped surface that holds every animated layer. Width
   is capped by the site container so it doesn't extend wider than
   the surrounding sections. */
.v5-rp__card {
  position: relative;
  width: 100%;
  max-width: calc(var(--v5-container) - 2 * var(--v5-pad-x));
  aspect-ratio: 16 / 9;
  max-height: 100%;
  border-radius: clamp(20px, 1.8vw, 32px);
  overflow: hidden;
  background: var(--v5-accent);
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(0, 22, 72, 0.18);
}

/* -- Layer 0: Photo (Scene A) -- */
.v5-rp__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: clamp(0, calc((0.40 - var(--p)) / 0.10), 1);
}
.v5-rp__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  display: block;
}
.v5-rp__photo-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 130% at 25% 100%,
      rgba(0, 22, 72, 0.42) 0%,
      rgba(0, 22, 72, 0.26) 30%,
      rgba(0, 22, 72, 0.12) 60%,
      rgba(0, 22, 72, 0.00) 100%);
}

/* Photo-state text — visible only in Scene A, ducks out as orange rises. */
.v5-rp__photo-body {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 5%, 88px);
  right: clamp(24px, 5%, 88px);
  bottom: clamp(28px, 7%, 72px);
  max-width: min(560px, 70%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #ffffff;
  opacity: clamp(0, calc((0.18 - var(--p)) / 0.10), 1);
  transform: translateY(calc(var(--p) * -24px));
}
.v5-rp__photo-title {
  color: #ffffff;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 20, 80, 0.45);
}
.v5-rp__photo-lede {
  color: rgba(244, 245, 251, 0.94);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
  max-width: 44ch;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 20, 80, 0.5);
}

/* -- Layer 1: Orange overlay. Fades onto the photo (no sweep). -- */
.v5-rp__orange {
  --orange-a: 0;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--v5-accent);
  opacity: var(--orange-a);
  will-change: opacity;
}

/* -- Layer 2: Pattern rows. Anchored bottom-right of the card. The SVG
      is sized larger than the card so the wave field reads as a swatch
      flowing off the right edge, matching the reference composition. -- */
.v5-rp__pattern {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: #ffffff;
  pointer-events: none;
  overflow: hidden;
}
.v5-rp__pattern svg {
  position: absolute;
  right: 0;
  bottom: 0;
  /* Pattern intrinsic ratio is 1160:679 (~1.71:1). At width 100%
     of the card, the pattern occupies the lower ~55% of the card
     height — leaving clean orange in the upper-left for the
     headline, with the bottom-most wave row spanning the full
     card width (per the reference). */
  width: 100%;
  height: auto;
  display: block;
}
.v5-rp__pattern .v5-rp-row {
  --r: 0;
  opacity: var(--r);
  will-change: opacity;
}

/* -- Layer 3: Final body (headline + lede over the orange + pattern).
      Anchored top-left, title case, no eyebrow — per reference. -- */
.v5-rp__body {
  --body-t: 0;
  position: absolute;
  z-index: 4;
  left: clamp(32px, 7%, 112px);
  right: auto;
  top: clamp(48px, 13%, 144px);
  max-width: min(560px, 56%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #ffffff;
  opacity: var(--body-t);
  transform: translate3d(0, calc((1 - var(--body-t)) * 20px), 0);
  will-change: transform, opacity;
}
.v5-rp__title {
  color: #ffffff;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  text-transform: none;
}
.v5-rp__lede {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.45;
  max-width: 38ch;
  margin: 0;
  font-weight: 500;
}

/* -- Reduced motion: no pin, no animation, render the final state. -- */
@media (prefers-reduced-motion: reduce) {
  .v5-rp__track { height: auto; }
  .v5-rp__stage {
    position: relative;
    height: auto;
  }
  .v5-rp__photo,
  .v5-rp__photo-body { display: none; }
  .v5-rp__orange { opacity: 1; }
  .v5-rp__pattern .v5-rp-row { --r: 1; }
  .v5-rp__body { opacity: 1; transform: none; }
}

/* -- Narrow screens: tighter pin + card switches to portrait aspect. -- */
@media (max-width: 720px) {
  .v5-rp__track { height: 200vh; }
  .v5-rp__stage { padding: 16px; }
  .v5-rp__card { aspect-ratio: 4 / 5; }
  .v5-rp__title { font-size: clamp(28px, 8vw, 44px); }
  .v5-rp__body {
    top: clamp(28px, 8%, 64px);
    max-width: 78%;
  }
  .v5-rp__pattern svg { width: 110%; right: -8%; }
}

/* -----------------------------------------------------------
   Featured event — full-bleed image with a white card floated on top-left
   ----------------------------------------------------------- */
.v5__feature {
  position: relative;
  border-radius: var(--v5-r-hero);
  overflow: hidden;
  min-height: clamp(420px, 42vw, 600px);
  isolation: isolate;
  background: var(--v5-accent);  /* orange surface that bleeds through the masked image */
}

.v5__feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
}

.v5__feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
  /* Image bleeds much further left — fade starts almost immediately,
     image is fully solid by 16% of the container width. */
  -webkit-mask-image: linear-gradient(95deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 2%,
    rgba(0, 0, 0, 0.68) 8%,
    #000 16%,
    #000 100%);
  mask-image: linear-gradient(95deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 2%,
    rgba(0, 0, 0, 0.68) 8%,
    #000 16%,
    #000 100%);
}

/* Orange glow — high-intensity warm wash. Peak alpha pushed up so the
   orange reads as a strong field, not a tint. */
.v5__feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(95deg,
    rgba(255, 147, 50, 0.0) 0%,
    rgba(255, 147, 50, 0.88) 3%,
    rgba(255, 147, 50, 1.0) 10%,       /* peak hugged to the left */
    rgba(255, 147, 50, 0.78) 22%,
    rgba(255, 147, 50, 0.52) 36%,
    rgba(255, 147, 50, 0.32) 48%,      /* still warm just past the card edge */
    rgba(255, 147, 50, 0.0) 58%);      /* fades out shortly after */
  mix-blend-mode: screen;
}

.v5__feature-card {
  position: relative;
  z-index: 2;
  width: min(440px, 46%);
  margin: clamp(24px, 3vw, 48px);
  background: var(--v5-bg);
  border-radius: var(--v5-r-card);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 8px 32px rgba(10, 26, 76, 0.08);
}

.v5__feature-title {
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

.v5__feature-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-block: 16px;
  border-top: 1px solid var(--v5-rule);
  border-bottom: 1px solid var(--v5-rule);
}

.v5__feature-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--v5-ink-muted);
}

.v5__feature-meta-row svg {
  width: 16px;
  height: 16px;
  color: var(--v5-ink-soft);
  flex-shrink: 0;
}

.v5__feature-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--v5-ink-muted);
  max-width: 40ch;
}

.v5__feature-cta {
  align-self: flex-start;
  margin-top: 4px;
}

.v5__feature-media .v5__tag--a { top: 28px; right: 28px; }

/* -----------------------------------------------------------
   FAQ accordion
   ----------------------------------------------------------- */
.v5__faq-list {
  border-top: 1px solid var(--v5-rule);
}

/* Separator after a FAQ group when more groups follow on the same page. */
.v5__faq-list--group {
  margin-bottom: 64px;
}

.v5__faq-item {
  border-bottom: 1px solid var(--v5-rule);
}

.v5__faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--v5-fast) var(--v5-ease);
}

.v5__faq-summary::-webkit-details-marker {
  display: none;
}

.v5__faq-summary:hover {
  color: var(--v5-ink-strong);
}

.v5__faq-q {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: inherit;
}

.v5__faq-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--v5-r-pill);
  background: var(--v5-surface-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v5-ink);
  flex-shrink: 0;
  transition: transform var(--v5-mid) var(--v5-ease),
    background var(--v5-fast) var(--v5-ease);
}

.v5__faq-icon svg {
  width: 14px;
  height: 14px;
}

.v5__faq-item[open] .v5__faq-icon {
  transform: rotate(45deg);
  background: var(--v5-ink);
  color: var(--v5-on-dark);
}

.v5__faq-a {
  padding: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v5-ink-muted);
  max-width: 64ch;
}

/* -----------------------------------------------------------
   Closing CTA
   ----------------------------------------------------------- */
/* Close section — one outer blue card with the grey "Send it in" panel
   nested inside as an inset right column. Reads as a single composed
   surface, not two standalone cards. */
.v5__close {
  display: block;
}

.v5__close-card {
  background: var(--v5-ink);
  color: var(--v5-on-dark);
  border-radius: var(--v5-r-hero);
  padding: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: stretch;
  min-height: 216px;
}

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

.v5__close-card--solo .v5__close-title { max-width: 22ch; }

/* -----------------------------------------------------------
   Travel — Recommended hotels list (two-up under step 02)
   ----------------------------------------------------------- */
.v5__travel-hotels {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v5__travel-hotel {
  padding: 14px 16px;
  background: rgba(11, 21, 48, 0.04);
  border: 1px solid rgba(11, 21, 48, 0.08);
  border-radius: 12px;
}

.v5__travel-hotel-name {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--v5-ink, #0B1530);
}

.v5__close-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(8px, 1vw, 16px) 0;
}

.v5__close-title {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--v5-on-dark);
  max-width: 14ch;
  margin: 0;
}

.v5__close-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.v5__close-note {
  font-size: 14px;
  color: rgba(244, 245, 251, 0.65);
  max-width: 32ch;
  margin: 0;
}

/* Nested grey panel inside the blue close-card. */
.v5__close-side {
  background: var(--v5-surface-softer);
  color: var(--v5-ink);
  border-radius: var(--v5-r-card);
  padding: clamp(24px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
}

.v5__close-side-h {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--v5-ink);
  margin: 0;
}

.v5__close-side p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(10, 26, 76, 0.72);
  margin: 0;
}

.v5__close-side .v5__btn--secondary {
  align-self: flex-start;
  background: rgba(10, 26, 76, 0.06);
  border-color: transparent;
  color: var(--v5-ink);
}

.v5__close-side .v5__btn--secondary:hover {
  background: rgba(10, 26, 76, 0.10);
}

/* Stack to single column at narrower viewports. */
@media (max-width: 720px) {
  .v5__close-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* -----------------------------------------------------------
   Footer (new — big-statement layout, matches reference frame)
   ----------------------------------------------------------- */
.v5__footer-big {
  background: var(--v5-bg);
  color: var(--v5-ink);
  border-top: 1px solid var(--v5-rule);
  padding: clamp(64px, 8vw, 112px) 0 clamp(28px, 3vw, 40px);
  /* No margin-top — the footer's own padding-top supplies the breathing room
     from the preceding section. Adding margin-top here doubled the gap. */
}

/* -----------------------------------------------------------
   Page pattern — a 30vh band fixed to the viewport bottom.
   The website is treated as a layer on top of this. As the user
   scrolls down past the natural end of content, the footer slides
   up over the pattern, progressively revealing it.
     ::before — base layer (light cyan #C5E9FA), drifts on scroll
                (parallax).
     .v5__page-pattern-spot — heavier-blue layer that uses the
                pattern as a mask + an irregular cluster of radial
                gradients centered on the cursor.
   ----------------------------------------------------------- */
.v5__page-pattern {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;                                       /* sits beneath every content layer */
  height: 30vh;
  min-height: 220px;
  background-color: #ffffff;
  overflow: hidden;
}

/* Reserve scroll room past the footer so it can slide up over the
   fixed pattern — without this, the footer simply rests at the
   viewport bottom and the pattern never reveals. */
body.v5 { padding-bottom: 30vh; }

/* Lift every real content layer above the pattern AND give them solid
   backgrounds so the pattern is fully covered during normal scroll.
   The pattern only ever reveals in the padding-bottom strip below the
   footer, never through transparent sections in mid-page. */
/* Lift main + footer above the fixed bg pattern. Nav keeps its sticky
   positioning from the .v5__nav rule above — DON'T override it here. */
.v5 main,
.v5__footer-big { position: relative; z-index: 1; }
.v5__nav { z-index: 50; }
.v5 main { background: var(--v5-bg); }              /* opaque white covers the fixed pattern */

/* Faint shadow under the footer — just a hint of separation from the
   pattern layer beneath, nothing more. */
.v5__footer-big {
  box-shadow: 0 12px 28px -16px rgba(10, 26, 76, 0.10);
}
.v5__page-pattern::before {
  content: '';
  position: absolute;
  inset: -10% -2% -10% -2%;
  background: url('../Pattern.svg?v=2-brand-blue') center / cover no-repeat;
  pointer-events: none;
  transform: translate3d(0, var(--v5-pp-py, 0px), 0);
  will-change: transform;
  transition: transform 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .v5__page-pattern::before { transform: none; transition: none; }
}

/* Single info column (the big statement was removed). */
.v5__footer-big-grid {
  display: block;
}

.v5__footer-statement {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(48px, 7.6vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--v5-ink);
}

.v5__footer-statement-line {
  display: block;
}

/* Right column: tagline on top + inner 3-col grid below */
.v5__footer-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 88px);
  padding-top: 10px;
}

.v5__footer-tagline {
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.45;
  color: var(--v5-ink);
  max-width: 56ch;
}

.v5__footer-tagline a {
  color: var(--v5-ink-soft);
  transition: color var(--v5-fast) var(--v5-ease);
  white-space: nowrap;
}

.v5__footer-tagline a:hover {
  color: var(--v5-ink);
}

/* The 3-col inner grid: heading | body | legal */
.v5__footer-rows {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(160px, 1.4fr) minmax(120px, 0.9fr);
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: 28px;
  font-size: 14px;
  line-height: 1.55;
}

.v5__footer-row-h {
  font-size: 15px;
  font-weight: 500;
  color: var(--v5-ink);
}

.v5__footer-row-body {
  color: var(--v5-ink-muted);
}

.v5__footer-legal-cell {
  color: var(--v5-ink-muted);
}

.v5__footer-legal-cell .v5__footer-legal-h {
  font-size: 15px;
  font-weight: 500;
  color: var(--v5-ink);
  margin-bottom: 4px;
  display: block;
}

.v5__footer-legal-cell a {
  color: inherit;
  transition: color var(--v5-fast) var(--v5-ease);
}

.v5__footer-legal-cell a:hover {
  color: var(--v5-ink);
}

/* Bottom row with the small wordmark logo */
.v5__footer-bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  margin-top: clamp(56px, 7vw, 96px);
}

.v5 .v5__footer-big .v5__footer-bottom img {
  display: block;
  height: 28px;
  width: auto;
  max-width: none;
}

@media (max-width: 720px) {
  .v5__footer-meta { padding-top: 0; }
  .v5__footer-rows { grid-template-columns: 1fr; row-gap: 32px; }
  .v5__footer-rows .v5__footer-row-body { margin-top: -20px; }
}

/* -----------------------------------------------------------
   Sub-page hero
   ----------------------------------------------------------- */
.v5__page-hero {
  padding: clamp(32px, 4vw, 56px) 0 clamp(24px, 3vw, 40px);
}

.v5__page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}

.v5__page-hero-title {
  font-family: var(--v5-sans);
  font-weight: 600;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-top: 12px;
}

.v5__page-hero-lede {
  margin-top: 16px;
  max-width: 52ch;
}

.v5__page-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-size: 14px;
  color: var(--v5-ink-muted);
}

.v5__page-hero-meta strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--v5-ink);
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------
   Travel grid
   ----------------------------------------------------------- */
/* Bento — mirror rhythm: row 1 is 7/5, row 2 is 5/7. Same widths,
   sides swapped — creates intentional asymmetry that pairs across
   the rows instead of two unrelated grids stacked. Pairs visual
   weight with size: the two big cards (7-col) are the soft surfaces;
   the two narrow cards (5-col) are the brand-blue surfaces. */
/* -----------------------------------------------------------
   Travel page — editorial restructure
   Stat strip → featured hotel → two-up logistics → editorial extras
   ----------------------------------------------------------- */

/* Tight section padding helper for stat strip + extras */
.v5__section--tight {
  padding-block: clamp(20px, 2.4vw, 40px);
}

/* ---- 1. STAT STRIP — Swiss horizontal chart, hairline column dividers ---- */
.v5__travel-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--v5-rule);
  border-bottom: 1px solid var(--v5-rule);
  padding: clamp(24px, 2.8vw, 40px) 0;
}

.v5__travel-stat {
  position: relative;
  padding: 0 clamp(20px, 2.4vw, 40px);
}

/* Hairline dividers between stats — structural, not decorative side-stripe. */
.v5__travel-stat + .v5__travel-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--v5-rule);
}

.v5__travel-stat:first-child { padding-left: 0; }
.v5__travel-stat:last-child { padding-right: 0; }

.v5__travel-stat-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v5-ink-muted);
  margin-bottom: 10px;
}

.v5__travel-stat-figure {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--v5-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.v5__travel-stat-unit {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  color: var(--v5-ink-muted);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 720px) {
  .v5__travel-stats { grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
  .v5__travel-stat { padding: 0; }
  .v5__travel-stat + .v5__travel-stat::before { display: none; }
}

/* ---- 2. HOTEL FEATURE — asymmetric marquee block ---- */
.v5__travel-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 4.5vw, 80px);
  align-items: center;
}

.v5__travel-feature-media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--v5-r-hero);
  overflow: hidden;
  background: var(--v5-surface-soft);
}

.v5__travel-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v5__travel-feature-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.v5__travel-feature-title {
  margin: 4px 0 0;
  font-weight: 600;
}

.v5__travel-feature-body .v5__lede { margin: 0; max-width: 48ch; }

.v5__travel-feature-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: var(--v5-ink);
}

.v5__travel-feature-bullets li {
  position: relative;
  padding-left: 28px;
  line-height: 1.45;
}

/* Orange dash before each amenity — punctuation, not decoration. */
.v5__travel-feature-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 16px;
  height: 1.5px;
  background: var(--v5-accent);
}

/* "Included" callout — soft surface + orange pill tag, single moment of brand orange. */
.v5__travel-feature-callout {
  margin: 16px 0 0;
  padding: 16px 20px;
  background: var(--v5-surface-soft);
  border-radius: var(--v5-r-card);
  font-size: 15px;
  line-height: 1.45;
  color: var(--v5-ink);
  display: flex;
  align-items: center;
  gap: 14px;
}

.v5__travel-feature-callout-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v5-accent);
  padding: 6px 11px;
  background: rgba(255, 147, 50, 0.12);
  border-radius: 999px;
  flex-shrink: 0;
  line-height: 1;
}

@media (max-width: 860px) {
  .v5__travel-feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .v5__travel-feature-media { aspect-ratio: 16 / 10; }
}

/* ---- 3. LOGISTICS TWO-UP — flying in + getting around ---- */
.v5__travel-logistics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 64px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--v5-rule);
}

.v5__travel-logistic {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v5__travel-logistic-title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 6px 0 0;
  color: var(--v5-ink);
}

.v5__travel-logistic-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--v5-ink-muted);
  margin: 0;
  max-width: 50ch;
}

.v5__travel-logistic-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--v5-ink-soft);
  margin: 6px 0 0;
  max-width: 50ch;
}

/* Definition list of facts — spec-sheet style, no bullets */
.v5__travel-facts {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--v5-rule-soft);
}

.v5__travel-facts > div {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--v5-rule-soft);
}

.v5__travel-facts dt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v5-ink-soft);
  margin: 0;
  line-height: 1.6;
}

.v5__travel-facts dd {
  font-size: 15px;
  font-weight: 500;
  color: var(--v5-ink);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .v5__travel-logistics { grid-template-columns: 1fr; gap: 36px; }
}

/* ---- 4. OCTOBER EXTRAS — editorial sidebar ---- */
.v5__travel-extras {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--v5-rule);
}

.v5__travel-extras-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v5__travel-extras-title {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.v5__travel-extras-body p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--v5-ink-muted);
  margin: 0;
  max-width: 52ch;
}

.v5__travel-extras-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--v5-r-card);
  overflow: hidden;
  background: var(--v5-surface-soft);
}

.v5__travel-extras-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .v5__travel-extras { grid-template-columns: 1fr; gap: 24px; }
  .v5__travel-extras-media { aspect-ratio: 16 / 10; }
}

/* -----------------------------------------------------------
   Schedule (agenda page expanded view)
   ----------------------------------------------------------- */
.v5__schedule {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Schedule container — bottom padding gives the last stacked card room
   to scroll into view before the section ends. */
.v5__schedule {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  padding-bottom: clamp(80px, 10vw, 200px);
}

.v5__sched-day {
  background: var(--v5-surface-softer);
  border-radius: var(--v5-r-card);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: clamp(24px, 3vw, 48px);
  /* --- Card-stack: each day sticks below the header with a small per-card
     stagger so previously-stacked cards peek above the current one. */
  position: sticky;
  top: 100px;
  /* Subtle drop shadow lets the layered cards read as physical. */
  box-shadow: 0 6px 20px -12px rgba(10, 26, 76, 0.18);
  /* Force a new layer + prevent transforms from breaking sticky. */
  transform: translateZ(0);
}

.v5__sched-day:nth-child(1) { top: 100px; }
.v5__sched-day:nth-child(2) { top: 116px; }
.v5__sched-day:nth-child(3) { top: 132px; }
.v5__sched-day:nth-child(4) { top: 148px; }
.v5__sched-day:nth-child(5) { top: 164px; }

.v5__sched-day--optional {
  background: var(--v5-bg);
  border: 1px dashed var(--v5-rule);
}

/* Disable sticky-stack at narrow widths — the cards become a regular column. */
@media (max-width: 720px) {
  .v5__sched-day,
  .v5__sched-day:nth-child(n) { position: static; top: auto; }
  .v5__schedule { padding-bottom: 0; }
}

/* Respect reduced motion preference — also fall back to a regular column. */
@media (prefers-reduced-motion: reduce) {
  .v5__sched-day,
  .v5__sched-day:nth-child(n) { position: static; top: auto; }
}

.v5__sched-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v5__sched-date-num {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--v5-ink);
  font-variant-numeric: tabular-nums;
}

.v5__sched-date-day {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v5-ink-muted);
}

.v5__sched-body h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.v5__sched-body p {
  font-size: 15px;
  color: var(--v5-ink-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 62ch;
}

.v5__sched-blocks {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.v5__sched-block {
  padding: 14px 0;
  border-top: 1px solid var(--v5-rule);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  font-size: 14px;
}

.v5__sched-block-time {
  color: var(--v5-ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 13px;
}

.v5__sched-block-name {
  color: var(--v5-ink);
  font-weight: 500;
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 960px) {
  .v5__hero-grid,
  .v5__days,
  .v5__close,
  .v5__page-hero-inner {
    grid-template-columns: 1fr;
  }

  .v5__hero-media { max-height: 70vh; aspect-ratio: auto; min-height: 400px; }
  .v5__hero-media img { max-height: 70vh; }
  .v5__hero-media .v5__tag--a { left: 8px; }
  .v5__hero-media .v5__tag--b { right: 8px; }
  .v5__hero-media .v5__tag--d { right: 16px; bottom: 16px; }

  .v5__close-card,
  .v5__close-side { min-height: 0; }

  .v5__days-images { position: static; flex-direction: row; }
  .v5__days-img:nth-child(2) { margin-left: 0; margin-top: 24px; }

  .v5__room { min-height: clamp(420px, 70vw, 560px); }
  .v5__room-body { max-width: min(520px, 78%); }

  .v5__feature {
    min-height: 0;
  }
  .v5__feature-media {
    position: relative;
    aspect-ratio: 16 / 10;
  }
  .v5__feature-card {
    width: auto;
    margin: -32px clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px);
  }

  .v5__sched-day { grid-template-columns: 1fr; }

  .v5__travel-card--hotel,
  .v5__travel-card--airport,
  .v5__travel-card--around,
  .v5__travel-card--early { grid-column: span 12; }

  .v5__page-hero-meta { text-align: left; }
}

@media (max-width: 600px) {
  .v5__nav-links { display: none; }
  .v5__hero-meta { flex-direction: column; gap: 16px; }
  .v5__room { padding: clamp(28px, 7vw, 44px); }
  .v5__room-body { max-width: 100%; }
  .v5__day { grid-template-columns: 1fr; gap: 8px; }
  .v5__day-num { font-size: 14px; }
}

/* ============================================================
   FLOATING INFO DOCK
   Persistent bottom-center bar carrying summit essentials
   (dates, place, audience) plus a Register action.
   Sized for readability; values use ink-strong for contrast.
   ============================================================ */
.v5__dock {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.8vw, 26px);
  padding: 10px 10px 10px clamp(20px, 2vw, 28px);   /* tight right side hugs the CTA */
  max-width: calc(100vw - 32px);
  font-family: var(--v5-sans);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--v5-rule);
  border-radius: var(--v5-r-pill);
  box-shadow:
    0 22px 48px -22px rgba(10, 26, 76, 0.32),
    0 3px 10px -2px rgba(10, 26, 76, 0.10);
  transition: opacity var(--v5-mid) var(--v5-ease),
              transform var(--v5-mid) var(--v5-ease);
}

.v5__dock.is-ready {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.v5__dock-item {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.v5__dock-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v5-ink-muted);
  margin-bottom: 4px;
}

.v5__dock-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--v5-ink-strong);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.v5__dock-rule {
  width: 1px;
  height: 28px;
  background: var(--v5-rule);
  flex: none;
}

/* Inline Register CTA — appears once the hero is no longer in view, so the
   hero's own Register button isn't competing with the dock CTA. */
.v5__dock-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  margin-left: 6px;
  font-family: var(--v5-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--v5-on-accent);
  background: var(--v5-accent);
  border-radius: var(--v5-r-pill);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  /* Hidden state — collapsed inline so the dock pill shrinks to fit */
  max-width: 0;
  margin-left: 0;
  padding-inline: 0;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: max-width var(--v5-mid) var(--v5-ease),
              opacity var(--v5-mid) var(--v5-ease),
              transform var(--v5-mid) var(--v5-ease),
              margin-left var(--v5-mid) var(--v5-ease),
              padding-inline var(--v5-mid) var(--v5-ease),
              background var(--v5-fast) var(--v5-ease);
}

.v5__dock-cta.is-visible {
  max-width: 200px;
  margin-left: 6px;
  padding-inline: 20px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.v5__dock-cta:hover { background: var(--v5-accent-deep); }
.v5__dock-cta:active { transform: translateY(1px); }

.v5__dock-cta:focus-visible,
.v5__dock a:focus-visible {
  outline: 2px solid var(--v5-ink-strong);
  outline-offset: 3px;
}

.v5__dock-cta svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Give the footer room so the dock never crowds the final line */
.v5__footer { padding-bottom: clamp(96px, 9vw, 128px); }

@media (max-width: 960px) {
  .v5__dock {
    gap: 14px;
    padding: 8px 8px 8px 18px;
  }
  .v5__dock-value { font-size: 14px; }
  .v5__dock-cta { padding: 10px 16px; font-size: 13px; }
}

@media (max-width: 720px) {
  /* Drop the "For" item, keep Dates + Place + Register on a single line */
  .v5__dock-item:nth-of-type(3),
  .v5__dock-rule:nth-of-type(2) { display: none; }
  .v5__dock { bottom: 14px; }
  .v5__dock-label { font-size: 10px; }
  .v5__dock-value { font-size: 13px; }
}

@media (max-width: 480px) {
  /* On the smallest screens, collapse to Dates + Register */
  .v5__dock-item:nth-of-type(2),
  .v5__dock-rule:nth-of-type(1) { display: none; }
  .v5__dock { gap: 10px; padding: 8px 8px 8px 16px; }
}

/* ============================================================
   MOBILE NAV — hamburger + full-screen sheet
   Hidden on desktop. iPhone-first sizing.
   ============================================================ */
.v5__nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--v5-ink-strong);
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.v5__nav-toggle:focus-visible {
  outline: 2px solid var(--v5-ink-strong);
  outline-offset: 3px;
}
.v5__nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--v5-fast) var(--v5-ease),
              opacity var(--v5-fast) var(--v5-ease);
}
.v5__nav-toggle[aria-expanded='true'] .v5__nav-toggle-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.v5__nav-toggle[aria-expanded='true'] .v5__nav-toggle-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.v5__mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--v5-surface-dark);
  color: var(--v5-on-dark);
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.v5__mobile-menu[hidden] { display: none; }
.v5__mobile-menu.is-open { display: block; }
.v5__mobile-menu-inner {
  min-height: 100%;
  padding: 104px 24px calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.v5__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.v5__mobile-link {
  display: block;
  padding: 18px 4px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v5-on-dark);
  border-bottom: 1px solid rgba(244, 245, 251, 0.12);
  transition: opacity var(--v5-fast) var(--v5-ease);
}
.v5__mobile-link:hover { opacity: 0.8; }
.v5__mobile-link[aria-current='page'] {
  color: var(--v5-accent);
}
.v5__mobile-cta {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 16px;
  padding: 16px 26px;
}
.v5__mobile-meta {
  margin-top: auto;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(244, 245, 251, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.v5__mobile-meta-sep { opacity: 0.5; }

/* When the menu is open we lock body scroll and hide the floating dock */
body.v5--menu-open { overflow: hidden; }
body.v5--menu-open .v5__dock { opacity: 0 !important; pointer-events: none !important; }

/* ============================================================
   MOBILE LAYOUT — iPhone-first refinements (≤480px)
   Hamburger replaces nav; sections breathe; dock has clearance.
   ============================================================ */
@media (max-width: 480px) {
  /* Show hamburger, hide inline nav links + Register CTA */
  .v5__nav-inner > nav,
  .v5__nav-cta { display: none; }
  .v5__nav-toggle { display: inline-flex; }
  .v5__nav-inner { gap: 16px; padding-inline: 20px; height: 72px; }
  /* Mobile: 20% smaller than desktop nav. SVG aspect 593:180. */
  .v5 .v5__brand-mark { width: 109px; height: 33px; }

  /* Tighten radius scale — 32px/24px on small phone images reads as pill,
     not photo. Scale down ~40% so corners feel intentional, not soft. */
  .v5 {
    --v5-r-img: 18px;
    --v5-r-hero: 16px;
    --v5-r-card: 14px;
    --v5-r-thumb: 12px;
  }

  /* Hero typography — readable, doesn't blow out at 390px */
  .v5__display-xl,
  .v5__hero-title { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; }
  .v5__page-hero-title { font-size: clamp(40px, 11vw, 56px); line-height: 1.02; }
  .v5__feature-title,
  .v5__section-title { font-size: clamp(28px, 7.5vw, 36px); line-height: 1.08; }

  /* Body lede sits a bit lighter on phones */
  .v5__lede { font-size: 16px; line-height: 1.55; }

  /* Clearance so the floating dock never covers content */
  main { padding-bottom: 96px; }

  /* Section vertical rhythm — more breath between blocks */
  .v5__section { padding-block: clamp(48px, 12vw, 72px); }

  /* Hero image: pin to a 4:5 portrait so it doesn't shrink to the photo's
     natural height and leave the floating pills hanging in white space */
  .v5__hero-media {
    aspect-ratio: 4 / 5;
    min-height: 0;
    max-height: none;
    height: auto;
  }
  .v5__hero-media img { height: 100%; max-height: none; }

  /* Pull the hero pills inside the image edges so they don't clip
     against the viewport on tighter widths */
  .v5__hero-media .v5__tag { font-size: 13px; padding: 10px 14px; }
  .v5__hero-media .v5__tag--a { top: 16px; left: 12px; }
  .v5__hero-media .v5__tag--b { top: 44%; right: 12px; }
  .v5__hero-media .v5__tag--d { bottom: 16px; right: 12px; left: auto; }

  /* Register form: prevent input min-width from pushing the submit off */
  #register-form form { grid-template-columns: 1fr !important; }
  #register-form form input { min-width: 0; width: 100%; }
  #register-form form button { width: 100%; justify-content: center; }

  /* Floating dock — keep tight but ensure not stealing tap targets */
  .v5__dock { bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* -----------------------------------------------------------
   Travel page — v5 progress redesign
   Hero track strip, real Omaha map (Voyager tile, permanent
   labels, numbered pins), 3-step progress, "Heads up" callout.
   ----------------------------------------------------------- */

/* ---- Eyebrow inline icon (used in step eyebrows) ---- */
.v5__eyebrow-icon {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  vertical-align: -2px;
  color: var(--v5-ink);
  opacity: 0.85;
}
.v5__eyebrow:has(.v5__eyebrow-icon)::before { display: none; }

/* ---- Hero track — small 3-stop preview pinned to the right of the hero
        (replaces the redundant "fly into Eppley · OMA" meta strip). ---- */
.v5__travel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: end;
  min-width: 240px;
}

.v5__travel-track li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--v5-rule);
}
.v5__travel-track li:last-child { border-bottom: 0; padding-bottom: 0; }

.v5__travel-track-num {
  font-family: var(--v5-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v5-accent);
  font-variant-numeric: tabular-nums;
}

.v5__travel-track-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--v5-ink);
}

@media (max-width: 860px) {
  .v5__page-hero-inner { grid-template-columns: 1fr; align-items: start; }
  .v5__travel-track { align-self: start; min-width: 0; width: 100%; }
}

/* ---- Map figure (bridge) ---- */
.v5__travel-mapfig { margin: 0; display: block; }

.v5__travel-mapfig-frame {
  width: 100%;
  height: clamp(420px, 60vh, 640px);
  border-radius: var(--v5-r-img);
  overflow: hidden;
  border: 1px solid var(--v5-rule);
  background: var(--v5-surface-softer);
}

@media (max-width: 720px) {
  .v5__travel-mapfig-frame {
    height: clamp(340px, 62vh, 520px);
    border-radius: var(--v5-r-card);
  }
}

/* ---- Leaflet pin (numbered) and permanent label pill ---- */
.v5__leaflet-pin {
  background: transparent;
  border: 0;
}
.v5__leaflet-pin-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--v5-ink);
  color: var(--v5-on-dark);
  display: grid;
  place-items: center;
  font-family: var(--v5-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95), 0 4px 14px -6px rgba(10, 26, 76, 0.35);
}
.v5__leaflet-pin-inner--accent {
  background: var(--v5-accent);
  color: var(--v5-on-accent);
}

/* The permanent label sits next to the pin and names the stop on the map.
   White pill, hairline border, tight typography — matches the v5 dock. */
.v5__leaflet-label {
  background: #ffffff;
  color: var(--v5-ink);
  border: 1px solid var(--v5-rule);
  padding: 8px 12px;
  font-family: var(--v5-sans);
  border-radius: 10px;
  box-shadow: 0 4px 14px -8px rgba(10, 26, 76, 0.22);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  pointer-events: none;
}
.v5__leaflet-label::before { display: none; }

.v5__leaflet-label-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--v5-ink);
}
.v5__leaflet-label-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--v5-ink-muted);
}

.v5__leaflet-label--accent .v5__leaflet-label-sub { color: var(--v5-accent); }

@media (max-width: 720px) {
  .v5__leaflet-label { padding: 6px 9px; }
  .v5__leaflet-label-name { font-size: 12.5px; }
  .v5__leaflet-label-sub { font-size: 9.5px; letter-spacing: 0.08em; }
  .v5__leaflet-pin-inner { width: 34px; height: 34px; font-size: 12.5px; }
}

.leaflet-container { font-family: var(--v5-sans); }
.leaflet-container .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  color: var(--v5-ink-soft);
  padding: 2px 8px;
}

/* ---- Progress section ---- */
.v5__travel-progress-head {
  margin-bottom: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.v5__travel-progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.v5__travel-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(24px, 4vw, 80px);
  padding: clamp(32px, 3.6vw, 56px) 0;
  border-top: 1px solid var(--v5-rule);
}
.v5__travel-step:last-child { border-bottom: 1px solid var(--v5-rule); }

.v5__travel-step-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 2vw, 28px);
  align-items: start;
}

/* Big step numeral — anchors the journey rhythm. */
.v5__travel-step-num {
  font-family: var(--v5-display);
  font-size: clamp(56px, 6.5vw, 96px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--v5-ink);
  font-variant-numeric: tabular-nums;
}

/* Each step's numeral inherits the orange accent for step 01 only —
   matches the orange "A" pin on the map. */
.v5__travel-step:first-child .v5__travel-step-num { color: var(--v5-accent); }

.v5__travel-step-headings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.v5__travel-step-title {
  font-family: var(--v5-sans);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--v5-ink);
  margin: 0;
}

.v5__travel-step-code {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 10px;
  background: rgba(255, 147, 50, 0.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v5-accent);
  vertical-align: middle;
}

.v5__travel-step-subtitle {
  display: block;
  font-weight: 500;
  color: var(--v5-ink-muted);
  letter-spacing: -0.018em;
}

/* Right column body sits centered against the numeral, keeps its own
   stable rhythm independent of the numeral height. */
.v5__travel-step-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: center;
}

.v5__travel-step-lede {
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--v5-ink-muted);
  margin: 0;
  max-width: 52ch;
}

.v5__travel-step-bullets { margin-top: 4px; }

@media (max-width: 860px) {
  .v5__travel-step {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .v5__travel-step-body { align-self: start; }
}
@media (max-width: 520px) {
  .v5__travel-step-head { grid-template-columns: 1fr; gap: 12px; }
  .v5__travel-step-num { font-size: clamp(48px, 14vw, 72px); }
  .v5__travel-step-code { display: block; margin: 8px 0 0; width: max-content; }
}

/* ---- Heads-up callout (note variant of the existing feature callout) ---- */
.v5__travel-feature-callout--note {
  align-items: flex-start;
  background: rgba(255, 147, 50, 0.07);
}
.v5__travel-feature-callout-tag--alt {
  background: var(--v5-accent);
  color: var(--v5-on-accent);
}

/* ---- Tail note under the hotel bullets ---- */
.v5__travel-feature-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--v5-ink-soft);
  line-height: 1.55;
  font-style: italic;
}

/* -----------------------------------------------------------
   Network card — orange surface, Signal wave pattern.
   Mirrors the brand reference: heading top-left, lede beneath,
   cascading wavy white ribbons running lower-left to upper-right.
   ----------------------------------------------------------- */
.v5__network-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--v5-r-img);
  background: var(--v5-accent);
  color: #ffffff;
  padding: clamp(40px, 5vw, 88px) clamp(32px, 4vw, 80px);
  min-height: clamp(360px, 38vw, 560px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
}

.v5__network-card-body {
  position: relative;
  z-index: 2;
  max-width: 36ch;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
}

.v5__network-card-title {
  font-family: var(--v5-sans);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
}

.v5__network-card-lede {
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 36ch;
}

/* Wave pattern anchored to the bottom-right; CSS mask fades the leftmost
   edge so the cascade never crashes into the body copy on the upper-left. */
.v5__network-card-waves {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78%;
  height: 96%;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}

@media (max-width: 860px) {
  .v5__network-card-waves { width: 88%; height: 70%; }
}

@media (max-width: 720px) {
  .v5__network-card {
    padding: 36px 28px;
    min-height: 420px;
    border-radius: var(--v5-r-card);
  }
  .v5__network-card-waves {
    width: 100%;
    height: 60%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 100%);
  }
}