.hero {
  position: relative;
  z-index: 2;
  height: 280vh; /* dive + four visit steps + surfacing (JS works in 0–1 progress) */
}

.hero__stage {
  /* Left edge of the hero copy: pulled in from the page gutter on wide screens
     so the headline sits in the scene instead of hugging the edge */
  --hero-inset: var(--gutter);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-surface);
}
/* Fallback when WebGL is unavailable */
.no-webgl .hero__stage { background: linear-gradient(180deg, #5cb1e6 0%, #eef7fb 58%, #1e84c3 62%, #364c84 100%); }

.hero__ocean { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-webgl .hero__ocean { display: none; }

.hero__intro {
  position: absolute;
  left: var(--hero-inset);
  top: 50%;
  width: min(58rem, calc(100% - var(--hero-inset) - var(--gutter)));
  margin-top: -8rem;
  will-change: transform, opacity;
}

.hero__title {
  margin: 0 0 1.25rem;
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero__lede {
  margin: 0 0 1.75rem;
  max-width: 34ch;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-ink);
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

.hero__deep {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--gutter);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--brand-white);
  text-shadow: 0 2px 30px rgb(34 51 94 / 0.35);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__deep strong { font-weight: 600; }
/* Keep the step copy clear of the visit tracker on the right */
@media (min-width: 961px) {
  .hero__stage { --hero-inset: clamp(var(--gutter), 10vw, 11rem); }
  .hero__deep { padding-right: calc(var(--gutter) + 15rem); font-size: clamp(2.6rem, 1rem + 4.6vw, 5.5rem); }
}

/* Visit tracker — right edge: wait clock + the four steps of a visit */
.visit-track {
  --step: 0;
  position: absolute;
  right: var(--gutter);
  top: 50%;
  display: grid;
  gap: 0.6rem;
  width: 13rem;
  transform: translateY(-50%);
  color: var(--brand-white);
  text-shadow: 0 1px 12px rgb(34 51 94 / 0.45);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.visit-track__label {
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.8;
}
.visit-track__clock {
  font-size: var(--text-stat);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.visit-track__clock small { margin-left: 0.25rem; font-size: 0.32em; font-weight: 500; letter-spacing: 0.04em; }
.visit-track__steps {
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 0.75rem 0 0;
  padding: 0 0 0 1.4rem;
  list-style: none;
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Rail + fill: the fill grows with --step (0–3) */
.visit-track__steps::before,
.visit-track__steps::after {
  content: "";
  position: absolute; left: 3px; top: 0.55em; bottom: 0.55em;
  width: 1px;
  background: rgb(255 255 255 / 0.35);
}
.visit-track__steps::after {
  background: var(--brand-white);
  transform-origin: top;
  transform: scaleY(calc(var(--step) / 3));
}
.visit-track__steps li { position: relative; opacity: 0.5; transition: opacity var(--duration-normal); }
.visit-track__steps li::before {
  content: "";
  position: absolute; left: -1.4rem; top: 0.35em;
  width: 7px; height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition: background var(--duration-normal), transform var(--duration-normal) var(--ease-out-expo);
}
.visit-track__steps li.is-done,
.visit-track__steps li.is-current { opacity: 1; }
.visit-track__steps li.is-done::before,
.visit-track__steps li.is-current::before { background: currentColor; }
.visit-track__steps li.is-current::before { transform: scale(1.5); }

/* Surfacing: the camera breaks the waterline into the clinic. --surface (0–1)
   sweeps the panel in from the top, like water running off the lens; the
   photo card and key facts settle in once it's fully up (.is-up). */
.hero__surface {
  --surface: 0;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6rem var(--gutter) 2.5rem; /* clears the fixed header */
  background:
    radial-gradient(55% 40% at 85% 12%, var(--color-glow-warm), transparent 70%),
    radial-gradient(40% 30% at 8% 78%, var(--color-glow-cool), transparent 70%),
    var(--color-surface);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--surface) * 125% - 25%), transparent calc(var(--surface) * 125%));
  mask-image: linear-gradient(180deg, #000 calc(var(--surface) * 125% - 25%), transparent calc(var(--surface) * 125%));
  pointer-events: none;
}
.hero__surface.is-up { pointer-events: auto; }

.hero__hint {
  position: absolute;
  left: var(--hero-inset);
  bottom: 2rem;
  display: flex; align-items: center; gap: 0.9rem;
  margin: 0;
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-white);
  text-shadow: 0 1px 12px rgb(34 51 94 / 0.5);
}
.hero__hint-line {
  position: relative;
  width: 1px; height: 36px;
  background: rgb(255 255 255 / 0.35);
  overflow: hidden;
}
.hero__hint-line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand-white);
  animation: hint-drop 2.2s var(--ease-in-out) infinite;
}
@keyframes hint-drop {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* Entrance animates the children so JS can still drive the wrapper's scroll fade */
body:not(.is-ready) .hero__intro > * { opacity: 0; }
.is-ready .hero__intro > * { animation: rise 1.4s var(--ease-out-expo) both; }
.is-ready .hero__intro > :nth-child(2) { animation-delay: 0.08s; }
.is-ready .hero__intro > :nth-child(3) { animation-delay: 0.16s; }
.is-ready .hero__intro > :nth-child(4) { animation-delay: 0.24s; }
@keyframes rise {
  from { opacity: 0; translate: 0 30px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 960px) {
  /* Tracker moves under the step copy as a compact row */
  .visit-track {
    left: var(--gutter); right: var(--gutter); top: auto; bottom: 2rem;
    width: auto;
    justify-items: center;
    transform: none;
    text-align: center;
  }
  .visit-track__clock { font-size: var(--text-xl); }
  .visit-track__clock small { font-size: 0.5em; }
  .visit-track__steps { display: none; }
}

@media (max-width: 760px) {
  .hero__intro { margin-top: -12rem; }
}