/* ==========================================================================
   Work With Dignity Foundation: site stylesheet
   Typeface: Gilroy (self-hosted in assets/fonts, weights 300–800)

   Class vocabulary (see index.html for live examples)
   Layout ....... .container(--narrow|--wide) .section(--tight|--flush-top|--rule|--sunk)
                  .band(--mark) .split > .split__main/.split__side(.split__sticky)
                  .grid(--2|--3|--4) .section-head > .section-head__title/.section-head__aside
   Type ......... .kicker(>.kicker__num) .lead .statement .display-xl .muted .prose(--dropcap)
                  .pullquote(>cite) .serif .mark
   Actions ...... .btn(--primary|--ghost|--light|--sm) .btn__arrow .btn-row .arrow-link
   Blocks ....... .page-hero(--band) .hero .orbit .print .figure--print .ribbon .numbered(--2|--4|--5)
                  .index-list .hairline(--2|--4) .stats(--single) .chain .timeline(--vertical)
                  .figure .plate .note .tag(--accent) .chips/.chip .empty .cta-strip
                  .people/.person .logo-wall/.logo-card .directory/.org .episode .video
                  .cycle .before-after .search-field .results
                  .router > .route  .route--feat .watch(--sm) .quiz (home dignity check)
                  .wall-wrap > .tally + .wall > .pcards/.pcard .hbar (Wall of Dignity)
                  .beliefs > .belief .spread (home belief) .journeys > .journey-card(--wide) > ol.journey-steps
                  FX: .fx-hero/.fx-glow .fx-words .fx-cards(--ring) > .fx-card .fx-chips .fx-ripple .fx-avatars
   Forms ........ .form-shell > form.form[data-form] + .form-success
                  .field(--full) .check .form-group(>legend) .form__alert .form__actions .hp
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Light.woff2") format("woff2"), url("../fonts/Gilroy-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Regular.woff2") format("woff2"), url("../fonts/Gilroy-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Medium.woff2") format("woff2"), url("../fonts/Gilroy-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-SemiBold.woff2") format("woff2"), url("../fonts/Gilroy-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-Bold.woff2") format("woff2"), url("../fonts/Gilroy-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/Gilroy-ExtraBold.woff2") format("woff2"), url("../fonts/Gilroy-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --paper: #F5F0E6;
  --surface: #FBF8F2;
  --sunk: #ECE5D6;
  --ink: #01272C;
  --ink-soft: #1F3C40;
  --muted: #4E5F5E;
  --rule: #D8D0BF;
  --line-strong: #8C8577;
  --accent: #B8351A;
  --accent-display: #E34321;
  --btn-bg: #B8351A;
  --btn-bg-hover: #982A13;
  --btn-ink: #FFFFFF;
  --error: #A8231A;
  --focus: #B8351A;
  --plate: #FFFFFF;
  --band: #01272C;
  --band-ink: #EAE4D6;
  --band-muted: #A9BCB8;
  --band-rule: rgba(234, 228, 214, 0.16);
  --band-accent: #F0643F;
  --highlight: #F9DD5A;
  --sky: #6AA9DC;

  /* Soft gradients: same palette, a warm accent glow + a cool sky glow */
  --grad-paper: radial-gradient(60% 55% at 0% 0%, rgba(227, 67, 33, 0.07), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(106, 169, 220, 0.12), transparent 70%);
  --grad-sunk: radial-gradient(55% 70% at 100% 0%, rgba(227, 67, 33, 0.08), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgba(255, 255, 255, 0.55), transparent 70%);
  --grad-band: radial-gradient(55% 80% at 100% 0%, rgba(240, 100, 63, 0.2), transparent 65%), radial-gradient(60% 90% at 0% 100%, rgba(106, 169, 220, 0.16), transparent 65%), linear-gradient(135deg, #01272C 0%, #053840 100%);
  --grad-card: linear-gradient(160deg, var(--surface) 0%, var(--paper) 100%);
  --yes: #2F7D4F;

  --font-display: "Gilroy", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Gilroy", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  --header-h: 72px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #071D20;
  --surface: #0C2A2E;
  --sunk: #0A2427;
  --ink: #EAE4D6;
  --ink-soft: #D2CBBB;
  --muted: #9FB3AF;
  --rule: #1D3F42;
  --line-strong: #52716F;
  --accent: #F0643F;
  --accent-display: #F0643F;
  --btn-bg: #C93D1C;
  --btn-bg-hover: #DB4A26;
  --btn-ink: #FFFFFF;
  --error: #FF8B78;
  --focus: #F0643F;
  --plate: #F5F0E6;
  --band: #0C2A2E;
  --band-ink: #EAE4D6;
  --band-muted: #9FB3AF;
  --band-rule: rgba(234, 228, 214, 0.12);
  --yes: #6BC48F;
  --grad-paper: radial-gradient(60% 55% at 0% 0%, rgba(240, 100, 63, 0.06), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(106, 169, 220, 0.07), transparent 70%);
  --grad-sunk: radial-gradient(55% 70% at 100% 0%, rgba(240, 100, 63, 0.07), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgba(106, 169, 220, 0.06), transparent 70%);
  --grad-band: radial-gradient(55% 80% at 100% 0%, rgba(240, 100, 63, 0.16), transparent 65%), radial-gradient(60% 90% at 0% 100%, rgba(106, 169, 220, 0.1), transparent 65%), linear-gradient(135deg, #0C2A2E 0%, #103A3F 100%);
  color-scheme: dark;
}


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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: clip;
  transition: background-color 0.25s ease, color 0.25s ease;
}

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

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.2rem, 1.55rem + 2.7vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; }
h2, .h2 { font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; }
h3, .h3 { font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: 0; }

/* Emphasis uses weight, never italics */
em, i { font-style: normal; font-weight: 700; }

