/* Champion University homepage styles, version 6. Written 2026-09-18.
   Night-shift photography carries the page; type stays quiet (Switzer, regular and medium).
   Each section has its own idea; no card kit. */

:root {
  --night: #080d18;
  --navy: #0f1b33;
  --ink: #0f1b33;
  --text: #3b4254;
  --muted: #5c6274;
  --mute-l: rgba(255, 255, 255, .62);
  --line: #e7e9ed;
  --line-l: rgba(255, 255, 255, .12);
  --soft: #eff1f4;
  --green: #3fbf7f;
  --amber: #e0a526;
  --red: #ff4d5e;
  --wide: 1320px;
  --g: clamp(20px, 4vw, 48px);
  --sec: clamp(88px, 11vw, 144px);
  --side: max(var(--g), calc((100vw - var(--wide)) / 2 + var(--g)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: #fff; font: 400 17px/1.55 "Switzer", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
p, ol, ul, blockquote, h1, h2, h3, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.04; }
h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: #fff; color: var(--ink); padding: 8px 12px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.band--paper :focus-visible, .climb :focus-visible, .bible :focus-visible { outline-color: var(--ink); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #e6e9ef; }
.btn--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: rgba(255,255,255,.16); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #1f2f52; }
.btn--soft { background: var(--soft); color: var(--ink); }
.btn--soft:hover { background: #e3e6eb; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* header: transparent over the photo, solid once you scroll */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; transition: background .3s; }
.nav.is-solid { background: rgba(8, 13, 24, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav__in { max-width: var(--wide); margin: 0 auto; padding: 0 var(--g); height: 64px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; font-size: 15px; font-weight: 500; }
.brand img { width: 30px; height: 30px; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { text-decoration: none; color: rgba(255,255,255,.78); }
.nav__links a:hover, .nav__links a[aria-current] { color: #fff; }
.nav__burger { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; position: relative; }
.nav__burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: #fff; transition: transform .2s; }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu { display: grid; max-height: calc(100svh - 64px); overflow-y: auto; padding: 8px var(--g) 28px; background: rgba(8,13,24,.97); }
.menu[hidden] { display: none; }
.menu a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--line-l); text-decoration: none; font-size: 19px; letter-spacing: -.01em; }
.menu a[aria-current] { color: var(--mute-l); }
.menu .btn { margin-top: 20px; justify-self: start; }
.nav.is-open { background: rgba(8,13,24,.97); }

/* 1. hero */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.hero picture, .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__img { object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,24,.9) 0%, rgba(8,13,24,.2) 45%, rgba(8,13,24,.35) 100%); }
.hero__in { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(48px, 8vh, 88px); max-width: var(--wide); margin: 0 auto; padding: 0 var(--g); }
.hero__in p { margin-top: 18px; max-width: 30em; color: var(--mute-l); }
.hero .actions { margin-top: 28px; }
.hero__proof { position: absolute; z-index: 1; right: max(var(--g), calc((100vw - var(--wide)) / 2 + var(--g))); bottom: clamp(48px, 8vh, 88px); text-align: right; font-size: 14px; line-height: 1.5; color: var(--mute-l); }
.stars { color: #f2b632; letter-spacing: 2px; }

/* 2. manifesto: pinned, the client's standard revealed line by line */
.manifesto { height: 360svh; }
.manifesto__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.manifesto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.manifesto__text { position: relative; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--g); }
.line { max-width: 22em; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.22; letter-spacing: -.02em; color: rgba(255,255,255,.14); transition: color .5s ease; }
.line.is-on { color: #fff; }
.line--end { margin-top: 28px; font-size: 17px; letter-spacing: 0; }
.line--end.is-on { color: var(--mute-l); }

/* 3. three seats: the portrait you point at opens */
.seats { padding: var(--sec) var(--side) 0; }
.seats__title { margin-bottom: 32px; }
.seats__row { display: flex; gap: 10px; height: min(78svh, 760px); }
.seat { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 4px; text-decoration: none; background: var(--img) center / cover no-repeat; transition: flex .7s cubic-bezier(.2,.7,.2,1); }
.seat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,24,.92) 0%, rgba(8,13,24,.1) 55%); }
.seat.is-open { flex: 2.3; }
.seat__body { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; }
.seat__body p, .seat__more { max-width: 28em; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.seat.is-open .seat__body p, .seat.is-open .seat__more { opacity: 1; transform: none; transition-delay: .25s; }
.seat__body p { margin-top: 10px; color: rgba(255,255,255,.78); font-size: 16px; }
.seat__more { display: block; margin-top: 14px; font-size: 14px; color: var(--mute-l); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.3); }

/* 4. the inspection: flashlight with service-manual callouts */
.inspect { padding: var(--sec) var(--side) 0; }
.inspect__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 32px; }
.inspect__head h2 { max-width: 16em; }
.inspect__head p { max-width: 24em; color: var(--mute-l); font-size: 16px; }
.stage { position: relative; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: 4px; background: #000; cursor: none; touch-action: pan-y; --lx: 30%; --ly: 50%; --r: 150px; }
.stage picture, .stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage__dark { filter: brightness(.16) saturate(.5); transition: filter 1s ease; }
.stage__lit { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 45%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 45%, transparent 100%); }
.stage__lit img { filter: brightness(1.2); }
.stage.is-done .stage__dark { filter: brightness(.55) saturate(.8); }
.stage__ring { position: absolute; left: var(--lx); top: var(--ly); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); pointer-events: none; }
.stage__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage__lines polyline { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1; }
.stage__lines circle { fill: #fff; }
.stage__lines g { opacity: 0; transition: opacity .35s; }
.stage__lines g.is-on { opacity: 1; }
.callout { position: absolute; display: grid; gap: 2px; font-size: 14px; line-height: 1.3; text-shadow: 0 1px 12px rgba(0,0,0,.9); opacity: 0; transition: opacity .35s; pointer-events: none; }
.callout.is-on { opacity: 1; }
.callout b { font-weight: 500; }
.g { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.g::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.g--green { color: var(--green); }
.g--amber { color: var(--amber); }
.g--red { color: var(--red); }
.inspect__count { margin-top: 14px; font-size: 14px; color: var(--mute-l); }
.inspect__count span { color: #fff; }

/* 5. the climb: a staircase from their own artwork, on paper */
.climb { margin-top: var(--sec); background: #fff; color: var(--text); padding: var(--sec) 0; }
.climb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-left: max(var(--g), calc((100vw - var(--wide)) / 2 + var(--g))); padding-right: max(var(--g), calc((100vw - var(--wide)) / 2 + var(--g))); }
.climb h2 { color: var(--ink); }
.climb__head p { margin-top: 16px; max-width: 26em; color: var(--muted); font-size: 16px; }
.climb__head .btn { margin-top: 28px; }
.stairs { list-style: none; padding: 0; display: flex; flex-direction: column-reverse; counter-reset: step; }
.stairs li { counter-increment: step; margin-left: calc(var(--i) * 5.5%); padding: 10px 0 10px 4px; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: 16px; display: flex; gap: 14px; align-items: baseline; }
.stairs li::before { content: counter(step); min-width: 16px; font-size: 13px; color: var(--muted); }
.stairs .stairs__top { border-bottom-color: #c8102e; font-weight: 500; }
.stairs .stairs__top::before { content: "★"; color: #c8102e; }

/* 6. the DVI Bible: captions sit under their own book */
.bible { background: #fff; color: var(--text); padding: 0 max(var(--g), calc((100vw - var(--wide)) / 2 + var(--g))) var(--sec); }
.bible__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 32px; }
.bible h2 { color: var(--ink); max-width: 18em; }
.bible__shelf img { width: 100%; height: min(62svh, 620px); object-fit: cover; object-position: 50% 40%; border-radius: 4px; }
.bible__captions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 20px; padding: 0 10%; text-align: center; }
.bible__captions p { font-size: 15px; color: var(--muted); max-width: 22em; margin: 0 auto; }
.bible__captions b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }

/* 7. videos: the real ones, playable here */
.videos { padding: var(--sec) var(--side); }
.videos__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 32px; }
.videos__head p { max-width: 26em; color: var(--mute-l); font-size: 16px; }
.player { display: grid; grid-template-columns: 8fr 4fr; gap: 32px; }
.player__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.player__screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.45); }
.player__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; transition: transform .2s; }
.player__play:hover { transform: scale(1.06); }
.player__title { position: absolute; left: 28px; right: 28px; bottom: 24px; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.015em; line-height: 1.25; max-width: 22em; }
.player__list { list-style: none; padding: 0; border-top: 1px solid var(--line-l); }
.player__list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-l); padding: 14px 0 14px 16px; font-size: 15px; line-height: 1.35; color: var(--mute-l); position: relative; transition: color .2s; }
.player__list button:hover { color: #fff; }
.player__list button.is-current { color: #fff; }
.player__list button.is-current::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: #fff; }
.videos__more { display: inline-block; padding: 10px 0; margin-top: 14px; font-size: 15px; color: var(--mute-l); text-underline-offset: 4px; }

/* 8. close */
.close { background: var(--navy); padding: var(--sec) max(var(--g), calc((100vw - var(--wide)) / 2 + var(--g))); }
.close blockquote { max-width: 20em; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; letter-spacing: -.025em; }
.close__who { margin-top: 18px; font-size: 14px; color: var(--mute-l); }
.close h2 { margin-top: 64px; font-size: 18px; letter-spacing: -.01em; }
.close .actions { margin-top: 18px; }

/* footer */
.foot { padding: 56px var(--side) 32px; font-size: 14px; color: var(--mute-l); border-top: 1px solid var(--line-l); }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.foot__cols > div { display: grid; gap: 8px; align-content: start; }
.foot__h { color: #fff; font-weight: 500; margin-bottom: 4px; }
.foot__cols a { text-decoration: none; }
.foot__cols a:hover { color: #fff; }
.foot__base { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-l); }
.foot__base a { color: #fff; }

/* video lightbox */
.lightbox { width: min(1100px, 92vw); aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; overflow: visible; }
.lightbox::backdrop { background: rgba(4, 7, 13, .86); }
.lightbox__frame, .lightbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close { position: absolute; right: 0; top: -44px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; }

/* tablet */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 960px) {
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .inspect__head, .videos__head, .bible__head { flex-direction: column; align-items: start; }
  .climb { grid-template-columns: 1fr; }
  .player { grid-template-columns: 1fr; }
}

/* phone: designed for the thumb, not squeezed */
@media (max-width: 760px) {
  body { font-size: 16px; }
  h1 { font-size: 36px; }
  /* phone photo: gauge low, dark space high, so the words sit in the dark space */
  .hero__in { top: 104px; bottom: auto; }
  .hero__img { object-position: 50% 100%; }
  .hero::after { background: linear-gradient(to bottom, rgba(8,13,24,.9) 0%, rgba(8,13,24,.55) 50%, transparent 72%); }
  .hero__proof { bottom: 28px; text-shadow: 0 1px 10px rgba(0,0,0,.9); }
  .bible__shelf img { height: auto; aspect-ratio: 1672 / 941; }
  .hero__proof { left: var(--g); right: auto; text-align: left; }
  .line { font-size: 24px; }
  .seats__row { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--g) * -1); padding: 0 var(--g); scrollbar-width: none; }
  .seats__row::-webkit-scrollbar { display: none; }
  .seat, .seat.is-open { flex: 0 0 82%; height: 68svh; scroll-snap-align: center; }
  .seat .seat__body p, .seat .seat__more { opacity: 1; transform: none; }
  .seat__body { left: 20px; right: 20px; bottom: 20px; }
  .stage { aspect-ratio: 1122 / 1402; --r: 100px; margin: 0 calc(var(--g) * -1); border-radius: 0; }
  .callout { font-size: 13px; }
  .stairs li { margin-left: calc(var(--i) * 3.5%); font-size: 15px; }
  .bible__captions { grid-template-columns: 1fr; gap: 16px; padding: 0; text-align: left; }
  .bible__captions p { margin: 0; }
  .player__title { left: 18px; right: 18px; bottom: 16px; }
  .player__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .foot__base { flex-direction: column; }
  .foot__base span:last-child { align-self: flex-end; }
  .nav__join { display: none; }
  .foot__cols a { padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* =====================================================================
   Inner pages (added 2026-09-18). Same system as the homepage:
   photo-led, one idea per section, no card kit.
   ===================================================================== */

/* page hero: shorter than the homepage hero, same treatment */
.phero { position: relative; height: 84svh; min-height: 560px; overflow: hidden; }
.phero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,24,.94) 0%, rgba(8,13,24,.25) 50%, rgba(8,13,24,.45) 100%); }
.phero__in { position: absolute; z-index: 1; left: var(--side); right: var(--side); bottom: clamp(44px, 8vh, 80px); }
.phero__kicker { font-size: 15px; color: var(--mute-l); margin-bottom: 14px; }
.phero h1 { max-width: 15em; }
.phero__in > p:not(.phero__kicker) { margin-top: 18px; max-width: 32em; color: var(--mute-l); }
.phero .actions { margin-top: 26px; }

