/* ─────────────────────────────────────────────────────────────
   Data Slayer — Editorial chain-of-custody dossier
   ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg-dark:    #101e38;
  --bg-paper:   #ffffff;
  --bg-light:   #f4f6f9;
  --bg-accent:  #2f6fb7;
  --bg-footer:  #0a1626;

  /* Type on dark */
  --text-on-dark:        #eef2f8;
  --text-on-dark-muted:  #a9b6cb;
  --text-on-dark-faint:  #5e6f8c;

  /* Type on light */
  --text-on-light:        #0a1626;
  --text-on-light-muted:  #5a6675;
  --text-on-light-faint:  #7c8798;

  /* Hairlines */
  --line-on-dark:  rgba(255, 255, 255, 0.10);
  --line-on-dark-strong: rgba(255, 255, 255, 0.22);
  --line-on-light: #dfe4ec;
  --line-on-light-strong: #c9d1dd;

  /* Accents */
  --accent:     #0070d2;
  --accent-hi:  #3a93ea;
  --accent-deep:#055ba8;
  --green:      #1d7a5c;
  --green-on-dark: #2dab7f;

  /* Type families */
  --display: 'Archivo', 'Helvetica Neue', sans-serif;
  --sans:    'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* Metrics */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  /* Shadows (layered, color-tinted) */
  --sh-card-dark: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 112, 210, 0.10);
  --sh-card-light: 0 22px 45px -28px rgba(10, 22, 38, 0.32), 0 0 0 1px var(--line-on-light);
  --sh-dock: 0 40px 80px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.04);

}

/* ─────────── Reset & base ─────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: auto; /* Lenis owns scroll */
  background: var(--bg-dark);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent); color: #ffffff; }

/* ─────────── Type primitives ─────────── */

.mono {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mono--label { color: var(--accent); }
.mono--inverse { color: rgba(255, 255, 255, 0.85); }
.mono--dim { color: var(--text-on-dark-faint); }
.section--light .mono--dim,
.section--paper .mono--dim { color: var(--text-on-light-faint); }
.section--light .mono--label,
.section--paper .mono--label { color: var(--accent-deep); }

/* ─────────── Sticky header ─────────── */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(16, 30, 56, 0.0);
  backdrop-filter: blur(0px);
  transition: background 0.32s ease, backdrop-filter 0.32s ease, border-color 0.32s ease;
  border-bottom: 1px solid transparent;
}
.site-header[data-glass="true"] {
  background: rgba(16, 30, 56, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line-on-dark);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; }
.brand-mark { width: auto; height: 30px; display: block; }
.primary-nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  color: var(--text-on-dark);
  position: relative;
  padding: 8px 0;
  transition: color 0.18s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 0.22s cubic-bezier(.5,.05,.2,1);
}
.nav-link:hover { color: var(--accent-hi); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.is-current::after { width: 100%; }
.nav-link:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 4px;
  border-radius: 2px;
}
.nav-link:active { transform: translateY(1px); }

.nav-link--cta {
  background: var(--accent);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: 0 8px 22px -8px rgba(0, 112, 210, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.nav-link--cta::after { display: none; }
.nav-link--cta:hover { background: var(--accent-hi); box-shadow: 0 14px 28px -10px rgba(58, 147, 234, 0.55), inset 0 0 0 1px rgba(255,255,255,0.12); }
.nav-link--cta:active { transform: translateY(1px); }

.nav-link--portal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-on-dark);
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.nav-link--portal::after { display: none; }
.nav-link--portal:hover {
  border-color: var(--accent-hi);
  color: var(--accent-hi);
  background: rgba(58, 147, 234, 0.06);
}
.nav-link--portal .portal-arrow {
  font-family: var(--mono);
  font-size: 0.78em;
  transform: translateY(-1px);
  transition: transform 0.18s ease;
}
.nav-link--portal:hover .portal-arrow { transform: translate(2px, -3px); }

.nav-link--phone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--line-on-dark);
}
.nav-link--phone::after { display: none; }
.nav-link--phone .phone-mono {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--text-on-dark-faint);
  text-transform: uppercase;
}
.nav-link--phone .phone-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-on-dark);
  transition: color 0.18s ease;
}
.nav-link--phone:hover .phone-num { color: var(--accent-hi); }

/* ─────────── Mobile nav toggle (hamburger) ─────────── */
/* Hidden on desktop; the full nav row is shown. Below 1024px the row no
   longer fits, so the nav collapses into a dropdown panel toggled by this
   button (wired up in app.js / page.js). */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  margin: -8px -6px -8px 0; /* keep tap target large without growing the bar */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-on-dark);
  border-radius: var(--r-sm);
  transition: background 0.18s ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.nav-toggle-box {
  position: relative;
  display: block;
  width: 22px; height: 14px;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.26s cubic-bezier(.5,.05,.2,1), opacity 0.2s ease;
}
.nav-toggle-bar { top: 50%; transform: translateY(-50%); }
.nav-toggle-bar::before { content: ''; top: -6px; }
.nav-toggle-bar::after  { content: ''; top: 6px; }
.site-header[data-nav-open="true"] .nav-toggle-bar { background: transparent; }
.site-header[data-nav-open="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.site-header[data-nav-open="true"] .nav-toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* Below 1024px the full nav row no longer fits — collapse it into a dropdown
   panel anchored under the header bar, toggled by .nav-toggle. */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }

  /* Solid backdrop whenever the menu is open, even at the very top of page. */
  .site-header[data-nav-open="true"] {
    background: rgba(16, 30, 56, 0.92);
    backdrop-filter: blur(14px) saturate(120%);
    border-bottom-color: var(--line-on-dark);
  }
  .header-inner { padding: 14px var(--gutter); }

  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 22px;
    background: rgba(16, 30, 56, 0.97);
    backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--line-on-dark);
    box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(.5,.05,.2,1), visibility 0.26s;
  }
  .site-header[data-nav-open="true"] .primary-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-link {
    font-size: 1rem;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line-on-dark);
  }
  .nav-link::after { display: none; }

  .nav-link--portal {
    justify-content: flex-start;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid var(--line-on-dark);
    border-radius: 0;
    padding: 14px 2px;
  }
  .nav-link--cta {
    margin-top: 16px;
    justify-content: center;
    text-align: center;
    padding: 15px 16px;
    border-radius: var(--r-sm);
  }
  .nav-link--phone {
    margin-top: 16px;
    padding: 2px;
    border-left: 0;
    gap: 10px;
  }
  .nav-link--phone .phone-num { font-size: 1rem; }
}

/* ─────────── Hero (in-flow, circular reuse) ─────────── */

.hero {
  --hero-anchor: 25%; /* overlay (headline + device carousel) anchor, measured from the top of LogicalBits.png */
  position: relative;
  z-index: 0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid var(--line-on-dark);
  /* Crop the visible hero to the bit-band line (≈56.51vw down, since the image
     is full-width at a 3805/2424 ratio) plus room for the headline + CTAs that
     hang below it — trimming the portrait image's empty lower half. */
  height: calc(56.51vw + clamp(300px, 30vw, 520px));
}
/* As tall as the full uncropped image, so the overlay's 36% = the bit-band. */
.hero-media {
  position: relative;
  z-index: 0;
  width: 100%;
}
/* Layered radial-gradient atmosphere + faint grid */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 84% -8%, rgba(45, 171, 127, 0.22), transparent 60%),
    radial-gradient(ellipse 64% 90% at -6% 112%, rgba(0, 112, 210, 0.18), transparent 58%);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 78% 80% at 60% 30%, #000 26%, transparent 84%);
          mask-image: radial-gradient(ellipse 78% 80% at 60% 30%, #000 26%, transparent 84%);
}

/* Full-width, UNCROPPED bit-stream image — height:auto so it scales
   predictably and the baked-in bit-band always lands at 36% of its height.
   It sits in flow and gives the hero its height. Capped + centred on
   ultra-wide screens so it never stretches absurdly. Its own dark navy
   background already matches --bg-dark; the veil melts any seam. */
.hero-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 2200px;
  height: auto;
  /* Reserve the image's intrinsic box BEFORE the PNG decodes, so .hero-media
     has its full height from first paint. Without this the box is 0px tall
     until the bytes arrive, the overlay's top:36% resolves to 0, and the
     headline + image flash at the very top before snapping down on load. */
  aspect-ratio: 2424 / 3805;
  margin: 0 auto;
  pointer-events: none;
}
/* Fades the image edges into --bg-dark (so the capped sides blend on wide
   screens) and darkens the left third for headline contrast. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--bg-dark) 0%,
      rgba(16, 30, 56, 0.80) 26%,
      rgba(16, 30, 56, 0.30) 52%,
      rgba(16, 30, 56, 0) 74%),
    linear-gradient(to bottom,
      var(--bg-dark) 0%,
      rgba(16, 30, 56, 0) 14%,
      rgba(16, 30, 56, 0) 44%,
      var(--bg-dark) 78%); /* melt the empty lower half of the tall image into the page */
}

/* The overlay is absolutely pinned so its vertical centre sits on the image's
   36% bit-band line — independent of viewport, since the image scales
   uncropped. The headline and the hard drive ride this same line. */
.hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-anchor);
  transform: translateY(-50%);
  z-index: 2;
  padding: 0 var(--gutter);
  pointer-events: none; /* re-enabled on interactive children below */
}
.hero-inner {
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(36px, 5vw, 88px);
}
.hero-stack {
  display: grid;
  gap: 26px;
  align-content: center;
  max-width: 600px;
  flex: 1 1 auto;
  pointer-events: auto;
}
/* Hero intro — CSS-driven staggered fade-up (replaces the old GSAP gsap.from).
   Runs the instant style.css applies, so the headline (the LCP element) paints
   without waiting for GSAP to download and execute. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-stack > * {
  opacity: 0;
  animation: heroRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-stack > *:nth-child(1) { animation-delay: 0.06s; }
.hero-stack > *:nth-child(2) { animation-delay: 0.15s; }
.hero-stack > *:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .hero-stack > * { opacity: 1; animation: none; }
}
/* Device carousel, levelled with the headline on the 36% line. All renders
   share the 2816×1536 ratio, so they stack and crossfade in place. */
.hero-visual {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero-hdd-stack {
  position: relative;
  width: clamp(300px, 33vw, 560px);
  aspect-ratio: 2816 / 1536; /* reserves the height so the row never shifts */
  overflow: hidden; /* a window: renders slide within it, never across the text */
}
.hero-hdd {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0; /* hidden until its slot; the swipe sets opacity:1 */
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.45));
  animation: hddSwipe 30s linear infinite;
  animation-delay: calc(var(--i) * 3s); /* 3s slot each; HDD (i:0) leads at load */
  will-change: transform, opacity;
}
/* Each render fades in as it swipes in from the left, holds for its 3s slot,
   then fades out as it swipes out to the right just as the next swipes in —
   a continuous left-to-right belt. The slide segments use a logarithmic
   (decelerating, easeOutExpo) profile: fast off the mark, easing to a stop. */
@keyframes hddSwipe {
  0%   { transform: translateX(-110%); opacity: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  4%   { transform: translateX(0);      opacity: 1; animation-timing-function: linear; }
  10%  { transform: translateX(0);      opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  14%  { transform: translateX(110%);   opacity: 0; }
  100% { transform: translateX(110%);   opacity: 0; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--green-on-dark);
}
.hero-eyebrow-mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.hero-eyebrow-rule {
  width: 56px;
  height: 1px;
  background: var(--green-on-dark);
  display: inline-block;
}
.hero-heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.2rem, 6.6vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--text-on-dark);
}
.hero-line { display: block; }
.hero-line--alt {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  position: relative;
}
.hero-tagline {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.18vw, 1.18rem);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
  max-width: 56ch;
  margin: 0;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 20px 24px; margin-top: 8px; }

