/* Life-transit situation-switcher hero — copy crossfade + photo slide-in + pill situation tabs. */
.hero h1.lt-fade, .hero p.lt-fade { transition: opacity .4s ease; will-change: opacity; }
.hero h1.lt-out, .hero p.lt-out { opacity: 0; }

/* photo slides in from the right as it changes */
.hero-image.lt-img img { transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.hero-image.lt-img-out img { opacity: 0; transform: translateX(28px); }

/* situation pill tabs = the slider control */
.lt-hero-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 22px;
  background: rgba(var(--bs-primary-rgb, 34,51,75), .07);
  padding: 5px; border-radius: 999px;
}
.lt-hero-tab {
  border: 0; background: transparent; cursor: pointer;
  font: 600 .86rem/1 var(--font-heading, "Manrope", sans-serif);
  /* AA: the inactive tab sits on a warm ~#e9e5dd chip; --bs-secondary (#5c6b80) is only 4.31:1.
     Use --bs-primary (~10:1) and distinguish the active tab by the white pill + heavier weight. */
  color: var(--bs-primary, #22334b); padding: 10px 18px; border-radius: 999px;
  transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.lt-hero-tab:hover { color: var(--bs-primary, #22334b); }
.lt-hero-tab.is-active {
  color: var(--bs-primary, #22334b); background: #fff; font-weight: 700;
  box-shadow: var(--lt-sh-sm);
}
.lt-hero-tab:focus-visible { outline: 2px solid var(--bs-warning, #c96b3d); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hero h1.lt-fade, .hero p.lt-fade, .hero-image.lt-img img { transition: none; }
}