/* ════════════════════════════════════════════════════════════════════════
   FONTS — self-hosted
   Was three round trips to fonts.googleapis.com + fonts.gstatic.com on every
   page, on the critical path. Now same-origin, preloaded, and no third party
   sees the visitor. Latin subsets; Work Sans and Fraunces are variable, so one
   file each covers the whole weight range.
   ════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/WorkSans.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 900;
  font-display: swap; src: url("../fonts/Fraunces-norm.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 900;
  font-display: swap; src: url("../fonts/Fraunces-ital.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2");
}
/* Archivo — variable on weight AND width. The RYP ACADEMY wordmark is a custom
   logotype with no font behind it; this is the closest available face, dialled
   to the same heavy, wide setting. Used for the name only. */
@font-face {
  font-family: "Archivo"; font-style: normal;
  font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap; src: url("../fonts/Archivo.woff2") format("woff2");
}

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

:root {
  /* --- RYP Brand Constitution, Tier 2. Matches ryp-academy-site/assets/css/ryp.css. --- */
  --bg:        #0D0D0D;
  --surface-1: #1A1A1A;
  --surface-2: #2A2A2A;
  --slate:     #6A6A6A;
  --silver:    #C8C8C8;
  --white:     #FFFFFF;
  --green:     #00af51;

  /* --slate fails AA at body size on the canvas (3.59:1); secondary prose uses
     silver at 70% (~#909090, 6.09:1). Same reasoning as the academy site. */
  --muted:     rgba(200, 200, 200, 0.70);

  --green-light: #23c46b;
  --green-08:  rgba(0, 175, 81, 0.08);
  --green-20:  rgba(0, 175, 81, 0.20);
  --grid-color: rgba(255, 255, 255, 0.045);

  --hair: 1px solid var(--surface-2);

  --display: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Fraunces is the Brand Constitution's Tier 1 display face — the book's own
     serif. Used only on book and research surfaces, never as body text. */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

html {
  scroll-behavior: smooth;
  /* let the variable faces pick their own optical grade at size */
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 64px;
  background: var(--surface-1);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--white); }

.nav-logo {
  font-family: "Archivo", var(--display);
  font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 112;
  font-size: 1.16rem;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--white);
  text-decoration: none;
  margin-right: auto;   /* pushes the links and CTA right; nothing overlaps */
  flex: none;
}

.nav-cta {
  background: var(--green);
  color: var(--bg) !important;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  opacity: 1 !important;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--green-light) !important; color: var(--bg) !important; }

/* ── HERO ── */




.hero-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-label::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--muted);
}

.hero-display {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 5.6vw, 70px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 15ch;
  margin-bottom: 1.6rem;
}

.hero-display em {
  font-style: normal;
  color: var(--green);
}

.hero-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--silver);
  max-width: 460px;
  margin-bottom: 2.5rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-1);
  color: white;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  width: fit-content;
}

.btn-primary:hover { background: var(--green); color: var(--bg); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--surface-2);
  color: var(--white);
  padding: 13px 32px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  width: fit-content;
}

.btn-outline:hover { background: var(--white); color: var(--bg); }

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

.credentials {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: var(--hair);
}

.credentials .cred-dot { display: none; }

.cred-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.cred-item {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cred-dot {
  width: 4px; height: 4px;
  background: var(--muted);
  border-radius: 50%;
  flex-shrink: 0;
}



.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

.hero-photo-frame {
  width: 100%;
  height: 100%;
  min-height: 600px;
  /* shows through while the photo decodes, and behind its transparent edges */
  background: linear-gradient(160deg, #1a2e1c 0%, #0d0d0d 60%);
}

.hero-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.hero-stat-row {
  display: flex;
  gap: 2rem;
}

.hero-stat { color: white; }
.hero-stat-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: white;
}
.hero-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ── SECTIONS ── */
section {
  position: relative;
  z-index: 1;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Horizontal gutter only. This used to be `6rem 3rem`, and since every
     .section-inner sits inside a <section> that already supplies the vertical
     rhythm, the 6rem was added on top of it — 192px of stacked padding at
     every seam. On /results that produced a 349px empty band. */
  padding: 0 3rem;
}

/* The three sections that never carried the .section class were relying on
   that inner padding for their vertical rhythm, so they get it directly. */
section.about, section.approach, section.team-section {
  padding: clamp(42px, 5.6vw, 74px) 0;
}

.section-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--muted);
}

.section-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

/* ── ABOUT ── */
.about { background: var(--surface-1); border-top: 1px solid rgba(255,255,255,0.07); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: center;
}

.about-quote {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 2rem;
  border-left: 3px solid var(--green);
  padding-left: 1.5rem;
}

.about-body {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about-right { display: flex; flex-direction: column; gap: 1.5rem; }

.about-card {
  background: var(--bg);
  border-radius: 12px;
  padding: 1.75rem;
  border: 1px solid rgba(255,255,255,0.07);
}

.about-card-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3rem;
  color: var(--green);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.about-card-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.about-card-body {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}

.photo-band {
  position: relative;
  margin: 0;
  background: var(--surface-1);
}

.photo-band img {
  display: block;
  width: 100%;
  /* Measured against img/src/coach-observing.jpg (4798x3258). Luke's head
     occupies 5-14% of the frame, the junior's 20-27%, the junior's feet 70%.
     cover shows bandHeight / (W / 1.473) of the frame, which is constant at
     52vw x 1.473 = 76.6%, starting at (1 - 0.766) x objectY = 0.234 x Y.
     Y = 14% -> the window runs 3.3% to 80%: both heads with clearance above,
     the junior whole, Luke cropped below the knee.
     If this photograph is ever swapped, re-measure — these numbers are for
     this frame only. */
  height: clamp(340px, 52vw, 720px);
  object-fit: cover;
  object-position: 50% 14%;
}

.photo-band figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3rem 3rem 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}

/* ── APPROACH / SERVICES ── */
.approach { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.07); }

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 3rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--surface-2);
  border-radius: 16px;
  overflow: hidden;
}

.approach-card {
  background: var(--bg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.approach-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.15em;
}

.approach-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.approach-body {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
}

.approach-tag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  width: fit-content;
}

/* ── BOOK ── */
.book-section {
  background: var(--surface-1);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.book-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.book-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.book-label::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: rgba(255,255,255,0.2);
}

.book-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  color: white;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.book-body {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--bg);
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-white:hover { background: var(--green); color: var(--bg); }

.book-cover-real { max-width: 320px; }

.book-cover-real img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}







/* ── CTA ── */
.cta-section { background: var(--green); border-top: 1px solid rgba(255,255,255,0.10); color: var(--bg); }

.cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  color: white;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--bg);
}

.cta-body {
  color: rgba(13,13,13,0.78);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 2.5rem;
}

/* ── FOOTER ── */
footer {
  position: relative;
  z-index: 1;
  background: var(--surface-1);
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  color: white;
  text-decoration: none;
}

.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.footer-links a:hover { color: white; }

.footer-copy {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* ── LESSONS / PRICING ── */
.lessons-online { background: var(--surface-1); border-top: 1px solid rgba(255,255,255,0.07); }
.lessons-junior { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.07); }

.lessons-intro {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 3.5rem;
}

.lessons-intro p {
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.9rem;
  padding-top: 0.25rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pricing-card {
  background: var(--bg);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,0,0,0.07);
  position: relative;
}

.pricing-card.featured {
  background: var(--surface-1);
  border-color: transparent;
}

.pricing-card.elite {
  background: var(--surface-1);
  border-color: transparent;
}

.pricing-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--bg);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
}

.pricing-tier {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.pricing-card.featured .pricing-tier,
.pricing-card.elite .pricing-tier { color: var(--muted); }

.pricing-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 0.4rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.pricing-card.featured .pricing-name,
.pricing-card.elite .pricing-name { color: white; }

.pricing-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
}

.pricing-card.featured .pricing-price,
.pricing-card.elite .pricing-price { color: white; }

.pricing-period {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.pricing-card.featured .pricing-period,
.pricing-card.elite .pricing-period { color: var(--muted); }

.pricing-divider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin-bottom: 1.25rem;
}

.pricing-card.featured .pricing-divider,
.pricing-card.elite .pricing-divider { background: rgba(255,255,255,0.1); }

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  margin-bottom: 1.5rem;
}

.pricing-features li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.pricing-card.featured .pricing-features li,
.pricing-card.elite .pricing-features li { color: var(--muted); }

.pricing-features li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.78rem;
  margin-top: 1px;
}

.pricing-card.featured .pricing-features li::before,
.pricing-card.elite .pricing-features li::before { color: var(--green-light); }

.pricing-btn {
  display: block;
  text-align: center;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--surface-1);
  color: white;
  transition: background 0.2s;
}

.pricing-btn:hover { background: var(--green); color: var(--bg); }
.pricing-card.featured .pricing-btn { background: var(--green); color: var(--bg); }
.pricing-card.featured .pricing-btn:hover { background: var(--green-light); }
.pricing-card.elite .pricing-btn { background: var(--white); color: var(--bg); }
.pricing-card.elite .pricing-btn:hover { background: var(--green); color: var(--bg); }

.single-lesson-bar {
  margin-top: 1.5rem;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.single-lesson-bar-text { }

.single-lesson-bar-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.single-lesson-bar-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  letter-spacing: -0.02em;
}

.single-lesson-bar-note {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── TEAM ── */
.team-section { background: var(--surface-1); border-top: 1px solid rgba(255,255,255,0.07); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 3rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--surface-2);
  border-radius: 16px;
  overflow: hidden;
}

