/* Prospect-first landing: story video above the fold, few words, big numbers. */

.landing { display: grid; gap: 0; }
.landing > .blk { grid-column: auto; }

/* Hero: headline and the story video both fit the first screen at 1440x900. */
.b-hero { padding: clamp(14px, 2.4vh, 28px) var(--gutter) clamp(24px, 4vh, 48px); }
.hero { display: grid; justify-items: center; gap: clamp(12px, 2vh, 20px); }
.hero-copy { display: grid; justify-items: center; text-align: center; gap: 8px; max-width: 1100px; }
.hero-mark { height: clamp(34px, 4.4vh, 46px); width: auto; }
.hero h1 { font-size: clamp(32px, 3.5vw, 56px); line-height: 1.04; max-width: 24em; }
.hero-sub { margin: 0; font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-2); }
.hero-media { width: min(100%, 1180px, calc((100svh - var(--header-h) - 205px) * 16 / 9)); min-width: min(100%, 520px); }
.video-player { margin: 0; }
.video-player .frame { position: relative; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 2px 0 rgba(38,39,37,.04), 0 40px 80px -40px rgba(38,39,37,.55); outline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.video-player video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; background: #111; }
.video-player .sound {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: var(--edition); color: var(--edition-ink); font: 600 16px/1 var(--text); letter-spacing: .01em;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); transition: transform var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.video-player .sound:hover { transform: translateX(-50%) translateY(-2px); background: color-mix(in srgb, var(--edition) 86%, black); }
.video-player .sound svg { width: 22px; height: 22px; }
.video-player .sound[hidden] { display: none; }
.video-player figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

/* Proof: two big numbers, nothing else. */
.b-proof { padding: clamp(40px, 7vh, 80px) var(--gutter); background: var(--white); }
.proof { max-width: 1180px; margin: 0 auto; }
.proof-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 4vw, 64px); }
.proof-item { display: grid; gap: 8px; align-content: start; }
.proof-item b { font: 500 clamp(56px, 6vw, 96px)/.95 var(--display); letter-spacing: -.02em; }
.proof-item span { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--ink-2); max-width: 22em; }
.proof-item .proof-stars { color: #B7802F; font-size: 28px; letter-spacing: 4px; }
.proof .small { margin: 22px 0 0; }

/* Gap: three dark cards, one number each. */
.b-gaps { padding: clamp(48px, 8vh, 96px) var(--gutter); background: var(--ink); color: var(--paper); }
.gaps { max-width: 1180px; margin: 0 auto; }
.gaps .eyebrow { color: var(--copper-light); }
.gaps h2 { margin-bottom: clamp(24px, 4vh, 40px); }
.gap-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gap { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 36px); border-radius: 10px; background: color-mix(in srgb, var(--paper) 7%, var(--ink)); }
.gap-big { font: 500 clamp(52px, 5vw, 76px)/.95 var(--display); color: var(--edition-2); letter-spacing: -.01em; }
.gap h3 { font-size: clamp(24px, 2vw, 30px); }
.gap p { margin: 0; font-size: 17px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 86%, transparent); }
.gap .src { background: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); }
.gap-tag { font: 500 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 58%, transparent); }

/* What it could look like: four numbered steps on the prospect's colour. */
.b-flow { padding: clamp(48px, 8vh, 96px) var(--gutter); background: var(--edition); color: var(--edition-ink); }
.flow { max-width: 1180px; margin: 0 auto; }
.flow-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 4vh, 40px); }
.flow-head .eyebrow { width: 100%; margin: 0; color: var(--edition-2); }
.flow-label { font: 500 13px/1.3 var(--text); letter-spacing: .06em; padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--edition-ink) 14%, transparent); }
.flow-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: f; }
.flow-row li { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: 10px; background: color-mix(in srgb, var(--edition-ink) 10%, transparent); }
.flow-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--edition-2); color: var(--ink); font: 700 18px/1 var(--text); }
.flow-row p { margin: 0; font: 500 clamp(22px, 1.9vw, 28px)/1.2 var(--display); }

/* Where to start. */
.b-start { padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(40px, 6vh, 72px); }
.start { max-width: 1180px; margin: 0 auto; }
.start h2 { margin-bottom: clamp(24px, 4vh, 40px); }
.start-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.start-opt { padding: clamp(24px, 3vw, 36px); border-radius: 10px; background: var(--white); }
.start-opt .letter { display: block; font: 500 52px/.9 var(--display); color: var(--edition); margin-bottom: 14px; }
.start-opt h3 { margin-bottom: 10px; }
.start-opt p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.start-close { margin: clamp(24px, 4vh, 40px) 0 0; font: 500 clamp(30px, 3vw, 44px)/1.1 var(--display); }

