/* ==========================================================================
   QRC Technologies — Design System v4 "SIGNAL // NOISE"
   Original dark spectrum-operations theme. Brand blues sampled from the QRC
   gradient logotype; field footage: U.S. DoD (public domain).
   Display/UI and body: Roboto, one face separated by weight, matching the
   product spec sheets · Readouts: IBM Plex Mono
   ========================================================================== */

:root {
  --void: #04070d;
  --panel: #0a111d;
  --panel-2: #0e1626;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);

  --text: #e8eef5;
  --text-dim: #97a5b8;
  --text-faint: #7d8ca1;

  --cyan: #2ba3d4;        /* brand — sampled from the QRC logotype gradient */
  --cyan-hot: #5cc8f2;
  --cyan-deep: #16496f;
  --amber: #ffb454;       /* alert accent — LIVE dots, warnings, sparingly */

  --font-ui: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1280px;
  --glow: 0 0 24px rgba(43, 163, 212, 0.35);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-hot); text-decoration: none; }
a:hover { color: var(--text); }
::selection { background: var(--cyan); color: var(--void); }

h1, h2, h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.8rem, 7vw, 5.8rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h2.giant { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
h3 { font-size: 1.3rem; letter-spacing: 0; }
p { margin: 0 0 1em; color: var(--text-dim); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
/* brighter flat cyan so the accent word stands out on color alone — no glow */
.accent { color: #33bff0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--cyan); color: var(--void); padding: 10px 16px; }
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--cyan-hot); outline-offset: 2px; }
.log-row:focus-visible { background: rgba(43, 163, 212, 0.06); outline-offset: -2px; }
.log-row:focus-visible .log-row__name { color: var(--cyan-hot); }

/* film grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
  will-change: transform; transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* HUD labels + status dot */
.hud-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan-hot);
}
.hud-row { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
.hud-row .hud-label:nth-child(n+2) { color: var(--text-faint); }
.hud-row--tight { margin: 18px 0 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.sec-head { margin-bottom: 44px; }
.sec-head .hud-label { margin-bottom: 14px; }
.sec-sub { max-width: 40em; }
.section { padding: 96px 0; position: relative; }
.section--line { border-top: 1px solid var(--line); }
.section--flush { padding-bottom: 0; }
/* first section after the home hero: ticker removed, pull it up closer */
.section--tight { padding-top: 88px; }
/* news list: extra air between the hero band and the filter chips */
.section--roomy { padding-top: 128px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.btn--primary { background: var(--cyan); color: var(--void); }
.btn--primary:hover { background: var(--cyan-hot); color: var(--void); box-shadow: var(--glow); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn--ghost:hover { border-color: var(--cyan-hot); color: var(--cyan-hot); }
.btn--sm { padding: 9px 18px; font-size: 0.8rem; }
.btn--lg { padding: 17px 40px; font-size: 1rem; }

.link-cta {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cyan-hot);
  border-bottom: 1px solid var(--cyan-deep); padding-bottom: 4px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4, 7, 13, 0.96);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 88px; }
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { height: 42px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a:not(.btn) {
  font-family: var(--font-ui); font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); padding: 8px 14px;
}
.site-nav a:not(.btn):hover { color: var(--text); }
.site-nav a.is-active { color: var(--cyan-hot); }
.site-nav .btn { margin-left: 12px; font-weight: 700; }
.site-nav .btn--primary { background: var(--cyan-hot); color: var(--void); }
.site-nav .btn--primary:hover { background: var(--cyan); color: var(--void); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: transform 0.2s ease, opacity 0.2s ease; }


/* ---------- native form extras (contact RFQ + support) ---------- */
.form-step { display: block; margin-bottom: 12px; }
.form-step--c1 { color: var(--cyan-hot); }
.form-step--c2 { color: #58dfc0; }
.form-split { border-top: 1px solid var(--line); margin: 20px 0 16px; }
.form-legal { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-faint); margin: 16px 0 0; }
.form-note { font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; color: var(--cyan-hot); margin: 14px 0 0; }
.form-note a { color: var(--cyan-hot); text-decoration: underline; }
.form-note--err { color: var(--amber); }
/* a native (no-JavaScript) submit comes back from Formspree to #sent-<kind>,
   which reveals the confirmation without any script */
.form-note:target { display: block; }
.form-note { scroll-margin-top: 112px; }
.form-note--err a { color: var(--amber); }
.fcard .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fcard { position: relative; }
.fcard .btn[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
/* the Support page's three forms share one card; chips act as tabs once
   js/main.js has run (html.js), and stack as plain sections without it */
.fcard--tabs { max-width: 860px; }
/* a hash link to a panel lands it just under the sticky header; with tabs
   running the margin also covers the card's padding, tab bar and descriptor
   (one row of chips wide, two rows narrow, three on a phone) */
.form-panel { scroll-margin-top: 112px; }
.js .form-panel { scroll-margin-top: 202px; }
@media (max-width: 660px) { .js .form-panel { scroll-margin-top: 242px; } }
@media (max-width: 460px) { .js .form-panel { scroll-margin-top: 282px; } }
.sec-sub.form-intro--tabs { max-width: 860px; margin-bottom: 28px; }
.form-tabs { display: none; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; }
.js .form-tabs { display: flex; }
.form-tabs .chip[aria-selected="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--void); }
.js .form-panel:not(.is-active) { display: none; }
.form-panel + .form-panel { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line-strong); }
.js .form-panel + .form-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.form-panel .panel-desc { color: var(--text-dim); font-size: 0.97rem; margin: 0 0 22px; max-width: 60em; }
.fcard.fcard--tabs .fineprint { margin-top: 32px; }
.fcard .fsub { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan-hot); margin: 26px 0 2px; }
.fcard input, .fcard select, .fcard textarea { color-scheme: dark; }
.fcard .btn.is-sent, .fcard .btn.is-sent:hover { opacity: 1; background: transparent; color: var(--cyan-hot); border: 1px solid var(--cyan); cursor: default; transform: none; box-shadow: none; }

/* ---------- background video ---------- */
.bg-video, .stack-panel__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}

/* ---------- hero ---------- */
/* the band is content + padding tall on every screen — no viewport-based
   min-height, so the gap under the CTAs is the same on any monitor */
.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; border-bottom: 1px solid var(--line); }
/* hero loop is pre-graded in the edit; no lift needed */
.hero > .bg-video { filter: none; }
@media (max-width: 560px) {
  /* phones crop the 2.4:1 loop to a center strip; bias right so the tower
     stays framed and the logo end-beat survives the crop */
  .hero > .bg-video { object-position: 55% center; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* halo page: barely-there pocket keeps the headline readable while the
     loop plays at nearly full exposure; base still melts into the page.
     The pocket is sized by measurement, not feel: at 0.42 the white headline
     holds 5.19:1 against the loop's brightest frame, clear of the 4.5:1 AAA
     line for large text, where the 0.55 it replaced was spending contrast the
     headline never needed. The base fade eases too, since the bottom of the
     frame carries no text to protect. */
  background:
    radial-gradient(120% 82% at 3% 26%, rgba(4, 7, 13, 0.42) 0%, rgba(4, 7, 13, 0.28) 30%, rgba(4, 7, 13, 0.13) 50%, rgba(4, 7, 13, 0.04) 70%, rgba(4, 7, 13, 0) 84%),
    linear-gradient(180deg, rgba(4, 7, 13, 0.06) 0%, rgba(4, 7, 13, 0.02) 45%, rgba(4, 7, 13, 0.10) 72%, rgba(4, 7, 13, 0.26) 86%, rgba(4, 7, 13, 0.62) 95%, var(--void) 99%);
}
/* WBT-3202 full-height chassis: right-pinned so the scene (operator +
   antenna at the image's right edge) is always fully in frame; the panel
   stays at the band base and cropping only ever takes fins from the left/top */
.hero__layer { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; }

.hero__inner { position: relative; z-index: 3; padding-top: 84px; padding-bottom: 190px; width: 100%; }
.hero h1 { max-width: 9.5em; margin-bottom: 22px; }
.hero .lead strong { font-weight: 500; color: var(--text); }
/* uniform medium weight across the whole lede for readability over the art */
.hero .lead { font-size: 1.18rem; max-width: 40em; color: var(--text); font-weight: 500; }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 34px; }
/* matched widths: the stack reads as a deliberate control group, not two strays */
.hero__cta .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 340px; }
.hero__cta .btn--primary { border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.hero__cta .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--glow); }
.hero__cta .btn--ghost { background: rgba(10, 16, 26, 0.35); border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.hero__cta .btn--ghost:hover { background: rgba(10, 16, 26, 0.5); border-color: var(--cyan-hot); color: var(--cyan-hot); box-shadow: 0 0 24px rgba(92, 200, 242, 0.2); }
@media (max-width: 480px) {
  /* 340px min-width would overflow narrow phones; go full-width, still matched */
  .hero__cta { align-items: stretch; }
  .hero__cta .btn { min-width: 0; width: 100%; }
}
.hero__spectrum { display: block; width: 100%; height: 90px; }

/* ---------- representative customers — static strip ---------- */
.cust-strip { border-top: 1px solid var(--line); }
.cust-strip__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 44px 64px; padding: 68px 0 56px;
}
.cust-strip img { height: 64px; width: auto; max-width: none; flex-shrink: 0; }

