/* =========================================================
   United Support — Direction 02 (Brutalist) — Polished
   Light + dark, fully responsive.
   ========================================================= */

:root {
  --bg: #fff8ee;
  --bg-deep: #fff0d9;
  --bg-warm: #ffe9c7;
  --ink: #0d0d10;
  --ink-soft: #2b2b30;
  --ink-mute: #6e6a62;
  --cream: #fffaf2;
  --paper: #ffffff;
  --orange: #faaa33;
  --orange-deep: #e08820;
  --teal: #2a6485;
  --teal-deep: #19415a;
  --tint-shopify: #dcedd5;
  --tint-amazon: #ffe9c7;
  --tint-custom: #d7e9ff;
  --tint-etsy: #fff0e0;
  --tint-saas: #e6e0ff;
  --tint-mint: #d4ebd9;

  --line: #0d0d10;
  --line-soft: rgba(13, 13, 16, 0.14);
  --shadow: #0d0d10;
  --invert: 1;

  --font-display: 'Nunito', 'Nunito Sans', system-ui, sans-serif;
  --font-body: 'Nunito Sans', 'Nunito', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1320px;
  --pad-x: 56px;
  --pad-x-mob: 20px;
}

[data-theme='dark'] {
  --bg: #15140f;
  --bg-deep: #1e1c14;
  --bg-warm: #2a2415;
  --ink: #fff3df;
  --ink-soft: #f0e6d2;
  --ink-mute: #a09683;
  --cream: #1e1c14;
  --paper: #15140f;
  --orange: #faaa33;
  --orange-deep: #ffbf57;
  --teal: #5fa4cf;
  --teal-deep: #2a6485;
  --tint-shopify: #1f3a23;
  --tint-amazon: #3a2e15;
  --tint-custom: #1f2f4a;
  --tint-etsy: #3a2a1a;
  --tint-saas: #2a234a;
  --tint-mint: #1f3a2a;

  --line: #fff3df;
  --line-soft: rgba(255, 243, 223, 0.18);
  --shadow: #fff3df;
  --invert: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 112px; /* main nav (~72px) + strip (~35px) + 5px buffer */
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: clip;
  transition:
    background 0.25s,
    color 0.25s;
}
img {
  display: block;
  max-width: 100%;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}

/* Type helpers */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Container */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
@media (max-width: 720px) {
  .container {
    padding: 0 var(--pad-x-mob);
  }
}

/* Brutalist primitives */
.brut {
  border: 2.5px solid var(--line);
  box-shadow: 8px 8px 0 0 var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.brut-sm {
  border: 2px solid var(--line);
  box-shadow: 5px 5px 0 0 var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.brut:hover {
  transform: translate(-2px, -2px);
  box-shadow: 12px 12px 0 0 var(--shadow);
}
.brut-sm:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 var(--shadow);
}

/* Ribbon eyebrow */
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ribbon .dot {
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 999px;
}
.section--ink .ribbon {
  background: var(--cream);
  color: var(--ink);
}
[data-theme='dark'] .section--ink .ribbon {
  background: var(--ink);
  color: var(--cream);
}

/* Reveal animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal][data-delay='1'] {
  transition-delay: 0.08s;
}
[data-reveal][data-delay='2'] {
  transition-delay: 0.16s;
}
[data-reveal][data-delay='3'] {
  transition-delay: 0.24s;
}
[data-reveal][data-delay='4'] {
  transition-delay: 0.32s;
}
[data-reveal][data-delay='5'] {
  transition-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Neutralise the clip-path effects so nothing stays hidden or animates. */
  .sec-title[data-reveal],
  .dispute__card .dispute__arrow {
    clip-path: none !important;
    transition: none !important;
  }
}
/* On mobile the clip-path bloom doesn't play reliably — fall back to the
   standard opacity + translateY reveal that [data-reveal] already uses. */
@media (max-width: 767px) {
  .sec-title[data-reveal] {
    clip-path: none !important;
  }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg);
  border-bottom: 3px solid var(--line);
}

/* ── Row 1: brand · links · actions ── */
.nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 56px;
  gap: 24px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav__logo {
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--orange);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.05em;
  flex-shrink: 0;
  position: relative;
}
/* Green status dot on logo */
.nav__logo::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  background: #22c55e;
  border: 2px solid var(--bg);
  border-radius: 50%;
}
[data-theme='dark'] .nav__logo {
  background: var(--orange);
  color: var(--bg);
}
.nav__brand-meta {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav__brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.nav__brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
/* Nav links — centered, box-toggle on hover */
.nav__links {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
/* Hide links duplicated in the index row (row 2) — class-based so it
   survives adding or reordering nav items */
.nav__links li.is-indexed {
  display: none;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.nav__links a::after {
  display: none;
}
.nav__links a:hover,
.nav__links a.active {
  border-color: var(--line);
  background: var(--cream);
  box-shadow: 3px 3px 0 0 var(--shadow);
  transform: translate(-1px, -1px);
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--orange);
  color: var(--ink);
  border: 2.5px solid var(--line);
  box-shadow: 4px 4px 0 0 var(--shadow);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.nav__cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--shadow);
}

/* Theme toggle (slider) */
.theme-toggle {
  width: 56px;
  height: 28px;
  background: var(--ink);
  border: 2.5px solid var(--line);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.theme-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  background: var(--orange);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-theme='dark'] .theme-toggle::before {
  transform: translateX(28px);
}
.theme-toggle i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--cream);
  pointer-events: none;
}
.theme-toggle .sun {
  left: 7px;
  opacity: 1;
}
.theme-toggle .moon {
  right: 7px;
  opacity: 0.45;
}
[data-theme='dark'] .theme-toggle .sun {
  opacity: 0.45;
}
[data-theme='dark'] .theme-toggle .moon {
  opacity: 1;
}

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 2.5px solid var(--line);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav__burger-bar {
  width: 22px;
  height: 2.5px;
  background: var(--cream);
  display: block;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s;
}
[data-theme='dark'] .nav__burger {
  background: var(--orange);
}
[data-theme='dark'] .nav__burger-bar {
  background: var(--ink);
}
.nav__burger.is-open .nav__burger-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav__burger.is-open .nav__burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__burger.is-open .nav__burger-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Row 2: section index + reading tracker ── */
.nav__index {
  display: flex;
  align-items: center;
  padding: 0 56px;
  background: var(--cream);
  border-top: 1.5px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__index::-webkit-scrollbar {
  display: none;
}
.nav__index a {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 9px 16px;
  border-right: 1.5px solid var(--line-soft);
  flex-shrink: 0;
  white-space: nowrap;
  transition:
    color 0.15s,
    background 0.15s;
}
.nav__index a:first-child {
  padding-left: 0;
}
.nav__index a:hover,
.nav__index a.active {
  color: var(--ink);
  background: var(--bg);
}
.nav__index .step-num {
  color: var(--orange);
  font-weight: 800;
  margin-right: 5px;
}
.nav__index-end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 9px 0 9px 16px;
  flex-shrink: 0;
  user-select: none;
}
.nav__index-end .dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-online 2s ease-in-out infinite;
}
.nav__index-end b {
  color: var(--ink);
  font-weight: 800;
}

/* Mobile nav overlay */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 98;
  flex-direction: column;
  padding: 88px 36px 48px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme='dark'] .nav__mobile {
  background: var(--bg-deep);
}
.nav__mobile.is-open {
  transform: translateX(0);
}
.nav__mobile a {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 8vw, 52px);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
  border-bottom: 2px solid rgba(255, 250, 242, 0.12);
  padding: 18px 0;
  transition:
    color 0.15s,
    padding-left 0.18s;
  display: block;
}
[data-theme='dark'] .nav__mobile a {
  color: var(--ink-soft);
  border-bottom-color: rgba(255, 243, 223, 0.12);
}
.nav__mobile a:hover,
.nav__mobile a.active {
  color: var(--orange);
  padding-left: 14px;
}
.nav__mobile .nav__mobile-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 18px 28px;
  background: var(--orange);
  color: var(--ink) !important;
  border: 3px solid var(--line);
  font-size: 18px;
  border-bottom: 3px solid var(--line) !important;
  box-shadow: 5px 5px 0 0 var(--shadow);
}
.nav__mobile .nav__mobile-cta:hover {
  padding-left: 28px !important;
}
.nav__mobile-theme {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  border-top: 1.5px solid var(--line);
  padding: 20px 0 0;
  margin-top: 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  width: 100%;
  text-align: left;
}
.nav__mobile-theme-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme='dark'] .nav__mobile-theme {
  color: var(--ink-soft);
  border-top-color: rgba(255, 243, 223, 0.12);
}
.nav__mobile-theme::before {
  display: none;
}
.nav__mobile-theme .sun,
.nav__mobile-theme .moon {
  position: static;
  transform: none;
  font-size: 16px;
  color: var(--orange);
  opacity: 1;
}

