/* Hallmark · macrostructure: Split Studio · H2 diptych knobs: ratio=7/5, right=dark dashboard panel, divider=negative space
 * theme: studied-DNA (source: https://www.chaseai.io/) · studied: yes · DNA-source: url
 * paper: oklch(98.6% 0.005 85) (source #fffcfa warm cream) · ink: oklch(22% 0.012 60) (source #1c1917)
 * accent: oklch(48% 0.14 152) — PFMarkets brand green re-anchored for light paper (source accent was terracotta #c4653a; theme drift kept the brand)
 * display: Geist 700 + Instrument Serif 400 roman accent words (source: Inter + Instrument Serif; Inter swapped — banned default)
 * nav: N1b · footer: Ft1 mast-headed (source's Ft3 index rejected — AI-footer fingerprint) · rejected: fake code-editor chrome, per-section eyebrows
 * enrichment: animated dashboard demo — re-themed light-native from the Claude Design source (project 7cd1817a…) to sit seamlessly on cream
 * motion: hero-stagger · cta-lift · modal-scale · dash-loop
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 */

:root {
  /* color — studied DNA (chaseai.io): warm cream paper, warm ink, brand green re-anchored dark for light surfaces */
  --color-paper:      oklch(98.6% 0.005 85);
  --color-paper-2:    oklch(96.6% 0.007 85);
  --color-paper-3:    oklch(94% 0.009 85);
  --color-ink:        oklch(22% 0.012 60);
  --color-ink-2:      oklch(36% 0.012 60);
  --color-muted:      oklch(44% 0.012 60);
  --color-rule:       oklch(87% 0.010 80);
  --color-rule-2:     oklch(91% 0.008 80);
  --color-accent:       oklch(48% 0.14 152);   /* brand green, darkened for cream paper */
  --color-accent-hover: oklch(42% 0.13 152);
  --color-accent-dim:   oklch(48% 0.14 152 / 0.10);
  --color-brand:        oklch(78% 0.19 152);   /* raw #22E06B — brand reference (dark-surface use only) */
  --color-accent-ink:   oklch(98.6% 0.005 85); /* cream text on accent fill */
  --color-focus:        oklch(50% 0.17 152);
  --color-error:        oklch(52% 0.19 25);
  --color-error-dim:    oklch(52% 0.19 25 / 0.08);
  --color-backdrop:     oklch(25% 0.02 60 / 0.45);
  --color-shadow:       oklch(35% 0.03 60 / 0.14);

  /* type */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-serif:   "Instrument Serif", ui-serif, Georgia, serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-display: clamp(2.6rem, 4.5vw + 1rem, 4.9rem);

  /* space (4pt) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* shape — rounded brand, no hard edges */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-pill: 999px;
  --rule-hair: 1px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* z scale */
  --z-sticky: 200;
  --z-modal:  400;

  --page-max: 72rem;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); font-weight: 700; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.25; }
