/* ==========================================================================
   MERITALIEN — additions: two-column layouts, data tables, source lists,
   sticky asides, print. Appended to components.css by build.
   ========================================================================== */

/* ---------- split (prose + sticky aside) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); } }

.aside-sticky { position: sticky; top: 6rem; }
@media (max-width: 60rem) { .aside-sticky { position: static; } }

/* ---------- data tables ---------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-100);
}
@media (max-width: 48rem) { .table-wrap { border: 0; background: none; } }

table.opps { width: 100%; border-collapse: collapse; }
table.opps thead th {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--text-muted);
}
table.opps tbody tr { border-bottom: 1px solid var(--line); }
table.opps tbody tr:last-child { border-bottom: 0; }
table.opps tbody td {
  padding: var(--s-4) var(--s-5);
  vertical-align: top;
  padding-right: var(--s-5);
}
table.opps tbody tr { transition: background-color var(--dur-fast) var(--ease); }
table.opps tbody tr:hover { background: var(--paper-200); }

@media (max-width: 48rem) {
  .table-wrap { border: 0; }
  table.opps thead { display: none; }
  table.opps, table.opps tbody, table.opps tr, table.opps td { display: block; width: 100%; }
  table.opps tr {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-4);
    background: var(--paper-100);
  }
  table.opps td { padding: 0 0 var(--s-2); }
  table.opps td:last-child { padding-bottom: 0; }
}

/* ---------- source lists ---------- */
.srclist { display: grid; gap: var(--s-3); }
.srclist li { padding-left: var(--s-6); position: relative; font-size: var(--t-small); }
.srclist li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 8px; height: 1px; background: var(--accent);
}
.srclist a { border-bottom: 1px solid var(--accent-line); }
.srclist a:hover { border-bottom-color: var(--accent); }

/* ---------- inline code in prose ---------- */
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-200);
  padding: 2px 5px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* ---------- blockquote ---------- */
.prose blockquote {
  border-left: 1px solid var(--accent);
  padding-left: var(--s-5);
  margin-block: var(--s-6);
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--text-muted);
}
.prose blockquote p { max-width: 46ch; }

/* ---------- door rows used as content blocks ---------- */
.door[style*="align-items:start"] { padding-block: var(--s-8); }

/* ==========================================================================
   PRINT — people print pathway and guide pages. Give them a clean document.
   ========================================================================== */
@media print {
  :root {
    --ink-900: #fff; --ink-800: #fff; --ink-700: #fff;
    --paper-100: #fff; --paper-200: #fff; --paper-300: #fff;
    --text: #000; --text-muted: #333; --text-faint: #555;
    --text-invert: #000; --text-invert-muted: #333;
    --line: #ccc; --line-strong: #999;
    --line-invert: #ccc; --line-invert-strong: #999;
  }
  .nav, .footer, .hero__scroll, .vslot, .marquee, .btn, .btn-row,
  .nav__toggle, .skip, [data-globe], .globe-stage { display: none !important; }

  body { font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }
  .band, .band--tight { padding-block: 1.2rem; }
  .shell { max-width: none; padding-inline: 0; }
  .page-head { padding-top: 0; padding-bottom: 1rem; border-bottom: 1px solid #ccc; }

  /* reveal everything — nothing should be invisible on paper */
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; margin-top: 1.2rem; }
  h3 { font-size: 12pt; }
  .lead { font-size: 12pt; color: #333; }
  .prose { max-width: none; }

  a { text-decoration: none; color: #000; }
  /* show where links go, since a printed link is dead */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }

  .card, .callout, .table-wrap {
    border: 1px solid #ccc !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .split { grid-template-columns: 1fr; }
  .aside-sticky { position: static; }
  table.opps thead { display: table-header-group; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .door { break-inside: avoid; padding-block: 0.6rem; }
  .door::before { display: none; }
}

/* ==========================================================================
   TOUCH TARGETS
   WCAG 2.2 SC 2.5.8 sets 24x24 CSS px as the AA minimum; 44x44 is the AAA /
   platform recommendation. A pointer is precise and a thumb is not, so the
   target size is raised only on coarse pointers. Desktop keeps the designed
   34px chrome density, which is what makes the nav read as considered rather
   than as a consumer app.
   ========================================================================== */
@media (pointer: coarse) {
  .btn {
    height: 44px;
    padding-inline: var(--s-5);
  }
  .btn--xl { height: 56px; padding-inline: var(--s-6); }
  .btn--quiet { height: 44px; }

  .nav__mark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav__toggle { width: 44px; height: 44px; }
  .nav__link { display: inline-flex; align-items: center; min-height: 44px; }
  .nav__drawer a { min-height: 48px; display: flex; align-items: center; }

  select.select { min-height: 56px; }
  .collapsible__toggle { min-height: 48px; }

  /* chips are links in the Build preview — they need a real target */
  .tag {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
  }

  /* footer and card-title links: give them height without changing type size */
  .footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__social a { min-height: 44px; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .card__title a,
  .card__foot a,
  .srclist a {
    display: inline-block;
    padding-block: 11px;
  }
  .brief-item { min-height: 44px; }
  .door { min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Chips: clear 44px cleanly on touch (39.99px failed the gate on subpixel). */
@media (pointer: coarse) {
  .tag { min-height: 44px; }
}

/* Card and story footer links: 24px minimum at every pointer type (WCAG 2.2 AA).
   These sit outside prose so the inline-link exemption does not apply. */
.card__foot a,
.card__foot .small,
.story > a.small,
.story .card__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}

/* ==========================================================================
   VERTICAL DOORS
   The four layers and the route directory read as stacked rows separated by
   full-width hairlines, not as a table. Everything inside a door is vertical.
   ========================================================================== */
.doors--stacked {
  display: block;
  border-top: 1px solid var(--line);
}
.doors--stacked .door,
.door--stack {
  display: block;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.5rem, 3.4vw, 2.4rem);
  position: relative;
  transition: padding-left var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.door--stack > * { display: block; }

.door__num {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--text-faint);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-3);
}
.door__name {
  display: block;
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.door__q {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  color: var(--text-muted);
  margin-top: var(--s-2);
  max-width: 52ch;
}
.door__desc {
  display: block;
  font-size: var(--t-small);
  color: var(--text-faint);
  margin-top: var(--s-2);
  max-width: 62ch;
}
.door__meta,
.door__arrow {
  display: inline-block;
  margin-top: var(--s-4);
}
.door__meta { margin-right: var(--s-4); }
.door__arrow {
  color: var(--accent-ink);
  font-size: var(--t-small);
  transition: transform var(--dur) var(--ease);
}
.door--stack:hover { padding-left: var(--s-5); background: var(--paper-200); }
.door--stack:hover .door__arrow { transform: translateX(6px); }

/* the seven move stages: no arrow, more room for the paragraph */
.doors--stages { display: block; border-top: 1px solid var(--line); }
.door--stage {
  display: block;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
}
.door--stage .door__name { font-size: clamp(1.4rem, 3vw, 2.1rem); }

/* ==========================================================================
   STORY CARDS + PORTRAITS
   ========================================================================== */
.story-grid { gap: var(--s-8) var(--s-6); }

.story {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.story__who {
  display: block;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-top: var(--s-3);
}
.story__role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.story__hook {
  display: block;
  font-size: var(--t-small);
  color: var(--text-muted);
  max-width: 38ch;
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-300);
  border: 1px solid var(--line);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  /* portraits are the one place a slight desaturation earns its keep: it keeps a
     grid of thirty strangers reading as one system rather than a stock collage */
  filter: saturate(0.88) contrast(1.02);
  transition: transform 900ms var(--ease), filter 600ms var(--ease);
}
.story:hover .portrait img { transform: scale(1.035); filter: saturate(1) contrast(1.02); }

.portrait--mono {
  display: grid;
  place-items: center;
  background: var(--ink-800);
}
.portrait--mono span {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.4rem);
  color: var(--accent);
  letter-spacing: 0.02em;
}

.portrait--lg { aspect-ratio: 16 / 10; max-width: 34rem; }

.story-hero { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.story-hero__meta { display: grid; gap: var(--s-2); }
.story-hero__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==========================================================================
   FOR COMPANIES
   ========================================================================== */
.co-hero { display: grid; gap: var(--s-5); max-width: 52rem; }
.co-hero h1 {
  font-size: clamp(2.15rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 20ch;
}
.co-hero .lead { max-width: 44ch; color: var(--text-invert-muted); }

.co-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-8);
}
@media (max-width: 48rem) { .co-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }

.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 60rem) { .co-grid { grid-template-columns: minmax(0, 1fr); } }

.co-rail { display: grid; border-top: 1px solid var(--line); }
.co-rail__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.co-rail__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--accent-ink);
  letter-spacing: 0.06em;
}
.co-rail__v { font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.01em; }
.co-rail__n { grid-column: 2; font-size: var(--t-small); color: var(--text-faint); margin-top: 2px; }

