/* =========================================================
   BryTech — Design System
   One consistent type + color system, used everywhere.
   ========================================================= */

:root {
  /* Color */
  --navy-950: #0a1029;
  --navy-900: #0f1730;
  --navy-800: #142046;
  --navy-700: #1c2c5c;
  --blue-500: #3769da;
  --blue-400: #5b8bf0;
  --blue-100: #e8effd;
  --royal-600: #1b3fa8; /* duotone grade for hero footage */
  --brand-navy: #292f6d; /* navy sampled from the BryTech logo */
  --ink-900: #10131a;
  --slate-700: #384155;
  --slate-500: #647085;
  --muted-on-dark: #7b8699;  /* --slate-500 fails AA on every dark ground; 4.8:1 on navy, 5.1:1 on ink */
  --slate-300: #b9c2d1;
  --mist-50: #f5f7fb;
  --paper-0: #ffffff;
  --gold-500: #c9922b; /* sparing accent for a single strong CTA moment */
  --success-500: #1f9d63;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(15, 23, 48, 0.06), 0 8px 24px rgba(15, 23, 48, 0.08);
  --shadow-lift: 0 20px 45px rgba(10, 16, 41, 0.18);

  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--slate-700);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  color: var(--navy-900); font-weight: 700; line-height: 1.15;
  margin: 0 0 var(--space-3); letter-spacing: -0.01em;
  text-wrap: balance; /* even line lengths instead of a short last line */
}
p { margin: 0 0 var(--space-3); text-wrap: pretty; } /* no one-word orphan lines */
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-media { display: none; }
  .hero { background: var(--navy-950) center/cover no-repeat; }
  .hero:has(.hero-media--flag) { background-image: url("../img/hero-poster-duo.jpg"); }
  .hero:has(.hero-media--engineers) { background-image: url("../img/hero-poster-engineers-duo.jpg"); }
  .hero:has(.hero-media--cybersecurity) { background-image: url("../img/hero-poster-cybersecurity-duo.jpg"); }
  .hero:has(.hero-media--developer) { background-image: url("../img/hero-poster-developer-duo.jpg"); }
  .hero:has(.hero-media--ai) { background-image: url("../img/hero-poster-ai-duo.jpg"); }
  .hero:has(.hero-media--pentagon) { background-image: url("../img/section-pentagon-poster-duo.jpg"); }
  .hero:has(.hero-media--serverroom) { background-image: url("../img/hero-poster-serverroom-duo.jpg"); }
  .hero:has(.hero-media--datacenter3d) { background-image: url("../img/hero-poster-datacenter3d-duo.jpg"); }
  .hero:has(.hero-media--engineer) { background-image: url("../img/hero-poster-engineer-duo.jpg"); }
  .hero:has(.hero-media--dcroom) { background-image: url("../img/hero-poster-datacenterroom-duo.jpg"); }
  .section-media { display: none; }
  .section--media { background: var(--navy-900) url("../img/section-memorial-poster-duo.jpg") center/cover no-repeat; }
  .section--media-light { background: var(--mist-50) url("../img/section-pentagon-light-poster-duo.jpg") center/cover no-repeat; }
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-6) 0; }
.section--alt { background: var(--mist-50); }
.section--navy { background: var(--navy-900); color: var(--slate-300); }

/* Section with a video background: same duotone pipeline as the hero, but
   scrimmed harder because body copy sits on top of it, not just a headline. */
.section--media { position: relative; isolation: isolate; overflow: hidden; }
.section--media > .wrap { position: relative; z-index: 2; }
.section-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.section-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(8,13,33,0.88) 0%, rgba(10,16,41,0.5) 45%, rgba(8,13,33,0.9) 100%);
}
.section--media .stripe-card {
  background: rgba(10,16,41,0.62);
  border: 1px solid rgba(255,255,255,0.09);
}

/* Light variant: the footage stays royal-tinted but sits under a white wash,
   so it reads as a pale watermark and the section keeps its dark body text. */
.section--media-light {
  /* 20% taller than the default section rhythm, so the aerial has more room. */
  padding-block: 9.2rem;
}
/* With the wash this thin the aerial shows through at roughly #afb2bb, where
   slate-500 body copy falls to 2.3:1 and the blue eyebrow to 2.2:1. The darker
   slate and the brand navy put both back over 4.5:1. */
.section--media-light .muted,
.section--media-light p,
.section--media-light .section-head p { color: var(--slate-700); }
.section--media-light .eyebrow { color: var(--brand-navy); }
.section--media-light .section-media { }
/* Base offset is tuned for the memorial statue; the aerial reads centred. */
.section--media-datacenter .section-media { object-position: center 48%; }
/* Barely any royal tint here — the wash should read white, not blue-grey. */
.section--media-light .hero-tint { display: none; } /* tint baked into -duo footage */
.section--media-light .section-scrim {
  /* Flat wash, no gradient: even coverage top to bottom. Pure white rather
     than mist-50 so the section reads bright instead of blue-grey. */
  background: rgba(255,255,255,0.66);
}
.section--navy :is(h2, h3) { color: var(--paper-0); }
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: var(--space-2);
}
.section--navy .eyebrow { color: var(--blue-400); }
.section-head { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
/* Wider measure for headings that should hold one line on desktop. */
.section-head--wide { max-width: 900px; }
.section-head p { color: var(--slate-500); font-size: 1.05rem; }
.section--navy .section-head p { color: var(--slate-300); }
/* Body-copy block under a centred section head: centred as a block, but the
   text itself stays left-aligned so long prose is readable. */
.section-lede {
  max-width: 68ch;
  margin: calc(var(--space-6) * -1 + var(--space-2)) auto var(--space-5);
  color: var(--slate-700);
  font-size: 1.05rem;
  line-height: 1.7;
}

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  min-height: 44px;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }
/* Icons inside buttons inherit the label colour and sit on the text baseline. */
.btn .btn-icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn-primary { background: var(--paper-0); color: var(--navy-900); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-solid { background: var(--brand-navy); color: var(--paper-0); }
.btn-solid:hover { background: var(--navy-800); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--paper-0); border-color: rgba(255,255,255,0.5); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-ghost { background: transparent; color: var(--navy-900); border-color: var(--slate-300); }
.btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-500); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* No backdrop-filter here: it makes .site-header the containing block for
     position:fixed descendants, which collapsed the mobile menu panel to a
     sliver instead of filling the viewport. */
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(15,23,48,0.06);
}
.site-header .wrap { max-width: 1320px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 76px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; width: auto; height: 42px; }
@media (max-width: 720px) { .brand img { height: 34px; } }
/* Footer sits on ink-900: knock the navy logo out to white. */
.brand--invert { margin-bottom: 0.75rem; }
.brand--invert img { filter: brightness(0) invert(1); height: 54px; }
.nav-links { display: flex; align-items: center; gap: 1.25rem; font-weight: 600; font-size: 0.94rem; color: var(--slate-700); }
.nav-links a { padding: 0.4rem 0.1rem; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy-900); border-color: var(--blue-500); }
.nav-cta { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
/* Rule separates the utility/CTA group from the nav links, so the phone
   number does not read as a seventh nav item. */
.nav-cta::before {
  content: "";
  width: 1px; height: 22px;
  background: rgba(15,23,48,0.14);
  margin-right: var(--space-1);
}
.nav-cta .btn { flex: 0 0 auto; padding: 0.7rem 1.35rem; }
.nav-links { flex: 0 1 auto; }
/* In the header the phone is a text link, not a second pill: two outlined
   pills side by side competed with each other and ate the width the nav
   links needed. The pill is reserved for the one primary CTA. */
.nav-cta .btn-ghost {
  background: none;
  border-color: transparent;
  padding: 0.4rem 0.2rem;
  min-height: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--navy-900);
}
.nav-cta .btn-ghost:hover { color: var(--blue-500); border-color: transparent; }
.nav-toggle { display: none; }
.nav-links-cta { display: none; }
/* Measured: logo + 6 links + phone + CTA needs ~1280px with Platforms in the
   row. Below 1360 the row
   must collapse to the menu button, or the CTAs get crushed and wrap. */
