/* =====================================================
   ALI ADVERTISING — Responsive Stylesheet
   Mobile-first: 375px → Tablet: 768px → Desktop: 1240px
   ===================================================== */

/* ── ROOT FIX: stop horizontal scroll on all devices ── */
html{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
*, *::before, *::after{
  box-sizing:border-box;
  max-width:100%;
}
body{
  overflow-x:hidden;
  min-width:320px;
}

/* ── GLOW ORBS: keep within viewport ── */
.hero-glow, .hero-glow-2,
.orb, .ch-glow, .ch-glow-2,
.blast-orb, .blast-orb-2{
  overflow:hidden;
  max-width:100vw;
  pointer-events:none;
}

/* ── WRAP: comfortable padding on small screens ── */
.wrap{ padding:0 18px; }
@media(min-width:768px){ .wrap{ padding:0 28px; } }

/* =====================================================
   NAVIGATION
   ===================================================== */
.site-nav .wrap{
  height:68px;
  gap:10px;
}
.brand img{ height:38px; }
.brand-name{ font-size:14px; }

/* Mobile nav */
@media(max-width:880px){
  .nav-links{
    position:fixed; inset:68px 0 0 0;
    height:calc(100dvh - 68px);
    background:var(--paper);
    flex-direction:column; justify-content:flex-start;
    padding:32px 24px; gap:20px;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto; overflow-x:hidden;
    z-index:99;
    box-shadow:-4px 0 24px rgba(0,0,0,.08);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:22px; padding:8px 0; border-bottom:1px solid var(--line); }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; width:36px; height:36px;
               align-items:center; justify-content:center; }
  .nav-toggle span{ width:22px; height:2px; }
  .nav-cta{ display:none; }
  .lang-toggle{ margin-left:0; margin-top:12px; }
}

/* Tablet nav adjustments */
@media(min-width:881px) and (max-width:1100px){
  .nav-links{ gap:20px; }
  .nav-links a{ font-size:13.5px; }
  .lang-toggle{ margin-left:8px; }
}

/* =====================================================
   HERO — HOME
   ===================================================== */
.hero{ padding:72px 0 60px; min-height:auto; }

