/* =========================================================
   Fractional Engineering Leadership: "Cadence"
   An engineering-operations instrument, set on paper.

   2026-09-20 visual system. Light canvas, one warm-neutral family of
   greys, a serif for the voice, a plain sans for the argument and a mono
   only where the page is reading out an instrument (wordmark, chart).
   The two accents keep their meaning from the first version: rust is the
   before-state (incident, firefighting), deep teal is the after-state
   (steady, predictable). Neither is ever decorative.
   ========================================================= */

/* ---------- Fonts ----------
   Self-hosted variable fonts. See fonts/README.md for how they were built
   and for the coverage boundary: anything outside the unicode-ranges
   below renders in the fallback stack.
   Paths are relative to this stylesheet, so they resolve from /hu/ too.
   The -ext files carry only the Hungarian double acutes, so the English
   page never requests them. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-ext.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}

:root {
  color-scheme: light;

  /* Palette. One grey family, warm-neutral, from the page down to the
     headline. Contrast figures are against --bg unless stated. */
  --bg:        #F5F4F1;   /* page */
  --surface:   #FFFFFF;   /* cards, the instrument, the hero masthead */
  --surface-2: #ECEBE6;   /* the two tonal bands (deliverables, model) */
  --line-soft: #E9E8E3;   /* recessive hairlines inside cards */
  --line:      #DCDBD5;   /* standard hairline: card borders, rows */
  --rule:      #C8C7C0;   /* chapter dividers: must actually be visible */
  --line-strong: #7F868C; /* control boundaries only; 3.3:1 on --bg, 3.7:1 on --surface, 3.1:1 on --surface-2 (WCAG 1.4.11) */
  --mute-2:    #5E676F;   /* smallest chrome text; 5.2:1 on --bg, 4.8:1 on --surface-2 */
  --mute:      #5A646D;   /* secondary prose and labels; 5.5:1 on --bg */
  --text:      #2B3239;   /* body */
  --ink:       #12181D;   /* headlines, primary control fill */
  --signal:    #0E6E6B;   /* deep teal: the after-state. 5.5:1 on --bg, 6.1:1 on --surface */
  --signal-2:  #0A5856;   /* hover of --signal */
  --signal-dim: rgba(14, 110, 107, 0.10);
  --warn:      #B5452F;   /* rust: the before-state. 5.0:1 on --bg */
  --warn-2:    #C0603E;   /* the ramp's mid stop only */
  --warn-dim:  rgba(181, 69, 47, 0.10);

  /* Type families */
  --f-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale. Every font-size on this page comes from this list.
     --t-3xl and above are the display face; --t-2xl and below are the sans. */
  --t-label: 0.6875rem;                                 /* 11px  micro-labels */
  --t-2xs:   0.75rem;                                   /* 12px  footnotes, axis ticks */
  --t-xs:    0.8125rem;                                 /* 13px  mono data, small chrome */
  --t-sm:    0.875rem;                                  /* 14px  dense lists, card body, nav, buttons */
  --t-md:    1rem;                                      /* 16px  body */
  --t-lg:    1.125rem;                                  /* 18px  ledes, section subs */
  --t-xl:    clamp(1.25rem, 1.16rem + 0.35vw, 1.4rem);  /* 20-22px  h3 register */
  --t-2xl:   clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);   /* 22-28px  lead h3 */
  --t-3xl:   clamp(1.75rem, 1.5rem + 1vw, 2.25rem);     /* 28-36px  phase names, pull-quote */
  --t-4xl:   clamp(2rem, 1.4rem + 2.4vw, 3.25rem);      /* 32-52px  section titles */
  --t-5xl:   clamp(2.25rem, 1.5rem + 3vw, 3.6rem);      /* 36-58px  model, contact */
  --t-6xl:   clamp(2.4rem, 1.3rem + 4.4vw, 4.6rem);     /* 38-74px  h1 -- largest type on the page */

  /* Labels: one treatment, colour is the only variable. */
  --track-mono: 0;
  --label-track: 0.12em;

  /* Display tracking. Source Serif's opsz axis already tightens the
     letterfit at display sizes, so the manual correction is small and
     the word-space needs no counterweight. */
  --track-6xl: -0.018em;  --word-6xl: normal;
  --track-5xl: -0.014em;  --word-5xl: normal;
  --track-4xl: -0.012em;  --word-4xl: normal;
  --track-3xl: -0.006em;  --word-3xl: normal;

  /* Spacing scale. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* Rhythm */
  --nav-h: 70px;
  --container: 1180px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9.5vw, 8rem);
  --section-y-tight: clamp(2.75rem, 5.5vw, 4.5rem);
  --radius: 8px;
  --radius-sm: 6px;

  /* Motion. Three curves with named jobs, three durations, one lift
     distance. --lift is also the reduced-motion switch. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quick: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-quick: 150ms;
  --dur-base:  240ms;
  --lift: -2px;
  --dur-enter: 900ms;

  /* Surfaces are flat at rest. A card gets a 1px hairline and this
     barely-there seat; the only deeper shadow on the page is the
     instrument's, because it is the one thing meant to feel mounted. */
  --card-shadow: 0 1px 2px rgba(18, 24, 29, 0.04);
  --seat-shadow: 0 1px 2px rgba(18, 24, 29, 0.04), 0 24px 48px -32px rgba(18, 24, 29, 0.22);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root { --lift: 0px; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .track.is-armed::before,
  .track.is-armed .phase { transform: none !important; opacity: 1 !important; transition: none !important; }
  .nav__links a::after { transition: none; }
  .btn:active, .ccard:active { transform: none; }
  html.js [data-depth] { animation: none !important; }
  html.js [data-reveal],
  html.js [data-reveal] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: var(--t-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
body.nav-open { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

::selection { background: #CFE6E4; color: var(--ink); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
/* Instrument readouts only: the wordmark, the chart's label, legend, axis
   and the phase day-ranges. Everything else that carries .mono in the
   markup is re-declared as sans further down. */
.mono { font-family: var(--f-mono); font-weight: 500; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: var(--s-2) var(--s-4); border-radius: 0 0 6px 0;
  font-size: var(--t-sm); font-weight: 500;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
#hero:focus { outline: none; }

/* ---------- Shared: micro-label ----------
   Small caps in the sans, one size, one tracking. Colour follows the
   Diagnosis Rule: teal only where the label means "after-state". */
.eyebrow,
.deliverable__meta,
.pkg__ideal-h,
.pkg__plus,
.fit__h,
.ccard__k,
.agenda__k {
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--mute);
}
/* The eyebrow is a kicker, set in the serif's real small caps and coloured
   by meaning: rust on the before-state (Symptoms), teal on the after-state
   (Outcomes, Next step), neutral everywhere else. No rule, no dot, no chip:
   the face and the colour carry it. Source Serif ships c2sc/smcp, so these
   are drawn small capitals, not shrunken ones. */
.eyebrow {
  display: block; font-family: var(--f-display); font-weight: 500;
  font-size: 1.125rem; line-height: 1.2; letter-spacing: 0.05em;
  text-transform: none; font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  color: var(--mute);
}
.eyebrow--signal { color: var(--signal); }
.eyebrow--warn { color: var(--warn); }
.eyebrow--center { text-align: center; }

/* ---------- Buttons ----------
   Ink, not teal: the action is the darkest thing on the page, and teal
   stays free to mean the after-state. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-body); font-weight: 500; font-size: var(--t-sm);
  padding: 0.7rem 1.2rem; border-radius: var(--radius-sm); line-height: 1.3;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--dur-quick) var(--ease-quick), background var(--dur-quick) var(--ease-quick),
              border-color var(--dur-quick) var(--ease-quick), color var(--dur-quick) var(--ease-quick),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--lg { padding: 0.95rem 1.5rem; font-size: 0.9375rem; }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: #26313A; border-color: #26313A; transform: translateY(var(--lift)); box-shadow: 0 8px 20px -12px rgba(18, 24, 29, 0.45); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(var(--lift)); }

/* =========================================================
   NAV
   Transparent at rest over the white masthead; past the sentinel it
   turns to frosted paper with a hairline. The backdrop-filter lives on a
   pseudo-element so the fixed mobile panel keeps the viewport as its
   containing block.
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, 0);
  transition: background var(--dur-base) var(--ease-out);
}
.nav.is-stuck::before {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
          backdrop-filter: blur(12px) saturate(120%);
}
@supports (animation-timeline: scroll()) {
  @keyframes nav-stuck {
    to { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
  }
  html:not(.js) .nav::before {
    animation: nav-stuck linear both;
    animation-timeline: scroll(root);
    animation-range: 0 40px;
  }
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: var(--s-5); }

.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); flex: none; }
.brand__mark { width: 34px; height: auto; flex: none; color: var(--signal); }
.brand__text { font-family: var(--f-mono); font-weight: 500; font-size: var(--t-sm); letter-spacing: var(--track-mono); }
.brand__sep { color: var(--signal); }

.nav__links { display: flex; gap: clamp(1.05rem, 1.6vw, 1.9rem); }
.nav__links a {
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 500; color: var(--mute);
  position: relative; padding: var(--s-1) 0;
  white-space: nowrap; transition: color var(--dur-quick) var(--ease-quick);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left center;
  transition: transform 180ms var(--ease-quick);
}
.nav__links a:hover,
.nav__links a.is-current { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-current::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.lang { display: inline-flex; align-items: stretch; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.lang__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; background: none; border: none; color: var(--mute); font-family: var(--f-body);
  font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0.04em; padding: 0 var(--s-2);
  transition: color var(--dur-quick) var(--ease-quick), background var(--dur-quick) var(--ease-quick);
}
.lang__btn.is-active { color: var(--ink); background: var(--surface-2); }
.lang__btn:hover { color: var(--ink); }
.lang__div { width: 1px; background: var(--line); flex: none; }

.nav__disclosure { display: none; }
.nav__toggle {
  display: flex; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer;
  list-style: none;
}
.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle::marker { content: ""; }
.nav__toggle-lines, .nav__toggle-lines::before, .nav__toggle-lines::after {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-quick) var(--ease-quick);
}
.nav__toggle-lines { position: relative; }
.nav__toggle-lines::before, .nav__toggle-lines::after { content: ""; position: absolute; left: 0; }
.nav__toggle-lines::before { top: -6px; }
.nav__toggle-lines::after { top: 6px; }
.nav__disclosure[open] .nav__toggle-lines { background: transparent; }
.nav__disclosure[open] .nav__toggle-lines::before { transform: translateY(6px) rotate(45deg); }
.nav__disclosure[open] .nav__toggle-lines::after { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  position: fixed; inset: calc(var(--nav-h) + 1px) 0 0; padding: var(--s-5) var(--pad) var(--s-6);
  background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(18px); border-top: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
  text-align: left;
}
.nav__mobile-links { display: grid; border-top: 1px solid var(--line); }
.nav__mobile-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--f-body);
  font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.01em;
}
.nav__mobile-links a::after {
  content: ""; flex: none; width: 13px; height: 13px; background-color: var(--signal);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
          mask: var(--icon-arrow) center / contain no-repeat;
}
.nav__mobile-cta { width: 100%; margin-top: var(--s-5); }

:root {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.75 4.5h5.75v5.75' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   HERO
   A white masthead that settles into the page colour, with the
   instrument mounted on it. The earlier scene (ambient washes, graph
   paper, echo trace, foreground band) is gone; the layer elements stay
   in the markup for the parallax hook but only the wash is drawn, and it
   no longer moves.
   ========================================================= */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * (var(--nav-h) + 1px));
  padding-top: calc(var(--nav-h) + 1px + clamp(2.5rem, 5vw, 3.75rem));
  padding-bottom: var(--section-y);
  background: var(--surface);
}
.cadence { transform: translate3d(0, var(--py, 0px), 0); }
.hero__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 58%, var(--bg) 100%);
}
.hero__grid, .hero__echo, .hero__fore { display: none; }

