/* ——— The instrument frame: persistent chrome that holds the whole page as a
   panel rather than a document. Corner ticks, a live chapter readout, and a
   travel rail down the left edge. ——— */
.instrument-frame {
  position: fixed;
  z-index: 75;
  inset: 0;
  pointer-events: none;
}

.frame-corner {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border: 0 solid rgb(18 22 21 / 42%);
  transition: border-color 500ms var(--ease-physical);
}

.frame-corner--tl { top: 0.7rem; left: 0.7rem; border-top-width: 1px; border-left-width: 1px; }
.frame-corner--tr { top: 0.7rem; right: 0.7rem; border-top-width: 1px; border-right-width: 1px; }
.frame-corner--bl { bottom: 0.7rem; left: 0.7rem; border-bottom-width: 1px; border-left-width: 1px; }
.frame-corner--br { bottom: 0.7rem; right: 0.7rem; border-bottom-width: 1px; border-right-width: 1px; }

.frame-readout {
  position: absolute;
  bottom: 2.6rem;
  left: 0.55rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 500ms var(--ease-physical);
}

.frame-index {
  color: var(--signal-text);
  transition: color 500ms var(--ease-physical);
}

.frame-progress {
  position: absolute;
  top: 6.5rem;
  bottom: 12rem;
  left: 1.04rem;
  width: 1px;
  background: rgb(18 22 21 / 18%);
  transition: background-color 500ms var(--ease-physical);
}

/* Scaled, not resized: this updates on every scroll frame, so it has to stay
   on the compositor instead of laying out the page each time. */
.frame-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--signal-text);
  transform: scaleY(var(--frame-progress, 0));
  transform-origin: top;
  transition: transform 140ms linear, background-color 500ms var(--ease-physical);
}

/* Over the dark passages the chrome inverts with the field it sits on. */
.instrument-frame[data-frame-field="dark"] .frame-corner { border-color: rgb(238 242 240 / 32%); }
.instrument-frame[data-frame-field="dark"] .frame-readout { color: var(--titanium); }
.instrument-frame[data-frame-field="dark"] .frame-index { color: var(--signal); }
.instrument-frame[data-frame-field="dark"] .frame-progress { background: rgb(238 242 240 / 18%); }
.instrument-frame[data-frame-field="dark"] .frame-progress > span { background: var(--signal); }

@media (max-width: 63.999rem) {
  .instrument-frame { display: none; }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  color: currentColor;
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  font-stretch: 86%;
  font-weight: 740;
  letter-spacing: -0.04em;
  text-decoration: none;
}

/* The mark's full point is struck in the same polished amber as the Assay
   keyword — the one piece of metal in the wordmark, on light and dark alike. */
