/* LUMEN Wave 2: cinematic stages, interactive Counsel, trilingual demo, citation drawer, why-now, cofounder. */

/* =========================================================
   CINEMATIC STAGES (hero opening, middle, closer)
   ========================================================= */
/* The .cinema is a TALL scroll-spacer; .cinema__shell is the sticky-pinned viewport.
   Each beat is N * 100vh tall, so scrubbing happens via scroll position only.
   Wave 3: kill the PowerPoint chrome (thumb strip, scrub track, caption tray, head bar).
   The cinema reads as a full-bleed continuous motion graphic, no slide-deck UI. */
/* Kill the slide-deck chrome (thumb strip, scrub track, head bar).
   Caption stays - it carries the actual information per beat. */
.cinema__head,
.cinema__thumbs,
.cinema__scrub { display: none !important; }

/* Beat overlay: the caption now floats inside the cinema viewport
   with the beat number, the headline, and the supporting line. */
.cinema__caption {
  position: absolute;
  left: 6vw; right: auto;
  bottom: 8vh;
  max-width: min(560px, 50vw);
  z-index: 5;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: start;
}
[dir="rtl"] .cinema__caption { left: auto; right: 6vw; }
.cinema__caption .cinema__beat {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(214,135,72,0.95);
  display: block;
}
.cinema__beat-line {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.32;
  color: rgba(247,228,207,0.96);
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cinema__beat-sub {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(247,228,207,0.7);
  margin: 0;
  max-width: 52ch;
}
.cinema {
  background: #050709;
  color: var(--paper);
  border-block: 1px solid #1a1d22;
  position: relative;
  overflow: visible;
  /* total scroll length = (beats * 90vh) + viewport. Tuned per-section via --beats. */
  --beats: 10;
  min-height: calc((var(--beats) * 90vh) + 100vh);
}
.cinema__shell {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: block;
  padding: 0;
  box-sizing: border-box;
  background: #050709;
  overflow: hidden;
}
/* Ambient motion bed inside every cinema viewport */
.cinema__shell::before,
.cinema__shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cinema__shell::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(214,135,72,0.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% -10%, rgba(247,228,207,0.06), transparent 70%);
  animation: cinema-bed 18s ease-in-out infinite alternate;
}
.cinema__shell::after {
  background-image:
    linear-gradient(rgba(247,228,207,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,228,207,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
  opacity: 0.5;
  animation: cinema-grid-drift 22s linear infinite;
}
@keyframes cinema-bed {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-2%); opacity: 0.85; }
}
@keyframes cinema-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 60px 60px, 60px 60px; }
}
.cinema__shell > * { position: relative; z-index: 1; }
.cinema__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
  border-bottom: 1px solid rgba(247,228,207,0.18);
  padding-bottom: 18px;
}
.cinema__head h2 {
  font-family: var(--font-sans);
  font-weight: 250;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: rgba(247,228,207,0.95);
  margin: 0;
  max-width: 26ch;
}
.cinema__beat-head {
  display: flex; gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,228,207,0.55);
}
.cinema__beat-head [data-beat-num] { color: rgba(214,135,72,0.95); }

.cinema__stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: #050709;
  border: 1px solid rgba(247,228,207,0.18);
  overflow: hidden;
}
.cinema__stage .frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.cinema__stage .frame[data-active="true"] {
  opacity: 1;
}

.cinema__thumbs {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.cinema__thumbs--five { grid-template-columns: repeat(5, 1fr); }
.cinema__thumb {
  position: relative;
  background: transparent;
  border: 1px solid rgba(247,228,207,0.22);
  padding: 0;
  cursor: pointer;
  aspect-ratio: 16 / 11;
  transition: border-color var(--t-fast), transform var(--t-fast);
  color: inherit;
}
.cinema__thumb:hover { border-color: rgba(214,135,72,0.85); }
.cinema__thumb[data-active="true"] {
  border-color: rgba(214,135,72,0.95);
  outline: 1px solid rgba(214,135,72,0.6);
  outline-offset: 1px;
}
.cinema__thumb svg { width: 100%; height: 100%; display: block; }
.cinema__thumb-num {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(247,228,207,0.7);
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 720px) {
  .cinema__thumbs { grid-template-columns: repeat(5, 1fr); }
  .cinema__thumbs--five { grid-template-columns: repeat(5, 1fr); }
}

.cinema__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: baseline;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(247,228,207,0.16);
}
.cinema__beat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(214,135,72,0.95);
  white-space: nowrap;
}
.cinema__beat-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: rgba(247,228,207,0.92);
  margin: 0;
  max-width: 70ch;
}