/* Entrance. Keyframes with a backwards fill rather than a class flip, so
   the page composes itself on load with no dependency on app.js. html.js
   is set by a one-line script in <head>; with scripting off nothing is
   ever hidden. */
@keyframes enter {
  from { opacity: 0; transform: translate3d(0, calc(var(--dy, 24px) + var(--py, 0px)), 0); }
}
html.js [data-depth] { animation: enter var(--dur-enter) var(--ease-out) backwards; animation-delay: var(--delay, 0ms); }
.nav[data-depth]   { --dy: -14px; }
.hero__wash        { --dy: 0px; }
.hero__eyebrow     { --delay: 40ms; --dy: 16px; }
.hero__title       { --delay: 100ms; --dy: 20px; }
.hero__lede        { --delay: 160ms; --dy: 20px; }
.hero__cta         { --delay: 220ms; --dy: 20px; }
.cadence           { --dy: 28px; --delay: 260ms; }

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

.hero__eyebrow { margin-bottom: var(--s-5); }

/* The largest type on the page, at every viewport. */
.hero__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--t-6xl);
  line-height: 1.02; letter-spacing: var(--track-6xl); word-spacing: var(--word-6xl); color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  font-optical-sizing: auto;
}
.hero__title-line { display: block; }
.hero__title-line--accent { color: var(--signal); }