.wordmark-mark { color: var(--signal); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wordmark-mark {
    background-image: linear-gradient(
      96deg,
      #9a6b2f 0%,
      #c8954e 20%,
      #f2dab0 40%,
      #d9a860 56%,
      #b07f3c 76%,
      #8f6229 100%
    );
    background-repeat: no-repeat;
    background-size: 300% 120%;
    background-position: 52% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.site-header nav {
  display: flex;
  gap: clamp(0.9rem, 2.2vw, 2.5rem);
  justify-self: center;
}

.site-header nav a,
.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.site-header nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition:
    opacity var(--state-fast) var(--ease-physical),
    transform var(--state-fast) var(--ease-physical);
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after,
.site-header nav a[aria-current]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Letter-split hover: each character lifts in a stagger. */
.site-header nav a .ltr {
  display: inline-block;
  transition: transform 260ms var(--ease-physical);
  transition-delay: calc(var(--i) * 18ms);
}

.site-header nav a:hover .ltr { transform: translateY(-3px); }

.header-cta {
  justify-self: end;
  padding-inline: var(--space-3);
  border: 1px solid var(--graphite);
  background: linear-gradient(180deg, #2b322f, #171c1b 58%, var(--graphite));
  color: var(--on-smoke);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    0 1px 2px rgb(18 22 21 / 26%);
  transition:
    background-color var(--state-fast) var(--ease-physical),
    color var(--state-fast) var(--ease-physical),
    box-shadow var(--state-fast) var(--ease-physical),
    transform var(--state-fast) var(--ease-physical);
}

/* Hover presses the action deeper into the ink and lights its base rule amber:
   the affordance intensifies at the moment of intent, it never evacuates. */
.header-cta:hover {
  background: linear-gradient(180deg, #232927, #101413 58%, #0b0e0d);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 20%),
    inset 0 -2px var(--signal),
    0 2px 6px rgb(18 22 21 / 30%);
  color: #fff;
  transform: translateY(-1px);
}

.eyebrow {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Machined label: every eyebrow carries its tick of rule. */
.eyebrow::before {
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.hero-title {
  margin-bottom: clamp(1.5rem, 2.8vw, 2.5rem);
  font-size: clamp(3.4rem, 5.5vw, 5.6rem);
  font-stretch: 91%;
  font-weight: 610;
  line-height: 0.88;
  letter-spacing: -0.04em;
}

.hero-line {
  display: block;
  overflow: hidden;
  padding: 0.1em 0 0.16em;
  margin: -0.1em 0 -0.16em;
}

.hero-line > span { display: block; }

/* ——— Arrival: the one rehearsed sequence. Pure CSS so it needs no script,
   fills both ways so nothing flashes, and collapses under reduced motion. ——— */
@keyframes arrive-fade-up {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes arrive-line {
  from { transform: translateY(112%); }
}

@keyframes arrive-header {
  from { opacity: 0; transform: translateY(-8px); }
}

@keyframes arrive-housing {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
}

@keyframes arrive-needle {
  from { transform: translateY(var(--rail-y, 0px)) scaleY(0); }
  to { transform: translateY(var(--rail-y, 0px)) scaleY(1); }
}

@keyframes arrive-sheen {
  to { background-position: 260% 0, 0 0, 0 0; }
}

.site-header { animation: arrive-header 600ms var(--ease-physical) both; }
.hero-copy .eyebrow { animation: arrive-fade-up 550ms var(--ease-physical) 120ms both; }
.hero-line > span { animation: arrive-line 750ms var(--ease-physical) 180ms both; }
.hero-line:last-child > span { animation-delay: 300ms; }
.hero-copy > p:not(.eyebrow) { animation: arrive-fade-up 650ms var(--ease-physical) 430ms both; }
.hero-actions { animation: arrive-fade-up 650ms var(--ease-physical) 540ms both; }

.decision-index {
  animation:
    arrive-housing 850ms var(--ease-physical) 350ms both,
    arrive-sheen 1400ms ease-out 1150ms both;
}

.decision-row { animation: arrive-fade-up 500ms var(--ease-physical) both; }
.decision-row:nth-child(1) { animation-delay: 620ms; }
.decision-row:nth-child(2) { animation-delay: 690ms; }
.decision-row:nth-child(3) { animation-delay: 760ms; }
.decision-row:nth-child(4) { animation-delay: 830ms; }
.decision-row:nth-child(5) { animation-delay: 900ms; }

.decision-index.is-enhanced::after {
  transform-origin: top;
  animation: arrive-needle 600ms var(--ease-physical) 1050ms both;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 30rem;
  margin-bottom: var(--space-6);
  color: var(--muted);

  /* Two even lines under a two-line headline; without support the measure
     alone still wraps it to two. */
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  transition:
    background-color var(--state-fast) var(--ease-physical),
    color var(--state-fast) var(--ease-physical),
    transform var(--state-fast) var(--ease-physical);
}

.primary-action {
  border: 1px solid var(--graphite);
  background: linear-gradient(180deg, #2b322f, #171c1b 58%, var(--graphite));
  color: var(--on-smoke);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    0 1px 2px rgb(18 22 21 / 26%);
}

.primary-action:hover {
  background: linear-gradient(180deg, #232927, #101413 58%, #0b0e0d);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 20%),
    inset 0 -2px var(--signal),
    0 2px 6px rgb(18 22 21 / 30%);
  color: #fff;
  transform: translateY(-1px);
}

.secondary-action {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.primary-action:active,
.secondary-action:active { transform: translateY(1px); }

/* The instrument: a smoked-glass object with a milled aluminium rim
   (gradient border), one contact shadow and two ambient falloffs. The dark
   mass on the light field is the hero's centre of gravity. */
.decision-index {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: var(--on-smoke);
  background:
    linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 26%) 50%, transparent 68%) no-repeat -180% 0 / 55% 100% padding-box,
    linear-gradient(118deg, rgb(32 39 37 / 95%), rgb(22 28 26 / 97%) 52%, rgb(15 20 19 / 96%)) padding-box,
    linear-gradient(165deg, rgb(255 255 255 / 60%), rgb(140 148 145 / 60%) 30%, rgb(52 59 56 / 70%) 62%, rgb(174 180 177 / 60%)) border-box;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 26%),
    inset 0 -1px rgb(255 255 255 / 7%),
    0 1px 2px rgb(18 22 21 / 24%),
    0 28px 56px -20px rgb(18 22 21 / 42%),
    0 72px 140px -48px rgb(18 22 21 / 30%);
  backdrop-filter: blur(18px) saturate(114%);
}

/* The gauge rail: every row carries its titanium segment, and the amber needle
   (on the index itself, driven by the controller) glides between decisions. */
.decision-row {
  position: relative;
  border: 1px solid transparent;
  border-top-color: rgb(238 242 240 / 12%);
  color: var(--on-smoke);
  box-shadow:
    inset 2px 0 0 rgb(0 0 0 / 45%),
    inset 3px 0 0 rgb(255 255 255 / 16%);
  transition:
    color 480ms var(--ease-physical),
    border-color 480ms var(--ease-physical),
    border-radius 480ms var(--ease-physical),
    background-color 480ms var(--ease-physical),
    box-shadow 480ms var(--ease-physical);
}

@media (hover: hover) {
  .decision-row:not(.is-active):hover {
    background-color: rgb(238 242 240 / 5%);
    box-shadow:
      inset 2px 0 0 rgb(200 149 78 / 65%),
      inset 3px 0 0 rgb(255 255 255 / 16%);
  }
}

.decision-row::after {
  /* The lit chamber lives on its own layer so state changes cross-fade
     instead of snapping between backgrounds. */
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--specular-x) var(--specular-y), rgb(255 255 255 / 14%), transparent 19rem),
    linear-gradient(163deg, rgb(58 66 63 / 95%), rgb(44 51 49 / 93%) 55%, rgb(28 34 32 / 95%));
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 480ms var(--ease-physical);
}

.decision-row.is-active::after { opacity: 1; }

.decision-index::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 1px;
  width: 3px;
  height: var(--rail-h, 3.4rem);
  background: var(--signal);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--rail-y, 0px));
  transition: opacity 300ms var(--ease-physical);
}

.decision-index.is-enhanced::after { opacity: 1; }

.decision-row:first-child { border-top-color: transparent; }
.decision-row h2 { margin: 0; }

.decision-row [data-decision-button] {
  display: grid;
  grid-template-columns: 2.5rem minmax(7.75rem, 0.8fr) minmax(13rem, 1.65fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.4rem;
  padding: 0.72rem var(--space-2);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.decision-row [data-decision-button] span:first-child {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  letter-spacing: 0.06em;
}

.decision-row [data-decision-button] span:nth-child(2) {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.decision-row [data-decision-button] span:last-child {
  color: var(--titanium);
  font-size: 0.76rem;
  line-height: 1.3;
}

.decision-row [data-decision-button]::after {
  justify-self: end;
  align-self: center;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform var(--state-fast) var(--ease-physical);
}

.decision-row.is-active {
  z-index: 2;
  border-color: rgb(255 255 255 / 26%);
  border-radius: 0 0.75rem 0.75rem 0;
  color: var(--on-smoke);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 26%),
    0 12px 28px rgb(18 22 21 / 20%);
  backdrop-filter: blur(16px) saturate(116%);
}

[data-material-surface] {
  position: relative;
  isolation: isolate;
}

[data-material-surface]::before,
.decision-index[data-material-surface] .decision-row.is-active::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(
    circle at var(--specular-x) var(--specular-y),
    rgb(255 255 255 / 88%),
    transparent 30rem
  );
  content: "";
  mix-blend-mode: screen;
  opacity: clamp(0, calc(var(--specular-strength) * 0.22), 0.11);
  pointer-events: none;
}

[data-material-surface] > *,
.decision-index[data-material-surface] .decision-row > * {
  position: relative;
  z-index: 1;
}

.decision-index[data-material-surface]::before { content: none; }

.decision-index[data-material-surface] .decision-row.is-active {
  overflow: hidden;
  isolation: isolate;
}

.decision-row.is-active [data-decision-button] { padding-inline: 1.25rem; }
.decision-row.is-active [data-decision-button] span:last-child { color: var(--titanium); }
.decision-row.is-active [data-decision-button] span:first-child { color: var(--signal); }
.decision-row.is-active [data-decision-button]::after { transform: rotate(225deg); }

/* At the desktop choreography the rail is the state indicator; chevrons only
   belong to the tap accordion below 64rem. */
@media (min-width: 64rem) {
  .decision-row [data-decision-button]::after { display: none; }
}

/* The drawer's breathing room lives on the inlay INSIDE the shutter, so the
   fold animates nothing but the grid row: padding collapses with the clip
   instead of transitioning as its own layout property. */
.panel-inlay {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3) calc(2.5rem + (2 * var(--space-3)));
}

/* One figure and one line per step: the number is the thing you take away,
   the line is the only sentence that earns its place beside it. */
.panel-figure {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: baseline;
  max-width: none;
  margin: 0;
}

.pf-value {
  color: var(--signal);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 590;
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow: 0 0 28px rgb(200 149 78 / 30%);
}

.pf-label {
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel-line {
  max-width: 46ch;
  margin: 0;
  color: var(--on-smoke);
  font-size: 0.9rem;
  line-height: 1.4;
}


/* All panels remain readable until the controller has bound successfully.
   Once enhanced, each drawer folds open and shut through its grid row instead
   of snapping through display: none; collapsed drawers leave the accessibility
   tree via visibility once the fold completes. */
.panel-shutter { min-height: 0; overflow: hidden; }

.decision-index.is-enhanced [data-decision-panel] {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 620ms var(--ease-physical),
    opacity 480ms var(--ease-physical),
    visibility 0s;
}

.decision-index.is-enhanced [data-decision-panel][hidden] {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 620ms var(--ease-physical),
    opacity 480ms var(--ease-physical),
    visibility 0s 620ms;
}

[data-decision-panel] svg {
  display: block;
  width: min(100%, 40.625rem);
  height: auto;
  color: currentColor;
}

/* The chapter menu exists for the tap accordion only; the desktop nav and the
   instrument frame cover wayfinding above 48rem. */
.mobile-menu { display: none; }

[data-decision-panel] svg :is(path, circle, rect, line, polyline) {
  vector-effect: non-scaling-stroke;
}

[data-decision-panel] text {
  fill: currentColor;
  font-family: var(--font-main);

  /* Struck in viewBox units: the drawing scales to roughly 0.7 inside the
     panel, so 16 here lands near 11px on screen. */
  font-size: 16px;
  font-weight: 620;
  letter-spacing: 0.08em;
}

[data-decision-panel] :is(.diagram-rule, .scale-line) {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.38;
  stroke-width: 1;
}

[data-decision-panel] :is(.signal-line, .change-path, .promotion-window) {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
  stroke-dasharray: 720;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 520ms var(--ease-physical);
}

[data-decision-panel] :is(.signal-point, .change-points, .market-points, .scale-marker) {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 430ms var(--ease-physical),
    transform 430ms var(--ease-physical);
}

.decision-row.is-active [data-decision-panel] :is(.signal-line, .change-path, .promotion-window) {
  animation: instrument-line-settle 520ms var(--ease-physical) both;
}

.decision-row.is-active [data-decision-panel] :is(.signal-point, .change-points, .market-points, .scale-marker) {
  animation: instrument-marker-settle 430ms 80ms var(--ease-physical) both;
}

.signal-point circle {
  fill: none;
  stroke: var(--signal);
  stroke-opacity: 0.28;
}

.signal-point .point-core,
.scale-marker,
.change-points circle,
.market-points circle,
.market-core {
  fill: var(--signal);
  stroke: none;
}

.architecture-bars rect,
rect.architecture-bars,
.promotion-block {
  fill: var(--signal);
  fill-opacity: 0.88;
}

.market-ring {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
}

/* Quiet bars carry context; the amber is reserved for the thing being said. */
.architecture-bars--quiet rect,
rect.architecture-bars--quiet {
  fill: currentColor;
  fill-opacity: 0.17;
}

[data-decision-panel] .trend-line {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.6;
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

[data-decision-panel] .trend-points circle {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.75;
  stroke-width: 2;
}

[data-decision-panel] .squeeze-band {
  fill: var(--signal);
  fill-opacity: 0.1;
  stroke: none;
}

[data-decision-panel] :is(.gap-bracket, .guardrail) {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
}

[data-decision-panel] .guardrail { stroke-dasharray: 4 5; }

/* Evidence meets judgment: the decision as a paper disc set into the smoked
   panel, with its six inputs ranged either side. */

/* ——— The pricing-decisions menu: the decision index reused as a click
   accordion on the light field, with each drawer split into explanation
   and a drawn visual. ——— */
.decision-index--menu { margin-top: var(--space-5); }

/* Without the material-surface attribute the menu still needs its row content
   lifted above the lit-chamber layer, exactly as the hero's rule does. */
.decision-index--menu .decision-row > * {
  position: relative;
  z-index: 1;
}

.decision-index--menu .decision-row.is-active {
  overflow: hidden;
  isolation: isolate;
}

.decisions-lede {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.45;
}

.panel-inlay--split {
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-5) calc(2.5rem + (2 * var(--space-3)));
}

.pd-explain {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pd-explain h3 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 540;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.pd-explain > p {
  max-width: 58ch;
  margin: 0;
  color: color-mix(in srgb, var(--on-smoke) 78%, transparent);
  font-size: 0.95rem;
  line-height: 1.55;
}

.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: none;
  margin: 0;
}

.pd-tags span {
  padding: 0.4rem 0.55rem;
  border: 1px solid rgb(238 242 240 / 18%);
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pd-output {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-3);
  max-width: none;
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgb(238 242 240 / 17%);
}

.pd-output span {
  color: var(--signal);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-output strong { font-size: 0.95rem; font-weight: 500; line-height: 1.45; }

.pd-visual {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding-left: var(--space-5);
  border-left: 1px solid rgb(238 242 240 / 13%);
}

[data-decision-panel] .pd-visual svg { width: 100%; max-width: none; overflow: visible; }

[data-decision-panel] .pv-label { font-size: 10px; font-weight: 720; letter-spacing: 0.14em; fill: var(--titanium); }
[data-decision-panel] .pv-muted { font-size: 10px; font-weight: 720; letter-spacing: 0.1em; fill: var(--titanium); fill-opacity: 0.75; }
[data-decision-panel] .pv-small { font-size: 11px; font-weight: 500; letter-spacing: 0; fill: var(--titanium); }
[data-decision-panel] .pv-word { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; fill: var(--on-smoke); }
[data-decision-panel] .pv-number { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; fill: var(--on-smoke); }
[data-decision-panel] .is-gold { fill: var(--signal); }
[data-decision-panel] .pv-line { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1.5; }
[data-decision-panel] .pv-gold-line { fill: none; stroke: var(--signal); stroke-width: 2.2; }
[data-decision-panel] .pv-soft { fill: none; stroke: rgb(200 149 78 / 28%); stroke-width: 1.5; }
[data-decision-panel] .pv-gold { fill: var(--signal); }
[data-decision-panel] .pv-dot { fill: var(--titanium); fill-opacity: 0.6; }
[data-decision-panel] .pv-full { fill: var(--titanium); fill-opacity: 0.55; }
[data-decision-panel] .pv-track { fill: rgb(245 247 246 / 4%); stroke: rgb(238 242 240 / 18%); }

/* ——— The opening's instrument: six considerations drawn to one focus, straight
   onto the drafting field — no housing, no pane. Graphite hairlines run from
   each reading and turn amber as they enter the beam; the decision is an
   amber point of light under the page's glass. ——— */
.hero-instrument .fx--hero {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 46rem;
  overflow: visible;
  color: var(--graphite);
}

.fx-head { font-size: 14px; font-weight: 720; letter-spacing: 0.14em; fill: var(--muted); }
.fx-rule { fill: none; stroke: var(--signal); stroke-opacity: 0.6; stroke-width: 1.5; }
.fx-rule-short { display: none; }
.fx-kicker {
  font-size: 13px;
  font-weight: 720;
  letter-spacing: 0.14em;
  fill: var(--muted);
  transition: fill 300ms var(--ease-physical);
}
.fx-word {
  font-size: 36px;
  font-weight: 640;
  letter-spacing: -0.025em;
  fill: var(--graphite);
  transition: fill 300ms var(--ease-physical);
}
.fx-node { fill: var(--signal); transform-box: fill-box; transform-origin: center; }
.fx-spine { fill: none; stroke: var(--graphite); stroke-opacity: 0.22; stroke-width: 1; }
.fx-line {
  fill: none;
  stroke-width: 1;
  transition: stroke 300ms var(--ease-physical);
}
.fx-line--l { stroke: url("#fx-grade-l"); }
.fx-line--r { stroke: url("#fx-grade-r"); }
.fx-hit { fill: transparent; }
.fx-strand { cursor: default; }
.fx-strand:hover .fx-line { stroke: var(--signal); }
.fx-strand:hover .fx-word,
.fx-strand:hover .fx-kicker { fill: var(--signal-text); }
.fx-glow { fill: var(--signal); opacity: 0.55; }
.fx-glow--wide { opacity: 0.28; }
.fx-ambient { fill: none; stroke: var(--signal); stroke-opacity: 0.35; stroke-width: 1; }
.fx-ring {
  fill: none;
  stroke: var(--signal);
  stroke-opacity: 1;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.fx-dot { fill: var(--signal); transform-box: fill-box; transform-origin: center; }
.fx-pin { fill: var(--pearl); transform-box: fill-box; transform-origin: center; }
.fx-out { fill: none; stroke: var(--graphite); stroke-opacity: 0.3; stroke-width: 1; }
.fx-decision { font-size: 13px; font-weight: 720; letter-spacing: 0.18em; fill: var(--graphite); }
.fx-pulse { fill: var(--signal); }

/* Pulse visibility runs on CSS keyframes, not SMIL: Gecko moves SMIL motion
   correctly but silently drops SMIL opacity animation, leaving invisible
   riders. The delays phase each pulse into the shared 6.4s cycle (SMIL keyPoints
   hold the dot at its start until its travel window). */
.fx-pulses .fx-pulse {
  opacity: 0;
  animation: fx-pulse-run 6.4s linear infinite;
}

.fx-pulses .fx-pulse:nth-of-type(1) { animation-delay: 2400ms; }
.fx-pulses .fx-pulse:nth-of-type(2) { animation-delay: 2560ms; }
.fx-pulses .fx-pulse:nth-of-type(3) { animation-delay: 2720ms; }
.fx-pulses .fx-pulse:nth-of-type(4) { animation-delay: 2880ms; }
.fx-pulses .fx-pulse:nth-of-type(5) { animation-delay: 3040ms; }
.fx-pulses .fx-pulse:nth-of-type(6) { animation-delay: 3200ms; }
.fx-pulses .fx-pulse:nth-of-type(7) {
  animation-name: fx-pulse-out;
  animation-delay: 5344ms;
}

@keyframes fx-pulse-run {
  0% { opacity: 0; }
  3% { opacity: 0.9; }
  23% { opacity: 0.9; }
  26%, 100% { opacity: 0; }
}

@keyframes fx-pulse-out {
  0% { opacity: 0; }
  3% { opacity: 1; }
  11% { opacity: 1; }
  14%, 100% { opacity: 0; }
}
.fx-short { display: none; }

/* ——— The resolve: one rehearsed arrival, then a slow cycle — six readings
   travel in, the focus flares as they land, one decision travels out. All of it
   opt-in; the markup ships the resolved frame and the pulses stay hidden for
   readers who asked for stillness. ——— */
@media (prefers-reduced-motion: no-preference) {
  .fx-fade { opacity: 0; animation: fx-fade-in 600ms var(--ease-physical) 100ms forwards; }
  .fx-strand .fx-kicker,
  .fx-strand .fx-word { opacity: 0; animation: fx-fade-in 600ms var(--ease-physical) forwards; }
  .fx-strand:nth-of-type(1) .fx-kicker, .fx-strand:nth-of-type(1) .fx-word { animation-delay: 180ms; }
  .fx-strand:nth-of-type(4) .fx-kicker, .fx-strand:nth-of-type(4) .fx-word { animation-delay: 240ms; }
  .fx-strand:nth-of-type(2) .fx-kicker, .fx-strand:nth-of-type(2) .fx-word { animation-delay: 300ms; }
  .fx-strand:nth-of-type(5) .fx-kicker, .fx-strand:nth-of-type(5) .fx-word { animation-delay: 360ms; }
  .fx-strand:nth-of-type(3) .fx-kicker, .fx-strand:nth-of-type(3) .fx-word { animation-delay: 420ms; }
  .fx-strand:nth-of-type(6) .fx-kicker, .fx-strand:nth-of-type(6) .fx-word { animation-delay: 480ms; }

  .fx-spine {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: fx-draw 800ms var(--ease-physical) 260ms forwards;
  }

  .fx-node {
    opacity: 0;
    transform: scale(0.4);
    animation: fx-pop 400ms var(--ease-physical) forwards;
  }
  .fx-nodes .fx-node:nth-of-type(1) { animation-delay: 560ms; }
  .fx-nodes .fx-node:nth-of-type(2) { animation-delay: 620ms; }
  .fx-nodes .fx-node:nth-of-type(3) { animation-delay: 680ms; }
  .fx-nodes .fx-node:nth-of-type(4) { animation-delay: 740ms; }
  .fx-nodes .fx-node:nth-of-type(5) { animation-delay: 800ms; }
  .fx-nodes .fx-node:nth-of-type(6) { animation-delay: 860ms; }

  .fx-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: fx-draw 950ms var(--ease-physical) forwards;
  }
  .fx-strand:nth-of-type(1) .fx-line { animation-delay: 380ms; }
  .fx-strand:nth-of-type(4) .fx-line { animation-delay: 440ms; }
  .fx-strand:nth-of-type(2) .fx-line { animation-delay: 500ms; }
  .fx-strand:nth-of-type(5) .fx-line { animation-delay: 560ms; }
  .fx-strand:nth-of-type(3) .fx-line { animation-delay: 620ms; }
  .fx-strand:nth-of-type(6) .fx-line { animation-delay: 680ms; }

  .fx-dot,
  .fx-pin {
    opacity: 0;
    transform: scale(0.4);
    animation: fx-pop 550ms var(--ease-physical) 1550ms forwards;
  }
  .fx-ring {
    opacity: 0;
    transform: scale(0.4);
    animation:
      fx-pop 550ms var(--ease-physical) 1550ms forwards,
      fx-flare 6.4s ease-in-out 2400ms infinite;
  }

  .fx-out {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: fx-draw 450ms var(--ease-physical) 1750ms forwards;
  }

  .fx-decision { opacity: 0; animation: fx-fade-in 550ms var(--ease-physical) 1850ms forwards; }

  .fx-ambient {
    opacity: 0;
    animation:
      fx-fade-in 700ms ease 1650ms forwards,
      fx-flare-ambient 6.4s ease-in-out 2400ms infinite;
  }
  .fx-glow {
    opacity: 0;
    animation:
      fx-glow-in 900ms ease 1500ms forwards,
      fx-flare-glow 6.4s ease-in-out 2400ms infinite;
  }
  .fx-glow--wide {
    animation:
      fx-glow-in-wide 900ms ease 1500ms forwards,
      fx-flare-glow-wide 6.4s ease-in-out 2400ms infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-pulse { display: none; }
}

@keyframes fx-fade-in { to { opacity: 1; } }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-pop { to { opacity: 1; transform: scale(1); } }
@keyframes fx-glow-in { to { opacity: 0.55; } }
@keyframes fx-glow-in-wide { to { opacity: 0.28; } }

/* The cycle's beat sits where the readings land (26–39% of the period). */
@keyframes fx-flare {
  0%, 34% { transform: scale(1); }
  42% { transform: scale(1.32); }
  54%, 100% { transform: scale(1); }
}
@keyframes fx-flare-glow {
  0%, 34% { opacity: 0.55; }
  42% { opacity: 0.95; }
  56%, 100% { opacity: 0.55; }
}
@keyframes fx-flare-glow-wide {
  0%, 34% { opacity: 0.28; }
  42% { opacity: 0.55; }
  56%, 100% { opacity: 0.28; }
}
@keyframes fx-flare-ambient {
  0%, 34% { stroke-opacity: 0.35; }
  42% { stroke-opacity: 0.75; }
  56%, 100% { stroke-opacity: 0.35; }
}

/* The hero's preview of the review borrows its marks. */
[data-decision-panel] .pa-dot { fill: var(--titanium); fill-opacity: 0.55; }
[data-decision-panel] .pa-dot.is-hot { fill: var(--signal); fill-opacity: 0.85; }
[data-decision-panel] .pa-dot.is-hero { fill: var(--signal); fill-opacity: 1; }
[data-decision-panel] .is-lit { fill: var(--signal); }

@keyframes instrument-line-settle {
  from { stroke-dashoffset: 720; }
}

@keyframes instrument-marker-settle {
  from { opacity: 0; transform: scale(0.72); }
}

.movement h2,
.movement--proof h2,
.movement--practice h2 {
  max-width: 15ch;
  font-size: clamp(2.9rem, 6vw, 6.75rem);
  font-stretch: 94%;
  font-weight: 470;
  letter-spacing: -0.04em;
}

.movement h3 {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 600;
}

/* Method marks: frame, examine, act — drawn in one stroke weight, each housed
   in a milled chip. */
.method-mark {
  width: 3rem;
  height: 3rem;
  padding: 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.6rem;
  color: var(--on-smoke);
  background:
    linear-gradient(118deg, rgb(38 46 43 / 92%), rgb(22 28 26 / 96%)) padding-box,
    linear-gradient(165deg, rgb(255 255 255 / 42%), rgb(140 148 145 / 36%) 30%, rgb(52 59 56 / 50%) 62%, rgb(174 180 177 / 40%)) border-box;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    0 1px 2px rgb(0 0 0 / 30%);
}

.method-mark .mark-stroke {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  stroke-linecap: square;
}

.method-mark .mark-core { fill: var(--signal); }

[data-evidence-field],
[data-engagement-field] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--titanium);
  background: linear-gradient(118deg, rgb(245 247 246 / 42%), rgb(216 221 219 / 34%));
}

[data-evidence-field] article,
[data-engagement-field] article {
  min-height: 18rem;
  padding: var(--space-5);
}

[data-engagement-field] article { min-height: 20rem; }

[data-evidence-field] article + article,
[data-engagement-field] article + article {
  border-left: 1px solid var(--titanium);
}

.movement--proof > section + section { box-shadow: inset 0 1px rgb(255 255 255 / 5%); }
.movement--proof p { color: color-mix(in srgb, var(--on-smoke) 76%, transparent); }

#method > ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  border-top: 1px solid rgb(238 242 240 / 42%);
  list-style: none;
  counter-reset: method;
}

#method li {
  display: grid;
  align-content: start;
  gap: var(--space-5);
  min-height: 11rem;
  padding: var(--space-5) var(--space-4) 0;
  counter-increment: method;
}

#method li + li { border-left: 1px solid rgb(238 242 240 / 22%); }
#method li::before {
  color: var(--signal);
  content: "0" counter(method);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: 0.08em;
}

