/* ==========================================================================
   Zestify Digital — stylesheet
   Plain CSS. No build step, no framework.

   Contents
   01  Reset
   02  Theme tokens
   03  Base
   04  Layout helpers
   05  Buttons & small parts
   06  Grain
   07  Reveal animations
   08  Navbar
   09  Hero
   10  Stats
   11  Comparison
   12  Methodology
   13  Partnership
   14  Testimonials
   15  Page header
   16  Services
   17  Tech stack
   18  Team
   19  Contact
   20  CTA band
   21  404
   22  Footer
   23  Responsive
   ========================================================================== */

/* 01  Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

img, svg, video { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }


/* 02  Theme tokens --------------------------------------------------------- */
/* Two fully-authored themes, not one inverted palette.
   Light = paper. Dark = dusk. Neutrals are tinted toward the brand hue (265)
   so nothing is a dead grey, and no pure black or white appears anywhere.
   To rebrand, change --c-brand in both blocks. Nothing else holds a raw colour. */

:root {
  --c-bg:            oklch(0.977 0.004 265);
  --c-bg-sunken:     oklch(0.951 0.006 265);
  --c-surface:       oklch(0.996 0.002 265);
  --c-surface-glass: oklch(0.99 0.003 265 / 0.72);

  --c-ink:       oklch(0.215 0.025 265);
  --c-ink-soft:  oklch(0.435 0.021 265);
  --c-ink-faint: oklch(0.615 0.016 265);

  --c-line:        oklch(0.885 0.008 265);
  --c-line-strong: oklch(0.775 0.013 265);

  --c-brand:       oklch(0.505 0.222 264);
  --c-brand-hover: oklch(0.445 0.215 264);
  --c-brand-soft:  oklch(0.935 0.038 264);
  --c-brand-ink:   oklch(0.99 0.004 265);

  --grain-opacity: 0.32;
  --grain-blend: soft-light;
  --glow-opacity: 0.14;

  --shadow-lift:       0 1px 2px oklch(0.3 0.04 265 / 0.05), 0 12px 28px -12px oklch(0.3 0.04 265 / 0.16);
  --shadow-lift-hover: 0 2px 4px oklch(0.3 0.04 265 / 0.06), 0 26px 54px -18px oklch(0.3 0.04 265 / 0.24);

  /* Typography — Unbounded for headline moments, Sora for everything else.
     Unbounded is a wide display face: used globally it wrecks card titles and
     long strings like email addresses, so it is scoped to hero/section
     headlines only (see the .display selector list in section 24). */
  --font-display: "Unbounded", "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  color-scheme: light;
}

html[data-theme="dark"] {
  --c-bg:            oklch(0.168 0.014 265);
  --c-bg-sunken:     oklch(0.128 0.013 265);
  --c-surface:       oklch(0.212 0.017 265);
  --c-surface-glass: oklch(0.2 0.017 265 / 0.68);

  --c-ink:       oklch(0.958 0.005 265);
  --c-ink-soft:  oklch(0.762 0.014 265);
  --c-ink-faint: oklch(0.578 0.017 265);

  --c-line:        oklch(0.298 0.018 265);
  --c-line-strong: oklch(0.405 0.024 265);

  --c-brand:       oklch(0.665 0.185 264);
  --c-brand-hover: oklch(0.725 0.165 264);
  --c-brand-soft:  oklch(0.288 0.082 264);
  --c-brand-ink:   oklch(0.145 0.02 265);

  --grain-opacity: 0.5;
  --grain-blend: overlay;
  --glow-opacity: 0.3;

  --shadow-lift:       0 1px 2px oklch(0 0 0 / 0.4), 0 12px 32px -12px oklch(0 0 0 / 0.6);
  --shadow-lift-hover: 0 2px 6px oklch(0 0 0 / 0.45), 0 30px 60px -18px oklch(0 0 0 / 0.7);

  color-scheme: dark;
}


/* 03  Base ----------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
}

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Default heading face is Sora Bold. The wide display face is opt-in. */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

em { font-style: italic; }

address { font-style: normal; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
  font-size: 0.875rem;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translateY(0); }


/* 04  Layout helpers ------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.75rem);
}

.section { padding-block: clamp(4.5rem, 10vw, 9.5rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

.band { position: relative; overflow: hidden; }
.band--sunken { background-color: var(--c-bg-sunken); }
.band--top { border-top: 1px solid var(--c-line); }
.band--bottom { border-bottom: 1px solid var(--c-line); }
.band--y { border-block: 1px solid var(--c-line); }

/* Soft accent bloom behind key sections. */
.glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: var(--glow-opacity);
  filter: blur(80px);
  background: radial-gradient(circle at center, var(--c-brand) 0%, transparent 68%);
}