.co-timeline { display: grid; border-top: 1px solid var(--line); }
.co-timeline__row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--text-muted);
}
.co-timeline__w {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
@media (max-width: 40rem) {
  .co-timeline__row { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ==========================================================================
   HERO BACKGROUND
   The hero sets `color: var(--text-invert)` (paper) but had no background of
   its own — it relied on the footage slot for its dark fill. Removing that slot
   left paper text on a paper body, i.e. an invisible headline. The hero owns
   its background now, so nothing else can take it away again.
   ========================================================================== */
.hero {
  background:
    radial-gradient(125% 90% at 16% 10%, rgba(0, 224, 122, 0.07) 0%, rgba(0, 0, 0, 0) 58%),
    radial-gradient(90% 80% at 88% 104%, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0) 62%),
    var(--ink-900);
  color: var(--text-invert);
}
.hero .eyebrow { color: var(--accent); }

/* The company hero is the same object at a different register. */
#co-hero {
  background:
    radial-gradient(120% 85% at 82% 8%, rgba(0, 224, 122, 0.06) 0%, rgba(0, 0, 0, 0) 58%),
    var(--ink-900);
}
#co-hero .eyebrow { color: var(--accent); }

/* ==========================================================================
   TEXT ON DARK BANDS
   `.eyebrow` uses `--text-muted`, which is a paper-context token. Inside a dark
   band that gave 2.92:1 — dark grey on near-black. Eyebrows and leads on ink
   surfaces now use the invert tokens, which measure 7.5:1 and up.
   ========================================================================== */
.band--ink .eyebrow,
.band--ink-800 .eyebrow,
.band--ink .lead,
.band--ink-800 .lead,
.band--ink .crumbs,
#co-hero .lead {
  color: var(--text-invert-muted);
}
.hero .eyebrow { color: var(--accent); }

/* Links inside card asides measured 22px tall on /for-companies/<vertical>/ —
   under the 24px WCAG 2.2 SC 2.5.8 minimum. They sit outside prose, so the
   inline-link exemption does not apply. */
.aside-sticky .card a,
.card .stack a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}

/* ==========================================================================
   HERO — geometry taken from moritzlegal.com (measured, not eyeballed)
   Reference, at a 1262px viewport: content column left-offset 80px and 514px
   wide (~41vw); eyebrow 14px, +0.08em, uppercase, weight 500; H1 54px with a
   56.7px line-height (1.05) and -3% tracking at weight 400; sub 16/24; two
   buttons at 50px tall, 8px radius, 16px padding, 16px apart on one row. The
   block sits left-aligned and slightly below vertical centre, from roughly 25%
   to 87% of the viewport.
   Our copy and our typefaces; their proportions.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  /* bias the block just below centre, as Moritz does */
  padding-top: clamp(6rem, 11vh, 8.5rem);
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
  background: var(--ink-900);   /* base under the media layer */
  color: var(--text-invert);
}

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media video,
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* shown only while no video/img is present; the :has() guard removes it */
.hero__media-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(0, 224, 122, 0.10) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(90% 70% at 12% 92%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(160deg, #17171a 0%, #0e0e10 48%, #0b0b0c 100%);
}
.hero__media:has(video) .hero__media-fallback,
.hero__media:has(img) .hero__media-fallback { display: none; }

.hero__media-tag {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vh, 2.5rem);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(251, 250, 248, 0.34);
}
.hero__media:has(video) .hero__media-tag,
.hero__media:has(img) .hero__media-tag { display: none; }

/* Left-weighted scrim: the subject sits right, the words sit left. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(96deg, rgba(6, 6, 7, 0.92) 0%, rgba(6, 6, 7, 0.78) 30%,
                    rgba(6, 6, 7, 0.42) 58%, rgba(6, 6, 7, 0.16) 100%),
    linear-gradient(180deg, rgba(6, 6, 7, 0.55) 0%, rgba(0, 0, 0, 0) 26%);
}

.hero__row { position: relative; z-index: 2; width: 100%; }

.hero__inner {
  display: grid;
  gap: var(--s-5);
  max-width: min(34rem, 42vw);
}
@media (max-width: 60rem) { .hero__inner { max-width: 34rem; } }

.hero .eyebrow {
  color: rgba(251, 250, 248, 0.9);
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: var(--s-2);
}

.hero__h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4.3vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin-block: var(--s-3);
}
.hero__h1 em { color: var(--accent); }

.hero__sub {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(251, 250, 248, 0.82);
  max-width: 34rem;
  margin: 0 0 var(--s-3);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

/* Moritz's button metric: 50px tall, 8px radius, 16px/24px padding. */
.btn--hero {
  height: 50px;
  padding-inline: var(--s-6);
  border-radius: var(--r-lg);
  font-size: 0.9375rem;
}
.btn--hero.btn--glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--text-invert);
}
.btn--hero.btn--glass:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.34);
}

