:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2.2rem, 1.4rem + 4vw, 6rem);
  --text-hero: clamp(3.75rem, 1.2rem + 10vw, 12.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --font-display: "Cabinet Grotesk", "Arial", sans-serif;
  --font-body: "Satoshi", "Arial", sans-serif;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 2rem;
  --radius-3xl: 3rem;
  --radius-full: 9999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: var(--transition);
  --page-gutter: clamp(var(--space-6), 5vw, var(--space-16));
}

/* Cold-luxury palette - Feadship-inspired cold-chain dossier.
   Deep navy-black surfaces, steel-blue primary, porcelain text,
   restrained copper used only as <5% editorial accent. */
:root,
[data-theme="light"] {
  --color-bg: #0A1018;
  --color-surface: #10182A;
  --color-surface-2: #172238;
  --color-surface-3: #1F2C45;
  --color-text: #E8EEF5;
  --color-muted: #8AA0B8;
  --color-faint: #5A6B82;
  --color-inverse: #0A1018;
  --color-primary: #7FA9C9;          /* steel-blue cold-chain accent */
  --color-primary-strong: #A8C5DD;
  --color-gold: #B98A4A;             /* aged copper, used at <5% */
  --color-hero: #06090F;
  --color-line: rgba(232, 238, 245, 0.10);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.40);
  /* Bone/porcelain alpha overlays - used in many places to replace the
     legacy rgba(255, 244, 229, x) ivory tints. */
  --bone-04: rgba(232, 238, 245, 0.04);
  --bone-06: rgba(232, 238, 245, 0.06);
  --bone-08: rgba(232, 238, 245, 0.08);
  --bone-10: rgba(232, 238, 245, 0.10);
  --bone-14: rgba(232, 238, 245, 0.14);
  --bone-18: rgba(232, 238, 245, 0.18);
  --bone-30: rgba(232, 238, 245, 0.30);
  --bone-60: rgba(232, 238, 245, 0.60);
  --bone-78: rgba(232, 238, 245, 0.78);
  --bone-90: rgba(232, 238, 245, 0.90);
}

[data-theme="dark"] {
  --color-bg: #0A1018;
  --color-surface: #10182A;
  --color-surface-2: #172238;
  --color-surface-3: #1F2C45;
  --color-text: #E8EEF5;
  --color-muted: #8AA0B8;
  --color-faint: #5A6B82;
  --color-inverse: #0A1018;
  --color-primary: #7FA9C9;
  --color-primary-strong: #A8C5DD;
  --color-gold: #B98A4A;
  --color-hero: #06090F;
  --color-line: rgba(232, 238, 245, 0.10);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.45);
  --bone-04: rgba(232, 238, 245, 0.04);
  --bone-06: rgba(232, 238, 245, 0.06);
  --bone-08: rgba(232, 238, 245, 0.08);
  --bone-10: rgba(232, 238, 245, 0.10);
  --bone-14: rgba(232, 238, 245, 0.14);
  --bone-18: rgba(232, 238, 245, 0.18);
  --bone-30: rgba(232, 238, 245, 0.30);
  --bone-60: rgba(232, 238, 245, 0.60);
  --bone-78: rgba(232, 238, 245, 0.78);
  --bone-90: rgba(232, 238, 245, 0.90);
}

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

html {
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 116px;
  overflow-x: clip;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background:
    radial-gradient(circle at var(--stage-x, 50%) var(--stage-y, 14%), color-mix(in srgb, var(--stage-glow, var(--color-primary)) 12%, transparent), transparent 32rem),
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 36rem),
    var(--color-bg);
  overflow-x: clip;
  transition: background 700ms var(--ease-in-out);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 38%, color-mix(in srgb, var(--chapter-tint, var(--color-gold)) 10%, transparent) 39% 40%, transparent 41%),
    radial-gradient(ellipse at calc(var(--stage-x, 50%) + 6%) calc(var(--stage-y, 24%) + 8%), color-mix(in srgb, var(--chapter-tint, var(--color-gold)) 12%, transparent), transparent 24rem);
  opacity: 0.48;
  transform: translate3d(0, calc(var(--world-drift, 0) * -18px), -1px);
  transition:
    opacity 700ms var(--ease-in-out),
    background 700ms var(--ease-in-out);
}

/* Cold-chain stage glows: every chapter glows with steel-blue
   (the cold-chain accent) at varying positions. Copper is reserved
   for hairline editorial accents only. */
body[data-stage="network"] {
  --stage-x: 72%;
  --stage-y: 24%;
  --stage-glow: var(--color-primary);
}

body[data-stage="services"] {
  --stage-x: 22%;
  --stage-y: 36%;
  --stage-glow: var(--color-primary);
}

body[data-stage="process"] {
  --stage-x: 82%;
  --stage-y: 42%;
  --stage-glow: var(--color-primary-strong);
}

body[data-stage="quality"] {
  --stage-x: 50%;
  --stage-y: 28%;
  --stage-glow: var(--color-primary);
}

body[data-stage="partners"] {
  --stage-x: 30%;
  --stage-y: 38%;
  --stage-glow: var(--color-primary);
}

body[data-stage="tools"],
body[data-stage="industries"] {
  --stage-x: 18%;
  --stage-y: 62%;
  --stage-glow: var(--color-primary);
}

body[data-stage="faq"] {
  --stage-x: 78%;
  --stage-y: 50%;
  --stage-glow: var(--color-primary-strong);
}

body[data-stage="contact"] {
  --stage-x: 22%;
  --stage-y: 64%;
  --stage-glow: var(--color-primary);
}

body[data-stage="quote"] {
  --stage-x: 50%;
  --stage-y: 76%;
  --stage-glow: var(--color-primary);
}

body.drawer-open {
  overflow: hidden;
}

.ambient-cursor {
  --cursor-x: 50vw;
  --cursor-y: 40vh;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 18rem),
    radial-gradient(circle at calc(var(--cursor-x) + 11rem) calc(var(--cursor-y) + 6rem), color-mix(in srgb, var(--color-primary-strong) 8%, transparent), transparent 23rem);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.experience-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  overflow: clip;
  contain: layout paint;
  pointer-events: none;
}

.experience-atmosphere span {
  position: absolute;
  width: min(42vw, 620px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--stage-glow, var(--color-gold)) 18%, transparent);
  border-radius: 50%;
  opacity: 0.2;
  transition:
    transform 900ms var(--ease-in-out),
    opacity 700ms var(--ease-in-out),
    border-color 700ms var(--ease-in-out);
}

.experience-atmosphere span:nth-child(1) {
  top: 12vh;
  left: 0;
  transform: translateX(-32%);
}

.experience-atmosphere span:nth-child(2) {
  right: 0;
  top: 38vh;
  width: min(54vw, 820px);
  transform: translateX(32%);
}

.experience-atmosphere span:nth-child(3) {
  left: 38vw;
  bottom: -28vw;
  width: min(48vw, 760px);
}

body[data-stage="network"] .experience-atmosphere span:nth-child(1) { transform: translate3d(-18%, 6vh, 0) scale(0.86); }
body[data-stage="network"] .experience-atmosphere span:nth-child(2) { transform: translate3d(18%, -4vh, 0) scale(1.12); }
body[data-stage="services"] .experience-atmosphere span:nth-child(1) { transform: translate3d(12%, 16vh, 0) scale(1.04); }
body[data-stage="services"] .experience-atmosphere span:nth-child(2) { transform: translate3d(12%, 8vh, 0) scale(0.92); }
body[data-stage="process"] .experience-atmosphere span:nth-child(1) { transform: translate3d(-28%, 34vh, 0) scale(0.72); }
body[data-stage="process"] .experience-atmosphere span:nth-child(2) { transform: translate3d(-6%, -12vh, 0) scale(1.18); }
body[data-stage="quality"] .experience-atmosphere span:nth-child(3) { transform: translate3d(-18vw, -22vh, 0) scale(0.8); }
body[data-stage="quote"] .experience-atmosphere span { opacity: 0.34; }

.experience-rail {
  position: fixed;
  right: var(--space-5);
  top: 50%;
  z-index: 90;
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: var(--space-2);
  transform: translateY(-50%);
  pointer-events: none;
}

.experience-rail-track {
  position: relative;
  width: 2px;
  height: min(58vh, 440px);
  align-self: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text) 13%, transparent);
  overflow: hidden;
}

.experience-rail-track span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleY(var(--experience-progress, 0.04));
  transform-origin: top;
  border-radius: inherit;
  background: linear-gradient(var(--color-gold), var(--color-primary));
}

.experience-rail nav {
  display: grid;
  gap: var(--space-1);
}

.experience-rail button {
  pointer-events: auto;
  min-height: 28px;
  display: grid;
  grid-template-columns: 10px;
  align-items: center;
  justify-items: center;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-full);
  color: color-mix(in srgb, var(--color-muted) 80%, transparent);
  text-align: left;
  opacity: 0.42;
  transition:
    opacity var(--transition),
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.experience-rail button span {
  display: grid;
  place-items: center;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 16%, transparent);
  font-size: 0;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.experience-rail button strong {
  position: absolute;
  right: calc(100% + var(--space-3));
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: max-width 360ms var(--ease-out);
}

.experience-rail button:hover,
.experience-rail button.active {
  opacity: 1;
  color: var(--color-text);
  background: transparent;
  transform: none;
}

.experience-rail button:hover span,
.experience-rail button.active span {
  border-color: var(--color-gold);
  background: var(--color-gold);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-gold) 18%, transparent);
}

.experience-rail button:hover strong,
.experience-rail button.active strong {
  max-width: 140px;
  opacity: 1;
}

[data-theme="light"] .ambient-cursor {
  opacity: 0.45;
  mix-blend-mode: multiply;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  color: inherit;
}

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

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

p {
  color: var(--color-muted);
  max-width: 72ch;
}

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

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--color-gold);
  color: #0A1018;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
}

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-6);
  row-gap: var(--space-2);
  padding: 0 clamp(var(--space-4), 4vw, var(--space-10)) var(--space-3);
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: none;
  color: #E8EEF5;
  transition:
    background 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    backdrop-filter 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    padding 320ms var(--ease-out);
}

.header-ticker {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-inline: calc(clamp(var(--space-4), 4vw, var(--space-10)) * -1);
  padding: 0 clamp(var(--space-4), 4vw, var(--space-10));
  border-bottom: 1px solid rgba(232, 238, 245, 0.1);
  background:
    linear-gradient(90deg, rgba(6, 9, 15, 0.9), rgba(14, 29, 44, 0.86) 45%, rgba(6, 9, 15, 0.9));
  color: rgba(232, 238, 245, 0.78);
}

.ticker-static,
.ticker-rotator {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker-static {
  gap: var(--space-3);
  flex: 0 0 auto;
}

.ticker-static a {
  color: #E8EEF5;
  text-decoration: none;
}

.ticker-static a:hover {
  color: var(--color-primary-strong);
}

.ticker-static span {
  color: rgba(232, 238, 245, 0.68);
}

.ticker-static i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary-strong) 78%, #E8EEF5 22%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary-strong) 55%, transparent);
}

.ticker-rotator {
  position: relative;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 16rem;
  min-height: 1em;
  overflow: hidden;
  color: rgba(232, 238, 245, 0.82);
  text-align: right;
}

.ticker-rotator span {
  position: absolute;
  right: 0;
  max-width: 100%;
  opacity: 0;
  transform: translateY(0.45rem);
  animation: utilityRotate 20s var(--ease-in-out) infinite;
}

.ticker-rotator span:nth-child(2) { animation-delay: 5s; }
.ticker-rotator span:nth-child(3) { animation-delay: 10s; }
.ticker-rotator span:nth-child(4) { animation-delay: 15s; }

.ticker-rotator span:first-child {
  opacity: 1;
  transform: translateY(0);
}

@keyframes utilityRotate {
  0%, 18% {
    opacity: 1;
    transform: translateY(0);
  }
  24%, 94% {
    opacity: 0;
    transform: translateY(-0.45rem);
  }
  95%, 100% {
    opacity: 0;
    transform: translateY(0.45rem);
  }
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.62), rgba(6, 9, 15, 0));
  opacity: 1;
  transition: opacity 320ms var(--ease-out);
}

.site-header[data-elevated="true"] {
  padding-top: 0;
  padding-bottom: var(--space-2);
  background:
    linear-gradient(180deg, rgba(6, 9, 15, 0.92) 0%, rgba(10, 16, 24, 0.86) 100%);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border-bottom-color: rgba(232, 238, 245, 0.12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.site-header[data-elevated="true"]::before {
  opacity: 0;
}

[data-theme="light"] .site-header::before {
  background: linear-gradient(180deg, rgba(232, 238, 245, 0.7), rgba(232, 238, 245, 0));
}

[data-theme="light"] .site-header[data-elevated="true"] {
  background: linear-gradient(180deg, rgba(232, 238, 245, 0.94) 0%, rgba(232, 238, 245, 0.88) 100%);
  border-bottom-color: rgba(232, 238, 245, 0.14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  color: var(--color-text);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: start;
  width: max-content;
  min-height: 44px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.03em;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: clamp(174px, 15vw, 228px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.24))
    saturate(0.95)
    contrast(1.02);
}

.brand-logo-icon {
  width: clamp(44px, 3.5vw, 52px);
  aspect-ratio: 1;
}

.brand-mark {
  width: 42px;
  height: 42px;
  color: var(--color-gold);
}

.brand-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
}

.brand-plate {
  width: clamp(128px, 13vw, 172px);
  height: auto;
  color: #E8EEF5;
}

.brand-plate-frame {
  stroke: color-mix(in srgb, var(--color-primary-strong) 82%, #E8EEF5 18%);
}

.brand-plate-frame path {
  fill: none;
  stroke-width: 1.2;
  opacity: 0.78;
}

.brand-plate-frame rect:first-of-type {
  stroke-width: 1.8;
}

.brand-plate-frame rect:last-of-type {
  stroke-width: 0.8;
  opacity: 0.42;
}

.brand-plate-word {
  fill: currentColor;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.13em;
}

.brand-plate-word text {
  font-size: 24px;
}

.brand-plate-accent {
  stroke: var(--color-accent);
  stroke-width: 1;
  opacity: 0.85;
}

.brand-plate-gems {
  fill: var(--color-accent);
}

.brand-plate-gems path {
  fill: var(--color-accent);
  stroke: none;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.4vw, var(--space-6));
  padding: 0 var(--space-3);
  border-left: 1px solid rgba(232, 238, 245, 0.1);
  border-right: 1px solid rgba(232, 238, 245, 0.1);
}

.desktop-nav button,
.desktop-nav a,
.ghost-control,
.quote-pill,
.primary-cta,
.secondary-cta {
  min-height: 44px;
  border-radius: var(--radius-full);
  transition:
    transform var(--transition),
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.desktop-nav button {
  position: relative;
  padding: 0;
  color: rgba(232, 238, 245, 0.7);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: rgba(232, 238, 245, 0.7);
  font-size: var(--text-sm);
  text-decoration: none;
}

.desktop-nav button::after,
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--color-gold);
  opacity: 0.9;
  transition: transform 260ms var(--ease-out);
}

.desktop-nav button:hover,
.desktop-nav a:hover {
  color: #E8EEF5;
  background: transparent;
}

.desktop-nav button:hover::after,
.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.ghost-control {
  width: 44px;
  border: 1px solid rgba(232, 238, 245, 0.14);
  color: rgba(232, 238, 245, 0.78);
  background: rgba(232, 238, 245, 0.04);
}

.quote-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  color: #0A1018;
  background: var(--color-gold);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.quote-pill:hover,
.primary-cta:hover,
.secondary-cta:hover,
.ghost-control:hover {
  transform: translateY(-1px);
}

.hero {
  position: relative;
  min-height: 112vh;
  display: grid;
  place-items: center;
  padding: calc(var(--space-32) + 2.5rem) var(--space-6) var(--space-20);
  overflow: clip;
  color: #E8EEF5;
  background:
    radial-gradient(circle at 50% 32%, rgba(127, 169, 201, 0.16), transparent 18rem),
    radial-gradient(circle at 74% 24%, rgba(127, 169, 201, 0.34), transparent 30rem),
    linear-gradient(180deg, #04070C 0%, var(--color-hero) 48%, #0A1224 100%);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at 50% 28%, black, transparent 70%);
  opacity: 0.2;
  mix-blend-mode: screen;
}

.spec-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: 50%;
  transform: rotateX(70deg);
  filter: blur(0.2px);
}

.spec-orbit-a {
  width: 78vw;
  height: 78vw;
  top: 4rem;
  left: 11vw;
  animation: orbitPulse 9s ease-in-out infinite;
}

.spec-orbit-b {
  width: 54vw;
  height: 54vw;
  top: 13rem;
  right: 16vw;
  border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  animation: orbitPulse 11s ease-in-out infinite reverse;
}

.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.eyebrow,
.tiny-label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}

.hero h1 {
  font-size: clamp(4.8rem, 11vw, 13.5rem);
  max-width: 10ch;
  color: #E8EEF5;
  line-height: 0.82;
  letter-spacing: -0.085em;
}

.hero h1 span {
  display: block;
}

.hero-line-accent {
  /* Restrained copper editorial accent on the third hero line only. */
  color: var(--color-gold);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.07em;
}

.hero-copy {
  font-size: var(--text-lg);
  max-width: 690px;
  color: rgba(232, 238, 245, 0.76);
  line-height: 1.75;
}

.hero .eyebrow {
  color: var(--color-primary-strong);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", monospace;
  letter-spacing: 0.18em;
  font-weight: 500;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: 0 auto;
  width: max-content;
  max-width: 100%;
}

.hero-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(232, 238, 245, 0.16);
  border-radius: var(--radius-full);
  background: rgba(232, 238, 245, 0.08);
  color: rgba(232, 238, 245, 0.9);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-cta {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.primary-cta,
.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  text-decoration: none;
  font-weight: 800;
}

.primary-cta i,
.floating-quote i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(10, 16, 24, 0.16);
  font-style: normal;
  line-height: 1;
}

