/* =====================================================================
   CLINIX MEDIA — Design System
   ---------------------------------------------------------------------
   Three-act canvas: ink (problem) -> chalk (system) -> ink (decision).
   Green is functional, never decorative: it marks what is measured,
   live, or engaged. The rising diagonal in the CX mark is the seed of
   the whole visual system — every trace on this site is that stroke.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* Canvas — near-blacks carry a green cast so they belong to the mark */
  --ink:            #090C0A;
  --ink-raised:     #0F1512;
  --ink-inset:      #141C18;

  /* Clinical paper — a whisper of green, never cream */
  --chalk:          #F3F5F3;
  --chalk-raised:   #FFFFFF;
  --chalk-inset:    #E8ECE9;

  /* Brand — preserved from the existing Clinix identity */
  --clinic:         #2D6A4F;   /* the brand green */
  --forest:         #1B4332;   /* deeper field green */
  --signal:         #52B788;   /* mint — dark canvas only */
  --signal-bright:  #74D3A4;

  /* Type on ink — every step verified at 4.5:1 or better against --ink */
  --on-ink:         #EDF1EE;   /* 17.4:1 */
  --on-ink-mid:     #9CAAA2;   /* 7.9:1  */
  --on-ink-low:     #70807A;   /* 4.7:1  */

  /* Type on chalk — verified against --chalk (#F3F5F3) */
  --on-chalk:       #0B0F0D;   /* 17.1:1 */
  --on-chalk-mid:   #55635C;   /* 6.6:1  */
  --on-chalk-low:   #636F69;   /* 4.6:1  */

  /* Rules */
  --rule-ink:       rgba(237, 241, 238, 0.13);
  --rule-ink-hi:    rgba(237, 241, 238, 0.26);
  --rule-chalk:     #D6DEDA;
  --rule-chalk-hi:  #B9C5BF;

  /* Active theme slots — flipped by [data-theme] */
  --bg:             var(--ink);
  --bg-raised:      var(--ink-raised);
  --fg:             var(--on-ink);
  --fg-mid:         var(--on-ink-mid);
  --fg-low:         var(--on-ink-low);
  --rule:           var(--rule-ink);
  --rule-hi:        var(--rule-ink-hi);
  --accent:         var(--signal);

  /* Type */
  --font-display:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--1:        0.9375rem;
  --step-0:         1.0625rem;
  --step-1:         clamp(1.125rem, 0.35vw + 1.05rem, 1.3125rem);
  --step-2:         clamp(1.375rem, 0.9vw + 1.15rem, 1.875rem);
  --step-3:         clamp(1.75rem, 1.9vw + 1.3rem, 2.75rem);
  --step-4:         clamp(2.125rem, 3.6vw + 1.3rem, 4.25rem);
  --step-5:         clamp(2.875rem, 8vw + 0.5rem, 7rem);

  /* Space — 8px rhythm */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-5:  3rem;
  --sp-6:  4rem;
  --sp-7:  6rem;
  --pad-section: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.375rem, 4vw, 3.5rem);
  --measure: 62ch;

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    160ms;
  --dur:         260ms;
  --dur-slow:    620ms;

  --nav-h: 112px;
}

[data-theme='ink'] {
  --bg:        var(--ink);
  --bg-raised: var(--ink-raised);
  --fg:        var(--on-ink);
  --fg-mid:    var(--on-ink-mid);
  --fg-low:    var(--on-ink-low);
  --rule:      var(--rule-ink);
  --rule-hi:   var(--rule-ink-hi);
  --accent:    var(--signal);
}

[data-theme='chalk'] {
  --bg:        var(--chalk);
  --bg-raised: var(--chalk-raised);
  --fg:        var(--on-chalk);
  --fg-mid:    var(--on-chalk-mid);
  --fg-low:    var(--on-chalk-low);
  --rule:      var(--rule-chalk);
  --rule-hi:   var(--rule-chalk-hi);
  --accent:    var(--clinic);
}

/* ---------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
/* Anchor scrolling is driven by the same inertial loop as the wheel, so the
   page only ever has one scrolling model. Native smooth is the fallback when
   that loop is off (touch, reduced motion, no JS). */