@media (max-width: 1360px) {
  .nav-links { position: fixed; inset: 72px 0 0 0; background: var(--paper-0); flex-direction: column; align-items: flex-start; padding: var(--space-5) var(--space-4); gap: var(--space-4); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: 0.18s ease; overflow-y: auto; }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { font-size: 1.05rem; }
  .nav-links-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%; margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid rgba(15,23,48,0.08); }
  .nav-links-cta .btn { justify-content: center; }
  .nav-links-cta .btn-ghost { color: var(--navy-900); border-color: var(--slate-300); background: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--slate-300); background: none; }
  .nav-cta .btn-ghost, .nav-cta .btn-solid, .nav-cta::before { display: none; }
  .site-header .wrap { height: 72px; }
}

/* ---------- Hero (video background) ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate; /* keep hero blend layers off the rest of the page */
  background: var(--navy-950);
  color: var(--paper-0);
}
.hero--compact { min-height: 46vh; }

/* Footage is desaturated, then multiplied with royal blue so any clip
   resolves to the same deep-blue duotone as the rest of the system. */
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Per-clip framing and exposure: each source grades differently, so the
   duotone stays consistent even when the footage does not. */
.hero-media--flag {
  /* Nudge the flag right so it lands beside the headline, not under it. */
  transform: scale(1.2) translateX(15%);
}
.hero-media--engineers {
  transform: scale(1.08) translateX(8%);
}
/* Rendered racks: no subject to dodge, so no shift — just lift the exposure. */
.hero-media--datacenter3d { }
.hero-media--serverroom {
  /* Subjects sit centre-left; nudge right so they clear the headline. */
  transform: scale(1.1) translateX(11%);
}
.hero-media--pentagon {
  /* Building sits high in frame; pull it down behind the copy, not above it. */
  object-position: center 38%;
}
/* The blue duotone is baked into the graded footage and posters by
   tools/grade-media.sh. A live multiply layer on top of already-graded
   footage multiplied the tint twice and crushed the picture to near-black
   (measured RGB(4,11,30) before this layer, ~RGB(0,3,20) after), which is why
   the video was not readable. It also re-blended the whole hero on every
   scroll frame. Baked grade only. */
.hero-tint { display: none; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(8,13,33,0.95) 4%, rgba(10,16,41,0.72) 38%, rgba(12,22,58,0.12) 78%),
    linear-gradient(to top, rgba(8,13,33,0.68) 0%, rgba(8,13,33,0) 38%);
}
/* Faint blue lift on the open right side so the frame does not read flat. */
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 78% 30%, rgba(91,139,240,0.22) 0%, rgba(91,139,240,0) 70%);
  
  pointer-events: none;
}
/* ---------- Scroll cue: a signal pulse running down a fiber ----------
   The home hero fills the viewport, so on load there is no visual evidence
   anything follows it. This is the affordance that says "keep going": a
   hairline strand carrying a pulse of light, echoing the fiber runs BryTech
   installs rather than borrowing the usual bouncing chevron.

   Three layers, deliberately on different clocks so the motion never reads
   as a mechanical loop: the strand itself, a slow shimmer sweeping it, and
   the pulse — a comet head with a short wake — that blooms as it lands.
   Transform/opacity only, so the whole thing stays on the compositor and
   costs nothing during scroll. */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  width: 1px; height: 82px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}
