/* =====================================================================
   REVEAL PRODUCTIONS - site.css v2 "Backstage, lit."

   Ground truth = the live site's established motif (REVEAL-SPEC.md §5):
   true backstage black, charcoal cards, Barlow Condensed CAPS two-tier
   headlines, the red->magenta beam as theatrical light, red cue-light
   bullets, photography as the only full colour, grain like house dust
   in a followspot. Navy lives only inside the logo artwork.

   Scroll is NATIVE. No smooth-scroll library (Rowan, 21 Jul).
   Page-local <style> for genuine one-offs; second use graduates here.
   ===================================================================== */

:root {
  --stage: #0a0a0b;
  --void: #000000;
  --coal: #161618;
  --coal-2: #1e1e21;
  --red: #D11E3B;
  --magenta: #C0157E;
  --beam: linear-gradient(100deg, #D11E3B, #C0157E);
  /* the logo colours - UI chrome only (buttons, cookie primary, slider knob);
     never light effects: navy's ~8% luminance dies as a screen-blended streak */
  --beam-ui: linear-gradient(100deg, #D11E3B, #1C2864);
  --white: #ffffff;
  --grey: #a7a7ad;
  --grey-2: #6f6f76;
  --line: rgba(255, 255, 255, .08);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --script: 'Great Vibes', cursive;
  --wrap: 1280px;
  --gap: clamp(16px, 2vw, 26px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;
  interpolate-size: allow-keywords;
  /* legacy aliases (v1 pages during restyle) */
  --navy: var(--coal);
  --navy-deep: var(--void);
  --grey-drape: var(--grey);
  --paper: var(--stage);
  --paper-2: var(--coal);
  --ink: var(--white);
  --ink-2: var(--grey);
  --muted: var(--grey-2);
}

/* ─── Reset + base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
/* clip, NOT hidden: hidden creates a scroll container that shadows the html
   scroller and breaks sticky + view() timelines (the 10 Jul TSA scar). */
body {
  overflow-x: clip;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7; /* Hanken's x-height runs taller than Barlow's */
  color: var(--grey);
  background: var(--stage);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; } /* color: buttons don't inherit by default - kept the burger bars black */
strong, b { color: var(--white); font-weight: 600; }
.hl { color: var(--red); font-weight: 600; }
/* Script accent (Great Vibes) - the typographic "one theatrical turn per page".
   Budget: max one per viewport, 2-3 per page. Second-tier headline words and
   wow moments only - never nav, buttons, body copy, spec tables or legal.
   Source text must be typed sentence-case (text-transform:none cannot undo
   source caps). Never inside a [data-reveal] letter-rise heading - the
   shredder reads textContent and wipes child spans. */
.script {
  font-family: var(--script); font-weight: 400; text-transform: none;
  letter-spacing: 0; line-height: 1;
  font-size: 1.45em; /* Great Vibes runs ~30% small on the em square */
  vertical-align: -0.08em; color: var(--red);
}
.script.wht { color: var(--white); }
::selection { background: var(--red); color: var(--white); }

/* House dust in a followspot - fixed grain, screen-blended on black. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Type: two-tier condensed caps ─────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  color: var(--white); line-height: .95; letter-spacing: .01em;
}
.display { font-size: clamp(3.2rem, 8.5vw, 7.8rem); font-weight: 700; letter-spacing: .005em; }
h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: .02em; }
/* the bold CAPS sub-line under a heading (the live site's second tier) */
.h-sub {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: .06em;
  color: var(--white); margin-top: .6em;
}
.eyebrow, .tag {
  font-family: var(--body); font-weight: 600; font-size: .74rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--grey-2);
}
.eyebrow.lit { color: var(--red); }
.lead { font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.65; color: var(--grey); max-width: 62ch; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
section { padding-block: clamp(64px, 10vw, 130px); position: relative; }

/* Surface bands - black by default, alternate with coal/void */
.sec-dark, .sec-coal { background: #101012; }
.sec-deep, .sec-void { background: var(--void); }

/* ─── The beam: light-streak decorations ────────────────────────── */
/* Skewed gradient bars, screen-blended - theatrical light across the dark.
   Position with page-local top/left; they are decoration, aria-hidden. */
.streak {
  position: absolute; pointer-events: none; z-index: 0;
  width: clamp(220px, 30vw, 480px); height: 10px;
  background: var(--beam); filter: blur(18px); opacity: .5;
  transform: rotate(-24deg); mix-blend-mode: screen; border-radius: 999px;
}
.streak.thin { height: 3px; filter: blur(6px); opacity: .7; }
.streak.soft { height: 60px; filter: blur(60px); opacity: .3; }
/* Purple stage wash - Tim's purple (#570068) from the live site, as a glow on
   dark bands. Drop <div class="wash" aria-hidden="true"></div> as the first
   child of a section. One light treatment per band: wash OR streaks, never
   both. Alphas run ~1.8x TSA's orange recipe - purple is far darker. */
.wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 65% 45% at 90% 6%, rgba(87, 0, 104, .32) 0%, transparent 60%),
    radial-gradient(circle 720px at 4% 52%, rgba(87, 0, 104, .36) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 96% 96%, rgba(87, 0, 104, .18) 0%, transparent 60%);
}
/* Scanline texture band (the live hero's streak field) */
.beam-field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  background:
    repeating-linear-gradient(100deg, transparent 0 5px, rgba(209, 30, 59, .05) 5px 6px),
    radial-gradient(60% 90% at 12% 10%, rgba(192, 21, 126, .22), transparent 60%),
    radial-gradient(45% 70% at 88% 85%, rgba(209, 30, 59, .14), transparent 60%);
}
section > .wrap { position: relative; z-index: 1; }

/* ─── Buttons: beam pill + ghost ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: .92rem;
  padding: .9em 1.9em; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent;
  background-origin: border-box; /* transparent border + padding-box origin tiles
     a gradient into the border ring - opposite-colour slivers at the pill caps */
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn .arr { transition: transform .3s var(--ease); font-family: var(--body); }
/* background-origin border-box: the pill has a 1.5px transparent border and
   the default padding-box origin TILES the gradient into the border zone -
   a sliver of the opposite end colour appears at each cap. */
.btn-primary { background: var(--beam-ui); background-origin: border-box; color: var(--white); box-shadow: 0 8px 28px -10px rgba(209, 30, 59, .45); /* resting glow */ }
.btn-line { border-color: rgba(255, 255, 255, .65); background: transparent; color: var(--white); }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 54px -12px rgba(209, 30, 59, .8); }
  .btn-line:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); }
  .btn:hover .arr { transform: translateX(5px); }
}
.btn:active { transform: scale(.97); }

/* ─── Cue-light bullets (the red dot lists) ─────────────────────── */
.cue-list { list-style: none; display: grid; gap: .7em; }
.cue-list li { position: relative; padding-left: 1.5em; }
.cue-list li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red);
  box-shadow: 0 0 10px 1px rgba(209, 30, 59, .8);
}

