@import url('fonts.css');

/* ==========================================================================
   Know Your Physio — Design v2, "Precision & Vitality"
   Spec: docs/design-v2-brief.md. Direction C is dead; this replaces it.

   Two colour worlds (dark / light) alternating down every page.
   Three type voices: Fraunces display, Manrope body, JetBrains Mono data.
   One easing curve. Animate transform and opacity only.
   ========================================================================== */

:root {
  /* --- The dark world — jerrod.weblystudio.com's deep teal (Samar 2026-08-15:
     "use the same colors we have on jerrod's") ---------------------------- */
  --ink:          #0C232A;   /* deep teal-navy — the ground */
  --ink-2:        #10303C;   /* layered panel above the ground */
  --ink-3:        #173A4A;   /* raised / hover (jerrod surface) */
  --ink-line:     rgba(10, 230, 179, 0.15);
  --ink-text:     #F0F4F3;
  --ink-muted:    #8FA8A5;

  /* --- The light world --------------------------------------------------- */
  --bone:         #F7F5F0;   /* warm porcelain — where reading happens */
  --bone-2:       #EFEBE3;
  --bone-line:    rgba(12, 35, 42, 0.12);
  --bone-text:    #10201F;
  --bone-muted:   #5D6B67;

  /* --- Accent (never a section background) -------------------------------- */
  --accent:       #067A60;   /* jerrod's deep green — numerals/links on light */
  --accent-deep:  #05594B;
  --mint:         #0AE6B3;   /* jerrod's electric mint — data/highlights on dark */

  /* Active world — flipped by .world--dark / .world--light */
  --bg:      var(--bone);
  --surface: var(--bone-2);
  --text:    var(--bone-text);
  --muted:   var(--bone-muted);
  --line:    var(--bone-line);
  --pop:     var(--accent);

  /* --- Three type voices --------------------------------------------------- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem;

  --display-1: clamp(3rem, 8.5vw, 8rem);
  --display-2: clamp(2.25rem, 5.5vw, 4.75rem);
  --display-3: clamp(1.75rem, 3.4vw, 3rem);
  --numeral:   clamp(3rem, 7vw, 6rem);

  --lead-display: 0.94;
  --lead-body:    1.65;
  --track-display: -0.03em;
  --track-mono:     0.16em;

  /* --- Space ---------------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;
  --section-y: clamp(88px, 12vw, 176px);
  --measure: 66ch;
  --container: 1280px;
  --container-narrow: 720px;
  --gutter: clamp(20px, 5vw, 64px);

  /* --- Motion tokens (defined once, per the brief) --------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  0.35s;
  --dur:       0.7s;
  --dur-slow:  1s;
  --stagger:   0.075s;

  --radius: 4px;          /* near-square; this is a lab, not a card grid */
  --radius-lg: 10px;
  --radius-xl: 20px;
}

.world--dark {
  --bg: var(--ink); --surface: var(--ink-2); --text: var(--ink-text);
  --muted: var(--ink-muted); --line: var(--ink-line); --pop: var(--mint);
  background: var(--ink);
  color: var(--ink-text);
  /* layered, never flat */
  background-image:
    radial-gradient(120% 80% at 12% -10%, rgba(6,122,96,.20), transparent 60%),
    radial-gradient(90% 70% at 100% 0%, rgba(10,230,179,.07), transparent 55%);
}
.world--light {
  --bg: var(--bone); --surface: var(--bone-2); --text: var(--bone-text);
  --muted: var(--bone-muted); --line: var(--bone-line); --pop: var(--accent);
  background: var(--bone);
  color: var(--bone-text);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lead-body);
  background: var(--bone);
  color: var(--bone-text);
  -webkit-font-smoothing: antialiased;
  /* `clip` guards against sideways overflow the same way `hidden` does, but
     without making the body a scroll container — which silently disables
     position: sticky for everything inside it, including the contents rail. */
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 400; }

/* ==========================================================================
   Type
   ========================================================================== */

.display, h1, h2.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h1 { font-size: var(--display-2); }
.display--xl { font-size: var(--display-1); }
.display--lg { font-size: var(--display-2); }
.display--md { font-size: var(--display-3); }
.display em, .display i { font-style: italic; }

h2 { font-family: var(--font-display); font-size: var(--display-3); line-height: 1.05; letter-spacing: var(--track-display); }
h3 { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }

/* The mono "lab report" voice — every label, unit, number and date. */
.mono, .eyebrow, .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.eyebrow { color: var(--pop); display: inline-flex; align-items: center; gap: var(--space-3); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.meta { color: var(--muted); }

p { max-width: var(--measure); }
.lede { font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl)); color: var(--muted); line-height: 1.55; }
.muted { color: var(--muted); }

a { color: inherit; }

/* Animated underline on inline links */
.link {
  text-decoration: none; position: relative; color: var(--pop);
  font-weight: 600;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ==========================================================================
   Layout
   ========================================================================== */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .55); }
.stack > * + * { margin-top: var(--space-6); }
.stack--tight > * + * { margin-top: var(--space-3); }
.stack--loose > * + * { margin-top: var(--space-12); }
.grid { display: grid; gap: var(--space-8); }
@media (min-width: 800px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .grid--split { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.hr { height: 1px; background: var(--line); border: 0; }

.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 200;
  padding: var(--space-3) var(--space-6);
  background: var(--ink); color: var(--ink-text);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; text-decoration: none; border-radius: var(--radius);
  transform: translateY(-250%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   Buttons — labels must be legible in EVERY state (brief rule 3)
   ========================================================================== */

.btn {
  --btn-fg: #FFFFFF;
  --btn-bg: var(--accent);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  line-height: 1; text-decoration: none; cursor: pointer;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* fill/slide hover, drawn behind the label so the label never disappears */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover-bg, #FFFFFF);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, var(--accent)); }

/* A button must follow the world it SITS IN, which is the nearest world
   ancestor — not whichever rule happens to come last in this file.
   These were written as `.world--light .btn--ghost` / `.world--dark .btn--ghost`.
   Both match a ghost button on a bone sheet inside `<body class="world--dark">`,
   they have identical specificity, so the dark rule won on source order and every
   such button rendered near-white on near-white — 1.02:1, invisible.
   Declared as custom properties on the world containers instead, they inherit,
   so the nearest world wins. Values below are unchanged from the pairs above. */
.world--light {
  --primary-bg: var(--accent);   --primary-fg: #fff;
  --primary-hover-bg: var(--ink); --primary-hover-fg: #fff;
  --ghost-fg: var(--bone-text);  --ghost-border: var(--bone-text);
  --ghost-hover-bg: var(--ink);  --ghost-hover-fg: #fff;
}
.world--dark {
  --primary-bg: var(--mint);     --primary-fg: var(--ink);
  --primary-hover-bg: #fff;      --primary-hover-fg: var(--ink);
  --ghost-fg: var(--ink-text);   --ghost-border: rgba(242,246,242,.45);
  --ghost-hover-bg: var(--mint); --ghost-hover-fg: var(--ink);
}
.btn--primary {
  --btn-bg: var(--primary-bg, var(--accent));
  --btn-fg: var(--primary-fg, #fff);
  --btn-hover-bg: var(--primary-hover-bg, var(--ink));
  --btn-hover-fg: var(--primary-hover-fg, #fff);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ghost-fg, var(--text, #fff));
  --btn-hover-bg: var(--ghost-hover-bg, var(--pop));
  --btn-hover-fg: var(--ghost-hover-fg, var(--bg));
  border-color: var(--ghost-border, var(--text));
}

/* Safety net: any button that ends up with no explicit pairing is still legible. */
.btn--primary:not([class*="world"]) { color: var(--btn-fg); }

/* ==========================================================================
   Header + full-screen menu (the signature moment)
   ========================================================================== */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: var(--space-6);
  transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
  mix-blend-mode: normal;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.site-header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-header__logo img { height: 30px; width: auto; }
.site-header[data-hidden="true"] { transform: translateY(-110%); }
.site-header[data-solid="true"] { background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 640px) { .site-header__cta { display: none; } }

/* The toggle: a glassy pill, per weblystudio.com — mark, rule, label, bars. */
.menu-pill {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ink-line); border-radius: 999px;
  background: color-mix(in srgb, var(--ink-2) 55%, transparent);
  backdrop-filter: blur(14px);
  color: var(--ink-text); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.menu-pill:hover, .menu-pill:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mint) 45%, transparent);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .6), 0 0 24px -8px rgba(10, 230, 179, .25);
}
.menu-pill img { width: 20px; height: 20px; }
.menu-pill__rule { width: 1px; height: 18px; background: var(--ink-line); }
.menu-pill__label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.menu-pill__bars { display: flex; flex-direction: column; gap: 4px; }
.menu-pill__bars i { width: 16px; height: 1.5px; border-radius: 2px; background: var(--ink-muted); transition: background var(--dur-fast) var(--ease); }
.menu-pill:hover .menu-pill__bars i { background: var(--mint); }

/* On light-world pages the fixed header floats over bone until it goes solid */
body.world--light .site-header[data-solid="false"] .menu-pill { color: var(--bone-text); border-color: var(--bone-line); background: color-mix(in srgb, #fff 55%, transparent); }
body.world--light .site-header[data-solid="false"] .menu-pill__bars i { background: var(--bone-muted); }

/* ==========================================================================
   The explorer drawer — dark tray sliding in from the right, page blurred
   behind it (pattern: weblystudio.com's Solutions Explorer).
   ========================================================================== */

.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer[hidden] { display: none; }

.drawer__overlay {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: rgba(6, 18, 22, .62);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer[data-open="true"] .drawer__overlay { opacity: 1; }

.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(100%, 500px);
  display: flex; flex-direction: column;
  background: var(--ink);
  color: var(--ink-text);
  border-left: 1px solid var(--ink-line);
  box-shadow: 0 0 90px -10px rgba(0, 0, 0, .85);
  transform: translateX(100%);
  transition: transform .36s var(--ease);
  overflow: hidden;
}
.drawer[data-open="true"] .drawer__panel { transform: translateX(0); }

.drawer__wash {
  position: absolute; inset: 0 0 auto 0; height: 130px; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 85% 0%, rgba(10, 230, 179, .10), transparent 72%);
}
.drawer__rim {
  position: absolute; inset: 0 auto 0 0; width: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 230, 179, .45), rgba(6, 122, 96, .25) 40%, transparent 85%);
}

/* -- pinned head: label, subtitle, close, search --------------------------- */
.drawer__head {
  position: relative; z-index: 1; flex-shrink: 0;
  padding: var(--space-8) var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--ink-line);
}
.drawer__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.drawer__title { display: grid; gap: var(--space-2); }
.drawer__label { color: var(--mint); display: inline-flex; align-items: center; gap: var(--space-3); }
.drawer__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px 2px rgba(10, 230, 179, .55);
}
.drawer__sub { font-size: var(--text-sm); color: var(--ink-muted); max-width: 24rem; }
.drawer__close {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--ink-line); border-radius: 50%;
  background: rgba(255, 255, 255, .03); color: var(--ink-text); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.drawer__close:hover, .drawer__close:focus-visible { border-color: color-mix(in srgb, var(--mint) 50%, transparent); color: var(--mint); }

.drawer__search { position: relative; margin-top: var(--space-6); }
.drawer__search svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); pointer-events: none;
}
.drawer__search input {
  width: 100%; padding: 14px 16px 14px 44px;
  border: 1px solid var(--ink-line); border-radius: 16px;
  background: rgba(255, 255, 255, .04); color: var(--ink-text);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.drawer__search input::placeholder { color: var(--ink-muted); }
.drawer__search input:focus { outline: 0; border-color: color-mix(in srgb, var(--mint) 55%, transparent); background: rgba(255, 255, 255, .06); }
.drawer__search:focus-within svg { color: var(--mint); }

/* -- scrolling body -------------------------------------------------------- */
.drawer__body {
  position: relative; z-index: 1; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-6) var(--space-8) var(--space-12);
}
.drawer__count { color: var(--ink-muted); margin-bottom: var(--space-4); }
.drawer__empty { color: var(--ink-muted); font-size: var(--text-sm); padding-block: var(--space-6); }

.dw-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-3);
  border-radius: 14px; text-decoration: none; color: var(--ink-text);
  transition: background var(--dur-fast) var(--ease);
}
.dw-row:hover, .dw-row:focus-visible { background: rgba(255, 255, 255, .035); }
.drawer__primary .dw-row { border-bottom: 1px solid var(--ink-line); border-radius: 0; padding-block: var(--space-4); }
.drawer__primary .dw-row:last-child { border-bottom: 0; }
.dw-row__ico {
  display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--ink-line); border-radius: 12px;
  background: rgba(255, 255, 255, .03); color: var(--ink-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dw-row__ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dw-row:hover .dw-row__ico, .dw-row[aria-current="page"] .dw-row__ico {
  border-color: color-mix(in srgb, var(--mint) 45%, transparent);
  background: rgba(10, 230, 179, .08); color: var(--mint);
}
.dw-row__label { flex: 1; font-size: 12.5px; color: var(--ink-text); }
.dw-row[aria-current="page"] .dw-row__label { color: var(--mint); }
.dw-row__arrow {
  color: var(--mint); opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dw-row:hover .dw-row__arrow, .dw-row:focus-visible .dw-row__arrow { opacity: 1; transform: translateX(0); }

/* library leaves (search results: articles + episodes) */
.dw-row--leaf { gap: var(--space-4); padding-block: 10px; }
.dw-row__kind { flex-shrink: 0; min-width: 52px; color: var(--ink-muted); font-size: 0.6875rem; }
.dw-row__title { font-size: var(--text-sm); line-height: 1.4; }
.dw-row--leaf:hover .dw-row__title { color: var(--mint); }

.drawer__section { margin-top: var(--space-8); border-top: 1px solid var(--ink-line); padding-top: var(--space-6); }
.drawer__section-label { color: var(--ink-muted); margin-bottom: var(--space-4); }
.drawer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 16px; }
@media (min-width: 420px) { .drawer__grid { grid-template-columns: repeat(3, 1fr); } }
.dw-page {
  padding-block: 8px; text-decoration: none;
  font-size: 12px; color: color-mix(in srgb, var(--ink-text) 65%, transparent);
  transition: color var(--dur-fast) var(--ease);
}
.dw-page:hover, .dw-page:focus-visible { color: var(--mint); }

/* -- foot: CTA, tagline nudge, socials ------------------------------------- */
.drawer__foot { margin-top: var(--space-10, 40px); border-top: 1px solid var(--ink-line); padding-top: var(--space-8); }
.drawer__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 14px 20px; border-radius: 999px;
  background: var(--mint); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--track-mono); text-transform: uppercase; text-decoration: none;
  box-shadow: 0 14px 40px -14px rgba(10, 230, 179, .45);
  transition: gap var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.drawer__cta:hover, .drawer__cta:focus-visible { gap: var(--space-4); transform: translateY(-1px); }
