/* ==========================================================================
   Home page — assets/css/pages/home.css
   Sections: hero · proposition · proof strip · stages · difference · products · applications
             · data to action · where we work · testimonials · network
   Uses the tokens and components in main.css; nothing here hard-codes colour.
   ========================================================================== */

/* ------------------------------------------------------------------- Hero
   Desktop: the hero is exactly one screen. The data field is a full-bleed band
   anchored to the bottom and sized only from viewport units, so hero-field.js
   geometry never depends on text metrics. Its upper part (empty once the intro
   scatter resolves) sits behind the copy; the type is sized in svh to stay clear
   of the readout. ≤900px: copy and field simply stack.                       */

.hero {
  --field-h: 62svh;

  position: relative;
  min-height: max(100svh, 44rem);
  overflow: hidden;
}

/* Grain sits above the canvas so the texture is continuous. */
.hero.grain::after {
  z-index: 3;
}

/* The Field: a quiet dot grid on the open right side, fading before the braid. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 40%;
  z-index: 2;
  background-image: radial-gradient(circle at 1px 1px, rgb(245 242 234 / 22%) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 70% 35%, #000 10%, transparent 75%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 3;
  padding-top: calc(var(--header-h) + 9svh);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  margin-bottom: 3.2svh;
  color: var(--muted);
}

.hero__meta-item::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-inline: 1rem;
  vertical-align: middle;
  background: currentcolor;
  opacity: 0.45;
}

.hero__title {
  font-size: min(var(--fs-display-xl), 9.8svh, 8.3vw);
}

.hero__title em {
  padding-right: 0.04em;

  /* "pressure points." never splits across lines (no lone "points." widow on phones). */
  white-space: nowrap;
}

.hero__sub {
  max-width: 33em;
  margin-top: 3.4svh;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.6svh;
}

/* "Start from your question": routes each buyer to their conversation from the first screen.
   Quieter than the CTAs – hairline chips, a mono label, arrows in teal. */
.hero__routes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: 2.4svh;
}

.hero__routes-label {
  font-size: var(--fs-mono-min);
  letter-spacing: 0.12em;
  color: var(--on-ink-muted);
}

.hero__routes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.hero__route {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  border: 1px solid var(--ink-line-strong);
  border-radius: var(--radius);
  background: rgb(10 37 48 / 72%);
  font-size: var(--fs-small);
  line-height: 1.2;
  white-space: nowrap;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

.hero__route:has(a:hover),
.hero__route:has(a:focus-visible) {
  border-color: var(--on-ink-muted);
  background: var(--ink-2);
}

.hero__route a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  color: var(--on-ink);
}

.hero__route a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.hero__route svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--teal-mist);
  transition: transform 0.45s var(--ease-out);
}

.hero__route a:hover svg {
  transform: translateX(3px);
}

/* Two destinations in one chip: "Court backlog" | or | "prison overcrowding". */
.hero__route--split a:first-child {
  padding-right: 0.3rem;
}

.hero__route--split a:last-child {
  padding-left: 0.3rem;
}

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

.hero__scroll {
  position: absolute;
  bottom: 0.85rem;
  left: max(var(--gutter), calc((100% - var(--max)) / 2));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 2.75rem;
  font-size: var(--fs-mono-min);
  color: var(--muted);
  transition: color 0.3s;
}

.hero__scroll:hover {
  color: var(--text);
}

.hero__scroll-line {
  position: relative;
  width: 3rem;
  height: 1px;
  overflow: hidden;
  background: var(--ink-line-strong);
}

/* A few passes, then still: motion that explains, not a loop. */
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--on-ink);
  transform: translateX(-100%);
  animation: hero-scroll 2.4s var(--ease-in-out) 2.6s 3;
}

@keyframes hero-scroll {
  0% {
    transform: translateX(-100%);
  }

  55% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

.hero__field {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: var(--field-h);
}

.hero-field canvas {
  position: absolute;
  inset: 0;
}

.hero-field__labels {
  list-style: none;
  padding: 0;
}

.hero-field__label {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-min);
  font-weight: 450;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-ink-muted);
}

.hero-field__label--pressure {
  color: var(--signal);
}

.hero-field__short {
  display: none;
}

/* Without JS the canvas is blank: lay the labels out as a quiet static chain. */
html:not(.js) .hero-field__labels {
  position: absolute;
  inset: 72% var(--gutter) auto;
  display: flex;
  justify-content: space-between;
}

html:not(.js) .hero-field__label {
  position: static;
  transform: none;
}

/* Hide labels until hero-field.js has positioned them, then fade in with the intro. */
.js .hero-field [data-hero-label]:not([style]) {
  visibility: hidden;
}

.js .hero-field__label {
  animation: home-fade 1.2s var(--ease-out) 1.6s backwards;
}

@keyframes home-fade {
  from {
    opacity: 0;
  }
}

@media (height <= 800px) and (width > 900px) {
  .hero__meta {
    display: none;
  }

  .hero__title {
    font-size: min(var(--fs-display-xl), 9svh, 8.3vw);
  }

  .hero__sub {
    margin-top: 2.6svh;
    font-size: 1.0625rem;
  }

  .hero__actions,
  .hero__routes {
    margin-top: 2svh;
  }
}

@media (width <= 900px) {
  .hero {
    min-height: 0;
  }

  .hero__content {
    padding-top: calc(var(--header-h) + clamp(2.25rem, 6vw, 4rem));
  }

  .hero__title {
    font-size: clamp(2.4rem, 1rem + 7.4vw, 5.25rem);
  }

  .hero__sub {
    margin-top: 1.75rem;
  }

  .hero__actions {
    margin-top: 1.75rem;
  }

  .hero__routes {
    margin-top: 2rem;
  }

  /* The field's empty upper band tucks under the route row. */
  .hero__field {
    position: relative;
    inset: auto;
    height: clamp(20rem, 42vw, 27rem);
    margin-top: clamp(-6rem, -8vw, -4rem);
  }

  .hero__scroll {
    display: none;
  }
}