/* ─── Header: black glass ───────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--red); color: #fff; padding: .6em 1.2em; font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 200; height: var(--header-h);
  color: var(--white); background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.solid {
  background: rgba(10, 10, 11, .82); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.head-row { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); height: 100%; }
.brand img { height: 42px; width: auto; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; align-items: center; }
.nav a {
  text-decoration: none; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .92rem;
  position: relative; padding-block: .4em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--red); transition: right .35s var(--ease);
}
@media (hover: hover) { .nav a:hover::after { right: 0; } }
.nav a[aria-current="page"]::after { right: 0; }
.nav .has-sub { position: relative; }
.nav .sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 260px; padding: 14px 0; list-style: none;
  background: rgba(16, 16, 18, .96); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
}
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav .sub a { display: block; padding: .5em 1.4em; font-weight: 500; font-size: .88rem; letter-spacing: .06em; color: var(--grey); }
.nav .sub a::after { content: none; }
@media (hover: hover) { .nav .sub a:hover { color: var(--white); background: rgba(255, 255, 255, .04); } }
.head-cta { display: none; }
@media (min-width: 1100px) { .head-cta { display: inline-flex; font-size: .8rem; padding: .75em 1.5em; } }

/* Menu button + drawer */
.menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; }
.menu-btn span { width: 24px; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) { .nav { display: none; } .menu-btn { display: flex; margin-left: auto; } }
.scrim { position: fixed; inset: 0; z-index: 210; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 220; width: min(84vw, 380px);
  background: #0e0e10; color: var(--white); padding: calc(var(--header-h) + 12px) 28px 32px;
  border-left: 1px solid var(--line);
  overflow-y: auto; transform: translateX(100%); transition: transform .4s var(--ease);
}
.drawer.is-open { transform: translateX(0); }
.drawer ul { list-style: none; }
.drawer > ul > li { border-bottom: 1px solid var(--line); padding-block: 10px; }
.drawer a { text-decoration: none; display: block; padding: .35em 0; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.drawer a[aria-current="page"] { color: var(--red); }
.drawer ul ul { padding-left: 14px; }
.drawer ul ul a { font-weight: 400; font-size: .92rem; text-transform: none; letter-spacing: 0; color: var(--grey); }
.drawer-cta { margin-top: 22px; justify-content: center; width: 100%; }

/* ─── Reveal on scroll (native scroll, weighted settle) ─────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

/* Letter-rise (hero headlines; site.js shreds [data-reveal] into .word/.ltr) */
.word { display: inline-block; white-space: nowrap; }
.ltr { display: inline-block; opacity: 0; transform: translateY(1.1em); animation: rise .6s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Drape-fall image reveal - cloth, not UI */
.drape-in { opacity: 0; transform: translateY(-18px) scaleY(1.04); transform-origin: top; transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.drape-in.in { opacity: 1; transform: none; }

/* ─── Cards + tiles ─────────────────────────────────────────────── */
.card {
  background: var(--coal); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px); border-color: rgba(209, 30, 59, .45);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(209, 30, 59, .15);
  }
  .card:hover img { transform: scale(1.05); }
}
.card img { transition: transform .8s var(--ease); }
.stat-tile {
  background: var(--coal); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(20px, 3vw, 34px); text-align: center;
}
.stat-tile .num {
  font-family: var(--display); font-weight: 700; color: var(--white);
  font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1;
}
.stat-tile .lbl { font-size: .88rem; color: var(--grey-2); margin-top: .5em; }

/* Overlapping photo collage - lit set pieces */
.collage { position: relative; }
.collage img {
  border-radius: 12px; box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9);
}
.collage .c-back { position: absolute; z-index: 0; opacity: .95; }
.collage .c-front { position: relative; z-index: 1; }

/* ─── Shared components ─────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.05rem; color: var(--white); cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--red); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; max-width: 68ch; color: var(--grey); }

.spec-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.spec-table th { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--white); white-space: nowrap; }
.spec-table td { color: var(--grey); }
.table-scroll { overflow-x: auto; overflow-y: hidden; padding-block: 4px 10px; }

/* In-page anchor pills (product pages, live-site pattern) */
.pill-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding-block: 18px; border-block: 1px solid var(--line); }
.pill-nav a {
  text-decoration: none; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .88rem; color: var(--grey); padding: .3em .2em; position: relative;
}
.pill-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--red); transition: right .3s var(--ease); }
@media (hover: hover) { .pill-nav a:hover { color: var(--white); } .pill-nav a:hover::after { right: 0; } }
/* Sticky chapter bar - wrap a .pill-nav in .anchor-bar and it rides under the
   fixed header. Works because html/body are overflow-x:clip, not hidden;
   z-index sits under the header (200), over content. */
.anchor-bar {
  position: sticky; top: var(--header-h); z-index: 90;
  background: rgba(10, 10, 11, .92); backdrop-filter: blur(12px);
}
.anchor-bar .pill-nav { padding-block: 14px; }

/* ─── Range explorer (.rex-) ────────────────────────────────────────
   Ported from TSA's fabric-range component (app/components/fabric-range),
   re-themed to the backstage-black motif. Left rail of numbered product
   rows, right sticky detail panel that cross-fades on hover/focus/click/
   arrow keys. <=900px: rail + panel hide and site.js builds a single-open
   accordion from the same content. Hooks: #rexList / #rexDetails,
   .rex-item[data-rex] <-> .rex-detail[data-rex-detail]. */
.rex-explorer {
  display: grid; grid-template-columns: clamp(240px, 28vw, 340px) 1fr;
  gap: clamp(28px, 3.2vw, 56px); margin-top: 54px; align-items: start;
}
.rex-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding-right: clamp(12px, 1.2vw, 20px); }
.rex-item {
  display: grid; grid-template-columns: minmax(40px, max-content) 1fr; align-items: start; gap: 12px;
  width: 100%; padding: 13px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative;
  transition: background 240ms var(--ease), padding-left 240ms var(--ease);
}
.rex-item:last-child { border-bottom: none; }
.rex-item:hover, .rex-item.is-active { background: rgba(209, 30, 59, .08); padding-left: 18px; }
.rex-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px;
  background: var(--red); border-radius: 2px; box-shadow: 0 0 10px 1px rgba(209, 30, 59, .8);
}
.rex-item:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.rex-no {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2;
  color: var(--red); text-shadow: 0 0 14px rgba(209, 30, 59, .45); padding-top: 1px;
}
.rex-lines { display: flex; flex-direction: column; min-width: 0; }
.rex-name {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.05rem; line-height: 1.15; color: var(--white); margin-bottom: 2px;
}
.rex-name-arrow {
  color: var(--red); margin-left: 5px; display: inline-block; opacity: 0; transform: translateX(-4px);
  transition: opacity 200ms, transform 220ms var(--ease); font-family: var(--body);
}
.rex-item:hover .rex-name-arrow, .rex-item.is-active .rex-name-arrow { opacity: 1; transform: translateX(0); }
.rex-mini { font-size: .78rem; line-height: 1.35; color: var(--grey-2); }

/* Sticky INVERTED vs TSA: at nine rows the rail is taller than the panel,
   so the panel follows the cursor down the rail, not the other way round. */
.rex-detail-wrap { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; }
.rex-detail { display: none; }
.rex-detail.is-active {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 3vw, 44px);
  align-items: stretch; animation: rexDetailIn 380ms var(--ease);
}
@keyframes rexDetailIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rex-detail-img {
  border-radius: 14px; background-size: cover; background-position: center; background-color: var(--coal);
  border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); min-height: 320px;
}
.rex-detail-text { min-width: 0; }
.rex-detail-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--body); font-weight: 600;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--red); margin-bottom: 14px;
}
.rex-detail-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--red); }
.rex-detail-title { font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin-bottom: 12px; }
.rex-detail-lede { color: var(--grey); margin-bottom: 22px; max-width: 58ch; }
.rex-bridge {
  margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--line); color: var(--grey); max-width: 74ch;
}
.rex-bridge a { color: var(--white); font-weight: 600; }