/* ── Tablet (921–1200px) ── */
@media (min-width: 921px) and (max-width: 1200px) {
  .nav__top {
    padding: 14px 24px;
  }
  .nav__index {
    padding: 0 24px;
  }
  .nav__links {
    gap: 0;
  }
  .nav__links a {
    padding: 8px 10px;
    font-size: 10.5px;
  }
  .nav__cta {
    padding: 10px 14px;
    font-size: 12px;
    gap: 6px;
  }
}

/* ── Mobile (≤920px) ── */
@media (max-width: 920px) {
  .nav__top {
    padding: 14px 20px;
  }
  .nav__brand-sub {
    display: none;
  }
  .nav__links {
    display: none;
  }
  .nav__cta {
    padding: 10px 16px;
    font-size: 12px;
  }
  .nav__burger {
    display: flex;
  }
  .nav__mobile {
    display: flex;
  }
  .theme-toggle {
    display: none; /* lives in mobile menu */
  }
  .nav__index {
    display: none;
  }
}

/* =========================================================
   NOTCHED DIVIDER (brutalist alternative to wave)
   ========================================================= */
.divider {
  height: 24px;
  background: var(--line);
  position: relative;
}
.divider--zig {
  --c: var(--line);
  background:
    linear-gradient(135deg, var(--c) 25%, transparent 25%) 0 0/24px 24px,
    linear-gradient(225deg, var(--c) 25%, transparent 25%) 0 0/24px 24px;
  background-color: transparent;
  height: 24px;
}
.divider--steps {
  height: 32px;
  background: var(--ink);
  -webkit-mask:
    linear-gradient(90deg, #000 50%, transparent 50%) 0 0/64px 16px,
    linear-gradient(90deg, #000 0%, #000 100%) 0 16px/100% 16px;
  mask:
    linear-gradient(90deg, #000 50%, transparent 50%) 0 0/64px 16px,
    linear-gradient(90deg, #000 0%, #000 100%) 0 16px/100% 16px;
}
.divider-strip {
  background: var(--orange);
  height: 18px;
  border-top: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
  position: relative;
  overflow: hidden;
}
.divider-strip::before {
  content: '★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.6em;
  white-space: nowrap;
}

/* =========================================================
   MARQUEE BAND  (hero → About transition)
   ========================================================= */
.marquee-band {
  overflow: hidden;
  border-top: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
}
.marquee-band__row {
  overflow: hidden; /* plain block — no flex, so the track is never a flex item */
}
.marquee-band__row--stats {
  background: #0d0d10;
  border-bottom: 2px solid rgba(250, 170, 51, 0.22);
}
[data-theme='dark'] .marquee-band__row--stats {
  background: #1e1c14;
}
.marquee-band__row--langs {
  background: #faaa33;
}

/* Scrolling track — inline-flex always self-sizes to content width,
   so translateX(-50%) reliably = exactly one set of items */
.marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.marquee-track--stats {
  padding: 11px 0;
}
.marquee-track--langs {
  padding: 8px 0;
}

/* Items */
.mbr-item {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  font-family: var(--font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-band__row--stats .mbr-item {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8bfaf;
}
.marquee-band__row--stats .mbr-val {
  color: #faaa33;
  font-weight: 800;
  margin-right: 7px;
}
.marquee-band__row--langs .mbr-item {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0d0d10;
}

/* Separators */
.mbr-sep {
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}
.marquee-band__row--stats .mbr-sep {
  color: #faaa33;
  opacity: 0.45;
  font-size: 9px;
  padding: 0 2px;
}
.marquee-band__row--langs .mbr-sep {
  color: #0d0d10;
  opacity: 0.3;
  font-size: 20px;
  padding: 0 2px;
}

/* Brand icons inside the marquee */
.mbr-paypal-icon {
  font-size: 15px;
  color: #003087;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 5px;
  line-height: 1;
}
.mbr-klarna-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 5px;
}
.mbr-shopify-icon {
  font-size: 15px;
  color: #5e8e3e;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 5px;
  line-height: 1;
}
/* Generic service icons in the langs/channels row */
.mbr-icon {
  font-size: 13px;
  color: #0d0d10;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 5px;
  line-height: 1;
  opacity: 0.75;
}
.mbr-ocean-logo {
  height: 13px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 6px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.dot-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 56px;
  gap: 0;
  position: relative;
  z-index: 1;
}
.hero__main {
  text-align: center;
  width: 100%;
}
.hero__h1 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-size: clamp(56px, 11vw, 168px);
  text-transform: uppercase;
}
/* Tablet: cap h1 so CTAs + stat cards stay visible above fold */
@media (min-width: 768px) and (max-width: 1200px) {
  .hero__h1 {
    font-size: clamp(56px, 8vw, 96px);
  }
}
.hero__h1 .orange {
  color: var(--orange);
}
.hero__h1 .teal {
  color: var(--teal-deep);
}
.hero__h1 .out {
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
}
.hero__sub {
  margin-top: 28px;
  max-width: 540px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: auto;
  margin-right: auto;
}
.hero__ctas {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.btn-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--orange);
  color: var(--ink);
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 0 var(--shadow);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.btn-big:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 0 var(--shadow);
}
.btn-big:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 0 var(--shadow);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  background: transparent;
  color: var(--ink);
  border: 3px solid var(--line);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
.btn-ghost:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 0 var(--shadow);
}
.hero__sub2 {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero__side {
  display: flex;
  flex-direction: row;
  gap: 18px;
  width: 100%;
  margin-top: 24px;
}
.hero__card {
  flex: 1;
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 0 var(--shadow);
  perspective: 1000px;
  cursor: pointer;
}
.hero__card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__card.is-flipped .hero__card-inner {
  transform: rotateY(180deg);
}
.hero__card.is-flipped {
  background: var(--ink);
}
.hero__card-front {
  padding: 24px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.hero__card--orange .hero__card-front {
  background: var(--orange);
  color: var(--ink);
}
.hero__card--teal .hero__card-front {
  background: var(--teal-deep);
  color: var(--cream);
}
[data-theme='dark'] .hero__card--teal .hero__card-front {
  background: var(--teal);
}
.hero__card-back {
  position: absolute;
  inset: 0;
  padding: 28px;
  background: var(--ink);
  color: var(--cream);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.hero__card-back-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}
.hero__card-back-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero__card-back-body {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  opacity: 0.7;
}
.hero__card-back-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.35;
  margin-top: auto;
}
.hero__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.7;
}
.hero__card-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.hero__card-cap {
  font-size: 14px;
  margin-top: 8px;
  font-weight: 600;
}
.hero__card-benchmark {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1.5px solid currentColor;
}
.hero__card-benchmark-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.5;
}
.hero__card-bar-wrap {
  height: 4px;
  width: 80%;
  position: relative;
  margin-bottom: 2px;
}
.hero__card-bar-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.15;
}
.hero__card-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: currentColor;
  opacity: 0.65;
}
.hero__card-benchmark-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-top: 6px;
  opacity: 0.55;
}
.hero__card-spark {
  position: absolute;
  right: 14px;
  top: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 88px;
  opacity: 0.08;
  line-height: 1;
  pointer-events: none;
}

