/* Metric-matched fallbacks. The Google Fonts request uses font-display:
   optional, so a slow first visit paints with these instead of swapping
   mid-view; size-adjust and the overrides keep line lengths and heights
   close to Inter / Inter Tight, so the layout does not jump either way. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Roboto'), local('Helvetica Neue');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial'), local('Roboto'), local('Helvetica Neue');
  size-adjust: 102%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
/* =========================================
   CASE TEMPLATE v2 - "scored to picture"
   Full-bleed 3D hero + scroll-driven score
   reveals. Matches the home hero language
   (dark scene, brushed metal, particles).
   First used by ifmc.html.
   ========================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --paper: #eceef0;
  --accent: #aac6de;
  --signal: #8fb8d4;
  --violet: #6e879d;
  --grey: #9aa0a8;
  --rule: rgba(236, 238, 240, 0.14);
  --rule-soft: rgba(236, 238, 240, 0.08);
  --ink-80: rgba(236, 238, 240, 0.80);
  --ink-70: rgba(236, 238, 240, 0.72);
  --ink-55: rgba(236, 238, 240, 0.55);
  --ink-58: rgba(236, 238, 240, 0.58);
  --serif: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif;
  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

::selection {
  background: var(--accent);
  color: #0f1013;
}

img { max-width: 100%; }

.tr-compare { overflow-x:auto; border-block:1px solid var(--rule); }
.tr-compare table { width:100%; min-width:720px; border-collapse:collapse; }
.tr-compare th,
.tr-compare td { padding:16px 14px; border-bottom:1px solid var(--rule-soft); text-align:left; vertical-align:top; }
.tr-compare thead th { color:var(--ink-55); font-family:var(--mono); font-size:.75rem; font-weight:400; text-transform:uppercase; }
.tr-compare tbody th { color:var(--paper); font-family:var(--serif); }
.tr-compare tbody td { color:var(--ink-70); }

.ai-result-chart { margin:0 0 38px; border-block:1px solid var(--rule); padding:26px 0 18px; }
.ai-hero-result { display:grid; grid-template-columns:auto auto minmax(220px,1fr); gap:20px; align-items:end; max-width:900px; margin-top:34px; padding-top:20px; border-top:1px solid var(--rule); }
.ai-hero-result div { display:grid; gap:4px; }
.ai-hero-result strong { color:var(--paper); font-family:var(--serif); font-size:clamp(1.8rem,3vw,3.2rem); line-height:1; }
.ai-hero-result span { color:var(--ink-55); font-family:var(--mono); font-size:.68rem; text-transform:uppercase; }
.ai-hero-result p { max-width:42ch; color:var(--ink-70); font-size:.88rem; line-height:1.5; }
.ai-result-chart__budget { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; padding:12px 14px; border-left:4px solid var(--signal); color:var(--ink-70); background:var(--rule-soft); }
.ai-result-chart__budget strong { color:var(--paper); font-family:var(--mono); }
.ai-result-chart__plot { display:grid; gap:13px; }
.ai-result-chart__plot > div { display:grid; grid-template-columns:150px minmax(0,1fr) 62px; align-items:center; gap:13px; }
.ai-result-chart__plot span,
.ai-result-chart__plot strong { color:var(--ink-70); font-family:var(--mono); font-size:.72rem; font-weight:400; }
.ai-result-chart__plot strong { text-align:right; color:var(--paper); }
.ai-result-chart__plot { --budget:4.29%; } /* 150 ms of the 3.5 s full scale */
.ai-result-chart__plot i { position:relative; display:block; height:12px; background:var(--rule-soft); }
.ai-result-chart__plot i::after { content:''; position:absolute; inset:0 auto 0 0; width:max(6px,var(--bar)); background:var(--accent); }
/* At this scale the one method that meets the budget is a few pixels wide and
   reads as an artefact. The marker shows where 150 ms falls on every bar, so
   "inside the budget" and "nowhere near it" become visible rather than stated. */
.ai-result-chart__plot i::before {
  content:''; position:absolute; z-index:1;
  top:-3px; bottom:-3px; left:var(--budget);
  width:1px; background:var(--paper); opacity:.5;
}
.ai-result-chart figcaption { max-width:74ch; margin-top:18px; color:var(--ink-55); font-size:.78rem; line-height:1.55; }
.ai-result-reading { max-width:740px; margin-top:24px; color:var(--ink-70); font-size:1rem; line-height:1.65; }
@media (max-width:620px) {
  .ai-hero-result { grid-template-columns:1fr 1fr; align-items:start; }
  .ai-hero-result p { grid-column:1/-1; }
  .ai-result-chart__plot > div { grid-template-columns:1fr 54px; gap:6px 10px; }
  .ai-result-chart__plot i { grid-column:1/-1; grid-row:2; }
}

@media (max-width:380px) {
  /* Contact used to be dropped here. There is room for it once the header
     stops wrapping, and it is the one link a visitor is most likely to want. */
  .site-header { gap:10px; }
  .site-header nav { gap:10px; }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  background:
    radial-gradient(ellipse 75% 50% at 78% 12%, rgba(170, 198, 222, 0.07), transparent 58%),
    radial-gradient(ellipse 50% 40% at 12% 70%, rgba(90, 110, 140, 0.05), transparent 50%),
    linear-gradient(160deg, #08080a 0%, #0b0b0d 45%, #0d0d10 100%);
  color: var(--paper);
  font-size: 16.5px;
  line-height: 1.7;
  overflow-x: hidden;
}

.site-header {
  position:sticky;
  top:0;
  z-index:900;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:14px clamp(20px,5vw,72px);
  border-bottom:1px solid var(--rule);
  background:rgba(11,11,13,.9);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.site-header__name,
.site-header nav a {
  color:var(--ink-55);
  border:0;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
}
.site-header nav { display:flex; gap:24px; }
.site-header__name:hover,
.site-header nav a:hover { color:var(--paper); border:0; }

:where(.case-hero__facts,.sf-hero__role,.nt-hero__role,.tr-hero__role,.ai-hero__role,.aq-hero__role,.xr-hero__role) {
  max-width:76ch;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
:where(.concept-body,.ai-system-story__copy,.tr-pipeline-story__copy,.nt-system-story__copy,.aq-system-story__copy) {
  max-width:740px;
}

@media (max-width:620px) {
  .site-header { gap:12px; }
  .site-header nav { gap:12px; }
  .site-header nav a { font-size:.64rem; }
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.2s, border-color 0.2s;
}

a:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 3000;
  padding: 10px 14px;
  background: var(--accent);
  color: #0f1013;
  border: none;
  border-radius: 4px;
  transform: translateY(-140%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--signal);
  z-index: 1000;
}

/* Project copy is visible immediately; media interactions remain opt-in. */
.io-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.io-reveal.in {
  opacity: 1;
  transform: none;
}

/* =========================================
   CHROME (back nav over hero + footer)
   ========================================= */
.back-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 26px clamp(20px, 5vw, 64px) 0;
}

.back-nav a {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--grey);
  border-bottom: none;
}

.back-nav a::before { content: '\2190  '; }
.back-nav a:hover { color: var(--accent); }

main { position: relative; }

/* The project footer above already ends with a rule and its own bottom padding,
   so the older 84px top margin left an empty band between the two link rows. */
.project-return {
  width: min(1200px, 100%);
  margin: clamp(30px, 4vw, 52px) auto 0;
  padding: 18px clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.project-return a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border-bottom: 0;
  color: var(--ink-70);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
}

.project-return a:hover {
  border-bottom: 0;
  color: var(--paper);
}

.colophon {
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 64px) 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  /* The right span holds 44px inline-flex links and the left one is plain
     text: with the default stretch the two sat on different baselines. */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-58);
}

/* =========================================
   HERO - full viewport, 3D stage
   ========================================= */
.ifmc-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.ifmc-hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
}

html.ifmc-no-3d .ifmc-hero__stage { display: none; }

.ifmc-hero__copy {
  padding: 0 clamp(20px, 5vw, 64px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
}

.ifmc-hero__copy a { pointer-events: auto; }

.ifmc-hero__kicker {
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--signal);
  margin-bottom: 22px;
}

.ifmc-hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(56px, 10vw, 132px);
  line-height: 0.95;
  margin-bottom: 26px;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.55);
}

.ifmc-hero__sub {
  font-family: var(--mono);
  font-size: clamp(12.5px, 1.4vw, 15px);
  line-height: 1.75;
  color: var(--ink-70);
  max-width: 46ch;
}

/* scroll cue */
.ifmc-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 1px;
  height: 54px;
  background: var(--rule);
  overflow: hidden;
}

.ifmc-hero__scroll span {
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--signal);
  animation: scrollCue 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

@keyframes scrollCue {
  0% { top: -40%; }
  70%, 100% { top: 110%; }
}

/* =========================================
   ENTRIES
   ========================================= */
.ifmc-entry {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(70px, 12vh, 130px) clamp(20px, 5vw, 64px) 30px;
}

.ifmc-entry__head { margin-bottom: 40px; }

.ifmc-entry__no {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--signal);
  margin-bottom: 16px;
}

.ifmc-entry__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.98;
  margin-bottom: 18px;
}

.ifmc-entry__dir {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-55);
  max-width: 52ch;
  line-height: 1.7;
}

/* ---------- Cinema block ---------- */
.ifmc-screen { margin: 0 0 54px; }

.ifmc-screen__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050507;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}

.ifmc-screen__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Score block ---------- */
.ifmc-score {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
  gap: 40px clamp(30px, 6vw, 90px);
  align-items: center;
  padding: 34px 0 44px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ifmc-score__big {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(84px, 11vw, 150px);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(115deg, var(--paper) 30%, var(--signal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ifmc-score__big em {
  font-style: normal;
  font-size: 0.28em;
  color: var(--ink-55);
  -webkit-text-fill-color: currentColor;
  margin-left: 6px;
}

.ifmc-score__place {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink-55);
}

.ifmc-score__place sup { font-size: 0.7em; }

.ifmc-score__bars {
  display: grid;
  gap: 20px;
}

.ifmc-bar {
  display: grid;
  grid-template-columns: 150px 1fr 44px;
  align-items: center;
  gap: 16px;
}

.ifmc-bar__label {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--ink-55);
}

.ifmc-bar__track {
  position: relative;
  height: 5px;
  background: rgba(236, 238, 240, 0.09);
  overflow: hidden;
}

.ifmc-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--violet), var(--signal));
  box-shadow: 0 0 14px color-mix(in srgb, var(--signal) 50%, transparent);
  transition: width 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ifmc-bar__val {
  font-family: var(--mono);
  font-size: 16px;
  text-align: right;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

/* ---------- Quote ---------- */
.ifmc-quote {
  padding: 60px 0 8px;
  max-width: 30ch;
}

.ifmc-quote p {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.3;
}

.ifmc-quote mark {
  background: none;
  color: var(--signal);
}

.ifmc-quote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.ifmc-quote cite::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--signal);
  vertical-align: middle;
  margin-right: 10px;
}

/* ---------- Collapsible notes ---------- */
.ifmc-notes { margin: 34px 0 0; }

.ifmc-notes summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 2px;
}

.ifmc-notes summary::-webkit-details-marker { display: none; }
.ifmc-notes summary::after { content: '  \2193'; }
.ifmc-notes[open] summary::after { content: '  \2191'; }
.ifmc-notes summary:hover { color: var(--paper); border-bottom-color: var(--paper); }

.ifmc-notes > div {
  margin-top: 24px;
  padding-left: 22px;
  border-left: 1px solid var(--rule);
  max-width: 68ch;
}

.ifmc-notes p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-70);
  margin-bottom: 16px;
}

/* =========================================
   LESSONS - four lines, big type
   ========================================= */
.ifmc-lessons {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(80px, 14vh, 150px) clamp(20px, 5vw, 64px);
}

.ifmc-lessons__kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--signal);
  margin-bottom: 30px;
}

.ifmc-lessons ol {
  list-style: none;
  counter-reset: lesson;
}

.ifmc-lessons li {
  counter-increment: lesson;
  position: relative;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.25;
  padding: 26px 0 26px clamp(56px, 7vw, 90px);
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-70);
  transition: color 0.3s;
}

.ifmc-lessons li:hover { color: var(--paper); }

.ifmc-lessons li::before {
  content: '0' counter(lesson);
  position: absolute;
  left: 0;
  top: 32px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--signal);
}

/* =========================================
   FOOT
   ========================================= */
.ifmc-foot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(34px, 5vh, 56px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 22px;
  border-top: 1px solid var(--rule);
  padding-top: 34px;
}

.ifmc-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
}

.ifmc-foot__next {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--paper);
  border-bottom: none;
}

.ifmc-foot__next::after {
  content: '  \2192';
  color: var(--signal);
  display: inline-block;
  transition: transform 0.2s;
}

.ifmc-foot__next:hover { color: var(--accent); }
.ifmc-foot__next:hover::after { transform: translateX(6px); }

/* =========================================
   GENERIC CASE PAGES (converted projects)
   Same language as the IFMC page: starfield
   dots, big type, hairlines, mono microtype.
   ========================================= */
.bg-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

main#main-content { position: relative; z-index: 1; }

/* ---------- Hero (no 3D object; dots carry the depth) ---------- */
.case-hero {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px clamp(20px, 5vw, 64px) 44px;
}

.case-hero__kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 18px;
}

.case-hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(52px, 9vw, 118px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 22px;
}

.case-hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-70);
  max-width: 58ch;
  margin-bottom: 24px;
}

.case-hero__facts {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.9;
  color: var(--ink-55);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.case-hero__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 8px;
}

.case-hero__tool {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-58);
}

.case-hero__tool:not(:first-of-type)::before {
  content: '\00B7';
  margin: 0 9px;
  color: rgba(236, 238, 240, 0.22);
}

/* ---------- Sections ---------- */
.case-sec {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(54px, 9vh, 96px) clamp(20px, 5vw, 64px) 12px;
}

.case-sec__no {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
}

.case-sec__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 30px;
  max-width: 22ch;
}

.case-sec p { color: var(--ink-70); }

/* Concept: prose + facts sidebar */
.concept-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 40px clamp(40px, 6vw, 90px);
  align-items: start;
}

.concept-body p {
  max-width: 62ch;
  margin-bottom: 18px;
  font-size: 16.5px;
  line-height: 1.75;
}

.concept-sidebar {
  border-top: 1px solid var(--rule);
}

.concept-sidebar__fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.concept-sidebar__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-58);
}

.concept-sidebar__value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
}

/* Systems / breakdown items: numbered hairline blocks */
.systems-grid {
  counter-reset: sysitem;
  border-top: 1px solid var(--rule);
}

.system-item {
  counter-increment: sysitem;
  position: relative;
  padding: 30px 0 28px clamp(52px, 6vw, 84px);
  border-bottom: 1px solid var(--rule-soft);
}

.system-item::before {
  content: counter(sysitem, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 34px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--signal);
}

.system-item__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.system-item__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -0.01em;
}

.system-item__badge,
.system-item__genre {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}

.system-item__desc {
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.75;
}

.system-item__video {
  margin-top: 18px;
  max-width: 760px;
}

.system-item__video video,
.system-item__video iframe {
  width: 100%;
  border: 1px solid var(--rule);
  background: #050507;
}

.system-item--link a { border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Challenge cards: why/now pairs on hairlines */
.challenges-grid {
  counter-reset: chitem;
  border-top: 1px solid var(--rule);
}

.challenge-card {
  counter-increment: chitem;
  position: relative;
  padding: 30px 0 26px clamp(52px, 6vw, 84px);
  border-bottom: 1px solid var(--rule-soft);
}

.challenge-card::before {
  content: counter(chitem, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 34px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--signal);
}

.challenge-card__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.challenge-card__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 14px 0 4px;
}

.challenge-card__text {
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.75;
}

/* Video / cinema blocks */
.case-screen {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 70px) clamp(20px, 5vw, 64px) 10px;
}

.video-wrap {
  position: relative;
  background: #050507;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 56px rgba(0, 0, 0, .32);
}

.video-wrap video,
.video-wrap iframe,
.video-wrap img {
  display: block;
  width: 100%;
}

.video-wrap iframe {
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Click-to-load YouTube facade. Paired with video-facade.js: the poster and
   play control are real markup, so the block paints its frame immediately
   instead of showing the black box a cold iframe leaves behind. */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050507;
}

.yt-facade iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-facade__launch {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.yt-facade__launch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-facade__launch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, .46));
  transition: background .18s;
}

.yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(240, 242, 244, .94);
  color: #101012;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42);
  transition: transform .18s, background .18s;
}

.yt-facade__play svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  transform: translateX(2px);
}

.yt-facade__launch:hover .yt-facade__play,
.yt-facade__launch:focus-visible .yt-facade__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.yt-facade__launch:hover::after { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .38)); }
.yt-facade__launch:focus-visible { outline: 2px solid var(--mw-cyan, #6fb7ff); outline-offset: -4px; }

@media (max-width: 620px) {
  .yt-facade__play { width: 56px; height: 56px; }
  .yt-facade__play svg { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .yt-facade__play,
  .yt-facade__launch::after { transition: none; }
}

.video-intro {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-55);
  max-width: 70ch;
  margin-bottom: 18px;
  line-height: 1.7;
}

.video-caption,
.video-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-55);
  padding-top: 12px;
  line-height: 1.6;
}

/* Galleries (lightbox keeps working on these classes) */
.gallery-section,
.screenshots-section,
.screenshot-section,
.hero-image-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(46px, 8vh, 80px) clamp(20px, 5vw, 64px) 14px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  /* Contained tiles keep their capture's own height, so a row holds tiles of
     different heights. Stretching them would reopen the empty band under the
     shorter capture that giving them their own shape just closed. */
  align-items: start;
}

