/* ==========================================================================
   Hero — cinematic slider, editorial overlay
   ========================================================================== */
.hero{
  position: relative;
  min-height: 92svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__stage{ position: absolute; inset: 0; }
.hero__slide{
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1400ms var(--ease-out);
}
.hero__slide.is-active{ opacity: 1; }
.hero__img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.06);
  transition: transform 7000ms linear;
}
.hero__slide.is-active .hero__img{ transform: scale(1); }
.hero__scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, oklch(15% 0.02 260 / 0.82) 0%, oklch(18% 0.02 260 / 0.35) 45%, oklch(20% 0.02 260 / 0.18) 100%);
}
.hero__caption{ position: absolute; left: 0; bottom: 0; opacity: 0; }

.hero__content{ position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 7vw, 5.5rem); color: var(--white); }
.hero__content .eyebrow{ color: oklch(88% 0.03 75); }
.hero__content .eyebrow::before{ background: oklch(88% 0.03 75); }
.hero__title{ color: var(--white); max-width: 16ch; }
.hero__subtitle{ color: oklch(92% 0.01 80); max-width: 46ch; font-style: normal; font-family: var(--font-body); font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem); }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.hero__ghost{ color: var(--white); border-color: oklch(100% 0 0 / 0.4); }
.hero__ghost:hover{ background: oklch(100% 0 0 / 0.1); border-color: var(--white); }

.hero__dots{ position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: clamp(2rem, 6vw, 3.5rem); z-index: 2; display: flex; flex-direction: column; gap: .6rem; }
.hero__dot{ width: 8px; height: 8px; border-radius: 50%; border: 1px solid oklch(100% 0 0 / 0.6); background: transparent; padding: 0; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hero__dot.is-active{ background: var(--white); transform: scale(1.3); }

.motif-arc{
  position: absolute; pointer-events: none;
  border: 1px solid oklch(100% 0 0 / 0.16);
  border-radius: 50%;
}
.motif-arc--hero{
  width: min(70vw, 900px); height: min(70vw, 900px);
  right: -22%; top: -18%;
  border-color: oklch(100% 0 0 / 0.14);
}
.motif-arc--cta{ width: 640px; height: 640px; left: -18%; bottom: -30%; border-color: var(--line-strong); }

@media (max-width: 900px){
  .hero{ min-height: 88svh; align-items: flex-end; }
  .hero__title{ max-width: 14ch; }
}
@media (max-width: 600px){
  .hero{ min-height: 82svh; }
  .hero__actions{ flex-direction: column; align-items: stretch; }
  .hero__actions .btn{ justify-content: center; }
  .hero__dots{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero__img{ transition: none; transform: none; }
  .hero__slide{ transition: opacity 400ms linear; }
}