/* ==========================================================================
   JourneyTwin — Design System
   CLASSIC identity: navy authority and gold — the pre-rebrand Elydium look.
   Accessible by default: strong contrast, focus states, non-colour-only meaning.
   ========================================================================== */

:root {
  /* Brand palette — CLASSIC (navy and gold) identity.
     !! The token NAMES below are inherited from the rebrand stylesheet in Elydium/ and
     are deliberately kept, so this file still diffs line-for-line against that one and a
     fix can be ported between the two. In this copy they carry the gold palette:
        --teal-*  = gold      (500 accents, 400 marks, 300 text on navy)
        --blue-*  = bronze    (the dark end of the leaf gradient)
        --green-* = gold      (tick marks and positive states)
     Contrast, measured: --teal-300 on --navy-800 10.5:1; --teal-400 7.9:1;
     --accent-ink on --cream-100 5.8:1. Gold is NEVER used for text on light
     surfaces — #aa8444 on cream is only 3.2:1. Use --accent-ink there. */
  --navy-900: #141931;
  --navy-800: #1f2645;
  --navy-700: #283056;
  --navy-600: #343d68;
  --charcoal: #12162a;

  --teal-500: #c5a55f;
  --teal-400: #d2bc72;
  --teal-300: #e8d9a0;
  --blue-500: #aa8444;
  --blue-400: #bf9a55;

  --green-500: #aa8444;
  --green-400: #d2bc72;

  /* The leaf gradient, as drawn in the original artwork: bronze -> pale gold -> bronze. */
  --gold-dark: #aa8444;
  --gold-light: #fbf4a1;

  /* Warm neutrals */
  --cream-50: #fbfaf7;
  --cream-100: #f7f5f1;
  --cream-200: #eee9e1;
  --sand-200: #ece6db;

  --ink-900: #14212e;
  --ink-700: #33475b;
  --ink-500: #5a6b7b;
  --ink-300: #8a99a7;

  --white: #ffffff;

  /* Semantic tokens (light surfaces) */
  --bg: var(--cream-100);
  --bg-alt: var(--cream-50);
  --surface: var(--white);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --heading: var(--navy-800);
  --border: #e3ddd1;
  --border-strong: #d3cbba;

  --accent: var(--teal-500);
  --accent-ink: #7a5b21;
  --link: #7a5b21;
  --link-hover: #5c4417;

  /* Type scale */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Quicksand", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* CLASSIC: Quicksand is used for the wordmark AND all headings (h1–h4); body text
     stays Inter, which reads better at paragraph length. Range is 300–700; never ask
     for 800 (Quicksand fakes it). */
  --display-weight: 400;  /* the original wordmark is light, not the rebrand's 550 */

  /* Scrollbars — tune size/colour here. Kept at 11px (default is ~15–17px):
     narrow enough to feel refined, wide enough to stay an easy pointer target. */
  --scrollbar-size: 11px;
  --scrollbar-track: rgba(11, 31, 51, 0.05);
  --scrollbar-thumb: rgba(122, 91, 33, 0.40);
  --scrollbar-thumb-hover: var(--accent-ink);
  --font-mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;

  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.92rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.32rem + 0.65vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  --step-5: clamp(2.6rem, 2rem + 3vw, 4.2rem);

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 780px;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --gap: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  --shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.06), 0 2px 6px rgba(11, 31, 51, 0.05);
  --shadow-md: 0 8px 24px rgba(11, 31, 51, 0.09), 0 2px 6px rgba(11, 31, 51, 0.06);
  --shadow-lg: 0 20px 55px rgba(8, 23, 42, 0.16);

  --ring: 0 0 0 3px rgba(197, 165, 95, 0.55);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--heading);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

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

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

