/* ==========================================================================
   DSB Mentorship Program — public site
   Implements docs/BRAND_IDENTITY.md. Tokens are lifted verbatim from
   public/brand/index.html so the site and the brand page are one system.

   Surfaces: white for the public pages, cream for the one tool-like band,
   purple-deep for the hero, purple #3E1952 for the footer (it carries the
   DSB logo, and that mark's surface leads with Asbury's official purple).
   One accent per screen. Hairlines, not boxes. One radius: 3px.
   ========================================================================== */

:root {
  /* ---- palette (BRAND_IDENTITY.md §4.1) ---- */
  --purple: #3E1952;
  --purple-deep: #2B0050;
  --gold: #C9A227;
  --gold-au: #E3BF42;
  --gold-ink: #6E5410;
  --cream: #FAF7F0;
  --cream-dim: #F2ECDD;
  --white: #FFFFFF;
  --ink: #241B2E;
  --ink-soft: #5A4E70;
  --on-purple: #FAF7F0;
  --on-purple-soft: #C6B4D5;
  --rule: rgba(62, 25, 82, .16);
  --rule-strong: rgba(62, 25, 82, .30);
  --rule-on-purple: rgba(250, 247, 240, .24);

  /* ---- type (§5) ---- */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --font-condensed: 'Bebas Neue', 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- layout (§6) ---- */
  --container: 1160px;
  --measure: 68ch;
  --radius: 3px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;
  --space-7: 7.5rem;
}

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
svg { display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--purple-deep);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.4rem, 4vw + 1rem, 3.8rem); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.4rem); letter-spacing: -.01em; max-width: 22ch; }
h3 { font-size: clamp(1.2rem, .6vw + 1rem, 1.45rem); line-height: 1.25; }
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  margin: 0 0 .4em;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: .45em; }
blockquote { margin: 0; }

a {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-thickness 180ms var(--ease), color 180ms var(--ease);
}
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--cream-dim); color: var(--purple-deep); }

/* Focus is always visible (§11.4). On purple surfaces a purple ring would
   disappear, so the ring inverts to cream there. Never animated. */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 2px;
  transition: none;
}
.on-purple :focus-visible { outline-color: var(--on-purple); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  background: var(--white);
  color: var(--purple);
  padding: .7em 1.1em;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

section { padding-block: clamp(56px, 8vw, 120px); }
section.tight { padding-block: clamp(44px, 5vw, 80px); }

.band-cream { background: var(--cream); border-block: 1px solid var(--rule); }
.band-rule { border-top: 1px solid var(--rule); }

.on-purple { background: var(--purple-deep); color: var(--on-purple); }
.on-purple h1, .on-purple h2, .on-purple h3 { color: var(--white); }
.on-purple p, .on-purple li, .on-purple dd { color: var(--on-purple-soft); }
.on-purple a:not(.btn) { color: var(--on-purple); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* For sections whose right-hand column is a list of hairline rows: the rows
     need the room more than the section heading does. */
  .split-wide { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); }
}

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 720px) {
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px);
  transition: border-color 180ms var(--ease);
}
.band-cream .card { background: var(--cream); }

/* ---- shared type devices (§9) -------------------------------------------- */

.kicker {
  display: block;
  font-family: var(--font-condensed);
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 .9rem;
}
.on-purple .kicker { color: var(--on-purple-soft); }

.gold-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.1rem;
}