.drawer__nudge {
  margin-top: var(--space-6);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.drawer__nudge span { font-size: var(--text-sm); color: var(--ink-muted); }
.drawer__nudge a { font-size: var(--text-sm); font-weight: 700; color: var(--mint); text-decoration: none; }
.drawer__contact { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.drawer__contact a { font-size: 0.6875rem; color: var(--ink-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.drawer__contact a:hover { color: var(--mint); }

/* ==========================================================================
   Interactive dot field — the canvas texture that answers the cursor.
   JS (site.js) draws a faint mint dot grid on a <canvas> it prepends into
   every .has-dot-field section; a halo of brighter dots trails the pointer
   and fades out when it rests. Touch / reduced-motion / no-JS keep the
   static faint grid, so the section is never a flat box.
   ========================================================================== */

.has-dot-field { position: relative; }
.dot-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* once a canvas is live it owns the grid — retire the static fallback */
.has-dot-field:has(.dot-field)::before { display: none; }
/* Shape the field per section so it reads as texture, not wallpaper. */
.hero .dot-field {
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 100%);
          mask-image: radial-gradient(80% 70% at 50% 40%, #000 20%, transparent 100%);
}
.plan-sec .dot-field {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ==========================================================================
   Statistics — oversized numerals, mono labels
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); padding: var(--space-12) var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.stat__value {
  font-family: var(--font-display); font-size: var(--numeral); line-height: .9;
  letter-spacing: -0.04em; color: var(--pop); font-variant-numeric: tabular-nums;
}
.stat__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Media
   ========================================================================== */

.figure { position: relative; overflow: hidden; border-radius: var(--radius); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--duo img { filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; }
.figure--duo { background: var(--accent); }
.figure--tall { aspect-ratio: 3/4; }
.figure--wide { aspect-ratio: 16/9; }
.figure--full { aspect-ratio: 21/9; }

/* ==========================================================================
   Rows (podcast / learn archives)
   ========================================================================== */

.row {
  display: grid; gap: var(--space-3);
  grid-template-columns: auto 1fr auto; align-items: baseline;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
  text-decoration: none; position: relative;
}
.row__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); color: var(--muted); }
.row__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; grid-column: 2; }
.row__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); color: var(--muted); white-space: nowrap; }
.row:hover .row__title { color: var(--pop); }
.row__title, .row:hover .row__title { transition: color var(--dur-fast) var(--ease); }
.row__play {
  grid-column: 2; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); color: var(--pop);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.row:hover .row__play, .row:focus-visible .row__play { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { .row { grid-template-columns: auto 1fr; } .row__meta { grid-column: 2; } }

/* ==========================================================================
   Prose
   ========================================================================== */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-6); }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); margin-top: var(--space-16); }
.prose h3 { margin-top: var(--space-12); }

/* WordPress set these lead-in lines as <h5>, which put a bogus heading at the top
   of the outline. They are paragraphs now; these values are the <h5> rendering
   they replace, measured, so nothing moves on screen. */
.prose .lede-note {
  font-size: .83em; font-weight: 700; line-height: 1.65;
  margin-top: 24px; margin-bottom: 0;
}
.prose img { border-radius: var(--radius); margin-block: var(--space-8); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote {
  border-left: 2px solid var(--pop); padding-left: var(--space-6);
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.4;
}
.prose a { color: var(--pop); font-weight: 600; }
.prose iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--radius); }

/* Reading progress */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--accent); width: 0; z-index: 150; }

/* ==========================================================================
   Footer + form
   ========================================================================== */

.site-footer { padding-block: var(--space-20) var(--space-8); }
.site-footer a { text-decoration: none; }

/* slim, balanced band: brand left, newsletter right */
.footer-band { display: grid; gap: var(--space-12); align-items: end; }
@media (min-width: 900px) { .footer-band { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-16); } }
.footer-brand { display: grid; gap: var(--space-4); justify-items: start; }
.footer-brand img { height: 44px; width: auto; }
/* The same form is used twice at very different sizes: full width in the
   footer, and in a half-width column on the contact page. A viewport media
   query cannot tell those apart — at 1440px it laid three columns into a
   560px box and the Subscribe button clipped its own label to "UBSCRIB".
   The row measures its own container instead, so both instances lay out on
   what they actually have. minmax(0, 1fr) lets the fields give way; the
   button, on an auto track, never does. */
.footer-form { display: grid; gap: var(--space-6); container-type: inline-size; }
/* start, not end: with `end` a field that an extension made taller would have
   its input ride upward instead of staying on the shared line. */
.footer-form__row { display: grid; gap: var(--space-6); align-items: start; }
/* Three steps, so the two fields are never stacked one above the other on
   anything but a phone — that reads as a misalignment, not a layout. */
@container (min-width: 340px) {
  .footer-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-form__row .btn { grid-column: 1 / -1; width: 100%; }
}
@container (min-width: 620px) {
  .footer-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .footer-form__row .btn { grid-column: auto; width: auto; }
}
/* Browsers without container queries keep the desktop row at desktop widths. */
@supports not (container-type: inline-size) {
  @media (min-width: 420px) {
    .footer-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .footer-form__row .btn { grid-column: 1 / -1; width: 100%; }
  }
  @media (min-width: 900px) {
    .footer-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .footer-form__row .btn { grid-column: auto; width: auto; }
  }
}
.footer-form__row .field { min-width: 0; }
.footer-form__row .field input { height: 56px; width: 100%; min-width: 0; }
.footer-form__row .btn {
  height: 56px; padding-block: 0; display: inline-flex;
  align-items: center; justify-content: center; align-self: start;
  white-space: nowrap; flex: 0 0 auto;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); justify-content: space-between; align-items: center; }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer-social a:hover, .footer-legal a:hover { color: var(--mint); }
/* Same pinning as .cfield, so an extension's injected node cannot move the
   input. Label and input both sit in row 1 here, not rows 1 and 2: this
   label is visually hidden and therefore out of flow, so row 1 would
   otherwise be free and an injected node would land above the input and push
   it down. Pinned to row 1, anything injected flows to row 2, below, where it
   moves nothing. */
.field { display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--space-2); }
.field > label, .field > input { grid-row: 1; grid-column: 1; }
.field input {
  padding: var(--space-4) 0; background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .06em;
}
.field input::placeholder { color: var(--muted); text-transform: uppercase; font-size: var(--text-xs); letter-spacing: var(--track-mono); }
.field input:focus-visible { outline: 0; border-bottom-color: var(--pop); }

/* ==========================================================================
   Motion — reveal primitives driven by GSAP, safe without JS
   ========================================================================== */

/* Elements start visible; JS adds [data-anim] only when it is going to run.
   The masks get .12em of breathing room below the baseline so descenders
   (g, y, p) are never sheared off by the overflow clip. */
/* Reveal lines clip nothing: room for ascenders AND descenders (quotes, g/y/j
   in Fraunces), compensated so line-height stays identical. The reveal start
   offset is 130% so the hidden text can never peek through the padding. */
.line { display: block; overflow: hidden; padding: .1em 0 .18em; margin: -.1em 0 -.18em; }
.line__inner { display: inline-block; }
.js [data-anim] { will-change: transform, opacity; }
.js [data-anim="rise"]   { opacity: 0; transform: translateY(48px); }
.js [data-anim="fade"]   { opacity: 0; }
.js [data-anim="lines"] .line__inner { transform: translateY(130%); }
.js [data-anim="scale"] img { transform: scale(1.12); }

:focus-visible { outline: 2px solid var(--pop); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .js [data-anim="lines"] .line__inner { transform: none !important; }
  .js [data-anim="scale"] img { transform: none !important; }
  .drawer__overlay, .drawer__panel { transition: none !important; }
}

/* ==========================================================================
   HERO — "The Readout"
   Full-viewport dark plate. Type carries it; the portrait is a duotone
   instrument panel, not a photo floating in space.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  padding-top: clamp(96px, 14vh, 150px);
  padding-bottom: var(--space-8);
}

/* Layered depth: two soft light sources + a fine chart grid. */
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 78% 22%, rgba(6,122,96,.42), transparent 66%),
    radial-gradient(46% 40% at 8% 76%, rgba(10,230,179,.13), transparent 70%);
}
/* Top rail — the lab-report header */
.hero__rail {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  align-items: baseline;
  padding-bottom: var(--space-12);
}
.hero__rail .mono { color: var(--ink-muted); }
.hero__rail .mono strong { color: var(--ink-text); font-weight: 500; }

/* Main composition */
.hero__body {
  position: relative; z-index: 2;
  display: grid; gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 88px); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9.2vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-weight: 400;
}

/* Hero fits ONE screen with no dead air (Samar, 2026-08-20). The title is
   sized off its own column (cqi) so each dictated line stays one rendered
   line; the helix is sized off the VIEWPORT HEIGHT so tall screens fill with
   signal instead of blank canvas; the band keeps a guaranteed clearance from
   the fold (padding-bottom scales with vh). */
/* The next sheet pulls itself up by --seam-r and covers the hero's last
   pixels — the band's clearance must include that overlap, not just the fold. */
.hero--v3 { padding-top: clamp(72px, 9vh, 108px); padding-bottom: calc(var(--seam-r) + clamp(12px, 2vh, 24px)); }
.hero--v3 .hero__rail { padding-bottom: clamp(16px, 3vh, 40px); }
.hero--v3 .hero__body > .stack { container-type: inline-size; }
.hero--v3 .hero__title { font-size: clamp(2.5rem, 4.6vw, 5.5rem); }
@supports (font-size: 1cqi) {
  .hero--v3 .hero__title { font-size: clamp(2.5rem, 7.4cqi, 5.5rem); }
}
.hero--v3 .hero__lede { max-width: 50ch; font-size: clamp(1rem, 1.15vw, 1.25rem); line-height: 1.65; }
.hero--v3 .hero__cta .btn { padding: 1em 2.1em; }
.hero--v3 .hero-band { margin-top: clamp(20px, 3vh, 44px); }
.hero-band__small { line-height: 1.45; padding-bottom: 2px; }
.hero--v3 .helix-wrap { min-height: 300px; }
.hero--v3 .helix-wrap canvas { width: auto; height: clamp(320px, 52vh, 600px); max-width: 100%; }
@media (min-width: 1000px) {
  .hero--v3 .hero__title .line { white-space: nowrap; }
}
/* Short laptop screens: same content, tighter vertical budget. */
@media (min-width: 1000px) and (max-height: 740px) {
  .hero--v3 { padding-top: clamp(56px, 8vh, 78px); padding-bottom: calc(var(--seam-r) + 10px); }
  .hero--v3 .hero__rail { padding-bottom: var(--space-4); }
  .hero--v3 .hero__title { font-size: clamp(2.2rem, 6.6cqi, 3.6rem); }
  .hero--v3 .hero__lede { font-size: 0.95rem; line-height: 1.55; }
  .hero--v3 .hero__cta .btn { padding: 0.85em 1.8em; }
  .hero--v3 .hero-band { margin-top: 20px; }
  .hero--v3 .helix-wrap canvas { height: clamp(220px, 36vh, 330px); }
}
.hero__title em {
  font-style: italic;
  color: var(--mint);
}
.hero__lede { max-width: 34ch; color: var(--ink-muted); font-size: clamp(1rem, 1.35vw, 1.2rem); }

.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* The portrait plate */
/* No box: the cutout floats on the canvas itself. A soft glow sits behind
   him and his lower body dissolves into the ground (Samar 2026-08-15).
   NOTHING here clips: the glow fades out on its own and the image is
   contained, so his head can never be cropped and no hard edges appear. */
.hero__plate {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 74vh;
  overflow: visible;
}
.hero__plate::before {
  content: ''; position: absolute; inset: -8%; pointer-events: none;
  background: radial-gradient(46% 42% at 56% 34%, rgba(10, 230, 179, .12), transparent 68%);
}
.hero__plate img {
  position: absolute; right: 0; bottom: 0;
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  /* dissolve into the ground below, and soften his cropped right edge */
  -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 98%), linear-gradient(270deg, transparent 0, #000 10%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, #000 64%, transparent 98%), linear-gradient(270deg, transparent 0, #000 10%);
          mask-composite: intersect;
}
/* the boxed frame + corner ticks are retired — the portrait floats free */
.hero__plate::after { content: none; }
.hero__tick { display: none; }

/* Bottom instrument rail */
.hero__readout {
  position: relative; z-index: 2;
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink-line);
}
@media (min-width: 780px) { .hero__readout { grid-template-columns: repeat(4, 1fr); } }
.hero__readout div {
  padding: var(--space-6) var(--space-6) var(--space-4) 0;
  border-right: 1px solid var(--ink-line);
}
.hero__readout div:last-child { border-right: 0; }
.hero__readout b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1; color: var(--ink-text);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.hero__readout span {
  display: block; margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-muted); line-height: 1.4;
}

/* Scroll cue */
.hero__cue {
  position: relative; z-index: 2; margin-top: var(--space-8);
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-muted);
}
.hero__cue i {
  width: 1px; height: 26px; background: linear-gradient(var(--mint), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* Lit dot-field ground (Webly reference) — a fine dot matrix, brightest
   where the composition lives, fading out at the edges. */
.has-dot-field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 230, 179, .16) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(78% 68% at 55% 38%, #000 25%, transparent 100%);
          mask-image: radial-gradient(78% 68% at 55% 38%, #000 25%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) { .hero__cue i { animation: none; } }

/* ==========================================================================
   HOMEPAGE — one continuous canvas (2026-08-15 addendum: cohesion)

   The body is a single dark-green ground running hero → footer. Light
   sections are bone "sheets" floating on it with rounded seams, so the page
   reads as one designed object instead of stacked unrelated bands.
   ========================================================================== */

.home {
  --seam-r: clamp(28px, 4.5vw, 56px);
  background: var(--ink);
  /* glows distributed down the canvas so no stretch of dark is ever flat */
  background-image:
    radial-gradient(56% 44rem at 82% -6rem,  rgba(6,122,96,.38), transparent 62%),
    radial-gradient(44% 36rem at 4% 30rem,   rgba(10,230,179,.10), transparent 64%),
    radial-gradient(52% 40rem at 92% 78rem,  rgba(6,122,96,.16), transparent 62%);
}

/* Dark homepage sections sit ON the canvas — they never repaint it. */
.on-canvas { background: transparent !important; background-image: none !important; }
.home .site-footer { background: transparent; background-image: none; }

/* Bone sheets: raised over the dark neighbours with rounded seams. */
.sheet {
  position: relative; z-index: 2;
  border-radius: var(--seam-r);
  margin-top: calc(-1 * var(--seam-r));
  margin-bottom: calc(-1 * var(--seam-r));
  box-shadow: 0 -30px 80px -50px rgba(0,0,0,.8), 0 30px 80px -50px rgba(0,0,0,.8);
  overflow: clip;
}
/* faint paper grain so bone is never flat either */
.sheet::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(12,35,42,.05) 1px, transparent 0);
  background-size: 30px 30px;
}
.sheet > * { position: relative; }
/* dark sections that sit under a sheet edge need room for the overlap —
   slightly tighter than a full section gap so the seams stay taut */
.under-sheet-top    { padding-top: calc(var(--section-y) * .55 + var(--seam-r)); }
.under-sheet-bottom { padding-bottom: calc(var(--section-y) * .55 + var(--seam-r)); }

/* ==========================================================================
   Hero credibility chip — mono lab chip under the headline
   ========================================================================== */

.hero__chip {
  display: inline-flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ink-line); border-radius: 999px;
}
.hero__chip b {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-2xl); line-height: 1; color: var(--mint);
  letter-spacing: -0.02em;
}
.hero__chip span {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-muted);
}

/* ==========================================================================
   PROOF — "the swag": jerrod's method-split pattern. Sticky statement on
   the left; the eight verified figures stream past on the right in two
   columns moving at different scroll speeds — oversized serif numerals,
   each with its drawn 0-100 bar and mono label.
   ========================================================================== */

.proof { scroll-margin-top: 80px; }
.proof.section { padding-bottom: calc(var(--section-y) * .35); }
.proof__head { display: grid; gap: var(--space-6); }
.proof__count { color: var(--mint); }

.proof-grid { margin-top: var(--space-16); }
@media (min-width: 900px) {
  .proof-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 5vw, 84px); align-items: start; }
  .proof-left { position: sticky; top: 16vh; }
}
.proof-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.proof-col { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .proof-col { will-change: transform; }
  .proof-col--slow .chart { border-right: 1px solid var(--ink-line); padding-right: clamp(22px, 2.4vw, 40px); }
  .proof-col--fast { margin-top: 10vh; }
  .proof-col--fast .chart { padding-left: clamp(22px, 2.4vw, 40px); }
}

.chart {
  border-top: 1px solid var(--ink-line);
  padding: clamp(20px, 2.6vw, 36px) clamp(12px, 1.6vw, 22px);
  display: grid; gap: var(--space-4); align-content: start;
}
.proof-col .chart:first-child { border-top: 0; }
.chart__value {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.75rem, 6.2vw, 5.5rem); line-height: .92; letter-spacing: -0.03em;
  color: var(--mint); font-variant-numeric: tabular-nums;
}
.chart__value sup { font-size: .4em; color: var(--ink-muted); vertical-align: super; }

/* the drawn bar: mint fill on a ticked hairline track, 0-100 scale */
.chart__bar {
  position: relative; height: 5px; border-radius: 3px; max-width: 300px;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--ink-line) calc(25% - 1px), var(--ink-line) 25%),
    rgba(10,230,179,.10);
}
.chart__bar i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 14px rgba(10,230,179,.35);
  transform-origin: left center;
}
.js .chart__bar i { transform: scaleX(0); }

.chart__label {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-muted); line-height: 1.6; max-width: 24ch;
}

/* ==========================================================================
   NOTE SCENE — "Do you know yourself?" pins while Andres's note writes
   itself out clause by clause beside his photo. New lines rise in, earlier
   lines dim, the attribution and CTA land on the final beat, and the photo
   breathes a slow 5% zoom across the pin.
   Fallback (no .note-on — short viewport / reduced motion / no JS): a
   static, fully readable layout.
   ========================================================================== */

.note-scene { padding-block: calc(var(--section-y) * .5); }
.note-grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) {
  .note-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 84px); }
}
.note-lines { margin-top: var(--space-8); display: grid; gap: var(--space-3); }
.note-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.45;
  letter-spacing: -0.015em; color: var(--bone-text); max-width: 46ch;
}
.note-line em { font-style: italic; color: var(--accent); }
.note-close { margin-top: var(--space-8); display: grid; gap: var(--space-4); justify-items: start; }
.note-photo { max-width: 480px; justify-self: end; width: 100%; overflow: hidden; }
.note-photo img { will-change: transform; transform-origin: 50% 40%; }

.js .note-scene.note-on .note-track { position: relative; }
.js .note-scene.note-on .note-pin {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
}
.js .note-scene.note-on { padding-block: 0; }
.js .note-scene.note-on .note-line {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .note-scene.note-on .note-line.on { opacity: 1; transform: none; }
.js .note-scene.note-on .note-line.past { opacity: .45; }
.js .note-scene.note-on .note-close {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .note-scene.note-on .note-close.on { opacity: 1; transform: none; }

@media (max-height: 600px) {
  .js .note-scene.note-on .note-pin { position: static; min-height: 0; }
  .js .note-scene.note-on .note-line, .js .note-scene.note-on .note-close { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   NOTE REEL — retired (the note lives in the note scene now); fallback
   styles kept only so any cached page still renders readably.
   ========================================================================== */

.reel-intro { text-align: center; display: grid; justify-items: center; gap: var(--space-4); padding-top: var(--space-8); }
.reel-stage { list-style: none; margin: var(--space-12) auto 0; padding: 0; max-width: 860px; display: flex; flex-direction: column; gap: var(--space-6); }
.reel-stmt {
  font-family: var(--font-display); font-weight: 400; color: var(--ink-text);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.18; letter-spacing: var(--track-display);
  text-align: center; max-width: none;
}
.reel-stmt em { font-style: italic; color: var(--mint); }
.reel-outro { margin-top: var(--space-12); text-align: center; display: grid; justify-items: center; gap: var(--space-6); }

.reel.reel-on .reel-track { position: relative; }
.reel.reel-on .reel-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.reel.reel-on .reel-stage { position: relative; width: 100%; max-width: none; height: 100%; display: block; margin: 0; }
.reel.reel-on .reel-stmt {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: min(960px, 88vw); opacity: 0;
  transform: translate(-50%, -50%); will-change: transform, opacity; transition: none !important;
  font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.12;
}

/* ==========================================================================
   Pillars — typographic ledger with drawn glyphs (no photography)
   ========================================================================== */

.pillars { counter-reset: pillar; }
.pillar {
  display: grid; gap: var(--space-4) var(--space-12);
  grid-template-columns: 1fr; align-items: start;
  padding-block: var(--space-12);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .pillar { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) auto; }
}
.pillar__head { display: flex; gap: var(--space-6); align-items: baseline; }
.pillar__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: var(--track-display);
  transition: color var(--dur-fast) var(--ease);
}
.pillar:hover .pillar__name { color: var(--accent); }
.pillar__body { color: var(--muted); max-width: 52ch; }
.glyph { width: 72px; height: 72px; color: var(--accent); opacity: .9; justify-self: end; }
.glyph path, .glyph circle { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.pillar .glyph { transition: transform var(--dur) var(--ease); }
.pillar:hover .glyph { transform: translateY(-4px); }
@media (max-width: 899px) { .glyph { display: none; } }

/* ==========================================================================
   Game plan — three steps on a drawn connector
   ========================================================================== */

.plan-steps { position: relative; list-style: none; padding: 0; margin: 0; }
/* top/height are measured by JS so the line runs exactly from the centre of
   dot 01 to the centre of dot 03 — the CSS values are only the no-JS fallback */
.plan-steps__line {
  position: absolute; top: 14px; bottom: auto; height: calc(100% - 60px); left: 7px; width: 2px;
  overflow: visible; pointer-events: none;
}
.plan-steps__line path { stroke: rgba(10,230,179,.5); stroke-width: 2; fill: none; }
.plan-step {
  position: relative; padding: 0 0 var(--space-12) var(--space-12);
}
.plan-step:last-child { padding-bottom: 0; }
.plan-step::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--mint);
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(10,230,179,.08);
}
.plan-step__num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); color: var(--mint);
}
.plan-step__text { margin-top: var(--space-2); font-size: var(--text-lg); max-width: 44ch; }

/* ==========================================================================
   VOICES — pinned testimonial rail (ported from the USA-site trust section,
   restyled to this theme). The giant serif word fills mint left→right while
   the two real testimonial cards slide right→left across it; the pin then
   releases. Verbatim words; no portraits, no invented ratings.
   Fallback (no JS / reduced motion / short viewport — no .trust-on): a
   static readable stack and the word solid ghost.
   ========================================================================== */

.trust { position: relative; }
.trust-eyebrow { text-align: center; justify-content: center; display: flex; margin: 0 0 var(--space-4); max-width: none; }
.trust-word {
  font-family: var(--font-display); font-weight: 400; text-align: center;
  letter-spacing: var(--track-display); line-height: .9; margin: 0;
  color: rgba(242, 246, 242, .2); white-space: nowrap;
}
.trust-rail { list-style: none; margin: 0; padding: 0; }
.trust-card--named figure {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; gap: var(--space-6);
  /* paper cards, like jerrod's — they pop against the teal ground */
  background: var(--bone);
  border: 1px solid var(--bone-line); border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 36px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
}
/* avatar header row: the client's real photo beside their name */
.trust-who {
  display: flex; align-items: center; gap: var(--space-4); order: -1;
}
.trust-photo {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  object-position: 70% 28%; flex-shrink: 0;
  border: 2px solid rgba(6, 122, 96, .25);
}
.trust-who-text { display: flex; flex-direction: column; gap: 2px; }
.trust-quote {
  margin: 0; font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); line-height: 1.7;
  color: var(--bone-text); max-width: none;
}
.trust-quote em { font-style: normal; color: var(--accent); font-weight: 600; }
.trust-name { font-weight: 700; font-size: var(--text-lg); color: var(--bone-text); }
.trust-who .meta { color: var(--bone-muted); text-transform: none; letter-spacing: .04em; }

/* receipt cards: real client messages, framed like the phone they came from */
.trust-card--shot { display: flex; align-items: center; }
.trust-card--shot img {
  max-height: min(56vh, 500px); max-width: min(400px, 76vw);
  width: auto; height: auto;
  padding: 8px; border-radius: 16px;
  background: var(--ink-2); border: 1px solid var(--ink-line);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .6);
}

/* static / fallback layout (no .trust-on) */
.trust .trust-pin { padding: calc(var(--section-y) * .7) 0 var(--section-y); }
.trust:not(.trust-on) .trust-word { font-size: clamp(2.5rem, 9vw, 8rem); margin-bottom: clamp(28px, 4vw, 48px); color: var(--ink-text); }
.trust:not(.trust-on) .trust-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-6); max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter);
}

/* engaged pin */
.js .trust.trust-on .trust-track { position: relative; }
.js .trust.trust-on .trust-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.js .trust.trust-on .trust-eyebrow { position: absolute; top: clamp(76px, 10vh, 120px); left: 0; right: 0; z-index: 3; margin: 0; }
.js .trust.trust-on .trust-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: max-content; max-width: 100vw;
  font-size: clamp(3.5rem, 12.5vw, 15rem); margin: 0; pointer-events: none;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; background-clip: text;
  /* JS moves the first stop left→right as the cards cross */
  background-image: linear-gradient(90deg, var(--mint) 0%, rgba(242, 246, 242, .2) 0%);
}
.js .trust.trust-on .trust-rail {
  position: relative; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center;
  gap: clamp(18px, 2vw, 32px); width: max-content; padding: 0 10vw; will-change: transform;
}
.js .trust.trust-on .trust-card { flex: 0 0 auto; }
.js .trust.trust-on .trust-card--named { width: min(500px, 84vw); }
.js .trust.trust-on .trust-card--shot { width: auto; }

/* un-pin escape on short viewports (rotate-to-landscape after load) */
@media (max-height: 600px) {
  .js .trust.trust-on .trust-track { position: static; height: auto !important; }
  .js .trust.trust-on .trust-pin { position: static; height: auto; overflow: visible; padding: calc(var(--section-y) * .7) 0 var(--section-y); display: block; }
  .js .trust.trust-on .trust-eyebrow { position: static; }
  .js .trust.trust-on .trust-word {
    position: static; transform: none; width: auto; max-width: none;
    font-size: clamp(2.5rem, 9vw, 8rem); margin-bottom: clamp(24px, 4vw, 40px);
    color: var(--ink-text) !important; -webkit-text-fill-color: var(--ink-text) !important;
    background-image: none !important;
  }
  .js .trust.trust-on .trust-rail {
    transform: none !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    width: auto; padding-inline: var(--gutter); gap: var(--space-4); max-width: var(--container); margin: 0 auto;
  }
  .js .trust.trust-on .trust-card { width: auto; }
}

/* ==========================================================================
   VELOCITY BAND — giant statement marquee (ported from the USA site).
   Auto-drifts; scrubbing it with a pointer/touch drag pauses the drift,
   which eases back in after release. Decorative (aria-hidden): the words
   are the four pillar names that already appear in full just above.
   ========================================================================== */

.vmarquee {
  overflow: hidden; position: relative;
  padding: clamp(26px, 5vw, 56px) 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  touch-action: pan-y;
  margin-bottom: calc(var(--seam-r) + clamp(24px, 4vw, 48px));
}
.vmarquee-track { display: flex; align-items: baseline; white-space: nowrap; width: max-content; will-change: transform; }
.vmarquee-track span {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.375rem, 9vw, 8rem); line-height: .95;
  letter-spacing: var(--track-display); padding: 0 .18em;
  color: var(--ink-text);
}
.vmarquee .vm-dot { color: var(--mint); font-size: clamp(1.2rem, 4.5vw, 4rem); align-self: center; }
.vm-draggable { cursor: grab; }
.vm-draggable.vm-grabbing { cursor: grabbing; }
.vm-draggable.vm-grabbing, .vm-draggable.vm-grabbing .vmarquee-track { user-select: none; -webkit-user-select: none; }
.vm-draggable .vmarquee-track span { -webkit-user-drag: none; }

/* ==========================================================================
   Closing — manifesto on the canvas
   ========================================================================== */

.closing { position: relative; }
.closing::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 50% 30%, rgba(6,122,96,.30), transparent 70%);
}
.closing .container { position: relative; }

/* ==========================================================================
   SUBPAGES — the approved homepage pattern rolled across the site.
   Every inner page: dark canvas hero (dot-field ready) → bone content
   sheet → dark footer. Shared archive rows, pills, pagination, byline,
   player, share row and prev/next cards live here.
   ========================================================================== */

.page-hero {
  position: relative;
  padding: clamp(140px, 20vh, 210px) 0 clamp(56px, 8vh, 96px);
}
.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 4rem);
  line-height: 1.02; max-width: 24ch; margin-top: var(--space-4);
}
.page-hero .eyebrow a { color: inherit; text-decoration: none; }
.page-hero .eyebrow a:hover { color: var(--mint); }
.page-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-8); margin-top: var(--space-8);
}
.page-hero__grid { display: grid; gap: var(--space-12); align-items: end; }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: minmax(0,1fr) auto; } }
.page-hero .cover {
  width: clamp(160px, 18vw, 240px); aspect-ratio: 1;
  border-radius: var(--radius-lg); object-fit: cover;
  border: 1px solid var(--ink-line);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
}

/* Author block — everything on this site is by Andres */
.byline { display: inline-flex; align-items: center; gap: var(--space-4); }
.byline img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: 50% 12%;
  border: 1px solid var(--ink-line); background: var(--ink-2);
}
.byline__who { display: grid; gap: 2px; }
.byline__name { font-weight: 700; font-size: var(--text-sm); color: var(--ink-text); }
.byline__role { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-muted); }
.world--light .byline__name, .sheet .byline__name { color: var(--bone-text); }
.world--light .byline__role, .sheet .byline__role { color: var(--bone-muted); }

/* Content sheets on subpages */
.sheet--page { padding-top: calc(var(--seam-r) * .8); padding-bottom: var(--space-16); }
.sheet--page > .section:first-child { padding-top: calc(var(--section-y) * .45); }

/* Archive rows (learn + podcasts) */
.entry {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: var(--space-2) var(--space-8); align-items: baseline;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.entry__num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); color: var(--muted); }
.entry__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--text); transition: color var(--dur-fast) var(--ease);
}
a.entry__link { text-decoration: none; }
a.entry__link:hover .entry__title, .entry:hover .entry__title { color: var(--accent); }
.entry__side { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-mono); color: var(--muted); white-space: nowrap; }
.entry__desc { grid-column: 2; color: var(--muted); max-width: 72ch; font-size: var(--text-sm); line-height: 1.6; }
.entry__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
.entry__go {
  grid-column: 2; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.entry:hover .entry__go { opacity: 1; transform: none; }
@media (max-width: 640px) { .entry { grid-template-columns: minmax(0,1fr); } .entry > * { grid-column: 1 !important; } }

/* Pills (categories, filters, share chips) */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; background: none; cursor: default;
}
a.pill, button.pill { cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
a.pill:hover, button.pill:hover { color: var(--accent); border-color: var(--accent); }
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Filter field on archive heads */
.filter-field { position: relative; max-width: 380px; width: 100%; }
.filter-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.filter-field input {
  width: 100%; padding: 12px 14px 12px 42px;
  border: 1px solid var(--line); border-radius: 12px; background: transparent; color: inherit;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.filter-field input:focus { outline: 0; border-color: var(--accent); }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-16); }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding-inline: var(--space-3);
  display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pagination a:hover { color: var(--accent); border-color: var(--accent); }
.pagination [aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The player — listen live, in-site */
.player {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
  background: var(--ink); color: var(--ink-text);
  border: 1px solid var(--ink-line);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .65);
}
.player audio { display: none; }
.player__btn {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--mint); color: var(--ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  box-shadow: 0 12px 30px -10px rgba(10, 230, 179, .5);
}
.player__btn:hover { transform: scale(1.06); }
.player__btn svg { width: 22px; height: 22px; fill: currentColor; }
.player__btn .ico-pause { display: none; }
.player.is-playing .ico-play { display: none; }
.player.is-playing .ico-pause { display: block; }
.player__body { flex: 1; display: grid; gap: 10px; min-width: 0; }
.player__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--ink-muted); }
.player__bar { position: relative; height: 6px; border-radius: 3px; background: rgba(10,230,179,.14); cursor: pointer; }
.player__bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--mint));
}
.player__times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; color: var(--ink-muted); }

/* Share chips */
.share { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.share .mono { color: var(--muted); }

/* Prev / next cards */
.prevnext { display: grid; gap: var(--space-4); margin-top: var(--space-16); }
@media (min-width: 720px) { .prevnext { grid-template-columns: 1fr 1fr; } }
.pn-card {
  display: grid; gap: var(--space-3);
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pn-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pn-card--next { text-align: right; }
.pn-card .mono { color: var(--muted); }
.pn-card b { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.25; letter-spacing: -0.015em; }

/* Author card at the foot of articles/episodes */
.author-card {
  display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap;
  margin-top: var(--space-16); padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.author-card img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  border: 2px solid rgba(6, 122, 96, .3);
}
.author-card__body { flex: 1; min-width: 260px; display: grid; gap: var(--space-2); justify-items: start; }
.author-card__name { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.01em; }
.author-card__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.author-card__links a { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent); text-decoration: none; }
.author-card__links a:hover { text-decoration: underline; }

/* ==========================================================================
   LEARN FRONT — edition-style blog front page (lead, rail, cards, quotes,
   topic board), plus the Apple-style podcast show page and the full player.
   ========================================================================== */

/* -- the front: lead story + latest rail -- */
.news-front { display: grid; gap: var(--space-12); }
@media (min-width: 980px) { .news-front { grid-template-columns: minmax(0, 1.55fr) minmax(0, .45fr); gap: clamp(32px, 4vw, 64px); } }
.news-lead { display: grid; gap: var(--space-6); text-decoration: none; align-content: start; }
.news-lead__body { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.news-lead__media { display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16/9; }
.news-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-lead:hover .news-lead__media img { transform: scale(1.03); }
.news-lead__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--bone-text); transition: color var(--dur-fast) var(--ease);
}
.news-lead:hover .news-lead__title { color: var(--accent); }
.news-lead__desc { color: var(--bone-muted); max-width: 64ch; line-height: 1.6; }

.news-rail { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.4vw, 36px); display: grid; gap: 0; align-content: start; }
.news-rail__label { margin-bottom: var(--space-4); }
.news-rail__item { display: grid; gap: 4px; padding-block: var(--space-4); border-bottom: 1px solid var(--line); text-decoration: none; }
.news-rail__item:last-child { border-bottom: 0; }
.news-rail__title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--bone-text); transition: color var(--dur-fast) var(--ease);
}
.news-rail__item:hover .news-rail__title { color: var(--accent); }

/* -- featured image cards -- */
.news-grid { display: grid; gap: clamp(20px, 2.6vw, 36px); }
@media (min-width: 760px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { display: grid; gap: var(--space-4); text-decoration: none; align-content: start; }
.news-card__media { display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4/3; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body { display: grid; gap: var(--space-2); }
.news-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--bone-text); transition: color var(--dur-fast) var(--ease);
}
.news-card:hover .news-card__title { color: var(--accent); }
.news-card__desc { color: var(--bone-muted); font-size: var(--text-sm); line-height: 1.55; }

/* -- case-study quote cards: deliberately different (dark panels) -- */
.case-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 760px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
.case-card {
  display: grid; gap: var(--space-4); align-content: start;
  background: var(--ink); color: var(--ink-text);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px);
  text-decoration: none; border: 1px solid var(--ink-line);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.case-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.case-card__quote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.35; letter-spacing: -0.015em;
  color: var(--mint);
}
.case-card__title { font-weight: 700; font-size: var(--text-sm); color: var(--ink-text); }

/* -- topic board -- */
.topic-board { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 760px) { .topic-board { grid-template-columns: repeat(2, 1fr); } }
.topic-cluster { border-top: 2px solid var(--bone-text); padding-top: var(--space-4); }
.topic-cluster__name { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.topic-item { display: flex; gap: var(--space-4); align-items: center; padding-block: var(--space-3); border-bottom: 1px solid var(--line); text-decoration: none; }
.topic-item:last-child { border-bottom: 0; }
.topic-item__thumb { width: 64px; height: 48px; flex-shrink: 0; overflow: hidden; border-radius: 8px; }
.topic-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.topic-item__body { display: grid; gap: 2px; min-width: 0; }
.topic-item__title { font-weight: 600; font-size: var(--text-sm); line-height: 1.35; color: var(--bone-text); transition: color var(--dur-fast) var(--ease); }
.topic-item:hover .topic-item__title { color: var(--accent); }

/* ==========================================================================
   Podcast show page (Apple-style) — artwork + host header, episode rows
   with cover thumbnails and a hover play badge.
   ========================================================================== */

.show-head { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 820px) { .show-head { grid-template-columns: auto minmax(0,1fr); gap: clamp(32px, 4vw, 64px); } }
.show-art {
  width: clamp(180px, 22vw, 280px); aspect-ratio: 1;
  border-radius: clamp(18px, 2vw, 28px); overflow: hidden;
  background: linear-gradient(150deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--ink-line);
  box-shadow: 0 40px 90px -35px rgba(0,0,0,.8);
  display: grid; place-items: center; padding: 12%;
}
.show-art img { width: 100%; height: auto; }

.ep-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: var(--space-2) var(--space-6); align-items: center;
  padding-block: clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.ep-row__art { position: relative; width: clamp(72px, 8vw, 96px); aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bone-2); }
.ep-row__art img { width: 100%; height: 100%; object-fit: cover; }
.ep-row__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(12, 35, 42, .45); opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.ep-row__play svg { width: 26px; height: 26px; fill: #fff; }
.ep-row:hover .ep-row__play { opacity: 1; }
.ep-row__body { display: grid; gap: 4px; min-width: 0; }
.ep-row__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--bone-text); transition: color var(--dur-fast) var(--ease);
}
.ep-row:hover .ep-row__title { color: var(--accent); }
.ep-row__desc {
  color: var(--bone-muted); font-size: var(--text-sm); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ep-row__side { align-self: start; padding-top: 6px; }
@media (max-width: 560px) { .ep-row { grid-template-columns: auto minmax(0,1fr); } .ep-row__side { display: none; } }

/* ==========================================================================
   Player v2 — transport (skip/play), buffered + fill + knob bar, speed,
   volume. Sticky on phones so it rides along while reading the notes.
   ========================================================================== */

.player { flex-wrap: wrap; z-index: 20; }
.player__transport { display: flex; align-items: center; gap: var(--space-4); }
.player__skip {
  position: relative; width: 44px; height: 44px; border: 0; cursor: pointer;
  background: none; color: var(--ink-text); opacity: .85;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.player__skip:hover { opacity: 1; transform: scale(1.06); }
.player__skip svg { width: 34px; height: 34px; }
.player__skip span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; padding-top: 3px;
}
.player__bar { height: 6px; }
.player__buffered { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: rgba(10,230,179,.22); }
.player__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--mint)); }
.player__knob {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px;
  border-radius: 50%; background: var(--mint); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(10, 230, 179, .18);
  pointer-events: none;
}
.player__side { display: flex; align-items: center; gap: var(--space-4); }
.player__speed {
  min-width: 52px; padding: 8px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink-line); background: none; color: var(--ink-text);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.player__speed:hover { border-color: var(--mint); color: var(--mint); }
.player__vol { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.player__vol svg { width: 20px; height: 20px; flex-shrink: 0; }
.player__vol input {
  width: 86px; height: 4px; appearance: none; -webkit-appearance: none;
  background: rgba(10,230,179,.2); border-radius: 2px; cursor: pointer;
}
.player__vol input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--mint); border: 0;
}
@media (max-width: 820px) {
  .player { position: sticky; top: 12px; }
  .player__vol { display: none; }
  .player__transport { order: 1; }
  .player__side { order: 2; margin-left: auto; }
  .player__body { order: 3; flex-basis: 100%; }
}

/* ==========================================================================
   Services — statement band, included ledger, bonus/upgrade cards
   ========================================================================== */

.svc-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  background: var(--ink); color: var(--ink-text);
  border-radius: var(--radius-lg); border: 1px solid var(--ink-line);
  padding: clamp(28px, 3.6vw, 52px);
  box-shadow: 0 30px 70px -32px rgba(0,0,0,.6);
}
.svc-band__line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em;
  max-width: 24ch;
}
.svc-band__line em { font-style: italic; color: var(--mint); }

.svc-ledger { border-top: 1px solid var(--line); }
.svc-item {
  display: grid; gap: var(--space-2) var(--space-8);
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .svc-item { grid-template-columns: auto minmax(0,.85fr) minmax(0,1.15fr); } }
.svc-item__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.015em; }
/* `--muted` is world-aware (bone on light sheets, ink on the dark canvas).
   Hardcoding --bone-muted here rendered at 2.92:1 on the dark world, below
   the 4.5:1 floor — the ledger was unusable outside a light sheet. */
.svc-item__body { display: grid; gap: var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: 1.6; grid-column: 2; }
@media (min-width: 900px) { .svc-item__body { grid-column: auto; } }

/* Glossary — same ledger rhythm as .svc-item, but a term/definition pair
   instead of a numbered step. Single column on phones. */
.gloss__row {
  display: grid; gap: var(--space-3) var(--space-12);
  grid-template-columns: 1fr; align-items: start;
  padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line);
}
.gloss__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .gloss__row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.gloss__term {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.015em;
}
.gloss__def { display: grid; gap: var(--space-3); margin: 0; color: var(--muted); line-height: 1.6; }
.gloss__def > p { margin: 0; }
.gloss__src { font-size: var(--text-sm); }
.gloss__src a { color: var(--pop); text-decoration: none; border-bottom: 1px solid transparent; }
.gloss__src a:hover, .gloss__src a:focus-visible { border-bottom-color: currentColor; }

.svc-cards { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 760px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
.svc-card {
  display: grid; gap: var(--space-4); align-content: start;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.svc-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.svc-card--bonus { background: var(--ink); color: var(--ink-text); border-color: var(--ink-line); }
.svc-card--bonus .svc-card__body { color: var(--ink-muted); }
.svc-card--bonus .pill { color: var(--mint); border-color: rgba(10,230,179,.35); }
.svc-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; }
.svc-card__body { color: var(--bone-muted); font-size: var(--text-sm); line-height: 1.6; }
.svc-card .pill { justify-self: start; }

/* ==========================================================================
   Mission — manifesto movements
   ========================================================================== */

.mission-move {
  display: grid; gap: var(--space-4) var(--space-8);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(32px, 5vh, 64px);
  border-top: 1px solid var(--ink-line);
  max-width: 60rem;
}
.mission-move:first-child { border-top: 0; }
.mission-move__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink-text); max-width: none;
}
.mission-move__text em { font-style: italic; color: var(--mint); }

/* ==========================================================================
   Team — portrait grid
   ========================================================================== */

/* 3-across: six people sit in two even rows — Andres 20 Aug: "not five
   people and then Kristel on the bottom". */
.team-grid { display: grid; gap: clamp(20px, 2.6vw, 36px); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { display: grid; gap: var(--space-3); align-content: start; }
.team-card__media { display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4/5; background: var(--bone-2); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .8s var(--ease); }
.team-card:hover .team-card__media img { transform: scale(1.05); }
.team-card__name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -0.01em; }
.team-card__role { font-size: 0.6875rem; color: var(--bone-muted); }
.team-card__li { justify-self: start; margin-top: var(--space-1); }

/* ==========================================================================
   NO-CROP MEDIA (Samar: never crop images) — the image is fully contained;
   a blurred copy of itself fills the frame behind it, so nothing is ever
   cut off and the card still reads as a full-bleed visual.
   ========================================================================== */

.media-fit { position: relative; overflow: hidden; }
.media-fit::before {
  content: ''; position: absolute; inset: -14%;
  background-image: var(--media);
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.12) brightness(.9);
}
.media-fit img { position: relative; width: 100%; height: 100%; object-fit: contain !important; }

/* case-study cards: monogram medallions + more pop */
.case-card { position: relative; overflow: hidden; }
.case-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 100% 0%, rgba(10, 230, 179, .10), transparent 60%);
}
.case-card__head { display: flex; align-items: center; gap: var(--space-4); }
.case-card__ava {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(10, 230, 179, .12); border: 1px solid rgba(10, 230, 179, .4);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--mint);
}
.case-card__who { display: grid; gap: 2px; }
.case-card__name { font-weight: 700; font-size: var(--text-sm); color: var(--ink-text); }
.case-card:hover { border-color: rgba(10, 230, 179, .5); }

/* real client photos on case cards; pagination buttons match links */
.case-card__photo {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; object-position: 50% 25%;
  border: 2px solid rgba(10, 230, 179, .45);
}
.pagination button {
  min-width: 42px; height: 42px; padding-inline: var(--space-3);
  display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: none; color: inherit;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pagination button:hover { color: var(--accent); border-color: var(--accent); }
.pagination button[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==========================================================================
   Team features — one designed section per member, alternating sides
   ========================================================================== */

.team-feature__grid { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 900px) {
  .team-feature__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 84px); }
  .team-feature--flip .team-feature__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .team-feature--flip .team-feature__media { order: 2; }
  .team-feature__media { position: sticky; top: 14vh; }
}
.team-feature__media { aspect-ratio: 4/5; border-radius: var(--radius-lg); max-width: 440px; width: 100%; }
.team-feature__quote {
  margin-top: var(--space-6);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--accent); max-width: 56ch;
}
.team-feature__paras { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.team-feature__paras p { color: var(--bone-muted); line-height: 1.7; max-width: 66ch; }
.team-feature__paras p:first-child { color: var(--bone-text); }

/* mission words: JS drives opacity/blur; base state is fully readable */
.mission-move__text .mw { display: inline; }

/* ---------------------------------------------------------------- case files
   Client stories as dossiers rather than cards: a tall uncropped portrait
   beside a full-measure quote and the numbers their own article reports.
   Alternating sides on wide screens; a single readable column on phones. */
.case-files__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.case-files__note {
  color: var(--muted); font-size: var(--text-sm); max-width: 46ch; margin: 0;
}
.case-files__list {
  margin-top: var(--space-12);
  display: grid; gap: clamp(28px, 4vw, 56px);
}
.case-file {
  display: grid; gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding-bottom: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.case-file:last-child { border-bottom: 0; padding-bottom: 0; }

.case-file__figure { position: relative; }
.case-file__portrait {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg, 18px); overflow: hidden;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.case-file__portrait--mono {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--pop); background: color-mix(in srgb, var(--pop) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--pop) 25%, transparent);
}
.case-file__index {
  color: var(--pop); letter-spacing: var(--track-mono);
  text-transform: uppercase; font-size: .6875rem; margin: 0;
}
.case-file__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.08;
  letter-spacing: -0.01em;      /* pinned: the tag is <h2> for heading order, this keeps the h3 look */
  margin: var(--space-3) 0 0; color: var(--text);
  padding-bottom: .12em; margin-bottom: -.12em;      /* never clip descenders */
}
.case-file__headline {
  margin: var(--space-3) 0 0; color: var(--muted);
  font-size: var(--text-sm);
}
.case-file__quote {
  margin: var(--space-6) 0 0; padding: 0 0 0 var(--space-6);
  border-left: 2px solid var(--mint);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.125rem, 1.55vw, 1.4rem); line-height: 1.45;
  color: var(--text); max-width: 54ch;           /* the fix: real measure */
}
.case-file__outcomes {
  margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}
.case-file__outcomes > div { min-width: 0; }
.case-file__outcomes dt {
  font-size: .625rem; letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.case-file__outcomes dd {
  margin: 6px 0 0; font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2; color: var(--pop);
}
.case-file__link {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: var(--space-8); font-size: var(--text-sm); font-weight: 600;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pop) 40%, transparent); padding-bottom: 2px;
}
.case-file__link span { transition: transform .25s var(--ease, ease); }
.case-file__link:hover { color: var(--pop); border-bottom-color: var(--pop); }
.case-file__link:hover span { transform: translateX(4px); }

@media (min-width: 860px) {
  /* the portrait column stays narrow on both sides: swap the template rather
     than only reordering, or the image lands in the wide column */
  .case-file { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .case-file:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .case-file:nth-child(even) .case-file__figure { order: 2; }
}
@media (max-width: 560px) {
  .case-file__outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-file__portrait { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------- case-study figure panels
   The imported case studies carried their data as designed panels; the import
   flattened them to loose text. These restore them: a stat grid, a row of
   qualities, a numbered list of principles, and chart captions. */
.prose .case-figure {
  margin: var(--space-12) 0;
  /* step just outside the reading measure so the data reads as a panel */
  margin-inline: clamp(-40px, -3vw, 0px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px);
  border: 1px solid color-mix(in srgb, var(--pop) 22%, transparent);
  border-radius: var(--radius-lg, 18px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pop) 7%, transparent), transparent);
}
.prose .case-figure__title {
  margin: 0 0 var(--space-6);
  font-size: .625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--pop);
}
.prose .case-figure__grid {
  display: grid; margin: 0;
  gap: clamp(18px, 2.2vw, 28px) clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1100px) {
  .prose .case-figure__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prose .case-figure__grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prose .case-figure__grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prose .case-figure__cell { min-width: 0; display: flex; flex-direction: column; }
/* reserve two label lines so every value sits on the same baseline */
.prose .case-figure__cell dt { min-height: 2.5em; }
.prose .case-figure__cell dt {
  margin: 0; font-family: var(--font-mono, monospace);
  font-size: .625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted);
}
.prose .case-figure__cell dd {
  margin: 6px 0 0; font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.15; color: var(--text);
  padding-bottom: .1em; margin-bottom: -.1em;
}
.prose .case-figure__note {
  margin: 4px 0 0; font-size: .75rem; line-height: 1.35; color: var(--muted);
}
.prose .case-tags {
  list-style: none; margin: var(--space-6) 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.prose .case-tags li {
  margin: 0; padding: .45em .9em; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pop) 35%, transparent); color: var(--pop);
  font-size: .75rem; font-weight: 600;
}
.prose .case-point {
  margin: var(--space-8) 0 var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--pop) 28%, transparent);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25;
  color: var(--text);
}
.prose .case-point + p { margin-top: 0; color: var(--muted); }
.prose .case-caption {
  margin: var(--space-4) 0 var(--space-8);
  font-size: .6875rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------- podcast finder
   Ways into 159 episodes: what people play most, then search, theme, year,
   guest and sort — all filtering one list in place. */
.finder__note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }

.start-grid {
  margin-top: var(--space-8);
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.start-card {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4);
  align-items: center; text-decoration: none;
  padding: var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--pop) 4%, transparent);
  transition: transform .25s ease, border-color .25s ease;
}
.start-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pop) 45%, transparent); }
.start-card__art img { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; display: block; }
.start-card__body { display: grid; gap: 4px; min-width: 0; }
.start-card__title {
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.start-card__plays { color: var(--pop); font-size: .625rem; letter-spacing: var(--track-mono); }

.finder__search {
  margin-top: var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  color: var(--muted);
}
.finder__search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; font-size: var(--text-sm); color: var(--text); min-width: 0;
}
.finder__search:focus-within { border-color: color-mix(in srgb, var(--pop) 55%, transparent); }

.finder__row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin-top: var(--space-6); flex-wrap: wrap;
}
.finder__row--end { align-items: center; }
.finder__label {
  flex: 0 0 auto; width: 52px; padding-top: 7px;
  font-size: .625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1; min-width: 0; }
.chip {
  appearance: none; cursor: pointer;
  padding: .42em .85em; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: .8125rem; font-weight: 600;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip span { opacity: .55; font-size: .75em; margin-left: .35em; }
.chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--pop) 45%, transparent); }
.chip.is-on {
  color: var(--pop); border-color: color-mix(in srgb, var(--pop) 65%, transparent);
  background: color-mix(in srgb, var(--pop) 10%, transparent);
}
.finder__count { flex: 0 0 auto; margin: 0; font-size: .6875rem; }
.finder__active {
  margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--muted);
}
.finder__empty {
  margin: var(--space-12) 0; text-align: center; color: var(--muted);
}
.finder__empty button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--pop); font-weight: 600; text-decoration: underline;
}

