/*
Theme Name: Kreative Core Tech
Theme URI: https://kreativecoretech.com/
Author: Kreative Core Tech
Author URI: https://kreativecoretech.com/
Description: Self-contained, plugin-free public-sector consultancy theme for Kreative Core Technologies (KCT). A full multi-page site — home, About, four service pages, Blog, Webinars, Careers, Contact, an ERP Health Check tool, and legal pages — with built-in SEO (meta descriptions, Open Graph, Twitter Cards, and Organization/WebSite/Article/FAQ/Event/Video schema), a bundled favicon, and automatic page provisioning on activation. Built from a Claude Design handoff.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kct
Tags: one-page, custom-colors, custom-menu, full-width-template, footer-widgets
*/

/* ===========================================================
   KCT — Editorial serif + mint/lilac accents
   =========================================================== */
:root {
  --bg: #ffffff;        /* page background — pure white */
  --bg-2: #ededeb;      /* section accent grey (kept for visually-distinct sections) */
  --paper: #ffffff;     /* card surface */
  --ink: #0d0d0d;
  --ink-2: #1d1d1d;
  --muted: #6f6c66;
  --muted-2: #9c988f;
  --line: #e2e0db;
  --line-2: #d4d2cb;

  /* Brand accent — single warm orange replacing the prior mint/lilac/pink trio.
     The original variable names are kept as aliases so existing rules
     across the site continue to work without per-file rewrites. */
  --accent:        #ff4800;  /* primary orange */
  --accent-strong: #e63f1d;  /* darker for hover / gradient deep stops */
  --accent-soft:   #ffd9cc;  /* light peach tint for backgrounds + gradient light stops */

  --mint:      var(--accent);
  --mint-2:    var(--accent-strong);
  --lilac:     var(--accent);
  --lilac-2:   var(--accent-strong);
  --soft-pink: var(--accent-soft);

  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 36px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 30px 60px -28px rgba(0,0,0,0.25);

  --font-display: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif; /* brand sans — was a serif (Newsreader) that was never loaded */
  --font-sans: "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-number: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion — strong custom curves per Emil Kowalski */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ===== REVEAL ON SCROLL ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal-group.in > .reveal,
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* stagger up to 8 children — 60ms apart, kept short so it never blocks */
.reveal-group.in > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group.in > .reveal:nth-child(2) { transition-delay: 60ms; }
.reveal-group.in > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-group.in > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-group.in > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-group.in > .reveal:nth-child(6) { transition-delay: 300ms; }
.reveal-group.in > .reveal:nth-child(7) { transition-delay: 360ms; }
.reveal-group.in > .reveal:nth-child(8) { transition-delay: 420ms; }

/* ===== BUTTON PRESS FEEDBACK ===== */
.btn-pill,
.btn-black,
.btn-reveal,
.nav-toggle,
.faq-item summary,
.testi-nav button,
.service-nav button,
.why-play {
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease;
}
.btn-pill:active,
.btn-black:active,
.btn-reveal:active,
.nav-toggle:active,
.faq-item summary:active,
.testi-nav button:active,
.service-nav button:active,
.why-play:active {
  transform: scale(0.97);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.eyebrow-mark::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 2px;
}

/* ============================================================
   GLOBAL HEADING SCALE — single source of truth for h1-h4.
   Per-page hero classes (.about-hero-h1, .erps-hero-h1, etc.) can
   override these with their own larger/dramatic sizes, but they
   must keep weight 600 + the same letter-spacing scale below.
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(44px, 6vw, 84px);
  letter-spacing: -0.028em;
  line-height: 1.04;
}
h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
h3 {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h4 {
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
p { margin: 0; color: var(--muted); }
p.lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* Image fills (real <img> replacing the design-tool image-slot component) */
.hero-image img,
.case-feature img,
.testi-card .photo img,
.blog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PROMO BAR */
.promo {
  background: var(--mint);
  color: var(--ink);
  text-align: center;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
}
.promo a { text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; font-weight: 600;}

/* NAV */
.nav { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0;}
.nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ink);}
.nav-logo { height: 68px; width: auto; display: block; }
.nav-links { display: flex; gap: 32px; margin-left: auto; margin-right: 40px; }
.nav-links a { font-size: 16px; color: var(--ink); font-weight: 500; transition: opacity .15s; }
.nav-links a:hover { opacity: 0.6; }
.nav-cta-mobile { display: none; } /* shown only inside the mobile menu */

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ico-close { display: none; }
.nav.open .nav-toggle .ico-open { display: none; }
.nav.open .nav-toggle .ico-close { display: block; }

/* ===== CTA BUTTONS =====
   Dark pill with an inset orange disc on the right that holds the arrow
   icon. Three scales:
     .btn-pill   — small (nav)
     .btn-black  — primary (in-page CTAs)
     .btn-mint   — legacy secondary; matches .btn-black styling now
   All use the site's sans font (Geist), sentence case, no uppercase. */

.btn-pill,
.btn-black,
.btn-mint {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  border-radius: 999px;
  line-height: 1;
  overflow: hidden;     /* contain the expanding disc */
  isolation: isolate;   /* keep z-index local to this stacking context */
}

/* The orange disc on the right is also painted by ::before, sitting in
   the exact same spot/size as the <svg> disc. At rest it's invisible
   (scale 0); on hover it scales up dramatically to wash the entire
   button in brand orange. Because the SVG and ::before share the same
   color, the SVG disc visually "blooms" outward instead of looking
   like a separate overlay. Position/size is set per variant below. */
.btn-pill::before,
.btn-black::before,
.btn-mint::before {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: var(--accent);
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.7, 0, 0.25, 1);
  z-index: -1;
  pointer-events: none;
}

/* Nav (compact): SVG total = 14 + 9*2 = 32px, sits 6px from right edge */
.btn-pill::before {
  right: 6px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%) scale(0);
}
.btn-pill:hover::before { transform: translateY(-50%) scale(22); }

/* Primary (medium): SVG total = 18 + 13*2 = 44px, sits 8px from right edge */
.btn-black::before,
.btn-mint::before {
  right: 8px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%) scale(0);
}
.btn-black:hover::before,
.btn-mint:hover::before { transform: translateY(-50%) scale(20); }

/* Disc arrow icon — white stroke, orange background, blends seamlessly
   with the expanding ::before during the hover sweep. */
.btn-pill svg,
.btn-black svg,
.btn-mint svg {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  background: var(--accent);
  border-radius: 50%;
  color: #ffffff;
  flex-shrink: 0;
}

/* Press feedback — defined after :hover so it wins when both states
   match. Replaces the global .btn-*:active rule for these classes. */
.btn-pill:active,
.btn-black:active,
.btn-mint:active {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .btn-pill::before,
  .btn-black::before,
  .btn-mint::before { transition: none; }
  .btn-pill:hover::before { transform: translateY(-50%) scale(0); }
  .btn-black:hover::before,
  .btn-mint:hover::before { transform: translateY(-50%) scale(0); }
}

/* --- Sizing per variant --- */

/* Nav CTA (compact) */
.btn-pill {
  gap: 10px;
  font-size: 14px;
  padding: 6px 6px 6px 18px;
}
.btn-pill svg {
  width: 14px;
  height: 14px;
  padding: 9px;
}

/* Primary in-page CTA (medium) */
.btn-black,
.btn-mint {
  gap: 16px;
  font-size: 16px;
  padding: 8px 8px 8px 26px;
}
.btn-black svg,
.btn-mint svg {
  width: 18px;
  height: 18px;
  padding: 13px;
}

/* HERO */
.hero { padding: 64px 0 80px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.hero-left { display: flex; flex-direction: column; gap: 28px; padding-top: 24px; }
.hero-left h1 { max-width: 18ch; }
.hero-left .lead { max-width: 42ch; color: var(--ink-2); }
.hero-cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 16px;}
.trust-cluster { display: flex; align-items: center; gap: 14px; }

/* ===========================================================
   HERO — STATEMENT VARIANT
   Editorial, centered, massive typography + active-engagements
   roster. Replaces the photo/2-col version.
   =========================================================== */

.hero.hero--statement {
  position: relative;
  padding: 80px 0 0;
  text-align: center;
  overflow: hidden;
}
.hero.hero--statement .container {
  position: relative;
  z-index: 2;
  max-width: 1320px;
}

/* Subtle dot-grid backdrop, masked to fade near edges */
.hero.hero--statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(13, 13, 13, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 25%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 25%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* Ripple field — concentric circles emanating from behind the headline,
   echoing "the city feels it first." */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 45%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 65% 60% at 50% 45%, #000 30%, transparent 90%);
}
.hero-ripple {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 240px;
  height: 240px;
  border: 1.25px solid var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0;
  animation: hero-ripple-out 10s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
  will-change: transform, opacity;
}
.hero-ripple.r1 { animation-delay: 0s; }
.hero-ripple.r2 { animation-delay: 2.5s; }
.hero-ripple.r3 { animation-delay: 5s; }
.hero-ripple.r4 { animation-delay: 7.5s; }

@keyframes hero-ripple-out {
  0%   { transform: translate(-50%, -50%) scale(0.35); opacity: 0; }
  8%   { opacity: 0.28; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ripple { animation: none; display: none; }
}

/* Single clean meta pill — replaces the old eyebrow + meta row */
.hero-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 40px;
  background: var(--paper);
}
.hero-meta-pill .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,72,0,0.14);
}
.hero-meta-pill-label { color: var(--ink); }
.hero-meta-pill-divider {
  width: 1px;
  height: 12px;
  background: var(--line-2);
}
.hero-meta-pill-aux { color: var(--muted); }

.hero-statement-h1 {
  font-family: var(--font-sans);
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 auto 32px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-statement-h1 .hi {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--accent);
  padding: 0 0.04em;
}

.hero-statement-lead {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 40px;
  text-wrap: pretty;
}

.hero-statement-cta {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}
.hero.hero--statement { padding-bottom: 96px; }
.hero-statement-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: opacity 200ms ease, gap 200ms var(--ease-out);
}
.hero-statement-link:hover { opacity: 0.72; gap: 14px; }
.hero-statement-link svg { width: 14px; height: 14px; }

/* Active engagements — editorial roster */
.hero-roster {
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.hero-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.hero-roster-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-roster-label .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,72,0,0.14);
  animation: hero-roster-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-roster-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,72,0,0.14); }
  50%      { box-shadow: 0 0 0 7px rgba(255,72,0,0.06); }
}
.hero-roster-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* Editorial roster — magazine-style "currently rescuing" list */
.er {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.er:last-child { border-bottom: 1px solid var(--line); }
.er-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.er-city {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.er-what {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.er-week {
  font-family: var(--font-number);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  white-space: nowrap;
}
.er-week-slash {
  color: var(--line-2);
  margin: 0 4px;
  font-weight: 400;
}

@media (max-width: 900px) {
  .hero.hero--statement { padding-top: 64px; }
  .hero-statement-h1 { font-size: clamp(44px, 11vw, 80px); }
  .hero-statement-cta { margin-bottom: 64px; }
  .hero-roster-item {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 4px;
    padding: 22px 0;
  }
  .er { padding: 26px 0; gap: 18px; }
  .er-week { font-size: clamp(22px, 5vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-roster-label .dot { animation: none; }
}
.trust-avs { display: flex; }
.trust-avs span {
  width: 36px; height: 36px; border-radius: 999px;
  border: 2px solid var(--bg);
  margin-left: -10px;
}
.trust-avs span:first-child { margin-left: 0; }
.av-1 { background: linear-gradient(135deg,#ff4800,#179a52); }
.av-2 { background: linear-gradient(135deg,#ff4800,#a25fa8); }
.av-3 { background: linear-gradient(135deg,#cccccc,#5b5b5b); }
.trust-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-image { display: none; }

/* Editorial "live engagement" outcome card — orange brand panel */
.hero-feature {
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
}
.hero-feature-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.92);
}
.hero-feature-head .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
}
.hero-feature-tag {
  margin-left: auto;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
}
.hero-feature-row {
  display: grid;
  grid-template-columns: minmax(74px, auto) 1fr;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 4px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.hero-feature-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.hero-feature-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  grid-row: 1 / span 2;
  align-self: center;
}
.hero-feature-value {
  font-family: var(--font-number);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.hero-feature-value small {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255,255,255,0.78);
}
.hero-feature-sub {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  grid-column: 2;
}

/* Testimonial card — flat, bordered, sits below the feature card */
.hero-quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-quote .stars { color: var(--accent); font-size: 14px; letter-spacing: 2px; }
.hero-quote .q {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.hero-quote .who { display: flex; flex-direction: column; gap: 2px; }
.hero-quote .nm { font-size: 15px; font-weight: 600; color: var(--ink); }
.hero-quote .ti { font-size: 13px; color: var(--muted); }

/* LOGOS */
.logos {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px 0;
  background: var(--bg);
}
.logos-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.logo-mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.02em;
  opacity: 0.85;
}
.logo-mark svg { width: 26px; height: 26px; }

/* ABOUT */
.about { padding: 120px 0 96px; text-align: center; }
.about .eyebrow { display: inline-block; margin-bottom: 36px;}
.about h2.intro {
  font-size: 28px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 56ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--font-sans);
}

/* Scroll-fill text — each word starts light grey and switches to full
   ink as the section scrolls through the viewport. JS in main.js wraps
   each word in <span class="fill-word"> at runtime and toggles the
   .is-filled class based on scroll progress. */
.scroll-fill .fill-word {
  color: rgba(13, 13, 13, 0.18);
  transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Prevent line-break inside a word, but allow normal wrapping
     between words via the literal spaces preserved in the markup. */
  white-space: pre-wrap;
}
.scroll-fill .fill-word.is-filled {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-fill .fill-word { transition: none; color: var(--ink); }
}
.about-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 80px;
}
.about-trio .item { display: flex; align-items: center; gap: 18px; text-align: left;}
.about-trio .badge {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.about-trio .badge.mint  { background: #ff4800; border-color: transparent; } /* primary orange */
.about-trio .badge.lilac { background: #ff7757; border-color: transparent; } /* lighter, peachy orange */
.about-trio .label { font-size: 19px; font-weight: 600; color: var(--ink);}
.about-trio .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* IMPACT */
.impact { padding: 96px 0; }
.impact-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; margin-bottom: 64px;}
.impact-head h2 { max-width: 16ch; font-size: clamp(32px, 3.6vw, 54px); }
.impact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.impact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.impact-card {
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .impact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(13, 13, 13, 0.08);
  }
}
.impact-card .ico {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--bg-2);
  display: grid; place-items: center;
  color: var(--ink);
}
.impact-card .ico.lilac { background: var(--lilac); }
.impact-card .ico.mint  { background: var(--mint); }
.impact-card h4 { font-size: 20px; line-height: 1.25; max-width: 20ch; }
.impact-card p  { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* SERVICE */
.service { padding: 96px 0; }
.service-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 48px;
}
.service-head h2 { max-width: 14ch; font-size: clamp(26px, 2.6vw, 38px); }
.service-head .eyebrow { display: block; margin-bottom: 24px;}
.service-nav { display: flex; gap: 10px; }
.service-nav button {
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink);
}
.service-nav svg { width: 18px; height: 18px; }
.service-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.service-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
}
.service-card .tag {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  background: var(--mint); color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; font-weight: 500;
}
.service-card .titlebox {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px; z-index: 3;
  background: var(--paper);
  padding: 18px 20px;
  border-radius: 14px;
}
.service-card .titlebox h4 {
  font-size: 17px; font-weight: 600; color: var(--ink);
  line-height: 1.3; max-width: 18ch;
}

/* ============== SERVICE CARD HOVER REVEAL ============== */
.card-reveal {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--paper);
  border-radius: var(--r-lg);
  /* top padding clears the tag pill (18px offset + ~28px height + 14px gap) */
  padding: 68px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  transform: translateY(100%);
  transition: transform 380ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .card-reveal {
    transform: translateY(0);
  }
}
/* Touch devices: tap to reveal */
.service-card.is-open .card-reveal {
  transform: translateY(0);
}
.card-reveal h4 {
  font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
  margin: 0;
}
.card-reveal p {
  font-size: 14px; line-height: 1.65;
  color: var(--muted); margin: 0;
}
.btn-reveal {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500;
  padding: 13px 20px; border-radius: 12px;
  text-decoration: none; width: fit-content;
  transition: opacity 0.2s;
  margin-top: auto; /* pins button to bottom */
}
.btn-reveal:hover { opacity: 0.82; }

/* tag stays above the reveal panel */
.service-card .tag { z-index: 10; }

/* ============== SERVICE CARD ANIMATIONS ============== */
/* Stage: top portion of card. Title box is ~76px tall pinned to bottom.
   We leave 96px of bottom padding so animations never collide with titles. */
.svc-anim .svc-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 22px 110px;
  overflow: hidden;
}

.svc-finance .svc-stage {
  background: radial-gradient(80% 60% at 50% 30%, #ffffff 0%, var(--soft-pink) 65%, #f1bce0 100%);
}
.svc-utility .svc-stage {
  background: radial-gradient(80% 70% at 50% 35%, #ffffff 0%, #d8f7e7 70%, #b4ecd0 100%);
}
.svc-security .svc-stage {
  background: radial-gradient(80% 60% at 50% 40%, #ffffff 0%, #ece5ff 60%, var(--lilac) 100%);
}
.svc-change .svc-stage {
  background: radial-gradient(70% 70% at 50% 50%, #ffffff 0%, #f6f3ee 60%, #e2dccf 100%);
}

/* ---- 01 FINANCE: ledger close ---- */
.svc-finance .ledger {
  width: 100%;
  max-width: 220px;
  background: var(--paper);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.25);
}
.svc-finance .ledger-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.svc-finance .ledger-head .bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ink) 55%, var(--line) 55%);
}
.svc-finance .ledger-head .dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--line);
}
.svc-finance .ledger-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(13,13,13,0.06);
  opacity: 0.35;
  animation: ledgerRowClose 4.4s ease-in-out infinite;
}
.svc-finance .ledger-row:last-child { border-bottom: 0; }
.svc-finance .ledger-row .cell {
  height: 7px;
  border-radius: 3px;
  background: var(--line);
}
.svc-finance .ledger-row .cell.num { background: var(--bg-2); margin-left: auto;}
.svc-finance .cell.w-15 { width: 26px; }
.svc-finance .cell.w-35 { width: 44%; }
.svc-finance .cell.w-40 { width: 50%; }
.svc-finance .cell.w-50 { width: 58%; }
.svc-finance .cell.w-55 { width: 62%; }
.svc-finance .ledger-row .check {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--bg-2);
  color: transparent;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-left: 0;
}
.svc-finance .ledger-row .check svg { width: 10px; height: 10px; }
.svc-finance .ledger-row.r1 { animation-delay: 0s; }
.svc-finance .ledger-row.r2 { animation-delay: 0.45s; }
.svc-finance .ledger-row.r3 { animation-delay: 0.9s; }
.svc-finance .ledger-row.r4 { animation-delay: 1.35s; }
@keyframes ledgerRowClose {
  0%, 8%   { opacity: 0.35; }
  18%, 70% { opacity: 1; }
  100%     { opacity: 0.35; }
}
.svc-finance .ledger-row .check {
  animation: checkFill 4.4s ease-in-out infinite;
}
.svc-finance .ledger-row.r1 .check { animation-delay: 0.2s; }
.svc-finance .ledger-row.r2 .check { animation-delay: 0.65s; }
.svc-finance .ledger-row.r3 .check { animation-delay: 1.1s; }
.svc-finance .ledger-row.r4 .check { animation-delay: 1.55s; }
@keyframes checkFill {
  0%, 12%  { background: var(--bg-2); color: transparent; transform: scale(1);}
  18%      { background: var(--mint); color: var(--ink); transform: scale(1.25);}
  24%, 70% { background: var(--mint); color: var(--ink); transform: scale(1);}
  100%     { background: var(--bg-2); color: transparent; transform: scale(1);}
}

