/* ---------- Fonts: General Sans (self-hosted, Fontshare — free for commercial use) ---------- */
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans/GeneralSans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans/GeneralSans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans/GeneralSans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/general-sans/GeneralSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Fonts: Geist Mono, Hanken Grotesk, Instrument Serif (self-hosted,
   OFL; latin subsets from Google Fonts; the CDN link is gone: render-blocking
   and a GDPR exposure since the 2022 German Google-Fonts rulings) ---------- */
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono/GeistMono-latin-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk/HankenGrotesk-latin-var.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif/InstrumentSerif-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #f4f4f5;
  --bg-elev: #fafafa;
  --surface: #ffffff;
  --surface-muted: #ededef;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --text-muted: #52525b;
  --text-soft: #71717a;
  --accent: #0a0a0a; /* off-black, not pure #000 */
  --accent-contrast: #fafafa;
  --accent-tone: #4f6a5c; /* desaturated sage, single muted accent (deepened) */
  --ring: rgba(24, 24, 27, 0.10);
  /* tinted shadows toward the bg hue, never pure black */
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04),
    0 1px 3px rgba(24, 24, 27, 0.05);
  --shadow-md: 0 18px 38px -22px rgba(24, 24, 27, 0.22),
    0 6px 14px -8px rgba(24, 24, 27, 0.07);
  --shadow-diffuse: 0 24px 60px -28px rgba(24, 24, 27, 0.18);
  --inset-refraction: inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(24, 24, 27, 0.04);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --container: 1160px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-brand: "Hanken Grotesk", var(--font-sans);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* native anchors clear the sticky nav (Lenis removed) */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: radial-gradient(
      1000px 600px at 85% -10%,
      rgba(24, 24, 27, 0.04),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at -10% 10%,
      rgba(24, 24, 27, 0.03),
      transparent 55%
    );
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--text);
}
p {
  margin: 0;
  color: var(--text-muted);
}

.container {
  width: min(var(--container), calc(100% - 2.5rem));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--border-strong);
  display: inline-block;
}

/* Editorial chapter label: the uppercase name with an underline rule */
.eyebrow--chapter {
  align-self: flex-start;
  gap: 0.55rem;
  color: var(--text);
  margin-bottom: 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-strong);
}
.eyebrow--chapter::before {
  display: none;
}
.eyebrow--status {
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  background: rgba(24, 24, 27, 0.94);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #d4d4d8;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero .eyebrow--status,
.cs-hero .eyebrow--status {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(10, 10, 10, 0.72);
  color: #e4e4e7;
}
/* Home pages with video hero: keep nav transparent at top so video is continuous */
body.home-video .nav,
body.case-studies-video .nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.home-video .nav.is-scrolled,
body.case-studies-video .nav.is-scrolled {
  background: rgba(10, 10, 10, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
body.home-video .brand,
body.home-video .brand__name,
body.home-video .nav__links a,
body.case-studies-video .brand,
body.case-studies-video .brand__name,
body.case-studies-video .nav__links a {
  color: #f4f4f5;
}
body.home-video .nav__links a::after,
body.case-studies-video .nav__links a::after {
  background: #f4f4f5;
}
body.home-video .lang__trigger,
body.case-studies-video .lang__trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f4f4f5;
}
body.home-video .lang__trigger:hover,
body.case-studies-video .lang__trigger:hover {
  background: rgba(255, 255, 255, 0.14);
}
body.home-video .lang__chevron,
body.case-studies-video .lang__chevron {
  color: #d4d4d8;
}
body.home-video .nav__toggle,
body.case-studies-video .nav__toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
body.home-video .nav__toggle span,
body.case-studies-video .nav__toggle span {
  background: #f4f4f5;
}
/* (mobile open-state styling lives with the takeover menu in the 720px block) */
body.home-video .hero .btn--ghost {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(10, 10, 10, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.home-video .hero .btn--primary,
body.home-video .nav__cta .btn--primary,
body.case-studies-video .nav__cta .btn--primary {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(10, 10, 10, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.home-video .hero .btn--ghost:hover {
  background: rgba(10, 10, 10, 0.72);
  border-color: rgba(255, 255, 255, 0.88);
  color: #ffffff;
}
body.home-video .hero .btn--primary:hover,
body.home-video .nav__cta .btn--primary:hover,
body.case-studies-video .nav__cta .btn--primary:hover {
  background: rgba(10, 10, 10, 0.72);
  border-color: rgba(255, 255, 255, 0.88);
  color: #ffffff;
}
.eyebrow--status::before {
  width: 7px;
  height: 7px;
  background: var(--accent-tone);
  box-shadow: 0 0 0 0 rgba(79, 106, 92, 0.5);
  animation: plate-pulse 2.4s var(--ease) infinite;
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  max-width: none;
  margin-bottom: clamp(2.75rem, 5vw, 4.25rem);
}
/* Editorial restyle: every section header is left-aligned, even former --center ones */
.section__head--center {
  margin-inline: 0;
  text-align: left;
  align-items: flex-start;
}
.section__title {
  font-size: clamp(2.6rem, 6vw, 5.25rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.section__sub {
  align-self: flex-end;
  margin-top: 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 38rem;
  text-align: left;
}
.section__head--center .section__sub {
  margin-inline: 0;
}
/* Keep the chapter label clear of the sticky nav on anchor jumps */
main > section[id] {
  scroll-margin-top: 88px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 1.25rem;
  border-radius: 99px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
  border: 1px solid transparent;
  will-change: transform;
}
.btn:active {
  transform: scale(0.98) translateY(1px);
}
.btn__arrow {
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(2px);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.08); /* refraction inner edge */
}
.btn--primary:hover {
  background: #161616; /* off-black, never #000 */
  box-shadow: var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn--full {
  width: 100%;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}
.nav__inner {
  width: min(var(--container), calc(100% - 2.5rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.brand__name,
.footer__brand span:last-child {
  font-family: var(--font-brand);
  text-transform: lowercase;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}
/* The nav wordmark carries the same Alps-ridge underline as the hero
   brandmark, as a real inline SVG (same path, same non-scaling 1.5px
   stroke), so the logo renders identically on the mobile bar and the
   desktop hero. Muted sage on light bars; vivid sage with the hero's
   dark outline over the video heroes and the open takeover. */
.brand__name {
  position: relative;
  display: inline-block;
}
.brand__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: 0.42em;
  pointer-events: none;
  color: var(--accent-tone);
}
.brand__ridge svg {
  width: 100%;
  height: 100%;
  display: block;
}
body.home-video .brand__ridge,
body.case-studies-video .brand__ridge,
body.about-page .brand__ridge,
.nav.is-open .brand__ridge {
  color: #57ad87;
  filter: drop-shadow(0 0 1px rgba(10, 10, 10, 0.95)) drop-shadow(0 1px 2px rgba(10, 10, 10, 0.6));
}
.brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-block;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: var(--inset-refraction), 0 1px 2px rgba(24, 24, 27, 0.06);
}
.footer__brand .brand__mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.nav__links {
  display: flex;
  gap: 1.6rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.nav__links a {
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.2s var(--ease);
}
.nav__links a:hover {
  color: var(--text);
}
.nav__links a.is-active {
  color: var(--text);
}
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.nav__cta {
  display: flex;
}
/* ---------- Language dropdown ---------- */
.lang {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 44px;
  padding: 0 0.65rem 0 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 99px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.lang__trigger:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.lang__trigger:active {
  transform: scale(0.98);
}
.lang__current {
  line-height: 1;
}
.lang__chevron {
  color: var(--text-soft);
  transition: transform 0.25s var(--ease);
}
.lang.is-open .lang__chevron {
  transform: rotate(180deg);
  color: var(--text);
}
.lang.is-open .lang__trigger {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.4rem;
  box-shadow: var(--inset-refraction), var(--shadow-md);
  display: grid;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease);
  z-index: 60;
}
.lang.is-open .lang__menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.lang__option:hover,
.lang__option:focus-visible {
  background: var(--surface-muted);
  color: var(--text);
  outline: none;
}
.lang__option.is-active {
  background: var(--surface-muted);
  color: var(--text);
}
.lang__option-name {
  letter-spacing: -0.005em;
}
.lang__option-code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.nav__toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.nav.is-open .nav__toggle span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__toggle span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ---------- Hero (left-aligned split, viewport-stable) ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  margin-top: -68px;
  padding: calc(68px + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: #0f1012;
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1) brightness(0.72);
  opacity: 0.7;
}
.hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      108deg,
      rgba(10, 10, 10, 0.76) 0%,
      rgba(10, 10, 10, 0.68) 36%,
      rgba(10, 10, 10, 0.48) 58%,
      rgba(10, 10, 10, 0.22) 78%,
      rgba(10, 10, 10, 0.14) 100%
    ),
    radial-gradient(
      900px 460px at 70% 8%,
      rgba(0, 0, 0, 0.34),
      transparent 76%
    );
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
/* When the hero plate / asset is absent (homepage variant without the
   live-status card), let the copy column own the full width. */
.hero__grid:not(:has(.hero__asset)) {
  grid-template-columns: 1fr;
  max-width: 56rem;
}
.hero__copy {
  max-width: 38rem;
}
.hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4.1rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fafafa;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-tone);
  letter-spacing: -0.01em;
}
.hero__sub {
  margin: 1.5rem 0 2.25rem;
  max-width: 50ch;
  font-size: 1.08rem;
  color: #d4d4d8;
}
.hero__cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hero__meta {
  margin: 3rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hero__meta div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hero__meta dt {
  font-size: 0.74rem;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 500;
  color: #fafafa;
  letter-spacing: -0.01em;
}

/* Hero asset (right column) */
.hero__asset {
  position: relative;
  aspect-ratio: 5 / 4;
  max-height: 460px;
  min-height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.65),
    rgba(244, 244, 245, 0.65)
  );
  box-shadow: var(--inset-refraction), var(--shadow-diffuse);
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.hero__asset .dot-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 88%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 45%, transparent 88%);
}
.hero__plate {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(228, 228, 231, 0.7);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--inset-refraction), 0 18px 40px -22px rgba(24, 24, 27, 0.22);
}
.plate__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.plate__row--head {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.plate__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}
.plate__dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent-tone);
  box-shadow: 0 0 0 0 rgba(79, 106, 92, 0.45);
  animation: plate-pulse 2.4s var(--ease) infinite;
}
.plate__time {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plate__divider {
  margin: 0.85rem 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-strong) 20%,
    var(--border-strong) 80%,
    transparent
  );
}
.plate__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.plate__lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.86rem;
}
.plate__label {
  color: var(--text-muted);
}
.plate__value {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text);
  letter-spacing: -0.005em;
}
.plate__value--accent {
  color: var(--accent-tone);
  font-weight: 500;
}
@keyframes plate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 106, 92, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(79, 106, 92, 0); }
}

@media (max-width: 960px) {
  .hero {
    min-height: 0;
    padding-top: calc(68px + clamp(3rem, 8vw, 5rem));
  }
  /* the OS heroes keep their full-screen Alps on small screens (the generic
     collapse above is for the retired split-grid hero); svh so iOS toolbar
     show/hide never causes a jump */
  .hero--os,
  .hero--cs {
    min-height: 100svh;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__asset {
    aspect-ratio: 5 / 4;
    max-height: 360px;
  }
  .hero__meta {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}
@media (max-width: 560px) {
  .hero__meta {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .hero__meta div {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  /* Hero asset: drop the fixed aspect ratio on phones so the panel
     hugs the plate inside it instead of leaving large empty bands.   */
  .hero__asset {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    padding: 1.25rem;
  }
  .hero__plate {
    max-width: 100%;
    padding: 1rem 1.1rem 1.1rem;
  }
  .plate__row--head {
    font-size: 0.78rem;
  }
  .plate__lines li {
    font-size: 0.82rem;
  }
}
@media (max-width: 380px) {
  .hero__asset {
    padding: 1rem;
    border-radius: var(--radius);
  }
  .hero__plate {
    padding: 0.9rem 1rem 1rem;
  }
}

.logos {
  margin-top: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: var(--text-soft);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-muted);
  opacity: 0.85;
}

/* ---------- Sections ---------- */
section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

/* "What we do" + "How it works" + Team + Pricing + worked example + Contact — green pulsating eyebrow dot */
.features > .container > .section__head > .eyebrow::before,
.process > .container > .section__head > .eyebrow::before,
.aboutp-founders > .container > .section__head > .eyebrow::before,
.pricing > .container > .section__head > .eyebrow::before,
.pricing__example--calc > .eyebrow::before,
.faq > .container > .section__head > .eyebrow::before,
.contact > .container > .section__head > .eyebrow::before {
  background: var(--accent-tone);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-tone) 55%, transparent);
  animation: features-eyebrow-pulse 2.4s var(--ease) infinite;
}
@keyframes features-eyebrow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-tone) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-tone) 0%, transparent);
  }
}

/* Tuck "How it works" / Discover–Build–Scale under the last service row */
.features {
  padding-bottom: clamp(0.75rem, 1.8vw, 1.35rem);
}
.features + .process {
  padding-top: clamp(0.85rem, 2vw, 1.45rem);
}

/* Tuck Team block under "How it works" on the home locales */
.process:has(+ .aboutp-founders) {
  padding-bottom: clamp(0.75rem, 1.8vw, 1.35rem);
}
.process + .aboutp-founders {
  padding-top: clamp(0.85rem, 2vw, 1.45rem);
}

/* Tuck Pricing under Team (last founder card) on home locales */
.aboutp-founders:has(+ .pricing) {
  padding-bottom: clamp(0.75rem, 1.8vw, 1.35rem);
}
.aboutp-founders + .pricing {
  padding-top: clamp(0.85rem, 2vw, 1.45rem);
}

/* Tuck Contact under Pricing (home locales) */
.pricing:has(+ .contact) {
  padding-bottom: clamp(0.75rem, 1.8vw, 1.35rem);
}
.pricing + .contact {
  padding-top: clamp(0.85rem, 2vw, 1.45rem);
}

/* Contact fallback line → footer: less dead space (home locales: main ends with #contact) */
main:has(> #contact) > #contact {
  padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
}
main:has(> #contact) + .site-footer {
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
  padding-top: clamp(2rem, 4.5vw, 3.5rem);
}

/* ---------- Services (divided list, anti-3-equal-card) ---------- */
.services {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  counter-reset: service;
}
.service {
  display: grid;
  grid-template-columns: 84px 56px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.4s var(--ease);
}
.service:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
}
.service__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  padding-top: 0.4rem;
}
.service__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text);
  box-shadow: var(--inset-refraction);
}
.service__body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.55rem;
}
.service__body p {
  font-size: 1rem;
  max-width: 60ch;
}
.service__outcome {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.service__outcome-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-tone);
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
}
@media (max-width: 720px) {
  .service {
    grid-template-columns: 44px 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .service__num {
    grid-column: 1 / -1;
    padding-top: 0;
  }
}

/* ============================================================================
   Capabilities band (home "What we do"): a dark editorial 2-column layout.
   Each row pairs a 1px architectural-blueprint SVG (left) with editorial copy
   (right): mono index, title, focus paragraph, and a 2-column capability grid
   split by thin rules. Blueprint strokes draw themselves in on reveal. A
   deliberate dark contrast beat (the #0a0a0a action token, full-bleed) between
   the light pitch and process sections. Kept separate from the documented
   .services component so the brand styleguide keeps its live example intact.
   ============================================================================ */
.features--light {
  /* transparent so it shares the page canvas (#f4f4f5) like every other light
     section, instead of reading as a white patch between grey sections */
  background: transparent;
  color: #18181b;
  padding: clamp(3.75rem, 7vw, 6.5rem) 0;
}
.pitch + .features--light {
  padding-top: clamp(3.75rem, 7vw, 6.5rem);
}
.features--light + .process {
  padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
}
/* header, recoloured for the dark canvas */
.features--light .eyebrow--chapter {
  color: rgba(24, 24, 27, 0.92);
  border-bottom-color: rgba(24, 24, 27, 0.18);
}
.features--light .section__title {
  color: #18181b;
}
.features--light .section__sub {
  color: rgba(24, 24, 27, 0.6);
}

/* the rows */
.caps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(24, 24, 27, 0.12);
}
.cap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.25rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid rgba(24, 24, 27, 0.12);
}
.caps > .cap:nth-child(1) { --index: 0; }
.caps > .cap:nth-child(2) { --index: 1; }
.caps > .cap:nth-child(3) { --index: 2; }

/* left column: the blueprint panel */
.cap__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(24, 24, 27, 0.12);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(24, 24, 27, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 27, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}
/* corner register marks */
.cap__visual::before,
.cap__visual::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(24, 24, 27, 0.4);
}
.cap__visual::before {
  top: 10px;
  left: 10px;
  border-right: 0;
  border-bottom: 0;
}
.cap__visual::after {
  bottom: 10px;
  right: 10px;
  border-left: 0;
  border-top: 0;
}
.cap__visual svg {
  position: absolute;
  inset: 8%;
  color: rgba(24, 24, 27, 0.5);
  overflow: visible;
}
.cap__visual svg :is(path, rect, circle, line, polyline) {
  vector-effect: non-scaling-stroke;
}
.cap__visual .bp-grid {
  color: rgba(24, 24, 27, 0.14);
}
.cap__visual .bp-accent {
  color: #4f6a5c;
}
/* rows 01/02/03 swap the static blueprint SVG for a live canvas (cap-network.js,
   cap-viz.js). Transparent, so the panel grid + corner marks still read through. */
