@charset "utf-8";
/* ==========================================================================
   Alarivean Design System
   Shared stylesheet for the Sophia Delta site network.
   Sixteen sites run the ocean palette and override only --accent-*. Sophia
   Delta is a second brand on this sheet and also overrides the eighteen
   surface, ink and type tokens listed in scripts/tokens.mjs. Nothing else in
   this file is a site's to move.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Faces
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-900.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-500.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Sophia Delta's face. It ships in the shared sheet rather than in a second
   stylesheet because there is no second stylesheet — sixteen sites and one
   second brand run off this file, and a site that loaded its own would be the
   first crack in that. Nothing on the ocean sites names Montserrat, so nothing
   on them fetches it. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* h1, h2, .display and .nav__brand-text all ask for 900, and that weight is
   written into the rules rather than into a token, so a site cannot lower it.
   Montserrat Black at 5.5rem is a solid block, and the brand deck sets the
   wordmark in Bold. Declaring ExtraBold across 800-900 answers the 900 request
   with the weight the deck actually uses and still leaves a real step above the
   700 that h3 and .btn carry. Same mechanism as the Roboto face above, used for
   the opposite purpose. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-800.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ocean base */
  --abyss: #001324;
  --deep: #001b48;
  --ocean: #004581;
  --marine: #3086a6;
  --azure: #018abd;
  --teal: #009798;
  --sky: #97cbdc;
  --mist: #dde8f0;

  /* Warm accents */
  --gold: #fdd55b;
  /* .btn--gold:hover carried this as a literal, which meant the one button
     the build puts in every nav could not follow a site's palette. */
  --gold-hover: #f5c53a;
  --sand: #ead5b5;
  --ember: #d65200;

  /* Neutrals */
  --white: #ffffff;
  --foam: #f4f8fb;
  --slate-100: #e3ebf2;
  --slate-300: #b4c6d6;
  --slate-500: #6a8299;
  --slate-700: #33506b;

  /* Semantics */
  --text-strong: #001324;
  --text-body: #14283b;
  /* The brand book maps muted text to slate-500, which measures 3.73:1 on
     foam. Muted copy is still copy, so the semantic is pinned one step darker;
     --slate-500 remains available for rules, icons and non-text marks. */
  --text-muted: #5d7288;
  --text-inverse: var(--white);
  --text-inverse-muted: var(--sky);

  --brand: var(--marine);
  --brand-hover: #276f8a;
  --brand-active: #1f5a70;

  --status-good: var(--teal);
  --status-info: var(--azure);
  --status-warn: var(--gold);
  --status-danger: var(--ember);

  /* Per-site accent. Defaults to the house marine; system sites override.
     --accent      brand hue, for graphics and rules
     --accent-ink  text on light surfaces — must clear 4.5:1 on white
     --accent-cta  primary button fill
     --accent-on   text on --accent-cta — must clear 4.5:1 on it
     Every value in every site.json is checked by tests/contrast.test.mjs. */
  --accent: var(--marine);
  --accent-ink: #1f5a70;
  --accent-cta: #276f8a;
  --accent-soft: rgba(48, 134, 166, 0.12);
  --accent-on: var(--white);

  /* Lines */
  --line: rgba(0, 19, 36, 0.1);
  --line-2: rgba(0, 19, 36, 0.16);
  --line-3: rgba(0, 19, 36, 0.28);
  --line-dark: rgba(151, 203, 220, 0.24);
  /* Opaque, and it has to be. At 55% alpha this composited to about 2:1
     against every light surface in the palette, under the 3:1 WCAG 1.4.11 asks
     of a focus indicator, and an indicator nobody can see is not one. The
     selection wash below reads this same value at 22%, which is what the
     sixteen ocean sites always painted. */
  --focus: #018abd;

  /* Gradients */
  --grad-abyss: linear-gradient(180deg, #002a55, #001b48 55%, #001324);
  --grad-marine: linear-gradient(135deg, #018abd, #3086a6 50%, #004581);
  --grad-shallow: linear-gradient(180deg, #97cbdc, #3086a6);
  /* Not on the token whitelist and it does not need to be: the stops read
     --abyss, which is, so a second brand repaints the top of every hero by
     moving one value it already owns. */
  --grad-protect: linear-gradient(
    180deg,
    color-mix(in srgb, var(--abyss) 0%, transparent),
    color-mix(in srgb, var(--abyss) 85%, transparent)
  );

  /* Type. Roboto Black carries display and site branding; the brand book's
     Viafont is retired from the web build because every site now has either a
     wordmark of its own or the Alarivean mark beside its name. */
  --f-display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-tech: "Archivo", "Roboto", system-ui, sans-serif;

  --t-2xs: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.25rem;
  --t-3xl: 3rem;
  --t-4xl: 4rem;
  --t-5xl: 5.5rem;

  --lead-tight: 1.05;
  --lead-snug: 1.2;
  --lead-normal: 1.5;
  --lead-relaxed: 1.65;
  --track-tight: -0.02em;
  --track-wide: 0.04em;
  --track-eyebrow: 0.16em;

  /* Fluid headline steps — clamp keeps long headlines honest on small screens */
  --h1: clamp(2.25rem, 1.35rem + 3.9vw, 4rem);
  --h1-lg: clamp(2.5rem, 1.2rem + 5.6vw, 5.5rem);
  --h2: clamp(1.75rem, 1.25rem + 2.1vw, 3rem);
  --h3: clamp(1.375rem, 1.12rem + 1.05vw, 2.25rem);
  --h4: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);

  /* Space — 4px grid */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --container: 1200px;
  --container-wide: 1400px;
  --container-read: 44rem;
  --gutter: 2rem;

  --r-card: 18px;
  --r-btn: 12px;
  --r-pill: 999px;

  --sh-md: 0 8px 24px rgba(0, 19, 36, 0.12);
  --sh-lg: 0 18px 48px rgba(0, 19, 36, 0.18);
  --sh-inset-dark: inset 0 1px 0 rgba(151, 203, 220, 0.12);

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-swell: cubic-bezier(0.37, 0, 0.15, 1);
  --d-1: 140ms;
  --d-2: 240ms;
  --d-3: 420ms;
  --d-4: 800ms;

  --nav-h: 5rem;
}

@media (max-width: 48rem) {
  :root {
    --gutter: 1.25rem;
    --nav-h: 4.25rem;
  }
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--foam);
  color: var(--text-body);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lead-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--s-4);
  color: var(--text-strong);
  font-weight: 700;
  line-height: var(--lead-snug);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  line-height: var(--lead-tight);
  font-weight: 900;
}
h2 {
  font-size: var(--h2);
  line-height: var(--lead-snug);
  font-weight: 900;
}
h3 {
  font-size: var(--h3);
}
h4 {
  font-size: var(--h4);
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

a {
  color: var(--accent-ink);
  /* The underline follows the link ink. It used to be a fixed navy at 28%,
     which on a terracotta or magenta link read as two colors stacked, and
     measured fainter against every surface in the network than this does. */
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
  transition: color var(--d-1) var(--e-out), text-decoration-color var(--d-1) var(--e-out);
}
a:hover {
  color: var(--brand-hover);
  text-decoration-color: currentColor;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Every photograph on the network is emitted as <picture class="x-media">.
   When it carries an aspect-ratio the frame crops; otherwise it flows. */
.x-media {
  display: block;
}
.x-media[style*="aspect-ratio"] {
  overflow: hidden;
}
.x-media[style*="aspect-ratio"] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul,
ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.25em;
}
li {
  margin-bottom: var(--s-2);
}

strong,
b {
  font-weight: 700;
  color: var(--text-strong);
}
/* Bold copy inherits the darkest ink, which disappears on the ocean surfaces.
   Every dark context has to pull it back to white. */
.on-dark strong,
.on-dark b,
.section--abyss strong,
.section--abyss b,
.section--deep strong,
.section--deep b,
.cta strong,
.cta b,
.hero strong,
.hero b,
.footer strong,
.footer b {
  color: var(--white);
}

small {
  font-size: var(--t-sm);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-12) 0;
}