.cinema__scrub {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,228,207,0.5);
}
.cinema__scrub-track {
  position: relative;
  height: 1px;
  background: rgba(247,228,207,0.22);
  cursor: pointer;
}
.cinema__scrub-fill {
  position: absolute;
  inset-block: -0.5px;
  inset-inline-start: 0;
  width: 10%;
  background: rgba(214,135,72,0.95);
  height: 2px;
  transition: width 0.4s var(--ease-out);
}
.cinema__scrub-marks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cinema__scrub-marks span {
  width: 1px;
  height: 7px;
  background: rgba(247,228,207,0.4);
  transform: translateY(-3px);
}

/* =========================================================
   INTERACTIVE COUNSEL
   ========================================================= */
.icounsel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
}
@media (max-width: 1080px) {
  .icounsel { grid-template-columns: 1fr; }
}

.icounsel__stage {
  background: var(--paper-pure);
  border: 1px solid var(--ink-900);
  display: flex;
  flex-direction: column;
}
.icounsel__case {
  padding: 14px 18px;
  border-bottom: var(--hair);
  display: grid;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.icounsel__case strong { color: var(--ink-900); font-weight: 600; }
.icounsel__case-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-700);
  line-height: 1.55;
  margin-top: 4px;
}

.icounsel__diagram {
  flex: 1;
  position: relative;
  padding: 20px 22px 8px;
  min-height: 360px;
}
.icounsel__diagram svg { width: 100%; height: 100%; max-height: 460px; display: block; }

/* Agent panel states by beat */
.icounsel[data-beat="1"] .agent { opacity: 0; }
.icounsel[data-beat="1"] .agent[data-agent="cc"] { opacity: 1; }
.icounsel[data-beat="2"] .agent { opacity: 1; }
.icounsel[data-beat="3"] .agent { opacity: 1; }
.icounsel[data-beat="4"] .agent { opacity: 1; }
.icounsel[data-beat="5"] .agent { opacity: 0.6; }
.icounsel[data-beat="6"] .agent { opacity: 0.45; }

.agent {
  transition: opacity 0.5s var(--ease-out);
  cursor: pointer;
}

.icounsel .vector { opacity: 0; transition: opacity 0.5s var(--ease-out); }
.icounsel[data-beat="2"] .vector { opacity: 1; }
.icounsel[data-beat="3"] .vector { opacity: 1; }
.icounsel[data-beat="4"] .vector { opacity: 1; }
.icounsel[data-beat="5"] .vector { opacity: 0.5; }
.icounsel[data-beat="6"] .vector { opacity: 0.3; }

.icounsel .vector--disagree { opacity: 0; }
.icounsel[data-beat="3"] .vector--disagree { opacity: 0.5; }
.icounsel[data-beat="4"] .vector--disagree { opacity: 1; }
.icounsel[data-beat="5"] .vector--disagree { opacity: 0.4; }
.icounsel[data-beat="6"] .vector--disagree { opacity: 0.2; }

.icounsel .synthesis { opacity: 0; transform-origin: center; transition: opacity 0.6s var(--ease-out); }
.icounsel[data-beat="5"] .synthesis,
.icounsel[data-beat="6"] .synthesis { opacity: 1; }

.icounsel .signature path,
.icounsel .audit text {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0;
}
.icounsel[data-beat="6"] .signature path {
  animation: signdraw 1.4s var(--ease-out) forwards;
  opacity: 1;
}
.icounsel[data-beat="6"] .audit text {
  animation: typeOn 0.8s 1s var(--ease-out) forwards;
}
@keyframes signdraw {
  to { stroke-dashoffset: 0; }
}
@keyframes typeOn {
  to { opacity: 1; stroke-dashoffset: 0; }
}

.icounsel__sig {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--ink-900);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.icounsel__sig-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--dawn-700);
  text-transform: none;
  letter-spacing: 0;
  border-block-end: 1px solid var(--dawn-500);
  padding-block-end: 4px;
}
.icounsel__chain-chip {
  background: var(--ink-900);
  color: var(--paper);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.icounsel__rail {
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-900);
  background: var(--paper-pure);
  min-height: 0;
}

