/* ==========================================================================
   Behphar Pharmaceutical Holding — Mercury Design System
   Shared stylesheet (tokens + components + homepage sections)
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Colors */
  --color-mercury-blue: #5266eb;
  --color-ghost-blue: #cdddff;
  --color-deep-space: #171721;
  --color-midnight-slate: #1e1e2a;
  --color-graphite: #272735;
  --color-lead: #70707d;
  --color-starlight: #ededf3;
  --color-silver: #c3c3cc;
  --color-pure-white: #ffffff;
  /* Lighter tint of Mercury Blue, legible at caption sizes on dark surfaces */
  --color-accent-text: #8b9bf7;

  /* Derived alpha tints */
  --tint-lead-25: rgba(112, 112, 125, 0.25);
  --tint-lead-40: rgba(112, 112, 125, 0.4);
  --tint-ghost-08: rgba(205, 221, 255, 0.08);
  --tint-ghost-20: rgba(205, 221, 255, 0.2);

  /* Shared separator rule: Mercury Blue accent at the start fading to a Lead hairline */
  --rule-gradient: linear-gradient(90deg, var(--color-mercury-blue) 0%, var(--color-mercury-blue) 8%, rgba(112, 112, 125, 0.45) 42%, rgba(112, 112, 125, 0.45) 100%);

  /* Typography */
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 21px;
  --text-heading-md: 28px;
  --text-heading: 32px;
  --text-heading-lg: 49px;
  --text-display: 65px;

  --w-light: 360;
  --w-regular: 400;
  --w-medium: 420;
  --w-semi: 480;
  --w-strong: 530;

  /* Spacing */
  --sp-4: 4px;  --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-56: 56px; --sp-72: 72px; --sp-80: 80px; --sp-112: 112px;
  --sp-128: 128px;

  /* Layout */
  --page-max: 1200px;

  /* Radius */
  --radius-pill: 32px;
  --radius-pill-lg: 40px;
  --radius-container: 4px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Light theme — re-grades the token layer toward a clean, airy medical light.
   Immersive media bands (hero, image sections) stay dark; see the restore block.
   ========================================================================== */
html[data-theme="light"] {
  --color-deep-space: #e7eaf3;     /* alternating "section-deep" band */
  --color-midnight-slate: #f5f6fb; /* primary surface (brightest) */
  --color-graphite: #e9ecf6;       /* interactive / hover surface */
  --color-lead: #949bad;           /* borders, dividers */
  --color-starlight: #1b1d2b;      /* primary text (near-black, blue-tinted) */
  --color-silver: #565b70;         /* secondary text */
  --color-ghost-blue: #3a49ad;     /* large stat figures on light */
  --color-accent-text: #4453c4;    /* labels / captions on light */

  --tint-lead-25: rgba(86, 91, 112, 0.18);
  --tint-lead-40: rgba(86, 91, 112, 0.30);

  color-scheme: light;
}

/* Keep immersive media bands dark even in light mode, so their light text,
   scrims, and glowing figures stay legible. */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .reliability-band,
html[data-theme="light"] .careers-band,
html[data-theme="light"] .cta-video-section,
html[data-theme="light"] .site-header {
  --color-deep-space: #171721;
  --color-midnight-slate: #1e1e2a;
  --color-graphite: #272735;
  --color-lead: #70707d;
  --color-starlight: #ededf3;
  --color-silver: #c3c3cc;
  --color-ghost-blue: #cdddff;
  --color-accent-text: #8b9bf7;
  --tint-lead-25: rgba(112, 112, 125, 0.25);
  --tint-lead-40: rgba(112, 112, 125, 0.4);
  /* Re-declare so inherited base text color re-resolves to the restored (light) token */
  color: var(--color-starlight);
}

/* By the Numbers: the dark image band keeps light text, while its edge fades
   blend into the surrounding light sections (midnight-slate stays light here). */
html[data-theme="light"] .numbers-section .eyebrow { color: #8b9bf7; }
html[data-theme="light"] .numbers-section .heading-lg { color: #ededf3; }
html[data-theme="light"] .numbers-section .number-value { color: #cdddff; }
html[data-theme="light"] .numbers-section .number-label { color: #c3c3cc; }
html[data-theme="light"] .numbers-section .numbers-note { color: #9aa0b5; }
/* Drop the edge fade in light mode (it washed light->dark->light); keep a crisp dark band. */
html[data-theme="light"] .numbers-section::before {
  background: linear-gradient(rgba(23, 23, 33, 0.72), rgba(23, 23, 33, 0.72));
}

/* Smooth color grade applied only during a toggle (class added by JS, removed after). */
html.theme-anim,
html.theme-anim *:not(.theme-toggle):not(.theme-toggle *) {
  transition: background-color 0.5s var(--ease-out),
              color 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out),
              fill 0.5s var(--ease-out) !important;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-midnight-slate);
  color: var(--color-starlight);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: 0.16px;
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--color-mercury-blue); color: var(--color-pure-white); }

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-32);
}