/* Mobile accordion (<=900px), built by site.js from the same content */
.rex-accordion { display: none; }
@media (max-width: 900px) {
  .rex-explorer { display: block; }
  .rex-list, .rex-detail-wrap { display: none; }
  .rex-accordion { display: block; border-top: 1px solid var(--line); }
  .rex-acc-item { border-bottom: 1px solid var(--line); }
  .rex-acc-head {
    appearance: none; -webkit-appearance: none; background: 0; border: 0; width: 100%;
    cursor: pointer; text-align: left; font: inherit; color: var(--white);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
    padding: 16px 2px; min-height: 44px;
  }
  .rex-acc-head .rex-no { font-size: 1rem; }
  .rex-acc-lines { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .rex-acc-name { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; color: var(--white); }
  .rex-acc-mini { font-size: .78rem; color: var(--grey-2); }
  .rex-acc-icon { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
  .rex-acc-icon::before, .rex-acc-icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
    background: var(--red); transform: translate(-50%, -50%);
    transition: transform .4s var(--ease), opacity .3s var(--ease);
  }
  .rex-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .rex-acc-item.is-open .rex-acc-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
  .rex-acc-body-wrap { height: 0; overflow: hidden; transition: height .48s var(--ease); }
  .rex-acc-item.is-open .rex-acc-body-wrap { height: auto; }
  .rex-acc-body { padding: 2px 2px 26px; }
  .rex-acc-body .rex-detail-img { aspect-ratio: 16 / 10; margin-bottom: 16px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rex-detail.is-active { animation: none; }
  .rex-acc-body-wrap { transition: none; }
}

/* ─── Division rows (.dvn-) ─────────────────────────────────────────
   Ported from the Show Works homepage divisions module. Left: service
   rows whose excerpt expands when active. Right: sticky media panel
   whose slides cross-fade to the active row's image. Activation:
   hover/focus (lib-free) + per-row ScrollTrigger when GSAP is present,
   both in site.js. Media panel is a visual echo of the row links:
   aria-hidden, empty alts. */
.dvn-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 64px); margin-top: 54px; align-items: start; }
.dvn-list { border-top: 1px solid var(--line); }
.dvn-row {
  display: grid; grid-template-columns: clamp(64px, 8vw, 104px) 1fr auto; gap: clamp(14px, 2vw, 26px);
  align-items: start; padding-block: clamp(20px, 2.6vw, 30px); border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background .3s var(--ease);
}
.dvn-row .no {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1; color: var(--red); text-shadow: 0 0 18px rgba(209, 30, 59, .55);
}
.dvn-row h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); color: var(--grey); transition: color .3s var(--ease), transform .35s var(--ease); }
.dvn-row .ex {
  color: var(--grey); font-size: .95rem; max-width: 52ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
}
.dvn-row.is-active h3, .dvn-row:hover h3 { color: var(--white); transform: translateX(10px); }
.dvn-row.is-active .ex { max-height: 8em; opacity: 1; margin-top: 8px; }
.dvn-row .go { font-size: 1.4rem; color: var(--grey-2); align-self: center; transition: transform .3s var(--ease), color .3s var(--ease); }
.dvn-row:hover .go, .dvn-row.is-active .go { transform: translateX(6px); color: var(--white); }
.dvn-media {
  position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5;
  border-radius: 14px; overflow: clip; border: 1px solid var(--line); background: var(--coal);
}
.dvn-media .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.dvn-media .slide.show { opacity: 1; transform: scale(1); }
.dvn-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 45%); }
@media (max-width: 900px) {
  .dvn-wrap { grid-template-columns: 1fr; }
  .dvn-media { display: none; }
  .dvn-row { grid-template-columns: 44px 1fr; }
  .dvn-row .go { display: none; }
  .dvn-row h3 { color: var(--white); }
  .dvn-row.is-active h3, .dvn-row:hover h3 { transform: none; }
  .dvn-row .ex, .dvn-row.is-active .ex { max-height: none; opacity: 1; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  /* the page reads complete with no motion: every excerpt open */
  .dvn-row .ex, .dvn-row.is-active .ex { max-height: none; opacity: 1; margin-top: 8px; }
  .dvn-row.is-active h3, .dvn-row:hover h3 { transform: none; }
}

.cta-strip { background: var(--void); text-align: center; overflow: hidden; }
.cta-strip .wrap { display: grid; gap: 22px; justify-items: center; }

/* Marquee (client logos - monochrome white) */
.marquee { overflow: hidden; }
.marquee-row { display: flex; width: max-content; animation: march 68s linear infinite; align-items: center; }
.marquee-row img { height: 40px; width: auto; margin-inline-end: clamp(40px, 6vw, 90px); /* margin, not gap: -50% must equal exactly one half or the loop jumps */ opacity: .6; filter: grayscale(1) brightness(4); transition: opacity .3s; }
@media (hover: hover) { .marquee-row img:hover { opacity: 1; } }
@keyframes march { to { transform: translateX(-50%); } }

/* Mobile rail: overflow-y hidden is LOAD-BEARING + padding budgets shadows. */
.m-rail-wrap { overflow-x: auto; overflow-y: hidden; padding-block: 10px 26px; scroll-snap-type: x mandatory; }
.m-rail-wrap > * { scroll-snap-align: start; }

/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer { background: var(--void); color: var(--white); padding-block: clamp(56px, 8vw, 100px) 28px; border-top: 1px solid var(--line); }
.foot-cta { display: grid; gap: clamp(28px, 5vw, 70px); grid-template-columns: 1.1fr .9fr; align-items: start; padding-bottom: clamp(40px, 6vw, 70px); border-bottom: 1px solid var(--line); }
.foot-lead { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.foot-invite { margin-top: 14px; color: var(--grey); max-width: 46ch; }
.foot-form .note { font-size: .82rem; color: var(--grey-2); margin-top: 10px; }
.foot-form .note a { color: var(--grey); }
.site-footer .top { display: grid; gap: clamp(24px, 4vw, 60px); grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-block: clamp(32px, 5vw, 54px); }
.site-footer h4 { font-size: .78rem; letter-spacing: .22em; color: var(--grey-2); margin-bottom: 12px; font-weight: 600; }
.site-footer .loc { margin-bottom: 8px; font-size: .94rem; color: var(--grey); }
.site-footer .loc a { color: var(--grey); text-decoration: none; }
@media (hover: hover) { .site-footer .loc a:hover { color: var(--white); } }
.foot-cookie-link { background: none; border: 0; color: var(--grey); text-decoration: underline; font-size: .94rem; padding: 0; }
.site-footer .bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--grey-2); }
.site-footer .bottom a { color: var(--grey-2); }
.site-footer .top p { color: var(--grey); font-size: .94rem; }
.site-footer .top .loc strong { color: var(--white); }
@media (max-width: 900px) {
  .foot-cta { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
}

/* ─── Spotlight footer CTA (.spot-cta) ──────────────────────────── */
/* Heavy-contrast closer: one warm-white followspot cone drops from the
   top edge onto the headline; the rest of the band stays in the dark.
   Rig = the aria-hidden .spot-rig div baked into FOOTER_HTML (shell.js).
   Static light - no animation, reduced-motion safe by construction. */
.spot-cta { position: relative; padding-top: clamp(72px, 10vw, 140px); }
.spot-cta > :not(.spot-rig) { position: relative; z-index: 1; }
/* Full-bleed light rig: breaks out of the .wrap column to viewport width so the
   beam is never clipped by the content gutters (html is overflow-x: clip). */
.spot-rig { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: 0; pointer-events: none; mix-blend-mode: screen; }
.spot-rig::before { /* the cone - wedge centred on straight-down (180deg), source above the band;
                       masked so the light dies past the headline instead of running the full band */
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 164deg at 22% -14%,
    transparent 0deg,
    rgba(209, 30, 59, .13) 7deg,     /* red rim, stage-left edge */
    rgba(255, 240, 214, .26) 11deg,
    rgba(255, 240, 214, .26) 21deg,  /* warm-white core */
    rgba(209, 30, 59, .13) 25deg,    /* red rim, stage-right edge */
    transparent 32deg);
  filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 62%);
}
.spot-rig::after { /* the pool on the boards, behind the headline */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 30% 16% at 22% 30%, rgba(255, 240, 214, .22), transparent 70%);
  filter: blur(6px);
}
.spot-cta .foot-lead { color: var(--white); text-shadow: 0 0 34px rgba(255, 240, 214, .38), 0 0 90px rgba(255, 240, 214, .18); }
/* Live followspot (site.js): on fine pointers the static cone is swapped for a
   rig-mounted beam that pivots to track the cursor, pool riding underneath.
   Touch / reduced-motion / no-JS keep the static gradients above. */