.lede {
  font-size: clamp(1.125rem, .5vw + 1rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
}
.on-purple .lede { color: var(--on-purple-soft); }

.small { font-size: .875rem; line-height: 1.55; }
.muted { color: var(--ink-soft); }
.label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.more { font-weight: 600; }

/* ---- buttons (§9) -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--purple); color: var(--on-purple); }
.btn-primary:hover { background: var(--purple-deep); color: var(--on-purple); }

.btn-gold { background: var(--gold); color: var(--purple-deep); }
.btn-gold:hover { background: var(--gold-au); color: var(--purple-deep); }

.btn-outline { border-color: var(--purple); color: var(--purple); background: transparent; }
.btn-outline:hover { background: var(--purple); color: var(--on-purple); }

.on-purple .btn-outline { border-color: var(--on-purple-soft); color: var(--on-purple); }
.on-purple .btn-outline:hover { background: var(--on-purple); color: var(--purple-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ---- masthead (§6, §3.1) ------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding-block: 12px;
}

/* Clear space: 25% of the seal's diameter. At 44px that is 11px — the gap
   below is 14px, so the name never enters the margin. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--purple-deep);
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
.brand-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

.nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--purple);
  cursor: pointer;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.nav-toggle:hover { border-color: var(--purple); }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 30px); }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.site-nav li { margin: 0; }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.site-nav a:hover { color: var(--purple); border-bottom-color: var(--rule-strong); }
.site-nav a[aria-current="page"] { color: var(--purple); border-bottom-color: var(--purple); }

.nav-signin {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .3em .9em;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.nav-signin:hover { color: var(--purple); border-color: var(--purple); text-decoration: none; }

/* The one primary action, on every page and at every width — it never folds into the
   hamburger, because it is the thing the page is for. */
.nav-apply {
  flex: none;
  min-height: 40px;
  padding: .45rem 1.15rem;
  font-size: .9375rem;
  white-space: nowrap;
}
.nav-apply[aria-current="page"] { background: var(--purple-deep); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: clamp(12px, 4vw, 20px) clamp(20px, 5vw, 40px) 20px;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav a { border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 0; }
  .nav-signin { align-self: flex-start; margin-top: 16px; }
}
@media (max-width: 660px) {
  /* Room for the Apply button: the masthead keeps the name, drops the second line. */
  .brand-text small { display: none; }
  .site-header .wrap { gap: 10px; }
  .nav-apply { padding: .45rem .85rem; }
  .apply-now { display: none; }
}
@media (max-width: 420px) {
  .brand img { width: 38px; height: 38px; }
  .brand { gap: 10px; }
  .brand-text { font-size: .875rem; line-height: 1.2; }
  .nav-apply { padding: .45rem .7rem; font-size: .875rem; }
}

/* ---- hero and page heads (§6) -------------------------------------------- */

.hero {
  background: var(--purple-deep);
  color: var(--on-purple);
  padding-block: clamp(56px, 9vw, 128px) clamp(52px, 7vw, 104px);
}
.hero-inner { max-width: 46rem; }
.hero h1 { color: var(--white); max-width: 17ch; }
.hero .lede { margin: 0 0 clamp(24px, 3vw, 34px); max-width: 52ch; }

.page-hero {
  background: var(--purple-deep);
  color: var(--on-purple);
  padding-block: clamp(48px, 7vw, 92px) clamp(40px, 5vw, 72px);
}
.page-hero h1 { color: var(--white); max-width: 18ch; }
.page-hero .lede { margin: 0; }

/* One entrance per page: an 8px rise and fade on the hero, once, on load. */
.hero-inner, .page-hero .wrap { animation: rise 420ms var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* The four mentor values. A signature, not a content module. */
.values {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding: 16px 0 0;
  list-style: none;
  max-width: none;
  border-top: 1px solid var(--rule-on-purple);
  font-family: var(--font-condensed);
  font-size: .9375rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-purple-soft);
}
.values li { margin: 0; }

/* ---- The Path (§7) ------------------------------------------------------- */

.path { margin-top: clamp(24px, 4vw, 40px); }
.stages {
  display: grid;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.stage { margin: 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.stage-mark { position: relative; grid-row: 1 / span 2; width: 40px; align-self: stretch; }
.stage-mark::before {
  content: "";
  position: absolute;
  left: 30px; top: 22px; bottom: -2rem;
  width: 1px;
  background: var(--rule-strong);
}
.stage:last-child .stage-mark::before { display: none; }
.dot {
  position: absolute;
  left: 24px; top: 8px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--purple);
  box-shadow: 0 0 0 3px var(--white);
}
.band-cream .dot { background: var(--cream); box-shadow: 0 0 0 3px var(--cream); }
.stage-num {
  display: block;
  font-family: var(--font-condensed);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--gold-ink);
  margin-bottom: .3rem;
}
.stage h3 { margin-bottom: .35em; }
.stage p { margin: 0; max-width: 34ch; font-size: .9375rem; color: var(--ink-soft); }

/* The drawing. Wide screens get the horizontal rail as one uniformly scaled static SVG —
   spine, four markers, and a real bezier return arc from 03 back into 02. Narrow screens get
   the stacked rail below, whose return arc is the same idea drawn in the gutter. Neither
   moves; the diagram is the flare (BRAND_IDENTITY.md §7, §10). */
.path-rail { display: none; width: 100%; height: auto; }
.rail-spine { stroke: var(--rule-strong); stroke-width: 1.5; }
.rail-node circle { fill: var(--white); stroke: var(--purple); stroke-width: 1.5; }
.band-cream .rail-node circle { fill: var(--cream); }
.rail-node text {
  font-family: var(--font-condensed);
  font-size: 22px;
  letter-spacing: .06em;
  fill: var(--purple);
}
.rail-arc { fill: none; stroke: var(--gold-ink); stroke-width: 1.5; }
.rail-head { fill: var(--gold-ink); }
.rail-label {
  font-family: var(--font-condensed);
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--gold-ink);
}

/* The return arc on narrow screens: it lives in stage 02's gutter and reaches down to
   stage 03's marker, so the loop reads the same way stacked as it does wide. The grid gap
   below (2rem) is the constant the height is measured against. */
