/* QAM — flagship design system v2
   Graphite + brand teal, editorial grotesk/serif typography, engineered motion */

:root {
  --bg-deep: #0a1211;
  --bg-dark: #0e1917;
  --bg-panel: #13211f;
  --teal-900: #10201e;
  --teal-700: #234742;
  --teal-600: #2f5f59;
  --teal-500: #3f7d75;
  --teal-400: #5c9a92;
  --teal-300: #80a6a3;   /* brand */
  --teal-200: #aec7c4;
  --teal-100: #dbe7e5;
  --teal-050: #f2f6f5;
  --mint: #8fe6cf;
  --amber: #d9973f;
  --ink: #101c1a;
  --body: #3d4f4c;
  --line: #dbe4e2;
  --line-dark: rgba(128, 166, 163, 0.16);
  --white: #ffffff;
  --radius: 16px;
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --shell: 1240px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Declare the page dark-capable: Safari renders its bar scrims/gradients in
   the dark variant (matching our dark heroes and footer) instead of fading
   to white. Form controls sit on white panels, so they stay light below. */
:root { color-scheme: dark; }
input, select, textarea { color-scheme: light; }
/* NO overflow rule on html OR body — body overflow propagates to the
   viewport when html's is visible (CSS spec), and any viewport overflow
   setting stops iOS Safari extending the page under its glass bars.
   Sideways scroll is instead prevented at the SOURCE: every decorative
   layer that could poke past the viewport (svc-bg zoom, ghost numerals)
   is clipped by its own container. Keep it that way. */
/* Dark document canvas: without this, body's white propagates to the canvas
   and shows as a white band past the page's ends (overscroll, behind the
   bottom bar). Every page opens and closes dark, so the canvas matches.
   (Once wrongly suspected of breaking Safari's bar glass — the real culprit
   was the edge-pinned header, since replaced by the floating pill.) */
html { background-color: #0a1211; }
/* the white ground the light sections sit on — scoped to the content column
   so body/html can stay dark for Safari's edge treatments */
main { background: var(--white); }
.section[id] { scroll-margin-top: 84px; }  /* anchor targets clear the fixed header */
body {
  font-family: var(--font-body);
  color: var(--body);
  /* dark, matching the canvas: Safari's bar-extension fallback reads html
     AND body backgrounds — a white body paints the status area white on
     load and below the footer. The light content surface lives on <main>. */
  background: #0a1211;
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); }

h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; }
h3 { font-size: 1.14rem; font-weight: 600; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-500); }
/* oblique accent — echoes the forward lean of the QAM wordmark */
em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--teal-400);
  padding-right: 0.06em; /* italic overhang clearance */
}
.mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; }
/* brand typesetting: PreVal is set with only its "e" italic.
   .preval is a single inline unit so flex containers (buttons, kicker)
   treat the whole word as one item — no fragmenting, no flex gaps inside it. */
.preval { white-space: nowrap; }
.pe {
  font-style: italic;
  /* optical kerning, split by typeface: Inter's italic e (body text) leans
     hard and needs a deep tuck; Archivo's (display/buttons) leans gently and
     needs only a nudge; mono contexts render the e upright — no kerning */
  margin-left: -0.085em; margin-right: 0.022em;
}
h1 .pe, h2 .pe, h3 .pe, .btn .pe, .hero-title .pe, .cta-title .pe, .value-word .pe {
  margin-left: -0.022em; margin-right: 0.012em;
}
.kicker .pe, .mono .pe, .chk .pe { margin: 0; }
/* tracked-uppercase contexts: an italic capital E in letterspaced caps reads
   as a typo — keep the brand e upright in kickers, mono labels, and chk chips */
.kicker .pe, .mono .pe, .chk .pe { font-style: normal; }
/* teal accent for headings, without full italics (pairs with .pe inside) */
.h-accent { color: var(--teal-400); }
.arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
a:hover .arrow { transform: translateX(5px); }

/* ---------- kicker ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--teal-600);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: 0.7; }
.kicker.light { color: var(--teal-300); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--teal-500); color: #fff; box-shadow: 0 10px 30px rgba(63, 125, 117, 0.35); }
.btn-solid:hover { background: var(--teal-400); color: #fff; box-shadow: 0 14px 36px rgba(63, 125, 117, 0.45); }
.btn-light { background: #fff; color: var(--teal-900); }
.btn-light:hover { color: var(--teal-600); }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.btn-ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  padding-top: env(safe-area-inset-top, 0px);
  /* TRANSPARENT ON PURPOSE: Safari 26 samples fixed elements at the viewport
     edge for its bar tint, and a translucent background makes it guess wrong.
     The glass lives on the ::before child below — absolute children are
     ignored by the sampler, so .ios-tint is the only voice Safari hears. */
  background: transparent;
  border-bottom: 1px solid var(--line-dark);
  transition: transform 0.35s var(--ease-out);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 18, 17, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
/* NOTE (Safari 26): a fixed element pinned to the top edge forces the
   status area into OPAQUE tinted-bar mode. The mobile header is a floating
   pill (see the 1024px block) precisely so no fixed element touches the
   edge — that's what makes Safari extend the page behind the clock. Never
   add a full-width fixed bar at top:0 on mobile. */