/* ---- Type roles --------------------------------------------------------- */
.display {
  font-size: clamp(40px, 6vw, var(--text-display));
  font-weight: var(--w-light);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.heading-lg {
  font-size: clamp(32px, 4.2vw, var(--text-heading-lg));
  font-weight: var(--w-light);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.heading {
  font-size: clamp(26px, 3vw, var(--text-heading));
  font-weight: var(--w-medium);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  max-width: 100%;
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  overflow-wrap: anywhere;
}

.lede {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-light);
  line-height: 1.5;
  color: var(--color-silver);
}

.keep-together { white-space: nowrap; }

/* ---- Widow control: balance short headings/leads, keep last words company in body ---- */
h1, h2, h3, h4,
.display, .heading-lg, .heading,
.overview-statement, .statement, .lede,
.acc-title, .sub-name, .value-card h3, .timeline-item h3,
.cap-domain-head h3, .dossier-head h2, .group-overview-copy h2,
.group-system-head h2, .subsidiary-body h2 {
  text-wrap: balance;
}
p, .sub-desc, .chain-desc, .register-scope, .commit-item p, .quality-item p {
  text-wrap: pretty;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--w-semi);
  letter-spacing: 0.16px;
  cursor: pointer;
  border: none;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

.btn-primary {
  background: var(--color-mercury-blue);
  color: var(--color-pure-white);
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--radius-pill);
}
.btn-primary:hover { background: #6478f2; }

.btn-ghost-pill {
  background: var(--tint-ghost-20);
  color: var(--color-starlight);
  padding: var(--sp-8) var(--sp-20);
  border-radius: var(--radius-pill-lg);
  font-size: var(--text-body-sm);
}
.btn-ghost-pill:hover { background: rgba(205, 221, 255, 0.3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-weight: var(--w-medium);
  color: var(--color-starlight);
  transition: gap 0.25s var(--ease-out);
}
.link-arrow .arrow { color: var(--color-accent-text); transition: transform 0.25s var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* ---- Header / Nav -------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(23, 23, 33, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--tint-lead-25);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
  letter-spacing: 0.02em;
  color: var(--color-starlight);
}
.brand-logo {
  display: block;
  width: auto;
  height: 34px;
}
/* Header + footer logos swap to their light variants in light mode. */
.brand-logo--light { display: none; }
html[data-theme="light"] .site-header .brand-logo--dark,
html[data-theme="light"] .site-footer .brand-logo--dark { display: none; }
html[data-theme="light"] .site-header .brand-logo--light,
html[data-theme="light"] .site-footer .brand-logo--light { display: block; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.nav-links a {
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.28px;
  color: var(--color-starlight);
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-out);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links .btn-ghost-pill { margin-left: var(--sp-12); opacity: 1; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--sp-8);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-starlight);
  margin: 5px 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* ---- Theme toggle (sun / moon) ----------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-silver);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.theme-toggle:hover { background: var(--tint-ghost-08); color: var(--color-starlight); }
.theme-toggle .theme-icon { width: 21px; height: 21px; overflow: visible; }

/* Moon (current = dark) and sun (current = light) share the same space and
   crossfade with a quarter turn as the theme changes. */
.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.theme-toggle .icon-moon { fill: currentColor; }
.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-65deg) scale(0.45);
}
.theme-toggle .sun-core { fill: currentColor; }
.theme-toggle .sun-rays { stroke: currentColor; fill: none; }

/* Light mode: hide the moon, reveal the sun in a warm tone */
html[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(65deg) scale(0.45);
}
html[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
html[data-theme="light"] .theme-toggle .sun-core { fill: #f6b73c; }
html[data-theme="light"] .theme-toggle .sun-rays { stroke: #f6b73c; }

/* ---- Hero ----------------------------------------------------------------- */
.hero {
  --hero-fade-bottom: rgba(30, 30, 42, 1);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 72px; /* reserve fixed-header height so centered content never collides */
  background: var(--color-deep-space);
  overflow: hidden;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.hero-atmosphere::before {
  /* Scrim over the photo: keeps text crisp and blends edges into Deep Space */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(205, 221, 255, 0.1), transparent 65%),
    linear-gradient(180deg, rgba(23, 23, 33, 0.78) 0%, rgba(23, 23, 33, 0.45) 45%, rgba(23, 23, 33, 0.82) 100%);
}
.hero-atmosphere::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: min(34vh, 340px);
  background: linear-gradient(180deg, rgba(30, 30, 42, 0) 0%, var(--hero-fade-bottom) 100%);
}

html[data-theme="light"] .hero-atmosphere::after {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
  /* auto margins center the content in the space between header and stat strip */
  margin-top: auto;
  margin-bottom: auto;
  padding-top: var(--sp-40);
  padding-bottom: var(--sp-40);
}

.hero-content .display { max-width: 22ch; }
.hero-content .lede { max-width: 56ch; }

.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  margin-top: var(--sp-8);
}

/* Hero load-in choreography */
.hero-content > * {
  opacity: 0;
  transform: translateY(24px);
  animation: rise 1s var(--ease-out) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-content > *:nth-child(3) { animation-delay: 0.45s; }
.hero-content > *:nth-child(4) { animation-delay: 0.6s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero footer strip — key figures over a hairline */
.hero-strip {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-top: 1px solid var(--tint-lead-25);
  opacity: 0;
  animation: fadeIn 1.2s var(--ease-out) 0.9s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.hero-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--sp-24) 0;
}
.hero-strip-item {
  text-align: center;
  padding: 0 var(--sp-16);
}
.hero-strip-item + .hero-strip-item { border-left: 1px solid var(--tint-lead-25); }
.hero-strip-item .figure {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-light);
  color: var(--color-ghost-blue);
}
.hero-strip-item .label {
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-silver);
  margin-top: var(--sp-4);
}

/* ---- Sections (shared) ----------------------------------------------------- */
.section { padding: var(--sp-112) 0; }
.section-deep { background: var(--color-deep-space); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  margin-bottom: var(--sp-56);
  max-width: 720px;
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

/* Scroll-triggered image reveal: masks actual <img> content, not CSS backgrounds. */
.image-reveal.is-image-entering {
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
  will-change: clip-path;
  transition: clip-path 1.05s var(--ease-out), opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.image-reveal.is-image-visible { clip-path: inset(0 0 0 0); }
.image-reveal.is-image-entering img:not([data-parallax]) {
  --image-reveal-x: 14%;
  --image-reveal-scale: 1.14;
  transform: translate3d(var(--image-reveal-x), 0, 0) scale(var(--image-reveal-scale));
  transform-origin: center;
  will-change: transform;
  transition: transform 1.2s var(--ease-out), filter 0.4s var(--ease-out);
}
.image-reveal.is-image-visible img:not([data-parallax]) {
  --image-reveal-x: 0%;
  --image-reveal-scale: 1;
}

/* ---- Overview ---------------------------------------------------------------- */
.overview-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-72);
  align-items: center;
}
.overview-figure {
  margin: 0;
  position: relative;
}
.overview-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-container);
  /* Tonal grade so photography sits inside the Mercury palette */
  filter: saturate(0.85) contrast(1.02);
}
.overview-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-container);
  background: linear-gradient(180deg, rgba(23, 23, 33, 0.12), rgba(23, 23, 33, 0.28));
  pointer-events: none;
}
.overview-statement {
  font-size: clamp(24px, 2.6vw, var(--text-heading));
  font-weight: var(--w-light);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.overview-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  color: var(--color-silver);
}
.overview-copy .eyebrow { margin-bottom: calc(-1 * var(--sp-8)); }
.overview-copy .overview-statement { color: var(--color-starlight); }
.overview-copy .link-arrow { margin-top: var(--sp-8); }

/* ---- Ecosystem (value chain list) ---------------------------------------------- */
.chain-list { border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }

.chain-item {
  display: grid;
  grid-template-columns: 72px 1fr 1.2fr 40px;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-32) var(--sp-12);
  border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
  transition: background-color 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
}
.chain-item:hover {
  background: var(--color-graphite);
  padding-left: var(--sp-24);
}

