:root {
  --bg: #080a0d;
  --bg-alt: #0d1117;
  --surface: #11161d;
  --surface-strong: #151d26;
  --text: #f4f1ea;
  --muted: #a5acb8;
  --muted-2: #747d8b;
  --cyan: #2de2e6;
  --blue: #3b82f6;
  --lime: #b7ff4a;
  --page-glow: rgba(45, 226, 230, 0.06);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
  --max: min(1460px, 92vw);
  --header: 82px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--text);
  /* System font stack — no web-font dependency, instant render, consistent
     across visitors (was "Inter" which was never actually loaded). */
  font-family:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 75% 10%, rgba(45, 226, 230, 0.1), transparent 34rem),
    radial-gradient(circle at 12% 28%, rgba(183, 255, 74, 0.055), transparent 28rem),
    radial-gradient(circle at 88% 90%, rgba(59, 130, 246, 0.06), transparent 28rem),
    linear-gradient(180deg, #080a0d 0%, #0d1117 48%, #080a0d 100%);
  line-height: 1.5;
  /* clip (not hidden) so it doesn't become a scroll container — that would
     break position: sticky on descendants like the process dial. */
  overflow-x: clip;
}

body.nav-open {
  overflow: hidden;
}

/* Per-page accent themes — shift the dominant background glow (and the lifted-band
   glow via --page-glow) so each page carries its own colour mood within the locked
   palette. Keeps the multipage site from reading as one repeated dark template. */
body.theme-lime {
  --page-glow: rgba(183, 255, 74, 0.07);
  background:
    radial-gradient(circle at 78% 8%, rgba(183, 255, 74, 0.12), transparent 34rem),
    radial-gradient(circle at 10% 34%, rgba(45, 226, 230, 0.05), transparent 26rem),
    radial-gradient(circle at 90% 88%, rgba(59, 130, 246, 0.05), transparent 28rem),
    linear-gradient(180deg, #080a0d 0%, #0e1210 48%, #080a0d 100%);
}
body.theme-blue {
  --page-glow: rgba(59, 130, 246, 0.09);
  background:
    radial-gradient(circle at 80% 8%, rgba(59, 130, 246, 0.14), transparent 36rem),
    radial-gradient(circle at 10% 30%, rgba(45, 226, 230, 0.05), transparent 26rem),
    radial-gradient(circle at 88% 90%, rgba(183, 255, 74, 0.035), transparent 26rem),
    linear-gradient(180deg, #080a0d 0%, #0c1016 48%, #080a0d 100%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: linear-gradient(110deg, transparent 0 42%, rgba(45, 226, 230, 0.035) 42.2% 42.5%, transparent 42.8% 100%);
}

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

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

button {
  font: inherit;
}

.container {
  width: min(100% - 40px, var(--max));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--bg);
  background: var(--cyan);
  border-radius: 999px;
  transform: translateY(-140%);
}

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

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

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
  background: rgba(8, 10, 13, 0.82);
  border-color: var(--border);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* When the mobile menu is open, the fixed full-screen overlay (.nav-menu) lives
   inside the header. A backdrop-filter ancestor becomes the containing block for
   fixed descendants, which would collapse the overlay to the header box at the
   top. Drop the filter while open — the opaque overlay hides it anyway.
   transition:none makes it instant — otherwise the blur animates down over
   220ms and the header stays a containing block until it finishes, so the
   overlay opens collapsed and then snaps full-screen (a jerky drop). */
body.nav-open .site-header.is-scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 40px, var(--max));
  height: var(--header);
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  font-weight: 760;
  letter-spacing: 0;
}

.brand-logo {
  display: block;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(45, 226, 230, 0.25));
}

.brand-logo-img {
  display: block;
  flex: 0 0 auto;
  /* Scale so lockup (136px of 1086px) renders at ~24px display height.
     scale = 24/136 = 0.1765 → display width = 1448×0.1765 = 256px
     lockup start offset = 652×0.1765 = 115px */
  width: 256px;
  height: 24px;
  background: url('DID-Logo-t.webp') no-repeat 0 -115px / 256px 192px;
}

.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(45, 226, 230, 0.78);
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 54deg, rgba(45, 226, 230, 0.8) 54deg 66deg, transparent 66deg 186deg, rgba(255, 255, 255, 0.24) 186deg 190deg, transparent 190deg),
    radial-gradient(circle at 50% 50%, rgba(45, 226, 230, 0.14), transparent 56%);
  box-shadow: inset 0 0 18px rgba(45, 226, 230, 0.18), 0 0 22px rgba(45, 226, 230, 0.18);
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  border-radius: inherit;
}

.brand-mark::before {
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.brand-mark::after {
  width: 5px;
  height: 5px;
  top: 50%;
  right: 8px;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan), -10px 0 0 rgba(183, 255, 74, 0.9);
  transform: translateY(-50%);
}

.nav-menu {
  display: flex;
  gap: 26px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.nav-menu a {
  transition: color 180ms ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--text);
}

.nav-toggle {
  display: none;
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: #021013;
  font-weight: 760;
  background: linear-gradient(135deg, var(--cyan), #8af7ff);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(45, 226, 230, 0.2);
  overflow: hidden;
  transition: transform 300ms var(--ease-out-expo), box-shadow 300ms var(--ease-out-expo), border-color 300ms var(--ease-out-expo);
}

.button::after {
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 34%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: skewX(-16deg) translateX(0);
  transition: transform 520ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 56px rgba(45, 226, 230, 0.3), 0 0 0 6px rgba(45, 226, 230, 0.08);
}

.button:hover::after,
.button:focus-visible::after {
  transform: skewX(-16deg) translateX(430%);
}

.button-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
}

.button-secondary::after {
  background: linear-gradient(90deg, transparent, rgba(45, 226, 230, 0.22), transparent);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: rgba(45, 226, 230, 0.5);
  box-shadow: 0 14px 36px rgba(45, 226, 230, 0.12), inset 0 0 0 1px rgba(45, 226, 230, 0.1);
}

.button-small {
  min-height: 40px;
  padding-inline: 16px;
  color: #021013 !important;
  font-size: 0.84rem;
}

/* CTA meter: a bar that fills left-to-right on hover/focus and snaps to full
   instantly on click. Applied to primary CTAs (Get Dialed In / Request a Site
   Review), not secondary buttons. */