/* height:auto is load-bearing. Without it the img keeps the height from its
   HTML attribute, so both dimensions are resolved and aspect-ratio is
   ignored: at 390px the box stayed 350x540 while the frame drew 350x197,
   leaving 171px of black band above and below it. */
.screenshot-section img,
.hero-image-section > img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:contain;
  border:1px solid var(--rule);
  background:#050507;
}

.gallery-item {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  border: 1px solid var(--rule);
  background: #050507;
  color: inherit;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: transform 0.35s ease, opacity 0.3s;
}

.gallery-item--contain img { object-fit: contain; }

/* The caption overlay assumes a cover crop, where the bottom strip is scenery.
   A contained UI capture puts real content there instead: on the Wwise RTPC
   tree the label sat across the last rows of parameter names. These tiles give
   the caption its own band under the image, at every width. */
.gallery-item--contain {
  display: flex;
  flex-direction: column;
}

/* height:100% resolves against a flex column sized by its own content, so the
   capture overflowed the tile and lost its bottom rows to overflow:hidden. */
.gallery-item--contain img { height: auto; }

.gallery-item--contain .gallery-item__caption {
  position: static;
  padding: 9px 12px 11px;
  background: rgba(5, 5, 7, 0.9);
}

/* Contained tiles hold UI captures, whose shapes range from 0.49 to 2.66.
   Fitting those into a 16/10 tile shrank a tall Wwise panel to 107px of a
   348px phone screen, and did the same on a desktop window: the RTPC and
   states tree drew 162px wide inside a 527px tile, so 69% of the tile was
   black and the parameter names were unreadable. The tile now takes the
   capture's own shape at every width, which is what the phone layout already
   did, so nothing is letterboxed.

   --shot-ar rather than `auto`: `auto` also drops the ratio the browser derives
   from the width and height attributes, so an unloaded lazy capture collapses
   to 2px. Collapsed captures shift the page as they arrive and can stay blank
   on a fast phone scroll, because they never occupy enough of the viewport to
   trigger loading. build.cjs sets --shot-ar from the width and height
   attributes, which keeps the capture's own shape and reserves its space. */
.gallery-item--contain img {
  height: auto;
  aspect-ratio: var(--shot-ar, 16 / 10);
}

/* A 0.49 capture would otherwise stand 1070px tall in a 527px column and push
   the rest of the section off the screen. Capping the height leaves some side
   band on the tallest captures, but at 620px they still draw nearly four times
   the area the 16/10 tile gave them.

   The cap starts above the single-column breakpoint on purpose: a phone tile
   is about 350px wide, so the same capture needs 715px of height to stay
   edge to edge, and a 620px cap there would band a capture that currently
   fills the screen width. */
@media (min-width: 621px) {
  .gallery-item--contain img { max-height: 620px; }
}

.gallery-item:hover img { transform: scale(1.03); }

.gallery-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 12px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.85));
}

.gallery-item__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(5, 5, 7, 0.6);
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-item:hover .gallery-item__zoom { opacity: 1; }

/* Without hover the badge never appeared, so on a phone five pages carried
   captures that open a lightbox with nothing to say so. It stays visible
   there, dimmed enough not to compete with the capture underneath. */
@media (hover: none) {
  .gallery-item__zoom { opacity: 0.72; }
}

.gallery-item__zoom svg {
  width: 14px;
  height: 14px;
  stroke: var(--paper);
  fill: none;
  stroke-width: 2;
}

/* =========================================
   LIGHTBOX
   ========================================= */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.lightbox[hidden] {
  display: none !important;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: 90vw;
  max-height: calc(100vh - 128px);
  max-height: calc(100svh - 128px);
  object-fit: contain;
  border-radius: 2px;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.active img {
  transform: scale(1);
}

.lightbox__caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(720px, calc(100vw - 40px));
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  background: rgba(0, 0, 0, 0.48);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--sans);
  line-height: 1;
  border: none;
  background: none;
}

.lightbox__close:hover { color: #fff; }

.lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--sans);
  line-height: 1;
  border: none;
  background: none;
  padding: 16px;
  user-select: none;
}

.lightbox__nav:hover { color: #fff; }

.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

/* Injected "Audio notes" transcript under videos */
.video-transcript {
  max-width: 760px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  color: var(--ink-55);
  background: rgba(236, 238, 240, 0.04);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}

.video-transcript summary {
  color: var(--ink-70);
  font-weight: 600;
  cursor: pointer;
}

.video-transcript p { margin-top: 8px; }

.screenshots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.screenshot {
  border: 1px solid var(--rule);
  background: #050507;
  overflow: hidden;
}

.screenshot--wide { grid-column: 1 / -1; }

.screenshot img,
.hero-image-wrap img {
  display: block;
  width: 100%;
}

.hero-image-wrap {
  border: 1px solid var(--rule);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}

/* Callouts & footnotes */
.callout-card {
  border: 1px solid var(--rule);
  background: rgba(24, 24, 27, 0.55);
  padding: 24px 26px;
  max-width: 640px;
}

.callout-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 8px;
}

.callout-card__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 8px;
}

.callout-card__desc {
  font-size: 14.5px;
  margin-bottom: 12px;
}

.callout-card__link {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
}

.footer-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-55);
  max-width: 70ch;
  line-height: 1.8;
}

/* Converted pages reuse the IFMC footer */
.ifmc-foot { margin-top: clamp(50px, 9vh, 90px); }

@media (max-width: 880px) {
  .case-hero {
    min-height: 46vh;
    padding-top: 96px;
  }

  .concept-layout { grid-template-columns: 1fr; gap: 30px; }

  .system-item,
  .challenge-card { padding-left: 44px; }

  .screenshots-grid { grid-template-columns: 1fr; }
}

/* =========================================
   RESPONSIVE / MOTION / PRINT
   ========================================= */
@media (max-width: 880px) {
  /* 3D sits in the top half, copy anchors to the bottom (like home) */
  .ifmc-hero {
    justify-content: flex-end;
    padding-bottom: 12vh;
  }

  .ifmc-score {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ifmc-bar {
    grid-template-columns: 1fr 40px;
  }

  .ifmc-bar__label {
    grid-column: 1 / -1;
    margin-bottom: -12px;
  }

  .ifmc-quote { max-width: none; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }

  .ifmc-entry { padding-top: 64px; }

  .ifmc-screen { margin-bottom: 40px; }

  .ifmc-screen__frame { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }

  .ifmc-notes > div { padding-left: 16px; }
}

/* =========================================
   SHADOW FRAMES — VISUAL STORY CASE STUDY
   Scoped so the other project pages keep the shared case layout.
   ========================================= */
.sf-kicker {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
}

.sf-hero {
  position: relative;
  min-height: min(88vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: #050507;
}

.sf-hero__media,
.sf-hero__shade {
  position: absolute;
  inset: 0;
}

.sf-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.78) contrast(1.04);
}

.sf-hero__shade {
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.18) 0%, rgba(5, 5, 7, 0.2) 35%, rgba(5, 5, 7, 0.92) 100%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.7), transparent 62%);
}

.sf-hero__content {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 150px clamp(20px, 5vw, 64px) 54px;
}

.sf-hero h1 {
  max-width: 9ch;
  margin-bottom: 22px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(62px, 10vw, 138px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-wrap: balance;
}

.sf-hero__lead {
  max-width: 620px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--paper);
}

.sf-hero__role {
  max-width: 78ch;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-70);
}

.sf-hero__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.sf-tool {
  width: 58px;
  height: 52px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(236, 238, 240, 0.16);
  border-radius: 9px;
  background: rgba(5, 5, 7, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sf-tool img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.sf-intro,
.sf-bible {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(78px, 12vh, 132px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}

.sf-intro h2,
.sf-bible h2,
.sf-section-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.sf-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.sf-intro__copy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.sf-gallery-section,
.sf-screen {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(58px, 9vh, 96px) clamp(20px, 5vw, 64px);
}

.sf-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
  column-gap: clamp(40px, 7vw, 94px);
  align-items: end;
  margin-bottom: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.sf-section-head .sf-kicker {
  grid-column: 1 / -1;
}

.sf-section-head > p:last-child {
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-55);
}

.sf-section-head--compact {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr);
}

.sf-screen .video-wrap iframe,
.sf-screen .video-wrap video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.sf-gallery-section {
  max-width: 1320px;
}

.sf-gallery {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: #050507;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
}

.sf-gallery__stage {
  position: relative;
  outline: none;
}

.sf-gallery__stage:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.sf-gallery__stage > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050507;
}

.sf-gallery__footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  color: var(--ink-55);
}

.sf-gallery__footer [data-sf-gallery-count] {
  flex-shrink: 0;
  color: var(--signal);
}

.sf-gallery__arrow {
  position: absolute;
  top: calc(50% - 24px);
  width: 46px;
  height: 46px;
  border: 1px solid rgba(236, 238, 240, 0.24);
  border-radius: 50%;
  background: rgba(5, 5, 7, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sf-gallery__arrow:hover {
  background: rgba(5, 5, 7, 0.92);
  transform: scale(1.05);
}

.sf-gallery__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sf-gallery__arrow--prev { left: 16px; }
.sf-gallery__arrow--next { right: 16px; }

.sf-gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 126px;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  border-top: 1px solid var(--rule-soft);
  scrollbar-width: thin;
}

.sf-gallery__thumbs button {
  position: relative;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #09090b;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sf-gallery__thumbs button:hover { opacity: 0.82; }

.sf-gallery__thumbs button[aria-current="true"] {
  opacity: 1;
  border-color: var(--signal);
}

.sf-gallery__thumbs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}

.sf-gallery__thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.sf-tech {
  padding-top: clamp(58px, 9vh, 96px);
}

.sf-tech .gallery-item {
  border-radius: 9px;
}

.sf-tech .gallery-item img {
  background: #09090b;
}

.sf-bible {
  margin-top: clamp(50px, 8vh, 86px);
  padding-top: 42px;
  padding-bottom: 42px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.sf-bible > div:last-child {
  padding-top: 8px;
}

.sf-bible p:not(.sf-kicker) {
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.sf-bible a {
  display: inline-flex;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .sf-hero { min-height: 74vh; }

  .sf-intro,
  .sf-bible,
  .sf-section-head {
    grid-template-columns: 1fr;
  }

  .sf-section-head > p:last-child {
    margin-top: 18px;
  }

}

@media (max-width: 620px) {
  .sf-hero {
    min-height: 82vh;
  }

  .sf-hero__media img {
    object-position: 58% center;
  }

  .sf-hero__content {
    padding-bottom: 34px;
  }

  .sf-hero h1 {
    font-size: clamp(54px, 18vw, 78px);
  }

  .sf-hero__lead {
    font-size: 18px;
  }

  .sf-hero__role {
    font-size: 11px;
  }

  .sf-intro,
  .sf-bible {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sf-intro__copy { padding-top: 20px; }

  .sf-gallery__footer {
    min-height: 72px;
    font-size: 9px;
  }

  .sf-gallery__arrow {
    top: calc(50% - 44px);
    width: 40px;
    height: 40px;
  }

  .sf-gallery__arrow--prev { left: 10px; }
  .sf-gallery__arrow--next { right: 10px; }

  .sf-gallery__thumbs {
    grid-auto-columns: 94px;
  }

  .sf-bible {
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* =========================================
   SHADOW FRAMES — FOCUSED CASE STUDY
   The later rules intentionally replace the first visual-story pass above.
   ========================================= */
.sf-hero {
  min-height: min(94svh, 960px);
}

.sf-hero__media img {
  filter: brightness(0.68) contrast(1.12) saturate(0.78);
  transform: scale(1.015);
}

.sf-hero__shade {
  background:
    linear-gradient(180deg, rgba(5, 5, 7, 0.14) 0%, rgba(5, 5, 7, 0.2) 36%, rgba(5, 5, 7, 0.96) 100%),
    linear-gradient(90deg, rgba(5, 5, 7, 0.88) 0%, rgba(5, 5, 7, 0.42) 48%, rgba(5, 5, 7, 0.05) 78%);
}

.sf-hero__content {
  padding-top: 160px;
  padding-bottom: 48px;
}

.sf-hero h1 {
  max-width: none;
  margin-bottom: 24px;
  font-size: clamp(64px, 10.5vw, 146px);
  line-height: 0.82;
}

.sf-hero__lead {
  max-width: 760px;
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.18;
}

.sf-hero__summary {
  max-width: 610px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.sf-hero__role {
  margin-top: 22px;
}

.sf-intro {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  padding-top: clamp(88px, 13vh, 148px);
  padding-bottom: clamp(72px, 10vh, 112px);
}

.sf-intro__copy p:last-child {
  margin-bottom: 0;
}

.sf-screen,
.sf-anomaly,
.sf-challenges,
.sf-gallery-section,
.sf-tech {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 5vw, 64px);
}

.sf-gallery-section {
  max-width: 1320px;
}

.sf-section-head {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
  align-items: start;
  margin-bottom: clamp(30px, 5vh, 50px);
}

.sf-section-head .sf-kicker {
  grid-column: auto;
}

.sf-section-head > .sf-kicker {
  grid-column: 1 / -1;
}

.sf-section-head > div .sf-kicker {
  margin-bottom: 12px;
}

.sf-section-head > p:last-child {
  padding-top: 32px;
}

.sf-section-head h2 {
  max-width: 17ch;
}

.sf-video-frame {
  position: relative;
  overflow: hidden;
  padding: 34px 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #060608;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.42);
}

.sf-video-frame__label {
  position: absolute;
  top: 9px;
  left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.sf-video-frame .video-wrap {
  overflow: hidden;
  border-radius: 7px;
}

.sf-anomaly {
  max-width: 1320px;
}

.sf-system-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.sf-system-story__copy {
  max-width: 760px;
}

.sf-system-story__lead {
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 43px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.sf-system-story__copy > p:not(.sf-system-story__lead) {
  max-width: 65ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-70);
}

.sf-signal-path {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--signal) 36%, transparent);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-70);
}

.sf-signal-path span,
.sf-chapter__eyebrow,
.sf-priority-story__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--signal);
}

.sf-chapters {
  border-top: 1px solid var(--rule);
}

.sf-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--rule);
}

.sf-findings article { padding-top: 24px; }

.sf-findings h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.12;
}

.sf-findings p { color: var(--ink-70); line-height: 1.7; }

@media (max-width: 760px) {
  .sf-findings { grid-template-columns: 1fr; }
}

.sf-chapter {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) minmax(260px, 0.72fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: start;
  padding: clamp(40px, 7vh, 68px) 0;
  border-bottom: 1px solid var(--rule);
}

