/* ==========================================================================
   01 / Hero (full bleed)
   Large typography + one strong visual: a single large image.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(var(--bleed-min-height), 640px);
  padding-block: var(--space-10) var(--bleed-pad);
  background: var(--color-white);
  overflow: hidden;
}

.hero__inner {
  align-items: center;
  row-gap: var(--space-11);
}

/* ---- Content ---- */
.hero__content {
  grid-column: 1 / span 7;
}

.hero__eyebrow {
  margin-bottom: var(--space-6);
  color: var(--color-gray-500);
}

.hero__title {
  max-width: 13ch;
}

.hero__title .mark {
  background-image: linear-gradient(var(--color-brand-orange), var(--color-brand-orange));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.26em;
  animation: hero-mark 900ms var(--ease-out) 700ms backwards;
}

.hero__lede {
  max-width: 34ch;
  margin-top: var(--space-6);
  color: var(--color-gray-700);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ---- Visual: one large image ---- */
.hero__visual {
  grid-column: 8 / span 5;
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--color-gray-100);
  border-radius: var(--radius-sharp);
  animation: hero-reveal 1100ms cubic-bezier(0.65, 0, 0.35, 1) 150ms backwards;
}

.hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-settle 1600ms var(--ease-out) 150ms backwards;
}

/* ---- Entrance ---- */
.hero__content > * {
  animation: hero-rise var(--duration-slow) var(--ease-out) backwards;
}

.hero__content > :nth-child(2) { animation-delay: 80ms; }
.hero__content > :nth-child(3) { animation-delay: 180ms; }
.hero__content > :nth-child(4) { animation-delay: 260ms; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Image wipes up from the bottom (same motion as the button fill) */
@keyframes hero-reveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes hero-settle {
  from { transform: scale(1.08); }
  to   { transform: none; }
}

@keyframes hero-mark {
  from { background-size: 0% 0.26em; }
  to   { background-size: 100% 0.26em; }
}

/* ---- Tablet: stack, image goes wide ---- */
@media (max-width: 1024px) {
  .hero {
    min-height: var(--bleed-min-height);
    padding-block: var(--space-9) var(--bleed-pad);
  }

  .hero__inner {
    row-gap: var(--space-10);
  }

  .hero__content,
  .hero__visual {
    grid-column: 1 / -1;
  }

  .hero__title {
    max-width: 16ch;
  }

  .hero__visual {
    aspect-ratio: 16 / 9;
  }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .hero {
    padding-block: var(--space-8) var(--bleed-pad);
  }

  .hero__inner {
    row-gap: var(--space-8);
  }

  .hero__eyebrow {
    margin-bottom: var(--space-5);
  }

  .hero__lede {
    margin-top: var(--space-5);
  }

  .hero__actions {
    flex-direction: column;
    margin-top: var(--space-6);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__visual {
    aspect-ratio: 4 / 3;
  }
}