/* ---- 02 UTILITY: gauge ---- */
.svc-utility .gauge-wrap {
  width: 100%;
  max-width: 240px;
  display: grid; place-items: center;
}
.svc-utility .gauge {
  width: 100%;
  height: auto;
  display: block;
}
.svc-utility .gauge-arc {
  animation: gaugeFill 4s ease-in-out infinite alternate;
}
@keyframes gaugeFill {
  0%   { stroke-dashoffset: 252; }
  100% { stroke-dashoffset: 32; }
}
.svc-utility .gauge-needle {
  transform-origin: 110px 120px;
  transform: rotate(-90deg);
  animation: gaugeNeedle 4s ease-in-out infinite alternate;
}
@keyframes gaugeNeedle {
  0%   { transform: rotate(-90deg); }
  100% { transform: rotate(78deg); }
}

/* ---- 03 SECURITY: shield with scan ---- */
.svc-security .shield-wrap {
  width: 100%;
  max-width: 200px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.svc-security .shield {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(13,13,13,0.2));
}
.svc-security .scan-line {
  animation: scanSweep 2.8s ease-in-out infinite;
}
@keyframes scanSweep {
  0%   { transform: translateY(0); }
  100% { transform: translateY(260px); }
}
.svc-security .shield-check {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: drawCheck 2.8s ease-in-out infinite;
}
@keyframes drawCheck {
  0%, 35% { stroke-dashoffset: 130; }
  55%     { stroke-dashoffset: 0; }
  88%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 130; }
}
.svc-security .lock-row {
  display: flex; gap: 6px;
  flex-wrap: wrap; justify-content: center;
}
.svc-security .lock-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 4px 10px -4px rgba(13,13,13,0.15);
  opacity: 0;
  animation: chipPop 2.8s ease-out infinite;
}
.svc-security .lock-chip:nth-child(1) { animation-delay: 0.55s; }
.svc-security .lock-chip:nth-child(2) { animation-delay: 0.75s; }
.svc-security .lock-chip:nth-child(3) { animation-delay: 0.95s; }
@keyframes chipPop {
  0%, 18%  { opacity: 0; transform: translateY(6px); }
  30%      { opacity: 1; transform: translateY(0); }
  85%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(-3px); }
}

/* ---- 04 CHANGE: orbit ---- */
.svc-change .orbit-wrap {
  width: 100%;
  max-width: 220px;
  display: grid; place-items: center;
}
.svc-change .orbit {
  width: 100%;
  height: auto;
  display: block;
}
.svc-change .pulse-ring {
  transform-origin: 110px 110px;
  animation: ringPulse 2.4s ease-out infinite;
}
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.svc-change .orbit-spin-a {
  animation: spinCW 10s linear infinite;
}
.svc-change .orbit-spin-b {
  animation: spinCCW 16s linear infinite;
}
@keyframes spinCW  { from { transform: rotate(0); }       to { transform: rotate(360deg); } }
@keyframes spinCCW { from { transform: rotate(360deg); }  to { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .svc-anim * { animation: none !important; }
  .svc-finance .ledger-row { opacity: 1; }
  .svc-finance .ledger-row .check { background: var(--mint); color: var(--ink); }
  .svc-utility .gauge-arc { stroke-dashoffset: 60; }
  .svc-utility .gauge-needle { transform: rotate(60deg); }
  .svc-security .scan-line { display: none; }
  .svc-security .shield-check { stroke-dashoffset: 0; }
  .svc-security .lock-chip { opacity: 1; }
}

/* RESULTS */
.results { padding: 96px 0; }
.results-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px; align-items: end; margin-bottom: 48px;
}
.results-head .eyebrow { display: block; margin-bottom: 24px;}
.results-head h2 {
  max-width: 22ch;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 50px);
  line-height: 1.15;
}
.results-head .cta-side { display: flex; justify-content: flex-end; }
.results-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.result-stat {
  padding: 36px;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 260px;
  justify-content: space-between;
}
.result-stat.pink { background: var(--soft-pink); }
.result-stat.white { background: var(--paper); }
.result-stat.mint { background: var(--mint); }
.result-stat .head {
  display: flex; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 24px;
}
.result-stat .v {
  font-family: var(--font-number);
  font-size: 72px; font-weight: 700;
  line-height: 0.9; color: var(--ink);
  letter-spacing: -0.03em;
}
.result-stat .v small { font-size: 38px; }
.result-stat .l { font-size: 16px; font-weight: 500; color: var(--ink); padding-top: 6px;}
.result-stat p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* CASE FEATURE */
.cases { padding: 96px 0; }
.cases-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px; align-items: end; margin-bottom: 48px;
}
.cases-head h2 { max-width: 14ch; font-size: clamp(30px, 3.2vw, 48px); }
.cases-head .right { display: flex; justify-content: flex-end; }
.case-link-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); color: var(--ink);
  padding: 10px 18px 10px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  border: 1px solid var(--line);
}
.case-link-pill .arrow {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--lilac);
  display: grid; place-items: center;
}
.case-link-pill svg { width: 12px; height: 12px; }

.case-feature {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 16 / 9;
}
.case-feature .tag {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  background: var(--mint); color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px; font-weight: 500;
}
.case-feature .overlay {
  position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; color: var(--paper);
}
.case-feature .overlay h3 {
  color: var(--paper);
  font-size: clamp(22px, 2.4vw, 32px);
  max-width: 18ch;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.case-feature .overlay p {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  max-width: 46ch;
  margin-top: 10px;
}
.case-feature .view {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--lilac); color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 20px; border-radius: 12px;
  flex-shrink: 0;
}

/* GROWTH */
.growth { padding: 96px 0; }
.growth-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px; align-items: center;
}
.growth-left { display: flex; flex-direction: column; gap: 24px; }
.growth-left h2 { max-width: 14ch; font-size: clamp(30px, 3.2vw, 48px); }
.growth-left .eyebrow { display: block; }
.growth-left p { max-width: 38ch; }
.growth-card {
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,0.6), rgba(255,255,255,0) 70%),
    radial-gradient(80% 80% at 80% 80%, #ff4d12 0%, #ff7a3a 35%, #ffd6b3 70%, #fff3e6 100%);
  border-radius: var(--r-lg);
  aspect-ratio: 5/4;
  padding: 48px;
  display: grid; place-items: center;
}
.growth-inner {
  width: 100%;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 26px 28px 22px;
  box-shadow: var(--shadow-md);
}
.growth-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.growth-inner .label {
  font-size: 14px; color: var(--muted); margin-bottom: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.growth-inner .vrow { display: flex; align-items: center; gap: 14px; margin-bottom: 8px;}
.growth-inner .v {
  font-family: var(--font-number);
  font-size: 56px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.03em; line-height: 1;
}
.growth-inner .delta {
  background: var(--ink); color: var(--mint);
  font-family: var(--font-number);
  font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: 999px;
}
.growth-legend {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.growth-legend .leg-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(132,239,187,0.35);
}
.growth-chart-svg { width: 100%; height: auto; display: block; margin-top: 8px;}

/* growth chart animations */
.growth-line {
  animation: growthDraw 3.2s ease-out 0.2s forwards;
}
@keyframes growthDraw {
  to { stroke-dashoffset: 0; }
}
.growth-area {
  animation: growthFade 1.4s ease-out 2s forwards;
}
@keyframes growthFade {
  to { opacity: 1; }
}
.growth-points circle {
  opacity: 0;
  animation: growthPop 0.4s ease-out forwards;
}
.growth-points circle:nth-child(1) { animation-delay: 0.9s; }
.growth-points circle:nth-child(2) { animation-delay: 1.4s; }
.growth-points circle:nth-child(3) { animation-delay: 1.9s; }
.growth-points circle:nth-child(4) { animation-delay: 2.4s; }
.growth-points circle:nth-child(5) { animation-delay: 2.7s; }
@keyframes growthPop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}
.growth-points circle { transform-box: fill-box; transform-origin: center; }

.growth-pulse circle:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: growthRing 2.2s ease-out 3.1s infinite;
  opacity: 0;
}
.growth-pulse circle:last-child {
  opacity: 0;
  animation: growthDot 0.4s ease-out 3s forwards;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes growthRing {
  0%   { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes growthDot {
  0%   { opacity: 0; transform: scale(0); }
  60%  { transform: scale(1.5); }
  100% { opacity: 1; transform: scale(1); }
}
.growth-callout {
  opacity: 0;
  animation: calloutIn 0.5s ease-out 3.3s forwards;
}
@keyframes calloutIn {
  0%   { opacity: 0; transform: translate(244px, 4px); }
  100% { opacity: 1; transform: translate(244px, -4px); }
}

@media (prefers-reduced-motion: reduce) {
  .growth-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .growth-area { opacity: 1 !important; animation: none !important; }
  .growth-points circle { opacity: 1 !important; animation: none !important; }
  .growth-pulse circle:first-child { display: none; }
  .growth-pulse circle:last-child { opacity: 1; animation: none; }
  .growth-callout { opacity: 1; animation: none; transform: translate(244px, -4px); }
}

/* TESTIMONIALS */
.testimonials { padding: 96px 0; }
.testi-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; margin-bottom: 64px;}
.testi-head h2 { max-width: 14ch; font-size: clamp(30px, 3.2vw, 48px); }
.testi-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}
.testi-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.testi-card .tag-mono {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.testi-card .photo {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg-2);
  position: relative;
}
.testi-card .photo .pause {
  position: absolute; bottom: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(0,0,0,0.55); color: white;
  display: grid; place-items: center;
}
.testi-card .who { display: flex; align-items: center; gap: 10px; margin-top: auto;}
.testi-card .who .nm { font-size: 16px; font-weight: 600; color: var(--ink);}
.testi-card .who .ti { font-size: 14px; color: var(--muted); }
.testi-feature {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 36px;
  display: flex; flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}
.testi-feature .quote {
  font-family: var(--font-sans);
  font-size: 30px; font-weight: 600;
  line-height: 1.2; color: var(--ink);
  letter-spacing: -0.015em;
}
.testi-feature .who { display: flex; align-items: center; gap: 14px; justify-content: space-between;}
.testi-feature .who .left { display: flex; flex-direction: column; }
.testi-feature .who .nm { font-size: 20px; font-weight: 600; color: var(--ink); font-family: var(--font-sans);}
.testi-feature .who .ti { font-size: 14px; color: var(--muted); }
.testi-feature .avatar {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #b48d68, #6b4a2a);
  flex-shrink: 0;
}
.testi-nav { display: flex; justify-content: center; gap: 14px; margin-top: 48px;}
.testi-nav button {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  display: grid; place-items: center;
}

/* ===== TESTIMONIALS (client voices) ===== */
.voices { padding: 96px 0; }
.voices-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 56px;
}
.voices-head .eyebrow-mark { margin-bottom: 22px; }
.voices-head h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  letter-spacing: -0.02em;
  margin: 0;
}
.voices-lede {
  margin: 18px auto 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}

.voices-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
  align-items: stretch;
}

.voices-card {
  position: relative;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
  will-change: transform;
}
/* Diagonal sheen that sweeps across on hover */
.voices-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 122, 60, 0.18) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.voices-card--light::before { mix-blend-mode: multiply; background: linear-gradient(115deg, transparent 30%, rgba(255, 122, 60, 0.10) 50%, transparent 70%); }
.voices-card:hover::before { transform: translateX(110%); }
.voices-card > * { position: relative; z-index: 1; }

.voices-card:hover { transform: translateY(-8px); }

/* Quote: animated left accent bar */
.voices-quote {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.voices-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent, #ff7a3c), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.voices-card:hover .voices-quote { padding-left: 16px; }
.voices-card:hover .voices-quote::before { transform: scaleY(1); }

/* Stars: elastic pop */
.voices-stars {
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), letter-spacing 0.5s ease;
}
.voices-card:hover .voices-stars { transform: scale(1.08); letter-spacing: 6px; }

/* Monogram: glow ring + scale */
.voices-card .voices-monogram {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
}
.voices-card--feature:hover .voices-monogram {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 4px rgba(255, 122, 60, 0.18), 0 0 24px rgba(255, 122, 60, 0.35);
}
.voices-card--light:hover .voices-monogram {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 4px rgba(255, 122, 60, 0.14), 0 10px 24px -8px rgba(255, 122, 60, 0.45);
}

