/* jasenhunt.com, cinematic version.
   Dark slate, white, the sky blue from Jasen's YouTube banner and the cyan from
   Land Survey Drafts. Headlines are set in Big Shoulders Display, text in Atkinson
   Hyperlegible Next.
   The home page hero is the one place that looks like a drawing and the one place
   that moves with the scroll. Everything else is a plain, still site: no drawing
   furniture, no sheet numbers, no monospace lettering outside the hero. */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/big-shoulders-display-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/atkinson-hyperlegible-next-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/atkinson-hyperlegible-mono-latin.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --model: #212830;
  --deep: #161B21;
  --paper: #F3F6F8;
  --white: #FFFFFF;
  --ink: #0B0F13;
  --cyan: #2FC1FF;
  --sky: #89D0F0;
  --flag: #FF2E93;
  --mute-d: #9DAEBA;
  --mute-l: #4B5863;
  --rule-d: rgba(255, 255, 255, 0.18);

  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(1.125rem, 4vw, 3.5rem);
  --band: clamp(4.5rem, 2.5rem + 8vw, 9.5rem);
  --header: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--deep); color: var(--white); font-family: var(--body); font-size: 1.125rem; line-height: 1.55; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; }

.skip { position: absolute; left: var(--gutter); top: -5rem; z-index: 40; background: var(--white); color: var(--ink); padding: 0.6rem 1rem; }
.skip:focus { top: 0.5rem; }
.wrap { max-width: 92rem; margin-inline: auto; padding-inline: var(--gutter); }

.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.004em; text-wrap: balance; }
.d-xl { font-size: clamp(3.25rem, 1.6rem + 7.4vw, 8.5rem); }
.d-lg { font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem); }
.d-md { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem); line-height: 0.95; }
.lead { font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem); line-height: 1.42; }
.small { font-size: 0.875rem; line-height: 1.5; }
.measure { max-width: 40rem; }
.stack > * + * { margin-top: 1.1em; }

/* Buttons */
.btn { display: inline-block; padding: 0.85rem 1.4rem; border: 2px solid currentColor; border-radius: 2px; font-weight: 700; line-height: 1.2; text-decoration: none; background: transparent; color: inherit; cursor: pointer; transition: background-color 0.18s, color 0.18s, border-color 0.18s; }
.btn-solid { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-solid:hover { background: var(--cyan); border-color: var(--cyan); }
.btn:not(.btn-solid):hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.on-light .btn-solid, .is-paper .btn-solid { background: var(--ink); border-color: var(--ink); color: var(--white); }
.on-light .btn-solid:hover, .is-paper .btn-solid:hover { background: var(--white); color: var(--ink); }
.on-light .btn:not(.btn-solid):hover, .is-paper .btn:not(.btn-solid):hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-small { padding: 0.5rem 0.95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 30; color: var(--white); transition: background-color 0.25s, color 0.25s; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-height: var(--header); }
.site-header[data-tone="light"], .site-header[data-tone="sky"] { color: var(--ink); }
.site-header.is-solid[data-tone="dark"] { background: rgba(22, 27, 33, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header.is-solid[data-tone="light"] { background: rgba(243, 246, 248, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header.is-solid[data-tone="sky"] { background: rgba(137, 208, 240, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.625rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; line-height: 1; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.6rem; list-style: none; font-size: 1.0625rem; }
.nav a { text-decoration: none; display: inline-block; padding-block: 0.35rem; }
.nav a:not(.btn):hover { text-decoration: underline; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.14em; }
.site-header[data-tone="light"] .btn:hover, .site-header[data-tone="sky"] .btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.menu-btn { display: none; }

/* ---- The hero: pinned while the survey is drafted ---- */
.hero-scroll { --zone: 100px; position: relative; height: calc(100vh + 5 * var(--zone)); height: calc(100svh + 5 * var(--zone)); background: var(--model); }
@media (pointer: coarse) { .hero-scroll { --zone: 38vh; } }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--white); transition: color 0.3s; }
.hero-pin.is-paper { color: var(--ink); }
.hero-pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grid { position: relative; height: 100%; max-width: 92rem; margin-inline: auto; padding: calc(var(--header) + 0.5rem) var(--gutter) 5.25rem; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 0 clamp(1.5rem, 3.5vw, 4rem); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-width: 0; }
.hero-copy > * { grid-area: 1 / 1; align-self: center; }
/* One caption shows at a time. The outgoing one leaves first, then the next arrives. */
.js .hero-pin [data-s] { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.28s ease, transform 0.4s ease, visibility 0s linear 0.28s; }
.js .hero-pin [data-s].is-current { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s ease 0.3s, transform 0.75s cubic-bezier(0.19, 0.8, 0.22, 1) 0.3s, visibility 0s; }
.hero-stage { min-width: 0; min-height: 0; }
.hero-intro { display: grid; gap: 1.6rem; }
.name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(4.75rem, 1rem + 12.2vw, 14rem); line-height: 0.86; letter-spacing: -0.005em; white-space: nowrap; }
.name span { display: block; overflow: hidden; padding-top: 0.04em; }
.name i { display: block; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .js .name i { transform: translateY(104%); animation: name-rise 0.95s cubic-bezier(0.19, 0.8, 0.22, 1) 0.1s forwards; }
  .js .name span + span i { animation-delay: 0.2s; }
  .js .hero-intro .lead { opacity: 0; animation: lead-in 0.8s ease-out 0.75s forwards; }
}
@keyframes name-rise { to { transform: translateY(0); } }
@keyframes lead-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-intro .lead { max-width: 25rem; }
.stage-copy { display: grid; gap: 1.1rem; max-width: 27rem; }
.stage-copy h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.75rem, 1.4rem + 3.9vw, 5rem); line-height: 0.88; text-wrap: balance; }
.stage-copy p { font-size: 1.25rem; line-height: 1.45; }
.hero-end .actions { margin-top: 0.4rem; }

.stage-rail { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.5rem; max-width: calc(92rem - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 0.7rem; }
.stage-rail .track { height: 2px; background: rgba(255, 255, 255, 0.2); transition: background-color 0.3s; }
.is-paper .stage-rail .track { background: rgba(11, 15, 19, 0.2); }
.stage-rail .track i { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.19, 0.8, 0.22, 1); }
.stage-rail ol { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.stage-rail button { all: unset; cursor: pointer; display: flex; gap: 0.6em; align-items: baseline; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; opacity: 0.5; transition: opacity 0.2s; }
.stage-rail button:hover, .stage-rail button.is-done { opacity: 0.8; }
.stage-rail button.is-on { opacity: 1; }
.stage-rail button:focus-visible { outline: 3px solid var(--flag); outline-offset: 3px; }
.hero-hint { position: absolute; right: var(--gutter); bottom: 4.6rem; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.75rem; }
.hero-hint::after { content: ""; width: 1px; height: 2.75rem; background: currentColor; transform-origin: 50% 0; animation: hint 2.2s cubic-bezier(0.6, 0, 0.2, 1) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(100%); opacity: 0; } }

html:not(.js) .hero-scroll { height: auto; }
html:not(.js) .hero-pin { position: relative; height: auto; }
html:not(.js) .hero-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 3rem; }
html:not(.js) .hero-copy > * { grid-area: auto; margin-bottom: 2rem; }
html:not(.js) .stage-rail, html:not(.js) .hero-hint, html:not(.js) .hero-pin canvas { display: none; }