.team-card {
  background: var(--bg);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(255,255,255,0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.team-photo-initials {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--muted);
}

.team-role {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.team-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.team-bio {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
}

.team-credentials {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-cred {
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.team-cred::before {
  content: '—';
  flex-shrink: 0;
  color: var(--green);
}

/* Junior plan */
.junior-plan-card {
  background: var(--surface-1);
  border-radius: 20px;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.junior-plan-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.junior-plan-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  line-height: 0.95;
  color: white;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.junior-plan-price {
  margin-bottom: 0.25rem;
}

.junior-plan-price strong {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}

.junior-plan-price span {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 0.25rem;
}

.junior-plan-commitment {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.junior-plan-desc {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.junior-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--green);
  color: var(--bg);
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s;
}

.junior-plan-btn:hover { background: var(--green-light); }

.junior-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.junior-stat-box {
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1.25rem;
}

.junior-stat-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--green-light);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.junior-stat-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.junior-extras {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.junior-extras li {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
}

.junior-extras li::before {
  content: '✓';
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── MEDIA ── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { min-height: 50vw; }
  .hero-left { padding: 4rem 2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .approach-grid { grid-template-columns: 1fr; }
  .book-inner { grid-template-columns: 1fr; gap: 3rem; }
  .book-cover-real { max-width: 100%; }
  nav { padding: 0 1.5rem; }
  .nav-links { display: none; }
  .section-inner { padding: 0 1.5rem; }
  footer { flex-direction: column; gap: 1rem; text-align: center; }
  .pricing-grid { grid-template-columns: 1fr; }
  .lessons-intro { grid-template-columns: 1fr; gap: 1rem; }
  .junior-plan-card { grid-template-columns: 1fr; gap: 2rem; }
  .single-lesson-bar { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE BOOK — ported verbatim from ryp-academy-site/assets/css/ryp.css so the
   object reads identically on both sites. If it changes there, change it here.
   ════════════════════════════════════════════════════════════════════════ */

.bookfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }

.book {
  --w: clamp(200px, 26vw, 320px);
  --h: calc(var(--w) * 1.5);          /* 6:9 */
  --d: calc(var(--w) * 0.085);        /* a sliver, not the printed 0.227 */
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: perspective(2000px) rotateY(-11deg) rotateX(-1deg);
  cursor: pointer; outline: none; display: block;
}

.book:focus-visible { outline: 2px solid var(--green); outline-offset: 12px; }

.book__face {
  position: absolute; inset: 0; display: block;
  border-radius: 1px 3px 3px 1px; overflow: hidden;
  box-shadow: 0 30px 58px rgba(0,0,0,.62), 0 9px 20px rgba(0,0,0,.46);
}

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

/* The roll where the cover bends into the spine — narrow and gentle. */
.book__gutter {
  position: absolute; top: 0; bottom: 0; left: 0; width: 9%;
  border-radius: 1px 0 0 1px; pointer-events: none;
  background: linear-gradient(to right,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,.13) 45%, transparent 100%);
}

/* A hairline of light on the outer edge of the board. */
.book__sheen {
  position: absolute; top: 0; bottom: 0; right: 0; width: 1.5px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(255,255,255,.16));
}

.book__spine {
  position: absolute; top: 0; left: 0; width: var(--d); height: 100%;
  /* sampled from the cover board (#12110D) and darkened; was #0f1b2f, tuned
     for the navy cover the academy site replaced on 2026-09-14 */
  background: #0C0C09;
  transform: rotateY(-90deg); transform-origin: left center;
}

.book__pages {
  position: absolute; top: .8%; right: 0; width: var(--d); height: 98.4%;
  transform: rotateY(90deg); transform-origin: right center;
  background:
    linear-gradient(to right, rgba(0,0,0,.34), rgba(0,0,0,.06)),
    repeating-linear-gradient(to right,
      #a8a397 0 1px, #c9c4b7 1px 2px, #98938a 2px 3px);
}

.book__head {
  position: absolute; top: 0; left: .8%; width: 98.4%; height: var(--d);
  transform: rotateX(90deg); transform-origin: top center;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.14)),
    repeating-linear-gradient(to bottom,
      #a8a397 0 1px, #c4bfb2 1px 2px, #98938a 2px 3px);
}

/* The floor it stands on. */
.book::after {
  content: ""; position: absolute; left: 5%; right: -5%; bottom: -5%;
  height: 14px; background: rgba(0,0,0,.58);
  filter: blur(14px); transform: translateZ(-1px); z-index: -1;
}

.book::before {
  content: "thegolftextbook.com \2197";
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green); white-space: nowrap;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}

.book:hover::before, .book:focus-visible::before { opacity: 1; }

/* --- the hero that carries it ------------------------------------------- */
.hero-book {
  margin-top: 1.9rem; padding-top: 1.6rem; border-top: var(--hair);
  font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 52ch;
}

.hero-book strong { color: var(--white); font-weight: 700; }

.hero-book a {
  display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px; text-decoration: none;
}

.hero-book a:hover { border-bottom-color: var(--green); }

/* --- lattice backdrop: the four-zone diagonal off the top-right ---------- */


.hero-lattice svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pl__grid  { stroke: var(--green); stroke-width: .18; opacity: .30; }
.pl__frame { stroke: var(--green); stroke-width: .3;  fill: none; opacity: .26; }
.pl__cell  { stroke: var(--green); stroke-width: .42; fill: none; opacity: .46; }

@media (prefers-reduced-motion: reduce) {
  .book, .book::before { transition: none; }
}

/* the portrait, now that the book has the hero */
.about-portrait { margin: 0 0 0.5rem; }

.about-portrait img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--surface-2);
}

@media (max-width: 900px) {
  .hero-right { padding: 0 1.5rem 4rem; }
  .hero-lattice { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CRAFT LAYER
   Research pass 2026-09-12 (refero.design + current CSS practice). Four ideas,
   all cheap, all reversible, none of them decoration for its own sake:

     1. Typography that breaks lines like a typesetter, not a browser.
     2. Linear's surface rule — hierarchy from luminance and hairlines, never
        from solid borders on a dark canvas.
     3. Scroll-driven reveals in pure CSS (animation-timeline), which run on the
        compositor. No JS, no IntersectionObserver — which a prior session
        already documented as non-firing in this project's preview environment.
     4. One light source. The book is the subject, so the glow belongs to it.
   ════════════════════════════════════════════════════════════════════════ */

/* --- 1. typography ------------------------------------------------------- */

/* Headings get even line lengths; body avoids orphans. Two lines of CSS that
   do what a typesetter would do by hand. */
h1, h2, h3, h4,
.hero-display, .section-title, .pricing-name, .junior-plan-name, .book-title {
  text-wrap: balance;
}

p, .hero-body, .about-body, .about-card-body, .approach-body,
.pricing-feature, .team-bio, .cta-body, .hero-book {
  text-wrap: pretty;
}

/* Figures are compared down columns — they must align on the decimal. */
.about-card-num, .approach-num, .pricing-price, .junior-plan-price,
.junior-stat-num, .hero-stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Large display type needs negative tracking; small caps-y labels need the
   opposite. The browser's defaults are tuned for neither. */
.hero-display { letter-spacing: -0.028em; }
.section-title { letter-spacing: -0.02em; text-wrap: balance; }
.hero-label, .section-label, .cred-label { font-feature-settings: "ss01" 1; }

/* --- 2. surfaces: luminance and hairlines, not boxes --------------------- */

/* Every raised surface is lit very slightly from the top, the way a real panel
   catches room light. It reads as depth without a single visible border. */
.about-card, .approach-card, .team-card, .pricing-card, .junior-stat-box {
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.035) 0%,
    rgba(255,255,255,0.012) 38%,
    transparent 72%);
  border: 1px solid rgba(255,255,255,0.065);
  transition: border-color .28s ease, transform .28s cubic-bezier(.2,.7,.2,1),
              background-color .28s ease;
}

.about-card:hover, .approach-card:hover, .team-card:hover, .pricing-card:hover {
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}

/* The featured tier earns a gradient hairline. Two backgrounds, one clipped to
   the padding box and one to the border box, so the "border" can hold a
   gradient and still respect border-radius. */
.pricing-card.featured {
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(0,175,81,0.10) 0%, rgba(0,175,81,0.02) 40%, transparent 72%),
    linear-gradient(180deg, rgba(0,175,81,0.55), rgba(0,175,81,0.10) 55%, rgba(255,255,255,0.05));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* --- 3. one light source, and it belongs to the book --------------------- */



/* --- 4. scroll-driven reveals ------------------------------------------- */

/* Guarded twice: the initial hidden state only exists where the timeline is
   supported, so a browser without it shows the page rather than a blank one. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }

    .about-card, .approach-card, .team-card, .pricing-card,
    .junior-stat-box, .photo-band, .book-cover-real, .section-title {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }

    /* Cards in a row should not arrive in lockstep. */
    .about-card:nth-child(2),  .approach-card:nth-child(2),
    .team-card:nth-child(2),   .pricing-card:nth-child(2)  { animation-range: entry 4% cover 27%; }
    .about-card:nth-child(3),  .approach-card:nth-child(3),
    .team-card:nth-child(3),   .pricing-card:nth-child(3)  { animation-range: entry 0% cover 28%; }
  }
}