@media (width <= 720px) {
  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: var(--fs-mono-min);
  }

  .hero__meta-item::before {
    display: none;
  }

  .hero__meta > :last-child {
    display: none;
  }

  .hero__sub {
    font-size: 1.125rem;
  }

  /* The long primary CTA may wrap rather than run off a narrow screen. */
  .hero__actions .btn {
    max-width: 100%;
    white-space: normal;
  }

  .hero-field__label {
    letter-spacing: 0.06em;
  }
}

/* Phones: the four routes as a 2 × 2 grid, so every one is visible without scrolling sideways. */
@media (width <= 560px) {
  .hero__routes {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .hero__routes-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__route {
    align-items: stretch;
    font-size: var(--fs-xs);
    white-space: normal;
  }

  .hero__route a {
    flex: 1;
    justify-content: space-between;
    padding: 0.55rem 0.7rem;
  }

  .hero__route--split {
    flex-wrap: wrap;
    align-content: center;
    padding-block: 0.3rem;
  }

  .hero__route--split a {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 1.75rem;
    padding-block: 0.15rem;
  }

  .hero__route--split a:first-child {
    padding-left: 0.7rem;
  }

  .hero__route--split a:last-child {
    padding-left: 0.7rem;
  }

  .hero__route-or {
    align-self: center;
  }

  .hero__field {
    margin-top: -6.5rem;
  }
}

@media (width <= 480px) {
  .hero-field__full {
    display: none;
  }

  .hero-field__short {
    display: inline;
  }
}

/* Very narrow: the station labels are decorative (aria-hidden) and may drop to 10px to fit. */
@media (width <= 400px) {
  .hero-field__label {
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }
}

/* ------------------------------------------------------------ Proposition */

.proposition__eyebrow {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.proposition__statement {
  max-width: 16.5em;
}

.proposition__statement em {
  font-weight: 380;
}

.proposition__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  margin-top: clamp(4rem, 3rem + 5vw, 7.5rem);
}

.proposition__fact {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

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

.proposition__n {
  margin-right: 0.9em;
  color: var(--teal);
}

.proposition__fact dd {
  margin-top: 0.85rem;
  max-width: 24em;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
}

.proposition__link {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (width <= 1080px) {
  .proposition__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 560px) {
  .proposition__facts {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ------------------------------------------------------------ Proof strip
   Straight after "What is a Justice Audit?": four sourced results and who has commissioned
   the work. Reuses the .result cards; the full country story stays in "Where we work".     */

.proof__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--text);
}

.proof__title {
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
}

.proof__reach {
  font-size: var(--fs-mono-min);
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* The one key figure on the strip. */
.proof .result:first-child .result__value {
  color: var(--signal-text);
}

.proof__funders {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.proof__funders-label {
  font-size: var(--fs-mono-min);
  letter-spacing: 0.12em;
  color: var(--muted);
}

.proof__funders-list {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}

/* ----------------------------------------------------------------- Stages
   Default: stacked sequence (mobile, tablet, reduced motion, no JS).
   .is-pinned (added by home.js on large screens): one pinned "instrument view"
   with a progress rail, copy and an image that wipes between stages.          */

.stages__pin {
  padding-block: var(--section);
}

.stages__head {
  margin-bottom: clamp(3.5rem, 6vw, 6rem);
}

/* Same hierarchy at every width – mono label, then a serif statement – only the scale changes. */
.stages__intro {
  max-width: 20em;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
  line-height: 1.06;
  text-wrap: balance;
}

.stages__rail,
.stages__viewfinder {
  display: none;
}

.stages__track {
  display: grid;
  gap: clamp(4.5rem, 3rem + 6vw, 8rem);
}

.stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  align-items: center;
}

.stage__copy {
  grid-column: 1 / span 5;
}

.stage__figure {
  position: relative;
  grid-column: 7 / -1;
}

.stage:nth-of-type(even) .stage__copy {
  grid-column: 8 / -1;
  order: 2;
}

.stage:nth-of-type(even) .stage__figure {
  grid-column: 1 / span 6;
}

.stage__title {
  margin-top: 1.25rem;
  font-size: var(--fs-h2);
  line-height: 1.04;
}

.stage__text {
  max-width: 30em;
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
}

.stage__detail {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.stage__detail-label {
  margin-bottom: 0.9rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.stage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
}

.stage__tags .tag {
  color: var(--on-ink);
  border-color: var(--ink-line-strong);
}

.stage__tags--apart {
  gap: 0.6rem 1.1rem;
}

.stage__note {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* "What should happen → … → what can realistically be changed" */
.stage__sequence {
  position: relative;
  display: grid;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.stage__sequence::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 3px;
  width: 1px;
  background: var(--ink-line-strong);
}

.stage__sequence li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--on-ink-muted);
}

.stage__sequence li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--on-ink-muted);
}

.stage__sequence .is-pressure {
  color: var(--signal-soft);
}

.stage__sequence .is-pressure::before {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 0 4px rgb(226 103 47 / 22%);
}

/* Audit → Act → Snapshot → Measure again */
.stage__loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink);
}

.stage__loop li:not(:last-child)::after {
  content: "→";
  margin-inline: 0.75rem;
  color: var(--on-ink-muted);
}

.stage__loop .is-pressure {
  color: var(--on-ink);
}

.stage__loop .is-pressure::after {
  content: "↺";
  margin-left: 0.6rem;
}

.stage__media {
  aspect-ratio: 3 / 2;
}

.stage__media img {
  transform-origin: 50% 60%;
}

/* Plates are ink-ground: a hairline keeps them from dissolving into ink sections. */
.stage__media,
.app__media {
  outline: 1px solid var(--ink-line-strong);
}