.chain-index {
  font-size: var(--text-body-sm);
  font-weight: var(--w-light);
  color: var(--color-accent-text);
  letter-spacing: 0.05em;
}
.chain-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, var(--text-heading-md));
  font-weight: var(--w-semi);
  line-height: 1.2;
  color: var(--color-starlight);
}
.chain-desc {
  font-size: var(--text-body-sm);
  color: var(--color-silver);
  line-height: 1.5;
}
.chain-arrow {
  color: var(--color-lead);
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.chain-item:hover .chain-arrow {
  color: var(--color-accent-text);
  transform: translateX(4px);
}

/* ---- Subsidiaries ---------------------------------------------------------------- */
.subs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tint-lead-25);
  border: 1px solid var(--tint-lead-25);
}

.sub-card {
  background: var(--color-deep-space);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-height: 280px;
  transition: background-color 0.3s var(--ease-out);
}
.sub-card:hover { background: var(--color-graphite); }

.sub-media {
  display: block;
  margin: calc(-1 * var(--sp-32)) calc(-1 * var(--sp-32)) var(--sp-8);
  overflow: hidden;
}
.sub-media img {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.92);
  transition: filter 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.sub-card:hover .sub-media img {
  filter: saturate(1) brightness(1);
  transform: translate3d(var(--image-reveal-x, 0), 0, 0) scale(calc(var(--image-reveal-scale, 1) * 1.03));
}

.sub-domain {
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.sub-name {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
  line-height: 1.3;
}
.sub-desc {
  font-size: var(--text-body-sm);
  color: var(--color-silver);
  flex-grow: 1;
}
.sub-fact {
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  color: var(--color-starlight);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}

.subs-footer {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-40);
}

/* ---- By the numbers ----------------------------------------------------------------- */
.numbers-section {
  position: relative;
  background-image: url("../assets/img/numbers-bg.webp");
  background-size: cover;
  background-position: center;
}
.numbers-section::before {
  /* Edge fades blend into the neighbouring Midnight Slate sections;
     the flat layer keeps the figures legible over the photo */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--color-midnight-slate) 0%,
      rgba(30, 30, 42, 0) 25%,
      rgba(30, 30, 42, 0) 75%,
      var(--color-midnight-slate) 100%),
    linear-gradient(rgba(23, 23, 33, 0.7), rgba(23, 23, 33, 0.7));
}
.numbers-section .container { position: relative; }

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-56) var(--sp-40);
}

.number-item {
  border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
  padding-top: var(--sp-20);
}
.number-value {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.8vw, var(--text-heading-lg));
  font-weight: var(--w-light);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-ghost-blue);
  font-variant-numeric: tabular-nums;
}
.number-label {
  margin-top: var(--sp-8);
  font-size: var(--text-body-sm);
  color: var(--color-silver);
}
.numbers-note {
  margin-top: var(--sp-56);
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-lead);
}

/* ---- Quality / commitments ------------------------------------------------------------ */
.quality-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-72);
  align-items: start;
}
.quality-head {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.quality-figure {
  margin: var(--sp-16) 0 0;
  position: relative;
}
.quality-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-container);
  filter: saturate(0.85);
}
.quality-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-container);
  background: linear-gradient(180deg, rgba(23, 23, 33, 0.1), rgba(23, 23, 33, 0.25));
  pointer-events: none;
}

.quality-list { border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }
.quality-item {
  display: block;
  padding: var(--sp-24) var(--sp-4);
  border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
  transition: padding-left 0.3s var(--ease-out);
}
a.quality-item:hover { padding-left: var(--sp-16); }
.quality-item h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-16);
}
.quality-item h3 .arrow { color: var(--color-lead); transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.quality-item:hover h3 .arrow { color: var(--color-accent-text); transform: translateX(4px); }
.quality-item p {
  margin-top: var(--sp-8);
  font-size: var(--text-body-sm);
  color: var(--color-silver);
  max-width: 52ch;
}

/* ---- Sub-page hero --------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background-color: var(--color-deep-space);
  background-size: cover;
  background-position: center;
  padding: calc(72px + var(--sp-112)) 0 var(--sp-80);
  text-align: center;
  overflow: hidden;
}
/* Each inner page sets its own hero image inline; this is the shared fallback */
.page-hero { background-image: url("../assets/img/page-hero.webp"); }
.page-hero::before {
  /* Scrim over the shared inner-page hero image, fading into Midnight Slate below */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% -20%, rgba(205, 221, 255, 0.07), transparent 65%),
    linear-gradient(180deg, rgba(23, 23, 33, 0.78) 0%, rgba(23, 23, 33, 0.62) 55%, var(--color-midnight-slate) 100%);
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
}
.page-hero .display { max-width: 20ch; }
.page-hero .lede { max-width: 58ch; }
.page-hero .container > * {
  opacity: 0;
  transform: translateY(24px);
  animation: rise 1s var(--ease-out) forwards;
}
.page-hero .container > *:nth-child(1) { animation-delay: 0.1s; }
.page-hero .container > *:nth-child(2) { animation-delay: 0.25s; }
.page-hero .container > *:nth-child(3) { animation-delay: 0.45s; }

