/* =========================================================================
   1HealthAI Factory — Concept A · Atlantic editorial system
   Tokens and components. No build step, no external font, no framework.
   ========================================================================= */

/* -------------------------------------------------------------- 01 TOKENS */

:root {
  /* Brand */
  --ink: #071b49;
  --ink-800: #0d2456;
  --ink-700: #14306a;
  --ink-600: #2b4478;
  --ink-500: #475c85;
  --ink-400: #64769a;
  --ink-300: #7b8aa8;

  --blue: #0758f7;
  --blue-700: #0043cc;
  --blue-200: #b9d0ff;
  --blue-100: #dbe7ff;
  --blue-050: #eff4ff;

  --cyan: #04a8c7;
  --cyan-700: #02768c;
  --cyan-100: #cdeef5;
  --cyan-050: #ecf9fc;

  --green: #58b000;
  --green-700: #3f7f00;
  --green-100: #dcf0c2;
  --green-050: #f2f9e8;

  /* Surfaces */
  --white: #ffffff;
  --paper: #f4f7fb;
  --paper-2: #fafcfe;
  --canvas: #fefefe;
  --line: #d9e4f0;
  --line-soft: #e8eff7;

  --navy-900: #00122f;
  --navy-800: #001b45;
  --navy-700: #062a62;

  /* Elevation — low-opacity, multi-layer, never heavy */
  --shadow-xs: 0 1px 2px rgba(7, 27, 73, 0.05);
  --shadow-sm: 0 2px 4px rgba(7, 27, 73, 0.04), 0 1px 2px rgba(7, 27, 73, 0.04);
  --shadow-md: 0 14px 32px -14px rgba(7, 27, 73, 0.18), 0 2px 6px -2px rgba(7, 27, 73, 0.06);
  --shadow-lg: 0 34px 64px -28px rgba(7, 27, 73, 0.24), 0 8px 20px -12px rgba(7, 27, 73, 0.10);
  --ring: 0 0 0 1px var(--line);

  /* Geometry */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --container: 1240px;
  --container-wide: 1420px;
  --container-prose: 74ch;
  --gutter: 48px;
  --header-height: 84px;

  /* Type */
  --display: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 160ms;
  --base: 240ms;
  --slow: 420ms;
}

/* ---------------------------------------------------------------- 02 BASE */

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

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: var(--blue);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  color: var(--white);
  background: var(--blue);
}

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

hr {
  height: 1px;
  margin: 0;
  background: var(--line);
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 12px 18px;
  color: var(--white);
  background: var(--ink);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--base) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

/* ----------------------------------------------------------- 03 STRUCTURE */

.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.container--wide,
.hero .container,
.platform-hero .container {
  width: min(var(--container-wide), calc(100% - (var(--gutter) * 2)));
}

.section {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
}

.section--tight {
  padding-block: clamp(48px, 6vw, 80px);
}

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

.section--paper {
  background: linear-gradient(180deg, var(--paper-2), var(--white));
}

.section--hairline {
  border-top: 1px solid var(--line-soft);
}

.stack {
  display: grid;
  gap: 24px;
}

/* ---------------------------------------------------------------- 04 TYPE */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--cyan-700);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 26px;
  height: 2px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 2px;
  content: "";
  opacity: 0.65;
}

.eyebrow--plain::before {
  display: none;
}

.display-title,
.page-title,
.section-title,
.quote-title,
.card-title,
.block-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.028em;
  font-variant-ligatures: common-ligatures;
  text-wrap: balance;
}

.display-title {
  max-width: 15ch;
  font-size: clamp(2.9rem, 4.6vw, 4.4rem);
  line-height: 1.03;
}

.page-title {
  max-width: 18ch;
  font-size: clamp(2.7rem, 4.8vw, 4.15rem);
  line-height: 1.04;
}

.section-title {
  max-width: 22ch;
  font-size: clamp(2.1rem, 3.6vw, 3.15rem);
  line-height: 1.07;
}

.section-title--compact {
  font-size: clamp(1.8rem, 2.7vw, 2.4rem);
  max-width: 26ch;
}

.block-title {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  line-height: 1.15;
}

.lead {
  max-width: 62ch;
  margin: 24px 0 0;
  color: var(--ink-600);
  font-size: clamp(1.1rem, 1.35vw, 1.22rem);
  line-height: 1.58;
  text-wrap: pretty;
}

/* A lead paragraph introducing a group inside a section, not the section. */
.lead--tight {
  margin-top: 12px;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
}

.prose {
  max-width: var(--container-prose);
  color: var(--ink-600);
}

.prose p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--ink);
  font-weight: 700;
}

.prose--columns {
  max-width: none;
}

@media (min-width: 1024px) {
  .prose--columns {
    columns: 2;
    column-gap: 64px;
  }

  .prose--columns p {
    break-inside: avoid;
  }
}

.tagline-trio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
}

.tagline-trio li:nth-child(1) { color: var(--blue); }
.tagline-trio li:nth-child(2) { color: var(--cyan-700); }
.tagline-trio li:nth-child(3) { color: var(--green-700); }

/* ------------------------------------------------------------- 05 HEADER */

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease),
    background var(--base) var(--ease);
}

.site-header::before {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 52%, var(--green) 100%);
  content: "";
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(7, 27, 73, 0.4);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  flex: 0 0 auto;
  width: 232px;
  border-radius: var(--radius-sm);
  transition: opacity var(--fast) var(--ease);
}

.brand:hover {
  opacity: 0.82;
}

.brand img {
  width: 100%;
  height: auto;
}

.primary-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 13px;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.nav-link:hover {
  color: var(--ink);
  background: var(--blue-050);
}

.nav-link[aria-current="page"] {
  color: var(--blue);
}

.nav-link::after {
  position: absolute;
  right: 13px;
  bottom: 4px;
  left: 13px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  content: "";
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity var(--fast) var(--ease), transform var(--base) var(--ease);
}

.nav-link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.header-cta {
  flex: 0 0 auto;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.menu-toggle:hover {
  border-color: var(--blue-200);
  background: var(--blue-050);
}

.menu-toggle-lines,
.menu-toggle-lines::before,
.menu-toggle-lines::after {
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  content: "";
  transition: transform var(--base) var(--ease), opacity var(--fast) var(--ease);
}

.menu-toggle-lines {
  position: relative;
}

.menu-toggle-lines::before,
.menu-toggle-lines::after {
  position: absolute;
  left: 0;
}

.menu-toggle-lines::before { top: -6px; }
.menu-toggle-lines::after { top: 6px; }

.menu-open .menu-toggle-lines { background: transparent; }
.menu-open .menu-toggle-lines::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle-lines::after { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: rgba(0, 18, 47, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease);
}

.menu-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Reading progress — scroll-driven, no JS */
.read-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .read-progress {
    animation: progress-grow linear;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ------------------------------------------------------- 06 BUTTONS/LINKS */

.button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  color: var(--white);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 22px -12px rgba(7, 88, 247, 0.75);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
    box-shadow var(--base) var(--ease), transform var(--fast) var(--ease);
}

.button:hover {
  color: var(--white);
  background: var(--blue-700);
  border-color: var(--blue-700);
  box-shadow: 0 16px 28px -14px rgba(7, 88, 247, 0.8);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button .arrow {
  display: inline-block;
  transition: transform var(--base) var(--ease);
}

.button:hover .arrow {
  transform: translateX(3px);
}

.button--secondary {
  color: var(--blue);
  background: var(--white);
  border-color: var(--blue-200);
  box-shadow: var(--shadow-xs);
}

.button--secondary:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.button--ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

.button--ghost:hover {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink-300);
}

.button--onDark {
  color: var(--navy-900);
  background: var(--white);
  border-color: var(--white);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.6);
}

.button--onDark:hover {
  color: var(--navy-900);
  background: #eaf1ff;
  border-color: #eaf1ff;
}

.button--onDarkGhost {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: none;
}

.button--onDarkGhost:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

