/* ==========================================================================
   Norvenzia — public design system
   One file, custom properties, no framework.
   Light-only, editorial register. Monochrome navy — navy is the entire
   accent system; in-body links are underlined since colour alone can't
   distinguish them (WCAG 1.4.1).
   ========================================================================== */

/* -------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  /* Brand palette v2 — navy is the entire accent system. Cobalt and cyan are
     retired; the site is monochrome navy in the register of Linear or Stripe.
     The old accent token NAMES are kept as navy-family aliases so the ~1,700
     lines below resolve unchanged — only their values moved to navy. */
  --navy: #002d5c;
  --navy-deep: #001d3c;
  --navy-soft: #0a3a6b;      /* mid-navy, for gradient depth only */
  --white: #ffffff;
  --ground-alt: #f4f7fa;     /* alternate section background (replaces old ice) */
  --ice: #f4f7fa;            /* retired alias → ground-alt */
  --ice-warm: #eef2f7;       /* retired alias */
  --slate: #5e729a;
  --mist: #a7c0ce;
  --slate-light: #a7c0ce;    /* retired alias → mist */
  --grey: #bcbdc3;

  /* Accents folded into navy */
  --cobalt: #002d5c;         /* retired alias → navy */
  --cobalt-dark: #001d3c;    /* retired alias → navy-deep */
  --cyan: #5e729a;           /* retired alias → slate (keeps gradients monochrome) */

  /* Functional colours */
  --error: #98342e;
  --warn: #8a5a1f;
  --ok: #2e6a4f;

  /* Applied roles */
  --ink: #002d5c;            /* text is navy throughout — a deliberate monochrome */
  --ink-muted: #4a5c7e;
  --ink-faint: var(--slate);
  --display: var(--navy);
  --body: var(--ink);
  --muted: var(--slate);
  --ground: var(--white);
  --rule: var(--grey);
  --rule-soft: rgba(0, 45, 92, 0.12);
  --rule-strong: rgba(0, 45, 92, 0.22);

  /* Type */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --shell: 1240px;
  --shell-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Header height and the logo it's sized around. The mobile nav drops from
     exactly --header-h, so these must stay in step — hence the variable. */
  --header-h: 112px;
  --logo-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------- 3. Base reset */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* WCAG 1.4.1 — with navy the only accent, an in-body link can't be signalled
   by colour alone, so running-prose links carry an underline. Structural
   links (nav, buttons, cards, arrow-links) are distinguished by shape and
   position and set their own affordances, so they're excluded here. */
main p a,
main li a:not(.btn):not(.card):not(.card--link),
.lede a,
.legal-body a,
.faq__answer a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  cursor: pointer;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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

/* ------------------------------------------------------- 4. Type helpers */

.display-1 {
  font-size: clamp(1.95rem, 4.8vw, 3.825rem);
  line-height: 0.98;
}

.display-2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.03;
}

.display-3 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt);
  display: block;
  margin-bottom: 1.4rem;
}

.eyebrow--onNavy {
  color: var(--slate-light);
}

.lede {
  font-size: clamp(1.075rem, 1.45vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}

.muted {
  color: var(--ink-muted);
}

/* Small follow-up link under a hero lede -- used to cross-link the two
   "Intelligence" pages (/live and /insights/sweden-trade) to each other. */
.crosslink {
  margin-top: 1.4rem;
}

/* ---------------------------------------------------------- 5. Structure */

/* Full-bleed: no max-width cap, so content spans the actual viewport rather than
   sitting in a centered column with visible gutters on wide monitors. Only the
   side padding (--gutter) keeps text off the literal edge. .shell--narrow below
   is unaffected — that one is a deliberate reading-width cap for legal copy. */
.shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--shell-narrow);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.section--alt {
  background: var(--ground-alt);
}

.section--warm {
  background: var(--ice-warm);
}

.section--navy {
  background: var(--navy);
  color: #fff;
}

.section--navy .lede,
.section--navy .muted {
  color: rgba(255, 255, 255, 0.72);
}

.section-head {
  max-width: 58ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head p {
  margin-top: 1.4rem;
}

/* Accenture-style hairline that runs the full section width */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

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

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

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- 6. Header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-h);
}

.header__logo img {
  height: var(--logo-h);
  width: auto;
}

.header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
}

.header__link {
  font-size: 0.945rem;
  font-weight: 600;
  color: var(--ink);
  padding-block: 0.35rem;
  position: relative;
  transition: color 0.2s var(--ease);
}

.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.header__link:hover {
  color: var(--cobalt);
}

.header__link:hover::after,
.header__link.is-current::after {
  transform: scaleX(1);
}

.header__cta {
  margin-left: 0.5rem;
}

.header__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  width: 44px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.header__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--navy);
  position: relative;
}

.header__toggle span::before,
.header__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--navy);
}

.header__toggle span::before {
  top: -6px;
}

.header__toggle span::after {
  top: 6px;
}

/* The hamburger media query (nav position, link sizing, the mobile --logo-h /
   --header-h override) lives entirely in views/layout.ejs, not here. Its
   breakpoint has to shift with whatever logo height is set in the admin panel —
   a wider logo needs a wider viewport before the nav fits on one line — and CSS
   media queries can't reference a custom property, so the breakpoint has to be
   computed server-side and the ruleset rendered with it, together, in one place. */