html:not(.has-inertia) { scroll-behavior: smooth; }

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

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, figcaption, blockquote { margin: 0; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

::selection { background: var(--clinic); color: #fff; }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

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

/* ---------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--pad-section);
  background: var(--bg);
  color: var(--fg);
}

.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--flush-top { padding-top: 0; }

/* Hairline that opens a section — the trace crossing a boundary */
.section--ruled { border-top: 1px solid var(--rule); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
}

/* ---------------------------------------------------------------
   4. TYPE ROLES
   --------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mid);
  line-height: 1;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.display   { font-size: var(--step-5); }
.headline  { font-size: var(--step-4); }
.subhead   { font-size: var(--step-3); }
.title     { font-size: var(--step-2); }
.subtitle  { font-size: var(--step-1); letter-spacing: -0.018em; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--fg-mid);
  max-width: var(--measure);
}

.body-copy { color: var(--fg-mid); max-width: var(--measure); }
.body-copy + .body-copy { margin-top: var(--sp-2); }

.meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-low);
  line-height: 1;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mark-green { color: var(--accent); }

/* Vertical rhythm utilities — used sparingly, never to override .section */
.stack-sm { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.stack-md { margin-top: clamp(2rem, 4vw, 3rem); }
.stack-lg { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--rule-hi);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  min-height: 48px;
  cursor: pointer;
  /* --mag-* is written by the pointer handler on primary CTAs; the short
     transition is what turns a raw cursor offset into a magnetic pull. */
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 200ms var(--ease-out);
}

.btn__arrow {
  display: block;
  width: 14px;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  --btn-bg: var(--clinic);
  --btn-fg: #fff;
  --btn-bd: var(--clinic);
}
.btn--primary:hover { --btn-bg: var(--forest); --btn-bd: var(--forest); }

.btn--signal {
  --btn-bg: var(--signal);
  --btn-fg: var(--ink);
  --btn-bd: var(--signal);
}
.btn--signal:hover { --btn-bg: var(--signal-bright); --btn-bd: var(--signal-bright); }

.btn--ghost:hover { --btn-bd: var(--fg); }

.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; min-height: 56px; }

/* Text link with a rule that draws under it */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 2px;
  font-weight: 500;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--accent); }

/* ---------------------------------------------------------------
   6. NAVIGATION
   --------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--nav-h);
  transition: height var(--dur) var(--ease);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  padding: 4px;
  margin-left: -4px;
}
/* The full CX / MEDIA lockup. The CX is 71% of the box and the wordmark
   another 6%, so the bar has to be tall for both to read — hence --nav-h.
   It compacts hard on scroll so the height is only paid at the top. */
.nav__logo img {
  width: auto;
  height: 86px;
  transition: height var(--dur) var(--ease);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* comfortable on touch without moving the rule */
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--on-ink-mid);
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.55rem;
  width: 100%; height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--on-ink); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.nav__cta { flex: none; }

/* Scroll progress — a single hairline reading of how far through the story */
.nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: var(--signal);
  opacity: 0.85;
}

.nav.is-stuck {
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  border-bottom-color: var(--rule-ink);
}
.nav.is-stuck .nav__inner { height: 78px; }
.nav.is-stuck .nav__logo img { height: 58px; }

.nav__toggle {
  display: none;
  width: 48px; height: 48px;
  margin-right: -12px;
  align-items: center;
  justify-content: center;
}
.nav__toggle span {
  display: block;
  position: relative;
  width: 20px; height: 1px;
  background: var(--on-ink);
  transition: background var(--dur-fast) var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 1px;
  background: var(--on-ink);
  transition: transform var(--dur) var(--ease-out);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }

.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer { display: none; }

/* ---------------------------------------------------------------
   7. HERO — the signature
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vh, 6rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}

/* A faint measurement grid — the graph paper the trace is plotted on.
   --gx/--gy give it a few pixels of counter-drift against the cursor, so the
   field reads as a surface with depth rather than a printed background. */