/* ─────────── Buttons ─────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  text-transform: none;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-on-dark);
  transition: transform 0.18s cubic-bezier(.5,.05,.2,1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn .btn-arrow { transition: transform 0.22s cubic-bezier(.5,.05,.2,1); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

.btn--primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 12px 28px -10px rgba(0, 112, 210, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn--primary:hover { background: var(--accent-hi); box-shadow: 0 18px 36px -10px rgba(58, 147, 234, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.btn--ghost {
  color: var(--text-on-dark);
  border-color: var(--line-on-dark-strong);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
.btn--inverse {
  background: #ffffff;
  color: var(--accent-deep);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.btn--inverse:hover { background: #f1f7ff; color: var(--accent); }
.btn--lg { padding: 16px 26px; font-size: 1rem; }

.btn--outline-accent {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 112, 210, 0.08);
}
.btn--outline-accent:hover {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 14px 28px -10px rgba(58, 147, 234, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  width: max-content;
  transition: color 0.18s ease, gap 0.22s cubic-bezier(.5,.05,.2,1);
}
.link-arrow:hover { color: var(--accent-deep); gap: 16px; }
.link-arrow:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; border-radius: 2px; }
.link-arrow--small { font-size: 0.72rem; }
.link-arrow--inverse { color: #ffffff; }
.link-arrow--inverse:hover { color: rgba(255, 255, 255, 0.78); }

/* ─────────── Main / scroll content ─────────── */

#scroll-container {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ─────────── Section base ─────────── */

.section {
  position: relative;
  z-index: 1;
  padding: clamp(90px, 12vh, 140px) var(--gutter);
}
.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.section-head { display: grid; gap: 20px; max-width: 760px; }
.section-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text-on-light);
}
.section-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.section-heading--inverse { color: #ffffff; }
.section-heading--inverse em { color: rgba(255,255,255,0.78); font-style: italic; }
.section-lead {
  font-size: clamp(1.08rem, 1.2vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-on-light-muted);
  max-width: 60ch;
  margin: 0;
}
.section-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-on-light);
  margin: 0;
  max-width: 58ch;
}
.section-body--dim { color: var(--text-on-light-muted); }
.section-body--inverse { color: rgba(255, 255, 255, 0.92); }

.section--light { background: var(--bg-light); color: var(--text-on-light); }
.section--paper { background: var(--bg-paper); color: var(--text-on-light); }
.section--accent {
  background: var(--bg-accent);
  color: #ffffff;
  background-image:
    radial-gradient(ellipse 60% 80% at 12% 18%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(ellipse 70% 90% at 95% 110%, rgba(255,255,255,0.08), transparent 60%);
}
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark .section-heading { color: var(--text-on-dark); }
.section--dark .section-body { color: var(--text-on-dark); }
.section--dark .section-lead { color: var(--text-on-dark-muted); }

/* ─────────── 002 — Compliance card (lives inside the hero) ───────────
   The brand-blue compliance card sits at the foot of the dark hero. A 10%
   downward shift lets its bottom tenth spill past the hero's dark band into
   the light services section, so the dark backdrop ends just above the card. */

/* ─── Compliance marquee belt ───
   Full-bleed band that divides the dark hero from the light page below.
   Logos + labels scroll infinitely; the track holds two identical groups and
   slides exactly one group width (-50%) for a seamless loop. */
.cert-belt {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  background: var(--bg-accent); /* #2f6fb7 brand blue */
  background-image:
    radial-gradient(ellipse 60% 140% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 140% at 100% 100%, rgba(0, 0, 0, 0.16), transparent 60%);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(10, 22, 38, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 20px 44px -30px rgba(10, 22, 38, 0.5);
  padding: clamp(16px, 2.4vh, 28px) 0;
}

/* Soft edge fades so logos dissolve into the belt rather than clipping hard. */
.cert-belt::before,
.cert-belt::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(56px, 9vw, 150px);
  z-index: 3;
  pointer-events: none;
}
.cert-belt::before { left: 0; background: linear-gradient(90deg, var(--bg-accent), transparent); }
.cert-belt::after { right: 0; background: linear-gradient(270deg, var(--bg-accent), transparent); }

.cert-belt-track {
  display: flex;
  width: max-content;
  animation: cert-belt-scroll 46s linear infinite;
}
.cert-belt:hover .cert-belt-track { animation-play-state: paused; }

.cert-belt-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.cert-belt-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
  padding: 0 clamp(26px, 3vw, 52px);
  flex: 0 0 auto;
}
/* hairline divider dot between items */
.cert-belt-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
}
.cert-belt-item img {
  height: clamp(40px, 5.4vh, 58px);
  width: auto;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.cert-belt-label {
  font-family: var(--sans);
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}
.cert-belt-item img[src*="NAID_AAA_Certification"] {
  filter: brightness(0) invert(1);
}

@keyframes cert-belt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .cert-belt-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  .cert-belt-group:last-child { display: none; }
  .cert-belt::before, .cert-belt::after { display: none; }
}
.trust-inner { display: grid; gap: 64px; padding-top: 32px; }
.section-head em.acc { color: var(--accent); font-style: italic; font-weight: 500; }
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-on-light);
  border-left: 1px solid var(--line-on-light);
}
.cert-cell {
  position: relative;
  padding: 28px 24px;
  display: grid;
  gap: 8px;
  border-right: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
  background: var(--bg-paper);
  transition: background 0.22s ease, transform 0.22s ease;
}
.cert-cell::before {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 6px; height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: 0.85;
}
.cert-cell:hover { background: #fcfdff; }
.cert-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin-bottom: 6px; }
.cert-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--text-on-light);
}
.cert-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--text-on-light-faint);
}

/* ─────────── 005b — Collaboration / partner network ─────────── */

.collab-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.collab-copy { display: grid; gap: 22px; max-width: 64ch; }
.collab-copy .section-body strong { color: var(--accent-deep); font-weight: 600; }
.collab-mark {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: clamp(32px, 4vw, 52px);
  background: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0, 112, 210, 0.20), transparent 62%),
    radial-gradient(ellipse 80% 90% at 50% 120%, rgba(45, 171, 127, 0.16), transparent 60%);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card-dark);
}
.collab-mark img { width: clamp(150px, 17vw, 210px); height: auto; }
.collab-mark-cap {
  color: var(--text-on-dark-muted);
  text-align: center;
  letter-spacing: 0.16em;
  line-height: 1.5;
  max-width: 24ch;
  margin: 0;
}

/* ─────────── 003 — Story / 60 Years ─────────── */

.story-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: start;
}
.story-copy { display: grid; gap: 22px; max-width: 60ch; }
.story-image {
  position: relative;
  align-self: stretch;
  min-height: 520px;
}
.story-image::before {
  content: '';
  position: absolute;
  inset: 28px -18px -28px 18px;
  background: var(--accent);
  opacity: 0.14;
  clip-path: polygon(
    72px 0,
    100% 0,
    100% calc(100% - 72px),
    calc(100% - 72px) 100%,
    0 100%,
    0 72px
  );
  z-index: 0;
  pointer-events: none;
}
.story-image-frame {
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  z-index: 1;
  clip-path: polygon(
    72px 0,
    100% 0,
    100% calc(100% - 72px),
    calc(100% - 72px) 100%,
    0 100%,
    0 72px
  );
}
.story-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
}
.story-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(16, 30, 56, 0.18) 0%,
    rgba(16, 30, 56, 0) 45%,
    rgba(31, 105, 199, 0.22) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ─────────── 004 — Services (sticky-split) ─────────── */

.services-split {
  --svc-accent: var(--accent);
  --svc-accent-soft: #e8f0f9;
  --svc-green: #1d7a5c;
  --svc-green-soft: #e7f3ee;
  --svc-slate: #5a6675;
  --svc-slate-soft: #f0f3f7;
  --svc-line: var(--line-on-light);
  --svc-line-strong: var(--line-on-light-strong);
  padding-top: clamp(80px, 10vh, 120px);
  padding-bottom: clamp(80px, 10vh, 120px);
}

.services-split-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 0 72px;
  align-items: start;
}

/* ── LEFT: sticky intro ── */
.services-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 140px 0 60px;
  gap: 20px;
}
.services-sticky .mono--label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.services-sticky .mono--label::before {
  content: '';
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--svc-accent);
  flex-shrink: 0;
}
.services-split-heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-on-light);
  margin: 0;
}
.services-split-lead {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--text-on-light-muted);
  margin: 0;
}
.services-split-aside {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-on-light-muted);
  padding-left: 14px;
  border-left: 2px solid var(--svc-green);
  margin: 4px 0 12px;
}
.services-split-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #fff;
  background: var(--text-on-light);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  align-self: flex-start;
  transition: background 0.18s ease, transform 0.18s ease;
}
.services-split-cta:hover { background: #162842; }
.services-split-cta:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; }
.services-split-cta svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.services-split-cta:hover svg { transform: translateX(3px); }

