/*
Theme Name:  B2 Motorsports
Theme URI:   https://purplepackracing.com
Description: Child theme for Hello Elementor - B2 Motorsports race car driving school, Huntsville AL.
Author:      LAVACK DESIGN
Author URI:  https://lavackdesign.com
Template:    hello-elementor
Version:     2.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child
*/

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --ppr-purple:        #5B2D8E;
  --ppr-purple-dark:   #3A1A5E;
  --ppr-purple-deep:   #1a0b2e;
  --ppr-purple-light:  #7B4BB8;
  --ppr-black:         #0D0D0D;
  --ppr-off-black:     #131016;
  --ppr-white:         #FFFFFF;
  --ppr-cream:         #FAF7F0;
  --ppr-gray:          #F5F5F5;
  --ppr-gray-mid:      #AAAAAA;
  --ppr-gray-ink:      #3a3440;
  --ppr-accent:        #C0A030;
  --ppr-accent-bright: #E5BF3F;

  --ppr-font-heading:  'Barlow Condensed', sans-serif;
  --ppr-font-body:     'Inter', sans-serif;

  --ppr-radius-xs:     6px;
  --ppr-radius-sm:     12px;
  --ppr-radius-md:     20px;
  --ppr-radius-lg:     32px;
  --ppr-radius-xl:     48px;

  --ppr-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ppr-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ppr-transition:    0.35s var(--ppr-ease);

  /* Fluid typography scale */
  --step-0: clamp(0.95rem, 0.90rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.60rem + 3vw, 4rem);
  --step-5: clamp(3rem,    2rem   + 4.5vw, 6rem);
  --step-6: clamp(4rem,    2.2rem + 7vw, 8.5rem);
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ppr-font-body);
  color: var(--ppr-black);
  background-color: var(--ppr-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01','ss02','kern','liga';
}

/* html bg too — covers the brief moment before body styles apply, and any
   over-scroll bounce on iOS that would otherwise flash white.
   The .elementor-kit-* override is required because the Elementor Kit's
   per-class body rule (e.g. `.elementor-kit-5 { background:#FFF }`) has higher
   specificity than a bare `body { ... }` selector. */
html,
html body,
body.elementor-kit-5,
body[class*="elementor-kit-"] {
  background-color: var(--ppr-black) !important;
}

img {
  max-width: 100%;
  height: auto;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Prevent blur during scale/translate transforms (Safari/Chrome) */
img, .elementor-widget-image img, .elementor-image-gallery img, .elementor-post__thumbnail img {
  transform: translateZ(0);
}

::selection { background: var(--ppr-accent); color: var(--ppr-black); }

/* Custom scrollbar — webkit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ppr-black); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ppr-purple), var(--ppr-purple-dark));
  border-radius: 10px;
  border: 2px solid var(--ppr-black);
}
::-webkit-scrollbar-thumb:hover { background: var(--ppr-accent); }

/* ============================================================
   TYPOGRAPHY — editorial / award-winning
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ppr-font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0;
}

/* Fluid display sizing — hero-caliber type that breaks out of the grid */
h1, .elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--step-6);
  letter-spacing: -0.025em;
  line-height: 0.88;
}
h2, .elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--step-5);
  letter-spacing: -0.02em;
  line-height: 0.92;
}
h3, .elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--step-4);
  letter-spacing: -0.015em;
}
h4 { font-size: var(--step-3); }
h5 { font-size: var(--step-2); }

/* Eyebrow tag — little gold label above headings */
.ppr-eyebrow,
.elementor-widget-heading h6.elementor-heading-title {
  font-family: var(--ppr-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ppr-accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ppr-eyebrow::before,
.elementor-widget-heading h6.elementor-heading-title::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--ppr-accent);
}

/* Body paragraph cadence */
.elementor-widget-text-editor p {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ppr-gray-ink);
}

/* Text-stroke display treatment — add class .ppr-outline to headings */
.ppr-outline {
  -webkit-text-stroke: 1.5px var(--ppr-accent);
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Mixed-weight display line — first word bold, rest outline */
.ppr-mixed > span.outline {
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   BUTTONS — directional fill, animated arrow, magnetic
   ============================================================ */
.elementor-button,
.ppr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ppr-font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 20px 36px !important;
  border-radius: 999px !important;
  border: none;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.5s var(--ppr-ease-out),
              color 0.5s var(--ppr-ease-out),
              box-shadow 0.5s var(--ppr-ease-out);
  cursor: pointer;
  text-decoration: none;
}

/* Directional gold fill — slides in from left on hover */
.elementor-button::before,
.ppr-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--ppr-accent) 0%, var(--ppr-accent-bright) 100%);
  transform: translateX(-101%);
  transition: transform 0.6s var(--ppr-ease-out);
  z-index: -1;
}
.elementor-button:hover::before,
.ppr-btn:hover::before { transform: translateX(0); }

.elementor-button:hover,
.ppr-btn:hover {
  color: var(--ppr-black) !important;
  box-shadow: 0 14px 40px rgba(192,160,48,0.35);
}

/* Primary — solid gold by default for max contrast on dark sections */
.elementor-button.ppr-btn-primary,
.ppr-btn--primary {
  background: linear-gradient(120deg, var(--ppr-accent) 0%, var(--ppr-accent-bright) 100%) !important;
  color: var(--ppr-black) !important;
  box-shadow: 0 10px 30px rgba(192,160,48,0.35);
}

/* On hover the gold stays — just deepen the shadow and lift */
.elementor-button.ppr-btn-primary:hover,
.ppr-btn--primary:hover {
  color: var(--ppr-black) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(192,160,48,0.5);
}

