/* ==========================================================================
   HOME HERO — self-contained React slider.

   Structure: a 5-panel track (clone, 3 real slides, clone) slides behind a
   static copy layer, so the images push past each other while the text
   cross-fades in place. Every panel is exactly as tall as the track, which is
   what keeps a push from exposing a seam.

   No owl carousel here on purpose: the plugin's animate contract depends on
   animationend ordering, which is not something worth fighting for a hero.
   ========================================================================== */

.header-carousel-area3.hero-slider {
  --hero-track-ms: 820ms;
  --hero-ease: cubic-bezier(0.72, 0, 0.16, 1);
  --hero-copy-in-ms: 900ms;
  --hero-dur: clamp(540px, 40vw, 700px);
  --hero-dk: #05080f;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--hero-dk);
  /* horizontal drags are ours, vertical scrolling stays with the page */
  touch-action: pan-y;
}
.header-carousel-area3.hero-slider[data-dragging='true'] {
  cursor: grabbing;
  user-select: none;
}

/* ---------- track + panels ---------- */
.hero-slider__track {
  display: flex;
  width: 100%;
  height: var(--hero-dur);
  will-change: transform;
  transition: transform var(--hero-track-ms) var(--hero-ease);
}
.hero-slider__track[data-instant='true'],
.header-carousel-area3.hero-slider[data-dragging='true'] .hero-slider__track {
  transition: none;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--hero-dk);
}

/* ---------- image: shown as large as the frame allows ----------
   The photos are 2100x800, so the hero is kept close to that 2.6:1 ratio —
   anything taller crops the renderings and makes them read as blurry
   backgrounds instead of photography.

   Plain slide only: the photo is never scaled or filtered. A scaled layer
   gets resampled by the compositor while it travels, which is what reads as a
   soft/blurred image mid-slide, so the media box stays at 1:1 and only the
   track moves. */
.hero-slide__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- scrim ----------
   Deliberately light: the renderings have to stay readable as photography.
   Both the right edge of one panel and the left edge of the next must end up
   at the same opacity, otherwise a vertical band shows up mid-push. The 90deg
   ramp is therefore faded to nothing before the edge and the 180deg ramp is
   even at 0% and 100% height. */
.hero-slide__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 18, 0.46) 0%,
      rgba(4, 8, 18, 0.32) 32%,
      rgba(4, 8, 18, 0.08) 58%,
      rgba(4, 8, 18, 0) 80%
    ),
    linear-gradient(
      180deg,
      rgba(4, 8, 18, 0.26) 0%,
      rgba(4, 8, 18, 0.04) 26%,
      rgba(4, 8, 18, 0.08) 58%,
      rgba(4, 8, 18, 0.4) 100%
    );
}

/* ---------- copy layer ---------- */
.hero-slider__copy-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 112px 0 116px;
  pointer-events: none;
}
/* the wash that keeps the copy legible is confined to the text column, so the
   rest of the frame stays an untouched photo */
