/* Preston Pollard — Push Forward
   Direction C · off-white ground, ink type, deep green accent */

/* tokens.css is linked before this file in <head> — never inline a raw value here */

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

html, body { overflow-x: clip; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 22px;
  border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; color: var(--paper); }

.wrap {
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sect { padding-block: var(--sect); }
.sect--flush-top { padding-top: 0; }

.h-lg { font-size: clamp(38px, 4.4vw, 62px); }
.h-md { font-size: clamp(34px, 3.6vw, 54px); }

.kicker,
.kicker--dark {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker--dark { color: var(--accent-light); }

.lede {
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- buttons ---------- */

.btn,
.wire,
.wire--dark {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.btn {
  gap: 12px;
  padding: 0 10px 0 28px;
  background: var(--accent);
  color: var(--paper);
  border: 0;
  font-family: inherit;
  transition: transform var(--dur) var(--ease-out), background 400ms var(--ease-out);
}
.btn:hover { background: var(--accent-dark); color: var(--paper); transform: translateY(-2px); }
.btn:active { transform: scale(0.985); }

.btn .pip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(244, 244, 241, 0.18);
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .pip { transform: translate(3px, -1px) scale(1.06); }

.wire {
  padding: 0 28px;
  font-weight: 500;
  border: 1px solid var(--line-strong);
  transition: border-color 400ms var(--ease-out), background 400ms var(--ease-out);
}
.wire:hover { border-color: var(--ink); background: rgba(14, 14, 12, 0.05); color: var(--ink); }

.wire--dark {
  padding: 0 28px;
  font-weight: 500;
  color: var(--paper);
  border: 1px solid rgba(244, 244, 241, 0.3);
  transition: background 400ms var(--ease-out);
}
.wire--dark:hover { background: rgba(244, 244, 241, 0.09); color: var(--paper); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(244, 244, 241, 0.84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 720px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 14, 12, 0.34) 0%,
    rgba(14, 14, 12, 0.06) 30%,
    rgba(14, 14, 12, 0.58) 66%,
    rgba(14, 14, 12, 0.88) 100%
  );
}
.hero__in {
  position: relative;
  padding-top: 150px;
  padding-bottom: 60px;
}
.hero h1 { font-size: clamp(64px, 11vw, 148px); margin-top: 20px; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 44px;
  margin-top: 30px;
}
.hero__cta p { max-width: 44ch; color: #3a3a35; }

/* ---------- press ---------- */

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid rgba(14, 14, 12, 0.1);
  border-radius: 22px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px -34px rgba(14, 14, 12, 0.4); }

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__type {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  padding: 28px;
  background: linear-gradient(170deg, #eceae3, #e3e1d9);
}
.card__type .mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 0.92;
  text-transform: uppercase;
}

.card__body { padding: 18px 20px 20px; }

.outlet {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 34px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.logo-strip span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- split layout ---------- */

.split { display: flex; flex-wrap: wrap; gap: 52px; }
.col-fix { flex: 1 1 380px; min-width: 0; }
.col-grow { flex: 999 1 460px; min-width: 0; }

.framed {
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--paper-3);
}
.framed img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- program facts ---------- */

.facts { margin: 0; padding: 0; list-style: none; }
.fact {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 19px 0;
  border-top: 1px solid rgba(14, 14, 12, 0.14);
}
.fact:last-child { border-bottom: 1px solid rgba(14, 14, 12, 0.14); }
.fact__num {
  flex: 0 0 auto;
  min-width: 72px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
}
.fact h3 { font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.fact p { margin-top: 5px; font-size: 15.5px; color: var(--ink-2); }

/* ---------- dark sections ---------- */

.dark { background: var(--ink); color: var(--paper); }
.dark h2, .dark h3 { color: var(--paper); }
.dark a:hover { color: var(--accent-light); }
.dark :focus-visible { outline-color: var(--accent-light); }

/* ---------- interviews ---------- */

.player {
  position: relative;
  display: block;
  flex: 1 1 56%;
  min-width: 0;
  min-height: 320px;
  border: 0;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #1a1a18;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player__play span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: rgba(244, 244, 241, 0.92);
  transition: transform var(--dur) var(--ease-out);
}
.player:hover .player__play span { transform: scale(1.07); }
.player__meta { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.player__meta strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  text-transform: uppercase;
  color: var(--paper);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.thumb {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a18;
  transition: transform var(--dur) var(--ease-out), border-color 400ms var(--ease-out);
}
.thumb:hover { transform: translateY(-3px); border-color: rgba(244, 244, 241, 0.45); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.vrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-dark);
  font-size: 15.5px;
}
.vrow:last-child { border-bottom: 1px solid var(--line-dark); }
.vrow .go {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.roster li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(244, 244, 241, 0.14);
  font-size: 15px;
  color: rgba(244, 244, 241, 0.86);
}
.roster .tag {
  flex: 0 0 auto;
  min-width: 74px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
}

/* ---------- video library ---------- */

.lib-head {
  margin: 34px 0 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
}

.lib {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.lrow .yr {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a82;
}

/* ---------- shop ---------- */

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.sw {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(244, 244, 241, 0.28);
}
.swatches span.label { font-size: 13.5px; color: rgba(244, 244, 241, 0.6); }

.product-shot {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: #1a1a18;
  transform: rotate(-2deg);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- booking ---------- */

.booking { display: flex; flex-wrap: wrap; }
.booking__photo {
  position: relative;
  flex: 1 1 400px;
  min-width: 0;
  min-height: 360px;
  background: var(--paper-3);
}
.booking__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.booking__photo p {
  position: absolute;
  left: 26px;
  bottom: 24px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(14, 14, 12, 0.74);
  color: var(--paper);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.booking__form {
  display: flex;
  flex: 1 1 520px;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(32px, 4.4vw, 56px);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.span2 { grid-column: span 2; }
.lbl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.inp {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(14, 14, 12, 0.2);
  border-radius: 13px;
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
textarea.inp { min-height: 76px; padding: 12px 16px; resize: vertical; }

.form-note[hidden] { display: none; }
.form-note {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(20, 96, 63, 0.1);
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- footer ---------- */

.footer { padding-block: 28px; }
.footer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  color: rgba(244, 244, 241, 0.66);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer nav a { color: rgba(244, 244, 241, 0.8); }

/* ---------- responsive ---------- */

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

@media (max-width: 860px) {
  .nav__links { display: none; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .roster { grid-template-columns: minmax(0, 1fr); }
  .split { gap: 34px; }
  .hero { min-height: 540px; }
  .hero__in { padding-top: 110px; }
  .hero__cta { gap: 24px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: span 1; }
  .sect { padding-block: 56px; }
  .card__type { aspect-ratio: auto; padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 120ms !important; animation-duration: 1ms !important; }
  .card:hover, .thumb:hover, .btn:hover, .player:hover .player__play span { transform: none; }
}

.where {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ============================================================
   Component details used by index.html
   ============================================================ */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.card__line { margin-top: 8px; font-size: 16px; font-weight: 500; }
.card__sub { font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }

.meta { font-size: 14px; color: var(--ink-3); text-wrap: pretty; }
.todo { color: #8a8a82; }
.inline-link { color: var(--accent); font-weight: 600; }

.count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 244, 241, 0.55);
}

.split--tight { gap: 24px; }
.split--shop { align-items: center; gap: 48px; }

.col-side {
  display: flex;
  flex: 1 1 320px;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.col-product { flex: 1 1 340px; min-width: 0; }

.stack-22 { display: flex; flex-direction: column; gap: 22px; }
.stack-center-24 { display: flex; flex-direction: column; justify-content: center; gap: 24px; }

.measure { max-width: 54ch; }
.measure-sm { max-width: 42ch; }

.h-display { font-size: var(--text-display); line-height: 0.84; }
.lede-dark {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(244, 244, 241, 0.72);
  max-width: 46ch;
  text-wrap: pretty;
}

.sw--sand { background: #d9cdba; }
.sw--espresso { background: #4b3225; }
.sw--blue { background: #a9c4dd; }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid rgba(244, 244, 241, 0.3);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  color: rgba(244, 244, 241, 0.78);
}

.footer__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--paper);
}
.footer__copy { color: rgba(244, 244, 241, 0.45); }

/* spacing utilities — the only place raw px lives, by design */
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-22 { margin-top: 22px; }
.mt-30 { margin-top: 30px; }
.mt-32 { margin-top: 32px; }

/* ============================================================
   Typography polish
   ============================================================ */

h1, h2, .mark, .lib-head { text-wrap: balance; }
.lede, .fact p, .roster li span:last-child { text-wrap: pretty; }
.yr, .fact__num { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent); color: var(--paper); }

@media (max-width: 860px) {
  .split--shop { gap: 34px; }
  .badge { min-height: 48px; }
}

/* Hero kicker sits over the brightest part of the photo — give it its own
   ground so it never drops below contrast, in the same pill language as the CTAs. */
.hero .kicker {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(244, 244, 241, 0.92);
  color: var(--accent);
  backdrop-filter: blur(6px);
}

/* Phone: the nav is wordmark + one CTA. Tighten both so the CTA never clips. */
@media (max-width: 560px) {
  .nav__in { gap: 12px; min-height: 68px; }
  .wordmark { font-size: 20px; }
  .nav__in .btn {
    min-height: 46px;
    padding: 0 7px 0 18px;
    font-size: 14px;
    gap: 9px;
  }
  .nav__in .btn .pip { width: 30px; height: 30px; }
}

/* Touch targets: inline prose links stay inline, but navigation links get
   a 44px tap area without changing how they look. */
.footer nav a,
.nav__links a,
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ============================================================
   Press — one real photo, then a proper index of coverage.
   (Two of the outlets have no usable image of their own; a type
   card pretending otherwise read as an empty box.)
   ============================================================ */

.press {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.press__feature {
  margin: 0;
  border: 1px solid rgba(14, 14, 12, 0.1);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-2);
}
.press__feature img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.press__feature figcaption { display: block; padding: 18px 20px 20px; }
.press__cap { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; }

.press__list { margin: 0; padding: 0; list-style: none; }
.press__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.press__list li:last-child { border-bottom: 1px solid var(--line); }
.press__outlet {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.press__what { font-size: 15px; color: var(--ink-2); text-align: right; }

/* ============================================================
   Interview roster — grouped by who they are, named, each row
   links to that interview.
   ============================================================ */

.groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 40px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--line-dark);
}

.group__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 20px;
  color: var(--paper);
}
.group__n {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
}

.group ul { margin: 14px 0 0; padding: 0; list-style: none; }
.group li { border-top: 1px solid rgba(244, 244, 241, 0.12); }
.group li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  justify-content: center;
  padding: 9px 0;
  font-size: 15px;
  color: rgba(244, 244, 241, 0.9);
}
.group li a em {
  font-style: normal;
  font-size: 12.5px;
  color: rgba(244, 244, 241, 0.5);
}
.group li a:hover { color: var(--accent-light); }
.group li a:hover em { color: rgba(143, 211, 178, 0.75); }

.group-cta { margin-top: 36px; }

/* ============================================================
   Video shelf teaser on the home page
   ============================================================ */

.shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shelf a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 24px 24px;
  border: 1px solid rgba(14, 14, 12, 0.1);
  border-radius: var(--radius-card);
  background: var(--paper-2);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.shelf a:hover { transform: translateY(-4px); box-shadow: 0 22px 52px -34px rgba(14, 14, 12, 0.4); }
.shelf__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.shelf__t { font-size: 17px; font-weight: 600; }
.shelf__d { font-size: 14.5px; color: var(--ink-2); text-wrap: pretty; }

/* ============================================================
   Video library page
   ============================================================ */

.page-head { padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 52px); }
.page-head__h { font-size: clamp(48px, 7vw, 96px); margin-top: 18px; }

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 400ms var(--ease-out), background 400ms var(--ease-out);
}
.jump a:hover { border-color: var(--ink); background: rgba(14, 14, 12, 0.05); color: var(--ink); }

.shelf-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(26px, 2.6vw, 34px);
  padding-bottom: 6px;
}
.shelf-h__n {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .press { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .press__what { text-align: left; }
  .groups { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Press — condensed. Photo plus a two-column index so eleven
   outlets take six rows instead of eleven.
   ============================================================ */

.press { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 36px; }
.press__feature img { aspect-ratio: 1 / 1; }

.press__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.press__list li {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.press__list li:last-child { border-bottom: none; }
.press__outlet { display: block; font-size: 17px; letter-spacing: 0.02em; }
.press__what {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  color: var(--ink-3);
  text-align: left;
}

/* ============================================================
   Interview groups — native <details> disclosure. Closed by
   default so the section reads as six lines, not sixty.
   ============================================================ */

.group { border-top: 1px solid rgba(244, 244, 241, 0.14); }

.group__h {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--paper);
  transition: color 300ms var(--ease-out);
}
.group__h::-webkit-details-marker { display: none; }
.group__h:hover { color: var(--accent-light); }
.group__h:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

.group__t { flex: 1 1 auto; min-width: 0; }

.group__chev {
  flex: 0 0 auto;
  color: rgba(244, 244, 241, 0.55);
  transition: transform 400ms var(--ease-out), color 300ms var(--ease-out);
}
.group[open] .group__chev { transform: rotate(180deg); }
.group__h:hover .group__chev { color: var(--accent-light); }

.group ul { margin: 0 0 20px; padding: 0; list-style: none; }
.group li { border-top: 1px solid rgba(244, 244, 241, 0.1); }
.group li:first-child { border-top: 0; }

/* The roster is six closed rows by default, so it no longer needs
   three columns — one column keeps the click targets wide. */
.groups {
  display: block;
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
}
.group[open] ul { animation: group-in 320ms var(--ease-out) both; }

@keyframes group-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .group[open] ul { animation: none; }
  .group__chev { transition: none; }
}

@media (max-width: 860px) {
  .press { grid-template-columns: minmax(0, 1fr); }
  .press__list { grid-template-columns: minmax(0, 1fr); }
  .group__h { font-size: 19px; }
}

/* An opened group runs two columns on desktop so the longest shelf
   (Film & TV, 13 names) does not become a wall of rows. */
@media (min-width: 861px) {
  .group ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
  }
  .group li:nth-child(2) { border-top: 0; }
}

/* ============================================================
   Ryan Leak pass — added 2026-10-13
   Three borrowed behaviours, none of its colour: a muted looping
   hero, a drawn marker stroke on one word, and a logo ticker.
   The palette is unchanged — paper, ink, one green.
   ============================================================ */

/* The video takes the photo's exact box. The photo is now the poster, so a
   blocked or slow video degrades to precisely what shipped before. */
.hero__bg { object-fit: cover; }
video.hero__bg { background: var(--paper-3); }

/* ---- marker stroke ---- */
.mark { position: relative; display: inline-block; }
.mark__ink {
  position: absolute; left: -3%; bottom: -0.01em;
  width: 106%; height: 0.26em;
  overflow: visible; pointer-events: none;
  color: var(--accent);
}
.mark__ink path {
  fill: none; stroke: currentColor; stroke-width: 15;
  stroke-linecap: round; stroke-linejoin: round;
  /* 340 comfortably exceeds the path length, so the stroke starts fully
     retracted whatever the rendered width */
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: mark-draw 820ms var(--ease-out) 620ms forwards;
}
@keyframes mark-draw { to { stroke-dashoffset: 0; } }

/* ---- logo ticker ---- */
.ticker {
  overflow: hidden;
  padding: 15px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker__row {
  display: flex; align-items: center; width: max-content;
  animation: ticker-run 46s linear infinite;
}
.ticker span {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink-2); white-space: nowrap;
  padding-inline: clamp(14px, 1.6vw, 24px);
}
.ticker span.sep { color: var(--accent); padding-inline: 0; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  /* the stroke still reads, it just does not draw */
  .mark__ink path { animation: none; stroke-dashoffset: 0; }
  .ticker__row { animation: none; }
}

/* ---- hero on light type (2026-10-13) ----
   The headline ran to 148px, 81% of a 1440 viewport, and sat on a photograph
   washed flat so ink could clear contrast. Both are fixed together: the image
   runs bright under a bottom scrim, the type is light, and the headline comes
   down to a size that leaves the picture room to be seen. */
.hero h1 {
  font-size: clamp(52px, 7.4vw, 104px);
  color: #fff;
  text-wrap: balance;
}
.hero .lede { color: rgba(255, 255, 255, 0.88); }
.hero__in { padding-top: 110px; padding-bottom: 54px; }

/* light green, because the deep green disappears against a dark scrim — and
   thinner, because at 15px it read as a redaction bar rather than a marker */
.hero .mark__ink { color: var(--accent-light); }
.hero .mark__ink path { stroke-width: 12; }

/* the hero ends on a clean edge now instead of dissolving into paper; the
   ticker directly beneath carries the transition */
.hero { border-bottom: 1px solid var(--line); }

.hero .wire { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.hero .wire:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---- featured interview, playing muted (2026-10-13) ----
   The embed sits in the same box the still occupied. The play control and the
   caption stay on top of it, because the click is still how someone asks for
   the real video with sound. */
.player .player__frame,
.player .player__frame iframe,
.player--previewing iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; pointer-events: none;
}
.player--previewing .player__play,
.player--previewing .player__meta { z-index: 2; }
.player--previewing img { transition: opacity 400ms var(--ease-out); }

/* The click target sits over the preview. It covers the whole frame so the
   behaviour is unchanged for anyone who just clicks the picture. */
.player__btn {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
  display: block;
}
.player__btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -4px; }

/* Once the interview is playing, a big play symbol reads as "this is stopped",
   which is exactly the confusion to avoid. It gives way to the one thing the
   click still does: turn the sound on. */
.player__sound {
  position: absolute; right: 18px; top: 18px;
  display: none; align-items: center;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: rgba(14, 14, 12, 0.62);
  backdrop-filter: blur(6px);
  color: var(--paper);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.player--previewing .player__play { display: none; }
.player--previewing .player__sound { display: inline-flex; }
/* the still stays put until the frame reports it loaded, so a blocked or slow
   embed leaves the photograph rather than a black rectangle */
/* The player is visible from creation. Holding it at opacity 0 until it
   reported PLAYING was circular — a browser will not autoplay something it
   treats as invisible, so it never reached PLAYING and was never revealed.
   The still sits on top instead and fades out once the player is running. */
.player .player__frame, .player .player__frame iframe { z-index: 0; }
.player > img { z-index: 1; }
.player--previewing > img { opacity: 0; }

/* ---- press: the OWN segment plays above the billboard (2026-10-13) ----
   A press section about television with nothing moving in it was the gap.
   Same preview component as the featured interview, sized for this column. */
.press__col { display: grid; gap: 20px; align-content: start; }
.player--press {
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
}
.player--press .player__meta { padding: 16px 18px; }
.player--press .player__meta strong { font-size: 18px; }
.player--press .player__sound { right: 12px; top: 12px; padding: 7px 12px; font-size: 10.5px; }
.player--press .player__play span { transform: scale(0.8); }

/* ============================================================
   Press on black, rebalanced (2026-10-13)
   Press and Push Forward sat on the same paper back to back and
   read as one section. Ryan Leak separates every section with a
   full-width band; in neutrals that means press goes black, so the
   page alternates black / light / black / light all the way down.
   The layout also lost its dead gap: video and billboard side by
   side, the outlet index in one run underneath.
   ============================================================ */
.press { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.press__col {
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 20px; align-items: stretch;
}
.player--press { aspect-ratio: auto; min-height: 330px; height: 100%; }
.press__feature { display: flex; flex-direction: column; }
.press__feature img { aspect-ratio: 16 / 10.4; }
.press__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; }
.press__list li { display: block; padding: 14px 0; }
.press__what { text-align: left; }

#press.dark .press__list li { border-color: var(--line-dark); }
#press.dark .press__outlet { color: var(--paper); }
#press.dark .press__what { color: rgba(244, 244, 241, 0.62); }
#press.dark .press__feature { background: #1b1b19; border-color: var(--line-dark); }
#press.dark .press__cap { color: var(--paper); }
#press.dark .outlet { color: var(--accent-light); }

@media (max-width: 1100px) {
  .press__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .press__col { grid-template-columns: minmax(0, 1fr); }
  .player--press { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .press__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* two columns all the way down: single file, ten outlets ran ~760px of
   scroll on a phone. minmax(0,1fr) lets the longer names wrap, not overflow. */
@media (max-width: 440px) {
  .press__list { gap: 0 18px; }
  .press__outlet { font-size: 15.5px; }
  .press__what { font-size: 13.5px; }
}

/* ============================================================
   Push Forward — text left, the program's own footage to the edge
   (2026-10-13, picked from live mocks)
   Push Forward and The Story were the same section twice: heading,
   paragraph and photo on the left, a labelled list on the right.
   Each now has its own shape.
   ============================================================ */
.pf { padding-block: 0; }                      /* the split pays its own padding */
.pf__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 760px;
}
.pf__txt {
  padding-block: clamp(72px, 7vw, 104px);
  padding-right: clamp(32px, 4vw, 64px);
  /* lines the copy up with every other section's .wrap edge */
  padding-left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
}
.pf__txt .lede { max-width: 46ch; }
.pf__media { position: relative; overflow: hidden; background: var(--paper-3); }
.pf__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* item titles in the condensed caps the mock was approved in */
.pf .fact h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 18px;
  line-height: 1.12;
}
.pf .fact p { font-size: 15px; }

.pf__proof { margin-top: 30px; }
.pf__proofk {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}

@media (max-width: 900px) {
  .pf__split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pf__media { order: -1; aspect-ratio: 16 / 10; }
  .pf__txt { padding: 48px var(--gutter) 64px; }
}

/* screen-reader-only text */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   Testimonials (2026-10-13)
   Sent by Preston, used word for word. Straight after the ticker
   so a school booker meets other schools before anything else,
   and it keeps the band rhythm: paper here, press black below.
   ============================================================ */
.testi .kicker { font-family: var(--font-body); line-height: 1.4; }   /* an h2 wearing the kicker style */
.testi__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 64px);
  align-items: center;
}
.testi__lead, .testi__video { margin: 0; }
.testi__big {
  margin: 18px 0 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4.2vw, 58px); line-height: 0.98; letter-spacing: 0.005em;
  color: var(--ink); text-wrap: balance;
}
.testi__who { margin: 18px 0 0; display: flex; flex-direction: column; gap: 3px; }
.testi__who b { font-size: 16px; font-weight: 600; color: var(--ink); }
.testi__who span { font-size: 14px; color: var(--ink-2); }
.testi__frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden; background: var(--paper-3);
}
.testi__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testi__video figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-2); }

