@import url('../assets/fonts/fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

:root {
  /* Hex literals defined here are tokens consumed by tokens.js. Token defaults
     mirror js/config.js theme.colors. The two stay in sync. */
  --c-brand-yellow: #FFEB00;
  --c-brand-yellow-bright: #FFF200;
  --c-brand-yellow-deep: #E5C800;
  --c-ink: #0A0A0A;
  --c-ledger: #141414;
  --c-ink-soft: #222222;
  --c-ink-muted: #5C5C5C;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F4EFE4;
  --c-hairline: #0A0A0A;
  --c-focus-ring: #1056F5;
  --c-success: #15803D;
  --c-live: #7CFFB2;
  --c-danger: #B91C1C;
  --c-danger-soft: #FF8585;
  /* Brand logo: the "livesQuare" wordmark q. Tracks the brand/accent colour so the
     mark stays on-theme (was a fixed sky-teal that clashed with the yellow identity). */
  --c-logo: var(--c-brand-yellow);
  /* Mission-control v3 surfaces: void is the deep-space page ground, deeper
     than ink panels so layered dark surfaces still read as layers. */
  --c-void: #050505;

  /* Performance Dispatch typography: Tanker display (Migra stand-in until a
     self-hosted Migra woff2 lands), Satoshi body, JetBrains Mono mono. */
  --f-display: 'Tanker', 'Migra', Georgia, serif;
  --f-body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-logo: 'Baloo 2', 'Satoshi', system-ui, sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-full: 9999px;

  --dur-fast: 120ms; --dur-base: 240ms; --dur-hero: 480ms; --dur-choreo: 800ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-surface-alt);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
::selection { background: var(--c-ink); color: var(--c-brand-yellow); }
a { color: inherit; text-decoration: none; }

/* Headings ride Tanker. Tanker is heavy by design - we set weight 400 (the only
   axis Fontshare delivers) and let the typeface carry the gravity. Letter-spacing
   tightens further for cover-headline density. */
h1, h2, h3, h4, .display-xl, .display-lg {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: clamp(64px, 9vw, 168px); letter-spacing: -0.025em; line-height: 0.92; text-transform: uppercase; }
.display-lg { font-size: clamp(48px, 6.5vw, 108px); letter-spacing: -0.02em; line-height: 0.96; text-transform: uppercase; }
h1 { font-size: clamp(40px, 5.5vw, 84px); text-transform: uppercase; }
h2 { font-size: clamp(32px, 4vw, 60px); letter-spacing: -0.015em; line-height: 1.04; text-transform: uppercase; }
h3 { font-size: 30px; line-height: 1.12; letter-spacing: -0.01em; }
h4 { font-size: 22px; line-height: 1.20; }
.body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
.caption { font-family: var(--f-mono); font-size: 12px; line-height: 1.45; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.mono { font-family: var(--f-mono); font-size: 14px; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 48px; } }
@media (min-width: 1280px) { .container { padding: 0 80px; } }

.section { padding: var(--s-9) 0; }
@media (min-width: 1024px) { .section { padding: var(--s-10) 0; } }
.section--lg { padding: var(--s-10) 0; }
@media (min-width: 1024px) { .section--lg { padding: var(--s-11) 0; } }
.section--ink { background: var(--c-ink); color: var(--c-brand-yellow); }
.section--surface { background: var(--c-surface); }
.section--surface-alt { background: var(--c-surface-alt); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-6); border: 1.5px solid var(--c-ink);
  font-family: var(--f-display); font-weight: 600; font-size: 16px;
  cursor: pointer; transition: transform var(--dur-fast) var(--ease-std);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-ink); color: var(--c-brand-yellow); }
.btn--secondary { background: var(--c-brand-yellow); color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); }

.hairline { border: 0; border-top: 1.5px solid var(--c-hairline); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  /* The brand's signature ambient motion (canvas, chart, ticker, map, count-up)
     stays alive even with reduced motion; only smooth scroll-jacking is disabled. */
  html { scroll-behavior: auto !important; }
}

/* Nav. Panel is anchored to .nav (the positioned sticky parent), not to .nav__item.
   Positioning panel against the LI breaks because the LI is only as wide as the
   toggle text - the panel ended up as a thin sliver at the wrong horizontal anchor.
   Fix: .nav__item is no longer position:relative, the panel is absolute to .nav,
   and .nav has its own stacking context lifted above hero composition layers. */
.nav { position: sticky; top: 0; z-index: 100; background: var(--c-brand-yellow); border-bottom: 1.5px solid var(--c-hairline); transition: transform var(--dur-base) var(--ease-std); isolation: isolate; }
.nav--hidden { transform: translateY(-100%); }
.nav--scrolled { box-shadow: 0 1px 0 0 var(--c-hairline); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; position: relative; }
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo-text { font-family: var(--f-logo); font-weight: 800; font-size: clamp(40px, 5.5vw, 50px); letter-spacing: -0.04em; text-transform: lowercase; line-height: 1; color: var(--c-ink); }

/* "livesQuare" wordmark. Rounded Baloo lockup. The q is the brand teal on dark
   surfaces (footer); on the accent-coloured nav it stays ink so it never blends
   into a themed background. */
.brandmark { font-family: var(--f-logo); font-weight: 800; text-transform: lowercase; letter-spacing: -0.04em; line-height: 1; }
.brandmark__q { color: var(--c-logo); }


/* Crafted signal-q glyph (js/components/logo.js). Sized to the Baloo cap
   height with the descender hanging below the baseline; teal bowl, breathing
   accent dot. */
.brandq { display: inline-block; width: 0.66em; height: 0.86em; vertical-align: -0.2em; margin: 0 0.015em; color: var(--c-logo); }
.brandq svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brandq__dot { transform-box: fill-box; transform-origin: center; animation: brandq-pulse 2.2s var(--ease-std) infinite; }
@keyframes brandq-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.45); opacity: 1; } }
.nav__list { display: none; gap: var(--s-6); list-style: none; padding: 0; margin: 0; align-items: center; }
.nav__item { position: static; }
@media (min-width: 1024px) { .nav__list { display: flex; } .nav__hamburger { display: none; } }
.nav__link { background: none; border: 0; padding: var(--s-2) 0; cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--c-ink); display: inline-flex; align-items: center; gap: var(--s-2); position: relative; }
.nav__link--toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-std);
}
.nav__link--toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.nav__link--toggle[aria-expanded="true"]::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -19px;
  height: 3px;
  background: var(--c-ink);
}
.nav__panel {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 72px;
  background: var(--c-surface);
  border-top: 1.5px solid var(--c-hairline);
  border-bottom: 1.5px solid var(--c-hairline);
  padding: var(--s-7) 80px;
  gap: var(--s-7);
  z-index: 110;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.nav__item:has(.nav__link--toggle[aria-expanded="true"]) > .nav__panel,
.nav__list:has(.nav__link--toggle[aria-expanded="true"]) .nav__link--toggle[aria-expanded="true"] + .nav__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.nav__panel-title { color: var(--c-ink-muted); margin: 0 0 var(--s-3); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; }
.nav__panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.nav__panel-link { font-size: 15px; font-family: var(--f-display); font-weight: 500; padding: var(--s-1) 0; display: inline-block; transition: transform var(--dur-fast) var(--ease-std); }
.nav__panel-link:hover { transform: translateX(4px); text-decoration: underline; text-underline-offset: 4px; }
.nav__hamburger { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: center; }
.nav__hamburger-bar { width: 24px; height: 2px; background: var(--c-ink); transition: transform var(--dur-fast) var(--ease-std); }
.nav--mobile-open .nav__hamburger-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav--mobile-open .nav__hamburger-bar:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Desktop shows the full horizontal nav, so the hamburger must hide. Repeated here
   because the base ".nav__hamburger { display: flex }" above is later in source and
   would otherwise win over the earlier min-width hide, leaving a redundant hamburger. */
@media (min-width: 1024px) { .nav__hamburger { display: none; } }

/* Mobile overlay: the dropdown panels collapse inline as accordion bodies. */
@media (max-width: 1023px) {
  .nav--mobile-open .nav__list {
    display: flex; flex-direction: column;
    position: fixed; inset: 72px 0 0 0;
    background: var(--c-brand-yellow);
    padding: var(--s-7) 24px var(--s-9);
    gap: var(--s-5);
    overflow-y: auto;
    align-items: stretch;
    z-index: 105;
  }
  .nav--mobile-open .nav__item { width: 100%; border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 20%, transparent); padding-bottom: var(--s-4); }
  .nav--mobile-open .nav__link { font-size: 22px; padding: var(--s-3) 0; width: 100%; justify-content: space-between; }
  .nav--mobile-open .nav__panel {
    display: none;
    position: static;
    padding: var(--s-2) 0 var(--s-3);
    border: 0;
    box-shadow: none;
    background: transparent;
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .nav--mobile-open .nav__item:has(.nav__link--toggle[aria-expanded="true"]) .nav__panel { display: grid; }
  .nav--mobile-open .nav__panel-link { font-size: 17px; }
}

/* Footer */
.footer { background: var(--c-ink); color: var(--c-brand-yellow); padding: var(--s-10) 0 var(--s-6); }
.footer__grid { display: grid; gap: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--s-8); } }
.footer__logo { font-family: var(--f-logo); font-weight: 800; font-size: 34px; text-transform: lowercase; }
.footer__tagline { max-width: 28ch; opacity: 0.9; margin: var(--s-3) 0; }
.footer__contact { font-family: var(--f-mono); font-size: 14px; }
.footer__col-title { color: var(--c-brand-yellow); opacity: 0.6; }
.footer__col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer__link { font-size: 14px; opacity: 0.9; }
.footer__link:hover { opacity: 1; text-decoration: underline; }
.footer .hairline { border-color: var(--c-brand-yellow); opacity: 0.2; margin: var(--s-7) 0; }
.footer__legal { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; opacity: 0.7; font-size: 13px; }

/* Floating contact button */
.fab { position: fixed; right: 24px; bottom: 24px; width: 64px; height: 64px; border-radius: 50%; background: var(--c-brand-yellow); color: var(--c-ink); border: 1.5px solid var(--c-brand-yellow); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 40; box-shadow: 0 8px 28px rgba(0,0,0,0.45); animation: fab-glow 2.8s ease-in-out infinite; }
.fab:hover { transform: scale(1.06); }
/* Always-on "sign of life": a soft yellow halo breathes outward continuously. */
@keyframes fab-glow {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 0 color-mix(in srgb, var(--c-brand-yellow) 60%, transparent); }
  50%      { box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 14px color-mix(in srgb, var(--c-brand-yellow) 0%, transparent); }
}
/* Stronger attention ring until the visitor opens it the first time. */
.fab--pulse::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-brand-yellow); animation: fab-pulse 2.4s var(--ease-std) infinite; }
@keyframes fab-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* Contact popup - premium dispatch modal */
/* ============================================================
   CONTACT POPUP - "open a channel". A mission-control transmission
   panel: ink glass, corner brackets, yellow signal accents, mono
   field labels. Bottom-sheet on phones.
   ============================================================ */
.popup {
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 30%, transparent);
  border-radius: 6px;
  max-width: 560px; width: calc(100% - 32px);
  background: color-mix(in srgb, var(--c-ledger) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--c-surface);
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8), inset 0 0 80px rgba(0, 0, 0, 0.35);
}
.popup[open] { animation: popup-in 0.34s var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1)); }
@keyframes popup-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.popup__card > .popup__trust:last-child { padding-bottom: var(--s-6); }
.popup::backdrop { background: color-mix(in srgb, var(--c-void) 76%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.popup__card { padding: 0; position: relative; }
/* corner brackets - the instrument signature */
.popup__card::before, .popup__card::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 3;
}
.popup__card::before { top: 0; left: 0; border-top: 2px solid var(--c-brand-yellow); border-left: 2px solid var(--c-brand-yellow); }
.popup__card::after { bottom: 0; right: 0; border-bottom: 2px solid var(--c-brand-yellow); border-right: 2px solid var(--c-brand-yellow); }
.popup__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 30%, transparent);
  color: var(--c-brand-yellow); font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: var(--r-full); z-index: 2;
  transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.popup__close:hover { background: color-mix(in srgb, var(--c-brand-yellow) 14%, transparent); border-color: var(--c-brand-yellow); }
.popup__eyebrow {
  display: flex; align-items: center; gap: 8px;
  padding: var(--s-5) var(--s-6) 0;
  font-size: 10px; letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--c-brand-yellow) 80%, transparent);
}
.popup__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--c-brand-yellow);
  box-shadow: 0 0 10px var(--c-brand-yellow);
  animation: brandq-pulse 2.2s var(--ease-std) infinite;
}
.popup__eyebrow--ok { color: var(--c-live); }
.popup__eyebrow--ok .popup__eyebrow-dot { background: var(--c-live); box-shadow: 0 0 10px var(--c-live); }
/* Ink masthead band */
.popup__heading {
  margin: 0; padding: var(--s-2) var(--s-6) 0;
  color: var(--c-brand-yellow);
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 36px); letter-spacing: 0;
  text-transform: uppercase; line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--c-brand-yellow) 26%, transparent);
}
.popup__sub { margin: 0; padding: var(--s-3) var(--s-6) 0; color: color-mix(in srgb, var(--c-surface) 84%, transparent); font-size: 14px; font-weight: 500; line-height: 1.6; }
.popup__fields { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-6) 0; }
.popup__field { display: flex; flex-direction: column; gap: 7px; }
.popup__label { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--c-brand-yellow) 90%, transparent); }
.popup__field input, .popup__field textarea {
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 22%, transparent);
  background: color-mix(in srgb, var(--c-void) 45%, transparent);
  border-radius: 3px; font: inherit; font-size: 15px;
  color: var(--c-surface); caret-color: var(--c-brand-yellow);
  transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.popup__field input::placeholder, .popup__field textarea::placeholder { color: color-mix(in srgb, var(--c-surface) 35%, transparent); }