.hero::before {
  content: '';
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(to right, rgba(237,241,238,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,241,238,0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: var(--gx, 0px) var(--gy, 0px);
  mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 78%);
  opacity: calc(1 - var(--p, 0));
  pointer-events: none;
}

/* The same grid again, brighter and brand-green, revealed only in a pool
   around the pointer. The instrument lights up where you look at it. */
.hero::after {
  content: '';
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(to right, rgba(82,183,136,0.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(82,183,136,0.30) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: var(--gx, 0px) var(--gy, 0px);
  /* +60px because this layer is inset by -60px, so its origin sits above and
     left of the hero box the pointer coordinates are measured against. */
  mask-image: radial-gradient(240px 240px at calc(var(--mx, 50%) + 60px) calc(var(--my, 38%) + 60px),
              #000 0%, rgba(0,0,0,0.45) 44%, transparent 72%);
  -webkit-mask-image: radial-gradient(240px 240px at calc(var(--mx, 50%) + 60px) calc(var(--my, 38%) + 60px),
              #000 0%, rgba(0,0,0,0.45) 44%, transparent 72%);
  opacity: calc(var(--lit, 0) * (1 - var(--p, 0)));
  transition: opacity 500ms var(--ease);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

/* Parallax lives on wrappers so it never fights the entrance animations
   applied to the elements themselves. */
.hero__lift { transform: translate3d(0, calc(var(--p, 0) * -44px), 0); }

.hero__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.hero__title {
  font-size: var(--step-5);
  font-stretch: 118%;
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 0.92;
  max-width: 15ch;
}
.hero__title em {
  font-style: normal;
  color: var(--on-ink-low);
}

.hero__lede {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 54ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--on-ink-mid);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The dual trace: noise vs bookings */
.trace {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

/* Parallax wrapper — kept separate from .trace so it never collides with the
   reveal transform the figure itself carries. */
.trace__lift {
  transform: translate3d(0, calc(var(--p, 0) * -96px), 0);
  opacity: calc(1 - var(--p, 0) * 0.9);
}

.trace__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.trace__legend { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.trace__key {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-low);
}
.trace__swatch {
  width: 18px; height: 2px;
  background: var(--on-ink-low);
  flex: none;
}
.trace__key--live { color: var(--on-ink); }
.trace__key--live .trace__swatch { background: var(--signal); height: 2px; }

/* preserveAspectRatio="none" plus non-scaling strokes: the plot can be given
   whatever height a breakpoint needs without the lines going thick or thin. */
.trace__stage { position: relative; }

.trace__plot {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 262;
  height: auto;
  overflow: visible;
}

/* ---- Scrubber -------------------------------------------------------
   Drag the pointer across the plot and the readout follows, marking both
   series and bracketing the distance between them. It reports no numbers,
   because there are none to report — it demonstrates the gap, which is the
   entire argument the chart is making. Positioned in percentages so it
   tracks the plot at any aspect ratio. Fine pointers only.
   -------------------------------------------------------------------- */
.scrub {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.trace__stage:hover .scrub { opacity: 1; }

.scrub__line {
  position: absolute;
  top: -6px; bottom: -6px;
  left: var(--sx, 50%);
  width: 1px;
  background: var(--rule-ink-hi);
}

.scrub__gap {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sgap-top, 0%);
  height: var(--sgap-h, 0%);
  width: 3px;
  margin-left: -1px;
  background: var(--signal);
  opacity: 0.28;
}

.scrub__dot {
  position: absolute;
  left: var(--sx, 50%);
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
}
.scrub__dot--noise  { top: var(--sy-noise, 50%);  background: var(--on-ink-low); }
.scrub__dot--booked { top: var(--sy-booked, 50%); background: var(--signal);
                      box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.16); }

.scrub__tag {
  position: absolute;
  left: var(--sx, 50%);
  transform: translate(12px, -50%);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.scrub__tag--noise  { top: var(--sy-noise, 50%);  color: var(--on-ink-low); }
.scrub__tag--booked { top: var(--sy-booked, 50%); color: var(--signal); }
/* Past two thirds across, flip the labels so they never run off the plot */
.trace__stage.is-late .scrub__tag { transform: translate(calc(-100% - 12px), -50%); }

.trace__noise,
.trace__booked {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
/* 3.3:1 against the canvas — perceivable, but never competing with the green */
.trace__noise  { stroke: var(--on-ink-low); stroke-width: 1; opacity: 0.8; }
.trace__booked { stroke: var(--signal); stroke-width: 2.5; }
.trace__step   { fill: var(--signal); }
.trace__axis   { stroke: var(--rule-ink); stroke-width: 1; }

.trace__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* Draw-on when JS is available and motion is welcome */
.js .trace__noise,
.js .trace__booked {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
}
.js .trace.is-live .trace__noise {
  animation: draw 1600ms var(--ease) 240ms forwards;
}
.js .trace.is-live .trace__booked {
  animation: draw 1900ms var(--ease) 620ms forwards;
}
.js .trace__step { opacity: 0; }
.js .trace.is-live .trace__step {
  animation: pop 380ms var(--ease-out) forwards;
  animation-delay: calc(900ms + var(--i, 0) * 190ms);
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

/* ---------------------------------------------------------------
   8. POSITIONING STRIP
   --------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--rule);
}

.strip__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  padding-right: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.strip__label { margin-bottom: 0.7rem; }
.strip__value {
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.sector {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-mid);
}

/* ---------------------------------------------------------------
   9. SECTION HEADERS
   --------------------------------------------------------------- */
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head__eyebrow { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.sec-head__title { font-size: var(--step-4); max-width: 20ch; }
.sec-head__lede { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------
   10. THE DIAGNOSIS (problem)
   --------------------------------------------------------------- */
.faults { border-top: 1px solid var(--rule); }

.fault {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.fault__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg-low);
  padding-top: 0.45rem;
}

.fault__name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.024em;
  line-height: 1.08;
  margin-bottom: 0.6rem;
}

.fault__copy { color: var(--fg-mid); max-width: 56ch; }

.fault__stage {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-low);
  border: 1px solid var(--rule);
  padding: 0.35rem 0.6rem;
}

.verdict {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-hi);
}
.verdict__line {
  font-size: var(--step-3);
  font-stretch: 110%;
  max-width: 26ch;
}
.verdict__line strong { font-weight: 600; color: var(--accent); }

/* ---------------------------------------------------------------
   11. THE FIX — the canvas turns
   --------------------------------------------------------------- */
.fix { position: relative; }

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

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.chain__node {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule-hi);
  color: var(--fg);
  background: var(--bg-raised);
}
.chain__arrow {
  width: 18px;
  color: var(--accent);
  flex: none;
}

/* ---------------------------------------------------------------
   12. THE GROWTH SYSTEM — sticky instrument
   --------------------------------------------------------------- */
.system__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
}

.system__rail {
  position: relative;
}

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

.stage {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  transition: opacity var(--dur-slow) var(--ease);
}

.stage__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg-low);
  padding-top: 0.4rem;
  transition: color var(--dur) var(--ease);
}

.stage__name {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--fg-low);
  transition: color var(--dur-slow) var(--ease);
}

.stage__role {
  margin-top: 0.55rem;
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.stage__copy { margin-top: 0.75rem; color: var(--fg-mid); max-width: 52ch; }

.stage__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
}
.stage__part {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-low);
  border: 1px solid var(--rule);
  padding: 0.35rem 0.55rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.stage.is-active .stage__index { color: var(--accent); }
.stage.is-active .stage__name  { color: var(--fg); }
.stage.is-active .stage__part  { color: var(--fg-mid); border-color: var(--rule-hi); }

/* The diagram: the trace running through four stations */
.engine {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  background: var(--bg-raised);
}

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

/* The wire itself: a single line with four stations and a terminus.
   --flow (0-1) is written by JS and fills the line with brand green. */
.wire { position: relative; }

.wire::before,
.wire::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.35rem;
  bottom: 1.35rem;
  width: 1px;
}
.wire::before { background: var(--rule-hi); }
.wire::after {
  background: var(--clinic);
  transform: scaleY(var(--flow, 0));
  transform-origin: top;
  transition: transform 520ms var(--ease-out);
}

.wire__node {
  position: relative;
  display: grid;
  grid-template-columns: 11px 2.4rem minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: start;
  padding-block: clamp(0.8rem, 1.7vw, 1.3rem);
}

.wire__dot {
  grid-area: 1 / 1;
  width: 11px; height: 11px;
  margin-top: 0.3rem;
  border-radius: 50%;
  border: 2px solid var(--rule-hi);
  background: var(--bg-raised);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.wire__dot--sq { border-radius: 2px; }

.wire__index {
  grid-area: 1 / 2;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-low);
  padding-top: 0.2rem;
  transition: color var(--dur) var(--ease);
}

.wire__name {
  grid-area: 1 / 3;
  font-family: var(--font-display);
  font-stretch: 116%;
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-low);
  transition: color var(--dur-slow) var(--ease);
}