.spot-cta.spot-live .spot-rig::before, .spot-cta.spot-live .spot-rig::after { content: none; }
.spot-cta.spot-live .spot-rig { overflow: hidden; }
.spot-beam {
  position: absolute; left: 50%; top: -90px; width: 520px; /* height set by JS to reach the band floor */
  transform-origin: 50% 0; will-change: transform;
  background: linear-gradient(180deg, rgba(255, 240, 214, .5), rgba(255, 240, 214, .2) 52%, transparent 84%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); /* cone: narrow at the rig, wide at the boards */
  filter: blur(12px);
}
.spot-pool {
  position: absolute; left: 0; top: 0; width: 420px; height: 230px; will-change: transform;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 240, 214, .32), transparent 70%);
  filter: blur(8px);
}
@media (max-width: 900px) { /* single column - cone centres over the stacked headline */
  .spot-rig::before {
    background: conic-gradient(from 162deg at 50% -14%,
      transparent 0deg,
      rgba(209, 30, 59, .13) 8deg,
      rgba(255, 240, 214, .26) 12deg,
      rgba(255, 240, 214, .26) 24deg,
      rgba(209, 30, 59, .13) 28deg,
      transparent 36deg);
  }
  .spot-rig::after { background: radial-gradient(ellipse 55% 12% at 50% 20%, rgba(255, 240, 214, .22), transparent 70%); }
}

/* ─── Cookie consent UI (.tsa-cc-*, consumed by js/consent.js) ──── */
.tsa-cc-banner {
  position: fixed; z-index: 400; inset-inline: 16px; bottom: 16px; margin-inline: auto; max-width: 720px;
  padding: 0; /* it's a <section> — cancel the global section padding-block (~line 111) that made it 130px tall */
  background: rgba(16, 16, 18, .96); backdrop-filter: blur(14px); color: var(--white);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.tsa-cc-banner.is-in { opacity: 1; transform: none; }
.tsa-cc-banner__inner { display: flex; gap: 12px 16px; align-items: center; padding: 14px 18px; flex-wrap: wrap; }
.tsa-cc-banner__copy { flex: 1 1 320px; }
.tsa-cc-banner__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tsa-cc-banner__text { font-size: .88rem; color: var(--grey); }
.tsa-cc-banner__text a { color: var(--white); }
.tsa-cc-actions { display: grid; gap: 8px; }
.tsa-cc-actions__row { display: flex; gap: 8px; }
.tsa-cc-btn { border-radius: 999px; padding: .6em 1.4em; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .84rem; border: 1.5px solid transparent; }
.tsa-cc-btn--primary { background: var(--beam-ui); color: var(--white); border: 0; }
.tsa-cc-btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .3); }
@media (hover: hover) {
  .tsa-cc-btn--primary:hover { transform: translateY(-2px); }
  .tsa-cc-btn--ghost:hover { border-color: var(--white); }
}
.tsa-cc-modal { position: fixed; inset: 0; z-index: 410; display: grid; place-items: center; opacity: 0; transition: opacity .3s var(--ease); }
.tsa-cc-modal.is-in { opacity: 1; }
.tsa-cc-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.tsa-cc-modal__panel {
  position: relative; width: min(92vw, 560px); max-height: 86vh; overflow-y: auto;
  background: #141416; color: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px;
}
.tsa-cc-modal__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.6rem; color: var(--grey-2); }
.tsa-cc-modal__title { font-size: 1.5rem; margin-bottom: 8px; }
.tsa-cc-modal__intro { font-size: .92rem; color: var(--grey); margin-bottom: 18px; }
.tsa-cc-modal__intro a { color: var(--white); }
.tsa-cc-row { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); }
.tsa-cc-row__title { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tsa-cc-row__desc { display: block; font-size: .85rem; color: var(--grey); }
.tsa-cc-row__note { display: block; font-size: .78rem; color: var(--red); margin-top: 2px; }
.tsa-cc-switch { position: relative; flex: 0 0 auto; }
.tsa-cc-switch input { position: absolute; opacity: 0; }
.tsa-cc-switch__track { display: block; width: 46px; height: 26px; border-radius: 999px; background: #2c2c30; transition: background .25s; position: relative; }
.tsa-cc-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform .25s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.tsa-cc-switch input:checked + .tsa-cc-switch__track { background: var(--red); }
.tsa-cc-switch input:checked + .tsa-cc-switch__track::after { transform: translateX(20px); }
.tsa-cc-switch input:focus-visible + .tsa-cc-switch__track { outline: 2px solid var(--red); outline-offset: 2px; }
.tsa-cc-switch.is-locked .tsa-cc-switch__track { background: var(--red); opacity: .4; }
.tsa-cc-switch__label { font-size: .72rem; color: var(--grey-2); margin-left: 8px; }
.tsa-cc-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.tsa-cc-modal__actions .tsa-cc-btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, .3); }
.tsa-cc-formnotice { border: 1px dashed rgba(255, 255, 255, .2); border-radius: 14px; padding: 22px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.tsa-cc-formnotice__lead { font-size: .95rem; color: var(--grey); }
.tsa-cc-formnotice__alt { font-size: .82rem; color: var(--grey-2); }
.tsa-cc-formnotice__alt a { color: var(--white); }
body.tsa-cc-modal-open { overflow: hidden; }

/* ─── INTERACTION LAYER ─────────────────────────────────────────── */

/* Before/after light slider - drag the light across the cloth.
   Markup: .ba-slider > img.ba-under + div.ba-over > img + div.ba-handle
   JS (site.js) drives --ba (6%..94%). Keyboard: handle is a role=slider.
   @property registration lets the settle-in tease transition the var. */
@property --ba { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
/* inherits MUST be true: JS sets --ba on .ba-slider but .ba-over's clip-path
   and .ba-handle's left read it on CHILDREN - a registered non-inheriting
   property pins them at initial-value 50% and the drag does nothing. */
.ba-slider {
  position: relative; overflow: hidden; border-radius: 14px;
  cursor: ew-resize; touch-action: pan-y; user-select: none;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9); border: 1px solid var(--line);
}
.ba-slider img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-over {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0);
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 2px;
  background: rgba(255, 255, 255, .85); transform: translateX(-50%);
  box-shadow: 0 0 18px 2px rgba(209, 30, 59, .55);
}
.ba-handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--beam-ui); color: var(--white);
  display: grid; place-items: center; font-size: 1.15rem;
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, .7);
  transition: transform .25s var(--ease);
}
@media (hover: hover) { .ba-slider:hover .ba-handle::after { transform: translate(-50%, -50%) scale(1.12); } }
.ba-handle:focus-visible { outline: none; }
.ba-handle:focus-visible::after { box-shadow: 0 0 0 3px var(--white), 0 8px 26px -6px rgba(0, 0, 0, .7); }
.ba-label {
  position: absolute; bottom: 14px; z-index: 2; pointer-events: none;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; color: var(--white); background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
  padding: .45em 1em; border-radius: 999px; border: 1px solid var(--line);
}
.ba-label.a { left: 14px; }
.ba-label.b { right: 14px; }

