/* Mila hero — full-bleed carousel, centered content (ported from Figma Banner) */
.mila-hero { position: relative; overflow: hidden; height: var(--mila-hero-h, 88vh); min-height: 560px; }
.mila-hero__track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.mila-hero__slide { position: relative; flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mila-hero__media { position: absolute; inset: 0; }
.mila-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mila-hero__overlay { position: absolute; inset: 0; background: var(--mila-overlay); }

.mila-hero__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  text-align: center; color: var(--mila-white);
  padding: 0 24px; max-width: 900px;
}
.mila-hero__eyebrow { color: var(--mila-white); }
.mila-hero__heading {
  font-family: var(--mila-font-heading);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: var(--mila-heading-ls);
  margin: 0;
}
.mila-hero__sub { font-size: clamp(16px, 2vw, 22px); line-height: 1.35; margin: 0; max-width: 640px; }
.mila-hero__btn { margin-top: 4px; }

.mila-hero__dots { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; gap: 15px; justify-content: center; }
.mila-hero__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); padding: 0; }
.mila-hero__dot.is-active { background: var(--mila-white); }

@media (max-width: 767px) {
  /* Keep an explicit height (do NOT use height:auto) so the flex chain
     track→slide→media→img all resolve to 100% and the image fills the
     section — otherwise the media collapses to content height and leaves a
     white gap below the hero. */
  .mila-hero { height: 88vh; min-height: 600px; }
  .mila-hero__heading { letter-spacing: 1.5px; }
}