.path-return {
  position: absolute;
  left: 0;
  top: 24px;
  width: 40px;
  height: calc(100% + 2rem - 12px);
}
.path-return svg { width: 100%; height: 100%; }
.path-return path {
  fill: none;
  stroke: var(--gold-ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.path-return-head {
  position: absolute;
  left: 24px;
  top: 0;
  width: 0; height: 0;
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  border-bottom: 9px solid var(--gold-ink);
}

.loop-caption {
  margin-top: 1.6rem;
  max-width: 62ch;
  font-size: .9375rem;
  color: var(--ink-soft);
}
.loop-caption strong { color: var(--purple); font-weight: 600; }

@media (min-width: 1000px) {
  /* Four equal columns, no gap, so each column's left edge lands under its marker in the
     SVG above: markers sit at x = 22 / 322 / 622 / 922 of a 1200-unit viewBox, i.e. one
     marker radius in from 0% / 25% / 50% / 75% of the same width. */
  .path-rail { display: block; margin-bottom: clamp(18px, 2vw, 26px); }
  .stages { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .stage { grid-template-columns: 1fr; padding-right: clamp(20px, 2.4vw, 32px); }
  .stage-mark { display: none; }
  /* The number is drawn inside its marker on this layout; it stays in the document for
     anyone reading with a screen reader. */
  .stage-num {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .loop-caption { margin-top: clamp(20px, 2.5vw, 30px); }
}

/* ---- hairline rows: the four conversations, and what happens next -------- */

.rows { list-style: none; margin: 0; padding: 0; max-width: none; }
.row {
  margin: 0;
  padding-block: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { margin-bottom: .3em; }
.row p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.row .kicker { margin-bottom: .55rem; }
.on-purple .row { border-color: var(--rule-on-purple); }

@media (min-width: 720px) {
  .row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); align-items: start; }
  .row .kicker { margin-bottom: 0; padding-top: .45rem; }
}

/* ---- checklist ----------------------------------------------------------- */

.checklist { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.checklist li { position: relative; padding-left: 1.6em; margin-bottom: .8em; }
.checklist li:last-child { margin-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: .7em; height: .7em;
  border: 1px solid var(--purple);
  border-radius: 2px;
}
.on-purple .checklist li::before { border-color: var(--on-purple-soft); }

/* ---- numbers band -------------------------------------------------------- */

.numbers { background: var(--purple-deep); color: var(--on-purple); }
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
}
@media (min-width: 860px) { .numbers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbers-grid > div { border-top: 1px solid var(--rule-on-purple); padding-top: 16px; }
.numbers-grid dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 2.6vw + .8rem, 3.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.numbers-grid dd { margin: 0; max-width: 22ch; font-size: .9375rem; color: var(--on-purple-soft); }
.numbers-note {
  margin: clamp(28px, 4vw, 44px) 0 0;
  font-size: .8125rem;
  color: var(--on-purple-soft);
}

/* ---- quote / stories (§9) ------------------------------------------------ */

.pull {
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  line-height: 1.4;
  color: var(--purple-deep);
  max-width: 40ch;
}
.pull-quiet { border-left-color: var(--purple); }
.pull cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .875rem;
  color: var(--ink-soft);
}

.stories-grid { display: grid; gap: clamp(18px, 2.5vw, 28px); }
@media (min-width: 860px) { .stories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.story-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(20px, 3vw, 30px);
}
.story-card blockquote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--purple-deep);
}
.story-card cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: .875rem;
  color: var(--ink-soft);
}

/* ---- FAQ ----------------------------------------------------------------- */

.faq-list { max-width: 64ch; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding-block: .9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--purple-deep);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--purple); }
.faq-item .chev {
  position: relative;
  flex: none;
  width: 1.1em; height: 1.1em;
  border: 1px solid var(--purple);
  border-radius: 50%;
}
.faq-item .chev::before,
.faq-item .chev::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--purple);
  transform: translate(-50%, -50%);
}
.faq-item .chev::before { width: .5em; height: 1px; }
.faq-item .chev::after { width: 1px; height: .5em; transition: opacity 150ms var(--ease); }
.faq-item[open] .chev::after { opacity: 0; }
.faq-item > p { margin: 0 0 1.2rem; color: var(--ink-soft); }

/* ---- apply panel --------------------------------------------------------- */

.apply-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 4vw, 44px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.band-cream .apply-panel { background: var(--white); }
.apply-panel-text { max-width: 34rem; }
.apply-panel h2 { margin-bottom: .5em; }
.apply-panel .note { margin: .8rem 0 0; font-size: .875rem; color: var(--ink-soft); }

/* ---- the Apply chooser (/apply/) ----------------------------------------- */

.choose { display: grid; gap: clamp(16px, 2.5vw, 24px); }
@media (min-width: 780px) { .choose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(24px, 3.5vw, 38px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), opacity 180ms var(--ease);
}
.choice:hover { background: var(--cream-dim); border-color: var(--purple); text-decoration: none; }
.choice:hover .choice-go { background: var(--purple); color: var(--on-purple); }

