/* ==========================================================================
   Hero — layout shell + headline/subtext/CTA intro block.
   Blocks: .hero, .hero__intro
   ========================================================================== */

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: 160px var(--gutter-inline) var(--space-7);
  text-align: center;
}

/* Compact modifier — heroes that are just an intro block with no visual
   beneath, so they don't need the full viewport height .hero reserves. */
.hero--compact {
  min-height: auto;
  padding: 200px var(--gutter-inline) var(--space-8);
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 760px;
}

/* Pull the eyebrow closer to the heading than the intro's default
   flex gap allows, without touching heading -> subtext -> CTA spacing. */
.hero__intro .eyebrow {
  margin-bottom: calc(var(--space-2) - var(--space-5));
  color: var(--color-red);
}

.hero__heading {
  font-size: clamp(2.75rem, 8vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.hero__accent {
  font-style: italic;
  color: var(--color-red-dark);
}

.hero__subtext {
  max-width: 680px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Staggered entrance: heading -> subtext -> CTA -> hero__fit grid
   (continued in hero-fit.css). Later elements also take longer to reveal,
   not just start later.
   Hero elements use the blurred variant of fade-in-up (blur fades out
   alongside opacity) instead of the plain one shared with the navbar. */
.hero__heading.fade-in-up {
  animation-name: fade-in-up-blur;
  animation-duration: 0.8s;
}

.hero__subtext.fade-in-up {
  animation-name: fade-in-up-blur;
  animation-duration: 1s;
  animation-delay: 0.6s;
}

.hero__cta.fade-in-up {
  animation-name: fade-in-up-blur;
  animation-duration: 0.85s;
  animation-delay: 1.1s;
}

@media (prefers-reduced-motion: reduce) {
  .hero__heading.fade-in-up,
  .hero__subtext.fade-in-up,
  .hero__cta.fade-in-up {
    animation: none;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 140px;
    padding-inline: 5px;
  }

  .hero--compact {
    padding-top: 140px;
  }

  .hero__heading {
    font-size: clamp(2.75rem, 12vw, 3.75rem);
  }

  /* products.html's and methodologie.html's headings are full sentences,
     much longer than every other page's short tagline — at the shared
     floor above, their individual words are wider than a phone screen, so
     they wrap one (or two) words per line instead of reading as a
     sentence. A lower floor lets them shrink further before hitting it. */
  .hero__heading--long {
    font-size: clamp(1.75rem, 7vw, 3.75rem);
  }

  .hero__subtext {
    font-size: var(--fs-md);
  }

  /* products.html's subtext reads smaller here on request — scoped so
     other pages' hero subtext keeps the shared --fs-md mobile size. */
  .hero__subtext--sm {
    font-size: var(--fs-sm);
  }

  .hero__cta {
    margin-top: var(--space-3);
  }
}