.cap__net,
.cap__viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* right column: editorial copy */
.cap__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: rgba(24, 24, 27, 0.38);
  margin-bottom: 1.1rem;
}
.cap__title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #18181b;
  margin: 0 0 0.7rem;
}
.cap__desc {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(24, 24, 27, 0.62);
  max-width: 46ch;
  margin: 0;
}
.cap__list-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4f6a5c;
  margin: 1.7rem 0 0.2rem;
}
.cap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1rem, 3vw, 2.5rem);
}
.cap__list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(24, 24, 27, 0.12);
  font-size: 0.94rem;
  color: rgba(24, 24, 27, 0.9);
}
.cap__list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: rgba(24, 24, 27, 0.35);
  transform: translateY(-1px);
}

/* blueprint stroke-draw on reveal */
@media (prefers-reduced-motion: no-preference) {
  .cap__visual svg :is(path, rect, circle, line, polyline) {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset 1.1s var(--ease), opacity 0.6s var(--ease);
  }
  .cap.is-visible .cap__visual svg :is(path, rect, circle, line, polyline) {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (max-width: 820px) {
  .cap {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .cap__visual {
    max-width: 440px;
  }
}
@media (max-width: 480px) {
  .cap__list {
    grid-template-columns: 1fr;
  }
}

/* HOW IT WORKS: system blueprint (sticky) + phase stepper, light theme.
   Left panel echoes the "What we do" blueprint cards; its signal reroutes to
   whichever phase is active as you hover or scroll the steps on the right. */
.bp__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}
.bp__stage { position: sticky; top: 92px; }
.bp__card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(24, 24, 27, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 27, 0.03) 1px, transparent 1px);
  background-size: 26px 26px;
  padding: 1.5rem;
  height: clamp(360px, 42vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bp__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 45%, rgba(79, 106, 92, 0.09), transparent 70%);
}
.bp__svg { position: relative; width: 100%; height: 100%; max-width: 340px; }
.bp__svg text { font-family: var(--font-mono); letter-spacing: 0.08em; }

.bp__svg .node { stroke: rgba(24, 24, 27, 0.16); stroke-width: 1.5; fill: none; transition: stroke 0.35s var(--ease), fill 0.35s var(--ease); }
.bp__svg .node text { fill: var(--text-soft); stroke: none; transition: fill 0.35s var(--ease); }
.bp__svg .seg { stroke: rgba(24, 24, 27, 0.12); stroke-width: 1.5; fill: none; transition: stroke 0.45s var(--ease); }
.bp__svg[data-active="1"] .seg0,
.bp__svg[data-active="2"] .seg0, .bp__svg[data-active="2"] .seg1,
.bp__svg[data-active="3"] .seg0, .bp__svg[data-active="3"] .seg1, .bp__svg[data-active="3"] .seg2,
.bp__svg[data-active="4"] .seg0, .bp__svg[data-active="4"] .seg1, .bp__svg[data-active="4"] .seg2, .bp__svg[data-active="4"] .seg3 { stroke: var(--accent-tone); }
.bp__svg[data-active="0"] .n0, .bp__svg[data-active="1"] .n1,
.bp__svg[data-active="2"] .n2, .bp__svg[data-active="3"] .n3,
.bp__svg[data-active="4"] .n4 { stroke: var(--text); fill: rgba(79, 106, 92, 0.06); }
.bp__svg[data-active="0"] .n0 text, .bp__svg[data-active="1"] .n1 text,
.bp__svg[data-active="2"] .n2 text, .bp__svg[data-active="3"] .n3 text,
.bp__svg[data-active="4"] .n4 text { fill: var(--text); }

/* rerouting signal: one consistent sage ring on the active phase only */
.bp__svg .pulse { display: none; fill: none; stroke: #4f6a5c; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.bp__svg[data-active="0"] .p0,
.bp__svg[data-active="1"] .p1,
.bp__svg[data-active="2"] .p2,
.bp__svg[data-active="3"] .p3,
.bp__svg[data-active="4"] .p4 { display: block; animation: bpRing 2s infinite; }
@keyframes bpRing { from { transform: scale(1); opacity: 0.85; } to { transform: scale(1.9); opacity: 0; } }

.bp__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.25rem); }
.bp__step { position: relative; padding: 0.35rem 0 0.35rem 1.35rem; opacity: 0.32; transition: opacity 0.4s var(--ease); }
.bp__step.is-active { opacity: 1; }
.bp__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  background: transparent;
  border-radius: 2px;
  transition: background 0.4s var(--ease);
}
.bp__step.is-active::before { background: var(--accent-tone); }
.bp__phase { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-tone); }
.bp__step h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0.4rem 0 0.5rem; }
.bp__step p { margin: 0 0 1.1rem; max-width: 46ch; font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); }
.bp__caps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.25rem; padding-top: 0.95rem; border-top: 1px solid var(--border); }
.bp__cap { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--text-muted); }
.bp__cap::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-tone); opacity: 0.75; flex: none; }

@media (max-width: 820px) {
  .bp__grid { grid-template-columns: 1fr; }
  .bp__stage { position: static; }
  .bp__card { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp__svg .pulse { animation: none !important; }
}

/* BRANDS: "brands we worked with". A sage signal sweeps across a blueprint row
   of logos (brands.js). Namespaced .brandwall (.brand is the header wordmark). */
.brandwall { padding: clamp(3rem, 6vw, 5rem) 0; }
.brandwall__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.brandwall__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-tone); }
.brandwall__panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(24, 24, 27, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 24, 27, 0.03) 1px, transparent 1px);
  background-size: 26px 26px;
  overflow: hidden;
}
.brandwall__panel::before, .brandwall__panel::after { content: ""; position: absolute; width: 11px; height: 11px; border: 1px solid rgba(24, 24, 27, 0.4); z-index: 2; }
.brandwall__panel::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.brandwall__panel::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.brandwall__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); }
.brandwall__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1.6rem, 3vw, 2.5rem) 1rem;
  background-color: var(--surface);
  text-decoration: none;
  color: #b4b4bb;
  transition: color 0.5s var(--ease), transform 0.5s var(--ease);
}
/* real client marks, normalised to a single ink tone; muted by default, full on the sweep */
.brandwall__logo-box { height: 34px; display: grid; place-items: center; }
.brandwall__logo { display: block; width: auto; height: auto; max-width: 132px; object-fit: contain; opacity: 0.5; transition: opacity 0.5s var(--ease); }
.brandwall__logo--100in { max-height: 25px; }
.brandwall__logo--decelera { max-height: 21px; }
.brandwall__logo--memorable { max-height: 23px; }
.brandwall__logo--imlot { max-height: 27px; }
.brandwall__logo--lync { max-height: 22px; }
.brandwall__name { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: #a1a1aa; transition: color 0.5s var(--ease); text-align: center; }
.brandwall__item.is-lit { color: var(--accent-tone); transform: translateY(-3px); transition-duration: 0.18s; }
.brandwall__item.is-lit .brandwall__logo { opacity: 1; transition-duration: 0.18s; }
.brandwall__item.is-lit .brandwall__name { color: var(--text); transition-duration: 0.18s; }
.brandwall__item.is-lit::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 42%, rgba(79, 106, 92, 0.1), transparent 70%); pointer-events: none; }
.brandwall__item:hover { color: var(--accent-tone); transform: translateY(-4px); }
.brandwall__item:hover .brandwall__logo { opacity: 1; }
.brandwall__item:hover .brandwall__name { color: var(--text); }
.brandwall__more-mark { font-family: var(--font-sans); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--accent-tone); }
.brandwall__more .brandwall__name { color: var(--text-muted); }
@media (max-width: 860px) { .brandwall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .brandwall__grid { grid-template-columns: repeat(2, 1fr); } }

/* Generic card primitives kept for legacy contexts (process steps, plans, etc.) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ---------- Pitch (problem + solution) ---------- */
.pitch {
  padding-top: clamp(0.9rem, 2.2vw, 1.75rem);
  padding-bottom: clamp(0.35rem, 1vw, 0.75rem);
}
.pitch + .features {
  padding-top: clamp(1rem, 2.4vw, 1.65rem);
}
.pitch__problem {
  padding: clamp(1.05rem, 1.9vw, 1.55rem) 0 0;
  border-top: 0;
}
.pitch__problem .eyebrow::before {
  background: #c85a5a;
  box-shadow: 0 0 0 0 rgba(200, 90, 90, 0.45);
  animation: pitch-problem-pulse 2.4s var(--ease) infinite;
}
@keyframes pitch-problem-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 90, 90, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(200, 90, 90, 0); }
}
.pitch__problem .section__title {
  max-width: 20ch;
  line-height: 1.14;
}
.pitch__stat {
  font-weight: 500;
  color: var(--text);
}
.pitch__subline {
  margin: 1rem 0 0;
  font-size: 1.01rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
}
.pitch__cards {
  list-style: none;
  padding: 0;
  margin: 1.65rem 0 0;
  display: block;
  perspective: 1000px;
}
.pitch__card {
  position: sticky;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--text) 11%, transparent);
  border-radius: 24px;
  padding: 0.95rem 1.1rem 1rem;
  margin: 0 0 0.72rem;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: start;
  color: var(--text);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transform-origin: top center;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease);
}
.pitch__card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 24px 46px -28px rgba(24, 24, 27, 0.26), var(--shadow-sm);
}
.pitch__card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  min-width: 2.2rem;
  padding: 0 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: var(--accent-tone);
  line-height: 1;
  margin-top: 0.05rem;
}
.pitch__card-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.42;
  color: var(--text-muted);
  letter-spacing: -0.006em;
}
.pitch__card:nth-child(1) {
  top: 88px;
  z-index: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
.pitch__card:nth-child(2) {
  top: 100px;
  z-index: 2;
  transform: translate3d(0, 0, 0) scale(0.975) rotate(-0.25deg);
}
.pitch__card:nth-child(3) {
  top: 112px;
  z-index: 3;
  transform: translate3d(0, 0, 0) scale(0.95) rotate(0.2deg);
}
.pitch__card:nth-child(4) {
  top: 124px;
  z-index: 4;
  margin-bottom: 0;
  transform: translate3d(0, 0, 0) scale(0.925) rotate(-0.2deg);
}

/* DE/ES: two-column pitch (problem + solution aside) */
.pitch__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: start;
}
.pitch__solution {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--inset-refraction), var(--shadow-sm);
  position: sticky;
  top: 88px;
}
.pitch__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.8vw, 2.2rem);
  font-style: italic;
  line-height: 1.33;
  color: var(--text);
  margin: 0.65rem 0 1.05rem;
  letter-spacing: -0.01em;
}

/* ---------- Problem — editorial numbered list ---------- */
.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.25rem, 6vw, 6.5rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2.75rem) 0 clamp(0.5rem, 2vw, 1.75rem);
}
.problem__intro {
  padding-top: 0;
}
.problem__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0.9rem 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
.problem__lede {
  margin: 1.45rem 0 0;
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 40ch;
}
.problem__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.problem__item {
  padding: clamp(1.55rem, 2.6vw, 2.35rem) 0;
  border-top: 1px solid var(--border);
}
.problem__body {
  min-width: 0;
}
.problem__item-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.22rem, 1.9vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
}
.problem__item-text {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 46ch;
}
@media (max-width: 860px) {
  .problem__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }
  .problem__title {
    max-width: 18ch;
    font-size: clamp(2.2rem, 9vw, 3rem);
  }
  .problem__lede {
    max-width: 60ch;
  }
}
@media (max-width: 520px) {
  .problem__item {
    padding: 1.4rem 0;
  }
}

/* ---------- Service card outcome ---------- */
.card__outcome {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.card__outcome strong {
  color: var(--text);
}
.cards--services {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------- Process (How it works) ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  counter-reset: step;
}
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.85rem;
  position: relative;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.step:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.step__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-tone);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elev);
}
.step h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.step p {
  font-size: 0.95rem;
}

/* ---------- Closing CTA ---------- */
.cta {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.cta__inner {
  background: var(--text);
  color: var(--accent-contrast);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow-md);
  background-image: radial-gradient(
      600px 260px at 10% 0%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    ),
    radial-gradient(
      500px 240px at 100% 100%,
      rgba(255, 255, 255, 0.04),
      transparent 60%
    );
}
.cta .eyebrow {
  color: rgba(250, 250, 250, 0.6);
}
.cta .eyebrow::before {
  background: rgba(250, 250, 250, 0.3);
}
.cta .section__title {
  color: var(--accent-contrast);
  margin-inline: auto;
  max-width: 22ch;
}
.cta .section__sub {
  color: rgba(250, 250, 250, 0.75);
  margin-inline: auto;
}
.cta__actions {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta .btn--primary {
  background: var(--accent-contrast);
  color: var(--text);
}
.cta .btn--primary:hover {
  background: #fff;
}
.cta .btn--ghost {
  color: var(--accent-contrast);
  border-color: rgba(250, 250, 250, 0.25);
}
.cta .btn--ghost:hover {
  border-color: var(--accent-contrast);
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- About ---------- */
.about__grid {
  max-width: 760px;
}
/* ---------- Commitments (divided list, anti-card-overuse) ---------- */
.commitments {
  margin: 2.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.commit {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) 2fr;
  gap: 1.5rem 2rem;
  padding: 1.4rem 0.25rem;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.commit dt {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0;
}
.commit dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 56ch;
}
@media (max-width: 720px) {
  .commit {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 1.25rem 0;
  }
}
.about__more {
  margin: 1.75rem 0 0;
  font-size: 0.98rem;
}
.link-arrow {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.link-arrow:hover {
  color: var(--accent, var(--text));
  border-bottom-color: currentColor;
}

/* ---------- Pricing (outcome-based) ---------- */
.pricing__example {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
/* Exploratory-call pricing panel (replaces the calculator) */
.pricing__how {
  text-align: left;
  max-width: 640px;
}
.pricing__how-lede {
  margin: 0 0 1.5rem;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 34ch;
}
.pricing__how-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.pricing__how-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.pricing__example--calc {
  position: relative;
  background-image: radial-gradient(
    520px 180px at 50% -20%,
    color-mix(in oklab, var(--accent-tone) 14%, transparent),
    transparent 65%
  );
}
.pricing__example h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  margin: 0.4rem 0 1.5rem;
  letter-spacing: -0.02em;
}
.pricing__example--calc h3.pricing-calc__article-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 36rem;
}
.pricing-calc {
  max-width: 52rem;
  margin: 0 auto 1.65rem;
  text-align: left;
}
.pricing-calc__layout {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .pricing-calc__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.15rem;
  }
}
.pricing-calc__panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.25rem 1.3rem 1.35rem;
  background: linear-gradient(
    165deg,
    color-mix(in oklab, var(--surface-muted) 88%, var(--surface)),
    var(--surface) 55%
  );
  box-shadow: var(--inset-refraction);
}
.pricing-calc__panel--inputs {
  border-left: 3px solid color-mix(in oklab, var(--accent-tone) 55%, var(--border));
}
.pricing-calc__panel--results {
  border-color: color-mix(in oklab, var(--accent-tone) 22%, var(--border));
  background: linear-gradient(
    175deg,
    color-mix(in oklab, var(--accent-tone) 7%, var(--surface)),
    var(--surface) 50%
  );
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  min-height: 9rem;
}
.pricing-calc__panel--results > .pricing-calc__panel-title {
  align-self: flex-start;
  width: 100%;
}
.pricing-calc__panel--results > .pricing-calc__outputs {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.pricing-calc__panel-title {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.pricing-calc__fields {
  display: grid;
  gap: 1rem;
}
@media (min-width: 480px) {
  .pricing-calc__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
  }
}
.pricing-calc__row.field {
  gap: 0.45rem;
}
.pricing-calc__row.field label {
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.35;
}
.pricing-calc__row.field input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding: 0.72rem 0.5rem;
}
.pricing-calc__row.field input::-webkit-outer-spin-button,
.pricing-calc__row.field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pricing-calc__row.field input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.pricing-calc__outputs {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.pricing-calc__stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  align-items: end;
  padding: 1rem 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--border) 85%, transparent);
}
.pricing-calc__panel--results .pricing-calc__stat {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  border: none;
}
.pricing-calc__stat:first-child {
  padding-top: 0;
}
.pricing-calc__stat:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pricing-calc__stat:only-child {
  border-bottom: none;
  padding: 0;
}
.pricing-calc__stat-value {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  text-align: right;
}
.pricing-calc__panel--results .pricing-calc__stat-value {
  grid-column: auto;
  text-align: center;
}
.pricing-calc__stat-value--fee {
  font-size: clamp(1.45rem, 3.5vw, 2rem);
}
/* Savings EUR: high-contrast pill so it reads as “the number” */
.pricing-calc__stat-value--fee:not(.is-placeholder) {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.38em 0.7em 0.42em;
  border-radius: 12px;
  color: #0f3d24;
  background: linear-gradient(
    165deg,
    color-mix(in oklab, #22c55e 32%, var(--surface)),
    color-mix(in oklab, var(--accent-tone) 38%, var(--surface)) 100%
  );
  border: 1px solid color-mix(in oklab, #16a34a 45%, var(--border));
  box-shadow: 0 2px 10px color-mix(in oklab, #16a34a 22%, transparent),
    var(--inset-refraction);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pricing-calc__stat-value--fee.is-placeholder {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-soft);
  font-family: var(--font-sans);
  letter-spacing: 0;
  line-height: 1.35;
  max-width: 16rem;
  margin-top: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  text-shadow: none;
  text-align: center;
}
@keyframes pricing-calc-euro-pop {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  38% {
    transform: scale(1.07);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
.pricing-calc__stat-value--fee.is-euro-pop:not(.is-placeholder) {
  animation: pricing-calc-euro-pop 0.58s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .pricing-calc__stat-value--fee.is-euro-pop:not(.is-placeholder) {
    animation: none;
  }
}
@media (max-width: 479px) {
  .pricing-calc__fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .pricing-calc__stat {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .pricing-calc__stat-value {
    grid-column: 1;
    text-align: left;
  }
  .pricing-calc__panel--results .pricing-calc__stat-value {
    text-align: center;
  }
}
.pricing__example--calc > .btn {
  margin-top: 1.5rem;
}
.pricing__note {
  text-align: center;
  margin-top: 2rem;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.pricing__note a {
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}
.pricing__note a:hover {
  border-color: var(--text);
}

/* ---------- Legacy plans (retained) ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.plan:hover {
  border-color: var(--border-strong);
}
.plan--featured {
  border-color: var(--text);
  box-shadow: var(--shadow-md);
}
.plan__tag {
  position: absolute;
  top: -12px;
  left: 2rem;
  background: var(--text);
  color: var(--accent-contrast);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 99px;
}
.plan h3 {
  font-size: 1.1rem;
  font-weight: 600;
}
.plan__desc {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}
.price {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.period {
  color: var(--text-soft);
  font-size: 0.9rem;
}
.plan__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.plan__list li {
  position: relative;
  padding-left: 1.4rem;
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--text);
}
.plan .btn {
  margin-top: auto;
}

/* ---------- Contact ---------- */
.form {
  max-width: 540px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: grid;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font-size: 0.85rem;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.field__hint {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--text-soft);
  line-height: 1.4;
}
.field input,
.field textarea {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
    background 0.15s var(--ease);
  width: 100%;
  font-family: inherit;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 4px var(--ring);
  background: var(--surface);
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__note {
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--text-soft);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form__note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.55;
  display: none;
}
.form__note.is-ok,
.form__note.is-err {
  color: var(--text);
}
.form__note.is-ok::before,
.form__note.is-err::before {
  display: inline-block;
}
.form__note.is-ok::before {
  background: var(--accent-tone);
  opacity: 0.85;
}
.form__note.is-err::before {
  background: #b6553a; /* desaturated terracotta, < 80% saturation */
  opacity: 0.85;
}
.contact__fallback {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--text-soft);
  font-size: 0.92rem;
}
.contact__fallback a {
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}
.contact__fallback a:hover {
  border-color: var(--text);
}

/* =================================================== */
/* ---------- Case Studies page                ------- */
/* =================================================== */

.cs-hero {
  position: relative;
  min-height: min(100dvh, 52rem);
  display: flex;
  align-items: center;
  margin-top: -68px;
  padding: calc(68px + clamp(3rem, 8vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background: #0f1012;
}
.cs-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cs-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1) brightness(0.72);
  opacity: 0.7;
}
.cs-hero__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      108deg,
      rgba(10, 10, 10, 0.76) 0%,
      rgba(10, 10, 10, 0.68) 36%,
      rgba(10, 10, 10, 0.48) 58%,
      rgba(10, 10, 10, 0.22) 78%,
      rgba(10, 10, 10, 0.14) 100%
    ),
    radial-gradient(
      900px 460px at 70% 8%,
      rgba(0, 0, 0, 0.34),
      transparent 76%
    );
}
.cs-hero .container {
  position: relative;
  z-index: 1;
}
/* Tighter plate for four KPI rows (same glass + inner card as home hero) */
.cs-hero .plate__lines {
  gap: 0.48rem;
}
.cs-hero .plate__lines li {
  align-items: flex-start;
  gap: 0.65rem;
}
.cs-hero .plate__label {
  max-width: 62%;
  line-height: 1.35;
}

/* ---------- About page (founders + LinkedIn wireframe hero) -- */
.aboutp-hero {
  --about-hero-bg: #0a0a0a;
  --about-nav-h: 68px;
  position: relative;
  isolation: isolate;
  /* Sit under sticky nav so the banner (not the light body bg) reads as one panel */
  margin-top: calc(-1 * var(--about-nav-h));
  padding: calc(var(--about-nav-h) + clamp(4rem, 10vw, 7rem)) 0
    clamp(5rem, 14vw, 9rem);
  min-height: min(100dvh, 52rem);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background-color: var(--about-hero-bg);
}
.aboutp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/images/backgrounds/mountain-banner.webp?v=1") no-repeat center bottom /
    min(1240px, 104vw) auto;
  opacity: 0.92;
  pointer-events: none;
}
/* Dot grid + soft vignette: upper zone stays tied to the banner (no flat paint-over) */
.aboutp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.055) 0.65px,
      transparent 0.75px
    ),
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.2) 0%,
      rgba(10, 10, 10, 0.42) 36%,
      rgba(10, 10, 10, 0.1) 68%,
      transparent 100%
    );
  background-size: 14px 14px, 100% 100%;
}
.aboutp-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 40rem;
}
.aboutp-hero__title {
  font-size: clamp(2.4rem, 5.2vw, 3.75rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #fafafa;
  margin: 0;
  max-width: 15ch;
}
.aboutp-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: #7a9488;
  letter-spacing: -0.01em;
}
.aboutp-hero__lede {
  margin: 1.35rem 0 0;
  max-width: 52ch;
  font-size: 1.06rem;
  line-height: 1.55;
  color: #a1a1aa;
}
.aboutp-hero__note {
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
  color: #71717a;
}
.aboutp-hero__note a {
  color: #d4d4d8;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.aboutp-hero__note a:hover {
  color: #fafafa;
}
.aboutp-hero__note-sep {
  margin: 0 0.5rem;
  opacity: 0.45;
}
body.about-page .aboutp-hero .eyebrow {
  color: #a1a1aa;
}
body.about-page .aboutp-hero .eyebrow::before {
  background: rgba(255, 255, 255, 0.28);
}