/* ---------- capability panels ---------- */
.stack { display: block; }
.stack-panel {
  position: relative;
  display: block; min-height: clamp(380px, 58vh, 540px);
  overflow: hidden; border-top: 1px solid var(--line-strong);
}
.stack-panel__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(4, 7, 13, 0.9) 0%, rgba(4, 7, 13, 0.45) 60%, rgba(4, 7, 13, 0.65) 100%);
}
.stack-panel__bg { transition: transform 0.7s ease; }
.stack-panel:hover .stack-panel__bg { transform: scale(1.04); }
.stack-panel__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(380px, 58vh, 540px);
  padding-top: 44px; padding-bottom: 44px;
}
.stack-panel h3 { font-size: clamp(1.8rem, 4vw, 3.2rem); margin: 12px 0 10px; }
.stack-panel p { max-width: 34em; font-size: 1.05rem; color: #c3cedb; margin-bottom: 22px; }
.stack-panel:hover .link-cta { color: var(--text); border-bottom-color: var(--cyan-hot); }

/* ---------- signal log ---------- */
.log { border-top: 1px solid var(--line-strong); }
.log-row {
  display: grid;
  grid-template-columns: 64px 1.2fr 1fr 1fr;
  align-items: center; gap: 20px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.log-row:hover { background: rgba(43, 163, 212, 0.06); padding-left: 18px; }
/* products index runs without the frequency column — retire its track
   (the two-class selector outranks the width overrides below, so each
   breakpoint's template is restated here minus the freq track) */
.log--no-freq .log-row { grid-template-columns: 64px 1.2fr 1fr; }
@media (max-width: 1024px) {
  .log--no-freq .log-row { grid-template-columns: 44px 1.4fr 1fr; }
}
@media (max-width: 720px) {
  .log--no-freq .log-row { grid-template-columns: 36px 1fr; }
}
.log-row__idx { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); }
.log-row__name { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.9rem); text-transform: uppercase; letter-spacing: -0.015em;
  /* badges and toggle chips center on the name's optical midline instead of
     hanging from its baseline */
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; }
.log-row:hover .log-row__name { color: var(--cyan-hot); }
.log-row__fam { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.log-row__freq { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); text-align: right; }
.log-row.is-hidden { display: none; }


/* filter chips */
.chip-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chip-bar--wrap { margin-bottom: 0; }
.chip {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); background: transparent;
  border: 1px solid var(--line-strong);
  padding: 8px 16px; cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--cyan); color: var(--cyan-hot); }
.chip.is-active { background: var(--cyan); border-color: var(--cyan); color: var(--void); }
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line-strong); color: var(--text-dim); }

/* ---------- stats ---------- */
.stats { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); padding: 72px 0; }
.stats__sweep {
  position: absolute; top: 50%; left: 50%; width: 900px; height: 900px;
  margin: -450px 0 0 -450px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(43, 163, 212, 0.14), transparent 40deg);
  animation: sweep 8s linear infinite; opacity: 0.6; pointer-events: none;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.stats__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat strong { display: block; font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--text); letter-spacing: -0.02em; }
.stat span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

/* ---------- build manifest (home) ---------- */
.build-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* index-tile cards: same DNA as the news date tiles — numbered side tile
   with the card's accent color on its outer edge, mono kicker above the name */
.build-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 24px;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--acc, var(--cyan));
  background: var(--panel); color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.build-card:hover { border-color: var(--cyan-deep); border-left-color: var(--acc, var(--cyan)); transform: translateY(-2px); }
.build-card__kick { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; color: var(--acc, var(--cyan-hot)); }
.build-card__name { font-family: var(--font-ui); font-weight: 700; font-size: 1.08rem; text-transform: uppercase; letter-spacing: -0.015em; }
.build-card__desc { font-size: 0.93rem; color: var(--text-dim); line-height: 1.65; }
/* non-navigating cards (numbered workflow steps): keep the tile, drop the lift */
.build-card--static { cursor: default; }
.build-card--static:hover { border-color: var(--line-strong); transform: none; }
@media (max-width: 860px) {
  .build-grid { grid-template-columns: 1fr; }
  .build-card { padding: 18px 20px; }
}

