/* ARQ 360° QB Training · website design system
   ARQ Intelligence's language on paper: Anton for display, Inter Tight for reading, Spline Sans Mono for labels,
   square corners, hairline rules, black-and-white photography, no accent colour. */

:root {
  --paper: #f2efe8; --paper-2: #e8e4da; --card: #f8f6f1;
  --ink: #0f1011; --ink-2: #2b2c30; --muted: #66625a; --rule: #d3cec2; --rule-2: #b9b3a6;
  --black: #0b0b0c; --black-2: #151517; --on-black: #f2efe8; --on-black-2: #cbc8bf; --on-black-muted: #8e8b83; --black-rule: #2a2a2e;
  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, Menlo, Consolas, monospace;
  --side-l: max(20px, env(safe-area-inset-left, 0px));
  --side-r: max(20px, env(safe-area-inset-right, 0px));
  --max: 1360px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (min-width: 900px) {
  :root { --side-l: max(48px, env(safe-area-inset-left, 0px)); --side-r: max(48px, env(safe-area-inset-right, 0px)); }
}

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
img, svg { display: block; max-width: 100% }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px }
p { margin: 0 }
h1, h2, h3, h4 { margin: 0; font-weight: 400 }
::selection { background: var(--ink); color: var(--paper) }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--side-l); padding-right: var(--side-r) }

/* ---------- type ---------- */
.label { display: inline-flex; align-items: baseline; gap: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted) }
.label i { font-style: normal; color: var(--ink) }
.dark .label, .label.on-dark { color: var(--on-black-muted) }
.dark .label i, .label.on-dark i { color: var(--on-black) }
.d-xxl, .d-xl, .d-l, .d-m { font-family: var(--display); text-transform: uppercase; letter-spacing: .004em; text-wrap: balance }
.d-xxl { font-size: clamp(60px, 10.4vw, 160px); line-height: .9 }
.d-xl { font-size: clamp(50px, 7.6vw, 116px); line-height: .9 }
.d-l { font-size: clamp(40px, 5.2vw, 76px); line-height: .9 }
.d-m { font-size: clamp(28px, 3vw, 40px); line-height: .95 }
.lead { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 46ch }
.dark .lead { color: var(--on-black-2) }
.statement { font: 500 clamp(28px, 3.3vw, 48px)/1.12 var(--sans); letter-spacing: -.018em; max-width: 24ch; text-wrap: balance }
.statement em { font-style: normal; color: var(--muted) }
.small { font-size: 14.5px; line-height: 1.55; color: var(--muted) }
.mono { font: 500 11.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 54px; padding: 0 22px; font: 500 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease) }
.btn::after { content: "→"; font-family: var(--sans); font-size: 15px; letter-spacing: 0; transition: transform .25s var(--ease) }
.btn:hover::after { transform: translateX(4px) }
.btn:hover { background: var(--ink-2) }
.btn.line { background: transparent; color: var(--ink) }
.btn.line:hover { background: var(--ink); color: var(--paper) }
.btn.light { background: var(--on-black); border-color: var(--on-black); color: var(--black) }
.btn.light:hover { background: #fff }
.btn.light-line { background: transparent; border-color: rgba(242, 239, 232, .45); color: var(--on-black) }
.btn.light-line:hover { border-color: var(--on-black); background: rgba(242, 239, 232, .08) }
.acts { display: flex; flex-wrap: wrap; gap: 12px }
.more { display: inline-flex; align-items: center; gap: 12px; font: 500 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid currentColor }
.more::after { content: "→"; font-family: var(--sans); font-size: 14px; letter-spacing: 0; transition: transform .25s var(--ease) }
.more:hover::after { transform: translateX(4px) }
.ext::after { content: "↗"; font-family: var(--sans); font-size: 13px; margin-left: 6px; letter-spacing: 0 }

/* ---------- draft note (review only; removed before the site goes live) ---------- */
.draft { background: #000; color: #b8b5ad; text-align: center; font: 500 9.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 6px var(--side-r) 6px var(--side-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.draft b { color: #f2efe8; font-weight: 500 }

/* ---------- header ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(242, 239, 232, .94); border-bottom: 1px solid var(--rule); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease) }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px }
.brand { display: block; line-height: 0 }
.brand img { height: 27px; width: auto }
.brand .on-dark { display: none }
.links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px) }
.links a { font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease) }
.links a:hover { border-color: currentColor }
.links a[aria-current="page"] { color: var(--ink); border-color: var(--ink) }
.links .apply { border: 1px solid var(--ink); padding: 12px 16px; color: var(--ink) }
.links .apply:hover { background: var(--ink); color: var(--paper) }
.menu-btn { display: none; align-items: center; gap: 10px; background: none; border: 1px solid var(--ink); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: 12px 14px; cursor: pointer }
.menu-btn span { display: grid; gap: 4px }
.menu-btn span i { display: block; width: 16px; height: 1px; background: currentColor }
/* over the home photo: clear header, light type, until the page scrolls */
.nav.over { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--on-black) }
.nav.over .brand .on-dark { display: block } .nav.over .brand .on-light { display: none }
.nav.over .links a { color: var(--on-black-2) }
.nav.over .links a:hover, .nav.over .links a[aria-current="page"] { color: var(--on-black) }
.nav.over .links .apply { border-color: rgba(242, 239, 232, .55); color: var(--on-black) }
.nav.over .links .apply:hover { background: var(--on-black); color: var(--black) }
.nav.over .menu-btn { border-color: rgba(242, 239, 232, .55); color: var(--on-black) }
.nav.over.scrolled { background: rgba(242, 239, 232, .94); border-color: var(--rule); color: var(--ink); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px) }
.nav.over.scrolled .brand .on-dark { display: none } .nav.over.scrolled .brand .on-light { display: block }
.nav.over.scrolled .links a { color: var(--ink-2) } .nav.over.scrolled .links a[aria-current="page"] { color: var(--ink) }
.nav.over.scrolled .links .apply, .nav.over.scrolled .menu-btn { border-color: var(--ink); color: var(--ink) }
@media (max-width: 980px) { .links { display: none } .menu-btn { display: inline-flex } .brand img { height: 24px } .nav .wrap { height: 64px } }

/* the phone menu */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--black); color: var(--on-black); display: grid; grid-template-rows: auto 1fr auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--side-r) calc(env(safe-area-inset-bottom, 0px) + 28px) var(--side-l); overflow-y: auto }
.sheet .top { display: flex; align-items: center; justify-content: space-between; height: 50px }
.sheet .top img { height: 24px; width: auto }
.sheet .close { background: none; border: 1px solid rgba(242, 239, 232, .45); color: var(--on-black); font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: 12px 14px; cursor: pointer }
.sheet nav { display: grid; align-content: center; padding: 32px 0 }
.sheet nav a { display: flex; justify-content: space-between; align-items: baseline; font: 400 clamp(44px, 12vw, 72px)/1 var(--display); text-transform: uppercase; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--black-rule) }
.sheet nav a small { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--on-black-muted) }
.sheet .sfoot { display: grid; gap: 6px; font: 500 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-black-muted) }
.sheet .sfoot a { text-decoration: none; color: var(--on-black-2) }