/* Swap the directional fill for primary: gold → purple on hover for variety */
.elementor-button.ppr-btn-primary::before,
.ppr-btn--primary::before {
  background: linear-gradient(120deg, var(--ppr-purple-light) 0%, var(--ppr-purple) 100%);
}
.elementor-button.ppr-btn-primary:hover,
.ppr-btn--primary:hover { color: var(--ppr-white) !important; }

/* Secondary (outline white → gold fill) */
.elementor-button.ppr-btn-secondary,
.ppr-btn--secondary {
  background: transparent !important;
  color: var(--ppr-white) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6);
}

/* Ghost gold (outline gold → filled gold) */
.ppr-btn--ghost {
  background: transparent !important;
  color: var(--ppr-accent) !important;
  box-shadow: inset 0 0 0 1.5px var(--ppr-accent);
}

/* ============================================================
   HOME HERO BUTTONS — maximum contrast against video bg
   Targets heroBtnA (primary) and heroBtnB (secondary) explicitly
   ============================================================ */
/* Kill the attention breathing + pulse rings on hero buttons —
   the button is bright gold already; the cycling glow reads as "fading" */
body .elementor-element.elementor-element-heroBtnA .elementor-button,
body .elementor-element.elementor-element-heroBtnB .elementor-button {
  animation: none !important;
}
body .elementor-element.elementor-element-heroBtnA::before,
body .elementor-element.elementor-element-heroBtnA::after,
body .elementor-element.elementor-element-heroBtnB::before,
body .elementor-element.elementor-element-heroBtnB::after {
  display: none !important;
  animation: none !important;
}

