/* Final CMS hero polish for readability and seamless blending */
.cms-hero {
  background:
    radial-gradient(circle 720px at 24% 37%, oklch(45% 0.11 38 / .2) 0%, transparent 68%),
    radial-gradient(circle 760px at 54% 30%, oklch(55% 0.14 42 / .18) 0%, transparent 62%),
    radial-gradient(circle 560px at 82% 23%, color-mix(in oklch, var(--accent), transparent 74%), transparent 68%),
    radial-gradient(circle 420px at 14% 34%, oklch(43% 0.11 35 / .22), transparent 72%),
    linear-gradient(118deg, oklch(7.5% 0.034 38) 0%, oklch(10% 0.04 40) 42%, oklch(12% 0.034 52) 62%, oklch(9% 0.018 75) 100%) !important;
}

.cms-hero::after {
  background:
    linear-gradient(90deg, transparent 0%, transparent 30%, oklch(8% 0.03 42 / .08) 52%, transparent 73%, oklch(5% 0.02 50 / .28) 100%),
    linear-gradient(180deg, transparent 0%, transparent 64%, oklch(4% 0.02 40 / .28) 100%) !important;
}

.cms-hero-grid.with-scenes {
  min-height: clamp(480px, 60vh, 650px) !important;
}

.cms-hero-grid.with-scenes .cms-hero-copy {
  padding-top: clamp(48px, 6.8vh, 76px) !important;
  padding-bottom: clamp(38px, 5.2vh, 58px) !important;
  position: relative !important;
  z-index: 12 !important;
}

.cms-hero-grid.with-scenes .cms-hero-copy::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 -16% -6% -6% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, oklch(16% 0.04 42 / .5) 0%, oklch(16% 0.04 42 / .24) 58%, transparent 100%),
    radial-gradient(ellipse 72% 70% at 22% 44%, oklch(44% 0.1 38 / .18), transparent 72%) !important;
  filter: blur(10px) !important;
}

.cms-hero-grid.with-scenes .cms-eyebrow {
  margin-bottom: clamp(18px, 2.4vh, 24px) !important;
  color: oklch(76% 0.13 58 / .92) !important;
}

.cms-hero-grid.with-scenes .cms-hero-title,
.cms-hero-grid.with-scenes .cms-hero-title *,
.cms-hero-grid.with-scenes .cms-hero-title .lt,
.cms-hero-grid.with-scenes .cms-hero-title .ac {
  color: #fffaf2 !important;
  -webkit-text-fill-color: #fffaf2 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

.cms-hero-grid.with-scenes .cms-hero-sub,
.cms-hero-grid.with-scenes .cms-hero-sub *,
.cms-hero-grid.with-scenes .cms-hero-actions,
.cms-hero-grid.with-scenes .cms-hero-actions * {
  color: #fffaf2 !important;
  -webkit-text-fill-color: initial !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

.cms-hero-grid.with-scenes .btn-cta { color: #1b0c07 !important; }
.cms-hero-grid.with-scenes .btn-cta,
.cms-hero-grid.with-scenes .btn-outline { opacity: .96 !important; }

.cms-hero-grid.with-scenes .cms-hero-visual {
  overflow: visible !important;
  isolation: isolate !important;
}

.cms-hero-grid.with-scenes .cms-hero-visual::before,
.cms-hero-grid.with-scenes .cms-hero-visual::after,
.cms-hero-grid.with-scenes::before,
.cms-hero-grid.with-scenes::after {
  display: none !important;
}

.cms-hero-grid.with-scenes .hero-carousel {
  position: absolute !important;
  inset: -14% -12% -14% -34% !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background: transparent !important;
}

.cms-hero-grid.with-scenes .hc-track,
.cms-hero-grid.with-scenes .hc-slide,
.cms-hero-grid.with-scenes .hc-visual,
.cms-hero-grid.with-scenes .csf-wrapper,
.cms-hero-grid.with-scenes .csf-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.cms-hero-grid.with-scenes .hc-prev { left: 38% !important; }
.cms-hero-grid.with-scenes .hc-next { right: 8% !important; }
.cms-hero-grid.with-scenes .hc-indicators { left: 64% !important; }

.hero-featured-cards-wrap {
  margin-top: clamp(-42px, -3.8vw, -24px) !important;
}

@media (max-width: 900px) {
  .cms-hero-grid.with-scenes .cms-hero-copy { padding-top: 52px !important; }
  .cms-hero-grid.with-scenes .cms-hero-copy::before { inset: 0 -8% -4% -8% !important; }
  .cms-hero-grid.with-scenes .hero-carousel {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 560px) !important;
    height: 320px !important;
    transform: none !important;
  }
  .cms-hero-grid.with-scenes .hc-prev { left: 8px !important; }
  .cms-hero-grid.with-scenes .hc-next { right: 8px !important; }
  .cms-hero-grid.with-scenes .hc-indicators { left: 50% !important; }
}

@media (max-width: 620px) {
  .cms-hero-grid.with-scenes .cms-hero-copy { padding-top: 42px !important; }
  .cms-hero-grid.with-scenes .cms-hero-title { color: #fffaf2 !important; }
  .cms-hero-grid.with-scenes .hero-carousel {
    height: 245px !important;
    width: 100% !important;
  }
}
