/* Independent film block, with equal breathing room above and below its image. */
.immersive-home-hero .hero-content {
  position:relative;top:auto;left:auto;right:auto;width:54%;max-width:900px;
  margin-left:var(--gutter);padding:clamp(26px,4svh,56px) 0 0;flex:none;
}
.immersive-home-hero .hero-content h1 {font-size:clamp(42px,min(5vw,7.8svh),96px)}
.immersive-home-hero .hero-highlight {color:var(--accent)}
.immersive-home-hero .hero-value-subtitle {font-size:clamp(19px,2.1vw,30px);margin-top:clamp(16px,2.3svh,28px)}
.immersive-home-hero .hero-ctas {margin-top:clamp(18px,2.5svh,30px)}
.immersive-home-hero .hero-autonomy-note {margin-top:16px;max-width:440px;font-size:10px}
.hero-film-block {display:flex;align-items:center;flex:1 0 auto;order:3;padding:clamp(28px,4svh,48px) var(--gutter)}
.hero-film {
  position:relative;display:block;width:clamp(270px,min(30vw,49svh),580px);max-width:100%;
  aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:5px;
  background:#031b25;border:1px solid #ffffff4d;box-shadow:0 8px 32px #00101826;
}
.hero-film>img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.hero-film-caption {
  position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:12px;
  padding:10px 13px 10px 10px;border-radius:3px;background:#061820ed;color:#fff;
  font-size:clamp(13px,1vw,17px);font-weight:600;line-height:1.3;
}
.hero-film-play {display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#080d10}
/* The play path is already offset in its viewBox; align the filled triangle optically. */
.hero-film-play .icon {width:16px;height:16px;fill:currentColor;margin:0;transform:translateX(-.5px)}
.hero-film-duration {margin-left:auto;font-size:11px;font-weight:400;color:#dce8e9}
.hero-film:focus-visible {outline:3px solid var(--accent);outline-offset:5px}
@media(hover:hover) {.hero-film:hover>img {transform:scale(1.035)}.hero-film:hover {border-color:var(--accent)}}
/* Allow short windows and enlarged text to grow the hero instead of clipping the film. */
body.home .immersive-home-hero {display:flex;flex-direction:column;height:auto;min-height:calc(100svh - 90px);max-height:none}
body.home:has(.announcement) .immersive-home-hero {min-height:calc(100svh - 124px)}
@media(min-width:1700px) {
  body.home .immersive-home-hero {min-height:calc(100svh - 105px)}
  body.home:has(.announcement) .immersive-home-hero {min-height:calc(100svh - 139px)}
}
.home-film-dialog {width:1120px;max-width:calc(100vw - 32px);padding:0;border-color:#ffffff36;border-radius:5px;background:#080d10}
.home-film-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.home-film-heading h2 {font-size:17px;letter-spacing:0;font-weight:500}
.home-film-heading .icon-button {flex-shrink:0}
.home-film-dialog video {display:block;width:100%;aspect-ratio:16/9;max-height:calc(90svh - 138px);background:#000;object-fit:contain}
.home-film-toolbar {display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 16px;font-size:12px}
.home-film-toolbar select {min-height:40px;padding:8px 30px 8px 10px;color:#f5f4ec;background:#182226;border:1px solid #ffffff45;border-radius:3px;font:inherit}
.home-film-toolbar select:focus-visible,.home-film-heading button:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.home-film-error {padding:0 16px 16px;font-size:13px}.home-film-error a {text-decoration:underline;text-underline-offset:3px}
body:has(.home-film-dialog[open]) {overflow:hidden}
@media(min-width:601px) and (max-width:850px) {
  body.home .immersive-home-hero {min-height:calc(100svh - 75px)}
  body.home:has(.announcement) .immersive-home-hero {min-height:calc(100svh - 105px)}
  .immersive-home-hero .hero-content {width:65%;padding-top:32px}
  .immersive-home-hero .hero-content h1 {font-size:48px}
  .hero-film {width:340px}
}
@media(max-width:600px) {
  /* Share the first grid row between the photo, its shade and the value proposition. */
  body.home .immersive-home-hero,body.home:has(.announcement) .immersive-home-hero {
    display:grid;grid-template-columns:minmax(0,1fr);min-height:0;background:#080d10;
  }
  .immersive-home-hero .ocean-hero-image {
    grid-area:1 / 1 / 2 / 2;position:absolute;inset:0;width:100%;height:100%;object-position:63% center;
    -webkit-mask-image:none;mask-image:none;
  }
  .immersive-home-hero:after {
    display:block;grid-area:1 / 1 / 2 / 2;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(1,17,28,.88),rgba(1,20,30,.66) 58%,rgba(1,20,30,.04) 85%),linear-gradient(0deg,rgba(3,19,28,.25),transparent 50%);
  }
  .immersive-home-hero .hero-content {display:contents}
  .immersive-home-hero .hero-value-proposition {
    grid-area:1 / 1;z-index:2;display:flex;flex-direction:column;justify-content:center;
    min-height:75svh;padding:40px 22px;color:#fff;text-align:left;
    text-shadow:0 2px 18px #00101866;
  }
  .immersive-home-hero .hero-content h1 {max-width:75%;font-weight:700}
  .immersive-home-hero .hero-value-subtitle {max-width:65%;font-size:clamp(14px,3.85vw,19px);font-weight:500;margin-top:22px;color:#fff}
  .immersive-home-hero .hero-ctas {grid-area:2 / 1;margin:0;padding:24px 22px 0;gap:16px 20px}
  .immersive-home-hero .hero-autonomy-note {
    grid-area:3 / 1;max-width:40ch;margin:16px 22px 0;font-size:10px;
  }
  .hero-film-block {grid-area:4 / 1;flex:none;padding:40px 22px;background:#080d10}
  .hero-film {width:100%}
  .hero-film-caption {left:10px;right:10px;bottom:10px;font-size:14px;padding:8px;gap:10px}
  .hero-film-duration {padding-right:4px}
  .home-film-dialog {max-width:calc(100vw - 20px)}
  .home-film-heading {padding:8px 12px}.home-film-heading h2 {font-size:15px}
}
@media(prefers-reduced-motion:reduce) {.hero-film>img {transition:none}.hero-film:hover>img {transform:none}}