.hero .eyebrow { margin-bottom: .25rem; }
.hero .lede { margin-top: .5rem; }
@media (max-width: 520px) {
  .hero .cta-row { flex-wrap: wrap; }
  .hero .cta-row .btn { flex: 1 1 100%; justify-content: center; }
}

/* Override global H1 spacing on home hero */
.hero .hero-title {
  margin: 0; /* remove the global 2cm bottom gap */
  text-transform: none; /* keep text as authored */
}
.hero .hero-title + .hero-title { margin-top: 0; }

/* Home CTA hover: alternate black/white while hovered */
@keyframes bwPulse {
  0% { background: #000; color: #fff; border-color: #000; }
  50% { background: #fff; color: #000; border-color: #000; }
  100% { background: #000; color: #fff; border-color: #000; }
}

.hero .cta-row .btn:hover {
  animation: bwPulse 0.8s steps(1, end) infinite;
}

/* Portrait background variant for home hero */
.hero.hero--portrait {
  /* Prefer WebP if available, fall back to JPG; allow override via --hero-image */
  background-image: var(--hero-image, image-set(
      url('assets/img/home-portrait.webp') type('image/webp') 1x,
      url('assets/img/home-portrait.jpg') type('image/jpeg') 1x
  ));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  min-height: 70vh;
}

.hero.hero--portrait .hero-card { display: none; }

/* Keep content away from the right side on large screens */
@media (min-width: 901px) {
  .hero.hero--portrait .hero-grid { grid-template-columns: 1fr 1fr; }
}

/* On small screens, keep image to the right/bottom to avoid overlap */
@media (max-width: 900px) {
  .hero.hero--portrait {
    background-position: right bottom;
    background-size: 70vw auto;
    padding-bottom: 28vh; /* reserve space under text */
  }
}