/* Higher specificity (3 classes) so these rules beat .elementor-button.ppr-btn-primary later in the file */
body .elementor-element.elementor-element-heroBtnA .elementor-button {
  background: linear-gradient(135deg, #FFD93D 0%, #FFC107 50%, #E5BF3F 100%) !important;
  background-image: linear-gradient(135deg, #FFD93D 0%, #FFC107 50%, #E5BF3F 100%) !important;
  color: #0D0D0D !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  border: 3px solid #FFE066 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.25),
    0 12px 40px rgba(255,193,7,0.5),
    0 0 80px rgba(255,217,61,0.4) !important;
  filter: brightness(1.08) saturate(1.2) !important;
  opacity: 1 !important;
  position: relative;
  z-index: 5;
}

body .elementor-element.elementor-element-heroBtnB .elementor-button {
  background: rgba(13,13,13,0.65) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  border: 3px solid #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 12px 32px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  opacity: 1 !important;
  position: relative;
  z-index: 5;
}

.elementor-element-heroBtnA .elementor-button:hover {
  background: linear-gradient(135deg, #5B2D8E 0%, #7B4BB8 100%) !important;
  color: #FFFFFF !important;
  border-color: #C0A030 !important;
  transform: translateY(-3px);
}

.elementor-element-heroBtnB .elementor-button:hover {
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  text-shadow: none !important;
  transform: translateY(-3px);
}

/* Hero button container — ensure it sits above overlay */
.elementor-element-heroBtn,
[data-id="heroBtn"] {
  position: relative;
  z-index: 5;
}

/* ============================================================
   HIGH-CONTRAST CTA (for primary action buttons)
   Pulse ring + glow + subtle bounce — cannot be missed
   ============================================================ */
.elementor-widget-button.ppr-cta-attention,
.ppr-cta-attention {
  position: relative;
  display: inline-block;
}

/* The button itself gets an enhanced drop shadow + permanent glow */
.ppr-cta-attention .elementor-button,
.elementor-widget-button.ppr-cta-attention .elementor-button {
  /* Brighter, purer gold gradient — stronger contrast than muted brand gold */
  background: linear-gradient(135deg, #F5CE4D 0%, #E5BF3F 50%, #C0A030 100%) !important;
  color: #0D0D0D !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 0.2em !important;
  padding: 22px 44px !important;
  box-shadow:
    0 0 0 0 rgba(245,206,77,0.9),
    0 14px 40px rgba(245,206,77,0.5),
    0 0 60px rgba(245,206,77,0.35);
  animation: ppr-cta-breathe 2.4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

/* Primary buttons — target by class OR by Elementor element ID (custom css_classes
   don't always render on the wrapper, so we also target the known IDs) */
.elementor-button.ppr-btn-primary,
.ppr-btn--primary,
.elementor-element-heroBtnA .elementor-button,
.elementor-element-ctaBtnA .elementor-button,
.elementor-element-expTB0 .elementor-button,
.elementor-element-expTB1 .elementor-button,
.elementor-element-expTB2 .elementor-button,
.elementor-element-expCGB .elementor-button,
.elementor-element-expCB1 .elementor-button,
.elementor-element-vhCB1 .elementor-button,
.elementor-element-prB0 .elementor-button,
.elementor-element-prB1 .elementor-button,
.elementor-element-prB2 .elementor-button,
.elementor-element-prCB1 .elementor-button,
.elementor-element-cpCB1 .elementor-button,
.elementor-element-gcCB1 .elementor-button,
.elementor-element-fqCB1 .elementor-button,
.elementor-element-tsmCB1 .elementor-button,
.elementor-element-abMBtn1 .elementor-button,
.elementor-element-abCB1 .elementor-button,
.elementor-element-cliffBtn .elementor-button,
.elementor-element-hdrBtn .elementor-button,
.elementor-element-blCtaBtn .elementor-button,
.elementor-element-blSgCtaB .elementor-button {
  background: linear-gradient(135deg, #F5CE4D 0%, #E5BF3F 50%, #C0A030 100%) !important;
  color: #0D0D0D !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 32px rgba(192,160,48,0.4);
}

/* Secondary buttons — by class OR by known ID (phone/call/ghost buttons) */
.elementor-button.ppr-btn-secondary,
.ppr-btn--secondary,
.elementor-element-heroBtnB .elementor-button,
.elementor-element-ctaBtnB .elementor-button,
.elementor-element-abMBtn2 .elementor-button,
.elementor-element-abCB2 .elementor-button,
.elementor-element-expCB2 .elementor-button,
.elementor-element-vhCB2 .elementor-button,
.elementor-element-prCB2 .elementor-button,
.elementor-element-cpCB2 .elementor-button,
.elementor-element-gcCB2 .elementor-button,
.elementor-element-fqCB2 .elementor-button,
.elementor-element-tsmCB2 .elementor-button {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: rgba(13, 13, 13, 0.45) !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.elementor-element-heroBtnB .elementor-button:hover,
.elementor-element-ctaBtnB .elementor-button:hover,
.elementor-element-abMBtn2 .elementor-button:hover,
.elementor-element-abCB2 .elementor-button:hover,
.elementor-element-expCB2 .elementor-button:hover,
.elementor-element-vhCB2 .elementor-button:hover,
.elementor-element-prCB2 .elementor-button:hover,
.elementor-element-cpCB2 .elementor-button:hover,
.elementor-element-gcCB2 .elementor-button:hover,
.elementor-element-fqCB2 .elementor-button:hover,
.elementor-element-tsmCB2 .elementor-button:hover {
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  border-color: #FFFFFF !important;
  text-shadow: none !important;
}

/* Breathing glow on the button (no scale so layout stays clean) */
@keyframes ppr-cta-breathe {
  0%, 100% {
    box-shadow:
      0 14px 40px rgba(192,160,48,0.45),
      0 0 40px rgba(192,160,48,0.25),
      0 0 0 0 rgba(192,160,48,0.6);
  }
  50% {
    box-shadow:
      0 18px 50px rgba(192,160,48,0.65),
      0 0 80px rgba(192,160,48,0.5),
      0 0 0 6px rgba(192,160,48,0.0);
  }
}

/* Dual pulsing rings OUTSIDE the button (absolute positioned via ::before/::after on widget wrapper) */
.elementor-widget-button.ppr-cta-attention::before,
.elementor-widget-button.ppr-cta-attention::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: calc(100% - 16px); height: calc(100% - 8px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid var(--ppr-accent);
  pointer-events: none;
  opacity: 0;
  animation: ppr-cta-pulse-ring 2.6s ease-out infinite;
  z-index: 1;
}
.elementor-widget-button.ppr-cta-attention::after {
  animation-delay: 1.3s;
}
@keyframes ppr-cta-pulse-ring {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.95); }
  70%  { opacity: 0;   transform: translate(-50%,-50%) scale(1.25); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.3); }
}

/* Hover kills breathing — user intent takes over with directional fill */
.ppr-cta-attention .elementor-button:hover {
  animation-play-state: paused;
  color: var(--ppr-white) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 22px 60px rgba(91,45,142,0.5),
    0 0 0 2px var(--ppr-accent) !important;
}

/* The directional fill for attention buttons — purple slides in from left on hover */
.ppr-cta-attention .elementor-button::before {
  background: linear-gradient(120deg, var(--ppr-purple-light) 0%, var(--ppr-purple) 100%) !important;
}

/* ============================================================
   CTA CONTRAST BOOST — all buttons over dark/video backgrounds
   ============================================================ */

/* Every button gets a subtle text-shadow so copy stays crisp over busy video */
.elementor-button {
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Secondary buttons (transparent) — strong white text + real backdrop tint for contrast */
.elementor-button.ppr-btn-secondary,
.ppr-btn--secondary {
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  background: rgba(13, 13, 13, 0.45) !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* Secondary on hover: solid white fill, dark text */
.elementor-button.ppr-btn-secondary:hover,
.ppr-btn--secondary:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0D0D0D !important;
  text-shadow: none !important;
}

/* Override any directional fill on secondary — we want the white flash, not gold */
.elementor-button.ppr-btn-secondary::before,
.ppr-btn--secondary::before {
  display: none;
}

/* All primary CTAs get the contrasting glow even without .ppr-cta-attention */
.elementor-button.ppr-btn-primary {
  box-shadow: 0 12px 32px rgba(192,160,48,0.4);
}

/* ============================================================
   FORCE NO PILL/BORDER ON NORMAL HEADINGS
   Only explicit .ppr-hero-pill or .ppr-badge headings get pill styling
   ============================================================ */
.elementor-widget-heading:not(.ppr-hero-pill):not(.ppr-badge) .elementor-heading-title,
h1.elementor-heading-title:not(.ppr-hero-pill),
h2.elementor-heading-title:not(.ppr-hero-pill),
h3.elementor-heading-title:not(.ppr-hero-pill) {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   CTA SECTION BUTTONS — fully transparent, high-contrast
   ============================================================ */
/* Scope strictly to gradient CTA sections — not expCorp or other light sections */
.ppr-section-gradient .elementor-button {
  background: transparent !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* Primary in gradient CTA sections: gold accent border */
.ppr-section-gradient .elementor-button.ppr-btn-primary,
.ppr-section-gradient .ppr-cta-attention .elementor-button {
  border-color: var(--ppr-accent) !important;
  color: var(--ppr-accent-bright) !important;
  box-shadow: 0 8px 24px rgba(192,160,48,0.3), inset 0 0 0 1px rgba(192,160,48,0.2);
  text-shadow: 0 0 20px rgba(192,160,48,0.4);
}

/* Remove directional fill pseudo in gradient CTAs */
.ppr-section-gradient .elementor-button::before {
  display: none !important;
}

/* Kill the breathing/pulse on CTA-section buttons (user wants animation, not pulse) */
.ppr-section-gradient .elementor-button,
.ppr-section-gradient .ppr-cta-attention {
  animation: none !important;
}
.ppr-section-gradient .elementor-widget-button::before,
.ppr-section-gradient .elementor-widget-button::after {
  display: none !important;
}

/* Hover fills the button cleanly */
.ppr-section-gradient .elementor-button:hover {
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  text-shadow: none !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px);
}
.ppr-section-gradient .elementor-button.ppr-btn-primary:hover,
.ppr-section-gradient .ppr-cta-attention .elementor-button:hover {
  background: var(--ppr-accent) !important;
  color: #0D0D0D !important;
  border-color: var(--ppr-accent) !important;
  box-shadow: 0 12px 32px rgba(192,160,48,0.5);
}

/* ============================================================
   HERO SCARCITY PILL — sits above primary CTA, gold outline glow
   ============================================================ */
.ppr-hero-pill .elementor-heading-title {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid rgba(192,160,48,0.5);
  border-radius: 999px;
  background: rgba(13,13,13,0.35);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow:
    0 0 0 1px rgba(192,160,48,0.1),
    0 8px 24px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: ppr-pill-shimmer 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

@keyframes ppr-pill-shimmer {
  0%, 100% { border-color: rgba(192,160,48,0.5); box-shadow: 0 0 0 1px rgba(192,160,48,0.1), 0 8px 24px rgba(0,0,0,0.2); }
  50%      { border-color: rgba(192,160,48,1);   box-shadow: 0 0 0 1px rgba(192,160,48,0.3), 0 8px 32px rgba(192,160,48,0.3); }
}

/* Tiny shine sweep across the pill */
.ppr-hero-pill .elementor-heading-title::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(192,160,48,0.3) 50%, transparent 100%);
  animation: ppr-pill-sweep 4s ease-in-out infinite;
}
@keyframes ppr-pill-sweep {
  0%   { left: -100%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}

/* Arrow tail — use .ppr-btn--arrow class, trailing arrow slides on hover */
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon i {
  transition: transform 0.4s var(--ppr-ease-out);
}
.elementor-button:hover .elementor-button-icon svg,
.elementor-button:hover .elementor-button-icon i {
  transform: translateX(6px);
}

/* ============================================================
   ELEMENTOR CONTAINER RHYTHM — kill the block look
   ============================================================ */

/* All containers get softer radius and generous padding by default */
.e-con.e-parent {
  position: relative;
}

/* Section breathing room — generous vertical space */
.e-con.e-parent[data-element_type="container"] {
  /* Elementor handles padding per-section; this is a baseline safety net */
}

/* Only SPECIFIC card classes get rounding — never wrap bare text in a pill */
.ppr-card,
.e-con.ppr-hover-lift,
[data-id="expC0"].e-con,
[data-id="expC1"].e-con,
[data-id="expC2"].e-con,
[data-id="procS0"].e-con,
[data-id="procS1"].e-con,
[data-id="procS2"].e-con,
[data-id="procS3"].e-con {
  border-radius: var(--ppr-radius-md);
}

/* ============================================================
   SECTION UTILITIES (apply via Elementor CSS classes)
   ============================================================ */

.ppr-section-dark {
  background-color: var(--ppr-off-black);
  color: var(--ppr-white);
  position: relative;
}

/* Subtle diagonal scan lines on dark sections — texture, not pattern */
.ppr-section-dark::before,
.ppr-section-gradient::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 60px,
    rgba(192,160,48,0.015) 60px,
    rgba(192,160,48,0.015) 61px
  );
  pointer-events: none;
  z-index: 1;
}
.ppr-section-dark > *, .ppr-section-gradient > * { position: relative; z-index: 2; }

.ppr-section-purple {
  background: radial-gradient(ellipse at center, var(--ppr-purple-deep) 0%, var(--ppr-black) 100%);
  color: var(--ppr-white);
  position: relative;
  overflow: hidden;
}

/* Gradient aurora — used behind premium sections */
.ppr-section-gradient,
.ppr-bg-gradient {
  background:
    radial-gradient(ellipse 60% 80% at 20% 30%, rgba(91,45,142,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 70%, rgba(192,160,48,0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--ppr-purple-deep) 0%, var(--ppr-black) 100%) !important;
  color: var(--ppr-white);
  position: relative;
  overflow: hidden;
}

.ppr-section-cream {
  background-color: var(--ppr-cream);
  color: var(--ppr-black);
}

.ppr-section-gray {
  background-color: var(--ppr-gray);
  color: var(--ppr-black);
}

/* ============================================================
   DIAGONAL SECTION DIVIDERS — kill the flat horizontal edges
   ============================================================ */

/* Angled bottom edge on dark sections — slope down-right */
.ppr-slope-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
  margin-bottom: -80px;
  padding-bottom: calc(5rem + 80px) !important;
}

/* Angled top edge — slope continues from above */
.ppr-slope-top {
  clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%);
  margin-top: -80px;
  padding-top: calc(5rem + 80px) !important;
}

/* Both angled — full rhombus */
.ppr-slope-both {
  clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 calc(100% - 60px));
}

/* Curved bottom edge using SVG mask (JS adds wrapper) — fallback using radius */
.ppr-curve-bottom {
  border-bottom-left-radius: 50% 80px;
  border-bottom-right-radius: 50% 80px;
  overflow: hidden;
}

/* ============================================================
   HERO — cinematic type, overlay, scroll hint sits clean
   ============================================================ */

.ppr-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(91,45,142,0.45) 0%, transparent 50%),
    linear-gradient(160deg, rgba(26,11,46,0.6) 0%, rgba(13,13,13,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.ppr-hero-overlay .elementor-container,
.ppr-hero-overlay > * { position: relative; z-index: 2; }

/* Hero headline — oversized, cascading */
[data-id*="heroHdl"] .elementor-heading-title,
.ppr-hero-title {
  font-size: clamp(3.5rem, 9vw, 9rem) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.85 !important;
  font-weight: 800 !important;
}

/* ============================================================
   EXPERIENCE CARDS — asymmetric, image-overflow, editorial
   ============================================================ */

/* Experience cards — ONLY targets the three experience card containers, never widgets */
[data-id="expC0"].e-con,
[data-id="expC1"].e-con,
[data-id="expC2"].e-con,
.elementor-element-expC0.e-con,
.elementor-element-expC1.e-con,
.elementor-element-expC2.e-con {
  border-radius: var(--ppr-radius-lg) !important;
  overflow: hidden !important;
  animation: ppr-card-float 6s ease-in-out infinite;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

@keyframes ppr-card-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
  50%      { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(91,45,142,0.2); }
}

/* Stagger the float timing so cards don't all move together */
[data-id="expC0"].e-con { animation-delay: 0s; }
[data-id="expC1"].e-con { animation-delay: -2s; }
[data-id="expC2"].e-con { animation-delay: -4s; }

/* Card images breathe slowly — only inside actual experience card containers */
[data-id="expC0"].e-con > img,
[data-id="expC1"].e-con > img,
[data-id="expC2"].e-con > img {
  animation: ppr-img-breathe 8s ease-in-out infinite;
  filter: saturate(1);
}
@keyframes ppr-img-breathe {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  50%      { transform: scale(1.03); filter: saturate(1.08); }
}

/* ============================================================
   CARDS — general ppr-card polish
   ============================================================ */
.ppr-card {
  background: var(--ppr-white);
  border-radius: var(--ppr-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.5s var(--ppr-ease-out), box-shadow 0.5s var(--ppr-ease-out);
  position: relative;
}

.ppr-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  background: radial-gradient(circle at top right, rgba(192,160,48,0.15), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Continuous subtle breath animation instead of hover-only lift */
.ppr-card {
  animation: ppr-card-breath 7s ease-in-out infinite;
}
@keyframes ppr-card-breath {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
  50%      { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(91,45,142,0.12); }
}

/* ============================================================
   HERO TEXT ANIMATIONS — continuous subtle motion, no rollover needed
   ============================================================ */

/* Hero headline gets a slow breathing glow + tracking shift */
[data-id*="heroHdl"] .elementor-heading-title,
[data-id*="abHHd"] .elementor-heading-title,
[data-id*="expHd"] .elementor-heading-title,
[data-id*="vhHHd"] .elementor-heading-title,
[data-id*="prHd"] .elementor-heading-title,
.ppr-hero-title {
  animation: ppr-hero-breathe 5s ease-in-out infinite;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}

@keyframes ppr-hero-breathe {
  0%, 100% {
    text-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 0 0 rgba(192,160,48,0);
    transform: translateY(0);
  }
  50% {
    text-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 0 60px rgba(192,160,48,0.15);
    transform: translateY(-2px);
  }
}

/* Hero eyebrow gets a horizontal shimmer */
[data-id*="heroTag"] .elementor-heading-title,
[data-id*="abHEye"] .elementor-heading-title,
[data-id*="expTag"] .elementor-heading-title {
  background: linear-gradient(90deg, var(--ppr-accent) 0%, #F5CE4D 50%, var(--ppr-accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ppr-eyebrow-shimmer 4s ease-in-out infinite;
}
@keyframes ppr-eyebrow-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Hero sub-copy softly fades in via continuous waver (very subtle) */
[data-id*="heroSub"] p,
[data-id*="abHSub"] p {
  animation: ppr-sub-waver 8s ease-in-out infinite;
}
@keyframes ppr-sub-waver {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [class*="expC"].e-con,
  .ppr-card,
  [data-id*="expC"] img,
  [class*="expC"].e-con > img,
  [data-id*="heroHdl"] .elementor-heading-title,
  [data-id*="heroTag"] .elementor-heading-title {
    animation: none !important;
  }
}

/* ============================================================
   STATS / COUNTERS — editorial scale
   ============================================================ */
.elementor-counter-number-wrapper {
  font-family: var(--ppr-font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(4rem, 8vw, 8rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  color: var(--ppr-accent) !important;
  font-variant-numeric: tabular-nums !important;
}

.elementor-counter-title {
  font-family: var(--ppr-font-heading) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(192,160,48,0.3);
  display: inline-block !important;
}

/* ============================================================
   PROCESS STEPS — big numbered cards, offset alignment
   ============================================================ */

/* Big outlined number on each step card — only the 4 step cards, not the parent procSec */
[data-id="procS0"] .elementor-widget-heading:first-child .elementor-heading-title,
[data-id="procS1"] .elementor-widget-heading:first-child .elementor-heading-title,
[data-id="procS2"] .elementor-widget-heading:first-child .elementor-heading-title,
[data-id="procS3"] .elementor-widget-heading:first-child .elementor-heading-title {
  font-size: clamp(4rem, 7vw, 7rem) !important;
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--ppr-accent) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  opacity: 0.85;
}

/* Step cards (procS0-3 only, NOT the parent procSec) get rounded card styling */
[data-id="procS0"].e-con,
[data-id="procS1"].e-con,
[data-id="procS2"].e-con,
[data-id="procS3"].e-con {
  border-radius: var(--ppr-radius-md) !important;
  padding: 32px 28px !important;
  border: 1px solid rgba(192,160,48,0.15);
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
  transition: all 0.5s var(--ppr-ease-out) !important;
}

[data-id="procS0"].e-con:hover,
[data-id="procS1"].e-con:hover,
[data-id="procS2"].e-con:hover,
[data-id="procS3"].e-con:hover {
  border-color: var(--ppr-accent);
  background: rgba(91,45,142,0.08);
  transform: translateY(-4px);
}

/* ============================================================
   PHOTO GALLERY — masonry-style asymmetric heights
   ============================================================ */
.elementor-element-galSec .elementor-image-gallery {
  /* Keep grid, but asymmetric heights via CSS */
}

.elementor-element-galSec .elementor-image-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ppr-radius-md);
  position: relative;
}

.elementor-element-galSec .elementor-image-gallery figure::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,13,13,0.6) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.elementor-element-galSec .elementor-image-gallery figure:hover::after { opacity: 1; }

.elementor-element-galSec .elementor-image-gallery figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  transition: transform 0.6s var(--ppr-ease-out), filter 0.5s ease;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.elementor-element-galSec .elementor-image-gallery figure:hover img {
  transform: scale(1.06) translateZ(0);
}

/* Kill caption text under gallery images (Elementor renders figcaption with image title) */
.elementor-element-galSec .elementor-image-gallery figcaption,
.elementor-element-galSec .elementor-image-gallery .gallery-caption,
.elementor-element-galSec .gallery-item .wp-caption-text {
  display: none !important;
}

/* Uniform aspect ratio keeps images sharp and the grid clean */
.elementor-element-galSec .elementor-image-gallery figure {
  aspect-ratio: 4 / 3;
}

/* ============================================================
   BLOG CARDS — premium editorial
   ============================================================ */
.elementor-posts--skin-classic .elementor-post {
  border-radius: var(--ppr-radius-md) !important;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform 0.4s var(--ppr-ease-out), box-shadow 0.4s ease !important;
  background: var(--ppr-white);
}

.elementor-posts--skin-classic .elementor-post:hover {
  transform: translateY(-8px) translateZ(0) !important;
  box-shadow: 0 30px 70px rgba(91, 45, 142, 0.22) !important;
}

.elementor-posts--skin-classic .elementor-post__thumbnail {
  padding: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 10;
}

.elementor-posts--skin-classic .elementor-post__thumbnail::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,13,13,0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

.elementor-posts--skin-classic .elementor-post__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.7s var(--ppr-ease-out);
  will-change: transform;
}

/* Hide any caption/figure text that leaks into blog card thumbnails */
.elementor-posts--skin-classic .elementor-post__thumbnail figcaption,
.elementor-posts--skin-classic .wp-caption-text,
.elementor-posts--skin-classic .elementor-post__thumbnail .gallery-caption {
  display: none !important;
}

.elementor-posts--skin-classic .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.08) translateZ(0);
}

.elementor-posts--skin-classic .elementor-post__text {
  padding: 28px 28px 32px !important;
  position: relative;
}

/* Accent rule above title */
.elementor-posts--skin-classic .elementor-post__meta-data::before {
  content: '';
  display: block;
  width: 40px; height: 2px;
  background: var(--ppr-accent);
  margin-bottom: 16px;
}

/* ============================================================
   FORMS (Contact) — softer, premium inputs
   ============================================================ */
.elementor-field-group input[type="text"],
.elementor-field-group input[type="email"],
.elementor-field-group input[type="tel"],
.elementor-field-group textarea,
.elementor-field-group select {
  border: none !important;
  border-bottom: 1.5px solid rgba(13,13,13,0.15) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 16px 4px !important;
  font-family: var(--ppr-font-body) !important;
  font-size: 16px !important;
  transition: border-color 0.3s ease;
}

.elementor-field-group input:focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
  outline: none !important;
  border-color: var(--ppr-accent) !important;
  box-shadow: 0 1px 0 0 var(--ppr-accent);
}