/* Real dashboard from a past Audit, pinned to the same corner of every image. */
.stage__inset {
  --frame-color: var(--on-ink);
  --frame-gap: 6px;
  --frame-size: 10px;

  position: absolute;

  /* Clear of the plate furniture: above the "Pl." label, inside the crosshair column. */
  right: 16px;
  bottom: calc(1.75rem + 0.85rem + 2.6rem);
  z-index: 2;
  width: 40%;
  padding: 3px;
  background: var(--paper);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 55%);
}

.stage__inset img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
}

.stage__caption {
  min-height: 1.75rem;
}

.stage__caption span:last-child {
  flex: none;
  white-space: nowrap;
}

@media (width <= 900px) {
  /* One column: twelve tracks with 2rem gaps would outgrow a 320px screen. */
  .stage,
  .stage:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .stage__copy,
  .stage__figure,
  .stage:nth-of-type(even) .stage__copy,
  .stage:nth-of-type(even) .stage__figure {
    grid-column: 1 / -1;
    order: 0;
  }

  .stage__figure {
    order: -1;
  }

  .stage:nth-of-type(even) .stage__figure {
    order: -1;
  }

  .stage__inset {
    right: 12px;
    bottom: calc(1.75rem + 0.85rem + 2.4rem);
    width: 46%;
  }
}

/* -------- Pinned instrument view */

.stages.is-pinned .stages__pin {
  height: 100svh;
  padding: 0;
}

.stages.is-pinned .stages__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(1.75rem, 5svh, 3.5rem) var(--gutter);
  height: 100%;
  padding-top: calc(var(--header-h) * 0.75);
  padding-bottom: 2svh;
}

.stages.is-pinned .stages__head {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: clamp(0.9rem, 2svh, 1.25rem);
  border-bottom: 1px solid var(--line);
}

.stages.is-pinned .stages__intro {
  max-width: none;
  margin-top: clamp(0.5rem, 1.2svh, 0.85rem);
  font-size: clamp(1.375rem, 0.6rem + 2.4svh, 2rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.stages.is-pinned .stages__rail {
  position: relative;
  display: block;
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: center;
}

.stages.is-pinned .stages__track {
  grid-column: 3 / -1;
  grid-row: 2;
  grid-template-columns: subgrid;
  gap: 0;
  align-self: center;
}

.stages.is-pinned .stage {
  grid-area: 1 / 1 / 2 / -1;
  grid-template-columns: subgrid;
  align-items: start;
}

.stages.is-pinned .stage__copy,
.stages.is-pinned .stage:nth-of-type(even) .stage__copy {
  grid-column: 1 / span 4;
  align-self: center;
  order: 0;
  padding-right: 1rem;
}

.stages.is-pinned .stage__figure,
.stages.is-pinned .stage:nth-of-type(even) .stage__figure {
  grid-column: 5 / -1;
  order: 0;
}

.stages.is-pinned .stage__media {
  will-change: opacity;
}

.stages.is-pinned .stage__caption {
  margin-top: 1.6rem;
}

.stages.is-pinned .stage__inset {
  bottom: calc(1.75rem + 1.6rem + 3rem);
}

.stages.is-pinned .stages__viewfinder {
  --frame-gap: 10px;
  --frame-size: 18px;

  position: relative;
  z-index: 3;
  display: block;
  grid-area: 1 / 5 / 2 / -1;
  aspect-ratio: 3 / 2;
  pointer-events: none;
}

/* Rail */
.stages__rail-track {
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  left: 5px;
  width: 1px;
  background: var(--ink-line-strong);
}

.stages__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--on-ink);
  transform: scaleY(0);
  transform-origin: top;
}

/* Links carry 0.75rem of padding above and below (a ≥ 35px target); the gap shrinks to match. */
.stages__rail-list {
  position: relative;
  display: grid;
  gap: clamp(0rem, 4.5svh - 1.5rem, 1.1rem);
  list-style: none;
  padding: 0;
}

.stages__rail-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-block: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-ink-muted);
  transition: color 0.4s;
}

.stages__rail-link:hover,
.stages__rail-link.is-active {
  color: var(--on-ink);
}

.stages__rail-n {
  opacity: 0.6;
}

.stages__rail-node {
  position: relative;
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--on-ink-muted);
  border-radius: 50%;
  background: var(--ink);
  transition:
    background-color 0.4s,
    border-color 0.4s,
    box-shadow 0.5s var(--ease-out);
}

.stages__rail-link.is-done .stages__rail-node {
  border-color: var(--on-ink);
  background: var(--on-ink);
}

.stages__rail-link.is-active .stages__rail-node {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 5px rgb(226 103 47 / 22%);
}

/* ------------------------------------------------------------- Difference */

.compare {
  position: relative;
  counter-reset: compare;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare__col-seems {
  width: 40%;
}

.compare__col-evidence {
  width: 60%;
}

.compare__th {
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 450;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
}

.compare__th--evidence {
  padding-left: clamp(2.75rem, 5vw, 4.5rem);
  color: var(--text);
}

.compare__th-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.compare__mark {
  width: 1.25rem;
  height: 1.25rem;
}

.compare__row td {
  padding-block: clamp(1.15rem, 0.8rem + 1.1vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.compare__seems {
  padding-right: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--muted);
}

.compare__seems::before {
  counter-increment: compare;
  content: counter(compare, decimal-leading-zero);
  display: inline-block;
  min-width: 3.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--teal);
  vertical-align: 0.1em;
}

.compare__seems span {
  position: relative;
}

.compare__seems span::after {
  content: "";
  position: absolute;
  top: 55%;
  left: -0.15em;
  right: -0.15em;
  height: 1px;
  background: currentcolor;
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.15s;
}

.compare__evidence {
  position: relative;
  padding-left: clamp(2.75rem, 5vw, 4.5rem);
}

.compare__evidence::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: clamp(0.25rem, 1vw, 1rem);
  font-size: 1rem;
  line-height: 1;
  color: var(--teal);
  transform: translateY(-50%);
  transition:
    opacity 0.6s,
    transform 0.8s var(--ease-out);
}

.compare__evidence span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 0.95rem + 1.25vw, 2.1rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
  transition:
    filter 0.9s var(--ease-out),
    opacity 0.9s var(--ease-out);
}