/* ---- Mission & Vision -------------------------------------------------------------------------- */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--tint-lead-25);
  border: 1px solid var(--tint-lead-25);
}
.mv-card {
  background: var(--color-deep-space);
  padding: var(--sp-56) var(--sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.mv-card .statement {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, var(--text-heading-md));
  font-weight: var(--w-light);
  line-height: 1.4;
  color: var(--color-starlight);
}

/* ---- Values ticker ------------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 50s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.value-card {
  width: 340px;
  flex-shrink: 0;
  margin-right: var(--sp-24);
  background: var(--color-deep-space);
  border: 1px solid var(--tint-lead-25);
  display: flex;
  flex-direction: column;
}
.value-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.92);
}
.value-card-body { padding: var(--sp-24); }
.value-index {
  font-size: var(--text-body-sm);
  font-weight: var(--w-light);
  color: var(--color-accent-text);
  letter-spacing: 0.05em;
}
.value-card h3 {
  margin-top: var(--sp-12);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
}
.value-card p {
  margin-top: var(--sp-8);
  font-size: var(--text-body-sm);
  color: var(--color-silver);
}

/* ---- GSAP text reveal ------------------------------------------------------------------------------ */
.tr-word { display: inline; }

/* ---- Scramble / decode title reveal ----------------------------------------------------------------- */
/* Real letters hold the layout (no reflow); an absolutely-positioned overlay runs the glyph scramble. */
.sr-word { display: inline-block; }
.sr-char { position: relative; display: inline-block; }
.sr-char .sr-r { opacity: 0; transition: opacity 0.3s var(--ease-out); }
.sr-char .sr-f {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  color: var(--color-accent-text);
  filter: blur(6px);
  transition: opacity 0.25s var(--ease-out), filter 0.25s var(--ease-out);
}
.sr-char.scrambling .sr-f { opacity: 0.9; }
.sr-char.is-done .sr-r { opacity: 1; }
.sr-char.is-done .sr-f { opacity: 0; filter: blur(0); }

/* ---- Timeline -------------------------------------------------------------------------------------- */
.timeline {
  position: relative;
  margin-left: var(--sp-8);
  border-left: 1px solid var(--tint-lead-40);
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  padding: var(--sp-8) 0;
}
.timeline-progress {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-accent-text);
  transform: scaleY(0);
  transform-origin: top;
}
.timeline-item {
  position: relative;
  padding-left: var(--sp-40);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-text);
}
.timeline-item .timeline-year {
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.timeline-item h3 {
  margin-top: var(--sp-8);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
}
.timeline-item p {
  margin-top: var(--sp-8);
  font-size: var(--text-body-sm);
  color: var(--color-silver);
  max-width: 60ch;
}

/* ---- Secondary pill button -------------------------------------------------------------------- */
.btn-secondary {
  background: var(--color-graphite);
  color: var(--color-starlight);
  padding: var(--sp-16) var(--sp-24);
  border-radius: var(--radius-pill);
}
.btn-secondary:hover { background: #32323f; }

/* ---- Group overview + orbital diagram (Our Group) --------------------------------------------- */
.group-overview-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--sp-72);
  align-items: center;
}
.group-overview-copy { display: flex; flex-direction: column; gap: var(--sp-24); }
.group-overview-copy h2 {
  font-size: clamp(34px, 4.4vw, var(--text-heading-lg));
  font-weight: var(--w-light);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.group-overview-copy > p {
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: var(--color-silver);
  max-width: 46ch;
}
.group-overview-actions { display: flex; flex-wrap: wrap; gap: var(--sp-16); margin-top: var(--sp-8); }

.orbit-figure { position: relative; }
.orbit-svg { display: block; width: 100%; height: auto; overflow: visible; }

.orbit-svg .ring { fill: none; stroke: var(--color-lead); stroke-opacity: 0.16; stroke-width: 1; }
.orbit-svg .ring-dash { stroke: var(--color-mercury-blue); stroke-opacity: 0.22; stroke-dasharray: 2 11; }

.orbit-svg .conn-base { fill: none; stroke: var(--color-lead); stroke-opacity: 0.22; stroke-width: 1; }
.orbit-svg .conn-flow { fill: none; stroke: url(#orbitLineGrad); stroke-width: 1.5; stroke-dasharray: 2 13; }
.orbit-svg .conn-dot { fill: #dbe6ff; opacity: 0; }
.orbit-svg .conn.is-active .conn-flow { stroke-width: 2.6; }
.orbit-svg .conn.is-active .conn-base { stroke-opacity: 0.45; }

.orbit-svg .core-title { fill: #f4f6ff; font-family: var(--font-display); font-size: 23px; font-weight: 300; letter-spacing: 0.2px; }
.orbit-svg .core-sub { fill: var(--color-ghost-blue); font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.3px; }

.orbit-svg .node { cursor: pointer; }
.orbit-svg .node-name, .orbit-svg .node-desc { text-anchor: middle; }
.orbit-svg .node rect {
  fill: rgba(30, 30, 42, 0.82);
  stroke: rgba(112, 112, 125, 0.32);
  stroke-width: 1;
  transition: stroke 0.3s var(--ease-out), fill 0.3s var(--ease-out);
}
.orbit-svg .node:hover rect { stroke: rgba(205, 221, 255, 0.5); fill: var(--color-graphite); }
.orbit-svg .node-name { fill: var(--color-starlight); font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.orbit-svg .node-desc { fill: var(--color-silver); font-family: var(--font-body); font-size: 12px; }

html[data-theme="light"] .orbit-svg .node rect {
  fill: rgba(255, 255, 255, 0.84);
  stroke: rgba(58, 73, 173, 0.18);
}
html[data-theme="light"] .orbit-svg .node:hover rect {
  fill: #f8f9fe;
  stroke: rgba(82, 102, 235, 0.42);
}
html[data-theme="light"] .orbit-svg .core-sub { fill: #dbe6ff; }

@media (prefers-reduced-motion: no-preference) {
  .orbit-svg .conn-flow { animation: connFlow 1.3s linear infinite; }
}
@keyframes connFlow { to { stroke-dashoffset: -15; } }

/* Mobile fallback stack (revealed under 760px, see media query) */
.orbit-stack { display: none; }
.ostack-center {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-24) var(--sp-20);
  border-radius: var(--radius-container);
  background: radial-gradient(circle at 50% 42%, rgba(82, 102, 235, 0.3), rgba(82, 102, 235, 0.06) 72%);
}
.ostack-center strong { display: block; font-family: var(--font-display); font-size: var(--text-heading-sm); font-weight: var(--w-light); color: var(--color-starlight); }
.ostack-center span { font-size: 11px; letter-spacing: 0.3px; color: var(--color-ghost-blue); }
.ostack-node {
  padding: var(--sp-12) var(--sp-16);
  background: rgba(30, 30, 42, 0.78);
  border: 1px solid var(--tint-lead-25);
  border-radius: var(--radius-container);
}
.ostack-node strong { display: block; font-size: var(--text-body-sm); font-weight: var(--w-semi); color: var(--color-starlight); }
.ostack-node span { display: block; margin-top: 2px; font-size: var(--text-caption); letter-spacing: 0.24px; color: var(--color-silver); }

html[data-theme="light"] .ostack-center {
  background: radial-gradient(circle at 50% 42%, rgba(82, 102, 235, 0.18), rgba(255, 255, 255, 0.74) 72%);
  border: 1px solid rgba(58, 73, 173, 0.14);
}
html[data-theme="light"] .ostack-node {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(58, 73, 173, 0.16);
}

/* ---- Group system (3 stages) ------------------------------------------------------------------ */
#groupSystem, #companyDossiers { scroll-margin-top: 88px; }

.group-system-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-72);
  align-items: start;
}
.group-system-head h2 {
  font-size: clamp(32px, 4vw, var(--text-heading-lg));
  font-weight: var(--w-light);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.system-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}
.system-stage { padding: var(--sp-24); }
.system-stage:first-child { padding-left: 0; }
.system-stage + .system-stage { border-left: 1px solid var(--tint-lead-40); }
.system-stage .s-num { font-size: var(--text-body-sm); color: var(--color-lead); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.system-stage h3 { margin-top: var(--sp-12); font-family: var(--font-display); font-size: var(--text-heading-md); font-weight: var(--w-light); }
.system-stage p { margin-top: var(--sp-12); font-size: var(--text-body-sm); color: var(--color-silver); }

/* ---- Portfolio index (6 companies) ------------------------------------------------------------ */
.portfolio-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-24); }
.portfolio-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-20);
}
.portfolio-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule-gradient);
  transform-origin: left;
  transition: background 0.3s var(--ease-out);
}
.portfolio-item .p-num { font-size: var(--text-caption); color: var(--color-lead); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.portfolio-item h3 {
  margin-top: var(--sp-24);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-light);
  line-height: 1.2;
  color: var(--color-starlight);
  transition: color 0.3s var(--ease-out);
}
.portfolio-item .p-desc { margin-top: var(--sp-16); font-size: var(--text-body-sm); color: var(--color-silver); }
.portfolio-item:hover h3 { color: var(--color-ghost-blue); }

