/* OceanCrest AI — brand tokens
   White paper, always — never dark or tinted backgrounds.
   Silver is borders/dividers only; it must never carry text.
   Fonts (Google Fonts): Archivo 300/500/600 (display), Geist 400/500, Geist Mono 400/500. */
:root {
  --paper: #ffffff;
  --navy: #16202e;
  --blue: #2563eb;
  --silver: #b3b8bf;
  --slate: #64748b;
  --line: #e4e4e7;
  --ink-body: #414852;
  --muted: #71717a; /* lightest allowed text on white */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display: "Archivo", var(--sans);
}

/* ---- metric-matched fallbacks (kill font-swap layout shift; values measured) ---- */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 98.46%;
  ascent-override: 89.37%;
  descent-override: 21.33%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  size-adjust: 102.7%;
  ascent-override: 98.34%;
  descent-override: 28.24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Courier New");
  size-adjust: 99.98%;
  ascent-override: 101.02%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* ---- site tokens ("Survey Chart" system) ---- */
:root {
  --sans: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display: "Archivo", "Archivo Fallback", var(--sans);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-micro: 150ms;
  --dur-ui: 250ms;
  --dur-reveal: 650ms;
  --radius-panel: 16px;
  --radius-card: 8px;
  --nav-h: 64px;
  --bleed: 20px;
  --navy-04: rgba(22, 32, 46, 0.04);
  --navy-06: rgba(22, 32, 46, 0.06);
  --navy-20: rgba(22, 32, 46, 0.2);
  /* course-line gutter lane, desktop only */
  --lane-left: max(20px, calc((100vw - 1200px) / 2 - 56px));
}

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

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  overflow-x: clip; /* NOT hidden — hidden creates a scroll container and kills position:sticky */
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  background: var(--paper);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
ol, ul { list-style: none; }
sup { line-height: 0; }

::selection { background: rgba(37, 99, 235, 0.14); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- typography roles ---------- */

.display-l {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  max-width: 22ch;
  text-wrap: balance;
}

.hero-h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.hero-h1 strong { font-weight: 500; }

h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--navy);
}

p { color: var(--ink-body); }
strong { font-weight: 500; color: var(--navy); }

.body-lg {
  font-size: 1.1875rem;
  line-height: 1.55;
  max-width: 58ch;
}

.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.55rem;
  background: linear-gradient(to top right, transparent 50%, currentColor 50%);
}

.chart-ref {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.pa {
  font-family: var(--mono);
  font-size: 0.625em;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-left: 0.2em;
}

.pa-legend {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--muted);
  max-width: 34ch;
}

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

.container {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

.section { padding-block: clamp(96px, 12vw, 160px); position: relative; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.section-head + .display-l { margin-bottom: clamp(32px, 5vw, 56px); }

.divider {
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
  height: 28px;
}
.divider svg { width: 100%; height: 100%; }
.divider--flip svg { transform: scaleX(-1); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-card);
  padding: 14px 22px;
  transition: background-color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out),
              transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--blue);
  color: #fff;
  border: 1px solid var(--blue);
}
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--silver); }

/* links in text/footer */
.footer-nav a, .nav-links a, .lane-link, .cta-secondary a {
  text-decoration: none;
  position: relative;
}
.footer-nav a::after, .nav-links a::after, .lane-link::after, .cta-secondary a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 1.5px;
  background: var(--blue);
  transition: right var(--dur-micro) var(--ease-out);
}
.footer-nav a:hover::after, .nav-links a:hover::after, .lane-link:hover::after, .cta-secondary a:hover::after { right: 0; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease 20ms, border-color 200ms ease 20ms;
}
.nav-inner {
  width: calc(100% - 2 * var(--bleed));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  transition: padding var(--dur-micro) var(--ease-out);
}
.nav--solid {
  background: var(--paper);
  border-bottom-color: var(--line);
}
.nav--solid .nav-inner { padding-block: 12px; }

.brand img {
  height: 20px;
  width: auto;
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease-out);
}
.nav--solid .brand img { transform: scale(0.9); }

.nav-links {
  display: flex;
  gap: 32px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.nav-cta { padding: 11px 18px; }

/* four labels + brand + CTA need ~890px; below that the footer carries navigation */
@media screen and (max-width: 959px) {
  .nav-links { display: none; }
}
@media (max-width: 480px) {
  .brand img { height: 16px; }
  .nav-cta { padding: 10px 14px; font-size: 0.875rem; white-space: nowrap; }
}

/* ---------- course line (signature) ---------- */

.course-lane {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--lane-left);
  width: 40px;
  pointer-events: none;
}
.course-waypoint {
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -5.5px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  background: var(--paper);
}
.course-rule {
  position: absolute;
  top: 8px; bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--blue);
  transform-origin: top center;
  transform: scaleY(1); /* JS scrubs from 0 when motion is allowed */
}
.course-bearing {
  position: absolute;
  top: 96px;
  left: calc(50% + 10px);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  writing-mode: vertical-rl;
}
/* below this the lane lands on the container edge — hide it */
@media (max-width: 1329px) {
  .course-lane { display: none; }
}

/* ---------- hero ---------- */

.hero { padding: calc(var(--nav-h) + 28px) var(--bleed) var(--bleed); }

/* 2026-09-09 · the hero is a split, the way Accordion's is: copy on the left over the survey
   chart, a photograph on the right half bleeding to the viewport edge (assets/photos/, OC-308).
   Below 900px the framed panel returns and the photograph becomes a band under the copy. */
.hero-panel {
  position: relative;
  /* svh, not dvh: the iOS URL-bar collapse must not resize the hero mid-scroll */
  min-height: min(calc(100svh - var(--nav-h) - 48px), 900px);
  border: 1px solid var(--silver);
  border-radius: var(--radius-panel);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero-left {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
}
.hero-photo { position: relative; margin: 0; height: 240px; }
.hero-photo picture, .hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 82%;
  display: block;
}
@media screen and (min-width: 900px) {
  .hero { padding-inline: 0; --hero-bleed: clamp(80px, 9vw, 140px); }
  /* overflow visible so the photograph can hang below the panel into Position's top margin
     (the bleed is always smaller than .section's top padding, so it never meets the headline) */
  .hero-panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 0; border-radius: 0; overflow: visible; }
  .hero-photo { height: auto; }
  /* the <picture> box stretches by the bleed (top 0, bottom negative, height auto); the img fills it */
  .hero-photo picture { top: 0; bottom: calc(-1 * var(--hero-bleed)); height: auto; }
  .hero-photo img { object-position: 50% 78%; }
  .hero-left .tick-tr, .hero-left .tick-br { display: none; }
  /* the chart title-block sat bottom-right of the full panel; in the split it lands on the CTAs */
  .hero-left .title-block { display: none; }
  .hero-copy { padding-left: max(24px, calc((100vw - 1200px) / 2)); padding-right: clamp(28px, 4vw, 64px); }
}

#chart-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-chart-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--mono);
}

