/* Uptrend Motion — design tokens and styles (v2)
   One rule runs through the system: the signal colour marks a human decision. */

/* ---------- Tokens ---------- */
:root {
  --bg: #f4f5f7;
  --bg-raise: #ebedf1;
  --fg: #0f1115;
  --fg-2: #454b55;
  --fg-3: #626977;
  --line: rgb(15 17 21 / 0.13);
  --line-strong: rgb(15 17 21 / 0.38);
  --accent: #2a55d9;
  --accent-ink: #ffffff;
  --fg-rgb: 15, 17, 21;
  --accent-rgb: 42, 85, 217;
  --sheen: rgb(255 255 255 / 0.7);

  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --step-3: clamp(2rem, 1.35rem + 2.4vw, 3.375rem);
  --step-4: clamp(2.375rem, 1.3rem + 3.8vw, 4.5rem);

  --r-lg: 28px;
  --r-md: 14px;
  --r-sm: 8px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(5rem, 11vw, 10.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --bg-raise: #171a20; --fg: #eceef2; --fg-2: #a9afba; --fg-3: #7f8794;
    --line: rgb(236 238 242 / 0.12); --line-strong: rgb(236 238 242 / 0.36);
    --accent: #6a93f5; --accent-ink: #0b0d12; --fg-rgb: 236, 238, 242; --accent-rgb: 106, 147, 245;
    --sheen: rgb(255 255 255 / 0.06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --bg-raise: #171a20; --fg: #eceef2; --fg-2: #a9afba; --fg-3: #7f8794;
  --line: rgb(236 238 242 / 0.12); --line-strong: rgb(236 238 242 / 0.36);
  --accent: #6a93f5; --accent-ink: #0b0d12; --fg-rgb: 236, 238, 242; --accent-rgb: 106, 147, 245;
  --sheen: rgb(255 255 255 / 0.06);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg-2);
  font-family: var(--sans); font-size: var(--step-0); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* Film grain lives on one fixed layer so it never repaints with scroll. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.055; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1:focus { outline: none; }

.hd { font-family: var(--sans); font-weight: 350; letter-spacing: -0.045em; color: var(--fg); }
.h-display { font-size: var(--step-4); line-height: 1.02; }
.h-page { font-size: var(--step-3); line-height: 1.06; max-width: 20ch; }
.h-section { font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.04em; }
.h-item { font-size: var(--step-1); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--fg); }
.statement { font-size: var(--step-3); line-height: 1.1; font-weight: 300; letter-spacing: -0.045em; color: var(--fg); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; color: var(--fg-2); letter-spacing: -0.01em; }
.small { font-size: var(--step--1); line-height: 1.5; color: var(--fg-3); }
.mono { font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.measure { max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; }

/* Two voices in one family: the person states it, the machine answers quietly. */
.duet > span { display: block; }
.duet .human { color: var(--fg); font-weight: 400; }
.duet .machine { color: var(--fg-3); font-weight: 300; }

.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--fg); color: var(--bg); padding: 0.75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Motion primitives ---------- */
[data-r] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease) var(--d, 0ms), transform 0.9s var(--ease) var(--d, 0ms); }
[data-r].is-in { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.05em 0.16em 0; margin: 0 -0.05em -0.16em 0; }
.w > i { display: inline-block; font-style: normal; transform: translateY(112%); transition: transform 1.05s var(--ease) calc(var(--i) * 40ms + var(--d, 0ms)); }
.is-in .w > i, .is-in.w > i { transform: none; }

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 50px; padding: 0 1.6rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 1rem; letter-spacing: -0.015em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.5s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(0.97) !important; transition-duration: 0.1s; }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn--primary::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.55; transition: transform 0.5s var(--ease), opacity 0.35s; }
.btn--primary:hover::after { transform: scale(1.5); opacity: 1; }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn--ghost:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.link { color: var(--fg); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 0.15em; transition: background-size 0.5s var(--ease); }
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 40; border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.nav.is-solid { background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--fg); font-weight: 500; letter-spacing: -0.03em; font-size: 1.0625rem; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand:hover svg path:last-of-type { stroke-dashoffset: 0; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav__links a:not(.btn) { text-decoration: none; color: var(--fg-2); font-size: 0.9375rem; padding: 0.5rem 0; position: relative; transition: color 0.3s var(--ease); }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { color: var(--fg); }
.nav__links a:not(.btn):hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links .btn { min-height: 40px; padding: 0 1.125rem; font-size: 0.9375rem; }
.nav__toggle { display: none; background: none; border: 0; padding: 0; width: 48px; height: 48px; margin-right: -12px; cursor: pointer; color: var(--fg); }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px auto; transition: transform 0.4s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 35; background: var(--bg); padding: 104px var(--gutter) 2rem; display: flex; flex-direction: column; justify-content: space-between; visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s; overflow-y: auto; }
.menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu a.menu__link { display: block; font-weight: 300; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.2; letter-spacing: -0.045em; color: var(--fg); text-decoration: none; padding: 0.25rem 0; opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 55ms + 80ms); }
.menu.is-open a.menu__link { opacity: 1; transform: none; }
.menu__foot { display: grid; gap: 0.75rem; justify-items: start; padding-top: 2rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; padding-top: 72px; isolation: isolate; }
.hero__field { position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0.14) 0%, rgb(0 0 0 / 0.5) 38%, #000 62%), linear-gradient(to bottom, transparent 40px, #000 150px);
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0.14) 0%, rgb(0 0 0 / 0.5) 38%, #000 62%), linear-gradient(to bottom, transparent 40px, #000 150px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero__field canvas { width: 100%; height: 100%; }
.hero__body { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2rem, 5vh, 4.5rem) clamp(1.5rem, 4vh, 3rem); }
.hero__body .h-display { max-width: 22ch; }
@media (min-width: 1024px) { .hero__body .h-display > span { white-space: nowrap; } }
.hero__body .lede { margin-top: clamp(1.5rem, 3vh, 2.25rem); max-width: 46ch; }
.hero__body .actions { margin-top: clamp(1.75rem, 3.5vh, 2.5rem); }

/* ---------- The balance rail ---------- */
.rail { border-top: 1px solid var(--line); padding-block: 1.25rem clamp(1.5rem, 4vh, 2.5rem); background: linear-gradient(to top, var(--bg) 78%, transparent); }
.rail__ends { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9375rem; color: var(--fg); }
.rail__track { position: relative; height: 44px; margin-top: 0.25rem; }
.rail__track::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 9px; transform: translateY(-50%); background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(5% - 0.05px)); opacity: 0.7; }
.rail__track::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: var(--line-strong); }
.rail__pulse { position: absolute; top: 50%; left: calc(14px + (100% - 28px) * var(--v, 0.5)); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1px solid var(--accent); pointer-events: none; animation: pulse 2.4s var(--ease) infinite; }
.rail.is-touched .rail__pulse { display: none; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.rail input[type="range"] { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.rail input[type="range"]:active { cursor: grabbing; }
.rail input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.rail input[type="range"]::-moz-range-track { height: 44px; background: transparent; }
.rail input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; border: 1px solid var(--fg); background: var(--accent); box-shadow: inset 0 0 0 8px var(--bg); transition: transform 0.4s var(--spring); }
.rail input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--fg); background: var(--accent); box-shadow: inset 0 0 0 8px var(--bg); }
.rail input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.18); }
.rail input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.94); }
.rail input[type="range"]:focus-visible { outline: none; }
.rail input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 4px; }
.rail input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 4px; }
.rail__read { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0.5rem 2rem; align-items: baseline; margin-top: 0.75rem; min-height: 5.5rem; }
.rail__state { font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.04em; }
.rail__state .ratio { display: block; margin-top: 0.5rem; }
.rail__text { max-width: 58ch; color: var(--fg-2); }
.swap { animation: swap 0.6s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.meter { position: relative; height: 28px; overflow: hidden; }
.meter::before { content: ""; position: absolute; inset: 50% 8px auto 8px; height: 9px; transform: translateY(-50%); background: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px calc(5% - 0.05px)); opacity: 0.6; }
.meter::after { content: ""; position: absolute; inset: 50% 8px auto 8px; height: 1px; background: var(--line-strong); }
.meter__pos { position: absolute; inset: 0 8px; transform: translateX(calc(var(--p) * 1%)); transition: transform 1.5s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 150ms); z-index: 1; }
.meter__pos::before { content: ""; position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--fg); border: 3px solid var(--bg); }
.meter.is-human .meter__pos::before { background: var(--accent); }
.js-reveal:not(.is-in) .meter__pos { transform: translateX(50%); }

/* ---------- Media ---------- */
.media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0f1115; border: 1px solid var(--line); clip-path: inset(7% 5% 7% 5% round var(--r-lg)); transition: clip-path 1.4s var(--ease); }
.media.is-in { clip-path: inset(0 round var(--r-lg)); }
.media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.8s var(--ease); }
.media.is-in img { transform: scale(1.02); }
.media--wide { aspect-ratio: 16 / 10; width: 100%; }
.media--band { aspect-ratio: 2000 / 760; }
.media--43 { aspect-ratio: 4 / 3; }
.media__tag { position: absolute; left: 1.1rem; bottom: 1rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgb(15 17 21 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgb(236 238 242 / 0.16); color: #d6dae2; }
@supports (animation-timeline: view()) {
  .media.is-in img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes drift { from { transform: scale(1.07) translateY(-2.5%); } to { transform: scale(1.07) translateY(2.5%); } }
}
.caption { margin-top: 0.9rem; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.peek { visibility: hidden; position: fixed; left: 0; top: 0; z-index: 30; width: 380px; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; pointer-events: none; opacity: 0; background: #0f1115; border: 1px solid rgb(236 238 242 / 0.14); box-shadow: 0 40px 80px -30px rgb(5 8 16 / 0.6); transition: opacity 0.45s var(--ease); will-change: transform; }
.peek.is-on { opacity: 1; visibility: visible; }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 0.5s var(--ease), transform 0.9s var(--ease); }
.peek img.is-on { opacity: 1; transform: none; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1.25rem, 2.6vw, 2.25rem); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: inline-flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-right: clamp(1.5rem, 3vw, 3rem); font-size: var(--step-3); font-weight: 300; letter-spacing: -0.045em; line-height: 1.1; white-space: nowrap; color: var(--fg-3); }
.marquee__track span b { font-weight: 300; color: var(--fg); }
.marquee__track span::after { content: ""; width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Thesis ---------- */
.thesis__statement { max-width: 22ch; }
.thesis__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gutter); margin-top: clamp(3rem, 7vw, 6rem); }
.thesis__wrong { grid-column: 4 / span 4; }
.thesis__wrong + .thesis__wrong { grid-column: 8 / span 4; }
.thesis__wrong h3, .thesis__right h3 { margin-bottom: 0.75rem; }
.thesis__wrong h3 { display: inline-block; position: relative; }
.thesis__wrong h3::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: 1px; background: var(--fg-2); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease) 0.7s; }
.thesis__wrong.is-in h3::after { transform: scaleX(1); }
.thesis__right { grid-column: 4 / span 8; border-top: 1px solid var(--line); padding-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem var(--gutter); }
.thesis__right h3 { font-size: var(--step-2); display: flex; align-items: baseline; gap: 0.75rem; }
.thesis__right p { font-size: var(--step-1); line-height: 1.5; color: var(--fg); max-width: 46ch; letter-spacing: -0.01em; }
.thesis__media { margin-top: clamp(3.5rem, 8vw, 7rem); }
.dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-0.12em); position: relative; }
.dot--live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); animation: pulse 2.4s var(--ease) infinite; }

/* ---------- Ledger ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); }
.split__aside { grid-column: 1 / span 4; align-self: start; position: sticky; top: 104px; }
.split__aside p { margin-top: 1.25rem; max-width: 36ch; }
.split__aside .media { margin-top: 2rem; }
.split__main { grid-column: 6 / span 7; }
.ledger__head { display: flex; justify-content: space-between; padding-left: 46%; margin-bottom: 0.5rem; }
.ledger__row { display: grid; grid-template-columns: 46% 1fr; align-items: center; border-top: 1px solid var(--line); padding-block: 0.8rem; transition: background-color 0.4s var(--ease); }
.ledger__row:last-child { border-bottom: 1px solid var(--line); }
.ledger__row:hover { background: var(--bg-raise); }
.ledger__task { color: var(--fg); padding-right: 1.5rem; line-height: 1.35; transition: transform 0.5s var(--ease); }
.ledger__row:hover .ledger__task { transform: translateX(0.6rem); }
.key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.25rem; }
.key span { display: inline-flex; align-items: center; gap: 0.5rem; }
.key i { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); }
.key i.h { background: var(--accent); }

/* ---------- Bento: a hybrid day, running ---------- */
.bento__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gutter); margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.bento__head h2 { grid-column: 1 / span 7; }
.bento__head p { grid-column: 9 / span 4; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.75rem 1.5rem; }
.bt { grid-column: span 6; min-width: 0; }
.bt--5 { grid-column: span 5; } .bt--7 { grid-column: span 7; } .bt--4 { grid-column: span 4; } .bt--8 { grid-column: span 8; } .bt--12 { grid-column: 1 / -1; }
.bt__card { position: relative; height: 320px; border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--sheen), 0 30px 60px -40px rgba(var(--fg-rgb), 0.25); padding: 1.5rem; overflow: hidden; }
.bt--12 .bt__card { height: auto; padding: 1.25rem 0; }
.bt--4 .bt__card, .bt--8 .bt__card { height: 272px; }
.bt__label { padding: 1.1rem 0.4rem 0; }
.bt__label p { margin-top: 0.3rem; max-width: 46ch; font-size: 0.9375rem; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.65rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg-2); white-space: nowrap; flex: none; }
.chip.is-human { border-color: var(--accent); color: var(--fg); }
.chip.is-human::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.q { display: grid; gap: 0.5rem; }
.q__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.9rem; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line); color: var(--fg); font-size: 0.9rem; line-height: 1.3; will-change: transform; }
.q__item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmd__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.95rem 1.1rem; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-strong); color: var(--fg); min-height: 58px; }
.cmd__bar svg { flex: none; width: 18px; height: 18px; color: var(--fg-3); }
.cmd__text { font-family: var(--mono); font-size: 0.875rem; line-height: 1.4; }
.cmd__text::after { content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: -0.18em; background: var(--accent); animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cmd__out { margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.cmd__line { display: flex; align-items: baseline; gap: 0.7rem; color: var(--fg); font-size: 0.9375rem; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 140ms); }
.cmd__out.is-done .cmd__line { opacity: 1; transform: none; }
.cmd__skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 20%, var(--line-strong) 40%, var(--line) 60%) 0 0 / 300% 100%; animation: shimmer 1.3s linear infinite; display: none; }
.cmd__out.is-busy .cmd__skel { display: block; } .cmd__out.is-busy .cmd__line { display: none; }
@keyframes shimmer { to { background-position: -150% 0; } }

.gate { display: grid; gap: 0.35rem; align-content: start; height: 100%; padding-top: 2.6rem; }
.gate__amt { font-size: var(--step-3); font-weight: 300; letter-spacing: -0.045em; color: var(--fg); line-height: 1; margin-top: 0.5rem; }
.gate__wait { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; color: var(--fg); font-size: 0.9375rem; }
.toast { position: absolute; right: 1.1rem; top: 1.1rem; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 0.8125rem; font-weight: 500; transform: translateY(-160%) scale(0.9); opacity: 0; transition: transform 0.7s var(--spring), opacity 0.4s var(--ease); }
.toast.is-on { transform: none; opacity: 1; }
.toast svg { width: 14px; height: 14px; }

.cite { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-2); max-width: 56ch; }
.cite mark { color: var(--fg); background: linear-gradient(rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.28)) 0 0 / 0% 100% no-repeat; padding: 0.05em 0.2em; border-radius: 4px; transition: background-size 1.1s var(--ease); }
.cite.is-on mark { background-size: 100% 100%; }
.cite__who { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.cite__chip { position: absolute; right: 1.5rem; bottom: 1.5rem; opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease) 0.9s, transform 0.8s var(--spring) 0.9s; background: var(--bg); }
.cite.is-on ~ .cite__chip { opacity: 1; transform: none; }

.stream { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.stream > div { display: flex; align-items: baseline; gap: 0.7rem; padding: 0 2rem; border-right: 1px solid var(--line); white-space: nowrap; }
.stream b { font-size: var(--step-2); font-weight: 300; letter-spacing: -0.04em; color: var(--fg); }
.is-paused .stream, .is-paused .cmd__text::after, .is-paused .cmd__skel { animation-play-state: paused; }

/* ---------- Practices ---------- */
.practices__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.practices__head p { max-width: 40ch; }
.practice { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--gutter); padding-block: clamp(1.75rem, 3vw, 2.75rem); border-top: 1px solid var(--line); }
.practice:last-of-type { border-bottom: 1px solid var(--line); }
.practice::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.practice:hover::before, .practice:focus-within::before { transform: scaleX(1); }
.practice__name { grid-column: 1 / span 5; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.04em; transition: transform 0.6s var(--ease); }
.practice:hover .practice__name { transform: translateX(0.75rem); }
.practice__name a { text-decoration: none; color: inherit; }
.practice__body { grid-column: 6 / span 7; }
.practice__body > p { color: var(--fg); max-width: 50ch; }
.practice__thumb { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 1.1rem; font-size: 0.9375rem; }
.chips a { color: var(--fg-3); text-decoration: none; padding-block: 0.2rem; transition: color 0.3s var(--ease); }
.practice:hover .chips a, .practice:focus-within .chips a { color: var(--fg-2); }
.chips a:hover, .practice:hover .chips a:hover { color: var(--fg); }

/* ---------- Method ---------- */
.step { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1.5rem; padding-block: 1.75rem; border-top: 1px solid var(--line); transition: opacity 0.7s var(--ease); }
.step:last-child { border-bottom: 1px solid var(--line); }
.steps--track .step { opacity: 0.38; }
.steps--track .step.is-active { opacity: 1; }
.step__n { font-weight: 300; font-size: var(--step-3); line-height: 0.95; letter-spacing: -0.05em; color: var(--fg-3); transition: color 0.7s var(--ease); }
.step.is-active .step__n { color: var(--fg); }
.step__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem; }
.step p { margin-top: 0.6rem; max-width: 56ch; }
.step__check { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.9rem; font-size: 0.9375rem; color: var(--fg); }

/* ---------- Reach ---------- */
.reach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gutter); }
.reach__title { grid-column: 1 / span 8; max-width: 18ch; }
.reach__item { grid-column: 2 / span 5; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.reach__item + .reach__item { grid-column: 8 / span 5; margin-top: clamp(0rem, 8vw, 7rem); }
.reach__item p { margin-top: 0.85rem; }

/* ---------- Proof ---------- */
.results { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gutter); margin-top: clamp(2rem, 4vw, 3.5rem); }
.result { grid-column: span 5; }
.result:first-child { grid-column: 2 / span 5; }
.result__fig { font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: 0.9; font-weight: 300; letter-spacing: -0.06em; color: var(--fg); }
.result__label { margin-top: 1rem; color: var(--fg); font-size: var(--step-1); line-height: 1.4; max-width: 24ch; letter-spacing: -0.01em; }
.result__who { margin-top: 0.75rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem var(--gutter); margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.stats dd { font-weight: 300; font-size: var(--step-3); letter-spacing: -0.05em; color: var(--fg); line-height: 1; }
.partners { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0.75rem var(--gutter); }
.partners ul { display: flex; flex-wrap: wrap; gap: 0.35rem 2rem; color: var(--fg); font-size: var(--step-1); letter-spacing: -0.02em; }

/* ---------- Index lists ---------- */
.cols { columns: 2; column-gap: var(--gutter); }
.cols li { break-inside: avoid; border-top: 1px solid var(--line); }
.cols a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.95rem; text-decoration: none; color: var(--fg); transition: padding 0.5s var(--ease), background-color 0.4s var(--ease); }
.cols a:hover { padding-left: 0.9rem; background: var(--bg-raise); }
.cols a .mono { text-align: right; flex: none; }
.tag { display: inline-block; font-family: var(--mono); font-size: 0.6875rem; line-height: 1; padding: 0.32rem 0.55rem; border: 1px solid var(--accent); border-radius: 999px; color: var(--fg); vertical-align: 0.2em; margin-left: 0.6rem; white-space: nowrap; letter-spacing: 0; font-weight: 400; }

/* ---------- Closing ---------- */
.closing { border-top: 1px solid var(--line); }
.closing .h-display { font-size: var(--step-3); max-width: 24ch; }
@media (min-width: 1024px) { .closing .h-display { max-width: none; } .closing .h-display > span { white-space: nowrap; } }
.closing .actions { margin-top: 2.5rem; }

/* ---------- Inner pages ---------- */
.page-head { padding-top: calc(72px + clamp(3.5rem, 9vw, 8rem)); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.page-head + .section { padding-top: 0; }
.page-head--media .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); align-items: end; }
.page-head--media .wrap > div:first-child { grid-column: 1 / span 7; }
.page-head--media .wrap > .media { grid-column: 9 / span 4; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.page-head .lede { margin-top: 1.75rem; }

.balance-card { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.75rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--gutter); align-items: center; }
.balance-card__label { grid-column: 1 / span 3; color: var(--fg); }
.balance-card__meter { grid-column: 4 / span 6; }
.balance-card__meter .rail__ends { margin-bottom: 0.25rem; }
.balance-card__read { grid-column: 10 / span 3; }

.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gutter); }
.duo > div:first-child { grid-column: 1 / span 5; }
.duo > div:last-child { grid-column: 7 / span 5; }
.duo h2 { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1.25rem; }
.list li { border-top: 1px solid var(--line); padding-block: 0.9rem; color: var(--fg); line-height: 1.4; }
.list li:last-child { border-bottom: 1px solid var(--line); }
.fit { max-width: 24ch; }
.fit-label { margin-bottom: 1.25rem; }
.pager { display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.pager a { text-decoration: none; color: var(--fg); max-width: 45%; transition: transform 0.5s var(--ease); }
.pager a span { display: block; }
.pager a:last-child { text-align: right; margin-left: auto; }
.pager a:first-child:hover { transform: translateX(-0.5rem); } .pager a:last-child:hover { transform: translateX(0.5rem); }

.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); }
.tile { grid-column: span 6; border-top: 1px solid var(--line); padding-block: 1.5rem 2.25rem; }
.tile p { margin-top: 0.6rem; max-width: 44ch; }
.tiles--offset .tile:nth-child(odd) { grid-column: 2 / span 5; }
.tiles--offset .tile:nth-child(even) { grid-column: 8 / span 5; }

/* ---------- Readiness check ---------- */
.check { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raise); box-shadow: inset 0 1px 0 var(--sheen); padding: clamp(1.5rem, 4vw, 3.5rem); }
.check__bar { display: flex; gap: 6px; margin-bottom: 2rem; }
.check__bar i { flex: 1; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.check__bar i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.check__bar i.is-done::after { transform: scaleX(1); }
.check__q { font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.04em; max-width: 26ch; }
.check__body { animation: swap 0.6s var(--ease); }
.check__opts { display: grid; gap: 0.6rem; margin-top: 1.75rem; max-width: 40rem; }
.check__opts button { text-align: left; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0.85rem 1.2rem; min-height: 50px; cursor: pointer; color: var(--fg); transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.4s var(--ease); }
.check__opts button:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateX(0.4rem); }
.check__opts button:active { transform: scale(0.985); }
.check__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1.75rem; }
.check__back { background: none; border: 0; padding: 0.5rem 0; cursor: pointer; color: var(--fg-2); text-decoration: underline; text-underline-offset: 0.28em; }
.check__result .meter { margin-block: 0.4rem 0.5rem; max-width: 40rem; }
.check__result .rail__ends { max-width: 40rem; }

/* ---------- Forms ---------- */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem var(--gutter); }
.contact__form { grid-column: 1 / span 7; }
.contact__side { grid-column: 9 / span 4; }
.contact__side > div { border-top: 1px solid var(--line); padding-block: 1.25rem 1.75rem; }
.contact__side h2 { margin-bottom: 0.5rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.9375rem; color: var(--fg); font-weight: 500; }
.field .help { font-size: var(--step--1); color: var(--fg-3); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 0.85rem 1rem; background: var(--bg-raise); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--fg); transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field select option { background: var(--bg); color: var(--fg); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22); background-color: var(--bg); }
.field .error { font-size: var(--step--1); color: var(--fg); display: none; align-items: baseline; gap: 0.5rem; }
.field .error::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; border: 1.5px solid var(--fg); flex: none; }
.field.is-invalid .error { display: flex; animation: swap 0.5s var(--ease); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--fg); border-width: 2px; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.notice { grid-column: 1 / -1; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 1.5rem; background: var(--bg-raise); animation: swap 0.6s var(--ease); }
.notice h3 { margin-bottom: 0.4rem; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.2rem; color: var(--fg); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; transition: padding 0.5s var(--ease); }
.faq summary:hover { padding-left: 0.6rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; background: linear-gradient(var(--fg), var(--fg)) center / 100% 1.5px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1.5px 100% no-repeat; transition: transform 0.5s var(--ease); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details[open] p { animation: swap 0.6s var(--ease); }
.faq details p { padding-bottom: 1.5rem; max-width: 60ch; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); }
.foot__lead { grid-column: 1 / span 5; }
.foot__lead p { margin-top: 1rem; max-width: 34ch; }
.foot__col { grid-column: span 2; }
.foot__col--wide { grid-column: span 3; }
.foot h2 { font-size: 0.9375rem; font-weight: 500; color: var(--fg); margin-bottom: 0.9rem; letter-spacing: -0.01em; }
.foot li { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.foot li a { color: var(--fg-2); text-decoration: none; transition: color 0.3s var(--ease); }
.foot li a:hover { color: var(--fg); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.theme { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; }
.theme button { background: none; border: 0; border-radius: 999px; padding: 0.35rem 0.85rem; font-size: var(--step--1); color: var(--fg-2); cursor: pointer; min-height: 32px; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.theme button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* ---------- Page transition ---------- */
#view { transition: opacity 0.35s var(--ease); }
.wipe { visibility: hidden; position: fixed; inset: 0; z-index: 60; background: var(--bg-raise); transform: translateY(101%); pointer-events: none; display: grid; place-items: center; color: var(--fg); }
.wipe svg { width: 56px; height: 56px; opacity: 0; transition: opacity 0.3s var(--ease) 0.12s; }
.wipe.is-in, .wipe.is-out { visibility: visible; }
.wipe.is-in { transform: none; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.wipe.is-in svg { opacity: 1; }
.wipe.is-out { transform: translateY(-101%); transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .thesis__wrong { grid-column: 1 / span 6; }
  .thesis__wrong + .thesis__wrong { grid-column: 7 / span 6; }
  .thesis__right { grid-column: 1 / -1; }
  .split__aside { grid-column: 1 / -1; position: static; }
  .split__aside .media { max-width: 520px; }
  .split__main { grid-column: 1 / -1; }
  .reach__title { grid-column: 1 / -1; }
  .reach__item { grid-column: 1 / span 6; }
  .reach__item + .reach__item { grid-column: 7 / span 6; }
  .result, .result:first-child { grid-column: span 6; }
  .page-head--media .wrap > div:first-child { grid-column: 1 / -1; }
  .page-head--media .wrap > .media { grid-column: 1 / span 8; }
  .balance-card__label { grid-column: 1 / -1; }
  .balance-card__meter { grid-column: 1 / span 8; }
  .balance-card__read { grid-column: 9 / span 4; }
  .contact__form, .contact__side { grid-column: 1 / -1; }
  .foot__lead { grid-column: 1 / -1; }
  .foot__col, .foot__col--wide { grid-column: span 4; }
  .tiles--offset .tile:nth-child(odd), .tiles--offset .tile:nth-child(even) { grid-column: span 6; }
  .bento__head h2, .bento__head p { grid-column: 1 / -1; }
  .bt, .bt--5, .bt--7, .bt--4, .bt--8 { grid-column: span 6; }
}
@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .hero__field { inset: 56px 0 auto 0; height: 38dvh; -webkit-mask-composite: source-over; mask-composite: add; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
  .hero__body { justify-content: flex-end; padding-top: 25dvh; padding-bottom: 1.25rem; }
  .hero__body .lede { font-size: var(--step-0); line-height: 1.55; }
  .rail__read { grid-template-columns: 1fr; min-height: 9.5rem; }
  .rail__ends .hint { display: none; }
  .thesis__grid, .split, .reach, .results, .duo, .tiles, .contact, .foot__grid, .practice, .balance-card, .bento, .bento__head, .page-head--media .wrap { grid-template-columns: minmax(0, 1fr); }
  .thesis__grid > *, .split > *, .reach > *, .results > *, .duo > *, .tiles > *, .contact > *, .foot__grid > *, .practice > *, .balance-card > *, .bento > *, .bento__head > *, .page-head--media .wrap > *,
  .thesis__wrong + .thesis__wrong, .reach__item + .reach__item, .result:first-child, .duo > div:first-child, .duo > div:last-child,
  .tiles--offset .tile:nth-child(odd), .tiles--offset .tile:nth-child(even), .page-head--media .wrap > div:first-child, .page-head--media .wrap > .media { grid-column: 1 / -1; }
  .reach__item + .reach__item { margin-top: 0; }
  .thesis__right { grid-template-columns: 1fr; padding-top: 2rem; }
  .ledger__head { padding-left: 0; }
  .ledger__row { grid-template-columns: 1fr; gap: 0.25rem; padding-block: 0.9rem 0.5rem; }
  .cols { columns: 1; }
  .partners { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .step { grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; }
  .pager { flex-direction: column; }
  .pager a, .pager a:last-child { max-width: none; text-align: left; margin-left: 0; }
  .practice__thumb { display: block; margin-top: 1.25rem; aspect-ratio: 16 / 9; }
  .media--wide { aspect-ratio: 4 / 3; }
  .bt__card { height: 300px; }
  .peek { display: none; }
}
@media (hover: none) { .peek { display: none; } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  [data-r], .w > i { opacity: 1; transform: none; }
  .media, .media img { clip-path: none; transform: none; }
  .marquee__track, .stream { animation: none; }
  .wipe { display: none; }
}

/* A reserved photography slot: the layout is final, the picture is not yet taken. */
.media--slot { display: grid; place-content: center; gap: 0.5rem; text-align: center; padding: 1.5rem; background: var(--bg-raise); border: 1px dashed var(--line-strong); clip-path: none; }
.media--slot::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(var(--fg-rgb), 0.035) 14px 15px); pointer-events: none; }
.media--slot .mono { color: var(--fg-3); }
.media--slot .slot__what { color: var(--fg-2); font-size: var(--step-0); max-width: 34ch; line-height: 1.45; }

/* ================= Credentials ================= */
.hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.hub__card { position: relative; display: grid; align-content: start; gap: 0.6rem; padding: 1.75rem 1.75rem 4.5rem; border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--sheen); text-decoration: none; color: var(--fg-2); overflow: hidden; transition: transform 0.6s var(--ease), border-color 0.4s var(--ease); }
.hub__card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.hub__card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.hub__card:hover::before { transform: scaleX(1); }
.hub__name { display: block; font-size: var(--step-2); line-height: 1.1; }
.hub__text { display: block; max-width: 34ch; }
.hub__go { position: absolute; left: 1.75rem; bottom: 1.6rem; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.hub__go::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-right: 1px solid var(--fg); border-top: 1px solid var(--fg); transform: translateX(-2px) rotate(45deg); transition: transform 0.5s var(--ease), border-color 0.4s var(--ease); }
.hub__card:hover .hub__go { background: var(--accent); border-color: var(--accent); }
.hub__card:hover .hub__go::after { transform: translateX(1px) rotate(45deg); border-color: var(--accent-ink); }

/* ---- Awards ---- */
.tally { display: flex; flex-wrap: wrap; gap: 2rem clamp(2.5rem, 6vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.tally dd { font-size: clamp(3rem, 1.6rem + 5vw, 5.5rem); line-height: 0.9; font-weight: 300; letter-spacing: -0.05em; color: var(--fg); }
.tally dt { margin-top: 0.6rem; }
.crest { position: relative; width: 132px; height: 165px; display: grid; place-items: center; color: var(--fg-3); }
.crest__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest__ribbon path, .crest__ribbon circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.crest__ribbon path:nth-child(2) { transition-delay: 0.2s; }
.crest__ribbon circle { transition-delay: 0.45s; }
.is-in .crest__ribbon path, .is-in .crest__ribbon circle { stroke-dashoffset: 0; }
.crest__mark { font-size: 1.25rem; letter-spacing: -0.03em; color: var(--fg); transform: translateY(-9px); }
.crest__year { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--fg-2); }
.win { border-top: 1px solid var(--line); padding-block: 1.75rem; }
.win:last-child { border-bottom: 1px solid var(--line); }
.win h3 { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.7rem; }
.win p { max-width: 62ch; }
.win__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; }

.press { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-raise); box-shadow: inset 0 1px 0 var(--sheen); }
.press h3 { margin-bottom: 0.9rem; }
.press__head { grid-column: 1 / -1; }
.press__head p { margin-top: 0.75rem; max-width: 60ch; }
.press__facts { grid-column: span 6; }
.press__facts dl > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem; border-top: 1px solid var(--line); padding-block: 0.7rem; }
.press__facts dt { color: var(--fg-3); font-size: 0.9375rem; }
.press__facts dd { color: var(--fg); }
.press__boiler { grid-column: span 6; }
.press__boiler blockquote { margin: 0 0 1.25rem; padding-left: 1.1rem; border-left: 2px solid var(--accent); color: var(--fg); line-height: 1.6; max-width: 62ch; }
.press__assets { grid-column: span 6; }
.press__contact { grid-column: span 6; align-self: start; }
[data-copy].is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- Partners ---- */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.plate { position: relative; display: grid; align-content: end; gap: 0.3rem; min-height: 190px; padding: 1.4rem; border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--sheen); text-decoration: none; color: var(--fg); overflow: hidden; transition: transform 0.6s var(--ease), border-color 0.4s var(--ease); }
.plate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at 82% -10%, rgba(var(--accent-rgb), 0.2), transparent 62%); opacity: 0; transition: opacity 0.6s var(--ease); }
.plate:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.plate:hover::before { opacity: 1; }
.plate__mark { position: absolute; top: 1rem; left: 1.4rem; font-size: 2.25rem; line-height: 1; color: var(--fg-3); transition: color 0.5s var(--ease); }
.plate:hover .plate__mark { color: var(--accent); }
.plate__mark--lg { position: static; display: block; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; color: var(--accent); }
.plate__name { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; }
.plate__level { color: var(--fg-3); }

/* ---- Certifications ---- */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2); cursor: pointer; font-size: 0.9375rem; transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); }
.pill:hover { color: var(--fg); border-color: var(--fg); }
.pill:active { transform: scale(0.97); }
.pill.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pill__n { opacity: 0.6; }
.grp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cert { display: grid; align-content: start; gap: 0.75rem; padding: 1.5rem; border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--sheen); transition: opacity 0.45s var(--ease), transform 0.7s var(--ease), border-color 0.4s var(--ease); }
.cert:hover { border-color: var(--line-strong); }
.cert.is-out { display: none; }
.cert__top { display: flex; align-items: flex-start; gap: 0.9rem; }
.cert__mark { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-strong); font-size: 1rem; letter-spacing: -0.02em; color: var(--fg); }
.cert__top h3 { line-height: 1.25; }
.cert__top p { margin-top: 0.2rem; }
.cert__lead { margin-top: 0.35rem; }
.cert__list { display: grid; gap: 0.45rem; }
.cert__list li { position: relative; padding-left: 1.15rem; color: var(--fg); font-size: 0.9375rem; line-height: 1.4; }
.cert__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@media (max-width: 1023px) {
  .hub, .wall, .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press__facts, .press__boiler, .press__assets, .press__contact { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hub, .wall, .certs, .press { grid-template-columns: minmax(0, 1fr); }
  .tally { gap: 1.5rem 2.5rem; }
  .tally > div { min-width: 40%; }
  .crest { width: 108px; height: 135px; }
}
.proof__more { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }

/* ================= Credentials dropdown ================= */
.drop { position: relative; display: inline-flex; align-items: center; gap: 0.15rem; }
.drop__btn { display: grid; place-items: center; width: 26px; height: 32px; padding: 0; margin-right: -6px; background: none; border: 0; color: var(--fg-3); cursor: pointer; border-radius: 6px; transition: color 0.3s var(--ease); }
.drop__btn svg { width: 10px; height: 6px; transition: transform 0.4s var(--ease); }
.drop:hover .drop__btn, .drop.is-open .drop__btn { color: var(--fg); }
.drop.is-open .drop__btn svg { transform: rotate(180deg); }

.drop__panel { position: absolute; top: calc(100% + 14px); left: 50%; width: min(390px, calc(100vw - 2rem)); margin-left: -140px; z-index: 5;
  background: color-mix(in srgb, var(--bg-raise) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 30px 60px -24px rgb(5 8 16 / 0.45), inset 0 1px 0 var(--sheen);
  opacity: 0; transform: translateY(-10px) scale(0.97); transform-origin: 140px -10px; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.4s var(--ease); }
.drop.is-open .drop__panel { opacity: 1; transform: none; pointer-events: auto; }
/* the bubble's notch */
.drop__panel::before { content: ""; position: absolute; top: -6px; left: 134px; width: 11px; height: 11px; transform: rotate(45deg); background: inherit; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.drop__inner { padding: 0.55rem; }
.drop__item { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding: 0.75rem 0.85rem; border-radius: var(--r-md); text-decoration: none; color: var(--fg-2);
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease) calc(var(--i) * 55ms + 60ms), transform 0.5s var(--ease) calc(var(--i) * 55ms + 60ms), background-color 0.3s var(--ease); }
.drop.is-open .drop__item { opacity: 1; transform: none; }
.drop__item:hover { background: var(--bg); }
.drop__name { font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.drop__count { text-align: right; align-self: center; }
.drop__text { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.45; color: var(--fg-3); }
.drop__foot { display: flex; gap: 1.25rem; padding: 0.85rem 1.4rem 1.1rem; border-top: 1px solid var(--line); font-size: 0.875rem; }
.drop__foot a { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease) calc(var(--i) * 55ms + 60ms), transform 0.5s var(--ease) calc(var(--i) * 55ms + 60ms), background-size 0.5s var(--ease); }
.drop.is-open .drop__foot a { opacity: 1; transform: none; }

/* Mobile menu: the three sit under Credentials rather than in a bubble. */
.menu__sub { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.25rem 0 0.75rem 1rem; border-left: 1px solid var(--line); margin-bottom: 0.5rem;
  opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i) * 55ms + 120ms); }
.menu.is-open .menu__sub { opacity: 1; transform: none; }
.menu__sub a { color: var(--fg-2); text-decoration: none; font-size: 1.0625rem; padding-block: 0.3rem; }
.menu__sub a:hover { color: var(--fg); }
@media (min-width: 768px) { .menu__sub { display: none; } }
@media (max-width: 767px) { .drop__panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .drop__panel { transform: none; } }

/* ================= What we do: the reel ================= */
.reel__h { color: var(--fg-2); letter-spacing: 0.02em; font-weight: 400; }

/* ---- pinned ---- */
.reel--pinned .reel__track { position: relative; height: calc(var(--n) * 115vh + 100vh); }
.reel__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; border-top: 1px solid var(--line); }
.reel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel__ghost { position: absolute; left: var(--gutter); bottom: -2.5vh; white-space: nowrap; pointer-events: none; will-change: transform; }
.reel__ghost span { display: block; font-size: 19vw; font-weight: 300; letter-spacing: -0.06em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(var(--fg-rgb), 0.055); }
.reel__hud { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding-top: 100px; padding-bottom: clamp(1.25rem, 3vh, 2.25rem); }
.reel__top { display: flex; justify-content: space-between; align-items: flex-start; }
.reel__count { display: flex; align-items: flex-start; gap: 0.5rem; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.reel__odo { display: block; height: 1em; overflow: hidden; }
.reel__digits { display: flex; flex-direction: column; transition: transform 0.9s var(--ease); }
.reel__digits span { display: block; height: 1em; }
.reel__of { font-size: 0.32em; color: var(--fg-3); padding-top: 0.35em; letter-spacing: 0; font-family: var(--mono); }

.reel__panels { position: relative; }
.reel--pinned .reel__panel { position: absolute; left: 0; top: 50%; width: min(43%, 40rem); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.01s linear 0.7s; }
.reel--pinned .reel__panel.is-on { opacity: 1; pointer-events: auto; transition-delay: 0s; }
.reel__kicker { color: var(--fg-3); min-height: 1.5em; margin-bottom: 1.1rem; }
.reel__title { font-size: clamp(2.6rem, 1.1rem + 4.3vw, 5.4rem); font-weight: 300; letter-spacing: -0.052em; line-height: 0.98; color: var(--fg); }
.rw { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.1em 0; margin: 0 -0.04em -0.1em 0; }
.rc { display: inline-block; transform: translateY(108%); transition: transform 0.95s var(--ease) calc(var(--ci) * 16ms); will-change: transform; }
.is-up .rc { transform: translateY(-108%); transition-duration: 0.6s; transition-delay: calc(var(--ci) * 8ms); }
.is-on .rc { transform: none; }
.reel__text, .reel__list li, .reel__more, .reel__kicker { opacity: 0; transform: translateY(12px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.is-on .reel__kicker { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 0.1s, transform 0.6s var(--ease) 0.1s; }
.reel__text { margin-top: 1.4rem; max-width: 40ch; font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); letter-spacing: -0.01em; }
.is-on .reel__text { opacity: 1; transform: none; transition: opacity 0.7s var(--ease) 0.35s, transform 0.8s var(--ease) 0.35s; }
.reel__list { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin-top: 1.4rem; font-size: 0.9375rem; }
.reel__list a { color: var(--fg-3); text-decoration: none; padding-block: 0.15rem; transition: color 0.3s var(--ease); }
.reel__list a:hover { color: var(--fg); }
.is-on .reel__list li, .is-on .reel__more { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) calc(var(--k) * 45ms + 480ms), transform 0.7s var(--ease) calc(var(--k) * 45ms + 480ms); }
.reel__more { margin-top: 1.4rem; }

.reel__meter { width: min(43%, 40rem); }
.reel__meter .meter__pos { transition-delay: 0s; }
.reel__meter .rail__ends { margin-bottom: 0.2rem; font-size: 0.75rem; color: var(--fg-3); }
.reel__meter [data-reel-ratio] { color: var(--fg); }

.reel__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.5rem); margin-top: clamp(1rem, 2.4vh, 1.75rem); }
.reel__rail button { position: relative; padding: 0.85rem 0 0.25rem; background: none; border: 0; text-align: left; cursor: pointer; color: var(--fg-3); font-size: 0.8125rem; line-height: 1.3; transition: color 0.4s var(--ease); }
.reel__rail button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); }
.reel__fill { position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--fg); transform: scaleX(0); transform-origin: left; }
.reel__rail button.is-on { color: var(--fg); }
.reel__rail button.is-on .reel__fill { background: var(--accent); }
.reel__rail button:hover { color: var(--fg); }

/* ---- stacked: small screens and reduced motion ---- */
.reel--stack { padding-block: var(--section); border-top: 1px solid var(--line); }
.reel--stack .reel__h { margin-bottom: 2rem; }
.reel__block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gutter); align-items: center; border-top: 1px solid var(--line); padding-block: 2.5rem 3.25rem; }
.reel__mini { grid-column: 7 / span 6; grid-row: 1 / span 2; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--sheen); }
.reel--stack .reel__panel { grid-column: 1 / span 6; }
.reel--stack .reel__meter { grid-column: 1 / span 6; width: auto; }
.reel--stack .reel__title { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); }
@media (max-width: 899px) {
  .reel__block { grid-template-columns: minmax(0, 1fr); }
  .reel__mini, .reel--stack .reel__panel, .reel--stack .reel__meter { grid-column: 1 / -1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .rc, .reel__text, .reel__list li, .reel__more, .reel__kicker { transform: none !important; opacity: 1 !important; } }

/* ================= Services: guide index and article pages ================= */
.jump { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.jump a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg); text-decoration: none; font-size: 0.9375rem; transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); }
.jump a:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.jump a .mono { opacity: 0.7; color: inherit; }

.guide__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); }
.guide__head h2 { grid-column: 1 / span 5; }
.guide__intro { grid-column: 7 / span 6; font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); letter-spacing: -0.01em; }
.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 6vw, 6rem); }
.entry h3 { font-size: var(--step-2); font-weight: 350; letter-spacing: -0.04em; line-height: 1.12; }
.entry h3 a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size 0.6s var(--ease); }
.entry h3 a:hover { background-size: 100% 1px; }
.entry > p:not(.mono):not(.entry__go) { margin-top: 0.85rem; max-width: 52ch; }
.entry__aka { margin-top: 0.85rem; }
.entry__go { margin-top: 1rem; font-size: 0.9375rem; }

.byline { margin-top: 1.25rem; }
.article__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); }
.toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: 104px; }
.toc ol { margin-top: 0.9rem; display: grid; gap: 0.1rem; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 0.4rem 0 0.4rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--fg-3); text-decoration: none; font-size: 0.9375rem; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.toc a:hover { color: var(--fg); }
.toc a.is-on { color: var(--fg); border-left-color: var(--accent); }
.prose { grid-column: 5 / span 8; max-width: 44rem; }
.prose > section { padding-bottom: clamp(3rem, 6vw, 4.5rem); scroll-margin-top: 96px; }
.prose > section + section { border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.prose h2 { margin-bottom: 1.25rem; }
.prose p { color: var(--fg-2); line-height: 1.7; }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--fg); font-weight: 500; }
.answer { font-size: var(--step-1); line-height: 1.55 !important; color: var(--fg) !important; letter-spacing: -0.01em; }
.aka { margin-top: 1.25rem !important; font-size: 0.9375rem; }
.aka .mono { margin-right: 0.5rem; }
.fitline, .split-text { display: flex; gap: 0.8rem; align-items: baseline; }
.fitline .dot, .split-text .dot { flex: none; }
.dot--ai { background: var(--fg); }
.split-text + .split-text { margin-top: 1.1rem !important; }

.howto { display: grid; gap: 1.5rem; counter-reset: none; }
.howto li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 1rem; }
.howto__n { font-size: var(--step-2); font-weight: 300; letter-spacing: -0.05em; color: var(--fg-3); line-height: 1; }
.howto h3 { margin-bottom: 0.3rem; }

.checks { display: grid; gap: 0.7rem; }
.checks li { position: relative; padding-left: 1.9rem; color: var(--fg); line-height: 1.45; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--line-strong); }
.checks li::after { content: ""; position: absolute; left: 0.4rem; top: 0.38em; width: 0.32rem; height: 0.55rem; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
.figs__n { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; color: var(--fg); }
.figs dd { margin-top: 0.6rem; display: grid; gap: 0.45rem; }
.figs dd span { color: var(--fg); line-height: 1.4; }
.figs cite { font-style: normal; }

.related { border-top: 1px solid var(--line); padding-top: 2rem !important; }
.related p:last-child { margin-top: 0.5rem; color: var(--fg); }

@media (max-width: 1023px) {
  .toc { display: none; }
  .prose { grid-column: 1 / -1; }
  .guide__head h2, .guide__intro { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .entries, .figs { grid-template-columns: minmax(0, 1fr); }
  .guide__head, .article__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
   v3 — weight, depth and colour.
   The earlier pass was too light: 300-weight type on flat panels reads
   as austere. Headlines are now heavy, surfaces have real elevation,
   and a second accent carries the money story.
   =================================================================== */
:root {
  --accent-2: #19c39a;          /* the ROI / outcome colour */
  --accent-2-rgb: 25, 195, 154;
  --lift-1: 0 2px 4px rgba(6, 9, 18, 0.1), 0 12px 24px -8px rgba(6, 9, 18, 0.18);
  --lift-2: 0 4px 10px rgba(6, 9, 18, 0.14), 0 30px 60px -18px rgba(6, 9, 18, 0.34);
  --lift-3: 0 10px 24px rgba(6, 9, 18, 0.2), 0 50px 90px -24px rgba(6, 9, 18, 0.5);
}
:root:not([data-theme="light"]) { --accent-2: #2ee0ae; --accent-2-rgb: 46, 224, 174; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent-2: #0ea47f; --accent-2-rgb: 14, 164, 127; } }
:root[data-theme="light"] { --accent-2: #0ea47f; --accent-2-rgb: 14, 164, 127; }

/* Headlines carry weight now. */
.hd, .statement, .h-display, .h-page, .h-section, .reel__title, .check__q, .figs__n, .result__fig, .tally dd, .reel__count { font-weight: 600; letter-spacing: -0.038em; }
.statement, .reel__title, .result__fig, .tally dd, .figs__n, .reel__count { font-weight: 650; letter-spacing: -0.045em; }
.muted { color: var(--fg-3); }

/* ---------- Pill badge ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.95rem 0.42rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-raise); box-shadow: var(--lift-1), inset 0 1px 0 var(--sheen);
  font-size: 0.8125rem; font-weight: 500; color: var(--fg); white-space: nowrap; }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.2); }
.pill__sep { width: 1px; height: 12px; background: var(--line-strong); }
.pill__note { color: var(--fg-3); font-weight: 400; }

.kicker { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--accent); letter-spacing: 0.08em; }
.kicker__line { width: 28px; height: 1px; background: var(--accent); }

/* ---------- Buttons with presence ---------- */
.btn--go { background: var(--accent); color: #fff; border: 0; min-height: 56px; padding: 0 1.9rem; font-weight: 600; font-size: 1.0625rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 22px -6px rgba(var(--accent-rgb), 0.55); }
.btn--go:hover { background: var(--fg); color: var(--bg); box-shadow: var(--lift-2); }
.btn--plain { min-height: 56px; padding: 0 1.4rem 0 0.5rem; background: none; border: 0; color: var(--fg); font-weight: 500; font-size: 1.0625rem; gap: 0.85rem; }
.btn__ring { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.btn__ring::after { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-left: 2px; }
.btn--plain:hover .btn__ring { background: var(--accent-2); border-color: var(--accent-2); color: #04110d; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: auto; display: block; padding-top: 72px; overflow: hidden; }
.hero__glow { position: absolute; inset: -20% -10% auto -30%; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 72% 18%, rgba(var(--accent-rgb), 0.3), transparent 70%),
              radial-gradient(45% 45% at 18% 72%, rgba(var(--accent-2-rgb), 0.16), transparent 70%); filter: blur(18px); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center; padding-block: clamp(3rem, 7vh, 6.5rem) clamp(4rem, 9vh, 7.5rem); }
.hero__h { font-size: clamp(2.6rem, 1.1rem + 4.6vw, 5.3rem); line-height: 1.02; font-weight: 680; letter-spacing: -0.045em; color: var(--fg); margin-top: 1.6rem; }
.hero__h .l { display: block; }
.hero__h em { font-style: normal; color: var(--accent); }
.hero__h b { font-weight: inherit; color: var(--accent-2); position: relative; }
.hero__h b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.07em; border-radius: 2px; background: currentColor; opacity: 0.32; }
.hero__lede { margin-top: 1.6rem; max-width: 46ch; font-size: 1.125rem; line-height: 1.6; color: var(--fg-2); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; margin-top: 2.1rem; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hero__trust ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.hero__trust li { font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; color: var(--fg-2); }

/* floating answer card + stat chips */
.hero__panel { position: relative; min-height: 420px; }
.hero__orb { position: absolute; right: -14%; top: -18%; width: 78%; max-width: none; z-index: -1; opacity: 0.9; animation: float 13s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-16px) rotate(3deg); } }
.ansr { position: relative; z-index: 2; border-radius: 22px; padding: 1.3rem 1.4rem 1.2rem; background: color-mix(in srgb, var(--bg-raise) 86%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--line-strong); box-shadow: var(--lift-3), inset 0 1px 0 var(--sheen); max-width: 30rem; }
.ansr__bar { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.ansr__dots { display: flex; gap: 5px; }
.ansr__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.ansr__q { margin-top: 0.95rem; font-weight: 600; color: var(--fg); font-size: 1.0625rem; letter-spacing: -0.02em; }
.ansr__a { margin-top: 0.85rem; }
.ansr__skel { display: block; height: 9px; border-radius: 5px; margin-bottom: 7px; background: linear-gradient(90deg, var(--line) 20%, var(--line-strong) 40%, var(--line) 60%) 0 0 / 300% 100%; animation: shimmer 1.5s linear infinite; }
.ansr__txt { margin-top: 0.6rem; line-height: 1.6; color: var(--fg-2); font-size: 0.9375rem; }
.ansr__txt mark { background: rgba(var(--accent-rgb), 0.18); color: var(--fg); font-weight: 600; padding: 0.08em 0.3em; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35); }
.ansr__cite { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--fg-3); }
.chipstat { position: absolute; z-index: 3; display: grid; gap: 0.1rem; padding: 0.8rem 1.1rem; border-radius: 16px;
  background: var(--bg-raise); border: 1px solid var(--line-strong); box-shadow: var(--lift-2), inset 0 1px 0 var(--sheen); animation: float 11s ease-in-out infinite; }
.chipstat b { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.chipstat span { font-size: 0.75rem; color: var(--fg-3); font-family: var(--mono); }
.chipstat--1 { right: -2%; top: -6%; animation-delay: -2s; } .chipstat--1 b { color: var(--accent); }
.chipstat--2 { right: 4%; bottom: 6%; animation-delay: -5s; } .chipstat--2 b { color: var(--accent-2); }
.chipstat--3 { left: -6%; bottom: 26%; animation-delay: -8s; } .chipstat--3 b { color: var(--fg); }

/* ---------- Three problems ---------- */
.probs { background: var(--bg-raise); border-block: 1px solid var(--line); }
.probs__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.probs__head .kicker { grid-column: 1 / -1; margin-bottom: 0.9rem; }
.probs__head .h-page { grid-column: 1 / span 6; }
.probs__head > p { grid-column: 8 / span 5; }
.probs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.prob { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--bg); border: 1px solid var(--line);
  box-shadow: var(--lift-1); padding-bottom: 1.5rem; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s var(--ease); }
.prob:hover { transform: translateY(-8px); box-shadow: var(--lift-3); border-color: var(--line-strong); }
.prob__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0d14; }
.prob__art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.prob:hover .prob__art img { transform: scale(1.14); }
.prob__n { position: absolute; left: 1.1rem; top: 0.9rem; font-size: 0.75rem; color: rgba(255,255,255,0.65); }
.prob__tag { position: absolute; right: 1.1rem; top: 0.9rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: rgba(10,12,18,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); color: #fff; }
.prob__name { margin: 1.3rem 1.5rem 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--fg); }
.prob > p { margin: 0.65rem 1.5rem 0; }
.prob__list { margin: 1.1rem 1.5rem 0; display: grid; gap: 0.5rem; }
.prob__list li { position: relative; padding-left: 1.6rem; font-size: 0.9375rem; line-height: 1.45; color: var(--fg); }
.prob__list li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: rgba(var(--accent-2-rgb), 0.16); }
.prob__list li::after { content: ""; position: absolute; left: 0.33rem; top: 0.46em; width: 0.26rem; height: 0.46rem; border: solid var(--accent-2); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.prob__metric { margin: 1.4rem 1.5rem 0; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.prob__fig { font-size: 2.25rem; font-weight: 650; letter-spacing: -0.045em; line-height: 1; color: var(--accent-2); }
.prob__links { margin: 1.1rem 1.5rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.875rem; }
.probs__note { margin-top: 2rem; }

@media (max-width: 1023px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .hero__panel { min-height: 380px; max-width: 34rem; }
  .probs__grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .probs__head .h-page, .probs__head > p { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hero { padding-top: 72px; }
  .hero__in { padding-block: 2.5rem 3.5rem; }
  .hero__h { font-size: clamp(2.1rem, 8.4vw, 3rem); margin-top: 1.25rem; }
  .hero__lede { font-size: 1.0625rem; }
  .hero__panel { min-height: 330px; }
  .chipstat--1 { right: 0; top: -4%; } .chipstat--3 { left: 0; bottom: 18%; }
  .chipstat b { font-size: 1.25rem; }
  .hero__orb { width: 110%; right: -25%; }
}
@media (prefers-reduced-motion: reduce) { .hero__orb, .chipstat { animation: none; } }

/* --- v3 corrections --- */
.hero__body .pill { align-self: start; width: max-content; max-width: 100%; }
.hero__h { font-size: clamp(2.5rem, 1rem + 4.2vw, 4.9rem); }
.hero__orb { right: -22%; top: -24%; width: 86%; opacity: 0.75; }
.chipstat--1 { right: 2%; top: -8%; }
.chipstat--2 { right: 0; bottom: -2%; }
.chipstat--3 { left: -4%; bottom: -8%; }
.hero__panel { padding-block: 2.5rem 3.5rem; }

/* The balance band, now its own section rather than part of the hero. */
.band { padding-block: clamp(3.5rem, 7vw, 6rem); border-bottom: 1px solid var(--line); }
.band__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: 2rem; }
.band .rail { border-top: 0; padding: 0; background: none; }
.band .rail__read { min-height: 5rem; }
@media (max-width: 767px) { .band .rail__read { min-height: 9rem; } }

/* Keep the field clear of the headline, and settle the third stat chip. */
.hero .hero__field {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 34%, rgba(0,0,0,0.45) 50%, #000 66%), linear-gradient(to bottom, transparent 40px, #000 170px);
  mask-image: linear-gradient(to right, transparent 0%, transparent 34%, rgba(0,0,0,0.45) 50%, #000 66%), linear-gradient(to bottom, transparent 40px, #000 170px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.chipstat--3 { left: -5%; bottom: 8%; }
section[id] { scroll-margin-top: 90px; }
@media (max-width: 767px) {
  .hero .hero__field { inset: 56px 0 auto 0; height: 38dvh; -webkit-mask-composite: source-over; mask-composite: add;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
  .chipstat--3 { left: 0; bottom: 4%; }
}

/* ---------- Showcase: artwork with a caption beside it ---------- */
.showcase { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(3.5rem, 8vw, 7rem); }
.showcase__art { position: relative; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; background: #080a12; border: 1px solid var(--line); box-shadow: var(--lift-2); }
.showcase__art img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.showcase:hover .showcase__art img { transform: scale(1.1) rotate(1.5deg); }
.showcase__cap .kicker { margin-bottom: 1rem; }
.showcase__line { font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; color: var(--fg); max-width: 22ch; }

/* ---------- Closing band ---------- */
.closing2 { padding-block: clamp(3rem, 7vw, 6rem); }
.closing2__in { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(2.5rem, 6vw, 5.5rem); isolation: isolate;
  background: linear-gradient(135deg, #10131c, #1a2338 55%, #10131c); box-shadow: var(--lift-3); }
.closing2__art { position: absolute; inset: -25% -10% auto auto; width: 72%; z-index: -1; opacity: 0.6; mix-blend-mode: screen; pointer-events: none; }
.closing2__in::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(75% 90% at 10% 50%, rgba(10,14,22,0.92), rgba(10,14,22,0.45) 65%, transparent); }
.closing2__h { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.6rem); line-height: 1.06; color: #fff; max-width: 18ch; }
.closing2__sub { display: block; color: rgba(255,255,255,0.56); }
.closing2 .actions { margin-top: 2.25rem; }
.closing2 .btn--plain { color: #fff; }
.closing2 .btn__ring { border-color: rgba(255,255,255,0.35); }
@media (max-width: 899px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .closing2__art { width: 130%; inset: -10% -40% auto auto; opacity: 0.4; }
}

/* Feather the closing artwork so it blends instead of showing its frame. */
.closing2__art { inset: -40% -18% auto auto; width: 85%;
  -webkit-mask-image: radial-gradient(58% 58% at 55% 45%, #000 15%, transparent 72%);
  mask-image: radial-gradient(58% 58% at 55% 45%, #000 15%, transparent 72%); }
.closing2__in::after { background: radial-gradient(80% 95% at 6% 50%, rgba(10,14,22,0.95), rgba(10,14,22,0.5) 58%, transparent 78%); }
.closing2__h { max-width: 20ch; }
@media (max-width: 899px) { .closing2__art { width: 150%; inset: -20% -55% auto auto; } }

/* ===================================================================
   v3.1 — the real wordmark, and the inner pages brought up to the
   same weight and depth as the home page.
   =================================================================== */
:root { --brand: #f5831f; --brand-rgb: 245, 131, 31; }   /* the logo orange; UI accents stay blue + green */

/* ---------- Wordmark ---------- */
.brand { gap: 0; }
.wm { display: inline-flex; align-items: baseline; font-weight: 700; letter-spacing: -0.035em; font-size: 1.3rem; line-height: 1; }
.wm__a { color: var(--fg); }
/* The wordmark was the only orange left anywhere on the site - one declaration,
   one word - so it read as a leftover rather than a brand colour. Green is the
   colour that already means outcomes on every page, and "uptrend" in green is
   the obvious reading. On load it drifts through the other accents and slows
   into green over five seconds, then stays there. */
.wm__b { color: var(--accent-2); animation: wm-settle 5s cubic-bezier(.33, 0, .15, 1) 1 both; }

@keyframes wm-settle {
  0%   { color: var(--accent); }
  22%  { color: #8b7cf6; }
  44%  { color: #45d9e8; }
  66%  { color: var(--accent); }
  100% { color: var(--accent-2); }
}

@media (prefers-reduced-motion: reduce) {
  .wm__b { animation: none; color: var(--accent-2); }
}
.nav .wm { font-size: 1.25rem; }
.foot .wm { font-size: 1.5rem; }
.wipe svg { color: var(--fg); }

/* ---------- Page heads ---------- */
.page-head { position: relative; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: -40% -10% auto -20%; height: 150%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 50% at 78% 22%, rgba(var(--accent-rgb), 0.2), transparent 70%),
              radial-gradient(38% 42% at 12% 68%, rgba(var(--accent-2-rgb), 0.12), transparent 70%); filter: blur(14px); }
.page-head .kicker { margin-bottom: 1.1rem; }
.page-head .h-page { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.1rem); line-height: 1.04; max-width: 22ch; }
.page-head .lede { font-size: 1.125rem; }

/* ---------- Tiles become real cards ---------- */
.tiles { gap: 1.25rem var(--gutter); }
.tile { border-top: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-raise);
  box-shadow: var(--lift-1); padding: 1.5rem; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease); }
.tile:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--line-strong); }
.tile h3 { font-weight: 600; letter-spacing: -0.025em; }
.tiles--offset .tile:nth-child(odd) { grid-column: 1 / span 6; }
.tiles--offset .tile:nth-child(even) { grid-column: 7 / span 6; }

/* ---------- Approach: numbered method ---------- */
.step { border-top-color: var(--line); }
.step__n { font-weight: 650; color: var(--accent); opacity: 0.35; }
.step.is-active .step__n { color: var(--accent); opacity: 1; }
.step__check { font-weight: 500; }

/* ---------- Services: entries and guide heads ---------- */
.guide__head h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); max-width: 14ch; }
.entry h3 { font-weight: 600; }
.entry__go { font-weight: 500; }

/* ---------- Service article ---------- */
.answer { font-weight: 450; }
.prose h2 { font-weight: 600; letter-spacing: -0.032em; }
.howto__n { font-weight: 650; color: var(--accent); }
.figs__n { color: var(--accent-2); }
.balance-card { border-radius: 20px; border: 1px solid var(--line); background: var(--bg-raise); box-shadow: var(--lift-1); padding: 1.5rem; }

/* ---------- Industries ---------- */
.tile h2 { font-weight: 600; letter-spacing: -0.025em; }

/* ---------- Credentials ---------- */
.hub__card { padding-bottom: 4.75rem; box-shadow: var(--lift-1); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease); }
.hub__card:hover { box-shadow: var(--lift-2); }
.hub__name { font-weight: 650; letter-spacing: -0.035em; }
.hub__card::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); height: 3px; }
.plate { box-shadow: var(--lift-1); }
.plate:hover { box-shadow: var(--lift-2); }
.plate__name { font-weight: 650; letter-spacing: -0.03em; }
.plate__mark { font-weight: 700; }
.cert { box-shadow: var(--lift-1); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease); }
.cert:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.cert__mark { font-weight: 700; color: var(--accent); }
.cert__list li::before { background: var(--accent-2); }
.tally dd { color: var(--accent-2); }
.crest__mark { font-weight: 700; }
.win h3 { font-weight: 600; }
.press { box-shadow: var(--lift-1); }
.press__boiler blockquote { border-left-color: var(--accent-2); }

/* ---------- Contact ---------- */
.contact__form { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 24px; background: var(--bg-raise); border: 1px solid var(--line); box-shadow: var(--lift-1); }
.contact__side > div:first-child { border-top: 0; padding-top: 0; }
.field label { font-weight: 600; }
.faq summary { font-weight: 600; }

/* ---------- Company ---------- */
.result__fig { color: var(--accent-2); }
.stats dd { color: var(--accent); }

@media (max-width: 767px) {
  .tiles--offset .tile:nth-child(odd), .tiles--offset .tile:nth-child(even) { grid-column: 1 / -1; }
  .tiles { gap: 1rem; }
  .wm { font-size: 1.15rem; }
}
/* The head glow must not widen the page. */
.page-head { overflow: hidden; }

/* Services index: each practice leads with its artwork. */
.guide__head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.guide__txt { grid-column: 1 / span 7; display: grid; gap: 1rem; }
.guide__head .guide__intro { grid-column: auto; }
.guide__art { grid-column: 9 / span 4; aspect-ratio: 16 / 11; border-radius: 20px; box-shadow: var(--lift-1); }
.guide { padding-block: clamp(3rem, 6vw, 5rem); }
.section.guide + .section.guide { padding-top: 0; }
@media (max-width: 1023px) { .guide__txt { grid-column: 1 / span 8; } .guide__art { grid-column: 1 / span 6; margin-top: 1.5rem; } }
@media (max-width: 767px) { .guide__txt, .guide__art { grid-column: 1 / -1; } }

/* ===================================================================
   Credential and company pages: real badge and logo images, and the
   legal text shell. Everything else on those pages reuses the classes
   above. Partner and certificate marks ship on white, so they sit on a
   small white panel in both themes rather than fighting the dark surface.
   =================================================================== */
.plate__logo { position: absolute; top: 1.2rem; left: 1.4rem; display: inline-flex; align-items: center; height: 56px; max-width: calc(100% - 2.8rem); padding: 0.45rem 0.7rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.plate__logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.plate__logo--lg { position: static; height: 72px; max-width: 100%; }
.badge { display: block; padding: 1.1rem; border-radius: 20px; background: #fdf9f0; border: 1px solid var(--line); box-shadow: var(--lift-1); }
.badge img { width: 100%; height: auto; }
.cert__mark { overflow: hidden; }
.cert__mark img { width: 100%; height: 100%; object-fit: cover; }
.press__facts dd a, .press__contact .link { word-break: break-word; }
.legal { max-width: 46rem; color: var(--fg-2); line-height: 1.7; }
.legal h2 { margin: 2.25rem 0 0.75rem; font-size: var(--step-1); font-weight: 600; letter-spacing: -0.025em; color: var(--fg); }
.legal h1 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.03em; color: var(--fg); margin-bottom: 1rem; }
.legal p { margin-top: 1rem; }
.legal h2 + p, .legal h1 + p { margin-top: 0; }
.legal ul, .legal ol { list-style: disc; padding-left: 1.4rem; margin: 0.75rem 0 1rem; display: grid; gap: 0.4rem; }
.legal ol { list-style: decimal; }
.legal strong { color: var(--fg); font-weight: 600; }
.legal a { color: var(--fg); }
.legal address { font-style: normal; margin: 1rem 0; padding-left: 1.1rem; border-left: 2px solid var(--line-strong); color: var(--fg); }
.legal .policy-meta { margin-top: 0.25rem; }
.legal .policy-notice { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-raise); }
.legal .policy-copyright { margin-top: 2.5rem; font-size: var(--step--1); color: var(--fg-3); }
.legal .policy_embed_div { min-height: 8rem; }

/* ---------- hybrid AI promoted above the fold ----------
   The human/AI split used to sit four sections into the article. It is the
   frame for the whole page, not a detail inside it, so it now lives in the
   balance card directly under the page head. The card keeps its meter and
   gains the two lines that say what each side actually does. */
.balance-card { align-items: start; row-gap: 1.5rem; }
.balance-card__split { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem var(--gutter); border-top: 1px solid var(--line); padding-top: 1.35rem; }
.balance-card__split .split-text { margin: 0 !important; font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }
.balance-card__split .split-text strong { color: var(--fg); font-weight: 500; }
.balance-card__split .split-text + .split-text { margin-top: 0 !important; }
.balance-card__label, .balance-card__meter, .balance-card__read { align-self: center; }

@media (max-width: 860px) {
  .balance-card__split { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}

/* Industry pages carry the same framing without a meter: a sector has no one
   typical human/AI ratio, and inventing a number would be dishonest. */
.balance-card--plain { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.balance-card--plain .balance-card__label { grid-column: 1 / span 3; align-self: start; }
.balance-card--plain .balance-card__split { grid-column: 4 / -1; border-top: 0; padding-top: 0; }
@media (max-width: 860px) {
  .balance-card--plain .balance-card__label, .balance-card--plain .balance-card__split { grid-column: 1 / -1; }
}

/* ---------- section eyebrow, hero spacing and emphasis ----------
   Five fixes from review:
   1. The hero badge was a capsule while every other section eyebrow was a
      28px dash plus text. Two different treatments for the same role, so the
      eyebrow now uses the hero's capsule everywhere and the dash is gone.
   2. Inner page heads opened with ~200px of empty space above the h1.
   3. The standfirst under a section heading read as body text and got lost
      between the heading and the cards; it is now a deck line, set larger and
      lighter with a rule, rather than bold or italic which would date badly.
   4. The numbers in a how-it-works list sat at accent blue on near-black and
      read as dim; they are now larger and full strength. */

.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.42rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-raise);
  box-shadow: var(--lift-1), inset 0 1px 0 var(--sheen);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--fg-2); white-space: nowrap;
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.kicker__line { display: none; }

/* 2. tighter page head */
.page-head { padding-top: calc(72px + clamp(2rem, 4.5vw, 4rem)); padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }

/* 3. the standfirst under a section heading */
.probs__head > p {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.45;
  color: var(--fg); font-weight: 400; text-wrap: balance;
  border-left: 2px solid var(--accent); padding-left: 1.1rem;
}

/* 4. how-it-works numbers */
.howto li { grid-template-columns: 3.25rem minmax(0, 1fr); }
.howto__n { font-size: var(--step-1); font-weight: 600; color: var(--fg); opacity: 1; }
.howto__n::after { content: ""; display: block; width: 1.5rem; height: 2px; background: var(--accent); margin-top: 0.5rem; border-radius: 2px; }

@media (max-width: 860px) {
  .probs__head > p { font-size: 1.0625rem; }
  .howto li { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

/* The eyebrow is a grid item in several section heads, so it stretched to the
   full column span once it became a capsule. Keep it to its content. */
.kicker { justify-self: start; align-self: start; width: fit-content; max-width: 100%; white-space: normal; }

/* tighter still: the page head was opening with roughly a fifth of the fold empty */
.page-head { padding-top: calc(72px + clamp(1.25rem, 3vw, 2.75rem)); }

/* The section caption is now the heading element, so it must not inherit h2
   sizing or spacing; the display line beside it is a div and keeps the look. */
h2.kicker { font-size: 0.75rem; font-weight: 500; line-height: 1.4; margin: 0; letter-spacing: 0.06em; }
.h-page, .h-section { margin: 0; }


/* ---------- mobile fixes ----------
   The queue row is a flex container, and its label span had no min-width:0,
   so it refused to shrink below its text width and pushed the status chip off
   the right edge of the card. At 390px the rows were 354px inside a 300px
   parent and every chip was clipped. */
.q, .q__item { min-width: 0; max-width: 100%; }
.q__item > span:first-child { min-width: 0; flex: 1 1 auto; }
.q__item > .chip { flex: 0 0 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 480px) {
  .q__item { padding: 0.5rem 0.7rem; font-size: 0.8125rem; gap: 0.5rem; }
  .q__item > .chip { font-size: 0.6875rem; max-width: 42%; }
}

/* The step list dimmed every item to 38% and lit only the one you had scrolled
   to. With four of five always near-invisible the list could not be read at a
   glance, which defeats the point of a numbered list. The active step is still
   distinguished, by the number going full strength and the body lifting, but
   every step stays legible. */
.steps--track .step { opacity: 0.78; transition: opacity 0.5s var(--ease); }
.steps--track .step.is-active { opacity: 1; }
.step__n { color: var(--fg-2); opacity: 0.6; }
.step.is-active .step__n { color: var(--accent-2); opacity: 1; }

/* Netlify honeypot: a real field that must stay invisible to people and
   reachable by a bot. Not display:none, which some bots skip.
   (Restored here after a merge conflict dropped it.) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- the three problem panels ----------
   Each card shows the problem it describes rather than an abstract gradient:
   a search result with the reader's business missing, a campaign report with
   no attribution, an order queue backing up. One structure across all three -
   header line, rows, a summary, then the line that names the problem - so the
   three share a height and read as a set.

   Deliberately not facsimiles of any particular product: no wordmarks, no
   borrowed iconography, built in this site's own type and colour. The names
   and figures are invented, because putting real businesses or real numbers
   into a fabricated screen states something that is not ours to state.

   Sizing: the art is a fixed ratio of the card, so the panel inside it is
   sized from the CARD's width, not the viewport. Three cards at 1024px and one
   card at 390px are both narrow, and a viewport breakpoint cannot tell them
   apart - which is why the panel used to clip its last two lines in the 3-up
   band. Everything below is in em off a cqi root, so the whole panel scales
   with the box it sits in and the line wrapping stays put. The top padding is
   the one exception: it clears the number and the chip, which are rem. */
.prob__art { aspect-ratio: 4 / 3.2; container-type: inline-size; }
.pnl {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 2.75rem 1.15em 1em; overflow: hidden;
  background: radial-gradient(120% 80% at 88% 0%, rgba(106,147,245,0.15), transparent 62%), #0b0d14;
  font-size: clamp(8px, 2.85cqi, 11.8px); line-height: 1.25; color: rgba(236,238,242,0.82);
}
.pnl--spend { background: radial-gradient(120% 80% at 88% 0%, rgba(46,224,174,0.13), transparent 62%), #0b0d14; }
.pnl--build { background: radial-gradient(120% 80% at 88% 0%, rgba(139,124,246,0.13), transparent 62%), #0b0d14; }

.pnl__q { margin: 0 0 0.6em; display: flex; gap: 0.45em; align-items: center;
  color: #eceef2; font-weight: 500; font-size: 1.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl__ic { color: #6a93f5; font-size: 1.08em; flex: none; }
.pnl--spend .pnl__ic { color: #2ee0ae; }
.pnl--build .pnl__ic { color: #a79bff; }

.pnl__rows { list-style: none; margin: 0; padding: 0.6em 0 0; display: grid; gap: 0.55em;
  border-top: 1px solid rgba(236,238,242,0.1); flex: 0 0 auto; }
.pnl__rows li { display: flex; gap: 0.6em; align-items: center; min-width: 0; }

/* listings: the little photo beside each result */
.pnl__thumb { flex: none; width: 2.1em; height: 2.1em; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.pnl__thumb--a { background: linear-gradient(140deg,#c2410c,#f59e0b 55%,#fde68a); }
.pnl__thumb--b { background: linear-gradient(140deg,#7f1d1d,#dc2626 50%,#fca5a5); }
.pnl__thumb--c { background: linear-gradient(140deg,#78350f,#d97706 55%,#fcd34d); }

/* spend: a colour key per channel. The share sits in the right column as a
   number, the same place the queue card puts its waiting time, so the three
   panels line up column for column. */
.pnl__bar { flex: none; width: 2.1em; height: 2.1em; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.pnl__bar--a { background: linear-gradient(140deg,#2ee0ae,#15806a); }
.pnl__bar--b { background: linear-gradient(140deg,#27c89a,#12705d); }
.pnl__bar--c { background: linear-gradient(140deg,#1fae87,#0f5c4c); }

/* queue: an order number */
.pnl__id { flex: none; width: 2.6em; font-size: 0.88em; color: rgba(236,238,242,0.45);
  font-variant-numeric: tabular-nums; }
.pnl__age { flex: none; margin-left: auto; font-size: 0.88em; color: rgba(236,238,242,0.45);
  font-variant-numeric: tabular-nums; }
.pnl__age--late { color: #f0a868; }

.pnl__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pnl__body b { color: #eceef2; font-weight: 500; font-size: 1.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl__meta { color: rgba(236,238,242,0.5); font-size: 0.9em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl__rate { color: #fbbf24; }

.pnl__quote { margin: 0.65em 0 0; display: flex; align-items: baseline; gap: 0.35em;
  padding-top: 0.65em; border-top: 1px solid rgba(236,238,242,0.1);
  color: rgba(236,238,242,0.6); font-size: 0.92em; line-height: 1.3; font-style: italic; }
.pnl__qm { color: rgba(236,238,242,0.35); font-size: 1.25em; line-height: 0; }
.pnl__qsrc { margin-left: auto; flex: none; font-style: normal; font-size: 0.84em;
  color: rgba(236,238,242,0.38); letter-spacing: 0.03em; white-space: nowrap; }

.pnl__ai { margin: 0.65em 0 0.3em; display: flex; align-items: center; gap: 0.4em;
  color: #8ab4ff; font-size: 0.92em; letter-spacing: 0.03em; }
.pnl--spend .pnl__ai { color: #6fe3c0; }
.pnl--build .pnl__ai { color: #b3a7ff; }
.pnl__spark { font-size: 1.08em; }
.pnl__sum { margin: 0; color: rgba(236,238,242,0.72); font-size: 0.95em; line-height: 1.35; }
.pnl__sum u { text-decoration-color: rgba(138,180,255,0.5); text-underline-offset: 2px; color: #cdd7ea; }

/* the line that names the problem, pinned to the bottom of the panel */
.pnl__miss { margin: auto 0 0; display: flex; gap: 0.5em; align-items: baseline;
  padding-top: 0.65em; border-top: 1px dashed rgba(236,238,242,0.22);
  color: rgba(236,238,242,0.55); }
.pnl__x { flex: none; width: 1em; color: rgba(236,238,242,0.45); }
.pnl__note { margin-left: auto; flex: none; font-size: 0.9em; color: rgba(236,238,242,0.5); }