/* Fast Horse Federal: shared stylesheet.
   Concept: outline = planned, solid Shield Navy = installed by FHF, Fiber Aqua = routes and active states. */

/* ---------- Web fonts (self-hosted) ----------
   Variable woff2 files from Google Fonts (latin subset), served from /fonts/ and preloaded in <head>.
   Public Sans: weights 400 to 700. Saira: weights 500 to 600, widths 75% to 100%.
   Both under the SIL Open Font License 1.1; license texts in /fonts/licenses/. */
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/public-sans-latin-wght.c1b6da51.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira'; font-style: normal; font-weight: 500 600; font-stretch: 75% 100%; font-display: swap;
  src: url('/fonts/saira-latin-wdth-wght.e59235a4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Metric-matched fallbacks ----------
   Local fonts adjusted to the web fonts' measured width and line metrics, so the swap to
   Public Sans and Saira does not reflow text (no layout shift). Measured in Chrome. */
@font-face { font-family: 'Public Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; size-adjust: 104.9%; ascent-override: 90.6%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: 'Public Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; size-adjust: 99.6%; ascent-override: 95.4%; descent-override: 23.1%; line-gap-override: 0%; }
/* Saira is used at several widths (font-stretch 82% to 100%). One fallback face per width range,
   each scaled to Saira's measured width at that range (qa/saira-metrics.mjs), so the swap to the web
   font does not reflow text. Ascent and descent keep Saira's metrics (113% / 44%) after scaling. */
@font-face { font-family: 'Saira Fallback'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'); font-weight: 600 700; font-stretch: 75% 83%; size-adjust: 99.1%; ascent-override: 114.0%; descent-override: 44.4%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'); font-weight: 600 700; font-stretch: 84% 86%; size-adjust: 102.6%; ascent-override: 110.1%; descent-override: 42.9%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'); font-weight: 600 700; font-stretch: 87% 89%; size-adjust: 106.1%; ascent-override: 106.5%; descent-override: 41.5%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; font-stretch: 90% 91%; size-adjust: 89.0%; ascent-override: 127.0%; descent-override: 49.4%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; font-stretch: 92% 93%; size-adjust: 90.9%; ascent-override: 124.3%; descent-override: 48.4%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; font-stretch: 94% 97%; size-adjust: 93.8%; ascent-override: 120.5%; descent-override: 46.9%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; font-stretch: 98% 100%; size-adjust: 98.7%; ascent-override: 114.5%; descent-override: 44.6%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial Narrow'), local('ArialNarrow'); font-weight: 400 500; font-stretch: 75% 83%; size-adjust: 105.3%; ascent-override: 107.3%; descent-override: 41.8%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-stretch: 84% 86%; size-adjust: 89.5%; ascent-override: 126.3%; descent-override: 49.2%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-stretch: 87% 89%; size-adjust: 92.6%; ascent-override: 122.0%; descent-override: 47.5%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-stretch: 90% 91%; size-adjust: 94.6%; ascent-override: 119.5%; descent-override: 46.5%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-stretch: 92% 93%; size-adjust: 96.7%; ascent-override: 116.9%; descent-override: 45.5%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-stretch: 94% 97%; size-adjust: 99.8%; ascent-override: 113.2%; descent-override: 44.1%; line-gap-override: 0%; }
@font-face { font-family: 'Saira Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; font-stretch: 98% 100%; size-adjust: 104.9%; ascent-override: 107.7%; descent-override: 41.9%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --navy: #0B3061;          /* Shield Navy: solid fills, installed state, footer */
  --ink: #0E1420;           /* Linework: text, hairlines, outline drawings */
  --aqua: #00A3AD;          /* Fiber Aqua, graphics only */
  --aqua-text: #00727B;     /* Fiber Aqua, text */
  --aqua-light: #7FD3D9;    /* LEDs and accents on navy */
  --sheet: #F3F5F8;         /* Section ground */
  --sheet-grid: #E3E7EE;    /* Drawing grid lines */
  --rule: #D9DEE7;          /* Dividers, inactive outlines */
  --body: #2C3446;          /* Body text */
  --muted: #4A5468;         /* Secondary text */
  --white: #FFFFFF;
  --navy-rule: #3B5A8C;     /* Rules on navy */
  --navy-text: #D6DEEC;     /* Body text on navy */
  --navy-muted: #9FB3D3;    /* Secondary text on navy */
  --ink-rule: #3A4357;      /* Rules on linework ground */
  --ink-muted: #B7C0D3;     /* Secondary text on linework ground */
  --verify: #F59E0B;        /* Test-build marker for held claims */
  --tagline: #0B1F3A;       /* Logo tagline ink */
  --error: #B42318;         /* Form errors (5.9:1 on white) */
  --field-border: #8A93A6;  /* Form field outline (3:1 on white) */

  --font-display: 'Saira', 'Saira Fallback', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Public Sans', 'Public Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: 32px;
  --section: 104px;
  --chamfer: 14px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --header-h: 82px;     /* measured and updated by site.js */
  --header-min: 81px;   /* fixed minimum for the header row (never derived from --header-h) */
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --section: 64px; --chamfer: 12px; --header-h: 61px; --header-min: 60px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 18px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; color: inherit; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; }
a { color: var(--aqua-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 100;   /* fixed: shows at the top of the screen even when the page is scrolled */
  background: var(--navy); color: var(--white); padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.gridbg {
  background-color: var(--sheet);
  background-image: linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
@media (max-width: 767px) { .gridbg { background-size: 24px 24px; } }
.ruled { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.on-navy { background: var(--navy); color: var(--white); }
.on-ink { background: var(--ink); color: var(--white); }

/* ---------- Type ---------- */
.display {
  font-size: clamp(60px, 7.4vw, 104px);
  line-height: 0.92;
  font-stretch: 82%;
  letter-spacing: -0.02em;
}
.h1-page { font-size: clamp(52px, 6.2vw, 88px); line-height: 0.95; font-stretch: 82%; letter-spacing: -0.02em; }
.h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1; font-stretch: 85%; letter-spacing: -0.01em; }
.h2-sm { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; font-stretch: 85%; letter-spacing: -0.01em; }
.h3 { font-size: 24px; line-height: 1.2; font-stretch: 95%; }
.h3-lg { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; font-stretch: 88%; }
.lead { font-size: 20px; line-height: 1.6; color: var(--body); max-width: 560px; }
.intro { font-size: 18px; line-height: 1.6; color: var(--body); }
.on-navy .lead, .on-navy .intro { color: var(--navy-text); }
.callout {
  font: 500 13px/1.4 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-stretch: 100%;
}
.callout-aqua { color: var(--aqua-text); }
.muted { color: var(--muted); }
.small { font-size: 15px; line-height: 1.6; }
.note { font-size: 14px; line-height: 1.6; color: var(--muted); }
.on-navy .note { color: var(--navy-muted); }
.list { padding-left: 18px; font-size: 16px; line-height: 1.75; }
.list li + li { margin-top: 2px; }
@media (max-width: 767px) {
  body { font-size: 17px; }
  .lead { font-size: 17px; }
  .intro { font-size: 16px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  font: 600 16px/1.2 var(--font-body);
  text-decoration: none; text-align: center;
  border: 0; background: none; color: var(--ink);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.btn-sm { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn-primary, .btn-dark, .btn-light {
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--ink); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--navy); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--sheet); color: var(--navy); }
.btn-outline {
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px;
  margin: 4px; /* room for the second stroke */
}
.btn-outline:hover { background: var(--sheet); color: var(--ink); }
.btn-outline:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); background: var(--white); }
.btn-line:hover { background: var(--sheet); color: var(--ink); }
.btn-line-light { border: 1.5px solid var(--white); color: var(--white); }
.btn-line-light:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }
/* clip-path would also clip the focus ring, so a focused chamfered button drops the chamfer and shows the full ring. */
.btn-primary:focus-visible, .btn-dark:focus-visible, .btn-light:focus-visible { clip-path: none; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; }

