/* Chalk - strength coach theme. All colours and fonts live here in :root. */
:root {
  --blue: #1aa0c8;      /* hero and blue sections */
  --white: #ffffff;     /* the word on blue */
  --light: #f6f4ef;     /* light sections */
  --dark: #0d1b24;      /* text on light */
  --accent: #ff5a1f;    /* buttons */
  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-text: 'Albert Sans', system-ui, sans-serif;
  --gut: clamp(16px, 3vw, 44px);
  --max: 1680px;
  --word-h: 20vw;
  --ease: cubic-bezier(.2, .8, .1, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--light); color: var(--dark); font: 17px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--dark); color: var(--white); }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.label { font: 600 12px/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; }
.h { font: 400 clamp(48px, 7vw, 120px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }

/* tones: every section says which background it has, text colour follows */
[data-tone] { --bg: var(--light); --ink: var(--dark); background: var(--bg); color: var(--ink); }
[data-tone="blue"], [data-tone="hero"] { --bg: var(--blue); --ink: var(--white); }
[data-tone="ink"] { --bg: var(--dark); --ink: var(--light); }

/* ---------- EMBOSS: every heading rises out of its own background like a blind print ----------
   First only the relief shows (same colour as the background, light top left, shadow bottom right), it grows as if
   pressed up from below, then the face takes the text colour and the relief settles. No movement, no fade. */
@property --d { syntax: '<number>'; inherits: true; initial-value: 0; }
/* the soft relief belongs to every text bigger than a paragraph: titles, numbers, logo, menu */
.logo, .menu nav a, .article-body h2, .card-num, .facts dd, .post-title, .step-title, .h { --d: .12; }
[data-emboss], .copy span, .apply-word span, .logo, .menu nav a, .article-body h2 {
  text-shadow: calc(-.012em * var(--d)) calc(-.012em * var(--d)) calc(.006em * var(--d)) rgb(255 255 255 / .5),
               calc(.018em * var(--d)) calc(.024em * var(--d)) calc(.03em * var(--d)) rgb(0 30 50 / .38);
}
.js [data-emboss] { color: var(--bg); --d: 0; }
.js [data-emboss].in { animation: emboss 1.9s cubic-bezier(.45, 0, .2, 1) both; animation-delay: var(--i, 0ms); }
.js [data-emboss].done { animation: none; color: var(--ink); --d: .12; }
@keyframes emboss {
  0% { --d: 0; color: var(--bg); }
  50% { --d: 1; color: var(--bg); }
  100% { --d: .12; color: var(--ink); }
}
[data-emboss]:not(.in) { --d: .12; }
.js [data-emboss]:not(.in) { --d: 0; }

/* body text, photos and cards: a clean wipe from the top edge down (clip, not fade) */
.js [data-wipe] { visibility: hidden; }
.js [data-wipe].in { visibility: visible; animation: wipe 1s var(--ease) both; animation-delay: var(--i, 0ms); }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- BUTTONS ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; font: 600 15px/1 var(--f-text); text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate; }
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
/* hover = the same rising edge as the hero: a panel climbs from the bottom and recolours what it covers */
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--dark); clip-path: inset(100% 0 0 0); transition: clip-path .45s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn.cta, .btn-solid { background: var(--accent); color: var(--white); }
.btn-solid:hover, .btn.cta:hover { color: var(--white); }
.btn-line { border: 1.5px solid currentColor; padding: 13px 19px; }
.btn-line:hover { color: var(--bg); }
.btn-line::before { background: var(--ink); }

/* ---------- HEADER ---------- */
.head { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; gap: 28px; padding: 18px var(--gut);
  font-size: 14px; font-weight: 500; color: var(--white); background: transparent; transition: background-color .3s, color .3s; }