/* bands */
.band { padding: var(--sec) var(--side); }
.band--paper { background: #fff; color: var(--text); }
.band--paper h2, .band--paper h3 { color: var(--ink); }
.band--navy { background: var(--navy); }
.band + .band--paper, .band--paper + .band--paper { padding-top: 0; }
.head2 { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 40px; }
.head2 h2 { max-width: 17em; }
.head2 p { max-width: 26em; font-size: 16px; color: var(--mute-l); }
.band--paper .head2 p { color: var(--muted); }
.lead { max-width: 34em; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.82); }
.band--paper .lead { color: var(--text); }
.lead + .lead { margin-top: 16px; }

/* a strong line set large, the client's own words */
.say { max-width: 20em; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.025em; }
.say--sm { font-size: clamp(24px, 2.6vw, 34px); }
.say__who { margin-top: 18px; font-size: 14px; color: var(--mute-l); }
.band--paper .say { color: var(--ink); }
.band--paper .say__who { color: var(--muted); }

/* stacked statements that stay in step with the page (one per line, big) */
.stack { list-style: none; padding: 0; border-top: 1px solid var(--line-l); }
.stack li { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line-l); }
.stack b { font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em; line-height: 1.15; }
.stack span { color: var(--mute-l); max-width: 36em; }
.band--paper .stack, .band--paper .stack li { border-color: var(--line); }
.band--paper .stack b { color: var(--ink); }
.band--paper .stack span { color: var(--muted); }

