/* ==========================================================================
   KP Performance
   Mobile-first. Breakpoints: 768px (tablet), 900px (3-up rows), 1024px (desktop), 1280px (wide).
   ========================================================================== */

:root {
  --ink: #111111;
  --paper: #f4f2ed;
  --graphite: #5c5b57;   /* secondary text on paper: 6.1:1 */
  --ash: #a19f99;        /* secondary text on ink: 7.1:1 */
  --rule: #d9d6cf;
  --rule-ink: #2b2b2b;
  --red: #c8231b;        /* accent: Apply buttons, focus, Tommy John marker only */
  --red-deep: #a81c15;
  --ph: #e7e4dd;         /* empty image slot on paper */
  --ph-ink: #1c1c1c;     /* empty image slot on ink */

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --header-h: 64px;
  --pad: 20px;
  --max: 1440px;
  --gap: 24px;
  --section-space: clamp(80px, 13vw, 176px);
}

@media (min-width: 768px) {
  :root { --pad: 40px; --header-h: 72px; }
}
@media (min-width: 1280px) {
  :root { --pad: 64px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) {
  body { font-size: 1.125rem; }
}
body.menu-open { overflow: hidden; }

/* Only show a blinking text cursor where someone can actually type. Browsers with
   "caret browsing" on otherwise put one in any text that's clicked. The assessment
   form lives in Google's frame, so its fields keep their normal cursor. */
body { caret-color: transparent; }
input, textarea, [contenteditable]:not([contenteditable="false"]) { caret-color: auto; }

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.on-ink :focus-visible,
.site-header :focus-visible { outline-color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--paper); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout + type ---------- */

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

.on-ink { background: var(--ink); color: var(--paper); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.88;
  text-transform: uppercase;
  text-wrap: balance;
}

.label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.on-ink .label { color: var(--ash); }

/* Every section opens on a thin rule with a small label, like a magazine department head. */
.section-head {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  margin-bottom: clamp(48px, 8vw, 96px);
}
.on-ink .section-head { border-top-color: var(--rule-ink); }
.section-head .label { margin-bottom: 20px; }
.section-head--flush { margin-bottom: 0; }

.section-title {
  font-size: clamp(3rem, 13vw, 7.5rem);
  max-width: 13ch;
}

.section-intro {
  margin-top: 24px;
  max-width: 40ch;
  font-size: 1.125rem;
  color: var(--graphite);
}

@media (min-width: 1024px) {
  .section-head--split {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: end;
  }
  .section-head--split > div { grid-column: 1 / span 7; }
  .section-head--split .section-intro { grid-column: 9 / -1; margin-top: 0; }
}

/* ---------- Buttons + links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent; /* keeps an edge in Windows high-contrast mode */
  background: var(--red);
  color: var(--paper);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--red-deep); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.75rem; }

/* ---------- Image slots ----------
   Each slot is a fixed-ratio box. The photo stays hidden until it has actually loaded;
   if the file is missing, a plain label shows the filename, ratio and what goes there. */

.slot {
  position: relative;
  overflow: hidden;
  background: var(--ph);
}
.on-ink .slot { background: var(--ph-ink); }

.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .slot img { opacity: 0; }
.js .slot.is-loaded img { opacity: 1; }

.slot__ph {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--rule);
  color: var(--graphite);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.on-ink .slot__ph { border-color: var(--rule-ink); color: var(--ash); }
.slot.is-missing .slot__ph { display: flex; }
.slot__file { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.on-ink .slot__file { color: var(--paper); }

.slot--4x5  { aspect-ratio: 4 / 5; }
.slot--3x2  { aspect-ratio: 3 / 2; }

/* ---------- 1. Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--rule-ink);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: auto;
  text-decoration: none;
}
.brand img {
  height: 34px;
  width: auto;
  mix-blend-mode: screen; /* a black logo background disappears into the header */
}
.js .brand img { display: none; }
.js .brand.is-loaded img { display: block; }
.brand__ph { display: none; }
.brand.is-missing .brand__ph {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--rule-ink);
  color: var(--ash);
  font-size: 0.75rem;
}
@media (min-width: 768px) {
  .brand img { height: 40px; }
}