/* ==========================================================================
   THE FOUR LAYERS — one horizontal band.

   Dividers run BETWEEN the columns (vertical hairlines down the side), not
   along the length. Four tall rows became one compact band, 4 -> 2 -> 1 columns.

   Specificity note, because this bit twice: the base `.door` in components.css
   is a THREE-column grid (`3.5rem 1fr auto`) built for a different markup shape
   (num | body | meta). This variant renders the flat spans directly, so it has
   to reset `grid-template-columns` and `align-items` explicitly. Overriding only
   display/gap/padding left the three-column template in place, which flowed
   `01 / Discover / Where can I go?` onto a single line with the arrow wrapped
   underneath. When a variant reuses a class, reset the whole rule, not the
   properties you happen to be changing.
   ========================================================================== */
.doors--row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.doors--row .door {
  display: grid;
  /* number beside the name; question and arrow stack beneath */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  padding: var(--s-6);
  border-left: 1px solid var(--line);
  border-bottom: 0;
  transition: background-color var(--dur) var(--ease);
}
.doors--row .door:first-child { border-left: 0; padding-left: 0; }
.doors--row .door:last-child { padding-right: 0; }

.doors--row .door__num { grid-column: 1; grid-row: 1; margin: 0; }
.doors--row .door__name {
  grid-column: 2; grid-row: 1;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  letter-spacing: -0.025em;
}
.doors--row .door__q {
  grid-column: 2; grid-row: 2;
  font-size: 0.9375rem;
  margin: 0;
  max-width: 28ch;
  /* Reserve two lines' worth regardless of how long the question is, so the
     arrows land on the same baseline across all four columns. Without this,
     "How do I become globally recognised?" wraps to two lines and its arrow
     sits 25px lower than the others, which reads as sloppy. */
  min-height: 2.95em;
}
/* Dropped in row mode: the question is the signpost, and the full description
   lives on each layer's own page. */
.doors--row .door__desc { display: none; }
.doors--row .door__arrow { grid-column: 2; grid-row: 3; margin-top: var(--s-3); }

/* Neutralise the original door interaction. It animates padding, which would
   shove content sideways on hover inside a four-across band, and it paints a
   ::before fill that would double up with the background change below. */
.doors--row .door::before { display: none; }
.doors--row .door:hover { background: var(--paper-200); padding: var(--s-6); }
.doors--row .door:first-child:hover { padding-left: 0; }
.doors--row .door:last-child:hover { padding-right: 0; }
.doors--row .door:hover .door__arrow { transform: translateX(6px); }

@media (max-width: 60rem) {
  .doors--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors--row .door {
    padding: var(--s-5);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }
  .doors--row .door:nth-child(-n+2) { border-top: 0; }
  .doors--row .door:nth-child(odd) { border-left: 0; padding-left: 0; }
  .doors--row .door:hover { padding: var(--s-5); }
  .doors--row .door:nth-child(odd):hover { padding-left: 0; }
}
@media (max-width: 40rem) {
  .doors--row { grid-template-columns: minmax(0, 1fr); }
  .doors--row .door,
  .doors--row .door:hover { border-left: 0; padding-inline: 0; }
  .doors--row .door:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   THE BELIEF — a deliberate composition instead of two lonely objects.
   The old version was a grid-2 with a 3-line paragraph in one column and a
   lone CTA in the other: the button floated at the top of an otherwise empty
   column, and 60% of the full-bleed ink band was dead space.
   Now: a full-width two-line statement, then two columns that both carry real
   content, with the CTA sitting under the sentence it answers.
   ========================================================================== */
.belief__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 5.5rem);
  row-gap: clamp(2rem, 4.5vw, 3.25rem);
  align-items: start;
}
.belief__head { grid-column: 1 / -1; display: grid; gap: var(--s-4); }
.belief__head h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  max-width: 20ch;
}
.belief__what { max-width: 46ch; }
.belief__close { display: grid; gap: var(--s-6); justify-items: start; }
.belief__close .lead { max-width: 42ch; }

@media (max-width: 60rem) {
  .belief__grid { grid-template-columns: minmax(0, 1fr); }
  .belief__head h2 { max-width: 26ch; }
}
/* the band carries a lot of vertical padding; trim it here where the section
   is short and the void was doing the damage */
.belief.band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ==========================================================================
   HERO FOOTAGE
   A locked-off studio interview. The source is 16:9 and the subject sits right
   of centre, so on a wide viewport nothing is cropped and the left third stays
   black for the headline. On a narrow viewport `cover` crops horizontally, so
   object-position is biased toward the subject to keep him in frame.
   ========================================================================== */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}

/* Narrow: the video fills more of the frame, so the scrim has to work harder
   for the headline to stay legible. */
@media (max-width: 60rem) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(6, 6, 7, 0.88) 0%, rgba(6, 6, 7, 0.66) 42%,
                      rgba(6, 6, 7, 0.58) 100%),
      linear-gradient(96deg, rgba(6, 6, 7, 0.72) 0%, rgba(6, 6, 7, 0.30) 70%,
                      rgba(6, 6, 7, 0.18) 100%);
  }
  .hero__video { object-position: 72% center; }
}

/* ==========================================================================
   MOBILE — corrective layer
   Loaded after components.css, so equal-specificity rules here win.

   The measured problems this addresses (see research/mobile-audit.md):
   desktop-first CSS with no min-width query anywhere, six ad-hoc breakpoints,
   and nothing below 640px, so every phone from 320-639px got one layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE NAVIGATION WAS UNREACHABLE ON A PHONE

   At <=62rem components.css hides .nav__links and reveals .nav__toggle — but
   the two desktop CTAs inside .nav__right were never hidden. So a phone got
   wordmark + "For companies" + "Find your route" + hamburger, and .nav__right
   measured 366px inside a 390px viewport. The hamburger was pushed 120px
   off-screen, which meant the drawer below could never be opened. The drawer
   and its JS were fine all along.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  /* Partially visible beats fully hidden. NN/g (Pernice & Budiu): "Hidden
     navigation is less discoverable than visible or partially visible
     navigation... discoverability is cut almost in half by hiding a website's
     main navigation", and it costs task time and raises perceived difficulty.

     So the primary CTA stays on screen and only the secondary link moves into
     the drawer. The original design had this intent (the CTAs were the things
     overflowing) and simply never hid the secondary one. */
  .nav__right > .btn--ghost { display: none; }
  .nav__right > .btn--primary {
    padding-inline: var(--s-4);
    font-size: var(--t-small);
  }
  .nav__right > .btn--primary .btn__arrow { display: none; }
  .nav__mark { font-size: 1.25rem; }
  .nav__inner { gap: var(--s-3); }
}