/* ---------- operator tiles ---------- */
.op-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.op-tile { margin: 0; position: relative; border: 1px solid var(--line); background: var(--panel); }
.op-tile img { width: 100%; height: 210px; object-fit: cover; filter: saturate(0.55) contrast(1.05); transition: filter 0.3s ease; }
.op-tile:hover img { filter: saturate(1); }
.op-tile figcaption { padding: 16px 18px; font-family: var(--font-ui); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.op-tile figcaption .hud-label { display: block; margin-bottom: 6px; color: var(--text-faint); }

/* ---------- page hero (interior) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--panel) center / cover no-repeat;
  background-clip: padding-box;
  border-bottom: 1px solid var(--line);
}
.page-hero__scrim {
  position: absolute; inset: -1px; z-index: 1;
  background: linear-gradient(90deg, rgba(4, 7, 13, 0.84) 25%, rgba(4, 7, 13, 0.42) 100%);
}
/* capability log: live RSRP survey trace drawn on canvas */
.page-hero--rsrp { background: #070c16; }
.page-hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
/* capabilities: bias the deck-dusk crop so the helicopter stays in frame on narrow screens */
.page-hero--cap .bg-video { object-position: 66% center; }
/* on wide screens the short band crops vertically from the frame's center,
   which starts below the rotor — lift the window so the full blades show */
@media (min-width: 1100px) {
  .page-hero--cap .bg-video { object-position: 66% 36%; }
}
/* products index: lab bench scene, engineers at right; wide monitors get
   the extended plate so their shallow window still shows the full bench */
.page-hero--products .bg-video { object-position: 58% 46%; }
@media (max-width: 560px) { .page-hero--products .bg-video { object-position: 64% 46%; } }
/* status light 4 on the panel breathes green; positioned by JS to track the
   cover-fit image across viewports */
.hero__led {
  position: absolute; z-index: 2; border-radius: 50%;
  background: #57e389; pointer-events: none;
  box-shadow: 0 0 6px 1px rgba(87, 227, 137, 0.65), 0 0 16px 5px rgba(87, 227, 137, 0.28);
  transform: translate(-50%, -50%);
  animation: led-pulse 2.8s ease-in-out infinite;
}
@keyframes led-pulse { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) { .hero__led { animation: none; opacity: 0.55; } }
body.motion-paused .hero__led { animation-play-state: paused; }
.page-hero--cap .page-hero__scrim {
  background:
    radial-gradient(78% 140% at 9% 48%, rgba(4, 7, 13, 0.46) 0%, rgba(4, 7, 13, 0.18) 38%, rgba(4, 7, 13, 0) 60%),
    linear-gradient(rgba(4, 7, 13, 0.03), rgba(4, 7, 13, 0.03));
}
/* products index: careers-style left veil holds the headline over the
   bright blurred lab and releases toward the engineers at right */
.page-hero--products .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.6) 26%, rgba(4, 7, 13, 0.32) 46%, rgba(4, 7, 13, 0.1) 64%, rgba(4, 7, 13, 0) 80%),
    linear-gradient(rgba(4, 7, 13, 0.06), rgba(4, 7, 13, 0.06));
}
/* ---------- news ---------- */
/* no banner art: the dark panel itself is the band, so barely any scrim */
.page-hero--news .page-hero__scrim { background: linear-gradient(rgba(4, 7, 13, 0.2), rgba(4, 7, 13, 0.2)); }
/* news index: CSpOC ops floor - wall displays carry the top, operators
   below; one position works at every width */
.page-hero--news-video .bg-video { object-position: 52% 55%; }
@media (max-width: 560px) { .page-hero--news-video .bg-video { object-position: 50% 50%; } }
/* desktop only (1200px+ keeps tablets on their native framing): taller hero
   bands so wide-band art reads as a scene instead of a zoomed slice */
@media (min-width: 1200px) {
  .page-hero--news-video,
  .page-hero--products,
  .page-hero--about,
  .page-hero--careers,
  .page-hero--support { display: flex; align-items: center; height: 430px; }
  .page-hero--news-video .page-hero__inner,
  .page-hero--products .page-hero__inner,
  .page-hero--about .page-hero__inner,
  .page-hero--careers .page-hero__inner,
  .page-hero--support .page-hero__inner { width: 100%; }
}
.page-hero--news-video .page-hero__scrim {
  /* bright ramp scene: deeper left veil holds the headline */
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.86) 0%, rgba(4, 7, 13, 0.64) 26%, rgba(4, 7, 13, 0.34) 46%, rgba(4, 7, 13, 0.1) 64%, rgba(4, 7, 13, 0) 80%),
    linear-gradient(rgba(4, 7, 13, 0.08), rgba(4, 7, 13, 0.08));
}
.news-card__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.news-card__cta {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan-hot); margin-top: 4px;
}
/* featured story card: the most recent post, image-forward with a cyan rule */
.news-feat {
  display: grid; grid-template-columns: 210px 1fr; text-decoration: none;
  border: 1px solid var(--line-strong); border-left: 3px solid var(--cyan);
  background: var(--panel-2); margin-bottom: 22px; overflow: hidden;
}
.news-feat.is-hidden { display: none; }
.news-feat__img { position: relative; background-size: cover; background-position: center; min-height: 120px; }
.news-feat__badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.16em; color: var(--void); background: var(--cyan-hot); padding: 3px 8px; }
.news-feat__body { padding: 14px 24px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.news-feat__cat { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan-hot); border: 1px solid var(--cyan-hot); padding: 4px 9px; align-self: flex-start; border-radius: 2px; }
.news-feat__meta { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-faint); }
.news-feat__title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.1; color: var(--text); letter-spacing: -0.01em; }
.news-feat__ex { display: none; }
/* editorial list: date tile + category + title, no images */
.news-rows { display: flex; flex-direction: column; }
.news-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: center;
  padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text);
}
.news-row.is-hidden { display: none; }
.news-row:hover { background: rgba(92, 200, 242, 0.03); }
.news-date { width: 130px; height: 84px; background: var(--panel-2); border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cyan); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; padding: 0 12px; }
.news-date__day { font-family: var(--font-ui); font-weight: 700; font-size: 2.6rem; line-height: 0.8; color: var(--cyan-hot); }
.news-date__rt { display: flex; flex-direction: column; gap: 3px; }
.news-date__mo { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text); text-transform: uppercase; }
.news-date__yr { font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-faint); }
.news-row__body { display: flex; flex-direction: column; gap: 6px; }
.news-row__cat { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }
.news-row__title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.28rem); line-height: 1.16; letter-spacing: -0.01em; }
.news-row:hover .news-row__title { color: var(--cyan-hot); }
@media (max-width: 760px) {
  .news-feat { grid-template-columns: 1fr; }
  .news-feat__img { min-height: 200px; }
  .news-feat__body { padding: 24px; }
  .news-feat__title { font-size: 1.6rem; }
}
@media (max-width: 700px) {
  .news-row { grid-template-columns: 104px 1fr; gap: 14px; }
  .news-date { width: 104px; height: 74px; padding: 0 9px; gap: 6px; }
  .news-date__day { font-size: 2.1rem; }
}

/* news layout: article list + events rail on the right */
.news-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.ev-rail { position: sticky; top: 20px; }
.ev-rail h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.3rem; color: var(--text); margin: 6px 0 14px; }
.ev-tl { position: relative; padding-left: 18px; }
.ev-tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong); }
.ev-tle { display: flex; flex-direction: column; gap: 4px; position: relative; padding: 0 0 22px 12px; text-decoration: none; }
.ev-tle__dot { position: absolute; left: -18px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: #55d97c; box-shadow: 0 0 9px rgba(85, 217, 124, 0.65); }
.ev-tle__when { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--cyan-hot); }
.ev-tle__name { font-family: var(--font-ui); font-weight: 700; color: var(--text); font-size: 1.02rem; line-height: 1.15; }
.ev-tle:hover .ev-tle__name { color: var(--cyan-hot); }
.ev-tle__loc { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }
.ev-tle__past { display: none; }
.ev-tle.is-past { opacity: 0.55; filter: grayscale(0.5); }
.ev-tle.is-past .ev-tle__dot { background: var(--line-strong); box-shadow: none; }
.ev-tle.is-past .ev-tle__when { color: var(--text-faint); }
.ev-tle.is-past .ev-tle__past { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; color: var(--text-dim); border: 1px solid var(--line-strong); padding: 2px 7px;
  align-self: flex-start; margin-top: 4px; }
/* the rail list scrolls inside a fixed-height box (same footprint as the four-
   show version) and fades at the bottom edge so the overflow is discoverable */
