/* =============================================================
   ValidaTek homepage — pixel-faithful build to client design.
   Type: Vend Sans (display + body), Geist Mono (labels)
   Logos in /logos/  Imagery in /img/
   ============================================================= */

:root {
  --navy-950: #050E1C;
  --navy-900: #081424;
  --navy-800: #0B1C33;
  --navy-700: #112944;
  --navy-600: #16365C;
  --navy-card: #0E1F3A;

  --cyan-500: #1FB6D5;
  --cyan-400: #28C2DE;
  --cyan-300: #6CD8EC;

  --blue-600: #1E48E0;
  --blue-500: #2B5BFF;
  --blue-400: #4F7BFF;

  --coral-500: #F36B1F;
  --coral-400: #FF7A2A;
  --coral-300: #FF8E48;

  --paper: #FFFFFF;
  --paper-2: #F4F5F7;
  --paper-3: #E9EDF1;
  --ink-100: #DDE3EE;
  --ink-200: #A9B4C4;
  --ink-300: #6E7C92;
  --ink-400: #4A5870;

  --rule-light: rgba(11, 28, 51, 0.10);
  --rule-light-strong: rgba(11, 28, 51, 0.30);
  --rule-dark: rgba(255,255,255,0.10);
  --rule-dark-strong: rgba(255,255,255,0.22);

  --font-display: "Vend Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Vend Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-w: 1480px;
  --gutter: clamp(20px, 4.4vw, 72px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy-900);
  color: var(--navy-900);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-500);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
}
.eyebrow-mono::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6;
}
.eyebrow-mono.on-dark { color: var(--coral-400); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

/* ============================================================
   PAGE HAIRLINE GRID — continuous 4-column vertical hairlines
   that run unbroken from the top of the homepage to the bottom.
   Each section drops in a .page-rails div that spans the full
   section height. Rails are positioned to match .container's
   content area (max 1480px, centered, with var(--gutter) padding),
   so they align across sections regardless of section padding or
   internal layout. Use `.page-rails.light` on light sections to
   tint the lines for the lighter background.
   ============================================================ */
section, footer.site { position: relative; }

.page-rails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: flex;
  justify-content: center;
}
.page-rails-inner {
  width: 100%;
  max-width: var(--max-w);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
}
.page-rails-inner > span {
  border-left: 1px solid rgba(255,255,255,0.07);
}
.page-rails-inner > span:last-child {
  border-right: 1px solid rgba(255,255,255,0.07);
}
.page-rails.light .page-rails-inner > span,
.page-rails.light .page-rails-inner > span:last-child {
  border-color: rgba(11,28,51,0.07);
}

/* ============================================================
   HEADER
   ============================================================ */
header.site {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  background: rgba(8, 20, 36, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* Always visible. Scroll-aware compression + tint on scroll
     handled via .scrolled class. */
  transition: background .35s ease,
              border-color .35s ease,
              padding .32s cubic-bezier(.2,.7,.2,1);
}
header.site.scrolled {
  background: rgba(8, 20, 36, 0.96);
  border-bottom-color: rgba(255,255,255,0.12);
}
.nav-row {
  display: flex; align-items: center;
  height: 84px; gap: 32px;
  transition: height .35s cubic-bezier(.2,.7,.2,1);
}
header.site.scrolled .nav-row {
  height: 64px;
}

/* Scroll progress thread — coral hairline pinned to the very top
   of the viewport that fills left-to-right as the page scrolls.
   Sits above the header so it stays visible even when the header
   hides on scroll-down. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--coral-500);
  z-index: 90;
  pointer-events: none;
  will-change: width;
}

/* Custom cursor — restrained "precision instrument" feel.
   Small coral dot tracks the pointer exactly; a thin ring lags
   slightly with easing, growing larger on interactive elements.
   JS adds .has-custom-cursor to <body> only on devices with
   hover capability AND no reduced-motion preference, so touch
   devices and accessibility users get the native cursor. */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  will-change: transform;
  opacity: 0;
  transition: opacity .25s ease;
}
.has-custom-cursor .cursor-dot,
.has-custom-cursor .cursor-ring { opacity: 1; }
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--coral-500);
  margin: -3px 0 0 -3px;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid var(--coral-500);
  margin: -14px 0 0 -14px;
  transition: width .28s cubic-bezier(.2,.7,.2,1),
              height .28s cubic-bezier(.2,.7,.2,1),
              margin .28s cubic-bezier(.2,.7,.2,1),
              border-color .28s ease,
              opacity .25s ease;
}
.cursor-ring.over {
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-color: var(--cyan-400);
}
/* Hide native cursor everywhere when custom cursor is active */
.has-custom-cursor,
.has-custom-cursor * { cursor: none !important; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-family: var(--font-display);
  font-weight: 500; font-size: 22px; letter-spacing: -0.01em;
}
.brand .vmark {
  width: 26px; height: 26px;
  background:
    linear-gradient(135deg, var(--cyan-500) 0%, var(--cyan-300) 70%, var(--cyan-500) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 1px 6px rgba(31,182,213,0.35));
}
.brand .wordmark { color: #fff; }
.brand img.brand-img {
  height: 28px;
  width: auto;
  max-width: none;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

nav.primary {
  display: flex; align-items: center; gap: 36px;
  margin: 0 auto;
}
nav.primary > a,
.nav-item > a {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s ease;
  white-space: nowrap;
}
nav.primary > a:hover,
.nav-item:hover > a { color: var(--cyan-300); }

/* Nav trigger — button replacing <a> for parent items with dropdowns */
.nav-trigger {
  background: none; border: none; padding: 8px 0;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: color .2s ease;
  white-space: nowrap;
}
.nav-trigger:hover,
.nav-item:hover .nav-trigger { color: var(--cyan-300); }

/* ── Dropdown nav ─────────────────────────────────── */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Chevron arrow */
.nav-chevron {
  width: 10px; height: 6px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid var(--coral-500);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.7,.2,1), visibility .2s ease;
  z-index: 1000;
}
/* Invisible hover bridge — prevents gap from closing dropdown */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -14px; left: 0;
  width: 100%; height: 14px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown links */
.nav-dropdown a {
  display: block !important;
  padding: 10px 20px 10px 20px !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease, padding-left .15s ease !important;
}
.nav-dropdown a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.05) !important;
  border-left-color: var(--coral-500) !important;
  padding-left: 24px !important;
}

/* Mobile menu groups — collapsible */
.mobile-menu-group { display: flex; flex-direction: column; }
.mobile-menu-group-label {
  display: flex !important; align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  cursor: pointer;
  user-select: none;
}
.mobile-menu-group-chevron {
  width: 12px; height: 7px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.mobile-menu-group.is-open .mobile-menu-group-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.mobile-menu-sub {
  display: flex; flex-direction: column;
  padding-left: 16px;
  border-left: 2px solid var(--coral-500);
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.7,.2,1), margin .3s ease;
  margin: 0;
}
.mobile-menu-group.is-open .mobile-menu-sub {
  max-height: 500px;
  margin: 6px 0 12px;
}
.mobile-menu-sub a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  padding: 9px 0 !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  transition: color .15s ease !important;
}
.mobile-menu-sub a:hover,
.mobile-menu-sub a:active { color: var(--cyan-300) !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 24px;
  transition: background .25s ease, color .25s ease, transform .2s ease;
  white-space: nowrap;
}
.btn-light { background: #fff; color: var(--navy-900); }
.btn-light:hover { background: var(--navy-900); color: #fff; }
.btn-blue { background: var(--blue-600); color: #fff; }
.btn-blue:hover { background: var(--navy-900); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--blue-600); }
.btn-ghost-dark { color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-ghost-dark:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
/* Reduce gap between Careers and Contact Us buttons in the nav */
.nav-row > .btn-ghost-dark { margin-right: calc(20px - 32px); }

.btn .arrow { width: 16px; height: 16px; }

/* Split button: text panel + colored arrow square */
.btn-split {
  display: inline-flex; align-items: stretch;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease;
}
.btn-split .btn-label {
  padding: 16px 22px;
  display: flex; align-items: center;
  transition: background .25s ease, color .25s ease;
}
.btn-split .btn-icon {
  width: 52px;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease;
}
.btn-split .btn-icon svg { width: 18px; height: 18px; }
.btn-split-light .btn-label { background: #fff; color: var(--navy-900); }
.btn-split-light .btn-icon { background: var(--blue-600); color: #fff; }
.btn-split-light:hover .btn-icon { background: var(--cyan-500); }
.btn-split-dark .btn-label { background: var(--navy-900); color: #fff; }
.btn-split-dark .btn-icon { background: var(--blue-600); color: #fff; }
.btn-split-dark:hover .btn-icon { background: var(--cyan-500); }

.menu-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; padding-top: 84px;
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: #fff;
  overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 84px 0 56px 0;
  /* Static gradient + image fallback shows if the video fails to load.
     The video element covers this when present. */
  background:
    linear-gradient(180deg, rgba(8,20,36,0.45) 0%, rgba(8,20,36,0.85) 90%),
    radial-gradient(ellipse at 50% 80%, rgba(20,80,180,0.6), rgba(8,20,36,0.95) 70%),
    url("img/hero-keyboard.jpg");
  background-size: cover; background-position: center 70%;
  overflow: hidden;
}
/* Hero background video — fills .hero-bg, sits behind the overlays
   (halftone dots, side glow, color tint). */
.hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: contrast(1.1) saturate(0.9);
  pointer-events: none;
}
/* Color tint overlay on top of the video so the hero stays dark
   and on-brand instead of showing the raw video footage. */
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,20,36,0.55) 0%, rgba(8,20,36,0.85) 90%),
    radial-gradient(ellipse at 50% 80%, rgba(20,80,180,0.45), rgba(8,20,36,0.0) 60%);
  pointer-events: none;
}
/* Side glow / halftone dot overlay layer on top of the video. */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px) 0 0 / 3px 3px,
    linear-gradient(90deg, rgba(0,150,255,0.45) 0, rgba(0,150,255,0) 4%, rgba(0,150,255,0) 96%, rgba(0,150,255,0.45) 100%);
  background-blend-mode: overlay, screen;
  mix-blend-mode: screen; opacity: 0.5;
  pointer-events: none;
}
.hero-glow {
  position: absolute; top: 84px; bottom: 56px;
  width: clamp(60px, 8vw, 140px);
  pointer-events: none; z-index: 2;
  mix-blend-mode: screen; opacity: 0.85;
}
.hero-glow.left { left: 0;
  background-image: url("img/Side%20Gradient%20Left.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.hero-glow.right { right: 0;
  background-image: url("img/Side%20Gradient%20Right.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hero-grid {
  position: absolute; inset: 84px 0 56px 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 25% 33%;
  background-position: 0 0;
}

/* Crosshair marker — uses crosshairs.svg from the img folder.
   Positioned by its CENTER (not its top-left corner) via
   transform: translate(-50%, -50%), so left/top values can be set
   to the exact x/y of the grid intersection it should land on. */
.crosshair {
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
  background-image: url("img/crosshairs.svg");
  background-size: 28px 28px;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  opacity: 0.85;
}

.hero-inner {
  position: relative; z-index: 3;
  padding: 56px 0 36px;
  /* Cap by viewport so the hero ALWAYS fits on screen on short
     laptops, but stays generous on tall displays. 144px reserves
     room for the fixed 84px header + 56px hero-strip + breathing. */
  min-height: min(720px, calc(100vh - 144px));
  display: flex; flex-direction: column; justify-content: center;
}

.hero-eyebrow-top {
  text-align: center;
  padding-top: 28px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-500);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  /* Cap reduced from 112px → 92px so 2-line headline fits inside
     the hero's vertical budget on most laptop viewports. */
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  max-width: 1320px;
}
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .mask { display: block; line-height: 1.0; }

.hero-bottom {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: end;
  padding: 0 0 32px;
  gap: 24px;
}
.hero-status {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.hero-status .row { display: flex; align-items: center; gap: 10px; }
.hero-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2BD45A;
  box-shadow: 0 0 10px rgba(43,212,90,0.6);
}

.hero-cta-link {
  display: inline-flex; flex-direction: column; gap: 8px;
  align-items: stretch; min-width: 360px;
}
.hero-cta-link a {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  transition: color .2s ease, padding-right .2s ease;
}
.hero-cta-link a .arrow {
  color: var(--coral-500);
  width: 24px; height: 16px;
  transition: transform .2s ease;
}
.hero-cta-link a:hover { padding-right: 8px; }
.hero-cta-link a:hover .arrow { transform: translateX(4px); }

.hero-strip {
  position: relative; z-index: 4;
  background: var(--navy-800);
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-100);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-strip .left { display: flex; align-items: center; gap: 28px; }
.hero-strip .slashes { color: var(--cyan-400); letter-spacing: 0.04em; }
.hero-strip .right { color: var(--cyan-400); }

/* ============================================================
   HERO TAGLINE BAR
   Full-width descriptive band immediately under the hero, in
   ValidaTek brand blue. Carries the core positioning statement —
   inspired by the Nightwing hero pattern. Sits between the hero
   and the next section, breaking up the dark stack with a vivid
   color band.
   ============================================================ */
.hero-tagline {
  background: #2E65F3;
  color: #fff;
  padding: clamp(48px, 6vw, 88px) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.hero-tagline p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 auto;
  max-width: 1100px;
  text-align: center;
}

/* ============================================================
   BUILT IN-HOUSE
   ============================================================ */
.built-in-house {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: 640px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.built-left {
  background: var(--paper);
  padding: 140px var(--gutter) 140px clamp(48px, 8vw, 140px);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--navy-900);
}
.built-left .eyebrow-mono { color: var(--navy-900); margin-bottom: 28px; }
.built-left h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--navy-900);
  margin: 0 0 64px; max-width: 640px;
}
.built-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}
.built-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: center;
}
.built-item .pmark {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.built-item .pmark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.built-item h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.018em;
  line-height: 1; margin: 0 0 8px;
  color: var(--navy-900);
}
.built-item .role {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan-500);
}
.built-right {
  background:
    url("img/Built%20In%20house.jpg") center / cover no-repeat,
    var(--navy-900);
  position: relative; overflow: hidden;
}
.built-right .platform-art { display: none; }

/* ============================================================
   TRUSTED
   ============================================================ */
.trusted {
  background: var(--paper);
  padding: 112px 0 112px;
  text-align: center;
}
.trusted-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy-900);
  margin-bottom: 56px;
  display: inline-flex; align-items: center; gap: 14px;
}
.trusted-label::before, .trusted-label::after {
  content: ""; flex: 0 0 36px; height: 1px; background: rgba(11,28,51,0.25);
}
.agency-row {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.agency-track {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  animation: agency-scroll 36s linear infinite;
}
.agency-row:hover .agency-track { animation-play-state: paused; }
.agency {
  flex: 0 0 max(280px, 25vw);  /* exactly 4 logos visible at a time */
  height: 90px;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1); opacity: 0.6;
  transition: opacity .3s ease, filter .3s ease;
}
.agency img { max-height: 80px; max-width: 100%; height: auto; width: auto; }
.agency:hover { opacity: 1; filter: grayscale(0); }
.agency .fb {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--navy-900); text-transform: uppercase;
  text-align: center;
}
@keyframes agency-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   WHAT WE DELIVER
   ============================================================ */
.deliver {
  background: var(--navy-900); color: #fff;
  padding: 160px 0 160px;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#explore.deliver { padding-bottom: 0; }
#cost.deliver { padding-top: 0; padding-bottom: 0; }
#challenge.deliver { padding: 80px 0; }
#mission-alignment.deliver { padding: 80px 0; }
#agencies.deliver { padding-top: 80px; }
#performance.deliver { padding: 25px 0; }
#next-steps.deliver { padding: 80px 0; }
#platforms.deliver { padding: 80px 0; }
#capabilities.deliver { padding: 40px 0; }
#compliance.deliver { padding: 80px 0; }
#customer-success.deliver { padding: 80px 0; }
#credibility.deliver { padding: 80px 0; }
#how-it-works.deliver { padding: 80px 0; }
#use-cases.deliver { padding: 80px 0; }
#faq.deliver { padding: 80px 0; }
.deliver::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--blue-500) 30%, var(--cyan-500) 60%, transparent 100%);
  filter: blur(2px); opacity: 0.32;
}
.deliver::after {
  content: ""; position: absolute; right: 0; top: 50%; bottom: -10%; width: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--blue-500) 30%, var(--cyan-500) 60%, transparent 100%);
  filter: blur(2px); opacity: 0.32;
}
.deliver-head {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 40px; align-items: end;
  margin-bottom: 96px;
}
.deliver-head-left .eyebrow-mono { margin-bottom: 24px; }
.deliver-head h2.eyebrow-mono { font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0.22em; line-height: 1; color: var(--coral-400); margin: 0 0 24px; }
#agencies .deliver-head { grid-template-columns: 1fr; }
#performance .deliver-head { grid-template-columns: 1fr; }
#performance .deliver-head p { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; color: #fff; max-width: none; margin: 0 0 28px; }
#agencies .deliver-head p { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 56px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; color: #fff; max-width: 1100px; }
.deliver-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 28px;
}
.deliver-head p {
  color: var(--ink-100); font-size: 15.5px; line-height: 1.55;
  max-width: 640px; margin: 0;
}
.deliver-head-right { display: flex; justify-content: flex-end; align-items: center; }

/* 4-column grid with no gap — each .cap-card spans 2 columns so
   the 2 cards sit flush against the page rails at 0% / 50% / 100%
   of the container content area. */
.deliver-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  position: relative;
  /* Each card sizes to its own content height — when one card is hovered
     and reveals its Key Focus Areas, only that card grows. Sibling cards
     in the same row stay compact instead of stretching to match. */
  align-items: start;
}
.deliver-grid > .cap-card { grid-column: span 2; }
.deliver-grid > .cap-card + .cap-card { border-left: 0; }
.deliver-grid > .cap-card:nth-child(n+3) { border-top: 0; }
.cap-card {
  position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13, 32, 60, 0.55);
  padding: 28px 32px 32px;
  display: flex; flex-direction: column;
  transition: border-color .3s ease, background .3s ease;
}
.cap-card:hover { border-color: rgba(255,255,255,0.24); background: rgba(13, 32, 60, 0.85); }
.cap-image {
  aspect-ratio: 16 / 7;
  /* 100% of card content box + 64px to bleed past the 32px horizontal
     padding on each side, giving the image edge-to-edge card width. */
  width: calc(100% + 64px);
  /* max-height stays just above the natural rest height (~290px at desktop)
     so it's a no-op at rest, but only by a small cushion — collapses start
     visibly almost immediately on hover instead of after an anticipation
     pause. `max-height` is numeric on both ends so the browser actually
     interpolates, unlike `aspect-ratio: auto` or `height: auto → 8px`. */
  max-height: 300px;
  /* Bleed past the card's 32px horizontal padding so the image (and the
     orange sliver it collapses to on hover) spans the full card width. */
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -28px;
  /* Coral sits behind the photo — revealed on hover as the ::before
     pseudo (photo + halftone) fades to transparent. */
  background-color: var(--coral-500);
  position: relative; overflow: hidden;
  margin-bottom: 0;
  flex-shrink: 0;
  z-index: 2;
}
.cap-image::before {
  /* Photo layer (per-card --cap-photo URL) plus the halftone-dot overlay,
     both fading together on hover to leave clean coral behind. `cover`
     on the photo guarantees the coral is fully hidden at rest regardless
     of the source file's aspect ratio. */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(11,28,51,0.85) 0.7px, transparent 1.5px),
    var(--cap-photo, none);
  background-repeat: repeat, no-repeat;
  background-position: 0 0, center center;
  background-size: 4px 4px, cover;
  pointer-events: none;
  transition: opacity 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.cap-1 { --cap-photo: url("img/Enterprise%20IT%20Ops.jpg"); }
.cap-2 { --cap-photo: url("img/Cyber%20Zero%20Trust.jpg"); }
.cap-3 { --cap-photo: url("img/Cloud%20DevSecOps.jpg"); }
.cap-4 { --cap-photo: url("img/Data%20Intelligence.jpg"); }

.cap-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 32px; letter-spacing: -0.018em; line-height: 1.1;
  color: #fff; margin: 0 0 16px; flex-shrink: 0;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cap-card p {
  color: var(--ink-100); font-size: 15px; line-height: 1.55;
  margin: 0 0 22px; flex-shrink: 0;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* On hover the image collapses to an 8px window (a thin slice of the
   same picture, not a squashed copy) and the photo layer fades out to
   reveal the coral background. Title + body copy stay visible above;
   the Key Focus list expands in-flow below. */
