/* Three hero layouts for Chris to choose from (2026-11-09). Each drops the bottom-left word stack and the side tab. */

/* Shared: WhatsApp in the header, step bars that fill with the film */
.pill--wa { background: var(--cyan); color: var(--cyan-ink); display: inline-flex; gap: 8px; align-items: center; }
.pill--wa:hover { background: #55B9E5; }
.pill--wa svg { width: 16px; height: 16px; }
.btn--wa { background: var(--cyan); color: var(--cyan-ink); }
.btn--wa:hover { background: #55B9E5; }
.btn--wa:active, .btn--call:active { transform: scale(.97); }
.btn--wa::after, .btn--call::after { content: none; }
.btn--call { background: none; color: inherit; border: 1px solid currentColor; }
.btn--call:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn { padding: 14px 22px; font-size: 15px; }
.steps--bars { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.steps--bars li { font: inherit; text-transform: none; letter-spacing: 0; color: inherit; text-decoration: none; opacity: 1; }
.steps--bars li.on { opacity: 1; color: inherit; text-decoration: none; }
.steps--bars li::after { content: none; }
.steps--bars .bar { display: block; height: 3px; background: color-mix(in srgb, currentColor 22%, transparent); position: relative; margin-bottom: 10px; }
.steps--bars .bar i { position: absolute; inset: 0; background: var(--cyan); transform: scaleX(var(--p, 0)); transform-origin: left; }
.steps--bars b { display: block; font: 600 17px var(--display); }
.steps--bars small { display: block; font-size: 13px; letter-spacing: .01em; opacity: .82; }
.steps--bars li:not(.on) b { opacity: .78; transition: opacity .4s; }
/* Each step is a button: tap it and the film jumps to that step */
.step-seek { display: block; width: 100%; background: none; border: 0; padding: 6px 0; margin: -6px 0; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform 100ms ease-out; }
.step-seek:active { transform: scale(.97); }
.step-seek:hover .bar { background: color-mix(in srgb, currentColor 40%, transparent); }
/* Pause control on the film (anything moving past 5 s needs one) */
.film-toggle { position: absolute; right: 16px; top: 16px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgb(20 24 38 / .45); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); cursor: pointer; transition: transform 100ms ease-out, background-color .2s; }
.film-toggle:hover { background: rgb(20 24 38 / .65); }
.film-toggle:active { transform: scale(.94); }
.film-toggle svg { width: 16px; height: 16px; }
.film-toggle .i-play { display: none; }
.film-toggle[aria-pressed="true"] .i-play { display: block; }
.film-toggle[aria-pressed="true"] .i-pause { display: none; }
@media (prefers-reduced-transparency: reduce) { .film-toggle { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.direction-tag { position: fixed; right: 12px; bottom: 12px; z-index: 30; background: var(--ink); color: #fff; font-size: 12px; padding: 7px 10px; }
.direction-tag a { color: var(--cyan); margin-left: 8px; }

/* A. Workbench: white half with the words, film in the other half */
.hero--split { display: grid; grid-template-columns: 5fr 7fr; background: var(--page); color: var(--ink); max-height: none; }
.hero--split::after { content: none; }
.hero--split .hero-media { position: relative; }
.split-copy { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 48px clamp(24px, 4vw, 64px) 40px var(--gutter); }
.split-place { font-size: 15px; letter-spacing: .01em; color: var(--ink-soft); }
.hero--split h1.statement { font-size: clamp(44px, 4.8vw, 76px); line-height: .98; letter-spacing: -0.028em; max-width: 11ch; }
.split-lede { max-width: 40ch; color: var(--ink-soft); font-size: 17px; }
.hero--split .steps--bars { margin-top: auto; padding-top: 24px; }
.hero--split .hero-credit { color: #fff; }

/* B. Screening room: navy room, the film in a wide frame, steps under it like a timeline */
.hero--cinema { height: auto; max-height: none; min-height: 0; background: var(--ink); padding: clamp(28px, 4vh, 56px) var(--gutter) clamp(40px, 6vh, 64px); display: grid; justify-items: center; gap: 22px; text-align: center; }
.hero--cinema::after { content: none; }
.hero--cinema h1.statement { font-size: clamp(36px, 3.6vw, 58px); max-width: 18ch; }
.cinema-frame { position: relative; width: min(100%, 1320px, calc((100svh - 470px) * 2.33)); min-width: min(100%, 640px); aspect-ratio: 21 / 9; overflow: hidden; }
.cinema-frame .hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--cinema .steps--bars { width: min(100%, 1320px, calc((100svh - 470px) * 2.33)); min-width: min(100%, 640px); text-align: left; }
.hero--cinema .cta-row { justify-content: center; }
.hero--cinema .hero-credit { position: static; opacity: .7; margin-top: -12px; }

/* C. Lettered: the film plays inside the name, one button opens it full */
.hero--letters { height: auto; max-height: none; min-height: 0; background: var(--page); color: var(--ink); }
.hero--letters::after { content: none; }
.letters-stage { position: relative; height: 23vw; min-height: 180px; max-height: 420px; overflow: hidden; background: var(--ink); }
.letters-stage .hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.letters-mask { position: absolute; inset: 0; display: grid; place-items: center; background: var(--page); color: #000; mix-blend-mode: screen; font: 800 clamp(80px, 20.5vw, 330px)/.8 var(--display); letter-spacing: -0.045em; text-transform: uppercase; transition: opacity .9s ease; padding-bottom: .04em; }
.letters-stage video, .letters-stage .hero-poster { filter: brightness(.68) contrast(1.15); transition: filter .9s; }
.letters-stage.open video, .letters-stage.open .hero-poster { filter: none; }
.letters-stage.open .letters-mask { opacity: 0; }
.letters-open { position: absolute; right: var(--gutter); bottom: 16px; z-index: 2; background: var(--ink); color: #fff; border: 0; padding: 10px 14px; font-size: 13px; cursor: pointer; }
.letters-stage.open .letters-open { background: #fff; color: var(--ink); }
.letters-row { display: grid; grid-template-columns: 6fr 4fr; gap: 24px 48px; align-items: end; padding: 32px var(--gutter) 8px; }
.hero--letters h1.statement { font-size: clamp(36px, 3.8vw, 60px); max-width: 15ch; }
.letters-side { display: grid; gap: 22px; }
.letters-side .steps--bars { grid-template-columns: repeat(4, 1fr); }
.hero--letters .hero-credit { position: static; color: var(--ink-soft); padding: 14px var(--gutter) 0; }

@media (max-width: 860px) {
  .hero--split { grid-template-columns: 1fr; height: auto; }
  .hero--split .hero-media { order: -1; height: 62svh; }
  .split-copy { padding: 28px var(--gutter) 32px; gap: 20px; }
  .hero--split .hero-credit { top: calc(62svh - 32px); bottom: auto; }
  .steps--bars { gap: 8px; }
  .steps--bars b { font-size: 15px; }
  .steps--bars small { font-size: 12px; }
  .cta-row .btn { flex: 1 1 auto; justify-content: center; }
  .cinema-frame { aspect-ratio: 4 / 5; }
  .letters-stage { height: 30vw; min-height: 120px; }
  .letters-mask { font-size: 20vw; }
  .letters-stage { overflow: visible; margin-bottom: 44px; }
  .letters-open { bottom: -40px; right: var(--gutter); }
  .direction-tag { font-size: 11px; padding: 5px 8px; right: 6px; bottom: 6px; }
  .letters-row { grid-template-columns: 1fr; padding-top: 24px; }
  .pill--wa span { display: none; }
  .bar .pill:not(.pill--wa) { display: none; }
}
.hero-media > .film-toggle { inset: auto; top: 16px; right: 16px; width: 40px; height: 40px; }
input[aria-invalid="true"] { border-color: #B42318; }