/* About page: nav on dark hero (off-black, not pure #000) */
body.about-page .nav {
  background: rgba(10, 10, 10, 0.52);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
body.about-page .nav.is-scrolled {
  background: rgba(10, 10, 10, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.about-page .brand,
body.about-page .brand__name {
  color: #fafafa;
}
body.about-page .nav__links {
  color: #a1a1aa;
}
body.about-page .nav__links a:hover,
body.about-page .nav__links a.is-active {
  color: #fafafa;
}
body.about-page .nav__links a.is-active::after {
  background: #fafafa;
}
body.about-page .lang__trigger {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e4e4e7;
}
body.about-page .lang__trigger:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
}
body.about-page .lang__chevron {
  color: #a1a1aa;
}
body.about-page .lang.is-open .lang__chevron {
  color: #e4e4e7;
}
body.about-page .nav__toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
body.about-page .nav__toggle span {
  background: #e4e4e7;
}
body.about-page .nav .btn--primary {
  background: #fafafa;
  color: #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.25);
}
body.about-page .nav .btn--primary:hover {
  background: #ffffff;
  color: #0a0a0a;
}
body.about-page .nav.is-open .nav__links {
  background: rgba(10, 10, 10, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
body.about-page .nav.is-open .nav__links a {
  color: #d4d4d8;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.about-page .nav.is-open .nav__links a:hover,
body.about-page .nav.is-open .nav__links a.is-active {
  color: #fafafa;
}
.aboutp-manifesto {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--border);
}
.aboutp-manifesto__text {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  line-height: 1.38;
  color: var(--text);
  letter-spacing: -0.01em;
  max-width: 38ch;
  margin: 0;
  padding-left: clamp(0rem, 3vw, 1.5rem);
  border-left: 3px solid var(--accent-tone);
}
.aboutp-founders {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.founder-panel {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}
.founder-panel:first-of-type {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: none;
  padding-top: 0;
}
.founder-panel--reverse {
  grid-template-columns: 1.05fr 1fr;
}
.founder-panel--reverse .founder-panel__figure {
  order: 2;
}
.founder-panel--reverse .founder-panel__body {
  order: 1;
}
.founder-panel__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-muted);
  aspect-ratio: 4 / 5;
  max-height: min(520px, 70vw);
  box-shadow: var(--inset-refraction), var(--shadow-md);
}
.founder-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.02);
}
.js-tilted-card {
  transform-style: preserve-3d;
  will-change: transform;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.js-tilted-card img {
  transform: translateZ(0);
  transition: transform 260ms var(--ease), filter 260ms var(--ease);
}
.js-tilted-card .founder-panel__loc {
  transform: translateZ(12px);
}
.js-tilted-card .founder-panel__tooltip {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(220, 220, 224, 0.9);
  color: #262626;
  padding: 0.32rem 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  opacity: 0;
  transform: translate(-50%, -135%);
  transition: opacity 180ms var(--ease);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.js-tilted-card.is-tilt-active .founder-panel__tooltip {
  opacity: 1;
}
.js-tilted-card.is-tilt-active img {
  transform: translateZ(20px) scale(1.02);
}
.founder-panel__figcap {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
}
.founder-panel__loc {
  display: inline-flex;
  padding: 0.4rem 0.75rem;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(228, 228, 231, 0.65);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  box-shadow: var(--inset-refraction);
}
.founder-panel__body {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.founder-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}
.founder-panel__name {
  font-size: clamp(1.65rem, 2.8vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  color: var(--text);
}
.founder-panel__hook {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.founder-panel__body > p:last-of-type {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
}
.founder-panel__divider {
  height: 1px;
  background: var(--border);
  width: min(100%, 8rem);
  margin: 0.25rem 0;
}
.aboutp-beliefs {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--border);
}
.aboutp-beliefs__list {
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.aboutp-belief {
  display: grid;
  gap: 0.45rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--border);
}
.aboutp-belief:last-child {
  border-bottom: 1px solid var(--border);
}
.aboutp-belief dt {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.aboutp-belief dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 60ch;
}
@media (max-width: 900px) {
  .aboutp-hero {
    min-height: min(100dvh, 44rem);
    padding-bottom: clamp(4rem, 18vw, 7rem);
  }
  .aboutp-hero::before {
    background-size: min(200vw, 900px) auto;
    background-position: center bottom;
  }
  .aboutp-hero__grid,
  .founder-panel,
  .founder-panel--reverse {
    grid-template-columns: 1fr;
  }
  .founder-panel--reverse .founder-panel__figure,
  .founder-panel--reverse .founder-panel__body {
    order: unset;
  }
  .founder-panel__figure {
    max-height: none;
    aspect-ratio: 16 / 11;
  }
}
@media (hover: none), (pointer: coarse) {
  .js-tilted-card {
    transform: none !important;
  }
  .js-tilted-card img {
    transform: none !important;
  }
  .js-tilted-card .founder-panel__tooltip {
    display: none;
  }
}

/* Featured case ----------------------------------- */
.cs-featured {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
}

/* Filter row sits above the case grid. Hairline-rule label + pill chips.
   No SaaS-pill background on the chips; uses the same editorial tone
   as eyebrows elsewhere on the site. */
.cs-filter {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.cs-filter__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-filter__chips {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.cs-filter__chip {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease), transform 0.18s var(--ease);
}
.cs-filter__chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.cs-filter__chip:active {
  transform: scale(0.96);
}
.cs-filter__chip.is-active {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.cs-filter__empty {
  margin: clamp(2rem, 4vw, 3rem) 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}
.cs-filter__empty a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* When a non-"all" filter is active, hide non-matching cases AND collapse
   the top-border / margin on the first visible case so spacing stays right. */
.cs-featured[data-cs-filterable] .featured.is-hidden {
  display: none;
}
.cs-featured[data-cs-filterable] .featured:not(.is-hidden):first-of-type,
.cs-featured[data-cs-filterable] .featured:not(.is-hidden).is-first-visible {
  margin-top: 0;
  padding-top: clamp(0.5rem, 1vw, 1rem);
  border-top: 0;
}
.featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "head head"
    "media body";
  gap: clamp(2rem, 4vw, 3.5rem);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--border);
}
.featured:first-of-type {
  margin-top: 0;
}

/* Reverse: image goes right, body left. Visual rhythm beats four identical
   layouts in a row. */
.featured--reverse {
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas:
    "head head"
    "body media";
}

.featured__head {
  grid-area: head;
  display: grid;
  gap: 0.85rem;
  max-width: 56ch;
}
.featured__title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--text);
  margin: 0;
  max-width: 18ch;
}
/* green/italic purged — emphasis reads as part of the headline */
.featured__title em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.featured__id {
  font-family: var(--font-mono);
  color: var(--text);
  letter-spacing: 0.12em;
  font-weight: 500;
}
/* Case-study eyebrows ("CS · 0N") become underlined chapter labels */
.cs-featured .featured__head > .eyebrow {
  color: var(--text);
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-strong);
}
.cs-featured .featured__head > .eyebrow::before {
  display: none;
}
/* Closing CTA sits on a dark plate — chapter label + sub in on-dark tones */
.cta .eyebrow {
  color: var(--accent-contrast);
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.cta .eyebrow::before {
  display: none;
}
.cta .section__title {
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  max-width: 20ch;
}
.cta .section__sub {
  color: rgba(250, 250, 250, 0.74);
}
/* Defensive: kill the sage italic-serif emphasis device anywhere else it renders */
.hero__title em,
.sh-sub em {
  font-family: inherit;
  font-style: normal;
  color: inherit;
}

/* ===== Header reveal — the label, heading and sub rise into place in sequence
   as the section scrolls into view (reuses the .is-visible scroll observer) ===== */
/* Neutralize the block-level reveal on these containers; their children animate instead */
.section__head.reveal,
.problem__intro.reveal,
.cta__inner.reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .section__head.reveal > *,
  .problem__intro.reveal > *,
  .cta__inner.reveal > *,
  .featured.reveal .featured__head > * {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity 0.82s var(--ease), transform 0.82s var(--ease);
    will-change: transform, opacity;
  }
  .section__head.is-visible > *,
  .problem__intro.is-visible > *,
  .cta__inner.is-visible > *,
  .featured.is-visible .featured__head > * {
    opacity: 1;
    transform: none;
  }
  /* stagger: label → heading → sub → actions */
  .section__head.is-visible > :nth-child(2),
  .problem__intro.is-visible > :nth-child(2),
  .cta__inner.is-visible > :nth-child(2),
  .featured.is-visible .featured__head > :nth-child(2) {
    transition-delay: 0.1s;
  }
  .section__head.is-visible > :nth-child(3),
  .problem__intro.is-visible > :nth-child(3),
  .cta__inner.is-visible > :nth-child(3) {
    transition-delay: 0.2s;
  }
  .section__head.is-visible > :nth-child(n + 4),
  .cta__inner.is-visible > :nth-child(n + 4) {
    transition-delay: 0.3s;
  }
}
.featured__media {
  grid-area: media;
}
.featured__body {
  grid-area: body;
}
.featured__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-muted);
  aspect-ratio: 4 / 3;
  box-shadow: var(--inset-refraction), var(--shadow-diffuse);
}
.featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) contrast(1.02);
}
/* Logo art: fill the rounded frame (same clip as photo cases) */
.featured__media--logo img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  filter: none;
}

/* Placeholder media: typographic "pipeline diagram" inside the same
   rounded frame, for cases without a photo asset yet. */
.featured__media--placeholder {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(31, 61, 46, 0.06), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-muted));
}
.featured__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1.1rem;
  padding: clamp(1rem, 4vw, 2rem);
  text-align: center;
}
.featured__placeholder-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.featured__placeholder-step {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
}
.featured__placeholder-step--accent {
  background: rgba(31, 61, 46, 0.94);
  border-color: rgba(31, 61, 46, 0.94);
  color: #fafafa;
}
.featured__placeholder-arrow {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1;
}
.featured__placeholder-caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.featured__caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(228, 228, 231, 0.6);
  border-radius: 99px;
  font-size: 0.78rem;
  color: var(--text);
  letter-spacing: -0.005em;
  box-shadow: var(--inset-refraction);
}
.featured__caption-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--accent-tone);
}
.featured__body {
  display: grid;
  gap: 1.75rem;
  align-content: start;
}
.featured__facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.featured__facts div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.featured__facts dt {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.featured__facts dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.featured__lede {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.005em;
}
.featured__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.featured__metrics li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.featured__metrics li:last-child {
  border-bottom: 1px solid var(--border);
}
.metric__value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.metric__label {
  font-size: 0.92rem;
  color: var(--text-muted);
}
.featured__quote {
  margin: 0;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--inset-refraction), var(--shadow-sm);
}
.featured__quote p {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 1rem;
}
.featured__quote cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.cite__name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}
.cite__role {
  font-size: 0.85rem;
  color: var(--text-soft);
}
.cs-featured__note {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-soft);
  max-width: 56ch;
}
@media (max-width: 900px) {
  .featured,
  .featured--reverse {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "body";
  }
}

