/* Site shell — header, navigation, buttons, page hero, footer, and the list
   components shared between pages.

   Every page links tokens.css, then shell.css, then its own stylesheet.
   Homepage bands live in styles.css; interior bands live in interior.css.

   The header is absolutely positioned with light-on-dark styling, so it
   expects a dark first band. .hero, .page-hero, .philosophy, and .final-cta
   all qualify. Interior pages open with .page-hero.

   Background-sensitive components, noted so they are not dropped on the
   wrong surface:
     .principles-list  dark bands only (borders are white-alpha)
     .check-list       dark bands only
     .why-list         light bands only
     .text-card-grid   light bands only
     .eyebrow          dark bands   |  .eyebrow-dark  light bands */

.shell {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  margin-inline: auto;
}

.section-light { background: var(--paper); }

.eyebrow {
  margin: 0;
  /* The family renders on light surfaces now, so the default eyebrow is the
     readable muted ink, not the old light-on-navy grey. */
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.eyebrow-dark { color: var(--ink-muted); }

/* Accent inside a headline: <h2>WORDS <span>ACCENT.</span></h2> */
/* This is deliberately two blues, not one. The vivid accent is a signal on navy,
   but it measures ~3.2:1 on paper and ~2.8:1 on the muted band — both under the
   4.5:1 AA threshold for small text. Light surfaces use --blue-ink (5.2:1) via
   the rule below. Do not "fix" the drift by unifying them. */
/* Every band is light now, so the headline accent is the Work With Me vivid
   blue. On the palest bands --blue-ink keeps small-text contrast. */
h2 span { color: var(--wm-blue); }

/* Light surfaces get the accessible blue; the vivid accent stays on navy. */
.section-light h2 span,
.section-light h3 span,
.clinic-band h2 span { color: var(--blue-ink); }

/* ---------- Header ---------- */

.site-header {
  /* Was absolute so it could sit over a dark opening band. Every band is light
     now, and the Work With Me page sets the pattern: white chrome in flow
     above the content. */
  position: relative;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid var(--wm-line);
  background: var(--white);
  color: var(--wm-ink);
}

.nav-bar {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
}

.wordmark {
  display: inline-flex;
  min-width: 150px;
  min-height: 44px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  /* The brand link is a tap target, so it takes the 44px floor via padding.
     The nav bar is 76px tall and centres its children, so the taller link
     sits inside the existing row without moving it. */
  padding-block: 6px;
  line-height: 1;
}

.wordmark-name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: 0.015em;
}

.wordmark-credentials {
  color: var(--wm-gray-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
}

.wordmark-credentials i {
  padding-inline: 3px;
  color: var(--wm-blue);
  font-style: normal;
}

/* Every route uses the same visible brand and credentials, including phones.
   Page styles may tune their content without changing the global header. */
body .site-header .wordmark-name {
  font-size: var(--fs-h4);
  color: var(--wm-ink);
}

body .site-header .wordmark-credentials {
  display: block;
  color: var(--wm-gray-soft);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.1vw, 30px);
  margin-left: auto;
}