.sf-chapter h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.sf-chapter > div p {
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.sf-chapter > div p + p { margin-top: 18px; }

.sf-gallery__thumbs {
  grid-auto-flow: initial;
  grid-auto-columns: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sf-gallery__thumbs button {
  border-radius: 5px;
}

.sf-team-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(300px, 0.75fr);
  gap: clamp(42px, 9vw, 126px);
  margin-bottom: clamp(36px, 6vw, 68px);
  padding: clamp(34px, 5vw, 56px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.sf-team-story__lead {
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 39px);
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.sf-team-story > div p {
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.sf-team-story > div p + p { margin-top: 18px; }

.sf-tech .gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.sf-priority-story {
  display: grid;
  grid-template-columns: minmax(190px, 0.32fr) minmax(320px, 1fr);
  gap: clamp(34px, 8vw, 110px);
  align-items: start;
  margin-top: clamp(38px, 6vw, 70px);
  padding: clamp(30px, 5vw, 52px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.sf-priority-story > p:last-child {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.sf-bible {
  margin-top: clamp(50px, 8vh, 86px);
  background: linear-gradient(90deg, rgba(143, 184, 212, 0.04), transparent 55%);
}

@media (max-width: 900px) {
  .sf-hero { min-height: 82svh; }

  .sf-hero h1 { font-size: clamp(62px, 13vw, 112px); }

  .sf-intro,
  .sf-bible,
  .sf-section-head {
    grid-template-columns: 1fr;
  }

  .sf-section-head > p:last-child { padding-top: 0; }

  .sf-system-story { grid-template-columns: 1fr; }

  .sf-signal-path {
    max-width: 62ch;
    align-self: auto;
  }

  .sf-chapter {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  }

  .sf-chapter > div { grid-column: 2; }

  .sf-team-story { grid-template-columns: 1fr; }

  .sf-tech .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .sf-hero {
    min-height: 88svh;
  }

  .sf-hero__content {
    padding-top: 126px;
    padding-bottom: 30px;
  }

  .sf-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(52px, 18vw, 76px);
    line-height: 0.87;
  }

  .sf-hero__lead { font-size: 21px; }

  .sf-hero__summary { font-size: 13px; }

  .sf-tool {
    width: 52px;
    height: 48px;
  }

  .sf-intro {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .sf-screen,
  .sf-anomaly,
  .sf-challenges,
  .sf-gallery-section,
  .sf-tech {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .sf-section-head {
    margin-bottom: 28px;
  }

  .sf-video-frame {
    padding: 29px 4px 4px;
    border-radius: 8px;
  }

  .sf-video-frame .video-wrap { border-radius: 5px; }

  .sf-system-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .sf-system-story__lead { font-size: 25px; }

  .sf-chapter {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sf-chapter > div {
    grid-column: auto;
    margin-top: 6px;
  }

  .sf-gallery__thumbs {
    grid-auto-flow: column;
    grid-auto-columns: 94px;
    grid-template-columns: none;
  }

  .sf-tech .gallery-grid { grid-template-columns: 1fr; }

  .sf-team-story,
  .sf-priority-story {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================================
   XR LABS — SPATIAL TRAINING CASE STUDY
   ========================================= */
.xr-page {
  --xr-signal: #b9d8ef;
  --xr-warm: #d2c09c;
  position: relative;
}

.xr-kicker {
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--xr-signal);
}

.xr-hero {
  position: relative;
  min-height: min(94svh, 960px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: #060709;
}

.xr-hero__media,
.xr-hero__shade {
  position: absolute;
  inset: 0;
}

.xr-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: brightness(0.66) contrast(1.06) saturate(0.72);
  transform: scale(1.01);
}

.xr-hero__shade {
  background:
    linear-gradient(180deg, rgba(4, 5, 7, 0.25) 0%, rgba(4, 5, 7, 0.18) 34%, rgba(4, 5, 7, 0.96) 100%),
    linear-gradient(90deg, rgba(4, 5, 7, 0.96) 0%, rgba(4, 5, 7, 0.62) 44%, rgba(4, 5, 7, 0.08) 78%);
}

.xr-hero__content {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 150px clamp(20px, 5vw, 64px) 46px;
}

.xr-hero h1 {
  max-width: 7ch;
  margin-bottom: 23px;
  font-family: var(--serif);
  font-size: clamp(66px, 10.5vw, 146px);
  font-weight: 700;
  line-height: 0.83;
  text-wrap: balance;
}

.xr-hero__lead {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.17;
  color: var(--paper);
}

.xr-hero__summary {
  max-width: 660px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.xr-hero__role {
  max-width: 78ch;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink-70);
}

.xr-hero__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 17px;
}

.xr-hero__tools span {
  padding: 5px 9px;
  border: 1px solid rgba(236, 238, 240, 0.2);
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.42);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.xr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.xr-hero__actions a {
  display: inline-flex;
  min-width: 195px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 10px 13px;
  border: 1px solid rgba(236, 238, 240, 0.22);
  border-radius: 5px;
  background: rgba(5, 6, 8, 0.52);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--paper);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.xr-hero__actions a:first-child {
  border-color: color-mix(in srgb, var(--xr-signal) 62%, transparent);
  background: color-mix(in srgb, var(--xr-signal) 14%, rgba(5, 6, 8, 0.62));
}

.xr-hero__actions a:hover {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.xr-snapshot {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 96px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.xr-snapshot__label {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--xr-signal);
}

.xr-snapshot > p:last-child {
  max-width: 850px;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.62;
  color: var(--ink-70);
}

.xr-snapshot strong { color: var(--paper); }

.xr-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(88px, 13vh, 148px) clamp(20px, 5vw, 64px) clamp(72px, 10vh, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
}

.xr-intro h2,
.xr-section-head h2,
.xr-disclosure h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  text-wrap: balance;
}

.xr-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.xr-intro__copy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.xr-intro__copy p:last-child { margin-bottom: 0; }

.xr-trainee-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 52px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.xr-trainee-story__label {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--xr-signal);
}

.xr-trainee-story > p:last-child {
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.xr-demo,
.xr-questions,
.xr-challenges,
.xr-disclosure {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 5vw, 64px);
}

.xr-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
  gap: clamp(38px, 7vw, 94px);
  align-items: start;
  margin-bottom: clamp(30px, 5vh, 50px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.xr-section-head h2 {
  max-width: 17ch;
}

.xr-section-head > p:last-child {
  max-width: 55ch;
  padding-top: 31px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-55);
}

.xr-video-frame {
  overflow: hidden;
  padding: 0 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #060709;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.42);
}

.xr-video-frame__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 6px 9px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.xr-video-frame .video-wrap {
  overflow: hidden;
  border-radius: 7px;
}

.xr-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.xr-questions {
  max-width: 1320px;
}

.xr-spatial-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.xr-spatial-story__copy { max-width: 760px; }

.xr-spatial-story__lead {
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 43px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.xr-spatial-story__copy > p:not(.xr-spatial-story__lead) {
  max-width: 65ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-70);
}

.xr-listening-note {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--xr-signal) 36%, transparent);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-70);
}

.xr-listening-note span,
.xr-chapter__eyebrow,
.xr-disclosure__copy span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xr-signal);
}

.xr-chapters {
  border-top: 1px solid var(--rule);
}

.xr-chapter {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) minmax(260px, 0.72fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: start;
  padding: clamp(40px, 7vh, 68px) 0;
  border-bottom: 1px solid var(--rule);
}

.xr-chapter h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.xr-chapter > div p {
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.xr-chapter > div p + p { margin-top: 18px; }

.xr-disclosure {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, 0.95fr);
  gap: clamp(48px, 9vw, 124px);
  margin-top: clamp(50px, 8vh, 86px);
  padding-top: clamp(42px, 7vh, 70px);
  padding-bottom: clamp(42px, 7vh, 70px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(185, 216, 239, 0.05), transparent 54%);
}

.xr-disclosure__heading > p:last-child {
  max-width: 57ch;
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-70);
}

.xr-disclosure__copy {
  padding-top: 27px;
  border-top: 1px solid var(--rule);
}

.xr-disclosure__copy p {
  max-width: 55ch;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-70);
}

.xr-disclosure__copy p + p { margin-top: 28px; }

.xr-page > .ifmc-foot {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .xr-hero { min-height: 82svh; }

  .xr-hero h1 { font-size: clamp(62px, 13vw, 112px); }

  .xr-intro,
  .xr-section-head,
  .xr-disclosure {
    grid-template-columns: 1fr;
  }

  .xr-trainee-story {
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 32px;
  }

  .xr-section-head > p:last-child { padding-top: 0; }

  .xr-spatial-story { grid-template-columns: 1fr; }

  .xr-listening-note {
    max-width: 62ch;
    align-self: auto;
  }

  .xr-chapter {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  }

  .xr-chapter > div { grid-column: 2; }

  .xr-disclosure__copy { padding-top: 24px; }
}

@media (max-width: 620px) {
  .xr-hero {
    min-height: 88svh;
  }

  .xr-hero__media img {
    object-position: 63% center;
  }

  .xr-hero__shade {
    background:
      linear-gradient(180deg, rgba(4, 5, 7, 0.28) 0%, rgba(4, 5, 7, 0.18) 28%, rgba(4, 5, 7, 0.97) 100%),
      linear-gradient(90deg, rgba(4, 5, 7, 0.78), rgba(4, 5, 7, 0.12));
  }

  .xr-hero__content {
    padding-top: 126px;
    padding-bottom: 30px;
  }

  .xr-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(54px, 18vw, 78px);
    line-height: 0.88;
  }

  .xr-hero__lead { font-size: 21px; }

  .xr-hero__summary { font-size: 13px; }

  .xr-hero__role { font-size: 9px; }

  .xr-hero__actions a {
    flex: 1 1 160px;
    min-width: 0;
  }

  .xr-snapshot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .xr-intro {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .xr-trainee-story {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
    padding: 24px 0 28px;
  }

  .xr-trainee-story > p:last-child { font-size: 20px; }

  .xr-demo,
  .xr-questions,
  .xr-challenges,
  .xr-disclosure {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .xr-section-head { margin-bottom: 28px; }

  .xr-video-frame {
    padding: 0 4px 4px;
    border-radius: 8px;
  }

  .xr-video-frame__bar { padding-left: 4px; padding-right: 4px; }

  .xr-video-frame .video-wrap { border-radius: 5px; }

  .xr-spatial-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .xr-spatial-story__lead { font-size: 25px; }

  .xr-chapter {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .xr-chapter > div {
    grid-column: auto;
    margin-top: 6px;
  }

  .xr-disclosure {
    gap: 34px;
  }

  .xr-disclosure__copy { padding-top: 22px; }
}

/* XR Labs — concise visual case study */
.xr-hero {
  min-height: min(88svh, 860px);
}

.xr-hero__content {
  padding-bottom: clamp(34px, 6vh, 58px);
}

.xr-hero__summary {
  max-width: 620px;
}

.xr-hero__tools {
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.xr-tool {
  width: 58px;
  height: 52px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(236, 238, 240, 0.16);
  border-radius: 9px;
  background: rgba(5, 6, 8, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.xr-tool img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.xr-tool--steam {
  width: 128px;
}

.xr-tool--steam img {
  width: 116px;
  height: 44px;
  object-fit: cover;
}

.xr-systems {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 11vh, 120px) clamp(20px, 5vw, 64px) clamp(58px, 9vh, 96px);
}

.xr-system-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 38px);
}

.xr-system-card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(236, 238, 240, 0.025);
}

.xr-system-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1.45 / 1;
  padding: clamp(8px, 1.5vw, 18px);
  overflow: hidden;
  background: #f5f5f3;
}

.xr-system-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.xr-system-card__media--dark {
  padding: 0;
  background:
    linear-gradient(rgba(185, 216, 239, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 216, 239, 0.035) 1px, transparent 1px),
    #07090c;
  background-size: 32px 32px;
}

.xr-diagram {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--xr-signal);
}

.xr-direction-diagram svg {
  display: block;
  width: 100%;
  height: 100%;
}

.xr-direction-diagram text {
  fill: color-mix(in srgb, var(--paper) 48%, transparent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.xr-signal-label { fill: var(--xr-signal) !important; }
.xr-signal-label--warm { fill: var(--xr-warm) !important; }

.xr-floorplan-outline {
  fill: rgba(185, 216, 239, 0.025);
  stroke: rgba(185, 216, 239, 0.3);
  stroke-width: 1.5;
}

.xr-floorplan-wall {
  fill: none;
  stroke: var(--xr-warm);
  stroke-width: 5;
  stroke-linecap: square;
}

.xr-sound-route {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.xr-sound-route--direct {
  stroke: rgba(185, 216, 239, 0.64);
}

.xr-sound-route--indirect {
  stroke: rgba(210, 192, 156, 0.55);
}

.xr-route-trace {
  fill: none;
  stroke: var(--xr-warm);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 97;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: xr-route-travel 5s linear infinite;
}

.xr-direction-diagram .xr-source-node {
  fill: var(--xr-signal);
}

.xr-direction-diagram .xr-listener-node circle:first-child {
  fill: #07090c;
  stroke: var(--xr-warm);
  stroke-width: 2;
}

.xr-direction-diagram .xr-listener-node circle:last-child {
  fill: var(--xr-warm);
}

.xr-door-label {
  fill: color-mix(in srgb, var(--xr-warm) 72%, transparent) !important;
}

@keyframes xr-route-travel {
  0% { opacity: 0; stroke-dashoffset: 100; }
  3% { opacity: 0.9; }
  28% { opacity: 0.9; stroke-dashoffset: 0; }
  32%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

.xr-weapon-stage {
  position: absolute;
  inset: 0 0 45%;
}

.xr-weapon-track {
  position: absolute;
  left: calc(17% + clamp(58px, 7.4vw, 76px));
  right: 9%;
  top: 53%;
  height: 1px;
  background: rgba(185, 216, 239, 0.28);
}

.xr-weapon-track::before,
.xr-weapon-track::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: rgba(185, 216, 239, 0.44);
}

.xr-weapon-track::before { left: 42%; }
.xr-weapon-track::after { left: 84%; }

.xr-weapon-source {
  position: absolute;
  left: 17%;
  top: 53%;
  width: clamp(108px, 15vw, 140px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(43deg);
  z-index: 2;
}

.xr-weapon-source img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    brightness(1.12)
    contrast(1.08)
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.52));
}

.xr-weapon-listener {
  position: absolute;
  left: 44%;
  top: calc(53% - 11px);
  width: 22px;
  height: 22px;
  border: 1px solid var(--xr-warm);
  border-radius: 50%;
  background: rgba(210, 192, 156, 0.06);
  transform: translateX(-50%);
  animation: xr-listener-distance 9s ease-in-out infinite alternate;
}

.xr-weapon-listener i {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--xr-warm);
}

.xr-weapon-tick {
  position: absolute;
  top: calc(53% + 30px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-58);
}

.xr-weapon-tick--near { left: 42%; }
.xr-weapon-tick--mid { left: 64%; }
.xr-weapon-tick--far { right: 8%; }

@keyframes xr-listener-distance {
  0%, 20% { left: 44%; }
  40%, 60% { left: 65%; }
  80%, 100% { left: 86%; }
}

.xr-mix-bars {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  display: grid;
  gap: 19px;
}

.xr-mix-row {
  display: grid;
  grid-template-columns: minmax(108px, 0.29fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.xr-mix-row > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--ink-55);
}

.xr-mix-row > div span:last-child {
  color: var(--ink-58);
}

.xr-mix-row > i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(236, 238, 240, 0.07);
}

.xr-mix-row b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.xr-mix-row--near b {
  background: var(--xr-signal);
  animation: xr-near-mix 9s ease-in-out infinite alternate;
}

.xr-mix-row--far b {
  width: 8%;
  background: var(--xr-warm);
  animation: xr-far-mix 9s ease-in-out infinite alternate;
}

@keyframes xr-near-mix {
  0%, 20% { width: 100%; }
  40%, 60% { width: 52%; }
  80%, 100% { width: 8%; }
}

@keyframes xr-far-mix {
  0%, 20% { width: 8%; }
  40%, 60% { width: 52%; }
  80%, 100% { width: 100%; }
}

.xr-system-card figcaption {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 174px;
  padding: clamp(22px, 3vw, 34px);
}

.xr-system-card__number {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--xr-signal);
}

.xr-system-card h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.05;
}

.xr-system-card figcaption div p {
  max-width: 48ch;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-70);
}

.xr-demo {
  padding-top: clamp(58px, 9vh, 96px);
}

.xr-confidentiality {
  max-width: 1072px;
  margin: clamp(16px, 3vh, 32px) auto clamp(72px, 10vh, 112px);
  padding: 22px clamp(20px, 5vw, 38px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-55);
}

.xr-confidentiality span {
  margin-right: 16px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--xr-signal);
}

@media (max-width: 720px) {
  .xr-hero {
    min-height: 82svh;
  }

  .xr-system-grid {
    grid-template-columns: 1fr;
  }

  .xr-system-card figcaption {
    min-height: 0;
  }

  .xr-mix-bars {
    left: 6%;
    right: 6%;
    gap: 14px;
  }

  .xr-mix-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 9px;
  }

  .xr-mix-row > div span:last-child {
    display: none;
  }

  .xr-weapon-tick {
    font-size: 8px;
  }

  .xr-tool {
    width: 52px;
    height: 48px;
  }

  .xr-tool--steam {
    width: 116px;
  }

  .xr-tool--steam img {
    width: 106px;
    height: 40px;
  }

  .xr-confidentiality span {
    display: block;
    margin: 0 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xr-route-trace,
  .xr-weapon-listener,
  .xr-mix-row b {
    animation: none;
  }

  .xr-route-trace { display: none; }
  .xr-weapon-listener { left: 65%; }
  .xr-mix-row--near b,
  .xr-mix-row--far b { width: 52%; }
}

/* =========================================
   NOT TODAY, DARLING — COUCH KART CASE STUDY
   ========================================= */
.nt-page {
  --nt-signal: #e9c288;
  position: relative;
}

.nt-kicker {
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-signal);
}

.nt-hero {
  position: relative;
  min-height: min(94svh, 960px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: #080605;
}

.nt-hero__media,
.nt-hero__shade {
  position: absolute;
  inset: 0;
}

.nt-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: brightness(0.62) contrast(1.08) saturate(0.82);
  transform: scale(1.01);
}

.nt-hero__shade {
  background:
    linear-gradient(180deg, rgba(7, 5, 4, 0.22) 0%, rgba(7, 5, 4, 0.18) 34%, rgba(7, 5, 4, 0.96) 100%),
    linear-gradient(90deg, rgba(7, 5, 4, 0.94) 0%, rgba(7, 5, 4, 0.55) 46%, rgba(7, 5, 4, 0.06) 78%);
}

.nt-hero__content {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 150px clamp(20px, 5vw, 64px) 46px;
}

.nt-hero h1 {
  max-width: 10ch;
  margin-bottom: 23px;
  font-family: var(--serif);
  font-size: clamp(54px, 8.6vw, 122px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.nt-hero__lead {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.9vw, 38px);
  font-weight: 500;
  line-height: 1.18;
  color: var(--paper);
}

.nt-hero__summary {
  max-width: 640px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.nt-hero__role {
  max-width: 78ch;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink-70);
}

.nt-hero__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 17px;
}