/* List of cases ----------------------------------- */
.cs-list {
  padding-top: clamp(2rem, 4vw, 3rem);
}
.cases {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.case {
  display: grid;
  grid-template-columns: 110px 1.2fr 2fr;
  gap: 1.5rem 2.5rem;
  align-items: start;
  padding: 2.25rem 0.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.5s var(--ease);
}
.case:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  );
}
.case__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-tone);
  letter-spacing: 0.08em;
  padding-top: 0.4rem;
}
.case__head h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.case__meta {
  font-size: 0.85rem;
  color: var(--text-soft);
  letter-spacing: 0.01em;
}
.case__brief {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 1.25rem;
  grid-column: 3;
  grid-row: 1;
}
.case__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  grid-column: 3;
  grid-row: 2;
}
.case__metrics li {
  position: relative;
  padding-left: 1.25rem;
}
.case__metrics li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1.5px;
  background: var(--accent-tone);
  border-radius: 2px;
  opacity: 0.7;
}
.case__metrics strong {
  color: var(--text);
  font-weight: 600;
  font-feature-settings: "tnum";
}
.cs-list__note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-soft);
}
@media (max-width: 900px) {
  .case {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.75rem 0;
  }
  .case__num {
    padding-top: 0;
  }
  .case__brief,
  .case__metrics {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Active nav state for sub-pages ------------------- */
.nav__links a.is-active {
  color: var(--text);
}
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  margin-top: 2rem;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.footer__copy {
  color: var(--text-soft);
  font-size: 0.9rem;
}
.footer__links {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.footer__links a:hover {
  color: var(--text);
}

/* =================================================== */
/* ---------- Site Footer (dark, full-section) ------- */
/* =================================================== */
.site-footer {
  --sf-bg: #0a0a0a;
  --sf-border: rgba(255, 255, 255, 0.08);
  --sf-text: #e4e4e7;
  --sf-text-strong: #fafafa;
  --sf-text-muted: #a1a1aa;
  --sf-text-soft: #71717a;
  background: var(--sf-bg);
  color: var(--sf-text);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
  /* subtle radial wash for premium depth, no neon */
  background-image: radial-gradient(
      900px 480px at 12% 0%,
      rgba(255, 255, 255, 0.04),
      transparent 60%
    ),
    radial-gradient(
      700px 400px at 88% 100%,
      rgba(79, 106, 92, 0.06),
      transparent 60%
    );
}
.site-footer__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* Top row: lede + sitemap columns */
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.site-footer__intro {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 34ch;
}
/* Legal pages have no footer intro, so the top row is the sitemap alone:
   collapse to one column and left-align it instead of leaving an empty column. */
.site-footer__top--solo {
  grid-template-columns: 1fr;
}
.site-footer__top--solo .site-footer__cols {
  justify-self: start;
}
.site-footer__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.site-footer__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.site-footer__trust-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--sf-border);
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-text-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.site-footer__trust-icon--eu {
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.12);
}
.site-footer__trust-icon--eu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.site-footer__trust-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.1rem;
}
.site-footer__trust-title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sf-text-strong);
}
.site-footer__trust-sub {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--sf-text-soft);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  justify-self: end;
  width: 100%;
  max-width: 400px;
}
.site-footer__col .site-footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-text-soft);
  margin: 0 0 1.1rem;
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.site-footer__col a {
  font-size: 0.92rem;
  color: var(--sf-text);
  letter-spacing: -0.005em;
  transition: color 0.2s var(--ease);
}
.site-footer__col a:hover {
  color: var(--sf-text-strong);
}

/* Big wordmark band */
.site-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  /* shared sizing token: mark and wordmark scale together */
  --sf-brand-size: clamp(3.5rem, 9vw, 7rem);
}
.site-footer__mark {
  width: var(--sf-brand-size);
  height: var(--sf-brand-size);
  border-radius: clamp(14px, 1.8vw, 22px);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.site-footer__wordmark {
  font-family: var(--font-brand);
  font-size: var(--sf-brand-size);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--sf-text-strong);
  line-height: 1;
  text-transform: lowercase;
}

/* Bottom row */
.site-footer__bottom {
  display: grid;
  grid-template-columns: 1.3fr auto auto auto;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sf-border);
}
.site-footer__cluster {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.site-footer__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sf-text-soft);
  margin: 0;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.site-footer__social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--sf-text-muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.site-footer__social a:hover {
  color: var(--sf-text-strong);
  background: rgba(255, 255, 255, 0.06);
}
.site-footer__social a:active {
  transform: scale(0.94);
}
/* "Copied" feedback bubble on the email icon (and any other clipboard
   link in the footer social row). Triggered by JS adding .is-copied
   and a data-copied="<label>" attribute. */
.site-footer__social a.is-copied::after {
  content: attr(data-copied);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(24, 24, 27, 0.92);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  animation: footer-copied 1.8s var(--ease) forwards;
}
@keyframes footer-copied {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -2px); }
}
.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--sf-text-soft);
  margin: 0;
}
.site-footer__clocks {
  display: inline-flex;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--sf-text-soft);
  text-transform: uppercase;
}
.site-footer__clocks span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.site-footer__clocks strong {
  color: var(--sf-text-strong);
  font-weight: 500;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}
.site-footer__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border: 1px solid var(--sf-border);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4d4d8;
  white-space: nowrap;
  justify-self: end;
}
.site-footer__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent-tone);
  box-shadow: 0 0 0 0 rgba(79, 106, 92, 0.5);
  animation: plate-pulse 2.4s var(--ease) infinite;
}

/* Responsive collapse */
@media (max-width: 1000px) {
  .site-footer__bottom {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
  }
  .site-footer__cluster--social {
    grid-column: 1 / -1;
  }
  .site-footer__status {
    justify-self: start;
  }
}
@media (max-width: 720px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }
  .site-footer__cols {
    justify-self: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
  .site-footer__bottom {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (max-width: 480px) {
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Reveal on scroll (transform + opacity only) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--index, 0) * 80ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.pitch .reveal {
  transition-duration: 0.28s;
}

/* Stagger inside common sibling containers */
.cards > *,
.steps > *,
.plans > *,
.services > *,
.commitments > .commit,
.aboutp-beliefs__list > .aboutp-belief,
.pitch__list > li,
.hero__meta > div { --staggered: 1; }

.cards > *:nth-child(1),
.steps > *:nth-child(1),
.plans > *:nth-child(1),
.services > *:nth-child(1),
.commitments > .commit:nth-child(1),
.aboutp-beliefs__list > .aboutp-belief:nth-child(1),
.pitch__list > li:nth-child(1),
.hero__meta > div:nth-child(1) { --index: 0; }

.cards > *:nth-child(2),
.steps > *:nth-child(2),
.plans > *:nth-child(2),
.services > *:nth-child(2),
.commitments > .commit:nth-child(2),
.aboutp-beliefs__list > .aboutp-belief:nth-child(2),
.pitch__list > li:nth-child(2),
.hero__meta > div:nth-child(2) { --index: 1; }

.cards > *:nth-child(3),
.steps > *:nth-child(3),
.plans > *:nth-child(3),
.services > *:nth-child(3),
.commitments > .commit:nth-child(3),
.aboutp-beliefs__list > .aboutp-belief:nth-child(3),
.pitch__list > li:nth-child(3),
.hero__meta > div:nth-child(3) { --index: 2; }

.hero__meta > div:nth-child(4) { --index: 3; }

.commitments > .commit:nth-child(4),
.pitch__list > li:nth-child(4),
.cards > *:nth-child(4) { --index: 3; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pitch__grid {
    grid-template-columns: 1fr;
  }
  .pitch__solution {
    position: static;
  }
  .pitch__card {
    position: static;
    margin-bottom: 0.8rem;
    min-height: 0;
    transform: none !important;
  }
  .plans,
  .steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .nav__cta {
    display: none;
  }
  .nav__right {
    gap: 0.5rem;
  }
  .lang {
    font-size: 0.72rem;
  }
  .lang__trigger {
    height: 30px;
    padding: 0 0.5rem 0 0.7rem;
  }
  .lang__menu {
    min-width: 180px;
  }
  .nav__toggle {
    display: inline-flex;
  }

  /* ==========================================================================
     MOBILE MENU: full-screen takeover in the OS/HUD idiom. The link row
     becomes a fixed off-black layer: mono MENU eyebrow up top, oversized
     display links that stagger in, the ZRH/MAD coordinate line as a footer.
     Hidden via visibility (not display) so open/close can animate.
     ========================================================================== */
  html:has(.nav.is-open),
  body:has(.nav.is-open) {
    overflow: hidden;
  }
  .nav__links {
    display: flex;
    /* absolute against the pinned nav (sticky, fixed or absolute-at-top), not
       position:fixed: the bar's backdrop-filter would become the containing
       block and clip the layer to bar height during the close fade */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: calc(68px + 4vh) 1.6rem 5rem;
    background: #0a0a0a;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .nav.is-open .nav__links {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s var(--ease);
  }
  .nav__links::before {
    content: "MENU";
    position: absolute;
    top: calc(68px + 1.4rem);
    left: 1.6rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: rgba(244, 244, 245, 0.45);
  }
  .nav__links::after {
    content: "ZRH 47.4\00b0 N 8.5\00b0 E \00b7  MAD 40.4\00b0 N 3.7\00b0 W";
    position: absolute;
    left: 1.6rem;
    bottom: 1.7rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: rgba(244, 244, 245, 0.38);
  }
  .nav__links a {
    color: #faf6f0;
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
      color 0.25s var(--ease);
  }
  /* the scroll-spy underline never shows inside the takeover */
  .nav__links a::after {
    display: none;
  }
  .nav__links a:hover {
    color: #ffffff;
  }
  .nav .nav__links a.is-active {
    color: #57ad87;
  }
  .nav.is-open .nav__links a {
    opacity: 1;
    transform: none;
  }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: 0.08s; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: 0.13s; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: 0.18s; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: 0.23s; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: 0.28s; }
  /* group break: a short hairline sets Case studies apart from the anchors */
  .nav__links a:nth-child(5) {
    position: relative;
    margin-top: 1.5rem;
    padding-top: 1.4rem;
  }
  .nav__links a:nth-child(5)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 1px;
    background: rgba(244, 244, 245, 0.3);
  }
  /* the bar above the takeover: kill the glass, force the HUD light-on-dark */
  .nav.is-open {
    background: transparent !important;
    border-bottom-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav.is-open .brand,
  .nav.is-open .nav__right,
  .nav.is-open .nav__toggle {
    position: relative;
    z-index: 2;
  }
  .nav.is-open .brand__name {
    color: #faf6f0;
  }
  .nav.is-open .lang__trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f4f4f5;
  }
  .nav.is-open .lang__chevron {
    color: #d4d4d8;
  }
  .nav.is-open .nav__toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .nav.is-open .nav__toggle span {
    background: #f4f4f5;
  }

  .stats {
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .aboutp-hero::before {
    opacity: 0.75;
  }
}

/* Calendly floating badge — match site pill CTAs (Geist, off-black, subtle edge) */
.calendly-badge-widget {
  font-family: var(--font-sans);
}
.calendly-badge-widget .calendly-badge-content,
.calendly-badge-widget a.calendly-badge-content {
  border-radius: 999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.006em !important;
  padding-inline: 1.2rem !important;
  min-height: 46px !important;
  line-height: 1.2 !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ---------------------------------------------------------------------
   Legal pages (privacy, imprint) — simple article layout.
   Editorial: 720px max column, serif H1, generous leading. No hero,
   so we pad the main element to clear the fixed nav.
--------------------------------------------------------------------- */
body.legal-page main {
  padding-top: calc(68px + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.legal-page__article {
  max-width: 760px;
}
.legal-page__head {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
}
.legal-page__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0.6rem 0 0;
  color: var(--text);
}
.legal-page__meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.legal-page__lede {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 2.5rem;
  max-width: 64ch;
}
.legal-page__body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 3rem 0 1rem;
  color: var(--text);
}
.legal-page__body h3 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 2rem 0 0.6rem;
  color: var(--text);
}
.legal-page__body p,
.legal-page__body li {
  font-size: 0.985rem;
  line-height: 1.7;
  color: var(--text-soft);
}
.legal-page__body p {
  margin: 0 0 1rem;
  max-width: 64ch;
}
.legal-page__body ul {
  margin: 0 0 1.2rem;
  padding-left: 1.25rem;
}
.legal-page__body li {
  margin-bottom: 0.35rem;
}
.legal-page__body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s var(--ease);
}
.legal-page__body a:hover {
  text-decoration-color: var(--text);
}
.legal-page__body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-muted);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--text);
}
.legal-page__body strong {
  color: var(--text);
  font-weight: 600;
}
.legal-page__body em {
  font-style: italic;
  color: var(--text);
}
/* "To complete before publication" note — visually distinct so we don't
   ship it accidentally. */
.legal-page__todo {
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: rgba(196, 90, 47, 0.04);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0.5rem 0 1.5rem;
}
.legal-page__table-wrap {
  overflow-x: auto;
  margin: 0 0 1.2rem;
}
.legal-page__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
}
.legal-page__table th,
.legal-page__table td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.legal-page__table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border-strong);
}

/* =================================================================
   RIDGELINE — scroll-driven EXPLORE → DISCOVER hero (home)
   One rAF-set custom prop --p (0→1) drives every layer via CSS
   calc()/clamp() windows. Transform/opacity only. No blend modes
   (composites clean on #0a0a0a). Safari-safe. Reduced-motion → static.
   ================================================================= */
.scrollhero {
  position: relative;
  height: 320vh;               /* pin scroll length */
  margin-top: -68px;           /* slide under the transparent nav */
  padding: 0;                  /* override generic section padding (was pushing the pin down 96px) */
  background: #0a0a0a;
}
.scrollhero__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;          /* scoped stacking context (like about-hero) */
  background: #0a0a0a;
}

/* --- background layers ------------------------------------------- */
.sh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 50% 18%, #14181c 0%, #0d0f11 46%, #0a0a0a 78%);
}
.sh-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.055) 0.65px, transparent 0.75px);
  background-size: 14px 14px;
  opacity: 0.9;
}

/* real Swiss-Alps footage "develops" in across p .34 → .78 */
.sh-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: clamp(0, (var(--p, 0) - 0.34) / 0.44, 1);
  filter:
    brightness(calc(0.34 + 0.38 * clamp(0, (var(--p, 0) - 0.34) / 0.44, 1)))
    saturate(calc(0.8 + 0.2 * clamp(0, (var(--p, 0) - 0.34) / 0.44, 1)))
    blur(calc(6px * (1 - clamp(0, (var(--p, 0) - 0.34) / 0.44, 1))));
  will-change: opacity, filter;
}
.sh-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.08 - 0.08 * clamp(0, (var(--p, 0) - 0.34) / 0.44, 1)));
}

/* single warm ember bloom — triangular pulse peaking at the p=.5 seam */
.sh-ember {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(680px 220px at 50% 60%, rgba(170, 116, 78, 0.22) 0%, rgba(124, 110, 86, 0.10) 40%, transparent 72%);
  opacity: calc(0.16 + 0.20 * (1 - min(1, abs(var(--p, 0) - 0.5) * 2)));
}

/* white wireframe ridge — 3 parallax layers, fade out into the photo */
.sh-wire {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("/assets/images/backgrounds/mountain-banner.webp?v=1") no-repeat center bottom / min(1280px, 108vw) auto;
  pointer-events: none;
  will-change: transform, opacity;
}
.sh-wire--back {
  transform: translateY(calc(var(--p, 0) * -14px)) scale(1.04);
  opacity: calc(0.45 * (1 - clamp(0, (var(--p, 0) - 0.30) / 0.32, 1)));
}
.sh-wire--mid {
  transform: translateY(calc(var(--p, 0) * 26px));
  opacity: calc(0.92 * (1 - clamp(0, (var(--p, 0) - 0.30) / 0.28, 1)));
}
.sh-wire--front {
  background-size: min(1480px, 124vw) auto;
  transform: translateY(calc(var(--p, 0) * 70px)) scale(1.12);
  opacity: calc(0.85 * (1 - clamp(0, (var(--p, 0) - 0.25) / 0.25, 1)));
}

/* legibility scrims fade in over the footage p .40 → .70 */
.sh-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: clamp(0, (var(--p, 0) - 0.40) / 0.30, 1);
}
.sh-scrim--v {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.30) 0%, rgba(10, 10, 10, 0.12) 40%, rgba(10, 10, 10, 0.62) 100%);
}
.sh-scrim--l {
  background: linear-gradient(100deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.34) 46%, transparent 72%);
}

/* --- EXPLORE group (centered) ----------------------------------- */
.sh-explore {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  /* whole group fades as DISCOVER takes over */
  opacity: calc(1 - clamp(0, (var(--p, 0) - 0.20) / 0.22, 1));
  pointer-events: none;
}
.sh-word {
  font-family: var(--font-sans);   /* General Sans, matches the site's headings */
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.92;
  color: #faf6f0;
  text-shadow: 0 2px 48px rgba(0, 0, 0, 0.5);
  will-change: transform, opacity;
  margin: 0;
}
.sh-word--explore {
  font-size: clamp(2.6rem, 14vw, 12rem);
  letter-spacing: 0.005em;
  max-width: 100%;
  transform: translateY(calc(var(--p, 0) * -24px)) scale(calc(1 - 0.05 * clamp(0, var(--p, 0) / 0.3, 1)));
}
.sh-sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  letter-spacing: 0.01em;
  color: #e8e2d8;
  margin: 1.4rem 0 0;
  max-width: 44ch;
}
.sh-sub em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent-tone);
}
.sh-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 44px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: calc(1 - clamp(0, var(--p, 0) / 0.12, 1));
}
.sh-cue__mouse {
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(250, 246, 240, 0.45);
  border-radius: 22px;
  position: relative;
}
.sh-cue__mouse i {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: #7a9488;
  transform: translateX(-50%);
  animation: sh-cue 1.6s ease-in-out infinite;
}
@keyframes sh-cue {
  0% { transform: translate(-50%, 0); opacity: 1; }
  70% { transform: translate(-50%, 12px); opacity: 0; }
  100% { opacity: 0; }
}
.sh-cue__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #71717a;
}