/* the studied signature: one roman serif word inside a sans headline */
.serif-word {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 1.08em;
  line-height: 1;
  letter-spacing: -0.01em;
}
.serif-word--accent { color: var(--color-accent); }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  position: relative;
  z-index: 1;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform 100ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--fill { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover { transform: translateY(-1.5px); background: var(--color-accent-hover); }
  .btn--fill:hover:active { transform: translateY(1px); }
  .btn--outline:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
}
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn .spinner {
  width: 1em; height: 1em;
  border: 2px solid var(--color-accent-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: none;
}
.btn[data-state="loading"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.link-quiet {
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
}
@media (hover: hover) { .link-quiet:hover { color: var(--color-ink); } }
.link-quiet:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- nav (N1b) ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: var(--rule-hair) solid transparent;
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.nav.is-scrolled {
  background: color-mix(in oklch, var(--color-paper) 78%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--color-rule-2);
}
.nav__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__brand {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.nav__brand em { font-style: normal; color: var(--color-accent); }
.nav__brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.nav__center { justify-self: center; display: flex; gap: 0.35rem; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: var(--space-sm); }
.nav__phone {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
}
@media (hover: hover) { .nav__phone:hover { color: var(--color-ink); } }
.nav__phone:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) {
  .nav__center { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__right { justify-self: end; }
}
@media (max-width: 40rem) {
  .nav__login { display: none; }
  .nav__phone span { display: none; }        /* number hides; "Call" label remains */
  .nav__phone::before { content: "Call"; font-weight: 600; color: var(--color-ink); }
}

/* ---------- hero ---------- */
.hero {
  padding-block: calc(68px + var(--space-2xl)) var(--space-3xl);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}
.hero__copy { max-width: 34rem; }
.hero__lede {
  margin-top: var(--space-lg);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: 32rem;
}
.hero__ctas {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.hero__note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
@media (max-width: 60rem) {
  .hero { padding-top: calc(68px + var(--space-2xl)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* hero dashboard demo — animated 11s loop, from the user's Claude Design handoff.
   Three layers cycle: leads counter + climbing graph → calendar filling → revenue bars.
   Counters are driven by JS synced to the same 11s loop. Illustrative demo, captioned as such. */
.dash-wrap { margin: 0; min-width: 0; }
.dash {
  /* light-native panel — the Claude Design source (built for the old dark site) re-themed
     onto the site's cream system so it reads as part of the page, not a leftover.
     Only the dash-specific ramp/glow tokens are scoped; everything else inherits. */
  --color-accent-2:    oklch(70% 0.11 152);   /* revenue bar ramp, mid */
  --color-accent-3:    oklch(86% 0.06 152);   /* revenue bar ramp, light */
  --color-accent-glow: oklch(48% 0.14 152 / 0.14);
  --color-accent-halo: oklch(48% 0.14 152 / 0.4);
  --color-flatline:    oklch(76% 0.012 80);   /* "quiet phone" line, light grey */
  position: relative;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  box-shadow: 0 24px 60px -28px var(--color-shadow);
}
.dash__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.dash__live-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-halo);
  animation: dash-live 1.8s var(--ease-out) infinite;
  flex: none;
}
.dash__title { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-2); }
.dash__tag {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}
.dash__body { position: relative; height: clamp(17rem, 38vw, 21rem); }
.dash__layer { position: absolute; inset: 0; }
.dash__layer--leads { animation: dash-layer-leads 11s var(--ease-out) infinite; }
.dash__layer--cal   { animation: dash-layer-cal 11s var(--ease-out) infinite; }
.dash__layer--rev   { display: flex; flex-direction: column; animation: dash-layer-rev 11s var(--ease-out) infinite; }
.dash__label { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }
.dash__figrow { display: flex; align-items: baseline; gap: var(--space-sm); }
.dash__num {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.dash__num--xl { font-size: clamp(3rem, 4.5vw, 4.4rem); color: var(--color-accent); }
.dash__num--lg { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
.dash__unit { font-size: 0.45em; font-family: var(--font-body); font-weight: 500; color: var(--color-muted); margin-left: var(--space-2xs); }
.dash__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.dash__sub { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.dash__spark {
  position: absolute;
  top: 0; left: -6px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-glow), transparent 70%);
  animation: dash-spark 11s var(--ease-out) infinite;
  pointer-events: none;
}
.dash__graph { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(9rem, 16vw, 12.5rem); }
.dash__graph svg { width: 100%; height: 100%; overflow: visible; display: block; }
.dash__grid-line { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 6; }
.dash__flat { stroke: var(--color-flatline); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: dash-flat-op 11s var(--ease-out) infinite; }
.dash__area { animation: dash-area-op 11s var(--ease-out) infinite; }
.dash__climb {
  stroke: var(--color-accent);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: dash-climb-op 11s var(--ease-out) infinite, dash-climb-draw 11s var(--ease-out) infinite;
}
.dash__dot { fill: var(--color-accent); animation: dash-dot 11s var(--ease-out) infinite; }
.dash__dotring { fill: var(--color-accent); opacity: 0.25; transform-origin: 338px 10px; animation: dash-dotring 11s var(--ease-out) infinite; }
.dash__cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(var(--space-2xs), 1vw, var(--space-xs));
  margin-top: var(--space-md);
}
.dash__day { text-align: center; font-size: 0.6875rem; font-weight: 600; color: var(--color-muted); }
.dash__cell { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-paper-3); }
.dash__cell--on { background: var(--color-accent); transform-origin: center; }
.dash__cell--a { animation: dash-cell-a 11s var(--ease-out) infinite; }
.dash__cell--b { animation: dash-cell-b 11s var(--ease-out) infinite; }
.dash__cell--c { animation: dash-cell-c 11s var(--ease-out) infinite; }
.dash__bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: clamp(var(--space-xs), 2vw, var(--space-md));
  padding-top: var(--space-md);
}
.dash__bar-track { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.dash__bar { width: 100%; height: 100%; border-radius: var(--radius-sm) var(--radius-sm) 4px 4px; transform-origin: bottom; }
.dash__bar--1 { background: var(--color-paper-3); animation: dash-bar-1 11s var(--ease-out) infinite; }
.dash__bar--2 { background: var(--color-accent-3); animation: dash-bar-2 11s var(--ease-out) infinite; }
.dash__bar--3 { background: var(--color-accent-2); animation: dash-bar-3 11s var(--ease-out) infinite; }
.dash__bar--4 { background: var(--color-accent); animation: dash-bar-4 11s var(--ease-out) infinite; }
.dash__toasts {
  position: absolute;
  top: 58px;
  right: clamp(var(--space-md), 2vw, var(--space-lg));
  left: clamp(60px, 30%, 160px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  pointer-events: none;
}
.dash__toast {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  box-shadow: 0 12px 30px -12px var(--color-shadow);
}
.dash__toast--1 { animation: dash-toast-1 11s var(--ease-out) infinite; }
.dash__toast--2 { animation: dash-toast-2 11s var(--ease-out) infinite; }
.dash__toast--3 { animation: dash-toast-3 11s var(--ease-out) infinite; }
.dash__toast i {
  flex: none;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-halo);
}
.dash__toast span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash__note {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* dashboard keyframes — one 11s loop */
@keyframes dash-live { 0%, 100% { opacity: 0.35; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1); } }
@keyframes dash-layer-leads { 0% { opacity: 1; } 45% { opacity: 1; } 48% { opacity: 0; } 81% { opacity: 0; } 84% { opacity: 1; } 100% { opacity: 1; } }
@keyframes dash-layer-cal { 0%, 44% { opacity: 0; } 47% { opacity: 1; } 62% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes dash-layer-rev { 0%, 63% { opacity: 0; } 66% { opacity: 1; } 80% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes dash-climb-draw { 0%, 16% { stroke-dashoffset: 1; } 44% { stroke-dashoffset: 0; } 91% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes dash-climb-op { 0%, 17% { opacity: 0; } 21% { opacity: 1; } 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes dash-area-op { 0%, 20% { opacity: 0; } 30% { opacity: 1; } 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes dash-flat-op { 0% { opacity: 1; } 13% { opacity: 1; } 17% { opacity: 0; } 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes dash-dot { 0%, 40% { opacity: 0; } 45% { opacity: 1; } 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes dash-dotring { 0%, 42% { opacity: 0; transform: scale(0.4); } 46% { opacity: 0.7; transform: scale(1); } 60% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes dash-spark { 0%, 14% { opacity: 0; transform: scale(0.4); } 18% { opacity: 0.85; transform: scale(1); } 26% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }
@keyframes dash-cell-a { 0%, 47% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1); } 62% { opacity: 1; } 65%, 100% { opacity: 0; transform: scale(0.3); } }
@keyframes dash-cell-b { 0%, 49% { opacity: 0; transform: scale(0.3); } 52% { opacity: 1; transform: scale(1); } 62% { opacity: 1; } 65%, 100% { opacity: 0; transform: scale(0.3); } }
@keyframes dash-cell-c { 0%, 51% { opacity: 0; transform: scale(0.3); } 54% { opacity: 1; transform: scale(1); } 62% { opacity: 1; } 65%, 100% { opacity: 0; transform: scale(0.3); } }
@keyframes dash-bar-1 { 0%, 66% { transform: scaleY(0.12); } 71% { transform: scaleY(0.42); } 80% { transform: scaleY(0.42); } 100% { transform: scaleY(0.12); } }
@keyframes dash-bar-2 { 0%, 67% { transform: scaleY(0.12); } 72% { transform: scaleY(0.62); } 80% { transform: scaleY(0.62); } 100% { transform: scaleY(0.12); } }
@keyframes dash-bar-3 { 0%, 68% { transform: scaleY(0.12); } 73% { transform: scaleY(0.82); } 80% { transform: scaleY(0.82); } 100% { transform: scaleY(0.12); } }
@keyframes dash-bar-4 { 0%, 69% { transform: scaleY(0.12); } 74% { transform: scaleY(1); } 80% { transform: scaleY(1); } 100% { transform: scaleY(0.12); } }
@keyframes dash-toast-1 { 0%, 18% { opacity: 0; transform: translateX(38px) scale(0.96); } 22% { opacity: 1; transform: none; } 44% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateX(38px) scale(0.96); } }
@keyframes dash-toast-2 { 0%, 24% { opacity: 0; transform: translateX(38px) scale(0.96); } 28% { opacity: 1; transform: none; } 50% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateX(38px) scale(0.96); } }
@keyframes dash-toast-3 { 0%, 30% { opacity: 0; transform: translateX(38px) scale(0.96); } 34% { opacity: 1; transform: none; } 56% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateX(38px) scale(0.96); } }

/* ---------- trust bar ---------- */
.trust { padding-block: var(--space-xl) var(--space-2xl); }
.trust__label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.trust__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
}
.slot {
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
  color: var(--color-muted);
  font-size: 0.8125rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-sm);
  min-height: 64px;
  line-height: 1.35;
}
@media (max-width: 60rem) { .trust__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trust__row .slot:nth-child(n+4) { display: none; } }

/* ---------- section rhythm ---------- */
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--band {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.section__head { max-width: 40rem; margin-bottom: var(--space-xl); }
.section__head p { margin-top: var(--space-md); color: var(--color-ink-2); }

/* ---------- services cards ---------- */
.svc-list {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;   /* deliberately uneven */
  gap: var(--space-lg);
}
.svc {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}
.svc p { color: var(--color-ink-2); }
.svc__for { font-size: var(--text-sm); color: var(--color-muted); }
.svc__for strong { color: var(--color-ink-2); font-weight: 600; }
@media (max-width: 60rem) {
  .svc-list { grid-template-columns: minmax(0, 1fr); }
  .svc { padding: var(--space-lg); }
}

/* ---------- operator diptych ---------- */
.operator {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: center;
}
.operator__photo { min-height: 320px; }
.operator__copy p { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 34rem; }
.operator__copy p:first-of-type { margin-top: var(--space-lg); }
@media (max-width: 60rem) {
  .operator { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .operator__photo { order: 2; min-height: 220px; }
}

/* ---------- steps ---------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.9fr;   /* deliberately uneven */
  gap: var(--space-lg);
  counter-reset: step;
}
.steps li {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.steps .stage {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-accent);
  font-size: var(--text-xl);
  line-height: 1;
  margin-bottom: var(--space-sm);
}
.steps h3 { margin-bottom: var(--space-xs); }
.steps p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
.steps .steps__meta { color: var(--color-muted); font-size: 0.8125rem; margin-top: var(--space-sm); }
@media (max-width: 60rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- results ---------- */
.results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.metric {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  align-content: start;
}
.metric__value {
  min-height: 72px;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-sm);
}
.metric__ctx { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5; }
.metric .slot { aspect-ratio: 16 / 10; min-height: 0; }
@media (max-width: 60rem) { .results__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- other industries strip ---------- */
.also {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.also .wrap {
  padding-block: var(--space-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
}
.also p { color: var(--color-ink-2); max-width: 46rem; }
.also p strong { color: var(--color-ink); }
@media (max-width: 60rem) { .also .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- closing CTA ---------- */
.close-cta { padding-block: var(--space-3xl); }
.close-cta__box {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-xl), 5vw, var(--space-2xl));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: center;
}
.close-cta__box p { color: var(--color-ink-2); margin-top: var(--space-md); max-width: 32rem; }
@media (max-width: 60rem) { .close-cta__box { grid-template-columns: minmax(0, 1fr); } }
.expect {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.expect li {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}
.expect li::before {
  content: "✓";
  color: var(--color-accent);
  font-weight: 700;
  flex: none;
}

/* ---------- footer (Ft1 mast-headed) ---------- */
.foot { padding: var(--space-3xl) 0 var(--space-xl); }
.foot__mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: start;
  padding-bottom: var(--space-xl);
}
.foot__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}
.foot__brand em { font-style: normal; color: var(--color-accent); }
.foot__tag { margin-top: var(--space-xs); color: var(--color-muted); max-width: 38ch; font-size: var(--text-sm); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.foot__links a { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); }
@media (hover: hover) { .foot__links a:hover { color: var(--color-ink); } }
.foot__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foot__meta {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
@media (max-width: 60rem) { .foot__mast { grid-template-columns: minmax(0, 1fr); } }

/* ---------- modal + form ---------- */
dialog.qual {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 34rem);
  max-height: min(88dvh, 46rem);
  height: fit-content;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  z-index: var(--z-modal);
}
dialog.qual::backdrop { background: var(--color-backdrop); }
dialog.qual[open] { animation: modal-in var(--dur-long) var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
dialog.qual.is-booking { width: min(96vw, 52rem); }

.qual__inner { padding: var(--space-xl); }
.qual__top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.qual__top h2 { font-size: var(--text-lg); }
.qual__close {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule);
  background: transparent;
  color: var(--color-ink-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .qual__close:hover { color: var(--color-ink); border-color: var(--color-ink-2); } }
.qual__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.qual__progress { margin-bottom: var(--space-lg); }
.qual__progress-label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--space-xs);
}
.qual__bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  overflow: hidden;
}
.qual__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(0.2);   /* endowed progress — opening the form counts as the first 20% */
  transition: transform var(--dur-short) var(--ease-out);
}

.qual fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qual fieldset[hidden] { display: none; }
.qual legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  padding: 0;
  margin-bottom: var(--space-lg);
}
.field { margin-bottom: var(--space-md); }
.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-rule);         /* 1px in every state — no width shift */
  outline: 2px solid transparent;               /* reserved focus slot */
  outline-offset: 1px;
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input::placeholder { color: var(--color-muted); }
@media (hover: hover) {
  .field input:hover, .field select:hover { background: var(--color-paper-2); }
}
.field input:focus-visible, .field select:focus-visible {
  outline-color: var(--color-focus);
  border-color: var(--color-ink-2);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-error); }