.nt-hero__tools span {
  padding: 5px 9px;
  border: 1px solid rgba(236, 238, 240, 0.2);
  border-radius: 999px;
  background: rgba(8, 6, 5, 0.42);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.nt-hero__actions,
.sf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.nt-hero__actions a,
.sf-hero__actions a {
  display: inline-flex;
  min-width: 185px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 10px 13px;
  border: 1px solid rgba(236, 238, 240, 0.22);
  border-radius: 5px;
  background: rgba(8, 6, 5, 0.52);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--paper);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nt-hero__actions a:first-child,
.sf-hero__actions a:first-child {
  border-color: color-mix(in srgb, var(--nt-signal) 62%, transparent);
  background: color-mix(in srgb, var(--nt-signal) 14%, rgba(8, 6, 5, 0.62));
}

.nt-hero__actions a:hover,
.sf-hero__actions a:hover {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.nt-snapshot {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 96px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.nt-snapshot__label {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nt-signal);
}

.nt-snapshot > p:last-child {
  max-width: 850px;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.62;
  color: var(--ink-70);
}

.nt-snapshot strong {
  font-weight: 600;
  color: var(--paper);
}

.nt-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(88px, 13vh, 148px) clamp(20px, 5vw, 64px) clamp(72px, 10vh, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
}

.nt-intro h2,
.nt-section-head h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.nt-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.nt-intro__copy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.nt-intro__copy p:last-child { margin-bottom: 0; }

.nt-couch-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 52px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.nt-couch-story__label {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nt-signal);
}

.nt-couch-story > p:last-child {
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.nt-screen,
.nt-mix,
.nt-challenges,
.nt-shots,
.nt-tech {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 5vw, 64px);
}

.nt-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
  gap: clamp(38px, 7vw, 94px);
  align-items: start;
  margin-bottom: clamp(30px, 5vh, 50px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.nt-section-head h2 {
  max-width: 17ch;
}

.nt-section-head > p:last-child {
  max-width: 55ch;
  padding-top: 31px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-55);
}

.nt-video-frame {
  overflow: hidden;
  padding: 0 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #080605;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.42);
}

.nt-video-frame__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 6px 9px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.nt-video-frame .video-wrap {
  overflow: hidden;
  border-radius: 7px;
}

.nt-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.nt-mix {
  max-width: 1320px;
}

.nt-system-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.nt-system-story__copy { max-width: 760px; }

.nt-system-story__lead {
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 43px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.nt-system-story__copy > p:not(.nt-system-story__lead) {
  max-width: 65ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-70);
}

.nt-signal-path {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--nt-signal) 36%, transparent);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-70);
}

.nt-signal-path span,
.nt-chapter__eyebrow,
.nt-priority-story__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nt-signal);
}

.nt-chapters {
  border-top: 1px solid var(--rule);
}

.nt-chapter {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) minmax(260px, 0.72fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: start;
  padding: clamp(40px, 7vh, 68px) 0;
  border-bottom: 1px solid var(--rule);
}

.nt-chapter h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.nt-chapter > div p {
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.nt-chapter > div p + p { margin-top: 18px; }

.nt-shots {
  max-width: 1320px;
}

.nt-shots .gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nt-team-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(300px, 0.75fr);
  gap: clamp(42px, 9vw, 126px);
  margin-bottom: clamp(36px, 6vw, 68px);
  padding: clamp(34px, 5vw, 56px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.nt-team-story__lead {
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 39px);
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.nt-team-story > div p {
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.nt-team-story > div p + p { margin-top: 18px; }

.nt-tech .gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.nt-tech .gallery-item img {
  background: #09090b;
}

.nt-priority-story {
  display: grid;
  grid-template-columns: minmax(190px, 0.32fr) minmax(320px, 1fr);
  gap: clamp(34px, 8vw, 110px);
  align-items: start;
  margin-top: clamp(38px, 6vw, 70px);
  padding: clamp(30px, 5vw, 52px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, rgba(233, 194, 136, 0.045), transparent 55%);
}

.nt-priority-story > p:last-child {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.nt-page > .ifmc-foot {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .nt-hero { min-height: 82svh; }

  .nt-hero h1 { font-size: clamp(50px, 11vw, 96px); }

  .nt-intro,
  .nt-section-head {
    grid-template-columns: 1fr;
  }

  .nt-couch-story {
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 32px;
  }

  .nt-section-head > p:last-child { padding-top: 0; }

  .nt-system-story { grid-template-columns: 1fr; }

  .nt-signal-path {
    max-width: 62ch;
    align-self: auto;
  }

  .nt-chapter {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  }

  .nt-chapter > div { grid-column: 2; }

  .nt-shots .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nt-team-story { grid-template-columns: 1fr; }

  .nt-tech .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .nt-hero {
    min-height: 88svh;
  }

  .nt-hero__media img {
    object-position: 55% center;
  }

  .nt-hero__shade {
    background:
      linear-gradient(180deg, rgba(7, 5, 4, 0.28) 0%, rgba(7, 5, 4, 0.18) 28%, rgba(7, 5, 4, 0.97) 100%),
      linear-gradient(90deg, rgba(7, 5, 4, 0.78), rgba(7, 5, 4, 0.12));
  }

  .nt-hero__content {
    padding-top: 126px;
    padding-bottom: 30px;
  }

  .nt-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(42px, 13.5vw, 62px);
    line-height: 0.95;
  }

  .nt-hero__lead { font-size: 21px; }

  .nt-hero__summary { font-size: 13px; }

  .nt-hero__role { font-size: 9px; }

  .nt-hero__actions a {
    flex: 1 1 160px;
    min-width: 0;
  }

  .nt-snapshot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .nt-intro {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .nt-couch-story {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
    padding: 24px 0 28px;
  }

  .nt-couch-story > p:last-child { font-size: 20px; }

  .nt-screen,
  .nt-mix,
  .nt-challenges,
  .nt-shots,
  .nt-tech {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .nt-section-head { margin-bottom: 28px; }

  .nt-video-frame {
    padding: 0 4px 4px;
    border-radius: 8px;
  }

  .nt-video-frame__bar { padding-left: 4px; padding-right: 4px; }

  .nt-video-frame .video-wrap { border-radius: 5px; }

  .nt-system-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .nt-system-story__lead { font-size: 25px; }

  .nt-chapter {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .nt-chapter > div {
    grid-column: auto;
    margin-top: 6px;
  }

  .nt-shots .gallery-grid,
  .nt-tech .gallery-grid { grid-template-columns: 1fr; }

  .nt-team-story,
  .nt-priority-story {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* =========================================
   AUDIOQ — JUCE SAMPLER CASE STUDY
   ========================================= */
.aq-page {
  --aq-signal: #eab069;
  position: relative;
}

.aq-kicker {
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aq-signal);
}

.aq-hero {
  position: relative;
  min-height: min(94svh, 960px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: #060708;
}

.aq-hero__media,
.aq-hero__shade {
  position: absolute;
  inset: 0;
}

.aq-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: brightness(0.72) contrast(1.05) saturate(0.9);
  transform: scale(1.01);
}

.aq-hero__shade {
  background:
    linear-gradient(180deg, rgba(5, 6, 8, 0.32) 0%, rgba(5, 6, 8, 0.3) 34%, rgba(5, 6, 8, 0.97) 100%),
    linear-gradient(90deg, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.58) 46%, rgba(5, 6, 8, 0.12) 78%);
}

.aq-hero__content {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 150px clamp(20px, 5vw, 64px) 46px;
}

.aq-hero h1 {
  max-width: 8ch;
  margin-bottom: 23px;
  font-family: var(--serif);
  font-size: clamp(66px, 10.5vw, 146px);
  font-weight: 700;
  line-height: 0.83;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.aq-hero__lead {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.9vw, 38px);
  font-weight: 500;
  line-height: 1.18;
  color: var(--paper);
}

.aq-hero__summary {
  max-width: 640px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.aq-hero__role {
  max-width: 78ch;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink-70);
}

.aq-hero__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 17px;
}

.aq-hero__tools span {
  padding: 5px 9px;
  border: 1px solid rgba(236, 238, 240, 0.2);
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.42);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.aq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.aq-hero__actions a {
  display: inline-flex;
  min-width: 185px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 10px 13px;
  border: 1px solid rgba(236, 238, 240, 0.22);
  border-radius: 5px;
  background: rgba(5, 6, 8, 0.52);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--paper);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.aq-hero__actions a:first-child {
  border-color: color-mix(in srgb, var(--aq-signal) 62%, transparent);
  background: color-mix(in srgb, var(--aq-signal) 14%, rgba(5, 6, 8, 0.62));
}

.aq-hero__actions a:hover {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.aq-snapshot {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 96px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.aq-snapshot__label {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-signal);
}

.aq-snapshot > p:last-child {
  max-width: 850px;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.62;
  color: var(--ink-70);
}

.aq-snapshot strong {
  font-weight: 600;
  color: var(--paper);
}

.aq-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(88px, 13vh, 148px) clamp(20px, 5vw, 64px) clamp(72px, 10vh, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
}

.aq-intro h2,
.aq-section-head h2,
.aq-source h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.aq-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.aq-intro__copy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.aq-intro__copy p:last-child { margin-bottom: 0; }

.aq-user-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 52px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.aq-user-story__label {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aq-signal);
}

.aq-user-story > p:last-child {
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.aq-screen,
.aq-chain,
.aq-features,
.aq-challenges {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 5vw, 64px);
}

.aq-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
  gap: clamp(38px, 7vw, 94px);
  align-items: start;
  margin-bottom: clamp(30px, 5vh, 50px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.aq-section-head h2 {
  max-width: 17ch;
}

.aq-section-head > p:last-child {
  max-width: 55ch;
  padding-top: 31px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-55);
}

.aq-video-frame {
  overflow: hidden;
  padding: 0 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #060708;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.42);
}

.aq-video-frame__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 6px 9px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.aq-video-frame .video-wrap {
  overflow: hidden;
  border-radius: 7px;
}

.aq-video-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.aq-video-frame--image img {
  display: block;
  width: 100%;
  border-radius: 7px;
}

.aq-chain {
  max-width: 1320px;
}

.aq-system-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.aq-system-story__copy { max-width: 760px; }

.aq-system-story__lead {
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 43px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.aq-system-story__copy > p:not(.aq-system-story__lead) {
  max-width: 65ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-70);
}

.aq-signal-path {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--aq-signal) 36%, transparent);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-70);
}

.aq-signal-path span,
.aq-chapter__eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aq-signal);
}

.aq-shot {
  margin-bottom: clamp(36px, 6vw, 64px);
}

.aq-features__list {
  border-top: 1px solid var(--rule);
}

.aq-feature {
  display: grid;
  grid-template-columns: 44px minmax(220px, 0.55fr) minmax(300px, 1fr);
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.aq-feature > span {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--aq-signal);
}

.aq-feature h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.aq-feature > div {
  display: contents;
}

.aq-feature p {
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-70);
}

.aq-chapters {
  border-top: 1px solid var(--rule);
}

.aq-chapter {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) minmax(260px, 0.72fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: start;
  padding: clamp(40px, 7vh, 68px) 0;
  border-bottom: 1px solid var(--rule);
}

.aq-chapter h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.aq-chapter > div p {
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.aq-chapter > div p + p { margin-top: 18px; }

.aq-source {
  max-width: 1200px;
  margin: clamp(50px, 8vh, 86px) auto 0;
  padding: 42px clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, rgba(234, 176, 105, 0.05), transparent 55%);
}

.aq-source > div:last-child {
  padding-top: 8px;
}

.aq-source p:not(.aq-kicker) {
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.aq-source a {
  display: inline-flex;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aq-page > .ifmc-foot {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .aq-hero { min-height: 82svh; }

  .aq-hero h1 { font-size: clamp(62px, 13vw, 112px); }

  .aq-intro,
  .aq-section-head,
  .aq-source {
    grid-template-columns: 1fr;
  }

  .aq-user-story {
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 32px;
  }

  .aq-section-head > p:last-child { padding-top: 0; }

  .aq-system-story { grid-template-columns: 1fr; }

  .aq-signal-path {
    max-width: 62ch;
    align-self: auto;
  }

  .aq-feature {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px 18px;
  }

  .aq-feature p {
    grid-column: 2;
  }

  .aq-chapter {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  }

  .aq-chapter > div { grid-column: 2; }
}

@media (max-width: 620px) {
  .aq-hero {
    min-height: 88svh;
  }

  .aq-hero__media img {
    object-position: 30% 20%;
  }

  .aq-hero__shade {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.34) 0%, rgba(5, 6, 8, 0.26) 28%, rgba(5, 6, 8, 0.97) 100%),
      linear-gradient(90deg, rgba(5, 6, 8, 0.78), rgba(5, 6, 8, 0.16));
  }

  .aq-hero__content {
    padding-top: 126px;
    padding-bottom: 30px;
  }

  .aq-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(54px, 18vw, 78px);
    line-height: 0.88;
  }

  .aq-hero__lead { font-size: 21px; }

  .aq-hero__summary { font-size: 13px; }

  .aq-hero__role { font-size: 9px; }

  .aq-hero__actions a {
    flex: 1 1 160px;
    min-width: 0;
  }

  .aq-snapshot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .aq-intro {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .aq-user-story {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
    padding: 24px 0 28px;
  }

  .aq-user-story > p:last-child { font-size: 20px; }

  .aq-screen,
  .aq-chain,
  .aq-features,
  .aq-challenges {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .aq-section-head { margin-bottom: 28px; }

  .aq-video-frame {
    padding: 0 4px 4px;
    border-radius: 8px;
  }

  .aq-video-frame__bar { padding-left: 4px; padding-right: 4px; }

  .aq-video-frame .video-wrap { border-radius: 5px; }

  .aq-system-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .aq-system-story__lead { font-size: 25px; }

  .aq-feature {
    padding: 24px 0;
  }

  .aq-feature h3 {
    font-size: 19px;
  }

  .aq-chapter {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .aq-chapter > div {
    grid-column: auto;
    margin-top: 6px;
  }

  .aq-source {
    gap: 28px;
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* =========================================
   AI AUDIO RESEARCH — LATENCY CASE STUDY
   ========================================= */
.ai-page {
  --ai-signal: #beb2ee;
  position: relative;
}

.ai-kicker {
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-signal);
}

.ai-hero {
  border-bottom: 1px solid var(--rule);
}

.ai-hero__content {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 50px clamp(20px, 5vw, 64px) 32px;
}

.ai-hero h1 {
  max-width: 14ch;
  margin-bottom: 26px;
  font-family: var(--serif);
  font-size: clamp(46px, 5.5vw, 78px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.ai-hero__lead {
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.7vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--paper);
}

.ai-hero__summary {
  max-width: 640px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.ai-hero__role {
  max-width: 78ch;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink-70);
}

.ai-hero__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 17px;
}

.ai-hero__tools span {
  padding: 5px 9px;
  border: 1px solid rgba(236, 238, 240, 0.2);
  border-radius: 999px;
  background: rgba(10, 10, 13, 0.42);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.ai-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.ai-hero__actions a {
  display: inline-flex;
  min-width: 185px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 10px 13px;
  border: 1px solid rgba(236, 238, 240, 0.22);
  border-radius: 5px;
  background: rgba(10, 10, 13, 0.52);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--paper);
}

.ai-hero__actions a:first-child {
  border-color: color-mix(in srgb, var(--ai-signal) 62%, transparent);
  background: color-mix(in srgb, var(--ai-signal) 12%, rgba(10, 10, 13, 0.62));
}

.ai-hero__actions a:hover {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.ai-snapshot {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 96px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.ai-snapshot__label {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-signal);
}

.ai-snapshot > p:last-child {
  max-width: 850px;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.62;
  color: var(--ink-70);
}

.ai-snapshot strong {
  font-weight: 600;
  color: var(--paper);
}

.ai-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(88px, 13vh, 148px) clamp(20px, 5vw, 64px) clamp(72px, 10vh, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
}

.ai-intro h2,
.ai-section-head h2,
.ai-thesis h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.ai-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.ai-intro__copy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.ai-intro__copy p:last-child { margin-bottom: 0; }

.ai-player-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 52px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ai-player-story__label {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-signal);
}

.ai-player-story > p:last-child {
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.ai-delay-section,
.ai-numbers-section,
.ai-answer,
.ai-samples,
.ai-evidence {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 5vw, 64px);
}

.ai-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
  gap: clamp(38px, 7vw, 94px);
  align-items: start;
  margin-bottom: clamp(30px, 5vh, 50px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.ai-section-head h2 {
  max-width: 17ch;
}

.ai-section-head > p:last-child {
  max-width: 55ch;
  padding-top: 31px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-55);
}

/* ---------- Latency demo ---------- */
.ai-delay {
  padding: clamp(26px, 4vw, 44px) clamp(20px, 3.5vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(10, 10, 13, 0.62);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.38);
}

.ai-delay__trigger {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 22px;
  border: 1px solid color-mix(in srgb, var(--ai-signal) 62%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ai-signal) 12%, rgba(10, 10, 13, 0.6));
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ai-delay__trigger:hover:not(:disabled) {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.ai-delay__trigger:disabled {
  cursor: default;
  opacity: 0.55;
}

.ai-delay__trigger span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-delay__trigger em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-55);
}

.ai-delay__viz {
  margin-top: clamp(24px, 4vw, 38px);
}

.ai-delay__nodes {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-58);
}

.ai-delay[data-state="running"] .ai-delay__nodes span:nth-child(2) { color: var(--ai-signal); }
.ai-delay[data-state="arrived"] .ai-delay__nodes span:last-child { color: var(--ai-signal); }

.ai-delay__track {
  position: relative;
  height: 2px;
  background: var(--rule);
}

.ai-delay__pulse {
  position: absolute;
  top: 50%;
  left: var(--ai-signal-x, 7%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ai-signal);
  box-shadow: 0 0 14px color-mix(in srgb, var(--ai-signal) 70%, transparent);
  opacity: var(--ai-signal-live, 0);
  transform: translate(-50%, -50%);
}

.ai-delay__timeline {
  position: relative;
  height: 8px;
  margin-top: 30px;
  border-radius: 999px;
  background: rgba(236, 238, 240, 0.06);
  overflow: visible;
}

.ai-delay__budget {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5%;
  border-radius: 999px 0 0 999px;
  background: color-mix(in srgb, var(--ai-signal) 34%, transparent);
}

.ai-delay__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--ai-signal-progress, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ai-signal) 55%, transparent), color-mix(in srgb, var(--ai-signal) 20%, transparent));
}

.ai-delay__mark {
  position: absolute;
  top: 16px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-58);
}

.ai-delay__mark.is-now { left: 0; }

.ai-delay__mark.is-budget {
  top: -20px;
  left: 5%;
  color: var(--ai-signal);
}

.ai-delay__mark.is-late { right: 0; }

.ai-delay__status {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-70);
}

