:root {
  --color-purple-stone: #663087;
  --color-purple-stone-bright: #7527ad;
  --color-purple-stone-deep: #4a1166;
  --color-green-spark: #adebb3;
  --color-pure-white: #ffffff;
  --color-gem-white: #faf7fd;
  --color-ink: #111111;
  --color-muted: #5c5c5c;
  --color-rule: #dadada;
  --color-surface: #f6f4f9;
  --color-night: #0b0b0f;
  --color-surface-dark: #14121a;
  --bg-page: var(--color-night);
  --bg-surface: var(--color-surface-dark);
  --bg-elevated: #1a1820;
  --text-primary: var(--color-gem-white);
  --text-secondary: rgba(250, 247, 253, 0.72);
  --accent: var(--color-purple-stone-bright);
  --accent-hover: #9b5bc9;
  --rule: rgba(250, 247, 253, 0.13);
  --focus-ring: var(--color-green-spark);
  --color-error: #ff9b8a;
  /* One typeface across the whole site: Inter, the primary face named in the
     brand guide. The four role variables are kept so existing rules resolve
     unchanged, but they all point at the same stack — there is no second font.
     --font-serif is a legacy name; it is Inter like everything else. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.24);
  --shadow-glow: 0 0 48px rgba(117, 39, 173, 0.42);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg-page: var(--color-pure-white);
  --bg-surface: var(--color-gem-white);
  --bg-elevated: var(--color-surface);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-muted);
  --accent: var(--color-purple-stone);
  --accent-hover: var(--color-purple-stone-bright);
  --rule: var(--color-rule);
  --focus-ring: var(--color-purple-stone);
  --color-error: #b3261e;
  --shadow-hover: 0 16px 42px rgba(17, 17, 17, 0.11);
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

/* Lenis momentum smooth-scroll (falls back to native CSS smooth if it doesn't load) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(117, 39, 173, 0.22), transparent 32rem),
    var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

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

a {
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-green-spark);
  color: var(--color-ink);
  transform: translateY(-140%);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.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;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 16px clamp(16px, 4vw, 40px);
  pointer-events: none;
}

.nav-shell {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1180px, 100%);
  padding: 9px 12px 9px 24px;
  border: 1px solid rgba(17, 15, 26, 0.08);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 15, 26, 0.05), 0 18px 44px -20px rgba(17, 15, 26, 0.28);
  transition: box-shadow 240ms var(--ease-out);
}

.site-header.is-scrolled .nav-shell {
  box-shadow: 0 1px 2px rgba(17, 15, 26, 0.06), 0 24px 60px -22px rgba(17, 15, 26, 0.4);
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
}

.brand img {
  width: 170px;
  height: auto;
}

.nav-primary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

.nav-item {
  position: static;
}

.nav-trigger,
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #45414f;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}

.nav-trigger:hover,
.nav-link:hover,
.nav-item:hover .nav-trigger,
.nav-item.is-open .nav-trigger,
.nav-item:focus-within .nav-trigger {
  background: rgba(17, 15, 26, 0.05);
  color: #14121a;
}

/* Invisible hover bridge across the gap between a chip and its mega panel,
   so the menu stays open while the cursor travels down into it. */
.nav-item:hover .nav-trigger::after,
.nav-item:focus-within .nav-trigger::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-caret {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  transition: transform 200ms var(--ease-out);
}

.nav-item:hover .nav-caret,
.nav-item.is-open .nav-caret,
.nav-item:focus-within .nav-caret {
  transform: rotate(180deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icon-button,
.language-toggle,
.menu-button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #45414f;
  cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.icon-button svg,
.theme-ico {
  width: 18px;
  height: 18px;
}

.icon-button:hover,
.menu-button:hover {
  background: rgba(17, 15, 26, 0.05);
  color: #14121a;
}

.theme-ico {
  grid-area: 1 / 1;
}

:root[data-theme="dark"] .theme-sun,
:root[data-theme="light"] .theme-moon {
  display: none;
}

/* Segmented theme switch (Light / Dark / System) — lives in the footer */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.theme-seg {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.theme-seg svg {
  width: 16px;
  height: 16px;
}

.theme-seg:hover {
  color: #ffffff;
}

.theme-seg.is-active {
  background: #ffffff;
  color: #6a0dad;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Footer controls row: copyright + theme switch + language dropdown */
.fp-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.fp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fp-lang {
  position: relative;
}

.fp-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

.fp-lang-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.fp-lang-caret {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 220ms var(--ease-out);
}

.fp-lang.is-open .fp-lang-caret {
  transform: rotate(180deg);
}

.fp-lang-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #1b1226;
  box-shadow: 0 20px 46px -18px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
  z-index: 6;
}

.fp-lang.is-open .fp-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fp-lang-opt {
  padding: 9px 16px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}

.fp-lang-opt:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.fp-lang-opt[aria-selected="true"] {
  color: #c8a6ec;
}

/* Smooth cross-fade of the whole page when switching theme modes */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-out);
}

/* Fallback colour transition (browsers without View Transitions) */
.theme-anim,
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after {
  transition:
    background-color 400ms var(--ease-out),
    color 400ms var(--ease-out),
    border-color 400ms var(--ease-out),
    fill 400ms var(--ease-out),
    box-shadow 400ms var(--ease-out) !important;
}

.icon-button:hover,
.language-toggle:hover,
.menu-button:hover {
  background: rgba(17, 15, 26, 0.05);
  color: #14121a;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}

[data-lang-fr] {
  color: #a29daf;
}

[data-lang-en].is-active,
[data-lang-fr].is-active {
  color: #14121a;
}

[data-lang-en]:not(.is-active),
[data-lang-fr]:not(.is-active) {
  color: #a29daf;
}

.nav-login {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(17, 15, 26, 0.14);
  border-radius: 10px;
  background: #ffffff;
  color: #14121a;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.nav-login:hover {
  background: rgba(17, 15, 26, 0.04);
  border-color: rgba(17, 15, 26, 0.22);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: #6a0dad;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(106, 13, 173, 0.3);
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.nav-cta:hover {
  background: #7b1fc4;
  transform: translateY(-1px);
}

.nav-cta-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #14121a;
  color: #ffffff;
  transition: transform 180ms var(--ease-out);
}

.nav-cta-badge svg {
  width: 15px;
  height: 15px;
}

.nav-cta:hover .nav-cta-badge {
  transform: rotate(45deg);
}

.menu-button {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #6a0dad;
  color: var(--color-pure-white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-decoration: none;
  backdrop-filter: blur(18px) saturate(1.55);
  box-shadow: none;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
  background: #8b5cf6;
  box-shadow: none;
}

.btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.34), transparent 38%),
    radial-gradient(circle at 80% 100%, rgba(173, 235, 179, 0.18), transparent 34%);
  opacity: 0.72;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.btn:hover::before {
  opacity: 1;
  transform: scale(1.02);
}

.btn span {
  transition: transform 200ms var(--ease-out);
}

.btn:hover span {
  transform: translateX(4px);
}

.btn-small {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b5cf6;
  font-size: 14px;
  box-shadow: none;
}

.btn-small::before {
  display: none;
}

.btn.ghost,
.btn.secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: color-mix(in srgb, currentColor 42%, transparent);
  box-shadow: none;
}

.btn.ghost:hover,
.btn.secondary:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.container,
.container-wide,
.container-narrow {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.container-wide {
  width: min(100% - 48px, 1440px);
}

.container-narrow {
  width: min(100% - 48px, 760px);
}

.section {
  padding-block: clamp(88px, 10vw, 144px);
}

.section-tight {
  padding-block: clamp(60px, 8vw, 104px);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker {
  color: var(--color-green-spark);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* Display headings follow the brand guide's H1 spec: Bold, negative tracking.
   Sizes come down ~13% from the old serif values because Inter carries a much
   larger x-height and wider set width — matched point sizes would read bigger
   and overflow the measures these headlines were balanced against. */
.hero-title,
.display,
.page-title {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.hero-title {
  margin-bottom: 24px;
  font-size: 4.7rem;
  max-width: 820px;
}

.page-title {
  margin-bottom: 24px;
  font-size: 5.5rem;
}

.display {
  margin-bottom: 22px;
  font-size: 3.9rem;
}

.lead {
  max-width: 66ch;
  color: var(--text-secondary);
  font-size: 1.35rem;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  display: grid;
  align-items: center;
  padding-top: 94px;
}

.mck-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
  padding: 112px 0 64px clamp(24px, 7vw, 112px);
  background: linear-gradient(135deg, #1a0d2e, #2d1b4e);
}

.mck-hero-copy {
  position: relative;
  z-index: 2;
}

.mck-hero .hero-title {
  max-width: 760px;
  margin-bottom: 28px;
  color: var(--color-pure-white);
  font-size: 5.4rem;
  font-weight: 400;
  line-height: 1.02;
}

.mck-hero .eyebrow {
  color: #c4b9a8;
}

.hero-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 560px) auto;
  gap: 30px;
  align-items: center;
}

.hero-intro-row p {
  margin: 0;
  color: #a99fc4;
  font-size: 1.18rem;
  line-height: 1.55;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  background: #6a0dad;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(106, 13, 173, 0.35);
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.hero-cta:hover {
  background: #7b1fc4;
  transform: translateY(-1px);
}

.hero-cta-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #14121a;
  color: #ffffff;
  transition: transform 180ms var(--ease-out);
}

.hero-cta-badge svg {
  width: 18px;
  height: 18px;
}

.hero-cta:hover .hero-cta-badge {
  transform: rotate(45deg);
}

.air-cta {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 50%;
  background: #8b5cf6;
  color: var(--color-pure-white);
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.air-cta:hover {
  background: #a78bfa;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.5);
  transform: scale(1.08);
}

.air-cta span {
  transform: translateY(-1px);
}

.mck-hero-media {
  position: relative;
  min-height: calc(100svh - 176px);
  align-self: stretch;
  overflow: hidden;
}

.mck-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #1a0d2e, rgba(26, 13, 46, 0.2) 42%, transparent);
}

.mck-hero-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  filter: saturate(1.02) contrast(1.05);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(32px, 6vw, 84px);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

@media (min-width: 1121px) {
  .hero-grid {
    align-items: start;
  }

  .hero-copy {
    padding-top: clamp(128px, 19vh, 170px);
  }
}

.hero-copy .lead {
  max-width: 760px;
}

.hero-actions,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-visual {
  position: relative;
  min-height: min(78svh, 760px);
  aspect-ratio: 0.92 / 1;
  display: grid;
  place-items: end center;
  overflow: visible;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8% -8% 2%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(117, 39, 173, 0.45), transparent 58%),
    radial-gradient(circle at 30% 70%, rgba(173, 235, 179, 0.18), transparent 32%);
  filter: blur(20px);
}

.amethyst {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  max-height: min(78svh, 760px);
  object-fit: contain;
  object-position: center bottom;
  translate: var(--stone-x, 0) var(--stone-y, 0);
  filter: drop-shadow(0 32px 90px rgba(117, 39, 173, 0.4));
  animation: breathe 8s ease-in-out infinite alternate;
}

.geode-rings {
  position: absolute;
  inset: auto -14% 0;
  height: 48%;
  border-radius: 999px 999px 0 0;
  background: url("/assets/geode-bg.webp") center/cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to top, black, transparent 82%);
}

.apple-hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 104px 24px 72px;
  background:
    radial-gradient(circle at 50% 18%, rgba(106, 13, 173, 0.22), transparent 26rem),
    #0d0d0d;
  text-align: center;
}

.apple-hero-inner {
  display: grid;
  justify-items: center;
  width: min(100%, 1180px);
}

.logo-stage {
  position: relative;
  width: min(84vw, 360px);
  height: 112px;
  margin-bottom: 44px;
}

.logo-variant {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  color: var(--color-pure-white);
  font-size: 2rem;
  font-weight: 760;
  opacity: 0;
  transform: scale(0.96);
  animation: logo-cycle 3s infinite;
}

.logo-variant img {
  width: auto;
  max-width: 320px;
  max-height: 96px;
}

.logo-variant span {
  line-height: 1;
}

.variant-mark {
  color: #e0b0ff;
  animation-delay: 0.6s;
}

.variant-outline {
  color: rgba(255, 255, 255, 0.86);
  animation-delay: 1.2s;
}

.variant-glow {
  filter: drop-shadow(0 0 28px rgba(155, 89, 182, 0.85));
  animation-delay: 1.8s;
}

.variant-stone {
  color: var(--color-green-spark);
  animation-delay: 2.4s;
}

.outline-mark {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 1px solid rgba(224, 176, 255, 0.52);
  border-radius: 28px;
}

.stone-glyph {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a0dad, #2e2e3a);
  font-size: 3rem;
  font-weight: 900;
}

.apple-hero .hero-title {
  width: min(100%, 960px);
  margin-bottom: 34px;
  color: var(--color-pure-white);
  font-size: 5.8rem;
  font-weight: 400;
  line-height: 1.02;
}

.hero-pill-cta {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  background: var(--color-pure-white);
  color: #0d0d0d;
  font-weight: 800;
  text-decoration: none;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.hero-pill-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(155, 89, 182, 0.3);
}

.swoosh-moment {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #4b0082;
}

.swoosh-burst {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle at 30% 28%, rgba(224, 176, 255, 0.88), transparent 22%),
    linear-gradient(135deg, #6a0dad 0%, #9b59b6 40%, #4b0082 70%, #2e0057 100%);
  opacity: 0;
  transform: scale(0.86) rotate(-4deg);
  transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out);
}

.swoosh-moment.is-visible .swoosh-burst {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.swoosh-moment h2 {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0;
  color: var(--color-pure-white);
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1.02;
  text-align: center;
}

.cinematic-section {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #0d0d0d;
}

.cinematic-bg,
.cinematic-overlay {
  position: absolute;
  inset: 0;
}

.cinematic-bg {
  background: url("/assets/hero-banner-3.webp") left center / cover no-repeat;
  transform: scale(1.04);
  animation: slow-pan 18s ease-in-out infinite alternate;
}

.cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(13, 13, 13, 0.7), rgba(75, 0, 130, 0.5)),
    rgba(75, 0, 130, 0.5);
}

.cinematic-content {
  position: relative;
  z-index: 1;
}

.cinematic-content h2 {
  max-width: 920px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #9b59b6, #e0b0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 5rem;
  font-weight: 900;
  line-height: 1.02;
}

.cinematic-content p {
  max-width: 680px;
  color: var(--color-pure-white);
  font-size: 1.25rem;
}

.outline-pill {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  margin-top: 22px;
  padding: 0 28px;
  border: 2px solid var(--color-pure-white);
  border-radius: var(--radius-pill);
  color: var(--color-pure-white);
  font-weight: 780;
  text-decoration: none;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.outline-pill:hover {
  background: var(--color-pure-white);
  color: #0d0d0d;
  transform: translateY(-2px);
}

.hero-banner {
  min-height: 100svh;
  padding: 0;
  display: block;
  background: #06050a;
}

.hero-slides,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slide {
  overflow: hidden;
  opacity: 0;
  transition: opacity 980ms ease;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 1;
}

.hero-photo-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 5, 10, 0.28), rgba(6, 5, 10, 0.02) 46%, rgba(6, 5, 10, 0.22)),
    linear-gradient(180deg, rgba(6, 5, 10, 0.46), transparent 38%, rgba(6, 5, 10, 0.78));
}

.hero-slide[data-tint="purple"] {
  --panel-front: rgba(42, 16, 58, 0.52);
  --panel-back: rgba(19, 8, 28, 0.38);
}

