/* ==========================================================================
   Aerospace TMF website
   Open, editorial layouts (no boxed cards), square corners.
   Palette: white / near-black / dark navy / flashy blue. Type: Inter 400/600/700.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --white: #ffffff;
  --ink: #14181c;
  --navy: #0a1b2e;
  --navy-2: #0f2438;
  --blue: #0056b9;
  --sky: #5ea3e8;
  --sky-soft: #7fb2e8;
  --grey-line: #dfe3e7;
  --grey-text: #55606a;
  --grey-bg: #f4f6f8;
  --on-navy: #c3cddb;
  --on-navy-mute: #9fb4c6;

  --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max: 1240px;
  --bar-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Small uppercase label used above headings */
.label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-text);
}

/* ==========================================================================
   Top bar — transparent over the banner, solid white once past it.
   Logo left, links in the exact centre, "Request a Quote" right.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--bar-h);
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.site-header .bar {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand img { height: 54px; width: auto; }
.brand .logo-white { display: none; }

.brand-text {                      /* both lines identical: size, weight, colour, spacing */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.3;
}

.brand-text span {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
}

.main-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
}
@media (pointer: coarse) {
  .main-nav a { padding: 13px 0; }
}
.main-nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  transition: color .2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}

.main-nav a:hover,
.main-nav a.active { color: var(--blue); }

.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }

.bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}

.header-cta { background: var(--navy); color: var(--white); }
.header-cta:hover { background: var(--blue); }

.header-cta svg,
.btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.header-cta:hover svg { transform: translate(2px, -2px); }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.menu-toggle span:not(.sr-only) {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--navy);
  transition: transform .3s var(--ease), top .3s var(--ease), background-color .3s ease;
}

.menu-toggle span:nth-child(1) { top: 17px; }
.menu-toggle span:nth-child(2) { top: 25px; }

.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* transparent state (over the banner) */
.site-header:not(.is-solid) .logo-color { display: none; }
.site-header:not(.is-solid) .logo-white { display: block; }
.site-header:not(.is-solid) .brand-text,
.site-header:not(.is-solid) .main-nav a { color: var(--white); }
.site-header:not(.is-solid) .brand-text span { color: inherit; }
.site-header:not(.is-solid) .main-nav a::after { background: var(--white); }
.site-header:not(.is-solid) .header-cta { background: var(--white); color: var(--navy); }
.site-header:not(.is-solid) .header-cta:hover { background: #e4e9f0; }
.site-header:not(.is-solid) .menu-toggle span:not(.sr-only) { background: var(--white); }

.site-header.is-solid {
  background: var(--white);
  border-bottom-color: var(--grey-line);
  box-shadow: 0 6px 24px rgba(10, 27, 46, .07);
}

/* when the phone menu is open the bar sits on navy */
body.menu-open .site-header { background: var(--navy); border-bottom-color: transparent; box-shadow: none; }
body.menu-open .site-header .logo-color { display: none; }
body.menu-open .site-header .logo-white { display: block; }
body.menu-open .site-header .brand-text { color: var(--white); }
body.menu-open .site-header .brand-text span { color: inherit; }
body.menu-open .site-header .menu-toggle span:not(.sr-only) { background: var(--white); }
body.menu-open .site-header .header-cta { visibility: hidden; }

/* ---- Phone / tablet menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--bar-h) + 32px) 28px 36px;
  background: var(--navy);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mobile-menu li a {
  display: block;
  padding: 18px 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s ease, color .2s ease;
}

.mobile-menu li a.active { color: var(--sky); }

.mobile-menu.is-open li a { transform: none; opacity: 1; }
.mobile-menu.is-open li:nth-child(2) a { transition-delay: .04s; }
.mobile-menu.is-open li:nth-child(3) a { transition-delay: .08s; }
.mobile-menu.is-open li:nth-child(4) a { transition-delay: .12s; }
.mobile-menu.is-open li:nth-child(5) a { transition-delay: .16s; }

.mobile-menu .btn {
  align-self: flex-start;
  background: var(--white);
  color: var(--navy);
}

/* ==========================================================================
   Banners
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.hero .wrap { position: relative; z-index: 1; max-width: 1000px; }

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}

.hero .tagline {
  margin: 0 auto;
  max-width: 680px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #e8edf3;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(20%) brightness(.82) contrast(1.05);
  transform: scale(1.02);
  transition: opacity 1.8s cubic-bezier(.45, 0, .55, 1);
}

.hero-media img.is-active { opacity: 1; z-index: 2; }
.hero-media img.is-prev { opacity: 1; z-index: 1; transition: none; }

.hero-media::before {        /* shade at the very top so the white menu reads */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 180px;
  z-index: 4;
  background: linear-gradient(180deg, rgba(6,15,26,.6) 0%, rgba(6,15,26,0) 100%);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 46% 60% at 50% 58%, rgba(6,15,26,.42) 0%, rgba(6,15,26,0) 100%),
    linear-gradient(180deg, rgba(6,15,26,.40) 0%, rgba(10,27,46,.28) 45%, rgba(6,15,26,.55) 100%);
}

/* Home: full screen, stays in place while the page rises over it */
.hero-full {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  padding-top: var(--bar-h);
}

.hero-full .wrap { max-width: 1200px; will-change: transform, opacity; }

.hero-full h1 {
  font-size: clamp(40px, 6.2vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

.hero-full .tagline { max-width: 720px; font-size: clamp(16px, 1.6vw, 20px); }

.hero-full .hero-media img { filter: grayscale(18%) brightness(.8) contrast(1.05) blur(2.5px); }

.hero-certs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 64px;
  margin-top: 64px;
}

.hero-certs img {
  height: 54px;
  width: auto;
  max-width: 190px;
  opacity: .92;
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.35));
}

.hero-certs img[alt^="AS9100"] { height: 64px; }

/* Inner pages: compact banner (same height as the current site) */
.hero-compact {
  min-height: calc(var(--bar-h) + 330px);
  padding: calc(var(--bar-h) + 40px) 0 104px;
}

/* Everything under the banner is one sheet that rises over it */
.sheet {
  position: relative;
  z-index: 2;
  background: var(--white);
  box-shadow: 0 -18px 40px rgba(6,15,26,.32), 0 -2px 6px rgba(6,15,26,.16);
}

.hero-compact + .sheet { margin-top: -56px; }

/* ==========================================================================
   Shared section pieces
   ========================================================================== */

.section { padding: 112px 0; }
.section.tight { padding: 88px 0; }
.bg-grey { background: var(--grey-bg); }

.bg-navy {
  background: var(--navy);
  color: var(--white);
}

.h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.bg-navy .h2 { color: var(--white); }

.lede {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--grey-text);
}

/* Chips (One Supplier / Single Work Order / Full Traceability) */
.pillars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid #ccd7e3;
  padding: 10px 18px;
  transition: border-color .25s ease;
}

.pillar-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--blue);
  flex: none;
}

.pillar-badge:hover { border-color: var(--blue); }

.nadcap-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #dce6f0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  padding: 9px 16px;
}

.nadcap-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
  flex: none;
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: var(--on-navy-mute);
  padding: 40px 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.footer-bottom strong { color: var(--white); }

/* ==========================================================================
   Home
   ========================================================================== */

/* Who we are: heading and text on the left (as on the original site), building photo right */
.about-head { margin-bottom: 24px; }
.about-head .h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.about-grid .lede { font-size: 17px; }

.photo-offset {
  position: relative;
}

