/* ==========================================================================
   Starfish Group — hero.css
   Section 01: full-bleed footage with the copy set into it.

   The plate is gone. The footage used to sit inside a 20px-inset window with a
   64px radius, which put the most real thing on the page inside a UI card —
   the one component the redesign is trying to remove. It now runs the full
   width of the window and the type sits on it.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  overflow: clip;
  background-color: var(--ink-deep);

  --hero-title: clamp(38px, 6vw, 88px);
}

/* --- Media ---------------------------------------------------------------- */
.hero__plate { position: absolute; inset: 0; z-index: 0; }

.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms linear;
}
.hero__video[data-active] { opacity: 1; }

/* Lighter than it was. The old flat 0.34 plus two edge gradients drained the
   colour out of the water; the copy sits bottom-left, so the tint is weighted
   there instead of spread evenly over the whole frame. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* The header sits on this footage in cream, and the top of the frame can
       be bright sky or a white building. This band carries it. */
    linear-gradient(to bottom, rgba(20, 30, 32, 0.62) 0%, rgba(20, 30, 32, 0.18) 14%, rgba(20, 30, 32, 0) 26%),
    linear-gradient(to top, rgba(20, 30, 32, 0.80) 0%, rgba(20, 30, 32, 0.22) 46%, rgba(20, 30, 32, 0) 72%),
    linear-gradient(to right, rgba(20, 30, 32, 0.58) 0%, rgba(20, 30, 32, 0.12) 46%, rgba(20, 30, 32, 0) 66%);
}

/* --- Copy ----------------------------------------------------------------- */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* The content is bottom-aligned, so a tall headline grows upward — without
     this it climbed under the fixed bar. */
  padding-top: calc(var(--header-h) + var(--s-40));
  padding-bottom: var(--s-56);
  color: var(--ink-on-media);
}

/* Left-of-centre, not centred. A centred hero makes every site look like the
   same site. The measure belongs on the TITLE, in its own em-based ch — put on
   this container it also squeezed the lede, and at 86px a 20ch column broke
   the headline to one word per line. */
.hero__copy { max-width: min(660px, 52vw); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--hero-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  max-width: 13ch;
}

.hero__lede {
  margin-top: var(--s-24);
  max-width: 46ch;
  color: rgba(245, 242, 236, 0.86);
}

.hero__actions { margin-top: var(--s-40); }

.hero__proof {
  margin-top: var(--s-64);
  padding-top: var(--s-20);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.78);
}

@media (max-width: 900px) {
  .hero__copy { max-width: none; }
  .hero__inner { padding-bottom: var(--s-40); }
  .hero__proof { margin-top: var(--s-40); }
}