#method strong {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 580;
}

#method span { color: var(--titanium); }

/* ——— The report specimen: the deliverable rendered as the document itself,
   a paper sheet inset into the smoked passage. ——— */
.section-lede {
  max-width: 56ch;
  color: color-mix(in srgb, var(--on-smoke) 74%, transparent);
}

.report-specimen {
  margin: 0;
  perspective: 1600px;
}

.report-sheet {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 56%);
  border-radius: 0.65rem;
  background: linear-gradient(108deg, rgb(247 249 248 / 97%), rgb(222 227 225 / 94%));
  box-shadow:
    inset 0 1px #fff,
    0 2px 4px rgb(0 0 0 / 14%),
    0 34px 70px -24px rgb(0 0 0 / 42%);
  color: var(--graphite);
}

.report-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) clamp(1.25rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--graphite);
}

.report-mark {
  font-size: 1.15rem;
  font-stretch: 86%;
  font-weight: 740;
  letter-spacing: -0.04em;
}

.report-kind {
  flex: 1;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.report-flag {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgb(122 75 18 / 45%);
  color: var(--signal-text);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

[data-report-ledger] {
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  list-style: none;
}

[data-report-ledger] li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
  padding: clamp(1rem, 1.8vw, 1.5rem) 0;
  border-bottom: 1px solid var(--titanium);
}

[data-report-ledger] li:last-child { border-bottom: 0; }

.rl-no {
  color: var(--signal-text);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: 0.08em;
}

.rl-body h3 {
  margin-bottom: 0.35rem;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.rl-body p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.rl-body data {
  color: var(--signal-text);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.report-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3) clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--graphite);
  background: rgb(216 221 219 / 55%);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rf-meter { display: inline-flex; gap: 0.25rem; }

.rf-meter i {
  width: 1.4rem;
  height: 0.3rem;
  background: var(--signal);

  /* The dark amber keyline keeps the filled segments above the 3:1 non-text
     contrast line against the paper. */
  box-shadow: inset 0 0 0 1px rgb(122 75 18 / 65%);
}

.rf-meter i.off {
  background: var(--titanium);
  box-shadow: inset 0 0 0 1px rgb(76 85 81 / 45%);
}
.rf-note { flex: 1; }

/* ——— Sample analysis: a five-stage portfolio review. It plays as one sticky
   scene on the desktop and stacks into five readable blocks everywhere else,
   so nothing depends on the scroll to be legible. ——— */
.pa-scroll { position: relative; }
.pa-sticky { display: flex; flex-direction: column; }

.pa-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgb(238 242 240 / 16%);
}

