/* WIN Advisory — shared visual system (r7.9.5)
   Direction: civic infrastructure precision, restrained and modern.

   r7.9 rebuilds the type system. r7.8 was consistent but uniformly emphatic:
   23 rendered sizes, 54% of text uppercase, and the display face outnumbering
   the body face 2.5:1, which left no quiet baseline for anything to lead against.
   This revision fixes that, unifies radii and rule weights, and repairs four
   craft defects (band decoration over type, certification baselines, footer
   letter-spacing, centred Approach steps). */

/* Self-hosted Latin subsets remove the render-time Google Fonts request. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/archivo-latin-v25.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-latin-v23.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin-v20.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin-v20.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }

:root {
  --win-navy: #143A6E;
  --deep-navy: #0A2447;
  --action-blue: #245C9F;
  --steel-gray: #8D9BAC;
  --ink: #172033;
  --slate: #536074;
  --paper-white: #FFFFFF;
  --surface-soft: #F3F6F9;
  --surface-muted: #E8EDF3;
  --navy-80: #43618B;
  --navy-60: #7289A8;
  --navy-40: #A1B0C5;
  --navy-20: #D0D8E2;
  --line: #D5DDE7;
  --line-strong: #B8C4D2;
  --on-dark-soft: #B8C4D2;

  /* Compatibility aliases retained for the existing markup. */
  --blue: var(--win-navy);
  --blue-dark: var(--deep-navy);
  --blue-mid: var(--action-blue);
  --blue-light: var(--action-blue);
  --silver: var(--steel-gray);
  --silver-light: var(--surface-muted);
  --silver-mid: var(--navy-60);
  --white: var(--paper-white);
  --off-white: var(--surface-soft);
  --gray-50: #F8FAFC;
  --gray-100: var(--surface-soft);
  --gray-200: var(--line);
  --gray-300: var(--line-strong);
  --gray-400: var(--navy-40);
  --gray-500: var(--slate);
  --gray-600: var(--slate);
  --gray-700: var(--ink);
  --text-main: var(--ink);
  --text-muted: var(--slate);
  --nav-bg: rgba(255,255,255,.94);
  --nav-border: var(--line);
  --nav-link: var(--win-navy);

  --font-head: "Archivo", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* TYPE SCALE — the whole site resolves to these nine steps.
     Nothing renders below 11px. */
  --fs-2xs:  11px;   /* mono identifiers, chips, legal line   */
  --fs-xs:   12px;   /* eyebrows, data labels, nav            */
  --fs-sm:   13.5px; /* dense body: card copy, step copy      */
  --fs-base: 15px;   /* standard body                          */
  --fs-md:   17px;   /* lede body                              */
  --fs-lg:   20px;   /* card and service titles                */
  --fs-xl:   clamp(27px, 2.7vw, 36px);  /* section headline    */
  --fs-2xl:  clamp(32px, 3.8vw, 48px);  /* inner page h1       */
  --fs-3xl:  clamp(36px, 4.3vw, 54px);  /* home hero h1        */

  --page-gutter: clamp(20px, 4vw, 56px);
  --max-w: min(1600px, calc(100vw - (2 * var(--page-gutter))));
  --measure: 68ch;
  --section-pad: clamp(64px, 6vw, 104px) var(--page-gutter);
  --nav-h: 82px;

  /* One radius. One accent rule weight. */
  --radius: 3px;
  --rule: 2px;
  --shadow-sm: 0 6px 20px rgba(10,36,71,.055);
  --shadow-md: 0 16px 44px rgba(10,36,71,.10);
  --cta-h: 48px;

  /* Hero scene + headline cycle. Both animations read these so the
     copy and the artwork can never drift out of lockstep. */
  --hero-cycle: 32s;
}

body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  color: var(--text-main);
  background: var(--paper-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  transform: translateY(-160%); padding: 10px 14px;
  color: var(--deep-navy); background: var(--paper-white);
  border: 2px solid var(--win-navy); border-radius: var(--radius);
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h);
  padding-inline: max(var(--page-gutter), calc((100vw - var(--max-w)) / 2));
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 3px 18px rgba(10,36,71,.04);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { width: auto; height: 46px; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 42px; padding: 4px 0;
  color: var(--nav-link); font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap; word-spacing: .18em;
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--action-blue); }
.nav-links a.active, .nav-links a[aria-current="page"] { color: var(--deep-navy); }
.nav-links a.active::after, .nav-links a[aria-current="page"]::after {
  content: ''; position: absolute; right: 0; bottom: 6px; left: 0;
  height: var(--rule); background: var(--action-blue);
}
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 8px; z-index: 200;
  background: transparent; border: 0; cursor: pointer;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--deep-navy); transition: transform .25s ease, opacity .2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
  display: none; position: fixed; inset: var(--nav-h) 0 auto; z-index: 99;
  flex-direction: column; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  padding: 8px 0 18px; background: rgba(255,255,255,.99);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 15px 24px; color: var(--deep-navy); border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .08em; word-spacing: .18em; text-transform: uppercase;
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"]:not(.mobile-menu-cta) { background: var(--surface-soft); }