.primary-cta {
  /* Steel-blue cold-chain CTA - hairline outlined gold dot for a copper
     editorial accent without coloring the whole button. */
  color: #06090F;
  background: var(--color-primary-strong);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.secondary-cta {
  border: 1px solid rgba(232, 238, 245, 0.18);
  color: #E8EEF5;
  background: rgba(232, 238, 245, 0.06);
  backdrop-filter: blur(16px);
}

.full {
  width: 100%;
}

.hero-device {
  position: relative;
  z-index: 1;
  width: min(1040px, 94vw);
  margin-top: clamp(var(--space-8), 4.5vh, var(--space-14));
  border: 1px solid rgba(232, 238, 245, 0.10);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 50% 34%, rgba(127, 169, 201, 0.16), transparent 27rem),
    radial-gradient(circle at 82% 12%, rgba(185, 138, 74, 0.09), transparent 17rem),
    linear-gradient(180deg, rgba(232, 238, 245, 0.072), rgba(232, 238, 245, 0.018)),
    rgba(10, 16, 24, 0.72);
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(232, 238, 245, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transform-origin: top center;
  will-change: transform;
  isolation: isolate;
  background-clip: padding-box;
}

.chapter-section {
  position: relative;
  isolation: isolate;
  scroll-margin-top: clamp(7rem, 12vw, 9rem);
  min-height: 100svh;
}

.chapter-section::after {
  content: "";
  position: absolute;
  inset: -4rem -2rem;
  z-index: -1;
  border-radius: clamp(2rem, 7vw, 6rem);
  background: radial-gradient(circle at var(--chapter-x, 50%) var(--chapter-y, 20%), color-mix(in srgb, var(--stage-glow, var(--color-gold)) 12%, transparent), transparent 28rem);
  opacity: 0;
  filter: blur(18px);
  transition:
    opacity 800ms var(--ease-out),
    filter 800ms var(--ease-out);
}

.chapter-section.in-view::after {
  opacity: 1;
  filter: blur(0);
}

/* Chapter-gate / gate-* styles removed: those elements are no longer
   used in the HTML. The chapter-section system remains. */

.hero-device::before,
.network-console::before,
.service-card::before,
.tool-grid article::before,
.final-cta::before,
.drawer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 35%, rgba(127, 169, 201, 0.06));
  opacity: 0.7;
}

.hero-device::after {
  content: "";
  position: absolute;
  inset: auto 7% 0;
  height: 1px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, rgba(127, 169, 201, 0.72), rgba(232, 238, 245, 0.30), transparent);
  box-shadow: 0 -22px 70px rgba(127, 169, 201, 0.22);
  pointer-events: none;
  opacity: 0.9;
}

.hero-device,
.route-card,
.stats-band,
.network-console,
.facility-detail,
.service-card,
.cinema-panel,
.process-step,
.tool-grid article,
.spec-summary p,
.calc-output,
.industry-row,
.final-cta,
.drawer-panel,
.file-upload,
.policy-card,
.policy-toc,
.policy-hero {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  background-clip: padding-box;
  contain: paint;
  outline: 1px solid transparent;
}

.hero-device { clip-path: inset(0 round var(--radius-3xl)); }
.route-card,
.stats-band,
.network-console,
.facility-detail,
.service-card,
.cinema-panel,
.process-step,
.tool-grid article,
.spec-summary p,
.calc-output,
.industry-row,
.final-cta,
.drawer-panel,
.policy-card,
.policy-toc,
.policy-hero { clip-path: inset(0 round var(--radius-2xl)); }
.file-upload { clip-path: inset(0 round var(--radius-xl)); }

.route-card,
.stats-band,
.network-console,
.facility-detail,
.service-card,
.cinema-panel,
.tool-grid article,
.spec-summary p,
.calc-output,
.industry-row,
.final-cta,
.drawer-panel,
.file-upload,
.policy-card,
.policy-toc,
.policy-hero {
  border-color: color-mix(in srgb, var(--color-line) 82%, rgba(232, 238, 245, 0.22));
  outline: 1px solid color-mix(in srgb, var(--color-line) 74%, transparent);
  outline-offset: -1px;
}

.hero-signal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 3vw, var(--space-10)) clamp(var(--space-5), 4vw, var(--space-10)) var(--space-2);
}

.hero-signal-head p {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(232, 238, 245, 0.86);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-signal-head p::before {
  content: "";
  width: 34px;
  height: 1px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary-strong), rgba(232, 238, 245, 0.18));
}

.hero-signal-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.hero-signal-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(232, 238, 245, 0.14);
  border-radius: var(--radius-full);
  background: rgba(232, 238, 245, 0.045);
  color: rgba(232, 238, 245, 0.7);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: clamp(var(--space-3), 2vw, var(--space-6));
  min-height: clamp(430px, 42vw, 540px);
  padding: clamp(var(--space-3), 2vw, var(--space-5));
  align-items: stretch;
}

.routing-map-shell {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(232, 238, 245, 0.08);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 28% 42%, rgba(95, 156, 194, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(232, 238, 245, 0.045), rgba(232, 238, 245, 0.012));
  overflow: hidden;
  isolation: isolate;
}

.routing-map-shell::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(126, 168, 199, 0.08);
  transform: rotate(-9deg);
  pointer-events: none;
}

.routing-map-shell::after {
  content: "";
  position: absolute;
  inset: auto 8% 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 210, 231, 0.28), transparent);
  opacity: 0.8;
}

.routing-map-shell svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block;
}

.routing-scan {
  position: absolute;
  inset: -35% auto -35% -12%;
  z-index: 2;
  width: 18%;
  transform: rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(163, 203, 232, 0.16), transparent);
  filter: blur(10px);
  opacity: 0.85;
  animation: routingScan 6.8s var(--ease-out) infinite;
  pointer-events: none;
}

.route-shadow {
  fill: rgba(6, 9, 15, 0.28);
  transform: translate(10px, 12px);
  filter: blur(9px);
  opacity: 0.72;
}

.quebec-shape {
  fill: url(#quebecGlass);
  stroke: rgba(184, 210, 231, 0.24);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.18));
}

.route-gridline {
  fill: none;
  stroke: rgba(184, 210, 231, 0.13);
  stroke-width: 1;
  stroke-dasharray: 4 12;
}

.route-line {
  fill: none;
  stroke: url(#routeGlow);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 13;
  animation: routeDash 7.5s linear infinite;
  filter: url(#softGlow);
  opacity: 0.78;
}

.route-line.route-2 {
  opacity: 0.56;
  animation-duration: 9.5s;
}

.route-line.route-3 {
  opacity: 0.42;
  animation-duration: 11s;
}

.route-flow {
  fill: none;
  stroke: rgba(232, 238, 245, 0.88);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1 610;
  stroke-dashoffset: 0;
  filter: url(#softGlow);
  animation: routePacket 4.5s var(--ease-out) infinite;
}

.map-pin circle {
  fill: rgba(10, 16, 24, 0.92);
  stroke: var(--color-gold);
  stroke-width: 3.2;
  transition: r var(--transition), fill var(--transition), stroke var(--transition);
}

.map-pin .pin-pulse {
  fill: rgba(191, 137, 60, 0.12);
  stroke: rgba(191, 137, 60, 0.28);
  stroke-width: 1;
  opacity: 0;
  transform-origin: center;
}

.map-pin text {
  fill: #E8EEF5;
  paint-order: stroke;
  stroke: rgba(6, 9, 15, 0.86);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 17px;
  font-weight: 800;
  text-anchor: middle;
  letter-spacing: -0.02em;
  pointer-events: none;
}

.map-pin.active circle {
  fill: var(--color-primary);
  r: 16;
}

.map-pin.active .pin-pulse {
  opacity: 1;
  animation: routePinPulse 2.2s var(--ease-out) infinite;
}

.map-pin {
  cursor: pointer;
}

.routing-map-caption {
  position: absolute;
  z-index: 3;
  left: clamp(var(--space-4), 4vw, var(--space-8));
  right: clamp(var(--space-4), 4vw, var(--space-8));
  bottom: clamp(var(--space-4), 3vw, var(--space-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: rgba(232, 238, 245, 0.76);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.routing-map-caption strong {
  color: rgba(232, 238, 245, 0.92);
  font-weight: 800;
}

.route-card {
  position: relative;
  margin: 0;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  align-self: stretch;
  border: 1px solid rgba(232, 238, 245, 0.14);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 16% 12%, rgba(191, 137, 60, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(12, 18, 30, 0.92), rgba(6, 9, 15, 0.78));
  backdrop-filter: blur(18px) saturate(130%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

.route-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.08), transparent 38%),
    repeating-linear-gradient(90deg, rgba(232, 238, 245, 0.035) 0 1px, transparent 1px 42px);
  opacity: 0.48;
  pointer-events: none;
}

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

.route-card-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.route-card-status i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-gold);
  box-shadow: 0 0 0 6px rgba(191, 137, 60, 0.12), 0 0 28px rgba(191, 137, 60, 0.44);
}

.route-card h2 {
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.route-passport {
  display: grid;
  gap: var(--space-4);
}

.route-passport div {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(232, 238, 245, 0.1);
}

.route-passport dt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(184, 210, 231, 0.68);
}

.route-passport dd {
  margin: 0;
  color: rgba(232, 238, 245, 0.82);
  font-size: clamp(0.94rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}

.route-passport [data-route-best] {
  color: var(--color-gold);
  font-weight: 800;
}

.route-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  color: rgba(232, 238, 245, 0.58);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.route-card-footer span:last-child {
  min-width: 0;
  text-align: right;
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  color: rgba(232, 238, 245, 0.62);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scroll-cue span {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--color-gold), transparent);
  animation: scrollCue 1.6s ease-in-out infinite;
}

.stats-band {
  width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto var(--space-24);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  isolation: isolate;
  background-clip: padding-box;
}

.stats-band article {
  padding: var(--space-8);
  border-right: 1px solid var(--color-line);
}

.stats-band article:last-child {
  border-right: 0;
}

.stats-band strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.05em;
  color: var(--color-primary-strong);
  line-height: 1;
}

.stats-band strong span {
  display: inline;
  margin-top: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.stats-band article > span {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pinned-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: var(--space-16);
  width: min(1260px, calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: clamp(var(--space-16), 10vw, var(--space-24)) 0;
}

.story-copy {
  align-self: start;
  position: relative;
  top: auto;
  display: grid;
  gap: var(--space-6);
}

.story-copy h2,
.section-heading h2,
.final-cta h2 {
  font-size: var(--text-2xl);
}

.story-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

.story-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  font-weight: 800;
}

.sticky-visual {
  min-height: auto;
}

.network-console {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: visible;
  isolation: isolate;
  background-clip: padding-box;
}

.console-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.console-head p {
  color: var(--color-text);
  font-weight: 900;
}

.console-head span {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.facility-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  padding: var(--space-4);
}

.facility-tab {
  min-height: 52px;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.facility-tab.active {
  color: #E8EEF5;
  background: var(--color-primary);
}

.facility-detail {
  margin: 0 var(--space-2) var(--space-2);
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 2.6vw, var(--space-8));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--color-gold) 20%, transparent), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--color-surface-2) 80%, transparent), var(--color-surface));
  overflow: visible;
  isolation: isolate;
  background-clip: padding-box;
}

.facility-detail h3 {
  font-size: var(--text-2xl);
}

.facility-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.facility-badges span,
.marquee-track span,
.footer-links span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.services,
.quality,
.partners,
.tools,
.industries,
.faq {
  width: min(1260px, calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: clamp(var(--space-16), 10vw, var(--space-24)) 0;
}

.services {
  padding-top: clamp(var(--space-12), 7vw, var(--space-20));
}

.section-heading {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.section-heading.narrow {
  max-width: 820px;
}

.service-stage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-4);
}

.service-card {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  content-visibility: auto;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition),
    background var(--transition);
}

.service-card:hover,
.tool-grid article:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-gold) 36%, var(--color-line));
  box-shadow: var(--shadow-lg);
}

.service-card.large {
  min-height: 520px;
  grid-row: span 2;
}

.service-card.wide {
  grid-column: 1 / -1;
  min-height: 250px;
}

.service-card span {
  color: var(--color-primary-strong);
  font-weight: 900;
}

.service-card h3 {
  font-size: var(--text-xl);
  max-width: 12ch;
}

.service-card.large h3 {
  font-size: var(--text-2xl);
}

.process-cinema {
  padding: clamp(var(--space-16), 10vw, var(--space-24)) var(--page-gutter);
}

.cinema-panel {
  width: min(1260px, 100%);
  margin: 0 auto;
  min-height: 760px;
  display: grid;
  align-content: end;
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--color-primary) 32%, transparent), transparent 24rem),
    radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--color-gold) 20%, transparent), transparent 20rem),
    #06090F;
  color: #E8EEF5;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  box-shadow: var(--shadow-lg);
}

.cinema-panel p {
  color: #C7D5E2;
}

.cinema-panel h2 {
  max-width: 12ch;
  font-size: var(--text-2xl);
}

.process-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 72px;
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-2xl);
  background: rgba(232, 238, 245, 0.055);
  color: #E8EEF5;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 1px rgba(232, 238, 245, 0.2),
    inset 0 1px 0 rgba(232, 238, 245, 0.08);
  transition:
    background var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(127, 169, 201, 0.16), transparent 44%);
  opacity: 0;
  transition: opacity var(--transition-interactive);
}

.process-step:hover {
  background: rgba(232, 238, 245, 0.085);
  box-shadow:
    inset 0 0 0 1px rgba(232, 238, 245, 0.3),
    inset 0 1px 0 rgba(232, 238, 245, 0.12),
    0 16px 42px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

.process-step.active {
  background: rgba(232, 238, 245, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(127, 169, 201, 0.40),
    inset 0 1px 0 rgba(232, 238, 245, 0.14),
    0 22px 56px rgba(0, 0, 0, 0.22);
}

.process-step.active::before {
  opacity: 1;
}

.process-step span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: rgba(232, 238, 245, 0.12);
  color: var(--color-gold);
  font-weight: 900;
}

.process-step strong {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
}

.process-showcase {
  display: grid;
  grid-template-columns: minmax(250px, 0.7fr) minmax(440px, 1.2fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: stretch;
  margin-top: var(--space-10);
}

.process-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}

.process-index {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #E8EEF5;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.process-index i {
  width: clamp(72px, 10vw, 140px);
  height: 1px;
  background: rgba(127, 169, 201, 0.36);
}

.process-slider-controls {
  display: grid;
  gap: var(--space-3);
}

.process-viewport {
  position: relative;
  min-height: 520px;
  border-radius: var(--radius-3xl);
  outline: 1px solid rgba(232, 238, 245, 0.2);
  outline-offset: -1px;
  background:
    radial-gradient(circle at 18% 15%, rgba(127, 169, 201, 0.16), transparent 15rem),
    radial-gradient(circle at 88% 25%, rgba(127, 169, 201, 0.22), transparent 17rem),
    linear-gradient(135deg, rgba(232, 238, 245, 0.1), rgba(232, 238, 245, 0.025)),
    rgba(232, 238, 245, 0.04);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(232, 238, 245, 0.22),
    inset 0 1px 0 rgba(232, 238, 245, 0.14),
    0 34px 84px rgba(0, 0, 0, 0.32);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round var(--radius-3xl));
  contain: paint;
}

.process-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(232, 238, 245, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 238, 245, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.8;
}

.process-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  color: #E8EEF5;
  opacity: 0;
  transform: translateX(24px) scale(0.985);
  transition:
    opacity 520ms var(--ease-out),
    transform 620ms var(--ease-out);
  pointer-events: none;
}

.process-slide[hidden] {
  display: none;
}

.process-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}

.slide-kicker {
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.process-slide h3 {
  max-width: 10ch;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 5.6rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.process-slide p {
  max-width: 52ch;
  color: #C7D5E2;
  font-size: var(--text-base);
}

.process-progress {
  position: absolute;
  left: clamp(var(--space-8), 5vw, var(--space-16));
  right: clamp(var(--space-8), 5vw, var(--space-16));
  bottom: clamp(var(--space-6), 4vw, var(--space-10));
  height: 2px;
  border-radius: var(--radius-full);
  background: rgba(232, 238, 245, 0.16);
  overflow: hidden;
}

.process-progress span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-gold);
  transform-origin: left center;
  transition: width 520ms var(--ease-out);
}

.outline-stable {
  box-shadow:
    inset 0 0 0 1px var(--color-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.trust-marquee {
  overflow: hidden;
  max-width: 100%;
  contain: paint;
  border-block: 1px solid var(--color-line);
  padding: var(--space-4) 0;
}

.marquee-track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: marquee 28s linear infinite;
}

.difference-list {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-2);
}

.difference-list article {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
}

.difference-list span {
  color: var(--color-primary-strong);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.05em;
}

.difference-list p {
  color: var(--color-text);
  font-weight: 700;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-4);
}

.tool-grid article {
  position: relative;
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

.spec-builder-card {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.tool-head {
  display: grid;
  gap: var(--space-3);
}

.tool-head h3 {
  font-size: var(--text-xl);
}

.spec-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.spec-summary p {
  position: relative;
  min-height: 130px;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

.spec-summary span {
  font-size: var(--text-xs);
  font-weight: 900;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.spec-summary strong,
.calc-output strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.04em;
  line-height: 1;
}

label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
}

input[type="range"] {
  padding: 0;
  accent-color: var(--color-primary);
}

.file-upload {
  position: relative;
  min-height: 78px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-surface-2) 82%, transparent), color-mix(in srgb, var(--color-bg) 74%, transparent)),
    var(--color-surface-2);
  color: var(--color-text);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.file-upload:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-gold) 48%, var(--color-line));
  box-shadow: var(--shadow-md);
}

.file-upload:focus-within {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

.file-upload-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #E8EEF5;
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1;
}

.file-upload-copy {
  display: grid;
  gap: var(--space-1);
}

.file-upload-copy strong {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.2;
}

.file-upload-copy small {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  opacity: 0;
  cursor: pointer;
}