.button--small {
  min-height: 42px;
  padding: 9px 17px;
  font-size: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.actions--tight {
  margin-top: 24px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.text-link::after {
  content: "→";
  transition: transform var(--base) var(--ease);
}

.text-link:hover {
  color: var(--blue-700);
  text-decoration: underline;
}

.text-link:hover::after {
  transform: translateX(3px);
}

.text-link--spaced {
  margin-top: 22px;
}

/* --------------------------------------------------------------- 07 HERO */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 5vw, 64px) clamp(44px, 5.5vw, 68px);
  background:
    radial-gradient(ellipse 46% 52% at 74% 30%, rgba(4, 168, 199, 0.11), transparent 70%),
    radial-gradient(ellipse 34% 44% at 88% 74%, rgba(88, 176, 0, 0.09), transparent 70%),
    radial-gradient(ellipse 40% 46% at 10% 6%, rgba(7, 88, 247, 0.07), transparent 70%),
    linear-gradient(180deg, #fbfdff 0%, var(--canvas) 72%);
}

.hero-grid {
  display: grid;
  align-items: center;
  gap: 24px 40px;
  grid-template-columns: minmax(440px, 1fr) minmax(520px, 1.12fr);
}

.hero-art {
  width: min(100%, 720px);
  justify-self: end;
  mix-blend-mode: multiply;
}

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(52px, 6.5vw, 84px);
  background-color: var(--canvas);
  background-image: url("../img/wave-field-v2.png");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: 1px solid var(--line-soft);
}

.page-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.96) 22%, rgba(255, 255, 255, 0.42) 68%, rgba(255, 255, 255, 0.1));
  content: "";
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero .lead {
  max-width: 58ch;
}

.platform-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 4.4vw, 58px) clamp(36px, 4.4vw, 56px);
  background:
    radial-gradient(ellipse 44% 50% at 78% 38%, rgba(4, 168, 199, 0.1), transparent 70%),
    linear-gradient(180deg, #fbfdff, var(--canvas));
  border-bottom: 1px solid var(--line-soft);
}

.platform-hero-grid {
  display: grid;
  align-items: center;
  gap: 24px 40px;
  grid-template-columns: minmax(440px, 1fr) minmax(500px, 1.05fr);
}

.platform-hero-art {
  width: min(100%, 700px);
  justify-self: end;
  mix-blend-mode: multiply;
}

.breadcrumb {
  margin: 0 0 20px;
  padding: 0;
  color: var(--ink-400);
  font-size: 13.5px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.breadcrumb li + li::before {
  margin-right: 8px;
  content: "/";
  color: var(--ink-300);
}

/* --------------------------------------------------------------- 08 BANDS */

.proof-band {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 4px 4px, rgba(4, 168, 199, 0.34) 1px, transparent 1.7px) 0 0 / 13px 13px,
    linear-gradient(112deg, var(--navy-900), var(--navy-700) 55%, var(--navy-900));
}

.proof-inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding-block: clamp(26px, 3vw, 38px);
  text-align: center;
}

.proof-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Each mark sits on a white chip. The European Union emblem must keep its own
   colours, so the band is never allowed to tint or knock out the artwork —
   the same treatment the footer already gives the 1HealthAI logo. */
.proof-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof-logos li {
  display: flex;
  align-items: center;
  padding: 11px 18px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.7);
}

.proof-logos img {
  width: auto;
  height: 34px;
}

@media (max-width: 680px) {
  .proof-logos { gap: 10px; }
  .proof-logos li { padding: 9px 14px; }
  .proof-logos img { height: 26px; }
}

.dark-callout {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 4px 4px, rgba(4, 168, 199, 0.26) 1px, transparent 1.7px) 0 0 / 14px 14px,
    linear-gradient(118deg, var(--navy-900), var(--navy-700));
}

.dark-callout::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 44% 74% at 86% 40%, rgba(4, 168, 199, 0.22), transparent 72%);
  content: "";
  pointer-events: none;
}

.dark-callout-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 28px 56px;
  padding-block: clamp(64px, 8vw, 104px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.dark-callout-inner--single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}

.dark-callout .eyebrow {
  color: #6fe0f2;
}

.quote-title {
  max-width: 20ch;
  color: var(--white);
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.05;
}

.dark-callout .callout-copy {
  max-width: 52ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.08rem;
  text-wrap: pretty;
}

.dark-callout .actions {
  margin-top: 28px;
}

.dark-callout-side {
  display: grid;
  gap: 18px;
}

/* --------------------------------------------------- 09 SECTION HEADINGS */

.section-heading {
  display: grid;
  align-items: end;
  gap: 24px 56px;
  margin-bottom: clamp(36px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.section-heading--stacked {
  grid-template-columns: minmax(0, 1fr);
  max-width: 74ch;
}

.section-heading--center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 68ch;
  margin-inline: auto;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

.section-heading .lead {
  margin: 0;
  font-size: 1.08rem;
}

/* --------------------------------------------------------------- 10 CARDS */

.card-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
    border-color var(--base) var(--ease);
}

.card::before {
  position: absolute;
  top: -1px;
  left: 26px;
  width: 52px;
  height: 3px;
  background: var(--blue);
  border-radius: 0 0 3px 3px;
  content: "";
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity var(--base) var(--ease), transform var(--base) var(--ease);
}

.card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.card--accent-cyan::before { background: var(--cyan); }
.card--accent-green::before { background: var(--green); }

.card--quiet {
  background: var(--white);
  box-shadow: none;
}

.card-title {
  margin: 0;
  font-size: clamp(1.22rem, 1.5vw, 1.48rem);
  line-height: 1.18;
}

.card-copy {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--ink-500);
  font-size: 16px;
}

.card-copy + .card-copy {
  margin-top: 12px;
}

.card .text-link {
  margin-top: auto;
  padding-top: 22px;
  align-self: flex-start;
}

/* Numbered / index cards */
.card-index {
  margin: 0 0 14px;
  color: var(--ink-400);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Pillar cards — large, editorial */
.pillar-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pillar {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
    border-color var(--base) var(--ease);
}

.pillar::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle at 100% 0%, var(--pillar-glow, rgba(7, 88, 247, 0.1)), transparent 70%);
  content: "";
  pointer-events: none;
}

.pillar:hover {
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.pillar--human { --pillar-glow: rgba(7, 88, 247, 0.13); }
.pillar--animal { --pillar-glow: rgba(4, 168, 199, 0.15); }
.pillar--environment { --pillar-glow: rgba(88, 176, 0, 0.14); }

.pillar-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 1.9vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

.pillar-copy {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--ink-500);
  font-size: 16px;
  max-width: 42ch;
}

.pillar-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-size: 15px;
  color: var(--ink-600);
}

.pillar-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pillar-list li::before {
  margin-top: 0.62em;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--dot, var(--blue));
  border-radius: 50%;
  content: "";
}

.pillar--human .pillar-list li::before { --dot: var(--blue); }
.pillar--animal .pillar-list li::before { --dot: var(--cyan); }
.pillar--environment .pillar-list li::before { --dot: var(--green); }

/* Pilot / use-case cards */
.pilot-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pilot {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
    border-color var(--base) var(--ease);
}

.pilot:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Use-case names are real product names, some of them long single words
   (SALUSBENCH, BiomeXplore). The card head stacks so the name gets the full
   card width instead of a third of it; min-width and overflow-wrap are the
   guarantee that a longer one still wraps rather than spilling out. */