.wire__out {
  grid-area: 2 / 3;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-low);
  transition: color var(--dur) var(--ease);
}

.wire__node.is-on .wire__dot {
  background: var(--clinic);
  border-color: var(--clinic);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}
.wire__node.is-on .wire__index { color: var(--clinic); }
.wire__node.is-on .wire__name  { color: var(--fg); }
.wire__node.is-on .wire__out   { color: var(--fg-mid); }

.engine__foot {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------
   13. SERVICES — a schedule of components, not a card wall
   --------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--rule-hi); }

.ledger__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr) minmax(0, 2.5fr);
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease);
}

.ledger__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg-low);
}

.ledger__name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.024em;
  line-height: 1.05;
}

.ledger__detail { color: var(--fg-mid); font-size: var(--step--1); }
.ledger__detail strong { color: var(--fg); font-weight: 500; }

.ledger__stage {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-low);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.ledger__row:hover,
.ledger__row:focus-within { background: var(--bg-raised); }
.ledger__row:hover .ledger__stage,
.ledger__row:focus-within .ledger__stage {
  color: #fff;
  background: var(--clinic);
  border-color: var(--clinic);
}

/* Sibling components that feed the same stage answer back */
.ledger__row.is-linked .ledger__stage {
  color: var(--clinic);
  border-color: var(--clinic);
}