/* Hairline "spec sheet" grid — the site's structural signature. */
.rule-grid {
  display: grid;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
.rule-cell {
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  transition: background-color 0.5s ease;
}
.rule-cell:hover { background-color: var(--c-surface); }


/* 05  Buttons & small parts ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.25s ease,
              border-color 0.25s ease, color 0.25s ease, box-shadow 0.35s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
  box-shadow: 0 10px 30px -12px var(--c-brand);
}
.btn--primary:hover {
  background-color: var(--c-brand-hover);
  box-shadow: 0 16px 40px -14px var(--c-brand);
  transform: translateY(-2px);
}
.btn--primary[disabled] { opacity: 0.7; pointer-events: none; }

.btn--ghost {
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink);
}
.btn--ghost:hover { border-color: var(--c-ink); transform: translateY(-2px); }

.btn--full { width: 100%; }

/* Small uppercase index label that numbers and names each section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background-color: var(--c-line-strong);
}
.eyebrow--brand { color: var(--c-brand); }
.eyebrow--brand::before { background-color: var(--c-brand); }

.link-underline { position: relative; }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.link-underline:hover::after,
.link-underline[aria-current="page"]::after { transform: scaleX(1); }

.glass {
  background-color: var(--c-surface-glass);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--c-line);
}

.lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon--sm { width: 16px; height: 16px; }
.icon--brand { color: var(--c-brand); }

/* Placeholder blocks -------------------------------------------------------
   Clearly-marked stand-ins. See assets/img/README.txt for how to swap in
   real photography without touching layout. */
.ph {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  border: 1px dashed var(--c-line-strong);
  border-radius: 12px;
  background-color: var(--c-bg-sunken);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: repeating-linear-gradient(135deg, var(--c-line) 0 1px, transparent 1px 11px);
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--4x5  { aspect-ratio: 4 / 5; }
.ph__label { font-size: 0.875rem; font-weight: 500; color: var(--c-ink-soft); }
.ph__note {
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.ph svg { color: var(--c-ink-faint); }


/* 06  Grain ---------------------------------------------------------------- */
/* Fixed fractal-noise tile over the whole viewport. Soft-light and light on
   paper; overlay and heavier on dusk. Never interactive. */

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}


/* 07  Reveal animations ---------------------------------------------------- */
/* Elements start hidden and are unhidden by IntersectionObserver in main.js.
   Only opacity and transform animate. */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* If JS never runs, content must not stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }


/* 08  Navbar --------------------------------------------------------------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.nav.is-scrolled {
  background-color: var(--c-surface-glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: var(--c-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.nav__link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  transition: color 0.3s ease;
}
.nav__link:hover { color: var(--c-ink); }
.nav__link[aria-current="page"] { color: var(--c-ink); }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; }

.logo { display: inline-flex; align-items: center; gap: 0.625rem; }
.logo__mark {
  width: 32px; height: 32px;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease);
}
.logo:hover .logo__mark { transform: rotate(-6deg); }
.logo--lg .logo__mark { width: 40px; height: 40px; }
.logo__text {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.logo--lg .logo__text { font-size: 1.25rem; }
.logo__text span:last-child { font-weight: 400; color: var(--c-ink-faint); }

/* Theme switch — the pill marks the active side. */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 4.25rem; height: 2.25rem;
  padding: 0.25rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background-color: var(--c-bg-sunken);
  transition: border-color 0.3s ease;
}
.theme-toggle:hover { border-color: var(--c-line-strong); }
.theme-toggle__pill {
  position: absolute;
  width: 1.75rem; height: 1.75rem;
  border-radius: 999px;
  background-color: var(--c-brand);
  transform: translateX(0);
  transition: transform 0.45s var(--ease);
}
html[data-theme="dark"] .theme-toggle__pill { transform: translateX(1.875rem); }
.theme-toggle__icons {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: 0.4rem;
}
.theme-toggle__icons svg { width: 15px; height: 15px; color: var(--c-ink-faint); }
.theme-toggle__icons svg:first-child { color: var(--c-brand-ink); }
html[data-theme="dark"] .theme-toggle__icons svg:first-child { color: var(--c-ink-faint); }
html[data-theme="dark"] .theme-toggle__icons svg:last-child { color: var(--c-brand-ink); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-ink);
  transition: border-color 0.3s ease;
}
.icon-btn:hover { border-color: var(--c-line-strong); }

.nav__burger { display: none; }

/* Mobile drawer — full panel, so navigation is adapted rather than amputated. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background-color: var(--c-bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0.35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  flex-shrink: 0;
}
.drawer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 1.5rem 2.5rem;
}
.drawer__list { border-top: 1px solid var(--c-line); }
.drawer__list li { border-bottom: 1px solid var(--c-line); }
.drawer__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1.25rem;
}
.drawer__list .label {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
}
.drawer__list a[aria-current="page"] .label { color: var(--c-brand); }
.drawer__list .num {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}


/* 09  Hero ----------------------------------------------------------------- */

main { padding-top: 4.5rem; }

.hero__grid {
  display: grid;
  gap: 4rem;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 9vw, 7rem);
}
.hero h1 {
  margin-top: 1.75rem;
  font-size: clamp(2.9rem, 7.6vw, 5.9rem);
  line-height: 0.94;
}
.hero h1 .accent { color: var(--c-brand); }
.hero__sub {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.hero__ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero__trust {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c-ink-faint);
}

/* Animated console mockup — placeholder for a real product shot. */
.console {
  position: relative;
  transform: rotate(-1.6deg);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-lift);
}
.console__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.console__eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.console__title { margin-top: 0.25rem; font-size: 0.95rem; font-weight: 600; }
.console__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.console__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background-color: var(--c-brand);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

.console__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 11rem;
  padding-top: 1.5rem;
}
/* The resting state is full height, and the animation runs *from* zero with
   `backwards` fill. That way a bar that never animates — hidden tab on load,
   print, an extension stripping animations — still renders at full height
   instead of collapsing the hero chart to nothing. */
.console__bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background-color: var(--c-line-strong);
  transform-origin: bottom;
  animation: grow 0.9s var(--ease) backwards;
}
.console__bar--hot { background-color: var(--c-brand); }
@keyframes grow { from { transform: scaleY(0) } }

.console__foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.console__k {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.console__v { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.25rem; }

.chip {
  position: absolute;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background-color: var(--c-surface);
  box-shadow: var(--shadow-lift);
}
.chip--a { left: -1rem; top: 33%; animation: float 5.5s ease-in-out infinite; }
.chip--b { right: -0.75rem; bottom: -1.25rem; animation: float 6.5s ease-in-out 0.8s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.chip__k {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.chip__v { margin-top: 0.125rem; font-family: var(--font-display); font-size: 1.125rem; }
.chip__v--brand { color: var(--c-brand); }

.mockup-note {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}


/* 10  Stats ---------------------------------------------------------------- */

.stats__head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.stats__grid { grid-template-columns: repeat(2, 1fr); }
.stat { padding: 2rem 1.25rem; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__num--brand { color: var(--c-brand); }
.stat__label { margin-top: 1rem; font-size: 0.9rem; font-weight: 600; }
.stat__note { margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.5; color: var(--c-ink-faint); }


/* 11  Comparison ----------------------------------------------------------- */

.section-head { max-width: 42rem; }
.section-head h2 {
  margin-top: 1.5rem;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  line-height: 1.02;
}
.section-head h2 em { color: var(--c-ink-faint); }
.section-head p { margin-top: 1.5rem; max-width: 34rem; line-height: 1.65; color: var(--c-ink-soft); }

.split-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cmp { margin-top: 3.5rem; }
.cmp__labels { display: none; }
.cmp__row { padding-block: 1.75rem; border-bottom: 1px solid var(--c-line); }
.cmp__criterion { font-size: 1.45rem; line-height: 1.2; }
.cmp__side { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1rem; }
.cmp__side svg { margin-top: 3px; }
.cmp__them {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--c-ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--c-line-strong);
}
.cmp__them svg { color: var(--c-ink-faint); }
.cmp__us { font-size: 0.95rem; font-weight: 500; line-height: 1.6; }
.cmp__us svg { color: var(--c-brand); }


/* 12  Methodology ---------------------------------------------------------- */

.phases {
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
}
.phase {
  border-top: 1px solid var(--c-line-strong);
  padding-top: 1.75rem;
  height: 100%;
  transition: border-color 0.5s ease;
}
.phase:hover { border-top-color: var(--c-brand); }
.phase__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.phase__num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--c-line-strong);
  transition: color 0.5s ease;
}
.phase:hover .phase__num { color: var(--c-brand); }
.phase__dur {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.phase h3 { margin-top: 1.5rem; font-size: 1.9rem; line-height: 1.15; }
.phase p { margin-top: 1rem; font-size: 0.94rem; line-height: 1.65; color: var(--c-ink-soft); }
.phase__list {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: 0.625rem;
}
.phase__list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.88rem; color: var(--c-ink-soft); }
.phase__list svg { margin-top: 3px; width: 15px; height: 15px; color: var(--c-brand); }


/* 13  Partnership ---------------------------------------------------------- */

.partner { background-color: var(--c-brand-soft); }
.partner__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding-block: 3rem;
}
.partner__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  flex-shrink: 0;
  border: 1px dashed var(--c-line-strong);
  border-radius: 12px;
  background-color: var(--c-surface);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.partner__row { display: flex; align-items: center; gap: 1.5rem; }