/* ---------------------------------------------------- 7. Buttons & links */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.92rem 1.6rem;
  border-radius: 2px;
  border: 1.5px solid transparent;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--cobalt);
  color: #fff;
  border-color: var(--cobalt);
}

.btn--primary:hover {
  background: var(--cobalt-dark);
  border-color: var(--cobalt-dark);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--rule-strong);
}

.btn--ghost:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.btn--onNavy {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.btn--onNavy:hover {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #fff;
}

/* Compact variant for tight spaces (the War Room popup panel, section 29) --
   same modifier pattern as --primary/--ghost/--onNavy above. */
.btn--sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
}

/* The chevron text-link that carries most navigation weight in this register */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cobalt);
  transition: gap 0.24s var(--ease);
}

.arrow-link::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

.arrow-link:hover {
  gap: 0.95rem;
}

.arrow-link--onNavy {
  color: var(--cyan);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

/* -------------------------------------------------------------- 8. Badge */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.34rem 0.6rem;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge--live {
  color: var(--cobalt-dark);
  background: rgba(46, 123, 255, 0.1);
  border-color: rgba(46, 123, 255, 0.28);
}

.badge--roadmap {
  color: #6b7280;
  background: rgba(94, 114, 154, 0.1);
  border-color: rgba(94, 114, 154, 0.26);
}

.section--navy .badge--live {
  color: var(--cyan);
  background: rgba(70, 211, 255, 0.12);
  border-color: rgba(70, 211, 255, 0.34);
}

.section--navy .badge--roadmap {
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------- 9. Hero */

.hero {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

/* Photographic backdrop behind the home hero. Masked to fade out over the copy
   column so navy text stays legible against the white section background, and
   strongest behind the figure on the right. Hidden on small screens where the
   hero stacks and there's no room for it behind the copy — and static, so
   nothing here needs a prefers-reduced-motion guard. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 65%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, black 65%);
}

/* On mobile the grid stacks to a single column and the home hero has no
   figure to reveal the image behind (figureImage is unset in content/
   home.js — the desktop view shows the artwork in the empty right-hand
   grid column, not behind a graphic), so there's no room in the text flow
   to fade it in without sitting under a paragraph. Instead: reserve a
   dedicated strip below the CTA buttons (:has keeps this scoped to the
   home hero only — inner-page heroes have no .hero__bg) and reveal the
   image only there, faded top-to-bottom, so it still reads as the same
   photographic backdrop as desktop instead of disappearing on mobile. */
@media (max-width: 900px) {
  .hero:has(.hero__bg) {
    padding-bottom: clamp(9rem, 32vw, 11.5rem);
  }

  .hero__bg {
    object-position: center;
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 74%, black 92%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 74%, black 92%);
  }
}

/* Cursor-reactive glow. A radial-gradient layer positioned by --hero-mx/--hero-my
   (set in main.js from pointermove), under the copy and figure. Off by default —
   .has-pointer only lands on fine-pointer devices with motion allowed (see
   main.js and the reduced-motion guard at the bottom of this file), so touch,
   keyboard and reduced-motion visitors never see it move. Monochrome navy. */
.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(
    560px circle at var(--hero-mx, 50%) var(--hero-my, 38%),
    rgba(0, 45, 92, 0.10),
    rgba(94, 114, 154, 0.06) 42%,
    transparent 72%
  );
}

.hero.has-pointer .hero__spotlight {
  opacity: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero__body {
  margin-top: 1.9rem;
}

/* Copy renders before the figure in DOM order — a visitor should read what the
   company does before seeing an abstract graphic of it. */
.hero__figure {
  position: relative;
}

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

  .hero__figure {
    order: 2;
  }
}

/* Inner pages: single column, no diagram */
.hero--inner {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}

/* rem, not em: em here would resolve against the wrapper's inherited body size,
   not the display heading inside it, and collapse to a narrow column. */
.hero--inner .hero__copy {
  max-width: min(100%, 46rem);
}

.hero--inner .lede {
  max-width: 58ch;
  margin-top: 1.9rem;
}

/* ------------------------------------------------------------ 10. Factbar */

.factbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}

.factbar__item {
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.4rem);
  border-right: 1px solid var(--rule);
}

.factbar__item:first-child {
  padding-left: 0;
}

.factbar__item:last-child {
  border-right: 0;
  padding-right: 0;
}

.factbar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
  line-height: 1.2;
}

.factbar__body {
  color: var(--ink-muted);
  font-size: 0.97rem;
  line-height: 1.62;
}

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

  .factbar__item {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-inline: 0;
  }

  .factbar__item:last-child {
    border-bottom: 0;
  }
}

/* -------------------------------------------------------------- 11. Cards */

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.card__body {
  color: var(--ink-muted);
  font-size: 0.97rem;
}

.card--link {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.card--link:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 123, 255, 0.4);
  box-shadow: 0 22px 40px -26px rgba(10, 27, 60, 0.45);
}