/* The strand: emerges from and dissolves into nothing at both ends. */
.scroll-cue-rail {
  position: absolute; inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.20) 24%,
    rgba(255,255,255,0.20) 76%,
    rgba(255,255,255,0) 100%);
}
/* Shimmer: a slow highlight travelling the strand, off-tempo from the pulse. */
.scroll-cue-rail::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 36%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
  animation: cue-shimmer 3.9s cubic-bezier(.4,0,.5,1) infinite;
}
/* The pulse: a bright head trailing a short wake of its own light. */
.scroll-cue-pulse {
  position: absolute; left: 50%; top: 0;
  width: 2px; height: 28px;
  border-radius: 2px;
  background: linear-gradient(to bottom, rgba(91,139,240,0), rgba(160,192,255,0.85));
  animation: cue-pulse 2.9s cubic-bezier(.5,.04,.3,1) infinite;
}
.scroll-cue-pulse::after {
  content: "";
  position: absolute; left: 50%; bottom: -3px;
  width: 9px; height: 7px;
  transform: translateX(-50%);
  background: var(--paper-0);
  /* Downward chevron head; the wake above reads as its light trail. */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  /* drop-shadow follows the clipped alpha, so the glow hugs the triangle --
     box-shadow would halo the untrimmed box instead. */
  filter: drop-shadow(0 0 5px rgba(160,192,255,0.95)) drop-shadow(0 0 13px rgba(91,139,240,0.65));
}
/* Landing bloom: the light pooling where the pulse arrives, hinting at depth. */
.scroll-cue::after {
  content: "";
  position: absolute; left: 50%; bottom: -7px;
  width: 44px; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(91,139,240,0.4) 0%, rgba(91,139,240,0) 70%);
  animation: cue-bloom 2.9s cubic-bezier(.5,.04,.3,1) infinite;
}
@keyframes cue-shimmer {
  0%   { transform: translateY(-150%); opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(320%); opacity: 0; }
}
@keyframes cue-pulse {
  0%   { transform: translate(-50%, -32px); opacity: 0; }
  10%  { opacity: 1; }
  55%  { opacity: 1; }
  /* Lands exactly at the foot of the strand and is absorbed there -- travel
     any further and the head detaches, floating in empty space below it. */
  66%  { transform: translate(-50%, 52px); opacity: 0; }
  100% { transform: translate(-50%, 52px); opacity: 0; }
}
@keyframes cue-bloom {
  0%, 45%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  66%       { opacity: 1; transform: translateX(-50%) scale(1); }
  80%, 100% { opacity: 0; transform: translateX(-50%) scale(1.15); }
}
/* Reduced motion: keep the affordance, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-rail::after, .scroll-cue::after { display: none; }
  .scroll-cue-pulse {
    animation: none;
    transform: translate(-50%, 54px);
    opacity: 1;
  }
}

.hero-content { position: relative; z-index: 2; padding: var(--space-7) 0; }
.hero-content .eyebrow { color: var(--blue-400); }
.hero h1 { color: var(--paper-0); font-size: clamp(2.1rem, 4.6vw, 3.6rem); max-width: 16ch; }
.hero .lede { font-size: 1.15rem; color: var(--slate-300); max-width: 46ch; margin-bottom: var(--space-5); }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Stats ride 25% closer to the copy above them, freeing the foot of the hero. */
.hero-proof { margin-top: calc(var(--space-7) * 0.75); display: flex; gap: var(--space-6); flex-wrap: wrap; }
/* The hero centres its content, so trimming the margin above only converts
   half of it into space below. Heroes carrying the cue also reserve room at
   the foot, so the strand never crowds the last line of copy. */
.hero:has(.scroll-cue) .hero-content { padding-bottom: calc(var(--space-7) + var(--space-6)); }
.hero-proof .stat { min-width: 0; } /* let long values wrap instead of overflowing the wrap padding */
.hero-proof .stat b { display: block; font-size: clamp(1.1rem, 3.4vw, 1.6rem); color: var(--paper-0); }
.hero-proof .stat span { font-size: 0.85rem; color: var(--slate-300); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper-0);
  border: 1px solid rgba(15,23,48,0.08);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  height: 100%;
}
.card :is(h2, h3) { font-size: 1.1rem; margin-bottom: var(--space-2); }
.card p { color: var(--slate-500); margin-bottom: 0; font-size: 0.96rem; }
/* Bare icon, no container shape — the mark carries the weight on its own. */
.card .icon { display: block; margin-bottom: var(--space-3); }
.card .icon svg {
  width: 38px; height: 38px; display: block;
  fill: none; stroke: var(--brand-navy); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.stripe-card { background: var(--navy-900); color: var(--slate-300); border-radius: var(--radius-lg); padding: var(--space-6); }
/* Cards carrying a star row become a column so the stars pin to the bottom
   edge regardless of how much copy sits above them. */
.stripe-card:has(.star-row) { display: flex; flex-direction: column; }
.star-row { display: flex; gap: 0.4rem; margin-top: auto; padding-top: var(--space-5); }
.star-row svg { width: 22px; height: 22px; fill: var(--paper-0); flex: none; }
/* Tile icon — bare mark, no container shape. */
/* No chip behind the icon — the mark itself carries the weight. */
.tile-icon {
  display: block;
  margin-bottom: var(--space-3);
}
.tile-icon svg {
  width: 38px; height: 38px;
  display: block;
  fill: none;
  stroke: var(--blue-400);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stripe-card :is(h2, h3) { color: var(--paper-0); }

/* ---------- Badges / partner wordmarks ---------- */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.badge {
  border: 1px solid rgba(15,23,48,0.12);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-800);
  background: var(--paper-0);
}
.section--navy .badge { background: rgba(255,255,255,0.06); color: var(--paper-0); border-color: rgba(255,255,255,0.16); }

/* ---------- Certifications strip ---------- */
.cert-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cert-pill {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--mist-50); border: 1px solid rgba(15,23,48,0.08);
  border-radius: var(--radius-md); padding: 0.9rem 1.1rem; flex: 1 1 220px;
}
.cert-pill .check {
  width: 21px; height: 21px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--success-500);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cert-pill strong { display: block; font-size: 0.92rem; color: var(--navy-900); }
.cert-pill span { font-size: 0.82rem; color: var(--slate-500); }

/* ---------- Tabs (Infrastructure / Consulting / Technology) ---------- */
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid rgba(15,23,48,0.1); margin-bottom: var(--space-5); flex-wrap: wrap; }
.tab-btn {
  background: none; border: none; padding: 0.9rem 0.3rem; margin-right: var(--space-5);
  font-weight: 700; color: var(--slate-500); border-bottom: 2px solid transparent; cursor: pointer; font-size: 0.98rem;
}
.tab-btn[aria-selected="true"] { color: var(--navy-900); border-color: var(--blue-500); }
.tab-btn:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }
.tab-panel[hidden] { display: none; }

/* ---------- Process ---------- */
/* Four stages read left to right. A connector runs behind the icon row and
   draws itself once, so the group reads as a sequence rather than four cards. */
