/* Decoration stays in the home hero; other sections keep their design. */
.hero-home { isolation: isolate; overflow: visible; }
/* Only the watermark may extend below the hero; keep the surfer clipped. */
.hero-home .hero__bg { overflow: hidden; }
.hero-watermark {
  position: absolute;
  left: 0; top: 50%;
  width: clamp(540px, 58vw, calc(1100 * var(--layout-unit)));
  aspect-ratio: 888.45 / 1419.02;
  transform: translate(-50%, -34%);
  z-index: -1; pointer-events: none;
  /* A moving fallback survives WebGL denial or context loss on mobile. */
  background: repeating-linear-gradient(118deg, #f7f9fc 0%, #e0e5ee 12%, #fdfdfe 21%, #d9e0eb 30%, #f7f9fc 42%);
  background-size: 220% 180%;
  animation: watermark-fallback 18s ease-in-out infinite alternate;
  -webkit-mask: url('../img/tideloo-mark.svg') center / contain no-repeat;
  mask: url('../img/tideloo-mark.svg') center / contain no-repeat;
}
@keyframes watermark-fallback {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-watermark { animation: none; }
}
.hero-water {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.hero-water[data-rendered="true"] { opacity: 1; }
@media (max-width: 768px) {
  .hero-watermark { width: clamp(460px, 90vw, 650px); top: 36%; opacity: .85; }
}

/* Match the approved 1024px composition without altering tablet/mobile rules.
   Reserve room for the header and the stats edge on shorter desktop windows. */
@media (min-width: 1025px) {
  .hero-home {
    min-height: clamp(calc(620 * var(--layout-unit)), min(52vw, calc(100vh - calc(160 * var(--layout-unit)))), calc(940 * var(--layout-unit)));
    min-height: clamp(calc(620 * var(--layout-unit)), min(52vw, calc(100svh - calc(160 * var(--layout-unit)))), calc(940 * var(--layout-unit)));
  }
  .hero-home + .band-stack .stats-card { margin-top: calc(-40 * var(--layout-unit)); }
  .hero-home .hero__copy { padding-top: calc(12 * var(--layout-unit)); }
  .hero-home .h-hero { font-size: clamp(calc(105 * var(--layout-unit)), 6.975vw, calc(124 * var(--layout-unit))); }
  /* Enlarge around the existing lower-right anchor, not the image centre.
     The hero height and the stats position stay unchanged. */
  .hero-home .hero__bg img {
    scale: 1.14;
    transform-origin: right bottom;
  }
}