/* Author meta: subtle slide */
.voices-author-meta {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.voices-card:hover .voices-author-meta { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .voices-card, .voices-card::before, .voices-quote, .voices-quote::before,
  .voices-stars, .voices-monogram, .voices-author-meta { transition: none; }
  .voices-card:hover { transform: none; }
}

/* Featured — dark */
.voices-card--feature {
  background: radial-gradient(130% 130% at 0% 0%, #1d1d1d 0%, #0d0d0d 58%);
  color: #ffffff;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
}
.voices-card--feature:hover { box-shadow: 0 32px 70px -24px rgba(0, 0, 0, 0.65); }
.voices-card--light:hover { box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.18); border-color: rgba(0,0,0,0.12); }
.voices-card--feature .voices-quote { color: #f3f2f0; }
.voices-card--feature .voices-author-name { color: #ffffff; }
.voices-card--feature .voices-author-role { color: rgba(255, 255, 255, 0.55); }
.voices-card--feature .voices-monogram {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Standard — light */
.voices-card--light {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.voices-card--light .voices-quote { color: #2b2a27; }
.voices-card--light .voices-author-name { color: var(--ink); }
.voices-card--light .voices-author-role { color: var(--muted); }
.voices-card--light .voices-monogram {
  background: linear-gradient(135deg, var(--accent-soft), #ffe4d8);
  color: var(--accent-strong);
}

.voices-stars {
  color: var(--accent);
  font-size: 16px;
  letter-spacing: 4px;
  line-height: 1;
}

.voices-quote {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  letter-spacing: -0.005em;
  margin: 0;
  flex: 1 0 auto;
}

.voices-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.voices-monogram {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.voices-author-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.voices-author-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.voices-author-role {
  font-size: 13.5px;
  line-height: 1.4;
}

.voices-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

@media (max-width: 860px) {
  .voices { padding: 72px 0; }
  .voices-grid { grid-template-columns: 1fr; }
  .voices-card { padding: 32px; }
}
@media (max-width: 560px) {
  .voices { padding: 60px 0; }
  .voices-card { padding: 26px 22px; border-radius: 20px; }
  .voices-head { margin-bottom: 40px; }
}

/* WHY */
.why { padding: 96px 0; }
.why-head { text-align: center; margin-bottom: 56px;}
.why-head .eyebrow { display: block; margin-bottom: 22px; }
.why-head h2 { max-width: 18ch; margin: 0 auto; font-size: clamp(30px, 3.2vw, 48px); }
.why-card {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 18px;
  align-items: stretch;
}
.why-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  display: flex;
  flex-direction: column;
}
.why-photo .tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--soft-pink); color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
}
/* Dashboard illustration */
.why-dash {
  flex: 1;
  padding: 64px 28px 28px;
  display: flex; flex-direction: column;
  gap: 28px; justify-content: center;
}
.dash-head {
  display: flex; align-items: center; justify-content: space-between;
}
.dash-title {
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.85); letter-spacing: -0.01em;
}
.dash-live {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--mint); text-transform: uppercase; letter-spacing: 0.1em;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.65); }
}
.dash-metrics { display: flex; flex-direction: column; gap: 18px; }
.dash-row {
  display: flex; align-items: center; gap: 12px;
}
.dash-label {
  font-size: 12px; color: rgba(255,255,255,0.5);
  width: 120px; flex-shrink: 0; white-space: nowrap;
}
.dash-bar {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px; overflow: hidden;
}
.dash-fill {
  height: 100%;
  width: calc(var(--target) * 100%);
  background: linear-gradient(90deg, var(--mint), #cc3617);
  border-radius: 999px;
  transform: scaleX(0); transform-origin: left;
  animation: bar-grow 900ms var(--ease-out) forwards;
}
/* tighter stagger — 80ms between bars per Emil's stagger guidance */
.dash-row:nth-child(1) .dash-fill { animation-delay: 200ms; }
.dash-row:nth-child(2) .dash-fill { animation-delay: 280ms; }
.dash-row:nth-child(3) .dash-fill { animation-delay: 360ms; }
.dash-row:nth-child(4) .dash-fill { animation-delay: 440ms; }
@keyframes bar-grow { to { transform: scaleX(1); } }
.dash-val {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--mint); width: 34px; text-align: right; flex-shrink: 0;
}
.dash-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.dash-stat-v {
  display: block; font-family: var(--font-mono);
  font-size: 26px; font-weight: 700; color: #fff; line-height: 1;
}
.dash-stat-l {
  display: block; font-size: 11px;
  color: rgba(255,255,255,0.45); margin-top: 5px;
}
.dash-avatars { display: flex; }
.av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--ink); margin-left: -9px;
}
.av:first-child { margin-left: 0; }
.av1 { background: linear-gradient(135deg, #ff4800, #cc3617); }
.av2 { background: linear-gradient(135deg, #ff4800, #c47dc8); }
.av3 { background: linear-gradient(135deg, #ffd9cc, #e08ab8); }
/* 2×2 feature cells */
.why-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.why-cell {
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.why-cell:nth-child(2n)   { border-right: 0; }
.why-cell:nth-child(n+3)  { border-bottom: 0; }
.why-cell .ico {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  flex-shrink: 0;
}
.why-cell .ico.ico-lilac { background: var(--soft-pink); border-color: transparent; }
.why-cell .ico.ico-mint  { background: var(--mint);      border-color: transparent; }
.why-cell h4 { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0; }
.why-cell p  { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }

/* FAQ */
.faq { padding: 96px 0; }
.faq-head { text-align: center; margin-bottom: 64px;}
.faq-head .eyebrow { display: block; margin-bottom: 24px;}
.faq-head .eyebrow-mark { margin-bottom: 24px; }
.faq-head h2 { max-width: 14ch; margin: 0 auto; font-size: clamp(30px, 3.2vw, 48px); }
.faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;}
.faq-item {
  background: var(--bg-2);
  border-radius: 14px;
  overflow: hidden;
  transition: background .2s;
}
.faq-item[open] { background: var(--paper); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex; align-items: center;
  gap: 22px;
  font-size: 16px; font-weight: 500;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform .25s;
  color: var(--ink); font-size: 22px;
}
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item .body {
  padding: 0 28px 24px 76px;
  color: var(--muted);
  font-size: 15px; line-height: 1.6;
  max-width: 70ch;
}

/* BLOG */
.blog { padding: 96px 0; }
.blog-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px; align-items: end;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.blog-head h2 { font-size: clamp(30px, 3.2vw, 48px); }
.blog-head .eyebrow { display: block; margin-bottom: 20px;}
.blog-head .right { display: flex; justify-content: flex-end; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card { display: flex; flex-direction: column; gap: 18px; }
.blog-cover {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-2);
}
.blog-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.blog-meta .cat { color: var(--ink); }
.blog-card h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px; line-height: 1.25;
  max-width: 22ch;
}
.blog-card p { font-size: 14px; line-height: 1.55; }

/* CTA */
.cta {
  position: relative;
  padding: 88px 24px;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.cta-bg {
  position: absolute; inset: 0; z-index: 0;
  background: #0d0d0d;
}
.cta-grid {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center center;
}
.cta-glow {
  position: absolute;
  inset: 0; z-index: 2;
  pointer-events: none;
  background:
    /* Primary brand-orange spotlight from the top */
    radial-gradient(85% 95% at 50% 0%, rgba(255, 72, 0, 0.42) 0%, rgba(255, 72, 0, 0.12) 30%, rgba(255, 72, 0, 0) 62%),
    /* Inner warm peach glow for depth + dimensionality */
    radial-gradient(45% 55% at 50% 4%, rgba(255, 180, 130, 0.30) 0%, rgba(255, 180, 130, 0) 55%),
    /* Subtle ember rim along the top edge */
    radial-gradient(120% 14% at 50% 0%, rgba(255, 217, 204, 0.20) 0%, rgba(255, 217, 204, 0) 100%);
}
.cta .inner {
  position: relative; z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 18px;
  color: #ffffff;
  max-width: 880px;
}
.cta .eyebrow-mono {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
.cta .eyebrow-mono .dot {
  width: 7px; height: 7px; border-radius: 999px; background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.cta h2 {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0;
}
.cta h2 em {
  font-style: italic;
  color: rgba(255,255,255,0.88);
}
.cta-sub {
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 4px auto 8px;
}
.cta-actions {
  display: inline-flex; gap: 12px;
  flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}
/* Inverted variant for the dark CTA section — light pill on dark bg
   with the same expanding-disc hover as the dark CTAs. */
.cta-btn-light {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  isolation: isolate;
}
.cta-btn-light::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.7, 0, 0.25, 1);
  z-index: -1;
  pointer-events: none;
}
.cta-btn-light:hover::before { transform: translateY(-50%) scale(20); }
.cta-btn-light:hover { color: #ffffff; }  /* text flips to white on the orange wash */
.cta-btn-light svg {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 13px;
  background: var(--accent);
  border-radius: 50%;
  color: #ffffff;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn-light::before { transition: none; }
  .cta-btn-light:hover::before { transform: translateY(-50%) scale(0); }
  .cta-btn-light:hover { color: var(--ink); }
}
.cta-btn-outline {
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.45);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  padding: 16px 28px;
  border-radius: 999px;
  background: transparent;
  transition: background .15s, border-color .15s;
}
.cta-btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

/* FOOTER */
.footer { background: #0a0a0a; color: var(--paper); padding: 80px 0 40px;}
.footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
}
.footer-brand-block { display: flex; flex-direction: column; gap: 26px; }
.footer-brand {
  display: inline-flex;
  align-items: center;
}
.footer-brand img {
  height: 54px;
  width: auto;
  display: block;
}
.footer-block h5,
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 18px;
}
.footer-block .addr,
.footer-block .email,
.footer-block .phone {
  font-size: 15px; color: var(--paper); line-height: 1.55;
}
.footer-block .email a,
.footer-block .phone a { color: var(--paper); }
.footer-socials { display: flex; gap: 18px; margin-top: 24px; }
.footer-socials a { color: rgba(255,255,255,0.7); transition: color .15s;}
.footer-socials a:hover { color: var(--paper); }
.footer-socials svg { width: 18px; height: 18px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px;}
.footer-col a { color: rgba(255,255,255,0.85); font-size: 15px;}
.footer-col a:hover { color: var(--mint); }
.footer-col a.active { color: var(--mint); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
}
.footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal a {
  color: rgba(255,255,255,0.7);
  transition: color 0.15s ease;
}
.footer-legal a:hover { color: #ffffff; }
.footer-disclaimer {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.45);
  margin-top: 16px;
  max-width: 110ch;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px;}
  .hero-right { max-width: 600px; }
  .impact-cards { grid-template-columns: repeat(2, 1fr); }
  .service-rail { grid-template-columns: repeat(2, 1fr); }
  .results-stats { grid-template-columns: 1fr; }
  .results-head { grid-template-columns: 1fr; }
  .cases-head { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-head { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .why-overlay { grid-template-columns: 1fr; }
  .why-trio { grid-template-columns: 1fr; gap: 32px;}
  .growth-grid { grid-template-columns: 1fr; gap: 32px;}
  .about-trio { grid-template-columns: 1fr; gap: 24px;}

  /* Mobile nav menu */
  .nav-toggle { display: grid; }
  .nav-links {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 32px 24px;
    box-shadow: var(--shadow-md);
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 280ms var(--ease-drawer), opacity 220ms var(--ease-drawer);
    pointer-events: none;
    z-index: 60;
  }
  .nav-links a {
    padding: 16px 4px;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav.open .nav-links {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide the bar CTA on mobile; show it inside the menu instead. */
  .nav-inner > .btn-pill { display: none; }
  .nav-links a.nav-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 16px 22px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
  }
  .nav-links a.nav-cta-mobile svg { width: 18px; height: 18px; }
  .nav-links a.nav-cta-mobile:hover { opacity: 1; }

  .case-feature .overlay { flex-direction: column; align-items: flex-start; gap: 18px;}
}

@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .nav-logo { height: 56px; }
  /* restore vertical breathing room on mobile (the .container rule above zeroes nav-inner padding) */
  .nav-inner { padding: 20px 20px; }
  .nav-links { padding: 8px 20px 24px; }
  .hero { padding: 40px 0 56px; }
  .about { padding: 80px 0 64px; }
  .impact, .service, .results, .cases, .growth,
  .testimonials, .why, .faq, .blog { padding: 64px 0; }
  .service-rail { grid-template-columns: 1fr; }
  .impact-cards { grid-template-columns: 1fr; }
  .result-stat { min-height: 220px; }
  .cta { padding: 60px 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: center; }
  .hero-quote { width: 78%; }
}

/* ===== ACCESSIBILITY: reduce motion ===== */
@media (prefers-reduced-motion: reduce) {
  /* Keep opacity transitions (aid comprehension); remove movement */
  .reveal,
  .reveal-group.in > .reveal,
  .reveal.in {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease;
  }
  .card-reveal,
  .dash-fill,
  .nav-links,
  .impact-card,
  .live-dot {
    transition: opacity 200ms ease !important;
    animation: none !important;
    transform: none !important;
  }
  .gauge-arc,
  .gauge-needle,
  .scan-line,
  .shield-check,
  .orbit-spin-a,
  .orbit-spin-b,
  .pulse-ring,
  .ledger-row {
    animation: none !important;
  }
}

/* ===========================================================
   NEW SECTIONS (added during ICP-driven restructure)
   - About trio: .badge.pink
   - Costs section
   - Services 2-tier (tier-1 row + tier-2 tiles)
   - Proof section
   - Why KCT (3-reason typographic)
   =========================================================== */

/* About trio — three tones of orange, same family, distinct shades */
.about-trio .badge.pink { background: #e63f1d; border-color: transparent; } /* deeper burnt orange */

/* ============== COSTS SECTION ============== */
/* ===========================================================
   WHAT IT COSTS — sticky-scroll card deck
   Six cards stack via position: sticky with a staggered top offset.
   Each card has a subtle rotation, giving the deck a fanned,
   playing-card quality once stacked. Cards are deliberately compact
   (icon tile on top, title, body) so the section stays scannable.
   =========================================================== */
.costs {
  background: var(--bg);
  padding: 120px 0 96px;
}

.costs-head {
  text-align: center;
  margin: 0 auto 72px;
  max-width: 720px;
}
.costs-title {
  /* Match the section-h2 scale used by services / proof / why */
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

/* Stack container — narrower max-width keeps the cards from
   feeling like full-width banners */
.costs-stack {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

.cost-card {
  position: sticky;
  top: calc(96px + (var(--i, 0) * 22px));
  z-index: calc(10 + var(--i, 0));
  margin-bottom: 18px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Compact heights — the reference's cards read as wide-ish
     rectangles, not full panels. Padding is intentionally varied:
     more above the tile, breathing room below the text. */
  padding: 36px 40px 40px;
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(13, 13, 13, 0.04),
    0 22px 50px -28px rgba(13, 13, 13, 0.22);
  overflow: hidden;

  /* Subtle deterministic rotations — each card tilts a hair off-axis
     so when stacked they read as a fanned deck of cards. Even-index
     cards tilt one way, odd the other, with small magnitude. */
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cost-card:nth-child(odd)  { transform: rotate(-0.8deg); }
.cost-card:nth-child(even) { transform: rotate(0.9deg); }
/* The very first and last cards sit straight so the deck's
   "outermost" edges feel intentional, not accidental. */
.cost-card:first-child { transform: rotate(-1.2deg); }
.cost-card:last-child  { transform: rotate(0.6deg); }

/* ---- Color variants ---- */
.cost-card--dark   { background: var(--ink);   color: #ffffff; }
.cost-card--light  { background: #f4f5f4;      color: var(--ink); }
.cost-card--accent { background: var(--accent); color: #ffffff; }

/* ---- Number tile (rounded square in the top-left) ---- */
.cost-card-tile {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  flex-shrink: 0;
}
.cost-card--dark   .cost-card-tile { background: var(--accent); color: #ffffff; }
.cost-card--light  .cost-card-tile { background: var(--ink);    color: #ffffff; }
.cost-card--accent .cost-card-tile { background: var(--ink);    color: #ffffff; }

/* ---- Title + body ---- */
.cost-card-title {
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 12px;
  color: inherit;
  text-wrap: balance;
  max-width: 22ch;
}
.cost-card-text {
  font-size: 15px;
  line-height: 1.55;
  color: inherit;
  opacity: 0.78;
  margin: 0;
  max-width: 52ch;
}

.costs-cta {
  margin-top: 64px;
  display: flex;
  justify-content: center;
  position: relative;
  /* Above the fanned cost-card deck (max z-index 15) but BELOW the sticky
     header (z-index 100) — otherwise, sharing z-index 100 with the header and
     coming later in the DOM, this button paints over the nav while scrolling. */
  z-index: 20;
}

/* ===== Responsive ===== */

@media (max-width: 1000px) {
  .costs { padding: 96px 0 80px; }
  .costs-head { margin-bottom: 56px; }
  .cost-card { top: calc(80px + (var(--i, 0) * 18px)); }
}

@media (max-width: 720px) {
  .costs { padding: 72px 0 72px; }
  .costs-head { margin-bottom: 48px; }
  .costs-title { font-size: clamp(28px, 7vw, 40px); }
  .costs-stack { padding: 0; }
  .cost-card {
    position: static;
    top: auto;
    margin-bottom: 14px;
    border-radius: 20px;
    padding: 28px 26px 30px;
    transform: none !important;
  }
  .cost-card-tile {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    font-size: 17px;
    margin-bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cost-card { transition: none; transform: none; }
}

/* ============== SERVICES — TIER 1 (2-col) ============== */
.service-rail.tier-1 {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.service-rail.tier-1 .service-card {
  aspect-ratio: 4/3.4;
}

/* ============== SERVICES — TIER 2 TILES ============== */
.service-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.service-tile {
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-tile:nth-child(3n) { border-right: 0; }
.service-tile:nth-child(n+4) { border-bottom: 0; }
.service-tile .tile-ico {
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--bg-2);
  display: grid; place-items: center;
  color: var(--ink);
  margin-bottom: 4px;
}
.service-tile h4 {
  font-size: 17px; font-weight: 600; line-height: 1.25;
  color: var(--ink); margin: 0;
}
.service-tile p {
  font-size: 13px; line-height: 1.55;
  color: var(--muted); margin: 0;
}

.service-cta {
  margin-top: 56px;
  display: flex; justify-content: center;
}

/* ============== PROOF SECTION ============== */
.proof { padding: 96px 0; }
.proof-head { text-align: center; margin-bottom: 48px; }
.proof-head .eyebrow { display: block; margin-bottom: 22px; }
.proof-head .eyebrow-mark { margin-bottom: 22px; }
.proof-head h2 {
  max-width: 22ch; margin: 0 auto;
  font-size: clamp(30px, 3.2vw, 48px);
}
.proof-case {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  margin-bottom: 32px;
}
.proof-case-meta {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.proof-case-meta .tag {
  background: var(--mint); color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.proof-case-context {
  font-size: 13px; color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.proof-case-headline {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 28ch;
}
.proof-case-summary {
  font-size: 16px; line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 36px;
}
.proof-case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.case-stat { display: flex; flex-direction: column; gap: 6px; }
.case-stat .v {
  font-family: var(--font-number);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700; line-height: 1;
  color: var(--ink); letter-spacing: -0.02em;
}
.case-stat .v small {
  font-size: 0.5em; font-weight: 600; color: var(--muted); margin-left: 4px;
}
.case-stat .l {
  font-size: 13px; line-height: 1.4;
  color: var(--muted);
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.proof-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
}
.proof-stat .v {
  font-family: var(--font-number);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700; line-height: 1;
  color: var(--ink); letter-spacing: -0.02em;
}
.proof-stat .v small {
  font-size: 0.5em; font-weight: 600; color: var(--muted);
}
.proof-stat .l {
  font-size: 13px; line-height: 1.4;
  color: var(--muted);
}

.proof-cta {
  margin-top: 32px;
  display: flex; justify-content: center;
}

/* ============== WHY KCT — sticky header + stacked cards ============== */
.why {
  background: var(--bg);
}
.why-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.why-side {
  position: sticky;
  top: 112px;
}
.why-side h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 24px;
  max-width: 14ch;
}
.why-side-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 36ch;
  margin: 0;
}

.why-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.why-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition:
    transform 360ms var(--ease-out),
    box-shadow 360ms var(--ease-out),
    border-color 280ms ease;
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-2);
}
.why-card-ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background-color 320ms var(--ease-out), color 320ms ease;
}
.why-card-ico svg { width: 22px; height: 22px; }
.why-card h4 {
  font-size: clamp(22px, 1.7vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.why-card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* Card colour variants */
.why-card--white:hover .why-card-ico {
  background: var(--accent);
  color: var(--paper);
}

.why-card--orange {
  background: var(--accent);
  border-color: transparent;
}
.why-card--orange h4 { color: var(--paper); }
.why-card--orange p  { color: rgba(255,255,255,0.82); }
.why-card--orange .why-card-ico {
  background: var(--paper);
  color: var(--accent);
}
.why-card--orange:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px -18px rgba(255,72,0,0.45);
}

.why-card--black {
  background: var(--ink);
  border-color: transparent;
}
.why-card--black h4 { color: var(--paper); }
.why-card--black p  { color: rgba(255,255,255,0.72); }
.why-card--black .why-card-ico {
  background: var(--accent);
  color: var(--paper);
}
.why-card--black:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.55);
}

/* ============== RESPONSIVE ADJUSTMENTS ============== */
@media (max-width: 1100px) {
  .service-rail.tier-1 { grid-template-columns: 1fr; gap: 24px; }
  .service-tiles { grid-template-columns: repeat(2, 1fr); }
  .service-tile:nth-child(3n) { border-right: 1px solid var(--line); }
  .service-tile:nth-child(2n) { border-right: 0; }
  .service-tile:nth-child(n+4) { border-bottom: 1px solid var(--line); }
  .service-tile:nth-child(n+5) { border-bottom: 0; }
  .proof-case-stats { grid-template-columns: 1fr; gap: 18px; }
  .proof-stats { grid-template-columns: 1fr; }
  .why-split { grid-template-columns: 1fr; gap: 40px; }
  .why-side { position: static; }
  .why-side h2 { max-width: 22ch; }
  .why-side-lede { max-width: 60ch; }
}

@media (max-width: 640px) {
  .service-tiles { grid-template-columns: 1fr; }
  .service-tile { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .service-tile:last-child { border-bottom: 0 !important; }
  .proof-case { padding: 28px 24px; }
  .why-card { padding: 28px; }
}

/* ===========================================================
   ABOUT PAGE (/about)
   - Hero, Story, People, Practice
   - All reuse the home page visual system (Geist, mint/lilac/pink,
     same radius/spacing rhythm) so the page feels like one site.
   =========================================================== */

/* ============== ABOUT HERO — editorial statement ============== */
.about-hero {
  position: relative;
  padding: 120px 0 96px;
  text-align: center;
  overflow: hidden;
}
.about-hero .container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
}
.about-hero .eyebrow-mark { margin-bottom: 40px; }

/* Faint blueprint backdrop — architectural grid masked to fade at edges.
   Ties to "municipal / cities" theme without competing with the type. */
.about-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 13, 13, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 25%, transparent 88%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 25%, transparent 88%);
  pointer-events: none;
  z-index: 0;
}

.about-hero-h1 {
  font-family: var(--font-sans);
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 auto 36px;
  max-width: 22ch;
  text-wrap: balance;
}
.about-hero-h1 .hi {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--accent);
  padding: 0 0.04em;
  position: relative;
  white-space: nowrap;
}
/* Hand-drawn underline accent beneath the highlighted word */
.about-hero-h1 .hi::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.12em;
  height: 0.16em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2014'%20preserveAspectRatio='none'%3E%3Cpath%20d='M3%2010%20C%2040%204%2080%204%20118%207%20C%20150%209.5%20180%208%20197%204'%20fill='none'%20stroke='%23ff4800'%20stroke-width='4'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.about-hero-lead {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 58ch;
  margin: 0 auto 88px;
  text-wrap: pretty;
}

/* Creed — 3 manifesto principles below the lead */
.about-creed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 40px;
  max-width: 1080px;
  margin: 0 auto;
}
.creed-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.creed-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 4px;
}
.creed-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.creed-line {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 34ch;
}

/* Editorial sign-off — small italic mark line below the creed */
@media (max-width: 900px) {
  .about-hero { padding: 88px 0 64px; }
  .about-hero-lead { margin-bottom: 64px; }
  .about-creed { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
}

/* ============== STORY ============== */
.about-story {
  padding: 96px 0 136px;
}

/* Centered intro block: eyebrow + large declarative paragraph. */
.story-intro {
  max-width: 980px;
  margin: 0 auto 88px;
  text-align: center;
}
.story-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}
.story-lede {
  /* Type matches the home "About us" intro (.about h2.intro) exactly. */
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--ink);
  margin: 0;
}

/* Three colored stat cards. Each: big number + label on top, divider,
   body paragraph anchored to the bottom. Heights match so the row reads
   as one band. */
.story-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 1320px;
  margin: 0 auto;
}
.story-card {
  border-radius: 22px;
  padding: 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.story-card-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.story-card--pink  { background: var(--soft-pink); }
.story-card--white { background: var(--paper); border: 1px solid var(--line); }
.story-card--mint  { background: var(--mint); }

.story-card-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 22px;
}
.story-card-v {
  font-family: var(--font-sans);
  font-size: clamp(44px, 4.5vw, 68px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  white-space: nowrap;
}
.story-card-v small {
  font-size: 0.5em;
  font-weight: 500;
  margin-left: 2px;
}
.story-card-l {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 14ch;
}
.story-card-divider {
  border: none;
  height: 1px;
  background: rgba(13, 13, 13, 0.22);
  margin: 0;
  width: 100%;
}
.story-card-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* Responsive */
@media (max-width: 1000px) {
  .story-cards { grid-template-columns: 1fr; gap: 14px; max-width: 720px; }
  .story-card { padding: 32px 30px; }
}
@media (max-width: 560px) {
  .about-story { padding: 72px 0; }
  .story-intro { margin-bottom: 56px; }
  .story-kicker { margin-bottom: 24px; }
  .story-card { padding: 28px 26px; }
  .story-card-head { gap: 14px; }
  .story-card-l { font-size: 17px; }
}

/* ============== PEOPLE ============== */
.about-people {
  padding: 96px 0;
}
.people-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.people-head .eyebrow-mark {
  justify-content: center;
  margin-bottom: 18px;
}
.people-head h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  margin: 0 0 18px;
}
.people-head .lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
  margin: 0 auto;
}

.people-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 920px;
  margin: 0 auto;
}
.person {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 40px;
}

/* Principal photo placeholder — replace the div with an <img> when photos exist.
   The placeholder uses a soft gradient + a "[Photo pending]" label, sized to
   match a portrait 4:5 photo crop. */
.principal-photo {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: rgba(13, 13, 13, 0.45);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
}
.principal-photo--mint  { background: linear-gradient(155deg, var(--mint),  #ffd9cc); }
.principal-photo--lilac { background: linear-gradient(155deg, var(--lilac), #ffd9cc); }
.principal-photo--pink  { background: linear-gradient(155deg, var(--soft-pink), #ffe8de); }
.principal-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.person-content { padding-top: 6px; }
.person-content h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.person-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
.person-bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* ============== PRACTICE — vertical process flow ============== */
.about-practice {
  padding: 120px 0;
  background: var(--bg);
}

.practice-header {
  text-align: center;
  margin-bottom: 88px;
}
.practice-header .eyebrow-mark { margin-bottom: 28px; }
.practice-header h2 {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 auto 20px;
  max-width: 16ch;
}
.practice-header-lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}

.practice-flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 920px;
  position: relative;
  --flow-progress: 0;
}
/* Base grey line that runs through all markers */
.practice-flow::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 39px;
  width: 2px;
  background: var(--line);
  border-radius: 999px;
  z-index: 0;
}
/* Orange progress fill that grows from top as the user scrolls through */
.practice-flow::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 39px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-radius: 999px;
  z-index: 0;
  transform-origin: top;
  transform: scaleY(var(--flow-progress, 0));
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.practice-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding: 24px 0;
}

/* Larger node with two-layer treatment: paper fill + orange ring,
   filled solid orange when active or hovered. */
.practice-step-marker {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  transition:
    background 360ms var(--ease-out),
    border-color 360ms var(--ease-out),
    box-shadow 360ms var(--ease-out),
    transform 360ms var(--ease-out);
}
.practice-step.is-active .practice-step-marker,
.practice-step:hover .practice-step-marker {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 12px 28px -10px rgba(255, 72, 0, 0.45);
  transform: scale(1.06);
}
.practice-step.is-active .practice-step-num,
.practice-step:hover .practice-step-num {
  color: var(--paper);
}
/* Subtle outer halo when the step becomes active */
.practice-step-marker::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 360ms ease, transform 360ms var(--ease-out);
}
.practice-step.is-active .practice-step-marker::after {
  opacity: 0.35;
  transform: scale(1);
}

.practice-step-num {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  transition: color 360ms ease;
}

/* Content card sits to the right of the node */
.practice-step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 32px;
  transition:
    border-color 280ms ease,
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.practice-step:hover .practice-step-card {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.practice-step.is-active .practice-step-card {
  border-color: var(--accent);
  box-shadow: 0 14px 30px -16px rgba(255, 72, 0, 0.28);
}
.practice-step-card h4 {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.practice-step-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* Practice responsive */
@media (max-width: 640px) {
  .practice-step { grid-template-columns: 56px 1fr; gap: 16px; }
  .practice-step-marker { width: 56px; height: 56px; }
  .practice-step-num { font-size: 14px; }
  .practice-flow::before,
  .practice-flow::after { left: 27px; top: 28px; bottom: 28px; }
  .practice-step-card { padding: 20px 22px; }
}

/* ============== ABOUT — RESPONSIVE ============== */
@media (max-width: 900px) {
  .person {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px;
  }
  .principal-photo {
    max-width: 200px;
  }
  .practice-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .about-hero  { padding: 64px 0 48px; }
  .about-story { padding: 48px 0 72px; }
  .about-people, .about-practice { padding: 72px 0; }
}

/* ===========================================================
   TEAM GRID (about page — 4×2 photo cards with floating info pill)
   Replaces the earlier .people-grid / .person / .principal-photo
   layout. The old classes are retained for backwards compat but
   no longer used by the template.
   =========================================================== */
/* Clean headshot grid: a uniformly framed photo with the name + role set
   below. Photo areas are forced to white so the mixed / cut-out source
   images all read as consistent studio headshots. Single grid, no groups. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
}
.team-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease, border-color 0.28s ease;
}
.team-card:hover .team-photo {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Orange shade that washes over the photo on hover */
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 72, 0, 0.16) 0%, rgba(255, 72, 0, 0.46) 100%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.team-card:hover .team-photo::after {
  opacity: 1;
}
.team-info {
  padding: 16px 6px 0;
  text-align: center;
}
.team-text h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.team-role {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
}
@media (max-width: 460px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
  .team-text h3 { font-size: 14px; }
  .team-role { font-size: 11.5px; }
}

/* Team sub-section dividers (Leadership / The team) */
.team-subhead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
}
.team-subhead-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.team-subhead-title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent);
  flex: none;
}
.team-subhead-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Leadership row — same card/photo size as the team grid so images are
   never upscaled beyond their native resolution. Distinguished by the
   divider label and accent-coloured roles, not by size. */
.team-grid--lead {
  margin-bottom: 64px;
}
.team-card--lead .team-text h3 { font-size: 16px; }
.team-card--lead .team-role {
  font-weight: 500;
  color: var(--accent);
}

/* ============== VALUES ============== */
.about-values {
  padding: 96px 0 120px;
}
.values-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 720px;
}
.values-head .eyebrow-mark {
  justify-content: center;
  margin-bottom: 18px;
}
.values-head h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  margin: 0 0 18px;
}
.values-head .lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
  margin: 0 auto;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}
.value-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 38px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.value-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.value-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.value-icon svg { width: 23px; height: 23px; display: block; }
.value-card:hover .value-icon { background: var(--accent); color: #fff; }
.value-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 20px;
}
.value-top .value-num { margin-bottom: 0; }
.value-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
}
.value-body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 44ch;
}
.value-detail {
  border-top: 1px solid var(--line);
  margin: auto -38px 0;
  padding: 0 38px;
}
.value-detail summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .2s;
}
.value-detail summary:hover { color: var(--accent); }
.value-detail summary::-webkit-details-marker { display: none; }
.value-detail-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  transition: transform .3s var(--ease-out), background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.value-detail[open] .value-detail-icon {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.value-detail-body {
  padding: 4px 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}

@media (max-width: 880px) {
  .values-grid { grid-template-columns: 1fr; max-width: 640px; }
  .value-card { padding: 32px 30px; }
}
@media (max-width: 560px) {
  .about-values { padding: 72px 0 88px; }
  .values-head { margin-bottom: 44px; }
  .value-card { padding: 28px 26px; }
  .value-title { font-size: 20px; }
  .value-body { font-size: 15px; }
}

/* ===========================================================
   ABOUT HERO — 2×2 cards alongside hero copy
   =========================================================== */

/* Override the single-column about hero container with a 2-col grid.
   1.15fr / 1fr split gives the hero copy slightly more weight so the
   cards support the message rather than competing with it. */
.about-hero .container.about-hero-grid {
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-hero-left { max-width: 100%; }
.about-hero-left .lead { max-width: none; }

/* Tighter typography for the constrained left column. */
.about-hero-grid .eyebrow { margin-bottom: 22px; }
.about-hero-grid h1 {
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 16ch;
}
.about-hero-grid .lead {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  max-width: 48ch;
}

/* Cards container — 2×2 grid sizing to content (no forced square). */
.about-hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Generic hero card — tighter padding, smaller radius, sensible min-height. */
.hero-card {
  background: var(--bg-2);
  border-radius: 20px;
  padding: 22px 24px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

/* Photo card — full-bleed image, no padding, matches min-height of stat cards. */
.hero-card--photo {
  padding: 0;
  background: transparent;
  min-height: 168px;
}
.hero-card--photo img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* Warm/peach card variant (used by the avatar card) */
.hero-card--warm {
  background: var(--soft-pink);
}

/* Stat typography inside hero cards — proportionate to a sidebar visual,
   not a hero billboard. */
.hero-stat-v {
  font-family: var(--font-sans);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  /* Prevent awkward word-breaks like "Senior-/led" */
  hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-stat-v small {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 1px;
}
.hero-stat-l {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.35;
}

/* Avatar row at the bottom of the warm card — slightly smaller to match
   the new card scale. */
.hero-avatars {
  display: flex;
  margin-top: 14px;
}
.hero-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  margin-left: -7px;
  flex-shrink: 0;
}
.hero-av:first-child { margin-left: 0; }
.hero-av--mint  { background: linear-gradient(155deg, var(--mint),       #cc3617); }
.hero-av--lilac { background: linear-gradient(155deg, var(--lilac),      #cc3617); }
.hero-av--pink  { background: linear-gradient(155deg, var(--soft-pink),  #cc3617); }
.hero-av--peach { background: linear-gradient(155deg, #f5dac0,           #e0b88a); }

/* Responsive — stack columns on tablet and below */
@media (max-width: 900px) {
  .about-hero .container.about-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-hero-cards {
    max-width: 480px;
  }
}
@media (max-width: 480px) {
  .hero-card { padding: 18px 20px; min-height: 140px; }
  .hero-card--photo, .hero-card--photo img { min-height: 140px; }
  .hero-stat-l { font-size: 13px; }
}

/* ===========================================================
   ABOUT HERO — animated integration network card
   Replaces the photo card. "Integration-first practice" rendered
   as 4 module nodes flowing into a central hub.
   =========================================================== */
.hero-card--anim {
  padding: 0;
  background: var(--bg-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.anim-net {
  width: 100%;
  height: 100%;
  display: block;
}

/* Background grid lines — subtle, no animation. */
.net-grid line { /* nothing — purely decorative */ }

/* Outer nodes — 4 brand-colored discs with a soft breathing scale */
.net-node {
  stroke: #0d0d0d;
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: net-breathe 3.2s ease-in-out infinite;
}
.net-node--mint  { fill: var(--mint);  }
.net-node--lilac { fill: var(--lilac); }
.net-node--pink  { fill: var(--soft-pink); }
.net-node--peach { fill: #f5dac0; }

.net-node--mint  { animation-delay: 0s; }
.net-node--lilac { animation-delay: 0.4s; }
.net-node--pink  { animation-delay: 0.8s; }
.net-node--peach { animation-delay: 1.2s; }

@keyframes net-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.18); opacity: 1; }
}

/* Connection lines — draw into the center, hold, then fade out */
.net-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: net-draw 3.6s ease-in-out infinite;
  opacity: 0.85;
}
.nl-1 { animation-delay: 0s; }
.nl-2 { animation-delay: 0.4s; }
.nl-3 { animation-delay: 0.8s; }
.nl-4 { animation-delay: 1.2s; }

@keyframes net-draw {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  30%  { stroke-dashoffset: 0;   opacity: 0.85; }
  70%  { stroke-dashoffset: 0;   opacity: 0.85; }
  100% { stroke-dashoffset: -60; opacity: 0; }
}

/* Center hub — gentle outward pulse ring */
.net-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: net-pulse 2.4s ease-out infinite;
}
@keyframes net-pulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* Respect reduced-motion: freeze the animations, keep the diagram visible */
@media (prefers-reduced-motion: reduce) {
  .net-node, .net-line, .net-pulse { animation: none; }
  .net-line { stroke-dashoffset: 0; opacity: 0.85; }
}

/* ===========================================================
   ABOUT — WORD FROM OUR CEO
   Two-column quote section: text/signature on left, portrait on right.
   Uses KCT palette (mint gradient for the photo slot, ink type).
   =========================================================== */
.about-founder {
  padding: 96px 0 88px;
  background: var(--bg-2);
}

.founder-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 64px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: center;
}

/* LEFT column — text content, vertically distributed top/middle/bottom */
.founder-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: 4px 0;
}

/* Founder eyebrow uses the shared .eyebrow-mark style (orange square + mono text). */
.founder-top { display: flex; }
.founder-top .eyebrow-mark { margin-bottom: 0; }

/* Quote block — large opening quote glyph, then the quote prose */
.founder-quote-block {
  margin: 0;
  max-width: 56ch;
}
.founder-quote-mark {
  display: block;
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 700;
  line-height: 0.7;
  color: var(--ink);
  margin-bottom: 18px;
}
.founder-quote {
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

/* Bottom row — meta block on left, cursive signature on right */
.founder-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.founder-meta { min-width: 0; }
.founder-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.founder-title {
  font-size: 14px;
  color: var(--muted);
}
.founder-signature {
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  opacity: 0.55;
  white-space: nowrap;
}

/* RIGHT column — portrait placeholder. When real photo exists, swap the
   <div class="founder-photo founder-photo--mint"> for <img src="..." class="founder-photo">. */
.founder-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.founder-photo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1.15;
  margin-left: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--shadow-md);
}
.founder-photo--mint  { background: linear-gradient(155deg, var(--mint),      #cc3617); }
.founder-photo--lilac { background: linear-gradient(155deg, var(--lilac),     #cc3617); }
.founder-photo--pink  { background: linear-gradient(155deg, var(--soft-pink), #cc3617); }
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Responsive */
@media (max-width: 1000px) {
  .founder-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .founder-left { gap: 32px; }
  .founder-right { justify-content: center; }
  .founder-photo { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .about-founder { padding: 72px 0; }
  .founder-quote { font-size: 18px; }
  .founder-quote-mark { font-size: 44px; }
  .founder-bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .founder-signature { font-size: 36px; }
}

/* ===========================================================
   CONTACT PAGE (/contact)
   Reuses .practice-list for the "How it works" step list.
   =========================================================== */

/* ============== CONTACT HERO ============== */
.contact-hero {
  padding: 96px 0 40px;
  text-align: center;
}
.contact-hero .container {
  max-width: 860px;
}
.contact-hero .eyebrow {
  display: inline-block;
  margin-bottom: 32px;
}
.contact-hero h1 {
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0 0 24px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.contact-hero .lead {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
}
/* (Hero CTAs intentionally removed — page IS the contact destination.
   The form below and the channels section carry the action.) */

/* ============== CONTACT CHANNELS ============== */
.contact-channels-section {
  padding: 32px 0 96px;
}
.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 1320px;
  margin: 0 auto;
}
.contact-channel {
  border-radius: 22px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
}
.contact-channel--mint  { background: var(--mint); }
.contact-channel--white { background: var(--paper); border: 1px solid var(--line); }
.contact-channel--pink  { background: var(--soft-pink); }

.contact-channel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.contact-channel-num,
.contact-channel-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.contact-channel-num { opacity: 0.55; }

.contact-channel-title {
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}
.contact-channel-divider {
  border: none;
  height: 1px;
  background: rgba(13, 13, 13, 0.2);
  margin: 0;
}
.contact-channel-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.contact-channel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  margin-top: auto;
  align-self: flex-start;
  transition: opacity 200ms var(--ease-out);
}
.contact-channel-cta:hover { opacity: 0.7; }
/* Let cards shrink and long emails wrap so a 40-char address can't force
   the grid wider than a phone screen. */
.contact-channel { min-width: 0; }
.contact-channel-cta { max-width: 100%; overflow-wrap: anywhere; }

/* ============== CONTACT PROCESS ("How it works") ============== */
.contact-process {
  padding: 96px 0;
  background: var(--bg-2);
}
.contact-process-head {
  text-align: center;
  margin-bottom: 56px;
}
.contact-process-head .eyebrow {
  display: block;
  margin-bottom: 22px;
}
.contact-process-head h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  margin: 0;
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1000px) {
  .contact-channels {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .contact-channel { min-height: auto; padding: 28px; }
}
@media (max-width: 560px) {
  .contact-hero { padding: 72px 0 48px; }
  .contact-hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .contact-process { padding: 72px 0; }
}

/* ===========================================================
   CONTACT FORM
   Lives between Hero and Channels on /contact.
   Plugin-free WP submission via admin-post.php.
   =========================================================== */
.contact-form-section {
  padding: 24px 0 96px;
}
.contact-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}

/* Status banners — shown after submission via ?status= query param */
.form-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border-radius: 12px;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 1.45;
}
.form-banner strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.form-banner span { color: var(--ink); opacity: 0.78; }
.form-banner--success {
  background: var(--mint);
  border: 1px solid rgba(13, 13, 13, 0.08);
}
.form-banner--error {
  background: var(--soft-pink);
  border: 1px solid rgba(13, 13, 13, 0.08);
}

/* Rich confirmation card — replaces the form on successful submit */
.form-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 40px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  animation: form-confirmation-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form-confirmation-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft, #ffe4d8), #ffd0bb);
  color: var(--accent-strong, #c64a14);
  margin-bottom: 8px;
  animation: form-confirmation-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
.form-confirmation-icon svg { width: 28px; height: 28px; }
.form-confirmation-title {
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.form-confirmation-body {
  max-width: 52ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.form-confirmation-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form-confirmation-meta {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}
@keyframes form-confirmation-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes form-confirmation-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .form-confirmation, .form-confirmation-icon { animation: none; }
}

/* Form layout */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Labels — mono uppercase tracked-out (matches eyebrow style) */
.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-field label .optional {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2);
  margin-left: 4px;
  font-weight: 400;
}

/* Inputs + textareas */
.form-field input,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted-2);
}
.form-field input:hover,
.form-field textarea:hover {
  border-color: var(--line-2);
}
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(132, 239, 187, 0.22);
}
.form-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
  font-family: var(--font-sans);
}

/* Select dropdowns — chrome matches the text inputs above, with a
   custom caret SVG instead of the native one. */
.form-field select,
.form-select {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 44px 14px 16px;
  width: 100%;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.form-field select:hover,
.form-select:hover { border-color: var(--line-2); }
.form-field select:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(132, 239, 187, 0.22);
}
/* Greyed placeholder colour when no option is chosen */
.form-field select:has(option[value=""]:checked),
.form-select:has(option[value=""]:checked) { color: var(--muted-2); }

/* Hint text — small grey explanation below a select or radio group */
.form-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Fieldset wrapping a radio group (e.g. "Timeline for support") */
.form-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-fieldset legend {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 4px;
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Custom radio: native input visually hidden, .form-radio-mark draws
   the circle (and inner dot when checked). Keeps native keyboard +
   screen-reader semantics. */
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
  position: relative;
}
.form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}
.form-radio-mark {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line-2);
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
  transition: border-color 200ms var(--ease-out),
              background-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.form-radio:hover .form-radio-mark { border-color: var(--ink); }
.form-radio input[type="radio"]:checked + .form-radio-mark {
  border-color: var(--accent);
  background-color: var(--accent);
}
.form-radio input[type="radio"]:checked + .form-radio-mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--paper);
}
.form-radio input[type="radio"]:focus-visible + .form-radio-mark {
  box-shadow: 0 0 0 4px rgba(255, 72, 0, 0.18);
}

/* Honeypot — keep visually + screen-reader hidden, but in the form */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit row — form submit on the left, calendar booking on the right.
   Two equal-weight actions: "Send details" (form) OR "Book a discovery call" (calendar). */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.form-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* "or" divider between the two buttons */
.form-actions-or {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px;
}

/* Primary submit + secondary calendar buttons on the contact form.
   Same dark pill + orange disc + disc-bloom-on-hover as .btn-black. */
.form-submit,
.form-calendar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: none;
  padding: 8px 8px 8px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.form-submit::before,
.form-calendar::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.7, 0, 0.25, 1);
  z-index: -1;
  pointer-events: none;
}
.form-submit:hover::before,
.form-calendar:hover::before { transform: translateY(-50%) scale(20); }
.form-submit svg,
.form-calendar svg {
  position: relative;
  z-index: 1;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 13px;
  background: var(--accent);
  border-radius: 50%;
  color: #ffffff;
  flex-shrink: 0;
}
.form-submit:active,
.form-calendar:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .form-submit::before,
  .form-calendar::before { transition: none; }
  .form-submit:hover::before,
  .form-calendar:hover::before { transform: translateY(-50%) scale(0); }
}

.form-disclaimer {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 640px) {
  .form-actions-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .form-actions-or { text-align: center; }
  .form-submit,
  .form-calendar { justify-content: center; }
}

/* Responsive */
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form-section { padding: 32px 0 72px; }
  /* Keep the dark-pill + orange-disc proportions, just slightly tighter. */
  .form-submit,
  .form-calendar { padding: 6px 6px 6px 22px; font-size: 15px; }
}