.site-header.hidden { transform: translateY(-100%); }
/* independent of the header so it stays visible when the header hides on scroll */
.progress-bar {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 2px;
  width: calc(var(--p, 0) * 100%);
  pointer-events: none;
  background: linear-gradient(90deg, var(--teal-400), var(--mint));
  z-index: 120;
  transition: background 0.25s ease;
}
/* darker tone while running over light sections (toggled from main.js) */
.progress-bar.on-light {
  background: linear-gradient(90deg, var(--teal-700), var(--teal-500));
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; height: 76px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-text {
  /* Futura — the family the QAM wordmark is built from; Jost is its webfont stand-in */
  font-family: "Futura", "Jost", "Century Gothic", var(--font-display), sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--teal-300);
  border-left: 1px solid var(--line-dark);
  padding-left: 14px;
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a { font-size: 0.84rem; font-weight: 500; color: rgba(255, 255, 255, 0.68); position: relative; white-space: nowrap; }
.site-nav a:hover { color: #fff; }
.site-nav a.active { color: #fff; }
.site-nav a.active:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px;
  background: var(--teal-300); border-radius: 2px;
}
.nav-cta { padding: 10px 18px; font-size: 0.82rem; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px auto; border-radius: 2px; transition: 0.22s; }

/* ---------- grid backdrop ---------- */
.grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(128, 166, 163, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 166, 163, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  /* fill the viewport up to a ceiling: content scales with height (svh clamps
     below), but on very tall / portrait windows an uncapped 100svh leaves
     cavernous voids above and below the block — cap and let the next section
     peek instead */
  min-height: min(100svh, 1180px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    /* top-edge glow: iOS mirrors the hero's topmost rows into the status
       strip — give the mirror a tint to carry so the strip reads as a
       continuation of the field instead of a flat band */
    radial-gradient(ellipse 130% 36% at 50% -6%, rgba(47, 95, 89, 0.30), transparent 60%),
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(47, 95, 89, 0.5), transparent 60%),
    linear-gradient(178deg, var(--bg-deep) 0%, var(--bg-dark) 70%, var(--teal-900) 100%);
  color: var(--teal-100);
  overflow: hidden;
  /* top padding = bottom padding + 76px fixed header, so with centered content
     the visible gap above the block matches the gap below it at any height */
  padding: 166px 0 90px;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 18, 17, 0.5) 0%, transparent 30%, transparent 60%, rgba(10, 18, 17, 0.6) 100%);
}
.hero-inner { position: relative; width: 100%; }
/* vertical rhythm grows gently with window height (floors = current laptop values) */
.hero .kicker { margin-bottom: clamp(22px, 2.6svh, 36px); }
.hero .lead { font-size: clamp(1.12rem, 0.55rem + 1.35svh, 1.3rem); max-width: 52ch; }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 72px; align-items: start; }
/* NOTE (wide screens): the hero deliberately shares the 1240px shell grid with
   the sections below — the headline's left edge aligns with "QAM is changing…"
   and every section head after it. Window-centering the hero copy was tried
   and reverted: a hero on its own centered axis above left-anchored content
   reads as two disconnected column systems. */

/* TI Supplier Excellence Award — badge displayed unmodified on the white ground
   it was designed for; card chrome is ours, the graphic is untouched */
.award-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px 30px 26px;
  width: clamp(264px, 24svh, 320px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(128, 166, 163, 0.25);
  /* aligns card top with the H1 cap line; tracks the kicker's scaled margin */
  margin-top: calc(clamp(22px, 2.6svh, 36px) + 38px);
}
.award-card img { width: 100%; height: auto; display: block; margin-bottom: 18px; }
.award-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--ink); }
.award-sub { color: #c00000; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.64rem; margin-top: 6px; }
.award-cite { font-size: 0.78rem; color: var(--body); margin-top: 10px; line-height: 1.5; }
.hero-title {
  /* width-driven as before, but the cap rises with viewport height:
     laptops (<=900px tall) render exactly as the old clamp(2.8rem, 7.2vw, 6.6rem) */
  font-size: clamp(2.8rem, min(7.2vw, max(6.6rem, 9svh)), 8.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: #fff;
  margin: 10px 0 clamp(42px, 5svh, 72px);
}
.hero-title .line { display: block; }
.hero-title em { color: transparent; background: linear-gradient(100deg, var(--teal-300), var(--mint)); -webkit-background-clip: text; background-clip: text; }
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; }
.lead { font-size: 1.12rem; line-height: 1.7; max-width: 54ch; }
.hero .lead { color: var(--teal-200); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; flex: none; }
.scroll-cue {
  position: absolute; right: 40px; bottom: 36px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--teal-300); font-size: 0.62rem; letter-spacing: 0.3em;
}
.scroll-cue i { width: 1px; height: 44px; background: linear-gradient(180deg, var(--teal-300), transparent); animation: cueDrop 2s ease-in-out infinite; }
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* entrance stagger */
.stagger-1, .stagger-2, .stagger-3, .stagger-4 { animation: riseIn 0.9s var(--ease-out) backwards; }
.stagger-2 { animation-delay: 0.12s; }
.stagger-3 { animation-delay: 0.24s; }
.stagger-4 { animation-delay: 0.4s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(34px); } }