/* Measured, 2026-09-16, after the nav CTA changed from "Find your route" to
   "Book a call": the label is 72px at 14px/600 against 99px before, so the
   button is 104px in this style rather than 133px.
     wordmark 84 + CTA 104 + toggle 44 + gaps 24 + gutters 36 = 292px.
   The old 21rem floor existed only because 133px did not fit below 336px. At
   292px it fits on a 320px phone, which is what the block above always wanted
   ("partially visible beats fully hidden") and could not previously afford. The
   floor drops to 18.5rem, which leaves 320/360/390 all showing the CTA. */
@media (max-width: 18.5rem) {
  .nav__right > .btn--primary { display: none; }
}

@media (max-width: 48rem) {
  .nav__drawer.is-open {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
    /* a tall drawer must not run off the bottom of the screen */
    max-height: calc(100svh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__drawer a {
    font-size: 1.375rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* the CTA is not a nav row — it needs to look like the button it is */
  .nav__drawer .nav__cta {
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--t-small);
    min-height: 48px;
    padding-inline: var(--s-6);
    margin-top: var(--s-4);
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   2. THE DOORS BAND STAYED TWO-COLUMN ON A PHONE

   The reset below 40rem sets the template to one column, but the explicit
   placements on .door__num / .door__name are more specific and were never
   cleared — so the number and name stayed on one line inside a one-column
   track, and the arrow stranded below a two-line reserve that only exists to
   align arrows across columns on desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  /* The door's OWN template must collapse too — resetting only the children's
     placement leaves the stray `auto` first column alive, which put the
     description in a 41px track and overflowed it by 40px. */
  .doors--row .door {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .doors--row .door > * { grid-column: auto; grid-row: auto; }
  .doors--row .door__q { min-height: 0; }
  /* stacked, so there is room for the supporting sentence again */
  .doors--row .door__desc { display: block; }
  .doors--row .door__arrow { margin-top: var(--s-4); }
}

/* --------------------------------------------------------------------------
   3. TAGS WERE 10px
   -------------------------------------------------------------------------- */
.tag {
  font-size: 0.75rem;
  padding: 5px 10px;
}

/* ==========================================================================
   BREAKPOINT SYSTEM

   Consolidated from six ad-hoc values (40/44/48/60/62/64rem) — five of which
   clustered uselessly between 960px and 1024px — down to three tiers plus one
   small-phone tier. The old smallest breakpoint was 640px, which meant every
   phone from 320px to 639px got one identical layout.

     30rem  480px   small phone        (adds the tier that never existed)
     40rem  640px   phone -> large phone
     48rem  768px   large phone -> tablet   (nav switches to the drawer here)
     60rem  960px   tablet -> desktop       (multi-column layouts stack)

   Everything above 960px is the desktop design and is unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SMALL PHONE (<=480px) — the tier that was missing entirely.
   At 320px the hero headline and the gutters both need to give a little.
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  :root {
    --shell-x: 1.125rem;                     /* 18px, from 20px */
  }
  .hero__h1 {
    /* 32px at 320px, 36px by 480px — the previous floor of 36px left almost
       no room for the headline to breathe at 320px */
    font-size: clamp(2rem, 8.4vw, 2.25rem);
  }
  .hero__actions { gap: var(--s-3); }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .footer__cols { gap: var(--s-6); }
}

/* --------------------------------------------------------------------------
   SAFE AREAS (notch + home indicator)
   The viewport meta now carries viewport-fit=cover, so a fixed nav will run
   under the notch and bottom content under the iOS home indicator unless the
   insets are honoured. env() resolves to 0 on devices without them.
   -------------------------------------------------------------------------- */
@supports (padding-top: env(safe-area-inset-top)) {
  .nav { padding-top: calc(var(--s-4) + env(safe-area-inset-top)); }
  .nav.is-solid { padding-top: calc(var(--s-3) + env(safe-area-inset-top)); }
  .nav__inner {
    padding-left: max(var(--shell-x), env(safe-area-inset-left));
    padding-right: max(var(--shell-x), env(safe-area-inset-right));
  }
  .footer { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); }
  .nav__drawer.is-open {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   STORIES INDEX — filter + progressive disclosure

   31 cards stacked measured 24.5 phone screens and a single 19,261px section.
   Nine by default, filter by where someone came from, expand on request.
   The cards are all in the DOM (good for search and for no-JS), the JS only
   toggles visibility.
   ========================================================================== */
.story-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-10);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  line-height: 1;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--text); color: var(--text); }
.chip.is-on {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--text-invert);
}
.chip b { font-weight: 400; opacity: 0.5; margin-left: 0.4em; }
.chip.is-on b { opacity: 0.72; }
@media (pointer: coarse) {
  .chip { min-height: 44px; padding-inline: 16px; }
}

.story-count {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.story.is-out { display: none; }

.story-more { display: flex; justify-content: center; margin-top: var(--s-10); }
.story-more[hidden] { display: none; }

/* ==========================================================================
   STORIES — compact rows on a phone

   A full-width 4:5 portrait per card cost ~570px of scroll per story, so the
   index still measured 8.7 screens after clamping to nine. On a phone the same
   information reads better as a scannable row — a browse page should scan. The
   large-portrait treatment is preserved from 768px up.
   ========================================================================== */
@media (max-width: 40rem) {
  .story-grid { gap: 0; }
  .story-grid .story {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    align-items: start;
    padding-block: var(--s-5);
    border-top: 1px solid var(--line);
  }
  .story-grid .story:first-child { border-top: 0; }
  .story-grid .story .portrait {
    grid-column: 1;
    grid-row: 1 / span 3;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 88px;
    border-radius: var(--r-md, 8px);
  }
  .story-grid .story__who { grid-column: 2; grid-row: 1; }
  .story-grid .story__role { grid-column: 2; grid-row: 2; }
  .story-grid .story__hook { grid-column: 2; grid-row: 3; }
}

/* ==========================================================================
   STORY — fast facts table, FAQ, sources

   Modelled on the structure the ranking competitor case studies use: a summary
   table that maps the person's record to the evidence categories a petition
   actually asks about, a real FAQ block, and a visible source list.
   ========================================================================== */

.facts { margin: var(--s-8) 0 var(--s-10); }
.facts__caption {
  /* `display: block` was taking the caption out of table layout, and a caption
     that is not a table-caption gets laid out as an anonymous block *after* the
     header group — which is why every table on this site rendered its note
     wedged between the column headers and the first row. table-caption with
     caption-side: top puts it where the rest of this rule always intended it:
     above the table, before the headers. */
  display: table-caption;
  caption-side: top;
  text-align: left;
  font-size: var(--t-small);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  max-width: 62ch;
}
.facts__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  text-align: left;
}
.facts__table th,
.facts__table td {
  padding: var(--s-4) var(--s-3);
  border-top: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.facts__table thead th {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-strong);
}
.facts__table tbody th {
  font-weight: 500;
  color: var(--text);
  width: 34%;
}
.facts__table tbody td { color: var(--text-muted); }