/* ---- Group dossier (Our Group) ---------------------------------------------------------------- */
.dossier-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: var(--sp-80);
  align-items: start;
}

.dossier-rail {
  position: sticky;
  top: 104px;
}
.dossier-rail .rail-title {
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-lead);
  margin-bottom: var(--sp-20);
}
.rail-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  padding: var(--sp-12) 0;
  color: var(--color-lead);
  transition: color 0.3s var(--ease-out);
}
.rail-item .idx {
  font-size: var(--text-caption);
  font-weight: var(--w-light);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.rail-item .name {
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0.28px;
}
.rail-item:hover { color: var(--color-silver); }
.rail-item.active { color: var(--color-starlight); }
.rail-item.active .idx { color: var(--color-accent-text); }

.dossier-chapter { scroll-margin-top: 104px; }
.dossier-chapter + .dossier-chapter {
  margin-top: var(--sp-112);
  padding-top: var(--sp-112);
  border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}

.dossier-banner {
  position: relative;
  margin: 0 0 var(--sp-40);
  height: clamp(260px, 28vw, 380px);
  overflow: hidden;
  border-radius: var(--radius-container);
}
.dossier-banner img {
  position: absolute;
  left: 0;
  top: -7%;
  width: 100%;
  height: 114%; /* overscan for the parallax drift */
  object-fit: cover;
  filter: saturate(0.85);
}
.dossier-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-container);
  background: linear-gradient(180deg, rgba(23, 23, 33, 0.1) 40%, rgba(23, 23, 33, 0.5) 100%);
  pointer-events: none;
}
.dossier-banner .wm {
  position: absolute;
  z-index: 1;
  right: var(--sp-24);
  bottom: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(72px, 9vw, 128px);
  line-height: 0.85;
  color: rgba(205, 221, 255, 0.16);
  user-select: none;
  pointer-events: none;
}

.dossier-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.dossier-head h2 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: var(--w-light);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.dossier-head > p {
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: var(--color-silver);
  max-width: 62ch;
}

.dossier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-8);
}
.dossier-chips li {
  border: 1px solid var(--tint-lead-40);
  border-radius: var(--radius-pill);
  background: var(--color-graphite);
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--text-body-sm);
  color: var(--color-starlight);
}

.dossier-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-24) var(--sp-40);
  margin-top: var(--sp-40);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}
.dossier-fact .v {
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  font-weight: var(--w-light);
  color: var(--color-ghost-blue);
  font-variant-numeric: tabular-nums;
}
.dossier-fact .l {
  margin-top: var(--sp-4);
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-silver);
  max-width: 26ch;
}

/* ---- Capability index (Capabilities & Standards) --------------------------------------------- */
.cap-list { border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }

.cap-domain {
  display: grid;
  grid-template-columns: 56px 4fr 6fr;
  gap: var(--sp-32);
  align-items: start;
  padding: var(--sp-40) var(--sp-12);
  border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
  transition: background-color 0.3s var(--ease-out);
}
.cap-domain:hover {
  background: var(--color-graphite);
}
.cap-domain > * {
  transition: transform 0.3s var(--ease-out);
}
.cap-domain:hover > * {
  transform: translateX(var(--sp-12));
}

.cap-index {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-light);
  color: var(--color-accent-text);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.cap-domain-head h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, var(--text-heading-md));
  font-weight: var(--w-medium);
  line-height: 1.2;
}
.cap-domain-head .cap-owner {
  margin-top: var(--sp-12);
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.cap-domain-body > p {
  color: var(--color-silver);
  font-size: var(--text-body);
  max-width: 56ch;
}
.cap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-20);
}
.cap-tags li {
  border: 1px solid var(--tint-lead-40);
  border-radius: var(--radius-pill);
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--text-body-sm);
  color: var(--color-starlight);
}

/* ---- Standards register ----------------------------------------------------------------------- */
.register { border-top: 1px solid var(--color-mercury-blue); border-image: var(--rule-gradient) 1; }

.register-row {
  display: grid;
  grid-template-columns: 132px 1fr 1.5fr;
  gap: var(--sp-32);
  align-items: center;
  padding: var(--sp-32) var(--sp-12);
  border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
  transition: background-color 0.3s var(--ease-out);
}
.register-row:not(.register-head):hover { background: var(--color-graphite); }

.register-head {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}
.register-head span {
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-lead);
}

.register-code {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-light);
  letter-spacing: 0.08em;
  color: var(--color-ghost-blue);
}
.register-name {
  font-size: var(--text-subheading);
  font-weight: var(--w-medium);
  color: var(--color-starlight);
}
.register-scope {
  font-size: var(--text-body-sm);
  color: var(--color-silver);
}
.register-scope .owner {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ---- Operational reliability band ------------------------------------------------------------- */
.reliability-band {
  position: relative;
  padding: var(--sp-112) 0;
  background-color: var(--color-deep-space);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.reliability-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-midnight-slate) 0%, rgba(30, 30, 42, 0) 22%, rgba(30, 30, 42, 0) 78%, var(--color-midnight-slate) 100%),
    linear-gradient(rgba(23, 23, 33, 0.74), rgba(23, 23, 33, 0.74));
  pointer-events: none;
}
.reliability-band .container { position: relative; }

.reliability-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--sp-56);
  background: var(--tint-lead-25);
  border: 1px solid var(--tint-lead-25);
}
.reliability-pillar {
  background: rgba(23, 23, 33, 0.55);
  padding: var(--sp-40) var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.reliability-pillar .p-index {
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
}
.reliability-pillar h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
}
.reliability-pillar p {
  font-size: var(--text-body-sm);
  color: var(--color-silver);
}

