/* ===================================================
   VIZCAYA VOLTS — Global Styles
   =================================================== */

:root {
  --dark-card-border: rgba(255, 255, 255, 0.06);
}* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}

ul {
  list-style: none;
}

@keyframes neonFlickerPink {
  0% { opacity: 0; text-shadow: none; }
  10% { opacity: 0.8; text-shadow: 0 0 10px var(--wp--preset--color--pink-overlay), 0 0 30px var(--wp--preset--color--pink-muted); }
  12% { opacity: 0.2; text-shadow: none; }
  14% { opacity: 0.9; text-shadow: 0 0 10px var(--wp--preset--color--pink-overlay), 0 0 30px var(--wp--preset--color--pink-muted); }
  16% { opacity: 0.3; text-shadow: none; }
  20% { opacity: 1; text-shadow: 0 0 10px var(--wp--preset--color--pink-overlay), 0 0 30px var(--wp--preset--color--pink-muted), 0 0 60px var(--wp--preset--color--pink-subtle), 0 0 120px var(--wp--preset--color--pink-faint); }
  100% { opacity: 1; text-shadow: 0 0 10px var(--wp--preset--color--pink-overlay), 0 0 30px var(--wp--preset--color--pink-muted), 0 0 60px var(--wp--preset--color--pink-subtle), 0 0 120px var(--wp--preset--color--pink-faint); }
}

@keyframes neonFlickerCyan {
  0% { opacity: 0; text-shadow: none; }
  8% { opacity: 0.6; text-shadow: 0 0 10px var(--wp--preset--color--cyan-overlay); }
  11% { opacity: 0.1; text-shadow: none; }
  18% { opacity: 0.85; text-shadow: 0 0 10px var(--wp--preset--color--cyan-overlay), 0 0 30px var(--wp--preset--color--cyan-muted); }
  22% { opacity: 0.15; text-shadow: none; }
  30% { opacity: 1; text-shadow: 0 0 10px var(--wp--preset--color--cyan-overlay), 0 0 30px var(--wp--preset--color--cyan-muted), 0 0 60px var(--wp--preset--color--cyan-subtle), 0 0 120px var(--wp--preset--color--cyan-faint); }
  100% { opacity: 1; text-shadow: 0 0 10px var(--wp--preset--color--cyan-overlay), 0 0 30px var(--wp--preset--color--cyan-muted), 0 0 60px var(--wp--preset--color--cyan-subtle), 0 0 120px var(--wp--preset--color--cyan-faint); }
}

@keyframes surgeLine {
  0% { transform: scaleX(0); transform-origin: left; opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes gridFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes barLoad {
  0% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(204,255,0,0.4), 0 0 40px rgba(204,255,0,0.15); }
  50% { box-shadow: 0 0 25px rgba(204,255,0,0.6), 0 0 60px rgba(204,255,0,0.25), 0 0 100px rgba(204,255,0,0.1); }
}

.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

.js .animate-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(30px);
}

.js .animate-on-scroll {
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .animate-on-scroll:nth-child(2) { transition-delay: 0.12s; }
.js .animate-on-scroll:nth-child(3) { transition-delay: 0.24s; }
.js .animate-on-scroll:nth-child(4) { transition-delay: 0.36s; }
.js .animate-on-scroll:nth-child(5) { transition-delay: 0.48s; }

.section-label {
  display: inline-block;
  font-family: 'Audiowide', sans-serif;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--wp--preset--spacing--30);
}

.section-label--pink {
  color: var(--wp--preset--color--accent-1);
  text-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
}

.section-label--cyan {
  color: var(--wp--preset--color--accent-2);
  text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.section-label--green {
  color: var(--wp--preset--color--accent-3);
  text-shadow: 0 0 10px rgba(204, 255, 0, 0.5);
}

/* WordPress Admin Bar Offsets
   -------------------------------------------------------------------------- */
body.admin-bar .site-nav,
.admin-bar .nav,
.admin-bar [class*="nav"][style*="position: fixed"],
.admin-bar [class*="header"][style*="position: fixed"] {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-nav,
  .admin-bar .nav,
  .admin-bar [class*="nav"][style*="position: fixed"],
  .admin-bar [class*="header"][style*="position: fixed"] {
    top: 46px !important;
  }
}

/* Pull the fly-out overlay down too so it doesn't cover the admin bar */
body.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
  height: calc(100dvh - 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
    height: calc(100dvh - 46px) !important;
  }
}