.field .hint {
  min-height: 1lh;
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-top: var(--space-2xs);
}
.field .hint.is-error { color: var(--color-error); }

.choices { display: grid; gap: var(--space-xs); }
.choices--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 26rem) { .choices--2col { grid-template-columns: minmax(0, 1fr); } }
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
  font-size: var(--text-sm);
}
@media (hover: hover) { .choice:hover { background: var(--color-paper-3); } }
.choice input { accent-color: var(--color-accent); width: 1.1rem; height: 1.1rem; flex: none; margin: 0; }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-dim); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 1px; }

.qual__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.qual__nav .btn--back { border-color: transparent; color: var(--color-ink-2); }
@media (hover: hover) { .qual__nav .btn--back:hover { color: var(--color-ink); background: var(--color-paper-3); } }

.form-error {
  display: none;
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-error);
  background: var(--color-error-dim);
}
.form-error.is-visible { display: block; }

.booking { display: none; }
.booking.is-visible { display: block; }
.booking__lede { color: var(--color-ink-2); margin: var(--space-sm) 0 var(--space-lg); }
.calendly-inline-widget { min-width: 280px; height: 640px; border-radius: var(--radius-md); }
.booking__loading { color: var(--color-muted); font-size: var(--text-sm); padding: var(--space-xl) 0; }

/* ---------- load reveal (hero only — one orchestrated entrance) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .btn .spinner { animation-duration: 700ms !important; animation-iteration-count: infinite !important; }

  /* dashboard demo: freeze on the "climbed" leads view, hide cycling layers */
  .dash *, .dash { animation: none !important; }
  .dash__layer--cal, .dash__layer--rev, .dash__toasts, .dash__spark, .dash__flat { display: none; }
  .dash__climb, .dash__area, .dash__dot { opacity: 1; }
  .dash__climb { stroke-dashoffset: 0; }
  .dash__dotring { opacity: 0; }
  .dash__live-dot { opacity: 1; transform: none; }
}