/* --- 5. focus, finally -------------------------------------------------- */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hover on the book was disabled when it was ported; give it the lift back. */
@media (prefers-reduced-motion: no-preference) {
  .book { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
  .book:hover, .book:focus-visible {
    transform: perspective(2000px) rotateY(-6deg) rotateX(-1deg);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   INNER PAGES — the authority spine (about / research / speaking / book /
   coaching / contact). Same tokens, same surface rule as the home page.
   ════════════════════════════════════════════════════════════════════════ */

/* --- page header -------------------------------------------------------- */

.phero {
  position: relative;
  padding: clamp(120px, 15vh, 172px) 0 clamp(46px, 7vw, 72px);
  border-bottom: var(--hair);
}

.phero-in {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.phero-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--white);
  max-width: 17ch;
  margin: 0.9rem 0 0;
}

.phero-lede {
  margin-top: 1.4rem;
  max-width: 52ch;
  font-size: clamp(15px, 1.35vw, 17.5px);
  line-height: 1.62;
  color: var(--muted);
}

.phero-lede a, .section-lede a, .cv-body a { color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(0,175,81,.35); }
.phero-lede a:hover, .section-lede a:hover, .cv-body a:hover { border-bottom-color: var(--green); }

.phero-cta { margin-top: 1.7rem; }

.phero-cta a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px;
}
.phero-cta a:hover { border-bottom-color: var(--green); }

.phero-book-grid {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}

/* --- generic section ---------------------------------------------------- */

/* Section rhythm. Was clamp(52px, 7.5vw, 94px): at desktop that put 188px
   of padding between every two sections, which read as dead space. */
.section { padding: clamp(42px, 5.6vw, 74px) 0; }
.section--alt { background: var(--surface-1); border-top: var(--hair); border-bottom: var(--hair); }

.section-lede {
  margin-top: 1.1rem; max-width: 62ch;
  font-size: 15.5px; line-height: 1.65; color: var(--muted);
}

.note {
  margin-bottom: 2.6rem; padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--green);
  background: var(--green-08);
  font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 68ch;
}
.note strong, .note em { color: var(--silver); }

/* --- CV / two-column editorial ------------------------------------------ */

.cv-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: start; }
.cv-main { min-width: 0; }
.cv-side { min-width: 0; display: flex; flex-direction: column; gap: 2.3rem; }

.cv-body { font-size: 15.5px; line-height: 1.72; color: var(--muted); margin-bottom: 1.1rem; }
.cv-body em { color: var(--silver); }

.cv-portrait { margin-top: 2.2rem; }

.cv-h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.95rem;
}

.cv-list { list-style: none; margin: 0; padding: 0; }

.cv-list li {
  padding: 0.72rem 0; border-top: var(--hair);
  font-size: 14.5px; line-height: 1.55; color: var(--muted);
}
.cv-list li:last-child { border-bottom: var(--hair); }
.cv-list strong { color: var(--white); font-weight: 700; }
.cv-list span { display: inline-block; color: var(--muted); font-size: 13px; }

.media-list li a { color: var(--green); text-decoration: none; }
.media-list li a:hover { border-bottom: 1px solid var(--green); }
.media-list li span { margin-left: .5rem; }

/* --- records band ------------------------------------------------------- */

.record-grid {
  margin-top: 2.6rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--surface-2);
  border: 1px solid var(--surface-2);
  border-radius: 12px; overflow: hidden;
}

.record {
  background: var(--bg); padding: 1.7rem 1.3rem;
  display: flex; flex-direction: column; gap: .45rem;
}

.record-n {
  font-family: var(--display); font-weight: 900; font-size: 2.1rem; line-height: 1;
  color: var(--green); font-variant-numeric: tabular-nums;
}

.record-l { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* --- papers ------------------------------------------------------------- */

.paper { padding: 2.1rem 0; border-top: var(--hair); }
.paper:last-child { border-bottom: var(--hair); }

.paper-meta {
  display: flex; gap: 1rem; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .85rem;
}

.paper-tag { color: var(--green); border: 1px solid var(--green-20); border-radius: 3px; padding: .22rem .5rem; }

.paper-title {
  font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.22; letter-spacing: -0.015em; color: var(--white); max-width: 34ch;
}

.paper-authors { margin-top: .55rem; font-size: 13.5px; color: var(--muted); }

.paper-abstract { margin-top: 1.05rem; max-width: 72ch; font-size: 14.5px; line-height: 1.68; color: var(--muted); }
.paper-abstract em { color: var(--silver); font-style: italic; }

.paper-kw {
  margin-top: 1rem; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; color: var(--muted);
}

/* --- talks -------------------------------------------------------------- */

.talk { padding: 2.3rem 0; border-top: var(--hair); }
.talk:last-child { border-bottom: var(--hair); }

.talk-title {
  font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--white); max-width: 24ch;
}

.talk-sub { margin-top: .5rem; font-size: 15px; color: var(--green); max-width: 52ch; }
.talk-desc { margin-top: 1.05rem; max-width: 70ch; font-size: 14.5px; line-height: 1.68; color: var(--muted); }

.talk-objs { margin-top: 1.5rem; padding-top: 1.2rem; border-top: var(--hair); }
.talk-objs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: 70ch; }

.talk-objs li {
  position: relative; padding-left: 1.35rem;
  font-size: 14px; line-height: 1.55; color: var(--muted);
}
.talk-objs li::before { content: "\2014"; position: absolute; left: 0; color: var(--green); }

/* --- home page doors ---------------------------------------------------- */

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.door {
  display: block; text-decoration: none; padding: 2rem 1.75rem 1.75rem;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.065);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 38%, transparent 72%);
  transition: border-color .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.door:hover { border-color: rgba(0,175,81,.35); transform: translateY(-3px); }

.door-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }

.door-t {
  margin-top: 1.1rem; font-family: var(--display); font-weight: 900;
  font-size: 1.55rem; letter-spacing: -0.02em; color: var(--white);
}

.door-b { margin-top: .8rem; font-size: 14px; line-height: 1.6; color: var(--muted); }

.door-go {
  display: inline-block; margin-top: 1.35rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green);
}

/* --- contact ------------------------------------------------------------ */

.contact-direct { margin-top: 3.2rem; padding-top: 1.8rem; border-top: var(--hair); }

.contact-email a {
  font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 38px);
  letter-spacing: -0.02em; color: var(--white); text-decoration: none;
}
.contact-email a:hover { color: var(--green); }

.contact-where { margin-top: .7rem; font-size: 14px; color: var(--muted); }

.approach-tag a { color: var(--green); text-decoration: none; }

/* --- nav + footer ------------------------------------------------------- */

.nav-links a.is-current { color: var(--white); }

.footer-brand {
  font-family: "Archivo", var(--display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 112;
  text-transform: uppercase; letter-spacing: -0.005em;
  font-size: 1.05rem; color: var(--white);
}

.footer-links { flex-wrap: wrap; }

.footer-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; font-size: 12.5px; color: var(--muted); }
.footer-meta a { color: var(--muted); text-decoration: none; }
.footer-meta a:hover { color: var(--green); }

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

@media (max-width: 900px) {
  .cv-grid, .phero-book-grid { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .record-grid { grid-template-columns: repeat(2, 1fr); }
  .phero { padding-top: 108px; }
}

@media (max-width: 700px) {
  footer { flex-direction: column; align-items: flex-start; gap: 1.4rem; text-align: left; }
  .footer-links { justify-content: flex-start; }
}

/* The hero stat row used to sit over the portrait. The book took that slot, so
   the stats became a band of their own under the hero. */
.statband { border-bottom: var(--hair); background: var(--surface-1); }

.statband-in {
  max-width: 1220px; margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 5vw, 56px);
  display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap;
}

/* Photographs inside the service cards. Cropped shallow so the card stays a
   card: the picture introduces the service, it does not become the service. */
.card-img { margin: 1.25rem 0 1.4rem; border-radius: 10px; overflow: hidden; }

.card-img img {
  display: block; width: 100%; height: auto;
  /* A FIXED height here meant the band showed less of the photo the wider the
     card got: at a 700px full-width card all three cards were down to ~30% of
     the frame and every head was cropped off. An aspect-ratio keeps the band
     proportional, so the visible fraction is the same at every width (81-86%
     for these three files) and the measured object-position values hold. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE NAV
   Below 900px the two link lists were simply hidden, which left a seven-page
   site with no navigation at all and dropped the Contact pill on top of the
   absolutely-centred logo. Toggle + panel instead.
   ════════════════════════════════════════════════════════════════════════ */

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-toggle-bar {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--silver);
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav-menu {
  position: fixed;
  inset: 64px 0 0;
  z-index: 99;
  background: var(--bg);
  border-top: var(--hair);
  overflow-y: auto;
}

.nav-menu ul { list-style: none; margin: 0; padding: 1rem 0; }

.nav-menu li { border-bottom: var(--hair); }

.nav-menu a {
  display: block;
  padding: 1.15rem clamp(20px, 6vw, 40px);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}

.nav-menu a:active { background: var(--surface-1); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* the logo stops being centred so it cannot collide with the pill */
  .nav-logo {
    position: static;
    transform: none;
    font-size: 1.25rem;
    margin-right: auto;
    padding-left: 0.75rem;
  }

  .nav-cta { flex-shrink: 0; }
}

@media (min-width: 901px) {
  /* the panel is desktop-irrelevant even if JS left it open */
  .nav-menu { display: none; }
}

/* Two calls to action side by side in a page header, and in the contact cards. */
.phero-cta { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: baseline; }

.phero-cta a span, .approach-tag a span {
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: none;
}

.approach-tag { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* Emphasis inside a heading is the accent, not a different face. */
.section-title em, .book-title em, .cta-title em, .hero-display em {
  font-style: normal;
  color: var(--green);
}

/* A page's own eyebrow takes the accent; section-level labels stay muted.
   Same split the press kit uses: "SPEAKER & MEDIA KIT" green, "RECOGNITION" muted. */
.hero .hero-label,
.phero .section-label { color: var(--green); }

/* It is a line of small caps-height type, not a paragraph — keep it on one line
   where there is room, and break cleanly where there is not. */
.hero-label, .section-label { text-wrap: balance; }

/* On the green band the label must sit in the canvas colour, not white — white
   at 50% over #00af51 is 1.68:1, effectively invisible. Same move the press
   kit's "ENQUIRIES" label makes. */
.cta-section .section-label { color: rgba(13, 13, 13, 0.82); }

/* ════════════════════════════════════════════════════════════════════════
   THE J-CURVE
   Three controls, one line. The point of the interaction is the third slider:
   move "practice without a ball" and the dip visibly shallows. That is the
   Construction Penalty argument made physical rather than explained.
   ════════════════════════════════════════════════════════════════════════ */

.jcurve-section { border-bottom: var(--hair); }

.jc {
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  grid-template-areas: "chart controls" "note note";
  gap: 1.7rem 2.6rem;
  align-items: start;
}

.jc-chart {
  grid-area: chart;
  background: var(--surface-1);
  border: 1px solid var(--surface-2);
  border-radius: 12px;
  padding: 0.6rem 0.4rem 0.2rem;
}

.jc-chart svg { display: block; width: 100%; height: auto; }

.jc-line       { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; }
.jc-below      { fill: rgba(220, 38, 38, 0.14); }     /* crimson = the cost, semantic only */
.jc-baseline   { stroke: rgba(200,200,200,0.38); stroke-width: 1; stroke-dasharray: 5 5; }
.jc-even       { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.jc-trough     { fill: #DC2626; stroke: var(--bg); stroke-width: 2; }

.jc-note-t, .jc-even-label, .jc-trough-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  fill: var(--muted);
}
.jc-trough-label { fill: #f08a8a; }
.jc-even-label   { fill: var(--green); }

.jc-controls { grid-area: controls; display: flex; flex-direction: column; gap: 1.5rem; }

.jc-ctl { display: grid; gap: 0.45rem; }

.jc-ctl-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}

.jc-ctl-val { font-size: 1.05rem; font-weight: 700; color: var(--white); }

.jc-ctl--key .jc-ctl-val { color: var(--green); }

.jc-ctl-why { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.jc-ctl input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--surface-2);
  border-radius: 2px; outline: none; margin: 0.35rem 0;
}
.jc-ctl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--silver); border: 0; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.jc-ctl input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.jc-ctl--key input[type=range]::-webkit-slider-thumb { background: var(--green); }
.jc-ctl input[type=range]:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.jc-ctl input[type=range]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; background: var(--silver); border: 0; cursor: pointer;
}
.jc-ctl--key input[type=range]::-moz-range-thumb { background: var(--green); }







