/* Baito Events - Design Tokens Override */
/* Replaces Rayo purple/lime with Baito blue/cyan */
/* Updated: 2026-01-05 - Scrollbar fix v2 */

:root {
  /* Baito Primary Colors */
  --baito-blue: #0066ff;
  --baito-cyan: #29d9ff;
  --baito-navy: #000426;
  --baito-white: #ffffff;

  /* Override Rayo accent colors - Light Mode */
  --accent--light: #0066ff;
  --accent-rgb--light: 0, 102, 255;
  --additional--light: #29d9ff;
  --additional-rgb--light: 41, 217, 255;

  /* Override Rayo accent colors - Dark Mode */
  --accent--dark: #29d9ff;
  --accent-rgb--dark: 41, 217, 255;
  --additional--dark: #0066ff;
  --additional-rgb--dark: 0, 102, 255;

  /* Dark base override for Baito navy */
  --base--dark: #000426;
  --base-rgb--dark: 0, 4, 38;
  --base-tint--dark: #001033;
  --base-shade--dark: #000319;
}

/* Force light color scheme - Baito Blue accent */
[color-scheme=light] {
  --accent: #0066ff;
  --accent-rgb: 0, 102, 255;
  --additional: #29d9ff;
  --additional-rgb: 41, 217, 255;
}

/* Force dark color scheme - Baito Cyan accent */
[color-scheme=dark] {
  --accent: #29d9ff;
  --accent-rgb: 41, 217, 255;
  --additional: #0066ff;
  --additional-rgb: 0, 102, 255;
  --base: #000426;
  --base-rgb: 0, 4, 38;
  --base-tint: #001033;
  --base-shade: #000319;
}

/* Prefers color scheme overrides */
@media (prefers-color-scheme: light) {
  :root {
    --accent: var(--accent--light);
    --accent-rgb: var(--accent-rgb--light);
    --additional: var(--additional--light);
    --additional-rgb: var(--additional-rgb--light);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: var(--accent--dark);
    --accent-rgb: var(--accent-rgb--dark);
    --additional: var(--additional--dark);
    --additional-rgb: var(--additional-rgb--dark);
    --base: var(--base--dark);
    --base-rgb: var(--base-rgb--dark);
    --base-tint: var(--base-tint--dark);
    --base-shade: var(--base-shade--dark);
  }
}

/* WhatsApp button green */
.btn-whatsapp,
a[href*="wa.me"] {
  background-color: #25D366 !important;
  border-color: #25D366 !important;
}

.btn-whatsapp:hover,
a[href*="wa.me"]:hover {
  background-color: #128C7E !important;
  border-color: #128C7E !important;
}

/* Brand logo improvements for trust bar */
.marquee__item.item-partners img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  filter: none;
}