.hero__lede {
  max-width: 47ch; margin: var(--s-5) 0 0; color: var(--mute);
  font-size: var(--t-lg);
}

/* Signature instrument */
.cadence {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4) var(--s-4) var(--s-3); text-align: left;
  box-shadow: var(--seat-shadow);
}
.cadence__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-2); }
.cadence__label { font-size: var(--t-xs); color: var(--ink); letter-spacing: var(--track-mono); }
.cadence__legend { display: flex; gap: var(--s-4); font-size: var(--t-label); color: var(--mute); letter-spacing: var(--track-mono); }
.cadence__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.cadence__key i { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.cadence__key--warn i { background: var(--warn); }
.cadence__key--signal i { background: var(--signal); }
/* Static frame of lineY(x, 0.6): the exact frame app.js draws under
   reduced motion, so the figure is never an empty labelled box when JS
   does not run. initCadence() clears this the moment it takes the 2d
   context. */
.cadence__canvas {
  width: 100%; height: clamp(140px, 21vw, 220px);
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 176' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23B5452F'/%3E%3Cstop offset='.42' stop-color='%23C0603E'/%3E%3Cstop offset='.62' stop-color='%230E6E6B'/%3E%3Cstop offset='1' stop-color='%230E6E6B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 88H1000' stroke='%23646D75' stroke-opacity='.3' stroke-dasharray='3 5'/%3E%3Cpath d='M0 34.2L6 31.2L12 30.8L17 33.6L23 40.1L29 50.2L35 63.5L41 79L46 95.5L52 111.3L58 125L64 135.1L70 140.8L76 141.5L81 137.3L87 128.9L93 117.5L99 104.5L105 91.5L110 80.1L116 71.3L122 66.1L128 64.6L134 66.6L139 71.5L145 78.2L151 85.6L157 92.7L163 98.6L169 102.7L174 104.8L180 105.1L186 103.9L192 101.8L198 99.4L203 97.1L209 95.2L215 93.7L221 92.4L227 91L232 89.1L238 86.3L244 82.6L250 78.1L256 73.2L262 68.7L267 65.4L273 64.1L279 65.7L285 70.7L291 79.1L296 90.5L302 104L308 118.3L314 132L320 143.4L325 151.3L331 154.6L337 153L343 146.6L349 136.1L355 122.8L360 108.1L366 93.5L372 80.5L378 70.1L384 63.1L389 59.5L395 59.3L401 61.7L407 65.9L413 71L418 76L424 80.4L430 83.7L436 85.8L442 86.8L448 87L453 86.7L459 86.3L465 86L471 85.8L477 85.8L482 85.7L488 85.4L494 84.6L500 83.2L506 81.2L511 78.6L517 75.8L523 73.1L529 70.8L535 69.2L540 68.5L546 68.8L552 70L558 71.8L564 73.9L570 75.8L575 77.2L581 77.8L587 77.5L593 76.2L599 74L604 71.3L610 68.2L616 65.2L622 62.5L628 60.3L633 58.8L639 57.9L645 57.8L651 58.2L657 59.1L663 60.2L668 61.6L674 63.1L680 64.7L686 66.3L692 68L697 69.9L703 71.8L709 73.8L715 76L721 78.2L726 80.5L732 82.8L738 85.2L744 87.5L750 89.9L756 92.3L761 94.6L767 96.9L773 99.2L779 101.3L785 103.4L790 105.4L796 107.4L802 109.2L808 110.8L814 112.4L819 113.8L825 115L831 116.1L837 117L843 117.8L849 118.4L854 118.8L860 119L866 119L872 118.9L878 118.6L883 118.1L889 117.4L895 116.6L901 115.6L907 114.4L912 113.1L918 111.6L924 110L930 108.2L936 106.4L942 104.4L947 102.3L953 100.2L959 98L965 95.7L971 93.4L976 91L982 88.7L988 86.3' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='988' cy='86.3' r='3.4' fill='%230E6E6B'/%3E%3Ccircle cx='988' cy='86.3' r='8' fill='none' stroke='%230E6E6B' stroke-opacity='.35'/%3E%3C/svg%3E");
}
.cadence.is-live .cadence__canvas { background-image: none; }
.cadence__axis { display: flex; justify-content: space-between; font-size: var(--t-label); color: var(--mute-2); letter-spacing: var(--track-mono); padding: var(--s-2) 0 0; border-top: 1px solid var(--line-soft); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* =========================================================
   SECTION shells. Two-tier rhythm: a full --section-y opens a chapter,
   --section-y-tight binds a section to the one before it.
   ========================================================= */
.section { padding-block: var(--section-y); position: relative; }
.value, .deliverables, .packages { padding-top: var(--section-y-tight); }
.problem, .arc, .fit { padding-bottom: var(--section-y-tight); }

.section__head { max-width: 68ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section__title {
  font-family: var(--f-display); font-weight: 600; color: var(--ink);
  font-size: var(--t-4xl); line-height: 1.08;
  letter-spacing: var(--track-4xl); word-spacing: var(--word-4xl); margin-top: var(--s-4);
  text-wrap: balance; font-optical-sizing: auto;
}
.section__title:first-child { margin-top: 0; }
.section__sub { color: var(--mute); margin-top: var(--s-4); font-size: var(--t-lg); max-width: 68ch; }

/* Chapter divider: the same [3, 5] dash the canvas draws its baseline with. */
.section + .section::before,
.problem::before {
  content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 3px, transparent 3px 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* =========================================================
   PROBLEM: symptoms as a hairline-gap grid
   ========================================================= */
.symptoms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.symptom { display: flex; gap: var(--s-4); padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface); transition: background var(--dur-base) var(--ease-quick); }
.symptom:hover { background: var(--bg); }
.symptom > div { min-width: 0; }
.symptom__title { font-family: var(--f-body); font-weight: 500; color: var(--ink); font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--s-2); }
.symptom p { color: var(--mute); font-size: var(--t-sm); }
.symptom__sig { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: var(--s-1); flex: none; }
.symptom__sig i { width: 3px; background: var(--warn); border-radius: 1px; }
.symptom__sig i:nth-child(1) { height: 60%; }
.symptom__sig i:nth-child(2) { height: 100%; }
.symptom__sig i:nth-child(3) { height: 40%; }

/* =========================================================
   VALUE: hairline rows, not cards.
   ========================================================= */
.value__rows { border-top: 1px solid var(--line); }
.vrow {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 4vw, 3.5rem); align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.vrow__title {
  font-family: var(--f-display); font-weight: 600; color: var(--ink);
  font-size: var(--t-2xl); line-height: 1.2;
  letter-spacing: -0.01em;
}
.vrow p { color: var(--mute); max-width: 60ch; }

/* =========================================================
   90-DAY ARC
   ========================================================= */
.track {
  --track-gap: clamp(1.25rem, 3vw, 2.5rem);
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--track-gap);
}
.track::before {
  content: ""; position: absolute; top: 7px; left: 8px; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--warn), var(--signal) 55%, var(--signal));
  opacity: 0.7; border-radius: 2px; transform-origin: left center;
}
.phase { position: relative; padding-top: var(--s-6); }
.phase__marker { position: absolute; top: 0; left: 0; }
.phase__dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--bg);
  border: 2px solid var(--signal); display: block; position: relative; z-index: 1;
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--signal-dim);
}
.phase:first-child .phase__dot { border-color: var(--warn); box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--warn-dim); }
.phase__days { display: block; color: var(--mute); font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: var(--track-mono); }
.phase__name { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: var(--t-3xl); line-height: 1.1; letter-spacing: var(--track-3xl); word-spacing: var(--word-3xl); margin: var(--s-1) 0 var(--s-4); }
.phase__list { display: grid; gap: var(--s-3); }
.phase__list li { position: relative; padding-left: 1.7rem; color: var(--text); font-size: var(--t-sm); }
.phase__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.34em; width: 6px; height: 11px;
  border: solid var(--mute); border-width: 0 2px 2px 0; transform: rotate(40deg);
}