/* ---------- Numbers ---------- */
.ai-numbers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ai-numbers > div {
  min-width: 0;
  padding: 28px 22px 30px 0;
  border-right: 1px solid var(--rule-soft);
}

.ai-numbers > div:not(:first-child) { padding-left: 22px; }
.ai-numbers > div:last-child { border-right: 0; }

.ai-numbers strong,
.ai-numbers span {
  display: block;
}

.ai-numbers strong {
  margin-bottom: 9px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--paper);
}

.ai-numbers span {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-55);
}

.ai-numbers__budget strong { color: var(--ai-signal); }

.ai-numbers__budget span { color: var(--ink-70); }

/* ---------- What worked ---------- */
.ai-answer {
  max-width: 1320px;
}

.ai-system-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ai-system-story__copy { max-width: 760px; }

.ai-system-story__lead {
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 43px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.ai-system-story__copy > p:not(.ai-system-story__lead) {
  max-width: 65ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-70);
}

.ai-signal-path {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--ai-signal) 36%, transparent);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-70);
}

.ai-signal-path span {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ai-signal);
}

/* ---------- Sample browser ---------- */
.ai-browser {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(10, 10, 13, 0.62);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.ai-browser__prompts,
.ai-browser__models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px clamp(18px, 3vw, 32px);
}

.ai-browser__prompts {
  padding-top: clamp(20px, 3vw, 30px);
}

.ai-browser__models {
  padding-top: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}

.ai-browser__prompts button,
.ai-browser__models button {
  padding: 8px 14px;
  border: 1px solid rgba(236, 238, 240, 0.18);
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ai-browser__prompts button:hover,
.ai-browser__models button:hover {
  border-color: var(--paper);
  color: var(--paper);
}

.ai-browser__prompts button[aria-pressed="true"] {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.1);
  color: var(--paper);
}

.ai-browser__models button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--ai-signal) 70%, transparent);
  background: color-mix(in srgb, var(--ai-signal) 14%, transparent);
  color: var(--ai-signal);
}

.ai-browser__now {
  padding: clamp(22px, 3.5vw, 34px) clamp(18px, 3vw, 32px) 6px;
}

.ai-browser__now > span {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-signal);
}

.ai-browser__now > strong {
  display: block;
  max-width: 28ch;
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.ai-browser__now > p {
  max-width: 58ch;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-70);
}

.ai-browser__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-58);
}

.ai-browser__meta b {
  margin-left: 8px;
  font-weight: 400;
  color: var(--paper);
}

.ai-browser__deck {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px) clamp(22px, 3.5vw, 34px);
}

.ai-browser:not(.is-enhanced) .ai-browser__prompts,
.ai-browser:not(.is-enhanced) .ai-browser__models,
.ai-browser:not(.is-enhanced) .ai-browser__deck {
  display: none;
}

.ai-browser > audio {
  display: block;
  width: calc(100% - clamp(36px, 6vw, 64px));
  margin: 18px clamp(18px, 3vw, 32px) clamp(22px, 3.5vw, 34px);
}

.ai-browser.is-enhanced > audio {
  display: none;
}

.ai-browser__play {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--ai-signal) 62%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai-signal) 12%, transparent);
  color: var(--paper);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ai-browser__play:hover {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.ai-browser__play span {
  width: 0;
  height: 0;
  border-left: 9px solid var(--ai-signal);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.is-playing .ai-browser__play span {
  width: 10px;
  height: 10px;
  border: 0;
  background: var(--ai-signal);
}

.ai-browser__play strong {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-browser__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 48px;
  min-width: 0;
  overflow: hidden;
}

.ai-browser__wave i {
  flex: 1;
  max-width: 5px;
  height: var(--h, 30%);
  border-radius: 2px;
  background: color-mix(in srgb, var(--ai-signal) 34%, transparent);
}

.is-playing .ai-browser__wave i {
  background: color-mix(in srgb, var(--ai-signal) 70%, transparent);
  animation: ai-wave 0.9s ease-in-out infinite alternate;
  animation-delay: var(--d, 0ms);
}

@keyframes ai-wave {
  from { transform: scaleY(0.55); }
  to { transform: scaleY(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .is-playing .ai-browser__wave i { animation: none; }
}

/* ---------- Recordings ---------- */
.ai-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-video-frame {
  overflow: hidden;
  padding: 0 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #09090b;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.38);
}

.ai-video-frame__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 6px 9px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.ai-video-frame .video-wrap {
  overflow: hidden;
  border-radius: 7px;
}

.ai-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Thesis ---------- */
.ai-thesis {
  max-width: 1200px;
  margin: clamp(50px, 8vh, 86px) auto 0;
  padding: 42px clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, rgba(190, 178, 238, 0.05), transparent 55%);
}

.ai-thesis > div:last-child {
  padding-top: 8px;
}

.ai-thesis p:not(.ai-kicker) {
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.ai-thesis a {
  display: inline-flex;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-page > .ifmc-foot {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .ai-hero h1 { font-size: clamp(44px, 9vw, 84px); }

  .ai-intro,
  .ai-section-head,
  .ai-thesis {
    grid-template-columns: 1fr;
  }

  .ai-player-story {
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 32px;
  }

  .ai-section-head > p:last-child { padding-top: 0; }

  .ai-numbers { grid-template-columns: repeat(2, 1fr); }

  .ai-numbers > div:nth-child(2),
  .ai-numbers > div:nth-child(4) { border-right: 0; }

  .ai-numbers > div:nth-child(-n+4) { border-bottom: 1px solid var(--rule-soft); }

  .ai-system-story { grid-template-columns: 1fr; }

  .ai-signal-path {
    max-width: 62ch;
    align-self: auto;
  }

  .ai-video-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .ai-hero__content {
    padding-top: 126px;
    padding-bottom: 44px;
  }

  .ai-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(36px, 11vw, 52px);
  }

  .ai-hero__lead { font-size: 20px; }

  .ai-hero__summary { font-size: 13px; }

  .ai-hero__role { font-size: 9px; }

  .ai-hero__actions a {
    flex: 1 1 160px;
    min-width: 0;
  }

  .ai-snapshot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ai-intro {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .ai-player-story {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
    padding: 24px 0 28px;
  }

  .ai-player-story > p:last-child { font-size: 20px; }

  .ai-delay-section,
  .ai-numbers-section,
  .ai-answer,
  .ai-samples,
  .ai-evidence {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .ai-section-head { margin-bottom: 28px; }

  .ai-delay {
    padding: 22px 16px;
    border-radius: 8px;
  }

  .ai-numbers { grid-template-columns: 1fr; }

  .ai-numbers > div,
  .ai-numbers > div:not(:first-child) {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .ai-numbers > div:last-child { border-bottom: 0; }

  .ai-system-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .ai-system-story__lead { font-size: 25px; }

  .ai-browser__deck {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ai-browser__play { justify-content: center; }

  .ai-browser__wave { height: 40px; }

  .ai-thesis {
    gap: 28px;
    padding-top: 34px;
    padding-bottom: 34px;
  }
}

/* =========================================
   TRANSIENTICA — VOICE-CONTROLLED RHYTHM GAME
   ========================================= */
.tr-page {
  --tr-signal: #43efd0;
  --tr-hot: #ff4f78;
  position: relative;
}

.tr-kicker {
  margin-bottom: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tr-signal);
}

.tr-hero {
  position: relative;
  min-height: min(94svh, 960px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: #080508;
}

.tr-hero__media,
.tr-hero__shade {
  position: absolute;
  inset: 0;
}

.tr-hero__media img,
.tr-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  filter: brightness(0.54) contrast(1.12) saturate(0.78);
  transform: scale(1.015);
}

.tr-hero__shade {
  background:
    linear-gradient(180deg, rgba(7, 4, 7, 0.2) 0%, rgba(7, 4, 7, 0.28) 36%, rgba(7, 4, 7, 0.98) 100%),
    linear-gradient(90deg, rgba(7, 4, 7, 0.94) 0%, rgba(7, 4, 7, 0.62) 48%, rgba(7, 4, 7, 0.08) 82%);
}

.tr-hero__content {
  position: relative;
  z-index: 1;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 160px clamp(20px, 5vw, 64px) 48px;
}

.tr-hero h1 {
  max-width: none;
  margin-bottom: 24px;
  font-family: var(--serif);
  font-size: clamp(64px, 10.5vw, 146px);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.055em;
}

.tr-hero__lead {
  max-width: 850px;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.tr-hero__summary {
  max-width: 690px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.tr-hero__role {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-55);
}

.tr-hero__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tr-hero__tools span {
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--ink-70);
  background: rgba(7, 4, 7, 0.38);
}

.tr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.tr-hero__actions a {
  min-width: 180px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tr-hero__actions a:first-child {
  border-color: color-mix(in srgb, var(--tr-signal) 54%, var(--rule));
  background: color-mix(in srgb, var(--tr-signal) 10%, transparent);
}

.tr-hero__actions a:hover {
  border-color: var(--paper);
  background: rgba(236, 238, 240, 0.08);
}

.tr-snapshot {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 46px) clamp(20px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 96px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.tr-snapshot__label,
.tr-player-story__label,
.tr-signal-path span,
.tr-chapter__eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tr-signal);
}

.tr-snapshot__label { padding-top: 5px; }

.tr-snapshot > p:last-child {
  max-width: 850px;
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.62;
  color: var(--ink-70);
}

.tr-snapshot strong { color: var(--paper); }

.tr-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(88px, 13vh, 148px) clamp(20px, 5vw, 64px) clamp(72px, 10vh, 112px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr);
  gap: clamp(42px, 8vw, 110px);
  align-items: start;
}

.tr-intro h2,
.tr-section-head h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.tr-intro__copy {
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.tr-intro__copy p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.tr-intro__copy p:last-child { margin-bottom: 0; }

.tr-player-story {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 52px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tr-player-story > p:last-child {
  max-width: 820px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--ink-80);
}

.tr-demo,
.tr-pipeline,
.tr-timing,
.tr-rebuild,
.tr-prototype {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 5vw, 64px);
}

.tr-pipeline,
.tr-rebuild { max-width: 1320px; }

.tr-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.65fr);
  gap: clamp(38px, 7vw, 94px);
  align-items: start;
  margin-bottom: clamp(30px, 5vh, 50px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.tr-section-head h2 { max-width: 17ch; }

.tr-section-head > p:last-child {
  max-width: 55ch;
  padding-top: 31px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-55);
}

.tr-video-frame {
  position: relative;
  overflow: hidden;
  padding: 34px 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #060507;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.42);
}

.tr-video-frame__label {
  position: absolute;
  top: 9px;
  left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  color: var(--ink-58);
}

.tr-video-frame .video-wrap {
  overflow: hidden;
  border-radius: 7px;
}

.tr-video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tr-pipeline-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tr-pipeline-story__copy { max-width: 780px; }

.tr-pipeline-story__lead,
.tr-timing-story__lead {
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 43px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--paper);
}

.tr-pipeline-story__copy > p:not(.tr-pipeline-story__lead) {
  max-width: 65ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.76;
  color: var(--ink-70);
}

.tr-signal-path {
  align-self: end;
  padding: 22px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--tr-signal) 36%, transparent);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-70);
}

.tr-signal-path span,
.tr-chapter__eyebrow { display: block; margin-bottom: 12px; }

.tr-timing-story {
  display: grid;
  grid-template-columns: minmax(280px, 0.84fr) minmax(320px, 0.8fr);
  gap: clamp(46px, 9vw, 128px);
  padding: clamp(36px, 6vw, 70px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tr-timing-story > div p {
  max-width: 58ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.tr-timing-story > div p + p { margin-top: 18px; }

.tr-timing-story code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--tr-signal);
}

.tr-chapters { border-top: 1px solid var(--rule); }

.tr-rebuild-summary {
  max-width: 820px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.tr-rebuild-summary h3 {
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.tr-rebuild-summary p {
  max-width: 70ch;
  color: var(--ink-70);
  line-height: 1.75;
}

.tr-rebuild-summary p + p { margin-top: 18px; }

.tr-chapter {
  display: grid;
  grid-template-columns: minmax(130px, 0.25fr) minmax(260px, 0.72fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: start;
  padding: clamp(40px, 7vh, 68px) 0;
  border-bottom: 1px solid var(--rule);
}

.tr-chapter h3 {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.tr-chapter > div p {
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-70);
}

.tr-chapter > div p + p { margin-top: 18px; }

.tr-page > .ifmc-foot {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .tr-hero { min-height: 82svh; }

  .tr-hero h1 { font-size: clamp(62px, 13vw, 112px); }

  .tr-intro,
  .tr-section-head {
    grid-template-columns: 1fr;
  }

  .tr-player-story {
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr);
    gap: 32px;
  }

  .tr-section-head > p:last-child { padding-top: 0; }

  .tr-pipeline-story,
  .tr-timing-story { grid-template-columns: 1fr; }

  .tr-signal-path {
    max-width: 62ch;
    align-self: auto;
  }

  .tr-chapter {
    grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  }

  .tr-chapter > div { grid-column: 2; }
}

@media (max-width: 620px) {
  .tr-hero { min-height: 88svh; }

  .tr-hero__media img,
  .tr-hero__media video { object-position: 51% center; }

  .tr-hero__content {
    padding-top: 126px;
    padding-bottom: 30px;
  }

  .tr-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(52px, 17vw, 74px);
    line-height: 0.88;
  }

  .tr-hero__lead { font-size: 21px; }
  .tr-hero__summary { font-size: 13px; }
  .tr-hero__role { font-size: 9px; }

  .tr-hero__actions a {
    flex: 1 1 160px;
    min-width: 0;
  }

  .tr-snapshot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tr-intro {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .tr-player-story {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
    padding: 24px 0 28px;
  }

  .tr-player-story > p:last-child { font-size: 20px; }

  .tr-demo,
  .tr-pipeline,
  .tr-timing,
  .tr-rebuild,
  .tr-prototype {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .tr-section-head { margin-bottom: 28px; }

  .tr-video-frame {
    padding: 29px 4px 4px;
    border-radius: 8px;
  }

  .tr-video-frame .video-wrap { border-radius: 5px; }

  .tr-pipeline-story,
  .tr-timing-story {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0;
  }

  .tr-pipeline-story__lead,
  .tr-timing-story__lead { font-size: 25px; }

  .tr-chapter {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tr-chapter > div {
    grid-column: auto;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .io-reveal { opacity: 1 !important; transform: none !important; }

  .ifmc-hero__scroll { display: none; }
}

@media print {
  .scroll-progress, .skip-link, .back-nav, .ifmc-hero__stage, .ifmc-hero__scroll { display: none !important; }
  .io-reveal { opacity: 1 !important; transform: none !important; }
  .ifmc-bar__fill { width: 100% !important; }
}
/* Audit V4 — flat evidence-led sections */
.systems-list {
  max-width: 860px;
  margin-top: clamp(28px, 5vw, 54px);
  border-top: 1px solid var(--rule);
}

.systems-list .system-item {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 68px);
  padding: clamp(24px, 4vw, 42px) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.concept-body { max-width: 720px; }
.concept-body p { max-width: 68ch; }
.concept-body p + p { margin-top: 18px; }

.case-sec > .video-wrap,
.case-sec > .system-item__media,
.case-sec > .screenshot-section {
  margin-top: clamp(28px, 5vw, 54px);
}

.system-item__media video,
.case-sec video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Paired with local-video.js: matches the YouTube facade so a local file and an
   embed present the same poster and the same play control. */
.local-video { position: relative; }

.local-video__launch {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, .3));
  cursor: pointer;
}

.local-video__play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(240, 242, 244, .94);
  color: #101012;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .42);
  transition: transform .18s, background .18s;
}

.local-video__play svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  transform: translateX(2px);
}

.local-video__launch:hover .local-video__play,
.local-video__launch:focus-visible .local-video__play {
  transform: scale(1.08);
  background: #fff;
}

.local-video__launch:focus-visible { outline: 2px solid var(--mw-cyan, #6fb7ff); outline-offset: -4px; }

@media (max-width: 620px) {
  .local-video__play { width: 56px; height: 56px; }
  .local-video__play svg { width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .local-video__play { transition: none; }
}

.ifmc-film {
  max-width: 100%;
  overflow: hidden;
}

.ifmc-film iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 620px) {
  .systems-list .system-item { grid-template-columns: 1fr; gap: 10px; }
  .case-hero__title { font-size: 40px; overflow-wrap: anywhere; }
}

/* Flat project presentation: prose uses space, media and data keep containers. */
:is(.challenge-card, .callout-card, .concept-sidebar) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-hero {
  min-height: 0;
  padding-top: clamp(112px, 14vw, 164px);
  padding-bottom: clamp(36px, 5vw, 56px);
}

.case-sec {
  padding-top: clamp(44px, 6vw, 72px);
}

.ifmc-hero {
  min-height: 0;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(120px, 15vw, 174px) clamp(20px, 5vw, 64px) clamp(48px, 7vw, 76px);
}

.ifmc-hero__title {
  font-size: clamp(48px, 8vw, 96px);
  text-shadow: none;
}

.ifmc-entry {
  padding-top: clamp(48px, 7vw, 82px);
}

.ifmc-entry__number {
  margin-bottom: 12px;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
}

.ifmc-entry__title { font-size: clamp(36px, 5vw, 64px); }

.ifmc-entry__copy {
  max-width: 760px;
  margin-top: clamp(28px, 4vw, 46px);
}

.ifmc-entry__copy > p {
  color: var(--ink-70);
  font-size: 16px;
  line-height: 1.75;
}

.ifmc-entry__copy > p + p,
.ifmc-entry__copy blockquote + p { margin-top: 18px; }

.ifmc-entry__note {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-55);
}

.ifmc-entry__copy blockquote {
  max-width: 34ch;
  margin-top: clamp(26px, 4vw, 42px);
  padding-left: clamp(18px, 3vw, 30px);
  border-left: 1px solid var(--signal);
}

.ifmc-entry__copy blockquote p {
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(21px, 2.7vw, 32px);
  font-weight: 600;
  line-height: 1.35;
}

.ifmc-entry__copy cite {
  display: block;
  margin-top: 14px;
  color: var(--ink-55);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
}

:is(.sf-hero, .xr-hero, .nt-hero, .aq-hero, .ai-hero, .tr-hero) {
  min-height: min(78svh, 760px);
}

:is(
  .sf-screen, .sf-anomaly, .sf-tech,
  .xr-systems, .xr-demo,
  .nt-screen, .nt-tech,
  .aq-screen, .aq-chain,
  .ai-numbers-section, .ai-answer, .ai-samples,
  .tr-demo, .tr-pipeline, .tr-rebuild
) {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(48px, 6vw, 76px);
}

:is(.sf-section-head, .xr-section-head, .nt-section-head, .aq-section-head, .ai-section-head, .tr-section-head) {
  padding-top: 0;
  border-top: 0;
  margin-bottom: clamp(28px, 4vw, 42px);
}

:is(.sf-system-story, .sf-team-story, .nt-system-story, .aq-system-story, .ai-system-story, .tr-pipeline-story, .tr-rebuild-summary) {
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sf-system-story,
.nt-system-story,
.aq-system-story { grid-template-columns: minmax(0, 740px); }

.sf-team-story {
  display: block;
  max-width: 740px;
  margin-bottom: clamp(30px, 5vw, 52px);
}

.sf-team-story > p,
.ai-method-copy p {
  max-width: 68ch;
  color: var(--ink-70);
  line-height: 1.75;
}

.ai-method-copy { max-width: 760px; }
.ai-method-copy p + p { margin-top: 18px; }
.ai-video-grid { margin-top: clamp(34px, 5vw, 58px); }

.tr-rebuild-summary { max-width: 760px; }
.tr-compare,
.tr-prototype-video { margin-top: clamp(30px, 5vw, 48px); }

.aq-shot { margin-top: clamp(34px, 5vw, 58px); }

@media (max-width: 620px) {
  :is(.sf-hero, .xr-hero, .nt-hero, .aq-hero, .ai-hero, .tr-hero) {
    min-height: 0;
  }

  .ifmc-hero { padding-top: 112px; }
}

/* Recruiter audit: one frame per medium, readable evidence and mobile metadata. */
:is(.sf-video-frame, .xr-video-frame, .nt-video-frame, .aq-video-frame, .ai-video-frame, .tr-video-frame) {
  box-shadow: 0 18px 56px rgba(0, 0, 0, .32);
}

:is(.sf-video-frame, .xr-video-frame, .nt-video-frame, .aq-video-frame, .ai-video-frame, .tr-video-frame) .video-wrap {
  border: 0;
  box-shadow: none;
}

.case-sec > .screenshot-section {
  max-width: none;
  padding: 0;
}

.tr-compare__hint { display: none; }

@media (max-width: 620px) {
  :where(.sf-hero__role, .nt-hero__role, .tr-hero__role, .ai-hero__role, .aq-hero__role, .xr-hero__role) {
    font-size: 11px;
    letter-spacing: .035em;
    line-height: 1.55;
  }

  .tr-compare__hint {
    position: sticky;
    left: 0;
    display: block;
    width: max-content;
    margin: 0;
    padding: 11px 14px 0;
    color: var(--ink-55);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .tr-compare__hint span { color: var(--signal); }

}

/* Shared cohesion layer: one reading scale, while media and accents stay project-specific. */
:root {
  --layout-max: 1200px;
  --layout-gutter: clamp(20px, 5vw, 64px);
  --title-standard: clamp(48px, 7vw, 96px);
  --title-featured: clamp(54px, 8vw, 112px);
  --title-featured-long: clamp(48px, 7vw, 100px);
  --title-research: clamp(46px, 6.2vw, 88px);
  --lead-featured: clamp(22px, 2.4vw, 30px);
  --copy-size: 16px;
  --proof-size: 12px;
  --tap-target: 44px;
}

.site-header {
  min-height: 56px;
  padding: 6px var(--layout-gutter);
}

.site-header__name,
.site-header nav a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11.5px;
}

/* CV is only ~14px of text, below the 24px minimum target on its own. */
.site-header nav a { min-width: 24px; }

.site-header nav { gap: clamp(8px, 1.6vw, 20px); }

@media (max-width: 820px) {
  .site-header {
    gap: 12px;
    padding-inline: 20px;
  }

  .site-header nav { gap: 8px; }
}

.case-hero {
  max-width: var(--layout-max);
  padding: clamp(96px, 10vw, 136px) var(--layout-gutter) clamp(36px, 4vw, 48px);
}

.case-hero__title { font-size: var(--title-standard); }
.case-sec__title { font-size: clamp(30px, 4vw, 52px); }

.ifmc-hero {
  max-width: var(--layout-max);
  padding: clamp(96px, 10vw, 136px) var(--layout-gutter) clamp(42px, 5vw, 64px);
}

.ifmc-hero__title { font-size: var(--title-standard); }
.ifmc-hero__sub {
  max-width: 58ch;
  font-family: var(--sans);
  font-size: var(--copy-size);
  line-height: 1.7;
}
.ifmc-entry__title { font-size: clamp(34px, 4.5vw, 56px); }

:is(.sf-hero, .xr-hero, .nt-hero, .aq-hero, .tr-hero) {
  min-height: min(76svh, 760px);
}

.ai-hero { min-height: 0; }

:is(.sf-hero__content, .xr-hero__content, .nt-hero__content, .aq-hero__content, .tr-hero__content) {
  padding-top: clamp(112px, 12vw, 144px);
  padding-bottom: clamp(34px, 4vw, 44px);
}

.ai-hero__content {
  padding-top: clamp(88px, 9vw, 116px);
  padding-bottom: 40px;
}

:is(.sf-hero, .xr-hero, .aq-hero, .tr-hero) h1 {
  font-size: var(--title-featured);
  line-height: .88;
}

.nt-hero h1 {
  font-size: var(--title-featured-long);
  line-height: .92;
}

.ai-hero h1 {
  font-size: var(--title-research);
  line-height: 1;
}

:is(
  .sf-hero__lead, .xr-hero__lead, .nt-hero__lead,
  .aq-hero__lead, .ai-hero__lead, .tr-hero__lead
) {
  font-size: var(--lead-featured);
  line-height: 1.25;
}

:is(
  .sf-hero__summary, .xr-hero__summary, .nt-hero__summary,
  .aq-hero__summary, .ai-hero__summary, .tr-hero__summary
) {
  font-size: var(--copy-size);
  line-height: 1.7;
}

:is(
  .sf-hero__role, .xr-hero__role, .nt-hero__role,
  .aq-hero__role, .ai-hero__role, .tr-hero__role
) {
  font-size: var(--proof-size);
  line-height: 1.6;
}

:is(.sf-kicker, .xr-kicker, .nt-kicker, .aq-kicker, .ai-kicker, .tr-kicker) {
  font-size: var(--proof-size);
}

:is(
  .sf-hero__tools, .xr-hero__tools, .nt-hero__tools,
  .aq-hero__tools, .ai-hero__tools, .tr-hero__tools
) span {
  font-size: 11px;
}

:is(
  .sf-hero__actions, .xr-hero__actions, .nt-hero__actions,
  .aq-hero__actions, .ai-hero__actions, .tr-hero__actions
) a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  font-size: 12px;
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.08;
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) > p,
:is(
  .sf-system-story__copy, .nt-system-story__copy, .aq-system-story__copy,
  .ai-system-story__copy, .tr-pipeline-story__copy, .tr-rebuild-summary,
  .ai-method-copy
) p,
.sf-team-story > p {
  font-size: var(--copy-size);
  line-height: 1.72;
}

.xr-system-card figcaption p:not(.xr-system-card__number) {
  font-size: 15.5px;
  line-height: 1.7;
}

:is(
  .gallery-item__caption,
  .sf-video-frame__label, .xr-video-frame__label, .nt-video-frame__label,
  .aq-video-frame__label, .ai-video-frame__label, .tr-video-frame__label,
  .sf-video-frame__bar, .xr-video-frame__bar, .nt-video-frame__bar,
  .aq-video-frame__bar, .ai-video-frame__bar, .tr-video-frame__bar,
  .ai-snapshot__label, .ai-player-story__label,
  .ai-browser__now > span, .ai-browser__meta,
  .xr-system-card__number
) {
  font-size: var(--proof-size);
  line-height: 1.55;
}

.ai-hero-result span,
.ai-delay__nodes,
.ai-delay__mark,
.ai-signal-path span { font-size: 11px; }

.ai-hero-result p,
.ai-browser__now > p { font-size: 15px; }

.ai-delay__trigger,
.ai-browser__play,
.ai-browser__prompts button,
.ai-browser__models button {
  min-height: var(--tap-target);
}

.ai-delay__trigger span,
.ai-browser__play strong,
.ai-browser__prompts button,
.ai-browser__models button { font-size: 12px; }

.ifmc-entry__copy cite { font-size: 11px; }

.ifmc-foot a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
}

.colophon a,
.back-nav a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
}

:is(
  .xr-confidentiality span,
  .tr-snapshot__label,
  .tr-player-story__label,
  .tr-signal-path span,
  .tr-chapter__eyebrow
) { font-size: 11px; }

.xr-direction-diagram text {
  font-size: 22px;
  letter-spacing: .06em;
}

.xr-weapon-tick,
.xr-mix-row > div { font-size: 12px; }

@media (max-width: 620px) {
  .site-header { gap: 12px; }
  .site-header nav { gap: 8px; }

  :is(.sf-hero, .xr-hero, .nt-hero, .aq-hero, .tr-hero) {
    min-height: 0;
  }

  .case-hero,
  .ifmc-hero {
    padding-top: 96px;
  }

  .case-hero__title {
    font-size: clamp(38px, 12vw, 48px);
    overflow-wrap: anywhere;
  }

  .ifmc-hero__title { font-size: clamp(42px, 12vw, 52px); }

  :is(.sf-hero__content, .xr-hero__content, .nt-hero__content, .aq-hero__content, .tr-hero__content) {
    padding-top: 104px;
    padding-bottom: 30px;
  }

  .ai-hero__content {
    padding-top: 96px;
    padding-bottom: 34px;
  }

  :is(.sf-hero, .xr-hero, .aq-hero, .tr-hero) h1 {
    font-size: clamp(44px, 15vw, 64px);
  }

  .nt-hero h1 { font-size: clamp(42px, 12.5vw, 56px); }
  .ai-hero h1 { font-size: clamp(36px, 10.5vw, 46px); }

  :is(
    .sf-hero__lead, .xr-hero__lead, .nt-hero__lead,
    .aq-hero__lead, .ai-hero__lead, .tr-hero__lead
  ) { font-size: 19px; }

  :is(
    .sf-section-head, .xr-section-head, .nt-section-head,
    .aq-section-head, .ai-section-head, .tr-section-head
  ) h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .xr-direction-diagram text { font-size: 26px; }
}

@media (max-width: 480px) {
  /* No max-width here: the name is set to nowrap, so capping the box would
     push the text out over the navigation instead of wrapping it. */
  .site-header__name {
    line-height: 1.25;
  }

  .site-header nav a { font-size: .7rem; }
}

/* Compact editorial system: section copy stays close, calm and easy to scan. */
:root {
  --editorial-section-title: clamp(30px, 3.2vw, 46px);
  --editorial-reading-width: 800px;
  --editorial-wide-inset: clamp(0px, calc((100vw - 1200px) / 2), 60px);
}

:is(
  .sf-screen, .sf-anomaly, .sf-tech,
  .xr-systems, .xr-demo,
  .nt-screen, .nt-tech,
  .aq-screen, .aq-chain,
  .ai-numbers-section, .ai-answer, .ai-samples,
  .tr-demo, .tr-pipeline, .tr-rebuild
) {
  padding-top: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(44px, 5vw, 64px);
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) {
  display: block;
  width: min(100%, var(--editorial-reading-width));
  max-width: var(--editorial-reading-width);
  margin-bottom: clamp(24px, 3vw, 32px);
  padding: 0;
  border: 0;
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) > div {
  width: 100%;
  max-width: none;
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) :is(.sf-kicker, .xr-kicker, .nt-kicker, .aq-kicker, .ai-kicker, .tr-kicker) {
  margin-bottom: 10px;
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) h2 {
  max-width: 22ch;
  margin: 0;
  font-size: var(--editorial-section-title);
  font-weight: 500;
  line-height: 1.08;
}

:is(
  .sf-section-head, .xr-section-head, .nt-section-head,
  .aq-section-head, .ai-section-head, .tr-section-head
) > p:last-child {
  max-width: 60ch;
  margin: 14px 0 0;
  padding-top: 0;
  font-size: 16px;
  line-height: 1.7;
}

:is(
  .sf-system-story, .nt-system-story, .aq-system-story,
  .ai-system-story, .tr-pipeline-story
) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 28px);
  width: 100%;
  max-width: var(--editorial-reading-width);
}