.testi__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
  margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; list-style: none;
}
.testi__card { padding: 26px 0 30px; border-top: 1px solid var(--line-strong); }
.testi__card blockquote { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.testi__card .testi__who { margin-top: 16px; }
.testi__card .testi__who b { font-size: 14.5px; }
.testi__card .testi__who span { font-size: 13px; }

@media (max-width: 900px) {
  .testi__top { grid-template-columns: minmax(0, 1fr); }
  .testi__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: six quotes stacked ran long, so they become one row you swipe,
   with the next card peeking in to say there is more */
@media (max-width: 600px) {
  .testi__grid {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .testi__grid::-webkit-scrollbar { display: none; }
  .testi__card { scroll-snap-align: start; }
}

/* ============================================================
   Push Forward additions (2026-10-13)
   ============================================================ */
/* the one outcome on record, from his own program film — styled as
   the next row of the facts so it reads as part of the same evidence */
.pf__result {
  display: flex; align-items: baseline; gap: 20px;
  margin: 0; padding: 19px 0;
  border-bottom: 1px solid rgba(14, 14, 12, 0.14);
}
.pf__result b {
  flex: 0 0 auto; min-width: 72px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 40px; line-height: 1; color: var(--accent); white-space: nowrap;
}
.pf__result span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* the loop stays silent; this is the way to the full film with sound */
.pf__film {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 10px;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(14, 14, 12, 0.72); color: var(--paper);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 13.5px/1 var(--font-body); cursor: pointer;
  transition: background 300ms var(--ease-out), transform 160ms var(--ease-out);
}
.pf__film:hover { background: rgba(14, 14, 12, 0.9); }
.pf__film:active { transform: scale(0.97); }
.pf__film:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.pf__filmplay {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink);
}
.pf__filmplay svg { margin-left: 2px; }
.pf__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.booking__photo img { object-position: 50% 45%; }

/* ============================================================
   Testimonials and Story in motion (2026-10-13)
   Adrian picked Spotlight and Journey player from live options.
   Built by main.js from the existing markup; without script the
   quote grid and the two story photos stay as they were.
   ============================================================ */

/* ---- controls shared by both ---- */
.ctl { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.ctl__btn {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 140ms var(--ease-out);
}
.ctl__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ctl__btn:active { transform: scale(0.94); }
.ctl__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ctl--pause .i-play { display: none; }
.ctl--pause[aria-pressed="true"] .i-play { display: block; }
.ctl--pause[aria-pressed="true"] .i-pause { display: none; }

/* the running timer: its animation is what advances the slide */
[data-fill].run { animation: pp-fill linear forwards; }
.is-held [data-fill].run { animation-play-state: paused; }
@keyframes pp-fill { to { transform: scaleX(1); } }

/* words that rise out of their own line */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.08em; margin: -0.06em 0 -0.08em; }
.w > span { display: inline-block; }

/* ---- Spotlight ---- */
.spot__stage { display: grid; margin-top: 18px; }
.spot__slide { grid-area: 1 / 1; margin: 0; visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
.spot__slide.is-on, .spot__slide.is-out { visibility: visible; }
.spot__q {
  margin: 0;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.98; letter-spacing: 0.005em; color: var(--ink); text-wrap: balance;
}
.spot__q--s { font-size: clamp(34px, 4.2vw, 58px); }
.spot__q--m { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.02; }
.spot__q--l { font-size: clamp(23px, 2.35vw, 33px); line-height: 1.06; }
.spot__slide .w > span { transform: translateY(110%); }
.spot__slide.is-on .w > span { transform: none; transition: transform 600ms var(--ease-out) calc(140ms + var(--d, 0ms)); }
.spot__slide .testi__who { opacity: 0; transform: translateY(8px); }
.spot__slide.is-on .testi__who { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out) 360ms, transform 400ms var(--ease-out) 360ms; }
.spot__slide.is-out { opacity: 0; transform: translateY(-10px); transition: opacity 240ms ease-in, transform 240ms ease-in; }
.spot__slide.is-out .w > span, .spot__slide.is-out .testi__who { opacity: 1; transform: none; }
/* held down until the section is first reached, so the first quote rises too */
.spot.pre .spot__slide.is-on .w > span { transform: translateY(110%); transition: none; }
.spot.pre .spot__slide.is-on .testi__who { opacity: 0; }

.spot__segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; flex: 1 1 auto; }
.spot__seg { position: relative; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.spot__seg::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--line-strong); }
.spot__seg i {
  position: absolute; left: 0; right: 0; top: 11px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
}
.spot__seg.is-past i { transform: scaleX(1); }
.spot__seg:hover::before { background: var(--ink-3); }
.spot__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  /* starts paused (main.js); if played, quotes and photos swap without travel */
  .spot__slide .w > span, .spot.pre .spot__slide.is-on .w > span { transform: none !important; }
  .spot__slide .testi__who, .spot.pre .spot__slide.is-on .testi__who { opacity: 1; transform: none; }
  .spot__slide.is-out { display: none; }
}

