/* Trey Dillard Pitching, one stylesheet. Tokens from from_trey/site_repo/globals.css. */

/* ---------- fonts, self hosted ---------- */
@font-face {
  font-family: 'Anton';
  src: url('fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --void: #080807;
  --void-2: #11110f;
  --void-3: #181815;
  --bone: #ede6d6;
  --bone-dim: #c8c0b0;
  --ash: #8a8478;
  --stitch: #c1121f;
  --stitch-bright: #e5484d; /* small red text only: passes 4.5:1 on void */
  --stitch-deep: #7a0b14;
  --clay: #a24c2c;
  --flood: #f3e2b0;
  --line: rgba(237, 230, 214, 0.12);

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 4vw, 64px);
  --section-pad: clamp(72px, 12vh, 140px);
  --max-w: 1440px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--void);
}
body {
  background: var(--void);
  color: var(--bone-dim);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 18px; } }

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--stitch); color: var(--bone); }
:focus-visible { outline: 2px solid var(--stitch); outline-offset: 3px; }

html { scrollbar-color: var(--void-3) var(--void); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--void-3); border: 2px solid var(--void); }
::-webkit-scrollbar-thumb:hover { background: var(--ash); }

/* film grain, static */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--gutter); }

.skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  background: var(--void-3);
  color: var(--bone);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus-visible { top: 12px; }

/* ---------- type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.headline { font-size: clamp(42px, 9vw, 92px); max-width: 14ch; }
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: clamp(24px, 4vh, 48px);
}
.kicker b { color: var(--stitch-bright); font-weight: 700; }
.kicker::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--stitch);
  flex: none;
}
.lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; max-width: 32em; }
.copy { max-width: 34em; }
.copy + .copy { margin-top: 1em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  background: var(--stitch);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
}
.btn--small { min-height: 44px; padding: 8px 20px; font-size: 15px; }
@media (hover: hover) {
  .btn { transition: background-color 0.18s ease-out, border-color 0.18s ease-out; }
  .btn:hover { background: var(--stitch-deep); }
  .btn--ghost:hover { background: transparent; border-color: var(--bone-dim); }
}
.textlink {
  color: var(--bone);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--stitch);
  text-underline-offset: 4px;
}

/* ---------- top bar ---------- */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--gutter);
}
.topbar .brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}
.topbar .brand b { color: var(--stitch-bright); }
.topbar .btn--ghost { border-color: rgba(237, 230, 214, 0.35); background: rgba(8, 8, 7, 0.3); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.2) brightness(0.55) contrast(1.05);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 50% at 80% 10%, rgba(243, 226, 176, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(8, 8, 7, 0.55) 0%, rgba(8, 8, 7, 0.2) 45%, var(--void) 97%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 120px var(--gutter) clamp(28px, 5vh, 56px);
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.hero-kicker::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--stitch);
}
.hero-name {
  margin-top: 18px;
  font-size: clamp(76px, 17vw, 184px);
  line-height: 0.84;
  letter-spacing: -0.005em;
  max-width: 100%;
}
.hero-name .nm { display: block; }
.hero-name .dot { color: var(--stitch); }
.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(28px, 4vh, 48px);
}
.hero-intro { max-width: 540px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.hero-note {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ---------- sections ---------- */
.inning {
  border-top: 1px solid var(--line);
  padding-block: var(--section-pad);
}
.inning--surface { background: var(--void-2); }

/* 01 stats */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
}
.stat {
  padding: clamp(24px, 4vw, 48px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-child(n+3) { border-bottom: 0; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 110px);
  line-height: 1;
  color: var(--bone);
}
.stat .num sup {
  font-size: 0.35em;
  color: var(--stitch);
  vertical-align: super;
}
.stat .lbl {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  max-width: 24ch;
}
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
}

/* 02 plan */
.plan-grid {
  display: grid;
  gap: clamp(32px, 6vw, 96px);
}
@media (min-width: 900px) {
  .plan-grid { grid-template-columns: 5fr 4fr; align-items: start; }
}
.plan-list { list-style: none; counter-reset: day; }
.plan-list li {
  counter-increment: day;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 38px);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.05;
}
.plan-list li::before {
  content: "0" counter(day);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--stitch-bright);
  flex: none;
  width: 2.2em;
}
.plan-copy p + p { margin-top: 1em; }
.plan-copy .blunt { color: var(--bone); font-weight: 700; }

/* marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-block: 16px;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  text-transform: uppercase;
  color: var(--ash);
  white-space: nowrap;
}
.marquee-track i {
  width: 8px; height: 8px;
  background: var(--stitch);
  flex: none;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html[data-marquee="off"] .marquee-track { animation: none; }
.marquee.is-off .marquee-track { animation-play-state: paused; }

/* 03 strip */
.strip-head { margin-bottom: clamp(28px, 5vh, 56px); }
.strip-outer { overflow: hidden; }
.strip {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  width: max-content;
  padding-inline: var(--gutter);
}
.strip-item { flex: none; }
.strip-item figure { margin: 0; }
.strip-item img {
  height: clamp(300px, 46vh, 460px);
  width: auto;
  object-fit: cover;
  filter: grayscale(0.85) sepia(0.12) contrast(1.02) brightness(0.92);
}
.strip-item.artifact img {
  border: 1px solid var(--line);
  filter: grayscale(0.4) contrast(1.0) brightness(0.9);
}
.strip-item.alive img { filter: none; } /* the one full color photo on the page: now */
.strip-item figcaption {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  max-width: 30ch;
}
.strip-item figcaption b { color: var(--bone-dim); font-weight: 700; }
/* phone: native horizontal scroll */
@media (max-width: 899px) {
  .strip-outer { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .strip { scroll-snap-type: x proximity; }
  .strip-item { scroll-snap-align: start; }
}

/* 04 proof, 06 parents shared layout */
.split-grid {
  display: grid;
  gap: clamp(36px, 6vw, 96px);
}
@media (min-width: 900px) {
  .split-grid { grid-template-columns: 7fr 5fr; align-items: center; }
}
.vslot {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 340px;
  width: 100%;
  background: var(--void-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.vslot img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) sepia(0.12) brightness(0.8);
}
.vslot .tag {
  position: absolute;
  left: 14px; bottom: 14px; right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}
.vslot .tag::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--stitch);
  flex: none;
}
.vslot .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 7, 0.85));
}

/* 05 price */
.price-sec { position: relative; overflow: hidden; }
.price-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(162, 76, 44, 0.1), transparent 55%),
    radial-gradient(45% 40% at 5% 90%, rgba(193, 18, 31, 0.07), transparent 50%);
}
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
}
.price-big {
  font-family: var(--font-display);
  font-size: clamp(110px, 24vw, 260px);
  line-height: 0.9;
  color: var(--bone);
}
.price-big .cur { color: var(--stitch); font-size: 0.55em; vertical-align: 0.5em; }
.price-per {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 44px);
  text-transform: uppercase;
  color: var(--ash);
}
.price-plans {
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(17px, 2vw, 20px);
  color: var(--bone);
  font-weight: 700;
}
.price-fine { margin-top: 14px; max-width: 36em; }
.price-fine b { color: var(--bone); font-weight: 700; }
.price-cta { margin-top: clamp(28px, 4vh, 44px); }

/* 07 faq */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--bone);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--stitch);
  flex: none;
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 24px; max-width: 60ch; }
.faq .faq-body p + p { margin-top: 0.8em; }

/* 08 cta band */
.cta-band {
  min-height: 62vh;
  display: flex;
  align-items: center;
}
.cta-band .wrap { width: 100%; }
.cta-band .headline { max-width: 12ch; }
.cta-band .lead { margin-top: 24px; }
.cta-band .btn { margin-top: 36px; }

/* ---------- subpages ---------- */
.subhead {
  padding: clamp(110px, 16vh, 170px) 0 clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--line);
}
.subhead .lead { margin-top: 24px; }

/* apply */
.apply-main { padding-block: clamp(32px, 5vh, 56px) var(--section-pad); }
.price-line {
  max-width: 34em;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--bone);
  font-weight: 700;
}
.form-shell { margin-top: clamp(28px, 4vh, 44px); min-height: 420px; }
.form-wait {
  border: 1px solid var(--line);
  background: var(--void-2);
  padding: clamp(28px, 5vw, 48px);
  max-width: 560px;
}
.form-wait .big {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}
.form-wait p { margin-top: 14px; max-width: 42ch; }