/* Wider evidence sections keep their prose aligned with the 1200px page frame. */
:is(.sf-anomaly, .xr-systems, .aq-chain, .ai-answer, .tr-pipeline, .tr-rebuild) > :is(
  .sf-section-head, .xr-section-head, .aq-section-head, .ai-section-head, .tr-section-head,
  .sf-system-story, .aq-system-story, .ai-system-story, .tr-pipeline-story,
  .tr-rebuild-summary
) {
  margin-left: var(--editorial-wide-inset);
}

:is(
  .concept-body,
  .sf-system-story__copy, .nt-system-story__copy, .aq-system-story__copy,
  .ai-system-story__copy, .tr-pipeline-story__copy,
  .tr-rebuild-summary, .ai-method-copy
) {
  display: grid;
  /* At 340px a column held about 41 characters a line, which reads badly.
     Requiring 430px means two columns only form where they actually fit; the
     per-paragraph max-width in ch keeps the single-column case from running
     too long. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: clamp(20px, 2.5vw, 28px);
  width: 100%;
  max-width: var(--editorial-reading-width);
}

:is(
  .concept-body,
  .sf-system-story__copy, .nt-system-story__copy, .aq-system-story__copy,
  .ai-system-story__copy, .tr-pipeline-story__copy,
  .tr-rebuild-summary, .ai-method-copy
) > p:nth-child(n) {
  /* Was none, which was fine while these blocks were always two narrow
     columns. Now that a column needs 430px, the single-column case would run
     the full 800px (about 90 characters a line) without a cap. In the
     two-column case the column is narrower than this anyway. */
  max-width: 66ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
}

:is(
  .concept-body,
  .sf-system-story__copy, .nt-system-story__copy, .aq-system-story__copy,
  .ai-system-story__copy, .tr-pipeline-story__copy,
  .tr-rebuild-summary, .ai-method-copy
) > p:only-child,
.case-sec > .concept-body > p:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: 64ch;
}

.sf-team-story {
  max-width: var(--editorial-reading-width);
  margin-bottom: clamp(26px, 4vw, 42px);
}

.sf-team-story > p {
  max-width: 64ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
}

.case-sec {
  padding-top: clamp(44px, 5vw, 64px);
}

.case-sec__no,
.ifmc-entry__number {
  margin-bottom: 10px;
}

.case-sec__title,
.ifmc-entry__title {
  max-width: 22ch;
  font-size: var(--editorial-section-title);
  font-weight: 500;
  line-height: 1.08;
}

.case-sec__title {
  margin-bottom: clamp(20px, 2.5vw, 26px);
}

.case-sec > .video-wrap,
.case-sec > .system-item__media,
.case-sec > .screenshot-section {
  margin-top: clamp(24px, 3.5vw, 40px);
}

.ifmc-entry {
  padding-top: clamp(44px, 5vw, 64px);
}

.ifmc-entry__title {
  margin-bottom: clamp(20px, 2.5vw, 26px);
}

.ifmc-entry__copy {
  max-width: 64ch;
  margin-top: clamp(22px, 3vw, 32px);
}