.photo-offset .photo-clip {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.photo-offset img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-offset .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 12px 18px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Three process photos staggered at different heights (move at different speeds) */

/* Speed band: navy with an angled top edge, open figures (no cards) */
.speed {
  position: relative;
  padding: 150px 0 120px;
  clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
  margin-top: -64px;
}

.speed .h2 { max-width: 860px; font-size: clamp(24px, 2.8vw, 36px); }

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 52px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.figure {
  padding: 32px 32px 8px 0;
}

.figure + .figure {
  padding-left: 32px;
  border-left: 1px solid rgba(255,255,255,.14);
}

.figure .num {
  display: block;
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.figure .num small { font-size: .42em; font-weight: 600; margin-left: 6px; letter-spacing: 0; }

.figure .fig-label {
  display: block;
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.figure p { margin: 0; font-size: 14px; color: var(--on-navy); line-height: 1.6; }

/* ==========================================================================
   Capabilities
   ========================================================================== */

.cap-intro { text-align: center; }

.cap-intro .statement {
  max-width: 900px;
  margin: 0 auto 44px;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.cap-intro .sub-note {
  max-width: 720px;
  margin: 36px auto 0;
  font-size: 14px;
  color: var(--grey-text);
}

/* Alternating rows: big looping photo on one side, the process list on the other */
.cap-rows { display: grid; gap: 120px; }

.cap-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
  align-items: center;
}

.cap-row:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cap-row:nth-child(even) .cap-photo { order: 2; }

.cap-photo { position: relative; }

.cap-num {
  position: absolute;
  top: -104px;
  left: -6px;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 0;
}

.cap-row:nth-child(even) .cap-num { left: auto; right: -6px; }
.cap-rows { padding-top: 56px; }

.cap-card-photo {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: var(--navy-2);
}

.cap-card-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.45, 0, .55, 1);
  will-change: opacity, transform;
}

.cap-card-photo img:first-child { position: relative; }

.cap-card-photo img:not(:first-child) {
  position: absolute;
  inset: 0;
  height: 100%;
}

.cap-card-photo img.is-active { opacity: 1; z-index: 2; }
.cap-card-photo img.is-prev { opacity: 1; z-index: 1; transition: none; }

.slide-marks {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.slide-marks span {
  position: relative;
  width: 26px;
  height: 2px;
  background: rgba(255,255,255,.4);
  overflow: hidden;
}

.slide-marks span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
}

@keyframes markFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slide-marks span.is-on::after { animation: markFill var(--slide-ms, 4000ms) linear both; }

.cap-text .cap-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

.cap-text h2 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
}

.cap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cap-list li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: 15.5px;
  color: #e4e9f0;
  line-height: 1.4;
  transition: padding-left .25s ease, color .25s ease;
}

.cap-list li:hover { padding-left: 6px; color: var(--sky-soft); }

.cap-list li .note {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--on-navy-mute);
}

.cap-list.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

/* ==========================================================================
   Value Proposition
   ========================================================================== */

.cred-strip { padding: 56px 0; border-bottom: 1px solid var(--grey-line); }

/* 70%+ on the left, turn-time chart on the right — open, no box */
.speed-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: center;
}

.speed-stat .big-figure {
  font-size: clamp(72px, 10vw, 136px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.speed-stat .big-figure .unit {
  font-size: .38em;
  font-weight: 600;
  color: var(--blue);
  margin-left: 6px;
  letter-spacing: 0;
}

.speed-stat h3 { margin: 28px 0 12px; font-size: 22px; font-weight: 600; color: var(--navy); }
.speed-stat p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--grey-text); max-width: 460px; }

.turn-compare {
  --max: 21;
  padding: 8px 0 0;
}

.tc-row {
  display: grid;
  grid-template-columns: 150px 1fr 104px;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}

.tc-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}

.tc-track { position: relative; height: 18px; background: #e6eaee; }

.tc-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  transition: width 1.1s var(--ease);
}

.tc-bar.ours { background: var(--blue); }
.tc-bar.industry { background: #9aa6b0; }

.tc-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  background: rgba(255,255,255,.45);
}

.turn-compare.is-visible .tc-bar { width: calc(var(--hi) / var(--max) * 100%); }
.turn-compare.is-visible .tc-bar::after { width: calc((var(--hi) - var(--lo)) / var(--hi) * 100%); }

.tc-value { font-size: 20px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.tc-row:first-child .tc-value { color: var(--blue); }

.tc-axis {
  position: relative;
  height: 18px;
  margin: 4px 124px 0 170px;
  border-top: 1px solid #cdd4db;
}

.tc-axis span {
  position: absolute;
  top: 6px;
  left: calc(var(--d) / 21 * 100%);
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--grey-text);
  white-space: nowrap;
}

.tc-axis span:first-child { transform: none; }
.tc-axis span:last-child { transform: translateX(-100%); }

/* What this means — three open columns with a blue accent bar */
.means-head { margin: 120px 0 56px; max-width: 860px; }

.vp-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 64px;
}

.vp-item::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 22px;
  background: var(--blue);
  transform-origin: left center;
  transition: width .35s var(--ease);
}

.vp-item:hover::before { width: 72px; }

.vp-item h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -0.005em; }
.vp-item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--grey-text); }

/* The Qualification Advantage */
.nadcap-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}

.nadcap-intro { position: sticky; top: 132px; }

.nadcap-intro h2 {
  margin: 26px 0 16px;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.nadcap-intro .nad-lede {
  display: inline-block;
  margin: 0;
  padding-top: 18px;
  border-top: 2px solid var(--sky);
  font-size: 18px;
  color: var(--on-navy);
  line-height: 1.5;
}

.nadcap-intro .nad-logos { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.nadcap-intro .nad-logo { display: block; width: 170px; height: auto; opacity: .92; }
.nadcap-intro .as-logo { display: block; width: 74px; height: auto; opacity: .92; }
@media (max-width: 960px) {
  .nadcap-intro .nad-logos { margin-top: 28px; gap: 24px; }
  .nadcap-intro .nad-logo { width: 140px; }
  .nadcap-intro .as-logo { width: 62px; }
}

.nadcap-points { list-style: none; margin: 0; padding: 0; }

.nadcap-points li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 24px;
  padding: 34px 0 36px;
}

.nadcap-points li:first-child { padding-top: 0; }
.nadcap-points li:last-child { padding-bottom: 0; }

.np-num { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--sky); }
.nadcap-points h3 { margin: 4px 0 10px; font-size: 19px; font-weight: 600; color: var(--white); }
.nadcap-points p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--on-navy); }

/* ==========================================================================
   OEM Approvals
   ========================================================================== */

.oem-wall { position: relative; overflow: hidden; }

.oem-wall::before {                 /* very faint oversized 9 */
  content: "9";
  position: absolute;
  top: -70px;
  right: 4%;
  font-size: 460px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(10,27,46,.04);
  pointer-events: none;
}

.oem-wall .wrap { position: relative; z-index: 1; }

.oem-head {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 56px;
}

.oem-count {
  flex: none;
  min-width: 1.4ch;
  padding-right: 28px;
  border-right: 1px solid var(--grey-line);
  font-size: clamp(64px, 7vw, 88px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.02em;
  color: var(--blue);
  text-align: center;
}

.oem-head .label { margin-bottom: 8px; }
.oem-head .h2 { font-size: clamp(24px, 2.6vw, 34px); }

/* Certificates (PDFs open in a new tab) */
.certs-head { margin-bottom: 40px; }
.certs-head .label { display: block; margin-bottom: 10px; }
.cert-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cert-card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 26px 24px; background: var(--white); border: 1px solid var(--grey-line);
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.cert-card::before, .cert-card::after {      /* navy top rule; a blue one draws across on hover */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--navy);
}
.cert-card::after { background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.cert-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cert-top .label { margin: 0; }
.cert-tag { flex: none; padding: 4px 7px 3px; border: 1px solid rgba(0, 86, 185, .3); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: var(--blue); }
.cert-title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.25; color: var(--navy); }
.cert-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 600; color: var(--blue); }
.cert-cue svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.cert-card:hover { transform: translateY(-4px); border-color: #c9d3de; box-shadow: 0 16px 36px rgba(10, 27, 46, .09); }
.cert-card:hover::after { transform: scaleX(1); }
.cert-card:hover .cert-cue svg { transform: translate(3px, -3px); }
.cert-card:active { transform: translateY(-1px); transition-duration: .08s; }
.cert-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (max-width: 960px) {
  .cert-row { grid-template-columns: 1fr; gap: 16px; }
  .certs-head { margin-bottom: 28px; }
  .cert-cue { padding-top: 18px; }
}

/* OEM logos */
.logo-row {                         /* three even rows of three */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
}

.logo-box { display: flex; align-items: center; justify-content: center; }
.logo-box.with-caption { flex-direction: column; gap: 16px; }
.logo-box.with-caption .logo-mark { display: flex; align-items: center; justify-content: center; height: 118px; }
.logo-box.with-caption img { height: 92px; width: auto; max-width: 150px; object-fit: contain; }
.logo-box.with-caption.size-sm img { height: 60px; transform: translateY(-5px); }
.logo-box.with-caption.size-lg img { height: 104px; }
.logo-box.with-caption.size-xl img { height: 128px; }
.logo-box.with-caption.logo-bell img { height: 70px; }
.logo-box.with-caption.logo-wide img { height: auto; width: 150px; max-width: 100%; }
.logo-box.with-caption.logo-ebad img { width: 176px; }

/* Why this matters — dark photo band with editorial rows */
.why-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;                   /* clip (not hidden) so the points can follow the page scroll */
}

