.hero--cinematic { display: grid; align-items: stretch; grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - 85px); min-height: 660px; max-height: 1100px; background: var(--c-bg); }
.hero-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-stage { position: relative; min-height: 0; isolation: isolate; overflow: hidden; }
.hero--cinematic .hero-media { background: var(--c-bg-soft); }
.hero--cinematic .hero-media video { object-fit: cover; object-position: center; }
.hero--cinematic .hero-media::after { background: none; }
.hero-cues { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-cue { --cue-opacity: 0; --cue-reveal: 110%; position: absolute; inset: 0; margin: 0; opacity: var(--cue-opacity); will-change: opacity; }
.hero-cue::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-bg) 86%, transparent), color-mix(in srgb, var(--c-bg) 52%, transparent) 23%, transparent 51%); }
.hero-cue--focus::before, .hero-cue--view::before { transform: scaleX(-1); }
.hero-cue-copy { position: absolute; display: block; width: max-content; max-width: 43%; color: var(--c-ink); }
.hero-cue-lead { display: block; margin-bottom: clamp(0.6rem, 1.1vw, 1.15rem); font-family: var(--font-body); font-size: clamp(0.75rem, 0.9vw, 0.9rem); font-weight: 500; line-height: 1.3; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-2); }
.hero-cue-line { display: block; overflow: hidden; padding: 0.04em 0.06em 0.1em 0; margin: -0.04em -0.06em -0.1em 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.5rem, 6.5vw, 7rem); line-height: 1.1; letter-spacing: .045em; text-transform: uppercase; }
.hero-cue-accent { display: block; transform: translateY(var(--cue-reveal)); will-change: transform; }
.hero-cue-stop { color: var(--c-chip); }
.hero-cue--detail { --cue-opacity: 1; --cue-reveal: 0%; }
.hero-cue--detail .hero-cue-copy { left: 6%; top: 19%; }
.hero-cue--focus .hero-cue-copy { right: 6%; top: 19%; text-align: right; }
.hero-cue--view .hero-cue-copy { right: 6%; bottom: 12%; text-align: right; }
.hero-cue--work .hero-cue-copy { left: 6%; bottom: 12%; }
.hero-cue--view .hero-cue-line, .hero-cue--work .hero-cue-line { font-size: clamp(2rem, 3.8vw, 4.5rem); letter-spacing: .025em; }
.hero-dock { display: flex; align-items: center; gap: var(--space-lg); width: 100%; padding-block: var(--space-md); border-top: 1px solid var(--c-line); }
.hero-dock-label { margin: 0 auto 0 0; font-size: var(--text-small); color: var(--c-ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.hero-primary { background: var(--c-ink); color: var(--c-on-ink); text-transform: none; letter-spacing: -0.015em; font-size: 0.9375rem; font-weight: 500; padding: 0.85rem 1.4rem; gap: var(--space-lg); }
.hero-primary:hover { background: var(--c-ink-2); }
.hero-primary span { font-size: 1.2rem; }
.hero-contact { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: var(--c-ink); font-size: var(--text-small); font-weight: 500; }
.hero-contact:hover { color: var(--c-chip); text-decoration: underline; text-underline-offset: 5px; }
.hero-playback { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); flex-shrink: 0; min-height: 44px; padding: 0.5rem 0.85rem; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-ink); font: inherit; font-size: 0.75rem; cursor: pointer; }
.hero-playback[hidden] { display: none; }
.hero-playback:hover { background: var(--c-bg-soft); }
.hero-playback-icon { width: 1em; text-align: center; }
@media (max-width: 1100px) {
  .hero-dock { flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
  .hero-dock-label { flex-basis: 100%; }
  .hero-actions { margin-right: auto; }
}
@media (max-width: 900px) {
  .hero--cinematic { height: calc(100svh - 69px); min-height: 580px; }
}
@media (max-width: 760px) {
  .hero--cinematic { display: block; height: auto; min-height: 0; max-height: none; }
  .hero-stage { height: auto; aspect-ratio: 1 / 1.08; max-height: 660px; }
  .hero--cinematic .hero-media { background: var(--c-bg); }
  .hero--cinematic .hero-media video { object-fit: contain; }
  .hero-cue::before { display: none; }
  .hero-cue-copy { max-width: 88%; }
  .hero-cue-lead { font-size: .75rem; letter-spacing: 0.18em; margin-bottom: 0.5rem; }
  .hero-cue-line, .hero-cue--view .hero-cue-line, .hero-cue--work .hero-cue-line { font-size: clamp(1.75rem, 7vw, 3rem); line-height: 1.12; letter-spacing: .025em; }
  .hero-cue--detail .hero-cue-copy, .hero-cue--focus .hero-cue-copy { top: 4%; }
  .hero-cue--view .hero-cue-copy, .hero-cue--work .hero-cue-copy { bottom: 4%; }
  .hero-dock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); padding-block: var(--space-lg); }
  .hero-dock-label { grid-column: 1 / -1; font-size: 0.8125rem; }
  .hero-actions { grid-column: 1; gap: var(--space-sm); margin: 0; }
  .hero-primary { gap: var(--space-md); font-size: 0.8125rem; padding-inline: 1rem; }
  .hero-contact { font-size: 0.8125rem; }
  .hero-playback { align-self: start; min-width: 44px; padding-inline: 0.75rem; }
  .hero-playback-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .hero-cue, .hero-cue-accent { will-change: auto; } }

.hero-cue-lead { font-weight: 600; letter-spacing: .3em; color: #116d9f; }
.hero-cue-copy::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: 22px; background: #1d9add; }
.hero-cue--focus .hero-cue-copy::before, .hero-cue--view .hero-cue-copy::before { margin-left: auto; }
@media (max-width: 760px) { .hero-cue-copy::before { width: 36px; margin-bottom: 12px; } }