.partner__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.partner__name {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
}
.partner__name span { color: var(--c-ink-faint); }
.partner__body { max-width: 28rem; font-size: 0.95rem; line-height: 1.65; color: var(--c-ink-soft); }


/* 14  Testimonials --------------------------------------------------------- */

.tst__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.tst__arrows { display: flex; gap: 0.625rem; }
.tst__arrows .icon-btn { width: 2.75rem; height: 2.75rem; }
.tst__arrows .icon-btn[disabled] { opacity: 0.35; pointer-events: none; }

.tst__track {
  display: flex;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  padding-inline: max(1.25rem, calc((100vw - 82rem) / 2 + 3.75rem));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tst__track::-webkit-scrollbar { display: none; }

.tst__card {
  flex: 0 0 auto;
  width: 82vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background-color: var(--c-surface);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tst__card:hover {
  transform: translateY(-6px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-lift-hover);
}
.tst__stars { display: flex; gap: 2px; color: var(--c-brand); }
.tst__stars svg { width: 14px; height: 14px; }
.tst__quote { margin-top: 1.5rem; font-size: 1.02rem; line-height: 1.65; }
.tst__foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.tst__name { font-size: 0.92rem; font-weight: 600; }
.tst__role { margin-top: 0.125rem; font-size: 0.82rem; color: var(--c-ink-faint); }
.tst__loc {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brand);
}

/* Progress rule rather than eight dots. */
.tst__progress { margin-top: 2.25rem; height: 1px; background-color: var(--c-line); }
.tst__progress span {
  display: block;
  height: 1px;
  background-color: var(--c-brand);
  transform-origin: left;
  transform: scaleX(0.06);
  transition: transform 0.2s ease-out;
}


/* 15  Page header ---------------------------------------------------------- */

.page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.page-head__grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
.page-head h1 {
  font-size: clamp(2.7rem, 7vw, 5.2rem);
  line-height: 0.98;
}
.page-head h1 em { color: var(--c-brand); }
.page-head__meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-ink-faint);
}


/* 16  Services ------------------------------------------------------------- */

.services { display: grid; gap: 1.5rem; }
.service {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background-color: var(--c-surface);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.service:hover {
  transform: translateY(-6px);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-lift-hover);
}
.service__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--c-brand) 30%, transparent);
  border-radius: 999px;
  background-color: var(--c-brand-soft);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.service__num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}
.service__media { margin-top: 1.5rem; overflow: hidden; border-radius: 12px; }
.service__media > * { transition: transform 0.7s var(--ease); }
.service:hover .service__media > * { transform: scale(1.02); }
.service h2 { margin-top: 1.75rem; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.15; }
.service__lead { margin-top: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--c-brand); }
.service__body { margin-top: 1rem; flex: 1; font-size: 0.94rem; line-height: 1.65; color: var(--c-ink-soft); }
.service__meta {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-ink-faint);
}


/* 17  Tech stack ----------------------------------------------------------- */

.tech { margin-top: 3.5rem; grid-template-columns: 1fr; }
.tech__cell { display: flex; flex-direction: column; padding: 1.75rem; }
.tech__cell h3 { font-size: 1.65rem; line-height: 1.15; }
.tech__cell p { margin-top: 1rem; flex: 1; font-size: 0.94rem; line-height: 1.65; color: var(--c-ink-soft); }
.tech__foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tech__foot svg { width: 18px; height: 18px; color: var(--c-ink-faint); transition: color 0.5s ease; }
.rule-cell:hover .tech__foot svg { color: var(--c-brand); }
.tech__detail { font-size: 0.76rem; font-weight: 500; color: var(--c-ink-faint); }


/* 18  Team ----------------------------------------------------------------- */

.team { display: grid; gap: 2.5rem; }
.person__media { position: relative; overflow: hidden; border-radius: 16px; }
.person__media > .ph { transition: transform 0.7s var(--ease); }
.person:hover .person__media > .ph { transform: scale(1.03); }
.person__handle {
  position: absolute;
  left: 1rem; top: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.person__num {
  position: absolute;
  right: 1rem; top: 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--c-ink-faint);
}
.person__id { position: relative; margin-top: 1.5rem; padding-bottom: 1.25rem; }
.person__id h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.15; }
.person__title {
  margin-top: 0.375rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.person__rule { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background-color: var(--c-line); }
.person__rule span {
  display: block;
  height: 1px;
  background-color: var(--c-brand);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s var(--ease);
}
.person:hover .person__rule span { transform: scaleX(1); }
.person__bio { margin-top: 1.25rem; font-size: 0.94rem; line-height: 1.65; color: var(--c-ink-soft); }
.person__focus { margin-top: 1.5rem; display: grid; gap: 0.5rem; }
.person__focus li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.85rem; color: var(--c-ink-faint); }
.person__focus i {
  width: 4px; height: 4px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--c-brand);
}


/* 19  Contact -------------------------------------------------------------- */

.contact__grid { display: grid; gap: 3.5rem; }
.contact__formwrap { margin-top: 2rem; }

.form {
  padding: 1.5rem;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background-color: var(--c-surface);
}
.form__grid { display: grid; gap: 1.25rem; }
.form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.form input,
.form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background-color: var(--c-bg);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}
.form input::placeholder,
.form textarea::placeholder { color: var(--c-ink-faint); }
.form input:hover,
.form textarea:hover { border-color: var(--c-line-strong); }
.form input:focus,
.form textarea:focus { outline: none; border-color: var(--c-brand); }
.form textarea { resize: vertical; min-height: 8rem; }
.form [aria-invalid="true"] { border-color: color-mix(in oklab, var(--c-brand) 70%, transparent); }

.form__error {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--c-brand);
  min-height: 1.2em;
}
.form__foot {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 1rem;
}
.form__note { font-size: 0.8rem; line-height: 1.5; color: var(--c-ink-faint); }

