/* clone-polish.css - subtle modern/clean visual upgrades. Keeps Protek's palette:
   gold #E8C96A, near-black #1A1A1A, white. Light touch only. */
:root { --pk-gold: #E8C96A; --pk-ink: #1A1A1A; }

html { scroll-behavior: smooth; }
html, body { background-color: #0a0a0a; }

/* ---------- BUTTONS ---------- */
.elementor-button,
.elementor-button-link {
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, filter .22s ease !important;
  will-change: transform;
}
.elementor-button:hover,
.elementor-button-link:hover {
  transform: translateY(-2px);
}
/* gold (solid) buttons get a warm glow on hover */
.elementor-button[style*="232, 201, 106"]:hover,
.elementor-button[style*="#E8C96A"]:hover,
.elementor-button[style*="#e8c96a"]:hover {
  box-shadow: 0 12px 28px rgba(232, 201, 106, .32);
  filter: brightness(1.04);
}
/* fallback: any button with the gold background gets the glow */
.elementor-widget-button .elementor-button:hover {
  box-shadow: 0 12px 28px rgba(232, 201, 106, .28);
}

/* ---------- SERVICE / FEATURE CARDS ---------- */
/* scoped to child containers that hold both an image and a heading (the cards) */
.e-con-full.e-child:has(.elementor-widget-image):has(.elementor-widget-heading) {
  transition: transform .28s ease, box-shadow .28s ease !important;
}
.e-con-full.e-child:has(.elementor-widget-image):has(.elementor-widget-heading):hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* ---------- LINKS / FOCUS ---------- */
a, .elementor-item { transition: color .2s ease, opacity .2s ease; }
:focus-visible { outline: 2px solid var(--pk-gold); outline-offset: 2px; }

/* ---------- CONTACT FORM SECTION (GHL embed) ---------- */
.elementor-widget-html iframe[src*="leadconnectorhq"] {
  background: #0f0f0f;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  min-height: 620px;
}
/* premium card wrapper around the form's container */
.elementor-element:has(> .elementor-widget-wrap > .elementor-element > iframe[src*="leadconnectorhq"]),
.elementor-widget-html:has(iframe[src*="leadconnectorhq"]) {
  border-radius: 16px;
}

/* ---------- HERO BACKGROUND ---------- */
/* Single static shot: the full-frontal R8. Mobile uses a brightened crop so the
   car stays visible on dark screens. ::before kills Elementor's degenerate veil. */
.elementor-element-4359bca {
  background-image: url("wp-content/uploads/2026/04/wp11044785.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #0a0a0a !important;
}
.elementor-element-4359bca::before { opacity: 0 !important; }
@media (max-width: 767px) {
  .elementor-element-4359bca {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.40) 50%, rgba(0,0,0,.22)),
      url("wp-content/uploads/2026/04/wp11044785-mobile.jpg") !important;
    background-size: cover, cover !important;
    background-position: center, center !important;
  }
}

/* reveal-on-scroll removed: sections render immediately (no slide-up / black break).
   also neutralize Elementor's native entrance animations (fadeInUp etc.) - there is no
   Elementor JS in the clone to clear .elementor-invisible, so force everything visible. */
.elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- TIMED LEAD POPUP ---------- */
.pk-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 8, 8, .72);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.pk-popup-overlay.pk-open { opacity: 1; visibility: visible; }
.pk-popup-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0f0f0f;
  color: #fff;
  border: 1px solid rgba(232, 201, 106, .35);
  border-top: 4px solid var(--pk-gold);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  transform: translateY(18px) scale(.98);
  transition: transform .3s ease;
}
.pk-popup-overlay.pk-open .pk-popup-card { transform: none; }
.pk-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.pk-popup-close:hover { background: var(--pk-gold); color: var(--pk-ink); transform: rotate(90deg); }
.pk-popup-head { padding: 26px 26px 12px; text-align: center; }
.pk-popup-head h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.15;
  color: var(--pk-gold);
  letter-spacing: .2px;
}
.pk-popup-head p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.pk-popup-body { flex: 1; min-height: 0; overflow: hidden; padding: 6px 14px 16px; }
.pk-popup-body iframe { width: 100%; height: 520px; max-height: 60vh; border: none; border-radius: 10px; background: #0f0f0f; }
@media (max-width: 480px) {
  .pk-popup-head { padding: 22px 18px 8px; }
  .pk-popup-head h2 { font-size: 22px; }
  .pk-popup-body iframe { height: 460px; }
}