.why-stage { position: relative; padding: 112px 0 120px; }

.band-media { position: absolute; inset: 0; z-index: -1; }
.band-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(35%) brightness(.6); }

.band-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,27,46,.84) 0%, rgba(10,27,46,.74) 50%, rgba(10,27,46,.88) 100%);
}

.why-dark .label { color: var(--on-navy-mute); margin-bottom: 16px; }

/* Three points as a descending staircase: each step sits further right, with a
   hairline across its top that fills with light blue as it comes into view */
/* Desktop: three columns, each a step lower than the one before */
.why-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

.why-row {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.why-row:nth-child(2) { margin-top: 72px; }
.why-row:nth-child(3) { margin-top: 144px; }

.why-row::before {                  /* light-blue fill along the step's top line */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 88px;
  height: 2px;
  background: var(--sky);
  transform-origin: 0 50%;
}

.why-num {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sky);
}

.why-row h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.why-row h3 em { font-style: normal; color: var(--sky); white-space: nowrap; }
.why-row p { margin: 0; max-width: 560px; font-size: 16.5px; line-height: 1.7; color: var(--on-navy); }

/* ==========================================================================
   Contact — white page: details on the left, order tracking in a light grey
   container on the right (as in the original layout)
   ========================================================================== */

.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: start;
}

.contact-info .h2 { max-width: 520px; margin-bottom: 40px; font-size: clamp(26px, 2.6vw, 34px); }   /* same size as Track Your Order */

.location-name { margin: 0 0 18px; font-size: 18px; font-weight: 600; color: var(--navy); }

.contact-items { display: grid; gap: 0; }

.contact-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--grey-line);
}

.contact-item:last-child { border-bottom: 1px solid var(--grey-line); }

.contact-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey-text);
}

.contact-value { font-size: 17px; font-weight: 600; color: var(--navy); }
a.contact-value:hover { color: var(--blue); }

.location.project { margin-top: 64px; }
.project-title { margin-bottom: 16px; font-size: clamp(26px, 2.6vw, 34px); max-width: 520px; }
.project-text { margin: 0 0 28px; max-width: 540px; font-size: 16px; line-height: 1.7; color: var(--grey-text); }   /* same size as Reach Out to Us / Track Your Order */

.soon-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 6px 12px;
}

.contact-track {
  background: var(--grey-bg);
  border-top: 4px solid var(--blue);
  padding: 52px 48px 56px;
  scroll-margin-top: calc(var(--bar-h) + 24px);
}

.contact-track .h2 { margin-bottom: 16px; font-size: clamp(26px, 2.6vw, 34px); }
.track-soon { margin: 0; }
.track-soon .soon-badge { display: inline-block; font-size: 12px; padding: 10px 16px; }
.contact-track > p { margin: 0 0 36px; font-size: 15.5px; line-height: 1.7; color: var(--grey-text); max-width: 540px; }

.status-form label {
  display: block;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
}

.status-form-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.status-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 32px;
  border: 0;
  background: var(--navy);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease;
}

.status-form button:hover { background: var(--blue); }
.status-form button:disabled { cursor: default; }
.status-form button.is-sending { opacity: .75; }
.status-form button.is-sent { background: var(--blue); color: var(--white); }

.btn-check {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkDraw .45s ease-out .05s forwards;
}

@keyframes checkDraw { to { stroke-dashoffset: 0; } }

.status-confirm { margin: 20px 0 0; font-size: 14px; font-weight: 600; color: var(--blue); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1440px) {
  .brand-text { font-size: 11.5px; }
}

@media (max-width: 1360px) {
  .main-nav ul { gap: 26px; }
  .main-nav a { font-size: 13.5px; }
}

@media (max-width: 1140px) {
  .main-nav ul { gap: 18px; }
  .main-nav a { font-size: 12.5px; }
  .header-cta { padding: 10px 14px; font-size: 11.5px; }
}

@media (max-width: 1180px) {        /* fallback only if the script doesn't run; otherwise site.js decides */
  html:not(.motion-ready) .main-nav { display: none; }
  html:not(.motion-ready) .menu-toggle { display: block; }
}

@media (max-width: 960px) {
  .wrap { padding: 0 24px; }
  .section { padding: 80px 0; }
  .section.tight { padding: 64px 0; }

  .about-grid,
  .speed-split,
  .nadcap-grid { grid-template-columns: 1fr; gap: 40px; }

  .why-rows { grid-template-columns: 1fr; gap: 48px; }
  .why-row:nth-child(2), .why-row:nth-child(3) { margin-top: 0; }
  .nadcap-intro { position: static; }

  .cap-row,
  .cap-row:nth-child(even) { grid-template-columns: 1fr; gap: 36px; }
  .cap-row:nth-child(even) .cap-photo { order: 0; }
  .cap-rows { gap: 88px; }
  .cap-num { font-size: 80px; top: -72px; }
  .cap-rows { padding-top: 40px; }

  .vp-items { grid-template-columns: 1fr; gap: 36px; }
  .means-head { margin-top: 88px; }

  .contact-split { grid-template-columns: 1fr; gap: 56px; }
  .contact-track { padding: 36px 24px 40px; }
}