/* ---------- marquee ---------- */
.marquee {
  background: var(--teal-900);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  overflow: hidden;
  padding: 16px 0;
}
.marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 36s linear infinite;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-300);
  white-space: nowrap;
}
.marquee-track i { color: var(--teal-600); font-style: normal; }
/* each copy carries its own spacing so the -50% shift lands pixel-perfect */
.mq-copy { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
/* unit symbols stay lowercase inside uppercased text (μ uppercases to Μ = "M") */
.marquee-track .unit, .sb-label .unit { text-transform: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { position: relative; padding: 110px 0; }
.section.tone-tint { background: var(--teal-050); }
.section.tone-dark { background: linear-gradient(172deg, var(--bg-dark), var(--teal-900)); overflow: hidden; }
.section.tone-dark h2, .section.tone-dark h3 { color: #fff; }
.section.tone-dark .section-lead, .section.tone-dark p { color: var(--teal-200); }
.section.tone-dark .shell { position: relative; }

.section-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 24px; }
/* leading rule before each section heading — the kicker's dash grown up.
   The ghost numeral top-right carries the section number; a chip repeating it
   next to the heading read as redundant. */
.section-line { width: 76px; height: 1px; background: var(--teal-500); opacity: 0.55; flex: none; align-self: center; }
.tone-dark .section-line { background: var(--teal-300); }
.section-lead { max-width: 70ch; font-size: 1.08rem; margin-bottom: 48px; }
.section-head + .card-grid { margin-top: 48px; }

/* editorial statement */
.editorial { padding-bottom: 90px; }
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 500;
  max-width: 30ch;
  margin-bottom: 72px;
}

/* stats */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid var(--line); padding-top: 44px;
}
.stat p { font-size: 0.86rem; margin-top: 6px; max-width: 22ch; }
.stat-num, .stat-plus { font-family: var(--font-display); font-size: 3.4rem; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
.stat-plus { color: var(--teal-400); font-size: 2rem; }

/* ---------- service index rows ---------- */
.svc-index { padding-bottom: 0; }
.svc-rows { margin-top: 28px; border-top: 1px solid var(--line); }
.svc-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.3fr 60px;
  align-items: center;
  gap: 28px;
  padding: 34px 32px;
  max-width: var(--shell);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: inherit;
  transition: padding 0.3s var(--ease-out);
  /* contain the svc-bg zoom overhang — nothing may widen the page */
  overflow: clip;
}
.svc-row::before {
  content: ""; position: absolute; inset: 0;
  background: var(--teal-900);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s var(--ease-out);
  z-index: 0;
}
.svc-row > * { position: relative; z-index: 1; }
.svc-row:hover { border-bottom-color: transparent; }
.svc-row:hover::before { transform: scaleY(1); transform-origin: top; }
/* hover photo: fades in over the teal panel, under the text; carries the site
   grade + heavy darkening so row text stays readable */
.svc-row .svc-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 35%;
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.45s var(--ease-out), transform 1.2s var(--ease-out);
  filter: grayscale(1) sepia(0.55) hue-rotate(125deg) saturate(0.6) brightness(0.4) contrast(1.05);
}
/* 0.6 blends the photo into the teal panel beneath — full opacity lets bright
   image areas fight the row text */
.svc-row:hover .svc-bg { opacity: 0.6; transform: scale(1); }
.svc-no { color: var(--teal-500); transition: color 0.25s; }
.svc-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -0.015em; color: var(--ink); transition: color 0.25s; }
.svc-desc { font-size: 0.88rem; color: var(--body); transition: color 0.25s; }
.svc-arrow { font-size: 1.5rem; color: var(--teal-500); justify-self: end; transition: transform 0.3s var(--ease-out), color 0.25s; }
.svc-row:hover .svc-no { color: var(--mint); }
.svc-row:hover .svc-name { color: #fff; }
.svc-row:hover .svc-desc { color: var(--teal-200); }
.svc-row:hover .svc-arrow { color: var(--mint); transform: translateX(8px); }
/* touch devices can't hover: main.js flags the row crossing mid-viewport
   with .svc-active while scrolling — same reveal, scroll-driven */
.svc-row.svc-active { border-bottom-color: transparent; }
.svc-row.svc-active::before { transform: scaleY(1); transform-origin: top; }
.svc-row.svc-active .svc-bg { opacity: 0.6; transform: scale(1); }
.svc-row.svc-active .svc-no { color: var(--mint); }
.svc-row.svc-active .svc-name { color: #fff; }
.svc-row.svc-active .svc-desc { color: var(--teal-200); }
.svc-row.svc-active .svc-arrow { color: var(--mint); transform: translateX(8px); }

/* ---------- cards (interior pages) ---------- */
.card-grid { display: grid; gap: 24px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-500), var(--mint));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(16, 45, 41, 0.11); border-color: var(--teal-200); }
.card:hover::before { transform: scaleX(1); }
/* resting-state identity: each card carries a ghost numeral (auto-numbered per
   grid) — the section-background motif miniaturized. Meaningful, bespoke, and
   immune to the clip-art problem literal icons bring. */
.card-grid, .contact-cards { counter-reset: card; }  /* any card column needs a shared counter scope */
.card::after {
  counter-increment: card;
  content: counter(card);  /* single digit: monument voice; chips keep 01 */
  position: absolute; top: 10px; right: 16px;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(52px, 3.4vw, 72px); letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(31, 58, 54, 0.12);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.3s;
}
.card:hover::after { -webkit-text-stroke-color: rgba(63, 125, 117, 0.34); }
.tone-dark .card::after {
  color: transparent;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.10);
}
.tone-dark .card:hover::after { -webkit-text-stroke-color: rgba(143, 230, 207, 0.32); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.94rem; }
.tone-dark .card { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); }

