/* McGreen Running homepage (Kinetic). Black, stone and one green. Boston full bleed, a black slab, the credential and one Apply. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Roboto Condensed Bold"), local("RobotoCondensed-Bold");
  font-weight: 700;
  size-adjust: 80%; ascent-override: 125%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica");
  size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%;
}

:root {
  --black: #151515;
  --white: #fff;
  --stone: #eeede9;
  --soft: rgba(255, 255, 255, .76);
  --dim: rgba(255, 255, 255, .6);
  --rule: rgba(255, 255, 255, .22);
  --rule-ink: rgba(0, 0, 0, .16);
  --ink-soft: #3b3d3a;
  --green: #86e0a6;
  --green-hi: #a6ecbf;

  --display: "Barlow Condensed", "Barlow Condensed Fallback", "DIN Condensed", sans-serif;
  --text: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;

  --max: 1920px;
  --g: max(20px, min(5vw, 80px), calc(env(safe-area-inset-left, 0px) + 12px), calc(env(safe-area-inset-right, 0px) + 12px));
  --gx: max(var(--g), (100vw - var(--max)) / 2);
  --wrap: min(100% - 2 * var(--g), var(--max));
  --sec-y: clamp(88px, 9.5vw, 168px);
  --nav-h: 68px;
  --seam: clamp(28px, 3.6vw, 72px);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
@media (max-width: 899.98px) { html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font: 400 1.0625rem/1.55 var(--text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.light :focus-visible { outline-color: var(--black); }
main:focus, section:focus { outline: none; }
[hidden] { display: none !important; }
html:not(.js) .nav__toggle, html:not(.js) .pause { display: none; }
.nw { white-space: nowrap; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 15px 18px; background: var(--green); color: var(--black);
  font: 700 .875rem/1 var(--text); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { width: var(--wrap); margin-inline: auto; }

/* ---------- Shared bits ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font: 700 .78125rem/1.2 var(--text);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--white);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green); flex: none; }
.eyebrow--ink { color: var(--black); }
.eyebrow--ink::before { width: 12px; height: 12px; background: var(--green); box-shadow: inset 0 0 0 3px var(--black); }

.display {
  font: 700 var(--fs, clamp(56px, 8.4vw, 150px))/.86 var(--display);
  text-transform: uppercase; letter-spacing: -.01em;
}
.mask { display: block; overflow: clip; padding-top: .06em; margin-top: -.06em; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: block; }
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--h); padding: 0 26px;
  font: 700 .8125rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.btn--green { background: var(--green); color: var(--black); }
.btn--black { background: var(--black); color: var(--white); }
.btn--black .btn__arrow { color: var(--green); }
.btn--sm { --h: 44px; padding: 0 18px; font-size: .75rem; }
.btn--block { display: flex; width: 100%; }
.btn__arrow { flex: none; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .btn--green:hover { background: var(--green-hi); }
  .btn--black:hover { background: #1b1c1b; }
  .btn:hover .btn__arrow { transform: translateX(4px); }
}

.link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px;
  font: 700 .78125rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: rgba(255, 255, 255, .45);
  transition: color .2s, text-decoration-color .2s;
}
@media (hover: hover) { .link:hover { color: var(--green); text-decoration-color: var(--green); } }
.link__ext { flex: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  background: var(--black);
  box-shadow: 0 1px 0 var(--rule);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: 32px; }
.nav__logo {
  display: inline-flex; align-items: center; flex: none;
  margin: 0; padding: 0; min-height: 0;
  line-height: 0; text-decoration: none;
}
.nav__logo img { display: block; height: 64px; width: auto; max-width: none; margin: 0; }
.nav__links { margin-left: auto; display: flex; gap: 28px; }
.nav__links a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font: 600 .75rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: rgba(255, 255, 255, .9);
  transition: color .2s;
}
.nav__links a[aria-current="true"] { color: var(--white); text-decoration: underline 2px var(--green); text-underline-offset: 8px; }
@media (hover: hover) { .nav__links a:hover { color: var(--green); } }
.nav__toggle {
  flex: none;
  width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.nav__bars { display: grid; gap: 7px; width: 22px; }
.nav__bars span { display: block; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__bars span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
@media (min-width: 900px) { .nav__toggle { display: none; } }
@media (max-width: 899.98px) {
  .nav__links { display: none; }
  .nav__bar { gap: 12px; }
  .nav__apply { margin-left: auto; }
}
/* one green Apply on phones: the header chip steps aside while the dock is up */
@media (max-width: 899.98px) and (min-height: 500.02px) {
  .nav__apply { transition: background-color .22s var(--ease), opacity .3s var(--ease), visibility 0s 0s; }
  html.dock-on .nav__apply { opacity: 0; visibility: hidden; transition: background-color .22s var(--ease), opacity .3s var(--ease), visibility 0s .3s; }
}
@media (max-width: 359.98px) {
  .nav__bar { gap: 8px; }
  .nav__apply { padding: 0 12px; letter-spacing: .1em; }
  .nav__toggle { margin-right: -11px; }
  .hank .socials { column-gap: 18px; }
}