/* --- DISCOVER group (left-anchored) ----------------------------- */
.sh-discover {
  position: absolute;
  z-index: 6;
  left: clamp(1.25rem, 9vw, 9rem);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(52ch, 48vw);
  /* fades + rises in p .45 → .72 */
  opacity: clamp(0, (var(--p, 0) - 0.45) / 0.24, 1);
}
.sh-word--discover {
  display: block;
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  letter-spacing: 0.005em;            /* match AUTOMATE tracking */
  /* inherits color #faf6f0 + text-shadow from .sh-word — identical shade to AUTOMATE */
  transform: translateY(calc(30px * (1 - clamp(0, (var(--p, 0) - 0.45) / 0.24, 1))));
}
.sh-discover__lede {
  font-family: var(--font-sans);
  font-size: 1.06rem;
  line-height: 1.6;
  color: #d4d4d8;
  max-width: 50ch;
  margin: 1.25rem 0 0;
}
.sh-discover__cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.sh-discover .btn--primary {
  background: #fafafa;
  color: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.6);
}
.sh-discover .btn--primary:hover {
  background: #fff;
}
.sh-discover__link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a9488;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-underline-offset: 4px;
}
.sh-discover__link:hover { text-decoration: underline; }
.sh-discover__link .btn__arrow { transition: transform 0.25s var(--ease); }
.sh-discover__link:hover .btn__arrow { transform: translateX(3px); }

/* --- 3 service cards, staggered rise (bottom) ------------------- */
.sh-cards {
  position: absolute;
  z-index: 6;
  left: clamp(1.25rem, 9vw, 9rem);
  right: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(2rem, 6vh, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.sh-card {
  --start: calc(0.66 + var(--i) * 0.05);
  position: relative;
  padding: 1.2rem 1.25rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(16, 17, 19, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: 1px solid rgba(79, 106, 92, 0.55);
  opacity: clamp(0, (var(--p, 0) - var(--start)) / 0.14, 1);
  transform: translateY(calc(64px * (1 - clamp(0, (var(--p, 0) - var(--start)) / 0.14, 1)))) scale(calc(0.97 + 0.03 * clamp(0, (var(--p, 0) - var(--start)) / 0.14, 1)));
  will-change: transform, opacity;
}
.sh-card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-tone);
}
.sh-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fafafa;
  margin: 0.5rem 0 0.35rem;
  letter-spacing: -0.01em;
}
.sh-card__blurb {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #a1a1aa;
  margin: 0 0 0.7rem;
}
.sh-card__link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a9488;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.sh-card__link .btn__arrow { transition: transform 0.25s var(--ease); }
.sh-card__link:hover .btn__arrow { transform: translateX(3px); }

/* --- left progress-nav + social --------------------------------- */
.sh-nav {
  position: absolute;
  z-index: 7;
  left: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-left: 1rem;
}
.sh-nav__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.30);
}
.sh-nav__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-tone);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
.sh-nav__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  transition: color 0.3s var(--ease);
}
.sh-nav__tick {
  width: 22px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: width 0.35s var(--ease), background 0.35s var(--ease);
}
.sh-nav__item.is-active { color: #ffffff; }
.sh-nav__item.is-active .sh-nav__tick { width: 32px; background: #84a892; }
.sh-social {
  position: absolute;
  z-index: 7;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.55);
}
.sh-social a { color: inherit; transition: color 0.2s var(--ease); }
.sh-social a:hover { color: #fafafa; }

@media (max-width: 900px) {
  .scrollhero { height: 260vh; }
  .sh-nav { display: none; }
  .sh-discover { left: 1.25rem; max-width: 86vw; }
  .sh-cards {
    left: 1rem;
    right: 1rem;
    bottom: 1.25rem;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
  .sh-card:nth-child(3) { display: none; }
}

/* --- reduced-motion: clean static stacked hero, no pin ----------- */
@media (prefers-reduced-motion: reduce) {
  .scrollhero, .scrollhero.sh-static { height: auto; margin-top: -68px; }
  .scrollhero__pin {
    position: static;
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: clamp(6rem, 14vw, 9rem) clamp(1.25rem, 9vw, 9rem) clamp(3rem, 6vw, 5rem);
  }
  .sh-cue { display: none; }
  .sh-ember { opacity: 0.16; }
  .sh-video { position: absolute; opacity: 1; filter: brightness(0.72) saturate(0.95); }
  .sh-video video { transform: none; }
  .sh-wire--back { opacity: 0.45; transform: none; }
  .sh-wire--mid { opacity: 0.92; transform: none; }
  .sh-wire--front { opacity: 0.5; transform: none; }
  .sh-scrim { opacity: 1; }
  .sh-explore { position: static; opacity: 1; align-items: flex-start; text-align: left; padding: 0; }
  .sh-word--explore { display: none; }
  .sh-discover { position: static; transform: none; opacity: 1; max-width: 60ch; }
  .sh-word--discover { transform: none; }
  .sh-cards { position: static; grid-template-columns: repeat(3, 1fr); }
  .sh-card { opacity: 1 !important; transform: none !important; }
  .sh-card:nth-child(3) { display: block; }
  .sh-nav { display: none; }
}

/* =================================================================
   RIDGELINE v2 — scroll-SCRUBBED terrain video.
   Replaces the wireframe-banner + autoplay footage with ONE video whose
   currentTime is driven by scroll (line-drawing → full-colour photo).
   TOC moved to the right. Cards removed. Scrims tuned for a video that
   is light at BOTH ends, so white text stays legible throughout.
   ================================================================= */
.sh-scrub {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sh-scrub video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.74) saturate(1.02) contrast(1.03);
  background: #0a0a0a;
}

/* constant base legibility; per-state darkening via --c / --l */
.sh-scrim { opacity: 1; }
.sh-scrim--v {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.58) 0%,
    rgba(10, 10, 10, 0.10) 22%,
    rgba(10, 10, 10, 0.06) 58%,
    rgba(10, 10, 10, 0.32) 100%
  );
}
/* centred bloom behind EXPLORE — fades out as DISCOVER takes over */
.sh-scrim--c {
  z-index: 4;
  background: radial-gradient(
    62% 54% at 50% 46%,
    rgba(10, 10, 10, 0.70) 0%,
    rgba(10, 10, 10, 0.22) 56%,
    transparent 78%
  );
  opacity: calc(1 - clamp(0, (var(--p, 0) - 0.22) / 0.26, 1));
}
/* left scrim for DISCOVER text — fades in */
.sh-scrim--l {
  z-index: 5;
  background: linear-gradient(
    100deg,
    rgba(10, 10, 10, 0.86) 0%,
    rgba(10, 10, 10, 0.42) 40%,
    transparent 72%
  );
  opacity: clamp(0, (var(--p, 0) - 0.38) / 0.26, 1);
}

/* stronger text-shadow now the backdrop can be bright */
.sh-word {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.55);
}
.sh-sub,
.sh-discover__lede {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

/* visually-hidden but kept for SEO/screen-readers (the real <h1>) */
.sh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* TOC → right edge (rail on the right, ticks extend left) */
.sh-nav {
  left: auto;
  right: clamp(1rem, 3vw, 2.5rem);
  padding-left: 0;
  padding-right: 1rem;
  align-items: flex-end;
}
.sh-nav__rail {
  left: auto;
  right: 0;
}
.sh-nav__item {
  flex-direction: row-reverse;
}
@media (max-width: 900px) {
  .sh-nav { display: none; }
}

/* Diagram media (invoice-flow case study): show the FULL wide diagram
   (contain, not cropped) on a light frame matching the image's own
   background. Restores styling that was lost when the WIP was stashed. */
.featured__media--diagram {
  background: #f0f0ee;
}
.featured__media--diagram img {
  object-fit: contain;
  object-position: center;
  filter: none;
}


/* ===== Service icon rotation (auto-cycle variants; green tile on hover) ===== */
.service__icon {
  position: relative;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.service__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.service__glyph.is-active {
  opacity: 1;
}
.service:hover .service__icon {
  background: #1f3a2e;
  border-color: transparent;
  color: #fff;
}


/* ===== Built to integrate with (dark band + running logo marquee) ===== */
.integrate {
  background: #0a0a0a;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  overflow: hidden;
}
.integrate__inner {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.integrate__label {
  flex: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b8b92;
  white-space: nowrap;
}
.integrate__marquee {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.integrate__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.75rem);
  width: max-content;
  /* paced for ~18 marks (was 34s, briefly 22s, +30% slower per feedback) */
  animation: integrate-scroll 41s linear infinite;
}
.integrate__marquee:hover .integrate__track {
  animation-play-state: paused;
}
.integrate__logo {
  height: 26px;
  width: auto;
  flex: none;
  opacity: 0.72;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s var(--ease);
}
.integrate__logo:hover {
  opacity: 1;
}
@keyframes integrate-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .integrate__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
  }
}
@media (max-width: 720px) {
  .integrate__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .integrate__marquee {
    width: 100%;
  }
}

/* Optical size balancing for the integrate marquee (per-logo) */
.integrate__logo[src*="n8n"] { height: 30px; }
.integrate__logo[src*="holded"] { height: 34px; }
.integrate__logo[src*="anthropic"] { height: 28px; }
.integrate__logo[src*="openai"] { height: 24px; }
.integrate__logo[src*="supabase"] { height: 23px; }
/* added marks: glyphs read a touch larger, wide wordmarks a touch smaller */
.integrate__logo[src*="postgres"] { height: 26px; }
.integrate__logo[src*="aws"] { height: 17px; }
.integrate__logo[src*="googlecloud"] { height: 19px; }
.integrate__logo[src*="meta"] { height: 18px; }
.integrate__logo[src*="gemini"] { height: 24px; }
.integrate__logo[src*="mistral"] { height: 22px; }
.integrate__logo[src*="stripe"] { height: 22px; }
.integrate__logo[src*="hubspot"] { height: 24px; }
.integrate__logo[src*="notion"] { height: 24px; }
.integrate__logo[src*="slack"] { height: 24px; }
.integrate__logo[src*="make"] { height: 24px; }

/* ---------- Keyboard focus ring (a11y, was missing site-wide) ---------- */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible {
  outline-offset: 4px;
}
.scrollhero :focus-visible,
.sh-nav :focus-visible,
.integrate :focus-visible,
.site-footer :focus-visible,
.cta :focus-visible {
  outline-color: var(--accent-contrast);
}


/* ============================================================================
   PRELOADER + HERO INGESTION (landing pages only; driven by preloader.js)
   The inline boot gate in <head> adds html.is-booting before first paint;
   preloader.js runs states S1-S5 as .pl--s* classes, then swaps the scope
   to html.is-entering for the hero/nav staggers and unmounts.
   ============================================================================ */

/* scroll lock while the sequence owns the viewport */
html.is-booting,
html.is-entering {
  overflow: hidden;
}

/* ---------- frame layer (root): dark at boot, off-white once inset ---------- */
.pl {
  display: none;
}
html.is-booting .pl,
html.is-entering .pl {
  /* above everything, including the Calendly badge (z 9998) */
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0a0a0a;
  transition: background-color 0.5s var(--ease), opacity 0.3s ease;
}
/* must beat the html.is-booting .pl base rule's specificity */
html.is-booting .pl--s3,
html.is-entering .pl--s3 {
  background: var(--bg);
}
.pl--done {
  opacity: 0;
}

/* margin metadata rows: on the frame layer, revealed while the canvas is
   inset (S3). Instant appearance, terminal-style, no fade. */
.pl__meta {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(18px, 3.2vw, 34px);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(1.25rem, 3.5vw, 2.75rem);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pl__meta--top {
  top: 0;
}
.pl__meta--bottom {
  bottom: 0;
}
.pl--s3 .pl__meta {
  display: flex;
}
@media (max-width: 767px) {
  .pl--s3 .pl__meta {
    display: none;
  }
}

/* ---------- canvas: the moving dark plane ---------- */
.pl__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 0;
  transition: inset 0.65s var(--ease), border-radius 0.65s var(--ease),
    transform 0.9s var(--ease);
}
/* S3: shrink to reveal the off-white margin (the editorial frame moment) */
.pl--s3 .pl__canvas {
  inset: clamp(18px, 3.2vw, 34px);
  border-radius: var(--radius-lg);
}
/* S4: expand back near full-bleed for the brand moment */
.pl--s4 .pl__canvas {
  inset: 10px;
  border-radius: var(--radius);
}
@media (max-width: 767px) {
  .pl--s3 .pl__canvas {
    inset: 12px;
    border-radius: var(--radius);
  }
  .pl--s4 .pl__canvas {
    inset: 0;
    border-radius: 0;
  }
}
/* S5: the canvas lifts away, revealing the page beneath */
.pl--s5 .pl__canvas {
  transform: translateY(-103%);
}

/* legibility scrim: dims the halftone behind the headline block */
.hero--os::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* left scrim carries the headline, bottom scrim carries the meta row */
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.42) 42%, rgba(10, 10, 10, 0) 70%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.66) 0%, rgba(10, 10, 10, 0) 46%);
}

/* ---------- corner HUD ---------- */
.pl__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pl__corner {
  position: absolute;
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a1a1aa;
  transition: opacity 0.9s var(--ease);
}
.pl__corner--tl { top: clamp(16px, 2.5vw, 26px); left: clamp(18px, 2.8vw, 30px); }
.pl__corner--tr { top: clamp(16px, 2.5vw, 26px); right: clamp(18px, 2.8vw, 30px); }
.pl__corner--bl { bottom: clamp(16px, 2.5vw, 26px); left: clamp(18px, 2.8vw, 30px); }
.pl__corner--br { bottom: clamp(16px, 2.5vw, 26px); right: clamp(18px, 2.8vw, 30px); }
/* S1: corners fade to a faint technical presence, staggered */
.pl--s1 .pl__corner { opacity: 0.6; }
.pl--s1 .pl__corner--tl { transition-delay: 0.12s; }
.pl--s1 .pl__corner--tr { transition-delay: 0.28s; }
.pl--s1 .pl__corner--bl { transition-delay: 0.44s; }
.pl--s1 .pl__corner--br { transition-delay: 0.6s; }
/* S3 corner text swaps read at full presence */
.pl--s3 .pl__corner { opacity: 0.9; transition: none; }
/* S4: the HUD recedes behind the brand moment */
.pl--s4 .pl__hud { opacity: 0; transform: scale(0.99); }

/* ---------- scan assembly ---------- */
.pl__core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.pl__scan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* lowercase wordmark, faded in during S1 (replaces the old A glyph) */
.pl__markword {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 600;
  text-transform: lowercase;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--accent-contrast);
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.5s;
}
.pl--s1 .pl__markword { opacity: 1; }
/* alpine loading bar: the sage fill climbs in lockstep with the altitude
   counter (JS sets its width), a horizontal ascent to the summit */
.pl__bar {
  position: relative;
  width: min(300px, 46vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.pl--s2 .pl__bar,
.pl--s3 .pl__bar { opacity: 1; }
.pl__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent-tone);
}
/* a small marker rides the leading edge of the fill */
.pl__bar-fill::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--accent-contrast);
}
/* live altitude counter under the bar */
.pl__readout {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #a1a1aa;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.pl--s2 .pl__readout,
.pl--s3 .pl__readout { opacity: 0.85; }
/* S4: the whole scan assembly steps aside */
.pl--s4 .pl__core {
  opacity: 0;
  transform: scale(0.96);
}

/* ---------- wordmark flash (S4): lowercase brand + sage rule sweep ---------- */
.pl__word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-brand);
  font-weight: 600;
  text-transform: lowercase;
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  line-height: 1.1;
  color: var(--accent-contrast);
  opacity: 0;
  pointer-events: none;
}
.pl__word.is-on {
  animation: pl-word-in 0.4s var(--ease) forwards;
}
@keyframes pl-word-in {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.pl__word-ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.34em;
  height: 0.22em;
  color: var(--accent-tone);
}
.pl__word-ridge svg { width: 100%; height: 100%; display: block; }
/* the ridge geometry always spans the full word; reveal it with a left-to-
   right clip wipe (robust, unlike a stroke-dash draw whose length assumption
   made the line stop mid-word) */