.calc-output {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

.cut-board {
  display: grid;
  grid-template-columns: 1fr 1.1fr 0.9fr;
  gap: var(--space-2);
  margin: var(--space-6) 0;
}

.cut-board button {
  min-height: 58px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  color: var(--color-muted);
  font-weight: 800;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.cut-board button:hover,
.industry-row:hover,
.facility-tab:hover {
  transform: translateY(-1px);
  background: var(--color-surface-2);
  color: var(--color-text);
}

.cut-output {
  color: var(--color-text);
  font-weight: 700;
}

.industry-stack {
  display: grid;
  gap: var(--space-3);
}

.industry-row {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: var(--space-8);
  text-align: left;
  min-height: 112px;
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
  transition: background var(--transition), transform var(--transition), color var(--transition);
}

.industry-row.active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 96%, #000), color-mix(in srgb, var(--color-primary) 74%, var(--color-gold))),
    var(--color-primary);
  color: #E8EEF5;
  box-shadow:
    0 18px 50px color-mix(in srgb, var(--color-primary) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.industry-row span {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.industry-row small {
  color: currentColor;
  opacity: 0.76;
  font-size: var(--text-base);
}

/* ============================================
   Partners - editorial buyer-channel marks
   ============================================ */

.partners {
  position: relative;
}

.partner-marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.partner-marks > li {
  --mark-x: 0px;
  --mark-y: 0px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  align-items: center;
  padding: var(--space-10) var(--space-6);
  border-bottom: 1px solid var(--color-line);
  transition:
    transform 360ms var(--ease-out),
    background 360ms var(--ease-out);
  isolation: isolate;
}

.partner-marks > li:nth-child(odd) {
  border-right: 1px solid var(--color-line);
}

.partner-marks > li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.partner-marks > li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--hover-x, 50%) var(--hover-y, 50%),
    color-mix(in srgb, var(--color-gold) 16%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.partner-marks > li:hover::before {
  opacity: 1;
}

.partner-marks > li > * {
  position: relative;
  z-index: 1;
  transform: translate3d(var(--mark-x), var(--mark-y), 0);
  transition: transform 240ms var(--ease-out);
}

.partner-rank {
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--color-faint);
  font-variant-numeric: tabular-nums;
}

.partner-logo-frame {
  min-height: clamp(4rem, 7vw, 6rem);
  display: flex;
  align-items: center;
  padding: var(--space-3) clamp(var(--space-3), 3vw, var(--space-6));
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 58%, transparent), transparent),
    color-mix(in srgb, var(--color-text) 3%, transparent);
  overflow: hidden;
  background-clip: padding-box;
}

.partner-logo-frame img {
  max-width: min(14rem, 68vw);
  max-height: 3.8rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(0.92) contrast(1.02);
}

.partner-logo-frame strong {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text);
}

.partner-marks > li small {
  grid-column: 2;
  max-width: 42ch;
  font-size: var(--text-base);
  color: var(--color-muted);
  letter-spacing: 0;
}

/* ============================================
   FAQ - unified accordion panel
   ============================================ */

.faq {
  position: relative;
}

.faq-list {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.faq-row {
  position: relative;
  border-bottom: 1px solid var(--color-line);
  transition: background 320ms var(--ease-out);
}

.faq-row:last-child {
  border-bottom: 0;
}

.faq-row[open] {
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.faq-row > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-2);
  font-family: var(--font-display);
  transition: padding 320ms var(--ease-out);
}

.faq-row > summary::-webkit-details-marker {
  display: none;
}

.faq-row > summary::marker {
  content: "";
}

.faq-row > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.faq-num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-faint);
  font-variant-numeric: tabular-nums;
}

.faq-q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-text);
}

.faq-toggle {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: transparent;
  transition:
    border-color 320ms var(--ease-out),
    background 320ms var(--ease-out),
    transform 480ms var(--ease-out);
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 480ms var(--ease-out);
}

.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-row[open] .faq-toggle {
  border-color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  transform: rotate(45deg);
}

.faq-row > summary:hover .faq-toggle {
  border-color: var(--color-text);
}

.faq-row > p {
  max-width: 78ch;
  margin: 0;
  padding: 0 var(--space-2) var(--space-8) calc(var(--space-6) + 2.5ch);
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.65;
  animation: faqContentReveal 520ms var(--ease-out) both;
}

@keyframes faqContentReveal {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================
   Contact - editorial two-column layout
   ============================================ */

.contact {
  position: relative;
  width: min(1260px, calc(100% - (var(--page-gutter) * 2)));
  margin: 0 auto;
  padding: clamp(var(--space-14), 8vw, var(--space-24)) 0;
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: start;
}

.contact-intro {
  position: sticky;
  top: calc(var(--space-20) + var(--space-4));
  display: grid;
  gap: var(--space-5);
}

.contact-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
  margin: 0;
}

.contact-intro > p {
  max-width: 48ch;
  font-size: var(--text-lg);
  color: var(--color-muted);
  line-height: 1.5;
}

.contact-meta {
  margin: var(--space-6) 0 0;
  padding: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-line);
}

.contact-meta div {
  display: grid;
  gap: var(--space-1);
}

.contact-meta dt {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.contact-meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.contact-meta dd a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--transition);
}

.contact-meta dd a:hover {
  border-bottom-color: var(--color-text);
}

.contact-form {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-10);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.contact-form-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.contact-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.contact-field.full {
  grid-column: 1 / -1;
}

.contact-field > span {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: 0;
  transition:
    border-color var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.contact-field textarea {
  min-height: 144px;
  resize: vertical;
  line-height: 1.55;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--color-faint);
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
  border-color: color-mix(in srgb, var(--color-text) 30%, var(--color-line));
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.contact-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-10);
}

.contact-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
}

.contact-actions .primary-cta {
  justify-self: start;
}

.contact-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-faint);
  line-height: 1.5;
  min-height: 1.4em;
}

.contact-note[data-state="success"],
.form-status[data-state="success"] {
  color: #2c6a3f;
}

.contact-note[data-state="error"],
.form-status[data-state="error"] {
  color: #b40000;
}

.form-status {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-faint);
  min-height: 1.4em;
}

button[data-form-submit][data-busy="true"] {
  opacity: 0.72;
  cursor: progress;
  pointer-events: none;
}

[data-form-field-error="true"] input,
[data-form-field-error="true"] textarea,
[data-form-field-error="true"] select,
input[data-field-error="true"],
textarea[data-field-error="true"],
select[data-field-error="true"] {
  border-color: #b40000 !important;
  box-shadow: 0 0 0 1px #b40000 inset;
}

.final-cta {
  position: relative;
  width: min(1180px, calc(100% - (var(--page-gutter) * 2)));
  min-height: 620px;
  margin: var(--space-16) auto;
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--space-6);
  padding: var(--space-12);
  border-radius: clamp(2rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--color-gold) 20%, transparent), transparent 24rem),
    var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

.final-cta::after {
  content: "";
  position: absolute;
  inset: auto 10% -22% 10%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 64%);
  filter: blur(8px);
  pointer-events: none;
}

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

.final-cta h2 {
  max-width: 14ch;
}

.site-footer {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--space-16) max(var(--page-gutter), calc((100vw - 1260px) / 2)) clamp(var(--space-20), 13vw, var(--space-32));
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  border-top: 1px solid var(--color-line);
  overflow: hidden;
}

.site-footer > div:first-child {
  max-width: 36rem;
}

.footer-brand {
  margin-bottom: var(--space-4);
}

.footer-links {
  max-width: min(46rem, 54vw);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  text-decoration: none;
  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.footer-links a:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
  transform: translateY(-1px);
}

.footer-wordmark {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -0.04em;
  z-index: -1;
  display: block;
  width: max-content;
  max-width: calc(100vw - var(--space-4));
  transform: translateX(-50%);
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 9%, transparent);
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 800;
  pointer-events: none;
  text-align: center;
}

.floating-quote {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 54px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  color: #0A1018;
  background: var(--color-gold);
  font-weight: 900;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    opacity 320ms var(--ease-out),
    transform 420ms var(--ease-out);
}

/* Hide floating-quote when the current stage already has a primary conversion
   path. It should support deeper scrolling, not compete with the hero/header
   CTAs or the contact form submit. */
body[data-stage="hero"] .floating-quote,
body[data-stage="contact"] .floating-quote {
  opacity: 0;
  pointer-events: none;
  transform: translateY(140%);
}

.policy-header {
  grid-template-columns: 1fr auto 1fr;
}

.policy-main {
  padding: calc(var(--space-32) + 2rem) clamp(var(--space-4), 4vw, var(--space-10)) var(--space-20);
  display: grid;
  gap: clamp(var(--space-10), 4vw, var(--space-16));
}

.policy-hero {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-8), 5vw, var(--space-14)) clamp(var(--space-6), 5vw, var(--space-12));
  border: 1px solid var(--color-line);
  border-radius: clamp(1.5rem, 4vw, 2.4rem);
  background:
    radial-gradient(circle at 80% -20%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%),
    radial-gradient(circle at -10% 110%, color-mix(in srgb, var(--color-primary-strong) 9%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(232, 238, 245, 0.04) 0%, rgba(232, 238, 245, 0.01) 100%),
    var(--color-surface);
  box-shadow:
    0 30px 64px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.policy-hero .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-primary-strong);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 500;
  margin: 0;
}

.policy-hero h1 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.policy-hero p {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(1rem, 1.05rem + 0.2vw, 1.18rem);
  line-height: 1.7;
  color: var(--color-muted);
}

.policy-date {
  display: inline-flex;
  align-items: center;
  align-self: start;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-primary-strong) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}

.policy-layout {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: start;
}

.policy-toc {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl, 1.5rem);
  background: linear-gradient(180deg, rgba(232, 238, 245, 0.04) 0%, rgba(232, 238, 245, 0.015) 100%), var(--color-surface);
  box-shadow: var(--shadow-md);
}

.policy-toc::before {
  content: attr(aria-label);
  display: block;
  padding: 0 var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-faint);
  font-weight: 500;
}

.policy-toc a {
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-radius: 10px;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}

.policy-toc a:hover,
.policy-toc a:focus-visible {
  color: var(--color-text);
  background: var(--color-surface-2);
  outline: none;
}

.policy-card {
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  border: 1px solid var(--color-line);
  border-radius: clamp(1.25rem, 3vw, 1.75rem);
  background: linear-gradient(180deg, rgba(232, 238, 245, 0.035) 0%, rgba(232, 238, 245, 0.012) 100%), var(--color-surface);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.policy-card section {
  scroll-margin-top: 140px;
}

.policy-card section + section {
  margin-top: clamp(var(--space-8), 4vw, var(--space-12));
  padding-top: clamp(var(--space-6), 3vw, var(--space-10));
  border-top: 1px solid var(--color-line);
}

.policy-card h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.5rem + 0.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-text);
}

.policy-card h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--color-text);
}

.policy-card p {
  margin: 0;
  font-size: clamp(0.96rem, 0.96rem + 0.15vw, 1.05rem);
  line-height: 1.75;
  color: var(--color-muted);
}

.policy-card p + p {
  margin-top: var(--space-4);
}

.policy-card ul {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  color: var(--color-muted);
  font-size: clamp(0.96rem, 0.96rem + 0.15vw, 1.05rem);
  line-height: 1.7;
}

.policy-card a {
  color: var(--color-primary-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary-strong) 30%, transparent);
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

.policy-card a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-primary-strong);
}

.copyright {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.quote-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.quote-drawer[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.72);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}

.quote-drawer[aria-hidden="false"] .drawer-backdrop {
  opacity: 1;
}

.drawer-panel {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  width: min(560px, calc(100% - var(--space-8)));
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 78% 4%, color-mix(in srgb, var(--color-gold) 13%, transparent), transparent 16rem),
    var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: auto;
  isolation: isolate;
  background-clip: padding-box;
  opacity: 0;
  transform: translateX(0) scale(0.98);
  transition:
    opacity 260ms var(--ease-out),
    transform 360ms var(--ease-out);
}

.quote-drawer[aria-hidden="false"] .drawer-panel {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.drawer-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  font-size: 1.5rem;
}

.drawer-panel h2 {
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
}

.drawer-intro {
  margin: var(--space-4) 0 var(--space-8);
}

.quote-form {
  display: grid;
  gap: var(--space-5);
}

.routing-preview {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
}

.routing-preview span {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.routing-preview strong {
  display: block;
  margin: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.04em;
}

@keyframes orbitPulse {
  50% { transform: rotateX(70deg) scale(1.04); opacity: 0.58; }
}

@keyframes tagFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes routeDash {
  to { stroke-dashoffset: -160; }
}

@keyframes routePacket {
  0% { stroke-dashoffset: 30; opacity: 0; }
  12% { opacity: 0.9; }
  78% { opacity: 0.9; }
  100% { stroke-dashoffset: -610; opacity: 0; }
}

@keyframes routingScan {
  0%, 18% { transform: translateX(0) rotate(12deg); opacity: 0; }
  30% { opacity: 0.8; }
  72% { opacity: 0.26; }
  100% { transform: translateX(780%) rotate(12deg); opacity: 0; }
}

@keyframes routePinPulse {
  0% { transform: scale(0.72); opacity: 0.72; }
  70%, 100% { transform: scale(1.42); opacity: 0; }
}

@keyframes scrollCue {
  50% { transform: translateY(8px); opacity: 0.35; }
}

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

@keyframes packMove {
  from { transform: translateX(-120px); }
  to { transform: translateX(620px); }
}

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

@keyframes gatePinPulse {
  50% {
    transform: scale(1.6);
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-gold) 12%, transparent);
  }
}

@keyframes gateRouteFlow {
  to { background-position: 120px 0; }
}

@keyframes gateStack {
  50% {
    transform: scaleY(0.72);
    filter: saturate(1.24);
  }
}

@keyframes gateConveyor {
  from { transform: translate(-120%, -50%); }
  to { transform: translate(760%, -50%); }
}

@keyframes gateCert {
  50% {
    transform: scale(0.96);
    background-color: color-mix(in srgb, var(--color-gold) 10%, transparent);
  }
}

@keyframes gateAnswer {
  50% { width: 100%; }
}

@keyframes gateNarrow {
  50% {
    top: 50%;
    transform: translate(0, -50%) scale(1.65);
  }
  100% {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.85);
  }
}