/* Scanning state, enabled by home.js until the scan ends: rows ahead of the viewfinder are
   softened, never illegible – at most a 2px blur, at least 0.55 opacity. */
.compare.is-scanning .compare__row:not(.is-focused) .compare__evidence span {
  filter: blur(1.5px);
  opacity: 0.55;
}

.compare.is-scanning .compare__row:not(.is-focused) .compare__evidence::before {
  opacity: 0;
  transform: translate(-0.75rem, -50%);
}

.compare.is-scanning .compare__row:not(.is-focused) .compare__seems span::after {
  transform: scaleX(0);
}

.compare.is-scanning .compare__row:not(.is-focused) .compare__seems {
  color: var(--text);
}

.compare__seems,
.compare__row {
  transition: color 0.8s var(--ease-out);
}

.compare__focus {
  --frame-size: 14px;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (width <= 720px) {
  .compare__col-seems {
    width: 38%;
  }

  .compare__col-evidence {
    width: 62%;
  }

  .compare__th--evidence,
  .compare__evidence {
    padding-left: 1.1rem;
  }

  .compare__evidence::before {
    display: none;
  }

  .compare__seems {
    padding-right: 0.5rem;
    font-size: 0.875rem;
  }

  .compare__seems::before {
    display: block;
    margin-bottom: 0.35rem;
  }

  .compare__evidence span {
    font-size: 1.1875rem;
  }

  .compare.is-scanning .compare__row:not(.is-focused) .compare__evidence span {
    filter: blur(1px);
  }

  .compare__th {
    font-size: var(--fs-mono-min);
  }

  .compare__mark {
    display: none;
  }
}

/* --------------------------------------------------------------- Products
   Left: the four "We need…" rows. Right: a sticky ink instrument – a WebGL point-field
   (home-instrument.js) that re-forms into each product's model as a row is chosen.        */

.selector {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}

.selector__main {
  grid-column: 1 / span 7;
}

.selector__labels {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: clamp(1rem, 0.5rem + 1.2vw, 1.75rem);
  padding: 0 0.75rem 1rem;
  border-bottom: 1px solid var(--text);
  color: var(--muted);
}

.selector__labels span:first-child {
  grid-column: 2;
}

.selector__list {
  list-style: none;
  padding: 0;
}

.selector__item {
  border-bottom: 1px solid var(--line-strong);
}

.selector__row {
  --frame-color: var(--text);
  --frame-size: 12px;

  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem;
  gap: 1.1rem clamp(1rem, 0.5rem + 1.2vw, 1.75rem);
  align-items: start;
  padding: clamp(1.4rem, 0.9rem + 1.2vw, 2.1rem) 0.75rem;
  transition: background-color 0.5s var(--ease-out);
}

.selector__row:focus-visible {
  outline-offset: -2px;
}

.selector__row.is-active {
  background: var(--paper);
}

.selector__row.is-active::before,
.selector__row.is-active::after,
.selector__row.is-active > .frame__b::before,
.selector__row.is-active > .frame__b::after {
  opacity: 1;
  transform: none;
}

.selector__index {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.55rem;
  color: var(--muted);
  transition: color 0.4s;
}

.selector__row.is-active .selector__index {
  color: var(--text);
}

/* Signal dot: lit (and breathing) on the row the instrument is showing. */
.selector__signal {
  flex: none;
  width: 6px;
  height: 6px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  transition:
    background-color 0.4s,
    border-color 0.4s;
}

.selector__row.is-active .selector__signal {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 0 rgb(226 103 47 / 45%);
  animation: selector-signal 2.4s var(--ease-out) infinite;
}

@keyframes selector-signal {
  0% {
    box-shadow: 0 0 0 0 rgb(226 103 47 / 45%);
  }

  70%,
  100% {
    box-shadow: 0 0 0 7px rgb(226 103 47 / 0%);
  }
}

.selector__problem {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.05rem + 1.05vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--muted);
  transition:
    transform 0.6s var(--ease-out),
    color 0.5s;
}

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

.selector__row.is-active .selector__problem {
  color: var(--text);
  transform: translateX(0.35rem);
}

.selector__meta {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.5rem var(--gutter);
}

.selector__product {
  display: grid;
  align-content: start;
  gap: 0.2rem;
}

.selector__name {
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -0.01em;
}

.selector__tagline {
  font-size: var(--fs-small);
  color: var(--muted);
}