.button:not(.button-secondary)::before {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 7px;
  z-index: 1;
  height: 2.5px;
  content: "";
  background: rgba(2, 16, 19, 0.72);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.button:not(.button-secondary):hover::before,
.button:not(.button-secondary):focus-visible::before {
  transform: scaleX(1);
}

.button:not(.button-secondary):active::before {
  transform: scaleX(1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .button:not(.button-secondary)::before {
    transition: none;
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Persistent floating "Get Dialed In" mini-dial — mobile only (injected by JS). */
.mobile-cta {
  display: none;
}

.mobile-cta-dial {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

@keyframes ctaDialSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1000px) {
  .mobile-cta {
    position: fixed;
    z-index: 45;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: inline-flex;
    min-height: 46px;
    padding: 0 16px 0 10px;
    gap: 9px;
    font-size: 0.82rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(45, 226, 230, 0.08);
  }

  .mobile-cta-needle {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: ctaDialSpin 6s linear infinite;
  }

  body.nav-open .mobile-cta {
    display: none;
  }

  .mobile-cta.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease;
  }
}

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

.section {
  position: relative;
  padding: 96px 0;
}

.section-grid {
  position: relative;
  overflow: hidden;
}

.section-grid::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 70% 36%, #000, transparent 70%);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

h1,
h2 {
  max-width: 920px;
  letter-spacing: 0;
  line-height: 0.96;
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

h1 span {
  display: block;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

h3 {
  margin-bottom: 12px;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.12;
}

p {
  color: var(--muted);
}

.hero {
  min-height: 100svh;
  padding: calc(var(--header) + 32px) 0 62px;
}

/* ── Lifted section background — breaks pure-black monotony ── */
.section-lift {
  /* An elevated "band": a clear (but gentle) tonal step up from the near-black
     base, a soft cyan glow off the top edge, and hairline borders to define it —
     gives each page one lighter contrast moment without shocking the eye. */
  background:
    radial-gradient(120% 78% at 50% 0%, var(--page-glow), transparent 58%),
    linear-gradient(180deg, #131b24 0%, #0d141b 100%);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Hero signal field — directional noise→signal waveform video behind the
   dial. The video sits at z-0; .hero-bg is a gradient-only overlay above it
   (z-1) that keeps the headline readable and blends the edges. ── */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* Height-based sizing (like the old static image) gives stable overflow in
     both axes so JS can pin the waveform's terminus onto the dial center at
     every width — see positionHeroVideo in site.js. */
  height: 140%;
  width: auto;
  pointer-events: none;
  will-change: transform;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Light darkening passes over the video:
     horizontal — keeps the headline readable on the left;
     vertical — blends under the header and down into the next section. */
  background-image:
    linear-gradient(90deg,
      rgba(8, 10, 13, 0.9) 0%,
      rgba(8, 10, 13, 0.5) 30%,
      rgba(8, 10, 13, 0.12) 58%,
      rgba(8, 10, 13, 0.5) 100%),
    linear-gradient(to bottom,
      rgba(8, 10, 13, 0.82) 0%,
      rgba(8, 10, 13, 0) 30%,
      rgba(8, 10, 13, 0) 68%,
      rgba(8, 10, 13, 0.96) 100%);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

/* Reduced motion: no video — fall back to the static waveform still. */
/* Reduced motion: the signal canvas draws one static frame (see site.js);
   no separate still image needed since the video was replaced. */

.hero-noise {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 13, 1), transparent);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  gap: 36px;
  align-items: center;
}

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

.hero-subhead {
  max-width: 690px;
  margin-bottom: 30px;
  color: #c4c9d1;
  font-size: clamp(1.08rem, 2vw, 1.34rem);
}

.hero-proofline {
  position: relative;
  max-width: 610px;
  margin: 24px 0 0;
  padding-left: 34px;
  color: #d7dce4;
  font-size: 0.95rem;
  font-weight: 740;
}

.hero-proofline::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 22px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 14px rgba(45, 226, 230, 0.5);
}

.hero-visual {
  display: grid;
  min-height: 680px;
  gap: 34px;
  align-content: center;
  align-items: center;
  justify-items: start;
}

.dial-system {
  position: relative;
  width: min(100%, 660px);
  aspect-ratio: 1;
  --dial-angle: -135deg;
  --active-x: 29%;
  --active-y: 29%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--active-x) var(--active-y), rgba(45, 226, 230, 0.2), transparent 24%),
    radial-gradient(circle at center, rgba(45, 226, 230, 0.1), transparent 34%),
    radial-gradient(circle at 60% 15%, rgba(183, 255, 74, 0.1), transparent 18%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(45, 226, 230, 0.04);
  overflow: hidden;
  transition: background 520ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease;
}

.dial-system::before,
.dial-system::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.dial-system::before {
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
}

.dial-system::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.85%, rgba(45, 226, 230, 0.1) 49.85% 50.15%, transparent 50.15%),
    linear-gradient(180deg, transparent 0 49.85%, rgba(255, 255, 255, 0.08) 49.85% 50.15%, transparent 50.15%);
  opacity: 0.6;
}

.dial-status-row {
  position: absolute;
  top: 22px;
  right: 24px;
  left: 24px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #cdd6e2;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dial-status-row span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.dial-status-row i {
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(183, 255, 74, 0.7);
}

.grid-plane {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(520px) rotateX(56deg) translateY(80px) scale(1.2);
  transform-origin: bottom;
}

.dial-ring {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.ring-two {
  inset: 25%;
  border-style: dashed;
  border-color: rgba(45, 226, 230, 0.42);
  transform: rotate(var(--dial-angle));
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ring-three {
  inset: 35%;
  border-color: rgba(183, 255, 74, 0.3);
}

.dial-sweep {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  background: conic-gradient(from -18deg, transparent 0deg, rgba(45, 226, 230, 0.08) 4deg, rgba(45, 226, 230, 0.62) 18deg, rgba(59, 130, 246, 0.26) 34deg, transparent 46deg, transparent 360deg);
  mask-image: radial-gradient(circle, transparent 55%, #000 56%);
  transform: rotate(var(--dial-angle));
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dial-target-line {
  position: absolute;
  bottom: 50%;
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 31%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(45, 226, 230, 0.12), rgba(45, 226, 230, 0.9));
  transform: translateX(-50%) rotate(var(--dial-angle));
  transform-origin: bottom center;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dial-target-line::after {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  content: "";
  background: var(--cyan);
  border: 2px solid rgba(8, 10, 13, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(45, 226, 230, 0.78);
  transform: translateX(-50%);
}

.active-glow {
  position: absolute;
  left: var(--active-x);
  top: var(--active-y);
  z-index: 2;
  width: 110px;
  height: 110px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(45, 226, 230, 0.34), rgba(45, 226, 230, 0.08) 44%, transparent 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 620ms cubic-bezier(0.16, 1, 0.3, 1), top 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dial-core {
  position: absolute;
  inset: 38%;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(45, 226, 230, 0.24), transparent 42%),
    rgba(8, 10, 13, 0.84);
  border: 1px solid rgba(45, 226, 230, 0.36);
  box-shadow: 0 0 48px rgba(45, 226, 230, 0.24), inset 0 0 28px rgba(45, 226, 230, 0.1);
}

.dial-core span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dial-core strong {
  max-width: 130px;
  color: var(--text);
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1.05;
}

.dial-point {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  color: #dfefff;
  font-size: 0.72rem;
  font-weight: 750;
  font-family: inherit;
  white-space: nowrap;
  background: rgba(8, 10, 13, 0.66);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.dial-system.has-active .dial-point:not(.is-active) {
  opacity: 0.46;
}

.dial-point::before {
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  content: "";
  background: var(--muted-2);
  border-radius: 50%;
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* Connector dots: seven markers evenly on one circle (R_dot = 31%) so the
   needle tip lands exactly on the active option's dot. */
.dial-anchor {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(45, 226, 230, 0.035);
  transform: translate(-50%, -50%);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.dial-anchor.is-active {
  background: var(--cyan);
  border-color: rgba(45, 226, 230, 0.94);
  box-shadow: 0 0 0 7px rgba(45, 226, 230, 0.1), 0 0 24px rgba(45, 226, 230, 0.7);
}

.anchor-one {
  top: 30.6%;
  left: 25.8%;
}

.anchor-two {
  top: 30.6%;
  left: 74.2%;
}

.anchor-three {
  top: 57%;
  left: 19.8%;
}

.anchor-four {
  top: 57%;
  left: 80.2%;
}

.anchor-five {
  top: 77.9%;
  left: 36.6%;
}

.anchor-six {
  top: 77.9%;
  left: 63.4%;
}

.anchor-seven {
  top: 19%;
  left: 50%;
}

.dial-point:hover,
.dial-point:focus-visible,
.dial-point.is-active {
  color: var(--text);
  background: rgba(45, 226, 230, 0.12);
  border-color: rgba(45, 226, 230, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36), 0 0 24px rgba(45, 226, 230, 0.18);
  opacity: 1 !important;
  transform: translate(-50%, calc(-50% - 3px));
}

.dial-point:hover::before,
.dial-point:focus-visible::before,
.dial-point.is-active::before {
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(45, 226, 230, 0.75);
}

/* Seven labels on a symmetric heptagon (R=38% from center).
   Each pill is centered on its point via translate(-50%, -50%); the
   data-angle on each button matches these coordinates so the needle
   points exactly at the active pill's center. */
.label-one {
  top: 26.3%;
  left: 20.3%;
}

.label-two {
  top: 26.3%;
  left: 79.7%;
}

.label-three {
  top: 58.6%;
  left: 13%;
}

.label-four {
  top: 58.6%;
  left: 87%;
}

.label-five {
  top: 84.2%;
  left: 33.5%;
}

.label-six {
  top: 84.2%;
  left: 66.5%;
}

.label-seven {
  top: 12%;
  left: 50%;
}

.dial-info {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr) auto;
  gap: 16px;
  align-items: center;
  width: min(100%, 660px);
  min-height: 76px;
  padding: 14px 16px;
  background: rgba(8, 10, 13, 0.72);
  border: 1px solid rgba(45, 226, 230, 0.2);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.dial-info span,
.dial-info small {
  color: var(--cyan);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dial-info p {
  margin: 0;
  color: #d7dce4;
  font-size: 0.86rem;
  line-height: 1.35;
}

.dial-info small {
  color: var(--lime);
  white-space: nowrap;
}

.proof-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
}

.proof-inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
  padding: 24px 0;
}

.proof-inner p {
  margin: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.proof-inner span {
  color: var(--muted);
}

/* ── Proof gauges ── */
.proof-gauges {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.012);
}

.gauge-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.gauge-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 130px;
}

.gauge-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
}

.gauge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(135deg);
  overflow: visible;
}

.gauge-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 5;
  stroke-dasharray: 150.80 50.26;
  stroke-linecap: round;
}

.gauge-fill {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 5;
  stroke-dasharray: 150.80 50.26;
  stroke-dashoffset: 150.80;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(45, 226, 230, 0.65));
  transition: stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gauge-fill-lime {
  stroke: var(--lime);
  filter: drop-shadow(0 0 5px rgba(183, 255, 74, 0.65));
}

.gauge-value {
  position: relative;
  z-index: 1;
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.gauge-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
}

.gauge-sub {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: -6px;
}

.gauge-source {
  margin: 32px auto 0;
  font-size: 0.76rem;
  color: var(--muted-2);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .gauge-fill {
    transition: none !important;
  }
}

.section-heading {
  max-width: 840px;
  margin-bottom: 56px;
}

.section-heading p:not(.eyebrow) {
  max-width: 660px;
  font-size: 1.06rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* ── Builds marquee (homepage portfolio) ── */
@keyframes builds-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.builds-marquee {
  overflow: hidden;
  /* Full-bleed: the one element on the homepage that runs edge to edge. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 40px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.builds-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: builds-scroll 52s linear infinite;
}

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

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

.build-slide {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 300ms cubic-bezier(0.32,0.72,0,1),
              border-color 300ms ease;
}

.build-slide:hover {
  transform: translateY(-3px);
  border-color: rgba(45,226,230,0.35);
}

.build-slide img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: top;
}

.build-slide span {
  display: block;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(8,10,13,0.92);
  transition: color 200ms ease;
}

.build-slide:hover span {
  color: var(--text);
}

.project-card {
  min-width: 0;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.project-card:hover,
.project-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(45, 226, 230, 0.36);
  background: linear-gradient(180deg, rgba(45, 226, 230, 0.085), rgba(255, 255, 255, 0.025));
}

.project-visual {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background:
    radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(135deg, rgba(45, 226, 230, 0.24), rgba(59, 130, 246, 0.06)),
    #11161d;
}

.visual-healthcare {
  background:
    radial-gradient(circle at 22% 28%, rgba(183, 255, 74, 0.2), transparent 20%),
    linear-gradient(135deg, rgba(45, 226, 230, 0.2), rgba(59, 130, 246, 0.09)),
    #101823;
}

.visual-hospitality {
  background:
    radial-gradient(circle at 76% 24%, rgba(183, 255, 74, 0.2), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(45, 226, 230, 0.15)),
    #12171b;
}

.visual-restaurant {
  background:
    radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.22), transparent 22%),
    linear-gradient(145deg, rgba(183, 255, 74, 0.14), rgba(45, 226, 230, 0.08)),
    #11161d;
}

.visual-medical {
  background:
    radial-gradient(circle at 70% 60%, rgba(45, 226, 230, 0.24), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(59, 130, 246, 0.12)),
    #0f1620;
}

.project-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(135deg, #000, transparent 82%);
}

.browser-bar {
  position: absolute;
  top: 34px;
  left: 34px;
  width: min(72%, 360px);
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(8, 10, 13, 0.54);
}

.browser-bar::before {
  position: absolute;
  top: 9px;
  left: 14px;
  width: 10px;
  height: 10px;
  content: "";
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 22px 0 0 rgba(255, 255, 255, 0.28), 44px 0 0 rgba(183, 255, 74, 0.75);
}

.mockup-panel {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(8, 10, 13, 0.55);
  backdrop-filter: blur(10px);
}

.mockup-wide {
  top: 88px;
  left: 34px;
  width: 68%;
  height: 118px;
}

.mockup-small {
  right: 34px;
  bottom: 42px;
  width: 34%;
  height: 164px;
}

.mockup-line {
  left: 34px;
  bottom: 58px;
  width: 44%;
  height: 68px;
}

.project-overlay {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  min-width: 200px;
  padding: 14px 16px;
  color: var(--text);
  background: rgba(8, 10, 13, 0.84);
  border: 1px solid rgba(45, 226, 230, 0.28);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* ── Dial kit: overlay readout primitives ── */

.overlay-status {
  display: flex;
  gap: 8px;
  align-items: center;
}

.overlay-status strong {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.overlay-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(183, 255, 74, 0.7);
}

.overlay-dot-blue {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}

.overlay-wins {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.overlay-wins li {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Dial kit: win-bar — mini calibration signal bar */
.win-bar {
  flex: 0 0 auto;
  display: block;
  position: relative;
  width: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.win-bar::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--cyan);
  border-radius: inherit;
  transform: scaleX(var(--w, 80%));
  transform-origin: left;
  box-shadow: 0 0 6px rgba(45, 226, 230, 0.5);
}

.overlay-score {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Dial kit: score-track — horizontal gauge fill bar */
.score-track {
  flex: 1;
  display: block;
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.score-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cyan), var(--lime));
  border-radius: inherit;
  transform: scaleX(var(--w, 0%));
  transform-origin: left;
  box-shadow: 0 0 8px rgba(45, 226, 230, 0.5);
}

.overlay-score em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 850;
  color: var(--cyan);
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.overlay-concept-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.36);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
}

.project-card:hover .project-overlay,
.project-card:focus-within .project-overlay {
  opacity: 1;
  transform: translateY(0);
}

.project-content {
  padding: 24px 10px 10px;
}

.project-content p {
  max-width: 560px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.tag-row span,
.industry-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  color: #d8dde5;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.services-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 70px;
  align-items: start;
}

.sticky-heading {
  position: sticky;
  top: 120px;
}

.service-stack {
  display: grid;
  gap: 14px;
}

.service-card {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  padding: 30px 30px 50px;
  background: rgba(17, 22, 29, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color 300ms var(--ease-out-expo), background 300ms var(--ease-out-expo), box-shadow 300ms var(--ease-out-expo);
}

.service-card:hover,
.service-card.is-active {
  border-color: rgba(45, 226, 230, 0.38);
  background: rgba(21, 29, 38, 0.9);
  box-shadow: inset 3px 0 0 var(--cyan), 0 24px 60px rgba(0, 0, 0, 0.28);
}

.service-number {
  display: block;
  margin-bottom: 34px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

/* Dial kit: tick-graduation prefix on service numbers */
.service-number::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 9px;
  margin-right: 10px;
  vertical-align: middle;
  background: repeating-linear-gradient(
    90deg,
    rgba(45, 226, 230, 0.55) 0, rgba(45, 226, 230, 0.55) 1.5px,
    transparent 1.5px, transparent 5px
  );
  opacity: 0.85;
}

.service-card p {
  max-width: 560px;
  margin-bottom: 0;
}

/* Dial kit: signal-line — tuning bar with graduation marks */
.signal-line {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 30px;
  height: 4px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}

.signal-line::before {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 9px,
    rgba(255, 255, 255, 0.14) 9px, rgba(255, 255, 255, 0.14) 10px
  );
}

.signal-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, var(--lime), rgba(183, 255, 74, 0.6));
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(183, 255, 74, 0.32);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .signal-line::after,
.service-card.is-active .signal-line::after {
  transform: scaleX(1);
}

.process {
  background:
    radial-gradient(circle at 18% 18%, rgba(45, 226, 230, 0.09), transparent 30rem),
    rgba(255, 255, 255, 0.01);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 74px;
  align-items: start;
}

.process-dial {
  position: sticky;
  top: 132px;
}

/* Process meter — a vertical signal-bar level gauge (distinct from the round
   Services orbit): six bars of rising height light up 1 -> 6 as you scroll. */
.process-dial.process-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(100%, 300px);
  padding: 36px 28px;
  background: rgba(8, 10, 13, 0.4);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.meter-percent {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--text);
}

.meter-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 220px;
  height: 84px;
}

.meter-bars span {
  flex: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease;
}

.meter-bars span:nth-child(1) { height: 34%; }
.meter-bars span:nth-child(2) { height: 47%; }
.meter-bars span:nth-child(3) { height: 60%; }
.meter-bars span:nth-child(4) { height: 73%; }
.meter-bars span:nth-child(5) { height: 86%; }
.meter-bars span:nth-child(6) { height: 100%; }

.meter-bars span.is-on {
  background: linear-gradient(180deg, var(--lime), var(--cyan));
  box-shadow: 0 0 8px rgba(45, 226, 230, 0.32);
}

.meter-label {
  color: var(--muted-2);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .meter-bars span {
    transition: none;
  }
}

.progress-orbit {
  position: relative;
  display: grid;
  width: min(100%, 350px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(45, 226, 230, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(45, 226, 230, 0.08), transparent 48%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.2) 0deg 1deg, transparent 1deg 12deg);
  box-shadow: inset 0 0 0 32px rgba(8, 10, 13, 0.86), 0 30px 90px rgba(0, 0, 0, 0.32);
}

.progress-orbit::before {
  position: absolute;
  inset: 72px;
  content: "";
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}

.progress-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 39%;
  background: linear-gradient(to top, var(--cyan), transparent);
  transform: translateX(-50%) rotate(var(--process-angle, -60deg));
  transform-origin: top;
  transition: transform 300ms ease;
}

