/* Self-hosted subset (latin only). Google Fonts cost 797ms of render-blocking
   time on production: DNS + TLS + CSS round trip before a glyph could load.
   Served from our own origin these are same-connection and preloadable. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/archivo-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/archivo-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/archivo-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/instrument-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/instrument-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Kalibr — kalibrgrowth.com
   Dark, precision-instrument design system. Archivo display / Instrument Sans
   body / JetBrains Mono for data + micro-labels.
   Palette: ink #0A0A0B–#0C0C0C · paper #F5F7F8 · brand green #0F9D58.
   Motion is orchestrated by assets/app.js (GSAP); everything here must read
   perfectly with JS disabled — initial hidden states are gated behind
   html.motion-ok, which only JS adds.
   ========================================================================== */

:root {
  --ink: #0A0A0B;
  --ink-2: #0C0C0C;
  --ink-3: #111113;
  --paper: #F5F7F8;
  --paper-2: #EDF0F2;
  --white: #FFFFFF;
  --green: #0F9D58;
  --green-hi: #1DBE72;
  --green-dark: #0B7D45;
  --green-deep: #096237;
  --green-glow: rgba(15, 157, 88, 0.35);
  --grey: #A6ADB4;
  --grey-2: #6D737A;
  --grey-3: #2C2C2C;
  --line-d: rgba(255, 255, 255, 0.08);
  --line-l: #E4E8EB;
  --font-d: 'Archivo', system-ui, sans-serif;
  --font-b: 'Instrument Sans', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

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

/* Section shells ---------------------------------------------------------- */
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
section { position: relative; }

.light {
  background: var(--paper);
  color: var(--ink-2);
}
.light.alt { background: var(--white); }

/* Eyebrow / headings ------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-m);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green-glow);
  animation: kpulse 2s infinite;
}

.h-display {
  font-family: var(--font-d);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}
h2.h-display { font-size: clamp(34px, 4.6vw, 58px); }

.sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--grey);
}
.light .sub { color: #696F76; }

.sec-head { max-width: 680px; margin-bottom: clamp(44px, 6vw, 72px); }

/* Split-text internals (built by JS) -------------------------------------- */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; will-change: transform; }
.w { display: inline-block; }

/* ==========================================================================
   Preloader
   ========================================================================== */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px;
}
#loader .loader-mark { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(15,157,88,.25)); }
#loader .loader-word {
  font-family: var(--font-d);
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.55em; text-indent: 0.55em;
  color: var(--white);
  display: flex;
}
#loader .loader-word span { display: inline-block; }
#loader .loader-bar {
  width: min(220px, 50vw); height: 1px;
  background: var(--line-d);
  position: relative; overflow: hidden;
}
#loader .loader-bar i {
  position: absolute; inset: 0;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  display: block;
}
#loader .loader-num {
  font-family: var(--font-d); font-weight: 600;
  font-size: 12px; letter-spacing: 0.2em;
  color: var(--grey-2);
  font-variant-numeric: tabular-nums;
}
html:not(.motion-ok) #loader { display: none; }

/* ==========================================================================
   Brand cursor: the Kalibr arrow, everywhere except text fields (which keep
   a caret so typing feels normal). Falls back to the normal pointer/arrow if
   the image can't load. Hotspot = the arrow's tip.
   ========================================================================== */
html {
  cursor: url('cursor.png?v=2') 22 3, auto;
  cursor: -webkit-image-set(url('cursor.png?v=2') 1x, url('cursor-2x.png?v=2') 2x) 22 3, auto;
  cursor: image-set(url('cursor.png?v=2') 1x, url('cursor-2x.png?v=2') 2x) 22 3, auto;
}
a[href], button, [role="button"], summary, label[for] {
  cursor: url('cursor.png?v=2') 22 3, pointer !important;
  cursor: -webkit-image-set(url('cursor.png?v=2') 1x, url('cursor-2x.png?v=2') 2x) 22 3, pointer !important;
  cursor: image-set(url('cursor.png?v=2') 1x, url('cursor-2x.png?v=2') 2x) 22 3, pointer !important;
}
input, textarea, select { cursor: text; }

/* ==========================================================================
   Nav
   ========================================================================== */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: transform .45s var(--ease-out), background-color .35s ease,
              border-color .35s ease;
  border-bottom: 1px solid transparent;
}
#nav.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line-d);
}
#nav.is-hidden { transform: translateY(-100%); }