@media (max-width: 760px) {
  :root { --bar-h: 72px; }
  .site-header .bar { padding: 0 16px 0 20px; }
  .brand img { height: 44px; }
  .header-cta { padding: 10px 12px; font-size: 11.5px; letter-spacing: .04em; }
  .header-cta svg { display: none; }

  .hero-full { min-height: 560px; }
  .hero-certs { gap: 22px 34px; margin-top: 44px; }
  .hero-certs img { height: 38px; }
  .hero-certs img[alt^="AS9100"] { height: 46px; }

  .hero-compact { min-height: calc(var(--bar-h) + 250px); padding: calc(var(--bar-h) + 28px) 0 84px; }
  .hero-compact + .sheet { margin-top: -44px; }

  .speed { padding: 110px 0 80px; clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%); margin-top: -36px; }
  .figures { grid-template-columns: 1fr; }
  .figure, .figure + .figure { padding: 28px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.14); }

  .cap-list.two-col { grid-template-columns: 1fr; }

  .tc-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .tc-track { grid-column: 1 / -1; grid-row: 2; }
  .tc-value { font-size: 16px; }
  .tc-axis { margin: 4px 0 0; }

  .oem-wall::before { font-size: 200px; top: -20px; right: -10%; color: rgba(10,27,46,.035); }
  .oem-head { gap: 18px; margin-bottom: 36px; }
  .oem-count { padding-right: 18px; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .logo-row .logo-box:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .logo-box.with-caption .logo-mark { height: 76px; }
  .logo-box.with-caption img { height: 60px; }
  .logo-box.with-caption.size-sm img { height: 41px; transform: translateY(-3px); }
  .logo-box.with-caption.size-lg img { height: 68px; }
  .logo-box.with-caption.size-xl img { height: 83px; }
  .logo-box.with-caption.logo-bell img { height: 48px; }
  .logo-box.with-caption.logo-wide img { width: 120px; }
  .logo-box.with-caption.logo-ebad img { width: 140px; }

  .why-stage { padding: 72px 0 80px; }

  .status-form-row { flex-direction: column; align-items: stretch; }
  .contact-item { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 560px) {         /* phones: logo + text + menu button; Track Your Order lives in the menu */
  .site-header .header-cta { display: none; }
  .brand-text { font-size: 11.5px; }
}

@media (max-width: 360px) {
  .brand-text { font-size: 11px; letter-spacing: .06em; }
}

@media (max-width: 420px) {
}

@media (hover: none) {
  .cap-list li:hover { padding-left: 0; color: #e4e9f0; }
  .vp-item:hover::before { width: 40px; }
}

/* ==========================================================================
   Motion — only when the visitor hasn't asked for reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
}

/* banner photos: slow drift while shown */
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.motion .hero-media img.is-active,
.motion .hero-media img.is-prev { animation: heroDrift 7.5s linear both; }

/* capability photos: slow drift while shown */
@keyframes slideDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
.motion .cap-card-photo img.is-active,
.motion .cap-card-photo img.is-prev { animation: slideDrift 6.5s linear both; }

/* scroll reveal */
html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease var(--rd, 0ms), transform .85s var(--ease) var(--rd, 0ms);
}

html.motion [data-reveal="fade"] { transform: none; }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* photos settle from a slight zoom as they come in */
html.motion .photo-offset[data-reveal] img { transform: scale(1.08); transition: transform 1.4s var(--ease) var(--rd, 0ms); }
html.motion .photo-offset[data-reveal].is-in img { transform: scale(1); }
html.motion .photo-offset[data-reveal] .caption { transform: translateX(-102%); transition: transform .6s var(--ease) .5s; }
html.motion .photo-offset[data-reveal].is-in .caption { transform: none; }

/* value items: accent bar draws in */
html.motion .vp-item[data-reveal]::before { transform: scaleX(0); transition: transform .7s var(--ease) calc(var(--rd, 0ms) + 250ms); }
html.motion .vp-item[data-reveal].is-in::before { transform: scaleX(1); }

/* headings rise word by word */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.swi { display: inline-block; }
html.motion .split .swi { transform: translateY(110%); transition: transform .85s var(--ease) var(--wd, 0ms); }
html.motion .split.is-shown .swi { transform: none; }

/* why rows: payoff words light up */
html.motion .why-row[data-reveal] h3 em { color: var(--white); transition: color .9s ease calc(var(--rd, 0ms) + 350ms); }
html.motion .why-row[data-reveal].is-in h3 em { color: var(--sky); }

/* order-number confirmation (order lookup, not live yet) */
@keyframes confirmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.motion .status-confirm:not([hidden]) { animation: confirmIn .5s var(--ease) both; }

/* scroll depth (Chrome/Edge, Safari 26+; others stay still) */
@supports (animation-timeline: view()) {
  @keyframes bannerDepth { from { transform: translateY(0); } to { transform: translateY(80px); } }
  html.motion .hero-compact .hero-media {
    top: -80px;
    animation: bannerDepth linear both;
    animation-timeline: scroll(root);
    animation-range: 0 520px;
  }

  @keyframes photoDepth { from { translate: 0 -6%; } to { translate: 0 6%; } }

  html.motion .photo-offset { view-timeline: --about block; }
  html.motion .photo-offset .photo-clip img {
    scale: 1.14;
    animation: photoDepth linear both;
    animation-timeline: --about;
    animation-range: cover;
  }

  /* the three strip photos move at different speeds */

  @keyframes capDepth { from { translate: 0 -5%; } to { translate: 0 5%; } }
  html.motion .cap-photo { view-timeline: --capphoto block; }
  html.motion .cap-photo .cap-card-photo img {
    scale: 1.12;
    animation-name: capDepth;
    animation-timeline: --capphoto;
    animation-range: cover;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }
  html.motion .cap-photo .cap-card-photo img.is-active,
  html.motion .cap-photo .cap-card-photo img.is-prev {
    animation-name: slideDrift, capDepth;
    animation-duration: 6.5s, auto;
    animation-timing-function: linear, linear;
    animation-fill-mode: both, both;
    animation-timeline: auto, --capphoto;
    animation-range: normal, cover;
  }

  @keyframes whyDepth { from { transform: translateY(-9%) scale(1.22); } to { transform: translateY(9%) scale(1.22); } }
  html.motion .why-dark { view-timeline: --why block; }
  html.motion .why-dark .band-media img { animation: whyDepth linear both; animation-timeline: --why; animation-range: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-check { animation: none; stroke-dashoffset: 0; }
  .mobile-menu li a { transform: none; opacity: 1; }
}

h2.label { margin: 0 0 16px; }

/* Home: tighten the gap between "who we are" and the photo strip */
.about { padding-bottom: 176px; }          /* room for the angled navy band that overlaps it */
@media (max-width: 960px) { .about { padding-bottom: 112px; } }

/* Home: How We Serve — heading left, three points right; each point's text
   rolls down on hover (tap on touch screens). One point is open at a time. */
.serve-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.serve-head .h2 { font-size: clamp(24px, 2.4vw, 32px); }
.serve-photo { margin: 36px 0 0; overflow: hidden; }
.serve-photo.cap-card-photo img { aspect-ratio: 1 / 1; object-position: 50% 50%; }
.serve-list { border-bottom: 1px solid var(--grey-line); }
.serve-row { position: relative; border-top: 1px solid var(--grey-line); }
.serve-row::before {                      /* blue line that fills along the top of the open point */
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 100%; height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.serve-row.is-open::before { transform: scaleX(1); }
.serve-title { margin: 0; }
.serve-title button {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  align-items: center;
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--navy);
  cursor: pointer;
}
.serve-num { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--grey-text); transition: color .3s ease; }
.serve-name { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.005em; transition: color .3s ease; }
.serve-row.is-open .serve-num,
.serve-row.is-open .serve-name { color: var(--blue); }
.serve-title button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.serve-sign { position: relative; width: 14px; height: 14px; justify-self: end; }
.serve-sign::before,
.serve-sign::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s ease;
}
.serve-sign::after { transform: rotate(90deg); }
.serve-row.is-open .serve-sign::after { transform: rotate(0deg); opacity: 0; }
.serve-body { display: grid; grid-template-rows: 1fr; }
.serve-body > div { overflow: hidden; }
.serve-body p { margin: 0; padding: 0 40px 30px 56px; max-width: 700px; font-size: 16px; line-height: 1.7; color: var(--grey-text); }
.serve-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 30px 56px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue);
}
.serve-body p { padding-bottom: 14px; }
.serve-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.serve-link:hover svg { transform: translateX(4px); }
.serve-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* collapsing only once the script is running (without it, all points stay open);
   closed points are also hidden from keyboard focus */
.serve-list.is-ready .serve-body { grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.serve-list.is-ready .serve-row.is-open .serve-body { grid-template-rows: 1fr; }
.serve-list.is-ready .serve-row:not(.is-open) .serve-body > div { visibility: hidden; transition: visibility 0s .5s; }
.serve-list.is-ready .serve-body p { opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .5s var(--ease); }
.serve-list.is-ready .serve-row.is-open .serve-body p { opacity: 1; transform: none; transition-delay: .12s; }
@media (max-width: 960px) {
  .serve-grid { grid-template-columns: 1fr; gap: 32px; }
  .serve-photo { margin-top: 24px; }
  .serve-photo.cap-card-photo img { aspect-ratio: 1 / 1; }
  .serve-title button { grid-template-columns: 40px 1fr 20px; padding: 22px 0; }
  .serve-body p { padding: 0 0 12px 40px; font-size: 15px; }
  .serve-link { margin: 0 0 24px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .serve-list.is-ready .serve-body, .serve-list.is-ready .serve-body p, .serve-row::before { transition: none; }
}
@media (max-width: 760px) {   /* no drift on small screens */
}

/* Value Proposition: 70%+ centred on top, turn-time chart full width underneath
   (same arrangement as the current site) */
.speed-split {
  grid-template-columns: 1fr;
  gap: 64px;
}

.speed-stat {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.speed-stat p { margin: 0 auto; max-width: 560px; }

.speed-stat h3 { margin-top: 22px; }

.turn-compare { width: 100%; }
.tc-row { grid-template-columns: 170px 1fr 120px; gap: 24px; }
.tc-axis { margin: 4px 144px 0 194px; }

@media (max-width: 760px) {
  .speed-split { gap: 44px; }
  .tc-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .tc-axis { margin: 4px 0 0; }
}

/* ==========================================================================
   Expanding Our Qualified Capabilities — open roadmap (no boxes)
   Solid blue line = accredited today; dashed line = in qualification, with a
   light that travels along it and lights up each process as it passes.
   ========================================================================== */

.rm-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 80px;
}

.roadmap {
  --rail-y: 44px;
  --gap: 40px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 7fr);
  column-gap: var(--gap);
}

.rm-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--rail-y);
  height: 3px;
  --split: calc((100% - var(--gap)) * 2.3 / 9.3 + var(--gap) / 2);
}