.process {
  position: relative;
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}
.process::before,
.process::after {
  content: "";
  position: absolute;
  top: 25px; /* centre of the 50px icon row */
  height: 2px;
  /* Icons sit at the start of each column, not centred, so the run is measured
     from the first icon's centre (25px) to the last icon's centre
     (75% + 0.75 × gap + 25px), then inset 34px at each end to clear the marks. */
  left: 59px;
  right: calc(25% - 15px);
}
.process::before { background: rgba(15,23,48,0.12); }
.process::after {
  background: var(--brand-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s cubic-bezier(0.4, 0.05, 0.2, 1) 0.15s;
}
.process.is-running::after { transform: scaleX(1); }

.process li {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.process.is-running li { opacity: 1; transform: none; }
.process.is-running li:nth-child(1) { transition-delay: 0.1s; }
.process.is-running li:nth-child(2) { transition-delay: 0.5s; }
.process.is-running li:nth-child(3) { transition-delay: 0.9s; }
.process.is-running li:nth-child(4) { transition-delay: 1.3s; }

.p-icon {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  margin-bottom: var(--space-3);
  background: var(--mist-50); /* masks the connector behind the mark */
}
.p-icon svg {
  width: 40px; height: 40px;
  fill: none; stroke: var(--slate-300); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.45s ease, transform 0.45s ease;
}
.process.is-running li:nth-child(1) .p-icon svg { transition-delay: 0.35s; }
.process.is-running li:nth-child(2) .p-icon svg { transition-delay: 0.75s; }
.process.is-running li:nth-child(3) .p-icon svg { transition-delay: 1.15s; }
.process.is-running li:nth-child(4) .p-icon svg { transition-delay: 1.55s; }
.process.is-running .p-icon svg { stroke: var(--brand-navy); transform: scale(1.06); }

.process li :is(h2, h3) {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--brand-navy); margin-bottom: var(--space-2);
}
.process li p { color: var(--slate-500); font-size: 0.95rem; margin-bottom: 0; }

/* Stack vertically on narrow screens; the connector becomes the left rail. */
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: var(--space-5); }
  .process::before, .process::after { display: none; }
  .process li { padding-left: 74px; }
  .p-icon { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  /* One segment per step, so the rail never depends on copy length. */
  .process li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 24px; top: 59px;
    width: 2px; bottom: calc(var(--space-5) * -1 + 9px);
    background: var(--brand-navy);
    transform: scaleY(0); transform-origin: top center;
    transition: transform 0.5s ease;
  }
  .process.is-running li:nth-child(1)::after { transition-delay: 0.3s; }
  .process.is-running li:nth-child(2)::after { transition-delay: 0.7s; }
  .process.is-running li:nth-child(3)::after { transition-delay: 1.1s; }
  .process.is-running li::after { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* No sequence animation — everything is simply present and coloured. */
  .process li { opacity: 1; transform: none; transition: none; }
  .process::after, .process li::after { transform: none !important; transition: none; }
  .process .p-icon svg { stroke: var(--brand-navy); transition: none; }
}

/* ---------- Forms ---------- */
.form-card { background: var(--paper-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); border: 1px solid rgba(15,23,48,0.08); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.field { margin-bottom: var(--space-3); }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy-900); margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--slate-300); font-family: inherit; font-size: 0.95rem; color: var(--navy-900);
  background: var(--paper-0);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--blue-400); outline-offset: 1px; border-color: var(--blue-500); }
.field small { color: var(--slate-500); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: var(--slate-300); padding: var(--space-7) 0 var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--space-5); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .footer-h { color: var(--paper-0); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3); }
.site-footer a:hover { color: var(--paper-0); }
.site-footer li { margin-bottom: 0.55rem; font-size: 0.92rem; }
.footer-bottom { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: 0.82rem; color: var(--muted-on-dark); }

/* ---------- Contact page intro ---------- */
/* The hero copy rises in on load, then the page hands off to the form.
   Everything is gated behind .js-intro, so with JS off the text just shows. */
.js-intro .hero--intro .intro-item { opacity: 0; }
.js-intro .hero--intro .intro-word { display: inline-block; opacity: 0; will-change: transform, opacity; }

.js-intro .hero--intro.is-intro-ready .eyebrow.intro-item {
  animation: intro-rise 0.6s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
.js-intro .hero--intro.is-intro-ready .intro-words { opacity: 1; }
.js-intro .hero--intro.is-intro-ready .intro-word {
  animation: intro-word 0.72s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
  animation-delay: calc(0.18s + var(--i) * 0.07s);
}
.js-intro .hero--intro.is-intro-ready .lede.intro-item {
  animation: intro-rise 0.7s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
  animation-delay: 0.62s;
}
/* Accent rule sweeps out under the eyebrow as the headline lands. */
.js-intro .hero--intro.is-intro-ready .hero-content::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin-top: var(--space-4);
  background: linear-gradient(90deg, var(--blue-400), rgba(91,139,240,0));
  animation: intro-rule 0.9s cubic-bezier(0.22, 0.9, 0.28, 1) 0.72s forwards;
}
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes intro-word {
  from { opacity: 0; transform: translateY(22px) rotate(1.2deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes intro-rule {
  from { width: 0; }
  to   { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No entrance, no auto-scroll (the script checks this too) — text just sits there. */
  .js-intro .hero--intro .intro-item,
  .js-intro .hero--intro .intro-word { opacity: 1; animation: none; }
  .js-intro .hero--intro.is-intro-ready .hero-content::after { display: none; }
}

/* ---------- Section sub-nav (Government) ---------- */
/* Sits under the sticky header, so its offset must match the header height.
   Horizontal scroll on narrow screens rather than wrapping to two rows. */
.subnav {
  position: sticky; top: 76px; z-index: 40;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid rgba(15,23,48,0.08);
}
.subnav .wrap { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a {
  white-space: nowrap;
  padding: 0.95rem 0.1rem;
  font-size: 0.9rem; font-weight: 600;
  color: var(--slate-700);
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--navy-900); border-color: var(--blue-500); }
.subnav a.is-current { color: var(--navy-900); border-color: var(--brand-navy); }
.subnav a[data-download] { margin-left: auto; color: var(--brand-navy); }
/* The way back up — a pill at the top left of the page body, first thing after
   the sub-nav, per the client's placement. Left arrow, reads as "return". */
.back-pivot {
  display: flex; width: fit-content; align-items: center; gap: 0.6rem;
  /* pulled high against the section top; the compensating bottom margin keeps
     the content after it exactly where it was, so nothing drops below the fold */
  margin: calc(var(--space-8) * -1 + 2rem) 0 calc(var(--space-4) * -1 + 2.25rem);
  padding: 0.7rem 1.4rem; border: 1.5px solid rgba(41,47,109,0.35);
  border-radius: 999px; background: var(--paper-0);
  font-size: 0.95rem; font-weight: 600; color: var(--brand-navy);
}
.back-pivot:hover { background: var(--brand-navy); color: var(--paper-0); border-color: var(--brand-navy); }
.back-pivot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1270px) { .subnav { top: 72px; } }
/* Fade the right edge on narrow screens so the overflow reads as scrollable. */
@media (max-width: 860px) {
  .subnav { position: sticky; }
  .subnav .wrap { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 82%, transparent 100%); }
}
@media (max-width: 720px) { .subnav a[data-download] { margin-left: 0; } }
/* Anchor targets clear both sticky bars. */
[id] { scroll-margin-top: 140px; }

/* ---------- Checklist ---------- */
.list-check { display: grid; gap: 0.7rem; }
.list-check li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.96rem; }
.list-check svg {
  width: 19px; height: 19px; flex: none; margin-top: 0.12rem;
  fill: none; stroke: var(--success-500); stroke-width: 2.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.section--navy .list-check li { color: var(--slate-300); }
.section--navy .list-check svg { stroke: var(--blue-400); }

/* ---------- Fact sheet data blocks ---------- */
.fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fact-grid { grid-template-columns: 1fr; } }
.fact {
  background: var(--paper-0);
  border: 1px solid rgba(15,23,48,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.fact dt {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--slate-500); margin-bottom: 0.4rem;
}
.fact dd {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--navy-900);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.fact dd small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--slate-500); margin-top: 0.25rem; letter-spacing: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.data-table caption { text-align: left; font-weight: 700; color: var(--navy-900); margin-bottom: var(--space-3); }
.data-table th {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--slate-500); padding: 0 0 0.6rem; border-bottom: 1px solid rgba(15,23,48,0.12);
}
.data-table td { padding: 0.62rem 0; border-bottom: 1px solid rgba(15,23,48,0.07); color: var(--slate-700); }
.data-table td:first-child {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy-900);
  width: 7.5rem; white-space: nowrap;
}
.table-scroll { overflow-x: auto; }