/* the FAQ uses <details> so the answers are in the DOM for crawlers and AI
   engines while the page stays scannable for a human */
.faq { margin: var(--s-6) 0 var(--s-10); }
.faq__item {
  border-top: 1px solid var(--line);
  padding: var(--s-2) 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer;
  padding: var(--s-4) 0;
  font-size: var(--t-lead);
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 44px;
  align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent-ink);
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__a { padding-bottom: var(--s-5); }
.faq__a p { color: var(--text-muted); margin: 0; }
@media (pointer: coarse) { .faq__item summary { min-height: 48px; } }

.sources__list {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  font-size: var(--t-small);
}
.sources__list li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.sources__list a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.sources__list a:hover { color: var(--accent-ink); }

/* the story body needs looser rhythm than the default prose block */
.story-body h2 { margin-top: var(--s-10); }
.story-body h3 { margin-top: var(--s-6); margin-bottom: var(--s-2); }
.story-body p { margin-bottom: var(--s-5); }
.story-body > h2:first-of-type { margin-top: var(--s-8); }

/* The story body carries .prose, and .prose paints an accent dash before every
   `ul li`. The sources list is a list of links, not prose bullets, so neutralise
   the marker and its indent — otherwise every citation has a stray dash. */
.story-body .sources__list li { padding-left: 0; }
.story-body .sources__list li::before { content: none; }
.story-body .sources__list { display: block; margin-block: var(--s-5) 0; }

/* On a phone the two-column evidence table is worse than useless: the label
   column wraps to four lines and squeezes the value column into a ragged
   ribbon. Stack each row — label above value — which reads as a definition
   list and gives the evidence the full width. */
@media (max-width: 40rem) {
  .facts__table thead { display: none; }
  .facts__table,
  .facts__table tbody,
  .facts__table tr,
  .facts__table th,
  .facts__table td { display: block; width: auto; }
  .facts__table tr {
    padding: var(--s-4) 0 var(--s-5);
    border-top: 1px solid var(--line);
  }
  .facts__table tbody th,
  .facts__table tbody td {
    border: 0;
    padding: 0;
  }
  .facts__table tbody th {
    width: auto;
    margin-bottom: var(--s-2);
    color: var(--text);
  }
  .facts__table tbody td { color: var(--text-muted); }
}


/* ==========================================================================
   NAV DRAWER + FOOTER — mobile rebuild

   Measured at 320/360/390/430px before this layer:
     · the open drawer was TRANSPARENT: four menu rows collided with live hero
       text, and the hero's own two CTAs sat on top of Move / Countries / About
     · at 320px the primary CTA was hidden outright (max-width: 21rem), leaving
       a 152px dead gap between the wordmark and the menu button
     · the drawer was a flat list of 12 equal-weight links, 625px tall
     · the footer measured 1,004-1,025px — taller than the 844px phone screen —
       as 21 rows at 44px, with Disclosures/Privacy/Terms printed twice
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE MENU PANEL WAS TRANSPARENT OVER THE HERO
   `.nav` is fixed and, on a dark-hero page, deliberately transparent until the
   hero is scrolled past. The drawer is a child, so it inherited that, and the
   hero painted through the open menu. While the menu is open the nav is an
   opaque ink panel, whichever state it was in.
   -------------------------------------------------------------------------- */
.nav.is-menu-open {
  background: var(--ink-900);
  color: var(--text-invert);
  border-bottom-color: var(--line-invert);
}
.nav.is-menu-open .nav__drawer { border-top-color: var(--line-invert); }
/* the CTA is accent-on-ink over a hero, but `.is-solid` flips it to ink-on-paper
   — invisible on the panel above, so it is restored explicitly */
.nav.is-menu-open .btn--primary { background: var(--accent); color: var(--ink-900); }
.nav.is-menu-open .btn--primary:hover { background: #00c96b; }
/* between 48rem and 60rem the drawer exists AND the secondary "For companies"
   link is still on screen. `.is-solid` paints it ink-on-paper, which on the ink
   panel above is invisible — measured rgb(11,11,12) on rgb(11,11,12). */
.nav.is-menu-open .btn--ghost,
.nav.is-solid.is-menu-open .btn--ghost {
  border-color: var(--line-invert-strong);
  color: var(--text-invert);
}
.nav.is-menu-open .btn--ghost:hover { background: rgba(251, 250, 248, 0.08); border-color: var(--text-invert); }
/* the desktop links are hidden below 60rem, but keep them legible if a width
   falls between the rule and the toggle */
.nav.is-menu-open .nav__link { color: var(--text-invert); }

/* the page behind the menu holds still while the menu is open */
html.menu-locked,
html.menu-locked body { overflow: hidden; overscroll-behavior: none; }

/* Beneath the panel the hero's own buttons sat at full strength, which read as
   an unfinished overlay rather than a sheet. A fixed scrim inside the nav (which
   is already the top stacking context) darkens everything below the panel
   without touching the panel itself, and a tap on it dismisses the menu. */
@media (max-width: 60rem) {
  .nav.is-menu-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(11, 11, 12, 0.74);
  }
}

/* --------------------------------------------------------------------------
   2. THE MENU BUTTON
   A 16px glyph floating in a 40px outlined box read as an unfinished box, made
   worse by sitting over moving hero footage. Three 20px bars on an even 6px
   rhythm, and it becomes a close (X) while the panel is open — so the way out
   is visible rather than remembered.
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .nav__toggle {
    width: 44px; height: 44px;
    background: rgba(251, 250, 248, 0.06);
    border-color: var(--line-invert-strong);
  }
  .nav.is-solid .nav__toggle { background: rgba(11, 11, 12, 0.04); border-color: var(--line-strong); }
  .nav.is-menu-open .nav__toggle { background: rgba(251, 250, 248, 0.06); border-color: var(--line-invert-strong); }

  /* the bars themselves are defined in components.css — one definition, not two */
}