/* ── RIGHT: scrolling groups ── */
.services-scroll {
  padding: 80px 0 80px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* group header */
.svc-group-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 52px;
  margin-bottom: 14px;
}
.svc-group-hd:first-child { margin-top: 0; }
.svc-group-title {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.svc-group-title--blue  { color: var(--svc-accent); }
.svc-group-title--green { color: var(--svc-green); }
.svc-group-title--slate { color: #8a9ab0; }
.svc-group-rule {
  flex: 1;
  height: 1px;
  min-width: 0;
}
.svc-group-rule--blue  { background: linear-gradient(to right, rgba(0, 112, 210, 0.32), transparent); }
.svc-group-rule--green { background: linear-gradient(to right, rgba(29, 122, 92, 0.32), transparent); }
.svc-group-rule--slate { background: linear-gradient(to right, rgba(138, 154, 176, 0.24), transparent); }

/* group intro (image card) */
.svc-intro {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0;
  min-height: 180px;
  isolation: isolate;
}
.svc-intro + .svc-intro,
.svc-card + .svc-intro {
  margin-top: 64px;
}
.svc-intro:not(:first-child) {
  margin-top: 64px;
}
/* fuse intro card with its first service card (no gap, no inner radius) */
.svc-intro:has(+ .svc-card) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.svc-intro + .svc-card {
  margin-top: 0;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.svc-intro-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.svc-intro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 22, 38, 0.78) 0%, rgba(10, 22, 38, 0.42) 55%, rgba(10, 22, 38, 0.15) 100%);
}
.svc-intro--green .svc-intro-overlay {
  background: linear-gradient(to right, rgba(5, 26, 18, 0.82) 0%, rgba(5, 26, 18, 0.48) 55%, rgba(5, 26, 18, 0.18) 100%);
}
.svc-intro--slate .svc-intro-overlay {
  background: linear-gradient(to right, rgba(8, 20, 38, 0.82) 0%, rgba(8, 20, 38, 0.48) 55%, rgba(8, 20, 38, 0.18) 100%);
}
.svc-intro-foot {
  position: relative;
  z-index: 1;
  padding: 24px 26px;
}
.svc-intro-tagline {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

/* service card */
.svc-card {
  background: var(--bg-paper);
  border: 1px solid var(--svc-line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  margin-bottom: 8px;
  overflow: hidden;
  min-height: 92px;
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.svc-card:hover {
  box-shadow: 0 6px 22px rgba(10, 22, 38, 0.08);
  transform: translateY(-1px);
}
.svc-card--blue:hover  { border-color: #b5cff0; }
.svc-card--green:hover { border-color: #a5d4c4; }
.svc-card--slate:hover { border-color: var(--svc-line-strong); }

/* icon column */
.svc-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-card-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc-card--blue  .svc-card-icon { background: var(--svc-accent-soft); }
.svc-card--green .svc-card-icon { background: var(--svc-green-soft); }
.svc-card--slate .svc-card-icon { background: var(--svc-slate-soft); }
.svc-card--blue  .svc-card-icon svg { stroke: var(--svc-accent); }
.svc-card--green .svc-card-icon svg { stroke: var(--svc-green); }
.svc-card--slate .svc-card-icon svg { stroke: var(--svc-slate); }

/* body column */
.svc-card-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--svc-line);
  min-width: 0;
}
.svc-card-name {
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-on-light);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 5px;
}
.svc-card-desc {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-on-light-faint);
  margin: 0;
}

/* ── three core services (homepage right column) ── */
.svc-features {
  gap: 18px;
  padding: 128px 0 80px;
  justify-content: flex-start;
}
.svc-feature {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  background: var(--bg-paper);
  border: 1px solid var(--svc-line);
  border-radius: 14px;
  padding: 30px 32px 32px;
  transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.svc-feature:hover {
  box-shadow: 0 16px 44px rgba(10, 22, 38, 0.09);
  transform: translateY(-2px);
}
.svc-feature--blue:hover  { border-color: #b5cff0; }
.svc-feature--green:hover { border-color: #a5d4c4; }
.svc-feature--slate:hover { border-color: var(--svc-line-strong); }

.svc-feature-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.svc-feature-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.svc-feature--green .svc-feature-icon { background: var(--svc-green-soft); }
.svc-feature--slate .svc-feature-icon { background: var(--svc-slate-soft); }
.svc-feature--blue  .svc-feature-icon { background: var(--svc-accent-soft); }
.svc-feature--green .svc-feature-icon svg { stroke: var(--svc-green); }
.svc-feature--slate .svc-feature-icon svg { stroke: var(--svc-slate); }
.svc-feature--blue  .svc-feature-icon svg { stroke: var(--svc-accent); }

/* truck photo icon */
.svc-feature-icon--img {
  background: #101e38;
  overflow: hidden;
}
.svc-feature-icon--img img {
  width: 88%;
  height: auto;
  object-fit: contain;
  display: block;
}

.svc-feature-body { min-width: 0; padding-top: 1px; }
.svc-feature-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-on-light);
  margin: 0 0 11px;
}
.svc-feature-lead {
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-on-light);
  margin: 0 0 11px;
}
.svc-feature-desc {
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.72;
  color: var(--text-on-light-muted);
  margin: 0;
}
.svc-feature-cta { margin-top: 18px; }

/* ─────────── 005 — CDI band (accent) ─────────── */

.cdi-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}
/* 005 — Circular Drive Initiative rendered as a rounded card that floats on
   the light page surface instead of a full-bleed accent band. */
.cdi-card {
  max-width: min(1360px, 100%);
  padding: clamp(40px, 5vw, 80px);
  border-radius: clamp(24px, 2.6vw, 40px);
  background: var(--bg-accent);
  color: #ffffff;
  background-image:
    radial-gradient(ellipse 60% 80% at 12% 18%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(ellipse 70% 90% at 95% 110%, rgba(255,255,255,0.08), transparent 60%);
  box-shadow:
    0 30px 60px -28px rgba(47,111,183,0.55),
    0 10px 28px -18px rgba(10,22,38,0.30);
}
.cdi-inner--stat {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 64px;
}
.cdi-inner--stat .cdi-copy { max-width: 68ch; }
.cdi-mark {
  display: grid;
  gap: 24px;
  align-content: center;
  padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.cdi-mark img {
  max-width: 340px;
  margin-bottom: 12px;
}
.cdi-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
}
.cdi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  width: 130px;
  flex-shrink: 1;
  min-width: 0;
}
.cdi-badge img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
  filter: none;
}
/* Per-logo scale corrections so the rendered marks read the same size
   (each PNG has different internal whitespace). */
.cdi-badge--zlg img { transform: scale(1.05); }
.cdi-badge--r2  img { transform: scale(0.98); }
.cdi-badge--coc img { transform: scale(1.05); }
.cdi-accent-text { color: #1aa077; }
.btn--green {
  background: #1d7a5c;
  color: #ffffff;
  box-shadow: 0 14px 30px -10px rgba(29, 122, 92, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.btn--green:hover { background: #18684e; color: #ffffff; }
.btn--green:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
.cdi-copy { display: grid; gap: 22px; max-width: 56ch; }
.cdi-ctas { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 8px; }

/* ─────────── 006 — Marquee ─────────── */

.section--marquee {
  padding: 0;
  height: 28vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  background: var(--bg-dark);
}
.marquee-wrap {
  width: 200%;
  overflow: visible;
  will-change: transform;
}
.marquee-text {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(6rem, 12vw, 14rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-on-dark);
  white-space: nowrap;
  text-transform: none;
}
.marquee-text--alt {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-hi);
}
.marquee-dot {
  color: var(--accent);
  margin: 0 0.2em;
  font-weight: 400;
}

/* ─────────── 007 — Testimonials: archived to /archive/archived-styles.css ─────────── */

/* ─────────── 008 — Blog preview ─────────── */

.blog-inner { display: grid; gap: 40px; }

.blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 8px;
}
.blog-head-left { display: grid; gap: 18px; max-width: 720px; }
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--accent-deep);
}
.blog-eyebrow-rule {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.blog-headline { margin: 0; }
.blog-head-cta { flex-shrink: 0; align-self: flex-end; padding: 10px 18px; font-size: 0.86rem; }

.blog-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* ── Featured card ── */
.blog-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background: #0a1626;
  box-shadow: 0 22px 50px -28px rgba(10, 22, 38, 0.45), 0 0 0 1px var(--line-on-light);
  transition: transform 0.35s cubic-bezier(.5,.05,.2,1), box-shadow 0.35s ease;
}
.blog-feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.blog-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.001);
  transition: transform 0.6s cubic-bezier(.5,.05,.2,1);
}
.blog-feature-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 22, 38, 0.28) 0%,
      rgba(10, 22, 38, 0.42) 38%,
      rgba(10, 22, 38, 0.78) 72%,
      rgba(10, 22, 38, 0.92) 100%);
  pointer-events: none;
}
.blog-feature-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: grid;
  gap: 14px;
  padding: 30px;
}
.blog-feature-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.85vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  transition: color 0.25s ease;
}
.blog-feature-excerpt {
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 52ch;
}
.blog-feature:hover .blog-feature-media img { transform: scale(1.03); }
.blog-feature:hover .blog-feature-title { color: var(--accent-hi); }
.blog-feature:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

/* ── Stacked column ── */
.blog-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.blog-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border-radius: var(--r-md);
  border: 1px solid var(--line-on-light);
  color: var(--text-on-light);
  box-shadow: 0 0 0 0 transparent;
  transition: border-color 0.22s ease, box-shadow 0.32s cubic-bezier(.5,.05,.2,1), transform 0.32s cubic-bezier(.5,.05,.2,1);
}
.blog-card::before {
  content: "";
  display: block;
  height: 2.5px;
  flex-shrink: 0;
  background: var(--card-accent, var(--accent));
}
.blog-card--blue { --card-accent: #2f6fb7; --card-hover: #205891; }
.blog-card--green { --card-accent: #1d7a5c; --card-hover: #145a44; }
.blog-card-media {
  position: relative;
  flex-shrink: 0;
  height: 148px;
  overflow: hidden;
  background: #0a1626;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(.5,.05,.2,1);
}
.blog-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
}
.blog-card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text-on-light);
  margin: 0;
  transition: color 0.2s ease;
}
.blog-card-foot {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-top: 14px;
}
.blog-card-rule {
  height: 1px;
  background: var(--line-on-light);
  width: 100%;
}
.blog-card:hover {
  border-color: var(--card-hover, var(--accent));
  box-shadow: 0 18px 38px -24px rgba(10, 22, 38, 0.32), 0 0 0 1px var(--card-accent, var(--accent));
  transform: translateY(-2px);
}
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card:hover .blog-card-title { color: var(--card-hover, var(--accent)); }
.blog-card:focus-visible { outline: 2px solid var(--card-accent, var(--accent-hi)); outline-offset: 3px; }

/* ── Shared pills + read links ── */
.blog-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  width: max-content;
  line-height: 1;
}
.blog-pill--blue {
  background: rgba(58, 147, 234, 0.18);
  color: #9cc6f2;
  box-shadow: inset 0 0 0 1px rgba(58, 147, 234, 0.28);
}
.blog-pill--green {
  background: rgba(45, 171, 127, 0.14);
  color: #1d7a5c;
  box-shadow: inset 0 0 0 1px rgba(29, 122, 92, 0.32);
}
.blog-card--blue .blog-pill--blue {
  background: rgba(47, 111, 183, 0.10);
  color: #205891;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 183, 0.28);
}