.primary-nav a {
  position: relative;
  min-height: 44px;
  padding-top: 15px;
  color: #333a49;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--wm-blue);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.primary-nav a:hover,
.primary-nav a.active { color: var(--wm-blue); }
.primary-nav a:hover::after,
.primary-nav a.active::after { transform: scaleX(1); transform-origin: left; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--wm-ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-lines { display: grid; gap: 4px; }
.menu-lines i { display: block; width: 18px; height: 1px; background: currentColor; }

/* ---------- Buttons ---------- */

.nav-action,
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: 17px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.nav-action,
.button-blue {
  background: var(--wm-blue);
  color: var(--white);
}

.nav-action { min-width: 138px; }

.nav-action:hover,
.button-blue:hover {
  background: var(--wm-blue-deep);
  color: var(--white);
  transform: translateY(-2px);
}

.button-light {
  background: var(--wm-ink);
  color: var(--white);
}

.button-light:hover {
  background: var(--wm-blue-deep);
  color: var(--white);
  transform: translateY(-2px);
}

.button-outline {
  border-color: var(--wm-line);
  color: var(--ink);
}

.button-outline:hover {
  border-color: var(--wm-ink);
  background: var(--wm-ink);
  color: var(--white);
  transform: translateY(-2px);
}

/* Inline link with a trailing arrow.

   Used where a band's call to action is a sentence-level link rather than a
   button. This existed only in editorial.css, so it rendered unstyled once the
   interior pages moved onto this system — the label fell back to body copy with
   none of the tracking the rest of the system uses for a link. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  color: var(--blue-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: color 160ms ease, gap 160ms ease;
}

/* The gap widens on hover, which reads as the arrow moving without moving the
   label — the same restraint the buttons use with their 2px lift. */
.link-arrow:hover { color: var(--ink); gap: var(--sp-3); }

/* On a dark band the accessible blue is too dark to read; the vivid accent is
   the one that holds up, same rule the headline spans follow. */
.hero .link-arrow,
.philosophy .link-arrow,
.page-hero .link-arrow,
.final-cta .link-arrow { color: var(--wm-blue-ink); }

.hero .link-arrow:hover,
.philosophy .link-arrow:hover,
.page-hero .link-arrow:hover,
.final-cta .link-arrow:hover { color: var(--ink); }

/* ---------- Shared list components ---------- */

/* Hand-written aside.

   Carried over from the editorial pages, where it sat on photographs, beside
   photographs, and inside panels. It is deliberately small, low-contrast and
   never load-bearing: read it and the thought lands, skip it and nothing is
   missing. Two placements are supported — inline in a text band, and overlaid
   on an image where it needs the halo to stay legible.

   On dark bands the ink is --white; on light bands it is near-black. Both are
   set by the modifier, not by the parent band, because the aside is often
   placed over a photograph that ignores the band's own surface. */
.hand-note {
  margin: 0;
  color: oklch(0.22 0.03 255);
  font-family: var(--font-hand);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.05;
}

.hand-note svg { display: block; width: 104px; margin-top: 6px; color: currentColor; }

.hand-note--dark { color: var(--white); }

/* Over a photograph. The halo is the same device .final-cta's copy relies on,
   tuned per ink direction so thin Caveat strokes do not wash out. */
.hand-note--over-photo {
  position: absolute;
  z-index: 3;
  text-shadow: 0 1px 14px oklch(0.13 0.05 255 / 0.85), 0 1px 3px oklch(0.13 0.05 255 / 0.6);
}

.hand-note--over-photo.hand-note--light-ink {
  text-shadow: 0 1px 12px oklch(1 0 0 / 0.85), 0 1px 2px oklch(1 0 0 / 0.9);
}

/* Centred variant, for the aside that sits alone in a panel. */
.hand-note--center { text-align: center; }
.hand-note--center svg { margin-inline: auto; }

/* Pale panel that carries an aside, and optionally one line of body copy under
   it. Replaces the editorial hand-panel: same role, but it no longer has to
   carry a Caveat line on its own — the panel is the component, the note is the
   content. */
.note-panel {
  padding: var(--sp-7) var(--sp-5);
  background: var(--paper-muted);
  text-align: center;
}

.note-panel .hand-note { font-size: clamp(22px, 2.2vw, 30px); }

.note-panel .hand-note svg {
  width: 92px;
  margin-inline: auto;
  margin-bottom: var(--sp-3);
}

.note-panel p {
  max-width: 34ch;
  margin: var(--sp-3) auto 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Marked fact list — the tick / cross pairs on the About page.

   .check-list above is the closing-CTA checklist: one blue check per line, all
   affirmative. This is the other shape: a list where the mark carries a yes/no
   and the two lists sit side by side. The polarity is in the glyph, not a
   second colour, so nothing red enters the palette. */
.mark-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}

.mark-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
}

.mark-list li svg { flex: none; margin-top: 4px; }

.mark-list .mark-yes { color: var(--blue-ink); }
.mark-list .mark-no { color: var(--ink-muted); }

/* Plain variant: same rhythm, no mark, for the credentials column that needs
   to line up with the two marked lists beside it. */
.mark-list--plain li { padding-left: 0; color: var(--ink); font-weight: 500; }

.principles-list,
.why-list,
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.principles-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--wm-line);
}

.principles-list li:first-child { border-top: 1px solid var(--wm-line); }

.principles-list > li > span {
  color: var(--wm-blue-ink);
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: 0.9;
}

.principles-list strong,
.why-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: 0.01em;
  /* Was 1. "TECHNOLOGY WHEN IT EARNS ITS PLACE" wraps to two lines at this size,
     and 1.0 let the second line sit on the first. Every other display label in
     the system has real leading. */
  line-height: var(--lh-tight);
}

.principles-list small {
  display: block;
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.why-list { border-top: 1px solid var(--line); }

.why-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}

.why-list > li > span {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: 0.9;
}