/* Flip hint on hero card front face */
.hero__card-flip-hint {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.hero__video {
  margin: 48px 56px 0;
  border: 4px solid var(--line);
  box-shadow: 12px 12px 0 0 var(--orange);
  aspect-ratio: 21/9;
  overflow: hidden;
  position: relative;
  background: #1a1d2b;
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.hero__video-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  z-index: 2;
}
.hero__video-tag .rec {
  width: 10px;
  height: 10px;
  background: #ff3838;
  border-radius: 999px;
  animation: blink 1.4s infinite;
}
.hero__video-cap {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

/* Tablet portrait 768–920px: show all 3 stat cards in a row, no scroll */
@media (min-width: 768px) and (max-width: 920px) {
  .hero__top {
    padding: 0 20px;
  }
  .hero__side {
    flex-direction: row;
    margin-top: 28px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: 12px;
  }
  .hero__card {
    flex: 1;
    scroll-snap-align: none;
    min-height: 220px;
  }
  /* Large stat numbers overflow the narrow 3-up card widths on tablets */
  .hero__card-num {
    font-size: clamp(28px, 4vw, 44px);
  }
}

@media (max-width: 767px) {
  /* Hide eyebrow ribbons on mobile — info is repeated in body copy.
     !important needed to beat .sec-head--center .sec-ribbon (0,2,0 specificity) */
  .ribbon {
    display: none !important;
  }

  /* Industries carousel arrows — bigger tap targets on mobile (min 44px) */
  .ind__btn {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  .hero__top {
    padding: 0 20px;
  }
  .hero__side {
    flex-direction: column;
    margin-top: 28px;
    overflow-x: unset;
    scroll-snap-type: unset;
    scrollbar-width: unset;
    padding-bottom: 0;
    gap: 14px;
  }
  .hero__card {
    flex: none;
    width: 100%;
    scroll-snap-align: unset;
    min-height: 200px;
  }
  .hero__video {
    margin: 36px 20px 0;
    aspect-ratio: 16/9;
    box-shadow: 6px 6px 0 0 var(--orange);
  }
}

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section {
  padding: 96px 0;
  border-top: 3px solid var(--line);
  position: relative;
}
.section--deep {
  background: var(--bg-deep);
}
.section--ink {
  background: var(--ink);
  color: var(--cream);
  border-top-color: var(--line);
}
[data-theme='dark'] .section--ink {
  background: var(--cream);
  color: var(--ink);
}
.section--orange {
  background: var(--orange);
}
[data-theme='dark'] .section--orange {
  background: var(--bg-warm);
}
.section--cream {
  background: var(--cream);
}

.sec-head {
  position: relative;
  padding-bottom: 48px;
}
.sec-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(96px, 18vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 3px var(--line);
  position: absolute;
  top: -32px;
  right: 0;
  pointer-events: none;
  opacity: 0.85;
}
.section--ink .sec-num {
  -webkit-text-stroke-color: var(--orange);
  opacity: 0.5;
}
.section--orange .sec-num {
  -webkit-text-stroke-color: var(--ink);
  opacity: 0.4;
}
.sec-ribbon {
  margin-bottom: 24px;
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  max-width: 920px;
}
/* Headline bloom — section titles open from the centre as they scroll in,
   a distinct beat from the fade-rise on the ribbon + subhead around them.
   Vertical insets stay 0 so descenders + .hl highlight boxes aren't cut.
   (Reduced-motion users get an instant, unclipped title — see line ~205.) */
.sec-title[data-reveal] {
  transform: none;
  clip-path: inset(0 50% 0 50%);
  transition:
    opacity 0.6s ease,
    clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.sec-title[data-reveal].is-in {
  clip-path: inset(0 0 0 0);
}
.section--ink .sec-title {
  color: var(--cream);
}
[data-theme='dark'] .section--ink .sec-title {
  color: var(--ink);
}
.sec-title .orange {
  color: var(--orange);
}
.sec-title .out {
  color: transparent;
  -webkit-text-stroke: 3px currentColor;
}
.sec-title .hl {
  background: var(--orange);
  color: var(--ink);
  padding: 0 8px;
  display: inline-block;
}
.sec-title .hl-cream {
  background: var(--cream);
  color: var(--ink);
  padding: 0 8px;
  display: inline-block;
}
.sec-sub {
  margin-top: 18px;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-soft);
  max-width: 640px;
  font-weight: 500;
  text-wrap: balance;
}
.section--ink .sec-sub {
  color: rgba(255, 250, 242, 0.7);
}
[data-theme='dark'] .section--ink .sec-sub {
  color: rgba(255, 243, 223, 0.7);
}

@media (max-width: 720px) {
  .section {
    padding: 56px 0;
  }
  .sec-num {
    font-size: clamp(72px, 22vw, 120px);
    top: -16px;
    -webkit-text-stroke-width: 2px;
  }
  .sec-head {
    padding-bottom: 32px;
  }
}

/* =========================================================
   ABOUT
   ========================================================= */
.sec-head--center {
  text-align: center;
}
.sec-head--center .sec-ribbon {
  display: inline-flex;
}
.sec-head--center .sec-title {
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.sec-head--center .sec-sub {
  margin-left: auto;
  margin-right: auto;
}
.sec-title .nowrap {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sec-title .nowrap {
    white-space: normal;
  }
}

#about .sec-head {
  padding-bottom: 18px;
}

.about__copy {
  max-width: 720px;
}
.about__copy--center {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.about__copy--center p {
  margin-bottom: 10px;
}
.about__copy p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-weight: 500;
}
.about__copy p:last-child {
  margin-bottom: 0;
}
.about__copy .em {
  background: var(--orange);
  color: var(--ink);
  padding: 0 6px;
  font-weight: 800;
}
.about__copy .em-teal {
  background: var(--ink);
  color: var(--orange);
  padding: 0 6px;
  font-weight: 800;
}
[data-theme='dark'] .about__copy .em-teal {
  background: var(--orange);
  color: var(--ink);
}

.about__panel {
  margin-top: 40px;
  padding: 28px;
  background: var(--cream);
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 0 var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.about__panel-left {
  flex: 1;
}
.about__panel-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.about__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about__langs span {
  padding: 7px 14px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-theme='dark'] .about__langs span {
  background: var(--orange);
  color: var(--ink);
}
.about__sig {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-left: 48px;
  border-left: 2px solid var(--line);
  flex-shrink: 0;
}
.about__sig img {
  width: 56px;
  height: 56px;
  border: 2.5px solid var(--line);
  object-fit: cover;
}
.about__sig-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.about__sig-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}

@media (max-width: 920px) {
  .about__panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .about__sig {
    padding-left: 0;
    border-left: none;
    padding-top: 24px;
    border-top: 2px solid var(--line);
    width: 100%;
  }
}

/* =========================================================
   OBJECTIVES (asymmetric grid)
   ========================================================= */
.obj__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: 16px;
}
.obj__card {
  padding: 24px;
  min-width: 0;
  border: 3px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s;
}
.obj__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
.obj__card:hover .obj__icon {
  transform: scale(1.2) rotate(8deg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.obj__card:hover .obj__num {
  opacity: 0.28;
  transform: scale(1.08) translateX(6px);
}
.obj__card.span-1 {
  grid-column: span 1;
}
.obj__card.span-2 {
  grid-column: span 2;
}
.obj__card.span-3 {
  grid-column: span 3;
}
.obj__card.span-4 {
  grid-column: span 4;
}
.obj__card.v-orange {
  background: var(--orange);
  color: var(--ink);
}
.obj__card.v-teal {
  background: var(--teal-deep);
  color: var(--cream);
}
[data-theme='dark'] .obj__card.v-teal {
  background: var(--teal);
  color: var(--bg);
}
.obj__card.v-cream {
  background: var(--cream);
}
.obj__card.v-ink {
  background: var(--ink);
  color: var(--cream);
}
[data-theme='dark'] .obj__card.v-ink {
  background: var(--cream);
  color: var(--ink);
}
.obj__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--ink);
  color: var(--cream);
  border: 2.5px solid var(--line);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s;
}
.obj__card.v-ink .obj__icon {
  background: var(--orange);
  color: var(--ink);
}
[data-theme='dark'] .obj__card.v-ink .obj__icon {
  background: var(--orange);
}
.obj__num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  opacity: 0.18;
  line-height: 1;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.obj__card.v-cream .obj__num {
  color: var(--ink);
}
.obj__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: auto;
  min-height: 2em;
}
.obj__body {
  font-size: 15px;
  line-height: 1.45;
  opacity: 0.85;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .obj__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Allow rows to expand if content overflows 220 px at 4-col widths */
    grid-auto-rows: minmax(220px, auto);
  }
  .obj__card.span-3,
  .obj__card.span-4 {
    grid-column: span 2;
  }
}
@media (max-width: 720px) {
  .obj__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .obj__card.span-1,
  .obj__card.span-2,
  .obj__card.span-3,
  .obj__card.span-4 {
    grid-column: auto;
  }
  .obj__card {
    min-height: 200px;
    padding: 24px;
  }
}

