/* 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;
  color: oklch(0.78 0.03 245);
  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. */
h2 span { color: var(--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 {
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
  border-bottom: 1px solid oklch(0.99 0.004 240 / 0.2);
  color: var(--white);
}

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

.wordmark {
  display: inline-flex;
  min-width: 150px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}

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

.wordmark-credentials {
  color: oklch(0.74 0.03 245);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
}

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

.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: oklch(0.81 0.025 245);
  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(--blue);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.primary-nav a:hover,
.primary-nav a.active { color: var(--white); }
.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(--white);
  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;
  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(--blue);
  color: var(--navy-deep);
}

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

.nav-action:hover,
.button-blue:hover {
  background: oklch(0.72 0.18 255);
  color: var(--navy-deep);
  transform: translateY(-2px);
}

.button-light {
  background: var(--white);
  color: var(--navy-deep);
}

.button-light:hover {
  background: oklch(0.9 0.02 240);
  color: var(--navy-deep);
  transform: translateY(-2px);
}

.button-outline {
  border-color: oklch(0.99 0.004 240 / 0.7);
  color: var(--white);
}

.button-outline:hover {
  border-color: var(--white);
  background: oklch(0.99 0.004 240 / 0.12);
  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(--blue); }

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

/* ---------- 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 oklch(0.99 0.004 240 / 0.24);
}

.principles-list li:first-child { border-top: 1px solid oklch(0.99 0.004 240 / 0.24); }

.principles-list > li > span {
  color: var(--blue);
  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: oklch(0.78 0.025 245);
  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(--white);
  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(--blue);
  color: var(--navy-deep);
  font-size: var(--fs-micro);
  font-weight: 700;
}

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

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--white);
}

/* 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; }

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

.page-hero__scrim {
  z-index: 1;
  background:
    linear-gradient(90deg, var(--navy-deep) 0%, oklch(0.13 0.05 255 / 0.95) 38%, oklch(0.13 0.05 255 / 0.62) 72%, oklch(0.13 0.05 255 / 0.34) 100%),
    linear-gradient(0deg, oklch(0.13 0.05 255 / 0.55), transparent 62%);
}

.page-hero__shell {
  padding-top: 152px;
  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(--blue); }

.page-hero__dek {
  max-width: var(--measure-body);
  margin: var(--sp-5) 0 0;
  color: oklch(0.87 0.025 245);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

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

.page-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  margin: 38px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid oklch(0.99 0.004 240 / 0.24);
  list-style: none;
}

.page-hero__facts strong {
  display: block;
  color: var(--blue);
  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: oklch(0.78 0.025 245);
  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(--navy-deep);
  color: var(--white);
}

.final-media,
.final-scrim {
  position: absolute;
  inset: 0;
}

.final-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  filter: saturate(0.76) contrast(1.1);
}

.final-scrim {
  z-index: 1;
  background:
    linear-gradient(90deg, oklch(0.13 0.05 255 / 0.92) 0%, oklch(0.13 0.05 255 / 0.68) 45%, oklch(0.13 0.05 255 / 0.18) 100%),
    linear-gradient(0deg, oklch(0.13 0.05 255 / 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: oklch(0.86 0.025 245);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

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

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

.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  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(28px, 4vw, 56px);
  padding-bottom: 34px;
  border-bottom: 1px solid oklch(0.99 0.004 240 / 0.16);
}

.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(--blue);
  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: oklch(0.8 0.025 245);
  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-4);
  color: oklch(0.72 0.025 245);
  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;
}

.site-footer__col li + li { margin-top: var(--sp-3); }

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

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

.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: 14px 30px;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 22px;
  color: oklch(0.7 0.02 245);
  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: 420px; }
  .final-shell {
    min-height: 420px;
    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(--navy-deep);
    border: 1px solid var(--line-dark);
  }

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

  .primary-nav a {
    min-height: 48px;
    padding-top: 16px;
    border-bottom: 1px solid oklch(0.99 0.004 240 / 0.13);
  }

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

  .page-hero__shell { padding-top: 118px; padding-bottom: var(--band-tight); }

  /* On a phone a left-to-right scrim has nowhere to work, so the photograph
     takes the top half and the copy starts below it against flat navy. */
  .page-hero__media { inset: 0 0 52% 0; }
  .page-hero__scrim {
    background:
      linear-gradient(180deg, oklch(0.13 0.05 255 / 0.58) 0%, oklch(0.13 0.05 255 / 0.32) 40%, var(--navy-deep) 82%),
      linear-gradient(90deg, oklch(0.13 0.05 255 / 0.3), transparent);
  }
  .page-hero__shell { padding-top: 54vh; }
}

@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(--line-dark);
  color: var(--white);
  font-size: var(--fs-small);
}
.site-footer__learning span { color: var(--white); font-weight: 700; }
.site-footer__learning a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__learning a:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }