/* ==========================================================================
   Website 2.2 HAI — HERO MOCKUP (exploratory, EN homepage only, not deployed)
   Cinematic, video-led hero. The film is the hero; copy sits in a side rail and
   never over the picture (the film carries its own slide text). The page navy is one
   step deeper than the film's slide navy, so the film reads as a lit screen; an exact
   match is not robust (browsers colour-manage video and CSS differently).
   Modes: .zh--loop (muted 0:52–1:13 preview) / .zh--full (2:39 with sound,
   captions in the band below the picture — the promo player, reused).
   ========================================================================== */
.zh {
  --zh-bg: #04112a;
  --zh-film: #061936;
  --zh-h: max(540px, 70svh);         /* hero height on desktop */
  --zh-pady: clamp(28px, 4.5svh, 48px);
  --zh-barh: 52px;
  position: relative; overflow: hidden;
  min-height: var(--zh-h);
  display: flex; align-items: center;
  padding: var(--zh-pady) 0 var(--zh-pady) clamp(24px, 4.4vw, 72px);
  background: var(--zh-bg); color: #fff;
}
.zh[hidden] { display: none; }
.zh-inner {
  display: grid; width: 100%; align-items: center;
  grid-template-columns: clamp(340px, 29vw, 30rem) minmax(0, 1fr);
  gap: clamp(32px, 3.4vw, 60px);
}
.zh-copy { min-width: 0; }
.zh :focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; border-radius: 6px; }
.zh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Copy rail ---- */
.zh-h1 {
  margin: 0; font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(2rem, 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.005em;
}
.zh-h1 > span { display: block; }
.zh-gold { color: var(--gold-dark); font-style: italic; }
.zh-rule { display: block; width: 48px; height: 2px; background: var(--gold); margin: 26px 0 20px; }
.zh-plan {
  margin: 0; font-family: var(--font-display); font-weight: 500; color: rgba(255, 255, 255, .82);
  font-size: clamp(1.3rem, 1.5vw, 1.6rem); line-height: 1.25;
}
.zh-plan > span[aria-hidden] { display: block; }
.zh-roll { display: block; height: 1.25em; overflow: hidden; }
.zh-roll-track { display: block; animation: zhRoll 10.5s cubic-bezier(.16, 1, .3, 1) infinite; }
.zh-roll-track > span { display: block; height: 1.25em; color: #fff; font-weight: 600; }
.zh-ask { display: block; margin-top: .3em; color: var(--gold-dark); font-weight: 600; }
.zh-ask em { font-style: italic; }
@keyframes zhRoll {
  0%, 27% { transform: translateY(0); }
  33.33%, 60.33% { transform: translateY(-25%); }
  66.67%, 93.67% { transform: translateY(-50%); }
  100% { transform: translateY(-75%); }
}
.zh-sub { margin: 22px 0 0; max-width: 40ch; font-size: .9375rem; line-height: 1.62; color: rgba(255, 255, 255, .7); }
.zh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.zh-btn {
  display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--gold); color: var(--zh-bg);
  font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background .2s var(--ease);
}
.zh-btn:hover { background: #c8a75f; text-decoration: none; }
.zh-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.zh-btn--ghost:hover { background: rgba(255,255,255,.08); }
.zh-watch, .zh-sound, .zh-mini, .zh-close {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.zh-watch { display: inline-flex; align-items: center; gap: 11px; font-size: .9375rem; font-weight: 600; color: #fff; }
.zh-watch svg {
  box-sizing: content-box; width: 13px; height: 13px; padding: 9px; border-radius: 50%;
  border: 1px solid rgba(203, 170, 106, .7); color: var(--gold-dark); transition: background .2s var(--ease);
}
.zh-watch:hover svg { background: rgba(203, 170, 106, .14); }
.zh-dur { color: var(--neutral); font-weight: 500; font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* ---- Stage (the film) ---- */
.zh-stage {
  position: relative; justify-self: end; min-width: 0;
  /* As large as the hero height allows, bleeding off the right edge. */
  width: min(100%, calc((var(--zh-h) - 2 * var(--zh-pady) - var(--zh-barh)) * 16 / 9));
}
.zh .zp { background: transparent; }
.zh--loop .zp { border-radius: 0; box-shadow: none; }
.zh--loop .zp-viewport { background: var(--zh-film); }
.zh--loop .zp-viewport video {
  background: var(--zh-film); cursor: pointer;
  transition: opacity .45s var(--ease);
}
.zh--fade .zp-viewport video { opacity: 0; }
.zh--loop .zp-captions, .zh--loop .zp-controls { display: none !important; }

/* Preview bar under the picture (never over it) */
.zh-bar {
  display: flex; align-items: center; gap: 12px; height: var(--zh-barh);
  padding: 0 clamp(16px, 3vw, 40px) 0 0; color: var(--neutral);
}
.zh--full .zh-bar { display: none; }
.zh-mini { flex: none; margin-left: -6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.zh-mini:hover { background: rgba(255, 255, 255, .08); }
.zh-mini svg { width: 18px; height: 18px; }
.zh-i-play { display: none; }
.zh--paused .zh-i-play { display: block; }
.zh--paused .zh-i-pause { display: none; }
.zh-state { white-space: nowrap; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.zh-sound {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 8px 4px; white-space: nowrap;
  font-size: .875rem; font-weight: 600; color: var(--gold-dark);
}
.zh-sound svg { width: 20px; height: 20px; }
.zh-sound:hover { color: #e0c48a; }

/* ---- Full story mode (2:39 with sound, caption band + controls) ---- */
.zh--full { min-height: 0; padding: 20px clamp(16px, 4vw, 56px) 40px; }
.zh--full .zh-inner { grid-template-columns: minmax(0, 1fr); }
.zh--full .zh-copy { display: none; }
.zh--full .zh-stage {
  justify-self: center;
  width: min(100%, calc((100svh - var(--header-h) - 230px) * 16 / 9));
  min-width: min(100%, 560px);
}
.zh-close {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 2px;
  font-size: .875rem; font-weight: 600; color: var(--gold-dark);
}
.zh-close[hidden] { display: none; }
.zh--full .zp {
  border-radius: var(--r-lg); background: var(--zh-film);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(203, 170, 106, .28);
}

/* ---- Tablet / mobile: film first, full bleed, copy beneath ---- */
@media (max-width: 900px) {
  .zh { display: block; min-height: 0; padding: 0; }
  .zh-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zh-stage { order: -1; width: 100%; justify-self: stretch; }
  .zh-bar { padding: 0 12px 0 16px; height: 48px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .zh-copy { padding: 26px 20px 40px; }
  .zh-h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  .zh-rule { margin: 20px 0 16px; }
  .zh-plan { font-size: clamp(1.25rem, 5.2vw, 1.45rem); }
  .zh-sub { max-width: none; margin-top: 18px; }
  .zh-ctas { margin-top: 22px; }
  .zh--full { padding: 12px 0 28px; }
  .zh--full .zh-stage { width: 100%; min-width: 0; }
  .zh--full .zp { border-radius: 0; }
  .zh-close { margin-left: 16px; }
}
@media (max-width: 420px) {
  .zh-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .zh-roll-track { animation: none; }
  .zh--loop .zp-viewport video { transition: none; }
}

/* ---- Player internals: identical to the deployed promo player (promo/promo.css) ---- */
.zp-viewport { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; }
.zp-viewport video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.zp--enhanced .zp-viewport video { cursor: pointer; }
/* No-JS fallback keeps native captions readable on the picture. */
.zp-viewport video::cue { background: rgba(0, 0, 0, .78); color: #fff; line-height: 1.35; }
/* Caption band: fixed two-line height so the player never jumps between cues. */
.zp { container-type: inline-size; }
.zp-captions {
  /* Text scales with the PLAYER width (not the window); two lines reserved, three on narrow players. */
  --zp-cap: clamp(14px, 1.9cqi, 20px);
  --zp-lines: 2;
  --zp-pad: clamp(9px, 1.3cqi, 14px);
  display: grid; place-items: center; text-align: center;
  min-height: calc(var(--zp-cap) * 1.5 * var(--zp-lines) + 2 * var(--zp-pad) + 2px);
  padding: var(--zp-pad) clamp(10px, 2.5cqi, 28px);
  background: #061936; border-top: 1px solid rgba(203, 170, 106, .22);
}
@container (max-width: 520px) {
  .zp-captions { --zp-cap: clamp(13.5px, 4cqi, 15px); --zp-lines: 3; }
}
@container (max-width: 310px) {
  .zp-captions { --zp-lines: 4; }
}
.zp-captions[hidden] { display: none; }
.zp-captions-text {
  margin: 0; max-width: 62ch; white-space: pre-line; color: #fff;
  font-size: var(--zp-cap); line-height: 1.5; font-weight: 500; letter-spacing: .005em;
}
/* Controls */
.zp-controls {
  position: relative; display: flex; align-items: center; gap: clamp(4px, 1vw, 10px);
  padding: 6px clamp(6px, 1.4vw, 14px); background: #04112a; border-top: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.zp-controls[hidden] { display: none; }
.zp-btn {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer;
}
.zp-btn:hover { background: rgba(255, 255, 255, .09); }
.zp-btn svg { width: 22px; height: 22px; display: block; }
.zp .zp-btn:focus-visible, .zp .zp-range:focus-visible, .zp .zp-menu-item:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 1px;
}
.zp-i-pause, .zp-i-muted, .zp-i-fs-exit { display: none !important; }
.zp-btn--play.is-playing .zp-i-play, .zp-btn.is-muted .zp-i-vol, .zp-btn.is-on .zp-i-fs { display: none !important; }
.zp-btn--play.is-playing .zp-i-pause, .zp-btn.is-muted .zp-i-muted, .zp-btn.is-on .zp-i-fs-exit { display: block !important; }
.zp-time { flex: none; font-size: 13px; color: #cfd8e8; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: center; }
.zp-range {
  --zp-fill: 0%;
  -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.zp-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--gold-dark) var(--zp-fill), rgba(255, 255, 255, .25) var(--zp-fill));
}
.zp-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.zp-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold-dark); }
.zp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gold-dark);
}
.zp-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gold-dark); }
.zp-seek { flex: 1 1 auto; min-width: 60px; }
.zp-vol { flex: none; width: 84px; }
.zp-cc { position: relative; flex: none; }
.zp-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 210px; padding: 6px;
  background: #0b1d3d; border: 1px solid rgba(203, 170, 106, .35); border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
}
.zp-menu[hidden] { display: none; }
.zp-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.zp-menu-item::before { content: ""; width: 14px; flex: none; text-align: center; color: var(--gold-dark); }
.zp-menu-item[aria-checked="true"]::before { content: "\2713"; }
.zp-menu-item:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 640px) {
  .zp-vol { display: none; }
  .zp-btn { width: 38px; height: 40px; }
  .zp-time { font-size: 12px; }
}
/* Fullscreen = the whole player, so the caption band and controls come along (no overlay). */
.zp:fullscreen, .zp:-webkit-full-screen {
  display: flex; flex-direction: column; width: 100%; height: 100%; max-width: none; border-radius: 0; background: #000;
}
.zp:fullscreen .zp-viewport, .zp:-webkit-full-screen .zp-viewport { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.zp:fullscreen .zp-captions, .zp:-webkit-full-screen .zp-captions { --zp-cap: clamp(18px, 2.3vw, 34px); }