/* ============================================================
   LAVA CONCEPTS — REDESIGNED STYLESHEET
   Colour palette: Blues & White only. Water-drop animations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ---- Design Tokens ---- */
:root {
  /* Blues only — no orange */
  --navy:           #091C45;
  --primary:        #1A3F8F;
  --primary-mid:    #1E4DB7;
  --primary-light:  #2563EB;
  --sky:            #0EA5E9;   /* accent — replaces orange everywhere */
  --sky-dark:       #0284C7;
  --sky-light:      #38BDF8;
  --blue-50:        #F0F9FF;
  --blue-100:       #E0F2FE;
  --blue-200:       #BAE6FD;
  --blue-glow:      rgba(14,165,233,0.35);
  --success:        #0EA5E9;   /* keep in blue family */

  --white:          #FFFFFF;
  --off-white:      #F8FAFC;
  --gray-100:       #F1F5F9;
  --gray-200:       #E2E8F0;
  --gray-300:       #CBD5E1;
  --gray-400:       #94A3B8;
  --gray-500:       #64748B;
  --gray-600:       #475569;
  --gray-700:       #334155;
  --gray-800:       #1E293B;
  --gray-900:       #0F172A;

  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --section-pad:  88px;
  --max-width:    1200px;

  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.09);
  --shadow-lg:  0 10px 32px rgba(0,0,0,0.11);
  --shadow-xl:  0 20px 48px rgba(0,0,0,0.13);
  --shadow-sky: 0 8px 28px rgba(14,165,233,0.3);

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   36px;
  --radius-pill: 9999px;

  --transition:      0.28s ease;
  --transition-slow: 0.55s ease;
  --header-h:        76px;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--gray-800);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a  { color:inherit; text-decoration:none; transition:var(--transition); }
ul,ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; }

/* ---- Layout ---- */
.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.section { padding:var(--section-pad) 0; }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.14;
  color:var(--gray-900);
}
h1 { font-size:clamp(2rem,5vw,3.6rem); }
h2 { font-size:clamp(1.75rem,4vw,2.6rem); }
h3 { font-size:clamp(1.1rem,2.5vw,1.55rem); }
h4 { font-size:1.1rem; }
p  { color:var(--gray-600); line-height:1.82; }

.section-header { text-align:center; max-width:680px; margin:0 auto 56px; }
.section-label {
  display:inline-block;
  font-family:var(--font-heading);
  font-size:0.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.2em;
  color:var(--sky); margin-bottom:12px;
}
.section-title  { margin-bottom:16px; }
.section-subtitle { font-size:1.05rem; color:var(--gray-500); max-width:560px; margin:0 auto; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px;
  border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-size:0.9rem; font-weight:700;
  border:none; cursor:pointer; transition:var(--transition); white-space:nowrap;
}
.btn-primary {
  background:var(--sky);
  color:var(--white);
  box-shadow:0 4px 18px var(--blue-glow);
}
.btn-primary:hover {
  background:var(--sky-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(14,165,233,0.48);
  color:var(--white);
}
.btn-secondary {
  background:rgba(255,255,255,0.12);
  color:var(--white);
  border:2px solid rgba(255,255,255,0.5);
  backdrop-filter:blur(6px);
}
.btn-secondary:hover {
  background:rgba(255,255,255,0.22);
  border-color:var(--white);
  transform:translateY(-2px);
  color:var(--white);
}
.btn-outline {
  background:transparent;
  color:var(--primary);
  border:2px solid var(--primary);
}
.btn-outline:hover { background:var(--primary); color:var(--white); transform:translateY(-2px); }
.btn-lg { padding:18px 38px; font-size:1rem; }

/* ============================================================
   WATER BUBBLE ANIMATIONS
   ============================================================ */
.bubbles-wrap {
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none; z-index:1;
}
.bubble {
  position:absolute; bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%);
  border:1px solid rgba(255,255,255,0.12);
  animation:bubble-rise linear infinite;
}
@keyframes bubble-rise {
  0%   { transform:translateY(0) translateX(0);   opacity:0; }
  6%   { opacity:0.9; }
  92%  { opacity:0.35; }
  100% { transform:translateY(-110vh) translateX(15px); opacity:0; }
}
.bubble:nth-child(1)  { width:10px; height:10px; left:5%;   animation-duration:9s;  animation-delay:0s; }
.bubble:nth-child(2)  { width:18px; height:18px; left:12%;  animation-duration:12s; animation-delay:1.2s; }
.bubble:nth-child(3)  { width:7px;  height:7px;  left:22%;  animation-duration:8s;  animation-delay:3s; }
.bubble:nth-child(4)  { width:22px; height:22px; left:30%;  animation-duration:14s; animation-delay:0.5s; }
.bubble:nth-child(5)  { width:12px; height:12px; left:40%;  animation-duration:10s; animation-delay:2.2s; }
.bubble:nth-child(6)  { width:28px; height:28px; left:50%;  animation-duration:16s; animation-delay:4s; }
.bubble:nth-child(7)  { width:8px;  height:8px;  left:60%;  animation-duration:9s;  animation-delay:1.8s; }
.bubble:nth-child(8)  { width:16px; height:16px; left:68%;  animation-duration:11s; animation-delay:3.4s; }
.bubble:nth-child(9)  { width:24px; height:24px; left:78%;  animation-duration:13s; animation-delay:0.9s; }
.bubble:nth-child(10) { width:9px;  height:9px;  left:86%;  animation-duration:8s;  animation-delay:5s; }
.bubble:nth-child(11) { width:14px; height:14px; left:93%;  animation-duration:10s; animation-delay:2.7s; }
.bubble:nth-child(12) { width:20px; height:20px; left:2%;   animation-duration:15s; animation-delay:6s; }
/* Extra bubbles 13-18 for denser hero coverage */
.bubble:nth-child(13) { width:11px; height:11px; left:17%;  animation-duration:11s; animation-delay:7s; }
.bubble:nth-child(14) { width:15px; height:15px; left:35%;  animation-duration:13s; animation-delay:4.5s; }
.bubble:nth-child(15) { width:6px;  height:6px;  left:55%;  animation-duration:7s;  animation-delay:8s; }
.bubble:nth-child(16) { width:19px; height:19px; left:72%;  animation-duration:12s; animation-delay:3.8s; }
.bubble:nth-child(17) { width:8px;  height:8px;  left:82%;  animation-duration:9s;  animation-delay:6.5s; }
.bubble:nth-child(18) { width:26px; height:26px; left:45%;  animation-duration:17s; animation-delay:2s; }

/* drop-shape removed — bubbles only */

/* Ripple rings */
.ripple-ring {
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.1);
  animation:ripple-out ease-out infinite;
  pointer-events:none;
}
@keyframes ripple-out {
  0%   { width:40px; height:40px; opacity:0.7; }
  100% { width:320px; height:320px; opacity:0; }
}
.ripple-ring.r1 { bottom:20%; right:12%; animation-duration:5s;  animation-delay:0s; }
.ripple-ring.r2 { bottom:20%; right:12%; animation-duration:5s;  animation-delay:1.7s; }
.ripple-ring.r3 { bottom:20%; right:12%; animation-duration:5s;  animation-delay:3.4s; }

/* SVG Wave separator */
.wave-sep { line-height:0; display:block; }
.wave-sep svg { display:block; width:100%; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--gray-200), var(--shadow-sm);
}
.navbar .container {
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo-pill {
  display:flex; align-items:center; justify-content:center;
  height:64px;
  background:#ffffff;
  border-radius:8px;
  overflow:hidden;
  padding:0 3px;
  box-shadow:0 6px 24px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12);
  transition:var(--transition);
}
.navbar.scrolled .nav-logo-pill {
  height:60px;
  padding:0 3px;
  box-shadow:0 2px 10px rgba(0,0,0,0.10);
  border:1px solid rgba(0,0,0,0.07);
}
.nav-logo img {
  height:130%; width:auto;
  display:block;
  transition:var(--transition);
}
/* Legacy fallback — keep img background transparent now that pill handles it */
.navbar.scrolled .nav-logo img { background:transparent; }
.nav-menu { display:flex; align-items:center; gap:30px; }
.nav-link {
  font-family:var(--font-heading); font-size:0.875rem; font-weight:600;
  color:rgba(255,255,255,0.9); position:relative; padding-bottom:2px;
}
.nav-link::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:2px; background:var(--sky); border-radius:var(--radius-pill);
  transform:scaleX(0); transition:var(--transition);
}
.nav-link:hover, .nav-link.active { color:var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }
.navbar.scrolled .nav-link { color:var(--gray-700); }
.navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link.active { color:var(--primary); }
.nav-cta {
  background:var(--sky) !important; color:var(--white) !important;
  padding:10px 22px; border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-size:0.85rem; font-weight:700;
  box-shadow:0 4px 16px var(--blue-glow); display:inline-block;
}
.nav-cta:hover {
  background:var(--sky-dark) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(14,165,233,0.5);
}
.nav-cta::after { display:none !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:transparent; border:none; }
.hamburger span { display:block; width:24px; height:2px; background:var(--white); border-radius:var(--radius-pill); transition:var(--transition); }
.navbar.scrolled .hamburger span { background:var(--gray-800); }
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background:linear-gradient(140deg, var(--navy) 0%, var(--primary) 55%, var(--primary-light) 100%);
  padding:140px 0 90px;
  text-align:center;
  position:relative; overflow:hidden;
}
.page-hero-title   { font-size:clamp(2rem,5vw,3rem); color:var(--white); margin-bottom:14px; }
.page-hero-subtitle { font-size:1.05rem; color:rgba(255,255,255,0.75); max-width:580px; margin:0 auto 20px; }
.breadcrumb {
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-size:0.82rem; color:rgba(255,255,255,0.55); margin-top:16px;
}
.breadcrumb a { color:rgba(255,255,255,0.55); }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb-sep { color:rgba(255,255,255,0.3); }

/* ============================================================
   HERO — HOMEPAGE
   ============================================================ */
