.persistent-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: var(--safe-x);
  right: var(--safe-x);
  height: clamp(68px, 7.8vh, 104px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  pointer-events: none;
}

.header-parent, .header-scene { display: flex; align-items: center; }
.header-parent { gap: 17px; }
.header-parent img { width: clamp(92px, 7.4vw, 150px); height: 34px; object-fit: contain; object-position: left center; }
.header-parent span, .header-chapter, .header-domain, .header-count {
  font-size: clamp(10px, .68vw, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-parent span, .header-domain, .header-count { color: var(--quiet); }
.header-scene { gap: 14px; }
.header-scene i { width: 22px; height: 1px; background: rgba(var(--accent-rgb), .7); }
.header-count { margin-left: 18px; font-variant-numeric: tabular-nums; }

.scene {
  position: absolute;
  inset: var(--safe-top) var(--safe-x) var(--safe-bottom);
  display: grid;
  align-items: center;
  gap: clamp(48px, 5vw, 120px);
}
.scene--split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.scene--center {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: clamp(30px, 4vh, 54px);
}

.scene-copy { min-width: 0; position: relative; z-index: 2; }
/* Top-anchor the copy column in split layouts so the brand logo sits at the
   identical y-position on every scene, regardless of how long that scene's
   summary/tags text runs — align-items:center on .scene would otherwise
   vertically center the whole block by its own height, shifting the logo
   scene-to-scene. */
.scene--split .scene-copy { align-self: start; padding-top: clamp(18px, 3vh, 46px); }
.scene--center .scene-copy { width: min(1120px, 78vw); display: grid; justify-items: center; }

.scene-brand {
  min-height: clamp(44px, 5vh, 66px);
  margin-bottom: clamp(22px, 3.2vh, 44px);
  display: flex;
  align-items: center;
  gap: 18px;
}
.scene--center .scene-brand { justify-content: center; }
.scene-brand img {
  width: clamp(130px, 10.6vw, 218px);
  height: clamp(34px, 4.2vh, 58px);
  object-fit: contain;
  object-position: left center;
  filter: none;
}
.scene-brand span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--quiet);
  font-size: clamp(10px, .72vw, 14px);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.scene-brand span i { width: 18px; height: 1px; background: rgba(var(--accent-rgb), .75); }

.scene-eyebrow {
  color: rgb(var(--accent-rgb));
  font-size: clamp(11px, .82vw, 17px);
  font-weight: 650;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 1.8vh, 24px);
}

.scene-headline {
  margin: 0;
  max-width: 11.8ch;
  font-size: clamp(50px, 4.35vw, 94px);
  font-weight: 580;
  letter-spacing: -.052em;
  line-height: .98;
  text-wrap: balance;
}
.scene--center .scene-headline { max-width: 14ch; }

.scene-summary {
  margin: clamp(24px, 3vh, 38px) 0 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(18px, 1.18vw, 25px);
  line-height: 1.55;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.scene--center .scene-summary { max-width: 68ch; }

.scene-tags {
  margin-top: clamp(24px, 3vh, 38px);
  display: flex;
  flex-wrap: wrap;
  gap: 11px 0;
  color: #d8dbe1;
}
.scene--center .scene-tags { justify-content: center; }
.scene-tags span {
  font-size: clamp(12px, .78vw, 16px);
  letter-spacing: .035em;
  white-space: nowrap;
}
.scene-tags span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 15px;
  vertical-align: -2px;
  background: rgba(255,255,255,.17);
}

.scene-visual { min-width: 0; min-height: 0; position: relative; z-index: 1; }
/* Top-anchor alongside .scene-copy (see above) — with both columns centered
   independently, the visual panel (shorter than the split row) floated lower
   than the top-anchored copy text, reading as misaligned. Same offset keeps
   their top edges level. */
.scene--split .scene-visual { width: 100%; height: min(68vh, 730px); align-self: start; margin-top: clamp(18px, 3vh, 46px); }
.scene--center .scene-visual { width: min(1180px, 84vw); height: min(38vh, 410px); }
.visual { width: 100%; height: 100%; position: relative; padding: 4px; box-sizing: border-box; }

@media (max-aspect-ratio: 4/3) {
  .scene--split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 28px; }
  .scene-headline { max-width: 17ch; font-size: clamp(42px, 6vw, 72px); }
  .scene-summary { max-width: 72ch; }
  .scene-brand { margin-bottom: 18px; }
  .scene--split .scene-visual { height: 42vh; }
}

@media (max-height: 760px) {
  :root { --safe-top: 74px; --safe-bottom: 30px; }
  .persistent-header { height: 60px; }
  .scene { gap: 44px; }
  .scene-brand { margin-bottom: 16px; min-height: 36px; }
  .scene-headline { font-size: clamp(42px, 4vw, 70px); }
  .scene-summary { margin-top: 16px; font-size: clamp(15px, 1.08vw, 20px); }
  .scene-tags { margin-top: 18px; }
  .scene--split .scene-visual { height: 68vh; }
}

@media (min-width: 3000px) {
  :root { --safe-x: 210px; --safe-top: 175px; --safe-bottom: 100px; }
  .persistent-header { height: 140px; }
  .scene-headline { font-size: 154px; }
  .scene-summary { font-size: 38px; }
  .scene-eyebrow { font-size: 24px; }
  .scene-tags span { font-size: 24px; }
  .scene--split .scene-visual { height: min(69vh, 1320px); }
  .scene--center .scene-visual { height: min(39vh, 740px); }
}