@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════
   LETAR INC — "The Inspection Document"
   Aerospace buyers live in engineering drawings, FAI reports, and
   travelers. The site speaks that language: title blocks, corner
   ticks, mono spec tables — on the company's approved warm-neutral
   canvas with its aerospace-blue accent.
   Type (owner-approved 2026-07-09, "manufacturing, not AI/tech"):
   Barlow Semi Condensed (display — DIN-lineage drawing lettering)
   · Barlow (body) · IBM Plex Mono (data)
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  /* TRI-METAL: aluminum = canvas · stainless = structure/type · titanium = accent */
  --canvas: #F4F6F8;
  --card: #FFFFFF;
  --card-2: #ECF0F4;
  --ink: #171C22;
  --ink-70: rgba(23, 28, 34, 0.74);
  --steel: #56616D;
  --steel-lt: #8E99A6;
  --line: rgba(23, 28, 34, 0.15);
  --line-soft: rgba(23, 28, 34, 0.08);
  --blue: #2563EB;
  --blue-deep: #1D4ED8;
  --blue-wash: #EFF5FF;
  --good: #178A50;
  /* titanium anodize spectrum — the one loud element */
  --ti-gold: #C9A227;
  --ti-violet: #7C5CBF;
  --ti-grad: linear-gradient(100deg, var(--ti-gold) 0%, var(--ti-violet) 48%, var(--blue) 100%);
  /* owner-picked navy: the Difference band + homepage stat numerals */
  --navy-grad: linear-gradient(115deg, #1E3E74 0%, #12264A 34%, #0B0E12 68%);
  /* brushed aluminum surface + polished stainless hairline */
  --alu-grad: linear-gradient(165deg, #FDFEFF 0%, #DDE3E9 100%);
  --chrome-grad: linear-gradient(90deg, #C9D0D8 0%, #FFFFFF 45%, #AEB7C1 100%);
  /* "anchor" band is now a LIGHT aluminum plate (names kept for page compat) */
  --anchor: #E9EDF1;
  --anchor-card: #FFFFFF;
  --anchor-line: rgba(23, 28, 34, 0.12);
  --anchor-text: #171C22;
  --anchor-steel: #56616D;

  --font-display: "Barlow Semi Condensed", "Barlow", sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(21,24,29,.05), 0 8px 28px rgba(21,24,29,.07);
  --shadow-lift: 0 2px 4px rgba(21,24,29,.06), 0 16px 44px rgba(21,24,29,.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ── Type scale — condensed DIN caps, like drawing title lettering ── */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.06;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.3rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); text-transform: uppercase; letter-spacing: 0.008em; }
h3 { font-size: 1.28rem; line-height: 1.3; font-weight: 600; }

.lede { font-size: 1.15rem; color: var(--steel); max-width: 56ch; }

.eyebrow {
  /* owner 2026-07-12: the small blue labels are retired site-wide; markup
     kept so the decision is one-line reversible */
  display: none !important;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--blue);
  border-radius: 1px;
}
/* .ti-text kept for page compat — gradient retired 2026-07-09 (read "AI");
   display highlights are now solid ink, like stamped lettering */
.ti-text { color: var(--ink); }

/* ── Header ─────────────────────────────────────────────────── */
/* Apple-style glass: neutral (the old warm cream read yellow over dark
   heroes), highly translucent, heavy blur + saturation boost */
.wordmark img.nav-logo { height: 44px; width: auto; display: block; }
/* AEROSPACE rides at the logo's right, matching its letter height */
.wordmark--logo { align-items: center; gap: 14px; }
.wordmark.wordmark--logo .co-aero {
  align-self: stretch; display: flex; align-items: center;
  padding-left: 14px; border-left: 1px solid var(--line);
  font-size: .8rem; letter-spacing: .3em; line-height: 1;
}
.site-header {
  position: sticky; top: 0; z-index: 60;
  /* neutral glass: no saturate boost — over warm content (gold marks,
     clouds) saturation amplification tinted the bar yellow */
  background: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(23, 28, 34, 0.08);
  box-shadow: 0 1px 24px rgba(11, 14, 18, 0.05);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* at the very top of a page the bar goes glassier so the hero shows
   through; it firms up as soon as the page scrolls (js/site.js) */
.site-header.at-top {
  background: rgba(248, 250, 252, 0.45);
  border-bottom-color: rgba(23, 28, 34, 0.04);
  box-shadow: none;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(32px, 4vw, 72px);
  height: 68px;
  /* header spans the screen — logo anchors near the left edge instead of
     the centered page column */
  max-width: none; padding: 0 clamp(24px, 2.4vw, 48px) 0 clamp(40px, 4.2vw, 82px);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.28rem; letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 9px;
  flex-shrink: 0; white-space: nowrap;
}
.wordmark .co { color: var(--ink); font-weight: 500; font-size: .92rem; letter-spacing: .1em; }
/* the trade, set in a technical aerospace face — visible, tracked, engineered */
.wordmark .co-aero {
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .3em; color: rgba(23, 28, 34, .58); text-transform: uppercase;
  padding-left: 12px; border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
  .wordmark { font-size: 1.14rem; gap: 7px; }
  .wordmark .co { font-size: .82rem; }
  .wordmark .co-aero { font-size: .66rem; letter-spacing: .22em; padding-left: 9px; }
}
.nav { display: flex; gap: 26px; align-items: center; }
/* squeeze zone: full nav + dropdowns must fit before the drawer takes over */
@media (min-width: 1081px) and (max-width: 1520px) {
  .wordmark .co-aero { font-size: .68rem; letter-spacing: .2em; padding-left: 9px; }
  .nav { gap: 13px; }
  .nav a { font-size: .86rem; }
}
.nav a {
  font-size: 0.92rem; font-weight: 500; color: var(--steel);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }
.nav .btn { margin-left: 6px; }

/* ── Dropdown groups — mirrors letarinc.com's Markets/Capabilities/
      Certifications menus. Hover or keyboard focus reveals the panel;
      in the mobile drawer the groups render flattened (see drawer CSS). ── */
.nav-group { position: relative; }
.nav-group > .nav-parent { display: inline-flex; align-items: center; gap: 6px; }
.nav-group > .nav-parent::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .18s;
}
.nav-group:hover > .nav-parent::after,
.nav-group:focus-within > .nav-parent::after { transform: rotate(225deg); margin-top: 3px; }
/* invisible hover bridge so the pointer can travel into the panel */
.nav-group::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nav-drop {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 235px;
  display: flex; flex-direction: column; padding: 8px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 10px;
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(7px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 80;
}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-drop a {
  padding: 9px 12px; border-radius: 7px; border-bottom: none;
  font-size: .9rem; color: var(--steel); white-space: nowrap;
}
.nav-drop a:hover { background: var(--blue-wash); color: var(--ink); }
.nav-drop a[aria-current="page"] { color: var(--ink); background: var(--card-2); border-bottom: none; }
/* nav CTA = plain emphasized text link (no box). A little bolder + ink so it
   reads as the primary action; small lift on hover. */
.nav a.btn-primary {
  background: none; border: none; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ink); font-weight: 600; font-size: 0.92rem; padding: 6px 2px;
  transition: transform .16s ease, color .16s;
}
.nav a.btn-primary:hover { color: var(--ink); transform: translateY(-2px); }
.nav-toggle { display: none; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
/* CTA: inspection-document ink; quiet mechanical hover (no glow) */
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(21,24,29,.22); }
.btn-primary:hover {
  background: #232a33;
  box-shadow: 0 8px 22px rgba(21,24,29,.28); transform: translateY(-1px); color: #fff;
}
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-inverse { background: #fff; color: var(--ink); }
.btn-inverse:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 0.88rem; }
.btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}

/* ── The signature: drawing frame + title block ─────────────── */
.dwg-frame { position: relative; }
.dwg-frame .frame-img {
  border: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: var(--card);
}
.dwg-frame .frame-img img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.1;
}
/* corner registration ticks */
.dwg-frame .tick { position: absolute; width: 18px; height: 18px; border-color: var(--ink); border-style: solid; opacity: .5; }
.dwg-frame .tick.tl { top: -9px; left: -9px; border-width: 1.5px 0 0 1.5px; }
.dwg-frame .tick.tr { top: -9px; right: -9px; border-width: 1.5px 1.5px 0 0; }
.dwg-frame .tick.bl { bottom: -9px; left: -9px; border-width: 0 0 1.5px 1.5px; }
.dwg-frame .tick.br { bottom: -9px; right: -9px; border-width: 0 1.5px 1.5px 0; }

.title-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-top: 1px dashed var(--line);
  border-radius: 0 0 4px 4px;
  background: var(--card);
}
.tb-cell {
  padding: 10px 14px 12px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.tb-cell:last-child { border-right: none; }
.tb-label {
  font-family: var(--font-mono);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel-lt); margin-bottom: 3px;
}
.tb-value {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-value .ok { color: var(--good); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: 84px 0 96px; }
/* filmed hero (About): footage faded behind the text — white veil keeps ink legible */
.hero-filmed { position: relative; overflow: clip; }
.hero-filmed .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-filmed::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(250,251,252,.88) 0%, rgba(250,251,252,.64) 40%, rgba(250,251,252,.14) 100%);
}
/* filmed hero: the accent line stays house type, ink black over the sky */
.hero-filmed h1 span.accent { color: var(--ink); }
/* one smooth monotonic wash from the bottom: dissolves the hero into the next
   band AND melts the footage's cloud-horizon line. Never a peaked band — a
   gradient peak reads as a crease across the frame. */
.hero-filmed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1;
  background: linear-gradient(180deg,
    rgba(236,240,244,0) 0%, rgba(236,240,244,.18) 26%, rgba(236,240,244,.45) 52%,
    rgba(236,240,244,.8) 80%, #ECF0F4 100%);
  pointer-events: none;
}
.hero-filmed .container { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-filmed .hero-video { display: none; } }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 64px; align-items: center;
}
.hero h1 .accent { color: var(--blue-deep); }
.hero .lede { margin: 22px 0 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

.cred-row {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--line-soft);
}
.cred-row img { height: 44px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .78; transition: filter .2s, opacity .2s; }
.cred-row img:hover { filter: none; opacity: 1; }

