/* Full-width hero with 15% less height; keep the opening frame visible at startup. */
.home-hero.hero-motion {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-inline: auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  background: var(--navy-950, #1e2d3d);
}

.home-hero.hero-motion > .hero-video {
  position: relative;
  z-index: 0;
  inset: auto;
  grid-area: 1 / 1;
  align-self: center;
  display: block;
  width: 100%;
  height: auto;
  /* Original 16:9 height multiplied by .85, without narrowing the video. */
  aspect-ratio: 320 / 153;
  object-fit: cover;
  object-position: center;
  transform: none;
  animation: none;
  pointer-events: none;
  opacity: 1;
  transition: none;
}

.home-hero.hero-motion .hero-content {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: center;
  padding-block: clamp(48px, 6vw, 76px);
  /* Move text and halo together; keep the existing safe gutter on small screens. */
  left: clamp(-72px, calc((1200px - 100vw) / 3), 0px);
}

.home-hero.hero-motion .hero-overlay {
  display: none;
  background: none;
}

/* Only the rotating headline remains. Center its shared frame vertically
   inside the video, with symmetric padding and no inherited title margins. */
.home-hero.hero-motion .hero-title { position: relative; z-index: 1; margin: 0; }
/* The general reveal mask must not crop the halo's outer breathing room. */
.home-hero.hero-motion .hero-title[data-reveal] { clip-path: none; }

.hero-title-frames {
  display: grid;
  align-items: center;
}

.hero-title-frame {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  justify-self: start;
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  text-align: left;
  text-shadow: 0 1px 3px rgba(43, 47, 51, .28);
  opacity: 0;
  visibility: hidden;
  transform: none;
  /* Let the outgoing phrase fade completely before revealing the next one.
     Keep all phrases in the shared grid so neither the title nor hero shifts. */
  transition: opacity 550ms cubic-bezier(.4, 0, .6, 1), visibility 0s linear 550ms;
}

/* A spacious left-aligned band, shared in size by all three phrases.
   Equal upper/lower breathing room keeps even short phrases vertically centered.
   Parent opacity fades the letters and band together, without extra animation. */
.hero-title-frame::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -.65em -.65em;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(43, 47, 51, .46) 0%,
    rgba(43, 47, 51, .4) 72%,
    rgba(43, 47, 51, .22) 90%,
    rgba(43, 47, 51, 0) 100%);
}

.hero-title-frame.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 850ms cubic-bezier(.22, .61, .36, 1) 550ms, visibility 0s linear 550ms;
}

/* Discreet 28px icon surface with a transparent 44px touch target. */
.home-hero.hero-motion .hero-video-toggle {
  position: absolute;
  z-index: 3;
  left: clamp(10px, 1.5vw, 20px);
  bottom: clamp(10px, 1.5vw, 20px);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .84);
  cursor: pointer;
  box-shadow: none;
  transition: color 180ms ease;
}
.home-hero.hero-motion .hero-video-toggle::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: rgba(12, 20, 28, .6);
  pointer-events: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.home-hero.hero-motion .hero-video-toggle[hidden] { display: none; }
.home-hero.hero-motion .hero-video-toggle:hover,
.home-hero.hero-motion .hero-video-toggle:focus-visible { color: #fff; }
.home-hero.hero-motion .hero-video-toggle:hover::before,
.home-hero.hero-motion .hero-video-toggle:focus-visible::before { background: rgba(12, 20, 28, .85); border-color: rgba(255, 255, 255, .25); }
.home-hero.hero-motion .hero-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home-hero.hero-motion .hero-video-toggle:disabled { cursor: default; opacity: .8; }
.hero-video-toggle svg { position: relative; width: 12px; height: 12px; flex: 0 0 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hero-video-toggle .hero-video-toggle-play { display: none; }
.hero-video-toggle[data-state="paused"] .hero-video-toggle-pause { display: none; }
.hero-video-toggle[data-state="paused"] .hero-video-toggle-play { display: block; }

/* On mobile/tablet, keep the copy over the video in a single hero.
   A centered cover crop fills the portrait area without stretching the source. */
@media (max-width: 991px) {
  .home-hero.hero-motion {
    /* Each limit and the viewport-relative height are reduced by 15%. */
    min-height: clamp(459px, 64.6svh, 578px);
  }
  .home-hero.hero-motion > .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .home-hero.hero-motion .hero-content {
    grid-area: 1 / 1;
    width: calc(100% - 48px);
    padding-block: 24px;
  }
}

@media (max-width: 560px) {
  body::after { right: 64px; bottom: 12px; font-size: 10px; }
  .home-hero.hero-motion .hero-content::after { width: 115vw; opacity: .17; }
  .hero-title-frame::before { inset: -24px -16px; }
  .home-hero.hero-motion .hero-content { width: calc(100% - 36px); }
  .home-hero.hero-motion .hero-title {
    font-size: clamp(1.65rem, 7.4vw, 2.15rem);
    line-height: 1.12;
  }
}

/* Keep the same readable type on narrow phones; recover space from gaps. */
@media (max-width: 359px) {
  .home-hero.hero-motion .hero-content { padding-block: 16px; }
}

@media (prefers-contrast: more) {
  .hero-title-frame::before {
    background: linear-gradient(90deg,
      rgba(43, 47, 51, .8) 0%, rgba(43, 47, 51, .72) 85%,
      rgba(43, 47, 51, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-frame,
  .hero-title-frame.is-active,
  .home-hero.hero-motion .hero-video-toggle,
  .home-hero.hero-motion .hero-video-toggle::before,
  .home-hero.hero-motion > .hero-video { transition: none; transform: none; }
}