.cap-image {
  transition: max-height 1.3s cubic-bezier(0.65, 0, 0.35, 1),
              margin-bottom 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.cap-card:hover .cap-image,
.cap-card:focus-within .cap-image {
  max-height: 8px;
  margin-bottom: 18px;
}
.cap-card:hover .cap-image::before,
.cap-card:focus-within .cap-image::before {
  opacity: 0;
}
/* capabilities.html — By the Numbers section padding */
#numbers { padding-top: 100px; padding-bottom: 100px; }
@media (max-width: 767px) {
  #numbers { padding-top: 60px; padding-bottom: 60px; }
  #cost.deliver { padding-top: 0; padding-bottom: 0; }
}

/* capabilities.html only — 4 cards need less scroll runway than 6 (desktop only) */
@media (min-width: 1101px) {
  #capabilities .cap-pin-wrap { height: 380vh; }
}

@media (hover: none) {
  .cap-card .cap-image { max-height: 300px !important; opacity: 1 !important; }
}

.cap-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-400);
  text-decoration: none;
  margin-top: 12px;
  transition: gap .2s ease, color .2s ease;
}
.cap-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.cap-link:hover { gap: 14px; color: var(--cyan-300); }

/* Whole-card clickable — the .cap-cta btn-split CTA stretches an
   invisible click target over the entire card via ::before. Other
   content stays selectable thanks to text-selection precedence. */
.cap-card { cursor: pointer; }
.cap-card .cap-cta {
  align-self: flex-start;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.cap-card .cap-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Card hover drives the CTA arrow color too, so the CTA reads as
   "live" anywhere the user is hovering on the card. */
.cap-card:hover .cap-cta .btn-icon { background: var(--cyan-500); }
/* Key Focus Areas: in-flow block that sits between the body copy and
   the CTA. Collapsed at rest (max-height 0, hidden), expands open on
   card hover. The image above shrinks to an 8px window to make room. */
.cap-focus {
  display: flex;
  flex-direction: column;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-500) transparent;
  transition: max-height 1.3s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 1.3s cubic-bezier(0.65, 0, 0.35, 1),
              margin 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
/* WebKit scrollbar — thin cyan thumb on a subtle track, matching the
   design language. Forcing always-visible (no macOS overlay) so the
   affordance is consistent. */
.cap-focus::-webkit-scrollbar {
  width: 6px;
  -webkit-appearance: none;
}
.cap-focus::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}
.cap-focus::-webkit-scrollbar-thumb {
  background: var(--cyan-500);
  border-radius: 0;
}
.cap-focus::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-300);
}
.cap-card:hover .cap-focus,
.cap-card:focus-within .cap-focus {
  max-height: 520px;
  opacity: 1;
  margin: 0 0 22px;
}
@media (hover: none) {
  /* Touch: focus panel is always shown below the body copy. */
  .cap-focus { max-height: none; opacity: 1; margin: 0 0 22px; }
}
.cap-focus-label {
  font-family: var(--font-display); font-weight: 400;
  font-size: 16px; color: #fff; letter-spacing: -0.005em;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.cap-focus ul { list-style: none; padding: 0; margin: 0; }
.cap-focus li {
  display: grid; grid-template-columns: 20px 1fr; gap: 8px;
  align-items: start;
  padding: 6px 0;
  color: var(--ink-100); font-size: 13.5px; line-height: 1.4;
}
.cap-focus li::before {
  content: "✓"; color: var(--cyan-500); font-weight: 600;
}

/* ============================================================
   HOW IT WORKS — 4-column grid, pinned section with staggered
   scroll-driven reveal of each card one at a time.
   ============================================================ */
.how-it-works {
  background: var(--navy-900); color: #fff;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.how-grid-overlay { display: none; }

/* Section sizes to its content. Cards reveal as they enter the viewport
   via IntersectionObserver in script.js — no scroll-pin runway, no
   sticky positioning, no overflow clipping. */
.how-pin-wrap {
  position: relative;
}
.how-pin {
  display: flex; flex-direction: column;
  padding: 160px 0 48px;  /* clears the 84px fixed header and adds generous breathing room above the eyebrow */
  box-sizing: border-box;
}
.how-pin .how-head {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) 128px;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: end;
  flex: 0 0 auto;
}
.how-head-left .eyebrow-mono { margin-bottom: 20px; }
.how-head h2 {
  font-family: var(--font-display); font-weight: 400;
  /* Reduced for global "airy" feel. Still large enough to
     anchor the pinned section without crowding the cards. */
  font-size: clamp(30px, 4vw, 60px); line-height: 1.04;
  letter-spacing: -0.035em; color: #fff; margin: 0;
}
.how-head-right {
  display: flex; flex-direction: column; align-items: stretch; gap: 24px;
}
.how-head-right p {
  color: var(--ink-100); font-size: 15.5px; line-height: 1.55;
  max-width: 540px; margin: 0;
}
.how-head-right .btn { align-self: flex-start; }

/* 4-column grid with no gap — each .sol card occupies one column
   and sits flush against the section's page rails. The cards' own
   1px borders coincide exactly with the rail positions, so the
   hairlines visually become the card edges.
   align-items: start prevents the grid from stretching cards to
   the row's tallest item; combined with min-height on .sol, all
   four cards render at the same fixed height regardless of how
   much body copy each one contains. */
.how-stack {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 var(--gutter);
  max-width: var(--max-w); margin: 0 auto;
  flex: 1 1 auto;
  align-items: start;
}
.how-stack > .sol + .sol { border-left: 0; }
.sol {
  position: relative; z-index: 2;
  padding: 32px 28px 32px;
  min-height: 320px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.08);
  /* .sol is rendered as an <a> on the home page so the whole card is clickable. */
  color: inherit;
  text-decoration: none;
  /* Hidden initial state — JS toggles .revealed to fade/slide each in */
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.3s ease;
  will-change: opacity, transform;
}
.sol:hover { border-color: rgba(255,255,255,0.22); }
.sol.revealed { opacity: 1; transform: translateY(0); }
.sol.revealed:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px -16px rgba(0,0,0,0.5);
  z-index: 3;
}
/* Staggered cards (MissionIQ, vRAMPART) sit 64px below their neighbors
   via margin-top — when hovered, lift the extra 64px so their full
   descriptions clear the section's overflow:hidden clipping. */
.sol.revealed.sol-2:hover,
.sol.revealed.sol-4:hover {
  transform: translateY(-64px);
}

/* Alternating high/low positioning — cards 1 + 3 anchor to the top of
   the row, cards 2 + 4 sit lower. The zig-zag rhythm matches the
   reference design and keeps total row height compact enough that
   no card gets clipped at the bottom of the pinned viewport. The
   reveal animation (opacity + 48px translateY) runs independently of
   margin-top so each card animates from 48px below its anchor
   position, then locks. */
.sol-1 { margin-top: 0; }
.sol-2 { margin-top: 64px; }
.sol-3 { margin-top: 0; }
.sol-4 { margin-top: 64px; }

/* Icon sits at the top of the card, right-aligned */
.sol-icon {
  width: 56px; height: 56px;
  align-self: flex-end;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sol-icon img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 10px rgba(31,182,213,0.35)); }
/* Conductor logo carries more visual mass than the slimmer M / A / V
   letterforms — scale it down in the small product-mark contexts so
   all four product marks feel optically the same size. Scoped to the
   mark contexts only (.sol-icon, .pmark, .tech-pmark) so the rule
   doesn't accidentally hit large hero / use-case photos whose file
   names happen to contain "Conductor". */
.sol-icon img[src*="Conductor"],
.pmark img[src*="Conductor"],
.tech-pmark img[src*="Conductor"] { transform: scale(0.82); transform-origin: center; }
.sol-icon.fallback {
  background: linear-gradient(135deg, var(--cyan-500) 0%, var(--cyan-300) 60%, var(--cyan-500) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sol .verb {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan-400);
  margin: auto 0 6px;
}
.sol h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.018em;
  line-height: 1.12;
  color: #fff; margin: 0 0 10px;
}
/* Solutions page: h3 (name) first, h4.verb (label) second */
.how-stack .sol h3 { margin: auto 0 6px; }
.how-stack .sol .verb { margin: 0 0 10px; }
#our-solutions .how-pin { overflow: visible; padding-bottom: 112px; }
#vset.deliver { padding: 160px 0; }
#vset .pain-cinema-line { max-width: none; }
#vset .pain-cinema-thesis { font-size: 38px; }
#vset .vset-right .eyebrow-mono { margin-bottom: 20px; }
.vset-inner {
  display: grid;
  grid-template-columns: 2fr 5fr;
  gap: 48px;
  align-items: center;
}
.vset-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 48px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.vset-right {
  padding-left: 0;
  border-left: 0;
}
@media (max-width: 860px) {
  .vset-inner { grid-template-columns: 1fr; gap: 40px; }
  .vset-right { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; }
}
.sol p {
  color: var(--ink-100); font-size: 14.5px; line-height: 1.55;
  margin: 0;
}

.how-cross { display: none; }


/* ============================================================
   WHY VALIDATEK
   ============================================================ */
.why {
  background: var(--navy-900); color: #fff;
  padding: 160px 0 0;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.why::before {
  content: ""; position: absolute; left: 0; top: 24%; height: 60vh; width: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--blue-500) 40%, var(--cyan-500) 70%, transparent 100%);
  filter: blur(2px); opacity: 0.35;
}
.why-top {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 64px; align-items: center;
}
.why-copy .eyebrow-mono { margin-bottom: 28px; }
.why-copy h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4vw, 64px); letter-spacing: -0.035em;
  line-height: 1.05; margin: 0 0 24px; color: #fff;
}
.why-copy p {
  color: var(--ink-100); font-size: 16px; line-height: 1.55;
  max-width: 460px; margin: 0;
}
.why-photo {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(20,40,80,0.4), rgba(8,20,36,0.6)),
    url("img/Why%20Validatek.jpg");
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.why-photo::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.75) 0.6px, transparent 1.5px);
  background-size: 4px 4px;
  mix-blend-mode: multiply; opacity: 0.5;
}
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  position: relative;
  /* align-items: start prevents the grid from stretching stat
     blocks to the row's tallest item, so the staggered margin-top
     on the middle stat creates a visible zig-zag instead of just
     adding extra empty space below the others. */
  align-items: start;
}
.stat {
  position: relative; z-index: 1;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
/* Top-Bottom-Top zig-zag — same rhythm as the How It Works cards.
   The middle stat sits 64px lower than the outer two. */
.stat:nth-child(1) { margin-top: 0; }
.stat:nth-child(2) { margin-top: 64px; }
.stat:nth-child(3) { margin-top: 0; }
.stat::before {
  content: attr(data-idx);
  position: absolute; top: 14px; right: 0;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.4);
}
.stat .num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 6.4vw, 104px);
  line-height: 0.95; letter-spacing: -0.045em;
  color: #fff;
  display: flex; align-items: baseline;
}
.stat .num sup {
  font-size: 0.42em; vertical-align: top; font-weight: 400;
  color: var(--cyan-400); letter-spacing: 0; margin-left: 4px;
}
.stat .lbl {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-top: 22px; color: var(--cyan-400);
}
.stat .body {
  margin-top: 22px; color: var(--ink-200);
  font-size: 15px; line-height: 1.6;
  max-width: 360px;
}

/* Why ValidaTek stats — flows naturally into the dither horizon
   below. Sticky pin disabled so the stats only take their content
   height (no viewport-tall dead space below them). */
.why-stats-pin-wrap {
  position: relative;
  height: auto;
}
.why-stats-pin {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  padding: 64px 0 48px;
  box-sizing: border-box;
}
.why-stats-pin .container { width: 100%; }
.why-stats-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-200);
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 64px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.why-stats-eyebrow::before {
  content: ""; flex: 0 0 56px; height: 1px;
  background: rgba(255,255,255,0.22);
}
.why-stats-eyebrow .slash {
  color: var(--cyan-400); letter-spacing: 0.04em;
}
.why-stats-eyebrow.revealed { opacity: 1; transform: translateY(0); }
.stat[data-stat-stagger] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.stat[data-stat-stagger].revealed {
  opacity: 1; transform: translateY(0);
}

/* Insights page — 4-stat variant of the .stats grid. Keeps the same
   typography + reveal animation as the homepage's 3-stat block but
   extends the zig-zag rhythm to top / bottom / top / bottom. Gated to
   desktop only so the existing responsive `.stats { 1fr }` can collapse
   the grid to a single column on tablet/mobile. */
@media (min-width: 1101px) {
  .cert-results .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
  }
  .cert-results .stat:nth-child(4) { margin-top: 64px; }
}

/* ============================================================
   OUR PEOPLE
   ============================================================ */
.people {
  background: var(--paper-2);
  padding: 160px 0;
  color: var(--navy-900);
}
.people-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end;
  margin-bottom: 96px;
}
.people-head .eyebrow-mono { margin-bottom: 24px; color: var(--coral-500); }
.people-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4vw, 64px); letter-spacing: -0.035em;
  line-height: 1.05; color: var(--navy-900); margin: 0 0 24px;
}
.people-head p {
  color: var(--navy-700); font-size: 16px; line-height: 1.55;
  max-width: 640px; margin: 0;
}

.people-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: #fff;
  border: 1px solid var(--rule-light);
}
.people-photo {
  /* No fixed aspect-ratio on desktop — let the grid stretch the
     photo to the full height of the cards column so there's no
     white sliver of grid background below it. Aspect-ratio is
     restored for mobile in the responsive block below. */
  min-height: 100%;
  background:
    linear-gradient(135deg, rgba(20,40,80,0.3) 0%, rgba(8,20,36,0.5) 100%),
    url("img/Team%20Behind%20Tech.jpg");
  background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.people-photo::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at center, rgba(255,255,255,0.8) 0.6px, transparent 1.5px);
  background-size: 4px 4px;
  mix-blend-mode: multiply; opacity: 0.5;
}
.people-cards {
  display: flex; flex-direction: column;
  padding: 32px 40px;
  justify-content: center;
}
.pcard {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 20px; align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-light);
}
.pcard:last-child { border-bottom: 0; }
/* Scroll-tied reveal for People cards */
.pcard[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(80px);
  transition: none;
}
.pcard[data-scroll-reveal].pinned {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.people-cards { overflow: hidden; }
.pcard-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.pcard-icon svg { width: 38px; height: 38px; stroke: var(--coral-500); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pcard h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: -0.018em; line-height: 1.15;
  color: var(--navy-900); margin: 0 0 12px;
}
.pcard p {
  color: var(--navy-700); font-size: 15px; line-height: 1.55;
  margin: 0;
}

/* ============================================================
   MANAGEMENT APPROACH
   ============================================================ */
.approach {
  background: #fff;
  padding: 160px 0 160px;
  color: var(--navy-900);
}
.approach-head { margin-bottom: 96px; text-align: center; }
.approach-head .eyebrow-mono { margin-bottom: 24px; justify-content: center; }
.approach-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.2vw, 68px); letter-spacing: -0.035em;
  line-height: 1.05; color: var(--navy-900); margin: 0 0 24px;
}
.approach-head p {
  color: var(--navy-700); font-size: 16px; line-height: 1.55;
  max-width: 720px; margin: 0 auto;
}
.approach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border: 1px solid var(--rule-light);
  padding: 24px;
}
/* Each approach card is wrapped so the mono eyebrow row sits ABOVE
   the colored block on the section background, with the colored
   block sized to its own content. */
.acard-wrap {
  display: flex; flex-direction: column; gap: 20px;
}
.acard-wrap .ah {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy-900);
}
.acard-wrap .ah .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral-500);
}
.acard {
  padding: 32px 36px 36px;
  min-height: 360px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 56px;
}
.acard-blue { background: var(--blue-600); color: #fff; }
.acard-dark { background: var(--navy-900); color: #fff; }
.acard-cyan { background: #0DC0E2; color: var(--navy-900); }
.acard h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.018em;
  line-height: 1.15; color: #fff; margin: 0;
}
.acard p {
  color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.55;
  margin: 0; max-width: 480px;
}
/* Cyan card overrides — placed AFTER .acard h3 / .acard p so the
   navy text color wins the cascade instead of being overridden by
   the white default. */
.acard-cyan h3 { color: var(--navy-900); }
.acard-cyan p { color: var(--navy-900); }

/* ============================================================
   GET STARTED
   ============================================================ */
.get-started {
  background: var(--navy-900); color: #fff;
  position: relative; overflow: hidden;
}
.gs-strip {
  background: var(--navy-800);
  padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-100);
  position: relative; z-index: 3;
}
.gs-strip .slashes { color: var(--cyan-400); letter-spacing: 0.04em; }

.gs-bg {
  position: absolute; inset: 56px 0 0 0;
  background:
    linear-gradient(180deg, rgba(8,20,36,0.45) 0%, rgba(8,20,36,0.30) 60%, rgba(8,20,36,0.85) 100%),
    url("img/prefooterCTABG.jpg");
  background-size: cover; background-position: center;
}
.gs-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.4px);
  background-size: 4px 4px;
  mix-blend-mode: overlay; opacity: 0.55;
}
.gs-inner {
  position: relative; z-index: 2;
  padding: 140px 0 0;
}
.gs-row {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 64px; align-items: start;
  padding-bottom: 96px;
}
.gs-row .eyebrow-mono { margin-bottom: 18px; color: var(--coral-500); }
.gs-row p {
  color: #fff; font-size: 16px; line-height: 1.55;
  max-width: 480px; margin: 0;
}
.gs-caps {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono); font-size: 14.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
}
.gs-caps a { color: #fff; transition: color .2s ease; }
.gs-caps a:hover { color: var(--cyan-400); }

.gs-bar {
  position: relative; z-index: 2;
  background: var(--blue-600);
  padding: 36px clamp(24px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin: 0 var(--gutter) 96px;
}
.gs-bar .h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -0.018em;
  color: #fff; margin: 0;
}

/* ============================================================
   FOOTER — refined-tech / engineered grid
   ============================================================ */
footer.site {
  background: var(--navy-950); color: #fff;
  padding: 0;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
footer.site::before {
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 520px; height: 520px;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
footer.site::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 18%,
    rgba(255,255,255,0.18) 82%,
    transparent 100%);
  pointer-events: none;
}
footer.site .container { position: relative; z-index: 1; }

/* Top eyebrow row — hairline + mono + slashes */
.foot-eyebrow {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-200);
}
.foot-eyebrow .label { color: #fff; }
.foot-eyebrow .slash { color: var(--cyan-400); letter-spacing: 0.04em; }
.foot-eyebrow .spacer { flex: 1; height: 1px; background: rgba(255,255,255,0.10); }
.foot-eyebrow .coords { color: var(--ink-300); }

/* Hero closer block */
.foot-hero {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 64px; align-items: end;
  padding: 128px 0 96px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.foot-hero h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.8vw, 60px); letter-spacing: -0.035em;
  line-height: 1.05; margin: 0;
  color: #fff;
}
.foot-hero h2 em {
  font-style: normal; color: var(--cyan-400);
}
.foot-hero-aside {
  display: flex; flex-direction: column; gap: 28px; align-items: flex-start;
}
.foot-hero-aside p {
  color: var(--ink-200); font-size: 15px; line-height: 1.55;
  max-width: 380px; margin: 0;
}

/* Footer top — vertically stacks two 4-column rows that both
   adhere to the page rails: a brand row (mark | description | meta)
   sits above a link row (4 nav columns). Each child of these rows
   maps directly onto a 25% rail tick, so every line in the footer
   resolves cleanly to the global grid. */