.elementor-field-group label {
  font-family: var(--ppr-font-heading) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ppr-gray-ink) !important;
  margin-bottom: 8px !important;
}

/* ============================================================
   DECORATIVE: ORGANIC BLOBS + DOT GRID
   ============================================================ */

/* Gold dot grid decoration — drop into any section */
.ppr-dot-grid {
  position: absolute;
  width: 180px; height: 180px;
  background-image: radial-gradient(circle, var(--ppr-accent) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* Organic blob — soft purple glow, can be absolutely positioned */
.ppr-blob {
  position: absolute;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(91,45,142,0.4) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  animation: ppr-blob-float 20s ease-in-out infinite;
}

@keyframes ppr-blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -40px) scale(1.08); }
  66%      { transform: translate(-25px, 30px) scale(0.95); }
}

/* Vertical gold accent line — use as section side accent */
.ppr-accent-line::before {
  content: '';
  position: absolute;
  left: 32px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ppr-accent) 30%, var(--ppr-accent) 70%, transparent);
  opacity: 0.4;
  z-index: 1;
}

/* ============================================================
   IMAGES — image treatments
   ============================================================ */

/* Premium image wrapper — large radius, soft shadow */
.ppr-img-card {
  border-radius: var(--ppr-radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(192,160,48,0.15);
}

/* Tilted image — for editorial offset (use sparingly) */
.ppr-img-tilt-l { transform: rotate(-2deg); }
.ppr-img-tilt-r { transform: rotate(2deg); }
.ppr-img-tilt-l:hover, .ppr-img-tilt-r:hover { transform: rotate(0); }
.ppr-img-tilt-l, .ppr-img-tilt-r { transition: transform 0.6s var(--ppr-ease-out); }

/* Full-bleed image with ratio — kills square boxes */
.ppr-img-portrait { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.ppr-img-landscape { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ppr-img-cinema { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }

/* ============================================================
   CLIFF / BIO SECTION — image overflows into text column
   ============================================================ */
[data-id*="cliffImg"] img,
[class*="cliffImg"] img {
  border-radius: var(--ppr-radius-lg) !important;
  box-shadow: 0 40px 80px rgba(91,45,142,0.18);
}

@media (min-width: 1024px) {
  /* Image overflows up/out of column to break the grid */
  [data-id*="cliffImg"],
  [class*="cliffImg"] {
    margin-top: -40px;
  }
}

/* ============================================================
   CTA SECTIONS — full-bleed, no rounded corners (clean edge-to-edge)
   ============================================================ */
[data-id="ctaSec"],
.elementor-element-ctaSec {
  border-radius: 0 !important;
  overflow: hidden;
  position: relative;
}

[data-id="ctaSec"]::before,
.elementor-element-ctaSec::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(91,45,142,0.5) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(192,160,48,0.25) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

[data-id="ctaSec"] > *,
.elementor-element-ctaSec > * { position: relative; z-index: 2; }

/* ============================================================
   FOOTER POLISH
   ============================================================ */
.elementor-location-footer {
  background: radial-gradient(ellipse at center, var(--ppr-purple-deep) 0%, var(--ppr-black) 100%);
}

/* ============================================================
   ICON LIST — premium tick rows
   ============================================================ */
.elementor-icon-list-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(192,160,48,0.15);
  transition: transform 0.3s var(--ppr-ease-out), border-color 0.3s ease;
}

.elementor-icon-list-item:hover {
  transform: translateX(8px);
  border-color: var(--ppr-accent);
}

.elementor-icon-list-item:last-child { border-bottom: none; }

/* ============================================================
   MEDIA QUERIES — tighter mobile rhythm
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --ppr-radius-lg: 20px;
    --ppr-radius-xl: 28px;
  }

  /* Disable clip-path on mobile — reads as broken */
  .ppr-slope-bottom, .ppr-slope-top, .ppr-slope-both {
    clip-path: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Experience cards don't stagger on mobile */
  [data-id*="expGrid"] > .e-con,
  [class*="expGrid"] > .e-con {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .elementor-button,
  .ppr-btn {
    padding: 16px 28px !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
  }

  /* CTA stays full-bleed on mobile too */
  [data-id="ctaSec"],
  .elementor-element-ctaSec {
    border-radius: 0 !important;
  }
}

/* ============================================================
   FIX 1 — HERO CTA: top z-index so buttons never read as faded
   over video / overlay. Bumping the buttons above any overlay
   pseudo-element (.ppr-hero-overlay::before is z-index:1).
   ============================================================ */
body .elementor-element.elementor-element-heroBtn,
body [data-id="heroBtn"],
body .elementor-element.elementor-element-heroBtnA,
body .elementor-element.elementor-element-heroBtnB,
body .elementor-element.elementor-element-heroBtnA .elementor-button,
body .elementor-element.elementor-element-heroBtnB .elementor-button {
  position: relative !important;
  z-index: 50 !important;
}

/* ============================================================
   FIX 2 — SPEED-STRIP: zero spacing so it sits flush
   between sections. The Elementor HTML widget inherits the
   global --widgets-spacing (20px) which creates the white gap.
   ============================================================ */
.elementor-widget:has(> .elementor-widget-container > .ppr-speed-strip),
.elementor-widget-html:has(.ppr-speed-strip) {
  margin: 0 !important;
  padding: 0 !important;
  --widgets-spacing: 0 !important;
}
.elementor-widget:has(> .elementor-widget-container > .ppr-speed-strip) > .elementor-widget-container,
.elementor-widget-html:has(.ppr-speed-strip) > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
.ppr-speed-strip {
  display: block;
  margin: 0;
  padding: 0;
}

/* ============================================================
   FIX 3 — BLOG POST CARDS: crisp images + cleaner rollover.
   Images were rendering blurry due to subpixel scale interpolation
   on the 1.06 hover scale; replace with overlay-style hover that
   keeps the image at its native pixel grid.
   ============================================================ */
.elementor-posts .elementor-post__thumbnail {
  position: relative;
  overflow: hidden;
  background: #0D0D0D;
}
/* Elementor uses a `padding-bottom: 66%` aspect-ratio trick on the thumbnail
   container. For an <img> to actually fill that container it must be absolutely
   positioned — otherwise it just renders at its intrinsic width × height in
   normal flow, which is what was happening (300×169 image floating in a
   600×400 black container). */
.elementor-posts .elementor-post__thumbnail img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center center;
  image-rendering: -webkit-optimize-contrast;
  transform: none !important;
  transition: transform 0.5s var(--ppr-ease-out, cubic-bezier(0.2,1,0.3,1));
}
.elementor-posts .elementor-post__thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(91,45,142,0) 100%);
  transition: background 0.4s ease;
  pointer-events: none;
}
.elementor-posts .elementor-post:hover .elementor-post__thumbnail::after {
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(91,45,142,0.35) 100%);
}
.elementor-posts .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.04) !important;
}