.hero-slide[data-tint="navy"] {
  --panel-front: rgba(12, 22, 42, 0.5);
  --panel-back: rgba(7, 13, 25, 0.36);
}

.hero-slide[data-tint="green"] {
  --panel-front: rgba(18, 38, 32, 0.48);
  --panel-back: rgba(7, 21, 17, 0.36);
}

.hero-slide[data-tint="charcoal"] {
  --panel-front: rgba(22, 21, 27, 0.54);
  --panel-back: rgba(7, 7, 10, 0.38);
}

.angled-panel {
  position: absolute;
  top: -140px;
  left: 41%;
  width: 920px;
  height: calc(100% + 280px);
  transform: rotate(10deg);
  transform-origin: center;
  pointer-events: none;
}

.angled-panel-front {
  z-index: 2;
  background: var(--panel-front);
  backdrop-filter: blur(2px);
}

.angled-panel-back {
  z-index: 1;
  left: 39.5%;
  background: var(--panel-back);
}

.hero-slide-content {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: end;
  min-height: 100svh;
  width: min(100% - 48px, 1440px);
  margin: 0 auto;
  padding: 118px clamp(24px, 5vw, 76px) 94px 0;
  text-align: right;
}

.hero-slide-content > * {
  width: min(100%, 650px);
}

.hero-banner .hero-title {
  margin-bottom: 22px;
  color: var(--color-pure-white);
  font-size: 4.8rem;
  font-weight: 300;
  line-height: 1.02;
  text-wrap: balance;
}

.hero-banner .eyebrow {
  color: rgba(250, 247, 253, 0.66);
}

.hero-descriptor {
  margin: 0 0 30px;
  color: var(--color-green-spark);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-text-cta {
  justify-self: end;
  width: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  color: var(--color-pure-white);
  font-size: 1rem;
  font-weight: 720;
  text-decoration: none;
  transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.hero-text-cta:hover {
  color: var(--color-green-spark);
  transform: translateX(-4px);
}

.hero-dots {
  position: absolute;
  z-index: 8;
  right: clamp(24px, 5vw, 76px);
  bottom: 60px;
  display: flex;
  gap: 10px;
}

.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.hero-dots button.is-active {
  background: var(--color-pure-white);
  transform: scale(1.2);
}

.hero-ticker {
  position: absolute;
  inset: auto 0 0;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 5, 10, 0.56);
  color: var(--color-gem-white);
  backdrop-filter: blur(12px);
}

.hero-ticker > span {
  display: grid;
  place-items: center;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-green-spark);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticker-mask {
  overflow: hidden;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 32s linear infinite;
}

.ticker-track strong {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 28px;
  color: rgba(250, 247, 253, 0.82);
  font-size: 14px;
  font-weight: 620;
}

.metric-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-block: 1px solid var(--rule);
  background: var(--rule);
}

.metric-ribbon div {
  min-height: 132px;
  padding: 28px;
  background: var(--bg-page);
}

.metric-ribbon strong {
  display: block;
  font-size: 3.1rem;
  line-height: 1;
}

.metric-ribbon span {
  color: var(--text-secondary);
  font-size: 14px;
}

.hero-proof {
  border-block: 1px solid var(--rule);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    var(--bg-page);
}

.hero-proof-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) 1fr;
  gap: 28px;
  align-items: center;
  padding-block: 24px;
}

/* Client-proof: two-column intro + stacked metric ladder */
.client-proof {
  padding-block: clamp(56px, 7vw, 100px);
}

.client-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.client-proof-intro {
  max-width: 480px;
}

.client-proof-title {
  margin: 14px 0 18px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  line-height: 1.04;
  color: var(--text-primary);
}

.client-proof .client-proof-lead {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.55;
}

.proof-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 8px 0 24px;
  border-radius: 999px;
  background: #6a0dad;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(106, 13, 173, 0.3);
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.proof-cta:hover {
  background: #7b1fc4;
  transform: translateY(-1px);
}

/* Shared circular arrow badge for the main CTA pills */
.cta-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #14121a;
  color: #ffffff;
  transition: transform 180ms var(--ease-out);
}

.cta-badge svg {
  width: 16px;
  height: 16px;
}

.proof-cta:hover .cta-badge {
  transform: rotate(45deg);
}

/* White pill variant for main CTAs sitting on a purple/dark band */
.proof-cta.on-band {
  background: #ffffff;
  color: #14121a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.proof-cta.on-band:hover {
  background: #f1edfa;
}

.client-proof-metrics {
  display: flex;
  flex-direction: column;
}

.client-metric {
  padding: clamp(18px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
}

.client-metric:first-child {
  padding-top: 0;
}

.client-metric:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.client-metric strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #8b5cf6;
}

.client-metric span {
  display: block;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.3;
}

/* ===== Problem: scroll-pinned card stack ===== */
.problem-scroll {
  position: relative;
  height: 320vh;
}

.problem-intro {
  padding-top: clamp(64px, 9vw, 130px);
  padding-bottom: clamp(12px, 3vw, 32px);
  text-align: left;
}

.problem-heading {
  max-width: 820px;
  margin: 12px 0 14px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.03;
  color: var(--text-primary);
}

.problem-subhead {
  max-width: 820px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.5;
}

.problem-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.problem-cards {
  position: relative;
  height: clamp(500px, 70vh, 640px);
}

.pstack-card {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  padding: clamp(26px, 3.4vw, 54px);
  background: var(--card-grad, linear-gradient(140deg, #663087, #7527ad));
  color: var(--color-gem-white);
  box-shadow: 0 40px 90px -40px rgba(76, 20, 130, 0.7);
  transform: translateY(calc(var(--depth, 0) * -24px)) scale(calc(1 - var(--depth, 0) * 0.045));
  z-index: calc(30 - var(--depth, 0));
  transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 460ms var(--ease-out);
  will-change: transform, opacity;
  overflow: hidden;
}

.pstack-card.is-active {
  transform: translateY(0) scale(1);
  z-index: 40;
}

.pstack-card.is-past {
  transform: translateY(46px) scale(0.97);
  opacity: 0;
  z-index: 10;
}

.problem-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  height: 100%;
  transition: opacity 380ms var(--ease-out);
}

.pstack-card:not(.is-active) .problem-card-inner {
  opacity: 0;
}

.problem-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.problem-badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: clamp(18px, 3vw, 40px);
  border-radius: 16px;
  background: #ffffff;
  color: #6a0dad;
  box-shadow: 0 8px 24px -8px rgba(30, 10, 55, 0.5);
}

.problem-badge svg {
  width: 26px;
  height: 26px;
}

.problem-kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 253, 0.8);
}

.problem-card-title {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.06;
  color: #ffffff;
}

.problem-card-lead {
  margin: 0 0 clamp(24px, 3.4vw, 38px);
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(250, 247, 253, 0.86);
}

.proof-cta.dark {
  background: #14121a;
  color: #ffffff;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}

.proof-cta.dark:hover {
  background: #000000;
}

.proof-cta.dark .cta-badge {
  background: #ffffff;
  color: #14121a;
}

.problem-card-media {
  position: relative;
  height: 100%;
  min-height: 320px;
  border-radius: 24px;
  overflow: visible;
}

.problem-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 60px -30px rgba(30, 10, 55, 0.6);
}

.problem-float {
  position: absolute;
  top: 22px;
  left: -18px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 20px 44px -18px rgba(20, 12, 40, 0.5);
}

.problem-float-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a0dad, #8b5cf6);
  color: #ffffff;
}

.problem-float-ico svg {
  width: 18px;
  height: 18px;
}

.problem-float-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.problem-float-text strong {
  color: #14121a;
  font-size: 14px;
  font-weight: 700;
}

.problem-float-text small {
  color: #6f6a7a;
  font-size: 12.5px;
  line-height: 1.35;
}

.problem-progress {
  position: absolute;
  right: clamp(22px, 3vw, 46px);
  bottom: clamp(20px, 3vw, 40px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(250, 247, 253, 0.8);
}

@media (max-width: 900px) {
  .problem-card-inner {
    grid-template-columns: 1fr;
  }

  .problem-card-media {
    display: none;
  }
}

/* Static fallback: stack the cards in normal flow */
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .problem-scroll {
    height: auto;
  }

  .problem-viewport {
    position: static;
    height: auto;
    padding: 20px 0 clamp(60px, 9vw, 110px);
  }

  .problem-cards {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pstack-card {
    position: relative;
    inset: auto;
    transform: none;
    opacity: 1;
  }

  /* Every card is a static block on mobile, so its content must always show —
     override the desktop rule that hides inactive cards' inner content. */
  .pstack-card .problem-card-inner,
  .pstack-card:not(.is-active) .problem-card-inner {
    opacity: 1;
  }
}

/* ===== Resources: editorial magazine grid ===== */
.resmag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(30px, 4vw, 52px);
}

.resmag-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1.02;
  color: var(--text-primary);
}

.resmag-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.resmag-viewall svg {
  width: 15px;
  height: 15px;
  transition: transform 180ms var(--ease-out);
}

.resmag-viewall:hover {
  background: rgba(250, 247, 253, 0.06);
  border-color: var(--accent);
}

.resmag-viewall:hover svg {
  transform: rotate(45deg);
}

.resmag-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(30px, 4vw, 52px);
}

.resmag-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: center;
  text-decoration: none;
}

.resmag-feature .resmag-media {
  aspect-ratio: 4 / 5;
}

.resmag-media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(250, 247, 253, 0.05);
}

.resmag-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}

.resmag-feature:hover .resmag-media img,
.resmag-card:hover .resmag-media img {
  transform: scale(1.045);
}

.resmag-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(11, 11, 15, 0.6);
  color: #f4eefc;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}

.resmag-meta {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.resmag-feature-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  line-height: 1.12;
  color: var(--text-primary);
  transition: color 180ms var(--ease-out);
}

.resmag-feature:hover .resmag-feature-title,
.resmag-card:hover .resmag-card-title {
  color: #c8a6ec;
}

.resmag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.resmag-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.resmag-card .resmag-media {
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}

.resmag-card-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--text-primary);
  transition: color 180ms var(--ease-out);
}

@media (max-width: 900px) {
  .resmag-featured {
    grid-template-columns: 1fr;
  }

  .resmag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 34px;
  }
}

@media (max-width: 520px) {
  .resmag-feature {
    grid-template-columns: 1fr;
  }

  .resmag-feature .resmag-media {
    aspect-ratio: 16 / 10;
  }

  .resmag-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Operating pillars: staggered timeline ===== */
.pillars {
  position: relative;
  padding-block: clamp(72px, 9vw, 130px);
  overflow: hidden;
}

.pillars-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.pillars-num,
.pillars-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.pillars-num {
  padding: 0 13px;
  background: rgba(250, 247, 253, 0.08);
  color: var(--text-secondary);
}

.pillars-tag {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: #d7bdf2;
}

.pillars-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 96px);
}

.pillars-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 4rem);
  line-height: 1.02;
  color: var(--text-primary);
}

.pillars-lead {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.55;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.pillar-col {
  padding: calc((3 - var(--stagger, 0)) * clamp(34px, 4vw, 62px)) clamp(16px, 1.8vw, 30px) 30px;
}

.pillar-col + .pillar-col {
  border-left: 1px solid var(--rule);
}

.pillar-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
}

.pillar-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  line-height: 1.05;
  color: var(--text-primary);
}

.pillar-badge {
  flex-shrink: 0;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: #e2ccf5;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pillar-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pillar-list li {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.35;
}

.pillars-wave {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(30px, 4vw, 56px);
  padding: 0 clamp(16px, 4vw, 48px);
  filter: blur(6px);
  pointer-events: none;
}

.pillars-wave span {
  display: block;
  flex: 1 1 0;
  max-width: 96px;
  height: clamp(80px, 9vw, 120px);
  margin-inline: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #a855f7 0%, #7c3aed 55%, rgba(124, 58, 237, 0) 72%);
}

@media (max-width: 900px) {
  .pillars-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  .pillar-col {
    padding-top: 0;
  }

  .pillar-col:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .pillar-col + .pillar-col {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 30px;
  }
}

/* ===== Capabilities: intro + horizontal step carousel ===== */
.capsteps {
  padding-block: clamp(72px, 9vw, 130px);
  overflow: hidden;
}

.capsteps-grid {
  display: grid;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  /* Left edge tracks the site's 1200px container so the intro aligns with every
     other section; the carousel column fills the rest and bleeds off the right. */
  padding-left: max(24px, calc((100% - 1200px) / 2));
  width: 100%;
}

.capsteps-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: #d7bdf2;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capsteps-title {
  margin: 22px 0 30px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: 1.02;
  color: var(--text-primary);
}

.capsteps-carousel {
  min-width: 0;
}

.capsteps-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 6px clamp(24px, 5vw, 64px) 24px 0;
  scrollbar-width: none;
}

.capsteps-track::-webkit-scrollbar {
  display: none;
}

.capstep-card {
  flex: 0 0 clamp(300px, 30vw, 380px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2vw, 34px);
  border: 1px solid rgba(17, 15, 26, 0.06);
  border-radius: 26px;
  background: #ffffff;
  color: #14121a;
  text-decoration: none;
  box-shadow: 0 30px 60px -34px rgba(20, 10, 45, 0.7);
  transition: transform 220ms var(--ease-out);
}

.capstep-card:hover {
  transform: translateY(-4px);
}

.capstep-card::after {
  display: none;
}

.capstep-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b5cf6;
}

.capstep-title {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.08;
  color: #14121a;
}

.capstep-copy {
  margin: 0 0 22px;
  color: #5f5a6b;
  font-size: 1rem;
  line-height: 1.5;
}

