/* One shared CONTACT CTA component for TOP, ELECTRICAL and COMPANY. */
.contact-cta {
  position: relative;
  height: 28.375rem;
  overflow: hidden;
  isolation: isolate;
  background: #020202;
}

.contact-cta__background {
  position: absolute;
  z-index: 0;
  inset: -28% 0;
  pointer-events: none;
  background: url('../images/home/contact-city-night.jpg') center 50% / cover no-repeat;
  transform: translate3d(0, var(--contact-cta-parallax, 0px), 0) scale(1.18);
  will-change: transform;
}

.contact-cta::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.22) 74%, rgba(0, 0, 0, 0.06));
}

.contact-cta__word,
.contact-cta__content { position: relative; z-index: 2; }

.contact-cta__word {
  position: absolute;
  top: 2.8rem;
  right: 1.75rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.37);
  font-family: var(--display-font);
  font-size: 4rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.contact-cta__content {
  width: min(100% - 3rem, 29.4375rem);
  padding-top: 3.94rem;
  margin-left: max(7.85vw, 3rem);
  opacity: 0;
  transform: translateX(2.5rem);
  transition: opacity 680ms ease 260ms, transform 820ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}

.contact-cta__heading { display: flex; gap: 2.45rem; }
.contact-cta__heading > span { width: 0.25rem; align-self: stretch; background: var(--color-red); }
.contact-cta__heading h2 { margin: 0; font-size: 2.25rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; }
.contact-cta__copy { margin: 1.85rem 0 0 2.45rem; font-size: 1rem; font-weight: 500; line-height: 1.875; letter-spacing: 0.08em; }

.contact-cta__button {
  display: inline-flex;
  min-height: 3.375rem;
  padding: 0.75rem 1.45rem;
  margin: 1.3rem 0 0 2.2rem;
  gap: 1.65rem;
  align-items: center;
  border: 1.5px solid #d5d5d5;
  color: #d5d5d5;
  background: rgba(17, 17, 20, 0.82);
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.contact-cta__button span { color: var(--color-red); font-size: 1.25rem; }
.contact-cta__button:hover,
.contact-cta__button:focus-visible { border-color: var(--color-red); color: #fff; background: #bd170f; outline: none; }
.contact-cta__button:hover span,
.contact-cta__button:focus-visible span { color: #fff; }

.contact-cta__wipe {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: #020202;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.contact-cta.is-contact-cta-visible .contact-cta__wipe { transform: scaleX(0); }
.contact-cta.is-contact-cta-visible .contact-cta__content { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
  .contact-cta { height: 38.125rem; }
  .contact-cta__background { background-image: url('../images/home/contact-city-night-sp.png'); }
  .contact-cta__content { width: min(calc(100% - 4.375rem), 20rem); padding-top: 10rem; margin: 0 auto; }
  .contact-cta__heading { gap: 2.1875rem; }
  .contact-cta__heading h2 { font-size: clamp(1.75rem, 9.23vw, 2.25rem); line-height: 3.375rem; }
  .contact-cta__copy { width: 100vw; margin: 2.4375rem 0 2.875rem calc(50% - 50vw); font-size: clamp(0.75rem, 4.1vw, 1rem); line-height: 2.25rem; text-align: center; white-space: nowrap; }
  .contact-cta__button { display: flex; width: 15.625rem; padding: 0 1.375rem; margin: 0 0 0 2.1875rem; justify-content: space-between; font-size: clamp(0.8125rem, 4.1vw, 1rem); }
  .contact-cta__word { top: 3rem; right: auto; left: 50%; font-size: clamp(3rem, 14vw, 3.5rem); transform: translateX(-50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-cta__background { transform: scale(1.18); will-change: auto; }
  .contact-cta__wipe { display: none; }
  .contact-cta__content { opacity: 1; transform: none; transition: none; }
}