.form__success {
  padding: 2rem;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background-color: var(--c-surface);
}
.form__success[hidden] { display: none; }
.form__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 999px;
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
  animation: pop 0.55s var(--ease) both;
}
@keyframes pop { from { transform: scale(0.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.form__success h3 { margin-top: 1.5rem; font-size: 2rem; line-height: 1.15; }
.form__success p { margin-top: 0.75rem; max-width: 28rem; font-size: 0.95rem; line-height: 1.65; color: var(--c-ink-soft); }
.form__success .btn { margin-top: 2rem; }

.channels { margin-top: 1.75rem; border-top: 1px solid var(--c-line); }
.channels li { border-bottom: 1px solid var(--c-line); }
.channels__item { display: flex; align-items: flex-start; gap: 1rem; padding-block: 1.5rem; }
.channels__item svg.icon--brand { margin-top: 4px; }
.channels__k {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.channels__v {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  word-break: break-word;
  transition: color 0.3s ease;
}
a.channels__item:hover .channels__v { color: var(--c-brand); }
.channels__note { margin-top: 0.375rem; font-size: 0.83rem; color: var(--c-ink-faint); }
.channels__arrow {
  margin-top: 4px;
  margin-left: auto;
  color: var(--c-ink-faint);
  transition: transform 0.5s var(--ease), color 0.5s ease;
}
a.channels__item:hover .channels__arrow { transform: translate(2px, -2px); color: var(--c-brand); }

/* Map placeholder — drawn street grid. Swap for an iframe, see README. */
.map {
  position: relative;
  isolation: isolate;
  margin-top: 3rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background-color: var(--c-bg-sunken);
}
.map__grid {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-size: 44px 44px;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
}
.map__road-h { position: absolute; inset-inline: 0; top: 38%; height: 6px; background-color: var(--c-line); }
.map__road-v { position: absolute; inset-block: 0; left: 58%; width: 6px; background-color: var(--c-line); }
.map__pin { position: absolute; left: 58%; top: 38%; transform: translate(-50%, -50%); }
.map__pin::before {
  content: "";
  position: absolute;
  inset: -2rem;
  border-radius: 999px;
  background-color: var(--c-brand);
  opacity: 0.15;
  filter: blur(20px);
}
.map__pin i {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  background-color: var(--c-brand);
  color: var(--c-brand-ink);
  box-shadow: var(--shadow-lift);
}
.map__plate {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background-color: var(--c-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.map__plate .k {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.map__plate .a { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 500; line-height: 1.35; }
.map__plate .b { font-size: 0.9rem; line-height: 1.35; color: var(--c-ink-soft); }


/* 20  CTA band ------------------------------------------------------------- */

.cta { text-align: center; }
.cta__inner { max-width: 48rem; margin-inline: auto; }
.cta h2 {
  margin-top: 1.75rem;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 1;
}
.cta p { margin-top: 1.75rem; margin-inline: auto; max-width: 34rem; line-height: 1.65; color: var(--c-ink-soft); }
.cta__btns {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.cta__mail { margin-top: 1.75rem; font-size: 0.82rem; color: var(--c-ink-faint); }
.cta__mail a { color: var(--c-ink-soft); }


/* 21  404 ------------------------------------------------------------------ */

.nf { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; padding-block: 6rem; }
.nf h1 { margin-top: 1.75rem; max-width: 40rem; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.98; }
.nf p { margin-top: 1.5rem; max-width: 28rem; line-height: 1.65; color: var(--c-ink-soft); }
.nf__list { margin-top: 3rem; max-width: 32rem; border-top: 1px solid var(--c-line); }
.nf__list li { border-bottom: 1px solid var(--c-line); }
.nf__list a { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem; }
.nf__list .label { font-family: var(--font-display); font-size: 1.6rem; transition: color 0.3s ease; }
.nf__list a:hover .label { color: var(--c-brand); }
.nf__list svg { color: var(--c-ink-faint); transition: transform 0.5s var(--ease), color 0.5s ease; }
.nf__list a:hover svg { transform: translateX(4px); color: var(--c-brand); }


/* 22  Footer --------------------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--c-line);
  background-color: var(--c-bg-sunken);
}
.footer__grid { display: grid; gap: 3rem; }
.footer__brand p {
  margin-top: 1.25rem;
  max-width: 24rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.footer__brand .btn { margin-top: 1.75rem; }
.footer h2 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.footer__list { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.footer__list a { font-size: 0.92rem; color: var(--c-ink-soft); transition: color 0.3s ease; }
.footer__list a:hover { color: var(--c-ink); }
.footer__contact { margin-top: 1.25rem; display: grid; gap: 1rem; font-size: 0.92rem; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--c-ink-soft); }
.footer__contact svg { margin-top: 3px; }
.footer__contact a { transition: color 0.3s ease; }
.footer__contact a:hover { color: var(--c-ink); }
.footer__bottom {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--c-ink-faint);
}
.footer__bottom span { color: var(--c-ink-soft); }


/* 23  Responsive ----------------------------------------------------------- */

@media (min-width: 640px) {
  .console { padding: 1.5rem; }
  .console__bars { height: 11rem; }
  .tst__card { width: 24rem; padding: 1.75rem; }
  .form { padding: 2.25rem; }
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .form__grid > .form__field--wide { grid-column: 1 / -1; }
  .form__foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .form__foot .btn { width: auto; }
  .form__success { padding: 2.5rem; }
  .stat { padding: 2.5rem 1.75rem; }
  .tech__cell { padding: 2.25rem; }
  .service { padding: 2rem; }
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .partner__inner { padding-block: 3.5rem; }
  .map__plate { right: auto; max-width: 20rem; }
}

@media (min-width: 768px) {
  .stats__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .stats__head p { max-width: 28rem; text-align: right; }
  .split-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .split-head > p { max-width: 22rem; font-size: 0.95rem; line-height: 1.65; color: var(--c-ink-soft); }
  .tst__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }

  .cmp__labels {
    display: grid;
    grid-template-columns: 3fr 4fr 5fr;
    gap: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
  }
  .cmp__labels p {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
  }
  .cmp__labels p:last-child { color: var(--c-brand); }
  .cmp__row { display: grid; grid-template-columns: 3fr 4fr 5fr; gap: 1.5rem; align-items: start; }
  .cmp__criterion { font-size: 1.35rem; }
  .cmp__side { margin-top: 0; }
  .cmp__side--us { border-left: 1px solid var(--c-line); padding-left: 1.5rem; }

  .phases { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .phase--2 { margin-top: 3.5rem; }
  .phase--3 { margin-top: 7rem; }

  .tech { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

  .partner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .nav__burger { display: none; }
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: 3rem; }
  .page-head__grid { grid-template-columns: 7fr 5fr; gap: 2rem; }
  .page-head__aside { padding-top: 0.75rem; }
  .contact__grid { grid-template-columns: 7fr 5fr; gap: 3rem; }

  .services { grid-template-columns: repeat(12, 1fr); }
  .service--7 { grid-column: span 7; }
  .service--5 { grid-column: span 5; }

  .footer__grid { grid-template-columns: 5fr 2fr 2fr 3fr; gap: 2rem; }
}

/* Below the desktop breakpoint the inline nav is replaced by the drawer. */
@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .chip { display: none; }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .nav__cta { display: none; }
}


/* Motion preferences ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .tst__track { scroll-behavior: auto; }
}


/* ==========================================================================
   24  ENHANCEMENT LAYER
   Appended after the base so these rules win where they overlap.

   24.1  Display typography
   24.2  Cinematic glow / aurora system
   24.3  Hero AI visual
   24.4  Trust marquee
   24.5  Interactive polish (tilt, shine, magnetic)
   24.6  Methodology flow diagram
   24.7  Partnership section
   24.8  Featured team member
   24.9  Section seams
   24.10 Motion preferences
   ========================================================================== */

/* 24.1  Display typography ------------------------------------------------- */
/* The wide face, reserved for headline moments only. */

.display,
.hero h1,
.page-head h1,
.section-head h2,
.cta h2,
.nf h1,
.phase__num,
.partner__name,
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.045em;
}

/* Unbounded runs wide — pull the headline scale back so lines still break well. */
.hero h1 { font-size: clamp(2.2rem, 5.1vw, 4.15rem); line-height: 1.02; }
.page-head h1 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); line-height: 1.04; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.08; }
.cta h2 { font-size: clamp(1.85rem, 4vw, 3.1rem); line-height: 1.06; }
.nf h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
.stat__num { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.05em; }
.phase__num { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; }
.partner__name { font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.04em; }

/* Italic accents came from the old serif; the display face has no true italic,
   so emphasis is carried by colour and weight instead. */
.hero h1 em,
.page-head h1 em,
.section-head h2 em,
.cta h2 em {
  font-style: normal;
  font-weight: 800;
}
.section-head h2 em { color: var(--c-ink-faint); }

/* Everything previously on the serif drops to Sora so long strings behave. */
.console__v, .chip__v, .channels__v, .drawer__list .label,
.nf__list .label, .service__num, .person__num, .map__plate .a,
.service h2, .person__id h2, .phase h3, .tech__cell h3, .form__success h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.service__num, .person__num { font-weight: 600; }
.channels__v { font-size: 1.15rem; }
.drawer__list .label { font-size: 1.7rem; }
.nf__list .label { font-size: 1.35rem; }

.eyebrow { letter-spacing: 0.2em; font-weight: 700; }
.btn { font-weight: 600; letter-spacing: -0.01em; }


/* 24.2  Cinematic glow / aurora system ------------------------------------- */
/* The old .glow was one flat blurred circle. This layers three offset colour
   fields that drift slowly, then lays grain over the top so the gradient
   never bands. Sits behind content, never interactive. */

.glow {
  opacity: calc(var(--glow-opacity) * 1.15);
  filter: blur(70px) saturate(1.35);
  background:
    radial-gradient(circle at 32% 38%, var(--c-brand) 0%, transparent 58%),
    radial-gradient(circle at 68% 62%, color-mix(in oklab, var(--c-brand) 70%, #7c4dff) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--c-brand) 45%, #00d6c2) 0%, transparent 68%);
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(0.96); }
}

/* NOTE: there was a per-section grain layer here (.band::before) on top of the
   global fixed .grain overlay. Two grain layers is one too many — in the dark
   theme the second one blends at `overlay` and washed every card surface out
   to mid-grey, which made the dark theme look broken. The global overlay
   already supplies the texture, so this is deliberately gone. Do not
   reintroduce a second blended layer. */
/* Lift only the content wrapper above the grain. Must NOT be `.band > *` —
   that would override position:absolute on the .glow layers and drop them
   into normal flow as huge blocks. */
.band > .shell,
.band > .marquee,
.footer > .shell { position: relative; z-index: 1; }

/* A hairline of light along a section edge — cheap depth, no extra elements. */
.band--top { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--c-brand) 22%, transparent); }

/* Glass, refined: a top highlight makes the surface read as lit rather than blurred. */
.glass { position: relative; }
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, color-mix(in oklab, #fff 14%, transparent) 0%, transparent 42%);
}


/* 24.3  Hero AI visual ----------------------------------------------------- */
/* Orbital core: a pulsing centre, three counter-rotating rings with nodes, a
   particle field on canvas behind, and a slow scanning sweep. Pure CSS/SVG
   apart from the particles. */

.aivis {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 30rem;
  margin-inline: auto;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.aivis__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
}

.aivis__rings {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.aivis__ring { fill: none; stroke: var(--c-line-strong); stroke-width: 0.6; opacity: 0.85; }
.aivis__ring--lit { stroke: var(--c-brand); opacity: 0.55; }

.aivis__spin { transform-origin: 100px 100px; animation: spin 34s linear infinite; }
.aivis__spin--rev { animation-duration: 46s; animation-direction: reverse; }
.aivis__spin--slow { animation-duration: 62s; }
@keyframes spin { to { transform: rotate(360deg); } }

.aivis__node { fill: var(--c-brand); }
.aivis__node--soft { fill: var(--c-ink-faint); }

/* Arc that travels the ring, drawn with a dash gap. */
.aivis__trace {
  fill: none;
  stroke: var(--c-brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 40 460;
  animation: trace 6s var(--ease-soft) infinite;
}
@keyframes trace { to { stroke-dashoffset: -500; } }

/* Core */
.aivis__core {
  position: relative;
  z-index: 2;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 30%, color-mix(in oklab, #fff 55%, var(--c-brand)) 0%, var(--c-brand) 42%, color-mix(in oklab, var(--c-brand) 55%, #000) 100%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--c-brand) 45%, transparent),
    0 0 40px -6px var(--c-brand),
    0 0 110px -20px var(--c-brand),
    inset 0 -8px 22px -10px #000;
  animation: corebreathe 5.5s ease-in-out infinite;
}
@keyframes corebreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.aivis__core svg { width: 42%; height: 42%; color: var(--c-brand-ink); }

/* Expanding halo pulses */
.aivis__pulse {
  position: absolute;
  z-index: 1;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid var(--c-brand);
  opacity: 0;
  animation: halo 4.5s var(--ease-soft) infinite;
}
.aivis__pulse:nth-of-type(2) { animation-delay: 1.5s; }
.aivis__pulse:nth-of-type(3) { animation-delay: 3s; }
@keyframes halo {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Floating data chips around the core */
.aivis__chip {
  position: absolute;
  z-index: 3;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-glass);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: var(--shadow-lift);
  white-space: nowrap;
}
.aivis__chip .k {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.aivis__chip .v { margin-top: 0.15rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.aivis__chip .v.brand { color: var(--c-brand); }

.aivis__chip--tl { left: -4%;  top: 14%;  animation: bobA 7s ease-in-out infinite; }
.aivis__chip--br { right: -4%; bottom: 16%; animation: bobB 8.5s ease-in-out infinite; }
.aivis__chip--bl { left: 2%;   bottom: 6%;  animation: bobB 9.5s ease-in-out 1.2s infinite; }
@keyframes bobA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bobB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(11px); } }

@media (max-width: 640px) {
  .aivis { max-width: 21rem; }
  .aivis__chip { padding: 0.45rem 0.6rem; }
  .aivis__chip .v { font-size: 0.85rem; }
  .aivis__chip--bl { display: none; }
}


/* 24.4  Trust marquee ------------------------------------------------------ */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--c-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}
.marquee__item svg { width: 14px; height: 14px; color: var(--c-brand); }


/* 24.5  Interactive polish ------------------------------------------------- */

/* Sheen that crosses a primary button on hover. */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, #fff 42%, transparent), transparent);
  transition: transform 0.75s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%) skewX(-18deg); }

.btn--ghost { position: relative; overflow: hidden; }
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-brand);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.btn--ghost:hover::before { opacity: 0.08; }

/* Pointer-tracked highlight on cards. --mx/--my are set in main.js. */
.service, .tst__card, .rule-cell, .person, .partner-card {
  position: relative;
}
.service::before, .tst__card::before, .partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--c-brand) 16%, transparent),
    transparent 62%);
}
.service:hover::before, .tst__card:hover::before, .partner-card:hover::before { opacity: 1; }