/* ---- Bands ---- */
.band { padding-block: var(--band); }
.band-tight { padding-block: calc(var(--band) * 0.62); }
.band-dark { background: var(--deep); color: var(--white); }
.band-model { background: var(--model); color: var(--white); }
.band-paper { background: var(--paper); color: var(--ink); }
.band-white { background: var(--white); color: var(--ink); }
.band-sky { background: var(--sky); color: var(--ink); }
.head { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 5vw, 4rem); max-width: 54rem; }
.head p { max-width: 38rem; }
.band-dark .muted, .band-model .muted { color: var(--mute-d); }
.band-paper .muted, .band-white .muted, .band-sky .muted { color: var(--mute-l); }

/* The record: a short list of facts, each with its number */
.record { width: 100%; border-collapse: collapse; }
.record th, .record td { text-align: left; vertical-align: bottom; padding: clamp(1rem, 2.2vw, 1.75rem) 1.25rem clamp(0.9rem, 2vw, 1.5rem) 0; border-top: 2px solid var(--ink); }
.record tr:last-child th, .record tr:last-child td { border-bottom: 2px solid var(--ink); }
.record th { font-weight: 400; }
.record th strong { display: block; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; }
.record th span { display: block; margin-top: 0.2rem; font-size: 0.9375rem; color: var(--mute-l); }
.record .val { font-family: var(--display); font-weight: 800; font-size: clamp(3.75rem, 2rem + 7.5vw, 9rem); line-height: 0.78; text-align: right; padding-right: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The statement */
.statement { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(4rem, 1rem + 14.5vw, 17rem); line-height: 0.87; letter-spacing: -0.006em; }
.statement span { display: block; }
.statement-foot { margin-top: clamp(1.75rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: space-between; }
.statement-foot p { max-width: 34rem; font-size: 1.25rem; line-height: 1.4; }

/* Story: a photo beside a timeline */
.story { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story-photo { position: sticky; top: calc(var(--header) + 1.5rem); }
.story-photo img { width: 100%; border: 1px solid var(--rule-d); }
.band-paper .story-photo img, .band-white .story-photo img { border: 2px solid var(--ink); }
.story-photo figcaption { margin-top: 0.7rem; font-size: 0.875rem; color: var(--mute-d); }
.band-paper .story-photo figcaption, .band-white .story-photo figcaption { color: var(--mute-l); }
.timeline { list-style: none; position: relative; margin-top: clamp(1.75rem, 4vw, 3rem); }
.timeline::before { content: ""; position: absolute; left: 0.4375rem; top: 0.9rem; bottom: 0.4rem; width: 2px; background: currentColor; opacity: 0.3; }
.timeline li { position: relative; padding: 0 0 2.4rem 2.75rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: clamp(0.4rem, 0.2rem + 0.55vw, 0.75rem); width: 1rem; height: 1rem; border-radius: 50%; background: var(--deep); border: 2px solid currentColor; }
.band-paper .timeline li::before, .band-white .timeline li::before { background: var(--paper); }
.timeline h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1; margin: 0 0 0.6rem; }
.timeline p { max-width: 38rem; }
.timeline p + p { margin-top: 0.8em; }
.source { margin-top: 2.25rem; font-size: 0.875rem; max-width: 38rem; }

/* What I do: three columns */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3.5vw, 3.5rem); list-style: none; }
.trio li { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.5rem; border-top: 2px solid currentColor; min-width: 0; }
.trio h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); line-height: 0.95; }
.trio a { font-weight: 700; }