#nav .nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(145deg, #1B1B1E, #0A0A0B);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4);
}
.brand-mark img { width: 21px; height: 21px; object-fit: contain; }
.brand-word {
  font-family: var(--font-d); font-weight: 600;
  font-size: 17px; letter-spacing: 0.22em; text-indent: 0.05em;
  color: var(--white);
}

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  position: relative;
  font-family: var(--font-d); font-weight: 500;
  font-size: 14px; letter-spacing: 0.01em;
  color: var(--grey);
  transition: color .25s ease;
  padding: 6px 0;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--green);
  transition: right .3s var(--ease-out);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after { right: 0; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-d); font-weight: 600; font-size: 15px;
  padding: 15px 30px; border-radius: 999px;
  border: none; cursor: pointer;
  overflow: hidden;
  /* No `transform` in this transition: the magnetic effect (GSAP) drives
     transform per-frame, and a CSS transition fighting it makes CTAs jitter. */
  transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.btn .btn-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.btn-fill { position: absolute; inset: 0; z-index: 1; border-radius: inherit; transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease-out); }

.btn--green { background: var(--green-dark); color: #fff; box-shadow: 0 8px 28px -6px var(--green-glow); }
.btn--green .btn-fill { background: var(--green-deep); }
.btn--green:hover .btn-fill, .btn--green:focus-visible .btn-fill { transform: scaleY(1); }
.btn--green:hover { box-shadow: 0 14px 38px -8px var(--green-glow); }

.btn--ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.25); }
.btn--ghost .btn-fill { background: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink-2); border-color: var(--white); }
.btn--ghost:hover .btn-fill, .btn--ghost:focus-visible .btn-fill { transform: scaleY(1); }

.btn--small { font-size: 13.5px; padding: 11px 22px; }
.btn .arr { display: inline-block; transition: transform .3s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* Burger ------------------------------------------------------------------- */
#burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line-d); border-radius: 12px;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  cursor: pointer;
}
#burger i {
  display: block; width: 18px; height: 1.6px; background: var(--white);
  transition: transform .35s var(--ease-out), opacity .25s ease;
}
#burger.is-open i:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
#burger.is-open i:nth-child(2) { opacity: 0; }
#burger.is-open i:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Mobile menu -------------------------------------------------------------- */
#mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 10, 11, 0.97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px 32px 48px;
  visibility: hidden; opacity: 0;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
#mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
#mobile-menu a.mm-link {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(34px, 9vw, 52px); letter-spacing: -0.03em; line-height: 1.22;
  color: var(--white); display: flex; align-items: baseline; gap: 16px;
  padding: 8px 0;
}
#mobile-menu a.mm-link em {
  font-style: normal; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--green);
}
#mobile-menu .mm-cta { margin-top: 36px; align-self: flex-start; }
#mobile-menu .mm-foot { margin-top: auto; color: var(--grey); font-size: 13.5px; }
#mobile-menu .mm-foot a { color: var(--grey); }

/* ==========================================================================
   Hero
   ========================================================================== */
#hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(36px, 7vh, 84px));
  padding-bottom: 40px;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(15, 157, 88, 0.10), transparent 62%),
    radial-gradient(700px 700px at 8% 92%, rgba(15, 157, 88, 0.05), transparent 60%),
    var(--ink);
}
#gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0.9;
}
#hero .hero-grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, black 30%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 40%, black 30%, transparent 100%);
}
#hero .wrap {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
}

.hero-h1 {
  font-size: clamp(38px, 4.8vw, 70px);
  margin-bottom: 26px;
  color: var(--white);
  text-wrap: initial; /* split-lines are already hard line breaks; balance would re-wrap them */
}
.hero-h1 .accent { color: var(--green-hi); }
.hero-sub { max-width: 540px; margin-bottom: 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-trust {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--white);
}
.hero-trust .tick { color: var(--green); font-weight: 700; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--grey-2);
  font-family: var(--font-d); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; text-indent: 0.3em;
}
.scroll-cue i {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--green));
  animation: kcue 2s var(--ease-out) infinite;
}
@keyframes kcue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Dashboard card ----------------------------------------------------------- */
.dash {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255,255,255,.1);
  padding: 24px;
  will-change: transform;
  transform-style: preserve-3d;
}
.dash::before {
  content: ''; position: absolute; inset: -1px; border-radius: 25px; pointer-events: none;
  background: radial-gradient(400px 240px at 20% 0%, rgba(15, 157, 88, 0.14), transparent 65%);
}
.dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dash-id { display: flex; align-items: center; gap: 10px; }
.dash-id .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
.dash-id .brand-mark img { width: 18px; height: 18px; }
.dash-id b { font-family: var(--font-d); font-weight: 600; font-size: 13px; display: block; line-height: 1.15; color: var(--white); }
.dash-id small { font-family: var(--font-m); font-size: 11px; color: var(--grey-2); }
.dash-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-d); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--green-hi);
  background: rgba(15, 157, 88, 0.12);
  border: 1px solid rgba(15, 157, 88, 0.25);
  padding: 6px 11px; border-radius: 999px;
}
.dash-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-hi); animation: kpulse 1.6s infinite;
}
.dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.kpi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px; padding: 14px 16px;
}
.kpi small { display: block; font-family: var(--font-m); font-size: 11.5px; color: var(--grey-2); margin-bottom: 5px; }
.kpi b {
  font-family: var(--font-d); font-weight: 700; font-size: 26px;
  letter-spacing: -0.02em; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.dash-chart {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px; padding: 16px 16px 10px; margin-bottom: 12px;
}
.dash-chart .row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dash-chart small { display: block; font-family: var(--font-m); font-size: 11.5px; color: var(--grey-2); margin-bottom: 3px; }
.dash-chart b { font-family: var(--font-d); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.dash-chart .delta { font-size: 12px; color: var(--green-hi); font-weight: 600; }
.dash-foot { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; font-size: 12.5px; }
.dash-foot span { color: var(--grey-2); }
.dash-foot b { color: var(--white); font-weight: 600; }
.dash-foot b em { font-style: normal; color: var(--green-hi); }

/* ==========================================================================
   Marquee
   ========================================================================== */
#marquee {
  border-top: 1px solid var(--line-d);
  border-bottom: 1px solid var(--line-d);
  background: var(--ink-2);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track span {
  font-family: var(--font-d); font-weight: 600;
  font-size: 13.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--grey-2);
  display: inline-flex; align-items: center;
  padding-right: 20px; white-space: nowrap;
}
.marquee-track span::after {
  content: '✦'; color: var(--green); margin-left: 20px; font-size: 11px;
}
html:not(.motion-ok) .marquee-track { flex-wrap: wrap; }

/* ==========================================================================
   Villain — the reframe
   ========================================================================== */
#villain { background: var(--ink); padding: clamp(110px, 16vh, 190px) 0; }
.villain-statement {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(32px, 5.2vw, 64px);
  line-height: 1.08; letter-spacing: -0.03em;
  max-width: 1050px;
  margin-bottom: clamp(44px, 6vw, 64px);
  text-wrap: balance;
}
.villain-body { max-width: 760px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: var(--grey); margin-bottom: 38px; }
.villain-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(56px, 8vw, 88px); }
.villain-chips span {
  border: 1px solid var(--line-d);
  background: rgba(255, 255, 255, 0.04);
  color: var(--grey);
  font-size: 13.5px; padding: 10px 16px; border-radius: 999px;
  transition: border-color .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.villain-chips span:hover { border-color: rgba(15, 157, 88, 0.55); color: var(--white); transform: translateY(-2px); }

.villain-turn {
  border-left: 2px solid var(--green);
  padding-left: clamp(22px, 3vw, 36px);
  max-width: 800px;
}
.villain-turn h3 {
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -0.015em;
  margin-bottom: 16px; color: var(--white);
}
.villain-turn p { font-size: 16px; line-height: 1.75; color: var(--grey); }

/* ==========================================================================
   Different — mechanisms
   ========================================================================== */
#different { padding: clamp(100px, 14vh, 170px) 0; }
.mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mech {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-l);
  border-radius: 24px;
  padding: 34px 30px 30px;
  overflow: hidden;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
  will-change: transform;
}
.mech::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.mech:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(12, 12, 12, 0.25); }
.mech:hover::after { transform: scaleX(1); }
.mech .mech-num {
  font-family: var(--font-d); font-weight: 700; font-size: 13px;
  letter-spacing: 0.18em; color: var(--green);
  display: block; margin-bottom: 46px;
}
.mech .mech-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(15, 157, 88, 0.09);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: transform .45s var(--ease-out), background-color .3s ease;
}
.mech:hover .mech-icon { transform: translateY(-4px) rotate(-4deg); background: rgba(15, 157, 88, 0.16); }
.mech h3 { font-family: var(--font-d); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--ink-2); }
.mech p { font-size: 15px; line-height: 1.65; color: var(--grey-3); }

.audit-strip {
  margin-top: 24px;
  background: var(--ink-2); color: var(--white);
  border-radius: 20px; padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px;
}
.audit-strip .lead { display: flex; align-items: center; gap: 14px; font-family: var(--font-d); font-weight: 500; font-size: 17px; }
.audit-strip .lead .tick { color: var(--green-hi); font-size: 20px; font-weight: 700; }

/* ==========================================================================
   Services — index list
   ========================================================================== */
#services { padding: clamp(100px, 14vh, 170px) 0; }
.svc-list { border-top: 1px solid var(--line-l); }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 6px 24px; align-items: center;
  padding: 30px 8px;
  border-bottom: 1px solid var(--line-l);
  overflow: hidden;
  transition: padding .4s var(--ease-out);
}
.svc::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--ink-2);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease-out);
}
.svc > * { position: relative; z-index: 1; }
.svc .svc-num {
  font-family: var(--font-m); font-weight: 500; font-size: 13px;
  letter-spacing: 0.14em; color: var(--green);
  transition: color .3s ease;
  align-self: start; padding-top: 8px;
}
.svc h3 {
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.02em;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  transition: color .3s ease;
}
.svc p {
  grid-column: 2;
  font-size: 14.5px; line-height: 1.6; color: var(--grey-2);
  max-width: 640px;
  transition: color .3s ease;
}
.svc .svc-arrow {
  grid-row: 1; grid-column: 3;
  font-size: 22px; color: var(--ink-2);
  transform: translateX(-8px); opacity: 0;
  transition: transform .4s var(--ease-out), opacity .3s ease, color .3s ease;
}
a.svc--link { color: inherit; text-decoration: none; }
/* Every row gets the same highlight so the list reads as one system. The
   arrow is the only part gated to real links — highlight says "you're here",
   arrow says "this goes somewhere", and only one of those is a promise. */
@media (hover: hover) {
  .svc:hover { padding-left: 22px; }
  .svc:hover::before { transform: scaleY(1); }
  .svc:hover h3 { color: var(--white); }
  .svc:hover p { color: var(--grey); }
  .svc:hover .svc-num { color: var(--green-hi); }
  .svc--link:hover .svc-arrow { transform: translateX(0); opacity: 1; color: var(--green-hi); }
}
.svc--link:focus-visible { outline: 2px solid var(--green-hi); outline-offset: -3px; }

/* Emphasis half of the villain headline. #6D737A blended to 1.86:1 mid-reveal;
   #B8BFC6 holds 3.35:1 at the 0.5 floor and 10.65:1 once settled. */
.villain-emph { color: #B8BFC6; }
/* Chrome finish: brushed-metal gradient with a specular top highlight. */
.badge-soon {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-d); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #4A4A4A;
  background: linear-gradient(135deg, #F4F6F8, #C7CCD1 55%, #E8EBEE);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(12, 12, 12, 0.12);
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.badge-soon::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #9AA0A6; }

/* ==========================================================================
   Results — testimonials
   ========================================================================== */
#results { padding: clamp(100px, 14vh, 170px) 0; background: var(--paper-2); }
.tst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 900px; margin-inline: auto; }
.tst {
  background: var(--white);
  border: 1px solid var(--line-l);
  border-radius: 24px; padding: 32px 30px;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  will-change: transform;
}
.tst:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(12, 12, 12, 0.3); }
.tst .stars { color: var(--green); font-size: 13px; letter-spacing: 4px; margin-bottom: 16px; }
.tst blockquote { font-size: 15.5px; line-height: 1.65; color: var(--grey-3); margin: 0 0 24px; flex: 1; }
.tst .who { display: flex; align-items: center; gap: 12px; }
.tst .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); box-shadow: 0 2px 8px rgba(12,12,12,.14); }
.tst .who b { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink-2); display: block; }
.tst .who small { font-size: 12.5px; color: var(--grey-2); }

/* ==========================================================================
   Founders
   ========================================================================== */