.jc-note {
  grid-area: note;
  margin: 0; padding-top: 1.1rem; border-top: var(--hair);
  font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 76ch;
}
.jc-note em { color: var(--silver); }

@media (max-width: 900px) {
  .jc { grid-template-columns: 1fr; grid-template-areas: "chart" "controls" "note"; }
}

/* The readout is a sentence, not a figure — the whole point of having no numbers. */
.jc-sentence {
  margin: 0; padding: 0.95rem 1.15rem 0.2rem;
  font-size: 15px; line-height: 1.5; color: var(--silver);
  border-top: var(--hair); text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO — full-bleed, after ryp-academy-site
   The photograph is the ground, not a panel beside the text. What makes it
   legible is the doubled scrim on .hero__media::after: one gradient bottom-up
   so the copy sits on near-solid canvas, one left-right so the left column
   stays dark while the right stays open for the book.
   ════════════════════════════════════════════════════════════════════════ */

.hero { position: relative; display: block; overflow: hidden; }

.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Luke's head tops out at 7-10% of the source frame, so Y=0 takes all the
     headroom the file actually has. To sit him lower still, the image is
     pushed down 7% of the hero. Scaling 1.07 from the BOTTOM edge grows it
     upward by exactly that 7% first, so the shift cannot open a gap at the
     top — the overflow lands off the bottom instead, where the scrim is.
     Measured against img/hero-floor-2200.jpg; re-measure if swapped. */
  object-position: 50% 0%;
  transform-origin: 50% 100%;
  transform: translateY(7%) scale(1.07);
}

.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,  var(--bg) 2%, rgba(13,13,13,.86) 26%, rgba(13,13,13,.44) 60%, rgba(13,13,13,.70) 100%),
    linear-gradient(to right, rgba(13,13,13,.90) 0%, rgba(13,13,13,.38) 54%, rgba(13,13,13,.14) 100%);
}

.hero__in {
  position: relative; z-index: 2;
  max-width: 1220px; margin: 0 auto;
  padding: clamp(190px, 26vh, 300px) clamp(20px, 5vw, 56px) clamp(52px, 8vh, 84px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px); align-items: end;
}

.hero__col { min-width: 0; }

.hero-display {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(42px, 7.4vw, 88px);
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--white); margin: 0 0 1.3rem;
}

.hero-body {
  max-width: 44ch; font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6; color: var(--silver); margin: 0;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.9rem; }

.hero__note {
  margin: 1.7rem 0 0; padding-top: 1.2rem; border-top: var(--hair);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}

/* --- buttons, matching the academy's two-button vocabulary --------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary { background: var(--green); color: var(--bg); }
.btn--primary:hover { background: var(--white); color: var(--bg); }

.btn--ghost { border-color: var(--surface-2); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }

/* --- the status strip ---------------------------------------------------- */

.strip { border-block: var(--hair); background: var(--surface-1); }

.strip__in {
  max-width: 1220px; margin: 0 auto;
  padding: 20px clamp(20px, 5vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 40px; flex-wrap: wrap;
}

.strip__meta {
  margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--white);
}

.strip__meta i { font-style: normal; color: var(--muted); }

.strip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

.strip__say { margin: 0; font-size: 15px; color: var(--muted); }

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: 44px; align-items: start;
              padding-top: clamp(150px, 22vh, 220px); }
  .bookfig { align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════
   PLANS — the adult program and the junior academy
   ════════════════════════════════════════════════════════════════════════ */

.plan-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px); align-items: start;
}

.plan-price {
  text-align: right; display: flex; flex-direction: column; gap: 0.3rem;
  padding-left: 1.6rem; border-left: 1px solid var(--surface-2);
}

.plan-price-n {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1;
  letter-spacing: -0.035em; color: var(--green);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plan-price-n i { font-style: normal; font-size: 0.42em; color: var(--muted); letter-spacing: 0; }

.plan-price-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); max-width: 18ch; margin-left: auto;
}

.plan-claim {
  margin: 2.2rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--green);
  font-size: 16px; line-height: 1.6; color: var(--silver); max-width: 66ch;
}

.zones { margin-top: 2.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

.plan-grid {
  margin-top: 2.4rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--surface-2);
  border: 1px solid var(--surface-2); border-radius: 12px; overflow: hidden;
}

.plan-block { background: var(--bg); padding: 1.7rem 1.8rem; }
.section--alt .plan-block { background: var(--surface-1); }
.plan-block--note { background: var(--green-08); }
.section--alt .plan-block--note { background: var(--green-08); }

.plan-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--green); margin: 0 0 1rem;
}

.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.plan-list li, .plan-list-p {
  position: relative; padding-left: 1.2rem; margin: 0;
  font-size: 14.5px; line-height: 1.58; color: var(--muted);
}
.plan-list li::before { content: "—"; position: absolute; left: 0; color: var(--surface-2); }
.plan-list-p { padding-left: 0; }
.plan-list strong { color: var(--white); font-weight: 700; }

/* --- the step-down ladder ------------------------------------------------ */

.ladder { margin-top: 2.4rem; padding-top: 1.6rem; border-top: var(--hair); }

.ladder-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem;
}

.ladder-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }

.ladder-step {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding-top: 0.9rem; border-top: 2px solid var(--green-20);
}
.ladder-step:first-child { border-top-color: var(--green); }

.ladder-n {
  font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--white); font-variant-numeric: tabular-nums;
}
.ladder-n i { font-style: normal; font-size: 0.5em; color: var(--muted); }

.ladder-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* --- how it works -------------------------------------------------------- */

.plan-how { margin-top: 2.4rem; padding-top: 1.6rem; border-top: var(--hair); }

.plan-steps {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem;
  counter-reset: step;
}

.plan-steps li {
  counter-increment: step;
  font-size: 14px; line-height: 1.55; color: var(--muted);
  padding-top: 0.9rem; border-top: 1px solid var(--surface-2);
}
.plan-steps li::before {
  content: "0" counter(step);
  display: block; margin-bottom: 0.5rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--green);
}
.plan-steps strong { color: var(--white); font-weight: 700; }

.plan-aside { margin: 1.6rem 0 0; font-size: 13.5px; color: var(--muted); }

.plan .btn-row { margin-top: 2.2rem; }

@media (max-width: 900px) {
  .plan-head { grid-template-columns: 1fr; }
  .plan-price { text-align: left; padding-left: 0; padding-top: 1.1rem;
                border-left: 0; border-top: 1px solid var(--surface-2); }
  .plan-price-l { margin-left: 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .ladder-row, .plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════
   CLOSING BAND + PROOF — after ryp-academy-site's .close and .hero__score
   ════════════════════════════════════════════════════════════════════════ */

.close { position: relative; overflow: hidden; border-top: var(--hair); }

.close__media { position: absolute; inset: 0; }
.close__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 42%; }

.close__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--bg) 8%, rgba(13,13,13,.92) 46%, rgba(13,13,13,.58) 100%);
}

.close__in { position: relative; z-index: 2; }
.close .section-lede { max-width: 54ch; }

/* --- the proof numbers --------------------------------------------------- */

.score {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 0 clamp(30px, 5vw, 68px); justify-content: start;
}

.score li { display: grid; gap: 6px; }

.score b {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(46px, 6vw, 72px); line-height: 0.9;
  letter-spacing: -0.04em; color: var(--green);
  font-variant-numeric: tabular-nums;
}

.score span { font-size: 13.5px; line-height: 1.4; color: var(--muted); max-width: 17ch; }

.proof__foot {
  margin-top: 1.8rem; padding-top: 1.3rem; border-top: var(--hair);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted); max-width: 78ch;
}

.proof .plan-aside { margin-top: 0.9rem; }

