/* Shivaa v183 — responsive homepage hero + shared carousel image layer.
   This is intentionally an additive, route-scoped layer: brand colors, type,
   button classes and the existing maroon/gold composition are preserved. */

/* Art-directed <picture> elements replace CSS-only background images so the
   browser can select a mobile crop and WebP while retaining JPEG fallback. */
.hero-img {
  background: none !important;
  background-image: none !important;
  overflow: hidden;
}
.hero-img > .hero-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.hero-img > .hero-picture > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The source logo is an unchanged navy wordmark on white. Keep that card fully
   opaque over the photography; half opacity reduced the original contrast. */
.hero .hero-logo {
  width: 128px;
  height: auto;
  min-width: 120px;
  max-width: 18vw;
  opacity: 1;
  filter: none;
  background: #fff;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .28);
}

/* <picture> is the slide's media frame; existing slide and crop rules remain. */
#heroCarousel .c-slide > .c-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#heroCarousel .c-slide > .c-picture > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Keep the same deck, order and controls while making its movement feel direct. */
#heroCarousel .c-track {
  transition: transform 300ms ease-out;
}
#heroCarousel .c-slide.on .c-body > * {
  animation-duration: 300ms;
  animation-timing-function: ease-out;
}

/* Gold/maroon backing keeps the indicator dots visible over both dark velvet
   and pale stone. Shape, spacing and palette continue to use existing tokens. */
#heroCarousel .c-dots {
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(212, 175, 90, .42);
  border-radius: 999px;
  background: rgba(29, 5, 9, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#heroCarousel .c-dot {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: #fdf3dd;
  touch-action: manipulation;
}
#heroCarousel .c-dot.on {
  background: var(--gold-2, #d4af5a);
}
#heroCarousel .c-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
#heroCarousel .c-arrow {
  touch-action: manipulation;
}

/* A shared trust slot supports the same banner template without introducing
   a new typeface or color pairing. */
#heroCarousel .c-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 2px 0 0;
  color: #f3dfae;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .035em;
}
#heroCarousel .c-trust-row i {
  color: var(--gold-2, #d4af5a);
  font-style: normal;
}
#heroCarousel .c-cta {
  margin-top: 16px;
}

@media (max-width: 820px) {
  .hero-img > .hero-picture > img {
    object-position: center 48%;
  }
  /* The header already carries the brand wordmark on phone; keep the existing
     no-duplicate-logo mobile behavior. */
  #heroCarousel .c-slide > .c-picture > img {
    object-position: center center;
  }
  #heroCarousel .c-slide {
    min-height: 430px;
  }
  #heroCarousel .c-body p {
    font-size: 14px;
    line-height: 1.5;
  }
  #heroCarousel .c-trust-row {
    font-size: 11.5px;
  }
  #heroCarousel .c-dots {
    bottom: 12px;
    padding: 6px 9px;
  }
  .hero-kicker,
  .hero h1,
  .hero-sub,
  .hero-cta,
  .hero-trust,
  .hero-stats {
    animation-duration: 300ms !important;
    animation-timing-function: ease-out !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #heroCarousel .c-track {
    transition: none !important;
  }
  #heroCarousel .c-slide.on .c-body > *,
  #heroCarousel .c-slide.on img,
  .hero-img {
    animation: none !important;
    transform: none !important;
  }
}