/* precall video column */
.vcol { max-width: 760px; }
.vrow {
  padding: clamp(28px, 5vh, 48px) 0;
  border-bottom: 1px solid var(--line);
}
.vrow .vtitle {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}
.vrow .vtitle i {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--stitch-bright);
  flex: none;
  width: 2.2em;
}
.vrow .vdesc { margin-top: 10px; max-width: 48ch; }
.vrow .vslot { margin-top: 20px; }

/* applied routing */
.route { max-width: 640px; }
.route .btn { margin-top: 24px; }
.route-note { margin-top: 16px; font-size: 14px; color: var(--ash); }
.hold {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: var(--void-2);
  padding: clamp(24px, 4vw, 40px);
}
.hold p { max-width: 46ch; }
.hold p + p { margin-top: 0.8em; }

/* booked checklist */
.next-list { list-style: none; max-width: 640px; counter-reset: nx; }
.next-list li {
  counter-increment: nx;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.next-list li::before {
  content: "0" counter(nx);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--stitch-bright);
  flex: none;
  width: 2.2em;
}
.next-list b { color: var(--bone); }

/* privacy prose */
.prose { max-width: 62ch; }
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 30px);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.05;
  margin: clamp(32px, 5vh, 48px) 0 12px;
}
.prose p + p { margin-top: 0.8em; }
.prose a { color: var(--bone); text-decoration-color: var(--stitch); text-underline-offset: 3px; }

/* 404 */
.err-band {
  min-height: 80svh;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.err-band .wrap { width: 100%; }
.err-num {
  font-family: var(--font-display);
  font-size: clamp(120px, 30vw, 300px);
  line-height: 0.9;
  color: var(--bone);
}
.err-num span { color: var(--stitch); }
.err-band .lead { margin-top: 18px; }
.err-band .btn { margin-top: 32px; }

/* footer */
.footer {
  border-top: 1px solid var(--line);
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}
.footer a { color: var(--ash); }

/* sticky apply bar */
.applybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--void-3);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.3s var(--ease-out);
}
.applybar.is-on { transform: translateY(0); }
.applybar .pr { font-weight: 700; color: var(--bone); font-size: 15px; }
.applybar .pr span { color: var(--ash); font-weight: 500; }
@media (max-width: 419px) { .applybar .pr span { display: none; } }

/* section spacing for anchored jumps under fixed bars */
[id] { scroll-margin-top: 80px; }

/* lenis required rules, desktop smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

@media (max-width: 480px) {
  :root { --section-pad: clamp(56px, 9vh, 84px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .applybar { transition: none; transform: translateY(0); }
  .faq summary::after { transition: none; }
  .btn { transition: none; }
}

/* ---------- Oct 26: doors, players, quotes, packages, form ---------- */

/* front page doors */
.doors {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 900px) {
  .doors { grid-template-columns: 7fr 5fr; align-items: stretch; }
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--bone-dim);
  text-decoration: none;
  min-height: 300px;
}
.door--main { min-height: clamp(380px, 52vh, 520px); background: var(--void-3); }
.door .door-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 0.92;
  font-size: clamp(34px, 6vw, 56px);
}
.door--main .door-name { font-size: clamp(48px, 9vw, 96px); }
.door .door-price {
  font-weight: 700;
  color: var(--bone);
  font-size: clamp(17px, 2vw, 20px);
}
.door p { max-width: 36ch; }
.door .door-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--bone);
}
.door .door-go::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--stitch);
}
@media (hover: hover) {
  .door { transition: border-color 0.2s ease-out, background-color 0.2s ease-out; }
  .door:hover { border-color: rgba(237, 230, 214, 0.35); }
}
.door:focus-visible { outline-offset: 4px; }

/* video players */
.vplayer {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  background: var(--void-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.vplayer--wide { max-width: 880px; aspect-ratio: 16 / 9; }
.vplayer video { width: 100%; height: 100%; object-fit: cover; background: var(--void); }
.vplayer .ph-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) sepia(0.12) brightness(0.72); }
.vplayer .tag {
  position: absolute;
  left: 16px; bottom: 14px; right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}