.hero {
  position:relative;
  min-height:100vh;
  min-height:100svh; /* Use small viewport height on mobile to account for browser chrome */
  display:flex; align-items:center;
  background:linear-gradient(145deg, var(--navy) 0%, var(--primary) 50%, var(--primary-light) 100%);
  overflow:hidden;
}
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none;
}
.hero-orb.o1 {
  top:-10%; right:-5%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(14,165,233,0.18) 0%, transparent 68%);
}
.hero-orb.o2 {
  bottom:-15%; left:-5%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 68%);
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero .container {
  position:relative; z-index:3;
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:center;
  padding-top:96px; padding-bottom:80px;
}
.hero-badge-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:22px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(14,165,233,0.15);
  border:1px solid rgba(14,165,233,0.3);
  color:var(--sky-light);
  font-size:0.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.13em;
  padding:6px 14px; border-radius:var(--radius-pill);
  font-family:var(--font-heading);
  white-space:nowrap;
}
.badge-dot { width:6px; height:6px; background:var(--sky-light); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.45;transform:scale(0.7);} }
.hero-title {
  font-size:clamp(2.4rem,5.5vw,3.9rem); font-weight:900;
  color:var(--white); line-height:1.07; margin-bottom:22px;
}
.hero-title .hl,
.hero-title .highlight {
  background: linear-gradient(90deg, var(--sky-light) 0%, #93C5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display:inline-block;
  position:relative;
}
.hero-title .hl::after,
.hero-title .highlight::after {
  content:'';
  position:absolute;
  left:0; bottom:-4px; right:0;
  height:3px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--sky-light), #93C5FD);
  opacity:0.5;
}
.hero-desc { font-size:1.12rem; color:rgba(255,255,255,0.85); line-height:1.82; margin-bottom:36px; max-width:540px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }
.hero-divider { border:0; border-top:1px solid rgba(255,255,255,0.1); margin-bottom:36px; }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.hero-stat-num { font-family:var(--font-heading); font-size:1.9rem; font-weight:900; color:var(--white); line-height:1; }
.hero-stat-num span { color:var(--sky-light); }
.hero-stat-lbl { font-size:0.73rem; color:rgba(255,255,255,0.48); text-transform:uppercase; letter-spacing:0.08em; font-family:var(--font-heading); font-weight:500; margin-top:4px; }

/* ---- Hero Visual (animated drop composition) ---- */
.hero-visual {
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:3;
}
.drop-composition {
  position:relative; width:340px; height:380px;
  display:flex; align-items:center; justify-content:center;
}
.main-drop {
  width:220px; height:290px;
  background:linear-gradient(160deg,
    rgba(56,189,248,0.22) 0%,
    rgba(37,99,235,0.16) 50%,
    rgba(14,165,233,0.1) 100%);
  border:1.5px solid rgba(255,255,255,0.18);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  backdrop-filter:blur(12px);
  position:relative;
  animation:drop-breathe 4s ease-in-out infinite;
  box-shadow:inset 0 0 40px rgba(56,189,248,0.15), 0 20px 60px rgba(14,165,233,0.25);
}
@keyframes drop-breathe {
  0%,100% { transform:rotate(-45deg) scale(1); }
  50%      { transform:rotate(-45deg) scale(1.04); }
}
.main-drop::before {
  content:'';
  position:absolute; top:14%; left:14%;
  width:28%; height:22%;
  background:rgba(255,255,255,0.35);
  border-radius:50%;
  transform:rotate(45deg);
}
.main-drop::after {
  content:'';
  position:absolute; top:28%; left:20%;
  width:15%; height:10%;
  background:rgba(255,255,255,0.2);
  border-radius:50%;
  transform:rotate(45deg);
}
.drop-inner {
  position:absolute;
  transform:rotate(45deg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
}
.drop-inner-icon { font-size:2.6rem; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.drop-inner-text {
  font-family:var(--font-heading); font-size:0.8rem; font-weight:700;
  color:var(--white); text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
  line-height:1.3;
}
/* ============================================================
   HERO VISUAL — redesigned "What We Clean" card
   ============================================================ */
.hero-visual {
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:3;
}
.hv-wrap {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
/* Main glassmorphism service card */
.hv-card {
  background:rgba(255,255,255,0.13);
  border:1.5px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:24px;
  padding:32px 28px;
  width:300px;
  box-shadow:0 24px 64px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
  position:relative; z-index:2;
}
.hv-header { margin-bottom:22px; }
.hv-tag {
  display:inline-block;
  background:rgba(14,165,233,0.28);
  border:1px solid rgba(14,165,233,0.45);
  color:var(--sky-light);
  font-family:var(--font-heading); font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.16em;
  padding:4px 12px; border-radius:var(--radius-pill);
  margin-bottom:12px;
}
.hv-title {
  font-family:var(--font-heading); font-size:1.3rem; font-weight:800;
  color:#ffffff; margin-bottom:6px; line-height:1.2;
}
.hv-sub {
  font-size:0.8rem; color:rgba(255,255,255,0.65); line-height:1.55; margin:0;
}
/* 3-col service icon grid */
.hv-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-bottom:22px;
}
.hv-item {
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:14px 6px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:var(--transition);
  cursor:default;
}
.hv-item:hover {
  background:rgba(255,255,255,0.20);
  border-color:rgba(255,255,255,0.32);
  transform:translateY(-3px);
}
.hv-item i { font-size:1.4rem; color:var(--sky-light); }
.hv-item span {
  font-family:var(--font-heading); font-size:0.67rem; font-weight:700;
  color:rgba(255,255,255,0.90); text-align:center; line-height:1.2;
}
/* CTA button inside card */
.hv-quote-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--sky); color:var(--white);
  font-family:var(--font-heading); font-size:0.875rem; font-weight:700;
  padding:13px 20px; border-radius:var(--radius-pill);
  text-decoration:none;
  box-shadow:0 4px 20px rgba(14,165,233,0.45);
  transition:var(--transition);
}
.hv-quote-btn:hover {
  background:var(--sky-dark); color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(14,165,233,0.6);
}
/* Floating white stat badges */
.hv-stat {
  position:absolute;
  background:#ffffff;
  border-radius:14px;
  padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 10px 32px rgba(0,0,0,0.16);
  animation:orbit-float ease-in-out infinite;
  min-width:185px; z-index:3;
}
.hv-s1 { top:-10px; right:-10px; animation-duration:5s; animation-delay:0s; }
.hv-s2 { bottom:-10px; left:-10px; animation-duration:6s; animation-delay:2.5s; }
.hv-stat-ico {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.hv-stat-ico.leaf { background:var(--blue-100); color:var(--primary); }
.hv-stat-ico.star { background:var(--blue-50);  color:var(--sky); }
.hv-stat-text strong {
  display:block;
  font-family:var(--font-heading); font-size:0.82rem; font-weight:700;
  color:var(--gray-900); line-height:1.2;
}
.hv-stat-text span {
  font-size:0.7rem; color:var(--gray-500); font-family:var(--font-heading);
}

/* Orbital feature dots */
.orbit-dot {
  position:absolute;
  background:rgba(255,255,255,0.95);
  border-radius:var(--radius-md);
  padding:10px 14px;
  display:flex; align-items:center; gap:9px;
  box-shadow:var(--shadow-xl);
  animation:orbit-float ease-in-out infinite;
  white-space:nowrap;
}
.orbit-dot.od1 { top:0;    right:-10px; animation-duration:5s; animation-delay:0s; }
.orbit-dot.od2 { bottom:10px; left:-10px;  animation-duration:6s; animation-delay:2s; }
.orbit-dot.od3 { top:50%;  right:-20px; margin-top:-30px; animation-duration:5.5s; animation-delay:1s; }
@keyframes orbit-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.od-ico {
  width:32px; height:32px; flex-shrink:0;
  background:var(--blue-100); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:0.95rem;
}
.od-lbl { font-size:0.65rem; color:var(--gray-400); font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.od-val { font-size:0.82rem; font-weight:700; color:var(--gray-900); font-family:var(--font-heading); }

/* ---- Hero Wave ---- */
.hero-wave { position:absolute; bottom:-1px; left:0; right:0; z-index:4; line-height:0; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { background:var(--navy); padding:14px 0; }
.trust-inner { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; }
.trust-item {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.65); font-size:0.82rem;
  font-weight:600; font-family:var(--font-heading); white-space:nowrap;
}
.trust-item i { color:var(--sky-light); font-size:0.9rem; }

/* ============================================================
   WHATSAPP QUOTE STRIP
   ============================================================ */
.wa-quote-strip {
  background:linear-gradient(90deg, var(--navy) 0%, var(--primary) 60%, var(--primary-mid) 100%);
  padding:18px 0;
}
.wa-quote-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.wa-quote-left {
  display:flex; align-items:center; gap:16px; flex:1; min-width:220px;
}
.wa-quote-icon {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:#fff;
}
.wa-quote-left strong {
  display:block;
  font-family:var(--font-heading); font-size:0.95rem; font-weight:700;
  color:#fff; margin-bottom:2px;
}
.wa-quote-left span {
  font-size:0.82rem; color:rgba(255,255,255,0.75);
}
.wa-quote-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius-pill);
  background:var(--sky); color:var(--white);
  font-family:var(--font-heading); font-size:0.9rem; font-weight:800;
  white-space:nowrap; flex-shrink:0;
  box-shadow:0 4px 20px rgba(14,165,233,0.4);
  transition:var(--transition);
}
.wa-quote-btn i { font-size:1.1rem; }
.wa-quote-btn:hover {
  background:var(--sky-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(14,165,233,0.55);
  color:var(--white);
}

/* ============================================================
   SERVICE CARDS — illustrated visual headers
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.service-card {
  display:block; background:var(--white);
  border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  overflow:hidden; transition:var(--transition);
  text-decoration:none;
}
.service-card:hover {
  border-color:var(--blue-200);
  box-shadow:0 16px 48px rgba(26,63,143,0.14);
  transform:translateY(-6px);
}

/* Illustrated header */
.svc-illus {
  height:150px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 60%, var(--sky-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.svc-illus::before {
  content:'';
  position:absolute;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(14,165,233,0.3) 0%, transparent 70%);
  animation:glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse { 0%,100%{transform:scale(1);opacity:.7;} 50%{transform:scale(1.2);opacity:1;} }
.svc-illus::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.06) 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,0.04) 0%, transparent 40%);
}
.svc-ico {
  font-size:3rem; z-index:2; position:relative;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.35));
  transition:var(--transition);
}
.service-card:hover .svc-ico { transform:scale(1.12) translateY(-4px); }