/* guest directory */
.guest-index { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guest-index > summary {
  cursor: pointer; list-style: none; padding: var(--space-6) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
}
.guest-index > summary::-webkit-details-marker { display: none; }
.guest-index > summary::after {
  content: '+'; font-family: var(--font-mono, monospace); color: var(--pop); font-size: 1.1rem;
}
.guest-index[open] > summary::after { content: '\2212'; }
.guest-index__list {
  padding-bottom: var(--space-8);
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.guest {
  appearance: none; cursor: pointer; text-align: left;
  border: 0; border-radius: 8px; background: transparent;
  padding: .5em .6em; font: inherit; font-size: .875rem; color: var(--text);
}
.guest span { color: var(--muted); font-size: .75em; margin-left: .4em; }
.guest:hover { background: color-mix(in srgb, var(--pop) 8%, transparent); color: var(--pop); }
.guest.is-on { background: color-mix(in srgb, var(--pop) 14%, transparent); color: var(--pop); font-weight: 700; }

/* theme tags on each row */
.ep-row__themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ep-row__themes span {
  font-family: var(--font-mono, monospace); font-size: .5625rem;
  letter-spacing: var(--track-mono); text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .28em .6em;
}

@media (max-width: 620px) {
  .finder__label { width: 100%; padding-top: 0; }
  .start-card { grid-template-columns: 72px minmax(0, 1fr); }
  .start-card__art img { width: 72px; height: 72px; }
}

/* ------------------------------------------------------- reading layout
   The originals put a numbered contents list beside the article; the port
   left a bare centre column. This restores the two-column reading page: a
   sticky contents rail, the text at a comfortable measure, and figures that
   are allowed to be wider than the words. */
.reading { display: block; }
.reading__body { max-width: var(--measure); }

@media (min-width: 1040px) {
  .reading--with-toc {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }
  .reading--with-toc .reading__body { max-width: 70ch; }
  .reading--footer { padding-left: calc(220px + clamp(32px, 5vw, 88px)); }
}

.toc {
  position: sticky; top: calc(var(--header-h, 76px) + 24px);
  max-height: calc(100vh - var(--header-h, 76px) - 60px);
  overflow: auto; overscroll-behavior: contain;
  padding-right: var(--space-2);
}
@media (max-width: 1039px) {
  .toc {
    position: static; max-height: none; margin-bottom: var(--space-12);
    padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius);
    background: color-mix(in srgb, var(--pop) 4%, transparent);
  }
}
.toc__title {
  margin: 0 0 var(--space-4); font-size: .625rem;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--pop);
}
.toc__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc__item { margin: 0; }
.toc__item a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-2);
  padding: 7px 0; text-decoration: none; color: var(--muted);
  font-size: .8125rem; line-height: 1.35;
  border-left: 2px solid transparent; padding-left: var(--space-3);
  transition: color .2s ease, border-color .2s ease;
}
.toc__item--sub a { padding-left: var(--space-6); font-size: .78125rem; }
.toc__num { font-size: .5625rem; letter-spacing: var(--track-mono); opacity: .6; padding-top: 3px; }
.toc__item a:hover { color: var(--text); border-left-color: color-mix(in srgb, var(--pop) 50%, transparent); }
.toc__item.is-current a { color: var(--pop); border-left-color: var(--pop); font-weight: 600; }
.toc__item.is-current .toc__num { opacity: 1; }

/* figures may breathe past the text measure on wide screens */
.prose img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); margin-block: var(--space-12);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
@media (min-width: 1040px) {
  .reading--with-toc .prose > img,
  .reading--with-toc .prose > p > img { width: calc(100% + 90px); max-width: none; }
}
.prose figure { margin: var(--space-12) 0; }
.prose figcaption {
  margin-top: var(--space-3); font-size: .8125rem; color: var(--muted); text-align: center;
}

/* video embeds from the originals */
.prose .embed {
  position: relative; margin: var(--space-12) 0;
  border-radius: var(--radius); overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
}
.prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.byline--guest { display: inline-flex; align-items: center; gap: var(--space-3); }
.byline--guest .byline__body { display: grid; gap: 2px; }
.byline--guest .byline__name { font-weight: 700; font-size: var(--text-sm); color: var(--ink-text); }
.byline--guest .byline__role {
  font-size: .625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--ink-muted);
}

/* ------------------------------------------------ case-study charts + video
   The originals drew these with Chart.js; here they are inline SVG baked into
   the content, so they are in the HTML, need no library, and scale cleanly. */
.prose .case-video {
  position: relative; margin: 0 0 var(--space-12);
  aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #000;
}
.prose .case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.prose .case-chart {
  margin: var(--space-8) 0 var(--space-12);
  margin-inline: clamp(-40px, -3vw, 0px);
  padding: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 20px) clamp(10px, 1.4vw, 16px);
  border: 1px solid color-mix(in srgb, var(--pop) 20%, transparent);
  border-radius: var(--radius-lg, 18px);
  background: color-mix(in srgb, var(--pop) 4%, transparent);
}
.cchart { display: block; width: 100%; height: auto; overflow: visible; }
.cchart__grid { stroke: color-mix(in srgb, var(--text) 12%, transparent); stroke-width: 1; }
.cchart__ytick,
.cchart__xtick,
.cchart__val {
  font-family: var(--font-mono, monospace);
  fill: var(--muted); font-size: 11px; letter-spacing: .04em;
}
.cchart__val { fill: var(--text); font-size: 12px; font-weight: 600; }

/* series colours: the brand mint, then a deeper teal for comparisons */
.cchart__line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cchart__line.cchart__s0 { stroke: var(--pop); }
.cchart__line.cchart__s1 { stroke: color-mix(in srgb, var(--text) 55%, var(--pop)); }
.cchart__area.cchart__s0 { fill: color-mix(in srgb, var(--pop) 14%, transparent); stroke: none; }
.cchart__area.cchart__s1 { fill: color-mix(in srgb, var(--text) 8%, transparent); stroke: none; }
.cchart__dot { stroke: var(--bg, #fff); stroke-width: 3; }
.cchart__dot.cchart__s0 { fill: var(--pop); }
.cchart__dot.cchart__s1 { fill: color-mix(in srgb, var(--text) 55%, var(--pop)); }
.cchart__bar.cchart__s0 { fill: var(--pop); }
.cchart__bar.cchart__s1 { fill: color-mix(in srgb, var(--text) 45%, var(--pop)); }

.cchart-key {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: var(--space-4) 0 0; padding-left: 8px;
}
.cchart-key__item {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono, monospace); font-size: .625rem;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted);
}
.cchart-key__item::before {
  content: ''; width: 12px; height: 3px; border-radius: 2px; background: currentColor;
}
.cchart-key__item.cchart__s0 { color: var(--pop); }
.cchart-key__item.cchart__s1 { color: color-mix(in srgb, var(--text) 55%, var(--pop)); }

.prose .case-chart figcaption {
  margin-top: var(--space-3); padding-left: 8px; text-align: left;
  font-family: var(--font-mono, monospace); font-size: .625rem;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted);
}

/* ---------------------------------------------- article hero, filled out
   The hero was a tall empty band. It now carries the standfirst, who wrote it,
   how long it takes to read, its topics and the article's own opening image. */
.page-hero__dek {
  margin: var(--space-6) 0 0; max-width: 58ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.5;
  color: color-mix(in srgb, var(--ink-text) 78%, transparent);
}
.page-hero__grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 940px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}
.page-hero__figure {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg, 18px); overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
@media (max-width: 939px) { .page-hero__figure { aspect-ratio: 16 / 9; } }

/* ------------------------------------------------------- contents rail v2
   No inner scrollbar: the list is compact, long headings clamp to two lines,
   and when a very long article would still overflow the viewport the rail
   stops being sticky and simply scrolls with the page. */
.toc { overflow: visible; max-height: none; }
.toc__item a { padding: 5px 0 5px var(--space-3); align-items: start; }
.toc__text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.toc--tall { position: static; max-height: none; }
.toc__item a::before { content: none; }

/* the section you are reading */
.toc__item.is-current a { color: var(--pop); border-left-color: var(--pop); font-weight: 600; }
.toc__item.is-current .toc__text { -webkit-line-clamp: 3; }

/* ------------------------------------------------------------ prose lists
   Default browser bullets read as an afterthought; these are set like the
   rest of the page. */
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li {
  position: relative; padding-left: var(--space-8); margin-top: var(--space-3);
}
.prose ul > li::before {
  content: ''; position: absolute; left: 6px; top: .62em;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--pop); opacity: .8;
}
.prose ol { list-style: none; padding-left: 0; counter-reset: proseitem; }
.prose ol > li {
  position: relative; padding-left: var(--space-8); margin-top: var(--space-3);
  counter-increment: proseitem;
}
.prose ol > li::before {
  content: counter(proseitem, decimal-leading-zero);
  position: absolute; left: 0; top: .15em;
  font-family: var(--font-mono, monospace); font-size: .625rem;
  letter-spacing: var(--track-mono); color: var(--pop);
}
.prose li + li { margin-top: var(--space-3); }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin-top: var(--space-3); }

/* --------------------------------------------------------------- related
   Every article and episode ends with somewhere to go next, chosen on what
   it genuinely shares with the rest of the library. */
.related { margin: var(--space-16) 0 var(--space-12); }
.related__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-8);
}
.related__note { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.related__grid {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.related__card {
  display: grid; gap: var(--space-4); text-decoration: none;
  padding: var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--line); background: transparent;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.related__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pop) 45%, transparent);
  background: color-mix(in srgb, var(--pop) 5%, transparent);
}
.related__art {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.related__body { display: grid; gap: 6px; }
.related__kind {
  font-size: .5625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--pop);
}
.related__title {
  font-family: var(--font-display); font-size: 1rem; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* an episode mentioned in an article is a link to that episode */
.prose .eplink {
  color: var(--pop); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pop) 40%, transparent);
  white-space: nowrap;
}
.prose .eplink:hover { border-bottom-color: var(--pop); }

/* ------------------------------------------------------------- post grid
   The archive as cards rather than a list of links: each one shows its own
   image, when it ran, how long it takes and who wrote it. */