/* Navigation — Parent-level rules (can't scope to nav block)
   -------------------------------------------------------------------------- */
.wp-block-template-part:has(.wp-block-navigation .is-menu-open),
header:has(.wp-block-navigation .is-menu-open) {
  z-index: 100001;
  position: relative;
}

header.wp-block-template-part:has(.is-position-sticky),
header.wp-block-template-part:has([style*="position:sticky"]),
header.wp-block-template-part:has([style*="position: sticky"]) {
  display: contents;
}

footer.wp-block-template-part,
footer.wp-block-template-part > .wp-block-group {
  position: relative;
  z-index: 1;
}

[class*="site-footer"],
[class*="footer-section"] {
  margin-block-start: 0 !important;
}

/* Header Scroll Behavior
   -------------------------------------------------------------------------- */
.miles-header-transparent-until-scroll {
  transition: background-color 0.3s ease;
  z-index: 100 !important;
  &:not(.is-scrolled) {
    background-color: transparent !important;
  }

  &:not(.is-scrolled) > * {
    background-color: transparent !important;
  }
}

/* ===================================================
   MOBILE NAVIGATION — Hamburger at <=1200px
   Fly-out overlay with horizontal-rule separators
   =================================================== */

@media (max-width: 1200px) {
  .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .site-nav .wp-block-navigation__responsive-container:not(.has-modal-open):not(.is-menu-open) {
    display: none !important;
  }
  .site-nav .wp-block-buttons:not(.nav-flyout-cta),
  .site-nav .nav-location {
    display: none !important;
  }
}

.site-nav .wp-block-navigation__responsive-container-open {
  padding: 0.5rem;
  color: var(--wp--preset--color--contrast);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.site-nav .wp-block-navigation__responsive-container-open:hover,
.site-nav .wp-block-navigation__responsive-container-open:focus {
  color: var(--wp--preset--color--accent-1);
  text-shadow: 0 0 12px rgba(255, 20, 147, 0.6);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(6, 4, 9, 0.98) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-nav .wp-block-navigation__responsive-container-close {
  padding: 1.25rem !important;
  color: var(--wp--preset--color--contrast);
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

.site-nav .wp-block-navigation__responsive-container-close:hover {
  color: var(--wp--preset--color--accent-1);
  text-shadow: 0 0 14px rgba(255, 20, 147, 0.7);
  transform: rotate(90deg);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  gap: 0 !important;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  text-align: center;
  opacity: 0;
  animation: fadeSlideUp 0.5s ease forwards;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 20, 147, 0.35) 35%,
    rgba(0, 191, 255, 0.35) 65%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.08s; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.16s; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.24s; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.32s; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.40s; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.48s; }

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: 'Audiowide', sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast);
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
  color: var(--wp--preset--color--accent-2);
  text-shadow: 0 0 14px rgba(0, 191, 255, 0.6);
  transform: translateY(-2px);
}

body:has(.site-nav .wp-block-navigation__responsive-container.is-menu-open) {
  overflow: hidden;
}

/* ===================================================
   DESKTOP NAVIGATION — Pink to Cyan underline sweep
   =================================================== */
@media (min-width: 1201px) {
  .site-nav .wp-block-navigation-item__content {
    position: relative;
    padding-bottom: 4px;
  }
  .site-nav .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: linear-gradient(90deg,
      var(--wp--preset--color--accent-1) 0%,
      var(--wp--preset--color--accent-2) 100%
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    box-shadow: 0 0 8px rgba(255, 20, 147, 0.4);
  }
  .site-nav .wp-block-navigation-item__content:hover::after,
  .site-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
    transform: scaleX(1);
  }
}

/* ===================================================
   CTA BUTTON — Idle neon pulse at rest
   =================================================== */
@keyframes navCtaIdlePulse {
  0%, 100% { box-shadow: 0 0 12px rgba(204, 255, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.5), 0 0 40px rgba(204, 255, 0, 0.15); }
}

.site-nav .nav-cta .wp-block-button__link {
  animation: navCtaIdlePulse 3.5s ease-in-out infinite;
}

/* ===================================================
   HERO SCANLINE — Subtle VHS sweep
   =================================================== */