.ev-tl--scroll { max-height: 432px; overflow-y: auto; padding-right: 14px; padding-bottom: 48px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 72px), transparent); mask-image: linear-gradient(#000 calc(100% - 72px), transparent); }
.ev-tl--scroll::-webkit-scrollbar { width: 4px; }
.ev-tl--scroll::-webkit-scrollbar-thumb { background: var(--line-strong); }
.ev-tl__divider { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); padding: 4px 0 16px 12px; }
.ev-tle__sub { font-family: var(--font-ui); font-size: 0.82rem; color: var(--text-dim); line-height: 1.25; }
div.ev-tle { cursor: default; }
@media (max-width: 1000px) {
  .news-layout { grid-template-columns: 1fr; gap: 40px; }
  .ev-rail { position: static; }
}

/* events timeline: date cards; concluded shows grey out via .is-past */
.ev-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ev-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 148px;
  border: 1px solid var(--line-strong); border-top: 2px solid var(--cyan);
  background: var(--panel); padding: 20px 20px 22px; text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ev-card:hover { border-top-color: var(--cyan-hot); transform: translateY(-3px); }
.ev-card__when { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-hot); }
.ev-card__name { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; line-height: 1.15; color: var(--text); }
.ev-card__loc { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-faint); line-height: 1.5; margin-top: auto; }
.ev-card__past { display: none; }
/* concluded: desaturate and dim, mark it, and drop the interactive lift */
.ev-card.is-past {
  border-top-color: var(--line-strong); background: rgba(10, 17, 29, 0.4); opacity: 0.55;
  filter: grayscale(0.6);
}
.ev-card.is-past:hover { transform: none; border-top-color: var(--line-strong); }
.ev-card.is-past .ev-card__when { color: var(--text-faint); }
.ev-card.is-past .ev-card__past {
  display: inline-block; margin-top: 2px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line-strong); padding: 2px 7px;
}
@media (max-width: 860px) { .ev-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ev-timeline { grid-template-columns: 1fr; } }
/* article: 74ch measure with a sticky related rail in the space to its right;
   below 1100px the rail stacks under the tags */
.article-layout { display: grid; grid-template-columns: minmax(0, 74ch) 300px; gap: 72px; align-items: start; }
.article { max-width: 74ch; }
.article-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.rail-card { border: 1px solid var(--line-strong); background: var(--panel); padding: 20px 22px 22px; }
.rail-card .hud-label { font-size: 0.62rem; margin-bottom: 10px; }
.rail-card h4 { margin: 0 0 6px; font-family: var(--font-ui); font-weight: 700; font-size: 1.08rem; line-height: 1.2; color: var(--text); letter-spacing: 0; }
.rail-card p { font-size: 0.92rem; line-height: 1.55; margin: 0 0 8px; }
.rail-card__spec { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 14px; }
.rail-links { display: flex; flex-direction: column; }
.rail-links a { display: block; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.35; color: var(--text); }
.rail-links a:first-child { border-top: 0; padding-top: 0; }
.rail-links a:last-child { padding-bottom: 0; }
.rail-links a:hover { color: var(--cyan-hot); }
.rail-links small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
@media (max-width: 1100px) { .article-layout { grid-template-columns: 1fr; gap: 40px; } .article-rail { position: static; } }
.article p { color: var(--text-dim); }
.article ul { color: var(--text-dim); margin: 0 0 1em; padding-left: 1.3em; }
.article li { margin-bottom: 0.5em; }
.article__pull {
  font-family: var(--font-ui); font-weight: 600; font-size: 1.3rem; line-height: 1.4;
  color: var(--text); border-left: 3px solid var(--cyan); padding-left: 18px; margin: 1.6em 0;
}
.article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 28px; }
.tag-chip {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--line-strong); padding: 6px 12px;
}
.article__back { margin-top: 8px; }

/* about cinemagraph: frozen silhouettes over a slowly drifting dusk sky */
.about-sky {
  position: absolute; inset: 0; z-index: 0;
  background: #0a1526 url("../img/stills/about-sky-pano-g.jpg") repeat-x;
  background-size: auto 130%; background-position: 0 20%;
  animation: skydrift 90s linear infinite;
}
@keyframes skydrift { from { background-position-x: 0; } to { background-position-x: -3200px; } }
.about-fg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; pointer-events: none;
}
/* desktop serves the wider ridgeline, so the silhouette reads whole instead
   of being scaled up to fill the wider band */
@media (min-width: 1100px) { .about-fg { object-position: center 34%; } }
body.motion-paused .about-sky { animation-play-state: paused; }
/* contact: pocket aimed at the headline zone, not the operator's head —
   the lifted mask/neck detail in the still stays readable above it */
/* contact: field comms scene, laptop at right; crop biases right on
   phones so the screen stays in frame */
.page-hero--contact .bg-video { object-position: 50% 40%; }
@media (max-width: 560px) { .page-hero--contact .bg-video { object-position: 58% 40%; } }
.page-hero--contact .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.72) 0%, rgba(4, 7, 13, 0.5) 28%, rgba(4, 7, 13, 0.24) 48%, rgba(4, 7, 13, 0.06) 66%, rgba(4, 7, 13, 0) 80%),
    linear-gradient(rgba(4, 7, 13, 0.06), rgba(4, 7, 13, 0.06));
}
/* capability sub-pages: the ledes run longer, so the text pocket reaches a bit further */
.page-hero--capsub .page-hero__scrim {
  background:
    radial-gradient(95% 160% at 12% 48%, rgba(4, 7, 13, 0.88) 0%, rgba(4, 7, 13, 0.58) 44%, rgba(4, 7, 13, 0) 74%),
    linear-gradient(rgba(4, 7, 13, 0.16), rgba(4, 7, 13, 0.16));
}
/* on phones the lede spans the full width, so the pocket must reach past it —
   the % radius of a 375px box otherwise dies out mid-sentence over bright imagery */
@media (max-width: 720px) {
  .page-hero--capsub .page-hero__scrim {
    background:
      radial-gradient(150% 160% at 12% 48%, rgba(4, 7, 13, 0.9) 0%, rgba(4, 7, 13, 0.66) 50%, rgba(4, 7, 13, 0) 88%),
      linear-gradient(rgba(4, 7, 13, 0.16), rgba(4, 7, 13, 0.16));
  }
}
/* about: the ridgeline photo is already blue-hour dark, only a light wash needed */
.page-hero--about .page-hero__scrim {
  /* shared left veil, matching the other heroes */
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.6) 26%, rgba(4, 7, 13, 0.32) 46%, rgba(4, 7, 13, 0.1) 64%, rgba(4, 7, 13, 0) 80%),
    linear-gradient(rgba(4, 7, 13, 0.06), rgba(4, 7, 13, 0.06));
}
/* product pages: keep the text zone solid but let the spec-sheet banner read */
/* reduced default: the enhanced banner art carries more of the band */
.page-hero--product .page-hero__scrim {
  background:
    radial-gradient(85% 150% at 10% 48%, rgba(4, 7, 13, 0.72) 0%, rgba(4, 7, 13, 0.42) 40%, rgba(4, 7, 13, 0) 68%),
    linear-gradient(rgba(4, 7, 13, 0.11), rgba(4, 7, 13, 0.11));
}
/* bright-zone banners (QP3, NATO, PBL) keep the deeper pocket for legibility */
.page-hero--pdeep .page-hero__scrim {
  background:
    radial-gradient(85% 150% at 10% 48%, rgba(4, 7, 13, 0.88) 0%, rgba(4, 7, 13, 0.55) 40%, rgba(4, 7, 13, 0) 68%),
    linear-gradient(rgba(4, 7, 13, 0.2), rgba(4, 7, 13, 0.2));
}
/* WBT-5000: vivid ER310-style art takes a dark left edge easing inward plus a
   heavier flat veil so it sits level with the family */