.finder__head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.post-grid {
  display: grid; gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.post-card {
  display: grid; gap: var(--space-4); align-content: start;
  text-decoration: none; padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  transition: transform .25s ease;
}
.post-card:hover { transform: translateY(-3px); }
.post-card:hover .post-card__title { color: var(--pop); }
.post-card__art {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden;
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.post-card__body { display: grid; gap: 8px; }
.post-card__meta {
  font-size: .5625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--pop);
}
.post-card__title {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.22; color: var(--text); transition: color .2s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__dek {
  font-size: .875rem; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-card__author {
  font-size: .5625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- breadcrumbs */
.crumbs { margin: 0 0 var(--space-6); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono, monospace); font-size: .625rem;
  letter-spacing: var(--track-mono); text-transform: uppercase;
}
.crumbs li { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.crumbs li + li::before { content: '/'; opacity: .4; color: var(--ink-muted); }
.crumbs a { color: var(--mint); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] {
  color: var(--ink-muted);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------ actionable steps
   The import left these as bare browser checkboxes. They are the most useful
   part of an article, so they are set like it: a card, a mint tick that fills
   when you check it, and the line struck through once it is done. */
.prose .steps {
  list-style: none; margin: var(--space-8) 0; padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid color-mix(in srgb, var(--pop) 22%, transparent);
  border-radius: var(--radius-lg, 18px);
  background: color-mix(in srgb, var(--pop) 5%, transparent);
  display: grid; gap: var(--space-2);
}
.prose .steps__item { margin: 0; padding: 0; }
.prose .steps__item::before { content: none; }
.prose .steps__item label {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-4);
  align-items: start; cursor: pointer; padding: var(--space-3) var(--space-2);
  border-radius: 10px; transition: background-color .2s ease;
}
.prose .steps__item label:hover { background: color-mix(in srgb, var(--pop) 8%, transparent); }
.prose .steps__item input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.prose .steps__box {
  width: 20px; height: 20px; border-radius: 6px; margin-top: 2px;
  border: 1.5px solid color-mix(in srgb, var(--pop) 55%, transparent);
  display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.prose .steps__box::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid var(--bg, #fff); border-bottom: 2px solid var(--bg, #fff);
  transform: rotate(-45deg) scale(0); transform-origin: center;
  transition: transform .18s ease;
}
.prose .steps__item input:checked + .steps__box {
  background: var(--pop); border-color: var(--pop);
}
.prose .steps__item input:checked + .steps__box::after { transform: rotate(-45deg) scale(1); }
.prose .steps__item input:focus-visible + .steps__box {
  outline: 2px solid var(--pop); outline-offset: 3px;
}
.prose .steps__text { line-height: 1.5; transition: color .2s ease; }
.prose .steps__item input:checked ~ .steps__text {
  color: var(--muted); text-decoration: line-through;
}

/* a listing card with no image still needs to look deliberate */
.related__card:not(:has(.related__art)) .related__body,
.post-card:not(:has(.post-card__art)) .post-card__body { padding-top: var(--space-2); }

/* ------------------------------------------------------- Buzzsprout player
   The show's own player, so chapters, transcript and share come with it and
   plays register in the show's analytics. */
.bzplayer {
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--pop) 4%, transparent);
}
.bzplayer iframe { display: block; width: 100%; height: 200px; border: 0; }
@media (max-width: 620px) { .bzplayer iframe { height: 240px; } }
.plain-audio { width: 100%; }

/* ------------------------------------------- header condenses on scroll
   Past the first screen the header gets out of the way: the bar, the logo and
   the CTA fade out and only the menu pill remains, top right, a touch larger
   so it stays the obvious way back to navigation. */
.site-header[data-condensed="true"] {
  background: transparent; backdrop-filter: none; pointer-events: none;
}
.site-header[data-condensed="true"] .site-header__logo,
.site-header[data-condensed="true"] .site-header__actions .btn {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}
.site-header__logo,
.site-header__actions .btn {
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-header[data-condensed="true"] .menu-pill {
  pointer-events: auto;
  transform: scale(1.08);
  transform-origin: right center;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-color: color-mix(in srgb, var(--mint) 34%, transparent);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65);
}
.site-header[data-condensed="true"] .menu-pill:hover { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .site-header[data-condensed="true"] .menu-pill { transform: none; }
}

/* ---------------------------------------------------------------- contact */
.contact-grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.contact-card {
  display: grid; gap: var(--space-3); align-content: start;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 18px);
  text-decoration: none; background: transparent;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.contact-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pop) 45%, transparent);
  background: color-mix(in srgb, var(--pop) 5%, transparent);
}
.contact-card__label {
  font-size: .625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--pop);
}
.contact-card__value {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.2; color: var(--text); word-break: break-word;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.contact-card__note { font-size: .875rem; color: var(--muted); line-height: 1.5; }
.contact-card--cta {
  background: color-mix(in srgb, var(--pop) 9%, transparent);
  border-color: color-mix(in srgb, var(--pop) 40%, transparent);
}
.contact-social {
  margin-top: var(--space-12); display: grid; gap: var(--space-4);
}
.contact-news {
  display: grid; gap: clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line); border-radius: var(--radius-lg, 18px);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
/* Splits at 920, not 860: at 860 each column landed at ~338px, just under the
   width the form needs to keep its two fields side by side. */
@media (min-width: 920px) { .contact-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.contact-news__note { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-sm); }
.contact-news__form .footer-form__row { margin-top: 0; }

/* ----------------------------------------------------------- contact form
   A statement and a real form on the left, the direct ways to reach us in a
   solid card on the right. Fields are set like the rest of the site rather
   than left to the browser. */
.contact-layout { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 940px) {
  .contact-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.cform__title { margin: var(--space-4) 0 var(--space-8); }
/* Same trap as the newsletter row: the form sits in the wide column of a
   two-column layout, so a viewport query mis-sizes it. Between roughly 940
   and 1250px the column is under 620px and the name dropped above the email
   on what is plainly a desktop screen. The pair measures its own form now. */
.cform { container-type: inline-size; }
/* align-items: start so a field that grows cannot stretch or shift the field
   beside it — see the field-wrapper note below. */
.cform__grid { display: grid; gap: var(--space-6); align-items: start; }
@container (min-width: 440px) { .cform__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@supports not (container-type: inline-size) {
  @media (min-width: 620px) { .cform__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
}

/* A field holds exactly two things: a label, then its control.
   Password managers and form fillers append their own nodes inside the field
   they offer to fill — that is the small badge that appears in the first box.
   With plain auto-placement that node became a third grid item, added a row,
   and pushed the neighbouring control down ~18px, which is why the name and
   email looked misaligned on machines with such an extension and perfectly
   aligned on machines without one.
   Placing the label and the control in named rows pins them: anything a
   browser extension adds flows into a row of its own and cannot displace
   them. align-content keeps the pair at the top of the field. */
.cfield { display: grid; grid-template-rows: auto auto; align-content: start;
          gap: var(--space-3); margin-bottom: var(--space-6); }
.cfield > label { grid-row: 1; grid-column: 1; }
.cfield > input, .cfield > select, .cfield > textarea { grid-row: 2; grid-column: 1; }
.cfield label {
  font-family: var(--font-mono, monospace); font-size: .625rem;
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted);
}
.cfield input,
.cfield select,
.cfield textarea {
  width: 100%; font: inherit; font-size: var(--text-sm); color: var(--text);
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; transition: border-color .2s ease, background-color .2s ease;
}
.cfield textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.cfield select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.cfield input::placeholder, .cfield textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus {
  outline: 0; border-color: color-mix(in srgb, var(--pop) 60%, transparent);
  background: color-mix(in srgb, var(--pop) 5%, transparent);
}
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-4); }
.cform__note { margin: 0; font-size: .8125rem; color: var(--muted); max-width: 34ch; }

.contact-direct {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-lg, 18px);
  border: 1px solid color-mix(in srgb, var(--pop) 22%, transparent);
  background: color-mix(in srgb, var(--pop) 6%, transparent);
  display: grid; gap: var(--space-4); align-content: start;
}
.contact-direct__org {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--text);
}
.contact-direct__row {
  display: grid; gap: 4px; padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}
.contact-direct__row .mono {
  font-size: .5625rem; letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted);
}
.contact-direct__row a { color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--pop) 40%, transparent); justify-self: start; word-break: break-word; }
.contact-direct__row a:hover { color: var(--pop); }
.contact-direct__note { margin: var(--space-4) 0 0; font-size: .875rem; color: var(--muted); }
.contact-direct__social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }

/* ------------------------------------------- case-study panel extras
   Pieces the PDF case studies use that the recovered ones did not: the
   panel standfirst, the amber "Challenge" callout, and the dark card that
   closes a section. */
.prose .case-figure__lead {
  margin: 0 0 var(--space-6); color: var(--muted);
  font-size: var(--text-sm); line-height: 1.5; max-width: 52ch;
}
/* the standfirst sits under its heading, never on top of it: a negative top
   margin here was pulling it into the h2 */
.prose h2 + .case-lead { margin-top: var(--space-3); }
.prose .case-lead {
  margin: var(--space-3) 0 var(--space-8);
  color: var(--muted); font-size: var(--text-sm); line-height: 1.5; max-width: 56ch;
}
.prose .case-callout {
  margin: 0 0 var(--space-8); padding: var(--space-6);
  border-radius: 12px; border-left: 3px solid #d9a441;
  background: color-mix(in srgb, #d9a441 10%, transparent);
}
.prose .case-callout__title {
  margin: 0 0 var(--space-2); color: #a97612; font-weight: 700; font-size: var(--text-sm);
}
.prose .case-callout p:last-child { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--text); }
.prose .case-quotecard {
  margin: var(--space-8) 0; padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-lg, 18px);
  background: var(--ink); color: var(--ink-text);
}
.prose .case-quotecard__title {
  margin: 0 0 var(--space-3); color: var(--mint);
  font-size: .625rem; letter-spacing: var(--track-mono); text-transform: uppercase;
}
.prose .case-quotecard p:last-child {
  margin: 0; font-style: italic; line-height: 1.6; color: var(--ink-text);
}
.prose .case-disclaimer {
  margin-top: var(--space-16); padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: .75rem; line-height: 1.6; color: var(--muted);
}

/* ======================================================================
   HOMEPAGE v3 — 19 Aug 2026 rebuild to Andres's Loom feedback.
   Same tokens, same voices; new sections only.
   ====================================================================== */

/* --- Hero: helix replaces the founder plate --------------------------- */
.helix-wrap { position: relative; display: grid; place-items: center; min-height: 320px; }
.helix-wrap canvas { width: min(100%, 480px); height: auto; display: block; }

.hero-band {
  list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: var(--space-6) 0 0;
  border-top: 1px solid var(--ink-line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}
@media (min-width: 720px)  { .hero-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hero-band { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hero-band li { display: grid; gap: var(--space-2); align-content: start; }
.hero-band__big {
  font-family: var(--font-mono); letter-spacing: var(--track-mono);
  color: var(--mint); font-size: var(--text-lg); text-transform: uppercase;
}
.hero-band__small { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.4; }

/* --- Top-4 testimonials ------------------------------------------------ */
/* Four cards since 20 Aug (Bianca joined Jeffrey, Joe, Simon). The quotes are
   verbatim and very different in length, so four equal columns made tall,
   skinny, half-empty cards (Samar, 21 Aug screenshot). Fix is geometry, not
   copy: two rows of two, each row split 5/12 + 7/12 so the shorter quote
   (Jeffrey, Simon) sits in the narrower card and the longer one (Joe, Bianca)
   in the wider card. Every quote then lands at roughly 3 to 4 lines and the
   four cards come out near-equal in height. 1 col → 2×2 → 5/7 split. */
.t3-grid {
  margin-top: var(--space-12);
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .t3-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .t3-grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.t3-card {
  position: relative; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(160deg, rgba(6, 122, 96, 0.45), rgba(6, 122, 96, 0.07) 42%, rgba(6, 122, 96, 0.25)) border-box;
  padding: clamp(28px, 3vw, 40px);
  padding-top: clamp(52px, 4.5vw, 64px);
  display: flex; flex-direction: column; gap: var(--space-8);
  box-shadow: 0 26px 54px -40px rgba(12, 35, 42, 0.55);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.t3-card:hover { transform: translateY(-4px); box-shadow: 0 36px 64px -42px rgba(12, 35, 42, 0.6); }
.t3-card::before {
  content: '\201C'; position: absolute; top: 0.05em; left: clamp(22px, 2.4vw, 36px);
  font-family: var(--font-display); font-size: clamp(3.6rem, 4vw, 4.75rem);
  line-height: 1; color: var(--pop); opacity: 0.85; pointer-events: none;
}
.t3-quote { font-family: var(--font-display); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; margin: 0; max-width: 62ch; text-wrap: pretty; }
.t3-who { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.t3-who img {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 25%;
  border: 2px solid var(--bg); box-shadow: 0 0 0 2px rgba(6, 122, 96, 0.35);
}
.t3-who > span { display: grid; gap: 2px; }
.t3-name { font-weight: 700; }

/* --- Results — numbers with meaning, no reference bars.
   Premium tiles: hairline-bordered cards with a mint tick and a faint inner
   light, 3-across so the grid fills the canvas with no dead right side. --- */
.results-grid {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 980px) { .results-grid { grid-template-columns: repeat(3, 1fr); } }
.res-card {
  position: relative; display: grid; gap: var(--space-3); align-content: start;
  border: 1px solid var(--ink-line); border-radius: var(--radius-xl);
  padding: clamp(22px, 2.6vw, 36px);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 52%);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.res-card::before {
  content: ''; position: absolute; top: 0; left: clamp(22px, 2.6vw, 36px);
  width: 56px; height: 2px; background: var(--mint); border-radius: 0 0 2px 2px;
}
.res-card:hover { transform: translateY(-4px); border-color: rgba(10, 230, 179, 0.35); }
.res-value {
  font-family: var(--font-display); font-size: var(--numeral); line-height: 1;
  color: var(--mint); font-variant-numeric: tabular-nums;
}
.res-value sup { font-size: 0.4em; top: -0.9em; }
.res-title { font-weight: 700; font-size: var(--text-lg); }
.res-line { color: var(--ink-muted); font-size: var(--text-base); max-width: 34ch; }
.res-foot {
  margin-top: clamp(40px, 5vw, 64px); font-size: var(--text-xs);
  padding-top: var(--space-6); border-top: 1px solid var(--ink-line);
}

/* --- Protocol cards ----------------------------------------------------- */
.pcard-grid {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
/* Three doors since 22 Aug (Andres): 3-up on desktop. On tablet the first two
   share a row and the VIP card runs full-width underneath (its two-portrait
   plate needs the width). Phone stacks all three. */
@media (min-width: 1100px) {
  .pcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard-grid > .pcard:nth-child(3):last-child { grid-column: 1 / -1; }
}
/* The protocol card, rebuilt to the reference Andres liked (photo-led card,
   name over a soft gradient, big radius, outline ring): a full-width visual
   plate where the portrait melts into the card body, a floating glass badge,
   a gradient hairline ring around the whole card, and depth on hover. */
.pcard {
  position: relative; color: var(--ink-text);
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(165deg, rgba(10, 230, 179, 0.5), rgba(10, 230, 179, 0.08) 36%, rgba(255, 255, 255, 0.07) 78%, rgba(10, 230, 179, 0.3)) border-box;
  box-shadow: 0 32px 64px -40px rgba(0, 0, 0, 0.65);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 48px 84px -44px rgba(0, 0, 0, 0.75); }
.pcard--vip {
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    linear-gradient(165deg, rgba(10, 230, 179, 0.75), rgba(10, 230, 179, 0.14) 36%, rgba(255, 255, 255, 0.09) 78%, rgba(10, 230, 179, 0.45)) border-box;
}
.pcard__visual {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(10, 230, 179, 0.16), transparent 58%),
    var(--ink-2);
  display: grid; place-items: end center;
}
.pcard--vip .pcard__visual {
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(10, 230, 179, 0.22), transparent 58%),
    var(--ink);
}
.pcard__visual img {
  height: 94%; width: auto; max-width: 88%; object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.5));
}
.pcard__visual::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, transparent, var(--ink)); pointer-events: none;
}
.pcard--vip .pcard__visual::after { background: linear-gradient(180deg, transparent, var(--ink-2)); }
.pcard__badge {
  position: absolute; z-index: 2; top: 20px; left: 20px; margin: 0;
  padding: 0.6em 1.1em; border-radius: 999px;
  border: 1px solid rgba(10, 230, 179, 0.35);
  background: rgba(2, 20, 26, 0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--mint); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-mono);
}
.pcard__who {
  position: absolute; z-index: 2; bottom: var(--space-4); left: 20px; margin: 0;
  color: rgba(255, 255, 255, 0.78); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--track-mono);
}
.pcard__body {
  display: flex; flex-direction: column; gap: var(--space-6); flex: 1;
  padding: clamp(24px, 3vw, 40px);
}
.pcard__title { font-family: var(--font-display); font-size: var(--display-3); line-height: 1.08; }
.pcard__promise { color: var(--ink-muted); font-size: var(--text-lg); line-height: 1.5; }
.pcard__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.pcard__points li { position: relative; padding-left: 28px; color: var(--ink-text); line-height: 1.5; }
.pcard__points li::before {
  content: ''; position: absolute; left: 0; top: 0.42em; width: 14px; height: 8px;
  border-left: 2px solid var(--mint); border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}