/* ===========================================================
   ACCENT CONTRAST OVERRIDES
   Wherever the brand orange (#ff4800 — also exposed as --mint
   and --lilac aliases) appears as a solid background, force
   white text + iconography + dividers so legibility holds.
   Peach (--soft-pink) backgrounds keep dark text since peach
   is light enough on its own.
   =========================================================== */

/* 1. Top promo bar */
.promo,
.promo a { color: #ffffff; }

/* 2. Nav pill button "Book a discovery call" */
.btn-pill { color: #ffffff; }

/* 3. About trio — mint and lilac badges (both now orange) */
.about-trio .badge.mint,
.about-trio .badge.lilac,
.about-trio .badge.pink { color: #ffffff; }

/* 4. Service card numbered tag pill ("01 / Stabilization") */
.service-card .tag { color: #ffffff; }

/* 5. Solid orange buttons (mint button + calendar booking) */
.btn-mint,
.form-calendar { color: #ffffff; }

/* 6. Story section — orange ("mint") card */
.story-card--mint,
.story-card--mint .story-card-v,
.story-card--mint .story-card-l,
.story-card--mint .story-card-title,
.story-card--mint .story-card-body { color: #ffffff; }
.story-card--mint .story-card-v small { color: rgba(255, 255, 255, 0.75); }
.story-card--mint .story-card-divider { background: rgba(255, 255, 255, 0.45); }

/* 7. Contact channel — orange ("mint") channel */
.contact-channel--mint,
.contact-channel--mint .contact-channel-num,
.contact-channel--mint .contact-channel-kind,
.contact-channel--mint .contact-channel-title,
.contact-channel--mint .contact-channel-body,
.contact-channel--mint .contact-channel-cta { color: #ffffff; }
.contact-channel--mint .contact-channel-num { opacity: 0.8; }
.contact-channel--mint .contact-channel-divider { background: rgba(255, 255, 255, 0.45); }
.contact-channel--mint .contact-channel-cta { border-bottom-color: rgba(255, 255, 255, 0.7); }

/* 8. Service-card finance ledger-row animation — checkmark ticks
   light up on an orange dot, so the check itself flips to white. */
.svc-finance .ledger-row .check { color: #ffffff; }


/* ===========================================================
   404 — cloud-backdrop section between the site header and footer.
   Same Geist typography as the rest of the site. Pale sky base
   with stacked radial gradients faking a cloudscape.
   =========================================================== */
.error-page {
  position: relative;
  min-height: 78vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 80px 24px;
  background: #dfecf2;              /* pale sky blue */
}

/* Cloud field — eight stacked radial gradients form a soft, drifting
   cloudscape without needing any raster assets. */
.error-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 820px 380px at 10% 14%,  rgba(255,255,255,0.95), rgba(255,255,255,0) 65%),
    radial-gradient(ellipse 720px 320px at 88% 8%,   rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 640px 300px at 28% 82%,  rgba(255,255,255,0.92), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 820px 360px at 78% 78%,  rgba(255,255,255,0.85), rgba(255,255,255,0) 65%),
    radial-gradient(ellipse 540px 260px at 58% 32%,  rgba(255,255,255,0.72), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 420px 200px at 14% 50%,  rgba(255,255,255,0.62), rgba(255,255,255,0) 55%),
    radial-gradient(ellipse 500px 240px at 92% 52%,  rgba(255,255,255,0.62), rgba(255,255,255,0) 55%),
    radial-gradient(ellipse 380px 180px at 50% 100%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%);
}

.error-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
}

/* Title — same Geist sans as the rest of the site, large and confident. */
.error-title {
  font-family: var(--font-sans);
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 24px;
}

.error-sub {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 40px;
}

/* Black pill CTA — same monospace treatment as every other site CTA */
.error-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.error-cta:hover  { background: #2a2a2a; }
.error-cta:active { transform: scale(0.97); }
.error-cta svg    { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .error-page { padding: 56px 20px; min-height: 60vh; }
  .error-title { font-size: clamp(40px, 13vw, 72px); margin-bottom: 18px; }
  .error-sub { font-size: 15px; margin-bottom: 28px; }
}

/* ===========================================================
   SERVICES — BENTO (4-card capability grid)
   Each card has a unique mockup composition + title + body.
   Brand orange #ff4800 replaces the reference's green accent.
   =========================================================== */

/* Section header — centered, with dotted eyebrow */
.bento-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 80px;
}
.bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.bento-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 1px;
  display: inline-block;
  margin-right: -2px;
}
.bento-head h2 {
  font-size: clamp(36px, 4.8vw, 60px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0 0 24px;
}
.bento-head .bento-lede {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--muted-2);
  margin: 0 auto;
  max-width: 56ch;
}

/* Bento grid — 2x2 */
.service-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
}

/* Card shell */
.bento-card {
  background: #f4f5f4;          /* slightly cooler grey, matches reference */
  border-radius: 32px;
  padding: 72px 56px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  min-height: 540px;
}

/* Visual area — relative container for absolutely-positioned mock cards.
   Taller (380px) so mocks have presence, with bottom margin pushing
   the title/body down into the lower half of the card. */
.bento-visual {
  position: relative;
  width: 100%;
  height: 320px;
  margin-bottom: 40px;
  display: grid;
  place-items: center;
}

/* Title + body */
.bento-title {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}
.bento-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.bento-title a:hover { color: var(--accent); }
.bento-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-2);
  margin: 0;
  max-width: 48ch;
  text-wrap: pretty;
}

/* ===== MOCK CARDS (the inner UI mockups) ===== */
.mock {
  position: absolute;
  border-radius: 18px;
  padding: 18px 20px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 28px 56px -12px rgba(13, 13, 13, 0.24),
              0 8px 16px -8px rgba(13, 13, 13, 0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.mock--dark {
  background: #141414;
  color: #ffffff;
}
.mock--light {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid rgba(13, 13, 13, 0.03);
}
.mock--tilt-l { transform: rotate(-5deg) scale(0.8); z-index: 1; }
.mock--tilt-r { transform: rotate(3.5deg) scale(0.8); z-index: 2; }

/* Mock primitives */
.mock-label {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.02em;
}
.mock-stat {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.mock-stat em {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  color: var(--accent);
}
.mock--dark .mock-stat em {
  color: #ffb89d;
}
.mock-sub {
  font-size: 11px;
  opacity: 0.6;
}

.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
}
.mock-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.mock--dark .mock-meta { color: rgba(255, 255, 255, 0.6); }

.mock-bar {
  width: 100%;
  height: 5px;
  background: rgba(13, 13, 13, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.mock-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.mock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
}
.mock-check {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.mock-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mock-pill {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(13, 13, 13, 0.06);
  color: var(--ink);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
}
.mock--dark .mock-pill {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}
.mock-pills--dark .mock-pill {
  background: rgba(255, 255, 255, 0.1);
}

.mock-dots {
  display: inline-flex;
  gap: 4px;
}
.mock-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin-top: 4px;
}
.mock-chart i {
  flex: 1;
  background: rgba(13, 13, 13, 0.1);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}
.mock-chart i.is-active {
  background: var(--accent);
}
.mock-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ===== POSITIONING per visual variant =====
   Mocks pushed closer to centre for stronger overlap and a more
   layered "floating cards" feel. */

/* 01 — Stabilization */
.bento-visual--stabilization .mock:nth-child(1) {
  top: 6%; left: 6%;
  width: 190px;
}
.bento-visual--stabilization .mock:nth-child(2) {
  bottom: 6%; right: 4%;
  width: 252px;
}

/* 02 — Operations */
.bento-visual--operations .mock:nth-child(1) {
  top: 4%; left: 4%;
  width: 232px;
}
.bento-visual--operations .mock:nth-child(2) {
  bottom: 4%; right: 4%;
  width: 256px;
}

/* 03 — Finance */
.bento-visual--finance .mock:nth-child(1) {
  top: 4%; right: 6%;
  width: 200px;
}
.bento-visual--finance .mock:nth-child(2) {
  bottom: 6%; left: 4%;
  width: 252px;
}

/* 04 — Rescue */
.bento-visual--rescue .mock:nth-child(1) {
  top: 4%; left: 4%;
  width: 232px;
}
.bento-visual--rescue .mock:nth-child(2) {
  bottom: 4%; right: 4%;
  width: 256px;
}

/* 04 — Adoption (orbit, legacy — no longer rendered) */
.bento-visual--adoption {
  display: grid;
  place-items: center;
}
.mock-orbit {
  position: relative;
  width: 380px;
  height: 360px;
  display: grid;
  place-items: center;
}
/* Three concentric dashed rings — matches the reference's deeper orbit */
.mock-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(13, 13, 13, 0.16);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mock-ring--outer  { width: 360px; height: 360px; }
.mock-ring--middle { width: 250px; height: 250px; }
.mock-ring--inner  { width: 140px; height: 140px; }

.mock-orbit-hub {
  width: 56px;
  height: 56px;
  background: var(--ink);
  color: #ffffff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 2;
}

.mock-orbit-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Orbit radius is set per pill below so we can stagger them on different
     rings. The keyframes use --r so each pill can sit at its own distance. */
  --r: 150px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border: 1px solid rgba(13, 13, 13, 0.04);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(13, 13, 13, 0.10),
              0 2px 6px rgba(13, 13, 13, 0.06);
  white-space: nowrap;
  z-index: 3;
  /* Initial transform — keyframes override this, but it's a safe fallback. */
  transform: translate(-50%, -50%) rotate(0deg) translateY(calc(var(--r) * -1)) rotate(0deg);
}
.mock-orbit-pill i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--soft-pink), #ffe8de);
  flex-shrink: 0;
}
.mock-orbit-pill em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(255, 72, 0, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 2px;
  letter-spacing: 0.02em;
}
/* Orbit radius per pill — slightly varied so the three sit on different rings
   instead of a single visible track. The continuous-rotation animation is
   defined further down in the activity-animation block. */
.mock-orbit-pill--top    { --r: 158px; }
.mock-orbit-pill--right  { --r: 142px; }
.mock-orbit-pill--bottom { --r: 152px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .service-bento { grid-template-columns: 1fr; max-width: 640px; }
  .bento-card { padding: 48px 40px 40px; }
  .bento-visual { height: 300px; margin-bottom: 36px; }
}
@media (max-width: 560px) {
  .bento-head { margin-bottom: 48px; }
  .bento-head h2 { font-size: clamp(28px, 7vw, 40px); }
  .bento-card { padding: 36px 28px 32px; border-radius: 24px; }
  .bento-visual { height: 260px; margin-bottom: 28px; }
  .bento-visual--stabilization .mock:nth-child(1),
  .bento-visual--operations .mock:nth-child(1),
  .bento-visual--rescue .mock:nth-child(1),
  .bento-visual--finance .mock:nth-child(2) { width: 165px; }
  .bento-visual--stabilization .mock:nth-child(2),
  .bento-visual--operations .mock:nth-child(2),
  .bento-visual--rescue .mock:nth-child(2),
  .bento-visual--finance .mock:nth-child(1) { width: 195px; }
  .mock-orbit { width: 280px; height: 240px; }
  .mock-ring--outer { width: 240px; height: 240px; }
  .mock-ring--inner { width: 140px; height: 140px; }
  .mock-orbit-pill { font-size: 11px; padding: 4px 12px 4px 4px; }
  .mock-orbit-pill i { width: 18px; height: 18px; }
}

/* ===========================================================
   BENTO MOCKUPS — in-mockup activity animations
   Each card animates its content (progress bars filling, status
   dots pulsing, checks appearing in sequence, rings rotating,
   hub emitting a live-ping) so the section reads as a set of
   active, working UI surfaces rather than static decoration.
   =========================================================== */

/* ---- Card 1: Stabilization ---- */

/* Progress bar — fill with a traveling highlight shimmer */
.bento-visual--stabilization .mock-bar {
  overflow: hidden;
  position: relative;
}
.bento-visual--stabilization .mock-bar i {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) 35%,
    #ffb89d 50%,
    var(--accent) 65%,
    var(--accent) 100%
  );
  background-size: 240% 100%;
  animation: mock-bar-shimmer 2.6s linear infinite;
}
@keyframes mock-bar-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Reconciliation items — staggered fade-in loop, like checks completing */
.bento-visual--stabilization .mock-list li {
  opacity: 0;
  animation: mock-check-cycle 4.8s ease-in-out infinite;
}
.bento-visual--stabilization .mock-list li:nth-child(1) { animation-delay: 0.2s; }
.bento-visual--stabilization .mock-list li:nth-child(2) { animation-delay: 0.9s; }
.bento-visual--stabilization .mock-list li:nth-child(3) { animation-delay: 1.6s; }
@keyframes mock-check-cycle {
  0%, 100% { opacity: 0; transform: translateX(-6px); }
  15%, 85% { opacity: 1; transform: translateX(0); }
}