.why-list p {
  max-width: var(--measure-body);
  margin: var(--sp-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.check-list { display: grid; gap: var(--sp-3); }

.check-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* The badge was 12px inside an 18px circle, so the checkmark rendered larger and
   bolder than the label it decorates. Decoration now sits below the content. */
.check-list li > span {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--wm-blue);
  color: var(--white);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.check-list li > div { min-width: 0; }
.check-list li strong { display: block; }

/* ---------- Page hero (interior pages) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

/* Optional photographic hero.

   The default page hero is flat navy. These two layers let an interior page put
   a photograph behind the copy — the same move .hero makes on the homepage —
   without borrowing .final-media, which belongs to the closing CTA and is framed
   for a sunset. The scrim is directional, darkest at the left where the copy
   sits, so the header and the headline both stay legible over any image. */
.page-hero__media,
.page-hero__scrim { position: absolute; inset: 0; }

/* The photograph used to run the full viewport while the copy sat inside the
   centred .shell column, so a wide hero showed the image bleeding past the text
   on both sides. Both layers now take that column — the same gutter and
   max-width the copy uses — so the image, the film over it, and the text share
   one edge at every width. .about-hero is excluded: it keeps the split hero
   whose geometry lives in about.css. */
.page-hero:not(.about-hero) .page-hero__media,
.page-hero:not(.about-hero) .page-hero__scrim {
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  transform: translateX(-50%);
}

.page-hero:not(.about-hero) .page-hero__media { overflow: hidden; border-radius: 16px; }
.page-hero:not(.about-hero) .page-hero__scrim { border-radius: 16px; }

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: saturate(0.96) contrast(1.02);
}

.page-hero__scrim {
  z-index: 1;
  /* Light scrim. The film is strongest where the copy sits so ink type clears
     AA over any photograph, and it thins toward the right where the subject
     is — no dark overlay crosses a face. */
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.95) 0%, oklch(1 0 0 / 0.9) 38%, oklch(1 0 0 / 0.62) 72%, oklch(1 0 0 / 0.3) 100%),
    linear-gradient(0deg, oklch(1 0 0 / 0.5), transparent 62%);
}

.page-hero__shell {
  /* The header is in flow now, so the band no longer has to clear it. */
  padding-top: var(--band);
  padding-bottom: var(--band-tight);
}

.page-hero__copy { max-width: 880px; }

.page-hero h1 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-sans);
}

.page-hero h1 span { color: var(--wm-blue); }

.page-hero__dek {
  /* Instrument Sans' ch is wide: --measure-body (62ch) rendered ~81 chars/line
     on /sports-injuries/ and /book-audit/. 58ch lands ~70-75 chars with the
     font size (--fs-lead) unchanged. */
  max-width: 58ch;
  margin: var(--sp-5) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}

.page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--wm-line);
  list-style: none;
}

.page-hero__facts strong {
  display: block;
  color: var(--wm-blue-ink);
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  line-height: 1;
}

.page-hero__facts span {
  display: block;
  margin-top: var(--sp-2);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- Closing CTA (shared closing band) ---------- */

.final-cta {
  position: relative;
  overflow: hidden;
  min-height: 275px;
  background: var(--paper-muted);
  color: var(--ink);
}

.final-media,
.final-scrim {
  position: absolute;
  inset: 0;
  /* The closing photograph and its film used to run the full viewport while the
     copy sat in the centred .shell column. Both now take that column — the
     gutter and max-width the copy uses — so the image, the film over it, and the
     text share one edge. Pages that place their own closing photograph
     (styles.css, sports.css) keep their rule, which outranks this one. */
  left: max(var(--gutter), (100% - var(--max-width)) / 2);
  right: max(var(--gutter), (100% - var(--max-width)) / 2);
}

.final-media { overflow: hidden; border-radius: 16px; }
.final-scrim { border-radius: 16px; }

.final-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  filter: saturate(0.94) brightness(1.06) contrast(0.98);
}

.final-scrim {
  z-index: 1;
  /* Light film: strongest behind the copy, thinning to the right so the
     photograph still reads. */
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.94) 0%, oklch(1 0 0 / 0.85) 48%, oklch(1 0 0 / 0.55) 100%),
    linear-gradient(0deg, oklch(1 0 0 / 0.55), transparent 65%);
}

.final-shell {
  display: grid;
  min-height: 275px;
  /* The checklist column used to be able to shrink to 210px, where the longest
     item ("Feel like yourself again") wrapped to three lines while the copy
     column held 690px. Both columns now have a floor that keeps them readable. */
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.5fr);
  align-items: center;
  gap: var(--sp-8);
}

.final-copy { max-width: 690px; }

.final-cta h2 {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-sans);
}

.final-description {
  max-width: var(--measure-tight);
  margin: var(--sp-4) 0 var(--sp-4);
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.final-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--wm-line);
  padding: var(--band) 0 var(--sp-5);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--wm-line);
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.01em;
  line-height: 1;
}