/* ============================================================
   Push Forward fits one screen (2026-10-13)
   Adrian had to scroll to reach the bottom of the copy and the
   footage. It ran 1,113px tall at 1440 wide; now the three facts
   sit side by side and every gap is tighter, so text and video
   share one viewport on a laptop.
   ============================================================ */
@media (min-width: 901px) {
  .pf__split { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); min-height: 0; }
  .pf__txt { padding-block: clamp(32px, 3.2vw, 56px); }
  .pf .h-lg { font-size: clamp(36px, 3.4vw, 50px); }
  .pf .lede { margin-top: 12px; max-width: 54ch; font-size: 16px; }
  .pf .facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px;
    margin-top: 22px; border-top: 1px solid rgba(14, 14, 12, 0.14);
  }
  .pf .fact { display: block; padding: 14px 0 0; border: 0; }
  .pf .fact:last-child { border-bottom: 0; }
  .pf .fact__num { display: block; min-width: 0; font-size: 32px; }
  .pf .fact h3 { margin-top: 8px; font-size: 16px; }
  .pf .fact p { margin-top: 5px; font-size: 13.5px; line-height: 1.45; }
  .pf__result { margin-top: 18px; padding: 12px 0; border-top: 1px solid rgba(14, 14, 12, 0.14); }
  .pf__result b { font-size: 30px; min-width: 0; }
  .pf__result span { font-size: 14px; }
  .pf__proof { margin-top: 16px; }
  .pf__proofk { margin-bottom: 8px; }
  .pf .chips li { padding: 7px 13px; font-size: 13px; }
  .pf .mt-30 { margin-top: 20px; }
}