/* ---------------------------------------------------------------
   14. THE INSTRUMENT — an empty dashboard, honestly
   --------------------------------------------------------------- */
.instrument {
  border: 1px solid var(--rule-hi);
  background: var(--bg-raised);
}

.instrument__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}

.instrument__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.instrument__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-low);
  flex: none;
}

/* Eight metrics, two clean rows. Never a ragged trailing row. */
.instrument__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.metric:nth-child(2n) { border-right: 0; }
.metric__label { margin-bottom: 0.85rem; min-height: 2em; }
.metric__unit  { margin-top: auto; padding-top: 0.65rem; }
.metric__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-low);
}
.metric__unit {
  font-size: var(--step--1);
  color: var(--fg-mid);
  line-height: 1.45;
}

.instrument__note {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.instrument__note p { color: var(--fg-mid); font-size: var(--step--1); max-width: 68ch; }

/* ---------------------------------------------------------------
   15. RESULTS — editorial framework
   --------------------------------------------------------------- */
.case {
  border-top: 1px solid var(--rule-hi);
  padding-top: clamp(2rem, 4vw, 3rem);
}

.case__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.case__key { align-self: start; }
.case__val { color: var(--fg-mid); max-width: 62ch; }
.case__val strong { color: var(--fg); font-weight: 500; }

.timeline { border-top: 1px solid var(--rule); }
.timeline__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.15rem, 2.4vw, 1.65rem);
  border-bottom: 1px solid var(--rule);
}
.timeline__when {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.35rem;
}
.timeline__what { font-weight: 500; letter-spacing: -0.012em; }
.timeline__note { color: var(--fg-mid); font-size: var(--step--1); margin-top: 0.3rem; }

/* ---------------------------------------------------------------
   16. WHY CLINIX
   --------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--rule);
}
.pillar {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.pillar__num { margin-bottom: 1.1rem; }
.pillar__name {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.022em;
  margin-bottom: 0.6rem;
}
.pillar__copy { color: var(--fg-mid); font-size: var(--step--1); }

/* ---------------------------------------------------------------
   17. ABOUT
   --------------------------------------------------------------- */