blockquote {
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

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

/* The one wash a reader paints themselves, by triple-clicking a paragraph to
   lift it into a memo. It reads --focus rather than a literal so the highlight
   and the focus ring cannot drift apart — they are one interaction family — and
   22% of an opaque --focus is exactly the rgba(1, 138, 189, 0.22) the sixteen
   ocean sites have always shown. */
::selection {
  background: color-mix(in srgb, var(--focus) 22%, transparent);
  color: var(--text-strong);
}
/* Inside a dark band the rule above puts the darkest ink in the palette on a
   barely-lightened dark surface — about 1.2:1, which is to say the selected
   text disappears at the moment someone tries to copy it. The ink inverts with
   the band. */
.on-dark ::selection,
.section--abyss ::selection,
.section--deep ::selection,
.hero ::selection,
.cta ::selection,
.nav ::selection,
.footer ::selection {
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 999;
  transform: translateY(-160%);
  background: var(--white);
  color: var(--text-strong);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-btn);
  font-weight: 700;
  box-shadow: var(--sh-lg);
  transition: transform var(--d-2) var(--e-out);
}
.skip-link:focus {
  transform: translateY(0);
}

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

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide {
  max-width: var(--container-wide);
}
.wrap--read {
  max-width: var(--container-read);
}

.section {
  padding-block: clamp(3.5rem, 2rem + 6vw, 8rem);
  position: relative;
}
.section--tight {
  padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
}
.section--flush-top {
  padding-top: 0;
}