@media (max-width: 700px) {
  :is(
    .sf-section-head, .xr-section-head, .nt-section-head,
    .aq-section-head, .ai-section-head, .tr-section-head
  ) h2,
  .case-sec__title,
  .ifmc-entry__title {
    max-width: none;
    font-size: clamp(28px, 7.7vw, 30px);
  }

  :is(
    .sf-section-head, .xr-section-head, .nt-section-head,
    .aq-section-head, .ai-section-head, .tr-section-head
  ) > p:last-child {
    margin-top: 12px;
  }

  :is(
    .concept-body,
    .sf-system-story__copy, .nt-system-story__copy, .aq-system-story__copy,
    .ai-system-story__copy, .tr-pipeline-story__copy,
    .tr-rebuild-summary, .ai-method-copy
  ) {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* =========================================
   MÓWIK — LOCAL WINDOWS DICTATION
   Compact editorial layout with cues taken
   from the application itself.
   ========================================= */
.mw-page {
  --mw-navy: #0b1b31;
  --mw-cyan: #5fe1ff;
  --mw-blue: #4d7cfe;
  --mw-local: #22c55e;
  position: relative;
  background:
    radial-gradient(circle at 84% 8%, rgba(77, 124, 254, 0.12), transparent 28%),
    radial-gradient(circle at 12% 34%, rgba(95, 225, 255, 0.055), transparent 24%);
}

.mw-page :is(code, a) { overflow-wrap: anywhere; }

.mw-kicker {
  margin: 0 0 11px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--mw-cyan);
}

.mw-hero {
  width: min(1320px, 100%);
  min-height: min(830px, calc(100svh - 48px));
  margin: 0 auto;
  padding: clamp(82px, 10vh, 126px) clamp(20px, 5vw, 64px) clamp(70px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(500px, 1.22fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  border-bottom: 1px solid var(--rule);
}

.mw-hero__copy { min-width: 0; }

.mw-wordmark {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
  margin-bottom: 28px;
}

.mw-wordmark img {
  width: clamp(52px, 5vw, 72px);
  height: clamp(52px, 5vw, 72px);
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(95, 225, 255, 0.15));
}

.mw-wordmark h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(72px, 8.2vw, 122px);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.mw-hero__lead {
  max-width: 23ch;
  font-family: var(--serif);
  font-size: clamp(25px, 2.5vw, 35px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--paper);
}

.mw-hero__summary {
  max-width: 62ch;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.mw-hero__role {
  max-width: 70ch;
  margin-top: 24px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink-55);
}

.mw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.mw-action {
  display: inline-flex;
  min-height: 44px;
  min-width: 188px;
  padding: 10px 13px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: rgba(11, 27, 49, 0.26);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--paper);
}

.mw-action--primary {
  border-color: color-mix(in srgb, var(--mw-cyan) 55%, transparent);
  background: color-mix(in srgb, var(--mw-blue) 17%, rgba(11, 27, 49, 0.68));
}

.mw-action:hover {
  border-color: var(--mw-cyan);
  background: rgba(95, 225, 255, 0.08);
  color: var(--paper);
}

.mw-hero__visual { min-width: 0; }

.mw-window {
  overflow: hidden;
  border: 1px solid rgba(95, 225, 255, 0.24);
  border-radius: 15px;
  background: var(--mw-navy);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(77, 124, 254, 0.06);
}

.mw-window__bar {
  display: flex;
  min-height: 35px;
  padding: 0 12px;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid rgba(95, 225, 255, 0.15);
  background: linear-gradient(90deg, #071321, var(--mw-navy));
}

.mw-window__bar > span {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(248, 250, 252, 0.28);
  border-radius: 50%;
}

.mw-window__bar > span:last-of-type {
  border-color: var(--mw-local);
  background: var(--mw-local);
  box-shadow: 0 0 9px rgba(34, 197, 94, 0.45);
}

.mw-window__bar small {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--mw-local);
}

.mw-window > img {
  display: block;
  width: 100%;
  aspect-ratio: 168 / 117;
  object-fit: cover;
  object-position: top center;
}

.mw-hero__visual figcaption,
.mw-gallery-note {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-55);
}

.mw-content {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

.mw-section {
  padding: clamp(58px, 7vw, 88px) 0;
  border-bottom: 1px solid var(--rule);
}

.mw-section__head {
  width: min(100%, 800px);
  margin-bottom: clamp(28px, 4vw, 42px);
}

.mw-section__head h2 {
  max-width: 24ch;
  font-family: var(--serif);
  font-size: clamp(32px, 3.2vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.mw-section__head > p:last-child {
  max-width: 64ch;
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-70);
}

.mw-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--mw-cyan) 28%, transparent);
  border-bottom: 1px solid var(--rule);
}

.mw-path li {
  position: relative;
  min-height: 145px;
  padding: 23px 20px 24px 0;
}

.mw-path li + li {
  padding-left: 22px;
  border-left: 1px solid var(--rule);
}

.mw-path li:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -11px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: #0a0a0d;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mw-cyan);
}

.mw-path span,
.mw-command-list > li > span {
  display: block;
  margin-bottom: 25px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mw-cyan);
}

.mw-path strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.15;
}

.mw-path small {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-55);
}

.mw-copy-pair {
  width: min(100%, 900px);
  margin-top: clamp(28px, 4vw, 42px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}

.mw-copy-pair p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-70);
}

.mw-interface {
  width: calc(100% + clamp(0px, 5vw, 64px) * 2);
  margin-left: calc(clamp(0px, 5vw, 64px) * -1);
  padding-left: clamp(0px, 5vw, 64px);
  padding-right: clamp(0px, 5vw, 64px);
}

.mw-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mw-screen {
  border-color: rgba(95, 225, 255, 0.18);
  border-radius: 8px;
  background: var(--mw-navy);
}

.mw-screen img {
  aspect-ratio: 168 / 117;
  object-fit: cover;
  object-position: top center;
}

.mw-gallery-note { max-width: 82ch; }

.mw-ledger {
  border-top: 1px solid color-mix(in srgb, var(--mw-cyan) 28%, transparent);
}

.mw-ledger > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  padding: 22px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.mw-ledger dt {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--mw-cyan);
}

.mw-ledger dd {
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.mw-ledger code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--paper);
}

.mw-command-list {
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--mw-cyan) 28%, transparent);
}

.mw-command-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.mw-command-list > li > span { margin: 3px 0 0; }

.mw-command-list p {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.mw-command-list strong {
  font-weight: 500;
  color: var(--paper);
}

.mw-release-note {
  margin-top: clamp(44px, 6vw, 70px);
  padding: clamp(26px, 4vw, 42px) clamp(22px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(210px, 0.52fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 76px);
  border-block: 1px solid rgba(234, 176, 105, 0.28);
  border-left: 3px solid #eab069;
  background: linear-gradient(90deg, rgba(234, 176, 105, 0.07), rgba(11, 27, 49, 0.09) 58%, transparent);
}

.mw-release-note .mw-kicker { color: #eab069; }

.mw-release-note h3 {
  max-width: 12ch;
  font-family: var(--serif);
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.mw-release-note__copy p {
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-70);
}

.mw-release-note__copy p + p { margin-top: 15px; }

.mw-release-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 22px;
}

.mw-release-note__actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.mw-page > .ifmc-foot {
  max-width: 1200px;
  margin: clamp(50px, 8vh, 84px) auto 0;
}

@media (max-width: 1080px) {
  .mw-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .mw-hero__copy { max-width: 760px; }
  .mw-hero__lead { max-width: 28ch; }
  .mw-hero__visual { width: min(100%, 820px); }
}

@media (max-width: 700px) {
  .mw-hero {
    padding-top: 72px;
    padding-bottom: 58px;
    gap: 38px;
  }

  .mw-wordmark { margin-bottom: 22px; }
  .mw-wordmark h1 { font-size: clamp(64px, 21vw, 88px); }
  .mw-hero__lead { font-size: 22px; }
  .mw-hero__summary { font-size: 14px; }
  .mw-hero__role { font-size: 11px; }

  .mw-hero__actions { display: grid; }
  .mw-action { width: 100%; min-width: 0; }

  .mw-window { border-radius: 9px; }
  .mw-window__bar { min-height: 29px; }

  .mw-section { padding: 52px 0; }
  .mw-section__head { margin-bottom: 26px; }
  .mw-section__head h2 { max-width: none; font-size: clamp(30px, 8.6vw, 36px); }
  .mw-section__head > p:last-child { font-size: 15px; }

  .mw-path { grid-template-columns: minmax(0, 1fr); }

  .mw-path li {
    min-height: 0;
    display: grid;
    grid-template-columns: 34px minmax(90px, 0.38fr) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 18px 0;
  }

  .mw-path li + li {
    padding-left: 0;
    border-top: 1px solid var(--rule-soft);
    border-left: 0;
  }

  .mw-path li:not(:last-child)::after {
    content: '\2193';
    top: auto;
    right: auto;
    bottom: -12px;
    left: 5px;
    transform: none;
  }

  .mw-path span { margin: 0; }
  .mw-path strong { margin: 0; font-size: 18px; }
  .mw-path small { font-size: 12px; }

  .mw-copy-pair,
  .mw-gallery,
  .mw-ledger > div,
  .mw-release-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .mw-copy-pair { gap: 17px; }
  .mw-gallery { gap: 12px; }
  .mw-ledger > div { gap: 7px; padding: 19px 0; }
  .mw-release-note { gap: 22px; }
  .mw-release-note h3 { max-width: none; }
}

@media (max-width: 420px) {
  .mw-wordmark img { width: 48px; height: 48px; }
  .mw-wordmark h1 { font-size: 58px; }
  .mw-window__bar small { font-size: 7px; }
  .mw-hero__visual figcaption,
  .mw-gallery-note { font-size: 11px; }
}

/* ================================================================
   AutoTrim Exporter
   ================================================================ */

.at-page {
  --mw-navy: #11151e;
  --mw-cyan: #9ca8ff;
  --mw-blue: #6f80e8;
  --mw-local: #55c58a;
}

.at-wordmark {
  display: block;
  margin: 8px 0 28px;
}

.at-wordmark h1 {
  max-width: 8ch;
  font-size: clamp(68px, 7.2vw, 112px);
  line-height: 0.84;
  letter-spacing: -0.055em;
}

.at-window {
  border-color: color-mix(in srgb, var(--mw-cyan) 25%, var(--rule));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.at-window .mw-window__bar {
  background: linear-gradient(90deg, #0c1017, #171d29);
}

.at-window > img {
  height: auto;
  aspect-ratio: 1560 / 1020;
  object-fit: contain;
  object-position: center;
}

.at-interface {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.at-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.at-screen {
  max-width: none;
}

.at-screen img {
  height: auto;
  aspect-ratio: 1560 / 1020;
  object-fit: cover;
  object-position: center;
}

.at-ledger dt {
  color: var(--mw-cyan);
}

.at-release-note {
  border-color: color-mix(in srgb, var(--mw-cyan) 38%, transparent);
  background: linear-gradient(135deg, rgba(111, 128, 232, 0.11), rgba(85, 197, 138, 0.055));
}

.at-release-note .mw-kicker {
  color: var(--mw-cyan);
}

@media (max-width: 760px) {
  .at-wordmark h1 {
    max-width: none;
    font-size: clamp(58px, 18vw, 82px);
  }

  .at-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .at-wordmark h1 { font-size: 54px; }
}

/* ================================================================
   AUDIO TOOLS — WIDE EDITORIAL LAYOUT
   Real interfaces carry the pages; labels describe, never number.
   ================================================================ */

.tool-page {
  --tool-accent: #a9b0ba;
  --tool-gutter: clamp(20px, 4.5vw, 64px);
  --tool-rule: rgba(236, 238, 240, 0.16);
  --tool-rule-soft: rgba(236, 238, 240, 0.09);
  min-width: 0;
  background: #090a0c;
  color: var(--paper);
}

.tool-page--autotrim { --tool-accent: #a5adff; }
.tool-page--audioq { --tool-accent: #dfa64b; }
.tool-page--mowik { --tool-accent: #72a6ff; }

.tool-page :is(a, code) {
  overflow-wrap: anywhere;
}

.tool-hero {
  display: grid;
  /* The copy column used to be the smaller of the two, which left the hero
     lead at about 25 characters a line. */
  grid-template-columns: minmax(320px, 1fr) minmax(440px, 1.08fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(68px, 7vw, 104px) var(--tool-gutter) clamp(52px, 6vw, 76px);
  border-bottom: 1px solid var(--tool-rule);
}

.tool-hero__copy,
.tool-hero__media {
  min-width: 0;
}

.tool-kicker {
  margin: 0 0 15px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  color: var(--tool-accent);
}

.tool-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(62px, 6.4vw, 96px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.tool-page--autotrim .tool-hero h1 {
  max-width: 8.5ch;
  font-size: clamp(56px, 5.8vw, 86px);
}

.mw-title {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}

.mw-title > img {
  width: clamp(48px, 4.5vw, 64px);
  height: clamp(48px, 4.5vw, 64px);
  object-fit: contain;
}

.tool-hero__lead {
  max-width: 27ch;
  margin: clamp(24px, 3vw, 34px) 0 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2.25vw, 31px);
  font-weight: 500;
  line-height: 1.23;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.tool-hero__role {
  max-width: 59ch;
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-70);
}

.tool-meta {
  max-width: 68ch;
  margin: 21px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--tool-rule);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-55);
}

.tool-links,
.tool-release__links,
.tool-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
}

.tool-links {
  margin-top: 20px;
}

.tool-links a,
.tool-release__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--tool-accent) 52%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper);
}

.tool-links a:hover,
.tool-release__links a:hover {
  border-bottom-color: var(--paper);
  color: var(--tool-accent);
}

.tool-hero__media,
.tool-video {
  margin: 0;
}

.tool-hero__media > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tool-rule);
  background: #111318;
}

.tool-hero__tour {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 978;
  object-fit: contain;
  border: 1px solid var(--tool-rule);
  background: #050607;
}

.tool-hero__tour-frame {
  position: relative;
}

.tool-hero__tour-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(5, 6, 7, 0.82);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.tool-hero__tour-toggle[hidden] {
  display: none;
}

.tool-hero__tour-toggle:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(5, 6, 7, 0.94);
  transform: scale(1.04);
}

.tool-hero__tour-toggle:focus-visible {
  outline: 2px solid var(--tool-accent);
  outline-offset: 3px;
}

.tool-hero__tour-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.tool-hero__tour-icon--play {
  display: none;
  fill: currentColor;
  stroke: currentColor;
}

.tool-hero__tour-toggle.is-paused .tool-hero__tour-icon--pause {
  display: none;
}

.tool-hero__tour-toggle.is-paused .tool-hero__tour-icon--play {
  display: block;
}

.tool-caption {
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  margin: 0;
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-55);
}

.tool-caption > span:first-child {
  color: var(--tool-accent);
  text-transform: uppercase;
}

.tool-body {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 0 var(--tool-gutter);
}

.tool-section {
  min-width: 0;
  padding: clamp(52px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--tool-rule);
}

.tool-section__heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 3vw, 38px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 44px);
}

.tool-section__heading .tool-kicker {
  grid-column: 1 / 6;
  margin-bottom: 12px;
}

.tool-section__heading h2 {
  grid-column: 1 / 6;
  grid-row: 2;
  max-width: 17ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.tool-section__heading > p:last-child {
  grid-column: 7 / -1;
  grid-row: 2;
  max-width: 66ch;
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-70);
}

.tool-section__heading--wide h2 {
  grid-column: 1 / 7;
  max-width: 19ch;
}

.tool-section__heading--wide > p:last-child {
  grid-column: 8 / -1;
}

.tool-shot.gallery-item {
  overflow: visible;
  border: 0;
  background: transparent;
}

/* See the gallery-item--contain note: --shot-ar carries the width/height ratio
   so a lazy capture reserves its space before it loads. */
.tool-shot.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--shot-ar, 3 / 2);
  object-fit: contain;
  border: 1px solid var(--tool-rule);
  background: #111318;
  transition: opacity 0.2s;
}

.tool-shot.gallery-item:hover img {
  transform: none;
  opacity: 0.92;
}

.tool-hero__zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  cursor: zoom-in;
}

.tool-shot .gallery-item__caption {
  position: static;
  display: block;
  padding: 9px 0 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-55);
}

.tool-video .video-wrap {
  overflow: hidden;
  border: 1px solid var(--tool-rule);
  background: #050607;
  box-shadow: none;
}

.tool-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.tool-release {
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid var(--tool-accent);
}

.tool-release h3 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.026em;
}

.tool-release__body p,
.tool-release > p {
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-70);
}

.tool-release__body p + p,
.tool-release > p + p {
  margin-top: 14px;
}

.tool-release__links {
  margin-top: 18px;
}

.tool-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--tool-rule);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-55);
}

/* AutoTrim */

.at-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--tool-accent);
  border-bottom: 1px solid var(--tool-rule);
}

.at-flow li {
  min-width: 0;
  padding: 21px clamp(16px, 2vw, 26px) 23px 0;
}

.at-flow li + li {
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid var(--tool-rule);
}

.at-flow strong,
.mw-flow strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--paper);
}

.at-flow span,
.mw-flow span {
  display: block;
  font-size: 13px;
  line-height: 1.58;
  color: var(--ink-55);
}

.at-flow__note {
  max-width: 64ch;
  margin: 15px 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-55);
  text-align: right;
}

.at-duet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.at-duet__item {
  min-width: 0;
}

.at-duet__copy {
  display: grid;
  /* These blocks already sit two-up on the page. Splitting the heading and the
     prose side by side inside each one cut the text to about 36 characters a
     line, so stack them instead and give the prose the full column. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--tool-rule);
}

.at-duet__copy h3 {
  grid-row: auto;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.at-duet__copy p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.67;
  color: var(--ink-70);
}

.at-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}

.at-delivery__verification {
  min-width: 0;
}

.at-delivery__verification .tool-section__heading {
  display: block;
  max-width: 760px;
  margin-bottom: 30px;
}

.at-delivery__verification .tool-section__heading h2 {
  max-width: 18ch;
  margin: 0;
}

.at-proof-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.at-proof-pair .at-duet__copy {
  gap: 8px;
  margin-top: 15px;
  padding-top: 14px;
}

.at-proof-pair .at-duet__copy h3 {
  font-size: clamp(18px, 1.7vw, 22px);
}

.at-proof-pair + .at-checks {
  margin-top: 28px;
}

.at-checks {
  display: grid;
  /* Three fixed columns gave each note about 21 characters a line. These are
     full sentences, so let the count drop to two when three will not fit. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  border-top: 1px solid var(--tool-rule);
}

.at-checks p {
  padding: 17px 18px 0 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-55);
}

.at-checks p + p {
  padding-left: 18px;
  border-left: 1px solid var(--tool-rule);
}

.at-checks strong {
  font-weight: 500;
  color: var(--paper);
}

.at-delivery .tool-release__title {
  margin-bottom: 20px;
}

/* AudioQ */

.aq-demo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(22px, 3vw, 38px);
  align-items: end;
}