/* ---------- PreVal feature ---------- */
.feature-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: start; margin-top: 52px; }
.feature { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line-dark); }
.feature:first-child { padding-top: 0; }
.feature-list .btn { margin-top: 30px; }
.f-num { color: var(--teal-400); padding-top: 5px; flex: none; }
.feature h3 { margin-bottom: 6px; }
.feature p { font-size: 0.95rem; }
.tone-dark .feature h3 { color: #fff; }
.demo-copy .feature { border-color: var(--line); }
.demo-copy h2 { margin-bottom: 18px; }

/* PreVal mock panel */
.hero-panel {
  background: rgba(10, 18, 17, 0.8);
  border: 1px solid rgba(128, 166, 163, 0.24);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  position: sticky; top: 108px;
}
.panel-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); margin-bottom: 6px; color: var(--teal-200); }
/* PreVal product lockup: the official logo asset (dark variant on our dark
   surfaces), displayed unmodified and scaled proportionally */
/* sized from the WORDMARK's cap height (171/252 of the image), not the image
   box — the check is taller than the letters, so naive em-sizing shrinks the
   wordmark below the surrounding text. 1.06em puts P/V/l on the cap line of
   the headline; -0.09em drops the check's below-baseline tail correctly. */
.pv-logo { height: 1.06em; width: auto; display: inline-block; vertical-align: -0.09em; }
.panel-head .pv-logo { height: 26px; flex: none; }
.panel-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: pulse 2.4s ease-in-out infinite; }
.panel-live {
  margin-left: auto; font-size: 0.6rem; letter-spacing: 0.24em;
  /* PreVal signal green — bookends the header bar with the lockup's check */
  color: #0BE00B;
  text-shadow: 0 0 10px rgba(11, 224, 11, 0.45);
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.panel-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px dashed rgba(128, 166, 163, 0.14); color: var(--teal-100); }
.chip { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; padding: 4px 11px; border-radius: 999px; }
.chip.ok { background: rgba(143, 230, 207, 0.1); color: var(--mint); border: 1px solid rgba(143, 230, 207, 0.35); }
/* the all-clear outcome gets PreVal signal green — amber read as caution
   wrapped around the panel's proudest number */
.chip.zero { background: rgba(11, 224, 11, 0.1); color: #3fee3f; border: 1px solid rgba(11, 224, 11, 0.4); }
.panel-bars { display: flex; align-items: flex-end; gap: 8px; height: 68px; margin: 22px 2px 8px; }
.panel-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--teal-400), var(--teal-600)); border-radius: 4px 4px 0 0; opacity: 0.9; }
.panel-caption { color: var(--teal-300); opacity: 0.8; }

/* ---------- industry duo ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 48px; }
.duo-card {
  position: relative;
  border-radius: 22px;
  padding: 52px 46px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--teal-100);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.duo-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(16, 45, 41, 0.3); color: var(--teal-100); }
.duo-pharma { background: radial-gradient(ellipse 120% 90% at 20% 0%, #2f5f59, #10201e 70%); }
.duo-semi { background: radial-gradient(ellipse 120% 90% at 80% 0%, #23474b, #0a1211 70%); }
.duo-card::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(128, 166, 163, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 166, 163, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000, transparent);
  pointer-events: none;
}
.duo-card h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 16px; letter-spacing: -0.02em; }
.duo-body { font-size: 0.98rem; color: var(--teal-200); max-width: 40ch; }
.duo-link { margin-top: auto; padding-top: 28px; font-family: var(--font-display); font-weight: 600; color: var(--mint); font-size: 0.95rem; }

/* ---------- customer logo strips ---------- */
.logo-section { padding: 84px 0; }
.logo-marquee {
  overflow: hidden;
  margin-top: 40px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 55s linear infinite;
}
.lg-copy { display: flex; align-items: center; gap: 72px; padding-right: 72px; }
/* each logo renders through its alpha mask in one uniform color;
   .has-color logos (official full-color artwork) crossfade to their real
   colorway on hover — grey legacy files just brighten */
.logo-mask {
  position: relative;
  display: inline-block; flex: none;
  /* --h: optically balanced height so no logo dwarfs another */
  height: calc(var(--h, 40) * 1px);
  width: calc(var(--ar) * var(--h, 40) * 1px);
  color: var(--teal-600);
}
.logo-mask::before,
.logo-mask::after {
  content: ""; position: absolute; inset: 0;
  transition: opacity 0.35s ease;
}
.logo-mask::before {          /* uniform teal layer (knockout mask keeps internal detail) */
  background: currentColor;
  -webkit-mask: var(--mask, var(--logo)) center / contain no-repeat;
  mask: var(--mask, var(--logo)) center / contain no-repeat;
  opacity: 0.75;
}
.logo-mask:hover::before { opacity: 1; }
.logo-mask::after {           /* official colorway (has-color only) */
  background: var(--logo) center / contain no-repeat;
  opacity: 0;
}
.logo-mask.has-color:hover::before { opacity: 0; }
.logo-mask.has-color:hover::after { opacity: 1; }
.tone-dark .logo-mask { color: var(--teal-200); }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; } }
@media (max-width: 640px) { .logo-track { gap: 44px; } .logo-mask { height: calc(var(--h, 40) * 0.72px); width: calc(var(--ar) * var(--h, 40) * 0.72px); } }