/* Accent word with a hand-drawn brush underline, used sparingly */
.mark { position: relative; display: inline-block; color: var(--accent-display); }
.mark::after {
  content: "";
  position: absolute;
  left: -0.02em;
  right: -0.06em;
  bottom: -0.04em;
  height: 0.17em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9.6C31 6.1 70 3.9 111 3.6c30-.2 58 .7 86.5 3l-.9 3.6C170 8.8 143 8.3 115 8.4 76 8.6 38 10.4 4.1 13.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9.6C31 6.1 70 3.9 111 3.6c30-.2 58 .7 86.5 3l-.9 3.6C170 8.8 143 8.3 115 8.4 76 8.6 38 10.4 4.1 13.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
strong, b { font-weight: 700; }
address { }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
::selection { background: var(--accent-display); color: #fff; }

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

.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;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 1rem; color: var(--paper); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.container--mid { max-width: calc(60rem + 2 * var(--gutter)); }

.section { padding-block: var(--section); position: relative; background-image: var(--grad-paper); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--rule { border-top: 1px solid var(--rule); }
.section--sunk { background: var(--grad-sunk), var(--sunk); --cell-bg: var(--sunk); }
.section--plain { background-image: none; }

/* Deep teal band: re-maps tokens so every component works on it */
.band, .site-footer, .page-hero--band, .route--feat, .tally, .belief:hover, .belief:focus-within, .journey-card--wide {
  --ink: var(--band-ink);
  --ink-soft: var(--band-ink);
  --muted: var(--band-muted);
  --rule: var(--band-rule);
  --line-strong: rgba(234, 228, 214, 0.38);
  --accent: var(--band-accent);
  --accent-display: var(--band-accent);
  --surface: rgba(234, 228, 214, 0.05);
  --sunk: rgba(234, 228, 214, 0.06);
  --focus: var(--band-accent);
  --error: #FF8B78;
  --yes: #6BC48F;
  --cell-bg: var(--band);
  background: var(--grad-band);
  color: var(--band-ink);
  color-scheme: dark;
}
.band { position: relative; isolation: isolate; overflow: hidden; }
.band--mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -7rem;
  bottom: -9rem;
  width: clamp(18rem, 40vw, 34rem);
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.split__main { grid-column: span 7; min-width: 0; }
.split__side { grid-column: span 5; min-width: 0; }
.split--even > * { grid-column: span 6; }
.split--wide-side .split__main { grid-column: span 6; }
.split--wide-side .split__side { grid-column: span 6; }
.split--center { align-items: center; }
.split__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head__title { grid-column: 1 / span 8; }
.section-head__aside { grid-column: 9 / -1; color: var(--muted); }
.section-head--stack .section-head__title { grid-column: 1 / span 9; }

@media (max-width: 1099.98px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split > *, .split--even > *, .split--wide-side > * { grid-column: 1 / -1 !important; }
  .split__sticky { position: static; }
  .section-head__title, .section-head__aside { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Type helpers ---------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
.kicker__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42rem;
}
.muted { color: var(--muted); }
.serif { font-family: var(--font-display); font-weight: 500; }
.accent { color: var(--accent); }
.nowrap { white-space: nowrap; }

.statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.25rem + 2.35vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.statement--md { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; }
.statement em { color: var(--accent-display); font-weight: inherit; }
.statement > span { display: block; }

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 4.2vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.prose { max-width: 42rem; font-size: 1.0625rem; line-height: 1.7; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin-top: 2em; }
.prose h3 { margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); }
.prose--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.2em;
  line-height: 0.82;
  padding: 0.07em 0.09em 0 0;
  color: var(--accent-display);
}

.pullquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 54rem;
  text-wrap: balance;
}
.pullquote::before { content: ""; display: block; width: 2.75rem; height: 3px; margin-bottom: 1.25rem; background: var(--accent-display); }
.pullquote--rule::before { display: none; }
.pullquote p { margin: 0; }
.pullquote cite, .pullquote footer {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.pullquote--rule { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 2px solid var(--accent-display); }

/* ---------- Buttons & links ---------- */
.btn {
  --_bg: transparent;
  --_fg: var(--ink);
  --_bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  font: 600 0.95rem/1.15 var(--font-body);
  letter-spacing: 0.005em;
  text-decoration: none;
  text-align: center;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { color: var(--_fg); --_bd: var(--ink); }
.btn--primary { --_bg: var(--btn-bg); --_fg: var(--btn-ink); --_bd: var(--btn-bg); }
.btn--primary:hover { --_bg: var(--btn-bg-hover); --_bd: var(--btn-bg-hover); }
.btn--light { --_bg: var(--band-ink); --_fg: #01272C; --_bd: var(--band-ink); }
.btn--light:hover { --_bg: #FFFFFF; --_bd: #FFFFFF; --_fg: #01272C; }
.btn--sm { min-height: 2.5rem; padding: 0.6rem 1rem; font-size: 0.875rem; }
.btn[disabled] { opacity: 0.65; cursor: progress; }
.btn__arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2rem; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.2s, border-color 0.2s;
}
.arrow-link:hover { color: var(--accent); border-color: var(--accent); }
.arrow-link:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Header & navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s ease;
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 2.15rem; height: 2.15rem; flex: none; color: var(--accent-display); }
/* Header logo gently "breathes" — scales up and down on a loop */
.site-header .brand__mark { transform-origin: center; animation: brand-pulse 2.4s ease-in-out infinite; }
@keyframes brand-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .site-header .brand__mark { animation: none; } }
.brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.brand__name span + span { margin-top: 0.12rem; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  font: 500 0.95rem/1 var(--font-body);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav__trigger:hover, .nav__item.is-open > .nav__trigger { color: var(--accent); }
.nav__item.is-current > .nav__trigger { box-shadow: inset 0 -1px 0 var(--accent-display); }
.nav__chev { width: 0.65rem; height: 0.65rem; transition: transform 0.2s ease; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -0.4rem;
  min-width: 17.5rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(1, 39, 44, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; }
.nav__item.is-open > .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__link {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav__link:hover { background: var(--sunk); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav__link[aria-current="page"]::before { content: "— "; }
.nav__cta { display: none; }

.header-actions { display: flex; align-items: center; gap: 0.2rem; margin-left: 0.5rem; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { color: var(--accent); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.header-cta { margin-left: 0.6rem; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.nav-toggle { display: none; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 1.35rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1099.98px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: inline-grid; }
  /* The nav leaves the flow here, so the actions must push themselves to the right */
  .header-actions { margin-left: auto; }
  .nav {
    position: fixed;
    /* --nav-top is the header's real bottom edge (set by main.js; the topbar can sit above it) */
    inset: var(--nav-top, var(--header-h)) 0 0 0;
    z-index: 49;
    display: none;
    margin: 0;
    padding: 0.5rem var(--gutter) 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-top: 1px solid var(--rule);
  }
  .nav-open .nav { display: block; }
  .nav-open { overflow: hidden; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule); }
  .nav__item.is-current > .nav__trigger { box-shadow: none; color: var(--accent); }
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav__chev { width: 0.9rem; height: 0.9rem; }
  .nav__menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 1rem;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__menu::before { display: none; }
  .nav__item.is-open > .nav__menu { display: block; }
  .nav__link { padding: 0.6rem 0; font-size: 1.05rem; }
  .nav__link:hover { background: none; color: var(--accent); }
  .nav__cta { display: flex; margin-top: 2rem; }
  .nav__cta .btn { width: 100%; }
}
@media (max-width: 639.98px) {
  .header-cta { display: none; }
  .brand__name { font-size: 1rem; }
  .brand__mark { width: 1.9rem; height: 1.9rem; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding-block: clamp(3rem, 2rem + 4.5vw, 6rem) clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}
/* Light heroes get the paper glow; band heroes keep --grad-band from the band rule */
.page-hero:not(.page-hero--band) { background-image: var(--grad-paper); }
.page-hero--band { border-bottom: 0; position: relative; overflow: hidden; isolation: isolate; }
.page-hero--band.band--mark::after {
  content: ""; position: absolute; z-index: -1; right: -7rem; bottom: -9rem;
  width: clamp(18rem, 40vw, 34rem); aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat; opacity: 0.07; pointer-events: none;
}
.page-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  align-items: end;
}
.page-hero__title { grid-column: 1 / span 9; min-width: 0; }
.page-hero__aside { grid-column: 10 / -1; color: var(--muted); font-size: 0.95rem; min-width: 0; }
.page-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); }
.page-hero h1 em { color: var(--accent-display); }
.page-hero .lead { margin-top: 1.75rem; }
.page-hero .lead + .lead { margin-top: 1rem; }
.page-hero__media { grid-column: 10 / -1; }
.page-hero__sub { font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); margin-top: 1rem; color: var(--accent-display); font-weight: 500; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

@media (max-width: 899.98px) {
  .page-hero__title, .page-hero__aside, .page-hero__media { grid-column: 1 / -1; }
}

/* ---------- Home hero ---------- */
.hero { background-image: var(--grad-paper); overflow-x: clip; padding-block: clamp(0.5rem, 0.25rem + 0.75vw, 1rem) clamp(3.5rem, 2rem + 4.5vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero__text { grid-column: 1 / span 7; min-width: 0; }
.hero__media { grid-column: 8 / -1; min-width: 0; }
.hero .lead { margin-top: 1.75rem; }
.hero__sign {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-display);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.4;
}

/* ---------- Photo prints (paper, tape, slight tilt) ---------- */
.print {
  --tilt: 0deg;
  --tape: -4deg;
  position: relative;
  margin: 0;
  padding: 0.5rem 0.5rem 0;
  background: #FBF8F1;
  box-shadow: 0 1px 2px rgba(1, 39, 44, 0.16), 0 16px 30px -16px rgba(1, 39, 44, 0.5);
  transform: rotate(var(--tilt));
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.print img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(0.92) contrast(1.03); }
.print figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.45rem 0.1rem 0.55rem;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #1F3C40;
}
.print figcaption b { font-weight: 700; color: #B8351A; }
/* a strip of masking tape */
.print::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -0.6rem;
  left: 50%;
  width: 44%;
  height: 1.15rem;
  background: rgba(238, 224, 188, 0.82);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
  clip-path: polygon(3% 8%, 97% 0, 100% 45%, 96% 100%, 2% 92%, 0 52%);
  transform: translateX(-50%) rotate(var(--tape));
}
[data-theme="dark"] .print { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 34px -16px rgba(0, 0, 0, 0.75); }

/* Framed feature photo with two pieces of tape */
.figure--print { position: relative; }
.figure--print img { padding: 0.6rem; background: #FBF8F1; box-shadow: 0 1px 2px rgba(1, 39, 44, 0.14), 0 22px 40px -22px rgba(1, 39, 44, 0.55); transform: rotate(-1.2deg); }
.figure--print::before,
.figure--print::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -0.7rem;
  width: 22%;
  height: 1.3rem;
  background: rgba(238, 224, 188, 0.82);
  clip-path: polygon(3% 8%, 97% 0, 100% 45%, 96% 100%, 2% 92%, 0 52%);
}
.figure--print::before { left: 8%; transform: rotate(-7deg); }
.figure--print::after { right: 10%; transform: rotate(5deg); }
.figure--print figcaption { margin-top: 1.25rem; }
/* Home statement photo: tilts the other way to the hero prints */
.statement-figure img { transform: rotate(1.2deg); }
@media (max-width: 899.98px) { .statement-figure { max-width: 34rem; margin-top: 0.5rem; } }

/* ---------- Hero orbit: four prints circling a stamp ---------- */
.orbit {
  --spin: 70s;
  position: relative;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1;
  margin-inline: auto;
}
.orbit__track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--line-strong); }
.orbit__track ellipse { fill: none; stroke: currentColor; stroke-width: 0.28; stroke-linecap: round; }
.orbit__track ellipse + ellipse { stroke-dasharray: 0.6 1.8; opacity: 0.8; }
.orbit__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30%;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%) rotate(-8deg);
}
.orbit__hub-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: orbit-spin 40s linear infinite reverse; }
.orbit__hub-text text { font-family: var(--font-body); font-size: 7.4px; font-weight: 700; letter-spacing: 0.08em; fill: var(--ink); }
.orbit__hub-mark { width: 36%; height: 36%; color: var(--accent-display); }
.orbit__ring { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; animation: orbit-spin var(--spin) linear infinite; }
.orbit__slot { position: absolute; width: 30%; }
.orbit__slot:nth-child(1) { left: 12.4%; top: 10.9%; }
.orbit__slot:nth-child(2) { left: 57.6%; top: 10.9%; }
.orbit__slot:nth-child(3) { left: 57.6%; top: 56.1%; }
.orbit__slot:nth-child(4) { left: 12.4%; top: 56.1%; }
.orbit__spin { animation: orbit-spin var(--spin) linear infinite reverse; }
.orbit:hover .orbit__ring,
.orbit:hover .orbit__spin,
.orbit:hover .orbit__hub-text { animation-play-state: paused; }
.orbit__slot:hover { z-index: 3; }
.orbit__slot:hover .print { transform: rotate(0deg) scale(1.1); box-shadow: 0 2px 4px rgba(1, 39, 44, 0.2), 0 28px 44px -18px rgba(1, 39, 44, 0.6); }
.js .orbit .print { animation: print-in 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes print-in { from { opacity: 0; scale: 0.75; translate: 0 1.25rem; } }
@media (prefers-reduced-motion: reduce) {
  .orbit__ring, .orbit__spin, .orbit__hub-text, .js .orbit .print { animation: none; }
}

@media (min-width: 900px) {
  .hero__media .orbit { width: 114%; max-width: 40rem; margin-left: -2%; }
}
@media (max-width: 899.98px) {
  .hero__text, .hero__media { grid-column: 1 / -1; }
  .hero__media { padding-block: 1rem 0.5rem; }
  .orbit { max-width: 28rem; }
}
/* Hero CTAs: full labels on desktop, short labels side by side on phones */
.btn__short { display: none; }

/* Mobile CTA dock: fixed bottom bar, slides up once the hero CTAs leave the viewport */
.cta-dock { display: none; }

@media (max-width: 639.98px) {
  .hero__cta { flex-wrap: nowrap; gap: 0.6rem; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; gap: 0.45rem; white-space: nowrap; }
  .hero__cta .btn__long { display: none; }
  .hero__cta .btn__short { display: inline; }

  .cta-dock {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 24px rgba(1, 39, 44, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .cta-dock[hidden] { display: none; }
  .cta-dock.is-shown { transform: none; visibility: visible; transition: transform 0.3s var(--ease), visibility 0s; }
  .cta-dock .btn { min-height: 2.9rem; padding-inline: 0.75rem; gap: 0.45rem; white-space: nowrap; }
  .has-cta-dock .site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 639.98px) and (prefers-reduced-motion: reduce) {
  .cta-dock, .cta-dock.is-shown { transition: none; }
}

@media (max-width: 639.98px) {
  .print { padding: 0.3rem 0.3rem 0; }
  .print figcaption { font-size: 0.6rem; padding: 0.3rem 0 0.4rem; gap: 0.25rem; }
  .print::before { top: -0.45rem; height: 0.85rem; }
  .orbit__hub-text text { font-size: 7.8px; }
}

/* ---------- Ribbon (slow marquee) ---------- */
.ribbon { overflow: hidden; border-block: 1px solid var(--rule); padding-block: 1.15rem; }
.ribbon__track { display: flex; width: max-content; animation: ribbon 70s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0;
  padding: 0 2.25rem 0 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  white-space: nowrap;
}
.ribbon__group li { display: flex; align-items: center; gap: 2.25rem; }
.ribbon__group li::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
}
@keyframes ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; width: auto; }
  .ribbon__group { flex-wrap: wrap; white-space: normal; padding-inline: var(--gutter); row-gap: 0.5rem; }
  .ribbon__group[aria-hidden="true"] { display: none; }
}