/* ── Sections ───────────────────────────────────────────────── */
.section { padding: 104px 0; }
.section-tight { padding: 72px 0; }
@media (max-width: 640px) {
  .section-tight { padding: 40px 0; }
  .section-head { margin-bottom: 30px; }
}
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head .lede { margin-top: 16px; }
.section-alt { background: var(--card-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

/* capability cards */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cap-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 30px 28px 32px;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s;
}
.cap-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.cap-card .cap-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--blue-wash); color: var(--blue-deep);
  display: grid; place-items: center; margin-bottom: 20px;
}
.cap-card h3 { margin-bottom: 10px; }
.cap-card p { color: var(--steel); font-size: 0.97rem; }
.cap-card .cap-spec, .mkc-body .cap-spec {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .08em;
  color: var(--steel); text-transform: uppercase;
}

/* equipment cards */
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.equip-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s;
}
.equip-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.equip-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.equip-body { padding: 20px 22px 22px; }
.equip-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
.equip-body .equip-type { color: var(--steel); font-size: .9rem; margin-bottom: 14px; }
/* manufacturer product shots vary (white studio vs dark scene): the plated
   variant letterboxes them on a uniform white plate so the grid aligns */
.equip-card.plated img { object-fit: contain; background: #fff; padding: 12px; border-bottom: 1px solid var(--line-soft); }
/* full-bleed cinematic hero — the flagship market pages (aerospace/telecom) */
.market-hero {
  position: relative; height: 62vh; min-height: 430px; max-height: 640px;
  overflow: hidden; display: flex; align-items: flex-end;
}
.market-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* medical hero: keep the robot arms' tips in frame */
.market-hero > img[src*="med-hero"] { object-position: 50% 12%; }
.market-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,18,.12) 0%, rgba(11,14,18,.58) 74%, rgba(11,14,18,.8) 100%);
}
.market-hero .container { position: relative; z-index: 2; padding-bottom: 52px; }
.market-hero .eyebrow { color: #A9C4E8; }
.market-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.market-hero .lede { color: rgba(255,255,255,.9); max-width: 780px; margin-top: 16px; }
/* coming-soon markets: quiet tracked mono line in the hero */
.mk-soon-hero {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .42em;
  text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-top: 16px;
}
/* split section — content one side, scene image the other */
.split-sec { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split-sec.rev .split-img { order: -1; }
.split-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
/* OEM section heads on approvals — the official marks ARE the names
   (wordmark logos beside repeated text read twice); h2 stays for a11y */
.oem-head { display: flex; align-items: center; gap: 20px; }
/* per-mark heights: equal LETTER size, not equal box — each lockup
   carries different internal proportions */
.oem-head img { height: 40px; width: auto; }
.oem-head img[src*="dehavilland"] { height: 48px; }
.oem-head img[src*="l3harris"] { height: 42px; }
.oem-head h2 {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* approved-by proof line (real ASL data; links to approvals) */
.approved-line {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel); text-align: center;
}
.approved-line a { color: var(--blue-deep); font-weight: 500; }
@media (max-width: 860px) {
  .split-sec { grid-template-columns: 1fr; gap: 28px; }
  .split-sec.rev .split-img { order: 0; }
  .market-hero { height: auto; min-height: 52vh; }
  /* phones: text spans the whole busy frame, so the scrim carries more of
     the contrast work than the desktop bottom-gradient */
  .market-hero::after {
    background: linear-gradient(180deg, rgba(11,14,18,.34) 0%, rgba(11,14,18,.66) 55%, rgba(11,14,18,.86) 100%);
  }
  .market-hero .container { padding-top: 96px; padding-bottom: 34px; }
}
/* approvals hero — the formation stacks vertically in the frame, so it
   needs the full viewport to show all three aircraft; text sits in a
   left column over the clean-sky third, and the sky dissolves into the
   page at the bottom instead of ending on a hard photo edge */
/* full-screen heroes slide under the sticky bar so the at-top glass
   shows the imagery through it (header itself stays 68px in flow) */
.market-hero--full, .about-hero { margin-top: -68px; }
.market-hero--full { height: 100svh; min-height: 640px; max-height: none; align-items: center; }
.market-hero--full > img { object-position: 58% 6%; }
.market-hero--full::after {
  background: linear-gradient(100deg, rgba(11,14,18,.72) 0%, rgba(11,14,18,.36) 34%, rgba(11,14,18,0) 58%);
}
.market-hero--full::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background: linear-gradient(180deg, rgba(244,246,248,0), var(--canvas));
  z-index: 1;
}
.market-hero--full .container {
  padding-bottom: 0; width: 100%; max-width: none;
  padding-left: clamp(28px, 4.5vw, 88px);
}
.market-hero--full .lede { max-width: 560px; }
/* editorial OEM annotations near each aircraft — quiet mono text (NOT
   brand marks: the aircraft are illustrative), staggered slow fade-in */
.hero-oem { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-oem span {
  position: absolute; font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(11, 14, 18, .6);
  opacity: 0; animation: oem-in 2.4s ease var(--d, 0s) forwards;
}
@keyframes oem-in { to { opacity: 1; } }
.market-hero--full .hero-note {
  position: absolute; left: 18px; right: clamp(18px, 3vw, 44px); bottom: 16px; z-index: 2;
  text-align: right;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(23, 28, 34, .52);
}
.footer-doc .ai-note { width: 100%; opacity: .82; }
@media (prefers-reduced-motion: reduce) { .hero-oem span { animation: none; opacity: 1; } }
@media (max-width: 860px) {
  .market-hero--full { height: 100svh; min-height: 560px; }
  .market-hero--full > img { object-position: 55% 50%; }
  .hero-oem { display: none; }
  /* phones: the desktop left-column scrim leaves the paragraph over bright
     aircraft — add a full-frame dim so the copy reads */
  .market-hero--full::after {
    background:
      linear-gradient(180deg, rgba(11,14,18,.42) 0%, rgba(11,14,18,.5) 60%, rgba(11,14,18,.62) 100%);
  }
}
/* engineering & inspection — the CMM fills the section's right side at
   full height and dissolves into the canvas: strong fade toward the text,
   soft falloff top and bottom (same bleed language as the About hero) */
.inspect-sec { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 620px; }
.bleed-note {
  position: absolute; left: clamp(18px, 3vw, 44px); bottom: 14px; z-index: 3;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(23, 28, 34, .48);
}
.about-hero-note { left: auto; right: clamp(18px, 3vw, 44px); }
/* clause variants: dark-scrim market heroes get white; capability hero
   visuals carry a quiet caption under the image */
.market-hero { position: relative; }
.market-hero .hero-note-dark {
  position: absolute; right: clamp(18px, 3vw, 44px); bottom: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
  text-shadow: 0 1px 8px rgba(11, 14, 18, .55);
}
.hero-visual-wrap { width: 100%; }
.hero-visual-wrap .visual-note {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(23, 28, 34, .42);
  text-align: right; margin-top: 8px;
}
@media (max-width: 860px) {
  /* pin the clause onto the image band itself (image is full-width,
     aspect 1600:893 => height = 55.8vw) */
  .about-hero { position: relative; }
  /* phones: the clause flows as a caption line directly under the image —
     no computed offsets to drift into the picture */
  .about-hero-note {
    position: static; display: block; text-align: right;
    padding: 6px 18px 0;
    color: rgba(23, 28, 34, .48); text-shadow: none;
  }
}
.inspect-sec .container {
  position: relative; z-index: 2; width: 100%; max-width: none;
  display: flex; justify-content: flex-end;
  padding-right: clamp(28px, 4.5vw, 88px);
}
.inspect-copy { max-width: 500px; }
.inspect-bleed {
  position: absolute; top: 0; left: 0; height: 100%; width: 66%;
  object-fit: cover; object-position: 50% 45%;
  /* linear intersect fades: fully transparent AT the right edge (toward
     the text, which now sits on the right), soft melt top and bottom */
  -webkit-mask-image:
    linear-gradient(270deg, transparent 0%, #000 36%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(270deg, transparent 0%, #000 36%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 860px) {
  .inspect-sec { flex-direction: column; min-height: 0; }
  .inspect-bleed {
    position: static; width: calc(100% - 48px); height: auto;
    -webkit-mask-image: none; mask-image: none;
    border-radius: var(--radius); margin: 26px auto 0;
  }
}
/* About hero — the bore-telescope frame emerges from the page on the
   right: no tile, no edges; a radial mask dissolves it to nothing well
   before the text column so the words always sit on clean canvas */
.about-hero {
  position: relative; overflow: hidden; padding: 0;
  min-height: 100svh; display: flex; align-items: center;
}
.about-bleed {
  position: absolute; top: 0; right: 0; height: 100%; width: 88%;
  object-fit: cover; object-position: 58% 42%;
  /* full-strength image; two intersecting fades only where asked —
     left (toward the text) and bottom (into the page). A single radial
     at this full-screen size washed the whole frame out */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 8%, #000 48%),
    linear-gradient(180deg, #000 70%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 8%, #000 48%),
    linear-gradient(180deg, #000 70%, transparent 97%);
  mask-composite: intersect;
  pointer-events: none;
}
.about-hero .container {
  position: relative; z-index: 2; width: 100%; max-width: none;
  padding-left: clamp(28px, 4.5vw, 88px);
  padding-top: 88px; padding-bottom: 88px;
}
/* certification showcase — the real marks in full color, big, evenly
   distributed on the light page (owner: no banner) */
.cert-band { padding: 64px 0 72px; }
.cert-band-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 34px;
}
.cert-band .mark { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cert-band .mark img { height: 152px; width: auto; max-width: none; }
.cert-band .mark span {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel);
}
.cert-band-link { text-align: center; margin-top: 44px; }
.cert-band-link a {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.cert-band-link a:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 860px) {
  .cert-band .mark img { height: 96px; }
  .cert-band-row { justify-content: center; }
}
/* the whole text block lives in the left column, clear of the image */
.about-copy { max-width: 520px; }
.about-lede { max-width: 44ch; }
@media (max-width: 860px) {
  /* phones: the scope image becomes a full-width band above the copy,
     dissolving into the page bottom (owner: image must show on mobile) */
  .about-bleed {
    display: block; position: static; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    mask-composite: add;
  }
  .about-hero { display: block; padding: 0 0 6px; min-height: 0; }
  .about-hero + .section-tight { padding-top: 16px; }
  /* the desktop container keeps 88px of vertical-centering padding —
     dead white space on phones */
  .about-hero .container { padding-top: 12px; padding-bottom: 0; }
  .about-copy h1 { margin-top: 6px; }
}
/* 2-col capability hero: verbatim lede left, scene visual right */
.hero-2col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.hero-visual { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
@media (max-width: 860px) { .hero-2col { grid-template-columns: 1fr; gap: 30px; } }
/* materials strip — data chips, inspection-document voice */
.mat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.mat-chip {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  background: var(--card);
}
.equip-spec {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--steel);
  border-top: 1px dashed var(--line); padding-top: 13px;
}
.equip-spec b { color: var(--ink); font-weight: 600; }

/* ── Credentials band — brushed-aluminum plate (LIGHT; owner: no dark) ── */
.anchor-band {
  background: var(--alu-grad); color: var(--anchor-text);
  padding: 96px 0; position: relative; overflow: hidden;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.anchor-band h2 { color: var(--ink); }
.anchor-band .lede { color: var(--anchor-steel); }
/* quiet open band: no boxes — numerals on one row, hairline separators */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; background: transparent;
  border: none; border-radius: 0;
  overflow: visible; margin-top: 54px;
}
.stat-cell { background: transparent; padding: 8px 32px; position: relative; border-left: 1px solid var(--line); }
.stat-cell:first-child { border-left: none; padding-left: 0; }
.stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.5rem); letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.stat-value .unit { font-size: 0.5em; color: var(--anchor-steel); font-weight: 500; margin-left: 2px; }
/* homepage strip: seamless with the tiles section above — no band borders,
   same canvas tone; tight rhythm into the navy curve below */
.home-stats { background: var(--canvas); border-top: none; border-bottom: none; padding: 40px 0 88px; }
/* numerals wear the same navy gradient as the Difference band below;
   units keep their steel color */
.home-stats .stat-value {
  background: var(--navy-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label {
  font-family: var(--font-body); font-weight: 500; font-size: 0.98rem;
  letter-spacing: 0.01em; text-transform: none;
  color: var(--steel); margin-top: 8px;
}
.cert-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 54px; }
.cert-item {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--anchor-card); border: 1px solid var(--anchor-line);
  border-radius: var(--radius); padding: 24px 26px;
}
.cert-item img { height: 52px; width: 52px; object-fit: contain; background: #fff; border-radius: 8px; padding: 6px; flex-shrink: 0; border: 1px solid var(--line-soft); }
.cert-item h3 { color: var(--ink); font-size: 1.02rem; margin-bottom: 4px; }
.cert-item p { color: var(--anchor-steel); font-size: 0.92rem; }
.cert-item { box-shadow: var(--shadow); }

/* ── Industries strip ───────────────────────────────────────── */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ind-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ind-card img { aspect-ratio: 4/4.6; object-fit: cover; width: 100%; transition: transform .5s ease; }
.ind-card:hover img { transform: scale(1.035); }
.ind-card .ind-label {
  position: absolute; inset: auto 0 0 0;
  padding: 44px 24px 20px;
  background: linear-gradient(transparent, rgba(10,12,16,.86));
  color: #fff;
}
.ind-label h3 { font-size: 1.12rem; margin-bottom: 2px; }
.ind-label p { font-size: .85rem; color: rgba(255,255,255,.72); }

/* ── Spec / inspection tables ───────────────────────────────── */
.spec-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
/* wide tables scroll inside their card on phones instead of clipping */
.spec-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
@media (max-width: 640px) {
  .spec-table th, .spec-table td { padding: 10px 12px; }
  .spec-table { font-size: .84rem; }
}
.spec-table th, .spec-table td { text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table th {
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--steel-lt); font-weight: 500; background: var(--card-2);
}
.spec-table td { color: var(--ink-70); }
.spec-table td:first-child { color: var(--ink); font-weight: 500; }
.spec-table td.mono-cell { font-family: var(--font-mono); font-size: .8rem; }

/* ── CTA band ───────────────────────────────────────────────── */
.cta-band { padding: 104px 0 120px; text-align: center; }
.cta-band h2 { max-width: 640px; margin: 0 auto 18px; }
.cta-band .lede { margin: 0 auto 34px; }

/* ── Forms (contact / RFQ) ──────────────────────────────────── */
.form-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 30px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block; font-size: 0.78rem; font-weight: 600;
  margin-bottom: 5px; color: var(--ink);
}
.field input, .field textarea, .field select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font: inherit; font-size: 0.95rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-note { font-size: .82rem; color: var(--steel); margin-top: 14px; }
/* .form-notice classes are set by js/supabase-client.js — keep the names */
.form-notice { display: none; font-size: .92rem; font-weight: 500; }
.form-notice.error { display: inline-block; color: #C2410C; }
.rfq-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 1020px) { .rfq-grid { grid-template-columns: 1fr; } }
/* honeypot — visually gone, present for bots */
.hp-field { position: absolute; left: -6000px; opacity: 0; height: 0; overflow: hidden; }

/* ── RFQ dropzone — the file input, dressed as a drawing drop ─────
   The raw <input id="file-input"> stays wired to supabase-client.js;
   the label wraps it, so a click opens the picker and drops set .files. */
.dropzone {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; text-align: center; cursor: pointer;
  padding: 13px 16px; border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm); background: var(--card-2);
  color: var(--steel); transition: border-color .16s, background .16s, color .16s;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--blue); background: var(--blue-wash); color: var(--ink); }
.dropzone.is-drag { border-color: var(--blue); background: var(--blue-wash); border-style: solid; color: var(--ink); }
.dropzone.has-file { border-style: solid; border-color: var(--good); background: rgba(23,138,80,.06); color: var(--ink); }
.dropzone svg { color: var(--blue-deep); }
.dz-text { font-size: .95rem; font-weight: 500; }
.dz-text b { color: var(--blue-deep); }
.dz-hint { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-lt); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ── "Quotes in 2 business days" promise pill ─────────────────── */
.promise {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-deep);
  background: var(--blue-wash); border: 1px solid rgba(37,99,235,.18);
  padding: 7px 14px; border-radius: 999px;
}
.promise svg { width: 13px; height: 13px; }