.icounsel__beat-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: var(--hair);
}
.icounsel__beat-bar button {
  background: transparent;
  border: 0;
  border-inline-end: var(--hair);
  padding: 14px 8px;
  text-align: start;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-500);
  text-transform: uppercase;
  display: grid;
  gap: 4px;
  transition: background var(--t-fast), color var(--t-fast);
}
.icounsel__beat-bar button:last-child { border-inline-end: 0; }
.icounsel__beat-bar button strong {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}
.icounsel__beat-bar button[data-active="true"] {
  background: var(--ink-900);
  color: rgba(247,228,207,0.7);
}
.icounsel__beat-bar button[data-active="true"] strong { color: var(--paper); }

.icounsel__rail-body {
  padding: 22px 24px 16px;
  flex: 1;
  overflow-y: auto;
  max-height: 520px;
}
.icounsel__rail-body h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 8px;
  font-weight: 500;
}
.icounsel__rail-body h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  margin: 0 0 14px;
  max-width: 38ch;
}
.icounsel__rail-body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 12px;
  max-width: 50ch;
}
.icounsel__rail-body p.speaker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dawn-700);
  margin: 14px 0 6px;
}
.icounsel__rail-body p.speaker em {
  color: var(--ink-900);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.icounsel__rail-body p.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-900);
  border-inline-start: 2px solid var(--dawn-500);
  padding-inline-start: 14px;
}

.icounsel__chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 8px;
}
.cite-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border: 1px solid var(--ink-300);
  background: var(--paper);
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  position: relative;
}
.cite-chip:hover {
  border-color: var(--ink-900);
  color: var(--ink-900);
  background: var(--ink-050);
}
.cite-chip strong {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: 0;
}

/* Hover popover */
.cite-chip[data-hover="true"]::after {
  content: attr(data-title) " · " attr(data-meta);
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: var(--ink-900);
  color: var(--paper);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 30;
  pointer-events: none;
  max-width: 320px;
  white-space: normal;
  width: max-content;
  line-height: 1.4;
}

.icounsel__disagree {
  background: linear-gradient(180deg, var(--dawn-100), transparent);
  border-inline-start: 2px solid var(--dawn-500);
  padding: 14px 16px;
  margin-block: 16px;
}
.icounsel__disagree h4 {
  color: var(--dawn-700);
  margin-bottom: 6px;
}
.icounsel__disagree p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.55;
}

.icounsel__scrubrow {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--ink-900);
  padding: 12px 16px;
  background: var(--ink-050);
}
.icounsel__modes {
  display: inline-flex;
  border: 1px solid var(--ink-900);
}
.icounsel__modes button {
  background: transparent;
  border: 0;
  border-inline-end: 1px solid var(--ink-900);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
  cursor: pointer;
}
.icounsel__modes button:last-child { border-inline-end: 0; }
.icounsel__modes button[data-active="true"] {
  background: var(--ink-900);
  color: var(--paper);
}

.icounsel__scrubtrack {
  position: relative;
  height: 1px;
  background: var(--ink-300);
  cursor: pointer;
}
.icounsel__scrubfill {
  position: absolute;
  inset-block: -1px;
  inset-inline-start: 0;
  width: 16.66%;
  background: var(--ink-900);
  height: 2px;
  transition: width 0.4s var(--ease-out);
}
.icounsel__scrubmarks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.icounsel__scrubmarks span {
  width: 1px;
  height: 6px;
  background: var(--ink-500);
  transform: translateY(-3px);
}

.icounsel__btn {
  background: transparent;
  border: 1px solid var(--ink-900);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.icounsel__btn:hover { background: var(--ink-100); }
.icounsel__btn--primary {
  background: var(--ink-900);
  color: var(--paper);
}
.icounsel__btn--primary:hover { background: #000; }

/* =========================================================
   CITATION DRAWER (right side)
   ========================================================= */
.cite-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(440px, 90vw);
  background: var(--paper-pure);
  border-inline-start: 1px solid var(--ink-900);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(10,13,18,0.16);
}
[dir="rtl"] .cite-drawer { transform: translateX(-100%); }
.cite-drawer[data-open="true"] { transform: translateX(0); }
.cite-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cite-drawer__close {
  background: transparent;
  border: 0;
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cite-drawer__body {
  padding: 24px 22px 36px;
  overflow-y: auto;
  flex: 1;
}
.cite-drawer__body h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink-900);
  margin: 0 0 8px;
  letter-spacing: -0.012em;
}
.cite-drawer__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: 18px;
}
.cite-drawer__excerpt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-900);
  border-inline-start: 2px solid var(--dawn-500);
  padding-inline-start: 14px;
  margin: 0 0 22px;
}
.cite-drawer__sec {
  border-top: var(--hair);
  padding-top: 18px;
  margin-bottom: 22px;
}
.cite-drawer__sec h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 10px;
  font-weight: 500;
}
.cite-drawer__sec p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}
.cite-drawer__source {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  border-top: 1px solid var(--ink-900);
  padding-top: 14px;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* =========================================================
   TRILINGUAL DEMO (live)
   ========================================================= */
.tridemo {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--ink-900);
  background: var(--paper-pure);
}
@media (max-width: 1080px) { .tridemo { grid-template-columns: 1fr; } }

