/* Life-transit situation-switcher hero — MODERN REFRESH (2026-08).
   Auto-rotating slider (Overview / Divorce / Inheritance): a dynamic situation kicker, the headline,
   the lead and the photo all crossfade together per slide. Textured theme-blended background, a modern
   "stacked" photo treatment (offset terracotta block + zoom-crossfade), refined pill tabs, and a
   terracotta auto-advance progress bar so it reads as a live slider. */

/* ---- Textured, theme-blended background: warm light source + soft accent glow ---- */
section.hero {
  position: relative;
  background-color: var(--bs-light, #f8f2e8);
  background-image:
    radial-gradient(56% 70% at 84% 2%, rgba(var(--bs-warning-rgb, 201,107,61), .10), transparent 60%),
    radial-gradient(58% 76% at 0% 100%, rgba(var(--bs-primary-rgb, 34,51,75), .06), transparent 55%);
  overflow: hidden;
}
/* keep hero content above the ambient image background */
section.hero > .container { position: relative; z-index: 1; }

/* ---- Ambient background = the in-focus slide's photo, VERY transparent, full-bleed, crossfading per
   slide (two stacked layers so the image itself crossfades). A cream veil — heavier on the text side —
   keeps the navy/slate copy legible while the photo supplies subtle colour + texture. ---- */
.lt-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lt-hero-bg-layer {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity .7s ease; will-change: opacity;
}
.lt-hero-bg-layer.is-on { opacity: var(--lt-bg-strength, .13); }
.lt-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(237,241,242,.66) 0 38%, rgba(237,241,242,.18) 100%);
}

/* ---- Dynamic situation kicker above the headline ---- */
.lt-hero-kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 800 .74rem/1 var(--font-heading, "Manrope", sans-serif);
  text-transform: uppercase; letter-spacing: .18em;
  color: #1c6153;                 /* deep teal — AA on the light mist */
  margin-bottom: 1rem;
}
.lt-hero-kicker::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: var(--bs-warning, #c96b3d);
}

/* ---- Headline: a touch tighter for a modern set ---- */
section.hero h1 { letter-spacing: -0.015em; }

/* ---- Synced entrance: kicker + copy crossfade with a small slide-up ---- */
.hero h1.lt-fade, .hero p.lt-fade, .lt-hero-kicker.lt-fade {
  transition: opacity .4s ease, transform .4s ease; will-change: opacity, transform;
}
.hero h1.lt-out, .hero p.lt-out, .lt-hero-kicker.lt-out {
  opacity: 0; transform: translateY(9px);
}

/* ---- Photo: modern "stacked" card — offset terracotta block + soft ambient shadow, zoom-crossfade ---- */
section.hero .hero-image {
  box-shadow:
    20px 20px 0 -2px rgba(var(--bs-warning-rgb, 201,107,61), .85),
    var(--lt-sh-md, 0 22px 55px -24px rgba(34,51,75,.5));
}
section.hero .hero-image::after {
  /* lighter tint than the old .86 navy so the photo reads crisp + contemporary */
  background: linear-gradient(160deg, rgba(var(--bs-primary-rgb, 34,51,75), .30), rgba(var(--bs-primary-rgb, 34,51,75), .05));
}
.hero-image.lt-img img {
  transition: opacity .5s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform;
}
.hero-image.lt-img-out img { opacity: 0; transform: scale(1.05); }

/* ---- Refined pill tabs (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), .06);
  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: --bs-primary (~10:1 on the warm chip); active tab = 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, 0 2px 8px rgba(34,51,75,.14));
}
.lt-hero-tab:focus-visible { outline: 2px solid var(--bs-warning, #c96b3d); outline-offset: 2px; }

/* ---- Terracotta auto-advance progress bar — makes the auto-rotation read as a live slider ---- */
.lt-hero-progress {
  margin-top: 16px; width: 230px; max-width: 100%; height: 3px; border-radius: 3px;
  background: rgba(var(--bs-primary-rgb, 34,51,75), .12); overflow: hidden;
}
.lt-hero-progress-bar {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: var(--bs-warning, #c96b3d); border-radius: 3px;
}
@keyframes lt-hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

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