/* Details: every topic as a compact card. */
.details { padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(64px, 10vh, 120px); border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.details-head { max-width: 1180px; margin: 0 auto clamp(24px, 4vh, 36px); }
.details-head p:last-child { margin: 12px 0 0; color: var(--ink-2); max-width: 40em; }
.tiles { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile a { position: relative; display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px 22px 26px; border-radius: 10px; background: var(--white); text-decoration: none; transition: transform var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }
.tile a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile .n { font: 500 13px/1 var(--text); letter-spacing: .1em; color: var(--copper-deep); }
.tile b { font: 500 26px/1.1 var(--display); }
.tile .h { font-size: 15px; line-height: 1.45; color: var(--muted); }
.tile svg { position: absolute; right: 18px; top: 20px; width: 18px; height: 18px; color: var(--muted); }
.tile.featured a { background: var(--edition); color: var(--edition-ink); }
.tile.featured .n, .tile.featured .h, .tile.featured svg { color: color-mix(in srgb, var(--edition-ink) 80%, transparent); }

.foot .credit { display: inline-flex; align-items: center; gap: 10px; }
.foot .credit img { height: 18px; width: auto; }

@media (max-width: 900px) {
  .hero-media { width: 100%; min-width: 0; }
  .video-player .sound { bottom: 56px; height: 46px; font-size: 15px; }
}

/* ---------- Cover stage: the prospect's cover with the story video in front ---------- */
.cover-stage { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(20px, 3vw, 56px); padding-top: clamp(20px, 3.4vh, 44px); padding-bottom: clamp(28px, 5vh, 64px); }
.cover-stage h1 { font-size: clamp(42px, 5vw, 84px); max-width: 10.5em; }
.cover-stage .dek { max-width: 30em; }
.stage {
  position: relative; width: 100%; height: min(660px, calc(100svh - var(--header-h) - 96px)); min-height: 440px;
}
.stage .layer { position: absolute; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 500ms var(--ease); }
.stage .arch { right: 0; top: 0; width: 50%; height: 80%; }
.stage .arch .panel {
  position: absolute; inset: 0; border-radius: 999px 999px 6px 6px;
  background: radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--edition) 86%, white) 0%, var(--edition) 55%, color-mix(in srgb, var(--edition) 76%, black) 100%);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--edition) 70%, black);
}
.stage .arch .panel::after { content: ''; position: absolute; inset: 14px; border-radius: 999px 999px 3px 3px; border: 1px solid color-mix(in srgb, var(--edition-2) 70%, transparent); }
.stage .photo { margin: 0; right: 6%; top: 8%; width: 43%; height: 70%; border-radius: 999px 999px 6px 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(38,39,37,.6); }
.stage .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 18%; }
.stage .glow { left: 4%; bottom: 0; width: 80%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--edition-2) 42%, transparent), transparent); filter: blur(12px); }
.stage .screen { left: 0; bottom: 4%; width: 84%; z-index: 3; }
.stage .screen .video-player .frame { border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 50px 90px -34px rgba(20,20,18,.75), 0 0 0 1px color-mix(in srgb, var(--edition-2) 45%, transparent); }
.stage .screen figcaption { display: none; }
.stage .photo-credit { position: absolute; right: 8%; top: calc(9% + 74% + 8px); margin: 0; font-size: 12px; color: var(--muted); }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage .arch { animation: depth-far linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .stage .photo { animation: depth-mid linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .stage .screen { animation: depth-near linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}
@keyframes depth-far { to { translate: 0 -30px; } }
@keyframes depth-mid { to { translate: 0 -64px; } }
@keyframes depth-near { to { translate: 0 -120px; } }
@media (prefers-reduced-motion: no-preference) {
  .stage .screen { animation-name: depth-near; }
  .stage .layer.screen { opacity: 1; }
}

@media (max-width: 900px) {
  .cover-stage { grid-template-columns: 1fr; }
  .cover-stage .stage { order: -1; height: auto; min-height: 0; transform: none; }
  .stage .arch, .stage .photo, .stage .glow, .stage .photo-credit { display: none; }
  .stage .layer.screen { position: relative; left: auto; bottom: auto; width: 100%; transform: none; }
}

/* ---------- One-screen tabs ---------- */
.tab-screen {
  position: relative; min-height: calc(100svh - var(--header-h)); display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 24px;
  padding: clamp(28px, 6vh, 72px) var(--gutter) 28px; max-width: 1320px; margin: 0 auto;
}
.tab-screen.has-media { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(24px, 4vw, 64px); }
.tab-main { display: grid; align-content: center; gap: clamp(14px, 2.4vh, 26px); max-width: 880px; }
.tab-kicker { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 13px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-deep); }
.tab-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--copper); font-size: 12px; letter-spacing: .04em; color: var(--copper-deep); }
.tab-screen h1 { font-size: clamp(40px, 4.6vw, 76px); line-height: 1.02; max-width: 16em; }
.big-fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: clamp(16px, 2.6vh, 28px) 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.big-fact b { font: 500 clamp(64px, 7vw, 120px)/.9 var(--display); letter-spacing: -.02em; color: var(--edition); }
.big-fact span { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; color: var(--ink-2); max-width: 22em; }
.big-fact .big-stars { order: -1; flex-basis: 100%; color: #B7802F; font-size: 26px; letter-spacing: 4px; max-width: none; }
.tab-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tab-points li { position: relative; padding-left: 30px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; }
.tab-points li::before { content: ''; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--edition-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--edition-2) 25%, transparent); }
.tab-limit { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.tab-limit .label { margin-right: 4px; }
.tab-media { align-self: center; }
.tab-nav { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.tab-nav a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 15px/1.2 var(--text); color: var(--ink-2); }
.tab-nav > span:first-child a svg { transform: rotate(180deg); }
.tab-nav .next { justify-self: end; }
.tab-nav svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .tab-screen, .tab-screen.has-media { grid-template-columns: 1fr; min-height: 0; }
  .tab-nav { grid-template-columns: 1fr 1fr; }
  .tab-nav .pill { grid-column: 1 / -1; order: 3; justify-self: center; }
}