/* Image-topped card — the workhorse of this register */
.card--media {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.card--media .card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ice);
  position: relative;
}

.card--media .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.card--media:hover .card__media img {
  transform: scale(1.045);
}

.card--media .card__inner {
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.card__icon {
  width: 44px;
  height: 44px;
  color: var(--cobalt);
}

.card__icon svg,
.card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pain-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.pain-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.925rem;
  line-height: 1.58;
  color: var(--ink-muted);
}

.pain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1.5px;
  background: var(--cobalt);
}

/* ---------------------------------------------------------------- 11b. FAQ */

.faq {
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}

/* Safari still paints the default disclosure triangle without this. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: '+';
  flex: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cobalt);
  transition: transform 0.25s var(--ease);
}

.faq__item[open] .faq__q::after {
  transform: rotate(45deg);
}

.faq__q:hover {
  color: var(--cobalt);
}

.faq__q:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

.faq__a {
  max-width: 78ch;
  margin: 0;
  padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--ink-muted);
}

/* -------------------------------------------------------- 12. Step / index */

.steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.step {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background 0.3s var(--ease);
}

.step:hover {
  background: var(--ice-warm);
}

.step__number {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--cobalt);
  padding-top: 0.35rem;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.step__body {
  color: var(--ink-muted);
  font-size: 1rem;
}

@media (max-width: 780px) {
  .step {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .step__body {
    grid-column: 2;
  }
}

/* ---------------------------------------------------- 13. Division blocks */

.division {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
  align-items: start;
}

.division__index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--cobalt);
  margin-bottom: 1.1rem;
  display: block;
}

.division__name {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.division__summary {
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: 1.06rem;
  max-width: 46ch;
}

.capability-list {
  display: grid;
  gap: 0;
}

.capability-list li {
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.capability-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cobalt);
  flex: none;
  transform: rotate(45deg);
}

.capability-list li:first-child {
  border-top: 1px solid var(--rule);
}

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

/* -------------------------------------------------------------- 14. Table */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--ice);
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.data-table td {
  padding: 1.15rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-muted);
}

.data-table td:first-child {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.data-table tr:hover td {
  background: var(--ice-warm);
}

/* -------------------------------------------------------------- 15. Tiers */

.tier {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--navy);
  border-radius: 0 0 3px 3px;
  padding: clamp(1.8rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -30px rgba(10, 27, 60, 0.5);
}

.tier__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

.tier__summary {
  color: var(--ink-muted);
  font-size: 0.97rem;
}

.tier__includes {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.tier__includes li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.94rem;
  color: var(--ink-muted);
}

.tier__includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.42rem;
  height: 0.72rem;
  border-right: 2px solid var(--cobalt);
  border-bottom: 2px solid var(--cobalt);
  transform: rotate(45deg);
}

.tier__cta {
  margin-top: auto;
  padding-top: 1.4rem;
}

/* -------------------------------------------------------- 16. Split panel */

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

.panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* aspect-ratio height is 0.7x the previous 16/9 box (9 * 0.7 = 6.3), so the
   box itself is shorter while staying full width — the --ice ground still
   fills the panel edge-to-edge with no white margins. */
.panel__media {
  aspect-ratio: 16 / 6.3;
  overflow: hidden;
  background: var(--ice);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Box runs full width so the --ice ground fills the panel with no white
   margins on the sides. Source files are pre-cropped to their content
   bounding box (the vemaps.com watermark was physically cropped out), so
   object-fit: contain shows the whole flag-map with no cropping of the
   country outline, then scaled down by 0.7x within the ice box. */
.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(0.7);
}

.panel__inner {
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex: 1;
}

.panel__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cobalt);
}

.panel__place {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.panel__body {
  color: var(--ink-muted);
  font-size: 0.99rem;
}

.panel--plain .panel__inner {
  padding-top: clamp(1.6rem, 2.4vw, 2.2rem);
}

.panel--roadmap {
  background: var(--ice-warm);
  border-style: dashed;
}

.posture-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.4rem;
}

.posture-list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.96rem;
  color: var(--ink-muted);
  line-height: 1.58;
}

.posture-list--yes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 0.44rem;
  height: 0.76rem;
  border-right: 2px solid var(--cobalt);
  border-bottom: 2px solid var(--cobalt);
  transform: rotate(45deg);
}

.posture-list--no li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.7rem;
  height: 2px;
  background: var(--slate);
}

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

/* ------------------------------------------------------------- 17. People */

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

.person {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}

.person__portrait {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  flex: none;
}

.person__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}

.person__role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.42rem;
  line-height: 1.5;
}

.person__quote {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

.person__link {
  margin-top: 1rem;
  display: inline-flex;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--cobalt);
}

.person__link:hover {
  text-decoration: underline;
}

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

/* ------------------------------------------------------- 18. Founder block */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.24fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.founder__portrait {
  aspect-ratio: 4 / 5;
  background: var(--navy);
  border-radius: 3px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5rem);
  letter-spacing: -0.03em;
}

.founder__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__story p {
  font-size: 1.09rem;
  line-height: 1.68;
  color: var(--ink-muted);
  margin-bottom: 1.3rem;
}

