/* ============ ocean hero ============ */
.ocean-hero{
  position:relative;
  min-height:min(880px, 100vh);
  display:flex;
  align-items:center;
  overflow:hidden;
  /* soft warm light wash (top-right, stands in for a sun without an
     actual sun object), a subtle dark vignette toward the edges, and a
     sky-to-water gradient with a thin bright seam marking the horizon —
     visually distinct without being a hard color swap. */
  background:
    radial-gradient(900px 650px at 82% 6%, rgba(255,224,140,0.35), transparent 62%),
    radial-gradient(120% 100% at 50% 38%, transparent 55%, rgba(4,8,22,0.30) 100%),
    linear-gradient(180deg,
      #bfe6ff 0%,
      #9dd6f2 22%,
      #7ec3e8 40%,
      #6fb3e3 44.5%,
      #cfe9fb 45%,
      #6fb3e3 45.5%,
      #4f8ecf 50%,
      #4277c2 65%,
      #2d5580 100%);
  /* nav is position:fixed and out of flow — this padding is what keeps
     the hero copy clear of it, while the blue background above still
     paints all the way to the top, behind the nav bar. */
  padding-top:128px;
}

.ocean-copy{
  position:relative;
  z-index:5;
  padding-bottom:260px;
  pointer-events:none;
}
.ocean-copy .btn, .ocean-copy a{ pointer-events:auto; }
.ocean-copy .eyebrow{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); color:#fff; }
.ocean-copy h1{
  color:#fff;
  font-size:clamp(34px, 5.6vw, 60px);
  max-width:520px;
  text-shadow:0 8px 30px rgba(10,20,50,0.25);
  margin-top:18px;
}
.ocean-sub{
  color:rgba(255,255,255,0.92);
  font-size:18px;
  max-width:560px;
  margin-bottom:28px;
}
.ocean-ctas .btn-glass{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.35); color:#fff; }
.ocean-ctas .btn-glass:hover{ background:rgba(255,255,255,0.26); }

.ocean-scene-wrap{
  position:absolute;
  inset:0;
  z-index:1;
}
.ocean-scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* animated every frame via JS (style.transform, not the SVG attribute) so
   the browser can move these on the compositor instead of re-painting the
   drop-shadow filter each tick — that repaint was the main-thread hog
   dragging the whole page (including the CSS wave animation) down to a
   crawl. */
#boatGroup, .driftwood-item > g{ will-change:transform; }
#boatGroup{ transform-origin:center; }

.driftwood-item{ cursor:pointer; }
.driftwood-item .pill{
  fill:rgba(255,255,255,0.16);
  stroke:rgba(255,255,255,0.42);
  stroke-width:1.2;
  filter:drop-shadow(0 8px 16px rgba(6,16,38,0.28));
  transition:fill 0.15s ease, stroke 0.15s ease;
}
.driftwood-item .pill-label{
  fill:#fff;
  font-family:'Poppins','Inter',sans-serif;
  font-weight:700;
  font-size:15px;
  text-transform:lowercase;
}
.driftwood-item .pill-icon{ font-size:16px; }
.driftwood-item:hover .pill{ fill:rgba(255,255,255,0.3); stroke:rgba(255,255,255,0.65); }

.wave-divider{
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:210px;
  z-index:4;
  pointer-events:none;
}
.wave-layer{
  position:absolute;
  left:-10%;
  width:120%;
  bottom:0;
  height:100%;
  will-change:transform;
}
.wave-back{ opacity:0.92; animation:waveDrift 14s linear infinite; }
.wave-front{ animation:waveDrift 9s linear infinite reverse; }
@keyframes waveDrift{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-4%); }
}

@media (max-width:1100px){
  .ocean-hero{ min-height:auto; padding-top:118px; align-items:flex-start; }
  .ocean-copy{ padding-bottom:600px; text-align:left; }
  .ocean-copy h1{ max-width:640px; }
  .ocean-copy .ocean-ctas{ flex-wrap:wrap; }
  .wave-divider{ height:150px; }
}