.section--foam {
  background: var(--foam);
}
.section--white {
  background: var(--white);
}
.section--mist {
  background: var(--mist);
}

.section--abyss {
  background: var(--grad-abyss);
  color: var(--text-inverse);
}
.section--deep {
  background: var(--deep);
  color: var(--text-inverse);
}

.section--abyss h1,
.section--abyss h2,
.section--abyss h3,
.section--abyss h4,
.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
  color: var(--text-inverse);
}
.section--abyss a:not(.btn),
.section--deep a:not(.btn),
.on-dark a:not(.btn),
.cta a:not(.btn) {
  color: var(--sky);
}
.section--abyss a:not(.btn):hover,
.section--deep a:not(.btn):hover,
.on-dark a:not(.btn):hover,
.cta a:not(.btn):hover {
  color: var(--white);
}

/* Grids */
.grid {
  display: grid;
  gap: var(--s-8);
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Editorial split: a narrow standfirst column beside a wider body column. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split--wide-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.split--sticky > :first-child {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-8));
}

@media (max-width: 62rem) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split,
  .split--wide-left,
  .split--even {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }
  .split--sticky > :first-child {
    position: static;
  }
}

@media (max-width: 40rem) {
  .grid {
    gap: var(--s-6);
  }
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--keep-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   5. Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-4);
}
.on-dark .eyebrow,
.section--abyss .eyebrow,
.section--deep .eyebrow,
.hero .eyebrow,
.cta .eyebrow {
  color: var(--sky);
}

.display {
  font-family: var(--f-display);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--lead-tight);
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: var(--lead-relaxed);
  color: var(--slate-700);
  max-width: 40ch;
}
.on-dark .lede,
.section--abyss .lede,
.section--deep .lede {
  color: var(--sky);
}
.lede--wide {
  max-width: 56ch;
}

.muted {
  color: var(--text-muted);
}
.on-dark .muted,
.section--abyss .muted,
.section--deep .muted,
.cta .muted {
  color: color-mix(in srgb, var(--sky) 85%, transparent);
}

.tech {
  font-family: var(--f-tech);
  letter-spacing: var(--track-wide);
}

.prose > * + h2 {
  margin-top: var(--s-12);
}
.prose > * + h3 {
  margin-top: var(--s-8);
}
.prose p {
  max-width: 68ch;
}
.prose li {
  max-width: 66ch;
}
.prose h2 {
  font-size: var(--h3);
}
.prose h3 {
  font-size: var(--t-lg);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. Buttons & chips
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--t-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out),
    transform var(--d-1) var(--e-out);
}
.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--accent-cta);
  color: var(--accent-on);
  box-shadow: 0 6px 20px rgba(0, 19, 36, 0.18);
}
.btn--primary:hover {
  background: var(--accent-ink);
  color: var(--accent-on);
  box-shadow: 0 10px 28px rgba(0, 19, 36, 0.24);
}

.btn--gold {
  background: var(--gold);
  color: var(--abyss);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--gold) 32%, transparent);
}
.btn--gold:hover {
  background: var(--gold-hover);
  color: var(--abyss);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--gold) 42%, transparent);
}

.btn--ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--line-3);
}
.btn--ghost:hover {
  background: rgba(0, 19, 36, 0.04);
  color: var(--text-strong);
  border-color: var(--text-strong);
}

.on-dark .btn--ghost,
.section--abyss .btn--ghost,
.section--deep .btn--ghost,
.hero .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
.on-dark .btn--ghost:hover,
.section--abyss .btn--ghost:hover,
.section--deep .btn--ghost:hover,
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
}