/* Animated mini-bubbles inside card header */
.svc-bubble {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.1);
  animation:bubble-rise linear infinite;
  bottom:-10px;
}
.svc-bubble.b1 { width:8px;  height:8px;  left:15%; animation-duration:3s;  animation-delay:0s; }
.svc-bubble.b2 { width:12px; height:12px; left:40%; animation-duration:4s;  animation-delay:1s; }
.svc-bubble.b3 { width:6px;  height:6px;  left:70%; animation-duration:3.5s;animation-delay:0.5s; }
.svc-bubble.b4 { width:10px; height:10px; left:85%; animation-duration:4.5s;animation-delay:1.5s; }

.svc-body { padding:24px 26px; }
.svc-body h3 { font-size:1.05rem; margin-bottom:9px; color:var(--gray-900); }
.svc-body p  { font-size:0.875rem; color:var(--gray-500); line-height:1.72; margin-bottom:18px; }
.svc-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.82rem; font-weight:700;
  color:var(--primary); font-family:var(--font-heading); transition:var(--transition);
}
.service-card:hover .svc-link { color:var(--sky); gap:10px; }

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
  background:linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%);
  padding:var(--section-pad) 0; position:relative; overflow:hidden;
}
/* Bubbles float inside dark sections */
.stats-section .bubbles-wrap .bubble,
.cta-banner    .bubbles-wrap .bubble {
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 60%, transparent 100%);
  border-color:rgba(255,255,255,0.09);
}
.page-hero .bubbles-wrap { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.page-hero .container { position:relative; z-index:2; }

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative; z-index:2; }
.stat-item {
  text-align:center; padding:32px 20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-md); transition:var(--transition);
  position:relative; overflow:hidden;
}
/* Shimmer sweep on stat cards */
.stat-item::after {
  content:''; position:absolute;
  top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation:shimmer-sweep 4s ease-in-out infinite;
}
@keyframes shimmer-sweep {
  0%   { left:-100%; }
  40%,100% { left:150%; }
}
.stat-item:nth-child(2)::after { animation-delay:0.6s; }
.stat-item:nth-child(3)::after { animation-delay:1.2s; }
.stat-item:nth-child(4)::after { animation-delay:1.8s; }
.stat-item:hover { background:rgba(255,255,255,0.13); transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }
.stat-number {
  font-family:var(--font-heading); font-size:3rem; font-weight:900;
  color:var(--white); line-height:1; margin-bottom:8px;
  position:relative; z-index:1;
}
.stat-suffix { color:var(--sky-light); }
.stat-label { font-size:0.78rem; color:rgba(255,255,255,0.55); font-weight:600; font-family:var(--font-heading); text-transform:uppercase; letter-spacing:0.09em; position:relative; z-index:1; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-us-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.why-us-features { display:flex; flex-direction:column; gap:26px; margin-top:30px; }
.feature-item { display:flex; gap:18px; align-items:flex-start; }
.feature-icon {
  width:50px; height:50px; background:var(--blue-50);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:1.2rem; flex-shrink:0; transition:var(--transition);
}
.feature-item:hover .feature-icon { background:var(--primary); color:var(--white); transform:scale(1.06); }
.feature-content h4 { font-size:1rem; margin-bottom:5px; color:var(--gray-900); }
.feature-content p  { font-size:0.875rem; color:var(--gray-500); line-height:1.65; }

/* Why Us Visual — animated blue illustration */
.why-visual { position:relative; }
.why-illustration {
  width:100%; aspect-ratio:1/1; max-width:420px; margin:0 auto;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.why-bg-circle {
  width:88%; height:88%; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
  position:absolute;
  border:2px solid var(--blue-200);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* CSS sparkle house illustration */
.illus-house {
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.illus-house-icon { font-size:5rem; filter:drop-shadow(0 6px 20px rgba(26,63,143,0.25)); animation:float-slow 4s ease-in-out infinite; }
@keyframes float-slow { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.illus-house-label {
  font-family:var(--font-heading); font-size:0.85rem; font-weight:700;
  color:var(--primary); background:var(--white); padding:6px 16px;
  border-radius:var(--radius-pill); box-shadow:var(--shadow-md);
}
/* Orbiting feature chips */
.why-chip {
  position:absolute;
  background:var(--white); border-radius:var(--radius-md);
  padding:10px 14px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-lg); font-family:var(--font-heading); animation:orbit-float ease-in-out infinite;
}
.why-chip.wc1 { top:5%;   left:50%; transform:translateX(-50%); animation-duration:5s; animation-delay:0s; }
.why-chip.wc2 { right:-5%;  top:40%; animation-duration:6s; animation-delay:1s; }
.why-chip.wc3 { bottom:5%; left:50%; transform:translateX(-50%); animation-duration:5.5s; animation-delay:2s; }
.why-chip.wc4 { left:-5%;   top:40%; animation-duration:6.5s; animation-delay:0.5s; }
.wc-ico { font-size:1.2rem; flex-shrink:0; }
.wc-text { font-size:0.75rem; font-weight:700; color:var(--gray-800); white-space:nowrap; }
.exp-badge {
  position:absolute; bottom:-16px; right:-16px;
  background:var(--sky); color:var(--white);
  border-radius:var(--radius-md); padding:16px 22px;
  box-shadow:var(--shadow-xl); text-align:center;
}
.exp-badge .yrs { font-family:var(--font-heading); font-size:2.2rem; font-weight:900; line-height:1; }
.exp-badge .lbl { font-size:0.75rem; opacity:0.88; font-weight:500; margin-top:2px; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section { background:var(--off-white); }
.testimonials-slider  { position:relative; overflow:hidden; }
.testimonials-track   { display:flex; gap:20px; transition:transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.testimonial-card {
  min-width:calc(33.333% - 14px); flex-shrink:0;
  background:var(--white); border-radius:var(--radius-md);
  padding:30px; box-shadow:var(--shadow-sm); border:1px solid var(--gray-200); transition:var(--transition);
}
.testimonial-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.t-stars { display:flex; gap:3px; margin-bottom:14px; color:#2563EB; font-size:0.95rem; }
.t-text  { font-size:0.925rem; color:var(--gray-600); line-height:1.82; margin-bottom:22px; font-style:italic; }
.t-author { display:flex; align-items:center; gap:13px; }
.t-avatar {
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary) 0%, var(--sky) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; color:var(--white); font-size:0.95rem; flex-shrink:0;
}
.t-name    { font-family:var(--font-heading); font-weight:700; color:var(--gray-900); font-size:0.9rem; }
.t-service { font-size:0.77rem; color:var(--gray-400); }
.slider-controls { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:36px; }
.slider-btn {
  width:42px; height:42px; border-radius:50%; border:2px solid var(--gray-200);
  background:var(--white); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--gray-500); transition:var(--transition); font-size:0.85rem;
}
.slider-btn:hover { border-color:var(--primary); color:var(--primary); }
.dots { display:flex; gap:7px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--gray-300); cursor:pointer; transition:var(--transition); }
.dot.active { background:var(--primary); width:22px; border-radius:var(--radius-pill); }

/* ============================================================
   CTA BANNER
   ============================================================ */
/* ============================================================
   SERVICE CARD — shine sweep on hover
   ============================================================ */
.service-card { position:relative; overflow:hidden; }
.service-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform 0.6s ease;
  pointer-events:none;
}
.service-card:hover::after { transform:translateX(100%); }

/* ============================================================
   MISSION CARD — float up on hover
   ============================================================ */
.mission-card { position:relative; overflow:hidden; }
.mission-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 40%, rgba(37,99,235,0.04) 50%, transparent 60%);
  transform:translateX(-100%); transition:transform 0.7s ease; pointer-events:none;
}
.mission-card:hover::after { transform:translateX(100%); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background:linear-gradient(140deg, var(--navy) 0%, var(--primary) 55%, var(--primary-mid) 100%);
  padding:96px 0; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:800px; height:800px;
  background:radial-gradient(circle, rgba(14,165,233,0.18) 0%, transparent 65%);
  pointer-events:none; z-index:0;
}
/* Bubbles behind content */
.cta-banner .bubbles-wrap { z-index:1; }
/* Container and all content sit above bubbles */
.cta-banner .container {
  position:relative; z-index:2;
}
/* Eyebrow label — sky pill above heading */
.cta-eyebrow {
  display:inline-block;
  background:rgba(14,165,233,0.22);
  color:var(--sky-light);
  border:1px solid rgba(14,165,233,0.35);
  border-radius:var(--radius-pill);
  font-family:var(--font-heading);
  font-size:0.75rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:6px 18px; margin-bottom:20px;
}
.cta-banner h2 {
  color:var(--white) !important;
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom:16px;
  line-height:1.2;
}
.cta-banner p {
  color:rgba(255,255,255,0.8) !important;
  max-width:520px; margin:0 auto 40px;
  font-size:1.05rem; line-height:1.7;
}
.cta-actions {
  display:flex; gap:16px; justify-content:center;
  flex-wrap:wrap; align-items:center;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--navy); color:rgba(255,255,255,0.6); padding:64px 0 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:52px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo img {
  height:44px; width:auto;
  background:rgba(255,255,255,0.08);
  border-radius:var(--radius-sm); padding:4px 8px;
}
.footer-logo-name { font-family:var(--font-heading); font-weight:800; font-size:1.1rem; color:var(--white); }
.footer-desc { font-size:0.875rem; color:rgba(255,255,255,0.42); line-height:1.72; margin-bottom:24px; max-width:280px; }
.footer-social { display:flex; gap:10px; }
.social-btn {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.07);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.52); font-size:0.85rem; transition:var(--transition);
}
.social-btn:hover { background:var(--sky); color:var(--white); transform:translateY(-2px); }
.footer-h { font-family:var(--font-heading); font-size:0.78rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:0.14em; margin-bottom:18px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-link { font-size:0.85rem; color:rgba(255,255,255,0.44); transition:var(--transition); display:inline-block; }
.footer-link:hover { color:var(--white); padding-left:5px; }
.footer-contact-row { display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; }
.footer-contact-row i { color:var(--sky); font-size:0.85rem; margin-top:3px; flex-shrink:0; }
.footer-contact-row a, .footer-contact-row span { font-size:0.85rem; color:rgba(255,255,255,0.44); transition:var(--transition); }
.footer-contact-row a:hover { color:var(--white); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.07); padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.footer-copy { font-size:0.78rem; color:rgba(255,255,255,0.3); }
.footer-bottom-links { display:flex; gap:22px; }
.footer-bottom-link { font-size:0.78rem; color:rgba(255,255,255,0.3); transition:var(--transition); }
.footer-bottom-link:hover { color:rgba(255,255,255,0.65); }
.footer-crypto { display:flex; align-items:center; gap:6px; font-size:0.8rem; color:rgba(255,255,255,0.55); margin-top:8px; }
.footer-crypto i { color:var(--sky-light,#7dd3fc); }
.footer-crypto a { color:var(--sky-light,#7dd3fc); text-decoration:none; }
.footer-crypto a:hover { text-decoration:underline; }

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float { position:fixed; bottom:30px; right:30px; z-index:9999; display:flex; align-items:center; gap:12px; }
.wa-tip {
  background:var(--navy); color:var(--white);
  font-size:0.78rem; font-weight:600; padding:7px 14px;
  border-radius:var(--radius-pill); white-space:nowrap;
  opacity:0; transform:translateX(10px); transition:var(--transition);
  pointer-events:none; font-family:var(--font-heading); box-shadow:var(--shadow-md);
}
.wa-float:hover .wa-tip { opacity:1; transform:translateX(0); }
.wa-btn {
  width:58px; height:58px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:1.55rem; text-decoration:none;
  box-shadow:0 6px 22px rgba(37,211,102,0.45); transition:var(--transition);
  animation:wa-pulse 3s ease infinite;
}
@keyframes wa-pulse {
  0%   { box-shadow:0 6px 22px rgba(37,211,102,0.45); }
  50%  { box-shadow:0 6px 30px rgba(37,211,102,0.7), 0 0 0 10px rgba(37,211,102,0.09); }
  100% { box-shadow:0 6px 22px rgba(37,211,102,0.45); }
}
.wa-btn:hover { transform:scale(1.1); }
.scroll-top {
  position:fixed; bottom:100px; right:30px; z-index:9998;
  width:42px; height:42px; background:var(--primary); color:var(--white);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:var(--shadow-md); border:none; font-size:0.9rem;
  opacity:0; transform:translateY(10px); transition:var(--transition);
}
.scroll-top.visible { opacity:1; transform:translateY(0); }
.scroll-top:hover { background:var(--primary-light); transform:translateY(-3px); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-in { opacity:0; transition:opacity 0.6s ease; }
.fade-in.visible { opacity:1; }
.d1{transition-delay:.1s;} .d2{transition-delay:.2s;} .d3{transition-delay:.3s;}
.d4{transition-delay:.4s;} .d5{transition-delay:.5s;} .d6{transition-delay:.6s;}

/* ============================================================
   SERVICES PAGE — detail cards
   ============================================================ */
.svc-detail { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; transition:var(--transition); }
.svc-detail:hover { box-shadow:var(--shadow-lg); border-color:var(--blue-200); }
.svc-detail-head { background:linear-gradient(130deg, var(--navy) 0%, var(--primary) 100%); padding:28px 32px; display:flex; align-items:center; gap:20px; }
.svc-detail-ico { width:60px; height:60px; background:rgba(255,255,255,0.15); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.65rem; color:var(--white); flex-shrink:0; }
.svc-detail-title { color:var(--white); font-size:1.4rem; margin-bottom:4px; }
.svc-detail-sub   { color:rgba(255,255,255,0.66); font-size:0.875rem; }
.svc-detail-body  { padding:30px 32px; }
.svc-detail-body p { margin-bottom:18px; }
.includes-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.include-item  { display:flex; align-items:center; gap:9px; font-size:0.875rem; color:var(--gray-600); }
.include-item i { color:var(--sky); font-size:0.8rem; flex-shrink:0; }

/* FAQ */
.faq-list  { max-width:780px; margin:0 auto; }
.faq-item  { border:1px solid var(--gray-200); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; transition:var(--transition); }
.faq-item:hover { border-color:var(--blue-200); }
.faq-q { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer; font-family:var(--font-heading); font-weight:600; font-size:0.95rem; color:var(--gray-800); background:var(--white); transition:var(--transition); user-select:none; }
.faq-q:hover { background:var(--blue-50); color:var(--primary); }
.faq-ico { width:26px; height:26px; background:var(--gray-100); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gray-500); font-size:0.7rem; transition:var(--transition); flex-shrink:0; }
.faq-item.open .faq-ico { background:var(--primary); color:var(--white); transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-a-inner { padding:0 22px 18px; font-size:0.925rem; color:var(--gray-600); line-height:1.82; background:var(--white); }
.faq-item.open .faq-a { max-height:400px; }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery-filter { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.filter-btn { padding:8px 20px; border-radius:var(--radius-pill); border:2px solid var(--gray-200); background:var(--white); color:var(--gray-600); font-size:0.82rem; font-weight:700; cursor:pointer; transition:var(--transition); font-family:var(--font-heading); }
.filter-btn:hover, .filter-btn.active { border-color:var(--primary); background:var(--primary); color:var(--white); }
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.ba-card { border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md); background:var(--white); border:1px solid var(--gray-200); transition:var(--transition); }
.ba-card:hover { box-shadow:var(--shadow-xl); transform:translateY(-3px); }
.ba-images { display:grid; grid-template-columns:1fr 1fr; height:200px; }
.ba-side { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; }
.ba-side.before { background:linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%); color:var(--gray-500); }
.ba-side.after  { background:linear-gradient(135deg, var(--blue-100) 0%, var(--blue-200) 100%); color:var(--primary); }
.ba-side i { font-size:2rem; }
.ba-side span { font-size:0.75rem; font-weight:600; font-family:var(--font-heading); text-align:center; padding:0 12px; }
.ba-badge { position:absolute; top:8px; left:8px; padding:3px 10px; border-radius:var(--radius-pill); font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; font-family:var(--font-heading); z-index:1; }
.before-badge { background:rgba(0,0,0,0.45); color:var(--white); }
.after-badge  { background:var(--sky); color:var(--white); }
.ba-info { padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }
.ba-label   { font-family:var(--font-heading); font-weight:600; font-size:0.875rem; color:var(--gray-800); }
.ba-service { font-size:0.77rem; color:var(--gray-400); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:56px; align-items:start; }
.contact-card { background:linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%); border-radius:var(--radius-lg); padding:38px; color:var(--white); }
.contact-card-title { font-size:1.4rem; color:var(--white); margin-bottom:6px; }
.contact-card-sub   { color:rgba(255,255,255,0.62); font-size:0.9rem; margin-bottom:34px; }
.c-detail { display:flex; align-items:flex-start; gap:15px; margin-bottom:22px; }
.c-detail-ico { width:42px; height:42px; background:rgba(255,255,255,0.1); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:0.95rem; color:var(--sky-light); flex-shrink:0; }
.c-detail-lbl { font-size:0.72rem; color:rgba(255,255,255,0.42); text-transform:uppercase; letter-spacing:0.1em; font-family:var(--font-heading); font-weight:600; margin-bottom:2px; }
.c-detail-val { font-size:0.92rem; color:rgba(255,255,255,0.88); font-weight:500; }
.c-detail-val a { color:rgba(255,255,255,0.88); }
.c-detail-val a:hover { color:var(--white); }
.c-hours { margin-top:30px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.1); }
.c-hours-title { font-family:var(--font-heading); font-size:0.73rem; text-transform:uppercase; letter-spacing:0.13em; color:rgba(255,255,255,0.38); margin-bottom:12px; font-weight:700; }
.c-hours-row { display:flex; justify-content:space-between; font-size:0.84rem; color:rgba(255,255,255,0.62); padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.c-hours-row .day { font-weight:500; }
.c-hours-row .time { color:rgba(255,255,255,0.4); }

/* Quote Form */
.quote-form { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow-md); }
.form-title  { font-size:1.4rem; margin-bottom:6px; }
.form-sub    { font-size:0.875rem; color:var(--gray-500); margin-bottom:30px; }
.form-group  { margin-bottom:18px; }
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:block; font-size:0.8rem; font-weight:700; color:var(--gray-700); margin-bottom:6px; font-family:var(--font-heading); }
.fc { width:100%; padding:11px 14px; border:2px solid var(--gray-200); border-radius:var(--radius-sm); font-size:0.875rem; color:var(--gray-800); font-family:var(--font-body); transition:var(--transition); background:var(--white); outline:none; }
.fc:focus { border-color:var(--sky); box-shadow:0 0 0 3px rgba(14,165,233,0.12); }
.fc::placeholder { color:var(--gray-400); }
select.fc { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:17px; padding-right:38px; }
textarea.fc { resize:vertical; min-height:110px; }
.btn-submit { width:100%; margin-top:8px; justify-content:center; }
.form-success { display:none; text-align:center; padding:36px 20px; }
.form-success.show { display:block; }
.success-ico { width:70px; height:70px; background:var(--blue-100); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.9rem; color:var(--sky); margin:0 auto 14px; }
.map-wrap { border-radius:var(--radius-lg); overflow:hidden; height:280px; margin-top:32px; box-shadow:var(--shadow-md); }
.map-wrap iframe { width:100%; height:100%; border:0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-story { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
/* Animated illustration replacing photo */
.about-illus-wrap { position:relative; }
.about-illus {
  width:100%; aspect-ratio:3/4; max-width:360px; margin:0 auto;
  border-radius:var(--radius-xl);
  background:linear-gradient(145deg, var(--navy) 0%, var(--primary) 60%, var(--sky-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.about-illus-inner {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  position:relative; z-index:2; padding:24px;
}
.about-illus-icon { font-size:5rem; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.4)); animation:float-slow 5s ease-in-out infinite; }
.about-illus-text { font-family:var(--font-heading); font-weight:700; font-size:1.1rem; color:var(--white); text-align:center; line-height:1.4; }
.about-illus-sub  { font-size:0.8rem; color:rgba(255,255,255,0.6); text-align:center; font-family:var(--font-heading); }
.about-illus-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.about-pill { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); font-size:0.72rem; font-weight:600; padding:5px 12px; border-radius:var(--radius-pill); font-family:var(--font-heading); }
.about-accent-badge { position:absolute; bottom:-20px; right:-16px; background:var(--sky); color:var(--white); border-radius:var(--radius-md); padding:18px 22px; box-shadow:var(--shadow-xl); text-align:center; }
.about-accent-badge .n { font-family:var(--font-heading); font-size:2.2rem; font-weight:900; line-height:1; }
.about-accent-badge .t { font-size:0.78rem; opacity:.85; }
.about-content .section-label, .about-content h2 { text-align:left; }
.about-content h2 { margin-bottom:20px; }
.about-content p  { margin-bottom:14px; }
.about-vals { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:28px; }
.about-val  { display:flex; align-items:center; gap:9px; font-size:0.875rem; font-weight:600; color:var(--gray-700); font-family:var(--font-heading); }
.about-val i { color:var(--sky); }

/* Mission Cards */
.mission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mission-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:30px; text-align:center; transition:var(--transition); }
.mission-card:hover { border-color:var(--blue-200); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.mission-ico { width:62px; height:62px; margin:0 auto 18px; background:var(--blue-50); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--primary); transition:var(--transition); }
.mission-card:hover .mission-ico { background:var(--primary); color:var(--white); }
.mission-card h3 { font-size:1.1rem; margin-bottom:11px; }
.mission-card p  { font-size:0.875rem; color:var(--gray-500); line-height:1.72; }

/* Eco Section */
.eco-block { background:linear-gradient(135deg, #064E3B 0%, #065F46 100%); border-radius:var(--radius-xl); padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.eco-block h2 { color:var(--white); margin-bottom:14px; }
.eco-block p  { color:rgba(255,255,255,0.7); margin-bottom:12px; }
.eco-feats { display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.eco-feat  { display:flex; align-items:center; gap:11px; color:rgba(255,255,255,0.82); font-size:0.92rem; }
.eco-feat i { color:#34D399; }
.eco-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.eco-stat  { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-md); padding:22px; text-align:center; }
.eco-stat-n { font-family:var(--font-heading); font-size:1.9rem; font-weight:900; color:#34D399; margin-bottom:4px; }
.eco-stat-l { font-size:0.77rem; color:rgba(255,255,255,0.5); font-family:var(--font-heading); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }

/* ============================================================
   WHY-US ILLUSTRATION — animated drop composition
   ============================================================ */
.why-drop-main {
  width:180px; height:180px; border-radius:50%;
  background:linear-gradient(145deg, var(--primary) 0%, var(--sky) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow:0 16px 56px rgba(14,165,233,0.35);
  animation:drop-breathe 5s ease-in-out infinite;
}
@keyframes drop-breathe {
  0%,100% { transform:scale(1); box-shadow:0 16px 56px rgba(14,165,233,0.35); }
  50%      { transform:scale(1.04); box-shadow:0 22px 70px rgba(14,165,233,0.55); }
}
.why-drop-inner {
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:var(--white);
  border:2px solid rgba(255,255,255,0.25);
}
.why-mini-bubble {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.25);
  animation:orbit-float ease-in-out infinite;
}
.why-mini-bubble.wb1 { width:18px; height:18px; top:-8px;  right:24px; animation-duration:3.5s; animation-delay:0s; }
.why-mini-bubble.wb2 { width:12px; height:12px; bottom:8px; left:-4px;  animation-duration:4.5s; animation-delay:1s; }
.why-mini-bubble.wb3 { width:22px; height:22px; bottom:-10px; right:18px; animation-duration:3s; animation-delay:0.5s; }
/* Chip i/span styling */
.why-chip i  { color:var(--sky); font-size:1.1rem; flex-shrink:0; }
.why-chip span { font-size:0.75rem; font-weight:700; color:var(--gray-800); white-space:nowrap; }
/* Years badge inside illustration */
.why-years-badge {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--sky); color:var(--white);
  border-radius:var(--radius-md); padding:16px 22px;
  box-shadow:var(--shadow-xl); text-align:center;
}
.wyb-num { font-family:var(--font-heading); font-size:2.2rem; font-weight:900; line-height:1; }
.wyb-lbl { font-size:0.75rem; opacity:0.88; font-weight:500; margin-top:2px; }

/* ============================================================
   ABOUT ANIMATED ILLUSTRATION
   ============================================================ */
.about-illus-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.about-illus {
  width:100%; aspect-ratio:3/4; max-width:380px; margin:0 auto;
  border-radius:var(--radius-xl);
  background:linear-gradient(145deg, var(--navy) 0%, var(--primary) 60%, var(--sky-dark) 100%);
  position:relative; overflow:visible;
  display:flex; align-items:center; justify-content:center;
}
/* Central animated drop */
.ai-drop-outer {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:130px; height:130px;
}
.ai-drop {
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.06) 100%);
  border:2px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:2.8rem; color:rgba(255,255,255,0.9);
  animation:drop-breathe 5s ease-in-out infinite;
  position:relative; z-index:2;
}
.ai-ripple {
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.15);
  animation:ripple-out 4s ease-out infinite;
}
.ai-ripple.r1 { animation-delay:0s; }
.ai-ripple.r2 { animation-delay:2s; }
/* Floating stat tiles */
.ai-tile {
  position:absolute;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(8px);
  border-radius:var(--radius-md);
  padding:10px 14px;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-size:0.75rem; font-weight:700;
  color:var(--white); white-space:nowrap;
  animation:orbit-float ease-in-out infinite;
}
.ai-tile i { font-size:1rem; }
.ai-tile.ai-t1 { top:12%;  left:-18%;  animation-duration:5s;  animation-delay:0s; }
.ai-tile.ai-t2 { top:12%;  right:-18%; animation-duration:6s;  animation-delay:1s; }
.ai-tile.ai-t3 { bottom:18%; left:-18%; animation-duration:5.5s; animation-delay:0.5s; }
.ai-tile.ai-t4 { bottom:18%; right:-18%; animation-duration:6.5s; animation-delay:1.5s; }
/* Mini floating bubbles inside about illus */
.ai-bubble {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  animation:bubble-rise linear infinite;
}
.ai-bubble.ab1 { width:14px; height:14px; bottom:10%; left:15%;  animation-duration:7s;  animation-delay:0s; }
.ai-bubble.ab2 { width:8px;  height:8px;  bottom:5%;  left:40%;  animation-duration:9s;  animation-delay:2s; }
.ai-bubble.ab3 { width:18px; height:18px; bottom:8%;  right:20%; animation-duration:8s;  animation-delay:1s; }
.ai-bubble.ab4 { width:10px; height:10px; bottom:15%; right:40%; animation-duration:6s;  animation-delay:3s; }
/* Year badge for about page */
.about-illus .about-accent-badge {
  position:absolute; bottom:-20px; right:-16px;
}

/* ============================================================
   GALLERY FOLLOW CTA
   ============================================================ */
.gallery-follow-cta {
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-lg); padding:36px 40px; margin-top:56px;
}
.gfc-icon {
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--primary) 0%, var(--sky) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--white);
  box-shadow:0 8px 24px var(--blue-glow);
}
.gfc-text { flex:1; min-width:200px; }
.gfc-text h3 { font-size:1.3rem; color:var(--navy); margin-bottom:6px; }
.gfc-text p  { font-size:0.9rem; color:var(--gray-600); margin:0; }
.gfc-links   { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.btn-outline-sky {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-size:0.875rem; font-weight:700;
  background:transparent; color:var(--primary);
  border:2px solid var(--primary); transition:var(--transition);
}
.btn-outline-sky:hover {
  background:var(--primary); color:var(--white);
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position:fixed; top:0; left:0; height:3px; z-index:9999;
  background:linear-gradient(90deg, var(--sky) 0%, var(--sky-light) 100%);
  width:0%; transition:width 0.08s linear;
  pointer-events:none;
  box-shadow:0 0 10px rgba(14,165,233,0.6);
}

/* ============================================================
   HOW IT WORKS — 3-STEP PROCESS
   ============================================================ */
.hiw-section { background:var(--off-white); overflow:hidden; }
.hiw-steps   { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; margin-top:60px; }

/* Connector line between steps */
.hiw-steps::before {
  content:''; position:absolute;
  top:52px; left:calc(16.666% + 20px); right:calc(16.666% + 20px);
  height:2px;
  background:linear-gradient(90deg, var(--blue-200) 0%, var(--sky) 50%, var(--blue-200) 100%);
  z-index:0;
}
.hiw-step { display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 28px 0; position:relative; z-index:1; }
.hiw-num-wrap { position:relative; margin-bottom:28px; }
.hiw-num {
  width:104px; height:104px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary) 0%, var(--sky-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:2.4rem; font-weight:900; color:var(--white);
  box-shadow:0 12px 40px rgba(26,63,143,0.35);
  position:relative; z-index:2;
  transition:var(--transition);
}
.hiw-step:hover .hiw-num {
  transform:scale(1.08) translateY(-4px);
  box-shadow:0 20px 50px rgba(14,165,233,0.45);
  background:linear-gradient(135deg, var(--sky-dark) 0%, var(--primary) 100%);
}
.hiw-num-ring {
  position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(14,165,233,0.3);
  animation:glow-pulse 3s ease-in-out infinite;
}
.hiw-icon {
  position:absolute; bottom:-6px; right:-6px;
  width:36px; height:36px; border-radius:50%;
  background:var(--sky); border:2px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--white); box-shadow:var(--shadow-md);
  z-index:3;
}
.hiw-title { font-family:var(--font-heading); font-size:1.15rem; font-weight:800; color:var(--gray-900); margin-bottom:12px; }
.hiw-desc  { font-size:0.9rem; color:var(--gray-500); line-height:1.75; max-width:240px; }
.hiw-action { margin-top:20px; }
.hiw-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--white); border:1.5px solid var(--blue-200);
  border-radius:var(--radius-pill); padding:8px 16px;
  font-family:var(--font-heading); font-size:0.78rem; font-weight:700;
  color:var(--primary); box-shadow:var(--shadow-sm); transition:var(--transition);
  text-decoration:none;
}
.hiw-pill:hover { background:var(--primary); color:var(--white); border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ============================================================
   HOMEPAGE FAQ
   ============================================================ */
.home-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }
.hfaq-item {
  background:var(--white); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); overflow:hidden; transition:var(--transition);
}
.hfaq-item:hover { border-color:var(--blue-200); box-shadow:var(--shadow-md); }
.hfaq-q {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 22px; cursor:pointer;
  font-family:var(--font-heading); font-size:0.9rem; font-weight:700; color:var(--gray-900);
}
.hfaq-ico {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--blue-50); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:0.75rem;
  transition:var(--transition);
}
.hfaq-item.open .hfaq-ico { background:var(--primary); color:var(--white); transform:rotate(45deg); }
.hfaq-a { display:none; padding:0 22px 20px; font-size:0.875rem; color:var(--gray-500); line-height:1.75; }
.hfaq-item.open .hfaq-a { display:block; }
.hfaq-item.open { border-color:var(--blue-200); box-shadow:var(--shadow-md); }