/* The trend arrow next to "Day 4" gently bounces */
.bento-visual--stabilization .mock-stat em {
  animation: mock-arrow-bob 2.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes mock-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ---- Card 2: Operations ---- */

/* Live monitoring dots — heartbeat pulse, staggered */
.bento-visual--operations .mock-dots i {
  animation: mock-dot-pulse 1.8s ease-in-out infinite;
}
.bento-visual--operations .mock-dots i:nth-child(1) { animation-delay: 0s; }
.bento-visual--operations .mock-dots i:nth-child(2) { animation-delay: 0.3s; }
.bento-visual--operations .mock-dots i:nth-child(3) { animation-delay: 0.6s; }
@keyframes mock-dot-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1);   opacity: 1; }
}

/* Bar chart — each bar grows in sequence from 0 to its target, holds, restarts.
   The CSS var --target is set inline on each <i>; animation reads it. */
.bento-visual--operations .mock-chart i {
  transform-origin: bottom center;
  animation: mock-bar-grow 6s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.bento-visual--operations .mock-chart i:nth-child(1) { animation-delay: 0s; }
.bento-visual--operations .mock-chart i:nth-child(2) { animation-delay: 0.15s; }
.bento-visual--operations .mock-chart i:nth-child(3) { animation-delay: 0.30s; }
.bento-visual--operations .mock-chart i:nth-child(4) { animation-delay: 0.45s; }
.bento-visual--operations .mock-chart i:nth-child(5) { animation-delay: 0.60s; }
.bento-visual--operations .mock-chart i:nth-child(6) { animation-delay: 0.75s; }
@keyframes mock-bar-grow {
  0%       { transform: scaleY(0.1); }
  20%, 88% { transform: scaleY(1); }
  95%      { transform: scaleY(0.1); }
  100%     { transform: scaleY(0.1); }
}

/* The active (orange) bar gets an extra breathing pulse at the apex */
.bento-visual--operations .mock-chart i.is-active {
  animation: mock-bar-grow 6s cubic-bezier(0.23, 1, 0.32, 1) infinite,
             mock-bar-glow 2s ease-in-out 1.2s infinite;
  animation-delay: 0.75s, 1.2s;
}
@keyframes mock-bar-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 72, 0, 0); }
  50%      { box-shadow: 0 -4px 16px -2px rgba(255, 72, 0, 0.5); }
}

/* ---- Card 3: Finance ---- */

/* Covenant items — same staggered fade-in pattern as Card 1, slower */
.bento-visual--finance .mock-list li {
  opacity: 0;
  animation: mock-check-cycle 5.4s ease-in-out infinite;
}
.bento-visual--finance .mock-list li:nth-child(1) { animation-delay: 0.3s; }
.bento-visual--finance .mock-list li:nth-child(2) { animation-delay: 1.1s; }
.bento-visual--finance .mock-list li:nth-child(3) { animation-delay: 1.9s; }

/* Bond rating gently pulses to signal "live measurement" */
.bento-visual--finance .mock-stat {
  animation: mock-stat-pulse 3.2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes mock-stat-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.03); opacity: 0.92; }
}

/* ---- Card 4: Rescue ---- */

/* Recovery checklist — staggered fade-in mirroring Card 1 */
.bento-visual--rescue .mock-list li {
  opacity: 0;
  animation: mock-check-cycle 5.4s ease-in-out infinite;
}
.bento-visual--rescue .mock-list li:nth-child(1) { animation-delay: 0.4s; }
.bento-visual--rescue .mock-list li:nth-child(2) { animation-delay: 1.2s; }
.bento-visual--rescue .mock-list li:nth-child(3) { animation-delay: 2.0s; }