.head[data-on="light"] { background: var(--light); color: var(--dark); }
.head[data-on="blue"] { background: var(--blue); color: var(--white); }
.head[data-on="ink"] { background: var(--dark); color: var(--light); }
.head > * { will-change: transform; }
.head a { text-decoration: none; }
.logo { font: 400 24px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; margin-right: 10px; }
.nav { display: flex; gap: 26px; }
.nav a { position: relative; padding: 4px 0; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.spots { margin-left: auto; font-size: 13px; font-weight: 600; animation: spots 1.8s ease-in-out infinite; }
.spots:empty { display: none; }   /* empty "spots" in site.json = no notice */
.spots:empty + .cta { margin-left: auto; }
/* the open places notice pulses in the button orange (only the colour, it never disappears) */
@keyframes spots { 50% { color: var(--accent); } }
.menu-btn { display: none; margin-left: auto; padding: 10px 0; border: 0; background: none; color: inherit; font: 600 14px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
/* on Home every header item starts below the screen and flies in with the scroll (main.js) */
.js .home .head > * { transform: translateY(120vh); }

.menu { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 90px var(--gut) 40px;
  background: var(--blue); color: var(--white); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); }
.menu.open { clip-path: inset(0 0 0 0); }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 400 clamp(54px, 15vw, 120px)/.95 var(--f-display); text-transform: uppercase; text-decoration: none; }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; }
.menu-open .head { background: var(--blue); color: var(--white); }

/* ---------- HERO: the word ---------- */
.stage { position: relative; height: 170svh; }
.stage-short { height: 125svh; }
.hint { position: absolute; left: 50%; top: calc(100svh - 92px); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
  font: 600 11px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--white); }
.hint i { display: block; width: 1px; height: 36px; background: currentColor; transform-origin: top; animation: drip 1.6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* fixed layers: blue part of the word (under the content) < back photos < white part < front photos < header */
.layer { position: fixed; inset: 0; pointer-events: none; }
.wb { z-index: 1; } .photos-back { z-index: 2; } .wa { z-index: 3; } .photos-front { z-index: 4; }
.layer.off { visibility: hidden; }
.ph { position: absolute; top: 0; will-change: transform; transform: translateY(200vh); }
.ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.word { bottom: auto; height: var(--word-h); will-change: transform; }
.copy { position: absolute; inset: 0; padding: 0 1vw; overflow: hidden; white-space: nowrap; display: flex; align-items: center; justify-content: center;
  font: 400 100px/1 var(--f-display); text-transform: uppercase; }
.copy .w { display: inline-block; font: inherit; }
.copy span { display: inline-block; }
.copy.a { color: var(--white); clip-path: inset(0 0 100% 0); }
.copy.b { color: var(--blue); clip-path: inset(100% 0 0 0); }
.copy.b span { --d: .12; }
.js .copy.a span { color: var(--blue); --d: 0; }
.copy.a.in span { animation: emboss-w 2.4s cubic-bezier(.45, 0, .2, 1) both; animation-delay: var(--i); }
@keyframes emboss-w { 0% { --d: 0; color: var(--blue); } 50% { --d: 1; color: var(--blue); } 100% { --d: .12; color: var(--white); } }

/* ---------- SECTIONS ---------- */
.sec { position: relative; padding: clamp(80px, 10vw, 160px) 0; }
.sec > .wrap > * { position: relative; z-index: 2; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 6vw, 90px); }
.sec-text { max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); }

/* programmes: rises over the hero; the blue half of the word sits between its background and its content */
.prog { padding-top: clamp(120px, 12vw, 200px); }
.prog .lead, .cover .lead { max-width: 30ch; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.25; margin-bottom: clamp(60px, 9vw, 140px); }
.prog .label { margin-bottom: 18px; }
.rows { border-top: 1.5px solid var(--dark); }
.row { position: relative; display: grid; grid-template-columns: 70px 1fr 200px 160px 30px; align-items: stretch; gap: 20px;
  min-height: clamp(90px, 9vw, 140px); padding: 0 12px; border-bottom: 1.5px solid var(--dark); text-decoration: none; isolation: isolate; }
.row > * { align-self: center; }
.row-num, .row-where, .row-len { font-size: 13px; }
.nm { position: relative; align-self: stretch; display: flex; align-items: center; font: 400 clamp(40px, 5vw, 84px)/1 var(--f-display); text-transform: uppercase; }
/* hover: the name is pressed further up out of the page, it grows and its relief deepens (same light as the emboss) */
.nm-base { display: inline-block; transform-origin: 0 55%; transition: transform .9s var(--ease), --d .9s var(--ease), color .5s; }
.js .row:hover .nm-base.done, .js .row:focus-visible .nm-base.done, html:not(.js) .row:hover .nm-base { transform: scale(1.16); --d: .85; color: var(--accent); }
.row-num, .row-where, .row-len { transition: transform .9s var(--ease), color .5s; }
.row:hover .row-num, .row:hover .row-where, .row:hover .row-len, .row:hover .row-arrow { color: var(--accent); }
.row-where, .row-len { display: inline-block; justify-self: start; transform-origin: 0 50%; white-space: nowrap;
  font-size: 15px; font-weight: 500;
  text-shadow: 0 0 1px var(--light), 0 0 2px var(--light), 0 0 4px var(--light), 0 0 6px var(--light); }   /* thin glow in the paper colour, so it reads over the word */