.rm-solid {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: var(--split);
  background: var(--blue);
  transform-origin: left center;
}

.rm-dashed {
  position: absolute;
  left: var(--split);
  right: 0;
  top: .5px;
  height: 2px;
  overflow: visible;
  background: repeating-linear-gradient(to right, #aab6c2 0 6px, transparent 6px 12px);
}

.rm-glow {
  position: absolute;
  top: -7px;
  left: -160px;
  width: 160px;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(94,163,232,.75) 0%, rgba(94,163,232,.25) 40%, rgba(94,163,232,0) 72%);
  opacity: 0;
  pointer-events: none;
}

.rm-stage {
  display: block;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-text);
}

.rm-now .rm-stage { color: var(--blue); }

.rm-now, .rm-next { position: relative; }

.rm-node {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 5px var(--white);
}

.rm-node.is-done {
  left: 0;
  top: calc(var(--rail-y) + 1.5px - 8px);
  background: var(--blue);
}

.rm-held {
  list-style: none;
  margin: 0;
  padding: calc(var(--rail-y) + 44px) 0 0;
  display: grid;
  gap: 30px;
}

.rm-held strong {
  display: block;
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.rm-held span {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--grey-text);
}

.rm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.rm-steps li {
  position: relative;
  padding-top: calc(var(--rail-y) - 20px + 44px);
}

.rm-steps .rm-node {
  left: 0;
  top: calc(var(--rail-y) - 20px + 1.5px - 8px);
}

.rm-steps li::before {          /* hairline from the marker down to the name */
  content: "";
  position: absolute;
  left: 7px;
  top: calc(var(--rail-y) - 20px + 14px);
  height: 22px;
  width: 1px;
  background: #cdd5dd;
}

.rm-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

/* motion */
@keyframes rmMarch { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes rmGlow {
  0% { left: -160px; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes rmLit {
  0% { background: var(--sky); border-color: var(--sky); box-shadow: 0 0 0 5px var(--white), 0 0 0 11px rgba(94,163,232,.28); transform: scale(1.15); }
  16%, 100% { background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 5px var(--white), 0 0 0 11px rgba(94,163,232,0); transform: none; }
}

.motion .rm-dashed { animation: rmMarch .8s linear infinite; }
.motion .rm-glow { animation: rmGlow 3.6s linear infinite; }
.motion .rm-steps .rm-node { animation: rmLit 3.6s ease-out infinite; animation-delay: calc(var(--i) * .434s + .1s); }

html.motion .rm-solid[data-reveal] { opacity: 1; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.45, 0, .2, 1) .2s; }
html.motion .rm-solid[data-reveal].is-in { transform: scaleX(1); }

/* vertical timeline on tablets, phones and narrow laptops */
@media (max-width: 1240px) {
  .rm-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 56px; }
  .roadmap { display: block; }
  .rm-rail { display: none; }
  .rm-now, .rm-next { padding-left: 44px; }
  .rm-now::before,
  .rm-next::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 0;
    left: 6.5px;
    width: 3px;
    background: var(--blue);
  }
  .rm-next::before {
    top: 0;
    left: 7px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #aab6c2 0 6px, transparent 6px 12px);
  }
  .motion .rm-next::before { animation: rmMarchV .8s linear infinite; }
  .rm-node.is-done { top: 2px; }
  .rm-held { padding: 24px 0 48px; gap: 24px; }
  .rm-next { padding-top: 8px; }
  .rm-next .rm-stage { margin-bottom: 20px; }
  .rm-steps { grid-template-columns: 1fr; gap: 20px; }
  .rm-steps li { padding-top: 0; }
  .rm-steps li::before { display: none; }
  .rm-steps .rm-node { left: -44px; top: 1px; }
  .rm-name { font-size: 16px; }
}

@keyframes rmMarchV { from { background-position: 0 0; } to { background-position: 0 12px; } }

/* ==========================================================================
   Value Proposition: the navy Nadcap section slides up over the grey section.
   The grey section pins once its bottom reaches the bottom of the screen
   (site.js sets its top offset), dims slightly and sinks back a touch while
   the navy section covers it.
   ========================================================================== */
html.motion .stack-under {
  position: sticky;
  top: var(--stick-top, 0px);
  z-index: 0;
}

html.motion .stack-under::after {       /* navy veil that deepens as it is covered */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: calc(var(--cover, 0) * .45);
  pointer-events: none;
}

html.motion .stack-under > .wrap {
  transform: scale(calc(1 - var(--cover, 0) * .04)) translateY(calc(var(--cover, 0) * -24px));
  transform-origin: 50% 100%;
}

html.motion .stack-over {
  position: relative;
  z-index: 1;
  box-shadow: 0 -24px 48px rgba(6,15,26,.28), 0 -2px 8px rgba(6,15,26,.18);
}

html.motion .stack-over ~ * { position: relative; z-index: 1; }

/* OEM staircase: the light-blue line draws across each step as it appears */
html.motion .why-row[data-reveal]::before { transform: scaleX(0); transition: transform 1s var(--ease) calc(var(--rd, 0ms) + 200ms); }
html.motion .why-row[data-reveal].is-in::before { transform: scaleX(1); }

/* OEM staircase: each point slides in from the right as you scroll to it.
   Where the browser supports scroll-linked animation the slide follows the
   scroll itself; elsewhere each point slides in once when it comes into view. */
html.motion [data-reveal="slide"] { transform: translateX(var(--why-x, 140px)); transition-duration: 1s; }
@media (max-width: 960px) { .why-rows { --why-x: 56px; } }
html.motion [data-reveal="slide"].is-in { transform: none; }

@keyframes whySlide {
  from { opacity: 0; transform: translateX(var(--why-x, 140px)); }
  to   { opacity: 1; transform: none; }
}
@keyframes whyLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: view()) {
  html.motion .why-dark:not(.is-pinned) .why-row {
    animation: whySlide linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }
  html.motion .why-dark:not(.is-pinned) .why-row::before {
    animation: whyLine linear both;
    animation-timeline: view();
    animation-range: entry 60% cover 45%;
  }
}

/* OEM: desktop version. The section is taller than the screen and its content
   stays in place under the top bar (sticky) while you scroll through it; site.js
   adds .is-on to each point in turn based on the scroll position. */
html.motion .why-dark.is-pinned { --why-room: 90vh; }
html.motion .why-dark.is-pinned { height: calc(max(100vh - var(--bar-h), 540px) + var(--why-room)); }
@supports (height: 100svh) { html.motion .why-dark.is-pinned { height: calc(max(100svh - var(--bar-h), 540px) + var(--why-room)); } }
html.motion .why-dark.is-pinned .why-stage { position: sticky; top: var(--bar-h); }
html.motion .why-dark.is-pinned .why-stage {
  height: calc(100vh - var(--bar-h));
  height: calc(100svh - var(--bar-h));
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 0;
}
html.motion .why-dark.is-pinned .why-stage > .wrap { width: 100%; }
html.motion .why-dark.is-pinned .why-row {
  opacity: 0;
  transform: translateX(160px);
  transition: opacity .6s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}
html.motion .why-dark.is-pinned .why-row.is-on { opacity: 1; transform: none; }
html.motion .why-dark.is-pinned .why-row::before {
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) 0s;
}
html.motion .why-dark.is-pinned .why-row.is-on::before { transform: scaleX(1); transition-delay: .35s; }
html.motion .why-dark.is-pinned .why-row:not(.is-on) .split .swi { transform: translateY(110%); transition-delay: 0s; }
html.motion .why-dark.is-pinned .why-row.is-on .split .swi { transition-delay: calc(var(--wd, 0ms) + 150ms); }