.choice-kicker {
  display: block;
  font-family: var(--font-condensed);
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple);
}
.choice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
  line-height: 1.15;
  color: var(--purple-deep);
}
.choice-body { color: var(--ink-soft); max-width: 42ch; }
.choice-note { font-size: .875rem; line-height: 1.55; color: var(--ink); max-width: 42ch; }
.choice-note strong { color: var(--purple); }
.choice-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: auto;
  padding: .6rem 1.3rem;
  border: 1px solid var(--purple);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--purple);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

/* Selection: the card the reader picked commits, the other steps back, and the handoff to
   the form happens ~180ms later (assets/site.js). Colour and opacity only — never geometry
   (BRAND_IDENTITY.md §10). */
.choose.has-choice .choice { opacity: .4; }
.choose.has-choice .choice.is-chosen {
  opacity: 1;
  background: var(--purple-deep);
  border-color: var(--purple-deep);
}
.choice.is-chosen .choice-kicker { color: var(--on-purple-soft); }
.choice.is-chosen .choice-title { color: var(--white); }
.choice.is-chosen .choice-body { color: var(--on-purple-soft); }
.choice.is-chosen .choice-note { color: var(--on-purple); }
.choice.is-chosen .choice-note strong { color: var(--white); }
.choice.is-chosen .choice-go {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--purple-deep);
}

/* ---- DSB logo plate (§3.2) ----------------------------------------------- */

.dsb-plate {
  display: inline-block;
  padding: clamp(18px, 3vw, 28px);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.dsb-plate img { width: min(210px, 100%); height: auto; }
.site-footer .dsb-plate { background: var(--white); border-color: transparent; padding: 18px; }
.site-footer .dsb-plate img { width: min(190px, 100%); }

/* The one sanctioned enclosure for the seal on a purple surface. */
.seal-disc {
  display: grid;
  place-items: center;
  flex: none;
  padding: 3px;
  background: var(--cream);
  border-radius: 50%;
}
.seal-disc img { width: 100%; height: 100%; border-radius: 50%; }

/* ---- footer -------------------------------------------------------------- */

.site-footer {
  background: var(--purple);
  color: var(--on-purple-soft);
  padding-block: clamp(48px, 6vw, 80px) clamp(28px, 3vw, 40px);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 1.2rem; }
.footer-brand .seal-disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  padding: 3px;
  background: var(--cream);
  border-radius: 50%;
}
.footer-brand .seal-disc img { width: 100%; height: 100%; border-radius: 50%; }
.footer-brand strong {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--on-purple);
}
.footer-brand strong span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .75rem;
  color: var(--on-purple-soft);
}
.site-footer address {
  font-style: normal;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--on-purple-soft);
}

.footer-col h2 {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-purple);
  margin-bottom: 1rem;
  max-width: none;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.footer-col li { margin: 0; }
.footer-col a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: .9375rem;
  color: var(--on-purple-soft);
  text-decoration: none;
  transition: color 180ms var(--ease);
}
.footer-col a:hover { color: var(--on-purple); text-decoration: underline; text-underline-offset: .18em; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  justify-content: space-between;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-on-purple);
  font-size: .8125rem;
  color: var(--on-purple-soft);
}
.footer-bottom a { color: var(--on-purple-soft); text-decoration: underline; text-underline-offset: .18em; }
.footer-bottom a:hover { color: var(--on-purple); }
.given-credit a { font-weight: 600; }

/* ---- 404 (one of the three sanctioned centered compositions, §6) ---------- */

.error-page { padding-block: clamp(64px, 10vw, 140px); text-align: center; }
.error-page .wrap { display: grid; justify-items: center; }
.error-seal { width: 96px; height: 96px; margin-bottom: clamp(22px, 3vw, 34px); }
.error-page h1 { max-width: 20ch; }
.error-page .lede { margin-inline: auto; }
.error-page .btn-row { justify-content: center; margin-top: clamp(24px, 3vw, 34px); }
.error-page .gold-rule { margin-inline: auto; }