/* ---------- photographs: one black-and-white treatment with fine grain ---------- */
.ph { position: relative; overflow: hidden; background: var(--black) }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.9); transform: scale(1.01); transition: transform 1.2s var(--ease) }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
a.ph { display: block }
a.ph:hover img, .ph.zoom:hover img { transform: scale(1.04) }
.cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.dark .cap { color: var(--on-black-muted) }

/* ---------- home hero: the photograph on the right, the headline on black at the left ---------- */
.hero { position: relative; min-height: max(700px, 100svh); display: grid; align-items: end; background: var(--black); color: var(--on-black); overflow: hidden }
.hero .ph { position: absolute; top: 0; bottom: 0; right: 0; width: 62% }
.hero .ph img { object-position: 50% 34%; filter: grayscale(1) contrast(1.16) brightness(.8); animation: drift 22s var(--ease) both }
.hero .ph::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--black) 0%, rgba(11, 11, 12, .62) 20%, rgba(11, 11, 12, 0) 46%), linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 22%, rgba(11, 11, 12, 0) 66%, rgba(11, 11, 12, .82) 100%) }
@keyframes drift { from { transform: scale(1.09) } to { transform: scale(1.01) } }
@media (prefers-reduced-motion: reduce) { .hero .ph img { animation: none } }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 160px }
.hero .label { color: var(--on-black-2) }
.hero h1 { margin-top: 24px; max-width: 9.6ch; font-size: clamp(60px, 9.4vw, 156px) }
.hero .lead { margin-top: 28px; color: #dcd9d1; max-width: 36ch }
.hero .acts { margin-top: 36px }
.fixture { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 18px; margin-top: 72px; padding: 20px 0 26px; border-top: 1px solid rgba(242, 239, 232, .22); font: 500 10.5px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--on-black-2) }
.fixture b { color: var(--on-black); font-weight: 500 }
@media (max-width: 899px) {
  .hero { display: block; min-height: 0 }
  .hero .ph { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 74svh }
  .hero .ph::before { background: linear-gradient(180deg, rgba(11, 11, 12, .6) 0%, rgba(11, 11, 12, 0) 24%, rgba(11, 11, 12, 0) 58%, var(--black) 100%) }
  .hero .wrap { padding-top: 0; margin-top: -96px }
  .fixture { grid-template-columns: 1fr 1fr; justify-content: stretch; margin-top: 48px }
}

/* ---------- page heroes (inner pages) ---------- */
.page-hero { padding: clamp(72px, 10vw, 140px) 0 clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--rule) }
.page-hero .grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: 48px; align-items: end }
.page-hero .grid > * { min-width: 0 }
.page-hero h1 { margin-top: 22px; font-size: clamp(56px, 8.4vw, 128px) }
.page-hero .lead { justify-self: end }
@media (max-width: 860px) { .page-hero .grid { grid-template-columns: 1fr; gap: 26px } .page-hero .lead { justify-self: start } }
.page-photo { aspect-ratio: 21 / 9; max-height: 640px; width: 100% }
@media (max-width: 760px) { .page-photo { aspect-ratio: 4 / 5; max-height: none } }

/* ---------- sections ---------- */
.sec { padding: clamp(60px, 11vw, 160px) 0 }
.sec.tight { padding: clamp(64px, 8vw, 112px) 0 }
.rule-top { border-top: 1px solid var(--rule) }
.dark { background: var(--black); color: var(--on-black) }
.dark .rule-top, .dark.rule-top { border-color: var(--black-rule) }
.dark + .dark { border-top: 1px solid var(--black-rule) }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 5.4vw, 80px) }
.head .label { grid-column: 1 / -1 }
.head .lead { justify-self: end }
@media (max-width: 860px) { .head { grid-template-columns: 1fr } .head .lead { justify-self: start } }

/* ---------- proof band ---------- */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule) }
.proof > div { padding: clamp(28px, 3.2vw, 48px) clamp(18px, 2.2vw, 32px) clamp(30px, 3.4vw, 52px); border-left: 1px solid var(--rule); display: grid; gap: 16px; align-content: start }
.proof > div:first-child { border-left: 0; padding-left: 0 }
.proof b { font: 400 clamp(46px, 5vw, 76px)/.9 var(--display); letter-spacing: .005em; white-space: nowrap }
.proof span { font: 500 11px/1.55 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); max-width: 24ch }
.proof small { font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rule-2) }
.dark .proof, .proof.on-dark { border-color: var(--black-rule) } .dark .proof > div { border-color: var(--black-rule) } .dark .proof span { color: var(--on-black-muted) }
@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr 1fr }
  .proof > div:nth-child(3) { border-left: 0; padding-left: 0 }
  .proof > div:nth-child(n+3) { border-top: 1px solid var(--rule) }
  .proof > div:nth-child(2), .proof > div:nth-child(4) { padding-right: 0 }
}

/* ---------- intro statement ---------- */
.intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 48px }
.intro .side { display: grid; gap: 22px; align-content: start }
.intro .side .ph { aspect-ratio: 4 / 5; width: min(100%, 300px) }
.intro .body { display: grid; gap: 40px }
.intro .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 760px }
.intro .cols p { color: var(--ink-2) }
@media (max-width: 860px) { .intro { grid-template-columns: 1fr } .intro .cols { grid-template-columns: 1fr } .intro .side .ph { display: none } }

/* ---------- the ARQ path ---------- */
.path svg { width: 100%; height: auto; overflow: visible }
.path .arc { fill: none; stroke: var(--ink) }
.path .drop { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke }
.path .node { fill: none; stroke: var(--ink); stroke-width: 2.2 }
.path .num { font: 500 13px var(--mono); letter-spacing: .12em; fill: var(--ink) }
.path .narrow .num { font-size: 11px }
/* the arcs draw themselves in when the section arrives; the stages follow in order */
.js .path .arc { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) }
.js .path.in .arc { stroke-dashoffset: 0 }
.js .path .node, .js .path .num, .js .path .drop { opacity: 0; transition: opacity .7s var(--ease) }
.js .path.in .node, .js .path.in .num, .js .path.in .drop { opacity: 1 }
.js .path .s1 > * { transition-delay: .5s } .js .path .s2 > * { transition-delay: .85s } .js .path .s3 > * { transition-delay: 1.2s } .js .path .s4 > * { transition-delay: 1.55s }
.path .narrow { display: none }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 }
.stages li { position: relative; padding: 26px 24px 0 calc(4% + 16px) }
.stages li::before { content: ""; position: absolute; left: 4%; top: 0; height: 22px; width: 1px; background: var(--rule-2) }
.stages .no { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--muted) }
.stages h3 { font: 600 15px/1.3 var(--sans); letter-spacing: .01em; text-transform: uppercase; margin-top: 12px }
.stages .fig { display: block; font: 400 clamp(36px, 3.6vw, 54px)/.9 var(--display); text-transform: uppercase; margin-top: 18px }
.stages p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 14px; max-width: 30ch }
@media (max-width: 860px) {
  .path .wide { display: none } .path .narrow { display: block }
  .stages { grid-template-columns: 1fr; margin-top: 18px }
  .stages li { padding: 22px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 44px 1fr; column-gap: 12px }
  .stages li::before { display: none }
  .stages li > * { grid-column: 2 } .stages .no { grid-column: 1; grid-row: 1 / span 4; padding-top: 3px }
  .stages h3 { margin-top: 0 }
}

