/* ---------- Hero ---------- */
/* Shared across both variants */
.hero-copy h1 { font-size: var(--h2); line-height: 1.05; letter-spacing: -0.01em; max-width: 22ch; white-space: nowrap; text-align: center; }
.hero-sub { font-size: var(--body); max-width: 42ch; }

/* Variant: hero--split (previous layout — text left, photo right, light ground).
   Inactive while hero--fullbleed is on the section, kept here so switching back is a
   one-word class change, not a rewrite. */
.hero--split { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero--split .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero--split .hero-sub { color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.hero--split .hero-media img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }

/* Variant: hero--fullbleed (active) — full-bleed photo, dark scrim, bottom-left copy.
   Client reference: MoveTrans-style hero photography + Vectura/Convoy composition. */
.hero--fullbleed {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,17,14,0.84) 0%, rgba(20,17,14,0.42) 40%, rgba(20,17,14,0.14) 75%);
}
.hero--fullbleed .hero-content {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(2rem, 6vw, 3.5rem);
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none; /* allow clicks through transparent areas except the buttons */
}
.hero--fullbleed .hero-content .hero-copy { pointer-events: auto; }
.hero--fullbleed .hero-copy h1 { color: #fff; }
.hero--fullbleed .hero-sub { color: rgba(255,255,255,0.86); }
.hero-copy { max-width: 52ch; margin: 0 auto; }
.hero-actions { display: flex; gap: 1rem; margin-top: 1.25rem; justify-content: center; flex-wrap: wrap; }
/* Buttons hug their own content — no forced min-width. */

@media (max-width: 900px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; }
  .hero--split .hero-media { order: -1; }
}

@media (max-width: 560px) {
  .hero--fullbleed { min-height: 100dvh; align-items: flex-end; }
}

@media (max-width: 768px) {
  .hero .hero-content { padding-top: 100px; }
}