/* ===================================================================
   CTA button gradients + card hover-scale
   - Some CTA buttons lost their gradient background (showed solid). This
     applies the intended gradient consistently on normal / hover / active
     (classes added by js/cta-fix.js, matched by button text).
   - Disables the subtle scale-on-hover "mouse animation" on cards.
   =================================================================== */

/* Gold "Get a Quote" buttons */
.elementor-button.rf-cta-gold,
.elementor-button.rf-cta-gold:hover,
.elementor-button.rf-cta-gold:focus,
.elementor-button.rf-cta-gold:active {
  background-color: transparent !important;
  background-image: linear-gradient(158deg, #FFC222 0%, #E68328 100%) !important;
}
/* Red "33-RED-EAGLE" buttons */
.elementor-button.rf-cta-red,
.elementor-button.rf-cta-red:hover,
.elementor-button.rf-cta-red:focus,
.elementor-button.rf-cta-red:active {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #F04E30 0%, #F2295B 100%) !important;
}
/* Hover / active feedback for NON-animated CTA buttons only.
   The header/hero "33-RED-EAGLE" and "Get a Quote" buttons use Elementor's
   own elementor-animation-float (translateY(-8px) on hover/active, 0.3s
   ease-out, gradient retained) exactly like the live site. We must NOT
   override transform/transition on those or the native float breaks, so the
   feedback below is scoped to buttons that don't have the float animation. */
.elementor-button.rf-cta-gold:not(.elementor-animation-float),
.elementor-button.rf-cta-red:not(.elementor-animation-float) {
  transition: filter 0.2s ease;
}
.elementor-button.rf-cta-gold:not(.elementor-animation-float):hover,
.elementor-button.rf-cta-red:not(.elementor-animation-float):hover,
.elementor-button.rf-cta-gold:not(.elementor-animation-float):focus,
.elementor-button.rf-cta-red:not(.elementor-animation-float):focus {
  filter: brightness(1.08);
}
.elementor-button.rf-cta-gold:not(.elementor-animation-float):active,
.elementor-button.rf-cta-red:not(.elementor-animation-float):active {
  filter: brightness(0.92);
  transform: translateY(1px);
}

/* 33-RED-EAGLE phone buttons (header widget 8ea36df + the hero #button-hover1)
   match the live site: transparent white-outline by default, filling solid red
   (#C72127) on hover with the native float. The hero additionally swaps its
   label 33-RED-EAGLE -> 337-333-2453 via the page's ::before rule. */
.elementor-element-8ea36df .elementor-button,
#button-hover1.elementor-button {
  background-image: none !important;
  background-color: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s ease-out !important;
}
.elementor-element-8ea36df .elementor-button:hover,
.elementor-element-8ea36df .elementor-button:focus,
#button-hover1.elementor-button:hover,
#button-hover1.elementor-button:focus {
  background-image: none !important;
  background-color: #C72127 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Disable the scale-on-hover mouse animation on cards */
.e-con:hover { --e-con-transform-scale: 1 !important; }

/* Mobile-header "Get a Quote" (5067a9b): its per-element red gradient is
   overridden to none in the static export, leaving white text on a transparent
   button, which is invisible on the white header. Restore the red gradient so
   it reads as a solid button like the live site. */
.elementor-element-5067a9b .elementor-button {
  background-image: linear-gradient(180deg, #F04E30 0%, #F2295B 100%) !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #F04E30 !important;
}

/* Reveal Elementor entrance-animation elements. The static export lacks the
   Elementor frontend JS that strips .elementor-invisible when an element
   scrolls into view, so anything with an entrance animation (e.g. the tablet
   header, which uses slideInDown) stays visibility:hidden forever. Force them
   visible so no content is hidden. */
.elementor-invisible { visibility: visible !important; }

/* ===================================================================
   404 "Page Not Found" content (404.html). Reuses the site header/footer;
   these rules style just the error content block. Brand: red #C7191E,
   gold gradient CTA. No em dashes in copy.
   =================================================================== */
.ref-404 { padding: 150px 20px 110px; text-align: center; background: #ffffff; min-height: 68vh; display: flex; align-items: center; justify-content: center; }
.ref-404-inner { max-width: 760px; margin: 0 auto; font-family: "Poppins", "Roboto", Helvetica, Arial, sans-serif; }
.ref-404-label { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 700; color: #C7191E; margin-bottom: 14px; }
.ref-404 h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 800; margin: 6px 0 16px; color: #141414; line-height: 1.1; }
.ref-404 p { font-size: 17px; line-height: 1.7; color: #555555; max-width: 60ch; margin: 0 auto 34px; }
.ref-404-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ref-404-btn { display: inline-flex; align-items: center; text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 30px; border-radius: 6px; border: 2px solid transparent; transition: filter 0.15s ease, background-color 0.2s ease, color 0.2s ease; }
.ref-404-btn-gold { background-image: linear-gradient(158deg, #FFC222 0%, #E68328 100%); color: #141414; }
.ref-404-btn-gold:hover { filter: brightness(1.06); color: #141414; }
.ref-404-btn-ghost { border-color: #C7191E; color: #C7191E; background: transparent; }
.ref-404-btn-ghost:hover { background: #C7191E; color: #ffffff; }
@media (max-width: 768px) { .ref-404 { padding: 120px 18px 70px; } }