/* ==========================================================================
   Mission Guild site styles ("Signal Path").
   Tokens (colours, fonts, spacing) live in tokens.css. Sections:
     1. Base            6. Index sections        11. Reveal on scroll
     2. Layout          7. Shared diagram styles  12. Reduced motion
     3. Buttons/links   8. Hero flow diagram
     4. Header + nav    9. EPZ chapter diagrams
     5. Footer         10. Contact
                       13. Glass panels
                       14. Slick-sheet content (EPZ, ATOA3S)
   Breakpoints: 1023px (nav collapses, columns stack) and 767px (phone).
   ========================================================================== */

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

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background-color: var(--bg);
  /* Soft brand glow at the top instead of the 1.3 MB background SVG */
  background-image: radial-gradient(ellipse 90% 520px at 50% -120px, var(--glow), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  max-width: 20ch;
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

p {
  margin: 0 0 1rem;
}

figure {
  margin: 0;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.skip-link:focus {
  top: 0.75rem;
}

/* 2. Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Wider content on very wide screens: the home page a little (+13%), News by half
   (+50%, so far more of each story is visible at once) */
.page-home {
  --wrap: 1360px;
}

.page-news {
  --wrap: 1560px;
}

/* Every section is see-through: no fill, so the fixed horizon (.backdrop) shows behind
   the whole page. Its text sits on .glass panels (section 13). The generous padding
   is what separates one section from the next, with the horizon showing in between. */
.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

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

/* Two columns: lead (label, heading) + content */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* Text + diagram panel (EPZ chapters) */
.split--diagram {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
}

/* Chapter label, e.g. "01 / WHAT WE DO" */
.chapter,
.endpoint__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.chapter__num {
  color: var(--data);
  font-weight: 700;
}

.chapter::after {
  content: "";
  flex: 0 0 3rem;
  height: 1px;
  margin-left: 0.6rem;
  background: var(--line-strong);
}

.lead {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--muted);
  margin: 1rem 0 0;
}

.prose p {
  color: var(--text);
}

.prose p + p {
  margin-top: 1rem;
}

.tagline {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.35;
  color: var(--governed);
  max-width: 20ch;
}

/* 3. Buttons and links --------------------------------------------------- */
a {
  color: var(--data);
}

.button,
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.button::after {
  content: "→";
  transition: transform 0.2s ease;
}

.button:hover,
.map-link:hover {
  background-color: var(--accent-strong);
}

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

/* 4. Header and navigation ----------------------------------------------- */
.site-header {
  --focus: var(--chrome-highlight); /* header is always navy */
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--gutter);
  background-color: var(--chrome-bg);
  color: var(--chrome-text);
  border-bottom: 1px solid var(--chrome-line);
  backdrop-filter: blur(8px);
}

.brand {
  display: block;
  flex-shrink: 0;
}

.brand img {
  display: block;
  height: 2.6rem;
  width: auto;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.header-right a {
  padding: 0.5rem 0.9rem;
  color: var(--chrome-text);
  font-size: 0.95rem;
  text-decoration: none;
  text-underline-offset: 6px;
}

.header-right a:hover,
.header-right a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--chrome-highlight);
  text-decoration-thickness: 2px;
}

.header-right a.contactButton {
  margin-left: 0.5rem;
  padding: 0.6rem 1rem;
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-decoration: none;
}

.header-right a.contactButton:hover {
  background-color: var(--accent-strong);
}

.theme-toggle,
.menu-button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--chrome-line-strong);
  border-radius: 50%;
  color: var(--chrome-text);
  cursor: pointer;
}

.theme-toggle:hover,
.menu-button:hover {
  border-color: var(--chrome-highlight);
}

.theme-toggle svg,
.menu-button svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Show the icon of the theme you'd switch TO */
.theme-toggle .icon-moon,
[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

html:not(.js) .theme-toggle {
  display: none; /* needs JS */
}

.menu-button {
  display: none;
  border-radius: 6px;
}

@media (max-width: 1023px) {
  .menu-button {
    display: grid;
  }

  .header-right {
    display: none;
  }

  .header-right.responsive {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background-color: var(--chrome-solid);
    border-bottom: 1px solid var(--chrome-line-strong);
  }

  .header-right.responsive a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--chrome-line-mid);
  }

  .header-right.responsive a.contactButton {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    text-align: center;
    border-bottom: 0;
  }
}

/* 5. Footer -------------------------------------------------------------- */
.site-footer {
  --focus: var(--chrome-highlight);
  background-color: var(--chrome-solid);
  color: var(--chrome-text);
  border-top: 1px solid var(--chrome-line);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
}

.site-footer__logo {
  height: 2.4rem;
  width: auto;
}

.site-footer p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--chrome-muted); /* 7.6:1 on navy */
  text-align: center;
}

.linkedin {
  display: block;
  padding: 0.25rem;
}

.linkedin img {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
}

/* 6. Index sections ------------------------------------------------------ */

/* Backdrop: the horizon scene from variation B (aurora, planet-rim horizon, dawn glow),
   drawn in CSS and STATIC: nothing in it moves. It is ONE fixed layer per page
   (<div class="backdrop"> right after <body>), so it stays put while the page scrolls:
   the hero and every section after it are transparent over it, and only their glass
   panels slide across it. Not background-attachment: fixed (iOS Safari ignores
   it and it repaints on scroll). Sized to the LARGE viewport (lvh, with a vh fallback),
   so the iOS toolbar showing or hiding never resizes it. Layers, back to front: sky,
   aurora, rays, planet horizon, sun, veil. --horizon sets the rim height.
   Light theme: the same layers in pale dawn colours (tokens.css, section 3).
   Modifiers: .backdrop--gold (EndPoint Zero), .backdrop--compact (short heroes: the
   rim sits just under the hero; site.js measures the hero into --hero-end). */
.backdrop {
  --horizon: 60%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background-color: var(--scene-void);
}

.backdrop--compact {
  --horizon: min(72%, calc(var(--hero-end, 46vh) - clamp(2rem, 5vw, 3.5rem)));
}

.backdrop > * {
  position: absolute;
  inset: 0;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background-color: transparent;
  color: var(--text);
}