@media(max-width:880px){
  .hero .wrap{
    grid-template-columns:1fr;
    gap:40px;
    padding-top:32px;
  }
  .hero h1{ font-size:clamp(36px,10vw,52px); }
  .hero p.lead{ font-size:16px; }
  .hero-panel-wrap{ order:-1; max-width:300px; margin:0 auto; }
  .hero-panel{ padding:28px 24px; }
  .hero-panel img{ max-width:180px; }
  .panel-tag{ font-size:10px; padding:4px 8px; }
  .panel-tag.t1{ left:-10px; }
  .panel-tag.t2{ right:-10px; }
  .hero-actions{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-actions .btn{ width:100%; justify-content:center; padding:14px 20px; }
  .spec-row{ gap:8px; }
  .spec-tag{ font-size:10px; padding:5px 9px; }
  .hero-glow{ width:350px; height:350px; top:-100px; right:-80px; }
  .hero-glow-2{ width:280px; height:280px; bottom:-80px; left:-60px; }
}

@media(max-width:480px){
  .hero h1{ font-size:32px; }
  .hero p.lead{ font-size:15px; }
}

/* =====================================================
   PAGE HERO (sub-pages)
   ===================================================== */
.page-hero{ padding:60px 0 70px; }
@media(max-width:768px){
  .page-hero{ padding:48px 0 56px; }
  .page-hero h1{ font-size:clamp(26px,7vw,38px); }
  .page-hero p.lead{ font-size:15px; }
}

/* =====================================================
   CONTACT HERO
   ===================================================== */
@media(max-width:768px){
  .contact-hero{ padding:56px 0 60px; }
  .contact-hero h1{ font-size:clamp(26px,7vw,40px); }
}

/* =====================================================
   LOGO STRIP
   ===================================================== */
.logo-strip{ padding:24px 0; }
.logo-strip-head{ font-size:10px; padding-bottom:12px; }
.logo-item{ padding:0 28px; min-width:140px; height:52px; }
.logo-name{ font-size:14px; }
@media(max-width:480px){
  .logo-item{ padding:0 20px; min-width:120px; }
  .logo-name{ font-size:12px; }
}

/* =====================================================
   MARQUEE (photo strip)
   ===================================================== */
.marquee-wrap{
  mask-image:linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.marquee-tile{ width:230px; }
@media(max-width:600px){
  .marquee-tile{ width:190px; }
}

/* =====================================================
   SERVICE GRID
   ===================================================== */
@media(max-width:980px){
  .service-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .service-cards-v2{ grid-template-columns:1fr; gap:20px; }
}
@media(max-width:600px){
  .service-grid{ grid-template-columns:1fr; }
  .service-card{ padding:26px 22px; }
}

/* =====================================================
   STATS STRIP
   ===================================================== */
@media(max-width:980px){
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .stat{ border-right:1px solid var(--line-dark); }
  .stat:nth-child(2n){ border-right:0; }
  .stat-strip .stat{ padding:28px 20px; }
  .stat .num{ font-size:32px; }
}
@media(max-width:480px){
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .stat .num{ font-size:28px; }
  .stat .lbl{ font-size:10px; }
  .stat-icon{ width:30px; height:30px; }
  .stat-icon svg{ width:14px; height:14px; }
}

/* =====================================================
   STATS ROW (homepage v2)
   ===================================================== */
.stats-inner{
  max-width:var(--container); margin:0 auto; padding:0 18px;
}
@media(max-width:600px){
  .stats-inner{ grid-template-columns:1fr 1fr; }
  .stat-v2{ padding:24px 16px; }
  .stat-v2 .num{ font-size:36px; }
}

/* =====================================================
   BEFORE / AFTER SLIDER
   ===================================================== */
.ba-section{ padding:64px 0; }
.ba-wrap{ aspect-ratio:16/10; margin-top:36px; border-radius:14px; }
@media(max-width:768px){
  .ba-section{ padding:56px 0; }
  .ba-wrap{ aspect-ratio:4/3; }
  .ba-label{ font-size:9px; padding:4px 8px; bottom:10px; }
  .ba-handle-btn{ width:38px; height:38px; }
  .ba-handle-btn svg{ width:18px; height:18px; }
}
@media(max-width:480px){
  .ba-wrap{ aspect-ratio:1/1; }
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testi-grid{ gap:20px; }
@media(max-width:980px){
  .testi-grid{ grid-template-columns:1fr; }
  .testi-card{ padding:26px 22px; }
}
@media(min-width:600px) and (max-width:980px){
  .testi-grid{ grid-template-columns:1fr 1fr; }
}

/* =====================================================
   PROCESS STEPS
   ===================================================== */
@media(max-width:768px){
  .process{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .process::before{ display:none; }
  .process-step{ padding:0 12px; }
  .process-step .pn{ width:46px; height:46px; font-size:14px; }
  .process-step h4{ font-size:15px; }
  .process-step p{ font-size:13.5px; }
}
@media(max-width:480px){
  .process{ grid-template-columns:1fr; row-gap:28px; }
}

/* =====================================================
   DETAIL GALLERY (3-col grid)
   ===================================================== */
.detail-gallery{ gap:18px; }
@media(max-width:768px){
  .detail-gallery{ grid-template-columns:1fr 1fr; gap:14px; }
}
@media(max-width:480px){
  .detail-gallery{ grid-template-columns:1fr; }
}

/* =====================================================
   MINI GALLERY (service detail pages)
   ===================================================== */
.mini-gallery{ gap:14px; }
@media(max-width:600px){
  .mini-gallery{ grid-template-columns:1fr; }
}

/* =====================================================
   SERVICE DETAIL (alternating layout)
   ===================================================== */
@media(max-width:880px){
  .service-detail{
    grid-template-columns:1fr !important;
    direction:ltr !important;
    padding:60px 0;
    gap:36px;
  }
  .sd-visual{ order:-1 !important; }
  .sd-visual{ aspect-ratio:16/9; }
  .sd-list{ grid-template-columns:1fr; }
}

/* =====================================================
   ABOUT PAGE — PROFILE GRID
   ===================================================== */
.profile-grid{ gap:36px; }
@media(max-width:880px){
  .profile-grid{ grid-template-columns:1fr; }
  .profile-photo{ max-width:260px; margin:0 auto; }
}

/* =====================================================
   ABOUT GRID (story section)
   ===================================================== */
@media(max-width:880px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .about-photo{ aspect-ratio:16/9; max-width:100%; border-radius:var(--radius); }
  .about-photo img{ border-radius:var(--radius); }
}

/* =====================================================
   VALUES GRID
   ===================================================== */
@media(max-width:880px){
  .values-grid{ grid-template-columns:1fr 1fr; gap:18px; }
}
@media(max-width:480px){
  .values-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   RELATED CARDS
   ===================================================== */
@media(max-width:768px){
  .related-grid{ grid-template-columns:1fr; gap:16px; }
}

/* =====================================================
   CTA BANNER
   ===================================================== */
@media(max-width:880px){
  .cta-banner{
    flex-direction:column; text-align:center;
    padding:40px 24px; gap:20px;
  }
  .cta-banner h2{ font-size:clamp(20px,5vw,28px); }
  .cta-banner .actions{ flex-direction:column; align-items:center; gap:12px; }
  .cta-banner .actions .btn{ width:100%; justify-content:center; }
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-main{ padding:0 18px; }
@media(min-width:768px){ .contact-main{ padding:0 28px; } }

.contact-layout{ gap:36px; }
@media(max-width:980px){
  .contact-layout{ grid-template-columns:1fr; }
  .contact-sidebar{ order:-1; }
  .wa-card, .info-glass{ border-radius:16px; }
}

.form-card{ padding:32px 24px; }
@media(max-width:480px){
  .form-card{ padding:24px 18px; border-radius:18px; }
  .field-row{ grid-template-columns:1fr; gap:14px; }
  .form-card h2{ font-size:22px; }
  .field-input, .field-select, .field-textarea{ font-size:16px; } /* prevent iOS zoom */
}

/* Contact info card */
.info-glass{ padding:24px 22px; }
.wa-card{ padding:24px 22px; }
@media(max-width:480px){
  .wa-card-top h3{ font-size:17px; }
  .wa-card .number{ font-size:15px; }
}

/* Quick action pills */
.quick-actions{ gap:8px; }
@media(max-width:480px){
  .quick-pill{ font-size:13px; padding:9px 14px; }
}

/* Google Maps */
@media(max-width:600px){
  .contact-layout + section iframe{ height:260px; }
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer-grid{ gap:32px; }
@media(max-width:880px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; }
}
@media(max-width:480px){
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-brand p{ font-size:13.5px; }
  .footer-col a{ font-size:14px; }
}
.footer-bottom{
  flex-direction:column; text-align:center; gap:10px;
}
@media(min-width:600px){
  .footer-bottom{ flex-direction:row; text-align:left; }
}

/* =====================================================
   WHATSAPP CHAT WIDGET
   ===================================================== */
.wa-chat-widget{
  bottom:100px; right:16px; left:16px; width:auto; max-width:340px;
  margin-left:auto;
}
@media(min-width:480px){
  .wa-chat-widget{ left:auto; right:24px; width:320px; bottom:104px; }
}

/* =====================================================
   SOUND TOGGLE & FIXED BUTTONS
   ===================================================== */
#sound-toggle{
  bottom:96px; right:16px;
  width:44px; padding:8px 0 6px;
}
@media(min-width:480px){
  #sound-toggle{ bottom:100px; right:24px; }
}

.wa-float{
  bottom:20px; right:16px;
  width:54px; height:54px;
}
@media(min-width:480px){
  .wa-float{ bottom:28px; right:28px; width:64px; height:64px; }
}
.wa-float svg{ width:28px; height:28px; }
@media(min-width:480px){
  .wa-float svg{ width:34px; height:34px; }
}

/* =====================================================
   LANGUAGE TOGGLE IN NAV
   ===================================================== */
.lang-toggle{ flex-shrink:0; }
@media(max-width:480px){
  .lang-btn{ font-size:11px; padding:4px 9px; }
}

/* =====================================================
   LIGHTBOX
   ===================================================== */
.lb-prev{ left:8px; }
.lb-next{ right:8px; }
@media(min-width:600px){
  .lb-prev{ left:20px; }
  .lb-next{ right:20px; }
}
.lb-inner img{ max-height:80dvh; }

/* =====================================================
   SECTIONS — general spacing
   ===================================================== */
section{ padding:64px 0; }
@media(max-width:768px){ section{ padding:52px 0; } }
@media(max-width:480px){ section{ padding:44px 0; } }

.section-head{ margin-bottom:40px; }
@media(max-width:480px){ .section-head{ margin-bottom:30px; } }
.section-head h2{ font-size:clamp(24px,6vw,40px); }

/* =====================================================
   TYPOGRAPHY — fluid scales
   ===================================================== */
.hero h1{ font-size:clamp(32px,9vw,68px); }
.page-hero h1{ font-size:clamp(26px,7vw,54px); }

.btn{ padding:12px 22px; font-size:14px; }
@media(max-width:480px){
  .btn{ padding:13px 20px; font-size:14.5px; border-radius:12px; }
}

/* =====================================================
   GALLERY (homepage 3-col)
   ===================================================== */
.gallery{ gap:18px; }
@media(max-width:880px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .gallery{ grid-template-columns:1fr; } }

/* =====================================================
   HERO SERVICE CARDS (if present)
   ===================================================== */
.hero-service-cards{ flex-direction:column; gap:10px; }
@media(min-width:600px){
  .hero-service-cards{ flex-direction:row; flex-wrap:wrap; }
  .hero-svc-card{ min-width:0; max-width:none; flex:1 1 200px; }
}

/* =====================================================
   TABLET-SPECIFIC FIXES (768px - 1024px)
   ===================================================== */
@media(min-width:768px) and (max-width:1024px){
  .hero .wrap{ grid-template-columns:1fr 1fr; gap:36px; padding-top:80px; }
  .hero h1{ font-size:clamp(34px,5vw,52px); }
  .hero-panel{ max-width:100%; }
  .service-grid{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr 1fr; }
  .profile-grid{ grid-template-columns:280px 1fr; }
  .contact-layout{ grid-template-columns:1fr 380px; }
  .service-detail{ grid-template-columns:1fr 1fr; }
}

/* =====================================================
   MISC FIXES
   ===================================================== */
/* Prevent long spec-tags from breaking layout */
.spec-tag, .spec-tag.on-dark{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* Brief notes don't overflow */
.brief-note{ flex-wrap:nowrap; align-items:flex-start; }
.brief-note svg{ flex-shrink:0; min-width:20px; }
@media(max-width:480px){ .brief-note{ flex-direction:column; gap:10px; } }

/* Spec cloud wraps nicely */
.spec-cloud{ flex-wrap:wrap; gap:8px; }

/* sd-list 2-col only on desktop */
.sd-list{ grid-template-columns:1fr 1fr; gap:10px 18px; }
@media(max-width:600px){ .sd-list{ grid-template-columns:1fr; } }

/* pain-grid */
@media(max-width:980px){ .pain-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .pain-grid{ grid-template-columns:1fr; } }

/* service-cards-v2 images don't break */
.sc-v2 .sc-img{ border-radius:0; overflow:hidden; }

/* Form fields: prevent iOS auto-zoom (needs 16px min) */
input, select, textarea{ font-size:max(16px, 1em); }
@media(min-width:480px){ input, select, textarea{ font-size:15px; } }

/* Footer spec tag on smaller screens */
@media(max-width:480px){ .footer-bottom .spec-tag.on-dark{ display:none; } }

/* Testimonials badge overlaps on small */
@media(max-width:360px){ .testi-badge{ display:none; } }

/* Profile bio spacing */
.profile-copy .bio + .bio{ margin-top:14px; }

/* Contact hero glow containment */
.contact-hero{ overflow:hidden; }
.ch-glow, .ch-glow-2{ overflow:visible; }

/* Stat strip on about page */
@media(max-width:600px){ 
  .bg-navy .stat-strip{ grid-template-columns:1fr 1fr; }
}


/* =====================================================
   CRITICAL OVERFLOW FIXES
   ===================================================== */

/* Nav links: prevent off-screen items from extending body scroll */
.nav-links{
  overflow:hidden !important;
}
/* When open, allow scrolling within the nav panel */
.nav-links.open{
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Contain glow orbs within their parent sections */
.hero, .hero-v2, .page-hero, .contact-hero,
.cta-blast, .ba-section{
  overflow:hidden;
}

/* Marquee: last tile must not stick out */
.marquee-wrap{
  overflow:hidden !important;
}

/* Prevent any absolute/decorative element from extending scroll */
.hero-glow, .hero-glow-2, .orb, .orb-1, .orb-2, .orb-3,
.ch-glow, .ch-glow-2, .blast-orb, .blast-orb-2{
  pointer-events:none;
  max-width:none; /* allow them to be large but contained by parent overflow:hidden */
}

/* html must also clip horizontal scroll */
html{
  overflow-x:clip !important; /* stronger than hidden - doesn't create stacking context */
}


/* =====================================================
   TARGETED FIXES — Round 2
   ===================================================== */

/* 1. SOUND TOGGLE — ensure always visible */
#sound-toggle{
  position:fixed !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
@media(max-width:479px){
  /* On very small screens, move sound btn to left side to avoid WA overlap */
  #sound-toggle{
    bottom:20px !important;
    right:auto !important;
    left:16px !important;
    width:44px !important;
  }
}
@media(min-width:480px) and (max-width:768px){
  #sound-toggle{
    bottom:100px !important;
    right:16px !important;
  }
}
@media(min-width:769px){
  #sound-toggle{
    bottom:104px !important;
    right:24px !important;
  }
}

/* 2. SERVICE GRID — 2 cols on tablet */
@media(min-width:640px) and (max-width:979px){
  .service-grid{ grid-template-columns:1fr 1fr !important; }
}

/* 3. BEFORE/AFTER SLIDER — fix mobile height */
@media(max-width:480px){
  .ba-wrap{ aspect-ratio:4/3 !important; }
  .ba-section{ padding:44px 0 !important; }
}

/* 4. Mobile hero panel — don't show at mobile if it takes too much space */
@media(max-width:480px){
  .hero-panel-wrap{ max-width:260px !important; }
  .hero-panel{ padding:22px 18px !important; }
  .hero-panel img{ max-width:160px !important; }
}

/* 5. Logo strip — ensure correct height on mobile */
.logo-strip{ display:block !important; }
@media(max-width:480px){
  .logo-strip{ padding:18px 0 !important; }
  .logo-strip-head{ padding-bottom:8px !important; font-size:9px !important; }
}

/* 6. Testimonial grid — 1 col mobile, 2 col tablet, 3 col desktop */
@media(max-width:639px){
  .testi-grid{ grid-template-columns:1fr !important; }
}
@media(min-width:640px) and (max-width:979px){
  .testi-grid{ grid-template-columns:1fr 1fr !important; }
}

/* 7. WA Float tooltip — hide on small screens to save space */
@media(max-width:479px){
  .wa-float-tooltip, .wa-float-label{ display:none !important; }
}

/* 8. Contact layout fix for medium screens */
@media(min-width:640px) and (max-width:979px){
  .contact-layout{ grid-template-columns:1fr !important; }
  .contact-sidebar{ order:0 !important; }
}

/* 9. Hero spec-row — wrap nicely on mobile */
@media(max-width:480px){
  .spec-row{ flex-direction:column; align-items:flex-start; gap:6px !important; }
  .spec-tag{ font-size:9.5px !important; }
}

/* 10. Process steps on tablet */
@media(min-width:640px) and (max-width:979px){
  .process{ grid-template-columns:1fr 1fr !important; }
  .ba-wrap{ aspect-ratio:16/10 !important; }
}

/* 11. SD list always 1 col on mobile */
@media(max-width:640px){
  .sd-list{ grid-template-columns:1fr !important; }
}

/* 12. Profile grid on tablet */
@media(min-width:640px) and (max-width:879px){
  .profile-grid{ grid-template-columns:200px 1fr !important; gap:28px !important; }
  .profile-photo{ max-width:200px !important; }
}

/* 13. Values grid tablet */
@media(min-width:640px) and (max-width:879px){
  .values-grid{ grid-template-columns:1fr 1fr !important; }
}

/* 14. About grid on tablet */
@media(min-width:640px) and (max-width:879px){
  .about-grid{ grid-template-columns:1fr !important; }
}

/* 15. Section padding tightening on mobile */
@media(max-width:390px){
  .wrap{ padding:0 16px !important; }
  .hero h1{ font-size:30px !important; }
}

/* 16. Pain grid on tablet */
@media(min-width:640px) and (max-width:879px){
  .pain-grid{ grid-template-columns:1fr 1fr !important; }
}

/* PAGE-ENTER: opacity only — no transform — preserves position:fixed children */
@keyframes page-enter-safe{
  from{ opacity:0; }
  to{ opacity:1; }
}
body{
  animation:page-enter-safe .4s ease both !important;
  transform:none !important;
}

/* ── HIDE SOUND TOGGLE BUTTON ── */
#sound-toggle{ display:none !important; }

/* =====================================================
   BUG FIXES — From live site screenshots
   1. Logo strip stacking vertically
   2. Before/After slider images not overlapping  
   3. WhatsApp widget huge black SVG icons
   ===================================================== */

/* ── FIX 1: LOGO STRIP — force horizontal scroll marquee ── */
.logo-strip{
  overflow:hidden !important;
  white-space:nowrap !important;
  display:block !important;
}
.logo-track{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  width:max-content !important;
  animation:logo-scroll 28s linear infinite !important;
}
.logo-item{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  min-width:140px !important;
  height:52px !important;
  padding:0 28px !important;
  border-right:1px solid rgba(11,31,58,.1) !important;
}
.logo-name{
  display:inline-block !important;
  white-space:nowrap !important;
}
@keyframes logo-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ── FIX 2: BEFORE/AFTER SLIDER — absolute position both images ── */
.ba-wrap{
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  width:100% !important;
}
.ba-before{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  filter:grayscale(1) brightness(.6) !important;
}
.ba-after{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  clip-path:inset(0 50% 0 0) !important;
}
.ba-before img,
.ba-after img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  pointer-events:none !important;
}
.ba-handle{
  position:absolute !important;
  top:0 !important; bottom:0 !important;
  left:50% !important; width:3px !important;
  transform:translateX(-50%) !important;
  z-index:10 !important;
  cursor:col-resize !important;
}
.ba-handle-btn{
  position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:11 !important;
  pointer-events:none !important;
}

/* ── FIX 3: WHATSAPP CHAT WIDGET — fix SVG icon sizes and colours ── */
.wa-chat-widget{
  position:fixed !important;
  z-index:9997 !important;
  overflow:hidden !important;
  font-family:'Space Grotesk','Inter',sans-serif !important;
}

/* Widget header green bar */
.wa-widget-head{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  background:linear-gradient(135deg,#075e54,#128c7e) !important;
  padding:16px 18px !important;
  flex-shrink:0 !important;
}

/* Avatar circle */
.wa-widget-avatar{
  width:42px !important; height:42px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.2) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}

/* ALL SVGs inside widget head: small white icon */
.wa-widget-head svg,
.wa-widget-avatar svg{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  fill:#fff !important;
  color:#fff !important;
  display:block !important;
  flex-shrink:0 !important;
}

/* ALL SVGs inside widget CTA button: small icon */
.wa-widget-cta svg{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  fill:#fff !important;
  color:#fff !important;
  display:inline-block !important;
  flex-shrink:0 !important;
}

/* CTA button layout */
.wa-widget-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  background:#25D366 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:13px 20px !important;
  width:100% !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
  font-size:15px !important;
  font-weight:700 !important;
  text-decoration:none !important;
}

/* Widget text info */
.wa-widget-name{
  font-weight:700 !important;
  font-size:15px !important;
  color:#fff !important;
  display:block !important;
}
.wa-widget-status{
  font-size:12px !important;
  color:rgba(255,255,255,.75) !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
}
.wa-widget-close{
  margin-left:auto !important;
  background:none !important;
  border:0 !important;
  cursor:pointer !important;
  color:rgba(255,255,255,.8) !important;
  font-size:18px !important;
  padding:0 !important;
  line-height:1 !important;
  flex-shrink:0 !important;
}

/* Chat body and bubble */
.wa-widget-body{
  padding:16px 18px !important;
  background:#e5ddd5 !important;
  min-height:80px !important;
}
.wa-widget-bubble{
  background:#fff !important;
  border-radius:0 12px 12px 12px !important;
  padding:12px 14px !important;
  max-width:85% !important;
  display:inline-block !important;
  font-size:14px !important;
  line-height:1.55 !important;
  color:#1a1a1a !important;
  box-shadow:0 1px 3px rgba(0,0,0,.12) !important;
}
.wa-widget-footer{
  padding:12px 14px !important;
  border-top:1px solid #f0f0f0 !important;
  background:#fff !important;
}

/* Widget position on mobile */
@media(max-width:480px){
  .wa-chat-widget{
    left:12px !important;
    right:12px !important;
    bottom:90px !important;
    width:auto !important;
    max-width:100% !important;
    border-radius:16px !important;
  }
}
@media(min-width:481px){
  .wa-chat-widget{
    left:auto !important;
    right:20px !important;
    bottom:100px !important;
    width:310px !important;
  }
}

/* =====================================================
   HOMEPAGE LAYOUT FIXES
   From content audit — fixing heights and arrangements
   ===================================================== */

/* ── 1. HERO: reduce height on mobile ── */
@media(max-width:767px){
  .hero{
    padding:52px 0 48px !important;
    min-height:auto !important;
  }
  .hero .wrap{
    padding-top:16px !important;
    padding-bottom:16px !important;
    gap:28px !important;
  }
  /* Panel: smaller and less dominant on mobile */
  .hero-panel-wrap{
    max-width:220px !important;
    margin:0 auto !important;
  }
  .hero-panel{
    padding:18px 16px !important;
  }
  .hero-panel img{
    max-width:140px !important;
    margin:0 auto !important;
  }
  /* Spec row text tighter */
  .panel-tag{
    font-size:9px !important;
    padding:3px 7px !important;
  }
  /* H1 comfortable size */
  .hero h1{
    font-size:clamp(28px, 8.5vw, 38px) !important;
    margin-bottom:14px !important;
  }
  .hero p.lead{
    font-size:15px !important;
    margin-bottom:22px !important;
  }
  /* Buttons full width */
  .hero-actions{
    flex-direction:column !important;
    gap:10px !important;
  }
  .hero-actions .btn{
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
  }
}

/* ── 2. MARQUEE: tighter on mobile ── */
@media(max-width:767px){
  .marquee-wrap{ padding:0 !important; }
  .section-head.mq-head{ padding:40px 18px 20px !important; }
}

/* ── 3. SERVICES: proper mobile layout ── */
@media(max-width:639px){
  .service-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .service-card{
    padding:22px 18px !important;
  }
  .service-card h3{ font-size:17px !important; }
  .service-card p{ font-size:14px !important; }
}

/* ── 4. STATS: compact 2x2 grid on mobile ── */
@media(max-width:639px){
  .stat-strip{
    grid-template-columns:1fr 1fr !important;
    gap:0 !important;
  }
  .stat{
    padding:20px 12px !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.08); }
  .stat:nth-child(3),.stat:nth-child(4){ border-bottom:0; }
  .stat-icon{ display:none !important; } /* hide icons on mobile for compactness */
  .stat .num{ font-size:32px !important; }
  .stat .lbl{ font-size:11px !important; }
}

/* ── 5. BEFORE/AFTER: better aspect ratio on mobile ── */
@media(max-width:639px){
  .ba-section{ padding:48px 0 !important; }
  .ba-wrap{
    aspect-ratio:4/3 !important;
    margin-top:28px !important;
    border-radius:12px !important;
  }
  .ba-section .section-head p{
    font-size:14px !important;
  }
}

/* ── 6. TESTIMONIALS: compact on mobile ── */
@media(max-width:639px){
  .testimonials{ padding:52px 0 !important; }
  .testi-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .testi-card{
    padding:22px 18px !important;
  }
  .testi-card::before{ font-size:60px !important; top:10px !important; right:14px !important; }
  .testi-text{ font-size:14px !important; line-height:1.6 !important; }
  .testi-name{ font-size:13.5px !important; }
  .testi-co{ font-size:11px !important; }
  .testi-stars span{ font-size:14px !important; }
  .testi-badge{ font-size:9px !important; padding:2px 7px !important; }
  .testi-author{ padding-top:12px !important; gap:10px !important; }
  .testi-avatar{ width:38px !important; height:38px !important; font-size:15px !important; }
}

/* ── 7. PROCESS: compact 2x2 on mobile ── */
@media(max-width:639px){
  .process{
    grid-template-columns:1fr 1fr !important;
    gap:24px 16px !important;
  }
  .process-step p{ font-size:13px !important; }
  .process-step h4{ font-size:14px !important; }
  .process-step .pn{ width:40px !important; height:40px !important; font-size:14px !important; }
  .process-step .ps-emoji{ font-size:22px !important; }
}

/* ── 8. CTA BANNER: stack on mobile ── */
@media(max-width:639px){
  .cta-banner{
    flex-direction:column !important;
    text-align:center !important;
    padding:36px 20px !important;
    gap:16px !important;
    border-radius:20px !important;
  }
  .cta-banner h2{ font-size:22px !important; }
  .cta-banner p{ font-size:15px !important; }
  .cta-banner .actions{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
  }
  .cta-banner .actions .btn{
    width:100% !important;
    justify-content:center !important;
  }
}

/* ── 9. FOOTER: compact single column on mobile ── */
@media(max-width:639px){
  footer{ padding:44px 0 24px !important; }
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .footer-brand{ margin-bottom:4px !important; }
  .footer-brand p{ font-size:13px !important; margin-top:8px !important; }
  .footer-col h5{ font-size:11px !important; margin-bottom:10px !important; }
  .footer-col a, .footer-col li{ font-size:13.5px !important; }
  .footer-col ul{ gap:8px !important; }
  .footer-bottom{
    padding-top:20px !important;
    margin-top:20px !important;
    flex-direction:column !important;
    gap:6px !important;
    font-size:12px !important;
  }
}

/* ── 10. LIGHTBOX: hide the blank img (it's a placeholder when closed) ── */
.lb-inner img[src=""]{
  display:none !important;
}

/* ── 11. GENERAL SECTION SPACING: tighter on mobile ── */
@media(max-width:639px){
  section{ padding:44px 0 !important; }
  .section-head{ margin-bottom:28px !important; }
  .section-head h2{ font-size:clamp(22px, 6vw, 30px) !important; }
  .section-head p{ font-size:14px !important; }
  .eyebrow{ font-size:10px !important; }
}

/* ── 12. TABLET ADJUSTMENTS ── */
@media(min-width:640px) and (max-width:1023px){
  .testi-grid{ grid-template-columns:1fr 1fr !important; gap:18px !important; }
  .service-grid{ grid-template-columns:1fr 1fr !important; gap:20px !important; }
  .hero h1{ font-size:clamp(32px, 5.5vw, 46px) !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; gap:28px !important; }
  .process{ grid-template-columns:1fr 1fr !important; }
}

/* ── 13. LOGO STRIP: ensure proper height and no overflow ── */
.logo-strip{
  overflow:hidden !important;
  position:relative !important;
}
.logo-strip .wrap{ display:none !important; } /* hide extra wrap if any */

/* ── HERO MOBILE: reduce tall stacked content ── */
@media(max-width:639px){
  /* Hide panel on very small screens to save vertical space */
  .hero-panel-wrap{
    max-width:200px !important;
  }
  .hero-panel{
    padding:16px !important;
  }
  /* Tighten lead text */
  .hero p.lead{
    font-size:14.5px !important;
    line-height:1.55 !important;
    margin-bottom:18px !important;
  }
  /* Tighten spec row */
  .spec-row{
    margin-top:12px !important;
    gap:6px !important;
  }
  /* Hero overall padding */
  .hero{
    padding:40px 0 36px !important;
  }
  .hero .wrap{
    gap:22px !important;
  }
}

/* ── FOOTER MOBILE: reduce col padding ── */
@media(max-width:639px){
  .footer-col ul{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
  }
  .footer-col{
    padding:0 !important;
  }
  footer .wrap{
    padding-bottom:16px !important;
  }
}

/* ── DESKTOP BEFORE/AFTER: cap height ── */
@media(min-width:1024px){
  .ba-section{ padding:72px 0 !important; }
  .ba-wrap{
    aspect-ratio:21/9 !important;
    max-height:520px !important;
  }
}

/* ── CRITICAL: Cap ALL SVGs inside WA widget — iOS Safari fix ── */
.wa-chat-widget svg,
.wa-chat-widget svg path{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  min-width:unset !important;
  min-height:unset !important;
  fill:white !important;
  display:block !important;
  flex-shrink:0 !important;
}
.wa-widget-cta svg,
.wa-widget-cta svg path{
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
}
/* Widget must never grow taller than screen */
.wa-chat-widget{
  max-height:calc(100dvh - 120px) !important;
  overflow-y:auto !important;
}
/* Widget animation only when open, invisible when closed */
.wa-chat-widget:not(.open){
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.wa-chat-widget.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:all !important;
}

/* =====================================================
   BEFORE/AFTER SLIDER — Image Size Fix
   Single clean set of rules, override all conflicts
   ===================================================== */

/* BASE — wide cinematic on desktop */
.ba-wrap{
  position:relative !important;
  overflow:hidden !important;
  width:100% !important;
  aspect-ratio:16/7 !important;
  border-radius:16px !important;
  box-shadow:0 24px 64px rgba(0,0,0,.55) !important;
  margin-top:40px !important;
  cursor:col-resize !important;
}

/* TABLET */
@media(max-width:1023px){
  .ba-wrap{ aspect-ratio:16/9 !important; }
}

/* MOBILE — taller to show image properly */
@media(max-width:639px){
  .ba-wrap{
    aspect-ratio:4/3 !important;
    border-radius:12px !important;
    margin-top:24px !important;
  }
}

/* Images must fill the container */
.ba-before,
.ba-after{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important; padding:0 !important;
}
.ba-before img,
.ba-after img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  pointer-events:none !important;
}
.ba-before{
  filter:grayscale(1) brightness(.55) !important;
}
.ba-after{
  clip-path:inset(0 50% 0 0) !important;
}