.tridemo__source {
  border-inline-end: 1px solid var(--ink-900);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
@media (max-width: 1080px) { .tridemo__source { border-inline-end: 0; border-bottom: 1px solid var(--ink-900); } }
.tridemo__head, .tridemo__output-head {
  padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: var(--hair);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.tridemo__head strong, .tridemo__output-head strong { color: var(--ink-900); font-weight: 600; }

.tridemo__waveform {
  padding: 18px 18px 6px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  border-bottom: var(--hair);
}
.tridemo__waveform .bar {
  flex: 1;
  background: var(--ink-300);
  transition: background 0.3s var(--ease-out), height 0.3s var(--ease-out);
}
.tridemo__waveform .bar.active {
  background: var(--dawn-500);
}

.tridemo__transcript {
  padding: 18px 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  unicode-bidi: plaintext;
}
.tridemo__transcript .seg {
  opacity: 0.35;
  transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.tridemo__transcript .seg.spoken { opacity: 1; }
.tridemo__transcript .seg.current {
  color: var(--ink-900);
  background: var(--dawn-100);
  padding: 1px 2px;
}
.tridemo__transcript .seg.ar { font-family: var(--font-arabic); font-size: 18px; }
.tridemo__transcript .seg.en { font-family: var(--font-sans); }
.tridemo__transcript .seg.fr { font-family: var(--font-sans); font-style: italic; }

.tridemo__lang-toggle {
  display: flex;
  border-top: 1px solid var(--ink-900);
  align-items: stretch;
}
.tridemo__lang-toggle button {
  background: transparent;
  border: 0;
  border-inline-end: var(--hair);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
  cursor: pointer;
}
.tridemo__lang-toggle button:last-child { border-inline-end: 0; }
.tridemo__lang-toggle button[data-active="true"] {
  background: var(--ink-900);
  color: var(--paper);
}

.tridemo__output-body {
  padding: 18px 22px;
  display: grid;
  gap: 18px;
}
.tridemo__output[data-mode="en"] .tridemo__chart-block { display: block; }
.tridemo__output[data-mode="en"] .tridemo__family,
.tridemo__output[data-mode="en"] .tridemo__colleague { display: none; }
.tridemo__output[data-mode="ar"] .tridemo__family { display: block; }
.tridemo__output[data-mode="ar"] .tridemo__chart-block,
.tridemo__output[data-mode="ar"] .tridemo__colleague { display: none; }
.tridemo__output[data-mode="fr"] .tridemo__colleague { display: block; }
.tridemo__output[data-mode="fr"] .tridemo__chart-block,
.tridemo__output[data-mode="fr"] .tridemo__family { display: none; }

.tridemo__chart-block h5,
.tridemo__family h5,
.tridemo__colleague h5 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 10px;
  font-weight: 500;
}
.tridemo__chart {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-800);
  margin: 0;
}
.tridemo__chart p { margin: 0 0 10px; }
.tridemo__chart dt {
  display: inline;
  color: var(--ink-900);
  font-weight: 600;
  margin-inline-end: 8px;
}
.tridemo__chart dd { display: inline; margin: 0; }

.tridemo__family {
  font-family: var(--font-arabic);
  font-size: 17px;
  line-height: 1.85;
  direction: rtl;
  text-align: start;
  color: var(--ink-800);
}
.tridemo__family h5 { direction: ltr; text-align: start; }

.tridemo__colleague {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-800);
}

/* =========================================================
   WHY NOW
   ========================================================= */