.selector__produces {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.selector__produces-label {
  font-size: var(--fs-mono-min);
  color: var(--muted);
}

.selector__go {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    background-color 0.4s var(--ease-out),
    border-color 0.4s,
    color 0.4s,
    transform 0.5s var(--ease-out);
}

.selector__go svg {
  width: 1rem;
  height: 1rem;
}

.selector__row.is-active .selector__go {
  border-color: var(--text);
  color: var(--text);
}

.selector__row:hover .selector__go,
.selector__row:focus-visible .selector__go {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  transform: rotate(-45deg);
}

/* Pinned (desktop, home.js selectorScroll): a compact list beside a fixed instrument; the
   rows not on the instrument step back. */
.selector.is-pinned {
  align-items: center;
}

.selector.is-pinned .instrument {
  position: relative;
  top: auto;
}

.selector.is-pinned .instrument__screen {
  height: clamp(15rem, calc(100svh - var(--header-h) - 20rem), 32rem);
}

.selector.is-pinned .selector__row {
  padding-block: clamp(0.85rem, 0.2rem + 1.6svh, 1.5rem);
  row-gap: 0.7rem;
}

.selector.is-pinned .selector__problem {
  font-size: clamp(1.35rem, 0.95rem + 0.9vw, 1.85rem);
}

.selector.is-pinned .selector__meta,
.selector.is-pinned .selector__go {
  transition:
    opacity 0.5s var(--ease-out),
    color 0.5s var(--ease-out),
    background-color 0.4s var(--ease-out),
    border-color 0.4s,
    color 0.4s,
    transform 0.5s var(--ease-out);
}

/* Rows not on the instrument step back – in colour (still AA), the arrow in opacity. */
.selector.is-pinned .selector__row:not(.is-active) .selector__meta {
  color: var(--muted);
}

.selector.is-pinned .selector__row:not(.is-active) .selector__go {
  opacity: 0.45;
}

/* While pinned the list sits still under a resting cursor, so hover stays quiet – only the
   row on the instrument is framed. */
.selector.is-pinned .selector__row:not(.is-active):hover::before,
.selector.is-pinned .selector__row:not(.is-active):hover::after,
.selector.is-pinned .selector__row:not(.is-active):hover > .frame__b::before,
.selector.is-pinned .selector__row:not(.is-active):hover > .frame__b::after {
  opacity: 0;
}

.selector.is-pinned .selector__row:not(.is-active):hover .selector__go {
  opacity: 1;
  border-color: var(--line-strong);
  background: none;
  color: inherit;
  transform: none;
}

.selector.is-pinned .selector__foot {
  margin-top: 1.25rem;
}

.selector__foot {
  margin-top: 2rem;
}

/* ---- Instrument panel */
.instrument {
  --frame-size: 16px;
  --frame-gap: 9px;
  --frame-color: var(--text);

  position: sticky;
  top: calc(var(--header-h) + 1.75rem);
  grid-column: 8 / -1;
  display: grid;
  margin-left: clamp(0rem, -2rem + 3vw, 1.5rem);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -40px rgb(10 37 48 / 55%);
}

.instrument.theme-ink {
  --frame-color: var(--ink);
}

.instrument__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--ink-line);
  font-size: var(--fs-mono-min);
  color: var(--on-ink-muted);
}

.instrument__name {
  color: var(--on-ink);
}

.instrument__live {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.5rem;
}

.instrument__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  animation: instrument-blink 2s steps(2, jump-none) infinite;
}

.instrument:not(.is-live) .instrument__live-dot,
.instrument.is-static .instrument__live-dot {
  animation: none;
  background: var(--on-ink-muted);
}

@keyframes instrument-blink {
  50% {
    opacity: 0.25;
  }
}

.instrument__screen {
  position: relative;
  height: clamp(20rem, calc(100svh - var(--header-h) - 15rem), 36rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgb(29 111 132 / 14%), transparent 70%),
    var(--ink);
}

.instrument__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.instrument.is-live .instrument__canvas {
  opacity: 1;
}

/* Without WebGL (or before it starts) the etched plate for the chosen product stands in. */
.instrument__fallback {
  position: absolute;
  inset: 0;
  transition: opacity 0.8s;
}

.instrument.is-live .instrument__fallback {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s,
    visibility 0s 0.8s;
}

.instrument__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.06;
  transition:
    opacity 0.6s var(--ease-out),
    scale 1.2s var(--ease-out);
}

.instrument__plate.is-active {
  opacity: 1;
  scale: 1;
}

.instrument__ruler {
  position: absolute;
  pointer-events: none;
}

.instrument__ruler--x {
  top: 0;
  left: 10%;
  right: 10%;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--ink-line-strong) 0 1px, transparent 1px 10%) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-line-strong) 0 1px, transparent 1px 2.5%) top / 100% 5px no-repeat;
}

.instrument__ruler--y {
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 9px;
  background:
    repeating-linear-gradient(180deg, var(--ink-line-strong) 0 1px, transparent 1px 10%) left / 9px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ink-line-strong) 0 1px, transparent 1px 2.5%) left / 5px 100% no-repeat;
}

.instrument__cross {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 15px;
  height: 15px;
  background:
    linear-gradient(var(--ink-line-strong), var(--ink-line-strong)) center / 1px 100% no-repeat,
    linear-gradient(var(--ink-line-strong), var(--ink-line-strong)) center / 100% 1px no-repeat;
  pointer-events: none;
}

.instrument__readout {
  display: grid;
  gap: 1rem;
  padding: 1.05rem 1.1rem 1.15rem;
  border-top: 1px solid var(--ink-line);
}

.instrument__caption {
  min-height: 3em;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--on-ink);
  text-wrap: pretty;
}

.instrument__caption.is-swapping {
  animation: instrument-caption 0.7s var(--ease-out);
}

@keyframes instrument-caption {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.instrument__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: var(--fs-mono-min);
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-muted);
}

.instrument__k {
  margin-right: 0.5em;
  color: var(--teal-mist);
}

.instrument__fig {
  margin-left: auto;
}

/* Colour key for the formation on screen (home.js sets data-active). */
.instrument__keys {
  display: flex;
  min-height: 1.2em;
  font-size: var(--fs-mono-min);
  color: var(--on-ink);
}

.instrument__key {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

.instrument[data-active="0"] .instrument__key[data-key="0"],
.instrument[data-active="1"] .instrument__key[data-key="1"],
.instrument[data-active="2"] .instrument__key[data-key="2"],
.instrument[data-active="3"] .instrument__key[data-key="3"] {
  display: flex;
}

.instrument__swatch {
  width: 8px;
  height: 8px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--paper);
}

.instrument__swatch:first-child {
  margin-left: 0;
}

.instrument__swatch--amber {
  background: var(--signal);
}

.instrument__swatch--mist {
  background: var(--teal-mist);
}

.instrument__swatch--line {
  width: 14px;
  height: 1px;
  border-radius: 0;
  background: var(--signal);
}

/* In-scene labels (home-instrument.js projects each anchor every frame). */
.instrument__labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.instrument:not(.is-live) .instrument__labels {
  display: none;
}

.ilabel {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.35s;
  will-change: transform;
}

.instrument__labels[data-show="0"] .ilabel[data-f="0"],
.instrument__labels[data-show="1"] .ilabel[data-f="1"],
.instrument__labels[data-show="2"] .ilabel[data-f="2"],
.instrument__labels[data-show="3"] .ilabel[data-f="3"] {
  opacity: 1;
  transition: opacity 0.7s 0.15s;
}