/* Followspot - a soft light that follows the cursor on dark heroes.
   JS sets --mx/--my on [data-spot]; .spot-on gates it. Fine pointers only. */
[data-spot] { position: relative; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
    rgba(255, 240, 220, .09), rgba(209, 30, 59, .04) 45%, transparent 65%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .5s var(--ease);
}
[data-spot].spot-on::after { opacity: 1; }

/* The curtain rise - first-visit entrance. Static markup on the homepage
   (no FOUC), inline script hides it for repeat visits, site.js opens it. */
.rv-curtain { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; }
.rv-curtain[hidden] { display: none; }
.rv-panel {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42), transparent 22%, transparent 82%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg,
      #4a0512 0 18px, #7c0e21 18px 44px, #a01730 44px 58px, #5c0916 58px 84px);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .55);
  transition: transform 1.2s cubic-bezier(.7, 0, .3, 1) .25s;
}
.rv-panel.l { left: 0; }
.rv-panel.r { right: 0; }
.rv-curtain .rv-mark { position: relative; z-index: 1; width: clamp(160px, 22vw, 260px); opacity: .95; transition: opacity .5s var(--ease); }
.rv-curtain.is-open .rv-panel.l { transform: translateX(-103%); }
.rv-curtain.is-open .rv-panel.r { transform: translateX(103%); }
.rv-curtain.is-open .rv-mark { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rv-curtain { display: none; } }

/* Mega dropdown with live preview (Products/Services) */
.nav .sub.mega {
  display: grid; grid-template-columns: 1fr 240px; gap: 6px; align-items: stretch;
  min-width: 560px; padding: 16px;
}
.nav .sub.mega ul { list-style: none; }
.nav .sub.mega ul a { border-radius: 8px; }
.mega-prev {
  position: relative; border-radius: 10px; overflow: hidden; min-height: 240px;
  border: 1px solid var(--line); background: var(--coal);
}
.mega-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease), transform .6s var(--ease); }
.mega-prev .cap {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem; color: var(--white); background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
  padding: .4em .9em; border-radius: 999px;
}
@media (max-width: 900px) { .nav .sub.mega { min-width: 0; grid-template-columns: 1fr; } .mega-prev { display: none; } }

/* ─── Process timeline (.cf-flow) ───────────────────────────────────
   Ported from TSA's process-timeline component, dark-surface variant
   only, re-themed red. No JS of its own: give the .cf-flow element
   class "reveal" and the shared observer's .in drives the fill + node
   stagger. Vertical rail: brief -> pattern -> sewing floor -> QC ->
   install. */
.cf-flow { position: relative; max-width: 560px; }
.cf-flow-track { position: relative; margin: 0; padding: 0; list-style: none; }
.cf-flow-track::before { content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; background: rgba(255, 255, 255, .14); border-radius: 2px; }
.cf-flow-track::after {
  content: ""; position: absolute; left: 19px; top: 12px; width: 2px; height: calc(100% - 24px);
  background: linear-gradient(180deg, var(--red) 0%, rgba(209, 30, 59, .35) 100%); border-radius: 2px;
  transform: scaleY(0); transform-origin: 0 0; transition: transform 1400ms var(--ease) 150ms;
}
.cf-flow.in .cf-flow-track::after { transform: scaleY(1); }
.cf-flow-node {
  position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  padding: 0 0 clamp(26px, 3vw, 40px); align-items: start;
  opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.cf-flow-node:last-child { padding-bottom: 0; }
.cf-flow.in .cf-flow-node { opacity: 1; transform: none; }
.cf-flow.in .cf-flow-node:nth-child(1) { transition-delay: 140ms; }
.cf-flow.in .cf-flow-node:nth-child(2) { transition-delay: 300ms; }
.cf-flow.in .cf-flow-node:nth-child(3) { transition-delay: 460ms; }
.cf-flow.in .cf-flow-node:nth-child(4) { transition-delay: 620ms; }
.cf-flow.in .cf-flow-node:nth-child(5) { transition-delay: 780ms; }
.cf-flow-dot {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); background: var(--coal); border: 2px solid rgba(255, 255, 255, .22);
  font-family: var(--display); font-weight: 700; font-size: .9rem; line-height: 1;
  transition: color 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease);
}
.cf-flow.in .cf-flow-dot { color: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(209, 30, 59, .14); }
.cf-flow-body { padding-top: 1px; min-width: 0; }
.cf-flow-step { display: block; font-family: var(--body); font-weight: 600; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.cf-flow-title { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.06; color: var(--white); margin: 0 0 7px; }
.cf-flow-line { font-size: .88rem; line-height: 1.55; color: var(--grey); margin: 0; max-width: 40ch; }
/* Horizontal modifier: dots in a row, connector runs left-to-right, body
   stacks under each dot. Set --cf-cols for the column count (default 4). */
.cf-flow--horizontal { max-width: none; margin-top: clamp(36px, 5vw, 64px); }
.cf-flow--horizontal .cf-flow-track { display: grid; grid-template-columns: repeat(var(--cf-cols, 4), 1fr); gap: clamp(24px, 3vw, 48px); }
.cf-flow--horizontal .cf-flow-track::before { left: 20px; right: 20px; top: 19px; bottom: auto; width: auto; height: 2px; }
.cf-flow--horizontal .cf-flow-track::after {
  left: 20px; right: 20px; top: 19px; width: auto; height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, rgba(209, 30, 59, .3) 100%);
  transform: scaleX(0); transform-origin: 0 0;
}
.cf-flow--horizontal.in .cf-flow-track::after { transform: scaleX(1); }
.cf-flow--horizontal .cf-flow-node { display: flex; flex-direction: column; gap: 14px; padding: 0; }
@media (max-width: 760px) {
  .cf-flow--horizontal .cf-flow-track { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .cf-flow--horizontal .cf-flow-track::before, .cf-flow--horizontal .cf-flow-track::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-flow-track::after { transform: scaleY(1); }
  .cf-flow--horizontal .cf-flow-track::after { transform: scaleX(1); }
  .cf-flow-node { opacity: 1; transform: none; }
}

/* ─── Glossary hovercards (.gloss-, [data-glossary]) ────────────────
   Ported from TSA glossary component, re-themed red. Inline term
   <span data-glossary="slug" data-href="/page">term</span> pops a
   definition card on hover/focus (desktop) or first tap (touch);
   click/second-tap navigates. Definitions: /data/glossary.json.
   JS in site.js. No JS or missing data -> terms still navigate. */
[data-glossary] {
  color: var(--red); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: opacity 200ms var(--ease);
}
[data-glossary]:hover, [data-glossary].is-gloss-active { opacity: .82; }
[data-glossary]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.gloss-card {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: min(320px, calc(100vw - 24px)); padding: 14px 16px 15px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid var(--red);
  background: rgba(22, 22, 24, .92);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 50px -14px rgba(0, 0, 0, .7);
  color: var(--white); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}
.gloss-card.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s; }
.gloss-card.is-above { transform: translateY(6px); }
.gloss-card.is-above.is-open { transform: translateY(0); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gloss-card { background: rgba(18, 18, 20, .98); }
  .gloss-card__caret { background: rgba(18, 18, 20, .98); }
}
.gloss-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gloss-card__term { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1rem; line-height: 1; letter-spacing: .02em; color: var(--white); }
.gloss-card__cat {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: rgba(209, 30, 59, .16); border: 1px solid rgba(209, 30, 59, .3);
  font-family: var(--body); font-weight: 600; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}
