/* ============================================================
   Quality Corrections & Inspections: site stylesheet
   Dark cinematic hero, light editorial body, liquid signal-red motion
   Display: Archivo 800/900 · Editorial accent: Instrument Serif
   Body: Inter · Accent: QCI red #E8353E · black · gray (official logo palette)
   ============================================================ */

:root {
  --noir:     #0B0A0A;
  --noir-2:   #121011;
  --paper:    #FAF9F6;
  --paper-2:  #F1EFE9;
  --line:     #E4E1D8;
  --line-drk: rgba(255,255,255,.14);

  --ink:      #171415;
  --ink-60:   #5C5759;
  --ink-40:   #746F71;

  --red:      #E8353E;
  --red-deep: #C21820;
  --red-ink:  #FFFFFF;

  --display: "Archivo", system-ui, -apple-system, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1360px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-exp: cubic-bezier(.87,0,.13,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 0; }
a { color: inherit; text-decoration: none; }
img,svg,canvas { display: block; max-width: 100%; }
::selection { background: var(--red); color: var(--red-ink); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(90px, 14vh, 200px); position: relative; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.accent { color: var(--red); }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 500; background: var(--ink); color: #fff; padding: 12px 18px; }
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--red); outline-offset: 4px;
}

/* ============================================================
   GRAIN + CURSOR + PROGRESS
   ============================================================ */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 340; border-radius: 50%; opacity: 0; }
body.has-cursor .cursor, body.has-cursor .cursor-ring { opacity: 1; }
.cursor { width: 8px; height: 8px; background: var(--red); margin: -4px 0 0 -4px; }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(232,53,62,.55); mix-blend-mode: difference;
  transition: transform .35s var(--ease-out), border-color .3s;
}
.cursor-ring.is-active { transform: scale(2.1); border-color: var(--red); }
body.has-cursor a, body.has-cursor button { cursor: none; }
body.has-cursor { cursor: none; }

.scroll-prog { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--red); z-index: 300; }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 400; background: var(--noir);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s var(--ease-exp);
}
.loader.is-done { transform: translateY(-101%); }
.loader__inner { width: min(680px, 86vw); }
.loader__word { display: flex; justify-content: center; gap: 2px; margin-bottom: 34px; }
.loader__word span {
  font-family: var(--display); font-weight: 900; font-size: clamp(1.1rem, 3.4vw, 2rem);
  letter-spacing: .22em; color: #fff; opacity: 0; transform: translateY(18px);
  animation: lchar .7s var(--ease-out) forwards;
}
.loader__word span.sp { width: 1.2em; }
.loader__word--big { gap: .04em; }
.loader__word--big span { font-size: clamp(2.6rem, 8vw, 4.2rem); letter-spacing: .28em; }
.loader__word span.c { color: var(--red); }
.loader__word span:nth-child(n) { animation-delay: calc(.09s * var(--i, 0)); }
@keyframes lchar { to { opacity: 1; transform: none; } }
.loader__meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
  font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.loader__count { font-size: 1rem; color: var(--red); font-variant-numeric: tabular-nums; }
.loader__bar { height: 1px; background: rgba(255,255,255,.15); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0%; background: var(--red); }

/* ============================================================
   EYEBROW / BUTTONS
   ============================================================ */
.eyebrow {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-60);
  display: inline-flex; align-items: center; gap: 16px; margin: 0;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5; }
.eyebrow .idx { color: var(--red-deep); margin-right: 4px; }
.eyebrow--invert { color: rgba(255,255,255,.65); }
.eyebrow--invert .idx { color: var(--red); }