.pa-case {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  max-width: none;
  margin: 0;
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pa-flag {
  padding: 0.3rem 0.6rem;
  border: 1px solid rgb(200 149 78 / 45%);
  color: var(--signal);
}

.pa-nav { display: none; }

.pa-nav button {
  position: relative;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color var(--state-fast) var(--ease-physical);
}

.pa-nav button::after {
  position: absolute;
  right: var(--space-3);
  bottom: 0.75rem;
  left: var(--space-3);
  height: 1px;
  background: var(--signal);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-physical);
}

.pa-nav button[aria-current="step"] { color: var(--on-smoke); }
.pa-nav button[aria-current="step"]::after { transform: scaleX(1); }
.pa-nav button:hover { color: var(--on-smoke); }

.pa-stage { padding-top: var(--space-5); }
.pa-state + .pa-state { margin-top: var(--space-8); }

.pa-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.pa-kicker {
  margin: 0 0 var(--space-2);
  color: var(--signal);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pa-state h3 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.4rem, 4.4vw, 4.5rem);
  font-stretch: 94%;
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.pa-meta {
  max-width: none;
  margin: 0;
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-body { display: grid; gap: var(--space-5); }

.pa-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  margin: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(118deg, rgb(38 46 43 / 72%), rgb(24 30 28 / 82%) 55%, rgb(17 22 20 / 88%)) padding-box,
    linear-gradient(165deg, rgb(255 255 255 / 34%), rgb(140 148 145 / 30%) 30%, rgb(52 59 56 / 40%) 62%, rgb(174 180 177 / 32%)) border-box;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 14%),
    inset 0 -1px rgb(255 255 255 / 4%);
}