.pl__word-ridge { clip-path: inset(0 100% 0 0); }
.pl__word.is-on .pl__word-ridge {
  animation: pl-ridge-wipe 0.85s var(--ease) 0.2s forwards;
}
@keyframes pl-ridge-wipe {
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- pre-hide while booting (visual only, opacity not visibility) --- */
html.is-booting .hero__map,
html.is-booting .hero__menu,
html.is-booting .hero__brandmark,
html.is-booting .hero__call,
html.is-booting .hero__title,
html.is-booting .hero__sub,
html.is-booting .hero__foot {
  opacity: 0;
}

/* ---------- hero ingestion staggers (html.is-entering) ---------- */
@keyframes pl-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes pl-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* .hero__map fades via its opacity transition (see base rule), leaving the
   Ken Burns transform running uninterrupted */
@keyframes hero-kenburns {
  0%   { transform: scale(1.04) translate(0.8%, 0.6%); }
  100% { transform: scale(1.13) translate(-1.3%, -1.1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__map { animation: none; transform: none; }
}
html.is-entering .hero__title     { animation: pl-rise 0.85s var(--ease) 0.08s both; }
html.is-entering .hero__sub       { animation: pl-rise 0.7s var(--ease) 0.26s both; }
html.is-entering .hero__menu      { animation: pl-rise 0.6s var(--ease) 0.5s both; }
html.is-entering .hero__brandmark { animation: pl-fade 0.6s var(--ease) 0.58s both; }
html.is-entering .hero__call      { animation: pl-rise 0.6s var(--ease) 0.66s both; }
html.is-entering .hero__foot      { animation: pl-rise 0.7s var(--ease) 0.78s both; }


/* ---------- safety: reduced motion never sees any of this ---------- */
@media (prefers-reduced-motion: reduce) {
  .pl {
    display: none !important;
  }
  html.is-booting,
  html.is-entering {
    overflow: auto;
  }
  html.is-booting .hero__map,
  html.is-booting .hero__menu,
  html.is-booting .hero__brandmark,
  html.is-booting .hero__call,
  html.is-booting .hero__title,
  html.is-booting .hero__sub,
  html.is-booting .hero__foot {
    opacity: 1;
  }
  html.is-entering .hero__map,
  html.is-entering .hero__menu,
  html.is-entering .hero__brandmark,
  html.is-entering .hero__call,
  html.is-entering .hero__title,
  html.is-entering .hero__sub,
  html.is-entering .hero__foot {
    animation: none;
  }
}

/* ============================================================================
   HERO "OS" COMPOSITION (landing pages): full-viewport dark stage, halftone
   world-map canvas (assets/js/hero.js), corner HUD (menu / brandmark / talk),
   giant display headline, and a meta baseline with the visitor-local clock.
   ============================================================================ */
.hero--os {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0a0a0a;
  /* base .hero tucks -68px under the fixed nav; the OS hero has no nav
     above it on desktop, so cancel that pull (kept the mobile offset in
     the max-width query below) */
  margin-top: 0;
  padding: clamp(5.5rem, 12vh, 8rem) 0 clamp(6rem, 14vh, 9rem);
}
.hero--os .container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.4rem, 3.4vw, 3.2rem);
}

/* the halftone map canvas sits behind everything */
.hero__map {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* fades in via opacity transition (the boot pre-hide sets opacity:0), so
     the Ken Burns transform below is never interrupted by an entrance anim */
  opacity: 1;
  transition: opacity 1.2s var(--ease);
  /* cinematic drift: over-scaled so the pan never reveals an edge */
  animation: hero-kenburns 18s ease-in-out infinite alternate;
  will-change: transform;
  background-color: #0a0a0a;
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: cover;
  /* JPG fallback first; WebP where image-set is understood. This grey base is
     the desaturated twin of the colour layer (.hero__spotlight-img); the
     cursor reveals the colour through it. Both are baked from the same frame. */
  background-image: url("/assets/images/backgrounds/jungfrau-duotone.jpg?v=1");
  background-image: -webkit-image-set(
    url("/assets/images/backgrounds/jungfrau-duotone.webp?v=1") type("image/webp"),
    url("/assets/images/backgrounds/jungfrau-duotone.jpg?v=1") type("image/jpeg"));
  background-image: image-set(
    url("/assets/images/backgrounds/jungfrau-duotone.webp?v=1") type("image/webp"),
    url("/assets/images/backgrounds/jungfrau-duotone.jpg?v=1") type("image/jpeg"));
}

/* ---------- corner HUD ---------- */
.hero__menu {
  position: absolute;
  top: clamp(1.4rem, 3.2vh, 2.2rem);
  left: clamp(1.4rem, 3.4vw, 3.2rem);
  z-index: 3;
}
.hero__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.05rem;
  color: #faf6f0;
  transition: opacity 0.2s var(--ease);
}
.hero__menu-btn span { font-size: 1.2em; font-weight: 400; line-height: 1; }
.hero__menu-btn:hover { opacity: 0.65; }