/* ---------- Buttons (uppercase is retained here: it is one of the three
   places it still carries meaning — eyebrow, nav, action) ---------- */
.engagement-cta, .btn-primary, .btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 232px; min-height: var(--cta-h); padding: 0 26px;
  color: var(--paper-white); background: var(--win-navy);
  border: 1px solid var(--win-navy); border-radius: var(--radius);
  font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .09em; word-spacing: .18em; line-height: 1;
  text-align: center; text-transform: uppercase; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.engagement-cta:hover, .btn-solid:hover {
  color: var(--paper-white); background: var(--action-blue); border-color: var(--action-blue);
}
.nav .engagement-cta { min-width: 218px; }
.nav-links a.nav-cta { padding-inline: 22px; color: var(--paper-white); }
.nav-links a.nav-cta:hover { color: var(--paper-white); background: var(--action-blue); border-color: var(--action-blue); }
.nav-links a.nav-cta.active::after, .nav-links a.nav-cta[aria-current="page"]::after { display: none; }
.mobile-menu .mobile-menu-cta {
  width: calc(100% - 48px); margin: 16px 24px 0; padding-inline: 20px;
  color: var(--paper-white); border: 1px solid var(--win-navy);
}
.mobile-menu a.mobile-menu-cta:hover,
.mobile-menu a.mobile-menu-cta[aria-current="page"] {
  color: var(--paper-white); background: var(--action-blue); border-color: var(--action-blue);
}
.hero-actions .engagement-cta, .service-callout .engagement-cta, .closing-cta .engagement-cta {
  color: var(--deep-navy); background: var(--paper-white); border-color: var(--paper-white);
}
.hero-actions .engagement-cta:hover, .service-callout .engagement-cta:hover, .closing-cta .engagement-cta:hover {
  color: var(--deep-navy); background: var(--surface-muted); border-color: var(--surface-muted);
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cta-h); padding: 0 28px;
  color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.42);
  border-radius: var(--radius); font-family: var(--font-head);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; word-spacing: .18em;
  text-transform: uppercase; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.btn-ghost:hover { color: var(--paper-white); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.8); }

/* ---------- Eyebrows (the second retained uppercase role) ---------- */
.hero-eyebrow, .section-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
  color: var(--win-navy); font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .2em;
  word-spacing: .1em; text-transform: uppercase;
}
.hero-eyebrow { margin-bottom: 22px; color: var(--on-dark-soft); }
.hero-eyebrow::before, .section-eyebrow::before {
  content: ''; display: block; width: 32px; height: var(--rule); background: currentColor; flex: none;
}

/* ---------- Home hero ---------- */
#hero {
  position: relative; display: flex; align-items: center;
  min-height: min(760px, 100vh); padding: 152px var(--page-gutter) 104px;
  overflow: hidden; background: var(--deep-navy);
}
.hero-cinematic { --hero-scene-opacity: 1; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--deep-navy); pointer-events: none; }
/* The artwork is a 1600x900 artboard cropped with object-fit: cover. At
   desktop hero ratios a centred crop lands the aircraft (viewBox y 206-249)
   about 80px from the top of the page — behind the 82px fixed nav. Biasing the
   crop toward the top of the artboard drops the horizon and the flight path
   into open space below the nav. Both scenes use the same value so their
   horizons stay registered through the crossfade. */
.hero-cinematic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; opacity: 0; transform: scale(1.035);
  animation: heroSceneCrossfade var(--hero-cycle) linear infinite,
             cinematicDrift 20s ease-in-out infinite alternate;
}
.hero-cinematic .hero-scene-electrical { opacity: var(--hero-scene-opacity); }
.hero-cinematic .hero-scene-aviation { animation-delay: calc(var(--hero-cycle) / -2), 0s; }
.hero-cinematic-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5,19,39,.97) 0%, rgba(7,28,56,.89) 34%, rgba(7,28,56,.46) 62%, rgba(7,28,56,.10) 100%),
    linear-gradient(0deg, rgba(5,19,39,.86) 0%, rgba(5,19,39,.06) 58%, rgba(5,19,39,.45) 100%);
}
@keyframes cinematicDrift { to { transform: scale(1.07) translate3d(-.7%,-.5%,0); } }
@keyframes heroSceneCrossfade {
  0%,43.75% { opacity: var(--hero-scene-opacity); }
  50%,93.75% { opacity: 0; }
  100% { opacity: var(--hero-scene-opacity); }
}
@keyframes heroSceneCrossfadeMobile {
  0%,40% { opacity: var(--hero-scene-opacity); }
  50%,90% { opacity: 0; }
  100% { opacity: var(--hero-scene-opacity); }
}
/* Message cycle — identical curve to the scene crossfade, so the words and the
   artwork change on the same beat. Used by the hero and by the Why Independent
   band, both driven by --hero-cycle so they can never drift apart. */
@keyframes msgCycle {
  0%,43.75% { opacity: 1; visibility: visible; }
  50%,93.75% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}
