/* Hallmark · pre-emit critique: P4 H5 E5 S4 R5 V4
 * macrostructure: Marquee Hero · H1 hero knobs: size=hero(clamp 3–6.5rem), alignment=left-bias, underlay=full-bleed video (hero_video.mp4) + gradient scrim
 * theme: custom · vibe: "industrial precision, austere, engineered grey/black" · paper: oklch(98% 0.004 240) · brand: oklch(60% 0.006 240)
 * display: Moderniz (self-hosted, all headings, weight 400 only — synthesis disabled) · body: LINE Seed Sans (self-hosted /fonts, SIL OFL) · axes: light / display-condensed-bold / neutral
 * nav: N1a (adapted — borderless, permanently transparent, white text/logo throughout; contrast intentionally reduced over light sections — user-specified trade-off; 3 links, editorial-acceptable)
 * footer: Ft1 mast-headed (dark logo, native colour — no inversion needed on the always-light footer surface) · studied: no · context: explicit · v1
 * contrast: pass (40–41) on the hero; nav text/logo below the hero is a deliberate exception, not an oversight · nav/footer/hero: pass (42–45)
 * honest: pass (46, no invented metrics) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * motifs (military-technical direction, user-requested): .coord-rail edge marker — hairline + one solid-fill labelled tag (fixed, ≥75rem only,
 * aria-hidden, pointer-events:none); script.js names the current section and eases the tag's position toward it each frame (lags behind
 * scroll on purpose — see script.js) · .section-code / .capability__code spec tags (mono, tracked, stacked above heading per gate 54).
 * Corner-bracket reticles were tried and removed at user request; capability cards are back to a plain hairline border.
 */

html { overflow-x: clip; }
body { overflow-x: clip; }

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.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: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-toast);
  transform: translateY(-150%);
  transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Moderniz only ships one real weight — 400 is it */
  font-synthesis: none; /* never fake a bold/italic cut it doesn't have */
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; max-width: 65ch; }

.container {
  width: 100%;
  padding-inline: var(--page-gutter);
  margin-inline: auto;
  max-width: 90rem;
}

.rule {
  border: none;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}
.rule-thick {
  border: none;
  border-top: var(--rule-heavy) solid var(--color-ink);
  margin: 0;
}

/* ================= Coordinate rail — decorative edge marker ================= */

/* One hairline + one labelled tag, wide screens only. Purely decorative
   (aria-hidden), pointer-events:none so it never blocks clicks, sits below
   the nav's z-index so the nav always wins. The tag has a solid ink fill
   (not transparent) so the label stays legible whether it's sitting over
   the video or the page — a transparent label here would be unreadable
   against whatever happens to be scrolled underneath it.

   The label's text names the section currently in view, and its position
   drifts down the rail as you scroll — script.js drives both, easing the
   position toward its target each frame rather than pinning it exactly to
   scroll offset, so it visibly trails behind instead of tracking 1:1.
   `top` below is the static fallback for reduced-motion / no-JS; the
   script overrides it to 0 and animates via `transform` once it runs. */
.coord-rail {
  display: none;
  position: fixed;
  top: 0;
  right: var(--space-lg);
  bottom: 0;
  width: 1px;
  z-index: var(--z-raised);
  pointer-events: none;
  background: var(--color-rule);
}
/* writing-mode instead of a rotate() transform — rotating a wide, nowrap
   text box around its own center pushes half its (pre-rotation) width
   above its `top` anchor, which is what was sending this off the top of
   the viewport. Vertical writing mode lays the text out top-to-bottom
   directly, starting exactly at `top` with no overshoot. */
.coord-rail__label {
  position: absolute;
  top: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-sm) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (min-width: 75rem) {
  .coord-rail { display: block; }
}

/* ================= Reveal / motion ================= */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
}

/* ================= Nav — N1a, brutal-styled ================= */

/* Fixed (not sticky) so it genuinely floats over the hero video from
   scroll position 0 — sticky would sit in normal flow above the hero and
   never overlap it. Permanently transparent with white text/logo — no
   solidified state, no border — the bar reads as a clean floating plane,
   not a slab, at every scroll position. */
.nav-brutal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  padding-inline: var(--page-gutter);
  background: transparent;
  color: var(--color-paper);
}

/* Permanently transparent, permanently white — no solid/scrolled state.
   The logo file is white-on-transparent, matching. Over the light sections
   further down the page this reads with reduced contrast by design (the
   brief traded that off deliberately in favour of never showing a bar). */