/* Baito Logo Text Styling */
.mxd-logo__text {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================
   SCROLLBAR STYLING FIX
   Hide the bright blue scrollbar completely
   ============================================ */

/* Hide scrollbar on all browsers */
html {
  scrollbar-width: none !important;  /* Firefox */
  -ms-overflow-style: none !important;  /* IE and Edge */
}

html::-webkit-scrollbar {
  display: none !important;  /* Chrome, Safari, Opera */
  width: 0 !important;
  height: 0 !important;
}

body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Global scrollbar hide */
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Override main.css media query that shows scrollbar on desktop */
@media only screen and (min-width: 768px) {
  ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Loader auto-hide fallback */
@keyframes loader-fade-out {
  0%, 80% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

#loader {
  animation: loader-fade-out 3.5s ease-out forwards;
}

#loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Featured Projects - Baito Event Images */
.preview-image-1 {
  background-image: url(../images/events/2024/Warrior-Merdeka-29-8-16-9/1.webp) !important;
  background-size: cover;
  background-position: center;
}

.preview-image-2 {
  background-image: url(../images/events/2024/Ribena-Kombi-Roving-23-12-21-1/1.webp) !important;
  background-size: cover;
  background-position: center;
}

.preview-image-3 {
  background-image: url(../images/events/2024/CC-Lemon-Sept-Dec-24_/1.webp) !important;
  background-size: cover;
  background-position: center;
}

/* Fantastic 4 Video Preview */
.preview-video-f4 {
  position: relative;
  overflow: hidden;
}

.preview-video-f4 video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.preview-image-5 {
  background-image: url(../images/events/2024/Kitkat-CNY-Sunway-Velocity-5-1-9-1/1.webp) !important;
  background-size: cover;
  background-position: center;
}

/* ============================================
   BAITO LAYOUT ADJUSTMENTS
   ============================================ */

/* Stats section uses Rayo's original heights (320px/400px) */

/* Make clientele/brands marquee section smaller */
.mxd-section.padding-pre-title {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.marquee--gsap .marquee__item.item-partners {
  padding: 0.75rem 1.25rem !important;
}

.marquee--gsap .marquee__item.item-partners img {
  max-height: 48px !important;
}

/* Reduce spacing before stacking cards section */
.mxd-section.padding-stacked-section {
  padding-top: 3rem !important;
}

.stack-offset {
  height: 2rem !important;
}

/* Align company logo in testimonial cards - positioned top-right */
.mxd-testimonials-card__company {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 48px !important;
  height: 48px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  padding: 6px !important;
  overflow: hidden !important;
  border: 2px solid rgba(0, 0, 0, 0.05) !important;
}

.mxd-testimonials-card__company img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.mxd-testimonials-card__media {
  position: relative !important;
}

/* Fix 1: Menu overlay — ensure opaque background */
.mxd-menu__base {
  background-color: var(--base-opp) !important;
}

/* Fix 5: Pinned projects — allow sticky to work */
.mxd-pinned-projects {
  overflow: visible !important;
}

/* Stats section - match Rayo template proportions */
@media only screen and (min-width: 992px) {
  .mxd-stats-simple__inner {
    height: 280px !important;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-stats-simple__inner {
    height: 320px !important;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-stats-simple__inner {
    height: 380px !important;
  }
}

/* Reduce bottom padding on stats section */
.mxd-section.stats-section {
  padding-bottom: 6rem !important;
}

/* Reduce gap between stats section and stacking cards */
.mxd-section.padding-stacked-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.stack-offset {
  height: 0 !important;
}

/* Hero stats - using Rayo original sizes (5rem mobile / 7rem desktop) */

/* ============================================
   SERVICE STACKING CARDS - 9:16 PORTRAIT IMAGE FIX
   Ensures portrait ratio images display correctly
   across all viewport sizes (mobile, tablet, desktop)
   ============================================ */

/* Base mobile styles - portrait image container */
.services-stack__image {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 300px !important;
  overflow: hidden !important;
  border-radius: var(--_radius-m, 1rem) !important;
  margin-top: auto !important;
}

.services-stack__image .service-img,
.services-stack__image .service-img-s,
.services-stack__image .service-img-m,
.services-stack__image video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Tablet styles (768px - 991px) */
@media only screen and (min-width: 768px) {
  .services-stack__image {
    max-height: 350px !important;
  }
}

/* Desktop styles (992px+) - image positioned in background */
@media only screen and (min-width: 992px) {
  .services-stack__image {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 50% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    z-index: 0 !important;
  }

  .services-stack__image .service-img,
  .services-stack__image .service-img-m,
  .services-stack__image video {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Large desktop (1200px+) */
@media only screen and (min-width: 1200px) {
  .services-stack__image {
    width: 45% !important;
  }
}

/* Extra large desktop (1600px+) */
@media only screen and (min-width: 1600px) {
  .services-stack__image {
    width: 40% !important;
  }
}

/* ============================================
   ROVING VEHICLES SLIDESHOW
   Auto-cycling images every 1 second
   ============================================ */

.roving-slideshow .roving-slide,
.roving-slideshow .roving-slide-m {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease-in-out !important;
  z-index: 1 !important;
}

.roving-slideshow .roving-slide.active,
.roving-slideshow .roving-slide-m.active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Desktop - ensure parent has relative positioning and slideshow on right */
@media only screen and (min-width: 992px) {
  /* Ensure parent has relative positioning for absolute child */
  .roving-card-parent {
    position: relative !important;
  }

  .services-stack__image.roving-slideshow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 50% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    z-index: 0 !important;
  }
}

@media only screen and (min-width: 1200px) {
  .services-stack__image.roving-slideshow {
    width: 45% !important;
  }
}

@media only screen and (min-width: 1600px) {
  .services-stack__image.roving-slideshow {
    width: 40% !important;
  }
}

/* ============================================
   VIDEO HOVER FULLSCREEN MODAL
   Expands video on hover with sound
   ============================================ */

.video-hover-container {
  position: relative;
  cursor: pointer;
}

.video-hover-container video {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Fullscreen Video Modal */
.video-fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(10px);
}

.video-fullscreen-modal.active {
  opacity: 1;
  visibility: visible;
}

/* Video player wrapper - contains video and controls */
.video-fullscreen-modal .video-player-wrapper {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 102, 255, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-fullscreen-modal.active .video-player-wrapper {
  transform: scale(1);
}

.video-fullscreen-modal video {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
}

/* Close hint */
.video-fullscreen-modal::after {
  content: 'Move cursor outside to close';
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-family: var(--font-family-main, 'Satoshi', sans-serif);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease 0.5s;
}

.video-fullscreen-modal.active::after {
  opacity: 1;
}

/* Play icon overlay on placeholder videos */
.video-hover-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(0, 102, 255, 0.9);
  border-radius: 50%;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.video-hover-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(3px);
  width: 0;
  height: 0;
  border-left: 22px solid white;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-hover-container:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-hover-container:hover::after {
  opacity: 1;
}

/* Sound toggle button - inside video player */
.video-fullscreen-modal .sound-toggle-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  font-family: var(--font-family-main, 'Satoshi', sans-serif);
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 10;
}

.video-fullscreen-modal.active .sound-toggle-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.sound-toggle-btn:hover {
  background: rgba(0, 102, 255, 0.8);
  border-color: rgba(0, 102, 255, 0.5);
  transform: translateY(0) scale(1.05);
}

.sound-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}

.sound-toggle-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sound-toggle-btn span {
  white-space: nowrap;
}

/* Muted state styling */
.sound-toggle-btn.muted {
  background: rgba(255, 60, 60, 0.6);
  border-color: rgba(255, 60, 60, 0.3);
}

.sound-toggle-btn.muted:hover {
  background: rgba(255, 60, 60, 0.8);
}

/* ============================================
   YOUTUBE EMBED STYLES
   For fullscreen YouTube video modal
   ============================================ */

.video-fullscreen-modal .youtube-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-fullscreen-modal .youtube-video {
  width: 90vw;
  height: 50.625vw; /* 16:9 aspect ratio */
  max-height: 85vh;
  max-width: calc(85vh * 16 / 9);
  border-radius: 12px;
}

.video-fullscreen-modal .youtube-short {
  width: auto;
  height: 85vh;
  aspect-ratio: 9 / 16;
  max-width: 90vw;
  border-radius: 12px;
}

/* Close button styling */
.video-fullscreen-modal .modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
  z-index: 10;
}

.video-fullscreen-modal.active .modal-close-btn {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s;
}

.video-fullscreen-modal .modal-close-btn:hover {
  background: rgba(255, 60, 60, 0.8);
  border-color: rgba(255, 60, 60, 0.5);
  transform: scale(1.1);
}

.video-fullscreen-modal .modal-close-btn svg {
  width: 24px;
  height: 24px;
}

/* YouTube preview thumbnail styling */
.youtube-preview {
  cursor: pointer;
  position: relative;
}

.youtube-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.youtube-preview:hover img {
  transform: scale(1.02);
}

/* ============================================
   INLINE VIDEO AUTOPLAY STYLES
   Videos autoplay (muted) when scrolled into view
   ============================================ */

.inline-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* YouTube IFrame API creates iframe inside the div */
.inline-youtube-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none; /* Let clicks go to parent */
}

.inline-youtube-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

/* For shorts (9:16 aspect ratio), we need to scale up to fill container */
.inline-youtube-frame.youtube-short {
  width: auto;
  height: 200%;
  min-width: 100%;
}

.inline-youtube-frame.youtube-short iframe {
  width: 100%;
  height: 100%;
}

/* Video Control Buttons - White circular icons */
.video-mute-btn,
.video-expand-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  color: #1a1a1a;
  cursor: pointer;
  transition: all 0.25s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Mute button - bottom left of card */
.video-mute-btn {
  bottom: 12px;
  left: 12px;
}

/* Expand button - bottom right of card */
.video-expand-btn {
  bottom: 12px;
  right: 12px;
}

.video-mute-btn:hover,
.video-expand-btn:hover {
  background: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.video-mute-btn svg,
.video-expand-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* Mute button - blue when unmuted/sound on */
.video-mute-btn.unmuted {
  background: rgba(0, 102, 255, 0.95);
  color: white;
}

/* Smaller buttons on mobile */
@media (max-width: 480px) {
  .video-mute-btn,
  .video-expand-btn {
    width: 32px;
    height: 32px;
  }
  .video-mute-btn svg,
  .video-expand-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Legacy support for old overlay */
.inline-video-overlay {
  display: none;
}

/* ===== CLICK TO UNMUTE GUIDE ===== */
/* Framer Motion-style animated guide for browser autoplay policy */

.unmute-guide {
  position: absolute;
  bottom: 12px;
  left: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  z-index: 15;
  pointer-events: none;
  /* Initial state - hidden */
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Show guide when video is active but audio not unlocked */
.unmute-guide.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Pulsing ring animation around the button indicator */
.unmute-guide-ring {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unmute-guide-ring::before,
.unmute-guide-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 102, 255, 0.6);
  animation: unmutePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.unmute-guide-ring::after {
  animation-delay: 0.5s;
}

@keyframes unmutePulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.unmute-guide-icon {
  width: 20px;
  height: 20px;
  background: var(--color-primary, #0066ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: unmuteBounce 1s ease-in-out infinite;
  z-index: 1;
}

@keyframes unmuteBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.unmute-guide-icon svg {
  width: 12px;
  height: 12px;
  color: white;
  stroke-width: 2.5;
}

.unmute-guide-text {
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Arrow pointing to button */
.unmute-guide-arrow {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid rgba(0, 0, 0, 0.85);
}

/* Hide guide once audio is unlocked */
body.audio-unlocked .unmute-guide {
  opacity: 0 !important;
  transform: translateX(-10px) !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .unmute-guide {
    bottom: 8px;
    left: 50px;
    padding: 6px 12px 6px 10px;
  }

  .unmute-guide-ring {
    width: 24px;
    height: 24px;
  }

  .unmute-guide-icon {
    width: 18px;
    height: 18px;
  }

  .unmute-guide-icon svg {
    width: 10px;
    height: 10px;
  }

  .unmute-guide-text {
    font-size: 11px;
  }
}

/* Legacy support */
.sound-hint {
  display: none;
}

/* Video playing state - add subtle border glow */
.youtube-preview.video-playing {
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.3),
              0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Play icon overlay - hidden when video is playing */
.youtube-preview.video-playing .video-play-icon,
.youtube-preview.video-playing::before {
  display: none !important;
  opacity: 0 !important;
}

/* Loading state animation */
.youtube-preview.video-playing::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-primary, #0066ff) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: videoLoading 1.5s ease-in-out infinite;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes videoLoading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Hide loading animation once iframe is loaded */
.youtube-preview.video-playing .inline-youtube-frame[src] ~ .inline-video-overlay + ::after {
  opacity: 0;
}

/* ============================================
   PINNED SERVICES IMAGES FIX
   Fix oval appearance - make images fill container properly
   ============================================ */
.mxd-pinned__img {
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  border-radius: 1.5rem !important;
  object-fit: cover !important;
}

.mxd-pinned__img-mobile img {
  width: 100% !important;
  height: auto !important;
  max-height: 24rem !important;
  border-radius: 1.5rem !important;
  object-fit: cover !important;
}

@media only screen and (min-width: 768px) {
  .mxd-pinned__img-mobile img {
    max-height: 30rem !important;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-pinned__img {
    height: 100% !important;
    max-height: 40rem !important;
  }
}

/* ============================================
   MOBILE UX IMPROVEMENTS (< 480px)
   Fixes for hero marquee, service cards,
   stats counter, touch targets, and spacing
   ============================================ */

/* ===== 1. HERO MARQUEE TEXT CLIPPING FIX ===== */
/* Ensure marquee container has proper overflow and text sizing */
@media only screen and (max-width: 479px) {
  /* Hero marquee container - ensure proper overflow handling */
  .mxd-hero-07__top {
    overflow: visible !important;
    padding-top: 2rem !important;
    margin-bottom: 3rem !important;
  }

  /* Marquee text sizing for small screens */
  .marquee__text {
    font-size: 4rem !important;
    white-space: nowrap !important;
  }

  /* Marquee image/icon sizing */
  .marquee__image {
    width: 3rem !important;
    height: 3rem !important;
    flex-shrink: 0 !important;
  }

  .marquee__image svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* Item spacing in marquee */
  .marquee__item.item-regular {
    gap: 0.75rem !important;
  }

  /* Ensure marquee wrapper doesn't clip */
  .marquee {
    overflow: visible !important;
  }

  .marquee__toright,
  .marquee__toleft {
    gap: 1.5rem !important;
  }
}

/* ===== 2. SERVICE STACKING CARDS - VIDEO PREVIEW FIXES ===== */
/* Fix "Click to unmute" guide positioning on mobile */
@media only screen and (max-width: 480px) {
  /* Reposition unmute guide for mobile - center it below video controls */
  .unmute-guide {
    bottom: auto !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    max-width: calc(100% - 24px) !important;
    padding: 6px 10px 6px 8px !important;
    font-size: 11px !important;
  }

  .unmute-guide-text {
    font-size: 10px !important;
    letter-spacing: 0.01em !important;
  }

  .unmute-guide-ring {
    width: 20px !important;
    height: 20px !important;
  }

  .unmute-guide-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .unmute-guide-icon svg {
    width: 8px !important;
    height: 8px !important;
  }

  /* Hide the arrow on mobile - no room */
  .unmute-guide-arrow {
    display: none !important;
  }

  /* Video control buttons - ensure minimum touch target */
  .video-mute-btn,
  .video-expand-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .video-mute-btn svg,
  .video-expand-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Adjust button positions for larger touch targets */
  .video-mute-btn {
    bottom: 8px !important;
    left: 8px !important;
  }

  .video-expand-btn {
    bottom: 8px !important;
    right: 8px !important;
  }

  /* Service card image container adjustments */
  .services-stack__image {
    max-height: 250px !important;
  }

  /* YouTube preview play icon sizing */
  .video-hover-container::before {
    width: 56px !important;
    height: 56px !important;
  }

  .video-hover-container::after {
    border-left-width: 18px !important;
    border-top-width: 11px !important;
    border-bottom-width: 11px !important;
  }
}

/* ===== 3. STATS COUNTER ANIMATION FIX ===== */
/* Ensure stats are visible and counters trigger on scroll */
@media only screen and (max-width: 480px) {
  /* Make stats section more compact */
  .mxd-section.stats-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Stats counter - ensure visibility */
  .mxd-stats-simple__counter {
    font-size: 4rem !important;
    line-height: 1 !important;
  }

  /* Stats item inner - reduce height */
  .mxd-stats-simple__inner {
    min-height: 100px !important;
    padding: 1.5rem 1rem !important;
  }

  /* Stats description text */
  .mxd-stats-simple__descr {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
  }

  /* Hero stats numbers */
  .mxd-counter__number.small {
    font-size: 3rem !important;
  }

  .mxd-counter__descr.t-small {
    font-size: 0.75rem !important;
  }

  /* Ensure counter wrapper is visible for IntersectionObserver */
  .mxd-stats-simple,
  .mxd-stats-simple__item,
  .mxd-counter {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Force stats grid to be single column on mobile */
  .mxd-stats-simple .row {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .mxd-stats-simple__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Reduce stats section overall height */
  .mxd-stats-simple {
    min-height: auto !important;
  }
}

/* ===== 4. TOUCH TARGET IMPROVEMENTS ===== */
/* Ensure all interactive elements have minimum 44px touch targets */
@media only screen and (max-width: 480px) {
  /* Navigation hamburger */
  .mxd-nav__hamburger {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Header buttons */
  .mxd-header__controls .btn,
  .mxd-header__controls button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* Color switcher button */
  .mxd-color-switcher {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Round buttons (CTA arrows) */
  .btn-round {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .btn-round-large {
    width: 52px !important;
    height: 52px !important;
  }

  /* Tags - ensure tappable */
  .tag {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }

  /* Menu links */
  .main-menu__link {
    min-height: 44px !important;
    padding: 12px 0 !important;
  }

  /* To top button */
  .btn-to-top {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Modal close button */
  .video-fullscreen-modal .modal-close-btn {
    width: 48px !important;
    height: 48px !important;
    top: 12px !important;
    right: 12px !important;
  }

  /* Sound toggle in modal */
  .video-fullscreen-modal .sound-toggle-btn {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  /* Service card CTA buttons */
  .mxd-services-stack__controls .btn-round {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ===== 5. MOBILE SPACING REDUCTIONS ===== */
/* Reduce excessive vertical padding on mobile */
@media only screen and (max-width: 480px) {
  /* General section padding */
  .mxd-section.padding-default {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  /* Hero section bottom padding */
  .mxd-hero-07__bottom {
    padding: 0 1.5rem !important;
  }

  /* Hero circle container - reduce height */
  .mxd-hero-07__circle {
    height: 380px !important;
    margin-bottom: 3rem !important;
  }

  /* Hero info section */
  .mxd-hero-07__info {
    gap: 1.5rem !important;
  }

  .hero-07-info__container {
    gap: 1rem !important;
  }

  .hero-07-info__tags {
    gap: 0.5rem !important;
  }

  /* Stacking cards section */
  .mxd-section.padding-stacked-section {
    padding-top: 2rem !important;
  }

  /* Stack items - reduce card height */
  .stack-item {
    margin-bottom: 1rem !important;
  }

  .mxd-services-stack__inner {
    padding: 1.5rem !important;
    min-height: auto !important;
  }

  .mxd-services-stack__title h3 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .mxd-services-stack__info p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  /* Reduce tag container spacing in service cards */
  .mxd-services-cards__tags {
    gap: 0.375rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Testimonials section */
  .mxd-testimonials-card {
    padding: 1.25rem !important;
  }

  /* Footer spacing */
  .mxd-section.padding-footer-default {
    padding-top: 3rem !important;
  }

  /* Brands marquee section */
  .mxd-section.padding-pre-title {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .marquee__item.item-partners {
    width: 280px !important;
    height: 180px !important;
  }

  .marquee__item.item-partners img {
    max-height: 40px !important;
  }

  /* Portfolio/Projects grid */
  .mxd-block.no-margin {
    margin-bottom: 0 !important;
  }
}

/* ===== 6. ADDITIONAL MOBILE POLISH ===== */
@media only screen and (max-width: 480px) {
  /* Smooth text rendering */
  body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* Prevent horizontal scroll from marquee */
  .mxd-page-content {
    overflow-x: hidden !important;
  }

  /* Hero title sizing */
  .mxd-hero-07__title {
    font-size: 2rem !important;
  }

  /* Info text sizing */
  .hero-07-info__descr .t-large {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Scroll indicator */
  .mxd-hero-07__more {
    margin-top: 1.5rem !important;
  }

  .mxd-hero-07__more .btn {
    font-size: 0.875rem !important;
  }

  /* Container padding - Rayo uses 3rem, adjusted to 1.5rem for mobile */
  .mxd-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ===== 7. TABLET ADJUSTMENTS (480px - 767px) ===== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .marquee__text {
    font-size: 5rem !important;
  }

  .marquee__image {
    width: 4rem !important;
    height: 4rem !important;
  }

  .mxd-stats-simple__counter {
    font-size: 5rem !important;
  }

  .mxd-section.padding-default {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .services-stack__image {
    max-height: 280px !important;
  }

  .unmute-guide {
    bottom: 10px !important;
    left: 56px !important;
  }
}

/* ============================================== */
/* MOBILE UX IMPROVEMENTS - Iteration 5          */
/* ============================================== */

/* Sticky Header on Mobile */
@media (max-width: 991px) {
  #mxd-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: var(--base) !important;
    backdrop-filter: blur(10px);
  }
}

/* Touch Target Improvements - Minimum 44x44px */
@media (max-width: 768px) {
  /* Phone/WhatsApp links */
  a[href^="tel:"],
  a[href*="wa.me"],
  a[href*="whatsapp"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }

  /* All buttons */
  .btn,
  .btn-round,
  button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* CTA round buttons */
  .btn-round {
    width: 48px !important;
    height: 48px !important;
  }

  .btn-round i {
    font-size: 20px !important;
  }
}

/* Reduce Section Spacing on Mobile */
@media (max-width: 576px) {
  .mxd-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .mxd-block {
    margin-bottom: 1.5rem !important;
  }

  /* Tighter stat counter */
  .mxd-stats-simple__counter {
    min-height: 70px !important;
  }

  /* FAQ grid single column on small screens */
  .faq-grid {
    grid-template-columns: 1fr !important;
  }

  /* Process steps single column */
  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Prevent Horizontal Overflow */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.mxd-container,
.container-fluid,
main {
  overflow-x: hidden !important;
}

/* Safe Area Insets for Notched Phones */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
  }

  .floating-whatsapp {
    right: max(2rem, calc(env(safe-area-inset-right) + 1rem)) !important;
    bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem)) !important;
  }
}

/* Form Input Touch Targets */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 12px 16px !important;
  }

  label {
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
  }
}

/* ============================================== */
/* VISUAL POLISH - Iteration 8                   */
/* Brand/Visual Designer improvements            */
/* ============================================== */

/* FAQ Items - Hover Effects & Visual Polish */
.faq-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.faq-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.1) !important;
  border-left-color: var(--additional, #29d9ff) !important;
}

/* Results/Social Proof Section - Card Styling */
.results-banner {
  background: linear-gradient(135deg, var(--base-tint) 0%, var(--base) 100%) !important;
  border-radius: var(--_radius-m, 1rem) !important;
  border: 1px solid rgba(0, 102, 255, 0.1) !important;
}

.result-stat {
  padding: 1rem 1.5rem !important;
  background: var(--base) !important;
  border-radius: var(--_radius-s, 0.5rem) !important;
  border: 1px solid var(--border-color) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.result-stat:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.15) !important;
}

/* Footer Company Text - Use Theme Variable */
.footer-blocks__links p.t-xsmall {
  color: var(--text-muted) !important;
}

/* WhatsApp Badge - Enhanced Visual Hierarchy */
.whatsapp-badge {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Section Accent Dividers */
.mxd-section.bg-base-tint::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--accent), var(--additional)) !important;
  border-radius: 2px !important;
}

/* Contact Form Input Focus States */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1) !important;
}

/* Quick Contact Card Hover */
.contact-info a:hover {
  color: var(--accent) !important;
}

.contact-info a:hover i {
  transform: scale(1.1) !important;
  transition: transform 0.2s ease !important;
}

/* Testimonials Card Polish */
.mxd-testimonials-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.mxd-testimonials-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
}

/* Download Profile Button */
.download-profile-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3) !important;
}

.download-profile-btn:hover i {
  color: white !important;
}

/* ============================================== */
/* RAYO TEMPLATE COMPLIANT STYLES               */
/* Custom styles for Baito components            */
/* ============================================== */

/* ============================================== */
/* PROCESS STEPS - How We Work Section           */
/* Uses CSS Grid for responsive layout           */
/* ============================================== */

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.process-step {
  background: var(--base);
  padding: 2rem;
  border-radius: var(--_radius-m, 1rem);
}

.process-step__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.process-step__number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.process-step__icon {
  font-size: 2rem;
  color: var(--accent);
}

.process-step__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.process-step__text {
  font-size: 0.9rem;
  line-height: 1.6;
}

.process-step__duration {
  font-size: 0.8rem;
  color: var(--accent);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

@media (max-width: 576px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .process-step {
    padding: 1.5rem;
  }

  .process-step__number {
    font-size: 2.5rem;
  }

  .process-step__icon {
    font-size: 1.5rem;
  }

  .process-step__title {
    font-size: 1.1rem;
  }
}

/* Industry Tags Wrapper */
.industry-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}

.industry-tags-wrap .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Text Center Utility */
.t-center {
  text-align: center;
}

/* Google Review Button - Icon Spacing */
.google-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.google-review-btn svg {
  flex-shrink: 0;
}

/* Contact Info Grid */
.contact-info-grid {
  padding: 2rem 0;
}

.contact-info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.contact-info-item:hover {
  transform: translateY(-2px);
}

a.contact-info-item:hover {
  color: var(--accent);
}

.contact-info-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.whatsapp-icon {
  color: #25D366;
}

/* Trust Badges Wrapper */
.trust-badges-wrap {
  padding: 2rem 0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.trust-badges-wrap .mxd-point-subtitle {
  justify-content: center;
  margin-bottom: 1.5rem;
}

.trust-badges-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
}

.trust-badges-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.check-icon {
  color: #25D366;
  font-size: 1.1rem;
}

.pdf-icon {
  color: #E53935;
  font-size: 1.25rem;
}

.download-btn {
  margin-bottom: 0.5rem;
}

/* Stats Simple Styling - Proven Results Section */
/* Note: Main counter font-size uses Rayo defaults (7rem base, 9rem@1200, 12rem@1600) */
/* The secondary stats in Results section use .t-accent class for smaller display */
.mxd-stats-simple__inner {
  padding: 1.5rem 1rem;
  text-align: center;
}

.mxd-stats-simple__descr {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Hidden utility for honeypot */
.hidden {
  display: none !important;
}

/* Footer text spacing utilities */
.footer-blocks__links p + p {
  margin-top: 0.25rem;
}

.footer-blocks__links a.footer-link-muted {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-blocks__links .footer-link-separator {
  margin: 0 0.5rem;
}

/* ============================================== */
/* FLOATING WHATSAPP BUTTON                       */
/* ============================================== */

.floating-whatsapp-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
}

.whatsapp-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff3b30;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 10px;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.floating-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-whatsapp i {
  font-size: 2rem;
  color: white;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

.whatsapp-badge {
  animation: badge-pulse 3s ease-in-out infinite;
  left: -10px;
  background: var(--accent, #0066ff);
}

@media (max-width: 768px) {
  .floating-whatsapp-container {
    bottom: 1rem;
    right: 1rem;
  }

  .floating-whatsapp {
    width: 55px;
    height: 55px;
  }

  .whatsapp-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
  }
}

/* ============================================== */
/* COOKIE CONSENT BANNER                          */
/* ============================================== */

.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--base, #1a1a1a);
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  padding: 1rem 1.5rem;
  z-index: 99999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.cookie-consent.visible {
  transform: translateY(0);
}

.cookie-consent__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-consent__text {
  font-size: 0.85rem;
  color: var(--text-muted, #888);
  margin: 0;
  flex: 1;
  min-width: 250px;
}

.cookie-consent__text a {
  color: var(--accent, #0066ff);
  text-decoration: underline;
}

.cookie-consent__buttons {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-consent__btn {
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.cookie-consent__btn--accept {
  background: var(--accent, #0066ff);
  color: white;
}

.cookie-consent__btn--accept:hover {
  background: #0052cc;
  transform: translateY(-1px);
}

.cookie-consent__btn--decline {
  background: transparent;
  color: var(--text-muted, #888);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
}

.cookie-consent__btn--decline:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Form Select Styling - Match Rayo */
.form select,
.contact-form select {
  width: 100%;
  padding: 1rem;
  background: var(--base);
  border: 1px solid var(--border-color);
  border-radius: var(--_radius-s, 0.5rem);
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.form select:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-info-item {
    padding: 0.75rem;
  }

  .trust-badges-list {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* Stats counter uses Rayo defaults: 7rem base */
}

@media (max-width: 576px) {
  .industry-tags-wrap {
    gap: 0.5rem;
  }

  .industry-tags-wrap .tag {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }
}

/* ============================================
   "WHY BRANDS CHOOSE US" SECTION - CENTER ALIGNMENT
   Override default right-aligned text to center
   ============================================ */

@media only screen and (min-width: 1200px) {
  .mxd-approach-list__title {
    text-align: center !important;
    padding: 0 2rem !important;
  }

  .mxd-approach-list__descr {
    text-align: center !important;
  }

  .mxd-approach-list__image {
    display: flex !important;
    justify-content: center !important;
  }
}

/* ============================================
   HERO MARQUEE TEXT FIX - Prevent Cut Off
   Ensure proper overflow handling for marquee
   ============================================ */

.mxd-hero-07__top {
  overflow: visible !important;
  padding-top: 1rem !important;
}

.mxd-hero-07__marquee {
  overflow: visible !important;
}

.mxd-hero-07__marquee .marquee {
  overflow: visible !important;
}

.mxd-hero-07__marquee .marquee__toright,
.mxd-hero-07__marquee .marquee__toleft {
  overflow: visible !important;
}

/* ============================================
   SERVICES STACK CARDS - /01 NUMBER VISIBILITY FIX
   Keep number visible next to title, not under image
   ============================================ */

/* On desktop, constrain title width so number stays on colored background */
@media only screen and (min-width: 992px) {
  .mxd-services-stack__title.showcase-title {
    max-width: 55% !important;
    justify-content: flex-start !important;
    gap: 2rem !important;
  }

  .mxd-services-stack__title.showcase-title h3 {
    flex-shrink: 0 !important;
  }

  .mxd-services-stack__number {
    position: relative !important;
    z-index: 2 !important;
  }
}

@media only screen and (min-width: 1200px) {
  .mxd-services-stack__title.showcase-title {
    max-width: 50% !important;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-services-stack__title.showcase-title {
    max-width: 55% !important;
  }
}

/* ============================================
   PINNED PORTFOLIO CARDS — TEXT VISIBILITY FIX
   The parent .mxd-pinned__text-item has opacity: 0.2
   on desktop, and child .anim-uni-in-up elements start
   at opacity: 0 via GSAP. The compound effect makes
   text nearly invisible. Fix both layers.
   ============================================ */

/* 1. Raise inactive card opacity so text is readable even when not active */
@media only screen and (min-width: 1200px) {
  .mxd-pinned__text-item {
    opacity: 0.45 !important;
  }
  .mxd-pinned__text-item.is-active {
    opacity: 1 !important;
  }
}

/* 2. Ensure child elements inside pinned cards are not hidden by
      anim-uni-in-up scroll animation (which starts them at opacity: 0).
      Force children visible — the parent opacity handles the fade effect. */
.mxd-pinned__text-item .anim-uni-in-up {
  opacity: 1 !important;
  transform: none !important;
}

/* 3. Pinned card headings — ensure strong contrast */
.mxd-pinned__title {
  color: var(--t-bright, #111) !important;
}

/* 4. Pinned card body text — ensure readable contrast */
.mxd-pinned__text-item > p {
  color: var(--t-medium, #333) !important;
}

/* 5. Tags inside pinned cards — ensure border and text have enough contrast */
.mxd-pinned__tags .tag-outline {
  color: var(--t-bright, #333) !important;
  border-color: var(--st-bright, #333) !important;
}

/* 6. "View Project" links — use brand blue for clear visibility */
.mxd-pinned__text-item .btn-text {
  color: var(--accent, #0066ff) !important;
}

/* ================================================
   FIX: Scroll-reveal animation artifact on bottom-of-page sections.
   The scrub-based .reveal-type animation (GSAP + SplitType) ties
   character opacity to scroll position. Sections near the page bottom
   (FAQ, CTA, Contact) can't scroll far enough for the animation to
   finish, leaving text stuck at partial opacity (light gray).
   Force .char elements inside these sections to full opacity.
   ================================================ */

/* FAQ section heading */
#faq .reveal-type .char,
#faq .reveal-type .word {
  opacity: 1 !important;
}

/* CTA promo caption ("Let's create unforgettable events!") */
.mxd-promo__caption.reveal-type .char,
.mxd-promo__caption.reveal-type .word {
  opacity: 1 !important;
}

/* Contact form section heading ("Start Your Campaign") */
#contact .mxd-section-title .reveal-type .char,
#contact .mxd-section-title .reveal-type .word {
  opacity: 1 !important;
}