.progress-orbit strong {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 8vw, 5.2rem);
  line-height: 0.9;
}

.progress-orbit small {
  position: absolute;
  top: 61%;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Caption shown only when the dial collapses to the mobile sticky HUD. */
.process-dial-caption {
  display: none;
}

/* Current service name shown under the Services progress dial. */
.services-dial-name {
  display: block;
  margin-top: 16px;
  max-width: 220px;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.steps {
  display: grid;
  gap: 16px;
}

.step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 22px;
  padding: 28px;
  background: rgba(17, 22, 29, 0.66);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.step.is-active {
  border-color: rgba(45, 226, 230, 0.4);
  background: rgba(45, 226, 230, 0.075);
  transform: translateX(4px);
}

.step span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--bg);
  font-weight: 900;
  background: var(--text);
  border-radius: 50%;
}

.step.is-active span {
  background: var(--cyan);
}

.step p {
  margin-bottom: 0;
}

.review-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 54px;
  align-items: center;
  padding: 46px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(183, 255, 74, 0.14), transparent 21rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 1px rgba(45, 226, 230, 0.12), var(--shadow);
}

.review-panel h2 {
  font-size: clamp(2.4rem, 4.8vw, 4.5rem);
}

.review-panel p {
  max-width: 560px;
  margin-bottom: 30px;
}

.checklist {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-item {
  position: relative;
  min-height: 58px;
  padding: 17px 18px 17px 56px;
  color: var(--muted);
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.check-item::before {
  position: absolute;
  top: 17px;
  left: 18px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #041012;
  font-size: 0.8rem;
  font-weight: 900;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.check-item.is-lit {
  color: var(--text);
  background: rgba(45, 226, 230, 0.08);
  border-color: rgba(45, 226, 230, 0.34);
  transform: translateX(4px);
}

.check-item.is-lit::before {
  content: "✓";
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 18px rgba(183, 255, 74, 0.34);
}

.industries {
  padding-top: 72px;
}

.industry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.industry-grid span {
  min-height: 46px;
  padding-inline: 16px;
  font-size: 0.92rem;
}

.final-cta {
  padding: 88px 0;
}

.final-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 56px;
  align-items: start;
  padding: 48px;
  background:
    radial-gradient(circle at 78% 40%, rgba(45, 226, 230, 0.16), transparent 26rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-panel);
}

.final-copy h2 {
  max-width: 700px;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
}

.final-copy p {
  max-width: 520px;
  margin-bottom: 20px;
  font-size: 1.08rem;
}

.contact-alt {
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}

.contact-alt:hover {
  color: var(--cyan);
}

/* ── Lead capture form ── */
.audit-form {
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-row .req {
  color: var(--cyan);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  background: rgba(8, 10, 13, 0.6);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-row textarea {
  height: auto;
  min-height: 92px;
  padding: 12px 16px;
  resize: vertical;
  line-height: 1.5;
}

.form-row select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a5acb8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.form-row select option {
  background: #11161d;
  color: var(--text);
}

.form-row input::placeholder {
  color: var(--muted-2);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: rgba(45, 226, 230, 0.6);
  box-shadow: 0 0 0 3px rgba(45, 226, 230, 0.1);
}

.form-row input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 80, 80, 0.5);
}

.form-foot {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.form-note {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted-2);
}

/* Dial kit: tick-rule — section divider with graduation marks */
.tick-rule {
  position: relative;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
}

.tick-rule::before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  content: "";
  background: var(--border);
}

.tick-rule::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: min(100%, 680px);
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0, transparent 28px,
      rgba(45, 226, 230, 0.22) 28px, rgba(45, 226, 230, 0.22) 29px,
      transparent 29px, transparent 34px,
      rgba(45, 226, 230, 0.12) 34px, rgba(45, 226, 230, 0.12) 35px
    );
  mask-image: radial-gradient(ellipse 70% 100% at 50% 50%, #000 40%, transparent 100%);
}