/* ---------- photo + list split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start }
.split .ph { aspect-ratio: 4 / 5 }
.split.flip > :first-child { order: 2 }
@media (max-width: 860px) { .split { grid-template-columns: 1fr } .split.flip > :first-child { order: 0 } }
.rows { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule) }
.dark .rows, .dark .rows li { border-color: var(--black-rule) }
.rows li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 24px 0; border-bottom: 1px solid var(--rule) }
.rows .no { font: 500 11px/1.9 var(--mono); letter-spacing: .18em; color: var(--muted) }
.dark .rows .no { color: var(--on-black-muted) }
.rows h3 { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--display); text-transform: uppercase }
.rows p { grid-column: 2; font-size: 16px; color: var(--ink-2); max-width: 46ch }
.dark .rows p { color: var(--on-black-2) }

/* ---------- roster ---------- */
.roster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.roster li { border-bottom: 1px solid var(--rule) }
.roster .r { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) 28px; gap: 16px; align-items: baseline; padding: 22px 0; text-decoration: none; transition: padding .3s var(--ease), background .3s var(--ease) }
a.r:hover { padding-left: 12px; padding-right: 12px; background: var(--card) }
.roster .no { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--muted) }
.roster .name { font: 400 clamp(30px, 3.4vw, 52px)/.95 var(--display); text-transform: uppercase }
.roster .school, .roster .stage { font: 500 11px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase }
.roster .stage { color: var(--muted) }
.roster .go { font-size: 16px; text-align: right; color: var(--muted) }
@media (max-width: 760px) {
  .roster .r { grid-template-columns: 38px minmax(0, 1fr) 20px; row-gap: 8px }
  .roster .name { grid-column: 2 } .roster .school { grid-column: 2; grid-row: 2 } .roster .stage { grid-column: 2; grid-row: 3 }
  .roster .go { grid-column: 3; grid-row: 1 }
}

/* ---------- pull quotes ---------- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--black-rule) }
.quotes figure { margin: 0; padding: clamp(40px, 5vw, 72px) clamp(0px, 3vw, 48px) 0 0; display: grid; gap: 28px; align-content: start }
.quotes figure + figure { border-left: 1px solid var(--black-rule); padding-left: clamp(24px, 3.4vw, 56px) }
.quotes blockquote { margin: 0; font: 400 clamp(38px, 5.4vw, 88px)/.92 var(--display); text-transform: uppercase; text-wrap: balance }
.quotes figcaption { font: 500 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-black-muted) }
.quotes figcaption a { color: var(--on-black-2) }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr } .quotes figure + figure { border-left: 0; border-top: 1px solid var(--black-rule); padding-left: 0; margin-top: 40px } .quotes figure { padding-right: 0 } }

/* ---------- coaches ---------- */
.coach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start }
.coach .ph { aspect-ratio: 4 / 5 }
.facts { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--rule) }
.facts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px }
.facts li span { font: 500 10.5px/1.9 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: right }
.second { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule) }
.second .ph { aspect-ratio: 1 }
.second .ph img { object-position: 30% 30% }
@media (max-width: 860px) { .coach { grid-template-columns: 1fr } .second { grid-template-columns: 112px minmax(0, 1fr); gap: 18px } }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink) }
.plan { padding: 32px clamp(18px, 2.4vw, 36px) 36px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 18px }
.plan .inc { flex: 1 }
.plan:first-child { border-left: 0; padding-left: 0 }
.plan:last-child { padding-right: 0 }
.plan .for { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); min-height: 32px }
.plan h3 { font: 400 clamp(30px, 2.8vw, 42px)/.95 var(--display); text-transform: uppercase }
.price { display: flex; align-items: baseline; gap: 10px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.price b { font: 400 clamp(52px, 5vw, 76px)/.85 var(--display); font-variant-numeric: tabular-nums }
.price span { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.inc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.inc li { padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.45; position: relative }
.inc li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 1px; background: var(--ink) }
.inc li.lead-in { font-weight: 600 }
.plan .note { font-size: 13.5px; color: var(--muted) }
.plan .more { align-self: flex-start }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr } .plan { border-left: 0; padding: 32px 0; border-top: 1px solid var(--rule) } .plan:first-child { border-top: 0 } }
.privates { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule) }
.privates > div { padding: 26px 24px 28px; border-left: 1px solid var(--rule) }
.privates > div:first-child { border-left: 0; padding-left: 0 }
.privates h3 { font: 400 clamp(28px, 2.6vw, 38px)/.95 var(--display); text-transform: uppercase; margin-top: 12px }
.privates b { display: block; font: 400 clamp(44px, 4vw, 60px)/.9 var(--display) }
.privates span { display: block; margin-top: 10px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
@media (max-width: 860px) { .privates { grid-template-columns: 1fr 1fr } .privates > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--rule) } .privates > div:nth-child(2) { border-left: 0; padding-left: 0 } }

/* ---------- comparison table ---------- */
.compare { overflow-x: auto; margin-top: 8px }
.compare table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px }
.compare th, .compare td { text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle }
.compare thead th + th { text-align: center }
.compare thead th { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink) }
.compare tbody th { font-weight: 500; padding-left: 0 }
.compare td { text-align: center; font: 500 13px var(--mono) }
.compare td.y::before { content: "●"; font-size: 9px }
.compare td.n::before { content: "—"; color: var(--rule-2) }

/* ---------- the week ---------- */
.week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--black-rule); border-bottom: 1px solid var(--black-rule) }
.week > div { padding: 30px 28px 34px; border-left: 1px solid var(--black-rule) }
.week > div:first-child { border-left: 0; padding-left: 0 }
.week .day { font: 400 clamp(44px, 5vw, 80px)/.86 var(--display); text-transform: uppercase }
.week .time { margin-top: 16px; font: 500 11px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-black-2) }
@media (max-width: 760px) { .week { grid-template-columns: 1fr } .week > div { border-left: 0; padding: 22px 0; border-top: 1px solid var(--black-rule) } .week > div:first-child { border-top: 0 } }