/* ── Compact "what happens next" — reuses the traveler step motif ─
   A slimmer .jstep for the RFQ aside: op number + name + one line. */
.next-steps { display: grid; gap: 10px; }
.next-steps .jstep { grid-template-columns: 66px 1fr; gap: 14px; padding: 15px 18px; }
.next-steps .j-name { font-size: .98rem; margin-bottom: 2px; }
.next-steps .j-desc { grid-column: 2; font-size: .9rem; }
@media (max-width: 720px) { .next-steps .jstep { grid-template-columns: 56px 1fr; } }

/* ── Reassurance note (ITAR / controlled data) ──────────────────── */
.note-block {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blue); border-radius: var(--radius-sm);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.note-block svg { color: var(--blue-deep); flex-shrink: 0; margin-top: 2px; }
.note-block p { font-size: .9rem; color: var(--steel); margin: 0; }
.note-block b { color: var(--ink); }

/* ── Inline section CTA — a quiet "quote this" line under a section ─ */
.inline-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 30px; padding: 20px 26px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.inline-cta p { margin: 0; color: var(--ink); font-weight: 500; }
.inline-cta p span { display: block; color: var(--steel); font-weight: 400; font-size: .9rem; margin-top: 2px; }

/* ── Footer — document footer ───────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card-2);
  padding: 34px 0 26px;
}
/* compact footer: logo + contact on one line, link row, doc lines */
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-contact { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; font-size: .92rem; color: var(--steel); }
.footer-contact a { color: var(--ink); font-weight: 500; }
.footer-contact a:hover { color: var(--blue-deep); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin: 20px 0 18px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .88rem;
}
.footer-links a { color: var(--steel); }
.footer-links a:hover { color: var(--blue-deep); }
/* Government of Canada funding acknowledgment — its own full band above the footer */
.funding-band { background: #fff; border-top: 1px solid var(--line-soft); padding: 36px 0; }
.funding-band img { display: block; margin: 0 auto; height: clamp(58px, 6.4vw, 92px); width: auto; max-width: 100%; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-grid h4 {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel-lt); margin-bottom: 14px; font-weight: 500;
}
.footer-grid a, .footer-grid p { display: block; font-size: .92rem; color: var(--steel); margin-bottom: 9px; }
.footer-grid a:hover { color: var(--ink); }
.footer-doc {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); padding-top: 22px;
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel-lt);
}

/* ── Document pages (privacy / terms) ───────────────────────── */
.doc-page { max-width: 780px; margin: 0 auto; padding: 72px 24px 120px; }
.doc-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.doc-page .doc-meta {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel-lt); margin-bottom: 44px;
}
.doc-page h2 { font-size: 1.3rem; margin: 40px 0 12px; }
/* supplier T&C — plain legal list: number in the gutter, hairline rows */
.tc-ol { list-style: none; margin: 0; padding: 0; counter-reset: tc; }
.tc-ol[start="13"] { counter-reset: tc 12; }
.tc-ol li {
  position: relative; padding: 13px 0 13px 50px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .98rem; line-height: 1.65; color: var(--steel);
  counter-increment: tc;
}
.tc-ol li::before {
  content: counter(tc) "."; position: absolute; left: 0; top: 13px;
  font-family: var(--font-mono); font-size: .85rem; font-weight: 500; color: var(--ink);
}
.doc-page p, .doc-page li { color: var(--ink-70); margin-bottom: 12px; }
.doc-page ul { padding-left: 22px; }