/* ---------- Past-performance cards ---------- */
.pp-card {
  background: var(--paper-0);
  border: 1px solid rgba(15,23,48,0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex; flex-direction: column; height: 100%;
}
.pp-value {
  font-size: 2rem; font-weight: 800; color: var(--brand-navy);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pp-role {
  display: inline-block; margin: 0.55rem 0 var(--space-3);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--slate-500);
}
.pp-card :is(h2, h3) { font-size: 1rem; margin-bottom: var(--space-2); }
.pp-card p { font-size: 0.92rem; color: var(--slate-500); margin-bottom: 0; }

/* ---------- Download card ---------- */
.download-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5);
  align-items: center;
  background: var(--navy-900); color: var(--slate-300);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
}
@media (max-width: 820px) {
  .download-card { grid-template-columns: 1fr; text-align: left; gap: var(--space-4); }
}
.download-card :is(h2, h3) { color: var(--paper-0); font-size: 1.15rem; margin-bottom: 0.35rem; }
.download-card p { margin-bottom: 0; font-size: 0.93rem; }
.download-card .doc-mark {
  width: 62px; height: 78px; border-radius: 8px;
  background: linear-gradient(160deg, var(--blue-500), var(--brand-navy));
  display: grid; place-items: center;
  color: var(--paper-0); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  box-shadow: var(--shadow-lift);
}
.download-meta { font-size: 0.8rem; color: var(--muted-on-dark); margin-top: var(--space-2); }

/* ---------- Contact form: sending + sent states ---------- */
.form-submit { position: relative; }
.form-submit .submit-spinner {
  width: 18px; height: 18px; margin-left: 0.55rem;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--paper-0);
  border-radius: 50%;
  display: none;
  animation: submit-spin 0.7s linear infinite;
}
.form-submit.is-sending { pointer-events: none; }
.form-submit.is-sending .submit-spinner { display: inline-block; }
@keyframes submit-spin { to { transform: rotate(360deg); } }

/* The card fades and lifts out; the receipt fades and settles in. */
#contact-form { transition: opacity 0.35s ease, transform 0.35s ease; }
#contact-form.is-leaving { opacity: 0; transform: translateY(-8px); }