/* Handle */
.ba-handle{
  position:absolute !important;
  top:0 !important; bottom:0 !important;
  left:50% !important;
  width:3px !important;
  background:linear-gradient(180deg,#4fc3f0,#fff,#4fc3f0) !important;
  transform:translateX(-50%) !important;
  z-index:10 !important;
  box-shadow:0 0 12px rgba(79,195,240,.6) !important;
}
.ba-handle-btn{
  position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:48px !important; height:48px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#1c7fc4,#4fc3f0) !important;
  border:3px solid #fff !important;
  display:flex !important;
  align-items:center !important; justify-content:center !important;
  box-shadow:0 4px 16px rgba(0,0,0,.4) !important;
  z-index:11 !important;
}
.ba-handle-btn svg{
  width:22px !important; height:22px !important;
  fill:#fff !important;
}

/* Labels */
.ba-label{
  position:absolute !important;
  bottom:14px !important;
  font-family:'JetBrains Mono',monospace !important;
  font-size:11px !important; letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:5px 11px !important;
  border-radius:6px !important;
  z-index:10 !important;
  pointer-events:none !important;
}
.ba-label.left{
  left:14px !important;
  background:rgba(0,0,0,.6) !important;
  color:rgba(255,255,255,.8) !important;
}
.ba-label.right{
  right:14px !important;
  background:rgba(28,127,196,.75) !important;
  color:#fff !important;
}

/* ── BA SLIDER: Taller + better image framing ── */
.ba-wrap{
  aspect-ratio:unset !important;
  height:460px !important;
  max-height:60vh !important;
}
@media(max-width:1023px){
  .ba-wrap{
    height:360px !important;
    max-height:55vw !important;
  }
}
@media(max-width:639px){
  .ba-wrap{
    height:280px !important;
    max-height:75vw !important;
    min-height:220px !important;
  }
}
/* Show the most impactful part of the images */
.ba-before img{
  object-position:center 30% !important;
}
.ba-after img{
  object-position:center 30% !important;
}

/* ── BEFORE/AFTER: proper aspect ratios at each breakpoint ── */
@media(max-width:639px){
  .ba-wrap{
    aspect-ratio:3/4 !important;  /* taller on mobile — portrait */
    max-height:480px !important;
    border-radius:14px !important;
    margin-top:28px !important;
  }
  .ba-section{ padding:44px 0 !important; }
  .ba-handle-btn{ width:38px !important; height:38px !important; }
  .ba-handle-btn svg{ width:18px !important; height:18px !important; }
  .ba-label{ font-size:9px !important; padding:4px 9px !important; bottom:12px !important; }
}
@media(min-width:640px) and (max-width:1023px){
  .ba-wrap{
    aspect-ratio:4/3 !important;  /* square-ish on tablet */
    max-height:520px !important;
  }
}
@media(min-width:1024px){
  .ba-wrap{
    aspect-ratio:16/9 !important; /* widescreen on desktop */
    max-height:580px !important;
  }
}

/* =====================================================
   BA SLIDER FINAL OVERRIDE — fixes image crop issue
   ===================================================== */
.ba-wrap{
  aspect-ratio:4/3 !important;
  max-height:none !important;
  min-height:240px !important;
}
@media(max-width:480px){
  .ba-wrap{ aspect-ratio:3/4 !important; min-height:280px !important; }
}
@media(min-width:481px) and (max-width:767px){
  .ba-wrap{ aspect-ratio:4/3 !important; min-height:300px !important; }
}
@media(min-width:768px) and (max-width:1199px){
  .ba-wrap{ aspect-ratio:4/3 !important; min-height:400px !important; }
}
@media(min-width:1200px){
  .ba-wrap{ aspect-ratio:16/9 !important; max-height:600px !important; }
}
/* ensure images always fill container and show center */
.ba-before img, .ba-after img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 40% !important;
  display:block !important;
}