strong { color: var(--heading); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Layout helpers ---------- */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, var(--maxw-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section--navy {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: #d9e3ee;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy strong { color: #fff; }
.section--navy a { color: var(--teal-300); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.9rem;
}
.section--navy .eyebrow { color: var(--teal-300); }
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lead { font-size: var(--step-1); color: var(--ink-700); line-height: 1.55; }
.section--navy .lead { color: #c4d2e0; }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--teal-500), var(--blue-500));
  color: #fff;
  box-shadow: 0 6px 16px rgba(197,165,95, 0.28);
}
.btn--primary:hover { color: #fff; box-shadow: 0 10px 22px rgba(197,165,95, 0.36); }

.btn--secondary {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--border-strong);
}
.btn--secondary:hover { color: var(--navy-800); border-color: var(--navy-700); background: rgba(11, 31, 51, 0.03); }

/* Any dark-background container carries `.on-dark`; components invert inside it.
   Add `.on-dark` to new dark surfaces so descendants adapt by default. */
.on-dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.35); }
.on-dark .btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}
.textlink .arrow { transition: transform 0.15s ease; }
.textlink:hover .arrow { transform: translateX(3px); }

/* ---------- Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.85rem;
  letter-spacing: -0.005em;
  color: var(--navy-800);
  text-decoration: none;
}
.brand:hover { color: var(--navy-800); }
.brand .brand-mark { flex: none; width: 34px; height: 34px; }
.brand b { color: var(--teal-500); font-weight: inherit; }
.brand span { padding-bottom: 5px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; color: var(--navy-800); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-weight: 500;
  font-size: 0.97rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-menu a:hover { background: rgba(11, 31, 51, 0.05); color: var(--navy-800); }
/* Matches any aria-current value: pages use "page", and a news post marks the News
   link with "true" to show the section it sits in. */
.nav-menu a[aria-current] { color: var(--navy-800); font-weight: 600; }
.nav-menu a[aria-current]::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 2px;
  margin-top: 3px;
  background: var(--teal-500);
}
.nav-cta { margin-left: 0.4rem; }

/* Header CTA is a GHOST button — outline, not fill.
   SCOPED TO .nav-cta ON PURPOSE. `.btn--primary` is shared with the hero, the CTA
   bands and the contact form, and several of those sit on navy: a transparent button
   with navy text would be invisible there. Do not lift this up into `.btn--primary`.
   It also closes an accessibility gap. The gradient fill this replaces put white text
   at 2.42:1 against the teal end and 3.82:1 against the blue end; the button is 16-17px
   at weight 600, which WCAG counts as normal text and requires 4.5:1. Navy on the cream
   header measures 15.99:1.
   Safe on mobile too: the collapsed .nav-menu panel is --bg-alt (cream), not dark. */
.nav-cta .btn--primary {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--navy-800);
  box-shadow: none;
}
.nav-cta .btn--primary:hover {
  color: var(--navy-800);
  background: rgba(11, 31, 51, 0.06);
  box-shadow: none;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 0.8rem 1.25rem 1.2rem;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 0.7rem 0.6rem; }
  .nav-menu a[aria-current]::after { display: none; }
  .nav-cta { margin: 0.4rem 0 0; }
  .nav-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-900) 60%, #0e1226 100%);
  color: #d9e3ee;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(197,165,95, 0.20), transparent 60%),
    radial-gradient(50% 50% at 12% 88%, rgba(170,132,68, 0.16), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero .lead { color: #c4d2e0; margin-bottom: 1.8rem; }
.hero .eyebrow { color: var(--teal-300); }
.hero .btn-row { margin-bottom: 1.6rem; }
.hero-note {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1);
  color: #9fb2c4;
}
.hero-note svg { flex: none; color: var(--green-400); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card h3 { font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }
.card .card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(197,165,95,0.14), rgba(170,132,68,0.14));
  color: var(--accent-ink);
  margin-bottom: 1rem;
}
.card .card-icon svg { width: 24px; height: 24px; }