/* Recovery bar fills then holds at 100% */
.bento-visual--rescue .mock-bar i {
  transform-origin: left;
  animation: mock-bar-fill 5.4s ease-out infinite;
}
@keyframes mock-bar-fill {
  0%      { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}

/* Triage status dots pulse to signal "live monitoring" */
.bento-visual--rescue .mock-dots i {
  animation: mock-dot-pulse 1.6s ease-in-out infinite;
}
.bento-visual--rescue .mock-dots i:nth-child(2) { animation-delay: 0.2s; }
.bento-visual--rescue .mock-dots i:nth-child(3) { animation-delay: 0.4s; }

/* ---- Card 4 legacy: Adoption (orbit, no longer rendered) ---- */

/* Three dashed rings rotate at different speeds + directions.
   Each rule rebuilds the centering transform so rotate doesn't fight it. */
@keyframes mock-ring-cw  { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mock-ring-ccw { to { transform: translate(-50%, -50%) rotate(-360deg); } }

.mock-ring--outer  { animation: mock-ring-cw  64s linear infinite; }
.mock-ring--middle { animation: mock-ring-ccw 48s linear infinite; }
.mock-ring--inner  { animation: mock-ring-cw  36s linear infinite; }

/* Hub — gentle breathing scale + orange "ping" ripple, like a live indicator */
.mock-orbit-hub {
  animation: mock-hub-pulse 2.8s ease-out infinite;
}
@keyframes mock-hub-pulse {
  0%       { transform: scale(1); box-shadow: 0 0 0 0   rgba(255, 72, 0, 0.45); }
  70%, 100% { transform: scale(1); box-shadow: 0 0 0 18px rgba(255, 72, 0, 0); }
  50%      { transform: scale(1.04); }
}

/* Pills continuously circle the KCT hub. The transform chain is:
     translate(-50%, -50%)        → place anchor at orbit center
     rotate(angle)                → swing around the hub
     translateY(calc(var(--r)*-1))→ push outward by the pill's radius
     rotate(-angle)               → counter-rotate so the text stays upright
   A second animation (mock-pill-breath) handles box-shadow only so it
   doesn't fight the transform-driven orbit. */
.mock-orbit-pill {
  animation:
    mock-pill-orbit 32s linear infinite,
    mock-pill-breath 3.4s ease-in-out infinite;
}
/* Stagger 120° apart by negative-delaying the 32s orbit by 1/3 and 2/3.
   Second delay value drives the independent breath animation. */
.mock-orbit-pill--top    { animation-delay: 0s,      0s; }
.mock-orbit-pill--right  { animation-delay: -10.66s, -1.1s; }
.mock-orbit-pill--bottom { animation-delay: -21.33s, -2.2s; }

@keyframes mock-pill-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg)
                    translateY(calc(var(--r) * -1)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg)
                    translateY(calc(var(--r) * -1)) rotate(-360deg); }
}
@keyframes mock-pill-breath {
  0%, 100% { box-shadow: 0 10px 22px rgba(13, 13, 13, 0.10),
                          0 2px  6px rgba(13, 13, 13, 0.06); }
  50%      { box-shadow: 0 14px 30px rgba(13, 13, 13, 0.14),
                          0 4px  10px rgba(13, 13, 13, 0.08); }
}

/* Adoption percentage badges flicker their orange background subtly */
.mock-orbit-pill em {
  animation: mock-badge-glow 2.6s ease-in-out infinite;
}
.mock-orbit-pill--top    em { animation-delay: 0s; }
.mock-orbit-pill--right  em { animation-delay: -0.9s; }
.mock-orbit-pill--bottom em { animation-delay: -1.7s; }
@keyframes mock-badge-glow {
  0%, 100% { background: rgba(255, 72, 0, 0.10); }
  50%      { background: rgba(255, 72, 0, 0.22); }
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .bento-visual--stabilization .mock-bar i,
  .bento-visual--stabilization .mock-list li,
  .bento-visual--stabilization .mock-stat em,
  .bento-visual--operations    .mock-dots i,
  .bento-visual--operations    .mock-chart i,
  .bento-visual--finance  .mock-list li,
  .bento-visual--finance  .mock-stat,
  .bento-visual--rescue   .mock-list li,
  .bento-visual--rescue   .mock-bar i,
  .bento-visual--rescue   .mock-dots i,
  .mock-ring--outer,
  .mock-ring--middle,
  .mock-ring--inner,
  .mock-orbit-hub,
  .mock-orbit-pill,
  .mock-orbit-pill em {
    animation: none !important;
  }
  /* Make sure all items are visible when animations are off */
  .bento-visual--stabilization .mock-list li,
  .bento-visual--finance  .mock-list li,
  .bento-visual--rescue   .mock-list li {
    opacity: 1;
    transform: none;
  }
  .bento-visual--rescue .mock-bar i { transform: scaleX(1); }
  /* Restore the original asymmetric pill placement when motion is reduced —
     the orbit animation is disabled above, so we need static positions
     instead of the keyframe-driven transform. */
  .mock-orbit-pill--top {
    top: 8%;  left: 32%;
    transform: translateX(-50%);
  }
  .mock-orbit-pill--right {
    top: 46%; left: auto; right: -2%;
    transform: translateY(-50%);
  }
  .mock-orbit-pill--bottom {
    top: auto; bottom: 10%; left: 58%;
    transform: translateX(-50%);
  }
}

/* ===========================================================
   CLIENT MARQUEE — sits between hero and About
   A horizontally scrolling strip of municipality wordmarks.
   The track holds two identical .clients-strip children;
   translating the track by -50% lands the second strip exactly
   where the first started, so the keyframe loop never jumps.
   Matches the reference exactly: white background (same as the
   rest of the page), thin neutral dividers, no panel fill.
   =========================================================== */
.clients {
  background: var(--bg);
  padding: 56px 0 0;
  overflow: hidden;
}
.clients-heading {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 40px;
}

.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
}
/* White-to-transparent gradients overlaid on each edge of the marquee —
   gives the impression of logos blurring out as they enter/leave, while
   keeping the horizontal hairlines fully solid across the width. */
.clients-marquee::before,
.clients-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  pointer-events: none;
  z-index: 2;
}
.clients-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
.clients-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.clients-track {
  display: flex;
  width: max-content;
  animation: clients-scroll 40s linear infinite;
}
.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

.clients-strip {
  display: flex;
  flex-shrink: 0;
}

.clients-cell {
  /* Each cell is a wordmark "tile" with thin dividers on either side
     (collapsed via negative margin between adjacent cells so the line
     doesn't double up). Same white background as the page so the line
     reads as a hairline rule, not a panel edge. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 280px;
  height: 120px;
  padding: 0 56px;
  background: var(--bg);
  border-left: 1px solid rgba(13, 13, 13, 0.08);
  margin-right: -1px; /* collapse the doubled hairline */
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.clients-cell:last-child {
  border-right: 1px solid rgba(13, 13, 13, 0.08);
}
/* Real client logos — scaled to fit within a uniform box (max-height +
   max-width with auto dimensions) so mixed aspect ratios never distort. */
.clients-logo {
  width: auto;
  height: auto;
  max-height: 58px;
  max-width: 200px;
  object-fit: contain;
  flex-shrink: 0;
}
.clients-name {
  line-height: 1;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .clients { padding-top: 40px; }
  .clients-heading { font-size: 14px; margin-bottom: 28px; }
  .clients-cell {
    min-width: 200px;
    height: 96px;
    padding: 0 36px;
    font-size: 18px;
    gap: 10px;
  }
  .clients-logo { max-height: 46px; max-width: 150px; }
  .clients-marquee::before,
  .clients-marquee::after { width: 80px; }
}

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

/* ===========================================================
   CAREERS PAGE (/careers)
   - Talent-pool variant. Reuses the home page's visual system
     (eyebrow-mark, .why-split / .why-card, btn-black).
   =========================================================== */

.careers-hero { padding: 120px 0 96px; }
.careers-hero .container { max-width: 1240px; }
.careers-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.careers-hero-left .eyebrow-mark { margin-bottom: 32px; }
.careers-hero-left h1 {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 14ch;
}
.careers-hero-left .lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

/* Right-side status panel — editorial dashboard summary */
.careers-hero-status {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
}
.careers-hero-status-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.careers-hero-status-label .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,72,0,0.14);
}
.careers-hero-status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.careers-hero-status-row:last-of-type { border-bottom: 0; }
.careers-hero-status-row .v {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.careers-hero-status-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: opacity 200ms ease, gap 200ms var(--ease-out);
}
.careers-hero-status-cta:hover {
  opacity: 0.72;
  gap: 14px;
}
.careers-hero-status-cta svg {
  width: 14px;
  height: 14px;
}

/* Reuses .why-split etc. — no overrides needed, just section padding. */
.careers-traits { padding: 96px 0; background: var(--bg); }
.careers-traits .container { max-width: 1240px; }
.careers-traits .why-side .eyebrow-mark { margin-bottom: 28px; }

/* How we work — sticky head + numbered editorial list */
/* ROLES WE HIRE — editorial role list on a grey band */
.careers-roles { padding: clamp(72px, 8vw, 100px) 0; background: var(--bg-2); }
.careers-roles .container { max-width: 1240px; }
.careers-roles-head { max-width: 760px; margin: 0 0 clamp(36px, 4vw, 52px); }
.careers-roles-head .eyebrow-mark { margin-bottom: 28px; }
.careers-roles-head h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; letter-spacing: -0.022em; font-weight: 600; margin: 0; }
.careers-roles-lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--muted); margin: 18px 0 0; max-width: 640px; }
.careers-roles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.careers-role {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 32px 30px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}
.careers-role:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
.careers-role-num { position: absolute; top: 30px; right: 32px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted-2); }
.careers-role-ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong);
  margin-bottom: 22px;
  transition: background-color 220ms ease, color 220ms ease;
}
.careers-role-ico svg { width: 24px; height: 24px; }
.careers-role:hover .careers-role-ico { background: var(--accent); color: #fff; }
.careers-role-title { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; padding-right: 32px; }
.careers-role-desc { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; }
/* The 5th card lands alone on the last row of the 2-col grid — center it at half width */
@media (min-width: 769px) {
  .careers-role:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
}
@media (max-width: 768px) {
  .careers-roles-grid { grid-template-columns: 1fr; }
}

.careers-how { padding: 96px 0; background: var(--bg-2); }
.careers-how .container { max-width: 1240px; }
.careers-how-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.careers-how-head {
  position: sticky;
  top: 112px;
}
.careers-how-head .eyebrow-mark { margin-bottom: 28px; }
.careers-how-head h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0;
  max-width: 14ch;
}
.careers-how-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.careers-how-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.careers-how-item:last-child { border-bottom: 1px solid var(--line); }
.careers-how-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  padding-top: 4px;
}
.careers-how-item h4 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.careers-how-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
}

/* Apply / introduce yourself — centered CTA */
.careers-apply {
  padding: 120px 0;
  text-align: center;
  background: var(--bg);
}
.careers-apply .container { max-width: 880px; }
.careers-apply .eyebrow-mark { margin-bottom: 28px; }
.careers-apply h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 auto 24px;
  max-width: 18ch;
}
.careers-apply p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto 36px;
}
.careers-apply .btn-black {
  display: inline-flex;
  margin: 0 auto;
  /* The label is a long email; let it wrap and never exceed the screen. */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 1100px) {
  .careers-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .careers-hero-status { position: static; max-width: 480px; }
  .careers-how-grid { grid-template-columns: 1fr; gap: 40px; }
  .careers-how-head { position: static; }
}
@media (max-width: 640px) {
  .careers-hero { padding: 96px 0 64px; }
  .careers-hero-status { padding: 24px 22px 28px; }
  .careers-how-item { grid-template-columns: 40px 1fr; gap: 12px; }
}


/* ===========================================================
   CAREERS — REDESIGN
   Hero, "built for", flip-card principles, deal grid, CEO quote,
   hiring pills, model job posting, apply, closer, EEO line.
   =========================================================== */

/* Hero v2 — simpler left-aligned layout, no status aside */
.careers-hero-v2 {
  padding: clamp(80px, 9vw, 120px) 0 clamp(60px, 7vw, 96px);
}
.careers-hero-v2 .container { max-width: 1080px; }
.careers-hero-v2 .eyebrow-mark { margin-bottom: 28px; }
.careers-hero-v2 h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 22ch;
}
.careers-hero-v2 .lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 36px;
}
.careers-hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.careers-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding: 12px 4px;
}
.careers-hero-link svg { width: 18px; height: 18px; }

/* Built-for list — set on soft grey to break from hero. Header is centered
   over the card grid, matching the service-page "approach" treatment. */
.careers-builtfor {
  padding: clamp(72px, 8vw, 100px) 0;
  background: var(--bg-2);
  text-align: center;
}
.careers-builtfor .container { max-width: 1180px; }
.careers-builtfor .eyebrow-mark {
  justify-content: center;
}
.careers-builtfor h2 {
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--ink);
  margin: 18px auto 18px;
  max-width: 22ch;
}
.careers-builtfor-lede {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 auto 0;
  max-width: 60ch;
}
.careers-builtfor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.careers-builtfor-list li {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  padding-left: 32px;
  position: relative;
}
.careers-builtfor-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 18px;
}

/* Numbered card grid — mirrors the service-page .erps-step pattern:
   black circular number badge on the left, body paragraph on the right. */
.careers-builtfor-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 48px auto 0;
  max-width: 1080px;
}
.careers-builtfor-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 30px;
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: flex-start;
  text-align: left;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.careers-builtfor-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: 0 18px 36px -22px rgba(13, 13, 13, 0.18);
}
.careers-builtfor-card-num {
  flex-shrink: 0;
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.careers-builtfor-card p {
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.careers-builtfor-card p strong { color: var(--ink); font-weight: 600; }
/* Center the orphan when there's an odd number of cards (5 → 2+2+1). */
@media (min-width: 721px) {
  .careers-builtfor-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    justify-self: center;
  }
}
@media (max-width: 720px) {
  .careers-builtfor-cards { grid-template-columns: 1fr; }
  .careers-builtfor-card { padding: 24px 22px; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .careers-builtfor-card { transition: none; }
  .careers-builtfor-card:hover { transform: none; }
}

/* Operating principles — flip cards */
.careers-principles { padding: clamp(80px, 9vw, 120px) 0; }
.careers-principles-head {
  max-width: 720px;
  margin: 0 0 56px;
}
.careers-principles-head h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--ink);
  margin: 18px 0 14px;
  max-width: 22ch;
}
.careers-principles-lede {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--muted);
  margin: 0;
}
.careers-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Flip card scaffold */
.flip-card {
  perspective: 1200px;
  width: 100%;
  min-height: 280px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  min-height: 280px;
  transition: transform 600ms var(--ease-out);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-visible .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card:focus { outline: none; }
.flip-card:focus-visible .flip-card-front,
.flip-card:focus-visible .flip-card-back {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 30px 28px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flip-card-front {
  background: var(--paper);
  border: 1px solid var(--line);
}
.flip-card-back {
  background: var(--ink);
  color: var(--paper);
  transform: rotateY(180deg);
  border: 1px solid var(--ink);
  justify-content: center;
}
.flip-card-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.flip-card-front h4 {
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.flip-card-front p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.flip-card-back h4 {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 4px;
}
.flip-card-back p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}
@media (max-width: 1000px) {
  .careers-principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .careers-principles-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition: none; }
}

/* The deal */
.careers-deal { padding: clamp(80px, 9vw, 120px) 0; }
.careers-deal h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 16px 0 0;
  max-width: 22ch;
}
.careers-deal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  margin-top: 56px;
}
.careers-deal-item h4 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  position: relative;
  padding-left: 24px;
}
.careers-deal-item h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 2px;
  background: var(--accent);
}
.careers-deal-item p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  padding-left: 24px;
}
.careers-deal-item em {
  color: var(--muted-2);
  font-style: italic;
  font-size: 14.5px;
}
@media (max-width: 720px) {
  .careers-deal-grid { grid-template-columns: 1fr; }
}

/* CEO quote */
.careers-ceo {
  padding: clamp(80px, 9vw, 110px) 0;
  background: var(--bg-2);
}
.careers-ceo-quote {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.careers-ceo-mark {
  font-family: var(--font-sans);
  font-size: 72px;
  font-weight: 700;
  line-height: 0.6;
  color: var(--accent);
  display: block;
  margin-bottom: 24px;
}
.careers-ceo-quote p {
  font-size: clamp(19px, 1.85vw, 26px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 28px;
}
.careers-ceo-attr {
  font-size: 14px !important;
  color: var(--muted) !important;
  font-style: italic;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Who we're hiring */
.careers-hiring { padding: clamp(80px, 9vw, 120px) 0; }
.careers-hiring h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 16px 0 48px;
  max-width: 22ch;
}
.careers-hiring-group { margin-bottom: 40px; }
.careers-hiring-group h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.careers-hiring-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.careers-hiring-pills li {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.careers-hiring-pills li:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.careers-hiring-note {
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--bg-2);
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.careers-hiring-note strong { color: var(--ink); }

/* Model job posting */
.careers-posting {
  padding: clamp(80px, 9vw, 120px) 0;
  background: var(--bg-2);
}
.careers-posting h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 16px 0 14px;
  max-width: 22ch;
}
.careers-posting-lede {
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--muted);
  margin: 0;
}
.careers-posting-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(36px, 5vw, 56px);
  max-width: 920px;
  margin: 48px auto 0;
}
.careers-posting-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.careers-posting-badges li {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 6px 12px;
}
.careers-posting-badges li.is-open {
  background: var(--accent);
  color: var(--paper);
}
.careers-posting-card h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 22px;
}
.careers-posting-card h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 28px 0 12px;
}
.careers-posting-card p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.careers-posting-card p strong { color: var(--ink); }

/* Apply (replaces .careers-apply when v2 wrapper is used) */
.careers-apply-v2 {
  padding: clamp(80px, 9vw, 120px) 0;
  text-align: center;
}
.careers-apply-v2 .container { max-width: 760px; }
.careers-apply-v2 .eyebrow-mark { margin-bottom: 24px; }
.careers-apply-v2 h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.careers-apply-v2 p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 auto 36px;
  max-width: 60ch;
}