.row:hover .row-where, .row:hover .row-len, .row:focus-visible .row-where, .row:focus-visible .row-len { transform: scale(1.6); }
.row-arrow { justify-self: end; transition: transform .9s var(--ease), color .5s; }
.row:hover .row-arrow { transform: translateX(10px); }
/* entry: the rule under each row draws from the left */
.js .row { border-bottom-color: transparent; }
.row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px; background: var(--dark); transform: scaleX(0); transform-origin: left; }
.js .row.in::after { transform: scaleX(1); transition: transform 1.1s var(--ease); transition-delay: var(--i, 0ms); }
html:not(.js) .row::after { display: none; }

/* results */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 26px); margin-bottom: clamp(40px, 5vw, 70px); }
.card-ph { overflow: hidden; margin-bottom: 18px; }
.card-ph img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; transition: transform 1s var(--ease); }
.card:hover .card-ph img { transform: scale(1.04); }
.card-num { font: 400 clamp(64px, 7vw, 120px)/.85 var(--f-display); display: flex; align-items: baseline; gap: 2px; }
.card-num small { font-size: .38em; margin-left: 4px; }
.card-what { font: 600 17px/1.3 var(--f-text); margin: 12px 0 4px; }
.card-meta { font-size: 13px; opacity: .85; }

/* steps */
.steps-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 6vw, 110px); }
.steps-side .h { margin-bottom: 40px; }
.steps-ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.step-list { border-top: 1.5px solid var(--dark); align-self: start; }
.step { display: grid; grid-template-columns: 70px 1fr; column-gap: 20px; padding: 30px 0 34px; border-bottom: 1.5px solid var(--dark); }
.step-num { font-size: 13px; padding-top: 10px; grid-row: span 2; }
.step-title { font: 400 clamp(36px, 3.6vw, 60px)/1 var(--f-display); text-transform: uppercase; margin-bottom: 10px; }
.step p { max-width: 48ch; }

/* coach */
.coach { padding-top: 0; }
.coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 110px); align-items: center; }
.coach-ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.coach-name { margin: 16px 0 24px; }
.coach-text { max-width: 44ch; font-size: clamp(17px, 1.3vw, 20px); margin-bottom: 36px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--dark); margin-bottom: 40px; }
.facts div { padding: 18px 16px 0 0; }
.facts dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.facts dd { font: 400 clamp(30px, 2.8vw, 46px)/1 var(--f-display); }

/* quotes */
.quotes { padding-top: 0; }
.quotes .label { margin-bottom: 30px; }
.quote-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 50px); border-top: 1.5px solid var(--dark); padding-top: 34px; }
.quote p { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.35; margin-bottom: 20px; }
.quote footer { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* apply: the big word comes first and stays (sticky) as a blind emboss in the section's own blue, then the text scrolls up
   over it and stops in the middle of the screen. The relief is as soft as the hero word's. */
.apply { padding: 0; }
.apply-pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.apply-word { font: 400 100px/1 var(--f-display); text-transform: uppercase; white-space: nowrap; text-align: center; margin: 0; pointer-events: none; color: var(--bg); }
.apply-word .w { display: inline-block; }
/* entrance = the hero word's, one step longer: letter by letter the relief rises, the face turns white,
   then it presses back into the surface and only the soft blue relief stays, ready for the text on top */
.apply-word span { display: inline-block; color: var(--bg); --d: .2; }
.js .apply-word.in { animation: none; }
.js .apply-word span { --d: 0; }
.js .apply-word.in span { animation: emboss-back 3.8s cubic-bezier(.45, 0, .2, 1) both; animation-delay: var(--i); }
@keyframes emboss-back {
  0% { --d: 0; color: var(--blue); }
  32% { --d: 1; color: var(--blue); }
  55% { --d: .12; color: var(--white); }
  72% { --d: .12; color: var(--white); }
  100% { --d: .2; color: var(--blue); }
}
.sec > .apply-stack { position: relative; z-index: 2; min-height: 100svh; display: grid; place-items: center; }
.apply-body { text-align: center; display: grid; justify-items: center; gap: 24px; padding: 100px 0 60px; max-width: 760px; }
.apply-title { font-size: clamp(56px, 8vw, 140px); }
.apply-body .sec-text { max-width: 40ch; }
.apply-actions { display: grid; justify-items: center; gap: 18px; }
.apply-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 15px; }
.apply-contact a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- FOOTER ---------- */
.foot { padding: clamp(70px, 8vw, 120px) var(--gut) 30px; border-top: 1.5px solid var(--dark); }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 50px; }
.foot-name { font: 400 clamp(56px, 9vw, 150px)/.9 var(--f-display); text-transform: uppercase; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 30px 0; border-top: 1.5px solid currentColor; }
.foot-cols .label { margin-bottom: 10px; opacity: .7; }
.foot-links a { margin-right: 14px; }
.foot-cols a, .foot-base a { text-decoration: none; }
.foot-cols a:hover, .foot-base a:hover { text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; gap: 20px; padding: 24px 70px 0 0; font-size: 13px; border-top: 1.5px solid currentColor; }   /* room for the back-to-top button */

