/* Extracted reusable styles for hero visual slider/cards */
:root {
  --ghost-white: #f2effb;
}
.hero-visual {
  width:76.2911%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  transform: perspective(3200px) rotate(0);
}

.hero-visual.is-home {
  height: 41em;
}

.hero-images {
  width: 60.375em;
  padding-top: 40%;
  position: relative;
}

.image-small {
  width: 12.0625em;
  transform-style: preserve-3d;
  position: absolute;
  top: 3%;
  bottom: auto;
  left: 4.2em;
  right: auto;
  transform: translateZ(-50px);
}

.image-small.is-right {
  left: auto;
  right: 4.2em;
}

.image-small.image-fast { top: -4%; left: 16%; transform: translate(0); }
.image-small.image-fast.is-right { z-index: 2; left: 45%; }
.image-small.image-fast.is-right.a-pl { top: -7%; right: 45%; }
.image-small.image-fast.a-pl { width: 37%; top: -7%; right: 16%; transform: none; }

.image-small.flip { border-radius: .9375em; overflow: visible; box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }

.image-medium {
  z-index: 5;
  width: 14.375em;
  transform-style: preserve-3d;
  position: absolute;
  top: -3%;
  bottom: auto;
  left: 12.1em;
  right: auto;
  transform: translateZ(18px);
}

.image-medium.is-right { left: auto; right: 12.1em; }
.image-medium.is-right.flip { border-radius: 1.25em; box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }
.image-medium.is-right.flip.is-we-work { top: -7%; left: auto; right: -1em; }
.image-medium.fast-2 { top: -11%; left: 22%; }
.image-medium.fast-2.a-pl { width: 40%; left: 21%; right: 21%; }
.image-medium.fast-1 { top: -11%; left: 36%; }
.image-medium.fast-1.a-pl { width: 40%; left: 38%; right: 38%; }
.image-medium.flip { border-radius: 1.25em; box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }
.image-medium.flip.is-we-work { width: 23.1875em; top: -7%; left: 1em; }

.image-big {
  z-index: 10;
  width: 18.75em;
  position: absolute;
  top: -15%;
  bottom: auto;
  left: auto;
  right: auto;
}
.image-big.creatives-fast-item-1 { width: 45%; right: 50%; }
.image-big.flip { z-index: 20; transform-style: preserve-3d; border-radius: 1.5625em; transform: translateZ(40px); box-shadow: 14px 14px 60px rgba(59, 42, 130, .06); }
.image-big.flip.is-work { width: 28.0625em; }

.hero-item-rotate {
  z-index: 100;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  margin-top: 6em;
  display: flex;
  position: relative;
  transform: perspective(5000px) rotate(0);
}

.hero_item {
  width: 100%;
  opacity: 1;
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}
.hero_item.is--1 { z-index: 6; opacity: 1; }

.hero-visual-top {
  z-index: 200;
  width: 80%;
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(255, 255, 255, .5);
  border: .8px solid #fff;
  border-radius: 1.875em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  padding: .625rem;
  display: grid;
  position: relative;
}

.hero-top-card {
  height: 6.875rem;
  text-align: center;
  background-color: #fff;
  border-radius: 1.25em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 1.625rem;
  padding-left: 1.75em;
  padding-right: 1.75em;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero-top-card.flip { border-radius: 1.5625em; box-shadow: 14px 14px 60px rgba(30, 21, 65, .06); }

.card-feature {
  width: 85%;
  background-color: var(--ghost-white);
  text-align: center;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-top: .3125em;
  padding-bottom: 5px;
  font-weight: 600;
  position: absolute;
  top: 3px;
  bottom: auto;
  left: 50%;
  right: 0%;
  transform: translate(-50%);
  color: #6b7280; /* ensure label text visible on light bg */
}

.card-upper-text {
  color : #000;
  font-size: 1em;
}

.tesla-logo { width: 6.4375em; }

.card-information { color: #0f172a; font-size: 1.125em; font-weight: 600; line-height: 1.4; }
.card-information.is-2 { font-size: 1em; }
.text-span { font-weight: 500; color: #64748b; }
.card-information h3 { font-size: 1.25rem !important; }
.card-information h3+span { font-size: 0.75rem; }

.hero-arrow {
  z-index: -1;
  width: .8em;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: absolute;
  top: auto;
  bottom: 0%;
  left: 50%;
  right: 0%;
  transform: translate(-50%, 100%);
}
.mobile-tesla {
  display: none
}

/* Responsive adjustments */
@media screen and (min-width: 1280px) {
  .hero-visual.is-home { max-width: 63em; }
}

@media screen and (max-width: 991px) {
  .hero-visual { width: 90%; }
  .hero-visual.is-home { height: 40rem; }
  .hero-item-rotate { display: none; }
  .hero_item.is--1 { align-items: center; display: flex; }
  .hero-visual-top { width: 50%; grid-template-columns: 1fr; }
  .hero-top-card.flip { height: 2.3rem; flex-direction: column; justify-content: space-between; align-items: center; padding-top: 0; height: initial !important; padding: 1rem; }
  .card-feature { width: auto; background-color: transparent; font-size: .9rem; position: static; transform: none; }
  .card-information, .card-information.is-2 { text-align: right; font-size: .7rem; }

  
  .mobile-tesla {
    max-width: none;
    object-fit: contain;
    display: block;
    position: relative;
    top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .image-small.is-right.flip { top: 10%; bottom: 0%; left: auto; right: 0%; }
  .image-small.flip { top: 10%; }
  .image-medium.is-right.flip { top: 0%; bottom: 0%; left: auto; right: 11%; }
  .image-medium.is-right.flip.is-we-work { width: 20em; top: -6%; left: 60%; }
  .image-medium.flip { top: 0%; left: 13%; }
  .image-medium.flip.is-we-work { width: 21em; top: -6%; left: -12%; }
  .image-big.flip.is-work { width: 25em; }
  .hero_item.is--1 { align-items: center; display: flex; }
  .hero-visual-top { width: 80%; }
}

@media screen and (max-width: 1920px) {
  /* keep space for future large-screen overrides if needed */
}