.aq-demo__heading {
  display: block;
  grid-column: 9 / -1;
  grid-row: 1;
  margin: 0;
  padding-bottom: 25px;
}

.aq-demo__heading .tool-kicker {
  margin-bottom: 12px;
}

.aq-demo__heading h2 {
  max-width: 12ch;
  margin: 0;
}

.aq-demo__heading > p:last-child {
  max-width: 42ch;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.68;
}

.aq-demo__video {
  grid-column: 1 / 9;
  grid-row: 1;
}

.aq-signal-path {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  /* Explicit: without this the ol relies on the legacy .aq-signal-path rule
     (old audioq layout, ~line 4267) to cancel the UA default padding. */
  padding: 22px 0 4px;
  list-style: none;
  border-top: 1px solid var(--tool-accent);
  border-bottom: 1px solid var(--tool-rule);
}

.aq-signal-path li {
  position: relative;
  display: flex;
  min-height: 76px;
  align-items: center;
  padding: 14px clamp(12px, 1.5vw, 19px);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--paper);
}

.aq-signal-path li:first-child {
  padding-left: 0;
}

.aq-signal-path li + li {
  border-left: 1px solid var(--tool-rule);
}

.aq-signal-path li + li::before {
  content: '→';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  background: #090a0c;
  text-align: center;
  color: var(--tool-accent);
}

.aq-chain__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(38px, 7vw, 92px);
  margin-top: clamp(32px, 4vw, 48px);
}

.aq-chain__columns h3,
.mw-boundary h3,
.mw-commands h2 {
  margin: 0 0 17px;
  font-family: var(--serif);
  font-size: clamp(25px, 2.5vw, 35px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.027em;
}

.aq-chain__columns p,
.mw-boundary > p,
.mw-commands > p {
  max-width: 66ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-70);
}

.aq-chain__columns p + p {
  margin-top: 16px;
}

.aq-chain__limits {
  padding-left: clamp(22px, 3vw, 36px);
  border-left: 1px solid var(--tool-accent);
}

.aq-chain__limits a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  margin-top: 19px;
  border-bottom-color: color-mix(in srgb, var(--tool-accent) 52%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--paper);
}

/* Mówik */

.tool-page .mw-interface {
  width: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.mw-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--tool-accent);
  border-bottom: 1px solid var(--tool-rule);
}

.mw-flow li {
  min-width: 0;
  padding: 21px clamp(16px, 2vw, 26px) 23px 0;
}

.mw-flow li + li {
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 1px solid var(--tool-rule);
}

.mw-workflow__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 7vw, 96px);
  width: min(100%, 960px);
  margin: 24px 0 0 auto;
}

.mw-workflow__notes p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-70);
}

/* The gallery used to sit in a 1.7fr column as two side-by-side thumbnails:
   328px tall against a 772px column of text, leaving a 444px hole under it.
   A single-column gallery in a narrower column runs to 798px against 560px,
   so the mismatch drops to 238px and the UI captures render at roughly
   520px instead of 390px, which is the difference between a readable
   screenshot and a swatch. */
.mw-interface__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(290px, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.mw-interface__layout .mw-gallery,
.tool-page .mw-interface__layout .mw-gallery {
  grid-template-columns: minmax(0, 1fr);
}

.tool-page .mw-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.mw-boundary {
  min-width: 0;
  padding-top: 19px;
  border-top: 1px solid var(--tool-accent);
}

.mw-boundary > p {
  font-size: 14px;
}

.mw-boundary__facts {
  margin: 23px 0 0;
  border-top: 1px solid var(--tool-rule);
}

.mw-boundary__facts > div {
  padding: 13px 0;
  border-bottom: 1px solid var(--tool-rule-soft);
}

.mw-boundary__facts dt {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tool-accent);
}

.mw-boundary__facts dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-70);
}

.mw-boundary__facts code {
  font-family: var(--mono);
  font-size: 0.94em;
  color: var(--paper);
}

.mw-final__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(40px, 8vw, 104px);
  align-items: start;
}

/* The release box is 309px against a 1096px column of commands, so it left
   almost 800px of empty screen beside the text. Sticking it to the top keeps
   the download details in view while the commands are read, and the column
   is never empty. Below 920px the grid collapses to one column, where a
   sticky box would only get in the way. */
@media (min-width: 920.02px) {
  .mw-final__grid .tool-release {
    position: sticky;
    top: 96px;
  }
}

.mw-commands h2 {
  max-width: 17ch;
  font-size: clamp(34px, 3.8vw, 50px);
}

.tool-page .mw-command-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tool-rule);
}

.tool-page .mw-command-list li {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--tool-rule-soft);
  font-size: 14px;
  line-height: 1.67;
  color: var(--ink-70);
}

.tool-page .mw-command-list strong {
  font-weight: 500;
  color: var(--paper);
}

.mw-command-shot {
  margin-top: clamp(26px, 4vw, 40px);
}

.mw-release > p {
  font-size: 14px;
}

/* Shared project footer */

.tool-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 22px;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 32px var(--tool-gutter) clamp(34px, 5vw, 56px);
}

.tool-footer__links {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
}

.tool-footer a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.tool-footer__next {
  border-bottom: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 29px);
  font-weight: 600;
  color: var(--paper);
}

.tool-footer__next::after {
  content: '  \2192';
  display: inline-block;
  color: var(--tool-accent);
  transition: transform 0.2s;
}

.tool-footer__next:hover {
  color: var(--tool-accent);
}

.tool-footer__next:hover::after {
  transform: translateX(6px);
}

@media (max-width: 1080px) {
  .at-duet__copy {
    display: block;
  }

  .at-duet__copy h3 {
    margin-bottom: 12px;
  }

  .at-duet__copy p + p {
    margin-top: 12px;
  }

  .mw-interface__layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.7fr);
    gap: 32px;
  }
}

@media (max-width: 920px) {
  .tool-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    align-items: start;
  }

  .tool-hero__copy {
    width: min(100%, 700px);
  }

  .tool-hero__media {
    width: min(100%, 900px);
  }

  .at-flow,
  .mw-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .at-flow li:nth-child(3),
  .mw-flow li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--tool-rule);
  }

  .at-flow li:nth-child(4),
  .mw-flow li:nth-child(4) {
    border-top: 1px solid var(--tool-rule);
  }

  .at-delivery,
  .aq-chain__columns,
  .mw-final__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .at-delivery .tool-release,
  .mw-final .tool-release {
    width: min(100%, 700px);
  }

  .aq-demo {
    display: block;
  }

  .aq-demo__heading {
    display: grid;
    margin-bottom: 34px;
    padding-bottom: 0;
  }

  .mw-interface__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mw-boundary {
    width: min(100%, 700px);
  }
}

@media (max-width: 700px) {
  .tool-hero {
    gap: 34px;
    padding-top: 66px;
    padding-bottom: 46px;
  }

  .tool-hero h1,
  .tool-page--autotrim .tool-hero h1 {
    max-width: none;
    font-size: clamp(48px, 15vw, 70px);
    line-height: 0.96;
  }

  .mw-title {
    align-items: flex-end;
  }

  .mw-title > img {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
  }

  .tool-hero__lead {
    max-width: 31ch;
    font-size: 21px;
  }

  .tool-hero__role {
    font-size: 14px;
  }

  .tool-caption {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .tool-section {
    padding: 48px 0;
  }

  .tool-section__heading,
  .aq-demo__heading {
    display: block;
  }

  .tool-section__heading h2,
  .tool-section__heading--wide h2,
  .aq-demo__heading h2 {
    max-width: none;
    font-size: clamp(30px, 9vw, 40px);
  }

  .tool-section__heading > p:last-child,
  .aq-demo__heading > p:last-child {
    max-width: 62ch;
    margin-top: 16px;
    font-size: 15px;
  }

  .at-duet,
  .at-proof-pair,
  .tool-page .mw-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .at-duet,
  .at-proof-pair {
    gap: 42px;
  }

  .at-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .at-checks p {
    padding: 14px 0;
    border-bottom: 1px solid var(--tool-rule-soft);
  }

  .at-checks p + p {
    padding-left: 0;
    border-left: 0;
  }

  .aq-signal-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aq-signal-path li {
    min-height: 64px;
    border-bottom: 1px solid var(--tool-rule-soft);
  }

  .aq-signal-path li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .aq-signal-path li:nth-child(odd)::before {
    content: none;
  }

  .aq-signal-path li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .mw-workflow__notes {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .aq-chain__limits {
    padding-top: 22px;
    padding-left: 0;
    border-top: 1px solid var(--tool-accent);
    border-left: 0;
  }

  .tool-footer {
    display: grid;
    padding-top: 28px;
  }
}

@media (max-width: 520px) {
  .tool-links,
  .tool-footer__links {
    display: grid;
    gap: 0;
  }

  .at-flow,
  .mw-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .at-flow li,
  .at-flow li + li,
  .at-flow li:nth-child(3),
  .mw-flow li,
  .mw-flow li + li,
  .mw-flow li:nth-child(3) {
    padding: 15px 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--tool-rule-soft);
  }

  .at-flow li:last-child,
  .mw-flow li:last-child {
    border-bottom: 0;
  }

  .at-flow__note {
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .tool-page {
    --tool-gutter: 20px;
  }

  .tool-kicker,
  .tool-meta,
  .tool-links a,
  .tool-caption,
  .tool-shot .gallery-item__caption,
  .tool-footer__links {
    font-size: 12px;
  }
}


/* ---------- Header: shared desktop geometry + type ----------
   This desktop geometry stays aligned with the other site shells. Project
   pages use the compact mobile treatment below.

   padding-inline resolves to the same left edge as the 1160px content column
   (1280px on wide screens) and collapses to a plain gutter below that.
   Nav is Inter, not mono: mono stays on real data (years, tool lists). */
.site-header {
  padding-block: 14px;
  padding-inline: max(20px, calc((100% - 1160px) / 2 + 40px));
  min-height: 0;
}
@media (min-width:1360px) {
  .site-header { padding-inline: max(20px, calc((100% - 1280px) / 2 + 40px)); }
}
.site-header__name,
.site-header nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; white-space: nowrap; text-decoration: none;
}
.site-header nav { display: flex; align-items: center; gap: clamp(8px,1.6vw,24px); }
.site-header__name {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  color: var(--paper);
}
.site-header__name-short { display: none; }
.site-header nav a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  min-width: 24px; transition: color .15s;
  color: var(--ink-70);
}
.site-header nav a:hover,
.site-header nav a[aria-current] { color: var(--paper); }
.site-header nav a[aria-current] { box-shadow: inset 0 -1px 0 0 var(--paper); }
@media (max-width:640px) {
  .site-header { padding-inline: 20px; }
  .site-header__name { font-size: .85rem; }
  .site-header nav a { font-size: .78rem; }
}

/* ---------- Project header: compact mobile navigation ----------
   Project pages keep the three primary destinations visible at phone widths.
   The full name remains the accessible label while the visual mark shortens. */
@media (max-width: 820px) {
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding-block: 7px;
    padding-inline:
      max(12px, env(safe-area-inset-left))
      max(12px, env(safe-area-inset-right));
  }

  .site-header__name {
    min-height: 44px;
    font-size: .82rem;
    letter-spacing: .015em;
  }

  .site-header__name-full { display: none; }
  .site-header__name-short { display: inline; }

  .site-header nav {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
    overflow: visible;
  }

  .site-header .site-header__cv { display: none; }

  .site-header nav a {
    min-width: 0;
    min-height: 44px;
    padding: 0 clamp(5px, 1.8vw, 10px);
    border: 1px solid rgba(236, 238, 240, 0.16);
    border-radius: 999px;
    background: rgba(236, 238, 240, 0.035);
    font-size: .75rem;
    letter-spacing: .015em;
    box-shadow: none;
  }

  /* case.css resets the nav border to 0 on hover for its underlined links;
     without this the pill outline disappears on a narrow desktop window. */
  .site-header nav a:hover { border: 1px solid rgba(236, 238, 240, 0.3); }

  .site-header nav a[aria-current],
  .site-header nav a[aria-current]:hover {
    border-color: transparent;
    background: #eceef0;
    color: #101012;
    box-shadow: none;
  }
}

/* =========================================================
   MOBILE LAYER (project pages)
   Appended last so it settles the rules the 620px and 720px
   patches above set for the same elements.
   ========================================================= */
@media (max-width: 820px) {
  /* ---- Hero scrim ----
     The shade is built for the desktop hero, where the copy occupies the left
     half: it darkens the left edge and clears to almost nothing by 78%. On a
     phone the copy runs the full width, so the end of every line was set on
     the bright part of the photograph. The vertical scrim below darkens where
     the text actually is and leaves the top of the image readable as an image. */
  :is(
    .sf-hero__shade, .xr-hero__shade, .nt-hero__shade,
    .aq-hero__shade, .tr-hero__shade
  ) {
    background: linear-gradient(
      180deg,
      rgba(5, 6, 8, 0.42) 0%,
      rgba(5, 6, 8, 0.36) 24%,
      rgba(5, 6, 8, 0.76) 62%,
      rgba(5, 6, 8, 0.93) 100%
    );
  }

  :is(
    .sf-hero__media, .xr-hero__media, .nt-hero__media,
    .aq-hero__media, .tr-hero__media
  ) img,
  .tr-hero__media video {
    filter: brightness(0.72) contrast(1.04) saturate(0.8);
  }

  /* A phone hero does not need three quarters of the screen before the first
     sentence of the case study. */
  :is(.sf-hero, .xr-hero, .nt-hero, .aq-hero, .tr-hero) {
    min-height: min(72svh, 620px);
  }

  :is(
    .sf-hero__content, .xr-hero__content, .nt-hero__content,
    .aq-hero__content, .tr-hero__content
  ) {
    padding-top: 92px;
    padding-bottom: 32px;
  }

  /* `anywhere` breaks a heading in the middle of a word even when the word
     would have fitted on the next line. `break-word` only intervenes when a
     single word genuinely cannot fit. */
  .case-hero__title {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  :is(.sf-hero, .xr-hero, .aq-hero, .tr-hero) h1,
  .nt-hero h1,
  .ai-hero h1,
  .ifmc-hero__title { text-wrap: balance; }

  :is(
    .sf-hero__summary, .xr-hero__summary, .nt-hero__summary,
    .aq-hero__summary, .ai-hero__summary, .tr-hero__summary
  ),
  :is(
    .sf-section-head, .xr-section-head, .nt-section-head,
    .aq-section-head, .ai-section-head, .tr-section-head
  ) > p,
  .case-sec__body p,
  .ifmc-hero__sub { text-wrap: pretty; }

  /* ---- Diagram labels ----
     The HTML labels are drawn at 8-9px so a wide desktop diagram stays quiet.
     At phone width they are the only text in the figure and have to be read.
     The SVG diagram is deliberately left alone: its font-size is in viewBox
     units, so raising it enlarges the labels against fixed geometry and they
     collide with the routes instead of becoming easier to read. */
  .xr-weapon-tick { font-size: 10px; }
  .xr-mix-row > div { font-size: 10px; }

  /* ---- Page foot ----
     The links used to sit against the right edge of the screen on the same
     line as the copyright. */
  .colophon {
    flex-direction: column;
    /* The centring that aligns the two spans on one row would centre them
       horizontally once the axis turns vertical. */
    align-items: flex-start;
    gap: 8px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }

  .ifmc-foot { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  :is(
    .concept-sidebar__label,
    .system-item__badge,
    .system-item__genre,
    .challenge-card__label,
    .callout-card__label,
    .sf-gallery__footer,
    .sf-bible a,
    .xr-kicker,
    .xr-hero__role,
    .xr-trainee-story__label,
    .nt-kicker,
    .nt-hero__role,
    .nt-couch-story__label,
    .aq-kicker,
    .aq-hero__role,
    .aq-user-story__label,
    .aq-feature > span,
    .aq-source a,
    .ai-kicker,
    .ai-hero__role,
    .ai-player-story__label,
    .ai-delay__trigger span,
    .ai-browser__prompts button,
    .ai-browser__models button,
    .ai-browser__meta,
    .ai-browser__play strong,
    .ai-thesis a,
    .tr-kicker,
    .tr-hero__role,
    .ifmc-entry__copy cite,
    .mw-kicker,
    .mw-hero__role,
    .mw-hero__visual figcaption,
    .mw-gallery-note,
    .mw-ledger dt,
    .mw-release-note__actions a,
    .mw-boundary__facts dt
  ) { font-size: 12px; }

  .xr-weapon-tick,
  .xr-mix-row > div { font-size: 12px; }
}

@media (max-width: 400px) {
  /* The weapon cutout is placed at 17% of the diagram and centred on that
     point, so on the narrowest phones its muzzle ran past the left edge of
     the card and was cut off. */
  .xr-weapon-source {
    left: 21%;
    width: 92px;
  }

  .xr-weapon-track { left: calc(21% + 48px); }
}

@media (max-width: 620px) {
  .lightbox {
    padding: calc(72px + env(safe-area-inset-top)) 12px
      calc(118px + env(safe-area-inset-bottom));
  }

  .lightbox img {
    max-width: calc(100vw - 24px);
    max-height: calc(100svh - 210px);
  }

  .lightbox__close {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
  }

  .lightbox__caption {
    bottom: calc(78px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    font-size: 12px;
  }

  .lightbox__nav {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(18, 18, 20, 0.82);
    transform: none;
  }

  .lightbox__nav--prev { left: calc(50% - 62px); }
  .lightbox__nav--next { right: calc(50% - 62px); }
}