@keyframes heroScanline {
  0% { transform: translateY(-20px); opacity: 0; }
  8% { opacity: 0.18; }
  92% { opacity: 0.18; }
  100% { transform: translateY(calc(100vh + 20px)); opacity: 0; }
}

section.hero {
  position: relative;
  overflow: hidden;
}

section.hero .hero-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 191, 255, 0.6) 50%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(0, 191, 255, 0.35);
  pointer-events: none;
  z-index: 4;
  animation: heroScanline 7s linear 2.5s infinite;
}

/* ===================================================
   INTERIOR HERO BACKGROUND IMAGES
   Miami photography layered under the dark overlay
   =================================================== */

section.services-hero {
  background-image:
    linear-gradient(135deg, rgba(255, 20, 147, 0.22) 0%, rgba(6, 4, 9, 0.55) 45%, rgba(6, 4, 9, 0.72) 100%),
    url('/wp-content/uploads/2026/04/projects-wynwood-datacenter.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

section.projects-hero {
  background-image:
    linear-gradient(135deg, rgba(255, 20, 147, 0.22) 0%, rgba(6, 4, 9, 0.55) 45%, rgba(6, 4, 9, 0.72) 100%),
    url('/wp-content/uploads/2026/04/projects-brickell-tower.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

section.why-us-hero {
  background-image:
    linear-gradient(135deg, rgba(255, 20, 147, 0.22) 0%, rgba(6, 4, 9, 0.55) 45%, rgba(6, 4, 9, 0.72) 100%),
    url('/wp-content/uploads/2026/04/projects-vizcaya-estates.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ===================================================
   MIAMI FLASH — CSS ANIMATION ELEVATION
   A1 scanlines, A2 palms, A3 power surge, A4 card trace,
   A5 lightning, A6 retrowave sun, A7 particles
   Intense first-pass tuning; dial back selectors individually later.
   =================================================== */

/* ---------- Shared keyframes ---------- */
@keyframes powerSurge {
  0%   { background-position: -100% 0; }
  100% { background-position:  200% 0; }
}

@keyframes palmSway {
  0%, 100% { transform: rotate(var(--sway-start, -2deg)) translateY(0); }
  50%      { transform: rotate(var(--sway-end, 2deg)) translateY(-4px); }
}

@keyframes sunPulse {
  0%, 100% { opacity: 0.55; filter: blur(0.5px); }
  50%      { opacity: 0.78; filter: blur(0px); }
}

@keyframes ambientFlash {
  0%, 88%, 100% { opacity: 0; }
  90%           { opacity: 0.75; }
  94%           { opacity: 0.18; }
  96%           { opacity: 0.55; }
  98%           { opacity: 0; }
}

@keyframes cardTraceRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes particleDrift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: var(--p-opacity, 0.6); }
  90%  { opacity: var(--p-opacity, 0.6); }
  100% { transform: translateY(calc(var(--p-rise, -100vh) * 1)) translateX(var(--p-drift, 0px)); opacity: 0; }
}

/* ---------- A1: Scanline extended to interior heroes ---------- */
section.services-hero,
section.projects-hero,
section.why-us-hero {
  position: relative;
  overflow: hidden;
}

section.services-hero .hero-scanline,
section.projects-hero .hero-scanline,
section.why-us-hero .hero-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 191, 255, 0.75) 50%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(0, 191, 255, 0.5);
  pointer-events: none;
  z-index: 4;
  animation: heroScanline 5s linear 1.5s infinite;
}

/* Accelerate the homepage scanline too (match bold first-pass tuning) */
section.hero .hero-scanline {
  animation-duration: 5s !important;
}

/* ---------- A2: Palm silhouette frames ---------- */
section.hero,
section.services-hero,
section.projects-hero,
section.why-us-hero {
  position: relative;
}

.hero-palm {
  position: absolute;
  bottom: -8%;
  width: clamp(140px, 18vw, 260px);
  height: auto;
  color: #000;
  opacity: 0.38;
  filter: drop-shadow(0 0 18px rgba(255, 20, 147, 0.25));
  pointer-events: none;
  z-index: 3;
  transform-origin: bottom center;
  animation: palmSway 5s ease-in-out infinite;
}

.hero-palm--left {
  left: -2%;
  --sway-start: -3.5deg;
  --sway-end: 1.5deg;
  animation-delay: 0s;
}

.hero-palm--right {
  right: -2%;
  transform: scaleX(-1);
  --sway-start: -1.5deg;
  --sway-end: 3.5deg;
  animation-delay: 1.8s;
}

@media (max-width: 768px) {
  .hero-palm { opacity: 0.28; width: clamp(100px, 28vw, 180px); }
}

/* ---------- A3: Section-divider power surge (recurring) ---------- */
.miami-power-divider {
  position: relative;
  height: 2px;
  width: 100%;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 20, 147, 0.85) 20%,
    rgba(0, 191, 255, 0.95) 40%,
    rgba(204, 255, 0, 1) 50%,
    rgba(0, 191, 255, 0.95) 60%,
    rgba(255, 20, 147, 0.85) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  box-shadow: 0 0 8px rgba(255, 20, 147, 0.4),
              0 0 16px rgba(0, 191, 255, 0.3);
  animation: powerSurge 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Apply recurring surge to existing separator gradients */
.hero-power-line,
.projects-filter-surge,
.projects-stats-surge {
  background-size: 200% 100% !important;
  animation: surgeLine 2s ease-out 1.2s both,
             powerSurge 6s linear 3.2s infinite !important;
}

/* ---------- A4: Card electric border trace on hover ---------- */
.projects-card,
.project-card {
  position: relative;
  isolation: isolate;
}

.projects-card::before,
.project-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 20, 147, 0.9) 60deg,
    rgba(0, 191, 255, 1) 120deg,
    rgba(204, 255, 0, 0.9) 180deg,
    rgba(0, 191, 255, 1) 240deg,
    rgba(255, 20, 147, 0.9) 300deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 2;
}