/* Ratings with each site's own logo */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.proof-card { display: grid; gap: 0.8rem; align-content: start; padding: clamp(1.5rem, 2.6vw, 2.25rem); border: 2px solid var(--ink); text-decoration: none; min-width: 0; }
.proof-tp { background: var(--white); color: var(--ink); }
.proof-whop { background: var(--ink); color: var(--white); }
.proof-logo { height: 2.1rem; width: auto; }
.proof-stars { width: 11.5rem; }
.proof-score { font-size: 1.25rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.5em; }
.proof-score b { font-family: var(--display); font-size: 4.5rem; font-weight: 800; line-height: 0.85; }
.proof-meta { font-size: 1rem; line-height: 1.45; }
.proof-card:hover .proof-meta { text-decoration: underline; }
.trustbox-wrap { margin-top: 1.25rem; max-width: 15rem; min-height: 52px; }

.pull { margin-top: clamp(2.5rem, 6vw, 5rem); display: grid; gap: 1rem; }
.pull p:first-child { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 1.2rem + 5.6vw, 6.5rem); line-height: 0.88; }
.pull p + p { font-size: 1.125rem; max-width: 36rem; }

/* Videos */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.75rem; list-style: none; }
.videos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.video a { text-decoration: none; display: grid; gap: 0.8rem; }
.video .thumb { position: relative; overflow: hidden; border: 2px solid currentColor; }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.video a:hover img { transform: scale(1.04); }
.video .thumb::after { content: ""; position: absolute; left: 0.9rem; bottom: 0.9rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230B0F13'/%3E%3C/svg%3E") center / 1.5rem no-repeat; }
.video strong { font-size: 1.25rem; line-height: 1.25; }
.video a:hover strong { text-decoration: underline; }
.video span.meta { font-size: 0.875rem; opacity: 0.75; }
.video span.note { font-size: 1rem; line-height: 1.5; }

/* Reviews list */
.reviews { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.reviews li { padding-block: 1.15rem; border-top: 1px solid var(--ink); display: grid; gap: 0.25rem; }
.reviews q { font-weight: 700; font-size: 1.25rem; line-height: 1.3; quotes: "\201C" "\201D"; }
.reviews span { font-size: 0.875rem; color: var(--mute-l); }

/* Rows: a label and what it means */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 0.5rem 3rem; padding-block: 1.6rem; border-top: 2px solid currentColor; align-items: baseline; }
.row:last-child { border-bottom: 2px solid currentColor; }
.row h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); line-height: 1; }
.row p + p { margin-top: 0.8em; }

/* Tables of facts */
.schedule { width: 100%; border-collapse: collapse; }
.schedule caption { text-align: left; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; padding-bottom: 0.75rem; }
.schedule th, .schedule td { text-align: left; vertical-align: top; padding: 0.8rem 1.25rem 0.8rem 0; border-top: 1px solid currentColor; }
.schedule tr:last-child th, .schedule tr:last-child td { border-bottom: 1px solid currentColor; }
.schedule th { font-size: 0.9375rem; font-weight: 400; white-space: nowrap; padding-top: 0.95rem; opacity: 0.72; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2rem, 6vw, 6rem); align-items: start; }

/* Inner page head */
.page-head { background: var(--model); color: var(--white); padding: calc(var(--header) + clamp(2.5rem, 7vw, 6rem)) 0 clamp(2.75rem, 6vw, 5rem); }
.page-head .wrap { display: grid; gap: 1.4rem; }
.page-head h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.5rem, 1.5rem + 9vw, 10.5rem); line-height: 0.82; text-wrap: balance; }
.page-head .lead { max-width: 44rem; }