/* Slight 3-D tilt, driven by --rx/--ry from main.js. */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform 0.5s var(--ease);
  transform-style: preserve-3d;
}

/* Icon nudge on link hover */
.channels__item:hover .channels__arrow,
.btn:hover .icon { transition: transform 0.4s var(--ease); }


/* 24.6  Methodology flow diagram ------------------------------------------- */
/* A connector that draws itself across the three phases as they scroll in. */

/* Built from positioned elements rather than SVG: a viewBox stretched to the
   container width would squash the node circles into ellipses. */
.flow {
  position: relative;
  height: 14px;
  margin: 3.5rem 0 0.5rem;
  display: none;
}
.flow__rail {
  position: absolute;
  inset-inline: 0;
  top: 6px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--c-line-strong) 0 5px, transparent 5px 13px);
}
.flow__fill {
  position: absolute;
  inset-inline: 0;
  top: 6px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--c-brand), color-mix(in oklab, var(--c-brand) 30%, transparent));
  transition: transform 2.4s var(--ease-soft);
}
.flow.is-visible .flow__fill { transform: scaleX(1); }

.flow__dot {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 999px;
  background: var(--c-bg);
  border: 2px solid var(--c-line-strong);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s var(--ease);
}
.flow.is-visible .flow__dot {
  border-color: var(--c-brand);
  box-shadow: 0 0 16px -2px var(--c-brand);
  transform: scale(1.1);
}
/* Children are rail, fill, then the three dots. */
.flow.is-visible .flow__dot:nth-child(4) { transition-delay: 0.85s; }
.flow.is-visible .flow__dot:nth-child(5) { transition-delay: 1.7s; }