.projects-card:hover::before,
.project-card:hover::before {
  opacity: 1;
  animation: cardTraceRotate 1.4s linear infinite;
}

/* Fallback: static glow border where conic-gradient mask is unsupported */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .projects-card:hover,
  .project-card:hover {
    box-shadow: 0 0 0 1.5px var(--wp--preset--color--accent-2),
                0 0 20px rgba(0, 191, 255, 0.4);
  }
}

/* ---------- A5: Ambient lightning flash (on all heroes) ---------- */
.hero-lightning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background:
    radial-gradient(circle at 25% 20%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(230, 240, 255, 0.25) 25%,
      transparent 55%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 40%);
  mix-blend-mode: screen;
  will-change: opacity;
}

.hero-lightning--active {
  animation: ambientFlash 1.2s ease-out 1;
}

.hero-lightning-bolt {
  position: absolute;
  top: -2%;
  left: 15%;
  width: 6px;
  height: 110%;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 35%,
    rgba(0, 191, 255, 0.9) 55%,
    rgba(255, 20, 147, 0.85) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(1px) drop-shadow(0 0 12px rgba(255, 255, 255, 0.85))
                   drop-shadow(0 0 28px rgba(0, 191, 255, 0.6));
  clip-path: polygon(55% 0%, 38% 42%, 62% 42%, 38% 100%, 58% 55%, 35% 55%);
  transform: rotate(8deg);
  will-change: opacity;
}

.hero-lightning-bolt--active {
  animation: ambientFlash 0.7s ease-out 1;
}

/* ---------- A6: Retrowave sun on interior page heroes ---------- */
section.services-hero::after,
section.projects-hero::after,
section.why-us-hero::after {
  content: '';
  position: absolute;
  bottom: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(360px, 55vw, 720px);
  height: clamp(360px, 55vw, 720px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%,
      rgba(255, 245, 170, 0.88) 0%,
      rgba(255, 150, 70, 0.75) 18%,
      rgba(255, 60, 110, 0.65) 38%,
      rgba(140, 20, 100, 0.35) 58%,
      rgba(60, 0, 60, 0) 75%);
  opacity: 0.58;
  filter: blur(2px);
  pointer-events: none;
  z-index: 1;
  animation: sunPulse 4.5s ease-in-out infinite;
  will-change: opacity;
}

/* Horizon line under the sun for extra retrowave punch */
section.services-hero .hero-horizon,
section.projects-hero .hero-horizon,
section.why-us-hero .hero-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 110, 180, 0.7) 30%,
    rgba(0, 225, 255, 0.8) 50%,
    rgba(255, 110, 180, 0.7) 70%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(255, 110, 180, 0.5),
              0 0 24px rgba(0, 225, 255, 0.3);
  z-index: 2;
  pointer-events: none;
}