.reveal-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform;
  transition:
    opacity 760ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 760ms var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.mask-headline {
  display: block;
  position: relative;
  clip-path: none;
  transform: none;
  transition:
    opacity 520ms var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal-item.is-visible .mask-headline,
.mask-headline.is-visible,
.in-view .mask-headline {
  clip-path: none;
  transform: none;
}

/* When the headline IS the reveal-item itself */
.reveal-item.mask-headline {
  transform: none;
}
.reveal-item.mask-headline.is-visible {
  transform: none;
}

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

  .experience-atmosphere,
  .chapter-gate .gate-visual i,
  .chapter-gate .gate-visual::before,
  .chapter-gate .gate-visual i::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal-item,
  .reveal-item.mask-headline,
  .mask-headline {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .partner-marks > li {
    --mark-x: 0px !important;
    --mark-y: 0px !important;
  }
}

@media (max-width: 980px) {
  .experience-rail {
    left: 50%;
    right: auto;
    top: auto;
    bottom: var(--space-3);
    grid-template-columns: 1fr;
    width: min(520px, calc(100% - var(--space-6)));
    transform: translateX(-50%);
  }

  .experience-rail-track {
    width: 100%;
    height: 2px;
    order: 2;
  }

  .experience-rail-track span {
    transform: scaleX(var(--experience-progress, 0.04));
    transform-origin: left;
  }

  .experience-rail nav {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-md);
  }

  .experience-rail button {
    min-height: 34px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .experience-rail button strong {
    display: none;
  }

  .experience-rail button:hover,
  .experience-rail button.active {
    transform: none;
    background: transparent;
  }

  .chapter-gate {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .gate-copy strong {
    max-width: 12ch;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    border-radius: 0;
    padding-inline: var(--space-4);
    padding-top: 0;
  }

  .header-ticker {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .ticker-static,
  .ticker-rotator {
    min-height: 30px;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .desktop-nav {
    display: none;
  }

  .header-actions {
    gap: var(--space-1);
  }

  .quote-pill {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--space-24) + 4rem);
    padding-bottom: var(--space-14);
  }

  .hero h1 {
    font-size: clamp(3.4rem, 17vw, 7.5rem);
  }

  .hero-device {
    margin-top: var(--space-7);
  }

  .hero-device {
    display: grid;
    gap: var(--space-2);
  }

  .hero-signal-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4) var(--space-2);
  }

  .hero-signal-head p {
    max-width: 100%;
    letter-spacing: 0.11em;
    line-height: 1.35;
  }

  .hero-signal-head p::before {
    width: 24px;
  }

  .hero-signal-metrics {
    justify-content: flex-start;
    gap: var(--space-1);
  }

  .hero-signal-metrics span {
    min-height: 30px;
    padding-inline: var(--space-2);
    letter-spacing: 0.035em;
  }

  .route-stage,
  .pinned-story,
  .service-stage,
  .tool-grid {
    grid-template-columns: 1fr;
  }

  .route-stage {
    min-height: auto;
  }

  .route-stage {
    grid-template-columns: 1fr;
  }

  .routing-map-shell svg {
    min-height: 360px;
  }

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

  .route-card {
    margin-top: 0;
  }

  .routing-map-caption {
    position: relative;
    inset: auto;
    padding: 0 var(--space-4) var(--space-4);
    display: grid;
    justify-content: start;
    gap: var(--space-1);
  }

  .route-card h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

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

  .stats-band article:nth-child(2) {
    border-right: 0;
  }

  .story-copy,
  .network-console {
    position: static;
  }

  .sticky-visual {
    min-height: auto;
  }

  .facility-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .process-showcase {
    grid-template-columns: 1fr;
  }

  .process-copy {
    gap: var(--space-5);
  }

  .process-slider-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .process-step {
    grid-template-columns: 1fr;
    min-height: 92px;
    justify-items: start;
  }

  .industry-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .site-footer {
    display: grid;
    grid-template-columns: 1fr;
    padding-bottom: clamp(var(--space-24), 18vw, var(--space-32));
  }

  .site-footer > div:first-child,
  .footer-links {
    max-width: none;
  }

  .footer-links {
    justify-content: start;
  }

  .policy-layout {
    grid-template-columns: 1fr;
  }

  .policy-toc {
    position: static;
    grid-auto-flow: row;
  }

  .partner-marks {
    grid-template-columns: 1fr;
  }

  .partner-marks > li:nth-child(odd) {
    border-right: 0;
  }

  .partner-marks > li:nth-last-child(2) {
    border-bottom: 1px solid var(--color-line);
  }

  .contact-shell {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-intro {
    position: static;
  }

  .contact-meta {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: var(--space-4);
  }

  .experience-rail {
    display: none;
  }

  .chapter-gate {
    width: min(100% - (var(--page-gutter) * 2), 1180px);
    padding: var(--space-5);
    border-radius: var(--radius-2xl);
  }

  .gate-visual {
    min-height: 150px;
  }

  .gate-copy strong {
    font-size: clamp(2rem, 12vw, 4rem);
  }

  .gate-quality .gate-visual,
  .gate-services .gate-visual {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-header {
    inset: 0 0 auto 0;
    padding: 0 var(--space-3) var(--space-2);
    border-radius: 0;
  }

  .header-ticker {
    margin-inline: calc(var(--space-3) * -1);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-inline: var(--space-3);
    padding-block: 2px 4px;
  }

  .ticker-static {
    justify-content: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
  }

  .ticker-static span {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ticker-static a {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ticker-rotator {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    min-height: 1.2em;
    text-align: left;
  }

  .ticker-rotator span {
    left: 0;
    right: auto;
  }

  .site-header .brand-logo {
    width: clamp(134px, 42vw, 170px);
  }

  .site-header .brand-logo-icon {
    width: clamp(42px, 10.5vw, 48px);
  }

  .footer-brand .brand-logo {
    width: clamp(168px, 54vw, 220px);
  }

  .chapter-section {
    scroll-margin-top: 6.25rem;
  }

  .brand span {
    font-size: var(--text-sm);
  }

  .hero {
    padding-inline: var(--page-gutter);
    padding-top: calc(var(--space-20) + 3.75rem);
  }

  .hero-device {
    border-radius: var(--radius-2xl);
  }

  .route-stage {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .routing-map-shell svg {
    min-height: 300px;
    transform: scale(1.08);
    transform-origin: 42% 50%;
  }

  .map-pin text {
    font-size: 20px;
    stroke-width: 6px;
  }

  .routing-map-caption {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .route-card {
    min-height: 0;
    padding: var(--space-5);
    gap: var(--space-5);
  }

  .route-passport {
    gap: var(--space-3);
  }

  .route-passport div {
    padding-top: var(--space-3);
  }

  .route-card-footer {
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .hero-copy {
    font-size: var(--text-base);
  }

  .hero-chips {
    justify-content: center;
    width: 100%;
    padding-bottom: var(--space-1);
  }

  .hero-chips span {
    flex: 0 0 auto;
  }

  .floating-quote {
    right: var(--space-3);
    bottom: var(--space-3);
    min-height: 50px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
  }

  .hero-cta,
  .primary-cta,
  .secondary-cta {
    width: 100%;
  }

  .stats-band {
    grid-template-columns: 1fr;
  }

  .stats-band article {
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .stats-band article:last-child {
    border-bottom: 0;
  }

  .process-slider-controls {
    grid-template-columns: 1fr;
  }

  .process-step {
    min-height: 64px;
    grid-template-columns: auto 1fr;
    padding: var(--space-3) var(--space-4);
  }

  .process-step span {
    margin-bottom: 0;
  }

  .process-viewport {
    min-height: clamp(360px, 78vw, 450px);
    border-radius: var(--radius-2xl);
    clip-path: inset(0 round var(--radius-2xl));
  }

  .process-slide {
    padding: var(--space-6);
    grid-template-rows: auto auto auto;
    gap: var(--space-4);
  }

  .process-slide h3 {
    max-width: 9.5ch;
    font-size: clamp(2.4rem, 12.5vw, 3.45rem);
    line-height: 0.94;
    letter-spacing: -0.052em;
  }

  .process-slide p {
    max-width: 30ch;
    font-size: clamp(0.98rem, 3.9vw, 1.08rem);
    line-height: 1.55;
  }

  .process-progress {
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--space-5);
  }

  .service-card,
  .service-card.large,
  .service-card.wide,
  .cinema-panel,
  .tool-grid article {
    min-height: auto;
    padding: var(--space-6);
  }

  .spec-summary {
    grid-template-columns: 1fr;
  }

  .difference-list article {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .facility-tabs {
    grid-template-columns: 1fr;
  }

  .facility-detail {
    padding: var(--space-5);
    margin: 0 var(--space-1) var(--space-1);
  }

  .cut-board {
    grid-template-columns: 1fr 1fr;
  }

  .policy-main {
    padding-top: calc(var(--space-24) + 2rem);
    gap: var(--space-8);
  }

  .policy-hero,
  .policy-card {
    padding: var(--space-6);
    border-radius: 1.25rem;
  }

  .policy-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .policy-hero p {
    font-size: 1rem;
  }

  .policy-toc {
    padding: var(--space-3);
  }

  .policy-toc a {
    min-height: 44px;
  }

  /* Partners - mobile */
  .partner-marks > li {
    padding: var(--space-6) var(--space-4);
    column-gap: var(--space-4);
  }

  .partner-rank,
  .partner-marks > li strong {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  /* FAQ - mobile */
  .faq-row > summary {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-2);
  }

  .faq-q {
    font-size: clamp(1rem, 1rem + 0.4vw, 1.2rem);
  }

  .faq-row > p {
    padding: 0 var(--space-2) var(--space-6) var(--space-2);
  }

  /* Contact - mobile */
  .contact-form {
    padding: var(--space-6);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .contact-meta {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .contact-actions .primary-cta {
    justify-self: stretch;
  }

  /* Hide floating quote on mobile when contact form is reachable on-page,
     to prevent overlap with the final-cta and contact submit. */
  body[data-stage="contact"] .floating-quote,
  body[data-stage="quote"] .floating-quote {
    opacity: 0;
    pointer-events: none;
    transform: translateY(140%);
    transition:
      opacity 240ms var(--ease-out),
      transform 320ms var(--ease-out);
  }
}

/* ============================================================
   PREMIUM MOTION + CHAPTER IDENTITY PASS
   Each chapter becomes a distinct stage with its own atmosphere,
   entrance choreography, and storytelling device.
   ============================================================ */

/* --- Chapter eyebrow numbering: gives each section a clear identity */
.chapter-section .eyebrow,
.section-heading .eyebrow,
.story-copy .eyebrow,
.contact-intro .eyebrow,
.cinema-panel .eyebrow,
.tool-head .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: 2.6em;
  color: var(--color-primary-strong);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: var(--text-xs);
}

.chapter-section .eyebrow::before,
.section-heading .eyebrow::before,
.story-copy .eyebrow::before,
.contact-intro .eyebrow::before,
.cinema-panel .eyebrow::before,
.tool-head .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.2em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary-strong));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 720ms var(--ease-out) var(--reveal-delay, 0ms);
}

.reveal-item.is-visible .eyebrow::before,
.is-visible.eyebrow::before,
.in-view .eyebrow::before {
  transform: scaleX(1);
}

/* --- Chapter atmosphere bands: subtle horizontal seam between chapters */
.chapter-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(80px, 14vw, 200px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-glow, var(--color-gold)) 50%, transparent);
  opacity: 0;
  transform: translateX(-50%) translateY(-2.5rem) scaleX(0.4);
  transition:
    opacity 900ms var(--ease-out),
    transform 1100ms var(--ease-out);
  pointer-events: none;
}

.chapter-section.in-view::before {
  opacity: 0.7;
  transform: translateX(-50%) translateY(-3rem) scaleX(1);
}

/* Hero already has its own vibe; suppress the seam */
.hero.chapter-section::before {
  display: none;
}

/* --- Stronger per-stage atmosphere: distinct background hue per chapter */
body[data-stage="hero"] {
  --chapter-tint: var(--color-primary);
}
body[data-stage="network"] {
  --chapter-tint: var(--color-gold);
}
body[data-stage="services"] {
  --chapter-tint: var(--color-primary);
}
body[data-stage="process"] {
  --chapter-tint: var(--color-primary-strong);
}
body[data-stage="quality"] {
  --chapter-tint: var(--color-gold);
}
body[data-stage="partners"] {
  --chapter-tint: var(--color-primary);
}
body[data-stage="tools"],
body[data-stage="industries"] {
  --chapter-tint: var(--color-primary);
}
body[data-stage="faq"] {
  --chapter-tint: var(--color-primary-strong);
}
body[data-stage="contact"] {
  --chapter-tint: var(--color-gold);
}
body[data-stage="quote"] {
  --chapter-tint: var(--color-gold);
}

/* --- Cinematic reveal variants (additive - existing .reveal-item still works) */
.reveal-item {
  transition:
    opacity 980ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 1080ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 980ms var(--ease-out) var(--reveal-delay, 0ms),
    clip-path 1080ms var(--ease-out) var(--reveal-delay, 0ms);
}

/* Soft blur-in for cards/panels */
.reveal-blur {
  opacity: 0;
  filter: blur(26px) saturate(0.72) brightness(0.72);
  transform: translate3d(0, 64px, -80px) rotateX(2.5deg) scale(0.94);
  transform-origin: 50% 72%;
  will-change: opacity, transform, filter;
  transition:
    opacity 980ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 1180ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 1080ms var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0) saturate(1) brightness(1);
  transform: translate3d(0, 0, 0) rotateX(0) scale(1);
}

/* Slide-up for cards */
.reveal-rise {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 72px, -36px) scale(0.975);
  transition:
    opacity 820ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 1040ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 920ms var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal-rise.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Curtain wipe for media or feature blocks */
.reveal-curtain {
  clip-path: inset(0 0 100% 0 round var(--radius-2xl));
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 44px, -44px) scale(0.97);
  transition:
    clip-path 1120ms var(--ease-out) var(--reveal-delay, 0ms),
    opacity 720ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 1040ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 920ms var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal-curtain.is-visible {
  clip-path: inset(0 0 0 0 round var(--radius-2xl));
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* Word-by-word stagger for headlines using JS-injected spans */
.mask-headline-word {
  display: inline-block;
  overflow: visible;
  vertical-align: bottom;
  padding-bottom: 0.04em;
}
.mask-headline-word > i {
  display: inline-block;
  font-style: inherit;
  opacity: 0.001;
  transform: translate3d(0, 0.18em, 0);
  transition:
    opacity 700ms var(--ease-out) var(--word-delay, 0ms),
    transform 800ms var(--ease-out) var(--word-delay, 0ms);
  will-change: opacity, transform;
}
.mask-headline.is-visible .mask-headline-word > i,
.reveal-item.is-visible .mask-headline-word > i,
.in-view .mask-headline-word > i {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Layered chapter atmosphere for stronger separation */
.chapter-section.in-view::after {
  opacity: 1;
  filter: blur(0);
}

/* When chapter is "settled" (long enough in-view), boost its glow */
.chapter-section.is-settled::after {
  opacity: 1;
  filter: blur(2px) brightness(1.05);
}

/* --- Service stage as capability selector grid: outcome chips on hover */
.service-card {
  transition:
    transform 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out),
    border-color 320ms var(--ease-out),
    background 480ms var(--ease-out);
}
.service-card::after {
  content: "";
  position: absolute;
  inset: auto auto -55% -10%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-gold) 28%, transparent), transparent 65%);
  opacity: 0;
  transform: translateY(20%) scale(0.7);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.service-card:hover {
  transform: translateY(-6px) scale(1.005);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(232, 238, 245, 0.08);
}
.service-card:hover::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.service-card:hover h3 {
  color: var(--color-primary-strong);
  transition: color 320ms var(--ease-out);
}

/* --- FAQ rows: more interactive opening */
.faq-row {
  transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.faq-row:hover {
  background: color-mix(in srgb, var(--color-surface-2) 30%, transparent);
}
.faq-row[open] {
  background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
}
.faq-row > summary {
  transition: padding 320ms var(--ease-out);
}
.faq-row[open] > summary .faq-num {
  color: var(--color-primary-strong);
  transition: color 320ms var(--ease-out);
}
.faq-row[open] > p {
  animation: faqAnswer 540ms var(--ease-out) both;
}
@keyframes faqAnswer {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Partners: lift + glow + show "active client" rail */
.partner-marks > li {
  transition:
    transform 420ms var(--ease-out),
    border-color 320ms var(--ease-out),
    background 420ms var(--ease-out);
}
.partner-marks > li:hover {
  border-color: color-mix(in srgb, var(--color-gold) 32%, var(--color-line));
  background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
}

/* --- Industry rows: directional reveal */
.industry-row {
  position: relative;
  overflow: hidden;
  transition: background 320ms var(--ease-out), padding 320ms var(--ease-out);
}
.industry-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-gold), var(--color-primary));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 420ms var(--ease-out);
}
.industry-row:hover::before,
.industry-row.active::before {
  transform: scaleY(1);
}
.industry-row.active {
  background: color-mix(in srgb, var(--color-surface-2) 60%, transparent);
}

/* --- Process slider: cinema-feel transition between slides */
.process-slide {
  transition:
    opacity 520ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 600ms var(--ease-out);
}
.process-slide:not(.active) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
}
.process-slide.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* --- Network console: cockpit feel */
.network-console {
  transition:
    transform 600ms var(--ease-out),
    box-shadow 600ms var(--ease-out),
    border-color 320ms var(--ease-out);
}
.console-head p::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 12px var(--color-gold);
  animation: cockpitPulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes cockpitPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.55; }
}
.facility-tab {
  position: relative;
  overflow: hidden;
}
.facility-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-gold) 24%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
  pointer-events: none;
}
.facility-tab:hover::after,
.facility-tab.active::after {
  opacity: 1;
}
.facility-tab.active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* --- Stats band: counter feels alive */
.stats-band article {
  position: relative;
  transition: background 380ms var(--ease-out);
}
.stats-band article::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  transform: translateX(-50%);
  transition: width 600ms var(--ease-out) var(--reveal-delay, 0ms);
}
.stats-band article.is-visible::after {
  width: 60%;
}
.stats-band article:hover {
  background: color-mix(in srgb, var(--color-surface-2) 22%, transparent);
}

/* --- Quality difference list: trust-feel reveal */
.difference-list article {
  transition:
    transform 400ms var(--ease-out),
    background 380ms var(--ease-out),
    padding 320ms var(--ease-out);
  border-left: 2px solid transparent;
  padding-left: var(--space-4);
}
.difference-list article:hover {
  border-left-color: var(--color-gold);
  background: color-mix(in srgb, var(--color-surface-2) 22%, transparent);
  transform: translateX(4px);
}

/* --- Trust marquee: subtle parallax on scroll */
.trust-marquee {
  transition: opacity 600ms var(--ease-out);
}
.trust-marquee.is-visible {
  opacity: 1;
}

/* --- Tool cards: precision mode hover */
.tool-grid article {
  transition:
    transform 480ms var(--ease-out),
    box-shadow 480ms var(--ease-out),
    border-color 320ms var(--ease-out);
}
.tool-grid article:hover {
  border-color: color-mix(in srgb, var(--color-gold) 36%, var(--color-line));
}
.spec-summary p {
  transition: background 280ms var(--ease-out), transform 320ms var(--ease-out);
}
.spec-summary p:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
}

/* --- Final CTA: decisive close */
.final-cta {
  transition: transform 680ms var(--ease-out);
}
.final-cta.is-visible {
  animation: ctaArrival 1100ms var(--ease-out) both;
}
@keyframes ctaArrival {
  0% {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* --- Footer arrival */
.site-footer {
  transition: opacity 700ms var(--ease-out);
}
.site-footer.reveal-item {
  opacity: 0;
  transform: translateY(40px);
}
.site-footer.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.footer-wordmark {
  transition: opacity 1100ms var(--ease-out) 200ms, transform 1100ms var(--ease-out) 200ms;
}
.site-footer:not(.is-visible) .footer-wordmark {
  opacity: 0;
  transform: translateX(-50%) translateY(40px);
}

/* --- Section heading wordmark mode (chapter labels) */
.chapter-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.chapter-label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--color-primary-strong);
}

/* --- Premium hover ripple for primary CTAs */
.primary-cta {
  position: relative;
  overflow: hidden;
}
.primary-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cta-x, 50%) var(--cta-y, 50%), color-mix(in srgb, var(--color-gold) 38%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
}
.primary-cta:hover::after {
  opacity: 1;
}

/* --- Scroll progress bar across the top of the page (near header) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 101;
  background: transparent;
  pointer-events: none;
}
.scroll-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-gold) 60%, transparent);
  transition: width 80ms linear;
}

/* --- Ensure header sits above scroll-progress visually */
.site-header { z-index: 102; }