.popup__field input:focus, .popup__field textarea:focus {
  outline: none; border-color: var(--c-brand-yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand-yellow) 18%, transparent), 0 0 18px color-mix(in srgb, var(--c-brand-yellow) 14%, transparent);
}
.popup__field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--c-ledger) inset;
  -webkit-text-fill-color: var(--c-surface);
}
.popup__field textarea { resize: vertical; min-height: 80px; }
/* intl-tel-input: fit the country-flag phone field into the dark dispatch form.
   Scoped under .popup__field so these win over the library CSS (which is injected
   at runtime, i.e. after this stylesheet). Both the modal + inline form use it. */
.popup__field .iti { width: 100%; display: block; }
.popup__field .iti input, .popup__field .iti input[type=tel] { width: 100%; }
.popup__field .iti__selected-dial-code { color: var(--c-surface); }
.popup__field .iti--separate-dial-code .iti__selected-flag {
  background-color: color-mix(in srgb, var(--c-void) 35%, transparent); border-radius: 3px 0 0 3px;
}
.popup__field .iti__selected-flag:hover,
.popup__field .iti__selected-flag:focus { background-color: color-mix(in srgb, var(--c-brand-yellow) 12%, transparent); }
.popup__field .iti__country-list {
  background: var(--c-ledger); color: var(--c-surface);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 26%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); border-radius: 4px;
}
.popup__field .iti__country.iti__highlight { background-color: color-mix(in srgb, var(--c-brand-yellow) 16%, transparent); }
.popup__field .iti__country-list .iti__dial-code { color: color-mix(in srgb, var(--c-surface) 55%, transparent); }
.popup__field .iti__country-list .iti__divider { border-bottom-color: color-mix(in srgb, var(--c-surface) 14%, transparent); }
.popup__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  padding: 8px var(--s-4);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 26%, transparent);
  background: transparent; cursor: pointer; border-radius: var(--r-full);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-surface) 78%, transparent);
  transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.chip:hover { border-color: var(--c-brand-yellow); color: var(--c-surface); }
.chip--active { background: var(--c-brand-yellow); border-color: var(--c-brand-yellow); color: var(--c-ink); font-weight: 700; }
.popup__actions { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-5) var(--s-6) 0; }
.popup__actions .btn--primary { flex: 1; justify-content: center; background: var(--c-brand-yellow); color: var(--c-ink); border-color: var(--c-brand-yellow); box-shadow: 0 0 26px color-mix(in srgb, var(--c-brand-yellow) 28%, transparent); }
.popup__actions .btn--ghost { color: var(--c-brand-yellow); border-color: color-mix(in srgb, var(--c-brand-yellow) 45%, transparent); }
.popup__trust { display: flex; align-items: center; gap: 7px; padding: var(--s-4) var(--s-6) var(--s-6); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--c-surface) 55%, transparent); }
.popup__trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-live); box-shadow: 0 0 8px var(--c-live); flex: none; }

/* Phones: pin the card to the top of the screen (10px gap) so it opens right
   under the status bar - the whole form is visible immediately, not centred or
   stranded at the bottom. */
@media (max-width: 560px) {
  .popup {
    width: calc(100% - 20px); max-width: 100%;
    border-radius: 12px;
    margin: 10px auto auto;             /* top of screen, 10px gap, h-centred */
    max-height: calc(100dvh - 20px);    /* never taller than the screen; scrolls */
  }

  /* Compact so the whole form fits a phone screen without scrolling, and drop
     the optional long-text field to keep it short and quick to fill. The 16px
     input font also stops iOS auto-zooming on focus. */
  .popup__eyebrow { padding-top: var(--s-4); }
  .popup__heading { font-size: 26px; }
  .popup__sub { padding-top: var(--s-2); font-size: 13.5px; }
  .popup__fields { gap: var(--s-3); padding-top: var(--s-4); }
  .popup__field input, .popup__field textarea { padding: 10px var(--s-3); font-size: 16px; }
  .popup__actions { padding-top: var(--s-4); }
  .popup__trust { padding-top: var(--s-3); padding-bottom: var(--s-4); }
  .popup__field:has(textarea) { display: none; }   /* "anything else" - off on phones */
}
/* Inline fallback / success states */
.popup__note {
  margin: var(--s-4) var(--s-6) 0; padding: var(--s-3) var(--s-4);
  border-radius: 3px;
  background: color-mix(in srgb, var(--c-brand-yellow) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 35%, transparent);
  font-size: 13px; line-height: 1.55; color: color-mix(in srgb, var(--c-surface) 85%, transparent);
}
.popup__note a { font-weight: 600; color: var(--c-brand-yellow); }
.popup__success-body { padding: var(--s-4) var(--s-6) 0; }
.popup__success-body p { color: color-mix(in srgb, var(--c-surface) 70%, transparent); font-weight: 400; line-height: 1.6; margin: 0; }
.popup__next { margin: var(--s-5) var(--s-6) var(--s-6); border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 28%, transparent); }
.popup__next-row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 10px var(--s-4); font-size: 10px; letter-spacing: 0.14em;
  border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 14%, transparent);
}
.popup__next-row:first-child { border-top: 0; }
.popup__next-k { color: color-mix(in srgb, var(--c-surface) 50%, transparent); }
.popup__next-v { color: var(--c-brand-yellow); }

/* ===== Inline contact form: the /contact conversion panel ==============
   Reuses the popup field/chip/action classes (one form spec, two surfaces).
   Left rail = invitation + response standards; right = the live form panel. */
.cform-layout {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(var(--s-6), 4vw, var(--s-8)); align-items: center;
}
.cform-intro { display: flex; flex-direction: column; gap: var(--s-3); }
.cform-intro__heading { margin: 0; max-width: 16ch; color: var(--c-surface); }
.cform-intro__lede { margin: 0; max-width: 42ch; color: color-mix(in srgb, var(--c-surface) 70%, transparent); }
.cform-intro__specs {
  list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: 34ch;
  border-top: 1px solid color-mix(in srgb, var(--c-surface) 16%, transparent);
}
.cform-intro__spec {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-surface) 12%, transparent);
  font-size: 11px; letter-spacing: 0.12em;
}
.cform-intro__spec-k { color: color-mix(in srgb, var(--c-surface) 52%, transparent); text-transform: uppercase; }
.cform-intro__spec-v { color: var(--c-brand-yellow); text-transform: uppercase; }
.cform {
  position: relative; background: var(--c-ledger);
  border: 1.5px solid color-mix(in srgb, var(--c-brand-yellow) 26%, transparent);
}
.cform::before, .cform::after { content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.cform::before { top: -1px; left: -1px; border-top: 2px solid var(--c-brand-yellow); border-left: 2px solid var(--c-brand-yellow); }
.cform::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--c-brand-yellow); border-right: 2px solid var(--c-brand-yellow); }
/* feature-tile rendered as an action button (opens the contact popup) */
button.feature-tile { font: inherit; text-align: left; width: 100%; color: inherit; -webkit-appearance: none; appearance: none; }
@media (max-width: 860px) { .cform-layout { grid-template-columns: 1fr; gap: var(--s-5); } }

/* Section themes. Each theme paints the whole band; switching between adjacent
   themes is the visual divider. Adjacent same-theme sections get a hairline. */
.section { position: relative; }
.section--default { background: var(--c-surface-alt); color: var(--c-ink); }
.section--surface { background: var(--c-surface); color: var(--c-ink); }
.section--surface-alt { background: var(--c-surface-alt); color: var(--c-ink); }
.section--yellow { background: var(--c-brand-yellow); color: var(--c-ink); }
.section--yellow-bright { background: var(--c-brand-yellow-bright); color: var(--c-ink); }
.section--ink { background: var(--c-ink); color: var(--c-brand-yellow); }
.section--full-bleed { padding-left: 0; padding-right: 0; }

/* Hairline between adjacent same-theme sections only. Different-theme adjacency
   is its own boundary. */
.section--surface     + .section--surface     { border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent); }
.section--surface-alt + .section--surface-alt { border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent); }
.section--yellow      + .section--yellow      { border-top: 1px solid color-mix(in srgb, var(--c-ink) 22%, transparent); }
.section--ink         + .section--ink         { border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 18%, transparent); }

/* Hero gets no section padding. The hero owns its own composition. */
.section--hero { padding: 0; background: transparent; }

/* Editorial side-marker. Lives in the outer left gutter on desktop, hidden on
   mobile. Renders the section index in mono and a small tag label, rotated. */
.section__index {
  display: none;
  position: absolute;
  top: var(--s-9);
  left: 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.section__index-num { font-weight: 600; }
.section__index-sep { display: inline-block; width: 14px; }
.section--ink .section__index { color: var(--c-brand-yellow); opacity: 0.5; }
@media (min-width: 1280px) {
  .section__index { display: inline-flex; gap: var(--s-3); align-items: center; }
}

/* Section eyebrow micro-label (small mono caption above the H2). Component
   styles still own the heading; this is a shared bit of editorial glue. */
.section__eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  opacity: 0.7;
}
.section--ink .section__eyebrow { color: var(--c-brand-yellow); opacity: 0.65; }

/* Hero */
.hero { position: relative; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; padding-top: var(--s-7); padding-bottom: var(--s-7); }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-9); align-items: center; padding-top: var(--s-8); padding-bottom: var(--s-8); } }
.hero__left { display: flex; flex-direction: column; gap: var(--s-5); }
.hero__eyebrow { color: var(--c-ink-soft); margin: 0; }
.hero__headline { color: var(--c-ink); }
.hero__sub { color: var(--c-ink-soft); margin: 0; max-width: 56ch; }
.hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.hero__mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); border-top: 1.5px solid var(--c-hairline); padding-top: var(--s-5); }
.hero__mini-stat { display: flex; flex-direction: column; gap: var(--s-1); }
.hero__mini-stat-value { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -0.02em; }
.hero__mini-stat-label { color: var(--c-ink-muted); font-size: 11px; }
.hero__right { position: relative; min-height: 360px; }
@media (min-width: 1024px) { .hero__right { min-height: 480px; } }

/* ----------------------------------------------------------
   Hero - home variant: split yellow/ink poster composition.
   Replaces the old grid-mesh + small terminal layout.
   ---------------------------------------------------------- */
.hero--home { background: var(--c-brand-yellow-bright); }
.hero--home .hero__split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: auto;
}
@media (min-width: 1024px) {
  .hero--home .hero__split {
    grid-template-columns: 56% 44%;
    min-height: calc(100vh - 150px);
  }
}

/* Yellow side */
.hero__pane--yellow {
  position: relative;
  background: var(--c-brand-yellow-bright);
  color: var(--c-ink);
  padding: var(--s-5) 24px var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  overflow: hidden;
}
.hero__pane--yellow::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    color-mix(in srgb, var(--c-ink) 14%, transparent) 0 1px,
    transparent 1px 120px
  );
  opacity: 0.6;
  pointer-events: none;
}
@media (min-width: 768px) { .hero__pane--yellow { padding: var(--s-8) 48px; } }
@media (min-width: 1280px) { .hero__pane--yellow { padding: var(--s-5) 80px var(--s-5); } }

.hero__poster-tag {
  position: relative;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}
.hero__poster-body { position: relative; display: flex; flex-direction: column; gap: var(--s-5); }
.hero--home .hero__eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; opacity: 0.75; }
.hero--home .hero__headline { color: var(--c-ink); max-width: 18ch; }
.hero--home .hero__sub { max-width: 48ch; }

.hero__poster-foot {
  position: relative;
  border-top: 1.5px solid var(--c-hairline);
  padding-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.hero__poster-foot .hero__mini-stat { gap: var(--s-1); }
.hero__poster-foot .hero__mini-stat-value { font-size: clamp(20px, 2vw, 28px); }
.hero__poster-foot .hero__mini-stat-label { font-family: var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* Ink side */
.hero__pane--ink {
  position: relative;
  background: var(--c-ink);
  color: var(--c-brand-yellow);
  padding: var(--s-7) 24px var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
}
.hero__pane--ink::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--c-brand-yellow) 35%, transparent) 1px,
    transparent 1.5px
  );
  background-size: 22px 22px;
  opacity: 0.18;
  pointer-events: none;
}
@media (min-width: 768px) { .hero__pane--ink { padding: var(--s-8) 48px; } }
@media (min-width: 1280px) { .hero__pane--ink { padding: var(--s-9) 64px var(--s-9); } }

.hero__pane-label {
  position: relative;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-brand-yellow) 70%, transparent);
}

.hero__terminal {
  position: relative;
  background: var(--c-ink);
  color: var(--c-brand-yellow);
  border: 1.5px solid color-mix(in srgb, var(--c-brand-yellow) 35%, transparent);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  min-height: 360px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
@media (min-width: 1024px) {
  .hero__terminal { min-height: 0; height: 72%; padding: var(--s-6); }
}
.hero__terminal-bar { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in srgb, var(--c-brand-yellow) 25%, transparent); }
.hero__terminal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand-yellow); opacity: 0.4; }
.hero__terminal-dot:first-child { opacity: 0.85; }
.hero__terminal-title { margin-left: auto; opacity: 0.7; font-size: 12px; }
.hero__terminal-stream { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) 0; flex: 1; }
.hero__terminal-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.hero__terminal-key { opacity: 0.65; letter-spacing: 0.04em; }
.hero__terminal-value { font-weight: 600; transition: opacity var(--dur-fast) var(--ease-std); font-variant-numeric: tabular-nums; }
.hero__terminal-value.is-fading { opacity: 0.2; }
.hero__terminal-foot { display: flex; justify-content: space-between; padding-top: var(--s-3); border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 25%, transparent); font-size: 12px; opacity: 0.7; }

/* Hero status row (under the terminal). Yellow rule + slow blinking dot. */
.hero__status {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 28%, transparent);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-brand-yellow) 78%, transparent);
}
.hero__status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-brand-yellow);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand-yellow) 60%, transparent);
  animation: hero-status-pulse 2.4s var(--ease-std) infinite;
}
.hero__status-spacer { flex: 1; }
.hero__status-meta { opacity: 0.6; }
@keyframes hero-status-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand-yellow) 70%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-brand-yellow) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand-yellow) 0%, transparent); }
}

/* Hero - service/industry/city variants: animated live-signal console */
.hero--service .hero__grid, .hero--industry .hero__grid, .hero--city .hero__grid { align-items: center; }
@media (min-width: 1024px) {
  .hero--service .hero__grid, .hero--industry .hero__grid, .hero--city .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); padding-top: var(--s-7); padding-bottom: var(--s-7); }
}
.hero--service .hero__sub, .hero--industry .hero__sub, .hero--city .hero__sub { max-width: 52ch; }

.hero__console {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: var(--c-ink);
  color: var(--c-surface);
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 22%, transparent);
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, 0.7);
}
@media (min-width: 1024px) { .hero__console { min-height: 470px; } }

/* soft yellow glow, upper-right */
.hero__console::before {
  content: ''; position: absolute; z-index: 0; top: -32%; right: -22%;
  width: 72%; height: 72%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-brand-yellow) 26%, transparent), transparent 70%);
  pointer-events: none;
}
.hero__console-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--s-5);
  height: 100%; min-height: inherit; padding: clamp(20px, 3vw, 34px);
}

.hero__console-head { display: flex; align-items: center; gap: var(--s-3); }
.hero__console-glyph {
  display: inline-flex; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center; border-radius: 12px;
  background: var(--c-brand-yellow); color: var(--c-ink);
}
.hero__console-glyph svg { width: 24px; height: 24px; }
.hero__console-tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--c-brand-yellow) 88%, white); }
.hero__console-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.hero__console-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand-yellow); animation: console-pulse 1.8s ease-out infinite; }
@keyframes console-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand-yellow) 70%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-brand-yellow) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand-yellow) 0%, transparent); }
}

.hero__console-focal { display: flex; flex-direction: column; gap: 4px; }
.hero__console-focal-value { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.92; font-size: clamp(52px, 7vw, 84px); color: var(--c-brand-yellow); }
.hero__console-focal-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-surface) 68%, transparent); }

.hero__console-stream { flex: none; gap: 0; padding: 0; margin-top: auto; border-top: 1px solid color-mix(in srgb, var(--c-surface) 14%, transparent); }
.hero__console .hero__terminal-row { padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-surface) 8%, transparent); font-size: 14px; }
.hero__console .hero__terminal-key { opacity: 0.6; }
.hero__console .hero__terminal-value { color: var(--c-brand-yellow); font-weight: 600; }

.hero__console-foot { display: flex; justify-content: space-between; padding-top: var(--s-3); font-size: 11px; opacity: 0.48; letter-spacing: 0.06em; }

/* Tighten the console heroes on phones so they do not run too tall. */
@media (max-width: 640px) {
  .hero__console { min-height: 320px; }
  .hero--service .hero__grid, .hero--industry .hero__grid, .hero--city .hero__grid { gap: var(--s-5); }
  .hero--service .hero__mini-stats, .hero--industry .hero__mini-stats, .hero--city .hero__mini-stats { margin-top: var(--s-4); padding-top: var(--s-4); gap: var(--s-3); }
  .hero__mini-stat-label { font-size: 10px; }
  .hero__console-focal-value { font-size: clamp(44px, 13vw, 60px); }
}

/* Home hero - live performance dashboard (ink pane) */
.hero__dash { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.hero__dash-head { display: flex; align-items: center; justify-content: space-between; }
.hero__dash-tag { font-size: 12px; letter-spacing: 0.16em; color: color-mix(in srgb, var(--c-brand-yellow) 88%, white); }
.hero__dash-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--c-surface) 65%, transparent); }
.hero__dash-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-live); animation: console-pulse 1.8s ease-out infinite; }
.hero__dash-focal { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.hero__dash-focal-value { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 0.9; letter-spacing: -0.02em; color: var(--c-brand-yellow); }
.hero__dash-focal-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--c-surface) 58%, transparent); }
.hero__chart-wrap { position: relative; flex: 1; min-height: 120px; border-top: 1px solid color-mix(in srgb, var(--c-surface) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c-surface) 12%, transparent); }
.hero__chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__chart-label { position: absolute; left: 0; bottom: 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--c-surface) 42%, transparent); pointer-events: none; }
.hero__dash-chips { display: flex; gap: var(--s-2); }
.hero__dash-chip { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); background: color-mix(in srgb, var(--c-surface) 6%, transparent); border-radius: var(--r-sm); }
.hero__dash-chip-k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--c-surface) 52%, transparent); }
.hero__dash-chip-v { font-weight: 700; font-size: 18px; color: var(--c-brand-yellow); }
.hero__dash-foot { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.42; letter-spacing: 0.04em; }

/* Hero - industry variant */
.hero__right--industry .hero__industry-panel { background: var(--c-ink); color: var(--c-brand-yellow); border-radius: var(--r-md); aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-5); position: relative; }
.hero__right--industry .hero__industry-icon svg { width: clamp(120px, 14vw, 200px); height: auto; }
.hero__right--industry .hero__industry-tag { font-size: 13px; letter-spacing: 0.12em; opacity: 0.8; }

/* Hero - city variant */
.hero__right--city .hero__city-svg { width: 100%; height: auto; border: 1.5px solid var(--c-ink); display: block; }


/* CTA-Strip. Background comes from the hosting section theme. */
.cta-strip { background: transparent; padding: 0; }
.cta-strip__inner { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: end; }
@media (min-width: 1024px) { .cta-strip__inner { grid-template-columns: minmax(0, 1.5fr) auto; gap: var(--s-8); } }
.cta-strip__headline { margin: 0; max-width: 22ch; }
.cta-strip__sub { margin: var(--s-4) 0 0; max-width: 56ch; opacity: 0.85; }
.cta-strip__btn { padding: var(--s-4) var(--s-7); font-size: 18px; }
.section--full-bleed .cta-strip__inner { padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .section--full-bleed .cta-strip__inner { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 1280px) { .section--full-bleed .cta-strip__inner { padding-left: 80px; padding-right: 80px; } }

/* Stats-Row */
.stats-row__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.stats-row__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.stats-row { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 768px) {
  .stats-row--n3 { grid-template-columns: repeat(3, 1fr); }
  .stats-row--n4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .stats-row--n4 { grid-template-columns: repeat(4, 1fr); }
}
.stat-tile { background: transparent; border: 0; border-top: 1.5px solid var(--c-hairline); padding: var(--s-5) var(--s-2) var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.stat-tile__value { font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 6vw, 88px); letter-spacing: -0.03em; line-height: 0.98; color: var(--c-ink); }
.stat-tile__label { color: var(--c-ink-muted); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.stat-tile__note { color: var(--c-ink-soft); font-size: 14px; margin: var(--s-3) 0 0; line-height: 1.55; max-width: 38ch; }

/* Feature-Grid */
.feature-grid__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.feature-grid__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.feature-tile { background: var(--c-surface); border: 1.5px solid var(--c-hairline); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); transition: transform var(--dur-base) var(--ease-std); }
.feature-tile--link { cursor: pointer; }
.feature-tile--link:hover { transform: translateY(-3px); }
.feature-tile__icon { width: 44px; height: 44px; background: var(--c-brand-yellow); border: 1.5px solid var(--c-ink); display: flex; align-items: center; justify-content: center; color: var(--c-ink); }
.feature-tile__title { font-size: 22px; line-height: 1.2; margin: 0; color: var(--c-ink); }
.feature-tile__body { color: var(--c-ink-soft); margin: 0; font-size: 15px; line-height: 1.6; }
.feature-tile__cta { margin-top: auto; color: var(--c-ink); font-weight: 600; }

/* Feature tiles on ink-themed sections: black on black with yellow accents. */
.section--ink .feature-tile {
  background: color-mix(in srgb, var(--c-brand-yellow) 4%, var(--c-ink));
  border: 0;
  border-top: 2px solid var(--c-brand-yellow);
}
.section--ink .feature-tile__icon {
  background: transparent;
  border-color: var(--c-brand-yellow);
  color: var(--c-brand-yellow);
}
.section--ink .feature-tile__title { color: var(--c-brand-yellow); }
.section--ink .feature-tile__body  { color: color-mix(in srgb, var(--c-brand-yellow) 60%, var(--c-surface)); }
.section--ink .feature-tile__cta   { color: var(--c-brand-yellow); }

/* Process-Strip */
.process-strip__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.process-strip__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.process-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; }
.process-step { position: relative; background: var(--c-surface); border: 1.5px solid var(--c-hairline); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); scroll-snap-align: start; min-width: 240px; overflow: hidden; }
.process-step__bignum {
  position: absolute;
  top: -12px; right: -8px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(96px, 10vw, 160px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--c-ink) 7%, transparent);
  pointer-events: none;
  user-select: none;
}
.process-step__num { color: var(--c-ink-muted); font-size: 12px; letter-spacing: 0.22em; position: relative; text-transform: uppercase; }
.process-step__name { font-size: 22px; line-height: 1.2; margin: 0; color: var(--c-ink); position: relative; }
.process-step__detail { color: var(--c-ink-soft); margin: 0; font-size: 15px; line-height: 1.55; position: relative; }
@media (min-width: 768px) {
  .process-strip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow: visible; }
}
@media (min-width: 1024px) {
  .process-strip--n5 { grid-template-columns: repeat(5, 1fr); }
  .process-strip--n6 { grid-template-columns: repeat(3, 1fr); }
  .process-strip--n4 { grid-template-columns: repeat(4, 1fr); }
}

/* Tech-Strip */
.tech-strip__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.tech-strip__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.tech-strip { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tech-badge { display: inline-flex; align-items: center; gap: var(--s-2); background: var(--c-ink); color: var(--c-brand-yellow); border: 1.5px solid var(--c-ink); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); }
.tech-badge__icon { display: inline-flex; }
.tech-badge__label { font-size: 12px; letter-spacing: 0.1em; font-weight: 600; }

/* FAQ-Block */
.faq-block__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.faq-block__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.faq-block__list { display: flex; flex-direction: column; border-top: 1.5px solid var(--c-hairline); }
.faq-row { border-bottom: 1.5px solid var(--c-hairline); }
.faq-row__q { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.01em; cursor: pointer; list-style: none; color: var(--c-ink); }
.faq-row__q::-webkit-details-marker { display: none; }
.faq-row__q-num {
  flex-shrink: 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--c-ink-muted);
  width: 36px;
}
.faq-row__q-text { flex: 1; }
.faq-row__icon { width: 32px; height: 32px; border: 1.5px solid var(--c-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; transition: transform var(--dur-base) var(--ease-std); flex-shrink: 0; }
.faq-row[open] .faq-row__icon { transform: rotate(45deg); background: var(--c-ink); color: var(--c-brand-yellow); }
.faq-row__a { padding: 0 0 var(--s-5); max-width: 70ch; color: var(--c-ink-soft); }
.faq-row__a p { margin: 0 0 var(--s-3); line-height: 1.7; }
.faq-row__a p:last-child { margin-bottom: 0; }

/* Trust-Strip */
.trust-strip__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.trust-strip__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.trust-strip { display: grid; grid-template-columns: 1fr; gap: var(--s-3); border: 1.5px solid var(--c-hairline); background: var(--c-surface); }
@media (min-width: 768px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-card { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); border-right: 1.5px solid var(--c-hairline); }
.trust-card:last-child { border-right: 0; }
@media (max-width: 1023px) { .trust-card { border-right: 0; border-bottom: 1.5px solid var(--c-hairline); } .trust-card:last-child { border-bottom: 0; } }
.trust-card__value { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 4.5vw, 64px); letter-spacing: -0.025em; line-height: 0.98; color: var(--c-ink); }
.trust-card__label { color: var(--c-ink-soft); font-size: 15px; line-height: 1.55; }