.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 18; display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--accent); color: var(--white); transform: translateY(90px); transition: transform .45s var(--ease); }
.to-top.show { transform: none; }

/* ---------- INNER PAGES ---------- */
.cover { padding-top: clamp(120px, 12vw, 200px); }
.cover[data-cover="carry"] { padding-top: calc(var(--word-h) + clamp(40px, 5vw, 80px)); }
.cover-lost { min-height: 70svh; }
.cover-lost .lead { margin-bottom: 40px; }

/* coaching: one block per programme */
.plans { display: grid; gap: clamp(70px, 9vw, 150px); }
.plan { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 90px); align-items: start; scroll-margin-top: 90px; }
.plan:nth-child(even) .plan-ph { order: 2; }
.plan-ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.plan-num { font-size: 13px; margin-bottom: 10px; }
.plan-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 18px 0 22px; font-weight: 500; }
.plan-meta span:last-child { color: var(--accent); }
.plan-text { max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); margin-bottom: 26px; }
.ticks { list-style: none; padding: 0; margin: 0 0 34px; border-top: 1.5px solid var(--dark); }
.ticks li { position: relative; padding: 13px 0 13px 28px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 50%; width: 12px; height: 6px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); }
.ticks li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px; background: var(--dark); }
.js .ticks li::after { transform: scaleX(0); transform-origin: left; }
.js .ticks li.in::after { transform: scaleX(1); transition: transform 1.1s var(--ease); transition-delay: var(--i, 0ms); }
.ticks-big li { font-size: clamp(18px, 1.5vw, 22px); padding-top: 18px; padding-bottom: 18px; }

/* coaching: questions */
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 90px); }
.faq { border-top: 1.5px solid var(--dark); }
.faq-item { position: relative; }
.faq-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--dark); }
.js .faq-item::after { transform: scaleX(0); transform-origin: left; }
.js .faq-item.in::after { transform: scaleX(1); transition: transform 1.1s var(--ease); transition-delay: var(--i, 0ms); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; transition: color .4s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary i { position: relative; flex: none; width: 18px; height: 18px; }
.faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform .5s var(--ease); }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item p { max-width: 58ch; padding: 0 0 26px; }
.faq-item[open] p { animation: wipe .7s var(--ease) both; }

/* results page: three across, on paper */
.cards-3 { grid-template-columns: repeat(3, 1fr); row-gap: clamp(40px, 5vw, 70px); }

/* about */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 110px); align-items: start; }
.story-ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.story-body .coach-name { margin-top: 0; }
.story-p { max-width: 46ch; font-size: clamp(17px, 1.3vw, 20px); margin-bottom: 20px; }
.story-body .facts { margin-top: 30px; }
.values-sec, .certs-sec, .gallery-sec, .faq-sec { padding-top: 0; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 50px); margin-top: 40px; border-top: 1.5px solid var(--dark); }
.value { padding-top: 26px; }
.value .step-num { display: block; margin-bottom: 14px; padding: 0; }
.certs-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.certs-ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.certs-grid .label { margin-bottom: 18px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 22px); margin-top: 40px; }
.gallery img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* journal */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); }
.post-card { text-decoration: none; display: block; }
.post-ph { overflow: hidden; margin-bottom: 18px; }
.post-ph img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform 1s var(--ease); }
.post-card:hover .post-ph img { transform: scale(1.04); }
.post-meta { font-size: 13px; letter-spacing: .06em; margin-bottom: 10px; }
.post-title { font: 400 clamp(32px, 2.8vw, 46px)/1 var(--f-display); text-transform: uppercase; margin-bottom: 12px; transform-origin: 0 50%; transition: transform .9s var(--ease), color .5s; }
.post-card:hover .post-title { color: var(--accent); transform: scale(1.06); }
.post-excerpt { max-width: 40ch; }