@media (min-width: 768px) { .flow { display: block; } }

/* Phase cards gain a lit top edge on hover. */
.phase { position: relative; }
.phase::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--c-brand), transparent);
  transition: transform 0.7s var(--ease);
}
.phase:hover::after { transform: scaleX(1); }


/* 24.7  Partnership section ------------------------------------------------ */

.partners { position: relative; }
.partners__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  background: var(--c-surface);
  overflow: hidden;
  transition: transform 0.55s var(--ease), border-color 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.partner-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--c-brand) 45%, var(--c-line));
  box-shadow: var(--shadow-lift-hover);
}

.partner-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.partner-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c-brand) 35%, transparent);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.partner-card__badge svg { width: 12px; height: 12px; }

/* Logo plate. Fixed height so two very different marks sit on one baseline. */
.partner-card__plate {
  display: grid;
  place-items: center;
  height: 12rem;
  border-radius: 14px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-sunken);
  overflow: hidden;
  position: relative;
}
/* Explicit box + object-fit + padding, NOT percentage max-height: a percentage
   max-height on a centred grid item does not resolve against the plate, which
   sized these images to 371x576 inside a 136px box and clipped them. */
.partner-card__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 1.4rem;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.partner-card:hover .partner-card__plate img { transform: scale(1.06); }

/* The Mega mark ships on its own red tile, so the plate matches that red and
   the artwork sits flush — no visible seam between tile and plate. */
.partner-card__plate--mega { background: #dd2029; border-color: #dd2029; }
.partner-card__plate--mega img { padding: 0; }

.partner-card__plate--tiktok img { padding: 0.9rem; }
.partner-card__plate--tiktok {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--c-brand) 22%, transparent), transparent 65%),
    var(--c-bg-sunken);
}

.partner-card h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.partner-card p { margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.6; color: var(--c-ink-soft); }
.partner-card__meta {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--c-ink-faint);
}

/* The connective tissue: a Zestify mark between the two partner cards. */
.partner-link {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem 0;
}
.partner-link__mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--c-brand);
  color: var(--c-brand-ink);
  box-shadow: 0 0 34px -6px var(--c-brand);
  animation: corebreathe 5s ease-in-out infinite;
}
.partner-link__mark svg { width: 60%; height: 60%; }
.partner-link p {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* Trust indicator row under the partner cards. */
.trust-row {
  margin-top: 2.5rem;
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
}
.trust-row__item {
  background: var(--c-bg);
  padding: 1.35rem 1.25rem;
  transition: background-color 0.4s ease;
}
.trust-row__item:hover { background: var(--c-surface); }
.trust-row__k {
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-brand);
}
.trust-row__v { margin-top: 0.3rem; font-size: 0.8rem; color: var(--c-ink-faint); }

@media (min-width: 768px) {
  .partners__grid { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  .partner-link { padding: 0 0.5rem; }
  .trust-row { grid-template-columns: repeat(4, 1fr); }
}


/* 24.8  Featured team member ----------------------------------------------- */
/* Hamza is the lead profile: wider column, taller portrait, lit frame. */

.person--featured .person__media { box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-brand) 35%, transparent); }
.person--featured .person__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 45%, color-mix(in oklab, var(--c-brand) 26%, transparent) 100%);
}
.person--featured .ph { aspect-ratio: 4 / 4.4; }
.person--featured .person__id h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.person--featured .person__handle {
  background: var(--c-brand);
  box-shadow: 0 0 26px -4px var(--c-brand);
}
.person--featured .person__bio { font-size: 1rem; }

.person__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c-brand) 40%, transparent);
  color: var(--c-brand);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.person__lead svg { width: 11px; height: 11px; }

@media (min-width: 768px) {
  /* 5 / 3.5 / 3.5 — the lead profile reads first without unbalancing the row. */
  .team { grid-template-columns: 5fr 3.5fr 3.5fr; align-items: start; }
  .person--featured { margin-top: -1.5rem; }
}


/* 24.9  Section seams ------------------------------------------------------ */
/* A soft gradient at the top of a band so sections melt into each other
   instead of butting up against a hard line. */