.ilabel__text {
  position: absolute;
  padding: 0.2em 0.45em;
  background: rgb(10 37 48 / 78%);
}

.ilabel__dot {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  background: var(--ink);
}

.ilabel__line {
  position: absolute;
  background: currentcolor;
  opacity: 0.55;
}

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

.ilabel--key {
  color: var(--signal);
}

.ilabel--right .ilabel__line {
  top: 0;
  left: 3px;
  width: 22px;
  height: 1px;
}

.ilabel--right .ilabel__text {
  top: 0;
  left: 26px;
  transform: translateY(-50%);
}

.ilabel--below .ilabel__line,
.ilabel--above .ilabel__line {
  left: 0;
  width: 1px;
  height: 16px;
}

.ilabel--below .ilabel__line {
  top: 3px;
}

.ilabel--above .ilabel__line {
  bottom: 3px;
}

.ilabel--below .ilabel__text {
  top: 19px;
  transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 0));
}

.ilabel--above .ilabel__text {
  bottom: 19px;
  transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 0));
}

.ilabel--right.ilabel--flip .ilabel__line {
  left: auto;
  right: 3px;
}

.ilabel--right.ilabel--flip .ilabel__text {
  left: auto;
  right: 26px;
}

/* Gutter labels: text in a column at the left edge, a leader running to the anchor. */
.ilabel--gutter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 0;
  padding-left: 14px;
}

.ilabel--gutter .ilabel__text,
.ilabel--gutter .ilabel__line,
.ilabel--gutter .ilabel__dot {
  position: static;
  flex: none;
}

.ilabel--gutter .ilabel__text {
  order: 0;
  padding: 0;
  background: none;
}

.ilabel--gutter .ilabel__line {
  order: 1;
  width: var(--lead, 20px);
  height: 1px;
}

.ilabel--gutter .ilabel__dot {
  order: 2;
  margin: 0;
}

.instrument.is-compact .ilabel:not(.ilabel--mobile) {
  display: none;
}

/* Plate fallback: no live geometry to report. */
.instrument:not(.is-live) .instrument__stats > span:not(.instrument__fig) {
  display: none;
}

@media (width <= 1180px) {
  .instrument__word {
    display: none;
  }
}

@media (width <= 1080px) {
  .selector__main {
    grid-column: 1 / span 7;
  }

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

  .instrument {
    margin-left: 0;
  }
}

@media (width <= 900px) {
  .selector {
    display: flex;
    flex-direction: column-reverse;
    gap: 2.5rem;
  }

  .instrument {
    position: relative;
    top: auto;
    width: calc(100% - 18px);
    margin-inline: auto;
  }

  .instrument__screen {
    height: clamp(17rem, 78vw, 26rem);
  }

  /* Scroll-driven (home.js): the instrument rides at the top while the rows pass beneath it;
     the row crossing the reading line is the one shown. The site header (main.js) hides on
     scroll-down and returns on scroll-up; home.js mirrors that as body.home-header-in so the
     instrument steps below it instead of under it. An opaque paper "mat" masks the rows
     passing beneath, edge to edge. */
  .selector.is-stacked .instrument {
    position: sticky;
    top: 0.75rem;
    z-index: 5;
    box-shadow: 0 0 0 calc(var(--gutter) + 9px) var(--paper-2);
    transition: top 0.5s var(--ease-out);
  }

  .home-header-in .selector.is-stacked .instrument {
    top: calc(var(--header-h) + 0.75rem);
  }

  .selector.is-stacked .instrument__screen {
    height: clamp(9.5rem, 22svh, 14rem);
  }

  .selector.is-stacked .instrument__bar {
    padding-block: 0.7rem;
  }

  .selector.is-stacked .instrument__readout {
    gap: 0.6rem;
    padding: 0.8rem 1rem 0.9rem;
  }

  .selector.is-stacked .instrument__caption {
    min-height: 0;
    font-size: var(--fs-xs);
    line-height: 1.45;
  }

  .selector.is-stacked .instrument__stats {
    display: none;
  }

  .selector.is-stacked .selector__list {
    padding-bottom: 22svh;
  }

  .instrument__bar {
    grid-template-columns: auto 1fr auto;
  }

  .instrument__name {
    text-align: center;
  }

  .selector__main {
    width: 100%;
  }

  .selector__labels {
    display: none;
  }

  .selector__item:first-child {
    border-top: 1px solid var(--text);
  }

  .selector__row {
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem;
  }

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

@media (width <= 560px) {
  .selector__problem {
    font-size: 1.375rem;
  }

  .instrument__stats > span:nth-child(3),
  .instrument__word {
    display: none;
  }
}

/* ----------------------------------------------------------- Applications */

.apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem var(--gutter);
  align-items: start;
  list-style: none;
  padding: 0;
}

.app__link {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.app__media {
  --frame-color: var(--on-ink);
  --frame-size: 16px;

  display: block;
  aspect-ratio: 4 / 5;
}

.app__media img {
  transition: scale 1.2s var(--ease-out);
}

/* Keep each plate's amber pressure point inside the tall crop. */
.app__media[data-plate-draw="investment"] img {
  object-position: 22% 50%;
}

.app__media[data-plate-draw="first-100-days"] img {
  object-position: 4% 50%;
}

.app__link:is(:hover, :focus-visible) .app__media::before,
.app__link:is(:hover, :focus-visible) .app__media::after,
.app__link:is(:hover, :focus-visible) .app__media > .frame__b::before,
.app__link:is(:hover, :focus-visible) .app__media > .frame__b::after {
  opacity: 1;
  transform: none;
}

.app__link:hover .app__media img {
  scale: 1.18;
}

.app__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--muted);
}

.app__index {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--ink-line-strong);
  color: var(--on-ink);
}

.app__question {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.9rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-indent: -0.42em;
  text-wrap: pretty;
}