.foot-top {
  position: relative;
  padding: 96px 0 80px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Brand row — 4-col grid: mark in col 1, description spans cols
   2-3 (gives a comfortable line length), meta block in col 4. */
.foot-brand {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  margin-bottom: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.foot-brand .brand-large {
  grid-column: 1 / span 1;
  display: flex; align-items: center; gap: 12px;
  padding-right: 24px;
  margin-bottom: 0;
}
.foot-brand .brand-large .vmark { width: 38px; height: 38px; }
.foot-brand .brand-large .wordmark {
  font-family: var(--font-display); font-weight: 500;
  font-size: 36px; letter-spacing: -0.015em; color: #fff;
}
.foot-brand .brand-large img.brand-img {
  height: 42px;
  width: auto;
  max-width: none;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.foot-brand > p {
  grid-column: 2 / span 2;
  color: var(--ink-200); font-size: 14.5px; line-height: 1.6;
  max-width: none; margin: 0;
  padding: 0 24px;
}
.foot-brand-meta {
  grid-column: 4 / span 1;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-300);
  padding-left: 24px;
}
.foot-brand-meta .row {
  display: flex; align-items: center; gap: 14px;
}
.foot-brand-meta .row::before {
  content: ""; flex: 0 0 24px; height: 1px;
  background: rgba(255,255,255,0.22);
}
.foot-brand-meta .row strong {
  color: #fff; font-weight: 500;
}

/* Link row — 4-col grid with gap:0 so each column edge sits exactly
   at a 25% rail tick. Each column gets a 24px internal gutter on
   both sides so the link text breathes away from the rail lines. */
.foot-cols {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}

.foot-col {
  position: relative; z-index: 1;
  padding: 0 24px;
}
.foot-col h5 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--coral-500); margin: 0 0 24px;
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.foot-col h5::before {
  display: none;
}
.foot-col h5.spaced { margin-top: 32px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a {
  color: #fff; font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: color .2s ease, padding-left .25s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  display: inline-block;
}
.foot-col a,
.foot-col a:link,
.foot-col a:visited {
  color: #fff;
}
.foot-col a:hover {
  color: var(--cyan-400);
  padding-left: 12px;
}
/* Footer trim — hide the top eyebrow row (with longitude/latitude)
   and the version mark in the bottom row. Both removed visually
   without touching the markup so we don't have to edit every page. */
footer.site .foot-eyebrow,
footer.site .foot-bottom .mark {
  display: none;
}
.foot-col a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--cyan-400);
  transition: width .25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.foot-col a:hover::before { width: 8px; }
.foot-col-small { display: flex; flex-direction: column; }

/* Social icons — repositioned inside hero-aside */
.foot-social {
  display: flex; gap: 10px;
}
.foot-social a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.foot-social a:hover {
  background: var(--cyan-500);
  border-color: var(--cyan-500);
  transform: translateY(-2px);
}
.foot-social svg { width: 16px; height: 16px; fill: #fff; }

/* Bottom row — Vend Sans ledger */
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 28px 0 32px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-300); letter-spacing: 0.18em;
  text-transform: uppercase;
}
.foot-bottom .copy { color: var(--ink-200); }
.foot-bottom .legal {
  display: flex; gap: 24px; align-items: center;
}
.foot-bottom .legal a {
  color: var(--ink-300);
  transition: color .2s ease;
}
.foot-bottom .legal a:hover { color: var(--cyan-400); }
.foot-bottom .legal .sep { color: rgba(255,255,255,0.18); }
.foot-bottom .mark {
  display: flex; align-items: center; gap: 12px;
  color: #fff;
}
.foot-bottom .mark .slash { color: var(--cyan-400); letter-spacing: 0.04em; }

/* ============================================================
   INTERIOR PAGE HERO — simpler than the homepage .hero. No
   bg image; just centered eyebrow + h1 + body + CTA on a deep
   navy background with the same .hero-grid pattern behind it.
   Used on every interior page (about-us, customers, vrampart,
   etc.) so they share a consistent "front door" treatment.
   ============================================================ */
.page-hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: #fff;
  padding-top: 84px;
  overflow: hidden;
}
.page-hero-grid {
  position: absolute; inset: 84px 0 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 25% 33%;
}
/* ============================================================
   SECTION BRAND BOOKENDS — cyan/blue gradient panels scoped to
   the section they're placed in (NOT global). Used selectively
   as a design accent on key sections (hero + closing CTA, etc.)
   so they read as branded moments rather than constant chrome.
   Uses mix-blend-mode: screen so they brighten dark sections
   (where they pop) and fade on light sections.
   ============================================================ */
.page-glow {
  position: absolute;
  /* Shorter gradient — sits in the middle band of the section rather
     than running its full height. About 50% tall, vertically centered. */
  top: 50%;
  height: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: clamp(40px, 5.5vw, 110px);
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  opacity: 0.75;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.page-glow.left {
  left: 0;
  background-image: url("img/Side%20Gradient%20Left.png");
}
.page-glow.right {
  right: 0;
  background-image: url("img/Side%20Gradient%20Right.png");
}
@media (max-width: 640px) {
  .page-glow { display: none; }
}
.page-hero-inner {
  position: relative; z-index: 3;
  padding: 96px 0 96px;
  min-height: min(560px, calc(100vh - 144px));
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.page-hero .eyebrow-mono {
  margin: 0 auto 32px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 auto 32px;
  text-align: center;
  max-width: 1000px;
}
.page-hero-body {
  color: var(--ink-100);
  font-size: 17px; line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.page-hero-cta {
  display: flex; justify-content: center; gap: 14px;
}
.page-hero .crosshair {
  /* Position crosshairs from centered hero coordinates */
  z-index: 2;
}

/* ============================================================
   TIMELINE GRID — 3-card horizontal timeline. Each card shows
   a year/era label, a title, and a short body. Cards sit flush
   inside their own 3-column grid with 1px hairline borders so
   they form a visually engineered row.
   ============================================================ */
.timeline-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.timeline-card {
  position: relative; z-index: 1;
  padding: 40px 32px 48px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 16px;
}
.timeline-card:last-child { border-right: 0; }
.timeline-card .era {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-400);
}
.timeline-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em; line-height: 1.1;
  color: #fff; margin: 0;
}
.timeline-card p {
  color: var(--ink-100);
  font-size: 15px; line-height: 1.55;
  margin: 0;
}
.timeline-card .closing {
  margin-top: auto;
  color: var(--cyan-400);
  font-style: italic;
  font-size: 14.5px; line-height: 1.5;
}

/* Light-section variant for use on .paper backgrounds */
.timeline-grid.light {
  border-top-color: rgba(11,28,51,0.10);
}
.timeline-grid.light .timeline-card {
  border-right-color: rgba(11,28,51,0.10);
  border-bottom-color: rgba(11,28,51,0.10);
}
.timeline-grid.light .timeline-card h3 { color: var(--navy-900); }
.timeline-grid.light .timeline-card p { color: var(--navy-700); }
.timeline-grid.light .timeline-card .era { color: var(--coral-500); }

/* ============================================================
   YEAR-AS-ANCHOR CHAPTERS — pure-typography timeline. Each era
   is a "chapter": massive display-type year on the LEFT anchors
   the chronology; era subtitle + title + body + italic closing
   on the RIGHT delivers the story. No connecting line, no dots,
   no images. Generous vertical gap between chapters reads as
   editorial whitespace, not absence. Magazine-spread feel.
   Solves the previous overlap problem by removing the conflicting
   line-with-dots element entirely.
   ============================================================ */
/* Pin-stacked chapters. Each chapter is full viewport-height and
   sticky, so as the user scrolls each one stacks on top of the
   previous (opaque navy bg covers it). One chapter on screen at a
   time, generous airy spacing, reads like Stripe Press / Linear
   long-form. Section padding-bottom = 0 so the last chapter
   unsticks right at the section edge. */
.deliver.timeline-section {
  padding: 128px 0 96px;
  /* MUST override .deliver's overflow: hidden — sticky cards can't pin
     if any ancestor clips overflow. */
  overflow: visible !important;
}
.vchapters {
  position: relative;
  margin-top: 56px;
  padding: 0 var(--gutter);
}
/* Each chapter is a discrete CARD that pins on scroll. All cards
   pin at the same top offset, with z-index increasing per card so
   each subsequent card layers ON TOP of the previous one. */
.vchapter {
  position: sticky;
  top: 100px; /* clears the fixed header */
  min-height: auto;
  /* Each card has 40vh of scroll runway after it before the next
     card pushes it up. Tight enough that card 3 stacks visibly on
     top of card 2 without leaving a giant empty gutter at the end
     of the section. */
  margin: 0 auto 40vh;
  width: min(1280px, 100%);
  background: linear-gradient(180deg, rgb(13, 32, 60), rgb(8, 18, 38));
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  padding: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 80px);
  box-shadow: 0 40px 80px -32px rgba(0,0,0,0.7);
}
.vchapter:nth-child(1) { z-index: 1; }
.vchapter:nth-child(2) { z-index: 2; }
.vchapter:nth-child(3) { z-index: 3; }
.vchapter:nth-child(4) { z-index: 4; }
.vchapter:last-child { margin-bottom: 0; }
.vchapter:nth-child(5) { z-index: 5; }
/* Last card matches the others — same trailing margin gives card 3
   the same stick range and keeps the stack consistent. */
.vchapter:last-child { margin-bottom: 40vh; }
.vchapter-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(auto, 35%) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  box-sizing: border-box;
}
.vchapter-year-wrap {
  /* No longer sticky — the whole chapter is sticky now */
  position: static;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Photo placeholder beneath the year/metadata. 4:3 aspect, subtle navy
   gradient + grid pattern + crosshair mark + corner tag. .dither
   class auto-applies the duotone treatment when a real <img> is added. */
.vchapter-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  margin-top: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(40,194,222,0.04), transparent 60%),
    linear-gradient(135deg, rgba(13,32,60,0.85) 0%, rgba(8,18,38,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.vchapter-photo::before {
  /* hairline grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.vchapter-photo::after {
  /* centered crosshair mark */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.vchapter-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.vchapter-photo-tag {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  z-index: 2;
}
@media (max-width: 1100px) {
  .vchapter-photo {
    max-width: 320px;
    aspect-ratio: 16 / 10;
  }
}
.vchapter-metadata {
  margin-top: 18px;
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  /* Hidden by default; JS reveals it on first chapter activation */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s,
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
.vchapter.metadata-shown .vchapter-metadata {
  opacity: 1;
  transform: translateY(0);
}
.vchapter-metadata .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.92);
}
.vchapter-metadata .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.vchapter-year {
  /* Light-weight display type in soft white. Scaled to fit inside
     the bounded card — substantial but not blown out. */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: rgba(255,255,255,0.92);
  margin: 0;
}
.vchapter-content {
  display: flex; flex-direction: column; gap: 24px;
  padding-top: 0;
  max-width: 720px;
}
.vchapter-era {
  /* Subtle mid-gray mono caps — reads as a tag, not an accent */
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0;
}
.vchapter-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 60px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.vchapter-body {
  color: var(--ink-100);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.vchapter-closing {
  /* Italic light-gray for emphasis — restrained, no coral or cyan.
     The italic alone marks it as distinct. */
  color: var(--ink-200);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  margin: 4px 0 0;
}
@media (max-width: 1100px) {
  /* Drop sticky behavior on tablet/mobile — chapters flow normally */
  .vchapter {
    position: static;
    min-height: auto;
    margin: 0 0 40px;
    padding: 48px var(--gutter);
    width: 100%;
  }
  .vchapter:last-child { margin-bottom: 0; }
  .vchapter-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vchapter-photo { aspect-ratio: 16 / 9; }
  .vchapter-year { font-size: clamp(48px, 12vw, 88px); }
  .vchapter-content { max-width: none; }
  .vchapters { margin-top: 32px; }
}

/* ============================================================
   TIMELINE INTERACTIVE (legacy — vertical line + dots) — kept
   for any pages still using the old .vtimeline structure. The
   About Us page now uses .vchapters above instead.
   ============================================================ */

.vtimeline {
  position: relative;
  margin-top: 56px;
  /* Shift the entire timeline right so the image isn't flush
     against the container's left edge. Balances the empty space
     that exists on the right where the card max-width stops the
     text. Line at 25% of .vtimeline now sits at ~34% of container
     content, making the timeline read as more central + premium. */
  margin-left: 12%;
}
.vtimeline-track {
  position: absolute;
  top: 28px; bottom: 28px;
  left: 25%;
  width: 1px;
  background: rgba(255,255,255,0.14);
  z-index: 1;
  margin-left: -0.5px;
}
.vtimeline-line-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: var(--coral-500);
  box-shadow: 0 0 8px rgba(243,107,31,0.45);
  /* Linear, short-duration since JS updates this continuously on scroll */
  transition: height 0.18s linear;
  will-change: height;
}
.vtimeline-row {
  /* 2-col grid — image on the LEFT (left edge aligned with the
     section header), card content on the RIGHT (after the line
     at 25%). Image column is narrowed so the visible gap from
     image right edge to the line is 56px (matching card padding
     for symmetric 56px breathing on each side of the line). */
  position: relative;
  padding: 28px 0 32px;
  display: grid;
  grid-template-columns: calc(25% - 56px) 1fr;
  gap: 0;
  align-items: start;
}
.vtimeline-row::before {
  /* Dot anchored on the vertical line at 25% of row width,
     aligned vertically with the H3 TITLE (the row's primary
     visual anchor) — not the small era label above it. The
     value 66 puts the dot center at ~73px, aligning with the
     middle of the title line. */
  content: '';
  position: absolute;
  top: 66px;
  left: 25%;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28);
  background: var(--navy-900);
  transition: border-color 0.4s ease, background 0.4s ease,
              transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.4s ease;
  z-index: 3;
}
.vtimeline-row.active::before {
  border-color: var(--coral-500);
  background: var(--coral-500);
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(243,107,31,0.14),
              0 0 16px rgba(243,107,31,0.55);
}
.vtimeline-card {
  /* Card sits in the right grid column. Padding-left gives
     breathing room from the vertical line / dot at 25%. */
  display: flex; flex-direction: column; gap: 10px;
  max-width: 640px;
  padding-left: 56px;
}
/* Image placeholder — styled empty box that reads as intentional
   ("here's where an image goes") rather than as a broken asset.
   Halftone dot pattern + monochrome icon match the engineered
   brand language. Swap with an <img> when real photography lands. */
.vtimeline-img {
  /* 16:9 aspect — less tall than 4:3 so the row height is
     driven by the card content (more compact timeline) and
     image feels cinematic. */
  aspect-ratio: 16 / 9;
  background-color: var(--navy-800);
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 8px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  overflow: hidden;
}
.vtimeline-img-icon {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.22);
  display: grid; place-items: center;
  position: relative;
}
.vtimeline-img-icon::before {
  /* Tiny "image" pictogram inside the box icon */
  content: '';
  width: 16px; height: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.18) 50%);
}
.vtimeline-card .era {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-400);
}
.vtimeline-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.018em; line-height: 1.18;
  color: #fff; margin: 0;
}
.vtimeline-card p {
  color: var(--ink-100);
  font-size: 14.5px; line-height: 1.55;
  margin: 0;
}
.vtimeline-card .closing {
  color: var(--cyan-400);
  font-style: italic;
  font-size: 14px; line-height: 1.5;
  margin-top: 2px;
}

/* ============================================================
   PROVEN GRID — 2×2 stat-quadrant grid. Each card has a big
   metric (display type) + a short descriptor. Cards span 2
   columns of the page-rails grid so they sit flush at 0% / 50%
   / 100% rail ticks, mirroring the homepage capability grid.
   ============================================================ */
.proven-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 grid, equal cells */
  grid-auto-rows: 1fr; /* equal row heights so all 4 cards are same size */
  gap: 0;
  position: relative;
}
.proven-card {
  position: relative; z-index: 1;
  padding: 48px 40px 48px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(13, 32, 60, 0.45);
  min-height: 280px;
}
.proven-grid > .proven-card:nth-child(2n) { border-left: 0; }
.proven-grid > .proven-card:nth-child(n+3) { border-top: 0; }
/* Photo card variant — fills the 4th quadrant. Removes padding so the
   photo placeholder reaches the card edges. */
.proven-card.proven-card-photo {
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
}
.proven-photo {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(40,194,222,0.04), transparent 60%),
    linear-gradient(135deg, rgba(13,32,60,0.85) 0%, rgba(8,18,38,0.95) 100%);
  overflow: hidden;
}
.proven-photo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.proven-photo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.proven-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.proven-photo-tag {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  z-index: 2;
}
.proven-card .metric {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.0; letter-spacing: -0.025em;
  color: #fff; margin: 0;
  text-transform: none;
}
.proven-card h3 {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan-400); margin: 0;
}
.proven-card .proven-label {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan-400); margin: 0;
}
.proven-card p {
  color: var(--ink-100);
  font-size: 15px; line-height: 1.55;
  margin: 0; max-width: 420px;
}

/* ============================================================
   LEADERSHIP GRID — 4-column grid of leadership cards. Each
   card has an "initials tile" (navy square with two-letter
   monogram in display type) + name + role. Designed to make
   missing headshots feel intentional / editorial.
   ============================================================ */
.leadership-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  grid-auto-rows: 1fr;
  position: relative;
  border-top: 1px solid var(--rule-light);
  align-items: stretch;
}
.lcard {
  position: relative; z-index: 1;
  padding: 32px;
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  display: flex; flex-direction: column; gap: 24px;
  min-height: 320px;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  transition: background 0.25s ease, transform 0.32s cubic-bezier(.2,.7,.2,1), box-shadow 0.32s ease;
}
.lcard:hover {
  background: var(--paper-2);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -20px rgba(11,28,51,0.25);
  z-index: 2;
}
.leadership-grid > .lcard:nth-child(4n) { border-right: 0; }
.lcard-initials {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.lcard-initials::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--coral-500);
}
.lcard-initials span {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
}
.lcard-photo {
  width: 100%; aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}
.lcard-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--coral-500);
}
.lcard-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.lcard-meta { margin-top: auto; }
.lcard h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; letter-spacing: -0.018em; line-height: 1.15;
  color: var(--navy-900); margin: 0 0 6px;
}
.lcard .role {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--coral-500);
}
/* Empty 8th cell — keeps the grid square without showing an
   unfinished card */
.lcard-empty {
  border-right: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  background: var(--paper-2);
  min-height: 320px;
}
.leadership-grid > .lcard-empty:nth-child(4n) { border-right: 0; }

/* ============================================================
   COMPACT CTA BLOCK — closing CTA used at the bottom of every
   interior page. Eyebrow + headline + body + button on a dark
   navy band, full-bleed, with the page-rails grid behind it.
   ============================================================ */
.cta-block {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding: 60px 0 120px;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.cta-block-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: end;
}
.cta-block-copy {
  grid-column: 1 / span 3;
  padding-right: 48px;
}
.cta-block-copy .eyebrow-mono { margin-bottom: 24px; color: var(--coral-400); }
.cta-block-copy h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4vw, 60px);
  letter-spacing: -0.035em; line-height: 1.05;
  color: #fff; margin: 0 0 18px;
}
.cta-block-copy p {
  color: var(--ink-100);
  font-size: 16px; line-height: 1.55;
  max-width: 640px; margin: 0;
}
.cta-block-action {
  grid-column: 4 / span 1;
  display: flex; justify-content: flex-end;
}

/* ============================================================
   AGENCY ROTATOR — single-line marquee of all federal agencies
   ValidaTek serves. Replaces the dense card grid with a kinetic
   editorial treatment: large display-type names flowing past in
   a continuous loop, separated by coral mono-font slashes.
   Pauses on hover so users can read.
   ============================================================ */
.agency-rotator {
  /* White ground — logos sit on a clean paper-white band that
     contrasts the dark sections above and below it. */
  background: var(--paper);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(11,28,51,0.08);
  border-bottom: 1px solid rgba(11,28,51,0.08);
}
.agency-rotator-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: agency-rotate 75s linear infinite;
  white-space: nowrap;
}
/* Logo container — fixed height for consistent rhythm; image
   inside renders as long as it loads. If the file is missing,
   onerror swaps the img for a .fb span (display-type fallback). */