/* ============================================================
   The story, rebuilt on Ryan Leak's "Hi, I'm" block (2026-10-13)
   Adrian: "make it look unique", with ryanleak.com as the brief.
   Taken from it: the hand-written name, the story in his own voice,
   photos that overlap and run off the edge, a sticker. Not taken:
   the yellow, the fonts, the copy. Preston's paper, ink and green.
   ============================================================ */
/* clip, not hidden: hidden would make the section a scroll container and
   stop the intro sticking. The collage runs to the screen edge. */
.story { overflow-x: clip; padding-top: 0; }
.story__grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.story__p { margin: 18px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.story__p:first-child { margin-top: 0; }
.story__p b { font-weight: 600; color: var(--ink); }
.story__p .reg { color: var(--accent); }

/* the collage */
.story__art {
  --bleed: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  position: relative; min-height: clamp(470px, 44vw, 600px);
}
.story__stage {
  position: absolute; top: 0; right: calc(var(--bleed) * -1); margin: 0;
  width: 46%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius-media) 0 0 var(--radius-media); background: var(--paper-3);
}
.story__stage img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.story__reel { position: absolute; left: 0; top: 13%; width: 70%; z-index: 2; }
.story__frame {
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 20px; background: var(--ink);
  box-shadow: 0 0 0 6px var(--paper), 0 30px 60px -28px rgba(14, 14, 12, 0.5);
}
.story__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 100% 0 0); transition: clip-path 800ms var(--ease-out);
}
.story__frame img.was-on { clip-path: inset(0); z-index: 1; }
.story__frame img.is-on { clip-path: inset(0); z-index: 2; }
.story__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
  padding: 64px 22px 20px;
  background: linear-gradient(0deg, rgba(14, 14, 12, 0.82) 0%, rgba(14, 14, 12, 0.45) 55%, rgba(14, 14, 12, 0) 100%);
  color: var(--paper); transition: opacity 180ms ease-in, transform 180ms ease-in;
}
.story__cap.is-swap { opacity: 0; transform: translateY(4px); }
.story__where { font: 800 clamp(28px, 2.8vw, 40px)/0.92 var(--font-display); text-transform: uppercase; }
.story__line { font-size: 14px; line-height: 1.4; color: rgba(244, 244, 241, 0.88); }