.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px 0 14px;
  background: none;
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Mobile: without JS the links sit in a row under the logo; with JS they live in a panel. */
.no-js .site-header__bar { flex-wrap: wrap; height: auto; padding-block: 12px; }
.no-js .site-nav { order: 3; width: 100%; }
.no-js .site-nav__list { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.875rem; }

.js .site-nav { display: none; }
.js .site-nav.is-open {
  display: block;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 16px var(--pad) 48px;
  background: var(--ink);
}
.js .site-nav.is-open .site-nav__list a {
  display: block;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--rule-ink);
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 768px) {
  .js .nav-toggle { display: none; }
  .js .site-nav,
  .no-js .site-nav { display: block; order: 0; width: auto; margin-right: 20px; }
  .no-js .site-header__bar { flex-wrap: nowrap; height: var(--header-h); padding-block: 0; }
  .site-nav__list,
  .no-js .site-nav__list { display: flex; gap: clamp(20px, 3vw, 40px); }
  .site-nav__list a {
    display: block;
    padding: 8px 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .site-nav__list a:hover { text-decoration: underline; text-underline-offset: 6px; }
}

/* ---------- 2. Hero ---------- */

.hero__grid {
  display: grid;
  gap: 24px;
  padding-block: clamp(40px, 8vw, 104px) clamp(40px, 6vw, 72px);
}

.hero__title {
  font-size: clamp(4rem, 19vw, 12rem);
  line-height: 0.84;
}
.hero__title span { display: block; }

.hero__sub {
  max-width: 30ch;
  margin-bottom: 28px;
  font-size: 1.125rem;
  line-height: 1.5;
  text-wrap: balance; /* even line lengths, no lone last word */
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: end;
  }
  .hero__eyebrow { grid-column: 1 / -1; }
  .hero__title { grid-column: 1 / span 8; }
  .hero__side { grid-column: 9 / -1; padding-bottom: 6px; }
}

/* ---------- 3. Coaches ---------- */

.coaches { padding-block: var(--section-space); }

.coach { display: grid; gap: 40px; }
.coach + .coach { margin-top: clamp(112px, 16vw, 224px); }

/* Thin rule that opens each coach, so the two coaches read as separate */
.coach__rule { border-top: 1px solid var(--ink); }

.coach__name { font-size: clamp(3.5rem, 15vw, 6.5rem); }