/* ============================================================
   AREAS WE SERVE — suburb strip
   ============================================================ */
.areas-section { background:var(--navy); padding:40px 0; overflow:hidden; }
.areas-label {
  text-align:center; margin-bottom:20px;
  font-family:var(--font-heading); font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.2em; color:rgba(255,255,255,0.4);
}
.areas-track-wrap { overflow:hidden; position:relative; }
.areas-track-wrap::before,
.areas-track-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.areas-track-wrap::before { left:0;  background:linear-gradient(90deg, var(--navy), transparent); }
.areas-track-wrap::after  { right:0; background:linear-gradient(-90deg, var(--navy), transparent); }
.areas-track {
  display:flex; gap:12px; white-space:nowrap;
  animation:scroll-left 28s linear infinite;
}
.areas-track:hover { animation-play-state:paused; }
@keyframes scroll-left { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.area-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-pill); padding:8px 16px; flex-shrink:0;
  font-family:var(--font-heading); font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.7);
  transition:var(--transition);
}
.area-chip:hover { background:rgba(14,165,233,0.2); border-color:var(--sky); color:var(--white); }
.area-chip i { color:var(--sky); font-size:0.7rem; }

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media (max-width:1024px) {
  /* Hero */
  .hero .container      { grid-template-columns:1fr; text-align:center; padding-top:110px; padding-bottom:60px; }
  .hero-actions         { justify-content:center; }
  .hero-stats           { justify-content:center; }
  .hero-desc            { max-width:600px; margin:0 auto 36px; }
  .hero-visual          { display:none; }
  .hero-badge-row       { justify-content:center; margin:0 auto 22px; }
  .hero-badge           { margin:0; }

  /* Layout grids */
  .services-grid        { grid-template-columns:repeat(2,1fr); }
  .stats-grid           { grid-template-columns:repeat(2,1fr); }
  .why-us-grid          { grid-template-columns:1fr; }
  .why-illustration     { display:none; }
  .footer-grid          { grid-template-columns:1fr 1fr; gap:40px; }
  .contact-grid         { grid-template-columns:1fr; }
  .about-story          { grid-template-columns:1fr; }
  .about-illus-wrap     { display:none; }
  .mission-grid         { grid-template-columns:1fr 1fr; }
  .eco-block            { grid-template-columns:1fr; padding:40px; gap:40px; }
  .ba-grid              { grid-template-columns:repeat(2,1fr); }

  /* Gallery follow CTA */
  .gallery-follow-cta   { flex-direction:column; text-align:center; padding:28px 24px; gap:18px; }
  .gfc-links            { justify-content:center; }
  .gfc-icon             { margin:0 auto; }

  /* Why us content centred when visual is hidden */
  .why-us-content       { text-align:center; }
  .why-us-content .section-label,
  .why-us-content h2    { text-align:center; }
  .feature-item         { text-align:left; }

  /* How It Works */
  .hiw-steps::before    { display:none; }
  .hiw-steps            { grid-template-columns:1fr; gap:40px; }
  .hiw-step             { flex-direction:row; text-align:left; align-items:flex-start; gap:24px; }
  .hiw-num-wrap         { margin-bottom:0; flex-shrink:0; }
  .hiw-num              { width:72px; height:72px; font-size:1.6rem; }
  .hiw-desc             { max-width:none; }

  /* Home FAQ */
  .home-faq-grid        { grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width:768px) {
  :root {
    --section-pad: 48px;
    --header-h:    64px;
  }

  /* ── Navbar ── */
  .navbar               { height:var(--header-h); }
  .nav-logo-pill        { height:54px; padding:0 3px; }
  .navbar.scrolled .nav-logo-pill { height:50px; padding:0 3px; }
  .nav-menu {
    display:none; position:fixed;
    top:var(--header-h); left:0; right:0;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(20px);
    flex-direction:column; gap:0;
    padding:12px 0;
    box-shadow:var(--shadow-lg);
    border-top:1px solid var(--gray-200);
    z-index:999;
  }
  .nav-menu.open        { display:flex; }
  .nav-link             { color:var(--gray-700); padding:12px 22px; width:100%; display:block; font-size:0.9rem; }
  .nav-link:hover       { color:var(--primary); background:var(--blue-50); }
  .nav-link::after      { display:none; }
  .nav-cta              { margin:8px 22px 4px; width:calc(100% - 44px); text-align:center; display:block; }
  .hamburger            { display:flex; }

  /* ── Hero ── */
  .hero                 { min-height:auto; }   /* Let content dictate height on mobile */
  .hero .container      { padding-top:82px; padding-bottom:40px; }
  .hero-badge-row       { margin:0 auto 16px; }
  .hero-badge           { font-size:0.62rem; letter-spacing:0.08em; padding:5px 12px; margin:0; }
  .hero-title           { font-size:clamp(1.85rem,7.5vw,2.4rem); margin-bottom:14px; line-height:1.1; }
  .hero-title br        { display:none; }       /* Remove forced line-break on mobile */
  .hero-desc            { font-size:0.95rem; line-height:1.65; margin-bottom:24px; max-width:100%; }
  .hero-actions         { flex-direction:column; align-items:stretch; gap:10px; margin-bottom:28px; }
  .hero-actions .btn    { justify-content:center; width:100%; padding:14px 24px; }
  .hero-divider         { margin-bottom:20px; }
  .hero-stats           { grid-template-columns:repeat(3,1fr); gap:8px; }
  .hero-stat-num        { font-size:1.45rem; }
  .hero-stat-lbl        { font-size:0.65rem; letter-spacing:0.04em; }

  /* ── Trust bar ── */
  .trust-bar            { padding:10px 0; }
  .trust-inner          { gap:14px 20px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding:0 16px; scrollbar-width:none; }
  .trust-inner::-webkit-scrollbar { display:none; }
  .trust-item           { white-space:nowrap; flex-shrink:0; font-size:0.78rem; }

  /* ── WhatsApp quote strip ── */
  .wa-quote-strip       { padding:16px 0; }
  .wa-quote-inner       { flex-direction:column; align-items:stretch; gap:12px; }
  .wa-quote-left        { align-items:flex-start; gap:12px; }
  .wa-quote-icon        { width:40px; height:40px; font-size:1.3rem; }
  .wa-quote-left strong { font-size:0.88rem; }
  .wa-quote-left span   { font-size:0.78rem; }
  .wa-quote-btn         { width:100%; justify-content:center; padding:12px 20px; }

  /* ── Services ── */
  .services-grid        { grid-template-columns:1fr; gap:14px; }
  .svc-illus            { height:130px; }
  .svc-body             { padding:20px; }
  .svc-body h3          { font-size:1rem; margin-bottom:7px; }
  .svc-body p           { font-size:0.85rem; margin-bottom:14px; }
  .section-header       { margin-bottom:36px; }
  .section-title        { font-size:clamp(1.5rem,6vw,2rem); }

  /* ── How It Works ── */
  .hiw-section          { }
  .hiw-steps            { gap:32px; }
  .hiw-step             { flex-direction:row; text-align:left; align-items:flex-start; gap:18px; padding:0 4px; }
  .hiw-num-wrap         { margin-bottom:0; flex-shrink:0; }
  .hiw-num              { width:60px; height:60px; font-size:1.4rem; }
  .hiw-num-ring         { inset:-6px; }
  .hiw-icon             { width:28px; height:28px; font-size:0.8rem; bottom:-4px; right:-4px; z-index:3; }
  .hiw-title            { font-size:1rem; margin-bottom:8px; }
  .hiw-desc             { font-size:0.85rem; max-width:none; }
  .hiw-action           { margin-top:14px; }

  /* ── Stats ── */
  .stats-section        { padding:40px 0; }
  .stats-grid           { grid-template-columns:1fr 1fr; gap:12px; }
  .stat-item            { padding:24px 14px; }
  .stat-number          { font-size:2rem; }
  .stat-label           { font-size:0.72rem; }

  /* ── Why Us ── */
  .why-chip             { display:none; }
  .why-us-features      { gap:18px; margin-top:22px; }
  .feature-icon         { width:44px; height:44px; font-size:1.05rem; flex-shrink:0; }
  .feature-content h4   { font-size:0.95rem; }
  .feature-content p    { font-size:0.84rem; }

  /* ── Testimonials ── */
  .testimonials-section { }
  .testimonial-card     { min-width:calc(100% - 0px); padding:20px; }
  .t-text               { font-size:0.875rem; margin-bottom:16px; }
  .slider-controls      { margin-top:24px; }

  /* ── Home FAQ ── */
  .home-faq-grid        { gap:10px; }
  .hfaq-q               { padding:16px 18px; font-size:0.85rem; }
  .hfaq-a               { padding:0 18px 16px; font-size:0.84rem; }

  /* ── CTA Banner ── */
  .cta-banner           { padding:52px 0; }
  .cta-banner h2        { font-size:clamp(1.55rem,6vw,2rem); margin-bottom:12px; }
  .cta-banner p         { font-size:0.95rem; margin-bottom:28px; }
  .cta-eyebrow          { font-size:0.68rem; padding:5px 14px; margin-bottom:14px; }
  .cta-actions          { flex-direction:column; align-items:stretch; gap:10px; max-width:100%; margin:0; }
  .cta-actions .btn     { justify-content:center; width:100%; }

  /* ── Footer ── */
  footer                { padding:44px 0 20px; }
  .footer-grid          { grid-template-columns:1fr; gap:24px; margin-bottom:32px; }
  .footer-logo          { margin-bottom:10px; }
  .footer-desc          { font-size:0.82rem; margin-bottom:16px; }
  .footer-h             { font-size:0.72rem; margin-bottom:12px; }
  .footer-links         { gap:8px; }
  .footer-link          { font-size:0.82rem; }
  .footer-contact-row   { margin-bottom:10px; }
  .footer-bottom        { padding-top:20px; flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .footer-copy          { font-size:0.75rem; }
  .footer-bottom-links  { justify-content:center; flex-wrap:wrap; gap:16px; }
  .footer-bottom-link   { font-size:0.75rem; }

  /* ── Contact / Forms ── */
  .form-row             { grid-template-columns:1fr; }
  .quote-form           { padding:24px 18px; }
  .contact-card         { padding:24px 18px; }
  .contact-info-grid    { grid-template-columns:1fr; }
  .quick-contact-grid   { grid-template-columns:1fr; }
  .form-title           { font-size:1.2rem; }
  .contact-card-title   { font-size:1.2rem; }

  /* ── About ── */
  .about-vals           { grid-template-columns:1fr; gap:10px; }
  .mission-grid         { grid-template-columns:1fr; }
  .eco-block            { padding:24px 18px; border-radius:var(--radius-lg); gap:28px; }
  .eco-stats            { grid-template-columns:1fr 1fr; }
  .eco-stat             { padding:16px; }
  .eco-stat-n           { font-size:1.6rem; }

  /* ── Gallery ── */
  .gallery-filter       { overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:6px; scrollbar-width:none; }
  .gallery-filter::-webkit-scrollbar { display:none; }
  .filter-btn           { flex-shrink:0; padding:7px 16px; font-size:0.78rem; }
  .ba-grid              { grid-template-columns:1fr; gap:16px; }
  .ba-images            { height:170px; }
  .gallery-follow-cta   { flex-direction:column; align-items:stretch; gap:16px; padding:24px 18px; }
  .gfc-links            { flex-direction:column; }
  .gfc-links .btn-outline-sky { justify-content:center; }

  /* ── Services detail page ── */
  .includes-grid        { grid-template-columns:1fr; }
  .service-detail-grid  { grid-template-columns:1fr; }
  .svc-detail-head      { padding:22px 20px; }
  .svc-detail-body      { padding:22px 20px; }

  /* ── Page hero (inner pages) ── */
  .page-hero            { padding:92px 0 48px; }
  .page-hero-title      { font-size:clamp(1.6rem,7vw,2.2rem); margin-bottom:10px; }
  .page-hero-subtitle   { font-size:0.95rem; }

  /* ── Areas strip ── */
  .areas-section        { padding:28px 0; }

  /* ── Float buttons ── */
  .wa-float             { bottom:90px; right:16px; }
  .wa-btn               { width:52px; height:52px; font-size:1.45rem; }
  .scroll-top           { right:16px; bottom:160px; width:40px; height:40px; font-size:0.82rem; }

  /* ── Mobile sticky CTA bar visible ── */
  body                  { padding-bottom:70px; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================================ */
/* Global tap highlight + key touch targets ≥44px */
a, button { -webkit-tap-highlight-color:rgba(14,165,233,0.15); }
.btn, .nav-link, .filter-btn, .slider-btn, .social-btn, .wa-btn, .scroll-top { min-height:44px; }
/* Dot nav: use padding to expand touch area without changing visual size */
.dot { padding:10px; box-sizing:content-box; }
@media (max-width:480px) {
  :root { --section-pad:44px; }

  /* ── Hero ── */
  .hero-title           { font-size:clamp(1.8rem,9vw,2.4rem); }
  .hero-stats           { grid-template-columns:repeat(3,1fr); gap:8px; }
  .hero-stat-num        { font-size:1.4rem; }
  .hero-stat-lbl        { font-size:0.65rem; }
  .hero-actions .btn-lg { padding:15px 22px; font-size:0.9rem; }

  /* ── Stats ── */
  .stat-number          { font-size:1.9rem; }

  /* ── Trust bar: reduce items ── */
  .trust-item:nth-child(4),
  .trust-item:nth-child(5) { display:none; }

  /* ── Service cards ── */
  .svc-illus            { height:120px; }
  .svc-body             { padding:18px 20px; }

  /* ── Eco block ── */
  .eco-stats            { grid-template-columns:1fr 1fr; }
  .eco-stat-n           { font-size:1.6rem; }

  /* ── Gallery ── */
  .ba-grid              { grid-template-columns:1fr; }

  /* ── Footer ── */
  .footer-social        { gap:10px; }
  .social-btn           { width:40px; height:40px; font-size:1rem; }
  .footer-h             { font-size:0.9rem; }

  /* ── Buttons ── */
  .btn                  { padding:13px 22px; font-size:0.875rem; }
  .btn-lg               { padding:15px 26px; font-size:0.9rem; }

  /* ── Misc ── */
  .section-header       { margin-bottom:40px; }
  .container            { padding:0 16px; }

  /* ── How It Works mobile ── */
  .hiw-step             { flex-direction:column; text-align:center; align-items:center; }
  .hiw-steps::before    { display:none; }
  .hiw-steps            { gap:32px; }
  .hiw-num              { width:84px; height:84px; font-size:1.9rem; }

  /* ── Mobile sticky CTA bar visible ── */
  body                  { padding-bottom:70px; }
}

/* ============================================================
   HERO — CLASS ALIASES (HTML uses hero-bg-orb / hero-grid-bg)
   ============================================================ */
.hero-bg-orb { position:absolute; border-radius:50%; pointer-events:none; }
.hero-bg-orb.orb1 {
  top:-10%; right:-5%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(14,165,233,0.18) 0%, transparent 68%);
}
.hero-bg-orb.orb2 {
  bottom:-15%; left:-5%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(37,99,235,0.22) 0%, transparent 68%);
}
.hero-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:60px 60px;
}

/* ============================================================
   MOBILE STICKY BOTTOM CTA BAR
   ============================================================ */
.mobile-cta-bar {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:9996;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:10px 12px;
  gap:8px; align-items:center; justify-content:stretch;
  box-shadow:0 -4px 20px rgba(0,0,0,0.3);
}
@media (max-width:768px) {
  .mobile-cta-bar   { display:flex; }
  /* Push floating buttons above the sticky bar */
  .wa-float         { bottom:82px; }
  .scroll-top       { bottom:152px; }
}
.mcta-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 6px; border-radius:var(--radius-pill);
  font-family:var(--font-heading); font-size:0.72rem; font-weight:700;
  text-decoration:none; transition:var(--transition);
  white-space:nowrap; min-height:44px;
}
.mcta-phone { background:var(--primary-mid); color:var(--white); }
.mcta-phone:hover { background:var(--primary-light); color:var(--white); }
.mcta-wa    { background:#25D366; color:var(--white); }
.mcta-wa:hover { background:#1ebe5d; color:var(--white); }
.mcta-quote { background:var(--sky); color:var(--white); }
.mcta-quote:hover { background:var(--sky-dark); color:var(--white); }

/* ============================================================
   ANIMATION SUITE
   ============================================================ */

/* ----- 1. STATS SLAM ----- */
@keyframes statSlam {
  0%   { opacity:0; transform:translateY(40px) scale(0.82); filter:blur(14px); }
  55%  { opacity:1; filter:blur(0); }
  78%  { transform:translateY(-6px) scale(1.07); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes slamLabelIn {
  0%   { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}
.stat-item.slam-active .stat-number {
  animation: statSlam 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.stat-item.slam-active .stat-label {
  animation: slamLabelIn 0.5s ease-out both;
}
.stat-item:nth-child(1).slam-active .stat-number { animation-delay: 0s; }
.stat-item:nth-child(2).slam-active .stat-number { animation-delay: 0.15s; }
.stat-item:nth-child(3).slam-active .stat-number { animation-delay: 0.3s; }
.stat-item:nth-child(4).slam-active .stat-number { animation-delay: 0.45s; }
.stat-item:nth-child(1).slam-active .stat-label  { animation-delay: 0.65s; }
.stat-item:nth-child(2).slam-active .stat-label  { animation-delay: 0.8s; }
.stat-item:nth-child(3).slam-active .stat-label  { animation-delay: 0.95s; }
.stat-item:nth-child(4).slam-active .stat-label  { animation-delay: 1.1s; }

/* micro bar under each stat */
.stat-micro {
  width: 48px; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin: 8px auto 0;
  overflow: hidden;
  position: relative;
}
.stat-micro::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--sky-light);
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
}
.stat-item.slam-active .stat-micro::after {
  animation: microFill 1s ease-out both;
}
.stat-item:nth-child(1).slam-active .stat-micro::after { animation-delay: 0.7s; }
.stat-item:nth-child(2).slam-active .stat-micro::after { animation-delay: 0.85s; }
.stat-item:nth-child(3).slam-active .stat-micro::after { animation-delay: 1.0s; }
.stat-item:nth-child(4).slam-active .stat-micro::after { animation-delay: 1.15s; }
@keyframes microFill { to { transform: scaleX(1); } }

/* ----- 2. SERVICE CARD MOUSE-TRACKING GLOW ----- */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(14,165,233,0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.service-card:hover::after { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }

/* staggered entrance on scroll */
@keyframes cardEntrance {
  0%   { opacity:0; transform:translateY(24px) scale(0.97); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.service-card.card-visible {
  animation: cardEntrance 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.service-card:nth-child(1).card-visible { animation-delay: 0s; }
.service-card:nth-child(2).card-visible { animation-delay: 0.07s; }
.service-card:nth-child(3).card-visible { animation-delay: 0.14s; }
.service-card:nth-child(4).card-visible { animation-delay: 0.21s; }
.service-card:nth-child(5).card-visible { animation-delay: 0.28s; }
.service-card:nth-child(6).card-visible { animation-delay: 0.35s; }

/* ----- 3. HOW IT WORKS ANIMATED STEPPER ----- */
.hiw-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 52px;
  max-width: 420px;
  gap: 0;
}
.hiw-connector-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: var(--white);
  flex-shrink: 0;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}
.hiw-connector-dot::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--sky);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.5s ease;
}
.hiw-connector-dot.active {
  border-color: var(--sky);
  background: var(--sky);
  box-shadow: 0 0 0 5px rgba(14,165,233,0.18), 0 0 18px rgba(14,165,233,0.45);
}
.hiw-connector-dot.active::after {
  opacity: 0.5;
  transform: scale(1);
  animation: dotPing 1.8s ease-out infinite;
}
.hiw-connector-dot.done {
  border-color: var(--primary-light);
  background: var(--primary-light);
}
@keyframes dotPing {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}
.hiw-connector-track {
  flex: 1;
  height: 2px;
  background: var(--gray-200);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.hiw-connector-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--primary-light), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(14,165,233,0.4);
}
.hiw-connector-fill.filled { transform: scaleX(1); }

/* step active state */
.hiw-step .hiw-num {
  transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.hiw-section .hiw-step.hiw-active .hiw-num {
  background: var(--sky) !important;
  color: var(--white) !important;
  box-shadow: 0 0 0 7px rgba(14,165,233,0.15), 0 6px 20px rgba(14,165,233,0.45) !important;
  transform: scale(1.15);
}
.hiw-section .hiw-step.hiw-done .hiw-num {
  background: var(--primary-light) !important;
  color: var(--white) !important;
}
@media (max-width: 768px) {
  .hiw-connector { display: none; }
}

/* ----- 4. TESTIMONIAL SCAN LINE + AVATAR RING ----- */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--sky-light), transparent);
  animation: tScan 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.testimonial-card:nth-child(1)::before { animation-delay: 0s; }
.testimonial-card:nth-child(2)::before { animation-delay: 1.5s; }
.testimonial-card:nth-child(3)::before { animation-delay: 3s; }
.testimonial-card:nth-child(4)::before { animation-delay: 4.5s; }
@keyframes tScan {
  0%   { left:-100%; opacity:0; }
  8%   { opacity:1; }
  82%  { opacity:0.9; }
  100% { left:100%; opacity:0; }
}

.t-avatar { position: relative; overflow: visible !important; }
.t-avatar::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--sky);
  opacity: 0;
  animation: avatarPing 3.5s ease-out infinite;
}
.testimonial-card:nth-child(1) .t-avatar::after { animation-delay: 0s; }
.testimonial-card:nth-child(2) .t-avatar::after { animation-delay: 0.9s; }
.testimonial-card:nth-child(3) .t-avatar::after { animation-delay: 1.8s; }
.testimonial-card:nth-child(4) .t-avatar::after { animation-delay: 2.7s; }
@keyframes avatarPing {
  0%   { transform:scale(0.85); opacity:0.7; }
  100% { transform:scale(1.7);  opacity:0; }
}