/* --------------------------------------------------------------------------
   3. THE DRAWER — four routes, then the pages under them, then one CTA
   Twelve identical serif rows gave no way to tell `Discover` (a route) from
   `Guides` (a page inside it), and ran 625px on an 844px screen.
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .nav__drawer.is-open {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  }
  .nav__drawer-primary { display: grid; gap: var(--s-2); }
  .nav__drawer .nav__drawer-link {
    font-family: var(--font-serif);
    font-size: 1.625rem;
    line-height: 1.1;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__drawer-head {
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--text-invert-muted);
    margin: 0 0 calc(-1 * var(--s-3));
  }
  .nav__drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-5);
  }
  .nav__drawer .nav__drawer-sub {
    font-family: var(--font-sans);
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   4. THE 320px DEAD GAP
   "Find your route" (133px) + wordmark + toggle measured 321px in a 320px
   viewport, so the CTA was hidden below 336px. The label shortens instead:
   "Find route" measures 288px for the whole row, so the smallest phones keep
   the call to action.
   -------------------------------------------------------------------------- */
.btn__lbl--short { display: none; }
@media (max-width: 21rem) {
  .nav__right > .btn--primary { display: inline-flex; }
  .btn__lbl--long { display: none; }
  .btn__lbl--short { display: inline; }
}

/* --------------------------------------------------------------------------
   5. THE FOOTER
   ~1,000px on a 390px phone and taller than the screen itself. Below 48rem the
   three groups become disclosure rows, collapsed by default: ~430px, every link
   intact, every link still 44px once opened. The duplication is removed at
   EVERY width — Disclosures / Privacy / Terms live in the bottom bar only, and
   Cookies moved in with them, which is one fewer column on desktop too.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .footer { padding-block: var(--s-10) var(--s-8); }
  .footer__top { gap: var(--s-8); }
  .footer__cols { display: block; }
  .footer__col { border-top: 1px solid var(--line-invert); }
  .footer__col:last-child { border-bottom: 1px solid var(--line-invert); }
  .footer__col h3 { margin: 0; }
  .footer__panel { padding-block: var(--s-2) var(--s-4); }
  .footer__bottom { margin-top: var(--s-8); }
}
@media (min-width: 48.01rem) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the panel is already open here; the marker would read as an FAQ widget */
  .footer__sign { display: none; }
}

/* Off-site profiles, in the brand block above the columns. Words rather than
   three icon buttons: at 24px the glyphs are indistinguishable from each other
   and cost more room than the names do. `.stack-lg` would hand the row a full
   --s-8 of air, which reads as a third paragraph rather than a footnote to the
   tagline, so it is pulled back to --s-5. */
.footer__social { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.stack-lg > .footer__social { margin-top: var(--s-5); }
.footer__social a {
  display: inline-flex; align-items: center; min-height: 24px;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase;
  color: var(--text-invert); opacity: .82;
  transition: opacity var(--dur-fast) var(--ease);
}
.footer__social a:hover { opacity: 1; }

.footer__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 24px;                 /* WCAG 2.2 SC 2.5.8 minimum at any width */
  padding: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-invert-muted);
}
@media (pointer: coarse) { .footer__toggle { min-height: 48px; } }

/* the open/closed marker: a plus that drops its vertical stroke */
.footer__sign { position: relative; width: 12px; height: 12px; flex: none; }
.footer__sign::before,
.footer__sign::after {
  content: ""; position: absolute; background: var(--text-invert-muted);
  transition: transform var(--dur) var(--ease);
}
.footer__sign::before { top: 5.5px; left: 0; width: 12px; height: 1px; }
.footer__sign::after { left: 5.5px; top: 0; width: 1px; height: 12px; }
.footer__toggle[aria-expanded="true"] .footer__sign::after { transform: scaleY(0); }

/* a collapsed panel is ABSENT, not merely clipped — and `hidden` must win over
   any display rule the layers above set */
.footer__panel[hidden] { display: none !important; }
.footer__panel ul { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ==========================================================================
   WIDE DATA TABLES (3+ columns)

   A comparison matrix is the entire point of a comparison page, so it has to
   stay readable at every width. Desktop: contain any overflow inside the table
   rather than scrolling the page. Phone: reflow each row into stacked
   label/value blocks, because a 5-column matrix at 390px is unreadable and
   horizontal scroll destroys the comparison.
   ========================================================================== */
.facts--wide {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.facts--wide .facts__table { min-width: 46rem; }

@media (max-width: 48rem) {
  .facts--wide { overflow-x: visible; }
  .facts--wide .facts__table { min-width: 0; }
  .facts--wide .facts__table thead { display: none; }
  .facts--wide .facts__table,
  .facts--wide .facts__table tbody,
  .facts--wide .facts__table tr,
  .facts--wide .facts__table th,
  .facts--wide .facts__table td { display: block; width: auto; }

  .facts--wide .facts__table tr {
    padding: var(--s-5) 0;
    border-top: 1px solid var(--line);
  }
  .facts--wide .facts__table tbody th {
    border: 0;
    padding: 0 0 var(--s-3);
    font-size: var(--t-lead);
    width: auto;
  }
  .facts--wide .facts__table tbody td {
    border: 0;
    padding: 0 0 var(--s-4);
  }
  .facts--wide .facts__table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--tr-mono);
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: var(--s-2);
  }
  .facts--wide .facts__table tbody th { margin-bottom: 0; }
}

/* ==========================================================================
   THE BOOKING ROOM — every "Talk to us" on the site lands here
   ==========================================================================
   Nine primary calls to action, four of them reading "Talk to us" and pointing
   at /about/, a page with no form and no calendar. The button promised a
   conversation. This is the conversation.

   The panel is ours; Cal.com renders its real calendar into the right-hand
   slot. On the accent: the panel uses none of it. The only place the accent
   survives in here is Cal's own brand colour for the selected slot and the
   confirm button — the same "go" meaning it carries on the primary CTA, which
   is the button that opened this. No accent border, no accent heading, no
   accent icon: the token still appears on three things sitewide.
   ========================================================================== */

html.book-open,
html.book-open body { overflow: hidden; }

.book {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
}
.book[hidden] { display: none; }

.book__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 8, 0.74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.book.is-open .book__scrim { opacity: 1; }

.book__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  width: min(62rem, calc(100vw - 2 * var(--s-6)));
  height: min(44rem, 88svh);
  background: var(--ink-800);
  color: var(--text-invert);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
  /* translates in, never fades in place — the site's one motion rule */
  transform: translateY(14px) scale(0.995);
  transition: transform var(--dur) var(--ease);
}
.book.is-open .book__panel { transform: none; }