.pcard__foot {
  margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--ink-line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.pcard__price { color: var(--mint); letter-spacing: var(--track-mono); text-transform: uppercase; font-size: var(--text-sm); }
/* Two portraits in one plate ("a picture of both of us side by side").
   Andres, portal 23 Aug: "Make our images same size beside each other" — the
   -duo assets are re-framed to identical canvases (figure full-height, bottom
   flush, centered), so both render equal with no per-image compensation.
   Swap in a real joint photo as a single 'img' and none of this applies. */
.pcard__visual--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
.pcard__visual--duo img { max-width: 100%; height: 80%; } /* both figures fill their canvas now, so 80% keeps heads clear of the badge */
.pcard__visual--duo img:first-of-type { justify-self: end; margin-right: -6%; }
.pcard__visual--duo img:last-of-type  { justify-self: start; margin-left: -6%; }

/* --- Case dossiers ------------------------------------------------------ */
/* Case dossiers as framed panels: bone card, hairline ring, offset echo frame
   behind the photo, stat chips instead of loose numbers. */
.dossier {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 56px);
  box-shadow: 0 30px 62px -48px rgba(12, 35, 42, 0.5);
  display: grid; gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 860px) {
  .dossier { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .dossier--flip .dossier__photo { order: 2; }
}
.dossier__photo { position: relative; }
.dossier__photo::before {
  content: ''; position: absolute; inset: 0; transform: translate(16px, 16px);
  border: 1px solid rgba(6, 122, 96, 0.3); border-radius: var(--radius-lg);
}
.dossier__photo img {
  position: relative; width: 100%; height: auto; display: block; object-fit: cover;
  border-radius: var(--radius-lg);
}
.dossier__quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.3; margin: 0; }
.dossier__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; border-top: 0;
}
.dossier__stats > div {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; background: var(--bone-2);
}
.dossier__stats dt { font-size: var(--text-2xl); color: var(--pop); font-variant-numeric: tabular-nums; }
.dossier__stats dd { margin: var(--space-1) 0 0; }

/* --- Homepage case cards — the proof section, rebuilt (2026-08-20).
   Split editorial header; each client is a dark, photo-led case card on the
   bone sheet — same family as the protocol cards: gradient hairline ring,
   portrait melting into the body, mint stat chips, arrow link. ------------ */
.cases-head { display: grid; gap: var(--space-8); align-items: end; }
@media (min-width: 980px) {
  .cases-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 88px); }
  .cases-head__aside { padding-bottom: 8px; }
}
.cases-head__aside { display: grid; gap: var(--space-6); justify-items: start; }
.arrow-link {
  color: var(--pop); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-mono); text-decoration: none;
  border-bottom: 1px solid rgba(6, 122, 96, 0.4); padding-bottom: 4px;
  transition: border-color .3s var(--ease);
}
.arrow-link::after { content: ' \2192'; }
.arrow-link:hover { border-color: var(--pop); }

.case-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; gap: clamp(20px, 2.5vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: stretch;
}
/* Data-led case card (Samar: no big faces): a small ringed avatar identifies
   the client; the card leads with ONE big mint metric, then the quote, then
   the remaining numbers as chips. The measurement IS the design. */
.ccard {
  display: flex; flex-direction: column; gap: var(--space-6);
  color: var(--ink-text);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 2.8vw, 40px);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    linear-gradient(165deg, rgba(10, 230, 179, 0.45), rgba(10, 230, 179, 0.06) 38%, rgba(255, 255, 255, 0.06) 80%, rgba(10, 230, 179, 0.25)) border-box;
  box-shadow: 0 32px 64px -42px rgba(12, 35, 42, 0.6);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  position: relative; overflow: hidden;
}
.ccard::before {
  content: ''; position: absolute; top: -40%; right: -25%; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(10, 230, 179, 0.09), transparent);
  pointer-events: none;
}
.ccard:hover { transform: translateY(-6px); box-shadow: 0 46px 80px -46px rgba(12, 35, 42, 0.65); }
.ccard__id { display: flex; align-items: center; gap: var(--space-4); }
.ccard__id img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 28%;
  border: 2px solid var(--ink); box-shadow: 0 0 0 2px rgba(10, 230, 179, 0.4);
}
.ccard__id > span { display: grid; gap: 2px; }
.ccard__id .meta { color: var(--ink-muted); }
.ccard__big { margin: 0; display: grid; gap: var(--space-2); }
.ccard__num {
  font-family: var(--font-display); color: var(--mint); line-height: 0.95;
  font-size: clamp(3rem, 4.5vw, 4.5rem); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ccard__lbl {
  color: var(--ink-muted); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-mono); font-family: var(--font-mono);
}
.ccard__quote {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45;
}
.ccard__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ccard__chip {
  border: 1px solid var(--ink-line); border-radius: 999px;
  padding: 0.55em 1.1em; font-size: var(--text-xs);
  color: var(--ink-muted); letter-spacing: var(--track-mono); text-transform: uppercase;
}
.ccard__chip b { color: var(--mint); font-weight: 500; }
.ccard__link {
  margin-top: auto; padding-top: var(--space-6); border-top: 1px solid var(--ink-line);
  color: var(--mint); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-mono); text-decoration: none;
}
.ccard__link::after { content: ' \2192'; }
.ccard__link:hover { color: var(--ink-text); }

/* --- Roadmap additions --------------------------------------------------- */
.plan-step__body { margin-top: var(--space-2); color: var(--ink-muted); max-width: 46ch; line-height: 1.55; }

/* --- Comparison table ----------------------------------------------------- */
.cmp-wrap {
  margin-top: clamp(48px, 6vw, 80px);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--text-sm); }
.cmp th, .cmp td { padding: var(--space-4) var(--space-4); text-align: center; border-top: 1px solid var(--line); }
.cmp thead th { border-top: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cmp__feature { text-align: left !important; font-weight: 600; color: var(--text); min-width: 220px; position: sticky; left: 0; background: var(--surface); }
.cmp thead .cmp__feature { background: var(--surface); }
.cmp .cmp__kyp { background: var(--ink); }
.cmp thead .cmp__kyp { color: var(--mint); }
.cmp-mark { display: inline-block; width: 16px; height: 16px; position: relative; }
.cmp-yes::before {
  content: ''; position: absolute; inset: 2px 0 auto 0; height: 8px; width: 14px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.cmp__kyp .cmp-yes::before { border-color: var(--mint); }
.cmp-no::before, .cmp-no::after {
  content: ''; position: absolute; left: 7px; top: 1px; width: 2px; height: 14px;
  background: rgba(93, 107, 103, 0.55);
}
.cmp-no::before { transform: rotate(45deg); }
.cmp-no::after  { transform: rotate(-45deg); }

/* Outcome strip under the table — Andres 20 Aug: his clients' struggles,
   stated as promises. Chips beside the table, not rows in it, so the
   table's honest cells stay honest. */
.cmp-outcomes { margin-top: clamp(32px, 4vw, 56px); text-align: center; }
.cmp-outcomes__head {
  font-size: var(--text-xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--muted);
  margin-inline: auto; /* a global p max-width shrinks its box — recenter it */
}
.cmp-outcomes__list {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
}
.cmp-outcomes__list li {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: var(--text-sm); color: var(--text);
}
.cmp-outcomes__list li::before {
  content: ''; flex: none; width: 14px; height: 8px; margin-top: -3px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- Limited promises ------------------------------------------------------ */
.ltd-promises { display: grid; gap: var(--space-8); align-content: center; }
.ltd-promise { border-left: 1px solid var(--ink-line); padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.ltd-promise__t { font-family: var(--font-display); font-size: var(--text-2xl); }
.ltd-promise__b { color: var(--ink-muted); max-width: 40ch; }

/* --- Measured closer -------------------------------------------------------- */
/* Closer attribution: a centered lockup — ringed round portrait above the
   name, everything on one axis with the quote and the CTA. */
/* Quote attribution — the closer's line is Roosevelt's, not the founder's
   (Andres 20 Aug: "that's not my quote"), so it is named. */
.measured__by {
  font-size: var(--text-xs); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--mint);
  margin-top: calc(-1 * var(--space-4));
}
.measured__who { display: grid; justify-items: center; gap: var(--space-4); margin: var(--space-2) 0 0; text-align: center; }
.measured__who img {
  width: 76px; height: 76px; object-fit: cover; object-position: 50% 15%;
  border-radius: 50%; border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px rgba(10, 230, 179, 0.4);
}
.measured__who figcaption { display: grid; gap: 3px; justify-items: center; }
/* Manrope ligates "(c)" into "©" — the founder's real credential is "MSc(c)". */
.measured__who .t3-name { font-variant-ligatures: none; font-feature-settings: 'calt' 0, 'liga' 0; }

/* --- Testimonials scrapbook wall (/testimonials/) ----------------------- */
.wall { columns: 1; column-gap: var(--space-6); }
@media (min-width: 700px)  { .wall { columns: 2; } }
@media (min-width: 1080px) { .wall { columns: 3; } }
.wall-card {
  break-inside: avoid; margin: 0 0 var(--space-6);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: var(--space-6);
  box-shadow: 0 18px 40px -30px rgba(12, 35, 42, 0.35);
}
.wall-card--shot { padding: var(--space-2); }
.wall-card--shot img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius-lg) - 4px); }
/* --- Third-party reviews (Trustpilot + Google), self-built --------------- */
.rev-band { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(20px, 2.5vw, 36px); }
.rev-scores { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rev-score {
  display: grid; gap: var(--space-4); justify-items: start; align-content: start;
  border: 1px solid transparent; border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(160deg, rgba(6, 122, 96, 0.4), rgba(6, 122, 96, 0.06) 45%, rgba(6, 122, 96, 0.22)) border-box;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 24px 50px -40px rgba(12, 35, 42, 0.5);
}
.tp-lockup, .g-lockup { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-lg); }
.tp-lockup b, .g-lockup b { font-weight: 700; letter-spacing: -0.01em; }
.tp-lockup .tp-star, .g-mark { width: 22px; height: 22px; }
.tp-stars, .g-stars { display: inline-flex; gap: 3px; }
.tp-stars .tp-star { width: clamp(24px, 2.2vw, 30px); height: clamp(24px, 2.2vw, 30px); }
.g-star { width: clamp(22px, 2vw, 26px); height: clamp(22px, 2vw, 26px); }
.rev-score__line { margin: 0; color: var(--muted); font-size: var(--text-base); }
.rev-score__ctas { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-2); }
.btn--sm { padding: 0.7em 1.3em; font-size: var(--text-xs); }
.rev-grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
}
.rev-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--bg); padding: clamp(22px, 2.6vw, 32px);
  text-decoration: none; color: inherit;
  box-shadow: 0 18px 40px -34px rgba(12, 35, 42, 0.4);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.rev-card:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -36px rgba(12, 35, 42, 0.5); }
.rev-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.rev-card__top .tp-stars .tp-star, .rev-card__top .g-star { width: 20px; height: 20px; }
.rev-card__top .tp-lockup, .rev-card__top .g-lockup { font-size: var(--text-sm); opacity: 0.85; }
.rev-card__top .tp-lockup .tp-star, .rev-card__top .g-mark { width: 16px; height: 16px; }
.rev-card__title { font-weight: 700; }
.rev-card__body { color: var(--muted); line-height: 1.6; font-size: var(--text-sm); }
.rev-card__who { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
/* Long reviews get visually clamped — the full text is one click away on the
   platform itself. Collapsed cards sit behind the Load-more button. */
.rev-card__body {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-grid[data-collapsed] .rev-card--more { display: none; }
html:not(.js) .rev-more { display: none; }

/* Footer badges — dark world */
.footer-reviews { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.rev-badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--ink-line); border-radius: 999px;
  padding: 10px 18px; text-decoration: none; color: var(--ink-muted);
  font-size: var(--text-xs); letter-spacing: var(--track-mono); text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.rev-badge:hover { border-color: rgba(10, 230, 179, 0.4); color: var(--ink-text); }
.rev-badge .tp-star, .rev-badge .g-mark { width: 16px; height: 16px; }
.rev-badge b { color: var(--ink-text); font-weight: 600; }

/* Closing panel — a designed hand-off instead of a bare line + button. */
.closing-panel {
  margin-top: var(--space-20); text-align: center;
  border: 1px solid transparent; border-radius: var(--radius-xl);
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(160deg, rgba(6, 122, 96, 0.4), rgba(6, 122, 96, 0.06) 45%, rgba(6, 122, 96, 0.25)) border-box;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  display: grid; justify-items: center; gap: var(--space-6);
  box-shadow: 0 28px 56px -44px rgba(12, 35, 42, 0.5);
}
.closing-panel .display { max-width: 24ch; }

.wall-card--photo { padding: var(--space-2); gap: var(--space-3); }
.wall-card--photo img { width: 100%; height: auto; display: block; border-radius: calc(var(--radius-lg) - 4px); }
.wall-card--photo figcaption { padding: 0 var(--space-3) var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.wall-quote { font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.45; margin: 0; }
.wall-card--long .wall-quote { font-size: var(--text-base); font-family: var(--font-body); color: var(--muted); }