.gloss-card__def { margin: 0; font-family: var(--body); font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.gloss-card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--body); font-weight: 600; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); text-decoration: none;
}
.gloss-card__more-arrow { transition: transform 250ms var(--ease); }
.gloss-card__more:hover .gloss-card__more-arrow, .gloss-card__more:focus-visible .gloss-card__more-arrow { transform: translateX(4px); }
.gloss-card__more:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.gloss-card__caret {
  position: absolute; left: var(--gloss-caret-x, 24px); width: 12px; height: 12px;
  background: rgba(22, 22, 24, .92); transform: translateX(-50%) rotate(45deg); pointer-events: none;
}
.gloss-card:not(.is-above) .gloss-card__caret { top: -6px; border-left: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid var(--red); }
.gloss-card.is-above .gloss-card__caret { bottom: -6px; border-right: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* ─── Stage map (.iso-, [data-iso-heat]) ────────────────────────────
   Ported from TSA's iso-heat hotspot component, re-themed red and
   simplified: the scene "img" in the JSON config is a literal path
   (no responsive variants). Numbered pins on a stage photo; hover or
   first tap opens the card, second tap follows the link. Mobile
   (<=820px) swaps floating cards for the legend list. JS in site.js. */
.iso-heat { position: relative; }
.iso-heat__mount { width: 100%; display: flex; flex-direction: column; align-items: center; }
.iso-heat__tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; margin: clamp(24px, 3vw, 34px) 0 0; border-radius: 100px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.iso-tab { appearance: none; border: 0; cursor: pointer; font-family: var(--body); font-weight: 600; font-size: .78rem; letter-spacing: .04em; padding: 10px 20px; border-radius: 100px; background: transparent; color: rgba(255, 255, 255, .74); transition: background .2s, color .2s; }
.iso-tab:hover { color: var(--white); }
.iso-tab.is-on { background: var(--red); color: var(--white); }
.iso-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.iso-heat__stage { position: relative; width: min(88vw, 1100px); max-width: 100%; margin: clamp(20px, 3vw, 32px) auto 0; aspect-ratio: 16 / 9; }
@media (max-width: 820px) { .iso-heat__stage { width: 96vw; } }
.iso-heat__stage::before { content: ""; position: absolute; inset: -8% -4% -12%; z-index: 0; background: radial-gradient(ellipse 58% 56% at 52% 50%, rgba(87, 0, 104, .22), transparent 70%); pointer-events: none; }
/* the model floats on the dark section - no card, no crop */
.iso-heat__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .35s ease; }
.iso-heat__img.is-swapping { opacity: 0; }
.iso-heat__spots { position: absolute; inset: 0; z-index: 3; }
.iso-spot { position: absolute; width: 0; height: 0; text-decoration: none; }
.iso-spot__halo { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: clamp(46px, 4.4vw, 64px); height: clamp(46px, 4.4vw, 64px); border-radius: 50%; background: var(--red); opacity: 0; transition: opacity .25s; pointer-events: none; }
.iso-spot__dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px); border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: #15171b; border: 2px solid rgba(0, 0, 0, .4);
  font-family: var(--display); font-weight: 700; font-size: clamp(.72rem, 1.1vw, .9rem); line-height: 1;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55); cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.iso-spot:hover .iso-spot__dot, .iso-spot:focus-visible .iso-spot__dot, .iso-spot.is-armed .iso-spot__dot { background: var(--red); color: var(--white); transform: translate(-50%, -50%) scale(1.08); }