.pilot-name {
  min-width: 0;
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.pilot-copy {
  margin: 12px 0 0;
  color: var(--ink-500);
  font-size: 15.5px;
  max-width: 40ch;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  color: var(--ink-600);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag--human { color: var(--blue-700); background: var(--blue-050); border-color: var(--blue-100); }
.tag--animal { color: var(--cyan-700); background: var(--cyan-050); border-color: var(--cyan-100); }
.tag--environment { color: var(--green-700); background: var(--green-050); border-color: var(--green-100); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 14px;
  color: var(--blue-700);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-badge::before {
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
  content: "";
}

.status-badge--flush {
  margin-top: 0;
}

.status-badge--planned {
  color: var(--cyan-700);
  background: var(--cyan-050);
  border-color: var(--cyan-100);
}

.status-badge--live {
  color: var(--green-700);
  background: var(--green-050);
  border-color: var(--green-100);
}


/* Partner / institution cards */
.partner-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The coordinator and the co-lead carry the project's legal and technical
   responsibility, so they get the width and weight of a pair rather than two
   tiles in a row of seven. The rest follow underneath at ordinary card size. */
.partner-grid--lead {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.partner--lead {
  gap: 12px;
  padding: 32px 32px 34px;
  border-top: 3px solid var(--blue);
  box-shadow: var(--shadow-xs);
}

.partner--lead .partner-role { color: var(--blue); }

.partner--lead .partner-name { font-size: 1.7rem; }

.partner--lead .partner-copy {
  color: var(--ink-600);
  font-size: 16px;
}

.partner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease),
    transform var(--base) var(--ease);
}

.partner:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.partner-name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.partner-role {
  margin: 0;
  color: var(--cyan-700);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.partner-copy {
  margin: 0;
  color: var(--ink-500);
  font-size: 15px;
}

/* Key-figure band */
.figure-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------------------------------- 11 EDITORIAL */

.editorial-grid {
  display: grid;
  gap: clamp(40px, 5vw, 76px);
  grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr);
  align-items: start;
}

.editorial-grid--form {
  grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
}

.editorial-nav {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  align-self: start;
  padding: 24px 22px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.editorial-nav-title {
  margin: 0 0 14px;
  color: var(--ink-400);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nav;
}

.editorial-nav a {
  display: flex;
  gap: 12px;
  padding: 9px 12px;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  counter-increment: nav;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.editorial-nav a::before {
  color: var(--ink-400);
  content: counter(nav, decimal-leading-zero);
  font-family: var(--display);
  font-size: 13px;
  transition: color var(--fast) var(--ease);
}

.editorial-nav a:hover {
  color: var(--ink);
  background: var(--white);
}

.editorial-nav a.is-active {
  color: var(--blue);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.editorial-nav a.is-active::before {
  color: var(--blue);
}

.content-stack {
  display: grid;
  gap: clamp(56px, 6.5vw, 92px);
}

.content-block {
  scroll-margin-top: calc(var(--header-height) + 32px);
}

.content-block > .prose,
.content-block > .lead {
  margin-top: 24px;
}

/* Feature split */
.feature-split {
  display: grid;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1.08fr);
}

.feature-split--reverse .feature-art {
  order: -1;
}

.feature-art {
  overflow: hidden;
  padding: 10px;
  background: var(--white);
  border: 1px solid #eef3f9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.feature-art img {
  border-radius: 20px;
  mix-blend-mode: multiply;
}

.feature-list {
  display: grid;
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: grid;
  gap: 4px 16px;
  grid-template-columns: 26px minmax(0, 1fr);
}

.feature-list .feature-mark {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  grid-row: span 2;
}

.feature-list li:nth-child(2) .feature-mark { background: var(--cyan); }
.feature-list li:nth-child(3) .feature-mark { background: var(--green); }

.feature-list strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.feature-list span {
  color: var(--ink-500);
  font-size: 15.5px;
}

/* Capability rows — alternating editorial blocks */
.capability {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(44px, 5vw, 68px);
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  border-top: 1px solid var(--line);
  align-items: start;
}

.capability:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.capability-aside {
  position: sticky;
  top: calc(var(--header-height) + 32px);
}

.capability-index {
  margin: 0 0 10px;
  color: var(--ink-400);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.spec-list {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.spec-list li {
  display: grid;
  gap: 4px 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
}

.spec-list dt,
.spec-list .spec-term {
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}

.spec-list dd,
.spec-list .spec-value {
  margin: 0;
  color: var(--ink-500);
  font-size: 15.5px;
}

/* Steps */
.steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: step;
}

/* Timeline / roadmap */
.timeline {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  display: grid;
  gap: 6px 32px;
  padding: 0 0 40px 40px;
  grid-template-columns: minmax(0, 1fr);
}

.timeline-item::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--white);
  border: 3px solid var(--blue);
  border-radius: 50%;
  content: "";
  z-index: 1;
}

.timeline-item::after {
  position: absolute;
  top: 24px;
  bottom: -4px;
  left: 7px;
  width: 1px;
  background: var(--line);
  content: "";
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item:last-child::after {
  display: none;
}

.timeline-item--cyan::before { border-color: var(--cyan); }
.timeline-item--green::before { border-color: var(--green); }

.timeline-phase {
  margin: 0;
  color: var(--cyan-700);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.timeline-title {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.timeline-copy {
  margin: 8px 0 0;
  max-width: 58ch;
  color: var(--ink-500);
  font-size: 15.5px;
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .timeline-item { padding-left: 48px; }
  .timeline-item::before { left: 4px; }
  .timeline-item::after { left: 11px; }
}

/* Accordion — native disclosure, no JS */
.disclosure-list {
  display: grid;
  gap: 12px;
  margin: 8px 0 0;
}

.disclosure {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}

.disclosure[open] {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-sm);
}

.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::after {
  flex: 0 0 auto;
  color: var(--blue);
  content: "+";
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transition: transform var(--base) var(--ease);
}

.disclosure[open] summary::after {
  content: "–";
}

.disclosure summary:hover {
  color: var(--blue);
}

.disclosure-body {
  padding: 0 24px 24px;
  color: var(--ink-500);
  font-size: 16px;
  max-width: 72ch;
}

.disclosure-body p {
  margin: 0 0 0.9em;
}

.disclosure-body p:last-child {
  margin-bottom: 0;
}

/* Empty / pending state */
.empty-state {
  display: grid;
  gap: 12px;
  padding: 36px 32px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: left;
}

.empty-state h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.empty-state p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-500);
  font-size: 15.5px;
}

.empty-state .text-link {
  margin-top: 4px;
}

/* Callout note */
.note {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  font-size: 15.5px;
}

.note strong {
  color: var(--ink);
}

.note--cyan {
  background: var(--cyan-050);
  border-color: var(--cyan-100);
  border-left-color: var(--cyan);
}

/* --------------------------------------------------------------- 12 FORMS */

.form-shell {
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label,
.field legend,
.fieldset legend {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.field-hint {
  margin: 0;
  color: var(--ink-400);
  font-size: 13.5px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #b9c8dc;
  border-radius: var(--radius-sm);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-400);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-400);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-100);
  outline: none;
}

.field textarea {
  min-height: 148px;
  resize: vertical;
}

.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 1 / -1;
}

.fieldset legend {
  padding: 0;
  margin-bottom: 12px;
}

.choice-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.choice:hover {
  border-color: var(--blue-200);
  background: var(--blue-050);
}

.choice input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.choice:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-050);
}

.choice-text {
  display: grid;
  gap: 2px;
}

.choice-text small {
  color: var(--ink-400);
  font-size: 13px;
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  color: var(--ink-500);
  font-size: 14.5px;
  cursor: pointer;
}

.consent input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.form-note,
.form-status {
  margin: 0;
  color: var(--ink-400);
  font-size: 14px;
}

.form-note {
  max-width: 40ch;
}

.form-status {
  min-height: 22px;
  flex-basis: 100%;
  font-weight: 650;
}

.form-status:not(:empty) {
  padding: 12px 16px;
  color: var(--ink-700);
  background: var(--cyan-050);
  border: 1px solid var(--cyan-100);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm);
}

.form-status--success:not(:empty) {
  color: var(--green-700);
  background: var(--green-050);
  border-color: var(--green-100);
  border-left-color: var(--green);
}

.form-status--error:not(:empty) {
  color: #9a2231;
  background: #fdf0f2;
  border-color: #f6d3d9;
  border-left-color: #c62b3f;
}

/* Bot trap: removed from the layout and from the accessibility tree, but not
   display:none, which some bots use to detect and skip honeypots. */