/* ── Reveal on scroll — fail-open: only hides when JS confirms it's
      running (html.js set by site.js). No JS → everything visible. ── */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
/* phones: no reveal-hide — laggy observers read as blank gaps between sections */
@media (max-width: 860px) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: .01ms !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .cap-grid, .equip-grid, .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .stat-cell { border-left: none; padding: 0 14px; text-align: center; }
  .stat-cell:nth-child(even) { border-left: 1px solid var(--line); }
  .stat-label { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .section { padding: 72px 0; }
  .hero { padding: 48px 0 64px; }
  .cap-grid, .equip-grid, .ind-grid, .cert-list, .form-grid { grid-template-columns: 1fr; }
  .title-block { grid-template-columns: repeat(2, 1fr); }
  .tb-cell:nth-child(2n) { border-right: none; }
}
/* drawer breakpoint is 1080px — the dropdown nav needs the full desktop width */
@media (max-width: 1080px) {
  /* the off-canvas drawer's transform otherwise creates horizontal scroll;
     clip (not hidden) keeps position:sticky working inside the film deck */
  html, body { overflow-x: clip; }
  /* drawer nav: frosted panel slides in from the right over a dimmed page */
  .site-header::after {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: rgba(23, 28, 34, .34);
    opacity: 0; pointer-events: none; transition: opacity .32s ease;
  }
  .site-header:has(.nav.open)::after { opacity: 1; pointer-events: auto; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: min(320px, 84vw); height: 100dvh;
    background: rgba(250, 251, 252, .94);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px rgba(23, 28, 34, .16);
    flex-direction: column; padding: 96px 26px 28px; gap: 0; align-items: stretch;
    overflow-y: auto;
    visibility: hidden; transform: translateX(102%);
    transition: transform .38s cubic-bezier(.32, .9, .3, 1), visibility 0s linear .38s;
  }
  .nav.open {
    visibility: visible; transform: translateX(0);
    transition: transform .38s cubic-bezier(.32, .9, .3, 1);
  }
  .nav a {
    font-size: 1.06rem; padding: 15px 2px;
    border-bottom: 1px solid var(--line-soft);
    opacity: 0; transform: translateX(18px);
    transition: opacity .34s ease, transform .34s ease, color .16s;
  }
  .nav.open a { opacity: 1; transform: translateX(0); }
  .nav.open a:nth-child(1) { transition-delay: .08s; }
  .nav.open a:nth-child(2) { transition-delay: .13s; }
  .nav.open a:nth-child(3) { transition-delay: .18s; }
  .nav.open a:nth-child(4) { transition-delay: .23s; }
  .nav.open a:nth-child(5) { transition-delay: .28s; }
  .nav.open a:nth-child(6) { transition-delay: .33s; }
  .nav.open a:nth-child(7) { transition-delay: .38s; }
  .nav a[aria-current="page"] { border-bottom: 1px solid var(--blue); }
  .nav .btn { margin: 20px 0 0; justify-content: center; border-bottom: none; }
  /* dropdown groups are tap-to-expand accordions in the drawer:
     the parent row toggles; sub-links stay collapsed until asked */
  .nav-group { display: block; border-bottom: 1px solid var(--line-soft); }
  .nav-group::before { content: none; }
  .nav-group > .nav-parent {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 1.06rem; color: var(--ink);
    padding: 15px 2px; border-bottom: none;
    opacity: 1; transform: none;
  }
  .nav-group > .nav-parent::after,
  .nav-group:hover > .nav-parent::after,
  .nav-group:focus-within > .nav-parent::after {
    content: "+"; border: none; width: auto; height: auto; margin: 0; transform: none;
    font-family: var(--font-mono); font-size: 1.25rem; line-height: 1;
    color: var(--steel-lt); transition: none;
  }
  .nav-group.open > .nav-parent::after { content: "–"; }
  .nav-drop {
    position: static; display: flex; flex-direction: column;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none;
    padding: 0; min-width: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-group.open .nav-drop { max-height: 320px; }
  .nav-drop a:first-child { border-top: 1px solid var(--line-soft); }
  .nav-drop a:last-child { border-bottom: none; }
  .nav-drop a {
    font-size: 1rem; padding: 12px 2px 12px 16px;
    border-bottom: 1px solid var(--line-soft); border-radius: 0;
    white-space: normal; opacity: 1; transform: none;
  }
  .nav-drop a:hover { background: none; }
  .nav-drop a[aria-current="page"] { background: none; border-bottom: 1px solid var(--blue); }
  .nav-toggle {
    display: grid; place-items: center; width: 42px; height: 42px;
    position: relative; z-index: 70;   /* stays above the drawer as the X */
    border: 1px solid var(--line); border-radius: 9px; background: transparent;
    cursor: pointer; color: var(--ink);
  }
  /* hamburger morphs to an X */
  .nav-toggle svg { transition: opacity .18s ease, transform .3s ease; }
  .nav-toggle::before, .nav-toggle::after {
    content: ""; position: absolute; width: 18px; height: 2px; border-radius: 1px;
    background: currentColor; opacity: 0;
    transition: transform .3s ease, opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] svg { opacity: 0; transform: rotate(90deg) scale(.5); }
  .nav-toggle[aria-expanded="true"]::before { opacity: 1; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { opacity: 1; transform: rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .nav, .nav a, .nav-toggle svg, .nav-toggle::before, .nav-toggle::after { transition: none; }
  }
}

/* ══════════════════════════════════════════════════════════════
   CINEMA LAYER — GSAP scroll scenes (index.html)
   Fail-open: without html.js everything below renders static.
   ══════════════════════════════════════════════════════════════ */

/* scroll progress rail — titanium thread up the right edge */
.progress-rail {
  position: fixed; top: 0; right: 0; width: 3px; height: 100%;
  background: var(--line-soft); z-index: 70; pointer-events: none;
}
.progress-rail .fill {
  width: 100%; height: 100%;
  background: var(--blue);
  transform-origin: top; transform: scaleY(0);
}

/* ── Scene 1: video hero ────────────────────────────────────── */
.cine-hero {
  position: relative; min-height: 92vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding-bottom: 96px;
}
.cine-hero .hero-media {
  position: absolute; inset: 0; z-index: 0;
}
.cine-hero .hero-media video,
.cine-hero .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.cine-hero .hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(244,246,248,.97) 0%, rgba(244,246,248,.9) 44%,
    rgba(244,246,248,.55) 72%, rgba(244,246,248,.18) 100%);
}
.cine-hero .container { position: relative; z-index: 2; }
.cine-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); max-width: 13ch; }
.cine-hero h1 .line { display: block; overflow: hidden; }
.cine-hero h1 .line > span { display: inline-block; }
.hero-titleblock { max-width: 620px; margin-top: 44px; }
.scroll-cue {
  position: absolute; bottom: 18px; right: 42px; left: auto; transform: none;
  z-index: 2; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--steel);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--steel), transparent);
  animation: cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100% { transform: scaleY(.4); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ── Scene 2: pinned process strip ──────────────────────────── */
.process-scene { position: relative; }
.process-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.process-track {
  display: flex; gap: 26px; will-change: transform;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
}
.process-panel {
  flex: 0 0 min(520px, 78vw);
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.process-panel img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.process-panel .pp-body { padding: 22px 26px 26px; }
.process-panel .pp-step {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 10px;
  color: var(--blue-deep);
  font-weight: 500;
}
.process-panel h3 { margin-bottom: 8px; }
.process-panel p { color: var(--steel); font-size: .95rem; }

/* ── Scene 4: 3D billet ─────────────────────────────────────── */
.billet-scene { position: relative; background: var(--alu-grad); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.billet-pin { min-height: 100vh; display: grid; align-items: center; }
.billet-stage { position: relative; height: 72vh; }
.billet-stage canvas, .billet-stage .billet-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.billet-copy { position: absolute; top: 8vh; left: 0; right: 0; text-align: center; z-index: 2; pointer-events: none; }
.billet-callout {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.85); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 6px; opacity: 0;
  backdrop-filter: blur(4px);
}
.billet-callout::before { content: "— "; color: var(--blue-deep); }

/* ── Scene 5: markets rail ──────────────────────────────────── */
.markets-scene { overflow: hidden; }
.markets-track { display: flex; gap: 22px; will-change: transform; padding: 0 max(24px, calc((100vw - 1180px) / 2)); }
.market-card {
  flex: 0 0 min(420px, 74vw); position: relative;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.market-card img { aspect-ratio: 4/4.8; object-fit: cover; width: 100%; }
.market-card .ind-label {
  position: absolute; inset: auto 0 0 0; padding: 44px 24px 20px;
  background: linear-gradient(transparent, rgba(244,246,248,.96));
  color: var(--ink);
}
.market-card .ind-label p { color: var(--steel); }
/* static variant for content pages (About/Markets) — the homepage rail is
   scrub-driven by cinema.js; without it the flex track can't be reached */
.markets-static { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 0; will-change: auto; }
.markets-static .market-card { flex: none; }
/* blueprint tiles — markets with no owned photography get grid-paper + line icon */
.mk-tile {
  aspect-ratio: 4 / 4.8; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px),
    #F7FAFD;
  background-size: 22px 22px, 22px 22px, auto;
}
.mk-tile { flex-direction: column; gap: 16px; }
.mk-tile svg { width: 32%; height: auto; color: var(--blue-deep); opacity: .55; }
/* quiet capsule — premium reads as restraint, not shine */
.mk-soon {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: var(--steel); padding: 7px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .75);
}
/* real-parts carousel — slow horizontal drift, the centered part swells */
.parts-carousel { overflow: hidden; width: 100%; padding: 64px 0 58px; }
.parts-track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.parts-track img {
  width: 290px; aspect-ratio: 4 / 3; object-fit: cover; flex: none;
  border-radius: 12px; border: 1px solid var(--line-soft);
  box-shadow: var(--shadow); background: #fff;
  will-change: transform;
}
.parts-carousel { position: relative; }
.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.8); color: var(--ink);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pc-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); box-shadow: var(--shadow-lift); }
.pc-prev { left: 26px; }
.pc-next { right: 26px; }
@media (prefers-reduced-motion: reduce) {
  .parts-carousel { overflow-x: auto; }   /* manual scroll, no motion */
  .pc-arrow { display: none; }
}
@media (max-width: 640px) {
  /* phones: desktop-size cards read enormous at 390px — scale the strip down */
  .parts-track img { width: 190px; }
  .parts-carousel { padding: 26px 0 22px; }
  .pc-arrow { width: 38px; height: 38px; }
  .pc-prev { left: 14px; }
  .pc-next { right: 14px; }
}
.parts-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 38px; }
.parts-lists h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 6px; padding-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.parts-lists ul { list-style: none; padding: 0; margin: 0; }
/* spec-sheet voice: the display face carries the list items — big,
   confident rows instead of small body text */