.whynow {
  background: var(--ink-900);
  color: var(--paper);
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}
.whynow .sechead { border-top-color: var(--paper); }
.whynow .sechead__num { color: rgba(247,228,207,0.55); }
.whynow .sechead__title { color: var(--paper); }
.whynow__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: rgba(247,228,207,0.92);
  max-width: 60ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.whynow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(247,228,207,0.3);
}
@media (max-width: 980px) { .whynow__grid { grid-template-columns: 1fr; } }
.whynow__cell {
  padding: 28px 28px 32px;
  border-inline-end: 1px solid rgba(247,228,207,0.18);
  display: flex; flex-direction: column;
  min-height: 360px;
}
.whynow__cell:last-child { border-inline-end: 0; }
@media (max-width: 980px) {
  .whynow__cell { border-inline-end: 0; border-bottom: 1px solid rgba(247,228,207,0.18); }
  .whynow__cell:last-child { border-bottom: 0; }
}
.whynow__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(214,135,72,0.95);
}
.whynow__title {
  margin: 14px 0 14px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--paper);
  max-width: 18ch;
}
.whynow__body {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(247,228,207,0.78);
  max-width: 32ch;
  margin: 0 0 18px;
}
.whynow__art {
  margin-top: auto;
  padding-top: 24px;
  height: 90px;
}
.whynow__art svg { width: 100%; height: 100%; }
.whynow__metric {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214,135,72,0.85);
  border-top: 1px solid rgba(247,228,207,0.18);
  padding-top: 12px;
}

/* =========================================================
   CO-FOUNDER / FOUNDING ADVISOR (placeholder block)
   ========================================================= */
.cofounder {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 0;
  border: 1px solid var(--ink-900);
  background: var(--paper-pure);
}
@media (max-width: 900px) { .cofounder { grid-template-columns: 1fr; } }

.cofounder__plate {
  position: relative;
  background: var(--ink-050);
  border-inline-end: var(--hair);
  aspect-ratio: 4/5;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 22px;
}
@media (max-width: 900px) { .cofounder__plate { border-inline-end: 0; border-bottom: var(--hair); aspect-ratio: 16/9; } }

.cofounder__plate::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed var(--ink-300);
  pointer-events: none;
}
.cofounder__plate .silhouette {
  width: 60%;
  max-width: 180px;
  margin: auto;
  align-self: center;
  justify-self: center;
}
.cofounder__plate-meta {
  display: flex; gap: 16px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  position: relative;
  z-index: 2;
}
.cofounder__plate-meta strong {
  color: var(--ink-900);
  font-weight: 600;
}
.cofounder__plate-meta--bottom {
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.cofounder__plate-cap {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-700);
  line-height: 1.5;
  max-width: 32ch;
  font-weight: 400;
}
.cofounder__plate-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dawn-700);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.cofounder__plate-status::before {
  content: "";
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--dawn-500);
}

.cofounder__body {
  padding: 32px 36px 36px;
}
.cofounder__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.cofounder__name {
  margin: 14px 0 8px;
  font-family: var(--font-sans);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 300;
  letter-spacing: -0.014em;
  line-height: 1.1;
  color: var(--ink-900);
  max-width: 22ch;
}
.cofounder__role {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 24px;
  max-width: 50ch;
}
.cofounder__bio {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 18px;
  margin: 0 0 24px;
  border-top: var(--hair);
  border-bottom: var(--hair);
  padding-block: 16px;
  max-width: 60ch;
}
.cofounder__bio dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-500);
  text-transform: uppercase;
  padding-top: 4px;
}
.cofounder__bio dd {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-800);
  margin: 0;
}
.cofounder__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ink-900);
  margin: 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--dawn-500);
  max-width: 56ch;
}
.cofounder__quote-attr {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-500);
  text-transform: uppercase;
}

/* =========================================================
   COLOR TEMPERAMENT TWEAK MODES
   ========================================================= */
body[data-color="ink"] {
  --dawn-100: rgba(0,0,0,0.04);
  --dawn-300: var(--ink-500);
  --dawn-400: var(--ink-700);
  --dawn-500: var(--ink-900);
  --dawn-600: var(--ink-900);
  --dawn-700: var(--ink-900);
}
body[data-color="slate"] {
  --dawn-100: rgba(60,90,120,0.10);
  --dawn-300: #6b8a9e;
  --dawn-400: #4a6b80;
  --dawn-500: #2f4f64;
  --dawn-600: #243a4a;
  --dawn-700: #1a2a36;
}