/* Trust-strip on ink-themed section: yellow values, muted-yellow body. */
.section--ink .trust-strip {
  background: transparent;
  border-color: color-mix(in srgb, var(--c-brand-yellow) 22%, transparent);
}
.section--ink .trust-card {
  border-right-color: color-mix(in srgb, var(--c-brand-yellow) 18%, transparent);
}
@media (max-width: 1023px) {
  .section--ink .trust-card { border-right: 0; border-bottom-color: color-mix(in srgb, var(--c-brand-yellow) 18%, transparent); }
}
.section--ink .trust-card__value { color: var(--c-brand-yellow); }
.section--ink .trust-card__label { color: color-mix(in srgb, var(--c-brand-yellow) 70%, var(--c-surface)); }

/* Component overrides for ink-themed sections */
.section--ink .feature-grid__heading,
.section--ink .stats-row__heading,
.section--ink .process-strip__heading,
.section--ink .tech-strip__heading,
.section--ink .faq-block__heading,
.section--ink .trust-strip__heading,
.section--ink .industries-grid__heading { color: var(--c-brand-yellow); }
.section--ink .feature-grid__sub,
.section--ink .stats-row__sub,
.section--ink .process-strip__sub,
.section--ink .tech-strip__sub,
.section--ink .faq-block__sub,
.section--ink .trust-strip__sub,
.section--ink .industries-grid__sub { color: color-mix(in srgb, var(--c-brand-yellow) 78%, transparent); }

/* Industries-Grid */
.industries-grid__heading { margin: 0 0 var(--s-3); max-width: 24ch; }
.industries-grid__sub { color: var(--c-ink-soft); margin: 0 0 var(--s-7); max-width: 56ch; }
.industries-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 768px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }
.industry-tile { background: var(--c-surface); border: 1.5px solid var(--c-hairline); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); transition: transform var(--dur-base) var(--ease-std); position: relative; min-height: 220px; }
.industry-tile:hover { transform: translateY(-3px); background: var(--c-brand-yellow-bright); }
.industry-tile__icon { width: 48px; height: 48px; background: var(--c-ink); color: var(--c-brand-yellow); border: 1.5px solid var(--c-ink); display: flex; align-items: center; justify-content: center; }
.industry-tile__title { font-size: 24px; line-height: 1.2; margin: 0; color: var(--c-ink); }
.industry-tile__blurb { color: var(--c-ink-soft); margin: 0; font-size: 15px; line-height: 1.55; flex: 1; }
.industry-tile__cta { color: var(--c-ink); font-weight: 600; margin-top: auto; }

/* ============================================================
   PERFORMANCE DISPATCH AESTHETIC LAYER
   Editorial trading-floor publication dressing.
   ============================================================ */

/* --- Hero kicker line + cover headline ------------------------ */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.hero__kicker-rule {
  width: 36px;
  height: 1.5px;
  background: var(--c-ink);
}
.hero--home .hero__eyebrow {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  opacity: 0.85;
}
.hero--home .hero__headline {
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 19ch;
}
.hero--home .hero__sub {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  max-width: 50ch;
  color: var(--c-ink);
}
.hero__poster-foot .hero__mini-stat-value {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 30px);
}

/* --- Mono ticker strip ---------------------------------------- */
.section--interstitial { padding: 0; background: transparent; }
.ticker {
  background: var(--c-ledger, var(--c-ink));
  color: var(--c-brand-yellow);
  border-top: 1.5px solid var(--c-ink);
  border-bottom: 1.5px solid var(--c-ink);
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
}
.ticker::before, .ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(to right, var(--c-ledger), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  var(--c-ledger), transparent); }
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.ticker__bit {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 var(--s-4);
  color: var(--c-brand-yellow);
  white-space: nowrap;
}
.ticker__sep {
  font-family: var(--f-mono);
  font-size: 13px;
  color: color-mix(in srgb, var(--c-brand-yellow) 45%, transparent);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* ticker marquee keeps scrolling regardless of reduced-motion */

/* --- Editorial section eyebrow + headings --------------------- */
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--c-ink);
  color: var(--c-brand-yellow);
  padding: var(--s-1) var(--s-3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 var(--s-5);
  opacity: 1;
}
.section--ink .section__eyebrow {
  background: var(--c-brand-yellow);
  color: var(--c-ink);
  opacity: 1;
}
.section--yellow .section__eyebrow,
.section--yellow-bright .section__eyebrow {
  background: var(--c-ink);
  color: var(--c-brand-yellow);
}

/* Section heading reads as a magazine article opener. */
.stats-row__heading,
.feature-grid__heading,
.process-strip__heading,
.tech-strip__heading,
.faq-block__heading,
.trust-strip__heading,
.industries-grid__heading {
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 18ch;
  margin: 0 0 var(--s-4);
}
.stats-row__sub,
.feature-grid__sub,
.process-strip__sub,
.tech-strip__sub,
.faq-block__sub,
.trust-strip__sub,
.industries-grid__sub {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.55;
  text-transform: none;
  max-width: 60ch;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-7);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-ink);
}
.section--ink .stats-row__sub,
.section--ink .feature-grid__sub,
.section--ink .process-strip__sub,
.section--ink .tech-strip__sub,
.section--ink .faq-block__sub,
.section--ink .trust-strip__sub,
.section--ink .industries-grid__sub {
  border-left-color: var(--c-brand-yellow);
  color: color-mix(in srgb, var(--c-brand-yellow) 82%, transparent);
}

/* --- Stats row becomes the LEDGER ----------------------------- */
.ledger {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 140px;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1.5px solid var(--c-hairline);
}
.ledger--head {
  padding: var(--s-2) 0;
  border-top: 2px solid var(--c-ink);
  border-bottom: 1.5px solid var(--c-ink);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--c-ink-muted);
  align-items: center;
}
.ledger--body { display: block; padding: 0; border-bottom: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 140px;
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink) 20%, transparent);
  position: relative;
}
.ledger__row:last-child { border-bottom: 2px solid var(--c-ink); }
.ledger__col--idx {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-ink-muted);
}
.ledger__col--label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--c-ink);
  letter-spacing: 0.01em;
}
.ledger__col--value {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-transform: uppercase;
}
.ledger__col--delta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  text-align: right;
}
.ledger__note {
  grid-column: 2 / -1;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: var(--s-3) 0 0;
  max-width: 60ch;
}
@media (max-width: 767px) {
  .ledger--head { display: none; }
  .ledger__row {
    grid-template-columns: 50px 1fr;
    grid-template-areas:
      "idx label"
      ".   value"
      ".   delta"
      "note note";
    row-gap: var(--s-2);
  }
  .ledger__col--idx   { grid-area: idx; }
  .ledger__col--label { grid-area: label; }
  .ledger__col--value { grid-area: value; font-size: clamp(40px, 12vw, 64px); }
  .ledger__col--delta { grid-area: delta; text-align: left; }
  .ledger__note       { grid-area: note; margin: var(--s-2) 0 0; }
}

/* Bold stat blocks - flagship numbers showcase (replaces the ledger table). */
.bigstats { display: grid; grid-template-columns: 1fr; gap: var(--s-7); margin-top: var(--s-6); }
@media (min-width: 700px) {
  .bigstats--n3 { grid-template-columns: repeat(3, 1fr); }
  .bigstats--n4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .bigstats--n4 { grid-template-columns: repeat(4, 1fr); } }
.bigstat { display: flex; flex-direction: column; gap: var(--s-1); }
.bigstat__bar { width: 52px; height: 6px; border-radius: 3px; background: var(--c-brand-yellow); margin-bottom: var(--s-4); }
.bigstat__head { display: flex; align-items: center; justify-content: space-between; }
.bigstat__idx { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--c-ink-muted); }
.bigstat__delta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-muted); }
.bigstat__value { font-family: var(--f-display); font-weight: 800; font-size: clamp(54px, 7vw, 108px); line-height: 0.9; letter-spacing: -0.03em; color: var(--c-ink); margin-top: var(--s-2); }
.bigstat__label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: var(--s-2); }
.bigstat__note { font-size: 14px; line-height: 1.55; color: var(--c-ink-soft); margin: var(--s-3) 0 0; max-width: 40ch; }
.section--ink .bigstat__value { color: var(--c-brand-yellow); }
.section--ink .bigstat__label, .section--ink .bigstat__note { color: color-mix(in srgb, var(--c-surface) 72%, transparent); }

/* --- Scanline overlay for ink sections ------------------------ */
.section--ink {
  position: relative;
  isolation: isolate;
}
.section--ink > *:not(.section__index) { position: relative; z-index: 1; }
.section--ink::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    color-mix(in srgb, var(--c-brand-yellow) 4%, transparent) 3px 4px
  );
  z-index: 0;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .section--ink::after { display: none; }
}

/* --- FAQ as editorial Q&A column ------------------------------ */
.faq-block__list { display: flex; flex-direction: column; border-top: 2px solid var(--c-ink); border-bottom: 0; }
.faq-row {
  border-bottom: 1.5px solid var(--c-hairline);
  padding: var(--s-5) 0;
}
.faq-row__q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
  cursor: pointer;
  list-style: none;
  color: var(--c-ink);
  padding: 0;
}
.faq-row__q::-webkit-details-marker { display: none; }
.faq-row__qhead {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.faq-row__qtag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.faq-row__qtag::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--c-brand-yellow);
  border: 1.5px solid var(--c-ink);
  display: inline-block;
}
.faq-row__qtext {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.faq-row__icon {
  width: 36px; height: 36px;
  border: 1.5px solid var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.faq-row[open] .faq-row__icon {
  transform: rotate(45deg);
  background: var(--c-ink);
  color: var(--c-brand-yellow);
}
.faq-row__a { padding: var(--s-5) 0 0 0; max-width: 70ch; color: var(--c-ink-soft); }
.faq-row__a p { margin: 0 0 var(--s-3); line-height: 1.7; font-size: 17px; }
.faq-row__a p:last-child { margin-bottom: 0; }
.faq-row__a-lede::first-letter {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em 0 0;
  padding: 0.08em 0.16em;
  background: var(--c-brand-yellow);
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
  text-transform: uppercase;
}

/* Ink-themed FAQ overrides */
.section--ink .faq-block__list { border-top-color: var(--c-brand-yellow); }
.section--ink .faq-row { border-bottom-color: color-mix(in srgb, var(--c-brand-yellow) 20%, transparent); }
.section--ink .faq-row__qtag { color: color-mix(in srgb, var(--c-brand-yellow) 65%, transparent); }
.section--ink .faq-row__qtag::before { border-color: var(--c-brand-yellow); }
.section--ink .faq-row__qtext { color: var(--c-brand-yellow); }
.section--ink .faq-row__icon { border-color: var(--c-brand-yellow); color: var(--c-brand-yellow); }
.section--ink .faq-row[open] .faq-row__icon { background: var(--c-brand-yellow); color: var(--c-ink); }
.section--ink .faq-row__a { color: color-mix(in srgb, var(--c-brand-yellow) 80%, transparent); }

/* --- CTA strip sign-off --------------------------------------- */
.cta-strip--signoff {
  text-align: center;
}
.cta-strip__signoff-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-7) 24px;
}
.cta-strip__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.cta-strip__kicker-rule {
  width: 48px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}
.cta-strip__headline--quoted {
  max-width: 22ch;
  font-style: normal;
}
.cta-strip__attribution {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: var(--s-3) 0 0;
  color: var(--c-ink);
  opacity: 0.7;
}
.cta-strip__btn--signoff {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
  padding: var(--s-4) var(--s-7);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.cta-strip__btn--signoff:hover {
  background: var(--c-ink);
  color: var(--c-brand-yellow);
}
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-std);
}
.btn:hover .btn__arrow,
.cta-strip__btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Process strip overture dividers -------------------------- */
.process-strip {
  position: relative;
  border-top: 2px solid var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
  padding: var(--s-4) 0;
}
@media (min-width: 1024px) {
  .process-strip { gap: 0; }
  .process-strip--n5 .process-step + .process-step,
  .process-strip--n4 .process-step + .process-step,
  .process-strip--n6 .process-step + .process-step {
    border-left: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent);
  }
}
.process-step {
  background: transparent;
  border: 0;
  padding: var(--s-5) var(--s-5);
}
.process-step__num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-brand-yellow-deep);
  background: var(--c-ink);
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  margin-bottom: var(--s-3);
}
.process-step__name {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.process-step__detail {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0;
}
.process-step__bignum { display: none; }

/* --- Feature tile + industry tile typographic alignment ------- */
.feature-tile__title,
.industry-tile__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.trust-card__value {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Tighten ink-section feature tiles with a yellow rule top */
.section--ink .feature-tile { background: var(--c-ledger); }

/* --- Footer dispatch sign-off --------------------------------- */
.footer { background: var(--c-ledger); }
.footer__logo {
  font-family: var(--f-logo);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--c-surface);
}
.footer__col-title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brand-yellow);
  opacity: 0.6;
  margin: 0 0 var(--s-3);
}