.parts-lists li {
  font-family: var(--font-body); font-weight: 400;
  font-size: 1.12rem; line-height: 1.4; color: var(--steel);
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 720px) { .parts-lists { grid-template-columns: 1fr; } }

/* the customer journey (About) — traveler-operation vocabulary */
.journey { display: grid; gap: 12px; margin-top: 34px; }
.jstep {
  display: grid; grid-template-columns: 84px 130px 1fr; gap: 20px; align-items: center;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 10px;
  border-left: 4px solid var(--blue); padding: 18px 22px;
  box-shadow: var(--shadow);
}
.j-op { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--blue-deep); font-weight: 600; }
.j-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.j-desc { color: var(--steel); font-size: .95rem; }
@media (max-width: 720px) {
  .jstep { grid-template-columns: 64px 1fr; }
  .j-desc { grid-column: 1 / -1; }
}

/* merged market cards: media header + narrative + spec footer */
.mkc {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mkc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.mkc-media { height: 185px; flex: none; }
.mkc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkc-media .mk-tile { width: 100%; height: 100%; aspect-ratio: auto; }
.mkc-body { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.mkc-body h3 { margin: 0; }
.mkc-body p { color: var(--steel); font-size: .93rem; flex: 1; }

/* four tiles, one row, on desktop */
@media (min-width: 1100px) {
  .mk-four { grid-template-columns: repeat(4, 1fr); }
  .markets-static { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 721px) and (max-width: 1099px) {
  .mk-four { grid-template-columns: repeat(2, 1fr); }
}

/* card 3D tilt (JS sets --rx/--ry) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; }

/* chrome hairline utility */
.chrome-rule { height: 2px; background: var(--chrome-grad); border: none; border-radius: 1px; }

/* video helpers */
.vid-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .cine-hero { min-height: 78vh; }
  .cine-hero .hero-scrim { background: linear-gradient(180deg, rgba(244,246,248,.95) 0%, rgba(244,246,248,.75) 60%, rgba(244,246,248,.4) 100%); }
  .process-track, .markets-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .process-panel, .market-card { scroll-snap-align: center; }
  .billet-stage { height: 54vh; }
}

/* ══════════════════════════════════════════════════════════════
   TITAN FILM (experience.html) — one canvas, chaptered captions,
   traveler HUD. .has-film runs the film; .no-film shows the essay.
   ══════════════════════════════════════════════════════════════ */
/* altitude sky: pale blue overhead dissolving to white at the horizon —
   the renderer canvas is alpha:true, so this gradient IS the film's sky */
.film-body {
  background: linear-gradient(180deg, #DDEBF9 0%, #EDF4FB 34%, #FAFBFC 62%) fixed;
}
#film-stage { position: fixed; inset: 0; z-index: 1; }
#film-canvas, #film-canvas canvas { position: absolute; inset: 0; }
#film-fade { position: absolute; inset: 0; background: #FAFBFC; opacity: 1; pointer-events: none; }
.film-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; border-bottom: none;
  /* soft top scrim: the wordmark + nav must read over any footage frame */
  background: linear-gradient(180deg, rgba(244,246,248,.82) 0%, rgba(244,246,248,.45) 55%, rgba(244,246,248,0) 100%);
}


#film-scroll { position: relative; z-index: 10; height: 1350vh; pointer-events: none; }
.film-cap {
  position: fixed; left: 50%; bottom: 12vh; transform: translateX(-50%);
  width: min(720px, calc(100vw - 48px)); text-align: center;
  opacity: 0; pointer-events: none; z-index: 12;
}
.film-cap h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); text-shadow: 0 0 18px rgba(250,251,252,.95), 0 0 42px rgba(250,251,252,.85), 0 1px 2px rgba(250,251,252,.9); }
.film-cap .cap-label {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--steel); margin-bottom: 12px;
}
.film-cap .cap-sub { color: var(--steel); margin-top: 12px; font-size: 1.02rem; text-shadow: 0 0 14px rgba(250,251,252,.95), 0 0 30px rgba(250,251,252,.9); }
.film-cap .cap-sub em { color: var(--steel-lt); font-style: normal; font-size: .82rem; }
.film-cap .reading {
  display: block; font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .06em; color: var(--steel-lt); margin-top: 6px;
  transition: color .3s;
}
.film-cap .reading.typed { color: var(--good); }

/* Process glass cards — the traveler record, delivered scene by scene.
   Light frosted glass tuned for the white void: the blur shows the 3D world
   moving through it; hairline + shadow give it edge; blue top accent. */
/* scoped to the film body + theaters — classic has its own .cap-card */
.cardrow { display: flex; justify-content: center; margin-top: 18px; }
.vfilm-body .cap-card, .theaters .cap-card {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 10px; overflow: hidden;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(23,28,34,.09); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(23,28,34,.09);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  opacity: 0; /* the engine animates cards in after each headline */
}
.vfilm-body .cap-card::before, .theaters .cap-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--blue); opacity: .85;
}
.vfilm-body .cap-card .cc-tag, .theaters .cap-card .cc-tag { color: var(--blue); font-weight: 600; }
.vfilm-body .cap-card.cc-col { flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; }
.vfilm-body .cap-card .reading { margin-top: 0; }

/* ══ TRACE v2 — full-bleed video chapters + 3D part interlude ══ */
/* Sticky-hold scrollytelling (the Apple / Pudding pattern): each chapter is a
   tall scroll runway; its 100vh frame pins fullscreen for ~140vh of scroll so
   the clip plays out before the story moves on. Scroll distance = film time. */
.vfilm-body { background: var(--canvas); }
/* Snap deck: each film is exactly one viewport and the page snaps between them
   (snap rules in the desktop media block below). No sticky-hold runway — the
   scroll moves directly from one full film to the next. */
.vchap { position: relative; height: 100vh; height: 100dvh; background: #eef2f6; }
.vchap-frame { position: relative; height: 100vh; height: 100dvh; overflow: clip; }
.vchap video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* cinematic black vignette — matches the grade baked into the film clips */
.vchap-frame::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 100% at 50% 45%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 74%, rgba(0,0,0,.38) 100%);
  pointer-events: none;
}
/* soft top edge on every chapter after the first — dissolve, not cut */
.vchap:not(:first-child) .vchap-frame::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16%;
  background: linear-gradient(180deg, rgba(250,251,252,.85) 0%, rgba(250,251,252,0) 100%);
  pointer-events: none; z-index: 1;
}
/* ── Snap deck (desktop, motion-OK): each scroll glides directly to the next
   full film, never resting in between. Native CSS snap (not JS scroll-jacking).
   The 260vh 3D interlude opts out so it stays a free-scroll scrubbed chapter. */
/* SNAP DECK RETIRED (2026-07-10): the chapter deck was replaced by the pinned
   THREE THEATERS section — mandatory page snap would fight its 300vh runway.
   Rules kept only for reference; the .vfilm-body class is no longer on index. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  /* the container rule the align rules need — without it the page can park
     half-way between two films. Scoped to the film homepage only. */
  /* snap retired 2026-07-17: single continuous film, free scrolling (owner) */
  /* html:has(body.vfilm-body), html:has(body.film-body) { scroll-snap-type: y mandatory; } */
  .vfilm-body .vchap { scroll-snap-align: start; scroll-snap-stop: always; }
  .vfilm-body .caprouter { scroll-snap-align: start; }
  .vfilm-body .film-landing-v { scroll-snap-align: start; }
  /* rest stops for the tail — without them mandatory snap yanks the scroll
     back up before the stats/Difference/footer can be reached */
  .vfilm-body .home-stats { scroll-snap-align: start; }
  .vfilm-body .difference { scroll-snap-align: center; }
  .vfilm-body .site-footer { scroll-snap-align: end; }
  /* three-theatres homepage: the panels row and the merge film are the two
     chapters; same tail rest stops as the deck */
  .film-body .theaters { scroll-snap-align: start; scroll-snap-stop: always; }
  .film-body .th-merge { scroll-snap-align: start; scroll-snap-stop: always; }
  .film-body .caprouter { scroll-snap-align: start; }
  .film-body .home-stats { scroll-snap-align: start; }
  .film-body .difference { scroll-snap-align: center; }
  .film-body .site-footer { scroll-snap-align: end; }
}
/* phones: the film goes fully static — each chapter is one poster + caption in
   normal flow. No pins, no autoplay, no scroll fights with the dynamic toolbar. */
/* Static-path caption reveal (phones + reduced-motion): no .on class is ever
   added, so force captions visible. `.vfilm-body` prefix (body class) lifts
   specificity above the base `.vchap .vcap {opacity:0}` — a plain media-query
   rule ties on specificity and loses on source order. */