.course-hero {
  position: absolute;
  left: clamp(16px, 2.6vw, 44px); /* in the margin between panel edge and copy */
  bottom: 0;
  width: 120px;
  height: 200px;
  overflow: visible;
}
.course-hero .course-path {
  stroke-dasharray: 520;
  stroke-dashoffset: 0; /* JS animates the draw when motion is allowed */
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 6vw, 88px);
  max-width: 780px;
}
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero-sub {
  margin-top: 24px;
  font-size: 1.125rem;
  max-width: 44ch;
}
.hero-ctas {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* rotator slot — blue highlighter lives only while the rotator runs.
   No overflow:hidden here: it would redefine the inline-block baseline
   and shift the word against the rest of the H1 line. */
.rotator {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  transition: width 150ms var(--ease-out);
}
.rotator-slot { display: inline-block; position: relative; z-index: 1; }
.rotator::before {
  content: "";
  position: absolute;
  inset: 0.06em -0.12em -0.02em -0.12em;
  background: var(--blue);
  border-radius: 4px;
  opacity: 0;
}
.rotator.is-live::before { opacity: 1; }
.rotator.is-live .rotator-slot { color: #fff; }
.rotator.is-done::before {
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 300ms var(--ease-out);
}

.title-block {
  position: absolute;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vw, 40px);
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.82);
}
.title-block p {
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
  color: var(--muted);
}
@media (max-width: 760px) {
  .title-block { display: none; }
  .course-hero { display: none; }
}

/* corner registration ticks */
.tick {
  position: absolute;
  width: 14px; height: 14px;
  z-index: 2;
  pointer-events: none;
}
.tick::before, .tick::after {
  content: "";
  position: absolute;
  background: var(--silver);
}
.tick::before { width: 14px; height: 1px; }
.tick::after { width: 1px; height: 14px; }
.tick-tl { top: 10px; left: 10px; }
.tick-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.tick-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.tick-br { bottom: 10px; right: 10px; transform: scale(-1); }
.tick-tl::before, .tick-tr::before { top: 0; left: 0; }
.tick-tl::after, .tick-tr::after { top: 0; left: 0; }
.tick-bl::before, .tick-br::before { bottom: 0; left: 0; }
.tick-bl::after, .tick-br::after { bottom: 0; left: 0; }

.noscript-note {
  position: relative;
  z-index: 2;
  padding: 24px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- thesis ---------- */

/* single faint contour arc entering from the left */
.thesis::before {
  content: "";
  position: absolute;
  left: 0; top: 10%;
  width: 340px; height: 80%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 600'%3E%3Cg fill='none' stroke='%2316202e' stroke-width='1'%3E%3Cpath d='M-40 80 C120 140, 200 260, 160 400 C130 500, 40 560, -60 580'/%3E%3Cpath d='M-40 140 C80 190, 150 280, 120 390 C98 470, 20 520, -60 540'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
  mask-image: linear-gradient(to right, black 40%, transparent);
}

/* ---------- OC-01 · the source mark ----------
   The MIT mark sits hard right of the headline, as on the leave-behind (OC-D109), and IS the
   citation: it links to the study every number in the section comes from (2026-09-08). The mono
   caption carries the identification. MIT red is off-palette — accepted for a third-party mark,
   as in every deck. The hover underline and the global focus ring are two of blue's five roles. */
.thesis-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.thesis-top .display-l { margin-bottom: 0; }
.src-mark {
  display: grid;
  justify-items: center;
  gap: 12px;
  justify-self: end;
  padding-top: 6px;
  text-decoration: none;
  color: var(--slate);
}
.src-mark img { height: clamp(40px, 4vw, 56px); width: auto; }
.src-mark-cap {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.src-mark:hover .src-mark-cap,
.src-mark:focus-visible .src-mark-cap { color: var(--navy); border-bottom-color: var(--blue); }
@media screen and (max-width: 640px) {
  .thesis-top { grid-template-columns: 1fr; }
  .src-mark { justify-self: start; padding-top: 0; }
  .src-mark img { height: 36px; }
}

/* One full-width column since the .thesis-source note beside it was removed (2026-09-01);
   both .thesis-body paragraphs run the whole container, so .body-lg's 58ch measure cap is
   lifted here. No width media query any more — it is a single column at every size. */
.thesis-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
}
.thesis-body { display: grid; gap: 24px; }
.thesis-body .body-lg { max-width: none; }

/* ---------- OC-01a · the pilot funnel ----------
   Built in HTML/CSS, not SVG. An SVG with a fixed viewBox scales its height and its type
   with its width, so a full-bleed chart would grow absurdly tall on desktop and render
   unreadable 4px labels on a phone. Percentage-width divs stretch to any container while
   the text stays at real font sizes. Idiom (bar pair + measure) from OC-D88 in
   deck/organizing-our-thoughts.html.

   THE DEFAULT IS THE BUILT STATE: bars sit at full width and everything is opaque, so the
   figure is correct with JS off, under reduced motion, and in print. main.js animates FROM
   a collapsed state, never to one.

   --all / --few are set on the figure in the markup and are the single source of truth:
   the bars, the plumb guide and the bracket all derive from them. */

.pilot-funnel { margin-top: clamp(44px, 6vw, 76px); display: grid; gap: 20px; }

/* The right margin is the value gutter. Bars are a percentage of THIS box, so the plot's
   content width is the 100% every figure is measured against — the numbers sit outside it. */
.pf-plot {
  position: relative;
  margin-right: clamp(64px, 7vw, 104px);
  display: grid;
  gap: clamp(26px, 3.4vw, 44px);
}

/* plumb line dropped from the end of the top bar to the bracket */
.pf-guide {
  position: absolute;
  left: var(--all);
  top: 0;
  bottom: 26px;
  border-left: 1px dashed var(--silver);
  z-index: 0;
}

.pf-row { position: relative; z-index: 1; display: grid; gap: 10px; }
.pf-lbl {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.pf-track { position: relative; height: clamp(46px, 5vw, 64px); }
.pf-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  transform-origin: left center;
}
.pf-bar--all { width: var(--all); background: var(--paper); border: 1.5px solid var(--navy); }
.pf-bar--few { width: var(--few); background: var(--blue); }

/* the value rides just past its own bar, out into the gutter */
.pf-val {
  position: absolute;
  left: var(--all);
  top: 50%;
  transform: translateY(-50%);
  margin-left: 16px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--navy);
}
.pf-val--on { left: var(--few); color: var(--blue); font-weight: 500; }

.pf-measure { position: relative; z-index: 1; height: 40px; }
.pf-brk {
  position: absolute;
  left: var(--few);
  right: calc(100% - var(--all));
  top: 0;
  height: 11px;
  border: 1.5px solid var(--blue);
  border-bottom: 0;
}
.pf-note {
  position: absolute;
  top: 19px;
  left: var(--few);
  right: calc(100% - var(--all));
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 560px) {
  /* At this width the 20% gutter can no longer hold "80%+" beside its bar, so the values
     drop underneath. The measure goes entirely: a bracket spanning 5%-80% of a 340px column
     is too short to seat its label, and keeping the label without the bracket left "THE
     STALL" floating with nothing to point at. The two bars carry the comparison on their
     own, and the figcaption still names it. */
  .pf-plot { margin-right: 0; }
  .pf-val { position: static; transform: none; margin: 10px 0 0; }
  .pf-track { height: auto; }
  .pf-bar { position: relative; height: clamp(38px, 11vw, 46px); }
  .pf-guide, .pf-measure { display: none; }
}

/* ---------- systems marquee ---------- */