.blog-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9cc6f2;
  transition: color 0.2s ease, gap 0.25s cubic-bezier(.5,.05,.2,1);
}
.blog-read span { transition: transform 0.25s cubic-bezier(.5,.05,.2,1); }
.blog-card .blog-read { color: #205891; }
.blog-card--green .blog-read { color: #145a44; }
.blog-card--slate .blog-read,
.blog-read--slate { color: #3a4658; }
.blog-card--red .blog-read,
.blog-read--red { color: #b54328; }
.blog-feature:hover .blog-read,
.blog-card:hover .blog-read { gap: 14px; }
.blog-feature:hover .blog-read span,
.blog-card:hover .blog-read span { transform: translateX(3px); }

/* ── Extra card color variants for blog.html ── */
.blog-card--slate { --card-accent: #495569; --card-hover: #2c3545; }
.blog-card--red   { --card-accent: #d65a3a; --card-hover: #b54328; }
.blog-pill--slate {
  background: rgba(73, 85, 105, 0.10);
  color: #2c3545;
  box-shadow: inset 0 0 0 1px rgba(73, 85, 105, 0.28);
}
.blog-pill--red {
  background: rgba(214, 90, 58, 0.12);
  color: #b54328;
  box-shadow: inset 0 0 0 1px rgba(214, 90, 58, 0.32);
}

/* ─────────── Blog page (blog.html) ─────────── */

.blog-page-section { padding-top: clamp(60px, 8vh, 110px); }
.blog-page-inner { display: grid; gap: 56px; }

.blog-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.blog-page-head-left { display: grid; gap: 16px; max-width: 720px; }
.blog-page-h2 { margin: 0; font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.blog-page-head-meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-light-faint);
  margin: 0;
}

/* Wide featured (full width) */
.blog-feature--wide {
  width: 100%;
  min-height: clamp(380px, 52vh, 520px);
}
.blog-feature-body--wide {
  padding: 36px 42px;
  max-width: 760px;
}
.blog-feature-title--xl {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.12;
}
.blog-feature-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.blog-meta-dot { color: rgba(255, 255, 255, 0.4); }
.blog-feature-cta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9cc6f2;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: gap 0.25s cubic-bezier(.5,.05,.2,1), color 0.2s ease;
}
.blog-feature-cta span { transition: transform 0.25s cubic-bezier(.5,.05,.2,1); }
.blog-feature--wide:hover .blog-feature-cta { gap: 14px; color: #ffffff; }
.blog-feature--wide:hover .blog-feature-cta span { transform: translateX(3px); }

/* Filter chips */
.blog-filter {
  display: grid;
  gap: 14px;
  padding: 22px 0 6px;
  border-top: 1px solid var(--line-on-light);
}
.blog-filter-label { color: var(--text-on-light-faint); }
.blog-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.chip {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.005em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-on-light);
  background: #ffffff;
  color: var(--text-on-light-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.2s ease, transform 0.2s cubic-bezier(.5,.05,.2,1);
}
.chip:hover { color: var(--accent-deep); border-color: var(--accent); }
.chip:active { transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.chip--active {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #ffffff;
  box-shadow: 0 8px 18px -10px rgba(10, 22, 38, 0.45);
}
.chip--active:hover { color: #ffffff; border-color: var(--bg-dark); }

/* Article grid */
.blog-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.blog-page-grid .blog-card { min-height: 0; }
.blog-page-grid .blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.blog-page-grid .blog-card-media { height: 200px; }
.blog-page-grid .blog-card-body { padding: 20px 22px 22px; gap: 12px; }
.blog-page-grid .blog-card-title { font-size: 1.08rem; }
.blog-card-excerpt {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-on-light-muted);
  margin: 0;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Inline quote CTA panel */
.blog-quote-section { padding-block: clamp(60px, 8vh, 100px); }
.blog-quote-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 48px clamp(28px, 4vw, 56px);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(58, 147, 234, 0.10), transparent 55%),
    #f4f6f9;
  border: 1px solid var(--line-on-light);
}
.blog-quote-copy { display: grid; gap: 16px; }
.blog-quote-actions {
  display: grid;
  gap: 16px;
  justify-items: start;
  align-content: center;
}
.blog-quote-phone {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
  width: 100%;
  max-width: 280px;
  color: var(--text-on-light);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-quote-phone:hover { color: var(--accent); border-color: var(--accent); }
.blog-quote-phone-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
}
.blog-quote-fine { margin: 6px 0 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (max-width: 1024px) {
  .blog-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stack the services split — cards drop below the intro so the text isn't squeezed */
  .services-split-inner { grid-template-columns: 1fr; gap: 32px; }
  .services-sticky { position: static; min-height: 0; padding: 0; }
  .services-scroll { padding: 8px 0 0; }
}
@media (max-width: 767px) {
  .blog-page-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .blog-page-grid { grid-template-columns: 1fr; }
  .blog-feature-body--wide { padding: 24px; }
  .blog-feature-meta { gap: 10px; }
  .blog-feature-cta { margin-left: 0; }
  .blog-quote-cta { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; }
  .blog-quote-phone { max-width: none; }
}

/* ─────────── 009 — Final CTA ─────────── */

.cta-inner {
  display: grid;
  gap: 28px;
  justify-items: center;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.cta-heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.6vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--text-on-dark);
  margin: 0;
}
.cta-heading-line { display: block; }
.cta-heading-line--alt {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-hi);
}
.cta-tagline {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 1.3vw, 1.32rem);
  color: var(--text-on-dark-muted);
  margin: 0;
}
.cta-ctas { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; justify-content: center; margin-top: 12px; }
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  color: var(--text-on-dark);
  padding: 16px 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-on-dark-strong);
  background: transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cta-phone .mono {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cta-phone-num {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
}
.cta-phone:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
.cta-footer-note { margin-top: 12px; }

/* ─────────── Footer ─────────── */

.site-footer {
  background: var(--bg-footer);
  color: var(--text-on-dark);
  padding: 90px var(--gutter) 32px;
  position: relative;
  z-index: 5;
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-on-dark);
}
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-mark { width: auto; height: 24px; }
.footer-blurb {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  margin: 0;
  max-width: 36ch;
}
.footer-phone {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-on-dark);
  transition: color 0.18s ease;
}
.footer-phone:hover { color: var(--accent-hi); }
.footer-col { display: grid; gap: 18px; align-content: start; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col ul li {
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--text-on-dark-muted);
  line-height: 1.55;
}
.footer-col ul li a {
  color: var(--text-on-dark);
  transition: color 0.18s ease;
}
.footer-col ul li a:hover { color: var(--accent-hi); }
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom .mono { color: var(--text-on-dark-faint); transition: color 0.18s ease; }
.footer-bottom a.mono:hover { color: var(--accent-hi); }

/* ─────────── Reveals / animation hooks ─────────── */

[data-reveal] { opacity: 0; transform: translateY(20px) scale(0.97); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.5,.05,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* ─────────── Mobile (<768px) ─────────── */

@media (max-width: 767px) {
  /* Header collapses to a dropdown panel — see the max-width:1024px block above. */

  /* The portrait image is full-width here, so the text block nearly fills its
     height and the fixed nav is tall — absolute 36%-centring would collide with
     the header and clip. Instead the image becomes a backdrop and the text
     flows below the (tall, fixed) header; drop the drive (decorative). */
  .hero { height: auto; }
  .hero-media { position: static; }
  .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
  }
  .hero-overlay {
    position: relative; /* stay in flow (drives height) but keep above the veil */
    z-index: 2;
    transform: none;
    padding: clamp(140px, 22vh, 180px) var(--gutter) 64px; /* clear the compact fixed header */
  }
  .hero-inner { display: block; }
  .hero-stack { gap: 22px; max-width: none; }
  .hero-ctas .btn { padding: 11px 16px; font-size: 0.86rem; }
  .hero-visual { display: none; }
  .hero-veil {
    background:
      linear-gradient(90deg,
        var(--bg-dark) 0%,
        rgba(16, 30, 56, 0.88) 46%,
        rgba(16, 30, 56, 0.58) 78%,
        rgba(16, 30, 56, 0.38) 100%),
      linear-gradient(to bottom,
        var(--bg-dark) 0%,
        rgba(16, 30, 56, 0) 14%,
        rgba(16, 30, 56, 0) 46%,
        var(--bg-dark) 80%);
  }
  .collab-inner { grid-template-columns: 1fr; gap: 36px; }

  .cert-belt { padding: 14px 0; }
  .cert-belt-item { padding: 0 clamp(18px, 5vw, 30px); gap: 10px; }
  .cert-belt-item img { height: clamp(34px, 8vw, 46px); }
  .cert-belt-label { font-size: clamp(0.72rem, 3.4vw, 0.85rem); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .story-inner { grid-template-columns: 1fr; gap: 48px; }
  .story-image, .story-image-frame { min-height: 360px; }
  .services-split-heading { font-size: clamp(1.7rem, 6vw, 2.1rem); }
  .svc-group-hd { margin-top: 40px; }
  .svc-card { grid-template-columns: 80px minmax(0, 1fr); }
  .svc-features { padding: 8px 0 0; gap: 14px; }
  .svc-feature { grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 22px 22px 24px; }
  .svc-feature-icon { width: 58px; height: 58px; border-radius: 14px; }
  .svc-feature-icon svg { width: 28px; height: 28px; }
  .cdi-inner { grid-template-columns: 1fr; gap: 40px; }
  /* Keep the card and its contents inside the viewport on narrow screens:
     trim padding, shrink the oversized heading so the long name wraps cleanly,
     and reflow the three badges into equal columns instead of overflowing. */
  .cdi-card { padding: clamp(26px, 6vw, 44px); }
  .section--cdi .section-heading { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .cdi-copy { max-width: none; }
  .cdi-mark img { max-width: 240px; }
  .cdi-badges { gap: 10px; }
  .cdi-badge { height: 78px; width: auto; flex: 1 1 0; }
  .blog-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .blog-head-cta { align-self: flex-start; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-feature { min-height: 420px; }
  .blog-feature-body { padding: 22px; }
  .blog-card-media { height: 160px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ─────────── Reduced motion ─────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee-wrap { transform: none !important; }
  .hero-scroll-indicator svg { animation: none; }
  /* No carousel — show only the lead device render. */
  .hero-hdd { animation: none !important; opacity: 0 !important; transform: none !important; }
  .hero-hdd[style*="--i:0"] { opacity: 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES — Services · About · Quote/Contact
   Extends the same tokens / components. No canvas, no frame scrub —
   a standard dark hero clears the fixed header, then light editorial
   sections in the established chain-of-custody dossier language.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Page hero (dark) ─────────── */

.page-hero {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: clamp(148px, 20vh, 226px) var(--gutter) clamp(70px, 11vh, 116px);
  overflow: hidden;
  border-bottom: 1px solid var(--line-on-dark);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 80% at 88% -12%, rgba(0, 112, 210, 0.22), transparent 60%),
    radial-gradient(ellipse 70% 90% at -5% 115%, rgba(29, 122, 92, 0.13), transparent 58%);
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 42% 24%, #000 28%, transparent 82%);
          mask-image: radial-gradient(ellipse 72% 78% at 42% 24%, #000 28%, transparent 82%);
}
.page-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
}
.page-hero-stack { display: grid; gap: 24px; max-width: 920px; }

.page-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-hi);
}
.page-hero-eyebrow::before { content: ''; width: 38px; height: 1px; background: var(--accent-hi); }

.page-hero-heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.7rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--text-on-dark);
}
.page-hero-heading em { font-style: italic; font-weight: 500; color: var(--accent-hi); }
.page-hero-lead {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.25vw, 1.24rem);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
  max-width: 66ch; margin: 0;
}
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: 18px 22px; margin-top: 6px; }
.page-hero-meta {
  margin-top: 18px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  border-top: 1px solid var(--line-on-dark);
}
.page-hero-meta span {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.page-hero-meta b { color: var(--accent-hi); font-weight: 500; }

/* ─────────── Services hero — scroll-driven webframe video ───────────
   The page-hero is overlaid on a sticky canvas that scrubs through the truck
   frame sequence (drives in → opens → interior) as you scroll. #scrub provides
   the scroll room; the canvas is sticky (100vh) and releases after --scrub-len.
   Tune the scroll length / perceived video duration via --scrub-len. (No cover
   card — the cropped video stands on its own.) Driven by js/services-hero.js. */
:root { --scrub-len: 180vh; }
#scrub { position: relative; z-index: 0; height: calc(100vh + var(--scrub-len)); }
.canvas-wrap {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  background: var(--bg-dark);
  overflow: hidden;
}
#canvas { display: block; width: 100%; height: 100%; }
.canvas-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 38%, rgba(16, 30, 56, 0.55) 70%, var(--bg-dark) 100%);
}
.canvas-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(16, 30, 56, 0.92) 0%,
    rgba(16, 30, 56, 0.65) 38%,
    rgba(16, 30, 56, 0.22) 62%,
    rgba(16, 30, 56, 0) 85%);
}
/* The hero, overlaid on the canvas instead of carrying its own painted bg. */
.page-hero--video {
  position: absolute; inset: 0; z-index: 3;
  background: transparent; border-bottom: 0; overflow: visible;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(120px, 15vh, 180px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.page-hero--video::before, .page-hero--video::after { display: none; }
.page-hero--video .page-hero-inner { width: 100%; }
@media (max-width: 767px) {
  :root { --scrub-len: 130vh; }
}

/* ─────────── Reusable certification bar (services / about) ───────────
   Sits in document flow directly below the fixed transparent header
   and above the page hero. Single row of 4 logos at every screen size. */
.cert-bar {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: clamp(82px, 11.5vh, 120px) var(--gutter) clamp(14px, 2.2vh, 26px);
  border-bottom: 1px solid var(--line-on-dark);
}
.cert-bar-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--maxw);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 32px);
}
.cert-bar-list li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 12px);
  text-align: center;
}
.cert-bar-list img {
  height: clamp(54px, 11vw, 108px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.cert-bar-list span {
  font-family: var(--mono);
  font-size: clamp(0.5rem, 1vw, 0.7rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 520px) {
  .cert-bar { padding-bottom: 14px; }
  .cert-bar-list { gap: 6px; }
  .cert-bar-list span { display: none; }
  .cert-bar-list img { height: clamp(44px, 14vw, 70px); }
}

/* ── Cert bar nested inside .page-hero-stack ──
   Strips the standalone-strip styling (its own dark bg, header-clearing
   top padding) so it reads as the closing trust-row of the hero. */
.page-hero-stack .cert-bar--inhero {
  background: transparent;
  border-bottom: none;
  border-top: none;
  padding: 0;
  /* Adds to the parent .page-hero-stack 24px row-gap (total ~82px) so the
     logos sit a comfortable distance below the CTAs — the same gap that
     previously sat between the buttons and the row of logos on /about. */
  margin-top: 58px;
}
.page-hero-stack .cert-bar--inhero .cert-bar-list {
  max-width: none;
  margin: 0;
  justify-content: flex-start;
  gap: clamp(22px, 3.4vw, 56px);
}
.page-hero-stack .cert-bar--inhero .cert-bar-list li {
  flex: 0 0 auto;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  text-align: left;
}
.page-hero-stack .cert-bar--inhero .cert-bar-list img {
  height: clamp(42px, 5.6vw, 64px);
}
.page-hero-stack .cert-bar--inhero .cert-bar-list span {
  white-space: normal;
  text-align: left;
  max-width: 14ch;
  color: var(--text-on-dark-muted);
}
@media (max-width: 640px) {
  .page-hero-stack .cert-bar--inhero .cert-bar-list {
    gap: 18px 22px;
    flex-wrap: wrap;
  }
  .page-hero-stack .cert-bar--inhero .cert-bar-list li { gap: 10px; }
  .page-hero-stack .cert-bar--inhero .cert-bar-list span { display: inline; font-size: 0.6rem; }
}

/* ── Hero marquee variant ──
   The home-page compliance belt (.cert-belt) re-used inside the Services /
   About page hero in place of the static 4-logo strip. Drops the belt's own
   blue background, borders and shadow so it reads transparently on the dark
   hero; stays inside .page-hero-stack so it spans the same width the logo
   strip did. Edge fades dissolve the scroll into the hero navy. */
.page-hero-stack .cert-belt--hero {
  background: none;
  background-image: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  /* Matches the gap the static strip kept below the CTAs. */
  margin-top: 58px;
}
.page-hero-stack .cert-belt--hero::before,
.page-hero-stack .cert-belt--hero::after {
  width: clamp(40px, 6vw, 96px);
}
.page-hero-stack .cert-belt--hero::before {
  background: linear-gradient(90deg, var(--bg-dark), transparent);
}
.page-hero-stack .cert-belt--hero::after {
  background: linear-gradient(270deg, var(--bg-dark), transparent);
}
@media (max-width: 640px) {
  .page-hero-stack .cert-belt--hero { margin-top: 40px; }
}

/* ─────────── Section intro shared ─────────── */

.section-head--wide { max-width: 860px; }
/* .section-head--team / team grid / QEHS commit styles archived to /archive/archived-styles.css */
.section-intro-lead {
  font-size: clamp(1.05rem, 1.15vw, 1.16rem);
  line-height: 1.7;
  color: var(--text-on-light-muted);
  max-width: 70ch;
  margin: 0;
}

/* ─────────── Services tab bar (sticky) ─────────── */

.svc-tabs {
  position: sticky;
  top: 66px;
  z-index: 40;
  background: rgba(244, 246, 249, 0.88);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line-on-light);
}
.svc-tabs-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; gap: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}
.svc-tabs-inner::-webkit-scrollbar { display: none; }
.svc-tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 2px;
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  color: var(--text-on-light-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.svc-tab .num {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--text-on-light-faint);
  transition: color 0.18s ease;
}
.svc-tab:hover { color: var(--text-on-light); }
.svc-tab.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); }
.svc-tab.is-active .num { color: var(--accent); }
.svc-tab:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 2px; }