/* --- Hero terminal: monospace value tightening ---------------- */
.hero__terminal-row { font-family: var(--f-mono); font-size: 14px; }
.hero__terminal-key, .hero__terminal-value { letter-spacing: 0.04em; }

/* --- Hero CTA buttons: dispatch styling ----------------------- */
.hero__ctas .btn {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
}
.hero__ctas .btn--ghost {
  border: 1.5px solid var(--c-ink);
  background: transparent;
}
.hero__ctas .btn--ghost:hover { background: var(--c-ink); color: var(--c-brand-yellow); }

/* --- Body baseline for Satoshi -------------------------------- */
body { font-family: var(--f-body); font-weight: 400; }
p { line-height: 1.65; }

/* --- Tighten the hero side index-marker for editorial feel ---- */
.section__index { font-size: 10px; opacity: 0.6; }

/* ============================================================
   SITE-WIDE LIVELINESS REVEALS
   Applied by js/enhance.js (adds .enhance-ready to <html> and .reveal to
   elements only when motion is allowed). Without that class - no JS, or
   reduced motion - nothing is hidden and the page renders fully visible.
   ============================================================ */
/* FAIL-SAFE INVERSION: content is visible by default and ANIMATES when the
   observer notices it (is-in). If IntersectionObserver never fires - any
   browser, any state - nothing is ever left hidden. The old pattern (hidden
   until observed) once left a CTA headline invisible in production. */
/* ONE gentle fade-up for everything - headings, tiles, numbers. Small movement
   (10px) + a soft ease so it reads as a calm reveal, never a flickery pop. No
   will-change: promoting dozens of elements to their own GPU layer caused more
   jank than it saved. The clip-path wipe on headings (which looked choppy) is
   gone - they use the same smooth fade. */
html.enhance-ready .reveal.is-in,
html.enhance-ready .reveal--clip.is-in {
  animation: reveal-rise 0.5s cubic-bezier(0.33, 1, 0.68, 1) both;
}
@keyframes reveal-rise { from { opacity: 0; transform: translateY(10px); } }
/* Hidden tabs freeze animations at frame 0 - elements observed while hidden
   skip the entrance entirely (enhance.js adds .no-anim) so nothing can ever
   sit invisible behind a paused animation. */
html.enhance-ready .reveal.no-anim { animation: none !important; }

/* scroll reveals animate even under reduced motion (owner preference) */

/* ============================================================
   HERO lead-network canvas (home ink pane) - js/fx.js leadNetwork()
   ============================================================ */
.hero__canvas-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.85; pointer-events: none; }
.hero__pane--ink > *:not(.hero__canvas-fx) { position: relative; z-index: 1; }

/* ============================================================
   INDIA LIVE-LEADS MAP (home component) - js/components/india-map.js
   Section is .section--ink (dark + scanline + yellow).
   ============================================================ */
.india-map__heading { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(40px, 5.5vw, 84px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 var(--s-4); color: var(--c-brand-yellow); max-width: 18ch; }
.india-map__sub { font-family: var(--f-mono); font-size: 13px; line-height: 1.6; max-width: 60ch; margin: 0 0 var(--s-7); padding-left: var(--s-4); border-left: 2px solid var(--c-brand-yellow); color: color-mix(in srgb, var(--c-brand-yellow) 80%, transparent); }
.india-map__layout { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
@media (min-width: 940px) { .india-map__layout { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.india-map__mapwrap { position: relative; }
.india-map__stage { position: relative; width: 100%; max-width: 430px; margin: 0 auto; aspect-ratio: 612 / 696; }
@media (min-width: 940px) { .india-map__stage { margin: 0; } }
.india-map__svg { width: 100%; height: auto; display: block; overflow: visible; }
.india-map__land { fill: color-mix(in srgb, var(--c-brand-yellow) 7%, transparent); stroke: color-mix(in srgb, var(--c-brand-yellow) 26%, transparent); stroke-width: 0.6; stroke-linejoin: round; }
.india-map__dot { fill: var(--c-brand-yellow); filter: drop-shadow(0 0 4px var(--c-brand-yellow)); }
.india-map__ping { fill: none; stroke: var(--c-brand-yellow); stroke-width: 1; transform-box: fill-box; transform-origin: center; opacity: 0; animation: india-ping 3.2s var(--ease-std) infinite; }
@keyframes india-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80% { opacity: 0; } 100% { transform: scale(4.2); opacity: 0; } }
.india-map__city.is-hot .india-map__dot { transform-box: fill-box; transform-origin: center; animation: india-hot 0.6s var(--ease-std); }
@keyframes india-hot { 0% { transform: scale(1); } 40% { transform: scale(1.9); } 100% { transform: scale(1); } }
.india-map__city.is-active .india-map__dot { fill: #fff; }

.india-map__side { display: flex; flex-direction: column; gap: var(--s-5); }
.india-map__total { display: flex; flex-direction: column; gap: var(--s-2); border-left: 2px solid color-mix(in srgb, var(--c-brand-yellow) 40%, transparent); padding-left: var(--s-4); }
.india-map__total-meta { display: inline-flex; align-items: center; gap: var(--s-2); }
.india-map__total-dot { width: 9px; height: 9px; border-radius: 50%; background: #7CFFB2; box-shadow: 0 0 0 0 rgba(124,255,178,0.6); animation: india-livedot 2s var(--ease-std) infinite; }
@keyframes india-livedot { 70% { box-shadow: 0 0 0 9px rgba(124,255,178,0); } 100% { box-shadow: 0 0 0 0 rgba(124,255,178,0); } }
.india-map__total-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--c-brand-yellow) 65%, transparent); }
.india-map__total-value { font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 5.5vw, 68px); letter-spacing: -0.02em; line-height: 1; color: var(--c-brand-yellow); font-variant-numeric: tabular-nums; }
.india-map__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1.5px solid color-mix(in srgb, var(--c-brand-yellow) 28%, transparent); }
.india-map__legrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-1); border-bottom: 1px solid color-mix(in srgb, var(--c-brand-yellow) 14%, transparent); transition: background var(--dur-fast) var(--ease-std); }
.india-map__legrow:hover, .india-map__legrow.is-active { background: color-mix(in srgb, var(--c-brand-yellow) 8%, transparent); }
.india-map__legdot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand-yellow); box-shadow: 0 0 6px var(--c-brand-yellow); }
.india-map__legname { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--c-brand-yellow) 85%, transparent); }
.india-map__legcount { font-family: var(--f-display); font-weight: 800; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.01em; color: var(--c-brand-yellow); font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-std); }
.india-map__legrow.is-hot .india-map__legcount { animation: india-legflash 0.6s var(--ease-std); }
@keyframes india-legflash { 0%,40% { color: #7CFFB2; } 100% { color: var(--c-brand-yellow); } }

/* india-map pings + live dots animate even under reduced motion */

/* ============================================================
   Theme switcher - floating accent-colour tester (bottom-left).
   Dark control so it stays legible on any accent. Colours come from
   tokens + numeric rgba only (no hex literals outside :root).
   ============================================================ */
.theme-switch { position: fixed; left: 20px; bottom: 20px; z-index: 95; font-family: var(--f-body); }
.theme-switch__toggle {
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: var(--c-ink); border: 2px solid rgba(255, 255, 255, 0.16);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.30);
  transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.theme-switch__toggle:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.40); }
.theme-switch__toggle:focus-visible { outline: 2px solid var(--c-surface); outline-offset: 2px; }
.theme-switch__icon { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 20px; height: 20px; }
.theme-switch__pip { display: block; width: 100%; height: 100%; border-radius: 50%; }

.theme-switch__panel {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  width: 236px; padding: 16px;
  background: var(--c-ink); color: var(--c-surface);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: bottom left;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std);
}
.theme-switch[data-open="true"] .theme-switch__panel { opacity: 1; transform: none; pointer-events: auto; }
.theme-switch__label { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 12px; }
.theme-switch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.theme-switch__swatch {
  aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.22);
  cursor: pointer; padding: 0;
  transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.theme-switch__swatch:hover { transform: scale(1.14); }
.theme-switch__swatch:focus-visible { outline: 2px solid var(--c-surface); outline-offset: 2px; }
.theme-switch__swatch.is-active { box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 4px rgba(255, 255, 255, 0.85); }
.theme-switch__name { display: block; margin-top: 14px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }

@media (max-width: 768px) {
  .theme-switch { left: 14px; bottom: 14px; }
  .theme-switch__toggle { width: 42px; height: 42px; }
}

/* ============================================================
   DESIGN SYSTEM V2 - editorial density + motion layer.
   Ghost numerals, halftone yellow sections, the dossier deep-dive,
   spec chips, offset-shadow hovers, button shimmer, reading progress,
   and the hero word-stagger. Tokens only - no raw hex outside :root.
   ============================================================ */

/* Tighter vertical rhythm: the furniture below fills the page, so sections
   no longer need outsized breathing room. Hero + interstitials keep their own
   zero-padding composition (their earlier rules must not be overridden here). */
.section:not(.section--hero):not(.section--interstitial) { padding: clamp(52px, 6.5vw, 76px) 0; }

/* Process deck: horizontal ledger rows. The old tall boxes left two lines of
   text rattling in 450px of black; now the giant numeral anchors the left
   rail and the content fills a dense row. */
@media (min-width: 900px) {
  .process-step {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: var(--s-7);
    align-items: center;
    min-height: 0;
    padding: var(--s-6) var(--s-7);
  }
  .process-step__bignum {
    display: block; /* a legacy rule hides it; the deck rail needs it back */
    position: static; top: auto; right: auto;
    grid-column: 1; grid-row: 1 / span 3;
    font-size: clamp(80px, 7vw, 128px);
    justify-self: center;
  }
  .process-step__num { grid-column: 2; }
  .process-step__name { grid-column: 2; font-size: clamp(24px, 2.2vw, 36px); margin: 0; }
  .process-step__detail { grid-column: 2; font-size: 16px; max-width: 78ch; }
}
.section--yellow .process-step__bignum, .section--yellow-bright .process-step__bignum {
  -webkit-text-stroke: 2px color-mix(in srgb, var(--c-brand-yellow) 60%, transparent);
}

/* Glove fit: heading-to-sub-to-content rhythm tightened so sections read as
   one composed unit instead of islands in whitespace. */
.stats-row__sub, .feature-grid__sub, .process-strip__sub, .tech-strip__sub,
.faq-block__sub, .trust-strip__sub, .industries-grid__sub {
  margin-bottom: var(--s-5);
}
.process-step { padding: var(--s-5); }
@media (min-width: 900px) { .process-step { min-height: 240px; } }
.trust-card { padding: var(--s-5); }
.dossier__grid { margin-top: var(--s-6); }
.dossier__specs { margin-top: var(--s-6); }

/* --- Ghost numerals: oversized outlined section numbers, top-right. ----- */
.section[data-ghost] { overflow: clip; }
.section[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute; top: -0.06em; right: -0.02em;
  font-family: var(--f-display); font-weight: 400; line-height: 1;
  font-size: clamp(120px, 21vw, 290px); letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-ink) 13%, transparent);
  pointer-events: none; z-index: 0;
}
.section--ink[data-ghost]::before { -webkit-text-stroke-color: color-mix(in srgb, var(--c-brand-yellow) 17%, transparent); }
.section--yellow[data-ghost]::before,
.section--yellow-bright[data-ghost]::before { -webkit-text-stroke-color: color-mix(in srgb, var(--c-ink) 15%, transparent); }
.section[data-ghost] > *:not(.section__index) { position: relative; z-index: 1; }

/* --- Halftone print texture on yellow sections (defined yellow blocks). -- */
.section--yellow::after,
.section--yellow-bright::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c-ink) 24%, transparent) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.16;
}
.section--yellow > *:not(.section__index),
.section--yellow-bright > *:not(.section__index) { position: relative; z-index: 1; }