.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .01em;
  color: var(--fg); background: var(--bg); border: 1px solid transparent;
  padding: 18px 34px; border-radius: 999px; cursor: pointer; overflow: hidden;
  transition: color .35s var(--ease);
}
.btn__label { position: relative; z-index: 1; display: inline-block; transition: transform .45s var(--ease-out); }
.btn::after {
  content: ""; position: absolute; inset: 0; background: #fff; border-radius: inherit;
  transform: translateY(101%); transition: transform .5s var(--ease-exp);
}
.btn:hover::after { transform: none; }
.btn:hover { color: var(--ink); }
.btn:hover .btn__label { transform: translateY(-1px); }
.btn--red { --bg: #DC2933; --fg: var(--red-ink); }
.btn--red::after { background: var(--noir); }
.btn--red:hover { color: var(--red); }
.btn--line { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.35); }
.btn--line::after { background: #fff; }
.btn--line:hover { color: var(--ink); border-color: #fff; }
.btn--lg { padding: 21px 42px; font-size: .96rem; }
.btn--block { width: 100%; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 220;
  transform: translateY(0); transition: transform .5s var(--ease-out), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav:focus-within { transform: translateY(0); }
.nav.is-stuck { background: rgba(250,249,246,.86); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 40px; padding: 18px var(--gutter); max-width: 1560px; margin-inline: auto; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* The official logo (black lettering, red stripes). On the dark header the
   dark parts are inverted so the lettering reads white while the red stays
   red; the light (scrolled) header and the footer show it in full colour. */
.brand__logo { display: block; height: 52px; width: auto; flex-shrink: 0; filter: invert(1) hue-rotate(180deg); transition: filter .4s; }
.nav.is-stuck .brand__logo, body.light-nav .brand__logo, .footer .brand__logo { filter: none; }
.brand__mark { color: #fff; transition: color .4s; }
.nav.is-stuck .brand__mark, .footer .brand__mark { color: var(--ink); }
.brand__abbr em { font-style: normal; color: var(--red); }
.brand__abbr { font-family: var(--display); font-weight: 900; font-size: 1.2rem; letter-spacing: -.01em; color: #fff; transition: color .4s; }
.brand__full { display: block; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 2px; transition: color .4s; }
.nav.is-stuck .brand__abbr, body.light-nav .brand__abbr { color: var(--ink); }
.nav.is-stuck .brand__full, body.light-nav .brand__full { color: var(--ink-40); }

.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links a {
  font-family: var(--display); font-weight: 600; font-size: .88rem; color: rgba(255,255,255,.85);
  position: relative; padding: 6px 0; transition: color .4s;
}
.nav__links a sup { font-size: .58em; color: var(--red); margin-right: 5px; font-variant-numeric: tabular-nums; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: currentColor; transition: width .35s var(--ease); }
.nav__links a:hover::after { width: 100%; }
.nav.is-stuck .nav__links a, body.light-nav .nav__links a { color: var(--ink); }
.nav__cta { padding: 13px 24px; font-size: .8rem; }

/* What-we-do dropdown: opens on hover, keyboard focus or the caret button. */
.nav__item { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__caret { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .4s, transform .3s var(--ease); }
.nav__caret svg { width: 12px; height: 12px; }
.nav__caret:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav.is-stuck .nav__caret, body.light-nav .nav__caret { color: var(--ink-60); }
.nav__item--menu:hover .nav__caret, .nav__item.is-open .nav__caret { transform: rotate(180deg); }
.nav__menu { position: absolute; top: calc(100% + 10px); left: -18px; min-width: 268px; padding: 10px; display: none; flex-direction: column; gap: 2px; background: var(--noir); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.35); z-index: 5; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__item--menu:hover .nav__menu, .nav__item--menu:focus-within .nav__menu, .nav__item.is-open .nav__menu { display: flex; }
.nav__links .nav__menu a { padding: 10px 12px; border-radius: 6px; font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.85); }
.nav__links .nav__menu a::after { display: none; }
.nav__links .nav__menu a:hover, .nav__links .nav__menu a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.nav.is-stuck .nav__menu, body.light-nav .nav__menu { background: #fff; border-color: var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.nav.is-stuck .nav__links .nav__menu a, body.light-nav .nav__links .nav__menu a { color: var(--ink); }
.nav.is-stuck .nav__links .nav__menu a:hover, body.light-nav .nav__links .nav__menu a:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.nav__mobile a.nav__mobile-sub { font-size: clamp(1.1rem, 4.5vw, 1.5rem); font-weight: 600; padding: 10px 0 10px 30px; color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.08); }

.nav__toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: transparent; cursor: pointer; flex-direction: column; gap: 6px; align-items: center; justify-content: center; transition: border-color .4s; }
.nav__toggle span { width: 18px; height: 1.5px; background: #fff; transition: transform .35s var(--ease), background .4s; }
.nav.is-stuck .nav__toggle, body.light-nav .nav__toggle { border-color: var(--line-2, #ccc); }
.nav.is-stuck .nav__toggle span, body.light-nav .nav__toggle span { background: var(--ink); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.nav__mobile {
  position: fixed; inset: 0; z-index: 210; background: var(--noir); color: #fff;
  padding: 120px var(--gutter) 44px; display: flex; flex-direction: column; gap: 2px;
  clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease-exp);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__mobile.is-open { clip-path: inset(0 0 0 0); }
.nav__mobile a { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; letter-spacing: -.03em; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav__mobile a sup { font-size: .4em; color: var(--red); margin-right: 10px; }
.nav__mobile .btn { margin-top: 30px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh; background: var(--noir); color: #fff;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding: 140px 0 90px;
}
.hero__silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(130% 90% at 50% 110%, rgba(10,10,11,0) 30%, rgba(10,10,11,.55) 100%),
  linear-gradient(180deg, rgba(10,10,11,.5), transparent 30%, transparent 72%, rgba(10,10,11,.85));
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); will-change: transform; }

.hero__kicker {
  display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(28px, 4.5vh, 52px);
  font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.kicker__rule { width: 44px; height: 1px; background: var(--red); }
.kicker__dot { color: var(--red); }

/* sized so the longest hero headline line holds on one line inside --maxw
   at every viewport */
.hero__title { font-size: clamp(2.8rem, 7.5vw, 6.7rem); font-weight: 900; letter-spacing: -.045em; line-height: .96; color: #fff; }
.hero__title .serif { font-size: 1.02em; color: var(--red); letter-spacing: -.02em; padding-right: .04em; }
.hero__title .redline { position: relative; white-space: nowrap; }
.hero__title .redline::after {
  content: ""; position: absolute; left: 0; right: .05em; bottom: .04em; height: .09em;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-exp) 1.15s;
}
body.is-loaded .hero__title .redline::after { transform: scaleX(1); }
.hline { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hline__in { display: inline-block; transform: translateY(115%) rotate(2deg); transform-origin: left bottom; transition: transform 1.15s var(--ease-exp); }
.hline:nth-child(2) .hline__in { transition-delay: .09s; }
.hline:nth-child(3) .hline__in { transition-delay: .18s; }
body.is-loaded .hline__in { transform: none; }

.hero__foot { display: grid; grid-template-columns: minmax(0, 56ch) auto; gap: 28px 64px; align-items: end; justify-content: space-between; margin-top: clamp(36px, 6vh, 72px); }
.hero__lede { margin: 0; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; color: rgba(255,255,255,.72); }
.hero__lede strong { color: #fff; font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__ticker { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; overflow: hidden; background: rgba(10,10,11,.4); backdrop-filter: blur(6px); }
.ticker__track { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; will-change: transform; }
.ticker__track span { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ticker__track i { color: var(--red); font-style: normal; font-size: .6rem; }

/* ============================================================
   MANIFESTO — scroll illuminated
   ============================================================ */
.manifesto { background: var(--paper); min-height: 190vh; position: relative; }
.manifesto__sticky {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 44px; padding: 0 var(--gutter);
}
.manifesto__label { color: var(--ink-40); }
.manifesto__text {
  max-width: 21ch; margin: 0; text-align: center;
  font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.14;
  font-size: clamp(1.7rem, 4.6vw, 3.7rem); color: var(--ink);
}
.manifesto__text .w { opacity: .1; transition: opacity .18s linear; }
.manifesto__text .w.lit { opacity: 1; }
.manifesto__text .hl { position: relative; white-space: normal; }
.manifesto__text .hl .w.lit { color: var(--red-deep); }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.shead { max-width: 70ch; margin-bottom: clamp(48px, 8vh, 100px); display: grid; gap: 26px; }
.shead--center { justify-items: center; text-align: center; margin-bottom: clamp(28px, 5vh, 56px); }
.shead__title { font-size: clamp(2.4rem, 6vw, 5.2rem); letter-spacing: -.04em; line-height: .98; }
.shead__title--long { font-size: clamp(1.8rem, 3.9vw, 3.4rem); line-height: 1.06; max-width: 26ch; }
.shead__title .serif { font-size: 1.04em; color: var(--red-deep); }
.shead__sub { margin: 0; font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--ink-60); max-width: 52ch; }

/* ============================================================
   PROBLEMS — index rows
   ============================================================ */
.problems { background: var(--paper); }
.rows { border-top: 1px solid var(--line); }
.row {
  position: relative; display: grid; grid-template-columns: 80px 1.15fr 1fr 60px;
  align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: clamp(26px, 4vh, 44px) var(--gutter);
  max-width: 1560px; margin-inline: auto;
  border-bottom: 1px solid var(--line); overflow: hidden;
  transition: color .45s var(--ease);
}
.row::before {
  content: ""; position: absolute; inset: 0; background: var(--noir);
  transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-exp); z-index: 0;
}
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:hover, .row:focus-visible { color: #fff; }
.row > * { position: relative; z-index: 1; }
.row__n { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .2em; color: var(--red-deep); font-variant-numeric: tabular-nums; transition: color .45s; }
.row:hover .row__n, .row:focus-visible .row__n { color: var(--red); }
.row__title { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.5rem, 3.4vw, 2.9rem); line-height: 1; }
.row__desc { font-size: .95rem; line-height: 1.55; color: var(--ink-60); transition: color .45s; max-width: 44ch; }
.row:hover .row__desc, .row:focus-visible .row__desc { color: rgba(255,255,255,.72); }
.row__arrow { font-size: 1.5rem; justify-self: end; transform: translateX(-14px); opacity: 0; transition: transform .45s var(--ease-out), opacity .45s; color: var(--red); }
.row:hover .row__arrow, .row:focus-visible .row__arrow { transform: none; opacity: 1; }

/* ============================================================
   PROCESS — pinned horizontal scroll
   ============================================================ */
.process { background: var(--noir); color: #fff; height: 420vh; position: relative; }
.process__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(30px, 6vh, 70px); }
.process__head { width: 100%; }
.process__title { font-size: clamp(2.2rem, 5vw, 4.4rem); letter-spacing: -.04em; color: #fff; margin-top: 24px; }
.process__title .serif { color: var(--red); font-size: 1.05em; }
.process__title-underline {
  text-decoration-line: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: .07em;
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}
.process__bar { margin-top: 34px; height: 1px; background: rgba(255,255,255,.15); }
.process__bar span { display: block; height: 100%; width: 0%; background: var(--red); }

.process__track { display: flex; gap: clamp(24px, 3vw, 56px); padding-inline: var(--gutter); will-change: transform; width: max-content; }

/* ---------- process 3D scroll story ("one unit, five stations") ----------
   Desktop-only canvas stage; the card track above becomes display:none and
   returns as the stacked fallback on mobile / reduced motion. */
.process--3d { height: 640vh; }
.process--3d .process__sticky { display: block; }
.process--3d .process__track { display: none; }
.process__stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.process--3d .process__head { position: absolute; top: clamp(24px, 5vh, 54px); left: 0; right: 0; z-index: 4; pointer-events: none; }
.process--3d .process__title { font-size: clamp(1.6rem, 3.2vw, 2.7rem); margin-top: 14px; }
.process__copy { position: absolute; z-index: 4; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(400px, 34vw); pointer-events: none; }
.pstep { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(26px); transition: opacity .45s var(--ease), transform .45s var(--ease-out); }
.pstep.on { opacity: 1; transform: none; }
.pstep__n { font-family: var(--display); font-weight: 900; font-size: 13px; color: var(--red); letter-spacing: .12em; }
.pstep h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.9rem, 3.4vw, 3rem); color: #fff; margin: 10px 0 14px; }
.pstep p { color: rgba(255,255,255,.62); line-height: 1.7; font-size: 15px; margin: 0; }
.process__rail { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 4.5vh, 44px); pointer-events: none; }
.process--3d .process__bar { margin: 0 0 16px; }
.process__stations { display: flex; justify-content: space-between; }
.process__st { font-size: 10px; letter-spacing: .24em; font-weight: 600; color: rgba(255,255,255,.48); transition: color .3s var(--ease); }
.process__st sup { color: rgba(255,255,255,.3); margin-right: 6px; font-size: 8px; }
.process__st.on { color: #fff; }
.process__st.on sup { color: var(--red); }
.panel {
  width: clamp(300px, 34vw, 520px); flex: none;
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  padding: clamp(28px, 3vw, 48px); background: rgba(255,255,255,.025);
  position: relative; overflow: hidden;
}
.panel__n {
  font-family: var(--display); font-weight: 900; font-size: clamp(4.4rem, 8vw, 8rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(232,53,62,.5); letter-spacing: -.05em;
  margin-bottom: clamp(28px, 5vh, 64px);
}
.panel h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); letter-spacing: -.03em; color: #fff; margin-bottom: 14px; }
.panel h3::after { content: ""; display: block; width: 42px; height: 2px; background: var(--red); margin-top: 16px; }
.panel p { margin: 12px 0 0; font-size: .96rem; line-height: 1.6; color: rgba(255,255,255,.62); }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement { background: var(--noir-2); color: #fff; overflow: hidden; }
.statement__silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.statement__inner { position: relative; z-index: 2; }
.statement__q {
  margin-top: 34px; max-width: 17ch;
  font-size: clamp(2.4rem, 6.4vw, 5.8rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff;
}
.statement__q .w { opacity: .14; transition: opacity .25s linear; }
.statement__q .w.lit { opacity: 1; }
.statement__cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 90px); margin-top: clamp(40px, 7vh, 80px); max-width: 1050px; }
.statement__cols p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.7; color: rgba(255,255,255,.7); }
.statement__cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.statement__cols li { padding: 14px 0 14px 30px; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; color: rgba(255,255,255,.85); font-size: .96rem; }
.statement__cols li:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.statement__cols li::before { content: "✦"; position: absolute; left: 0; top: 14px; color: var(--red); font-size: .7rem; }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--paper); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 64px); }
.stat__num { font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 6.6vw, 6.4rem); letter-spacing: -.05em; line-height: .88; display: flex; align-items: baseline; }
.stat__suf { color: var(--red-deep); font-size: .55em; margin-left: 2px; }
.stat__label { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-60); line-height: 1.5; }

/* ============================================================
   CASES
   ============================================================ */
.cases { background: var(--paper-2); }
.cases__list { display: grid; }
.case {
  display: grid; grid-template-columns: clamp(190px, 21vw, 280px) minmax(0, 1fr) auto; gap: clamp(24px, 3.5vw, 64px);
  align-items: center; padding: clamp(36px, 6vh, 64px) 0; border-top: 1px solid var(--line-2, #d6d3c8);
}
.case:last-child { border-bottom: 1px solid var(--line-2, #d6d3c8); }
.case__media { margin: 0; position: relative; background: var(--noir); aspect-ratio: 4 / 3; --corner-size: 20px; --corner-offset: -7px; }
.case__media .photo-frame__crop { height: 100%; overflow: hidden; }
.case__media img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06);
  transform: translate3d(var(--case-img-x, 0px), var(--case-img-y, 0px), 0) scale(var(--case-img-scale, 1.045));
  transition: transform 1.1s var(--ease-out), filter .8s var(--ease);
}
.case.in { --case-img-scale: 1.035; }
.case.in .case__media img { filter: saturate(.9) contrast(1.04); }
.case__tag { font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--red-deep); }
.case h3 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -.03em; line-height: 1.06; margin: 18px 0 16px; }
.case p { margin: 0; max-width: 60ch; font-size: .98rem; color: var(--ink-60); line-height: 1.65; }
.case__metric {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.5rem, 3vw, 2.6rem); display: flex; align-items: baseline; gap: 16px; white-space: nowrap;
}
.case__metric .serif { color: var(--ink-40); font-size: 1.06em; }
.case__arrow { color: var(--red-deep); }

/* ============================================================
   INDUSTRIES — recovery manifest
   The grid is the content. The 3D assembly and scan are one-shot
   decoration, so all eight sectors remain readable at rest.
   ============================================================ */
.industries {
  background:
    linear-gradient(rgba(23,20,21,.026) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, rgba(23,20,21,.022) 1px, transparent 1px) 0 0 / 42px 100%,
    var(--paper);
  overflow: clip;
}
.industries::before {
  content: ""; position: absolute; z-index: 0; width: min(64vw, 900px); aspect-ratio: 1;
  right: -24vw; top: -26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,53,62,.09), transparent 68%);
}
.industries__inner { position: relative; z-index: 1; }
.industries__head {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(42px, 8vw, 132px); align-items: end; padding-top: clamp(26px, 3.5vw, 48px);
  border-top: 1px solid var(--ink);
}
.industries__title {
  margin-top: clamp(28px, 4vh, 48px); max-width: 13ch;
  font-size: clamp(3rem, 6.4vw, 6.3rem); line-height: .91; letter-spacing: -.055em;
}
.industries__title .serif { color: var(--red-deep); white-space: nowrap; }
.industries__intro { padding-bottom: 5px; }
.industries__intro > p { margin: 0; color: var(--ink-60); font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.7; }
.industries__key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(28px, 4vh, 42px); background: var(--line); border: 1px solid var(--line); }
.industries__key span { display: grid; gap: 3px; min-width: 0; padding: 14px 10px; background: rgba(250,249,246,.84); font-family: var(--display); font-size: .56rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); }
.industries__key strong { font-size: 1.25rem; line-height: 1; letter-spacing: -.04em; color: var(--ink); }