.page-hero--pveil .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.9) 0%, rgba(4, 7, 13, 0.72) 20%, rgba(4, 7, 13, 0.38) 46%, rgba(4, 7, 13, 0.1) 70%, rgba(4, 7, 13, 0.04) 100%),
    linear-gradient(rgba(4, 7, 13, 0.22), rgba(4, 7, 13, 0.22));
}
/* phones: the lede spans the full width, so the reduced pocket must reach further */
@media (max-width: 720px) {
  .page-hero--product .page-hero__scrim {
    background:
      radial-gradient(150% 160% at 12% 48%, rgba(4, 7, 13, 0.86) 0%, rgba(4, 7, 13, 0.6) 50%, rgba(4, 7, 13, 0) 88%),
      linear-gradient(rgba(4, 7, 13, 0.14), rgba(4, 7, 13, 0.14));
  }
}
/* spec-sheet banner strips fill the whole band edge to edge, like the sheets
   themselves; each page's inline background-position steers the crop window
   (x = subject kept in frame on phones, y = vertical window on wide screens) */
.page-hero--product {
  background-size: cover;
  background-repeat: no-repeat;
}
/* keep .wrap's 28px side gutters — a bare 0 here left hero text flush to the viewport edge on mobile */
.page-hero__inner { position: relative; z-index: 2; padding: 72px 28px 58px; }
/* contact: taller band so the field-ops still reads as a scene, not a sliver */
.page-hero--tall .page-hero__inner { padding: clamp(96px, 10.5vw, 150px) 28px clamp(78px, 8.5vw, 122px); }
.page-hero h1 { margin: 14px 0 12px; }
/* the official logotype stands in for the h1 on products that ship one, so it
   tracks the type scale it replaces rather than a fixed pixel size */
.page-hero h1.pname { line-height: 0; }
/* every lockup is padded to the same cap-to-canvas ratio (0.578), so sizing the
   canvas sizes the letters identically across products. The cap lands at about
   66px on desktop, matching the text h1s it stands in for. */
.page-hero h1.pname img { display: block; width: auto; height: clamp(64px, 7.9vw, 114px); }
.page-hero p { max-width: 46em; font-size: 1.1rem; color: #c3cedb; margin: 0; }
.breadcrumbs { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 26px; }
.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--cyan-hot); }
.breadcrumbs .sep { margin: 0 8px; color: var(--cyan-deep); }