.iso-spot:hover .iso-spot__halo { opacity: .26; }
.iso-spot.is-armed .iso-spot__halo { opacity: .34; }
.iso-spot:focus-visible { outline: none; }
.iso-heat__spots.has-selection .iso-spot { opacity: .35; transition: opacity .3s; }
.iso-heat__spots.has-selection .iso-spot.is-armed { opacity: 1; }
.iso-spot__card {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 16px; transform: translateX(-50%);
  width: max-content; max-width: min(240px, 46vw); text-align: left;
  background: rgba(16, 16, 18, .95); border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; padding: 12px 14px;
  opacity: 0; visibility: hidden; transition: opacity .2s; pointer-events: none; z-index: 5;
  box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .75);
}
.iso-spot:hover .iso-spot__card, .iso-spot:focus-visible .iso-spot__card, .iso-spot.is-armed .iso-spot__card { opacity: 1; visibility: visible; }
.iso-spot.is-armed .iso-spot__card { pointer-events: auto; }
.iso-spot.is-low .iso-spot__card { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 16px; }
.iso-spot.is-left .iso-spot__card { left: 0; transform: translateX(-20px); }
.iso-spot.is-right .iso-spot__card { left: auto; right: 0; transform: translateX(20px); }
.iso-spot__card-name { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: .9rem; line-height: 1.12; color: var(--white); margin-bottom: 6px; }
.iso-spot__card-blurb { display: block; font-family: var(--body); font-size: .74rem; line-height: 1.5; color: rgba(255, 255, 255, .74); margin-bottom: 9px; }
.iso-spot__card-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body); font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.iso-heat__legend { display: none; width: min(96vw, 560px); margin: 20px auto 0; padding: 0; list-style: none; text-align: left; }
@media (max-width: 820px) {
  .iso-heat__legend { display: block; }
  .iso-spot__card { display: none; }
  .iso-spot__dot::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
}
.iso-legend { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.iso-legend__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 11px 4px; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--white); font-family: var(--body); }
.iso-legend__n { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #15171b; font-family: var(--display); font-weight: 700; font-size: .82rem; line-height: 1; }
.iso-legend.is-open .iso-legend__n { background: var(--red); color: var(--white); }
.iso-legend__name { flex: 1; font-weight: 600; font-size: .88rem; line-height: 1.3; }
.iso-legend__chev { flex: none; color: rgba(255, 255, 255, .5); font-size: 1.3rem; line-height: 1; transition: transform .2s, color .2s; }
.iso-legend.is-open .iso-legend__chev { transform: rotate(45deg); color: var(--red); }
.iso-legend__row:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.iso-legend__panel { display: none; padding: 0 4px 14px 50px; }
.iso-legend.is-open .iso-legend__panel { display: block; }
.iso-legend__blurb { margin: 0 0 10px; font-family: var(--body); font-size: .82rem; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.iso-legend__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); text-decoration: none; }
.iso-heat__hint { margin-top: 16px; font-family: var(--body); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.iso-heat__note { margin-top: 8px; font-family: var(--body); font-size: .66rem; font-style: italic; letter-spacing: .02em; color: rgba(255, 255, 255, .38); }

/* ─── Coverflow carousel (.acs-) ────────────────────────────────────
   Ported from TSA's coverflow-carousel component, re-themed red.
   3D coverflow of product tiles: front tile carries a glass spec
   card; prev/next arrows, pill tabs, arrow keys, touch swipe,
   autoplay with pause-on-hover/focus/hidden/off-screen. JS in
   site.js (self-guards on .acs-block/.acs/.acs-stage). */
.acs-block { margin-top: clamp(24px, 3vw, 42px); }
.acs { position: relative; max-width: 1080px; margin: clamp(6px, 1vw, 14px) auto 0; }
.acs-stage { position: relative; perspective: 1700px; height: clamp(320px, 42vw, 570px); overflow-x: clip; overflow-y: visible; }
.acs__tile {
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: clamp(340px, 62vw, 820px);
  transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform 650ms var(--ease), opacity 650ms var(--ease);
}
.acs__tile:not([data-pos="0"]) { cursor: pointer; }
.acs__tile[data-pos="0"] { transform: translateX(0) translateZ(0) scale(1); opacity: 1; z-index: 40; }
.acs__tile[data-pos="1"] { transform: translateX(30%) translateZ(-230px) rotateY(-22deg) scale(.74); opacity: .5; z-index: 30; }
.acs__tile[data-pos="2"] { transform: translateX(0) translateZ(-440px) scale(.54); opacity: .26; z-index: 10; }
.acs__tile[data-pos="3"] { transform: translateX(-30%) translateZ(-230px) rotateY(22deg) scale(.74); opacity: .5; z-index: 30; }
.acs__tile::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 2%; width: 104%; height: 84%;
  transform: translateX(-50%) scale(.9);
  background: radial-gradient(ellipse 50% 52% at 50% 46%, rgba(209, 30, 59, .4) 0%, rgba(209, 30, 59, .12) 38%, transparent 72%);
  opacity: 0; pointer-events: none; transition: opacity 550ms var(--ease);
}
.acs__tile[data-pos="0"]::before { opacity: .5; }
.acs__shot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: clamp(8px, 1.4vw, 18px); }
.acs__shot img { width: auto; max-width: 92%; height: auto; max-height: 100%; object-fit: contain; margin: 0 auto; border-radius: 10px; filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .55)); }
.acs__card {
  position: absolute; z-index: 3; left: auto; right: 0; width: 54%; bottom: -6%;
  border-radius: 16px; overflow: hidden; padding: 15px 17px 16px;
  background: linear-gradient(180deg, rgba(30, 30, 33, .74) 0%, rgba(16, 16, 18, .8) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 26px 46px -22px rgba(0, 0, 0, .62); color: var(--white);
  opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease) 120ms, transform 500ms var(--ease) 120ms;
}
.acs__tile[data-pos="0"] .acs__card { opacity: 1; transform: translateY(0); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .acs__card { background: rgba(14, 14, 16, .96); } }
.acs__code { font-family: var(--body); font-weight: 600; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red); display: block; }
.acs__model { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1; color: var(--white); margin: 3px 0 8px; }
.acs__spec { font-family: var(--body); font-size: .76rem; line-height: 1.5; color: rgba(255, 255, 255, .82); margin: 0; }
.acs__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; min-height: 24px; font-family: var(--body); font-weight: 600; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); text-decoration: none; transition: gap 200ms var(--ease); }
.acs__cta:hover { gap: 10px; }
.acs__cta:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.acs-arrow {
  position: absolute; top: 38%; z-index: 50; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(16, 16, 18, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background 240ms, border-color 240ms, transform 240ms var(--ease);
}
.acs-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); }
.acs-arrow--prev { left: -8px; }
.acs-arrow--prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.acs-arrow--next { right: -8px; }
.acs-arrow--next::before { transform: translate(-70%, -50%) rotate(-45deg); }
.acs-arrow:hover { background: var(--red); border-color: var(--red); }
.acs-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.acs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(16px, 2.2vw, 28px); }
.acs-tab {
  appearance: none; cursor: pointer; font-family: var(--body); font-weight: 600;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 100px; padding: 9px 18px;
  transition: color 240ms, background 240ms, border-color 240ms;
}
.acs-tab:hover { color: var(--white); border-color: rgba(255, 255, 255, .3); }
.acs-tab[aria-selected="true"] { color: var(--white); background: var(--red); border-color: var(--red); }
.acs-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.acs-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rail-dots { display: flex; justify-content: center; gap: 8px; }
.rail-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(255, 255, 255, .25); cursor: pointer; transition: background .25s, width .25s var(--ease); }
.rail-dot.is-active { background: var(--red); width: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .acs__tile[data-pos="0"] .acs__shot { animation: acsFloat 7s ease-in-out infinite; }
}
@keyframes acsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 820px) {
  .acs { max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 14px; }
  .acs-stage { flex: 1 1 100%; height: clamp(400px, 120vw, 540px); }
  .acs__tile { width: min(82vw, 380px); }
  .acs__tile[data-pos="1"] { transform: translateX(24%) translateZ(-170px) rotateY(-16deg) scale(.6); opacity: .32; }
  .acs__tile[data-pos="2"] { transform: translateX(0) translateZ(-330px) scale(.46); opacity: .18; }
  .acs__tile[data-pos="3"] { transform: translateX(-24%) translateZ(-170px) rotateY(16deg) scale(.6); opacity: .32; }
  .acs__card { position: static; width: 100%; right: auto; bottom: auto; margin-top: 10px; }
  .acs__tile:not([data-pos="0"]) .acs__card { display: none; }
  .acs-arrow { position: relative; top: auto; background: transparent; border: 1.5px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .acs-arrow--prev { left: auto; order: 1; }
  .acs-arrow--next { right: auto; order: 3; }
  .acs .rail-dots { order: 2; }
  .acs-tabs { display: none; }
}
@media (min-width: 821px) { .acs .rail-dots { display: none; } }

/* ─── Drape Selector callout band (.dss-) ───────────────────────────
   Ported from TSA's shared drape-selector component
   (app/components/drape-selector.css), re-themed to the backstage-black
   motif: orange -> red, Anton -> Barlow Condensed, TSA muted/line tokens
   -> --grey/--line. The device mockup (laptop + phone) floats with the
   glass demo card in front; site.js auto-advances the demo (#dssDemo).
   The band carries its OWN red glow + grain: one light treatment per
   band, so never add .wash or .streak inside it. CTA links to
   /resources/drape-selector. */
.dss-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 92px) 0 clamp(70px, 8vw, 110px); }
/* top separator: soft shadow + faint red bloom dividing it from the band above */
.dss-band::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(209, 30, 59, .07) 0%, transparent 70%),
              linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%); }