/* ============================================================
   HERO CYCLER — service type rotator (stacked layout)
   ============================================================ */
.hero-cycler {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 24px;
}
.hc-prefix {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.hc-word {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  color: var(--sky-light);
  white-space: nowrap;
  line-height: 1.2;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.hc-word.cycling-out {
  opacity: 0;
  transform: translateY(-7px);
}
.hc-word.cycling-in {
  opacity: 0;
  transform: translateY(7px);
}
@media (max-width: 1024px) {
  .hero-cycler { align-items: center; }
}

/* ============================================================
   AVAILABILITY CHIP
   ============================================================ */
.avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.avail-chip.is-open {
  background: rgba(74,222,128,0.18);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.35);
}
.avail-chip.is-closed {
  background: rgba(251,191,36,0.18);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.35);
}
.avail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: availPulse 2s ease-in-out infinite;
}
@keyframes availPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}
@media (max-width: 480px) { .avail-chip { display: none; } }

/* ============================================================
   WATER DROP CLICK RIPPLE
   ============================================================ */
.water-ripple {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  border: 1.5px solid rgba(14,165,233,0.55);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.75s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  z-index: 99999;
}
.water-ripple.r2 {
  animation-delay: 0.12s;
  border-color: rgba(14,165,233,0.3);
}
.water-ripple.r3 {
  animation-delay: 0.24s;
  border-color: rgba(14,165,233,0.15);
}
@keyframes rippleExpand {
  0%   { width: 0;     height: 0;     opacity: 0.85; transform: translate(-50%,-50%) scale(1); }
  100% { width: 130px; height: 130px; opacity: 0;    transform: translate(-50%,-50%) scale(1); }
}