.marquee-band {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  width: calc(100% - 2 * var(--bleed));
  margin-inline: auto;
}
.marquee-lead {
  flex: 0 0 auto;
  max-width: 240px;
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.marquee-lead p {
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
}
.marquee-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
}
.marquee-track {
  display: flex;
  height: 100%;
  width: max-content;
}
.marquee-track li {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 32px 40px;
  border-right: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--navy);
  white-space: nowrap;
}
/* integration logos (2026-09-08): height-only sizing, --h inline per cell — the equal-area
   rule is in index.html's head comment. width:auto must beat the presentational width
   attribute; the attributes exist only so a cell measures right before its SVG loads. */
.marquee-track .marquee-logo { padding: 30px 32px; }
.marquee-logo img { display: block; height: var(--h, 28px); width: auto; max-width: min(240px, 60vw); }
.marquee-track .marquee-copy {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--ink-body);
  white-space: normal;
  max-width: 250px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .marquee-lead { display: none; }
}

.marquee-band { position: relative; }
.marquee-toggle {
  display: none;
  position: absolute;
  right: 8px;
  bottom: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 4px 6px;
}
.marquee-toggle:hover { color: var(--navy); }
.js .marquee-toggle { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .marquee-toggle { display: none !important; }
}

/* ---------- crew · OC-01b ----------
   deck/leave-behind.html OC-D117 (team CSS 951–958) with px in place of vh, 2026-09-08.
   Photos are copies in assets/team/. */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(36px, 5vw, 56px);
  list-style: none;
  padding: 0;
}
.member figure {
  aspect-ratio: 3 / 3.4;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
  margin: 0;
}
.member img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.member h3 { font-size: 1.125rem; margin-top: 14px; }
.member .role {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.6;
}
@media screen and (max-width: 900px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- models · OC-01c ----------
   deck/leave-behind.html OC-D118 (CSS 581–659), 2026-09-08. Only the curve COLOUR keys the
   two series (blue = models, slate = businesses); each callout repeats it in .gb-key and its
   connector. Lines marked HOMEPAGE differ from the deck; the rest is verbatim.
   THE CSS DEFAULT IS THE BUILT STATE: no dashoffset on the curves, nothing hidden — main.js
   draws them fromTo inside the no-preference matchMedia only. */
.models .display-l { max-width: 28ch; }  /* HOMEPAGE: two balanced lines, not three */
.gapduo {
  display: grid; grid-template-columns: 1.35fr 0.9fr;
  /* stretch, NOT center: .gapcalls holds only absolutely-positioned boxes, so under center it
     collapses to zero height and their top percentages resolve against nothing. */
  gap: clamp(20px, 2.6vw, 44px); align-items: stretch;
  margin: 0;
}
.gapduo figcaption { grid-column: 1 / -1; }  /* HOMEPAGE: the legend spans both columns */
/* HOMEPAGE: no max-height — a page is not height-bound, so height follows column width, which
   is what keeps the callout percentages honest. overflow visible so the connectors can run out
   of the chart, across the column gap and under the callout boxes. */
.gap-chart { width: 100%; height: auto; overflow: visible; }
.gap-chart .gc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.gap-chart .gc-axis { stroke: var(--silver); stroke-width: 1; }
.gap-chart .gc-now { stroke: var(--silver); stroke-width: 1; stroke-dasharray: 3 4; }
/* HOMEPAGE: 14 user units, not 12 — the chart renders narrower than a slide; the ladder below
   lifts it further as the chart shrinks. */
.gap-chart .gc-tick { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--muted); }
.gap-chart .gc-cap,
.gap-chart .gc-use { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gap-chart .gc-cap { stroke: var(--blue); }
.gap-chart .gc-use { stroke: var(--slate); }
.gap-chart .gc-wedge { stroke: none; }
.gap-chart .gc-brk { stroke: var(--blue); stroke-width: 1.5; fill: none; }
.gap-chart .gc-note {
  font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; fill: var(--blue);
}
/* No intrinsic height: the boxes are absolutely placed, so the grid row is sized by the chart
   alone and these percentages are percentages OF THE CHART. 25% and 65.91% are viewBox
   y=110 and y=290 over 440 — the two connector start points. */
.gapcalls { position: relative; }
.gapbox {
  position: absolute; left: 0; width: 100%;
  transform: translateY(-50%); z-index: 2;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 11px 16px;  /* HOMEPAGE: px, not vh */
  background: var(--paper);
}
.gapbox--cap { top: 25%; }
.gapbox--use { top: 65.91%; }
/* Dashed: at the top right the blue connector runs close to the blue data curve, and
   solid-on-solid read as two data series. Dashes mark it as annotation. */
.gap-chart .gc-conn path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 4; }
.gap-chart .gc-conn--cap path { stroke: var(--blue); }
.gap-chart .gc-conn--cap polygon { fill: var(--blue); }
.gap-chart .gc-conn--use path { stroke: var(--slate); }
.gap-chart .gc-conn--use polygon { fill: var(--slate); }
.gap-chart .gc-axis-h { fill: var(--silver); }
.gap-chart .gc-axis-lbl {
  font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; fill: var(--slate);
}
.gb-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem); line-height: 1.25; color: var(--navy);
}
.gb-key { flex: none; width: 11px; height: 3px; border-radius: 2px; }
.gapbox--cap .gb-key { background: var(--blue); }
.gapbox--use .gb-key { background: var(--slate); }
.gapbox ul { margin-top: 8px; display: grid; gap: 4px; }
.gapbox li {
  list-style: none; position: relative; padding-left: 15px;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem); line-height: 1.4; color: var(--ink-body);
}
.gapbox li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--silver); background: var(--paper);
}
/* HOMEPAGE: the global .pa-legend caps at 34ch (case-001 relies on it); this legend is long */
.models .pa-legend { max-width: 62ch; margin-top: clamp(16px, 2.5vw, 28px); }
/* HOMEPAGE: stack at 1099, not the deck's 900 — the callouts only clear each other from
   ~1100px up at this column width (see the head comment). Connectors point at nothing once
   the boxes are below the chart, so they go. */
@media screen and (max-width: 1099px) {
  .gapduo { grid-template-columns: 1fr; }
  .gapcalls { display: grid; gap: 14px; }
  .gapbox { position: static; transform: none; }
  .gc-conn { display: none; }
  .gap-chart .gc-tick, .gap-chart .gc-note, .gap-chart .gc-axis-lbl { font-size: 12px; }
}
@media screen and (max-width: 700px) {
  .gap-chart .gc-tick, .gap-chart .gc-note, .gap-chart .gc-axis-lbl { font-size: 18px; }
}
@media screen and (max-width: 480px) {
  .gap-chart .gc-tick, .gap-chart .gc-note, .gap-chart .gc-axis-lbl { font-size: 24px; }
}

/* ---------- services (2026-09-09 rebuild: two product cards, the ledger/stage rail/TOC retired) ---------- */

/* horizontal depth-band rules behind the product cards */
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='120' viewBox='0 0 280 120'%3E%3Cg fill='none' stroke='%2316202e' stroke-width='1'%3E%3Cpath d='M0 30 C50 22, 90 38, 140 30 C190 22, 230 38, 280 30'/%3E%3Cpath d='M0 90 C50 82, 90 98, 140 90 C190 82, 230 98, 280 90'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
}