.hero-slider__copy-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(4, 8, 18, 0.62) 0%,
    rgba(4, 8, 18, 0.4) 34%,
    rgba(4, 8, 18, 0.12) 56%,
    rgba(4, 8, 18, 0) 72%
  );
}
.hero-slider__copy-layer > .container {
  width: 100%;
}
.hero-copy-stage {
  position: relative;
  max-width: 820px;
}
.hero-copy {
  position: relative;
}
.hero-copy--in {
  /* the layer itself ignores pointers so drags reach the track, the copy does
     not — otherwise the CTAs stop responding to clicks */
  pointer-events: auto;
}
.hero-copy--out {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-copy__inner {
  position: relative;
}

/* ---------- copy: staggered reveal, cross-faded per direction ---------- */
@keyframes heroCopyInNext {
  from {
    opacity: 0;
    transform: translate3d(58px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes heroCopyInPrev {
  from {
    opacity: 0;
    transform: translate3d(-58px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes heroCopyOutNext {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-48px, 0, 0);
  }
}
@keyframes heroCopyOutPrev {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(48px, 0, 0);
  }
}
.hero-copy--in {
  animation: heroCopyInNext var(--hero-copy-in-ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-copy--out {
  animation: heroCopyOutNext 560ms cubic-bezier(0.4, 0, 1, 1) both;
}
.hero-copy-stage[data-dir='prev'] .hero-copy--in {
  animation-name: heroCopyInPrev;
}
.hero-copy-stage[data-dir='prev'] .hero-copy--out {
  animation-name: heroCopyOutPrev;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-42px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* the whole block fades as one, the children then settle behind it */
.hero-copy--in .hero-eyebrow {
  animation: heroSlideLeft 800ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}
.hero-copy--in .hero-title {
  animation: heroRise 820ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}
.hero-copy--in .hero-lead {
  animation: heroRise 820ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both;
}
.hero-copy--in .hero-actions {
  animation: heroRise 820ms cubic-bezier(0.22, 1, 0.36, 1) 460ms both;
}

/* ---------- copy content ---------- */
.hero-slider .hero-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.hero-slider .hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-radius: 999px;
  font-family: var(--ztc-family-font2);
  font-size: 12px;
  font-weight: var(--ztc-weight-bold);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-slider .hero-chip--tag {
  color: #0a0d16;
  background: var(--ztc-bg-bg-10);
  box-shadow: 0 12px 26px rgba(251, 133, 0, 0.32);
}
.hero-slider .hero-chip--loc {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-slider .hero-chip--loc i {
  color: var(--ztc-bg-bg-10);
  font-size: 13px;
}
.hero-slider .hero-title {
  margin: 0;
  max-width: 780px;
  min-height: 2.32em;
  color: #fff;
  font-family: var(--ztc-family-font1);
  font-size: clamp(30px, 2.9vw, 46px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.hero-slider .hero-lead {
  margin: 18px 0 0;
  max-width: 600px;
  min-height: 3.5em;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--ztc-family-font2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.72;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.5);
}
.hero-slider .hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.hero-slider .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 29px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--ztc-family-font2);
  font-size: 15px;
  font-weight: var(--ztc-weight-bold);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease,
    border-color 0.35s ease, box-shadow 0.35s ease;
}
.hero-slider .hero-btn i {
  font-size: 13px;
  transition: transform 0.35s ease;
}
.hero-slider .hero-btn:hover {
  transform: translateY(-3px);
}
.hero-slider .hero-btn:hover i {
  transform: translateX(4px);
}
.hero-slider .hero-btn--solid {
  color: #0b1f4e;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}
.hero-slider .hero-btn--solid:hover {
  color: #fff;
  background: var(--ztc-bg-bg-10);
}
.hero-slider .hero-btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero-slider .hero-btn--ghost:hover {
  color: #0b1f4e;
  background: #fff;
  border-color: #fff;
}

/* ---------- control bar ---------- */
.hero-slider__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 5;
}
.hero-slider .hero-controls {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  padding: 12px 12px 12px 24px;
  background: rgba(9, 14, 28, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hero-slider .hero-counter {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-right: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-slider .hero-counter b {
  color: #fff;
  font-family: var(--ztc-family-font1);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}
.hero-slider .hero-counter span {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--ztc-family-font2);
  font-size: 13px;
  font-weight: var(--ztc-weight-bold);
  letter-spacing: 0.14em;
}
.hero-slider .hero-thumbs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-slider .hero-thumb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.hero-slider .hero-thumb:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.hero-slider .hero-thumb.is-active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
}
.hero-slider .hero-thumb-img {
  display: block;
  flex: none;
  width: 66px;
  height: 46px;
  overflow: hidden;
  border-radius: 11px;
}
.hero-slider .hero-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) brightness(0.82);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.hero-slider .hero-thumb:hover .hero-thumb-img img,
.hero-slider .hero-thumb.is-active .hero-thumb-img img {
  filter: none;
  transform: scale(1.06);
}
.hero-slider .hero-thumb-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 10px;
  text-align: left;
}
.hero-slider .hero-thumb-text b {
  color: #fff;
  font-family: var(--ztc-family-font2);
  font-size: 13.5px;
  font-weight: var(--ztc-weight-bold);
  line-height: 1.15;
  white-space: nowrap;
}
.hero-slider .hero-thumb-text em {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ztc-family-font2);
  font-size: 10.5px;
  font-style: normal;
  font-weight: var(--ztc-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-slider .hero-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-slider .hero-arrows button {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease,
    transform 0.35s ease;
}
.hero-slider .hero-arrows button:hover {
  color: #0b1f4e;
  background: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

/* ---------- autoplay progress ---------- */
.hero-slider__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}
.hero-slider__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--ztc-bg-bg-10), #ffd08a);
  transform-origin: left center;
  animation: heroProgress 6.5s linear forwards;
}
.header-carousel-area3.hero-slider[data-paused='true'] .hero-slider__progress i {
  animation-play-state: paused;
}
@keyframes heroProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ---------- screen-reader only live region ---------- */
.hero-slider__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .hero-slider .hero-thumb-text {
    display: none;
  }
  .hero-slider .hero-copy-stage {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .header-carousel-area3.hero-slider {
    --hero-dur: clamp(560px, 78vw, 640px);
  }
  .hero-slider__copy-layer {
    padding: 110px 0 112px;
  }
}
@media (max-width: 767px) {
  .header-carousel-area3.hero-slider {
    --hero-dur: clamp(600px, 122vw, 700px);
  }
  .hero-slider__copy-layer {
    padding: 104px 0 168px;
  }
  .hero-slide__media img {
    object-position: 58% center;
  }
  .hero-slide__scrim {
    background:
      linear-gradient(
        90deg,
        rgba(4, 8, 18, 0.34) 0%,
        rgba(4, 8, 18, 0.16) 45%,
        rgba(4, 8, 18, 0) 88%
      ),
      linear-gradient(
        180deg,
        rgba(4, 8, 18, 0.42) 0%,
        rgba(4, 8, 18, 0.2) 34%,
        rgba(4, 8, 18, 0.22) 58%,
        rgba(4, 8, 18, 0.5) 100%
      );
  }
  /* the copy runs the full width here, so the wash follows it vertically */
  .hero-slider__copy-layer::before {
    background: linear-gradient(
      180deg,
      rgba(4, 8, 18, 0.6) 0%,
      rgba(4, 8, 18, 0.32) 26%,
      rgba(4, 8, 18, 0.34) 62%,
      rgba(4, 8, 18, 0.64) 100%
    );
  }
  .hero-slider .hero-title {
    font-size: clamp(28px, 7.4vw, 36px);
    line-height: 1.22;
  }
  .hero-slider .hero-lead {
    font-size: 15px;
    line-height: 1.7;
  }
  .hero-slider .hero-actions {
    margin-top: 26px;
  }
  .hero-slider .hero-btn {
    padding: 16px 24px;
    font-size: 14px;
  }
  .hero-slider .hero-thumbs {
    display: none;
  }
  .hero-slider__bar {
    bottom: 30px;
  }
  .hero-slider .hero-controls {
    gap: 12px;
    padding: 10px 10px 10px 18px;
    border-radius: 20px;
  }
  .hero-slider .hero-counter {
    padding-right: 16px;
  }
  .hero-slider .hero-counter b {
    font-size: 28px;
  }
  .hero-slider .hero-arrows button {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 480px) {
  .header-carousel-area3.hero-slider {
    --hero-dur: 620px;
  }
  .hero-slider__copy-layer {
    padding: 98px 0 162px;
  }
  .hero-slider .hero-chip {
    padding: 9px 14px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}
/* short laptop windows: give the copy the room it needs */
@media (min-width: 992px) and (max-height: 760px) {
  .header-carousel-area3.hero-slider {
    --hero-dur: 720px;
  }
  .hero-slider__copy-layer {
    padding: 104px 0 104px;
  }
  .hero-slider .hero-title {
    font-size: clamp(28px, 2.4vw, 38px);
  }
  .hero-slider .hero-lead {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track {
    transition-duration: 240ms;
  }
  .hero-copy--in,
  .hero-copy--out,
  .hero-copy--in .hero-eyebrow,
  .hero-copy--in .hero-title,
  .hero-copy--in .hero-lead,
  .hero-copy--in .hero-actions {
    animation: none;
  }
  .hero-slider__progress i {
    animation: none;
    transform: scaleX(1);
  }
}

/* ==========================================================================
   SIMPLE HERO — slide-only variant, full-height on desktop.

   The photos slide edge to edge and carry only the active slide's title and
   description. No glass chips, no CTA buttons, no thumbnail strip, no counter,
   no zoom, no blur on the rendering. The copy layer is a transparent overlay
   with a soft navy gradient at the left edge so the text stays readable
   without touching the rest of the photo.
   ========================================================================== */

.header-carousel-area3.hero-slider.hero-slider--simple {
  --hero-dur: 100vh;
  background: var(--hero-dk);
  outline: none;
}

.hero-slider--simple:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: -4px;
}

.hero-slider--simple .hero-slider__copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 130px 0 90px;
  pointer-events: none;
  color: #fff;
  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 18, 0.62) 0%,
      rgba(4, 8, 18, 0.34) 36%,
      rgba(4, 8, 18, 0) 66%
    ),
    linear-gradient(180deg, rgba(4, 8, 18, 0.2) 0%, rgba(4, 8, 18, 0) 32%);
}

.hero-slider--simple .hero-slider__copy > .container {
  width: 100%;
}

.hero-slider--simple .hero-title {
  margin: 0;
  max-width: 820px;
  min-height: 0;
  color: #fff;
  font-family: var(--ztc-family-font1);
  font-size: clamp(30px, 3vw, 50px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.hero-slider--simple .hero-lead {
  margin: 16px 0 0;
  max-width: 620px;
  min-height: 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--ztc-family-font2);
  font-size: 17px;
  line-height: 1.7;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.5);
}

/* phones and tablets keep the same overlay, just shorter than the viewport */
@media (max-width: 991px) {
  .header-carousel-area3.hero-slider.hero-slider--simple {
    --hero-dur: clamp(440px, 82vh, 620px);
  }

  .hero-slider--simple .hero-slider__copy {
    padding: 118px 0 64px;
  }
}

@media (max-width: 767px) {
  .hero-slider--simple .hero-slider__copy {
    padding: 110px 0 56px;
    align-items: flex-end;
    background:
      linear-gradient(
        180deg,
        rgba(4, 8, 18, 0.22) 0%,
        rgba(4, 8, 18, 0.06) 34%,
        rgba(4, 8, 18, 0.62) 100%
      );
  }

  .hero-slider--simple .hero-title {
    font-size: clamp(24px, 6.6vw, 32px);
    line-height: 1.24;
  }

  .hero-slider--simple .hero-lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.68;
  }
}