/* --- Dossier: the deep-dive editorial section. Built for ink themes. ---- */
.dossier__heading {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 70px); line-height: 0.96; letter-spacing: -0.01em;
  max-width: 22ch; margin: var(--s-3) 0 0;
}
.dossier__lede {
  margin-top: var(--s-5); max-width: 62ch;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5; font-weight: 400;
  padding-left: var(--s-4); border-left: 3px solid var(--c-brand-yellow);
  color: color-mix(in srgb, var(--c-brand-yellow) 92%, transparent);
}
.section--ink .dossier__lede { color: color-mix(in srgb, var(--c-brand-yellow) 92%, transparent); }
.dossier__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 900px) { .dossier__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.dossier__col-title {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-family: var(--f-body); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px);
  color: var(--c-surface); margin: 0 0 var(--s-4);
  padding-top: var(--s-3); border-top: 1.5px solid color-mix(in srgb, var(--c-brand-yellow) 45%, transparent);
}
.dossier__col-marker { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--c-brand-yellow); }
.dossier__para { color: color-mix(in srgb, var(--c-surface) 72%, transparent); line-height: 1.65; margin: 0 0 var(--s-4); max-width: 58ch; }
.dossier__list { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); }
.dossier__list-item {
  position: relative; padding-left: 20px;
  color: color-mix(in srgb, var(--c-brand-yellow) 88%, transparent);
  font-size: 15px; line-height: 1.55;
}
.dossier__list-item::before {
  content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px;
  background: var(--c-brand-yellow);
}
.dossier__specs { margin-top: var(--s-8); border: 1.5px solid color-mix(in srgb, var(--c-brand-yellow) 55%, transparent); }
.dossier__specs-head {
  background: var(--c-brand-yellow); color: var(--c-ink);
  font-size: 10px; letter-spacing: 0.2em; padding: var(--s-2) var(--s-4);
}
.dossier__spec {
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr minmax(120px, auto);
  gap: var(--s-4); align-items: baseline; padding: var(--s-3) var(--s-4);
  border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 22%, transparent);
  transition: background var(--dur-fast) var(--ease-std);
}
.dossier__spec:first-of-type { border-top: 0; }
.dossier__spec:hover { background: color-mix(in srgb, var(--c-brand-yellow) 7%, transparent); }
.dossier__spec-k { font-size: 11px; letter-spacing: 0.12em; color: color-mix(in srgb, var(--c-brand-yellow) 75%, transparent); }
.dossier__spec-v { font-family: var(--f-display); font-weight: 400; font-size: clamp(18px, 2vw, 26px); letter-spacing: 0.01em; color: var(--c-brand-yellow); white-space: nowrap; }
.dossier__spec-note { font-size: 10px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--c-surface) 45%, transparent); text-align: right; }
.dossier__footnote { margin-top: var(--s-4); font-size: 10px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--c-surface) 42%, transparent); max-width: 70ch; }
@media (max-width: 640px) {
  .dossier__spec { grid-template-columns: 1fr auto; }
  .dossier__spec-note { grid-column: 1 / -1; text-align: left; }
}

/* --- Feature-tile spec chips + compact cross-link grid. ----------------- */
.feature-tile__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.feature-tile__spec {
  font-size: 9.5px; letter-spacing: 0.1em; padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--c-ink) 30%, transparent);
  background: color-mix(in srgb, var(--c-ink) 4%, transparent);
  color: color-mix(in srgb, var(--c-ink) 72%, transparent);
  white-space: nowrap;
}
.section--ink .feature-tile__spec {
  border-color: color-mix(in srgb, var(--c-brand-yellow) 35%, transparent);
  background: color-mix(in srgb, var(--c-brand-yellow) 7%, transparent);
  color: color-mix(in srgb, var(--c-brand-yellow) 80%, transparent);
}
.feature-grid--compact .feature-tile { padding: var(--s-5); }
.feature-grid--compact .feature-tile__title { font-size: 18px; }
.feature-grid--compact .feature-tile__body { font-size: 14px; }

/* --- Editorial hover physics: lift + hard offset shadow. ---------------- */
.feature-tile--link:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--c-ink);
  border-color: var(--c-ink);
}
.section--ink .feature-tile--link:hover { box-shadow: 7px 7px 0 var(--c-brand-yellow); border-color: var(--c-brand-yellow); }
.feature-tile--link { transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); }

/* --- Ticker: yellow variant for alternating bands. ---------------------- */
.ticker--yellow { background: var(--c-brand-yellow); border-top: 1.5px solid var(--c-hairline); border-bottom: 1.5px solid var(--c-hairline); }
.ticker--yellow .ticker__bit { color: var(--c-ink); }
.ticker--yellow .ticker__sep { color: color-mix(in srgb, var(--c-ink) 45%, transparent); }

/* --- Primary button shimmer sweep. -------------------------------------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg); pointer-events: none;
  transition: left 0.55s var(--ease-std);
}
.btn--primary:hover::after { left: 125%; }

/* --- Reading-progress bar (injected by enhance.js). ---------------------- */
#lsq-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: var(--c-ink); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* --- Hero headline word-stagger (spans injected by enhance.js). ---------- */
.hero__headline .hw {
  display: inline-block; opacity: 0; transform: translateY(0.55em);
  transition:
    opacity 0.55s var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.65s var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: calc(var(--hwi, 0) * 70ms);
}
.hero__headline.is-live .hw { opacity: 1; transform: none; }

/* ============================================================
   MISSION CONTROL V3 - dark-first futuristic re-skin.
   Void surfaces, glass chrome, phosphor glow, particle stat-morph
   hero, custom cursor, sticky-stack process, radar-swept map.
   Layered over the v1/v2 foundation; tokens only.
   ============================================================ */

/* --- Page ground: the void. ------------------------------------ */
body { background: var(--c-void); }

/* --- Nav: ink glass chrome. ------------------------------------- */
.nav {
  background: color-mix(in srgb, var(--c-void) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid color-mix(in srgb, var(--c-brand-yellow) 28%, transparent);
}
.nav__logo-text { color: var(--c-surface); }
.nav__logo-text .brandmark__q { color: var(--c-logo); }
.nav__link { color: var(--c-surface); }
.nav__link:hover { color: var(--c-brand-yellow); }
.nav__link--toggle[aria-expanded="true"]::before { background: var(--c-brand-yellow); }
.nav__hamburger-bar { background: var(--c-brand-yellow); }
.nav__panel {
  background: color-mix(in srgb, var(--c-void) 94%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-brand-yellow) 25%, transparent);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.6);
}
.nav__panel-link { color: var(--c-surface); }
.nav__panel-title { color: color-mix(in srgb, var(--c-brand-yellow) 70%, transparent); }
@media (max-width: 1023px) {
  /* The nav's backdrop-filter/transform makes it a containing block, which traps the
     position:fixed overlay so it can't fill the screen (it sized to the 72px bar and
     page content showed through). While the menu is open, drop both and make the bar
     solid so the overlay covers the full viewport. */
  .nav--mobile-open {
    background: var(--c-void);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
  }
  .nav--mobile-open .nav__list { background: var(--c-void); }
  .nav--mobile-open .nav__link { color: var(--c-surface); }
  .nav--mobile-open .nav__item { border-bottom-color: color-mix(in srgb, var(--c-brand-yellow) 22%, transparent); }
}
#lsq-progress { background: var(--c-brand-yellow); box-shadow: 0 0 12px color-mix(in srgb, var(--c-brand-yellow) 65%, transparent); }

/* --- Custom cursor (pointer:fine only; injected by enhance.js). -- */
html.has-cursor-fx, html.has-cursor-fx a, html.has-cursor-fx button { cursor: none; }
#lsq-cursor {
  position: fixed; top: 0; left: 0; width: 22px; height: 22px; z-index: 9999;
  border: 1.5px solid var(--c-brand-yellow); border-radius: 50%;
  opacity: 0.55;
  pointer-events: none; mix-blend-mode: difference;
  transition: scale var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std);
}
#lsq-cursor.is-hot { scale: 1.35; opacity: 0.9; }
#lsq-cursor-dot {
  position: fixed; top: 0; left: 0; width: 5px; height: 5px; z-index: 9999;
  background: var(--c-brand-yellow); border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px var(--c-brand-yellow);
}

/* --- Hero: the mission-control scene. ---------------------------- */
/* Reserve roughly a viewport of height while the page is still rendering (the
   body is built by JS), so the footer doesn't briefly sit under the nav and then
   jump down - the "footer first, then a flash" effect. Applies on every route. */
#page-root:empty { min-height: 88vh; min-block-size: 88svh; }

.hero--home { background: var(--c-void); position: relative; }
.hero--home::before {
  /* engineering grid */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--c-brand-yellow) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-brand-yellow) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero--home::after {
  /* vignette: focus the centre, melt the edges into the void */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 38%, transparent 55%, var(--c-void) 100%);
}
/* Ambient performance line-graph: above the grid, behind all the content. */
.hero__graph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero--home .hero__split { position: relative; z-index: 1; }
.hero--home .hero__split::after {
  /* slow scan sweep across the whole scene */
  content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 18%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-brand-yellow) 7%, transparent), transparent);
  animation: hero-scan 7s linear infinite; pointer-events: none;
}
@keyframes hero-scan { 0% { transform: translateY(0); } 100% { transform: translateY(700%); } }

.hero__pane--yellow { background: transparent; }
.hero__pane--yellow::before { display: none; }
.hero--home .hero__poster-tag { color: color-mix(in srgb, var(--c-brand-yellow) 80%, transparent); border-color: color-mix(in srgb, var(--c-brand-yellow) 35%, transparent); }
.hero--home .hero__eyebrow {
  color: var(--c-brand-yellow); opacity: 1;
}
.hero--home .hero__eyebrow::after {
  content: '_'; margin-left: 2px; animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.hero--home .hero__headline {
  color: var(--c-brand-yellow);
  text-shadow: 0 0 28px color-mix(in srgb, var(--c-brand-yellow) 28%, transparent);
}
.hero--home .hero__sub { color: color-mix(in srgb, var(--c-surface) 74%, transparent); }
.hero--home .hero__mini-stats { border-top-color: color-mix(in srgb, var(--c-brand-yellow) 25%, transparent); }
.hero--home .hero__mini-stat-value {
  color: var(--c-brand-yellow);
  text-shadow: 0 0 18px color-mix(in srgb, var(--c-brand-yellow) 45%, transparent);
}
.hero--home .hero__mini-stat-label { color: color-mix(in srgb, var(--c-surface) 52%, transparent); }
.section--hero .btn--primary { background: var(--c-brand-yellow); color: var(--c-ink); border-color: var(--c-brand-yellow); box-shadow: 0 0 28px color-mix(in srgb, var(--c-brand-yellow) 35%, transparent); }
.section--hero .btn--ghost { color: var(--c-brand-yellow); border-color: color-mix(in srgb, var(--c-brand-yellow) 55%, transparent); }
.section--hero .btn--ghost:hover { border-color: var(--c-brand-yellow); }

/* the ink pane becomes a glass instrument panel */
.hero__pane--ink { background: transparent; }
.hero__pane--ink::before { display: none; }
.hero__dash {
  background: color-mix(in srgb, var(--c-ledger) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 24%, transparent);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(0, 0, 0, 0.35);
  padding: var(--s-5);   /* keep content off the border + corner brackets (all sizes) */
}
/* corner brackets on the instrument panel */
.hero__dash { position: relative; }
.hero__dash::before, .hero__dash::after {
  content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none;
}
.hero__dash::before { top: -1px; left: -1px; border-top: 2px solid var(--c-brand-yellow); border-left: 2px solid var(--c-brand-yellow); }
.hero__dash::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--c-brand-yellow); border-right: 2px solid var(--c-brand-yellow); }

.hero__morph-wrap { position: relative; height: clamp(220px, 26vw, 330px); margin: var(--s-3) 0; }
.hero__morph { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__morph-label {
  position: absolute; bottom: -6px; left: 0; right: 0; text-align: center;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-surface) 42%, transparent);
}
/* JS-off fallback: a legible paper card so a no-JS visitor never meets a blank
   void. styles.css is render-blocking and loads regardless of JS, so these
   token-based rules always apply. */
.noscript-fallback {
  min-height: 100vh; background: var(--c-void); color: var(--c-surface);
  padding: var(--s-8) var(--s-4); line-height: 1.55;
}
.noscript-fallback h1 { color: var(--c-brand-yellow); margin: 0 0 var(--s-3); }
.noscript-fallback__title { font-weight: 600; }
.noscript-fallback a { color: var(--c-brand-yellow); }

/* Ledger Forge read-outs: a corner tally that ticks up to the exact figure,
   and a per-stat unit caption that hard-cuts in the instant the glyphs lock. */
.hero__morph-tally {
  position: absolute; top: 8px; right: 14px;
  font-size: 10px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-brand-yellow) 72%, transparent);
  pointer-events: none;
}
.hero__morph-unit {
  position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: 0.02em; min-height: 1em;
  color: color-mix(in srgb, var(--c-surface) 64%, transparent);
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* --- Phosphor-glow numbers (ink/void stat sections). -------------- */
.section--ink .bigstat__value, .section--ink .stat-tile__value {
  color: var(--c-brand-yellow);
  text-shadow: 0 0 16px color-mix(in srgb, var(--c-brand-yellow) 50%, transparent), 0 0 46px color-mix(in srgb, var(--c-brand-yellow) 22%, transparent);
}
.section--ink .bigstat__label { color: var(--c-surface); }
.section--ink .bigstat__note { color: color-mix(in srgb, var(--c-surface) 62%, transparent); }
.section--ink .bigstat__bar { box-shadow: 0 0 14px var(--c-brand-yellow); }
.section--ink .bigstat__idx, .section--ink .bigstat__delta { color: color-mix(in srgb, var(--c-brand-yellow) 75%, transparent); }
.section--ink .stats-row__heading { color: var(--c-brand-yellow); }
.section--ink .stats-row__sub { color: color-mix(in srgb, var(--c-surface) 70%, transparent); }

/* --- Sticky-stack process deck (desktop). ------------------------- */
@media (min-width: 900px) {
  .process-strip { display: block; overflow: visible; scroll-snap-type: none; }
  .process-step {
    position: sticky; min-height: 300px; margin-bottom: var(--s-5);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.18);
    /* OPAQUE card is load-bearing: the steps sticky-stack on top of each other,
       so each must fully cover the one behind or their text overlaps/garbles. */
    background: var(--c-surface); border: 1.5px solid var(--c-hairline);
    border-radius: 10px; padding: var(--s-6);
  }
  .process-step:nth-child(1) { top: 104px; }
  .process-step:nth-child(2) { top: 124px; }
  .process-step:nth-child(3) { top: 144px; }
  .process-step:nth-child(4) { top: 164px; }
  .process-step:nth-child(5) { top: 184px; }
}
/* ink deck cards on yellow sections - the defined yellow/black moment */
.section--yellow .process-step, .section--yellow-bright .process-step {
  background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface);
}
.section--yellow .process-step__name, .section--yellow-bright .process-step__name { color: var(--c-brand-yellow); }
.section--yellow .process-step__detail, .section--yellow-bright .process-step__detail { color: color-mix(in srgb, var(--c-surface) 72%, transparent); }
.section--yellow .process-step__num, .section--yellow-bright .process-step__num { color: color-mix(in srgb, var(--c-brand-yellow) 70%, transparent); }
.section--yellow .process-step__bignum, .section--yellow-bright .process-step__bignum {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-brand-yellow) 35%, transparent);
}