/* =========================================================
   SERVICES
   ========================================================= */

.svc__stack {
  display: flex;
  flex-direction: column;
}
.svc__row {
  display: grid;
  grid-template-columns: 80px 1fr 1.6fr 200px;
  gap: 32px;
  padding: 36px 0;
  border-top: 2px solid rgba(255, 250, 242, 0.15);
  align-items: center;
  cursor: pointer;
  transition:
    transform 0.2s,
    background 0.2s;
}
[data-theme='dark'] .svc__row {
  border-top-color: rgba(255, 243, 223, 0.15);
}
.svc__row:hover {
  transform: translateX(12px);
  background: rgba(250, 170, 51, 0.06);
}
.svc__row:last-child {
  border-bottom: 2px solid rgba(255, 250, 242, 0.15);
}
[data-theme='dark'] .svc__row:last-child {
  border-bottom-color: rgba(255, 243, 223, 0.15);
}
.svc__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.9;
  color: var(--orange);
}
.svc__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.svc__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.svc__points {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc__points li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 250, 242, 0.85);
}
[data-theme='dark'] .svc__points li {
  color: rgba(255, 243, 223, 0.85);
}
.svc__points li::before {
  content: '→';
  color: var(--orange);
  font-weight: 800;
}
.svc__cta {
  align-self: center;
  justify-self: center;
  margin-right: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 250, 242, 0.6);
  border: 1.5px solid rgba(255, 250, 242, 0.25);
  border-radius: 100px;
  padding: 10px 20px;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
[data-theme='dark'] .svc__cta {
  color: rgba(255, 243, 223, 0.6);
  border-color: rgba(255, 243, 223, 0.28);
}
.svc__row:hover .svc__cta {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}

@media (max-width: 920px) {
  .svc__row {
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .svc__row > :nth-child(3) {
    grid-column: 1 / -1;
  }
  .svc__row > :nth-child(4) {
    display: none;
  }
  .svc__num {
    font-size: 40px;
  }
}

/* =========================================================
   HOW IT WORKS (replaces basic onboarding cards)
   Animated horizontal pipeline w/ alternating colors.
   ========================================================= */
.how {
  background: var(--teal-deep);
  color: var(--cream);
}
[data-theme='dark'] .how {
  background: var(--teal);
  color: var(--bg);
}
.how .sec-title {
  color: var(--cream);
}
[data-theme='dark'] .how .sec-title {
  color: var(--bg);
}
.how .sec-title .hl-cream {
  background: var(--cream);
  color: var(--teal-deep);
}
[data-theme='dark'] .how .sec-title .hl-cream {
  color: var(--teal);
}
.how .sec-sub {
  color: rgba(255, 250, 242, 0.7);
}
[data-theme='dark'] .how .sec-sub {
  color: rgba(13, 13, 16, 0.65);
}
.how .sec-num {
  -webkit-text-stroke-color: var(--cream);
  opacity: 0.3;
}

.how__pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
  margin-top: 32px;
}
.how__step {
  position: relative;
  padding: 28px 20px 24px;
  min-width: 0;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--line);
  margin-right: -3px;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}
.how__step:hover {
  transform: scale(1.05);
  z-index: 3;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
[data-theme='dark'] .how__step {
  background: var(--bg);
}
.how__step:nth-child(odd) {
  background: var(--cream);
}
.how__step:nth-child(2) {
  background: var(--orange);
}
.how__step:nth-child(4) {
  background: var(--bg-warm);
}
[data-theme='dark'] .how__step:nth-child(2) {
  background: var(--orange);
}
[data-theme='dark'] .how__step:nth-child(4) {
  background: var(--bg-warm);
}
.how__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.9;
  color: var(--ink);
}
.how__step:nth-child(2) .how__num,
.how__step:nth-child(4) .how__num {
  color: var(--ink);
}
.how__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.how__body {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 8px;
}
.how__week {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
}
.how__arrow {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: var(--orange);
  display: grid;
  place-items: center;
  font-size: 14px;
  border: 3px solid var(--line);
  z-index: 2;
}
.how__step:last-child .how__arrow {
  display: none;
}

.how__progress {
  margin-top: 32px;
  padding: 24px;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
[data-theme='dark'] .how__progress {
  background: var(--cream);
  color: var(--ink);
}
.how__progress-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.how__progress-lead {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.how__progress-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.how__progress-cta {
  padding: 14px 22px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2.5px solid var(--line);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.how__progress-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--cream);
}

@media (max-width: 1100px) {
  .how__pipeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .how__step {
    margin-right: 0;
    margin-bottom: -3px;
  }
  .how__step:nth-child(odd) .how__arrow {
    display: none;
  }
  .how__arrow {
    right: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(50%) rotate(90deg);
  }
  .how__step:last-child .how__arrow {
    display: none;
  }
}
@media (max-width: 600px) {
  .how__pipeline {
    grid-template-columns: 1fr;
  }
  .how__step .how__arrow {
    right: 50%;
    top: auto;
    bottom: -16px;
    transform: translateX(50%) rotate(90deg);
    display: grid !important;
  }
  .how__step:nth-child(odd) .how__arrow {
    display: grid;
  }
  .how__step:last-child .how__arrow {
    display: none !important;
  }
  .how__progress {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HOW IT WORKS — animated connector rail
   ========================================================= */
.how__rail {
  position: relative;
  height: 56px;
  margin: 24px 0 12px;
}
.how__rail-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.how__rail-line {
  stroke: rgba(255, 250, 242, 0.35);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme='dark'] .how__rail-line {
  stroke: rgba(13, 13, 16, 0.35);
}
.how__rail.is-drawn .how__rail-line {
  stroke-dashoffset: 0;
}
/* Icon nodes sitting on each connector point */
.how__rail-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ink);
  border: 2.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 16px;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme='dark'] .how__rail-node {
  color: var(--bg);
}
.how__rail.is-drawn .how__rail-node {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.how__rail.is-drawn .how__rail-node:nth-of-type(1) {
  transition-delay: 0.25s;
}
.how__rail.is-drawn .how__rail-node:nth-of-type(2) {
  transition-delay: 0.55s;
}
.how__rail.is-drawn .how__rail-node:nth-of-type(3) {
  transition-delay: 0.85s;
}
.how__rail.is-drawn .how__rail-node:nth-of-type(4) {
  transition-delay: 1.15s;
}
.how__rail.is-drawn .how__rail-node:nth-of-type(5) {
  transition-delay: 1.45s;
}

@media (max-width: 1100px) {
  .how__rail {
    display: none;
  }
}

/* =========================================================
   INDUSTRIES
   ========================================================= */
/* Industries carousel v2 */
.ind__carousel {
  margin-top: 32px;
}
.ind__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ind__track::-webkit-scrollbar {
  display: none;
}

.ind__card-v2 {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border: 3px solid var(--line);
  padding: 44px 52px;
  position: relative;
  overflow: hidden;
}
.ind__card-v2-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
}
.ind__card-v2-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.6;
  position: absolute;
  top: 0px;
  left: 0px;
}
.ind__card-v2-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 52px);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 12px;
  width: 100%;
  text-align: center;
}
.ind__card-v2-desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 22px;
  width: 100%;
  text-align: center;
}
.ind__card-v2-works {
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}
.ind__card-v2-works-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}
.ind__card-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ind__card-v2-tags span {
  padding: 5px 14px;
  border: 1.5px solid var(--ink);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  color: var(--ink);
  opacity: 0.75;
}
.ind__card-v2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
}
.ind__stat {
  padding: 16px 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 10px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.ind__stat:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.ind__stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 26px);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 5px;
}
.ind__stat-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  opacity: 0.6;
}
.ind__card-v2-scenarios {
  margin-bottom: 24px;
  width: 100%;
  align-self: flex-start;
  text-align: left;
}
.ind__card-v2-scenarios-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ind__card-v2-scenarios ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ind__card-v2-scenarios li {
  font-size: 15px;
  font-weight: 500;
  padding-left: 18px;
  position: relative;
  color: var(--ink);
  opacity: 0.9;
}
.ind__card-v2-scenarios li::before {
  content: '■';
  position: absolute;
  left: 0;
  font-size: 7px;
  top: 6px;
  opacity: 0.45;
}
.ind__card-v2-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid var(--line);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.ind__card-v2-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}
.ind__card-v2-icon-wrap {
  position: absolute;
  bottom: 32px;
  right: 48px;
  pointer-events: none;
  z-index: 0;
}
.ind__card-v2-icon {
  font-size: clamp(120px, 16vw, 220px);
  color: var(--ink);
  opacity: 0.08;
}
.ind__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.ind__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ind__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.25;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.ind__dot.is-active {
  opacity: 1;
  transform: scale(1.3);
}
.ind__nav {
  display: flex;
  gap: 8px;
}
.ind__btn {
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--orange);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.15s;
}
.ind__btn:hover {
  opacity: 0.75;
}