@media (max-width: 760px) {
  .score { grid-template-columns: 1fr 1fr; gap: 26px 28px; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOOK SECTION — a grey ground so the cover separates
   The cover is Tier 1: near-black board, cream type, gold rules. On the
   Tier 2 canvas (#0D0D0D) it dissolves into the page. This band lifts to a
   neutral grey so the board reads as an object with edges.
   ════════════════════════════════════════════════════════════════════════ */

.book-section {
  background: #33343A;
  background-image: linear-gradient(180deg, #3A3B41 0%, #2C2D32 100%);
  border-block: var(--hair);
}

/* the cover needs a real edge and a shadow to sit on the grey */
.book-section .book-cover-real img {
  border-radius: 3px;
  box-shadow: 0 34px 64px rgba(0,0,0,.55), 0 10px 22px rgba(0,0,0,.42);
}

/* copy on the lighter ground */
.book-section .book-title { color: var(--white); }
.book-section .book-body  { color: rgba(255,255,255,0.80); }
.book-section .book-label { color: rgba(255,255,255,0.72); }
.book-section .btn-white  { background: var(--white); color: #1B1C20; }
.book-section .btn-white:hover { background: var(--green); color: var(--bg); }

/* The cover is near-black. Against the canvas it needs a rim to read as a board
   rather than a hole; the grey band on the home page does this with contrast. */
.book__face { box-shadow: 0 30px 58px rgba(0,0,0,.62), 0 9px 20px rgba(0,0,0,.46),
              inset 0 0 0 1px rgba(255,255,255,.07); }

/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIC CRAFT — variable axes, real small caps, a modular scale
   ════════════════════════════════════════════════════════════════════════ */

/* --- one ratio, not hand-picked clamps per component --------------------- */
:root {
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.41rem, 1.28rem + 0.66vw, 1.94rem);
  --step-3:  clamp(1.69rem, 1.48rem + 1.06vw, 2.58rem);
  --step-4:  clamp(2.03rem, 1.70rem + 1.65vw, 3.43rem);
  --step-5:  clamp(2.44rem, 1.93rem + 2.53vw, 4.58rem);
  --step-6:  clamp(2.92rem, 2.15rem + 3.83vw, 6.10rem);
}

/* --- real small caps for the eyebrows -----------------------------------
   text-transform + 0.14em tracking fakes small caps by stretching capitals.
   IBM Plex Mono carries no smcp, so the labels keep the faked form; Fraunces
   does, so anything set in the serif gets the real thing. */
.cv-h, .plan-h, .ladder-h { font-feature-settings: "ss01" 1, "cv01" 1; }

/* --- variable-weight response -------------------------------------------
   Work Sans is variable across 100-900. Display type takes a slightly lower
   grade at large sizes so it does not go blobby, and hover on a link nudges
   weight instead of colour. */
.hero-display, .phero-title, .section-title, .h-display {
  font-variation-settings: "wght" 860;
  font-synthesis-weight: none;
}

.door:hover .door-t,
.paper:hover .paper-title { font-variation-settings: "wght" 900; transition: font-variation-settings .25s ease; }

/* --- narrow measures need hyphenation ----------------------------------- */
.paper-abstract, .plan-list li, .approach-body, .door-b, .talk-desc {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* --- the serif, used only where the book lives -------------------------- */
.book-title, .book-section .book-title,
.paper-title, .about-quote {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.015em;
}

.about-quote { font-style: italic; font-weight: 400; }

.book-title { font-size: var(--step-4); line-height: 1.04; }
.paper-title { font-size: var(--step-2); line-height: 1.18; }

/* the book's own page takes the book's face */
.phero-title--serif {
  font-family: var(--serif); font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════════════════════════════
   GRAIN — a little tooth over the canvas
   Flat dark grounds read as empty; a faint noise layer gives the page a
   surface. SVG turbulence, so no image request. Sits under everything.
   ════════════════════════════════════════════════════════════════════════ */

body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   THE FOUR-ZONE MOTIF — the mark off the book cover, used as a divider
   ════════════════════════════════════════════════════════════════════════ */





/* ════════════════════════════════════════════════════════════════════════
   GOLD — Tier 1's accent, permitted only where the book lives
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --gold: #B8945A;        /* the Brand Constitution's Tier 1 accent — rules, edges */
  /* #B8945A is only 3.94:1 against the top of the book band's gradient. This is
     the lightened variant for anything that is actually text on that ground. */
  --gold-text: #C6A76C;
}

.book-section .book-label,
.book-title em,
.phero--book .section-label { color: var(--gold-text); }

.book-section .book-title { color: #F3EEE3; }

.book-section .btn-white {
  background: transparent; border: 1px solid var(--gold); color: var(--gold-text);
}
.book-section .btn-white:hover { background: var(--gold); color: #17140F; }

/* ════════════════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — cross-document
   Two declarations and every page-to-page navigation cross-fades instead of
   flashing white. The nav and the page header are named so they persist
   rather than fade, which is what makes it feel like one application.
   ════════════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

nav { view-transition-name: site-nav; }
footer { view-transition-name: site-footer; }
.hero__media, .close__media { view-transition-name: none; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .22s ease both; }
  ::view-transition-new(root) { animation: vt-in .26s ease both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   SCROLL PROGRESS — a hairline under the nav, driven by the scroll timeline
   ════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress {
      position: fixed; top: 64px; left: 0; right: 0; height: 2px;
      z-index: 99; transform-origin: 0 50%; background: var(--green);
      animation: progress-grow linear;
      animation-timeline: scroll(root block);
    }
    @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
.progress { display: block; height: 2px; }
@supports not (animation-timeline: scroll()) { .progress { display: none; } }

/* ════════════════════════════════════════════════════════════════════════
   THE J-CURVE DRAWS ITSELF
   The line strokes on as the chart scrolls into view, so the shape is read
   as a motion rather than found already finished. Scroll-driven, so it is
   tied to the reader's position rather than a timer.
   ════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jc-line {
      stroke-dasharray: 1400;
      animation: jc-draw linear both;
      animation-timeline: view();
      animation-range: entry 18% cover 42%;
    }
    @keyframes jc-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }

    .jc-below, .jc-trough, .jc-trough-label, .jc-even, .jc-even-label {
      animation: jc-fade linear both;
      animation-timeline: view();
      animation-range: entry 34% cover 52%;
    }
    @keyframes jc-fade { from { opacity: 0; } to { opacity: 1; } }
  }
}

/* Once a slider moves, the drawing animation must not fight the live redraw. */
.jc.is-live .jc-line { animation: none; stroke-dasharray: none; }
.jc.is-live .jc-below, .jc.is-live .jc-trough,
.jc.is-live .jc-trough-label, .jc.is-live .jc-even, .jc.is-live .jc-even-label { animation: none; opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   RESEARCH — asymmetric measures, and a paper ground for the abstracts
   One column width for everything reads like a template. An abstract wants a
   wide measure; the keywords and the status want a narrow one. And the papers
   sit on a warm near-paper panel — the Tier 1 ground, scoped to the papers
   rather than the whole page so the site keeps one chrome.
   ════════════════════════════════════════════════════════════════════════ */

.paper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: 0 clamp(28px, 4vw, 56px);
  align-items: start;
  padding: 2.1rem clamp(20px, 2.4vw, 34px);
  border-top: var(--hair);
  background: linear-gradient(180deg, rgba(239,231,212,.045) 0%, rgba(239,231,212,.015) 100%);
  border-radius: 10px;
  margin-bottom: 10px;
}
.paper:last-child { border-bottom: var(--hair); }

.paper-meta    { grid-column: 2; grid-row: 1; margin-bottom: 0; }
.paper-title   { grid-column: 1; grid-row: 1; }
.paper-authors { grid-column: 1; grid-row: 2; }
.paper-abstract{ grid-column: 1; grid-row: 3; max-width: 68ch; }
.paper-kw      { grid-column: 2; grid-row: 3; margin-top: 0; line-height: 1.7; }

.paper-title { color: #F1EADB; }
.paper-abstract em { color: #E4DCCB; }

@media (max-width: 860px) {
  .paper { grid-template-columns: 1fr; }
  .paper-meta, .paper-title, .paper-authors, .paper-abstract, .paper-kw {
    grid-column: 1; grid-row: auto;
  }
  .paper-kw { margin-top: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   HONEST EMPTY STATES
   "No testimonials until real ones exist" is a position, not a gap. Design it
   as one and it reads as confidence rather than an unfinished page.
   ════════════════════════════════════════════════════════════════════════ */

.empty {
  margin-top: 2.2rem;
  padding: 1.6rem 1.8rem;
  border: 1px dashed var(--surface-2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
  max-width: 62ch;
}

.empty-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--green); margin: 0 0 .7rem;
}

.empty-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.empty-p strong { color: var(--silver); font-weight: 700; }

/* #00af51 on the green-tinted note panel lands at 4.46 — just under AA.
   The brighter green clears it without changing the panel. */
.plan-block--note .plan-h { color: var(--green-light); }

/* ════════════════════════════════════════════════════════════════════════
   THE BOOK, PRESENTED THE SAME WAY EVERYWHERE
   One treatment: the 3-D component on the grey ground. It was previously a
   flat cover on the home page and the 3-D object on /book, which read as two
   different books.
   ════════════════════════════════════════════════════════════════════════ */

.book-section, .book-ground {
  background: #33343A;
  background-image: linear-gradient(180deg, #3A3B41 0%, #2C2D32 100%);
  border-block: var(--hair);
}

.book-inner {
  max-width: 1220px; margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 88px); align-items: center;
}

/* the hero is single-column now that the book has its own stage */
.hero__in { grid-template-columns: minmax(0, 1fr); }
.hero__col { max-width: 62ch; }

/* copy on the grey, in the book's own face */
.book-ground .phero-title, .book-section .book-title { color: #F3EEE3; }
.book-ground .phero-lede,  .book-section .book-body  { color: rgba(255,255,255,0.80); }
.book-ground .section-label { color: var(--gold-text); }
.book-ground .phero-cta a { color: var(--gold-text); border-bottom-color: rgba(198,167,108,.4); }
.book-ground .phero-cta a:hover { border-bottom-color: var(--gold-text); }

@media (max-width: 900px) {
  .book-inner { grid-template-columns: 1fr; gap: 44px; }
}

/* Logo left, links right, CTA last. The logo used to be absolutely centred and
   silently painted over the "The Book" link at desktop widths. */
nav { gap: 1.5rem; }
.nav-links { gap: clamp(1.1rem, 2vw, 2rem); margin: 0; padding: 0; }
.nav-links a { white-space: nowrap; }
.nav-cta { flex: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-logo { margin-right: auto; margin-left: 0.5rem; font-size: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE RECORD — category counts and the season honour roll
   ════════════════════════════════════════════════════════════════════════ */

.cat-grid {
  margin-top: 2.6rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--surface-2);
  border: 1px solid var(--surface-2); border-radius: 12px; overflow: hidden;
}

.cat {
  background: var(--surface-1); padding: 1.5rem 1.6rem;
  display: flex; gap: 1.1rem; align-items: flex-start;
}

.cat-n {
  font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1;
  letter-spacing: -0.04em; color: var(--green); font-variant-numeric: tabular-nums;
  flex: none; min-width: 2.2ch;
}

.cat-h { margin: 0; font-size: 15px; line-height: 1.3; color: var(--white); font-weight: 700; }
.cat-p { margin: .45rem 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* --- season timeline ----------------------------------------------------- */

.yr { list-style: none; margin: 2.4rem 0 0; padding: 0; }

.yr-row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 1.5rem 0; border-top: var(--hair);
}
.yr-row:last-child { border-bottom: var(--hair); }

.yr-y { display: flex; flex-direction: column; gap: .3rem; }

.yr-year {
  font-family: var(--mono); font-size: 1.45rem; line-height: 1;
  color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

.yr-n {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.yr-n::after { content: " titles"; }

.yr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.yr-list li {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0 1.4rem; align-items: baseline;
  font-size: 14.5px; line-height: 1.45;
  padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.045);
}
.yr-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.yr-who  { color: var(--white); font-weight: 700; }
.yr-what { color: var(--muted); }

.proof__foot a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(0,175,81,.35); }
.proof__foot a:hover { border-bottom-color: var(--green); }

@media (max-width: 820px) {
  .cat-grid { grid-template-columns: 1fr; }
  .yr-row { grid-template-columns: 1fr; gap: 1rem; }
  .yr-y { flex-direction: row; align-items: baseline; gap: .8rem; }
  .yr-list li { grid-template-columns: 1fr; gap: .15rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE FLY-IN DAY — one visit, three specialists, two prices
   ════════════════════════════════════════════════════════════════════════ */

.plan-price--pair { gap: 0; }

.plan-price--pair .plan-price-n--was {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(200,200,200,.45);
}

.plan-price--pair .plan-price-l { margin-bottom: .7rem; }
.plan-price--pair .plan-price-l:last-child { margin-bottom: 0; }

.flyin-grid {
  margin-top: 2.4rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--surface-2);
  border: 1px solid var(--surface-2); border-radius: 12px; overflow: hidden;
}

.flyin-block {
  background: var(--bg); padding: 1.7rem 1.8rem;
  display: flex; flex-direction: column; gap: .7rem;
}

.flyin-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green);
}

.flyin-t { margin: 0; font-size: 1.05rem; line-height: 1.25; color: var(--white); font-weight: 700; letter-spacing: -0.015em; }
.flyin-p { margin: 0; font-size: 14px; line-height: 1.58; color: var(--muted); }

@media (max-width: 860px) {
  .flyin-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   CARD CROPS — positioned per photograph, measured not guessed
   A 190px-tall card shows ~70-80% of each frame. Default centring starts that
   window at ~15%, which cut the student's head off card 01 entirely.
   Head positions in the source frames:
     coach-grip   student 3-12%,  Luke 18-27%   -> window must start above 3%
     fitness-bar  both heads 22-33%
     sim-lesson   heads 13-22% and 26-33%
   ════════════════════════════════════════════════════════════════════════ */

/* Card 1 swapped from coach-grip (head at 3% of frame) to coach-hand-signal,
   where both heads top out near 20%. The card shows ~79% of the frame, so
   Y=45 opens the window at ~9.5% — air above both heads, and as much of
   the bodies as the band allows. Re-measure if the photo changes. */
.approach-card:nth-of-type(1) .card-img img { object-position: 50% 45%; }
.approach-card:nth-of-type(2) .card-img img { object-position: 50% 28%; }  /* sim-lesson, was fitness-bar */
.approach-card:nth-of-type(3) .card-img img { object-position: 50% 28%; }

/* ════════════════════════════════════════════════════════════════════════
   FILM BEHIND A PAGE HEADER
   The source is portrait (1080x1920), so a wide band can only ever show a
   horizontal slice of it. Under a heavy scrim that is the point: it reads as
   motion behind the type, not as a subject. object-position sits on the
   torso-and-horizon band, which is the most legible slice.
   ════════════════════════════════════════════════════════════════════════ */

.phero--film { position: relative; overflow: hidden; }

.phero__film { position: absolute; inset: 0; }

.phero__v {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
}

/* the dark shade — enough that white type never fights the footage */
.phero__film::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* heavy on the left, where the type sits; lighter on the right, so the
       swing is actually visible and the 800KB earns its place */
    /* Heavy where the type sits, lighter to the right so the swing still
       reads. Tuned against measured pixels, not by eye: the brightest
       background under the copy must keep white above 4.5:1 for the lede. */
    linear-gradient(to right, rgba(13,13,13,.92) 0%, rgba(13,13,13,.70) 46%, rgba(13,13,13,.22) 100%),
    linear-gradient(to bottom, rgba(13,13,13,.46) 0%, rgba(13,13,13,.22) 46%, var(--bg) 99%);
}

.phero--film .phero-in { position: relative; z-index: 2; }

/* a still is fine; motion is the enhancement */
@media (prefers-reduced-motion: reduce) {
  .phero__v { display: none; }
  .phero__film { background: url("../video/caleb-swing-poster.jpg") 50% 42% / cover no-repeat; }
}


/* ═══ THE ZONE MAP — ported from ryp-academy-site/assets/css/ryp.css ═══ */

/* ======================================================= the Zone Map ====
   Axes, anchors and the diagonal come from RYP-FOUR-ZONES.md (canonical).
   Colour note: the book renders each zone in its own hue. Tier 2 forbids a
   second accent, so the zones are differentiated by green INTENSITY along the
   diagonal instead — dimmest at Construction, full signal at Performance,
   which also reads as "closer to the real thing". Crimson is used only for the
   Danger Zone, which is precisely the semantic warning the constitution
   reserves it for.
   ======================================================================== */
.zm { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 4vw, 60px); align-items: start; margin-top: 52px; }



.zm__stage { position: relative; border: var(--hair); border-radius: var(--r-md); background: var(--surface-1); padding: 22px; }

.zm__svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }

.zm__axis {
  font-family: var(--font-mono); font-size: 3.2px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; fill: var(--silver);
}

.zm__axis-q { letter-spacing: .14em; fill: var(--slate); }

.zm__grid  { stroke: var(--surface-2); stroke-width: .3; }

.zm__frame { stroke: var(--surface-2); stroke-width: .6; fill: none; }

/* --- the two traps: corner cells, labelled, no heavy fill until chosen --- */
.zm__trap {
  font-family: var(--font-mono); font-size: 2.9px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-anchor: middle; pointer-events: none;
  transition: fill .2s ease;
}

.zm__trap--danger  { fill: var(--crimson); }

.zm__trap--comfort { fill: var(--ice); }

.zm__cell { fill: transparent; transition: fill .2s ease; }

.zm__cell--danger  { fill: rgba(220, 38, 38, .05); }

.zm__cell--comfort { fill: rgba(120, 166, 204, .05); }

.zm__node--trap:hover .zm__trap--danger,
.zm__node--trap[aria-pressed="true"] .zm__trap--danger { fill: var(--crimson); }

.zm__node--trap:hover .zm__trap--comfort,
.zm__node--trap[aria-pressed="true"] .zm__trap--comfort { fill: var(--ice); }

.zm__node--trap:hover .zm__cell--danger,
.zm__node--trap[aria-pressed="true"] .zm__cell--danger { fill: rgba(220, 38, 38, .10); }

.zm__node--trap:hover .zm__cell--comfort,
.zm__node--trap[aria-pressed="true"] .zm__cell--comfort { fill: rgba(120, 166, 204, .10); }

/* --- the four zones, set as the cover sets them: an outlined cell carrying an
       index, a large symbol and the zone name. The stepping of the boxes IS the
       diagonal, so no dashed rule is drawn over it. --------------------------- */
.zm__node { cursor: pointer; }

.zm__node:focus { outline: none; }

.zm__hit  { fill: transparent; }

.zm__box {
  fill: none; stroke: var(--green); stroke-width: .5;
  /* the four read as a sequence: faint at Construction, full at Performance */
  opacity: calc(.42 + var(--i) * .19);
  transition: opacity .2s ease, stroke-width .2s ease;
}

.zm__idx {
  font-family: var(--font-mono); font-size: 2.5px; letter-spacing: .14em;
  fill: var(--slate); pointer-events: none;
}

.zm__sym {
  font-family: var(--font-sans); font-weight: 700; font-size: 9.4px; letter-spacing: -.02em;
  fill: var(--white); text-anchor: middle; pointer-events: none; transition: fill .2s ease;
}

.zm__zname {
  /* CONSTRUCTION is the longest at 12 characters; sized so it sits inside the
     21.8-unit cell rather than breaking its edges. */
  font-family: var(--font-mono); font-size: 2.05px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--muted); text-anchor: middle; pointer-events: none;
  transition: fill .2s ease;
}

.zm__node:hover .zm__box, .zm__node:focus-visible .zm__box { opacity: 1; stroke-width: .75; }

.zm__node:hover .zm__zname, .zm__node:focus-visible .zm__zname { fill: var(--white); }

.zm__node[aria-pressed="true"] .zm__box { opacity: 1; stroke-width: .95; }

.zm__node[aria-pressed="true"] .zm__cell { fill: rgba(0, 175, 81, .09); }

.zm__node[aria-pressed="true"] .zm__sym { fill: var(--green); }

.zm__node[aria-pressed="true"] .zm__zname { fill: var(--white); }

/* A footnote under the whole map, not inside either column — it answers the
   objection the grid raises in a parent's head the moment they see it. */
.zm__note {
  margin: clamp(28px, 3.5vw, 44px) auto 0; max-width: 74ch; text-align: center;
  font-size: 15px; line-height: 1.65; color: var(--muted);
  border-top: 1px solid var(--surface-2); padding-top: clamp(22px, 2.6vw, 32px);
}

.zm__hint { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* --- the detail panel ---------------------------------------------------- */
.zm__panel { border: var(--hair); border-radius: var(--r-md); background: var(--surface-1); padding: 30px 28px 32px; }

.zm__persona { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); display: flex; align-items: center; gap: 10px; }

.zm__persona::before { content: ""; width: 20px; height: 1px; background: var(--green); }

.zm__panel h3 { font-size: clamp(26px, 3vw, 36px); margin: 14px 0 0; }

.zm__lede { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--silver); }

.zm__quote { margin: 20px 0 0; padding-left: 18px; border-left: 2px solid var(--green); font-size: 15.5px; line-height: 1.5; color: var(--white); }

.zm__stats { list-style: none; margin: 24px 0 0; padding: 0; border-top: var(--hair); }

.zm__stats li { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 11px 0; border-bottom: var(--hair); font-size: 14.5px; color: var(--silver); }

.zm__stats b { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--green); padding-top: 3px; }



.zm__where { margin-top: 22px; font-size: 14px; color: var(--muted); }

.zm__where strong { color: var(--white); }

/* No-JS / no-SVG fallback: every zone panel simply stacks and reads. */
.zm__all { display: grid; gap: 18px; }

.js .zm__all { display: none; }

.js .zm__panel-live { display: block; }

.zm__panel-live { display: none; }

/* --- the two traps, now selectable alongside the four zones -------------- */
.zm__node--trap { cursor: pointer; }

.zm__node--trap:hover .zm__trap, .zm__node--trap[aria-pressed="true"] .zm__trap { fill: var(--white); }

/* Panel tones. Crimson can't carry small text at 4.5:1 on surface-1, so the
   warning rides on the rule and the marker; the text itself stays legible. */
.zm__panel--danger .zm__persona::before { background: var(--crimson); }

.zm__panel--danger .zm__quote { border-left-color: var(--crimson); }

.zm__panel--comfort .zm__persona::before { background: var(--ice); }

.zm__panel--comfort .zm__quote { border-left-color: var(--ice); }

.zm__panel--danger .zm__persona { color: var(--muted); }

.zm__panel--comfort .zm__persona { color: var(--ice); }

.zm__panel--danger .zm__stats b, .zm__panel--comfort .zm__stats b { color: var(--muted); }

@media (max-width: 1000px) {
  .zm { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .zm__stats li { grid-template-columns: 1fr; gap: 3px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CREDENTIALS — on the adult program, where the buyer is deciding
   Sourced from lukebenoitgolf.com/recognition, which is the live record and
   supersedes the 2024 PGA nomination where the two disagree.
   ════════════════════════════════════════════════════════════════════════ */

.creds {
  margin-top: 2.6rem; padding-top: 2rem;
  border-top: var(--hair);
}

.creds-head { max-width: 62ch; }

.creds-name {
  margin: 0.6rem 0 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.03em; color: var(--white);
}

.creds-lede { margin: 0.9rem 0 0; font-size: 15px; line-height: 1.62; color: var(--muted); }

.creds-cols {
  margin-top: 2rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--surface-2);
  border: 1px solid var(--surface-2); border-radius: 12px; overflow: hidden;
}

.creds-col { background: var(--bg); padding: 1.5rem 1.5rem 1.6rem; }

.creds-h {
  margin: 0 0 1rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--green);
}

.creds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.creds-list li { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.creds-list strong { color: var(--white); font-weight: 700; }

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

/* ════════════════════════════════════════════════════════════════════════
   THE REEL — a full-screen opening, built like the home hero
   The clip is 1080x1920. Covering the whole landscape viewport would show a
   ~35% horizontal band of it and cut the golfer in half, so the footage gets
   its own full-height column bleeding off the top, right and bottom edges.
   At 1440 that column is 662 wide against 900 tall, which shows 76% of the
   frame — enough for the whole swing — while the section still fills the
   screen the way the hero does.
   ════════════════════════════════════════════════════════════════════════ */

.phero--reel {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: #080808;
  border-bottom: var(--hair);
  overflow: hidden;
}
.phero--reel::before { content: none; }   /* no lattice over the dark ground */

.reel {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(300px, 46vw, 780px);
  margin: 0;
}

.reel__v {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* The column shows ~76% of the frame at 1440x900. Y=60 opened the window at
     14% and clipped the club at the top of the backswing; Y=38 opens it at 8.9%,
     which holds the club and the feet. Re-measure if the clip changes. */
  object-position: 50% 38%;
  background: #050505;
  /* Measured against the home hero at 1440x900: the hero photo sits at mean
     luminance 27 / p90 46, the raw footage at 92 / 211 — three and a half
     times brighter, so it read as a different site. Tuned to match. */
  filter: brightness(.55) saturate(.86) contrast(1.03);
}

/* Two jobs. The vertical layer evens the frame out: measured top to bottom in
   ten bands the footage ran 72.1 at the sky down to 15.6 at the turf, a 4.6x
   spread, so the top read washed out against a page that is otherwise flat
   black. Each stop is a = (L - 40) / (L - 8) for that band: target 40, over
   an rgba(8,8,8) overlay rather than pure black. Percentages are relative to
   the section, whose top 64px sits BEHIND the fixed nav - reading them off a
   screenshot without that offset puts every stop 7.1% too low. The bump at
   40% is the bright fairway behind Caleb, not a mistake. The horizontal
   layer is the original one, fading the footage into the copy. */
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8,8,8,.73) 0%, rgba(8,8,8,.71) 12%, rgba(8,8,8,.53) 21%,
      rgba(8,8,8,.10) 30%, rgba(8,8,8,.21) 40%, rgba(8,8,8,0) 50%),
    linear-gradient(to right,
      #080808 0%, rgba(8,8,8,.82) 9%, rgba(8,8,8,.28) 24%, rgba(8,8,8,0) 46%);
}

.reel__c {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px clamp(16px, 2vw, 28px) clamp(14px, 2vh, 22px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver); text-align: right;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}

/* As a bare flex item .phero-in shrank to its content and its auto margins
   then centred it mid-section; width:100% lets the usual 1220 container take
   over, so the copy starts on the left edge the way the home hero's does. */
.phero--reel .phero-in { position: relative; z-index: 2; width: 100%; }
/* and it stops before the footage rather than running underneath it */
.phero--reel .phero-in > * { max-width: min(46ch, 40vw); }

@media (prefers-reduced-motion: reduce) {
  .reel__v { display: none; }
  .reel::before {
    content: ""; position: absolute; inset: 0;
    background: url("../video/caleb-swing-poster.jpg") 50% 60% / cover no-repeat #050505;
  }
}

@media (max-width: 900px) {
  /* stacked: the copy sits above a full-width band of the footage */
  .phero--reel { display: block; min-height: 0; padding-bottom: 62svh; }
  .reel { inset: auto 0 0 0; width: auto; height: 62svh; }
  .reel::after {
    background: linear-gradient(to bottom,
      #080808 0%, rgba(8,8,8,.74) 8%, rgba(8,8,8,.18) 22%, rgba(8,8,8,0) 42%);
  }
  .reel__c { text-align: left; }
}

/* ── Phone nav: the Contact pill used to run 23px off the right edge ──────
   At 375 the row asked for 423px (24 pad + 20 burger + 24 gap + 217 logo
   + 24 gap + 90 pill + 24 pad). Tighten the gutters and the wordmark.     */
@media (max-width: 480px) {
  nav { gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; }
  .nav-logo { font-size: 0.95rem; padding-left: 0; margin-left: 0; }
  .nav-cta { padding: 0.5rem 0.85rem; font-size: 0.62rem; }
}

/* ── Book beside the copy, not stacked above it ───────────────────────────
   Three separate `max-width: 900px` blocks each collapsed part of this
   layout, so any laptop under 900px got the cover dumped below the text.
   The cover is already fluid (clamp(200px, 26vw, 320px)), so the pair fits
   well below that: at 720 it is a 200px cover beside ~410px of copy.
   This sits after all three blocks, so it wins in the 720-900 band.        */
@media (min-width: 720px) {
  .book-inner,
  .phero-book-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 88px);
    align-items: center;
  }
  .bookfig { align-items: center; }
}

/* ── Clickable axes ───────────────────────────────────────────────────────
   The labels select like a zone. SVG <text> is a thin target, so each one
   carries its own transparent hit rect (the Y rect rides the same rotate
   transform as its label).                                                */
.zm__node--axis { cursor: pointer; }
.zm__node--axis:focus { outline: none; }

.zm__node--axis:hover .zm__axis,
.zm__node--axis:focus-visible .zm__axis,
.zm__node--axis[aria-pressed="true"] .zm__axis { fill: var(--green); }

.zm__node--axis:hover .zm__axis-q,
.zm__node--axis:focus-visible .zm__axis-q,
.zm__node--axis[aria-pressed="true"] .zm__axis-q { fill: var(--silver); }

.zm__axis, .zm__axis-q { transition: fill .18s ease; }

/* the axis panel names an axis, not a persona, so it takes the neutral dot */
.zm__panel--axis .zm__persona { color: var(--silver); }
.zm__panel--axis .zm__persona::before { background: var(--silver); }
.zm__panel--axis .zm__quote { border-left-color: var(--slate); }

/* ── Unfold — the program detail, folded away until asked for ─────────────
   Native <details>, so it works with the keyboard, with find-in-page, and
   with JavaScript off. No script involved.                                */
.unfold {
  border: var(--hair);
  border-radius: var(--r-md);
  background: var(--surface-1);
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.unfold__s {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.9vw, 21px); color: var(--white);
}
.unfold__s::-webkit-details-marker { display: none; }
.unfold__s:hover { color: var(--green); }
.unfold__s:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: var(--r-md); }

/* the chevron, drawn rather than shipped as an icon */
.unfold__i {
  width: 11px; height: 11px; flex: none;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.unfold[open] .unfold__i { transform: rotate(-135deg) translate(-2px, -2px); }

.unfold__b {
  padding: 0 clamp(18px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  border-top: var(--hair);
  padding-top: clamp(22px, 3vw, 30px);
}
.unfold__b .plan-grid { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .unfold__i { transition: none; } }

/* A grid built for three cards left a visible hole once College Advising was
   dropped. Match the column count to the card count rather than hard-coding
   three; :has() keeps the four-card .zones grid untouched. */
.approach-grid:has(> .approach-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .approach-grid:has(> .approach-card:nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }
}

/* The founder heading and the CV share one .section-inner now. Two stacked
   inners meant 6rem of bottom padding against 6rem of top padding — 192px of
   dead space between the name and the first line of the bio. */
.section-inner > .cv-grid { margin-top: clamp(28px, 3.5vw, 48px); }

/* The four zones are explained properly on /philosophy. Here they are a
   pointer, not a third retelling of the same framework. */
.plan-zones {
  margin: clamp(22px, 3vw, 34px) 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
}
.plan-zones a { color: var(--green); text-decoration: none; white-space: nowrap; }
.plan-zones a:hover { text-decoration: underline; }

/* The credential list lives on /results now; the founder block points at it. */
.cv-more { margin: 18px 0 0; }
.cv-more a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(0,175,81,.35); padding-bottom: 2px;
}
.cv-more a:hover { border-bottom-color: var(--green); }

/* ════════════════════════════════════════════════════════════════════════
   THE SWING — each camera angle sits with the concepts it actually shows
   Face-on pairs with 01 (width). Down-the-line pairs with 02 and 03 (plane
   and pivot). Both clips are PORTRAIT — the face-on source reports 1920x1080
   but carries a -90 rotation, so it displays 9:16 like the other one.
   object-fit is CONTAIN on both, so neither clip is ever cropped.
   ════════════════════════════════════════════════════════════════════════ */

.swing-pair {
  display: grid;
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
  margin: clamp(32px, 4.5vw, 56px) 0 0;
}
/* Both clips are 9:16. The source reports 1920x1080 but carries rotation=-90,
   so it DISPLAYS portrait — ffprobe's stream dimensions are pre-rotation. */
.swing-pair--wide,
.swing-pair--tall { grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); }

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

.film__v {
  display: block; width: 100%; height: auto;
  object-fit: contain;              /* never crop the evidence */
  background: #050505;
  border: 1px solid var(--surface-2);
  border-radius: 10px;
  filter: brightness(.94) saturate(.96);
}
.film--wide .film__v,
.film--tall .film__v { aspect-ratio: 9 / 16; max-width: 340px; }

.film__c {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate);
}

.swing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 36px); }
.swing-item { border-top: 1px solid var(--surface-2); padding-top: 18px; }
.swing-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--green); margin-bottom: 10px;
}
.swing-h {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px); color: var(--white); margin: 0 0 10px;
}
.swing-b { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.62; }