@media (max-width: 860px) {
  /* films play on phones too — svh height keeps the browser chrome honest;
     captions ride the same .on/.act2 logic as desktop */
  .vchap, #vc0, #vc-ret { height: auto; }
  .vchap-frame { height: 100vh; height: 100svh; }
}
@media (prefers-reduced-motion: reduce) {
  .vchap, #vc0, #vc-ret { height: 100vh; height: 100dvh; }   /* no holds */
  .vchap-frame { position: static; }
  .vfilm-body .vchap .vcap { opacity: 1; transform: translate(-50%, 0); }
  .vfilm-body .vchap .cap-card { opacity: 1; }
  /* static path shows the machining poster — only act one's caption applies */
  .vfilm-body .vchap .vcap-act2, .vfilm-body .vchap .vcap-act3, .vfilm-body .vchap .vcap-act4 { display: none; }
}
.vchap .vcap {
  position: absolute; left: 50%; bottom: 9vh; transform: translate(-50%, 26px);
  width: min(760px, calc(100vw - 48px)); text-align: center; z-index: 2;
  opacity: 0; transition: opacity .8s ease, transform .8s ease;
}
.vchap.on .vcap { opacity: 1; transform: translate(-50%, 0); }
/* centered caption variant — sits over the subject so the finished part
   stays mostly covered (owner: don't showcase the full part) */
.vchap .vcap.vcap-center { bottom: auto; top: 76%; transform: translate(-50%, calc(-50% + 26px)); }
.vchap.on .vcap.vcap-center { transform: translate(-50%, -50%); }
.vcap-center h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
/* act-two caption: centered in front of the part but seated lower,
   swapped in after the film's white flash (videos.js toggles .act2) */
.vchap .vcap.vcap-act2, .vchap .vcap.vcap-act3, .vchap .vcap.vcap-act4 { top: 76%; }
.vchap.on .vcap-act2, .vchap.on .vcap-act3, .vchap.on .vcap-act4 { opacity: 0; }
.vchap.act2 .vcap:not(.vcap-act2) { opacity: 0 !important; }
.vchap.on.act2 .vcap-act2 { opacity: 1 !important; }
.vchap.act3 .vcap:not(.vcap-act3) { opacity: 0 !important; }
.vchap.on.act3 .vcap-act3 { opacity: 1 !important; }
.vchap.act4 .vcap:not(.vcap-act4) { opacity: 0 !important; }
.vchap.on.act4 .vcap-act4 { opacity: 1 !important; }
/* hero caption: visible + centered at rest so the GSAP scroll-scrub (rise + zoom
   in videos.js) owns its motion on desktop. Mobile/reduced-motion: just static. */
#vc0 .vcap:not([class*='vcap-act']) { opacity: 1; transform: translateX(-50%); }
.vchap .vcap h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.vchap .vcap .cap-label {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--steel); margin-bottom: 12px;
}
.vchap .vcap .cap-sub {
  color: var(--ink); margin-top: 12px; font-size: 1.16rem;
  text-shadow: 0 0 12px rgba(250, 251, 252, .85), 0 0 26px rgba(250, 251, 252, .7);
}
.vchap .vcap .cap-sub em { display: block; margin-top: 8px; color: var(--steel); font-style: normal; font-size: .84rem; }
/* living cards: stamp in like a traveler stamp, catch the light once, then
   breathe. Keyed to .on (added/removed both scroll directions → replays). */
.vchap.on .cap-card {
  opacity: 1;
  animation: cardStamp .55s cubic-bezier(.2, 1.6, .35, 1) .25s backwards,
             cardFloat 6s ease-in-out 1.4s infinite;
}
.vchap.on .cap-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  transform: skewX(-18deg);
  animation: cardShine 1s ease .85s both;
}
.vchap.on .cap-card .cc-tag { animation: tagPulse 1s ease .8s; }
@keyframes cardStamp {
  from { opacity: 0; transform: scale(1.14) rotate(-1.6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes cardShine { from { left: -60%; } to { left: 115%; } }
@keyframes tagPulse { 35% { text-shadow: 0 0 14px rgba(37,99,235,.75); } }
@keyframes cardFloat { 50% { transform: translateY(-3px); } }
/* 3D interlude cards: entrance is GSAP-driven (showPcap) — shine + float only */
.pcap .cap-card { animation: cardFloat 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .vchap.on .cap-card, .pcap .cap-card { animation: none; }
  .vchap.on .cap-card::after { animation: none; content: none; }
}
.scroll-cue {
  position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .3em;
  color: var(--steel-lt); z-index: 2; animation: cueFloat 2.2s ease-in-out infinite;
}
@keyframes cueFloat { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* the 3D interlude — now one snap screen; its sequence auto-plays on arrival */
.part3d-section { position: relative; height: 100vh; height: 100dvh; background: var(--canvas); }
.part3d-sticky {
  position: relative; height: 100vh; height: 100dvh; overflow: clip;
  /* warm studio backdrop — kills the flat CAD-viewport void behind the metal */
  background: radial-gradient(ellipse 72% 62% at 50% 40%, #FAF6ED 0%, #F0EDE6 46%, #E2E1DC 100%);
}
/* gentle vignette over the render, under the captions — cinematic edge falloff */
.part3d-sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 88% 82% at 50% 46%, rgba(23,28,34,0) 62%, rgba(23,28,34,.14) 100%);
}
#part3d-canvas, #part3d-canvas canvas { position: absolute; inset: 0; }
.film-cap.pcap { position: absolute; z-index: 3; }
.part3d-still { display: none; }
.no-part3d .part3d-section { height: auto; padding: 56px 0 64px; }
.no-part3d .part3d-sticky { position: static; height: auto; }
.no-part3d .part3d-sticky::after { content: none; }  /* no vignette on the static layout */
.no-part3d #part3d-canvas { display: none; }
/* phones skip WebGL but not the part: a still of the model leads the section */
.no-part3d .part3d-still {
  display: block; width: min(520px, 86vw); margin: 6px auto 0;
  border-radius: 14px;
}
.no-part3d .film-cap.pcap { position: static; opacity: 1 !important; transform: none !important; margin: 42px auto; }
.no-part3d .film-cap.pcap .cap-card { opacity: 1; }
.film-landing-v { position: relative; z-index: 2; border-top: 1px solid var(--line-soft); overflow: clip; }
/* LetarOS Command Center — the TITAN 3D scene, breathing behind the invitation */
#landing-cc {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
#landing-cc canvas { width: 100% !important; height: 100% !important; }
/* soft veil so the invitation text always wins over the scene */
.film-landing-v .container { position: relative; z-index: 2; }
.film-landing-v .container::before {
  content: ""; position: absolute; inset: -40px -80px; z-index: -1;
  background: radial-gradient(ellipse 60% 66% at 50% 46%, rgba(244,246,248,.9) 34%, rgba(244,246,248,0) 100%);
}

/* ══════════════════════════════════════════════════════════════
   THREE THEATERS — pinned tri-panel film (index.html)
   FLOOR · SKY · ORBIT loop side by side, sync up on scroll (js/film/
   theaters.js drives --sync and --merge), then merge into one frame.
   Phones + reduced-motion: static posters stacked, no pinning.
   ══════════════════════════════════════════════════════════════ */
/* Two snap chapters like the teardown deck: panels row (100vh), then the
   merge film (100vh) where the video PLAYS on arrival and the card rises
   at mid-clip. No scroll-scrubbed phases — theaters.js only plays/pauses. */
.theaters { position: relative; height: auto; background: #0e1216; }
.th-stage {
  position: relative;
  display: grid; grid-template-columns: 1fr 2px 1fr 2px 1fr;
  grid-template-rows: 100vh 100vh; grid-template-rows: 100dvh 100dvh;
}
.th-panel { position: relative; grid-row: 1; overflow: hidden; }
.th-panel video, .th-panel img.th-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.th-label {
  position: absolute; top: 84px; left: 0; right: 0; text-align: center; z-index: 3;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .42em; text-indent: .42em;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.75);
  opacity: calc(1 - var(--merge, 0));
}
.th-panel .cardrow { position: absolute; bottom: 7vh; left: 0; right: 0; z-index: 3; }
/* per-panel caption — the teardown deck's voice, seated low on each video;
   fades with its panel as the merge takes over */
.th-cap {
  position: absolute; bottom: 8vh; left: 0; right: 0; z-index: 3;
  padding: 0 18px; text-align: center;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 1.9vw, 2rem); letter-spacing: .03em; color: #fff;
  /* white face in a soft dark halo — reads on the bright floor/sky and dark orbit alike */
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7), 0 0 30px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .8);
  opacity: calc(1 - var(--merge, 0));
}
/* theater capsules ride the panel; engine-free reveal (always on) */
.theaters .cap-card { opacity: 1; }
.th-divider {
  position: relative; z-index: 4; width: 2px; grid-row: 1; align-self: stretch;
  background: rgba(255,255,255,.22);
}
/* merge chapter — its own full screen; the clip plays, then dims back
   under the card once .merged lands */
.th-merge {
  position: relative; grid-row: 2; grid-column: 1 / -1; z-index: 2;
  opacity: 1; overflow: clip; background: #06090d;
}
.th-merge video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 1.1s ease;
}
.theaters.merged .th-merge video { opacity: .22; }
/* the card shares the merge chapter's grid cell — dead-centered over the film */
.th-final {
  grid-row: 2; grid-column: 1 / -1; position: relative; z-index: 5;
  align-self: center; justify-self: center;
  width: min(1040px, calc(100vw - 48px)); text-align: center;
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s ease, transform .9s ease;
  pointer-events: none;
}
.theaters.merged .th-final { opacity: 1; transform: translateY(0); pointer-events: auto; }
.th-final .th-final-logo {
  display: block; width: min(880px, 96%); margin: 0 auto 30px;
  /* double shadow: tight edge definition + wide ambient — the merge frame is bright behind it */
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.9)) drop-shadow(0 8px 34px rgba(0,0,0,.6));
}
/* the three theaters named — the one color moment is the two gold points */
.th-kicker {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .5em; text-indent: .5em; color: var(--steel-lt);
  margin-bottom: 12px;
}
.th-kicker span { color: var(--ti-gold); }
.th-final h2 {
  font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: .045em;
  color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.65);
}
/* bare certification marks — white-knockout versions (assets/real/certs-white/,
   luminance-to-alpha so each seal keeps its internal detail), no chips */