.coach__role {
  margin-top: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.coach__role span { display: block; }
.coach__role span + span { margin-top: 4px; color: var(--ink); }

.velo {
  margin: 36px 0;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.velo__figure {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.76;
  text-transform: uppercase;
}
.velo__num { font-size: clamp(10rem, 58vw, 19rem); }
.velo__unit { font-size: clamp(1.75rem, 7vw, 2.75rem); line-height: 1; }
.velo__note { margin-top: 20px; color: var(--graphite); }

.coach__bio { max-width: 56ch; }

.facts { margin-top: 36px; border-top: 1px solid var(--rule); }
.facts > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  padding-top: 0.3em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.facts dd { font-size: 1rem; }

/* Kobe's Tommy John comeback: the one red marker in the section */
.comeback {
  display: grid;
  gap: 24px;
  padding-top: 24px;
  border-top: 3px solid var(--red);
}
.comeback .comeback__label { color: var(--red); }
.comeback__line { font-size: clamp(3rem, 13vw, 6rem); }
.comeback__line span { display: block; }
.comeback__steps { border-top: 1px solid var(--rule); }
.comeback__steps li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.comeback__when {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .coach--left .coach__portrait { width: 75%; }
  .coach--right .coach__portrait { width: 75%; justify-self: end; }
}

@media (min-width: 1024px) {
  .coach {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    row-gap: 72px;
    align-items: start;
  }
  .coach .coach__portrait { width: auto; justify-self: stretch; }
  .coach__rule { grid-column: 1 / -1; grid-row: 1; }

  .coach--left .coach__portrait { grid-column: 1 / span 5; grid-row: 2; }
  .coach--left .coach__body     { grid-column: 7 / -1;    grid-row: 2; }
  .coach--left .coach__action   { grid-column: 4 / -1; }

  .coach--right .coach__portrait { grid-column: 8 / -1;    grid-row: 2; }
  .coach--right .coach__body     { grid-column: 1 / span 6; grid-row: 2; }
  .coach--right .comeback        { grid-column: 1 / -1; }
  .coach--right .coach__action   { grid-column: 1 / span 9; }

  .comeback {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: end;
  }
  .comeback__label { grid-column: 1 / -1; }
  .comeback__line  { grid-column: 1 / span 7; font-size: clamp(3.5rem, 5.4vw, 5rem); }
  .comeback__steps { grid-column: 8 / -1; }
}

/* ---------- 4. Approach ---------- */

.approach { padding-block: var(--section-space); }

.approach__title {
  margin-top: clamp(32px, 6vw, 64px);
  font-size: clamp(3.75rem, 17vw, 12.5rem);
  line-height: 0.84;
}

.approach__body {
  display: grid;
  gap: 48px;
  margin-top: clamp(56px, 9vw, 128px);
}

.approach__lead {
  max-width: 32ch;
  font-size: 1.25rem;
  line-height: 1.5;
}

.principles { counter-reset: principle; border-top: 1px solid var(--rule-ink); }
.principle {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-ink);
}
.principle::before {
  content: counter(principle, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ash);
}
.principle h3 {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 7vw, 2.75rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.principle p { margin-top: 10px; color: var(--ash); }


@media (min-width: 1024px) {
  .approach__body {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
  }
  .approach__lead { grid-column: 1 / span 4; }
  .principles { grid-column: 6 / -1; }
}

/* ---------- 5. Training ---------- */

.training { padding-block: var(--section-space); }

.formats { border-top: 1px solid var(--ink); }

.format {
  display: flex;
  flex-direction: column;
  padding: 32px 0 36px;
  border-bottom: 1px solid var(--rule);
}
.format__name { font-size: clamp(3rem, 14vw, 4.75rem); }
.format__where {
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.format__details { display: grid; gap: 22px; margin-top: 28px; }
.format__details dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
}
.format__details dd { margin-top: 6px; }

/* What we coach: pitching / workouts / nutrition as a ruled list */
.services {
  display: grid;
  gap: 28px;
  margin-top: clamp(64px, 9vw, 120px);
}
.services__lead {
  max-width: 30ch;
  margin-top: 16px;
  font-size: 1.25rem;
  line-height: 1.5;
}
.services__list { border-top: 1px solid var(--ink); }
.services__list > div {
  display: grid;
  gap: 6px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.services__list dt {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}

.pricing-note {
  margin-top: 32px;
  font-weight: 500;
}

@media (min-width: 600px) {
  .services__list > div {
    grid-template-columns: 13rem 1fr;
    align-items: baseline;
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .services {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
  }
  .services__intro { grid-column: 1 / span 4; }
  .services__list { grid-column: 6 / -1; }
}

@media (min-width: 900px) {
  .formats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .format {
    padding: 36px 32px 16px;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
  }
  .format:first-child { padding-left: 0; border-left: 0; }
  .format:last-child { padding-right: 0; }
  .pricing-note { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); }
}

/* ---------- 6. How it works ---------- */

.how { padding-bottom: var(--section-space); }

.steps { counter-reset: step; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
}
.step::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 0.8;
}
.step__text {
  padding: 0 0 44px 20px;
  border-left: 1px solid var(--ink);
}
.step:last-child .step__text { padding-bottom: 0; }
.step__title {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.step__text p { margin-top: 10px; max-width: 34ch; }

@media (min-width: 900px) {
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); }
  .step { grid-template-columns: 1fr; align-content: start; }
  .step::before {
    font-size: clamp(6rem, 11vw, 10rem);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ink);
  }
  .step__text { padding: 24px 32px 0 0; border-left: 0; }
}

/* ---------- 7. Results (hidden until real results exist) ---------- */

.results { padding-bottom: var(--section-space); }
.results--hidden { display: none !important; }