.vplayer .tag::before { content: ""; width: 7px; height: 7px; background: var(--stitch); flex: none; }
.vplayer .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 7, 0.85)); }
.intro-block .btn { margin-top: 20px; }
.intro-block .intro-note { margin-top: 12px; font-size: 14px; color: var(--ash); }

/* quote wall */
.quote-pull {
  max-width: 30ch;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.38;
  font-weight: 700;
  color: var(--bone);
}
.quote-pull::before {
  content: "";
  display: block;
  width: 36px; height: 4px;
  background: var(--stitch);
  margin-bottom: 22px;
}
.quote-level {
  display: block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.quote-grid {
  display: grid;
  gap: 0;
  margin-top: clamp(36px, 6vh, 64px);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .quote-grid { grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 5vw, 72px); } }
.quote-grid blockquote {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  color: var(--bone-dim);
  max-width: 52ch;
}
.quote-list { max-width: 640px; }
.quote-list blockquote { padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--bone-dim); }
.quote-list blockquote:first-child { border-top: 1px solid var(--line); }

/* mental packages */
.packs { width: 100%; max-width: 720px; border-collapse: collapse; margin-top: clamp(24px, 4vh, 40px); }
.packs th, .packs td {
  text-align: left;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}
.packs thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}
.packs tbody th { font-weight: 700; color: var(--bone); }
.packs .total { font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); color: var(--bone); font-weight: 400; }
.packs .per { color: var(--bone-dim); }
.packs-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; }

/* the application, embedded */
.apply-panel {
  margin-top: clamp(28px, 4vh, 44px);
  max-width: 760px;
  background: #ffffff;
  border: 1px solid var(--line);
  padding: clamp(16px, 3vw, 32px);
  min-height: 420px;
}
.apply-panel iframe { display: block; width: 100%; border: 0; }
.apply-fallback { margin-top: 16px; font-size: 14px; color: var(--ash); }
.apply-fallback a { color: var(--bone); }

/* thank you pages */
.vstack { display: grid; gap: clamp(40px, 7vh, 72px); max-width: 760px; }
.vstack .vitem h2 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
  font-weight: 400;
}
.vstack .vitem h2 i {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--stitch-bright);
  flex: none;
  width: 2.2em;
}
.vstack .vitem p { margin-top: 8px; max-width: 46ch; }
.vstack .vplayer { margin-top: 18px; }
.skool-end { border-top: 1px solid var(--line); padding-top: clamp(32px, 5vh, 48px); max-width: 640px; }
.skool-end .btn { margin-top: 20px; }


/* ---------- Oct 26: added to the Oct 21 front page ---------- */

/* item 9: Mental performance link in the top bar */
.topbar-actions { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.topbar-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) { .topbar-link:hover { color: var(--stitch-bright); } }
@media (max-width: 479px) {
  .topbar--with-link .brand { flex: none; }
  .topbar--with-link .brand b { display: block; }
  .topbar-actions { gap: 12px; min-width: 0; }
  .topbar-link { font-size: 11px; letter-spacing: 0.1em; line-height: 1.35; }
}

/* item 9: the mental performance band before the FAQ */
.mental-band .door { max-width: 640px; }

/* item 2: intro video and Apply above the pinned strip */
.intro-block--above { margin-bottom: clamp(48px, 8vh, 88px); }

/* item 3: pin fix. Photos keep their Oct 21 size unless the heading, photos
   and captions would not fit on screen together; motion.js then sets --strip-h. */
.strip.is-fit .strip-item img { height: var(--strip-h); }
.strip-outer.is-pinned { overflow: hidden; }

/* ======================================================================
   Oct 26, afternoon: two programs, tabs, timeline, program panel
   ====================================================================== */

/* Step 3: program colors. Every accent reads these three variables, so the
   mental theme only swaps them: buttons, kickers, hero dot, tabs, bar, focus. */
.theme-mental {
  --stitch: #1d5fc4;        /* fills and marks: bone text on it 4.84:1, on void 3.33:1 */
  --stitch-bright: #5aa9ff; /* small text: 8.16:1 on void */
  --stitch-deep: #164a99;   /* pressed and hover */
}
.theme-mental .price-sec::before {
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(29, 95, 196, 0.12), transparent 55%),
    radial-gradient(45% 40% at 5% 90%, rgba(90, 169, 255, 0.06), transparent 50%);
}
.hero-name--long { font-size: clamp(60px, 15vw, 156px); line-height: 0.94; }

