body { color: var(--porcelain); background: var(--obsidian); }
.relevo-intro { display: grid; grid-template-columns: 1fr; gap: 18px; padding-block: 125px 26px; }
.relevo-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--mineral); font: 500 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.relevo-eyebrow::before { width: 28px; height: 1px; background: currentColor; content: ''; flex-shrink: 0; }
.relevo-intro h1 { max-width: none; margin: 0; font-family: var(--display); font-size: clamp(42px, 4.5vw, 74px); font-weight: 500; line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.relevo-intro > p { max-width: 920px; margin: 0; color: var(--light-muted); font-size: 15px; line-height: 1.65; }
.relevo-film { width: min(100%, max(480px, calc((100svh - 425px) * 16 / 9))); margin: 0 auto; border: 1px solid var(--line-light); background: #07080a; }
.relevo-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #07080a; }
.relevo-embed { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.relevo-play { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; gap: 14px; width: max-content; height: 56px; max-width: calc(100% - 32px); padding: 14px 24px; border: 1px solid var(--copper); border-radius: 999px; background: var(--copper); color: var(--obsidian); font: 500 11px var(--mono); cursor: pointer; box-shadow: 0 8px 40px rgba(0,0,0,.25); }
.relevo-play svg { width: 18px; height: 18px; fill: currentColor; }
.relevo-player-meta { position: relative; inset: auto; display: block; min-height: 94px; padding: 8px 24px 16px; border-top: 1px solid var(--line-light); background: var(--obsidian); opacity: 1; pointer-events: auto; }
.relevo-player-meta > input[type="range"] { margin: 0; }
.relevo-player-meta .carving-transport { position: relative; inset: auto; justify-content: center; margin-top: 8px; transform: none; }
.relevo-player-meta .carving-restart svg { fill: none; stroke: currentColor; }
.film-sound .sound-off { display: none; }
.film-sound[aria-pressed="true"] .sound-on { display: none; }
.film-sound[aria-pressed="true"] .sound-off { display: inline; }
.relevo-time { position: absolute; bottom: 25px; left: 24px; color: var(--light-muted); font: 10px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.relevo-film-note { width: min(100%, max(480px, calc((100svh - 425px) * 16 / 9))); margin: 12px auto 0; color: var(--light-muted); font: 9px var(--mono); letter-spacing: .06em; }
.relevo-error { padding: 24px; border-top: 1px solid var(--copper); color: var(--porcelain); font-size: 14px; }
.relevo-error p { margin-top: 0; }
.relevo-error button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-light); background: transparent; color: var(--porcelain); font: 11px var(--mono); cursor: pointer; }
.relevo-film:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; background: #000; }
.relevo-film:fullscreen .relevo-player { min-height: 0; height: calc(100% - 94px); aspect-ratio: auto; }
.relevo-film:fullscreen .relevo-player-meta { flex-shrink: 0; }
.relevo-perspective { margin-top: 90px; padding-block: 100px; color: var(--obsidian); background: var(--porcelain); }
.relevo-perspective .section-label { color: var(--ink-muted); font-size: 10px; }
.relevo-perspective-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.relevo-perspective h2, .relevo-context h2 { margin: 0; font-family: var(--display); font-size: clamp(40px, 4.2vw, 64px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
.relevo-perspective-intro p { margin: 0 0 20px; color: var(--ink-muted); font-size: 16px; line-height: 1.8; }
.relevo-perspective-intro .relevo-lead { color: var(--obsidian); font-size: 20px; line-height: 1.65; }
.relevo-decisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; }
.relevo-decisions article { padding-top: 24px; border-top: 1px solid var(--line-dark); }
.relevo-index { color: var(--copper); font: 11px var(--mono); letter-spacing: .1em; }
.relevo-decisions h3 { max-width: 340px; margin: 22px 0 16px; font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: -.04em; }
.relevo-decisions p, .relevo-beyond p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.8; }
.relevo-beyond { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 110px); margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.relevo-beyond h3 { max-width: 480px; margin: 0; font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -.045em; }
.relevo-beyond p + p { margin-top: 16px; }
.relevo-reference { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; margin-top: 32px; color: var(--ink-muted); font: 9px var(--mono); }
.relevo-reference:hover { color: var(--obsidian); }
.relevo-context { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 110px); padding-block: 105px 110px; }
.relevo-context > div > p:not(.relevo-eyebrow) { max-width: 560px; margin: 0; color: var(--light-muted); font-size: 18px; line-height: 1.8; }
.relevo-contact { margin-block: 28px; }
.relevo-context .relevo-disclosure { font-size: 12px !important; }
.relevo-play:focus-visible { outline: 2px solid var(--mineral); outline-offset: 3px; }
.relevo-play[hidden], .relevo-player-meta[hidden], .relevo-error[hidden] { display: none; }
@media (max-width: 800px) {
  .relevo-intro { gap: 20px; padding-block: 110px 26px; }
  .relevo-film, .relevo-film-note { width: 100%; }
  .relevo-eyebrow { margin-bottom: 24px; font-size: 9px; }
  .relevo-intro h1 { max-width: 640px; font-size: clamp(48px, 9vw, 72px); }
  .relevo-intro > p { max-width: 520px; margin: 0; padding-left: 0; border: 0; font-size: 16px; }
  .relevo-player-meta { padding-inline: 16px; }
  .relevo-time { left: 16px; font-size: 8px; }
  .relevo-perspective { margin-top: 56px; padding-block: 64px; }
  .relevo-perspective-intro, .relevo-beyond, .relevo-context { grid-template-columns: 1fr; gap: 30px; }
  .relevo-perspective h2, .relevo-context h2 { font-size: clamp(36px, 7vw, 50px); }
  .relevo-perspective-intro .relevo-lead { font-size: 18px; }
  .relevo-decisions { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .relevo-decisions h3 { margin-top: 15px; }
  .relevo-beyond { margin-top: 40px; }
  .relevo-beyond h3 { font-size: 29px; }
  .relevo-context { padding-block: 65px; }
  .relevo-context > div > p:not(.relevo-eyebrow) { font-size: 16px; }
}
@media (max-width: 380px) { .relevo-time { display: none; } }