/* article */
.article { padding-top: clamp(130px, 13vw, 200px); }
.back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px; font-size: 14px; font-weight: 500; text-decoration: none; }
.back:hover { color: var(--accent); }
.article-title { max-width: 16ch; margin-bottom: 26px; }
.article-lead { margin-bottom: clamp(40px, 5vw, 70px); }
.article-ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body { max-width: 680px; margin: clamp(50px, 6vw, 90px) auto; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; }
.article-body p { margin-bottom: 22px; }
.article-body h2 { font: 400 clamp(32px, 3vw, 46px)/1 var(--f-display); text-transform: uppercase; margin: 44px 0 16px; }
.next-post { display: block; padding: 34px 0; border-top: 1.5px solid var(--dark); text-decoration: none; }
.next-title { display: block; margin-top: 12px; font: 400 clamp(40px, 5vw, 84px)/1 var(--f-display); text-transform: uppercase; transform-origin: 0 50%; transition: transform .9s var(--ease), color .5s, --d .9s var(--ease); }
.js .next-post:hover .next-title.done, html:not(.js) .next-post:hover .next-title { transform: scale(1.04); --d: .85; color: var(--accent); }

/* apply page: the form */
.apply-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(30px, 6vw, 110px); align-items: start; }
.form { display: grid; gap: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.field { display: grid; gap: 8px; }
.field label, .chips legend { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.field small { font-weight: 400; letter-spacing: 0; text-transform: none; }
.field input, .field textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1.5px solid var(--dark); border-radius: 0; background: transparent;
  color: var(--dark); font: 400 clamp(18px, 1.5vw, 22px)/1.4 var(--f-text); resize: vertical; outline: none; transition: border-color .3s; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.err { display: none; font-size: 13px; color: var(--accent); }
.field.bad .err { display: block; }
.field.bad input { border-bottom-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.chips legend { margin-bottom: 14px; padding: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: block; padding: 10px 16px; border: 1.5px solid var(--dark); font-size: 15px; font-weight: 500; transition: background-color .3s, color .3s, border-color .3s; }
.chip:hover span { border-color: var(--accent); color: var(--accent); }
.chip input:checked + span { background: var(--dark); border-color: var(--dark); color: var(--light); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form .btn { justify-self: start; border: 0; cursor: pointer; }
.form-sent { display: grid; gap: 18px; align-content: start; }
.form-sent[hidden] { display: none; }
.next .label { margin-bottom: 18px; }
.next .step { grid-template-columns: 50px 1fr; padding: 20px 0; }
.next .step-num { padding-top: 2px; grid-row: auto; }
.next-contact { margin-top: 30px; line-height: 1.8; }
.next-contact a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 1100px) {
  .spots { display: none; }
  .cta { margin-left: auto; }
  .row { grid-template-columns: 50px 1fr 150px 26px; }
  .row-len { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav, .cta { display: none; }
  .menu-btn { display: block; }
  .sec-head, .steps-grid, .coach-grid, .quote-list, .foot-cols, .plan, .faq-grid, .story, .values, .certs-grid, .posts, .apply-grid, .field-row { grid-template-columns: 1fr; }
  .plan:nth-child(even) .plan-ph { order: 0; }
  .cards-3, .gallery { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 34px 1fr 24px; gap: 12px; padding: 0 4px; }
  .row-where { display: none; }
  .facts { grid-template-columns: 1fr 1fr 1fr; }
  .facts dd { font-size: 26px; }
  .foot-base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-emboss], .js .copy.a span { animation: none !important; color: var(--ink) !important; --d: .12; }
  .js .apply-word span { animation: none !important; color: var(--bg) !important; --d: .2; }
  .js .copy.a span { color: var(--white) !important; }
  .js [data-wipe] { visibility: visible; animation: none !important; }
  .js .home .head > * { transform: none; }
  .hint i { animation: none; }
  .spots { animation: none; color: var(--accent); }
}