/* spectrum intro above the products */
.services-intro { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.services-intro .body-lg { max-width: 62ch; }
.source-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

/* the two products, as quiet cards (same idiom as the publications cells) */
.products { display: grid; gap: 12px; }
@media screen and (min-width: 900px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.product {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product .persona {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate);
}
.product h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.product .kicker { font-weight: 500; color: var(--navy); }
.product > p { max-width: 52ch; }
.pieces { display: grid; margin-top: 10px; border-top: 1px solid var(--line); }
.pieces li {
  display: grid;
  grid-template-columns: 3.6em minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.piece-n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
  white-space: nowrap;
}
.pieces h4 { font-family: var(--display); font-weight: 500; font-size: 1.0625rem; color: var(--navy); }
.piece-lead { font-size: 0.9375rem; color: var(--ink-body); margin-top: 2px; }
.piece-list {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 6px;
  line-height: 1.7;
}
.product-meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
}
.product .lane-link { margin-top: auto; padding-top: 8px; }
.product .chart-ref { margin-top: 0; }

/* scroll-in route down the partnership card's pieces (2026-09-09). The SVG is a 2-unit-wide
   vertical path stretched to the distance between the first and last waypoint (main.js sizeRail);
   ScrollTrigger scrubs its dashoffset and toggles is-hit / is-active / is-passed. */
.pieces-rail { position: relative; margin-top: 10px; }
.pieces-rail .pieces { margin-top: 0; }
.pieces--rail li { grid-template-columns: 20px 3.2em minmax(0, 1fr); gap: 10px; }
.pieces--rail li .piece-n { padding-top: 4px; }
.route-svg { position: absolute; left: 9px; top: var(--rail-top, 24px); width: 2px; height: var(--rail-h, calc(100% - 48px)); overflow: visible; pointer-events: none; }
.route-path { stroke-dasharray: none; stroke-dashoffset: 0; } /* JS sets the draw */
.route-wpt { position: relative; width: 20px; height: 20px; margin-top: 2px; }
.route-wpt i {
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--blue);
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.route-wpt--berth i { border-radius: 0; transform: rotate(45deg); }
/* dimmed until the scrub reaches each piece — only where the JS actually builds the rail */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 561px) {
  .js .pieces--rail .stage-box > div { opacity: 0.5; transition: opacity 320ms var(--ease-out); }
  .js .pieces--rail .stage-box h4 { color: var(--slate); transition: color 320ms var(--ease-out); }
  .js .pieces--rail .stage-box.is-active > div, .js .pieces--rail .stage-box.is-passed > div { opacity: 1; }
  .js .pieces--rail .stage-box.is-active h4, .js .pieces--rail .stage-box.is-passed h4 { color: var(--navy); }
  .js .pieces--rail .route-wpt i { transform: scale(0.55); opacity: 0.45; }
  .js .pieces--rail .route-wpt.is-hit i { transform: scale(1); opacity: 1; }
  .js .pieces--rail .route-wpt--berth i { transform: rotate(45deg) scale(0.55); }
  .js .pieces--rail .route-wpt--berth.is-hit i { transform: rotate(45deg) scale(1); }
}
.lane-link {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  text-decoration: none;
  width: fit-content;
}
.lane-link .cta-arrow { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .lane-link:hover .cta-arrow { transform: translateX(4px); }
}

/* ---------- proof bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}
.cell {
  grid-column: span 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cell:hover { border-color: var(--silver); transform: translateY(-2px); }
}
.cell-wide { grid-column: span 6; }
.cell-quote { grid-column: span 6; }

.fix-ref {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fix-mark {
  position: relative;
  width: 9px; height: 9px;
  flex: 0 0 auto;
}
.fix-mark::before, .fix-mark::after {
  content: "";
  position: absolute;
  background: var(--muted);
}
.fix-mark::before { left: 0; right: 0; top: 4px; height: 1px; }
.fix-mark::after { top: 0; bottom: 0; left: 4px; width: 1px; }

.cell-stat .stat-line {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--navy);
}
.cell-stat .stat-line strong {
  font-weight: 300;
  font-size: 2.5rem;
  color: var(--navy);
}

.cell-quote blockquote p {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--navy);
}
.cell-quote footer {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.cell-mark { align-content: center; justify-items: start; gap: 16px; }
.cell-mark p { font-size: 0.9375rem; }

/* stretched link into the case study — whole cell is the hit area */
.cell { position: relative; }
.cell-link {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  text-decoration: none;
  margin-top: auto; /* links share a baseline across a bento row */
}
.cell-link::before { content: ""; position: absolute; inset: 0; }
.cell-link .cta-arrow { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .cell:hover .cell-link .cta-arrow { transform: translateX(4px); }
}

.proof .proof-note {
  margin-top: 20px;
  color: var(--ink-body);
  max-width: 62ch;
}
.proof .proof-note a {
  color: var(--navy);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.proof .proof-note a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1px;
  background: var(--blue);
  transition: right var(--dur-micro) var(--ease-out);
}
.proof .proof-note a:hover::after { right: 0; }

@media (max-width: 900px) {
  .cell, .cell-wide, .cell-quote { grid-column: span 12; }
}

/* ---------- about (glass over dense contours) ---------- */

.about { position: relative; overflow-x: clip; }
/* 2026-09-09 · Lineage: the principles box keeps its measure; a photograph stands to its right
   and runs to the viewport edge from 900px up. Under that it is a 4:3 band below the box. */
.about-split { display: grid; gap: clamp(24px, 4vw, 48px); }
.about-photo { position: relative; margin: 0; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; }
@media screen and (min-width: 900px) {
  .about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); align-items: stretch; }
  .about-photo { margin-right: calc(-1 * max(24px, (100vw - 1200px) / 2)); min-height: 480px; }
  .about-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* ---------- photographs (OC-308 library, assets/photos/) ----------
   2026-09-09 · Placed plainly: no frame, no caption, no tint. The card photo heads the guide
   cell; the two full-bleed bands added the same morning were removed at the owner's request. */
.cell-photo {
  margin: calc(-1 * clamp(22px, 3vw, 30px)) calc(-1 * clamp(22px, 3vw, 30px)) 6px;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
  overflow: hidden;
}
.cell-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 45%; }
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%2316202e' stroke-width='1'%3E%3Cpath d='M60 210 C60 130, 140 80, 220 100 C300 120, 350 190, 330 260 C310 330, 220 360, 150 330 C90 305, 60 270, 60 210 Z'/%3E%3Cpath d='M100 210 C100 155, 160 118, 220 132 C280 146, 315 196, 300 248 C285 300, 220 322, 168 300 C122 280, 100 252, 100 210 Z'/%3E%3Cpath d='M140 210 C140 178, 176 156, 214 164 C252 172, 275 202, 266 234 C257 266, 218 282, 186 268 C158 256, 140 236, 140 210 Z'/%3E%3Cpath d='M-60 40 C20 10, 90 30, 120 70 M420 340 C360 320, 330 350, 300 400'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.glass {
  position: relative;
  max-width: 720px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  padding: clamp(32px, 5vw, 56px);
}
.glass .display-l { margin-bottom: 20px; }
.glass .body-lg { margin-bottom: 28px; }

.principles { display: grid; gap: 0; border-top: 1px solid var(--line); }
.principles li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  color: var(--navy);
}
.principles li span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- CTA band ---------- */

.cta-band { padding-bottom: clamp(96px, 12vw, 160px); }
.cta-band .section-head { margin-bottom: 24px; }