@keyframes msgCycleMobile {
  0%,40% { opacity: 1; visibility: visible; }
  50%,90% { opacity: 0; visibility: hidden; }
  100% { opacity: 1; visibility: visible; }
}
/* Both messages share one grid cell: the block is as tall as the longer of the
   two, so nothing below it moves when they swap. */
.msg-stack { display: grid; }
.msg-stack > * { grid-area: 1 / 1; }
.msg { opacity: 0; visibility: hidden; animation: msgCycle var(--hero-cycle) linear infinite; }
.msg--a { opacity: 1; visibility: visible; }
.msg--b { animation-delay: calc(var(--hero-cycle) / -2); }
/* Measurement helpers are classes rather than injected style attributes so a
   strict Content Security Policy can remain in force. */
.msg.is-measure-probe {
  display: block !important; position: static !important;
  opacity: 0 !important; visibility: hidden !important; animation: none !important;
}
.msg.is-measure-hidden { display: none !important; }
/* The two messages are different lengths, so at some viewport widths one wraps
   to an extra line. Left alone, the grid cell is sized to the taller of the two
   and the shorter state carries a line of dead space above the paragraph below
   it. site-r7.9.4.js measures both and publishes the heights; the container then
   animates between them on the same curve as the crossfade, so the copy below
   drifts during the 2s transition instead of the block standing oversized.
   Without JS this rule never applies and the stack falls back to the taller of
   the two, which is safe. */
.msg-stack.is-measured {
  height: var(--msg-h-a);
  animation: msgStackH var(--hero-cycle) linear infinite;
}
@keyframes msgStackH {
  0%,43.75% { height: var(--msg-h-a); }
  50%,93.75% { height: var(--msg-h-b); }
  100% { height: var(--msg-h-a); }
}
@keyframes msgStackHMobile {
  0%,40% { height: var(--msg-h-a); }
  50%,90% { height: var(--msg-h-b); }
  100% { height: var(--msg-h-a); }
}
.hero-bg-lines {
  position: absolute; inset: -2px; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(149,162,178,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(149,162,178,.07) 1px, transparent 1px);
  background-size: 72px 72px; animation: gridDrift 32s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 45%, rgba(0,0,0,.55));
  mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 45%, rgba(0,0,0,.55));
}
@keyframes gridDrift { to { transform: translate(72px,72px); } }
.hero-inner {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0,1fr) clamp(300px,24vw,360px);
  align-items: center; gap: clamp(40px,4vw,72px);
  width: 100%; max-width: min(1400px, var(--max-w)); margin: 0 auto;
}

/* Credentials panel. The About page carries the full cards with verification
   links; this is the summary claim, and it links there rather than dead-ending. */
.hero-cred {
  display: block; padding: 24px 26px 22px;
  background: rgba(6,22,45,.58); border: 1px solid rgba(225,229,235,.22);
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 rgba(166,180,196,.6), 0 24px 70px rgba(2,12,28,.32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s ease, background .2s ease;
}
a.hero-cred:hover { background: rgba(6,22,45,.68); border-color: rgba(225,229,235,.4); }
.hero-cred-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  color: var(--on-dark-soft); font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.hero-cred-label::before { content: ''; width: 22px; height: var(--rule); background: currentColor; flex: none; }
.hero-cred-item { padding: 13px 0; border-top: 1px solid rgba(225,229,235,.14); }
.hero-cred-item:first-of-type { padding-top: 0; border-top: 0; }
.hero-cred-agency { color: var(--on-dark-soft); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .12em; }
.hero-cred-name { margin-top: 4px; color: var(--paper-white); font-family: var(--font-head); font-size: var(--fs-base); font-weight: 700; line-height: 1.35; letter-spacing: -.005em; }
.hero-cred-id { margin-top: 3px; color: rgba(255,255,255,.62); font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.5; }
.hero-cred-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px;
  width: 100%; border-top: 1px solid rgba(225,229,235,.14);
  color: var(--paper-white); font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
}
.hero-cred-more span[aria-hidden] { transition: transform .2s ease; }
a.hero-cred:hover .hero-cred-more span[aria-hidden] { transform: translateX(3px); }
.hero-left { max-width: 700px; text-shadow: 0 2px 24px rgba(2,12,28,.25); }

/* Both messages occupy the same grid cell, so the block is as tall as the
   longer of the two and nothing below it ever moves. */