.industry-deck-shell {
  --corner-size: 28px; --corner-offset: -9px;
  position: relative; margin-top: clamp(58px, 9vh, 112px); background: var(--noir);
  box-shadow: 0 44px 100px -52px rgba(11,10,10,.72);
}
.industry-deck {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 0; padding: 1px; list-style: none; overflow: hidden;
  background: rgba(255,255,255,.15); perspective: 1500px; transform-style: preserve-3d;
}
.industry-card { min-width: 0; background: var(--noir); perspective: 1200px; transform-style: preserve-3d; }
.industry-card__surface {
  position: relative; display: grid; min-height: clamp(230px, 21vw, 294px); color: #fff;
  transform-style: preserve-3d; transform-origin: 50% 50%;
  transition: transform .82s var(--ease-exp), box-shadow .65s var(--ease-out);
}
.industry-card__face {
  grid-area: 1 / 1; position: relative; isolation: isolate; min-width: 0; min-height: inherit;
  padding: clamp(24px, 2.5vw, 36px); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.industry-card__face--front {
  z-index: 2; display: flex; flex-direction: column; transform: rotateY(0deg) translateZ(1px);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--noir-2);
}
.industry-card:nth-child(even) .industry-card__face--front { background-color: #0e0d0d; }
.industry-card__face--back {
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center;
  transform: rotateY(180deg) translateZ(1px);
  background:
    radial-gradient(circle at 50% 48%, rgba(232,53,62,.1), transparent 42%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 26px 100%,
    #0d0c0c;
  box-shadow: inset 0 0 0 1px rgba(232,53,62,.34);
}
.industry-card__face--back::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 62%; aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.08); border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 20px rgba(255,255,255,.018), 0 0 0 44px rgba(232,53,62,.025);
}
.industry-card__code {
  width: max-content; padding-bottom: 8px; border-bottom: 1px solid var(--red);
  font-family: var(--display); font-weight: 700; font-size: .6rem; letter-spacing: .24em; color: rgba(255,255,255,.55);
}
.industry-card__ghost {
  position: absolute; z-index: 0; right: -4px; top: 8px; pointer-events: none; user-select: none;
  font-family: var(--display); font-size: clamp(5rem, 8vw, 8.3rem); font-weight: 900; line-height: .8; letter-spacing: -.09em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); transition: -webkit-text-stroke-color .45s var(--ease);
}
.industry-card__copy { margin-top: auto; padding-top: 64px; }
.industry-card h3 { max-width: 9ch; font-size: clamp(1.55rem, 2.35vw, 2.55rem); line-height: .92; letter-spacing: -.055em; }
.industry-card p { margin: 11px 0 0; font-size: .76rem; line-height: 1.4; letter-spacing: .02em; color: rgba(255,255,255,.55); transition: color .45s var(--ease); }
.industry-card__status {
  display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 22px;
  font-family: var(--display); font-size: .5rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: rgba(255,255,255,.38);
  transition: color .45s var(--ease);
}
.industry-card__status i { width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(232,53,62,.12); }
.industry-card__illustration {
  position: relative; z-index: 1; place-self: center; width: min(78%, 190px); max-height: 142px;
  color: rgba(255,255,255,.82); filter: drop-shadow(0 0 18px rgba(232,53,62,.1));
}
.industry-card__illustration .draw, .industry-card__illustration .detail {
  fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.industry-card__illustration .draw { stroke: currentColor; stroke-width: 1.8; }
.industry-card__illustration .detail { stroke: var(--red); stroke-width: 2.2; }
.industry-card__back-label { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 14px; align-items: end; }
.industry-card__back-label span { font-family: var(--display); font-size: .48rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.industry-card__back-label strong { max-width: 10ch; text-align: right; font-family: var(--display); font-size: clamp(.9rem, 1.2vw, 1.1rem); line-height: 1; letter-spacing: -.03em; color: #fff; }
.industry-card__corners { position: absolute !important; z-index: 2 !important; inset: 13px; pointer-events: none; }
.industry-card__corners::before, .industry-card__corners::after { content: ""; position: absolute; width: 11px; height: 11px; opacity: .66; }
.industry-card__corners::before { top: 0; left: 0; border-top: 1px solid var(--red); border-left: 1px solid var(--red); }
.industry-card__corners::after { right: 0; bottom: 0; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); }
.industry-scan {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 2%, var(--red) 18%, #fff 50%, var(--red) 82%, transparent 98%);
  box-shadow: 0 0 22px rgba(232,53,62,.52);
}
.industry-deck-shell.in .industry-scan { animation: industryscan 2.1s var(--ease) 1.15s 1 both; }
@keyframes industryscan {
  0% { top: 0; opacity: 0; }
  10% { opacity: .9; }
  88% { opacity: .72; }
  100% { top: calc(100% - 2px); opacity: 0; }
}

/* On capable desktops, the manifest briefly assembles from one stacked
   inspection pallet. Its destination is always the readable grid. */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .industry-deck-shell.is-manifest-ready .industry-card {
    opacity: .18;
    transform: translate3d(var(--stack-x), var(--stack-y), var(--stack-z)) rotateX(58deg) rotateZ(var(--stack-r)) scale(.84);
    transition: transform 1.15s var(--ease-out), opacity .8s var(--ease);
  }
  .industry-deck-shell.is-manifest-ready.in .industry-card { opacity: 1; transform: none; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(1) { transition-delay: .04s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(2) { transition-delay: .09s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(3) { transition-delay: .14s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(4) { transition-delay: .19s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(5) { transition-delay: .24s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(6) { transition-delay: .29s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(7) { transition-delay: .34s; }
  .industry-deck-shell.is-manifest-ready.in .industry-card:nth-child(8) { transition-delay: .39s; }
  .industry-card:nth-child(1) { --stack-x: 154%; --stack-y: 53%; --stack-z: -42px; --stack-r: -4deg; }
  .industry-card:nth-child(2) { --stack-x: 52%; --stack-y: 51%; --stack-z: -30px; --stack-r: 2deg; }
  .industry-card:nth-child(3) { --stack-x: -52%; --stack-y: 49%; --stack-z: -18px; --stack-r: -2deg; }
  .industry-card:nth-child(4) { --stack-x: -154%; --stack-y: 47%; --stack-z: -6px; --stack-r: 4deg; }
  .industry-card:nth-child(5) { --stack-x: 154%; --stack-y: -47%; --stack-z: 6px; --stack-r: 3deg; }
  .industry-card:nth-child(6) { --stack-x: 52%; --stack-y: -49%; --stack-z: 18px; --stack-r: -2deg; }
  .industry-card:nth-child(7) { --stack-x: -52%; --stack-y: -51%; --stack-z: 30px; --stack-r: 2deg; }
  .industry-card:nth-child(8) { --stack-x: -154%; --stack-y: -53%; --stack-z: 42px; --stack-r: -3deg; }
  .industry-card:hover { position: relative; z-index: 4; }
  html:not(.motion-lite) .industry-card__face--back { display: grid; }
  html:not(.motion-lite) .industry-card__illustration .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .78s var(--ease-out) .2s; }
  html:not(.motion-lite) .industry-card:hover .industry-card__surface {
    transform: rotateY(180deg);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 54px -25px rgba(0,0,0,.92);
  }
  html:not(.motion-lite) .industry-card:hover .industry-card__illustration .draw { stroke-dashoffset: 0; }
}

/* Every card is keyboard operable. Touch devices additionally receive the
   tap/pan behavior in the media query below. */
.industry-card.is-interactive { position: relative; cursor: pointer; }
.industry-card.is-interactive:focus-visible { z-index: 5; outline: 2px solid var(--red); outline-offset: -3px; }
.industry-card.is-interactive .industry-card__face--back { display: grid; }
.industry-card.is-interactive .industry-card__illustration .draw {
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .72s var(--ease-out) .18s;
}
.industry-card.is-interactive.is-flipped { z-index: 4; }
.industry-card.is-interactive.is-flipped .industry-card__surface {
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 54px -25px rgba(0,0,0,.92);
}
.industry-card.is-interactive.is-flipped .industry-card__illustration .draw { stroke-dashoffset: 0; }

@media (hover: none), (pointer: coarse), (max-width: 860px) {
  .industry-card.is-tap-enabled { touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
}

.industries__proof {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0;
  list-style: none; border: solid var(--line); border-width: 0 1px 1px;
}
.industries__proof li {
  position: relative; min-width: 0; padding: 16px 12px 16px 28px; border-right: 1px solid var(--line);
  font-family: var(--display); font-size: .56rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-60);
}
.industries__proof li:last-child { border-right: 0; }
.industries__proof li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 5px; height: 5px; background: var(--red-deep); transform: translateY(-50%) rotate(45deg); }
.industries__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: clamp(34px, 5vh, 58px);
  padding: clamp(22px, 3vw, 34px); background: var(--ink); color: #fff;
}
.industries__foot p { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.75rem); font-style: italic; line-height: 1.2; }
.industries__foot p span { font-family: var(--display); font-size: .58em; font-style: normal; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-right: 12px; }
.industries__foot .btn { flex: none; }

@media (max-width: 860px) {
  .industries__head { grid-template-columns: 1fr; gap: 34px; }
  .industries__title { max-width: 14ch; }
  .industries__intro { max-width: 58ch; }
  .industry-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industry-card__surface { min-height: clamp(190px, 34vw, 250px); }
  .industry-scan { display: none; }
  .industries__proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .industries__proof li:nth-child(3) { border-right: 0; }
  .industries__proof li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .industries__title { font-size: clamp(2.6rem, 12vw, 3.75rem); line-height: .94; }
  .industries__title .serif { white-space: normal; }
  .industries__key span { padding: 12px 8px; font-size: .5rem; letter-spacing: .11em; }
  .industries__key strong { font-size: 1.08rem; }
  .industry-deck-shell { --corner-size: 20px; --corner-offset: -7px; margin-top: 50px; }
  .industry-deck { grid-template-columns: 1fr; }
  .industry-card__surface { min-height: 158px; }
  .industry-card__face { padding: 22px 20px; }
  .industry-card__ghost { right: 4px; top: 12px; font-size: 5.4rem; }
  .industry-card__copy { padding-top: 35px; }
  .industry-card h3 { max-width: 12ch; font-size: clamp(1.7rem, 9vw, 2.25rem); }
  .industry-card p { margin-top: 7px; }
  .industry-card__status { margin-top: 14px; }
  .industries__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .industries__proof li:nth-child(3) { border-right: 1px solid var(--line); }
  .industries__proof li:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .industries__proof li:nth-child(even) { border-right: 0; }
  .industries__foot { align-items: stretch; flex-direction: column; }
  .industries__foot p { display: grid; gap: 8px; }
  .industries__foot p span { margin-right: 0; }
  .industries__foot .btn { width: 100%; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta { background: var(--noir); color: #fff; overflow: hidden; }
.cta__silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .5; }
.cta__inner { position: relative; z-index: 2; }
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.cta__title { font-size: clamp(2.6rem, 5.6vw, 5rem); letter-spacing: -.04em; line-height: .98; color: #fff; margin-top: 30px; }
.cta__title .serif { display: block; margin-top: .08em; }
.cta__sub { margin: 28px 0 0; color: rgba(255,255,255,.66); font-size: 1.06rem; line-height: 1.65; max-width: 44ch; }
.cta__meta { margin: 38px 0 0; padding: 0; list-style: none; display: grid; }
.cta__meta li { padding: 13px 0 13px 28px; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; font-family: var(--display); font-weight: 600; font-size: .92rem; color: rgba(255,255,255,.8); }
.cta__meta li:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.cta__meta li::before { content: "✦"; position: absolute; left: 0; top: 13px; color: var(--red); font-size: .65rem; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
.form--console { display: block; perspective: 1200px; }
.form__console { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.field input, .field textarea {
  font-family: var(--body); font-size: 1.02rem; color: #fff; background: transparent;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.25); border-radius: 0;
  padding: 10px 2px 14px; transition: border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.28); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--red); }
.form__note { grid-column: 1 / -1; min-height: 1.3em; margin: 0; color: var(--red); font-family: var(--display); font-weight: 600; font-size: .94rem; }

/* ============================================================
   QCI MOTION LAB — one coherent machine-vision depth system.
   The process and coverage canvases remain the two long-form scenes;
   everything below is local, finite, pointer- or scroll-driven.
   ============================================================ */

/* --- hero: live 3D inspection array --- */
.hero__scan {
  position: absolute; z-index: 1; top: 5%; right: -4%; width: min(70vw, 1120px); height: 83%;
  opacity: .92; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 15%, #000 44%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 15%, #000 44%, #000 100%);
}
.hero__vignette { z-index: 2; }
.hero__inner { z-index: 3; }
.hero__ticker { z-index: 4; }
.form__consolehead i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin-right: 6px; box-shadow: 0 0 0 4px rgba(232,53,62,.13); }

/* --- reputation seal: a dimensional proof mark, not another pinned scene --- */
.statement__seal {
  position: absolute; z-index: 1; right: -7vw; top: 50%; width: min(58vw, 760px); aspect-ratio: 1;
  border-radius: 50%; opacity: .22; color: #fff; pointer-events: none; transform-style: preserve-3d;
}
.statement__sealring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.34); }
.statement__sealring--outer { box-shadow: inset 0 0 0 24px rgba(255,255,255,.018), 0 0 0 1px rgba(232,53,62,.16); }
.statement__sealring--inner { inset: 15%; border-color: rgba(232,53,62,.7); }
.statement__sealring--inner::before, .statement__sealring--inner::after { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.22); }
.statement__sealring--inner::after { inset: 27%; border-style: solid; border-color: rgba(255,255,255,.14); }
.statement__sealcross::before, .statement__sealcross::after { content: ""; position: absolute; left: 50%; top: 5%; bottom: 5%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.22), transparent); }
.statement__sealcross::after { top: 50%; left: 5%; right: 5%; bottom: auto; width: auto; height: 1px; }
.statement__seal strong { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: clamp(5rem, 15vw, 13rem); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.68); }
.statement__seal small { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-size: clamp(6px, .7vw, 10px); font-weight: 700; letter-spacing: .3em; color: rgba(255,255,255,.64); }