/* ---------- Numbered columns ---------- */
.numbered {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.numbered--2 { --cols: 2; }
.numbered--4 { --cols: 4; }
.numbered--5 { --cols: 5; }
.numbered > li { padding: 1.35rem 0 2.25rem; border-top: 1px solid var(--ink); min-width: 0; }
.numbered__num {
  display: block;
  margin-bottom: 1.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.5rem);
  line-height: 1;
  color: var(--accent-display);
  font-variant-numeric: lining-nums;
}
.numbered h3 { margin-bottom: 0.65rem; }
.numbered p { color: var(--muted); }
.numbered--compact .numbered__num { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.9rem; }

@media (max-width: 1099.98px) { .numbered--5, .numbered--4 { --cols: 3; } }
@media (max-width: 899.98px) { .numbered, .numbered--5, .numbered--4 { --cols: 2; } }
@media (max-width: 639.98px) { .numbered, .numbered--2, .numbered--5, .numbered--4 { --cols: 1; } .numbered > li { padding-bottom: 1.75rem; } }

/* ---------- Index list (rows) ---------- */
.index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.index-list > li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 0.75rem 2rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.index-list__num { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--accent); }
.index-list__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.2; letter-spacing: -0.012em; }
.index-list__text { color: var(--muted); }
.index-list__text > * + * { margin-top: 0.6rem; }
.index-list--two > li { grid-template-columns: 4.5rem minmax(0, 1fr); }
@media (max-width: 767.98px) {
  .index-list > li { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .index-list__text { grid-column: 2; }
}

/* ---------- Hairline grid ---------- */
.hairline {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.hairline--2 { --cols: 2; }
.hairline--4 { --cols: 4; }
.hairline > * { padding: clamp(1.5rem, 3vw, 2.5rem); min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hairline h3 { margin-bottom: 0.75rem; }
.hairline p { color: var(--muted); }
.hairline__num { display: block; margin-bottom: 1.25rem; font-family: var(--font-display); font-weight: 600; color: var(--accent); font-size: 1.1rem; }
@media (max-width: 1099.98px) { .hairline--4 { --cols: 2; } }
@media (max-width: 899.98px) { .hairline { --cols: 2; } }
@media (max-width: 639.98px) { .hairline, .hairline--2, .hairline--4 { --cols: 1; } }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); min-width: 0; }
.stat:first-child { padding-left: 0; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label { display: block; margin-top: 0.85rem; color: var(--muted); font-size: 0.95rem; }
.stats--single { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
.stats--compact .stat { padding-block: 0.4rem; }
.stats--compact .stat__num { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.stats--compact .stat__label { margin-top: 0.25rem; font-size: 0.85rem; }
.section--snug { padding-block: clamp(2.75rem, 1.9rem + 2.8vw, 4.25rem); }
.section--snug .section-head--compact { margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.section--snug .section-head--compact .kicker { margin-bottom: 0.75rem; }
@media (max-width: 899.98px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; }
  .stats--single { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Chain (A → B → C) ---------- */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.45;
}
.chain li { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.chain li + li::before { content: "\2192"; font-family: var(--font-body); color: var(--accent-display); }

/* ---------- Timeline / stepper ---------- */
.timeline {
  --steps: 5;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline--4 { --steps: 4; }
.timeline > li { position: relative; padding-top: 3rem; min-width: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  top: 0.8rem;
  left: 0;
  right: -1.75rem;
  height: 1px;
  background: var(--line-strong);
}
.timeline > li:last-child::before { right: 0; }
.timeline > li::after {
  content: "";
  position: absolute;
  top: calc(0.8rem - 4px);
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--accent-display);
  border-radius: 50%;
}
.timeline__num {
  position: absolute;
  top: 0;
  left: 1.25rem;
  padding: 0 0.5rem;
  background: var(--cell-bg, var(--paper));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--accent);
}
.timeline h3 { font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); margin-bottom: 0.6rem; }
.timeline p { color: var(--muted); font-size: 1rem; }
.timeline__arrow { display: none; }

.timeline--vertical, .timeline--vertical.timeline--4 { grid-template-columns: minmax(0, 1fr); gap: 0; }
.timeline--vertical > li { padding: 0 0 2.25rem 3.25rem; }
.timeline--vertical > li::before { top: 0.4rem; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
.timeline--vertical > li:last-child::before { display: none; }
.timeline--vertical > li::after { top: 0.4rem; }
.timeline--vertical .timeline__num { position: static; display: block; padding: 0; background: none; margin-bottom: 0.2rem; }

@media (max-width: 899.98px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .timeline > li { padding: 0 0 2rem 3.25rem; }
  .timeline > li::before { top: 0.4rem; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; }
  .timeline > li:last-child::before { display: none; }
  .timeline > li::after { top: 0.4rem; }
  .timeline__num { position: static; display: block; padding: 0; background: none; margin-bottom: 0.2rem; }
}

/* ---------- Before → after rows ---------- */
.before-after { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.before-after li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
.before-after__from { color: var(--muted); }
.before-after__arrow { color: var(--accent-display); text-align: center; }
.before-after__to { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
@media (max-width: 639.98px) {
  .before-after li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .before-after__from { grid-column: 1 / -1; }
}

/* ---------- Figures ---------- */
.figure { margin: 0; }
.figure img { width: 100%; object-fit: cover; background: var(--sunk); }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 3 / 2; }
.figure--cinema img { aspect-ratio: 21 / 9; }
.figure figcaption {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.85rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}
.figure figcaption::before { content: ""; flex: none; width: 1.5rem; height: 1px; margin-top: 0.7em; background: var(--accent-display); }
.plate { background: var(--plate); border: 1px solid var(--rule); padding: clamp(1rem, 3vw, 2rem); }
.plate img { background: transparent; mix-blend-mode: multiply; }
@media (max-width: 639.98px) { .figure--cinema img { aspect-ratio: 4 / 3; } }

/* ---------- Small components ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.tag--accent { color: var(--accent); border-color: currentColor; }

.note {
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent-display);
  font-size: 0.95rem;
  line-height: 1.6;
}
.note h3, .note__title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 0 0 0.5rem; }
.note p { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  font: 500 0.9rem/1.2 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-display); }
span.chip { cursor: default; }
span.chip:hover { border-color: var(--line-strong); }

.empty {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  align-items: end;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink);
}
.empty__text { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); line-height: 1.18; letter-spacing: -0.015em; margin: 0; }
.empty__aside { color: var(--muted); }
@media (max-width: 767.98px) { .empty { grid-template-columns: minmax(0, 1fr); } }

.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--ink);
}
.cta-strip__text { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0; max-width: 40rem; }
.cta-strip .btn-row { margin-top: 0; }
.cta-strip--plain { border-block: 0; padding-block: 0; }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 3rem clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.person { display: flex; flex-direction: column; min-width: 0; }
.person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--sunk);
  filter: grayscale(0.2) contrast(1.02);
  transition: filter 0.4s ease;
}
.person:hover .person__photo { filter: none; }
.person__monogram {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--sunk);
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 2.4rem + 2vw, 4rem);
  letter-spacing: -0.02em;
  color: var(--accent-display);
}
.person__name { margin-top: 1.1rem; font-size: 1.25rem; line-height: 1.15; }
.person__role { margin-top: 0.4rem; font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--accent); }
.person__bio { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.person details { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
.person summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--ink); list-style: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.person summary::-webkit-details-marker { display: none; }
.person summary::after { content: "+"; font-family: var(--font-body); color: var(--accent); }
.person details[open] summary::after { content: "\2212"; }
.person details p { margin-top: 0.6rem; }
.person__link { margin-top: auto; padding-top: 1rem; font-size: 0.875rem; }
.person__link a { font-weight: 600; }
.people-group + .people-group { margin-top: clamp(4rem, 8vw, 6.5rem); }
.people-group__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: end; padding-bottom: 1.25rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--ink); }
.people-group__head p { color: var(--muted); }
@media (max-width: 767.98px) { .people-group__head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Logo wall ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.logo-card { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.logo-card__logo { display: grid; place-items: center; height: 8rem; margin-bottom: 1rem; padding: 1.25rem; background: var(--plate); border: 1px solid var(--rule); }
.logo-card__logo img { max-width: 78%; max-height: 5rem; width: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.85; transition: filter 0.3s ease, opacity 0.3s ease; }
.logo-card:hover .logo-card__logo img, .logo-card:focus-within .logo-card__logo img { filter: none; opacity: 1; }
.logo-card h3 { font-size: 1.2rem; }
.logo-card p { color: var(--muted); font-size: 0.95rem; }
.logo-card .arrow-link { margin-top: auto; align-self: flex-start; font-size: 0.9rem; }
@media (max-width: 899.98px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .logo-wall { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Directory (organisations) ---------- */
.directory { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.org {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.5fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.org[hidden] { display: none; }
.org__name { font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); line-height: 1.15; }
.org__place { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }
.org__place svg { width: 0.95rem; height: 0.95rem; color: var(--accent-display); }
.org__label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.org__text { font-size: 0.975rem; color: var(--ink-soft); }
.org__text--tbc { color: var(--muted); }
@media (max-width: 899.98px) {
  .org { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .org > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 559.98px) { .org { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Podcast episode & video ---------- */
.episode {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.episode:hover { color: inherit; }
.episode__thumb { position: relative; }
.episode__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sunk); }
.episode__meta { font-size: 0.875rem; font-weight: 600; color: var(--accent); margin-bottom: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.episode__title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem); line-height: 1.12; margin-bottom: 1.25rem; }
.episode:hover .episode__title { color: var(--accent); }
@media (max-width: 767.98px) { .episode { grid-template-columns: minmax(0, 1fr); } }

.play-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(1, 39, 44, 0.86);
  border-radius: var(--radius);
}
.play-badge svg { width: 0.85rem; height: 0.85rem; }

.video { position: relative; aspect-ratio: 16 / 9; background: #01272C; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.3s; }
.video__poster:hover img { opacity: 1; }
.video__poster .play-badge { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); padding: 0.9rem 1.2rem; font-size: 1rem; }
.video__poster:hover .play-badge { background: var(--btn-bg); }

/* ---------- Vicious cycle diagram ---------- */
.cycle { display: grid; place-items: center; }
.cycle__svg { width: 100%; max-width: 38rem; height: auto; overflow: visible; }
.cycle__svg .cycle__ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.cycle__svg .cycle__node { fill: var(--surface); stroke: var(--accent-display); stroke-width: 1.5; }
.cycle__svg .cycle__title { font-family: var(--font-display); font-size: 17px; font-weight: 500; fill: var(--ink); }
.cycle__svg .cycle__sub { font-family: var(--font-body); font-size: 12px; fill: var(--muted); }
.cycle__svg .cycle__centre { font-family: var(--font-display); font-weight: 600; font-size: 21px; fill: var(--accent-display); }
.cycle__svg .cycle__arrow { fill: none; stroke: var(--accent-display); stroke-width: 1.5; }
.cycle__list { display: none; margin: 0; padding: 0; list-style: none; width: 100%; max-width: 24rem; }
.cycle__list li { position: relative; padding: 0 0 1.75rem 2.25rem; }
.cycle__list li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.85rem; height: 0.85rem; border: 1.5px solid var(--accent-display); border-radius: 50%; }
.cycle__list li:not(:last-child)::after { content: "\2193"; position: absolute; left: 0.12rem; bottom: 0.25rem; color: var(--accent-display); font-size: 0.85rem; }
.cycle__list strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.cycle__list span { color: var(--muted); font-size: 0.95rem; }
.cycle__loop { color: var(--muted); font-weight: 500; font-family: var(--font-display); font-size: 1.1rem; }
@media (max-width: 639.98px) {
  .cycle__svg { display: none; }
  .cycle__list { display: block; }
}

/* ---------- Search ---------- */
.search-field { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid var(--ink); }
.search-field svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--muted); }
.search-field input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.search-field input::placeholder { color: var(--muted); opacity: 0.6; }
.search-field input:focus { outline: none; }
.search-field:focus-within { border-color: var(--accent); }
.results { margin: 0; padding: 0; list-style: none; }
.results li { border-bottom: 1px solid var(--rule); }
.results a { display: block; padding: 1.5rem 0; text-decoration: none; color: inherit; }
.results a:hover .results__title { color: var(--accent); }
.results__section { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.results__title { display: block; margin-top: 0.3rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.results__excerpt { display: block; margin-top: 0.4rem; color: var(--muted); }
.results mark { background: color-mix(in srgb, var(--highlight) 55%, transparent); color: inherit; padding: 0 0.1em; }
.results-meta { margin-top: 1.25rem; font-size: 0.95rem; color: var(--muted); }

/* ---------- Forms ---------- */
.form-shell { position: relative; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.form[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field--full, .form__actions, .form__alert, .check, .form-group, .form__intro { grid-column: 1 / -1; }
.field[hidden] { display: none; }
.field > label, .field__label { font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.req { color: var(--accent); margin-left: 0.15rem; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.field input[type="file"] { font-size: 0.95rem; color: var(--muted); padding: 0.5rem 0; }
.field input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.6rem 1rem;
  font: 600 0.875rem var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.field__hint { font-size: 0.85rem; color: var(--muted); }
.pledge-photo__row { display: flex; align-items: center; gap: 1rem; }
.pledge-photo__row > div { min-width: 0; flex: 1; }
.pledge-photo__preview { flex: none; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; overflow: hidden; color: var(--line-strong); background: var(--sunk); border: 2px dashed var(--line-strong); border-radius: 50%; }
.pledge-photo__preview svg { width: 2rem; height: 2rem; }
.pledge-photo__preview.has-photo { border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent-display); }
.pledge-photo__preview img { width: 100%; height: 100%; object-fit: cover; }
.pledge-photo .field__hint { margin: 0.4rem 0 0; }
.field__error { margin: 0; font-size: 0.85rem; font-weight: 500; color: var(--error); }
.is-invalid input:not([type="checkbox"]), .is-invalid select, .is-invalid textarea { border-color: var(--error) !important; }

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.8rem; align-items: start; font-size: 0.975rem; line-height: 1.5; }
.check input { width: 1.2rem; height: 1.2rem; margin: 0.18rem 0 0; accent-color: var(--btn-bg); cursor: pointer; }
.check label { cursor: pointer; }
.check .field__error { grid-column: 2; }

.form-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-group > .form { clear: both; margin-top: 0; padding-top: 1.25rem; }
.form-group legend { float: left; width: 100%; line-height: 1.2; padding: 0; display: flex; align-items: baseline; gap: 0.75rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; }
.form-group legend span { font-weight: 600; font-size: 1rem; color: var(--accent); }
.form-group + .form-group { margin-top: 1.25rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); }

.form__alert {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  border-left: 2px solid var(--error);
  background: color-mix(in srgb, var(--error) 9%, transparent);
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.form__fineprint { font-size: 0.85rem; color: var(--muted); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-card { padding: clamp(1.5rem, 4vw, 3rem); background: var(--grad-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.form-card--certificate { outline: 1px solid var(--rule); outline-offset: -10px; padding: clamp(2rem, 5vw, 3.75rem); }
.form-card__title { margin-bottom: 0.75rem; }
.form-card__intro { color: var(--muted); margin-bottom: 2rem; }

/* ---------- Join CTA (home): bobbing faces + pledge button ---------- */
.join-cta { display: flex; flex-direction: column; }
/* Homepage: the join card stands alone, centred and a little larger */
.join-solo { max-width: 52rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.join-solo .join-cta { padding: clamp(1.75rem, 4.5vw, 3.25rem); padding-bottom: clamp(6rem, 12vw, 8rem); }
.join-solo .form-card__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; }
.join-solo .form-card__intro { max-width: 40rem; font-size: 1.05rem; }
.join-solo .join-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 639.98px) { .join-solo .join-points { grid-template-columns: minmax(0, 1fr); } }
.join-cta .form-card__intro { margin-bottom: 1.5rem; }
.join-points__label { margin: 0 0 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.join-points { margin: 0; padding: 0; list-style: none; counter-reset: jp; border-top: 1px solid var(--rule); }
.join-points li {
  counter-increment: jp;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.join-points li::before {
  content: counter(jp, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 1.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.join-points li:hover { color: var(--accent); }
.join-points li:hover::before { background: var(--btn-bg); color: var(--btn-ink); }
.join-cta__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: auto;
  padding-top: 1.75rem;
}
.join-cta__people { min-width: 0; }
@media (max-width: 479.98px) { .join-faces li:nth-child(n+7) { display: none; } }
.join-faces {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.75rem 0 0 0.6rem;
  list-style: none;
}
.join-faces li {
  position: relative;
  flex: none;
  width: 3.1rem;
  aspect-ratio: 1;
  margin-left: -0.6rem;
  overflow: hidden;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--sunk);
  box-shadow: 0 10px 18px -10px rgba(1, 39, 44, 0.55);
  animation: face-bob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.22s);
  transition: scale 0.25s var(--ease);
}
.join-faces li:nth-child(even) { width: 2.7rem; }
.join-faces li:nth-child(3n) { width: 3.5rem; }
.join-faces li:hover { z-index: 2; scale: 1.2; }
.join-faces img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--x, 50%) var(--y, 30%);
  transform: scale(var(--z, 1));
  transform-origin: var(--x, 50%) var(--y, 30%);
}
@keyframes face-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.join-cta__count { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--muted); }
.join-cta__count b { color: var(--ink); }

/* Faint drifting rows of faces behind the card (rows built by main.js [data-face-wall]) */
.join-cta { position: relative; isolation: isolate; overflow: hidden; }
.join-cta .face-wall { position: absolute; inset: 0; z-index: -1; display: grid; align-content: end; gap: 0.5rem; padding-bottom: 0.5rem; overflow: hidden; pointer-events: none; }
.join-cta .face-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper) 30%, color-mix(in srgb, var(--paper) 88%, transparent) 60%, color-mix(in srgb, var(--paper) 70%, transparent) 100%);
}
.join-cta .face-row { display: flex; gap: 0.5rem; width: max-content; animation: face-drift var(--dur, 90s) linear infinite; }
.join-cta .face-row:nth-child(even) { animation-direction: reverse; }
@keyframes face-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.join-cta .face { flex: none; width: 3.75rem; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--sunk); }
.join-cta .face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--x, 50%) var(--y, 30%);
  transform: scale(var(--z, 1));
  transform-origin: var(--x, 50%) var(--y, 30%);
  filter: grayscale(1);
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .join-faces li, .join-cta .face-row { animation: none; }
}

.form-success { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); border: 1px solid var(--rule); border-top: 2px solid var(--accent-display); border-radius: var(--radius-lg); }
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success h3 { margin-bottom: 0.6rem; }
.form-success p { color: var(--muted); }
.form-success .btn { margin-top: 1.5rem; }
.form-success__status { margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); }

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