.about__pull {
  font-family: var(--font-display);
  font-stretch: 114%;
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 18ch;
}
.about__prose { display: grid; gap: var(--sp-3); }
.about__prose p { color: var(--fg-mid); max-width: 60ch; }
.about__prose p strong { color: var(--fg); font-weight: 500; }

/* ---------------------------------------------------------------
   18. FINAL CTA + FORM
   --------------------------------------------------------------- */
.close { position: relative; overflow: hidden; }
.close::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(237,241,238,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,241,238,0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(100% 80% at 20% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(100% 80% at 20% 0%, #000 10%, transparent 72%);
  pointer-events: none;
}
.close__inner { position: relative; z-index: 1; }

.close__line {
  font-size: var(--step-4);
  font-stretch: 116%;
  letter-spacing: -0.034em;
  max-width: 23ch;
}
.close__line em { font-style: normal; color: var(--on-ink-low); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}
.field { display: grid; gap: 0.5rem; }
.field--full { grid-column: 1 / -1; }

.field__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mid);
}
.field__req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--rule-hi);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  border-radius: 0;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  appearance: none;
}
.field textarea { min-height: 108px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239CAAA2' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}
.field option { color: #111; }

.field input::placeholder,
.field textarea::placeholder { color: var(--fg-low); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--fg-low); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(82, 183, 136, 0.05);
}

.field__help { font-size: 0.8125rem; color: var(--fg-low); }
.field__error {
  font-size: 0.8125rem;
  color: var(--signal-bright);
  display: none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--signal-bright); }
.field.has-error .field__error { display: block; }

.form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}

.form__status {
  grid-column: 1 / -1;
  padding: 1rem 1.25rem;
  border: 1px solid var(--accent);
  background: rgba(82, 183, 136, 0.08);
  font-size: var(--step--1);
  display: none;
}
.form__status.is-shown { display: block; }

/* ---------------------------------------------------------------
   19. CONTACT PANEL
   --------------------------------------------------------------- */
.contact-lines { border-top: 1px solid var(--rule); }
.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.contact-line__value { font-weight: 500; letter-spacing: -0.012em; }
a.contact-line__value { padding-block: 0.6rem; margin-block: -0.6rem; }

/* ---------------------------------------------------------------
   20. FOOTER
   --------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 1px solid var(--rule-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule-ink);
}

.footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 4px;
  margin: -4px -4px 1.25rem;
}
.footer__mark img { width: auto; height: 128px; }
.footer__blurb { color: var(--on-ink-mid); font-size: var(--step--1); max-width: 34ch; }

.footer__col-title { margin-bottom: 0.5rem; }
.footer__list { display: grid; }
.footer__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  color: var(--on-ink-mid);
  transition: color var(--dur) var(--ease);
}
.footer__list a:hover { color: var(--on-ink); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

/* ---------------------------------------------------------------
   20b. INNER PAGES
   --------------------------------------------------------------- */

/* Compact hero — same voice as the homepage, a third of the height */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(237,241,238,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,241,238,0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(110% 100% at 78% 30%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(110% 100% at 78% 30%, #000 12%, transparent 76%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__title {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--step-4);
  font-stretch: 118%;
  letter-spacing: -0.034em;
  max-width: 17ch;
}
.page-hero__lede {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  max-width: 56ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--on-ink-mid);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-low);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
/* Hit area extended past the visual bounds — no layout shift */
.crumbs a {
  padding: 0.85rem 0.35rem;
  margin: -0.85rem -0.35rem;
  transition: color var(--dur) var(--ease);
}
.crumbs a:hover { color: var(--on-ink); }

/* Capability — a service explained properly rather than sold in a card */
.caps { border-top: 1px solid var(--rule-hi); }

.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

.cap__head { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1rem; }
.cap__index { padding-top: 0.4rem; }
.cap__name {
  font-family: var(--font-display);
  font-stretch: 116%;
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.028em;
  line-height: 1.05;
}
.cap__feeds {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.35rem 0.6rem;
}

.cap__body p { color: var(--fg-mid); max-width: 54ch; }
.cap__body p + p { margin-top: var(--sp-2); }

.spec-list { margin-top: 0.9rem; border-top: 1px solid var(--rule); }
.spec-list li {
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--fg-mid);
}