#founder { padding: clamp(100px, 14vh, 170px) 0; }
#founder .sec-head { text-align: center; margin-left: auto; margin-right: auto; }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.founder-card { max-width: 580px; }
.founder-id { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.founder-id img {
  width: 84px; height: 84px; border-radius: 20px; object-fit: cover;
  border: 1px solid rgba(12, 12, 12, 0.08);
  box-shadow: 0 16px 34px -18px rgba(12, 12, 12, 0.45);
  transition: transform .45s var(--ease-out);
}
.founder-card:hover .founder-id img { transform: scale(1.04) rotate(-1.5deg); }
.role-badge {
  width: 84px; height: 84px; border-radius: 20px;
  display: grid; place-items: center; flex: none;
  font-family: var(--font-m); font-weight: 500; font-size: 27px;
  letter-spacing: -0.03em; color: var(--green-dark);
  background: linear-gradient(150deg, rgba(15, 157, 88, 0.14), rgba(15, 157, 88, 0.04));
  border: 1px solid rgba(15, 157, 88, 0.28);
  box-shadow: 0 16px 34px -20px rgba(12, 12, 12, 0.4);
  transition: transform .45s var(--ease-out);
}
.founder-card:hover .role-badge { transform: scale(1.04) rotate(-1.5deg); }
.founder-id h3 { font-family: var(--font-d); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px; color: var(--ink-2); }
.founder-id small { font-family: var(--font-d); font-weight: 500; font-size: 15px; color: var(--grey-2); }
.founder-card > p { font-size: 16.5px; line-height: 1.68; color: var(--grey-3); margin-bottom: 16px; }
.founder-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.founder-tags span {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--line-l);
  border-radius: 12px; padding: 12px 16px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.founder-tags .tick { color: var(--green); font-weight: 700; }

/* ==========================================================================
   Offer — the free audit
   ========================================================================== */
#offer {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(15, 157, 88, 0.10), transparent 65%),
    var(--ink);
  padding: clamp(110px, 16vh, 190px) 0;
  text-align: center;
  overflow: hidden;
}
#offer .h-display { max-width: 860px; margin: 0 auto 22px; font-size: clamp(36px, 5vw, 62px); }
#offer .sub { max-width: 640px; margin: 0 auto clamp(44px, 6vw, 60px); }
.offer-mark {
  width: clamp(120px, 18vw, 190px); height: auto; margin: 0 auto clamp(36px, 5vw, 52px);
  filter: drop-shadow(0 24px 60px rgba(15, 157, 88, 0.28));
  will-change: transform;
}
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 52px; text-align: left; }
.offer-card {
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 24px; padding: 32px;
  transition: transform .45s var(--ease-out), border-color .3s ease;
}
.offer-card:hover { transform: translateY(-6px); border-color: rgba(15, 157, 88, 0.4); }
.offer-card .tick { color: var(--green-hi); font-size: 22px; font-weight: 700; display: block; margin-bottom: 14px; }
.offer-card h3 { font-family: var(--font-d); font-weight: 600; font-size: 20px; margin-bottom: 10px; color: var(--white); }
.offer-card p { font-size: 15px; line-height: 1.65; color: var(--grey); }

/* ==========================================================================
   FAQ
   ========================================================================== */
#faq { padding: clamp(100px, 14vh, 170px) 0; }
#faq .wrap { max-width: 880px; }
.faq-list { border-top: 1px solid var(--line-l); }
details.faq { border-bottom: 1px solid var(--line-l); }
details.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px;
  font-family: var(--font-d); font-weight: 600; font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .25s ease;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--green-dark); }
.faq-icon {
  position: relative; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-l);
  transition: transform .35s var(--ease-out), background-color .3s ease, border-color .3s ease;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.6px; background: var(--green);
  transform: translate(-50%, -50%);
  transition: background-color .3s ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
details.faq[open] .faq-icon { transform: rotate(45deg); background: var(--green); border-color: var(--green); }
details.faq[open] .faq-icon::before, details.faq[open] .faq-icon::after { background: #fff; }
.faq-body { overflow: hidden; }
.faq-body p { font-size: 15.5px; line-height: 1.7; color: var(--grey-3); padding: 0 44px 24px 4px; max-width: 700px; }

/* ==========================================================================
   Contact
   ========================================================================== */
#contact { padding: clamp(100px, 14vh, 170px) 0; }
#contact .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.contact-checks { display: flex; flex-direction: column; gap: 16px; margin: 30px 0; }
.contact-checks div { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--grey-3); }
.contact-checks .tick { color: var(--green); font-weight: 700; }
.book-call {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-d); font-weight: 600; font-size: 15px;
  color: var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.book-call:hover { color: var(--green-dark); border-color: var(--green-dark); }