/* ---- motion (§10) -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-inner, .page-hero .wrap { animation: none; opacity: 1; transform: none; }
}

/* ---- print --------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .nav-toggle, .skip-link { display: none; }
  .hero, .page-hero, .numbers { background: var(--white); color: var(--ink); }
  .hero h1, .page-hero h1, .numbers-grid dt { color: var(--purple-deep); }
  .hero .lede, .page-hero .lede, .numbers-grid dd { color: var(--ink-soft); }
}

/* ==========================================================================
   MOTION — the site's default since 2026-09-06
   --------------------------------------------------------------------------
   Everything below this line is live for everyone. `motion-on` is written into
   each page's <html> tag, so it is true before the first paint; the inline head
   script only ever REMOVES it, on `?motion=0`, and remembers that. A rollback
   is a URL, not a deploy. With JavaScript off, the page simply never opts out.

   Built behind a flag on 2026-09-06 and verdicted by Gabe on the live site the
   same day: all four pieces stay, motion becomes the default. BRAND_IDENTITY.md
   §10 was amended that day to permit exactly these four and nothing more — one
   signature moment per surface, one draw-on-entry reveal, one orchestrated hero
   entrance, the chooser's lift. Everything continuous is still banned. If you
   are adding motion to this file, read §10 first; if what you are adding is not
   one of those four, the answer is no.

   prefers-reduced-motion kills all of it — the global reduce block above
   collapses every animation and transition to 0.01ms with !important, the block
   at the end of this file unhides anything an initial state would have left
   hidden, and the JavaScript refuses to arm anything.
   ========================================================================== */

/* One rule that has nothing to do with motion, kept here because it belongs
   with the band it changes: the record band is three tiles until the fourth
   figure is confirmed. Remove `is-three` from the <dl> when the fourth tile
   comes back. */
@media (min-width: 860px) {
  .numbers-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   1. The seal, in three dimensions  (home hero only)
   --------------------------------------------------------------------------
   The seal image is placed, lit and turned. It is never redrawn: the artwork
   is the same PNG the masthead uses, scaled inside a cream disc — the one
   sanctioned enclosure for the seal on purple (§3.1).

   Geometry, measured rather than eyeballed. The seal's ring occupies 59.83%
   of the PNG's width (alpha bounds 187→744 of 931).

   REVISED 2026-09-06 on Gabe's note — "I just wonder if the white border
   shouldn't be as much." The disc stays 240px, so nothing in the hero's layout
   moves; the seal inside it grows. Numbers below are what a browser actually
   measures on screen, which includes the face sitting at translateZ(7px) inside
   a 900px perspective and therefore reading 0.78% larger than its layout box —
   ignore that factor and every figure here is wrong by a pixel.

       image width       108% of the disc → 259.2px laid out, 261.2px seen
       seal ring         261.2 × 0.5983 = 156px   (was 141px)
       cream a side      (240 − 156) ÷ 2 = 42px   (was 49px)
       vs §3.1's floor   42 ÷ 156 = 26.8% of the seal's diameter, floor 25%
                         — 2.8px of headroom, and never under it

   In the register the eye actually reads: the cream annulus was 70% of the
   seal's radius and is now 54%, and cream falls from 65% of the disc's area to
   58%. A rim rather than a plate, which was the note.

   The image is now wider than the disc, so the PNG's own transparent margin
   overhangs and is clipped — that is what `overflow: hidden` on the face is
   for, and it clips nothing but empty pixels. The mark itself sits 42px inside
   the edge, uncropped and untouched (§3.1 "no cropping").

   Depth is real, not a shadow: fifteen 1px discs stacked through Z build the
   medallion's edge, so the turn shows a rim rather than a sheet of paper.
   The lighting lives on its own layer and resolves to nothing at rest, so the
   mark at rest is untouched — no bevel, no glow, no permanent effect on the
   artwork (§3.1 "no effects").

   §10 AS AMENDED 2026-09-06 names this the home page's one signature moment:
   the one place on this surface where geometry may move on hover and on press.
   §3.1 as amended names the medallion the sanctioned third appearance of the
   seal on the home page — three roles (identity in the masthead, the formal
   stamp in the hero, the sign-off in the footer), not three decorations. The
   footer seal stays.
   -------------------------------------------------------------------------- */

html.motion-on .hero .wrap { position: relative; }

html.motion-on .hero-seal {
  display: none;
  position: absolute;
  right: clamp(20px, 5vw, 40px);
  top: 50%;
  width: 240px;
  height: 240px;
  margin-top: -120px;
  perspective: 900px;
  perspective-origin: 50% 44%;
  animation: sealArrive 1200ms linear 100ms both;
}
/* Desktop only, and this was re-tested on 9/6 rather than assumed. A phone
   version was built — 132px disc, static in the flow, above the kicker — and
   rejected: the masthead seal sits 26px above it, so on a 390px screen the two
   are in the same glance (the failure §3.1 names by name), it costs ~155px of
   vertical off an already tall hero, there is no negative space for it to be an
   object in, and touch has neither of the gestures that make it a signature
   moment — no hover, and press-and-hold opens the context menu. Verified
   contained at 1120–1920px with 64px of clear space to the headline at the
   tightest, and display:none below 1120. Notes: docs/MOTION_PREVIEW.md. */
@media (min-width: 1120px) {
  html.motion-on .hero-seal { display: block; }
}

html.motion-on .hero-seal-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Not the house ease. `cubic-bezier(.16,1,.3,1)` is right for an 8px rise and
     wrong for a turning object: it is 83% finished at 300ms, so a 1.2s turn reads
     as a snap followed by a second of nothing. This curve is 34% at 300ms and 81%
     at 600ms, then spends the last half-second settling — the disc is actually
     seen turning. */
  animation: sealTurn 1200ms cubic-bezier(.34, .04, .18, 1) 100ms both;
}