/* Partner Circle — a progression, not three price cards */
.tiers { border-top: 1px solid var(--rule-hi); }

.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.tier__name {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: -0.028em;
  text-transform: uppercase;
  line-height: 1;
}
.tier__role { margin-top: 0.5rem; color: var(--fg-mid); font-size: var(--step--1); }
.tier__gate {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-low);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.6rem;
}
.tier__list { border-top: 1px solid var(--rule); }
.tier__list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.6rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--fg-mid);
}
.tier__list li::before {
  content: '';
  width: 7px; height: 7px;
  margin-top: 0.5em;
  background: var(--accent);
}
.tier__list li.is-inherited { color: var(--fg-low); }
.tier__list li.is-inherited::before { background: var(--rule-hi); }

/* Principles — numbered because the order is how we actually work */
.principles { border-top: 1px solid var(--rule); }
.principle {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.35rem, 2.8vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.principle__index { padding-top: 0.3rem; }
.principle__text { color: var(--fg-mid); max-width: 60ch; }
.principle__text strong { color: var(--fg); font-weight: 500; }

/* Reusable closing band */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(237,241,238,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(237,241,238,0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(90% 90% at 15% 10%, #000 8%, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 90% at 15% 10%, #000 8%, transparent 70%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; }
.cta-band__title {
  font-size: var(--step-3);
  font-stretch: 116%;
  letter-spacing: -0.032em;
  max-width: 22ch;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ---------------------------------------------------------------
   21. SCROLL REVEALS
   --------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 65ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   22. RESPONSIVE
   --------------------------------------------------------------- */
@media (min-width: 720px) {
  .tier            { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .fix__grid       { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .case__row       { grid-template-columns: 8rem minmax(0, 1fr); }
  .footer__top     { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
  .about__grid     { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
                     gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .close__grid     { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                     gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
}

@media (min-width: 900px) {
  /* Eight metrics land as two tidy rows of four */
  .instrument__grid       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric:nth-child(2n)   { border-right: 1px solid var(--rule); }
  .metric:nth-child(4n)   { border-right: 0; }
}

@media (min-width: 1024px) {
  .cap             { grid-template-columns: minmax(0, 3.2fr) minmax(0, 5fr) minmax(0, 3fr); }
  .system__layout  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .sec-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                     gap: clamp(2rem, 5vw, 4rem); align-items: end; }
  .sec-head--split .sec-head__lede { margin-top: 0; }
}

@media (max-width: 1023px) {
  /* Stacked, the instrument shouldn't stretch across the whole page */
  .engine { max-width: 34rem; }
}

@media (max-width: 900px) {
  .ledger__row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    row-gap: 0.6rem;
  }
  .ledger__detail { grid-column: 2; }
  .ledger__stage  { grid-column: 2; }
}

@media (max-width: 860px) {
  /* The bar carries only the logo and the toggle here, so it needs less
     height than on desktop — but the logo itself stays large. */
  :root { --nav-h: 96px; }
  .nav__logo img { height: 74px; }
  .nav.is-stuck .nav__inner { height: 70px; }
  .nav.is-stuck .nav__logo img { height: 52px; }
  .footer__mark img { height: 104px; }

  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__toggle { display: flex; }

  .nav__drawer {
    display: block;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    z-index: 99;              /* under the bar, over everything else */
    background: var(--ink);
    border-bottom: 1px solid var(--rule-ink);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 420ms var(--ease-out), visibility 0s linear 420ms;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 420ms var(--ease-out), visibility 0s;
  }
  .nav__drawer-list { display: grid; }
  .nav__drawer-list a {
    display: block;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--rule-ink);
    font-family: var(--font-display);
    font-stretch: 112%;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
    color: var(--on-ink);
  }
  .nav__drawer .btn { width: 100%; justify-content: center; margin-top: var(--sp-3); }
}

@media (max-width: 640px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .fault { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .stage { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .timeline__row { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .instrument__grid { grid-template-columns: minmax(0, 1fr); }
  .metric { border-right: 0; }
  .metric__label { min-height: 0; }
  .engine { position: static; max-width: none; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Give the plot real height on a narrow screen, and drop the step markers —
     they'd distort, and the staircase already carries the point. */
  .trace__plot { aspect-ratio: auto; height: 190px; }
  .trace__step { display: none; }
}

/* ---------------------------------------------------------------
   LEGAL — long-form prose for the privacy policy
   A narrow measure and a clear heading rhythm, because a policy
   nobody can read is not a policy.
   --------------------------------------------------------------- */
.legal { max-width: 68ch; }

.legal h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mid);
  margin-top: var(--sp-4);
}

.legal p { margin-top: var(--sp-2); color: var(--fg-mid); }
.legal p strong { color: var(--fg); font-weight: 600; }

.legal ul {
  margin-top: var(--sp-2);
  display: grid;
  gap: 0.625rem;
}
.legal li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--fg-mid);
}
.legal li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 9px;
  height: 1px;
  background: var(--accent);
}
.legal li strong { color: var(--fg); font-weight: 600; }

.legal code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  background: var(--chalk-inset);
  border: 1px solid var(--rule-chalk);
}

.legal__stamp { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------
   CONSENT — cookie choice bar
   Decline and Accept are the same size, same weight, one click each.
   Nothing is nudged, because a nudged consent is not a consent.
   --------------------------------------------------------------- */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  background: var(--ink-raised);
  border-top: 1px solid var(--rule-ink-hi);
  color: var(--on-ink);
  transform: translateY(100%);
  transition: transform 420ms var(--ease-out);
}
.consent.is-up { transform: translateY(0); }

.consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

.consent__text p:not(.meta) {
  margin-top: 0.5rem;
  max-width: 64ch;
  color: var(--on-ink-mid);
  font-size: var(--step--1);
}

.consent__actions {
  display: flex;
  gap: 0.75rem;
  flex: none;
}
/* Equal footprint — the decline button must not read as the lesser option */
.consent__actions .btn { min-width: 132px; justify-content: center; }

.footer__link-btn {
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.footer__link-btn:hover { color: var(--accent); }

@media (max-width: 720px) {
  .consent__inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .consent__actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---------------------------------------------------------------
   BOOKER — the live calendar embed
   The widget renders light and we don't control its internals, so
   rather than fight it, it gets its own chalk panel and reads as a
   deliberate inset instrument on the ink canvas.
   --------------------------------------------------------------- */
.booker {
  background: var(--chalk);
  border: 1px solid var(--rule-chalk);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}

.booker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.875rem var(--sp-3);
  border-bottom: 1px solid var(--rule-chalk);
  background: var(--chalk-inset);
  color: var(--on-chalk-mid);
}

.booker__frame {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
}

.booker__alt { margin-bottom: var(--sp-3); }

.booker__alt-title {
  font-size: var(--step-2);
  margin-bottom: 0.5rem;
}
.booker__alt p { color: var(--fg-mid); max-width: 46ch; }

@media (max-width: 640px) {
  .booker__frame { min-height: 560px; }
}

/* ---------------------------------------------------------------
   23. REDUCED MOTION — everything lands at its end state
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .js .trace__noise,
  .js .trace__booked { stroke-dashoffset: 0; }
  .js .trace__step { opacity: 1; }

  /* No parallax, no cursor spotlight, no magnetism. The JS never writes these
     under reduced motion; this is the belt to that braces. */
  .hero__lift, .trace__lift, .btn { transform: none !important; }
  .trace__lift { opacity: 1 !important; }
  .hero::before { opacity: 1 !important; }
  .hero::after  { opacity: 0 !important; }
  .scrub { display: none; }
}

/* Coarse pointers get no scrubber — there is no hover to drive it. */
@media (hover: none), (pointer: coarse) {
  .scrub { display: none; }
}

/* ---------------------------------------------------------------
   24. PRINT
   --------------------------------------------------------------- */
@media print {
  .nav, .nav__drawer, .hero::before, .close::before { display: none !important; }
  body, .section { background: #fff !important; color: #000 !important; }
}