.cta-link {
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  padding-block: clamp(40px, 7vw, 88px);
  transition: transform var(--dur-ui) var(--ease-out);
}
.cta-copy { position: relative; display: grid; gap: 14px; max-width: 30ch; }
.cta-copy p { max-width: 40ch; }
.berth-mark {
  position: absolute;
  left: -44px;
  top: 10px;
  width: 28px; height: 28px;
}
.cta-action { display: grid; gap: 12px; justify-items: start; }
.cta-action .btn { font-size: 1.0625rem; padding: 16px 26px; }
.cta-arrow {
  display: inline-block;
  transition: transform var(--dur-ui) var(--ease-out);
}
.cta-alt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .cta-link:hover .cta-inner { transform: scale(0.985); }
  .cta-link:hover .cta-arrow { transform: translateX(16px); }
  .cta-link:hover .btn-primary { background: var(--navy); border-color: var(--navy); }
}
@media (max-width: 1330px) {
  .berth-mark { display: none; }
}
/* secondary routes under the booking band — assessment + library */
.cta-secondary { display: grid; gap: 12px; padding-top: 24px; }
.cta-secondary p { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.cta-secondary a { color: var(--navy); font-size: 0.9375rem; }
.cta-secondary .cta-arrow { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .cta-secondary a:hover .cta-arrow { transform: translateX(4px); }
}

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

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 7vw, 80px) 32px;
}
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  margin-bottom: clamp(48px, 7vw, 72px);
}
.footer-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.footer-brand p { font-size: 0.9375rem; }
.footer-nav { display: grid; gap: 12px; align-content: start; justify-items: start; }
.footer-nav a { font-size: 0.9375rem; color: var(--ink-body); width: fit-content; }
.footer-head {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 6px;
}
.footer-legal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.footer-legal p { font-size: 0.8125rem; color: var(--muted); }

/* ---------- footer mark (2026-09-09): the wordmark, huge, alive under the pointer ----------
   Two layers cut to the wordmark's shape with CSS masks. At rest a faded, softly blurred silver
   wordmark; under the pointer a navy copy shows through a radial spotlight that follows the
   cursor, with a faint blue glow beneath it (the highlighter role). No hover: fully navy. */
