/* Hero safe-layout overrides: keeps all display type inside the viewport. */
.hero-landing {
  min-height: 100svh !important;
  height: 100svh !important;
  overflow: hidden !important;
  --hero-scroll: 0;
}

.hero-main-title {
  top: 38% !important;
  width: 88vw !important;
  max-width: 1420px;
  line-height: .88 !important;
}

.hero-vocal,
.hero-enough {
  font-size: clamp(4.8rem, 9.1vw, 9.6rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
}

.hero-letme {
  margin-top: .22em !important;
  font-size: clamp(2.7rem, 4.5vw, 4.8rem) !important;
  line-height: .92 !important;
}

.hero-paint-it {
  left: 50% !important;
  top: 63% !important;
  width: 88vw !important;
  max-width: 1420px;
  font-size: clamp(4.8rem, 9.2vw, 9.8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  text-align: center !important;
}

.hero-dash-track {
  top: 75% !important;
  width: min(66vw, 900px) !important;
}

.hero-promise {
  left: 50% !important;
  top: 81% !important;
  width: 88vw !important;
  font-size: clamp(1.65rem, 3.15vw, 3.35rem) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/*
   SCROLL REVEAL
   Move the containing layers, NOT the individual words. This keeps the
   existing load-reveal transforms untouched and prevents clipping/jumping.
*/
.hero-type-back {
  translate: 0 calc(var(--hero-scroll) * -18px);
  opacity: calc(1 - (var(--hero-scroll) * .16));
  transition: none !important;
  will-change: translate, opacity;
}

.hero-type-front {
  translate: 0 calc(var(--hero-scroll) * 14px);
  transition: none !important;
  will-change: translate;
}

.hero-bottom {
  translate: 0 calc(var(--hero-scroll) * 8px);
  opacity: calc(1 - (var(--hero-scroll) * .28));
  transition: none !important;
  will-change: translate, opacity;
}

.hero-word-ring {
  transform: translateY(calc(var(--hero-scroll) * -8px)) rotate(calc(var(--hero-scroll) * 8deg));
  transition: none !important;
}

/* Old 3D CSS is retained in the legacy stylesheet but must never render. */
.hero-canvas,
#hero-3d-canvas,
.tube-destination,
.tube-destination-inner {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) {
  .hero-main-title { top: 38% !important; width: 90vw !important; }
  .hero-vocal,
  .hero-enough { font-size: clamp(3.2rem, 11vw, 5.8rem) !important; }
  .hero-letme { font-size: clamp(1.9rem, 6vw, 3.2rem) !important; }
  .hero-paint-it { top: 61% !important; width: 90vw !important; font-size: clamp(3.3rem, 11.5vw, 6rem) !important; }
  .hero-dash-track { top: 71.5% !important; width: 72vw !important; }
  .hero-promise { top: 77% !important; width: 90vw !important; font-size: clamp(1.35rem, 4.6vw, 2.5rem) !important; }

  .hero-type-back { translate: 0 calc(var(--hero-scroll) * -10px); }
  .hero-type-front { translate: 0 calc(var(--hero-scroll) * 8px); }
  .hero-bottom { translate: 0 calc(var(--hero-scroll) * 5px); }
}

@media (max-width: 600px) {
  .hero-main-title { top: 36% !important; width: 88vw !important; }
  .hero-vocal,
  .hero-enough { display: block !important; font-size: clamp(3rem, 16vw, 5.2rem) !important; line-height: .82 !important; }
  .hero-letme { margin-top: .18em !important; font-size: clamp(1.8rem, 8.5vw, 2.8rem) !important; }
  .hero-paint-it { top: 61% !important; width: 88vw !important; font-size: clamp(3.1rem, 16vw, 5.3rem) !important; }
  .hero-dash-track { top: 70.5% !important; width: 68vw !important; }
  .hero-promise { top: 76% !important; width: 90vw !important; font-size: clamp(1rem, 5.6vw, 1.65rem) !important; white-space: normal !important; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .hero-main-title { top: 37% !important; }
  .hero-vocal,
  .hero-enough { font-size: clamp(4.3rem, 8.3vw, 8.5rem) !important; }
  .hero-letme { font-size: clamp(2.3rem, 4vw, 4rem) !important; }
  .hero-paint-it { top: 61% !important; font-size: clamp(4.3rem, 8.4vw, 8.7rem) !important; }
  .hero-dash-track { top: 72.5% !important; }
  .hero-promise { top: 78% !important; font-size: clamp(1.5rem, 2.8vw, 2.8rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-type-back,
  .hero-type-front,
  .hero-bottom,
  .hero-word-ring {
    translate: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* Continuous Ocean Depths surface across header + hero */
body{
  background:#0a1e2b;
}
.hero-header{
  background:#0a1e2b !important;
  background-image:linear-gradient(180deg,#0a1e2b 0%,#102c39 100%)!important;
  border-color:rgba(102,217,255,.16)!important;
}
.hero-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background:
    radial-gradient(circle at 15% 30%,rgba(102,217,255,.18),transparent 28%),
    radial-gradient(circle at 82% 10%,rgba(102,217,255,.12),transparent 24%);
  mix-blend-mode:screen;
}
.hero-landing.cinematic-hero{
  min-height:100svh!important;
  height:100svh!important;
  background:linear-gradient(180deg,#0a1e2b 0%,#1a3b4a 50%,#092934 90%,#032630 100%)!important;
}
.hero-landing.cinematic-hero .cinematic-hero-bg.ocean-depths-pattern{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:linear-gradient(180deg,#0a1e2b 0%,#1a3b4a 50%,#092934 90%,#032630 100%)!important;
  filter:url(#ocean-texture)!important;
}