.service-feature-carousel {
  position: relative;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(330px, 40%) 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 44px;
  background: #f3efe9;
  box-shadow: 0 30px 85px rgba(20,18,15,.13);
}

.service-carousel-nav {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: #fa6400;
}

.service-carousel-nav::before,
.service-carousel-nav::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 4;
  height: 90px;
  content: "";
  pointer-events: none;
}
.service-carousel-nav::before { top: 0; background: linear-gradient(#fa6400 25%,rgba(250,100,0,0)); }
.service-carousel-nav::after { bottom: 0; background: linear-gradient(0deg,#fa6400 25%,rgba(250,100,0,0)); }

.service-carousel-tabs { position: absolute; inset: 0; }
.service-carousel-tab {
  --tab-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(82%, 310px);
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  color: rgba(255,255,255,.66);
  background: transparent;
  cursor: pointer;
  opacity: var(--tab-opacity, .25);
  transform: translate(-50%, calc(-50% + var(--tab-y)));
  transition: transform 720ms cubic-bezier(.22,1,.36,1), opacity 520ms ease,
    color 420ms ease, background-color 520ms ease, border-color 420ms ease,
    box-shadow 520ms ease;
}
.service-carousel-tab:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.service-carousel-tab[aria-selected="true"] {
  z-index: 3;
  color: #fa6400;
  border-color: #fff;
  background: #fff;
  box-shadow: 0 15px 40px rgba(104,38,0,.2);
}
.service-carousel-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}
.service-carousel-tab-label {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-carousel-stage {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 60px 74px 76px;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 80% 15%,rgba(250,100,0,.11),transparent 34%),
    #f3efe9;
}
.service-carousel-stack { position: relative; width: min(100%,430px); aspect-ratio: 4/5; }
.service-carousel-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 36px;
  background: #111;
  opacity: 0;
  transform: scale(.72);
  pointer-events: none;
  transition: transform 760ms cubic-bezier(.22,1,.36,1), opacity 560ms ease,
    filter 560ms ease, box-shadow 650ms ease;
}
.service-carousel-card.is-active {
  z-index: 3;
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0);
  pointer-events: auto;
  box-shadow: 0 28px 65px rgba(20,18,15,.2);
}
.service-carousel-card.is-prev {
  z-index: 2;
  opacity: .38;
  filter: grayscale(.7) brightness(.78);
  transform: translateX(-105px) scale(.84) rotate(-3deg);
}
.service-carousel-card.is-next {
  z-index: 2;
  opacity: .38;
  filter: grayscale(.7) brightness(.78);
  transform: translateX(105px) scale(.84) rotate(3deg);
}
.service-carousel-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 5s ease; }
.service-carousel-card.is-active img { transform: scale(1.055); }
.service-carousel-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.42) 43%,transparent 72%);
}
.service-carousel-card-status {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.76);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.service-carousel-card-status::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: #fa6400; box-shadow: 0 0 14px #fa6400; }
.service-carousel-card-copy { position: absolute; right: 28px; bottom: 30px; left: 28px; z-index: 2; color: #fff; }
.service-carousel-card-index {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fa6400;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-carousel-card h3 { max-width: 340px; font-size: clamp(1.65rem,2.3vw,2.15rem); line-height: 1.05; }
.service-carousel-card p { margin: 14px 0 20px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.service-carousel-card a { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 750; }
.service-carousel-card a span { color: #fa6400; transition: transform 300ms ease; }
.service-carousel-card a:hover span { transform: translate(5px,-2px); }

.service-carousel-controls {
  position: absolute;
  right: 34px;
  bottom: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
}
.service-carousel-controls button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(23,23,43,.14);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: color 300ms ease, background-color 300ms ease, transform 300ms ease;
}
.service-carousel-controls button:hover { color: #fff; background: #fa6400; transform: translateY(-3px); }
.service-carousel-count { min-width: 56px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-align: center; }

@media (max-width: 900px) {
  .service-feature-carousel { grid-template-columns: minmax(280px,38%) 1fr; border-radius: 32px; }
  .service-carousel-nav, .service-carousel-stage { min-height: 600px; }
  .service-carousel-stage { padding-inline: 50px; }
  .service-carousel-card.is-prev { transform: translateX(-70px) scale(.84) rotate(-3deg); }
  .service-carousel-card.is-next { transform: translateX(70px) scale(.84) rotate(3deg); }
}

@media (max-width: 700px) {
  .service-feature-carousel { grid-template-columns: 1fr; border-radius: 24px; }
  .service-carousel-nav { min-height: 340px; }
  .service-carousel-stage { min-height: 570px; padding: 54px 30px 76px; }
  .service-carousel-tab { width: min(82%,300px); }
  .service-carousel-stack { width: min(100%,350px); }
  .service-carousel-card { border-width: 6px; border-radius: 26px; }
  .service-carousel-card.is-prev { transform: translateX(-48px) scale(.86) rotate(-3deg); }
  .service-carousel-card.is-next { transform: translateX(48px) scale(.86) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .service-carousel-tab, .service-carousel-card, .service-carousel-card img { transition-duration: .01ms !important; }
}