/* ============================================================
   ECO COMMITMENT STRIP — single-line chip bar + expandable
   ============================================================ */
.eco-strip {
  background: linear-gradient(90deg, #052e16 0%, #14532d 60%, #166534 100%);
  position: relative;
  overflow: hidden;
}
.eco-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(74,222,128,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Single-row header — icon | title | chips | expand */
.eco-strip-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
  user-select: none;
}
.eco-strip-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: rgba(74,222,128,0.18);
  border: 1px solid rgba(74,222,128,0.32);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: #4ade80;
}
.eco-strip-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
.eco-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
}
.eco-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(74,222,128,0.10);
  border: 1px solid rgba(74,222,128,0.22);
  color: rgba(255,255,255,0.72);
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.eco-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(74,222,128,0.14);
  border: 1px solid rgba(74,222,128,0.3);
  color: #4ade80;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-heading);
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.eco-strip-header:hover .eco-expand-btn {
  background: rgba(74,222,128,0.22);
  border-color: rgba(74,222,128,0.5);
}
.eco-expand-ico {
  font-size: 0.65rem;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.eco-strip.eco-open .eco-expand-ico { transform: rotate(180deg); }

/* Expandable credential cards */
.eco-strip-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
}
.eco-strip.eco-open .eco-strip-body {
  max-height: 420px;
  opacity: 1;
}
.eco-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(74,222,128,0.14);
}
.eco-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(74,222,128,0.16);
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.eco-card:hover {
  background: rgba(74,222,128,0.07);
  border-color: rgba(74,222,128,0.3);
}
.eco-card-icon {
  width: 32px; height: 32px;
  background: rgba(74,222,128,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: #4ade80;
  flex-shrink: 0;
}
.eco-card-title {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
.eco-card-desc {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .eco-chips { display: none; }
  .eco-cards { grid-template-columns: repeat(3, 1fr); }
  .eco-strip.eco-open .eco-strip-body { max-height: 520px; }
}
@media (max-width: 600px) {
  .eco-cards { grid-template-columns: repeat(2, 1fr); }
  .eco-strip.eco-open .eco-strip-body { max-height: 720px; }
}
@media (max-width: 380px) {
  .eco-cards { grid-template-columns: 1fr; }
  .eco-strip.eco-open .eco-strip-body { max-height: 1100px; }
}

/* ============================================================
   SECTION HEADING UNDERLINE SWEEP
   ============================================================ */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-light), var(--sky));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-title.title-revealed::after {
  transform: scaleX(1);
}