.pa-panel svg { display: block; width: 100%; height: auto; }

.pa-panel-head,
.pa-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  max-width: none;
  margin: 0;
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-panel-foot { border-top: 1px solid rgb(238 242 240 / 16%); padding-top: var(--space-3); }
.pa-panel-foot b { color: var(--on-smoke); }
.pa-panel-foot strong,
.pa-panel-head .is-signal { color: var(--signal); }
.pa-panel-foot strong { font-size: 1.75rem; letter-spacing: -0.04em; }

.pa-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(238 242 240 / 16%);
}

.pa-score { max-width: none; margin: 0; }
.pa-score span {
  display: block;
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-score strong {
  color: #fff;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  letter-spacing: -0.05em;
}

.pa-score small { color: var(--titanium); font-size: 0.8rem; }

.pa-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  border-top: 1px solid rgb(238 242 240 / 16%);
  border-bottom: 1px solid rgb(238 242 240 / 10%);
}

.pa-split > div { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.pa-split > div:nth-child(even) { padding-left: var(--space-3); border-left: 1px solid rgb(238 242 240 / 10%); }
.pa-split > div:nth-child(n + 3) { border-top: 1px solid rgb(238 242 240 / 10%); }

.pa-split dt {
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pa-split dd {
  margin: var(--space-1) 0 0;
  color: #fff;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  letter-spacing: -0.04em;
}

.pa-split--pair > div:nth-child(n + 3) { border-top: 0; }

.pa-callout {
  max-width: none;
  margin: auto 0 0;
  padding: var(--space-3);
  border: 1px solid rgb(200 149 78 / 40%);
  background: linear-gradient(135deg, rgb(200 149 78 / 13%), rgb(200 149 78 / 3%));
}

.pa-callout span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--signal);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-callout strong {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pa-stat { max-width: none; margin: 0; }
.pa-stat strong {
  color: var(--signal);
  font-size: clamp(4rem, 7.5vw, 6.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 590;
  letter-spacing: -0.06em;
  line-height: 0.86;
  text-shadow: 0 0 34px rgb(200 149 78 / 26%);
}

.pa-lede {
  max-width: 24ch;
  margin: 0;
  color: #fff;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 520;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.pa-action {
  max-width: none;
  margin: auto 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgb(238 242 240 / 16%);
}

.pa-action span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--titanium);
  font-size: 0.6875rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-action strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }

.pa-agenda {
  padding: 0;
  margin: 0;
  border-top: 1px solid rgb(238 242 240 / 16%);
  list-style: none;
}

.pa-agenda li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgb(238 242 240 / 10%);
}

.pa-agenda li > span {
  color: var(--signal);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: 0.08em;
}

.pa-agenda b { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.025em; }
.pa-agenda small { display: block; margin-top: 0.2rem; color: var(--titanium); font-size: 0.75rem; }

/* The foot terminates the scene on every stage: a rule, the disclosure, and
   the stage count — so a reader always knows the bottom is the bottom. */
.pa-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  justify-content: space-between;
  max-width: none;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgb(238 242 240 / 16%);
  color: var(--titanium);
  font-size: 0.7rem;
}