.swing-src {
  margin: clamp(30px, 3.5vw, 44px) 0 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--slate);
}
.swing-src a { color: var(--slate); text-decoration: none; border-bottom: 1px solid var(--surface-2); }
.swing-src a:hover { color: var(--green); border-bottom-color: var(--green); }

@media (max-width: 860px) {
  .swing-pair--wide, .swing-pair--tall { grid-template-columns: 1fr; }
  .film--wide .film__v, .film--tall .film__v { max-width: 290px; }
}

/* ════════════════════════════════════════════════════════════════════════
   WHAT A MEMBERSHIP INCLUDES — ported from the academy site's #membership
   ════════════════════════════════════════════════════════════════════════ */

.incl-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px); align-items: center;
  margin: clamp(34px, 4.5vw, 56px) 0 0;
}
.incl-h {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.06;
  letter-spacing: -.02em; color: var(--white); margin: 14px 0 0;
}
.incl-lede { margin: 20px 0 0; color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; }

.incl-fig { margin: 0; position: relative; }
.incl-fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1600 / 1112; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--surface-2);
}
.incl-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver);
  background: linear-gradient(to top, rgba(0,0,0,.76), rgba(0,0,0,0));
  border-radius: 0 0 12px 12px;
}

.incl {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin: clamp(34px, 4.5vw, 54px) 0 0;
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--surface-2);
}
.incl__item { display: flex; gap: 10px; align-items: flex-start; }
.incl__tick { color: var(--green); flex: none; margin-top: 3px; }
.incl__item h4 {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--white); margin: 0 0 7px; line-height: 1.25;
}
.incl__item p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