.btn--sm {
  padding: 0.5rem 1.125rem;
  font-size: var(--t-sm);
}
.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* A quiet inline link that still reads as an action */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-arrow svg {
  transition: transform var(--d-2) var(--e-out);
}
.link-arrow:hover svg {
  transform: translateX(3px);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.on-dark .chip,
.section--abyss .chip,
.section--deep .chip {
  background: rgba(151, 203, 220, 0.14);
  color: var(--sky);
}
.chip--warn {
  background: rgba(214, 82, 0, 0.1);
  color: #a63f00;
}
.chip--good {
  background: rgba(0, 151, 152, 0.12);
  color: #00696a;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.chip-row li {
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--abyss) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(151, 203, 220, 0.16);
  transition: background var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--abyss) 94%, transparent);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
  /* The wordmark is shorter than a comfortable tap target on small screens. */
  min-height: 44px;
  padding-right: var(--s-2);
}
.nav__brand img,
.nav__brand svg {
  height: 2.75rem;
  width: auto;
}
@media (max-width: 48rem) {
  .nav__brand img,
  .nav__brand svg {
    height: 2.25rem;
  }
}
.nav__brand-text {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-md);
  color: var(--white);
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
}
/* Sites without their own wordmark set their name beside the Alarivean mark. */
.nav__brand-mark {
  height: 2.125rem;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 48rem) {
  .nav__brand-mark {
    height: 1.875rem;
  }
  .nav__brand-text {
    font-size: var(--t-base);
  }
}
.footer__brand .nav__brand-mark {
  height: 2.5rem;
  margin-bottom: 0;
}
.footer__brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-6);
}
.footer__brand-lockup .nav__brand-text {
  font-size: var(--t-lg);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav__links li {
  margin: 0;
}
/* :not(.btn) because the mobile menu carries the nav's call to action as a
   `.btn--gold` inside this list, and a bare `.nav__links a` outranks
   `.btn--gold`. That handed the one contact button a phone visitor can reach
   white-at-82% ink on the gold fill — 1.4:1, unreadable — along with the link
   padding and the link underline. Every declaration here is for a text link. */
.nav__links a:not(.btn) {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--gold);
}

.nav__cta {
  flex-shrink: 0;
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid rgba(151, 203, 220, 0.3);
  border-radius: 10px;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--d-2) var(--e-out), opacity var(--d-1) var(--e-out);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
}
.nav__toggle span::before {
  transform: translateY(-6px);
}
.nav__toggle span::after {
  transform: translateY(6px);
}
.nav__toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav__toggle[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span::after {
  transform: rotate(-45deg);
}

@media (max-width: 60rem) {
  .nav__toggle {
    display: inline-flex;
    position: relative;
  }
  .nav__inner {
    gap: var(--s-4);
  }
  .nav__cta {
    display: none;
  }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Opaque, and no backdrop-filter, which did nothing behind it anyway. At
       98% the bleed is three levels per channel — invisible on body copy and
       plainly readable through an 88px hero headline, so the open menu looked
       like a broken overlay with "Who is behind the proposal on your desk"
       running underneath it. */
    background: var(--abyss);
    padding: var(--s-2) var(--gutter) var(--s-8);
    border-bottom: 1px solid rgba(151, 203, 220, 0.16);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-2) var(--e-out), transform var(--d-2) var(--e-out),
      visibility var(--d-2);
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav__links a:not(.btn) {
    display: block;
    padding: var(--s-4) 0;
    font-size: var(--t-md);
    border-bottom: 1px solid rgba(151, 203, 220, 0.14);
  }
  .nav__links a:not(.btn):hover,
  .nav__links a:not(.btn)[aria-current="page"] {
    border-bottom-color: rgba(151, 203, 220, 0.14);
    color: var(--gold);
  }
  /* The list's link rule used to hand this button its height by accident,
     along with the ink that made it unreadable. Scoping that rule to
     :not(.btn) took both away, so the CTA states its own size here. It is the
     only route to contact anywhere in the mobile chrome and has to be a thumb
     target — e2e/responsive.spec.mjs holds it to 40px. */
  .nav__links .btn {
    margin-top: var(--s-6);
    width: 100%;
    padding-block: var(--s-4);
    font-size: var(--t-base);
  }
}