/* ---------- A7: Particle drift in dark sections ---------- */
section.projects,
section.booking,
section.projects-grid-section,
section.projects-stats {
  position: relative;
  contain: layout paint;
}

.miami-particle {
  position: absolute;
  bottom: -10px;
  width: var(--p-size, 3px);
  height: var(--p-size, 3px);
  border-radius: 50%;
  background: var(--p-color, rgba(255, 20, 147, 0.9));
  box-shadow: 0 0 8px var(--p-color, rgba(255, 20, 147, 0.9)),
              0 0 16px var(--p-color, rgba(255, 20, 147, 0.6));
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: particleDrift var(--p-dur, 9s) linear var(--p-delay, 0s) infinite;
  will-change: transform, opacity;
}

/* ===================================================
   SECTION-LEVEL AMBIENT LAYER
   Injected via JS into every major section across all pages.
   Provides: pink + cyan drifting orbs, wide scanline,
   faint animated grid overlay, top neon edge bar.
   =================================================== */

@keyframes ambientOrbDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(12%, -8%) scale(1.15); }
  66%  { transform: translate(-8%, 10%) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes ambientOrbDrift2 {
  0%   { transform: translate(0, 0) scale(1.05); }
  33%  { transform: translate(-14%, 6%) scale(0.9); }
  66%  { transform: translate(10%, -12%) scale(1.2); }
  100% { transform: translate(0, 0) scale(1.05); }
}

@keyframes ambientGridShift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px; }
}

@keyframes sectionScanSweep {
  0%   { transform: translateY(-10%); opacity: 0; }
  8%   { opacity: 0.22; }
  92%  { opacity: 0.22; }
  100% { transform: translateY(calc(100% + 10%)); opacity: 0; }
}

@keyframes sectionEdgePulse {
  0%, 100% { background-position: -100% 0; opacity: 0.7; }
  50%      { background-position:  200% 0; opacity: 1; }
}

/* Ambient layer container — injected by JS */
.vv-ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Make sure every injected section establishes a positioning context */
.vv-has-ambient { position: relative; }

.vv-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.vv-ambient-orb--pink {
  top: -12%;
  left: -10%;
  width: clamp(320px, 45vw, 640px);
  height: clamp(320px, 45vw, 640px);
  background: radial-gradient(circle,
    rgba(255, 20, 147, 0.8) 0%,
    rgba(255, 20, 147, 0.35) 40%,
    transparent 70%);
  animation: ambientOrbDrift1 18s ease-in-out infinite;
}

.vv-ambient-orb--cyan {
  bottom: -14%;
  right: -10%;
  width: clamp(320px, 50vw, 700px);
  height: clamp(320px, 50vw, 700px);
  background: radial-gradient(circle,
    rgba(0, 191, 255, 0.75) 0%,
    rgba(0, 191, 255, 0.3) 40%,
    transparent 70%);
  animation: ambientOrbDrift2 22s ease-in-out infinite;
}

.vv-ambient-orb--lime {
  top: 30%;
  left: 38%;
  width: clamp(240px, 30vw, 420px);
  height: clamp(240px, 30vw, 420px);
  background: radial-gradient(circle,
    rgba(204, 255, 0, 0.45) 0%,
    rgba(204, 255, 0, 0.15) 40%,
    transparent 70%);
  opacity: 0.35;
  animation: ambientOrbDrift1 26s ease-in-out -6s infinite;
}

.vv-ambient-grid {
  position: absolute;
  inset: -4px;
  background-image:
    linear-gradient(rgba(255, 20, 147, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 191, 255, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  animation: ambientGridShift 40s linear infinite;
  mix-blend-mode: screen;
}

.vv-ambient-scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 225, 255, 0.55) 50%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(0, 225, 255, 0.4);
  mix-blend-mode: screen;
  animation: sectionScanSweep 9s linear infinite;
}

.vv-ambient-edge-top,
.vv-ambient-edge-bot {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 20, 147, 0.9) 25%,
    rgba(0, 191, 255, 0.95) 50%,
    rgba(204, 255, 0, 0.9) 75%,
    transparent 100%);
  background-size: 220% 100%;
  box-shadow: 0 0 10px rgba(255, 20, 147, 0.5),
              0 0 22px rgba(0, 191, 255, 0.35);
  opacity: 0.85;
  animation: sectionEdgePulse 6s linear infinite;
}