/* Language switcher (injected into the hero HUD + footer by lang.js) */
.langsw {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.langsw__opt {
  color: inherit;
  opacity: 0.5;
  text-decoration: none;
  padding: 2px 1px;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.langsw__opt:hover,
.langsw__opt:focus-visible { opacity: 1; }
.langsw__opt.is-active { opacity: 1; color: var(--accent-tone); }
.langsw__opt:not(:last-child)::after { content: "·"; margin: 0 0.45ch; opacity: 0.4; }
.langsw--hero {
  margin-left: 1.1rem;
  color: rgba(250, 246, 240, 0.72);
}
.langsw--hero .langsw__opt.is-active,
.langsw--footer .langsw__opt.is-active { color: #9cd8bd; } /* brighter sage on dark */
/* footer: its own slim row at the very bottom, not the rigid meta grid */
.site-footer__lang {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.15rem;
  border-top: 1px solid rgba(245, 242, 238, 0.1);
}
.site-footer__lang-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* First-visit language suggestion (bottom-left, clear of the bottom-right consent card) */
.langsuggest {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  max-width: 300px;
  background: #0a0a0a;
  color: #f5f2ee;
  border: 1px solid rgba(245, 242, 238, 0.14);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.langsuggest.is-in { opacity: 1; transform: none; }
.langsuggest__text { margin: 0 0 0.75rem; font-size: 0.95rem; line-height: 1.4; }
.langsuggest__row { display: flex; gap: 0.5rem; }
.langsuggest__go {
  flex: 1;
  text-align: center;
  text-decoration: none;
  background: #f5f2ee;
  color: #0a0a0a;
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.langsuggest__no {
  flex: 1;
  background: transparent;
  color: rgba(245, 242, 238, 0.7);
  border: 1px solid rgba(245, 242, 238, 0.2);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.langsuggest__no:hover { color: #f5f2ee; }
@media (prefers-reduced-motion: reduce) {
  .langsuggest { transition: opacity 0.2s; transform: none; }
}
.hero__menu-panel {
  margin-top: 1.1rem;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  counter-reset: menuidx;
}
.hero__menu-panel[hidden] { display: none; }
.hero__menu-panel a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.62rem 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: #faf6f0;
  text-shadow: 0 1px 12px rgba(10, 10, 10, 0.6), 0 1px 3px rgba(10, 10, 10, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: padding-left 0.25s var(--ease), color 0.25s var(--ease);
  animation: pl-rise 0.36s var(--ease) both;
}
.hero__menu-panel a::before {
  counter-increment: menuidx;
  content: "0" counter(menuidx);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  /* vivid sage + halo so the index reads over the hero */
  color: #57ad87;
  text-shadow: 0 0 2px rgba(10, 10, 10, 0.8), 0 1px 2px rgba(10, 10, 10, 0.55);
  transform: translateY(-0.25em);
}
.hero__menu-panel a:hover { padding-left: 0.6rem; color: #ffffff; }
/* when the menu is open, dim the rest of the hero so the links are legible */
.hero--os .hero__title,
.hero--os .hero__sub,
.hero--os .hero__foot { transition: opacity 0.3s var(--ease); }
.hero--os.is-menu-open .hero__title,
.hero--os.is-menu-open .hero__sub,
.hero--os.is-menu-open .hero__foot { opacity: 0.12; }
.hero--os .hero__map { transition: opacity 1.2s var(--ease), filter 0.3s var(--ease); }
.hero--os.is-menu-open .hero__map { filter: brightness(0.4); }
/* menu open: kill the colour reveal + green-text so the links stay legible, and
   darken the map. Applies to both heroes (case-studies menu too). */
.hero--os.is-menu-open .hero__spotlight,
.hero--cs.is-menu-open .hero__spotlight,
.hero--os.is-menu-open .hero__title--ghost,
.hero--cs.is-menu-open .hero__title--ghost { opacity: 0 !important; }
.hero--cs .hero__map { transition: opacity 1.2s var(--ease), filter 0.3s var(--ease); }
.hero--cs.is-menu-open .hero__map { filter: brightness(0.4); }
.hero--cs .hero__title,
.hero--cs .hero__sub,
.hero--cs .hero__eyebrow,
.hero--cs .hero__foot { transition: opacity 0.3s var(--ease); }
.hero--cs.is-menu-open .hero__title,
.hero--cs.is-menu-open .hero__sub,
.hero--cs.is-menu-open .hero__eyebrow,
.hero--cs.is-menu-open .hero__foot { opacity: 0.12; }
.hero__menu-panel a:nth-child(1) { animation-delay: 0.04s; }
.hero__menu-panel a:nth-child(2) { animation-delay: 0.10s; }
.hero__menu-panel a:nth-child(3) { animation-delay: 0.16s; }
.hero__menu-panel a:nth-child(4) { animation-delay: 0.22s; }

.hero__brandmark {
  position: absolute;
  top: clamp(1.3rem, 3vh, 2.1rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: lowercase;
  color: #faf6f0;
  text-decoration: none;
  white-space: nowrap;
}
.hero__brandmark-ridge {
  position: absolute;
  left: 0; right: 0;
  bottom: -0.36em;
  height: 0.42em;
  /* vivid sage + a tight dark outline so the ridge pops over light or dark hero */
  color: #57ad87;
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(10, 10, 10, 0.95)) drop-shadow(0 1px 2px rgba(10, 10, 10, 0.6));
}
.hero__brandmark-ridge svg { width: 100%; height: 100%; display: block; }

.hero__call {
  position: absolute;
  top: clamp(1.1rem, 2.6vh, 1.9rem);
  right: clamp(1.4rem, 3.4vw, 3.2rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.hero__call-copy {
  max-width: 21ch;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  color: #a7a49e;
}
.hero__call-copy strong { color: #faf6f0; font-weight: 600; }
.hero__call-faces { display: inline-flex; align-items: center; flex: none; }
.hero__call-faces img {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; border: 2px solid #0a0a0a;
  /* full colour: the founders read as real people, not a mono motif */
  filter: saturate(1.04) contrast(1.02);
}
.hero__call-faces img + img { margin-left: -14px; }
.hero__call-plus {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: #faf6f0; color: #0a0a0a;
  font-size: 1.35rem; font-weight: 400; line-height: 1;
  transition: transform 0.25s var(--ease);
}
.hero__call:hover .hero__call-plus { transform: rotate(90deg); }

/* ---------- headline ---------- */
.hero--os .hero__copy { max-width: none; position: relative; z-index: 1; }
.hero--os .hero__title {
  display: flex;
  flex-direction: column;
  line-height: 0.94;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #faf6f0;
  text-wrap: nowrap;
}
/* Effica-style hierarchy: line 1 owns the full width, line 2 sits smaller
   and shifted to the right */
.hero--os .hero__title-1 { font-size: clamp(3rem, 10vw, 10rem); }
.hero--os .hero__title-2 {
  font-size: clamp(1.9rem, 6.6vw, 6.6rem);
  align-self: flex-end;
  margin-top: 0.06em;
}
/* SEO pass 2026-08-21: the h1 carries a localized, keyword-bearing line under the
   English display words (display words stay English, brand rule). Styled like the
   old subline so nothing moves visually; the subline itself now holds the entity lede. */
.hero--os .hero__title-local {
  display: block;
  align-self: flex-start;
  margin-top: 1.1rem;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-wrap: balance;
  max-width: 46ch;
  color: #e8e2d8;
}
/* "We build with AI" is a wider phrase than the case-studies "Real work," so
   ease the big line down (landing only) to keep margin on laptop widths */
body.home-video .hero__title-1 {
  font-size: clamp(2.5rem, 8.7vw, 8.8rem);
}
/* the landing tail lists the studio's breadth, so it runs longer than the
   case-studies "measured." -> size it down + give it room (landing only) */
body.home-video .hero__title-2 {
  font-size: clamp(1.2rem, 2.9vw, 3rem);
  margin-top: 0.32em;
}
@media (max-width: 919px) {
  body.home-video .hero__title-2 { font-size: clamp(1rem, 4.4vw, 1.55rem); }
}
/* faint sage atmosphere: a hint of brand colour over the monochrome hero,
   painted above the map/scrim but below the content. Landing only (the
   case-studies hero already carries a cool cast). */
body.home-video .hero--os::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 50% at 74% 30%, rgba(79, 106, 92, 0.15), rgba(79, 106, 92, 0) 66%),
    radial-gradient(50% 46% at 8% 86%, rgba(79, 106, 92, 0.09), rgba(79, 106, 92, 0) 70%);
}
.hero--os .hero__sub {
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: #f4f2ee;
  /* tight halo + soft glow so it reads over busy, patchy backgrounds */
  text-shadow: 0 1px 2px rgba(10, 10, 10, 0.72), 0 2px 22px rgba(10, 10, 10, 0.85);
}

/* ---------- meta baseline ---------- */
.hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 clamp(1.4rem, 3.4vw, 3.2rem) clamp(1.2rem, 3vh, 1.9rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.hero__foot-left { flex: 1 1 0; }
.hero__foot-left p { margin: 0; }
.hero__foot-studio {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #faf6f0;
}
/* meta line reads as an OS coordinate readout (the two studio cities) */
.hero__foot-meta {
  margin-top: 0.35rem !important;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b4b8b3;
}
.hero__caps {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfccc6;
}
.hero__caps li { display: flex; align-items: center; gap: 0.85rem; }
.hero__caps li:not(:last-child)::after {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  /* vivid sage + a dark ring so the separators pop over the hero */
  background: #57ad87;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.45), 0 1px 2px rgba(10, 10, 10, 0.6);
}

/* the floating Calendly badge duplicates the hero's BOOK A CALL and covers
   the bottom-right stats/capabilities; landings and case studies go without it */
body.home-video .calendly-badge-widget,
body.case-studies-video .calendly-badge-widget { display: none !important; }

/* the fixed site nav gets out of the hero's way on desktop; the OS hero owns
   the header there (+ Menu / brandmark / book-a-call). On mobile the nav
   (hamburger) stays: on the landing it scrolls away, on case studies it
   remains fixed for the long content page. */
@media (min-width: 920px) {
  body.home-video .nav,
  body.case-studies-video .nav { display: none; }
}
@media (max-width: 919px) {
  /* absolute (scrolls away) but must keep spanning the full viewport width;
     without left/right an absolute box shrink-wraps and crushes the burger */
  body.home-video .nav { position: absolute; left: 0; right: 0; }
  /* case studies: fixed for the long page, overlaying the dark hero so the
     white nav text never sits on the light canvas */
  body.case-studies-video .nav { position: fixed; left: 0; right: 0; }
}

/* ---------- mobile: the fixed nav (hamburger) stays; corners simplify ---- */
@media (max-width: 919px) {
  .hero__menu, .hero__brandmark, .hero__call, .hero__caps { display: none; }
  .hero--os { padding-top: calc(68px + 2.5rem); }
  .hero--os .hero__title { text-wrap: balance; }
  .hero--os .hero__title-1 { font-size: clamp(2.1rem, 10.5vw, 4rem); }
  .hero--os .hero__title-2 { font-size: clamp(1.5rem, 7.4vw, 2.9rem); align-self: flex-start; }
  .hero__foot { align-items: flex-end; }
}


/* =================================================================
   CASE-STUDIES "OS" HERO (.hero--cs)
   Sibling of the landing .hero--os, keyed to the cool-slate Walensee still
   with its own lateral drift. Like the landing, the desktop site nav is
   hidden and the hero owns the header (+ Menu / brandmark / book-a-call);
   it adds a mono PORTFOLIO eyebrow and a portfolio-stats baseline in place
   of the capabilities list. Layout (margin/padding) inherits from .hero--os.
   Boot sequence: cs-preloader.js (the "portfolio ledger" tally).
   Placed at end-of-file so .hero--cs::before wins by source order over the
   landing's .hero--os::before (equal specificity).
   ================================================================= */

/* Walensee still (v2: sharper + higher-contrast for retina) + a clearly
   perceptible pan-and-push, its own motion vs the landing's straight zoom-in */
.hero--cs .hero__map {
  background-position: center 46%;
  animation: hero-kenburns-cs 15s ease-in-out infinite alternate;
  background-image: url("/assets/images/backgrounds/walensee-duotone.jpg?v=3");
  background-image: -webkit-image-set(
    url("/assets/images/backgrounds/walensee-duotone.webp?v=3") type("image/webp"),
    url("/assets/images/backgrounds/walensee-duotone.jpg?v=3") type("image/jpeg"));
  background-image: image-set(
    url("/assets/images/backgrounds/walensee-duotone.webp?v=3") type("image/webp"),
    url("/assets/images/backgrounds/walensee-duotone.jpg?v=3") type("image/jpeg"));
}
/* wide scale delta (12%) + lateral drift so the movement actually reads;
   over-scaled throughout so the pan never reveals an edge (|translate| stays
   under (scale-1)/2 the whole way) */
@keyframes hero-kenburns-cs {
  0%   { transform: scale(1.08) translate(-2.6%, 1%); }
  100% { transform: scale(1.2) translate(2.4%, -1.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--cs .hero__map { animation: none; transform: none; }
}

/* cool-tinted scrim, strengthened so the mid-tone Walensee never swallows the
   secondary text: top (header + eyebrow), left (headline), bottom (stats) */
.hero--cs::before {
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.82) 0%, rgba(8, 10, 13, 0.3) 17%, rgba(8, 10, 13, 0) 40%),
    linear-gradient(90deg, rgba(8, 10, 13, 0.8) 0%, rgba(8, 10, 13, 0.4) 46%, rgba(8, 10, 13, 0) 74%),
    linear-gradient(0deg, rgba(8, 10, 13, 0.84) 0%, rgba(8, 10, 13, 0.32) 20%, rgba(8, 10, 13, 0) 46%);
}
/* the book-a-call copy sits top-right over brighter sky; brighten it and add a
   dark halo so it reads regardless of what drifts behind it */
.hero--cs .hero__call-copy {
  color: #d6d4ce;
  text-shadow: 0 1px 12px rgba(8, 10, 13, 0.85);
}

/* mono eyebrow above the headline, led by a short sage rule */
.hero__eyebrow {
  margin: 0 0 clamp(0.9rem, 2.2vh, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b7c1ba;
}
.hero__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  flex: none;
  /* vivid sage + dark halo so the PORTFOLIO rule pops over the hero */
  background: #57ad87;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.35), 0 1px 2px rgba(10, 10, 10, 0.55);
}

/* portfolio stats baseline (right of the foot, in place of the caps list) */
.hero__stats {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(1.4rem, 3.2vw, 2.8rem);
}
.hero__stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  text-align: right;
}
.hero__stats dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9cdc8;
  text-shadow: 0 1px 10px rgba(8, 10, 13, 0.8);
}
.hero__stats dd {
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #faf6f0;
  text-shadow: 0 2px 16px rgba(8, 10, 13, 0.72);
}

/* boot pre-hide + entrance for the CS-only eyebrow (mirrors the shared set) */
html.is-booting .hero__eyebrow { opacity: 0; }
html.is-entering .hero__eyebrow { animation: pl-rise 0.7s var(--ease) 0.02s both; }

@media (max-width: 919px) {
  /* caps hide on the landing at this width; here the stats stay but wrap
     under the studio label */
  .hero--cs .hero__foot { flex-wrap: wrap; align-items: flex-start; }
  .hero__stats { gap: 1.4rem; }
  .hero__stats dd { font-size: clamp(1.2rem, 6vw, 1.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html.is-booting .hero__eyebrow { opacity: 1; }
  html.is-entering .hero__eyebrow { animation: none; }
}

/* =================================================================
   CASE-STUDIES cards: nudged toward an OS/editorial spec-sheet feel
   (mono labels, a hairline readout grid, sage accents). CSS-only so all
   three locales stay in lockstep.
   ================================================================= */
/* eyebrow ("CS · 0N") gains a sage tick marker */
.cs-featured .featured__head > .eyebrow::before {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--accent-tone);
}

/* facts become a bordered 2x2 readout panel with mono labels */
.cs-featured .featured__facts {
  gap: 0;
  padding-bottom: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cs-featured .featured__facts div {
  gap: 0.3rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.cs-featured .featured__facts div:nth-child(1),
.cs-featured .featured__facts div:nth-child(2) { border-top: 0; }
.cs-featured .featured__facts div:nth-child(odd) { border-left: 0; }
.cs-featured .featured__facts dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

/* metrics: a small sage square leads each value */
.cs-featured .featured__metrics li { grid-template-columns: 128px 1fr; }
.cs-featured .metric__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.cs-featured .metric__value::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  align-self: center;
  background: var(--accent-tone);
}

/* case-study articles reveal on scroll (carried over from the old hero) */
.cs-featured .featured.reveal {
  opacity: 0;
  transform: translateY(42px) scale(0.985);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.cs-featured .featured.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cs-featured .featured.reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   CURSOR COLOUR-REVEAL SPOTLIGHT (landing + case studies)
   A full-colour twin of the hero background is stacked over the grey base and
   revealed only through a soft circle that tracks the cursor, so the scene
   "lights up" in colour where you point. The colour layer runs the identical
   Ken Burns drift as .hero__map, so grey and colour stay pixel-aligned and the
   reveal edge shows no seam. Desktop / fine-pointer only (wired in hero.js);
   touch and reduced-motion never see it, leaving the pure monochrome hero.
   The colour image URL is set only once JS adds .hero--spot-ready (after the
   layer has preloaded), keeping ~0.7 MB off the LCP path.
   ============================================================================ */
/* reveal radius, shared by the colour layer and the green-text overlay */
.hero--os,
.hero--cs { --spot-r: clamp(44px, 3.8vw, 68px); }

.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* sits with .hero__map, under scrim + content */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;                 /* off until the pointer enters the hero */
  transition: opacity 0.55s var(--ease);
  --spot-x: 50%;
  --spot-y: 40%;
  /* harder edge (less gradient): solid to 70%, quick falloff after */
  -webkit-mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y),
      #000 0%, #000 70%, rgba(0, 0, 0, 0.28) 87%, transparent 100%);
          mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y),
      #000 0%, #000 70%, rgba(0, 0, 0, 0.28) 87%, transparent 100%);
}
.hero--spot-on .hero__spotlight { opacity: 1; }

/* green-text overlay: a sage clone of the headline, shown only inside the
   reveal circle, so the words light up in our green where the colour circle
   crosses them. hero.js clones the title, positions it, and feeds it the
   circle centre in the clone's own coordinates (--spot-cx / --spot-cy). */
.hero--os .hero__title--ghost,
.hero--cs .hero__title--ghost {
  position: absolute;
  margin: 0;
  pointer-events: none;
  z-index: 1;
  color: #57ad87;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  -webkit-mask-image: radial-gradient(circle var(--spot-r) at var(--spot-cx, -300px) var(--spot-cy, -300px),
      #000 0%, #000 70%, transparent 100%);
          mask-image: radial-gradient(circle var(--spot-r) at var(--spot-cx, -300px) var(--spot-cy, -300px),
      #000 0%, #000 70%, transparent 100%);
}
.hero--spot-on .hero__title--ghost { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__title--ghost { display: none; }
}

.hero__spotlight-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
  /* nudge the revealed colour a touch warmer than the raw photo */
  filter: sepia(0.14) saturate(1.16) brightness(1.02);
}
/* mirror each hero's exact framing + drift so colour tracks the grey twin */
.hero--os .hero__spotlight-img {
  background-position: center 42%;
  animation: hero-kenburns 18s ease-in-out infinite alternate;
}
.hero--cs .hero__spotlight-img {
  background-position: center 46%;
  animation: hero-kenburns-cs 15s ease-in-out infinite alternate;
}
/* colour image attaches only after preload (JS adds .hero--spot-ready) */
.hero--os.hero--spot-ready .hero__spotlight-img {
  background-image: url("/assets/images/backgrounds/jungfrau-hero.jpg?v=1");
  background-image: -webkit-image-set(
    url("/assets/images/backgrounds/jungfrau-hero.webp?v=1") type("image/webp"),
    url("/assets/images/backgrounds/jungfrau-hero.jpg?v=1") type("image/jpeg"));
  background-image: image-set(
    url("/assets/images/backgrounds/jungfrau-hero.webp?v=1") type("image/webp"),
    url("/assets/images/backgrounds/jungfrau-hero.jpg?v=1") type("image/jpeg"));
}
.hero--cs.hero--spot-ready .hero__spotlight-img {
  background-image: url("/assets/images/backgrounds/walensee-color.jpg?v=2");
  background-image: -webkit-image-set(
    url("/assets/images/backgrounds/walensee-color.webp?v=2") type("image/webp"),
    url("/assets/images/backgrounds/walensee-color.jpg?v=2") type("image/jpeg"));
  background-image: image-set(
    url("/assets/images/backgrounds/walensee-color.webp?v=2") type("image/webp"),
    url("/assets/images/backgrounds/walensee-color.jpg?v=2") type("image/jpeg"));
}
@media (prefers-reduced-motion: reduce) {
  .hero__spotlight-img { animation: none; transform: none; }
}

/* ============================================================================
   FAQ: editorial ledger accordion (landing, chapter 06, before Contact).
   A mono index + the question + a plus that morphs to a minus. The answer
   expands via grid-template-rows 0fr->1fr (the one height animation that
   actually interpolates) while its text rises in. Sage shows only as the
   accent on an open row. Reveal + stagger reuse the .reveal scroll observer.
   ============================================================================ */
.faq__list {
  list-style: none;
  margin: clamp(2.2rem, 4.6vw, 3.4rem) auto 0;
  padding: 0;
  max-width: 780px;
}
.faq__item { border-top: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 1px solid var(--border); }

.faq__q {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  padding: clamp(1.1rem, 2.4vw, 1.5rem) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--font-sans);
}
.faq__idx {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  transform: translateY(-0.08em);
  transition: color 0.25s var(--ease);
}
.faq__q-text {
  font-size: clamp(1.04rem, 1.9vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: transform 0.3s var(--ease);
}
.faq__q:hover .faq__q-text { transform: translateX(4px); }
.faq__q:hover .faq__idx { color: var(--accent-tone); }
.faq__q:focus-visible {
  outline: 2px solid var(--accent-tone);
  outline-offset: 4px;
  border-radius: 6px;
}

/* plus -> minus toggle (two bars; the vertical one collapses on open) */
.faq__toggle { position: relative; width: 20px; height: 20px; flex: none; }
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.34s var(--ease), background-color 0.25s var(--ease);
}
.faq__toggle::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__toggle::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq__item.is-open .faq__toggle::after { transform: translateX(-50%) scaleY(0); }
.faq__item.is-open .faq__toggle::before,
.faq__item.is-open .faq__toggle::after { background: var(--accent-tone); }
.faq__item.is-open .faq__idx { color: var(--accent-tone); }

/* animated answer panel */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a-inner p {
  margin: 0;
  /* align the answer under the question text, past the mono index */
  padding: 0 clamp(1rem, 3vw, 2.4rem) clamp(1.25rem, 2.6vw, 1.65rem)
    calc(0.72rem + 2ch + clamp(0.85rem, 2vw, 1.5rem));
  max-width: 62ch;
  color: var(--text-muted);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.62;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.42s var(--ease) 0.06s, transform 0.42s var(--ease) 0.06s;
}
.faq__item.is-open .faq__a-inner p { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .faq__a { transition: none; }
  .faq__a-inner p { transition: none; opacity: 1; transform: none; }
  .faq__toggle::before,
  .faq__toggle::after { transition: none; }
}

/* section rhythm: keep the tuck cadence now that FAQ sits between them */
.pricing + .faq,
.faq + .contact { padding-top: clamp(0.85rem, 2vw, 1.45rem); }

/* list reveal + stagger (mirrors the .section__head child-stagger pattern) */
.faq__list.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .faq__list.reveal .faq__item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    will-change: transform, opacity;
  }
  .faq__list.is-visible .faq__item { opacity: 1; transform: none; }
  .faq__list.is-visible .faq__item:nth-child(2) { transition-delay: 0.06s; }
  .faq__list.is-visible .faq__item:nth-child(3) { transition-delay: 0.12s; }
  .faq__list.is-visible .faq__item:nth-child(4) { transition-delay: 0.18s; }
  .faq__list.is-visible .faq__item:nth-child(5) { transition-delay: 0.24s; }
  .faq__list.is-visible .faq__item:nth-child(6) { transition-delay: 0.30s; }
  .faq__list.is-visible .faq__item:nth-child(7) { transition-delay: 0.36s; }
}

/* ============================================================================
   CUSTOM CURSOR: a single inverting dot (desktop / fine-pointer only; script.js
   adds html.has-cursor and injects the node). mix-blend difference flips it
   against whatever is under it, so it reads light on the dark hero and dark on
   the light sections with no per-section tuning. It grows over interactive
   targets. The native caret is preserved in form fields, and if the script
   ever fails the native cursor stays.
   ============================================================================ */
html.has-cursor,
html.has-cursor * { cursor: none; }
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: text; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
  transform: translate(var(--cx, -100px), var(--cy, -100px));
  opacity: 0;
  /* blend the dot against the page itself: light on the dark hero, dark on the
     bone/white sections. Must live on this top-level node (not the inner dot,
     whose blend would be trapped inside this element's stacking context). */
  mix-blend-mode: difference;
  transition: opacity 0.25s var(--ease);
}
.cursor.is-ready { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
.cursor__dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s var(--ease);
}
/* over an interactive target: the dot grows */
.cursor.is-active .cursor__dot { transform: scale(2.4); }
@media (prefers-reduced-motion: reduce) {
  .cursor__dot { transition: none; }
}

/* ============================================================================
   Consent banner (analytics Phase 2, injected by consent.js). A small brand
   card, bottom-right, for the one optional returning-visitor cookie. Equal-
   weight Accept / Decline, no dark patterns.
   ============================================================================ */
.consent {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90000;
  width: min(360px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.35rem 1.15rem;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.consent.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.consent__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-tone);
  margin: 0 0 0.5rem;
}
.consent__body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.consent__link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent__actions {
  display: flex;
  gap: 0.6rem;
}
.consent__btn {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--border-strong);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.consent__btn--ghost {
  background: transparent;
  color: var(--text);
}
.consent__btn--ghost:hover {
  border-color: var(--text);
}
.consent__btn--solid {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.consent__btn--solid:hover {
  opacity: 0.9;
}
/* "Cookie settings" control injected next to the footer legal links */
.site-footer__cookie-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  text-align: left;
  transition: opacity 0.2s var(--ease);
}
.site-footer__cookie-btn:hover {
  opacity: 1;
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .consent {
    transition: opacity 0.2s var(--ease);
    transform: none;
  }
}


/* =========================================================================
   Case explorer (case-studies): dark hero badge + highlight, filter panel,
   filterable card grid with ink + sage blueprint motifs. Namespaced .csx.
   ========================================================================= */
.hero__badge { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid rgba(250, 246, 240, 0.2); border-radius: 99px; padding: 0.42rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: rgba(250, 246, 240, 0.86); margin: 0 0 1.2rem; }
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fa98f; box-shadow: 0 0 10px rgba(127, 169, 143, 0.9); }
.hero__title .hl { color: inherit; }

.csx { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.csx__panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 40px -32px rgba(24, 24, 27, 0.4); padding: clamp(1.1rem, 2vw, 1.5rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.csx__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.csx__row + .csx__row { margin-top: 0.7rem; }
.csx__row-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); width: 54px; flex: none; }
.csx__chip { border: 1px solid var(--border); background: transparent; border-radius: 99px; padding: 0.48rem 1rem; font-family: inherit; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.csx__chip:hover { border-color: var(--text-soft); color: var(--text); }
.csx__chip.is-active { background: var(--text); color: var(--surface); border-color: var(--text); }
.csx__search { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.9rem; }
.csx__search-box { flex: 1; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.csx__search-ico { flex: none; color: var(--text-soft); }
.csx__search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 1rem; color: var(--text); outline: none; }
.csx__search-input::placeholder { color: var(--text-soft); }
.csx__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-soft); white-space: nowrap; flex: none; }

.csx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2vw, 1.5rem); }
.csx__card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.csx__card:hover { transform: translateY(-4px); box-shadow: 0 22px 45px -30px rgba(24, 24, 27, 0.45); }
.csx__card[hidden] { display: none; }
.csx__viz { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--border); background-color: #fafafa; background-image: linear-gradient(rgba(24, 24, 27, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 27, 0.03) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.csx__viz::before, .csx__viz::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid rgba(24, 24, 27, 0.32); z-index: 1; }
.csx__viz::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.csx__viz::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.csx__viz svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.csx__viz .m-line { stroke: rgba(24, 24, 27, 0.24); stroke-width: 1.5; fill: none; }
.csx__viz .m-soft { stroke: rgba(24, 24, 27, 0.13); stroke-width: 1.5; fill: none; }
.csx__viz .m-accent { stroke: var(--accent-tone); stroke-width: 1.7; fill: none; }
.csx__viz .m-fill { fill: rgba(24, 24, 27, 0.08); }
.csx__viz .m-dot { fill: rgba(24, 24, 27, 0.4); }
.csx__viz .m-adot { fill: var(--accent-tone); }
.csx__viz .m-hub { stroke: var(--accent-tone); stroke-width: 1.6; fill: rgba(79, 106, 92, 0.09); }
.csx__badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(24, 24, 27, 0.9); color: #faf6f0; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 8px; }
/* client mark, opposite the badge: whose case this is, readable before the title */
.csx__client { position: absolute; top: 12px; right: 12px; z-index: 2; height: 19px; width: auto; padding: 5px 9px; background: rgba(250, 250, 250, 0.92); border: 1px solid var(--border); border-radius: 8px; box-sizing: content-box; }
.csx__body { padding: clamp(1.1rem, 2vw, 1.5rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.csx__tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-tone); background: rgba(79, 106, 92, 0.09); padding: 4px 9px; border-radius: 6px; }
.csx__title { font-size: clamp(1.05rem, 1.55vw, 1.22rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--text); margin: 0; }
.csx__blurb { font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); margin: 0; }
.csx__metric { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 0.6rem; }
.csx__metric-value { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-tone); flex: none; }
.csx__metric-label { font-size: 0.78rem; line-height: 1.3; color: var(--text-soft); }
.csx__empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.csx__empty a { color: var(--text); text-underline-offset: 3px; }
.csx__empty[hidden] { display: none; }
@media (max-width: 960px) { .csx__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .csx__grid { grid-template-columns: 1fr; } .csx__row-label { width: 100%; margin-bottom: 0.1rem; } .csx__search { flex-wrap: wrap; } }


/* Case explorer placeholder: aesthetic "coming soon" blueprint panel */
.csx--soon { padding-top: clamp(3rem, 6vw, 5rem); }
.csx__soon { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--surface); background-image: linear-gradient(rgba(24, 24, 27, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 27, 0.03) 1px, transparent 1px); background-size: 26px 26px; min-height: clamp(300px, 40vw, 430px); padding: clamp(3rem, 7vw, 5.5rem) 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1rem; }
.csx__soon::before, .csx__soon::after { content: ""; position: absolute; width: 11px; height: 11px; border: 1px solid rgba(24, 24, 27, 0.4); }
.csx__soon::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.csx__soon::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.csx__soon-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin: 0; }
.csx__soon-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-tone); animation: soonPulse 2.2s var(--ease) infinite; }
@keyframes soonPulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.csx__soon-title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); margin: 0; max-width: 20ch; }
.csx__soon-text { font-size: 1.02rem; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 48ch; }
.csx__soon-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent-tone); padding-bottom: 2px; transition: gap 0.25s var(--ease); }
.csx__soon-link:hover { gap: 0.85rem; }
.csx__soon-link svg { color: var(--accent-tone); }
@media (prefers-reduced-motion: reduce) { .csx__soon-eyebrow::before { animation: none; } }


/* ==================================================================
   CASE STUDY WRITE-UPS (.study) · first shipped: 100in
   Full-width engagement write-ups on /case-studies: client strip,
   measured stat band, case articles (copy + animated SVG diagram).
   Diagrams use the site palette (sage accent, zinc hairlines) and
   Geist Mono micro-labels; #4f6a5c is the darkened sage for small
   text (the token at 4.4:1 is decorative-only per the brand guide).
   ================================================================== */