/* Step 4, revised late Oct 26: the program tabs are a two-button switcher.
   Fixed program colors, whatever the page theme: red for throwing, blue for mental.
   The current page's tab is filled; on the front page neither is. */
.tabs {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  gap: 10px;
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  border: 2px solid;
  background: rgba(8, 8, 7, 0.55);
  white-space: nowrap;
}
.tab--throwing { border-color: #c1121f; }
.tab--mental { border-color: #1d5fc4; }
.tab--throwing[aria-current="page"] { background: #c1121f; color: #ffffff; }
.tab--mental[aria-current="page"] { background: #1d5fc4; color: #ffffff; }
@media (hover: hover) { .tab:not([aria-current]):hover { background: rgba(237, 230, 214, 0.1); } }

/* below 1100px: a full width segmented control under the brand, sticky, same fills */
@media (max-width: 1099px) {
  .tabs {
    position: sticky;
    top: 0;
    left: auto;
    transform: none;
    box-sizing: border-box;
    height: 64px;
    margin: 72px var(--gutter) -136px; /* tabs sit 72px down; the hero still starts at the top, under the brand */
    padding: 7px;
    gap: 7px;
    background: rgba(24, 24, 21, 0.92);
    border: 1px solid rgba(237, 230, 214, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .tab {
    flex: 1 1 50%;
    min-height: 48px;
    padding: 4px 8px;
    font-size: 15px;
    text-align: center;
    white-space: normal;
  }
  .topbar--tabs + .tabs + main .hero-inner,
  .topbar--tabs + .tabs + main .subhead { padding-top: 160px; }
}

/* Step 5: the career timeline. Default (no script, reduced motion): stops stacked. */
.timeline { padding-inline: 0; }
.tl-head .headline { max-width: none; font-size: clamp(36px, 5.2vw, 72px); }
.tl-track { display: grid; gap: clamp(40px, 6vh, 64px); padding-inline: var(--gutter); }
.tl-stop { margin: 0; max-width: 720px; }
.tl-media { display: flex; gap: 12px; align-items: flex-end; }
.tl-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--tl-photo-h, 60vh);
  border: 1px solid var(--line);
  filter: grayscale(0.85) sepia(0.12) contrast(1.02) brightness(0.92);
}
.tl-media.has-two img { max-width: calc(50% - 6px); }
.tl-stop.is-artifact .tl-media img { filter: grayscale(0.4) brightness(0.92); }
.tl-stop.is-now .tl-media img { filter: none; }
.tl-big {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 0.9;
  font-size: clamp(80px, 22vw, 150px);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tl-year {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stitch-bright);
}
.tl-title {
  margin-top: 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--bone);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
}
.tl-line { margin-top: 8px; max-width: 64ch; color: var(--bone-dim); } /* Oct 27: wider, 3 rows at most at 1440, 4 at 390 */

/* motion on: one horizontal track, pinned (motion.js adds .is-horizontal) */
.timeline.is-horizontal .tl-track {
  display: flex;
  gap: clamp(32px, 4vw, 80px);
  width: max-content;
  align-items: flex-start;
}
.timeline.is-horizontal .tl-stop { flex: none; width: clamp(560px, 50vw, 720px); }
.timeline.is-horizontal .tl-media { height: var(--tl-photo-h, 60vh); }
.timeline.is-horizontal .tl-media img { max-height: var(--tl-photo-h, 60vh); }
.timeline.is-horizontal .tl-big { align-self: flex-end; }
.timeline.is-horizontal .tl-viewport { overflow: hidden; }
@media (max-width: 899px) {
  .timeline.is-horizontal .tl-track { gap: 0; padding-inline: 0; }
  .timeline.is-horizontal .tl-stop { width: 100vw; padding-inline: var(--gutter); }
  .timeline.is-horizontal .tl-media { height: var(--tl-photo-h, 55vh); }
  .timeline.is-horizontal .tl-media img { max-width: 100%; }
}

/* Step 5: two ways to work with me, the program panel */
.prog-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(28px, 5vh, 48px);
  border: 1px solid var(--line);
}
.prog-tab {
  min-height: 64px;
  padding: 16px clamp(14px, 2vw, 28px);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 34px);
  text-transform: uppercase;
  text-align: left;
  line-height: 1;
  cursor: pointer;
}
.prog-tab + .prog-tab { border-left: 1px solid var(--line); }
.prog-tab[aria-selected="true"] { color: var(--bone); background: var(--void-2); border-bottom-color: var(--stitch); }
@media (hover: hover) { .prog-tab:hover { color: var(--bone); } }
.prog-panel {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--void-2);
  padding: clamp(20px, 4vw, 48px);
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}
@media (min-width: 900px) { .prog-panel { grid-template-columns: 7fr 5fr; align-items: start; } }
.prog-panel[hidden] { display: none; }
.prog-panel .vplayer--wide { max-width: none; }
.prog-lines { list-style: none; }
.prog-lines li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--bone-dim); }
.prog-lines li:first-child { border-top: 1px solid var(--line); }
.prog-price { margin-top: 20px; font-weight: 700; color: var(--bone); font-size: clamp(17px, 2vw, 20px); }
.prog-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