.nav-brutal__wordmark {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
/* Logo art is dark-on-transparent; invert(1) flips it white for the
   permanently-transparent nav (matches the white nav text). */
.nav-brutal__wordmark img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 36px;
  filter: invert(1);
}
@media (min-width: 48rem) {
  .nav-brutal__wordmark img { max-height: 48px; }
}

/* Brand-grey fill (not paper) so the button stays visible with no border,
   in both the transparent-over-video state and the solidified white bar —
   plain paper-on-paper would vanish in the latter. */
.nav-brutal__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: var(--color-brand);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-short) var(--ease-out);
}
.nav-brutal__toggle:active { background: var(--color-paper-3); }
.nav-brutal__toggle-bars,
.nav-brutal__toggle-bars::before,
.nav-brutal__toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
}
.nav-brutal__toggle-bars::before { content: ""; position: absolute; top: -6px; }
.nav-brutal__toggle-bars::after { content: ""; position: absolute; top: 6px; }

.nav-brutal__panel {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-brutal__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
}
.nav-brutal__links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700; /* LINE Seed Sans' real Bold file — no synthetic weight */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding-block: var(--space-2xs);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.nav-brutal__links a:hover,
.nav-brutal__links a:focus-visible {
  border-color: var(--color-ink);
}
.nav-brutal__links a:active { color: var(--color-muted); }

/* White fill, black text, no border — nav is permanently transparent now
   (never solidifies), so a white chip reads clearly against both the video
   and the page. Inverts to solid ink on hover as its one signal. */
.nav-brutal__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out),
              background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.nav-brutal__cta:hover { background: var(--color-ink); color: var(--color-paper); transform: translateY(-1.5px); }
.nav-brutal__cta:active { transform: translateY(0); }

@media (max-width: 47.99rem) {
  .nav-brutal__toggle { display: inline-flex; }
  .nav-brutal__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-paper);
    color: var(--color-ink); /* dropdown is always a solid light sheet — force dark text regardless of the bar's transparent/scrolled state */
    border-bottom: var(--rule-heavy) solid var(--color-ink);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md) var(--page-gutter) var(--space-lg);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  }
  .nav-brutal__panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-brutal__links {
    flex-direction: column;
    gap: 0;
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  .nav-brutal__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .nav-brutal__cta { margin-top: var(--space-md); justify-content: center; }
}

/* ================= Hero stack — hero pins, intro slides up and covers it ================= */

/* isolation:isolate scopes the z-index pair below (hero/intro) to this
   wrapper only, so they can't be out-stacked by or interfere with anything
   outside it — the fixed nav (z-index 200) still always wins on top. */
.hero-stack {
  position: relative;
  isolation: isolate;
}

/* Sticky within .hero-stack: it pins at the top for exactly the scroll
   distance of .intro's height (the stack is hero-height + intro-height
   tall), so intro slides up and visually covers a *still* video instead of
   two things scrolling independently. Reverses cleanly on scroll-up. */
.hero-marquee {
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: clip;
  min-height: 100dvh;
  display: grid;
  align-content: end;
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
  background: var(--color-ink); /* shows while the video buffers, and if it fails to load */
}

.hero-marquee__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-marquee__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(from var(--color-ink) l c h / 0.12) 0%,
    oklch(from var(--color-ink) l c h / 0.7) 100%
  );
}

.hero-marquee__content {
  position: relative;
}

.hero-marquee__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-paper-dim);
  margin-bottom: var(--space-md);
}

.hero-marquee__title {
  font-size: var(--text-hero);
  max-width: 18ch;
  color: var(--color-paper);
}

/* ================= Section head — S2 hanging ================= */

/* No padding-inline here on purpose — the enclosing section supplies the
   single page-gutter inset, so the heading lines up with the body content
   under it instead of getting a second, compounding indent. */