.cform {
  background: var(--white);
  border: 1px solid var(--line-l);
  border-radius: 26px;
  box-shadow: 0 30px 70px -40px rgba(12, 12, 12, 0.3);
  padding: clamp(26px, 3.4vw, 38px);
  position: relative;
}
.cform .f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cform .f-field { margin-bottom: 16px; }
.cform .f-row .f-field { margin-bottom: 0; }
.cform label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px;
}
.cform label .opt { color: var(--grey); font-weight: 500; }
.cform input, .cform textarea {
  width: 100%; padding: 14px 15px;
  border: 1px solid #D8DDE1; border-radius: 12px;
  font-family: var(--font-b); font-size: 16px; color: var(--ink-2);
  background: var(--paper);
  outline: none;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cform input:focus, .cform textarea:focus {
  border-color: var(--green); background: var(--white);
  box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.12);
}
.cform textarea { resize: vertical; line-height: 1.5; min-height: 110px; }
.cform .f-error { display: none; font-size: 12.5px; color: #c0392b; margin-top: 6px; }
.cform .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cform .btn { width: 100%; margin-top: 8px; padding: 16px; font-size: 16px; }
.cform .form-error { display: none; font-size: 13px; color: #c0392b; text-align: center; margin: 12px 0 0; }
.cform .form-error a { color: #c0392b; font-weight: 600; text-decoration: underline; }
.cform .form-note { font-size: 13px; color: var(--grey-2); text-align: center; margin: 14px 0 0; }

.form-success {
  background: var(--white); border: 1px solid var(--line-l); border-radius: 26px;
  box-shadow: 0 30px 70px -40px rgba(12, 12, 12, 0.3);
  padding: 48px 38px; text-align: center;
}
.form-success .ok-ball {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(15, 157, 88, 0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: var(--green); font-size: 27px; font-weight: 700;
}
.form-success h3 { font-family: var(--font-d); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--ink-2); margin-bottom: 10px; }
.form-success p { font-size: 15px; line-height: 1.6; color: var(--grey-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--ink); color: var(--grey);
  border-top: 1px solid var(--line-d);
  overflow: hidden;
}
.foot-word {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(72px, 16.5vw, 240px);
  letter-spacing: 0.02em; line-height: 0.95;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
  user-select: none; pointer-events: none;
  margin-top: clamp(40px, 6vw, 80px);
  margin-bottom: -0.14em;
  white-space: nowrap;
}
.foot-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
  padding: clamp(40px, 6vw, 64px) 0 40px;
  border-bottom: 1px solid var(--line-d);
}
.foot-brand { max-width: 330px; }
.foot-brand .brand { margin-bottom: 16px; }
.foot-brand p { font-size: 14px; line-height: 1.6; color: var(--grey-2); margin-bottom: 10px; }
.foot-brand a { font-size: 14px; color: var(--grey); transition: color .25s ease; }
.foot-brand a:hover { color: var(--green-hi); }
.foot-cols { display: flex; gap: clamp(36px, 6vw, 72px); flex-wrap: wrap; }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col b {
  font-family: var(--font-d); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
  margin-bottom: 4px;
}
.foot-col a, .foot-col span { font-size: 14px; color: var(--grey); line-height: 1.5; transition: color .25s ease; }
.foot-col a:hover { color: var(--white); }
.foot-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 24px 0 30px;
  font-size: 12.5px; color: var(--grey);
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes kpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@keyframes kspin { to { transform: rotate(360deg); } }
@keyframes kdraw { to { stroke-dashoffset: 0; } }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  border-radius: 50%; display: inline-block;
  animation: kspin .7s linear infinite;
}

/* ==========================================================================
   Motion-gated initial states — only when JS confirms motion is OK.
   If GSAP never loads, none of this applies and the page is fully visible.
   ========================================================================== */
html.motion-ok [data-rv] { opacity: 0; transform: translateY(34px); }
html.motion-ok [data-rv="fade"] { transform: none; }
/* Nothing in the hero is opacity-gated. An opacity:0 element is invisible to
   LCP, so hiding any hero text just relocates LCP to the next largest one —
   which is exactly how this measured 5.1s. The intro animates transform only,
   so every word paints with the document and still slides into place. */
html.motion-ok .villain-statement .w { opacity: 0.5; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .mech-grid, .tst-grid, .offer-grid { grid-template-columns: 1fr 1fr; }
  .offer-grid .offer-card:last-child { grid-column: 1 / -1; }
  #hero .wrap { grid-template-columns: 1fr; align-content: center; }
  #hero .dash-col { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  #nav .nav-cta { display: none; }
  #burger { display: flex; }
  .founders { grid-template-columns: 1fr; }
  #contact .wrap { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .mech-grid, .tst-grid, .offer-grid { grid-template-columns: 1fr; }
  .offer-grid .offer-card:last-child { grid-column: auto; }
  /* Keep the chrome "Coming soon" badge on the same line as the headline:
     no wrapping, drop the (hover-only) arrow column, tighten everything. */
  .svc { grid-template-columns: 34px 1fr; gap: 6px 10px; padding: 24px 4px; }
  .svc p { grid-column: 1 / -1; }
  .svc h3 { flex-wrap: nowrap; gap: 8px; font-size: 19px; }
  .svc .svc-arrow { display: none; }
  .badge-soon { padding: 4px 8px; font-size: 9.5px; }
  .hero-ctas .btn { width: 100%; }
  .scroll-cue { display: none; }
  .audit-strip { padding: 24px 22px; }
  .audit-strip .btn { width: 100%; }
  #hero { padding-top: calc(var(--nav-h) + 28px); }
  .hero-sub { margin-bottom: 28px; }
  .founder-id img { width: 68px; height: 68px; border-radius: 16px; }
}

/* Full reduced-motion opt-out: kill everything that loops or scrubs. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   LEGAL PAGES (privacy, terms)
   Standalone shell — styles.css is built around the homepage's pinned,
   ScrollTrigger-driven sections, so these pages lay out independently.
   ========================================================================== */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.legal-head {
  background: var(--ink); color: var(--paper);
  padding: clamp(96px, 14vh, 150px) 0 clamp(48px, 7vh, 74px);
  border-bottom: 1px solid var(--line-d);
}
.legal-head .eyebrow { justify-content: flex-start; margin-bottom: 18px; }
.legal-head h1 {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(34px, 6vw, 58px); letter-spacing: -0.03em;
  line-height: 1.04; margin: 0 0 16px;
}
.legal-head p { font-size: 16px; line-height: 1.6; color: var(--grey); margin: 0; }
.legal-body { background: var(--paper); color: var(--ink-2); padding: clamp(56px, 9vh, 96px) 0 clamp(72px, 12vh, 120px); }
.legal-body h2 {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -0.02em;
  margin: 44px 0 14px; color: var(--ink-2);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: var(--font-d); font-weight: 600; font-size: 17px;
  margin: 26px 0 8px; color: var(--ink-2);
}
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.72; color: var(--grey-3); }
.legal-body p { margin: 0 0 15px; }
.legal-body ul { margin: 0 0 15px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--green-deep); }
.legal-body strong { color: var(--ink-2); font-weight: 600; }
.legal-note {
  background: var(--white); border: 1px solid var(--line-l);
  border-left: 3px solid var(--green-dark);
  border-radius: 14px; padding: 20px 24px; margin: 0 0 34px;
}
.legal-note p { margin: 0; font-size: 15px; color: var(--grey-3); }
.legal-foot {
  border-top: 1px solid var(--line-l); margin-top: 52px; padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.legal-foot a { font-size: 15px; }
.legal-foot .legal-back { font-family: var(--font-d); font-weight: 600; }

/* ==========================================================================
   SERVICE PAGES
   Editorial detail pages. Oversized ghost numerals mark process steps; the
   numeral is decorative and the step title carries the semantics.
   ========================================================================== */
.svc-hero { background: var(--ink); padding: clamp(120px, 18vh, 190px) 0 clamp(64px, 9vh, 104px); }
.svc-hero h1 {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(36px, 6.2vw, 72px); letter-spacing: -0.035em;
  line-height: 1.03; margin: 0 0 22px; text-wrap: balance; max-width: 17ch;
}
.svc-hero .sub { max-width: 60ch; margin-bottom: 34px; }
.svc-crumb {
  font-family: var(--font-m); font-size: 12px; letter-spacing: 0.08em;
  color: var(--grey); margin-bottom: 26px;
}
/* Underlined so the link isn't distinguished by colour alone. */
.svc-crumb a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.svc-crumb a:hover { color: var(--white); }

.svc-sec { padding: clamp(72px, 11vh, 128px) 0; }
.svc-sec h2 {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.03em;
  line-height: 1.08; margin: 0 0 18px; text-wrap: balance;
}
.svc-sec > .wrap > p, .svc-prose p { font-size: 17px; line-height: 1.72; margin: 0 0 16px; max-width: 68ch; }
.svc-sec.light h2, .svc-sec.light .svc-prose p { color: var(--ink-2); }
.svc-sec.light .svc-prose p { color: var(--grey-3); }

/* Process steps — oversized ghost numeral, hairline rule */
.proc { display: grid; gap: 0; margin-top: clamp(38px, 5vw, 60px); }
.proc-step {
  display: grid; grid-template-columns: minmax(96px, 0.2fr) 1fr;
  gap: clamp(20px, 4vw, 52px); align-items: start;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line-l);
}
.proc-step:last-child { border-bottom: 1px solid var(--line-l); }
.proc-num::before { content: attr(data-num); }
.proc-num {
  font-family: var(--font-d); font-weight: 700;
  font-size: clamp(52px, 9vw, 104px); line-height: 0.82;
  letter-spacing: -0.05em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(12, 12, 12, 0.22);
  user-select: none;
}
.proc-step h3 {
  font-family: var(--font-d); font-weight: 600;
  font-size: clamp(19px, 2.3vw, 25px); letter-spacing: -0.02em;
  margin: 0 0 10px; color: var(--ink-2);
}
.proc-step p { font-size: 16px; line-height: 1.7; color: var(--grey-3); margin: 0; max-width: 62ch; }