/* --- every photograph becomes an inspected physical object --- */
.photo-frame__surface {
  --depth-rx: 0deg; --depth-ry: 0deg; --portal-rx: 0deg; --portal-y: 0px; --portal-scale: 1;
  position: relative; display: block; overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden;
  transform: perspective(1200px) translate3d(0, var(--portal-y), 0) rotateX(calc(var(--depth-rx) + var(--portal-rx))) rotateY(var(--depth-ry)) scale(var(--portal-scale));
  transition: transform .72s var(--ease-out), box-shadow .72s var(--ease-out);
}
.depth-photo.is-depth-active .photo-frame__surface { transition-duration: .12s; }
.depth-photo:not(.case__media) .photo-frame__surface > img {
  transform: translate3d(var(--photo-x, 0px), var(--photo-y, 0px), 0) scale(1.045);
  transition: transform .72s var(--ease-out), filter .8s var(--ease);
}
.depth-photo.is-depth-active:not(.case__media) .photo-frame__surface > img { transition-duration: .12s; }
.photo-scan {
  position: absolute; z-index: 2; left: 0; right: 0; top: -12%; height: 12%; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(232,53,62,.11) 52%, rgba(232,53,62,.92) 96%, transparent);
  box-shadow: 0 8px 22px rgba(232,53,62,.14);
}
.photo-frame.is-scanned .photo-scan { animation: photoscan 1.25s var(--ease) .16s both; }
@keyframes photoscan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: .82; } 100% { opacity: 0; transform: translateY(940%); } }
.photo-frame::before, .photo-frame::after { transition: top .45s var(--ease-out), right .45s var(--ease-out), bottom .45s var(--ease-out), left .45s var(--ease-out), filter .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .photo-frame:hover { --corner-offset: -12px; }
  .case__media.photo-frame:hover, .pgrid .photo-frame:hover { --corner-offset: -10px; }
  .photo-frame:hover::before, .photo-frame:hover::after { filter: drop-shadow(0 0 7px rgba(232,53,62,.38)); }
}

/* the floor feature enters like a physical inspection table */
.pfeature-row .photo-frame__surface { transform-origin: 50% 100%; }

/* --- diagnostic service rows --- */
.row { --row-dx: 0px; --row-dy: 0px; }
.row::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--row-px, 80%) var(--row-py, 50%), rgba(232,53,62,.22), transparent 62%);
  transition: opacity .35s var(--ease);
}
.row:hover::after, .row:focus-visible::after { opacity: 1; }
.row__n, .row__title, .row__desc { transition: color .45s var(--ease), transform .5s var(--ease-out); }
.row:hover .row__n { transform: translate3d(var(--row-dx-back, 0px), var(--row-dy-back, 0px), 0); }
.row:hover .row__title { transform: translate3d(var(--row-dx-front, 0px), var(--row-dy-front, 0px), 0); }
.row:hover .row__desc { transform: translate3d(var(--row-dx-mid, 0px), var(--row-dy-mid, 0px), 0); }
.row:hover .row__arrow { transform: translate3d(var(--row-dx-arrow, 0px), var(--row-dy-arrow, 0px), 0); }
.row__depth { position: absolute !important; z-index: 1 !important; right: clamp(68px, 7vw, 128px); top: 50%; width: 112px; height: 64px; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.row:hover .row__depth, .row:focus-visible .row__depth { opacity: .34; }
.row__depth i { position: absolute; inset: 0; border: 1px solid var(--red); transform: perspective(500px) rotateY(-22deg); opacity: .82; }
.row__depth i:nth-child(2) { transform: perspective(500px) rotateY(-22deg) translate3d(8px, -5px, 0); opacity: .6; }
.row__depth i:nth-child(3) { transform: perspective(500px) rotateY(-22deg) translate3d(16px, -10px, 0); opacity: .38; }

/* --- proof cards and statistics: depth without moving focus targets --- */
.case { --case-rx: 0deg; --case-ry: 0deg; --case-dx: 0px; --case-dy: 0px; perspective: 1200px; }
.case .photo-frame__surface { transform: perspective(1100px) rotateX(var(--case-rx)) rotateY(var(--case-ry)) scale(1.012); }
.case__left, .case__metric { transition: transform .7s var(--ease-out); }
.case.is-depth-active .case__left { transform: translate3d(var(--case-copy-x, 0px), var(--case-copy-y, 0px), 0); }
.case.is-depth-active .case__metric { transform: translate3d(var(--case-metric-x, 0px), var(--case-metric-y, 0px), 0); }
.case__arrow { display: inline-block; transition: transform .55s var(--ease-out); }
.case:hover .case__arrow { transform: translateX(7px); }
.stat { --stat-rx: 0deg; --stat-ry: 0deg; perspective: 900px; }
.stat__depth { position: relative; min-height: 100%; transform-style: preserve-3d; transform: rotateX(var(--stat-rx)) rotateY(var(--stat-ry)); transition: transform .65s var(--ease-out); }
.stat.is-depth-active .stat__depth { transition-duration: .12s; }
.stat__depth::before { content: attr(data-ghost); position: absolute; z-index: -1; left: 5px; top: -12px; font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 6.6vw, 6.4rem); line-height: .88; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(232,53,62,.2); transform: translate3d(var(--stat-ghost-x, 10px), var(--stat-ghost-y, -7px), -36px); opacity: .7; transition: transform .7s var(--ease-out), opacity .5s; }
.stat:hover .stat__depth::before { transform: translate3d(18px, -12px, -36px); opacity: 1; }