.honeypot {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Shown only when the server redirects a no-JavaScript submission back to
   #register-error. With JavaScript the inline status is used instead. */
.submit-error {
  display: none;
  scroll-margin-top: calc(var(--header-height) + 32px);
  max-width: 68ch;
  margin: 28px 0 0;
  padding: 16px 20px;
  color: #9a2231;
  background: #fdf0f2;
  border: 1px solid #f6d3d9;
  border-left: 3px solid #c62b3f;
  border-radius: var(--radius-sm);
  font-size: 15.5px;
}

.submit-error:target {
  display: block;
}

.submit-error a {
  color: inherit;
}

/* The same mechanism for the other outcome: the contact form's no-JavaScript
   success redirect lands on #sent. Measured 6.93:1 on its own background. */
.submit-success {
  display: none;
  scroll-margin-top: calc(var(--header-height) + 32px);
  max-width: 68ch;
  margin: 28px 0 0;
  padding: 16px 20px;
  color: #2f6000;
  background: #f1f8ea;
  border: 1px solid #d8ecc4;
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  font-size: 15.5px;
}

.submit-success:target {
  display: block;
}

.submit-success a {
  color: inherit;
}

.field-error {
  margin: 0;
  color: #9a2231;
  font-size: 13.5px;
  font-weight: 650;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #c62b3f;
}

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px #f6d3d9;
}

.button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
}

.form-aside {
  display: grid;
  gap: 18px;
  align-content: start;
}

.form-aside .note {
  margin-top: 4px;
}