.capstep-visual {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 210px;
  padding: 22px;
  border-radius: 18px;
  background: var(--g, linear-gradient(150deg, #6a0dad, #9b59b6));
  overflow: hidden;
}

.capstep-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capstep-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(160deg, rgba(106, 13, 173, 0.55) 0%, rgba(20, 10, 45, 0.28) 45%, rgba(20, 10, 45, 0.85) 100%);
}

.capstep-ico {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.capstep-ico svg {
  width: 24px;
  height: 24px;
}

.capstep-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.capstep-chips span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.capsteps-controls {
  display: grid;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding-left: max(24px, calc((100% - 1200px) / 2));
  width: 100%;
  margin: clamp(28px, 3vw, 42px) 0 0;
}

.capsteps-controls-inner {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 620px;
}

.capsteps-nav {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.capsteps-nav svg {
  width: 20px;
  height: 20px;
}

.capsteps-nav:hover {
  background: rgba(250, 247, 253, 0.08);
  border-color: var(--accent);
}

.capsteps-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.capsteps-progress {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(250, 247, 253, 0.14);
  overflow: hidden;
}

.capsteps-progress span {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: inherit;
  background: #8b5cf6;
  transition: width 260ms var(--ease-out);
}

[data-theme="light"] .capstep-card {
  box-shadow: 0 30px 60px -38px rgba(20, 10, 45, 0.35);
}

@media (max-width: 960px) {
  .capsteps-grid,
  .capsteps-controls {
    grid-template-columns: 1fr;
    padding-inline: clamp(20px, 5vw, 40px);
  }

  .capsteps-track {
    padding-right: clamp(20px, 5vw, 40px);
  }

  .capsteps-controls-inner {
    grid-column: 1;
    max-width: none;
  }
}

.hero-proof p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.hero-proof .eyebrow {
  margin-bottom: 6px;
}

.hero-logo-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.hero-logo {
  display: grid;
  min-height: 64px;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent),
    color-mix(in srgb, var(--bg-surface) 64%, transparent);
  filter: grayscale(1);
  transition: filter 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.hero-logo:hover {
  border-color: var(--accent);
  filter: grayscale(0);
  transform: translateY(-2px);
}

.hero-logo img {
  width: auto;
  max-width: 112px;
  max-height: 34px;
  object-fit: contain;
}

.surface {
  background: var(--bg-surface);
}

.ink-band {
  background:
    linear-gradient(135deg, rgba(117, 39, 173, 0.2), transparent 38%),
    var(--color-ink);
  color: var(--color-gem-white);
}

.purple-band {
  background:
    linear-gradient(135deg, rgba(173, 235, 179, 0.14), transparent 34%),
    var(--color-purple-stone);
  color: var(--color-gem-white);
}

.purple-band .lead {
  color: rgba(255, 255, 255, 0.88);
}

.grid {
  display: grid;
  gap: 24px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  --card-pad: clamp(24px, 4vw, 42px);
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 0%;
  position: relative;
  overflow: clip;
  min-height: 260px;
  padding: var(--card-pad);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 34%),
    color-mix(in srgb, var(--bg-surface) 74%, transparent);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.2), transparent 28%);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

.card:hover,
.card:focus-within {
  transform: perspective(1100px) translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.card:hover::after,
.card:focus-within::after {
  opacity: 1;
}

.service-section {
  background: #0d0d0d;
  background: #1a0d2e;
}

.service-section .display,
.values-section .display {
  max-width: 980px;
}

.service-section .card {
  min-height: 320px;
  border-color: rgba(155, 89, 182, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(155, 89, 182, 0.08), transparent 38%),
    #1a1a2e;
}

.service-section .card-media {
  display: block;
  min-height: 190px;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 28px;
}

.service-section .card:hover {
  box-shadow: 0 8px 32px rgba(106, 13, 173, 0.3);
}

.service-section .card p {
  color: #a0a0b0;
}

.service-section .card-link {
  color: #9b59b6;
}

.feature-callout {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  min-height: 82svh;
  background: #f5f2ee;
  color: #3b1f6b;
}

.feature-photo {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}

.feature-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  filter: saturate(0.92) contrast(1.05);
}

.feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(75, 0, 130, 0.34);
}

.feature-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: clamp(48px, 8vw, 116px);
}

.feature-copy h2 {
  max-width: 720px;
  margin: 0 0 32px;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.04;
}

.ghost-rect {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  padding: 0 28px;
  border: 1px solid #3b1f6b;
  color: #3b1f6b;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 250ms ease, color 250ms ease;
}

.ghost-rect:hover {
  background: #3b1f6b;
  color: var(--color-pure-white);
}

.story-strip-section {
  background: #1a0d2e;
}

.story-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.story-tile {
  position: relative;
  min-height: 60svh;
  overflow: hidden;
  color: var(--color-pure-white);
  text-decoration: none;
}

.story-tile img,
.story-shade {
  position: absolute;
  inset: 0;
}

.story-tile img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-shade {
  z-index: 1;
  background: linear-gradient(180deg, rgba(26, 13, 46, 0.25), rgba(26, 13, 46, 0.82));
}

.story-label,
.story-tile strong {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
}

.story-label {
  top: 24px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.story-tile strong {
  bottom: 28px;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.08;
}

.story-tile:hover img {
  transform: scale(1.04);
}

.values-section {
  background: #0d0d0d;
}

.value-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}

.value-tile {
  min-height: 360px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(155, 89, 182, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(155, 89, 182, 0.08), transparent 40%),
    #1a1a2e;
  scroll-snap-align: start;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

.value-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(155, 89, 182, 0.46);
  box-shadow: 0 8px 32px rgba(106, 13, 173, 0.3);
}

.value-tile > span {
  display: block;
  width: 72px;
  height: 2px;
  margin-bottom: 28px;
  background: #6a0dad;
}

.value-tile h3 {
  color: #9b59b6;
  font-size: 1.75rem;
  line-height: 1.1;
}

.value-tile p {
  color: #a0a0b0;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--rev-delay, 0ms),
    transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--rev-delay, 0ms);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Masked word-by-word reveal for headings */
.wr-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.wr-word > span {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  transition:
    transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms),
    opacity 520ms var(--ease-out) var(--d, 0ms);
}

.word-reveal.is-visible .wr-word > span {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wr-word > span {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

.card > * {
  position: relative;
  z-index: 1;
}

.card-media {
  min-height: 156px;
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 28px;
  border-bottom: 1px solid var(--rule);
  background-position: center;
  background-size: cover;
}

.media-geode {
  background-image:
    linear-gradient(to bottom, rgba(11, 11, 15, 0.08), rgba(11, 11, 15, 0.52)),
    url("/assets/geode-bg.webp");
}

.media-crystal {
  background-image:
    linear-gradient(to bottom, rgba(11, 11, 15, 0.02), rgba(102, 48, 135, 0.32)),
    url("/assets/crystal-light.webp");
}

.media-system {
  background:
    radial-gradient(circle at 70% 22%, rgba(173, 235, 179, 0.38), transparent 12%),
    linear-gradient(135deg, rgba(117, 39, 173, 0.88), rgba(20, 18, 26, 0.92)),
    url("/assets/geode-bg.webp") center/cover;
}

.geode-system {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(180deg, var(--bg-page), color-mix(in srgb, var(--bg-surface) 84%, black 16%)),
    var(--bg-page);
}

.system-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.system-copy {
  position: relative;
  z-index: 2;
}

.system-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.system-stats span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-surface) 70%, transparent);
  color: var(--text-secondary);
  font-size: 14px;
}

.system-stats strong {
  color: var(--text-primary);
}

.system-visual {
  position: relative;
  min-height: 620px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 50%, rgba(117, 39, 173, 0.42), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%),
    url("/assets/geode-bg.webp") center/cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-hover);
  overflow: hidden;
}

.system-visual::before,
.system-visual::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(250, 247, 253, 0.2);
  border-radius: 50%;
  animation: orbit 18s linear infinite;
}

.system-visual::after {
  inset: 24%;
  animation-duration: 12s;
  animation-direction: reverse;
}

.system-core,
.system-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(250, 247, 253, 0.2);
  background:
    radial-gradient(circle at var(--mx, 24%) var(--my, 0%), rgba(255, 255, 255, 0.3), transparent 22%),
    rgba(11, 11, 15, 0.66);
  backdrop-filter: blur(18px) saturate(1.4);
}

.system-core {
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  padding: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-glow);
}

.system-core img {
  width: 52px;
  margin-bottom: 12px;
}

.system-core span {
  font-weight: 820;
  line-height: 1.1;
}

.system-node {
  width: 156px;
  min-height: 100px;
  padding: 18px;
  border-radius: var(--radius-md);
  animation: float-node 5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -420ms);
}

.system-node strong {
  display: block;
  font-size: 18px;
}

.system-node small {
  color: var(--text-secondary);
}

.system-node-1 {
  left: 9%;
  top: 14%;
}

.system-node-2 {
  right: 12%;
  top: 10%;
}

.system-node-3 {
  right: 5%;
  top: 42%;
}

.system-node-4 {
  right: 18%;
  bottom: 10%;
}

.system-node-5 {
  left: 13%;
  bottom: 12%;
}

.system-node-6 {
  left: 5%;
  top: 45%;
}

.system-line {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(173, 235, 179, 0.6), transparent);
  transform-origin: center;
  animation: pulse-line 4s ease-in-out infinite alternate;
}

.line-a {
  transform: translate(-50%, -50%) rotate(0deg);
}

.line-b {
  transform: translate(-50%, -50%) rotate(60deg);
}

.line-c {
  transform: translate(-50%, -50%) rotate(-60deg);
}

.system-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.signal-card {
  min-height: 360px;
}

.video-system {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 78% 30%, rgba(117, 39, 173, 0.18), transparent 34rem),
    linear-gradient(180deg, var(--bg-page), color-mix(in srgb, var(--bg-surface) 82%, black 18%));
}

.video-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: center;
}

.video-copy {
  position: relative;
  z-index: 2;
}

.video-copy .lead {
  margin-bottom: 24px;
}

.video-points {
  display: grid;
  gap: 10px;
  margin: 26px 0;
}

.video-points span {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text-secondary);
}

.video-points span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-green-spark);
  box-shadow: 0 0 22px rgba(173, 235, 179, 0.42);
}

.video-tile {
  --video-play-state: running;
  position: relative;
  display: grid;
  min-height: 640px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(11, 11, 15, 0.84);
  color: var(--color-gem-white);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 28px 80px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.video-tile.is-paused {
  --video-play-state: paused;
}

.video-chrome {
  position: absolute;
  z-index: 5;
  left: 22px;
  top: 18px;
  display: flex;
  gap: 8px;
}

.video-chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(250, 247, 253, 0.46);
}

.video-scene {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(180deg, rgba(11, 11, 15, 0.08), rgba(11, 11, 15, 0.72)),
    url("/assets/geode-bg.webp") center/cover no-repeat;
}

.video-scene::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(circle at 44% 38%, rgba(173, 235, 179, 0.2), transparent 13%),
    radial-gradient(circle at 58% 46%, rgba(117, 39, 173, 0.48), transparent 26%),
    conic-gradient(from 0deg, transparent, rgba(250, 247, 253, 0.2), transparent, rgba(117, 39, 173, 0.45), transparent);
  filter: blur(4px);
  animation: orbit 18s linear infinite;
  animation-play-state: var(--video-play-state);
}

.video-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 0 48%, rgba(173, 235, 179, 0.16) 50%, transparent 54%);
  mix-blend-mode: screen;
  animation: scan-video 4s ease-in-out infinite;
  animation-play-state: var(--video-play-state);
}

.video-grid-lines {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(250, 247, 253, 0.16);
  border-radius: 50%;
}

.video-grid-lines::before,
.video-grid-lines::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(173, 235, 179, 0.58), transparent);
  transform: translate(-50%, -50%) rotate(34deg);
}

.video-grid-lines::after {
  transform: translate(-50%, -50%) rotate(-34deg);
}

.video-crystal {
  position: absolute;
  right: -10%;
  bottom: -14%;
  width: 62%;
  aspect-ratio: 1;
  background: url("/assets/amethyst-640.webp") center bottom / contain no-repeat;
  opacity: 0.82;
  filter: drop-shadow(0 28px 80px rgba(117, 39, 173, 0.45));
  animation: breathe 7s ease-in-out infinite alternate;
  animation-play-state: var(--video-play-state);
}

.video-core {
  position: absolute;
  left: 50%;
  top: 48%;
  display: grid;
  width: 190px;
  height: 190px;
  place-items: center;
  padding: 28px;
  border: 1px solid rgba(250, 247, 253, 0.24);
  border-radius: 50%;
  background: rgba(11, 11, 15, 0.58);
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-glow);
}

.video-core img {
  width: 54px;
}

.video-core strong {
  font-size: 18px;
  line-height: 1.1;
}

.video-marker {
  position: absolute;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(250, 247, 253, 0.22);
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 15, 0.56);
  color: var(--color-gem-white);
  font-size: 14px;
  font-weight: 760;
  backdrop-filter: blur(16px);
  animation: float-node 4.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -520ms);
  animation-play-state: var(--video-play-state);
}

.video-marker small {
  color: var(--color-green-spark);
  font-family: var(--font-mono);
}

.video-marker-1 {
  left: 10%;
  top: 24%;
}

.video-marker-2 {
  right: 12%;
  top: 18%;
}

.video-marker-3 {
  left: 12%;
  bottom: 26%;
}

.video-marker-4 {
  right: 11%;
  bottom: 20%;
}

.video-caption {
  position: absolute;
  z-index: 5;
  left: 22px;
  right: 22px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}

.video-caption strong,
.video-caption small {
  display: block;
}

.video-caption small {
  color: rgba(250, 247, 253, 0.66);
  font-size: 13px;
}

.play-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(250, 247, 253, 0.2);
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 253, 0.1);
  font-size: 13px;
  font-weight: 820;
}

.video-timeline {
  position: absolute;
  z-index: 5;
  left: 22px;
  right: 22px;
  bottom: 12px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: rgba(250, 247, 253, 0.18);
  overflow: hidden;
}

.video-timeline::before {
  content: "";
  display: block;
  width: 52%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--color-green-spark));
  animation: timeline-play 6s linear infinite;
  animation-play-state: var(--video-play-state);
}

.card h3 {
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.card p,
.card li {
  color: var(--text-secondary);
}

.card-label {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-link {
  display: inline-flex;
  gap: 8px;
  margin-top: 20px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.card-link span {
  transition: transform 200ms var(--ease-out);
}

.card-link:hover span {
  transform: translateX(5px);
}

.method-shell {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.method-diagram {
  position: sticky;
  top: 104px;
}

.method-words .method-word {
  transition: color 320ms var(--ease-out), opacity 320ms var(--ease-out);
  opacity: 0.44;
}

.method-words .method-word.is-current {
  opacity: 1;
  background: linear-gradient(100deg, #a855f7, #d8b4fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
  --progress: 0%;
}

.nodes::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 34px;
  height: 2px;
  border-radius: 999px;
  background: rgba(250, 247, 253, 0.12);
}

.nodes::after {
  content: "";
  position: absolute;
  left: 12.5%;
  top: 34px;
  width: calc(var(--progress) * 0.75);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6a0dad, #a855f7);
  transition: width 420ms var(--ease-out);
}

.node {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.node-circle {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  border: 1px solid rgba(250, 247, 253, 0.16);
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out);
}

.node:hover .node-circle {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.node-label {
  font-size: 14px;
  font-weight: 600;
  transition: color 220ms var(--ease-out);
}

.node.is-done .node-circle {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: #c8a6ec;
}

.node[aria-selected="true"] {
  color: var(--text-primary);
}

.node[aria-selected="true"] .node-circle {
  border-color: transparent;
  background: linear-gradient(140deg, #6a0dad, #a855f7);
  color: #ffffff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 14px 30px -12px rgba(106, 13, 173, 0.8);
}

.method-panel {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139, 92, 246, 0.16), transparent 55%),
    rgba(11, 11, 15, 0.55);
  box-shadow: 0 40px 90px -50px rgba(76, 20, 130, 0.8);
}

.method-ghost {
  position: absolute;
  right: clamp(10px, 3vw, 34px);
  top: -34px;
  font-family: var(--font-serif);
  font-size: clamp(9rem, 14vw, 15rem);
  line-height: 1;
  color: rgba(139, 92, 246, 0.09);
  pointer-events: none;
  user-select: none;
}

.method-kicker {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b794e0;
}

.method-panel h3 {
  position: relative;
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 3.6rem;
  letter-spacing: 0;
  line-height: 0.98;
  background: linear-gradient(100deg, #a855f7, #d8b4fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.method-panel .lead {
  max-width: 52ch;
}

.method-panel ul,
.check-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 26px 0;
  list-style: none;
}

.method-panel li,
.check-list li {
  position: relative;
  padding-left: 34px;
  color: var(--text-secondary);
}

.method-panel li::before,
.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: #d7bdf2;
  font-size: 11px;
  font-weight: 700;
}

.method-pair {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: #e2ccf5;
  font-size: 13px;
  font-weight: 600;
}

.method-panel.is-fresh > :not(.method-ghost) {
  animation: method-rise 460ms var(--ease-out) both;
}

.method-panel.is-fresh > :nth-child(3) { animation-delay: 40ms; }
.method-panel.is-fresh > :nth-child(4) { animation-delay: 90ms; }
.method-panel.is-fresh > :nth-child(5) { animation-delay: 140ms; }
.method-panel.is-fresh > :nth-child(6) { animation-delay: 190ms; }

@keyframes method-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-panel.is-fresh > :not(.method-ghost) {
    animation: none;
  }
}

.stage-list {
  display: grid;
  gap: 18px;
}

.stage-item {
  padding: 28px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
}

.logo-strip {
  /* Client review (Sep 2026): slimmer band, logos keep their 30px height. */
  padding: clamp(12px, 1.6vw, 18px) 0;
  border-block: 1px solid var(--rule);
  background: #f7f6fb;
}

.logo-strip-fade {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-strip-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
  animation: marquee 42s linear infinite;
}

.logo-strip:hover .logo-strip-track {
  animation-play-state: paused;
}

.logo-strip-item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-strip-item img {
  width: auto;
  /* --logo-scale lets wordmark-heavy logos (VerifyMe) render a touch larger. */
  height: calc(30px * var(--logo-scale, 1));
  max-width: 200px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: clamp(28px, 4vw, 56px);
  }
}

.proof-marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
}