.app__foot {
  display: grid;
  gap: 0.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.app__title {
  font-weight: 560;
  letter-spacing: -0.01em;
}

.app__tagline {
  font-size: var(--fs-small);
  color: var(--muted);
}

.app__more {
  margin-top: 0.85rem;
}

@media (width <= 900px) {
  .apps {
    grid-template-columns: 1fr;
  }

  .app__media {
    aspect-ratio: 3 / 2;
  }
}

/* --------------------------------------------------------- Data to action */

.d2a__statement {
  max-width: 15.5em;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.d2a__statement em {
  color: var(--teal);
}

.d2a__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3.5rem var(--gutter);
  align-items: center;
  margin-top: clamp(4rem, 3rem + 5vw, 7.5rem);
}

.matrix {
  grid-column: 1 / span 7;
  padding: clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem);
  border-radius: var(--radius);
}

.d2a__copy {
  grid-column: 9 / -1;
}

.d2a__title {
  margin-top: 1.25rem;
}

.d2a__lead {
  margin-top: 1.25rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.d2a__points {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-strong);
}

.d2a__points li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.45;
}

.d2a__points li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.8rem;
  height: 1px;
  background: var(--teal);
}

/* Matrix figure */
.matrix__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.matrix__bar span:first-child {
  color: var(--on-ink);
}

.matrix__grid {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem repeat(4, minmax(0, 1fr)) 3rem;
  gap: 6px;
  align-items: center;
}

.matrix__row {
  display: contents;
}

.matrix__corner,
.matrix__col {
  align-self: end;
  padding-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-min);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

.matrix__col-short {
  display: none;
}

.matrix__col--rank {
  text-align: right;
}

.matrix__label,
.matrix__rank {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--on-ink-muted);
  transition: color 0.6s;
}

.matrix__rank {
  text-align: right;
  transition:
    color 0.6s,
    opacity 0.6s;
}

.matrix__cell {
  position: relative;
  height: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  border: 1px solid var(--ink-line);
  background: var(--ink-2);
}

.matrix__cell::after,
.matrix__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal-soft);
  opacity: 0.2;
  transition:
    background-color 0.7s var(--ease-out),
    opacity 0.7s var(--ease-out);
}

[data-l="2"]::after {
  opacity: 0.45;
}

[data-l="3"]::after {
  opacity: 0.85;
}

/* Ranked state: shown by default (no JS) and after the animation (.is-ranked). */
.matrix:is(:not(.is-armed), .is-ranked) .matrix__row--priority .matrix__label,
.matrix:is(:not(.is-armed), .is-ranked) .matrix__row--priority .matrix__rank {
  color: var(--signal);
}

.matrix:is(:not(.is-armed), .is-ranked) .matrix__row--priority .matrix__cell[data-l="3"]::after {
  background: var(--signal);
  opacity: 1;
}

.matrix:is(:not(.is-armed), .is-ranked) .matrix__row--priority .matrix__cell {
  border-color: var(--ink-line-strong);
}

.matrix.is-armed:not(.is-ranked) .matrix__rank {
  opacity: 0;
}

.matrix__focus {
  --frame-size: 10px;
  --frame-color: var(--signal);

  position: absolute;
  inset: -6px -8px;
  grid-row: 3;
  grid-column: 1 / -1;
  pointer-events: none;
}

.matrix.is-armed:not(.is-ranked) .matrix__focus::before {
  transform: translate(-8px, -8px);
  opacity: 0;
}

.matrix.is-armed:not(.is-ranked) .matrix__focus::after {
  transform: translate(8px, -8px);
  opacity: 0;
}

.matrix.is-armed:not(.is-ranked) .matrix__focus > .frame__b::before {
  transform: translate(-8px, 8px);
  opacity: 0;
}

.matrix.is-armed:not(.is-ranked) .matrix__focus > .frame__b::after {
  transform: translate(8px, 8px);
  opacity: 0;
}

.matrix__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-mono-min);
  letter-spacing: 0.1em;
  color: var(--muted);
}

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

.matrix__swatch {
  position: relative;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--ink-line);
  background: var(--ink-2);
}

.matrix__swatch + * {
  margin-left: 0.4rem;
}

/* Action Matrix → Roadmap → Sustainability */
.d2a__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  margin-top: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  list-style: none;
  padding: 0;
}

.d2a__step {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-strong);
}

.d2a__step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  background: var(--paper);
}

.d2a__step:first-child::before {
  border-color: var(--signal);
  background: var(--signal);
}

.d2a__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: -0.8rem;
  right: 0;
  padding-left: 0.6rem;
  background: var(--paper);
  font-size: 0.95rem;
  color: var(--muted);
}

.d2a__step-n {
  color: var(--text);
}

.d2a__step-n span {
  margin-right: 0.9em;
  color: var(--teal);
}

.d2a__step p + p {
  max-width: 28em;
  margin-top: 0.85rem;
  color: var(--muted);
}

.d2a__link {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (width <= 1080px) {
  .matrix,
  .d2a__copy {
    grid-column: 1 / -1;
  }

  .d2a__copy {
    max-width: 40rem;
  }
}

@media (width <= 720px) {
  .d2a__steps {
    grid-template-columns: 1fr;
  }

  .d2a__step:not(:last-child)::after {
    display: none;
  }

  .matrix__grid {
    grid-template-columns: 2.6rem repeat(4, minmax(0, 1fr)) 1.6rem;
    gap: 4px;
  }

  /* The matrix grid is aria-hidden (decorative); 10px with a short "Feas." keeps it legible. */
  .matrix__corner,
  .matrix__col {
    font-size: 0.625rem;
    letter-spacing: 0;
  }

  .matrix__col-full {
    display: none;
  }

  .matrix__col-short {
    display: inline;
  }

  .matrix__label,
  .matrix__rank {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }
}

/* --------------------------------------------------------- Where we work */

.where__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem var(--gutter);
  align-items: start;
}

.where__map {
  grid-column: 1 / span 8;
  min-height: 12rem;

  /* Contain marker labels that can run past the edge on narrow screens. */
  overflow-x: clip;
}