/* ─────────── Service group + detail cards ─────────── */

.svc-group { scroll-margin-top: 128px; }
.svc-group + .svc-group { padding-top: 0; }

/* ── Card-framed tab board (tabs + horizontal carousel as one floating surface) ── */
.svc-board {
  position: relative;
  width: min(calc(var(--maxw) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin: clamp(48px, 6vh, 88px) auto clamp(64px, 8vh, 104px);
  background: var(--bg-paper);
  border-radius: var(--r-lg);
  box-shadow:
    0 38px 90px -42px rgba(10, 22, 38, 0.34),
    0 14px 30px -22px rgba(10, 22, 38, 0.18),
    0 0 0 1px var(--line-on-light);
  overflow: hidden;
  isolation: isolate;
}

/* Tabs inside the card — flat header, no longer viewport-sticky */
.svc-board .svc-tabs {
  position: static;
  top: auto;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid var(--line-on-light);
}
.svc-board .svc-tabs-inner {
  max-width: none;
  padding: 0 clamp(22px, 3vw, 44px);
  gap: clamp(18px, 2.4vw, 30px);
}

/* Horizontal swipe carousel: three groups side-by-side, snap per page */
.svc-carousel {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  transition: height 0.45s cubic-bezier(.5,.05,.2,1);
}
.svc-carousel.is-swiping { transition: none; }
.svc-carousel::-webkit-scrollbar { display: none; }
.svc-carousel > .svc-group {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Inside the card, dial back the giant section padding so the slides feel like part of one surface */
.svc-board .svc-carousel > .svc-group,
.svc-board .svc-carousel > .svc-group + .svc-group {
  padding: clamp(38px, 5vh, 64px) clamp(22px, 3vw, 44px) clamp(48px, 6vh, 72px);
  background: transparent; /* card already provides the paper background */
}
/* Each slide keeps its own top padding even when adjacent (outside-card fallback) */
.svc-carousel > .svc-group + .svc-group { padding-top: clamp(90px, 12vh, 140px); }

.group-banner {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 268px;
  display: flex; align-items: flex-end;
  isolation: isolate;
  margin-bottom: 40px;
}
.group-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-banner-overlay { position: absolute; inset: 0; }
.group-banner--blue  .group-banner-overlay { background: linear-gradient(105deg, rgba(10, 22, 38, 0.88) 0%, rgba(10, 22, 38, 0.5) 58%, rgba(10, 22, 38, 0.2) 100%); }
.group-banner--green .group-banner-overlay { background: linear-gradient(105deg, rgba(5, 26, 18, 0.9) 0%, rgba(5, 26, 18, 0.52) 58%, rgba(5, 26, 18, 0.2) 100%); }
.group-banner--slate .group-banner-overlay { background: linear-gradient(105deg, rgba(8, 20, 38, 0.9) 0%, rgba(8, 20, 38, 0.52) 58%, rgba(8, 20, 38, 0.2) 100%); }
.group-banner-foot { position: relative; z-index: 1; padding: clamp(26px, 3.4vw, 40px); max-width: 740px; }
.group-banner-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
.group-banner-eyebrow::before { content: ''; width: 22px; height: 1.5px; background: currentColor; }
.group-banner--green .group-banner-eyebrow { color: #8fe3c4; }
.group-banner--slate .group-banner-eyebrow { color: #b6c4d8; }
.group-banner-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  line-height: 1.04; letter-spacing: -0.025em;
  color: #fff; margin: 0 0 12px;
}
.group-banner-lead {
  font-family: var(--sans); font-size: 0.98rem; line-height: 1.62;
  color: rgba(255, 255, 255, 0.88); margin: 0;
}

.svc-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc-detail-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-subhead {
  display: grid; gap: 12px; max-width: 760px;
  margin: clamp(56px, 7vh, 84px) 0 24px;
}
.svc-subhead h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--text-on-light); margin: 0;
}
.svc-subhead p { font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: var(--text-on-light-muted); margin: 0; max-width: 64ch; }
.svc-group-close { margin-top: 40px; }
.svc-detail {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-md);
  padding: 30px 30px 26px;
  display: flex; flex-direction: column; gap: 15px;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.svc-detail:hover { transform: translateY(-2px); box-shadow: var(--sh-card-light); }
.svc-detail--blue:hover  { border-color: #b5cff0; }
.svc-detail--green:hover { border-color: #a5d4c4; }
.svc-detail--slate:hover { border-color: var(--line-on-light-strong); }
.svc-detail-eyebrow {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  font-family: var(--mono); font-weight: 600;
  font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 10px;
  background: rgba(0, 112, 210, 0.08);
  border: 1px solid rgba(0, 112, 210, 0.2);
  border-radius: 999px;
  margin-bottom: -4px;
}
.svc-detail--green .svc-detail-eyebrow {
  color: var(--green);
  background: rgba(29, 122, 92, 0.08);
  border-color: rgba(29, 122, 92, 0.22);
}
.svc-detail--slate .svc-detail-eyebrow {
  color: var(--text-on-light);
  background: rgba(10, 22, 38, 0.05);
  border-color: rgba(10, 22, 38, 0.16);
}
.svc-detail-name {
  font-family: var(--display); font-weight: 700;
  font-size: 1.22rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-on-light); margin: 0;
  min-height: calc(1.22rem * 1.2 * 2);
}
.svc-detail-desc {
  font-family: var(--sans); font-size: 0.94rem; line-height: 1.65;
  color: var(--text-on-light-muted); margin: 0;
  min-height: calc(0.94rem * 1.65 * 3);
}
.svc-points { display: grid; gap: 9px; margin: 2px 0 2px; }
.svc-points li {
  position: relative; padding-left: 22px;
  font-family: var(--sans); font-size: 0.89rem; line-height: 1.5;
  color: var(--text-on-light);
}
.svc-points li::before {
  content: ''; position: absolute; left: 1px; top: 0.62em;
  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  background: var(--accent);
}
.svc-detail--green .svc-points li::before { background: var(--green); }
.svc-detail--slate .svc-points li::before { background: var(--text-on-light-muted); }
.svc-detail-cta { margin-top: auto; padding-top: 4px; }

/* Pill-style CTA inside service detail cards (matches Get a Quote nav button) */
.svc-detail-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans); font-weight: 600;
  font-size: 0.86rem; letter-spacing: 0.005em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(0, 112, 210, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.2s cubic-bezier(.5,.05,.2,1),
              background 0.2s ease,
              box-shadow 0.2s ease;
}
.svc-detail-btn:hover {
  transform: translateY(-2px);
  background: var(--accent-hi);
  box-shadow: 0 16px 32px -14px rgba(0, 112, 210, 0.6),
              inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.svc-detail-btn:active { transform: translateY(0); }
.svc-detail-btn:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}
.svc-detail-btn .arr {
  font-weight: 600;
  transition: transform 0.22s cubic-bezier(.5,.05,.2,1);
}
.svc-detail-btn:hover .arr { transform: translateX(4px); }

.svc-detail-btn--green {
  background: var(--green);
  box-shadow: 0 10px 22px -10px rgba(29, 122, 92, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.svc-detail-btn--green:hover {
  background: #18684e;
  box-shadow: 0 16px 32px -14px rgba(29, 122, 92, 0.65),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.svc-detail-btn--green:focus-visible { outline-color: var(--green); }

.svc-detail-btn--slate {
  background: var(--text-on-light);
  box-shadow: 0 10px 22px -10px rgba(10, 22, 38, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.svc-detail-btn--slate:hover {
  background: #182843;
  box-shadow: 0 16px 32px -14px rgba(10, 22, 38, 0.65),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.svc-detail-btn--slate:focus-visible { outline-color: var(--text-on-light); }

.link-arrow--green { color: var(--green); }
.link-arrow--green:hover { color: var(--green-on-dark); }
.link-arrow--slate { color: var(--text-on-light-muted); }
.link-arrow--slate:hover { color: var(--text-on-light); }

/* ─────────── Hairline grids (process / device / feature) ─────────── */

.rule-grid {
  display: grid;
  border-top: 1px solid var(--line-on-light);
  border-right: 1px solid var(--line-on-light);
  margin-top: 8px;
}
.rule-grid--4 { grid-template-columns: repeat(4, 1fr); }
.rule-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rule-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rule-cell {
  padding: 28px 26px;
  border-left: 1px solid var(--line-on-light);
  border-bottom: 1px solid var(--line-on-light);
  background: var(--bg-paper);
  display: grid; gap: 10px; align-content: start;
  transition: background 0.2s ease;
}
.rule-cell:hover { background: #fcfdff; }
.rule-num {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--accent);
}
.rule-cell h4 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.06rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-on-light); margin: 0;
}
.rule-cell h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.22rem; line-height: 1.18; letter-spacing: -0.01em;
  color: var(--text-on-light); margin: 0;
}
.rule-cell p {
  font-family: var(--sans); font-size: 0.88rem; line-height: 1.58;
  color: var(--text-on-light-muted); margin: 0;
}
.rule-cell .device-abbr {
  font-family: var(--mono); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em;
  color: var(--accent);
}

/* ─────────── Device rack (HDD / SSD / TAPE / MISC) ─────────── */

.rack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.unit {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-md);
  padding: 26px 24px 22px;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  gap: 12px;
  align-content: start;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: unit-in 0.7s cubic-bezier(.2,.7,.2,1) forwards;
  transition: transform 0.28s cubic-bezier(.5,.05,.2,1),
              box-shadow 0.28s ease,
              border-color 0.28s ease;
}
.unit::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(0, 112, 210, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(0, 112, 210, 0.02), transparent 40%);
  pointer-events: none;
  opacity: 0.85;
}
.unit:hover {
  transform: translateY(-3px);
  border-color: #b5cff0;
  box-shadow: 0 18px 40px -26px rgba(0, 112, 210, 0.45), 0 0 0 1px #b5cff0;
}
.unit-code {
  position: relative;
  justify-self: start;
  font-family: var(--mono); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.22em;
  color: var(--accent);
  padding: 5px 9px;
  background: rgba(0, 112, 210, 0.07);
  border: 1px solid rgba(0, 112, 210, 0.18);
  border-radius: 999px;
  text-transform: uppercase;
}
.unit-glyph {
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 0 14px;
  min-height: 96px;
}
.unit-glyph svg {
  width: 72px; height: 72px;
  stroke: var(--text-on-light);
  color: var(--text-on-light);
  opacity: 0.86;
  transition: stroke 0.28s ease, transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.28s ease;
}
.unit-glyph svg rect,
.unit-glyph svg circle,
.unit-glyph svg line { stroke: currentColor; }
.unit:hover .unit-glyph svg {
  stroke: var(--accent);
  color: var(--accent);
  opacity: 1;
  transform: translateY(-2px) rotate(-1.5deg);
}
.unit-glyph--photo {
  padding: 0;
  align-self: stretch;
}
.unit-glyph--photo img {
  width: 100%;
  height: 104px;
  object-fit: contain;
  opacity: 0.94;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.28s ease;
}
.unit:hover .unit-glyph--photo img {
  opacity: 1;
  transform: translateY(-2px) scale(1.015);
}
.unit-title {
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-on-light); margin: 0;
}
.unit-desc {
  position: relative;
  font-family: var(--sans); font-size: 0.88rem; line-height: 1.58;
  color: var(--text-on-light-muted); margin: 0;
}
.unit-method {
  position: relative;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 112, 210, 0.22);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.unit-method i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 112, 210, 0.14);
  flex: 0 0 auto;
}
@keyframes unit-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .unit { animation: none; opacity: 1; transform: none; }
  .unit:hover .unit-glyph svg { transform: none; }
}