.founder__story p:first-of-type {
  font-size: 1.22rem;
  color: var(--ink);
  font-weight: 500;
}

.founder__meta {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

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

  .founder__portrait {
    max-width: 260px;
  }
}

/* Draft / review notices — amber, deliberately visible */
.notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fff8e6;
  border: 1px solid #f0d091;
  border-left: 3px solid #d99b13;
  border-radius: 2px;
  padding: 0.95rem 1.2rem;
  font-size: 0.9rem;
  color: #6b4c07;
  margin-top: 1.6rem;
}

.notice__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  padding-top: 0.15rem;
}

/* -------------------------------------------------------------- 19. Quote */

.pullquote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.9vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  max-width: 22ch;
}

.pullquote--wide {
  max-width: 26ch;
}

/* ----------------------------------------------------------- 20. Contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

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

.field {
  margin-bottom: 1.5rem;
}

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.field__req {
  color: var(--cobalt);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(46, 123, 255, 0.16);
}

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

.field--error input,
.field--error textarea {
  border-color: #c0392b;
}

.field__error {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.87rem;
  color: #c0392b;
  font-weight: 600;
}

/* Honeypot — off-screen rather than display:none so bots still see it */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error-summary {
  background: #fdecea;
  border: 1px solid #f5c2bd;
  border-left: 3px solid #c0392b;
  border-radius: 2px;
  padding: 1rem 1.2rem;
  margin-bottom: 2rem;
  color: #86261a;
  font-size: 0.94rem;
  font-weight: 600;
}

.aside-card {
  background: var(--ice);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 1.5rem;
}

.aside-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}

.aside-card__body {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.aside-card dl {
  margin: 0;
}

.aside-card dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.1rem;
}

.aside-card dt:first-child {
  margin-top: 0;
}

.aside-card dd {
  margin: 0.35rem 0 0;
  font-weight: 600;
  font-size: 0.97rem;
}

.booking-frame {
  width: 100%;
  min-height: 620px;
  border: 0;
  border-radius: 3px;
}

.success-panel {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--cobalt);
  border-radius: 0 0 3px 3px;
  background: #fff;
  padding: clamp(2rem, 4vw, 3.2rem);
  max-width: 44rem;
}

/* --------------------------------------------------------------- 21. Legal */

.legal-body h2 {
  font-size: 1.32rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
  line-height: 1.72;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.4rem;
}

/* ------------------------------------------------------------ 22. CTA band */

.cta-band {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.cta-band__mark {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(38%, 420px);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.cta-band__title {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.1;
}

.cta-band__body {
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, 0.74);
  max-width: 52ch;
}

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

/* -------------------------------------------------------------- 23. Footer */

.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.93rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem;
}

.footer__logo img {
  height: 64px;
  width: auto;
  margin-bottom: 1.3rem;
}

.footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 1.15rem;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.footer__list a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer__cookie-btn {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  font-family: inherit;
}

.footer__cookie-btn:hover {
  color: #fff;
}

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

  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------ 24. Cookie banner */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: #fff;
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -12px 34px -22px rgba(10, 27, 60, 0.5);
  transform: translateY(110%);
  transition: transform 0.45s var(--ease);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.3rem;
}

.cookie-banner__text {
  font-size: 0.92rem;
  color: var(--ink-muted);
  max-width: 68ch;
}

.cookie-banner__text a {
  color: var(--cobalt);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* Reject carries the same visual weight as Accept — a GDPR requirement,
   not just an accessibility nicety. */
.cookie-banner__actions .btn {
  padding: 0.72rem 1.35rem;
  font-size: 0.9rem;
}

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

/* ------------------------------------------------------------ 25. Errors */

.error-page {
  padding-block: clamp(5rem, 12vw, 10rem);
  text-align: center;
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--cobalt);
  margin-bottom: 1.6rem;
}

.error-page .lede {
  margin-inline: auto;
  margin-top: 1.5rem;
}

.error-page .btn-row {
  justify-content: center;
}

/* ------------------------------------------------- 26. Motion / reveal */

/* Hidden only when JS is present to reveal it again — see /js/js-on.js. With
   JavaScript disabled the .js class is never set and content stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Cursor parallax: each .pz group carries its own --depth (0 = fixed,
   1 = furthest travel), set inline per-group in hero-figure.ejs. --hero-px/
   --hero-py (-1..1, set in main.js) inherit down from .hero, so one
   pointermove listener drives every layer at a different rate — the control
   point (deepest) leads, the background grid barely moves. */
.hero-figure .pz {
  transition: transform 0.5s var(--ease);
  transform: translate3d(
    calc(var(--hero-px, 0) * var(--depth, 0) * 22px),
    calc(var(--hero-py, 0) * var(--depth, 0) * 22px),
    0
  );
}