/* Step 7: certification */
.cert { margin-top: clamp(28px, 5vh, 48px); max-width: 720px; }
.cert img { width: 100%; height: auto; border: 1px solid var(--line); }
.cert figcaption { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.results-note { margin-top: 12px; font-size: 13px; color: var(--ash); }

.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; }

/* ======================================================================
   Late Oct 26: make the two programs obvious (Job 1) and Stripe links (Job 2)
   ====================================================================== */

/* program page themes: divider rules take the program color */
.theme-throwing { --stitch: #c1121f; --stitch-bright: #e5484d; --stitch-deep: #7a0b14; --line: rgba(229, 72, 77, 0.38); }
.theme-mental   { --line: rgba(90, 169, 255, 0.38); }

/* 3a: full width band in the program color under the top bar, not sticky */
.program-band {
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--stitch);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
@media (max-width: 1099px) { .program-band { top: 144px; } }
.program-band + main .hero-inner { padding-top: 160px; }
@media (max-width: 1099px) { .topbar--tabs + .tabs + .program-band + main .hero-inner { padding-top: 212px; } }

/* 3b: the hero film tinted in the program color */
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--stitch);
  opacity: 0.3;
  pointer-events: none;
}

/* 3d: price figures in the program color */
.theme-throwing .price-big { color: var(--stitch-bright); }
.theme-mental .packs .total { color: var(--stitch-bright); }

/* 3d: the sticky bar filled in the program color */
.theme-throwing .applybar,
.theme-mental .applybar { background: var(--stitch); border-top-color: transparent; }
.theme-throwing .applybar .pr,
.theme-mental .applybar .pr { color: #ffffff; }
.theme-throwing .applybar .pr span,
.theme-mental .applybar .pr span { color: rgba(255, 255, 255, 0.88); }
.theme-throwing .applybar .btn,
.theme-mental .applybar .btn { background: var(--bone); color: var(--void); }
@media (hover: hover) {
  .theme-throwing .applybar .btn:hover,
  .theme-mental .applybar .btn:hover { background: #ffffff; }
}

/* ghost button with the program accent */
.btn--accent { background: transparent; border: 2px solid var(--stitch); color: var(--bone); }
@media (hover: hover) { .btn--accent:hover { background: rgba(237, 230, 214, 0.08); } }

/* 2: the program cards, and 3e: the other program card before the footer */
.prog-cards {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 5vh, 48px);
}
@media (min-width: 900px) { .prog-cards { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.prog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 6px solid var(--stitch);
  background: var(--void-2);
  padding: clamp(20px, 3vw, 40px);
}
.prog-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bone);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 0.95;
}
.prog-card-who { margin-top: 14px; color: var(--bone-dim); max-width: 40ch; }
.prog-card-price { margin-top: 12px; font-weight: 700; color: var(--bone); }
.prog-card .prog-lines { margin-top: 20px; }
.prog-card .vplayer--wide { margin-top: 24px; max-width: none; }
.prog-card .prog-actions { margin-top: auto; padding-top: 24px; }
.other-program .prog-card { max-width: 720px; }