@media (max-width: 1100px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .incl-split { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .incl { grid-template-columns: 1fr; } }

/* The CV side column is gone. What is left is the bio and the portrait, so
   they take a column each rather than stacking with the photo below the fold.
   Top-aligned: the bio is short and should start level with the picture. */
.cv-grid:not(:has(.cv-side)) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
}
.cv-grid:not(:has(.cv-side)) .cv-body { max-width: 56ch; }
.cv-grid:not(:has(.cv-side)) .cv-portrait { margin: 0; max-width: 460px; }

@media (max-width: 860px) {
  .cv-grid:not(:has(.cv-side)) { grid-template-columns: 1fr; }
  .cv-grid:not(:has(.cv-side)) .cv-portrait { max-width: 100%; }
}

/* ── The foreword ─────────────────────────────────────────────────────────
   Raymond Prior's words, on the book's own grey ground, set in the book's
   serif so it reads as coming from the page rather than from the site.      */
.fwd {
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 2px solid var(--gold-text, #C6A76C);
  max-width: 54ch;
}
.fwd__q {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
  color: #F3EEE3;
}
.fwd__a {
  margin: 14px 0 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text, #C6A76C); line-height: 1.7;
}
.fwd__a span { color: var(--slate); text-transform: none; letter-spacing: .04em; font-size: 11px; }

/* The firewall — the answer to the curve, so it sits under it. */
.jc-firewall {
  grid-column: 1 / -1;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: clamp(18px, 2.2vw, 24px) clamp(18px, 2.4vw, 26px);
  border: var(--hair); border-left: 2px solid var(--green);
  border-radius: var(--r-md); background: var(--surface-1);
}
.jc-fw-h {
  font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.9vw, 20px);
  color: var(--white); margin: 0 0 9px;
}
.jc-fw-b { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.62; max-width: 72ch; }