.agency-rotator-track .logo {
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  min-width: 100px;
}
.agency-rotator-track .logo img {
  max-height: 56px; max-width: 220px;
  width: auto; height: auto;
  display: block;
  /* On white bg: just desaturate, no brightness boost. Hover
     restores full color. */
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.agency-rotator-track .logo:hover img {
  opacity: 1;
  filter: grayscale(0);
}
/* Display-type text fallback when a logo file isn't available */
.agency-rotator-track .logo .fb {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  color: rgba(11,28,51,0.5);
  transition: color 0.3s ease;
}
.agency-rotator-track .logo:hover .fb { color: var(--navy-900); }
/* Coral mono slashes between agencies */
.agency-rotator-track > span.slash {
  color: var(--coral-500);
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.agency-rotator:hover .agency-rotator-track { animation-play-state: paused; }
@keyframes agency-rotate {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   CONTRACT SLIDER — horizontal carousel of contract case
   studies. Each contract gets the full viewport as its own
   editorial moment: large title on the left, scope + impact
   on the right, with prev/next controls + counter + dot
   indicators below. Replaces the 6-card text grid with a
   focused, paced experience.
   ============================================================ */
.contract-slider {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding: 112px 0 96px;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.contract-slider-head {
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: end;
}
.contract-slider-head h2 {
  /* Small "section tag" sizing — the slide title below is the
     primary anchor when reading a specific contract; this h2 is
     just the section label, so it shouldn't compete in scale. */
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -0.025em; line-height: 1.1;
  color: #fff; margin: 12px 0 12px;
}
.contract-slider-head p {
  color: var(--ink-100);
  font-size: 15.5px; line-height: 1.55;
  margin: 0; max-width: 640px;
}
.contract-slider-controls {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--font-mono);
}
.contract-slider-controls button {
  width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease,
              color .25s ease, transform .25s ease;
}
.contract-slider-controls button svg {
  width: 16px; height: 16px;
}
.contract-slider-controls button:hover {
  background: var(--coral-500);
  border-color: var(--coral-500);
}
.contract-slider-controls button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.contract-slider-controls button:disabled:hover {
  background: transparent;
  border-color: rgba(255,255,255,0.22);
}
.contract-slider-counter {
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-200);
  min-width: 80px; text-align: center;
}
.contract-slider-counter .current {
  color: var(--coral-400);
  font-size: 16px;
  margin-right: 6px;
}
.contract-slider-viewport {
  position: relative;
  overflow: hidden;
}
.contract-slider-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* TWO-COLUMN EDITORIAL LAYOUT — photo on left, text content on right.
   The photo fills its column edge-to-edge and stretches to match the
   text column's height, giving a balanced spread. Below 1100px the
   slide collapses to a single column (photo on top). */
.contract-slide {
  flex: 0 0 100%;
  padding: 24px 0 24px;
  display: flex; flex-direction: column;
}
.contract-slide-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Explicit rows: 4 content rows for the right-column items
     (eyebrow / title / meta-strip / block) plus a 1fr filler row
     that absorbs any height enforced by the image's min-height.
     Without the filler, the image's tall span inflates the
     content rows, creating big empty gaps between the eyebrow
     and title in column 2. */
  grid-template-rows: repeat(4, auto) 1fr;
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
}

/* Slide image placeholder — left column. Spans all rows so its height
   matches the right-column content. Same halftone pattern + box icon
   as the timeline placeholder. Swap with an <img> when real
   photography lands. */
.contract-slide-img {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  min-height: 480px;
  background-color: var(--navy-800);
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 8px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  overflow: hidden;
  margin-bottom: 0;
}
/* All non-image children land in column 2, stacking vertically with
   a consistent gap. */
.contract-slide-inner > .contract-slide-eyebrow,
.contract-slide-inner > .contract-slide-title,
.contract-slide-inner > .contract-slide-meta-strip,
.contract-slide-inner > .contract-slide-block {
  grid-column: 2;
}
.contract-slide-inner > .contract-slide-eyebrow { margin-top: 0; }
.contract-slide-inner > .contract-slide-title { margin-top: 16px; }
.contract-slide-inner > .contract-slide-meta-strip { margin-top: 16px; }
.contract-slide-inner > .contract-slide-block { margin-top: 8px; }
.contract-slide-img-icon {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(255,255,255,0.22);
  display: grid; place-items: center;
  position: relative;
}
.contract-slide-img-icon::before {
  content: '';
  width: 16px; height: 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.18) 50%);
}
/* When a real <img> is dropped inside the slide image well (e.g. an
   agency logo / seal), suppress the placeholder treatment — dot
   pattern, "Image" label, and icon — and display the logo centered
   on the navy ground with generous breathing room. The grid still
   stretches the column to match the right-column content height. */
.contract-slide-img:has(img) {
  background-image: none;
  padding: 0;
  gap: 0;
}
.contract-slide-img:has(img) > .contract-slide-img-icon,
.contract-slide-img:has(img) > span {
  display: none;
}
.contract-slide-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.contract-slide-eyebrow {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.contract-slide-eyebrow .index { color: var(--coral-500); }
.contract-slide-eyebrow .agency { color: var(--ink-100); }
.contract-slide-eyebrow .dot { color: var(--ink-400); }

.contract-slide-title {
  /* Primary anchor of each slide — clearly larger than the
     section h2 above so the hierarchy reads (section tag →
     slide title). */
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4.8vw, 68px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}

/* Inline mono meta strip — Value $73M · Duration 5 years · ... */
.contract-slide-meta-strip {
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.contract-slide-meta-strip .item strong {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-transform: none;
  margin-left: 8px;
}
.contract-slide-meta-strip .dot { color: var(--ink-400); }

.contract-slide-block {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 780px;
}
.contract-slide-block .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.contract-slide-block .body {
  color: var(--ink-100);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 1100px) {
  .contract-slide-title { font-size: clamp(28px, 6vw, 40px); }
  .contract-slide-meta-strip { gap: 10px; font-size: 10.5px; }
}
.contract-slider-dots {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 56px;
}
.contract-slider-dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none; padding: 0;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.contract-slider-dots button.active {
  background: var(--coral-500);
  transform: scale(1.4);
}
.contract-slider-dots button:hover {
  background: rgba(255,255,255,0.5);
}

/* ============================================================
   AGENCIES GRID — static 4-column grid showing every federal
   agency ValidaTek serves. Each tile is a hairline-bordered cell
   with the agency name set in mono caps. On dark sections.
   ============================================================ */
.agencies-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.agency-card {
  position: relative; z-index: 1;
  padding: 32px 28px;
  min-height: 120px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-100);
  transition: background .25s ease, color .25s ease;
}
.agency-card:hover { background: rgba(13, 32, 60, 0.6); color: #fff; }
.agencies-grid > .agency-card:nth-child(4n) { border-right: 0; }

/* ============================================================
   TESTIMONIAL BLOCK — full-width quote on dark bg with a
   coral-prefixed attribution line. Editorial weight; one
   testimonial per page, used as social proof anchor.
   ============================================================ */
/* Centered, full-width oversized quote with generous padding.
   Coral hairline rules above + below act as bookends framing the
   quote like a printed pull-quote. No serif glyph — the rules
   alone do the work. */
.testimonial-block {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.testimonial-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.testimonial-inner .eyebrow-mono {
  font-size: 16px;
}
.testimonial-rule {
  width: 72px;
  height: 1px;
  background: var(--coral-500);
}
.testimonial-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.95);
  margin: 0;
  max-width: 1000px;
}
.testimonial-attribution {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-200);
}
.testimonial-attribution strong {
  color: #fff;
  font-weight: 500;
}

/* ============================================================
   CONTRACT CARDS — 3×2 grid of contract case studies. Each card
   has a contract index, agency tag, title, value/duration meta
   row, and scope/impact body. Hairline borders form the grid.
   ============================================================ */
.contract-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.contract-card {
  position: relative; z-index: 1;
  padding: 36px 32px 36px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(13, 32, 60, 0.45);
  transition: background .3s ease;
}
.contract-card:hover { background: rgba(13, 32, 60, 0.85); }
.contract-grid > .contract-card:nth-child(3n) { border-right: 0; }
.contract-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-400);
}
.contract-card-head .agency {
  color: var(--cyan-400);
}
.contract-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; letter-spacing: -0.018em; line-height: 1.2;
  color: #fff; margin: 0;
}
.contract-meta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-200);
}
.contract-meta span strong {
  color: #fff; font-weight: 500;
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: -0.005em; text-transform: none;
  margin-left: 8px;
}
.contract-card .scope,
.contract-card .impact {
  display: flex; flex-direction: column; gap: 6px;
}
.contract-card .label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan-400);
}
.contract-card .body {
  color: var(--ink-100);
  font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* ============================================================
   VEHICLES LAYOUT — sticky left sub-navigation + scrolling right
   content. The nav is a slim list of category labels (with counts)
   that highlights the active section as the user scrolls. Clicking
   an item scrolls smoothly to that category. The right side holds
   the categorized card grid. Sticky offset is tuned for the floating
   header. Below 1100px, the nav collapses to a horizontal chip rail
   pinned at the top of the section.
   ============================================================ */
.vehicles-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 72px;
  margin-top: 64px;
  align-items: flex-start;
}
.vehicles-subnav {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.vehicles-subnav-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding: 16px 0 4px;
}
.vehicles-subnav-item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.25;
  transition: color 0.32s ease, padding-left 0.32s ease, border-color 0.32s ease;
}
.vehicles-subnav-item .label { flex: 1 1 auto; }
.vehicles-subnav-item .num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.32);
  flex: 0 0 auto;
  transition: color 0.32s ease;
}
.vehicles-subnav-item:hover {
  color: rgba(255,255,255,0.92);
}
.vehicles-subnav-item:hover .num { color: rgba(255,255,255,0.55); }
.vehicles-subnav-item.is-active {
  color: #fff;
  padding-left: 22px;
  border-color: rgba(255,255,255,0.18);
}
.vehicles-subnav-item.is-active .num { color: var(--coral-400); }
.vehicles-subnav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--coral-400);
  transform: translateY(-50%);
  transition: width 0.32s ease;
}
.vehicles-content {
  display: flex;
  flex-direction: column;
  gap: 96px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .vehicles-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }
  .vehicles-subnav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    border-top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .vehicles-subnav::-webkit-scrollbar { display: none; }
  .vehicles-subnav-eyebrow { display: none; }
  .vehicles-subnav-item {
    border-bottom: 0;
    padding: 14px 18px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .vehicles-subnav-item.is-active {
    padding-left: 18px;
  }
  .vehicles-subnav-item.is-active::before {
    left: 18px;
    top: auto;
    bottom: 6px;
    transform: none;
    width: 18px;
  }
}

/* ============================================================
   VEHICLE CATEGORIES — grouped card grid. Each category has a
   labeled header (name + count) and contains compact cards. Each
   card shows a 16:9 image placeholder, small grayscale agency logo,
   prime/JV tag, vehicle name, contract number, and 1-line scope.
   Hover brightens the card + restores logo color. Designed for
   fast scanning by category (Government-Wide / Defense / Civilian).
   ============================================================ */
.vehicle-categories {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.vehicle-category-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 28px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.vehicle-category-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.vehicle-category-head .count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.vehicle-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.vehicle-card {
  position: relative;
  padding: 24px 28px 26px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(13, 32, 60, 0.25);
  transition: background 0.32s ease;
}
.vehicle-card:hover { background: rgba(13, 32, 60, 0.7); }
.vehicle-card-grid > .vehicle-card:nth-child(2n) { border-right: 0; }
.vehicle-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}
/* Small logo placeholder box. Lives at the top of each card next
   to the prime/JV tag. Subtle navy fill with a thin hairline grid
   and a centered crosshair tick, hinting "logo goes here" without
   feeling like a featured image. Hover lifts the border to coral. */
.vehicle-card-logo {
  position: relative;
  width: 88px;
  height: 44px;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  transition: border-color 0.32s ease, background 0.32s ease;
}
.vehicle-card-logo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 11px 11px;
}
.vehicle-card-logo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255,255,255,0.32) calc(50% - 0.5px), rgba(255,255,255,0.32) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255,255,255,0.32) calc(50% - 0.5px), rgba(255,255,255,0.32) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  transition: background 0.32s ease;
}
.vehicle-card-logo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.vehicle-card:hover .vehicle-card-logo {
  border-color: rgba(243,107,31,0.4);
  background: rgba(243,107,31,0.04);
}
.vehicle-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
  padding: 5px 9px;
  border: 1px solid rgba(243,107,31,0.32);
  flex: 0 0 auto;
}
.vehicle-card-tag.jv {
  color: var(--cyan-400);
  border-color: rgba(40,194,222,0.32);
}
.vehicle-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.vehicle-card-scope {
  color: var(--ink-100);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.vehicle-card-meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vehicle-card-meta .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.vehicle-card-meta .number {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
}

@media (max-width: 1280px) {
  .vehicle-card-grid { grid-template-columns: 1fr; }
  .vehicle-card-grid > .vehicle-card { border-right: 0; }
  .vehicle-categories { gap: 56px; }
}

/* ============================================================
   VEHICLE LIST (legacy) — scannable tabular list for the Contract
   Vehicles page. Each row: vehicle name + scope on the left, contract
   number(s) on the right. Hairline dividers between rows. Hovering
   one row dims the others to focus attention without committing
   to a click. Used for the Prime list (with .vehicle-list) and
   the simpler Joint Venture list (with .vehicle-list.simple).
   ============================================================ */
.subsection-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 24px 0 18px;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.subsection-head:first-of-type { margin-top: 0; }
.subsection-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.subsection-head .count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.subsection-intro {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 720px;
}
.vehicle-list {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.1);
  /* Hover-dim sibling rows for reading focus */
  transition: opacity 0.3s ease;
}
.vehicle-list:hover .vehicle-row { opacity: 0.45; }
.vehicle-list .vehicle-row:hover { opacity: 1; }
.vehicle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: start;
  transition: opacity 0.3s ease;
}
.vehicle-list.simple .vehicle-row {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 22px 0;
}
.vehicle-row-main {
  display: flex; flex-direction: column; gap: 10px;
}
.vehicle-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.vehicle-scope {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}
.vehicle-sins {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin: 4px 0 0;
}
.vehicle-row-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.vehicle-row-meta .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.vehicle-row-meta .number {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #fff;
}

/* ============================================================
   NEXT-STEPS GRID — 3-card navigation grid for "What's Next"
   sections (Capabilities / Performance / Platforms). Hairline
   borders form the grid; cards have label + h3 + body + arrow link.
   ============================================================ */
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.next-card {
  position: relative;
  padding: 40px 32px 36px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(13, 32, 60, 0.45);
  transition: background 0.3s ease;
}
.next-card:hover { background: rgba(13, 32, 60, 0.85); }
.next-grid > .next-card:last-child { border-right: 0; }
.next-card .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.next-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.next-card p {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.next-card .link {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.25s ease, color 0.25s ease;
}
.next-card .link:hover {
  gap: 16px;
  color: var(--cyan-300);
}
.next-card .link svg {
  width: 14px; height: 14px;
}

@media (max-width: 1100px) {
  .vehicle-row { grid-template-columns: 1fr; gap: 16px; }
  .vehicle-row-meta { text-align: left; min-width: 0; }
  .next-grid { grid-template-columns: 1fr; }
  .next-grid > .next-card { border-right: 0; }
}

/* ============================================================
   SECTION INTRO — small transitional band used between major
   sections (e.g., "Meet the Team" on About Us). Centers a tiny
   eyebrow + a single short headline.
   ============================================================ */
.section-intro {
  text-align: center;
  padding: 96px 0 48px;
}
.section-intro .eyebrow-mono {
  margin: 0 auto 18px;
}
.section-intro h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.03em; line-height: 1.06;
  color: var(--navy-900); margin: 0;
}
.section-intro.on-dark h2 { color: #fff; }

/* ============================================================
   MOTION SYSTEM — modeled on Guidexa (Lenis + IX3 + counters)
   ============================================================ */
/* base reveal kept for backward compat */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* fade up — primary entrance */
.anim {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity .6s cubic-bezier(.2,.7,.2,1),
    transform .65s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.anim.in { opacity: 1; transform: none; }

/* slide variants */
.anim-left  { transform: translate3d(-56px, 0, 0); }
.anim-right { transform: translate3d(56px, 0, 0); }
.anim-left.in, .anim-right.in { transform: none; }

/* text mask reveal — clips a sliding inner element */
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.04;
  padding-bottom: 0.06em;
}
.mask > .inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: transform;
}
.mask.in > .inner { transform: translateY(0); }

/* image scale-in */
.anim-scale { overflow: hidden; }
.anim-scale > * {
  transform: scale(1.08);
  opacity: 0.6;
  transition:
    transform 1.0s cubic-bezier(.2,.7,.2,1),
    opacity .8s ease;
  transition-delay: var(--anim-delay, 0ms);
  will-change: transform;
}
.anim-scale.in > * { transform: scale(1); opacity: 1; }

/* stagger — parent flag, children get delays at JS time */
.stagger > * { transition-delay: 0ms; }

/* counter sentinel */
.counter { display: inline-block; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim, .mask > .inner, .anim-scale > * { transition: none !important; }
  .anim, .anim-left, .anim-right { opacity: 1 !important; transform: none !important; }
  .mask > .inner { transform: none !important; }
  .anim-scale > * { transform: none !important; filter: none !important; opacity: 1 !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  nav.primary { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-left: auto; }
  .nav-row { gap: 16px; }
  /* Mobile: the Contact Us and Careers buttons are inside the burger panel,
     so hide their top-level twins in the nav row. */
  .nav-row > .btn-light { display: none; }
  .nav-row > .btn-ghost-dark { display: none; }
  .built-in-house { grid-template-columns: 1fr; min-height: 0; }
  .built-right { min-height: 360px; }
  .built-left { padding: 80px var(--gutter); }
  .deliver-head { grid-template-columns: 1fr; align-items: start; }
  .deliver-head-right { justify-content: flex-start; }
  .deliver-grid { grid-template-columns: 1fr; gap: 24px; }
  .deliver-grid > .cap-card { grid-column: auto; }
  .deliver-grid > .cap-card + .cap-card { border-left: 1px solid rgba(255,255,255,0.08); }
  .deliver-grid > .cap-card:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.08); }
  .how-pin .how-head { grid-template-columns: 1fr; align-items: start; gap: 24px; padding-bottom: 48px; }
  .how-head-right { align-items: flex-start; }
  /* Disable the pin/runway on tablet/mobile and show cards directly. */
  .how-pin-wrap { height: auto !important; }
  .how-pin { position: static !important; height: auto !important; padding: 80px 0; overflow: visible !important; }
  .how-stack { grid-template-columns: 1fr 1fr; gap: 24px; }
  .how-stack > .sol + .sol { border-left: 1px solid rgba(255,255,255,0.08); }
  .sol { opacity: 1 !important; transform: none !important; transition: none !important; margin-top: 0 !important; }
  /* Page rails simplify to 2 columns on tablet so they stay sparse */
  .page-rails-inner { grid-template-columns: repeat(2, 1fr); }
  .why-top { grid-template-columns: 1fr; margin-bottom: 80px; }
  .stats { grid-template-columns: 1fr; gap: 48px; }
  .why-stats-pin-wrap { height: auto !important; padding-bottom: 120px; }
  .why-stats-pin { position: static !important; height: auto !important; padding: 40px 0; overflow: visible !important; }
  .why-stats-eyebrow { opacity: 1 !important; transform: none !important; }
  .stat[data-stat-stagger] { opacity: 1 !important; transform: none !important; }
  .people-grid { grid-template-columns: 1fr; }
  .people-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .people-head { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
  .gs-row { grid-template-columns: 1fr; }
  .foot-hero { grid-template-columns: 1fr; gap: 32px; padding: 72px 0 56px; }
  .foot-top { padding: 64px 0 48px; }
  .foot-brand { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; margin-bottom: 36px; }
  .foot-brand .brand-large,
  .foot-brand > p,
  .foot-brand-meta { grid-column: auto; padding: 0; max-width: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .foot-col { padding: 0; }
  .foot-eyebrow { flex-wrap: wrap; gap: 12px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero h1 { font-size: clamp(36px, 8vw, 64px); }
  .hero-cta-link { min-width: 0; flex: 1; }
  /* Interior page components collapse */
  .timeline-grid { grid-template-columns: 1fr; }
  .timeline-card { border-right: 0; }
  .timeline-card:last-child { border-bottom: 0; }
  /* Timeline collapses on tablet — line moves to far left edge,
     image stacks above card. Drop the desktop margin-left shift. */
  .deliver.timeline-section { padding: 80px 0 96px; }
  .vtimeline { margin-top: 32px; margin-left: 0; }
  .vtimeline-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 0 32px;
    padding-left: 40px;
  }
  .vtimeline-img { max-width: 360px; }
  .vtimeline-card { padding-left: 0; }
  .vtimeline-row::before { left: 8px; margin-left: 0; }
  .vtimeline-track { left: 8px; }
  .proven-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .proven-grid > .proven-card { grid-column: auto; }
  .proven-grid > .proven-card:nth-child(2n) { border-left: 1px solid rgba(255,255,255,0.08); }
  .proven-grid > .proven-card + .proven-card { border-top: 0; }
  .proven-card.proven-card-photo { min-height: 280px; }
  .leadership-grid { grid-template-columns: repeat(2, 1fr); }
  .leadership-grid > .lcard:nth-child(4n) { border-right: 1px solid var(--rule-light); }
  .leadership-grid > .lcard:nth-child(2n) { border-right: 0; }
  .leadership-grid > .lcard-empty:nth-child(4n) { border-right: 1px solid var(--rule-light); }
  .leadership-grid > .lcard-empty:nth-child(2n) { border-right: 0; }
  .lcard-photo, .lcard-initials { aspect-ratio: 4 / 3; }
  .lcard { padding: 24px; min-height: 0; }
  /* Customers page collapses */
  .testimonial-inner { gap: 32px; }
  .testimonial-block { padding: clamp(36px, 7vw, 64px) 0; }
  .contract-slider-head { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .contract-slide { grid-template-columns: 1fr; gap: 40px; }
  .contract-slide-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contract-slide-img {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .contract-slide-inner > .contract-slide-eyebrow,
  .contract-slide-inner > .contract-slide-title,
  .contract-slide-inner > .contract-slide-meta-strip,
  .contract-slide-inner > .contract-slide-block {
    grid-column: 1;
    margin-top: 0;
  }
  .agency-rotator { padding: 56px 0; }
  .cta-block { padding: 90px 0; }
  .cta-block-inner { grid-template-columns: 1fr; gap: 32px; }
  .cta-block-copy { grid-column: auto; padding-right: 0; }
  .cta-block-action { grid-column: auto; justify-content: flex-start; }
  .page-hero-inner { padding: 72px 0 72px; min-height: 0; }
  /* Reduce large section paddings on tablet */
  .deliver:not(.timeline-section) { padding: 96px 0; }
  .why { padding: 96px 0 0; }
  .people { padding: 96px 0; }
  .approach { padding: 96px 0; }
  .gs-inner { padding: 80px 0 0; }
  .built-in-house { padding: 96px 0; }
  .how-pin { padding: 80px 0; }
}
@media (max-width: 640px) {
  .built-grid { grid-template-columns: 1fr; gap: 28px; }
  .agency-row { gap: 24px; }
  .gs-bar { flex-direction: column; align-items: flex-start; }
  .foot-cols { grid-template-columns: 1fr; gap: 28px; }
  .foot-col { padding: 0; }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 32px; }
  .hero-strip { flex-direction: column; align-items: flex-start; padding: 16px 24px; gap: 8px; }
  .how-stack { grid-template-columns: 1fr; }
  /* Hide page rails entirely on phone — too dense at narrow widths */
  .page-rails { display: none; }
  .leadership-grid { grid-template-columns: repeat(2, 1fr); }
  .leadership-grid > .lcard:nth-child(2n) { border-right: 0; }
  .lcard { min-height: 0; padding: 16px; }
  .lcard-initials, .lcard-photo { aspect-ratio: 3 / 4; }
  .lcard h3 { font-size: 16px; }
  .lcard .role { font-size: 10px; }
  .agencies-grid { grid-template-columns: 1fr; }
  .agencies-grid > .agency-card:nth-child(2n) { border-right: 0; }
  .contract-grid { grid-template-columns: 1fr; }
  .contract-grid > .contract-card:nth-child(2n) { border-right: 0; }
  /* Reduce large section paddings on mobile */
  .deliver:not(.timeline-section) { padding: 20px 0; }
  .why { padding: 64px 0 0; }
  .people { padding: 64px 0; }
  .approach { padding: 64px 0; }
  .gs-inner { padding: 56px 0 0; }
  .built-in-house { padding: 64px 0; }
  .how-pin { padding: 64px 0; }
}

/* ============================================================
   CYBER & ZERO TRUST PAGE
   New components introduced for the Capabilities page. Each is
   commented inline. They share the page-rails framework and the
   .deliver section spacing, so they sit in rhythm with the rest
   of the site.
   ============================================================ */

/* PAIN STATS — two-card asymmetric grid. Left card carries a giant
   number ("82%") + label, right card is the "validated approach"
   foil flagged with a coral hairline. */
.pain-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pain-stat {
  position: relative;
  padding: 56px 40px 48px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pain-stats > .pain-stat:last-child { border-right: 0; }
.pain-stat.flag::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 64px; height: 1px;
  background: var(--coral-400);
}
.pain-stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(72px, 9vw, 132px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
}
.pain-stat-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
  margin-bottom: 8px;
}
.pain-stat-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.pain-stat p {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 38ch;
}

/* MANDATE GRID — three federal mandate cards. Compact tag, title,
   body, and a coral-tinted takeaway line at the bottom. */
.mandate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mandate-card {
  position: relative;
  padding: 48px 36px 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(13, 32, 60, 0.2);
  transition: background 0.32s ease;
}
.mandate-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 1px;
  background: var(--coral-400);
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.mandate-card:hover::before { width: 80px; }
.mandate-card:hover { background: rgba(13, 32, 60, 0.55); }
.mandate-grid > .mandate-card:last-child { border-right: 0; }
.mandate-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
  margin: 0;
  line-height: 1.4;
}
.mandate-card h3:not(.mandate-tag),
.mandate-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
/* Align h3 baseline across all 3 cards — cards without a mandate-tag eyebrow
   get a top offset equal to the tag's line height (~15px) + flex gap (18px).
   Desktop only — on mobile cards stack so alignment is irrelevant. */