.pa-foot-count {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pa-foot-count b { color: var(--signal); }

/* The drawn parts of the review share the decision index's stroke grammar. */
.pa-panel :is(.pa-axis, .pa-track, .pa-spectrum) {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.3;
  stroke-width: 1;
}

.pa-panel .pa-track { stroke-opacity: 0.18; stroke-width: 3; }
.pa-panel .pa-track.is-filled { stroke: var(--titanium); stroke-opacity: 0.85; }
.pa-panel .pa-track.is-signal { stroke: var(--signal); stroke-opacity: 1; }
.pa-panel .pa-spectrum { stroke-opacity: 0.45; }

.pa-panel :is(.pa-axis-label, .pa-quad, .pa-rung-label) {
  fill: currentColor;
  fill-opacity: 0.62;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.1em;
}

.pa-panel :is(.pa-quad.is-lit, .pa-axis-label.is-lit) { fill: var(--signal); fill-opacity: 1; }

.pa-panel :is(.pa-rung-value, .pa-bar-value, .pa-cluster) {
  fill: currentColor;
  font-family: var(--font-main);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.pa-panel .pa-rung-value { fill: #fff; font-size: 22px; letter-spacing: -0.03em; }
.pa-panel .pa-rung-value.is-signal { fill: var(--signal); }
.pa-panel .pa-bar-value { font-size: 12px; }
.pa-panel .pa-bar-value.is-invert { fill: var(--on-smoke); fill-opacity: 0.9; }
.pa-panel .pa-bar-value.is-dark { fill: var(--graphite); }
.pa-panel .pa-cluster { fill: var(--signal); font-size: 34px; letter-spacing: -0.05em; }

.pa-panel .pa-dot { fill: var(--titanium); fill-opacity: 0.55; }
.pa-panel .pa-dot.is-hot { fill: var(--signal); fill-opacity: 0.85; }
.pa-panel .pa-dot.is-hero { fill: var(--signal); fill-opacity: 1; }
.pa-panel .pa-knob { fill: var(--titanium); }
.pa-panel .pa-knob.is-signal { fill: var(--signal); }
.pa-panel .pa-gap { fill: none; stroke: var(--signal); stroke-width: 1.5; }

.pa-panel .pa-bar.is-full { fill: var(--on-smoke); fill-opacity: 0.82; }
.pa-panel .pa-bar.is-promo { fill: var(--titanium); fill-opacity: 0.5; }
.pa-panel .pa-bar.is-markdown { fill: var(--signal); }
.pa-panel .pa-col { fill: var(--signal); fill-opacity: 0.85; }
.pa-panel .pa-col.is-base { fill: var(--titanium); fill-opacity: 0.55; }
.pa-panel .pa-axis-break { fill: none; stroke: currentColor; stroke-opacity: 0.5; stroke-width: 1; }
.pa-panel .pa-link { fill: none; stroke: currentColor; stroke-opacity: 0.3; stroke-width: 1; stroke-dasharray: 3 3; }

#engagements h3 {
  max-width: 10ch;
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 470;
  line-height: 0.98;
}

#engagements article p {
  margin-bottom: 0;
  color: var(--muted);
}

/* The engagement's shape, drawn: a bounded bar against a line that continues. */
.engagement-mark {
  display: block;
  width: 7.5rem;
  height: auto;
  margin-bottom: var(--space-4);
}

.engagement-mark .em-rule,
.engagement-mark .em-tick,
.engagement-mark .em-dash {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: square;
}

.engagement-mark .em-dash { stroke: var(--titanium); }
.engagement-mark .em-core { fill: var(--signal); }

.engagement-spec {
  padding: 0;
  margin: var(--space-5) 0 0;
}

/* Both engagements share row lines so Shape, You bring and You receive
   compare straight across, whatever the headings wrap to. */
@supports (grid-template-rows: subgrid) {
  [data-engagement-field] article {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

.engagement-spec div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.4fr) minmax(0, 1.6fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--titanium);
}

.engagement-spec dt {
  font-size: 0.75rem;
  font-weight: 680;
}

.engagement-spec dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* The assay: one full-bleed dark interlude — the site's own smoked glass,
   rendered in CSS, with the definition set into it. */
.assay-interlude {
  position: relative;
  isolation: isolate;
  color: var(--on-smoke);
}

.assay-interlude::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(56rem 26rem at 72% 18%, rgb(238 242 240 / 7%), transparent 70%),
    linear-gradient(rgb(238 242 240 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(238 242 240 / 4%) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(178deg, #1d2422, #151a19 52%, #101413);

  /* Grid pinned to the viewport. */
  background-attachment: scroll, fixed, fixed, scroll;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 14%),
    inset 0 -1px rgb(255 255 255 / 7%);
  content: "";
  pointer-events: none;
}

/* These outrank the light-field #name rules below, which use the dark amber
   that would be unreadable on the interlude's graphite. */
#name.assay-interlude h2 { color: var(--titanium); }

#name h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -0.02em;
}

#name > p {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 7.5rem);
  font-stretch: 88%;
  font-weight: 330;
  line-height: 0.93;
  letter-spacing: -0.04em;
}

/* The keyword is struck in metal rather than underlined: a polished amber
   gradient whose highlight travels as the definition passes the viewport. */
#name strong {
  color: var(--signal);
  font-weight: 650;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  #name strong {
    background-image: linear-gradient(
      96deg,
      #9a6b2f 0%,
      #c8954e 20%,
      #f2dab0 40%,
      #d9a860 56%,
      #b07f3c 76%,
      #8f6229 100%
    );
    background-repeat: no-repeat;
    background-size: 260% 120%;
    background-position: 18% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* The 0.93 line-height leaves the descender outside the inline box, so the
       clip would cut the tail of the y. Vertical padding grows the paint box
       without affecting layout on an inline element. */
    padding-block: 0.06em 0.18em;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      #name strong {
        animation: assay-sheen linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
      }
    }
  }
}

@keyframes assay-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

#principles ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--titanium);
  list-style: none;
}

#principles li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  min-height: 7rem;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 560;
  line-height: 1.25;
}

#principles li + li {
  padding-left: var(--space-4);
  border-left: 1px solid var(--titanium);
}

#principles li > div { display: grid; gap: 0.35rem; }

#principles strong {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 620;
  letter-spacing: -0.015em;
}

#principles span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
}

#principles li::before {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgb(200 149 78 / 55%);
  content: "";
  transform: translateY(-0.05em);
}

#about {
  min-height: clamp(18rem, 26vw, 24rem);
  align-content: center;
}

#about > p {
  max-width: 46ch;
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--signal-text);
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

/* The enquiry panel is milled aluminium: the brushed plate is the material the
   form is engraved into, held far enough back that every field stays legible. */
.contact-intro h2 {
  max-width: 10ch;
  margin-bottom: var(--space-5);
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  font-weight: 470;
}

.contact-intro p { color: var(--muted); }

#contact form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

#contact .field {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

#contact .field--wide,
#contact .form-privacy,
#contact .form-alt,
#contact .form-summary,
#contact button {
  grid-column: 1 / -1;
}

#contact label {
  font-size: 0.78rem;
  font-weight: 650;
}

#contact label span {
  color: var(--muted);
  font-weight: 400;
}

#contact input,
#contact textarea {
  width: 100%;
  padding: var(--space-2);

  /* Darker than titanium so the field boundary itself clears 3:1 on the plate. */
  border: 1px solid color-mix(in srgb, var(--muted) 62%, var(--titanium));
  background: rgb(245 247 246 / 56%);
  color: inherit;
  transition:
    background-color var(--state-fast) var(--ease-physical),
    border-color var(--state-fast) var(--ease-physical);
}

#contact input:hover,
#contact textarea:hover {
  border-color: var(--graphite);
  background: var(--pearl);
}

#contact input:focus,
#contact textarea:focus { border-color: var(--signal); }

/* Invalid reads differently from focus: the dark signal ink plus its message,
   not the bright focus amber. */
#contact [aria-invalid="true"],
#contact [aria-invalid="true"]:focus { border-color: var(--signal-text); }
#contact textarea { resize: vertical; }

.form-privacy,
.form-alt,
.form-summary,
.field-error {
  color: var(--muted);
  font-size: 0.75rem;
}

#contact .form-privacy,
#contact .form-alt,
#contact .form-summary {
  max-width: 58ch;
}

#contact .form-alt,
#contact .form-summary { margin-bottom: var(--space-3); }

#contact .form-alt a {
  color: var(--signal-text);
  font-weight: 650;
}
#contact .form-summary:not(:empty),
#contact .field-error:not(:empty) { color: var(--signal-text); }
#contact .field-error { min-height: 1.15em; }

#contact .honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#contact form[aria-busy="true"] button { cursor: progress; }

#contact button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--graphite);
  background: linear-gradient(180deg, #2b322f, #171c1b 58%, var(--graphite));
  color: var(--on-smoke);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    0 1px 2px rgb(18 22 21 / 26%);
  font-weight: 680;
  transition:
    background-color var(--state-fast) var(--ease-physical),
    border-color var(--state-fast) var(--ease-physical),
    color var(--state-fast) var(--ease-physical);
}

#contact button svg { width: 1rem; height: 1rem; }
#contact button:hover {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--graphite);
}

#contact button:disabled {
  border-color: var(--titanium);
  background: var(--titanium);
  color: var(--muted);
  cursor: wait;
}

.movement--proof :is(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

#contact :is(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--signal-text);
  outline-offset: 3px;
}

.decision-index :focus-visible { outline-color: var(--signal); }