body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 30rem + 24vh, 46rem);
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: clamp(3rem, 2rem + 5vw, 6rem);
  background: var(--abyss);
  color: var(--text-inverse);
  overflow: hidden;
  isolation: isolate;
}
.hero--short {
  min-height: clamp(24rem, 20rem + 16vh, 32rem);
}
.hero--tall {
  min-height: clamp(38rem, 32rem + 30vh, 54rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media .x-media {
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-protect);
}
/* A second, gentler left-weighted wash keeps headline contrast honest on
   bright plates without resorting to a solid black box. */
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--abyss) 78%, transparent) 0%,
    color-mix(in srgb, var(--abyss) 42%, transparent) 42%,
    color-mix(in srgb, var(--abyss) 8%, transparent) 78%
  );
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__body {
  max-width: 46rem;
}
.hero h1 {
  color: var(--white);
  font-size: var(--h1-lg);
  text-shadow: 0 2px 24px rgba(0, 19, 36, 0.4);
}
.hero .lede {
  color: rgba(255, 255, 255, 0.9);
  max-width: 46ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);
}
.hero .btn-row {
  margin-top: var(--s-8);
}

.hero__foot {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(151, 203, 220, 0.24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-12);
}
.hero__foot > * {
  flex: 1 1 11rem;
  min-width: 0;
}
/* Hero metrics live inside a 46rem column, not a full section, so the section
   metric size overflows them. A value like "100,000 cells/L" needs the smaller
   step or it forces the row to wrap two-plus-one. */
.hero__foot .metric__value {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem);
}

.hero--split .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: end;
}
@media (max-width: 62rem) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9. Cards & surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  box-shadow: var(--sh-md);
  transition: box-shadow var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.card > :last-child {
  margin-bottom: 0;
}
.card h3 {
  font-size: var(--t-lg);
}

a.card,
.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card:hover,
.card--link:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}

.on-dark .card,
.section--abyss .card,
.section--deep .card {
  background: color-mix(in srgb, var(--ocean) 28%, transparent);
  border-color: var(--line-dark);
  box-shadow: var(--sh-inset-dark);
  color: rgba(255, 255, 255, 0.88);
}
.on-dark .card h3,
.section--abyss .card h3,
.section--deep .card h3 {
  color: var(--white);
}

.card__icon {
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.on-dark .card__icon,
.section--abyss .card__icon,
.section--deep .card__icon {
  color: var(--sky);
}

.card__media {
  margin: calc(-1 * clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem));
  margin-bottom: var(--s-6);
  border-radius: var(--r-card) var(--r-card) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.card__media .x-media {
  width: 100%;
  height: 100%;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-4) var(--e-swell);
}
a.card:hover .card__media .x-media {
  width: 100%;
  height: 100%;
}
.card__media img {
  transform: scale(1.04);
}

/* A plain panel: no shadow, hairline only. Used where cards would shout. */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
}
.panel > :last-child {
  margin-bottom: 0;
}
.on-dark .panel,
.section--abyss .panel,
.section--deep .panel {
  background: color-mix(in srgb, var(--deep) 50%, transparent);
  border-color: var(--line-dark);
}