/* ---------- press ---------- */
.outlets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.outlets span { padding: 28px 0; text-align: center; font: 400 clamp(24px, 3vw, 44px)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border-left: 1px solid var(--rule) }
.outlets span:first-child { border-left: 0 }
@media (max-width: 640px) { .outlets { grid-template-columns: 1fr 1fr } .outlets span:nth-child(3) { border-left: 0 } .outlets span:nth-child(n+3) { border-top: 1px solid var(--rule) } }
.stories { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--rule) }
.stories a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 140px 24px; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: padding .3s var(--ease), background .3s var(--ease) }
.stories a:hover { padding-left: 12px; padding-right: 12px; background: var(--card) }
.stories .src { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.stories .t { font: 500 clamp(19px, 1.7vw, 24px)/1.25 var(--sans); letter-spacing: -.01em }
.stories .k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.stories .go { text-align: right }
@media (max-width: 760px) { .stories a { grid-template-columns: minmax(0, 1fr) 20px; gap: 8px } .stories .src, .stories .t, .stories .k { grid-column: 1 } .stories .go { grid-column: 2; grid-row: 1 } }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) }
.card { display: grid; gap: 16px; text-decoration: none; align-content: start }
.card .ph { aspect-ratio: 4 / 3 }
/* a typographic cover where there is no photograph worth showing */
.cover { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--black); color: var(--on-black); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 26px) }
.cover .k { position: relative; z-index: 1; font: 500 10.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--on-black-muted) }
.cover b { position: relative; z-index: 1; font: 400 clamp(30px, 2.9vw, 46px)/.92 var(--display); text-transform: uppercase; text-wrap: balance; max-width: 12ch }
.cover .arcs { position: absolute; right: -14%; bottom: -36%; width: 92%; opacity: .14; pointer-events: none }
.card:hover .cover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px }
.card .src { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between }
.card h3 { font: 500 clamp(20px, 1.8vw, 25px)/1.22 var(--sans); letter-spacing: -.012em }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr } }

/* ---------- questions ---------- */
.faq { border-top: 1px solid var(--ink) }
.faq details { border-bottom: 1px solid var(--rule) }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 24px 0; font: 500 clamp(19px, 1.7vw, 23px)/1.3 var(--sans); letter-spacing: -.01em }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font: 300 26px/1 var(--sans); text-align: right; transition: transform .3s var(--ease) }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { padding: 0 48px 26px 0; color: var(--ink-2); max-width: 62ch }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr } }

/* ---------- steps (apply) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); list-style: none; margin: 0; padding: 0 }
.steps li { padding: 30px 28px 34px; border-left: 1px solid var(--rule); display: grid; gap: 16px; align-content: start }
.steps li:first-child { border-left: 0; padding-left: 0 }
.steps .no { font: 400 clamp(56px, 6vw, 92px)/.85 var(--display) }
.steps h3 { font: 600 15px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .02em }
.steps p { color: var(--ink-2); font-size: 15.5px }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr } .steps li { border-left: 0; padding: 26px 0; border-top: 1px solid var(--rule) } .steps li:first-child { border-top: 0 } }

/* ---------- tools ---------- */
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--black-rule) }
.tools > div { padding: 40px 40px 44px 0; border-bottom: 1px solid var(--black-rule); display: grid; gap: 16px; align-content: start }
.tools > div:nth-child(even) { padding: 40px 0 44px 40px; border-left: 1px solid var(--black-rule) }
.tools .k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-black-muted); display: flex; justify-content: space-between; gap: 16px }
.tools h3 { font: 400 clamp(36px, 3.6vw, 56px)/.9 var(--display); text-transform: uppercase }
.tools p { color: var(--on-black-2); max-width: 44ch }
@media (max-width: 860px) { .tools { grid-template-columns: 1fr } .tools > div, .tools > div:nth-child(even) { padding: 32px 0; border-left: 0 } }

/* ---------- closing call to action ---------- */
.cta { position: relative; overflow: hidden }
.cta .grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end }
.cta .side { display: grid; gap: 28px; justify-items: start }
.cta .arcs { position: absolute; right: -6%; bottom: -18%; width: min(70vw, 900px); opacity: .1; pointer-events: none }
@media (max-width: 860px) { .cta .grid { grid-template-columns: 1fr } .cta .arcs { width: 120vw; right: -30% } }

/* ---------- footer ---------- */
.foot { background: var(--black); color: var(--on-black-2); padding: 88px 0 calc(env(safe-area-inset-bottom, 0px) + 36px); border-top: 1px solid var(--black-rule) }
.foot .top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px }
.foot .logo img { width: min(260px, 70%); height: auto }
.foot .logo p { margin-top: 22px; font-size: 15px; color: var(--on-black-muted); max-width: 30ch }
.foot h4 { font: 500 10.5px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--on-black-muted); margin-bottom: 16px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px }
.foot a { text-decoration: none; color: var(--on-black-2) }
.foot a:hover { color: var(--on-black); text-decoration: underline }
.foot .bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--black-rule); font: 500 10.5px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-black-muted) }
@media (max-width: 960px) { .foot .top { grid-template-columns: 1fr 1fr } .foot .logo { grid-column: 1 / -1 } }

/* ---------- gentle entrance on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.js .reveal.in { opacity: 1; transform: none }
.js .path.reveal { transform: none }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none } }

/* ---------- intro: one statement, one paragraph ---------- */
.intro-p { color: var(--ink-2); max-width: 56ch; font-size: 18px; line-height: 1.6 }

/* ---------- Florida's top two ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px) }
.qb { display: grid; gap: 14px; align-content: start }
.qb .ph, .qb .cover { aspect-ratio: 4 / 5 }
.qb > .k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 6px }
.qb .more { justify-self: start }
a.cover { text-decoration: none }
.cover.tall b { font-size: clamp(44px, 5vw, 76px); max-width: 8ch }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; gap: 48px } }

/* ---------- press carousel: slides run off the right edge, aligned with the page on the left ---------- */
.carousel { --inset: max(var(--side-l), calc((100% - var(--max)) / 2 + var(--side-l))); margin-top: 8px }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(268px, 26vw, 380px); gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--inset) 6px; scroll-padding-inline: var(--inset); scrollbar-width: none; -webkit-overflow-scrolling: touch }
.track::-webkit-scrollbar { display: none }
.track:focus-visible { outline: 1px solid var(--on-black-muted); outline-offset: 6px }
.slide { scroll-snap-align: start; display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit }
.slide .face { aspect-ratio: 4 / 5; position: relative; overflow: hidden }
.slide .face.type { background: var(--black-2); border: 1px solid var(--black-rule); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 26px) }
.slide .face.type .k { position: relative; z-index: 1; font: 500 10.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--on-black-muted) }
.slide .face.type b { position: relative; z-index: 1; font: 400 clamp(34px, 3vw, 46px)/.92 var(--display); text-transform: uppercase; text-wrap: balance }
.slide .face .arcs { position: absolute; right: -16%; bottom: -30%; width: 96%; opacity: .12; pointer-events: none }
.slide > .k { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-black-muted) }
.slide h3 { font: 500 clamp(17px, 1.4vw, 20px)/1.3 var(--sans); letter-spacing: -.01em; color: var(--on-black) }
a.slide:hover h3 { text-decoration: underline; text-underline-offset: 4px }
a.slide:hover .face img { transform: scale(1.04) }
.ctrl { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: 30px }
.count { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--on-black-muted) }
.count b { color: var(--on-black); font-weight: 500 }
.bar { position: relative; height: 1px; background: var(--black-rule) }
.bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 16%; background: var(--on-black); transition: width .4s var(--ease) }
.arrows { display: flex; gap: 8px }
.arrows button { width: 48px; height: 48px; background: none; border: 1px solid rgba(242, 239, 232, .4); color: var(--on-black); font: 400 18px/1 var(--sans); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease) }
.arrows button:hover:not(:disabled) { background: var(--on-black); color: var(--black) }
.arrows button:disabled { opacity: .3; cursor: default }
@media (max-width: 760px) { .track { grid-auto-columns: 78vw } .arrows { display: none } .ctrl { grid-template-columns: auto 1fr } }