.decision-row.is-active [data-decision-button]:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: -3px;
}

footer .wordmark:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

footer a:hover,
footer a:active { color: var(--on-smoke); }

.confirmation h1 {
  max-width: 12ch;
  margin-bottom: var(--space-5);
  font-size: clamp(3rem, 7vw, 6rem);
}

.confirmation p { margin-bottom: var(--space-5); }
.confirmation .primary-action { justify-self: start; }
.confirmation p a { color: var(--signal-text); font-weight: 650; }

/* The aftermath, read like an instrument: received is lit, the next two
   readings wait. */
.confirm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 52rem;
  padding: 0;
  margin: 0 0 var(--space-6);
  border-top: 1px solid var(--graphite);
  border-bottom: 1px solid var(--titanium);
  list-style: none;
}

.confirm-steps li {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  justify-items: start;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
}

.confirm-steps li + li {
  padding-left: var(--space-4);
  border-left: 1px solid var(--titanium);
}

.confirm-steps svg {
  width: 1.5rem;
  height: 1.5rem;
}

.confirm-steps .cs-ring {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}

.confirm-steps .cs-core { fill: var(--signal); }
.confirm-steps .is-done .cs-ring { stroke: var(--signal-text); }

.confirm-steps strong {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.confirm-steps span {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

@media (max-width: 48rem) {
  .confirm-steps { grid-template-columns: 1fr; }

  .confirm-steps li {
    padding: var(--space-3) 0;
  }

  .confirm-steps li + li {
    padding-left: 0;
    border-top: 1px solid var(--titanium);
    border-left: 0;
  }
}

/* Enhanced only where there is room and motion is welcome: the review becomes
   one pinned scene, and the five step sentinels drive which stage is shown. */
.pa-step { display: none; }

@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .pa-scroll.is-enhanced { height: calc(5 * 100svh); }

  .pa-scroll.is-enhanced .pa-sticky {
    position: sticky;
    top: var(--header-height);
    height: calc(100svh - var(--header-height));
    padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
    overflow: hidden;
    background:
      radial-gradient(60rem 28rem at 82% -6%, rgb(255 255 255 / 5.5%), transparent 62%),
      radial-gradient(44rem 22rem at 4% 104%, rgb(200 149 78 / 7%), transparent 60%);
  }

  .pa-scroll.is-enhanced .pa-foot { flex: none; margin-top: var(--space-3); }

  .pa-scroll.is-enhanced .pa-stage { position: relative; flex: 1; min-height: 0; }

  .pa-scroll.is-enhanced .pa-state {
    position: absolute;
    inset: var(--space-4) 0 var(--space-4);
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
      opacity 450ms var(--ease-physical),
      transform 520ms var(--ease-physical);
  }

  .pa-scroll.is-enhanced .pa-state[data-active="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .pa-scroll.is-enhanced .pa-nav { display: flex; margin-left: auto; }
  .pa-scroll.is-enhanced .pa-step { display: block; position: absolute; left: 0; right: 0; height: 100svh; pointer-events: none; }
  .pa-scroll.is-enhanced .pa-step[data-analysis-step="1"] { top: 0; }
  .pa-scroll.is-enhanced .pa-step[data-analysis-step="2"] { top: 100svh; }
  .pa-scroll.is-enhanced .pa-step[data-analysis-step="3"] { top: 200svh; }
  .pa-scroll.is-enhanced .pa-step[data-analysis-step="4"] { top: 300svh; }
  .pa-scroll.is-enhanced .pa-step[data-analysis-step="5"] { top: 400svh; }

  /* Inside the pinned scene the stage is a column: the head takes what it
     needs and the body takes the rest, with charts shrinking to fit rather
     than dictating the height. */
  .pa-scroll.is-enhanced .pa-state { display: flex; flex-direction: column; }
  .pa-scroll.is-enhanced .pa-head { flex: none; }
  .pa-scroll.is-enhanced .pa-body { flex: 1; min-height: 0; }
  .pa-scroll.is-enhanced .pa-panel { min-height: 0; }
  .pa-scroll.is-enhanced .pa-panel svg { flex: 1; min-height: 0; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0 auto; }
  .pa-scroll.is-enhanced .pa-aside { min-height: 0; }
  .pa-scroll.is-enhanced .pa-agenda { align-self: start; }
}

/* Short desktop screens: the pinned review keeps every figure but steps its
   type and spacing down one size, so the last line is never below the fold. */
@media (min-width: 64rem) and (max-height: 55rem) and (prefers-reduced-motion: no-preference) {
  .pa-scroll.is-enhanced .pa-bar { padding-bottom: var(--space-2); }
  .pa-scroll.is-enhanced .pa-state { inset: var(--space-3) 0 var(--space-3); }
  .pa-scroll.is-enhanced .pa-head { margin-bottom: var(--space-3); }
  .pa-scroll.is-enhanced .pa-kicker { margin-bottom: var(--space-1); }
  .pa-scroll.is-enhanced .pa-state h3 { max-width: 24ch; font-size: clamp(1.9rem, 3.2vw, 3rem); }
  .pa-scroll.is-enhanced .pa-body { gap: var(--space-4); }
  .pa-scroll.is-enhanced .pa-panel { gap: var(--space-2); padding: var(--space-3); }
  .pa-scroll.is-enhanced .pa-aside { gap: var(--space-2); padding-top: var(--space-2); }
  .pa-scroll.is-enhanced .pa-score strong { font-size: 2.4rem; }
  .pa-scroll.is-enhanced .pa-split > div { padding-block: var(--space-2); }
  .pa-scroll.is-enhanced .pa-split dd { font-size: 1.4rem; }
  .pa-scroll.is-enhanced .pa-callout { padding: var(--space-2) var(--space-3); }
  .pa-scroll.is-enhanced .pa-callout strong { font-size: 1.05rem; }
  .pa-scroll.is-enhanced .pa-stat strong { font-size: clamp(3rem, 5.5vw, 4.5rem); }
  .pa-scroll.is-enhanced .pa-lede { font-size: 1.1rem; }
  .pa-scroll.is-enhanced .pa-action { padding-top: var(--space-2); }
  .pa-scroll.is-enhanced .pa-action strong { font-size: 0.95rem; }
  .pa-scroll.is-enhanced .pa-agenda li { padding-block: var(--space-2); }
  .pa-scroll.is-enhanced .pa-agenda b { font-size: 1.05rem; }
  .pa-scroll.is-enhanced .pa-panel-foot strong { font-size: 1.4rem; }
  .pa-scroll.is-enhanced .pa-foot { margin-top: var(--space-2); }
}

/* Scroll arrival: content settles into the field as the reader reaches it.
   Hidden states exist only once reveal.js marks the root, and only for
   readers who accept motion, so the page is always complete without either. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready :is([data-reveal], [data-reveal-cascade] > *) {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 800ms var(--ease-physical),
      transform 800ms var(--ease-physical);
  }

  .reveal-ready [data-reveal-cascade] > :nth-child(2) { transition-delay: 90ms; }
  .reveal-ready [data-reveal-cascade] > :nth-child(3) { transition-delay: 180ms; }
  .reveal-ready [data-reveal-cascade] > :nth-child(4) { transition-delay: 270ms; }
  .reveal-ready [data-reveal-cascade] > :nth-child(5) { transition-delay: 360ms; }
  .reveal-ready [data-reveal-cascade] > :nth-child(6) { transition-delay: 450ms; }
  .reveal-ready [data-reveal-cascade] > :nth-child(n + 7) { transition-delay: 540ms; }

  .reveal-ready #name > p[data-reveal] { transition-delay: 140ms; }

  .reveal-ready :is([data-reveal].is-revealed, [data-reveal-cascade].is-revealed > *) {
    opacity: 1;
    transform: none;
  }

}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--mist); }

  .decision-index,
  .decision-row.is-active,
  .movement--proof { background: var(--smoke); }
}

@media (max-width: 63.999rem) {
  .decision-index { max-width: 52rem; }
  .decision-row [data-decision-button] {
    grid-template-columns: 2.5rem minmax(7rem, 0.65fr) minmax(12rem, 1fr) auto;
  }
}

@media (max-width: 48rem) {
  .site-header nav { display: none; }

  .wordmark { font-size: 1.45rem; }
  .header-cta {
    margin-left: auto;
    padding-inline: 0.6rem;
    font-size: 0.66rem;
    white-space: nowrap;
  }

  .hero-title { font-size: clamp(3.15rem, 14vw, 5.4rem); }

  .decision-row [data-decision-button],
  .decision-row.is-active [data-decision-button] {
    grid-template-columns: 2rem 1fr;
    gap: 0 var(--space-2);
    padding: var(--space-3) var(--space-2);
  }

  .decision-row [data-decision-button] span:last-child {
    grid-column: 2;
    margin-top: 0.25rem;
  }

  .decision-row [data-decision-button]::after {
    position: absolute;
    right: var(--space-3);
  }

  .panel-inlay { padding: var(--space-2) var(--space-2) var(--space-4); }

  /* The drawings stay on the phone: the full measure of the drawer, labels
     struck large enough in viewBox units to land at ~11px on a 375px screen,
     with the short readings where long ones would collide. */
  [data-decision-panel] svg {
    width: 100%;
    overflow: visible;
  }

  [data-decision-panel] text {
    font-size: 22px;
    letter-spacing: 0.04em;
  }

  /* The instrument on the phone band: short column heads, kickers off, words
     struck large enough in viewBox units to land legibly at 375px. */
  .fx-long { display: none; }
  .fx-short { display: inline; }
  .fx-rule-long { display: none; }
  .fx-rule-short { display: inline; }

  .hero-instrument .fx--hero {
    width: 100%;
    max-width: 26rem;
    height: auto;
    max-height: none;
    margin-inline: auto;
  }
  .fx-glow { animation: none; opacity: 0.4; }
  .fx-glow--wide { animation: none; opacity: 0.14; }
  .fx-head { font-size: 18px; }
  .fx-kicker { display: none; }
  .fx-word { font-size: 34px; }
  .fx-line { stroke-width: 1.5; }
  .fx-decision { font-size: 14px; }

  .panel-inlay--split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2) var(--space-4);
  }

  .pd-visual {
    padding-top: var(--space-4);
    padding-left: 0;
    border-top: 1px solid rgb(238 242 240 / 13%);
    border-left: 0;
  }

  [data-decision-panel] .pv-label,
  [data-decision-panel] .pv-muted { font-size: 15px; }
  [data-decision-panel] .pv-small { font-size: 16px; }
  [data-decision-panel] .pv-word { font-size: 20px; }
  [data-decision-panel] .pv-number { font-size: 28px; }

  /* The opening re-stacks so the instrument is on the first screen: eyebrow,
     headline, lede, actions, the index, then the spec strip. */
  .hero-copy { display: contents; }
  /* On one column the disclosure may wrap, so it sizes to its content
     instead of the fixed block the desktop offset depends on. */

  .hero-copy > p:not(.eyebrow) {
    margin-bottom: var(--space-5);

    /* On one narrow column the lede should fill its measure, not be balanced
       into short ragged lines. */
    text-wrap: wrap;
  }
  .hero-instrument { order: 5; }

  /* Chapter menu: a native disclosure, so it works before any script runs. */
  .mobile-menu {
    position: static;
    display: block;
    justify-self: end;
  }

  .mobile-menu summary {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 0.7rem;
    border: 1px solid rgb(18 22 21 / 42%);
    color: var(--graphite);
    font-size: 0.72rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu[open] summary { background: var(--graphite); color: var(--on-smoke); }

  .menu-glyph {
    display: grid;
    gap: 4px;
    width: 0.95rem;
  }

  .menu-glyph i {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform var(--state-fast) var(--ease-physical);
  }

  .mobile-menu[open] .menu-glyph i:first-child { transform: translateY(2.5px) rotate(45deg); }
  .mobile-menu[open] .menu-glyph i:last-child { transform: translateY(-2.5px) rotate(-45deg); }

  .mobile-menu-list {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 41;
    padding: 0 var(--page-pad) var(--space-3);
    margin: 0;
    border-bottom: 1px solid rgb(18 22 21 / 24%);

    /* Opaque on purpose: a translucent plate inside the header's own
       backdrop-filter samples an unblurred backdrop in Chrome and ghosts the
       page through the menu. */
    background: linear-gradient(112deg, var(--pearl), #e3e8e6);
    box-shadow: 0 18px 40px rgb(18 22 21 / 14%);
    list-style: none;
  }

  .mobile-menu-list li + li { border-top: 1px solid rgb(183 189 186 / 55%); }

  .mobile-menu-list a {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--space-2);
    align-items: center;
    min-height: 3.25rem;
    color: var(--graphite);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
  }

  .mobile-menu-list a span {
    color: var(--signal-text);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    letter-spacing: 0.08em;
  }

  [data-evidence-field],
  [data-engagement-field],
  #method > ol {
    grid-template-columns: 1fr;
  }

  [data-evidence-field] article,
  #method li,
  #engagements article {
    min-height: 0;
  }

  [data-evidence-field] article + article,
  #method li + li,
  #engagements article + article {
    border-top: 1px solid var(--titanium);
    border-left: 0;
  }

  #method li { padding: var(--space-5) 0; }

  /* The review stacks: one stage after another, each one whole. */
  .pa-body--map,
  .pa-body--copyleft { grid-template-columns: 1fr; }
  .pa-state h3 { font-size: clamp(2.1rem, 9vw, 2.9rem); max-width: none; }
  .pa-state + .pa-state { margin-top: var(--space-7); }
  .pa-aside { gap: var(--space-3); }
  .pa-callout,
  .pa-action { margin-top: var(--space-3); }
  .pa-panel { padding: var(--space-3); }

  #name > p { font-size: clamp(3rem, 15vw, 5.25rem); }
  #about { min-height: 0; }

  #contact form { grid-template-columns: 1fr; }
  #contact .field { grid-column: 1; }

  /* The new beats collapse to one column; specimen and chart stay legible. */
  #principles ul { grid-template-columns: 1fr; }
  #principles li { min-height: 0; padding: var(--space-3) var(--space-3) var(--space-3) 0; }
  #principles li + li {
    padding-left: 0;
    border-top: 1px solid var(--titanium);
    border-left: 0;
  }

  .report-kind { flex: none; }
  [data-report-ledger] li { grid-template-columns: 2.2rem 1fr; gap: var(--space-3); }
}