.proof-track {
  display: flex;
  width: max-content;
  gap: 16px;
  padding: 24px 0;
  animation: marquee 34s linear infinite;
}

.proof-marquee:hover .proof-track {
  animation-play-state: paused;
}

.logo-pill {
  display: grid;
  min-width: 190px;
  min-height: 74px;
  padding: 12px 20px;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 800;
  filter: grayscale(1);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.logo-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.logo-pill img {
  width: auto;
  max-width: 148px;
  max-height: 42px;
  object-fit: contain;
}

/* ===== Closer: rounded CTA + footer card ===== */
.closer {
  padding: 0;
}

.closer-card {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(190, 120, 250, 0.35), transparent 65%),
    linear-gradient(165deg, #3c1266 0%, #6a0dad 52%, #2a0a45 100%);
  color: var(--color-gem-white);
}

.closer-cta {
  display: grid;
  justify-items: center;
  padding: clamp(64px, 8vw, 108px) 24px clamp(48px, 6vw, 84px);
  text-align: center;
}

.closer-cta .eyebrow {
  color: rgba(250, 247, 253, 0.72);
}

.closer-title {
  max-width: 900px;
  margin: 10px 0 18px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  color: var(--color-pure-white);
}

.closer-lead {
  max-width: 580px;
  margin: 0 0 34px;
  /* Was 0.82 alpha, which receded into the purple band under the bright
     white headline. Near-solid white so it reads as body copy, not a hint. */
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.12rem;
  line-height: 1.6;
}

.closer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.closer-ghost {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.closer-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}

.footer-panel {
  width: min(100% - 48px, 1200px);
  margin: 0 auto clamp(16px, 2vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(18px, 2vw, 28px);
  background: rgba(10, 7, 16, 0.55);
  backdrop-filter: blur(12px);
  padding: clamp(30px, 4vw, 52px) clamp(24px, 4vw, 44px) 0;
}

.fp-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 6vw, 90px);
  padding-bottom: clamp(30px, 4vw, 46px);
}

.fp-brand img {
  width: 180px;
  height: auto;
  margin-bottom: 24px;
}

.fp-note {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 600;
}

.fp-form {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 380px;
  padding: 5px 5px 5px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.fp-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.fp-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.fp-form button {
  flex-shrink: 0;
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #14121a;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms var(--ease-out);
}

.fp-form button:hover {
  background: #ece4f8;
}

.fp-form button:disabled {
  cursor: default;
  opacity: 0.85;
}

.fp-form-msg {
  max-width: 380px;
  margin: 10px 0 0;
  min-height: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.fp-form-msg.is-error {
  color: var(--color-error);
}

.fp-fine {
  max-width: 380px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  line-height: 1.55;
}

.fp-fine a {
  color: rgba(255, 255, 255, 0.78);
}

.fp-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.fp-cols h3 {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
}

.fp-cols ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-cols a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 160ms var(--ease-out);
}

.fp-cols a:hover {
  color: #ffffff;
}

.fp-bottom {
  padding: 18px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 960px) {
  /* minmax(0,1fr) not 1fr: the newsletter input's intrinsic width gives
     .fp-brand a ~305px min-content, which an auto-minimum track refuses to
     shrink below — overflowing the footer panel (clipped, so it read as a
     button sliced off at the panel edge rather than as a scrollbar). */
  .fp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fp-brand {
    min-width: 0;
  }

  .fp-form {
    max-width: 100%;
  }

  .fp-form input {
    width: 100%;
    min-width: 0;
    flex: 1 1 0;
  }
}

@media (max-width: 640px) {
  .fp-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }
}

.cta-strip {
  padding-block: clamp(80px, 10vw, 132px);
}

.cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
}

.footer {
  padding: 72px clamp(24px, 5vw, 64px) 34px;
  background: #111111;
  color: var(--color-gem-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 48px;
  width: min(100%, 1200px);
  margin: auto;
}

.footer img {
  width: 210px;
  margin-bottom: 20px;
}

.footer h2,
.footer h3 {
  margin: 0 0 16px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer ul {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

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

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1200px);
  margin: 54px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(250, 247, 253, 0.16);
  color: rgba(250, 247, 253, 0.68);
  font-size: 14px;
}

.page-hero {
  min-height: 74svh;
  display: grid;
  align-items: end;
  padding: 150px 0 84px;
  background:
    linear-gradient(to bottom, transparent, var(--bg-page)),
    url("/assets/geode-bg.webp") center/cover no-repeat;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.anchor-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(32px, 5vw, 80px);
}

.anchor-nav {
  position: sticky;
  top: 104px;
  align-self: start;
  display: grid;
  gap: 10px;
}

.anchor-nav a,
.chip,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  width: fit-content;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}

.anchor-nav a:hover,
.chip:hover,
.chip.is-active,
.tag {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text-primary);
}

.capability-block {
  padding-block: 54px;
  border-bottom: 1px solid var(--rule);
}

.capability-block h2 {
  font-size: 4.25rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.industry-card {
  min-height: 320px;
}

.industry-card[aria-expanded="true"] {
  border-color: var(--accent);
}

.hidden-detail {
  display: none;
}

.industry-card[aria-expanded="true"] .hidden-detail {
  display: block;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.insight-filter-shell {
  display: grid;
  gap: 18px;
  margin-bottom: 34px;
}

.filter-group {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: start;
}

.filter-group > span {
  padding-top: 8px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.filter-group .filter-bar {
  margin: 0;
}

.empty-state {
  margin-top: 24px;
  color: var(--text-secondary);
}

.insight-card {
  min-height: 340px;
}

.featured {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 32px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.featured-visual {
  min-height: 420px;
  border-radius: 18px;
  background: url("/assets/crystal-light.webp") center/cover no-repeat;
}

.featured-copy {
  padding: clamp(28px, 5vw, 56px);
}

.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}

.section-heading-row .display {
  max-width: 900px;
  margin-bottom: 0;
}

.section-note {
  max-width: 300px;
  color: var(--text-secondary);
  font-size: 15px;
}

.resource-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-page) 88%, var(--bg-surface)), var(--bg-page));
}

.resource-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 24px;
}

.resource-stack {
  display: grid;
  gap: 24px;
}

.resource-card,
.proof-card,
.testimonial-spotlight {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.1), transparent 28%),
    color-mix(in srgb, var(--bg-surface) 74%, transparent);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.resource-card:hover,
.proof-card:hover,
.testimonial-spotlight:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.resource-card {
  padding: clamp(24px, 4vw, 42px);
}

.resource-card-large {
  display: grid;
  min-height: 560px;
  grid-template-rows: 1fr auto;
  gap: 34px;
}

.resource-media {
  position: relative;
  min-height: 260px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 54% 44%, rgba(173, 235, 179, 0.18), transparent 15%),
    linear-gradient(135deg, rgba(117, 39, 173, 0.45), rgba(11, 11, 15, 0.72)),
    url("/assets/crystal-light.webp") center/cover no-repeat;
  overflow: hidden;
}

.resource-media::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(250, 247, 253, 0.28);
  border-radius: 50%;
  animation: orbit 16s linear infinite;
}

.resource-orbit {
  position: absolute;
  inset: 28%;
  border: 1px solid rgba(173, 235, 179, 0.4);
  border-radius: 50%;
}

.resource-type {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(250, 247, 253, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(11, 11, 15, 0.52);
  color: var(--color-gem-white);
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.resource-card h3,
.proof-card h3 {
  margin-bottom: 14px;
  font-size: 2rem;
  line-height: 1.08;
}

.resource-card p,
.proof-card p {
  color: var(--text-secondary);
}

.compact-resource {
  min-height: 268px;
}

.tsec-title {
  margin: 16px 0 clamp(30px, 4vw, 48px);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 0.9fr));
  gap: 20px;
  align-items: stretch;
}

.testimonial-spotlight {
  min-height: 400px;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 24px;
  background:
    linear-gradient(155deg, rgba(106, 13, 173, 0.72), rgba(11, 11, 15, 0.88)),
    url("/assets/geode-bg.webp") center/cover no-repeat;
  color: var(--color-gem-white);
}

.quote-mark {
  margin-bottom: 20px;
  color: #c084fc;
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 0.72;
}

.testimonial-spotlight p {
  max-width: 22ch;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  font-weight: 400;
  line-height: 1.14;
}

.spotlight-foot {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 32px;
  color: rgba(250, 247, 253, 0.74);
  font-size: 14px;
}

.spotlight-foot img {
  width: 32px;
}

.testimonial-spotlight {
  display: flex;
  flex-direction: column;
}

/* Clean flat testimonial cards */
.tcard {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-surface) 55%, transparent);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.tcard:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-3px);
}

.tcard-quote {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.08rem;
  line-height: 1.55;
}

.tcard-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.tcard-logo {
  align-self: flex-start;
  height: 22px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(0.88);
  opacity: 0.92;
}

[data-theme="light"] .tcard-logo {
  filter: brightness(0) opacity(0.72);
}

.tcard-foot span {
  display: block;
  min-height: 2.8em; /* reserve two lines so footer dividers align across cards */
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.4;
}

.tcard-quote + .tcard-foot {
  margin-top: auto;
}

.tcard-quote {
  margin-bottom: 26px;
}

.proof-card {
  min-height: 420px;
  padding: clamp(24px, 3vw, 34px);
}

.micro-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.micro-proof span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 13px;
}

.article {
  font-size: 20px;
}

.article h2 {
  margin-top: 52px;
  font-size: 3rem;
  letter-spacing: 0;
}

.article blockquote {
  margin: 48px 0;
  padding-left: 26px;
  border-left: 4px solid var(--accent);
  color: var(--accent);
  font-size: 3.1rem;
  font-weight: 820;
  line-height: 1.08;
  letter-spacing: 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.8fr);
  gap: 36px;
}

.form {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-weight: 760;
}

.field input,
.field select,
.field textarea {
  min-height: 52px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-primary);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.success-state {
  display: none;
  padding: 36px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.form-message {
  min-height: 24px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.form-message.is-error {
  color: var(--color-error);
  font-weight: 500;
}

.form.is-submitted .field,
.form.is-submitted .button-row {
  display: none;
}

.form.is-submitted .success-state {
  display: block;
}

.lead-sm {
  color: var(--text-secondary);
  font-size: 16px;
}

.legal-copy {
  display: grid;
  gap: 28px;
}

.legal-copy section {
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

.legal-copy h2 {
  margin-bottom: 12px;
  font-size: 1.7rem;
}

.legal-note {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

.newsletter-band {
  display: none;
}

.newsletter-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.newsletter-form input {
  min-height: 52px;
  width: min(320px, 100%);
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-page) 72%, transparent);
  color: var(--text-primary);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 4.5vw, 28px) clamp(20px, 5vw, 30px) clamp(24px, 4vh, 36px);
  background: var(--color-purple-stone);
  color: var(--color-gem-white);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
  overflow-y: auto;
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 5vh, 48px);
}

.mobile-menu-top .brand img {
  width: 150px;
  height: auto;
}

.mobile-menu-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 180ms var(--ease-out);
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mobile-menu-close svg {
  width: 22px;
  height: 22px;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 2.4vh, 20px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: clamp(1.3rem, 5.4vw, 1.65rem);
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
}

.mobile-menu-nav a svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.mobile-menu-nav a:hover svg {
  opacity: 1;
  transform: translateX(3px);
}

.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: clamp(24px, 4vh, 36px);
  padding: 0 32px;
  border-radius: 999px;
  background: var(--color-gem-white);
  color: var(--color-purple-stone);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.mobile-menu-social {
  display: flex;
  gap: clamp(20px, 6vw, 32px);
  margin-top: auto;
  padding-top: clamp(28px, 5vh, 44px);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
}

.mobile-menu-social a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.mobile-menu-social a:hover {
  color: var(--color-gem-white);
}

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: 110px 24px 24px;
  background: rgba(11, 11, 15, 0.72);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: opacity 200ms var(--ease-out);
}

.search-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.search-panel {
  width: min(100%, 720px);
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  box-shadow: var(--shadow-hover);
}

.search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.search-top h2 {
  margin: 0;
}

.search-panel input {
  width: 100%;
  min-height: 56px;
  margin: 20px 0;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.result-item {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}

.result-item strong {
  display: block;
}

.result-item span {
  color: var(--text-secondary);
  font-size: 15px;
}

.cookie-banner {
  position: fixed;
  z-index: 70;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  width: min(calc(100% - 40px), 460px);
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  box-shadow: var(--shadow-hover);
  backdrop-filter: blur(18px);
}

.cookie-banner p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.cookie-banner div {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cookie-banner.is-hidden {
  display: none;
}

/* Plain flat cookie buttons — no metallic sheen, glass blur, or silver rim */
.cookie-banner .btn::before,
.cookie-panel .btn::before {
  display: none;
}

.cookie-banner .btn,
.cookie-panel .btn {
  box-shadow: none;
  backdrop-filter: none;
}

.cookie-banner .btn.ghost,
.cookie-panel .btn.ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.cookie-banner .btn.ghost:hover,
.cookie-panel .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: none;
}

.cookie-banner .btn:not(.ghost),
.cookie-panel .btn:not(.ghost) {
  background: #6a0dad;
}

.cookie-banner .btn:not(.ghost):hover,
.cookie-panel .btn:not(.ghost):hover {
  background: #7b1fc4;
  transform: none;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11, 11, 15, 0.72);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: opacity 200ms var(--ease-out);
}

.cookie-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cookie-panel {
  width: min(100%, 680px);
  max-height: min(720px, calc(100svh - 48px));
  overflow: auto;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 20% 0%, rgba(117, 39, 173, 0.18), transparent 32%),
    var(--bg-page);
  box-shadow: var(--shadow-hover);
}

.cookie-options {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.cookie-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at var(--mx, 20%) var(--my, 0%), rgba(255, 255, 255, 0.12), transparent 28%),
    color-mix(in srgb, var(--bg-surface) 72%, transparent);
}

.cookie-option small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
}

.cookie-option input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.cookie-actions {
  justify-content: flex-end;
}

.reveal {
  animation: reveal-up 620ms var(--ease-out) both;
  animation-timeline: view();
  animation-range: entry 0% entry 48%;
}

@keyframes breathe {
  from {
    opacity: 0.94;
    transform: scale(0.985) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(1deg);
  }
}

@keyframes logo-cycle {
  0%,
  17% {
    opacity: 1;
    transform: scale(1);
  }
  21%,
  100% {
    opacity: 0;
    transform: scale(1.035);
  }
}