.logo-note {
  margin-top: 28px;
  font-size: 0.72rem;
  color: var(--body);
  opacity: 0.55;
}

/* split band */
.split-band { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.split-band h2 { max-width: 16ch; }

/* ---------- interior page hero ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse 130% 36% at 50% -6%, rgba(47, 95, 89, 0.26), transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 10%, rgba(47, 95, 89, 0.45), transparent 60%),
    linear-gradient(172deg, var(--bg-deep), var(--bg-dark) 80%, var(--teal-900));
  color: var(--teal-100);
  padding: 190px 0 110px;
  overflow: hidden;
}
.page-hero h1 {
  color: #fff; margin-bottom: 26px; max-width: 22ch;
  text-wrap: balance;            /* even line lengths at any width */
  font-size: clamp(2.6rem, 6vw, 4.9rem); font-weight: 600; letter-spacing: -0.03em;
}
.page-hero .lead { color: var(--teal-200); max-width: 66ch; text-wrap: balance; }
.page-hero .hero-cta { margin-top: 38px; }

/* credential strip: slim bridge between a hero and page content */
.cred-strip { background: var(--teal-900); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.cred-strip .shell {
  display: flex; flex-wrap: wrap; gap: 14px 0;
  padding-top: 20px; padding-bottom: 20px;
}
.cred-strip .mono {
  color: var(--teal-300); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.cred-strip .mono + .mono::before { content: "·"; margin: 0 22px; opacity: 0.5; }
@media (max-width: 720px) {
  .cred-strip .shell { flex-direction: column; gap: 10px; }
  .cred-strip .mono + .mono::before { content: none; }
}

/* numbered card chips (section(numbered=True)) — ties card grids to the
   section-number system */
.card .card-num {
  display: inline-block; margin-bottom: 14px; padding: 3px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--teal-600); font-size: 0.68rem; letter-spacing: 0.12em;
}
.page-hero .shell { position: relative; }
/* interior-hero ghost: the hollow outline mark, upright, bleeding off the right edge —
   same visual language as the footer ghost */
.hero-watermark {
  /* 50% centers within the section box, but the transparent fixed header
     overlays its top ~76px — offset by half so the mark centers in the
     VISIBLE band (equal air above and below) */
  position: absolute; right: -5%; top: calc(50% + 38px); transform: translateY(-50%);
  opacity: 0.4; pointer-events: none;
}
.hero-watermark img { width: clamp(420px, 46vw, 760px); height: auto; display: block; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background:
    radial-gradient(ellipse 60% 100% at 50% 120%, rgba(63, 125, 117, 0.5), transparent 70%),
    linear-gradient(172deg, var(--bg-dark), var(--teal-900));
  padding: 130px 0;
  overflow: hidden;
  text-align: center;
}
.cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta-title { color: #fff; max-width: 22ch; font-size: clamp(2rem, 4.6vw, 3.6rem); margin-bottom: 40px; }
.cta-actions { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--bg-deep); color: var(--teal-200); padding: 84px 0 0; overflow: hidden; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 64px; z-index: 1; }
.footer-grid h5 { color: #fff; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 18px; font-family: var(--font-mono); font-weight: 500; }
.footer-grid p { font-size: 0.9rem; margin-bottom: 10px; }
.footer-grid a { color: var(--teal-200); }
.footer-grid a:hover { color: #fff; }
.footer-logo-img { height: 54px; width: auto; margin-bottom: 18px; }
.wbe-logo { height: 76px; width: auto; margin-top: 16px; }  /* certification seal: full opacity, unaltered (WBENC brand rules set minimums, not maximums) */
.footer-base {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-dark); padding-top: 26px; padding-bottom: 26px;
  z-index: 1;
}
.footer-base p, .footer-base a { font-size: 0.8rem; color: var(--teal-300); }
.footer-base a:hover { color: #fff; }
/* hollow-outline ghost of the official QAM wordmark, top half rising past the page edge */
.footer-giant {
  position: relative; height: 280px; overflow: hidden; pointer-events: none;
}
.footer-giant img {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  width: min(72vw, 880px); height: auto;
  opacity: 0.22;
}

/* ---------- contact / forms ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: start; }
.contact-cards { display: grid; gap: 20px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 68px; align-items: start; }
.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 44px;
  box-shadow: 0 30px 70px rgba(16, 45, 41, 0.09);
}
.contact-form h2 { margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 18px; font-family: var(--font-display); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; margin-top: 7px;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
  padding: 13px 15px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--teal-050);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--teal-400); background: #fff; box-shadow: 0 0 0 4px rgba(92, 154, 146, 0.14);
}
.contact-form textarea { resize: vertical; }
/* full-width submit: completes the form's full-width row rhythm and gives the
   commitment action the card's whole footprint */
.contact-form .btn { margin-top: 6px; width: 100%; justify-content: center; }
.form-note { font-size: 0.78rem; margin-top: 16px; opacity: 0.75; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.card-grid .card { transition-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger-1, .stagger-2, .stagger-3, .stagger-4 { opacity: 1; transform: none; transition: none; animation: none; }
  .marquee-track, .scroll-cue i, .panel-head .dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1340px) {
  .brand-text { display: none; }
}
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* stacked layout centers as a poster: with no second column, a left-anchored
     block strands the right half of the frame */
  .hero-copy { text-align: center; }
  .hero-foot { align-items: center; }
  .hero-actions { justify-content: center; }
  .hero .lead { margin-inline: auto; }
  /* the award reshapes into a horizontal banner (badge left, citation right) —
     a portrait slab parked under the buttons reads as an afterthought */
  .award-card {
    margin-top: 0; justify-self: center;
    width: 100%; max-width: 560px;
    display: grid; grid-template-columns: 124px 1fr;
    column-gap: 26px; row-gap: 3px; align-items: center;
    text-align: left; padding: 22px 28px;
  }
  .award-card img { grid-column: 1; grid-row: 1 / 4; margin-bottom: 0; }
  .award-card .award-title, .award-card .award-sub, .award-card .award-cite { grid-column: 2; }
  .award-card .award-cite { margin-top: 4px; }
}
@media (max-width: 560px) {
  /* narrow phones: the banner's two columns would cram — back to the compact
     portrait card, centered like the rest of the stacked hero */
  .award-card { display: block; max-width: 300px; text-align: center; padding: 26px 24px 22px; }
  .award-card img { margin-bottom: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feature-split, .contact-grid, .demo-grid, .split-band { grid-template-columns: 1fr; }
  .hero-panel { position: static; max-width: 560px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 60px 1fr 60px; }
  .svc-desc { display: none; }
  .footer-giant { height: 180px; }
}
@media (max-width: 1024px) {
  /* floating pill header: inset from every edge so Safari 26 finds no fixed
     element pinned at the top and extends the page behind the status bar
     (transparent glass) instead of painting an opaque tinted bar */
  .site-header {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px; right: 12px;
    padding-top: 0;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .site-header::before { border-radius: inherit; }
  /* hide by fading IN PLACE: a slide-away would travel through Safari's
     top-edge sampling band (within ~4px of the edge) and flip the status
     area to opaque mid-animation. The pill's resting spot is safely below
     the band, so it must never move up from it. */
  .site-header { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
  .site-header.hidden { transform: scale(0.97); opacity: 0; }
  .site-header .shell { padding: 0 14px 0 24px; }
  .header-inner { height: 62px; }
  /* progress lives in the pill: a slim indicator along its bottom edge,
     fading and hiding with it instead of floating loose at the screen top */
  .progress-bar {
    position: absolute; top: auto; bottom: 5px; left: 26px;
    height: 2px; border-radius: 2px;
    width: calc(var(--p, 0) * (100% - 52px));
  }
  .progress-bar, .progress-bar.on-light {
    background: linear-gradient(90deg, var(--teal-400), var(--mint));
  }
  /* full-screen takeover menu: display-scale numbered links, staggered
     entrance, hero-family gradient — a brand moment, not a dropdown */
  .site-header .brand, .nav-toggle { position: relative; z-index: 2; }
  /* floating glass CARD extending from the pill: same 12px insets, top
     corner radius matched to the pill's end caps, glass on ::before. It
     never touches a screen edge, so Safari's bar sampler never sees it. */
  .site-nav {
    position: fixed; z-index: 1;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px; right: 12px;
    height: auto; max-height: calc(100svh - env(safe-area-inset-top, 0px) - 34px);
    border-radius: 31px 31px 30px 30px;
    border: 1px solid var(--line-dark);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    background: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 84px 24px 20px;
    overflow-y: auto; overscroll-behavior: contain;
    counter-reset: navitem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px) scale(0.98); transform-origin: top center;
    transition: transform 0.32s var(--ease-out), opacity 0.28s var(--ease-out),
                visibility 0s linear 0.32s;
  }
  .site-nav::before {
    content: ""; z-index: -1;
    position: absolute; inset: 0; border-radius: inherit;
    background-color: rgba(12, 20, 19, 0.84);
    background-image: radial-gradient(ellipse 90% 55% at 85% 0%, rgba(47, 95, 89, 0.35), transparent 60%);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
  }
  .site-nav.open {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: transform 0.32s var(--ease-out), opacity 0.24s var(--ease-out),
                visibility 0s;
  }
  .site-nav a:not(.btn) {
    /* text centered on the true midline; the counter sits out of flow at
       the left edge so it can't skew the centering */
    display: block; position: relative; text-align: center;
    width: 100%;
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.65rem, 6vw, 2.3rem); letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.85);
    padding: 16px 0;
    border-bottom: 1px solid var(--line-dark);
    counter-increment: navitem;
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.2s;
  }
  .site-nav a:not(.btn)::before {
    content: counter(navitem, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em;
    color: var(--teal-400);
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  }
  .site-nav a.active:not(.btn) { color: var(--mint); }
  .site-nav a.active:not(.btn)::after { display: none; }
  .site-nav.open a { opacity: 1; transform: none; }
  .site-nav.open a:nth-child(1) { transition-delay: 0.06s; }
  .site-nav.open a:nth-child(2) { transition-delay: 0.11s; }
  .site-nav.open a:nth-child(3) { transition-delay: 0.16s; }
  .site-nav.open a:nth-child(4) { transition-delay: 0.21s; }
  .site-nav.open a:nth-child(5) { transition-delay: 0.26s; }
  .site-nav.open a:nth-child(6) { transition-delay: 0.31s; }
  .site-nav.open a:nth-child(7) { transition-delay: 0.38s; }
  .nav-cta {
    margin-top: 18px; justify-content: center; width: 100%;
    padding: 16px; font-size: 0.98rem;
    opacity: 0; transform: translateY(16px);
  }
  .site-nav.open .nav-cta { opacity: 1; transform: none; }
  /* scroll lock WITHOUT overflow: body overflow propagates to the viewport
     and would flip Safari out of the glass bleed while the menu is open.
     main.js pins the scroll offset via body.style.top and restores it. */
  body.nav-open { position: fixed; left: 0; right: 0; }
  /* centered brand moment while the menu is open: logo centered in the
     pill, close button pinned right */
  body.nav-open .header-inner { justify-content: center; }
  body.nav-open .nav-toggle {
    position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  }
  .nav-toggle { display: block; border-radius: 10px; }
  .nav-toggle:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) {
  .section { padding: 70px 0; }
  .hero { padding: calc(146px + env(safe-area-inset-top, 0px)) 0 70px; }
  .page-hero { padding: calc(140px + env(safe-area-inset-top, 0px)) 0 70px; }
  .hero-watermark img { width: 320px; }
  .card-grid.cols-3, .card-grid.cols-2, .form-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .stat-num { font-size: 2.3rem; }
  .contact-form { padding: 30px 24px; }
  .brand-text { display: none; }
  .svc-row { padding: 26px 24px; gap: 16px; }
  .duo-card { padding: 38px 30px; min-height: 300px; }
  /* phones: the sunk-wordmark crop reads as a glitch next to the browser's
     bottom bar — end the page cleanly at the complete outline instead */
  .footer-giant { height: auto; }
  .footer-giant img {
    position: static; transform: none; display: block;
    margin: 4px auto calc(22px + env(safe-area-inset-bottom, 0px)); width: 88vw;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-base { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ---------- background video slots (activate when footage exists) ---------- */
.duo-card { overflow: hidden; }
.duo-card .bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.28; z-index: 0;
}
.duo-card > *:not(.bg-video) { position: relative; z-index: 1; }
.media-band { position: relative; height: min(60vh, 520px); overflow: hidden; background: var(--bg-dark); }
.media-band .bg-video, .media-band .bg-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.media-band .bg-still { opacity: 0.72; }  /* stills read brighter than motion; sink into the dark band.
   object-position is set inline per photo (media_still_band pos=) */
.hero-media img { object-position: 50% 32%; }  /* default: slight top bias; per-photo overrides
   come inline from hero_media(pos=) */
/* hero-flip: text block moves to the quiet right half when the photo's subject
   occupies the left (desktop only — mobile centers the subject behind text).
   The hero's light geometry was authored for left text (radial glow top-right,
   scrim leaning dark left) — mirror it so the glow lifts the subject and the
   dark lean backs the text. */
.page-hero.hero-flip {
  background:
    radial-gradient(ellipse 60% 70% at 15% 10%, rgba(47, 95, 89, 0.45), transparent 60%),
    linear-gradient(188deg, var(--bg-deep), var(--bg-dark) 80%, var(--teal-900));
}
.hero-flip .hero-media img { opacity: 0.28; }
.hero-flip .hero-media::after {
  background:
    linear-gradient(270deg, rgba(10,18,17,0.72), rgba(10,18,17,0.38) 46%, rgba(10,18,17,0) 70%),
    linear-gradient(188deg, rgba(10,18,17,0.65), rgba(14,25,23,0.35) 60%, rgba(16,32,30,0.75));
}
/* the flip follows the PHOTO (subject on the left) and holds at EVERY width —
   the crop keeps the subject left-of-center even on phones, and an alignment
   that jumps between breakpoints reads as a bug, not a design */
.page-hero.hero-flip .shell { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.page-hero.hero-flip .kicker { flex-direction: row-reverse; }  /* dash trails: "CAPABILITIES —" */
.media-band-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,17,0.55), transparent 40%, transparent 65%, rgba(10,18,17,0.65)); }
.media-band-caption { position: absolute; left: 0; right: 0; bottom: 28px; color: var(--teal-200); font-size: 0.7rem; letter-spacing: 0.24em; }

/* ---------- interior hero media (activates when assets/media/hero-*.jpg|mp4 exists) ---------- */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.hero-media::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,18,17,0.72), rgba(10,18,17,0.38) 46%, rgba(10,18,17,0) 70%),
    linear-gradient(172deg, rgba(10,18,17,0.65), rgba(14,25,23,0.35) 60%, rgba(16,32,30,0.75)); }
/* readability over photographs: brighter accent + lead than the flat-panel heroes need */
.page-hero:has(.hero-media) h1 em {
  color: transparent;
  background: linear-gradient(100deg, var(--teal-300), var(--mint));
  -webkit-background-clip: text; background-clip: text;
}
.page-hero:has(.hero-media) .lead { color: var(--teal-100); }
.page-hero .grid-lines, .page-hero .hero-watermark { z-index: 1; }  /* already absolutely positioned */
.page-hero .shell { position: relative; z-index: 1; }
/* the outline watermark and grid fill EMPTY heroes; once real imagery is
   present the photo is the texture — overlapping motifs read as clutter (the
   grid becomes a faint screen-door artifact over photographic detail) */
.page-hero:has(.hero-media) .hero-watermark,
.page-hero:has(.hero-media) .grid-lines { display: none; }

/* ---------- checkpoint figure: photoreal render + verification list ---------- */
.checkpoint-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; margin-top: 40px; }
.checkpoint-render img { width: 100%; height: auto; border-radius: 20px; display: block;
  filter: saturate(0.82) contrast(1.04); }