/* ---------- two coaches ---------- */
.coaches2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px) }
.coachcard { display: grid; gap: 14px; align-content: start }
.coachcard .ph { aspect-ratio: 4 / 5 }
.coachcard > .k { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 6px }
.coachcard .facts { margin-top: 8px }
@media (max-width: 760px) { .coaches2 { grid-template-columns: 1fr; gap: 56px } }

/* ---------- the coaches page ---------- */
.bio { display: grid; gap: 18px; margin-top: 28px; max-width: 58ch }
.dark .bio p { color: var(--on-black-2) } .dark .bio .lead { color: var(--on-black) }
.coach.flip > :first-child { order: 2 }
@media (max-width: 860px) { .coach.flip > :first-child { order: 0 } }
.dark .facts, .dark .facts li { border-color: var(--black-rule) }
.dark .facts li span { color: var(--on-black-muted) }
.pull { margin: 36px 0 0; padding: 4px 0 4px 20px; border-left: 2px solid currentColor; font: 400 clamp(26px, 2.6vw, 36px)/1.02 var(--display); text-transform: uppercase; max-width: 22ch }
.pull cite { display: block; margin-top: 14px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .16em; font-style: normal; color: var(--on-black-muted) }
.pull cite a { color: var(--on-black-2) }

/* ---------- the individual programme card ---------- */
.plan.individual .price b { font-size: clamp(34px, 3.2vw, 48px); line-height: .95 }
.plan .body { flex: 1; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); padding-top: 4px }

/* a photograph still to come: the ARQ arcs hold the space */
.cover.waiting .arcs { right: 8%; bottom: 34%; width: 84%; opacity: .28 }

/* phones: each fact, then its label underneath */
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 4px } .facts li span { text-align: left } }

/* phones: the two-plan table fits without sideways scrolling */
@media (max-width: 760px) { .compare table { min-width: 0 } .compare td, .compare thead th + th { width: 64px; padding-left: 6px; padding-right: 6px } }


/* ======================= review draft 4: structure and phones ======================= */

/* the compact home hero: a shorter first screen with the message, the next step and the proof */
.hero.compact { min-height: clamp(620px, 88svh, 860px) }
.hero.compact .wrap { padding-top: 136px }
.hero.compact h1 { font-size: clamp(42px, 8vw, 122px); max-width: 12ch }
.hero.compact .lead { margin-top: 22px }
.hero.compact .acts { margin-top: 30px }
.creds { list-style: none; margin: 52px 0 0; padding: 18px 0 26px; border-top: 1px solid rgba(242, 239, 232, .22); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px }
.creds li { display: grid; gap: 7px; align-content: start }
.creds b { font: 400 clamp(26px, 2.4vw, 36px)/.9 var(--display); color: var(--on-black); white-space: nowrap }
.creds span { font: 500 10px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-black-2) }
@media (max-width: 899px) {
  .hero.compact .ph { aspect-ratio: 16 / 11; max-height: 50svh }
  .hero.compact .ph img { object-position: 50% 42% }
  .hero.compact .wrap { padding-top: 0; margin-top: -40px }
  .hero.compact h1 { font-size: clamp(40px, 11vw, 64px); margin-top: 16px }
  .hero.compact .lead { font-size: 17px; margin-top: 14px }
  .hero.compact .acts { margin-top: 22px }
  .creds { grid-template-columns: 1fr 1fr; gap: 16px 14px; margin-top: 34px; padding-bottom: 22px }
}
@media (max-width: 480px) { .hero .acts { display: grid; grid-template-columns: 1fr; gap: 10px } .hero .acts .btn { width: 100% } }

/* the arc's four steps, compact: a title and one line each */
.stages.compact h3 { font: 400 clamp(24px, 2.2vw, 30px)/1 var(--display); text-transform: uppercase; letter-spacing: .005em; margin-top: 12px }
.stages.compact p { margin-top: 10px }
@media (max-width: 860px) { .stages.compact li { padding: 16px 0 } .stages.compact h3 { margin-top: 0; font-size: 24px } .stages.compact p { margin-top: 6px } }

/* how the arc is supported: the four dimensions in one row */
.dims { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 16px }
.dims ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink) }
.dims li { padding: 18px 20px 4px 0; display: grid; gap: 8px; align-content: start }
.dims li + li { padding-left: 20px; border-left: 1px solid var(--rule) }
.dims b { font: 400 clamp(22px, 2vw, 28px)/1 var(--display); text-transform: uppercase; font-weight: 400 }
.dims span { font-size: 15px; line-height: 1.5; color: var(--ink-2) }
@media (max-width: 860px) {
  .dims ul { grid-template-columns: 1fr }
  .dims li, .dims li + li { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-left: 0 }
  .dims li + li { border-top: 1px solid var(--rule) }
  .dims b { font-size: 21px }
}

/* On the record on black: the outlets, then the two quotes */
.dark .outlets, .dark .outlets span { border-color: var(--black-rule); color: var(--on-black-2) }
.outlets + .quotes { border-top: 0 }
@media (max-width: 640px) { .dark .outlets span { padding: 20px 0; font-size: 26px } }

/* meet the coaches */
.coachcard .cc-intro { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 56ch }
.sources { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--on-black-muted); max-width: 60ch }
.sources a { color: var(--on-black-2) }

/* every way to reach Sage: tap to call, text or email */
.reach { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule) }
.reach li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule) }
.reach span { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.reach a, .reach b { font: 500 clamp(18px, 1.6vw, 22px)/1.3 var(--sans); letter-spacing: -.01em; text-decoration: none; color: inherit }
.reach a:hover { text-decoration: underline; text-underline-offset: 4px }
.dark .reach, .dark .reach li { border-color: var(--black-rule) }
.dark .reach span { color: var(--on-black-muted) }
.cta .side { justify-items: stretch }
.cta .side .btn { justify-self: start }

/* training: two memberships, then privates, then college and pro arranged individually */
.plans.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 960px) { .plans.two { grid-template-columns: 1fr } }
.college { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 20px 32px; align-items: center; margin-top: 48px; padding: 26px 0 28px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule) }
.college h3 { font: 400 clamp(28px, 2.6vw, 38px)/.95 var(--display); text-transform: uppercase; margin-top: 12px }
.college p { color: var(--ink-2); max-width: 52ch }
@media (max-width: 860px) { .college { grid-template-columns: 1fr; align-items: start } .college .btn { justify-self: start } }