.where__aside {
  grid-column: 10 / -1;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.where__count-n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 3.5rem + 5vw, 8.5rem);
  letter-spacing: -0.045em;
  line-height: 0.85;
  font-variant-numeric: lining-nums tabular-nums;
}

.where__count-label {
  display: block;
  max-width: 18em;
  margin-top: 1rem;
  color: var(--muted);
}

.where__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  margin: 2rem 0;
  list-style: none;
  padding: 0;
  font-size: 0.6875rem;
}

.where__list li {
  border-top: 1px solid var(--line);
}

.where__list a,
.where__list li > span:only-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.6rem;
  transition: color 0.3s;
}

.where__list a:hover {
  color: var(--on-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.where__status {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--signal);
}

.where__legend {
  margin: -1rem 0 2rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.where__legend .where__status {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: 0.1em;
}

.results__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem var(--gutter);
  list-style: none;
  padding: 0;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}

.result__value {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.25rem + 3vw, 5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.result__unit {
  margin-left: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.28em;
  letter-spacing: 0;
  color: var(--muted);
}

.result__label {
  max-width: 22em;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.result__source {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-mono-min);
  color: var(--muted);
}

@media (width <= 1080px) {
  .where__map,
  .where__aside {
    grid-column: 1 / -1;
  }

  .where__aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .where__list {
    margin-top: 0;
  }

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

@media (width <= 560px) {
  .where__aside {
    display: block;
  }

  .where__list {
    margin-top: 2rem;
  }

  .results__list {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ------------------------------------------------------------ Testimonials */

.voices__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 3rem var(--gutter);
}

.voices__head {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.voices__title {
  margin-top: 1.5rem;
}

.voices__lead {
  max-width: 22em;
  margin-top: 1.5rem;
  color: var(--muted);
}

.voices__stage {
  position: relative;
  grid-column: 6 / -1;
  grid-row: 1 / span 2;
  padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem);
}

/* Oversized opening quote, quiet in teal. */
.voices__stage::before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.06em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 5rem + 6vw, 11rem);
  line-height: 0.8;
  color: var(--teal);
  opacity: 0.85;
}

.voices__track {
  display: grid;
}

.voice {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.js .voice {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.9s var(--ease-out),
    visibility 0s 0.7s;
}

.js .voice.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.9s var(--ease-out) 0.15s,
    transform 1.1s var(--ease-out) 0.15s,
    visibility 0s;
}

.voice__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.05rem + 2.2vw, 3.25rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: pretty;
}

.voice__quote p::after {
  content: "”";
}

.voice__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.voice__source {
  font-weight: 560;
  letter-spacing: -0.01em;
}

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

.voice__product {
  margin-left: auto;
  color: var(--text);
  transition:
    border-color 0.3s,
    background-color 0.3s;
}

.voice__product:hover {
  border-color: var(--text);
  background: var(--paper);
}

.voices__controls {
  grid-column: 1 / span 4;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.voices__controls[hidden],
.voices__btn[hidden] {
  display: none;
}

.voices__btn {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s,
    color 0.35s;
}

.voices__btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.voices__btn svg {
  width: 1rem;
  height: 1rem;
}

.voices__icon-play,
.voices__btn--toggle.is-paused .voices__icon-pause {
  display: none;
}

.voices__btn--toggle.is-paused .voices__icon-play {
  display: block;
}

.voices__count {
  margin-left: 1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.voices__count span:first-child {
  color: var(--text);
}

.voices__progress {
  position: relative;
  flex-basis: 100%;
  height: 1px;
  margin-top: 1.25rem;
  overflow: hidden;
  background: var(--line-strong);
}

.voices__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
}

@media (width <= 900px) {
  .voices__inner {
    grid-template-rows: none;
    row-gap: 2.5rem;
  }

  .voices__head,
  .voices__stage,
  .voices__controls {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .voice {
    justify-content: flex-start;
  }

  .voice__product {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------- Network */

.network__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--text);
  color: var(--muted);
}

.network__label span:first-child {
  color: var(--text);
}

.people-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  list-style: none;
  padding: 0;
}

.person__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.person__photo {
  display: block;
  margin-bottom: 0.9rem;
  aspect-ratio: 4 / 5;
  background: var(--paper-3);
}

.person__photo img {
  filter: grayscale(1) contrast(1.04);
  transition:
    filter 0.8s var(--ease-out),
    scale 1s var(--ease-out);
}

.person__link:is(:hover, :focus-visible) .person__photo img {
  filter: none;
  scale: 1.04;
}

.person__link:is(:hover, :focus-visible) .person__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.person__photo--empty {
  display: grid;
  place-items: center;
}

.person__initials {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.person__name {
  font-weight: 560;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.person__role {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--muted);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem var(--gutter);
  margin-top: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  list-style: none;
  padding: 0;
}

.tier {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
}

.tier--national {
  border-top: 2px solid var(--teal);
}

.tier__n {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--teal);
}

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

.tier__title {
  margin-top: 1rem;
  font-size: var(--fs-h3);
}

.tier__text {
  max-width: 30em;
  margin-top: 0.9rem;
  color: var(--muted);
}

.tier__text strong {
  font-weight: 560;
  color: var(--text);
}

.tier__domains {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
  list-style: none;
  padding: 0;
}

.tier__domains .tag {
  white-space: normal;
}

.network__link {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

@media (width <= 1080px) {
  .people-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tiers {
    grid-template-columns: 1fr;
    max-width: 44rem;
  }
}

@media (width <= 560px) {
  .people-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }
}

/* ------------------------------------------------ Routes band (under hero)
   The question-led routes sit just below the hero so the hero stays calm:
   headline, one sentence, one action, the field. */

.hero__how {
  color: var(--on-ink);
}

.routes-band {
  position: relative;
  padding-block: 1.6rem;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-2);
}

.routes-band .hero__routes {
  margin: 0;
}

.hero__actions .hero__how {
  margin-left: 0.75rem;
}