/* photo beside words */
.split { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.split__img--wide { aspect-ratio: 16 / 11; }
/* product covers carry the client's own lettering: never crop them */
.split__img--natural, .split__img.split__img--natural { aspect-ratio: auto; object-fit: contain; }
.split h2 + p, .split h2 + .lead { margin-top: 18px; }
.split .actions { margin-top: 28px; }
.split p:not(.lead) { color: var(--mute-l); }
.band--paper .split p:not(.lead) { color: var(--muted); }

/* three photos with a line each */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.trio figcaption { margin-top: 16px; }
.trio h3 { font-size: 19px; }
.trio figcaption p { margin-top: 6px; font-size: 15px; color: var(--mute-l); }
.band--paper .trio figcaption p { color: var(--muted); }

/* ascending tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.tier { padding: 24px 24px 28px; background: rgba(255,255,255,.05); border-top: 2px solid #fff; }
.tier:nth-child(1) { min-height: 260px; } .tier:nth-child(2) { min-height: 330px; } .tier:nth-child(3) { min-height: 400px; }
.tier__n { font-size: 14px; color: var(--mute-l); }
.tier h3 { margin-top: 10px; font-size: 21px; }
.tier p { margin-top: 12px; font-size: 15px; color: var(--mute-l); }

/* index rows for course lists (name left, one line right) */
.index { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.index li { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.index b { font-weight: 500; color: var(--ink); font-size: 18px; letter-spacing: -.01em; }
.index span { color: var(--muted); font-size: 15px; }
.index em { font-style: normal; font-size: 13px; color: var(--muted); display: block; margin-top: 4px; }
.band:not(.band--paper) .index, .band:not(.band--paper) .index li { border-color: var(--line-l); }
.band:not(.band--paper) .index b { color: #fff; }
.band:not(.band--paper) .index span, .band:not(.band--paper) .index em { color: var(--mute-l); }

/* pick five: the real DVI bundle offer, as something you can do */
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick { position: relative; text-align: left; border: 0; background: var(--soft); color: var(--ink); border-radius: 4px; padding: 20px 20px 22px 52px; transition: background .2s, color .2s; }
.pick::before { content: ""; position: absolute; left: 20px; top: 22px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #b7bcc7; transition: .2s; }
.pick b { display: block; font-weight: 500; font-size: 16px; }
.pick span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.pick[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pick[aria-pressed="true"] span { color: rgba(255,255,255,.7); }
.pick[aria-pressed="true"]::before { background: #fff; box-shadow: inset 0 0 0 5px var(--ink), 0 0 0 1.5px #fff; }
.pick:disabled { opacity: .45; cursor: default; }
.picker__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
.picker__count { font-size: 15px; color: var(--muted); }
.picker__count b { color: var(--ink); font-weight: 500; }

/* the six failures, opened one at a time like a fault list */
.faults { list-style: none; padding: 0; counter-reset: f; border-top: 1px solid var(--line-l); }
.faults li { counter-increment: f; border-bottom: 1px solid var(--line-l); }
.faults button { width: 100%; display: grid; grid-template-columns: 56px 1fr 24px; align-items: baseline; gap: 12px; padding: 22px 0; border: 0; background: none; text-align: left; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; }
.faults button::before { content: "0" counter(f); font-size: 14px; letter-spacing: 0; color: var(--mute-l); }
.faults button::after { content: "+"; font-size: 22px; color: var(--mute-l); transition: transform .25s; }
.faults button[aria-expanded="true"]::after { transform: rotate(45deg); }
.faults .fault__fix { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faults .fault__fix > div { overflow: hidden; }
.faults .fault__fix p { padding: 0 36px 26px 68px; max-width: 46em; color: var(--mute-l); }
.faults li.is-open .fault__fix { grid-template-rows: 1fr; }

/* ten topics set as a wrapped line of words */
.topics { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.5; }
.topics span { color: var(--ink); }
.topics span:nth-child(even) { color: var(--muted); }

/* prompts, as they would be typed */
.prompts { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 40em; }
.prompts li { padding: 14px 18px; border-radius: 18px 18px 18px 4px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); width: fit-content; }
.prompts li:nth-child(even) { margin-left: 48px; }

/* long-form reading (the manifesto in full) */
.read { max-width: 38em; }
.read p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.8); }
.read p + p { margin-top: 22px; }
.read p:first-child { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -.02em; color: #fff; }

/* numbered real sequence (how Community Care works) */
.steps4 { list-style: none; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps4 li { counter-increment: s; padding-top: 18px; border-top: 2px solid var(--ink); color: var(--ink); font-size: 18px; letter-spacing: -.01em; }
.steps4 li::before { content: counter(s); display: block; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.cascade { margin-top: 56px; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.cascade span { display: block; }
.cascade span:nth-child(2) { padding-left: 1.5em; color: var(--text); }
.cascade span:nth-child(3) { padding-left: 3em; color: var(--muted); }

/* the stair component on dark backgrounds */
.band:not(.band--paper) .stairs li { color: #fff; border-bottom-color: rgba(255,255,255,.7); }
.band:not(.band--paper) .stairs li::before { color: var(--mute-l); }
.stairs--solo { max-width: 760px; margin-left: auto; }

/* a coming-soon mark, plain words */
.soon { display: inline-block; margin-left: 8px; font-size: 13px; color: var(--muted); font-weight: 400; }

@media (max-width: 960px) {
  .head2 { flex-direction: column; align-items: start; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .trio, .picker { grid-template-columns: 1fr 1fr; }
  .steps4 { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier:nth-child(n) { min-height: 0; }
}
@media (max-width: 760px) {
  .phero { height: 78svh; }
  .stack li, .index li { grid-template-columns: 1fr; gap: 6px; }
  .trio { grid-template-columns: 1fr; }
  .trio figure img { aspect-ratio: 4 / 3; }
  .picker { grid-template-columns: 1fr; }
  .picker__bar { flex-direction: column; align-items: start; }
  .faults button { grid-template-columns: 36px 1fr 20px; }
  .faults .fault__fix p { padding: 0 0 22px 48px; }
  .steps4 { grid-template-columns: 1fr; gap: 20px; }
  .prompts li:nth-child(even) { margin-left: 24px; }
  .read p { font-size: 17px; }
  .split__img { aspect-ratio: 4 / 3; }
}

/* small helpers used by the inner pages */
.link-dark { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: #c9cdd6; text-underline-offset: 4px; }
.link-dark:hover { text-decoration-color: var(--ink); }
.player__list--scroll { max-height: min(62vh, 520px); overflow-y: auto; scrollbar-width: thin; }
.player__list--paper { border-color: var(--line); margin-top: 8px; }
.player__list--paper button { color: var(--muted); border-color: var(--line); }
.player__list--paper button:hover, .player__list--paper button.is-current { color: var(--ink); }
.player__list--paper button.is-current::before { background: var(--ink); }
.close .say { color: #fff; }
.close .say + h2 { margin-top: 56px; }

/* =====================================================================
   Inner pages rebuild (2026-09-18): Training Paths, DVI Training,
   Shop Owners, Service Advisors. One idea per section.
   ===================================================================== */
.link-light { padding: 0; border: 0; background: none; font: inherit; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }
.link-light:hover { text-decoration-color: #fff; }

/* ---------- Training Paths: the route ---------- */
.route { padding: var(--sec) var(--side); }
.route__head h2 { font-size: clamp(30px, 3.4vw, 46px); }
.route__pick { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 28px; }
.route__pick button { padding: 6px 0; border: 0; background: none; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.02em; color: rgba(255,255,255,.4); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.route__pick button:hover { color: rgba(255,255,255,.75); }
.route__pick button[aria-selected="true"] { color: #fff; border-bottom-color: #fff; }
.route__map { position: relative; margin-top: 64px; }
.route__line { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: rgba(255,255,255,.14); }
.route__line::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--draw, 0)); transition: transform 1.1s cubic-bezier(.3,.7,.2,1); }
.route__stops { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; counter-reset: stop; }
.route__stops li { counter-increment: stop; position: relative; padding-top: 34px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--k) * 70ms); }
.route__stops.is-in li { opacity: 1; transform: none; }
.route__stops li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 2px #fff; }
.route__stops li.is-goal::before { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.15); }
.route__stops b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.route__stops b::before { content: counter(stop); display: block; margin-bottom: 6px; font-size: 13px; font-weight: 400; color: var(--mute-l); }
.route__stops .is-goal b::before { content: "★"; color: #f2b632; }
.route__stops span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--mute-l); }
.route__foot { margin-top: 56px; }

/* ---------- Training Paths: the Boot Camp as one visit ---------- */
.visit { padding: 0 var(--side) var(--sec); }
.visit__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; }
.visit__head h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 12em; }
.visit__head p { max-width: 26em; color: var(--mute-l); }
.visit__row { display: grid; grid-template-columns: 4fr 3fr 4fr; gap: 32px; align-items: stretch; margin-top: 48px; }
.visit__end { position: relative; margin: 0; }
.visit__end img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: 4px; }
.visit__end figcaption { position: absolute; left: 18px; bottom: 16px; font-size: 15px; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.visit__steps { list-style: none; padding: 0 0 0 22px; margin: 0; align-self: center; position: relative; counter-reset: v; }
.visit__steps::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 1px; background: rgba(255,255,255,.3); }
.visit__steps li { counter-increment: v; position: relative; padding: 7px 0; font-size: 16px; color: rgba(255,255,255,.88); }
.visit__steps li::before { content: ""; position: absolute; left: -22px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.visit__note { margin-top: 24px; font-size: 14px; color: var(--mute-l); }

/* ---------- Training Paths: pick five in big type ---------- */
.five { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; padding: var(--sec) var(--side); background: #fff; color: var(--text); }
.five h2 { color: var(--ink); font-size: clamp(30px, 3.4vw, 46px); }
.five__side { position: sticky; top: 96px; align-self: start; }
.five__side p { margin-top: 12px; color: var(--muted); max-width: 20em; }
.five__side .five__count { margin: 28px 0 20px; font-size: clamp(64px, 8vw, 112px); line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.five__count small { font-size: .4em; letter-spacing: 0; color: var(--muted); }
.five__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.five__list li { border-bottom: 1px solid var(--line); }
.five .pick { width: 100%; display: block; padding: 22px 0 22px 44px; background: none; border-radius: 0; }
.five .pick::before { left: 0; top: 30px; width: 22px; height: 22px; }
.five .pick b { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.2; }
.five .pick span { font-size: 15px; }
.five .pick[aria-pressed="true"] { background: none; color: var(--ink); }
.five .pick[aria-pressed="true"] span { color: var(--muted); }
.five .pick[aria-pressed="true"]::before { background: var(--ink); box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 11px #fff; }
.five .pick:disabled b { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- Training Paths: AI band ---------- */
.aiband { position: relative; overflow: hidden; }
.aiband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.32); }
.aiband__in { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; padding: var(--sec) var(--side); }
.aiband h2 { font-size: clamp(28px, 3vw, 40px); }
.aiband__in p { margin: 16px 0 28px; color: rgba(255,255,255,.75); max-width: 26em; }
.aiband__list { list-style: none; padding: 0; columns: 2; column-gap: 40px; counter-reset: a; }
.aiband__list li { counter-increment: a; break-inside: avoid; display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.015em; }
.aiband__list li::before { content: counter(a, decimal-leading-zero); font-size: 13px; color: var(--mute-l); }

/* ---------- DVI: anatomy of a finding ---------- */
.anatomy { height: 380svh; }
.anatomy__pin { position: sticky; top: 64px; height: calc(100svh - 64px); display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; padding: 0 var(--side); }
.anatomy__photo { position: relative; margin: 0; aspect-ratio: 1672 / 941; border-radius: 4px; overflow: hidden; }
.anatomy__photo img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s; }
.anatomy__photo[data-layers="0"] img { filter: brightness(.55) saturate(.7); }
.anatomy__photo figcaption { position: absolute; right: 16px; top: 14px; font-size: 13px; color: rgba(255,255,255,.6); }
.layer { position: absolute; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; }
.layer--frame { left: 12%; top: 14%; width: 30%; height: 70%; --b: #fff; background:
  linear-gradient(var(--b), var(--b)) top left / 28px 2px, linear-gradient(var(--b), var(--b)) top left / 2px 28px,
  linear-gradient(var(--b), var(--b)) top right / 28px 2px, linear-gradient(var(--b), var(--b)) top right / 2px 28px,
  linear-gradient(var(--b), var(--b)) bottom left / 28px 2px, linear-gradient(var(--b), var(--b)) bottom left / 2px 28px,
  linear-gradient(var(--b), var(--b)) bottom right / 28px 2px, linear-gradient(var(--b), var(--b)) bottom right / 2px 28px; background-repeat: no-repeat; }
.layer--measure { left: 44%; top: 42%; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(16px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.layer--note { left: 44%; top: 56%; max-width: 44%; font-size: 15px; line-height: 1.4; text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.layer--grade { left: 44%; top: 74%; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--amber); text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.layer--grade i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.anatomy__photo[data-layers="1"] .layer--frame,
.anatomy__photo[data-layers="2"] :is(.layer--frame, .layer--measure),
.anatomy__photo[data-layers="3"] :is(.layer--frame, .layer--measure, .layer--note),
.anatomy__photo[data-layers="4"] .layer { opacity: 1; transform: none; }
.anatomy__text h2 { font-size: clamp(26px, 2.6vw, 36px); }
.anatomy__steps { list-style: none; padding: 0; margin-top: 28px; counter-reset: s; }
.anatomy__steps li { counter-increment: s; padding: 16px 0 16px 40px; position: relative; border-top: 1px solid var(--line-l); color: rgba(255,255,255,.35); transition: color .35s; }
.anatomy__steps li::before { content: counter(s); position: absolute; left: 0; top: 18px; font-size: 13px; }
.anatomy__steps li.is-on, .anatomy__steps li.is-done { color: #fff; }
.anatomy__steps li.is-done span { color: var(--mute-l); }
.anatomy__steps b { display: block; font-weight: 500; font-size: 19px; letter-spacing: -.01em; }
.anatomy__steps span { display: block; margin-top: 4px; font-size: 15px; }

/* ---------- DVI: the shelf you can touch ---------- */
.shelf { background: #fff; color: var(--text); padding: var(--sec) var(--side); }
.shelf__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.shelf__head h2 { color: var(--ink); max-width: 17em; }
.shelf__head p { max-width: 24em; color: var(--muted); }
.shelf__stage { position: relative; border-radius: 4px; overflow: hidden; }
.shelf__stage img { width: 100%; }
.shelf__zone { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border: 0; background: rgba(8,13,24,.55); cursor: pointer; transition: background .35s; }
.shelf__zone:hover, .shelf__zone.is-on { background: rgba(8,13,24,0); }
.shelf__read { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-top: 28px; }
.shelf__entry h3 { color: var(--ink); font-size: 24px; }
.shelf__entry p { margin-top: 8px; max-width: 40em; color: var(--muted); }

/* ---------- DVI: four corners from above ---------- */
.corners { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; padding: var(--sec) var(--side); }
.corners h2 { font-size: clamp(28px, 3vw, 40px); }
.corners__text > p:not(.corners__now) { margin-top: 16px; color: var(--mute-l); max-width: 30em; }
.corners__now { margin: 28px 0; font-size: 18px; }
.corners__car { width: 100%; max-width: 380px; justify-self: center; }
.corners__route { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 1.2 1.6; }
.corners__body * { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.5; }
.corners__wheels rect { fill: rgba(255,255,255,.2); }
.corners__marks circle { fill: var(--night); stroke: rgba(255,255,255,.4); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.corners__marks text { fill: rgba(255,255,255,.6); font-size: 13px; text-anchor: middle; font-family: inherit; }
.corners__marks g.is-on circle { fill: #fff; stroke: #fff; }
.corners__marks g.is-on text { fill: var(--ink); }
.corners__walker { fill: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.6)); }

/* ---------- Owners: where the questions go ---------- */
.flow { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: var(--sec) var(--side); }
.flow h2 { font-size: clamp(28px, 3vw, 40px); }
.flow__text > p { margin-top: 16px; color: var(--mute-l); max-width: 28em; }
.flow__switch { display: inline-flex; margin: 28px 0 22px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
.flow__switch button { padding: 10px 18px; border: 0; border-radius: 999px; background: none; font-size: 15px; color: var(--mute-l); transition: background .25s, color .25s; }
.flow__switch button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.flow__text .link-light { display: block; font-size: 15px; }
.flow__map { width: 100%; }
.flow__map text { fill: rgba(255,255,255,.7); font-size: 14px; text-anchor: middle; font-family: inherit; }
.flow__nodes .n circle { fill: var(--night); stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.n--owner circle { fill: #fff !important; stroke: #fff !important; transition: fill .5s, stroke .5s; }
.n--owner text { fill: #fff !important; font-size: 16px !important; }
.n--std rect { fill: #fff; transition: opacity .5s; }
.n--std text { fill: var(--ink) !important; font-size: 15px !important; font-weight: 500; transition: opacity .5s; }
.flow__map[data-mode="me"] .n--std { opacity: 0; }
.flow__map[data-mode="std"] .n--owner circle { fill: var(--night) !important; stroke: rgba(255,255,255,.4) !important; }
.flow__lines path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; stroke-dasharray: 4 8; animation: flow 1.2s linear infinite; transition: opacity .5s; }
.flow__lines .to-std { opacity: 0; }
.flow__map[data-mode="std"] .to-me { opacity: 0; }
.flow__map[data-mode="std"] .to-std { opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -12; } }

/* ---------- Owners: four scenes ---------- */
.scenes { background: #fff; color: var(--text); padding: var(--sec) var(--side); }
.scenes__head h2 { color: var(--ink); font-size: clamp(28px, 3vw, 40px); max-width: 16em; }
.scenes__head p { margin-top: 14px; max-width: 34em; color: var(--muted); }
.scene-list { margin-top: 56px; }
.sc { margin: 0; padding: 40px 0; border-top: 1px solid var(--line); max-width: 760px; }
.sc--right { margin-left: auto; text-align: right; }
.sc blockquote, .sc__situation { margin: 0; color: var(--ink); font-size: clamp(26px, 3vw, 42px); line-height: 1.15; letter-spacing: -.025em; }
.sc__situation { color: var(--muted); }
.sc figcaption { margin-top: 14px; font-size: 17px; color: var(--text); max-width: 32em; }
.sc--right figcaption { margin-left: auto; }
.scenes__cta { margin-top: 40px; }

/* ---------- Owners: the voice of your shop ---------- */
.voice { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; }
.voice__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.voice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent 25%, rgba(8,13,24,.92) 62%); }
.voice__in { position: relative; z-index: 1; margin-left: auto; width: min(520px, 46%); margin-right: var(--side); padding: 64px 0; }
.voice h2 { font-size: clamp(28px, 3vw, 40px); }
.voice__in > p { margin-top: 16px; color: rgba(255,255,255,.78); }
.voice__ladder { list-style: none; padding: 0; margin: 28px 0; }
.voice__ladder li { padding: 10px 0; border-top: 1px solid var(--line-l); font-size: 16px; }
.voice__ladder li:nth-child(2) { padding-left: 20px; } .voice__ladder li:nth-child(3) { padding-left: 40px; }
.voice__ladder b { font-weight: 500; margin-right: 10px; color: var(--mute-l); }

/* ---------- Owners: where to start on Monday ---------- */
.monday { background: #fff; color: var(--text); padding: var(--sec) var(--side); }
.monday h2 { color: var(--ink); font-size: clamp(28px, 3vw, 40px); }
.monday__steps { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: m; }
.monday__steps li { counter-increment: m; padding-top: 20px; border-top: 2px solid var(--ink); }
.monday__steps li::before { content: counter(m); display: block; margin-bottom: 14px; font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.monday__steps h3 { color: var(--ink); font-size: 20px; }
.monday__steps p { margin: 8px 0 14px; color: var(--muted); font-size: 15px; }

/* ---------- Advisors: what would you say ---------- */
.talk { padding: var(--sec) var(--side); }
.talk__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.talk__head h2 { font-size: clamp(30px, 3.4vw, 46px); }
.talk__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.talk__tabs button { height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(255,255,255,.07); color: var(--mute-l); font-size: 14px; transition: background .2s, color .2s; }
.talk__tabs button[aria-selected="true"] { background: #fff; color: var(--ink); }
.talk__scene { margin-top: 64px; min-height: 360px; }
.talk__who { font-size: 14px; color: var(--mute-l); }
.talk__them { margin-top: 10px; max-width: 18em; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.1; letter-spacing: -.03em; color: rgba(255,255,255,.5); }
.talk__answer { margin: 44px 0 0 auto; max-width: 620px; padding-left: 24px; border-left: 2px solid #fff; animation: answer .6s .5s both; }
.talk__us { margin: 10px 0 18px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
@keyframes answer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.talk__foot { margin-top: 48px; color: var(--mute-l); }

/* ---------- Advisors: one visit, three pinned moments ---------- */
.moments { height: 330svh; }
.moments__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.moments__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .8s ease; }
.moments__img.is-on { opacity: 1; }
.moments__pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,24,.92), rgba(8,13,24,.1) 55%); }
.moments__text { position: absolute; z-index: 1; left: var(--side); right: var(--side); bottom: clamp(48px, 9vh, 96px); display: grid; }
.moments__bar { list-style: none; padding: 0; display: flex; gap: 6px; margin-bottom: 24px; }
.moments__bar li { width: 40px; height: 2px; background: rgba(255,255,255,.3); transition: background .3s; }
.moments__bar li.is-on { background: #fff; }
.moment { grid-row: 2; grid-column: 1; max-width: 34em; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.moment.is-on { opacity: 1; transform: none; }
.moment h2 { font-size: clamp(32px, 4vw, 56px); }
.moment p { margin-top: 12px; color: rgba(255,255,255,.8); }

/* ---------- Advisors: the book and the line ---------- */
.bookline { background: #fff; color: var(--text); padding: var(--sec) var(--side); }
.bookline__say { color: var(--ink); font-size: clamp(40px, 6.4vw, 92px); line-height: 1; letter-spacing: -.04em; max-width: 11em; }
.bookline__row { display: grid; grid-template-columns: 4fr 7fr; gap: 48px; align-items: end; margin-top: 56px; }
.bookline__row img { width: 100%; max-width: 380px; border-radius: 4px; }
.bookline h2 { color: var(--ink); }
.bookline__row p { margin-top: 12px; max-width: 32em; color: var(--muted); }
.bookline .actions { margin-top: 24px; }

/* ---------- responsive for the rebuild ---------- */
@media (max-width: 960px) {
  .visit__row { grid-template-columns: 1fr 1fr; }
  .visit__steps { grid-column: 1 / -1; grid-row: 2; columns: 2; }
  .visit__head, .shelf__head, .talk__head { flex-direction: column; align-items: start; }
  .five, .aiband__in, .corners, .flow, .bookline__row { grid-template-columns: 1fr; }
  .five__side { position: static; }
  .anatomy__pin { grid-template-columns: 1fr; gap: 24px; align-content: center; }
  .voice::after { background: linear-gradient(to top, rgba(8,13,24,.95) 45%, transparent 80%); }
  .voice { align-items: end; }
  .voice__in { width: auto; margin: 0 var(--side); }
  .monday__steps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .route__line { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .route__line::after { transform-origin: top; transform: scaleY(var(--draw, 0)); }
  .route__stops { grid-auto-flow: row; gap: 0; }
  .route__stops li { padding: 0 0 22px 36px; }
  .route__stops b::before { display: inline; margin: 0 8px 0 0; }
  .route__map { margin-top: 40px; }
  .visit__row { grid-template-columns: 1fr; gap: 20px; }
  .visit__steps { grid-row: auto; columns: 1; }
  .visit__end img { min-height: 0; aspect-ratio: 4 / 3; }
  .aiband__list { columns: 1; }
  .anatomy { height: 340svh; }
  .anatomy__pin { top: 56px; height: calc(100svh - 56px); padding: 16px var(--g); }
  .anatomy__text h2 { font-size: 22px; }
  .anatomy__steps { margin-top: 12px; }
  .anatomy__steps li { padding: 9px 0 9px 32px; }
  .anatomy__steps li::before { top: 11px; }
  .anatomy__steps b { font-size: 16px; }
  .anatomy__steps span { font-size: 13px; }
  .layer--note { display: none; }
  .anatomy__steps li:not(.is-on) span { display: none; }
  .shelf__read { grid-template-columns: 1fr; }
  .corners__car { max-width: 260px; }
  .sc { padding: 28px 0; }
  .sc--right { text-align: left; }
  .talk__scene { margin-top: 40px; min-height: 420px; }
  .talk__answer { margin-top: 32px; }
  .moment h2 { font-size: 32px; }
  .bookline__row img { max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__lines path, .talk__answer { animation: none; }
}
/* fixes from the rebuild check */
.route__stops[hidden] { display: none; }
.shelf__zone { background: rgba(8,13,24,.68); }
.anatomy__pin { grid-template-columns: 8fr 4fr; }
@media (max-width: 760px) {
  .flow__map text { font-size: 24px; }
  .n--owner text { font-size: 26px !important; }
  .n--std text { font-size: 22px !important; }
}
@media (max-width: 760px) {
  .link-light, .link-dark { display: inline-block; padding: 10px 0; }
}

/* =====================================================================
   Second pass, 2026-09-18: calmer inner pages. One idea, one visual,
   few words per section (budget in DESIGN-PLAN-INNER-2026-09-18.md).
   ===================================================================== */

/* four starting points, four big lines */
.starts { padding: var(--sec) var(--side); }
.starts h2 { font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--mute-l); }
.starts__list { margin-top: 28px; border-top: 1px solid var(--line-l); }
.starts__list a { display: block; padding: 22px 0; border-bottom: 1px solid var(--line-l); text-decoration: none; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.035em; color: rgba(255,255,255,.4); transition: color .25s, padding-left .35s cubic-bezier(.2,.7,.2,1); }
.starts__list a:hover, .starts__list a:focus-visible { color: #fff; padding-left: 16px; }

/* one full-bleed photo with a headline, the homepage's language */
.pband { position: relative; min-height: 86svh; display: flex; align-items: flex-end; overflow: hidden; }
.pband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,13,24,.92) 0%, rgba(8,13,24,.2) 55%, rgba(8,13,24,.25) 100%); }
.pband__in { position: relative; z-index: 1; padding: 0 var(--side) clamp(56px, 9vh, 96px); max-width: calc(var(--wide) * .6 + var(--side)); }
.pband h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; }
.pband__in p { margin: 16px 0 28px; max-width: 30em; color: rgba(255,255,255,.78); font-size: 18px; }
.pband--right { justify-content: flex-end; }
.pband--right::after { background: linear-gradient(to right, rgba(8,13,24,.1) 30%, rgba(8,13,24,.9) 70%); }
.pband--right .pband__in { max-width: 560px; padding-left: 0; }

/* the finding: four big words instead of a list */
.anatomy__pin { grid-template-columns: 8fr 4fr; }
.anatomy__words h2 { font-size: clamp(22px, 2vw, 28px); color: var(--mute-l); font-weight: 400; }
.anatomy__word { margin-top: 6px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.035em; color: rgba(255,255,255,.12); transition: color .4s; }
.anatomy__word.is-on { color: #fff; }
.anatomy__word.is-done { color: rgba(255,255,255,.45); }

/* where the questions go, calm */
.flow--calm .flow__text > p { font-size: 19px; color: rgba(255,255,255,.78); }
.flow--calm .flow__switch { margin: 32px 0 0; }
.flow--calm .flow__nodes .n circle { fill: #fff; stroke: none; }
.flow--calm .n--owner circle { fill: #fff !important; }
.flow--calm .flow__map[data-mode="std"] .n--owner circle { fill: var(--night) !important; stroke: rgba(255,255,255,.35) !important; stroke-width: 1.5; }
.flow--calm .flow__lines path { stroke: rgba(255,255,255,.4); }

/* two real customer lines, set huge */
.lines { background: #fff; padding: var(--sec) var(--side); }
.lines__lead { max-width: 20em; color: var(--muted); font-size: 18px; font-weight: 400; letter-spacing: 0; }
.line2 { margin: 56px 0 0; max-width: 15em; }
.line2 blockquote { margin: 0; color: var(--ink); font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; letter-spacing: -.035em; }
.line2 figcaption { margin-top: 18px; font-size: 18px; color: var(--muted); }
.line2--r { margin-left: auto; }
.lines .actions { margin-top: 64px; }

/* one real exchange */
.talk--one { padding: var(--sec) var(--side); }
.talk--one h2.talk__who { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--mute-l); }
.talk--one .talk__them { max-width: 14em; font-size: clamp(38px, 5vw, 72px); }
.talk--one .talk__answer { animation: none; opacity: 0; transform: translateY(12px); transition: opacity .8s .3s, transform .8s .3s; margin-top: 64px; }
.talk--one.is-seen .talk__answer { opacity: 1; transform: none; }
.moment p { font-size: 18px; color: var(--mute-l); }

/* the book and the line, fewer words */
.bookline__row { align-items: center; }

@media (max-width: 760px) {
  .starts__list a { padding: 18px 0; }
  .pband { min-height: 78svh; }
  .pband--right::after { background: linear-gradient(to top, rgba(8,13,24,.94) 40%, rgba(8,13,24,.1) 75%); }
  .pband--right .pband__in { padding-left: var(--side); max-width: none; }
  .pband__in p { font-size: 16px; }
  .anatomy__word { font-size: 30px; }
  .line2 { margin-top: 40px; }
  .line2--r { margin-left: 0; }
  .talk--one .talk__answer { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .talk--one .talk__answer { opacity: 1; transform: none; } }
/* second-pass fixes */
.line2 { max-width: 880px; }
.line2 blockquote { max-width: 13em; }
.line2--r { text-align: right; }
.line2--r blockquote { margin-left: auto; }
@media (max-width: 960px) {
  .anatomy__pin { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .line2--r { text-align: left; }
  .line2--r blockquote { margin-left: 0; }
}

/* =====================================================================
   Phone pass (2026-09-18): tighter rhythm, compact footer, thumb-reach
   join bar, shorter video lists, shorter pinned sections.
   ===================================================================== */
.mbar, .player__more { display: none; }
@media (max-width: 760px) {
  :root { --sec: 64px; }
  .foot__cols a { padding: 3px 0; }

  /* compact footer: each group becomes one wrapped line of links */
  .foot { padding: 36px var(--side) 96px; }
  .foot__cols { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .foot__cols > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .foot__h { width: 100%; margin: 0; }
  .foot__cols span { width: 100%; }
  .foot__base { margin-top: 24px; }

  /* join bar */
  .mbar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; font-size: 16px; text-decoration: none; box-shadow: 0 12px 32px -8px rgba(0,0,0,.6); transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .mbar.is-on { transform: none; }

  /* shorter pinned sections */
  .manifesto { height: 250svh; }
  .moments { height: 270svh; }
  .anatomy { height: 280svh; }

  /* long video lists: first four, then a button */
  .player__list li.is-extra { display: none; }
  .player__list.is-all li.is-extra { display: block; }
  .player__more { display: block; width: 100%; height: 48px; margin-top: 8px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; }
  .player__list--scroll { max-height: none; overflow: visible; }

  /* denser headings on small screens */
  .phero { height: 74svh; min-height: 520px; }
  .head2 { margin-bottom: 28px; }
}