/* Density tweak: compact reduces section padding */
body[data-density="compact"] .section { padding-block: clamp(36px, 4vw, 56px); }
body[data-density="compact"] .sechead { margin-bottom: clamp(28px, 3vw, 40px); }
body[data-density="generous"] .section { padding-block: clamp(80px, 9vw, 144px); }

/* Sovereignty mode simplified: hide patent table */
body[data-sov-mode="simple"] .patent-table { display: none; }
body[data-sov-mode="simple"] .sov-diagram .sov-diagram__head:nth-child(1) ~ * { /* keep diagram */ }

/* =========================================================
   RTL OVERRIDES
   ========================================================= */
[dir="rtl"] .icounsel__beat-bar button:last-child { border-inline-end: 0; }
[dir="rtl"] .cinema__caption { grid-template-columns: auto 1fr; }
[dir="rtl"] .icounsel__case { direction: rtl; text-align: start; }
[dir="rtl"] .tridemo__transcript .seg.en,
[dir="rtl"] .tridemo__transcript .seg.fr { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .tridemo__chart { direction: ltr; }
[dir="rtl"] .tridemo__colleague { direction: ltr; }

/* =========================================================
   SCROLL REVEAL - words & blocks
   ========================================================= */
[data-reveal-words] { display: inline; }
[data-reveal-words] .rw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotateX(-30deg);
  transform-origin: 50% 100%;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.1, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
  transition-delay: calc(var(--rw-i, 0) * 28ms);
  will-change: opacity, transform;
}
[data-reveal-words][data-revealed="true"] .rw {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
/* Ordinal index: applied via :nth-child via a fallback selector */
[data-reveal-words] .rw:nth-child(1)  { --rw-i: 1; }
[data-reveal-words] .rw:nth-child(2)  { --rw-i: 2; }
[data-reveal-words] .rw:nth-child(3)  { --rw-i: 3; }
[data-reveal-words] .rw:nth-child(4)  { --rw-i: 4; }
[data-reveal-words] .rw:nth-child(5)  { --rw-i: 5; }
[data-reveal-words] .rw:nth-child(6)  { --rw-i: 6; }
[data-reveal-words] .rw:nth-child(7)  { --rw-i: 7; }
[data-reveal-words] .rw:nth-child(8)  { --rw-i: 8; }
[data-reveal-words] .rw:nth-child(9)  { --rw-i: 9; }
[data-reveal-words] .rw:nth-child(10) { --rw-i: 10; }
[data-reveal-words] .rw:nth-child(11) { --rw-i: 11; }
[data-reveal-words] .rw:nth-child(12) { --rw-i: 12; }
[data-reveal-words] .rw:nth-child(13) { --rw-i: 13; }
[data-reveal-words] .rw:nth-child(14) { --rw-i: 14; }
[data-reveal-words] .rw:nth-child(15) { --rw-i: 15; }
[data-reveal-words] .rw:nth-child(16) { --rw-i: 16; }
[data-reveal-words] .rw:nth-child(17) { --rw-i: 17; }
[data-reveal-words] .rw:nth-child(18) { --rw-i: 18; }
[data-reveal-words] .rw:nth-child(19) { --rw-i: 19; }
[data-reveal-words] .rw:nth-child(20) { --rw-i: 20; }
[data-reveal-words] .rw:nth-child(n + 21) { --rw-i: 21; }

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.1, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
  will-change: opacity, transform;
}
[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   AMBIENT MOTION - every section breathes
   ========================================================= */
.section, .hero, .icounsel, .tridemo {
  --section-progress: 0;
  position: relative;
}
/* Drifting hairline grid behind every major section */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,13,18,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,13,18,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position:
    0 calc(var(--section-progress) * -40px),
    calc(var(--section-progress) * -40px) 0;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 90%);
  opacity: 0.55;
}
.section > .shell { position: relative; z-index: 1; }

/* Floating accent orbs - slow drift, scroll-coupled */
.section::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 6%;
  width: 28vw;
  height: 28vw;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 30% 30%, rgba(214,135,72,0.10), transparent 65%);
  transform:
    translate3d(0, calc(var(--section-progress) * -120px), 0)
    scale(calc(0.85 + var(--section-progress) * 0.3));
  opacity: calc(0.4 + var(--section-progress) * 0.6);
  filter: blur(2px);
  transition: opacity 0.4s linear;
}
.section.section--mute::before,
.section.section--mute::after { display: none; }