/* --- facility cards and intake console --- */
.loc { --card-rx: 0deg; --card-ry: 0deg; --card-px: 50%; --card-py: 50%; perspective: 1000px; }
.loc__depth { position: relative; height: 100%; transform-style: preserve-3d; backface-visibility: hidden; transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)); transition: transform .65s var(--ease-out); }
.loc.is-depth-active .loc__depth { transition-duration: .12s; }
.loc__depth::before, .form__console::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .72; background: radial-gradient(380px circle at var(--card-px, 50%) var(--card-py, 50%), rgba(232,53,62,.14), transparent 66%); }
.loc__depth > *, .form__console > * { position: relative; z-index: 1; }
.form__console {
  --card-rx: 0deg; --card-ry: -1.2deg; --card-px: 80%; --card-py: 15%;
  position: relative; padding: clamp(24px, 3.6vw, 42px); border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.025); box-shadow: 0 34px 90px -44px rgba(0,0,0,.88);
  transform-style: preserve-3d; backface-visibility: hidden; transform: rotateX(var(--card-rx)) rotateY(var(--card-ry));
  transition: transform .72s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.form--console.is-depth-active .form__console { transition-duration: .12s; }
.form--console:focus-within .form__console { --card-rx: 0deg !important; --card-ry: 0deg !important; border-color: rgba(232,53,62,.58); box-shadow: 0 38px 100px -46px rgba(232,53,62,.42); }
.form__console::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .65; animation: consolescan 4.6s var(--ease) 1.3s 1 both; }
@keyframes consolescan { 0% { top: 0; opacity: 0; } 10% { opacity: .8; } 88% { opacity: .55; } 100% { top: 100%; opacity: 0; } }
.form__consolehead { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 15px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--display); font-weight: 700; font-size: 8px; letter-spacing: .17em; color: rgba(255,255,255,.5); }
.form__consolehead span:first-child { color: rgba(255,255,255,.82); }
.form--console .field { transition: transform .4s var(--ease-out); }
.form--console .field:focus-within { transform: translateX(4px); }

/* --- final QCI payoff --- */
.footer__mark { --footer-fill: 0%; transform-origin: 50% 100%; will-change: transform; background: linear-gradient(to top, rgba(232,53,62,.2) 0 var(--footer-fill), transparent var(--footer-fill) 100%); -webkit-background-clip: text; background-clip: text; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--paper); color: var(--ink-60); padding-top: clamp(64px, 9vh, 110px); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 44px; padding-bottom: 60px; }
.footer__brand .brand { margin-bottom: 20px; }
.footer .brand__abbr { color: var(--ink); }
.footer .brand__full { color: var(--ink-40); }
.footer__tag { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); max-width: 24ch; margin: 0; }
.footer__values { margin: 14px 0 0; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-40); }
.footer__col h4 { font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin: 0 0 18px; }
.footer__col a { display: block; padding: 6px 0; font-size: .95rem; color: var(--ink-60); transition: color .25s, transform .3s var(--ease-out); }
.footer__col a:hover { color: var(--ink); transform: translateX(4px); }
.footer__cred { margin: 8px 0 0; font-size: .85rem; color: var(--ink-40); }
.footer__mark {
  font-family: var(--display); font-weight: 900; text-align: center; line-height: .92;
  font-size: clamp(9rem, 26vw, 26rem); letter-spacing: -.04em; user-select: none;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2, #d6d3c8);
}
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0 26px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-40); position: relative; background: var(--paper); }
.footer__bar p { margin: 0; }

/* ============================================================
   REVEALS
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="row"] { transform: translateY(60px); }
/* eyebrow rules draw themselves in as their section reveals */
[data-reveal] .eyebrow::before { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease-out) .25s; }
[data-reveal].in .eyebrow::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader { display: none; }
  [data-reveal], .hline__in, .hero__lede, .hero__cta { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reveal] .eyebrow::before { transform: none !important; transition: none !important; }
  .coverage .loc::after { animation: none !important; }
  .coverage .loc, .coverage .loc:hover { transform: none; }
  body.is-loaded .hero__title .redline::after, .hero__title .redline::after { transform: scaleX(1); transition: none; }
  .manifesto { min-height: auto; }
  .manifesto__text .w, .statement__q .w { opacity: 1 !important; }
  .process { height: auto; }
  .process__sticky { position: static; height: auto; }
  .process__track { flex-wrap: wrap; width: auto; }
  /* coverage stage unpins; the canvas renders one static finished frame */
  .coverage--pin { height: auto; }
  .coverage__sticky { position: static; height: min(88vh, 720px); }
  /* 3D story falls back to the card layout under reduced motion */
  .process--3d .process__sticky { display: flex; }
  .process--3d .process__track { display: flex; }
  .process--3d .process__stage, .process--3d .process__copy, .process--3d .process__rail { display: none; }
  .process--3d .process__head { position: static; pointer-events: auto; }
  .ticker__track { animation: none !important; }
  .industry-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .industry-card__surface { transform: none !important; transition: none !important; }
  .industry-card__face--back { display: none !important; }
  .industry-scan { display: none !important; }
}

/* ============================================================
   SUBPAGE LAYER: components shared by the subpages.
   Same tokens, same voice: dark cinematic banners, editorial light body.
   ============================================================ */

/* ---------- photography ----------
   Feature figures sit on the content grid (never full-bleed) in a short
   cinematic crop, with red corner brackets — the same machine-vision motif
   as the 3D process story: everything on this site has been inspected. */
.pfeature-row { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); margin-block: calc(clamp(90px, 14vh, 200px) * -0.4) 0; position: relative; z-index: 1; }
.pfeature { margin: 0; }
.photo-frame {
  --corner-size: 26px; --corner-offset: -9px;
  position: relative;
}
.photo-frame::before, .photo-frame::after {
  content: ""; position: absolute; z-index: 3;
  width: var(--corner-size); height: var(--corner-size); pointer-events: none;
}
.photo-frame::before {
  top: var(--corner-offset); left: var(--corner-offset);
  border-top: 2px solid var(--red); border-left: 2px solid var(--red);
}
.photo-frame::after {
  right: var(--corner-offset); bottom: var(--corner-offset);
  border-bottom: 2px solid var(--red); border-right: 2px solid var(--red);
}
.case__media.photo-frame { --corner-size: 20px; --corner-offset: -7px; }
.pfeature__frame { position: relative; }
.pfeature__frame img { display: block; width: 100%; aspect-ratio: 21 / 9; height: auto; object-fit: cover; filter: saturate(.84) contrast(1.04); }
.pfeature figcaption { font-size: 12px; color: var(--ink-40); padding-top: 18px; letter-spacing: .06em; }
/* side variant: taller crop, sits beside copy in a split header */
.probsplit { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(28px, 4vw, 72px); align-items: center; margin-bottom: clamp(48px, 8vh, 100px); }
.probsplit .shead { margin-bottom: 0; }
.pfeature--side .pfeature__frame img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .probsplit { grid-template-columns: 1fr; gap: 38px; }
}
.pfeature figcaption::before, .pfig figcaption::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--red); margin-right: 12px; vertical-align: middle; }
.pfig { margin: clamp(36px, 6vh, 56px) 0 0; }
.pfig img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; filter: saturate(.84) contrast(1.04); }
.pfig figcaption { font-size: 12px; color: var(--ink-40); padding-top: 12px; letter-spacing: .06em; }
.pgrid { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: clamp(36px, 6vh, 56px); }
.pgrid .pfig { margin: 0; }
.pgrid .photo-frame { --corner-size: 20px; --corner-offset: -7px; }
.pgrid--2 { grid-template-columns: 1fr 1fr; }
.pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.pgrid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) {
  .pgrid--3, .pgrid--5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pgrid--2, .pgrid--3 { grid-template-columns: 1fr; }
  .pgrid--5 { grid-template-columns: 1fr 1fr; }
  .pband img { height: clamp(260px, 42vh, 380px); }
}

/* ---------- nav active state ---------- */
.nav__links a.is-active { color: #fff; }
.nav__links a.is-active::after { width: 100%; background: var(--red); }
.nav.is-stuck .nav__links a.is-active, body.light-nav .nav__links a.is-active { color: var(--ink); }
.nav__mobile a.is-active { color: var(--red); }

/* ---------- page hero (compact dark banner) ---------- */
.phero {
  position: relative; background: var(--noir); color: #fff; overflow: hidden;
  padding: clamp(150px, 22vh, 240px) 0 clamp(56px, 9vh, 110px);
}
.phero__silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .6; }
.phero__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 120%, rgba(10,10,11,0) 30%, rgba(10,10,11,.5) 100%),
  linear-gradient(180deg, rgba(10,10,11,.55), transparent 40%, transparent 70%, rgba(10,10,11,.8)); }