.site-footer {
  position: relative;
  padding: 72px 0 48px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 18% 60%, rgba(45, 226, 230, 0.05), transparent 36%),
    radial-gradient(circle at 82% 20%, rgba(183, 255, 74, 0.03), transparent 28%);
}

.site-footer::before {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent 5%, rgba(45, 226, 230, 0.4) 50%, transparent 95%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1fr;
  gap: 34px;
  align-items: start;
}

.footer-grid p,
.footer-grid span,
.footer-grid a {
  color: var(--muted);
}

.footer-grid .brand span:last-child {
  color: var(--text);
}

.footer-links,
.footer-contact {
  display: grid;
  gap: 10px;
}

/* ── Active nav state ── */
.nav-menu a[aria-current="page"] {
  color: var(--text);
}

.nav-menu a[aria-current="page"]:not(.button)::after {
  display: block;
  width: 6px;
  height: 6px;
  margin: 4px auto 0;
  content: "";
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(45, 226, 230, 0.7);
}

/* ── Inner-page hero ── */
.page-hero {
  padding: calc(var(--header) + 92px) 0 72px;
}

.page-hero-tight {
  padding-bottom: 40px;
}

.page-hero-inner {
  max-width: 880px;
}

.page-hero h1 {
  margin-bottom: 22px;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
}

.page-hero-sub {
  max-width: 660px;
  margin-bottom: 26px;
  color: #c4c9d1;
  font-size: clamp(1.06rem, 2vw, 1.28rem);
}

.page-hero-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 20px;
}

.status-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  color: #cdd6e2;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.status-chip i {
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(183, 255, 74, 0.7);
}

.status-chip-muted {
  color: var(--muted-2);
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ── Section heading with inline action ── */
.section-heading-row {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.section-heading-row > div {
  max-width: 760px;
}

/* ── CTA-only final panel ── */
.final-panel-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

/* ── About page ── */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 70px;
  align-items: start;
}

.about-prose p {
  font-size: 1.1rem;
  margin-bottom: 18px;
}

.about-prose p:last-child {
  margin-bottom: 0;
}

.about-prose strong {
  color: var(--text);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.principle-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 30px 30px 44px;
  background: rgba(17, 22, 29, 0.72);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.principle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 226, 230, 0.34);
  background: rgba(21, 29, 38, 0.82);
}

.principle-card p {
  margin-bottom: 0;
}

/* ── Contact page ── */
.contact-section {
  padding-top: 24px;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 48px;
  align-items: start;
}

.contact-form-panel {
  padding: 36px;
  background:
    radial-gradient(circle at 80% 0%, rgba(45, 226, 230, 0.12), transparent 22rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(45, 226, 230, 0.2);
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 1px rgba(45, 226, 230, 0.08), 0 0 0 6px rgba(45, 226, 230, 0.03), var(--shadow);
}

.contact-form-title {
  margin-bottom: 24px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
}

.contact-aside {
  display: grid;
  gap: 28px;
  align-content: start;
}

.aside-block .eyebrow {
  margin-bottom: 14px;
}

.checklist-compact .check-item {
  min-height: 0;
  padding: 14px 16px 14px 50px;
  font-size: 0.92rem;
}

.checklist-compact .check-item::before {
  top: 14px;
  left: 16px;
  width: 22px;
  height: 22px;
}

.aside-contact {
  padding: 24px;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.aside-email {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--cyan);
  font-size: 1.06rem;
  font-weight: 760;
  text-underline-offset: 3px;
}

.aside-email:hover {
  text-decoration: underline;
}

.aside-meta {
  margin: 0;
  font-size: 0.86rem;
}

.reveal {
  transition:
    opacity 680ms var(--ease-out-expo),
    transform 680ms var(--ease-out-expo);
}

/* Hide-for-reveal ONLY when JS is confirmed present (html.js set by an inline
   head script) — no-JS visitors and crawlers always see content. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}

/* Above-the-fold exception: hero content is never hidden. Waiting for deferred
   JS to fade in the hero was delaying LCP by ~3.5s on throttled mobile — the
   entrance animation isn't worth the paint delay on the first viewport. */
html.js .hero .reveal,
html.js .page-hero .reveal {
  opacity: 1;
  transform: none;
}

/* Revealed state must OUTRANK the html.js hide rule above (html.js .reveal is
   (0,2,1); a bare .reveal.is-visible (0,2,0) loses to it — that specificity
   mistake once blanked every below-fold section on the live site). */
.reveal.is-visible,
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes rotateSlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }

  50% {
    transform: scale(1.55);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  :root {
    --header: 72px;
  }

  .hero-inner,
  .services-layout,
  .process-layout,
  .review-panel,
  .final-panel,
  .final-panel-cta,
  .about-layout,
  .contact-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .final-panel {
    gap: 36px;
  }

  .about-layout {
    gap: 36px;
  }

  .contact-layout {
    gap: 32px;
  }

  .page-hero {
    padding-top: calc(var(--header) + 56px);
  }

  .hero {
    padding-top: calc(var(--header) + 44px);
  }

  .hero-visual {
    min-height: 480px;
    justify-items: center;
  }

  .dial-system {
    max-width: 500px;
  }

  .dial-info {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 500px;
  }

  .dial-info small {
    justify-self: start;
  }

  .proof-inner,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .sticky-heading,
  /* Mobile: collapse the process dial into a compact sticky HUD that pins
     near the top and tracks the live step percentage, releasing once the
     process section scrolls past. Block layout (not grid) lets the sticky
     item travel the full height of the steps instead of its grid track. */
  .process-layout {
    display: block;
  }

  /* On mobile the dials render as a compact pill. The Process dial stays put,
     while the Services dial follows (pinned at the very top) so its 10->100%
     progress tracks as you scroll the service cards, then releases. */
  .process-dial {
    position: static;
    justify-self: center;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto 24px;
    padding: 8px 22px 8px 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(8, 10, 13, 0.85);
    border: 1px solid rgba(45, 226, 230, 0.28);
    border-radius: 999px;
  }

  .services-dial {
    position: sticky;
    top: calc(var(--header) + 8px);
    z-index: 20;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  }

  /* Process meter: same sticky follow on mobile — collapse the vertical card
     into a compact horizontal pill that tracks 10->100% through the process
     steps, then releases once past them. */
  .process-dial.process-meter {
    position: sticky;
    top: calc(var(--header) + 8px);
    z-index: 20;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: max-content;
    max-width: calc(100% - 24px);
    margin: 0 auto 24px;
    padding: 10px 22px 10px 18px;
    border-radius: 999px;
    background: rgba(8, 10, 13, 0.85);
    border-color: rgba(45, 226, 230, 0.28);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  }

  .process-meter .meter-percent {
    font-size: 1.35rem;
  }

  .process-meter .meter-bars {
    width: 84px;
    max-width: 84px;
    height: 30px;
    gap: 5px;
  }

  .process-meter .meter-label {
    display: none;
  }

  .progress-orbit {
    width: 58px;
    box-shadow: inset 0 0 0 6px rgba(8, 10, 13, 0.9);
  }

  .progress-orbit::before {
    inset: 11px;
  }

  .progress-orbit strong {
    font-size: 1.1rem;
  }

  .progress-orbit small {
    display: none;
  }

  .services-dial-name {
    margin-top: 0;
    max-width: none;
    text-align: left;
    white-space: nowrap;
  }

  .process-dial-caption {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .final-panel {
    align-items: start;
  }
}

/* The header row needs ~992px to fit brand + 8 links + CTA. Below that the
   CTA ran off-screen, so the drawer takes over at 1000px, not 760px. */
@media (max-width: 1000px) {
  .nav-toggle {
    position: relative;
    z-index: 51;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    place-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
  }

  /* Both bars share one grid cell so they rotate around a common center —
     separate rows made the open state meet end-to-end as a chevron, not an X. */
  .nav-toggle span:not(.sr-only) {
    grid-area: 1 / 1;
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    transition: transform 180ms ease;
  }

  .nav-toggle span:nth-child(2) {
    transform: translateY(-3px);
  }

  .nav-toggle span:nth-child(3) {
    transform: translateY(3px);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 24px;
    padding: 90px 24px;
    font-size: 1.3rem;
    background: rgba(8, 10, 13, 0.96);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

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

@media (max-width: 760px) {
  .container,
  .nav-shell {
    width: min(100% - 28px, var(--max));
  }

  h1 {
    font-size: clamp(2rem, 9.5vw, 3rem);
  }

  h2 {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }

  .section {
    padding: 72px 0;
  }

  .hero {
    min-height: auto;
    padding-bottom: 54px;
  }

  /* The horizontal signal field doesn't compose on a tall portrait hero and
     upscales blurry — drop it on mobile (also skips the video + image fetch).
     The dial stays as the hero visual. */
  .hero-bg,
  .hero-video {
    display: none;
  }

  .hero-subhead {
    font-size: 1.06rem;
  }

  .button-row,
  .button:not(.mobile-cta) {
    width: 100%;
  }

  .hero-visual {
    min-height: 380px;
  }

  .dial-system {
    border-radius: 8px;
  }

  .dial-status-row {
    top: 16px;
    right: 16px;
    left: 16px;
    font-size: 0.58rem;
  }

  .dial-status-row span:last-child {
    display: none;
  }

  .dial-point {
    font-size: 0.68rem;
  }

  .label-one {
    top: 27.5%;
    left: 21.9%;
  }

  .label-two {
    top: 27.5%;
    left: 78.1%;
  }

  .label-three {
    top: 58.1%;
    left: 14.9%;
  }

  .label-four {
    top: 58.1%;
    left: 85.1%;
  }

  .label-five {
    top: 82.4%;
    left: 34.4%;
  }

  .label-six {
    top: 82.4%;
    left: 65.6%;
  }

  .label-seven {
    top: 14%;
    left: 50%;
  }

  .dial-core {
    inset: 35%;
  }

  .dial-info {
    min-height: 0;
    padding: 12px;
  }

  .dial-info p {
    font-size: 0.78rem;
  }

  .project-visual {
    min-height: 310px;
  }

  .project-overlay {
    right: 10px;
    bottom: 10px;
    left: auto;
    min-width: 0;
    padding: 6px 10px;
    gap: 0;
    opacity: 1;
    transform: none;
    background: rgba(8, 10, 13, 0.78);
  }

  .project-overlay .overlay-status,
  .project-overlay .overlay-wins {
    display: none;
  }

  .overlay-concept-tag {
    font-size: 0.52rem;
    padding: 2px 7px;
    letter-spacing: 0.08em;
  }

  .service-card,
  .step,
  .review-panel,
  .final-panel {
    padding: 24px;
  }

  .service-card {
    padding-bottom: 44px;
  }

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

  .contact-form-panel {
    padding: 24px;
  }

  .section-heading-row .button-secondary {
    width: 100%;
  }

  .step {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }

  .step span {
    width: 40px;
    height: 40px;
  }

  .review-panel {
    gap: 32px;
  }

  .check-item {
    padding-right: 14px;
  }
}

@media (max-width: 470px) {
  .brand {
    gap: 9px;
    font-size: 0.92rem;
  }

  .brand-logo {
    width: 30px !important;
    height: 30px !important;
  }

  .brand-logo-img {
    /* scale = 20/136 = 0.1471 → width = 1448×0.1471 = 213px, offset = 652×0.1471 = 96px */
    width: 213px;
    height: 20px;
    background-size: 213px 160px;
    background-position: 0 -96px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .hero-visual {
    min-height: 330px;
  }

  .dial-point {
    padding: 6px 8px;
  }

  .dial-point::before {
    width: 5px;
    height: 5px;
    margin-right: 5px;
  }

  .dial-core {
    inset: 34%;
  }

  .dial-core strong {
    font-size: 0.86rem;
  }

  .dial-core span {
    font-size: 0.52rem;
  }

  .label-one {
    top: 28.7%;
    left: 23.4%;
  }

  .label-two {
    top: 28.7%;
    left: 76.6%;
  }

  .label-three {
    top: 57.7%;
    left: 16.9%;
  }

  .label-four {
    top: 57.7%;
    left: 83.1%;
  }

  .label-five {
    top: 80.6%;
    left: 35.3%;
  }

  .label-six {
    top: 80.6%;
    left: 64.7%;
  }

  .label-seven {
    top: 16%;
    left: 50%;
  }

  .project-content {
    padding-inline: 4px;
  }

  .mockup-small {
    display: none;
  }

  .mockup-wide,
  .mockup-line {
    width: calc(100% - 56px);
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── Reveal stagger delays ── */
.reveal-delay-1 { transition-delay: 90ms; }
.reveal-delay-2 { transition-delay: 180ms; }
.reveal-delay-3 { transition-delay: 270ms; }

/* ── Gauge dial card treatment ── */
.gauge-dial {
  padding: 24px 22px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color 280ms var(--ease-out-expo), transform 280ms var(--ease-out-expo), box-shadow 280ms var(--ease-out-expo);
}

.gauge-dial:hover {
  border-color: rgba(45, 226, 230, 0.32);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
}

/* ── Proof strip gradient cap ── */
.proof-strip {
  position: relative;
}

.proof-strip::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(45, 226, 230, 0.36), transparent);
}

/* ── Audit cards (contact page "What you get") ── */
.aside-calibration-panel {
  padding: 28px;
  background: rgba(8, 10, 13, 0.5);
  border: 1px solid rgba(45, 226, 230, 0.18);
  border-radius: var(--radius-panel);
  box-shadow: 0 0 0 4px rgba(45, 226, 230, 0.04);
}

.aside-panel-label {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 820;
  line-height: 1.2;
}

.audit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.audit-card {
  padding: 18px 16px;
  background: rgba(8, 10, 13, 0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition:
    border-color 280ms var(--ease-out-expo),
    transform 280ms var(--ease-out-expo),
    background 280ms var(--ease-out-expo);
}

.audit-card:hover {
  border-color: rgba(45, 226, 230, 0.38);
  background: rgba(45, 226, 230, 0.05);
  transform: translateY(-2px);
}

.audit-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  background: rgba(45, 226, 230, 0.08);
  border: 1px solid rgba(45, 226, 230, 0.2);
  border-radius: 9px;
}

.audit-card-icon svg {
  width: 15px;
  height: 15px;
}

.audit-card h4 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 820;
  line-height: 1.2;
}

.audit-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .audit-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Footer badge ── */
.footer-badge {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 20px;
  padding: 6px 12px;
  color: var(--muted-2);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.footer-badge i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(183, 255, 74, 0.6);
}

/* ── Testimonial block ── */
.testimonial-panel {
  position: relative;
  padding: 38px 44px;
  background: rgba(17, 22, 29, 0.72);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(45, 226, 230, 0.45);
  border-radius: var(--radius-panel);
}

.testimonial-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 20px;
  padding: 5px 12px;
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(45, 226, 230, 0.08);
  border: 1px solid rgba(45, 226, 230, 0.22);
  border-radius: 999px;
}

.testimonial-chip i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(45, 226, 230, 0.6);
}

.testimonial-quote {
  margin: 0 0 22px;
  padding: 0;
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.56;
  color: var(--text);
  border: none;
}

.testimonial-quote::before { content: "\201C"; }
.testimonial-quote::after  { content: "\201D"; }

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.testimonial-attribution strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 820;
}