@media (max-width: 720px) {
  .ind__card-v2 {
    padding: 28px 24px;
  }
  .ind__card-v2-icon-wrap {
    display: none;
  }
}

/* =========================================================
   TEAM (flip cards)
   ========================================================= */
.team__head {
  position: relative;
  text-align: center;
  margin-bottom: 32px;
}
.team__head > div {
  text-align: center;
}
.team__head > div .ribbon {
  display: inline-flex;
}
.team__head .sec-title {
  margin-left: auto;
  margin-right: auto;
}
.team__head .sec-sub {
  margin-left: auto;
  margin-right: auto;
}
.team__count {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.9;
  color: var(--orange);
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 600px) {
  .team__count {
    position: static;
    display: block;
    font-size: 48px;
    margin-top: 8px;
  }
  .team__head {
    padding-right: 0;
  }
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.team__card {
  perspective: 1200px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.team__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3/5;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.team__card.is-flipped .team__inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.team__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 3px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.team__face--front {
  background: var(--cream);
}
.team__face--back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  background: var(--ink);
  color: var(--cream);
  padding: 24px;
  justify-content: flex-start;
  gap: 0;
}
[data-theme='dark'] .team__face--back {
  background: var(--orange);
  color: var(--ink);
}
.team__photo {
  aspect-ratio: 1/1.45;
  background: var(--ink-soft);
  overflow: hidden;
  border-bottom: 3px solid var(--line);
  position: relative;
}
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team__meta {
  padding: 10px 14px;
}
.team__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.team__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.team__tag {
  padding: 4px 10px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-self: flex-start;
  margin-top: 8px;
}
[data-theme='dark'] .team__tag {
  background: var(--orange);
  color: var(--ink);
}

.team__back-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}
.team__back-logo {
  display: block;
  width: 223px;
  height: auto;
  margin: auto;
  opacity: 0.9;
}
.team__back-fact {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  padding-bottom: 16px;
}
.team__back-fact strong {
  color: var(--orange);
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 2px;
}
[data-theme='dark'] .team__back-fact strong {
  color: var(--ink);
}
.team__back-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 14px;
  border-top: 1.5px solid rgba(255, 250, 242, 0.15);
}
[data-theme='dark'] .team__back-meta {
  border-top-color: rgba(13, 13, 16, 0.15);
}
.team__flip-hint {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  pointer-events: none;
}
.team__face--back .team__flip-hint {
  color: rgba(255, 250, 242, 0.5);
}

@media (max-width: 920px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* Taller cards so back face content fits */
  .team__inner {
    aspect-ratio: 3/5.5;
  }
  /* Back face — tighter layout for small cards */
  .team__face--back {
    padding: 12px 10px;
  }
  .team__back-quote {
    font-size: 12px;
    line-height: 1.2;
  }
  .team__back-logo {
    width: 91px;
    margin: auto;
  }
  .team__back-fact {
    font-size: 10px;
    padding-bottom: 8px;
  }
  .team__back-fact strong {
    font-size: 15px;
  }
  .team__back-meta {
    font-size: 9px;
    padding-top: 6px;
    margin-bottom: 4px;
  }
  .team__flip-hint {
    font-size: 9px;
    bottom: 5px;
  }
}

/* ── VIP Consultants hub (8th grid cell) ─────────────────── */
.team__vip-hub {
  display: flex;
  flex-direction: column;
}
/* Only one VIP card visible at a time */
.team__vip-card {
  display: none;
}
.team__vip-card.is-visible {
  display: block;
}
/* Nav strip */
.team__vip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 0;
  gap: 8px;
}
.team__vip-btn {
  background: var(--ink);
  color: var(--cream);
  border: 2.5px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  flex-shrink: 0;
}
.team__vip-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}
.team__vip-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  flex: 1;
  text-align: center;
}

/* =========================================================
   REVIEWS (carousel)
   ========================================================= */
.rev {
  background: var(--orange);
}
[data-theme='dark'] .rev {
  background: var(--bg-warm);
}
.rev .sec-num {
  -webkit-text-stroke-color: var(--ink);
  opacity: 0.4;
}

.rev__carousel {
  margin-top: 24px;
  position: relative;
}
.rev__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 2);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0;
  padding: 8px 8px 24px; /* room for shadows */
  scrollbar-width: none;
}
@media (max-width: 600px) {
  .rev__track {
    grid-auto-columns: calc(100% - 16px);
    gap: 16px;
    padding: 8px 8px 20px;
  }
}
.rev__track::-webkit-scrollbar {
  display: none;
}
.rev__card {
  background: var(--cream);
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 0 var(--shadow);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-snap-align: start;
}
.rev__card.featured {
  background: var(--ink);
  color: var(--cream);
}
[data-theme='dark'] .rev__card.featured {
  background: var(--bg);
  color: var(--ink);
}
.rev__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rev__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.rev__stars {
  color: var(--orange);
  font-size: 16px;
  letter-spacing: 0.15em;
}
.rev__quote {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.rev__body {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.85;
  font-weight: 500;
}
.rev__stats {
  display: flex;
  gap: 28px;
}
.rev__stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: var(--orange);
}
[data-theme='dark'] .rev__card.featured .rev__stat-num {
  color: var(--orange);
}
.rev__stat-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 4px;
}
.rev__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--line);
  margin-top: auto;
}
.rev__card.featured .rev__foot {
  border-top-color: rgba(255, 250, 242, 0.2);
}
[data-theme='dark'] .rev__card.featured .rev__foot {
  border-top-color: rgba(13, 13, 16, 0.15);
}
.rev__avatar {
  width: 48px;
  height: 48px;
  border: 2.5px solid var(--line);
  object-fit: cover;
}
.rev__card.featured .rev__avatar {
  border-color: var(--orange);
}
.rev__person {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.rev__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}