/* Closer — dark band, large statement */
.careers-closer {
  padding: clamp(64px, 7vw, 96px) 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.careers-closer .container { max-width: 820px; }
.careers-closer p {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Open Roles — table-style list driven by the Customizer */
.openings { padding: clamp(80px, 9vw, 120px) 0; }
.openings .container { max-width: 1180px; }
.openings-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.openings-eyebrow {
  display: inline-block;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 8px 22px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 32px;
  letter-spacing: -0.005em;
}
.openings h2 {
  /* size/weight/letter-spacing inherit from the global h2 scale */
  margin: 0 auto 24px;
  max-width: 22ch;
}
.openings-lede {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto;
  max-width: 52ch;
}
.openings-list {
  border-top: 1px solid var(--line);
}
.openings-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(0, 1.6fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 3.2vw, 38px) 0;
  border-bottom: 1px solid var(--line);
}
.openings-row-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.openings-row-title {
  font-size: clamp(20px, 1.85vw, 26px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}
.openings-row-meta {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.4;
}
.openings-row-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.openings-row-cta {
  display: inline-flex;
  align-items: center;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 26px;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.openings-row-cta:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-1px);
}
.openings-empty {
  padding: 32px 0;
  font-size: 15.5px;
  color: var(--muted);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.openings-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .openings-row {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    padding: 28px 0;
  }
  .openings-row-cta { justify-self: start; }
}

/* ============================================================
   Role families — always-on list, grouped by kind
   ============================================================ */
.careers-families {
  padding: clamp(80px, 9vw, 120px) 0;
  background: #fafaf7;
  border-top: 1px solid var(--line);
}
.careers-families .container { max-width: 1180px; }

.careers-families-head {
  max-width: 760px;
  margin: 0 0 48px;
}
.careers-families-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  color: var(--ink);
}
.careers-families-lede {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

/* Group cluster */
.careers-families-group + .careers-families-group { margin-top: 56px; }
.careers-families-group-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* Grid of cards */
.careers-families-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.careers-families-card { display: flex; }

.careers-families-link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 26px 56px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.careers-families-link:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.careers-families-link:focus-visible {
  outline: 2px solid var(--accent, #ff5a1f);
  outline-offset: 3px;
}

.careers-families-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.careers-families-name {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.careers-families-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  flex: 1;
}

.careers-families-arrow {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.careers-families-arrow svg { width: 14px; height: 14px; }
.careers-families-link:hover .careers-families-arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateX(2px);
}

@media (max-width: 1024px) {
  .careers-families-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .careers-families-grid { grid-template-columns: 1fr; }
  .careers-families-link { padding: 22px 22px 52px; }
  .careers-families-head { margin-bottom: 36px; }
  .careers-families-group + .careers-families-group { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .careers-families-link,
  .careers-families-arrow { transition: none; }
  .careers-families-link:hover { transform: none; }
  .careers-families-link:hover .careers-families-arrow { transform: none; }
}

/* EEO line */
.careers-eeo {
  padding: 28px 0 48px;
  text-align: center;
}
.careers-eeo .container { max-width: 760px; }
.careers-eeo p {
  font-size: 13px;
  color: var(--muted-2);
  margin: 0;
  line-height: 1.6;
}
.careers-eeo em { color: var(--muted-2); font-style: italic; }


/* ===========================================================
   ERP HEALTH CHECK (/erp-health-check/)
   Free diagnostic tool. Four screens: intro → question → email →
   result. Plus a print-only branded report container that pops up
   when the user downloads.
   =========================================================== */

.health-check {
  position: relative;
  padding: 96px 0 120px;
  background: var(--bg);
}
.health-check .container { max-width: 1080px; }

/* Screens: only the active screen is visible. */
.hc-screen { display: block; }
.hc-screen[hidden] { display: none; }

/* ----- INTRO ----- */
.hc-screen--intro { text-align: center; }
.hc-screen--intro .eyebrow-mark { margin-bottom: 32px; }
.hc-intro-h1 {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.hc-intro-lead {
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto 48px;
}
.hc-intro-features {
  list-style: none;
  margin: 0 auto 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  text-align: left;
  max-width: 760px;
}
.hc-intro-features li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.hc-feature-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 72, 0, 0.14);
}
.hc-intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.hc-intro-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----- QUESTION ----- */
.hc-screen--question .container { max-width: 760px; }
.hc-progress {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}
.hc-progress-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hc-progress-step { color: var(--accent); font-weight: 600; }
.hc-progress-cat {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--ink);
}
.hc-progress-bar {
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.hc-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 999px;
  transition: width 360ms var(--ease-out);
}

.hc-question {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 36px;
}
.hc-question-text {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.hc-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-option {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 200ms var(--ease-out);
}
.hc-option:hover {
  border-color: var(--line-2);
  background: #fafaf8;
}
.hc-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.hc-option-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  display: inline-block;
  position: relative;
  transition: border-color 220ms ease, background 220ms ease;
}
.hc-option.is-selected .hc-option-mark {
  border-color: var(--accent);
  background: var(--accent);
}
.hc-option.is-selected .hc-option-mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--paper);
  border-radius: 50%;
}
.hc-option-text {
  font-size: 16px;
  line-height: 1.45;
  flex: 1;
}

.hc-question-nav { display: flex; }
.hc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 8px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 200ms ease;
}
.hc-back:hover { color: var(--ink); }
.hc-back svg { width: 14px; height: 14px; }

/* ----- EMAIL GATE ----- */
.hc-screen--email .container { max-width: 760px; }
.hc-screen--email .eyebrow-mark { margin-bottom: 28px; }
.hc-email-h2 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 20px;
  max-width: 16ch;
}
.hc-email-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 36px;
  max-width: 56ch;
}
.hc-email-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hc-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.hc-required { color: var(--accent); }
.hc-field input {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hc-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 72, 0, 0.14);
}
.hc-form-error {
  background: rgba(255, 72, 0, 0.08);
  border: 1px solid rgba(255, 72, 0, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--accent-strong);
}
.hc-submit { align-self: flex-start; margin-top: 8px; }
.hc-privacy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 0 0;
}

/* ----- RESULT ----- */
.hc-result-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 56px;
}
.hc-result-head .eyebrow-mark { margin-bottom: 24px; }
.hc-result-prepared {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.hc-result-prepared strong { color: var(--ink); font-weight: 600; }

.hc-result-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 56px;
}

/* Score card — circular ring + band copy */
.hc-score-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.hc-score-card[data-band="critical"],
.hc-score-card[data-band="at-risk"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.hc-score-card[data-band="critical"] .hc-band-name,
.hc-score-card[data-band="at-risk"] .hc-band-name,
.hc-score-card[data-band="critical"] .hc-score-num,
.hc-score-card[data-band="at-risk"] .hc-score-num { color: var(--paper); }
.hc-score-card[data-band="critical"] .hc-band-blurb,
.hc-score-card[data-band="at-risk"] .hc-band-blurb,
.hc-score-card[data-band="critical"] .hc-score-out,
.hc-score-card[data-band="at-risk"] .hc-score-out,
.hc-score-card[data-band="critical"] .hc-band-label,
.hc-score-card[data-band="at-risk"] .hc-band-label { color: rgba(255, 255, 255, 0.72); }
.hc-score-card[data-band="critical"] .hc-score-track,
.hc-score-card[data-band="at-risk"] .hc-score-track { stroke: rgba(255, 255, 255, 0.18); }

.hc-score-ring {
  position: relative;
  width: 220px;
  height: 220px;
}
.hc-score-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hc-score-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 12;
}
.hc-score-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.hc-score-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.hc-score-num {
  font-family: var(--font-number);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.hc-score-out {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hc-band { display: flex; flex-direction: column; gap: 10px; max-width: 36ch; }
.hc-band-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hc-band-name {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.hc-band-blurb {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Categories card */
.hc-categories {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hc-section-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.hc-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Dimension rows — name on the left, severity badge on the right.
   Replaces the previous % bars (with only one question per dimension,
   the bars resolved to four values and read as misleadingly precise). */
.hc-dimension-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-dim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.hc-dim-name { font-weight: 500; color: var(--ink); font-size: 15px; }
.hc-dim-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  white-space: nowrap;
}
.hc-dim-row[data-level="critical"] .hc-dim-badge { background: #fde4e0; color: #b32500; }
.hc-dim-row[data-level="at-risk"]  .hc-dim-badge { background: #fdecd1; color: #8a4a00; }
.hc-dim-row[data-level="coping"]   .hc-dim-badge { background: #fff4cf; color: #6a5100; }
.hc-dim-row[data-level="strong"]   .hc-dim-badge { background: #d6f1de; color: #1d6a36; }

/* Qualitative comparison block — replaces the median/top-quartile scale,
   which presented fabricated numbers as if they were a benchmark. */
.hc-comparison {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hc-comparison-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
}
.hc-comparison-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Top risks block */
.hc-risks-block {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 40px;
  margin-bottom: 36px;
}
.hc-risk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hc-risk-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 24px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.hc-risk-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 2px;
}
.hc-risk-body { display: flex; flex-direction: column; gap: 6px; }
.hc-risk-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.hc-risk-advice {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Weak-areas block — only shows dimensions answered Critical or At Risk.
   Left border colour-codes severity so the worst items read first. */
.hc-weak-block {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 40px;
  margin-bottom: 36px;
}
.hc-weak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hc-weak-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 24px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
}
.hc-weak-item[data-level="critical"] { border-left-color: #d83a14; }
.hc-weak-item[data-level="at-risk"]  { border-left-color: #d18b1a; }
.hc-weak-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 2px;
}
.hc-weak-body { display: flex; flex-direction: column; gap: 6px; }
.hc-weak-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.hc-weak-advice {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.hc-weak-empty {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  padding: 18px 22px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

/* Recommendation focus line — JS fills it with the weakest dimension
   so the CTA points at something concrete instead of generic copy. */
.hc-rec-focus {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
  margin: 0;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--r-sm, 8px);
  align-self: flex-start;
  max-width: 64ch;
}

/* Recommendation card — colour varies by band */
.hc-recommendation {
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.hc-recommendation[data-band="healthy"],
.hc-recommendation[data-band="optimal"] {
  background: var(--ink);
}
.hc-rec-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.hc-rec-title {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}
.hc-rec-body {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 8px;
  max-width: 64ch;
}
.hc-rec-pitch {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 4px 0 12px;
  max-width: 64ch;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 14px;
}
.hc-rec-microcopy {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  margin: 10px 0 0;
}
.hc-rec-cta {
  background: var(--paper);
  color: var(--ink);
  align-self: flex-start;
  margin-top: 4px;
  transition: color 320ms ease;
}
/* Arrow disc stays black at rest (instead of the global orange) so it
   blends into the black hover wash. */
.hc-rec-cta svg { background: var(--ink); }
/* Expanding ::before disc washes black on hover (not orange) and the
   text inverts to white. */
.hc-rec-cta::before { background: var(--ink); }
.hc-rec-cta:hover { color: var(--paper); }

.hc-result-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hc-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.hc-action-secondary:hover { border-color: var(--ink); background: #fafaf8; }
.hc-action-secondary svg { width: 16px; height: 16px; }

/* Responsive */
@media (max-width: 900px) {
  .hc-intro-features { grid-template-columns: 1fr; }
  .hc-form-row { grid-template-columns: 1fr; }
  .hc-result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .health-check { padding: 64px 0 88px; }
  .hc-score-ring { width: 180px; height: 180px; }
  .hc-score-num { font-size: 60px; }
  .hc-categories,
  .hc-score-card,
  .hc-recommendation,
  .hc-risks-block { padding: 28px 24px; }
}

/* ===========================================================
   PRINT-ONLY REPORT
   Hidden on screen, shown only when window.print() runs. The
   user clicks "Download report (PDF)" → JS populates this DOM
   from state → window.print() → user picks "Save as PDF".
   =========================================================== */

.hc-print-report {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

@media print {
  /* Hide everything else; show only the print report. */
  body * { visibility: hidden !important; }
  .hc-print-report,
  .hc-print-report * { visibility: visible !important; }
  .hc-print-report {
    position: static !important;
    z-index: 0 !important;
    pointer-events: auto !important;
  }

  @page {
    size: A4;
    margin: 14mm 14mm;
  }
  html, body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.hc-print-page {
  width: 100%;
  max-width: 794px; /* ~A4 width at 96dpi */
  margin: 0 auto;
  padding: 0;
  background: #ffffff;
  color: #0d0d0d;
  font-family: var(--font-sans);
  font-size: 12pt;
  line-height: 1.5;
}

.hc-print-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 2px solid #ff4800;
  margin-bottom: 28px;
}
.hc-print-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hc-print-logo {
  font-family: var(--font-sans);
  font-size: 24pt;
  font-weight: 700;
  color: #0d0d0d;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hc-print-logo sup {
  font-size: 0.45em;
  font-weight: 400;
  color: #6f6c66;
  vertical-align: super;
}
.hc-print-brand-name {
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f6c66;
}
.hc-print-doc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6f6c66;
}
.hc-print-doc-meta span:first-child {
  color: #0d0d0d;
  font-weight: 600;
}

.hc-print-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff4800;
  margin-bottom: 8px;
}

.hc-print-recipient {
  margin-bottom: 32px;
}
.hc-print-recipient h1 {
  font-family: var(--font-sans);
  font-size: 28pt;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.1;
  color: #0d0d0d;
}
.hc-print-recipient p {
  font-size: 12pt;
  color: #6f6c66;
  margin: 0;
}

.hc-print-score {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 28px;
  background: #fff5f0;
  border: 1px solid #ffd9cc;
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 32px;
  page-break-inside: avoid;
}
.hc-print-score[data-band="critical"],
.hc-print-score[data-band="at-risk"] {
  background: #0d0d0d;
  border-color: #0d0d0d;
  color: #ffffff;
}
.hc-print-score[data-band="critical"] .hc-print-eyebrow,
.hc-print-score[data-band="at-risk"] .hc-print-eyebrow { color: #ff7a40; }
.hc-print-score[data-band="critical"] .hc-print-band-blurb,
.hc-print-score[data-band="at-risk"] .hc-print-band-blurb { color: rgba(255,255,255,0.82); }
.hc-print-score[data-band="critical"] .hc-print-band-name,
.hc-print-score[data-band="at-risk"] .hc-print-band-name { color: #ffffff; }
.hc-print-score[data-band="critical"] .hc-print-score-big,
.hc-print-score[data-band="at-risk"] .hc-print-score-big { color: #ffffff; }
.hc-print-score[data-band="critical"] .hc-print-cat-bar,
.hc-print-score[data-band="at-risk"] .hc-print-cat-bar { background: rgba(255,255,255,0.14); }
.hc-print-score[data-band="critical"] .hc-print-cat-row,
.hc-print-score[data-band="at-risk"] .hc-print-cat-row { color: rgba(255,255,255,0.88); }

.hc-print-score-left { display: flex; flex-direction: column; }
.hc-print-score-big {
  font-family: var(--font-number);
  font-size: 60pt;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #0d0d0d;
  margin: 0 0 8px;
}
.hc-print-score-big sub {
  font-size: 0.28em;
  font-weight: 500;
  color: #6f6c66;
  margin-left: 4px;
  vertical-align: baseline;
}
.hc-print-band-name {
  font-family: var(--font-sans);
  font-size: 16pt;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: #0d0d0d;
}
.hc-print-band-blurb {
  font-size: 10.5pt;
  line-height: 1.5;
  color: #6f6c66;
  margin: 0;
}

.hc-print-score-right { display: flex; flex-direction: column; }
.hc-print-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-print-cats li { display: flex; flex-direction: column; gap: 4px; }
.hc-print-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9.5pt;
  color: #0d0d0d;
}
.hc-print-cat-row > span:last-child {
  font-family: var(--font-mono);
  font-size: 8.5pt;
  letter-spacing: 0.04em;
}
.hc-print-cat-bar {
  height: 5px;
  background: #ffd9cc;
  border-radius: 999px;
  overflow: hidden;
}
.hc-print-cat-fill {
  height: 100%;
  background: #ff4800;
  border-radius: 999px;
}

.hc-print-section {
  margin-bottom: 28px;
  page-break-inside: avoid;
}
.hc-print-h2 {
  font-family: var(--font-sans);
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0d0d0d;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e0db;
}
.hc-print-risks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hc-print-risks li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: #fafaf8;
  border-left: 3px solid #ff4800;
  border-radius: 0 8px 8px 0;
  page-break-inside: avoid;
}
.hc-print-risk-num {
  font-family: var(--font-mono);
  font-size: 9.5pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff4800;
  padding-top: 1px;
}
.hc-print-risks h3 {
  font-family: var(--font-sans);
  font-size: 11.5pt;
  font-weight: 600;
  margin: 0 0 4px;
  color: #0d0d0d;
}
.hc-print-risks p {
  font-size: 10pt;
  line-height: 1.45;
  color: #6f6c66;
  margin: 0;
}

.hc-print-rec {
  background: #ff4800;
  color: #ffffff;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 28px;
  page-break-inside: avoid;
}
.hc-print-rec .hc-print-eyebrow {
  color: rgba(255,255,255,0.82);
}
.hc-print-rec h2 {
  font-family: var(--font-sans);
  font-size: 18pt;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  color: #ffffff;
  line-height: 1.15;
}
.hc-print-rec p {
  font-size: 11pt;
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,0.92);
}

.hc-print-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e0db;
}
.hc-print-cta-block {
  margin-bottom: 18px;
}
.hc-print-cta-block h2 {
  font-family: var(--font-sans);
  font-size: 13pt;
  font-weight: 600;
  margin: 0 0 8px;
  color: #0d0d0d;
}
.hc-print-cta-block p {
  font-size: 10.5pt;
  line-height: 1.45;
  color: #6f6c66;
  margin: 0 0 6px;
}
.hc-print-contact { color: #0d0d0d !important; }
.hc-print-contact strong { color: #ff4800; }
.hc-print-disclaimer {
  font-family: var(--font-mono);
  font-size: 8pt;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #9c988f;
  margin: 0;
}

/* ===========================================================
   HEALTH CHECK — BENCHMARK CARD
   Horizontal scale comparing the user's score against industry
   median (58) and top quartile (78). The "You" pin sits above
   the line, benchmark labels sit below.
   =========================================================== */

.hc-benchmark {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 36px 32px;
  margin-bottom: 36px;
  overflow: hidden;
}
.hc-benchmark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.hc-benchmark-head .hc-section-title { margin: 0; }
.hc-benchmark-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.hc-bench-scale {
  position: relative;
  padding: 56px 0 16px;
  margin-bottom: 18px;
}

/* "You" pin sits above the track and points down at the user's score. */
.hc-bench-you {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: left 1100ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.hc-bench-you::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--accent);
}
.hc-bench-you-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px 3px;
  border-radius: 999px;
}
.hc-bench-you-val {
  font-family: var(--font-number);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Horizontal track with the orange-fill and the two benchmark ticks. */
.hc-bench-track {
  position: relative;
  height: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: visible;
  margin-bottom: 14px;
}
.hc-bench-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 999px;
  transition: width 1500ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.hc-bench-tick {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--ink);
  border-radius: 999px;
  transform: translateX(-50%);
}
.hc-bench-tick--median { left: 58%; }
.hc-bench-tick--top    { left: 78%; }

/* Benchmark labels under the track. */
.hc-bench-labels {
  position: relative;
  height: 40px;
}
.hc-bench-label {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
}
.hc-bench-label--median { left: 58%; }
.hc-bench-label--top    { left: 78%; }
.hc-bench-label span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hc-bench-label strong {
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1;
}

.hc-bench-context {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 8px 0 0;
  max-width: 64ch;
}

@media (max-width: 640px) {
  .hc-benchmark { padding: 28px 24px; }
  .hc-bench-scale { padding-top: 64px; }
  .hc-bench-you-tag { font-size: 9px; padding: 3px 8px 2px; }
  .hc-bench-you-val { font-size: 20px; }
  .hc-bench-label span { font-size: 9px; letter-spacing: 0.14em; }
}

/* ===========================================================
   HEALTH CHECK — BENCHMARK in print/PDF
   3-column comparison: You / Median / Top quartile
   =========================================================== */

.hc-print-bench {
  page-break-inside: avoid;
}
.hc-print-bench-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.hc-print-bench-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: #fafaf8;
  border: 1px solid #e2e0db;
  border-radius: 10px;
}
.hc-print-bench-cell--you {
  background: #fff5f0;
  border-color: #ffd9cc;
}
.hc-print-bench-tag {
  font-family: var(--font-mono);
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6f6c66;
}
.hc-print-bench-cell--you .hc-print-bench-tag { color: #ff4800; }
.hc-print-bench-val {
  font-family: var(--font-number);
  font-size: 26pt;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0d0d0d;
}
.hc-print-bench-band {
  font-family: var(--font-sans);
  font-size: 9.5pt;
  font-weight: 500;
  color: #6f6c66;
}
.hc-print-bench-context {
  font-size: 10.5pt;
  line-height: 1.5;
  color: #0d0d0d;
  margin: 8px 0 6px;
}
.hc-print-bench-source {
  font-family: var(--font-mono);
  font-size: 8pt;
  letter-spacing: 0.14em;
  color: #9c988f;
  margin: 0;
}

/* ===========================================================
   NAV — SERVICES DROPDOWN
   Desktop: hover/click reveals an absolutely-positioned panel.
   Mobile: collapses into the existing slide-down nav as an
   accordion driven by .is-open (toggled in main.js).
   =========================================================== */

.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.nav-dropdown-toggle:hover { opacity: 0.6; }
.nav-dropdown-caret {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease-out);
}

/* Hover bridge — keeps the menu open while the cursor travels down. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 22px;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 360px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s var(--ease-out), visibility 0.2s;
  z-index: 70;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); }

.nav-dropdown-menu a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border-radius: 11px;
  transition: background 0.18s ease;
}
.nav-dropdown-menu a:hover { background: var(--bg-2); opacity: 1; }
.nav-dd-title {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}
.nav-dd-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

/* Mobile: dropdown becomes a full-width accordion inside the slide-down nav.
   Breakpoint matches the nav drawer (1100px) so the two never disagree. */
@media (max-width: 1100px) {
  .nav-dropdown { display: block; width: 100%; }
  /* Neutralize the desktop popover transform (translateX(-50%)) — its higher
     specificity would otherwise shove the open accordion off-screen left. */
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu { transform: none; }
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 16px 4px;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .nav-dropdown::after { display: none; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s var(--ease-drawer);
  }
  .nav-dropdown.is-open .nav-dropdown-menu { max-height: 640px; }
  .nav-dropdown-menu a {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg-2);
  }
  .nav-dropdown-menu a:last-child { border-bottom: 0; }
}

/* ============================================================
   ERP ROI Calculator (free tool)
   ============================================================ */
.roi { padding: 96px 0 110px; }
.roi-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.roi-h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: var(--ink); margin: 14px 0 18px; }
.roi-lead { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0 auto; }

.roi-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; max-width: 1080px; margin: 0 auto; align-items: start; }

.roi-inputs { display: flex; flex-direction: column; gap: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 38px; }
.roi-field { display: flex; flex-direction: column; gap: 8px; }
.roi-field-label { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.roi-input-wrap { display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.roi-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.roi-affix { display: flex; align-items: center; padding: 0 14px; font-family: var(--font-mono); font-size: 13.5px; color: var(--muted); background: var(--bg-2); white-space: nowrap; }
.roi-affix--prefix { border-right: 1px solid var(--line); }
.roi-affix--suffix { border-left: 1px solid var(--line); }
.roi-input-wrap input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 13px 16px; font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--ink); }
.roi-field-hint { font-size: 12.5px; color: var(--muted-2); line-height: 1.4; }

.roi-results { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 40px 38px; text-align: center; position: sticky; top: 100px; }
.roi-results-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.roi-results-primary { font-size: clamp(44px, 6vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--accent); margin: 12px 0 2px; }
.roi-results-sub { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.roi-stat-list { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; gap: 16px; text-align: left; }
.roi-stat-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.roi-stat-num { font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; }
.roi-stat-cap { font-size: 13px; color: rgba(255, 255, 255, 0.62); line-height: 1.35; text-align: right; }
.roi-cta { margin-top: 30px; width: 100%; justify-content: center; }
.roi-note { max-width: 780px; margin: 40px auto 0; text-align: center; font-size: 13px; line-height: 1.6; color: var(--muted-2); }

/* Slider control — used by the new calculators (close-time, UB exception,
   support queue) for the spec-designated slider fields. */
.roi-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  margin: 6px 0 4px;
  outline: none;
  cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
  transition: transform 120ms ease;
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
.roi-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
}
.roi-slider:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
/* Inline readout next to the slider label — live value. */
.roi-field-readout {
  float: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

/* Current → target band display in the stat list. */
.roi-stat-band {
  display: inline-flex !important;
  align-items: baseline;
  gap: 6px;
  font-size: 18px !important;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.roi-stat-band span { color: #fff; font-weight: 600; }

/* "How it's calculated" disclosure — sits below the calculator grid. */
.roi-formula {
  margin: 32px auto 0;
  max-width: 880px;
  background: #f7f5f0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.roi-formula > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.roi-formula > summary::-webkit-details-marker { display: none; }
.roi-formula > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  transition: transform 200ms ease;
}
.roi-formula[open] > summary::after { transform: rotate(45deg); }
.roi-formula-body {
  padding: 4px 24px 22px;
  border-top: 1px solid var(--line);
}
.roi-formula-body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 14px 0 0;
}
.roi-formula-body p:first-child { margin-top: 14px; }
.roi-formula-body p strong { color: var(--ink); font-weight: 600; }
.roi-formula-assume {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--muted) !important;
  font-size: 13.5px !important;
}
.roi-formula-assume em { font-style: italic; color: var(--accent); font-weight: 600; }

@media (max-width: 880px) {
  .roi-grid { grid-template-columns: 1fr; }
  .roi-results { position: static; }
}
@media (max-width: 560px) {
  .roi { padding: 64px 0 80px; }
  .roi-inputs, .roi-results { padding: 28px 24px; }
}

/* ROI calculator — SEO content / explainer */
.roi-seo { padding: 78px 0 92px; border-top: 1px solid var(--line); }
.roi-seo-inner { max-width: 760px; margin: 0 auto; }
.roi-seo h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 600; color: var(--ink); margin: 0 0 18px; }
.roi-seo h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); margin: 40px 0 12px; }
.roi-seo p { font-size: 16.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.roi-seo a { color: var(--accent); text-decoration: none; font-weight: 500; }
.roi-seo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.roi-seo ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.roi-seo ul li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.roi-seo ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
@media (max-width: 560px) { .roi-seo { padding: 56px 0 64px; } }

/* ============================================================
   Testimonial monogram avatars — fancy gradient stand-ins
   (used when client photos aren't available)
   ============================================================ */
.voices-card .voices-monogram {
  border: 0;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(13, 13, 13, 0.22);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff7a3d 0%, #ff4800 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 18px -8px rgba(255, 72, 0, 0.55),
    0 0 0 3px rgba(255, 72, 0, 0.10);
}
/* Soft top-left gloss for a polished, dimensional feel */
.voices-card .voices-monogram::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 60% at 30% 16%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}
/* A distinct gradient per person — cycles every 4 cards, stays on-brand */
.voices-grid .voices-card:nth-child(4n+1) .voices-monogram { background: linear-gradient(135deg, #ff7a3d 0%, #ff4800 100%); }
.voices-grid .voices-card:nth-child(4n+2) .voices-monogram { background: linear-gradient(135deg, #ff4f12 0%, #d9381a 100%); }
.voices-grid .voices-card:nth-child(4n+3) .voices-monogram { background: linear-gradient(140deg, #ff9a52 0%, #ff5a1f 100%); }
.voices-grid .voices-card:nth-child(4n)   .voices-monogram { background: linear-gradient(140deg, #3a3a3a 0%, #ff5a1f 100%); }

/* ROI button uses the SAME expanding-disc sweep as the nav / in-page CTAs:
   .btn-black::before is a circle anchored at the right (by the arrow), and on
   hover it scales up to flood the button orange. Because this button is
   full-width, it just needs a larger scale than the default (20) so the disc
   reaches every corner — otherwise a corner is left un-filled (the "black
   wedge"). 44 covers buttons up to ~960px wide, well beyond any breakpoint. */
.roi-cta:hover::before { transform: translateY(-50%) scale(44); }
@media (prefers-reduced-motion: reduce) {
  .roi-cta:hover::before { transform: translateY(-50%) scale(0); }
}

/* ============================================================
   Capability Statement page — .cap-* (reuses .erps-* for the rest)
   ============================================================ */

/* Hero "Download PDF" — ghost button beside the dark primary CTA */
.cap-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.cap-dl svg { width: 18px; height: 18px; }
.cap-dl:hover { background: var(--ink); color: var(--paper); }

/* Capability hero CTAs stacked vertically — Download PDF (primary) on top, Book a call below */
.cap .erps-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Company-data section. No top border — it would sit right where the hero's
   decorative ripples get clipped and visually cut across them. Spacing + the
   eyebrow separate it from the hero, consistent with the page's other sections. */
.cap-data { padding: 96px 0; }

/* The shared .erps-cta has padding-top:0 (it was built to follow a white
   section). On this page it follows the grey Differentiators band, so the dark
   card had no breathing room above it. Restore a top padding that matches the
   page's section rhythm so the card floats with white space above it. */
.cap .erps-cta { padding-top: clamp(80px, 9vw, 120px); }

/* Registration data bar — labelled cells separated by hairline dividers.
   The 1px grid gap shows the bar background through as divider lines, so it
   stays clean at any column count when it wraps responsively. */
.cap-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 44px;
}
.cap-bar-item {
  background: #f7f5f0;
  padding: 20px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cap-bar-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cap-bar-v {
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
}

.cap-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.cap-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 34px;
  background: var(--paper);
}
.cap-sub {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}
.cap-naics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cap-naics li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.45;
}
.cap-naics li:first-child { border-top: 0; padding-top: 0; }
.cap-code {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 64px;
}
.cap-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.cap-contact li { display: flex; flex-direction: column; gap: 6px; }
.cap-contact-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cap-contact a, .cap-contact span:not(.cap-contact-k) { font-size: 16px; color: var(--ink); line-height: 1.5; }
.cap-contact a { text-decoration: none; color: var(--accent-strong); font-weight: 500; word-break: break-word; }
.cap-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) { .cap-bar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px) { .cap-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cap-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .cap-data { padding: 64px 0; }
  .cap-panel { padding: 26px 24px; }
}

/* The competencies grid is 2 columns; 7 cards leaves the 7th alone on the
   last row. Center that orphan instead of letting it sit left with a gap.
   Only above the 1100px breakpoint (below it the grid is a single column). */
@media (min-width: 1101px) {
  .cap .erps-stabilize-grid .erps-stab-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
  }
}

/* ============================================================
   Case studies — index (.cs-index) + detail (.cs-detail)
   ============================================================ */

/* ---------- Index ---------- */
.cs-index-hero { position: relative; overflow: hidden; text-align: center; padding: clamp(72px, 9vw, 120px) 0 clamp(48px, 6vw, 72px); }
.cs-index-hero .container { position: relative; z-index: 1; }
.cs-index-hero .eyebrow-mark { justify-content: center; }
.cs-index-h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; margin: 18px 0 0; }
.cs-index-h1 .hi { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); }
.cs-index-lead { max-width: 640px; margin: 20px auto 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); }

.cs-list-section { padding: 0 0 clamp(72px, 9vw, 120px); }
.cs-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cs-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 36px 30px; text-decoration: none; color: var(--ink); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.cs-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cs-card-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); }
.cs-card-title { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 600; margin: 12px 0 0; }
.cs-card-title span { display: block; font-weight: 400; color: var(--muted); font-style: italic; font-family: var(--font-display); font-size: 0.82em; margin-top: 4px; }
.cs-card-summary { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; }
.cs-card-stats { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-card-stats li { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); background: var(--bg-2); border-radius: 999px; padding: 6px 12px; }
.cs-card-link { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--accent-strong); }
.cs-card-link svg { width: 18px; height: 18px; transition: transform 200ms ease; }
.cs-card:hover .cs-card-link svg { transform: translateX(4px); }

/* ---------- Detail ---------- */
/* Hero — centered, matches every other page's hero */
.cs-hero { position: relative; overflow: hidden; text-align: center; padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6vw, 72px); }
.cs-hero .container { position: relative; z-index: 1; }
.cs-back { display: flex; width: fit-content; margin: 0 auto 30px; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color 200ms ease; }
.cs-back svg { width: 16px; height: 16px; }
.cs-back:hover { color: var(--accent-strong); }
.cs-hero .eyebrow-mark { justify-content: center; }
.cs-hero-h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; margin: 16px auto 0; max-width: 16ch; }
.cs-hero-h1 .hi { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--accent); }
.cs-hero-lead { max-width: 660px; margin: 22px auto 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--muted); }