.study { padding-top: clamp(2.5rem, 5vw, 4rem); }

.study__client {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.9rem 1.4rem; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  padding: 0.95rem clamp(1rem, 2vw, 1.4rem);
  margin: clamp(1.6rem, 3vw, 2.4rem) 0;
}
.study__client-id { display: flex; align-items: center; gap: 0.95rem; }
.study__client-id img { height: 22px; width: auto; }
.study__client-meta, .study__client-facts {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft);
}

.study__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
}
.study__stat { padding: clamp(1.1rem, 2vw, 1.6rem); }
.study__stat + .study__stat { border-left: 1px solid var(--border); }
.study__stat dt {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.55rem;
}
.study__stat dd { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.study__stat dd span { display: block; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; color: var(--text-muted); margin-top: 0.4rem; }

.study__case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
}
.study__case + .study__case { border-top: 1px solid var(--border); }
.study__case--reverse .study__copy { order: 2; }
.study__case--reverse .study__viz-col { order: 1; }

.study__num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #4f6a5c; margin: 0; }
.study__title { font-size: clamp(1.55rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); margin: 0.7rem 0 0; }
.study__lede { font-size: clamp(1.08rem, 1.4vw, 1.22rem); font-weight: 500; line-height: 1.45; color: var(--text-muted); margin: 0.85rem 0 0; }
.study__body { font-size: 0.97rem; line-height: 1.62; color: var(--text-muted); margin: 1.05rem 0 0; }

.study__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.3rem 0 0; padding: 0; }
.study__chips li {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: #4f6a5c; border: 1px solid rgba(93, 122, 107, 0.35);
  border-radius: 99px; padding: 0.32rem 0.7rem;
}

.study__stack { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 1.3rem 0 0; padding: 0.95rem 0 0; border-top: 1px solid var(--border); }
.study__stack-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin-right: 0.15rem; }
.study__stack img { display: block; width: 20px; height: 20px; object-fit: contain; opacity: 0.92; }
.study__stack-chip {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 6px; padding: 2px 6px;
}

.study__status {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #4f6a5c; border: 1px solid rgba(93, 122, 107, 0.35); border-radius: 99px; padding: 0.4rem 0.85rem;
}
.study__status::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--accent-tone); animation: soonPulse 2.2s var(--ease) infinite; }

.study__viz {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius);
  background-color: var(--surface);
  background-image: linear-gradient(rgba(24, 24, 27, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 24, 27, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}
.study__viz::before, .study__viz::after { content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid rgba(24, 24, 27, 0.32); }
.study__viz::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.study__viz::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.study__viz svg { display: block; width: 100%; height: auto; }
.study__caption { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); margin-top: 0.9rem; }

/* Diagram interaction: hover or focus a hot group to reveal its tip.
   The hit rect needs pointer-events fill because shapes paint fill="none". */
.study .dg-hot { cursor: default; }
.study .dg-tip { opacity: 0; transition: opacity 220ms var(--ease); }
.study .dg-hot:hover .dg-tip, .study .dg-hot:focus-visible .dg-tip { opacity: 1; }
.study .dg-hit { fill: transparent; pointer-events: fill; }

/* Diagram animations only run while the panel is on screen: a tiny
   IntersectionObserver on the page toggles .is-in on .study__viz, so
   nothing repaints once you scroll past. Without JS the diagrams are
   simply static and complete. The radar sweep pivots on the dish
   centre in view-box coords, not its own bounding box. */
.study .radar__sweep { transform-box: view-box; transform-origin: 135px 150px; }
.study .study__viz.is-in .radar__sweep { animation: studyRadarSpin 4s linear infinite; }
@keyframes studyRadarSpin { to { transform: rotate(360deg); } }
.study .study__viz.is-in .radar__blip { animation: studyBlip 4s linear infinite; animation-delay: var(--blip-at, 0s); }
@keyframes studyBlip { 0% { opacity: 0; } 2% { opacity: 1; } 35% { opacity: 1; } 70% { opacity: 0.25; } 100% { opacity: 0.25; } }
.study .wv__bar { transform-box: fill-box; transform-origin: center; }
.study .study__viz.is-in .wv__bar { animation: studyWave 1.4s ease-in-out infinite alternate; animation-delay: var(--wv-at, 0s); }
@keyframes studyWave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .study .study__viz.is-in .radar__sweep,
  .study .study__viz.is-in .radar__blip,
  .study .study__viz.is-in .wv__bar,
  .study__status::before { animation: none; }
  .study .radar__blip { opacity: 1; }
}

@media (max-width: 900px) {
  .study__stats { grid-template-columns: 1fr; }
  .study__stat + .study__stat { border-left: 0; border-top: 1px solid var(--border); }
  .study__case { grid-template-columns: 1fr; gap: 1.5rem; }
  .study__case--reverse .study__copy { order: 0; }
  .study__case--reverse .study__viz-col { order: 0; }
}

/* Case-file cards on /case-studies: the whole card is the link to the
   client's write-up page; the soon card holds the slot until one ships. */
a.csx__card { color: inherit; text-decoration: none; }
.csx__card--soon { grid-column: 1 / -1; flex-direction: row; }
.csx__card--soon:hover { transform: none; box-shadow: none; }
.csx__card--soon .csx__viz { flex: 0 0 46%; aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-right: 1px solid var(--border); }
.csx__card--soon .csx__body { justify-content: center; gap: 0.9rem; padding: clamp(1.5rem, 4vw, 3rem); }
.csx__card--soon .csx__title { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.025em; }
.csx__card--soon .csx__blurb { font-size: 1rem; max-width: 42ch; }
.csx__badge { display: inline-flex; align-items: center; gap: 0.5rem; }
.csx__dot { width: 6px; height: 6px; border-radius: 50%; background: #8fb8a2; animation: soonPulse 2.2s var(--ease) infinite; }
.csx__cta { align-self: flex-start; margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent-tone); padding-bottom: 3px; transition: color 0.25s var(--ease); }
.csx__cta:hover { color: var(--accent-tone); }
.csx__draw { stroke-dasharray: 90; stroke-dashoffset: 90; animation: csxDraw 3.2s var(--ease) infinite; }
@keyframes csxDraw { 0% { stroke-dashoffset: 90; } 55%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 760px) { .csx__card--soon { flex-direction: column; } .csx__card--soon .csx__viz { flex: none; aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); } }

/* Back link on a client write-up page */
.study__back { margin: 0 0 1.4rem; }
.study__back a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.25s var(--ease); }
.study__back a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) { .csx__dot, .csx__draw { animation: none; } .csx__draw { stroke-dashoffset: 0; } }


/* ==================================================================
   PERF · long-running background animations pause off-screen.
   script.js toggles .is-offstage on the OS heroes and the integrate
   marquee band via one IntersectionObserver, so the two Ken Burns
   hero layers and the logo track stop compositing the moment they
   scroll out of view.
   ================================================================== */
.hero--os.is-offstage .hero__map,
.hero--os.is-offstage .hero__spotlight-img { animation-play-state: paused; }
.integrate.is-offstage .integrate__track { animation-play-state: paused; }

/* ---------- Interior content pages: breadcrumbs, card links, page CTA ---------- */
.crumbs {
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 1rem;
}
.crumbs a { color: inherit; text-decoration: none; transition: color 0.18s var(--ease); }
.crumbs a:hover { color: var(--text); }
.cap__link {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pillar-cta { margin-top: 2.5rem; }
.pillar-cta__alt { margin-top: 0.9rem; font-size: 0.95rem; }
/* founder panels reused on /about/ inside the article column */
.legal-page__body .aboutp-founders { padding: 1rem 0 0; }

/* Service pillar heroes carry longer display lines than the case-studies hero,
   so ease both title sizes down (desktop only; the mobile clamps already fit). */
@media (min-width: 920px) {
  body.service-page .hero__title-1 { font-size: clamp(2.6rem, 8.4vw, 8.4rem); }
  body.service-page .hero__title-2 { font-size: clamp(1.5rem, 5vw, 5rem); }
}

/* ==========================================================================
   REWORK 2026-10: site-wide nav (mega-menu, flag toggle, brand loop), three
   new blueprint visuals, industries grid, footer offices. Layered on the
   live design: nothing above is replaced.
   ========================================================================== */

/* ---------- nav: one header on every page ---------- */
.navx .nav__links { align-items: center; white-space: nowrap; }
.navx .flags { flex: none; }
/* between the takeover menu and full desktop the bar is tight: the hero and
   pricing buttons carry the booking CTA there */
@media (min-width: 721px) and (max-width: 1100px) {
  .navx .nav__cta { display: none; }
  .navx .nav__links { gap: 1.1rem; font-size: 0.9rem; }
}
.navx__item { position: relative; padding: 1.4rem 0; margin: -1.4rem 0; }
.mega {
  position: absolute;
  top: 100%;
  left: -1.4rem;
  width: 620px;
  padding: 1.1rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.mega--narrow { width: 320px; grid-template-columns: 1fr; }
.navx__item:hover .mega,
.navx__item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.nav.navx .mega a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--border); color: var(--text); }
.nav.navx .mega a::after { display: none; }
.nav.navx .mega a:nth-last-child(-n + 2) { border-bottom: 0; }
.nav.navx .mega--narrow a:nth-last-child(2) { border-bottom: 1px solid var(--border); }
.mega strong { display: block; font-weight: 500; font-size: 0.95rem; transition: transform 0.24s var(--ease); }
.mega a:hover strong { transform: translateX(4px); }
.mega small { display: block; font-size: 0.8rem; color: var(--text-soft); margin-top: 0.1rem; }

/* flag language toggle (hrefs are set from the hreflang alternates in script.js) */
.flags { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: #e8e8ea; }
.flags a { display: grid; place-items: center; padding: 6px 10px; border-radius: 99px; opacity: 0.55; transition: opacity 0.24s var(--ease), background 0.24s var(--ease); }
.flags a:hover { opacity: 0.9; }
.flags a.on { background: var(--surface); opacity: 1; }
.flags svg { width: 22px; height: 15px; border-radius: 3px; }

/* brand: lowercase wordmark + sage ridge on a 12s loop. Letters drop out, the
   ridge retracts, then the word rises back and the ridge redraws. */
.brandx {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--text);
  padding-bottom: 7px;
  z-index: 2; /* stays above the mobile takeover layer */
}
.brandx__word { display: inline-flex; overflow: hidden; line-height: 1.25; }
.brandx__word span { display: inline-block; animation: brand-letter 12s var(--ease) infinite; animation-delay: calc(var(--i) * 55ms); }
@keyframes brand-letter {
  0%, 62% { transform: none; opacity: 1; }
  66%, 74% { transform: translateY(105%); opacity: 0; }
  79%, 100% { transform: none; opacity: 1; }
}
.brandx__ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; color: var(--accent-tone); }
.brandx__ridge svg { width: 100%; height: 100%; overflow: visible; }
.brandx__ridge path { stroke-dasharray: 100; animation: brand-ridge 12s var(--ease) infinite; }
@keyframes brand-ridge {
  0%, 62% { stroke-dashoffset: 0; }
  69%, 76% { stroke-dashoffset: -100; }
  76.01% { stroke-dashoffset: 100; }
  88%, 100% { stroke-dashoffset: 0; }
}

/* dark-hero pages (landing, case studies, service pages): light nav over the image */
body.home-video .brandx,
body.case-studies-video .brandx,
.nav.is-open .brandx { color: #faf6f0; }
body.home-video .brandx__ridge,
body.case-studies-video .brandx__ridge,
.nav.is-open .brandx__ridge { color: #57ad87; }
body.home-video .flags,
body.case-studies-video .flags { background: rgba(255, 255, 255, 0.12); }
body.home-video .flags a.on,
body.case-studies-video .flags a.on { background: rgba(255, 255, 255, 0.2); }
@media (min-width: 920px) {
  /* the nav is back on desktop and replaces the hero's corner menu + brandmark */
  body.home-video .nav.navx,
  body.case-studies-video .nav.navx { display: block; position: fixed; left: 0; right: 0; top: 0; }
  body.home-video .navx .nav__inner,
  body.case-studies-video .navx .nav__inner { width: auto; max-width: none; margin: 0; padding-inline: clamp(1.4rem, 3.4vw, 3.2rem); }
  .hero__menu, .hero__brandmark { display: none; }
  /* landing: the book-a-call cluster moves to the bottom-right corner */
  body.home-video .hero__call { top: auto; bottom: clamp(1.3rem, 3vh, 2.1rem); }
  /* case studies and service pages keep their stats baseline; the nav CTA covers booking */
  body.case-studies-video .hero__call { display: none; }
}
/* the plus joins the two faces as a third overlapping circle */
.hero__call-plus { margin-left: calc(-0.85rem - 14px); border: 2px solid #0a0a0a; box-sizing: content-box; position: relative; }

/* ---------- blueprint visuals for the data, GTM and training rows ---------- */
.vz-bar { transform-box: fill-box; transform-origin: left center; animation: vz-bar 7s var(--ease) infinite; animation-delay: calc(var(--i) * 160ms); }
@keyframes vz-bar { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.vz-lead { animation: vz-lead 6s var(--ease) infinite; animation-delay: calc(var(--i) * 900ms); }
@keyframes vz-lead {
  0%, 6% { transform: none; opacity: 0; }
  12% { opacity: 1; }
  30% { transform: translateX(52px); }
  52% { transform: translateX(104px); }
  74%, 90% { transform: translateX(154px); opacity: 1; }
  100% { transform: translateX(154px); opacity: 0; }
}
.vz-seat { animation: vz-seat 9s var(--ease) infinite; animation-delay: calc(var(--i) * 300ms); }
@keyframes vz-seat {
  0%, 8% { fill: transparent; stroke: currentColor; }
  16%, 80% { fill: var(--accent-tone); stroke: var(--accent-tone); }
  92%, 100% { fill: transparent; stroke: currentColor; }
}

/* ---------- industries: three hairline columns ---------- */
.inds__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(24, 24, 27, 0.12); border-bottom: 1px solid rgba(24, 24, 27, 0.12); }
.ind { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem); }
.ind:first-child { padding-left: 0; }
.ind + .ind { border-left: 1px solid rgba(24, 24, 27, 0.12); }
.ind__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-tone); }
.ind__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0.9rem 0 0.7rem; transition: transform 0.4s var(--ease); }
.ind p { color: var(--text-muted); margin: 0 0 1.4rem; }
.ind .cap__link { margin-top: auto; align-self: flex-start; }
.ind:hover .ind__title { transform: translateX(6px); }

/* ---------- pricing list, contact select, footer offices ---------- */
.pricing__how-list strong { font-weight: 600; }
.field select {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  width: 100%;
  font-family: inherit;
}
.field select:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px var(--ring); }
.site-footer__offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  font-size: 0.92rem;
  line-height: 1.7;
}
.site-footer__offices p { margin: 0; }
.site-footer__offices .site-footer__col-title { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #71717a; margin-bottom: 0.6rem; }
.site-footer__offices a:hover { color: #fafafa; }

@media (max-width: 720px) {
  /* takeover menu: top-level links only, the dropdown panels stay out */
  .navx__item { display: contents; }
  .mega { display: none; }
  .inds__grid { grid-template-columns: 1fr; }
  .ind, .ind:first-child { padding-inline: 0; }
  .ind + .ind { border-left: 0; border-top: 1px solid rgba(24, 24, 27, 0.12); }
  .site-footer__offices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .brandx__word span, .brandx__ridge path, .vz-bar, .vz-lead, .vz-seat { animation: none; }
  .vz-lead { opacity: 1; }
}

/* ---------- rework 2026-10: page-level rules handed off by the sub-page branches ---------- */
/* from ai-agent-implementation */
.inds__grid + .inds__grid { border-top: 0; }

/* from contact */
.contactx { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.contactx .form { max-width: none; margin: 0; }
.contactx .pricing__how { margin-top: 0; max-width: none; }
.contactx .contact__fallback { text-align: left; }
.contactx__offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.contactx__offices p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.contactx__offices .ind__label { display: block; margin-bottom: 0.5rem; }
.contactx__reply { grid-column: 1 / -1; }
@media (max-width: 820px) { .contactx { grid-template-columns: 1fr; } }

/* from industries */
.cta .section__sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cta .section__title + .section__sub { margin-top: 0.9rem; }

/* from stack */
.stackx { padding: clamp(3rem, 6vw, 5rem) 0; }
.stackx__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(1.25rem, 4vw, 4rem); padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid rgba(24, 24, 27, 0.12); }
.stackx__row:last-child { border-bottom: 1px solid rgba(24, 24, 27, 0.12); }
.stackx__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0.9rem 0 0.7rem; }
.stackx__row p { color: var(--text-muted); margin: 0; max-width: 36ch; }
.stackx__tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.6rem; align-content: start; }
.stackx__tool { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.1rem; min-height: 104px; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stackx__tool img { height: 24px; width: auto; max-width: 100%; object-fit: contain; object-position: left; filter: brightness(0); opacity: 0.82; }
.stackx__name { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.stackx__tag { display: block; margin-top: 0.3rem; color: var(--accent-tone); }
@media (max-width: 720px) { .stackx__row { grid-template-columns: 1fr; } }

/* buttons inside legal-layout body copy keep their own label colour (the body
   link rule was painting the About CTA dark on dark) */
.legal-page__body a.btn--primary { color: var(--accent-contrast); text-decoration: none; }

/* ---------- sub-page head: light, typographic, no image (2026-10-02). The image
   hero is the landing's alone; every other page opens with eyebrow, title, sub. ---------- */
.pagehead { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.pagehead .section__head { margin-bottom: 0; }
.pagehead__local {
  display: block;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  max-width: 44ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-wrap: balance;
}