/* Fit / not-fit honesty block */
.fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 34px; }
.fit-card { border: 1px solid var(--line-l); border-radius: 20px; padding: 28px 26px; background: var(--white); }
.fit-card h3 {
  font-family: var(--font-m); font-weight: 500; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 16px;
}
.fit-card.yes h3 { color: var(--green-dark); }
.fit-card.no h3 { color: var(--grey-2); }
.fit-card ul { margin: 0; padding-left: 20px; }
.fit-card li { font-size: 15.5px; line-height: 1.62; color: var(--grey-3); margin-bottom: 10px; }

.svc-cta { background: var(--ink); text-align: center; padding: clamp(76px, 11vh, 128px) 0; }
.svc-cta h2 { max-width: 20ch; margin-inline: auto; }
.svc-cta .sub { max-width: 54ch; margin: 0 auto 32px; }
@media (max-width: 640px) {
  .proc-step { grid-template-columns: 1fr; gap: 8px; }
  .proc-num { font-size: 44px; }
}

/* ==========================================================================
   CONTRAST: --grey-2 (#6D737A) measures 4.08:1 on ink — under AA. It passes
   on the light sections (~4.5-4.8:1), so lift it only where the background is
   actually dark rather than changing the token globally.
   ========================================================================== */
.dash-id small,
.kpi small,
.dash-chart small,
.dash-foot span,
.scroll-cue,
.marquee-track span,
.foot-brand p { color: var(--grey); }