/* --- Reduced-motion respects everything */
@media (prefers-reduced-motion: reduce) {
  .reveal-blur,
  .reveal-rise,
  .reveal-curtain,
  .mask-headline-word > i,
  .chapter-section::before,
  .stats-band article::after,
  .industry-row::before,
  .service-card::after {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  .console-head p::before,
  .scroll-progress::before {
    animation: none !important;
  }
}

/* --- Mobile tweaks for new motion */
@media (max-width: 980px) {
  .chapter-section::before {
    width: clamp(60px, 22vw, 140px);
  }
  .chapter-section .eyebrow,
  .section-heading .eyebrow {
    padding-left: 2.2em;
  }
}
@media (max-width: 640px) {
  .chapter-label {
    font-size: 11px;
  }
  .difference-list article {
    padding-left: var(--space-3);
  }
}

/* ============================================================
   3D IMMERSIVE PASS - chapter perspective, depth planes,
   pointer tilt, header context awareness
   ============================================================ */

/* --- Header context: switches color of header text based on
   the current dark/light stage so nav stays readable on
   cream surfaces without forcing a pill background. --- */
body[data-context="dark"] .site-header:not([data-elevated="true"]) .desktop-nav button,
body[data-context="dark"] .site-header:not([data-elevated="true"]) .brand,
body[data-context="dark"] .site-header:not([data-elevated="true"]) .ghost-control {
  color: rgba(232, 238, 245, 0.86);
}
body[data-context="dark"] .site-header:not([data-elevated="true"]) .desktop-nav button:hover,
body[data-context="dark"] .site-header:not([data-elevated="true"]) .ghost-control:hover {
  color: #E8EEF5;
}

/* Light context: header text turns dark over cream sections so
   nav remains legible without an opaque pill bar. */
body[data-context="light"] .site-header:not([data-elevated="true"]) {
  color: var(--color-text, currentColor);
}
body[data-context="light"] .site-header:not([data-elevated="true"])::before {
  background: linear-gradient(180deg, rgba(232, 238, 245, 0.78), rgba(232, 238, 245, 0));
  opacity: 1;
}
body[data-context="light"] .site-header:not([data-elevated="true"]) .brand,
body[data-context="light"] .site-header:not([data-elevated="true"]) .desktop-nav button {
  color: rgba(10, 16, 24, 0.92);
  text-shadow: 0 1px 12px rgba(232, 238, 245, 0.7);
}
body[data-context="light"] .site-header:not([data-elevated="true"]) .desktop-nav button:hover,
body[data-context="light"] .site-header:not([data-elevated="true"]) .desktop-nav button:focus-visible {
  color: #0F1626;
}
body[data-context="light"] .site-header:not([data-elevated="true"]) .brand-mark {
  fill: #0F1626;
}
body[data-context="light"] .site-header:not([data-elevated="true"]) .ghost-control {
  color: rgba(232, 238, 245, 0.85);
  border-color: rgba(232, 238, 245, 0.18);
  background: rgba(232, 238, 245, 0.4);
}
body[data-context="light"] .site-header:not([data-elevated="true"]) .quote-pill {
  /* keep the CTA strong on cream */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* --- Stage perspective frame.
   Every chapter section establishes a 3D viewport so child
   elements can translate in Z without breaking siblings. --- */
.chapter-section {
  perspective: 1600px;
  perspective-origin: 50% 38%;
  transform-style: preserve-3d;
  /* depth-driven plane sets translateZ via JS scroll ratio */
  --depth: 0;
}

/* Chapter content lifts forward as it enters the viewport.
   Combines with existing .reveal-* classes - additive only. */
.chapter-section .section-heading,
.chapter-section .service-stage,
.chapter-section .cinema-panel,
.chapter-section .quality-grid,
.chapter-section .partner-marks,
.chapter-section .tool-grid,
.chapter-section .industries-stack,
.chapter-section .faq-list,
.chapter-section .contact-grid,
.chapter-section .final-cta-inner {
  transform: translate3d(0, calc(var(--depth) * -8px), calc(var(--depth) * 24px));
  transition: transform 480ms var(--ease-out);
  will-change: transform;
}

/* Soft stage shadow underneath each chapter - gives chapters a
   sense of standing on a depth plane. Hidden on hero/contact. */
.chapter-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(70%, 980px);
  height: 22px;
  pointer-events: none;
  transform: translate3d(-50%, 0, -120px) scaleY(0.9);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(18px);
  opacity: calc(var(--depth) * 0.55);
  transition: opacity 600ms var(--ease-out);
  z-index: 0;
}
.hero::after,
.final-cta::after {
  display: none;
}

/* --- Premium glow surface system.
   Surfaces listen to JS-set --mx / --my (%) for a soft pointer-tracked
   highlight, plus a gentle lift on hover. No 3D rotation. --- */
.glow-surface {
  position: relative;
  transition:
    transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.glow-surface.is-glowing {
  transform: translate3d(0, -2px, 0);
}
.glow-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 238, 245, 0.16),
    rgba(232, 238, 245, 0) 55%
  );
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  mix-blend-mode: screen;
  z-index: 1;
}
.glow-surface.is-glowing::before {
  opacity: 1;
}
.glow-surface > * {
  position: relative;
  z-index: 2;
}

/* Magnetic CTA: pointer subtly attracts the button center. */
.magnetic-cta {
  --magnet-x: 0px;
  --magnet-y: 0px;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.magnetic-cta:hover,
.magnetic-cta:focus-visible {
  box-shadow: 0 12px 38px rgba(232, 238, 245, 0.14);
}

/* Legacy tilt-3d safety net: if any cached scripts still apply this
   class, neutralize the rotateX/Y so cards never appear gimmicky. */
.tilt-3d {
  --tx: 0deg;
  --ty: 0deg;
  --tz: 0px;
  --ts: 1;
  transform: none;
}

/* --- Hero: floor grid receding into depth + floating tags --- */
.hero {
  perspective: 1800px;
}
.hero::before {
  /* Receding perspective floor grid */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 220%;
  height: 60%;
  transform: translateX(-50%) rotateX(72deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(to right, rgba(232, 238, 245, 0.045) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(to bottom, rgba(232, 238, 245, 0.045) 1px, transparent 1px) 0 0 / 96px 96px;
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}
[data-theme="light"] .hero::before {
  background:
    linear-gradient(to right, rgba(232, 238, 245, 0.08) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(to bottom, rgba(232, 238, 245, 0.08) 1px, transparent 1px) 0 0 / 96px 96px;
  opacity: 0.7;
}

/* Hero device hovers above floor with subtle perspective lift */
.hero-device {
  transform-style: preserve-3d;
}

/* --- Network cockpit: depth back-plate + console floats forward --- */
.pinned-story {
  perspective: 2200px;
  perspective-origin: 50% 30%;
}
.pinned-story::before {
  /* Deep back wall - radial vignette in cockpit blue/cream */
  content: "";
  position: absolute;
  inset: 4% 6% 8% 6%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(232, 238, 245, 0.04) 0%, rgba(232, 238, 245, 0) 60%),
    linear-gradient(180deg, rgba(232, 238, 245, 0.025), rgba(232, 238, 245, 0));
  border: 1px solid rgba(232, 238, 245, 0.06);
  border-radius: 28px;
  transform: translate3d(0, calc(var(--depth) * -6px), -180px);
  transition: transform 600ms var(--ease-out);
}
.pinned-story .network-console {
  transform: translate3d(0, calc(var(--depth) * -10px), calc(var(--depth) * 30px));
  transition: transform 520ms var(--ease-out);
  will-change: transform;
}

/* --- Process control room: cinema panel floats with depth, slides stack in Z --- */
.process-cinema {
  perspective: 1900px;
  perspective-origin: 50% 35%;
}
.cinema-panel {
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: translate3d(0, calc(var(--depth) * -6px), calc(var(--depth) * 18px)) rotateX(calc(var(--depth) * -1.2deg));
  transition: transform 540ms var(--ease-out);
}
.process-slide {
  transform-style: preserve-3d;
}
.process-slide:not(.active) {
  transform: translateZ(-40px);
  opacity: 0.0;
}

/* --- Quality command center: certification cards as monoliths --- */
.quality {
  perspective: 1800px;
}

/* --- Partners gallery: floor plane + perspective hover --- */
.partners {
  perspective: 1700px;
}
.partner-marks > li {
  transform-style: preserve-3d;
}

/* --- FAQ: hinged panels open with slight forward tilt --- */
.faq {
  perspective: 1600px;
}
.faq-list > details {
  transform-style: preserve-3d;
  transition: transform 380ms var(--ease-out);
}
.faq-list > details[open] {
  transform: translateZ(14px) rotateX(-0.6deg);
}

/* --- Contact / final CTA: focused conversion stage --- */
.contact,
.final-cta {
  perspective: 1900px;
}
.final-cta-inner {
  transform-style: preserve-3d;
}

/* --- Reduced motion: strip every 3D transform --- */
@media (prefers-reduced-motion: reduce) {
  .chapter-section .section-heading,
  .chapter-section .service-stage,
  .chapter-section .cinema-panel,
  .chapter-section .quality-grid,
  .chapter-section .partner-marks,
  .chapter-section .tool-grid,
  .chapter-section .industries-stack,
  .chapter-section .faq-list,
  .chapter-section .contact-grid,
  .chapter-section .final-cta-inner,
  .pinned-story .network-console,
  .pinned-story::before,
  .cinema-panel,
  .tilt-3d,
  .faq-list > details,
  .faq-list > details[open] {
    transform: none !important;
    transition: none !important;
  }
  .chapter-section::after,
  .hero::before {
    display: none !important;
  }
}

/* --- Coarse pointer / mobile: disable tilt 3D, keep depth subtle --- */
@media (pointer: coarse), (max-width: 980px) {
  .tilt-3d {
    transform: none !important;
  }
  .tilt-3d::before,
  .service-card.tilt-3d::after,
  .tool-grid > article.tilt-3d::after {
    display: none;
  }
  .hero::before {
    opacity: 0.5;
  }

  .chapter-gate {
    min-height: clamp(150px, 42vw, 220px);
    margin: var(--space-10) auto var(--space-4);
    padding: var(--space-5);
  }

  .chapter-gate + .chapter-section {
    padding-top: var(--space-6);
  }

  .pinned-story,
  .services,
  .quality,
  .tools,
  .industries,
  .process-cinema {
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
  }
}

/* Hero floor must not block interactive elements */
.hero > *:not(.hero-bg) {
  position: relative;
  z-index: 1;
}

/* --- Header context refinement: also handle elevated state. ---
   When the page is scrolled and the header is in elevated mode,
   the prior rule swapped to a dark gradient - which becomes
   needlessly heavy over cream sections. Light-context elevated
   header gets a cream translucent treatment with dark text. */
body[data-context="light"] .site-header[data-elevated="true"] {
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.95) 0%, rgba(10, 16, 24, 0.9) 100%);
  border-bottom-color: rgba(232, 238, 245, 0.14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.36);
  color: #E8EEF5;
}
body[data-context="light"] .site-header[data-elevated="true"] .desktop-nav button,
body[data-context="light"] .site-header[data-elevated="true"] .brand,
body[data-context="light"] .site-header[data-elevated="true"] .ghost-control {
  color: rgba(232, 238, 245, 0.88);
}
body[data-context="light"] .site-header[data-elevated="true"] .desktop-nav button:hover,
body[data-context="light"] .site-header[data-elevated="true"] .desktop-nav button:focus-visible {
  color: #E8EEF5;
}
body[data-context="light"] .site-header[data-elevated="true"] .brand-mark {
  fill: #E8EEF5;
}
body[data-context="light"] .site-header[data-elevated="true"] .ghost-control {
  border-color: rgba(232, 238, 245, 0.2);
  background: rgba(232, 238, 245, 0.06);
}

/* Dark context: ensure the existing dark-elevated treatment
   remains active even though [data-theme="dark"] selectors below
   don't kick in (the theme is dark-by-default but body context
   varies per stage). */
body[data-context="dark"] .site-header[data-elevated="true"] .desktop-nav button {
  color: rgba(232, 238, 245, 0.85);
}
body[data-context="dark"] .site-header[data-elevated="true"] .desktop-nav button:hover {
  color: #E8EEF5;
}

html[data-theme="dark"] .site-header[data-elevated="true"],
html[data-theme="dark"] body[data-context="light"] .site-header[data-elevated="true"],
html[data-theme="dark"] body[data-context="dark"] .site-header[data-elevated="true"] {
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.95) 0%, rgba(10, 16, 24, 0.9) 100%);
  border-bottom-color: rgba(232, 238, 245, 0.14);
  color: #E8EEF5;
}

html[data-theme="dark"] .site-header[data-elevated="true"] .brand,
html[data-theme="dark"] .site-header[data-elevated="true"] .desktop-nav button,
html[data-theme="dark"] .site-header[data-elevated="true"] .ghost-control {
  color: rgba(232, 238, 245, 0.88);
}

html[data-theme="dark"] .site-header[data-elevated="true"] .desktop-nav button:hover,
html[data-theme="dark"] .site-header[data-elevated="true"] .desktop-nav button:focus-visible,
html[data-theme="dark"] .site-header[data-elevated="true"] .ghost-control:hover,
html[data-theme="dark"] .site-header[data-elevated="true"] .ghost-control:focus-visible {
  color: #E8EEF5;
}

html[data-theme="dark"] .site-header[data-elevated="true"] .brand-mark {
  fill: #E8EEF5;
}

/* =====================================================================
   COLD-LUXURY OVERRIDES \u2014 Feadship-inspired cold-chain dossier layer
   Appended to express the navy / steel / porcelain art direction without
   rewriting the structural CSS above. Keep this block at the bottom so
   it wins the cascade.
   ===================================================================== */

:root {
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --thread-line: rgba(127, 169, 201, 0.18);
  --thread-line-strong: rgba(127, 169, 201, 0.32);
  --copper-hairline: rgba(185, 138, 74, 0.55);
}

/* ---- Telemetry typography: tiny labels + eyebrows feel like an
   engineering log instead of marketing pills. ---- */
.eyebrow,
.tiny-label,
.slide-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.eyebrow::before,
.tiny-label::before,
.slide-kicker::before {
  content: "";
  width: 1.4em;
  height: 1px;
  background: var(--copper-hairline);
  flex: 0 0 auto;
}

/* The hero eyebrow is a coordinate readout; let it breathe full-width
   without the leading dash. */
.hero .eyebrow {
  color: var(--color-primary-strong);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
}
.hero .eyebrow::before {
  display: none;
}

/* ---- Hero atmosphere refinements ---- */
.hero-chips {
  gap: var(--space-3);
}

.hero-chips span {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  background: rgba(232, 238, 245, 0.04);
  border: 1px solid rgba(232, 238, 245, 0.10);
  color: rgba(232, 238, 245, 0.78);
  text-transform: uppercase;
  font-size: var(--text-xs);
  backdrop-filter: blur(8px);
  box-shadow: none;
  padding: 0 var(--space-3);
  min-height: 32px;
}

/* Hero h1 \u2014 swap the giant Cabinet Grotesk for an editorial serif feel
   via tighter tracking and italic accent on the third line. */
.hero h1 {
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-size: clamp(3.4rem, 8vw, 8.5rem);
  max-width: 14ch;
}

/* ---- Editorial chapter overlay (numbered kicker on chapter sections) ---- */
.chapter-section {
  position: relative;
}

.chapter-section[data-chapter]::before {
  content: attr(data-chapter-roman) " / " attr(data-chapter-name);
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  left: var(--page-gutter, clamp(1.5rem, 5vw, 4rem));
  z-index: 5;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
  opacity: 0.7;
  pointer-events: none;
  white-space: nowrap;
}

/* ---- Editorial photo system (3 anchor frames max across homepage) ---- */
.editorial-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: clamp(2rem, 6vw, 4rem) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 9, 15, 0.20) 0%, rgba(6, 9, 15, 0.55) 100%),
    radial-gradient(ellipse at 30% 30%, rgba(127, 169, 201, 0.12), transparent 60%),
    var(--color-surface);
  border: 1px solid rgba(232, 238, 245, 0.06);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.editorial-photo--portrait { aspect-ratio: 4 / 5; }
.editorial-photo--cinema   { aspect-ratio: 21 / 9; }

.editorial-photo > picture,
.editorial-photo > picture > img,
.editorial-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.editorial-photo > picture {
  display: block;
}

.editorial-photo > picture > img,
.editorial-photo > img {
  object-fit: cover;
  /* Cold cinematic grade: slight desaturation + cool tilt so any source
     image collapses into the navy art direction. */
  filter:
    saturate(0.78)
    contrast(1.04)
    brightness(0.88)
    hue-rotate(-6deg);
  z-index: 0;
}

.editorial-photo::after {
  /* Cold-blue overlay so warm sources blend into the navy field. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 16, 24, 0.0) 40%, rgba(10, 16, 24, 0.7) 100%),
    linear-gradient(135deg, rgba(127, 169, 201, 0.18) 0%, transparent 55%),
    rgba(10, 16, 24, 0.18);
  pointer-events: none;
}

/* Telemetry caption strip rendered over the photo \u2014 mono coordinates,
   temperature, lot number. Renders even when no <img> is present so the
   slot is a usable placeholder. */
.editorial-photo > .photo-caption {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 2vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 238, 245, 0.86);
}

.editorial-photo > .photo-caption strong {
  font-weight: 500;
  color: var(--color-primary-strong);
  letter-spacing: 0.22em;
}

.editorial-photo > .photo-caption .photo-temp {
  margin-left: auto;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Empty-state telemetry watermark when no <img> present \u2014 a
   premium placeholder so the slot is never a flat block. */
.editorial-photo::before,
.editorial-photo.missing-image::before {
  content: attr(data-photo-placeholder);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(232, 238, 245, 0.45);
  background-image:
    linear-gradient(rgba(232, 238, 245, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 238, 245, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

html[lang="fr"] .editorial-photo::before,
html[lang="fr"] .editorial-photo.missing-image::before {
  content: attr(data-photo-placeholder-fr);
}

.editorial-photo.has-image::before {
  opacity: 0;
}

/* ---- Header refinement: ensure dark-context readability and trim the
   menu visual weight (Feadship-light wordmark + spare nav). ---- */
.site-header,
.site-header[data-elevated="true"] {
  color: #E8EEF5;
}

.site-header .brand {
  letter-spacing: 0;
  font-weight: 600;
}

.site-header .brand-mark {
  color: var(--color-primary-strong);
}

.site-header .brand-plate,
.footer-brand .brand-plate {
  color: #E8EEF5;
}

.footer-brand .brand-plate {
  width: clamp(148px, 18vw, 220px);
}

.footer-brand .brand-logo {
  width: clamp(190px, 20vw, 280px);
}

.desktop-nav button,
.desktop-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 238, 245, 0.62);
}

.desktop-nav button:hover,
.desktop-nav a:hover {
  color: #E8EEF5;
}

.desktop-nav button::after,
.desktop-nav a::after {
  background: var(--color-primary-strong);
}

.quote-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(232, 238, 245, 0.22);
  color: #E8EEF5;
  padding: 0 var(--space-4);
  min-height: 38px;
}

.quote-pill:hover {
  background: rgba(232, 238, 245, 0.06);
  border-color: var(--color-primary-strong);
  color: #E8EEF5;
}

.ghost-control {
  background: transparent;
  border-color: rgba(232, 238, 245, 0.22);
  color: rgba(232, 238, 245, 0.78);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
}

/* ---- Footer: cold-graphite, tight, no warm tones ---- */
.site-footer {
  background: linear-gradient(180deg, var(--color-bg) 0%, #06090F 100%);
  border-top: 1px solid rgba(232, 238, 245, 0.08);
  color: rgba(232, 238, 245, 0.72);
}

.site-footer a {
  color: rgba(232, 238, 245, 0.78);
}

.site-footer a:hover {
  color: var(--color-primary-strong);
}

.footer-wordmark {
  color: rgba(232, 238, 245, 0.06);
}

/* ---- Stats band: porcelain numerals, mono labels ---- */
.stats-band strong {
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stats-band span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ---- Partner marks: editorial logo wall on dark, no copper glow ---- */
.partner-marks > li::before {
  background: radial-gradient(
    circle at var(--hover-x, 50%) var(--hover-y, 50%),
    color-mix(in srgb, var(--color-primary) 14%, transparent),
    transparent 60%
  );
}

.partner-logo-frame {
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.04) 0%, rgba(232, 238, 245, 0.01) 100%),
    rgba(10, 16, 24, 0.6);
  border-color: rgba(232, 238, 245, 0.08);
}

.partner-logo-frame strong {
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.partner-rank {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-faint);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
}

/* ---- Process / cinema panel: remove residual warm gradient noise ---- */
.cinema-panel {
  background:
    radial-gradient(circle at 18% 15%, rgba(127, 169, 201, 0.08), transparent 16rem),
    linear-gradient(135deg, rgba(232, 238, 245, 0.04), rgba(232, 238, 245, 0.015)),
    rgba(232, 238, 245, 0.02) !important;
  border: 1px solid rgba(232, 238, 245, 0.08) !important;
}

.cinema-panel::before {
  background: linear-gradient(135deg, rgba(127, 169, 201, 0.12), transparent 44%) !important;
}

/* ---- Tools cards & FAQ: porcelain frames, no warm halo ---- */
.spec-builder-card,
.calculator-card,
.cuts-card {
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.04) 0%, rgba(232, 238, 245, 0.015) 100%),
    rgba(10, 16, 24, 0.5);
  border: 1px solid rgba(232, 238, 245, 0.08);
}