.results-list { display: grid; gap: 56px; }
.result { padding-top: 20px; border-top: 1px solid var(--ink); }
.result__who {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
}
.result__velo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 8rem);
  font-weight: 900;
  line-height: 0.85;
  text-transform: uppercase;
}
.result__arrow { font-size: 0.5em; color: var(--graphite); }
.result__unit { font-size: 0.3em; }
.result__span { margin-top: 12px; color: var(--graphite); }
.result__quote { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.result__quote p { max-width: 40ch; font-size: 1.25rem; line-height: 1.45; }
.result__quote footer { margin-top: 12px; font-size: 0.875rem; color: var(--graphite); }

@media (min-width: 900px) {
  .results-list { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}

/* ---------- 8. FAQ ---------- */

.faq { padding-bottom: var(--section-space); }
.faq__grid { display: grid; }

.faq__list { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--rule); }

.faq__item summary {
  position: relative;
  padding: 22px 48px 22px 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }

/* plus / minus, drawn with two bars */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: var(--ink);
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { display: none; }

.faq__answer { max-width: 60ch; padding: 0 48px 28px 0; color: var(--graphite); }

@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .faq__head {
    grid-column: 1 / span 4;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    margin-bottom: 0;
  }
  .faq__head .section-title { font-size: clamp(3rem, 6vw, 5.5rem); }
  .faq__list { grid-column: 6 / -1; }
}

/* ---------- 9. Apply ---------- */

.apply { padding-block: var(--section-space); }

.apply__title { font-size: clamp(3.5rem, 15vw, 9rem); max-width: 10ch; }

.apply__grid {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}
.apply__lead { max-width: 36ch; font-size: 1.25rem; line-height: 1.5; }
.apply__talk .label { margin-bottom: 12px; }

/* The embedded Google Form sits on a paper panel (its own background is transparent).
   A cross-site frame can't size itself, so the height is set here. If the coaches add
   questions and the bottom of the form gets cut off, raise --form-h. */
.apply-form {
  --form-h: 1360px;
  position: relative;
  margin-inline: calc(-1 * var(--pad)); /* edge to edge on phones */
  background: var(--paper);
  color: var(--ink);
  scroll-margin-top: 16px;
}
.apply-form iframe {
  position: relative;
  display: block;
  width: 100%;
  height: var(--form-h);
  border: 0;
}
.apply-form__loading {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--graphite);
}
.apply-form.is-loaded .apply-form__loading { display: none; }
.apply-form__fallback {
  padding: 0 20px 20px;
  font-size: 0.8125rem;
  color: var(--graphite);
}
.apply-form :focus-visible { outline-color: var(--red); }

@media (min-width: 768px) {
  .apply-form { --form-h: 1220px; margin-inline: 0; }
}

.contact { width: 100%; border-top: 1px solid var(--rule-ink); }
.contact li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-ink);
}
@media (min-width: 480px) {
  .contact li { grid-template-columns: 7rem 1fr; gap: 16px; align-items: baseline; }
}
.contact__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}
.contact a { text-decoration: none; overflow-wrap: break-word; }
.contact a:hover { text-decoration: underline; }

@media (min-width: 1024px) {
  .apply__title { max-width: none; }
  .apply__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--gap);
    row-gap: 48px;
    margin-top: 72px;
  }
  .apply__lead { grid-column: 1 / span 4; grid-row: 1; }
  .apply__talk { grid-column: 1 / span 4; grid-row: 2; }
  .apply-form  { grid-column: 6 / -1; grid-row: 1 / span 3; }
}

/* ---------- 10. Footer ---------- */

.site-footer {
  padding-block: 28px 36px;
  border-top: 1px solid var(--rule-ink);
  color: var(--ash);
  font-size: 0.875rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
}
.site-footer__name { margin-right: auto; font-size: 1.5rem; color: var(--paper); }

/* ---------- Motion: one quiet fade-in, and nothing at all for reduced motion ---------- */

.can-reveal .reveal { opacity: 0; transition: opacity 0.7s ease; }
.can-reveal .reveal.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .can-reveal .reveal { opacity: 1; transition: none; }
}