/* Hero: the animated seascape. Relies on the tokens and the .wrap, .eyebrow,
   .lede and .btn classes from site.css. */
.hero-sea{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:92vh;min-height:92svh;
  display:flex;align-items:flex-end;
  background:var(--ground);color:var(--ink);
}
.hero-sea__canvas{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;
}
/* Legibility scrim behind the copy, then the fade into the next section. */
.hero-sea::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 76% at 12% 100%,
      color-mix(in srgb,var(--ground) 58%,transparent) 0%,
      color-mix(in srgb,var(--ground) 22%,transparent) 48%,
      transparent 100%);
}
.hero-sea::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:20%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb,var(--ground) 45%,transparent) 55%,
    var(--ground) 100%);
}

.hero-sea .wrap{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(7rem,18vh,11rem);
  padding-bottom:clamp(3.4rem,9vh,6.2rem);
}
.hero-sea__content{max-width:46rem}
.hero-sea .eyebrow{margin-bottom:1.1rem}
.hero-sea h1{max-width:15ch}
.hero-sea h1 span{display:block}
.hero-sea h1 .hero-sea__line2{
  margin-top:.3em;
  font-size:.6em;font-weight:500;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--ink) 74%,var(--muted));
}
.hero-sea .lede{margin:1.5rem 0 0;max-width:44ch}
/* The second paragraph sits on the water, so it takes the lede's ink and a
   soft halo in the page colour instead of the muted grey. */
.hero-sea__more{
  margin:.9rem 0 2.1rem;max-width:48ch;font-size:1rem;line-height:1.55;color:var(--ink-2);
  text-shadow:0 0 14px color-mix(in srgb,var(--ground) 85%,transparent),0 0 2px color-mix(in srgb,var(--ground) 60%,transparent);
}
.hero-sea__cta{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}

.hero-sea__scroll{
  position:absolute;z-index:2;
  bottom:clamp(1.6rem,4.5vh,2.6rem);
  right:max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
  display:flex;align-items:center;gap:.75rem;
  font-size:.76rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.hero-sea__scroll::after{
  content:"";width:1px;height:44px;flex:none;
  background:linear-gradient(to bottom,transparent 0%,var(--muted) 40%,var(--muted) 60%,transparent 100%);
  background-size:100% 200%;background-repeat:no-repeat;
  background-position:0 -44px;
  mask:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
  -webkit-mask:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);
}
@media (prefers-reduced-motion:no-preference){
  .hero-sea__scroll::after{animation:heroScrollCue 2.8s cubic-bezier(.45,0,.2,1) infinite}
}
@keyframes heroScrollCue{
  0%{background-position:0 -44px}
  100%{background-position:0 44px}
}

@media (max-width:640px){
  .hero-sea{min-height:88vh;min-height:88svh}
  .hero-sea .wrap{padding-top:6rem;padding-bottom:3rem}
  .hero-sea h1{max-width:none}
  .hero-sea .lede{margin:1.2rem 0 0}
  .hero-sea__more{margin:.8rem 0 1.7rem}
  .hero-sea__scroll{display:none}
}

/* ---- the brand video: right-hand column, or under the copy ---- */
.hero-video{
  position:relative;margin:2.4rem 0 0;max-width:44rem;
  aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);
  background:#0B1426;
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
  box-shadow:var(--shadow);
}
.hero-video__media{display:block;width:100%;height:100%;object-fit:cover}
.hero-video button{
  position:absolute;z-index:1;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px) saturate(140%);
  transition:background .18s ease,transform .18s ease;
}
.hero-video button:hover{background:rgba(15,23,42,.78)}
.hero-video button[hidden]{display:none}
.hero-video button svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Bottom left, so the wordmark in the middle of the poster stays clear. */
.hero-video__play{left:.9rem;bottom:.9rem;width:56px;height:56px}
.hero-video__play:hover{transform:scale(1.05)}
.hero-video__play svg{width:22px;height:22px;margin-left:3px;fill:currentColor;stroke:none}
.hero-video__sound{right:.8rem;bottom:.8rem;width:42px;height:42px}
.hero-video__sound svg{width:20px;height:20px}
.hero-video.is-controlled button{display:none}

@media (min-width:1080px){
  .hero-sea .hero-sea__grid{
    --hero-h1-size:clamp(2.5rem,4.3vw,3.9rem);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
    gap:clamp(2rem,3.6vw,3.6rem);align-items:start;
    padding-bottom:clamp(5.6rem,12vh,7.4rem);
  }
  .hero-sea h1{font-size:var(--hero-h1-size)}
  /* Top edge level with the headline caps: eyebrow, its margin, the h1 leading. */
  .hero-video{
    max-width:none;
    margin:calc(var(--eyebrow-size) * 1.35 + 1.1rem + var(--hero-h1-size) * .14) 0 0;
  }
}
@media (prefers-reduced-motion:no-preference){
  .hero-video{animation:heroRise .95s cubic-bezier(.2,.7,.2,1) .7s backwards}
}
@media (max-width:640px){
  .hero-video{margin-top:1.8rem;border-radius:var(--r-md)}
  .hero-video__play{left:.7rem;bottom:.7rem;width:50px;height:50px}
}

/* ---- staged entrance: eyebrow, the two headline lines, lede, buttons ---- */
@media (prefers-reduced-motion:no-preference){
  .hero-sea__content .eyebrow,
  .hero-sea h1 span,
  .hero-sea__content .lede,
  .hero-sea__cta{animation:heroRise .95s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-sea__content .eyebrow{animation-delay:.12s}
  .hero-sea h1 span:nth-child(1){animation-delay:.22s}
  .hero-sea h1 span:nth-child(2){animation-delay:.34s}
  .hero-sea__content .lede{animation-delay:.48s}
  .hero-sea__cta{animation-delay:.6s}
}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}