.band--seam::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 9rem;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklab, var(--c-brand) 7%, transparent), transparent);
}


/* 24.10  Motion preferences ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .glow,
  .aivis__spin,
  .aivis__core,
  .aivis__pulse,
  .aivis__trace,
  .aivis__chip,
  .marquee__track,
  .partner-link__mark { animation: none !important; }

  .aivis__pulse { opacity: 0.25; }
  .flow__prog { stroke-dashoffset: 0; }
  .flow__dot { opacity: 1; }
  .tilt { transform: none !important; }
}


/* 24.11  Late fixes -------------------------------------------------------- */

/* Reveal wrappers are the grid items, so the cards inside them need to stretch
   or the two partner cards end up different heights. */
.partners__grid > .reveal { display: flex; }
.partners__grid > .reveal > .partner-card { flex: 1; }

/* The hero visual tilts toward the pointer. Shallow on purpose. */
.aivis {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .aivis { transform: none !important; } }


/* ==========================================================================
   25  LOGO VARIANTS + VERSUS SECTION
   ========================================================================== */

/* 25.1  Real logo mark ----------------------------------------------------- */
/* The supplied artwork is a solid disc, so it cannot recolour with the theme.
   Two cut-outs ship instead and CSS reveals the legible one. */

.logo__mark { position: relative; display: inline-block; }
.logo__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo__img--d { display: none; }

html[data-theme="dark"] .logo__img--l { display: none; }
html[data-theme="dark"] .logo__img--d { display: block; }

/* The partnership connector uses the same mark, so it drops the drawn glyph
   and the brand fill that went with it. */
.partner-link__mark {
  background: none;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}
.partner-link__mark .logo__img { width: 100%; height: 100%; }


/* 25.2  Versus board ------------------------------------------------------- */

.versus { margin-top: 3.25rem; }

/* Column headers. Hidden on mobile, where each row carries its own labels. */
.versus__head {
  display: none;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1rem;
}
.versus__col {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.versus__col--them { text-align: right; color: var(--c-ink-faint); }
.versus__col--us { text-align: left; color: var(--c-brand); }

.versus__vs {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-brand) 8%, transparent);
  animation: vsPulse 4.5s ease-in-out infinite;
}
@keyframes vsPulse {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-brand) 8%, transparent); }
  50%      { box-shadow: 0 0 0 12px color-mix(in oklab, var(--c-brand) 3%, transparent); }
}

.versus__rows { list-style: none; display: grid; gap: 0.75rem; }

.vrow {
  display: grid;
  gap: 0.75rem;
  border-radius: 16px;
  transition: transform 0.5s var(--ease);
}

.vrow__side {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  transition: border-color 0.45s var(--ease), background-color 0.45s var(--ease),
              opacity 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.vrow__side p { font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* Them: recessed, desaturated, never quite in focus. */
.vrow__side--them {
  background: var(--c-bg-sunken);
  opacity: 0.82;
}
.vrow__side--them p { color: var(--c-ink-faint); }

/* Us: lifted, brand-lit, the side the eye should land on. */
.vrow__side--us {
  background: var(--c-surface);
  border-color: color-mix(in oklab, var(--c-brand) 28%, var(--c-line));
}
.vrow__side--us p { color: var(--c-ink); font-weight: 500; }

.vrow__ico {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  border-radius: 999px;
  transition: transform 0.45s var(--ease);
}
.vrow__ico svg { width: 13px; height: 13px; }
.vrow__side--them .vrow__ico { background: var(--c-line); color: var(--c-ink-faint); }
.vrow__side--us .vrow__ico { background: var(--c-brand); color: var(--c-brand-ink); }

/* Middle column: the criterion, sitting on the spine. */
.vrow__mid { display: grid; place-items: center; }
.vrow__label {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  white-space: nowrap;
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease);
}

/* Hovering a row links both halves — the whole comparison responds at once. */
.vrow:hover .vrow__side--us {
  border-color: var(--c-brand);
  box-shadow: 0 0 34px -14px var(--c-brand);
  transform: translateY(-2px);
}
.vrow:hover .vrow__side--them { opacity: 0.55; }
.vrow:hover .vrow__side--us .vrow__ico { transform: scale(1.12); }
.vrow:hover .vrow__label { border-color: var(--c-brand); color: var(--c-brand); }

/* Mobile: stack, and label each half so the comparison still reads. */
.vrow__tag {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vrow__side--them .vrow__tag { color: var(--c-ink-faint); }
.vrow__side--us .vrow__tag { color: var(--c-brand); }

@media (min-width: 860px) {
  .versus { position: relative; }

  /* Continuous spine running behind the criterion pills. */
  .versus::before {
    content: "";
    position: absolute;
    top: 3.5rem;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--c-line), transparent);
  }

  .versus__head { display: grid; grid-template-columns: 1fr auto 1fr; }
  .versus__head .versus__vs { justify-self: center; }

  .vrow {
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 1.25rem;
  }
  .vrow__side--them { text-align: right; flex-direction: row-reverse; }
  .vrow__mid { position: relative; z-index: 1; min-width: 9.5rem; }
  .vrow__tag { display: none; }
}

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

/* Three-up variant of the reused trust row (comparison proof strip). */
@media (min-width: 768px) {
  .trust-row--3 { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   26  HERO: AUDIENCE TARGETING FIELD  (replaces the orbital core)
   ========================================================================== */

.afield {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease);
}

/* The framed viewport. Chips sit outside it, so the clipping lives here. */
.afield__stage {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid var(--c-line);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, color-mix(in oklab, var(--c-brand) 13%, transparent), transparent 62%),
    var(--c-bg-sunken);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 12%, transparent), var(--shadow-lift);
}

.afield__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Corner brackets — the targeting-frame cue. */
.afield__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid color-mix(in oklab, var(--c-brand) 55%, transparent);
  border-radius: 3px;
}
.afield__corner:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.afield__corner:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.afield__corner:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.afield__corner:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* Readout strip along the bottom of the frame. */
.afield__readout {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-glass);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
.afield__stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.afield__k {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}
.afield__v { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; }
.afield__v.brand { color: var(--c-brand); }

.afield__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}
.afield__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--c-brand);
  animation: blip 2.2s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Floating metric chips */
.afield__chip {
  position: absolute;
  z-index: 3;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--shadow-lift);
  white-space: nowrap;
}
.afield__chip .k {
  font-size: 0.53rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-ink-faint);
}
.afield__chip .v { margin-top: 0.15rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.afield__chip .v.brand { color: var(--c-brand); }

.afield__chip--a { top: 8%;  left: -5%;  animation: bobA 7s ease-in-out infinite; }
.afield__chip--b { top: 34%; right: -6%; animation: bobB 8.5s ease-in-out infinite; }

@media (max-width: 640px) {
  .afield { max-width: 21rem; }
  .afield__chip { padding: 0.45rem 0.6rem; }
  .afield__chip .v { font-size: 0.85rem; }
  .afield__chip--a { left: -2%; }
  .afield__chip--b { right: -2%; }
  .afield__readout { padding: 0.55rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .afield { transform: none !important; }
  .afield__chip, .afield__dot { animation: none !important; }
}


/* ==========================================================================
   27  ALLIANCE — the three-way partnership, made unmissable
   ========================================================================== */

.alliance {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  margin-top: 3rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in oklab, var(--c-brand) 10%, transparent), transparent 60%),
    var(--c-surface);
  position: relative;
  overflow: hidden;
}