.dss-glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 45% at 90% 6%, rgba(209, 30, 59, .2) 0%, transparent 60%),
    radial-gradient(circle 720px at 4% 52%, rgba(209, 30, 59, .22) 0%, transparent 70%),
    radial-gradient(ellipse 55% 55% at 96% 96%, rgba(209, 30, 59, .1) 0%, transparent 60%);
}
.dss-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.dss-bignum {
  position: absolute; right: -.04em; bottom: -.18em; z-index: -1;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(220px, 34vw, 440px); line-height: .82; letter-spacing: .02em;
  color: rgba(255, 255, 255, .045); pointer-events: none; user-select: none;
}
.dss-grid {
  display: grid; grid-template-columns: clamp(300px, 38%, 460px) 1fr;
  gap: clamp(40px, 5vw, 84px); align-items: center;
}
.dss-explainer { position: relative; z-index: 1; }
.dss-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 5.2vw, 80px); line-height: .96; color: var(--white); margin: 16px 0 22px;
}
.dss-lede { color: var(--grey); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; max-width: 44ch; }
.dss-actions { margin-top: 34px; }
.dss-reassure { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; padding: 0; }
.dss-reassure li {
  font-family: var(--body); font-weight: 600;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey);
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.dss-reassure li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px 1px rgba(209, 30, 59, .8); }
/* the glass "device" that demos the tool */
.dss-demo {
  position: relative; z-index: 1; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(30, 30, 33, .58) 0%, rgba(12, 12, 14, .44) 100%);
  background-origin: border-box; /* gradient + transparent-ish border ring:
     padding-box origin tiles opposite-colour slivers into the corners */
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 22px 40px -24px rgba(0, 0, 0, .5);
  text-decoration: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dss-demo { background: #1c1c1f; }
}
.dss-demo__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dss-demo__dotset { display: inline-flex; gap: 6px; }
.dss-demo__dotset span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.dss-demo__dotset span:first-child { background: var(--red); }
.dss-demo__name { font-family: var(--body); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.dss-stage { position: relative; height: clamp(300px, 34vw, 360px); }
.dss-step {
  position: absolute; inset: 0; padding: clamp(20px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(14px) scale(.99); pointer-events: none;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.dss-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.dss-step__head { display: flex; align-items: baseline; gap: 12px; }
.dss-step__idx { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--red); text-shadow: 0 0 14px rgba(209, 30, 59, .45); }
.dss-step__q { font-family: var(--body); font-weight: 700; font-size: clamp(16px, 1.5vw, 20px); color: var(--white); letter-spacing: -.01em; }
.dss-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; }
.dss-mini {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: 14px; padding: 14px 10px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  background-origin: border-box;
  color: var(--white);
}
.dss-mini.is-pick { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 18px 40px -22px rgba(209, 30, 59, .55); }
.dss-mini.is-pick::after {
  content: ''; position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.dss-mini__svg { width: 54px; height: 42px; }
.dss-mini__svg svg { width: 100%; height: 100%; display: block; }
.dss-mini__swatch { width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, .2); }
.dss-mini__label { font-family: var(--body); font-weight: 700; font-size: 12px; line-height: 1.2; }
.dss-mini__sub { font-size: 10.5px; color: var(--grey); }
/* size step: a little spec-sheet resolve */
.dss-size { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.dss-size__diagram { border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .03); }
.dss-size__diagram svg { width: 70%; height: auto; }
.dss-size__sheet { border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 16px; background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; gap: 9px; }
.dss-size__row { display: flex; justify-content: space-between; font-size: 12px; }
.dss-size__row span:first-child { color: var(--grey); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; align-self: center; }
.dss-size__row span:last-child { color: var(--white); font-weight: 700; }
.dss-size__row--accent span:last-child { color: var(--red); }
/* progress dots + caption under the stage */
.dss-progress { display: flex; align-items: center; gap: 14px; padding: 14px 18px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dss-dots { display: inline-flex; gap: 8px; }
.dss-dot { width: 26px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 0; padding: 0; cursor: pointer; transition: background 250ms; }
.dss-dot.is-on { background: var(--red); }
/* Coarse-pointer tap floor: keep the 26x4 visual pill, expand the hit-area to >=44px. */
@media (pointer: coarse) {
  .dss-dot { position: relative; }
  .dss-dot::after { content: ''; position: absolute; inset: -20px -9px; }
}
.dss-caption { font-size: 12px; color: var(--grey); }
.dss-caption b { color: var(--white); font-weight: 700; }
/* device mockup (laptop + phone) as the base, with the animated demo floating in front */
/* dssFloat runs on the img and the card SEPARATELY (same keyframes = in sync),
   never on .dss-visual: an animated/will-change transform on the card's ancestor
   clamps its backdrop-filter to an empty backdrop root in Chromium and the
   glass renders opaque a moment after load. */
.dss-visual { position: relative; z-index: 1; }
/* No drop-shadow filter here: combined with the bottom mask it casts a faint
   rectangle from the masked box. The mockup carries its own shading. */
.dss-device__img { display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
  animation: dssFloat 7s ease-in-out infinite; }
/* Card sits stage-left over the laptop keyboard (dead space) - the phone in
   the mockup's right half stays clear. Tightened vertically for the same reason. */
.dss-visual .dss-demo { position: absolute; left: 0; bottom: 5%; width: 60%; max-width: 308px; z-index: 3;
  animation: dssFloat 7s ease-in-out infinite; }
.dss-visual .dss-stage { height: clamp(154px, 17vw, 182px); }
.dss-visual .dss-step { padding: 10px 12px; gap: 8px; }
.dss-visual .dss-step__q { font-size: 14px; }
.dss-visual .dss-mini { padding: 8px 6px; gap: 6px; border-radius: 11px; }
.dss-visual .dss-mini__svg { width: 38px; height: 30px; }
.dss-visual .dss-mini__swatch { width: 32px; height: 32px; }
.dss-visual .dss-mini__label { font-size: 11px; }
.dss-visual .dss-mini__sub { font-size: 9.5px; }
.dss-visual .dss-size__sheet { padding: 12px; gap: 6px; }
@keyframes dssFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 900px) { .dss-visual .dss-demo { left: -2%; bottom: -3%; width: 66%; } }
@media (max-width: 900px) {
  .dss-grid { grid-template-columns: 1fr; gap: 40px; }
  .dss-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .dss-row { grid-template-columns: 1fr 1fr; }
  .dss-row .dss-mini:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dss-step { transition: none; }
  .dss-device__img, .dss-visual .dss-demo { animation: none; }
}

/* ─── Modal (.rv-modal) - native <dialog>, coal card ────────────── */
/* Houses the gated catalogue-download HubSpot form; opened by the magnet
   CTAs (site.js). Native dialog = free focus trap, Esc close, ::backdrop. */
.rv-modal { border: 1px solid var(--line); border-radius: 16px; background: var(--coal); color: var(--grey);
  width: min(480px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 0;
  margin: auto; /* the global margin reset kills the UA dialog centering */ }
.rv-modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.rv-modal__body { padding: clamp(24px, 4vw, 36px); display: grid; gap: 12px; position: relative; }
.rv-modal h3 { color: var(--white); font-size: 1.5rem; }
.rv-modal__sub { max-width: 40ch; }
.rv-modal__x { position: absolute; top: 10px; right: 10px; background: none; border: 0;
  font-size: 28px; line-height: 1; color: var(--grey); padding: 8px; }
@media (hover: hover) { .rv-modal__x:hover { color: var(--white); } }
.rv-modal .note { font-size: .8rem; color: var(--grey-2); }
.rv-modal .note a { color: var(--grey); }

/* ─── Touch ergonomics ──────────────────────────────────────────── */
@media (pointer: coarse) {
  .nav a, .drawer a, .btn, .faq summary { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
}
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .drape-in { opacity: 1; transform: none; }
  .ltr { opacity: 1; transform: none; animation: none; }
  .marquee-row { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-row img[aria-hidden] { display: none; }
}