/* BA desktop final fix */
@media(min-width:1200px){
  .ba-section .wrap .ba-wrap,
  #ba-wrap{
    aspect-ratio:16/9 !important;
    min-height:500px !important;
    max-height:620px !important;
  }
}

/* =====================================================
   BA SLIDER — HEIGHT-BASED APPROACH (more reliable)
   Uses min-height instead of aspect-ratio
   ===================================================== */
#ba-wrap{
  aspect-ratio:unset !important;
  min-height:300px !important;
  height:300px !important;
  max-height:300px !important;
}
@media(min-width:480px){
  #ba-wrap{ height:380px !important; max-height:380px !important; }
}
@media(min-width:640px){
  #ba-wrap{ height:440px !important; max-height:440px !important; }
}
@media(min-width:768px){
  #ba-wrap{ height:480px !important; max-height:480px !important; }
}
@media(min-width:1024px){
  #ba-wrap{ height:520px !important; max-height:520px !important; }
}
@media(min-width:1240px){
  #ba-wrap{ height:560px !important; max-height:560px !important; }
}

/* =====================================================
   BA SLIDER — MAXIMIZED IMAGE FIX
   ===================================================== */
/* Force much taller heights to show full Lotus images */
#ba-wrap{
  aspect-ratio:unset !important;
  min-height:320px !important;
  height:320px !important;
  max-height:320px !important;
}
@media(min-width:400px){
  #ba-wrap{ height:360px !important; max-height:360px !important; }
}
@media(min-width:520px){
  #ba-wrap{ height:420px !important; max-height:420px !important; }
}
@media(min-width:640px){
  #ba-wrap{ height:480px !important; max-height:480px !important; }
}
@media(min-width:768px){
  #ba-wrap{ height:540px !important; max-height:540px !important; }
}
@media(min-width:1024px){
  #ba-wrap{ height:600px !important; max-height:600px !important; }
}
@media(min-width:1280px){
  #ba-wrap{ height:640px !important; max-height:640px !important; }
}
/* Image focal point: centre of the sign (upper-middle area) */
.ba-before img{
  object-position:center 30% !important;
}
.ba-after img{
  object-position:center 30% !important;
}