.form-sent {
  background: var(--paper-0);
  border: 1px solid rgba(15,23,48,0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.form-sent[hidden] { display: none; }
.form-sent :is(h2, h3) { font-size: 1.35rem; margin-bottom: var(--space-2); }
.form-sent p { color: var(--slate-500); max-width: 42ch; margin-inline: auto; }
.form-sent .sent-meta { font-size: 0.85rem; margin-top: var(--space-3); }
.form-sent .btn { margin-top: var(--space-4); }

/* The send sequence: the note flies off along a drawn trail, the trail snaps
   back into a ring, the tick lands, and two soft pulses radiate out. */
.sent-stage {
  position: relative;
  width: 260px; height: 130px;
  margin: 0 auto var(--space-4);
}
.sent-trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-line {
  fill: none; stroke: var(--blue-400); stroke-width: 2.4;
  stroke-linecap: round; stroke-dasharray: 4 9;
  stroke-dashoffset: 190;
  opacity: 0;
}
.sent-plane {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  offset-path: path("M20 108 C 78 108, 120 78, 168 30");
  offset-distance: 0%;
  offset-rotate: auto;
  opacity: 0;
}
.sent-plane svg {
  width: 30px; height: 30px;
  fill: none; stroke: var(--brand-navy); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sent-check {
  position: absolute; left: 50%; top: 50%;
  width: 78px; height: 78px;
  margin: -39px 0 0 -39px;
}
.sent-check circle, .sent-check path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sent-ring {
  stroke: var(--success-500); stroke-width: 3;
  stroke-dasharray: 195; stroke-dashoffset: 195;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.sent-tick {
  stroke: var(--success-500); stroke-width: 4.5;
  stroke-dasharray: 45; stroke-dashoffset: 45;
}
.sent-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%;
  border: 2px solid var(--success-500);
  opacity: 0;
}

/* --- the timeline --- */
.form-sent.is-playing .trail-line { animation: trail-draw 0.62s ease-out 0.05s forwards; }
.form-sent.is-playing .sent-plane { animation: plane-fly 0.72s cubic-bezier(0.45,0,0.25,1) 0.05s forwards; }
.form-sent.is-playing .sent-ring  { animation: draw-ring 0.5s cubic-bezier(0.4,0,0.2,1) 0.7s forwards; }
.form-sent.is-playing .sent-tick  { animation: draw-tick 0.34s cubic-bezier(0.4,0,0.2,1) 1.12s forwards; }
.form-sent.is-playing .sent-pulse { animation: pulse-out 1s ease-out 1.18s forwards; }
.form-sent.is-playing .sent-pulse--2 { animation-delay: 1.42s; }
.form-sent.is-playing :is(h2, h3) { animation: sent-rise 0.45s ease 1.2s both; }
.form-sent.is-playing p { animation: sent-rise 0.45s ease 1.34s both; }
.form-sent.is-playing .btn { animation: sent-rise 0.45s ease 1.48s both; }

@keyframes trail-draw {
  0%   { opacity: 0; stroke-dashoffset: 190; }
  15%  { opacity: 1; }
  70%  { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes plane-fly {
  0%   { offset-distance: 0%;   opacity: 0; transform: scale(0.7); }
  12%  { opacity: 1; transform: scale(1); }
  78%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; transform: scale(0.72); }
}
@keyframes draw-ring { to { stroke-dashoffset: 0; } }
@keyframes draw-tick { to { stroke-dashoffset: 0; } }
@keyframes pulse-out {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.9); }
}
@keyframes sent-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .form-submit .submit-spinner { animation: none; }
  #contact-form { transition: none; }
  .form-sent .sent-ring, .form-sent .sent-tick { stroke-dashoffset: 0; }
  .form-sent .sent-plane, .form-sent .sent-trail, .form-sent .sent-pulse { display: none; }
  .form-sent .sent-stage { height: 90px; }
  .form-sent.is-playing .sent-ring,
  .form-sent.is-playing .sent-tick,
  .form-sent.is-playing .trail-line,
  .form-sent.is-playing .sent-plane,
  .form-sent.is-playing .sent-pulse,
  .form-sent.is-playing :is(h2, h3),
  .form-sent.is-playing p,
  .form-sent.is-playing .btn { animation: none; }
}

/* ---------- Header search ---------- */
.nav-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 0; background: none; cursor: pointer;
  border-radius: 50%;
  color: var(--navy-900);
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-search-toggle svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-search-toggle:hover { background: var(--blue-100); color: var(--brand-navy); }
.nav-search-toggle:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* Expanded state: the field takes over the whole header row. */
.site-search {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--paper-0);
  z-index: 60; /* above the CTA and the nav */
  padding: 0 max(var(--space-4), calc((100% - var(--container)) / 2 + var(--space-4)));
}
.site-search[hidden] { display: none; }
.site-search .search-icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: var(--slate-500); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.search-input {
  flex: 1; min-width: 0;
  border: 0; background: none;
  font: inherit; font-size: 1.15rem; color: var(--navy-900);
  padding: 0.6rem 0;
}
.search-input::placeholder { color: var(--slate-500); }
.search-input:focus { outline: none; }
.search-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 0; background: none; cursor: pointer; border-radius: 50%;
  color: var(--slate-500);
}
.search-close svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.search-close:hover { background: var(--mist-50); color: var(--navy-900); }
.search-close:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.search-results {
  position: absolute; top: 100%;
  left: max(var(--space-4), calc((100% - var(--container)) / 2 + var(--space-4)));
  right: max(var(--space-4), calc((100% - var(--container)) / 2 + var(--space-4)));
  list-style: none;
  background: var(--paper-0);
  border: 1px solid rgba(15,23,48,0.1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 60vh; overflow-y: auto;
  padding: var(--space-2);
}
.search-results[hidden] { display: none; }
.search-results a {
  display: block; padding: 0.6rem 0.75rem; border-radius: 8px;
  color: var(--navy-900);
}
.search-results a small {
  display: block; margin-top: 0.15rem;
  font-size: 0.82rem; color: var(--slate-500);
}
.search-results a strong { font-weight: 700; }
.search-results li.is-active a, .search-results a:hover { background: var(--blue-100); }
.search-results .no-hits { padding: 0.7rem 0.75rem; color: var(--slate-500); font-size: 0.94rem; }

@media (max-width: 640px) {
  .search-input { font-size: 1rem; }
  .nav-search-toggle { width: 40px; height: 40px; }
}

/* ---------- Commitment band ---------- */
/* Their own words, from the closing page of every capability deck. It reads as
   a creed, so it is set as one — full measure, no card, nothing competing. */
.commitment { text-align: center; max-width: 46rem; margin: var(--space-6) auto 0; }
.commitment blockquote {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.35; letter-spacing: -0.015em; font-weight: 600;
  color: var(--navy-900); margin: 0 0 var(--space-3);
}
.commitment cite {
  display: block; font-style: normal; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-500);
}
.section--navy .commitment blockquote { color: var(--paper-0); }
.section--navy .commitment cite { color: var(--blue-300, #9ab6f5); }

/* Two figures that can be checked against the certifications themselves. */
.creed-figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
@media (max-width: 620px) { .creed-figs { grid-template-columns: 1fr; } }
.creed-fig { padding: var(--space-4); border-left: 3px solid var(--blue-500); background: var(--paper-0); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.creed-fig b { display: block; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: var(--brand-navy); margin-bottom: 0.4rem; }
.creed-fig span { display: block; font-size: 0.9rem; color: var(--slate-500); }
.creed-fig em { font-style: normal; font-weight: 600; color: var(--navy-900); }

/* ---------- Platform cards ---------- */
/* The card is one destination (the overview page) with a second, smaller exit
   for the download. Primary action is reading; the PDF is the artifact, not
   the sibling — so it gets an icon, not equal billing. */
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 1000px) { .plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .plat-grid { grid-template-columns: 1fr; } }
.plat-card {
  position: relative; display: flex;
  background: var(--paper-0); border: 1px solid rgba(15,23,48,0.1);
  border-radius: var(--radius-md); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.plat-card:hover { border-color: rgba(41,47,109,0.28); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.plat-card[hidden] { display: none; }
.plat-main { display: flex; flex-direction: column; padding: var(--space-5); text-decoration: none; flex: 1; }
.plat-main:focus-visible { outline: 3px solid var(--blue-400); outline-offset: -3px; }
.plat-vendor {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue-500); margin-bottom: var(--space-2);
}
.plat-card :is(h2, h3) { font-size: 1.05rem; margin-bottom: var(--space-2); padding-right: 2rem; }
.plat-card p { font-size: 0.9rem; color: var(--slate-500); margin-bottom: 0; }
.plat-card .go { margin-top: auto; padding-top: var(--space-4); color: var(--brand-navy); font-weight: 600; font-size: 0.88rem; }
.plat-dl {
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mist-50); border: 1px solid rgba(15,23,48,0.1);
}
.plat-dl svg { width: 17px; height: 17px; fill: none; stroke: var(--slate-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plat-dl:hover { background: var(--brand-navy); border-color: var(--brand-navy); }
.plat-dl:hover svg { stroke: var(--paper-0); }
.plat-dl:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* ---------- Document library ---------- */
/* Recognition over Recall (Law 17): the whole catalogue is listed and filterable.
   Nobody has to remember a product name to find its brief. Hick's Law (Law 3):
   filters are staged as two short chip rows, not one 10-option dropdown. */
/* Visually hidden, still read by screen readers — the library search label uses
   this; without it the label renders as stray text over the back pivot. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pill and search on one row: pill left, search right, vertically centred. */
.lib-top { display: flex; align-items: center; justify-content: space-between;
           gap: var(--space-4); margin-bottom: var(--space-4); }
.lib-top .back-pivot { margin: 0; }
.lib-top .lib-search { flex: 1 1 auto; max-width: 34rem; margin: 0 0 0 auto; }
@media (max-width: 720px) { .lib-top { flex-direction: column; align-items: stretch; }
  .lib-top .back-pivot { width: fit-content; } }

.lib-controls { margin-bottom: var(--space-5); }
/* Half the standard section lead-in above the back pivot, so the library
   controls sit closer under the hero. */
.section:has(.lib-controls) { padding-top: calc(var(--space-8) / 2); }
.lib-search { position: relative; max-width: 34rem; margin-bottom: var(--space-4); }
.lib-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; fill: none; stroke: var(--brand-navy);
  stroke-width: 2; stroke-linecap: round;
}
.lib-search input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--navy-900);
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  /* same stroke as .back-pivot, so the two controls read as a pair */
  border: 1.5px solid rgba(41,47,109,0.35); border-radius: 999px; background: var(--paper-0);
}
.lib-search input:focus { outline: 3px solid var(--blue-400); outline-offset: 1px; border-color: var(--blue-500); }

.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; }
.filter-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-500); min-width: 5.2rem;
}
.filter-chip {
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  color: var(--slate-700); background: var(--paper-0);
  border: 1px solid rgba(15,23,48,0.14); border-radius: 999px;
  padding: 0.42rem 0.85rem; min-height: 34px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip:hover { border-color: var(--brand-navy); color: var(--brand-navy); }
.filter-chip:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }
/* Von Restorff (Law 7): the active filter is the one thing that looks different. */
.filter-chip.is-on { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--paper-0); }
.lib-count { margin-top: var(--space-3); font-size: 0.88rem; color: var(--slate-500); }
.lib-empty { color: var(--slate-500); padding: var(--space-5) 0; }
.lib-empty[hidden] { display: none; }
.lib-reset { font: inherit; color: var(--brand-navy); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

.doc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 820px) { .doc-grid { grid-template-columns: 1fr; } }
.doc-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center;
  background: var(--paper-0); border: 1px solid rgba(15,23,48,0.1);
  border-radius: var(--radius-md); padding: var(--space-4);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.doc-card:hover { border-color: rgba(41,47,109,0.3); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.doc-card:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }
.doc-card[hidden] { display: none; }
.doc-card :is(h2, h3) { font-size: 0.98rem; margin-bottom: 0.2rem; }
.doc-meta { font-size: 0.8rem; color: var(--slate-500); margin: 0; }
.doc-mark {
  width: 40px; height: 50px; border-radius: 6px; flex: none;
  background: linear-gradient(160deg, var(--blue-500), var(--brand-navy));
  display: grid; place-items: center; color: var(--paper-0);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em;
}
.doc-mark--lg { width: 62px; height: 78px; font-size: 0.7rem; box-shadow: var(--shadow-lift); }
.doc-dl { width: 20px; height: 20px; fill: none; stroke: var(--slate-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doc-card:hover .doc-dl { stroke: var(--brand-navy); }

/* ---------- Capability hub cards ---------- */
/* A whole card is the click target — Fitts's Law: the biggest reachable area
   beats a 40px text link sitting inside it. */
.card--link { text-decoration: none; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(41,47,109,0.25); }
.card--link:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }
.card--link .go { margin-top: auto; padding-top: var(--space-4); color: var(--brand-navy); font-weight: 600; font-size: 0.92rem; }
/* The list is the information scent: it tells you what is behind the click
   before you spend one. */
.mini-list { list-style: none; margin: var(--space-3) 0 0; display: grid; gap: 0.3rem; }
.mini-list li { font-size: 0.86rem; color: var(--slate-500); padding-left: 0.85rem; position: relative; }
.mini-list li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 4px; height: 4px; border-radius: 50%; background: var(--blue-400); }

/* ---------- Capability section rows (domain pages) ---------- */
/* Alternating text/figure rows. Common Region + Proximity: each capability is
   one visually bounded unit, so 7 of them read as 7 things, not one wall. */
.cap-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-7) 0; border-top: 1px solid rgba(15,23,48,0.09); }
.cap-row:first-of-type { border-top: 0; padding-top: var(--space-5); }
.cap-row--flip .cap-figure { order: -1; }
@media (max-width: 900px) { .cap-row { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) 0; } .cap-row--flip .cap-figure { order: 0; } }
.cap-row :is(h2, h3) { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.cap-row > div > p { color: var(--slate-700); max-width: 54ch; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-4); }
.cap-tags span { font-size: 0.82rem; font-weight: 600; color: var(--brand-navy); background: var(--blue-100); border-radius: 999px; padding: 0.3rem 0.7rem; }
.cap-figure { background: var(--mist-50); border: 1px solid rgba(15,23,48,0.08); border-radius: var(--radius-lg); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; }
.cap-figure svg { width: 78%; height: auto; }