/* Questions */
.qa-layout { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.qa-index { position: sticky; top: calc(var(--header) + 1.5rem); list-style: none; display: grid; gap: 0.6rem; font-size: 1rem; line-height: 1.35; }
.qa-index a { text-decoration: none; }
.qa-index a:hover { text-decoration: underline; }
.qa > section { padding-block: 2.2rem; border-top: 2px solid var(--ink); max-width: 46rem; scroll-margin-top: calc(var(--header) + 1rem); }
.qa h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); line-height: 0.95; margin-bottom: 1rem; text-wrap: balance; }
.qa p + p { margin-top: 0.8em; }

/* Contact */
.contact-list { list-style: none; display: grid; }
.contact-list li { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 0.4rem 3rem; padding-block: 1.6rem; border-top: 2px solid currentColor; align-items: baseline; }
.contact-list li:last-child { border-bottom: 2px solid currentColor; }
.contact-list strong { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1; }
.contact-list li > span { font-size: 1.1875rem; }
.copy { font-size: 0.875rem; font-weight: 700; padding: 0.25rem 0.65rem; margin-left: 0.6rem; border: 1.5px solid currentColor; border-radius: 2px; background: transparent; color: inherit; cursor: pointer; }
.copy:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.on-light .copy:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.bio-box { border: 2px solid var(--ink); background: var(--white); padding: 1.3rem 1.5rem; }
.bio-box + .bio-box { margin-top: 1.25rem; }
.bio-box h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bio-box ul { padding-left: 1.2em; }

/* Footer */
.site-footer { background: var(--deep); color: var(--white); padding-block: clamp(3rem, 7vw, 5.5rem); }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2rem clamp(2.5rem, 7vw, 7rem); align-items: start; padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule-d); }
.foot-id { display: grid; gap: 0.35rem; }
.foot-name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5rem); line-height: 0.86; margin-bottom: 0.7rem; }
.foot-links { list-style: none; display: grid; gap: 0.45rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.fineprint { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: 0.875rem; color: var(--mute-d); max-width: 60rem; }
.fineprint p + p { margin-top: 0.6em; }

/* ---- Smaller screens ---- */
@media (max-width: 68rem) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-photo { position: static; max-width: 24rem; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split, .qa-layout { grid-template-columns: minmax(0, 1fr); }
  .qa-index { position: static; }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 51.25rem) {
  :root { --header: 3.75rem; }
  .menu-btn { display: inline-block; margin-left: auto; padding: 0.4rem 0.85rem; border: 2px solid currentColor; border-radius: 2px; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
  .js .site-header nav { display: none; }
  .js .site-header.is-open nav { display: block; position: absolute; inset: 100% 0 auto 0; background: var(--deep); color: var(--white); padding: 1rem var(--gutter) 1.75rem; }
  .js .site-header.is-open .nav { flex-direction: column; align-items: flex-start; gap: 0.5rem; font-size: 1.375rem; }
  html:not(.js) .site-header { position: static; background: var(--deep); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 15.5rem minmax(0, 1fr); gap: 0.5rem; padding: calc(var(--header) + 0.25rem) var(--gutter) 3.5rem; }
  .hero-copy { align-content: start; }
  .hero-copy > * { align-self: start; }
  .hero-intro { gap: 0.9rem; }
  .name { font-size: clamp(4.25rem, 25vw, 8rem); white-space: normal; }
  .hero-intro .lead { font-size: 1.0625rem; }
  .stage-copy { gap: 0.5rem; }
  .stage-copy h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .stage-copy p { font-size: 1rem; line-height: 1.4; }
  .stage-rail ol { display: none; }
  .hero-hint { bottom: 2.4rem; }
  .hero-hint::after { height: 1.5rem; }
  .row, .contact-list li { grid-template-columns: minmax(0, 1fr); }
  .reviews, .proof, .videos, .videos-2 { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-id { grid-column: 1 / -1; }
}

/* No pinning for people who ask for less motion: the finished drawing, then the steps as a list. */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto; }
  .hero-pin { position: relative; height: auto; min-height: 100vh; }
  .js .hero-pin .hero-copy > [data-s] { grid-area: auto; opacity: 1; transform: none; visibility: visible; transition: none; margin-bottom: 2rem; }
  .hero-copy { align-content: start; }
  .name { white-space: normal; font-size: clamp(4rem, 9vw, 8rem); }
  .stage-rail, .hero-hint { display: none; }
  .hero-hint::after { animation: none; }
  .video img { transition: none; }
}
@media print {
  .site-header, .stage-rail, .hero-hint { display: none; }
}