/* WA: Hide PHP theme page-header on all Elementor pages */
.page-header { display: none !important; }



/* WA: Mobile layout fixes */
@media (max-width: 767px) {
  /* Services page - stack service cards to single column on mobile */
  .elementor-element-imagsue > .e-con-inner > .elementor-element {
    --width: 100% !important;
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  /* Homepage OUR SERVICES grid - ensure single column on mobile */
  .elementor-element-6342c18 > .e-con-inner > .elementor-element {
    --width: 100% !important;
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* WA: Hide fake demo team members on Studio page */
.elementor-element-deb826f,
.elementor-element-b502d33,
.elementor-element-7b88c9d,
.elementor-element-8195a59 {
  display: none !important;
}

/* WA: Services page - white text on image cards */
.elementor-element-imagsue > .e-con-inner > .e-con .elementor-widget-text-editor,
.elementor-element-imagsue > .e-con-inner > .e-con .elementor-widget-text-editor p,
.elementor-element-imagsue > .e-con-inner > .e-con .elementor-widget-text-editor * {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* WA: Mobile visual fixes */

/* 1. Fix image distortion - use cover instead of fill */
.elementor-widget-image img,
.elementor-image img {
  object-fit: cover !important;
}

/* 2. Portfolio listing: single column on mobile */
@media (max-width: 767px) {
  .elementor-27 .elementor-element-ym5a57r > .e-con-inner {
    flex-direction: column !important;
  }
  .elementor-27 .elementor-element-ym5a57r > .e-con-inner > .e-con {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* 3. Portfolio project pages: stack columns on mobile */
@media (max-width: 767px) {
  .parent-pageid-27 .e-con-boxed > .e-con-inner {
    flex-direction: column !important;
  }
  .parent-pageid-27 .e-con-boxed > .e-con-inner > .e-con {
    width: 100% !important;
    --width: 100% !important;
    max-width: 100% !important;
  }
}

/* 4. Studio page: push content below header on mobile */
@media (max-width: 767px) {
  .page-id-23 .main-container {
    padding-top: 60px;
  }
}

/* 5. Blog post pages: add horizontal padding on mobile */
@media (max-width: 767px) {
  .elementor-4861 .e-con-boxed > .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 6. Restore header layout on project pages (project column fix was too broad) */
@media (max-width: 767px) {
  .parent-pageid-27 .elementor-location-header .e-con-inner {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .parent-pageid-27 .elementor-location-header .e-con-inner > .e-con {
    width: auto !important;
    --width: auto !important;
    max-width: none !important;
  }
}

/* 7. Location pages: single column service cards on mobile */
@media (max-width: 767px) {
  .elementor-988069 .e-con-inner > .e-con {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   WA: SITE ANIMATIONS & TRANSITIONS
   ============================================================ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Global transitions */
a { transition: color 0.22s ease, opacity 0.22s ease; }

/* ---- Scroll-reveal classes (applied by WA observer JS) ---- */
.wa-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s cubic-bezier(0.4,0,0.2,1),
              transform 0.72s cubic-bezier(0.4,0,0.2,1);
}
.wa-reveal.wa-in {
  opacity: 1;
  transform: translateY(0);
}
.wa-reveal:nth-child(2) { transition-delay: 0.10s; }
.wa-reveal:nth-child(3) { transition-delay: 0.18s; }
.wa-reveal:nth-child(4) { transition-delay: 0.26s; }
.wa-reveal:nth-child(5) { transition-delay: 0.34s; }
.wa-reveal:nth-child(6) { transition-delay: 0.42s; }

/* ---- Portfolio & Journal card hover ---- */
.e-loop-item {
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.38s ease;
  will-change: transform;
}
.e-loop-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.13);
}

/* Image zoom inside loop cards */
.e-loop-item .vamtam-image-wrapper,
.e-loop-item .elementor-widget-image { overflow: hidden; }
.e-loop-item .vamtam-image-wrapper img,
.e-loop-item .elementor-widget-image img {
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.e-loop-item:hover .vamtam-image-wrapper img,
.e-loop-item:hover .elementor-widget-image img { transform: scale(1.06); }

/* ---- Standalone image hover zoom ---- */
.elementor-widget-image { overflow: hidden; }
.elementor-widget-image img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.elementor-widget-image:hover img { transform: scale(1.04); }

/* ---- Buttons ---- */
.elementor-button {
  transition: transform 0.22s ease,
              box-shadow 0.22s ease,
              background-color 0.25s ease,
              color 0.25s ease !important;
}
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.17);
}

/* ---- Navigation ---- */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item {
  transition: color 0.22s ease, opacity 0.22s ease !important;
}

/* ---- Hero slide content entrance ---- */
@keyframes wa-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wa-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.elementor-slideshow .elementor-slide-heading {
  animation: wa-up 0.95s cubic-bezier(0.4,0,0.2,1) both;
}
.elementor-slideshow .elementor-slide-description {
  animation: wa-up 0.95s cubic-bezier(0.4,0,0.2,1) 0.15s both;
}
.elementor-slideshow .elementor-slide-button {
  animation: wa-up 0.95s cubic-bezier(0.4,0,0.2,1) 0.28s both;
}

/* ---- Counter hover ---- */
.elementor-counter-number-wrapper {
  display: inline-block;
  transition: transform 0.28s ease;
}
.elementor-counter-number-wrapper:hover { transform: scale(1.05); }

/* Commercial page hero — vertical centering & consistent alignment */
.elementor-element-e0691a39 > .e-con-inner {
  justify-content: center !important;
}
.elementor-element-4e66623b .elementor-widget-container,
.elementor-element-4e66623b p {
  text-align: left !important;
  max-width: 560px;
}