/* The scroll word-reveal starts dim and animates to full as it enters view.
   0.14 was unreadable, and anything under 0.5 fails contrast while the tween
   is in flight. 0.5 -> 1 still reads as a reveal and passes AA throughout. */
html.motion-ok .villain-statement .w { opacity: 0.30; }

/* Preloader is disabled (SHOW_PRELOADER in app.js). Keep it out of the paint
   path entirely so it can never flash before DOMContentLoaded removes it. */
#loader { display: none; }

/* ==========================================================================
   MOBILE TAP TARGETS
   Footer links rendered 17-21px tall — fine with a mouse, tight with a thumb,
   and under the 24px WCAG 2.5.8 floor. Expand the hit area rather than the
   type: the row gap shrinks by the same amount the links grow, so the footer
   keeps its proportions.
   ========================================================================== */
@media (max-width: 860px) {
  .foot-col { gap: 1px; }
  .foot-col a,
  .foot-brand a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .foot-brand a { min-height: 40px; display: flex; width: fit-content; }
  .foot-legal { gap: 6px; }
}

/* ==========================================================================
   STICKY MOBILE CTA
   The hero CTA scrolls away and never returns, and most GTA owners will read
   this on a phone. This keeps the offer in the thumb zone for the whole scroll.
   Split 2:1 — the audit is the offer, but trades owners often just want to
   call, and the number is already public for NAP consistency.

   Shown only after the hero CTA leaves the viewport, hidden again once the
   contact form is on screen. Transform-only so it can never shift layout.
   ========================================================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 11, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--line-d);
  transform: translateY(110%);
  transition: transform .42s var(--ease-out);
  will-change: transform;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; border-radius: 999px;
  font-family: var(--font-b); font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.01em;
  transition: background .25s ease, border-color .25s ease;
}
.sticky-cta .sc-primary {
  flex: 2 1 0; background: var(--green-dark); color: var(--white);
  box-shadow: 0 8px 26px -8px var(--green-glow);
}
.sticky-cta .sc-primary:active { background: var(--green-deep); }
.sticky-cta .sc-call {
  flex: 1 1 0; color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
}
.sticky-cta .sc-call:active { border-color: var(--white); }
.sticky-cta a:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; }

@media (max-width: 860px) { .sticky-cta { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}