.checkpoint-list { list-style: none; display: grid; gap: 0; }
.checkpoint-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.checkpoint-list li:first-child { padding-top: 0; }
.checkpoint-list .chk { color: var(--teal-600); font-size: 0.74rem; letter-spacing: 0.1em; display: block; margin-bottom: 4px; }
.checkpoint-list p { font-size: 0.92rem; }
@media (max-width: 1080px) { .checkpoint-grid { grid-template-columns: 1fr; gap: 36px; } }

/* keep multi-word accent phrases on one line — no mid-phrase breaks */
.page-hero h1 em { white-space: nowrap; }

/* once the TI award expires (main.js adds .no-award), the headline scales back up */
.hero.no-award .hero-title { font-size: clamp(3rem, min(8.8vw, max(7.6rem, 10.5svh)), 9rem); }
/* the outline watermark stays hidden while the award card occupies the right
   half (three layered systems = clutter); it fills the vacancy post-award */
.hero .hero-watermark { display: none; }
.hero.no-award .hero-watermark {
  /* bottom-right anchor: diagonal balance against the top-left headline,
     echoing the footer's bottom-anchored giant outline */
  display: block; z-index: 0;
  top: auto; bottom: 13svh; right: -4%; transform: none;  /* clear of the fold + SCROLL indicator */
}
.hero.no-award .hero-watermark img { width: clamp(480px, 52vw, 1280px); }  /* keeps scaling on 4K
   so the mark stays a counterweight to the content column, not a corner ornament */