/* tighter: wider headline column, shorter coach photographs */
.head { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) }
@media (max-width: 860px) { .head { grid-template-columns: 1fr } }
.coachcard .ph { aspect-ratio: 5 / 4 }

/* ======================= review draft 5 ======================= */
/* no diagonal arrows: outside links read as plain underlined text */
.ext::after { content: none }

/* the week: the three days, no times */
.week.days { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.week.days > div { padding: 26px 20px 28px; border-left: 1px solid var(--black-rule); border-top: 0 }
.week.days > div:first-child { padding-left: 0; border-left: 0 }
.week.days .day { font-size: clamp(26px, 6vw, 80px) }
@media (max-width: 760px) { .week.days > div { padding: 18px 10px 20px } .week.days > div:first-child { padding-left: 0 } }

/* plans on phones: tighter */
@media (max-width: 960px) {
  .plan { padding: 26px 0 30px; gap: 14px }
  .plan .for { min-height: 0 }
  .price { padding: 12px 0 }
  .privates { margin-top: 36px }
}
.plan.individual .price b { font-size: clamp(30px, 2.8vw, 42px) }

/* news: plain text links under each item */
.card .src { display: block }
.go-links { display: flex; flex-wrap: wrap; gap: 8px 22px }
.go-links a { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 12px 0 8px; border-bottom: 1px solid currentColor }
.go-links a::after { content: "  →"; font-family: var(--sans); letter-spacing: 0 }
.go-links a:hover { opacity: .7 }

.plan.individual .price b { text-transform: uppercase }
/* phones: shorter photographs beside the method and results text */
@media (max-width: 860px) { .split .ph { aspect-ratio: 5 / 4 } }

/* Division I quarterbacks: two columns of names on a computer, one on a phone */
.d1 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); border-top: 1px solid var(--ink) }
.d1 li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule) }
.d1 b { font: 400 clamp(24px, 2.4vw, 34px)/1 var(--display); text-transform: uppercase; font-weight: 400 }
.d1 span { font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right }
@media (max-width: 760px) { .d1 { grid-template-columns: 1fr } .d1 li { padding: 13px 0 } }

/* plans and pricing: two tabs, our plans and the comparison */
.tabbar { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--ink); margin-bottom: 28px }
.tabbar button { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: transparent; border: 0; padding: 15px 22px; min-height: 48px; cursor: pointer }
.tabbar button + button { border-left: 1px solid var(--ink) }
.tabbar button[aria-selected="true"] { background: var(--ink); color: var(--paper) }
.tabpanel > .plans { border-top: 1px solid var(--ink) }
.vs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 40px; align-items: end; margin-bottom: 26px }
@media (max-width: 860px) { .vs-head { grid-template-columns: 1fr } }
.vs-wrap { overflow-x: auto; border-top: 1px solid var(--ink) }
.vs { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.4 }
.vs th, .vs td { text-align: left; vertical-align: top; padding: 15px 14px; border-bottom: 1px solid var(--rule) }
.vs thead th { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 14px; padding-bottom: 14px }
.vs thead th.us { color: var(--ink) }
.vs tbody th { font-weight: 600; width: 26%; padding-left: 0 }
.vs td.us { background: var(--card); font-weight: 600; width: 37% }
.vs sup, .vs-note sup { font-size: .7em }
.vs-note { margin-top: 14px; font-size: 13px; color: var(--muted); max-width: 70ch }
@media (max-width: 560px) { .vs { font-size: 14px } .vs th, .vs td { padding: 12px 8px } .vs tbody th { width: 30% } .vs thead th { letter-spacing: .1em } }

/* compare: ARQ, QB Stable and Mastrole side by side; on phones each row's name sits above its three answers */
.cmp3 { border-top: 1px solid var(--ink) }
.cmp3 .r { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule) }
.cmp3 .r > * { padding: 14px; font-size: 15px; line-height: 1.4 }
.cmp3 .r > b { padding-left: 0; font-weight: 600 }
.cmp3 .us { background: var(--card); font-weight: 600 }
.cmp3 .hd > * { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.cmp3 .hd .us { color: var(--ink) }
@media (max-width: 760px) {
  .cmp3 .r { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .cmp3 .r > b { grid-column: 1 / -1; padding: 14px 0 6px; font-size: 14.5px }
  .cmp3 .r > span { padding: 4px 8px 14px; font-size: 13.5px }
  .cmp3 .hd > :first-child { display: none }
  .cmp3 .hd > * { padding: 12px 8px }
}


/* ======================= review draft 9 ======================= */
/* sections land below the sticky header when a link takes you to them */
[id] { scroll-margin-top: 104px }

/* ---------- the development arc: hover or tap a stage, and every dimension describes that part of the year ---------- */
.arc-hint { margin: 4px 0 0; font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.arc-hint .h-tap { display: none }
@media (hover: none), (pointer: coarse) { .arc-hint .h-hover { display: none } .arc-hint .h-tap { display: inline } }
.stagegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px }
.st { grid-row: 1; display: grid; gap: 8px; align-content: start; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 18px 20px 22px 0; cursor: pointer; box-shadow: inset 0 1px 0 var(--rule); transition: box-shadow .25s var(--ease) }
.st .no { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--muted) }
.st .t { font: 400 clamp(24px, 2.2vw, 30px)/1 var(--display); text-transform: uppercase; transition: color .25s var(--ease) }
.st .s { font-size: 15px; line-height: 1.5; color: var(--ink-2); transition: color .25s var(--ease) }
.st .pm { display: none }
.st:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
.st.on { box-shadow: inset 0 3px 0 var(--ink) }
.arcbox.live .st:not(.on) .t { color: var(--muted) }
.arcbox.live .st:not(.on) .s { color: var(--muted) }
.arcbox.live .st:not(.on):hover .t { color: var(--ink) }
.st-detail { grid-row: 2; grid-column: 1 / -1; display: grid; gap: 22px; margin-top: 4px; padding: 24px 0 4px; border-top: 1px solid var(--ink) }
.js .st-detail:not(.open) { display: none }
.st-detail.open { animation: st-in .35s var(--ease) }
@keyframes st-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .st-detail.open { animation: none } }
.st-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 40px; align-items: baseline }
.st-lead { font: 500 clamp(18px, 1.5vw, 21px)/1.4 var(--sans); letter-spacing: -.01em; max-width: 56ch }
.st-dims { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.st-dims li { display: grid; gap: 8px; align-content: start; padding: 2px 20px 0 0 }
.st-dims li + li { padding-left: 20px; border-left: 1px solid var(--rule) }
.st-dims b { font: 400 22px/1 var(--display); text-transform: uppercase; font-weight: 400 }
.st-dims span { font-size: 15px; line-height: 1.5; color: var(--ink-2) }
.st-note { font-size: 13.5px; color: var(--muted) }
@media (max-width: 860px) {
  .stagegrid { grid-template-columns: 1fr; margin-top: 10px }
  .st, .st-detail { grid-row: auto; grid-column: auto }
  .st { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 4px 0; align-items: baseline; padding: 16px 0 }
  .st .no { grid-row: 1 / span 2; padding-top: 4px }
  .st .t { grid-column: 2; font-size: 24px }
  .st .s { grid-column: 2; font-size: 14.5px }
  .st .pm { display: block; grid-column: 3; grid-row: 1; justify-self: end; font: 300 24px/1 var(--sans); font-style: normal }
  .st .pm::before { content: "+" }
  .st.on .pm::before { content: "−" }
  .st-detail { margin: 0 0 14px; padding: 4px 0 6px 40px; border-top: 0; gap: 14px }
  .st-head { grid-template-columns: 1fr }
  .st-head .label { display: none }
  .st-lead { font-size: 17px }
  .st-dims { grid-template-columns: 1fr }
  .st-dims li, .st-dims li + li { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-left: 0; border-top: 1px solid var(--rule) }
  .st-dims b { font-size: 19px }
  .st-dims span { font-size: 14.5px }
}
/* the nodes: the open stage lights up, with its drop line, number and a halo; the rest step back */
.path .hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer }
.path .halo { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity .3s var(--ease) }
.js .path .node, .js .path .num, .js .path .drop { transition: opacity .7s var(--ease), stroke .25s ease, stroke-width .25s ease, fill .25s ease }
.js .path .s1 > * { transition-delay: .5s, 0s, 0s, 0s } .js .path .s2 > * { transition-delay: .85s, 0s, 0s, 0s }
.js .path .s3 > * { transition-delay: 1.2s, 0s, 0s, 0s } .js .path .s4 > * { transition-delay: 1.55s, 0s, 0s, 0s }
.js .path g[data-stage] > .halo { transition-delay: 0s }
.arcbox.live .path g[data-stage] .node { stroke: var(--rule-2) }
.arcbox.live .path g[data-stage] .num { fill: var(--muted) }
.arcbox.live .path g[data-stage].on .node { stroke: var(--ink); stroke-width: 3.4 }
.arcbox.live .path g[data-stage].on .num { fill: var(--ink) }
.arcbox.live .path g[data-stage].on .drop { stroke: var(--ink) }
.arcbox.live .path.in g[data-stage].on .halo { opacity: .4 }