/* Contact channel list */
.channel-list {
  display: grid;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.channel-list li {
  display: grid;
  gap: 2px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.channel-term {
  color: var(--ink-400);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.channel-value {
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}

/* ------------------------------------------------------- 12b FUNDING BAND */

/* Institutional funding acknowledgement, shown above the footer on every page.
   The five marks are supplied as one combined strip, so the band only has to
   place it — never redraw, recolour or split the official artwork. */
.funding-band {
  padding-block: clamp(28px, 3.4vw, 44px);
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}

.funding-inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
}

.funding-label {
  margin: 0;
  color: var(--ink-400);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Below roughly 620px the five marks would be too small to read, so the strip
   keeps a legible minimum width and the band scrolls instead of shrinking. */
.funding-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.funding-strip {
  width: min(100%, 940px);
  min-width: 520px;
  height: auto;
  margin-inline: auto;
}

.funding-note {
  max-width: 74ch;
  margin: 0;
  color: var(--ink-400);
  font-size: 13.5px;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- 13 FOOTER */

.site-footer {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-900);
}

.site-footer::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 4px 4px, rgba(4, 168, 199, 0.18) 1px, transparent 1.7px) 0 0 / 15px 15px;
  content: "";
  pointer-events: none;
}

.footer-grid {
  position: relative;
  display: grid;
  gap: 44px 56px;
  padding-block: clamp(52px, 6vw, 76px);
  grid-template-columns: 1.35fr 0.75fr 0.75fr 0.9fr;
}

.footer-logo {
  width: 218px;
  padding: 12px 14px;
  background: var(--white);
  border-radius: 12px;
}

.footer-copy {
  max-width: 42ch;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.5;
}

.footer-title {
  margin: 0 0 16px;
  color: #7ee9f6;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.footer-links a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-cta {
  display: grid;
  gap: 14px;
  align-content: start;
}

.footer-cta p {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 22px 0 30px;
  color: rgba(255, 255, 255, 0.56);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
}

.footer-bottom p {
  margin: 0;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-meta a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer-meta a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ----------------------------------------------------- 13b LANGUAGE SWITCH */

/* A small segmented control, shared by the header and the footer. The current
   language is marked with pure CSS off <html lang>, so it is right whether or
   not the enhancement in app.js runs; app.js only adds aria-current. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.lang-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 26px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  color: var(--ink-400);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.lang-option:hover {
  color: var(--ink);
  background: var(--blue-050);
}

html[lang="en"] .lang-option[data-lang="en"],
html[lang="es"] .lang-option[data-lang="es"],
html[lang="gl"] .lang-option[data-lang="gl"] {
  color: var(--white);
  background: var(--blue);
}

.lang-option:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Header: sits at the end of the nav, after the last link. */
.nav-lang {
  display: flex;
  align-items: center;
}

@media (min-width: 961px) {
  .nav-lang { margin-left: 6px; }
}

@media (max-width: 960px) {
  .nav-lang { margin-top: 14px; }
}

/* Footer: on the dark band, right-aligned beside the meta links. The copyright
   keeps the left; everything after it clusters at the right, wrapping under the
   meta links rather than dropping to the far left. */
.footer-bottom { justify-content: flex-end; }
.footer-bottom > p { margin-right: auto; }

.lang-switch--footer {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.lang-switch--footer .lang-option { color: rgba(255, 255, 255, 0.72); }

.lang-switch--footer .lang-option:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

html[lang="en"] .lang-switch--footer .lang-option[data-lang="en"],
html[lang="es"] .lang-switch--footer .lang-option[data-lang="es"],
html[lang="gl"] .lang-switch--footer .lang-option[data-lang="gl"] {
  color: var(--white);
  background: var(--blue);
}

/* ------------------------------------------------------------- 14 MOTION */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      /* A fixed length keeps the reveal the same speed whatever the block's
         height, and anything already on screen at load starts past the end
         of the range, so a reveal can never leave content faded out. */
      animation-range: entry 0% entry 260px;
    }
  }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------- 15 RESPONSIVE */

@media (max-width: 1180px) {
  :root { --gutter: 32px; }

  .header-inner { gap: 14px; }
  .brand { width: 200px; }
  .nav-link { padding-inline: 9px; font-size: 13.5px; }
  .nav-link::after { right: 9px; left: 9px; }
  .header-cta { display: none; }

  .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.2fr 0.8fr 0.8fr; }
  .footer-cta { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --header-height: 76px; }

  /* backdrop-filter would make the header the containing block for the
     position:fixed drawer, collapsing it to the header's own height. */
  .site-header,
  .site-header.is-stuck {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .menu-toggle { display: inline-flex; margin-left: auto; }

  .primary-nav {
    position: fixed;
    z-index: 90;
    top: calc(var(--header-height) + 3px);
    right: 0;
    bottom: 0;
    width: min(380px, 100%);
    overflow-y: auto;
    padding: 22px;
    background: var(--white);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -30px rgba(7, 27, 73, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    visibility: hidden;
    transition: opacity var(--base) var(--ease), transform var(--base) var(--ease),
      visibility var(--base) var(--ease);
  }

  .menu-open .primary-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
  }

  .nav-list { display: grid; gap: 2px; }

  .nav-link {
    width: 100%;
    min-height: 50px;
    padding-inline: 14px;
    font-size: 16px;
  }

  .nav-link::after {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 0;
    width: 3px;
    height: auto;
  }

  .nav-list .mobile-only { display: block; margin-top: 16px; }
  .nav-list .mobile-only .button { width: 100%; }

  .hero-grid,
  .platform-hero-grid,
  .feature-split,
  .dark-callout-inner,
  .editorial-grid,
  .editorial-grid--form,
  .capability {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-split--reverse .feature-art { order: 0; }

  .hero-art,
  .platform-hero-art {
    width: min(100%, 620px);
    justify-self: center;
  }

  .editorial-nav,
  .capability-aside { position: static; }

  .capability:first-of-type { padding-top: 0; }

  .card-grid,
  .card-grid--4,
  .pillar-grid,
  .pilot-grid,
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 961px) {
  .mobile-only { display: none; }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }

  body { font-size: 16px; }

  .brand { width: 168px; }
  .header-inner { gap: 10px; }

  .display-title,
  .page-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }

  .quote-title { font-size: clamp(2rem, 9.5vw, 2.7rem); }

  .card-grid,
  .card-grid--2,
  .card-grid--4,
  .pillar-grid,
  .pilot-grid,
  .partner-grid,
  .form-grid,
  .choice-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-list li { grid-template-columns: minmax(0, 1fr); }

  .actions,
  .form-actions { flex-direction: column; align-items: stretch; }

  .form-actions { align-items: flex-start; }

  .button { width: 100%; }

  .field--full,
  .fieldset,
  .footer-cta { grid-column: auto; }

  .page-hero { background-position: 68% center; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

@media print {
  .site-header,
  .site-footer,
  .nav-backdrop,
  .skip-link { display: none; }

  body { color: #000; background: #fff; font-size: 12pt; }
  .section { padding-block: 18pt; }
}

/* ----------------------------------------------------------- 16 ICONS */


.icon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon--human {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M6 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='4.8' cy='9.8' r='2'/%3E%3Ccircle cx='19.2' cy='9.8' r='2'/%3E%3Cpath d='M2.6 18.4c0-2 .8-3.4 2.2-4.2'/%3E%3Cpath d='M21.4 18.4c0-2-.8-3.4-2.2-4.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M6 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='4.8' cy='9.8' r='2'/%3E%3Ccircle cx='19.2' cy='9.8' r='2'/%3E%3Cpath d='M2.6 18.4c0-2 .8-3.4 2.2-4.2'/%3E%3Cpath d='M21.4 18.4c0-2-.8-3.4-2.2-4.2'/%3E%3C/svg%3E");
}

.icon--animal {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.8' cy='8.6' r='2'/%3E%3Ccircle cx='12' cy='6.4' r='2.1'/%3E%3Ccircle cx='17.2' cy='8.6' r='2'/%3E%3Cpath d='M12 11.2c3 0 5.2 2.2 5.2 4.6 0 2-1.6 3.4-3.6 3.4-1 0-1.2-.4-1.6-.4s-.6.4-1.6.4c-2 0-3.6-1.4-3.6-3.4 0-2.4 2.2-4.6 5.2-4.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.8' cy='8.6' r='2'/%3E%3Ccircle cx='12' cy='6.4' r='2.1'/%3E%3Ccircle cx='17.2' cy='8.6' r='2'/%3E%3Cpath d='M12 11.2c3 0 5.2 2.2 5.2 4.6 0 2-1.6 3.4-3.6 3.4-1 0-1.2-.4-1.6-.4s-.6.4-1.6.4c-2 0-3.6-1.4-3.6-3.4 0-2.4 2.2-4.6 5.2-4.6Z'/%3E%3C/svg%3E");
}

.icon--environment {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-8 5.5-14 16-14 0 9-5 14-11 14H4Z'/%3E%3Cpath d='M7 20c1.5-4.6 4.5-7.9 8.6-9.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c0-8 5.5-14 16-14 0 9-5 14-11 14H4Z'/%3E%3Cpath d='M7 20c1.5-4.6 4.5-7.9 8.6-9.6'/%3E%3C/svg%3E");
}

.icon--compute {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='6' rx='1.8'/%3E%3Crect x='3.5' y='14' width='17' height='6' rx='1.8'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3Cpath d='M11 7h5.4M11 17h5.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='6' rx='1.8'/%3E%3Crect x='3.5' y='14' width='17' height='6' rx='1.8'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3Cpath d='M11 7h5.4M11 17h5.4'/%3E%3C/svg%3E");
}

.icon--data {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.8'/%3E%3Cpath d='M5 6v6c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6'/%3E%3Cpath d='M5 12v6c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='2.8'/%3E%3Cpath d='M5 6v6c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6'/%3E%3Cpath d='M5 12v6c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8v-6'/%3E%3C/svg%3E");
}

.icon--trust {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 5.8v5.5c0 4.3 2.9 8.2 7 9.7 4.1-1.5 7-5.4 7-9.7V5.8L12 3Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 5.8v5.5c0 4.3 2.9 8.2 7 9.7 4.1-1.5 7-5.4 7-9.7V5.8L12 3Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E");
}

.icon--pulse {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 12h3.4l2-4.6L12 17.4l2.3-6.2 1.6 3h4.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 12h3.4l2-4.6L12 17.4l2.3-6.2 1.6 3h4.9'/%3E%3C/svg%3E");
}

.icon--lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10' width='15' height='10.5' rx='2.2'/%3E%3Cpath d='M8 10V7.6a4 4 0 0 1 8 0V10'/%3E%3Cpath d='M12 14.2v2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10' width='15' height='10.5' rx='2.2'/%3E%3Cpath d='M8 10V7.6a4 4 0 0 1 8 0V10'/%3E%3Cpath d='M12 14.2v2.6'/%3E%3C/svg%3E");
}

.icon--dna {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 3c0 4.6 9.2 4.6 9.2 9s-9.2 4.4-9.2 9'/%3E%3Cpath d='M16.6 3c0 4.6-9.2 4.6-9.2 9s9.2 4.4 9.2 9'/%3E%3Cpath d='M8.6 6.4h6.8M7.6 9.4h8.8M7.6 14.6h8.8M8.6 17.6h6.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 3c0 4.6 9.2 4.6 9.2 9s-9.2 4.4-9.2 9'/%3E%3Cpath d='M16.6 3c0 4.6-9.2 4.6-9.2 9s9.2 4.4 9.2 9'/%3E%3Cpath d='M8.6 6.4h6.8M7.6 9.4h8.8M7.6 14.6h8.8M8.6 17.6h6.8'/%3E%3C/svg%3E");
}

.icon--microbe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3Ccircle cx='10.2' cy='10.6' r='1.2'/%3E%3Ccircle cx='14' cy='13.6' r='1'/%3E%3Cpath d='M12 5.6V3M12 21v-2.6M18.4 12H21M3 12h2.6M16.6 7.4 18.4 5.6M5.6 18.4l1.8-1.8M16.6 16.6l1.8 1.8M5.6 5.6l1.8 1.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3Ccircle cx='10.2' cy='10.6' r='1.2'/%3E%3Ccircle cx='14' cy='13.6' r='1'/%3E%3Cpath d='M12 5.6V3M12 21v-2.6M18.4 12H21M3 12h2.6M16.6 7.4 18.4 5.6M5.6 18.4l1.8-1.8M16.6 16.6l1.8 1.8M5.6 5.6l1.8 1.8'/%3E%3C/svg%3E");
}

.icon--ageing {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.4' cy='4.6' r='2.1'/%3E%3Cpath d='M13.4 8.2 9.8 11l1.6 3.7L9.2 21'/%3E%3Cpath d='m11.4 14.7 3.8 1.4 1.5 4.9'/%3E%3Cpath d='m9.8 11-3.6 1.5'/%3E%3Cpath d='m15.2 9.7 3.4 2.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.4' cy='4.6' r='2.1'/%3E%3Cpath d='M13.4 8.2 9.8 11l1.6 3.7L9.2 21'/%3E%3Cpath d='m11.4 14.7 3.8 1.4 1.5 4.9'/%3E%3Cpath d='m9.8 11-3.6 1.5'/%3E%3Cpath d='m15.2 9.7 3.4 2.2'/%3E%3C/svg%3E");
}

.icon--academy {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.6 8.6 12 13.2l9.4-4.6L12 4Z'/%3E%3Cpath d='M6.6 10.9v4.5c0 1.9 2.4 3.4 5.4 3.4s5.4-1.5 5.4-3.4v-4.5'/%3E%3Cpath d='M21.4 8.6v5.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.6 8.6 12 13.2l9.4-4.6L12 4Z'/%3E%3Cpath d='M6.6 10.9v4.5c0 1.9 2.4 3.4 5.4 3.4s5.4-1.5 5.4-3.4v-4.5'/%3E%3Cpath d='M21.4 8.6v5.6'/%3E%3C/svg%3E");
}

.icon--community {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='12' cy='4.4' r='2.2'/%3E%3Ccircle cx='5.2' cy='17' r='2.2'/%3E%3Ccircle cx='18.8' cy='17' r='2.2'/%3E%3Cpath d='M12 6.6v3M10 13.5l-3 2.1M14 13.5l3 2.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='12' cy='4.4' r='2.2'/%3E%3Ccircle cx='5.2' cy='17' r='2.2'/%3E%3Ccircle cx='18.8' cy='17' r='2.2'/%3E%3Cpath d='M12 6.6v3M10 13.5l-3 2.1M14 13.5l3 2.1'/%3E%3C/svg%3E");
}

.icon--briefcase {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.2' width='18' height='12.8' rx='2.2'/%3E%3Cpath d='M8.6 7.2V5.7a2 2 0 0 1 2-2h2.8a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 12.4h18'/%3E%3Cpath d='M10.4 12.4v1.9h3.2v-1.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.2' width='18' height='12.8' rx='2.2'/%3E%3Cpath d='M8.6 7.2V5.7a2 2 0 0 1 2-2h2.8a2 2 0 0 1 2 2v1.5'/%3E%3Cpath d='M3 12.4h18'/%3E%3Cpath d='M10.4 12.4v1.9h3.2v-1.9'/%3E%3C/svg%3E");
}

.icon--calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.2'/%3E%3Cpath d='M3.5 10.2h17M8.5 3v4M15.5 3v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.2'/%3E%3Cpath d='M3.5 10.2h17M8.5 3v4M15.5 3v4'/%3E%3C/svg%3E");
}