@keyframes slow-pan {
  from {
    transform: scale(1.04) translateX(0);
  }
  to {
    transform: scale(1.08) translateX(-2%);
  }
}

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

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

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orbit {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes float-node {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

@keyframes pulse-line {
  from {
    opacity: 0.36;
  }
  to {
    opacity: 0.9;
  }
}

@keyframes scan-video {
  0%,
  100% {
    transform: translateY(-42%);
    opacity: 0;
  }
  45%,
  58% {
    opacity: 1;
  }
  100% {
    transform: translateY(42%);
  }
}

@keyframes timeline-play {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(200%);
  }
}

/* Phones: the wide "Book a Conversation" text CTA overflows the nav pill, so it
   moves into the mobile menu (see .mobile-menu-cta). */
@media (max-width: 600px) {
  .nav-cta {
    display: none;
  }
}

@media (max-width: 1120px) {
  .nav-primary,
  .nav-login,
  .header-actions .language-toggle {
    display: none;
  }

  .nav-shell {
    justify-content: space-between;
    gap: 12px;
  }

  .brand {
    margin-right: auto;
    min-width: 0;
  }

  .menu-button {
    display: inline-flex;
  }

  .hero-grid,
  .hero-proof-grid,
  .mck-hero,
  .hero-intro-row,
  .feature-callout,
  .method-shell,
  .featured,
  .anchor-layout,
  .contact-layout,
  .cta-inner,
  .video-layout,
  .system-layout,
  .system-cards,
  .resource-grid,
  .section-heading-row,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .method-diagram,
  .anchor-nav {
    position: static;
  }

  .hero-title {
    font-size: 4.5rem;
  }

  .mck-hero {
    padding: 112px 24px 64px;
  }

  .mck-hero-media {
    min-height: 420px;
    margin-inline: -24px;
  }

  .feature-photo {
    min-height: 420px;
  }

  .story-strip {
    grid-template-columns: 1fr;
  }

  .story-tile {
    min-height: 420px;
  }

  .apple-hero .hero-title,
  .swoosh-moment h2,
  .cinematic-content h2 {
    font-size: 4.2rem;
  }

  .page-title {
    font-size: 5rem;
  }

  .display,
  .capability-block h2 {
    font-size: 3.6rem;
  }

  .hero-banner {
    padding: 0;
  }

  .hero-banner .hero-title {
    font-size: 4rem;
  }

  .angled-panel {
    left: 36%;
    width: 820px;
  }

  .angled-panel-back {
    left: 34%;
  }

  .hero-slide-content {
    padding-right: 24px;
  }

  .hero-logo-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-tile {
    min-height: 560px;
  }

  .value-rail {
    grid-template-columns: repeat(4, minmax(280px, 1fr));
  }

  .testimonial-spotlight p {
    max-width: 26ch;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 16px;
  }

  .container,
  .container-wide,
  .container-narrow {
    width: min(100% - 32px, 1200px);
  }

  .brand img {
    width: 164px;
  }

  .hero {
    min-height: 100svh;
    padding-block: 102px 52px;
  }

  .mck-hero {
    min-height: 100svh;
    padding: 104px 16px 56px;
  }

  .mck-hero .hero-title {
    font-size: 3.35rem;
  }

  .hero-intro-row {
    justify-items: center;
  }

  .hero-intro-row p {
    font-size: 1rem;
    text-align: center;
  }

  .air-cta {
    width: 76px;
    height: 76px;
  }

  .mck-hero-media {
    min-height: 320px;
    margin: 24px -16px 0;
  }

  .feature-copy {
    padding: 54px 16px;
  }

  .feature-copy h2 {
    font-size: 3rem;
  }

  .story-tile {
    min-height: 360px;
  }

  .apple-hero {
    padding: 104px 16px 72px;
  }

  .apple-hero .hero-title,
  .swoosh-moment h2,
  .cinematic-content h2 {
    font-size: 3.1rem;
  }

  .logo-stage {
    height: 96px;
    margin-bottom: 34px;
  }

  .logo-variant {
    font-size: 1.35rem;
  }

  .logo-variant img {
    max-width: 260px;
    max-height: 82px;
  }

  .swoosh-moment,
  .cinematic-section {
    min-height: 82svh;
  }

  .cinematic-content p {
    font-size: 1.08rem;
  }

  .value-rail {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .value-tile {
    min-height: 0;
  }

  .hero-banner {
    min-height: 100svh;
    padding: 0;
  }

  .hero-banner .hero-title {
    font-size: 3.2rem;
    line-height: 1.04;
  }

  .hero-banner .eyebrow {
    max-width: 34ch;
    margin-left: auto;
  }

  .hero-slide-content {
    width: min(100% - 32px, 1200px);
    min-height: 100svh;
    padding: 104px 0 92px;
  }

  .hero-slide-content > * {
    width: min(100%, 330px);
  }

  .hero-descriptor {
    font-size: 0.78rem;
  }

  .angled-panel {
    top: -120px;
    left: 22%;
    width: 620px;
    height: calc(100% + 240px);
    transform: rotate(9deg);
  }

  .angled-panel-back {
    left: 18%;
  }

  .hero-bg {
    object-position: 28% center !important;
  }

  .hero-dots {
    right: 16px;
    bottom: 54px;
  }

  .hero-ticker {
    min-height: 38px;
  }

  .hero-ticker > span,
  .ticker-track strong {
    min-height: 38px;
  }

  .ticker-track strong {
    padding-inline: 18px;
    font-size: 12px;
  }

  .hero-grid {
    display: grid;
    min-height: calc(100svh - 154px);
    grid-template-columns: 1fr;
  }

  .hero-visual {
    position: absolute;
    top: 64px;
    right: 0;
    left: auto;
    z-index: 0;
    min-height: 0;
    width: min(88vw, 500px);
    height: min(68svh, 560px);
    opacity: 0.56;
    pointer-events: none;
    place-items: start center;
  }

  .hero-copy {
    padding-top: clamp(112px, 22svh, 168px);
  }

  .hero-title {
    font-size: 3.1rem;
  }

  .page-title {
    font-size: 3.4rem;
  }

  .display,
  .capability-block h2 {
    font-size: 2.7rem;
  }

  .lead {
    font-size: 1.16rem;
  }

  .card h3 {
    font-size: 1.72rem;
  }

  .method-panel h3,
  .article h2,
  .article blockquote {
    font-size: 2.35rem;
  }

  .metric-ribbon strong {
    font-size: 2.5rem;
  }

  .hero-copy .lead {
    max-width: 32ch;
  }

  .amethyst {
    width: 100%;
    max-height: 68svh;
    object-position: center top;
  }

  .geode-rings {
    inset: auto -32% 0;
    opacity: 0.16;
  }

  .metric-ribbon,
  .hero-logo-rail,
  .grid.two,
  .grid.three,
  .grid.four,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-proof-grid {
    padding-block: 20px;
  }

  .hero-logo-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-logo {
    min-height: 58px;
  }

  .video-tile {
    min-height: 520px;
  }

  .video-core {
    width: 150px;
    height: 150px;
  }

  .video-marker {
    min-height: 38px;
    padding-inline: 12px;
  }

  .resource-card-large {
    min-height: 0;
  }

  .resource-card h3,
  .proof-card h3 {
    font-size: 1.72rem;
  }

  .testimonial-spotlight,
  .proof-card {
    min-height: 0;
  }

  .testimonial-spotlight p {
    font-size: 1.72rem;
  }

  .nodes {
    grid-template-columns: repeat(2, 1fr);
  }

  .system-visual {
    min-height: 560px;
  }

  .system-node {
    width: 140px;
  }

  .system-node-1,
  .system-node-5 {
    left: 5%;
  }

  .system-node-2,
  .system-node-4 {
    right: 5%;
  }

  .filter-group,
  .newsletter-form {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .nodes::before {
    display: none;
  }

  .footer-bottom,
  .cookie-banner {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .footer-bottom {
    align-items: flex-start;
  }

  .cookie-banner div {
    width: 100%;
    justify-content: stretch;
  }

  .cookie-banner .btn {
    flex: 1;
    min-height: 44px;
    padding-inline: 16px;
  }
}

@media (max-width: 560px) {
  .video-tile {
    min-height: 610px;
  }

  .video-marker-1 {
    left: 5%;
    top: 18%;
  }

  .video-marker-2 {
    right: 5%;
    top: 18%;
  }

  .video-marker-3 {
    left: 5%;
    bottom: 26%;
  }

  .video-marker-4 {
    right: 5%;
    bottom: 26%;
  }

  .video-caption {
    display: grid;
  }

  .system-visual {
    min-height: 680px;
  }

  .system-core {
    top: 49%;
    width: 160px;
    height: 160px;
  }

  .system-node {
    width: min(42vw, 152px);
    min-height: 92px;
    padding: 14px;
  }

  .system-node-1 {
    left: 4%;
    top: 8%;
  }

  .system-node-2 {
    right: 4%;
    top: 8%;
  }

  .system-node-3 {
    right: 4%;
    top: 34%;
  }

  .system-node-4 {
    right: 4%;
    bottom: 8%;
  }

  .system-node-5 {
    left: 4%;
    bottom: 8%;
  }

  .system-node-6 {
    left: 4%;
    top: 34%;
  }

  .cookie-banner div,
  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

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

/* Final homepage system */
.home-carousel {
  min-height: 100svh;
  padding: 0;
  background: #0b0b0f;
  color: var(--color-gem-white);
}

.home-carousel-slides,
.home-slide,
.home-slide img,
.home-carousel-shade {
  position: absolute;
  inset: 0;
}

.home-slide {
  opacity: 0;
  transform: scale(1.018);
  transition: opacity 920ms ease, transform 6400ms ease;
}

.home-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.home-slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.08);
}

.home-slide::before,
.home-slide::after {
  content: "";
  position: absolute;
  inset: -18% -8%;
  z-index: 1;
  pointer-events: none;
}

.home-slide::before {
  background:
    linear-gradient(90deg, rgba(11, 11, 15, 0.08) 0 34%, rgba(11, 11, 15, 0.72) 58%, rgba(11, 11, 15, 0.92)),
    linear-gradient(180deg, rgba(11, 11, 15, 0.25), rgba(11, 11, 15, 0.64));
}

.home-slide::after {
  left: 42%;
  width: 68%;
  background: rgba(74, 17, 102, 0.52);
  transform: rotate(9deg);
  transform-origin: center;
}

.home-slide.tint-navy::after {
  background: rgba(22, 24, 52, 0.52);
}

.home-slide.tint-charcoal::after {
  background: rgba(22, 18, 28, 0.58);
}

.home-carousel-shade {
  z-index: 2;
  background:
    radial-gradient(circle at 24% 35%, rgba(173, 235, 179, 0.12), transparent 23rem),
    linear-gradient(90deg, rgba(11, 11, 15, 0.16), transparent 42%, rgba(11, 11, 15, 0.38));
  pointer-events: none;
}

.home-carousel-content {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 100svh;
  align-content: center;
  justify-items: end;
  padding-block: 118px 86px;
  text-align: right;
}

.home-carousel-content > * {
  width: min(100%, 680px);
}

.home-carousel .eyebrow {
  color: rgba(250, 247, 253, 0.78);
}

.home-carousel .hero-title {
  margin: 0 0 24px;
  color: var(--color-pure-white);
  font-family: var(--font-body);
  font-size: 5.35rem;
  font-weight: 800;
  line-height: 1.02;
}

.word-switch {
  display: inline-block;
  white-space: nowrap;
  /* No reserved width: JS sets an explicit width per word and this
     transition glides the line closed instead of leaving an 8ch hole
     after short words like "teams". */
  color: #c5a2ff;
  text-shadow: 0 0 34px rgba(155, 89, 182, 0.45);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, width 260ms var(--ease-out);
}

.word-switch.is-changing {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
}

.home-carousel .hero-descriptor {
  margin: 0 0 32px auto;
  color: rgba(250, 247, 253, 0.74);
  font-family: var(--font-body);
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.home-carousel .hero-actions {
  justify-content: end;
  gap: 18px;
}

.hero-text-link {
  color: var(--color-gem-white);
}

.home-dots {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 5vw, 72px);
  bottom: 62px;
  display: flex;
  gap: 9px;
}

.home-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(250, 247, 253, 0.78);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.home-dots button.is-active {
  background: var(--color-gem-white);
}

.home-carousel .hero-ticker {
  z-index: 4;
  overflow: hidden;
}

.services-snap .card {
  min-height: 350px;
}

.problem-section {
  background:
    radial-gradient(circle at 80% 20%, rgba(117, 39, 173, 0.18), transparent 28rem),
    var(--bg-page);
}

/* Feature-card treatment (gradient panel + floating cards) */
.feature-card {
  position: relative;
  margin-top: 30px;
}

.feature-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 66px;
  border-radius: 30px 30px 0 0;
  z-index: 0;
}

.feature-stack-a {
  top: -28px;
  width: 91%;
  background: linear-gradient(90deg, #f4a259, #f6c453);
}

.feature-stack-b {
  top: -14px;
  width: 96%;
  background: linear-gradient(90deg, #6aa6ef, #93c6f2);
}

.feature-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  padding: clamp(30px, 4.4vw, 66px);
  border-radius: 30px;
  background: linear-gradient(130deg, #7c40e6 0%, #b257e2 52%, #dd79cf 100%);
  box-shadow: 0 44px 96px -46px rgba(123, 63, 228, 0.7);
}

.feature-card-copy {
  max-width: 470px;
}

.feature-badge {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: #ffffff;
  color: #6a0dad;
  box-shadow: 0 12px 26px -12px rgba(23, 8, 46, 0.5);
}

.feature-badge svg {
  width: 28px;
  height: 28px;
}

.feature-card-copy .eyebrow {
  color: rgba(23, 8, 46, 0.62);
}

.feature-title {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.1rem, 3.1vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: #17082e;
}

.feature-lead {
  margin: 0 0 30px;
  color: rgba(23, 8, 46, 0.82);
  font-size: 1.08rem;
  line-height: 1.55;
}

.feature-cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: #14121a;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.feature-cta:hover {
  background: #000000;
  transform: translateY(-1px);
}

.feature-diagnosis {
  margin-top: 26px;
  color: #17082e;
}

.feature-problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.feature-problem-list li {
  display: flex;
  gap: 14px;
}

.feature-problem-list li > span {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(23, 8, 46, 0.14);
  color: #17082e;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.feature-problem-list strong {
  display: block;
  margin-bottom: 3px;
  color: #17082e;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.2;
}

.feature-problem-list p {
  margin: 0;
  color: rgba(23, 8, 46, 0.74);
  font-size: 0.92rem;
  line-height: 1.42;
}

.feature-card-media {
  position: relative;
}

.feature-card-media img {
  display: block;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  object-position: 50% 10%;
  border-radius: 24px;
  box-shadow: 0 34px 66px -30px rgba(23, 8, 46, 0.5);
}

.feature-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 22px 48px -20px rgba(23, 8, 46, 0.45);
}

.feature-float-note {
  top: 15%;
  left: -7%;
  max-width: 302px;
}

.feature-note-ico {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f4b740;
  color: #ffffff;
}

.feature-note-ico svg {
  width: 18px;
  height: 18px;
}

.feature-note-text strong {
  display: block;
  color: #14121a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.feature-note-text small {
  color: #6f6a7a;
  font-size: 12.5px;
  line-height: 1.35;
}

.feature-float-team {
  right: -4%;
  bottom: 9%;
  gap: 10px;
}

.feature-avatars {
  display: inline-flex;
}

.feature-avatars i {
  width: 30px;
  height: 30px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: linear-gradient(135deg, #8b5cf6, #d774d0);
}

.feature-avatars i:first-child {
  margin-left: 0;
}

.feature-avatars i:nth-child(2) {
  background: linear-gradient(135deg, #6aa6ef, #8b5cf6);
}

.feature-avatars i:nth-child(3) {
  background: linear-gradient(135deg, #f4a259, #f6c453);
}

.feature-team-label {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f1eef7;
  color: #14121a;
  font-size: 12.5px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .feature-card-inner {
    grid-template-columns: 1fr;
  }

  .feature-card-media img {
    max-width: 100%;
  }

  .feature-float-note {
    left: 0;
    max-width: 84%;
  }

  .feature-float-team {
    right: 0;
  }
}

.problem-grid,
.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: center;
}

.problem-stack {
  display: grid;
  gap: 14px;
}

.problem-card {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 26px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%),
    color-mix(in srgb, var(--bg-surface) 78%, transparent);
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.problem-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateX(-4px);
}

.problem-card span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
}

.problem-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1.14;
}

.problem-card p,
.read-more-copy,
.founder-copy p,
.featured-case-copy p,
.insight-tile p {
  color: var(--text-secondary);
}

.read-more-trigger {
  margin-top: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.read-more-trigger span.is-open {
  transform: rotate(90deg);
}

.read-more-copy {
  max-width: 680px;
  margin-top: 18px;
}

.founder-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 72%, var(--bg-page)), var(--bg-page));
}