/* =========================================================
   DELIVERABLES: the first tonal band
   ========================================================= */
.deliverables { background: var(--surface-2); }
.deliverables__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-4); }
.deliverable {
  position: relative; padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
/* Teal here is load-bearing: Diagnose / Operate / Measure / Transfer is a
   real category axis, not a decorative highlight. */
.deliverable__meta { display: block; color: var(--signal); }
.deliverable__title { margin-top: var(--s-3); color: var(--ink); font-family: var(--f-body); font-weight: 500; font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.01em; }
.deliverable p { margin-top: var(--s-2); color: var(--mute); font-size: var(--t-sm); }
.deliverables__note {
  margin-top: var(--s-5); padding-left: var(--s-4); border-left: 2px solid var(--signal);
  color: var(--text); max-width: 68ch;
}
.deliverables__note strong { color: var(--ink); font-weight: 600; }

/* =========================================================
   PACKAGES
   ========================================================= */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: stretch; }
.pkg {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem); transition: border-color var(--dur-quick) var(--ease-quick);
  box-shadow: var(--card-shadow);
}
.pkg:hover { border-color: var(--line-strong); }
.pkg--featured:hover { border-color: var(--signal-2); }
.pkg--featured {
  border-color: var(--signal);
  box-shadow: var(--card-shadow), 0 24px 40px -30px rgba(14, 110, 107, 0.35);
}
@media (min-width: 761px) {
  .pkg--featured { margin-block: -12px; }
}
.pkg__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--signal); color: #fff; font-family: var(--f-body);
  font-size: var(--t-label); letter-spacing: var(--label-track); text-transform: uppercase;
  padding: var(--s-1) var(--s-3); border-radius: 4px; white-space: nowrap; font-weight: 600; line-height: 1.2;
}
.pkg__top { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.pkg__name { font-family: var(--f-body); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.pkg--featured .pkg__name { color: var(--signal); }
.pkg__tag { color: var(--mute); font-size: var(--t-sm); margin-top: var(--s-1); }
.pkg__hours { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-4); }
.pkg__hours-n {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-3xl); line-height: 1;
  letter-spacing: var(--track-3xl); color: var(--ink); font-variant-numeric: tabular-nums;
}
.pkg--featured .pkg__hours-n { color: var(--signal); }
.pkg__hours-u { font-family: var(--f-body); font-size: var(--t-sm); color: var(--mute); }
.pkg__who { color: var(--mute); font-size: var(--t-sm); line-height: 1.55; margin-bottom: var(--s-4); }
.pkg__plus { margin-bottom: var(--s-2); }
.pkg__list { display: grid; gap: 0; margin-bottom: var(--s-5); border-top: 1px solid var(--line-soft); }
.pkg__list li { position: relative; padding: var(--s-2) 0 var(--s-2) 1.75rem; font-size: var(--t-sm); color: var(--text); border-bottom: 1px solid var(--line-soft); }
.pkg__list li:last-child { border-bottom: 0; }
.pkg__list li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--s-2) + 0.27em); width: 15px; height: 15px;
  border-radius: 50%; border: 1px solid var(--line-strong);
}
.pkg__list li::after {
  content: ""; position: absolute; left: 5.5px; top: calc(var(--s-2) + 0.27em + 3px); width: 4px; height: 7px;
  border: solid var(--mute); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg);
}
.pkg__ideal { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.pkg__ideal-h { color: var(--signal); margin-bottom: var(--s-3); }
.pkg__ideal ul { display: grid; gap: var(--s-2); }
.pkg__ideal li { font-size: var(--t-sm); color: var(--text); position: relative; padding-left: 1.1rem; }
.pkg__ideal li::before { content: "›"; position: absolute; left: 0; color: var(--mute); }
.pkg__cta { width: 100%; margin-bottom: var(--s-5); }
.pkg__note { text-align: center; color: var(--mute-2); font-family: var(--f-body); font-size: var(--t-2xs); margin-top: var(--s-6); }
.arc__note { text-align: center; color: var(--mute-2); font-family: var(--f-body); font-weight: 400; font-size: var(--t-2xs); margin-top: var(--s-6); }

/* =========================================================
   FIT: best fit / not a fit
   ========================================================= */
.fit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.fit__col {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  border-top-width: 2px; box-shadow: var(--card-shadow);
}
.fit__col--good { border-top-color: var(--signal); }
.fit__col--bad { border-top-color: var(--line-strong); }
.fit__h { margin-bottom: var(--s-4); }
.fit__col--good .fit__h { color: var(--signal); }
.fit__list { display: grid; gap: var(--s-3); }
.fit__list li { position: relative; padding-left: 1.7rem; color: var(--text); font-size: var(--t-sm); }
.fit__col--good .fit__list li::before {
  content: ""; position: absolute; left: 2px; top: 0.34em; width: 6px; height: 11px;
  border: solid var(--signal); border-width: 0 2px 2px 0; transform: rotate(40deg);
}
.fit__col--bad .fit__list li::before,
.fit__col--bad .fit__list li::after {
  content: ""; position: absolute; left: 2px; top: 0.62em; width: 10px; height: 1.5px;
  background: var(--mute); border-radius: 1px;
}
.fit__col--bad .fit__list li::before { transform: rotate(45deg); }
.fit__col--bad .fit__list li::after { transform: rotate(-45deg); }

/* =========================================================
   OPERATING MODEL: the second tonal band
   ========================================================= */
.model { background: var(--surface-2); }
.model__inner { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.model__title { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: var(--t-5xl); line-height: 1.05; letter-spacing: var(--track-5xl); word-spacing: var(--word-5xl); margin: var(--s-3) 0 var(--s-5); font-optical-sizing: auto; }
.model__title .strike { position: relative; display: inline-block; color: var(--mute-2); }
.model__title .strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 3px;
  background: var(--warn); transform: rotate(-3deg); border-radius: 2px;
}
.model__lede { color: var(--text); font-size: var(--t-lg); max-width: 56ch; }
.model__facts { margin-top: var(--s-6); display: grid; gap: 0; border-top: 1px solid var(--rule); }
.model__facts li { display: flex; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
/* Facts are prose, not readouts: sans despite the .mono hook in the markup. */
.model__k { color: var(--mute); min-width: 130px; font-family: var(--f-body); font-weight: 400; }
.model__v { color: var(--text); font-family: var(--f-body); font-weight: 400; }
.model__quote {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2rem);
  box-shadow: var(--card-shadow);
}
.model__quote blockquote { font-family: var(--f-display); font-weight: 500; font-size: var(--t-3xl); color: var(--ink); line-height: 1.3; letter-spacing: var(--track-3xl); word-spacing: var(--word-3xl); }
.model__profile { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.model__portrait {
  width: 88px; height: 88px; border-radius: 50%; flex: 0 0 88px;
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line);
}
.model__profile strong { display: block; color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.model__profile p span { display: block; color: var(--mute); font-size: var(--t-2xs); margin-top: var(--s-1); }

/* =========================================================
   FAQ
   ========================================================= */
.faq__layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
.faq__list { display: grid; gap: var(--s-2); }
.faq__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--card-shadow); transition: border-color var(--dur-quick) var(--ease-quick);
}
.faq__item:hover, .faq__item[open] { border-color: var(--line-strong); }
.faq__item summary {
  position: relative; cursor: pointer; list-style: none; padding: var(--s-4) calc(var(--s-7) + var(--s-3)) var(--s-4) var(--s-5);
  color: var(--ink); font-family: var(--f-body); font-size: var(--t-lg); font-weight: 500; letter-spacing: -0.005em; line-height: 1.4;
  transition: color var(--dur-quick) var(--ease-quick);
}
.faq__item summary:hover { color: var(--signal); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: ""; position: absolute; right: var(--s-4); top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; border: 1px solid var(--line-strong);
  transition: border-color var(--dur-quick) var(--ease-quick), background var(--dur-quick) var(--ease-quick);
}
.faq__item summary::after {
  content: ""; position: absolute; right: calc(var(--s-4) + 11px); top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out), margin-top var(--dur-base) var(--ease-out);
}
.faq__item summary:hover::before { border-color: var(--signal); background: var(--signal-dim); }
.faq__item[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq__item.is-closing summary::after { transform: rotate(45deg); margin-top: -6px; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-base) var(--ease-out),
                content-visibility var(--dur-base) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
.faq__item p { max-width: 68ch; padding: 0 var(--s-5) var(--s-5) var(--s-5); color: var(--mute); }
.faq__more {
  margin-top: var(--s-6); padding: var(--s-5); max-width: 36ch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow);
}
.faq__more-h { font-family: var(--f-body); font-weight: 500; color: var(--ink); font-size: var(--t-lg); line-height: 1.25; }
.faq__more p { color: var(--mute); font-size: var(--t-sm); margin-top: var(--s-2); }
.faq__more a {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4);
  font-family: var(--f-body); font-size: var(--t-sm); font-weight: 500; color: var(--signal);
  transition: color var(--dur-quick) var(--ease-quick);
}
.faq__more a::after {
  content: ""; flex: none; width: 12px; height: 12px; background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
          mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--dur-quick) var(--ease-quick);
}
.faq__more a:hover { color: var(--signal-2); }
.faq__more a:hover::after { transform: translate(1px, -1px); }