.footer-mark {
  position: relative;
  width: calc(100% - 2 * var(--bleed));
  margin: clamp(40px, 6vw, 72px) auto 0;
  aspect-ratio: 671.7 / 70.3;
  --mx: 50%; --my: 50%;
  /* the wordmark SVG inlined as a data URI: Chrome fetches mask images with CORS, so a file
     reference fails on file:// previews (and any cross-origin host); the data URI works everywhere */
  --wordmark-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NzEuNyA3MC4zIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9Ik9jZWFuQ3Jlc3QuQUkiPjx0aXRsZT5PY2VhbkNyZXN0LkFJPC90aXRsZT48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDcwLjMpIj48cGF0aCBkPSJNIDQwLjEgMS4xIEwgNDAuMSAxLjEgUSAzMi40IDEuMSAyNS43NSAtMS43IFEgMTkuMSAtNC41IDE0LjE1IC05LjQ1IFEgOS4yIC0xNC40IDYuNCAtMjEuMDUgUSAzLjYgLTI3LjcgMy42IC0zNS4zIEwgMy42IC0zNS4zIFEgMy42IC00Mi45IDYuMzUgLTQ5LjQ1IFEgOS4xIC01NiAxNC4wNSAtNjAuOTUgUSAxOSAtNjUuOSAyNS42IC02OC42NSBRIDMyLjIgLTcxLjQgMzkuOSAtNzEuNCBMIDM5LjkgLTcxLjQgUSA0Ny43IC03MS40IDU0LjMgLTY4LjY1IFEgNjAuOSAtNjUuOSA2NS44NSAtNjAuOTUgUSA3MC44IC01NiA3My42IC00OS40IFEgNzYuNCAtNDIuOCA3Ni40IC0zNS4yIEwgNzYuNCAtMzUuMiBRIDc2LjQgLTI3LjYgNzMuNiAtMjEgUSA3MC44IC0xNC40IDY1Ljg1IC05LjQ1IFEgNjAuOSAtNC41IDU0LjM1IC0xLjcgUSA0Ny44IDEuMSA0MC4xIDEuMSBNIDM5LjkgLTExLjYgTCAzOS45IC0xMS42IFEgNDYuNyAtMTEuNiA1MS43IC0xNC42IFEgNTYuNyAtMTcuNiA1OS41NSAtMjIuOSBRIDYyLjQgLTI4LjIgNjIuNCAtMzUuMyBMIDYyLjQgLTM1LjMgUSA2Mi40IC00MC41IDYwLjggLTQ0LjggUSA1OS4yIC00OS4xIDU2LjIgLTUyLjI1IFEgNTMuMiAtNTUuNCA0OS4xIC01Ny4xIFEgNDUgLTU4LjggMzkuOSAtNTguOCBMIDM5LjkgLTU4LjggUSAzMy4zIC01OC44IDI4LjI1IC01NS44NSBRIDIzLjIgLTUyLjkgMjAuMzUgLTQ3LjYgUSAxNy41IC00Mi4zIDE3LjUgLTM1LjMgTCAxNy41IC0zNS4zIFEgMTcuNSAtMzAgMTkuMTUgLTI1LjYgUSAyMC44IC0yMS4yIDIzLjc1IC0xOC4xIFEgMjYuNyAtMTUgMzAuODUgLTEzLjMgUSAzNSAtMTEuNiAzOS45IC0xMS42IiBmaWxsPSIjMTYyMDJlIi8+PHBhdGggZD0iTSAxMDguNiAxIEwgMTA4LjYgMSBRIDEwMS4yIDEgOTUuMyAtMi4zIFEgODkuNCAtNS42IDg2IC0xMS4zIFEgODIuNiAtMTcgODIuNiAtMjQuMSBMIDgyLjYgLTI0LjEgUSA4Mi42IC0zMS4zIDg2IC0zNyBRIDg5LjQgLTQyLjcgOTUuMzUgLTQ2LjA1IFEgMTAxLjMgLTQ5LjQgMTA4LjYgLTQ5LjQgTCAxMDguNiAtNDkuNCBRIDExNC4zIC00OS40IDExOS4xIC00Ny4zIFEgMTIzLjkgLTQ1LjIgMTI3LjQgLTQxLjMgTCAxMjcuNCAtNDEuMyBMIDExOSAtMzIuOCBRIDExNy4xIC0zNC45IDExNC40NSAtMzYgUSAxMTEuOCAtMzcuMSAxMDguNiAtMzcuMSBMIDEwOC42IC0zNy4xIFEgMTA1IC0zNy4xIDEwMi4xNSAtMzUuNDUgUSA5OS4zIC0zMy44IDk3LjY1IC0zMC45NSBRIDk2IC0yOC4xIDk2IC0yNC4yIEwgOTYgLTI0LjIgUSA5NiAtMjAuNCA5Ny42NSAtMTcuNDUgUSA5OS4zIC0xNC41IDEwMi4xNSAtMTIuODUgUSAxMDUgLTExLjIgMTA4LjYgLTExLjIgTCAxMDguNiAtMTEuMiBRIDExMS45IC0xMS4yIDExNC41NSAtMTIuMzUgUSAxMTcuMiAtMTMuNSAxMTkuMSAtMTUuNyBMIDExOS4xIC0xNS43IEwgMTI3LjYgLTcuMiBRIDEyMy45IC0zLjIgMTE5LjEgLTEuMSBRIDExNC4zIDEgMTA4LjYgMSIgZmlsbD0iIzE2MjAyZSIvPjxwYXRoIGQ9Ik0gMTU3IDEgTCAxNTcgMSBRIDE0OS40IDEgMTQzLjUgLTIuMjUgUSAxMzcuNiAtNS41IDEzNC4xNSAtMTEuMiBRIDEzMC43IC0xNi45IDEzMC43IC0yNC4yIEwgMTMwLjcgLTI0LjIgUSAxMzAuNyAtMzEuNCAxMzQuMDUgLTM3LjA1IFEgMTM3LjQgLTQyLjcgMTQzLjIgLTQ2LjA1IFEgMTQ5IC00OS40IDE1Ni4xIC00OS40IEwgMTU2LjEgLTQ5LjQgUSAxNjMuMSAtNDkuNCAxNjguNDUgLTQ2LjI1IFEgMTczLjggLTQzLjEgMTc2Ljg1IC0zNy42NSBRIDE3OS45IC0zMi4yIDE3OS45IC0yNS4zIEwgMTc5LjkgLTI1LjMgUSAxNzkuOSAtMjQgMTc5Ljc1IC0yMi42NSBRIDE3OS42IC0yMS4zIDE3OS4yIC0xOS42IEwgMTc5LjIgLTE5LjYgTCAxMzguNiAtMTkuNSBMIDEzOC42IC0yOS4zIEwgMTczLjEgLTI5LjQgTCAxNjcuOCAtMjUuMyBRIDE2Ny42IC0yOS42IDE2Ni4yNSAtMzIuNSBRIDE2NC45IC0zNS40IDE2Mi4zNSAtMzYuOTUgUSAxNTkuOCAtMzguNSAxNTYuMSAtMzguNSBMIDE1Ni4xIC0zOC41IFEgMTUyLjIgLTM4LjUgMTQ5LjMgLTM2Ljc1IFEgMTQ2LjQgLTM1IDE0NC44NSAtMzEuODUgUSAxNDMuMyAtMjguNyAxNDMuMyAtMjQuNCBMIDE0My4zIC0yNC40IFEgMTQzLjMgLTIwIDE0NC45NSAtMTYuNzUgUSAxNDYuNiAtMTMuNSAxNDkuNyAtMTEuNzUgUSAxNTIuOCAtMTAgMTU2LjkgLTEwIEwgMTU2LjkgLTEwIFEgMTYwLjYgLTEwIDE2My42IC0xMS4yNSBRIDE2Ni42IC0xMi41IDE2OC44IC0xNSBMIDE2OC44IC0xNSBMIDE3Ni41IC03LjMgUSAxNzMgLTMuMiAxNjcuOTUgLTEuMSBRIDE2Mi45IDEgMTU3IDEiIGZpbGw9IiMxNjIwMmUiLz48cGF0aCBkPSJNIDIwOC4yIDEgTCAyMDguMiAxIFEgMjAxLjYgMSAxOTYuMyAtMi4zIFEgMTkxIC01LjYgMTg4IC0xMS4zIFEgMTg1IC0xNyAxODUgLTI0LjEgTCAxODUgLTI0LjEgUSAxODUgLTMxLjMgMTg4IC0zNyBRIDE5MSAtNDIuNyAxOTYuMyAtNDYgUSAyMDEuNiAtNDkuMyAyMDguMiAtNDkuMyBMIDIwOC4yIC00OS4zIFEgMjEzLjQgLTQ5LjMgMjE3LjUgLTQ3LjIgUSAyMjEuNiAtNDUuMSAyMjQuMDUgLTQxLjM1IFEgMjI2LjUgLTM3LjYgMjI2LjcgLTMyLjkgTCAyMjYuNyAtMzIuOSBMIDIyNi43IC0xNS41IFEgMjI2LjUgLTEwLjcgMjI0LjA1IC03IFEgMjIxLjYgLTMuMyAyMTcuNSAtMS4xNSBRIDIxMy40IDEgMjA4LjIgMSBNIDIxMC42IC0xMS4xIEwgMjEwLjYgLTExLjEgUSAyMTYuMSAtMTEuMSAyMTkuNSAtMTQuNzUgUSAyMjIuOSAtMTguNCAyMjIuOSAtMjQuMiBMIDIyMi45IC0yNC4yIFEgMjIyLjkgLTI4IDIyMS4zNSAtMzAuOTUgUSAyMTkuOCAtMzMuOSAyMTcuMDUgLTM1LjU1IFEgMjE0LjMgLTM3LjIgMjEwLjYgLTM3LjIgTCAyMTAuNiAtMzcuMiBRIDIwNyAtMzcuMiAyMDQuMjUgLTM1LjU1IFEgMjAxLjUgLTMzLjkgMTk5Ljk1IC0zMC45NSBRIDE5OC40IC0yOCAxOTguNCAtMjQuMiBMIDE5OC40IC0yNC4yIFEgMTk4LjQgLTIwLjMgMTk5Ljk1IC0xNy4zNSBRIDIwMS41IC0xNC40IDIwNC4yNSAtMTIuNzUgUSAyMDcgLTExLjEgMjEwLjYgLTExLjEgTSAyMzUuMiAwIEwgMjIyLjIgMCBMIDIyMi4yIC0xMyBMIDIyNC4zIC0yNC44IEwgMjIyLjIgLTM2LjQgTCAyMjIuMiAtNDguMyBMIDIzNS4yIC00OC4zIEwgMjM1LjIgMCIgZmlsbD0iIzE2MjAyZSIvPjxwYXRoIGQ9Ik0gMjkyLjQgMCBMIDI3OS4zIDAgTCAyNzkuMyAtMjcuNyBRIDI3OS4zIC0zMiAyNzYuNiAtMzQuNyBRIDI3My45IC0zNy40IDI2OS42IC0zNy40IEwgMjY5LjYgLTM3LjQgUSAyNjYuOCAtMzcuNCAyNjQuNiAtMzYuMiBRIDI2Mi40IC0zNSAyNjEuMTUgLTMyLjggUSAyNTkuOSAtMzAuNiAyNTkuOSAtMjcuNyBMIDI1OS45IC0yNy43IEwgMjU0LjggLTMwLjMgUSAyNTQuOCAtMzYgMjU3LjI1IC00MC4yNSBRIDI1OS43IC00NC41IDI2NC4wNSAtNDYuOSBRIDI2OC40IC00OS4zIDI3My45IC00OS4zIEwgMjczLjkgLTQ5LjMgUSAyNzkuMiAtNDkuMyAyODMuNCAtNDYuNjUgUSAyODcuNiAtNDQgMjkwIC0zOS43NSBRIDI5Mi40IC0zNS41IDI5Mi40IC0zMC42IEwgMjkyLjQgLTMwLjYgTCAyOTIuNCAwIE0gMjU5LjkgMCBMIDI0Ni44IDAgTCAyNDYuOCAtNDguMyBMIDI1OS45IC00OC4zIEwgMjU5LjkgMCIgZmlsbD0iIzE2MjAyZSIvPjxwYXRoIGQ9Ik0gMzM3IDEgTCAzMzcgMSBRIDMyOS4zIDEgMzIyLjcgLTEuNzUgUSAzMTYuMSAtNC41IDMxMS4xNSAtOS40NSBRIDMwNi4yIC0xNC40IDMwMy41NSAtMjEgUSAzMDAuOSAtMjcuNiAzMDAuOSAtMzUuMiBMIDMwMC45IC0zNS4yIFEgMzAwLjkgLTQyLjggMzAzLjU1IC00OS40IFEgMzA2LjIgLTU2IDMxMS4xNSAtNjAuOSBRIDMxNi4xIC02NS44IDMyMi42NSAtNjguNiBRIDMyOS4yIC03MS40IDMzNyAtNzEuNCBMIDMzNyAtNzEuNCBRIDM0NS40IC03MS40IDM1MS44IC02OC42NSBRIDM1OC4yIC02NS45IDM2My4xIC02MS4xIEwgMzYzLjEgLTYxLjEgTCAzNTMuOSAtNTEuOSBRIDM1MSAtNTUuMSAzNDYuOCAtNTYuOSBRIDM0Mi42IC01OC43IDMzNyAtNTguNyBMIDMzNyAtNTguNyBRIDMzMi4xIC01OC43IDMyOC4wNSAtNTcuMDUgUSAzMjQgLTU1LjQgMzIxIC01Mi4yNSBRIDMxOCAtNDkuMSAzMTYuNCAtNDQuNzUgUSAzMTQuOCAtNDAuNCAzMTQuOCAtMzUuMiBMIDMxNC44IC0zNS4yIFEgMzE0LjggLTI5LjkgMzE2LjQgLTI1LjYgUSAzMTggLTIxLjMgMzIxIC0xOC4xNSBRIDMyNCAtMTUgMzI4LjA1IC0xMy4zIFEgMzMyLjEgLTExLjYgMzM3IC0xMS42IEwgMzM3IC0xMS42IFEgMzQyLjkgLTExLjYgMzQ3LjE1IC0xMy40IFEgMzUxLjQgLTE1LjIgMzU0LjMgLTE4LjUgTCAzNTQuMyAtMTguNSBMIDM2My41IC05LjMgUSAzNTguNiAtNC40IDM1Mi4xIC0xLjcgUSAzNDUuNiAxIDMzNyAxIiBmaWxsPSIjMTYyMDJlIi8+PHBhdGggZD0iTSAzODQuNyAwIEwgMzcxLjYgMCBMIDM3MS42IC00OC4zIEwgMzg0LjcgLTQ4LjMgTCAzODQuNyAwIE0gMzg0LjcgLTI2LjcgTCAzODQuNyAtMjYuNyBMIDM3OS42IC0zMC4xIFEgMzgwLjUgLTM5IDM4NC44IC00NC4xNSBRIDM4OS4xIC00OS4zIDM5Ny4yIC00OS4zIEwgMzk3LjIgLTQ5LjMgUSA0MDAuNyAtNDkuMyA0MDMuNSAtNDguMTUgUSA0MDYuMyAtNDcgNDA4LjYgLTQ0LjQgTCA0MDguNiAtNDQuNCBMIDQwMC40IC0zNSBRIDM5OS4zIC0zNi4yIDM5Ny43NSAtMzYuOCBRIDM5Ni4yIC0zNy40IDM5NC4yIC0zNy40IEwgMzk0LjIgLTM3LjQgUSAzOTAgLTM3LjQgMzg3LjM1IC0zNC43NSBRIDM4NC43IC0zMi4xIDM4NC43IC0yNi43IiBmaWxsPSIjMTYyMDJlIi8+PHBhdGggZD0iTSA0MzUgMSBMIDQzNSAxIFEgNDI3LjQgMSA0MjEuNSAtMi4yNSBRIDQxNS42IC01LjUgNDEyLjE1IC0xMS4yIFEgNDA4LjcgLTE2LjkgNDA4LjcgLTI0LjIgTCA0MDguNyAtMjQuMiBRIDQwOC43IC0zMS40IDQxMi4wNSAtMzcuMDUgUSA0MTUuNCAtNDIuNyA0MjEuMiAtNDYuMDUgUSA0MjcgLTQ5LjQgNDM0LjEgLTQ5LjQgTCA0MzQuMSAtNDkuNCBRIDQ0MS4xIC00OS40IDQ0Ni40NSAtNDYuMjUgUSA0NTEuOCAtNDMuMSA0NTQuODUgLTM3LjY1IFEgNDU3LjkgLTMyLjIgNDU3LjkgLTI1LjMgTCA0NTcuOSAtMjUuMyBRIDQ1Ny45IC0yNCA0NTcuNzUgLTIyLjY1IFEgNDU3LjYgLTIxLjMgNDU3LjIgLTE5LjYgTCA0NTcuMiAtMTkuNiBMIDQxNi42IC0xOS41IEwgNDE2LjYgLTI5LjMgTCA0NTEuMSAtMjkuNCBMIDQ0NS44IC0yNS4zIFEgNDQ1LjYgLTI5LjYgNDQ0LjI1IC0zMi41IFEgNDQyLjkgLTM1LjQgNDQwLjM1IC0zNi45NSBRIDQzNy44IC0zOC41IDQzNC4xIC0zOC41IEwgNDM0LjEgLTM4LjUgUSA0MzAuMiAtMzguNSA0MjcuMyAtMzYuNzUgUSA0MjQuNCAtMzUgNDIyLjg1IC0zMS44NSBRIDQyMS4zIC0yOC43IDQyMS4zIC0yNC40IEwgNDIxLjMgLTI0LjQgUSA0MjEuMyAtMjAgNDIyLjk1IC0xNi43NSBRIDQyNC42IC0xMy41IDQyNy43IC0xMS43NSBRIDQzMC44IC0xMCA0MzQuOSAtMTAgTCA0MzQuOSAtMTAgUSA0MzguNiAtMTAgNDQxLjYgLTExLjI1IFEgNDQ0LjYgLTEyLjUgNDQ2LjggLTE1IEwgNDQ2LjggLTE1IEwgNDU0LjUgLTcuMyBRIDQ1MSAtMy4yIDQ0NS45NSAtMS4xIFEgNDQwLjkgMSA0MzUgMSIgZmlsbD0iIzE2MjAyZSIvPjxwYXRoIGQ9Ik0gNDgyLjYgMS4xIEwgNDgyLjYgMS4xIFEgNDc4LjUgMS4xIDQ3NC41NSAwIFEgNDcwLjYgLTEuMSA0NjcuMyAtMy4wNSBRIDQ2NCAtNSA0NjEuNiAtNy44IEwgNDYxLjYgLTcuOCBMIDQ2OS40IC0xNS43IFEgNDcxLjkgLTEyLjkgNDc1LjIgLTExLjUgUSA0NzguNSAtMTAuMSA0ODIuNSAtMTAuMSBMIDQ4Mi41IC0xMC4xIFEgNDg1LjcgLTEwLjEgNDg3LjM1IC0xMSBRIDQ4OSAtMTEuOSA0ODkgLTEzLjcgTCA0ODkgLTEzLjcgUSA0ODkgLTE1LjcgNDg3LjI1IC0xNi44IFEgNDg1LjUgLTE3LjkgNDgyLjcgLTE4LjY1IFEgNDc5LjkgLTE5LjQgNDc2Ljg1IC0yMC4zNSBRIDQ3My44IC0yMS4zIDQ3MSAtMjIuODUgUSA0NjguMiAtMjQuNCA0NjYuNDUgLTI3LjE1IFEgNDY0LjcgLTI5LjkgNDY0LjcgLTM0LjMgTCA0NjQuNyAtMzQuMyBRIDQ2NC43IC0zOC45IDQ2Ni45NSAtNDIuMyBRIDQ2OS4yIC00NS43IDQ3My40IC00Ny42IFEgNDc3LjYgLTQ5LjUgNDgzLjMgLTQ5LjUgTCA0ODMuMyAtNDkuNSBRIDQ4OS4zIC00OS41IDQ5NC4xNSAtNDcuNCBRIDQ5OSAtNDUuMyA1MDIuMiAtNDEuMSBMIDUwMi4yIC00MS4xIEwgNDk0LjMgLTMzLjIgUSA0OTIuMSAtMzUuOSA0ODkuMzUgLTM3LjEgUSA0ODYuNiAtMzguMyA0ODMuNCAtMzguMyBMIDQ4My40IC0zOC4zIFEgNDgwLjUgLTM4LjMgNDc4Ljk1IC0zNy40IFEgNDc3LjQgLTM2LjUgNDc3LjQgLTM0LjkgTCA0NzcuNCAtMzQuOSBRIDQ3Ny40IC0zMy4xIDQ3OS4xNSAtMzIuMSBRIDQ4MC45IC0zMS4xIDQ4My43IC0zMC4zNSBRIDQ4Ni41IC0yOS42IDQ4OS41NSAtMjguNjUgUSA0OTIuNiAtMjcuNyA0OTUuMzUgLTI2IFEgNDk4LjEgLTI0LjMgNDk5Ljg1IC0yMS41IFEgNTAxLjYgLTE4LjcgNTAxLjYgLTE0LjMgTCA1MDEuNiAtMTQuMyBRIDUwMS42IC03LjIgNDk2LjUgLTMuMDUgUSA0OTEuNCAxLjEgNDgyLjYgMS4xIiBmaWxsPSIjMTYyMDJlIi8+PHBhdGggZD0iTSA1MzAuNiAwIEwgNTE3LjUgMCBMIDUxNy41IC02OC40IEwgNTMwLjYgLTY4LjQgTCA1MzAuNiAwIE0gNTQxLjkgLTM2LjggTCA1MDYuMiAtMzYuOCBMIDUwNi4yIC00OC4zIEwgNTQxLjkgLTQ4LjMgTCA1NDEuOSAtMzYuOCIgZmlsbD0iIzE2MjAyZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0My41IDApIj48cGF0aCBkPSJNIDE0LjggMSBMIDE0LjggMSBRIDExLjIgMSA4LjkgLTEuNCBRIDYuNiAtMy44IDYuNiAtNy4zIEwgNi42IC03LjMgUSA2LjYgLTEwLjggOC45IC0xMy4yIFEgMTEuMiAtMTUuNiAxNC44IC0xNS42IEwgMTQuOCAtMTUuNiBRIDE4LjMgLTE1LjYgMjAuNiAtMTMuMiBRIDIyLjkgLTEwLjggMjIuOSAtNy4zIEwgMjIuOSAtNy4zIFEgMjIuOSAtMy44IDIwLjYgLTEuNCBRIDE4LjMgMSAxNC44IDEiIGZpbGw9IiMxNjIwMmUiLz48cGF0aCBkPSJNIDQ1LjcgMCBMIDMxLjUgMCBMIDU5LjggLTcwLjMgTCA3MC45IC03MC4zIEwgOTkuMSAwIEwgODQuNiAwIEwgNjIuOCAtNTcuNyBMIDY3LjggLTU3LjcgTCA0NS43IDAgTSA4NC4zIC0xMy4xIEwgNDYuNSAtMTMuMSBMIDQ2LjUgLTI0LjUgTCA4NC4zIC0yNC41IEwgODQuMyAtMTMuMSIgZmlsbD0iIzE2MjAyZSIvPjxwYXRoIGQ9Ik0gMTIxIDAgTCAxMDcuNCAwIEwgMTA3LjQgLTcwLjMgTCAxMjEgLTcwLjMgTCAxMjEgMCIgZmlsbD0iIzE2MjAyZSIvPjwvZz48L2c+PC9zdmc+");
}
.footer-mark > i { position: absolute; inset: 0; display: block; }
.fm-base, .fm-fill {
  -webkit-mask-image: var(--wordmark-mask);
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
  mask-image: var(--wordmark-mask);
  mask-size: contain; mask-position: center; mask-repeat: no-repeat;
}
.fm-base { background: var(--silver); opacity: 0.45; filter: blur(2px); }
.fm-fill {
  background: var(--navy);
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
  -webkit-mask-image: var(--wordmark-mask), radial-gradient(circle at var(--mx) var(--my), #000 0 110px, transparent 260px);
  -webkit-mask-size: contain, auto; -webkit-mask-position: center, 0 0; -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: var(--wordmark-mask), radial-gradient(circle at var(--mx) var(--my), #000 0 110px, transparent 260px);
  mask-size: contain, auto; mask-position: center, 0 0; mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;
}
.fm-glow {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(37, 99, 235, 0.10), transparent 30%);
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
}
.footer-mark.is-hot .fm-fill, .footer-mark.is-hot .fm-glow { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .fm-base { filter: none; opacity: 0.3; }
  .fm-fill {
    opacity: 1;
    -webkit-mask-image: var(--wordmark-mask); -webkit-mask-composite: source-over;
    mask-image: var(--wordmark-mask); mask-composite: add;
  }
  .fm-glow { display: none; }
}
@media (max-width: 760px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------- motion states (JS-gated) ---------- */

/* SplitText targets hide until split; hero H1 is exempt (LCP) */
.js [data-reveal] { visibility: hidden; }
.js [data-reveal-fade],
.js [data-reveal-cards] .cell { opacity: 0; }

/* hero entrance — pure CSS so it runs even if vendor JS fails */
/* Entrances use fill-mode backwards, never both: a filled CSS animation
   overrides inline styles, which would block the GSAP exit parallax. */
@media (prefers-reduced-motion: no-preference) {
  .hero-panel { animation: panel-in 600ms var(--ease-out) backwards; }
  .hero-copy > * { animation: rise-in var(--dur-reveal) var(--ease-out) backwards; }
  .hero-copy .eyebrow { animation-delay: 150ms; }
  .hero-copy .hero-h1 { animation-delay: 250ms; }
  .hero-copy .hero-sub { animation-delay: 420ms; }
  .hero-copy .hero-ctas { animation-delay: 540ms; }
  .title-block { animation: rise-in var(--dur-reveal) var(--ease-out) 700ms backwards; }
  .course-hero .course-path {
    stroke-dashoffset: 520;
    animation: course-draw 900ms var(--ease-out) 900ms forwards;
  }
  .course-hero .course-origin { animation: rise-in 400ms var(--ease-out) 850ms backwards; }
}
@keyframes panel-in { from { opacity: 0; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes course-draw { to { stroke-dashoffset: 0; } }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { visibility: visible; }
  .js [data-reveal-fade],
  .js [data-reveal-cards] .cell { opacity: 1; }

  .rotator::before { display: none; }
  .rotator-slot { color: inherit; }

  .marquee-viewport { overflow-x: auto; }

  .cta-link:hover .cta-inner,
  .cta-link:hover .cta-arrow { transform: none; }
  .cell:hover { transform: none; }
  .btn:active { transform: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}