/* ---------- Held-claim marker (test build only) ----------
   Inline: a badge plus a dashed amber underline, which stays inside its own line box, so it never
   overlaps neighbouring text (Saira's tall ascent makes inline outlines spill past the line height).
   Block: a dashed outline drawn inside the element's own box.
   ?clean hides all markers (html.clean, set by a test-build-only script in <head>). */
.verify {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--verify);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: none;
}
.verify::before {
  content: 'VERIFY ' attr(data-v);
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  background: var(--verify);
  color: var(--ink);
  font: 700 10px/16px var(--font-body);
  letter-spacing: 0.06em;
  text-transform: none;
  font-stretch: 100%;
  vertical-align: 0.15em;
  text-decoration: none;
}
div.verify, section.verify, li.verify, article.verify, p.verify, ul.verify, ol.verify { display: block; }
div.verify, section.verify, li.verify, article.verify, ul.verify, ol.verify {
  text-decoration: none;
  outline: 2px dashed var(--verify);
  outline-offset: -2px;
}
div.verify::before, section.verify::before, li.verify::before, article.verify::before, ul.verify::before, ol.verify::before { display: table; margin: 0 0 8px; }
/* Block markers get inner padding so the dashed outline never touches text or list bullets. */
.sheet-body.verify, .sheet-cols > div.verify, ul.verify, ol.verify, .lead-placeholder.verify { padding: 12px 14px; }
ul.list.verify { padding-left: 32px; }
ul.list.verify::before { margin-left: -18px; }
.clean .verify { text-decoration: none; outline: none; }
.clean .verify::before { content: none; display: none; }

/* ---------- Utility row ---------- */
.utility { background: var(--sheet); border-bottom: 1px solid var(--rule); font-size: 14px; }
.utility-inner { display: flex; justify-content: flex-end; gap: 28px; min-height: 36px; align-items: center; }
/* Logo tagline as live text: uppercase, wide tracking, tagline ink (#0B1F3A), like the artwork. */
.tagline { font: 500 12px/1.5 var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; color: var(--tagline); }
.utility-tagline { margin-right: auto; }
.utility a { color: var(--body); text-decoration: none; font-weight: 500; padding: 4px 0; }
.utility a:hover, .utility a[aria-current] { color: var(--aqua-text); }
.utility a[aria-current] { text-decoration: underline; text-decoration-color: var(--aqua); text-decoration-thickness: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; gap: 24px; padding-top: 10px; padding-bottom: 10px; min-height: var(--header-min); }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); text-decoration: none; }
.brand-img { height: var(--logo-h, 62px); width: auto; }
/* Desktop: nav and CTA center on the wordmark line, which sits at 29.25% of the lockup height
   (rows 315-450 of the master; lockup rows 243-719; see tools/logo-metrics.json), not on the shield's center. */
@media (min-width: 1180px) {
  .header-inner { align-items: flex-start; --logo-h: 62px; --wordmark-y: calc(var(--logo-h) * 0.2925); }
  .main-nav { margin-top: calc(var(--wordmark-y) - 22px); }
  .header-cta { margin-top: calc(var(--wordmark-y) - 23px); }
}
.main-nav ul { display: flex; gap: 26px; list-style: none; padding: 0; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none; font: 500 15px var(--font-body);
  border-bottom: 2px solid transparent; padding-top: 2px;
}
.main-nav a:hover { color: var(--aqua-text); }
.main-nav a[aria-current] { border-bottom-color: var(--aqua); }
.menu-toggle {
  display: none; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1.5px solid var(--ink); background: var(--white);
  align-items: center; justify-content: center;
}
.menu-toggle path { stroke: var(--ink); stroke-width: 1.8; fill: none; }
.menu-icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon-close { display: block; }

.site-menu {
  position: fixed; left: 0; right: 0; top: var(--menu-top, var(--header-h)); bottom: 0;
  background: var(--white); overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--rule); padding: 24px 0 120px;
}
.menu-label { color: var(--muted); margin: 8px 0 4px; }
.menu-list { list-style: none; padding: 0; margin-bottom: 24px; border-top: 1.5px solid var(--ink); }
.menu-list a {
  display: flex; align-items: center; min-height: 52px; padding: 8px 0;
  border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  font: 600 18px/1.2 var(--font-display);
}
.menu-list-primary a { font-size: 22px; min-height: 60px; }
.menu-list a[aria-current] { color: var(--aqua-text); box-shadow: inset 3px 0 0 var(--aqua); padding-left: 12px; }
.menu-actions { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 1179px) {
  .utility, .main-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand-img { height: 52px; }
}
@media (max-width: 767px) {
  .header-inner { padding-top: 8px; padding-bottom: 8px; gap: 12px; }
  .brand-img { height: 44px; }
}
/* Phones: the compact lockup (shield + wordmark, no tagline) as large as fits beside the 44 px
   menu button: width-limited (302 px at 390), capped at 56 px tall on wider phones. */
@media (max-width: 479px) {
  .brand { flex: 1 1 auto; min-width: 0; margin-right: 0; }
  .brand picture { display: block; min-width: 0; }
  .brand-img { width: auto; height: auto; max-width: 100%; max-height: 56px; }
}
/* Below 340 px the lockup would fall under its 240 px minimum width, so the shield shows alone. */
@media (max-width: 339px) {
  .brand-img { width: 40px; height: 44px; }
}
body.menu-open { overflow: hidden; }

/* ---------- Mobile bottom bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  .mobile-bar {
    display: flex; gap: 6px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--ink);
  }
  /* Three controls (Start a requirement, Call FHF, Help); every label stays on one line from 320 to 767 px. */
  .mobile-bar .btn { flex: 1; min-height: 52px; padding: 0 10px; font-size: 15px; white-space: nowrap; }
  .mobile-bar .btn-primary { flex: 1.8; }
  .mobile-bar .mobile-bar-help { flex: 0 0 auto; min-width: 56px; padding: 0 12px; }
  body { padding-bottom: 78px; }
}
@media (max-width: 379px) {
  .mobile-bar .btn { font-size: 14px; padding: 0 8px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--navy-text); padding: 64px 0 36px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 40px; }