/* The hero figure's own animation, paused when motion is reduced */
.hero-figure__pulse {
  animation: mx-pulse 4.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes mx-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.hero-figure__dash {
  stroke-dasharray: 5 7;
  animation: mx-flow 3.2s linear infinite;
}

@keyframes mx-flow {
  to {
    stroke-dashoffset: -24;
  }
}

.motion-media {
  border-radius: 3px;
  overflow: hidden;
  background: var(--ice);
}

.motion-media img,
.motion-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-bleed image band. Decorative: hidden from assistive tech. */
.motion-band {
  background: var(--navy);
  overflow: hidden;
  line-height: 0;
  position: relative;
}

/* Scaled slightly past the frame so the cursor parallax shift never exposes
   an edge. The translate is driven by --band-px/--band-py, set in main.js
   from pointermove; both default to 0, so with no pointer the image sits
   exactly where it did before. */
.motion-band img {
  width: 100%;
  height: clamp(200px, 26vw, 340px);
  object-fit: cover;
  object-position: center;
  transform: scale(1.06)
    translate3d(calc(var(--band-px, 0) * -14px), calc(var(--band-py, 0) * -10px), 0);
  transition: transform 0.35s var(--ease);
  will-change: transform;
}

.motion-band__wave,
.motion-band__flow,
.motion-band__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --band-t drives both the sheen and the wave from a single 0->1 sweep,
   registered as an animatable number so calc() can place the gradients'
   centre at an exact, continuous position — no background-size/tiling
   arithmetic, so the sweep is visible for its entire on-screen travel
   instead of fading in and out at unpredictable points. -20% to 120% means
   the centre starts and ends fully off-canvas, so it enters and leaves
   cleanly at the edges rather than popping in mid-band. */
@property --band-t {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@keyframes band-sweep {
  from { --band-t: 0; }
  to { --band-t: 1; }
}

/* Pixel-displacement wave. A duplicate of the band image, revealed only
   through a narrow window that sweeps left to right in step with the sheen.
   The duplicate uses the exact same scale as the base image (only main.js's
   cursor offset plus one small constant shift), so the two stay a fixed
   distance apart at every point in the frame — a uniform ripple, not a
   mismatch that grows toward the edges. Same image, so no colour is
   introduced. */
.motion-band__wave {
  overflow: hidden;
  line-height: 0;
  mask-image: linear-gradient(
    100deg,
    transparent calc(-20% + var(--band-t) * 140% - 16%),
    rgba(0, 0, 0, 0.5) calc(-20% + var(--band-t) * 140% - 8%),
    #000 calc(-20% + var(--band-t) * 140%),
    rgba(0, 0, 0, 0.5) calc(-20% + var(--band-t) * 140% + 8%),
    transparent calc(-20% + var(--band-t) * 140% + 16%)
  );
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent calc(-20% + var(--band-t) * 140% - 16%),
    rgba(0, 0, 0, 0.5) calc(-20% + var(--band-t) * 140% - 8%),
    #000 calc(-20% + var(--band-t) * 140%),
    rgba(0, 0, 0, 0.5) calc(-20% + var(--band-t) * 140% + 8%),
    transparent calc(-20% + var(--band-t) * 140% + 16%)
  );
  animation: band-sweep 9s linear infinite;
}

.motion-band__wave img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06)
    translate3d(calc(var(--band-px, 0) * -14px + 9px), calc(var(--band-py, 0) * -10px + 4px), 0);
  transition: transform 0.35s var(--ease);
  will-change: transform;
}

/* Live-data sheen: a narrow translucent-white band sweeping left to right in
   the same 9s loop as the wave, reading as throughput moving through the
   tunnel. Additive white only — it lightens, never recolours, so the
   artwork's palette is intact. */
.motion-band__flow {
  background: linear-gradient(
    100deg,
    transparent calc(-20% + var(--band-t) * 140% - 11%),
    rgba(255, 255, 255, 0.05) calc(-20% + var(--band-t) * 140% - 5%),
    rgba(255, 255, 255, 0.13) calc(-20% + var(--band-t) * 140%),
    rgba(255, 255, 255, 0.05) calc(-20% + var(--band-t) * 140% + 5%),
    transparent calc(-20% + var(--band-t) * 140% + 11%)
  );
  animation: band-sweep 9s linear infinite;
}

/* Cursor-follow glow, same idea as the hero spotlight. Fades in only once
   main.js confirms a fine pointer with motion allowed. */
.motion-band__glow {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(
    420px circle at var(--band-mx, 50%) var(--band-my, 50%),
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.04) 45%,
    transparent 72%
  );
}

.motion-band.has-pointer .motion-band__glow {
  opacity: 1;
}

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-figure__pulse,
  .hero-figure__dash {
    animation: none;
  }

  .hero__spotlight {
    display: none;
  }

  .motion-band__wave,
  .motion-band__flow,
  .motion-band__glow {
    display: none;
  }

  .motion-band img {
    transform: scale(1.06);
    transition: none;
  }

  .hero-figure .pz {
    transition: none;
    transform: none;
  }

  .btn:hover,
  .card--link:hover,
  .tier:hover {
    transform: none;
  }

  .card--media:hover .card__media img {
    transform: none;
  }

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

/* ------------------------------------------------------------- 27. Print */

@media print {
  .header,
  .cookie-banner,
  .cta-band,
  .footer {
    display: none;
  }

  body {
    color: #000;
  }
}

/* ------------------------------------------------------- 28. Live monitor */