html.motion-on .hero-seal-face,
html.motion-on .hero-seal-back,
html.motion-on .hero-seal-edge i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

html.motion-on .hero-seal-face {
  background: var(--cream);
  transform: translateZ(7px);
  backface-visibility: hidden;
  overflow: hidden;
}
html.motion-on .hero-seal-face img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;              /* 259px of PNG → a 156px seal ring, 42px of cream */
  max-width: none;          /* the base `img { max-width: 100% }` would cap this at the disc */
  height: auto;
  transform: translate(-50%, -50%);
}

/* The back of the medallion. Plain cream — no artwork, no crest, nothing
   invented (§3.1). It is barely seen; it exists so the turn never shows
   through the disc. */
html.motion-on .hero-seal-back {
  background: #EFE8DA;
  transform: rotateY(180deg) translateZ(7px);
  backface-visibility: hidden;
}

/* The medallion's edge: fifteen 1px discs stacked through Z. Their colours are
   set in the script, ramping cream at the front to a warm shadow at the back,
   so the rim reads as a turned object rather than as a stack. */
html.motion-on .hero-seal-edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
html.motion-on .hero-seal-edge i { display: block; }

html.motion-on .hero-seal-face img { pointer-events: none; user-select: none; }

/* The light. One layer, over the face, animated from a raking highlight to
   nothing. At rest its opacity is 0 and the seal is exactly the seal. */
html.motion-on .hero-seal-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  /* Two layers, and both of them stop short of the mark. Re-measured 9/6 for the
     156px seal: the radial's rays run to the box's corner, 169.7px from centre, so
     its first non-transparent stop at 62% sits 105px out — and the seal's ring now
     reaches 78px. Twenty-seven pixels of plain cream between the mark and the first
     tint, at every frame of the turn. The highlight is white, not purple, for the
     same reason. Both resolve to opacity 0, so the seal at rest is exactly the seal
     (§3.1 "no recoloring", "no effects"). */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(43, 0, 80, 0) 62%,
      rgba(43, 0, 80, .26) 86%,
      rgba(43, 0, 80, .46) 100%),
    linear-gradient(102deg,
      rgba(255, 255, 255, .80) 0%,
      rgba(255, 255, 255, .26) 28%,
      rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  animation: sealSheen 1200ms cubic-bezier(.34, .04, .18, 1) 100ms both;
}

@keyframes sealTurn {
  from { transform: translateZ(-90px) rotateY(-92deg) rotateX(10deg); }
  to   { transform: translateZ(0) rotateY(0deg) rotateX(0deg); }
}
/* Opacity rides the stage, not the body — an opacity on a preserve-3d element
   flattens it in some engines. Up by 22%, so the disc is visible while it is
   still turning rather than materialising at the end. */