.hero-headline-stack { margin-bottom: 26px; }
h1.hero-headline, .hero-headline {
  max-width: 17ch; color: var(--paper-white);
  font-family: var(--font-head); font-size: var(--fs-3xl);
  font-weight: 700; line-height: 1.06; letter-spacing: -.022em;
}
.hero-headline em { color: #C3CEDA; font-style: normal; font-weight: 500; }
/* The second hero message is a longer sentence; a wider measure holds it to the
   same three lines as the first, so the stack carries no dead space either way. */
.hero-headline.msg--b { max-width: 13em; }
.hero-sub { max-width: 56ch; margin-bottom: 36px; color: rgba(255,255,255,.84); font-size: var(--fs-md); line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

/* ---------- Inner-page hero ---------- */
.page-hero {
  position: relative; min-height: 440px;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 62px) var(--page-gutter) 62px; overflow: hidden;
  background: linear-gradient(118deg,#071A34 0%,var(--deep-navy) 58%,var(--win-navy) 100%);
}
.page-hero .hero-bg-lines { animation: none; }
.page-hero::before {
  content: ''; position: absolute; width: min(58vw,760px); aspect-ratio: 1;
  right: -12%; top: -190%; border: 1px solid rgba(149,162,178,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 74px rgba(149,162,178,.045), 0 0 0 154px rgba(149,162,178,.03), 0 0 0 244px rgba(149,162,178,.018);
  animation: orbitShift 18s ease-in-out infinite alternate; pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; right: 5%; top: 42%; width: 34%; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(225,229,235,.62),transparent);
  box-shadow: 0 42px rgba(149,162,178,.18), 0 84px rgba(149,162,178,.1);
  animation: pageSignal 7s ease-in-out infinite; pointer-events: none;
}
@keyframes orbitShift { to { transform: translate(-28px,18px) scale(1.025); } }
@keyframes pageSignal { 0%,100% { opacity: .2; transform: translateX(30px); } 50% { opacity: .8; transform: translateX(-12px); } }
.page-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; }
.page-hero .section-eyebrow { color: var(--on-dark-soft); }
.page-hero h1 {
  max-width: 24ch; color: var(--paper-white); font-family: var(--font-head);
  font-size: var(--fs-2xl); font-weight: 700;
  line-height: 1.08; letter-spacing: -.02em;
}
.page-hero .page-hero-sub { max-width: 66ch; margin-top: 18px; color: rgba(255,255,255,.78); font-size: var(--fs-md); line-height: 1.7; }

/* ---------- Shared sections ---------- */
section { padding: var(--section-pad); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.surface-muted { background: var(--surface-soft) !important; }
.section-headline {
  max-width: 26ch; margin-bottom: 20px; color: var(--deep-navy);
  font-family: var(--font-head); font-size: var(--fs-xl);
  font-weight: 700; line-height: 1.14; letter-spacing: -.018em;
}
.section-sub { max-width: 58ch; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.75; }

/* Shared chip — mono is retained here because these are literal codes. */
.meth span, .certification-scope span {
  display: inline-flex; align-items: center; min-height: 27px; padding: 5px 9px;
  color: var(--win-navy); background: rgba(20,58,110,.055);
  border: 1px solid rgba(20,58,110,.16); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  line-height: 1.35; letter-spacing: .015em;
  transition: background .2s ease, border-color .2s ease;
}

/* ---------- Home services index ---------- */
.services-strip { padding: 24px var(--page-gutter); background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.strip-inner {
  display: grid; grid-template-columns: auto repeat(5, minmax(0,1fr));
  align-items: start; max-width: var(--max-w); margin: 0 auto; gap: 12px 26px;
}
.strip-label {
  padding-top: 2px; color: var(--slate);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.strip-link {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 9px;
  color: var(--deep-navy); font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; letter-spacing: 0;
  transition: color .2s ease;
}
.strip-link .n { color: var(--action-blue); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .06em; }
.strip-link:hover { color: var(--action-blue); }

/* ---------- Home independent band ---------- */
.band { position: relative; overflow: hidden; padding: 0 var(--page-gutter); color: var(--paper-white); background: var(--deep-navy); }
/* The mask keeps every decorative element off the left column where the
   type lives. Nothing draws behind live text at any viewport width. */
.band-motion {
  position: absolute; inset: 0; z-index: 1; opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 72%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 46%, #000 72%, #000 100%);
}
.band-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(10,36,71,.44); }
.band-inner { position: relative; z-index: 3; max-width: var(--max-w); margin: 0 auto; padding: clamp(76px,7vw,104px) 0; }
.band .section-eyebrow { color: var(--on-dark-soft); }
.band-headline-stack { margin-top: 6px; }
.band-h {
  max-width: 20ch; color: var(--paper-white);
  font-family: var(--font-head); font-size: var(--fs-xl);
  font-weight: 700; line-height: 1.14; letter-spacing: -.018em;
}
.band-p { max-width: 56ch; margin-top: 20px; color: rgba(255,255,255,.78); font-size: var(--fs-base); line-height: 1.75; }
.gantt { position: absolute; inset: 50% 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 0 6%; transform: translateY(-50%); }
.grow-row { display: flex; align-items: center; gap: 18px; }
.grow-row .tick { width: 46px; flex: none; color: rgba(149,162,178,.5); font-family: var(--font-mono); font-size: var(--fs-2xs); }
.gbar { height: 7px; transform: scaleX(0); transform-origin: left center; background: rgba(149,162,178,.26); animation: grow 8s cubic-bezier(.4,0,.2,1) infinite; }
.gbar.hot { background: rgba(61,118,185,.54); }
.grow-row:nth-child(1) .gbar { width: 34%; animation-delay: 0s; }
.grow-row:nth-child(2) .gbar { width: 58%; animation-delay: .5s; }
.grow-row:nth-child(3) .gbar { width: 72%; animation-delay: 1s; }
.grow-row:nth-child(4) .gbar { width: 88%; animation-delay: 1.5s; }
.band-curve { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-curve path { fill: none; stroke: rgba(149,162,178,.55); stroke-width: 2; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 10s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes grow { 0%,8% { transform: scaleX(0); opacity: .3; } 42%,82% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: .25; } }
@keyframes draw { 0%,5% { stroke-dashoffset: 2400; opacity: .25; } 48%,82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -2400; opacity: .22; } }

/* ---------- About ---------- */
#about { background: var(--surface-soft); }
.about-lede { max-width: var(--measure); margin: 0 0 52px; }
.about-lede p { margin-bottom: 16px; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.8; }
.about-lede p:last-child { margin-bottom: 0; }
.proof-cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.pcol { padding-top: 20px; border-top: var(--rule) solid var(--win-navy); }
.pcol h3 {
  margin-bottom: 16px; color: var(--win-navy);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  line-height: 1.45; letter-spacing: .16em; text-transform: uppercase;
}
.pcol ul { list-style: none; }
.pcol li { padding: 12px 0; color: var(--deep-navy); border-top: 1px solid var(--line); font-size: var(--fs-base); font-weight: 600; line-height: 1.45; }
.pcol li:first-child { border-top: 0; }
.pcol li b { display: block; margin-top: 4px; color: var(--text-muted); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; line-height: 1.62; }
.proof-note {
  margin-top: 32px; padding: 22px 26px; color: var(--text-muted);
  background: var(--paper-white); border: 1px solid var(--line);
  border-left: var(--rule) solid var(--win-navy); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-size: var(--fs-base); line-height: 1.75;
}
.proof-note b { color: var(--deep-navy); font-weight: 700; }

/* Certifications */
.certifications-block { margin-top: clamp(48px,5vw,64px); padding-top: clamp(40px,4vw,52px); border-top: 1px solid var(--line); }
.certifications-heading { color: var(--deep-navy); font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; letter-spacing: -.012em; }
.certifications-intro { max-width: 62ch; margin-top: 10px; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.7; }
.certifications-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 28px; }
.certification-card {
  display: flex; flex-direction: column; padding: 30px;
  background: var(--paper-white); border: 1px solid var(--line);
  border-top: var(--rule) solid var(--win-navy);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.certification-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.certification-agency {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; height: 32px; padding-inline: 11px;
  color: var(--paper-white); background: var(--win-navy);
  border-radius: var(--radius); font-family: var(--font-mono);
  font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .12em;
}
.certification-status {
  display: inline-flex; align-items: center; gap: 7px; color: var(--deep-navy);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.certification-status::before { content: ''; width: 7px; height: 7px; background: var(--navy-60); border-radius: 50%; box-shadow: 0 0 0 3px rgba(114,137,168,.18); flex: none; }
/* Reserving two lines keeps the two card titles on the same baseline
   whether the issuing agency name wraps or not. */
.certification-issuer {
  min-height: 2.9em; margin-top: 22px; color: var(--slate);
  font-family: var(--font-body); font-size: var(--fs-sm);
  font-weight: 500; line-height: 1.45; letter-spacing: .01em;
}
.certification-title {
  margin-top: 6px; color: var(--deep-navy); font-family: var(--font-head);
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.certification-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 22px; }
.certification-meta div { padding-top: 12px; border-top: 1px solid var(--line); }
.certification-meta dt { color: var(--slate); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; }
.certification-meta dd { margin-top: 4px; color: var(--deep-navy); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
.certification-scope { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
/* A hairline turns the space above the verify link into a deliberate
   footer zone on both cards, rather than a void on the shorter one. */
.certification-link {
  display: inline-flex; align-items: center; align-self: stretch; gap: 7px;
  min-height: 42px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--win-navy); font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em;
}
.certification-link span[aria-hidden] { transition: transform .2s ease; }
.certification-link:hover { color: var(--action-blue); }
.certification-link:hover span[aria-hidden] { transform: translate(2px,-2px); }

/* ---------- Services ---------- */
#services { background: var(--surface-soft); }
.services-header { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); align-items: end; gap: 44px; margin-bottom: 40px; }
.services-header .section-headline { margin-bottom: 0; }
.services-grid {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px;
  overflow: hidden; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-card {
  position: relative; z-index: 0; display: flex; flex-direction: column;
  padding: 38px; overflow: hidden; background: var(--paper-white);
  transition: background .25s ease, box-shadow .25s ease;
}
.service-card:not(.service-callout)::after { content: ''; position: absolute; inset: auto 0 0; height: var(--rule); background: var(--action-blue); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.service-card:not(.service-callout):focus-within {
  z-index: 1; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--line-strong);
}
.service-card:not(.service-callout):focus-within::after { transform: scaleX(1); }
.service-num {
  display: flex; align-items: baseline; gap: 9px;
  min-height: 44px; margin-bottom: 24px; padding-bottom: 14px;
  color: var(--slate); border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.45; letter-spacing: .01em;
}
.service-num .n { color: var(--action-blue); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500; letter-spacing: .06em; }
.service-title { margin-bottom: 11px; color: var(--deep-navy); font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.008em; }
.service-desc { margin-bottom: 26px; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.72; }
.meth { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.service-card:not(.service-callout):focus-within .meth span {
  background: rgba(20,58,110,.08); border-color: rgba(20,58,110,.28);
}
.service-callout {
  justify-content: center; padding-inline: 32px;
  color: var(--paper-white); background: var(--deep-navy);
}
.callout-inner { width: 100%; padding: 20px 0; }
.callout-label {
  margin-bottom: 14px; color: var(--on-dark-soft); font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}
.callout-text { margin-bottom: 26px; color: rgba(255,255,255,.82); font-size: var(--fs-sm); line-height: 1.72; }
.service-callout .engagement-cta { min-width: 0; width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .service-card:not(.service-callout):hover {
    z-index: 1; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .service-card:not(.service-callout):hover::after { transform: scaleX(1); }
  .service-card:not(.service-callout):hover .meth span {
    background: rgba(20,58,110,.08); border-color: rgba(20,58,110,.28);
  }
  .service-callout:hover { background: var(--win-navy); }
}

/* ---------- Why WIN ---------- */
#why { color: var(--text-main); background: var(--surface-soft); }
#why .section-eyebrow { color: var(--win-navy); }
#why .section-headline { color: var(--deep-navy); }
.pov-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: clamp(36px,4.5vw,60px); }
.pov-grid .section-headline { max-width: 100%; margin-bottom: 0; }
.pov-body { padding: 36px; background: var(--paper-white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pov-body p { max-width: 62ch; margin-bottom: 22px; color: var(--text-muted); font-size: var(--fs-md); line-height: 1.8; }
.pov-body p:last-child { margin-bottom: 0; }
.pov-body .k { color: var(--deep-navy); font-weight: 600; }
.pov-body em { font-style: normal; box-shadow: inset 0 -.48em 0 rgba(36,92,159,.11); }

/* ---------- Approach (left-aligned, matching every other page) ---------- */
#process { background: var(--surface-soft); }
#process .section-headline { color: var(--deep-navy); }
.approach-intro { max-width: 62ch; }
.process-steps {
  position: relative; display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0 32px; margin-top: clamp(48px,5vw,68px);
}
/* The connector starts at the centre of dot 1 and terminates at the centre of
   dot 4, rather than running off the end of the row. For a 4-column grid with a
   32px gap and a 54px dot, the right inset resolves to 25% - 51px. */
.process-steps::before {
  content: ''; position: absolute; top: 26px; left: 27px; right: calc(25% - 51px);
  z-index: 0; height: var(--rule);
  background: linear-gradient(90deg,var(--win-navy),rgba(20,58,110,.18));
  background-size: 200% 100%; opacity: .45;
  animation: controlLine 6s linear infinite;
}
@keyframes controlLine { to { background-position: -200% 0; } }
.process-step { position: relative; z-index: 1; }
.process-dot {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-bottom: 22px;
  color: var(--paper-white); background: var(--win-navy);
  border-radius: var(--radius); outline: 8px solid var(--surface-soft);
}
.process-dot span { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500; }
.process-title {
  margin-bottom: 8px; color: var(--deep-navy); font-family: var(--font-head);
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.008em;
}
.process-desc { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.72; }

/* ---------- Contact ---------- */
#contact { background: var(--surface-soft); }
.contact-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; gap: clamp(40px,5vw,72px); }
.contact-intro { margin-bottom: 36px; max-width: none; }
.contact-info-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 22px; }
.contact-info-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; background: var(--win-navy); border-radius: var(--radius); }
.contact-info-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--paper-white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-info-label { margin-bottom: 3px; color: var(--slate); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; }
.contact-info-value { color: var(--deep-navy); font-size: var(--fs-base); font-weight: 600; }
.contact-info-value a { color: var(--deep-navy); border-bottom: 1px solid var(--line-strong); }
.contact-info-value a:hover { color: var(--action-blue); border-color: var(--action-blue); }
.contact-form-card { padding: 34px; background: var(--paper-white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 7px; color: var(--deep-navy); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em; }
.field-note { float: right; color: var(--slate); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .01em; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  color: var(--text-main); background: #FCFDFE;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  outline: 0; font-size: var(--fs-base);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: var(--paper-white); border-color: var(--action-blue); box-shadow: 0 0 0 3px rgba(36,92,159,.12); }
.form-group textarea { min-height: 128px; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-submit {
  width: 100%; min-height: var(--cta-h); margin-top: 6px; padding: 0 24px;
  color: var(--paper-white); background: var(--win-navy);
  border: 1px solid var(--win-navy); border-radius: var(--radius);
  cursor: pointer; font-family: var(--font-head); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .09em; word-spacing: .18em;
  text-transform: uppercase; transition: background .2s ease, border-color .2s ease;
}
.form-submit:hover { background: var(--action-blue); border-color: var(--action-blue); }
.honeypot { display: none; }

/* ---------- Utility pages ---------- */
.legal-content { max-width: 76ch; }
.legal-date { max-width: none; margin-bottom: 28px; }
.legal-copy { display: flex; flex-direction: column; gap: 20px; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.82; }
.legal-copy strong { color: var(--deep-navy); }
.inline-link { color: var(--win-navy); border-bottom: 1px solid var(--line-strong); }
.inline-link:hover { color: var(--action-blue); border-color: var(--action-blue); }
.confirmation-section { background: var(--surface-soft); }
.confirmation-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 30px 32px; background: var(--paper-white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.confirmation-panel p { color: var(--text-muted); font-size: var(--fs-base); }

/* ---------- Closing CTA ---------- */
.closing-cta { padding: clamp(56px,5.5vw,80px) var(--page-gutter); color: var(--paper-white); background: linear-gradient(118deg,#071A34 0%,var(--deep-navy) 62%,var(--win-navy) 100%); }
.closing-cta-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-w); margin: 0 auto; gap: 48px; }
.closing-cta .section-eyebrow { color: var(--on-dark-soft); }
.closing-cta h2 { max-width: 24ch; color: var(--paper-white); font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 700; line-height: 1.16; letter-spacing: -.018em; }
.closing-cta p { max-width: 56ch; margin-top: 12px; color: rgba(255,255,255,.78); font-size: var(--fs-base); }
.closing-cta .engagement-cta { flex: none; }

/* ---------- Footer ---------- */
footer { padding: 48px var(--page-gutter) 32px; color: var(--deep-navy); background: var(--paper-white); border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; max-width: var(--max-w); margin: 0 auto; gap: 26px 40px; }
.footer-logo img { width: auto; height: 42px; }
.footer-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px; list-style: none; }
.footer-links a { color: var(--win-navy); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--action-blue); }
.footer-email { color: var(--win-navy); border-bottom: 1px solid var(--line-strong); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; }
.footer-email:hover { color: var(--action-blue); border-color: var(--action-blue); }
.footer-copy { grid-column: 1 / -1; padding-top: 24px; color: var(--slate); border-top: 1px solid var(--line); font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: .01em; }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--action-blue); outline-offset: 3px; border-radius: var(--radius); }
.hero-actions a:focus-visible, .service-callout a:focus-visible, .closing-cta a:focus-visible { outline-color: var(--paper-white); }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .nav { padding-inline: var(--page-gutter); }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .strip-inner { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .strip-label { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .process-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 32px; }
  .process-steps::before { display: none; }
  .certifications-grid { grid-template-columns: 1fr; }
  .certification-issuer { min-height: 0; }
  .proof-cols { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 900px) {
  :root { --nav-h: 72px; --hero-cycle: 20s; }
  html { scroll-padding-top: 88px; }
  .nav-logo img { height: 40px; }
  #hero { min-height: auto; padding: 108px var(--page-gutter) 72px; }
  .hero-cinematic { --hero-scene-opacity: .88; inset: 0; height: auto; }
  .hero-cinematic img { object-position: 74% center; animation-name: heroSceneCrossfadeMobile, cinematicDrift; animation-duration: var(--hero-cycle), 20s; }
  .hero-cinematic .hero-scene-aviation { animation-delay: calc(var(--hero-cycle) / -2), 0s; }
  .msg { animation-name: msgCycleMobile; animation-duration: var(--hero-cycle); }
  .msg-stack.is-measured { animation-name: msgStackHMobile; }
  .hero-cinematic-scrim {
    background:
      linear-gradient(90deg,rgba(5,19,39,.96) 0%,rgba(5,19,39,.86) 55%,rgba(5,19,39,.77) 100%),
      linear-gradient(0deg,rgba(10,36,71,1) 0%,rgba(10,36,71,.94) 12%,rgba(5,19,39,.40) 34%,rgba(5,19,39,.08) 65%,rgba(5,19,39,.42) 100%);
  }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-left { max-width: 100%; }
  .hero-cred { padding: 20px 22px 18px; }
  .hero-headline { max-width: 100%; }
  .hero-sub { max-width: 100%; font-size: var(--fs-base); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .engagement-cta, .hero-actions .btn-ghost { width: 100%; min-width: 0; }
  .page-hero { min-height: 260px; padding: 112px var(--page-gutter) 52px; }
  .page-hero h1 { max-width: 100%; }
  .page-hero .page-hero-sub { font-size: var(--fs-base); }
  .section-headline, .band-h { max-width: 100%; }
  /* On a phone the copy fills the column, so there is no safe zone for the
     decoration to live in. It is removed rather than masked. */
  .band-motion, .band-scrim { display: none; }
  .services-header { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .pov-grid { grid-template-columns: 1fr; gap: 26px; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .closing-cta-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .closing-cta h2 { max-width: 100%; }
  .closing-cta .engagement-cta { width: 100%; min-width: 0; }
  .footer-inner { grid-template-columns: 1fr; justify-items: start; gap: 22px; }
  .footer-links { justify-content: flex-start; }
  .footer-copy { grid-column: 1; width: 100%; }
}
@media (max-width: 680px) {
  .strip-inner { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 30px 24px; }
  .service-num { min-height: 0; }
  .process-steps { grid-template-columns: 1fr; gap: 32px; }
  .certification-meta { grid-template-columns: 1fr; gap: 10px; }
  .contact-form-card, .pov-body, .certification-card { padding: 24px; }
  .proof-note { padding: 20px 22px; }
  .confirmation-panel { align-items: flex-start; flex-direction: column; padding: 26px 24px; }
  .confirmation-panel .btn-solid { width: 100%; min-width: 0; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .hero-cinematic { --hero-scene-opacity: .96; inset: 0; height: auto; }
  .hero-cinematic img { object-position: center top; transform: none; animation: heroSceneCrossfadeMobile var(--hero-cycle) linear infinite; will-change: opacity; }
  .hero-cinematic .hero-scene-aviation { animation-delay: calc(var(--hero-cycle) / -2); }
  .hero-cinematic-scrim {
    background:
      linear-gradient(90deg,rgba(5,19,39,.88) 0%,rgba(5,19,39,.72) 55%,rgba(5,19,39,.28) 100%),
      linear-gradient(0deg,rgba(10,36,71,1) 0%,rgba(10,36,71,.90) 14%,rgba(5,19,39,.26) 38%,rgba(5,19,39,.04) 70%,rgba(5,19,39,.18) 100%);
  }
  #hero > .hero-bg-lines { display: none; }
}
/* Motion off: one scene, one headline, nothing moving. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .hero-cinematic img, .hero-bg-lines, .page-hero::before, .page-hero::after,
  .process-steps::before, .gbar, .band-curve path, .msg { animation: none !important; }
  .hero-cinematic img { opacity: 0; transform: scale(1.035); }
  .hero-cinematic .hero-scene-electrical { opacity: var(--hero-scene-opacity); }
  .hero-cinematic .hero-scene-aviation { display: none; }
  .msg--a { opacity: 1; visibility: visible; }
  .msg--b { display: none; }
  .msg-stack.is-measured { height: auto !important; animation: none !important; }
  .gbar { opacity: 1; transform: scaleX(1); }
  .band-curve path { opacity: 1; stroke-dashoffset: 0; }
}

/* ---------- Print (SOQ / RFP reviewers print these pages) ---------- */
@media print {
  :root { --page-gutter: 0; }
  body { color: #000; background: #fff; font-size: 11pt; line-height: 1.45; }
  .nav, .mobile-menu, .hamburger, .skip-link, .hero-cinematic, .hero-bg-lines,
  .band-motion, .band-scrim, .services-strip, .closing-cta, .hero-actions,
  .service-callout .engagement-cta {
    display: none !important;
  }
  .page-hero::before, .page-hero::after { display: none !important; }
  /* Print both hero messages, stacked and static. */
  .msg-stack { display: block; height: auto !important; animation: none !important; }
  .msg { position: static; opacity: 1 !important; visibility: visible !important; animation: none !important; margin-bottom: 8pt; }
  section, .page-hero, .band { padding: 18pt 0 !important; background: #fff !important; color: #000 !important; }
  .page-hero h1, .section-headline, .band-h, .hero-headline, .certifications-heading,
  .certification-title, .service-title, .process-title { color: #000 !important; }
  .page-hero .section-eyebrow, .band .section-eyebrow, .hero-eyebrow { color: #444 !important; }
  .page-hero .page-hero-sub, .band-p, .hero-sub { color: #222 !important; }
  .hero-headline em { color: #444 !important; }
  .pov-body, .contact-form-card, .proof-note, .certification-card,
  .service-card, .confirmation-panel {
    background: #fff !important; border: 1px solid #999 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .service-callout, .certification-agency, .process-dot, .contact-info-icon {
    color: #000 !important; background: #fff !important; border: 1px solid #666 !important; outline: 0 !important;
  }
  .service-callout .callout-label, .service-callout .callout-text {
    color: #000 !important;
  }
  .certification-link[href]::after { content: " (" attr(href) ")"; font-size: 9pt; font-weight: 400; letter-spacing: 0; }
  .section-headline, .page-hero h1, .band-h, .hero-headline, .section-sub,
  .about-lede, .legal-content, .certifications-intro, .approach-intro,
  .pov-body p, .hero-sub, .band-p, .page-hero .page-hero-sub, .closing-cta h2 {
    max-width: 100% !important;
  }
  .services-grid, .certifications-grid, .proof-cols, .process-steps { display: block; }
  .service-card, .certification-card, .pcol, .process-step { page-break-inside: avoid; margin-bottom: 12pt; }
  footer { border-top: 1px solid #999; }
}