/* ============================================================
   FIX 4 — ARTICLE META: hide name/date/time post-info items.
   The post-info widget on single-post template is configured for
   "terms" only but Elementor 4.x is rendering its default repeater
   (author/date/time). Until the widget repeater is properly
   re-saved, hide those item types directly. Categories ("terms")
   stay visible if rendered.
   ============================================================ */
body.single-post .elementor-post-info__item--type-author,
body.single-post .elementor-post-info__item--type-date,
body.single-post .elementor-post-info__item--type-time,
body.single-post .elementor-post-info__item--type-comments {
  display: none !important;
}
/* Hide the parent <li> when its only post-info child is author/date/time.
   :has() is supported in all current evergreen browsers. */
body.single-post .elementor-post-info > li:has(.elementor-post-info__item--type-author):not(:has(.elementor-post-info__item--type-terms)),
body.single-post .elementor-post-info > li:has(.elementor-post-info__item--type-date):not(:has(.elementor-post-info__item--type-terms)),
body.single-post .elementor-post-info > li:has(.elementor-post-info__item--type-time):not(:has(.elementor-post-info__item--type-terms)) {
  display: none !important;
}

/* ============================================================
   HERO VIDEO UNMUTE BUTTON (home only)
   Positioned bottom-right of hero so it never fights with
   the headline / CTAs. Becomes filled gold when sound is on.
   ============================================================ */