/* ---------- Multi-step forms ---------- */
.stepper {
  --steps: 3;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.stepper li { position: relative; padding-top: 2.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
.stepper li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.stepper li::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 2.1rem;
  right: 0;
  height: 1px;
  background: var(--line-strong);
  transition: background-color 0.25s ease;
}
.stepper li:last-child::after { display: none; }
.stepper__label { display: block; font-weight: 600; color: inherit; }
.stepper__hint { display: block; margin-top: 0.15rem; font-size: 0.8rem; }
.stepper li[aria-current="step"] { color: var(--ink); }
.stepper li[aria-current="step"]::before { color: #fff; background: var(--btn-bg); border-color: var(--btn-bg); }
.stepper li.is-done::before { content: "\2713"; font-family: var(--font-body); color: var(--accent); border-color: var(--accent); }
.stepper li.is-done::after { background: var(--accent); }

.form-steps[hidden] { display: none; }
.form-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-step[hidden] { display: none; }
.form-step__title {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.form-step__title:focus { outline: none; }
.form-step__title span { font-weight: 600; font-size: 1rem; color: var(--accent); }
.form-step > .form, .form-step > .form-step__body { clear: both; }
.form-step__quote {
  clear: both;
  margin: 0 0 1.5rem;
  padding: 1.25rem 0 1.25rem 1.25rem;
  border-left: 2px solid var(--accent-display);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.35;
}
.form-step__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.form-step__nav > :only-child { margin-left: auto; }
.form-step .form__alert { margin-top: 1.25rem; }

/* Generated certificate (take-the-pledge) */
.cert-image { display: block; width: 100%; height: auto; margin: 1.25rem 0 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 24px 48px -30px rgba(1, 39, 44, 0.55); background: var(--sunk); }
.cert-image[hidden], .form-success [data-certificate][hidden] { display: none; }
.cert-reg { margin: 0 0 1rem; font-size: 0.88rem; color: var(--muted); }
.cert-reg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cert-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cert-actions [hidden], .cert-share[hidden] { display: none; }
.cert-share { margin-top: 0.85rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.cert-share__label { margin: 0 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cert-share__links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cert-share__links a, .cert-share__links button { padding: 0.45rem 0.85rem; font: 600 0.85rem var(--font-body); color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; cursor: pointer; }
.cert-share__links a:hover, .cert-share__links button:hover { color: #FFFFFF; background: var(--btn-bg); border-color: var(--btn-bg); }
.cert-share__status { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--muted); }
.cert-share__status:empty { display: none; }
.cert-preview {
  margin: 1.5rem 0 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: -8px;
}
.cert-preview .cert-preview__label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.form-card .form-success { padding: 0; background: none; border: 0; }
.cert-preview .cert-preview__name {
  margin: 0.9rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cert-preview .cert-preview__line { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-soft); }
.cert-preview__date { margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 479.98px) {
  .stepper__hint { display: none; }
  .stepper li { font-size: 0.8rem; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -8rem;
  top: -6rem;
  width: clamp(18rem, 42vw, 36rem);
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.footer__tagline {
  margin: 0;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-weight: 800;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.footer__tagline em { color: var(--accent-display); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr);
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__about p { margin-top: 1.25rem; max-width: 22rem; color: var(--muted); font-size: 0.975rem; }
.footer__heading { margin: 0 0 1.1rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.footer__links { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; font-size: 0.975rem; }
.footer__links a, .footer__contact a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--ease), color 0.2s; }
.footer__links a:hover, .footer__contact a:hover { background-size: 100% 1px; color: var(--accent); }
.footer__links a[aria-current="page"] { color: var(--accent); }
.footer__contact { display: grid; gap: 0.85rem; font-size: 0.975rem; }
.footer__contact span { color: var(--muted); }
.footer__social { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; font-weight: 600; }
.footer__social a { text-decoration: none; }
.footer__social a:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--muted);
}
.footer__theme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  font: 500 0.875rem var(--font-body);
  color: var(--ink);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.footer__theme:hover { border-color: var(--ink); }
.footer__theme svg { width: 1rem; height: 1rem; }
@media (max-width: 999.98px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Find your way (router) ---------- */
/* Compact section head for the home router + dignity check */
.section-head--compact { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.section-head--compact .kicker { margin-bottom: 0.9rem; }
.section-head--compact h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.section-head--compact .section-head__aside { margin: 0; font-size: 0.92rem; }

.router {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.router .route { min-height: 13rem; }
.router .route__text { max-width: none; padding-right: 2.5rem; }
/* Router + check card sections share one paper background so there is no seam between them */
.section-group { background-image: var(--grad-paper); }
.route {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon text" "meta meta";
  align-content: space-between;
  gap: 1rem 0.85rem;
  min-height: 9rem;
  padding: 1.15rem 1.25rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--grad-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.2s ease, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
a.route:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(1, 39, 44, 0.45); }
/* Route photo: sits on the right, fades into the card from the left */
.route__img {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 40%, #000 85%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 40%, #000 85%);
  opacity: 0.85;
  pointer-events: none;
  transition: transform 0.5s var(--ease), opacity 0.3s ease;
}
a.route:hover .route__img { transform: scale(1.05); opacity: 1; }
.route__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--accent);
  background: var(--sunk);
  border-radius: var(--radius);
}
.route__icon svg { width: 1.2rem; height: 1.2rem; }
.route__text { grid-area: text; display: grid; gap: 0.3rem; max-width: 12rem; }
.route__label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.route__title { margin: 0; font: 700 1rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.route__go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ease);
}
a.route:hover .route__go { color: var(--btn-ink); background: var(--btn-bg); border-color: var(--btn-bg); transform: translateX(2px); }
.route__meta { grid-area: meta; align-self: end; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.route__meta li {
  padding: 0.22rem 0.5rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}

/* Featured card: full-width teal band — intro + stopwatch on the left, questions + CTA on the right */
.route--feat {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "head watch mini"
    "desc watch mini"
    "desc watch cta"
    "desc watch meta";
  align-content: center;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--band-ink);
  background: var(--grad-band);
  border-color: var(--band);
}
.route--feat::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5rem;
  bottom: -6rem;
  width: 18rem;
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.route__head { grid-area: head; display: grid; gap: 0.6rem; align-self: end; }
.route--feat .route__label { color: var(--accent); }
.route--feat .route__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.route__desc { grid-area: desc; margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.route--feat .watch { grid-area: watch; align-self: center; }
.route__mini {
  grid-area: mini;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.85rem 0;
  list-style: none;
  border-block: 1px solid var(--rule);
  counter-reset: rq;
}
.route__mini li { counter-increment: rq; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; transition: color 0.2s ease; }
.route__mini li::before {
  content: counter(rq, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.route__mini li:hover { color: var(--accent); }
.route__mini li:hover::before { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.route__cta { grid-area: cta; }
.route__cta .btn { min-height: 2.75rem; padding: 0.7rem 1.2rem; font-size: 0.9rem; }
.btn__icon { width: 1.05rem; height: 1.05rem; flex: none; }

@media (max-width: 1099.98px) {
  .router { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .router .route { min-height: 10rem; }
}
@media (max-width: 899.98px) {
  .route--feat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head watch" "desc watch" "mini mini" "cta cta" "meta meta"; }
}
@media (max-width: 639.98px) {
  .router { grid-template-columns: minmax(0, 1fr); }
  .route, .router .route { min-height: 0; padding: 1rem 1.1rem; }
  .route__img { width: 45%; opacity: 0.6; }
  .route--feat { grid-template-areas: "head watch" "desc desc" "mini mini" "cta cta" "meta meta"; gap: 1.1rem 1rem; }
  .route--feat .watch { width: 5.75rem; }
  .route--feat .watch__readout b { font-size: 1.05rem; }
  .route--feat .watch__readout span { font-size: 0.55rem; }
  .route__mini { grid-template-columns: minmax(0, 1fr); }
  .route__cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  a.route:hover .route__img { transform: none; }
}

/* ---------- Stopwatch: [data-watch], --p (0 → 1) is the elapsed share of the minute ---------- */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.watch {
  --w-case: var(--ink);
  --w-face: var(--surface);
  --w-tick: var(--line-strong);
  --w-ring: var(--ink);
  --w-track: var(--rule);
  --w-hand: var(--accent);
  position: relative;
  width: clamp(7.5rem, 10vw, 9rem);
  color: var(--ink);
}
.route--feat .watch { --w-case: var(--band-ink); --w-face: var(--band); --w-ring: var(--band-ink); --w-track: rgba(234, 228, 214, 0.14); }
.watch__dial { width: 100%; height: auto; overflow: visible; }
.watch__crown, .watch__stem, .watch__pusher { fill: var(--w-case); }
.watch__case { fill: var(--w-case); }
.watch__face { fill: var(--w-face); }
.watch__ticks { fill: none; stroke: var(--w-tick); stroke-width: 3; stroke-dasharray: 1 3; stroke-dashoffset: 0.5; }
.watch__ticks--major { stroke: var(--w-ring); stroke-width: 6; stroke-dasharray: 2 18; stroke-dashoffset: 1; }
.watch__track, .watch__ring { fill: none; stroke-width: 6; }
.watch__track { stroke: var(--w-track); }
.watch__ring {
  stroke: var(--w-ring);
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(var(--p) * 100);
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 60px 76px;
  transition: stroke 0.4s ease;
}
.watch__hand {
  fill: var(--w-hand);
  stroke: var(--w-face);
  stroke-width: 2;
  transform: rotate(calc(var(--p) * 360deg));
  transform-box: view-box;
  transform-origin: 60px 76px;
}
.watch__readout {
  position: absolute;
  left: 0;
  right: 0;
  top: 56.7%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  line-height: 1;
  text-align: center;
}
.watch__readout b { font: 800 clamp(1.25rem, 1rem + 0.8vw, 1.6rem)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.watch__readout span { margin-top: 0.3rem; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* Idle: the minute gently drains and refills, inviting a start */
.watch.is-idle { animation: watch-breathe 3.6s ease-in-out infinite alternate; }
@keyframes watch-breathe { from { --p: 0; } to { --p: 1; } }
.watch.is-late { --w-ring: var(--accent); }
.watch.is-late .watch__readout b { color: var(--accent); }
.watch.is-over { --w-ring: var(--accent); }
.watch.is-over .watch__readout span { color: var(--accent); }

/* Compact watch (quiz header) */
.watch--sm { display: flex; align-items: center; gap: 0.6rem; width: auto; }
.watch--sm .watch__dial { width: 2.2rem; }
.watch--sm .watch__track, .watch--sm .watch__ring { stroke-width: 12; }
.watch--sm .watch__readout { position: static; transform: none; justify-items: start; text-align: left; }
.watch--sm .watch__readout b { font-size: 1.05rem; }
.watch--sm .watch__readout span { margin-top: 0.15rem; font-size: 0.55rem; }

/* ---------- Dignity check (home quiz) ---------- */
.quiz {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  overflow: hidden;
  background: var(--grad-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.quiz [hidden] { display: none !important; }
.quiz__media { position: relative; min-height: 26rem; background: var(--sunk); }
.quiz__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease); }
.quiz__media img.is-on { opacity: 1; }
.quiz__count {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.6rem 0.75rem;
  font: 700 0.75rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EAE4D6;
  background: #01272C;
  border-radius: var(--radius-sm);
}
.quiz__body { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.25rem, 2.6vw, 2rem); }
.quiz__top { display: flex; align-items: center; gap: 1.25rem; }
.quiz__dots { flex: 1; display: flex; gap: 0.3rem; }
.quiz__dots i { flex: 1; height: 4px; border-radius: 99px; background: var(--rule); transition: background-color 0.25s ease; }
.quiz__dots i.is-on { background: var(--ink); }
.quiz__dots i.is-yes { background: var(--yes); }
.quiz__dots i.is-no { background: var(--accent); }
.quiz__q { animation: quiz-in 0.45s var(--ease); }
.quiz__q h3 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; outline: none; }
.quiz__q p { margin: 0.6rem 0 0; font-size: 0.98rem; color: var(--muted); }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: auto; }
.quiz__ans {
  --_c: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  font: 700 0.95rem/1.2 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.quiz__ans--yes { --_c: var(--yes); }
.quiz__ans--no { --_c: var(--accent); }
.quiz__ans-mark { width: 0.95rem; height: 0.95rem; border: 1.5px solid var(--_c); border-radius: 3px; transition: background-color 0.2s ease; }
.quiz__ans:hover { border-color: var(--_c); background: color-mix(in srgb, var(--_c) 10%, var(--paper)); }
.quiz__ans:hover .quiz__ans-mark { background: var(--_c); }
.quiz__ans:active { transform: scale(0.98); }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; }
.quiz__nav button { padding: 0.35rem 0; font: 600 0.85rem var(--font-body); color: var(--muted); background: none; border: 0; cursor: pointer; }
.quiz__nav button:hover { color: var(--ink); }
.quiz__nav button:disabled { opacity: 0.35; cursor: default; }
.quiz__result { display: flex; flex-direction: column; gap: 0.8rem; outline: none; animation: quiz-in 0.45s var(--ease); }
.quiz__result .kicker { margin: 0; }
.quiz__score { margin: 0; font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.quiz__score small { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.quiz__verdict { margin: 0; font-size: 0.98rem; font-weight: 600; }
.quiz__time { margin: 0; font-size: 0.85rem; color: var(--muted); }
.quiz__profile { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.quiz__profile div { display: grid; gap: 0.4rem; justify-items: center; font-size: 0.68rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted); }
.quiz__profile i { width: 100%; height: 2.25rem; border-radius: var(--radius-sm); background: var(--rule); }
.quiz__profile i.is-yes, .quiz__legend i.is-yes { background: var(--yes); }
.quiz__profile i.is-no, .quiz__legend i.is-no { background: var(--accent); }
.quiz__legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--muted); }
.quiz__legend i { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 2px; margin-right: 0.4rem; background: var(--rule); }
.quiz__link { align-self: flex-start; padding: 0 0 0.2rem; font: 600 0.9rem var(--font-body); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line-strong); cursor: pointer; }
.quiz__link:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 899.98px) {
  .quiz { grid-template-columns: minmax(0, 1fr); }
  .quiz__media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 519.98px) {
  .quiz__profile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quiz__answers { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .watch.is-idle { animation: none; }
}

/* ---------- Wall of Dignity (home) ---------- */
.wall-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0.75rem; align-items: stretch; }

.tally {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--radius-lg);
}
.tally::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -5rem;
  bottom: -6rem;
  width: 18rem;
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.tally p { margin: 0; }
.tally__label { margin: 0 0 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tally__num { font: 800 clamp(2.6rem, 2rem + 2.4vw, 3.75rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; }
.tally__caption { margin-top: 0.45rem !important; font-size: 0.9rem; color: var(--muted); }
.tally__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.tally__stats div { display: grid; gap: 0.25rem; padding: 0.75rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.tally__stats b { font: 800 1.4rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tally__stats span { font-size: 0.75rem; color: var(--muted); }

.hbar { display: grid; gap: 0.55rem; }
.hbar__row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 1.5rem; gap: 0.75rem; align-items: center; font-size: 0.8rem; }
.hbar__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar__track { height: 6px; background: var(--rule); border-radius: 99px; overflow: hidden; }
.hbar__fill { display: block; width: 0; height: 100%; background: var(--accent); transition: width 1s var(--ease); }
.hbar__val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.wall {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.6rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--grad-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.wall__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; }
.wall__head h3 { margin-right: auto; font-size: 1.15rem; font-weight: 700; }
.wall__head [hidden] { display: none; }
.wall__badge { padding: 0.22rem 0.5rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: var(--radius-sm); }
.wall__live { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.22rem 0.55rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--yes); border: 1px solid currentColor; border-radius: var(--radius-sm); }
.wall__live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; animation: wall-pulse 1.6s ease-out infinite, wall-blink 1.2s ease-in-out infinite; }
@keyframes wall-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--yes) 55%, transparent); } 100% { box-shadow: 0 0 0 0.5rem transparent; } }
@keyframes wall-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .wall__live i { animation: none; } }
.wall__intro { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--muted); }

.pcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: 0 0.25rem 1.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, #000 85%, transparent);
}
.pcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "avatar text" "avatar when";
  column-gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.25s var(--ease);
  animation: quiz-in 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.pcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pcard__avatar {
  grid-area: avatar;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  border-radius: 50%;
}
.pcard__avatar--photo { object-fit: cover; object-position: 50% 30%; background: var(--sunk); border: 2px solid var(--surface); box-shadow: 0 4px 10px -6px rgba(1, 39, 44, 0.5); }
.pcard__text { grid-area: text; display: grid; min-width: 0; line-height: 1.3; }
.pcard__text b { font-size: 0.88rem; }
.pcard__text span, .pcard__when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__text span { font-size: 0.75rem; color: var(--muted); }
.pcard__when { grid-area: when; margin-top: 0.15rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.pcard.is-you { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }

@media (max-width: 899.98px) {
  .wall-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 519.98px) {
  .pcards { grid-template-columns: minmax(0, 1fr); max-height: 20rem; }
  .hbar__row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 1.5rem; }
}