.footer-brand img { width: 100%; max-width: 420px; }
.footer-brand p { margin-top: 20px; }
.footer-h { font: 500 13px var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-muted); margin-bottom: 10px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { line-height: 1.5; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--white); }
.footer-col a:hover { color: var(--aqua-light); }
.footer-note { padding-top: 8px; color: var(--navy-muted); }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--navy-rule); font-size: 14px; color: var(--navy-muted); }
.footer-base a { display: inline-block; padding: 4px 0; color: var(--navy-text); }
.footer-base a:hover { color: var(--aqua-light); }
@media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 559px) { .footer-grid { grid-template-columns: 1fr; } .footer-col a { min-height: 44px; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Off, not just shortened: a 0.01 ms 'all' transition still animates every property for a frame. */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Shared page sections
   ===================================================================== */
.section-head { margin-bottom: 56px; }
.section-head .intro { margin-top: 20px; max-width: 640px; }
/* Section intros: headline left, intro right, from 1024 px; stacked below that. */
@media (min-width: 1024px) {
  .section-head, .lifecycle-head {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 64px; align-items: end;
  }
  .section-head .intro, .lifecycle-head .intro { margin-top: 0; max-width: 520px; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hint-mobile { display: none; }
@media (max-width: 767px) {
  .section-head { margin-bottom: 32px; }
  .hint-desktop { display: none; }
  .hint-mobile { display: inline; }
}
.link-light { color: var(--white); margin-top: 32px; }
.link-light:hover { color: var(--aqua-light); }

/* ---------- Hero ---------- */
.hero { position: relative; background-image: none; border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-inner { position: relative; display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; padding-top: 72px; }
.hero-copy { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; padding-bottom: 72px; }
.hero-tagline { margin: 0 0 20px; font-size: 13px; line-height: 18px; } /* 38px total; .hero-art offsets by this */
.hero-lead { margin-top: 32px; max-width: 640px; font-size: 19px; font-weight: 500; line-height: 1.6; }
.hero-lead-2 { display: block; margin-top: 6px; }
.hero-copy .btn-row { margin-top: 40px; margin-bottom: 56px; }
.hero-facts { margin: auto 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink); }
.hero-facts > div { flex: 1 1 160px; padding: 16px 20px 0 0; }
.hero-facts dt { font: 600 20px/1.3 var(--font-display); }
.hero-facts dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.hero-art { flex: 1 1 400px; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.hero-art svg { width: 100%; max-width: 540px; height: auto; display: block; }
.hero-art-mobile { display: none; }
/* Desktop: rack beside the copy. --rack is the height of the rack body (viewBox y 96 to 620 of the
   596-unit-tall drawing); it follows the viewport so the whole rack and its 42U label sit above the
   fold, and is capped so the headline keeps its width. The cable segment above the rack (72 units)
   rises into the hero's top padding, so the rack body itself lines up with the headline. */
@media (min-width: 1180px) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: start; }
  .hero-art {
    --rack: clamp(400px, calc(100svh - 252px), 500px);
    display: block; align-self: start;
    /* 38px = the tagline line above the headline; the rack body aligns with the headline itself. */
    margin-top: calc(var(--rack) * -72 / 524 + 38px + var(--cap-offset, 10px));
  }
  .hero-art svg { height: calc(var(--rack) * 596 / 524); width: auto; max-width: none; }
}
.svg-callout { font: 500 13px var(--font-display); letter-spacing: 2px; }
.svg-callout-sm { font: 500 12px var(--font-display); letter-spacing: 1.5px; }
@media (max-width: 767px) {
  .hero::before { background-size: 24px 24px; }
  .hero-inner { padding-top: 36px; gap: 0; }
  .hero-copy { padding-bottom: 0; }
  .hero-lead { margin-top: 18px; font-size: 17px; }
  .hero-tagline { font-size: 11px; letter-spacing: 0.22em; margin-bottom: 14px; }
  .hero-copy .btn-row { margin-top: 28px; margin-bottom: 32px; }
  .hero-copy .btn-row .btn { width: calc(100% - 8px); }
  .hero-copy .btn-row .btn-primary { width: 100%; }
  .hero-art { display: none; }
  .hero-art-mobile { display: block; width: 100%; margin-top: 28px; }
  .hero-art-mobile svg { width: 100%; height: auto; display: block; }
}

/* ---------- Pillars ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pillar { display: flex; flex-direction: column; border: 1.5px solid var(--ink); padding: 28px; background: var(--white); }
.pillar-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.pillar-code { font-size: 24px; font-weight: 600; letter-spacing: 0.06em; color: var(--navy); }
.pillar-art { width: 100%; max-width: 240px; height: auto; margin: 24px 0 20px; }
.pillar-title { font-size: 26px; line-height: 1.1; font-stretch: 90%; }
.pillar-sum { margin-top: 10px; color: var(--body); }
.pillar-list { margin-top: 16px; }
.pillar-link { margin-top: auto; padding-top: 16px; }
@media (max-width: 1023px) { .pillar-grid { grid-template-columns: 1fr; } .pillar-art { max-width: 200px; } }
@media (max-width: 767px) { .pillar { padding: 20px; } }

/* ---------- Rack ---------- */
.rack {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  /* Row heights follow the design's unit heights (plus the frame's 10px inset on the first and last
     unit), so the tall detail panel in column 2 pushes its extra height into the last 1fr row. */
  grid-template-rows: 54px 44px 44px 44px 96px 80px 64px 74px 1fr;
  column-gap: 56px; row-gap: 6px;
  align-items: start;
}
.rack-frame { grid-column: 1; grid-row: 1 / 9; align-self: stretch; border: 2px solid var(--ink); background: var(--white); margin: -10px 0; }
.rack-unit {
  grid-column: 1; position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 20px); margin: 0 10px; min-height: var(--h, 44px); padding: 0 14px;
  border: 1.5px solid var(--navy); background: var(--navy); color: var(--white);
  text-align: left; font-family: var(--font-body);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.rack-unit:first-of-type { margin-top: 10px; }
.rack-unit.is-planned { background: var(--white); color: var(--ink); border-style: dashed; border-color: var(--ink); }
.rack-unit:hover { border-color: var(--aqua); }
.rack-unit[aria-pressed="true"], .rack-unit[aria-expanded="true"] { background: var(--aqua); border-color: var(--aqua); border-style: solid; color: var(--ink); }
.ru { width: 78px; flex: none; font: 500 12px var(--font-display); letter-spacing: 1px; opacity: 0.85; }
.ru-name { flex: 1; font: 600 15px/1.3 var(--font-body); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua-light); flex: none; }
.is-planned .led { background: var(--rule); }
.rack-unit[aria-pressed="true"] .led, .rack-unit[aria-expanded="true"] .led { background: var(--ink); }
.rack-unit[data-unit="retired"] { margin-bottom: 10px; }
.rack-unit { align-self: stretch; }
@media (min-width: 768px) {
.rack-unit:nth-of-type(1) { grid-row: 1; }
.rack-unit:nth-of-type(2) { grid-row: 2; }
.rack-unit:nth-of-type(3) { grid-row: 3; }
.rack-unit:nth-of-type(4) { grid-row: 4; }
.rack-unit:nth-of-type(5) { grid-row: 5; }
.rack-unit:nth-of-type(6) { grid-row: 6; }
.rack-unit:nth-of-type(7) { grid-row: 7; }
.rack-unit:nth-of-type(8) { grid-row: 8; }
}
.rack-detail { grid-column: 2; grid-row: 1 / -1; border-top: 2px solid var(--ink); padding-top: 24px; }
.rack-detail .h3-lg { margin-top: 8px; }
.detail-sum { margin-top: 14px; font-size: 18px; line-height: 1.6; color: var(--body); }
.detail-cols { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
.detail-cols > div { flex: 1 1 220px; min-width: 0; }
.detail-h { font: 700 15px/1.4 var(--font-body); padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.detail-foot { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; margin-top: 32px; }
.detail-foot .btn { margin-left: auto; }
.label-tag { display: inline-flex; align-items: center; border: 1.5px dashed var(--ink); padding: 10px 14px; font: 500 14px var(--font-display); letter-spacing: 1.5px; background: var(--white); }
@media (max-width: 767px) {
  .rack { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; border: 2px solid var(--ink); padding: 6px; row-gap: 5px; background: var(--white); }
  .rack-frame { display: none; }
  .rack-unit, .rack-unit:first-of-type, .rack-unit[data-unit="retired"] { width: 100%; margin: 0; min-height: 48px; padding: 0 12px; }
  .ru { width: 66px; font-size: 11px; }
  .rack-detail { grid-column: 1; grid-row: auto; border-top: 0; border-left: 3px solid var(--aqua); background: var(--sheet); padding: 14px 12px 16px; margin-bottom: 4px; }
  .rack-detail .callout { font-size: 12px; }
  .rack-detail .h3-lg { font-size: 24px; }
  .detail-sum { font-size: 15px; margin-top: 8px; }
  .detail-cols { gap: 16px; margin-top: 16px; }
  .detail-cols .list { font-size: 15px; }
  .detail-foot { margin-top: 18px; }
  .detail-foot .btn { margin-left: 0; width: 100%; }
}

/* ---------- Lifecycle ---------- */
.lifecycle-head { padding-top: var(--section); }
.lifecycle-sticky { padding-top: 56px; padding-bottom: var(--section); }
.lifecycle-h { max-width: 900px; }
.lifecycle-intro { margin-top: 20px; max-width: 680px; }
.lifecycle-head .h2 { max-width: 640px; }
.route-scroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.route { position: relative; min-width: 1100px; --p: 0; }
.route-band { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); margin-bottom: 44px; }
.band { padding: 0 8px 8px; text-align: center; border-bottom: 1.5px solid currentColor; margin: 0 10px; font-size: 12px; }
.band-lw { grid-column: span 5; color: var(--aqua-text); }
.band-dc { grid-column: span 6; color: var(--navy); }
.route-band-under { margin: 18px 0 0; }
.route-band-under .band { border-bottom: 0; border-top: 1.5px solid currentColor; padding: 8px 8px 0; }
.band-st { grid-column: 1 / -1; color: var(--ink); }
.route-body { position: relative; }
.route-track { position: absolute; left: 22px; right: 22px; top: 21px; height: 3px; background: var(--ink); }
.route-fill { position: absolute; left: 0; top: -1px; height: 5px; width: 100%; background: var(--aqua); transform-origin: left center; transform: scaleX(var(--p)); transition: transform 200ms var(--ease); }
.crate { position: absolute; display: block; pointer-events: none; will-change: transform; transition: transform 200ms var(--ease); }
.crate svg { display: block; }
.crate-route { left: 22px; top: -30px; transform: translateX(calc(var(--track-w, 1056px) * var(--p) - 16px)); }
.route-stages { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); position: relative; }
.route-stages li { display: flex; justify-content: center; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 2px 4px; border: 0; background: none; color: var(--ink); min-width: 44px; }
.stage-num {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font: 600 16px var(--font-display); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.stage-tag { display: none; }
.stage-name { font: 600 15px/1.2 var(--font-display); text-align: center; }
.stage.is-done .stage-num { background: var(--navy); color: var(--white); box-shadow: none; }
.stage[aria-pressed="true"] .stage-num { background: var(--aqua); color: var(--ink); box-shadow: none; }
.stage:hover .stage-name { color: var(--aqua-text); }
.route-mini { display: none; }
.stage-panels { margin-top: 40px; }
.stage-panel { display: flex; flex-wrap: wrap; gap: 32px; background: var(--white); border: 1.5px solid var(--ink); padding: 32px; }
.stage-main { flex: 1 1 380px; min-width: 0; }
.stage-main .h3-lg { margin-top: 6px; }
.stage-desc { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--body); }
.stage-record { flex: 1 1 260px; min-width: 0; border-left: 1px solid var(--rule); padding-left: 32px; }
.stage-record .detail-h { border: 0; padding: 0; margin-bottom: 8px; }
.stage-record p { font-size: 17px; line-height: 1.6; }
/* Pinned, scroll-driven mode (added by JS when motion is allowed and the content fits). */
.lifecycle.is-pinned .lifecycle-sticky { position: sticky; top: var(--header-h); padding-top: 32px; padding-bottom: 32px; }
.lifecycle.is-pinned .lifecycle-pin { margin-bottom: calc(var(--section) - 32px); }
.lifecycle.is-pinned .route-fill, .lifecycle.is-pinned .crate { transition: none; }
@media (max-width: 767px) {
  .lifecycle-sticky { padding-top: 8px; }
  .route-scroll { margin: 16px calc(-1 * var(--gutter)) 0 0; scroll-snap-type: x mandatory; }
  .route { min-width: 0; width: max-content; }
  .route-band, .route-track, .crate-route { display: none; }
  .route-band-under { display: block; margin: 0 var(--gutter) 0 0; }
  .route-band-under .band { display: block; margin: 0; text-align: left; padding-left: 0; }
  .route-band-under .band > span { display: inline-block; position: sticky; left: 0; }
  .route-stages { display: flex; gap: 10px; width: max-content; padding: 4px var(--gutter) 8px 0; }
  .route-stages li { flex: 0 0 148px; scroll-snap-align: start; }
  .stage { width: 100%; height: 100%; align-items: flex-start; gap: 4px; padding: 12px; min-height: 96px; text-align: left; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color 200ms var(--ease); }
  .stage-num, .stage[aria-pressed="true"] .stage-num, .stage.is-done .stage-num { width: auto; height: auto; clip-path: none; background: none; box-shadow: none; color: inherit; font: 500 11px var(--font-display); letter-spacing: 1.5px; }
  .stage-num { display: block; }
  .stage-num::before { content: 'STAGE '; }
  .stage-tag { display: block; font: 500 11px var(--font-display); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
  .stage-name { text-align: left; font-size: 18px; }
  .stage.is-done { background: var(--navy); color: var(--white); box-shadow: none; }
  .stage.is-done .stage-tag { color: var(--navy-muted); }
  .stage[aria-pressed="true"] { background: var(--aqua); color: var(--ink); box-shadow: none; }
  .stage[aria-pressed="true"] .stage-tag { color: var(--ink); }
  .route-mini { display: block; position: relative; height: 26px; margin-top: 16px; margin-right: 0; }
  .route-mini::before { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--ink); }
  .route-mini-fill { position: absolute; left: 0; right: 0; bottom: 3px; height: 4px; background: var(--aqua); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 200ms var(--ease); }
  .crate-mini { left: 0; bottom: 6px; transform: translateX(calc((var(--mini-w, 300px) - 24px) * var(--p, 0))); }
  .stage-panels { margin-top: 12px; }
  .stage-panel { padding: 18px; gap: 12px; }
  .stage-desc, .stage-record p { font-size: 15px; }
  .stage-record { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; flex-basis: 100%; }
  .lifecycle.is-pinned .lifecycle-sticky { padding-top: 12px; padding-bottom: 12px; }
  .lifecycle.is-pinned .route-mini-fill, .lifecycle.is-pinned .crate-mini { transition: none; }
}

/* ---------- Service index ---------- */
.index-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 56px; }
.index-intro .intro { margin-top: 18px; }
.index-intro .text-link { margin-top: 16px; }
.index-list { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.index-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.index-list a:hover .index-name { color: var(--aqua-text); }
.index-code { color: var(--muted); }
.index-name { font: 600 24px/1.15 var(--font-display); font-stretch: 90%; }
.index-line { font-size: 15px; line-height: 1.55; color: var(--muted); }
.index-sub { display: block; }
.index-sub + .index-sub { margin-top: 4px; }
.index-sub b { color: var(--body); font-weight: 600; }
.index-more { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.index-more .h3 { margin-bottom: 12px; }
.index-list-sm a { grid-template-columns: 72px minmax(0, 1fr); padding: 12px 0; }
.index-list-sm .index-name { font-size: 19px; }
@media (max-width: 1023px) {
  .index-inner { grid-template-columns: 1fr; }
  .index-more { grid-column: 1; }
}
@media (max-width: 767px) {
  .index-list a { grid-template-columns: 60px minmax(0, 1fr); gap: 6px 12px; padding: 14px 0; }
  .index-line { grid-column: 2; font-size: 14px; }
  .index-name { font-size: 20px; }
  .index-more { grid-template-columns: 1fr; }
}

/* ---------- Who we serve tabs ---------- */
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.tablist [role="tab"] {
  min-height: 46px; padding: 0 18px; font: 600 15px var(--font-body);
  border: 1.5px solid var(--navy-rule); background: transparent; color: var(--white);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.tablist [role="tab"]:hover { border-color: var(--white); }
.tablist [role="tab"][aria-selected="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }
.tabpanel { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 40px; border-top: 1px solid var(--navy-rule); padding-top: 40px; }
.tabpanel:focus-visible { outline-offset: 6px; }
.tab-main { flex: 1 1 420px; min-width: 0; }
.tab-main .intro { margin-top: 16px; }
.tab-side { flex: 1 1 320px; min-width: 0; }
.tab-side .list { line-height: 1.8; }
.tab-side .btn { margin-top: 24px; }
@media (max-width: 767px) {
  .tablist { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px 4px; margin-left: -4px; }
  .tablist [role="tab"] { flex: none; }
  .tabpanel { gap: 20px; padding-top: 24px; margin-top: 20px; }
  .tab-main, .tab-side { flex-basis: 100%; }
  .tab-side .btn { width: 100%; }
}

/* ---------- Why ---------- */
.why-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 56px; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.why-item { border-top: 2px solid var(--navy); padding-top: 16px; }
.why-item p { margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--body); }
@media (max-width: 1023px) { .why-inner { grid-template-columns: 1fr; } }
.sq-grid .why-item .check-list { margin-top: 12px; }
@media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Story ---------- */
.story-h { max-width: 800px; }
.story-grid { list-style: none; padding: 0; margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-card { padding: 28px 28px 32px; }
.story-card p:not(.callout) { margin-top: 10px; font-size: 15px; line-height: 1.65; }
.story-title { margin-top: 10px; font-size: 26px; line-height: 1.15; }
.story-navy { background: var(--navy); color: var(--white); }
.story-ink { background: var(--ink); color: var(--white); }
.story-navy .callout, .story-ink .callout { color: #9FC0E8; }
.story-navy p:not(.callout), .story-ink p:not(.callout) { color: var(--navy-text); }
.story-outline { background: var(--white); border: 2px solid var(--navy); }
.story-outline p:not(.callout), .story-planned p:not(.callout) { color: var(--body); }
.story-planned { border: 1.5px dashed var(--ink); background: rgba(255, 255, 255, 0.6); }
.story-note { margin-top: 20px; max-width: 760px; }
@media (max-width: 1023px) { .story-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .story-grid { grid-template-columns: 1fr; margin-top: 32px; } .story-card { padding: 22px; } }

/* ---------- Capability statement previews ---------- */
.statement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.statement { display: flex; gap: 28px; align-items: flex-start; border: 1px solid var(--rule); padding: 28px; }
.doc { flex: 0 0 170px; height: 220px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.doc img { width: 100%; height: auto; }
.doc span { display: block; }
.doc-light { background: var(--white); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--navy); }
.doc-navy { background: var(--navy); box-shadow: 8px 8px 0 var(--aqua); }
.doc-bar { height: 6px; background: var(--navy); margin-top: 6px; }
.doc-line { height: 4px; background: var(--rule); }
.doc-navy .doc-line { background: var(--navy-rule); margin-top: 4px; }
.w80 { width: 80%; } .w70 { width: 70%; }
.doc-boxes { display: flex !important; gap: 6px; margin-top: 8px; }
.doc-boxes span { flex: 1; height: 54px; border: 1px solid var(--rule); }
.doc-units { display: flex !important; flex-direction: column; gap: 3px; margin-top: 8px; }
.doc-units span { height: 8px; background: var(--white); }
.doc-units .o { background: none; border: 1px solid #9FC0E8; }
.doc-units .tall { height: 16px; }
.statement-body { flex: 1; min-width: 0; }
.statement-title { font-size: 26px; line-height: 1.15; }
.statement-body .small { margin-top: 10px; color: var(--body); }
.statement-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 18px; }
@media (max-width: 1023px) { .statement-grid { grid-template-columns: 1fr; } }
@media (max-width: 559px) {
  .statement { flex-direction: column; padding: 20px; gap: 22px; }
  .doc { flex-basis: auto; width: 150px; height: 194px; }
}

/* ---------- Lead paths ---------- */
.path-grid { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink-rule); }
.path-grid a { display: block; height: 100%; padding: 24px 20px; color: var(--white); text-decoration: none; border-right: 1px solid var(--ink-rule); }
.path-grid li:first-child a { padding-left: 0; }
.path-grid li:last-child a { border-right: 0; }
.path-name { display: block; font: 600 22px/1.15 var(--font-display); }
.path-line { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-muted); }
.path-grid a:hover .path-name { color: var(--aqua-light); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (max-width: 1179px) {
  .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path-grid li:nth-child(3n+1) a { padding-left: 0; }
  .path-grid li:nth-child(3n) a { border-right: 0; }
  .path-grid li { border-bottom: 1px solid var(--ink-rule); }
}
@media (max-width: 767px) {
  .path-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .path-grid a { padding: 16px 0; border-right: 0; }
  .path-name { font-size: 20px; }
}

/* =====================================================================
   Inner pages: shared hero, CTA band
   ===================================================================== */
.page-hero { border-bottom: 1px solid var(--rule); padding: 80px 0 72px; }
.page-hero-inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.page-eyebrow { margin-bottom: 18px; }
.page-hero .lead { margin-top: 28px; max-width: 620px; }
.section-sm { padding-top: 88px; padding-bottom: 88px; }
.cta-band { padding: 72px 0; }
.cta-band-inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.cta-band h2 { max-width: 640px; color: var(--white); }
@media (max-width: 1023px) { .page-hero-inner { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .page-hero { padding: 40px 0 40px; }
  .section-sm { padding-top: 56px; padding-bottom: 56px; }
  .cta-band { padding: 48px 0; }
  .cta-band .btn { width: 100%; }
}

/* ---------- Data center: capability sheets ---------- */
.sheet-nav ol { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.sheet-nav a { display: flex; gap: 16px; align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.3; }
.sheet-nav a:hover { color: var(--aqua-text); }
.sheet-nav .callout { flex: none; width: 60px; color: var(--muted); }
.sheet-sec { padding-top: 72px; }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) 300px; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; margin: 6px; background: var(--white); }
.sheet-main { display: flex; gap: 40px; padding: 40px; min-width: 0; }
.units { flex: 0 0 150px; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1.5px solid var(--ink); }
.units span { display: block; height: 12px; }
.units .u-s { background: var(--navy); }
.units .u-p { border: 1px dashed var(--ink); }
.units .u-a { background: var(--aqua); }
.units .u-t { background: var(--aqua); height: 26px; }
.sheet-body { flex: 1; min-width: 0; }
.sheet-title { font-size: clamp(32px, 3.2vw, 44px); line-height: 1; font-stretch: 85%; letter-spacing: -0.01em; }
.sheet-desc { margin-top: 14px; font-size: 18px; line-height: 1.6; color: var(--body); }
.sheet-cols { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; }
.sheet-cols > div { flex: 1 1 240px; min-width: 0; }
.sheet-side { display: flex; flex-direction: column; border-left: 2px solid var(--ink); }
.sheet-cell { padding: 20px 24px; border-bottom: 1px solid var(--ink); }
.sheet-cell h3.callout { font: 500 13px/1.4 var(--font-display); letter-spacing: 0.18em; }
.sheet-cell p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.sheet-code { display: flex; justify-content: space-between; align-items: baseline; }
.sheet-code .code { font: 600 32px var(--font-display); color: var(--navy); }
.sheet-cta { padding: 24px; margin-top: auto; }
.sheet-cta .btn { width: 100%; padding: 0 16px; font-size: 15px; }
@media (max-width: 1023px) {
  .sheet { grid-template-columns: 1fr; }
  .sheet-side { border-left: 0; border-top: 2px solid var(--ink); display: grid; grid-template-columns: auto 1fr 1fr; }
  .sheet-cell { border-bottom: 0; border-right: 1px solid var(--ink); }
  .sheet-cta { grid-column: 1 / -1; border-top: 1px solid var(--ink); }
}
@media (max-width: 767px) {
  .sheet-sec { padding-top: 40px; }
  .sheet-main { flex-direction: column; gap: 20px; padding: 20px; }
  .units { flex: none; width: 100%; flex-direction: row; align-self: stretch; padding: 6px; }
  .units span, .units .u-t { height: 18px; flex: 1; }
  .units .u-t { flex: 2; }
  .sheet-desc { font-size: 16px; }
  .sheet-cols { gap: 20px; margin-top: 20px; }
  .sheet-side { display: flex; }
  .sheet-cell { border-right: 0; border-bottom: 1px solid var(--ink); padding: 16px 20px; }
  .sheet-cta { padding: 20px; border-top: 0; }
}

/* ---------- Data center: crews, environments ---------- */
.crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; }
.crew { border-top: 2px solid var(--ink); padding-top: 20px; }
.crew-blocks { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 6px; height: 120px; }
.crew-blocks-4 { width: 130px; }
.crew-blocks-12 { width: 200px; }
.crew-blocks span { width: 28px; height: 28px; }
.cb-s { background: var(--navy); }
.cb-a { background: var(--aqua); }
.cb-p { border: 1.5px dashed var(--ink); }
.crew-title { margin-top: 20px; font-size: 26px; line-height: 1.15; }
.crew p:not(.callout) { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--body); }
.role-chips-wrap { margin-top: 48px; padding: 12px; }
.role-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.role-chips li { padding: 10px 16px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; }
.role-chips .chip-solid { background: var(--navy); border-color: var(--navy); color: var(--white); }
.crews-more { margin-top: 28px; font-size: 16px; }
.env-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.env-p { margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--body); }
@media (max-width: 767px) {
  .crew-grid { grid-template-columns: 1fr; gap: 32px; }
  .crew-blocks { height: auto; }
  .role-chips li { font-size: 15px; padding: 8px 12px; }
  .env-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Logistics and staffing pages ---------- */
.page-hero-side { display: flex; flex-direction: column; gap: 28px; }
.page-hero-art { width: 100%; max-width: 260px; height: auto; }
.crew-mark { flex: 0 0 62px; align-self: flex-start; display: grid; grid-template-columns: 28px 28px; gap: 6px; }
.crew-mark span { width: 28px; height: 28px; }
.to-rack .section-head { margin-bottom: 40px; }
.mini-route { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.mini-route::before { content: ''; position: absolute; left: 23px; right: calc(100% / 6 - 23px); top: 21px; height: 3px; background: var(--aqua); }
.mini-route li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-right: 16px; }
.mini-route a { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.mr-num {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font: 600 16px var(--font-display); background: var(--navy); color: var(--white);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.mr-name { font: 600 18px/1.2 var(--font-display); }
.mr-rec { font-size: 14px; line-height: 1.5; color: var(--muted); }
.mr-next .mr-num { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mr-next a:hover .mr-name { color: var(--aqua-text); text-decoration: underline; }
.steps-wrap { padding: 12px; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.steps li { padding: 20px 20px 4px 0; }
.step-num { font: 500 13px var(--font-display); letter-spacing: 0.18em; color: var(--aqua-text); }
.step-title { margin-top: 6px; font-size: 22px; line-height: 1.2; }
.steps p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--body); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.info-card { border-top: 2px solid var(--navy); padding-top: 16px; }
.info-card.verify { padding: 16px 16px 16px; }
.info-card p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--body); }
.section-xs { padding-top: 32px; padding-bottom: 32px; }
.job-seekers p { font-size: 16px; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .mini-route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .mini-route::before { display: none; }
}
@media (max-width: 767px) {
  .page-hero-side { gap: 20px; }
  .page-hero-art { max-width: 200px; }
  .crew-mark { flex: none; grid-template-columns: repeat(4, 28px); }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 16px 0 4px; border-bottom: 1px solid var(--rule); }
  .mini-route { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
}

/* ---------- Federal, Who we serve, Past performance, About, Capability statements, FAQ ---------- */
.page-hero-actions { margin-top: 32px; }
.fact-box { margin: 0; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; background: var(--white); margin-inline: 6px; align-self: end; }
.fact-box > div { padding: 16px 22px; border-bottom: 1px solid var(--ink); }
.fact-box > div:last-child { border-bottom: 0; }
.fact-box dt { color: var(--muted); }
.fact-box dd { margin: 6px 0 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.fact-box-wide { display: grid; grid-template-columns: 1fr 1fr; align-self: start; }
.fact-box-wide > div { border-bottom: 1px solid var(--ink); }
.fact-box-wide > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.fact-box-wide > div:nth-last-child(-n+2) { border-bottom: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 64px; align-items: start; }
.two-col .callout + .h2-sm { margin-top: 10px; }
.two-col-actions { margin-top: 24px; }
.history-note { margin-top: 14px; }
.two-col .text-link { margin-top: 8px; }
.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.55; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px; background: var(--navy); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.audiences .aud { padding: 64px 0; border-bottom: 1px solid var(--rule); }
.audiences .aud:nth-child(even) { background: var(--sheet); }
.aud-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 24px 64px; }
.aud-name { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; font-stretch: 85%; margin-top: 8px; }
.aud-headline { font: 600 26px/1.2 var(--font-display); font-stretch: 92%; }
.aud-body .intro { margin-top: 12px; }
.aud-points { margin-top: 16px; }
.aud-body .btn-row { margin-top: 24px; }
.pill-tags { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.pill-tags a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.pill-tags a:hover { border-color: var(--aqua); color: var(--aqua-text); }
.hist { border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; margin: 6px; padding: 32px; background: var(--white); }
.hist-label { display: flex; gap: 16px; align-items: baseline; padding: 14px 18px; background: var(--navy); color: var(--white); }
.hist-label .callout { color: #9FC0E8; flex: none; }
.hist-label p { font-weight: 600; font-size: 16px; }
.hist-facts { margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hist-facts dt { color: var(--muted); }
.hist-facts dd { margin: 6px 0 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.hist-sub { margin-top: 32px; }
.hist-areas { list-style: none; padding: 0; margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.hist-areas li { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); font: 600 18px/1.3 var(--font-display); }
.pp-fhf-note { margin-top: 20px; max-width: 640px; font-size: 16px; line-height: 1.7; color: var(--body); }
.cases-empty { padding: 28px; border: 1.5px dashed var(--ink); background: var(--white); font-size: 18px; font-weight: 600; text-align: center; }
.case { margin-top: 32px; padding: 28px; border: 1.5px solid var(--ink); background: var(--white); }
.case-flag { color: var(--muted); }
.case .h3 { margin-top: 6px; }
.case-fields { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--rule); }
.case-fields > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.case-fields dt { font-weight: 700; font-size: 15px; }
.case-fields dd { margin: 0; font-size: 15px; color: var(--body); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.mv { padding: 36px; border: 1.5px solid var(--ink); background: var(--white); }
.mv-solid { background: var(--navy); border-color: var(--navy); color: var(--white); }
.mv-solid .callout { color: #9FC0E8; }
.mv-text { margin-top: 12px; font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--font-display); font-stretch: 90%; }
.values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lead-placeholder { border: 1.5px dashed var(--ink); padding: 20px 22px; background: var(--white); }
.lead-placeholder .note { margin-top: 10px; }
.statement-grid-lg .doc { flex-basis: 200px; height: 260px; }
.cs-inside { margin-top: 20px; }
.cs-note { margin-top: 28px; font-size: 16px; }
.faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-nav ol { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.faq-nav a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.faq-nav a:hover { color: var(--aqua-text); }
.faq-group + .faq-group { margin-top: 56px; }
.faq-h { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; font-stretch: 88%; margin-bottom: 16px; }
.faq-item { border-top: 1.5px solid var(--ink); }
.faq-item:last-child { border-bottom: 1.5px solid var(--ink); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; font: 600 20px/1.3 var(--font-display); font-stretch: 95%;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); font: 600 20px/1 var(--font-display); }
.faq-item[open] summary::after { content: '\2212'; background: var(--aqua); border-color: var(--aqua); }
.faq-item summary:hover { color: var(--aqua-text); }
.faq-a { padding: 0 48px 20px 0; }
.faq-a p { font-size: 17px; line-height: 1.65; color: var(--body); }
@media (max-width: 1023px) {
  .two-col, .aud-inner { grid-template-columns: 1fr; }
  .hist-facts { grid-template-columns: 1fr 1fr; }
  .hist-areas { grid-template-columns: 1fr 1fr; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-nav { position: static; }
  .faq-nav ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .faq-nav a { border: 1.5px solid var(--ink); padding: 4px 12px; min-height: 40px; font-size: 14px; }
}
@media (max-width: 767px) {
  .fact-box-wide { grid-template-columns: 1fr; }
  .fact-box-wide > div:nth-child(odd) { border-right: 0; }
  .fact-box-wide > div:nth-last-child(2) { border-bottom: 1px solid var(--ink); }
  .audiences .aud { padding: 40px 0; }
  .aud-headline { font-size: 22px; }
  .aud-body .btn-row .btn { width: 100%; }
  .hist { padding: 20px; }
  .hist-label { flex-direction: column; gap: 4px; }
  .hist-facts, .hist-areas { grid-template-columns: 1fr; }
  .case { padding: 20px; }
  .case-fields { grid-template-columns: 1fr; }
  .case-fields > div { grid-template-columns: 100px 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .mv { padding: 24px; }
  .values { grid-template-columns: 1fr; }
  .statement-grid-lg .doc { width: 150px; height: 194px; }
  .faq-item summary { font-size: 18px; }
  .faq-a { padding-right: 0; }
}

/* ---------- Legal pages, 404 ---------- */
.page-hero-sm { padding: 56px 0 48px; }
.draft-banner { display: inline-block; margin-bottom: 24px; padding: 10px 16px; border: 2px dashed var(--verify); background: #FFF7E8; font-size: 15px; line-height: 1.5; }
.draft-banner strong { letter-spacing: 0.08em; }
.legal-date { margin-top: 16px; }
.legal-inner { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc ol { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.legal-toc a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.legal-toc a:hover { color: var(--aqua-text); }
.legal-body { max-width: 720px; }
.legal-body h2 { font-size: 28px; line-height: 1.15; font-stretch: 90%; margin-top: 44px; scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--body); }
.legal-body ul { padding-left: 20px; }
.legal-body li + li { margin-top: 6px; }
.nf { border-bottom: 1px solid var(--rule); }
.nf-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.nf-copy .h1-page { margin-top: 12px; }
.nf-copy .lead { margin-top: 20px; }
.nf-actions { margin-top: 32px; }
.nf-links { margin-top: 40px; }
.nf-links h2 { color: var(--muted); }
.nf-links ul { list-style: none; padding: 0; margin-top: 10px; border-top: 1.5px solid var(--ink); max-width: 480px; }
.nf-links a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); color: var(--ink); font-weight: 600; text-decoration: none; }
.nf-links a:hover { color: var(--aqua-text); }
.nf-art { width: 100%; max-width: 300px; height: auto; justify-self: center; }
@media (max-width: 1023px) {
  .legal-inner { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
}
@media (max-width: 767px) {
  .page-hero-sm { padding: 32px 0 32px; }
  .nf-inner { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 48px; }
  .nf-art { max-width: 200px; order: -1; }
  .nf-actions .btn { width: calc(100% - 8px); }
  .legal-body h2 { font-size: 24px; margin-top: 36px; }
  .legal-body p, .legal-body ul { font-size: 16px; }
}

/* =====================================================================
   Contact: request paths and form
   ===================================================================== */
.page-contact .header-cta { display: none; }
.contact { padding-top: 64px; }
.contact-lead { margin-top: 20px; max-width: 620px; }
.paths { border: 0; margin: 40px 0 0; padding: 0; min-width: 0; }
.path-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ink); }
.path-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 92px; padding: 16px 18px;
  border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--white); color: var(--ink); cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.path-card:nth-child(3n) { border-right: 0; }
.path-card:nth-child(n+4) { border-bottom: 0; }
.path-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.path-card .callout { font-size: 12px; opacity: 0.8; }
.path-card-name { font: 600 19px/1.15 var(--font-display); }
.path-card:hover { background: var(--sheet); }
.path-card:has(input:checked) { background: var(--navy); color: var(--white); }
.path-card:has(input:focus-visible) { outline: 3px solid var(--aqua); outline-offset: -5px; }
.contact-layout { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 48px; }
.form-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.form-hint { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--body); }
.form-note { font-size: 14px; color: var(--muted); }
.path-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.field-row { display: flex; flex-wrap: wrap; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row > .field { flex: 1 1 260px; }   /* width sizing only inside a row; never as height in a column */
.field-row > .field-sm { flex: 1 1 160px; }
.field label, .field-checks legend { font: 600 15px/1.4 var(--font-body); color: var(--ink); }
.opt { font-weight: 400; color: var(--muted); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--font-body); color: var(--ink);
  border: 1.5px solid var(--field-border); border-radius: 0; padding: 12px 14px; min-height: 50px; background: var(--white);
}
.field textarea { resize: vertical; }
.field input[type="file"] { padding: 11px 14px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.field-hint { font-size: 14px; color: var(--muted); }
.field-checks { border: 0; padding: 0; margin: 0; }
.field-checks legend { margin-bottom: 6px; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); margin: 0; }
.field.has-error input:not([type="checkbox"]), .field.has-error select, .field.has-error textarea { border-color: var(--error); border-width: 2px; }
.field-error { margin: 0; font: 600 14px/1.4 var(--font-body); color: var(--error); }
.error-summary { border: 2px solid var(--error); background: #FEF3F2; padding: 18px 20px; }
.error-summary:focus { outline: 3px solid var(--aqua); outline-offset: 3px; }
.error-summary-title { font: 700 17px/1.4 var(--font-body); color: var(--ink); }
.error-summary ul { margin-top: 8px; padding-left: 18px; font-size: 15px; line-height: 1.7; }
.error-summary a { color: var(--error); font-weight: 600; }
.sensitive { display: flex; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--ink); background: var(--sheet); }
.sensitive svg { flex: 0 0 22px; }
.sensitive p { font-size: 15px; line-height: 1.6; }
.sensitive-staff { margin-top: 8px; }
.form-actions .btn { min-height: 54px; padding: 0 30px; }
/* Social links (footer and Contact): plain links with inline SVG icons; no third-party widgets or
   scripts (Privacy). Outlined circles (owner's choice, Variant A) that fill on hover. White on navy
   in the footer; .social-light inverts to navy for light areas. */
.footer-connect-h { margin-top: 28px; }
.social { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; }
.aside-cell .social { margin-top: 10px; }
/* The contact block's own link rule (.aside-cell a) comes later and would un-centre the icons. */
.aside-cell .social a { display: inline-flex; margin-top: 0; font-size: inherit; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; --icon-fg: var(--white); --icon-bg: var(--navy); color: var(--icon-fg); }
.social-light a { --icon-fg: var(--navy); --icon-bg: var(--white); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social-a a { border: 1.5px solid var(--icon-fg); border-radius: 50%; transition: background-color 0.15s, color 0.15s; }
.social-a a:hover { background: var(--icon-fg); color: var(--icon-bg); }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

/* Help chat (M9): launcher at 768 px and up; on phones "Help" sits in the bottom bar. */
.chat-launcher { display: none; }
@media (min-width: 768px) {
  .chat-launcher {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 24px; bottom: 24px; z-index: 45; min-height: 48px; min-width: 88px; padding: 0 22px;
    background: var(--navy); color: var(--white); border-radius: 0;
    /* A visible edge on every background: the white border shows on the navy footer, the thin dark
       ring and shadow on white and grid sections. The focus ring is the site's :focus-visible outline. */
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px rgba(14, 20, 32, 0.45), 0 4px 14px rgba(14, 20, 32, 0.28);
    font: 600 16px/1 'Public Sans', system-ui, sans-serif; cursor: pointer;
  }
}
.chat {
  position: fixed; z-index: 60; background: var(--white); color: var(--body); border: 1.5px solid var(--ink);
  display: flex; flex-direction: column; font-size: 16px; line-height: 1.5;
  right: 24px; bottom: 88px; width: 380px; max-height: min(620px, calc(100vh - 120px));
}
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; background: var(--navy); color: var(--white); }
.chat-title { margin: 0; font: 600 20px/1.2 'Saira', system-ui, sans-serif; color: var(--white); }
.chat-title:focus { outline: none; }
.chat-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--white); cursor: pointer; }
.chat-close svg path { stroke: currentColor; stroke-width: 2; }
.chat-close:focus-visible { outline-color: var(--aqua-light); outline-offset: -3px; }
.chat-body { overflow-y: auto; padding: 16px 20px 20px; }
.chat-msg p { margin: 0 0 10px; }
.chat-strong { font-weight: 600; color: var(--ink); }
.chat-list { margin: 0 0 12px; padding-left: 18px; }
.chat-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.chat-option {
  display: flex; align-items: center; min-height: 44px; width: 100%; padding: 10px 14px; text-align: left;
  background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); font: 500 15px/1.35 'Public Sans', system-ui, sans-serif;
  cursor: pointer; text-decoration: none;
}
.chat-option:hover { background: var(--sheet); }
.chat-link { color: var(--navy); font-weight: 600; }
.chat-back { border-color: var(--rule); }
.chat-day { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.chat-form .field { margin-bottom: 12px; }
.chat-error:empty { display: none; }
.chat-error { color: #A4262C; margin: 0 0 10px; }
@media (max-width: 767px) {
  .chat { left: 0; right: 0; top: 0; bottom: 0; width: auto; max-height: none; border: 0; }
  html.chat-open, html.chat-open body { overflow: hidden; }
}

/* Careers */
.careers-types-lead { margin-bottom: 8px; }
.careers-types { max-width: 640px; font-size: 18px; }
.page-careers .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.roles-empty { font-size: 18px; line-height: 1.6; max-width: 640px; }
.roles-note { margin-top: 16px; max-width: 640px; font-size: 16px; color: var(--body); }
.role-list { list-style: none; padding: 0; display: grid; gap: 24px; }
.role-card { background: #fff; border-top: 2px solid var(--navy); padding: 20px 24px; }
.role-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 10px 0 12px; }
.role-facts dd { margin: 2px 0 0; font-weight: 600; }
.role-apply { margin-top: 10px; font-size: 15px; }
.careers-eeo { max-width: 880px; }
.careers-eeo .draft-banner { margin: 16px 0; }
@media (max-width: 767px) { .page-careers .info-grid { grid-template-columns: 1fr; } }
/* Spam honeypot (contact form): off-screen and hidden from assistive tech; people never see or fill it. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-left: 4px solid var(--aqua); background: var(--sheet); padding: 16px 18px; font-size: 16px; line-height: 1.6; }
.form-status:focus { outline: 3px solid var(--aqua); outline-offset: 3px; }
.contact-aside { flex: 1 1 300px; min-width: 0; }
.aside-box { border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; margin: 6px; }
.aside-cell { padding: 22px 24px; border-bottom: 1px solid var(--ink); }
.aside-cell:last-child { border-bottom: 0; }
.aside-cell a { display: inline-block; margin-top: 6px; font-size: 18px; font-weight: 600; }
.aside-cell .note { margin-top: 4px; }
.aside-strong { margin-top: 6px; font-size: 18px; font-weight: 600; }
.aside-cell .list { margin-top: 10px; font-size: 15px; color: var(--body); }
@media (max-width: 767px) {
  .contact { padding-top: 40px; }
  .path-cards { grid-template-columns: 1fr 1fr; }
  .path-card { min-height: 84px; padding: 12px 14px; }
  .path-card:nth-child(3n) { border-right: 1px solid var(--ink); }
  .path-card:nth-child(2n) { border-right: 0; }
  .path-card:nth-child(n+4) { border-bottom: 1px solid var(--ink); }
  .path-card:nth-child(n+5) { border-bottom: 0; }
  .path-card-name { font-size: 17px; }
  .contact-layout { gap: 40px; margin-top: 32px; }
  .form-actions .btn { width: 100%; }
}

/* =====================================================================
   Motion. Everything below runs only when the visitor allows motion.
   Content is readable from the first frame; only decoration animates.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Hero opening sequence, about 2 s: grid, rack outline, units fill bottom to top,
     cable route, then "to deployed." and the primary button go from outline to solid. */
  .hero::before { animation: fx-fade 450ms ease-out both; }
  .hero .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: fx-draw 750ms 150ms cubic-bezier(0.4, 0, 0.2, 1) forwards, fx-fill 350ms 600ms ease-out both; }
  .hero-art-mobile .draw { stroke-dasharray: 800; stroke-dashoffset: 800; }
  .hero .planned-u, .hero .labels { animation: fx-fade 300ms 700ms both; }
  .hero .unit { animation: fx-fade 180ms calc(820ms + var(--i) * 70ms) ease-out both; }
  .hero .leds { animation: fx-fade 260ms 1450ms both; }
  .hero .draw2 { stroke-dasharray: 600; stroke-dashoffset: 600; animation: fx-draw 450ms 1350ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
  .hero-deployed { color: transparent; -webkit-text-stroke: 1.5px var(--ink); animation: fx-ink 420ms 1650ms ease-out forwards; }
  .hero-cta { animation: fx-solid 420ms 1700ms ease-out backwards; }

  /* Reveal on scroll (classes added by site.js; .js is set in <head>). */
  .js [data-reveal], .js [data-reveal-group] > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity 520ms ease-out, transform 620ms var(--ease);
    transition-delay: calc(var(--d, 0) * 80ms);
  }
  .js [data-reveal].is-in, .js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
}
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-ink { to { color: var(--ink); -webkit-text-stroke-width: 0; } }
@keyframes fx-solid {
  from { background-color: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
  to { background-color: var(--navy); color: var(--white); box-shadow: inset 0 0 0 0 var(--navy); }
}
@media print {
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .site-header, .utility, .mobile-bar, .site-menu { position: static !important; }
}