/* one bar per chapter, as on an Instagram story; the filling one is the clock */
.story__segs {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 4;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px;
}
.story__segs span { position: relative; height: 3px; border-radius: 3px; background: rgba(244, 244, 241, 0.35); overflow: hidden; }
.story__segs i {
  position: absolute; inset: 0; background: var(--paper);
  transform: scaleX(var(--from, 0)); transform-origin: left;
}
.story__segs span.is-past i { transform: scaleX(1); }
.story__segs i.run { animation-name: pp-seg; }
@keyframes pp-seg { from { transform: scaleX(var(--from)); } to { transform: scaleX(var(--to)); } }

/* tap the left or right of the picture to go back or on, as on Instagram */
.story__tap { position: absolute; top: 0; z-index: 5; width: 50%; height: calc(100% - 58px); padding: 0; border: 0; background: none; cursor: pointer; }
.story__tap--prev { left: 0; cursor: w-resize; }
.story__tap--next { right: 0; cursor: e-resize; }
.story__tap:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 20px; }
.story__ctl { margin-top: 18px; }

.story__badge {
  position: absolute; z-index: 3; left: 58%; top: 2%;
  width: clamp(104px, 10vw, 140px); height: auto; overflow: visible;
}
.badge__disc { fill: var(--accent); }
.badge__ring { transform-box: view-box; transform-origin: 50% 50%; animation: badge-spin 18s linear infinite; }
.badge__ring text { font: 800 15px var(--font-display); letter-spacing: 0.12em; fill: var(--paper); }
.badge__mark { font: 400 54px "Mr Dafoe", cursive; fill: var(--paper); }
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* settles in once, the first time it is reached */
.story__stage, .story__reel, .story__badge { transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out); }
.story__reel { transition-delay: 120ms; }
.story__badge { transition-delay: 380ms; }
.story.pre .story__stage { transform: translateX(14%); opacity: 0; }
.story.pre .story__reel { transform: translateY(36px) rotate(-3deg); opacity: 0; }
.story.pre .story__badge { transform: scale(0.4) rotate(-40deg); opacity: 0; }