@media (max-width: 20rem) {
  .wordmark { font-size: 1.3rem; }
  .header-cta {
    min-width: 0;
    padding-inline: 0.45rem;
    font-size: 0.6rem;
  }

  /* The label is the accessible name; at this width the glyph carries the control. */
  .mobile-menu summary > span:last-child { display: none; }

  .hero-title { font-size: 2.85rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-action,
  .secondary-action { width: 100%; }
  .mobile-menu summary { padding-inline: 0.5rem; }
  .decision-row [data-decision-button] span:last-child { padding-right: var(--space-5); }
  [data-report-ledger] { padding-inline: var(--space-3); }
}

@media (forced-colors: active) {
  [data-material-surface]::before,
  .decision-index[data-material-surface] .decision-row.is-active::before,
  .decision-row::after,
  .decision-index::after,
  footer::after {
    content: none;
  }

  .decision-index,
  .decision-row,
  .movement--proof,
  [data-report-ledger],
  #contact {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .fx-head, .fx-kicker, .fx-word, .fx-decision { fill: CanvasText; }
  .fx-line, .fx-out, .fx-spine, .fx-ring, .fx-ambient, .fx-rule { stroke: Highlight; }
  .fx-dot, .fx-glow, .fx-pulse, .fx-node { fill: Highlight; }
  .fx-pin { fill: Canvas; }

  .decision-row.is-active {
    border: 3px solid Highlight;
    color: CanvasText;
  }

  .decision-row.is-active [data-decision-button]:focus-visible,
  footer .wordmark:focus-visible { outline-color: Highlight; }

  [data-decision-panel] :is(.signal-line, .change-path, .promotion-window, .market-ring) { stroke: Highlight; }
  .signal-point .point-core,
  .scale-marker,
  .change-points circle,
  .market-points circle,
  .market-core,
  .architecture-bars rect,
  .promotion-block { fill: Highlight; }
}