/* Direct WebCodecs frames only: no HTML video player exists, even off-document. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050a10;
}
.hero-background {
  position: absolute;
  inset: 136px 0 0;
  width: 100%;
  height: calc(100% - 136px);
  background: #050a10 url("assets/pool-poster-v4-desktop.jpg") center / cover no-repeat;
  z-index: -2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  contain: paint;
}
.hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
}
.hero-background[data-playback-state="playing"] .hero-canvas,
.hero-background[data-playback-state="paused"] .hero-canvas { opacity: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: 136px 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 7, 15, .72), rgba(0, 8, 18, .32) 62%, rgba(0, 8, 18, .12));
}
.hero::after {
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 8, 18, .65));
}
.hero h1 { text-wrap: balance; text-shadow: 0 2px 28px rgba(0, 0, 0, .18); }
.hero p { text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.hero-copy { padding-bottom: 0; }
.hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding-bottom: 56px;
  text-align: center;
}
.hero-primary { justify-content: center; min-width: 190px; }
.hero-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #fff;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .65);
}
.hero-contact a:hover { color: #65c7ff; text-decoration: underline; }
@media (max-width: 540px) {
  .hero-background { inset-block-start: 108px; height: calc(100% - 108px); background-image: url("assets/pool-poster-v4-mobile.jpg"); }
  .hero::before { inset-block-start: 108px; background: linear-gradient(180deg, rgba(0, 8, 18, .38), rgba(0, 8, 18, .55) 62%, rgba(0, 8, 18, .62)); }
  .hero h1 { font-size: clamp(2.35rem, 10.7vw, 3.75rem); line-height: 1.05; }
  .hero-actions { padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}