@media (min-width: 1101px) {
  .mandate-card:not(:has(.mandate-tag)) h3 {
    padding-top: 33px;
  }
}
.mandate-card p {
  color: var(--ink-100);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}
.mandate-takeaway {
  margin-top: auto;
  padding-top: 20px;
}
.mandate-takeaway a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-400) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.25s ease, color 0.25s ease;
  width: fit-content;
}
.mandate-takeaway a::after {
  content: '→';
}
.mandate-takeaway a:hover {
  gap: 16px;
  color: var(--coral-300) !important;
}

/* WORKFLOW STEPS — vertical numbered list. Each step has a giant
   light-weight number, hairline rule, title, body. Hover shifts
   the body right slightly to read as "advance". */
.workflow .deliver-head { margin-bottom: 24px; }
.workflow-steps {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.workflow-step {
  display: grid;
  /* number | copy | photo — three-column layout */
  grid-template-columns: 100px 1fr minmax(280px, 1fr);
  gap: 48px;
  align-items: center;
  padding: 48px 0 44px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.32s ease;
}
.workflow-step:hover { background: linear-gradient(to right, rgba(243,107,31,0.04), transparent 60%); }
.workflow-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 4.2vw, 64px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: rgba(255,255,255,0.92);
  display: block;
  align-self: center;
}
.workflow-body { display: flex; flex-direction: column; gap: 14px; max-width: 56ch; }
/* Photo placeholder on the right of each workflow step. Same navy
   gradient + hairline grid + crosshair pattern as other placeholders.
   .dither class auto-applies duotone when a real <img> is added. */
.workflow-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(40,194,222,0.04), transparent 60%),
    linear-gradient(135deg, rgba(13,32,60,0.85) 0%, rgba(8,18,38,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.workflow-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.workflow-photo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.workflow-photo img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
.workflow-photo-tag {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  z-index: 2;
}
.workflow-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.workflow-body p {
  color: var(--ink-100);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* TECH GRID — 2x2 grid of platform cards. Role tag, name, body,
   link footer. Small coral hairline accent on hover top. */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tech-card {
  position: relative;
  padding: 48px 40px 36px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(13, 32, 60, 0.2);
  transition: background 0.32s ease;
}
.tech-card:hover { background: rgba(13, 32, 60, 0.6); }
.tech-grid > .tech-card:nth-child(2n) { border-right: 0; }
.tech-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 1px;
  background: var(--coral-400);
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.tech-card:hover::before { width: 80px; }
.tech-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.tech-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.tech-card p {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 50ch;
}
.tech-card .link {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.25s ease, color 0.25s ease;
  width: fit-content;
}
.tech-card .link:hover { gap: 16px; color: var(--cyan-300); }
.tech-card .link svg { width: 14px; height: 14px; }

/* CAPABILITY GRID — 2-col grid of detailed capability cards. Each
   card carries a small mono number, title, body, platform tag,
   and a 3-item key features list separated by a hairline. */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.capability-card {
  position: relative;
  padding: 44px 40px 40px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(13, 32, 60, 0.2);
  transition: background 0.32s ease;
  overflow: clip;
}
.capability-card:hover { background: rgba(13, 32, 60, 0.6); }
.capability-grid > .capability-card:nth-child(2n) { border-right: 0; }
.capability-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.capability-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #fff;
  margin: 0;
}
.capability-card > p {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.capability-platform {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.capability-platform .plat-label,
.plat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.capability-platform a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(40, 194, 222, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.capability-platform a:hover {
  color: var(--cyan-300);
  border-bottom-color: var(--cyan-300);
}
.capability-features {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.capability-features li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-100);
  font-size: 13.5px;
  line-height: 1.55;
}
.capability-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--coral-400);
}

/* COMPLIANCE GRID — 3x2 small credential cards. Tight, restrained,
   stays out of the way of the surrounding rhythm. */
.compliance-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 24px;
}
.compliance-stack span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-200);
  position: relative;
  padding-right: 28px;
}
.compliance-stack span:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 1px;
  background: rgba(255,255,255,0.18);
}
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.compliance-card {
  padding: 32px 28px 30px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(13, 32, 60, 0.18);
  transition: background 0.32s ease;
}
.compliance-card:hover { background: rgba(13, 32, 60, 0.5); }
.compliance-grid > .compliance-card:nth-child(3n) { border-right: 0; }
.compliance-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.compliance-card p {
  color: var(--ink-100);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
}

/* CAP TESTIMONIAL — inline, centered DISA quote. Lives inside a
   .deliver section (not a stand-alone section), so it has no
   background of its own. Coral hairline rules above + below the
   quote, tight monospaced attribution. */
.cap-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 36px;
  padding: 0 0 clamp(40px, 6vw, 72px);
  max-width: 1000px;
  margin: 32px auto 0;
}
.cap-testimonial-rule {
  width: 56px;
  height: 1px;
  background: var(--coral-500);
  flex: 0 0 auto;
}
.cap-testimonial-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: rgba(255,255,255,0.95);
  margin: 0;
  max-width: 880px;
}
.cap-testimonial-att {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cap-testimonial-att strong {
  font-weight: 500;
  color: #fff;
}
.cap-testimonial-att span {
  color: var(--ink-300);
}

/* TESTIMONIAL SLIDER — wraps multiple cap-testimonial slides, showing
   one at a time with fade transition and arrow + dot navigation. */
.cap-testimonial-slider {
  position: relative;
  max-width: 1000px;
  margin: 32px auto 0;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.cap-testimonial-slider-track {
  position: relative;
  min-height: 340px;
}
.cap-testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1);
  margin: 0;
  padding: 0;
}
.cap-testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
.cap-testimonial-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.ts-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  flex-shrink: 0;
}
.ts-arrow svg { width: 16px; height: 10px; }
.ts-arrow:hover {
  border-color: var(--coral-500);
  color: #fff;
  background: rgba(255,255,255,0.05);
}
.ts-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  padding: 0;
}
.ts-dot.is-active {
  background: var(--coral-500);
  transform: scale(1.25);
}
.ts-dot:hover:not(.is-active) {
  background: rgba(255,255,255,0.5);
}

/* TECH GRID 2-up variant — when only two platforms are shown */
.tech-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.tech-grid-1 {
  grid-template-columns: 1fr;
  max-width: 640px;
}
.tech-feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 80px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 56px 64px;
  max-width: 900px;
  background: rgba(13, 32, 60, 0.2);
  position: relative;
  transition: background 0.32s ease;
}
.tech-feature-card:hover { background: rgba(13, 32, 60, 0.6); }
.tech-feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 1px;
  background: var(--coral-400);
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.tech-feature-card:hover::before { width: 80px; }
.tech-feature-logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 6px;
}
.tech-feature-logo img {
  width: auto;
  max-width: 200px;
  opacity: 0.9;
}
.tech-feature-content h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: #fff;
  margin: 8px 0 16px;
}
.tech-feature-content p {
  color: var(--ink-100);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 56ch;
}
@media (max-width: 1100px) {
  .tech-feature-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 24px;
  }
  .tech-feature-logo img { max-width: 160px; }
}
@media (max-width: 640px) {
  .tech-grid-2 { grid-template-columns: 1fr; }
  .cap-testimonial-slider-track { min-height: 480px; }
}

/* AGENCY CLUSTER — three named groups of agencies. Used after the
   testimonial as the proof bar. Group label is mono+coral, list is
   small, neutral, hairline-divided. */
.agency-cluster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.agency-group {
  padding: 36px 28px 32px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.agency-cluster > .agency-group:last-child { border-right: 0; }
.agency-group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
  margin-bottom: 18px;
}
.agency-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agency-list li {
  color: var(--ink-100);
  font-size: 14px;
  line-height: 1.45;
  font-family: var(--font-display);
  font-weight: 400;
}

/* FAQ — native <details>/<summary> with a custom plus/minus toggle
   and hairline rules. Smooth content reveal via padding only — no
   height anim because <details> doesn't expose height transitions. */
.faq-list {
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  transition: padding-left 0.32s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { padding-left: 14px; }
.faq-q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: #fff;
  flex: 1 1 auto;
  margin: 0;
}
.faq-toggle {
  position: relative;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin-top: 4px;
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  background: var(--coral-400);
  transition: transform 0.32s ease, opacity 0.32s ease;
}
.faq-toggle::before {
  top: 50%; left: 0;
  width: 100%; height: 1px;
  transform: translateY(-50%);
}
.faq-toggle::after {
  top: 0; left: 50%;
  width: 1px; height: 100%;
  transform: translateX(-50%);
}
.faq-item[open] .faq-toggle::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-item[open] summary { padding-left: 14px; }
.faq-a {
  overflow: hidden;
  max-width: 80ch;
  transition: height 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-a-inner {
  padding: 0 32px 32px 14px;
}
.faq-a p,
.faq-a ul,
.faq-a li {
  color: var(--ink-100);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* RESPONSIVE — capabilities page collapses */
@media (max-width: 1100px) {
  .pain-stats { grid-template-columns: 1fr; }
  .pain-stats > .pain-stat:last-child { border-right: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .pain-stat { border-right: 0; }
  .mandate-grid { grid-template-columns: 1fr; }
  .mandate-grid > .mandate-card { border-right: 0; }
  .workflow-step { grid-template-columns: 1fr; gap: 20px; padding: 40px 0 36px; }
  .workflow-photo { max-width: 480px; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-grid > .tech-card { border-right: 0; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid > .capability-card { border-right: 0; }
  .compliance-grid { grid-template-columns: 1fr 1fr; }
  .compliance-grid > .compliance-card:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.08); }
  .compliance-grid > .compliance-card:nth-child(2n) { border-right: 0; }
  .agency-cluster { grid-template-columns: 1fr; }
  .agency-cluster > .agency-group { border-right: 0; }
}
@media (max-width: 640px) {
  .pain-stat { padding: 40px 24px 36px; }
  .mandate-card,
  .tech-card,
  .capability-card { padding: 32px 22px; }
  .compliance-grid { grid-template-columns: 1fr; }
  .compliance-grid > .compliance-card { border-right: 0; }
  .faq-item summary { gap: 20px; }
  .faq-a-inner { padding: 0 0 28px 14px; }
  .faq-light .faq-item summary { padding: 28px 16px; }
  .faq-light .faq-item summary:hover { padding-left: 16px; }
  .faq-light .faq-a-inner { padding: 0 16px 28px; }
  #faq .deliver-head { margin-bottom: 50px; }
}

/* ============================================================
   CYBER & ZERO TRUST — SIGNATURE MOMENTS
   1) 5-Pillar hero map (custom SVG behind the headline)
   2) Cinematic 82% pin (full-viewport sticky moment)
   3) Workflow cinematic pin (sticky 100vh phase scroll)
   4) Capability glyphs (custom hairline SVGs per card)
   ============================================================ */

/* ---------- 1) FULL-VIEWPORT HERO (video-ready) ---------- */
/* The hero is sized to the viewport. Behind the copy, .hero-video holds
   the eventual <video> background; it stretches edge-to-edge with
   object-fit cover. A subtle hairline grid + radial vignette overlay
   above the video for tone without obscuring the footage. */
.pillar-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pillar-hero .page-hero-grid { display: none; } /* replaced by .hero-video-grid */
.pillar-hero-inner {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* video layer */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 30% 50%, rgba(40,194,222,0.06), transparent 65%),
    radial-gradient(ellipse 60% 70% at 75% 60%, rgba(243,107,31,0.05), transparent 65%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100vh;
  min-width: 177.78vh; /* 16:9 ratio */
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.hero-video-mark {
  position: absolute;
  bottom: 28px;
  right: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.16);
  z-index: 1;
}
.hero-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,20,36,0.65) 0%, rgba(8,20,36,0.90) 90%),
    radial-gradient(ellipse at 50% 80%, rgba(20,80,180,0.45), rgba(8,20,36,0.0) 60%);
  z-index: 1;
  pointer-events: none;
}

/* hairline grid overlay (above the video, below the copy) */
.hero-video-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 25% 25%;
}

/* edge vignette to keep the copy legible regardless of footage */
.hero-video-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 35%, rgba(8,18,38,0.55) 90%),
    linear-gradient(180deg, rgba(8,18,38,0.4) 0%, transparent 30%, transparent 70%, rgba(8,18,38,0.6) 100%);
}

@media (max-width: 1100px) {
  .pillar-hero-inner { padding: 100px var(--gutter) 80px; min-height: 0; }
  .pillar-hero { min-height: auto; }
}
@media (max-width: 640px) {
  .pillar-hero { min-height: auto; }
  .pillar-hero-inner { padding: 80px var(--gutter) 64px; }
}

/* ---------- 2) CINEMATIC 82% PAIN PIN ---------- */
/* The runway is 220vh tall; the inner sticky child holds at viewport
   center while the user scrolls through. The counter ticks from 0 to
   82 driven by JS as the runway progresses. After the runway, the
   "Validated Approach" answer card reveals below.

   IMPORTANT: must override .deliver's overflow:hidden — sticky
   positioning is broken if any ancestor (including this section) clips
   overflow. */
.pain-cinema {
  padding: 0; /* runway controls its own spacing */
  background: var(--navy-900);
  position: relative;
  overflow: visible !important;
}
.pain-pin-wrap {
  height: 120vh;
  position: relative;
}
.pain-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pain-pin-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
  z-index: 2;
  text-align: left;
}
.pain-cinema-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
}
.pain-cinema-stat {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.pain-cinema-num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(56px, 7vw, 112px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #fff;
  display: inline-block;
  flex: 0 0 auto;
  text-shadow: 0 0 48px rgba(243,107,31,0.14);
}
.pain-cinema-rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--coral-500);
  flex: 0 0 auto;
  align-self: center;
}
.pain-cinema-line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  margin: 0;
  max-width: 30ch;
}
.pain-cinema-line em {
  font-style: italic;
  color: var(--coral-400);
}
.pain-cinema-foot {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink-200);
  margin: 0;
  flex: 1 1 0;
  min-width: 220px;
  align-self: center;
}
.pain-cinema-right {
  position: relative;
  padding-left: 48px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.pain-cinema-thesis {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #fff;
  max-width: 18ch;
  margin: 0;
}
/* Answer card sits below the pin runway */
.pain-answer {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  padding: 24px 0 72px;
  text-align: center;
}
.pain-answer-head {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.pain-answer-flag {
  width: 32px;
  height: 1px;
  background: var(--coral-400);
}
.pain-answer-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.pain-answer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 14px;
}
.pain-answer p {
  color: var(--ink-100);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1100px) {
  .pain-pin-wrap { height: auto; }
  .pain-pin {
    position: static;
    height: auto;
    padding: 48px 0 40px;
  }
  .pain-pin-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pain-cinema-right {
    padding-left: 0;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .pain-answer {
    text-align: left;
    margin: 0;
  }
  .pain-answer-head {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .pain-cinema-num { font-size: clamp(56px, 16vw, 96px); }
  .pain-cinema-stat { gap: 16px; }
}

/* ---------- 3) WORKFLOW CINEMATIC PIN ---------- */
/* 4 phases stacked. Outer wrap is 4× viewport tall; inner is sticky
   100vh. JS toggles .wf-active on the current phase based on scroll
   progress through the runway, and updates the progress meta. Each
   phase has a 2-col grid: copy left, custom visual right.

   IMPORTANT: must override .deliver's overflow:hidden — sticky
   positioning is broken if any ancestor (including this section) clips
   overflow. */
.workflow-cinema {
  padding-bottom: 0;
  overflow: visible !important;
}
.workflow-cinema .deliver-head { margin-bottom: 0; }
.workflow-pin-wrap {
  height: 380vh; /* one viewport per phase, with overlap */
  position: relative;
}
.workflow-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.workflow-pin .container { position: relative; width: 100%; }
.workflow-progress {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 2;
}
.workflow-progress-track {
  position: relative;
  width: 1px;
  height: 220px;
  background: rgba(255,255,255,0.12);
}
.workflow-progress-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 0%;
  background: var(--coral-400);
  transform: translateX(-50%);
  transition: height 0.28s cubic-bezier(.2,.7,.2,1);
}
.workflow-progress-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.65);
  display: flex;
  gap: 4px;
}
.workflow-progress-meta .curr { color: var(--coral-400); font-weight: 500; min-width: 1.6em; text-align: center; }
.workflow-progress-meta .sep { color: rgba(255,255,255,0.3); }
.workflow-phases {
  position: relative;
  width: 100%;
  max-width: calc(1480px - 80px); /* leave room for progress rail */
  padding-right: 60px;
  /* Stack all phases in a single grid cell so .workflow-phases takes
     its natural height (tallest phase) and inactive phases overlay
     invisibly on top. */
  display: grid;
  grid-template-areas: "phase";
}
.wf-phase {
  grid-area: phase;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.55s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.wf-phase.wf-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wf-phase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
}
.wf-phase-copy { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.wf-phase-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.wf-phase-copy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  margin: 0;
}
.wf-phase-copy > p {
  color: var(--ink-100);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 48ch;
}
.wf-phase-meta {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-phase-meta li {
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
.wf-phase-meta li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 1px;
  background: rgba(255,255,255,0.36);
}
/* Visual side */
.wf-phase-visual {
  position: relative;
  padding: 32px 36px 30px;
  background: rgba(13, 32, 60, 0.35);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 280px;
}
.wf-visual-cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.wf-visual-foot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Phase 01 — coverage bars */
.wf-coverage {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wf-coverage li {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center;
  gap: 16px;
}
.wf-coverage .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
}
.wf-coverage .bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.08);
}
.wf-coverage .bar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--coral-400);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.wf-active .wf-coverage .bar-fill { transform: scaleX(1); }
.wf-coverage li:nth-child(1) .bar-fill { --i: 0; }
.wf-coverage li:nth-child(2) .bar-fill { --i: 1; }
.wf-coverage li:nth-child(3) .bar-fill { --i: 2; }
.wf-coverage li:nth-child(4) .bar-fill { --i: 3; }
.wf-coverage li:nth-child(5) .bar-fill { --i: 4; }
.wf-coverage .pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  text-align: right;
}