/* Severity behaves like a threat/status level (project44-style ops
   dashboard reference), not a generic magnitude -- a status-style
   green -> amber -> red ramp, distinct from the blue sequential ramp used
   for other magnitude data elsewhere on the site. Never the only channel:
   every marker also carries a numeric label and a text tooltip. */
:root {
  --severity-1: #22c55e;
  --severity-2: #84cc16;
  --severity-3: #fbbf24;
  --severity-4: #f97316;
  --severity-5: #ef4444;
}

.live-unavailable {
  background: var(--ground-alt);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 480;
  min-height: 320px;
  /* A section of the page, not the whole screen -- aspect-ratio alone
     would make this taller than the viewport on wide desktop windows. */
  max-height: 60vh;
  border-radius: 6px;
  /* CARTO's dark-matter basemap paints its own background layer once
     loaded; this is only the fallback color shown for the instant before
     the style/tiles finish their first fetch. */
  background: #0e0e0e;
  /* Not overflow:hidden: the War Room investigate section (section 29) can
     make .world-map__popup taller than the map box itself, especially near
     the bottom edge -- clipping it there would silently hide the results
     panel. The canvas gets its own border-radius immediately below so the
     map still reads as rounded; only children that intentionally extend
     past the box (popups) are now allowed to. */
  overflow: visible;
  margin-bottom: 1rem;
}

.world-map .maplibregl-map {
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
}

/* MapLibre adds its own "maplibregl-map" class to this same element at
   init and maplibre-gl.css sets `.maplibregl-map { overflow: hidden }` --
   same specificity as .world-map's own rule above, loaded after it in the
   document, so it would otherwise win and re-clip popups. Two classes on
   one selector beats one class regardless of source order. */
.world-map.maplibregl-map {
  overflow: visible;
}

.world-map .maplibregl-canvas {
  border-radius: 6px;
}

/* Top-left (not bottom-left): MapLibre's own AttributionControl now lives
   at bottom-left, required for the CARTO basemap. */
.world-map__updated {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
  font-family: var(--font-mono);
  z-index: 1;
}

/* Distinct shape (arrow) and hue (cyan) from the disruption markers
   (colored circles) -- two different entities never share one visual
   channel. MapLibre's own Marker.setRotation() rotates the whole marker
   wrapper (map-aligned), so no manual heading CSS var is needed here. */
.world-map__vessel {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-map__vessel::before {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--cyan);
  clip-path: polygon(50% 0%, 100% 100%, 50% 78%, 0% 100%);
  filter: drop-shadow(0 0 3px var(--cyan));
}

.world-map__vessel:hover::before,
.world-map__vessel:focus-visible::before {
  filter: drop-shadow(0 0 5px #fff);
}

.world-map__legend-vessel {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--cyan);
}

.world-map__tooltip {
  position: absolute;
  translate: -50% calc(-100% - 10px);
  max-width: 260px;
  background: #fff;
  color: var(--ink);
  border-radius: 3px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 16px 32px -16px rgba(6, 15, 38, 0.5);
  pointer-events: none;
  z-index: 2;
}

.world-map__tooltip-severity {
  display: block;
  font-size: 0.9rem;
}

