/* ES Cleaning Services — shared styles */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1B6FB8; --blue-dark:#0E4F8F; --blue-soft:#E8F2FB; --blue-tint:#F4F9FE;
  --green:#6BBF4E; --green-dark:#5FA73B; --green-soft:#E9F7E1;
  --orange:#FF8A3D; --yellow:#FFC844; --pink:#FF6B9B; --purple:#8C6BFF; --teal:#3CC8C8;
  --ink:#0F1B2C; --ink-2:#3A4859; --ink-dim:#6E7A8A;
  --line:#E5EAF0; --bg:#FFFFFF; --bg-2:#F7FAFD;
  --shadow:0 8px 24px -10px rgba(15,27,44,.12);
  --shadow-lg:0 24px 50px -20px rgba(15,27,44,.18);
}
html,body{background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{overflow-x:hidden}
@media(max-width:760px){body{padding-bottom:70px}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit}
.container{max-width:1240px;margin:0 auto;padding:0 20px}

/* ===== TOP STRIP ===== */
.topstrip{background:var(--blue-dark);color:#dfe7f3;font-size:13px;padding:8px 0}
.topstrip .row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.topstrip a{color:#fff;display:inline-flex;gap:6px;align-items:center}
.topstrip .accent{color:var(--yellow)}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand img{height:54px;width:auto;display:block}
.menu{display:none;gap:4px;margin-left:auto}
@media(min-width:980px){.menu{display:flex}}
.menu a{padding:10px 14px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink-2);transition:color .2s, background .2s}
.menu a:hover{color:var(--blue)}
.menu a.active{color:var(--blue);background:var(--blue-soft)}
.nav-cta{display:none;gap:10px;align-items:center}
@media(min-width:760px){.nav-cta{display:flex}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;font-weight:700;font-size:14.5px;transition:transform .2s, box-shadow .2s, background .2s, color .2s;cursor:pointer;border:0;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.btn-wa{background:#25d366;color:#fff}
.btn-lg{padding:14px 26px;font-size:16px;border-radius:13px}
.menu-toggle{margin-left:auto;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line);display:grid;place-items:center;background:#fff}
@media(min-width:980px){.menu-toggle{display:none}}
.mobile-menu{position:fixed;top:0;right:0;height:100vh;width:280px;background:#fff;z-index:80;transform:translateX(100%);transition:transform .3s;padding:28px 24px;box-shadow:-20px 0 60px rgba(15,27,44,.18);overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu .close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font-size:22px;color:var(--ink)}
.mobile-menu a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink)}
.mobile-menu .btn{width:100%;justify-content:center;margin-top:10px}
.scrim{position:fixed;inset:0;background:rgba(15,27,44,.45);z-index:75;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:all}

/* ===== SECTION HEADER ===== */
.section-head{text-align:center;max-width:680px;margin:0 auto 38px}
.section-head .tag{display:inline-block;padding:6px 13px;border-radius:99px;background:var(--green-soft);color:var(--green-dark);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.section-head h2{font-family:'Poppins',sans-serif;font-size:clamp(26px,3.6vw,36px);color:var(--ink);margin-bottom:10px;font-weight:800;letter-spacing:-.01em}
.section-head p{color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* ===== PAGE HERO (used on inner pages) ===== */
.page-hero{padding:50px 0 40px;background:linear-gradient(180deg,var(--blue-tint) 0%,#fff 100%);text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-100px;right:-150px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(107,191,78,.12) 0%,transparent 60%);pointer-events:none}
.page-hero::after{content:'';position:absolute;bottom:-120px;left:-150px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(27,111,184,.10) 0%,transparent 60%);pointer-events:none}
.page-hero .tag{display:inline-block;padding:6px 14px;border-radius:99px;background:#fff;color:var(--blue);border:1.5px solid var(--blue);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;position:relative;z-index:2}
.page-hero h1{font-family:'Poppins',sans-serif;font-size:clamp(30px,4.6vw,46px);font-weight:800;line-height:1.1;color:var(--ink);margin-bottom:14px;letter-spacing:-.01em;position:relative;z-index:2}
.page-hero h1 .accent{color:var(--blue)}
.page-hero p{color:var(--ink-2);font-size:17px;line-height:1.55;max-width:640px;margin:0 auto;position:relative;z-index:2}

/* ===== FOOTER ===== */
.footer{background:#0A1F33;color:#a8b5c8;padding:60px 0 24px;font-size:14px}
.foot-grid{display:grid;gap:36px;margin-bottom:34px}
@media(min-width:640px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot-brand img{height:60px;margin-bottom:14px;filter:brightness(1.1) saturate(1.1)}
.foot-brand p{font-size:14px;line-height:1.6;color:#a8b5c8;margin-bottom:14px}
.foot-social{display:flex;gap:10px;margin-top:14px}
.foot-social a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#fff;font-size:16px;transition:background .2s}
.foot-social a:hover{background:var(--blue)}
.footer h4{color:#fff;font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;margin-bottom:14px}
.footer ul{list-style:none}
.footer li{padding:5px 0}
.footer li a{color:#a8b5c8;font-size:14px;transition:color .2s}
.footer li a:hover{color:var(--green)}
.foot-contact{display:flex;flex-direction:column;gap:7px}
.foot-contact a{color:#a8b5c8;display:inline-flex;gap:8px;align-items:center}
.foot-contact a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#6e7d92}

/* ===== MOBILE BAR ===== */
.mobi-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(15,27,44,.06);padding:9px 10px calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:7px}
@media(min-width:761px){.mobi-bar{display:none}}
.mobi-bar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border-radius:11px;font-size:11.5px;font-weight:700;color:#fff;text-align:center}
.mobi-bar .call{background:var(--blue)}
.mobi-bar .wa{background:#25d366}
.mobi-bar .book{background:var(--green)}
.mobi-bar .ic{font-size:18px}

/* FAB */
.fab{position:fixed;bottom:24px;right:24px;z-index:48;width:56px;height:56px;border-radius:50%;background:#25d366;box-shadow:0 12px 26px -8px rgba(37,211,102,.55);display:grid;place-items:center;color:#fff;font-size:26px;transition:transform .2s}
@media(max-width:760px){.fab{display:none}}
.fab:hover{transform:scale(1.08)}

/* ===== UTILS ===== */
.bg-blue{background:var(--blue-soft);color:var(--blue)}
.bg-green{background:var(--green-soft);color:var(--green-dark)}
.bg-orange{background:#FFEBDA;color:var(--orange)}
.bg-yellow{background:#FFF4D1;color:#C99211}
.bg-pink{background:#FFE3ED;color:var(--pink)}
.bg-purple{background:#ECE3FF;color:var(--purple)}
.bg-teal{background:#D5F3F3;color:var(--teal)}

/* Photo placeholder pattern — clean diagonal stripes with icon */
.photo-ph{background:
  linear-gradient(135deg,rgba(27,111,184,.05) 25%,transparent 25%,transparent 50%,rgba(27,111,184,.05) 50%,rgba(27,111,184,.05) 75%,transparent 75%) 0 0 / 14px 14px,
  linear-gradient(180deg,var(--blue-soft) 0%,#fff 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--blue);position:relative;overflow:hidden}
.photo-ph .ic{font-size:54px;margin-bottom:8px;opacity:.85}
.photo-ph .lbl{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-dark);opacity:.5;text-align:center;padding:0 12px}


/* ============================================================
   MOBILE SAFETY-NET (added: prevent broken phone layout)
   ============================================================ */
*,*::before,*::after{max-width:100%}
html,body{overflow-x:hidden;-webkit-text-size-adjust:100%}
img,video,iframe,object,embed{max-width:100%;height:auto;display:block}
img{background:linear-gradient(135deg,#E8F2FB 0%,#F4F9FE 100%)}  /* shows light blue while loading instead of broken icon */

/* prevent any rogue inline content from blowing out viewport */
.container,nav,section,header,footer,article,aside{max-width:100%}
section,article{overflow-x:clip}

/* fix iOS Safari tap-highlight + text resize */
a,button,select,input,textarea{-webkit-tap-highlight-color:transparent}

/* form inputs must be at least 16px to stop iOS auto-zoom on focus */
input,select,textarea{font-size:16px !important}
@media(min-width:760px){
  input,select,textarea{font-size:14.5px !important}
}

/* MOBILE: tighter spacing so content doesn't feel cramped */
@media(max-width:640px){
  .container{padding:0 16px}
  .nav-inner{padding:10px 0}
  .brand img{height:42px}
  .topstrip{font-size:11.5px;padding:6px 0}
  .topstrip .row{gap:8px}
  .topstrip .row > div{font-size:11.5px}
  .page-hero{padding:30px 0 24px}
  .page-hero h1{font-size:26px;line-height:1.15}
  .page-hero p{font-size:14.5px}
  .section-head{margin-bottom:24px}
  .section-head h2{font-size:22px}
  .section-head p{font-size:14px}
  .btn{padding:10px 16px;font-size:13.5px}
  .btn-lg{padding:12px 20px;font-size:14.5px}
  /* mobile bar — leave bottom space so content not hidden */
  body{padding-bottom:64px}
  /* footer tighter */
  .footer{padding:36px 0 90px}
  .foot-grid{gap:24px}
  /* always 2-col image grids on tiny screens */
  .cat-grid{grid-template-columns:repeat(2,1fr) !important}
}

/* phone-only: force service cards to single column for full-width images */
@media(max-width:520px){
  .svc-grid{grid-template-columns:1fr !important}
  .gal-grid{grid-template-columns:1fr !important}
  .why-grid,.val-grid,.steps,.rev-grid,.feat-grid,.area-grid,.stats-grid{grid-template-columns:1fr !important}
  .hero-grid,.app-grid,.story-grid,.fm-grid{grid-template-columns:1fr !important}
  .book-fields{grid-template-columns:1fr !important}
  .row-2{grid-template-columns:1fr !important}
  .toggle-row{grid-template-columns:1fr 1fr}
  /* even tighter spacing */
  .container{padding:0 14px}
  .hero{padding:24px 0 36px}
  .hero h1{font-size:28px}
  .hero .lead{font-size:14.5px}
  .cats,.featured,.how,.app,.why,.reviews,.areas,.cta-final{padding:36px 0}
}

/* SVC cards: ensure image area never collapses on mobile */
.svc-card .img{min-height:180px}

/* fixed: hero booking widget on phones should sit ABOVE the trust badges */
@media(max-width:979px){
  .hero-grid{display:flex;flex-direction:column-reverse}
  .hero-trust{justify-content:center;text-align:center}
}

/* image cover fallback: keep transparent gradient if image fails */
.svc-card .img img{width:100%;height:100%;object-fit:cover;display:block}
.cat-tile img{width:100%;height:auto}

/* mobile bar — make sure it's always above content */
.mobi-bar{z-index:99}

/* prevent any iframe blowing out width */
iframe{max-width:100%}


/* ============================================================
   PREMIUM ANIMATIONS — cleaning-themed, mobile-safe
   ============================================================ */

/* respect users' reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* fade-up reveal — applied via .reveal class + IntersectionObserver */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.6,.3,1), transform .8s cubic-bezier(.2,.6,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

/* floating bubbles in hero background — pure CSS */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubbles span{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.9),rgba(107,191,78,.18) 45%,rgba(27,111,184,.10));box-shadow:inset -2px -3px 8px rgba(27,111,184,.12), 0 4px 18px rgba(27,111,184,.12);opacity:.55;animation:floatUp linear infinite}
@keyframes floatUp{
  0%   {transform:translateY(0)        scale(.85) rotate(0deg);  opacity:0}
  10%  {opacity:.55}
  90%  {opacity:.55}
  100% {transform:translateY(-110vh)   scale(1.1)  rotate(180deg);opacity:0}
}

/* sparkle accent — small twinkling dots */
.sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(255,255,255,.65);pointer-events:none;animation:sparkleAnim 2.2s ease-in-out infinite}
@keyframes sparkleAnim{
  0%, 100% {transform:scale(0);   opacity:0}
  50%      {transform:scale(1.2); opacity:1}
}

/* shimmer on the booking widget edge */
.shimmer{position:relative;overflow:hidden;isolation:isolate}
.shimmer::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(107,191,78,.55) 80deg, transparent 160deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rotate 5s linear infinite;pointer-events:none;z-index:2
}
@keyframes rotate{ to {transform:rotate(360deg)} }

/* animated stat counters — pulse subtle on enter */
.stat .num.in{animation:popIn .8s cubic-bezier(.2,1.4,.4,1) both}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* card hover lift — works on touch too via active state */
.cat-tile, .svc-card, .why-card, .rev-card, .feat-card, .val-card, .team-card{
  transition:transform .35s cubic-bezier(.2,.6,.3,1), box-shadow .35s cubic-bezier(.2,.6,.3,1), border-color .25s;
  will-change:transform
}
.cat-tile:active, .svc-card:active{transform:translateY(-2px) scale(.99)}

/* CTA buttons — soft pulse to draw attention */
.hero-cta-row .btn-primary, .pc-cta .btn, .cta-row .btn-primary{
  animation:softPulse 3.6s ease-in-out infinite
}
@keyframes softPulse{
  0%, 100% {box-shadow:0 6px 20px -8px rgba(27,111,184,.55)}
  50%      {box-shadow:0 10px 28px -6px rgba(27,111,184,.85), 0 0 0 6px rgba(27,111,184,.08)}
}

/* svg social icons — colored hover */
.foot-social a{transition:background .25s, color .25s, transform .25s}
.foot-social a:hover{transform:translateY(-2px) scale(1.05)}

/* on hover individual brand color */
.foot-social a[aria-label="Instagram"]:hover{background:linear-gradient(135deg,#FFD972,#FF6B9B,#8C6BFF)}
.foot-social a[aria-label="Facebook"]:hover{background:#1877F2}
.foot-social a[aria-label="LinkedIn"]:hover{background:#0A66C2}
.foot-social a[aria-label="WhatsApp"]:hover{background:#25d366}