/* ============================================================
   BEFORE / AFTER REVEAL SLIDER
   ============================================================ */
.ba-section {
  padding: var(--section-pad) 0;
  background: var(--gray-100);
  overflow: hidden;
}
.ba-header {
  text-align: center;
  margin-bottom: 48px;
}
.ba-header .section-label { margin-bottom: 10px; display: block; }
.ba-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.ba-header p {
  color: var(--gray-600);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto;
}

.ba-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ba-tab {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--gray-200);
  background: transparent;
  color: var(--gray-600);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.ba-tab:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
  background: rgba(37,99,235,0.05);
}
.ba-tab.active {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: #fff;
}

.ba-wrap {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  user-select: none;
  cursor: ew-resize;
  aspect-ratio: 4 / 3;
  background: var(--gray-200);
}

/* Before panel */
.ba-before {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ba-before img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  image-orientation: from-image;
}

/* After panel — clipped from left, reveals on the RIGHT */
.ba-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 50%);
}
.ba-after img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  image-orientation: from-image;
}

/* Shared label badges — anchored to the slider container, not their panels */
.ba-label {
  position: absolute;
  bottom: 16px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.48);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  backdrop-filter: blur(10px);
  z-index: 20;
  pointer-events: none;
}
/* Before = bottom-left, pinned to the wrap via the before panel */
.ba-before .ba-label-before { left: 16px; }
/* After label sits in the after panel but we pin it to the right of the wrap */
.ba-after .ba-label-after   { right: 16px; }