/* --------------------------------------------------------------------------
   10. Metrics
   -------------------------------------------------------------------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-8);
}
.metric__value {
  display: block;
  font-family: var(--f-tech);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--accent-ink);
  margin-bottom: var(--s-2);
}
.on-dark .metric__value,
.section--abyss .metric__value,
.section--deep .metric__value,
.hero .metric__value {
  color: var(--gold);
}
.metric__label {
  display: block;
  font-size: var(--t-sm);
  line-height: var(--lead-normal);
  color: var(--text-muted);
  max-width: 26ch;
}
.on-dark .metric__label,
.section--abyss .metric__label,
.section--deep .metric__label,
.hero .metric__label {
  color: var(--sky);
}
.metric__source {
  display: block;
  margin-top: var(--s-2);
  /* 11px is in the type scale but a source credit is a link, and an 11px link
     is not a link anyone over forty is going to hit. */
  font-size: var(--t-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.hero .metric__source,
.on-dark .metric__source {
  color: color-mix(in srgb, var(--sky) 70%, transparent);
}
.metric__source a {
  color: inherit;
}

/* Metrics laid out as a bordered strip rather than floating numbers */
.metrics--ruled {
  gap: 0;
}
.metrics--ruled > * {
  padding: var(--s-6) var(--s-8);
  border-left: 1px solid var(--line);
}
.metrics--ruled > *:first-child {
  padding-left: 0;
  border-left: 0;
}
.on-dark .metrics--ruled > *,
.section--abyss .metrics--ruled > * {
  border-left-color: var(--line-dark);
}
@media (max-width: 62rem) {
  .metrics--ruled > * {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: var(--s-6) 0;
  }
  .metrics--ruled > *:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .on-dark .metrics--ruled > *,
  .section--abyss .metrics--ruled > * {
    border-top-color: var(--line-dark);
  }
}

/* --------------------------------------------------------------------------
   11. Editorial furniture
   -------------------------------------------------------------------------- */

.pullquote {
  margin: var(--s-12) 0;
  padding-left: clamp(1.25rem, 0.6rem + 2vw, 2.5rem);
  border-left: 3px solid var(--accent);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: var(--lead-snug);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: var(--track-tight);
}
.on-dark .pullquote,
.section--abyss .pullquote,
.section--deep .pullquote {
  border-left-color: var(--gold);
  color: var(--white);
}
.pullquote cite {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.on-dark .pullquote cite,
.section--abyss .pullquote cite {
  color: var(--sky);
}

figure {
  margin: var(--s-8) 0;
}
figure img,
figure .x-media {
  border-radius: var(--r-card);
}
figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  line-height: var(--lead-normal);
  color: var(--text-muted);
  max-width: 60ch;
}
.on-dark figcaption,
.section--abyss figcaption,
.section--deep figcaption {
  color: var(--sky);
}

/* A dated, signed field note. Deliberately plain — it should read like
   something a person typed, not a designed component. */
.fieldnote {
  border-top: 2px solid var(--text-strong);
  padding-top: var(--s-4);
  max-width: 34rem;
}
.fieldnote__meta {
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.fieldnote p {
  font-size: var(--t-md);
  line-height: var(--lead-relaxed);
}
.fieldnote__sign {
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.on-dark .fieldnote,
.section--abyss .fieldnote,
.section--deep .fieldnote {
  border-top-color: var(--sky);
}
.on-dark .fieldnote__meta,
.section--abyss .fieldnote__meta,
.on-dark .fieldnote__sign,
.section--abyss .fieldnote__sign {
  color: var(--sky);
}

/* Numbered claim list — the brand's parallel-list device */
.claims {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: claim;
}
.claims > li {
  counter-increment: claim;
  position: relative;
  padding-left: 3.25rem;
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.claims > li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.claims > li::before {
  content: counter(claim, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--f-tech);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
.on-dark .claims > li,
.section--abyss .claims > li,
.section--deep .claims > li {
  border-bottom-color: var(--line-dark);
}
.on-dark .claims > li::before,
.section--abyss .claims > li::before,
.section--deep .claims > li::before {
  color: var(--gold);
}
.claims strong {
  display: block;
  font-size: var(--t-md);
  margin-bottom: var(--s-1);
}
.on-dark .claims strong,
.section--abyss .claims strong,
.section--deep .claims strong {
  color: var(--white);
}

/* "Does NOT" reassurance list */
.nots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.nots li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin: 0;
  font-size: var(--t-md);
}
.nots svg {
  flex-shrink: 0;
  margin-top: 0.28em;
  color: var(--teal);
}
.on-dark .nots svg,
.section--abyss .nots svg,
.section--deep .nots svg {
  color: var(--sky);
}

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  --table-surface: var(--white);
  --table-edge: var(--line-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-8) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* A four-column table does not fit a phone and never will, so the fix is not
     to shrink it but to say out loud that it scrolls. Two of these layers are
     the surface color pinned to the content (`local`), two are the shadows
     they sit over (`scroll`). At either end the surface covers its shadow; as
     soon as the reader can scroll that way, the shadow appears. Before this a
     390px screen showed column one of two and nothing at all to suggest the
     answer column existed. */
  background-color: var(--table-surface);
  background-image: linear-gradient(to right, var(--table-surface), transparent),
    linear-gradient(to left, var(--table-surface), transparent),
    linear-gradient(to right, var(--table-edge), transparent),
    linear-gradient(to left, var(--table-edge), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.on-dark .table-wrap,
.section--abyss .table-wrap,
.section--deep .table-wrap {
  --table-surface: color-mix(in srgb, var(--deep) 45%, transparent);
  --table-edge: var(--line-dark);
  border-color: var(--line-dark);
}

.table {
  min-width: 34rem;
  font-size: var(--t-sm);
}
.table th,
.table td {
  padding: var(--s-4) var(--s-6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: var(--lead-normal);
}
.table thead th {
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  border-bottom-color: var(--line-3);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
/* No nowrap. A row header is a phrase, not a label, and holding it on one line
   pushed a two-column table to 645px inside a 348px phone — 46% of it, the
   answer column, off the screen. Column heads still hold their line. */
.table tbody th {
  font-weight: 700;
  color: var(--text-strong);
}
.on-dark .table th,
.on-dark .table td,
.section--abyss .table th,
.section--abyss .table td,
.section--deep .table th,
.section--deep .table td {
  border-bottom-color: var(--line-dark);
  color: rgba(255, 255, 255, 0.86);
}
.on-dark .table thead th,
.section--abyss .table thead th,
.section--deep .table thead th {
  color: var(--sky);
}
.on-dark .table tbody th,
.section--abyss .table tbody th,
.section--deep .table tbody th {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   13. Disclosure / FAQ
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line-2);
}
.faq details {
  border-bottom: 1px solid var(--line-2);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text-strong);
  transition: color var(--d-1) var(--e-out);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--accent-ink);
}
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--d-2) var(--e-out);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq details > div {
  padding-bottom: var(--s-6);
  max-width: 68ch;
}
.faq details > div > :last-child {
  margin-bottom: 0;
}
.on-dark .faq,
.section--abyss .faq,
.section--deep .faq {
  border-top-color: var(--line-dark);
}
.on-dark .faq details,
.section--abyss .faq details,
.section--deep .faq details {
  border-bottom-color: var(--line-dark);
}
.on-dark .faq summary,
.section--abyss .faq summary,
.section--deep .faq summary {
  color: var(--white);
}
.on-dark .faq summary:hover,
.section--abyss .faq summary:hover {
  color: var(--sky);
}

/* --------------------------------------------------------------------------
   14. Call to action band
   -------------------------------------------------------------------------- */

/* The marine gradient is too light under body-size text, so the CTA band runs
   on abyss by default. --grad-marine stays for graphics and rules. */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--grad-abyss);
  color: var(--white);
  isolation: isolate;
}
.cta--ocean {
  background: linear-gradient(135deg, #004581, #013a68 55%, #001b48);
}
.cta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta__media .x-media {
  width: 100%;
  height: 100%;
}
.cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta__media + .cta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--abyss) 92%, transparent),
    color-mix(in srgb, var(--ocean) 72%, transparent)
  );
}
.cta h2 {
  color: var(--white);
  max-width: 22ch;
}
.cta .lede {
  color: rgba(255, 255, 255, 0.9);
  max-width: 52ch;
}
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (max-width: 56rem) {
  .cta__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--abyss);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--s-8);
  font-size: var(--t-sm);
}
.footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-8) var(--s-12);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid rgba(151, 203, 220, 0.18);
}
.footer__brand img,
.footer__brand svg {
  height: 3.25rem;
  width: auto;
  margin-bottom: var(--s-6);
}
.footer__blurb {
  max-width: 34ch;
  line-height: var(--lead-relaxed);
}
.footer__label {
  color: var(--sky);
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer li {
  margin-bottom: var(--s-3);
}
.footer__net {
  padding-block: var(--s-8);
  border-bottom: 1px solid rgba(151, 203, 220, 0.18);
}
.footer__net .footer__label {
  margin-bottom: var(--s-3);
}
.footer__network li a {
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
}
.footer__network li:not(:last-child) a::after {
  content: " ·";
  color: rgba(151, 203, 220, 0.35);
}

.footer__bottom {
  padding-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-xs);
  /* 0.5 was tuned against the ocean --abyss and cleared 4.5:1 there by luck of
     that one surface being nearly black. A brand with a lighter --abyss drops
     the same alpha to 3.97:1 and the copyright line stops being readable. 0.62
     clears the floor on both. tests/contrast.test.mjs now measures it. */
  color: rgba(255, 255, 255, 0.62);
}
.footer__network {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__network li {
  margin: 0;
}
@media (max-width: 62rem) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   16. Breadcrumbs & article furniture
   -------------------------------------------------------------------------- */

.crumbs {
  font-size: var(--t-xs);
  font-family: var(--f-tech);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-6);
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
}
.crumbs li {
  margin: 0;
}
.crumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--slate-300);
}
.crumbs a {
  color: inherit;
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent-ink);
}
.hero .crumbs,
.on-dark .crumbs {
  color: var(--sky);
}
.hero .crumbs li + li::before {
  color: rgba(151, 203, 220, 0.5);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}