/* optional hero video (assets/media/hero-home.mp4): replaces the particle field
   when present — main.js skips the canvas so they never run together */
.hero-home-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }

/* ---------- ghost section numerals ----------
   oversized outlined numerals behind each section head — editorial texture
   rhyming with the outline-logo watermark motif */
.section { position: relative; isolation: isolate; }
/* the kerned numeral's trailing letter-spacing can poke a few px past the
   viewport — clip numbered sections so nothing ever widens the page */
.section[data-num] { overflow: clip; }
.section[data-num]::before {
  content: attr(data-num);
  position: absolute; z-index: -1; right: 3vw; top: 12px;
  /* set in the wordmark's voice — Futura-family letterforms, the logo's
     forward lean, interlock-tight tracking — so section numerals read as
     brand marks while card numerals stay upright Archivo */
  font-family: "Futura", "Jost", "Century Gothic", var(--font-display), sans-serif;
  font-weight: 600; line-height: 0.8;
  /* deep interlock: overlapping outlined digits nest the way Q-A-M do in the
     wordmark; "01" gets extra compression because the narrow 1 carries wide
     side bearings that the round digits don't */
  font-size: clamp(150px, 16vw, 260px); letter-spacing: -0.16em;
  /* WebKit applies letter-spacing after the LAST glyph too, painting it past
     the box edge — matching padding-right pins the visible edge back to 3vw */
  padding-right: 0.16em;
  transform: skewX(-8deg);
  color: transparent;  /* pure outline: overlapping fills doubled up and spotlighted the intersections */
  -webkit-text-stroke: 1.5px rgba(31, 58, 54, 0.10);
  pointer-events: none;
}
.section[data-num="01"]::before { letter-spacing: -0.28em; padding-right: 0.28em; }
.section[data-num="02"]::before { letter-spacing: -0.25em; padding-right: 0.25em; }
.section[data-num="03"]::before { letter-spacing: -0.21em; padding-right: 0.21em; }
.section[data-num="04"]::before { letter-spacing: -0.21em; padding-right: 0.21em; }
.section[data-num="05"]::before { letter-spacing: -0.20em; padding-right: 0.20em; }
.section.tone-dark[data-num]::before {
  color: transparent;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) { .section[data-num]::before { font-size: 110px; right: 2vw; } }