/* ---- Floating quote: hairline outlined, not a filled gold pill ---- */
.floating-quote {
  background: rgba(10, 16, 24, 0.86);
  color: #E8EEF5;
  border: 1px solid rgba(232, 238, 245, 0.18);
  backdrop-filter: blur(14px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.floating-quote i {
  background: rgba(232, 238, 245, 0.10);
  color: var(--color-primary-strong);
}

/* ---- Final CTA: Feadship-light, no warm gradient ---- */
.final-cta {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(127, 169, 201, 0.08), transparent 30rem),
    linear-gradient(180deg, var(--color-bg), var(--color-hero));
}

/* ---- Reduce decorative noise from chapter gates: softer dot grid ---- */
.gate-visual i {
  background: rgba(127, 169, 201, 0.45) !important;
  box-shadow: 0 0 12px rgba(127, 169, 201, 0.35) !important;
}

/* ---- Drawer / quote panel: navy graphite, no warm haze ---- */
.drawer-panel {
  background:
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%) !important;
  border-left: 1px solid rgba(232, 238, 245, 0.10);
}

/* ---- Reduce the quote-pill / primary-cta in dark contexts to feel
   restrained \u2014 tighter type, no oversized shadow. ---- */
.primary-cta {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: 2px;
  padding: 0 var(--space-7, 1.75rem);
  min-height: 50px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.secondary-cta {
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.quote-pill,
.ghost-control {
  border-radius: 2px;
}

/* ---- Mobile clean-ups for editorial photos and chapter labels ---- */
@media (max-width: 720px) {
  .brand-plate {
    width: 116px;
  }
  .editorial-photo {
    margin: clamp(1.25rem, 5vw, 2rem) 0;
  }
  .editorial-photo > .photo-caption {
    font-size: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    line-height: 1.45;
    letter-spacing: 0.14em;
  }
  .editorial-photo > .photo-caption .photo-temp {
    margin-left: 0;
    justify-self: end;
  }
  .chapter-section[data-chapter]::before {
    font-size: 10px;
    letter-spacing: 0.24em;
    top: 1rem;
  }
}

/* End cold-luxury overrides ============================================= */

/* =====================================================================
   LIGHTER MID-BAND PASS - credible cold-graphite for B2B buyers.
   Goal: keep dark cinematic hero/footer/quote-CTA, but lift the
   middle chapter sections (network → contact) to a lighter, brighter
   steel-blue/graphite so cards read clearly and body copy is legible.
   No theme toggle, no light mode, no warm tones reintroduced.
   This block is intentionally last so it wins the cascade.
   ===================================================================== */

:root {
  /* Lighter steel-graphite palette used inside the mid-band only.
     These are not applied globally - they're scoped via the chapter
     selectors below so the hero, final-CTA, cinema-panel, and footer
     keep their existing near-black cinematic surfaces. */
  --mid-bg:        #131C2E;   /* lighter than --color-bg #0A1018 */
  --mid-surface:   #1B2640;   /* lighter than --color-surface #10182A */
  --mid-surface-2: #243352;   /* lighter than --color-surface-2 #172238 */
  --mid-surface-3: #2C3E63;
  --mid-text:      #EEF3F9;   /* slightly brighter porcelain */
  --mid-muted:     #B0C2D6;   /* much brighter than #8AA0B8 - readable on lighter graphite */
  --mid-faint:     #7C8EA6;
  --mid-line:      rgba(232, 238, 245, 0.16);
  --mid-line-strong: rgba(232, 238, 245, 0.22);
}

/* ---- Scope: apply lighter tokens inside middle chapter-sections and
   chapter-gates only. Hero (.hero) and the final-CTA section (#quote)
   are explicitly excluded so they keep the dark cinematic frame. ---- */
.chapter-section:not(.hero):not(#quote),
.chapter-gate {
  --color-surface:   var(--mid-surface);
  --color-surface-2: var(--mid-surface-2);
  --color-surface-3: var(--mid-surface-3);
  --color-text:      var(--mid-text);
  --color-muted:     var(--mid-muted);
  --color-faint:     var(--mid-faint);
  --color-line:      var(--mid-line);
}

/* The cinema-panel inside the Process chapter is a deliberate dark
   centerpiece - re-darken it so the cinematic look survives. */
.process-cinema .cinema-panel {
  --color-surface:   #10182A;
  --color-surface-2: #172238;
  --color-text:      #E8EEF5;
  --color-muted:     #8AA0B8;
  --color-faint:     #5A6B82;
  --color-line:      rgba(232, 238, 245, 0.10);
}

/* ---- Subtle lighter steel-blue band behind the middle of the page.
   Sits behind everything (z-index: -3) and only paints across the
   middle vertical band, so the dark hero at top and dark footer at
   bottom remain unaffected. ---- */
body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 90vh;
  bottom: 60vh;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 0,
      rgba(127, 169, 201, 0.045) 6%,
      rgba(127, 169, 201, 0.075) 50%,
      rgba(127, 169, 201, 0.045) 94%,
      transparent 100%
    );
}

body { position: relative; }

/* ---- Soften the chapter-section radial vignette so the lighter
   surfaces don't get crushed under heavy glow. ---- */
.chapter-section:not(.hero):not(#quote)::after {
  filter: blur(28px);
  opacity: 0;
}

.chapter-section:not(.hero):not(#quote).in-view::after {
  opacity: 0.55;
  filter: blur(8px);
}

/* ---- Lift body copy brightness inside middle sections.
   The default p { color: var(--color-muted) } now resolves to the
   brighter --mid-muted, but bump line-height and weight slightly so
   long copy stays readable on the lighter backdrop. ---- */
.chapter-section:not(.hero):not(#quote) p,
.chapter-gate p {
  color: var(--color-muted);
  line-height: 1.65;
}

/* Brighter porcelain on body-text emphasis nodes that previously
   relied on var(--color-text) - now resolves to #EEF3F9. */
.chapter-section:not(.hero):not(#quote) li,
.chapter-section:not(.hero):not(#quote) dd,
.chapter-section:not(.hero):not(#quote) summary,
.chapter-section:not(.hero):not(#quote) figcaption {
  color: var(--color-text);
}

/* ---- Cards & panels inside the mid-band: lighter translucent fills
   so they read as floating glass over the lighter steel band rather
   than as flat near-black blocks. We layer a soft white tint over the
   already-lifted --color-surface. ---- */
.chapter-section:not(.hero):not(#quote) .stats-band,
.chapter-section:not(.hero):not(#quote) .network-console,
.chapter-section:not(.hero):not(#quote) .service-card,
.chapter-section:not(.hero):not(#quote) .tool-grid article,
.chapter-section:not(.hero):not(#quote) .industry-row,
.chapter-section:not(.hero):not(#quote) .contact-form,
.chapter-section:not(.hero):not(#quote) .facility-detail,
.chapter-section:not(.hero):not(#quote) .spec-summary p,
.chapter-section:not(.hero):not(#quote) .calc-output,
.chapter-gate {
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.045) 0%, rgba(232, 238, 245, 0.015) 100%),
    var(--color-surface);
  border-color: var(--mid-line-strong);
}

/* Slightly stronger border on hover-able cards so silhouette reads. */
.chapter-section:not(.hero):not(#quote) .service-card,
.chapter-section:not(.hero):not(#quote) .tool-grid article {
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* Spec-builder / calculator / cuts cards (these used a darker rgba
   override earlier in the file with rgba(10,16,24,0.5)). Replace with
   a lighter porcelain glass fill so they harmonize with the mid band. */
.chapter-section:not(.hero):not(#quote) .spec-builder-card,
.chapter-section:not(.hero):not(#quote) .calculator-card,
.chapter-section:not(.hero):not(#quote) .cuts-card {
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.06) 0%, rgba(232, 238, 245, 0.02) 100%),
    rgba(36, 51, 82, 0.78);
  border-color: var(--mid-line-strong);
}

/* Inputs/selects inside mid-band - they previously rendered on
   --color-bg #0A1018, which now contrasts oddly with the lighter
   surface. Use a lighter input fill that matches the mid band. */
.chapter-section:not(.hero):not(#quote) input,
.chapter-section:not(.hero):not(#quote) select,
.chapter-section:not(.hero):not(#quote) textarea,
.chapter-section:not(.hero):not(#quote) .contact-field input,
.chapter-section:not(.hero):not(#quote) .contact-field select,
.chapter-section:not(.hero):not(#quote) .contact-field textarea {
  background: rgba(15, 22, 38, 0.72);
  border-color: var(--mid-line-strong);
  color: var(--color-text);
}

.chapter-section:not(.hero):not(#quote) input::placeholder,
.chapter-section:not(.hero):not(#quote) textarea::placeholder {
  color: var(--mid-faint);
}

/* Re-tone partner-marks frame so it sits naturally on the lighter band. */
.chapter-section:not(.hero):not(#quote) .partner-logo-frame {
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.05) 0%, rgba(232, 238, 245, 0.018) 100%),
    rgba(27, 38, 64, 0.6);
  border-color: var(--mid-line-strong);
}

/* FAQ rows: keep restraint but make divider lines a touch stronger. */
.chapter-section:not(.hero):not(#quote) .faq-row {
  border-bottom-color: var(--mid-line-strong);
}

.chapter-section:not(.hero):not(#quote) .faq-row[open] {
  background: rgba(232, 238, 245, 0.025);
}

/* ---- Soften the body::before stage tint so the brighter mid-band
   isn't overwhelmed by warm copper bleed. ---- */
body::before {
  opacity: 0.32;
}

/* ---- Soften the chapter-gate radial halos a touch - they were a
   strong copper/teal wash on dark; on the lighter band they read
   too candy. ---- */
.chapter-gate::before {
  opacity: 0.5;
}

.chapter-gate::after {
  filter: blur(14px);
  opacity: 0.7;
}

/* ---- Section headings & eyebrows inside mid-band: bump heading
   color to full porcelain so it pops against the lighter graphite. ---- */
.chapter-section:not(.hero):not(#quote) .section-heading h2,
.chapter-section:not(.hero):not(#quote) .story-copy h2,
.chapter-section:not(.hero):not(#quote) .contact-intro h2 {
  color: #F5F8FC;
}

/* Stats-band numerals brighter on the lighter surface. */
.chapter-section:not(.hero):not(#quote) .stats-band strong {
  color: #F5F8FC;
}

/* ---- Policy pages: they share the same chapter-section vocabulary
   in some places but use .policy-* containers. Lift those too so the
   privacy/terms pages don't feel like a different (darker) site. ---- */
.policy-main {
  --color-surface:   var(--mid-surface);
  --color-surface-2: var(--mid-surface-2);
  --color-text:      var(--mid-text);
  --color-muted:     var(--mid-muted);
  --color-faint:     var(--mid-faint);
  --color-line:      var(--mid-line);
}

.policy-main .policy-card,
.policy-main .policy-toc,
.policy-main .policy-hero {
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.045) 0%, rgba(232, 238, 245, 0.015) 100%),
    var(--color-surface);
  border-color: var(--mid-line-strong);
}

/* ---- Explicit guards: keep hero, final-CTA, footer, drawer, and
   header in their original deep navy. The selectors below restate
   tokens at the original values so even if a future edit lifts the
   :root, these surfaces stay near-black. ---- */
.hero,
#quote,
.site-footer,
.drawer-panel,
.process-cinema .cinema-panel {
  --color-surface:   #10182A;
  --color-surface-2: #172238;
  --color-text:      #E8EEF5;
  --color-muted:     #8AA0B8;
  --color-faint:     #5A6B82;
  --color-line:      rgba(232, 238, 245, 0.10);
}

/* ---- Reduced-motion: keep the mid-band band visible (it's a static
   gradient already), but make sure no opacity transitions surprise
   users who request reduced motion. ---- */
@media (prefers-reduced-motion: reduce) {
  .chapter-section:not(.hero):not(#quote)::after,
  .chapter-section:not(.hero):not(#quote).in-view::after {
    transition: none;
  }
}

/* End lighter mid-band pass ============================================ */

/* ============================================================
   Network section redesign - editorial cold-chain atlas
   Replaces the prior software-console presentation
   with an editorial procurement-dossier card. Keeps all class
   hooks (.facility-tab[data-facility], [data-facility-title],
   [data-facility-specialty], [data-facility-best],
   [data-facility-badges]) intact so app.js behavior is preserved.
   ============================================================ */

/* Neutralize the old cockpit treatments inside the Network section
   only - leave the rest of the site untouched. */
#network .network-console,
#network .console-head,
#network .console-head p::before {
  /* No-op selectors retained for safety: the old markup is gone
     in this section. Prevents any leftover override from previous
     sticky pinning or pulsing dot from cascading into the redesign. */
}

/* The atlas card replaces .network-console inside #network */
#network .network-atlas {
  position: relative;
  top: auto;
  align-self: start;
  display: grid;
  gap: clamp(var(--space-5), 2.4vw, var(--space-8));
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border: 1px solid var(--mid-line-strong, var(--color-line));
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse at 88% -10%, color-mix(in srgb, var(--color-primary-strong) 12%, transparent), transparent 55%),
    radial-gradient(ellipse at -10% 110%, color-mix(in srgb, var(--color-gold) 9%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(232, 238, 245, 0.045) 0%, rgba(232, 238, 245, 0.015) 100%),
    var(--color-surface);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
  overflow: hidden;
  /* Avoid touching viewport edges on tight viewports */
  max-width: 100%;
}

#network .network-atlas::before {
  /* Editorial hairline grid - extremely subtle, evokes a procurement
     dossier rather than a CLI. Hidden on coarse pointer/reduced motion. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(232, 238, 245, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232, 238, 245, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 35%, transparent 75%);
  opacity: 0.55;
  z-index: 0;
}

#network .network-atlas > * {
  position: relative;
  z-index: 1;
}

/* --- Atlas head: editorial label + cold-chain meta --- */
#network .atlas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: clamp(var(--space-4), 2vw, var(--space-6));
  border-bottom: 1px solid var(--mid-line-strong, var(--color-line));
}

#network .atlas-head-copy {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

#network .atlas-eyebrow {
  margin: 0;
  color: var(--color-primary-strong);
  font-family: var(--font-sans, inherit);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#network .atlas-title {
  margin: 0;
  color: #F5F8FC;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

#network .atlas-meta {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  text-align: right;
  flex-shrink: 0;
}

#network .atlas-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-3);
}

#network .atlas-meta-label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#network .atlas-meta-value {
  color: #F5F8FC;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

/* --- Ledger: facility list reads as a dossier index --- */
#network .atlas-ledger {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mid-line-strong, var(--color-line));
  /* Override prior .facility-tabs grid so the redesign owns layout */
  grid-template-columns: 1fr;
}

#network .atlas-ledger-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(var(--space-3), 1.6vw, var(--space-5));
  padding: clamp(var(--space-3), 1.4vw, var(--space-4)) var(--space-2);
  border-bottom: 1px solid var(--mid-line-strong, var(--color-line));
  position: relative;
  transition:
    background 320ms var(--ease-out),
    transform 320ms var(--ease-out);
}

#network .atlas-ledger-row,
#network.in-view .atlas-ledger-row,
.in-view #network .atlas-ledger-row,
#network .network-atlas.is-visible .atlas-ledger-row {
  opacity: 1;
  transform: none;
}

#network .atlas-ledger-row .atlas-dossier {
  grid-column: 1 / -1;
  margin-top: clamp(var(--space-3), 1.5vw, var(--space-4));
}

#network .atlas-ledger-row::before {
  /* Active row marker - a left-edge thin bar, very Apple-like */
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary-strong), var(--color-gold));
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: 50% 50%;
  transition:
    opacity 320ms var(--ease-out),
    transform 380ms var(--ease-out);
  border-radius: 2px;
}

#network .atlas-ledger-row:hover {
  background: rgba(232, 238, 245, 0.02);
}

#network .atlas-ledger-row:has(.facility-tab.active) {
  background: rgba(232, 238, 245, 0.035);
}

#network .atlas-ledger-row:has(.facility-tab.active)::before {
  opacity: 1;
  transform: scaleY(1);
}

#network .atlas-ledger-num {
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 2ch;
}

#network .atlas-ledger-row:has(.facility-tab.active) .atlas-ledger-num {
  color: var(--color-primary-strong);
}

/* Facility tab as plain editorial label - JS replaces .textContent
   on language toggle, so keep contents simple. */
#network .atlas-ledger .facility-tab {
  /* Reset the older pill / cockpit treatment within the redesign */
  min-height: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #E8EEF5;
  text-align: left;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 280ms var(--ease-out), transform 280ms var(--ease-out);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

/* Strip the old cockpit gold radial glow on the tab inside the atlas */
#network .atlas-ledger .facility-tab::after {
  display: none;
}

#network .atlas-ledger .facility-tab:hover {
  background: transparent;
  color: #F5F8FC;
  transform: none;
}

#network .atlas-ledger .facility-tab:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

#network .atlas-ledger .facility-tab.active {
  color: #F5F8FC;
  background: transparent;
  box-shadow: none;
  transform: none;
}

#network .atlas-ledger-spec {
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

#network .atlas-ledger-row:has(.facility-tab.active) .atlas-ledger-spec {
  color: #C9D6E2;
}

/* --- Dossier panel: the active facility's expanded record --- */
#network .atlas-dossier {
  /* Override the inherited .facility-detail grid + gold radial */
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.35fr);
  grid-template-areas:
    "head specialty"
    "best badges";
  align-items: start;
  gap: clamp(var(--space-4), 1.8vw, var(--space-6));
  margin: 0;
  padding: clamp(var(--space-4), 2vw, var(--space-6));
  border: 1px solid var(--mid-line-strong, var(--color-line));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(232, 238, 245, 0.04), rgba(232, 238, 245, 0.012)),
    rgba(16, 24, 42, 0.6);
  isolation: isolate;
  overflow: visible;
  contain: none;
  clip-path: none;
}