@keyframes sealArrive {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes sealSheen {
  0%   { opacity: 1; transform: translateX(-12%); }
  55%  { opacity: .55; }
  100% { opacity: 0; transform: translateX(6%); }
}

/* After the turn the animation is handed off to a transform driven by two
   custom properties, so the hover tilt starts from exactly where the entrance
   left it. Both default to 0deg — no jump at the handoff. */
html.motion-on .hero-seal.is-settled .hero-seal-body {
  animation: none;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform 420ms var(--ease);
}

/* The press. Gabe, 2026-09-06: "it feels like you should do something — press in
   a little — if you are holding down on the click button."

   Pointer-down sinks the medallion 20px back through the 900px perspective —
   900 ÷ 920, about 5px of apparent shrink on a 240px disc — and flattens the
   hover tilt to a fifth of itself. It is a push into the page, not a scale: the
   perspective origin sits at 50% 44%, so the disc also drifts very slightly
   down as it goes back, which is what selling depth rather than size requires.
   Flattened to a fifth, not to zero: a hard snap to square inside 120ms reads
   as a glitch, and the raking light has to stay continuous through it.
   Started at 14px on 9/6 and it was too polite to see — 20px is the number.

   It is deliberately POINTER-ONLY, and that is a decision rather than an
   oversight. The medallion is decorative: aria-hidden, no tab stop, no label,
   and the press has no outcome — nothing opens, nothing submits, nothing is
   chosen. Making it focusable so a keyboard could feel the press would put a
   control in the tab order that announces itself and then does nothing, which is
   worse for a keyboard user than one that was never there. The masthead seal
   above it carries the alt text and the real link home. Nothing is communicated
   by the press that is not already on the page in words, so nothing is lost by
   not hearing it. If this ever gains an outcome, it becomes a real <button>
   with a real label on the same day — not a div with a keydown handler. */
html.motion-on .hero-seal.is-settled.is-pressed .hero-seal-body {
  transform: translateZ(-20px)
             rotateY(calc(var(--ry, 0deg) * .2))
             rotateX(calc(var(--rx, 0deg) * .2));
  transition: transform 120ms cubic-bezier(.3, 0, .2, 1);
}
/* Release. `is-releasing` is held by the script only for the length of the
   spring, so an ordinary hover-return keeps its own 420ms house ease and only a
   real release gets the overshoot. The overshoot is about 8% of a 20px travel —
   a pixel and a half forward of rest, felt rather than seen. */
html.motion-on .hero-seal.is-settled.is-releasing .hero-seal-body {
  transition: transform 260ms cubic-bezier(.34, 1.42, .64, 1);
}

/* --------------------------------------------------------------------------
   2. The Path draws itself, once
   --------------------------------------------------------------------------
   Spine first, then the four markers in order, then the return arc, then its
   arrowhead and label. About 1.7s end to end, on first entry into view and
   never again. Stroke lengths are measured in JavaScript and handed in as
   --len, so the dash maths is exact rather than a guess.

   §10 AS AMENDED 2026-09-06 draws the distinction the section was missing: a
   diagram may draw itself once, on first entry into view; nothing may be tied to
   scroll position continuously. This is that one reveal, and it is the only one
   on the site.
   -------------------------------------------------------------------------- */

/* `path-armed` is added by JavaScript immediately before the observer starts.
   If the script never runs, nothing is ever hidden. */
html.motion-on .path-armed .rail-spine,
html.motion-on .path-armed .rail-arc,
html.motion-on .path-armed .rail-node circle {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
html.motion-on .path-armed .rail-node text,
html.motion-on .path-armed .rail-head,
html.motion-on .path-armed .rail-label { opacity: 0; }

html.motion-on .path-armed.is-drawn .rail-spine {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 760ms cubic-bezier(.22, 1, .36, 1);
}
html.motion-on .path-armed.is-drawn .rail-node circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 420ms var(--ease);
}
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(1) circle { transition-delay: 420ms; }
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(2) circle { transition-delay: 540ms; }
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(3) circle { transition-delay: 660ms; }
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(4) circle { transition-delay: 780ms; }

html.motion-on .path-armed.is-drawn .rail-node text {
  opacity: 1;
  transition: opacity 260ms var(--ease);
}
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(1) text { transition-delay: 560ms; }
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(2) text { transition-delay: 680ms; }
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(3) text { transition-delay: 800ms; }
html.motion-on .path-armed.is-drawn .rail-node:nth-of-type(4) text { transition-delay: 920ms; }

/* The arc is the point of the diagram, so it arrives last and alone. */
html.motion-on .path-armed.is-drawn .rail-arc {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms cubic-bezier(.22, 1, .36, 1) 980ms;
}
html.motion-on .path-armed.is-drawn .rail-head,
html.motion-on .path-armed.is-drawn .rail-label {
  opacity: 1;
  transition: opacity 240ms var(--ease) 1460ms;
}

/* Narrow screens carry the same idea down the stacked rail: the connectors
   grow, the dots arrive on them, and the return arc draws last. */
html.motion-on .path-armed .stage-mark::before {
  transform: scaleY(0);
  transform-origin: 50% 0;
}
html.motion-on .path-armed .dot { opacity: 0; }
html.motion-on .path-armed .path-return path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
html.motion-on .path-armed .path-return-head { opacity: 0; }

html.motion-on .path-armed.is-drawn .stage-mark::before {
  transform: scaleY(1);
  transition: transform 460ms cubic-bezier(.22, 1, .36, 1);
}
html.motion-on .path-armed.is-drawn .dot {
  opacity: 1;
  transition: opacity 300ms var(--ease);
}
html.motion-on .path-armed.is-drawn .stage:nth-child(1) .stage-mark::before { transition-delay: 60ms; }
html.motion-on .path-armed.is-drawn .stage:nth-child(2) .stage-mark::before { transition-delay: 300ms; }
html.motion-on .path-armed.is-drawn .stage:nth-child(3) .stage-mark::before { transition-delay: 540ms; }
html.motion-on .path-armed.is-drawn .stage:nth-child(1) .dot { transition-delay: 0ms; }
html.motion-on .path-armed.is-drawn .stage:nth-child(2) .dot { transition-delay: 240ms; }
html.motion-on .path-armed.is-drawn .stage:nth-child(3) .dot { transition-delay: 480ms; }
html.motion-on .path-armed.is-drawn .stage:nth-child(4) .dot { transition-delay: 720ms; }
html.motion-on .path-armed.is-drawn .path-return path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms cubic-bezier(.22, 1, .36, 1) 900ms;
}
html.motion-on .path-armed.is-drawn .path-return-head {
  opacity: 1;
  transition: opacity 240ms var(--ease) 1400ms;
}