/* Story — single readable centered column */
.cs-story { padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 7vw, 88px); }
.cs-story-inner { max-width: 760px; }
.cs-block + .cs-block { margin-top: 48px; }
.cs-label {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 18px;
}
.cs-block > p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0;
}
.cs-services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-services li { font-size: 13.5px; color: var(--ink); background: var(--bg-2); border-radius: 999px; padding: 7px 14px; }

/* Hero tags */
.cs-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 0; padding: 0; list-style: none; }
.cs-tag { font-size: 13px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; }

/* Hero stat row */
.cs-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  max-width: 980px;
}
.cs-hero-stat {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 30px 30px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 280ms var(--ease-out),
    border-color 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}
.cs-hero-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 4px;
  background: var(--accent);
  border-radius: 0 0 4px 0;
}
.cs-hero-stat::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -25%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.cs-hero-stat:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(13, 13, 13, 0.18);
}
.cs-hero-stat:hover::after { opacity: 0.55; }
.cs-hero-stat-big {
  display: block;
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  white-space: normal;
  position: relative;
  z-index: 1;
}
.cs-hero-stat-label {
  display: block;
  margin: 0;
  max-width: none;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cs-hero-stat { transition: none; }
  .cs-hero-stat:hover { transform: none; }
}

/* In depth */
.cs-depth { background: var(--bg-2); padding: clamp(56px, 7vw, 96px) 0; }
.cs-depth-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.cs-depth-head .eyebrow-mark { justify-content: center; }
.cs-depth-head h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 600; margin: 14px 0 0; }
.cs-depth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cs-depth-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 30px 32px; }
.cs-depth-block h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
.cs-depth-block p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* Pull quote */
.cs-quote-section { padding: clamp(64px, 8vw, 104px) 0; text-align: center; }
.cs-pullquote { max-width: 840px; margin: 0 auto; }
.cs-pullquote p { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 3vw, 34px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 22px; }
.cs-pullquote cite { font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }

/* CTA breathing room above the dark card */
.cs-cta-section { padding-top: clamp(72px, 9vw, 120px); }

@media (max-width: 900px) {
  .cs-list { grid-template-columns: 1fr; }
  .cs-depth-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE AUDIT FIXES (2026-06-20)
   Targeted overrides surfaced by the 375px-width audit.
   ============================================================ */
@media (max-width: 560px) {

  /* P1 #1 — iOS Safari auto-zooms any input under 16px when focused
     and doesn't reliably zoom back. Lift form input/textarea/select
     font to 16px on mobile to kill that jank. (Shared by contact +
     webinar forms via .form-field.) */
  .form-field input,
  .form-field textarea,
  .form-field select,
  .form-select,
  .wb-select {
    font-size: 16px;
  }

  /* P1 #2 — On centered hero eyebrows ("FULL-SPECTRUM ERP IMPLEMENTATION"
     etc.), the wide letter-spacing pushes long text to wrap to two lines,
     and the ::before dot ends up disjoint at the left edge of the wrapped
     block. Tighten spacing + shrink font slightly on mobile so the text
     fits one line and the dot sits naturally next to it. */
  .erps-hero .eyebrow-mark,
  .cs-hero .eyebrow-mark,
  .cs-index-hero .eyebrow-mark {
    font-size: 11px;
    letter-spacing: 0.14em;
    /* Force the inline-flex element to size to its (now narrower)
       content, then center it via the parent's text-align. */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* P2 #3 — Form labels at 11px were borderline; 12.5px reads cleanly
     while keeping the tracked-out mono treatment. */
  .form-field label {
    font-size: 12.5px;
  }
  .form-field label .optional {
    font-size: 12px;
  }

  /* P2 #4 — The .form-radio wrapper IS the tap zone (the actual <input>
     is opacity:0). 4px vertical padding was tight; 10px gives each
     timeline radio a clean ~44px tall hit area on mobile. */
  .form-radio {
    padding: 10px 0;
  }

}

/* ============================================================
   NEUTRALITY — partners page commitments card
   ============================================================ */
.neutrality {
  padding: 96px 0;
}
.neutrality-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
  padding: 56px 56px 52px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 60px -40px rgba(20, 18, 14, 0.18),
    0 2px 6px -2px rgba(20, 18, 14, 0.04);
  overflow: hidden;
  isolation: isolate;
}
.neutrality-glow {
  position: absolute;
  top: -120px;
  left: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--accent-soft, #ffd9cc) 0%, transparent 65%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}
/* Exclude the decorative glow — it must stay position:absolute. Targeting it
   here (equal specificity, later in source) would override its absolute
   positioning, drop it into a grid cell, and break the two-column layout. */
.neutrality-card > *:not(.neutrality-glow) { position: relative; z-index: 1; }

.neutrality-intro { display: flex; flex-direction: column; gap: 20px; }
.neutrality-intro .eyebrow-mark { margin: 0; }
.neutrality-intro h2 {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.neutrality-intro .hi { color: var(--accent, #ff7a3c); }
.neutrality-lead {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 44ch;
}
.neutrality-lead a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.neutrality-tenets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.neutrality-tenet {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 18, 14, 0.06);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    background-color 0.3s ease;
}
.neutrality-tenet:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(20, 18, 14, 0.12);
  box-shadow: 0 14px 30px -18px rgba(20, 18, 14, 0.14);
}
.neutrality-tenet-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  margin-top: 2px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}
.neutrality-tenet:hover .neutrality-tenet-mark {
  transform: scale(1.06) rotate(-4deg);
  background: var(--accent, #ff7a3c);
}
.neutrality-tenet-mark svg { width: 18px; height: 18px; display: block; }
.neutrality-tenet-body h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.neutrality-tenet-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 880px) {
  .neutrality { padding: 64px 0; }
  .neutrality-card {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 24px 32px;
    border-radius: 22px;
  }
  .neutrality-intro h2 { font-size: clamp(26px, 6vw, 32px); }
  .neutrality-glow { width: 240px; height: 240px; top: -80px; left: -80px; }
}

@media (prefers-reduced-motion: reduce) {
  .neutrality-tenet,
  .neutrality-tenet-mark { transition: none; }
  .neutrality-tenet:hover { transform: none; }
  .neutrality-tenet:hover .neutrality-tenet-mark { transform: none; }
}