.founder-grid {
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
}

.founder-portrait {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #1a0d2e;
  box-shadow: var(--shadow-hover);
}

.founder-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 35%, rgba(11, 11, 15, 0.82)),
    radial-gradient(circle at 48% 34%, transparent 0 18%, rgba(74, 17, 102, 0.45) 19% 100%);
}

.founder-portrait img {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 122%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.82;
  filter: saturate(1.05) contrast(1.04);
}

.founder-portrait span {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 22px;
  color: rgba(250, 247, 253, 0.78);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.founder-copy blockquote {
  max-width: 820px;
  margin: 0 0 28px;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1.02;
}

.featured-case-section {
  background:
    linear-gradient(180deg, var(--bg-page), color-mix(in srgb, var(--bg-surface) 72%, var(--bg-page)));
}

.case-standalone {
  padding: clamp(54px, 8vw, 96px) 0 0;
  margin-bottom: 34px;
}

.featured-case {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
}

.featured-case-media {
  min-height: 620px;
  overflow: hidden;
}

.featured-case-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.featured-case:hover .featured-case-media img {
  transform: scale(1.04);
}

.featured-case-copy {
  display: grid;
  align-content: center;
  padding: clamp(30px, 5vw, 66px);
}

.featured-case-copy .proof-cta {
  justify-self: start;
}

.featured-case-copy h2 {
  max-width: 560px;
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: 3.55rem;
  font-weight: 400;
  line-height: 1.02;
}

.case-highlights {
  display: grid;
  gap: 10px;
  margin: 28px 0;
}

.case-highlights span {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--text-secondary);
}

.case-highlights strong {
  color: var(--text-primary);
}

.case-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.insight-carousel-section {
  background:
    radial-gradient(circle at 14% 8%, rgba(173, 235, 179, 0.12), transparent 24rem),
    var(--bg-page);
}

.insight-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}

.insight-tile {
  position: relative;
  min-height: 470px;
  padding: 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-surface) 76%, transparent);
  scroll-snap-align: start;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.insight-tile:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.insight-tile-media {
  position: relative;
  display: grid;
  min-height: 180px;
  place-items: center;
  margin: -22px -22px 22px;
  background:
    linear-gradient(135deg, rgba(117, 39, 173, 0.48), rgba(11, 11, 15, 0.72)),
    url("/assets/crystal-light.webp") center/cover no-repeat;
  color: var(--color-gem-white);
  font-family: var(--font-mono);
  overflow: hidden;
}

.insight-tile:nth-child(2) .insight-tile-media {
  background:
    linear-gradient(135deg, rgba(26, 13, 46, 0.38), rgba(11, 11, 15, 0.72)),
    url("/assets/geode-bg.webp") center/cover no-repeat;
}

.insight-tile:nth-child(3) .insight-tile-media {
  background:
    linear-gradient(135deg, rgba(117, 39, 173, 0.4), rgba(11, 11, 15, 0.62)),
    url("/assets/hero-banner-3.webp") center/cover no-repeat;
}

.mini-play,
.video-play-button {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 247, 253, 0.16);
  color: var(--color-gem-white);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Optical centring: a triangle's visual centre sits left of its bounding box. */
.video-play-button svg {
  width: 38%;
  height: 38%;
  margin-left: 6%;
}

.landscape-video-tile:hover .video-play-button,
.landscape-video-tile:focus-visible .video-play-button {
  background: rgba(250, 247, 253, 0.26);
}

.mini-play {
  width: 62px;
  height: 62px;
  font-size: 22px;
}

.video-play-button {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  font-size: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.video-tile.is-paused .video-play-button {
  background: rgba(117, 39, 173, 0.62);
}

[data-theme="light"] .hero-proof,
[data-theme="light"] .problem-section,
[data-theme="light"] .insight-carousel-section,
[data-theme="light"] .featured-case-section,
[data-theme="light"] .service-section,
[data-theme="light"] .values-section,
[data-theme="light"] .testimonial-section {
  background: var(--color-pure-white);
}

[data-theme="light"] .video-system,
[data-theme="light"] .founder-section {
  background:
    radial-gradient(circle at 80% 18%, rgba(117, 39, 173, 0.12), transparent 28rem),
    var(--color-gem-white);
}

[data-theme="light"] .service-section .card,
[data-theme="light"] .problem-card,
[data-theme="light"] .featured-case,
[data-theme="light"] .insight-tile,
[data-theme="light"] .value-tile,
[data-theme="light"] .proof-card,
[data-theme="light"] .resource-card {
  background: #ffffff;
  color: var(--color-ink);
}

[data-theme="light"] .service-section .card p {
  color: var(--color-muted);
}

@media (max-width: 1120px) {
  .home-carousel-content {
    justify-items: start;
    text-align: left;
  }

  .home-slide::before {
    background: linear-gradient(90deg, rgba(11, 11, 15, 0.78), rgba(11, 11, 15, 0.4));
  }

  .home-slide::after {
    left: 28%;
    width: 92%;
    opacity: 0.72;
  }

  .home-carousel .hero-actions {
    justify-content: start;
  }

  .problem-grid,
  .founder-grid,
  .featured-case {
    grid-template-columns: 1fr;
  }

  .featured-case-media,
  .founder-portrait {
    min-height: 460px;
  }

  .case-mini-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .home-carousel .hero-title {
    font-size: 3.25rem;
  }

  .home-carousel-content {
    padding-block: 112px 96px;
  }

  .home-carousel-content > * {
    width: min(100%, 390px);
  }

  .word-switch {
    min-width: 0;
  }

  .home-dots {
    right: 18px;
    bottom: 50px;
  }

  .home-carousel .hero-ticker {
    grid-template-columns: 1fr;
  }

  .home-carousel .hero-ticker > span {
    display: none;
  }

  .home-carousel .ticker-track strong {
    padding-inline: 18px;
  }

  .founder-copy blockquote,
  .featured-case-copy h2 {
    font-size: 2.65rem;
  }

  .video-play-button {
    width: 76px;
    height: 76px;
    font-size: 24px;
  }

  .insight-rail {
    grid-template-columns: repeat(4, minmax(260px, 82vw));
  }
}

/* Calmer homepage hero and navigation refinement */
/* Mega-menu dropdowns */
.mega {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 60;
  width: min(920px, calc(100vw - 32px));
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}

.mega-compact {
  width: min(560px, calc(100vw - 32px));
}

.nav-item:hover .mega,
.nav-item.is-open .mega,
.nav-item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.15fr;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(17, 15, 26, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 15, 26, 0.05), 0 30px 60px -24px rgba(17, 15, 26, 0.32);
}

.mega-compact .mega-grid {
  grid-template-columns: 1fr 1fr;
}

.mega-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-label {
  margin: 4px 12px 8px;
  color: #9a95a6;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  text-decoration: none;
  transition: background 160ms var(--ease-out);
}

.mega-link::after {
  display: none;
}

.mega-link:hover,
.mega-link.is-active {
  background: rgba(17, 15, 26, 0.04);
}

.mega-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 15, 26, 0.09);
  border-radius: 12px;
  background: #f7f6fa;
  color: #6a0dad;
}

.mega-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mega-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-text strong {
  color: #14121a;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.mega-text small {
  color: #6f6a7a;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
}

.mega-feature {
  gap: 4px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f7f5fb, #f3f1f8);
}

.mega-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 16px;
  text-decoration: none;
  transition: background 160ms var(--ease-out);
}

.mega-card::after {
  display: none;
}

.mega-card:hover {
  background: rgba(255, 255, 255, 0.75);
}

.mega-thumb {
  flex-shrink: 0;
  width: 78px;
  height: 58px;
  border: 1px solid rgba(17, 15, 26, 0.08);
  border-radius: 12px;
  background-color: #e9e6f2;
}

.mega-thumb-a { background: linear-gradient(135deg, #6a0dad, #b07be0); }
.mega-thumb-b { background: linear-gradient(135deg, #2e2e3a, #6a0dad); }
.mega-thumb-c { background: linear-gradient(135deg, #8b5cf6, #e0b0ff); }
.mega-thumb-d { background: linear-gradient(135deg, #1a0d2e, #8b5cf6); }

.mega-see {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px 10px;
  color: #6a0dad;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.mega-see::after {
  display: none;
}

.mega-see svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms var(--ease-out);
}

.mega-see:hover svg {
  transform: translateX(3px);
}

.mega-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px solid rgba(17, 15, 26, 0.08);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 15, 26, 0.05), 0 20px 44px -24px rgba(17, 15, 26, 0.3);
  text-decoration: none;
}

.mega-promo::after {
  display: none;
}

.mega-promo-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6a0dad, #8b5cf6);
  color: #ffffff;
}

.mega-promo-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mega-promo-text {
  flex: 1;
  color: #6f6a7a;
  font-family: var(--font-body);
  font-size: 13.5px;
}

.mega-promo-text strong {
  color: #14121a;
  font-weight: 600;
}

.mega-promo-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid rgba(17, 15, 26, 0.14);
  border-radius: 999px;
  color: #14121a;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  transition: background 160ms var(--ease-out);
}

.mega-promo:hover .mega-promo-btn {
  background: rgba(17, 15, 26, 0.05);
}

.home-hero {
  min-height: 100svh;
  padding: 112px 0 70px;
  background: #09070d;
  color: var(--color-gem-white);
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 46%, rgba(117, 39, 173, 0.22), transparent 24rem),
    radial-gradient(circle at 12% 18%, rgba(173, 235, 179, 0.08), transparent 22rem),
    linear-gradient(135deg, #09070d 0%, #13091f 46%, #0b0b0f 100%);
}

.home-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - 182px);
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.86fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
}

.home-hero-copy {
  max-width: 760px;
}

.home-hero .eyebrow {
  color: rgba(250, 247, 253, 0.7);
}

.home-hero .hero-title {
  margin: 0 0 24px;
  color: var(--color-pure-white);
  font-family: var(--font-body);
  font-size: 5.35rem;
  font-weight: 800;
  line-height: 1.02;
}

.home-hero .hero-descriptor {
  max-width: 600px;
  margin: 0 0 34px;
  color: rgba(250, 247, 253, 0.74);
  font-family: var(--font-body);
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.home-hero .hero-actions {
  justify-content: start;
  gap: 18px;
}

.home-hero-stone {
  position: relative;
  display: grid;
  min-height: 620px;
  place-items: center;
  cursor: pointer;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--stone-press, 1));
  transform-style: preserve-3d;
  transition: transform 220ms ease-out;
}

.home-hero-stone:hover {
  --stone-press: 1.03;
}

.home-hero-stone:hover .stone-glow {
  filter: blur(16px) brightness(1.35);
}

.home-hero-stone:hover img {
  filter: drop-shadow(0 46px 130px rgba(117, 39, 173, 0.55));
}

.home-hero-stone.is-pulsed .stone-glow {
  animation: stone-glow-pulse 6s ease-in-out infinite, stone-pulse 720ms ease-out;
}

@keyframes stone-pulse {
  0% { filter: blur(12px) brightness(1); }
  40% { filter: blur(22px) brightness(2); }
  100% { filter: blur(12px) brightness(1); }
}

.home-hero-stone::before {
  content: "";
  position: absolute;
  inset: 11% 2% 8%;
  border: 1px solid rgba(250, 247, 253, 0.08);
  border-radius: 50%;
  transform-origin: center;
  animation: stone-ring-spin 34s linear infinite;
}

.home-hero-stone::after {
  content: "";
  position: absolute;
  inset: 4% -3% 1%;
  border: 1px dashed rgba(117, 39, 173, 0.16);
  border-radius: 50%;
  transform-origin: center;
  animation: stone-ring-spin 52s linear infinite reverse;
}

.stone-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(117, 39, 173, 0.48), transparent 62%);
  filter: blur(12px);
  animation: stone-glow-pulse 6s ease-in-out infinite;
}

.home-hero-stone img {
  position: relative;
  width: min(100%, 620px);
  max-height: 76svh;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 40px 110px rgba(117, 39, 173, 0.38));
  transform: translateX(2%);
  animation: stone-float 8s ease-in-out infinite;
  transition: filter 240ms ease-out;
  will-change: transform;
}

@keyframes stone-float {
  0% { transform: translateX(2%) translateY(0) rotate(-1.6deg); }
  50% { transform: translateX(2%) translateY(-18px) rotate(1.6deg); }
  100% { transform: translateX(2%) translateY(0) rotate(-1.6deg); }
}

@keyframes stone-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes stone-glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-stone::before,
  .home-hero-stone::after,
  .stone-glow,
  .home-hero-stone img {
    animation: none;
  }

  .home-hero-stone img {
    transform: translateX(2%);
  }
}

.hero-proof-grid-rich {
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
  padding-block: 34px;
}

.proof-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.proof-metrics span {
  display: grid;
  gap: 4px;
  min-height: 104px;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-surface) 66%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.25;
}

.proof-metrics strong {
  color: var(--text-primary);
  font-size: 2.2rem;
  line-height: 1;
}

.potential-moment {
  position: relative;
  display: grid;
  min-height: 70svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 52% at 50% 44%, rgba(190, 120, 250, 0.34), transparent 70%),
    linear-gradient(160deg, rgba(74, 17, 102, 0.94), rgba(36, 8, 56, 0.97)),
    url("/assets/geode-bg.webp") center/cover no-repeat;
  color: var(--color-gem-white);
  text-align: center;
}

.pm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.5;
}

.pm-orb-a {
  top: -12%;
  left: -6%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #8b5cf6, transparent 68%);
  animation: pm-drift 16s ease-in-out infinite;
}

.pm-orb-b {
  right: -8%;
  bottom: -16%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, #c084fc, transparent 66%);
  animation: pm-drift 20s ease-in-out infinite reverse;
}

@keyframes pm-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}

.pm-title {
  max-width: 1020px;
  margin: 0 auto;
  color: var(--color-pure-white);
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 5.4rem);
  font-weight: 400;
  line-height: 1.06;
}

.pm-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.pm-word > span {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms), opacity 540ms var(--ease-out) var(--d, 0ms);
}

.potential-moment.is-visible .pm-word > span {
  transform: translateY(0);
  opacity: 1;
}