/* Phase 02 — roadmap rail */
.wf-roadmap {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: rm;
}
.wf-roadmap li {
  display: grid;
  grid-template-columns: 36px 56px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wf-roadmap li:last-child { border-bottom: 0; }
.wf-roadmap .rm-q {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--coral-400);
}
.wf-roadmap .rm-line {
  height: 1px;
  background: rgba(255,255,255,0.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.wf-active .wf-roadmap .rm-line { transform: scaleX(1); }
.wf-roadmap li:nth-child(1) .rm-line { --i: 0; }
.wf-roadmap li:nth-child(2) .rm-line { --i: 1; }
.wf-roadmap li:nth-child(3) .rm-line { --i: 2; }
.wf-roadmap li:nth-child(4) .rm-line { --i: 3; }
.wf-roadmap .rm-task {
  color: rgba(255,255,255,0.85);
  font-size: 13.5px;
  font-family: var(--font-display);
}

/* Phase 03 — agent flow SVG */
.wf-agents {
  width: 100%;
  height: auto;
  max-height: 240px;
}
.wf-agents .ag-rule {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.wf-agents .ag-link {
  stroke: rgba(243,107,31,0.4);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.0s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.wf-active .wf-agents .ag-link { stroke-dashoffset: 0; }
.wf-agents .ag-link:nth-of-type(1) { --i: 0; }
.wf-agents .ag-link:nth-of-type(2) { --i: 1; }
.wf-agents .ag-link:nth-of-type(3) { --i: 2; }
.wf-agents .ag-link:nth-of-type(4) { --i: 3; }
.wf-agents .ag-link:nth-of-type(5) { --i: 4; }
.wf-agents .ag-link:nth-of-type(6) { --i: 5; }
.wf-agents .ag-node circle {
  fill: rgba(8,18,38,0.95);
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1;
}
.wf-agents .ag-node.ag-input circle,
.wf-agents .ag-node.ag-out circle {
  stroke: var(--coral-400);
}
.wf-agents .ag-node text {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  fill: rgba(255,255,255,0.85);
  text-anchor: middle;
}
.wf-agents .ag-node .ag-cap {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  fill: rgba(255,255,255,0.45);
}

/* Phase 04 — ATO timeline + stamp */
.wf-ato {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ato-row {
  display: grid;
  grid-template-columns: 100px 1fr 92px;
  align-items: center;
  gap: 16px;
}
.ato-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.ato-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.08);
}
.ato-bar > span {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.0s cubic-bezier(.2,.7,.2,1);
}
.ato-bar.legacy > span {
  width: 100%;
  background: rgba(255,255,255,0.32);
  transition-delay: 100ms;
}
.ato-bar.valid > span {
  width: 18%;
  background: var(--coral-400);
  transition-delay: 380ms;
}
.wf-active .ato-bar > span { transform: scaleX(1); }
.ato-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  text-align: right;
}
.wf-ato-stamp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0 4px;
}
.wf-ato-stamp .stamp-rule {
  flex: 1;
  height: 1px;
  background: rgba(243,107,31,0.4);
}
.wf-ato-stamp .stamp-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coral-400);
}

/* Workflow responsive */
@media (max-width: 1100px) {
  .workflow-pin-wrap { height: auto; }
  .workflow-pin {
    position: static;
    height: auto;
    padding: 64px 0;
    border-top: 0;
  }
  .workflow-progress { display: none; }
  .workflow-phases {
    padding-right: 0;
    max-width: none;
    /* Unstack the grid cells so each phase flows in document order */
    display: flex;
    flex-direction: column;
  }
  .wf-phase {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 56px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .wf-phase:first-child { border-top: 0; }
  .wf-phase-grid { grid-template-columns: 1fr; gap: 40px; }
  .wf-active .wf-coverage .bar-fill,
  .wf-active .wf-roadmap .rm-line,
  .wf-active .wf-agents .ag-link,
  .wf-active .ato-bar > span { /* no-op fallback */ }
  /* Force visuals visible on tablet */
  .wf-coverage .bar-fill { transform: scaleX(1); }
  .wf-roadmap .rm-line { transform: scaleX(1); }
  .wf-agents .ag-link { stroke-dashoffset: 0; }
  .ato-bar > span { transform: scaleX(1); }
}

/* ---------- 4) CAPABILITIES — HORIZONTAL STICKY SCROLL ---------- */
/* The section is taller than the viewport (one viewport per card). The
   inner .cap-pin sticks at the top of the viewport; JS reads scroll
   progress through .cap-pin-wrap and translates .cap-track horizontally
   so the cards drag past the reader. Each card is full-height with an
   image placeholder on top and the capability copy below.

   IMPORTANT: must override .deliver overflow:hidden — sticky breaks
   if any ancestor clips overflow. */
.capabilities-cinema {
  position: relative;
  background: var(--navy-900);
  overflow: visible !important;
}
.cap-cinema-intro {
  background: var(--navy-900);
  padding-bottom: 40px;
}
.cap-cinema-intro .deliver-head { align-items: flex-end; }
.cap-cinema-intro .deliver-head-right { align-items: flex-end; padding-bottom: 12px; }
.cap-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.cap-scroll-hint svg { width: 18px; height: 14px; }

/* pin runway — height = (number of cards) × viewport (gives 1vh of
   scroll per card minus the pinned viewport height) */
.cap-pin-wrap {
  height: 540vh; /* 6 cards: 1 viewport per card + 1 for full reveal */
  position: relative;
}
.cap-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cap-track {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 80px var(--gutter) 80px;
  gap: 32px;
  will-change: transform;
}
/* CARD — full-height (~80vh), image on top + content below.
   Width is sized to fit roughly 1.5 cards across desktop. */
.cap-card {
  position: relative;
  flex: 0 0 min(640px, 70vw);
  height: 78vh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgba(13, 32, 60, 0.4);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: border-color 0.32s ease;
}
.cap-card:hover { border-color: rgba(255,255,255,0.18); }
/* image placeholder (top portion) */
.cap-card-img {
  position: relative;
  background: linear-gradient(135deg, rgba(13,32,60,0.85) 0%, rgba(8,18,38,0.95) 100%);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cap-card-img::before {
  /* hairline grid */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.9;
}
.cap-card-img-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}
.cap-card-img-mark::before,
.cap-card-img-mark::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.18);
}
.cap-card-img-mark::before {
  width: 1px; height: 100%; left: 50%; transform: translateX(-50%);
}
.cap-card-img-mark::after {
  width: 100%; height: 1px; top: 50%; transform: translateY(-50%);
}
.cap-card-img-tag {
  position: absolute;
  bottom: 16px; right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.32);
}
.cap-card-img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* card body (text content below image) */
.cap-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cap-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.cap-card-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.cap-card-body > p {
  color: var(--ink-100);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.cap-card-body .capability-platform { margin-top: 4px; }
.cap-card-body .capability-features {
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cap-card-body .capability-features li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-100);
  font-size: 12.5px;
  line-height: 1.5;
}
.cap-card-body .capability-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: var(--coral-400);
}

/* progress rail at the bottom of the pin */
.cap-progress {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 10;
}
/* Track + fill at the same height so the coral fill cleanly overlays
   the gray track instead of floating above it. The track clips overflow
   so the fill's edges stay flush. */
.cap-progress-track {
  position: relative;
  width: 320px;
  height: 2px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
}
.cap-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--coral-400);
  transition: width 0.18s linear;
}
.cap-progress-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 64px;
}
.cap-progress-meta .curr {
  color: var(--coral-400);
  font-weight: 500;
  min-width: 1.6em;
  text-align: center;
}
.cap-progress-meta .sep { color: rgba(255,255,255,0.28); }
.cap-progress-meta .tot { color: rgba(255,255,255,0.55); }

/* Responsive — collapse the horizontal scroll on tablet/phone */
@media (max-width: 1100px) {
  .cap-pin-wrap { height: auto; }
  .cap-pin {
    position: static;
    height: auto;
    overflow: visible;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
  }
  .cap-track {
    flex-direction: column;
    align-items: stretch;
    padding: 8px var(--gutter) 32px;
    gap: 24px;
    transform: none !important;
  }
  .cap-card {
    flex: 0 0 auto;
    height: auto;
    min-height: 520px;
    width: 100%;
  }
  .cap-card-img { min-height: 220px; }
  .cap-progress { display: none; }
  .cap-scroll-hint { display: none; }
  .cap-cinema-intro { padding-bottom: 0; }
  .cap-cinema-intro .deliver-head { grid-template-columns: 1fr; }
  .cap-cinema-intro .deliver-head-right { display: none; }
}
@media (max-width: 640px) {
  .cap-card { min-height: 480px; }
  .cap-card-body { padding: 24px 0 26px; }
}

/* ---------- 5) TECH FOUNDATION PRODUCT LOGOS ---------- */
/* Each tech card on the Cyber & Zero Trust page now carries the same
   product logo mark used on the homepage's "built in-house" section.
   Drop-shadow glow ties them visually to the homepage treatment. */
.tech-pmark {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.tech-pmark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(31,182,213,0.3));
}

/* ---------- 6) COMPLIANCE LINE ICONS ---------- */
/* Small hairline SVG icon above each compliance card title. Stroke-only
   currentColor so they pick up the card's text color. The .compliance-
   icon-accent inner element flips to coral for the focal stroke. */
.compliance-card { padding-top: 28px; }
.compliance-icon {
  width: 30px;
  height: 30px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-bottom: 14px;
}

/* ---------- 7) FAQ — WHITE TREATMENT ---------- */
/* Inverts the FAQ section against the rest of the page: paper bg,
   navy headline, dark mono eyebrow, dark hairlines. Toggle stays
   coral for the brand accent. Open <details> get a light gray fill
   so the active question reads as a contained card. Items also have
   horizontal padding so text + controls don't sit on the page-rails
   hairlines on either side. */
.faq-light {
  background: var(--paper, #f5f3ee);
  color: var(--navy-900);
  overflow: visible !important;
}
.faq-light .deliver-head .eyebrow-mono {
  color: var(--coral-500);
}
.faq-light .deliver-head h2 {
  color: var(--navy-900);
}
.faq-light .deliver-head p {
  color: rgba(20, 36, 60, 0.72);
}
/* FAQ list — dark text variants */
.faq-light .faq-list {
  border-top: 1px solid rgba(20, 36, 60, 0.18);
}
.faq-light .faq-item {
  border-bottom: 1px solid rgba(20, 36, 60, 0.1);
  transition: background 0.32s ease;
}
.faq-light .faq-item summary {
  /* horizontal padding pulls Q + control off the leftmost/rightmost rails */
  padding: 28px 32px;
}
.faq-light .faq-item summary:hover {
  /* override the global hover indent so it doesn't kick into the rails */
  padding-left: 32px;
  background: rgba(20, 36, 60, 0.03);
}
.faq-light .faq-q {
  color: var(--navy-900);
}
.faq-light .faq-a-inner {
  padding: 0 32px 32px;
}
.faq-light .faq-a p,
.faq-light .faq-a ul,
.faq-light .faq-a li {
  color: rgba(20, 36, 60, 0.78);
}
.faq-light .faq-toggle::before,
.faq-light .faq-toggle::after {
  background: var(--coral-500);
}
/* Active / open state — soft gray fill */
.faq-light .faq-item[open] {
  background: rgba(20, 36, 60, 0.05);
}
.faq-light .faq-item[open] summary {
  padding-left: 32px;
}
.faq-light .faq-item[open] summary:hover {
  background: rgba(20, 36, 60, 0.07);
}

/* faq-light mobile overrides — must come AFTER the desktop faq-light rules */
@media (max-width: 640px) {
  .faq-light .faq-item summary { padding: 20px 14px; }
  .faq-light .faq-item summary:hover { padding-left: 14px; }
  .faq-light .faq-item[open] summary { padding-left: 14px; }
  .faq-light .faq-a-inner { padding: 16px 14px 24px; }
}

/* ---------- 8) HIDE PAGE-RAILS ON THE AGENCY CLUSTER SECTION ---------- */
/* The agency cluster is a 3-column grid; the page-rails are a 4-column
   hairline grid, so they cut through the middle of the cards instead
   of along card edges. Hide the rails on this specific section so the
   3-column composition reads cleanly. */
.testimonial-section .page-rails { display: none; }

/* ============================================================
   GLOBAL POLISH — applied across all pages
   1) Active nav state (current-page underline)
   2) Mobile menu (off-canvas slide-in)
   3) Accessibility (skip-to-content, focus rings, motion toggle)
   ============================================================ */

/* ---------- Active nav state ---------- */
header.site nav.primary a {
  position: relative;
}
header.site nav.primary a[aria-current="page"] {
  color: var(--coral-400);
}
header.site nav.primary a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--coral-400);
}
/* Suppress active-state styling inside dropdowns */
.nav-dropdown a[aria-current="page"]::after { display: none !important; }
.nav-dropdown a[aria-current="page"] { color: rgba(255,255,255,0.7) !important; }

/* Overview link — first item in each dropdown, acts as section hub */
.nav-overview {
  color: #fff !important;
  font-size: 11px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  margin-bottom: 4px !important;
  padding-bottom: 12px !important;
  opacity: 0.9;
}
.nav-overview:hover { color: var(--cyan-300) !important; opacity: 1; }

/* ---------- Mobile menu (off-canvas) ---------- */
/* Hidden by default, slides in from right when .is-open is set. The
   backdrop is a button so it's keyboard-reachable to close the menu. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  /* Clip the off-canvas panel when it's translated 100% to the right
     so it doesn't contribute to documentElement.scrollWidth (otherwise
     causes ~20-35px of horizontal scroll on iPhone widths). */
  overflow: hidden;
}
.mobile-menu.is-open {
  pointer-events: auto;
}
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 18, 38, 0.7);
  backdrop-filter: blur(2px);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.is-open .mobile-menu-backdrop {
  opacity: 1;
}
.mobile-menu-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(440px, 88vw);
  background: var(--navy-900);
  border-left: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  padding: 28px 32px 32px;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu-panel {
  transform: translate3d(0, 0, 0);
}
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-menu-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.5);
}
.mobile-menu-close {
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-400);
  cursor: pointer;
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.mobile-menu-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.mobile-menu-nav a:hover {
  color: #fff;
  padding-left: 8px;
}
.mobile-menu-nav a[aria-current="page"] {
  color: var(--coral-400);
}
.mobile-menu-arrow {
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(255,255,255,0.32);
  transition: transform 0.25s ease, color 0.25s ease;
}
.mobile-menu-nav a:hover .mobile-menu-arrow {
  color: var(--coral-400);
  transform: translateX(4px);
}
.mobile-menu-foot {
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mobile-menu-cta {
  width: fit-content;
}
.mobile-menu-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.mobile-menu-meta .dot {
  color: rgba(255,255,255,0.3);
}

/* Hide the menu toggle on desktop */
@media (min-width: 1101px) {
  .menu-toggle { display: none; }
}

/* ---------- Skip-to-content link (a11y) ---------- */
/* Hidden until focused. First tab stop on every page so keyboard users
   can jump past the header straight to the page hero. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--coral-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Focus rings (a11y) ---------- */
/* Default focus ring removed only for elements that have a clear
   focus-visible style. Otherwise default browser ring is preserved. */
:focus-visible {
  outline: 2px solid var(--coral-400);
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--coral-400);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Inside dark sections, keep the coral ring; on light sections it
   still has enough contrast against paper background. */

@media (max-width: 640px) {
  .tech-pmark { width: 48px; height: 48px; }
  .compliance-icon { width: 24px; height: 24px; }
}

/* ============================================================
   DITHER IMAGERY SYSTEM
   Apply class .dither to any image container. When the container has
   a real <img> or <video> child, it gets:
     - grayscale + contrast bump on the media (editorial monochrome)
     - halftone dot overlay (small black dots × overlay blend mode)
     - navy duotone wash (multiply blend)
   When there's no media yet (placeholder mode), no dither is applied
   so the placeholder's existing crosshair / grid treatment stays
   clean. Drop in a real <img>/<video> later and the effect kicks in
   automatically thanks to :has().
   ============================================================ */
.dither {
  position: relative;
  overflow: hidden;
}
/* Only style media + apply overlays when there is real media. */
.dither:has(> img),
.dither:has(> video),
.dither:has(> picture > img) {
  background: var(--navy-950);
}
.dither > img,
.dither > video,
.dither > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.95);
}
/* Halftone dot pattern overlay */
.dither:has(> img)::before,
.dither:has(> video)::before,
.dither:has(> picture > img)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(0,0,0,0.5) 0.9px, transparent 1.1px);
  background-size: 3.6px 3.6px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
  opacity: 0.85;
}
/* Navy duotone wash for brand consistency */
.dither:has(> img)::after,
.dither:has(> video)::after,
.dither:has(> picture > img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,18,38,0.55) 0%, rgba(8,18,38,0.32) 100%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}
/* Variant: .dither.dither-coral adds a soft coral wash for moments
   that want a brand-tied warm tone (used selectively on hero blocks). */
.dither.dither-coral:has(> img)::after,
.dither.dither-coral:has(> video)::after,
.dither.dither-coral:has(> picture > img)::after {
  background: linear-gradient(180deg, rgba(8,18,38,0.5) 0%, rgba(243,107,31,0.18) 100%);
}

/* ============================================================
   vRAMPART (SOLUTIONS) PAGE — page-specific components
   ============================================================ */

/* RISK / SOLUTION — 2-card asymmetric layout for the Challenge
   section. Risk card is muted; Solution card carries a coral hairline
   accent on the top and a "see more" link footer. */
.risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.risk-card {
  position: relative;
  padding: 48px 40px 44px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(13, 32, 60, 0.2);
  transition: background 0.32s ease;
}
.risk-card:hover { background: rgba(13, 32, 60, 0.55); }
.risk-grid > .risk-card:last-child { border-right: 0; }
.risk-card.solution::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 1px;
  background: var(--coral-400);
}
.risk-card-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
  margin: 0;
}
.risk-card.risk .risk-card-tag {
  color: rgba(255,255,255,0.55);
}
.risk-card h3:not(.risk-card-tag) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.risk-card > p {
  color: var(--ink-100);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}
.risk-card-lead {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 400;
}
.risk-card-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.risk-card-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-100);
  font-size: 14.5px;
  line-height: 1.55;
}
.risk-card-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 1px;
  background: rgba(255,255,255,0.36);
}
.risk-card.solution .link {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 0.25s ease, color 0.25s ease;
  width: fit-content;
}
.risk-card.solution .link:hover { gap: 16px; color: var(--cyan-300); }
.risk-card.solution .link svg { width: 14px; height: 14px; }