.phero__inner { position: relative; z-index: 2; display: grid; gap: clamp(22px, 3.5vh, 34px); }
.phero__crumbs { margin: 0; font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.phero__crumbs a { transition: color .25s; }
.phero__crumbs a:hover { color: #fff; }
.phero__crumbs i { font-style: normal; color: var(--red); margin-inline: 8px; }
.phero__crumbs span { color: rgba(255,255,255,.75); }
.phero__title { font-size: clamp(2.6rem, 7.4vw, 6.6rem); font-weight: 900; letter-spacing: -.045em; line-height: .97; color: #fff; max-width: 16ch; }
.phero__title .serif { color: var(--red); font-size: 1.03em; letter-spacing: -.02em; padding-right: .04em; }
.phero__lede { margin: 0; max-width: 58ch; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.65; color: rgba(255,255,255,.72); }

/* ---------- editorial prose (articles, rich pages) ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.35em; }
.prose p { margin: 0; font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.75; color: var(--ink-60); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--red-deep); border-bottom: 1px solid rgba(194,24,32,.3); transition: border-color .25s; }
.prose a:hover { border-bottom-color: var(--red-deep); }
.prose h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -.035em; line-height: 1.05; margin-top: 2em; }
.prose h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -.03em; line-height: 1.1; margin-top: 1.8em; }
.prose h2 .serif, .prose h3 .serif { color: var(--red-deep); }
.prose ul, .prose ol { margin: 1.35em 0 0; padding: 0 0 0 1.5em; display: grid; gap: .6em; color: var(--ink-60); font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.65; }
.prose li::marker { color: var(--red-deep); font-weight: 700; }
.prose blockquote { margin: 2em 0 0; padding: 0 0 0 26px; border-left: 2px solid var(--red); font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.4; color: var(--ink); }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: clamp(32px, 5vh, 54px); font-family: var(--display); font-weight: 700; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-40); }
.article-meta .accent { color: var(--red-deep); }

/* ---------- big statement quote (mission) ---------- */
.bigquote { max-width: 26ch; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; font-size: clamp(1.9rem, 4.6vw, 3.9rem); color: var(--ink); margin: 0; }
.bigquote .serif { color: var(--red-deep); font-size: 1.04em; }
.bigquote-by { margin: 34px 0 0; font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-40); }
.bigquote-by strong { display: block; font-size: 1.05rem; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin-bottom: 4px; }

/* ---------- case study entries (problem → fix) ---------- */
.cs__list { display: grid; gap: 0; }
.cs { padding: clamp(36px, 6vh, 64px) 0; border-top: 1px solid var(--line-2, #d6d3c8); }
.cs:last-child { border-bottom: 1px solid var(--line-2, #d6d3c8); }
.cs__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: baseline; margin-bottom: clamp(20px, 3.5vh, 34px); }
.cs__head h3 { font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -.03em; line-height: 1.05; margin-top: 12px; }
.cs__head .case__tag { grid-column: 1 / -1; }
.cs__metric { font-size: clamp(1.1rem, 1.9vw, 1.7rem); }
.cs__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.5vw, 64px); }
.cs__cols h4 { font-family: var(--display); font-weight: 700; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--red-deep); margin-bottom: 12px; }
.cs__cols h4 + p { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--ink-60); }

/* ---------- service capability chips ---------- */
.chips { border-top: 1px solid var(--line); padding-top: clamp(30px, 5vh, 48px); }
.chips__title { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.03em; margin-bottom: clamp(22px, 4vh, 36px); }
.chips__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chips__list li {
  font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 16px 18px; position: relative; padding-left: 38px;
}
.chips__list li::before { content: "✦"; position: absolute; left: 16px; top: 17px; color: var(--red-deep); font-size: .68rem; }

/* ---------- two-up feature / value cards ---------- */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 32px); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.kcard { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: clamp(26px, 3vw, 44px); }
.kcard--dark { background: var(--noir); border-color: transparent; color: #fff; }
.kcard__n { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 4.5vw, 4rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(194,24,32,.55); letter-spacing: -.05em; margin-bottom: clamp(20px, 3vh, 34px); }
.kcard--dark .kcard__n { -webkit-text-stroke-color: rgba(232,53,62,.6); }
.kcard h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.03em; margin-bottom: 12px; }
.kcard h3::after { content: ""; display: block; width: 42px; height: 2px; background: var(--red-deep); margin-top: 14px; }
.kcard--dark h3 { color: #fff; }
.kcard--dark h3::after { background: var(--red); }
.kcard p { margin: 12px 0 0; font-size: .96rem; line-height: 1.65; color: var(--ink-60); }
.kcard--dark p { color: rgba(255,255,255,.66); }
.kcard ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; }
.kcard li { padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line); position: relative; font-size: .93rem; color: var(--ink-60); }
.kcard--dark li { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.kcard li:first-child { border-top: 1px solid var(--line); }
.kcard--dark li:first-child { border-top-color: rgba(255,255,255,.12); }
.kcard li::before { content: "✦"; position: absolute; left: 0; top: 12px; color: var(--red-deep); font-size: .62rem; }
.kcard--dark li::before { color: var(--red); }

/* ---------- facility / contact cards ---------- */
.loc { border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.loc__head { background: var(--noir); color: #fff; padding: clamp(24px, 3vw, 38px); display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.loc__head h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.03em; color: #fff; }
.loc__head h3 em { font-style: normal; color: var(--red); }
.loc__coast { font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.loc__body { padding: clamp(24px, 3vw, 38px); display: grid; gap: 20px; }
.loc__addr { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.5; font-style: normal; }
.loc__addr small { display: block; font-family: var(--body); font-weight: 400; font-size: .88rem; color: var(--ink-60); margin-top: 4px; }
.loc__rows { display: grid; gap: 0; }
.loc__row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.loc__row dt { color: var(--ink-40); font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; padding-top: 3px; }
.loc__row dd { margin: 0; color: var(--ink); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.loc__row dd a { color: var(--red-deep); }
.loc__row dd a:hover { text-decoration: underline; }
.loc__note { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink-60); }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.person { border-top: 2px solid var(--noir); padding-top: 20px; }
.person h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.person p { margin: 6px 0 0; font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-40); }
.person a { display: inline-block; margin-top: 14px; font-size: .92rem; color: var(--red-deep); border-bottom: 1px solid rgba(194,24,32,.3); }
.person a:hover { border-bottom-color: var(--red-deep); }

/* ---------- CTA band variant (no form) ---------- */
.cta__band { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: clamp(30px, 5vw, 90px); align-items: center; }
.cta__band-actions { display: grid; gap: 14px; justify-items: stretch; }
.cta--band .cta__title { margin-top: 26px; font-size: clamp(2.2rem, 4.8vw, 4.2rem); }

/* ---------- blog cards + archive ---------- */
.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.bcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: clamp(24px, 2.6vw, 38px); transition: transform .45s var(--ease-out), box-shadow .45s; }
.bcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(23,20,21,.25); }
.bcard__tag { font-family: var(--display); font-weight: 700; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--red-deep); }
.bcard h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.03em; line-height: 1.12; margin: 16px 0 12px; }
.bcard p { margin: 0 0 22px; font-size: .93rem; line-height: 1.65; color: var(--ink-60); }
.bcard__more { margin-top: auto; font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--ink); }
.bcard__more i { font-style: normal; color: var(--red); margin-left: 8px; transition: margin .3s var(--ease-out); }
.bcard:hover .bcard__more i { margin-left: 14px; }
.arch { border-top: 1px solid var(--line); }
.arch a, .arch__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px 28px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background .3s; }
.arch a:hover { background: rgba(232,53,62,.04); }
.arch time { font-family: var(--display); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); font-variant-numeric: tabular-nums; }
.arch strong { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; color: var(--ink); }
.arch em { font-style: normal; font-family: var(--display); font-weight: 600; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-deep); }