/* ---------- Beliefs (home) ---------- */
.beliefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.belief {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Dark band fades in on hover / keyboard focus (tokens re-mapped in the band selector above) */
.belief::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-band);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.belief:hover, .belief:focus-within { background: var(--grad-card); border-color: var(--band); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(1, 39, 44, 0.45); }
.belief:hover::before, .belief:focus-within::before { opacity: 1; }
.belief__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.6rem; color: var(--accent); background: var(--sunk); border-radius: var(--radius); transition: color 0.3s ease, background-color 0.3s ease; }
.belief__icon svg { width: 1.3rem; height: 1.3rem; }
.belief__num {
  position: absolute;
  top: 0.9rem;
  right: 1.15rem;
  font: 800 clamp(2.6rem, 2rem + 2vw, 3.5rem)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  opacity: 0.55;
  pointer-events: none;
}
.belief h3 { font-size: 1.1rem; font-weight: 700; transition: color 0.3s ease; }
.belief p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); transition: color 0.3s ease; }
.belief:hover .belief__icon, .belief:focus-within .belief__icon { color: var(--btn-ink); background: var(--btn-bg); }
.belief:hover .belief__num, .belief:focus-within .belief__num { -webkit-text-stroke-color: var(--accent); opacity: 0.9; }

.spread { margin-top: 0.75rem; padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.75rem); background: var(--grad-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.spread__label { margin: 0 0 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.spread__steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); gap: 1.25rem 3rem; margin: 0; padding: 0; list-style: none; }
.spread__step { position: relative; display: grid; align-content: start; gap: 0.5rem; min-width: 0; }
.spread__step + .spread__step::before {
  content: "\2192";
  position: absolute;
  left: -2.15rem;
  top: 0.55rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--btn-ink);
  background: var(--accent);
  border-radius: 50%;
}
.spread__num { justify-self: start; padding: 0.15rem 0.5rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 99px; }
.spread__step h3 { font-size: 1rem; font-weight: 700; }
.spread__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.spread__chips li { padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 600; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.spread__chips--path { gap: 0.35rem 1.15rem; }
.spread__chips--path li { position: relative; }
.spread__chips--path li + li::before { content: "\2192"; position: absolute; left: -0.95rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--accent); }
.spread__chips .is-goal { color: var(--btn-ink); background: var(--btn-bg); border-color: var(--btn-bg); }
/* Chips inside a belief card (04–06): surface tokens so they stay readable when the card turns teal on hover */
.belief .spread__chips { margin-top: 0.15rem; }
.belief .spread__chips li { background: var(--surface); border-color: var(--rule); transition: background-color 0.3s ease, border-color 0.3s ease; }
.belief .spread__chips .is-goal { background: var(--btn-bg); border-color: var(--btn-bg); }