.th-certs { display: flex; justify-content: center; align-items: center; gap: 34px; flex-wrap: wrap; margin: 26px 0 0; }
.th-certs img {
  height: 76px; width: auto; display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.7));
  opacity: .92;
}
.th-final .btn { margin-top: 30px; }
.th-final .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.th-final .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
/* cue + clause belong to the panels chapter, not the stage bottom */
.th-stage .scroll-cue { bottom: auto; top: calc(100dvh - 7vh); }
/* representative-imagery disclaimer — quiet, mono, always present in the stage */
.th-note {
  position: absolute; left: 18px; bottom: auto; top: calc(100dvh - 38px); z-index: 6;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
  /* quiet dark plate so the clause stays legible over the bright floor panel */
  background: rgba(8, 12, 16, .55); padding: 5px 10px; border-radius: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
/* ── static fallback: phones + reduced-motion ── */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .theaters { height: auto; }
  .th-stage { position: static; height: auto; display: block; }
  .th-panel {
    flex: none; height: 64vh; opacity: 1;
    /* soft dissolve between the stacked films — the dark section shows
       through the crossfade zones */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .th-panel video { display: none; }   /* posters only — no video downloads */
  .th-panel img.th-poster { display: block; }
  .th-label { top: 26px; }
  .th-cap { bottom: 60px; font-size: 1.4rem; }   /* clear of the panel's bottom mask fade */
  .th-divider { display: none; }
  .th-merge { position: static; opacity: 1; height: auto; }
  .th-merge video { display: none; }
  .th-merge img.th-poster { position: static; width: 100%; height: auto; display: block; }
  .th-final { position: static; transform: none; opacity: 1; pointer-events: auto; padding: 34px 24px 10px; width: auto; }
  .th-final h2 { color: #fff; }   /* the section stays dark in the static layout */
  .th-final .th-final-logo { width: 100%; }
  .th-certs img { height: 52px; }
  .th-stage .scroll-cue { display: none; }
  .th-note { position: static; display: block; padding: 12px 24px 20px; color: rgba(255,255,255,.45); text-shadow: none; }
}
/* phones with motion OK: the three panels play their loops in place
   (no pinning, no choreography; merge stays a poster behind the card) */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .th-panel { position: relative; overflow: hidden; }
  .th-panel video {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  /* the merge rises as its own full-screen chapter after ORBIT; part-way
     through, the film fades back and the final card pulls up over it */
  .th-merge { position: relative; height: 100svh; }
  .th-merge video {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: opacity 1s ease;
  }
  .th-merge img.th-poster { display: none; }
  .theaters.merged .th-merge video { opacity: .22; }
  .th-final {
    position: relative; z-index: 3; left: 0; top: auto; width: auto;
    margin-top: -100svh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; transform: translateY(30px);
    transition: opacity .9s ease, transform .9s ease;
    pointer-events: none;
  }
  .theaters.merged .th-final { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .th-final .btn { align-self: center; }
}
/* desktop: posters hidden once JS runs the film (poster attr covers preload) */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .th-panel img.th-poster, .th-merge img.th-poster { display: none; }
  .theaters + .film-landing-v { border-top: none; }
}

/* ── capabilities router — hover-expand strip: one compact row, the slat
      under the cursor widens and reveals its line, the rest compress ── */
.caprouter { padding: 72px 0 96px; background: var(--canvas); }
.caprouter h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.capr-strip { display: flex; gap: 14px; margin-top: 44px; height: 340px; }
.capr-slat {
  position: relative; flex: 1; display: block; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: flex .45s cubic-bezier(.4, 0, .2, 1);
}
.capr-slat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slat-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,18,0) 42%, rgba(11,14,18,.8) 100%);
}
.slat-info { position: absolute; left: 22px; right: 22px; bottom: 18px; }
.slat-info h3 { font-family: var(--font-display); font-size: 1.28rem; color: #fff; }
/* collapsed at rest so every title sits on the same baseline; grows with
   the slat on hover */
.slat-info p {
  font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.5;
  max-width: 340px; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .35s .1s, margin-top .4s;
}
.capr-slat:hover, .capr-slat:focus-visible { flex: 2.4; }
.capr-slat:hover .slat-info p, .capr-slat:focus-visible .slat-info p { max-height: 90px; opacity: 1; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .capr-slat, .slat-info p { transition: none; }
  .capr-slat:hover, .capr-slat:focus-visible { flex: 1; }
  .slat-info p { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .capr-strip { flex-direction: column; height: auto; }
  .capr-slat, .capr-slat:hover, .capr-slat:focus-visible { flex: none; height: 130px; }
  .slat-info p { display: none; }
}

/* ── THE LETAR DIFFERENCE — ink band, big title left / copy right, and a
      giant outlined wordmark whose boundary a white line travels ── */
/* owner-picked A-Navy: lockup navy on the left falling to black (Owens'
   red-to-black structure in Letar colours); curved white boundaries */
.difference {
  position: relative; overflow: hidden; padding: 140px 0 0;
  clip-path: polygon(0 46px, 72% 46px, 79% 0, 100% 0, 100% 100%, 0 100%);
  /* "Horizon" (owner pick): the films' dusk sky — sunset orange melting into
     night blue. Straight Owens-style edges; the old curves are gone. */
  background: linear-gradient(115deg, #C2410C 0%, #6B2410 30%, #16263F 72%, #0B0E12 100%);
}
.diff-curve { position: absolute; left: 0; width: 100%; height: 70px; display: block; }
.diff-curve.top { top: 0; }
.diff-curve.bot { bottom: 0; }
.diff-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.diff-title { display: flex; flex-direction: column; line-height: .96; }
.diff-title .t1, .diff-title .t3 {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 3.1rem); color: #fff; letter-spacing: .3em;
}
.diff-title .t2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.6rem, 7vw, 6rem); color: #fff; letter-spacing: .12em;
  margin: 6px 0;
}
.diff-title .t3 { align-self: flex-end; }
.diff-copy p { color: #AEB7C1; font-size: 1.04rem; line-height: 1.85; }
.diff-copy strong { color: #fff; }
/* glyph bases tuck slightly under the white curve, but the E's lowest
   arm stays mostly visible so the letter still reads */
.diff-word { margin-top: 56px; margin-bottom: 0; }
/* bottom edge cuts through the L's lower bar — the word reads as running
   on under the banner (height tracks width so the cut stays on the bar) */
.diff-word svg { display: block; width: 100%; height: 17.1vw; }
/* squat extended letterforms (Owens look): smaller cap height, glyphs
   stretched wide by textLength=spacingAndGlyphs; 600 keeps stems in check */
.dw-base, .dw-trace {
  font-family: var(--font-display); font-weight: 600; font-size: 290px;
  fill: none;
}
.dw-base { stroke: rgba(255,255,255,.15); stroke-width: 1.5; }
/* Owens-style: short dashes, several per letter (period 350 vs letter
   perimeter ~1300 -> ~4 each), creeping slowly (~12 u/s); offset travels
   exactly one dash period per cycle so the loop is seamless */
.dw-trace {
  stroke: #fff; stroke-width: 1.6;
  stroke-dasharray: 70 130;
  animation: diff-trace 17s linear infinite;
}
@keyframes diff-trace { to { stroke-dashoffset: -200; } }
@media (prefers-reduced-motion: reduce) { .dw-trace { display: none; } }
@media (max-width: 860px) {
  .difference { padding-top: 64px; }
  .diff-grid { grid-template-columns: 1fr; gap: 36px; }
  .diff-word { margin-top: 52px; }
}

/* ── certificate lightbox — full-screen, full-quality document view ── */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10, 13, 17, .92);
  padding: 56px 24px 24px;
}
.lightbox.open { display: flex; align-items: center; justify-content: center; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: #fff; border-radius: 6px; box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.lb-close {
  position: absolute; top: 14px; left: 18px;
  font: 600 .95rem var(--font-body); color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 9px 20px; cursor: pointer;
  transition: background .15s;
}
.lb-close:hover { background: rgba(255,255,255,.24); }

/* film grain — zero-WebGL-cost analog texture over the whole frame */
.film-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 6;
  opacity: .033; /* no blend mode — multiply over a WebGL canvas costs frames */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

.film-dots {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 30;
}
.film-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: none; cursor: default;
  background: var(--line); transition: all .3s;
}
.film-dots button.on { background: var(--blue); height: 20px; border-radius: 4px; }

.film-landing { position: relative; z-index: 20; background: var(--canvas); margin-top: -100vh; border-top: 1px solid var(--line-soft); }
.film-body .site-footer { position: relative; z-index: 20; border-top: none; }

/* fallback essay */
.film-fallback { display: none; position: relative; z-index: 20; background: var(--canvas); }
.no-film .film-fallback { display: block; }
.no-film #film-stage, .no-film #film-scroll { display: none; }
.no-film .film-header { position: sticky; background: rgba(244,246,248,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); }
.essay { max-width: 780px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.essay img { border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 26px; aspect-ratio: 16/10; object-fit: cover; }
.essay .cap-label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; }
.essay p { color: var(--steel); margin-top: 10px; }


/* phones: AI-imagery clauses stay one quiet line, not a block of tracked caps */
@media (max-width: 640px) {
  .hero-visual-wrap .visual-note, .market-hero--full .hero-note, .market-hero .hero-note-dark,
  .bleed-note, .about-hero-note, .th-note {
    font-size: .46rem; letter-spacing: .09em; line-height: 1.6;
  }
  .footer-doc .ai-note { font-size: .6rem; letter-spacing: .06em; }
  .vchap .vcap .cap-sub em { font-size: .72rem; }
}

/* phones: the Difference title scales down (desktop untouched) */
@media (max-width: 640px) {
  .diff-title .t1, .diff-title .t3 { font-size: 1.15rem; letter-spacing: .22em; }
  .diff-title .t3 { align-self: flex-start; }   /* no staggered offset on phones */
  .diff-title .t2 { font-size: 2.4rem; letter-spacing: .1em; margin: 4px 0; }
  .diff-copy p { font-size: .94rem; line-height: 1.75; }
}