.scene-sky {
  background:
    radial-gradient(120% 70% at 50% 100%, var(--scene-sky-low) 0%, var(--scene-sky-mid) 35%, var(--scene-void) 70%),
    var(--scene-void);
}

.scene-aurora {
  inset: -20%;
  background:
    radial-gradient(34% 26% at 32% 42%, var(--scene-aurora-1), transparent 70%),
    radial-gradient(30% 22% at 70% 34%, var(--scene-aurora-2), transparent 70%),
    radial-gradient(26% 16% at 54% 58%, var(--scene-aurora-3), transparent 70%),
    radial-gradient(20% 14% at 82% 62%, var(--scene-aurora-4), transparent 70%);
}

.scene-rays {
  /* faint light shafts rising from the horizon */
  background: repeating-linear-gradient(100deg,
    var(--scene-ray-clear) 0 50px,
    var(--scene-ray) 80px,
    var(--scene-ray-clear) 120px);
  -webkit-mask-image: radial-gradient(60% 75% at 50% 78%, var(--mask), transparent 70%);
  mask-image: radial-gradient(60% 75% at 50% 78%, var(--mask), transparent 70%);
}

.backdrop .scene-horizon {
  /* a vast planet curve: its lit rim is the horizon */
  inset: auto;
  left: 50%;
  top: var(--horizon);
  width: max(2600px, 240vw);
  aspect-ratio: 1;
  margin-left: calc(max(2600px, 240vw) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--scene-planet) 92%, var(--scene-planet-edge) 99%, var(--scene-planet-rim));
  box-shadow:
    inset 0 2px 0 var(--scene-rim-line),
    inset 0 18px 40px -10px var(--scene-rim-glow),
    0 -6px 40px 4px var(--scene-rim-glow),
    0 -40px 160px 30px var(--scene-rim-haze);
}

.backdrop .scene-sun {
  /* the dawn light cresting the rim */
  inset: auto;
  left: 50%;
  top: calc(var(--horizon) - 210px);
  width: min(1100px, 150vw);
  height: 420px;
  margin-left: calc(min(1100px, 150vw) / -2);
  background:
    radial-gradient(8% 4% at 50% 50%, var(--scene-sun-core), transparent),
    radial-gradient(30% 12% at 50% 50%, var(--scene-sun-halo), transparent),
    radial-gradient(50% 40% at 50% 50%, var(--scene-sun-wash), transparent);
}

.scene-veil {
  /* vignette at the edges */
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--scene-vignette) 100%);
}

/* Gold dawn for EndPoint Zero (gold = governed) */
.backdrop--gold .scene-aurora {
  background:
    radial-gradient(34% 26% at 30% 40%, var(--scene-aurora-1), transparent 70%),
    radial-gradient(28% 20% at 72% 38%, var(--scene-aurora-2), transparent 70%),
    radial-gradient(30% 18% at 52% 64%, var(--scene-gold-aurora), transparent 70%);
}

.backdrop--gold .scene-horizon {
  box-shadow:
    inset 0 2px 0 var(--scene-gold-rim-line),
    inset 0 18px 40px -10px var(--scene-gold-rim-glow),
    0 -6px 40px 4px var(--scene-gold-rim-glow),
    0 -40px 160px 30px var(--scene-rim-haze);
}

.backdrop--gold .scene-sun {
  background:
    radial-gradient(8% 4% at 50% 50%, var(--scene-gold-sun-core), transparent),
    radial-gradient(30% 12% at 50% 50%, var(--scene-gold-sun-halo), transparent),
    radial-gradient(50% 40% at 50% 50%, var(--scene-gold-sun-wash), transparent);
}

/* Text never sits directly on the scene: after the hero it is on a .glass panel
   (section 13). The last block in <main> grows to fill a short page. */
main {
  display: flex;
  flex-direction: column;
}

main > :last-child {
  flex-grow: 1;
}

.hero .lead {
  color: var(--text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--text);
}

/* The CMMC badge links to the CMMC section below */
.badge-wrap {
  margin: 0;
}

a.badge {
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.badge:hover {
  border-color: var(--governed);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.badge img {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.hero--compact {
  padding-bottom: clamp(5rem, 10vw, 8rem);
}


/* CMMC: Q&A stack + small diagram */
.stack {
  display: grid;
  gap: 1.75rem;
}

.qa {
  padding-left: 1.25rem;
  border-left: 2px solid var(--line-strong);
}

.qa p {
  margin: 0;
}

.mini-diagram {
  max-width: 320px;
}

/* What We Do: three cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Glass cards (class="card glass"): the surface comes from .glass */
.card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.glyph {
  width: 120px;
  height: 40px;
  margin-bottom: 1.5rem;
}

/* Services: three columns, EPZ column marked in gold */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Glass cards (class="service glass"); coloured top rule in section 13 */
.service {
  padding: 1.75rem;
}

.service--epz {
  display: flex;
  flex-direction: column;
}

.service--epz h3 {
  color: var(--governed);
}

.service--epz .button {
  align-self: flex-start;
  margin-top: auto;
}

.ticks {
  list-style: none;
  margin: 0.5rem 0 1.5rem;
  padding: 0;
}

.ticks li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}

.ticks li:last-child {
  border-bottom: 0;
}

/* Small square "packet" bullet */
.ticks li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 1.05em;
  width: 6px;
  height: 6px;
  background: var(--data);
}

.service--epz .ticks li::before {
  background: var(--governed);
}

/* What We Do pillars (cards above) ---------------------------------------- */
.card .glyph {
  flex-shrink: 0;
}

.card__lead {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--governed);
}

.card .ticks {
  margin-top: 0.25rem;
}

/* Items with a bold title over a short description (ATOA3S pillar) */
.ticks--titled li {
  color: var(--muted);
  line-height: 1.5;
}