#network .atlas-dossier-head {
  grid-area: head;
  display: grid;
  gap: var(--space-1);
}

#network .atlas-dossier-head h3 {
  margin: 0;
  color: #F5F8FC;
  /* Override the loud --text-2xl that .facility-detail h3 inherited */
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

#network .atlas-dossier .tiny-label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#network .atlas-dossier-specialty {
  grid-area: specialty;
  margin: 0;
  color: #DDE4EC;
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 56ch;
}

#network .atlas-dossier-best {
  grid-area: best;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid color-mix(in srgb, var(--color-gold) 80%, transparent);
  background: rgba(185, 138, 74, 0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

#network .atlas-dossier-badges {
  grid-area: badges;
  align-self: end;
}

#network .atlas-dossier-best p:not(.tiny-label) {
  margin: 0;
  color: #F0E6D6;
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 50ch;
}

#network .atlas-dossier-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--mid-line-strong, var(--color-line));
}

#network .atlas-dossier-badges span {
  /* Refine the existing facility-badges chip treatment for this section */
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--mid-line-strong, var(--color-line));
  border-radius: var(--radius-full);
  color: #C9D6E2;
  background: rgba(232, 238, 245, 0.025);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Foot: subtle "alive" cold-chain pulse, not a cockpit telemetry --- */
#network .atlas-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--mid-line-strong, var(--color-line));
  color: var(--color-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#network .atlas-foot-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#network .atlas-foot-pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-strong);
  opacity: 0.4;
  animation: atlasPulse 2.6s var(--ease-in-out) infinite;
}

#network .atlas-foot-pulse i:nth-child(2) { animation-delay: 0.4s; }
#network .atlas-foot-pulse i:nth-child(3) {
  animation-delay: 0.8s;
  background: var(--color-gold);
}

@keyframes atlasPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

#network .atlas-foot-text {
  text-align: right;
  /* Avoid edge-touching on tight widths */
  max-width: 32ch;
}

/* --- Keep the atlas immediately usable; subtle child transitions do the polish. --- */
#network .network-atlas {
  opacity: 1;
  transform: none;
}

#network .atlas-ledger-row {
  transition:
    transform 520ms var(--ease-out),
    background 320ms var(--ease-out);
}

/* Fallback: if the in-view system never fires (e.g. scripts blocked),
   reveal the atlas after the document is loaded. */
.no-js #network .network-atlas,
.no-js #network .atlas-ledger-row {
  opacity: 1;
  transform: none;
}

/* --- Responsive: collapse meta column, stack head, keep edges safe --- */
@media (max-width: 980px) {
  #network .network-atlas {
    position: static;
    padding: clamp(var(--space-5), 4.5vw, var(--space-7));
  }
  #network .atlas-head {
    flex-direction: column;
    gap: var(--space-4);
  }
  #network .atlas-meta {
    text-align: left;
    width: 100%;
  }
  #network .atlas-meta-row {
    justify-content: flex-start;
  }
  #network .atlas-ledger-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  #network .atlas-ledger-spec {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: calc(2ch + var(--space-3));
    max-width: 100%;
    white-space: normal;
  }
  #network .atlas-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  #network .atlas-foot-text {
    text-align: left;
    max-width: 100%;
  }

  #network .atlas-dossier {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "specialty"
      "best"
      "badges";
  }
}

@media (max-width: 560px) {
  #network .network-atlas {
    padding: var(--space-5);
  }
  #network .atlas-dossier {
    padding: var(--space-5);
  }
}

/* --- Reduced motion: drop transforms and pulse --- */
@media (prefers-reduced-motion: reduce) {
  .ticker-rotator span {
    animation: none;
    transform: none;
  }

  .ticker-rotator span:first-child {
    opacity: 1;
  }

  #network .network-atlas,
  #network .atlas-ledger-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #network .atlas-foot-pulse i {
    animation: none;
    opacity: 0.7;
  }
  #network .network-atlas::before {
    display: none;
  }
}

/* --- Coarse pointer: drop the subtle hairline grid for clarity --- */
@media (pointer: coarse) {
  #network .network-atlas::before {
    opacity: 0.3;
  }
}

/* End Network atlas redesign ============================================ */

/* ============================================================
   Process section: align the heading with the rest of the site.
   Other major section headings (#services, #quality, #partners,
   #tools, #industries, #faq, #contact) sit at the established
   page-gutter line via their container pattern:
     width: min(1260px, calc(100% - (var(--page-gutter) * 2)))
   The Process section wraps its content in .cinema-panel which
   adds its own var(--space-12) interior padding, pushing the H2
   ~48px past that gutter line. We move the panel's horizontal
   padding off the panel itself and onto the body content only
   so the eyebrow + H2 sit flush with the panel's outer edge -
   which already aligns with the section's content gutter.
   ============================================================ */

.process-cinema .cinema-panel {
  /* Keep the whole guided process safely inside the rounded panel.
     The previous zero-inline-padding alignment fix made the eyebrow
     and heading feel glued to the top-left corner in real browsers. */
  padding: clamp(var(--space-8), 4vw, var(--space-12));
}

.process-cinema .cinema-panel > .eyebrow,
.process-cinema .cinema-panel > h2,
.process-cinema .cinema-panel > .process-showcase {
  margin-inline: 0;
  padding-inline: 0;
}

/* Tighter screens: smaller panel padding, keep heading aligned. */
@media (max-width: 980px) {
  .process-cinema .cinema-panel {
    padding: clamp(var(--space-6), 5vw, var(--space-8));
  }
  .process-cinema .cinema-panel > .process-showcase {
    padding-inline: 0;
  }
}

@media (max-width: 640px) {
  .process-cinema .cinema-panel > .process-showcase {
    padding-inline: 0;
  }
}

/* ============================================================
   Chapter overlay marker: fix the inherited reveal transform.
   The earlier .chapter-section::before rule (chapter atmosphere
   seam, line ~3623) sets a translateX(-50%) translateY scaleX
   transform. The .chapter-section[data-chapter]::before rule
   replaces that pseudo's content with the chapter marker text
   ("II / Network", "02 / Network" after this pass) but does NOT
   reset the transform - leaving the marker text shifted to the
   left edge of the viewport. Reset the transform explicitly so
   the marker text honors its `left: var(--page-gutter)` anchor.
   This also re-enables the editorial top-margin of the marker.
   ============================================================ */

.chapter-section[data-chapter]::before {
  /* Override the seam transform from .chapter-section::before */
  transform: none;
}

.chapter-section[data-chapter].in-view::before {
  /* Override the in-view seam transform too - keep the marker still */
  transform: none;
}

/* End Process heading + chapter marker fixes ===================== */

/* ============================================================
   Compact closing chapters + reliable reveals
   FAQ, quote, and footer are shorter utility sections. They should
   not hold a full empty viewport or depend on a delayed curtain
   reveal that can leave the user staring at blank atmosphere.
   ============================================================ */

#faq.chapter-section,
#contact.chapter-section,
#quote.chapter-section {
  min-height: auto;
}

#faq.chapter-section {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}

#contact.chapter-section {
  padding-block: clamp(var(--space-10), 7vw, var(--space-18));
}

#quote.final-cta {
  min-height: clamp(420px, 58vh, 560px);
  margin-block: clamp(var(--space-8), 6vw, var(--space-14));
}

#faq .section-heading.reveal-item,
#faq .faq-list.reveal-item,
#faq .faq-row.reveal-item,
#quote.final-cta.reveal-item,
.site-footer.reveal-item {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
}

#faq .faq-row {
  clip-path: none;
}

.site-footer:not(.is-visible) .footer-wordmark {
  opacity: 0.18;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Mobile chapter typography hardening
   Phone screens need a separate rhythm: chapter labels get their
   own protected row, then titles scale to the viewport instead of
   inheriting the theatrical desktop sizes.
   ============================================================ */

@media (max-width: 720px) {
  html {
    scroll-padding-top: 6.25rem;
  }

  .chapter-section {
    scroll-margin-top: 6.25rem;
  }

  .chapter-section[data-chapter]:not(.hero) {
    padding-top: clamp(5rem, 16vw, 6.75rem) !important;
  }

  .chapter-gate + .chapter-section[data-chapter]:not(.hero) {
    padding-top: clamp(5rem, 16vw, 6.75rem) !important;
  }

  .chapter-section[data-chapter]::before,
  .chapter-section[data-chapter].in-view::before {
    display: none;
    content: none;
  }

  .chapter-section .eyebrow,
  .section-heading .eyebrow,
  .story-copy .eyebrow,
  .contact-intro .eyebrow,
  .cinema-panel .eyebrow,
  .tool-head .eyebrow {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.20em;
    overflow-wrap: anywhere;
  }

  .story-copy h2,
  .section-heading h2,
  .contact-intro h2,
  .cinema-panel h2,
  .final-cta h2 {
    max-width: min(100%, 12ch);
    font-size: clamp(2.45rem, 10.5vw, 3.5rem) !important;
    line-height: 1.02;
    letter-spacing: -0.028em;
    text-wrap: balance;
    overflow-wrap: normal;
  }

  .reveal-item.section-heading,
  .reveal-item.story-copy,
  .reveal-item.contact-intro,
  .reveal-item.final-cta,
  .section-heading.reveal-item,
  .story-copy.reveal-item,
  .contact-intro.reveal-item,
  .final-cta.reveal-item,
  .story-copy h2,
  .section-heading h2,
  .contact-intro h2,
  .cinema-panel h2,
  .final-cta h2,
  .mask-headline,
  .mask-headline.reveal-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .mask-headline-word,
  .mask-headline-word > i,
  .in-view .mask-headline-word > i,
  .mask-headline.is-visible .mask-headline-word > i,
  .reveal-item.is-visible .mask-headline-word > i {
    display: inline-block !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .story-copy {
    position: static;
    gap: var(--space-4);
  }

  .section-heading,
  .story-copy,
  .contact-intro {
    width: 100%;
  }

  .process-cinema .cinema-panel {
    border-radius: clamp(1.35rem, 8vw, 2rem);
  }

  .floating-quote {
    display: none;
  }
}

@media (max-width: 420px) {
  .story-copy h2,
  .section-heading h2,
  .contact-intro h2,
  .cinema-panel h2,
  .final-cta h2 {
    font-size: clamp(2.05rem, 8.8vw, 2.65rem) !important;
    max-width: 11.5ch;
  }

  .chapter-section[data-chapter]::before,
  .chapter-section[data-chapter].in-view::before {
    letter-spacing: 0.20em;
  }
}

/* ============================================================
   Process module polish
   The process section should read like a premium workflow module,
   not a mostly empty cinema wall. These overrides tighten the
   desktop/tablet canvas and keep edge UI from clipping into it.
   ============================================================ */

#process.process-cinema {
  min-height: auto;
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
}

#process.chapter-section[data-chapter]::before,
#process.chapter-section[data-chapter].in-view::before {
  display: none;
  content: none;
}

#process .cinema-panel {
  width: min(1120px, 100%);
  min-height: auto;
  align-content: start;
  gap: clamp(var(--space-4), 1.8vw, var(--space-6));
  padding: clamp(var(--space-5), 2.4vw, var(--space-8));
}

#process .cinema-panel > .eyebrow {
  margin-bottom: calc(var(--space-2) * -1);
}

#process .cinema-panel > h2 {
  max-width: 17ch;
  font-size: clamp(2.55rem, 3.35vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
}

#process .process-showcase {
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(var(--space-4), 1.8vw, var(--space-6));
  margin-top: 0;
}

#process .process-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  justify-content: stretch;
}

#process .process-index {
  min-width: 152px;
}

#process .process-index i {
  width: clamp(44px, 5vw, 76px);
}

#process .process-slider-controls {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

#process .process-step {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xl);
}

#process .process-step span {
  width: 28px;
  height: 28px;
  margin-bottom: 0;
}

#process .process-step strong {
  font-size: clamp(0.78rem, 0.9vw, 0.94rem);
}

#process .process-viewport {
  min-height: clamp(220px, 16vw, 250px);
  border-radius: var(--radius-2xl);
  clip-path: inset(0 round var(--radius-2xl));
}

#process .process-slide {
  grid-template-rows: auto auto auto;
  gap: clamp(var(--space-3), 1.2vw, var(--space-4));
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}

#process .process-slide h3 {
  max-width: 16ch;
  font-size: clamp(2.15rem, 2.9vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
}

#process .process-slide p {
  max-width: 52ch;
}

#process .process-progress {
  left: clamp(var(--space-7), 4vw, var(--space-11));
  right: clamp(var(--space-7), 4vw, var(--space-11));
  bottom: clamp(var(--space-5), 3vw, var(--space-8));
}

body[data-stage="process"] .floating-quote {
  opacity: 0;
  pointer-events: none;
  transform: translateY(140%);
}

.experience-rail button.active strong {
  max-width: 0;
  opacity: 0;
}

.experience-rail button:hover strong {
  max-width: 140px;
  opacity: 1;
}

@media (max-width: 980px) {
  #process .process-showcase {
    grid-template-columns: 1fr;
  }

  #process .process-copy {
    grid-template-columns: 1fr;
  }

  #process .process-slider-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #process .process-viewport {
    min-height: clamp(360px, 58vw, 430px);
  }
}

@media (max-width: 720px) {
  #process.process-cinema {
    padding-block: clamp(var(--space-8), 12vw, var(--space-12));
  }

  #process .cinema-panel {
    gap: var(--space-7);
    padding: var(--space-6);
  }

  #process .cinema-panel > h2 {
    max-width: 10.5ch;
    font-size: clamp(2.25rem, 9.6vw, 3rem) !important;
    line-height: 1;
    letter-spacing: -0.026em;
  }

  #process .process-showcase {
    margin-top: 0;
  }

  #process .process-copy {
    gap: var(--space-5);
  }

  #process .process-slider-controls {
    grid-template-columns: 1fr;
  }

  #process .process-step {
    min-height: 64px;
    grid-template-columns: auto 1fr;
    border-radius: var(--radius-2xl);
  }

  #process .process-viewport {
    min-height: clamp(330px, 86vw, 390px);
  }

  #process .process-slide {
    padding: var(--space-6);
  }

  #process .process-slide h3 {
    max-width: 9.6ch;
    font-size: clamp(2.35rem, 12vw, 3.35rem);
    line-height: 0.95;
    letter-spacing: -0.048em;
  }
}

/* ============================================================
   Uniform section title system
   Use one disciplined stack everywhere: eyebrow, fixed gap, title.
   The separate chapter-number pseudo layer was visually drifting
   between sections and colliding with headings, so it is removed.
   ============================================================ */

.chapter-section[data-chapter]::before,
.chapter-section[data-chapter].in-view::before {
  display: none !important;
  content: none !important;
}

.chapter-section .eyebrow,
.section-heading .eyebrow,
.story-copy .eyebrow,
.contact-intro .eyebrow,
.cinema-panel .eyebrow,
.tool-head .eyebrow {
  margin: 0;
}

.section-heading,
.story-copy,
.contact-intro {
  gap: clamp(var(--space-4), 1.2vw, var(--space-5));
}

#process .cinema-panel {
  gap: clamp(var(--space-4), 1.2vw, var(--space-5));
}

#process .cinema-panel > .eyebrow {
  margin: 0;
}

.story-copy > .eyebrow + h2,
.section-heading > .eyebrow + h2,
.contact-intro > .eyebrow + h2,
#process .cinema-panel > .eyebrow + h2 {
  margin-top: 0;
}

.story-copy h2,
.section-heading h2,
.contact-intro h2,
.cinema-panel h2 {
  font-size: clamp(3.2rem, 4.8vw, 5.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.section-heading h2,
.section-heading.narrow h2,
.story-copy h2,
.contact-intro h2 {
  max-width: 12.5ch;
}

#process .cinema-panel > h2 {
  font-size: clamp(3.2rem, 4.8vw, 5.9rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 12.5ch;
}

@media (max-width: 980px) {
  .story-copy h2,
  .section-heading h2,
  .contact-intro h2,
  .cinema-panel h2,
  #process .cinema-panel > h2 {
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: 0.99;
    letter-spacing: -0.034em;
  }
}

@media (max-width: 720px) {
  .chapter-section .eyebrow,
  .section-heading .eyebrow,
  .story-copy .eyebrow,
  .contact-intro .eyebrow,
  .cinema-panel .eyebrow,
  .tool-head .eyebrow {
    margin-bottom: var(--space-3);
  }

  .story-copy h2,
  .section-heading h2,
  .contact-intro h2,
  .cinema-panel h2,
  #process .cinema-panel > h2 {
    font-size: clamp(2.2rem, 9.4vw, 3rem) !important;
    line-height: 1.02;
    letter-spacing: -0.026em;
    max-width: 11.5ch;
  }
}

/* ============================================================
   Clean section transitions
   Replace oversized handoff cards with compact Apple-like transition
   strips and remove the eyebrow strike line that made labels look
   crossed out.
   ============================================================ */

.chapter-section .eyebrow,
.section-heading .eyebrow,
.story-copy .eyebrow,
.contact-intro .eyebrow,
.cinema-panel .eyebrow,
.tool-head .eyebrow {
  padding-left: 0 !important;
  gap: 0;
}

.chapter-section .eyebrow::before,
.section-heading .eyebrow::before,
.story-copy .eyebrow::before,
.contact-intro .eyebrow::before,
.cinema-panel .eyebrow::before,
.tool-head .eyebrow::before {
  display: none !important;
  content: none !important;
}

.chapter-gate {
  width: min(1120px, calc(100% - (var(--page-gutter) * 2)));
  min-height: clamp(4.75rem, 7vw, 6rem);
  margin-block: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-2), 2vw, var(--space-5));
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: end;
  padding: clamp(var(--space-5), 2.4vw, var(--space-6)) clamp(var(--space-5), 3vw, var(--space-8)) clamp(var(--space-5), 2.4vw, var(--space-6));
  border-radius: clamp(1.25rem, 2.4vw, 2rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 58%, transparent), color-mix(in srgb, var(--color-surface-2) 32%, transparent)),
    color-mix(in srgb, var(--color-bg) 72%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(232, 238, 245, 0.08),
    0 18px 54px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(18px);
}

