

.sanava-hero-carousel-section {
  width: 100%;
  padding: 0;
  margin: 0;
  background: #102c47;
}
.sanava-hero-carousel-section > .shell {
  width: 100%;
  max-width: none;
  margin: 0;
}
.sanava-hero-carousel {
  --slide-time: 5500ms;
  --hero-edge: clamp(27px, 6.2vw, 112px);
  position: relative;
  isolation: isolate;
  height: clamp(590px, calc(100svh - 85px), 790px);
  overflow: hidden;
  background: #102c47;
  color: #fff;
}
.sanava-hero-carousel__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.sanava-hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity .68s ease, visibility 0s linear .68s;
}
.sanava-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity .68s ease, visibility 0s;
}


.sanava-hero-slide__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: #244259;
}
.sanava-hero-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.045);
  transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
  will-change: auto;
}
.sanava-hero-slide.is-active .sanava-hero-slide__media img { transform: scale(1); }
.sanava-hero-slide[data-slide="0"] .sanava-hero-slide__media img { object-position: center 43%; }
.sanava-hero-slide[data-slide="1"] .sanava-hero-slide__media img { object-position: center 34%; }
.sanava-hero-slide[data-slide="2"] .sanava-hero-slide__media img { object-position: center 50%; }


.sanava-hero-slide__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(7, 25, 40, .93) 0%,
      rgba(10, 33, 50, .87) 24%,
      rgba(11, 36, 54, .67) 46%,
      rgba(10, 31, 47, .26) 72%,
      rgba(7, 24, 39, .18) 100%),
    linear-gradient(180deg,
      rgba(7, 23, 37, .16) 0%,
      transparent 43%,
      rgba(6, 22, 37, .51) 100%);
}
.sanava-hero-slide[data-slide="1"] .sanava-hero-slide__media::after {
  background:
    linear-gradient(90deg,
      rgba(17, 36, 49, .92) 0%,
      rgba(18, 40, 55, .82) 27%,
      rgba(24, 47, 58, .54) 52%,
      rgba(13, 29, 43, .16) 81%,
      rgba(10, 25, 39, .14) 100%),
    linear-gradient(180deg, rgba(10, 25, 39, .11), transparent 40%, rgba(10, 26, 39, .46));
}
.sanava-hero-slide[data-slide="2"] .sanava-hero-slide__media::after {
  background:
    linear-gradient(90deg,
      rgba(8, 25, 42, .94) 0%,
      rgba(9, 30, 49, .86) 26%,
      rgba(11, 34, 53, .58) 51%,
      rgba(10, 27, 43, .18) 84%,
      rgba(9, 27, 42, .16) 100%),
    linear-gradient(180deg, rgba(5, 19, 34, .13), transparent 42%, rgba(7, 22, 36, .5));
}


.sanava-hero-slide__panel,
.sanava-hero-slide:nth-child(2) .sanava-hero-slide__panel,
.sanava-hero-slide:nth-child(3) .sanava-hero-slide__panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 60px var(--hero-edge) 118px;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}
.sanava-hero-slide__panel::before,
.sanava-hero-slide__pattern {
  display: none;
}
.sanava-hero-slide__copy {
  position: relative;
  z-index: 2;
  width: min(100%, 720px);
  max-width: 720px;
  pointer-events: auto;
  text-shadow: 0 2px 16px rgba(5, 20, 35, .19);
}
.sanava-hero-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  color: #f3c9aa;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}
.sanava-hero-slide__eyebrow-mark {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border: 1.5px solid #f2be9d;
  transform: rotate(45deg);
}
.sanava-hero-slide__title {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font: 690 clamp(48px, 5.2vw, 80px)/1.055 "DM Sans", "Segoe UI", sans-serif;
  letter-spacing: -.073em;
  text-wrap: balance;
}
.sanava-hero-slide__title span,
.sanava-hero-slide__title em { display: block; }
.sanava-hero-slide__title em {
  margin-top: 7px;
  color: #f3bc9c;
  font: 450 .9em/1.13 "Fraunces", Georgia, serif;
  letter-spacing: -.053em;
}
.sanava-hero-slide__description {
  max-width: 535px;
  margin: 23px 0 0;
  color: #e7edf1;
  font-size: 18px;
  line-height: 1.68;
  text-wrap: pretty;
}
.sanava-hero-slide__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 23px;
  margin-top: 30px;
}
.sanava-hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 54px;
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 5px;
  background: #f9eee4;
  color: #12344e;
  font-size: 16px;
  font-weight: 760;
  white-space: nowrap;
  text-shadow: none;
  transition: background .24s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