.ticks--titled strong {
  display: block;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.card .button {
  align-self: flex-start;
  margin-top: auto;
}

.card h4 {
  margin: 1.25rem 0 0.4rem;
  font-size: 1.02rem;
  line-height: 1.3;
}

.card h4:first-of-type {
  margin-top: 0.25rem;
}

/* EndPoint Zero emblem: <svg class="epz-logo"><use href="images/epz-logo.svg#epz-mark"/></svg>.
   A flat single-colour mark with a transparent background; it follows `color` (gold = governed). */
.epz-logo {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  width: auto;
  height: 3rem;
  aspect-ratio: 100 / 121.66;
  color: var(--governed);
  overflow: visible;
}

/* In a card: same footprint as the other pillars' 40px glyphs, so the titles line up */
.epz-logo--card {
  margin: -0.25rem 0 calc(1.5rem - 0.25rem);
}

/* ATOA3S logo (images/atoa3s-logo.png, 400 x 404 raster: a light tile, so it reads on
   both themes). Shown at 2x density or more, never wider than 200px. */
.atoa3s-logo {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  aspect-ratio: 400 / 404;
  width: auto;
  height: 3rem;
  border-radius: 22%;
  box-shadow: 0 6px 18px -8px var(--glass-shadow);
}

/* In a card: same footprint as the EPZ mark beside it, so the pillar titles line up */
.atoa3s-logo--card {
  margin: -0.25rem 0 calc(1.5rem - 0.25rem);
}

/* On the ATOA3S hero, above the heading */
.atoa3s-logo--hero {
  height: clamp(4.5rem, 8vw, 6.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.card .card__intro {
  margin: 0 0 0.75rem;
}

/* On the EndPoint Zero hero, above the heading, over the scene */
.epz-logo--hero {
  height: clamp(4rem, 7vw, 5.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* Placeholders: visibly NOT final copy (dashed outline, muted italic).
   Text is --placeholder-text: 6.3:1 or better on its tint in both themes. */
.placeholder,
.card .placeholder {
  margin: 1rem 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1.5px dashed var(--placeholder-line);
  border-radius: 6px;
  background-color: var(--placeholder-bg);
  color: var(--placeholder-text);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Approval flag: anything marked data-approved="false" stays in the markup but is not shown */
[data-approved="false"] {
  display: none !important;
}

/* Latest news teaser */
.news-teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.news-teaser__list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

/* Home cards (js/news.js): date, title and opening sentence, text only. The whole card
   is the link (the title link's ::after covers it); the newest is the featured card. */
.news-card {
  position: relative;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.news-card:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.news-card .news-item__meta {
  margin: 0 0 0.35rem;
}

.news-card__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.news-card--featured .news-card__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.news-card__title a {
  color: var(--text);
  text-decoration-color: var(--data);
  text-underline-offset: 4px;
}

.news-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}

.news-card__title a:hover {
  color: var(--data);
}

.news-card__title a:focus-visible {
  outline: none;
}

.news-card__title a:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.news-card__excerpt {
  display: -webkit-box;
  margin: 0.6rem 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Partners: centred row of logo tiles, so even one logo looks intentional */
.partners-block {
  text-align: center;
}

.partners-block .chapter {
  justify-content: center;
}

.partners-block .chapter::before {
  content: "";
  flex: 0 0 3rem;
  height: 1px;
  margin-right: 0.6rem;
  background: var(--line-strong);
}

/* Three tiles per row on wide screens (so six make two even rows), two on phones */
.partners {
  list-style: none;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.partner {
  flex: 0 1 300px;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 1.25rem 1.5rem;
  background-color: var(--tile);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* --logo-scale (inline, per logo) evens out optical size: compact marks get more height */
.partner img {
  max-height: calc(5rem * var(--logo-scale, 1));
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Linked logos: the link fills the tile so the whole tile is the target */
.partner__link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.partner:has(.partner__link:hover) {
  border-color: var(--line-strong);
}

.partner__link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* Artwork drawn for a light ground (dark details) gets its own small light badge */
.partner--light img {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background-color: var(--tile-light);
}

@media (max-width: 767px) {
  .partners {
    gap: 0.75rem;
  }

  .partner {
    flex-basis: calc(50% - 0.375rem);
    padding: 0.9rem 0.75rem;
  }

  .partner img {
    max-height: calc(3.5rem * var(--logo-scale, 1));
  }
}

/* News page ---------------------------------------------------------------- */
/* The newest story gets its own panel (.news-item--featured); the rest share one panel,
   divided by rules. Every image is a button that opens the lightbox (js/news.js). */
.news-list {
  display: grid;
  gap: 2rem;
}

/* Keep lines readable when the panel is very wide */
.news-item__body {
  max-width: 85ch;
}

.news-archive.glass {
  border-left: 3px solid var(--data);
}

.news-divider {
  height: 0;
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.news-item--featured.glass {
  border-left: 3px solid var(--governed);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.news-flag {
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  background-color: var(--governed);
  color: var(--on-governed);
  font-weight: 700;
}

.news-item h2 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
}

.news-item--featured h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
}

.news-item__body h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
}

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

/* One portrait or square image: beside the text on wide screens */
@media (min-width: 900px) {
  .news-item--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }

  .news-item--featured.news-item--aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }
}

/* Wide screens: bigger side pictures, and a photo gallery beside the text, not under it */
@media (min-width: 1280px) {
  .news-item--aside {
    grid-template-columns: minmax(0, 85ch) minmax(0, 1fr);
  }

  .news-item--featured.news-item--aside {
    grid-template-columns: minmax(0, 85ch) minmax(0, 34rem);
    justify-content: space-between;
  }

  .news-item--gallery {
    display: grid;
    grid-template-columns: minmax(0, 85ch) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }

  .news-item--gallery .news-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }

  /* An odd number of pictures: the first one spans both columns, so none is left alone */
  .news-item--gallery .news-gallery > :first-child:nth-last-child(2n + 1) {
    grid-column: span 2;
  }

  .news-item--aside .news-item__media {
    max-width: 34rem;
  }
}

.news-item__media {
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .news-item--aside .news-item__media {
    margin-top: 0;
  }
}

/* Phones: the featured story leads with its picture */
@media (max-width: 899px) {
  .news-item--featured.news-item--aside {
    display: flex;
    flex-direction: column;
  }

  .news-item--featured .news-item__media {
    order: -1;
    margin: 0 0 1.25rem;
  }
}

.tag-placeholder {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1.5px dashed var(--placeholder-line);
  border-radius: 4px;
  background-color: var(--placeholder-bg);
  color: var(--placeholder-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.06em;
}

/* Image frames: natural shape by default; a cropped frame shows one half (its
   aspect ratio is set from the image size by js/news.js) */
.news-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.news-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.news-frame--crop-top,
.news-frame--crop-bottom,
.news-gallery .news-frame {
  & img {
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
}

.news-frame--crop-bottom img {
  object-position: bottom;
}

/* Cropped frames show half the image (--crop-ratio from js/news.js); in a gallery,
   every frame is 4:3 instead */
.news-frame--crop-top,
.news-frame--crop-bottom {
  aspect-ratio: var(--crop-ratio, 3 / 2);
}

.news-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.news-gallery .news-frame {
  aspect-ratio: 4 / 3;
}

.news-photo--banner {
  margin: 0.25rem 0 1.5rem;
}

/* Enlarge buttons */
.news-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: zoom-in;
}

.news-photo:hover .news-frame {
  border-color: var(--data);
}

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

/* Lightbox: a full-screen <dialog>, always dark (it carries .theme-dark) */
html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 3.75rem clamp(0.75rem, 6vw, 4.75rem) 1.5rem;
  border: 0;
  background-color: var(--scrim);
  color: var(--text);
}

.lightbox[open] {
  display: grid;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 0.85rem;
  min-height: 0;
  margin: 0;
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 4px;
}

.lightbox__caption {
  max-width: 70ch;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0 0.2rem;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background-color: var(--glass-opaque);
  color: var(--text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__btn:hover {
  border-color: var(--data);
}

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

.lightbox__close {
  top: 0.75rem;
  right: 0.75rem;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__prev {
  left: 0.75rem;
}

.lightbox__next {
  right: 0.75rem;
}

.lightbox__btn[hidden],
.lightbox__count[hidden] {
  display: none;
}

.lightbox__count {
  position: fixed;
  top: 1.35rem;
  left: 50%;
  margin: 0;
  translate: -50% 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-in 0.18s ease-out;
  }
}

@keyframes lightbox-in {
  from { opacity: 0; }
}

/* Loading / no-JS message: on a small glass plate, never on the scene */
.news-status {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background-color: var(--glass-bg-solid);
  color: var(--glass-muted);
}

html:not(.js) .news-status--loading {
  display: none;
}


/* 7. Shared diagram styles ----------------------------------------------- */
.diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Panel that frames an EPZ chapter diagram */
.panel {
  position: relative;
  padding: clamp(1rem, 3vw, 2rem);
  background-color: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.panel__tag {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Still versions of animated parts: hidden unless reduced motion is on (see section 12) */
.is-static {
  display: none;
}

.d-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  fill: var(--muted);
}

.d-label--gold {
  fill: var(--governed);
  font-weight: 600;
}

.d-mark {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: var(--governed);
}

/* Wires: blue = data in motion, gold = governed by EPZ */
.g-wire {
  fill: none;
  stroke: var(--data);
  stroke-width: 2;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  animation: dash-flow 0.9s linear infinite;
}

.g-wire--gold {
  stroke: var(--governed);
}

@keyframes dash-flow {
  to { stroke-dashoffset: -10; }
}

/* Network nodes with line icons (hero + deliver diagram) */
.node .ring {
  fill: var(--bg-raised);
  stroke-width: 1.5;
}

.node--source .ring {
  stroke: var(--data);
}

.node--consumer .ring {
  stroke: var(--governed);
}

.node .icon {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "ZERO TRUST ✓" pill */
.check-pill {
  fill: var(--bg-raised);
  stroke: var(--governed);
  stroke-width: 1.5;
}

.check-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--governed);
}

/* Index glyphs (What We Do cards) */
.g-line {
  stroke: var(--data);
  stroke-width: 2;
}

.g-line--gold {
  stroke: var(--governed);
}

.g-node,
.g-box {
  fill: var(--bg-raised);
  stroke: var(--data);
  stroke-width: 2;
}

.g-node--gold,
.g-box--gold {
  stroke: var(--governed);
}

/* CMMC diagram */
.diagram--cmmc .ring-orbit {
  fill: none;
  stroke: var(--data);
  stroke-width: 1.5;
  stroke-dasharray: 3 9;
  transform-origin: 160px 112px;
  animation: spin 40s linear infinite;
}

.diagram--cmmc .ring-soft {
  fill: none;
  stroke: var(--line-strong);
}

.diagram--cmmc .shield {
  fill: var(--bg-raised);
  stroke: var(--governed);
  stroke-width: 2.5;
}

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

/* 8. EPZ flow diagram ------------------------------------------------------
   Drawn by js/epz-flow.js from js/epz-flow-data.js into <div class="epz-flow">.
   Until then (and without JS) the static fallback picture inside it shows. */
.epz-flow {
  max-width: 1360px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding-inline: var(--gutter);
}

.epz-flow__fallback,
.epz-flow__fallback img {
  display: block;
  width: 100%;
  height: auto;
}

.flow {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Column titles: section-title scale, not small caps */
.flow-title {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.04em;
  fill: var(--text);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 8px;
  stroke-linejoin: round;
}

/* Solid plate behind each column title (drawn by js/epz-flow.js) */
.flow-title-plate {
  fill: var(--glass-bg-solid);
  stroke: var(--glass-border);
  stroke-width: 1px;
}

/* Labels carry a navy halo, so they stay legible over the horizon glow */
.flow-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  fill: var(--muted);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.flow-label--gold {
  fill: var(--governed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3em;
}

/* Small mono column label inside the EPZ panel ("DATA SETS") */
.flow .col-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: var(--governed);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}

/* EndPoint Zero panel: the data sets EPZ governs and serves (gold = governed) */
.epz-panel {
  fill: var(--graph-panel);
  stroke: var(--governed);
  stroke-width: 1.5;
}

/* EPZ emblem in the panel header: gold */
.gate-mark {
  color: var(--governed);
  overflow: visible;
}

/* Gate chips at the top of the panel: gold text on a card fill */
.chip rect {
  fill: var(--bg-raised);
  stroke: var(--governed);
  stroke-width: 1.2;
}

.chip text {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--governed);
}

/* Links, as in the EPZ product: a base path, plus a dashed flow path that moves in
   the direction of the data. All links on the site are "active". */
.lk path {
  fill: none;
  stroke-width: 1.6;
  transition: opacity 0.2s ease;
}

.lk .lk-base {
  stroke: var(--graph-line);
}

.lk.active .lk-base {
  stroke: var(--graph-accent);
  opacity: 0.45;
}

.lk .lk-flow {
  display: none;
}

.lk.active .lk-flow {
  display: inline;
  stroke: var(--graph-accent-bright);
  stroke-width: 2.2;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
  animation: graph-flow 1.1s linear infinite;
}

@keyframes graph-flow {
  to { stroke-dashoffset: -28; }
}

/* Paused while the pointer is over the diagram, a card has keyboard focus, or it is off screen */
.epz-flow.is-paused .lk-flow {
  animation-play-state: paused;
}

.flow .lk.lit .lk-base {
  opacity: 0.9;
}

.flow .lk.dim {
  opacity: var(--graph-dim-opacity);
}

.flow .lk.dim .lk-flow {
  display: none;
}

/* Cards (sources, data sets, consumers). Each is a focusable button. */
.nd {
  cursor: pointer;
  outline: none;
}

.nd .card {
  fill: var(--graph-card);
  stroke: var(--graph-card-stroke);
  stroke-width: 1.2;
  transition: stroke-opacity 0.2s ease;
}

.nd.sel .card {
  stroke: var(--graph-accent-bright);
  stroke-width: 2.4;
}

.nd .dot {
  fill: var(--graph-status-active);
  transition: opacity 0.2s ease;
}

.nd .lbl {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  fill: var(--graph-text);
}

.nd .meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  fill: var(--graph-meta);
}

/* Focus ring (an outline on an SVG <g> is unreliable) */
.nd .focus-ring {
  fill: none;
  stroke: none;
}

.nd:focus-visible .focus-ring {
  stroke: var(--graph-accent-bright);
  stroke-width: 2;
}

.nd--centre .hit {
  fill: transparent;
}

/* Off the traced lineage: card stroke, dot and links fade to --graph-dim-opacity; the
   label drops to --graph-meta, which stays 4.5:1+ on the card, so dimmed cards remain
   readable (the card fill stays opaque). */
.nd.dim .card {
  stroke-opacity: var(--graph-dim-opacity);
}

.nd.dim .dot,
.nd--centre.dim .gate-mark {
  opacity: var(--graph-dim-opacity);
}

.nd.dim .lbl {
  fill: var(--graph-meta);
  font-weight: 500;
}

/* Legend and caption under the diagram, on a solid backing over the scene */
.epz-flow__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0.75rem auto 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background-color: var(--bg);
}

.epz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--muted);
}

.epz-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.epz-legend svg {
  overflow: visible;
}

.swatch-card {
  fill: var(--graph-card);
  stroke: var(--graph-card-stroke);
  stroke-width: 1.2;
}

.epz-flow__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.flow--h {
  max-width: 1120px;
  margin-inline: auto;
}

.flow--h .flow-title {
  font-size: 30px;
}

.flow--v {
  max-width: 440px;
  margin-inline: auto;
}

.flow--v .flow-title {
  font-size: 30px;
}

.flow--v .flow-label--gold {
  font-size: 13px;
  letter-spacing: 0.2em;
}

/* Layout once drawn: graph (with legend) and the inspector. Beside each other from
   1280px, stacked below that. */
.epz-flow.is-rendered {
  display: grid;
  gap: 1.25rem clamp(1.5rem, 2.5vw, 2.5rem);
  max-width: 1440px;
}

/* Inspector (layout from the EPZ product's inspector) */
.epz-inspector {
  align-self: start;
  justify-self: center;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  width: 100%;
  max-width: 760px;
  padding: 1.1rem 1.2rem 1.2rem;
  background-color: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.epz-inspector__kind {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.epz-inspector__name {
  margin: 0.15rem 0 0;
  font-size: 1.2rem;
  line-height: 1.25;
}

.epz-inspector__text,
.epz-inspector__hint {
  margin: 0;
}

.epz-inspector__hint {
  color: var(--muted);
}

.epz-inspector__props {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0.3rem 0.9rem;
  margin: 0;
}

.epz-inspector__props dt {
  color: var(--muted);
}

.epz-inspector__props dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.epz-inspector__sub {
  margin: 0 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.epz-inspector__rel {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epz-inspector__rel li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.epz-inspector__rel button {
  padding: 0.1rem 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.epz-inspector__rel button:hover {
  text-decoration-color: var(--data);
}

.epz-inspector__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.epz-inspector__clear {
  justify-self: start;
  padding: 0.3rem 0.75rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.epz-inspector__clear:hover {
  border-color: var(--data);
}

@media (min-width: 1280px) {
  .epz-flow.is-rendered {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  .epz-inspector {
    max-width: none;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk.active .lk-flow {
    animation: none;
  }
}

@media (max-width: 600px) {
  .epz-flow__fallback img {
    max-width: 440px;
    margin-inline: auto;
  }
}


/* 9. EPZ chapter diagrams ------------------------------------------------- */

/* 01 CONNECT: tangle fades, hub + spokes draw in. Base styles = final frame. */
.diagram--connect .c-tangle path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25;
}

.diagram--connect .c-tangle {
  opacity: 0.12;
  animation: c-tangle 10s ease-in-out infinite;
}

.diagram--connect .c-spokes path {
  fill: none;
  stroke: var(--governed);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: c-spoke 10s ease-in-out infinite;
}

.diagram--connect .c-nodes rect {
  fill: var(--bg-raised);
  stroke: var(--data);
  stroke-width: 2;
}

.diagram--connect .c-hub {
  transform-box: fill-box;
  transform-origin: center;
  animation: c-hub 10s ease-in-out infinite;
}

.diagram--connect .c-hub circle {
  fill: var(--bg-raised);
  stroke: var(--governed);
  stroke-width: 2.5;
}

.diagram--connect .c-hub text {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  fill: var(--governed);
}

.diagram--connect .c-label-before {
  opacity: 0;
  animation: c-tangle-label 10s ease-in-out infinite;
}

.diagram--connect .c-label-after {
  animation: c-hub-label 10s ease-in-out infinite;
}

@keyframes c-tangle {
  0%, 30% { opacity: 0.85; }
  45%, 88% { opacity: 0.12; }
  100% { opacity: 0.85; }
}

@keyframes c-tangle-label {
  0%, 30% { opacity: 1; }
  40%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes c-spoke {
  0%, 40% { stroke-dashoffset: 1; }
  58%, 88% { stroke-dashoffset: 0; }
  97%, 100% { stroke-dashoffset: 1; }
}

@keyframes c-hub {
  0%, 35% { opacity: 0; transform: scale(0.5); }
  48%, 88% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes c-hub-label {
  0%, 42% { opacity: 0; }
  52%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* 02 GOVERN: 9 s loop. Pass, reject (bounce), pass. --d offsets each packet. */
.diagram--govern .g-shield {
  fill: var(--bg-raised);
  stroke: var(--governed);
  stroke-width: 2.5;
}

.diagram--govern .g-shield-mark {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  fill: var(--governed);
}

.gv-data { fill: var(--data); }
.gv-gov { fill: var(--governed); }
.gv-deny,
.gv-reject circle {
  fill: none;
  stroke: var(--deny);
  stroke-width: 2.5;
}

.gv-x {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  fill: var(--deny);
}

.gv-pass,
.gv-reject {
  opacity: 0;
  animation: gv-pass 9s linear infinite;
  animation-delay: var(--d);
}

.gv-reject {
  animation-name: gv-reject;
}

.gv-pass .gv-data {
  animation: gv-data 9s linear infinite;
  animation-delay: var(--d);
}

.gv-pass .gv-gov {
  opacity: 0;
  animation: gv-gov 9s linear infinite;
  animation-delay: var(--d);
}

.gv-ok {
  animation: gv-ok 9s linear infinite;
}

.gv-x {
  animation: gv-x 9s linear infinite;
}

@keyframes gv-pass {
  0% { transform: translateX(0); opacity: 0; }
  3% { opacity: 1; }
  30% { transform: translateX(432px); opacity: 1; }
  33%, 100% { transform: translateX(432px); opacity: 0; }
}

@keyframes gv-reject {
  0% { transform: translateX(0); opacity: 0; }
  3% { opacity: 1; }
  13% { transform: translateX(186px); animation-timing-function: ease-out; }
  21% { transform: translateX(110px); opacity: 1; }
  27%, 100% { transform: translateX(90px); opacity: 0; }
}

@keyframes gv-data {
  0%, 14% { opacity: 1; }
  16%, 100% { opacity: 0; }
}

@keyframes gv-gov {
  0%, 14% { opacity: 0; }
  16%, 100% { opacity: 1; }
}

/* ✓ lights up as each passing packet reaches the gate (15% and 82%) */
@keyframes gv-ok {
  0%, 11% { opacity: 0.45; }
  15%, 22% { opacity: 1; }
  28%, 78% { opacity: 0.45; }
  82%, 89% { opacity: 1; }
  95%, 100% { opacity: 0.45; }
}

/* ✕ lights up as the rejected packet hits the gate (46%) */
@keyframes gv-x {
  0%, 43% { opacity: 0; }
  46%, 55% { opacity: 1; }
  62%, 100% { opacity: 0; }
}

/* 03 DELIVER: square packet becomes a hexagon in flight; nothing is stored */
.diagram--deliver .dl-zone {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}

.dl-sq { fill: var(--data); }
.dl-hex { fill: var(--governed); }

.dl-move {
  animation: dl-move 4s linear infinite;
  animation-delay: var(--d);
}

.dl-move .dl-sq {
  animation: dl-sq 4s linear infinite;
  animation-delay: var(--d);
}

.dl-move .dl-hex {
  opacity: 0;
  animation: dl-hex 4s linear infinite;
  animation-delay: var(--d);
}

@keyframes dl-move {
  0% { transform: translateX(0); opacity: 0; }
  6%, 94% { opacity: 1; }
  100% { transform: translateX(288px); opacity: 0; }
}

@keyframes dl-sq {
  0%, 42% { opacity: 1; transform: none; }
  52%, 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }
}

@keyframes dl-hex {
  0%, 46% { opacity: 0; transform: rotate(-90deg) scale(0.3); }
  58%, 100% { opacity: 1; transform: none; }
}

/* 10. Contact ------------------------------------------------------------ */
.endpoints {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding-top: 2rem;
}

/* The signal line linking the three endpoints, and a packet travelling along it */
.endpoints::before,
.endpoints::after {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
}

.endpoints::before {
  left: 1.75rem;
  right: 1.75rem;
  background: repeating-linear-gradient(90deg, var(--data) 0 4px, transparent 4px 12px);
  opacity: 0.6;
}

.endpoints::after {
  left: 1.75rem;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--data);
  box-shadow: 0 0 0 5px var(--halo);
  animation: bus 6s ease-in-out infinite alternate;
}

@keyframes bus {
  from { left: 1.75rem; }
  to { left: calc(100% - 1.75rem - 10px); }
}

/* Glass cards (class="endpoint glass") */
.endpoint {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

/* Node dot where each card meets the signal line */
.endpoint::before {
  content: "";
  position: absolute;
  top: calc(-2rem - 5px);
  left: 1.75rem;
  width: 12px;
  height: 12px;
  border: 2px solid var(--governed);
  border-radius: 50%;
  background: var(--bg);
}

.endpoint h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.endpoint__value {
  font-size: 1.05rem;
}

.map-link {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.82rem;
}

.contact-list {
  margin: 0;
  display: grid;
  gap: 1rem;
}

.contact-list dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-list dd {
  margin: 0.15rem 0 0;
  overflow-wrap: anywhere;
}

.contact-list a {
  color: var(--text);
  text-decoration-color: var(--data);
  text-underline-offset: 4px;
}

.contact-list a:hover {
  color: var(--data);
}

/* Responsive layout --------------------------------------------------------- */
@media (max-width: 1023px) {
  .split,
  .split--diagram {
    grid-template-columns: minmax(0, 1fr);
  }

  .cards,
  .services,
  .news-teaser {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel {
    max-width: 600px;
  }


  .endpoints {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    padding-left: 2rem;
  }

  /* Signal line runs down the left on stacked layouts */
  .endpoints::before {
    top: 1.75rem;
    bottom: 1.75rem;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--data) 0 4px, transparent 4px 12px);
  }

  .endpoints::after {
    top: 1.75rem;
    left: -4px;
    margin-top: 0;
    animation-name: bus-vertical;
  }

  .endpoint::before {
    top: 1.75rem;
    left: calc(-2rem - 5px);
  }

  @keyframes bus-vertical {
    from { top: 1.75rem; }
    to { top: calc(100% - 1.75rem - 10px); }
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cards,
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service--epz,
  .cards > .card:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 1rem;
  }


  .card,
  .service,
  .endpoint {
    padding: 1.35rem;
  }

  .badge {
    font-size: 0.7rem;
  }

  /* Chapter diagrams render at ~70% on phones: lift their labels */
  .diagram .d-label {
    font-size: 16px;
  }

  .mini-diagram {
    max-width: 260px;
  }

  .site-footer__inner {
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 1.25rem;
    gap: 0.75rem 1.5rem;
  }

  .site-footer p {
    order: 3;
    flex-basis: 100%;
  }
}

/* 11. Reveal on scroll (site.js adds .is-in) -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Smooth scroll for in-page links only (a clicked link holds focus), so
     programmatic scrolling and find-in-page stay instant */
  html:focus-within {
    scroll-behavior: smooth;
  }

  /* Hero headline: a one-off rise on load */
  html.js .hero__copy > * {
    animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  html.js .hero__copy > :nth-child(2) {
    animation-delay: 0.12s;
  }

  html.js .hero__copy > :nth-child(3) {
    animation-delay: 0.24s;
  }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
  }

  html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

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

/* 12. Reduced motion: everything stops, diagrams show a complete still frame --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .anim {
    display: none;
  }

  .is-static {
    display: inline;
  }

  .endpoints::after {
    display: none;
  }
}

/* ATOA3S page: long-form copy (more in section 14) ------------------------- */
.prose--long {
  max-width: 68ch;
}

.prose--long p {
  font-size: 1.15rem;
  line-height: 1.75;
}

.prose--long p + p {
  margin-top: 1.5rem;
}

/* 13. Glass panels ----------------------------------------------------------
   Every section is see-through (section 2), so the fixed horizon (.backdrop) shows
   behind the whole page. Text never sits on the scene: it sits on .glass panels, a
   translucent tint plus a light backdrop blur, a hairline edge and a faint top
   highlight (glass tokens in tokens.css, section 2). The tint alone holds AA contrast
   over the brightest part of the scene; the blur is for looks.
   Rhythm: sections are separated by their padding (the horizon shows between them)
   and by the numbered chapter label, which sits on a small heading plate
   (.glass--head) or at the top of the section's first panel.
   PERFORMANCE: a backdrop-filter over a fixed layer is recomputed on every scroll
   frame, for every blurred panel on screen. So the blur is capped (--glass-blur,
   10px), and small panels whose blur would barely show (heading and label plates,
   rows of four or more small cards, see .glass--flat) use the stronger, unblurred
   tint instead. At 1440 x 900 that keeps blurred panels on screen to about six.
   Fallbacks: no backdrop-filter support -> stronger tint (--glass-bg-solid);
   prefers-reduced-transparency -> solid panels (--glass-opaque).
   PHONES (below 768px): the backdrop stays position: fixed (100lvh, contain: strict,
   so the iOS toolbar never resizes it and it is composited once), but the panels do
   NOT blur there and use --glass-bg-solid: blurring over a fixed layer is what janks
   on iOS and low-end Android, and a plain translucent tint costs nothing. Chosen over
   an absolute, page-long backdrop because that would park the horizon at one place
   in the page, so sections further down would show only the dark planet. */
.glass {
  --muted: var(--glass-muted);
  padding: clamp(1.35rem, 3vw, 2rem);
  background:
    linear-gradient(180deg, var(--glass-sheen), transparent 3rem),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 24px 48px -28px var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* Unblurred glass: the stronger tint, same edge and sheen */
.glass--flat,
.glass--head {
  background:
    linear-gradient(180deg, var(--glass-sheen), transparent 3rem),
    var(--glass-bg-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Keep the coloured top rule of service cards */
.service.glass {
  border-top: 2px solid var(--data);
}

.service--epz.glass {
  border-top: 2px solid var(--governed);
}

/* A section heading (chapter label + h2, sometimes a lead line) on its own small plate */
.glass--head {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.25rem;
  padding: 1.1rem clamp(1.25rem, 2.5vw, 1.75rem) 1.25rem;
}

.glass--head h2 {
  margin-bottom: 0;
}

/* A chapter label alone (a section without a visible heading) */
.glass--label {
  padding: 0.7rem 1.1rem;
}

.glass--label .chapter {
  margin: 0;
}

.partners-block .glass--head {
  margin-inline: auto;
}

.glass .tagline {
  margin-bottom: 0;
}

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

/* Long-form prose on one panel: the measure applies to the text, not the panel edge */
.prose--long.glass {
  max-width: calc(68ch + 2 * clamp(1.35rem, 3vw, 2rem));
}

/* Split layouts: each column is its own panel, sized to its content (a short lead
   panel beside a long one reads as a heading, not an empty box) */
.news-teaser .glass > :last-child,
.stack.glass > :last-child {
  margin-bottom: 0;
}

/* Text column beside a diagram panel */
.split--diagram > .glass {
  align-self: center;
}

/* Pull quote on one panel */
.pullquote.glass {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-bg-solid);
  }
}

@media (max-width: 767px) {
  .glass {
    background: var(--glass-bg-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-opaque);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Phones: panels stack full width, so open the gaps between them into windows
   onto the horizon */
@media (max-width: 767px) {
  .services,
  .cards,
  .tiles--3,
  .endpoints,
  .split,
  .news-teaser,
  .value,
  .owns,
  .track,
  .delivery {
    gap: 2.5rem;
  }

  .scope {
    margin-top: 2.5rem;
  }

  .glass--head {
    margin-bottom: 2.5rem;
  }
}

/* 14. Slick-sheet content (EPZ + ATOA3S pages) -----------------------------
   Sections built from Chris's slick sheets (docs/copy-changes.md). Text sits on .glass
   panels (section 13): a heading plate, then one wide panel, a split, or a row of
   glass cards, so consecutive sections differ in shape. */

/* Text for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lead line under a section heading */
.section-lead {
  max-width: 62ch;
  margin: -0.75rem 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
}

.glass--head .section-lead {
  margin: 0.75rem 0 0;
}

/* Small mono label above a hero heading (ATOA3S) */
.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--governed);
}

/* "TIME TO DATA Months -> Minutes" chip on the EPZ hero, on a solid backing over the scene */
.time-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin: 1.75rem 0 0;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text);
}

.time-chip__label {
  color: var(--muted);
  letter-spacing: 0.18em;
}

.time-chip s {
  color: var(--muted);
}

.time-chip__to {
  font-weight: 700;
  color: var(--governed);
}

/* Tiles: a row of glass cards (class="tile glass"), blue top rule */
.tiles {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.tile {
  padding: 1.5rem;
  border-top: 2px solid var(--data);
}

.tile h3 {
  margin-bottom: 0.45rem;
}

.tile p {
  margin: 0;
  color: var(--muted);
}

/* Points: a grid of short items on ONE glass panel */
.point-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
  margin: 0;
  list-style: none;
}

.point-grid li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--line-strong);
}

.point-grid h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.point-grid p {
  margin: 0;
  color: var(--muted);
}

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

/* The highlighted item (ATO Support Center) */
.point-grid .point--featured {
  padding: 1rem 1.1rem;
  background-color: var(--bg-raised);
  border: 1px solid var(--governed);
  border-radius: 8px;
}

.point--featured h3 {
  color: var(--governed);
}

/* EPZ value proposition: featured card + the other four */
.value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: stretch;
}

.value__feature {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--governed);
}

.value__feature > p:last-child {
  margin: 0;
  color: var(--muted);
}

.shift {
  margin: 1.25rem 0 1.5rem;
  line-height: 1;
}

.shift__from {
  display: block;
  font-size: 1.5rem;
  color: var(--muted);
}

.shift__to {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--governed);
}

.point-grid--value {
  align-content: start;
}

/* Pull quote */
.pullquote {
  max-width: 46rem;
  margin-inline: auto;
}

.pullquote blockquote {
  position: relative;
  margin: 0;
  padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--governed);
}

.pullquote p {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.pullquote__turn {
  display: block;
  color: var(--data);
}

/* EPZ ownership: two lists */
.owns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.owns__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--data);
}

.owns__col--mg .owns__title {
  color: var(--governed);
}

.owns__col--mg .ticks li::before {
  background: var(--governed);
}

.owns .ticks {
  margin-bottom: 0;
}

/* Closing call to action */
.cta {
  margin: 0;
  text-align: center;
}

/* ATOA3S: "Months -> Weeks" */
.bigstat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(2rem, 5vw, 4rem);
}

.bigstat__value {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.bigstat__to {
  color: var(--data);
}

.bigstat__text {
  flex: 1 1 18rem;
  max-width: 36ch;
}

.bigstat__text p {
  margin: 0;
}

.bigstat__text p + p {
  margin-top: 0.35rem;
  color: var(--muted);
}

/* ATOA3S: why it works (the chapter label is the heading) */
.why {
  border-left: 3px solid var(--governed);
}

.why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why__list h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.why__list p {
  margin: 0;
  color: var(--muted);
}

/* ATOA3S: track record (bar chart + figures) */
.track {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.track h3 {
  margin-bottom: 1.25rem;
}

/* History of ATOs. The text is the data; the bars are decorative (aria-hidden),
   their width set inline (--w, proportional to days) with a minimum so 6 days shows. */
.bars {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bars li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
}

.bars__when {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.bars__value {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.bars__bar {
  display: block;
  width: max(5px, var(--w));
  height: 0.7rem;
  border-radius: 3px;
  background-color: var(--data);
}

.bars__latest .bars__value {
  color: var(--data);
}

/* Big figures with a caption under each */
.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.figures__value {
  display: block;
  font-size: clamp(2.4rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--data);
}

.figures__label {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.4;
}

.figures--compact .figures__value {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
}

.track__line {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

/* ATOA3S: 300+ callout */
.callout {
  display: flex;
  align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  margin: 1.25rem 0 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.35rem, 3vw, 2rem);
}

.callout__value {
  flex-shrink: 0;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--data);
}

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

.callout__text strong {
  color: var(--text);
}

/* ATOA3S: workforce + delivery timeline */
.delivery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.h2--panel {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 1.5rem;
}

/* Timeline: an ordered list; across on wide panels, down on narrow ones */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  right: 0;
  height: 2px;
  background-color: var(--line-strong);
}

.timeline li {
  position: relative;
  padding-top: 1.75rem;
}

.timeline li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--data);
  border-radius: 50%;
  background-color: var(--bg-raised);
}

.timeline li:nth-child(3)::before {
  background-color: var(--data);
}

.timeline__day {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.timeline__what {
  display: block;
  font-weight: 700;
  line-height: 1.3;
}

/* Scope boundary + disclaimer */
.scope {
  margin-top: 1.25rem;
}

.scope__box {
  padding: 1rem 1.25rem;
  border: 1px solid var(--data);
  border-radius: 8px;
}

.scope__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--data);
}

.scope__box p {
  margin: 0;
}

.disclaimer {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 1023px) {
  .tiles--5,
  .point-grid--solution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tiles--3,
  .value,
  .track,
  .delivery,
  .why__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .tile {
    padding: 1.25rem;
  }

  .point-grid,
  .point-grid--solution,
  .owns {
    grid-template-columns: minmax(0, 1fr);
  }

  .callout {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  .bars li {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .bars__value {
    font-size: 1.2rem;
  }

  /* Long chapter labels wrap as one line of text, ornament kept inline */
  .chapter {
    display: block;
  }

  .chapter::after {
    display: inline-block;
    width: 3rem;
    vertical-align: middle;
  }

  .timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .timeline::before {
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .timeline li {
    padding: 0 0 0 1.9rem;
  }
}