.testimonial-attribution span {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 760px) {
  .testimonial-panel { padding: 28px 24px; }
}

/* Image-backed project cards */
.project-visual-img {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  aspect-ratio: 16 / 9;
  background: #11161d;
}

.project-visual-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 700ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.project-card:hover .project-visual-img img,
.project-card:focus-within .project-visual-img img {
  transform: scale(1.045);
}

.project-visual-img .project-overlay {
  background: linear-gradient(
    to top,
    rgba(8, 10, 13, 0.97) 0%,
    rgba(8, 10, 13, 0.91) 100%
  );
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
/* ── Project lightbox — full-screen image viewer ── */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 6, 8, 0.97);
  backdrop-filter: blur(8px);
  animation: lbFadeIn 200ms ease;
}

.lb-overlay[hidden] { display: none; }

body.lb-open { overflow: hidden; }

@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* image fills the viewport above the bottom bar */
.lb-stage {
  position: absolute;
  inset: 0 0 96px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 84px 8px;
  animation: lbUp 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lbUp {
  from { opacity: 0; transform: scale(0.986); }
  to   { opacity: 1; transform: none; }
}

.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lb-prev,
.lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms;
  z-index: 202;
}

.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-prev[hidden], .lb-next[hidden] { display: none; }

.lb-prev:hover,
.lb-next:hover {
  background: rgba(45, 226, 230, 0.18);
  border-color: rgba(45, 226, 230, 0.5);
}

.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }

.lb-prev svg,
.lb-next svg {
  width: 22px;
  height: 22px;
}

.lb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px 16px;
  background: linear-gradient(to top, rgba(4, 6, 8, 0.94), rgba(4, 6, 8, 0));
  z-index: 201;
}

.lb-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 9px;
}

.lb-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.lb-count {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan, #2de2e6);
  font-variant-numeric: tabular-nums;
}

.lb-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.lb-thumbs[hidden] { display: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }

.lb-thumb {
  flex: 0 0 62px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: #0c0f12;
  opacity: 0.55;
  transition: opacity 180ms, border-color 180ms;
}

.lb-thumb.is-active {
  border-color: var(--cyan, #2de2e6);
  opacity: 1;
}

.lb-thumb:hover { opacity: 1; }

.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lb-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
  z-index: 203;
}

.lb-close:hover {
  background: rgba(45, 226, 230, 0.15);
  border-color: rgba(45, 226, 230, 0.45);
  color: #fff;
}

.lb-close svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .lb-stage {
    inset: 0 0 84px;
    padding: 52px 10px 6px;
  }

  .lb-prev,
  .lb-next {
    width: 42px;
    height: 42px;
  }

  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-prev svg, .lb-next svg { width: 18px; height: 18px; }

  .lb-thumb {
    flex-basis: 52px;
    height: 36px;
  }

  .lb-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Diagram illustrations — inline-SVG "blueprint/telemetry" system
   Every figure uses .diagram-panel wrapping an inline <svg> + .d-* classes.
   Labels are system-mono, uppercase, letter-spaced, with a "// COMMENT" read.
   Palette from the site tokens (cyan primary / lime emphasis / blue secondary).
   Motion is opacity + stroke-dash ONLY, and disabled under reduced-motion.
   ────────────────────────────────────────────────────────────────────────── */
/* Diagrams float free on the page background — no card box. The figure keeps
   overflow-x scrolling as a small-screen fallback so labels never shrink
   below legibility. */