.world-map__tooltip-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.world-map__tooltip-summary {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Click popup for the native MapLibre circle event layer (events-dots).
   maplibre-gl.css supplies the tip/close-button/positioning mechanics for
   .maplibregl-popup; this just re-skins the content box to match the
   site's dark surfaces instead of MapLibre's white default. */
.world-map__popup .maplibregl-popup-content {
  background: var(--navy-deep, #0a1628);
  color: #fff;
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 16px 32px -16px rgba(6, 15, 38, 0.6);
}

.world-map__popup .maplibregl-popup-tip {
  border-top-color: var(--navy-deep, #0a1628);
  border-bottom-color: var(--navy-deep, #0a1628);
}

.world-map__popup .maplibregl-popup-close-button {
  color: rgba(255, 255, 255, 0.7);
}

.world-map__popup-severity {
  display: block;
  font-size: 0.9rem;
}

.world-map__popup-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.15rem;
}

.world-map__popup-summary {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.world-map__popup-source {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--cyan);
}

.world-map__legend {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(6, 15, 38, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0.4rem 0.7rem;
}

.world-map__legend-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.world-map__legend-label {
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.15rem;
}

.world-map__legend-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-family: var(--font-mono);
}

.world-map__legend-swatch--1 { background: var(--severity-1); color: #fff; }
.world-map__legend-swatch--2 { background: var(--severity-2); color: #fff; }
.world-map__legend-swatch--3 { background: var(--severity-3); color: #fff; }
.world-map__legend-swatch--4 { background: var(--severity-4); color: var(--navy); }
.world-map__legend-swatch--5 { background: var(--severity-5); color: var(--navy); }

.world-map__legend-line {
  width: 1.1rem;
  height: 0;
  border-top: 1px solid #5b7699;
}

.world-map__caption {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.live-feed__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.live-feed__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.live-feed__search,
.live-feed__sort {
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.55rem 0.8rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.live-feed__search {
  min-width: 15rem;
}

.live-feed__search:focus,
.live-feed__sort:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(46, 123, 255, 0.16);
}

.live-feed__count {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* Capped height + internal scroll: with a live feed that can carry
   hundreds of events, an uncapped list would push everything below it
   (the War Room explainer moved above this section specifically to avoid
   that, but the feed itself still needs its own bound) an unbounded
   distance down the page. */
.live-feed__list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 0.4rem;
}

/* role="button"/tabindex on the <li> itself (see live.ejs / live.js
   renderFeed): clicking or Enter/Space-ing an item flies the map to it and
   opens its popup, so this needs visible interactive affordance. */
.live-feed__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.live-feed__item:hover,
.live-feed__item:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
  outline: none;
}

.live-feed__severity {
  font-family: var(--font-mono);
  font-weight: 700;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.85rem;
}

.live-feed__severity--1 { background: var(--severity-1); }
.live-feed__severity--2 { background: var(--severity-2); }
.live-feed__severity--3 { background: var(--severity-3); }
.live-feed__severity--4 { background: var(--severity-4); color: var(--navy); }
.live-feed__severity--5 { background: var(--severity-5); color: var(--navy); }

.live-feed__category {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.live-feed__location {
  font-weight: 600;
  grid-column: 3;
}

.live-feed__summary {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  margin: 0;
}

.live-feed__source {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------- 29. War room */

/* "Investigate" section appended to the disruption popup
   (public/js/live-warroom.js). It lives inside the same dark
   .world-map__popup surface as the rest of the popup (section 28 above),
   so it inherits that dark-on-navy treatment rather than introducing a
   second visual language inside one popup. Gating states (locked teaser,
   unlock form, progress, results) are separate blocks below in that order.
   See docs/internal/WARROOM_BUILD_PLAN.md §10 for the access model. */

.warroom-panel {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* -- locked teaser + request-access/demo CTAs -------------------------- */

.warroom-teaser__title {
  display: block;
  font-size: 0.85rem;
  color: #fff;
}

.warroom-teaser__body {
  margin: 0.35rem 0 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.warroom-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* -- "already have a code?" inline unlock form --------------------------- */

.warroom-unlock {
  margin-top: 0.6rem;
}

.warroom-unlock__toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.76rem;
  color: var(--cyan);
  text-decoration: underline;
  cursor: pointer;
}

.warroom-unlock-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* The class rule above sets display:flex at the same specificity as the
   browser's default `[hidden] { display: none }` -- without this, setting
   the `hidden` attribute in live-warroom.js would stop actually hiding
   the form once this stylesheet loads. */
.warroom-unlock-form[hidden] {
  display: none;
}

.warroom-unlock-form__input {
  flex: 1 1 120px;
  min-width: 0;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.warroom-unlock-form__input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.warroom-unlock-form__input:focus {
  outline: none;
  border-color: var(--cyan);
}

.warroom-unlock-form__error {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #ff9d9d;
}

/* -- unlocked idle / in-flight states ------------------------------------ */

.warroom-investigate-btn {
  width: 100%;
  justify-content: center;
}

.warroom-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.warroom-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: warroom-spin 0.8s linear infinite;
}

@keyframes warroom-spin {
  to {
    transform: rotate(360deg);
  }
}

.warroom-progress__text {
  margin: 0;
  font-size: 0.85rem;
  color: #fff;
}

.warroom-progress__note {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

/* -- unavailable / rate-limited / failed messages ------------------------ */

.warroom-message p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
}

.warroom-message--error p {
  color: #ff9d9d;
}

/* -- completed results panel: summary, tables, actions, citations ------- */

.warroom-results {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.3rem;
}

.warroom-results__capped {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 2px;
  background: rgba(251, 191, 36, 0.15);
  color: #fde68a;
  font-size: 0.75rem;
}

.warroom-results__summary {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

/* -- impact badge: at-a-glance signal above the summary -------------------
   Backgrounds are low-opacity tints of the map's own severity ramp (section
   28) -- reusing the validated palette rather than inventing new hues, same
   posture as the confidence pills below. "none" gets the identical treatment
   as every other level (icon + colored surface + subtitle), not a bare
   empty state -- a real no-impact result should read as confident, not
   shallow. Icon foreground colors mirror .world-map__legend-swatch's own
   contrast choices (white on green/lime/amber, navy on red). */
.warroom-impact-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
}

.warroom-impact-badge__icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.warroom-impact-badge__label {
  display: block;
  font-size: 0.85rem;
  color: #fff;
}

.warroom-impact-badge__reason {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.warroom-impact-badge--none {
  background: rgba(34, 197, 94, 0.15);
}

.warroom-impact-badge--none .warroom-impact-badge__icon {
  background: var(--severity-1);
  color: #fff;
}

.warroom-impact-badge--low {
  background: rgba(132, 204, 22, 0.15);
}

.warroom-impact-badge--low .warroom-impact-badge__icon {
  background: var(--severity-2);
  color: #fff;
}

.warroom-impact-badge--moderate {
  background: rgba(251, 191, 36, 0.15);
}

.warroom-impact-badge--moderate .warroom-impact-badge__icon {
  background: var(--severity-3);
  color: #fff;
}

.warroom-impact-badge--severe {
  background: rgba(239, 68, 68, 0.15);
}

.warroom-impact-badge--severe .warroom-impact-badge__icon {
  background: var(--severity-5);
  color: var(--navy);
}

/* -- at-a-glance impact strip: collapsed entry point into the category
   tables below (section further down), instead of always showing every
   table stacked open. */
.warroom-impact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.warroom-impact-strip__item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.warroom-impact-strip__item:hover,
.warroom-impact-strip__item:focus-visible {
  border-color: var(--cyan);
  background: rgba(70, 211, 255, 0.1);
  outline: none;
}

.warroom-impact-strip__item[aria-expanded='true'] {
  border-color: var(--cyan);
  background: rgba(70, 211, 255, 0.16);
}

.warroom-impact-strip__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}

.warroom-impact-strip__count {
  font-weight: 700;
  font-size: 0.85rem;
}

.warroom-impact-strip__label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
}

.warroom-table {
  margin-bottom: 0.75rem;
}

.warroom-table__heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.warroom-table__list,
.warroom-actions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.warroom-table__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.warroom-table__name {
  font-weight: 600;
  color: #fff;
}

/* Reuses the severity ramp's semantics (green/amber/muted), not its
   literal role -- confidence isn't severity, but "good/caution/unclear"
   maps cleanly onto the same three-step ramp already established. */
.warroom-table__confidence {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
  border: 1px solid currentColor;
}

.warroom-table__confidence--high {
  color: var(--severity-1);
}

.warroom-table__confidence--medium {
  color: var(--severity-3);
}

.warroom-table__confidence--low {
  color: rgba(255, 255, 255, 0.55);
}

/* Every table row carries its own citation link -- never a claim with no
   visible source (WARROOM_API_CONTRACT.md hard rule). */
.warroom-table__source {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--cyan);
}

.warroom-actions__item {
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.warroom-actions__item:first-child {
  padding-top: 0;
  border-top: none;
}

.warroom-actions__urgency {
  display: inline-block;
  margin-bottom: 0.2rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.05rem 0.4rem;
  border-radius: 8px;
}

.warroom-actions__urgency--high {
  background: var(--severity-5);
  color: #fff;
}

.warroom-actions__urgency--medium {
  background: var(--severity-3);
  color: var(--navy);
}

.warroom-actions__urgency--low {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.warroom-actions__action {
  margin: 0;
  font-size: 0.82rem;
  color: #fff;
}

.warroom-actions__rationale {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
}

/* -- sources panel: source-diversity signal computed client-side from
   result.findings (sourceType breakdown) -- a first-class element, not a
   citation link buried on each row. */
.warroom-sources {
  margin-bottom: 0.75rem;
}

.warroom-sources__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.warroom-sources__chip {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

/* -- related incidents: informational chips only, no click behavior --
   there's no cross-event navigation mechanism in this popup system yet, and
   building one is out of scope here (v1 is just the titles). */
.warroom-related {
  margin-bottom: 0.75rem;
}

.warroom-related__heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.warroom-related__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.warroom-related__chip {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
}

/* -- investigation metadata: a trust signal (cost/depth/elapsed time), kept
   deliberately secondary -- caption-sized and muted, never competing with
   the summary or the actions above it. */
.warroom-results__meta {
  margin: 0.5rem 0 0;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
}

.warroom-results__disclaimer {
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------ 30. War room explainer */

/* The "Investigate" action only lives inside a clicked event's popup
   (section 29) -- a visitor who never clicks a marker has no way to know
   it exists. This section makes the capability visible on the page itself,
   in the site's normal light editorial register. The preview card on the
   right is deliberately a dark surface (same --navy-deep as the real
   popup, section 28) so the real .warroom-impact-badge/-strip/-sources
   classes nested inside it render pixel-identical to production instead of
   needing a screenshot or any stock imagery (this site's "No photography"
   constraint applies here too) -- it's the product's own real UI with
   static, clearly-labeled illustrative content. */
.section--warroom-intro {
  border-top: 1px solid var(--rule);
}

.warroom-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.warroom-intro__features {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.warroom-intro__features li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.warroom-intro__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cobalt);
}

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

.warroom-intro__cta {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.warroom-intro__preview {
  background: var(--navy-deep, #0a1628);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.3rem;
  box-shadow: 0 16px 32px -16px rgba(6, 15, 38, 0.6);
}

.warroom-intro__preview-label {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

/* Real product screenshots (not stock imagery -- see live.ejs's comment on
   this block), scroll-snap carousel so it works with zero JS as a bare
   swipeable/scrollable strip; the prev/next buttons (wired in live.js) are
   a progressive enhancement on top, not load-bearing. Slides are plain
   white cards floating on the dark preview surface -- most of these
   screenshots have their own white chrome (browser/page background), so a
   white card frame reads as intentional, not a mismatched background. */
.warroom-slider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.warroom-slider__track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 4px;
}

.warroom-slider__track::-webkit-scrollbar {
  display: none;
}

.warroom-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.warroom-slider__slide img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}

.warroom-slider__slide figcaption {
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
  border-top: 1px solid var(--rule);
}

.warroom-slider__nav {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.warroom-slider__nav:hover,
.warroom-slider__nav:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

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