.chapter-gate::before {
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--stage-glow, var(--color-primary)) 16%, transparent), transparent 18rem),
    linear-gradient(90deg, color-mix(in srgb, var(--color-line) 42%, transparent), transparent 42%);
  opacity: 0.72;
}

.chapter-gate::after {
  inset: auto clamp(var(--space-5), 3vw, var(--space-8)) var(--space-3) clamp(var(--space-5), 3vw, var(--space-8));
  width: auto;
  height: 1px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--stage-glow, var(--color-primary)) 62%, transparent), transparent 78%);
  filter: none;
  opacity: 0.7;
}

.chapter-gate + .chapter-section {
  padding-top: clamp(var(--space-6), 4vw, var(--space-10));
}

.gate-copy {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
  gap: clamp(var(--space-4), 2.4vw, var(--space-7));
}

.gate-copy span {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--color-primary-strong) 88%, #E8EEF5);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.gate-copy strong {
  max-width: none;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.3vw, 1.35rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-transform: none;
  color: color-mix(in srgb, var(--color-text) 93%, transparent);
  white-space: normal;
}

.gate-visual {
  position: absolute;
  inset: auto clamp(var(--space-5), 3vw, var(--space-8)) var(--space-4) clamp(var(--space-5), 3vw, var(--space-8));
  width: auto;
  min-height: 2px;
  height: 2px;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  background-size: auto;
  box-shadow: none;
  overflow: hidden;
}

.gate-visual::before,
.gate-visual i,
.gate-visual i::after {
  display: none !important;
}

.gate-visual::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0 auto 0 0;
  width: min(34%, 280px);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 64%, transparent), color-mix(in srgb, var(--color-gold) 72%, transparent));
  transform-origin: left;
  animation: gateAnswer 3.6s var(--ease-in-out) infinite;
}

.chapter-gate .gate-copy.reveal-rise {
  filter: none;
  transform: translate3d(0, var(--space-2), 0) scale(0.995);
  transition:
    opacity 520ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 620ms var(--ease-out) var(--reveal-delay, 0ms);
}

.chapter-gate .gate-copy.reveal-rise.is-visible {
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.chapter-gate .gate-visual.reveal-blur {
  filter: blur(6px) saturate(0.9) brightness(0.94);
  transform: translate3d(0, var(--space-3), 0) scale(0.985);
  transition:
    opacity 560ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 680ms var(--ease-out) var(--reveal-delay, 0ms),
    filter 600ms var(--ease-out) var(--reveal-delay, 0ms);
}

.chapter-gate .gate-visual.reveal-blur.is-visible {
  filter: blur(0) saturate(1) brightness(1);
  transform: translate3d(0, 0, 0) scale(1);
}

.chapter-gate .gate-visual,
.gate-network .gate-visual,
.gate-services .gate-visual,
.gate-process .gate-visual,
.gate-quality .gate-visual,
.gate-tools .gate-visual,
.gate-quote .gate-visual {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 2px !important;
  height: 2px !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--color-text) 10%, transparent) !important;
  box-shadow: none !important;
}

.chapter-gate .mask-headline-word {
  display: inline;
  vertical-align: baseline;
}

.chapter-gate .mask-headline-word > i {
  display: inline;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 720px) {
  .chapter-gate {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: var(--space-4) var(--space-4) var(--space-5);
    margin-block: var(--space-6) var(--space-2);
    margin-inline: auto;
  }

  .gate-copy {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .gate-copy strong {
    font-size: clamp(1rem, 4.5vw, 1.18rem);
    letter-spacing: -0.01em;
  }

  .gate-visual {
    inset-inline: var(--space-4);
    bottom: var(--space-3);
    width: auto;
    height: 2px;
    min-height: 2px;
  }

  .chapter-gate .gate-copy.reveal-rise {
    filter: none;
    transform: translate3d(0, var(--space-2), 0) scale(0.995);
  }
}

/* ---- Retailer-logo pass: show authorized buyer marks clearly without
   letting them overpower the quiet, cold-luxury partner section. ---- */
.partner-logo-frame {
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(226, 232, 240, 0.92) 100%) !important;
  border-color: rgba(248, 250, 252, 0.28) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.partner-logo-frame img {
  display: block;
  filter: none;
}

.partner-marks > li[data-partner="costco"] .partner-logo-frame img {
  max-height: 3.05rem;
}

.partner-marks > li[data-partner="loblaws"] .partner-logo-frame img {
  width: min(58%, 13.5rem);
  max-width: 100%;
  max-height: 2.65rem;
  object-fit: contain;
}

.partner-marks > li[data-partner="metro"] .partner-logo-frame img {
  max-height: 3.45rem;
}

/* ---- Keep the long "Who we serve" heading from consuming an entire
   viewport while preserving the cinematic scale elsewhere. ---- */
#industries .section-heading {
  max-width: 960px;
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-10));
}

#industries .section-heading h2 {
  max-width: 24ch;
  font-size: clamp(2rem, 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
}

@media (max-width: 720px) {
  #industries .section-heading h2 {
    max-width: 100%;
    font-size: clamp(1.72rem, 6.8vw, 2.2rem) !important;
    line-height: 1.06;
  }
}

/* Mobile hero polish: the routing dossier sits partly below the first
   viewport. Keep the shell visible immediately so the area below the CTA
   never reads as empty dead space, while internal routing elements continue
   to animate on their own timing. */
@media (max-width: 640px) {
  .hero .hero-device.reveal-blur,
  .hero [data-routing-module].reveal-blur {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Hero dossier repair: the first desktop pass made the selected-facility
   passport too narrow, which clipped the heading and footer. Give the card
   a safer column, reduce oversized type, and keep every label inside the
   rounded panel at desktop and tablet widths. */
.hero .route-stage {
  grid-template-columns: minmax(0, 1.38fr) minmax(350px, 380px);
  min-height: clamp(430px, 38vw, 500px);
}

.hero .route-card {
  padding: clamp(var(--space-5), 2.2vw, var(--space-7));
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  justify-content: start;
}

.hero .route-card-status {
  min-width: 0;
}

.hero .route-card-status .tiny-label {
  min-width: 0;
  max-width: 100%;
  font-size: 10px;
  letter-spacing: 0.14em;
  white-space: normal;
}

.hero .route-card h2 {
  max-width: 100%;
  font-size: clamp(2.25rem, 3.1vw, 3.05rem);
  line-height: 1;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.hero .route-passport {
  gap: var(--space-3);
}

.hero .route-passport div {
  padding-top: var(--space-3);
}

.hero .route-passport dt {
  font-size: 9px;
  letter-spacing: 0.15em;
}

.hero .route-passport dd {
  font-size: clamp(0.9rem, 0.95vw, 1rem);
  line-height: 1.48;
}

.hero .route-card-footer {
  margin-top: auto;
  font-size: 8px;
  letter-spacing: 0.1em;
  gap: var(--space-2);
  white-space: nowrap;
}

@media (max-width: 1180px) and (min-width: 981px) {
  .hero .hero-device {
    width: min(1120px, 96vw);
  }

  .hero .route-stage {
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, 350px);
  }

  .hero .route-card h2 {
    font-size: clamp(2rem, 3vw, 2.65rem);
  }
}

@media (max-width: 980px) {
  .hero .route-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero .route-card {
    min-height: 0;
  }
}

/* Final dossier layout: full-width map with a clean facility intelligence
   strip. This removes the squeezed right-hand card that was clipping text
   in desktop screenshots and felt broken on mobile. */
.hero .route-stage {
  grid-template-columns: 1fr;
  min-height: auto;
  gap: var(--space-4);
}

.hero .routing-map-shell {
  min-height: clamp(320px, 28vw, 390px);
}

.hero .routing-map-shell svg {
  min-height: clamp(320px, 28vw, 390px);
}

.hero .route-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.78fr) minmax(0, 1.65fr) auto;
  grid-template-areas:
    "status passport footer"
    "title passport footer";
  align-items: center;
  column-gap: clamp(var(--space-5), 3vw, var(--space-8));
  row-gap: var(--space-2);
  min-height: 0;
  padding: clamp(var(--space-4), 1.7vw, var(--space-5));
  overflow: hidden;
}

.hero .route-card-status {
  grid-area: status;
}

.hero .route-card h2 {
  grid-area: title;
  margin: 0;
  font-size: clamp(1.75rem, 2.3vw, 2.35rem);
  line-height: 1;
}

.hero .route-passport {
  grid-area: passport;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  min-width: 0;
}

.hero .route-passport div {
  min-width: 0;
  padding-top: 0;
  padding-left: clamp(var(--space-4), 2vw, var(--space-5));
  border-top: 0;
  border-left: 1px solid rgba(232, 238, 245, 0.1);
}

.hero .route-passport dd {
  max-width: 34ch;
  font-size: clamp(0.82rem, 0.9vw, 0.94rem);
  line-height: 1.38;
}

.hero .route-card-footer {
  grid-area: footer;
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: end;
  padding-left: clamp(var(--space-4), 2vw, var(--space-6));
  border-left: 1px solid rgba(232, 238, 245, 0.1);
  white-space: normal;
  min-width: 96px;
}

.hero .route-card-footer span:first-child {
  align-self: start;
  justify-self: end;
}

.hero .route-card-footer span:last-child {
  max-width: 12ch;
  text-align: right;
}

@media (max-width: 760px) {
  .hero .routing-map-shell,
  .hero .routing-map-shell svg {
    min-height: 310px;
  }

  .hero .route-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "status"
      "title"
      "passport"
      "footer";
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .hero .route-card h2 {
    font-size: clamp(2.05rem, 11vw, 3rem);
  }

  .hero .route-passport {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .hero .route-passport div {
    padding-left: 0;
    padding-top: var(--space-3);
    border-left: 0;
    border-top: 1px solid rgba(232, 238, 245, 0.1);
  }

  .hero .route-passport dd {
    max-width: none;
  }

  .hero .route-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding-left: 0;
    border-left: 0;
  }

  .hero .route-card-footer span:last-child {
    max-width: none;
  }
}

/* Clean chapter separators: normal scrolling now replaces the previous
   wheel/keyboard snap behavior, so sections get a quiet divider line for
   structure without interrupting the user's scroll. */
.chapter-section:not(.hero)::before {
  box-shadow: none;
}

.chapter-section:not(.hero):not(#quote)::after {
  content: "";
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: 0;
  width: auto;
  height: 1px;
  transform: none;
  border-radius: var(--radius-full);
  background:
    linear-gradient(90deg, transparent 0%, rgba(184, 210, 231, 0.2) 16%, rgba(185, 138, 74, 0.38) 50%, rgba(184, 210, 231, 0.2) 84%, transparent 100%);
  filter: none;
  opacity: 0.76;
  z-index: 2;
}

.chapter-gate {
  margin-block: clamp(var(--space-6), 4vw, var(--space-10)) clamp(var(--space-2), 1.5vw, var(--space-4));
}

@media (max-width: 720px) {
  .chapter-section:not(.hero):not(#quote)::after {
    left: var(--space-5);
    right: var(--space-5);
  }
}

/* ----------------------------------------------------------------------------
 * Mobile navigation drawer
 * Hamburger toggle + full-height overlay panel for tablet/mobile widths.
 * Desktop nav is preserved as-is; toggle is hidden until <=980px.
 * -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid rgba(232, 238, 245, 0.16);
  background: rgba(232, 238, 245, 0.04);
  color: rgba(232, 238, 245, 0.92);
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(184, 210, 231, 0.12);
  border-color: rgba(184, 210, 231, 0.32);
}

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 12px;
}

.nav-toggle-bars span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 240ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

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

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

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

[data-theme="light"] .nav-toggle,
body[data-context="light"] .site-header[data-elevated="true"] .nav-toggle {
  border-color: rgba(10, 16, 24, 0.16);
  background: rgba(10, 16, 24, 0.04);
  color: rgba(10, 16, 24, 0.86);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  background: #050810;
  background-image:
    radial-gradient(
      130% 90% at 50% 0%,
      rgba(20, 38, 58, 0.92) 0%,
      rgba(8, 14, 22, 0.98) 55%,
      #050810 100%
    );
  opacity: 0;
  transition:
    opacity 280ms var(--ease-out),
    visibility 0s linear 280ms;
  visibility: hidden;
}

.mobile-nav[hidden] {
  display: flex;
}

.mobile-nav[data-open="true"] {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 320ms var(--ease-out),
    visibility 0s linear 0s;
}

.mobile-nav-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;
  padding: clamp(var(--space-6), 7vw, var(--space-10)) clamp(var(--space-5), 6vw, var(--space-8))
    clamp(var(--space-8), 9vw, var(--space-12));
  border-top: 1px solid rgba(184, 210, 231, 0.18);
  transform: translateY(24px);
  opacity: 0;
  transition:
    transform 360ms var(--ease-out),
    opacity 320ms var(--ease-out);
}

.mobile-nav[data-open="true"] .mobile-nav-panel {
  transform: translateY(0);
  opacity: 1;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-links button,
.mobile-nav-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-2);
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #E8EEF5;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(232, 238, 245, 0.08);
  transition:
    color 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    background 220ms var(--ease-out);
}

.mobile-nav-links button::after,
.mobile-nav-links a::after {
  content: "→";
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: rgba(184, 210, 231, 0.6);
  transform: translateX(0);
  transition:
    transform 220ms var(--ease-out),
    color 220ms var(--ease-out);
}

.mobile-nav-links button:hover,
.mobile-nav-links a:hover,
.mobile-nav-links button:focus-visible,
.mobile-nav-links a:focus-visible {
  color: var(--color-gold);
  background: rgba(184, 210, 231, 0.04);
}

.mobile-nav-links button:hover::after,
.mobile-nav-links a:hover::after,
.mobile-nav-links button:focus-visible::after,
.mobile-nav-links a:focus-visible::after {
  color: var(--color-gold);
  transform: translateX(4px);
}

.mobile-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  min-height: 56px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: #0A1018;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.mobile-nav-cta:hover,
.mobile-nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.36);
}

body.mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header-actions .quote-pill {
    display: none;
  }
}

@media (min-width: 981px) {
  .mobile-nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav-panel,
  .nav-toggle-bars span,
  .mobile-nav-links button,
  .mobile-nav-links a,
  .mobile-nav-links button::after,
  .mobile-nav-links a::after,
  .mobile-nav-cta {
    transition: none !important;
  }
}

/* =====================================================================
   Premium scrollbars + mobile full-screen quote drawer
   ===================================================================== */

/* Subtle, thin scrollbars site-wide. Cold-blue track, gold-tinted thumb.
   Falls back gracefully where unsupported. */
:root {
  --scrollbar-thumb: rgba(127, 169, 201, 0.32);
  --scrollbar-thumb-hover: rgba(185, 138, 74, 0.55);
  --scrollbar-track: rgba(10, 16, 24, 0.32);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner { background: transparent; }

/* Drawer back button - only shown on mobile, but markup is always present
   so the JS can set focus / aria correctly. Hidden on desktop. */
.drawer-back {
  position: absolute;
  top: 14px;
  left: 14px;
  display: none;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(16, 24, 42, 0.7);
  color: var(--color-text, #E8EEF5);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.drawer-back:hover,
.drawer-back:focus-visible {
  background: rgba(127, 169, 201, 0.12);
  border-color: rgba(127, 169, 201, 0.5);
}

.drawer-back .drawer-back-arrow {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  transform: translateY(-1px);
}

/* Mobile: turn the drawer into a true full-screen sheet, single scroll
   context, with top-left back button. ≤980px matches the existing
   mobile breakpoint where the hamburger menu becomes active. */
@media (max-width: 980px) {
  .drawer-back {
    display: inline-flex;
  }

  .quote-drawer {
    /* Push the modal above the mobile-nav (z-index 95) so it never
       appears nested inside the menu. */
    z-index: 200;
  }

  .drawer-backdrop {
    background: rgba(4, 7, 12, 0.92);
  }

  .drawer-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    padding: 76px clamp(1rem, 5vw, 1.75rem) clamp(2rem, 8vw, 3rem);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Single scroll context inside the panel; the page underneath is
       locked by body.drawer-open. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .drawer-panel::before {
    /* Disable the decorative gradient overlay so it doesn't block the
       full-screen back button or scrolling. */
    display: none;
  }

  .drawer-close {
    /* Move close affordance top-right at 12px so it doesn't clash with
       the new back button on the top-left. Smaller, tighter look. */
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    background: rgba(16, 24, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* When the drawer is open via the hamburger menu, fully hide the
     mobile-nav so it can't bleed a second scrollbar or peek behind. */
  body.drawer-open .mobile-nav {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Stronger body scroll lock - combine drawer-open and mobile-nav-open
   into one rule that also pins position so iOS Safari doesn't bounce
   the underlying page. */
body.drawer-open,
body.mobile-nav-open {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Desktop: keep the back button hidden, drawer stays the existing
   side-panel design. Nothing else to do - the legacy rules remain. */
@media (min-width: 981px) {
  .drawer-back { display: none; }
}

/* =====================================================================
   Mobile quote drawer: hard full-screen takeover
   ===================================================================== */
@media (max-width: 980px) {
  /* The .drawer-panel inherits a clip-path: inset(0 round var(--radius-2xl))
     from a global rule - that's what produces the residual rounded corners
     on mobile even after we zero border-radius. Defeat it explicitly. */
  .drawer-panel {
    clip-path: none !important;
    -webkit-mask-image: none !important;
    contain: none;
    position: fixed;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    margin: 0 !important;
    border-radius: 0 !important;
    outline: 0;
  }

  /* Backdrop is fully opaque on mobile so even with translucency the
     underlying page is never visible. */
  .quote-drawer[aria-hidden="false"] .drawer-backdrop {
    background: var(--color-bg, #04070C);
  }

  /* When the drawer is open on mobile, lock the underlying html+body
     completely: no scroll, no scrollbars, no overscroll bounce. */
  html:has(body.drawer-open),
  body.drawer-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    /* Hide scrollbars without changing layout - Firefox/WebKit. */
    scrollbar-width: none;
  }

  html:has(body.drawer-open)::-webkit-scrollbar,
  body.drawer-open::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* Pin the body so iOS Safari can't bounce-scroll the page beneath. */
  body.drawer-open {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  /* Make sure no decorative pseudo-elements peek through corners. */
  body.drawer-open::before,
  body.drawer-open::after {
    display: none;
  }
}