/* =========================================================
   CONTACT: closes on the same white the page opened with.
   ========================================================= */
.contact { text-align: center; overflow: hidden; background: var(--surface); }
.contact__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.contact__title { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: var(--t-5xl); letter-spacing: var(--track-5xl); word-spacing: var(--word-5xl); margin: var(--s-4) 0 0; line-height: 1.05; font-optical-sizing: auto; }
.contact__lede {
  color: var(--mute); font-size: var(--t-lg); margin: var(--s-4) auto 0;
  max-width: 52ch; text-wrap: balance;
}
.contact__cards { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin: var(--s-6) 0 0; }
.ccard {
  display: flex; flex-direction: column; gap: var(--s-1); text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); flex: 1 1 0; min-width: 0; box-shadow: var(--card-shadow);
  transition: border-color var(--dur-quick) var(--ease-quick), transform var(--dur-quick) var(--ease-quick);
}
.ccard:hover { border-color: var(--ink); transform: translateY(var(--lift)); }
.ccard:active { transform: scale(0.99); }
.ccard--primary { border-color: var(--signal); }
.ccard--primary .ccard__k { color: var(--signal); }
.ccard--primary:hover { border-color: var(--signal-2); }
.ccard__k { color: var(--mute); }
.ccard__v { color: var(--ink); font-size: var(--t-md); font-weight: 500; overflow-wrap: anywhere; }
.contact__agenda {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: var(--s-6) 0 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: left;
}
.contact__agenda li { padding: var(--s-4); background: var(--bg); color: var(--text); font-size: var(--t-sm); }
.agenda__k { display: block; margin-bottom: var(--s-1); color: var(--mute); }
.contact__privacy { margin-top: var(--s-5); color: var(--mute-2); font-family: var(--f-body); font-size: var(--t-2xs); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--line); padding-block: var(--s-6); background: var(--surface); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.brand--footer { color: var(--ink); }
.footer__line { color: var(--mute); font-size: var(--t-2xs); font-family: var(--f-body); font-weight: 400; }
.footer__meta { color: var(--mute-2); font-size: var(--t-2xs); font-family: var(--f-body); font-weight: 400; }