.book__aside {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: var(--s-10) var(--s-8) var(--s-8) var(--s-10);
  border-right: 1px solid var(--line-invert);
}
.book__h {
  font-size: 1.5rem;
  line-height: 1.14;
  letter-spacing: var(--tr-heading);
  font-weight: 500;
  max-width: 18ch;
}
.book__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.book__list li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-invert-muted);
}
.book__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--line-invert-strong);
}
.book__meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-invert-muted);
}
.book__fallback {
  justify-self: start;
  font-size: var(--t-small);
  color: var(--text-invert);
  text-decoration: none;
  border-bottom: 1px solid var(--line-invert-strong);
  padding-bottom: 2px;
}
.book__fallback:hover { border-bottom-color: var(--text-invert); }

.book__main {
  position: relative;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--ink-900);
}
.book__slot { min-height: 100%; }
.book__slot iframe { width: 100%; border: 0; }
.book__note {
  padding: var(--s-8);
  font-size: var(--t-small);
  color: var(--text-invert-muted);
}
.book__note a { color: var(--text-invert); }

.book__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--ink-800);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-sm);
  color: var(--text-invert);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.book__close:hover { background: var(--ink-700); border-color: var(--line-invert-strong); }
.book__close span { position: relative; display: block; width: 13px; height: 13px; }
.book__close span::before,
.book__close span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
}
.book__close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.book__close span::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* A phone gets the whole screen: the calendar needs the room more than our
   copy does, so the invitation collapses to a header and the list goes. */
@media (max-width: 60rem) {
  .book__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: 100vw;
    height: 100svh;
    border: 0;
    border-radius: 0;
    transform: translateY(2vh);
  }
  .book__aside {
    gap: var(--s-2);
    padding: var(--s-6) var(--s-16) var(--s-5) var(--s-6);
    border-right: 0;
    border-bottom: 1px solid var(--line-invert);
  }
  .book__h { font-size: 1.25rem; max-width: 22ch; }
  .book__list { display: none; }
  .book__meta { font-size: 0.6875rem; }
  .book__main { min-height: 0; }
  .book__close { top: var(--s-4); right: var(--s-4); }
}

/* The same calendar, standing on its own page at /book/ — for anyone who
   wants a link rather than a button, and for the no-JS path. */
.book-inline {
  background: var(--ink-900);
  border: 1px solid var(--line-invert);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 38rem;
}
.book-inline .book__note { color: var(--text-invert-muted); }
.book-inline .book__note a { color: var(--text-invert); }

/* ==========================================================================
   PRICING TABLES
   ==========================================================================
   The headline table sits on the ink hero band, so the base .facts__table
   colours (which assume paper) have to be inverted in place. The phone
   behaviour is the site's existing .facts--wide pattern: each row reflows into
   stacked label/value blocks, because four money columns at 390px is a
   horizontal scroll and a horizontal scroll destroys a comparison.
   ========================================================================== */

.price-table td.price__num,
.price-table th.price__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--text);
}
.price-table tbody th { width: auto; }
.price-table td.price__num--total { font-weight: 500; }
.price-table .price__sub {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: var(--text-faint);
}
.price-table .price__quote { color: var(--text-muted); white-space: normal; }

/* the government fee list is a label/value pair per row, not a matrix */
.price-table--gov tbody th { font-weight: 400; color: var(--text-muted); }
.price-table--gov td.price__num { font-size: var(--t-small); }

/* --- on ink --- */
.band--ink .price-table td.price__num,
.band--ink .price-table th.price__num { color: var(--text-invert); }
.band--ink .price-table .price__sub,
.band--ink .price-table .price__quote,
.band--ink .price-table--gov tbody th { color: var(--text-invert-muted); }
.band--ink .table-wrap { background: transparent; border-color: var(--line-invert); }
.band--ink .facts__table th,
.band--ink .facts__table td { border-top-color: var(--line-invert); }
.band--ink .facts__table thead th {
  color: var(--text-invert-muted);
  border-bottom-color: var(--line-invert-strong);
}
.band--ink .facts__table tbody th { color: var(--text-invert); }
.band--ink .facts__table tbody td { color: var(--text-invert-muted); }
.band--ink .facts__caption { color: var(--text-invert-muted); }

@media (max-width: 48rem) {
  /* the stacked rows are separated by a rule, which has to invert too */
  .band--ink .facts--wide .facts__table tr { border-top-color: var(--line-invert); }
  .band--ink .facts--wide .facts__table tbody td::before { color: var(--text-invert-muted); }
  .price-table td.price__num { text-align: left; }
}

/* ==========================================================================
   THE NAVIGATOR BAND IS SHORTER ON A DESKTOP, NOT SMALLER
   ==========================================================================
   The globe is a 1:1 stage, so the section's height is the sphere plus this
   band's padding plus the section head — and the sphere is most of it. Asking
   for a shorter section by shrinking the globe is asking for the wrong thing;
   the height that is actually disposable is the padding. On a 1440px screen
   the default band padding is 8.5rem top and bottom, so the navigator was
   carrying 272px of air around a 544px globe. Below 60rem the navigator
   stacks and needs the room, so this only applies above it.
   ========================================================================== */
@media (min-width: 60.001rem) {
  #where { padding-block: clamp(2.5rem, 3.5vw, 3.5rem); }
  #where .sec-head { gap: var(--s-3); }
}

/* ==========================================================================
   THE FEE STRIP
   ==========================================================================
   The price and the call, at the point where someone has already said they are
   interested, instead of on a page nobody has a reason to reach yet.

   The fee strip goes on each route's own page, above the article, so the
   sticker price is above the fold on a phone — where the sticky sidebar card
   is not.

   The navigator's own closing row is NOT here: navigator.js renders it inside
   the result block, so it appears only once a visitor has picked a destination
   and a role. A row that was always visible would be asking before the visitor
   had said anything.
   ========================================================================== */

.fee-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-strong);
}
.fee-strip__figs { display: flex; flex-wrap: wrap; gap: var(--s-10); }
.fee-strip__fig { display: grid; gap: 2px; }
.fee-strip__fig .mono { color: var(--text-faint); }
.fee-strip__fig strong {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: var(--tr-heading);
  line-height: 1.1;
}
.fee-strip__note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 32ch;
}
.fee-strip__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

@media (max-width: 40rem) {
  .fee-strip { align-items: flex-start; gap: var(--s-5); }
  .fee-strip__figs { gap: var(--s-6); }
  .fee-strip__cta { width: 100%; }
  .fee-strip__cta .btn { flex: 1 1 auto; justify-content: center; }
}