/* CREDIBILITY CTA — small button row centered after the 3 mandate
   cards on the Trusted by Federal Agencies block. */
.credibility-cta {
  margin-top: 48px;
  display: flex;
  justify-content: flex-start;
}

/* USE CASE ROLES — replaces the platform link in capability-platform
   for the use-case cards on vRAMPART. Plain text instead of a link. */
.usecase-roles {
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(255,255,255,0.82);
  font-weight: 400;
  text-transform: none;
}
.capability-platform > .usecase-roles {
  border-bottom: 0;
  padding-bottom: 0;
}
.capability-platform:has(.usecase-roles) {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.capability-card .capability-features { margin-top: 0; }

/* Responsive */
@media (max-width: 1100px) {
  .risk-grid { grid-template-columns: 1fr; }
  .risk-grid > .risk-card { border-right: 0; }
}
@media (max-width: 640px) {
  .risk-card { padding: 36px 24px; }
}

/* ============================================================
   ROTATION + LIFT POLISH — applied site-wide
   Adds tactile hover responses to major card types: a small lift,
   a tiny tilt, and a soft shadow. Subtle so it never overwhelms.
   Skipped when motion-off / prefers-reduced-motion.
   ============================================================ */

/* Generic hover-lift transition baseline — already in place on most
   card components; we re-add transform/box-shadow to their existing
   transitions so the polish layer can drive them. */

/* Mandate / Tech / Capability / Risk cards — small lift on hover */
.mandate-card,
.tech-card,
.capability-card,
.risk-card,
.next-card {
  transition: background 0.32s ease,
              border-color 0.32s ease,
              transform 0.32s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.32s ease;
}
.mandate-card:hover,
.tech-card:hover,
.capability-card:hover,
.risk-card:hover,
.next-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.45);
  z-index: 3;
}

/* Compliance cards — even subtler since they're tighter */
.compliance-card {
  transition: background 0.32s ease, transform 0.32s ease;
}
.compliance-card:hover {
  transform: translateY(-2px);
}

/* Vehicle cards in the contract-vehicles grid — subtle shift */
.vehicle-card {
  transition: background 0.32s ease, transform 0.32s ease;
}
.vehicle-card:hover {
  transform: translateY(-2px);
}

/* Disable polish under motion-off / reduced motion */
body.motion-off .mandate-card,
body.motion-off .tech-card,
body.motion-off .capability-card,
body.motion-off .risk-card,
body.motion-off .next-card,
body.motion-off .compliance-card,
body.motion-off .vehicle-card,
body.motion-off .lcard,
body.motion-off .sol {
  transform: none !important;
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .mandate-card:hover, .tech-card:hover, .capability-card:hover,
  .risk-card:hover, .next-card:hover, .compliance-card:hover,
  .vehicle-card:hover, .lcard:hover, .sol.revealed:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   ROTATING DIAL (Cyber & Zero Trust — Platform Workflow)
   Self-contained sticky-pin section. The dial is a large circle
   anchored low in the viewport so only the upper arc is visible.
   4 phase cards orbit the center at 90° intervals; as the reader
   scrolls through the runway, JS rotates the plate so each card
   takes its turn at the top "active" position. Inactive cards
   remain visible around the dial, dimmed and angled along the
   circle's tangent. Below 1100px the dial collapses to a vertical
   stack so the content stays accessible.
   ============================================================ */

/* Section + pin runway */
.dial-section {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding: 0 0 0;
  overflow: visible !important;
}
.dial-section .deliver-head { padding: clamp(40px, 4vw, 60px) 0 16px; }
.dial-pin-wrap {
  position: relative;
  /* 3 transitions × ~95vh + 60vh hold = ~340vh */
  height: 340vh;
}
.dial-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Dial stage — circle is anchored low */
.dial {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  overflow: visible;
}

/* The visible "satellite dish" — large dark circle anchored from
   the bottom. The visible arc takes up the upper portion of the
   pin viewport. */
.dial-ring {
  position: absolute;
  left: 50%;
  bottom: -700px; /* anchor center far below — only top of arc shows */
  width: 1200px;
  height: 1200px;
  margin-left: -600px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 50% 30%, rgba(40,194,222,0.04), transparent 55%),
    var(--navy-950);
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}
.dial-ring::before {
  /* concentric inner hairline */
  content: '';
  position: absolute;
  inset: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
}

/* Step indicator — small circle pinned just above where the active
   card lands. Anchored from the bottom of the .dial using the same
   geometry as the plate (150 plate offset + 580 radius + 120 half-card
   = 850px from dial bottom for the card top). Putting the indicator's
   bottom edge at ~870px keeps a small consistent gap to the card top
   regardless of viewport height — so the line never overshoots into
   the card body. */
.dial-step {
  position: absolute;
  left: 50%;
  bottom: 870px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dial-step .step-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--coral-400);
  background: rgba(8,18,38,0.92);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
/* Short tick line below the circle — visual punctuation only, no
   longer reaches the card. */
.dial-step .step-line {
  width: 1px;
  height: clamp(12px, 1.6vh, 20px);
  background: linear-gradient(to bottom, var(--coral-400), rgba(243,107,31,0.15));
}
/* Hide the indicator on viewports too short to fit it above the card */
@media (max-height: 760px) {
  .dial-step { display: none; }
}

/* Register --dial-rotation as a typed angle so CSS can interpolate
   it smoothly across transitions instead of treating it as a string. */
@property --dial-rotation {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

/* The rotating plate. JS drives --dial-rotation. The plate is
   pinned to the same axis as .dial-ring (bottom of the section).
   All cards orbit relative to this axis. */
.dial-plate {
  position: absolute;
  left: 50%;
  bottom: -150px;
  width: 0;
  height: 0;
  transform: rotate(var(--dial-rotation, 0deg));
  /* Mechanical snap with breathing room. Detent hold zones come from
     JS; this transition smooths per-frame deltas with a slower curve
     so the rotation reads as deliberate rather than reflexive. */
  transition: transform 0.5s cubic-bezier(.45, 0, .25, 1);
  will-change: transform;
}

/* Each card orbits at --dial-radius from the plate axis. The card
   transform:
     1) rotate(slot-angle)               → rotate frame to its slot
     2) translate(0, -radius)            → move to orbit position
     3) rotate(-(slot + plate-rotation)) → cancel BOTH the slot rotation
                                           AND the plate's --dial-rotation
                                           so card content stays world-
                                           upright wherever the dial is
                                           in its spin. */
.dial-card {
  --dial-radius: 580px;
  position: absolute;
  width: 320px;
  transform-origin: center center;
  transform:
    rotate(var(--slot-angle))
    translate(0, calc(-1 * var(--dial-radius)))
    rotate(calc(-1 * var(--slot-angle) - var(--dial-rotation, 0deg)));
  margin-left: -160px;  /* half width — center the card on its slot */
  margin-top: -120px;   /* half height — center vertically */

  padding: 28px 32px;
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  transition: transform 0.5s cubic-bezier(.45, 0, .25, 1),
              opacity 0.45s ease,
              border-color 0.32s ease,
              background 0.32s ease,
              box-shadow 0.45s ease;
  /* Inactive cards are dimmed; JS toggles .dial-card-active */
  opacity: 0.35;
}
.dial-card[data-dial-card="0"] { --slot-angle: 0deg; }
.dial-card[data-dial-card="1"] { --slot-angle: 90deg; }
.dial-card[data-dial-card="2"] { --slot-angle: 180deg; }
.dial-card[data-dial-card="3"] { --slot-angle: 270deg; }

.dial-card.dial-card-active {
  opacity: 1;
  border-color: rgba(243,107,31,0.4);
  background: linear-gradient(180deg, rgba(243,107,31,0.05), var(--navy-800) 60%);
  box-shadow: 0 32px 72px -28px rgba(0,0,0,0.6);
}
.dial-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral-400);
}
.dial-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.dial-card p {
  color: var(--ink-100);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
.dial-card-meta {
  list-style: none;
  margin: 8px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dial-card-meta li {
  position: relative;
  padding-left: 20px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
.dial-card-meta li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 1px;
  background: rgba(255,255,255,0.36);
}

/* Step counter at the bottom-right of the pin */
.dial-progress {
  position: absolute;
  right: var(--gutter);
  bottom: 32px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
}
.dial-progress-curr {
  color: var(--coral-400);
  font-weight: 500;
  min-width: 1.6em;
  text-align: right;
}
.dial-progress-sep {
  color: rgba(255,255,255,0.3);
}
.dial-progress-tot {
  color: rgba(255,255,255,0.65);
}

/* Tablet / mobile — collapse the dial to a stacked vertical layout
   so all cards are reachable. The pin runway flattens. */
@media (max-width: 1100px) {
  .dial-pin-wrap { height: auto; }
  .dial-pin {
    position: static;
    height: auto;
    overflow: visible;
    border-top: 0;
  }
  .dial { padding: 32px var(--gutter) 64px; }
  .dial-ring,
  .dial-step,
  .dial-progress { display: none; }
  .dial-plate {
    position: static;
    width: 100%;
    height: auto;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .dial-card {
    position: relative;
    width: 100%;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dial-plate { transition: none !important; }
}
body.motion-off .dial-plate { transition: none !important; }

/* ============================================================
   ADDITIONAL PHOTO PLACEHOLDERS
   Shared treatment for image placeholder spots that needed visual
   weight: homepage Approach acards, Contract Vehicles next-steps,
   vRAMPART use case cards. Each has a 16:9 (or 16:10) navy gradient
   block with a subtle hairline grid + corner mono tag. The .dither
   class auto-applies the duotone treatment when a real <img> is
   added later. */
.acard-photo,
.next-card-photo,
.usecase-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  margin-bottom: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(40,194,222,0.04), transparent 60%),
    linear-gradient(135deg, rgba(13,32,60,0.85) 0%, rgba(8,18,38,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.acard-photo::before,
.next-card-photo::before,
.usecase-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.acard-photo::after,
.next-card-photo::after,
.usecase-photo::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.usecase-photo img {
  /* Photo sits inside the .usecase-photo container with a uniform 9.2%
     gap on all sides, so the container's gradient + hairline grid +
     crosshair are visible around it. For absolutely-positioned <img>
     (a replaced element), `inset` alone doesn't constrain the box —
     width/height auto falls back to the intrinsic image size. So we
     pin top/left explicitly and set width/height to 100% - 2*9.2%. */
  position: absolute;
  top: 9.2%; left: 9.2%;
  width: 81.6%; height: 81.6%;
  max-width: none; max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
.next-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.acard-photo-tag,
.next-card-photo-tag,
.usecase-photo-tag {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  z-index: 2;
}

/* Approach cards on the homepage have specific bg colors (acard-blue,
   acard-dark) — let the photo placeholder sit at the top of the
   card flush with edges. The acard already has its own padding. */
.acard-photo {
  /* Negate the parent acard's padding so the photo bleeds to the edges */
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 24px;
  width: auto;
  aspect-ratio: 16 / 9;
}
@media (max-width: 1100px) {
  .acard-photo { aspect-ratio: 16 / 10; }
}

/* Use case cards — photo bleeds to card edges by negating card padding */
.capability-card .usecase-photo {
  margin: -44px -40px 20px;
  aspect-ratio: 16 / 9;
  width: calc(100% + 80px);
}
@media (max-width: 860px) {
  .capability-card .usecase-photo {
    margin: -32px -22px 16px;
    width: calc(100% + 44px);
  }
}

/* ============================================================
   FINISHING TOUCHES
   1) Custom text selection (sitewide)
   2) Body link hover (animated cyan underline)
   3) Scrolled header state (compress + hairline)
   4) Page pre-loader (lifts away on first paint)
   ============================================================ */

/* ---------- 1) Text selection ---------- */
::selection {
  background: var(--coral-500);
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: var(--coral-500);
  color: #fff;
  text-shadow: none;
}

/* ---------- 2) Body link hover ---------- */
/* Targets unstyled <a> tags inside paragraphs and FAQ answers — i.e.,
   actual prose links, not buttons or nav items. The cyan underline
   draws in left-to-right on hover via animated background-size.
   Scoped tightly so it doesn't leak into footer columns or other
   list-based navigation. */
p a:not([class]),
.faq-a a:not([class]),
.faq-a li a:not([class]) {
  color: var(--cyan-400);
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  padding-bottom: 1px;
  transition: background-size 0.45s cubic-bezier(.2,.7,.2,1),
              color 0.25s ease;
}
p a:not([class]):hover,
.faq-a a:not([class]):hover,
.faq-a li a:not([class]):hover {
  background-size: 100% 1px;
  color: var(--cyan-300);
}
/* On the white FAQ section, body links shift to coral for contrast */
.faq-light .faq-a a:not([class]) {
  color: var(--coral-500);
}
.faq-light .faq-a a:not([class]):hover {
  color: var(--coral-400);
}

/* ---------- 3) Scrolled header state ---------- */
/* Once the user scrolls past the hero, the header compresses slightly,
   gains a subtle backdrop blur + hairline border, and pulls the brand
   mark in. JS toggles body.is-scrolled on the body once scroll > 64px. */
header.site {
  transition: padding 0.32s cubic-bezier(.2,.7,.2,1),
              background 0.32s ease,
              border-bottom-color 0.32s ease,
              backdrop-filter 0.32s ease;
}
body.is-scrolled header.site {
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(11, 28, 51, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
body.is-scrolled header.site .nav-row {
  transition: min-height 0.32s cubic-bezier(.2,.7,.2,1),
              padding 0.32s cubic-bezier(.2,.7,.2,1);
}
body.is-scrolled header.site .brand img.brand-img {
  transition: height 0.32s cubic-bezier(.2,.7,.2,1);
  height: 24px; /* compressed from 28px */
}
body.is-scrolled header.site .nav-row {
  min-height: 64px; /* compressed from default ~84px */
}

/* ---------- 4) Page pre-loader ---------- */
/* Initial overlay that covers the viewport on first paint, then lifts
   away to reveal the page. Provides a brief moment of intentionality
   before the hero appears. JS adds .is-lifted to start the animation
   after the page is ready. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--navy-950);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: transform 0.9s cubic-bezier(.7, 0, .25, 1);
  will-change: transform;
}
.page-loader.is-lifted {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}
.page-loader::before {
  /* hairline accent at the bottom edge — rides up with the curtain */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--coral-400);
  opacity: 0.5;
}
.page-loader-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.page-loader-mark .brackets {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-loader-mark .bracket {
  color: var(--coral-400);
}
.page-loader-mark .label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-loader-mark .label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral-400);
  animation: loader-pulse 1.4s ease-in-out infinite;
}
.page-loader-mark .arrow {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}
.page-loader-rule {
  width: clamp(140px, 20vw, 220px);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
.page-loader-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--coral-400);
  transform-origin: left;
  animation: loader-fill 1.2s cubic-bezier(.65, 0, .25, 1) forwards;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes loader-fill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition: opacity 0.3s ease;
  }
  .page-loader.is-lifted {
    transform: none;
    opacity: 0;
  }
  .page-loader-mark .label::before { animation: none; }
  .page-loader-rule::after { animation: none; transform: scaleX(1); }
}
body.motion-off .page-loader { display: none; }

/* ============================================================
   DITHER HORIZON — compact decorative band anchored to the bottom
   of a host section. A ribbon of blurred horizontal gradients
   that reads as an atmospheric horizon, ~320px tall (responsive).
   Scroll-triggered: rises (scaleY) as the host section scrolls
   past, then the brighter cyan/blue bands lift faster than dark
   navy ones for a parallax feel. Static fallback on
   prefers-reduced-motion or if GSAP fails to load.
   IDs `dh-grad0`...`dh-blur` are prefixed to avoid collisions.
   ============================================================ */
/* Host section must be `position: relative` so the horizon can
   anchor to its bottom edge, and gets bottom padding so the real
   content doesn't sit on top of the gradient band. */
.has-dither-horizon {
  position: relative;
  padding-bottom: clamp(180px, 24vw, 340px);
  overflow: hidden;
}
.dither-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(220px, 26vw, 360px);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.dither-horizon-svg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transform-origin: center bottom;
  transform: scaleY(0.02);
  will-change: transform, opacity;
}
.dither-horizon-svg svg {
  width: 100%; height: 100%;
  display: block;
}
/* Make sure the section's real content sits above the horizon. */
.has-dither-horizon > .container,
.has-dither-horizon > .page-rails {
  position: relative;
  z-index: 1;
}
/* Static fallback when GSAP fails to load. */
.no-gsap .dither-horizon-svg {
  opacity: 1;
  transform: scaleY(1);
}
/* Reduced-motion: skip the timeline; show the gradient statically. */
@media (prefers-reduced-motion: reduce) {
  .dither-horizon-svg {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ============================================================
   CONTRACT VEHICLE DETAIL — FACT SHEET LAYOUT
   Promoted from inline <style> on navy-seaport-nxg.html so every
   CV detail page (built and to-be-built) inherits the same rules.
   All selectors are namespaced under .cv-* so promoting them is
   side-effect-free for non-CV pages.
   ============================================================ */

/* Override global pillar-hero centering for this page */
.cv-page-hero.pillar-hero { min-height: auto; }
.cv-page-hero .pillar-hero-inner {
  /* Force full cross-axis width inside the flex-column parent.
     Without this, `.container { margin: 0 auto }` collapses the
     inner to its content's intrinsic width on CV pages whose H1
     is short (e.g. "GSA OASIS+ SB"). */
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  text-align: left;
  justify-content: flex-start;
  padding-top: 140px;
  padding-bottom: 64px;
}
.cv-page-hero .pillar-hero-inner h1 {
  text-align: left;
  margin: 0 0 16px;
  max-width: none;
}

/* Hero two-column layout */
.cv-hero-top {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}
.cv-hero-right { display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 8px; }
.cv-hero-subtitle {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-200);
  margin: 16px 0 0;
  max-width: 480px;
}
.cv-hero-category {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 500;
  color: var(--coral-400);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: right;
  display: block;
}
/* JV affiliation chip (e.g. "CVTEK JV") for joint-venture CVs */
.cv-hero-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-300);
  border: 1px solid rgba(28,182,213,0.32);
  background: rgba(28,182,213,0.06);
  padding: 4px 10px;
  border-radius: 2px;
}
.cv-hero-img {
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: var(--navy-800) center / cover no-repeat;
}

/* Mobile hero */
@media (max-width: 680px) {
  .cv-hero-top {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }
  .cv-page-hero .pillar-hero-inner h1 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .cv-hero-right { justify-content: flex-start; align-items: flex-start; }
  .cv-hero-category { text-align: left; font-size: 13px; }
  .cv-hero-img { aspect-ratio: 16 / 7; }
  .gs-inner h2.cv-cta-h2 { white-space: normal !important; }
}

/* ── FACT SHEET BODY ─────────────────────────────────────────── */
.cv-body {
  background: var(--navy-900);
  color: #fff;
  padding: 80px 0 100px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cv-body::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 4px;
  background: linear-gradient(180deg, transparent 0%, var(--blue-500) 30%, var(--cyan-500) 70%, transparent 100%);
  filter: blur(2px); opacity: 0.3;
}

/* Two-column master layout */
.cv-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ── LEFT COLUMN ── */
.cv-col-main { display: flex; flex-direction: column; gap: 56px; }

/* Overview block */
.cv-section-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-500);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.cv-section-label::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6;
}
h2.cv-section-label {
  font-size: 10.5px; font-weight: 400; margin: 0 0 16px;
}
/* Horizontal image above overview (defined but currently unused) */
.cv-overview-img {
  width: 100%; aspect-ratio: 16 / 5;
  overflow: hidden; margin-bottom: 56px;
}
.cv-overview-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.cv-overview-text {
  color: var(--ink-100);
  font-size: 15px; line-height: 1.65;
  margin: 0;
}

/* Scope block */
.cv-scope-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-200);
  margin: 0 0 20px;
}
.cv-scope-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cv-scope-list li {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #fff;
}
.cv-scope-list li .num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--coral-500);
  flex-shrink: 0; min-width: 28px;
}
/* Unnumbered variant — for "Key Features" / SIN lists (no numerical rail).
   Bullet acts as a small coral square so the visual rhythm of the rail is
   preserved without competing for index space. */
.cv-scope-list.unnumbered li {
  padding-left: 0;
  gap: 14px;
}
.cv-scope-list.unnumbered li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  background: var(--coral-500);
  margin-right: 2px;
}