.menu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 49;
  background: var(--black);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu__inner { padding: 20px 0 calc(32px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 32px; min-height: 100%; }
.menu__list li { border-bottom: 1px solid var(--rule); }
.menu__list a {
  display: flex; align-items: center; min-height: 44px; padding: 14px 0 10px;
  font: 700 clamp(32px, min(13vw, 10svh), 72px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em;
  text-decoration: none;
}
@media (max-height: 500px) { .menu__inner { gap: 20px; padding-top: 8px; } .menu__list a { padding: 8px 0 6px; } }
@media (min-width: 900px) { .menu { display: none !important; } }

/* ---------- Kinetic word: a two-line green goal whose letters rise in once, like a race clock ---------- */
.kw { font-weight: 700; }
.kw__lead {
  display: block;
  font: 700 min(var(--gw) * .5, var(--colw) / var(--leadk, 7.4))/.9 var(--display);
  text-transform: uppercase; letter-spacing: -.004em;
  color: var(--white);
}
.kw__in { display: block; white-space: nowrap; }
.gw {
  display: block;
  margin-top: calc(var(--gw) * .1);
  font: 700 var(--gw)/.86 var(--display);
  text-transform: uppercase; letter-spacing: -.012em;
  color: var(--green);
  white-space: nowrap;
}
.gw__ln { position: relative; display: block; height: .86em; overflow-x: visible; overflow-y: clip; }
.gw__ln + .gw__ln { margin-top: .02em; --l: .06s; }
.gw__t { position: absolute; left: 0; top: 0; display: flex; }
.gw__t:not(.is-on):not(.is-split) { visibility: hidden; }
/* each letter sits in its own clip box, so it can rise into place like a clock digit */
.ch { display: block; height: .86em; overflow-x: visible; overflow-y: clip; }
.ch > span { display: block; transform: translate3d(0, 100%, 0); }
.gw__t.is-on .ch > span { transform: none; }
.gw__t.is-out .ch > span { transform: translate3d(0, -100%, 0); }

/* ---------- 1 / Hero ---------- */
.hero {
  --colw: calc(100vw - 2 * var(--g));
  --gw: clamp(50px, min(var(--colw) / 3.1, 10.5svh), 230px);
  --tg: 12px;
  position: relative;
  min-height: 100svh;
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(clamp(180px, 30svh, 300px), 1fr) auto;
  background: var(--black);
}
.hero__media { position: relative; grid-row: 1; overflow: clip; background: #1a1a1a; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero__stage {
  position: relative; grid-row: 2;
  width: var(--wrap); margin-inline: auto;
  padding: clamp(14px, 2.2svh, 30px) 0 clamp(18px, 2.8svh, 36px);
  background: var(--black);
}
.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: clamp(4px, 1svh, 14px); }
.pause {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 0; cursor: pointer;
}
.pause:focus-visible { outline-offset: -5px; }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[aria-pressed="true"] .i-pause { display: none; }
@media (hover: hover) { .pause:hover { color: var(--green); border-color: var(--green); } }
.hero__bar {
  margin-top: clamp(14px, 2.2svh, 28px);
  display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap;
}
.hero__sub { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.42; max-width: 31ch; }
@media (max-width: 519.98px) { .hero__bar .btn { width: 100%; } }

/* phones: Hank gets the room */
@media (orientation: portrait) and (max-width: 639.98px) {
  .hero { --gw: clamp(46px, min(var(--colw) / 3.1, 10svh), 230px); grid-template-rows: minmax(clamp(130px, 24svh, 300px), 1fr) auto; }
  .hero__top { margin-bottom: 0; }
  .hero__bar { margin-top: 14px; }
}
@media (orientation: portrait) and (max-height: 600px) {
  .hero__stage { padding-top: 8px; padding-bottom: 14px; }
  .hero__sub { font-size: .9375rem; }
}
/* short phones (SE, small Androids): a smaller word and no subhead, so the photo keeps a real size and Apply stays in view */
@media (orientation: portrait) and (max-width: 639.98px) and (max-height: 700px) {
  .hero { --gw: clamp(42px, min(var(--colw) / 3.1, 9svh), 230px); grid-template-rows: minmax(clamp(200px, 32svh, 300px), 1fr) auto; }
  .hero__sub { display: none; }
  .hero__bar { margin-top: 14px; }
}
@media (orientation: portrait) and (max-width: 639.98px) and (max-height: 600px) {
  .hero { grid-template-rows: minmax(150px, 1fr) auto; }
}
@media (max-width: 359.98px) {
  .hero__eyebrow { letter-spacing: .12em; gap: 10px; }
  .hero__eyebrow::before { width: 20px; }
}
/* tablets in portrait: same stack, the wide crop, a bigger word */
@media (orientation: portrait) and (min-width: 640px) { .hero__media img { object-position: 50% 24%; } }
/* the bigger word waits until 700 wide, where the subhead and Apply still share one row above the fold */
@media (orientation: portrait) and (min-width: 700px) {
  .hero { --gw: clamp(56px, min(var(--colw) / 3.1, 14svh), 230px); --tg: 24px; grid-template-rows: minmax(30svh, 1fr) auto; }
}

/* landscape: the type sits on a solid black slab, bottom left. The Blessing photo is tall, so it fills only the right half. */
@media (orientation: landscape) and (min-width: 560px) {
  .hero {
    --colw: calc(50vw - var(--gx) - var(--seam));
    --gw: clamp(44px, min(var(--colw) / 3.1, (100svh - 360px) / 2.3), 300px);
    --tg: clamp(14px, 1.6vw, 28px);
    grid-template-rows: minmax(0, 1fr);
  }
  .hero__media { grid-area: 1 / 1; margin-left: 50vw; }
  .hero__media img { object-position: 50% 20%; }
  .hero__stage {
    grid-area: 1 / 1; align-self: stretch; justify-self: start;
    display: flex; flex-direction: column; justify-content: flex-end;
    width: 50vw; margin: 0;
    padding: clamp(24px, 4.4svh, 56px) var(--seam) clamp(26px, 5svh, 64px) var(--gx);
  }
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 560px) {
  .hero__stage { padding-top: 10px; padding-bottom: 14px; }
  .hero__top { margin-bottom: 0; }
  .hero__sub { font-size: .9375rem; }
  .hero__bar { margin-top: 6px; gap: 8px 24px; }
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 380px) {
  .hero { --gw: 40px; }
  .hero__stage { padding-top: 6px; padding-bottom: 8px; }
  .hero__bar { margin-top: 4px; }
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 500px) {
  .hero__sub { display: none; }
  .hero__bar { margin-top: 4px; }
}
@media (orientation: landscape) and (min-width: 560px) and (max-width: 799.98px) and (max-height: 500px) {
  .hero__bar .btn { --h: 48px; }
}
@media (orientation: landscape) and (min-width: 800px) and (max-height: 500px) {
  .hero { --gw: clamp(44px, min(var(--colw) / 3.1, (100svh - 270px) / 2), 80px); }
}
@media (orientation: landscape) and (min-width: 560px) and (max-width: 639.98px) {
  .hero__bar .btn { width: 100%; padding-inline: 12px; gap: 10px; letter-spacing: .08em; }
  .hero__eyebrow { letter-spacing: .12em; gap: 10px; }
  .hero__eyebrow::before { width: 20px; }
}
@media (orientation: landscape) and (min-width: 560px) and (max-width: 639.98px) and (max-height: 340px) {
  .hero { --gw: 32px; }
  .hero__stage { padding-top: 2px; padding-bottom: 6px; }
}

/* ---------- 2 / Hank ---------- */
.hank { --max: 1680px; --wrap: min(100% - 2 * var(--g), var(--max)); padding: var(--sec-y) 0; background: var(--black); }
.hank__grid { display: grid; gap: 36px var(--g); }
.hank__photo { aspect-ratio: 3 / 4; background: #151515; overflow: clip; }
.hank__photo img { width: 100%; height: 100%; object-fit: cover; }
.hank__title { --fs: clamp(84px, 12.4vw, 232px); margin: 20px 0 clamp(22px, 2.6vw, 36px); }
.lede { font-size: clamp(1.25rem, 1.7vw, 1.625rem); line-height: 1.34; font-weight: 500; letter-spacing: -.01em; max-width: 25ch; }
.body { margin-top: 18px; color: var(--soft); max-width: 42ch; }
.socials { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--rule); max-width: 42ch; }

/* the proof: three numbers, one row, under the copy */
.pbs { container-type: inline-size; }
.pbs__row {
  display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: auto auto; grid-auto-flow: column;
  justify-content: space-between; column-gap: 16px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule);
}
.pb { display: contents; }
.pb dt { align-self: end; font: 700 .78125rem/1.25 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.pb dd {
  margin-top: clamp(8px, 1.2cqi, 16px);
  font: 700 clamp(48px, 20cqi, 200px)/.86 var(--display);
  letter-spacing: -.01em; white-space: nowrap;
}
@container (max-width: 440px) {
  .pb dd { font-size: clamp(40px, 17cqi, 200px); }
  .pb dt { white-space: nowrap; max-width: none; letter-spacing: .1em; font-size: .6875rem; }
}
.pb small { font-size: max(.2em, 12px); letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-left: .15em; }
.digits { display: inline-block; }
.digits .dg { display: inline-block; overflow-x: visible; overflow-y: clip; vertical-align: top; height: .86em; }
.digits .dg > span { display: block; }

@media (orientation: landscape) and (min-width: 640px), (min-width: 1100px) {
  .hank__grid { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; column-gap: clamp(32px, 6vw, 120px); }
  .hank__photo { width: min(44vw, 75svh, 900px); align-self: start; }
  .hank__copy { display: flex; flex-direction: column; justify-content: center; gap: clamp(56px, 6vw, 112px); }
  .hank__title { --fs: clamp(64px, calc((min(100vw - 2 * var(--g), 1680px) - min(44vw, 75svh, 900px) - clamp(32px, 6vw, 120px)) / 3.8), 220px); }
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 500px) {
  .hank__photo { width: min(40vw, 64svh); }
  .hank__title { --fs: 72px; margin: 12px 0 16px; }
}
@media (orientation: portrait) and (max-width: 1099.98px), (max-width: 639.98px) {
  .hank__grid { gap: 0; }
  .hank__copy, .hank__intro { display: contents; }
  .hank__intro > .eyebrow { order: -2; }
  .hank__title { order: -1; margin: 18px 0 26px; }
  .hank__photo { margin: 0 0 28px; max-width: 620px; }
  .pbs { margin-top: 44px; }
}

/* ---------- 3 / The coaching ---------- */
.coaching { background: var(--stone); color: var(--black); padding: var(--sec-y) 0 calc(var(--sec-y) * .6); }
.coaching__head { display: grid; gap: 28px 40px; align-items: end; margin-bottom: clamp(44px, 5vw, 80px); }
.coaching__title { --fs: clamp(56px, 7.2vw, 136px); margin-top: 20px; }
.coaching__intro .lede { max-width: 26ch; margin-bottom: 26px; }
@media (min-width: 900px) {
  .coaching__head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .coaching__intro { padding-bottom: 10px; }
}
.cols { display: grid; gap: 0 clamp(24px, 3vw, 56px); }
.col { border-top: 2px solid var(--black); padding: 16px 0 clamp(32px, 3.4vw, 52px); }
.col__h { font: 700 clamp(2.25rem, 3.6vw, 4rem)/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin-bottom: clamp(20px, 2.2vw, 32px); }
.inc + .inc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-ink); }
.inc__t { font: 700 clamp(1.25rem, 1.5vw, 1.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
.inc p { color: var(--ink-soft); max-width: 36ch; }
@media (min-width: 640px) and (max-width: 1099.98px) {
  .col__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .inc + .inc { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (min-width: 1100px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 4 / Questions ---------- */
.faq { padding: var(--sec-y) 0 calc(var(--sec-y) * .8); background: var(--black); }
.faq__grid { display: grid; gap: 36px 40px; }
.faq__title { --fs: clamp(58px, 7.4vw, 136px); margin-top: 20px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.faq__list { border-top: 2px solid var(--white); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding: 16px 0;
  font: 700 clamp(1.375rem, 2vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary > span:first-child { text-wrap: balance; }
.qa__icon { position: relative; width: 28px; height: 28px; flex: none; border: 1px solid rgba(255, 255, 255, .45); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; background: var(--white); transition: transform .35s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa p { padding: 0 52px 24px 0; color: var(--soft); max-width: 56ch; }
@media (hover: hover) { .qa summary:hover { color: var(--green); } }

/* ---------- 5 / Closing: the answer to the hero ---------- */
.close {
  --colw: calc(100vw - 2 * var(--g));
  --gw: clamp(50px, min(var(--colw) / 3.1, 11svh), 230px);
  --leadk: 8.2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--black);
  border-top: 1px solid var(--rule);
}
.close__media { background: #151515; aspect-ratio: 4 / 5; overflow: clip; }
.close__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
/* phones show the whole approved frame, so Hank keeps his headroom and his shoes */
@media (max-width: 639.98px) { .close__media { aspect-ratio: 2 / 3; } }
.close__stage { width: var(--wrap); margin-inline: auto; padding: clamp(40px, 6vw, 80px) 0 var(--sec-y); }
.close__title { margin-top: clamp(14px, 1.8svh, 22px); }
.close__sub { font-size: clamp(1rem, 1.2vw, 1.1875rem); color: var(--soft); max-width: 30ch; }
.close__actions { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 519.98px) { .close__actions .btn, .coaching__intro .btn { width: 100%; } }
.steps { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 18px 0 16px; border-bottom: 1px solid var(--rule); }
.step__n { font: 700 1.75rem/1 var(--display); color: var(--soft); }
.step__t { font: 700 1.375rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 3px 0 8px; }
.step p { color: var(--soft); font-size: 1rem; max-width: 44ch; }
@media (orientation: landscape) and (min-width: 640px) {
  .close {
    --photo: min(42vw, 72svh);
    --colw: calc(100vw - var(--photo) - var(--gx) - var(--seam));
    --gw: clamp(48px, min(var(--colw) / 3.1, 15svh), 300px);
    grid-template-columns: var(--photo) minmax(0, 1fr);
  }
  .close__media { position: relative; aspect-ratio: auto; min-height: calc(100svh - var(--nav-h)); }
  .close__media img { position: absolute; inset: 0; height: 100%; }
  .close__stage { width: auto; margin: 0; align-self: center; padding: clamp(36px, 5svh, 72px) var(--gx) clamp(36px, 5svh, 72px) var(--seam); }
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 600px) {
  .close { --photo: min(42vw, (100svh - var(--nav-h)) * 2 / 3); }
  .close__media { position: sticky; top: var(--nav-h); align-self: start; aspect-ratio: 2 / 3; min-height: 0; }
}
@media (min-width: 1100px) and (orientation: landscape) {
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2vw, 40px); }
  .step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; border-bottom: 0; padding-bottom: 0; }
}

/* ---------- Footer: the wordmark ---------- */
.foot { background: var(--black); padding: clamp(56px, 7vw, 120px) 0 calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); }
.foot__mark {
  width: var(--wrap); margin: 0 auto;
  font: 700 calc(min(100vw - 2 * var(--g), var(--max)) / 6.58)/.84 var(--display);
  text-transform: uppercase; letter-spacing: -.012em; white-space: nowrap;
  display: flex; gap: .2em;
}
.foot__mark .mask { display: inline-block; }
.foot__green { color: var(--green); }
@media (max-width: 699.98px) {
  .foot__mark { flex-direction: column; gap: 0; font-size: calc((100vw - 2 * var(--g)) / 3.26); }
}
.foot__bar {
  display: flex; align-items: center; gap: 8px 32px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 56px); padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: .875rem; color: var(--soft);
}
.foot__bar .link { color: var(--white); }
.foot__social { display: flex; gap: 4px 24px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 599.98px) { .foot__social { margin-left: 0; width: 100%; } }

/* ---------- Dock: Apply stays one thumb away on phones ---------- */
.dock { display: none; }
@media (max-width: 899.98px) and (min-height: 500.02px) {
  .js .dock {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--black); box-shadow: 0 -1px 0 var(--rule);
    transform: translateY(110%); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s .4s;
  }
  .js .dock.is-on { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s 0s; }
}

/* ---------- Polish ---------- */
/* key sentences keep their phrases together */
.hank .lede { max-width: 24ch; text-wrap: pretty; }
.coaching__intro .lede { text-wrap: balance; }
/* big condensed caps sit flush with the column edge (Barlow's side bearing is about .04em) */
.gw { margin-left: -.04em; }
.hank__title, .faq__title { margin-left: -.035em; }
.foot__mark .mask:first-child { margin-left: -.04em; }
/* the open phone menu carries its own Apply, so the header chip steps aside */
.nav:has(.nav__toggle[aria-expanded="true"]) .nav__apply { visibility: hidden; }
/* big screens: labels and body grow with the display type */
@media (orientation: landscape) and (min-width: 1800px) { html { font-size: 112.5%; } }
@media (orientation: landscape) and (min-width: 2300px) { html { font-size: 125%; } }

/* ---------- Motion: only with JS and motion allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* hero entrance: the type arrives, the photo is simply there (it is the LCP) */
  .js .hero:not(.is-loaded) [data-in] { opacity: 0; transform: translateY(20px); }
  .js .hero:not(.is-loaded) .kw__in { transform: translateY(105%); }
  .js .hero:not(.is-loaded) .gw__t.is-on .ch > span { transform: translate3d(0, 100%, 0); }
  .js .hero:not(.is-loaded) .gw__t:not(.is-split) { visibility: hidden; }
  .js .hero [data-in] { transition: opacity .8s var(--ease) calc(.1s + var(--i, 0) * 90ms), transform 1s var(--ease) calc(.1s + var(--i, 0) * 90ms); }
  .js .hero .kw__lead { overflow: clip; padding-top: .06em; margin-top: -.06em; }
  .js .hero .kw__in { transition: transform .9s var(--ease); }
  .js .hero .gw__t .ch > span { transition: transform .9s var(--ease) calc(.12s + var(--l, 0s) + var(--c, 0) * 22ms); }
  .js .hero .hero__bar { transition-delay: .3s; }
  /* the rolling goal word: the old word leaves up as the new one rises in */
  .js .gw.is-live .gw__t .ch > span { transition: transform .7s var(--ease-io) calc(var(--l, 0s) + var(--c, 0) * 22ms), opacity .4s ease-in calc(var(--l, 0s) + var(--c, 0) * 22ms); }
  .js .gw.is-live .gw__t.is-out .ch > span { opacity: 0; }
  .js .gw .gw__t.is-next .ch > span { transition: none !important; transform: translate3d(0, 100%, 0); }

  /* reveals */
  .js [data-rise] { transition: opacity .9s var(--ease), transform 1s var(--ease); }
  .js [data-rise]:not(.is-in) { opacity: 0; transform: translateY(26px); }
  .js [data-rise="line"] { transition: transform 1s var(--ease); }
  .js [data-rise="line"]:not(.is-in) { opacity: 1; transform: translateY(106%); }
  .js .mask + .mask > [data-rise="line"] { transition-delay: .07s; }
  .js .mask + .mask + .mask > [data-rise="line"] { transition-delay: .14s; }
  .js [data-rise="photo"] img { transition: transform 1.6s var(--ease); }
  .js [data-rise="photo"]:not(.is-in) { opacity: 1; transform: none; }
  .js [data-rise="photo"]:not(.is-in) img { transform: scale(1.06); }
  .js .col:nth-child(2) { transition-delay: .08s; }
  .js .col:nth-child(3) { transition-delay: .16s; }

  /* close: the goal word rises when the headline itself is on screen */
  .js .close .kw__lead.mask > [data-rise="line"] { transition-delay: 0s; }
  .js .close:not(.is-in) .gw__t.is-on .ch > span { transform: translate3d(0, 100%, 0); }
  .js .close:not(.is-in) .gw__t:not(.is-split) { visibility: hidden; }
  .js .close .gw__t .ch > span { transition: transform .9s var(--ease) calc(.12s + var(--l, 0s) + var(--c, 0) * 22ms); }

  /* personal bests: digits rise into place (never through false times) */
  .js .pb .dg > span { transition: transform 1s var(--ease); transition-delay: calc(.1s + var(--p, 0) * 120ms + var(--c, 0) * 60ms); }
  .js .pbs:not(.is-in) .dg > span { transform: translateY(105%); }
  .js .pb small { transition: opacity .6s .8s; }
  .js .pbs:not(.is-in) .pb small { opacity: 0; }

  .js .foot__mark .mask + .mask > [data-rise="line"] { transition-delay: .08s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}