/* Capabilities: facility — photo left, specification list right */
.facility-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.facility-photo { position: relative; margin: 0; overflow: hidden; }
.facility-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.facility-photo .caption {
  position: absolute; left: 0; bottom: 0;
  padding: 12px 18px;
  background: var(--blue); color: var(--white);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.facility-text .label { margin-bottom: 14px; }
.facility-text .h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 32px; }
.spec-list { margin: 0; border-bottom: 1px solid var(--grey-line); }
.spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--grey-line);
}
.spec-row dt { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-text); }
.spec-row dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--navy); }
@media (max-width: 960px) {
  .facility-grid { grid-template-columns: 1fr; gap: 40px; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Larger touch areas (layout unchanged: padding offset by negative margin) */
.serve-link { padding: 12px 0; margin-top: -12px; margin-bottom: 18px; }
a.contact-value { display: inline-block; padding: 9px 0; margin: -9px 0; }
@media (max-width: 960px) { .serve-link { margin-bottom: 12px; } }

/* Adaptive top bar (set by site.js from the real measured space).
   Landscape screens step down through data-fit 1–3 (smaller text, tighter
   spacing, then links sit between logo and button instead of dead centre)
   before ever folding into the menu button. */
.site-header[data-fit="1"] .main-nav ul { gap: 22px; }
.site-header[data-fit="1"] .main-nav a { font-size: 13px; }
.site-header[data-fit="1"] .brand-text { font-size: 11px; }

.site-header[data-fit="2"] .bar,
.site-header[data-fit="3"] .bar { gap: 18px; padding: 0 24px; }
.site-header[data-fit="2"] .main-nav,
.site-header[data-fit="3"] .main-nav { position: static; transform: none; flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.site-header[data-fit="2"] .main-nav ul { gap: 18px; }
.site-header[data-fit="2"] .main-nav a { font-size: 12.5px; }
.site-header[data-fit="2"] .brand-text { font-size: 10.5px; }
.site-header[data-fit="2"] .brand img,
.site-header[data-fit="3"] .brand img { height: 44px; }
.site-header[data-fit="2"] .header-cta,
.site-header[data-fit="3"] .header-cta { padding: 10px 12px; font-size: 11px; letter-spacing: .05em; }
.site-header[data-fit="2"] .header-cta svg,
.site-header[data-fit="3"] .header-cta svg { display: none; }

.site-header[data-fit="3"] .bar { gap: 14px; padding: 0 18px; }
.site-header[data-fit="3"] .brand { gap: 9px; }
.site-header[data-fit="3"] .main-nav ul { gap: 13px; }
.site-header[data-fit="3"] .main-nav a { font-size: 12px; letter-spacing: 0; }
.site-header[data-fit="3"] .brand-text { font-size: 10px; letter-spacing: .06em; }

.site-header.is-compact .main-nav { display: none; }
.site-header.is-compact .menu-toggle { display: block; }
.site-header.is-tight .header-cta { display: none; }

/* ==========================================================================
   Capabilities: Processes & Specifications (full SPL list, click to unfold)
   ========================================================================== */
.spec-section { background: var(--white); }
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.spec-head { position: sticky; top: 132px; }
.spec-head .h2 { margin: 14px 0 18px; font-size: clamp(26px, 2.8vw, 38px); }
.spec-head .lede { max-width: 400px; }

.sa-row { position: relative; border-top: 1px solid var(--grey-line); }
.spec-acc { border-bottom: 1px solid var(--grey-line); }
.sa-row::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 100%; height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.sa-row.is-open::before { transform: scaleX(1); }
.sa-title { margin: 0; }
.sa-title button {
  display: grid;
  grid-template-columns: 48px 1fr auto 24px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--navy);
  cursor: pointer;
}
.sa-num { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--grey-text); transition: color .3s ease; }
.sa-name { font-size: clamp(16px, 1.45vw, 19px); font-weight: 600; line-height: 1.3; transition: color .3s ease; }
.sa-count { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-text); white-space: nowrap; }
.sa-row.is-open .sa-num,
.sa-row.is-open .sa-name,
.sa-title button:hover .sa-name { color: var(--blue); }
.sa-title button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.sa-sign { position: relative; width: 14px; height: 14px; justify-self: end; }
.sa-sign::before,
.sa-sign::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s ease;
}
.sa-sign::after { transform: rotate(90deg); }
.sa-row.is-open .sa-sign::after { transform: rotate(0deg); opacity: 0; }

.sa-body { display: grid; grid-template-rows: 1fr; }
.sa-body > div { overflow: hidden; }
.spec-acc.is-ready .sa-body { grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.spec-acc.is-ready .sa-row.is-open .sa-body { grid-template-rows: 1fr; }
.spec-acc.is-ready .sa-row:not(.is-open) .sa-body > div { visibility: hidden; transition: visibility 0s .5s; }
.spec-acc.is-ready .sa-body .spec-table { opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .5s var(--ease); }
.spec-acc.is-ready .sa-row.is-open .sa-body .spec-table { opacity: 1; transform: none; transition-delay: .12s; }

.spec-table { list-style: none; margin: 0; padding: 0 0 26px 60px; }
.spec-table li {
  display: grid;
  grid-template-columns: minmax(140px, 2.2fr) minmax(0, 7fr);
  gap: 20px;
  padding: 9px 0;
  border-top: 1px solid var(--grey-line);
  font-size: 15px;
  line-height: 1.5;
}
.spec-table li:first-child { border-top: 0; padding-top: 0; }
.sp-code { font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.sp-name { color: var(--grey-text); }

@media (max-width: 960px) {
  .spec-grid { grid-template-columns: 1fr; gap: 36px; }
  .spec-head { position: static; }
  .spec-head .lede { max-width: 560px; }
}
@media (max-width: 560px) {
  .sa-title button { grid-template-columns: 34px 1fr 20px; padding: 18px 0; column-gap: 8px; }
  .sa-count { display: none; }
  .spec-table { padding-left: 42px; }
  .spec-table li { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-acc.is-ready .sa-body, .spec-acc.is-ready .sa-body .spec-table, .sa-row::before { transition: none; }
}

.speed-stat .fine-print { margin: 18px 0 0; max-width: 460px; font-size: 13px; line-height: 1.6; color: var(--grey-text); }
.speed-split .speed-stat .fine-print { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Process pages (services/): anodizing, chem film, passivation
   ========================================================================== */
.crumbs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px;
  margin: 0 0 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.crumbs a { color: inherit; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; transition: border-color .2s ease; }
.crumbs a:hover { border-bottom-color: #fff; }
.crumbs span { opacity: .8; }

.svc-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 88px;
  align-items: start;
}
.svc-statement {
  margin: 18px 0 28px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.svc-intro-text .lede { max-width: 640px; }
.svc-glance .label { margin-bottom: 16px; }
.svc-glance .fine-print { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--grey-text); }

.svc-how .h2 { max-width: 760px; margin-bottom: 56px; }
.svc-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 64px; }
.svc-type::before {
  content: ""; display: block; width: 40px; height: 3px; margin-bottom: 22px;
  background: var(--blue); transition: width .35s var(--ease);
}
.svc-type:hover::before { width: 72px; }
.svc-chip { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.svc-type h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; color: var(--navy); }
.svc-type p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--grey-text); }

.svc-specs-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.svc-specs-head .label { color: var(--on-navy-mute); margin-bottom: 14px; }
.svc-specs-head .h2 { margin: 0 0 18px; font-size: clamp(26px, 2.8vw, 38px); }
.svc-specs-head .lede { color: var(--on-navy); max-width: 400px; }
.svc-inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.svc-inline svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.svc-inline:hover svg { transform: translateX(4px); }
.svc-spec-table { padding: 0; border-top: 2px solid var(--sky); }
.svc-spec-table li { padding: 18px 0; font-size: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.svc-spec-table li:first-child { padding-top: 18px; border-top: 0; }
.svc-spec-table .sp-code { color: var(--sky); font-size: 17px; }
.svc-spec-table .sp-name { color: var(--on-navy); }

/* "One PO, every process": a line that draws across the four stages; this page's stage is highlighted */
.svc-stack-head { max-width: 720px; }
.svc-stack-head .label { margin-bottom: 14px; }
.svc-stack-head .h2 { margin: 0 0 18px; font-size: clamp(26px, 2.8vw, 38px); }
.svc-stack {
  position: relative;
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.svc-stack::before,
.svc-stack::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; }
.svc-stack::before { background: var(--grey-line); }
.svc-stack::after { background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.45, 0, .2, 1) .3s; }
.svc-stack.is-drawn::after { transform: scaleX(1); }
html:not(.motion) .svc-stack::after { transform: scaleX(1); }
.ss-node { position: relative; padding-top: 40px; }
.ss-dot {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 16px; height: 16px;
  background: var(--white); border: 2px solid var(--blue);
}
.ss-node.is-current .ss-dot { background: var(--blue); box-shadow: 0 0 0 6px rgba(0,86,185,.16); }
.ss-name { display: block; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--navy); transition: color .25s ease; }
a.ss-name:hover { color: var(--blue); }
.ss-node.is-current .ss-name { color: var(--blue); }
.ss-sub { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--grey-text); }
.ss-here { display: inline-block; margin-top: 12px; padding: 4px 10px; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.motion .ss-node.is-current .ss-dot { animation: ssPulse 2.6s ease-out infinite; }
@keyframes ssPulse { 0% { box-shadow: 0 0 0 0 rgba(0,86,185,.35); } 70%, 100% { box-shadow: 0 0 0 12px rgba(0,86,185,0); } }

.svc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.svc-photo { margin: 0; }
.svc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-photo figcaption { margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--blue); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .02em; color: var(--grey-text); }