.rev__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 24px;
}
.rev__dots {
  display: flex;
  gap: 8px;
}
.rev__dot {
  width: 32px;
  height: 8px;
  background: var(--cream);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.rev__dot.is-active {
  background: var(--ink);
}
[data-theme='dark'] .rev__dot.is-active {
  background: var(--ink);
}
.rev__nav {
  display: flex;
  gap: 8px;
}
.rev__btn {
  width: 48px;
  height: 48px;
  background: var(--cream);
  border: 2.5px solid var(--line);
  box-shadow: 4px 4px 0 0 var(--shadow);
  display: grid;
  place-items: center;
  font-size: 14px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.rev__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
.rev__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 4px 0 0 var(--shadow);
}

@media (max-width: 920px) {
  .rev__track {
    grid-auto-columns: 90%;
  }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 3px solid var(--line);
}
.faq__item {
  border-bottom: 3px solid var(--line);
}
.faq__q {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  gap: 16px;
  align-items: center;
  padding: 28px 0;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: padding 0.15s;
}
.faq__q:hover {
  transform: translateX(16px);
}
.faq__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: none;
}
.faq__plus {
  width: 44px;
  height: 44px;
  background: var(--orange);
  color: var(--ink);
  border: 2.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 20px;
  transition: transform 0.25s;
  justify-self: end;
}
.faq__item.is-open .faq__plus {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--orange);
}
.faq__a {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  gap: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item.is-open .faq__a {
  max-height: 600px;
}
.faq__a-inner {
  padding: 0 0 32px;
  grid-column: 2;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
}
.faq__a-inner p + p {
  margin-top: 12px;
}

@media (max-width: 720px) {
  .faq__q,
  .faq__a {
    grid-template-columns: 40px 1fr 40px;
    gap: 10px;
  }
  .faq__plus {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* =========================================================
   PULL QUOTE
   ========================================================= */
.pull-quote {
  padding-block: 80px;
}
.pull-quote__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  padding: 56px 32px;
  font-style: normal;
}
.pull-quote__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.pull-quote__text .orange {
  color: var(--orange);
}
.pull-quote__cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
@media (max-width: 720px) {
  .pull-quote__inner {
    padding: 36px 16px;
  }
}

/* =========================================================
   PRICING
   ========================================================= */
.pri__featured {
  padding: 48px;
  background: var(--orange);
  border: 4px solid var(--line);
  box-shadow: 12px 12px 0 0 var(--shadow);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 32px;
  position: relative;
}
@keyframes badge-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  }
}
.pri__featured-badge {
  display: inline-flex;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  animation: badge-float 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pri__featured-badge {
    animation: none;
  }
}
.pri__featured h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
  color: var(--ink);
}
.pri__featured p {
  font-size: clamp(16px, 1.4vw, 17px);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  max-width: 480px;
}
.pri__featured-price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.pri__featured-price-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-top: 8px;
  max-width: 300px;
}
.pri__featured-per {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pri__featured-features {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.pri__featured-features li {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
}
.pri__featured-features li::before {
  content: '✓';
  color: var(--ink);
  font-weight: 900;
  background: var(--cream);
  border: 2px solid var(--line);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.pri__featured-cta {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.15s;
}
.pri__featured-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--shadow);
}

.pri__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border: 3px solid var(--line);
  background: var(--line);
}
.pri__card {
  background: var(--cream);
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 2px solid var(--line);
}
.pri__card:last-child {
  border-right: 0;
}
.pri__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  min-height: 44px;
}
.pri__price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.pri__per {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-mute);
  margin-left: 4px;
}
.pri__desc {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.pri__features {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pri__features li {
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  gap: 8px;
  font-weight: 500;
}
.pri__features li::before {
  content: '✓';
  color: var(--orange);
  font-weight: 900;
}
.pri__cta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 2px solid var(--line);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: gap 0.15s;
}
.pri__cta:hover {
  gap: 14px;
}
.pri__cta::after {
  content: '→';
  color: var(--orange);
}

@media (max-width: 1100px) {
  .pri__grid {
    /* 3-col is the sweet-spot for 720–1100 px (was 2-col: too sparse) */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pri__card {
    border-right: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
  }
  /* Rightmost column in a 3-col grid */
  .pri__card:nth-child(3n),
  .pri__card:last-child {
    border-right: 0;
  }
  /* Lone last card (starts a new row at position 3n+1): span full width */
  .pri__card:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .pri__featured {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 24px;
    box-shadow: 6px 6px 0 0 var(--shadow);
  }
  .pri__featured-features {
    grid-template-columns: 1fr;
  }
  .pri__grid {
    grid-template-columns: 1fr;
  }
  .pri__card {
    border-right: 0;
    border-bottom: 2px solid var(--line);
  }
  .pri__card:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   CLIENT LOGO WALL
   ========================================================= */
.logo-wall {
  padding-top: 36px;
  padding-bottom: 36px;
  border-top: 2px solid var(--line-soft);
  border-bottom: 2px solid var(--line-soft);
}
.logo-wall__eyebrow {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.logo-wall__eyebrow strong {
  color: var(--orange);
  font-weight: 900;
}
.logo-wall__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.lw-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 2px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition:
    border-color 0.18s,
    color 0.18s,
    background 0.18s;
  cursor: default;
}
.lw-chip i {
  font-size: 14px;
  color: var(--ink-mute);
  transition: color 0.18s;
}
.lw-chip:hover {
  border-color: var(--orange);
  color: var(--ink);
  background: rgba(250, 170, 51, 0.08);
}
.lw-chip:hover i {
  color: var(--orange);
}
.logo-wall__disclaimer {
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .logo-wall__eyebrow {
    letter-spacing: 0.08em;
    font-size: 10px;
  }
  .logo-wall__chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .lw-chip {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 6px;
    font-size: 11px;
    gap: 5px;
    border-width: 1.5px;
  }
  .lw-chip i {
    font-size: 17px;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  background: var(--orange);
  border-top: 4px solid var(--line);
  padding: 96px 0 32px;
  position: relative;
  overflow: hidden;
}
[data-theme='dark'] .foot {
  background: var(--bg-warm);
}
.foot__cta {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 12vw, 180px);
  line-height: 0.85;
  text-align: center;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}
.foot__cta .out {
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
}
.foot__row {
  display: block;
  padding-top: 32px;
  border-top: 3px solid var(--line);
}
.foot__sub {
  font-size: clamp(16px, 1.4vw, 17px);
  font-weight: 600;
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.4;
  color: var(--ink);
}
.foot__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 3px solid var(--line);
  transition: transform 0.15s;
}
.foot__btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--shadow);
}
.foot__meta {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}

/* =========================================================
   GRAIN / NOISE OVERLAY
   ========================================================= */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.035;
}
[data-theme='dark'] .grain {
  opacity: 0.055;
}

/* =========================================================
   ONLINE NOW PILL
   ========================================================= */
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
  white-space: nowrap;
  user-select: none;
}
.online-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-online 2s ease-in-out infinite;
}
@keyframes pulse-online {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}
@media (max-width: 1020px) {
  .online-pill {
    display: none;
  }
}

/* Calendly widget in footer */
.foot__calendly {
  position: relative;
  margin-top: 48px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
[data-theme='dark'] .foot__calendly {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.foot__calendly .calendly-inline-widget {
  min-width: 320px;
  height: 700px;
  position: relative;
  z-index: 1;
}
/* Loading placeholder — sits behind the iframe, hidden once Calendly renders */
.cal-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Footer email link */
.foot__meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot__meta a:hover {
  color: var(--ink);
  opacity: 0.75;
}

/* Pricing custom note */
.pri__custom-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-top: -4px;
}

/* Global focus-visible styles */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .foot {
    padding: 56px 0 24px;
  }

  .foot__meta {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    align-items: center;
  }
  .foot__cta {
    font-size: 56px;
  }
  .foot__cta .out {
    -webkit-text-stroke-width: 2px;
  }
  .foot__calendly .calendly-inline-widget {
    height: 900px;
  }
}

/* =========================================================
   MOBILE REFINEMENTS — comprehensive touch & layout pass
   ========================================================= */

/* ── 1. Touch-safe hovers ─────────────────────────────────
   On touch devices (hover: none / pointer: coarse) disable
   transforms that cause stuck-hover states or layout shifts
   on first tap. Colour/background-only changes are fine.   */
@media (hover: none), (pointer: coarse) {
  /* FAQ question — slides right 16px on hover → layout jump */
  .faq__q:hover {
    transform: none;
  }
  /* Services row — slides right 12px on hover */
  .svc__row:hover {
    transform: none;
    background: none;
  }
  /* How-it-works step — scales up on hover */
  .how__step:hover {
    transform: none;
    box-shadow: none;
  }
  /* Mobile nav links — indent on hover causes jump;
     keep colour highlight (.active indent stays via JS) */
  .nav__mobile a:hover {
    padding-left: 0;
  }
  /* Objective cards */
  .obj__card:hover {
    transform: none;
    box-shadow: none;
  }
  .obj__card:hover .obj__icon {
    transform: none;
    box-shadow: none;
  }
  .obj__card:hover .obj__num {
    opacity: 0.18;
    transform: none;
  }
  /* Nav CTA button */
  .nav__cta:hover {
    transform: none;
    box-shadow: 4px 4px 0 0 var(--shadow);
  }
  /* Hero CTA buttons */
  .btn-big:hover {
    transform: none;
    box-shadow: 6px 6px 0 0 var(--shadow);
  }
  /* Ghost CTA — no sticky lift/shadow on touch (matches btn-big above) */
  .btn-ghost:hover {
    transform: none;
    box-shadow: none;
  }
  /* How progress CTA */
  .how__progress-cta:hover {
    transform: none;
    box-shadow: none;
  }
  /* Review prev/next */
  .rev__btn:hover {
    transform: none;
    box-shadow: 4px 4px 0 0 var(--shadow);
  }
  /* Footer button */
  .foot__btn:hover {
    transform: none;
    box-shadow: none;
  }
  /* Pricing featured CTA */
  .pri__featured-cta:hover {
    transform: none;
    box-shadow: none;
  }
  /* Industries card CTA */
  .ind__card-v2-cta:hover {
    transform: none;
    box-shadow: none;
  }
  /* Brutalist boxes */
  .brut:hover {
    transform: none;
    box-shadow: 8px 8px 0 0 var(--shadow);
  }
  .brut-sm:hover {
    transform: none;
    box-shadow: 5px 5px 0 0 var(--shadow);
  }
}