/* ---- Commitment split (Responsibility) -------------------------------------------------------- */
.commit-split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--sp-80);
  align-items: start;
}
.commit-figure {
  position: sticky;
  top: 104px;
  margin: 0;
}
.commit-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  border-radius: var(--radius-container);
  filter: saturate(0.85) contrast(1.02);
}
.commit-figure figcaption {
  margin-top: var(--sp-16);
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-lead);
}

.commit-list { border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }
.commit-item {
  padding: var(--sp-32) var(--sp-4);
  border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}
.commit-item .ci-index {
  font-size: var(--text-body-sm);
  font-weight: var(--w-light);
  color: var(--color-accent-text);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.commit-item h3 {
  margin-top: var(--sp-8);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
}
.commit-item p {
  margin-top: var(--sp-8);
  font-size: var(--text-body-sm);
  color: var(--color-silver);
  max-width: 54ch;
}

/* ---- Focus accordion (Innovation & R&D) ------------------------------------------------------- */
.accordion { border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }
.acc-item { border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }

.acc-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-32) var(--sp-12);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-starlight);
  font-family: var(--font-body);
  transition: background-color 0.3s var(--ease-out);
}
.acc-trigger:hover { background: var(--color-graphite); }
.acc-num {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-light);
  color: var(--color-accent-text);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.acc-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, var(--text-heading-md));
  font-weight: var(--w-medium);
  line-height: 1.2;
}
.acc-icon {
  position: relative;
  width: 16px;
  height: 16px;
  justify-self: end;
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: var(--color-lead);
  transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.acc-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.acc-icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.acc-item.open .acc-icon::after { transform: translateX(-50%) scaleY(0); }
.acc-item.open .acc-icon::before { background: var(--color-accent-text); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-panel p {
  padding: 0 var(--sp-12) var(--sp-32) 80px;
  font-size: var(--text-body);
  color: var(--color-silver);
  max-width: 80ch;
}

.innovation-note {
  margin-top: var(--sp-32);
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-lead);
}

.feature-figure {
  position: relative;
  margin: 0 0 var(--sp-56);
  height: clamp(220px, 24vw, 320px);
  overflow: hidden;
  border-radius: var(--radius-container);
}
.feature-figure img {
  position: absolute;
  left: 0;
  top: -7%;
  width: 100%;
  height: 114%;
  object-fit: cover;
  filter: saturate(0.85);
}
.feature-figure iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  min-height: 100%;
  aspect-ratio: 426 / 224;
  transform: translate(-50%, -50%);
  border: 0;
  filter: saturate(0.85);
}
.feature-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-container);
  background: linear-gradient(180deg, rgba(23, 23, 33, 0.1), rgba(23, 23, 33, 0.55));
  pointer-events: none;
}

/* ---- Careers band ----------------------------------------------------------------------------- */
.careers-band {
  --careers-fade-top: #171721;
  position: relative;
  padding: var(--sp-128) 0;
  background-color: var(--color-deep-space);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-align: center;
}
.careers-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--careers-fade-top) 0%, rgba(23, 23, 33, 0.78) 16%, rgba(23, 23, 33, 0) 38%),
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(205, 221, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(23, 23, 33, 0.86) 0%, rgba(23, 23, 33, 0.7) 50%, rgba(23, 23, 33, 0.92) 100%);
  pointer-events: none;
}

html[data-theme="light"] .careers-band {
  --careers-fade-top: rgba(23, 23, 33, 0);
}
.careers-band .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
}
.careers-band .heading-lg { max-width: 20ch; }
.careers-band .lede { max-width: 54ch; }

.careers-fields {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: var(--sp-12);
  max-width: 100%;
  margin: var(--sp-16) 0 var(--sp-8);
}
.careers-fields li {
  border: 1px solid var(--tint-ghost-20);
  border-radius: var(--radius-pill);
  background: rgba(23, 23, 33, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--sp-12) var(--sp-20);
  font-size: var(--text-body-sm);
  color: var(--color-starlight);
}

/* ---- Contact ---------------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--sp-80);
  align-items: start;
}

.contact-aside {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
}
.contact-detail .label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--sp-12);
}
.contact-detail .value {
  font-size: var(--text-subheading);
  font-weight: var(--w-light);
  line-height: 1.5;
  color: var(--color-starlight);
}
.contact-detail a.value { transition: color 0.2s var(--ease-out); }
.contact-detail a.value:hover { color: var(--color-ghost-blue); }
.contact-detail .pending {
  display: block;
  margin-top: var(--sp-8);
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-lead);
}

.contact-map {
  position: relative;
  display: block;
  margin-top: var(--sp-8);
  border: 1px solid var(--tint-lead-25);
  border-radius: var(--radius-container);
  overflow: hidden;
  line-height: 0;
  transition: border-color 0.3s var(--ease-out);
}
.contact-map:hover { border-color: var(--tint-lead-40); }
.contact-map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: grayscale(0.45) invert(0.9) hue-rotate(185deg) saturate(0.75) brightness(0.62) contrast(1.05);
}
.contact-map .map-label {
  position: absolute;
  left: var(--sp-16);
  bottom: var(--sp-16);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  line-height: 1;
  font-size: var(--text-body-sm);
  font-weight: var(--w-medium);
  color: var(--color-starlight);
  background: rgba(23, 23, 33, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--radius-pill);
}
.contact-map .map-open {
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* Form */
.contact-form { width: 100%; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-32) var(--sp-40);
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }

.form-field label {
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-silver);
  margin-bottom: var(--sp-12);
}
.form-field label .req { color: var(--color-accent-text); }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-lead);
  padding: var(--sp-12) 0;
  color: var(--color-starlight);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: 0.16px;
  transition: border-color 0.25s var(--ease-out);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-lead); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent-text);
}
.form-field textarea { resize: vertical; min-height: 96px; }

/* Native select on dark */
.form-field.select-field { position: relative; }
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: var(--sp-24);
}
.form-field select option { background: var(--color-graphite); color: var(--color-starlight); }
.form-field.select-field::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-silver);
  border-bottom: 1.5px solid var(--color-silver);
  transform: rotate(45deg);
  pointer-events: none;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  margin-top: var(--sp-40);
}
.form-consent {
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-lead);
  max-width: 36ch;
}

/* Success state */
.form-status {
  display: none;
  border: 1px solid var(--tint-lead-40);
  border-radius: var(--radius-container);
  padding: var(--sp-40);
  background: var(--color-deep-space);
}
.form-status.is-visible { display: block; }
.form-status .eyebrow { color: var(--color-accent-text); }
.form-status h3 {
  margin-top: var(--sp-16);
  font-size: var(--text-heading-sm);
  font-weight: var(--w-semi);
}
.form-status p {
  margin-top: var(--sp-8);
  color: var(--color-silver);
  font-size: var(--text-body-sm);
  max-width: 52ch;
}
.contact-form.is-submitted { display: none; }