/* ---------- stat band: oversized proof-point figures ---------- */
.stat-band { background: linear-gradient(172deg, var(--bg-dark), var(--teal-900)); padding: 58px 0; }
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sb-item { display: flex; flex-direction: column; gap: 12px; }
.sb-num {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1;
  color: transparent; background: linear-gradient(100deg, var(--teal-300), var(--mint));
  -webkit-background-clip: text; background-clip: text;
}
.sb-label { color: var(--teal-300); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 900px) { .sb-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- company core values: poster typography ---------- */
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 48px; }
.value .value-word {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; color: #fff;
  margin-bottom: 18px;
}
.value .vw-dot { color: var(--mint); }
.value p { max-width: 44ch; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- on-site color grade ----------
   Media is generated/shot TRUE TO LIFE (bright cleanrooms, neutral studio
   light) and the teal grade is applied here, identically for every asset.
   Background slots get a full teal duotone; the focal checkpoint renders keep
   their realism with only a gentle cool-down + hue wash. */
.duo-card .bg-video,
.media-band .bg-video, .media-band .bg-still,
.hero-media img, .hero-media video,
.hero-home-video {
  filter: grayscale(1) sepia(0.55) hue-rotate(125deg) saturate(0.6) brightness(0.8) contrast(1.05);
}
.checkpoint-render { position: relative; }
.checkpoint-render::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: rgba(103, 129, 119, 0.3);
  mix-blend-mode: color;
}

/* ---------- form spam protection ---------- */
/* honeypot: off-screen (not display:none — smarter bots check for that) */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-success { font-size: 1.05rem; color: var(--teal-600); padding: 40px 0; text-align: center; }