/* Drag handle */
.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.95);
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 16px rgba(0,0,0,0.35);
  pointer-events: none;
}
.ba-handle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  font-size: 0.82rem;
  gap: 2px;
  pointer-events: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ba-wrap:active .ba-handle-btn {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 24px rgba(0,0,0,0.32);
}

.ba-caption {
  text-align: center;
  margin-top: 16px;
  font-size: 0.83rem;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ba-caption i { color: var(--sky); }

@media (max-width: 600px) {
  .ba-wrap       { aspect-ratio: 3 / 4; border-radius: var(--radius-md); }
  .ba-handle-btn { width: 36px; height: 36px; font-size: 0.72rem; }
}

/* ============================================================
   FLOATING BOOK NOW NUDGE BAR
   ============================================================ */
.nudge-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--navy);
  border-top: 1px solid rgba(14,165,233,0.25);
  box-shadow: 0 -4px 32px rgba(9,28,69,0.55);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(12px);
}
.nudge-bar.nudge-visible {
  transform: translateY(0);
}
.nudge-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nudge-bar-text {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.nudge-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--sky);
  animation: availPulse 2s ease-in-out infinite;
}
.nudge-bar-copy {
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nudge-bar-copy strong {
  color: #fff;
  font-weight: 700;
}
.nudge-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nudge-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  background: linear-gradient(135deg, #25D366, #1aab54);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(37,211,102,0.35);
}
.nudge-bar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.5);
}
.nudge-bar-cta i { font-size: 1rem; }
.nudge-bar-dismiss {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.nudge-bar-dismiss:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
@media (max-width: 600px) {
  .nudge-bar-copy { font-size: 0.82rem; }
  .nudge-bar-cta  { padding: 8px 16px; font-size: 0.8rem; }
  .nudge-bar-inner { padding: 12px 16px; gap: 10px; }
}