@media (max-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 1fr); }
  .story__art { min-height: 0; margin-top: 12px; padding-top: 56px; }
  .story__stage { width: 50%; }
  .story__reel { position: relative; top: auto; width: 88%; }
  .story__badge { left: auto; right: 6px; top: 0; width: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .badge__ring { animation: none; }
  .story__frame img { transition: none !important; }
}

/* ---- the intro: held on screen while "Hi, I'm Preston Pollard" is written ----
   The intro is 260vh tall and its first child sticks for the extra 160vh.
   --p is how far through that the visitor has scrolled (main.js). */
.story__intro { --p: 0; height: 260vh; height: 260svh; }
.story__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; padding: 72px var(--gutter) 0;
}
.story__hi { margin: 0; text-align: left; }
.story__hey {
  --a: clamp(0, var(--p) / 0.14, 1);                  /* 0 to 14% of the scroll */
  display: block; padding-left: 0.5em;
  font: 800 clamp(48px, 6.4vw, 104px)/0.9 var(--font-display);
  text-transform: uppercase; letter-spacing: 0.005em; color: var(--ink);
  opacity: var(--a); transform: translateY(calc((1 - var(--a)) * 40px));
}
.story__sig {
  /* written left to right from 14% to 82% of the scroll; the edge leans
     with the script so it reads as a pen stroke, not a curtain */
  --w: clamp(0, (var(--p) - 0.14) / 0.68, 1);
  --x: calc(var(--w) * 124% - 12%);
  position: relative; display: block; width: max-content; max-width: 100%;
  margin: -0.12em 0 0; padding: 0.1em 0.18em 0.16em 0.02em;
  font: 400 clamp(84px, 13.4vw, 214px)/1 "Mr Dafoe", "Brush Script MT", cursive;
  text-transform: none; letter-spacing: 0; white-space: nowrap; color: var(--ink);
  transform: rotate(-5deg); transform-origin: left center;
  clip-path: polygon(0 -40%, calc(var(--x) + 7%) -40%, calc(var(--x) - 7%) 140%, 0 140%);
}
/* then the green marker underlines it, 82% to 96% */
.story__ink {
  --u: clamp(0, (var(--p) - 0.82) / 0.14, 1);
  position: absolute; left: 4%; right: 2%; bottom: 0.06em; width: 94%; height: 0.16em;
  overflow: visible; color: var(--accent);
}
.story__ink path {
  fill: none; stroke: currentColor; stroke-width: 14; stroke-linecap: round;
  stroke-dasharray: 340; stroke-dashoffset: calc(340 - var(--u) * 340);
}
/* his photo shares the held screen with his name, coming up with "Hi, I'm"
   and settling as the name is written */