/* Hero ambient: dawn line slow horizontal sweep */
.hero { overflow: hidden; }
.hero::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: -10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214,135,72,0.35) 30%,
    rgba(214,135,72,0.85) 50%,
    rgba(214,135,72,0.35) 70%,
    transparent 100%);
  transform: translateX(calc(-30% + var(--section-progress) * 60%));
  pointer-events: none;
  z-index: 0;
  filter: blur(0.6px);
}

/* Patient-state pulse rings (universal ICU motif) - drop into any section
   that has data-ambient="pulse". */
[data-ambient="pulse"] { position: relative; }
[data-ambient="pulse"]::before {
  content: "";
  position: absolute;
  inset-inline-end: 4%;
  inset-block-start: 12%;
  width: 200px;
  height: 200px;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(214,135,72,0.35);
  animation: pulse-ring 3.4s ease-out infinite;
  z-index: 0;
}
[data-ambient="pulse"]::after {
  content: "";
  position: absolute;
  inset-inline-end: 4%;
  inset-block-start: 12%;
  width: 200px;
  height: 200px;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(247,228,207,0.20);
  animation: pulse-ring 3.4s ease-out infinite 1.7s;
  z-index: 0;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Vital-trace running line - drop into [data-ambient="trace"] */
[data-ambient="trace"]::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0 40 L100 40 L120 20 L140 60 L160 30 L180 50 L200 40 L320 40 L340 18 L360 62 L380 36 L400 44 L420 40 L560 40 L580 12 L600 70 L620 28 L640 52 L660 40 L800 40 L820 24 L840 56 L860 32 L880 48 L900 40 L1200 40' fill='none' stroke='%23d68748' stroke-width='1.2' opacity='0.6'/></svg>");
  background-repeat: repeat-x;
  background-size: 1200px 80px;
  background-position: calc(var(--section-progress) * -1200px) center;
  opacity: 0.5;
  mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* Glyph drift - slow upward float of typography mark */
[data-ambient="glyph"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 4%;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='30' fill='none' stroke='%230a0d12' stroke-width='0.6' opacity='0.3'/><line x1='40' y1='8' x2='40' y2='72' stroke='%230a0d12' stroke-width='0.6' opacity='0.3'/></svg>");
  transform: translateY(calc(var(--section-progress) * -180px));
  opacity: calc(0.4 - var(--section-progress) * 0.3);
}

/* Reduced motion: kill all ambient drift */
@media (prefers-reduced-motion: reduce) {
  .section::before, .section::after,
  .hero::after,
  [data-ambient="pulse"]::before,
  [data-ambient="pulse"]::after,
  [data-ambient="trace"]::before,
  [data-ambient="glyph"]::before { animation: none !important; transition: none !important; }
}

/* =========================================================
   FOUNDERS BLOCK (CEO + Co-Founder & CMO, paired)
   ========================================================= */
.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
  margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 900px) {
  .founders { grid-template-columns: 1fr; }
}
.founder {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: clamp(20px, 2vw, 32px);
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--ink-200);
  background: var(--paper-100);
}
@media (max-width: 720px) {
  .founder { grid-template-columns: 1fr; }
}
.founder__plate {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.founder__plate svg.silhouette {
  width: 70%;
  height: auto;
  opacity: 0.55;
}
.founder__plate-meta {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-700);
  text-transform: uppercase;
}
.founder__plate-meta strong { color: var(--ink-900); font-weight: 600; }
.founder__plate-meta--bottom {
  inset-block-start: auto;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  inset-inline-start: 12px;
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
}
.founder__plate-cap { color: var(--ink-700); }
.founder__plate-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dawn-500);
}
.founder__body { display: flex; flex-direction: column; gap: 14px; }
.founder__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dawn-500);
}
.founder__name {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0;
  font-weight: 500;
}
.founder__role {
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.founder__bio {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 4px 0 0;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--ink-200);
}
.founder__bio dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  padding-block-start: 2px;
}
.founder__bio dd { margin: 0; color: var(--ink-900); }
.founder__quote {
  margin: 8px 0 0;
  padding: 18px 20px;
  border-inline-start: 2px solid var(--dawn-500);
  background: var(--paper-200, rgba(247,228,207,0.10));
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-900);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.founder__quote-attr {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.founders__note {
  margin-top: clamp(28px, 3vw, 44px);
  padding-block-start: 22px;
  border-block-start: 1px solid var(--ink-200);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-700);
  max-width: 70ch;
}