/* ---------- On the record: quote cards in a carousel, with arrows, a count and a bar on every screen ---------- */
.carousel.qc { margin-top: clamp(28px, 3vw, 40px) }
.carousel.qc .track { grid-auto-columns: clamp(272px, 34vw, 470px) }
.qcard { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.2vw, 30px); background: var(--black-2); border: 1px solid var(--black-rule) }
.qcard .k { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-black-muted) }
.qcard .q { font: 400 clamp(32px, 3vw, 46px)/.95 var(--display); text-transform: uppercase; color: var(--on-black); text-wrap: balance }
.qcard .by { font-size: 15px; line-height: 1.5; color: var(--on-black-2); max-width: 40ch }
.qcard .go-links { margin-top: auto; padding-top: 4px }
.qcard .go-links a { color: var(--on-black) }
@media (max-width: 760px) {
  .carousel.qc .track { grid-auto-columns: 84vw }
  .carousel.qc .ctrl { grid-template-columns: auto 1fr auto; gap: 14px; margin-top: 22px }
  .carousel.qc .arrows { display: flex }
  .carousel.qc .arrows button { width: 44px; height: 44px }
}

/* ---------- compare: every package QB Stable and Mastrole list, with what it includes ---------- */
.pk { margin-top: clamp(40px, 5vw, 64px) }
.pk-intro { display: grid; gap: 8px; margin-bottom: 20px }
.pk-intro p { color: var(--ink-2); max-width: 60ch }
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px }
.pk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink) }
.pk-head h4 { font: 400 clamp(28px, 2.6vw, 36px)/1 var(--display); text-transform: uppercase }
.pk-head span { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: right }
.pk-list { list-style: none; margin: 0; padding: 0 }
.pk-list li { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--rule) }
.pk-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px }
.pk-top b { font-size: 16px; font-weight: 600 }
.pk-price { font: 400 24px/1 var(--display); white-space: nowrap; text-align: right }
.pk-price small { display: block; margin-top: 4px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.pk-list p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 58ch }
@media (max-width: 860px) { .pk-grid { grid-template-columns: 1fr; gap: 36px } }

/* phones: an open stage shows its sentence instead of repeating the short line */

/* the package lists fold on phones (open on a computer); the heading is the button */
.pk-block > summary { list-style: none; cursor: pointer }
.pk-block > summary::-webkit-details-marker { display: none }
.pk-head .pm { display: none; font: 300 26px/1 var(--sans); font-style: normal }
.pk-head .pm::before { content: "+" }
.pk-block[open] .pk-head .pm::before { content: "−" }
@media (max-width: 860px) {
  .pk-head { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 4px 12px; align-items: center; padding: 14px 0 }
  .pk-head h4 { grid-column: 1 }
  .pk-head span { grid-column: 1; grid-row: 2; text-align: left }
  .pk-head .pm { display: block; grid-column: 2; grid-row: 1 / span 2; justify-self: end }
  .pk-block:not([open]) .pk-head { border-bottom-color: var(--rule) }
  .pk-grid { gap: 0 }
}


/* ======================= review draft 10 ======================= */
/* the arc: under the open stage, four things of its own */
.st-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.st-items li { display: grid; gap: 8px; align-content: start; padding: 2px 20px 0 0 }
.st-items li + li { padding-left: 20px; border-left: 1px solid var(--rule) }
.st-items b { font: 400 clamp(20px, 1.8vw, 24px)/1.05 var(--display); text-transform: uppercase; font-weight: 400 }
.st-items span { font-size: 15px; line-height: 1.5; color: var(--ink-2) }
@media (max-width: 860px) {
  .st-items { grid-template-columns: 1fr }
  .st-items li, .st-items li + li { gap: 4px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--rule) }
  .st-items b { font-size: 20px }
  .st-items span { font-size: 14.5px }
}