.story__me {
  --m: clamp(0, var(--p) / 0.2, 1);
  margin: 0; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--radius-media); background: var(--paper-3);
  box-shadow: 0 0 0 6px var(--paper), 0 30px 60px -28px rgba(14, 14, 12, 0.5);
  opacity: var(--m);
  transform: translateY(calc((1 - var(--m)) * 56px)) rotate(calc(5deg - var(--m) * 3deg));
}
.story__me img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 49% 30%; }
@media (min-width: 901px) {
  .story__pin {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: clamp(28px, 4vw, 72px);
    max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto;
    justify-items: start;
  }
  /* the name is sized from its own column, so it can never run into the photo */
  .story__hi { justify-self: stretch; container-type: inline-size; }
  .story__sig { font-size: clamp(72px, 8.6vw, 150px); font-size: min(16cqi, 150px); }
  .story__hey { font-size: clamp(44px, 5vw, 84px); font-size: min(9cqi, 84px); }
}
@media (max-width: 900px) {
  .story__intro { height: 220vh; height: 220svh; }
  .story__pin { padding-top: 64px; align-content: center; gap: 28px; }
  .story__me { width: min(78%, 340px); justify-self: center; }
  .story__sig { font-size: 12.6vw; }             /* one line, still inside a 390px phone */
  .story__hey { font-size: 11vw; }
}
/* no pinning without motion: the name simply sits there, written */
@media (prefers-reduced-motion: reduce) {
  .story__intro { height: auto; }
  .story__pin { position: static; height: auto; padding-block: var(--sect) 24px; }
  .story__intro { --p: 1; }
}