.head-hang {
  padding-block: var(--space-3xl) var(--space-xl);
}
.head-hang h2 {
  font-size: var(--text-display-s);
  max-width: 16ch;
}
.head-hang p {
  margin-top: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

/* Overrides .head-hang p above (same selector weight would otherwise let
   that generic rule win) — the tag always stacks directly above the
   heading in the same column, never beside it (gate 54). */
.head-hang .section-code {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ================= Intro — the sheet that covers the pinned hero ================= */

.intro {
  position: relative;
  z-index: 2;
  background: var(--color-paper); /* opaque — this is what actually blocks the hero underneath */
  padding-inline: var(--page-gutter);
  padding-bottom: var(--space-4xl);
}
.intro__body {
  max-width: 62ch;
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}
.intro__body + .intro__body { margin-top: var(--space-md); }

/* Outlined, not solid — the cta-band further down already owns the
   solid-fill treatment; varying it here keeps the two CTAs from reading as
   the same component reused. */
.intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-xl);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  color: var(--color-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.intro__cta:hover { background: var(--color-ink); color: var(--color-paper); transform: translateY(-1.5px); }
.intro__cta:active { transform: translateY(0); }

/* ================= Capabilities — F6 adapted (no price, spec-line + Enquire) ================= */

.capabilities {
  padding-inline: var(--page-gutter);
}

.capability-grid {
  padding-inline: 0;
  padding-bottom: var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
}
@media (max-width: 60rem) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .capability-grid { grid-template-columns: minmax(0, 1fr); }
}

.capability {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  min-width: 0;
}

.capability__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.capability__icon {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-paper-2);
  overflow: hidden;
}
.capability__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capability__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.capability__spec {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.capability__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: var(--rule-hair) solid var(--color-ink);
  width: fit-content;
  padding-bottom: 2px;
  min-height: 44px;
}
.capability__action:active { color: var(--color-muted); }
.capability__action .arrow {
  display: inline-block;
  transition: transform var(--dur-short) var(--ease-out);
}
.capability__action:hover .arrow,
.capability__action:focus-visible .arrow { transform: translateX(3px); }

/* ================= Technical spec sheet — F3 ================= */

.technical {
  padding: 0 var(--page-gutter) var(--space-3xl);
}

.spec-sheet {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.spec-sheet th,
.spec-sheet td {
  text-align: left;
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  vertical-align: top;
}
.spec-sheet th {
  font-family: var(--font-body);
  font-weight: 700;
  width: 28%;
  padding-right: var(--space-md);
}
.spec-sheet td { font-size: var(--text-md); }
.spec-sheet td.muted {
  color: var(--color-muted);
  font-size: var(--text-sm);
  width: 26%;
}
.spec-sheet tr:first-child th,
.spec-sheet tr:first-child td { border-top: var(--rule-thick) solid var(--color-ink); }

.technical__footnote {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

@media (max-width: 40rem) {
  .spec-sheet, .spec-sheet tbody, .spec-sheet tr, .spec-sheet th, .spec-sheet td {
    display: block;
    width: auto;
  }
  .spec-sheet tr { padding-block: var(--space-sm) 0; }
  .spec-sheet th { border-top: var(--rule-thick) solid var(--color-ink); padding-bottom: var(--space-2xs); }
  .spec-sheet tr:first-child th { border-top: var(--rule-thick) solid var(--color-ink); }
  .spec-sheet td { border-top: none; padding-block: var(--space-2xs); }
  .spec-sheet td.muted { padding-bottom: var(--space-md); }
}

/* ================= CTA band — invert ================= */

.cta-band {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3xl) var(--page-gutter);
  display: grid;
  gap: var(--space-lg);
  align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}
@media (max-width: 60rem) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

.cta-band__title {
  font-size: var(--text-display-s);
  max-width: 14ch;
}

.cta-band__body {
  color: var(--color-paper-dim);
  font-size: var(--text-md);
  max-width: 46ch;
}

.cta-band__action {
  margin-top: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-brand);
  color: var(--color-brand-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-md);
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.cta-band__action:hover { background: var(--color-paper); transform: translateY(-1.5px); }
.cta-band__action:active { transform: translateY(0); }

/* ================= Footer — Ft1 mast-headed ================= */

.foot-dense {
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.foot-dense__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  justify-content: space-between;
  align-items: baseline;
}

.foot-dense__wordmark { margin: 0; }
/* Logo art is dark-on-transparent already — correct as-is on the light
   footer surface, no filter needed. */
.foot-dense__wordmark img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 39px;
}

.foot-dense__tagline {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  max-width: 46ch;
}

.foot-dense__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.foot-dense__links a {
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.foot-dense__links a:hover,
.foot-dense__links a:focus-visible { border-color: var(--color-ink); }
.foot-dense__links a:active { color: var(--color-muted); }

.foot-dense__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
}