/* ── 2. Touch-action: remove 300 ms tap delay on interactive
   elements (complements existing rule on .team__card)      */
.faq__q,
.btn-big,
.btn-ghost,
.nav__cta,
.svc__row,
.rev__btn,
.ind__btn,
.rev__dot,
.ind__dot {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 3. Hero text-stroke: thin on mobile ─────────────────
   Footer .out already reduced in the 720px block above.
   Hero h1 .out and section title .out still need it.       */
@media (max-width: 767px) {
  .hero__h1 .out {
    -webkit-text-stroke-width: 2px;
  }
}
@media (max-width: 720px) {
  .sec-title .out {
    -webkit-text-stroke-width: 2px;
  }
}

/* ── 4. Hero section: tighter top padding on phones ──────── */
@media (max-width: 480px) {
  .hero {
    padding: 36px 0 32px;
  }
}

/* ── 5. Hero CTA buttons: full-width on narrow phones ──────
   flex-wrap already wraps them; 100% + centred looks clean  */
@media (max-width: 480px) {
  .hero__ctas {
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .btn-big,
  .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 15px;
  }
}

/* ── 6. Team grid: 1-column at very small phones ────────────
   At 375 px, 2 flip cards = ~165 px wide each — too tight
   to read front-face content or tap comfortably.            */
@media (max-width: 480px) {
  .team__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .team__inner {
    aspect-ratio: 3 / 4;
  }
}

/* ── 7. FAQ: increase max-height for long answers on mobile ─
   On small screens text reflows wider, can overflow 600px.  */
@media (max-width: 720px) {
  .faq__item.is-open .faq__a {
    max-height: 900px;
  }
}

/* ── 8. Marquee: tighter item spacing on narrow screens ─────
   Keeps the band from looking too spread-out on phones.     */
@media (max-width: 480px) {
  .mbr-item {
    padding: 0 14px;
  }
  .marquee-band__row--langs .mbr-item {
    font-size: 12px;
  }
  .marquee-band__row--stats .mbr-item {
    font-size: 10px;
  }
}

/* ── 9. Industries card: tighter padding on small phones ──── */
@media (max-width: 480px) {
  .ind__card-v2 {
    padding: 24px 18px;
  }
  .ind__card-v2-stats {
    grid-template-columns: 1fr 1fr;
  }
  /* 3rd stat (odd-one-out) spans both columns and centres itself */
  .ind__card-v2-stats .ind__stat:last-child:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 4px);
  }
}

/* ── 10. Pricing featured: stack grid earlier ────────────── */
@media (max-width: 480px) {
  .pri__featured {
    padding: 24px 18px;
    gap: 20px;
  }
  .pri__featured h3 {
    font-size: clamp(36px, 12vw, 56px);
  }
  .pri__featured-price {
    font-size: clamp(42px, 12vw, 64px);
  }
}

/* ── 11. Nav: hide CTA at small phones so burger stays visible ──
   At ≤480px the nav bar overflows: brand (171px) + CTA (~121px)
   + burger (44px) + padding (40px) = 376px which is wider than
   a 375px iPhone or 360px Android.  The mobile overlay already
   has its own "Book a free call" CTA so nothing is lost.        */
@media (max-width: 480px) {
  .nav__cta {
    display: none;
  }
  .nav__top {
    gap: 12px;
  }
}

/* ── 12. Mobile nav overlay — close button (×) ──────────────────
   Positioned just below the sticky nav bar (≈76px from viewport
   top) within the overlay's visible dark-background area.         */
.nav__mobile-close {
  position: absolute;
  top: 76px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: 2px solid rgba(255, 250, 242, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nav__mobile-close span {
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--cream);
  display: block;
}
.nav__mobile-close span:first-child {
  transform: rotate(45deg);
}
.nav__mobile-close span:last-child {
  transform: rotate(-45deg);
}
[data-theme='dark'] .nav__mobile-close {
  border-color: rgba(255, 243, 223, 0.25);
}
[data-theme='dark'] .nav__mobile-close span {
  background: var(--ink-soft);
}

/* Touch: remove tap delay from close button and burger */
.nav__mobile-close,
.nav__burger {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 13. Mobile overlay: contain scroll & smooth momentum ───── */
.nav__mobile {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   LAPTOP + TABLET OPTIMISATIONS  (768 – 1200 px)
   ========================================================= */

/* ── L1. Section vertical rhythm ─────────────────────────
   96 px top/bottom padding is generous on desktops but
   heavy on mid-range laptops and tablets. Trim slightly
   between 768 and 1100 px.                                */
@media (min-width: 768px) and (max-width: 1100px) {
  .section {
    padding: 72px 0;
  }
}

/* ── L2. Team grid — 3 cols at 921–1200 px ──────────────
   Default 4-col → 2-col is too abrupt at 920 px. A 3-col
   step keeps cards readable before the full mobile stack. */
@media (min-width: 921px) and (max-width: 1200px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── L3. Services row — tighten at 921–1200 px ──────────
   The 4-col row has 32 px gaps and a 48 px CTA margin-
   right that wastes space on mid-size viewports.          */
@media (min-width: 921px) and (max-width: 1200px) {
  .svc__row {
    gap: 20px;
  }
}

/* ── L4. Pricing featured — reduce padding at 768–1100 px
   48 px all-round and 48 px gap is heavy at tablet/small-
   laptop widths. 36/28 keeps the 2-col layout breathing.  */
@media (min-width: 768px) and (max-width: 1100px) {
  .pri__featured {
    padding: 36px 40px;
    gap: 28px;
  }
}

/* ── L5. Industries card — trim vertical padding slightly
   44 px top/bottom is fine at 1200 px+ but feels spacious
   on mid-range viewports that are already narrower.       */
@media (min-width: 921px) and (max-width: 1200px) {
  .ind__card-v2 {
    padding: 32px 44px;
  }
}

/* =========================================================
   11. SCROLL PROGRESS BAR
   ========================================================= */
.scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--orange);
  z-index: 10000;
  pointer-events: none;
  transform-origin: left;
}

/* =========================================================
   15. TEAM PHOTO ZOOM BEFORE FLIP
   ========================================================= */
.team__photo img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.team__card:not(.is-flipped):hover .team__photo img {
  transform: scale(1.06);
}
@media (hover: none), (pointer: coarse) {
  .team__card:not(.is-flipped):hover .team__photo img {
    transform: none;
  }
}

/* =========================================================
   17. COPY EMAIL TOAST
   ========================================================= */
.copy-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 2px solid var(--orange);
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
  z-index: 9998;
  white-space: nowrap;
}
.copy-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   18. BELGRADE CLOCK
   ========================================================= */
.foot__clock {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.75;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.foot__clock i {
  font-size: 11px;
  opacity: 0.7;
}

/* =========================================================
   WORKS WITH (tool / platform strip)
   ========================================================= */
.works {
  padding: 36px 0;
  background: var(--bg-deep);
  border-bottom: 2px solid var(--line-soft);
}
.works__eyebrow {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.works__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 30px;
}
.tool-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
}
.tool-logo__img {
  display: none;
  max-height: 30px;
  width: auto;
}
.tool-logo.has-img .tool-logo__img {
  display: block;
}
.tool-logo.has-img .tool-logo__name {
  display: none;
}
.tool-logo__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.18s;
}
.tool-logo:hover .tool-logo__name {
  opacity: 1;
}
/* ── Tooltip (pointer devices only) ── */
@media (pointer: fine) {
  .tool-logo[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    pointer-events: none;
    opacity: 0;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
    z-index: 20;
  }
  .tool-logo[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--line);
    pointer-events: none;
    opacity: 0;
    transition:
      opacity 0.18s ease,
      transform 0.18s ease;
    z-index: 20;
  }
  .tool-logo[data-tip]:hover::after,
  .tool-logo[data-tip]:focus-visible::after,
  .tool-logo[data-tip]:hover::before,
  .tool-logo[data-tip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.tool-logo__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--ink);
  padding: 2px 5px;
}
.works__note {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
}