/* =========================================================
   The one authored scroll moment: the track draws from day 0 to day 90
   and each phase resolves as the line reaches its dot. .is-armed is
   added by JS, so with scripts off nothing is ever hidden.
   ========================================================= */
.track.is-armed::before { transform: scaleX(0); }
.track.is-armed .phase { opacity: 0; }
.track.is-armed.is-drawn::before { transform: scaleX(1); transition: transform 700ms var(--ease-out); }
.track.is-armed.is-drawn .phase { opacity: 1; transition: opacity var(--dur-base) var(--ease-out); }
.track.is-armed.is-drawn .phase:nth-child(2) { transition-delay: 200ms; }
.track.is-armed.is-drawn .phase:nth-child(3) { transition-delay: 400ms; }

/* =========================================================
   Scroll reveals, at block level only. Gated on html.js and on .is-in
   from app.js; reduced motion and JS-off show everything.
   ========================================================= */
@keyframes reveal {
  from { opacity: 0; transform: translateY(var(--reveal-dy, 24px)); }
}
html.js [data-reveal]:not(.is-in) { opacity: 0; }
html.js [data-reveal].is-in { animation: reveal 800ms var(--ease-out) backwards; }
html.js [data-reveal="stagger"].is-in { animation: none; }
html.js [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; }
html.js [data-reveal="stagger"].is-in > * { --reveal-dy: 16px; animation: reveal 700ms var(--ease-out) backwards; }
html.js [data-reveal="stagger"].is-in > :nth-child(2) { animation-delay: 90ms; }
html.js [data-reveal="stagger"].is-in > :nth-child(3) { animation-delay: 180ms; }
html.js [data-reveal="stagger"].is-in > :nth-child(4) { animation-delay: 270ms; }
html.js [data-reveal="stagger"].is-in > :nth-child(5) { animation-delay: 360ms; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1120px) {
  .nav__links { display: none; }
  .nav__disclosure { display: block; }
  .nav__cta { display: none; }
  .model__inner { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: 1fr; gap: var(--s-2); }
  .faq__layout { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
  .track { grid-template-columns: 1fr; gap: 0; }
  .track::before {
    left: 7px; right: auto; top: 12px; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--warn), var(--signal) 55%, var(--signal));
    transform-origin: center top;
  }
  .track.is-armed::before { transform: scaleY(0); }
  .track.is-armed.is-drawn::before { transform: scaleY(1); }
  .phase { padding-top: 0; padding-left: var(--s-6); padding-bottom: var(--s-6); }
  .phase:last-child { padding-bottom: 0; }
  .phase__marker { top: 4px; }
}
@media (max-width: 1120px) and (min-width: 761px) {
  .pkgs { grid-template-columns: repeat(2, 1fr); }
  .pkgs > .pkg:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pkgs { grid-template-columns: 1fr; }
  .fit__grid { grid-template-columns: 1fr; }
  .deliverables__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pkgs { max-width: 460px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .symptoms { grid-template-columns: 1fr; }
  .nav__inner { gap: var(--s-3); }
  .nav__actions { gap: var(--s-2); }
  .cadence { padding: var(--s-3) var(--s-3) var(--s-2); }
  .cadence__legend { gap: var(--s-3); }
  .btn { white-space: normal; text-align: center; }
  .hero__cta .btn { flex: 1 1 auto; }
  .contact__cards { flex-direction: column; align-items: stretch; }
  .ccard { flex: 1 1 auto; }
  .contact__agenda { grid-template-columns: 1fr; }
  .model__k { min-width: 0; flex: 0 0 42%; }
}
@media (max-width: 360px) {
  .brand__text { display: none; }
}