/* Job 2: Buy links in the mental price table, fits at 390 */
.packs .buy { text-align: right; padding-right: 0; }
.packs .buy .btn { min-height: 44px; padding: 8px 16px; font-size: 15px; }
@media (max-width: 479px) {
  .packs th, .packs td { padding-right: 8px; }
  .packs .total { font-size: 22px; }
  .packs .buy .btn { padding: 8px 12px; }
}

/* Oct 27: the four counters as one strip under the timeline heading, on screen when the pin starts */
.tl-stats { margin-top: clamp(14px, 2.4vh, 28px); grid-template-columns: repeat(4, 1fr); }
.tl-stats .stat:nth-child(n) { padding: clamp(10px, 1.4vw, 18px) clamp(8px, 1.6vw, 22px); border-bottom: 0; border-right: 1px solid var(--line); }
.tl-stats .stat:last-child { border-right: 0; }
.tl-stats .stat .num { font-size: clamp(26px, 3.4vw, 46px); }
.tl-stats .stat .lbl { margin-top: 6px; font-size: 10px; letter-spacing: 0.06em; max-width: none; }
@media (min-width: 900px) { .tl-stats .stat .lbl { font-size: 11px; letter-spacing: 0.08em; } }

/* Oct 27: the two program titles are exact equals. One class, one size on both pages.
   "MENTAL PERFORMANCE" is 8.40 em wide in Anton, so 10.2vw keeps it on one line from 320 to 1440 and up. */
.hero-name--program { font-size: clamp(30px, 10.2vw, 148px); line-height: 0.9; }
.hero-name--program .nm { white-space: nowrap; }

/* program names on the cards and the tabs: always two lines, the same size for both programs */
.prog-card-name .pn,
.tab .pn { display: block; white-space: nowrap; }
.prog-card-name { font-size: clamp(26px, calc((100vw - 84px) / 8.8), 48px); }
@media (min-width: 900px) { .prog-card-name { font-size: clamp(36px, 4.4vw, 64px); } }
.tab { flex-direction: column; line-height: 1.05; padding-block: 6px; }
@media (max-width: 1099px) { .tab { padding-inline: 10px; } }
@media (max-width: 379px) { .tabs .tab { font-size: min(13px, calc((50vw - 56px) / 9.1)); } }
@media (max-width: 359px) { .stats:not(.tl-stats) .stat .num { font-size: 46px; } }

/* Oct 27 pm: the consultation call wording, balanced over two lines where it wraps */
.theme-mental .btn.js-apply, .theme-mental .applybar .pr { text-wrap: balance; }

/* Oct 27: thank you pages on desktop. At 1024 and up the heading and intro use the full content width,
   the videos sit 3 across at 9:16 with the name above and the caption under each, the quotes 2 across. Phones unchanged. */
@media (min-width: 1024px) {
  .subhead .headline,
  .subhead .lead { max-width: none; }
  .vstack {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 40px);
    row-gap: clamp(48px, 7vh, 72px);
  }
  /* each video item takes 3 rows of the page grid, so names sit on one line along the bottom
     and every video in a row starts at the same height, even when one name wraps */
  .vstack .vitem:not(.vitem--results) { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .vstack .vitem h2 { grid-row: 1; align-self: end; margin-bottom: 14px; font-size: clamp(24px, 2.2vw, 32px); }
  .vstack .vitem .vplayer { grid-row: 2; max-width: none; margin: 0 0 18px; }
  .vstack .vitem:not(.vitem--results) > p { grid-row: 3; margin-top: 0; }
  /* the results clip gets its own row above the quotes, the same size as the others, caption beside it */
  .vstack .vitem--results {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 40px);
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
  }
  .vstack .vitem--results h2 { grid-column: 1; grid-row: 1; }
  .vstack .vitem--results .vplayer { grid-column: 1; grid-row: 2 / span 3; margin: 0; }
  .vstack .vitem--results > p { grid-column: 2 / -1; grid-row: 2; margin-top: 0; }
  .vstack .vitem--results > p.results-note { grid-row: 3; margin-top: 8px; }
  .quote-list {
    grid-column: 1 / -1;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 40px);
    align-items: start;
  }
  .quote-list blockquote:nth-child(-n + 2) { border-top: 1px solid var(--line); }
  .skool-end { grid-column: 1 / -1; }
}