.icon--document {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5L13.5 3Z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3Cpath d='M8.6 13.2h6.8M8.6 16.6h4.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5L13.5 3Z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3Cpath d='M8.6 13.2h6.8M8.6 16.6h4.8'/%3E%3C/svg%3E");
}

.icon--mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.2'/%3E%3Cpath d='m3.7 6.7 8.3 5.9 8.3-5.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.2'/%3E%3Cpath d='m3.7 6.7 8.3 5.9 8.3-5.9'/%3E%3C/svg%3E");
}

.icon--partners {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.6'/%3E%3Ccircle cx='18' cy='7' r='2.6'/%3E%3Ccircle cx='12' cy='18' r='2.6'/%3E%3Cpath d='M7.8 9.3 10.7 15.6M16.2 9.3 13.3 15.6M8.6 7h6.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='7' r='2.6'/%3E%3Ccircle cx='18' cy='7' r='2.6'/%3E%3Ccircle cx='12' cy='18' r='2.6'/%3E%3Cpath d='M7.8 9.3 10.7 15.6M16.2 9.3 13.3 15.6M8.6 7h6.8'/%3E%3C/svg%3E");
}

.icon--megaphone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5v3a2 2 0 0 0 2 2h1.6L15 20V4L7.6 8.5H6a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M18.4 8.7a5 5 0 0 1 0 6.6'/%3E%3Cpath d='M8.2 15.6 9.6 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5v3a2 2 0 0 0 2 2h1.6L15 20V4L7.6 8.5H6a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M18.4 8.7a5 5 0 0 1 0 6.6'/%3E%3Cpath d='M8.2 15.6 9.6 21'/%3E%3C/svg%3E");
}

.icon--globe {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.4c2.4 2.4 3.6 5.3 3.6 8.6s-1.2 6.2-3.6 8.6c-2.4-2.4-3.6-5.3-3.6-8.6S9.6 5.8 12 3.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.4c2.4 2.4 3.6 5.3 3.6 8.6s-1.2 6.2-3.6 8.6c-2.4-2.4-3.6-5.3-3.6-8.6S9.6 5.8 12 3.4Z'/%3E%3C/svg%3E");
}

.icon--compass {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m15.4 8.6-1.9 4.9-4.9 1.9 1.9-4.9 4.9-1.9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m15.4 8.6-1.9 4.9-4.9 1.9 1.9-4.9 4.9-1.9Z'/%3E%3C/svg%3E");
}

.icon--flask {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 3v6.3l-4.8 8.3A2 2 0 0 0 6.5 20.6h11a2 2 0 0 0 1.7-3L14.4 9.3V3'/%3E%3Cpath d='M8.6 3h6.8'/%3E%3Cpath d='M7.2 15.2h9.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 3v6.3l-4.8 8.3A2 2 0 0 0 6.5 20.6h11a2 2 0 0 0 1.7-3L14.4 9.3V3'/%3E%3Cpath d='M8.6 3h6.8'/%3E%3Cpath d='M7.2 15.2h9.6'/%3E%3C/svg%3E");
}

.icon--chart {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M6.6 20.5v-8.7M11.6 20.5V6M16.6 20.5v-5.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M6.6 20.5v-8.7M11.6 20.5V6M16.6 20.5v-5.6'/%3E%3C/svg%3E");
}

.icon--search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='m15.8 15.8 4.4 4.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.6'/%3E%3Cpath d='m15.8 15.8 4.4 4.4'/%3E%3C/svg%3E");
}

.icon--cube {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.4v9.2L12 21l-8-4.4V7.4L12 3Z'/%3E%3Cpath d='m4 7.4 8 4.4 8-4.4M12 11.8V21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8 4.4v9.2L12 21l-8-4.4V7.4L12 3Z'/%3E%3Cpath d='m4 7.4 8 4.4 8-4.4M12 11.8V21'/%3E%3C/svg%3E");
}

.icon--book {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 5a1.5 1.5 0 0 1 1.5-1.5H10A2.5 2.5 0 0 1 12.5 6v13.6a2 2 0 0 0-2-2H3.6V5Z'/%3E%3Cpath d='M21.4 5a1.5 1.5 0 0 0-1.5-1.5H15A2.5 2.5 0 0 0 12.5 6v13.6a2 2 0 0 1 2-2h6.9V5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 5a1.5 1.5 0 0 1 1.5-1.5H10A2.5 2.5 0 0 1 12.5 6v13.6a2 2 0 0 0-2-2H3.6V5Z'/%3E%3Cpath d='M21.4 5a1.5 1.5 0 0 0-1.5-1.5H15A2.5 2.5 0 0 0 12.5 6v13.6a2 2 0 0 1 2-2h6.9V5Z'/%3E%3C/svg%3E");
}

.icon--spark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 13.9 9l5.6 1.9-5.6 2L12 18.6 10.1 13l-5.6-2L10.1 9 12 3.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 13.9 9l5.6 1.9-5.6 2L12 18.6 10.1 13l-5.6-2L10.1 9 12 3.4Z'/%3E%3C/svg%3E");
}

.icon--pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.icon--scales {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7.4 20h9.2M12 6.4 5 8.2M12 6.4l7 1.8'/%3E%3Cpath d='M5 8.2 2.4 14a2.7 2.7 0 0 0 5.2 0L5 8.2Z'/%3E%3Cpath d='M19 8.2 16.4 14a2.7 2.7 0 0 0 5.2 0L19 8.2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7.4 20h9.2M12 6.4 5 8.2M12 6.4l7 1.8'/%3E%3Cpath d='M5 8.2 2.4 14a2.7 2.7 0 0 0 5.2 0L5 8.2Z'/%3E%3Cpath d='M19 8.2 16.4 14a2.7 2.7 0 0 0 5.2 0L19 8.2Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------- 17 ICON BADGES & CARDS */

.icon-badge {
  display: inline-flex;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: var(--blue-050);
  border: 1px solid var(--blue-100);
  border-radius: 50%;
  transition: transform var(--slow) var(--ease), background var(--base) var(--ease);
}

.icon-badge .icon {
  width: 28px;
  height: 28px;
}

.icon-badge--cyan { color: var(--cyan-700); background: var(--cyan-050); border-color: var(--cyan-100); }
.icon-badge--green { color: var(--green-700); background: var(--green-050); border-color: var(--green-100); }
.icon-badge--neutral { color: var(--ink-600); background: var(--paper); border-color: var(--line); }

.icon-badge--sm { width: 48px; height: 48px; }
.icon-badge--sm .icon { width: 22px; height: 22px; }

.icon-badge--lg { width: 76px; height: 76px; }
.icon-badge--lg .icon { width: 34px; height: 34px; }

.icon-badge--solid {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.icon-badge--solid.icon-badge--cyan { background: var(--cyan); border-color: var(--cyan); }
.icon-badge--solid.icon-badge--green { background: var(--green); border-color: var(--green); }

.card:hover .icon-badge,
.pilot:hover .icon-badge {
  transform: translateY(-2px);
}

/* Card head — badge beside title, as in the reference screens */
.card-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.panel-split > .card > .card-head,
.card-head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.card-head .card-title,
.card-head .pilot-name {
  margin: 0;
}

.card-head-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.card-kicker {
  margin: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card-kicker--cyan { color: var(--cyan-700); }
.card-kicker--green { color: var(--green-700); }

/* Bulleted capability list inside cards */
.card-list {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-600);
  font-size: 15px;
}

.card-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.card-list li::before {
  margin-top: 0.6em;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--dot, var(--blue));
  border-radius: 50%;
  content: "";
}

.card-list--cyan { --dot: var(--cyan); }
.card-list--green { --dot: var(--green); }

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: auto;
  padding-top: 22px;
}

.card-foot--ruled {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.card-foot .text-link {
  margin: 0;
  padding: 0;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 600;
}

.status-dot::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--dot, var(--blue));
  border-radius: 50%;
  content: "";
}