/* ---------- embedded product film ---------- */
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line-strong); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- product detail ---------- */
.product-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.product-gallery { position: sticky; top: 96px; }
.product-photo {
  background: #f4f5f7; border: 1px solid var(--line-strong);
  padding: 28px; display: flex; align-items: center; justify-content: center; min-height: 320px;
}
.product-photo img { max-height: 400px; width: auto; object-fit: contain; }
.thumb-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb-row button {
  border: 1px solid var(--line); background: #eef0f3; padding: 6px;
  width: 78px; height: 62px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.thumb-row button img { max-height: 100%; max-width: 100%; object-fit: contain; }
.thumb-row button.is-active, .thumb-row button:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
/* software products have no hardware to photograph, so the pane holds a
   screenshot instead: dark ground, no matte, and the shot takes the full
   column width. Cropping to one region of an interface and giving it the whole
   pane renders it larger than the full screenshot gets across the page. */
.product-photo--ui { background: #0a1018; padding: 0; min-height: 0; }
.product-photo--ui img { max-height: none; width: 100%; height: auto; }
.thumb-row--ui button { background: #0a1018; }
.product-copy h2 { margin-top: 10px; }
.feature-head { margin-top: 28px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 8px; }
.feature-list li { position: relative; padding: 6px 0 6px 24px; color: var(--text-dim); font-size: 0.97rem; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 10px; height: 10px; background: var(--cyan);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.apps { margin-top: 26px; }
.apps .hud-label { margin-bottom: 12px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* compact tech-data callout */
.specs-cta { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.specs-cta h2 { margin-bottom: 8px; }
.specs-cta p { max-width: 44em; margin: 0; }
.specs-cta .btn { flex-shrink: 0; }

/* specs — dark datasheet (retained for possible future use) */
.specs-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-bottom: 8px; }
.specs-table caption {
  text-align: left; font-family: var(--font-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem;
  color: var(--text); padding: 22px 0 10px;
}
.specs-table th[scope="row"] {
  text-align: left; font-family: var(--font-body); font-weight: 500;
  color: var(--text); width: 38%; vertical-align: top;
}
.specs-table th, .specs-table td { padding: 11px 14px; border: 1px solid var(--line); }
.specs-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.specs-table td { color: var(--cyan-hot); font-family: var(--font-mono); font-size: 0.82rem; white-space: pre-line; }
.specs-dl { margin-top: 28px; }

/* ---------- capability detail ---------- */
.cap-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.cap-detail__copy h2 { margin-top: 10px; }
.cap-detail__copy h3 { margin-top: 30px; color: var(--cyan-hot); }
.cap-detail__figs figure { margin: 0 0 24px; }
.cap-detail__figs img { border: 1px solid var(--line-strong); width: 100%; }
.cap-detail__figs figcaption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding-top: 10px; display: flex; gap: 12px; }

/* core capability cards */
.core-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.core-card { border: 1px solid var(--line); background: var(--panel); padding: 26px; position: relative; transition: border-color 0.2s ease; }
.core-card:hover { border-color: var(--cyan-deep); }
.core-card .hud-label { color: var(--text-faint); margin-bottom: 12px; }
.core-card h3 { font-size: 1.08rem; }
.core-card p { font-size: 0.93rem; margin: 0; }

/* ---------- number cards (about) ---------- */
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num-card { border: 1px solid var(--line); background: var(--panel); padding: 28px 26px; border-top: 2px solid var(--cyan-deep); }
.num-card strong {
  display: block; font-family: var(--font-ui); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -0.02em;
  color: var(--cyan-hot); line-height: 1.1; margin-bottom: 6px;
}
.num-card__label {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 14px;
}
.num-card p { font-size: 0.9rem; margin: 0; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.value-stack { display: grid; gap: 14px; }
/* glow-dot value cards: events-timeline DNA — accent rail + glowing dot */
.value-stack .core-card { border-left: 3px solid var(--acc, var(--cyan)); padding: 18px 20px 16px 22px; }
/* value cards are informational, not links: suppress the card hover cue */
.value-stack .core-card:hover { border-color: var(--line); border-left-color: var(--acc, var(--cyan)); }
.value-stack .core-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.value-stack .core-card p { font-size: 0.9rem; }

/* ---------- CTA band ---------- */
/* every page: content settles 140px (96 section + 44) before the CTA band */
.cta-band {
  position: relative; overflow: hidden; border-top: 1px solid var(--line); margin-top: 44px;
  background-image: linear-gradient(180deg, rgba(4, 7, 13, 0.68), rgba(4, 7, 13, 0.6)), var(--cta-img);
  background-size: cover; background-position: center;
}
/* phones get their own plate (the scene reads instead of a random slice)
   and more air around the copy */
@media (max-width: 560px) {
  .cta-band {
    background-image: linear-gradient(180deg, rgba(4, 7, 13, 0.54), rgba(4, 7, 13, 0.5)), var(--cta-img-m);
  }
  .cta-band h2 { font-size: 2.05rem; line-height: 1.12; margin-bottom: 14px; }
  .cta-band p { font-size: 0.98rem; }
  .cta-band__actions { gap: 14px; margin-top: 38px; }
}
.cta-band__inner { position: relative; z-index: 2; padding: 84px 28px; text-align: center; }
/* RFQ CHANNEL OPEN is a status rather than a heading, so it takes the amber the
   live dots use instead of the structural cyan every other hud-label carries.
   Measures 9.87:1 against the darkest band ground, above the 9.12:1 of the cyan
   it replaces, so it clears AA for normal text and not just large. */
.cta-band .hud-label { color: var(--amber); }
.cta-band h2 { margin: 16px auto 10px; }
.cta-band p { max-width: 40em; margin: 0 auto; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.comm-list { display: grid; grid-template-columns: 90px 1fr; gap: 12px 18px; margin: 24px 0 0; }
.comm-list dt { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); padding-top: 3px; }
.comm-list dd { margin: 0; color: var(--text); }
.form-shell {
  background: var(--panel); border: 1px solid var(--line-strong); border-top: 2px solid var(--cyan);
  padding: 40px; position: relative;
}
.rfq-note {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--cyan-hot);
  background: rgba(43, 163, 212, 0.08); border: 1px solid var(--cyan-deep);
  padding: 12px 16px;
}
.form-placeholder { border: 1px dashed var(--line-strong); background: var(--panel-2); padding: 44px 28px; text-align: center; color: var(--text-dim); }
.form-placeholder h3 { font-size: 1.05rem; margin-bottom: 8px; }

/* ---------- legal pages ---------- */
.legal-copy { max-width: 60rem; }
.legal-copy h3, .legal-copy h4 {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 1.05rem; color: var(--text); margin: 2.2em 0 0.6em;
}
.legal-copy p, .legal-copy li { color: var(--text-dim); font-size: 0.97rem; }
.legal-copy ul { padding-left: 1.3em; margin: 0 0 1.2em; }
.legal-copy li { margin-bottom: 0.5em; }
.legal-copy strong { color: var(--text); }
.legal-copy a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer — framed instrument panel ---------- */
/* hex texture surfaces out of the page black; the top of the stack holds
   solid so the hand-off from the section above is a pure dark transition */
.site-footer {
  background-color: #030509;
  background-image:
    linear-gradient(180deg, #04070d 0%, #04070d 9%, rgba(4, 7, 13, 0.84) 42%, rgba(4, 7, 13, 0.6) 100%),
    url('/img/stills/hex-seam-rich.jpg');
  background-size: auto, cover;
  background-position: center, center 40%;
  background-repeat: no-repeat;
  font-size: 0.92rem; color: var(--text-dim); padding: 140px 0 72px;
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--cyan-hot); }
.f-frame { border: 1px solid var(--line-strong); position: relative; }

.f-top { display: grid; grid-template-columns: 1.04fr 0.68fr 1.05fr; }
.f-brand { padding: 52px 52px 48px; border-right: 1px solid var(--line); }
.f-brand img { height: 58px; width: auto; margin-bottom: 20px; }
.f-brand p { color: var(--text-dim); line-height: 1.7; max-width: 30em; margin: 0; }
.f-status { display: flex; flex-direction: column; justify-content: center; }
.f-row {
  display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 16px;
  padding: 20px 32px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.f-row:last-child { border-bottom: 0; }
.f-row:last-child .f-v { white-space: nowrap; }
.f-k { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--text-faint); text-transform: uppercase; }
.f-v { font-size: 0.82rem; color: var(--text); letter-spacing: 0.03em; }
.f-v a { color: var(--text); }
.f-v img { height: 28px; width: auto; display: inline-block; vertical-align: -9px; margin-right: 10px; }

.f-nav { border-right: 1px solid var(--line); display: flex; align-items: center; }
.f-nav ul { list-style: none; margin: 0; padding: 26px 44px; font-family: var(--font-mono); }
.f-nav li { margin-bottom: 13px; }
.f-nav li:last-child { margin-bottom: 0; }
.f-nav a { font-size: 0.85rem; }
/* .site-footer a outranks a bare class, so scope the badge under it */
.site-footer .f-linkedin, .site-footer .f-linkedin:hover { display: inline-flex; padding-top: 6px; color: #3d94e8; }

.f-legal {
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-faint);
}
.f-legal > span { padding: 22px 32px; }
.f-legal__tag { text-align: right; letter-spacing: 0.22em; color: var(--cyan); text-transform: uppercase; }
.footer-iso { display: inline-flex; align-items: center; gap: 10px; }
.footer-iso img { height: 30px; width: auto; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stats__sweep, .dot { animation: none; }
  .about-sky { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .product-intro, .cap-detail, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .op-grid { grid-template-columns: repeat(2, 1fr); }
  .core-grid { grid-template-columns: 1fr; }
  .num-grid { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .log-row { grid-template-columns: 44px 1.4fr 1fr; }
  .log-row__freq { display: none; }
  .f-top { grid-template-columns: 1fr; }
  .f-brand { border-right: 0; border-bottom: 1px solid var(--line); padding: 40px 36px; }
  .f-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .f-nav ul { padding: 22px 36px 28px; }
  .f-row { padding: 16px 36px; }
}
@media (max-width: 920px) {
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(4, 7, 13, 0.97); border-bottom: 1px solid var(--line);
    padding: 12px 20px 22px; gap: 2px; margin: 0;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { padding: 13px 10px; }
  .site-nav a.is-active { box-shadow: inset 3px 0 0 var(--cyan); }
  .site-nav .btn { margin: 12px 0 0; text-align: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section--tight { padding-top: 40px; }
  .hero__inner { padding-top: 36px; padding-bottom: 48px; }
  .op-grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .num-grid { grid-template-columns: 1fr; }
  .stack-panel, .stack-panel__inner { min-height: 340px; }
  .log-row { grid-template-columns: 36px 1fr; gap: 12px; padding: 18px 4px; }
  .log-row__fam { display: none; }
  .form-shell { padding: 28px 20px; }
  .cust-strip__row { gap: 28px 34px; padding: 48px 0; }
  .cta-band { margin-top: 24px; }
  .site-footer { padding-top: 88px; }
  .f-row { grid-template-columns: 60px 1fr; padding: 14px 20px; gap: 12px; }
  .f-v img { height: 22px; margin-right: 8px; vertical-align: -6px; }
  .f-nav ul { padding: 18px 24px 24px; }
  .f-brand { padding: 32px 24px; }
  .f-legal { grid-template-columns: 1fr; }
  .f-legal > span { padding: 13px 24px; }
  .f-legal__tag { text-align: left; padding-top: 0; }
  .cust-strip img { height: 46px; }
  .cta-band__inner { padding: 80px 20px; }
}
@media (max-width: 560px) {
  .cta-band__inner { padding: 96px 22px 92px; }
}
@media (max-width: 390px) {
  .f-row { padding: 14px 16px; }
  .f-v { font-size: 0.8rem; }
  .f-v img { height: 18px; margin-right: 5px; vertical-align: -4px; }
}

/* ---------- pause-motion control ---------- */
.motion-toggle {
  position: fixed; left: 18px; bottom: 18px; z-index: 120;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-dim); background: rgba(4, 7, 13, 0.85);
  border: 1px solid var(--line-strong); padding: 8px 14px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.motion-toggle:hover { color: var(--cyan-hot); border-color: var(--cyan); }
body.motion-paused .stats__sweep { animation-play-state: paused; }

/* phones: same treatment as desktop — hardware behind the text; centered
   window keeps the USB cluster and fin texture in the tall crop */
@media (max-width: 860px) {
  .hero__layer { object-position: center center; }
}

/* ---------- products: grouped log ---------- */
.log-group { display: flex; align-items: baseline; gap: 16px; padding: 34px 0 12px;
  border-bottom: 1px solid var(--line-strong); }
.log-group .hud-label { margin: 0; }
.log-group__note { color: #71808f; font-size: .82rem; font-family: var(--font-mono); }
.log-row--addon { padding-left: 58px; background: rgba(255, 255, 255, .014); }
.log-row__idx--addon { color: #4d5a68; }
.pbadge { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; padding: 3px 8px;
  border: 1px solid var(--line-strong); color: #8fa3b8; margin-left: 14px; white-space: nowrap; }
.pbadge--dev { color: #e08a36; border-color: rgba(224, 138, 54, .45); }
.pbadge--sw { color: #5cc8f2; border-color: rgba(92, 200, 242, .35); }
@media (max-width: 700px) {
  .log-row--addon { padding-left: 30px; }
  .log-group { flex-direction: column; gap: 4px; }
  /* phones crop far tighter than tablets; with the left-shifted unit the
     panel needs a left bias so the port cluster and status LED sit clear of
     the headline instead of jammed at an edge */
  .hero__layer { object-position: center center; }
}

/* ---------- ICS platform strips ---------- */
.addon-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.eco-inc { display: flex; border: 1px solid rgba(92, 200, 242, .4); border-left: 3px solid var(--cyan);
  background: var(--panel-2); padding: 26px 30px; margin-bottom: 6px; }
.eco-inc:hover { border-color: var(--cyan); }
.eco-inc__body h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--text); }
.eco-inc__body p { margin: 0; color: #93a1b3; font-size: .92rem; }
.eco-tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; padding: 3px 8px;
  display: inline-block; margin-bottom: 10px; color: #5cc8f2; border: 1px solid rgba(92, 200, 242, .4); }
.eco-sub { margin: 34px 0 14px; }
.addon-card { border: 1px solid var(--line-strong); background: var(--panel); padding: 20px 22px;
  display: block; }
.addon-card:hover { border-color: var(--cyan-deep); }
.addon-card h3 { margin: 0 0 6px; font-size: 1.02rem; font-family: var(--font-ui); color: var(--text); }
.addon-card p { margin: 0; color: #93a1b3; font-size: .85rem; line-height: 1.55; }
.addon-card__tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  color: #8fa3b8; border: 1px solid var(--line-strong); padding: 2px 7px; display: inline-block;
  margin-bottom: 12px; }
.req-strip { border: 1px solid var(--line-strong); background: rgba(10, 16, 26, .5);
  padding: 14px 20px; color: #93a1b3; font-size: .92rem; margin: 26px 0 0; }
.req-strip a { color: var(--cyan); }
@media (max-width: 1000px) { .addon-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .addon-strip { grid-template-columns: 1fr; } }

/* ---------- support forms ---------- */
/* forms sit on a lighter panel with a cyan top rule; fields are a step
   brighter again so they read instantly against the page's dark blues */
.fcard { border: 1px solid var(--line-strong); border-top: 2px solid var(--cyan);
  background: var(--panel-2); padding: 30px; }
.fcard label { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  color: #a9b8ca; margin: 16px 0 6px; text-transform: uppercase; }
.fcard input, .fcard select, .fcard textarea { width: 100%; box-sizing: border-box; background: #16202f;
  border: 1px solid rgba(255, 255, 255, 0.26); color: var(--text); padding: 11px 12px; font: inherit; font-size: .95rem;
  /* kill the native mobile styling (rounded corners, inner shadows) so
     phones and tablets match the squared desktop fields */
  appearance: none; -webkit-appearance: none; border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
/* appearance:none removes the native dropdown arrow everywhere, so draw our
   own chevron, inset from the frame edge */
.fcard select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239fb3c8' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.fcard input:hover, .fcard select:hover, .fcard textarea:hover { border-color: rgba(255, 255, 255, 0.4); }
.fcard input:focus, .fcard select:focus, .fcard textarea:focus {
  outline: none; border-color: var(--cyan-hot);
  box-shadow: 0 0 0 3px rgba(43, 163, 212, 0.22); background-color: #1a2636;
}
.fcard textarea { height: 96px; resize: vertical; }
.fcard .btn { margin-top: 22px; }
/* short fields pair up side by side */
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .frow2 { grid-template-columns: 1fr; } }
.fineprint { color: #71808f; font-size: .8rem; line-height: 1.7; margin-top: 30px; }
.fcard .fineprint { margin-top: 48px; }
.fineprint a { color: #8fa3b8; }
.gate-note { border: 1px solid var(--line-strong); background: rgba(10, 16, 26, .5); padding: 18px 22px;
  color: #93a1b3; font-size: .95rem; margin-top: 22px; }
.gate-note a { color: var(--cyan); }
.sec-sub--wide { max-width: 64em; }

/* ---------- careers ---------- */
.ben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 18px; }
.ben-col h3 { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; color: var(--cyan);
  text-transform: uppercase; margin: 0 0 14px; }
.ben-col ul { list-style: none; margin: 0; padding: 0; }
.ben-col li { color: #aab6c4; font-size: .93rem; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
@media (max-width: 900px) { .ben-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ben-grid { grid-template-columns: 1fr; } }

/* ---------- capability bullets on bespoke product pages ---------- */
.cap-list { margin: 10px 0 0; padding: 0; max-width: 60em; list-style: none; }
/* marker hangs in its own gutter so wrapped lines align with the text,
   not the page edge */
.cap-list li { color: #aab6c4; font-size: 1rem; padding: 12px 0 12px 28px; position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cap-list li::before { content: "\25B8"; color: var(--cyan); position: absolute; left: 2px; }
.cap-list strong { color: #dfe7f0; }

/* ---------- self-hosted product film ---------- */
/* the poster carries the weight until someone presses play: the video element
   is preload="none", so the page pays nothing for it on load */
.film { margin: 0; }
.film__frame { position: relative; aspect-ratio: 16 / 9; background: #05070c;
  border: 1px solid var(--line-strong); overflow: hidden; }
.film__frame video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
/* layout only: the hud-label class on the figcaption supplies the face, size,
   tracking and colour, and no width cap keeps the line under the full frame */
.film__cap { display: block; margin-top: 14px; }

/* ---------- full software screenshot ---------- */
/* the whole interface, uncropped. desktop and tablet fit it to the column;
   a phone would render it as an illegible strip, so there the pane becomes a
   horizontal scroller and the shot keeps a readable height */
.ui-shot { margin: 30px 0 0; }
.ui-shot__pane { border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: #0a1018; }
.ui-shot img { width: 100%; height: auto; display: block; }
.ui-shot figcaption { display: block; margin-top: 14px; }
@media (max-width: 700px) {
  .ui-shot__pane { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ui-shot img { width: auto; max-width: none; height: 460px; }
  .ui-shot figcaption::after { content: " (SWIPE TO PAN)"; }
}

/* ---------- events calendar ---------- */
.cal-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.cal { border: 1px solid var(--line-strong); background: var(--panel); padding: 18px 20px;
  font-family: var(--font-mono); }
.cal h4 { margin: 0 0 12px; font-size: .75rem; letter-spacing: .16em; color: var(--cyan); }
.cal table { width: 100%; border-collapse: collapse; font-size: .72rem; color: #8fa3b8; }
.cal td, .cal th { text-align: center; padding: 4px 0; font-weight: 400; }
.cal th { color: #5a6878; font-size: .62rem; }
.cal .ev { color: #04070d; background: var(--cyan); border-radius: 3px; font-weight: 700; }
@media (max-width: 860px) { .cal-wrap { grid-template-columns: 1fr; } }

/* ---------- customer masthead grid ---------- */
/* chip-grid roster: every seal in its own bordered cell, no motion; the
   14-seal roster splits into an even 7x2 on wide screens and 2-up on phones */
.cust-grid { padding: 0 0 72px; }
.cust-grid__cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.cust-grid__cell { display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02);
  padding: 20px 12px; transition: border-color 0.15s ease, background 0.15s ease; }
.cust-grid__cell:hover { border-color: rgba(92, 200, 242, 0.4); background: rgba(92, 200, 242, 0.05); }
.cust-grid__cell img { height: 44px; width: auto; opacity: 0.85; }
@media (max-width: 720px) {
  .cust-grid { padding-bottom: 56px; }
  .cust-grid__cells { grid-template-columns: repeat(2, 1fr); }
  .cust-grid__cell { padding: 16px 10px; }
  .cust-grid__cell img { height: 40px; }
}

/* ---------- footer FCC mark ---------- */
.f-fcc { display: inline-block; margin-left: 14px; padding: 3px 9px; border: 1.5px solid #6b7684;
  border-radius: 3px; font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  color: #a8b2c0; vertical-align: middle; letter-spacing: .06em; }

/* ---------- RSRP hero: dim the live trace so the headline owns the band ---------- */
.page-hero--rsrp .page-hero__canvas { opacity: 0.68; }
.page-hero--rsrp .page-hero__scrim {
  /* pocket starts right of the level meter so the instrument edge stays lit */
  background:
    radial-gradient(62% 130% at 26% 50%, rgba(4, 7, 13, 0.76) 0%, rgba(4, 7, 13, 0.38) 50%, rgba(4, 7, 13, 0.06) 76%),
    linear-gradient(rgba(4, 7, 13, 0.14), rgba(4, 7, 13, 0.14));
}
@media (max-width: 860px) {
  .page-hero--rsrp .page-hero__canvas { opacity: 0.6; }
  .page-hero--rsrp .page-hero__scrim {
    background: linear-gradient(rgba(4, 7, 13, 0.5), rgba(4, 7, 13, 0.44));
  }
}

/* ---------- ICS pages: platform-software band ---------- */
/* DCode art fills the strip edge to edge behind a left gradient (inline with
   the image) that keeps the copy legible */
.dcode-band {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  /* docked console: the site's accent rail plants the strip on the page and
     a soft drop shadow keeps it from floating between sections */
  border: 1px solid rgba(140, 200, 230, 0.16); border-left: 3px solid var(--cyan);
  padding: 26px 30px;
  background-color: rgb(2, 13, 2);
  background-size: auto, cover; background-position: center, center;
  background-repeat: no-repeat;
  /* cover-scaled art overflows the padding box; without this it paints under
     the semi-transparent border and breaks the frame into an uneven line */
  background-clip: padding-box;
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.85), inset 0 0 70px rgba(0, 229, 255, 0.04);
  transition: border-color 0.15s ease;
}
.dcode-band:hover { border-color: rgba(140, 200, 230, 0.4); border-left-color: var(--cyan); }
/* section-style kicker above the strip: gives the band the same header
   rhythm as the rest of the page instead of carrying its label inside */
.dcode-kick {
  display: block; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.14em; color: var(--cyan-hot); margin: 0 0 12px 2px;
}
.dcode-band h3 {
  margin: 0 0 8px; color: var(--text); font-size: 1.35rem;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.dcode-band p { margin: 0; color: #a8b8ca; max-width: 44em; }
/* the tag's card-context bottom margin would hoist it off the name's
   midline inside this flex row */
.dcode-band .eco-tag { font-size: 0.62rem; margin-bottom: 0; }
.dcode-band__cta {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--cyan-hot); white-space: nowrap; flex: none;
  border: 1px solid rgba(0, 229, 255, 0.4); border-radius: 3px;
  padding: 10px 18px; background: rgba(0, 229, 255, 0.07);
  transition: transform 0.15s ease;
}
.dcode-band:hover .dcode-band__cta { transform: translateX(4px); }
@media (max-width: 720px) {
  .dcode-band { flex-direction: column; align-items: flex-start; padding: 22px; }
  .dcode-band__cta { margin-top: 6px; }
}

/* ---------- support: fantail deck hero ---------- */
/* deck scene fills the band edge to edge; position keeps the whole ensign in
   frame on narrow screens. Bright sunlit water needs a firmer version of the
   about-page horizontal wash for the headline to read */
.page-hero--support { background-size: cover; background-repeat: no-repeat; }
.page-hero--support .page-hero__scrim {
  /* lighter wash so the ensign and deck read; left side still holds the copy
     (custom training still uses this; the support page overrides below) */
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.4) 42%, rgba(4, 7, 13, 0.04) 100%),
    linear-gradient(rgba(4, 7, 13, 0.06), rgba(4, 7, 13, 0.1));
}
/* support page: Black Hawk resupply; the extended full-scene plate serves
   every width above phone so the perspective matches everywhere */
.page-hero--fantail .bg-video { object-position: 50% 60%; }
@media (max-width: 560px) { .page-hero--fantail .bg-video { object-position: 50% 45%; } }
.page-hero--fantail .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.6) 26%, rgba(4, 7, 13, 0.32) 46%, rgba(4, 7, 13, 0.1) 64%, rgba(4, 7, 13, 0) 80%),
    linear-gradient(rgba(4, 7, 13, 0.06), rgba(4, 7, 13, 0.06));
}

/* products index: same band height as the other main pages */

/* product pages: extra band height on wide screens so full-height subjects
   (the QP3 handset especially) render whole */
@media (min-width: 1100px) {
  .page-hero--product .page-hero__inner { padding: 100px 28px 88px; }
}

/* amber prerequisite badge in the log rows */
.pbadge--req { color: var(--amber); border-color: rgba(255, 180, 84, 0.45); }

/* ---------- careers: bench scene hero ---------- */
.page-hero--careers .bg-video { object-position: 55% 45%; }
.page-hero--careers .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.72) 0%, rgba(4, 7, 13, 0.5) 28%, rgba(4, 7, 13, 0.24) 48%, rgba(4, 7, 13, 0.06) 66%, rgba(4, 7, 13, 0) 80%),
    linear-gradient(rgba(4, 7, 13, 0.06), rgba(4, 7, 13, 0.06));
}

/* ---------- hex hero band (careers, legal pages) ---------- */
.page-hero--hex { background-size: cover; background-repeat: no-repeat; }
.page-hero--hex .page-hero__scrim {
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.66) 0%, rgba(4, 7, 13, 0.34) 46%, rgba(4, 7, 13, 0.08) 100%),
    linear-gradient(rgba(4, 7, 13, 0.16), rgba(4, 7, 13, 0.16));
}

/* support: one-line router above the tabbed card */
.form-intro { max-width: 58em; margin: 0 0 36px; }
.form-intro strong { color: #dfe7f0; }