.price-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12) var(--s-16);
  align-items: start;
}
@media (max-width: 60rem) { .price-groups { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); } }

.price-group {
  break-inside: avoid;
}
.price-group__h {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: var(--tr-heading);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-strong);
}
.price-group__blurb {
  font-size: var(--t-small);
  color: var(--text-muted);
  max-width: 44ch;
  margin-top: var(--s-3);
}
/* the per-group tables sit tight: no caption, no outer card, hairlines only */
.price-group .facts__table { margin-top: var(--s-2); }
.price-group .facts__table thead th { padding-block: var(--s-3); }
.price-group .facts__table tbody td { padding-block: var(--s-3); }
.price-group .facts--wide { overflow-x: visible; }
.price-group .facts--wide .facts__table { min-width: 0; }
.price-table .price__gov { color: var(--text-faint); font-size: var(--t-small); white-space: nowrap; }

@media (max-width: 48rem) {
  /* three columns of money at 390px is a scroll; stack instead */
  .price-group .facts--wide .facts__table thead { display: none; }
  .price-group .facts--wide .facts__table,
  .price-group .facts--wide .facts__table tbody,
  .price-group .facts--wide .facts__table tr,
  .price-group .facts--wide .facts__table td { display: block; width: auto; }
  .price-group .facts__wide .facts__table tr,
  .price-group .facts--wide .facts__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--s-4);
    padding-block: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .price-group .facts--wide .facts__table tbody td:first-child {
    grid-column: 1; grid-row: 1 / span 2; align-self: center;
  }
  .price-group .facts--wide .facts__table tbody td:nth-child(2) {
    grid-column: 2; grid-row: 1; text-align: right;
    font-size: 1.0625rem; color: var(--text);
  }
  .price-group .facts--wide .facts__table tbody td:nth-child(3) {
    grid-column: 2; grid-row: 2; text-align: right;
  }
  .price-group .facts--wide .facts__table tbody td::before { content: none; }
}




/* Optional editorial hero for a rich guide or report page. Renders only when
   the content JSON declares a `hero` and the asset exists under
   site/assets/headers/, so a page is never waiting on artwork to build. */
.guide-hero { padding-top: clamp(1.5rem, 4vw, 2.75rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.guide-hero img {
  width: 100%;
  height: auto;
  max-height: 27rem;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-200);
}
.guide-hero__cap {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Cap-exempt position explorer. Reuses the chip, table and select patterns
   already on the site so it reads as the same product, not an embedded widget. */
.capex__bar { display: grid; gap: var(--s-5); margin-block: var(--s-8); }
.capex__controls {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: end;
}
.capex__controls label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}
.capex__controls input[type="search"],
.capex__controls select {
  width: 100%;
  font: inherit;
  font-size: var(--t-small);
  color: var(--text);
  background: var(--paper-200);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.6rem 0.7rem;
}
.capex__count { font-size: var(--t-small); color: var(--text-muted); margin-bottom: var(--s-4); }
/* The row header must stay a table-cell: `display: grid` here silently breaks
   the fixed column widths, squeezing the institution column to ~49px. Style
   the children instead. */
.capex__table th[scope="row"] { font-weight: 500; }
.capex__table th[scope="row"] .capex__inst { display: block; }
.capex__table th[scope="row"] .tag { display: inline-block; margin-top: var(--s-2); }
.capex__inst { font-weight: 500; }
.capex__sub { display: block; font-size: var(--t-mono); color: var(--text-faint); margin-top: var(--s-1); }
.capex__note { font-size: var(--t-small); color: var(--text-muted); margin-top: var(--s-6); max-width: 68ch; }
.capex .table-wrap { overflow-x: auto; }
.capex__table { width: 100%; min-width: 44rem; }
.capex__table td a { white-space: nowrap; }
@media (max-width: 60rem) { .capex__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .capex__controls { grid-template-columns: 1fr; } }

/* Column widths for the explorer table. Without a fixed layout the browser
   hands the institution column ~90px and wraps "Ames National Laboratory"
   across four lines while the title column sits half empty. */
.capex__table { table-layout: fixed; }
.capex__table th:nth-child(1), .capex__table td:nth-child(1) { width: 21%; }
.capex__table th:nth-child(2), .capex__table td:nth-child(2) { width: 31%; }
.capex__table th:nth-child(3), .capex__table td:nth-child(3) { width: 16%; }
.capex__table th:nth-child(4), .capex__table td:nth-child(4) { width: 12%; }
.capex__table th:nth-child(5), .capex__table td:nth-child(5) { width: 11%; }
.capex__table th:nth-child(6), .capex__table td:nth-child(6) { width: 9%; }
.capex__table .tag { white-space: nowrap; }
.capex__table td, .capex__table th { vertical-align: top; }
@media (max-width: 60rem) { .capex__table { table-layout: auto; min-width: 40rem; } }


/* ---------- opportunity directory: search and facet chips ----------
   Appended rather than inserted: this file is hand-maintained and shared, and an
   append cannot clobber a concurrent edit above it.

   The chips reuse .tag, so they already carry the site's mono/uppercase/border
   treatment. All this adds is the interactive state and the search field, which
   is why the directory looks like the rest of the site rather than like a
   separate product with its own control language.

   A chip is an <a> in the markup, not a <button>: filtering by type, field or
   stage must work with JavaScript off, must be crawlable, and must produce a URL
   someone can send to a friend. opportunities.js only powers the search box,
   which is the one thing a static page cannot do.                        */

.opps-controls { display: grid; gap: var(--s-5); }

.opps-search { display: block; }
.opps-search input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: var(--s-4) var(--s-5);
  color: var(--text);
  background: var(--paper-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.opps-search input::placeholder { color: var(--text-faint); }
.opps-search input:focus-visible { outline: none; border-color: var(--accent-line); }

.opps-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.opps-chips > .eyebrow { flex: 0 0 100%; margin: 0; }

.opps-chip { text-decoration: none; }
.opps-chip:hover { border-color: var(--text-muted); color: var(--text); }
.opps-chip:focus-visible { outline: none; border-color: var(--accent-line); color: var(--accent-ink); }
.opps-chip__n { opacity: 0.55; margin-left: 2px; }

.opps-status { color: var(--text-faint); margin: 0; min-height: 1.2em; }

.opps-reset {
  font: inherit;
  padding: 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.opps-row[hidden] { display: none; }

/* A closed cycle should read as closed without shouting. The row stays in the
   list because a programme that recurs is still worth knowing about. */
.opps-cycle--closed { color: var(--text-faint); }

@media (max-width: 48rem) {
  .opps-search input { font-size: 1rem; }  /* 16px: below this iOS zooms the field on focus */
  .opps-chips { gap: var(--s-1); }
}