/* --- Radar scan over the live map. -------------------------------- */
.india-map__stage { position: relative; overflow: hidden; }
.india-map__stage::after {
  content: ''; position: absolute; left: 0; right: 0; top: -22%; height: 20%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-brand-yellow) 12%, transparent), transparent);
  animation: hero-scan 5.5s linear infinite; pointer-events: none;
}
.india-map__dot { filter: drop-shadow(0 0 6px var(--c-brand-yellow)) drop-shadow(0 0 14px color-mix(in srgb, var(--c-brand-yellow) 60%, transparent)); }
.india-map__total-value { text-shadow: 0 0 18px color-mix(in srgb, var(--c-brand-yellow) 45%, transparent); }

/* --- Instrument tiles: brackets + scan-line hover. ----------------- */
.section--ink .feature-tile, .section--ink .industry-tile {
  background: color-mix(in srgb, var(--c-ledger) 88%, transparent);
  border-color: color-mix(in srgb, var(--c-brand-yellow) 20%, transparent);
}
.section--ink .feature-tile { position: relative; }
.section--ink .feature-tile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--c-brand-yellow), var(--c-brand-yellow)) top left / 14px 2px,
    linear-gradient(var(--c-brand-yellow), var(--c-brand-yellow)) top left / 2px 14px,
    linear-gradient(var(--c-brand-yellow), var(--c-brand-yellow)) bottom right / 14px 2px,
    linear-gradient(var(--c-brand-yellow), var(--c-brand-yellow)) bottom right / 2px 14px;
  background-repeat: no-repeat;
  opacity: 0.5; transition: opacity var(--dur-fast) var(--ease-std);
}
.section--ink .feature-tile:hover::before { opacity: 1; }
.section--ink .feature-tile::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-brand-yellow), transparent);
  opacity: 0; pointer-events: none;
}
.section--ink .feature-tile:hover::after { opacity: 0.8; animation: tile-scan 1.6s var(--ease-std) infinite; }
@keyframes tile-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.8; } 100% { transform: translateY(280px); opacity: 0; } }
.tilt { will-change: transform; transition: transform 0.18s var(--ease-std); transform-style: preserve-3d; }

/* --- Ticker: signal glow. ------------------------------------------ */
.ticker__bit { text-shadow: 0 0 10px color-mix(in srgb, var(--c-brand-yellow) 55%, transparent); }
.ticker--yellow .ticker__bit { text-shadow: none; }

/* --- Dossier on void: brighter ledger contrast. --------------------- */
.section--ink .dossier__specs { background: color-mix(in srgb, var(--c-void) 55%, transparent); }
.dossier__spec-v { text-shadow: 0 0 14px color-mix(in srgb, var(--c-brand-yellow) 35%, transparent); }

/* --- Section seams: hairlines glow faintly on dark. ----------------- */
.section--ink + .section--ink { border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 14%, transparent); }

/* --- Axioms: five-law card grids (trust-strip with 5 children). ------- */
@media (min-width: 1024px) {
  .trust-strip:has(> .trust-card:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .trust-strip:has(> .trust-card:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
  .trust-strip:has(> .trust-card:nth-child(5)) .trust-card__value { font-size: clamp(28px, 2.3vw, 38px); }
}

/* --- Breadcrumbs: mono trail on inner pages (pairs with BreadcrumbList). */
.breadcrumbs { background: var(--c-void); border-bottom: 1px solid color-mix(in srgb, var(--c-brand-yellow) 14%, transparent); }
.breadcrumbs__inner {
  display: flex; align-items: center; gap: var(--s-2);
  padding-top: 10px; padding-bottom: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.breadcrumbs__inner::-webkit-scrollbar { display: none; }
.breadcrumbs__link { color: color-mix(in srgb, var(--c-brand-yellow) 75%, transparent); }
.breadcrumbs__link:hover { color: var(--c-brand-yellow); }
.breadcrumbs__here { color: color-mix(in srgb, var(--c-surface) 60%, transparent); }
.breadcrumbs__sep { color: color-mix(in srgb, var(--c-brand-yellow) 35%, transparent); }

/* --- Touch-native physics: press feedback where hover does not exist. -- */
@media (hover: none) {
  .feature-tile:active, .industry-tile:active, .trust-card:active, .btn:active {
    transform: scale(0.98);
    transition: transform 120ms var(--ease-std);
  }
  .process-step { min-height: 0; }
}

/* --- Command-center hero: the dash fills its full 50% pane. ------------ */
.hero__pane--ink { display: flex; flex-direction: column; }
/* tighter pane frame so the instrument panel commands the full half */
@media (min-width: 1280px) { .hero--home .hero__pane--ink { padding: var(--s-6) 48px; } }
@media (min-width: 768px) and (max-width: 1279px) { .hero--home .hero__pane--ink { padding: var(--s-6) 32px; } }
.hero__dash--full {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hero__dash--full .hero__morph-wrap { flex: 1.1 1 0; min-height: 150px; height: auto; margin: 0; }

/* Live-desk replay panel */
.hero__chatsim {
  /* Fixed height so the box never changes size as messages type in (the feed
     below scrolls/clips internally) - prevents the page nudging on each line. */
  flex: none; height: 200px;
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 18%, transparent);
  background: color-mix(in srgb, var(--c-void) 45%, transparent);
}
.hero__chatsim-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; font-size: 9px; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--c-surface) 48%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--c-brand-yellow) 14%, transparent);
}
.hero__chatsim-tag { color: var(--c-brand-yellow); }
.hero__chatsim-feed {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px; justify-content: flex-end;
  transition: opacity 0.4s var(--ease-std);
}
.hero__chatsim-feed.is-fading { opacity: 0; }
.chatsim__bubble {
  max-width: 86%; padding: 7px 11px;
  font-size: 13px; line-height: 1.45;
  border-radius: 3px;
  animation: chat-pop 0.28s var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1));
}
@keyframes chat-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.chatsim__bubble--v {
  align-self: flex-end;
  background: var(--c-brand-yellow); color: var(--c-ink); font-weight: 500;
}
.chatsim__bubble--a {
  align-self: flex-start;
  background: color-mix(in srgb, var(--c-ledger) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 26%, transparent);
  color: color-mix(in srgb, var(--c-surface) 88%, transparent);
}
.chatsim__bubble--s {
  align-self: center; text-align: center;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em;
  color: var(--c-brand-yellow);
  background: color-mix(in srgb, var(--c-brand-yellow) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-brand-yellow) 40%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-brand-yellow) 18%, transparent);
}
.chatsim__meta {
  display: block; margin-top: 5px;
  font-size: 8.5px; letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--c-brand-yellow) 70%, transparent);
}
.chatsim__bubble--dots { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.chatsim__bubble--dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-brand-yellow) 75%, transparent);
  animation: chat-dot 1s ease-in-out infinite;
}
.chatsim__bubble--dots i:nth-child(2) { animation-delay: 0.16s; }
.chatsim__bubble--dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes chat-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ============================================================
   CINEMA V4 - OS boot entrance, aurora depth, pointer parallax,
   and the wide-screen hero re-composition (massive type + floating HUD).
   ============================================================ */

/* --- Boot overlay. ----------------------------------------------------- */
#lsq-boot {
  position: fixed; inset: 0; z-index: 400;
  background: var(--c-void);
  display: grid; place-items: center;
  cursor: pointer;
}
#lsq-boot.is-done { animation: boot-wipe 0.6s var(--ease-enter, cubic-bezier(0.22, 1, 0.36, 1)) forwards; }
@keyframes boot-wipe { to { clip-path: inset(0 0 100% 0); } }
.lsq-boot__inner { display: grid; gap: 12px; padding: 0 24px; }
.lsq-boot__line {
  font-size: clamp(11px, 1.4vw, 14px); letter-spacing: 0.18em;
  color: var(--c-brand-yellow);
  opacity: 0; transform: translateY(6px);
  animation: boot-line 0.26s var(--ease-std) forwards;
  animation-delay: calc(var(--bi, 0) * 0.3s);
  text-shadow: 0 0 14px color-mix(in srgb, var(--c-brand-yellow) 45%, transparent);
}
.lsq-boot__line:nth-child(2) { color: color-mix(in srgb, var(--c-surface) 80%, transparent); text-shadow: none; }
.lsq-boot__line:nth-child(3) { color: color-mix(in srgb, var(--c-surface) 60%, transparent); text-shadow: none; }
.lsq-boot__line:last-child::after { content: ''; }
@keyframes boot-line { to { opacity: 1; transform: none; } }

/* --- Aurora glow fields (injected by enhance.js). ----------------------- */
.hero__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); mix-blend-mode: screen;
}
.hero__aurora-a {
  width: 52vw; height: 52vw; left: -14vw; top: -18vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-brand-yellow) 17%, transparent), transparent 65%);
  animation: aurora-a 21s ease-in-out infinite alternate;
  transform: translate(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -14px));
}
.hero__aurora-b {
  width: 44vw; height: 44vw; right: -12vw; bottom: -16vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-logo) 16%, transparent), transparent 65%);
  animation: aurora-b 26s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: translate(9vw, 7vw) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-8vw, -6vw) scale(1.2); } }

/* --- Pointer-parallax bindings. ----------------------------------------- */
.hero--home .hero__pane { position: relative; z-index: 1; }
.hero--home::before {
  transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -8px));
  transition: transform 0.25s var(--ease-std);
}
.hero--home .hero__headline {
  transform: translate(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px));
  transition: transform 0.3s var(--ease-std);
}
.hero--home .hero__dash {
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0);
  transition: transform 0.3s var(--ease-std);
}

/* --- Ghost-numeral scroll parallax (driven by enhance.js). --------------- */
.section[data-ghost]::before { transform: translateY(var(--ghosty, 0px)); will-change: transform; }

/* --- Wide-screen cinema: spanning type + floating HUD. ------------------- */
@media (min-width: 1100px) {
  .hero--home .hero__split { display: block; position: relative; }
  .hero--home .hero__pane--yellow {
    max-width: 59%;
    min-height: calc(100vh - 150px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero--home .hero__headline {
    font-size: clamp(54px, 5.4vw, 96px);
    max-width: 13ch; line-height: 0.95;
  }
  .hero--home .hero__sub { max-width: 46ch; font-size: 17px; }
  .hero--home .hero__pane--ink {
    position: absolute; top: 50%; right: 44px;
    transform: translateY(-50%);
    width: min(460px, 35vw);
    height: min(660px, calc(100% - 72px));
    padding: 0;
  }
}
/* Ultra-wide / 4K: compose, don't stretch. The scene caps at a designed
   width and height, centres itself, and every element scales up to match -
   so a 4K screen gets a bigger cinema, not a sparser one. */
@media (min-width: 1680px) {
  .hero--home .hero__split {
    max-width: 2080px; margin-inline: auto;
    min-height: min(calc(100vh - 150px), 1060px);
  }
  .hero--home .hero__pane--yellow {
    min-height: min(calc(100vh - 150px), 1060px);
    max-width: 56%;
  }
  .hero--home .hero__headline { font-size: clamp(96px, 6vw, 136px); max-width: 12ch; }
  .hero--home .hero__sub { font-size: 19px; max-width: 50ch; }
  .hero--home .hero__mini-stat-value { font-size: 42px; }
  .hero--home .hero__mini-stat-label { font-size: 12px; }
  .hero--home .hero__pane--ink {
    right: 64px;
    width: min(600px, 30vw);
    height: min(860px, calc(100% - 96px));
  }
  .hero--home::before { background-size: 72px 72px; }
  .hero--home .hero__eyebrow { font-size: 14px; }
}

/* The instrument card breathes through the particles, not through an empty
   chat well: the morph absorbs surplus height, the live desk stays compact. */
.hero__dash--full .hero__morph-wrap { flex: 2 1 0; }
.hero__chatsim { flex: none; height: 214px; }

/* ============================================================
   RESTRAINT EDIT - the creative-director pass. One idea at full
   volume (the signal instrument: hero morph + live desk + spine);
   everything else turns quiet, classy, monochrome. Yellow becomes
   the signal, not the paint.
   ============================================================ */

/* Retired effects: hero scan band, tile scan-line, yellow sheen drift. */
.hero--home .hero__split::after { display: none; }
.section--ink .feature-tile:hover::after { animation: none; opacity: 0; }
.section--yellow::after,
.section--yellow-bright::after {
  /* !important earns its keep here: this retires an effect defined later in
     the cascade (the sheen-drift block) without re-ordering the file. */
  background-image: radial-gradient(color-mix(in srgb, var(--c-ink) 22%, transparent) 1px, transparent 1.5px) !important;
  background-size: 16px 16px !important;
  background-position: 0 0 !important;
  animation: none !important;
  opacity: 0.13 !important;
}

/* Aurora: one dominant field, dim and slow - depth, not disco. */
.hero__aurora-a {
  background: radial-gradient(circle, color-mix(in srgb, var(--c-brand-yellow) 10%, transparent), transparent 65%);
  animation-duration: 34s;
}
.hero__aurora-b { opacity: 0.45; animation-duration: 40s; }

/* Pointer parallax halved: depth you sense, not motion you watch. */
.hero--home::before { transform: translate(calc(var(--mx, 0) * -5px), calc(var(--my, 0) * -4px)); }
.hero--home .hero__headline { transform: translate(calc(var(--mx, 0) * 3px), calc(var(--my, 0) * 2px)); }
.hero--home .hero__dash { transform: translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 4px), 0); }
.hero__aurora-a { transform: translate(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -7px)); }