.site-footer__creds {
  display: block;
  margin-top: var(--sp-2);
  color: var(--wm-blue-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.site-footer__desc {
  max-width: 40ch;
  margin: var(--sp-4) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Was 9px, which rendered the column label 25% SMALLER than the links it heads
   (12px). A heading must not be smaller than its own body. Now 12px/700 against
   14px links: still subordinate in size, but legible, and the weight, caps and
   colour carry the hierarchy. */
.site-footer__col-title {
  margin: 0 0 var(--sp-3);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.site-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Every footer-column row holds the 44px tap floor, so the link rows and the
   plain clinic/address rows share one rhythm. The 44px row carries the spacing
   the old inter-item margin used to provide. */
.site-footer__col li {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.site-footer__col a,
.site-footer__col li {
  color: oklch(0.35 0.03 250);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

.site-footer__col a:hover { color: var(--wm-blue-ink); }

/* Footer column links are standalone nav, not prose: hold each to the 44px tap
   floor with padding. The face, colour, and light theme are unchanged. */
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-2);
}

.site-footer__todo {
  color: oklch(0.74 0.09 62);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 16px;
  color: var(--ink-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
}

.site-footer__disclaimer { max-width: var(--measure-wide); }

/* ---------- Shell responsive ---------- */

@media (max-width: 1080px) {
  /* Tighten the gap, not the type. This used to drop nav labels to 8px, which is
     below any legible floor and made the header lighter than the footer. */
  .primary-nav { gap: 13px; }
}

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The closing CTA goes lopsided well before the old 780px breakpoint: the copy
   column holds its width while the checklist column squeezes. Stack it earlier. */
@media (max-width: 980px) {
  /* Keep a floor so the photograph behind the band still has presence once the
     copy stacks. */
  .final-cta { min-height: 360px; }
  .final-shell {
    min-height: 360px;
    grid-template-columns: 1fr;
    align-content: end;
    gap: var(--sp-6);
    padding-top: var(--band-tight);
    padding-bottom: var(--band-tight);
  }
  .final-copy { max-width: none; }
}

@media (max-width: 780px) {
  .nav-bar { min-height: 72px; }
  .wordmark { min-width: 0; }

  .primary-nav {
    display: none;
    position: absolute;
    top: 72px;
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 9px 18px;
    background: var(--white);
    border: 1px solid var(--wm-line);
  }

  .primary-nav.is-open { display: flex; }

  .primary-nav a {
    min-height: 48px;
    padding-top: 16px;
    border-bottom: 1px solid var(--wm-line);
  }

  .primary-nav a:last-child { border-bottom: 0; }
  .primary-nav a::after { display: none; }
  .menu-toggle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 8px;
  }
  .nav-action { min-width: 0; min-height: 44px; padding-inline: var(--sp-3); }

  /* On a phone the photograph becomes a block above the copy instead of a layer
     behind it, fading into the light band below. Only the height and the fade
     change here, so the content-column geometry above stays in place and the
     photograph keeps lining up with the text. */
  .page-hero__media,
  .page-hero__scrim {
    top: 0;
    bottom: auto;
    height: clamp(220px, 42vh, 340px);
  }
  .page-hero:not(.about-hero) .page-hero__media,
  .page-hero:not(.about-hero) .page-hero__scrim { bottom: auto; }
  .page-hero__media img { object-position: 50% 30%; }
  .page-hero__scrim {
    background: linear-gradient(180deg, oklch(1 0 0 / 0) 0%, oklch(1 0 0 / 0.3) 58%, var(--paper) 100%);
  }
  .page-hero__shell {
    padding-top: calc(clamp(220px, 42vh, 340px) + var(--sp-6));
    padding-bottom: var(--band);
  }
}

@media (max-width: 480px) {
  .nav-action { display: none; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: clamp(40px, 13vw, 62px); }
  .page-hero__actions .button { flex: 1 1 auto; }
  .final-cta h2 { font-size: clamp(45px, 13vw, 69px); }
  .final-actions .button { flex: 1 1 auto; }
}


/* Keyboard access retained from the live site shell. */
.skip-link {
  position: absolute;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: #fff;
  color: #101a2e;
  font-weight: 700;
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }
.site-footer__learning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--wm-line);
  color: var(--ink);
  font-size: var(--fs-small);
}
.site-footer__learning span { color: var(--ink); font-weight: 700; }
.site-footer__learning a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--sp-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__learning a:focus-visible { outline: 2px solid var(--wm-blue); outline-offset: 4px; }

/* The heroes are light now, so the handwriting that used to sit white on a navy
   scrim is set in ink with a white halo — it reads over the photograph without
   a dark overlay crossing the subject. */
.page-hero .hand-note--dark { color: var(--wm-ink); }
.page-hero .hand-note--over-photo {
  text-shadow: 0 1px 12px oklch(1 0 0 / 0.92), 0 1px 2px oklch(1 0 0 / 0.95);
}