.status-dot--cyan { --dot: var(--cyan); }
.status-dot--green { --dot: var(--green); }

/* Tall accent panel beside a card grid */
.panel-split {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 0.8fr);
  align-items: stretch;
}

.panel-split--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(210px, 0.7fr);
}

.aside-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  background: linear-gradient(170deg, var(--blue-050), #f7fbff 55%, var(--cyan-050));
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg);
}

.aside-panel::after {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(4, 168, 199, 0.16), transparent 68%);
  content: "";
}

.aside-panel .icon-badge {
  background: rgba(255, 255, 255, 0.75);
}

.aside-panel-title {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  font-family: var(--display);
  font-size: clamp(1.28rem, 1.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.aside-panel-copy {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--ink-600);
  font-size: 15.5px;
}

.aside-panel .text-link {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 24px;
}

/* -------------------------------------------------------- 18 PROCESS BAND */

.process-band {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 4px 4px, rgba(4, 168, 199, 0.22) 1px, transparent 1.7px) 0 0 / 15px 15px,
    linear-gradient(110deg, var(--navy-900), var(--navy-700) 62%, var(--navy-900));
}

.process-band .eyebrow {
  color: #6fe0f2;
}

.process-title {
  max-width: 24ch;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.8rem, 2.9vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.process-steps {
  display: grid;
  gap: 18px;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-step {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-right: 18px;
}

.process-step:not(:last-child)::after {
  position: absolute;
  top: 27px;
  right: 6px;
  left: calc(56px + 74px);
  height: 1px;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 4px, transparent 4px 10px);
  background-size: 10px 1px;
  content: "";
}

.process-step .icon-badge {
  width: 56px;
  height: 56px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}

.process-step:nth-child(1) .icon-badge { background: rgba(7, 88, 247, 0.34); border-color: rgba(122, 168, 255, 0.5); }
.process-step:nth-child(2) .icon-badge { background: rgba(4, 168, 199, 0.3); border-color: rgba(111, 224, 242, 0.5); }
.process-step:nth-child(3) .icon-badge { background: rgba(88, 176, 0, 0.3); border-color: rgba(154, 216, 84, 0.5); }
.process-step:nth-child(4) .icon-badge { background: rgba(7, 88, 247, 0.34); border-color: rgba(122, 168, 255, 0.5); }

.process-num {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.process-step h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.process-step p {
  max-width: 30ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}

/* --------------------------------------------------------- 19 CTA BOX */

.cta-box {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  gap: 24px 48px;
  padding: clamp(34px, 4.4vw, 58px) clamp(28px, 4vw, 56px);
  color: var(--white);
  background:
    radial-gradient(circle at 4px 4px, rgba(4, 168, 199, 0.30) 1px, transparent 1.7px) 0 0 / 15px 15px,
    linear-gradient(112deg, #00102a 0%, #05235280 42%, #00102a 100%),
    #00122f;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  grid-template-columns: minmax(0, 1fr) auto;
}

.cta-box::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 42% 95% at 90% 50%, rgba(4, 168, 199, 0.20), transparent 72%);
  content: "";
  pointer-events: none;
}

.cta-box > * {
  position: relative;
  z-index: 1;
}

.cta-title {
  max-width: 22ch;
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.1vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
}

.cta-copy {
  max-width: 52ch;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.02rem;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------------------------------------------------------- 20 ROADMAP RAIL */

/* ------------------------------------------------------ 21 HERO SUPPORT */

.hero-lead {
  display: grid;
  gap: 18px 40px;
  margin-top: 26px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 58ch;
}

@media (min-width: 1100px) {
  .hero-lead {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

.hero-lead p {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-600);
  font-size: 1.05rem;
  line-height: 1.58;
  text-wrap: pretty;
}

.hero-lead--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 62ch;
}

.page-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  gap: 32px 56px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.page-hero-aside {
  display: grid;
  gap: 14px;
  justify-items: start;
}

/* ------------------------------------------------------ 22 SUPPORT BITS */

.mini-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini {
  display: grid;
  gap: 10px;
  padding: 22px 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}

.mini:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-sm);
}

.mini h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.mini p {
  margin: 0;
  color: var(--ink-500);
  font-size: 15px;
}

.level-list {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  counter-reset: level;
}

.level {
  display: grid;
  gap: 6px 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  grid-template-columns: 92px minmax(0, 1fr);
  counter-increment: level;
  transition: background var(--base) var(--ease);
}

.level-tier {
  color: var(--blue);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.level:nth-child(2) .level-tier { color: var(--cyan-700); }
.level:nth-child(3) .level-tier { color: var(--green-700); }

.level h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.level p {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--ink-500);
  font-size: 15.5px;
}

.level-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 680px) {
  .level { grid-template-columns: minmax(0, 1fr); }
  .level-meta { grid-column: auto; }
  .mini-grid,
  .process-steps,
  .panel-split,
  .panel-split--2,
  .hero-lead,
  .page-hero-grid,
  .cta-box { grid-template-columns: minmax(0, 1fr); }
  .process-step::after { display: none !important; }
  .cta-box { text-align: left; }
}

@media (max-width: 1180px) {
  .panel-split,
  .panel-split--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .partner-grid--lead { grid-template-columns: minmax(0, 1fr); }
}

/* Later than the generic .partner-grid rule above, which an equal-specificity
   modifier would otherwise outrank at this width. */
@media (max-width: 680px) {
  .partner-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step:nth-child(2)::after { display: none; }
  .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-box { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- 21b FLOW GUIDE */

/* What happens after someone writes in. It sits in the hero because it
   answers the question that decides whether they scroll to the form at all.
   Five cards on one line, joined by arrows, each step carrying a colour from
   the project's own palette so the sequence reads as movement rather than as
   five equal claims. */

.hero-flow { margin-top: 34px; }

.hero-flow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 26px;
}

.hero-flow-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.hero-flow-lead {
  margin: 0;
  color: var(--ink-500);
  font-size: 14.5px;
}

.hero-flow-lead strong { color: var(--green-700); }

/* --- the rail ------------------------------------------------------------ */

.flow-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 58px; /* room for the arrow that sits between two cards */
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  background: linear-gradient(180deg, var(--white), var(--tint) 220%);
  border: 1px solid var(--tint-line);
  border-radius: 18px;
}

.flow-card--blue { --accent: var(--blue); --tint: var(--blue-050); --tint-line: var(--blue-100); }
.flow-card--cyan { --accent: var(--cyan); --tint: var(--cyan-050); --tint-line: var(--cyan-100); }
.flow-card--green { --accent: var(--green); --tint: var(--green-050); --tint-line: var(--green-100); }

.flow-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
}

.flow-card .icon-badge { background-color: var(--white); }

.flow-card-num {
  padding-top: 2px;
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.flow-card-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.flow-card-copy {
  margin: 0;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.55;
}

/* --- what joins one card to the next ------------------------------------- */

/* A circled arrow in the gap, with a dot on each side sitting against the two
   cards it joins. Decorative: the order is already in the numbers and in the
   reading order, so none of this is announced. */
.flow-arrow {
  position: absolute;
  top: 50%;
  right: -42px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  background: var(--white);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
}

.flow-arrow::before,
.flow-arrow::after {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  content: "";
}

.flow-arrow::before { left: -15px; }
.flow-arrow::after { right: -15px; }

/* A hero that ends in the rail has already used its space. Left alone, its
   bottom padding plus the next section's top padding puts most of a screen of
   nothing between the last card and the form. */
.page-hero--flow { padding-bottom: clamp(32px, 3.4vw, 48px); }

.section--after-flow { padding-top: clamp(40px, 4.5vw, 64px); }

/* The rail explains the process; this is the step out of it. Without a way
   down from here, the form is another scroll away and the hero ends on a
   sentence about data protection. */
.hero-flow-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 30px;
}

.hero-flow-note {
  margin: 0;
  color: var(--ink-400);
  font-size: 13px;
}

.hero-flow-note a {
  color: var(--ink-500);
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}

.hero-flow-note a:hover { color: var(--blue); }

/* The arrow in a button normally points the way a link goes — sideways. This
   one goes down the page, and says so. */
.arrow--down { transform: none; }

.button:hover .arrow--down { transform: translateY(2px); }