/* Company contact directory */
.contact-directory-section .section-head {
  max-width: 820px;
}

.contact-directory {
  border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}

.directory-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: var(--sp-24);
  align-items: center;
  padding: var(--sp-24) var(--sp-8);
  border-bottom: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1;
}

.directory-head {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
  color: var(--color-accent-text);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.directory-company {
  color: var(--color-starlight);
  font-weight: var(--w-semi);
}

.directory-address {
  color: var(--color-silver);
  line-height: 1.6;
}

.directory-row a {
  color: var(--color-silver);
  overflow-wrap: anywhere;
  transition: color 0.2s var(--ease-out);
}

.directory-row a:hover {
  color: var(--color-starlight);
}

/* ---- Final CTA ---------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  text-align: center;
  padding: var(--sp-128) 0;
  background: var(--color-deep-space);
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 115%, rgba(205, 221, 255, 0.1), transparent 65%);
  pointer-events: none;
}
.cta-video-section::before {
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(205, 221, 255, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(23, 23, 33, 0.86) 0%, rgba(23, 23, 33, 0.72) 50%, rgba(23, 23, 33, 0.9) 100%);
}
.cta-bg-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.cta-bg-video iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  filter: saturate(0.82);
}
@supports (width: 100cqw) {
  .cta-bg-video iframe {
    width: max(100cqw, calc(100cqh * 16 / 9));
    height: max(100cqh, calc(100cqw * 9 / 16));
  }
}
.cta-final .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
}
.cta-final .heading-lg { max-width: 22ch; }
.cta-final .lede { max-width: 48ch; }

/* ---- Footer ---------------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-deep-space);
  border-top: 1px solid var(--tint-lead-25);
  padding: var(--sp-72) 0 var(--sp-40);
  color: var(--color-silver);
  font-size: var(--text-body-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-56);
  margin-bottom: var(--sp-72);
}

.footer-brand p {
  margin-top: var(--sp-16);
  max-width: 32ch;
  line-height: 1.6;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--sp-16);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-12); }
.footer-col a { color: var(--color-silver); transition: color 0.2s var(--ease-out); }
.footer-col a:hover { color: var(--color-starlight); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-24);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--tint-lead-25);
  font-size: var(--text-caption);
  letter-spacing: 0.24px;
  color: var(--color-lead);
}

/* ---- Responsive ---------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .section { padding: var(--sp-80) 0; }

  .nav-links {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(23, 23, 33, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tint-lead-25);
    padding: var(--sp-16) var(--sp-20) var(--sp-24);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  }
  .nav-links.is-open { opacity: 1; transform: translateY(0); visibility: visible; }
  .nav-links a { padding: var(--sp-12) var(--sp-4); font-size: var(--text-body); }
  .nav-links .btn-ghost-pill { margin: var(--sp-16) 0 0; justify-content: center; }
  .nav-actions { gap: var(--sp-4); }
  .nav-toggle { display: block; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .overview-grid, .quality-grid { grid-template-columns: 1fr; gap: var(--sp-40); }
  .dossier-layout { grid-template-columns: 1fr; gap: var(--sp-56); }
  .dossier-rail { position: static; }
  .dossier-rail nav { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-32); }
  .dossier-chapter + .dossier-chapter { margin-top: var(--sp-80); padding-top: var(--sp-80); }

  .group-overview-grid { grid-template-columns: 1fr; gap: var(--sp-56); }
  .group-system-grid { grid-template-columns: 1fr; gap: var(--sp-40); }
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-40) var(--sp-32); }

  .cap-domain { grid-template-columns: 40px 1fr; gap: var(--sp-20); }
  .cap-domain-body { grid-column: 1 / -1; margin-top: var(--sp-8); }
  .register-row { grid-template-columns: 96px 1fr; gap: var(--sp-16) var(--sp-24); }
  .register-row .register-scope { grid-column: 2; }
  .register-head { display: none; }
  .reliability-pillars { grid-template-columns: 1fr; }

  .commit-split { grid-template-columns: 1fr; gap: var(--sp-40); }
  .commit-figure { position: static; }
  .commit-figure img { max-height: 420px; }
  .acc-panel p { padding-left: var(--sp-12); }

  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-56); }
  .contact-aside { position: static; }
  .directory-row { grid-template-columns: 1fr 1.2fr; }
  .directory-head { display: none; }

  /* Swap the animated SVG diagram for a clean stacked grid */
  .orbit-svg { display: none; }
  .orbit-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    border: 1px solid var(--tint-lead-25);
    border-radius: var(--radius-container);
    padding: var(--sp-20);
  }

  .system-stages { grid-template-columns: 1fr; }
  .system-stage { padding: var(--sp-24) 0; }
  .system-stage:first-child { padding-top: var(--sp-24); }
  .system-stage + .system-stage { border-left: none; border-top: 1px solid var(--color-mercury-blue);
  border-image: var(--rule-gradient) 1; }

  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .quality-head { position: static; }
  .overview-figure img { max-height: 380px; object-fit: cover; object-position: center 30%; }

  .subs-grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-40) var(--sp-32); }
  .mv-grid { grid-template-columns: 1fr; }

  .chain-item { grid-template-columns: 48px 1fr 32px; }
  .chain-desc { display: none; }

  .hero-strip-inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-20) 0; }
  .hero-strip-item:nth-child(3) { border-left: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-40); }
}