.vv-ambient-edge-top { top: 0; }
.vv-ambient-edge-bot { bottom: 0; animation-delay: -3s; }

/* Ambient establishes its own isolated stacking context so orbs can sit
   BEHIND content without needing to touch any child's position/z-index
   (which would break pattern decorations that rely on position: absolute) */
.vv-has-ambient {
  isolation: isolate;
}

.vv-ambient-layer { z-index: 0; }

/* ---------- Section-level palms (CTA + booking rows) ---------- */
section.booking,
section.services-cta,
section.projects-cta,
section.why-us-cta {
  position: relative;
  overflow: hidden;
}

/* A2 INTENSIFIED: palms larger + more visible */
.hero-palm {
  opacity: 0.55 !important;
  width: clamp(160px, 22vw, 320px) !important;
  filter: drop-shadow(0 0 26px rgba(255, 20, 147, 0.45))
          drop-shadow(0 0 50px rgba(0, 191, 255, 0.25)) !important;
  --sway-start: -5deg;
  --sway-end: 5deg;
  animation-duration: 4.5s !important;
}

/* A5 INTENSIFIED: lightning handled via JS interval tighter — see script.js */

/* A6 INTENSIFIED: retrowave sun brighter on interior heroes */
section.services-hero::after,
section.projects-hero::after,
section.why-us-hero::after {
  opacity: 0.78 !important;
}

/* Homepage hero also gets a sun */
section.hero::after {
  content: '';
  position: absolute;
  bottom: -22%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(460px, 70vw, 900px);
  height: clamp(460px, 70vw, 900px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(255, 245, 170, 0.88) 0%,
    rgba(255, 150, 70, 0.72) 18%,
    rgba(255, 60, 110, 0.55) 38%,
    rgba(140, 20, 100, 0.3) 58%,
    rgba(60, 0, 60, 0) 75%);
  opacity: 0.55;
  filter: blur(2px);
  pointer-events: none;
  z-index: 1;
  animation: sunPulse 5s ease-in-out infinite;
  will-change: opacity;
}

/* ---------- Reduced-motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-palm,
  .hero-power-line,
  .projects-filter-surge,
  .projects-stats-surge,
  .miami-power-divider,
  section.hero::after,
  section.services-hero::after,
  section.projects-hero::after,
  section.why-us-hero::after,
  .projects-card::before,
  .project-card::before,
  .hero-lightning,
  .hero-lightning-bolt,
  .miami-particle,
  .vv-ambient-orb,
  .vv-ambient-grid,
  .vv-ambient-scan,
  .vv-ambient-edge-top,
  .vv-ambient-edge-bot {
    animation: none !important;
  }
  .hero-lightning,
  .hero-lightning-bolt,
  .vv-ambient-scan { display: none !important; }
  .miami-particle { display: none !important; }
}

/* ==========================================================================
   Project cards — readability scrim
   Overrides the per-block inline CSS frozen into page content. Bright Miami
   photos (neon, sunsets, EV chargers) overwhelm a gradient on ::before alone,
   so we add a strong scrim directly on the text overlay container and
   lighten the description color. Specificity 0,0,2,0 beats the auto-
   generated .wp-container-XXXX selector from the pattern.
   ========================================================================== */
.project-card .project-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(6, 4, 9, 0) 0%,
    rgba(6, 4, 9, 0.55) 20%,
    rgba(6, 4, 9, 0.88) 55%,
    rgba(6, 4, 9, 0.96) 100%
  );
  padding-top: var(--wp--preset--spacing--50);
}

.project-card .project-card-title {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 14px rgba(0, 0, 0, 0.55);
}

.project-card .project-card-desc {
  color: #d4d4d4;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 8px rgba(0, 0, 0, 0.6);
}

/* Strengthen the underlying ::before gradient too, in case the scrim sits
   above unusually bright content near the top edge of the text region. */
.project-card::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(6, 4, 9, 0.35) 35%,
    rgba(6, 4, 9, 0.85) 70%,
    rgba(6, 4, 9, 0.95) 100%
  ) !important;
}

.project-card:hover::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(6, 4, 9, 0.45) 30%,
    rgba(6, 4, 9, 0.92) 65%,
    rgba(6, 4, 9, 0.97) 100%
  ) !important;
}