/* ---------- sitemap ---------- */
.smap { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.smap h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--noir); }
.smap a { display: block; padding: 8px 0; font-size: .95rem; color: var(--ink-60); border-bottom: 1px solid var(--line); transition: color .25s, padding-left .3s var(--ease-out); }
.smap a:hover { color: var(--red-deep); padding-left: 6px; }
/* Site map: a pages tree, every post, the categories */
.sitemap { display: grid; gap: clamp(36px, 6vh, 64px); }
.sitemap__group h2 { font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--noir); }
.sitemap ul, .sitemap ol { list-style: none; margin: 0; padding: 0; }
.sitemap li { border-bottom: 1px solid var(--line); }
.sitemap li li { border-bottom: 0; }
.sitemap a { display: block; padding: 8px 0; font-size: .95rem; color: var(--ink-60); transition: color .25s, padding-left .3s var(--ease-out); }
.sitemap a:hover { color: var(--red-deep); padding-left: 6px; }
.sitemap__group > ul > li > a { font-weight: 600; color: var(--noir); }
.sitemap__group ul ul { margin: 0 0 10px clamp(14px, 2.5vw, 26px); padding-left: clamp(14px, 2.5vw, 26px); border-left: 1px solid var(--line); }
.sitemap__group ul ul ul { columns: 2; column-gap: clamp(20px, 3vw, 40px); border-left: 0; padding-left: 0; }
.sitemap__group ul ul ul li { break-inside: avoid; }
.sitemap__posts li { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; align-items: baseline; }
.sitemap__posts time { font-family: var(--display); font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-40); }
.sitemap__cats { display: flex; flex-wrap: wrap; gap: 10px; }
.sitemap__cats li { border: 0; }
.sitemap__cats a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
.sitemap__cats a:hover { padding-left: 14px; border-color: var(--red-deep); }
@media (max-width: 640px) {
  .sitemap__group ul ul ul { columns: 1; }
  .sitemap__posts li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- light form (project analysis) ---------- */
.form--light .field label { color: var(--ink-40); }
.form--light .field input, .form--light .field textarea, .form--light .field select {
  color: var(--ink); border-bottom-color: var(--line-2, #d6d3c8);
  font-family: var(--body); font-size: 1.02rem; background: transparent;
  border-top: 0; border-left: 0; border-right: 0; border-radius: 0; padding: 10px 2px 14px;
}
.form--light .field input::placeholder, .form--light .field textarea::placeholder { color: var(--ink-40); opacity: .6; }
.form--light .field input:focus, .form--light .field textarea:focus, .form--light .field select:focus { border-bottom-color: var(--red-deep); }
.form--light .form__note { color: var(--red-deep); }

/* ---------- generic light section tint ---------- */
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--noir-2); color: #fff; }

/* ---------- coverage stage (COVERAGE module in script.js) ----------
   Full-bleed noir scroll story, same stagecraft as the process section:
   the US outline sketches itself in, facilities pin, ports connect. */
.coverage {
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(232,53,62,.08), transparent 55%),
    var(--noir);
  color: #fff; position: relative;
}
.coverage--pin { height: 280vh; padding-block: 0; }
.coverage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.coverage__stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coverage__head { position: absolute; top: clamp(24px, 5vh, 56px); left: 0; right: 0; z-index: 4; pointer-events: none; }
.coverage__head a { pointer-events: auto; }
.coverage__title { font-size: clamp(1.6rem, 3.2vw, 2.7rem); letter-spacing: -.04em; color: #fff; margin-top: 14px; }
.coverage__title .serif { color: var(--red); font-size: 1.06em; }
.coverage__sub { margin-top: 12px; max-width: 52ch; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.65; }
.coverage__sub a { color: #fff; }
.coverage__foot {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(18px, 4vh, 40px); z-index: 4; margin: 0; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: .72rem;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.coverage__legend { display: none; }
/* facility cards band: continues the dark stage below the map — white
   card interiors outlined on noir for contrast. Its top glow mirrors the
   map section's bottom glow so the two read as one continuous stage. */
.coverage__cardband {
  padding: clamp(16px, 3vh, 40px) 0 clamp(80px, 12vh, 140px);
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(232,53,62,.08), transparent 55%),
    radial-gradient(120% 70% at 50% 115%, rgba(232,53,62,.05), transparent 60%),
    var(--noir);
}
.coverage .loc {
  border: 1px solid rgba(255,255,255,.18); position: relative;
  transition: transform .55s var(--ease-out), border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.coverage .loc:hover {
  transform: translateY(-6px);
  border-color: rgba(232,53,62,.6);
  box-shadow: 0 30px 70px -34px rgba(232,53,62,.4);
}
/* inspection sweep: a red scan line passes down each card as it reveals */
.coverage .loc::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, var(--red), transparent 96%);
  opacity: 0; pointer-events: none;
}
.coverage .loc.in::after { animation: locscan 1.5s var(--ease) .55s; }
.coverage .cards2 .loc:nth-child(2).in::after { animation-delay: 1.05s; }
@keyframes locscan {
  0% { opacity: 0; top: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; top: calc(100% - 2px); }
}
/* unpinned variant: the story plays as the band crosses the viewport */
.coverage--band { height: min(92vh, 760px); }
@media (max-width: 860px) {
  /* portrait: the landscape map can't fill a tall viewport — compose the
     stage as a compact in-flow stack instead of a full-height overlay */
  .coverage--pin { height: 230vh; }
  .coverage__sticky { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .coverage__head { position: static; order: -1; padding-top: 0; }
  .coverage__stage { position: static; height: 32vh; height: 32svh; min-height: 240px; margin-top: 14px; }
  .coverage__foot { position: static; margin-top: 8px; padding-bottom: 30px; }
  .coverage__sub { font-size: 15px; max-width: 44ch; }
  .coverage--band { height: auto; padding-block: 8px 4px; }
  .coverage--band .coverage__stage { height: 38vh; height: 38svh; min-height: 260px; }
}
@media (max-width: 560px) {
  .coverage__stage { height: 29vh; height: 29svh; min-height: 215px; }
  .coverage__legend {
    display: grid; gap: 6px; width: auto; margin: 12px var(--gutter) 0; position: relative; z-index: 5;
  }
  .coverage__legend p {
    margin: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center;
    padding: 7px 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(11,10,10,.88);
    font-family: var(--display); font-size: 12px; line-height: 1.35; letter-spacing: .02em; color: rgba(255,255,255,.78);
  }
  .coverage__legend strong { color: var(--red); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
  .coverage__foot { padding-bottom: 18px; font-size: .62rem; letter-spacing: .18em; }
}

/* ---------- memberships strip ---------- */
.member { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.member div { border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; font-family: var(--display); font-weight: 700; font-size: .84rem; letter-spacing: .02em; color: var(--ink-60); background: #fff; line-height: 1.4; }
.member div span { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--red-deep); margin-bottom: 8px; }

/* ---------- subpage responsive ---------- */
@media (max-width: 1080px) {
  .chips__list { grid-template-columns: repeat(2, 1fr); }
  .bcards, .cards3, .people { grid-template-columns: 1fr 1fr; }
  .member { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .cards2, .cs__cols { grid-template-columns: 1fr; }
  .cs__head { grid-template-columns: 1fr; }
  .cta__band { grid-template-columns: 1fr; }
  .smap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .chips__list, .bcards, .cards3, .people, .smap, .member { grid-template-columns: 1fr; }
  .arch a, .arch__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  /* the problem descriptions carry real copy now — stack them under the
     title instead of hiding them */
  .row { grid-template-columns: 52px 1fr 44px; grid-template-areas: "n title arrow" ". desc desc"; row-gap: 12px; }
  .row__n { grid-area: n; }
  .row__title { grid-area: title; }
  .row__desc { grid-area: desc; max-width: 60ch; }
  .row__arrow { grid-area: arrow; }
  .statement__cols { grid-template-columns: 1fr; }
  .case { grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); }
  .case__metric { grid-column: 2; }
  .hero__foot { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
/* The header row needs about 1000px for the logo, the five links and the
   button. Up to 1120px it tightens so the logo keeps its proportions and
   the button stays on one line; below 1000px the menu button takes over. */
@media (max-width: 1120px) {
  .nav__inner { gap: 24px; }
  .nav__links { gap: 20px; }
  .nav__links a { font-size: .82rem; }
  .nav__cta { padding: 12px 18px; }
}
@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}
@media (max-width: 860px) {
  .cta__grid { grid-template-columns: 1fr; }
  .process { height: auto; }
  .process__sticky { position: static; height: auto; padding-block: clamp(80px, 12vh, 140px); }
  .process__track { flex-direction: column; width: auto; padding-inline: var(--gutter); transform: none !important; }
  .panel { width: 100%; }
  .process__bar { display: none; }
  /* 3D story, portrait cut: full-bleed stage, copy docked at the bottom
     over a scrim, shorter scroll (thumb flicks cover more ground).
     100svh keeps the stage steady while the URL bar collapses. */
  .process--3d { height: 500vh; }
  .process--3d .process__sticky { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; padding-block: 0; }
  .process--3d .process__sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(11,10,10,.92) 20%, rgba(11,10,10,0)); }
  .process--3d .process__title { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
  .process--3d .process__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: clamp(76px, 12vh, 130px); transform: none; }
  .process--3d .pstep { top: auto; bottom: 0; } /* grow upward from the anchor, not into the rail */
  .process--3d .pstep h3 { font-size: 1.7rem; margin: 6px 0 8px; }
  .process--3d .pstep p { font-size: 15px; line-height: 1.52; }
  .process--3d .process__bar { display: block; margin-bottom: 12px; }
  .process--3d .process__rail { bottom: 18px; }
  .process--3d .process__st { font-size: 10px; letter-spacing: .08em; }
  .process--3d .process__st sup { display: none; }
  .case { grid-template-columns: 1fr; gap: 20px; }
  .case__media { aspect-ratio: 16 / 9; }
  .case__metric { grid-column: auto; white-space: normal; }
  /* phones: the pinned word-illumination earns far less scroll room than on
     desktop — shrink the dead travel after the sentence fully lights */
  .manifesto { min-height: 145vh; }
  .manifesto__sticky { gap: 28px; }
}
@media (hover: none) {
  .row__arrow { transform: none; opacity: 1; }
}
@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .form__console { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 112px 0 76px; }
  .hero__kicker { gap: 10px; margin-bottom: 22px; font-size: .64rem; letter-spacing: .18em; line-height: 1.35; }
  .kicker__rule { width: 28px; flex: none; }
  .hero__title { font-size: clamp(2.55rem, 12vw, 3.25rem); line-height: .98; }
  .hero__foot { margin-top: 28px; gap: 20px; }
  .hero__lede { font-size: .94rem; line-height: 1.55; }
  .hero__cta { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero__cta .btn { width: 100%; padding: 17px 22px; }
  .hero__ticker { padding: 12px 0; }
  .row {
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    grid-template-areas: "n title arrow" "desc desc desc";
    column-gap: 12px; row-gap: 14px; padding-block: 22px;
  }
  .row__desc { max-width: none; font-size: .9rem; line-height: 1.5; }
}

/* motion-lab responsive composition */
@media (max-width: 1080px) {
  .hero__scan { width: 82vw; right: -15%; opacity: .68; }
  .statement__seal { right: -20vw; width: 78vw; opacity: .16; }
  .row__depth { display: none; }
}
@media (max-width: 860px) {
  .hero__scan { top: 12%; right: -28%; width: 112vw; height: 70%; opacity: .46; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%); mask-image: linear-gradient(90deg, transparent 0%, #000 46%); }
  .statement__seal { right: -46vw; width: 118vw; opacity: .12; }
  .form__console { --card-ry: 0deg; }
}
@media (max-width: 560px) {
  .hero__scan { right: -44%; width: 142vw; opacity: .38; }
  .form__console { padding: 24px 20px; }
  .form__consolehead { display: grid; gap: 7px; }
  .row:hover .row__n, .row:hover .row__title, .row:hover .row__desc, .row:hover .row__arrow,
  .case.is-depth-active .case__left, .case.is-depth-active .case__metric { transform: none; }
}
@media (max-height: 600px) {
  .hero__scan { top: 12%; height: 70%; opacity: .5; }
  .form__consolehead { display: none; }
}

.loc.has-depth { overflow: visible; }
.loc.has-depth .loc__depth { overflow: hidden; border-radius: inherit; }
html.motion-lite .photo-scan, html.motion-lite .row__depth, html.motion-lite .form__console::after { display: none !important; }
html.motion-lite .photo-frame__surface, html.motion-lite .stat__depth,
html.motion-lite .loc__depth, html.motion-lite .form__console, html.motion-lite .footer__mark { transform: none !important; transition: none !important; }
html.motion-lite .statement__seal { transform: translateY(-50%) rotateX(0) rotateZ(0) !important; opacity: .12; }

@media (prefers-reduced-motion: reduce) {
  .hero__scan { opacity: .38; }
  .photo-scan { display: none !important; }
  .statement__seal { transform: translateY(-50%) rotateX(0) rotateZ(0) !important; opacity: .12; }
  .photo-frame__surface, .case .photo-frame__surface, .stat__depth, .loc__depth, .form__console,
  .case__left, .case__metric, .footer__mark,
  .row__n, .row__title, .row__desc, .row__arrow { transform: none !important; transition: none !important; }
  .depth-photo:not(.case__media) .photo-frame__surface > img { transform: none !important; transition: none !important; }
  .case__media img { transform: none !important; }
  .row::after, .row__depth, .form__console::after { display: none !important; }
  .photo-frame::before, .photo-frame::after { transition: none !important; filter: none !important; }
}

/* ============================================================
   MOBILE HARDENING — narrow reflow, short landscape, low-power motion
   ============================================================ */
@media (max-width: 380px) {
  .nav__inner { gap: 16px; }
  .brand__full { display: none; }
}

/* Short, coarse-pointer viewports are usually phones in landscape. The
   cinematic stories become in-flow cards/static art so nothing is clipped
   inside a 100svh stage and the page needs far less GPU work. */
@media (max-height: 600px) and (max-width: 950px) {
  .nav__mobile { padding: 76px var(--gutter) 12px; gap: 0; }
  .nav__mobile a { font-size: clamp(1.2rem, 3.8vw, 1.5rem); line-height: 1.05; padding: 5px 0; }
  .nav__mobile a.nav__mobile-sub { font-size: .98rem; padding: 4px 0 4px 22px; }
  .brand__logo { height: 41px; }
  .nav__mobile .btn { margin-top: 10px; padding: 11px 18px; font-size: .78rem; line-height: 1.2; }

  .hero { min-height: auto; padding: 96px 0 70px; }
  .hero__kicker { margin-bottom: 18px; }
  .hero__title { font-size: clamp(2.35rem, 7.2vw, 3.4rem); }
  .hero__foot { margin-top: 24px; gap: 16px; }
  .hero__lede { font-size: .9rem; line-height: 1.5; }
  .hero__cta .btn { padding-block: 14px; }

  .process--3d { height: auto; }
  .process--3d .process__sticky {
    position: static; height: auto; display: flex; padding-block: 72px;
  }
  .process--3d .process__head { position: static; pointer-events: auto; }
  .process--3d .process__track {
    display: flex; flex-direction: column; flex-wrap: nowrap; width: auto;
    padding-inline: var(--gutter); transform: none !important;
  }
  .process--3d .panel { width: 100%; }
  .process--3d .process__stage,
  .process--3d .process__copy,
  .process--3d .process__rail,
  .process--3d .process__sticky::after { display: none; }

  .coverage--pin { height: auto; }
  .coverage__sticky {
    position: relative; height: auto; min-height: 0; overflow: visible;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding-block: 72px 28px;
  }
  .coverage__head { position: static; order: -1; }
  .coverage__title { margin-top: 8px; font-size: clamp(1.35rem, 4vw, 1.75rem); }
  .coverage__sub { font-size: 14px; line-height: 1.5; }
  .coverage__stage { position: static; height: clamp(260px, 72svh, 340px); min-height: 0; margin-top: 8px; }
  .coverage__legend {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    margin: 8px var(--gutter) 0; position: relative; z-index: 5;
  }
  .coverage__legend p {
    margin: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 6px 9px; border: 1px solid rgba(255,255,255,.15); background: rgba(11,10,10,.88);
    font-family: var(--display); font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.78);
  }
  .coverage__legend strong { color: var(--red); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
  .coverage__foot { position: static; margin-top: 12px; padding-bottom: 0; }
}

/* This class covers both a true reduced-motion preference and Save-Data.
   It sits last so mobile media queries cannot accidentally repin the scenes. */
html.motion-lite { scroll-behavior: auto; }
html.motion-lite .loader { display: none; }
html.motion-lite [data-reveal],
html.motion-lite .hline__in,
html.motion-lite .hero__lede,
html.motion-lite .hero__cta { opacity: 1 !important; transform: none !important; transition: none !important; }
html.motion-lite .nav,
html.motion-lite .nav__mobile,
html.motion-lite .nav__toggle span,
html.motion-lite .btn,
html.motion-lite .btn::after,
html.motion-lite .btn__label { transition: none !important; }
html.motion-lite .manifesto { min-height: auto; }
html.motion-lite .manifesto__text .w,
html.motion-lite .statement__q .w { opacity: 1 !important; }
html.motion-lite .process,
html.motion-lite .process--3d { height: auto; }
html.motion-lite .process__sticky,
html.motion-lite .process--3d .process__sticky {
  position: static; height: auto; display: flex; padding-block: clamp(80px, 12vh, 140px);
}
html.motion-lite .process--3d .process__head { position: static; pointer-events: auto; }
html.motion-lite .process--3d .process__track {
  display: flex; flex-wrap: wrap; width: auto; transform: none !important;
}
html.motion-lite .process--3d .process__stage,
html.motion-lite .process--3d .process__copy,
html.motion-lite .process--3d .process__rail,
html.motion-lite .process--3d .process__sticky::after { display: none; }
html.motion-lite .coverage--pin { height: auto; }
html.motion-lite .coverage__sticky { position: relative; height: min(88vh, 720px); }
html.motion-lite .ticker__track,
html.motion-lite .industry-card { opacity: 1 !important; transform: none !important; transition: none !important; }
html.motion-lite .industry-card__surface { transform: none !important; transition: none !important; }
html.motion-lite .industry-card__face--back { display: none !important; }
html.motion-lite .industry-scan { display: none !important; }

/* The keyboard and touch interactions remain available in low-motion mode,
   but flip instantly instead of animating. */
html.motion-lite .industry-card.is-interactive .industry-card__face--back { display: grid !important; }
html.motion-lite .industry-card.is-interactive.is-flipped .industry-card__surface { transform: rotateY(180deg) !important; }

@media (max-width: 860px) {
  html.motion-lite .process--3d .process__track { flex-direction: column; flex-wrap: nowrap; }
  html.motion-lite .process--3d .panel { width: 100%; }
  html.motion-lite .coverage__sticky {
    height: auto; min-height: 0; overflow: visible; display: flex;
    flex-direction: column; justify-content: flex-start; padding-block: 72px 28px;
  }
  html.motion-lite .coverage__head { position: static; order: -1; }
  html.motion-lite .coverage__stage { position: static; height: clamp(260px, 44svh, 420px); min-height: 0; }
  html.motion-lite .coverage__foot { position: static; margin-top: 12px; padding-bottom: 0; }
}

/* Rich-text figures (images inside article text):
   content photos keep their own aspect ratio instead of the 16:9 editorial crop. */
/* Pictures inside article text (banners, infographics, product shots):
   their own pixel size up to the column, never scaled up, centred, no frame, no filter. */
.pfig--content img { width: auto; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block; margin-inline: auto; filter: none; }
.pfig--content figcaption { text-align: center; }
.pfig--small { margin-top: clamp(24px, 4vh, 36px); text-align: center; }
.pfig--small .photo-frame { display: inline-block; max-width: 100%; vertical-align: top; }
/* The featured photo above a post: inside the text column, its own proportions, height-capped. */
.pfig--featured { max-width: 72ch; }
.pfig--featured img { width: auto; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block; margin-inline: auto; max-height: min(60vh, 560px); }
/* Page hero with a banner photo behind the title. */
.phero--photo { background-image: var(--phero-photo); background-size: cover; background-position: center; }
.phero--photo .phero__silk { opacity: .3; }
.phero--photo .phero__vignette { background: linear-gradient(180deg, rgba(10,10,11,.84), rgba(10,10,11,.62) 45%, rgba(10,10,11,.9)); }

/* Lead form: the Turnstile check spans the
   form grid as its own row and leaves no gap while the widget is not rendered. */
.form #turnstile { grid-column: 1 / -1; min-height: 65px; }
.form #turnstile:empty { display: none; }

/* Service pages: the banner frame spacing, the text-beside-photo split
   and the numbered detail accordion. */
.qci-acf-banner { margin-bottom: clamp(36px, 6vh, 56px); }
.qci-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 72px); align-items: start; margin-top: clamp(36px, 6vh, 56px); }
.qci-split .pfig { margin: 0; }
.qci-split .prose { max-width: none; }
.qci-acc { border-top: 1px solid var(--line); }
.qci-acc__item { border-bottom: 1px solid var(--line); }
.qci-acc__item summary {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; align-items: center; gap: 18px;
  padding: 24px 0; list-style: none; cursor: pointer;
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15; transition: color .25s;
}
.qci-acc__item summary::-webkit-details-marker { display: none; }
.qci-acc__item summary:hover { color: var(--red-deep); }
.qci-acc__n { color: var(--red-deep); font-size: .78rem; font-weight: 700; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.qci-acc__icon { position: relative; justify-self: end; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 999px; transition: transform .35s var(--ease-out), border-color .25s; }
.qci-acc__icon::before, .qci-acc__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.qci-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qci-acc__item[open] .qci-acc__icon { transform: rotate(45deg); border-color: var(--red-deep); }
.qci-acc__body { max-width: none; padding: 0 0 32px 82px; }
.qci-acc__body > :first-child { margin-top: 0; }

/* Blog pagination (framework.blog_index / category_index). */
/* Blog listings beside the sidebar (recent posts, archives, categories) */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 72px); align-items: start; }
.blog-main { min-width: 0; }
.blog-layout .bcards { grid-template-columns: repeat(2, 1fr); }
.blog-side { display: grid; gap: clamp(28px, 4vh, 40px); }
.blog-side__group h2 { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--noir); }
.blog-side ul { list-style: none; margin: 0; padding: 0; }
.blog-side li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.blog-side a { color: var(--ink-60); transition: color .25s; }
.blog-side a:hover { color: var(--red-deep); }
.blog-side__posts li { flex-direction: column; align-items: flex-start; gap: 4px; }
.blog-side__posts a { color: var(--ink); font-weight: 600; line-height: 1.35; }
.blog-side time, .blog-side__count { font-family: var(--display); font-weight: 600; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; }
@media (max-width: 1080px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-side { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
}
@media (max-width: 700px) {
  .blog-side { grid-template-columns: 1fr; }
  .blog-layout .bcards { grid-template-columns: 1fr; }
}
.pager { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(36px, 6vh, 56px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--ink); }
.pager__link i { font-style: normal; color: var(--red); margin-inline: 8px; transition: margin .3s var(--ease-out); }
.pager__link:hover i { margin-inline: 12px; }
.pager__status { font-weight: 600; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-40); }