/* ─────────── Process card (rail with nodes) ─────────── */

.proc {
  position: relative;
  margin-top: 24px;
  background: var(--bg-paper);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-md);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 52px);
  overflow: hidden;
}
.proc::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(0, 112, 210, 0.06), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(0, 112, 210, 0.04), transparent 60%);
  pointer-events: none;
}
.proc > * { position: relative; }

.proc-head {
  max-width: 64ch;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.proc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
}
.proc-eyebrow .n { color: var(--text-on-light); opacity: 0.45; }
.proc-eyebrow-sep { opacity: 0.55; }
.proc-heading {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.14; letter-spacing: -0.018em;
  color: var(--text-on-light);
  margin: 14px 0 12px;
}
.proc-sub {
  font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  color: var(--text-on-light-muted); margin: 0;
}

.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 2.4vw, 36px);
}
.rail-line {
  position: absolute;
  left: 5%; right: 5%;
  top: 92px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 112, 210, 0.35) 8%,
    rgba(0, 112, 210, 0.35) 92%,
    transparent 100%
  );
  z-index: 0;
}
.rail-line::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 112, 210, 0.7), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: rail-trace 1.6s cubic-bezier(.5,.05,.2,1) 0.2s forwards;
}
@keyframes rail-trace {
  to { transform: scaleX(1); }
}

.step {
  position: relative;
  padding-top: 118px;
  z-index: 1;
}
.ghost {
  position: absolute;
  top: 0; right: -4px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  line-height: 0.85; letter-spacing: -0.04em;
  color: rgba(0, 112, 210, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.node {
  position: absolute;
  top: 86px; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(0, 112, 210, 0.08);
  opacity: 0;
  transform: scale(0.5);
  animation: node-in 0.6s cubic-bezier(.2,.7,.2,1) forwards;
  z-index: 2;
}
.step.is-done .node {
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(0, 112, 210, 0.16),
              0 0 18px rgba(0, 112, 210, 0.45);
}
@keyframes node-in {
  to { opacity: 1; transform: scale(1); }
}

.step-label {
  position: relative;
  margin-top: 0;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.step.is-done .step-label { color: var(--text-on-light); }
.step.is-done .step-label::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-left: 8px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(0, 112, 210, 0.6);
}
.step-title {
  font-family: var(--display); font-weight: 700;
  font-size: 1.14rem; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--text-on-light);
  margin: 8px 0 8px;
}
.step-desc {
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.6;
  color: var(--text-on-light-muted);
  margin: 0;
  max-width: 28ch;
}

.proc-cta {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: clamp(24px, 2.4vw, 32px);
  border-top: 1px solid var(--line-on-light);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.proc-link {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -0.005em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(0, 112, 210, 0.65),
              0 0 0 1px rgba(0, 112, 210, 0.3) inset;
  transition: transform 0.24s cubic-bezier(.5,.05,.2,1),
              box-shadow 0.24s ease,
              background 0.24s ease;
}
.proc-link:hover {
  transform: translateY(-2px);
  background: #0061b8;
  box-shadow: 0 22px 44px -20px rgba(0, 112, 210, 0.7),
              0 0 0 1px rgba(0, 112, 210, 0.4) inset;
}
.proc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.proc-link .arr {
  font-family: var(--sans); font-weight: 600;
  transition: transform 0.24s cubic-bezier(.5,.05,.2,1);
}
.proc-link:hover .arr { transform: translateX(4px); }
.proc-note {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-on-light-muted);
}

@media (prefers-reduced-motion: reduce) {
  .node { animation: none; opacity: 1; transform: none; }
  .rail-line::before { animation: none; transform: scaleX(1); }
}

/* Green variant — Group 02 sanitize/recover loop */
.proc--green::before {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(29, 122, 92, 0.07), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(29, 122, 92, 0.05), transparent 60%);
}
.proc--green .proc-eyebrow { color: var(--green); }
.proc--green .rail-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(29, 122, 92, 0.35) 8%,
    rgba(29, 122, 92, 0.35) 92%,
    transparent 100%
  );
}
.proc--green .rail-line::before {
  background: linear-gradient(90deg, transparent, rgba(29, 122, 92, 0.7), transparent);
}
.proc--green .ghost { color: rgba(29, 122, 92, 0.08); }
.proc--green .node {
  border-color: var(--green);
  box-shadow: 0 0 0 6px rgba(29, 122, 92, 0.1);
}
.proc--green .step.is-done .node {
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(29, 122, 92, 0.18),
              0 0 18px rgba(29, 122, 92, 0.5);
}
.proc--green .step-label { color: var(--green); }
.proc--green .step.is-done .step-label { color: var(--text-on-light); }
.proc--green .step.is-done .step-label::after {
  background: var(--green);
  box-shadow: 0 0 10px rgba(29, 122, 92, 0.65);
}
.proc--green .proc-link {
  background: var(--green);
  box-shadow: 0 14px 30px -18px rgba(29, 122, 92, 0.7),
              0 0 0 1px rgba(29, 122, 92, 0.32) inset;
}
.proc--green .proc-link:hover {
  background: #18684e;
  box-shadow: 0 22px 44px -20px rgba(29, 122, 92, 0.75),
              0 0 0 1px rgba(29, 122, 92, 0.42) inset;
}
.proc--green .proc-link:focus-visible { outline-color: var(--green); }

/* Slate variant — Group 03 data center / logistics */
.proc--slate::before {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(10, 22, 38, 0.05), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(10, 22, 38, 0.04), transparent 60%);
}
.proc--slate .proc-eyebrow { color: var(--text-on-light); }
.proc--slate .proc-eyebrow .n { color: var(--text-on-light-muted); }
.proc--slate .rail-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(10, 22, 38, 0.28) 8%,
    rgba(10, 22, 38, 0.28) 92%,
    transparent 100%
  );
}
.proc--slate .rail-line::before {
  background: linear-gradient(90deg, transparent, rgba(10, 22, 38, 0.55), transparent);
}
.proc--slate .ghost { color: rgba(10, 22, 38, 0.07); }
.proc--slate .node {
  border-color: var(--text-on-light);
  box-shadow: 0 0 0 6px rgba(10, 22, 38, 0.07);
}
.proc--slate .step.is-done .node {
  background: var(--text-on-light);
  box-shadow: 0 0 0 6px rgba(10, 22, 38, 0.14),
              0 0 18px rgba(10, 22, 38, 0.35);
}
.proc--slate .step-label { color: var(--text-on-light-muted); }
.proc--slate .step.is-done .step-label { color: var(--text-on-light); }
.proc--slate .step.is-done .step-label::after {
  background: var(--text-on-light);
  box-shadow: 0 0 10px rgba(10, 22, 38, 0.5);
}
.proc--slate .proc-link {
  background: var(--text-on-light);
  box-shadow: 0 14px 30px -18px rgba(10, 22, 38, 0.7),
              0 0 0 1px rgba(10, 22, 38, 0.35) inset;
}
.proc--slate .proc-link:hover {
  background: #182843;
  box-shadow: 0 22px 44px -20px rgba(10, 22, 38, 0.75),
              0 0 0 1px rgba(10, 22, 38, 0.45) inset;
}
.proc--slate .proc-link:focus-visible { outline-color: var(--text-on-light); }