/* --------------------------------------------------------------------------
   3. The hero entrance, orchestrated
   --------------------------------------------------------------------------
   §10 already allows one entrance per page. This is that entrance, spent
   better: four beats that overlap instead of one block fading as a unit.
   Each element is already visible while it is still travelling — opacity
   reaches 1 at 45% of the movement — so things arrive rather than materialise.
   900ms end to end.

   §10 AS AMENDED 2026-09-06, in its words: one entrance per page, orchestrated
   within the hero's own elements, 900ms at most, on load and never on scroll.
   Since 9/6 this runs on all eight public pages rather than the three that
   carried the flag — the whole site moves one way, or the site does not move.
   -------------------------------------------------------------------------- */

html.motion-on .hero-inner { animation: none; }
html.motion-on .hero-inner > * { animation: heroRise 620ms var(--ease) both; }
html.motion-on .hero-inner > .kicker    { animation: heroRise 460ms var(--ease) both; }
html.motion-on .hero-inner > h1         { animation-delay: 40ms; }
html.motion-on .hero-inner > .lede      { animation-delay: 180ms; }
html.motion-on .hero-inner > .btn-row   { animation-delay: 280ms; }
html.motion-on .hero-inner > .values    { animation-delay: 380ms; }

@keyframes heroRise {
  0%   { opacity: 0; transform: translateY(10px); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* The inner pages — program, students, mentors, stories, contact — get the same
   beats on their own head block. These rules already existed on 9/6; what changed
   that day is that students, mentors, stories and contact now set the class, so
   half the site no longer fades in one 420ms block while the other half arrives.
   `.values` appears in a page-hero on /mentors only; it takes the fourth beat. */
html.motion-on .page-hero .wrap { animation: none; }
html.motion-on .page-hero .wrap > * { animation: heroRise 620ms var(--ease) both; }
html.motion-on .page-hero .wrap > .kicker { animation: heroRise 460ms var(--ease) both; }
html.motion-on .page-hero .wrap > h1      { animation-delay: 40ms; }
html.motion-on .page-hero .wrap > .lede   { animation-delay: 180ms; }
html.motion-on .page-hero .wrap > .values { animation-delay: 280ms; }

/* --------------------------------------------------------------------------
   4. The Apply chooser — the handoff
   --------------------------------------------------------------------------
   §10 already permits the selected state; today it is colour and opacity only.
   This adds the physical half: the card that was not chosen settles back, the
   chosen one lifts and carries the eye into the form that follows.

   §10 AS AMENDED 2026-09-06: never scale, except the one card a reader has just
   committed to. Gabe kept it on the 9/6 review — "clean and subtle."
   -------------------------------------------------------------------------- */

html.motion-on .choice {
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), opacity 260ms var(--ease),
              transform 260ms var(--ease);
}
html.motion-on .choose.has-choice .choice:not(.is-chosen) {
  transform: translateY(4px) scale(.985);
}
html.motion-on .choose.has-choice .choice.is-chosen {
  transform: translateY(-5px);
}

/* --------------------------------------------------------------------------
   Reduced motion — belt as well as braces
   --------------------------------------------------------------------------
   The global reduce block earlier in this file already collapses every
   animation and transition with !important, and the script refuses to arm the
   Path or the tilt. These rules make sure nothing is left hidden by an initial
   state that never gets animated away.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.motion-on .hero-seal,
  html.motion-on .hero-seal-body,
  html.motion-on .hero-seal-sheen,
  html.motion-on .hero-inner > *,
  html.motion-on .page-hero .wrap > * { animation: none; }
  html.motion-on .hero-seal { opacity: 1; }
  html.motion-on .hero-seal-body,
  html.motion-on .hero-seal.is-settled .hero-seal-body,
  html.motion-on .hero-seal.is-settled.is-pressed .hero-seal-body,
  html.motion-on .hero-seal.is-settled.is-releasing .hero-seal-body { transform: none; }
  html.motion-on .hero-seal-sheen { opacity: 0; }
  html.motion-on .hero-inner > *,
  html.motion-on .page-hero .wrap > * { opacity: 1; transform: none; }
  html.motion-on .choose.has-choice .choice { transform: none; }
  html.motion-on .path-armed .rail-spine,
  html.motion-on .path-armed .rail-arc,
  html.motion-on .path-armed .rail-node circle,
  html.motion-on .path-armed .path-return path { stroke-dashoffset: 0; }
  html.motion-on .path-armed .rail-node text,
  html.motion-on .path-armed .rail-head,
  html.motion-on .path-armed .rail-label,
  html.motion-on .path-armed .dot,
  html.motion-on .path-armed .path-return-head { opacity: 1; }
  html.motion-on .path-armed .stage-mark::before { transform: none; }
}

/* Print: the medallion never reaches paper. */
@media print {
  html.motion-on .hero-seal { display: none; }
}