/* compare: the sessions board. ARQ's row is the dark band; one dot is one group session in a month */
.board { margin: 8px 0 clamp(36px, 4vw, 52px); border-top: 1px solid var(--ink) }
.b-row { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) minmax(110px, 190px); gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--rule) }
.b-row.hd { padding: 12px 22px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.b-row.hd span:last-child { text-align: right }
.b-who { font: 400 clamp(24px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; font-weight: 400 }
.b-dots { display: flex; align-items: center; gap: 18px; min-width: 0 }
.b-dots .d { display: flex; flex-wrap: wrap; gap: 6px }
.b-dots .d i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule-2) }
.b-dots em { font: 400 clamp(32px, 3vw, 44px)/1 var(--display); font-style: normal }
.b-cost { text-align: right; font: 400 clamp(28px, 2.6vw, 40px)/1 var(--display) }
.b-cost small { display: block; margin-top: 6px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.b-row.us { background: var(--ink); color: var(--paper); border-bottom-color: var(--ink) }
.b-row.us .b-dots .d i { background: var(--paper); border-color: var(--paper) }
.b-row.us .b-cost small { color: var(--on-black-muted) }
@media (max-width: 760px) {
  .b-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; padding: 16px 14px }
  .b-row.hd { padding: 10px 14px }
  .b-row.hd span:first-child { display: none }
  .b-who { grid-column: 1; grid-row: 1; align-self: center }
  .b-cost { grid-column: 2; grid-row: 1 }
  .b-dots { grid-column: 1 / -1; grid-row: 2; gap: 12px }
  .b-dots .d { gap: 5px }
  .b-dots .d i { width: 12px; height: 12px }
  .b-dots em { font-size: 28px }
}

/* compare table: ARQ's column is the dark one, so it stands out row by row */
.cmp3.v2 .us { background: var(--ink); color: var(--paper); font-weight: 600 }
.cmp3.v2 .hd .us { color: var(--paper); font: 400 20px/1 var(--display); letter-spacing: .04em; text-transform: uppercase }
.cmp3.v2 .r { border-bottom-color: var(--rule) }
.cmp3.v2 .r > span:not(.us) { color: var(--ink-2) }

/* the home hero without a big headline: one sentence, set large in Inter Tight */
.hero-line { margin-top: 22px; max-width: 19ch; font: 500 clamp(32px, 4.3vw, 64px)/1.06 var(--sans); letter-spacing: -.022em; color: var(--on-black); text-wrap: balance }
.hero.compact .hero-line + .acts { margin-top: 34px }
@media (max-width: 899px) { .hero-line { margin-top: 14px; font-size: clamp(30px, 8.4vw, 40px); max-width: 16ch } .hero.compact .hero-line + .acts { margin-top: 24px } }
.hero.compact h1.hero-line { font-size: clamp(34px, 3.6vw, 58px); max-width: 17ch; line-height: 1.06 }
@media (max-width: 899px) { .hero.compact h1.hero-line { font-size: clamp(28px, 7.6vw, 36px); max-width: 15ch; margin-top: 14px } }

@media (max-width: 899px) { .hero.compact { min-height: 0 } }

/* the home hero line: small, like the old subtitle, low in the hero under the label */
.hero.compact h1.hero-sub { margin-top: 18px; max-width: 40ch; font: 400 clamp(18px, 1.55vw, 21px)/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: #dcd9d1 }
.hero.compact .hero-sub + .acts { margin-top: 26px }
@media (max-width: 899px) { .hero.compact h1.hero-sub { margin-top: 12px; font-size: 17px } .hero.compact .hero-sub + .acts { margin-top: 20px } }

/* a photo with a wide crop for phones: the picture element steps aside so the img fills the frame */
.ph picture { display: contents }

/* ======================= phone pass (Oct 21): phones get their own layout; the desktop is unchanged ======================= */
.st-lead, .cc-line, .dock { display: none }
@media (max-width: 760px) {
  /* the first screen: the photo leads, the line and Apply sit on it, the four numbers follow */
  .hero.compact .ph { aspect-ratio: 4 / 5; max-height: 78svh }
  .hero.compact .ph::before { background: linear-gradient(180deg, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 20%, rgba(11, 11, 12, 0) 44%, rgba(11, 11, 12, .8) 76%, var(--black) 100%) }
  .hero.compact .ph img { object-position: 50% 30% }
  .hero.compact .wrap { margin-top: -176px }
  .creds { margin-top: 28px }
}
@media (max-width: 860px) {
  /* the development arc: the four stages as a grid of four taps under the arc, the open stage's four things below */
  .arcbox.live .stagegrid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px }
  .arcbox.live .stagegrid > button:nth-of-type(1) { grid-area: 1 / 1 }
  .arcbox.live .stagegrid > button:nth-of-type(2) { grid-area: 1 / 2 }
  .arcbox.live .stagegrid > button:nth-of-type(3) { grid-area: 2 / 1 }
  .arcbox.live .stagegrid > button:nth-of-type(4) { grid-area: 2 / 2 }
  .arcbox.live .st { grid-template-columns: none; gap: 10px; align-content: start; padding: 14px 14px 16px; border: 1px solid var(--rule-2); min-height: 86px }
  .arcbox.live .st .no { grid-row: auto; padding-top: 0 }
  .arcbox.live .st .t { grid-column: auto; font-size: 21px; line-height: 1 }
  .arcbox.live .st .s, .arcbox.live .st .pm { display: none }
  .arcbox.live .st.on { background: var(--ink); border-color: var(--ink) }
  .arcbox.live .st.on .no, .arcbox.live .st.on .t { color: var(--paper) }
  .arcbox.live .st-detail { grid-area: 3 / 1 / auto / -1; margin: 12px 0 0; padding: 0; border-top: 0; gap: 4px }
  .arcbox.live .st-lead { display: block; font-size: 16px; line-height: 1.5; color: var(--ink-2); padding-bottom: 6px }
}
@media (max-width: 760px) {
  /* the coaches on the home page: side by side, one line each; the full bios are a tap away */
  #coaches .coaches2 { grid-template-columns: 1fr 1fr; gap: 14px }
  #coaches .coachcard { gap: 8px }
  #coaches .coachcard .ph { aspect-ratio: 1 }
  #coaches .coachcard:first-child .ph img { object-position: 100% 50% }
  #coaches .coachcard:last-child .ph img { object-position: 38% 40% }
  #coaches .coachcard > .k { font-size: 9px; letter-spacing: .12em; margin-top: 4px }
  #coaches .coachcard h3 { font-size: 24px }
  #coaches .coachcard .cc-intro, #coaches .coachcard .facts { display: none }
  #coaches .cc-line { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2) }

  /* the closing section: Apply as wide as the screen, like the first screen */
  .cta .side .btn { justify-self: stretch }

  /* a slim Apply bar once the first screen has scrolled by, gone again at the closing section */
  .dock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
          padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
          background: var(--black); border-top: 1px solid var(--black-rule); transform: translateY(105%); visibility: hidden;
          transition: transform .35s var(--ease), visibility 0s linear .35s }
  .dock.on { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s }
  .dock .call { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid rgba(242, 239, 232, .28); color: var(--on-black); font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none }
  .dock .btn { min-height: 46px; width: 100% }
}
@media (prefers-reduced-motion: reduce) { .dock, .dock.on { transition: none } }
@media (max-width: 400px) { .hero .label { letter-spacing: .1em } .hero .label i { margin-right: 4px } }