@media (max-width: 899.98px) {
  .beliefs { grid-template-columns: minmax(0, 1fr); }
  .spread__steps { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .spread__step + .spread__step::before { content: "\2193"; left: 0.1rem; top: -1.95rem; }
}

/* ---------- Go Deep / Go Wide (home) ---------- */
.journeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.journey-card {
  --_dot: var(--surface);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  overflow: hidden;
  background: var(--grad-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.journey-card--wide { --_dot: var(--band); background: var(--grad-band); border-color: var(--band); }
.journey-card--wide::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -5rem;
  bottom: -6rem;
  width: 18rem;
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.journey-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.journey-card__tag { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.journey-card__tag::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; }
.journey-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--accent); background: var(--sunk); border-radius: 50%; }
.journey-card__icon svg { width: 1.45rem; height: 1.45rem; }
.journey-card__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; }
.journey-card__lead { margin: 0.35rem 0 1.1rem; font-size: 0.95rem; color: var(--muted); }
.journey-card__cta { margin-top: auto; padding-top: 1.35rem; }
.journey-card__cta .btn { min-height: 2.75rem; padding: 0.7rem 1.2rem; font-size: 0.9rem; }

.journey-steps { counter-reset: step; display: grid; margin: 0; padding: 0; list-style: none; }
.journey-steps > li { counter-increment: step; position: relative; display: flex; align-items: center; gap: 0.85rem; padding: 0.4rem 0; font-size: 0.92rem; font-weight: 600; }
.journey-steps > li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--_dot);
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}
.journey-steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.825rem - 0.75px); top: calc(50% + 0.825rem); bottom: -0.4rem; width: 1.5px; background: var(--rule); }
.journey-steps > li.is-goal { color: var(--accent); font-weight: 700; }
.journey-steps > li.is-goal::before { content: "\2605"; color: var(--btn-ink); background: var(--btn-bg); border-color: var(--btn-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

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

/* ---------- Topbar: rotating announcements above the header ([data-topbar]) ---------- */
.topbar {
  position: relative;
  z-index: 51;
  color: #EAE4D6;
  background: var(--grad-band);
  font-size: 0.85rem;
  line-height: 1.3;
}
.topbar[hidden] { display: none; }
.topbar__inner { display: flex; align-items: center; gap: 0.75rem; }
.topbar__viewport { flex: 1; min-width: 0; height: 2.6rem; overflow: hidden; }
.topbar__track { margin: 0; padding: 0; list-style: none; animation: topbar-rotate 12s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.topbar:hover .topbar__track, .topbar:focus-within .topbar__track { animation-play-state: paused; }
.topbar--single .topbar__track { animation: none; }
@keyframes topbar-rotate {
  0%, 42% { transform: translateY(0); }
  50%, 92% { transform: translateY(-2.6rem); }
  100% { transform: translateY(0); }
}
.topbar__slide { display: flex; align-items: center; justify-content: center; gap: 0.6rem; height: 2.6rem; white-space: nowrap; overflow: hidden; }
.topbar__slide > span:not([class]) { overflow: hidden; text-overflow: ellipsis; }
.topbar b { color: #FFFFFF; font-weight: 700; }
.topbar__dot { flex: none; position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #F0643F; }
.topbar__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: topbar-ping 1.6s ease-out infinite; }
@keyframes topbar-ping { to { transform: scale(3); opacity: 0; } }
.topbar__icon { flex: none; display: grid; color: #F0643F; }
.topbar__icon svg { width: 0.95rem; height: 0.95rem; }
.topbar__chip { flex: none; padding: 0.12rem 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #01272C; background: #F9DD5A; border-radius: 99px; }
.topbar__link { flex: none; font-weight: 700; color: #F0643F; text-decoration: none; }
/* The whole slide is the link's tap target */
.topbar__slide { position: relative; }
.topbar__link::after { content: ""; position: absolute; inset: 0; }
.topbar__link:hover { color: #FFFFFF; }
.topbar__close { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; color: #A9BCB8; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.topbar__close:hover { color: #FFFFFF; background: rgba(234, 228, 214, 0.1); }
.topbar__close svg { width: 1rem; height: 1rem; }
@media (max-width: 639.98px) {
  .topbar { font-size: 0.78rem; }
  .topbar__long { display: none; }
  .topbar__slide { justify-content: flex-start; gap: 0.45rem; }
}
@media (max-width: 479.98px) {
  .topbar__mid { display: none; }
  .topbar__chip { padding-inline: 0.45rem; font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__track { animation: none; }
  .topbar__dot::after { animation: none; }
}

/* ---------- FX: ambient motion components (shared by the movement pages) ----------
   .fx-hero + .fx-glow   drifting glows behind a hero
   .fx-words             rotating word ticker
   .fx-cards > .fx-card  icon cards with a spotlight walking across them (--i index, --n count)
   .fx-cards--ring       adds a rotating gradient border
   .fx-chips             gently bobbing pills
   .fx-ripple            rings spreading out from the centre
   .fx-avatars           overlapping faces with a "+N" bubble                                  */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.fx-hero { position: relative; overflow: hidden; isolation: isolate; }
.fx-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: fx-drift 24s ease-in-out infinite alternate; }
.fx-glow--a { width: 26rem; height: 26rem; right: -7rem; top: -9rem; background: rgba(240, 100, 63, 0.3); }
.fx-glow--b { width: 22rem; height: 22rem; left: 35%; bottom: -13rem; background: rgba(106, 169, 220, 0.28); animation-duration: 30s; animation-delay: -10s; }
[data-theme="dark"] .fx-glow { opacity: 0.6; }
@keyframes fx-drift { 50% { transform: translate(-3rem, 2rem) scale(1.12); } 100% { transform: translate(2rem, -1rem) scale(0.95); } }

.fx-words { margin: 1.1rem 0 0; font-family: var(--font-display); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem); font-weight: 600; color: var(--muted); }
.fx-words__track { display: inline-grid; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.fx-words__track span { display: block; height: 1.25em; line-height: 1.25em; font-weight: 800; color: var(--accent-display); animation: fx-words 14s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@keyframes fx-words {
  0%, 12% { transform: translateY(0); }
  16.66%, 28.66% { transform: translateY(-100%); }
  33.33%, 45.33% { transform: translateY(-200%); }
  50%, 62% { transform: translateY(-300%); }
  66.66%, 78.66% { transform: translateY(-400%); }
  83.33%, 95.33% { transform: translateY(-500%); }
  100% { transform: translateY(-600%); }
}

.fx-cards { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.fx-card {
  --_bg: var(--grad-card);
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  overflow: hidden;
  background: var(--_bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  animation: fx-spot calc(var(--n, 5) * 3s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 3s);
}
.band .fx-card, .page-hero--band .fx-card { --_bg: color-mix(in srgb, var(--band) 93%, #FFFFFF); }
@keyframes fx-spot {
  0%, 20%, 100% { translate: 0 0; box-shadow: 0 0 0 0 transparent; }
  4%, 16% { translate: 0 -6px; box-shadow: 0 22px 40px -26px rgba(227, 67, 33, 0.55); }
}
.fx-card__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
  background: var(--sunk);
  border-radius: var(--radius);
  animation: fx-icon calc(var(--n, 5) * 3s) ease-in-out infinite, fx-float 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 3s), calc(var(--i, 0) * -0.8s);
}
.fx-card__icon svg { width: 1.3rem; height: 1.3rem; }
@keyframes fx-icon { 0%, 20%, 100% { color: var(--accent); background: var(--sunk); } 4%, 16% { color: #FFFFFF; background: var(--btn-bg); } }
@keyframes fx-float { 50% { transform: translateY(-4px); } }
.fx-card__num { position: absolute; top: 0.85rem; right: 1rem; font: 800 2.2rem/1 var(--font-display); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px var(--line-strong); opacity: 0.5; }
.fx-card h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.fx-card h3 a { text-decoration: none; }
.fx-card h3 a::after { content: " \2192"; color: var(--accent); }
.fx-card p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.fx-cards--ring .fx-card {
  border: 1.5px solid transparent;
  background: var(--_bg) padding-box, conic-gradient(from var(--fx-a), var(--rule) 0 62%, var(--accent-display) 76%, var(--sky) 88%, var(--rule) 100%) border-box;
  animation: fx-spot calc(var(--n, 5) * 3s) ease-in-out infinite, fx-spin 8s linear infinite;
  animation-delay: calc(var(--i, 0) * 3s), calc(var(--i, 0) * -1.4s);
}
@keyframes fx-spin { to { --fx-a: 360deg; } }

.fx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.fx-chips li { padding: 0.45rem 0.85rem; font-size: 0.85rem; font-weight: 600; background: var(--grad-card); border: 1px solid var(--rule); border-radius: 99px; animation: fx-float 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1s); }
.band .fx-chips li, .page-hero--band .fx-chips li { background: rgba(234, 228, 214, 0.06); }
.fx-chips li::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.5rem; vertical-align: 0.1em; border-radius: 50%; background: var(--accent-display); }

.fx-ripple { position: absolute; z-index: -1; left: 50%; top: 50%; width: 1px; height: 1px; pointer-events: none; }
.fx-ripple span { position: absolute; left: -15rem; top: -15rem; width: 30rem; height: 30rem; border: 1.5px solid var(--accent-display); border-radius: 50%; opacity: 0; animation: fx-ripple 9s ease-out infinite; }
.fx-ripple span:nth-child(2) { animation-delay: 3s; }
.fx-ripple span:nth-child(3) { animation-delay: 6s; }
@keyframes fx-ripple { 0% { transform: scale(0.15); opacity: 0.45; } 100% { transform: scale(1.6); opacity: 0; } }

.fx-avatars { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.fx-avatars li { margin-left: -0.6rem; animation: fx-float 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.5s); }
.fx-avatars li:first-child { margin-left: 0; }
.fx-avatars img, .fx-avatars__more { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 6px 14px -8px rgba(1, 39, 44, 0.6); }
.band .fx-avatars img, .band .fx-avatars__more, .page-hero--band .fx-avatars img, .page-hero--band .fx-avatars__more { border-color: var(--band); }
.fx-avatars__more { font-size: 0.75rem; font-weight: 800; color: #FFFFFF; background: var(--btn-bg); }

@media (max-width: 1099.98px) { .fx-cards { --cols: 3 !important; } }
@media (max-width: 767.98px) { .fx-cards { --cols: 2 !important; } }
@media (max-width: 479.98px) { .fx-cards { --cols: 1 !important; } }
@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-words__track span, .fx-card, .fx-card__icon, .fx-chips li, .fx-ripple span, .fx-avatars li { animation: none !important; }
  .fx-words__track span { display: none; }
  .fx-words__track span:first-child { display: block; }
}

/* ---------- Act of Dignity feed (beside the share form) ---------- */
.aod-aside { display: grid; gap: 0.85rem; align-content: start; }
.aod-feed {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem 0;
  background: var(--grad-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.aod-feed__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.aod-feed__eyebrow { margin: 0 0 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.aod-feed__title { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.aod-feed__head [hidden] { display: none; }
.aod-feed__badge { flex: none; padding: 0.22rem 0.5rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: var(--radius-sm); }
.aod-feed__live { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; color: var(--yes); }
.aod-feed__live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; animation: wall-pulse 1.6s ease-out infinite; }
.aod-feed__count { margin: 0.5rem 0 0.9rem; font-size: 0.82rem; color: var(--muted); }
.aod-feed__count b { color: var(--ink); font-weight: 800; }
.aod-feed__viewport {
  height: 28rem;
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
}
.aod-feed__viewport:focus-visible { outline-offset: -2px; }
.aod-feed__track { animation: aod-scroll var(--dur, 56s) linear infinite; }
.aod-feed__viewport:hover .aod-feed__track,
.aod-feed__viewport:focus-within .aod-feed__track { animation-play-state: paused; }
@keyframes aod-scroll { to { transform: translateY(-50%); } }
.aod-feed__set { display: grid; gap: 0.65rem; padding-bottom: 0.65rem; }

.aod-story {
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: 0.95rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-display);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.25s var(--ease);
}
.aod-story:hover { transform: translateX(3px); border-color: var(--line-strong); border-left-color: var(--accent-display); }
.aod-story__who { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.aod-story__who > span { display: grid; min-width: 0; line-height: 1.25; }
.aod-story__who b { font-size: 0.88rem; }
.aod-story__who span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: var(--muted); }
.aod-story__avatar { flex: none; width: 2.3rem; height: 2.3rem; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 4px 10px -6px rgba(1, 39, 44, 0.5); }
.aod-story__avatar--initials { display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #FFFFFF; background: var(--btn-bg); }
.aod-story__act {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aod-story__foot { display: flex; align-items: center; gap: 0.6rem; }
.aod-story__tag { padding: 0.15rem 0.5rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 99px; }
.aod-story__when { font-size: 0.72rem; color: var(--muted); }
.aod-story__heart { width: 1rem; height: 1rem; margin-left: auto; fill: color-mix(in srgb, var(--accent-display) 75%, transparent); animation: aod-beat 2.4s ease-in-out infinite; }
@keyframes aod-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(0.95); } 45% { transform: scale(1.12); } }

.aod-feed-note { font-size: 0.85rem; border-radius: var(--radius-lg); }
.aod-feed-note .note__title { font-size: 0.92rem; }

@media (max-width: 899.98px) {
  .aod-feed__viewport { height: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .aod-feed__track, .aod-story__heart { animation: none; }
  .aod-feed__viewport { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .aod-feed__set[aria-hidden] { display: none; }
}

/* ---------- Form call-to-action (the form itself lives on its own page) ---------- */
.form-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  color: #EAE4D6;
  background: var(--grad-band);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -40px rgba(1, 39, 44, 0.7);
}
.form-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.09) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: form-cta-sweep 6s ease-in-out infinite;
}
@keyframes form-cta-sweep { 60%, 100% { transform: translateX(100%); } }
.form-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -5rem;
  width: 16rem;
  aspect-ratio: 1;
  background: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.07;
}
.form-cta__icon {
  align-self: start;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: #FFFFFF;
  background: var(--btn-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(240, 100, 63, 0.5);
  animation: form-cta-ping 2.8s ease-out infinite;
}
.form-cta__icon svg { width: 1.6rem; height: 1.6rem; }
@keyframes form-cta-ping { 70%, 100% { box-shadow: 0 0 0 16px rgba(240, 100, 63, 0); } }
.form-cta__eyebrow { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F0643F; }
.form-cta__title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; color: #EAE4D6; }
.form-cta__text { max-width: 40rem; margin: 0.6rem 0 0; color: #A9BCB8; }
.form-cta__points { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.form-cta__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(234, 228, 214, 0.08);
  border: 1px solid rgba(234, 228, 214, 0.16);
  border-radius: 99px;
  animation: fx-float 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.2s);
}
.form-cta__points li::before { content: "\2713"; font-weight: 800; color: #F0643F; }
.form-cta__action { display: grid; justify-items: center; gap: 0.5rem; }
.form-cta__action .btn { min-height: 3.25rem; padding-inline: 1.6rem; white-space: nowrap; }
.form-cta__note { margin: 0; font-size: 0.75rem; color: #A9BCB8; }
/* Act of Dignity: CTA beside the story feed */
.form-cta-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.form-cta-split .form-cta { grid-template-columns: auto minmax(0, 1fr); }
.form-cta-split .form-cta__action { grid-column: 1 / -1; justify-items: start; }
.form-cta-split .aod-feed__viewport { height: 20rem; }
@media (max-width: 899.98px) {
  .form-cta { grid-template-columns: auto minmax(0, 1fr); }
  .form-cta__action { grid-column: 1 / -1; justify-items: start; }
  .form-cta-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 519.98px) {
  .form-cta { grid-template-columns: minmax(0, 1fr); }
  .form-cta__action .btn { width: 100%; }
}

/* Form pages (share-act-of-dignity, send-a-message, …): short hero, then the form */
.form-page__hero { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 0; }
.form-page__hero h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.form-page__hero .lead { max-width: 42rem; margin-top: 1rem; }
.form-page__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; font-size: 0.88rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.form-page__back:hover { color: var(--accent); }
.form-page__body { padding-top: clamp(1rem, 2vw, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .form-cta::after, .form-cta__icon, .form-cta__points li { animation: none; }
}

/* ---------- Brand mark on photos: <span class="brand-photo"><img …></span> ----------
   Faint white logo watermark in the centre + a small logo badge bottom-right. */
.brand-photo { position: relative; display: block; overflow: hidden; }
.brand-photo::before,
.brand-photo::after { content: ""; position: absolute; z-index: 2; pointer-events: none; }
.brand-photo::before {
  left: 50%;
  top: 50%;
  width: 30%;
  aspect-ratio: 926 / 900;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.16;
}
.brand-photo::after {
  right: 0.7rem;
  bottom: 0.7rem;
  width: 2.3rem;
  height: 2.3rem;
  background: url("../img/logo-mark.svg") center / 58% no-repeat, rgba(251, 248, 242, 0.92);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(1, 39, 44, 0.25);
}
/* Smaller badge on the hero polaroids and the quiz photo stays clear of its counter */
.print .brand-photo::after { right: 0.45rem; bottom: 0.45rem; width: 1.6rem; height: 1.6rem; }
.print .brand-photo::before { width: 34%; opacity: 0.14; }
/* Framed print figures: move the paper frame from the image to the wrapper */
.figure--print .brand-photo { padding: 0.6rem; background: #FBF8F1; box-shadow: 0 1px 2px rgba(1, 39, 44, 0.14), 0 22px 40px -22px rgba(1, 39, 44, 0.55); transform: rotate(-1.2deg); }
.figure--print .brand-photo img { padding: 0; box-shadow: none; transform: none; }
.figure--print .brand-photo::after { right: 1.3rem; bottom: 1.3rem; }

/* ---------- Motion ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@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; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Animated page kit (fx-*): shared by the For Workplaces pages ----------
   Same motion language as about.html / before-we-talk-about-dignity.html; all of it stops for reduced motion. */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Hero: drifting colour blobs */
.fx-hero { position: relative; overflow: hidden; isolation: isolate; }
.fx-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(48px); opacity: 0.35; pointer-events: none; animation: fx-drift 22s ease-in-out infinite alternate; }
.fx-blob--a { width: 26rem; height: 26rem; right: -6rem; top: -8rem; background: var(--accent-display); }
.fx-blob--b { width: 22rem; height: 22rem; right: 22%; bottom: -10rem; background: var(--sky); animation-duration: 28s; animation-delay: -6s; }
.fx-blob--c { width: 16rem; height: 16rem; left: -5rem; top: 30%; background: #F9DD5A; opacity: 0.25; animation-duration: 25s; animation-delay: -12s; }
[data-theme="dark"] .fx-blob { opacity: 0.16; }
@keyframes fx-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3rem, 2rem) scale(1.12); }
  100% { transform: translate(2rem, -1.5rem) scale(0.95); }
}

/* Rotating word: 4 words + a repeat of the first */
.fx-roles { margin: 1.25rem 0 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem); font-weight: 600; color: var(--muted); }
.fx-roles__track { display: inline-grid; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.fx-roles__track span { display: block; height: 1.25em; line-height: 1.25em; color: var(--accent-display); font-weight: 800; animation: fx-roles 10s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
@keyframes fx-roles {
  0%, 20% { transform: translateY(0); }
  25%, 45% { transform: translateY(-100%); }
  50%, 70% { transform: translateY(-200%); }
  75%, 95% { transform: translateY(-300%); }
  100% { transform: translateY(-400%); }
}

/* Pills that light up one after another (set --i on each li, --n on the list) */
.fx-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.fx-tags li {
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  animation: fx-tag calc(var(--n, 3) * 2s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 2s);
}
.fx-tags--n7 li { animation-name: fx-tag7; }
.fx-tags--n4 li { animation-name: fx-tag4; }
@keyframes fx-tag {
  0%, 30%, 100% { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
  5%, 27% { color: #FFFFFF; background: var(--btn-bg); border-color: var(--btn-bg); }
}
@keyframes fx-tag4 {
  0%, 24%, 100% { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
  4%, 21% { color: #FFFFFF; background: var(--btn-bg); border-color: var(--btn-bg); }
}
@keyframes fx-tag7 {
  0%, 14%, 100% { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
  2%, 12% { color: #FFFFFF; background: var(--btn-bg); border-color: var(--btn-bg); }
}

/* Card: rotating gradient border, floating icon, outline number, a spotlight that walks across (6 x 3s slots) */
.fx-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  min-width: 0;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  background:
    var(--grad-card) padding-box,
    conic-gradient(from var(--fx-a), var(--rule) 0 62%, var(--accent-display) 76%, var(--sky) 88%, var(--rule) 100%) border-box;
  animation: fx-spin 7s linear infinite, fx-spot 18s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s), calc(var(--i, 0) * 3s);
}
.fx-card--still { animation: fx-spin 7s linear infinite; }
.fx-card--band {
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--cell-bg), var(--cell-bg)) padding-box,
    conic-gradient(from var(--fx-a), var(--rule) 0 62%, var(--accent-display) 76%, var(--sky) 88%, var(--rule) 100%) border-box;
}
@keyframes fx-spin { to { --fx-a: 360deg; } }
@keyframes fx-spot {
  0%, 17%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 transparent; }
  3%, 14% { transform: translateY(-6px); box-shadow: 0 22px 44px -26px rgba(227, 67, 33, 0.55), 0 0 0 4px color-mix(in srgb, var(--accent-display) 12%, transparent); }
}
.fx-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.6rem;
  color: var(--accent);
  background: var(--sunk);
  border-radius: var(--radius);
  animation: fx-float 4s ease-in-out infinite, fx-icon 18s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.7s), calc(var(--i, 0) * 3s);
}
.fx-card__icon svg { width: 1.35rem; height: 1.35rem; }
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes fx-icon {
  0%, 17%, 100% { color: var(--accent); background: var(--sunk); }
  3%, 14% { color: #FFFFFF; background: var(--btn-bg); }
}
.fx-card__num {
  position: absolute;
  top: 0.9rem;
  right: 1.15rem;
  font: 800 clamp(2.6rem, 2rem + 2vw, 3.5rem)/1 var(--font-display);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  opacity: 0.5;
  pointer-events: none;
}
.fx-card h3 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.fx-card p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--muted); }
.fx-card:hover { translate: 0 -6px; transition: translate 0.25s var(--ease); }

/* Card as a link */
.fx-link { color: inherit; text-decoration: none; }
.fx-link:hover { color: inherit; }
.fx-link h3 { transition: color 0.2s ease; }
.fx-link:hover h3 { color: var(--accent); }
.fx-link .btn__arrow { display: inline-block; color: var(--accent-display); transition: transform 0.2s var(--ease); }
.fx-link:hover .btn__arrow { transform: translateX(4px); }
.fx-link__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/* Teal card with a light sweep; .fx-lines rows light up one after another */
.fx-teal, .fx-next {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: #EAE4D6;
  background: var(--grad-band);
  border-radius: var(--radius-lg);
}
.fx-teal::after, .fx-next::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.09) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: fx-sweep 6s ease-in-out infinite;
}
@keyframes fx-sweep { 60%, 100% { transform: translateX(100%); } }
.fx-teal__eyebrow, .fx-next__eyebrow { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F0643F; }
.fx-teal__title { margin: 0 0 1rem; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 800; color: #EAE4D6; }
.fx-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.fx-lines > li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(234, 228, 214, 0.14);
  color: rgba(234, 228, 214, 0.55);
  animation: fx-lit calc(var(--n, 3) * 3s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 3s);
}
.fx-lines > li:last-child { border-bottom: 0; }
.fx-lines--n4 > li { animation-name: fx-lit4; }
@keyframes fx-lit { 0%, 33%, 100% { color: rgba(234, 228, 214, 0.55); } 5%, 28% { color: #FFFFFF; } }
@keyframes fx-lit4 { 0%, 25%, 100% { color: rgba(234, 228, 214, 0.55); } 4%, 21% { color: #FFFFFF; } }

/* Closing CTA card */
.fx-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.fx-next__eyebrow { margin-bottom: 0.35rem; }
.fx-next__title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; color: #EAE4D6; }
.fx-next__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .fx-blob, .fx-roles__track span, .fx-tags li, .fx-card, .fx-card__icon, .fx-teal::after, .fx-next::after, .fx-lines > li { animation: none !important; }
  .fx-roles__track span { display: none; }
  .fx-roles__track span:first-child { display: block; }
}

/* ---------- Utilities ---------- */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-s { margin-top: 1rem; }
.u-mt-m { margin-top: 2rem; }
.u-mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.u-mb-m { margin-bottom: 2rem; }
.u-center { text-align: center; margin-inline: auto; }
.u-max-prose { max-width: 42rem; }

@media print {
  .site-header, .site-footer, .ribbon, .btn, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}