/* ==========================================================================
   IYS — Split hero
   Two columns: the value-proposition copy on the left, the logo sting on the
   right. Solid brand navy so the video's own dark water blends into the page
   with no visible edge. The video is centred on the logo; the sides of the
   footage are cropped away by design.
   ========================================================================== */

/* Keep the hero's own yacht photograph and navy scrim. The right-hand video
   sits over it; the video's dark water reads against the scrim's navy
   without a hard edge. */
.hero--split .hero__inner{
  padding-top:calc(var(--header-h) + 56px);
  padding-bottom:88px;
}

.hero__grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}

.hero--split .hero__content{ max-width:560px; }
.hero--split .hero__sub{ margin-bottom:0; }

/* ---- Video column ---------------------------------------------------- */
.hero__video-col{
  display:flex;
  justify-content:center;
}

/* The stage is bounded and near-square, so cover-cropping a 16:9 clip only
   ever trims the far left and right — never the centred logo. No border, no
   radius: the dark water meets the navy field seamlessly. */
.hero__video-stage{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#081A33;
  /* Feather the edges so the video melts into the hero instead of reading as
     a pasted rectangle over the photograph — no hard border. The logo is
     centred, so only outer water fades. */
  -webkit-mask-image:radial-gradient(ellipse 98% 98% at 50% 50%, #000 78%, transparent 100%);
          mask-image:radial-gradient(ellipse 98% 98% at 50% 50%, #000 78%, transparent 100%);
}
.hero__video-stage video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;          /* fill the square; trim the sides */
  object-position:center;    /* keep the logo dead-centre */
  display:block;
}

/* A whisper of gold light behind the logo so the square never reads as a
   hard box on the navy. */
.hero__video-stage::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 50% 42%, rgba(228,200,122,0.10) 0%, transparent 62%);
  pointer-events:none;
}

@media (max-width:900px){
  .hero__grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .hero--split .hero__content{ max-width:none; }
  .hero__video-stage{ max-width:420px; margin:0 auto; }
  .hero--split .hero__inner{
    padding-top:calc(var(--header-h) + 40px);
    padding-bottom:64px;
  }
}