.pm-accent > span {
  font-style: italic;
  padding-right: 0.06em;
  background: linear-gradient(95deg, #e0b0ff, #a06bf0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pm-rule {
  display: block;
  width: 72px;
  height: 2px;
  margin: 38px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #c084fc, #7c3aed);
  transform: scaleX(0);
  transition: transform 640ms var(--ease-out) 780ms;
}

.potential-moment.is-visible .pm-rule {
  transform: scaleX(1);
}

.potential-moment .eyebrow {
  color: rgba(250, 247, 253, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .pm-word > span {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .pm-rule {
    transform: scaleX(1);
    transition: none;
  }

  .pm-orb {
    animation: none;
  }
}

[data-theme="light"] .home-hero {
  background: #fbf9fd;
  color: var(--color-ink);
}

[data-theme="light"] .home-hero-bg {
  background:
    radial-gradient(circle at 74% 46%, rgba(117, 39, 173, 0.16), transparent 24rem),
    linear-gradient(135deg, #ffffff 0%, #fbf9fd 50%, #f6f0fb 100%);
}

[data-theme="light"] .home-hero .hero-title,
[data-theme="light"] .home-hero .hero-descriptor {
  color: var(--color-ink);
}

[data-theme="light"] .home-hero .eyebrow {
  color: var(--color-muted);
}

[data-theme="light"] .hero-text-link {
  color: var(--color-ink);
}

[data-theme="light"] .proof-metrics span {
  background: var(--color-pure-white);
}

@media (max-width: 1120px) {
  .mega {
    display: none;
  }

  .home-hero-grid,
  .hero-proof-grid-rich {
    grid-template-columns: 1fr;
  }

  .client-proof-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .home-hero-stone {
    min-height: 480px;
    opacity: 0.92;
  }

  .home-hero .hero-title {
    font-size: 4.35rem;
  }
}

@media (max-width: 820px) {
  .home-hero {
    padding: 104px 0 58px;
  }

  .home-hero-grid {
    min-height: calc(100svh - 162px);
  }

  .home-hero-stone {
    min-height: 300px;
    margin-bottom: -20px;
  }

  .home-hero-stone img {
    width: min(84vw, 380px);
    max-height: 42svh;
  }

  .home-hero .hero-title {
    font-size: 3.25rem;
  }

  .proof-metrics {
    grid-template-columns: 1fr;
  }

  .potential-moment h2 {
    font-size: 3rem;
  }
}

/* Section refinements from client review */
.hero-proof-grid-rich {
  align-items: stretch;
}

.hero-proof-grid-rich > div:first-child {
  display: grid;
  align-content: center;
}

.hero-proof-grid-rich .hero-logo-rail {
  align-content: stretch;
}

.proof-metrics {
  align-items: stretch;
}

.proof-metrics span {
  min-height: 128px;
}

.proof-metrics strong {
  font-family: var(--font-body);
  font-weight: 800;
}

.founder-portrait {
  min-height: 560px;
}

/* Bottom scrim only, to keep the name label legible. The purple radial that
   used to sit on top stepped from transparent to 20% opacity between 26% and
   27%, and that hard stop drew a visible ring around the subject's face. */
.founder-portrait::before {
  background: linear-gradient(180deg, rgba(11, 11, 15, 0.04), transparent 38%, rgba(11, 11, 15, 0.56));
}

.founder-portrait img {
  opacity: 1;
  object-position: center center;
}

.video-landscape-layout {
  display: grid;
  gap: 36px;
}

.video-landscape-heading {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.video-landscape-heading .lead {
  margin-inline: auto;
}

.landscape-video-tile.is-static {
  cursor: default;
}

.landscape-video-tile {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(360px, 58vw, 720px);
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: #09070d;
  color: var(--color-gem-white);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.28);
}

.landscape-video-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 7, 13, 0.08), rgba(9, 7, 13, 0.78)),
    radial-gradient(circle at 52% 42%, rgba(117, 39, 173, 0.34), transparent 22rem),
    url("/assets/geode-bg.webp") center/cover no-repeat;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-out), opacity 420ms var(--ease-out), filter 420ms var(--ease-out);
}

.landscape-video-tile:hover .landscape-video-backdrop {
  filter: saturate(1.1) contrast(1.06);
  transform: scale(1.055);
}

.landscape-video-overlay {
  position: relative;
  z-index: 3;
  display: grid;
  max-width: 620px;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  text-align: center;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.landscape-video-overlay .video-play-button {
  position: static;
  width: 86px;
  height: 86px;
  margin-bottom: 10px;
  font-size: 28px;
  transform: none;
}

.landscape-video-overlay strong {
  font-size: 2.45rem;
  line-height: 1.05;
}

.landscape-video-overlay small {
  max-width: 46ch;
  color: rgba(250, 247, 253, 0.72);
  font-size: 1rem;
}

.landscape-video-tile.is-playing .landscape-video-overlay {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.landscape-video-tile.is-playing .landscape-video-backdrop {
  opacity: 0.42;
}

.video-frame-slot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}

.video-frame-slot iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame-slot::before {
  content: "YouTube video slot";
  display: none;
  color: rgba(250, 247, 253, 0.62);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landscape-video-tile.is-playing .video-frame-slot:empty::before {
  display: block;
}

.testimonial-card {
  display: grid;
  align-content: space-between;
  gap: 22px;
}

.testimonial-card p {
  color: var(--text-primary);
  font-size: 1.25rem;
  line-height: 1.34;
}

.testimonial-card h3 {
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
}

[data-theme="light"] .node {
  color: #4f465e;
}

[data-theme="light"] .node-circle,
[data-theme="light"] .method-panel {
  background: #ffffff;
  color: var(--color-ink);
  border-color: rgba(102, 48, 135, 0.22);
}

[data-theme="light"] .node[aria-selected="true"] {
  color: var(--color-ink);
}

[data-theme="light"] .node[aria-selected="true"] .node-circle {
  background: #f6f0fb;
  color: var(--color-purple-stone);
}

[data-theme="light"] .method-panel li {
  color: var(--color-muted);
}

@media (max-width: 820px) {
  .landscape-video-tile {
    min-height: 340px;
    border-radius: var(--radius-md);
  }

  .landscape-video-overlay strong {
    font-size: 1.85rem;
  }

  .founder-portrait {
    min-height: 380px;
  }
}

/* ===== Inner-page polish: shared media cards, banners, badges ===== */

/* Cards hidden by filters (e.g. insights) must stay hidden even when their
   class sets an explicit display. */
[hidden] {
  display: none !important;
}

.capability-banner {
  min-height: clamp(200px, 26vw, 280px);
  margin-bottom: 34px;
}

.capability-block .proof-cta {
  margin-top: 10px;
}

.resmag-grid.case-pattern-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .resmag-grid.case-pattern-grid {
    grid-template-columns: 1fr;
  }
}

.resmag-copy {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.resmag-card .card-link {
  margin-top: 14px;
}

.resmag-card-title a {
  color: inherit;
  text-decoration: none;
}

a.resmag-media {
  display: block;
}

.insights-mag-grid {
  row-gap: 40px;
}

.insight-card-tags {
  /* Cards are flex columns inside equal-height grid rows, so pushing the
     tag row down with auto margin baseline-aligns pills across all cards. */
  margin: auto 0 0;
  padding-top: 14px;
}

.industry-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.industry-ico svg {
  width: 24px;
  height: 24px;
}

.featured-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.contact-direct {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.contact-direct-note {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Fluid capability headings — the fixed 4.25rem forced ~430px min-width and
   horizontally overflowed narrow phones. */
.capability-block h2 {
  font-size: clamp(2.1rem, 8.5vw, 4.25rem);
  overflow-wrap: break-word;
}

/* Narrow-viewport width forcers: form controls keep an intrinsic min width,
   and footer link labels stay breakable. */
.form .field input,
.form .field select,
.form .field textarea {
  width: 100%;
  min-width: 0;
}

/* Once the closer CTAs stack, both pills span the panel so their edges line
   up instead of each sizing to its own label. */
@media (max-width: 560px) {
  .closer-actions {
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
  }

  .closer-actions .proof-cta {
    justify-content: space-between;
  }

  .closer-actions .closer-ghost {
    justify-content: center;
  }
}

.fp-cols a {
  overflow-wrap: anywhere;
}

/* Mobile & tablet: once the two-column layouts stack, section intros and page
   heroes centre. Content bodies — cards, prose, forms, footer — stay left so
   long-form reading keeps a consistent left edge. */
@media (max-width: 900px) {
  .home-hero-copy {
    margin-inline: auto;
    text-align: center;
  }

  .home-hero .hero-descriptor {
    margin-inline: auto;
  }

  .home-hero .hero-actions {
    justify-content: center;
  }

  .page-hero .container {
    text-align: center;
  }

  .page-hero .lead {
    margin-inline: auto;
  }

  .page-hero .button-row {
    justify-content: center;
    justify-items: center;
  }

  /* Inner-page section intros: direct children only, so cards in the
     sibling .grid keep their own alignment. */
  .section > .container > .eyebrow,
  .section > .container > .display,
  .section > .container > .lead {
    margin-inline: auto;
    text-align: center;
  }

  .client-proof-intro,
  .capsteps-intro,
  .problem-intro,
  .pillars-head,
  .tsec-title,
  .method-diagram {
    text-align: center;
  }

  .client-proof-intro,
  .problem-heading,
  .problem-subhead,
  .pillars-lead {
    margin-inline: auto;
  }

  .pillars-head {
    justify-items: center;
  }

  .pillars-tags {
    justify-content: center;
  }

  .resmag-head {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
}

/* ===== Editorial inner-page layout ==================================
   Inner pages (everything but the homepage) follow an editorial grid:
   small label column left, content right; hero with an accent phrase
   and a full-bleed media band; a dark statement band for the intro
   sections; numbered rows for lists. The navbar, closer CTA, and
   footer keep their existing treatment. */

.ed-hero {
  min-height: 0;
  align-items: start;
  padding: 168px 0 0;
  background: var(--bg-page);
}

.ed-hero-grid {
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 260px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.ed-label {
  margin: 0;
  padding-top: 16px;
}

.ed-hero .page-title {
  margin-bottom: 36px;
  font-size: clamp(3.1rem, 6.2vw, 5.6rem);
  line-height: 1.02;
  max-width: 20ch;
}

.ed-accent {
  color: var(--color-green-spark);
}

[data-theme="light"] .ed-accent {
  color: var(--color-purple-stone-bright);
}

.ed-hero-sub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: 940px;
}

.ed-hero-sub .lead {
  margin: 0;
  max-width: 50ch;
  font-size: 1.08rem;
}

.ed-hero-sub .proof-cta {
  flex: none;
}

.ed-hero-media {
  height: clamp(300px, 52vh, 560px);
  margin-top: clamp(44px, 7vw, 84px);
  overflow: clip;
}

.ed-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Square marker on section labels, echoing the hero label. */
.ed-label,
body[data-page="inner"] .section > .container > .eyebrow,
body[data-page="inner"] .section > .container-narrow > .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ed-label::before,
body[data-page="inner"] .section > .container > .eyebrow::before,
body[data-page="inner"] .section > .container-narrow > .eyebrow::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: currentColor;
}

/* Label-left editorial grid for sections led by an eyebrow or tag row. */
body[data-page="inner"] .section > .container:has(> .eyebrow),
body[data-page="inner"] .section > .container:has(> .pillars-tags) {
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 260px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
}

body[data-page="inner"] .section > .container:has(> .eyebrow) > *,
body[data-page="inner"] .section > .container:has(> .pillars-tags) > * {
  grid-column: 2;
}

body[data-page="inner"] .section > .container > .eyebrow,
body[data-page="inner"] .section > .container:has(> .pillars-tags) > .pillars-tags {
  grid-column: 1;
  grid-row: 1 / span 24;
  align-self: start;
  position: sticky;
  top: 110px;
  margin: 6px 0 0;
}

/* Dark statement band: intro sections built as container-narrow + display. */
body[data-page="inner"] .section:has(> .container-narrow > .display) {
  background:
    radial-gradient(circle at 82% 10%, rgba(117, 39, 173, 0.26), transparent 26rem),
    #0a080e;
  border-block: 1px solid rgba(250, 247, 253, 0.1);
  color: var(--color-gem-white);
}

body[data-page="inner"] .section:has(> .container-narrow > .display) > .container-narrow {
  width: min(100% - 48px, 1200px);
  display: grid;
  grid-template-columns: clamp(170px, 20vw, 260px) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
}

body[data-page="inner"] .section:has(> .container-narrow > .display) > .container-narrow > * {
  grid-column: 2;
}

body[data-page="inner"] .section:has(> .container-narrow > .display) .eyebrow {
  grid-column: 1;
  grid-row: 1 / span 12;
  align-self: start;
  margin: 8px 0 0;
  color: var(--color-green-spark);
}

body[data-page="inner"] .section:has(> .container-narrow > .display) .display {
  margin-bottom: 34px;
  color: var(--color-pure-white);
  font-size: clamp(2.5rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  max-width: 22ch;
}

body[data-page="inner"] .section:has(> .container-narrow > .display) .lead {
  max-width: 58ch;
  color: rgba(250, 247, 253, 0.76);
  font-size: 1.08rem;
}

/* Numbered rows replace check bullets inside the statement band. */
body[data-page="inner"] .section:has(> .container-narrow > .display) .check-list {
  counter-reset: edrow;
  margin: 40px 0 34px;
  gap: 0;
}

body[data-page="inner"] .section:has(> .container-narrow > .display) .check-list li {
  counter-increment: edrow;
  padding: 18px 0 18px 64px;
  border-top: 1px solid rgba(250, 247, 253, 0.14);
  color: rgba(250, 247, 253, 0.78);
}

body[data-page="inner"] .section:has(> .container-narrow > .display) .check-list li:last-child {
  border-bottom: 1px solid rgba(250, 247, 253, 0.14);
}

body[data-page="inner"] .section:has(> .container-narrow > .display) .check-list li::before {
  content: counter(edrow, decimal-leading-zero);
  top: 20px;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--color-green-spark);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Capabilities: number each offering like an editorial process list. */
body[data-page="inner"] .anchor-layout > div {
  counter-reset: capn;
}

body[data-page="inner"] .capability-block {
  counter-increment: capn;
}

body[data-page="inner"] .capability-block h2 {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

body[data-page="inner"] .capability-block h2::before {
  content: counter(capn, decimal-leading-zero);
  flex: none;
  color: var(--color-green-spark);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

[data-theme="light"] body[data-page="inner"] .capability-block h2::before {
  color: var(--color-purple-stone-bright);
}

/* All inner-page cards share the homepage card chrome (the testimonial
   tcard): translucent surface, rule border, 24px radius, hover lift.
   Neutralises the tilt/gradient treatment of the base .card. */
body[data-page="inner"] .card {
  min-height: 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg-surface) 55%, transparent);
  transform: none;
  box-shadow: none;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

body[data-page="inner"] .card::after {
  display: none;
}

body[data-page="inner"] .card:hover,
body[data-page="inner"] .card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: none;
}

/* Card sections: dark band, big heading in the left column, homepage-style
   cards in a 2-up grid on the right. */
body[data-page="inner"] .section:has(> .container > .grid.four),
body[data-page="inner"] .section:has(> .container > .grid.two) {
  background:
    radial-gradient(circle at 16% 12%, rgba(117, 39, 173, 0.2), transparent 24rem),
    #0a080e;
  border-block: 1px solid rgba(250, 247, 253, 0.1);
  color: var(--color-gem-white);
}

/* Inside the dark band the cards keep the homepage dark-theme surface so
   text stays readable in both site themes. */
body[data-page="inner"] .section:has(> .container > .grid.four) .card,
body[data-page="inner"] .section:has(> .container > .grid.two) .card {
  border-color: rgba(250, 247, 253, 0.14);
  background: rgba(250, 247, 253, 0.05);
}

body[data-page="inner"] .section:has(> .container > .grid.four) .card h3,
body[data-page="inner"] .section:has(> .container > .grid.two) .card h3,
body[data-page="inner"] .section:has(> .container > .grid.four) .card .card-label,
body[data-page="inner"] .section:has(> .container > .grid.two) .card .card-label {
  color: var(--color-pure-white);
}

body[data-page="inner"] .section:has(> .container > .grid.four) .card p,
body[data-page="inner"] .section:has(> .container > .grid.two) .card p,
body[data-page="inner"] .section:has(> .container > .grid.two) .card li {
  color: rgba(250, 247, 253, 0.72);
}

body[data-page="inner"] .section > .container:has(> .grid.four),
body[data-page="inner"] .section > .container:has(> .grid.two) {
  grid-template-columns: minmax(230px, 0.85fr) minmax(0, 1.8fr);
  align-items: start;
}

body[data-page="inner"] .section > .container:has(> .grid.four) > .eyebrow,
body[data-page="inner"] .section > .container:has(> .grid.two) > .eyebrow {
  grid-row: 1;
  position: static;
  color: var(--color-green-spark);
}

body[data-page="inner"] .section > .container:has(> .grid.four) > .display,
body[data-page="inner"] .section > .container:has(> .grid.two) > .display {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--color-pure-white);
  font-size: clamp(2rem, 2.9vw, 2.7rem);
  line-height: 1.12;
  max-width: 16ch;
}

body[data-page="inner"] .section > .container:has(> .display) > .grid.four,
body[data-page="inner"] .section > .container:has(> .display) > .grid.two {
  grid-column: 2;
  grid-row: 1 / span 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

@media (max-width: 900px) {
  .ed-hero {
    padding-top: 128px;
  }

  .ed-hero-grid,
  body[data-page="inner"] .section > .container:has(> .eyebrow),
  body[data-page="inner"] .section > .container:has(> .pillars-tags) {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  body[data-page="inner"] .section > .container:has(> .eyebrow) > *,
  body[data-page="inner"] .section > .container:has(> .pillars-tags) > * {
    grid-column: 1;
  }

  body[data-page="inner"] .section > .container > .eyebrow,
  body[data-page="inner"] .section > .container:has(> .pillars-tags) > .pillars-tags {
    grid-row: auto;
    position: static;
  }

  .ed-label,
  body[data-page="inner"] .section > .container > .eyebrow {
    justify-content: center;
  }

  .ed-hero-sub {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  .ed-hero .page-title {
    margin-inline: auto;
  }

  body[data-page="inner"] .section:has(> .container-narrow > .display) > .container-narrow {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  body[data-page="inner"] .section:has(> .container-narrow > .display) > .container-narrow > * {
    grid-column: 1;
  }

  body[data-page="inner"] .section:has(> .container-narrow > .display) .eyebrow {
    grid-row: auto;
    justify-content: center;
    margin: 0;
  }

  body[data-page="inner"] .section:has(> .container-narrow > .display) .lead {
    margin-left: 0;
    margin-inline: auto;
  }

  body[data-page="inner"] .section:has(> .container-narrow > .display) .display {
    margin-inline: auto;
  }

  body[data-page="inner"] .section:has(> .container-narrow > .display) .check-list li {
    text-align: left;
  }

  body[data-page="inner"] .capability-block h2 {
    justify-content: center;
  }

  body[data-page="inner"] .section > .container:has(> .grid.four),
  body[data-page="inner"] .section > .container:has(> .grid.two) {
    grid-template-columns: 1fr;
  }

  body[data-page="inner"] .section > .container:has(> .grid.four) > .display,
  body[data-page="inner"] .section > .container:has(> .grid.two) > .display {
    grid-column: 1;
    grid-row: auto;
    margin-inline: auto;
    margin-bottom: 10px;
  }

  body[data-page="inner"] .section > .container:has(> .display) > .grid.four,
  body[data-page="inner"] .section > .container:has(> .display) > .grid.two {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-page="inner"] .section > .container > .grid.four .card,
  body[data-page="inner"] .section > .container > .grid.two .card {
    text-align: left;
  }
}

@media (max-width: 640px) {
  body[data-page="inner"] .section > .container:has(> .display) > .grid.four,
  body[data-page="inner"] .section > .container:has(> .display) > .grid.two {
    grid-template-columns: 1fr;
  }
}

/* Capabilities spec panel: the three detail lists were 273px columns holding
   50-character items, so everything wrapped to four cramped lines. They now
   share ONE white panel (same surface as the homepage capability card) split
   into label-left rows, which gives each item roughly 50% more measure. */
body[data-page="inner"] .capability-block .grid.three {
  display: block;
  padding: clamp(6px, 1vw, 14px) clamp(22px, 2.4vw, 38px);
  border: 1px solid rgba(17, 15, 26, 0.06);
  border-radius: 26px;
  background: #ffffff;
  color: #14121a;
  box-shadow: 0 30px 60px -34px rgba(20, 10, 45, 0.7);
}

body[data-page="inner"] .capability-block .grid.three .card {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 40px);
  align-items: start;
  min-height: 0;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border: 0;
  border-top: 1px solid rgba(17, 15, 26, 0.09);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

body[data-page="inner"] .capability-block .grid.three .card:first-child {
  border-top: 0;
}

body[data-page="inner"] .capability-block .grid.three .card::after {
  display: none;
}

body[data-page="inner"] .capability-block .grid.three .card-label {
  margin: 0;
  padding-top: 3px;
  color: #8b5cf6;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* Items flow into as many columns as fit, so short lists sit on one row
   and long ones keep a comfortable measure instead of stacking narrow. */
body[data-page="inner"] .capability-block .grid.three .check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 13px clamp(20px, 2.4vw, 40px);
  margin: 0;
}

body[data-page="inner"] .capability-block .grid.three .check-list li {
  padding-left: 30px;
  color: #4a4557;
  font-size: 0.97rem;
  line-height: 1.45;
}

body[data-page="inner"] .capability-block .grid.three .check-list li::before {
  top: 0.1em;
  width: 19px;
  height: 19px;
  background: rgba(102, 48, 135, 0.1);
  color: #663087;
  font-size: 10px;
}

[data-theme="light"] body[data-page="inner"] .capability-block .grid.three {
  box-shadow: 0 30px 60px -38px rgba(20, 10, 45, 0.35);
}

/* The eyebrow already reads "BUILD / 01", so the counter on the heading was
   a second copy of the same number sitting off the title's left edge. */
body[data-page="inner"] .capability-block h2::before {
  content: none;
}

/* Fallback for any scroll path that bypasses scrollToTarget's offset. */
.capability-block {
  scroll-margin-top: 120px;
}

.anchor-nav a.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text-primary);
}

@media (max-width: 640px) {
  body[data-page="inner"] .capability-block .grid.three .card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ===== Contact page: editorial form panel + photo + info strip ===== */
.contact-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 22px;
  align-items: stretch;
}

.contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-form-panel {
  gap: 22px;
  padding: clamp(28px, 3.4vw, 46px);
  border-radius: 26px;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--bg-surface);
}

.contact-form-panel .button-row {
  margin-top: 6px;
}

/* Field polish: quieter labels, roomier controls, clear focus state. */
.contact-form-panel .field label {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.contact-form-panel .field input,
.contact-form-panel .field textarea,
.contact-form-panel .ps-select-btn {
  min-height: 50px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-page) 70%, transparent);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
}

.contact-form-panel .field input:hover,
.contact-form-panel .field textarea:hover,
.contact-form-panel .ps-select-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
}

.contact-form-panel .field input:focus-visible,
.contact-form-panel .field textarea:focus-visible,
.contact-form-panel .ps-select-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.contact-form-panel .field textarea {
  min-height: 132px;
  padding-top: 14px;
}

.contact-form-panel .field input::placeholder,
.contact-form-panel .field textarea::placeholder {
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
}

/* ===== Custom dropdown (mirrors the footer language picker) ===== */
.ps-select {
  position: relative;
}

.ps-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.ps-select-caret {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--text-secondary);
  transition: transform 220ms var(--ease-out);
}

.ps-select.is-open .ps-select-caret {
  transform: rotate(180deg);
}

.ps-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: 0 26px 56px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}

.ps-select.is-open .ps-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ps-select-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.97rem;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}