@media (max-width: 860px) {
  .qci-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .qci-acc__item summary { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 12px; padding: 18px 0; }
  .qci-acc__body { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qci-acc__icon, .pager__link i { transition: none; }
}

/* ---------- linked chips (sub-service lists, section and related links) ---------- */
.chips__list li a { color: inherit; text-decoration: none; }
.chips__list li a:hover { color: var(--red-deep); text-decoration: underline; }
.chips--links + .chips--links { margin-top: clamp(30px, 5vh, 48px); }

/* ---------- questions and answers ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { padding: clamp(22px, 3vh, 34px) 0; border-bottom: 1px solid var(--line); }
.faq__q { font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: -.02em; margin: 0 0 12px; }
.faq__a { max-width: 70ch; }

/* ---------- Article content formatting ---------- */
/* Paragraph rhythm: `.prose p { margin: 0 }` above out-specifies the sibling
   rule, so paragraphs after headings, lists and figures had no breathing room. */
.prose > * + p, .prose > p + *, .prose > * + ul, .prose > * + ol, .prose > * + figure, .prose > * + blockquote { margin-top: 1.35em; }
.prose > h2 + p, .prose > h3 + p, .prose > h4 + p { margin-top: .9em; }
.prose > * + h2 { margin-top: 2em; }
.prose > * + h3 { margin-top: 1.8em; }
.prose h4 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -.02em; line-height: 1.2; margin-top: 1.6em; }
.prose > * + h4 { margin-top: 1.6em; }
/* Buttons written in the text keep their button colours, not the red link style. */
.prose a.btn { color: var(--fg); border-bottom: 0; margin: 4px 12px 4px 0; vertical-align: middle; }
.prose a.btn:hover { color: var(--ink); }
.prose a.btn--red:hover { color: var(--red); }
/* Article photos keep the editor's framing: no forced 16:9 or 21:9 crop.
   Portrait and square photos sit centred at their own size, height-capped. */
.pfig--natural img, .pfeature__frame--natural img { aspect-ratio: auto; object-fit: contain; }
.pfig--tall { text-align: center; }
.pfig--tall .photo-frame { display: inline-block; max-width: 100%; vertical-align: top; }
.pfig--tall img { width: auto; max-width: 100%; max-height: min(72vh, 640px); margin-inline: auto; }
.prose .pfig--tall img { max-height: min(60vh, 560px); }
.nav__links a { white-space: nowrap; }