/* =========================================================
   BY THE NUMBERS (aggregate stats band)
   ========================================================= */
.stats-band {
  background: var(--ink);
  color: var(--cream);
  border-bottom: 3px solid var(--line);
  padding: 40px 0;
}
[data-theme='dark'] .stats-band {
  background: var(--cream);
  color: var(--ink);
}
.stats-band__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.stats-band__item {
  text-align: center;
  position: relative;
}
.stats-band__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  width: 1.5px;
  background: rgba(255, 250, 242, 0.16);
}
[data-theme='dark'] .stats-band__item:not(:last-child)::after {
  background: var(--line-soft);
}
.stats-band__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}
.stats-band__unit {
  font-family: var(--font-mono);
  font-size: 0.42em;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: 2px;
}
.stats-band__lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.7;
}
@media (max-width: 920px) {
  .stats-band__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px;
  }
  .stats-band__item:nth-child(3n)::after {
    display: none;
  }
}
@media (max-width: 520px) {
  .stats-band__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-band__item::after {
    display: none !important;
  }
}

/* =========================================================
   DISPUTES & MARGIN
   ========================================================= */
.dispute__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.dispute__card {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 0 var(--shadow);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.dispute__card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 0 var(--shadow);
}
.dispute__card--mid {
  background: var(--orange);
  color: var(--ink);
}
/* In dark, orange content blocks convert to warm dark (matches .rev/.foot) */
[data-theme='dark'] .dispute__card--mid {
  background: var(--bg-warm);
}
.dispute__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--ink);
  color: var(--cream);
  border: 2.5px solid var(--line);
}
.dispute__step {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
.dispute__card--mid .dispute__step {
  color: var(--ink);
  opacity: 0.7;
}
.dispute__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.dispute__body {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  opacity: 0.85;
}
.dispute__card--mid .dispute__body {
  opacity: 0.9;
}
.dispute__banner {
  margin-top: 18px;
  padding: 28px;
  background: var(--ink);
  color: var(--cream);
  border: 3px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
[data-theme='dark'] .dispute__banner {
  background: var(--bg-warm);
  color: var(--ink);
}
.dispute__banner-lead {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.dispute__banner-sub {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
  max-width: 640px;
}
.dispute__banner-cta {
  padding: 16px 24px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2.5px solid var(--line);
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.dispute__banner-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 0 var(--cream);
}
[data-theme='dark'] .dispute__banner-cta:hover {
  box-shadow: 5px 5px 0 0 var(--ink);
}
@media (max-width: 920px) {
  .dispute__grid {
    grid-template-columns: 1fr;
  }
  .dispute__banner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CASE STUDIES
   ========================================================= */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.case {
  background: var(--paper);
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 0 var(--shadow);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-theme='dark'] .case {
  background: var(--bg-deep);
}
.case--featured {
  background: var(--ink);
  color: var(--cream);
}
[data-theme='dark'] .case--featured {
  background: var(--bg-warm);
  color: var(--ink);
}
.case__top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case__vertical {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.case__vertical i {
  color: var(--orange);
  font-size: 16px;
}
.case__vol {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.case__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.case__channels span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1.5px solid currentColor;
  opacity: 0.7;
}
.case__results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0;
  border-top: 2px solid var(--line-soft);
  border-bottom: 2px solid var(--line-soft);
}
.case--featured .case__results {
  border-color: rgba(255, 250, 242, 0.18);
}
.case__metric {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.case__from {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  opacity: 0.45;
  text-decoration: line-through;
}
.case__metric i {
  color: var(--orange);
  font-size: 14px;
}
.case__to {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: var(--orange);
  letter-spacing: -0.02em;
}
.case__to--big {
  font-size: 32px;
}
.case__metric-lab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  width: 100%;
}
.case__win {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.case__time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cases__disclaimer {
  text-align: center;
  margin-top: 22px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
}
@media (max-width: 920px) {
  .cases__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FOOTER QUOTE FORM
   ========================================================= */
.foot__quote {
  max-width: 720px;
  margin: 48px auto 0;
  background: var(--cream);
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 0 var(--shadow);
  padding: 32px;
}
.foot__quote-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.foot__quote-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-top: 6px;
  margin-bottom: 22px;
}
.quote-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.quote-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-form__field > span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--line);
  padding: 12px 14px;
  width: 100%;
  transition: box-shadow 0.15s ease;
}
[data-theme='dark'] .quote-form__field input,
[data-theme='dark'] .quote-form__field select,
[data-theme='dark'] .quote-form__field textarea {
  background: var(--bg-deep);
}
.quote-form__field input:focus,
.quote-form__field select:focus,
.quote-form__field textarea:focus {
  outline: none;
  box-shadow: 3px 3px 0 0 var(--orange);
}
.quote-form__field textarea {
  resize: vertical;
  margin-bottom: 18px;
}
.quote-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  background: var(--orange);
  color: var(--ink);
  border: 2.5px solid var(--line);
  box-shadow: 4px 4px 0 0 var(--shadow);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.quote-form__submit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--shadow);
}
.quote-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.quote-form__status {
  margin-top: 12px;
  min-height: 1em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.quote-form__status.is-ok {
  color: #15803d;
}
.quote-form__status.is-err {
  color: #b91c1c;
}
.foot__or {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.foot__or span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
}
.foot__or span::before,
.foot__or span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 48px;
  height: 1.5px;
  background: var(--line-soft);
}
.foot__or span::before {
  right: calc(100% + 12px);
}
.foot__or span::after {
  left: calc(100% + 12px);
}
@media (max-width: 600px) {
  .foot__quote {
    padding: 24px 18px;
  }
  .quote-form__row {
    grid-template-columns: 1fr;
  }
}

/* Touch-safe hovers for the new components */
@media (hover: none), (pointer: coarse) {
  .dispute__card:hover {
    transform: none;
    box-shadow: 6px 6px 0 0 var(--shadow);
  }
  .dispute__banner-cta:hover {
    transform: none;
    box-shadow: none;
  }
  .quote-form__submit:hover {
    transform: none;
    box-shadow: 4px 4px 0 0 var(--shadow);
  }
}

/* ── Small-screen refinements for the new sections ──────────── */
@media (max-width: 600px) {
  /* Works strip — smaller wordmarks so 5 logos don't overwhelm */
  .works {
    padding: 28px 0;
  }
  .works__row {
    gap: 14px 22px;
  }
  .tool-logo__name {
    font-size: 17px;
  }
  /* Stats band — a touch tighter */
  .stats-band {
    padding: 32px 0;
  }
  /* Disputes banner — stack + full-width tappable CTA */
  .dispute__banner {
    padding: 22px;
    gap: 18px;
  }
  .dispute__banner-cta {
    display: block;
    text-align: center;
    width: 100%;
  }
  /* Case study cards — slightly tighter padding */
  .case {
    padding: 22px;
  }
}



/* ── FAQ bottom CTA ─────────────────────────────────────────── */
.faq__cta {
  margin-top: 56px;
  padding: 40px 32px;
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.faq__cta-text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink);
}
@media (min-width: 640px) {
  .faq__cta {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    text-align: left;
  }
}

@media (max-width: 380px) {
  /* Stats band labels can get cramped at 2-up on tiny phones */
  .stats-band__lab {
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .tool-logo__name {
    font-size: 15px;
  }
}

/* =========================================================
   COUNT-UP NUMBERS + DISPUTE FLOW ARROWS
   ========================================================= */
/* Tabular figures keep width steady while a number counts up */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* Before → During → After connectors between dispute cards */
.dispute__arrow {
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  background: var(--orange);
  color: var(--ink);
  border: 2.5px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  /* The arrow badge "draws" toward the next card once that card reveals.
     clip-path (not transform) is used — transform already positions/rotates it. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease 0.45s;
}
.dispute__card.is-in .dispute__arrow {
  clip-path: inset(0 0 0 0);
}
[data-theme='dark'] .dispute__arrow {
  color: var(--bg);
}
@media (max-width: 920px) {
  /* Stacked cards — arrow points down into the next card */
  .dispute__arrow {
    top: auto;
    bottom: -26px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
}