.ps-select-opt:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--text-primary);
}

.ps-select-opt[aria-selected="true"] {
  color: var(--text-primary);
  font-weight: 700;
}

/* Check mark on the selected option. */
.ps-select-opt[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--accent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

button.nav-cta {
  border: 0;
  cursor: pointer;
}

.contact-photo {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  min-height: 420px;
}

.contact-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-photo-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #14121a;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-info-strip {
  display: grid;
  /* auto-fit so the row stays balanced whether it holds two tiles or three */
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  justify-content: center;
  gap: 32px clamp(40px, 8vw, 110px);
  margin-top: clamp(48px, 7vw, 84px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rule);
  text-align: center;
}

/* Each column is a centred stack with a shared, narrow measure so the three
   text blocks read as one aligned row rather than three ragged ones. */
.contact-info-strip > div {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0;
  width: min(100%, 264px);
  margin-inline: auto;
}

.contact-info-strip .ci-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--accent-text);
}

.contact-info-strip .ci-ico svg {
  width: 20px;
  height: 20px;
}

.contact-info-strip h3 {
  margin: 14px 0 10px;
  font-size: 1.05rem;
}

.contact-info-strip p {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.5;
  text-wrap: balance;
}

/* The email is the one unbreakable token in the row; let it wrap instead of
   stretching its column wider than the other two. Set smaller than the
   surrounding copy so the address holds one line at desktop widths rather
   than breaking mid-domain. */
.contact-info-strip a {
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .contact-panel-grid {
    grid-template-columns: 1fr;
  }

  .contact-photo {
    min-height: 260px;
  }

  .contact-info-strip {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .contact-fields {
    grid-template-columns: 1fr;
  }
}

/* ===== Brand accessibility pass =====================================
   Per the brand guide: purple carries text accents on light surfaces,
   green is reserved for dark backgrounds, and tints may be used for
   text readability. --accent-text is the readable accent for small
   text: a purple tint on dark themes (7.7:1 on the night background),
   Purple Stone on light (9:1 on white). */
:root {
  --accent-text: #b794e0;
}

[data-theme="light"] {
  --accent-text: var(--color-purple-stone);
}

.eyebrow {
  color: var(--accent-text);
}

/* Kickers stay Green Spark on dark surfaces; on light surfaces green
   fails contrast and the brand forbids it, so they fall back to purple. */
.kicker {
  color: var(--color-green-spark);
}

[data-theme="light"] .kicker {
  color: var(--color-purple-stone);
}

[data-theme="light"] .ink-band .kicker {
  color: var(--color-green-spark);
}

.card-label {
  color: var(--accent-text);
}

/* Step kickers sit on white cards in both themes: Purple Stone. */
.capstep-kicker,
body[data-page="inner"] .capability-block .card .card-label {
  color: var(--color-purple-stone);
}

/* Rotating hero word: readable purple on the light hero. */
[data-theme="light"] .word-switch {
  color: var(--color-purple-stone-bright);
  text-shadow: none;
}

/* Lavender chip text was tuned for dark surfaces; switch to Purple
   Stone when the chip sits on a light surface. */
[data-theme="light"] .pillars-tag,
[data-theme="light"] .capsteps-pill,
[data-theme="light"] .method-kicker,
[data-theme="light"] .method-pair,
[data-theme="light"] .pillar-badge,
[data-theme="light"] .check-list li::before,
[data-theme="light"] .method-panel li::before,
[data-theme="light"] .node.is-done .node-circle {
  color: var(--color-purple-stone);
}

/* The ink band keeps its dark background in both themes, so its
   descendants keep the dark-safe tokens and light text. */
.ink-band {
  --accent-text: #b794e0;
  --text-secondary: rgba(250, 247, 253, 0.72);
}

[data-theme="light"] .ink-band .pillars-tag {
  color: #d7bdf2;
}

/* The method panel is a light island inside the dark ink band in light
   mode, so it restores the light-surface tokens. */
[data-theme="light"] .ink-band .method-panel {
  --text-secondary: var(--color-muted);
  --accent-text: var(--color-purple-stone);
}

[data-theme="light"] .ink-band .node {
  color: rgba(250, 247, 253, 0.64);
}

[data-theme="light"] .ink-band .node[aria-selected="true"] {
  color: var(--color-gem-white);
}

/* Overlay close buttons sit on theme surfaces, not the white nav pill. */
.search-panel .icon-button,
.cookie-panel .icon-button {
  color: var(--text-secondary);
}

/* Problem cards now use brand purple gradients with light text; the dark
   CTA pill needs an edge to read as a control on the dark surface. */
.pstack-card .proof-cta.dark {
  border: 1px solid rgba(250, 247, 253, 0.3);
}

/* Pages without a closer CTA (contact, legal, 404) put the footer panel at
   the very top of the closer card, where the gradient's radial bloom would
   sit right behind it. Drop the bloom, use the deep end of the ramp, and
   add the breathing room the CTA would otherwise have provided. */
.closer-card:not(:has(.closer-cta)) {
  padding-top: clamp(40px, 6vw, 80px);
  background: linear-gradient(165deg, #2a0a45 0%, #3c1266 100%);
}

/* Audience tags on insight cards: compact editorial chips instead of the
   oversized bordered lozenges — soft accent tint, mono uppercase, no border. */
.insight-card-tags .tag {
  min-height: 26px;
  padding: 0 12px;
  border: 0;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
}

/* Card-title hover was a fixed lavender; keep it only on dark surfaces
   and use a readable brand purple on light. */
[data-theme="light"] .resmag-card:hover .resmag-card-title,
[data-theme="light"] .resmag-card:hover .resmag-card-title a {
  color: var(--color-purple-stone-bright);
}

/* ===== Single-typeface migration ===================================
   The site previously paired Instrument Serif headings with Instrument
   Sans body copy. The brand guide names one primary face (Inter), and
   the CEO asked for a single font, so every role now resolves to Inter.

   These headings were serif at weight 400. A serif carries display size
   at that weight; a grotesque does not — it reads thin and washed out.
   The brand guide's headline spec is Bold with negative tracking, so
   they move to 700. Pull-quotes stay lighter: they are editorial voice,
   not headings, and bolding them would flatten the hierarchy. */
.client-proof-title,
.problem-heading,
.problem-card-title,
.resmag-title,
.resmag-feature-title,
.pillars-title,
.capsteps-title,
.capstep-title,
.feature-copy h2,
.story-tile strong,
.card h3,
.method-panel h3,
.closer-title,
.featured-case-copy h2,
.pm-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.quote-mark,
.testimonial-spotlight p,
.founder-copy blockquote {
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* Per-section display sizes, rescaled for Inter. Each of these was tuned to
   Instrument Serif; at the same rem value Inter runs noticeably wider and
   taller, pushing the home hero from two lines to four. Sizes come down
   ~13%, and the hero drops from 800 to 700 so one weight carries every
   display heading. */
.home-hero .hero-title {
  font-size: 4.6rem;
  font-weight: 700;
}

.ed-hero .page-title {
  font-size: clamp(2.7rem, 5.4vw, 4.8rem);
}

.pm-title {
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
}

.closer-title {
  font-size: clamp(2.2rem, 3.9vw, 3.4rem);
}

.pillars-title {
  font-size: clamp(2.3rem, 4vw, 3.5rem);
}

.capsteps-title {
  font-size: clamp(2.1rem, 3.5vw, 3.1rem);
}

.client-proof-title {
  font-size: clamp(2.1rem, 3.5vw, 2.9rem);
}

.problem-heading {
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
}