@media (max-width: 720px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    max-width: 100%;
    padding: 0 var(--sp-20);
  }

  .display { font-size: clamp(36px, 9.6vw, 44px); line-height: 1.13; }
  .heading-lg { font-size: clamp(29px, 8.6vw, 38px); line-height: 1.16; }
  .heading { font-size: clamp(24px, 7.2vw, 30px); }
  .lede { font-size: 18px; line-height: 1.48; }
  .display,
  .heading-lg,
  .heading,
  .lede,
  .overview-statement {
    overflow-wrap: break-word;
  }

  .btn {
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  .nav-inner { height: 64px; }
  .brand-logo { height: 28px; }
  .nav-links { top: 64px; padding: var(--sp-12) var(--sp-20) var(--sp-20); max-height: calc(100svh - 64px); overflow-y: auto; }
  .theme-toggle,
  .nav-toggle {
    width: 36px;
    height: 36px;
  }
  .theme-toggle .theme-icon { width: 19px; height: 19px; }

  .section { padding: 64px 0; }
  .section-head { gap: var(--sp-12); margin-bottom: var(--sp-32); }

  .hero {
    min-height: auto;
    padding-top: 64px;
  }
  .hero-content {
    gap: var(--sp-20);
    padding-top: 72px;
    padding-bottom: 56px;
  }
  .hero-content .display,
  .hero-content .lede { max-width: 100%; }
  .hero-cta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-12);
    margin-top: 0;
  }
  .hero-cta .btn,
  .hero-cta .link-arrow { justify-content: center; }
  .hero-strip-inner { padding: var(--sp-16) 0; }
  .hero-strip-item { padding: var(--sp-12) var(--sp-8); }

  .page-hero {
    min-height: auto;
    padding: calc(64px + 56px) 0 52px;
  }
  .page-hero .container { gap: var(--sp-16); }
  .page-hero .display {
    font-size: clamp(32px, 8.8vw, 38px);
    line-height: 1.13;
    max-width: 11em;
  }
  .page-hero .lede {
    max-width: 34ch;
  }
  .page-hero .display,
  .page-hero .lede,
  .group-overview-copy h2,
  .group-overview-copy > p {
    max-width: 100%;
  }

  .overview-grid,
  .quality-grid,
  .group-overview-grid,
  .group-system-grid,
  .commit-split,
  .contact-layout,
  .dossier-layout {
    gap: var(--sp-32);
  }
  .overview-grid > *,
  .quality-grid > *,
  .group-overview-grid > *,
  .group-system-grid > *,
  .commit-split > *,
  .contact-layout > *,
  .dossier-layout > * {
    min-width: 0;
  }
  .overview-figure img,
  .commit-figure img { max-height: 320px; }

  .chain-item {
    grid-template-columns: 40px 1fr 28px;
    gap: var(--sp-16);
    padding: var(--sp-24) var(--sp-4);
  }
  .chain-item:hover { padding-left: var(--sp-4); }

  .subs-grid { grid-template-columns: 1fr; }
  .sub-card {
    min-height: auto;
    padding: var(--sp-24);
    gap: var(--sp-14, 14px);
  }
  .sub-media { margin: calc(-1 * var(--sp-24)) calc(-1 * var(--sp-24)) var(--sp-4); }
  .sub-media img { height: 156px; }

  .mv-card { padding: var(--sp-40) var(--sp-24); }
  .value-card { width: 280px; }
  .form-grid { grid-template-columns: 1fr; gap: var(--sp-24); }
  .form-actions { flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .careers-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 420px; }
  .careers-fields li { text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .container { padding: 0 var(--sp-16); }

  .display { font-size: clamp(34px, 9vw, 40px); line-height: 1.14; }
  .heading-lg { font-size: clamp(27px, 7.8vw, 34px); }
  .heading { font-size: clamp(23px, 6.8vw, 28px); }
  .lede { font-size: 17px; }
  .eyebrow { letter-spacing: 0.14em; }
  .hero-content .display { max-width: 9.4em; }
  .hero-content .lede { max-width: 30ch; }
  .keep-together { white-space: nowrap; }
  .group-overview-copy h2 {
    font-size: clamp(29px, 8.1vw, 35px);
    line-height: 1.16;
    max-width: 9.6em;
  }

  .section { padding: 48px 0; }
  .section-head { margin-bottom: var(--sp-24); }
  .overview-statement {
    font-size: clamp(24px, 6.9vw, 30px);
    line-height: 1.2;
  }

  .hero-content {
    padding-top: 48px;
    padding-bottom: 44px;
  }
  .hero-strip-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-strip-item,
  .hero-strip-item:nth-child(3),
  .hero-strip-item + .hero-strip-item { border-left: none; }
  .hero-strip-item + .hero-strip-item { border-top: 1px solid var(--tint-lead-25); }

  .page-hero {
    padding: calc(64px + 44px) 0 44px;
  }
  .page-hero .display {
    font-size: clamp(31px, 8.2vw, 36px);
    max-width: 10.7em;
  }
  .page-hero .lede {
    font-size: 17px;
    line-height: 1.45;
    max-width: 31ch;
  }
  .capabilities-intro {
    padding-bottom: var(--sp-32) !important;
  }
  .capabilities-list-section {
    padding-top: 0 !important;
  }

  .group-overview-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .group-overview-actions .btn {
    justify-content: center;
    width: 100%;
  }

  .overview-figure img,
  .quality-figure img,
  .commit-figure img { max-height: 280px; }

  .numbers-grid,
  .portfolio-grid,
  .dossier-rail nav,
  .careers-fields {
    grid-template-columns: 1fr;
  }
  .numbers-grid { gap: var(--sp-32); }
  .number-item { padding-top: var(--sp-16); }

  .cap-domain {
    grid-template-columns: 36px 1fr;
    gap: var(--sp-16);
    padding: var(--sp-28, 28px) 0;
  }
  .cap-domain:hover > * { transform: none; }
  .cap-tags li { padding: 7px var(--sp-12); }

  .register-row {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-24) 0;
  }
  .register-row .register-scope { grid-column: auto; }

  .reliability-band,
  .careers-band,
  .cta-video-section { padding: 72px 0; }
  .reliability-pillar { padding: var(--sp-28, 28px) var(--sp-20); }

  .dossier-chapter + .dossier-chapter {
    margin-top: 56px;
    padding-top: 56px;
  }
  .dossier-banner {
    height: 220px;
    margin-bottom: var(--sp-24);
  }
  .dossier-head { gap: var(--sp-12); }
  .dossier-facts {
    gap: var(--sp-20);
    margin-top: var(--sp-24);
  }

  .system-stage { padding: var(--sp-20) 0; }
  .orbit-stack { grid-template-columns: 1fr; padding: var(--sp-16); }
  .ostack-center { padding: var(--sp-20) var(--sp-16); }

  .mv-card { padding: var(--sp-32) var(--sp-20); }
  .value-card { width: 260px; margin-right: var(--sp-16); }

  .commit-item,
  .quality-item,
  .acc-trigger { padding: var(--sp-24) var(--sp-4); }
  .acc-trigger {
    grid-template-columns: 44px 1fr 28px;
    gap: var(--sp-16);
  }

  .contact-aside { gap: var(--sp-24); }
  .directory-row {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding: var(--sp-24) 0;
  }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-consent { max-width: none; }

  .site-footer { padding: 48px 0 32px; }
  .footer-grid {
    gap: var(--sp-28, 28px);
    margin-bottom: var(--sp-40);
  }
  .footer-bottom {
    gap: var(--sp-12);
    padding-top: var(--sp-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  .hero-content > *, .hero-strip, .reveal { opacity: 1; transform: none; }
  .image-reveal.is-image-entering { clip-path: inset(0 0 0 0) !important; }
  .image-reveal.is-image-entering img:not([data-parallax]) { transform: none !important; }
}