/* Wrapped rows: an arrow would point at the edge of the page, so it goes and
   the numbers carry the order on their own. */
@media (max-width: 1180px) {
  .flow-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .flow-arrow { display: none; }
}

@media (max-width: 760px) {
  .flow-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .flow-rail { grid-template-columns: minmax(0, 1fr); }
  .flow-card { padding: 18px 18px 20px; }
}

/* ----------------------------------------------------- 22a LEGAL NOTICE */

/* The data protection clause above each form's consent box. It is longer than
   anything else in a form, and it has to be readable rather than skimmed past,
   so it is set quieter than the fields but not smaller than legible. */

/* Collapsed by default. It is the full clause, and it has to be there before
   anyone consents — but open, it puts six terms and a legal citation between
   the last field and the button. <details> keeps it one click away, with no
   script and no way for it to be missing when JavaScript is. */
.legal-note {
  margin: 4px 0 22px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.legal-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}

/* Safari draws its own triangle unless told otherwise. */
.legal-summary::-webkit-details-marker { display: none; }

.legal-summary:hover { color: var(--blue); }

.legal-summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.legal-summary-hint {
  flex: 1 1 auto;
  color: var(--ink-400);
  font-size: 13px;
  font-weight: 500;
}

/* A chevron, drawn from two borders, that turns as the panel opens. */
.legal-summary-mark {
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-right: 1.5px solid var(--ink-400);
  border-bottom: 1.5px solid var(--ink-400);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--base) var(--ease);
}

.legal-note[open] .legal-summary-mark {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.legal-note[open] .legal-summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.legal-body { padding: 18px 20px 20px; }

.legal-intro {
  margin: 0 0 14px;
  color: var(--ink-600);
  font-size: 13.5px;
  line-height: 1.6;
}

.legal-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.legal-list dt {
  color: var(--ink);
  font-weight: 700;
}

.legal-list dd {
  margin: 0;
  color: var(--ink-500);
}

.legal-list a {
  color: var(--blue);
  text-underline-offset: 2px;
}

@media (max-width: 620px) {
  .legal-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal-list dd { margin-bottom: 10px; }
}

/* ------------------------------------------------------------- 22b NEWS */

/* Posts written in the control panel. The body is whatever the allowlist in
   lib/sanitize-html.js permits, so every rule here is written against that
   list and nothing else. */

.news-list {
  display: grid;
  gap: 28px;
}

.news-post {
  padding: 28px 30px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.news-date {
  margin: 0 0 8px;
  color: var(--ink-400);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.news-title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}

.news-body > :first-child { margin-top: 0; }
.news-body > :last-child { margin-bottom: 0; }

.news-body h3,
.news-body h4 {
  margin: 26px 0 10px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.news-body h3 { font-size: 1.15rem; }
.news-body h4 { font-size: 1.02rem; }

.news-body ul,
.news-body ol {
  margin: 14px 0;
  padding-left: 22px;
  color: var(--ink-600);
}

.news-body li { margin-bottom: 8px; }

.news-body blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--blue-200);
  color: var(--ink-500);
  font-style: italic;
}

.news-contact {
  color: var(--ink-500);
  font-size: 14.5px;
}

@media (max-width: 680px) {
  .news-post { padding: 22px 20px 24px; }
}

/* ------------------------------------------------------------- 22c A CASE */

/* One person's own page, reached by a link only they were sent. It is not part
   of the site's navigation and has no way back into it beyond the logo: they
   came here to see one thing. */

.case-page { background: var(--white); }

.case-header {
  padding: 18px 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.case-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.case-logo img {
  display: block;
  width: 168px;
  height: auto;
}

.case-ref {
  margin: 0;
  color: var(--ink-500);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.case-ref strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.case-hero {
  padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 36px);
  background: linear-gradient(180deg, var(--blue-050), var(--white));
}

.case-updated {
  margin: 14px 0 0;
  color: var(--ink-400);
  font-size: 13px;
}

/* --- the five steps ------------------------------------------------------ */

.case-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-step {
  position: relative;
  padding: 22px 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.case-step-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  color: var(--ink-400);
  font-size: 14px;
  font-weight: 800;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 50%;
}

.case-step-title {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-500);
}

.case-step-blurb {
  margin: 0;
  color: var(--ink-400);
  font-size: 13px;
  line-height: 1.5;
}

/* Done, now, and not yet — three states, told apart by more than colour: the
   completed ones carry a tick, and the current one is the only filled card. */
.case-step--done .case-step-mark {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}

.case-step--done .case-step-title { color: var(--ink-600); }

.case-step--current {
  background: var(--blue-050);
  border-color: var(--blue-200);
  box-shadow: var(--shadow-sm);
}

.case-step--current .case-step-mark {
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.case-step--current .case-step-title { color: var(--ink); }
.case-step--current .case-step-blurb { color: var(--ink-600); }

.case-step--ahead { background: var(--paper-2); }

/* --- what the team wrote, and what was registered ------------------------ */

.case-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

/* The case as a timeline. The rail is drawn on each entry rather than behind
   the list, so the last one can stop it: a line that runs past the most recent
   event suggests there is something below it. */
.case-timeline {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.case-event {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 16px;
  padding-bottom: 26px;
}

.case-event-mark {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.case-event-dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  background: var(--white);
  border: 3px solid var(--blue-200);
  border-radius: 50%;
}

/* The line to the next event. */
.case-event:not(:last-child) .case-event-mark::after {
  position: absolute;
  top: 22px;
  bottom: -4px;
  left: 13px;
  width: 2px;
  background: var(--line);
  content: "";
}

.case-event--latest .case-event-dot {
  background: var(--blue);
  border-color: var(--blue-100);
  box-shadow: 0 0 0 3px var(--blue-050);
}

.case-event-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 4px;
  color: var(--ink-500);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.case-event-step {
  color: var(--blue-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-event-title {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.case-event .case-update-note {
  margin-top: 10px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.case-update-note {
  margin: 0;
  color: var(--ink-700);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Attachments on a step. Links, never previews: nothing the team uploads is
   ever rendered by a visitor's browser — see lib/case-files.js. */
.case-files {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.case-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  color: var(--ink-700);
  font-size: 14.5px;
  text-decoration: none;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.case-file:hover {
  color: var(--blue);
  border-color: var(--blue-200);
  background: var(--blue-050);
}

/* A paperclip drawn from a rounded rectangle, so no icon file has to load. */
.case-file-icon {
  flex: none;
  width: 9px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 5px;
  opacity: 0.55;
}

.case-file-name {
  flex: 1 1 auto;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.case-file-size {
  flex: none;
  color: var(--ink-400);
  font-size: 12.5px;
}

.case-empty {
  margin: 20px 0 0;
  padding: 20px 22px;
  color: var(--ink-500);
  font-size: 14.5px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.case-aside { font-size: 14.5px; }

.case-facts {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0;
  margin: 18px 0 0;
}

.case-facts dt,
.case-facts dd {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.case-facts dt {
  padding-right: 18px;
  color: var(--ink-500);
  font-weight: 650;
}

.case-facts dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.case-subhead {
  margin: 24px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.case-message-text {
  margin: 0;
  padding: 16px 18px;
  color: var(--ink-600);
  font-size: 14.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.case-footer {
  padding: 30px 0 40px;
  color: var(--ink-400);
  font-size: 13px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.case-footer p { margin: 0 0 10px; max-width: 76ch; }
.case-footer a { color: var(--ink-500); }
.case-footer-mark { color: var(--ink-300); font-size: 12px; }

@media (max-width: 1000px) {
  .case-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .case-rail { grid-template-columns: minmax(0, 1fr); }
  .case-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .case-step-mark { grid-row: 1 / span 2; margin-bottom: 0; }
  .case-step-title { align-self: center; }
}

/* --------------------------------------------------------- 23 UTILITIES */

.mt-sm { margin-top: 20px; }
.mt-md { margin-top: 28px; }
.mt-lg { margin-top: 36px; }
.mt-xl { margin-top: 48px; }
.mb-md { margin-bottom: 28px; }

.measure { max-width: 68ch; }
.measure--center { max-width: 74ch; margin-inline: auto; }
.text-muted { color: var(--ink-500); }