/* ── BA SLIDER IMAGE FIX — show full Lotus sign ── */
.ba-before img,
.ba-after img{
  object-fit:cover !important;
  object-position:center 35% !important;
  width:100% !important;
  height:100% !important;
}
/* BEFORE = grayscale (show what it looks like desaturated/plain) */
.ba-before{
  filter:grayscale(1) brightness(.65) !important;
}
/* AFTER = full vibrant colour */
.ba-after{
  filter:none !important;
}

/* BA labels — swap colours to match visual sides */
.ba-label.left{
  background:rgba(28,127,196,.85) !important;
  color:#fff !important;
}
.ba-label.right{
  background:rgba(0,0,0,.6) !important;
  color:rgba(255,255,255,.8) !important;
}

/* =====================================================
   MOBILE NAV — Always visible horizontal nav
   Replaces hamburger with scrollable link row
   ===================================================== */

/* ── On mobile: 2-row nav ──
   Row 1: Logo (left) + Get a Quote (right)
   Row 2: Horizontal scrollable link bar
── */
@media(max-width:880px){

  /* Stack nav into 2 rows */
  .site-nav .wrap{
    flex-wrap:wrap !important;
    height:auto !important;
    padding:10px 16px 0 !important;
    gap:0 !important;
  }

  /* Row 1: Logo takes full width */
  .brand{
    flex:1 !important;
    min-width:0 !important;
  }

  /* Row 2: Nav links — always visible, horizontal scroll */
  .nav-links{
    /* Override the off-screen position */
    position:static !important;
    transform:none !important;
    height:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    inset:auto !important;
    overflow:hidden !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    /* Full width below logo */
    width:calc(100% + 32px) !important;
    margin:8px -16px 0 !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:0 !important;
    order:10 !important;
    /* Hide scrollbar visually */
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    border-top:1px solid rgba(0,0,0,.07) !important;
  }
  .nav-links::-webkit-scrollbar{ display:none !important; }

  /* Nav link items — compact pills */
  .nav-links > li{
    flex-shrink:0 !important;
  }
  .nav-links a{
    display:block !important;
    padding:10px 14px !important;
    font-size:13px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    color:var(--ink) !important;
  }
  .nav-links a.active{
    color:var(--blue-600) !important;
  }

  /* Hide the Get a Quote in nav-links on mobile (shown as button in row 1) */
  .nav-links .nav-cta-mobile{
    display:none !important;
  }

  /* Get a Quote button — compact in row 1 */
  .nav-cta{
    display:inline-flex !important;
    font-size:12px !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    flex-shrink:0 !important;
  }

  /* Hide hamburger toggle — not needed anymore */
  .nav-toggle{
    display:none !important;
  }

  /* Language toggle — slot beside Get a Quote */
  .lang-toggle{
    margin-left:8px !important;
    order:5 !important;
  }

  /* Nav total height accounting for 2 rows */
  .site-nav{
    min-height:auto !important;
  }

  /* Hero/page-hero padding-top to account for 2-row nav */
  .hero, .hero-v2{
    padding-top:48px !important;
  }
  .page-hero, .contact-hero{
    padding-top:48px !important;
  }
}

/* ── Slightly larger phones (414px+) ── */
@media(min-width:414px) and (max-width:880px){
  .nav-links a{
    padding:10px 16px !important;
    font-size:13.5px !important;
  }
}