.sanava-hero-button:hover { background: #fff; transform: translateY(-2px); }
.sanava-hero-button .fa-solid { font-size: 14px; }
.sanava-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  color: #f7eee8;
  font-size: 16px;
  font-weight: 690;
  white-space: nowrap;
  transition: color .25s;
}
.sanava-hero-secondary:hover { color: #ffcfab; }
.sanava-hero-secondary .fa-solid { font-size: 14px; transition: transform .25s; }
.sanava-hero-secondary:hover .fa-solid { transform: translateX(4px); }


.sanava-hero-slide__media figcaption {
  position: absolute;
  top: 31px;
  right: 95px;
  bottom: auto;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 280px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.33);
  border-radius: 5px;
  background: rgba(9, 30, 46, .55);
  backdrop-filter: blur(7px);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-shadow: 0 1px 9px rgba(0,0,0,.22);
}
.sanava-hero-slide__media figcaption .fa-solid { color: #f3bea0; }


.sanava-hero-carousel__controls {
  position: absolute;
  z-index: 5;
  left: var(--hero-edge);
  right: var(--hero-edge);
  bottom: 32px;
  width: auto;
  display: flex;
  align-items: center;
  gap: 19px;
  visibility: hidden;
  pointer-events: none;
}
.sanava-hero-carousel.is-enhanced .sanava-hero-carousel__controls {
  visibility: visible;
  pointer-events: auto;
}
.sanava-hero-carousel__arrows { display: flex; gap: 8px; }
.sanava-hero-carousel__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  border: 1px solid rgba(249,252,254,.67);
  background: rgba(10,28,44,.18);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 17px;
  transition: background .23s, border-color .23s, transform .23s;
}
.sanava-hero-carousel__arrow:hover {
  background: rgba(255,255,255,.17);
  border-color: #fff;
}
.sanava-hero-carousel__arrow:active { transform: scale(.95); }
.sanava-hero-carousel__dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  max-width: 220px;
}
.sanava-hero-carousel__dot {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  width: 48px;
  min-width: 44px;
  height: 46px;
  padding: 0 7px;
  border: 0;
  background: transparent;
}
.sanava-hero-carousel__dot span {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(235,242,246,.39);
}
.sanava-hero-carousel__dot.is-current span { background: rgba(246,245,242,.55); }
.sanava-hero-carousel__dot.is-current span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f5c19f;
  transform-origin: left;
  transform: scaleX(1);
}
.sanava-hero-carousel.is-enhanced .sanava-hero-carousel__dot.is-current span::before {
  animation: sanavaHeroProgress var(--slide-time) linear forwards;
}
.sanava-hero-carousel.is-paused .sanava-hero-carousel__dot.is-current span::before {
  animation-play-state: paused;
}
@keyframes sanavaHeroProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.sanava-hero-carousel__count {
  margin-left: auto;
  color: #f8e7d9;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .1em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sanava-hero-carousel__count span { margin-inline: 6px; opacity: .6; }
.sanava-hero-carousel__pause {
  position: absolute;
  z-index: 6;
  top: 26px;
  right: 27px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(250,250,248,.78);
  border-radius: 50%;
  background: rgba(13,38,56,.5);
  backdrop-filter: blur(5px);
  color: #fff;
  font-size: 14px;
  visibility: hidden;
  pointer-events: none;
  transition: background .22s, color .22s;
}
.sanava-hero-carousel.is-enhanced .sanava-hero-carousel__pause {
  visibility: visible;
  pointer-events: auto;
}
.sanava-hero-carousel__pause:hover { background: #f9eee4; color: #102e48; }
.sanava-hero-carousel__pause:disabled { opacity: .6; cursor: not-allowed; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  .sanava-hero-carousel { height: clamp(605px, calc(100svh - 78px), 750px); }
  .sanava-hero-carousel { --hero-edge: clamp(34px, 5.5vw, 64px); }
  .sanava-hero-slide__title { font-size: clamp(46px, 5.7vw, 64px); }
  .sanava-hero-slide__description { font-size: 17px; }
}
@media (max-width: 850px) {
  .sanava-hero-carousel { height: clamp(640px, calc(100svh - 75px), 765px); }
  .sanava-hero-slide__panel,
  .sanava-hero-slide:nth-child(2) .sanava-hero-slide__panel,
  .sanava-hero-slide:nth-child(3) .sanava-hero-slide__panel {
    align-items: flex-end;
    padding-top: 60px;
    padding-bottom: 133px;
  }
  .sanava-hero-slide__copy { width: min(100%, 710px); }
  .sanava-hero-slide__title { font-size: clamp(43px, 6.7vw, 60px); }
  .sanava-hero-slide__media::after {
    background:
      linear-gradient(180deg,
        rgba(7,24,39,.1) 0%,
        rgba(8,24,39,.13) 23%,
        rgba(9,28,44,.44) 45%,
        rgba(7,25,42,.82) 70%,
        rgba(6,22,38,.96) 100%),
      linear-gradient(90deg, rgba(8,26,40,.2), transparent 75%);
  }
  .sanava-hero-slide[data-slide="1"] .sanava-hero-slide__media::after,
  .sanava-hero-slide[data-slide="2"] .sanava-hero-slide__media::after {
    background:
      linear-gradient(180deg,
        rgba(7,24,39,.12),
        rgba(8,25,42,.2) 29%,
        rgba(8,26,42,.57) 53%,
        rgba(6,22,38,.9) 77%,
        rgba(5,21,36,.97) 100%);
  }
  .sanava-hero-slide__media figcaption { top: 22px; right: 92px; bottom: auto; }
  .sanava-hero-carousel__controls { bottom: 24px; }
}
@media (max-width: 700px) {
  .sanava-hero-carousel-section { padding: 0; }
  .sanava-hero-carousel {
    --hero-edge: 22px;
    height: clamp(645px, calc(100svh - 72px), 770px);
  }
  .sanava-hero-slide__panel,
  .sanava-hero-slide:nth-child(2) .sanava-hero-slide__panel,
  .sanava-hero-slide:nth-child(3) .sanava-hero-slide__panel {
    padding: 88px var(--hero-edge) 119px;
    align-items: flex-end;
  }
  .sanava-hero-slide__copy { max-width: 530px; }
  .sanava-hero-slide__eyebrow {
    margin-bottom: 15px;
    font-size: 11px;
    letter-spacing: .115em;
  }
  .sanava-hero-slide__title {
    font-size: clamp(34px, 8.9vw, 48px);
    line-height: 1.08;
    letter-spacing: -.061em;
  }
  .sanava-hero-slide__title em { margin-top: 4px; }
  .sanava-hero-slide__description {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.55;
    max-width: 485px;
  }
  .sanava-hero-slide__actions { margin-top: 19px; gap: 8px 15px; }
  .sanava-hero-button { min-height: 47px; padding: 10px 14px; font-size: 14px; gap: 13px; }
  .sanava-hero-secondary { min-height: 46px; font-size: 14px; gap: 8px; }
  .sanava-hero-slide__media figcaption { display: none; }
  .sanava-hero-carousel__controls { bottom: 19px; gap: 8px; }
  .sanava-hero-carousel__arrows { gap: 6px; }
  .sanava-hero-carousel__arrow { width: 44px; height: 44px; flex-basis: 44px; }
  .sanava-hero-carousel__dot { height: 44px; min-width: 44px; width: 44px; padding: 0 7px; }
  .sanava-hero-carousel__dots { max-width: 210px; gap: 0; }
  .sanava-hero-carousel__count { font-size: 12px; }
  .sanava-hero-carousel__pause { top: 15px; right: 15px; width: 44px; height: 44px; }
  .sanava-hero-slide[data-slide="0"] .sanava-hero-slide__media img { object-position: 53% 39%; }
  .sanava-hero-slide[data-slide="1"] .sanava-hero-slide__media img { object-position: 50% 37%; }
  .sanava-hero-slide[data-slide="2"] .sanava-hero-slide__media img { object-position: 49% 44%; }
}
@media (max-width: 390px) {
  .sanava-hero-carousel { --hero-edge: 18px; }
  .sanava-hero-slide__title { font-size: clamp(32px, 8.5vw, 37px); }
  .sanava-hero-slide__eyebrow { margin-bottom: 12px; }
  .sanava-hero-slide__description { font-size: 15px; line-height: 1.5; margin-top: 13px; }
  .sanava-hero-slide__actions { margin-top: 15px; }
  .sanava-hero-carousel__count { display: none; }
  .sanava-hero-carousel__dots { max-width: none; gap: 1px; }
  .sanava-hero-carousel__controls { gap: 9px; }
}
@media (max-width: 345px) {
  .sanava-hero-carousel { height: 655px; --hero-edge: 16px; }
  .sanava-hero-slide__title { font-size: 32px; }
  .sanava-hero-slide__actions .sanava-hero-secondary { display: none; }
  .sanava-hero-carousel__dots { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sanava-hero-slide,
  .sanava-hero-slide__media img,
  .sanava-hero-button,
  .sanava-hero-secondary .fa-solid,
  .sanava-hero-carousel__arrow { transition: none !important; transform: none !important; }
  .sanava-hero-carousel__dot.is-current span::before {
    animation: none !important;
    transform: scaleX(1) !important;
  }
}