/* Quality block */
.cv-quality-text {
  color: var(--ink-100);
  font-size: 15px; line-height: 1.6;
  margin: 0;
}
.cv-certs {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cv-cert {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan-300);
  border: 1px solid rgba(28,182,213,0.28);
  padding: 5px 12px; border-radius: 2px;
  background: rgba(28,182,213,0.05);
}

/* ── RIGHT COLUMN — data card ── */
.cv-col-sidebar { display: flex; flex-direction: column; gap: 24px; }

.cv-data-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,32,60,0.35);
}
.cv-data-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cv-data-row:last-child { border-bottom: 0; }
.cv-data-label {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-300);
}
.cv-data-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: -0.012em;
  color: #fff;
}
.cv-data-value em { font-style: normal; color: var(--cyan-400); }

/* Contact card (in-sidebar variant) */
.cv-contact-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(13,32,60,0.35);
  padding: 24px;
}
.cv-contact-label {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--coral-500);
  margin-bottom: 12px;
}
.cv-contact-text {
  color: var(--ink-100);
  font-size: 13.5px; line-height: 1.5;
  margin: 0 0 14px;
}
.cv-email-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--cyan-300);
  border-bottom: 1px solid rgba(28,182,213,0.32);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.cv-email-link:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.cv-email-link svg { width: 12px; height: 9px; flex-shrink: 0; }

/* PM contact block — used in the get-started CTA when the spec lists a
   named program manager + phone + email + external GSA link.
   Lives below the H2 inside .gs-row's left column. */
.cv-pm-contact {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 22px;
  padding: 18px 22px;
  border-left: 2px solid var(--coral-500);
  background: rgba(13, 32, 60, 0.55);
}
.cv-pm-contact .pm-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-400);
}
.cv-pm-contact .pm-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}
.cv-pm-contact .pm-line {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-100);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.cv-pm-contact a {
  color: var(--cyan-300);
  border-bottom: 1px solid rgba(28,182,213,0.32);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.cv-pm-contact a:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.cv-pm-contact .pm-sep { color: var(--ink-300); opacity: 0.6; }

/* Responsive — CV body two-column collapses to single on narrow */
@media (max-width: 860px) {
  .cv-layout { grid-template-columns: 1fr; }
  .cv-col-sidebar { order: -1; }
  .cv-data-card, .cv-contact-card { max-width: 100%; }
}

/* Hub vehicle-card anchor wrapper — strip default link styling so the
   .vehicle-card visual is unchanged, but the whole card becomes
   clickable as a single accessible target. */
.vehicle-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.vehicle-card-link:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 4px;
}

/* ============================================================
   LEADERSHIP DETAIL PAGE — full-bio row layout. Used by
   /leadership.html where each executive gets a square headshot
   on the left and a name + title + multi-sentence bio on the
   right. Collapses to single column on narrow viewports.
   ============================================================ */
.leadership-list {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule-light);
}
.lead-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: 44px 0;
  border-bottom: 1px solid var(--rule-light);
  align-items: start;
}
.lead-row-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--navy-900);
}
.lead-row-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--coral-500);
}
.lead-row-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.lead-row-body { display: flex; flex-direction: column; gap: 14px; }
.lead-row-body h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy-900);
  margin: 0;
}
.lead-row-body .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--coral-500);
}
.lead-row-body p {
  color: var(--ink-700, var(--navy-900));
  font-size: 15.5px; line-height: 1.65;
  margin: 0;
  max-width: 72ch;
}

@media (max-width: 760px) {
  .lead-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  .lead-row-photo { max-width: 220px; }
}

/* ============================================================
   ABOUT SUB-PAGES — shared utilities used by certifications,
   citizenship, culture, and careers pages.
   ============================================================ */

/* Common section heading blocks — dark variant (on-dark) and light. */
.cert-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.cert-head .eyebrow-mono { color: var(--coral-400); margin-bottom: 18px; display: inline-block; }
.cert-head h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.028em; line-height: 1.06;
  color: #fff; margin: 0 0 18px;
}
.cert-head p {
  color: var(--ink-100);
  font-size: 17px; line-height: 1.55;
  margin: 0; max-width: 64ch;
}
.cert-cmmi-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.cert-cmmi-head .eyebrow-mono { color: var(--coral-500); margin-bottom: 18px; display: inline-block; }
.cert-cmmi-head h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.028em; line-height: 1.06;
  color: var(--navy-900); margin: 0 0 18px;
}
.cert-cmmi-head p {
  color: var(--ink-700, var(--navy-700));
  font-size: 17px; line-height: 1.55;
  margin: 0; max-width: 64ch;
}

/* ─── Section: Why It Matters (3 dark cards) ─── */
.cert-why {
  background: var(--navy-900);
  color: #fff;
  padding: 100px 0;
  position: relative;
}
.cert-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cert-why-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 0; border-left: 0;
  padding: 36px 32px;
  background: rgba(13, 32, 60, 0.4);
}
.cert-why-card:first-child { border-left: 1px solid rgba(255,255,255,0.08); }
.cert-why-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: -0.018em; line-height: 1.15;
  color: #fff; margin: 0 0 14px;
}
.cert-why-card p {
  color: var(--ink-100);
  font-size: 15px; line-height: 1.6;
  margin: 0;
}
.cert-why-card .culture-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cert-why-card .culture-list li {
  color: var(--ink-100);
  font-size: 14.5px; line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.cert-why-card .culture-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 1px; background: var(--coral-500);
}
@media (max-width: 920px) {
  /* !important needed: insights.html sets inline `grid-template-columns: 1fr 1fr`
     for its 2-card variant, which would otherwise win over this responsive rule. */
  .cert-why-grid { grid-template-columns: 1fr !important; }
  .cert-why-card:first-child { border-left: 0; }
}

/* ─── Section: CMMI ML5 comparison (light) ─── */
.cert-cmmi {
  background: var(--paper-1, #fff);
  color: var(--navy-900);
  padding: 100px 0;
  position: relative;
}
.cert-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rule-light);
}
.cert-compare-col {
  border: 1px solid var(--rule-light);
  border-top: 0; border-left: 0;
  padding: 36px 32px;
  background: #fff;
}
.cert-compare-col:first-child { border-left: 1px solid var(--rule-light); }
.cert-compare-col h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; letter-spacing: -0.018em; line-height: 1.15;
  margin: 12px 0 18px;
}
.cert-compare-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cert-compare-col li {
  font-size: 15px; line-height: 1.55;
  padding-left: 22px;
  position: relative;
  color: var(--ink-700, var(--navy-700));
}
.cert-compare-col li::before {
  content: "—"; position: absolute; left: 0; top: 0;
  color: rgba(11,28,51,0.4);
}
.cert-compare-tag {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-300, rgba(11,28,51,0.5));
  display: inline-block;
  margin: 0;
}
.cert-compare-col-active {
  background: var(--navy-900); color: #fff;
}
.cert-compare-col-active h4 { color: #fff; }
.cert-compare-col-active li { color: var(--ink-100); }
.cert-compare-col-active li::before { color: var(--cyan-400); content: "✓"; }
.cert-compare-col-active .cert-compare-tag-active { color: var(--coral-400); }
@media (max-width: 760px) {
  .cert-compare { grid-template-columns: 1fr; }
  .cert-compare-col:first-child { border-left: 0; }
}

/* ─── Section: Results + Badges + Stats grid (dark) ─── */
.cert-results {
  background: var(--navy-900);
  color: #fff;
  padding: 100px 0;
  position: relative;
}
.cert-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 56px;
}
.cert-badge {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan-300);
  border: 1px solid rgba(28,182,213,0.32);
  background: rgba(28,182,213,0.05);
  padding: 8px 16px;
  border-radius: 2px;
  margin: 0;
}
.cert-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cert-stats-4col { grid-template-columns: repeat(4, 1fr); }
.cert-stat {
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 0; border-left: 0;
  padding: 36px 32px;
  background: rgba(13, 32, 60, 0.4);
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 18px;
}
.cert-stat:first-child { border-left: 1px solid rgba(255,255,255,0.08); }
.cert-stat .num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.045em; line-height: 0.95;
  color: #fff;
  display: flex; align-items: baseline;
  margin: 0;
}
.cert-stat .num sup {
  font-size: 0.42em; vertical-align: top; font-weight: 400;
  color: var(--cyan-400); letter-spacing: 0; margin-left: 4px;
}
.cert-stat-word {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan-400);
  align-self: flex-end;
  margin-left: 10px; margin-bottom: 6px;
}
.cert-stat p {
  color: var(--ink-200);
  font-size: 15px; line-height: 1.6;
  margin: 16px 0 0;
}
@media (max-width: 760px) {
  .cert-stats-grid { grid-template-columns: 1fr; }
  .cert-stat:first-child { border-left: 0; }
}

/* ─── Citizenship: three community-impact rows (light) ─── */
.citizen-three {
  background: var(--paper-1, #fff);
  color: var(--navy-900);
  padding: 100px 0;
  position: relative;
}
.citizen-row {
  border-top: 1px solid var(--rule-light);
  padding: 40px 0;
}
.citizen-row:last-child { border-bottom: 1px solid var(--rule-light); }
.citizen-row-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.citizen-row-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.018em; line-height: 1.15;
  margin: 0;
}
.citizen-partner-link {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coral-500);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.citizen-partner-link:hover { color: var(--coral-400); }
.citizen-row-sub {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-300, rgba(11,28,51,0.5));
  margin: 0 0 14px;
  font-weight: 400;
}
.citizen-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px;
}
.citizen-list li {
  font-size: 15px; line-height: 1.5;
  color: var(--ink-700, var(--navy-700));
  padding-left: 22px;
  position: relative;
}
.citizen-list li::before {
  content: "✓"; position: absolute; left: 0; color: var(--cyan-500);
}
@media (max-width: 600px) {
  .citizen-list { grid-template-columns: 1fr; }
}

/* ─── Culture core values accordion section + careers benefits ─── */
.culture-values {
  background: #fff;
  color: var(--navy-900);
  padding: 100px 0;
  position: relative;
}
.careers-intro {
  background: var(--navy-900);
  color: #fff;
  padding: 100px 0;
  position: relative;
}
.careers-intro .cert-cmmi-head h2 { color: #fff; }
.careers-intro .cert-cmmi-head .eyebrow-mono { color: var(--coral-400); }
.careers-intro .cert-cmmi-head p { color: var(--ink-100); }
.culture-list {
  list-style: none; padding: 0; margin: 8px 0 0;
}
.culture-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 14.5px; line-height: 1.55;
}
.culture-list li::before {
  content: "—"; position: absolute; left: 0; top: 6px;
  color: var(--coral-400);
}
.check-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.check-list li {
  position: relative;
  padding: 2px 0 2px 22px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--navy-700);
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  color: var(--cyan-400); font-size: 13px;
}

/* Outline variant of split CTA button — uses transparent fill,
   complements the dark hero with a clearly secondary action. */
.btn-split-outline {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff; background: transparent;
  transition: border-color .2s ease, color .2s ease;
}
.btn-split-outline .btn-label { padding: 14px 22px; }
.btn-split-outline .btn-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.4);
}
.btn-split-outline .btn-icon svg { width: 22px; height: 14px; }
.btn-split-outline:hover { border-color: var(--cyan-300); color: var(--cyan-300); }
.btn-split-outline:hover .btn-icon { border-left-color: var(--cyan-300); }

/* ============================================================
   INSIGHTS HUB + NEWS / RESOURCES LISTINGS
   ============================================================ */

/* Insights hub — two routing cards (News, Resources). Reuses the
   .cert-why-card chrome with a coral eyebrow and a CTA-style label. */
.insights-card {
  text-decoration: none;
  display: flex; flex-direction: column; gap: 18px;
  transition: background 0.25s ease, transform 0.32s cubic-bezier(.2,.7,.2,1), box-shadow 0.32s ease;
}
.insights-card:hover {
  background: rgba(13, 32, 60, 0.7);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.5);
}
.insights-card-eyebrow {
  color: var(--coral-400);
  font-size: 11px;
  letter-spacing: 0.22em;
}
.insights-card-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan-300);
  margin-top: auto;
}
.insights-card-cta svg { width: 22px; height: 14px; }

/* News listing — vertical stack of full-width article cards on light bg. */
.news-list-section {
  background: var(--paper-1, #fff);
  color: var(--navy-900);
  padding: 100px 0;
  position: relative;
}
.news-grid {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule-light);
}
.news-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule-light);
  color: inherit; text-decoration: none;
  transition: padding-left 0.28s ease, background 0.28s ease;
}
.news-card:hover { padding-left: 14px; background: var(--paper-2, rgba(11,28,51,0.03)); }
.news-card-meta {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-300, rgba(11,28,51,0.5));
}
.news-card-meta time { color: var(--coral-500); }
.news-card-tag {
  padding: 4px 10px;
  border: 1px solid rgba(11,28,51,0.18);
  border-radius: 2px;
}
.news-card-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.022em; line-height: 1.15;
  color: var(--navy-900);
  margin: 0;
  max-width: 72ch;
}
.news-card-excerpt {
  font-size: 15.5px; line-height: 1.55;
  color: var(--ink-700, var(--navy-700));
  margin: 0; max-width: 72ch;
}
.news-card-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coral-500);
}
.news-card-link svg { width: 22px; height: 14px; }

/* News article (post) body */
.news-back-link {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan-300);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  margin-bottom: 28px;
}
.news-back-link:hover { color: #fff; }
.news-post-meta {
  display: flex; gap: 18px; align-items: center;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-300, rgba(255,255,255,0.5));
}
.news-post-meta time { color: var(--coral-400); }
.news-post-body {
  background: var(--paper-1, #fff);
  color: var(--navy-900);
  padding: 100px 0;
  position: relative;
}
.news-post-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700, var(--navy-700));
}
.news-post-prose h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.018em; line-height: 1.2;
  color: var(--navy-900);
  margin: 56px 0 18px;
}
.news-post-prose p { margin: 0 0 20px; }
.news-post-prose blockquote {
  margin: 36px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--coral-500);
  background: rgba(11,28,51,0.03);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  font-style: italic;
  color: var(--navy-900);
}
.news-post-back {
  margin-top: 48px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.news-post-back a {
  color: var(--coral-500);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.news-post-back a:hover { color: var(--coral-400); }

/* Leadership hub — anchor wrapper around each .lcard so the whole card
   routes to its single-view page without breaking the existing .lcard
   visual treatment. */
.lcard-link {
  color: inherit;
  text-decoration: none;
  display: block;
  height: 100%;
}
.lcard-link:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 4px;
}

/* ============================================================
   LEADERSHIP SINGLE-VIEW PAGE — photo on left, breadcrumb + name
   + title + (placeholder) social icons + bio + Contact CTA on the
   right. Used by /leadership/<slug>.html.
   ============================================================ */
.leader-single {
  background: var(--navy-900);
  color: #fff;
  padding: clamp(80px, 12vw, 230px) 0;
  position: relative;
}
.leader-single-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.75fr) 1.2fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.leader-single-photo {
  position: relative;
  aspect-ratio: 4 / 4;
  overflow: hidden;
  background: rgba(13, 32, 60, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.leader-single-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--coral-500);
}
.leader-single-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.leader-single-body {
  display: flex; flex-direction: column;
  gap: 22px;
  padding-top: 4px;
}
.leader-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 8px;
  color: var(--ink-200);
}
.leader-breadcrumb a {
  color: var(--ink-200);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.leader-breadcrumb a:hover {
  color: var(--cyan-300);
  border-bottom-color: rgba(28,182,213,0.4);
}
.leader-breadcrumb-current {
  color: var(--coral-400);
}
.leader-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.leader-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-200);
}
.leader-social {
  display: flex; gap: 10px;
  margin: 4px 0 24px;
}
.leader-social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(28, 182, 213, 0.12);
  color: var(--cyan-300);
  border: 1px solid rgba(28, 182, 213, 0.4);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.leader-social-icon svg { width: 18px; height: 18px; }
.leader-social-icon:hover {
  background: var(--cyan-500);
  color: var(--navy-900);
  border-color: var(--cyan-500);
}
.leader-bio {
  margin-top: 8px;
  max-width: 64ch;
}
.leader-bio p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-100);
  margin: 0 0 18px;
}
.leader-cta {
  /* Inherits all visual styling from .btn.btn-light (white pill on dark);
     this rule only sets positioning within the single-view body flex column. */
  align-self: flex-start;
  margin-top: 18px;
}

@media (max-width: 860px) {
  .leader-single { padding: 120px 0 80px; }
  .leader-single-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .leader-single-photo {
    max-width: 420px;
    margin: 0 auto;
  }
  .leader-name {
    font-size: clamp(32px, 8vw, 48px);
  }
}
@media (max-width: 480px) {
  .leader-single { padding: 120px 0 64px; }
}

/* Hero tagline — emphasis style for the punchy lead-in that precedes the
   page-hero-body description on capabilities/solutions/product pages. */
.page-hero-tagline {
  display: inline;
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
}

/* Resource detail layout — sidebar metadata + main body content */
.resource-detail {
  background: var(--paper-1, #fff);
  color: var(--navy-900);
  padding: 100px 0;
  position: relative;
}
.resource-detail-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.resource-detail-meta {
  border-top: 2px solid var(--coral-500);
}
.resource-meta-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-light);
}
.resource-meta-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-300, rgba(11,28,51,0.5));
}
.resource-meta-value {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px; line-height: 1.3;
  color: var(--navy-900);
}
.resource-share {
  display: flex; gap: 10px;
}
.resource-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--rule-light);
  color: var(--ink-700, var(--navy-700));
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.resource-share a:hover { color: #fff; background: var(--coral-500); border-color: var(--coral-500); }

.resource-detail-body {
  font-size: 17px; line-height: 1.7;
  color: var(--ink-700, var(--navy-700));
  max-width: 720px;
}
.resource-detail-body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.018em; line-height: 1.2;
  color: var(--navy-900);
  margin: 36px 0 14px;
}
.resource-detail-body p { margin: 0 0 18px; }
.resource-takeaways {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.resource-takeaways li {
  padding-left: 24px;
  position: relative;
  font-size: 15.5px; line-height: 1.55;
}
.resource-takeaways li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--cyan-500); font-weight: 600;
}

/* Video placeholder block */
.resource-video-placeholder {
  margin: 28px 0;
  padding: 80px 28px;
  border: 1px dashed rgba(11,28,51,0.18);
  background: rgba(11,28,51,0.03);
  text-align: center;
}
.resource-video-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-500);
}
.resource-video-placeholder p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-300, rgba(11,28,51,0.5));
}

/* Gated-download form */
.resource-form {
  margin-top: 36px;
  padding: 32px;
  background: var(--navy-900);
  color: #fff;
  display: flex; flex-direction: column; gap: 16px;
}
.resource-form-heading {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: -0.018em; line-height: 1.2;
  color: #A9B4C4;
  margin: 0;
}
.resource-form-lead {
  margin: 0 0 24px;
  font-size: 14.5px;
  color: #A9B4C4;
}
.resource-form label {
  display: flex; flex-direction: column; gap: 6px;
}
.resource-form label span {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-100);
}
.resource-form label span em {
  font-style: normal;
  color: var(--coral-400);
  text-transform: none;
  letter-spacing: 0.04em;
}
.resource-form input,
.resource-form textarea {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.resource-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.resource-form input:focus,
.resource-form textarea:focus {
  outline: none;
  border-color: var(--cyan-300);
  background: rgba(28,182,213,0.06);
}
.resource-form button[type=submit] {
  align-self: flex-start;
  margin-top: 8px;
  border: 1px solid #fff;
  background: #fff;
  color: var(--navy-900);
  cursor: pointer;
}
.resource-download-direct {
  margin-top: 24px;
}

/* ─── contact.html — Meta + form 2-col layout, dark theme ─── */
.contact-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  padding: 80px 0;
}
.contact-meta {
  border-top: 2px solid var(--coral-500);
}
.contact-meta-block {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 6px;
}
.contact-meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-200);
}
.contact-meta-value {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 15.5px; line-height: 1.45;
  color: #fff;
}
.contact-meta-value a {
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(40,194,222,0.4);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.contact-meta-value a:hover {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}
/* Contact-form variant of .resource-form — no top margin (the layout
   handles spacing) and a side-by-side first/last name row at desktop. */
.contact-form { margin-top: 0; }
.contact-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.contact-form-wrap { min-width: 0; }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .contact-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .resource-detail-layout { grid-template-columns: 1fr; }
  .resource-detail-meta { order: 2; }
  .resource-detail-body { order: 1; }
}