/* ─────────── Service flow diagram (step → step → step) ─────────── */

.svc-flow {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  counter-reset: flow;
}
.svc-flow-step {
  position: relative;
  background: var(--bg-paper);
  border: 1px solid var(--svc-line);
  border-radius: var(--r-md);
  padding: 26px 24px 24px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: transform 0.22s cubic-bezier(.5,.05,.2,1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.svc-flow-step:hover {
  transform: translateY(-2px);
  border-color: #a5d4c4;
  box-shadow: 0 12px 30px -18px rgba(29, 122, 92, 0.4);
}
.svc-flow-num {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--svc-green);
}
.svc-flow-title {
  font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; line-height: 1.18; letter-spacing: -0.015em;
  color: var(--text-on-light); margin: 0;
}
.svc-flow-desc {
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.6;
  color: var(--text-on-light-muted); margin: 0;
}

/* Arrow connector — sits in the gap between adjacent steps */
.svc-flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(28px, 3.4vw, 52px));
  width: clamp(28px, 3.4vw, 52px);
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  /* Line + chevron drawn as one SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='none'><line x1='0' y1='8' x2='52' y2='8' stroke='%231d7a5c' stroke-width='2' stroke-linecap='round'/><polyline points='46,2 56,8 46,14' fill='none' stroke='%231d7a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 16px;
}

@media (max-width: 1023px) {
  .svc-flow { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  /* Arrows: between cols 1↔2, point right; between rows, point down */
  .svc-flow-step:nth-child(2n)::after {
    /* Step ending a row points down to next row */
    right: auto; left: 50%; top: auto; bottom: calc(-1 * 56px);
    width: 16px; height: 40px;
    transform: translateX(-50%) rotate(90deg);
    background-size: 40px 16px;
  }
  .svc-flow-step:last-child::after { display: none; }
}

@media (max-width: 600px) {
  .svc-flow { grid-template-columns: 1fr; row-gap: 56px; }
  .svc-flow-step::after,
  .svc-flow-step:nth-child(2n)::after {
    right: auto; left: 50%; top: auto; bottom: calc(-1 * 56px);
    width: 16px; height: 40px;
    transform: translateX(-50%) rotate(90deg);
    background-size: 40px 16px;
  }
  .svc-flow-step:last-child::after { display: none; }
}

/* ─────────── Why-choose feature grid ─────────── */

.feature-item .rule-num { color: var(--accent-deep); }

.feature-grid {
  border-top: none;
  border-right: none;
}
.feature-grid .rule-cell {
  background: transparent;
  padding: 36px 28px 32px;
  gap: 18px;
  border-left: none;
  border-bottom: none;
  transition: none;
}
.feature-grid .rule-cell:hover { background: transparent; }
.feature-item h3 { text-align: center; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: 4px;
  color: var(--accent-deep);
  justify-self: center;
}
.feature-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.feature-icon--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.feature-icon--coc img,
.feature-icon--stamp img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(38%) saturate(2300%) hue-rotate(186deg) brightness(95%) contrast(96%);
  opacity: 0.92;
}
.feature-icon--years { color: var(--accent-deep); }
.feature-num {
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
}
/* Founded-year badge — sized so a four-digit year fits the icon box */
.feature-num--year { font-size: 3.4rem; letter-spacing: -0.01em; }
.feature-icon--cdi {
  background: #101e38;
  border-radius: 50%;
  padding: 16px;
}

@media (max-width: 767px) {
  .feature-icon { width: 100px; height: 100px; }
  .feature-grid .rule-cell { padding: 28px 22px 24px; }
}

/* ─────────── Risks (on dark) ─────────── */

.risks-inner { display: grid; gap: 48px; }
.risk-list { display: grid; border-top: 1px solid var(--line-on-dark); max-width: 1000px; }
.risk-item {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 24px 4px; border-bottom: 1px solid var(--line-on-dark);
  align-items: start;
}
.risk-item .x { font-family: var(--mono); font-size: 0.92rem; color: var(--accent-hi); padding-top: 2px; }
.risk-item h4 {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em;
  margin: 0 0 5px; color: var(--text-on-dark);
}
.risk-item p { font-family: var(--sans); font-size: 0.94rem; line-height: 1.62; color: var(--text-on-dark-muted); margin: 0; }
.risks-note {
  font-family: var(--sans); font-size: 0.96rem; line-height: 1.7;
  color: var(--text-on-dark-muted); max-width: 72ch; margin: 0;
}

/* ─────────── Methods (sticky split) ─────────── */

.methods-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 80px; align-items: start; }
.methods-head { position: sticky; top: 100px; display: grid; gap: 20px; }
.methods-list { display: grid; }
.method {
  padding: 32px 0; border-top: 1px solid var(--line-on-light);
  display: grid; gap: 12px;
}
.method:first-child { padding-top: 6px; border-top: 0; }
.method-num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--accent); }
.method h3 {
  font-family: var(--display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.015em;
  margin: 0; color: var(--text-on-light);
}
.method p { font-family: var(--sans); font-size: 0.96rem; line-height: 1.7; color: var(--text-on-light-muted); margin: 0; max-width: 62ch; }

/* ─────────── Pillars (data center) ─────────── */

.pillar-item .rule-num::before { content: none; }

/* ─────────── Team grid (About) + Commitments (QEHS): archived to /archive/archived-styles.css ─────────── */

/* ─────────── Quote / Contact ─────────── */

.quote-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.quote-form-wrap {
  background: var(--bg-paper);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--sh-card-light);
  /* Flex column so the form fills the card (which stretches to match the taller
     contact column) — the Project Details textarea absorbs the slack and the
     disclaimer anchors the bottom, so there's no awkward empty gap. */
  display: flex;
  flex-direction: column;
}
.quote-form.quote-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 20px; }
.quote-field--grow { flex: 1 1 auto; grid-template-rows: auto 1fr; }
.quote-field--grow textarea { height: 100%; }
.quote-form-title { font-family: var(--display); font-weight: 700; font-size: 1.55rem; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text-on-light); }
.quote-form-note { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-light-faint); margin: 0 0 28px; }
.quote-form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-light-muted); }
.field label .req { color: var(--accent); margin-left: 2px; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 0.95rem; color: var(--text-on-light);
  background: var(--bg-light);
  border: 1px solid var(--line-on-light-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px; width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a6675' stroke-width='1.6' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 112, 210, 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-on-light-faint); }
.form-submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form-eta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-on-light-muted); display: inline-flex; align-items: center; gap: 8px; }
.form-disclaimer { font-family: var(--sans); font-size: 0.8rem; line-height: 1.55; color: var(--text-on-light-faint); margin: 20px 0 0; max-width: 60ch; }

/* Honeypot — kept in the DOM for bots, removed from human view + a11y tree. */
.hp-field { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* Turnstile sits flush with the form's spacing rhythm. */
.quote-turnstile { margin-top: 2px; }
/* Inline submit error. */
.form-error { font-family: var(--sans); font-size: 0.85rem; line-height: 1.5; color: #b42318; background: rgba(180, 35, 24, 0.06); border: 1px solid rgba(180, 35, 24, 0.22); border-radius: var(--r-sm); padding: 10px 12px; margin: 0; }
.form-error[hidden] { display: none; }
/* Sending state on the submit button. */
.quote-form button[type="submit"][aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.form-success { display: none; gap: 16px; align-content: start; }
.quote-form-wrap.is-sent .quote-form,
.quote-form-wrap.is-sent .form-disclaimer { display: none; }
.quote-form-wrap.is-sent .form-success { display: grid; }
.form-success-mark { width: 54px; height: 54px; border-radius: 50%; background: var(--green-soft, #e7f3ee); display: grid; place-items: center; color: var(--green); }
.form-success-mark svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-success h3 { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: -0.015em; margin: 0; color: var(--text-on-light); }
.form-success p { font-family: var(--sans); font-size: 0.98rem; line-height: 1.65; color: var(--text-on-light-muted); margin: 0; max-width: 52ch; }

.contact-col { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.contact-col .contact-aside { flex: 1 1 auto; }
.contact-aside {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--sh-card-dark);
}
.contact-aside-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-hi); margin-bottom: 10px;
}
.contact-aside-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent-hi); }
.contact-aside h3 { font-family: var(--display); font-weight: 700; font-size: 1.42rem; letter-spacing: -0.015em; margin: 0 0 6px; color: #fff; }
.contact-aside-lead { font-family: var(--sans); font-size: 0.95rem; line-height: 1.6; color: var(--text-on-dark-muted); margin: 0 0 16px; }
.contact-method {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px;
  padding: 17px 0; border-top: 1px solid var(--line-on-dark);
  align-items: center;
}
.contact-ico { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgba(0, 112, 210, 0.16); color: var(--accent-hi); }
.contact-ico svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-method .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-on-dark-faint); display: block; margin-bottom: 3px; }
.contact-method .val { font-family: var(--sans); font-weight: 500; font-size: 0.98rem; color: var(--text-on-dark); }
a.contact-method { transition: transform 0.18s ease; }
a.contact-method:hover .val { color: var(--accent-hi); }
.contact-compliance {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-on-dark);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; line-height: 1.95;
  color: var(--text-on-dark-faint);
}
.contact-compliance b { color: var(--text-on-dark-muted); font-weight: 500; display: block; margin-bottom: 6px; letter-spacing: 0.18em; }

.contact-client {
  background: #fff;
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.6vw, 34px);
  box-shadow: var(--sh-card-light);
}
.contact-aside-eyebrow--dark { color: var(--accent); }
.contact-aside-eyebrow--dark::before { background: var(--accent); }
.contact-client h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.015em; margin: 0 0 6px; color: var(--text-on-light); }
.contact-client-lead { font-family: var(--sans); font-size: 0.95rem; line-height: 1.6; color: var(--text-on-light-muted); margin: 0 0 20px; }
.contact-client-btn { width: 100%; }

/* ─────────── Inner-page mobile ─────────── */

@media (max-width: 767px) {
  .page-hero { padding: 124px var(--gutter) 64px; }
  .page-hero-meta { gap: 10px 18px; }

  .svc-tabs { position: static; top: auto; }
  .svc-tabs-inner { gap: 22px; }
  .svc-tab { padding: 14px 2px; font-size: 0.86rem; }

  .svc-detail-grid { grid-template-columns: 1fr; }
  .rule-grid--4, .rule-grid--3, .rule-grid--2 { grid-template-columns: 1fr; }
  .feature-grid.rule-grid--2 { grid-template-columns: 1fr; }
  .rack { grid-template-columns: 1fr; gap: 14px; }

  .proc { padding: 32px 24px; }
  .rail { grid-template-columns: 1fr; gap: 28px; }
  .rail-line { display: none; }
  .step { padding-top: 12px; padding-left: 28px; }
  .ghost { font-size: 4rem; top: -8px; right: auto; left: 0; }
  .node { top: 22px; left: 0; }
  .step-label { margin-top: 0; }
  .proc-cta { flex-direction: column; align-items: flex-start; }

  .methods-inner { grid-template-columns: 1fr; gap: 40px; }
  .methods-head { position: static; }

  .quote-inner { grid-template-columns: 1fr; gap: 28px; }
  .contact-col { position: static; }
  .form-row { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .svc-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .rule-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .rule-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .rack { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .rail-line { display: none; }
}

/* Narrow phones: the three service tabs no longer fit in a scrollable row,
   so the third drops off-screen. Lay them out as three equal columns that
   always fit, drop the long label suffixes, and let text wrap. */
@media (max-width: 600px) {
  .svc-board .svc-tabs-inner { gap: 4px; padding: 0 12px; }
  .svc-tab {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 13px 4px;
    font-size: 0.78rem;
    gap: 5px;
    white-space: normal;
    line-height: 1.25;
  }
  .svc-tab-ext { display: none; }
}

/* ─────────── Privacy Policy modal ─────────── */

html.privacy-locked, html.privacy-locked body { overflow: hidden; }

.privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.privacy-modal.is-open { pointer-events: auto; opacity: 1; }

.privacy-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(47, 111, 183, 0.22) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(0, 112, 210, 0.16) 0%, transparent 65%),
    rgba(6, 14, 26, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.privacy-dialog {
  position: relative;
  width: min(820px, 100%);
  max-height: min(86vh, 880px);
  background: var(--bg-paper);
  color: var(--text-on-light);
  border-radius: 4px;
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(10, 22, 38, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(0.985);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(.2,.7,.2,1),
    opacity 0.32s ease;
}
.privacy-modal.is-open .privacy-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.privacy-dialog::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 22, 38, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 22, 38, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mix-blend-mode: multiply;
  opacity: 0.45;
}
.privacy-dialog::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hi) 50%, var(--accent-deep));
}