.refs {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line-2);
  font-size: var(--t-sm);
  color: var(--text-muted);
}
.refs h2,
.refs h3 {
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.refs ol {
  padding-left: 1.25em;
}
.refs li {
  margin-bottom: var(--s-3);
  line-height: var(--lead-normal);
}
.refs a {
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   17. Network strip — quiet cross-links between the sites
   -------------------------------------------------------------------------- */

.netstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
}
.netstrip a {
  display: block;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  text-decoration: none;
  background: var(--white);
  transition: border-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}
.netstrip a:hover {
  border-color: var(--line-3);
  transform: translateY(-2px);
}
.netstrip strong {
  display: block;
  font-size: var(--t-base);
  margin-bottom: 0.15rem;
}
.netstrip span {
  display: block;
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: var(--lead-normal);
}
.on-dark .netstrip a,
.section--abyss .netstrip a,
.section--deep .netstrip a {
  background: color-mix(in srgb, var(--ocean) 24%, transparent);
  border-color: var(--line-dark);
}
.on-dark .netstrip strong,
.section--abyss .netstrip strong {
  color: var(--white);
}
.on-dark .netstrip span,
.section--abyss .netstrip span {
  color: var(--sky);
}

/* --------------------------------------------------------------------------
   18. Motion
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] {
  transition-delay: 90ms;
}
[data-reveal-delay="2"] {
  transition-delay: 180ms;
}
[data-reveal-delay="3"] {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   18b. Forms — the situation report, and nothing else
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s-6);
  max-width: 42rem;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}
@media (max-width: 40rem) {
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  display: grid;
  gap: var(--s-2);
}
.field > label {
  font-family: var(--f-tech);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-strong);
}
.field__hint {
  font-size: var(--t-sm);
  line-height: var(--lead-normal);
  color: var(--text-muted);
}
.field__optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
}

.field input,
.field textarea,
.field select {
  font: inherit;
  color: var(--text-body);
  background: var(--white);
  border: 1px solid var(--line-3);
  border-radius: var(--r-btn);
  padding: 0.75rem 0.875rem;
  width: 100%;
  transition: border-color var(--d-1) var(--e-out), box-shadow var(--d-1) var(--e-out);
}
.field textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: var(--lead-normal);
}
.field input:hover,
.field textarea:hover {
  border-color: var(--slate-500);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-cta);
  box-shadow: 0 0 0 3px var(--focus);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--ember);
}

/* The honeypot. Off-screen rather than display:none, which some bots detect. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-6);
  font-size: var(--t-sm);
  line-height: var(--lead-normal);
  border: 1px solid transparent;
}
.form__status:empty {
  display: none;
}
.form__status[data-state="working"] {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--line-2);
}
.form__status[data-state="error"] {
  background: rgba(214, 82, 0, 0.08);
  color: #8f3800;
  border-color: rgba(214, 82, 0, 0.3);
}
.form__status[data-state="sent"] {
  background: rgba(0, 151, 152, 0.1);
  color: #00595a;
  border-color: rgba(0, 151, 152, 0.32);
}

.form button[type="submit"][aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */

.stack > * + * {
  margin-top: var(--s-4);
}
.stack-6 > * + * {
  margin-top: var(--s-6);
}
.stack-8 > * + * {
  margin-top: var(--s-8);
}
.stack-12 > * + * {
  margin-top: var(--s-12);
}

.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-6 {
  margin-top: var(--s-6);
}
.mt-8 {
  margin-top: var(--s-8);
}
.mt-12 {
  margin-top: var(--s-12);
}

.text-center {
  text-align: center;
}
.center {
  margin-inline: auto;
}
.measure {
  max-width: 62ch;
}
.measure-tight {
  max-width: 46ch;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.on-dark .rule,
.section--abyss .rule,
.section--deep .rule {
  border-top-color: var(--line-dark);
}

.frame {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.frame > img,
.frame .x-media,
.frame .x-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ratio-4-3 {
  aspect-ratio: 4 / 3;
}
.ratio-3-2 {
  aspect-ratio: 3 / 2;
}
.ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.ratio-1-1 {
  aspect-ratio: 1 / 1;
}
.ratio-portrait {
  aspect-ratio: 4 / 5;
}

@media (max-width: 40rem) {
  .hide-sm {
    display: none;
  }
}
@media (min-width: 40.0625rem) {
  .only-sm {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .nav,
  .cta,
  .footer__network,
  .btn {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .hero {
    min-height: auto;
    padding: 1rem 0;
    color: #000;
    background: #fff;
  }
  .hero__media,
  .hero__scrim {
    display: none;
  }
  .hero h1,
  .hero .lede {
    color: #000;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}