/* FAQ reuses the accordion from the specification list */
.sa-body p { margin: 0; padding: 0 40px 26px 60px; max-width: 760px; font-size: 15.5px; line-height: 1.7; color: var(--grey-text); }
.spec-acc.is-ready .sa-body p { opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .5s var(--ease); }
.spec-acc.is-ready .sa-row.is-open .sa-body p { opacity: 1; transform: none; transition-delay: .12s; }
.svc-faq .sa-name { font-size: clamp(16px, 1.45vw, 19px); }
.svc-faq .sa-title button { grid-template-columns: 48px 1fr 24px; }
.sa-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 26px 60px; padding: 10px 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}
.sa-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.sa-more:hover svg { transform: translateX(4px); }
.sa-more:focus-visible, .cap-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.spec-acc.is-ready .sa-body .sa-more { opacity: 0; transition: opacity .35s ease; }
.spec-acc.is-ready .sa-row.is-open .sa-body .sa-more { opacity: 1; transition-delay: .2s; }

.cap-link { display: block; color: inherit; }
.cap-link::after { content: "\2197"; margin-left: 10px; opacity: 0; color: var(--sky-soft); transition: opacity .25s ease, transform .25s ease; display: inline-block; transform: translate(-4px, 4px); }
.cap-link:hover::after, .cap-link:focus-visible::after { opacity: 1; transform: none; }
.cap-link .note { display: block; }

.svc-related { border-top: 1px solid var(--grey-line); }
.svc-rel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.svc-rel {
  display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: end;
  padding: 22px 0 6px; border-top: 2px solid var(--navy);
}
.svc-rel .label { grid-column: 1 / -1; margin-bottom: 10px; }
.svc-rel-title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.25; color: var(--navy); transition: color .25s ease; }
.svc-rel-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--navy); transition: transform .3s var(--ease), color .25s ease; }
.svc-rel:hover { border-top-color: var(--blue); }
.svc-rel:hover .svc-rel-title, .svc-rel:hover .svc-rel-arrow svg { color: var(--blue); }
.svc-rel:hover .svc-rel-arrow svg { transform: translateX(4px); }

@media (max-width: 960px) {
  .svc-intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .svc-types { grid-template-columns: 1fr; gap: 40px; }
  .svc-specs-grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-stack { grid-template-columns: 1fr; gap: 34px; margin-top: 48px; }
  .svc-stack::before, .svc-stack::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .svc-stack::after { transform: scaleY(0); transform-origin: 50% 0; }
  .svc-stack.is-drawn::after { transform: scaleY(1); }
  html:not(.motion) .svc-stack::after { transform: scaleY(1); }
  .ss-node { padding: 0 0 0 44px; }
  .ss-dot { top: 4px; }
  .svc-photos { grid-template-columns: 1fr; gap: 32px; }
  .svc-rel-row { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .sa-body p { padding: 0 0 22px 42px; font-size: 15px; }
  .sa-more { margin-left: 42px; }
  .svc-faq .sa-title button { grid-template-columns: 34px 1fr 20px; }
  .crumbs { font-size: 11px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) { .svc-stack::after { transition: none; } }

/* bigger touch areas (layout unchanged: padding offset by negative margin) */
.cap-link { padding: 11px 0; margin: -11px 0; }
.crumbs a { padding: 12px 0 1px; margin-top: -11px; }
a.ss-name { padding: 10px 0; margin: -10px 0; }
.ss-here { font-size: 12px; }
.crumbs { font-size: 12px; }
@media (max-width: 560px) { .crumbs { font-size: 12px; letter-spacing: .08em; } }

/* ==========================================================================
   Links and small text
   One link language: coloured text, a visible underline, an arrow that is
   always there.
   ========================================================================== */
.serve-link, .sa-more, .svc-inline {
  font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
  text-decoration-color: rgba(0, 86, 185, .35);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.svc-inline { text-decoration-color: rgba(94, 163, 232, .5); }
.serve-link:hover, .sa-more:hover, .svc-inline:hover { text-decoration-color: currentColor; }
.serve-link svg, .sa-more svg, .svc-inline svg { width: 18px; height: 18px; stroke-width: 2.2; }

/* process names on the Capabilities page that open a process page */
.cap-link { color: var(--sky-soft); }
.cap-link .cl-t {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
  text-decoration-color: rgba(127, 178, 232, .45);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.cap-link .cl-t::after {
  content: "\2197"; display: inline-block; margin-left: 8px; font-size: .95em;
  text-decoration: none; opacity: .85; transition: transform .25s ease, opacity .25s ease;
}
.cap-link::after { content: none; }
.cap-link:hover, .cap-link:focus-visible { color: var(--white); }
.cap-link:hover .cl-t, .cap-link:focus-visible .cl-t { text-decoration-color: currentColor; }
.cap-link:hover .cl-t::after { transform: translate(2px, -2px); opacity: 1; }
.cap-list li:hover:has(.cap-link) { color: inherit; }

/* footer text */
.footer-bottom { font-size: 14px; }

/* breadcrumbs and stack-graphic links */
.crumbs { font-size: 13.5px; }
.crumbs a { border-bottom-width: 2px; border-bottom-color: rgba(255, 255, 255, .55); }
.ss-here { font-size: 12.5px; }

/* the rest of the small text, one step up */
.label { font-size: 13px; }
.sa-num { font-size: 14px; }
.sa-count { font-size: 13px; }
.sa-name { font-size: clamp(17px, 1.55vw, 20px); }
.spec-table li { font-size: 16px; }
.cap-list li { font-size: 16.5px; }
.cap-list li .note { font-size: 14px; }
.svc-chip { font-size: 12.5px; }
.svc-type p { font-size: 16px; }
.svc-photo figcaption { font-size: 14.5px; }
.speed-stat .fine-print { font-size: 14px; }
.pillar-badge { font-size: 13px; }
.photo-offset .caption, .facility-photo .caption { font-size: 13px; }
.figure .fig-label { font-size: 13px; }
.why-num { font-size: 14px; }
@media (max-width: 560px) {
  .crumbs { font-size: 13px; letter-spacing: .08em; }
  .serve-link, .sa-more, .svc-inline { font-size: 16px; }
}
.svc-inline { display: flex; width: fit-content; margin-top: 22px; }

/* related-process cards: aligned labels, visibly clickable */
.svc-rel { align-content: start; align-items: center; }
.svc-rel .label { margin-bottom: 14px; }
.svc-rel-title { color: var(--blue); }
.svc-rel-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--blue); color: var(--blue); transition: background-color .25s ease, color .25s ease; }
.svc-rel-arrow svg { width: 20px; height: 20px; color: inherit; }
.svc-rel:hover .svc-rel-arrow { background: var(--blue); color: var(--white); }
.svc-rel:hover .svc-rel-arrow svg { color: var(--white); }

/* ==========================================================================
   Process pages: stage timeline and card rows
   The four stages appear one after the other and the blue line draws from
   one stage to the next.
   ========================================================================== */
.svc-stack::before, .svc-stack::after { content: none; }
.ss-node:nth-child(1) { --i: 0; } .ss-node:nth-child(2) { --i: 1; }
.ss-node:nth-child(3) { --i: 2; } .ss-node:nth-child(4) { --i: 3; }
.ss-node:not(:last-child)::before,
.ss-node:not(:last-child)::after {
  content: ""; position: absolute; top: 7px; left: 16px; width: calc(100% + 16px); height: 2px;
}
.ss-node:not(:last-child)::before { background: var(--grey-line); }
.ss-node:not(:last-child)::after { background: var(--blue); }
.ss-node.is-current .ss-dot { animation: none; }
.motion .ss-node.is-current .ss-dot { animation: none; }

.motion .ss-node { opacity: 0; transform: translateY(10px); }
.motion .ss-node:not(:last-child)::after { transform: scaleX(0); transform-origin: 0 50%; }
.motion .svc-stack.is-drawn .ss-node {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .6s var(--ease);
  transition-delay: calc(var(--i) * .75s);
}
.motion .svc-stack.is-drawn .ss-node:not(:last-child)::after {
  transform: none;
  transition: transform .55s cubic-bezier(.45, 0, .2, 1);
  transition-delay: calc(var(--i) * .75s + .3s);
}
@media (prefers-reduced-motion: reduce) {
  .motion .ss-node { opacity: 1; transform: none; }
  .motion .ss-node:not(:last-child)::after { transform: none; }
  .motion .svc-stack.is-drawn .ss-node, .motion .svc-stack.is-drawn .ss-node::after { transition: none; }
}
@media (max-width: 960px) {
  .svc-stack::before, .svc-stack::after { content: none; }
  .ss-node:not(:last-child)::before,
  .ss-node:not(:last-child)::after { top: 20px; left: 7px; width: 2px; height: calc(100% + 18px); }
  .motion .ss-node:not(:last-child)::after { transform: scaleY(0); transform-origin: 50% 0; }
  .motion .svc-stack.is-drawn .ss-node:not(:last-child)::after { transform: none; }
}

/* two-card rows and two-card "related" row */
.svc-types.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-rel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .svc-types.n2, .svc-rel-row { grid-template-columns: 1fr; }
}

/* Capabilities intro: solid badges and a short lead under them */
.cap-intro .pillar-badge {
  background: var(--navy); border-color: var(--navy); color: var(--white);
  font-size: 13px; padding: 12px 22px;
  transition: background-color .25s ease, border-color .25s ease;
}
.cap-intro .pillar-badge::before { content: none; }
.cap-intro .pillar-badge:hover { background: var(--blue); border-color: var(--blue); }
.cap-intro .cap-lead {
  max-width: 720px; margin: 36px auto 0;
  font-size: 17px; line-height: 1.65; color: var(--grey-text);
}
.cap-intro .cap-lead + .sub-note { margin-top: 18px; }
@media (max-width: 560px) { .cap-intro .cap-lead { font-size: 16px; } }

/* Intro strip under the banner (Value Proposition, Approvals, Contact) */
.cred-intro { max-width: 820px; text-align: center; }
.cred-title { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy); }
.cred-text { margin: 0 auto; max-width: 720px; font-size: 17px; line-height: 1.65; color: var(--grey-text); }
.cred-strip { padding: 72px 0; }
@media (max-width: 560px) { .cred-strip { padding: 56px 0; } .cred-text { font-size: 16px; } }
section[id], h2[id] { scroll-margin-top: calc(var(--bar-h) + 28px); }
#quote { scroll-margin-top: var(--bar-h); }