.section--navy .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  box-shadow: none;
}
.section--navy .card p { color: #c4d2e0; }
.section--navy .card .card-icon { background: rgba(197,165,95,0.18); color: var(--teal-300); }

/* Numbered step cards */
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.6rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--teal-500), var(--blue-500));
  margin-bottom: 0.9rem;
}
.step h3 { font-size: var(--step-1); }

/* Feature list with ticks */
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--green-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.25 1.4 1.45z'/%3E%3C/svg%3E") center/1.15rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.25 1.4 1.45z'/%3E%3C/svg%3E") center/1.15rem no-repeat;
}
.section--navy .ticklist li::before { background: var(--green-400); }

/* Two-column split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 820px) { .split, .split--wide-left { grid-template-columns: 1fr; } }

/* Pills / tags */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  background: rgba(197,165,95,0.10);
  color: var(--accent-ink);
  border: 1px solid rgba(197,165,95,0.25);
}
.section--navy .pill { background: rgba(197,165,95,0.14); color: var(--teal-300); border-color: rgba(232,217,160,0.28); }

/* Page hero (interior pages) */
.page-hero {
  background: linear-gradient(165deg, var(--navy-800), var(--navy-900));
  color: #cdd9e6;
  padding-block: clamp(2.8rem, 2rem + 3vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(55% 60% at 88% 12%, rgba(197,165,95,0.18), transparent 60%);
  pointer-events: none;
}
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #c4d2e0; max-width: 60ch; }
.page-hero .breadcrumb { position: relative; }

/* Breadcrumb */
.breadcrumb { font-size: var(--step--1); color: #9fb2c4; margin-bottom: 1rem; }
.breadcrumb a { color: var(--teal-300); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { opacity: 0.6; margin-inline: 0.4rem; }

/* Callout / note box */
.note {
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal-500);
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
}
.note h4 { margin-bottom: 0.4rem; }
.note p:last-child { margin-bottom: 0; }

/* Data profile card (interoperability) */
.profile-card {
  background: var(--charcoal);
  color: #d7e2ee;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.7;
}
.profile-card .pc-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.profile-card .pc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green-400); box-shadow: 0 0 0 4px rgba(210,188,114,0.18); }
.profile-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.2rem; margin: 0; }
.profile-card dt { color: var(--teal-300); }
.profile-card dd { margin: 0; color: #e8eef4; }
.profile-card .pc-key { color: #8fb7d8; }

/* Stats / at-a-glance */
.stat { text-align: left; }
.stat .stat-num { font-size: var(--step-3); font-weight: 700; color: var(--navy-800); letter-spacing: -0.02em; line-height: 1; }
.section--navy .stat .stat-num { color: #fff; }
.stat .stat-label { color: var(--text-muted); font-size: var(--step--1); }
.section--navy .stat .stat-label { color: #a9bccd; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
  color: #dbe6f1;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 20% 0%, rgba(197,165,95,0.22), transparent 60%),
             radial-gradient(50% 80% at 85% 100%, rgba(170,132,68,0.18), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: #c4d2e0; margin-inline: auto; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--navy-800); }
.field .req { color: #c0392b; }
.field .hint { font-size: var(--step--1); color: var(--text-muted); }
.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: var(--ring);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }

/* ---------- Contact addresses ---------- */
/* The contact pages lead with an email address instead of a form. It has to be big enough
   to read at a glance AND selectable as text: a mailto: link does nothing on a machine
   with no mail client configured, which is common on locked-down corporate desktops, so
   the address itself must be readable and copyable. `overflow-wrap` stops a long address
   overflowing its card on a narrow screen. */
.contact-address {
  font-size: var(--step-1); font-weight: 600; line-height: 1.3;
  margin: 0.4rem 0 0.7rem; overflow-wrap: anywhere;
}

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

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: #a9bccd;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand { color: #fff; margin-bottom: 0.8rem; }
.site-footer .brand:hover { color: #fff; }
.footer-about { max-width: 34ch; font-size: 0.95rem; color: #9fb2c4; }
/* The tagline leads the footer blurb and always sits on its own line.
   display:block rather than a <br> in the markup, so the break is a styling
   decision and the tagline can be treated as one styled unit. Sized just above
   the footer column headings (0.98rem) — it is the brand line, so it should
   outrank a column label. */
.footer-about .footer-tagline {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.footer-col h4 { color: #fff; font-size: 0.98rem; margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: #a9bccd; text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: var(--teal-300); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: var(--step--1);
  color: #8ba0b3;
}
.footer-bottom a { color: #8ba0b3; text-decoration: none; }
.footer-bottom a:hover { color: var(--teal-300); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 1.8rem; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Ecosystem diagram (hero + challenge) ---------- */
.eco {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
}
.eco svg { width: 100%; height: 100%; overflow: visible; }

.eco .eco-link {
  fill: none;
  stroke: rgba(232,217,160, 0.30);
  stroke-width: 1.4;
}
.eco .eco-flow {
  fill: none;
  stroke: var(--teal-400);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 3 12;
  animation: eco-dash 2.6s linear infinite;
}
@keyframes eco-dash { to { stroke-dashoffset: -60; } }

.eco .eco-node-bg {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(232,217,160,0.35);
  stroke-width: 1.2;
}
.eco .eco-node-label { fill: #cdd9e6; font-size: 10.5px; font-weight: 600; font-family: var(--font-sans); }
.eco .eco-node-icon { color: var(--teal-300); }

.eco .eco-core {
  fill: url(#coreGrad);
  filter: drop-shadow(0 8px 22px rgba(197,165,95,0.35));
}
.eco .eco-core-ring {
  fill: none;
  stroke: rgba(197,165,95,0.5);
  stroke-width: 1.5;
  transform-origin: center;
  animation: eco-pulse 3.4s ease-out infinite;
}
@keyframes eco-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.eco .eco-core-label { fill: #fff; font-weight: 700; font-family: var(--font-sans); }
.eco .eco-core-sub { fill: var(--teal-300); font-family: var(--font-mono); }

.eco .eco-node { animation: eco-float 6s ease-in-out infinite; }
.eco .eco-node:nth-of-type(2n) { animation-delay: -2s; }
.eco .eco-node:nth-of-type(3n) { animation-delay: -4s; }
@keyframes eco-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .eco .eco-flow, .eco .eco-core-ring, .eco .eco-node { animation: none; }
  .eco .eco-flow { stroke-dasharray: 3 10; }
}

/* Fragmented vs federated comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare figure { margin: 0; }
.compare .compare-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.compare .compare-box svg { width: 100%; height: auto; display: block; }
.compare figcaption { margin-top: 0.9rem; }
.compare figcaption strong { display: block; color: var(--navy-800); }
.compare figcaption span { color: var(--text-muted); font-size: var(--step--1); }
.compare .tag-bad, .compare .tag-good {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--step--1); font-weight: 600;
  padding: 0.25rem 0.7rem; border-radius: 999px; margin-bottom: 0.9rem;
}
.compare .tag-bad { background: rgba(192,57,43,0.10); color: #a5342a; }
.compare .tag-good { background: rgba(210,188,114,0.14); color: #1f7d51; }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 150;
  max-width: 560px;
  margin-inline: auto;
  background: var(--navy-800);
  color: #d9e3ee;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.2rem 1.3rem;
}
.cookie-banner p { font-size: 0.92rem; color: #c4d2e0; }
.cookie-banner a { color: var(--teal-300); }
.cookie-banner .btn-row { margin-top: 0.9rem; }
.cookie-banner[hidden] { display: none; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.quote blockquote {
  margin: 0; font-size: var(--step-0); line-height: 1.5; color: var(--navy-800); font-weight: 500;
  /* padding-left is the gutter the opening mark hangs in — retune it if --qm-size changes. */
  position: relative; padding-left: 1.35rem;
  /* The two quotation marks are tuned from here only. --qm-rise MUST stay in rem
     (not em): the ::before resolves it against the blockquote's fluid font size and
     the ::after against its own 1.9rem, so an em value would put them at different
     heights. */
  --qm-size: 1.9rem;
  --qm-rise: 0.36rem;
}
.quote blockquote::before {
  content: "\201C"; position: absolute; left: 0; top: calc(-1 * var(--qm-rise));
  font-size: var(--qm-size); line-height: 1; color: var(--teal-500); font-weight: 700;
}
/* Closing mark. Unlike the opening one it is NOT absolutely positioned: it sits
   inline after the last word so it tracks the end of the text instead of floating
   in a corner. `height: 0` keeps it from stretching the last line box, and
   `vertical-align: top` + the same negative rise puts its glyph at exactly the
   height the opening mark sits at on the first line. */
.quote blockquote::after {
  content: "\201D"; display: inline-block; height: 0; vertical-align: top;
  margin-top: calc(-1 * var(--qm-rise)); margin-left: 0.05em;
  font-size: var(--qm-size); line-height: 1; color: var(--teal-500); font-weight: 700;
}
.quote figcaption { font-size: var(--step--1); color: var(--text-muted); margin-top: auto; }
.quote figcaption strong { display: block; color: var(--navy-800); font-size: 0.95rem; }
.on-dark .quote { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); box-shadow: none; }
.on-dark .quote blockquote { color: #fff; }
.on-dark .quote figcaption { color: #a9bccd; }
.on-dark .quote figcaption strong { color: var(--teal-300); }

/* ---------- Convergence diagram ---------- */
/* Many data inputs resolve into one dependable output. Shared with the TuraVera copy. */
.converge { width: 100%; max-width: 540px; margin-inline: auto; }
.converge svg { width: 100%; height: auto; overflow: visible; }
.converge .cv-src { fill: none; stroke: rgba(255, 255, 255, 0.20); stroke-width: 2.5; }
.converge .cv-flow {
  fill: none; stroke: #8aa0b5; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 3 12; animation: cv-dash 3s linear infinite;
}
@keyframes cv-dash { to { stroke-dashoffset: -60; } }
.converge .cv-trunk { fill: none; stroke: var(--teal-500); stroke-width: 9; stroke-linecap: round; }
.converge .cv-node { fill: var(--navy-900); stroke: var(--teal-400); stroke-width: 3; }
.converge .cv-merge { fill: var(--teal-500); filter: drop-shadow(0 6px 18px rgba(197,165,95, 0.4)); }
.converge .cv-ring {
  fill: none; stroke: rgba(197,165,95, 0.5); stroke-width: 2;
  transform-origin: 250px 200px; animation: cv-pulse 3.4s ease-out infinite;
}
@keyframes cv-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}
.converge .cv-label { fill: #9fb2c4; font-size: 15px; font-weight: 600; font-family: var(--font-sans); }
.converge .cv-label--strong { fill: #fff; font-size: 25px; opacity: 0.85; }
.converge .cv-tick { fill: var(--teal-300); font-size: 20px; font-weight: 500; font-family: var(--font-sans); }
/* The bottom-left data-type list is a quiet, wide watermark rather than a read label —
   large enough to span the diagram's width, but light and faint so it stays secondary
   to everything else. */
.converge .cv-tick--wide { font-size: 40px; font-weight: 400; opacity: 0.4; }

/* Output fan-out: three identical branches carrying the one validated record out to
   each channel. Same two-layer treatment as the input funnel (.cv-src/.cv-flow) —
   a solid pipe plus a lighter dashed line animating along it — so input and output
   read as mirror images of each other: data flows in, the same data flows out.
   Every branch is styled identically (colour, weight, dash, speed): the visual itself
   says "the same data reaches every channel", independent of the caption. This is the
   "garbage in, garbage out" symmetry — motion on both sides, but only the output side
   is uniform. */
.converge .cv-out { fill: none; stroke: var(--teal-500); stroke-width: 7; stroke-linecap: round; }
.converge .cv-out-flow {
  fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 3 12; animation: cv-dash 3s linear infinite;
}
.converge .cv-out-node { fill: var(--teal-400); filter: drop-shadow(0 4px 10px rgba(197,165,95, 0.35)); }
.converge .cv-out-label { fill: var(--teal-300); font-size: 20px; font-weight: 500; font-family: var(--font-sans); }

@media (prefers-reduced-motion: reduce) {
  .converge .cv-flow, .converge .cv-ring, .converge .cv-out-flow { animation: none; }
}

/* Authority / Operator / Passenger infographic — replaces the funnel/fan-out
   diagram above on the Elydium home page only; TuraVera's home page keeps the
   original .cv-* diagram unchanged, so both rule sets stay in this file.
   Three entities sit at the corners of a triangle, each pairwise relationship
   labelled along its edge, with timetable data as the shared record at the
   centre — the Elydium chevron mark sits inside an enlarged hub. Reuses the
   existing cv-dash keyframe for the spokes' animated white dashed overlay. */
.converge .ig-edge { fill: none; stroke: rgba(232,217,160, 0.35); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.converge .ig-spoke { fill: none; stroke: var(--teal-500); stroke-width: 8; stroke-linecap: round; }
.converge .ig-spoke-flow {
  fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 3 12; animation: cv-dash 3s linear infinite;
}
.converge .ig-node { fill: var(--navy-900); stroke: var(--teal-400); stroke-width: 4; }
.converge .ig-hub { fill: var(--navy-900); stroke: var(--teal-500); stroke-width: 3; filter: drop-shadow(0 6px 18px rgba(197,165,95, 0.45)); }
.converge .ig-entity { fill: #fff; font-size: 26px; font-weight: 700; font-family: var(--font-sans); text-anchor: middle; }
.converge .ig-edge-label { fill: var(--teal-300); font-size: 15px; font-weight: 600; font-family: var(--font-sans); text-anchor: middle; }
.converge .ig-head { fill: #fff; font-size: 32px; font-weight: 700; font-family: var(--font-sans); opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  .converge .ig-spoke-flow { animation: none; }
}

/* ---------- Scrollbars ---------- */
/* Standard properties: Firefox and Chromium 121+. `thin` is the only granularity
   Firefox exposes, so its width will not match the WebKit value exactly. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
/* WebKit / older Chromium. The transparent border + padding-box clip insets the
   thumb into a pill while keeping the full width as the grab target. */
::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- News ---------- */
/* Elydium-only block — the JourneyTwin and TuraVera copies of this stylesheet do not
   carry it. See "The design system is copied three times" in CLAUDE.md before copying
   any news markup to another site. */

/* Listing cards (news.html and the home-page teaser). Built on .card. The heading
   carries the link rather than wrapping the whole card, so the accessible name is the
   post title on its own — "descriptive link text", not "read more". */
.news-card {
  display: flex;
  flex-direction: column;
  /* Teal spine, matching the .note callout. Overrides .card's 1px left border. */
  border-left: 4px solid var(--teal-500);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.news-card:focus-within { border-color: var(--teal-500); }
/* Listing thumbnail — optional; a post without one just starts at the date.
   It bleeds to the card edge, so the negative margins cancel .card's 1.6rem padding
   (keep them in step if that padding ever changes). The inner radii are the card's
   radius minus each border width — 4px on the left spine, 1px elsewhere — so no
   sliver of card background shows through at the corners.
   The 3:2 box makes the image about half the card's height and keeps every card in
   the row identical regardless of the source ratio. */
.news-card .news-thumb {
  display: block;
  margin: -1.6rem -1.6rem 1.2rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 1px) 0 0;
}
.news-card .news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Escape hatch for artwork that must not be cropped — operator logos and the like,
   set per post with <meta name="news:thumb-fit" content="contain">. Most of the
   archive's thumbnails are already 3:2 and crop to nothing, so this is only needed
   for wide wordmarks (First Bus, Stagecoach, Traveline) and the supplier badges.
   White rather than tinted, so a padded logo still reads as a deliberate panel. */
.news-card .news-thumb--contain { background: var(--surface); }
.news-card .news-thumb--contain img { object-fit: contain; padding: 1.1rem; }
.news-card .news-date {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}
.news-card h3 { margin-bottom: 0.5rem; }
.news-card h3 a { color: var(--heading); text-decoration: none; }
.news-card h3 a:hover { color: var(--link); text-decoration: underline; }
.news-card p:last-child { margin-bottom: 0; color: var(--text-muted); }

/* Empty state, shown by the generator when there are no posts yet. */
.news-empty { color: var(--text-muted); }

/* The date line under a post's h1. It sits inside .page-hero, so it is on dark and
   takes the same muted blue as .breadcrumb rather than --text-muted. */
.page-hero .post-meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: #9fb2c4;
  margin: 0 0 1rem;
}

/* Article body. Plain HTML in, readable rhythm out — so a post needs no classes
   beyond the wrapper. */
.post-body p { margin: 0 0 1.15rem; }
.post-body h2 { font-size: var(--step-2); margin: 2.5rem 0 0.75rem; }
.post-body h3 { font-size: var(--step-1); margin: 2rem 0 0.6rem; }
.post-body ul, .post-body ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.post-body li + li { margin-top: 0.4rem; }
.post-body blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--teal-500);
  color: var(--ink-700);
  font-size: var(--step-1);
  line-height: 1.55;
}
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-body figure { margin: 2rem 0; }
/* A portrait image at full body width runs absurdly tall — a magazine cover at
   649x916 would be about 990px high. Cap and centre those instead. */
.post-body .figure--portrait { max-width: 340px; margin-inline: auto; }
.post-body figcaption { font-size: var(--step--1); color: var(--text-muted); margin-top: 0.5rem; }
.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }

/* ---------- Wordmark colour ---------- */
/* The "elydium" wordmark is HTML text, not SVG, so it stays real, selectable,
   screen-reader text. CLASSIC: gold, as in the original lockup, on the navy header
   and footer. The flat colour first is the fallback; the gradient only applies where
   background-clip:text is supported — without the @supports guard, a browser lacking
   it would render color:transparent and the wordmark would vanish. */
.site-header .brand > span,
.site-footer .brand > span { color: var(--teal-400); letter-spacing: 0.01em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-header .brand > span,
  .site-footer .brand > span {
    background: linear-gradient(100deg, var(--gold-dark) 0%, #e9d58f 55%, var(--gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Browsers drop backgrounds when printing, which would blank the clipped wordmark. */
@media print {
  .site-header .brand > span,
  .site-footer .brand > span { background: none; color: var(--navy-800); }
}

/* ==========================================================================
   CLASSIC IDENTITY OVERRIDES
   Everything below exists only in Elydium-Classic/. It restyles the rebrand
   layout into the original navy-and-gold identity. Kept together at the end,
   rather than threaded through the rules above, so the rest of this file stays
   diffable against Elydium/assets/css/styles.css.
   ========================================================================== */

/* ---- The navy stripe ----
   The original artwork sits on navy with a fine 16px horizontal banding, not a flat
   fill. Recreated as a translucent overlay so it composes over any navy gradient.
   Very low opacity on purpose: it should read as texture, never as lines. */
:root {
  --navy-stripe: repeating-linear-gradient(180deg,
      rgba(255,255,255,0.028) 0px, rgba(0,0,0,0.055) 8px, rgba(255,255,255,0.028) 16px);
}

/* ---- Headings in Quicksand ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ---- Navy surfaces: stripe in place of the rebrand's teal/blue glows ---- */
.hero::before {
  background:
    radial-gradient(55% 55% at 82% 22%, rgba(210,188,114,0.12), transparent 62%),
    var(--navy-stripe);
}
.page-hero::before { background: var(--navy-stripe); }
.cta-band::before {
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(210,188,114,0.10), transparent 60%),
    var(--navy-stripe);
}
.section--navy,
.site-footer {
  background-image: var(--navy-stripe), linear-gradient(160deg, var(--navy-800), var(--navy-900));
}

/* ---- Header on navy ----
   The gold lockup was drawn for navy; on the rebrand's cream header it washes out.
   The header deliberately does NOT carry .on-dark: tools/build-news.ps1 locates the
   header by the exact string <header class="site-header">, and adding a class would
   stop it syncing the news chrome. So its dark-surface styling is written out here. */
/* The app bar is a flat, darker navy (--navy-900) with NO stripe — the stripe is kept for
   the page's own navy surfaces (heroes, navy sections, CTA bands, footer), so the bar reads
   as chrome rather than content. */
.site-header {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(210, 188, 114, 0.22);
}
.nav-menu a { color: #d9e3ee; }
.nav-menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-menu a[aria-current] { color: #fff; }
.nav-menu a[aria-current]::after { background: var(--teal-400); }
.nav-toggle { border-color: rgba(255, 255, 255, 0.28); }
.nav-toggle svg { color: #fff; }
/* Header CTA: ghost button in pale gold on navy (10.5:1). */
.nav-cta .btn--primary {
  color: var(--teal-300);
  border-color: var(--teal-400);
}
.nav-cta .btn--primary:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 900px) {
  /* The collapsed mobile menu drops down from the app bar, so it matches it: flat, no stripe. */
  .nav-menu {
    background: var(--navy-900);
    border-bottom-color: rgba(210, 188, 114, 0.22);
  }
}

/* ---- The leaf mark ---- */
.brand .brand-mark { width: 36px; height: 36px; }
.brand span { padding-bottom: 3px; }
/* App-bar wordmark ~25% larger than the base .brand size (1.85rem -> 2.3rem). Set on the
   span, not .brand, so the footer wordmark and the leaf mark (sized in px) are unaffected. */
.site-header .brand > span { font-size: 2.3rem; line-height: 1; }

/* ---- Primary buttons: gold fill, navy text ----
   White on gold fails contrast at every stop of the gradient; navy passes at all of
   them (6.3:1 on the darker end). */
.btn--primary {
  background: linear-gradient(135deg, #e0cb85, var(--teal-500));
  color: var(--navy-800);
  box-shadow: 0 6px 16px rgba(170, 132, 68, 0.28);
}
.btn--primary:hover { color: var(--navy-800); box-shadow: 0 10px 22px rgba(170, 132, 68, 0.38); }

/* ---- Home-page infographic ----
   Solid-colour defaults for the strokes; index.html overrides the spokes, nodes and
   hub with the leaf's gold gradient from a <style> inside the SVG itself, because a
   url(#gradient) written in an external stylesheet does not resolve reliably across
   browsers. */
.converge .ig-entity, .converge .ig-edge-label, .converge .ig-head { font-family: var(--font-display); }
/* The platform page's pipeline diagram: labels in Quicksand too, as in the original navy artwork. */
.converge .cv-label, .converge .cv-tick, .converge .cv-out-label { font-family: var(--font-display); }
.converge .ig-hub { fill: var(--navy-900); }

/* ---- Footer tagline in pale gold, echoing the lockup's tagline line ---- */
.footer-about .footer-tagline { color: var(--teal-300); font-family: var(--font-display); font-weight: 600; }

/* ---- Cards on striped navy: flat and opaque ----
   The rebrand's translucent card fill (rgba white 4–5%) lets the section stripe show
   through, so striped cards sat on a striped field and the text was hard to read.
   Here cards are a flat, slightly lighter navy with a gold hairline; the stripe stays on
   the section behind them. Covers info cards (platform, what we do, about) and the
   testimonial cards in the about page's navy section. */
.section--navy .card,
.on-dark .quote {
  background: var(--navy-700);
  border-color: rgba(210, 188, 114, 0.22);
}