/* Toolbox — each zone's named system, as the book's glossary expands it. */
.zm__tool {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--surface-2);
  display: grid; gap: 4px;
}
.zm__tool b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green); font-weight: 400;
}
.zm__tool-n { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--white); }
.zm__tool-e { font-size: 13px; color: var(--muted); line-height: 1.5; }
.zm__panel--danger .zm__tool b, .zm__panel--comfort .zm__tool b { color: var(--slate); }
.zm__panel--danger .zm__tool-n, .zm__panel--comfort .zm__tool-n { color: var(--silver); font-weight: 400; font-size: 14px; }

/* /speaking reuses the /results split backdrop, but its clip is 1048x1300
   (aspect .81) rather than 9:16, so the column is wider to match. No caption:
   the footage is atmosphere here, not evidence, and the player is unnamed. */
.phero--reel .reel:has(> .reel__v[poster*="tee-swing"]) { width: clamp(300px, 42vw, 720px); }
.phero--reel .reel__v[poster*="tee-swing"] {
  object-position: 50% 30%;
  filter: brightness(.55) saturate(.86) contrast(1.03);
}

/* Deliverables — what actually arrives, and how often. The rate is the first
   thing read, because "one lesson a month" is the question a parent is asking. */
.deliv { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.deliv__item {
  /* 120px fits "Unlimited" at the capped size; a 96px column overflowed it
     straight into the heading beside it. */
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px;
  align-items: start;
  padding: 16px 18px;
  border: var(--hair); border-left: 2px solid var(--green);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.deliv__rate {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.05; color: var(--green);
  overflow-wrap: anywhere;
}
.deliv__rate i {
  font-family: var(--mono); font-style: normal; font-weight: 400;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}

.deliv__h {
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  color: var(--white); margin: 0 0 5px; line-height: 1.3;
}
.deliv__p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.58; }

.deliv__also { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.58; }
.deliv__also strong { color: var(--silver); font-weight: 600; }

@media (max-width: 520px) {
  .deliv__item { grid-template-columns: 1fr; gap: 8px; }
  .deliv__rate { flex-direction: row; align-items: baseline; gap: 8px; }
}