.ppr-hero-unmute {
  position: absolute;
  /* Sit just below the fixed header (~80px) so it's immediately visible
     above the fold without overlapping the headline / CTAs. */
  right: 24px;
  top: 100px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  background: rgba(13, 13, 13, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
          backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.ppr-hero-unmute:hover {
  background: rgba(13, 13, 13, 0.75);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
.ppr-hero-unmute.is-on {
  background: var(--ppr-accent, #C0A030);
  border-color: var(--ppr-accent-bright, #FFD60A);
  color: #0D0D0D;
  box-shadow: 0 8px 24px rgba(192, 160, 48, 0.45);
}
.ppr-hero-unmute__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .ppr-hero-unmute {
    right: 16px;
    top: 80px;
    padding: 8px 14px 8px 12px;
    font-size: 11px;
  }
}

/* ============================================================
   FLEET GALLERY (Vehicles page) — uniform card heights so a
   landscape image among portraits doesn't blow out the grid.
   Images fill the card; captions removed so no gap below.
   Targeting by element ID because Elementor 4.x renders the image
   widget without an inner `.elementor-widget-container` wrapper —
   the figure is a direct child of the widget div.
   ============================================================ */
.elementor-element-vhFi1,
.elementor-element-vhFi2,
.elementor-element-vhFi3,
.elementor-element-vhFi4 {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  display: block;
  line-height: 0; /* kills the inline-baseline gap below the figure */
}
.elementor-element-vhFi1 figure,
.elementor-element-vhFi2 figure,
.elementor-element-vhFi3 figure,
.elementor-element-vhFi4 figure,
.elementor-element-vhFi1 figure.wp-caption,
.elementor-element-vhFi2 figure.wp-caption,
.elementor-element-vhFi3 figure.wp-caption,
.elementor-element-vhFi4 figure.wp-caption {
  margin: 0 !important;
  /* Logical-property override — Hello Elementor's theme.css sets
     `.wp-caption { margin-block-end: 1.25rem }` which `margin: 0` SHOULD
     reset, but some browsers leave the logical-property shadow uncleared. */
  margin-block-end: 0 !important;
  margin-block-start: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  padding: 0 !important;
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
}
.elementor-element-vhFi1 img,
.elementor-element-vhFi2 img,
.elementor-element-vhFi3 img,
.elementor-element-vhFi4 img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center center;
  margin: 0 !important;
}
.elementor-element-vhFi1 figcaption,
.elementor-element-vhFi2 figcaption,
.elementor-element-vhFi3 figcaption,
.elementor-element-vhFi4 figcaption,
.elementor-element-vhFi1 .widget-image-caption,
.elementor-element-vhFi2 .widget-image-caption,
.elementor-element-vhFi3 .widget-image-caption,
.elementor-element-vhFi4 .widget-image-caption {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* Fleet 2×2 grid math: with `gap: 24px` between columns, two `width: 50%`
   items add up to 100% + the gap, forcing a wrap. Use calc() to subtract
   half the gap from each column so they actually fit two-up. Mobile keeps
   100% (single column) so no calc needed there. */
@media (min-width: 768px) {
  .elementor-element-vhFc1,
  .elementor-element-vhFc2,
  .elementor-element-vhFc3,
  .elementor-element-vhFc4 {
    --width: calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
  }
}

/* ============================================================
   TRACK DAY GALLERY (Home page) — uniform square cells so portrait
   + landscape mix doesn't leave grid holes. Each cell crops via
   object-fit cover; no captions.
   ============================================================ */
.elementor-element-galWidget .gallery-item,
.elementor-element-galWidget .elementor-image-gallery .gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
.elementor-element-galWidget img,
.elementor-element-galWidget .gallery-item img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
}
.elementor-element-galWidget .gallery-caption,
.elementor-element-galWidget figcaption {
  display: none !important;
}
/* Mobile: 2 columns instead of default Elementor breakpoint */
@media (max-width: 600px) {
  .elementor-element-galWidget .gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

/* ============================================================
   NON-ELEMENTOR PAGES (Gutenberg / theme template fallback)
   The body bg is now black (set above), so any page that doesn't
   draw its own background — Privacy Policy, default WP pages,
   404, search, etc. — needs light-on-dark text + a top offset
   so the fixed header doesn't cover the title. Scoped to bodies
   that DON'T have an Elementor page-render container, so we
   don't fight against pages that style their own sections.
   ============================================================ */
body:not(.elementor-page) main,
body:not(.elementor-page) .page-content,
body:not(.elementor-page) .site-main {
  max-width: 800px;
  margin: 0 auto;
  padding: 140px 24px 100px;
  color: #E5E5E5;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
body:not(.elementor-page) .page-header {
  padding: 0 24px;
  max-width: 800px;
  margin: 0 auto 32px;
}
body:not(.elementor-page) .entry-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}
body:not(.elementor-page) h1,
body:not(.elementor-page) h2,
body:not(.elementor-page) h3,
body:not(.elementor-page) h4,
body:not(.elementor-page) h5,
body:not(.elementor-page) h6 {
  font-family: 'Barlow Condensed', sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2rem 0 1rem;
}
body:not(.elementor-page) h2 { font-size: 1.75rem; color: var(--ppr-accent, #C0A030); }
body:not(.elementor-page) h3 { font-size: 1.4rem; }
body:not(.elementor-page) p,
body:not(.elementor-page) ul,
body:not(.elementor-page) ol {
  margin: 0 0 1.2em;
  color: #D5D5D5;
}
body:not(.elementor-page) a {
  color: var(--ppr-accent-bright, #FFD60A);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body:not(.elementor-page) a:hover {
  color: #FFFFFF;
}
body:not(.elementor-page) strong {
  color: #FFFFFF;
}
/* Suppressed "Suggested text:" label that WP ships in the boilerplate privacy
   policy — clutter on a real site. */
body:not(.elementor-page) .privacy-policy-tutorial {
  display: none !important;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .ppr-grain, .ppr-cursor, .ppr-progress, .ppr-loader { display: none !important; }
}