/* ---------- Dot-separated label row ---------- */
.dot-list {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center;
  gap: 0.35rem 0;
  max-width: 62rem;
  margin: 0 auto;
  padding-top: var(--space-5); /* padding, not margin — margin collapses out of .wrap */
}
.dot-list li {
  display: inline-flex; align-items: center;
  font-size: 0.98rem; font-weight: 600; color: var(--paper-0);
  white-space: nowrap;
}
/* Separator is a vertically centred dot, never after the last item. */
.dot-list li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue-400);
  margin: 0 0.85rem;
  flex: none;
}
.section--alt .dot-list li, .section:not(.section--navy) .dot-list li { color: var(--navy-900); }
.section:not(.section--navy) .dot-list li:not(:last-child)::after { background: var(--blue-500); }
:is(h2, h3).center { text-align: center; }
/* Tighter dots when a long partner list has to hold one row. */
.dot-list--tight li { font-size: 0.92rem; }
.dot-list--tight li:not(:last-child)::after { margin: 0 0.6rem; }
.dot-list--tight { max-width: 72rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.dot-list--tight::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .dot-list--tight { justify-content: flex-start; } }

/* Vendor logos on a navy ground: knock them out to white instead of grey. */
.ticker.ticker--on-dark-logos { padding: var(--space-7) 0 var(--space-5); }
.ticker--on-dark-logos .ticker-item img { filter: brightness(0) invert(1) opacity(0.72); }
.ticker--on-dark-logos:hover .ticker-item img { filter: brightness(0) invert(1) opacity(0.9); }
@media (max-width: 640px) {
  .dot-list li { font-size: 0.9rem; }
  .dot-list li:not(:last-child)::after { margin: 0 0.6rem; }
}

/* ---------- Logo ticker ---------- */
/* Full-bleed marquee. The track is duplicated once and translated by exactly
   -50%, so the loop is seamless. Duration scales with item count via --speed. */
.ticker {
  position: relative;
  overflow: hidden;
  padding: var(--space-4) 0;
  /* Fade both edges so marks enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--space-6);
  animation: ticker-scroll var(--speed, 46s) linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker--reverse .ticker-track { animation-direction: reverse; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-item {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  height: 56px;
}
.ticker-item img {
  max-height: 100%; width: auto; max-width: 170px;
  object-fit: contain;
  /* Mixed-quality source logos: flatten to one neutral weight on the page. */
  filter: grayscale(1) opacity(0.62);
  transition: filter 0.25s ease;
}
.ticker:hover .ticker-item img { filter: grayscale(1) opacity(0.75); }

/* Seals are round and detailed — larger, and left in full colour. */
.ticker--seals .ticker-item { height: 92px; }
.ticker--seals .ticker-item img { max-width: 92px; filter: none; }
/* On a navy ground the darker seals lose their edges, so each sits on a light
   disc — the seals are circular already, so the plate reads as part of the mark. */
.ticker.ticker--on-dark { padding: var(--space-8) 0 var(--space-6); }
.ticker--on-dark .ticker-item img {
  background: rgba(255,255,255,0.94);
  border-radius: 50%;
  padding: 5px;
}
.ticker--on-dark {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* Text stand-in used until real artwork is dropped in; swap for <img>. */
.ticker-item span {
  font-weight: 700; font-size: 1.05rem; color: var(--slate-500);
  white-space: nowrap; letter-spacing: -0.01em;
}
.ticker--seals .ticker-item span { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  /* No motion: fall back to a static centred wrap, nothing clipped. */
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker-track {
    animation: none; width: 100%;
    flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-5);
  }
  .ticker-track [data-clone] { display: none; }
}


/* Stepped ticker: advance one mark, hold, advance again. Spacing lives in the
   item (not a flex gap) so one step is exactly 1/(2N) of the track and the
   loop closes seamlessly at -50%. */
.ticker--step .ticker-track {
  gap: 0;
  animation-name: ticker-step-13;
  animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1);
  animation-duration: var(--speed, 34s);
}
.ticker--step .ticker-item { width: 176px; }
@media (max-width: 640px) { .ticker--step .ticker-item { width: 132px; } }
@keyframes ticker-step-13 {
  0% { transform: translateX(0); }
  2.1000% { transform: translateX(-3.84615%); }
  7.6923% { transform: translateX(-3.84615%); }
  9.7923% { transform: translateX(-7.69231%); }
  15.3846% { transform: translateX(-7.69231%); }
  17.4846% { transform: translateX(-11.53846%); }
  23.0769% { transform: translateX(-11.53846%); }
  25.1769% { transform: translateX(-15.38462%); }
  30.7692% { transform: translateX(-15.38462%); }
  32.8692% { transform: translateX(-19.23077%); }
  38.4615% { transform: translateX(-19.23077%); }
  40.5615% { transform: translateX(-23.07692%); }
  46.1538% { transform: translateX(-23.07692%); }
  48.2538% { transform: translateX(-26.92308%); }
  53.8462% { transform: translateX(-26.92308%); }
  55.9462% { transform: translateX(-30.76923%); }
  61.5385% { transform: translateX(-30.76923%); }
  63.6385% { transform: translateX(-34.61538%); }
  69.2308% { transform: translateX(-34.61538%); }
  71.3308% { transform: translateX(-38.46154%); }
  76.9231% { transform: translateX(-38.46154%); }
  79.0231% { transform: translateX(-42.30769%); }
  84.6154% { transform: translateX(-42.30769%); }
  86.7154% { transform: translateX(-46.15385%); }
  92.3077% { transform: translateX(-46.15385%); }
  94.4077% { transform: translateX(-50.00000%); }
  100% { transform: translateX(-50.00000%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker--step .ticker-track { animation: none; }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Skip link (accessibility) ---------- */
.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--navy-900); color: #fff; padding: 0.8rem 1.2rem; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- Misc ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { background: var(--blue-100); color: var(--navy-800); font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; }
.divider { height: 1px; background: rgba(15,23,48,0.08); border: none; margin: var(--space-6) 0; }
.center { text-align: center; }
.muted { color: var(--slate-500); }
.site-footer .muted,
.section--navy .muted,
.download-card .muted,
.stripe-card .muted { color: var(--muted-on-dark); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* perf fix: parked offscreen by main.js */
.ticker.is-parked .ticker-track { animation-play-state: paused; }