/* "+ more" closer card on the machine wall */
.equip-more { display: flex; align-items: center; justify-content: center; background: var(--card-2); min-height: 280px; }
.equip-more-inner { text-align: center; padding: 30px; }
.equip-more-plus {
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--blue-deep);
}
.equip-more-sub { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-top: 10px; }

/* ── BG-HERO: the film as full-viewport background, brand lockup over it ── */
.bg-hero { position: relative; height: 100svh; min-height: 560px; overflow: clip; background: #0B0E12; }
.bg-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 47%, rgba(11,14,18,.52) 0%, rgba(11,14,18,.28) 55%, rgba(11,14,18,0) 100%),
    radial-gradient(ellipse 120% 100% at 50% 45%, rgba(0,0,0,0) 58%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(11,14,18,.42) 0%, rgba(11,14,18,.12) 30%, rgba(11,14,18,.14) 58%, rgba(11,14,18,.68) 100%);
}
.bg-hero-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.bg-hero-logo {
  width: min(640px, 84vw); height: auto;
  position: relative; left: max(-28px, -3.7vw);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 12px 44px rgba(0,0,0,.65));
}
.bg-hero-content h1 {
  margin-top: 12px; color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem); letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 4px 22px rgba(0,0,0,.6);
}
.bg-hero-content p {
  margin-top: 10px; max-width: 90ch; color: rgba(255,255,255,.82);
  font-size: clamp(.88rem, 1vw, 1rem); line-height: 1.55;
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 3px 16px rgba(0,0,0,.55);
}
@media (min-width: 861px) {
  .bg-hero-certs { margin-top: 26px; }
  .bg-hero-content h1 { margin-top: 30px; }
  .bg-hero-content p { margin-top: 13px; }
  .bg-hero-btn { margin-top: 32px; }
}
@media (max-width: 860px) {
  .bg-hero { min-height: 480px; }
  .bg-hero-content h1 { font-size: 1.35rem; }
  .bg-hero-logo { width: min(640px, 92vw); left: max(-16px, -3vw); }
  .bg-hero-btn { margin-top: 22px; padding: 8px 20px 8px 16px; font-size: .8rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
}
.bg-hero-btn {
  margin-top: 28px; position: relative; border: none; border-radius: 0;
  padding: 10px 26px 10px 22px; font-size: .86rem; color: #fff; font-weight: 600; letter-spacing: .06em;
  text-shadow: none;
  background: linear-gradient(#fff, #fff) no-repeat left center / 0% 100%, rgba(11, 14, 18, .32);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
  transition: color .28s ease, background-size .28s ease, box-shadow .28s ease;
}
.bg-hero-btn .bh-arr {
  display: inline-block; margin-left: 10px; font-family: Arial, sans-serif;
  transition: transform .28s ease;
}
.bg-hero-btn:hover {
  color: var(--ink);
  background-size: 100% 100%, auto;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.bg-hero-btn:hover .bh-arr { transform: translateX(5px); }
/* big soft fade into the cut — the video darkens gradually toward the white
   plate instead of meeting it at a hard line (3D depth) */
.bg-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 320px; z-index: 2;
  background: linear-gradient(180deg, rgba(11, 14, 18, 0) 0%, rgba(11, 14, 18, .16) 46%, rgba(11, 14, 18, .6) 100%);
  pointer-events: none;
}
/* Owens-style angled cut: the white page shears up into the hero's bottom edge */
.bg-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 120px; z-index: 3;
  background: var(--canvas);
  clip-path: polygon(0 62%, 74% 62%, 81.5% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .bg-hero::after { height: 64px; clip-path: polygon(0 58%, 66% 58%, 78% 0, 100% 0, 100% 100%, 0 100%); }
  .bg-hero::before { height: 180px; bottom: 0; background: linear-gradient(180deg, rgba(11,14,18,0) 0%, rgba(11,14,18,.16) 46%, rgba(11,14,18,.58) 100%); }
}
/* white shelf under the hero: stats + approved-supplier line */
.hero-shelf { background: var(--canvas); padding: 30px 0 6px; }
.asl-line {
  display: block; text-align: center; margin: 26px 0 10px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .24em;
  color: var(--steel); text-decoration: none; transition: color .2s;
}
.asl-line:hover { color: var(--blue-deep); }
@media (max-width: 860px) { .asl-line { font-size: .6rem; letter-spacing: .16em; } .difference { clip-path: polygon(0 26px, 62% 26px, 74% 0, 100% 0, 100% 100%, 0 100%); padding-top: 96px; } }

/* hero entrance: one-time rise, logo → line → sub → button */
@media (prefers-reduced-motion: no-preference) {
  .bg-hero-logo, .bg-hero-content h1, .bg-hero-content p, .bg-hero-btn {
    opacity: 0; transform: translateY(16px);
    animation: bh-in 1.1s cubic-bezier(.2, .6, .2, 1) forwards;
  }
  .bg-hero-logo { animation-delay: .9s; }
  .bg-hero-content h1 { animation-delay: 1.55s; }
  .bg-hero-content p { animation-delay: 1.75s; }
  .bg-hero-btn { animation-delay: 2.05s; }
  @keyframes bh-in { to { opacity: 1; transform: translateY(0); } }
}

/* ═══ NAV GLASS — Apple liquid-glass rail (owner, 2026-07-17) ═══
   Scrolled/base: bright frost, ink type. At top over film or photo heroes:
   one consistent light glass on every page and scroll position (owner: white only). */
.site-header { background: transparent; border-bottom: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the glass lives on a taller masked layer so it FADES into the page —
   no hairline between the bar and the section below */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150%;
  z-index: -1; pointer-events: none;
  background: rgba(250, 252, 254, .6);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 56%, transparent 100%);
  transition: background .35s ease;
}
.site-header.at-top::before { background: rgba(250, 252, 254, .6); }
.nav a {
  color: var(--ink);
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
}
.nav a:hover { color: var(--blue-deep); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 861px) {
.nav-drop {
  background: rgba(252, 253, 255, .82);
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border-color: rgba(11, 14, 18, .08);
  box-shadow: 0 18px 44px rgba(11, 14, 18, .16);
}
.nav-drop a { color: var(--steel); letter-spacing: .08em; font-size: .74rem; }
.nav-drop a:hover { background: rgba(11, 14, 18, .06); color: var(--ink); }
.nav-drop a[aria-current="page"] { color: var(--ink); background: rgba(11, 14, 18, .05); }
}
/* dark-over-media dropdown retired 2026-07-17 — dropdowns are always light frost (owner: white mode only) */
.nav a.btn-primary {
  color: var(--ink); letter-spacing: .1em; font-size: .78rem;
  padding: 10px 18px; margin-left: 8px;
  box-shadow: inset 0 0 0 1.5px rgba(11, 14, 18, .75);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat left center / 0% 100%;
  transition: color .25s ease, background-size .25s ease;
}
.nav a.btn-primary:hover { color: #fff; background-size: 100% 100%; transform: none; }

/* nav dark-over-media variant retired 2026-07-17 — one consistent light glass bar everywhere (owner) */

@media (max-width: 860px) {
  .nav-toggle { color: var(--ink); }
  .nav {
    background: #fbfcfe;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-left: 1px solid rgba(11, 14, 18, .1);
  }
  .nav a { border-bottom-color: rgba(11, 14, 18, .1); color: var(--ink); }
  .nav a[aria-current="page"] { color: var(--blue-deep); border-bottom-color: var(--blue); }
  .nav-group { border-bottom-color: rgba(11, 14, 18, .1); }
  .nav-group > .nav-parent { color: var(--ink); }
  .nav-drop a { color: #3a444f; letter-spacing: .06em; }
  .nav-drop a[aria-current="page"] { color: var(--blue-deep); background: none; }
  .nav a.btn-primary { margin: 20px 0 0; justify-content: center; box-shadow: inset 0 0 0 1.5px rgba(11,14,18,.75); }
}

/* hero certification marks — small, white knockout, glass-quiet under the caption */
.bg-hero-certs {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(24px, 2.8vw, 44px); margin-top: 22px;
  opacity: 0; transform: translateY(16px);
}
.bg-hero-certs img {
  height: clamp(44px, 4.4vw, 60px); width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5));
  opacity: .78; transition: opacity .25s ease;
}
.bg-hero-certs img:hover { opacity: 1; }
.bg-hero-certs img.cert-wide { height: clamp(32px, 3.2vw, 44px); }
@media (prefers-reduced-motion: no-preference) {
  .bg-hero-certs { animation: bh-in .9s cubic-bezier(.2,.6,.2,1) 1.15s forwards; }
}
@media (prefers-reduced-motion: reduce) { .bg-hero-certs { opacity: 1; transform: none; } }
@media (max-width: 860px) { .bg-hero-certs { gap: 20px; margin-top: 18px; } .bg-hero-certs img { height: 38px; } .bg-hero-certs img.cert-wide { height: 28px; } }
/* footer social — LinkedIn button */
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-top: 10px; border-radius: 8px;
  color: var(--steel); border: 1px solid var(--line);
  transition: color .2s, border-color .2s, background .2s;
}
.footer-social:hover { color: #fff; background: #0A66C2; border-color: #0A66C2; }

/* ── hero vertical spacing — final overrides (win by source order over base .bg-hero-btn) ── */
@media (min-width: 861px) {
  .bg-hero-certs { margin-top: 26px; }
  .bg-hero-content h1 { margin-top: 32px; }
  .bg-hero-content p { margin-top: 13px; }
  .bg-hero-btn { margin-top: 32px; }
}
@media (max-width: 860px) {
  .bg-hero-certs { margin-top: 20px; }
  .bg-hero-content h1 { margin-top: 22px; }
  .bg-hero-content p { margin-top: 11px; }
  .bg-hero-btn { margin-top: 24px; }
}