/* Ghost numerals: a whisper, not a watermark shout. */
.section[data-ghost]::before { -webkit-text-stroke-color: color-mix(in srgb, var(--c-ink) 9%, transparent); }
.section--ink[data-ghost]::before { -webkit-text-stroke-color: color-mix(in srgb, var(--c-brand-yellow) 10%, transparent); }
.section--yellow[data-ghost]::before,
.section--yellow-bright[data-ghost]::before { -webkit-text-stroke-color: color-mix(in srgb, var(--c-ink) 10%, transparent); }

/* Typography hierarchy: ONE loud element per section, quiet elegance around
   it. Headings settle one notch down; ledes and subs go light. */
.stats-row__heading, .feature-grid__heading, .process-strip__heading,
.tech-strip__heading, .faq-block__heading, .trust-strip__heading,
.industries-grid__heading, .india-map__heading {
  font-size: clamp(30px, 3.6vw, 54px);
}
.dossier__heading { font-size: clamp(30px, 3.8vw, 58px); }
.stats-row__sub, .feature-grid__sub, .process-strip__sub, .tech-strip__sub,
.faq-block__sub, .trust-strip__sub, .industries-grid__sub, .india-map__sub {
  font-weight: 400; font-size: 17px; line-height: 1.65;
}
.dossier__lede { font-weight: 400; }
.hero__sub { font-weight: 400; }

/* Yellow as signal: long-form dossier lists read in quiet white; the yellow
   stays in the markers, values and rules where it means something. */
.dossier__list-item { color: color-mix(in srgb, var(--c-surface) 76%, transparent); }

/* --- The signal spine: one beam down the left margin, a node tracking
   reading depth. Desktop's instrument needle; mobile keeps the top bar. --- */
.lsq-spine {
  position: fixed; left: 14px; top: 0; bottom: 0; width: 1.5px; z-index: 90;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--c-brand-yellow) 22%, transparent) 12%,
    color-mix(in srgb, var(--c-brand-yellow) 22%, transparent) 88%,
    transparent 100%);
  pointer-events: none;
  display: none;
}
.lsq-spine__node {
  position: absolute; left: 50%; top: 6%;
  width: 7px; height: 7px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--c-brand-yellow);
  box-shadow: 0 0 10px var(--c-brand-yellow), 0 0 26px color-mix(in srgb, var(--c-brand-yellow) 55%, transparent);
  transition: top 0.18s linear;
}
@media (min-width: 1280px) {
  .lsq-spine { display: block; }
  #lsq-progress { display: none; }
}

/* --- Mobile guards. -------------------------------------------------- */
@media (max-width: 768px) {
  .hero--home::before { background-size: 38px 38px; }
  .hero__morph-wrap { height: 200px; }
  .hero__dash--full .hero__morph-wrap { min-height: 150px; }
  .hero__chatsim { flex: none; height: 184px; }
  .chatsim__bubble { max-width: 94%; font-size: 12.5px; }
  .hero__aurora i { filter: blur(60px); }
  #lsq-cursor, #lsq-cursor-dot { display: none; }
}

/* ============================================================
   POLISH V6 - CTA compression, living yellow, footer type system.
   ============================================================ */

/* CTA strips: the signoff was renting a whole viewport for five lines.
   Tighter scale, tighter rhythm, no dead bands. */
.cta-strip__headline { font-size: clamp(38px, 4.4vw, 72px); line-height: 0.96; max-width: 24ch; }
.cta-strip__signoff-inner { gap: var(--s-4); padding: var(--s-5) 24px; }
.section--yellow .cta-strip { padding: 0; }
.section:has(> .cta-strip) { padding: clamp(48px, 6.5vw, 72px) 0; }

/* Living yellow: the halftone drifts and a light sheen sweeps through, so
   flat yellow fields read as material, not paint. */
.section--yellow::after,
.section--yellow-bright::after {
  background-image:
    radial-gradient(color-mix(in srgb, var(--c-ink) 24%, transparent) 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.5) 50%, transparent 56%);
  background-size: 16px 16px, 300% 300%;
  background-position: 0 0, 130% 0;
  opacity: 0.22;
  animation: yellow-drift 80s linear infinite;
}
@keyframes yellow-drift {
  0% { background-position: 0 0, 130% 0; }
  50% { background-position: 160px 80px, -30% 0; }
  100% { background-position: 320px 160px, 130% 0; }
}

/* Footer: dispatch type system instead of default body text. */
.footer { border-top: 1px solid color-mix(in srgb, var(--c-brand-yellow) 28%, transparent); padding-top: var(--s-8); }
.footer__logo { font-size: clamp(40px, 4.2vw, 60px); }
.footer__tagline {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--c-brand-yellow) 78%, transparent);
  max-width: 30ch; line-height: 1.7;
}
.footer__contact { color: var(--c-brand-yellow); font-size: 13px; letter-spacing: 0.06em; }
.footer__col-title {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-brand-yellow) 55%, transparent);
  opacity: 1; margin-bottom: var(--s-4);
}
.footer__col-list { gap: var(--s-3); }
.footer__link {
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  color: color-mix(in srgb, var(--c-surface) 80%, transparent);
  opacity: 1; transition: color var(--dur-fast) var(--ease-std), padding-left var(--dur-fast) var(--ease-std);
}
.footer__link:hover { color: var(--c-brand-yellow); padding-left: 4px; }

/* Brand platform glyphs sit slightly larger in tech badges. */
.tech-badge .icon--brand { transform: scale(1.08); }

/* Phone type fit: inner-page heroes were bottoming at 64px (too big for a
   360px screen) and the home hero at 30px (too timid). Both land ~36-44px. */
@media (max-width: 520px) {
  .hero__headline { font-size: clamp(34px, 10vw, 44px); line-height: 1.02; }
  .hero--home .hero__headline { font-size: clamp(36px, 10.5vw, 46px); max-width: 100%; }
}

/* ============================================================
   INNER-PAGE HEROES, MISSION CONTROL - the dark-first flip left
   service/industry/city heroes (and about/contact, which reuse the
   service variant) with ink-on-void text and 168px display type that
   stacked one word per line. Same scene language as home: void ground,
   engineering grid, vignette, phosphor type at a sane cinematic scale.
   ============================================================ */
.hero--service, .hero--industry, .hero--city { background: var(--c-void); position: relative; }
.hero--service::before, .hero--industry::before, .hero--city::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--c-brand-yellow) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-brand-yellow) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero--service::after, .hero--industry::after, .hero--city::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 45% 40%, transparent 55%, var(--c-void) 100%);
}
.hero--service .hero__grid, .hero--industry .hero__grid, .hero--city .hero__grid {
  position: relative; z-index: 1; align-items: center;
}

/* Type: visible, glowing, and scaled so lines breathe instead of stacking
   one word at a time. */
.hero--service .hero__headline, .hero--industry .hero__headline, .hero--city .hero__headline {
  color: var(--c-brand-yellow);
  text-shadow: 0 0 26px color-mix(in srgb, var(--c-brand-yellow) 26%, transparent);
  font-size: clamp(40px, 4.6vw, 86px);
  line-height: 0.97; max-width: 16ch;
}
.hero--service .hero__eyebrow, .hero--industry .hero__eyebrow, .hero--city .hero__eyebrow {
  color: var(--c-brand-yellow); opacity: 1;
  font-family: var(--f-mono); letter-spacing: 0.18em;
}
.hero--service .hero__eyebrow::after, .hero--industry .hero__eyebrow::after, .hero--city .hero__eyebrow::after {
  content: '_'; margin-left: 2px; animation: caret-blink 1.1s steps(1) infinite;
}
.hero--service .hero__sub, .hero--industry .hero__sub, .hero--city .hero__sub {
  color: color-mix(in srgb, var(--c-surface) 76%, transparent);
  max-width: 54ch;
}
.hero--service .hero__mini-stats, .hero--industry .hero__mini-stats, .hero--city .hero__mini-stats {
  border-top-color: color-mix(in srgb, var(--c-brand-yellow) 25%, transparent);
}
.hero--service .hero__mini-stat-value, .hero--industry .hero__mini-stat-value, .hero--city .hero__mini-stat-value {
  color: var(--c-brand-yellow);
  text-shadow: 0 0 16px color-mix(in srgb, var(--c-brand-yellow) 40%, transparent);
}
.hero--service .hero__mini-stat-label, .hero--industry .hero__mini-stat-label, .hero--city .hero__mini-stat-label {
  color: color-mix(in srgb, var(--c-surface) 55%, transparent);
}

/* ============================================================
   MOBILE POLISH + ANTI-FLICKER  (<= 1023px, i.e. touch devices)
   Scroll-reveal entrances, backdrop-filter blur, and scroll/mouse parallax
   transforms all repaint during touch-scroll and read as flicker / a broken
   page on phones. On touch widths we drop them: content is simply visible,
   the chrome is solid, and nothing animates while the page scrolls.
   ============================================================ */
@media (max-width: 1023px) {
  /* 1) No scroll-reveal entrance animations - they trigger as you scroll and
        flicker. Content stays fully visible (also the fail-safe state). */
  html.enhance-ready .reveal,
  html.enhance-ready .reveal.is-in,
  html.enhance-ready .reveal--clip.is-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto !important;
  }
  /* 2) backdrop-filter blur repaints every scroll frame on mobile GPUs - the
        single biggest cause of scroll jank. Make the chrome solid instead. */
  .nav {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--c-void) 96%, transparent);
  }
  .nav__panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--c-void); }
  .hero__dash { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* 3) Kill scroll-driven parallax + mouse-tilt transforms (no pointer on touch
        anyway) so nothing shifts/repaints under the finger. */
  .section[data-ghost]::before { transform: none !important; }
  .hero--home .hero__headline,
  .hero--home .hero__dash { transform: none !important; }
  /* 4) Breathing room so dashboard text never touches the panel brackets. */
  .hero--home .hero__dash { padding: var(--s-4); }
  .hero__morph-tally { top: 10px; right: 16px; }

  /* 5) Kill the hero aurora - a large blurred, screen-blended, continuously
        animated layer; the heaviest paint on the page. The hero grid + vignette
        (hero--home ::before/::after) keep depth, so nothing is stranded. */
  .hero__aurora { display: none; }
  /* 6) Drop GPU-layer promotion of the huge ghost numerals (their transform is
        already zeroed above; the will-change hint just wastes compositor memory). */
  .section[data-ghost]::before { will-change: auto !important; }
  /* 7) Throttle + cap the india-map pings (was 10 simultaneous expanding-stroke
        composites) down to ~4 slower ones. */
  .india-map__ping { animation-duration: 5s; }
  .india-map__ping:nth-of-type(n+5) { animation: none; }
  /* 8) Reserve hero height before JS mounts so the page never heaves down on
        first paint (the biggest CLS jump). svh avoids mobile URL-bar inflation. */
  #page-root:empty { min-block-size: 88svh; }
  /* 9) Backstop: nothing can ever produce sideways scroll. clip (not hidden) so
        it does not create a scroll container that would break the sticky nav. */
  html, body { overflow-x: clip; }
  /* 10) Freeze decorative moving layers. The yellow-pane sheen animates
         background-position (a full repaint every frame over a large area); the
         scan sweeps are cosmetic. All cosmetic - the page is calmer without them. */
  .hero--home .hero__split::after,
  .india-map__stage::after,
  .section--yellow::after,
  .section--yellow-bright::after { animation: none !important; }
}