.privacy-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-on-light);
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f6f9 100%);
  z-index: 2;
  flex-shrink: 0;
}
.privacy-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.privacy-head-meta .mono { font-size: 0.66rem; color: var(--text-on-light-faint); }
.privacy-head-dot { color: var(--accent) !important; font-size: 0.5rem !important; }

.privacy-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 14px;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border: 1px solid var(--bg-dark);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.privacy-close .mono { font-size: 0.66rem; }
.privacy-close:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
.privacy-close:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.privacy-close:active { transform: translateY(0); }
.privacy-close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-on-dark);
}

.privacy-body {
  position: relative;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px) 32px;
  z-index: 1;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line-on-light-strong) transparent;
}
.privacy-body::-webkit-scrollbar { width: 8px; }
.privacy-body::-webkit-scrollbar-track { background: transparent; }
.privacy-body::-webkit-scrollbar-thumb { background: var(--line-on-light-strong); border-radius: 4px; }

.privacy-titleblock { display: grid; gap: 14px; margin-bottom: 28px; }
.privacy-eyebrow {
  color: var(--accent) !important;
  font-size: 0.7rem !important;
}
.privacy-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-on-light);
  margin: 0;
  max-width: 28ch;
}
.privacy-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--text-on-light) 0%, var(--text-on-light) 60px, var(--line-on-light) 60px, var(--line-on-light) 100%);
}

.privacy-sections {
  display: grid;
  gap: 28px;
}
.privacy-section {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 20px;
  row-gap: 10px;
  align-items: baseline;
}
.privacy-section--note { grid-template-columns: 1fr; }
.privacy-section-idx {
  font-size: 0.66rem !important;
  color: var(--accent) !important;
  letter-spacing: 0.2em !important;
  padding-top: 4px;
}
.privacy-section-h {
  grid-column: 2;
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--text-on-light);
}
.privacy-section-p {
  grid-column: 2;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--text-on-light-muted);
}
.privacy-section--note .privacy-section-p { grid-column: 1; }
.privacy-section-p--lead {
  font-size: 1.06rem;
  color: var(--text-on-light);
  font-weight: 500;
}

.privacy-foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-on-light-strong);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.privacy-foot .mono { font-size: 0.62rem; color: var(--text-on-light-faint); }

@media (max-width: 640px) {
  .privacy-dialog { max-height: 92vh; }
  .privacy-section { grid-template-columns: 1fr; }
  .privacy-section-h, .privacy-section-p { grid-column: 1; }
  .privacy-section-idx { padding-top: 0; }
  .privacy-head { padding: 14px 16px; }
  .privacy-head-meta { gap: 8px; }
  .privacy-head-meta .mono:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-modal,
  .privacy-dialog { transition: opacity 0.2s ease; }
  .privacy-modal.is-open .privacy-dialog { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Blog post reader (post.html)
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Article hero (dark) ── */
.post-hero {
  padding-top: clamp(120px, 16vh, 180px);
  padding-bottom: clamp(48px, 7vh, 84px);
  overflow: hidden;
}
.post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 90% at 8% -10%, rgba(58, 147, 234, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 8%, rgba(45, 171, 127, 0.10), transparent 62%);
  pointer-events: none;
}
.post-hero-inner { position: relative; z-index: 1; display: grid; gap: 20px; max-width: 880px; }

.post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-dark-faint);
}
.post-breadcrumb a { color: var(--text-on-dark-muted); transition: color 0.2s ease; }
.post-breadcrumb a:hover { color: var(--accent-hi); }
.post-breadcrumb-current { color: var(--text-on-dark-muted); }

.post-hero-pill { margin-top: 4px; }

.post-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
  color: #ffffff;
  max-width: 18ch;
}
.post-title:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 6px; border-radius: 4px; }

.post-dek {
  font-size: clamp(1.08rem, 1.4vw, 1.24rem);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 62ch;
  margin: 0;
}
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line-on-dark);
}
.post-meta-author {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hi);
}
.post-meta-dot { color: var(--text-on-dark-faint); }

/* ── Body layout: sticky switcher rail + reading column ── */
.post-section { padding-top: clamp(48px, 7vh, 90px); }
.post-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 760px);
  justify-content: center;
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.post-aside-sticky {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}
.post-switch { display: grid; gap: 2px; }
.post-switch-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-on-light-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.post-switch-item:hover { background: #ffffff; color: var(--text-on-light); }
.post-switch-item.is-current {
  background: #ffffff;
  color: var(--text-on-light);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-on-light);
}
.post-switch-dot {
  width: 8px; height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.post-switch-dot--blue { background: #2f6fb7; }
.post-switch-dot--green { background: #1d7a5c; }
.post-switch-dot--slate { background: #495569; }
.post-switch-dot--red { background: #d65a3a; }
.post-switch-item.is-current .post-switch-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.post-switch-item:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ── Featured figure ── */
.post-figure { margin: 0 0 clamp(28px, 4vh, 44px); }
.post-figure-media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a1626;
  box-shadow: var(--sh-card-light);
  aspect-ratio: 16 / 9;
}
.post-figure-media img { width: 100%; height: 100%; object-fit: cover; }

/* ── Reading prose ── */
.post-body { font-size: 1.075rem; line-height: 1.8; color: var(--text-on-light); }
.post-body > * + * { margin-top: 1.3em; }
.post-body p { margin: 0; max-width: 70ch; }
.post-body h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--text-on-light);
  margin: 1.9em 0 0;
  padding-top: 0.2em;
}
.post-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-on-light);
  margin: 1.6em 0 0;
}
.post-body h2 + p, .post-body h3 + p { margin-top: 0.7em; }
.post-body ul, .post-body ol { max-width: 70ch; display: grid; gap: 0.55em; }
.post-body ul { padding-left: 1.3em; }
.post-body ol { padding-left: 1.5em; }
.post-body li { list-style: revert; padding-left: 0.2em; }
.post-body li::marker { color: var(--accent); font-weight: 600; }
.post-body a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(5, 91, 168, 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.post-body a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.post-body strong { font-weight: 600; color: var(--text-on-light); }
.post-body em { font-style: italic; }

/* ── Inline body media (embedded figures + video) ── */
.post-figure--inline { margin: clamp(28px, 4vh, 40px) 0; }
.post-figure--inline .post-figure-media { aspect-ratio: 16 / 9; }
.post-figure--inline.post-figure--contain .post-figure-media { background: #0a1626; }
.post-figure--inline.post-figure--contain .post-figure-media img { object-fit: contain; }
.post-figure figcaption {
  margin-top: 0.7em;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5b6b77;
  font-style: italic;
}
.post-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: clamp(28px, 4vh, 40px) 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a1626;
  box-shadow: var(--sh-card-light);
}
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Prev / next switcher ── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line-on-light);
}
.post-nav-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px 22px;
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-md);
  background: #ffffff;
  transition: border-color 0.22s ease, box-shadow 0.3s cubic-bezier(.5,.05,.2,1), transform 0.3s cubic-bezier(.5,.05,.2,1);
}
.post-nav-card--next { text-align: right; justify-items: end; }
.post-nav-dir { color: var(--accent-deep); font-size: 0.66rem; }
.post-nav-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text-on-light);
  transition: color 0.2s ease;
}
.post-nav-card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 38px -24px rgba(10, 22, 38, 0.32), 0 0 0 1px var(--accent);
  transform: translateY(-2px);
}
.post-nav-card:hover .post-nav-title { color: var(--accent-deep); }
.post-nav-card:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }

/* ── Related grid ── */
.post-related-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 640px; }
.post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.post-related-grid .blog-card { flex: initial; height: 100%; }

/* ── Not found ── */
.post-hero--notfound { min-height: 60vh; display: grid; align-items: center; }
.post-notfound { display: grid; gap: 18px; justify-items: start; max-width: 620px; }
.post-notfound .post-title { max-width: none; }
.post-notfound .btn { margin-top: 8px; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .post-layout { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .post-aside { width: 100%; }
  .post-aside-sticky { position: static; gap: 12px; }
  .post-switch {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .post-switch-item {
    flex: 0 0 auto;
    max-width: 230px;
    grid-template-columns: auto 1fr;
    border: 1px solid var(--line-on-light);
    background: #ffffff;
    white-space: nowrap;
  }
  .post-switch-item .post-switch-text { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 720px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-card--next { text-align: left; justify-items: start; }
  .post-related-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   CSP-compliance helpers
   These classes carry values that previously lived in inline style="…"
   attributes in the HTML. Inline style attributes cannot be allowed under a
   strict Content-Security-Policy without 'unsafe-inline', so they were moved
   here. Each rule maps 1:1 to a former inline declaration — no visual change.
   See docs/SECURITY.md.
   ════════════════════════════════════════════════════════════════════════ */

/* index.html — hero drive stagger (was style="--i:N") */
.hero-hdd--0 { --i: 0; }
.hero-hdd--1 { --i: 1; }
.hero-hdd--2 { --i: 2; }
.hero-hdd--3 { --i: 3; }
.hero-hdd--4 { --i: 4; }
.hero-hdd--5 { --i: 5; }
.hero-hdd--6 { --i: 6; }
.hero-hdd--7 { --i: 7; }
.hero-hdd--8 { --i: 8; }
.hero-hdd--9 { --i: 9; }

/* services.html — service-group display order (was style="order:N") */
.svc-group--order1 { order: 1; }
.svc-group--order2 { order: 2; }
.svc-group--order3 { order: 3; }

/* services.html — staggered unit entrance (was style="animation-delay:…") */
.unit--d1 { animation-delay: .05s; }
.unit--d2 { animation-delay: .12s; }
.unit--d3 { animation-delay: .19s; }
.unit--d4 { animation-delay: .26s; }

/* services.html — method-diagram node stagger (was style="animation-delay:…") */
.node--d1 { animation-delay: .35s; }
.node--d2 { animation-delay: .6s; }
.node--d3 { animation-delay: .85s; }
.node--d4 { animation-delay: 1.1s; }

/* One-off spacing / typography helpers (were inline style="") */
.section-head--mb48 { margin-bottom: 48px; }
.section-head--mb44 { margin-bottom: 44px; }
.mono--micro { font-size: 0.72rem; letter-spacing: 0.16em; }
.link-arrow--inline { display: inline-flex; }