.diagram-panel {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.diagram-panel svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 620px;
}
.diagram-panel figcaption {
  margin-top: 1.1rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* In-column variant: pre-sized labels, allow it to scale instead of scroll. */
.diagram-inline { overflow: visible; }
.diagram-inline svg { min-width: 0; }

/* SVG text labels */
.d-label,
.d-label-sm {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  fill: var(--muted);
  text-transform: uppercase;
}
.d-label { font-size: 12px; letter-spacing: 0.8px; }
.d-label-sm { font-size: 10px; letter-spacing: 0.4px; }
.d-label-accent { fill: var(--cyan); }
.d-label-lime { fill: var(--lime); }
.d-label-bright { fill: var(--text); }

/* Nodes + connectors */
.d-node      { fill: var(--bg); stroke: var(--cyan); stroke-width: 1.5; }
.d-node-dim  { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; }
.d-line      { stroke: var(--cyan); stroke-width: 1.5; fill: none; }
.d-line-dim  { stroke: #24303a; stroke-width: 1; fill: none; }
.d-line-lime { stroke: var(--lime); stroke-width: 1.5; fill: none; }
.d-line-blue { stroke: var(--blue); stroke-width: 1.5; fill: none; }
.d-line-red  { stroke: #ef4444; stroke-width: 1.2; fill: none; }
.d-fill-cyan { fill: rgba(45, 226, 230, 0.1); }
.d-fill-lime { fill: rgba(183, 255, 74, 0.09); }
.d-dot-cyan  { fill: var(--cyan); }
.d-dot-lime  { fill: var(--lime); }

/* Motion primitives */
.d-flow    { stroke-dasharray: 5 7; animation: d-dash 1.6s linear infinite; }
.d-pulse   { animation: d-pulse 2.4s ease-in-out infinite; }
.d-pulse-2 { animation: d-pulse 2.4s ease-in-out 1.2s infinite; }
@keyframes d-dash  { to { stroke-dashoffset: -24; } }
@keyframes d-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .d-flow, .d-pulse, .d-pulse-2 { animation: none; }
}

/* Two-column explainer: prose beside a diagram panel */
.diagram-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.diagram-layout.reverse { direction: rtl; grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
.diagram-layout.reverse > * { direction: ltr; }
@media (max-width: 1080px) {
  .diagram-layout { grid-template-columns: 1fr; gap: 2rem; }
  .diagram-layout.reverse { direction: ltr; }
}

/* Facet cards (SEO / AEO / GEO) — reuses principle-card visual language */
.facet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.facet-card {
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.facet-card .facet-tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.facet-card h3 { margin: 0 0 0.5rem; }
.facet-card p { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .facet-grid { grid-template-columns: 1fr; }
}

/* ── Blog & article pages ── */
.article-body {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
}
.article-body h2 { margin: 2.2em 0 0.6em; color: var(--text); font-size: 1.5rem; }
.article-body h3 { margin: 1.8em 0 0.5em; color: var(--text); font-size: 1.15rem; }
.article-body p { margin: 0 0 1.1em; }
.article-body ul, .article-body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.45em; }
.article-body strong { color: var(--text); }
.article-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.article-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.article-meta .cat { color: var(--cyan); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color 240ms var(--ease-out-expo), transform 240ms var(--ease-out-expo);
}
.blog-card:hover { border-color: rgba(45, 226, 230, 0.45); transform: translateY(-3px); }
.blog-card h3 { margin: 0.5rem 0 0.55rem; font-size: 1.12rem; line-height: 1.35; color: var(--text); }
.blog-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; flex: 1; }
.blog-card .read-more { color: var(--cyan); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }

/* ── Care plans ── */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.plan-card {
  padding: 1.6rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.plan-card.plan-featured { border-color: rgba(183, 255, 74, 0.4); }
.plan-card .plan-tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.plan-card h3 { margin: 0 0 0.5rem; }
.plan-card > p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.95rem; }
.plan-card ul { margin: 0 0 1rem; padding-left: 1.15em; color: var(--muted); font-size: 0.92rem; }
.plan-card li { margin-bottom: 0.4em; }
@media (max-width: 860px) { .plan-grid { grid-template-columns: 1fr; } }

/* ── Pricing page ── */
.plan-price {
  display: block;
  margin: 2px 0 10px;
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--text);
}
.plan-price small { font-size: 0.85rem; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.plan-badge {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 4px 10px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #021013;
  background: var(--lime);
  border-radius: 999px;
}
.plan-note { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); color: var(--muted-2); font-size: 0.85rem; }
html.light .plan-badge { background: var(--cyan); color: #021013; }

/* ── Footer email capture ── */
.footer-capture { margin-top: 16px; }
.footer-capture p { margin: 0 0 8px; font-size: 0.85rem; color: var(--muted-2); }
.footer-capture form { display: flex; gap: 8px; max-width: 320px; }
.footer-capture input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
}
.footer-capture input[type="email"]:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.footer-capture button {
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--cyan);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.footer-capture .capture-done { color: var(--lime); font-size: 0.88rem; }

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME — opt-in via the nav toggle (html.light, persisted in
   localStorage, applied pre-paint by the head script). Dark is the default
   brand look. Strategy: flip the tokens, then RE-DECLARE the dark tokens on
   the "instrument" zones (home hero, diagram panels, CTA panels, contact
   instrument aside, 404 game, process dials) so they stay dark device-screens
   on a light page — the signature survives, and every dark-designed detail
   inside them keeps working untouched.
   ══════════════════════════════════════════════════════════════════════════ */
html.light {
  --bg: #f4f6f5;
  --bg-alt: #eceff0;
  --surface: #ffffff;
  --surface-strong: #e9eeee;
  --text: #111820;
  --muted: #404c57;
  --muted-2: #5d6a75;
  --border: rgba(15, 25, 32, 0.13);
  --border-strong: rgba(15, 25, 32, 0.22);
  --page-glow: rgba(13, 148, 156, 0.07);
  --shadow: 0 24px 60px rgba(15, 25, 32, 0.12);
  --accent-ink: #0b7580;      /* cyan, darkened for text on light */
  --lime-ink: #4d7c0f;        /* lime, darkened for text on light */
  color-scheme: light;
}
html.light body {
  color: var(--text);
  background:
    radial-gradient(circle at 75% 10%, rgba(13, 148, 156, 0.07), transparent 34rem),
    radial-gradient(circle at 12% 28%, rgba(101, 163, 13, 0.05), transparent 28rem),
    radial-gradient(circle at 88% 90%, rgba(59, 130, 246, 0.05), transparent 28rem),
    linear-gradient(180deg, #f4f6f5 0%, #eef1f1 48%, #f4f6f5 100%);
}
html.light body::before {
  background-image:
    linear-gradient(rgba(15, 25, 32, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 25, 32, 0.045) 1px, transparent 1px);
}
html.light body::after {
  background: linear-gradient(110deg, transparent 0 42%, rgba(13, 148, 156, 0.05) 42.2% 42.5%, transparent 42.8% 100%);
}
html.light body.theme-lime {
  background:
    radial-gradient(circle at 78% 8%, rgba(101, 163, 13, 0.10), transparent 34rem),
    radial-gradient(circle at 10% 34%, rgba(13, 148, 156, 0.05), transparent 26rem),
    linear-gradient(180deg, #f4f6f5 0%, #eff2ec 48%, #f4f6f5 100%);
}
html.light body.theme-blue {
  background:
    radial-gradient(circle at 80% 8%, rgba(59, 130, 246, 0.11), transparent 36rem),
    radial-gradient(circle at 10% 30%, rgba(13, 148, 156, 0.05), transparent 26rem),
    linear-gradient(180deg, #f4f6f5 0%, #edf1f4 48%, #f4f6f5 100%);
}
html.light .section-grid::before {
  background:
    linear-gradient(90deg, rgba(15, 25, 32, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(15, 25, 32, 0.045) 1px, transparent 1px);
}
html.light .section-lift {
  background:
    radial-gradient(120% 78% at 50% 0%, var(--page-glow), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #edf1f0 100%);
  border-block: 1px solid rgba(15, 25, 32, 0.08);
}
html.light .proof-strip { background: rgba(15, 25, 32, 0.03); }
/* Light mode: the header is always its own light surface — never transparent
   over content. (Transparent-over-the-dark-hero made the ink logo and nav
   text invisible on the homepage.) */
html.light .site-header {
  background: rgba(244, 246, 245, 0.92);
  border-bottom: 1px solid rgba(15, 25, 32, 0.08);
  backdrop-filter: blur(14px);
}
/* Menu-open: a backdrop-filter on the header makes it the containing block for
   the fixed .nav-menu overlay, collapsing it to the header box (same trap the
   dark is-scrolled rule guards near the top of this file). Light mode's
   always-on blur needs the same exemption or the mobile menu gets stuck. */
html.light body.nav-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
html.light .site-header.is-scrolled {
  background: rgba(244, 246, 245, 0.9);
  box-shadow: 0 1px 24px rgba(15, 25, 32, 0.10), 0 0 0 1px rgba(15, 25, 32, 0.04);
}
/* The logo art is light-on-dark — give the brand a dark plate in light mode. */
html.light .brand-logo-img { background-image: url('DID-Logo-ink.webp'); }
/* Accent inks: raw cyan/lime fail contrast as text on light backgrounds. */
html.light .eyebrow { color: var(--accent-ink); }
html.light .facet-tag,
html.light .blog-card .read-more,
html.light .article-meta .cat,
html.light .aside-email { color: var(--accent-ink); }
html.light .article-body a { color: var(--accent-ink); }
html.light .plan-card .plan-tag { color: var(--lime-ink); }
html.light .nf-game-bar strong { color: var(--lime-ink); }
html.light .status-chip {
  color: #3d4a55;
  background: rgba(15, 25, 32, 0.045);
  border-color: rgba(15, 25, 32, 0.16);
}
html.light .button-secondary {
  color: var(--text);
  border-color: rgba(15, 25, 32, 0.28);
}
@media (max-width: 1000px) {
  html.light .nav-menu { background: #f4f6f5; }
}

/* ── Pinned dark instrument zones: restore the dark tokens wholesale ── */
html.light .hero,
html.light .final-panel,
html.light .aside-calibration-panel,
html.light .nf-game,
html.light .process-dial {
  --bg: #080a0d;
  --bg-alt: #0d1117;
  --surface: #11161d;
  --surface-strong: #151d26;
  --text: #f4f1ea;
  --muted: #a5acb8;
  --muted-2: #747d8b;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  color: var(--text);
}
html.light .hero {
  background: linear-gradient(180deg, #080a0d 0%, #0d1117 100%);
  border-bottom: 1px solid rgba(15, 25, 32, 0.15);
}
html.light .nf-game,
html.light .aside-calibration-panel {
  background: #0d1014;
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Light-mode diagrams: the blueprint SVGs flip to ink-on-paper ──
   The d-* classes use tokens (labels/nodes flip automatically); brand-color
   strokes get darkened inks for contrast on white. CSS wins over SVG
   presentation attributes, so even hardcoded stroke="" pins are retargeted. */
html.light .d-node { fill: var(--bg); stroke: var(--accent-ink); }
html.light .d-line { stroke: var(--accent-ink); }
html.light .d-line-lime { stroke: var(--lime-ink); }
html.light .d-line-blue { stroke: #1d4ed8; }
html.light .d-line-dim { stroke: rgba(15, 25, 32, 0.28); }
html.light .d-line-red { stroke: #dc2626; }
html.light .d-label-accent { fill: var(--accent-ink); }
html.light .d-label-lime { fill: var(--lime-ink); }
html.light .d-dot-cyan { fill: var(--accent-ink); }
html.light .d-dot-lime { fill: var(--lime-ink); }
html.light .d-fill-cyan { fill: rgba(11, 117, 128, 0.10); }
html.light .d-fill-lime { fill: rgba(77, 124, 15, 0.10); }
html.light .diagram-panel svg [stroke="#2de2e6"] { stroke: var(--accent-ink); }
html.light .diagram-panel svg [fill="#3b82f6"] { fill: #1d4ed8; }
html.light .diagram-panel svg [fill="#ef4444"] { fill: #dc2626; }
html.light .diagram-panel svg [fill="#4FB3D9"],
html.light .diagram-panel svg [stroke="#4FB3D9"] { stroke: var(--accent-ink); fill: var(--accent-ink); }
/* final-panel's own background is translucent white-glass (designed to sit on
   a dark page) — replace it with a solid dark plate in light mode. */
html.light .final-panel {
  background:
    radial-gradient(circle at 78% 40%, rgba(45, 226, 230, 0.14), transparent 26rem),
    linear-gradient(145deg, #10161d, #080a0d);
  border-color: rgba(255, 255, 255, 0.14);
}
/* page-hero subhead is hardcoded pale (dark-page ink) — flip it on light */
html.light .page-hero-sub { color: var(--muted); }
/* Restore brand accents inside pinned zones (the ink overrides above reach in) */
html.light .hero .eyebrow,
html.light .final-panel .eyebrow,
html.light .aside-calibration-panel .eyebrow { color: var(--cyan); }

/* Diagram-panel a11y: caption needed a contrast bump (muted-2 measured 4.1:1
   on the panel surface), and scrollable panels are keyboard-focusable. */
.diagram-panel figcaption { color: var(--muted); }
.diagram-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Light-mode links that were brand-cyan (fails contrast on light surfaces) */
html.light .section-lede a { color: var(--accent-ink) !important; }
html.light .service-card a { color: var(--accent-ink); font-weight: 650; }
html.light .plan-card a,
html.light .plan-grid + p a { color: var(--accent-ink) !important; }

/* ── Light mode: scroll choreography CANCELLED (Avi 2026-08-26 — the staged
   reveals/dimming felt unsmooth on light and the dark translucent plates read
   as gray slabs). In light, everything renders in its final state instantly;
   dark mode keeps the full choreography. ── */
html.light .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.light .step,
html.light .check-item {
  transition: none;
}
/* Steps: light cards, no scroll-dimming — the active-step accent stays subtle */
html.light .step {
  background: var(--surface);
  border-color: var(--border);
  transform: none !important;
}
html.light .step.is-active {
  background: rgba(11, 117, 128, 0.06);
  border-color: rgba(11, 117, 128, 0.35);
}
html.light .step h3 { color: var(--text); }
html.light .step p { color: var(--muted) !important; }
html.light .step span { background: var(--surface-strong); color: var(--text); }
html.light .step.is-active span { background: var(--cyan); color: #021013; }
/* Checklist items: light cards, always in their lit/final state */
html.light .check-item {
  color: var(--muted);
  background: var(--surface);
  border-color: var(--border);
  transform: none !important;
}
html.light .check-item::before { border-color: var(--accent-ink); }
html.light .check-item.is-lit,
html.light .check-item {
  color: var(--text);
}
html.light .check-item.is-lit::before,
html.light .check-item::before {
  background: rgba(11, 117, 128, 0.12);
  border-color: var(--accent-ink);
}

/* ── Light cards for every remaining dark-plate component on light pages
   (service cards, principles, testimonial, contact aside + form controls,
   services progress dial). One sweep — translucent-dark plates only look
   right on dark pages. ── */
html.light .service-card,
html.light .service-card.is-active,
html.light .principle-card,
html.light .principle-card:hover,
html.light .testimonial-panel,
html.light .aside-contact {
  background: var(--surface);
  border-color: var(--border);
}
html.light .service-card.is-active { border-color: rgba(11, 117, 128, 0.4); background: rgba(11, 117, 128, 0.05); }
html.light .principle-card:hover { border-color: rgba(11, 117, 128, 0.35); }
html.light .form-row input,
html.light .form-row select,
html.light .form-row textarea {
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text);
}
html.light .form-row select option { background: #ffffff; color: var(--text); }
/* Dials are instruments: on light pages they sit on a solid dark plate (same
   treatment as the process meter) so nothing inside ever washes out. */
html.light .services-dial {
  padding: 26px 22px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}
html.light .contact-form-panel {
  background: var(--surface);
  border-color: rgba(11, 117, 128, 0.3);
  box-shadow: 0 0 0 1px rgba(11, 117, 128, 0.08), var(--shadow);
}
html.light .tag-row span,
html.light .industry-grid span { color: var(--muted); }
html.light .gauge-dial { background: var(--surface); border-color: var(--border); }
html.light .testimonial-chip,
html.light .service-number { color: var(--accent-ink); }
/* pinned process meter needs a solid dark plate (its translucent bg grays out
   on light), and the orbit percentage must win any hardcoded pale ink */
html.light .process-dial.process-meter,
html.light .process-meter { background: #0d1117; border-radius: 16px; }


/* ── Diagram sections get wider real estate on large screens (Avi: use the
   empty side margins — diagrams deserve the room) ── */
.container.hero-split,
.container.diagram-layout,
.container:has(> .diagram-panel) {
  width: min(100% - 40px, 1620px);
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms var(--spring);
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--text); border-color: var(--cyan); transform: rotate(15deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .tt-moon { display: none; }
html.light .theme-toggle .tt-moon { display: block; }
html.light .theme-toggle .tt-sun { display: none; }

/* Intro paragraph inside a section-heading (used on the SEO / AI-marketing pages) */
.section-lede {
  margin: 0 0 1.6rem;
  max-width: 48ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Split hero: copy on the left, a live diagram/visual on the right (per-page
   signature layout so inner pages don't all open with the same text block). */
.hero-split {
  display: grid;
  /* Diagram side gets the larger share — the SVG scales with its column. */
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
}
.hero-split-copy { max-width: 560px; }
.hero-diagram { overflow: visible; padding: 1.25rem 1.25rem 1rem; }
.hero-diagram svg { min-width: 0; }
/* Stack early: a squeezed side-by-side diagram forces a scrollbar; stacked,
   the diagram takes the full container width and reads larger. */
@media (max-width: 1160px) {
  .hero-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-split-copy { max-width: 640px; }
}

/* Editorial hero (About): oversized asymmetric headline, magazine kicker + rule. */
.hero-editorial .container { max-width: 1000px; }
.hero-editorial .hero-kicker {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin: 0 0 1.4rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}
.hero-editorial .hero-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.hero-editorial h1 {
  margin: 0 0 1.6rem;
  max-width: 15ch;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero-editorial .hero-editorial-lead {
  max-width: 40ch;
  margin-left: auto;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}
.hero-editorial-row {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  justify-content: flex-end;
}
.hero-portrait {
  width: clamp(150px, 16vw, 210px);
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
@media (max-width: 640px) {
  .hero-editorial-row { flex-direction: column; align-items: flex-start; }
}
/* Article bylines */
.byline {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
}
.byline img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); }
.byline span { color: var(--muted); font-size: 0.88rem; font-weight: 650; }

.hero-editorial .hero-editorial-sign {
  margin-top: 1.4rem;
  font-style: italic;
  color: var(--text);
}
@media (max-width: 760px) {
  .hero-editorial .hero-editorial-lead { margin-left: 0; }
}


/* ---------- FAQ (marketing page) ---------- */
.faq-list {
  display: grid;
  gap: 0.75rem;
  max-width: 820px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  position: relative;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-weight: 400;
  font-size: 1.3rem;
  transition: transform 0.25s var(--ease-out-expo);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--cyan); }
.faq-item p {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 68ch;
}

/* ── Light mode: color pass (plan + facet cards) ──────────────────────────
   Light cards read monochrome without the dark theme's glows; give each
   column a brand-tinted wash, top accent bar, and colored price/markers.
   Column accents: 1 = cyan ink, 2 (featured) = lime, 3 = blue. */
html.light .plan-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13, 148, 156, 0.06), rgba(13, 148, 156, 0) 46%), #ffffff;
  border-color: rgba(13, 148, 156, 0.24);
}
html.light .plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0d949c, rgba(13, 148, 156, 0.2));
}
html.light .plan-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(13, 148, 156, 0.09), rgba(13, 148, 156, 0) 46%), #ffffff;
  border-color: rgba(13, 148, 156, 0.42);
}
html.light .plan-card:nth-child(2)::before { background: linear-gradient(90deg, #0d949c, #3b82f6); }
html.light .plan-card:nth-child(3) {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), rgba(59, 130, 246, 0) 46%), #ffffff;
  border-color: rgba(59, 130, 246, 0.3);
}
html.light .plan-card:nth-child(3)::before { background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.2)); }

html.light .plan-card .plan-tag { color: var(--accent-ink); }
html.light .plan-card:nth-child(2) .plan-tag { color: var(--accent-ink); }
html.light .plan-card:nth-child(3) .plan-tag { color: #2563eb; }

html.light .plan-price { color: var(--accent-ink); }
html.light .plan-card:nth-child(2) .plan-price { color: var(--accent-ink); }
html.light .plan-card:nth-child(3) .plan-price { color: #1d4ed8; }
html.light .plan-price small { color: var(--muted); }

html.light .plan-card li::marker { color: var(--accent-ink); }
html.light .plan-card:nth-child(2) li::marker { color: var(--accent-ink); }
html.light .plan-card:nth-child(3) li::marker { color: #2563eb; }

html.light .plan-note { border-top-color: rgba(13, 148, 156, 0.18); }

/* Guarantee / facet cards: cyan left accent + tinted number tag */
html.light .facet-card {
  background: linear-gradient(90deg, rgba(13, 148, 156, 0.05), rgba(13, 148, 156, 0) 34%), #ffffff;
  border-color: rgba(13, 148, 156, 0.22);
  border-left: 3px solid #0d949c;
}

/* ── Light mode: sitewide color pass (Avi 2026-08-26) ─────────────────────
   Teal is the workhorse accent; blue is the alternate; lime appears only in
   small pops (badges are cyan in light). Washes stay under 9% opacity. */
html.light .service-card,
html.light .principle-card,
html.light .testimonial-panel,
html.light .aside-contact,
html.light .blog-card {
  background: linear-gradient(180deg, rgba(13, 148, 156, 0.055), rgba(13, 148, 156, 0) 44%), #ffffff;
  border-color: rgba(13, 148, 156, 0.24);
}
html.light .service-card { border-left: 3px solid rgba(13, 148, 156, 0.75); }
html.light .service-card.is-active {
  border-color: rgba(13, 148, 156, 0.45);
  border-left-color: #0d949c;
  background: linear-gradient(180deg, rgba(13, 148, 156, 0.09), rgba(13, 148, 156, 0.02) 60%), #ffffff;
}
html.light .principle-card { border-top: 3px solid rgba(13, 148, 156, 0.7); }
html.light .principle-card:nth-child(3n + 2) { border-top-color: rgba(59, 130, 246, 0.7); }
html.light .blog-card { border-top: 3px solid rgba(13, 148, 156, 0.7); }
html.light .blog-card:nth-child(3n + 2) { border-top-color: rgba(59, 130, 246, 0.7); }
html.light .testimonial-panel { border-left: 3px solid rgba(13, 148, 156, 0.7); }
html.light .aside-contact { border-top: 3px solid rgba(13, 148, 156, 0.7); }
html.light .contact-form-panel {
  background: linear-gradient(180deg, rgba(13, 148, 156, 0.05), rgba(13, 148, 156, 0) 40%), #ffffff;
}
html.light .step span { background: rgba(13, 148, 156, 0.12); color: var(--accent-ink); }
html.light .step.is-active span { background: var(--cyan); color: #021013; }
html.light .tag-row span,
html.light .industry-grid span {
  color: var(--accent-ink);
  background: rgba(13, 148, 156, 0.08);
  border-color: rgba(13, 148, 156, 0.28);
}
html.light .gauge-dial { border-color: rgba(13, 148, 156, 0.3); }
html.light .check-item { border-left: 2px solid rgba(13, 148, 156, 0.45); }

/* ── Hero orbit instrument (replaced the 7-point dial 2026-09-14; old dial
   markup archived in _backup-hero-dial-2026-09-14, dial CSS kept below for
   the archive restore path) ── */
.orbit-system{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;perspective:950px;width:620px;height:620px;max-width:100%;background:transparent !important;border:none !important;box-shadow:none !important;backdrop-filter:none !important}
.orbit-system::before,.orbit-system::after{display:none !important;content:none !important}
.oscene{position:relative;width:520px;height:520px;transform-style:preserve-3d;transform:translateX(24px) rotateX(56deg);margin:26px 0 10px}
.oscene .ring{position:absolute;inset:0;transform-style:preserve-3d}
.oring{position:absolute;inset:22px;border:1.5px dashed rgba(45,226,230,.34);border-radius:50%}
.oring-2{inset:104px;border-color:rgba(45,226,230,.14)}
.ohub{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px;text-align:center;
  background:radial-gradient(circle at 50% 32%,rgba(45,226,230,.14),rgba(45,226,230,0) 62%),#0d1117;
  border:1px solid rgba(45,226,230,.45);transform:rotateX(-56deg);
  box-shadow:0 0 52px rgba(45,226,230,.22),inset 0 0 26px rgba(45,226,230,.08),0 14px 34px rgba(0,0,0,.55)}
.ohub::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(45,226,230,.2);pointer-events:none}
.ohub-kicker{font-family:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Menlo,monospace;font-size:.5rem;
  letter-spacing:.22em;color:var(--cyan);opacity:.85}
.ohub strong{color:var(--text);font-size:.9rem;font-weight:850;letter-spacing:.05em;line-height:1.25;text-transform:uppercase}
.osprite{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.osprite .inner{position:absolute;left:0;top:0;display:inline-flex;align-items:center;white-space:nowrap;
  padding:7px 12px;font-weight:750;font-size:.72rem;color:#dfefff;
  background:rgba(8,10,13,.8);border:1px solid var(--border);border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.32);cursor:pointer;
  transform:translate(-50%,-50%) rotateX(-56deg);
  transition:color 200ms ease,border-color 200ms ease,background 200ms ease,box-shadow 200ms ease}
.osprite .inner::before{display:inline-block;flex:0 0 auto;width:6px;height:6px;margin-right:8px;content:"";
  background:var(--muted-2);border-radius:50%;transition:background 200ms ease,box-shadow 200ms ease}
.osprite .inner .onum{margin-right:6px;font-family:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Menlo,monospace;
  font-size:.66rem;letter-spacing:.08em;color:var(--cyan);opacity:.85}
.osprite .inner:hover,.osprite .inner.is-active{color:var(--text);background:rgba(45,226,230,.12);
  border-color:rgba(45,226,230,.55);box-shadow:0 14px 36px rgba(0,0,0,.36),0 0 24px rgba(45,226,230,.18)}
.osprite .inner.is-active::before{background:var(--lime);box-shadow:0 0 10px rgba(183,255,74,.7)}
@media (prefers-reduced-motion:no-preference){
  .oscene .ring{animation:ospin 26s linear infinite}
  .oscene .osprite .inner{animation:ocounter 26s linear infinite}
  .oscene:has(.inner:hover) .ring,.oscene:has(.inner:hover) .osprite .inner{animation-play-state:paused}
}
/* dial furniture: tick bezel, crosshair, sweep — the instrument face */
.obezel{position:absolute;inset:-14px;border-radius:50%;
  background:repeating-conic-gradient(rgba(45,226,230,.55) 0deg .7deg,transparent .7deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 90%,#000 91%,#000 98%,transparent 99%);
  mask:radial-gradient(closest-side,transparent 90%,#000 91%,#000 98%,transparent 99%);
  opacity:.75}
.obezel-major{inset:-20px;
  background:repeating-conic-gradient(var(--cyan) 0deg 1.1deg,transparent 1.1deg 60deg);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87%,#000 99%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 86%,#000 87%,#000 99%,transparent 100%);
  opacity:.9}
.ocross{position:absolute;inset:22px;border-radius:50%;overflow:hidden}
.ocross::before,.ocross::after{content:"";position:absolute;background:rgba(45,226,230,.14)}
.ocross::before{left:50%;top:0;bottom:0;width:1px}
.ocross::after{top:50%;left:0;right:0;height:1px}
.osweep{position:absolute;inset:22px;border-radius:50%;
  background:conic-gradient(from -34deg,transparent 0deg,rgba(45,226,230,.04) 20deg,rgba(45,226,230,.11) 34deg,rgba(45,226,230,.04) 48deg,transparent 68deg);
  filter:blur(7px);opacity:.8}
@media (prefers-reduced-motion:no-preference){
  .osweep{animation:ospin 26s linear infinite}
  .oscene:has(.inner:hover) .osweep{animation-play-state:paused}
}
@keyframes ospin{to{transform:rotateZ(360deg)}}
@keyframes ocounter{from{transform:translate(-50%,-50%) rotateZ(0) rotateX(-56deg)}to{transform:translate(-50%,-50%) rotateZ(-360deg) rotateX(-56deg)}}
/* Mobile: full pills clipped and overlapped at phone width, but the orbit
   should still visibly orbit. The pills become small numbered discs (name
   text collapses via font-size:0, the mono number stays); the hub + readout
   card name the active service. */
@media (max-width: 760px) {
  .orbit-system { width: 100%; height: auto; padding: 6px 0 0; }
  .oscene { width: 274px; height: 274px; margin: 10px auto 4px; transform: rotateX(56deg); }
  .osprite .inner {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    background: rgba(8, 10, 13, 0.85);
    border-radius: 50%;
  }
  .osprite .inner::before { display: none; }
  .osprite .inner .onum { margin: 0; font-size: 0.62rem; }
  .osprite .inner.is-active .onum { color: var(--lime); }
  .ohub { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
  .ohub strong { font-size: 0.72rem; }
}
    

/* ── Procedural hero signal (canvas replaces hero-signal.mp4, 2026-09-14) ── */
.hero-signal {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero-signal { display: none; }
}

/* ── Work page: live-site links on shipped builds ── */
.project-live-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
  color: var(--cyan);
  font-weight: 750;
  font-size: 0.9rem;
}
.project-live-link:hover { text-decoration: underline; }
html.light .project-live-link { color: var(--accent-ink); }

/* ── Footer service-area row ── */
.footer-areas-label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-2);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html.light .footer-areas-label { color: var(--muted); }