.alliance__node { display: grid; justify-items: center; gap: 0.7rem; text-align: center; }

.alliance__plate {
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 12vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 20px;
  border: 1px solid var(--c-line);
  background: var(--c-bg-sunken);
  overflow: hidden;
  position: relative;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.55s var(--ease);
}
.alliance__plate img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0.9rem;
}
.alliance__plate--mega { background: #dd2029; border-color: #dd2029; }
.alliance__plate--mega img { padding: 0; }

.alliance__node:hover .alliance__plate {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--c-brand) 50%, var(--c-line));
  box-shadow: 0 18px 40px -18px var(--c-brand);
}

/* Zestify sits at the centre, larger and lit — it is the connective tissue. */
.alliance__node--core .alliance__plate {
  width: clamp(6.5rem, 15vw, 9.5rem);
  border-color: color-mix(in oklab, var(--c-brand) 45%, transparent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-brand) 9%, transparent),
              0 0 50px -12px var(--c-brand);
  animation: coreGlow 5s ease-in-out infinite;
}
@keyframes coreGlow {
  0%, 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--c-brand) 9%, transparent),
                         0 0 50px -12px var(--c-brand); }
  50%      { box-shadow: 0 0 0 12px color-mix(in oklab, var(--c-brand) 5%, transparent),
                         0 0 70px -10px var(--c-brand); }
}

.alliance__name { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.02em; }
.alliance__node--core .alliance__name { font-size: 1.1rem; }
.alliance__role {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.alliance__node--core .alliance__role { color: var(--c-brand); }

/* Connector with a pulse travelling along it. */
.alliance__link {
  position: relative;
  height: 2px;
  min-width: 3rem;
  overflow: hidden;
  background-image: repeating-linear-gradient(90deg, var(--c-line-strong) 0 4px, transparent 4px 10px);
}
.alliance__beam {
  position: absolute;
  inset-block: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--c-brand), transparent);
  animation: beam 2.8s linear infinite;
}
.alliance__link--rev .alliance__beam { animation-direction: reverse; }
@keyframes beam { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

@media (min-width: 820px) {
  .alliance { grid-template-columns: 1fr auto 1.2fr auto 1fr; gap: 1.75rem; }
}
@media (max-width: 819px) {
  /* Vertical connectors when the row stacks. */
  .alliance__link { height: 2.5rem; width: 2px; min-width: 0; justify-self: center;
    background-image: repeating-linear-gradient(180deg, var(--c-line-strong) 0 4px, transparent 4px 10px); }
  .alliance__beam { inset-inline: 0; inset-block: auto; width: auto; height: 45%;
    background: linear-gradient(180deg, transparent, var(--c-brand), transparent);
    animation-name: beamV; }
  @keyframes beamV { from { transform: translateY(-120%); } to { transform: translateY(320%); } }
}

/* Hero partner chips — credibility above the fold. */
.hero__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 2rem; }
.hero__partners-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-ink-faint); margin-right: 0.2rem;
}
.hero__pchip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 0.76rem; font-weight: 600;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.hero__pchip:hover { border-color: color-mix(in oklab, var(--c-brand) 50%, var(--c-line)); transform: translateY(-2px); }
.hero__pchip img { width: 22px; height: 22px; border-radius: 999px; object-fit: contain; }
.hero__pchip img.on-red { background: #dd2029; padding: 2px; }

@media (prefers-reduced-motion: reduce) {
  .alliance__beam, .alliance__node--core .alliance__plate { animation: none !important; }
}


/* Team photos: keep faces in frame when the portrait crop bites. */
.person .ph img, .ph--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.ph--photo {
  position: relative;
  border-style: solid;
  background: var(--c-bg-sunken);
  overflow: hidden;
}
.ph--photo .ph__note,
.ph--photo .icon { display: none; }

/* The TikTok badge artwork carries its own generous margin, so plate padding
   doubles up and shrinks it. Targeted by filename — no markup change needed. */
.alliance__plate img[src*="tiktok"] { padding: 0.3rem; }
.partner-card__plate img[src*="tiktok"] { padding: 0.5rem; }


/* ==========================================================================
   28  SERVICE POSTERS
   The six posters are finished artwork at three different aspect ratios
   (0.667, 0.75, 0.80). Cropping them to a common ratio would cut off either
   the headline or the stat cards, so they are mounted on a plate instead:
   one shared 3:4 box, object-fit:contain, plate colour sampled from the
   artwork itself (#F4F5F9) so the letterbox is invisible.
   ========================================================================== */

/* Uniform two-up. The alternating 7/5 spans suited landscape placeholders;
   with portrait posters they made one column absurdly tall. */
.services { grid-template-columns: 1fr; }
.services > * { grid-column: auto !important; }

@media (min-width: 900px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}

.service__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  /* Sampled from the posters' own background — keeps the mount seamless in
     both themes, because the artwork itself is light. */
  background: #F4F5F9;
  border: 1px solid var(--c-line);
}

.service__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.7s var(--ease);
}
.service:hover .service__media img { transform: scale(1.02); }


/* ==========================================================================
   29  TEAM SIZING + OLIVER PLATE
   ========================================================================== */

/* Hamza dominates harder: half the row, the other two a quarter each. */
@media (min-width: 768px) {
  .team { grid-template-columns: 6fr 3fr 3fr; }
  /* Drop the two supporting profiles so the lead sits proud of the row. */
  .person:not(.person--featured) { margin-top: 2.25rem; }
}

/* Oliver's shot is lit hard in orange and reads heavy next to the other two.
   A soft white gradient inside the frame lifts the lower half and blends it
   into the light page. Applied to his card only — remove the modifier from
   gen.py to drop it. */
.person__media--wash .ph--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%,
                             rgba(255, 255, 255, 0.45) 26%,
                             rgba(255, 255, 255, 0.08) 52%,
                             transparent 72%),
    radial-gradient(120% 80% at 50% 100%, rgba(255, 255, 255, 0.55), transparent 60%);
}

/* On the dark theme a white wash would glare, so it is softened right down. */
html[data-theme="dark"] .person__media--wash .ph--photo::after {
  background:
    linear-gradient(to top, rgba(255, 255, 255, 0.30) 0%,
                             rgba(255, 255, 255, 0.10) 34%,
                             transparent 66%);
}