/* =========================================================
   PRELOADER (sovereign hairline mark, dawn fade-out)
   ========================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink-900, #0a0d12);
  color: var(--paper-100, #f7e4cf);
  display: grid;
  place-items: center;
  transition: opacity 700ms ease-out, visibility 0s linear 700ms;
}
.preloader[data-state="done"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.preloader__mark {
  width: 84px;
  height: 84px;
}
.preloader__mark circle {
  fill: none;
  stroke: rgba(214,135,72,0.85);
  stroke-width: 0.6;
}
.preloader__mark line {
  stroke: rgba(247,228,207,0.85);
  stroke-width: 0.8;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: preloader-stroke 1.6s ease-out forwards;
}
@keyframes preloader-stroke {
  to { stroke-dashoffset: 0; }
}
.preloader__word {
  font-family: var(--font-sans, "IBM Plex Sans", system-ui);
  font-weight: 600;
  letter-spacing: 0.36em;
  font-size: 13px;
  color: rgba(247,228,207,0.85);
}
.preloader__bar {
  width: 140px;
  height: 1px;
  background: rgba(247,228,207,0.18);
  position: relative;
  overflow: hidden;
}
.preloader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(214,135,72,0.85);
  transform-origin: left;
  animation: preloader-bar 1.8s ease-in-out infinite;
}
@keyframes preloader-bar {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  50.01% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cinema__stage .frame { transition: none; }
  .icounsel .signature path,
  .icounsel .audit text {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .bedside-mic .dot { animation: none; }
}

/* =========================================================
   MOBILE / iOS CINEMA SCROLL-SCRUB
   The cinema is a sticky-pinned 100vh viewport. On iOS Safari
   100vh measures past the dynamic toolbar, so the bottom of
   each beat clips. Use 100dvh / 100svh where supported. Also
   the SVG frames declare preserveAspectRatio="xMidYMid slice"
   inline; in a portrait phone shell that 16:9 viewBox would
   slice off ~60% of every frame. Constrain the stage to a
   16:9 box centred inside the viewport so the full beat is
   visible end-to-end.
   ========================================================= */
@supports (height: 100dvh) {
  .cinema__shell { height: 100dvh; }
}
@supports (height: 100svh) {
  /* smallest-possible viewport on iOS: never jumps when the
     URL bar shows or hides */
  .cinema__shell { height: 100svh; }
}

@media (max-width: 900px) {
  .cinema {
    /* Each beat takes less vertical scroll on phones so the
       sequence isn't endless on a small screen, while the
       scrubber still steps cleanly through every frame. */
    min-height: calc((var(--beats) * 60vh) + 100svh);
  }
  .cinema__shell {
    /* Centre the 16:9 stage vertically inside the portrait
       viewport, with safe-area padding on notched iPhones */
    display: grid;
    place-items: center;
    padding-block-start: env(safe-area-inset-top, 0);
    padding-block-end: env(safe-area-inset-bottom, 0);
  }
  .cinema__stage {
    /* Full SVG visible (no slice-crop) on portrait phones */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* In landscape phones the height is the binding dim — keep
       the stage from overflowing vertically */
    max-width: calc((100svh - 200px) * (16 / 9));
    border-color: rgba(247,228,207,0.22);
  }
  .cinema__caption {
    left: 16px; right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 18px);
    max-width: none;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cinema__beat { font-size: 10px; letter-spacing: 0.18em; }
  .cinema__beat-line { font-size: 17px; line-height: 1.38; }
  .cinema__beat-sub { font-size: 13px; line-height: 1.45; }
}

@media (max-width: 480px) {
  .cinema { min-height: calc((var(--beats) * 55vh) + 100svh); }
  .cinema__stage {
    max-width: calc((100svh - 180px) * (16 / 9));
  }
  .cinema__caption {
    left: 14px; right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 14px);
  }
  .cinema__beat-line { font-size: 16px; }
  .cinema__beat-sub { font-size: 12.5px; }
}

/* iOS Safari hover-trap: tap on a beat thumb shouldn't lock
   into :hover. Restore the resting border on touch devices. */
@media (hover: none) {
  .cinema__thumb:hover { border-color: rgba(247,228,207,0.22); }
  .cinema__thumb[data-active="true"]:hover { border-color: rgba(214,135,72,0.95); }
}