/* ==========================================================================
   Next Steps band and footer
   ========================================================================== */
/* Next Steps band (end of every page) */
.next-steps { border-top: 1px solid var(--grey-line); background: var(--white); padding: 64px 0 72px; }
.ns-label { margin-bottom: 26px; }
.ns-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ns-card {
  display: grid; grid-template-columns: 1fr auto; align-content: start; align-items: center; column-gap: 20px;
  padding: 22px 0 6px; border-top: 2px solid var(--navy); transition: border-color .25s ease;
}
.ns-card .label { grid-column: 1 / -1; margin-bottom: 14px; }
.ns-title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; line-height: 1.25; color: var(--blue); }
.ns-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--blue); color: var(--blue); transition: background-color .25s ease, color .25s ease; }
.ns-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.ns-card:hover { border-top-color: var(--blue); }
.ns-card:hover .ns-arrow { background: var(--blue); color: #fff; }
.ns-card:hover .ns-arrow svg { transform: translateX(3px); }
.ns-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (max-width: 960px) {
  .next-steps { padding: 52px 0 56px; }
  .ns-row { grid-template-columns: 1fr; gap: 26px; }
}



/* ==========================================================================
   Type scale: one size per heading role, site-wide
   - section titles (h2)            : 38px / 700
   - intro-strip titles under banner: 32px / 600
   - card / point titles (h3)       : 20px / 600
   ========================================================================== */
html body .sheet .h2,
html body .sheet .nadcap-intro h2 {
  font-size: clamp(28px, 2.65vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
html body .sheet .cap-intro .statement,
html body .sheet .cred-title {
  font-size: clamp(24px, 2.25vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}
html body .sheet .vp-item h3,
html body .sheet .nadcap-points h3,
html body .sheet .svc-type h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
@media (max-width: 560px) {
  html body .sheet .vp-item h3,
  html body .sheet .nadcap-points h3,
  html body .sheet .svc-type h3 { font-size: 18px; }
}

/* ==========================================================================
   Button feedback: a small lift + shadow on hover, a light sheen on
   the solid buttons, and a quick press-in on click. Arrows still nudge.
   ========================================================================== */
.header-cta, .btn {
  position: relative; overflow: hidden;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
              transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.header-cta:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(10,27,46,.55);
}
.header-cta:active, .btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 4px 10px -6px rgba(10,27,46,.5);
  transition-duration: .08s;
}
/* sheen that sweeps across once on hover (solid buttons only) */
.header-cta::after, .btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.header-cta:hover::after, .btn:hover::after {
  animation: btnSheen .7s ease forwards;
}
@keyframes btnSheen { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }

/* card links (Next Steps, related processes): arrow box pops, title slides, press on click */
.ns-card, .svc-rel { transition: border-color .25s ease, transform .2s ease; }
.ns-title, .svc-rel-title { transition: color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.ns-arrow, .svc-rel-arrow { transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.ns-card:hover .ns-title, .svc-rel:hover .svc-rel-title { transform: translateX(4px); }
.ns-card:hover .ns-arrow, .svc-rel:hover .svc-rel-arrow { transform: scale(1.08); }
.ns-card:active, .svc-rel:active { transform: scale(.985); transition-duration: .08s; }

/* text links with arrows: quick press */
.serve-link, .sa-more, .svc-inline, .cap-link { transition: text-decoration-color .2s ease, color .2s ease, transform .15s ease; }
.serve-link:active, .sa-more:active, .svc-inline:active, .cap-link:active { transform: scale(.97); }

/* accordion rows: the +/- sign gets a little bounce on hover, rows press on click */
.sa-sign, .serve-sign { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.sa-title button:hover .sa-sign, .serve-title button:hover .serve-sign { transform: scale(1.25); }
.sa-title button:active .sa-name, .serve-title button:active .serve-name { transform: scale(.99); }

@media (prefers-reduced-motion: reduce) {
  .header-cta, .btn, .ns-card, .svc-rel, .ns-title, .svc-rel-title, .ns-arrow, .svc-rel-arrow,
  .serve-link, .sa-more, .svc-inline, .cap-link, .sa-sign, .serve-sign, .cert-card, .cert-cue svg { transform: none !important; }
  .header-cta::after, .btn::after { display: none; }
}
@media (hover: none) {
  .header-cta:hover, .btn:hover { transform: none; box-shadow: none; }
}