/* ============ RESET & TOKENS ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --cyan:#00FFFF;
  --cyan-deep:#00b8bf;
  --cyan-text:#0092a3; /* AA-safe on white for text/icons */
  --ink:#0c1014;
  --gray-700:#40474e;
  --gray-500:#6b7280;
  --gray-100:#F8F9FA;
  --white:#FFFFFF;
  --line:#eceff1;
  --radius:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.19,1,.22,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
html{scroll-behavior:smooth;}
section[id], #home{scroll-margin-top:112px;}
/* Kill the default mobile "tap highlight" — the blue/gray rectangle
   flash Chrome/Safari draw over a link or button the instant you tap
   it. It has nothing to do with our own focus/hover styling below;
   it's a separate browser-level touch-feedback layer, and it was
   showing on every button/link on the site. */
*{ -webkit-tap-highlight-color:transparent; }
a,button,.btn,input,select,textarea,[role="button"],[tabindex]{
  -webkit-tap-highlight-color:transparent;
}
/* Keep an accessible focus ring for real keyboard navigation, but
   suppress the browser's default blue outline on a mouse click or
   touch tap (where :focus-visible correctly doesn't match). */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--cyan-deep); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Sora',system-ui,sans-serif;letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-text);margin-bottom:14px;
}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);}
.section{padding:110px 0;position:relative;}
.section.alt{background:#fff;}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(30px,4.2vw,46px);font-weight:800;line-height:1.1;color:var(--ink);}
.section-head p{margin-top:16px;color:var(--gray-500);font-size:17px;line-height:1.6;}
.rule{width:56px;height:3px;background:linear-gradient(90deg,var(--cyan),transparent);margin:20px auto 0;border-radius:3px;}
.section-head.left{text-align:left;margin-left:0;}
.section-head.left .rule{margin-left:0;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px;border-radius:100px;font-weight:700;font-size:15px;
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease),background .35s var(--ease);
  white-space:nowrap;position:relative;overflow:hidden;will-change:transform;
}
.btn-primary{background:var(--ink);color:var(--white);}
.btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px -8px rgba(0,255,255,.5);}
.btn-primary:active{transform:translateY(-1px) scale(.98);transition-duration:.15s;}
.btn-outline{background:var(--white);color:var(--ink);border:1.5px solid var(--line);}
.btn-outline:hover{transform:translateY(-4px) scale(1.02);border-color:var(--cyan);box-shadow:0 12px 28px -10px rgba(0,0,0,.16);}
.btn-outline:active{transform:translateY(-1px) scale(.98);transition-duration:.15s;}
.btn .arrow{transition:transform .4s var(--ease-spring);display:inline-block;}
.btn:hover .arrow{transform:translateX(5px);}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:rip .6s var(--ease-soft);pointer-events:none;}
@keyframes rip{to{transform:scale(3.2);opacity:0;}}

/* ============ 3D TILT / GLARE (tilt-3d.js) ============ */
.tilt-3d{transform-style:preserve-3d;}
.tilt-glare{
  position:absolute;inset:0;opacity:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(150px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 65%);
  mix-blend-mode:overlay;transition:opacity .35s ease;
  will-change:opacity;
}
/* Softer cyan-tinted glow for light/white surfaces, where a plain white
   overlay glow would be invisible (outline buttons, service cards, brand pills) */
.tilt-glare-soft{
  background:radial-gradient(150px circle at var(--gx,50%) var(--gy,50%),rgba(0,224,255,.32),rgba(255,255,255,.6) 32%,transparent 68%);
  mix-blend-mode:multiply;
}

/* ============ LOADER ============ */
#loader{
  position:fixed;inset:0;background:#fff;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  clip-path:circle(150% at 50% 50%);
  transition:clip-path 1s var(--ease-io), visibility 1s;
}
#loader.hide{clip-path:circle(0% at 50% 50%);visibility:hidden;pointer-events:none;}
.loader-phone{width:180px;height:310px;opacity:.95;transform:translateZ(0);will-change:transform,opacity;}
.loader-phone svg{width:100%;height:100%;}
.loader-outline{
  fill:none;stroke:var(--cyan-deep);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;
  animation:draw 1.25s var(--ease-io) forwards;
  filter:drop-shadow(0 0 10px rgba(0,255,255,.65));
}
@keyframes draw{to{stroke-dashoffset:0;}}
.loader-logo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.8);filter:blur(6px);
  animation:logoIn .9s var(--ease-spring) forwards;animation-delay:1.15s;
}
.loader-logo img{width:230px;max-width:60vw;filter:drop-shadow(0 0 26px rgba(0,255,255,.55));transform:translateZ(0);}
@keyframes logoIn{60%{filter:blur(0);}to{opacity:1;transform:scale(1);filter:blur(0);}}
.loader-wrap{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center;}
.loader-glow{
  position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,255,.35),transparent 70%);
  opacity:0;animation:glowIn 1.2s var(--ease) forwards;animation-delay:1.1s;
}
@keyframes glowIn{to{opacity:1;}}
.loader-ring{
  position:absolute;width:220px;height:220px;border-radius:50%;
  border:2px solid var(--cyan);opacity:0;
  animation:ringPulse 1.4s var(--ease-io) infinite;animation-delay:1.3s;
}
.loader-ring.d2{animation-delay:1.65s;}
@keyframes ringPulse{
  0%{transform:scale(.72);opacity:.85;}
  75%{opacity:0;}
  100%{transform:scale(1.4);opacity:0;}
}

/* ============ NAV ============ */
header{
  position:sticky;top:0;z-index:500;background:rgba(255,255,255,.92);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, box-shadow .4s ease;
}
header.scrolled{border-color:var(--line);box-shadow:0 8px 30px -18px rgba(0,0,0,.15);}
.nav-top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px 24px;max-width:1200px;margin:0 auto;gap:12px;
}
.nav-social{display:flex;gap:10px;align-items:center;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);color:var(--gray-700);transition:all .3s var(--ease);
}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan-text);transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,255,255,.5);}
.logo-link{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;}
.logo-link img.js-logo{height:52px;width:auto;transition:transform .3s var(--ease);}
.logo-link:hover img.js-logo{transform:scale(1.04);}
.nav-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;}
.nav-actions .btn{padding:11px 18px;font-size:14px;}
.nav-links{
  display:flex;justify-content:center;gap:34px;padding:0 0 14px;
  border-top:1px solid var(--line);margin-top:2px;padding-top:12px;
  font-size:14.5px;font-weight:600;color:var(--gray-700);
}
.nav-links a{position:relative;padding:4px 0;transition:color .3s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--cyan);transition:width .35s var(--ease);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.burger{display:none;flex-shrink:0;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--line);align-items:center;justify-content:center;background:var(--white);}
.burger span,.burger span::before,.burger span::after{content:'';display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:transform .28s var(--ease-soft),opacity .2s var(--ease-soft),top .28s var(--ease-soft),background .2s var(--ease-soft);}
.burger span::before{position:absolute;top:-6px;}
.burger span::after{position:absolute;top:6px;}
.burger.is-open span{background:transparent;}
.burger.is-open span::before{top:0;transform:rotate(45deg);}
.burger.is-open span::after{top:0;transform:rotate(-45deg);}

/* ============ HERO ============ */
.hero{position:relative;padding:90px 0 60px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.hero-badge{margin-bottom:20px;}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;line-height:1.06;}
.hero h1 .accent{color:var(--cyan-text);display:block;}
.hero p{margin-top:22px;font-size:17px;line-height:1.7;color:var(--gray-500);max-width:540px;}
.hero p.sub{margin-top:14px;}
.hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero-meta{display:flex;gap:26px;margin-top:36px;flex-wrap:wrap;}
.hero-meta span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--gray-700);}
.hero-meta svg{color:var(--cyan-text);flex-shrink:0;}
.reveal,.reveal-l,.reveal-r,.reveal-scale{backface-visibility:hidden;}
/* will-change is added just-in-time via .reveal-armed (see main.js) rather
   than on all ~70 reveal elements at once — declaring it globally on load
   forces the browser to promote every one of them to its own GPU layer
   before they're anywhere near the viewport, which is what was making
   scroll feel choppy on mid-range phones. */
.reveal-armed{will-change:transform,opacity;}
.reveal{opacity:0;transform:translateY(16px) scale(.99);transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft);}
.reveal.in{opacity:1;transform:none;}
.reveal-l{opacity:0;transform:translateX(-22px);transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft);}
.reveal-l.in{opacity:1;transform:none;}
.reveal-r{opacity:0;transform:translateX(22px);transition:opacity .28s var(--ease-soft),transform .28s var(--ease-soft);}
.reveal-r.in{opacity:1;transform:none;}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity .26s var(--ease-soft),transform .26s var(--ease-soft);}
.reveal-scale.in{opacity:1;transform:none;}
.stagger > *{transition-delay:calc(var(--i,0) * 18ms);}
.s-card.reveal{transform:translateY(18px) scale(.98);transition:opacity .26s var(--ease-soft),transform .26s var(--ease-spring);transition-delay:calc(var(--i,0) * 18ms);}
.s-card.reveal.in{opacity:1;transform:none;}
.reveal.in,.reveal-l.in,.reveal-r.in,.reveal-scale.in{will-change:auto;}

/* Hero phone visual */
.phone-stage{position:relative;display:flex;align-items:center;justify-content:center;height:560px;}
.floaty{display:none;}
@keyframes float{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(6px,-24px,0);}}
.phone-frame{
  width:min(260px, 46vw);aspect-ratio:260/530;height:auto;
  position:relative;background:transparent;border:none;box-shadow:none;overflow:visible;
}
.phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:var(--ink);border-radius:0 0 22px 22px;z-index:6;box-shadow:0 2px 4px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:flex-end;padding-right:14px;}
.phone-notch::after{content:'';width:7px;height:7px;border-radius:50%;background:#1a2a35;box-shadow:inset 0 0 0 1.5px #2a3a48, 0 0 3px rgba(0,255,255,.45);}
.phone-selfie{position:absolute;top:14px;right:calc(50% - 34px);width:6px;height:6px;border-radius:50%;background:#0f2027;box-shadow:inset 0 0 0 1px #24384a, 0 0 4px rgba(0,255,255,.55);z-index:7;}
/* Brand-new phone shine + sparkle */
.phone-shine{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:38px;}
.phone-shine::before{
  content:'';position:absolute;top:-40%;left:-60%;width:60%;height:180%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:rotate(18deg) translateX(0);
  animation:phoneShine 4.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes phoneShine{
  0%{transform:rotate(18deg) translateX(-40%);opacity:0;}
  15%{opacity:1;}
  60%{opacity:1;}
  100%{transform:rotate(18deg) translateX(320%);opacity:0;}
}
.sparks{position:absolute;inset:0;pointer-events:none;}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px 2px rgba(255,255,255,.9),0 0 20px 4px rgba(0,255,255,.55);
  opacity:0;animation:sparkTwinkle 2.6s ease-in-out infinite;will-change:transform,opacity;}
.spark.s2{width:4px;height:4px;animation-duration:3.2s;animation-delay:.6s;}
.spark.s3{width:8px;height:8px;animation-duration:3.8s;animation-delay:1.2s;}
.spark.s4{width:5px;height:5px;animation-duration:2.9s;animation-delay:1.8s;}
.spark.s5{width:3px;height:3px;animation-duration:3.4s;animation-delay:.3s;}
@keyframes sparkTwinkle{
  0%,100%{opacity:0;transform:scale(.4);}
  40%{opacity:1;transform:scale(1.2);}
  60%{opacity:.9;transform:scale(1);}
}
.scanline{
  position:absolute;left:0;right:0;height:56px;top:-56px;
  background:linear-gradient(180deg,transparent,rgba(0,255,255,.55),transparent);
  animation:scan 2.6s ease-in-out infinite;
}
@keyframes scan{0%{top:-56px;}50%{top:100%;}100%{top:-56px;}}
.glow-ring{position:absolute;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,255,.25),transparent 70%);animation:pulse 3.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.15);opacity:1;}}
/* Off-screen: freeze every looping decorative animation in the hero
   phone mockup instead of letting it composite forever in the background. */
.phone-stage.is-offscreen .phone-shine::before,
.phone-stage.is-offscreen .spark,
.phone-stage.is-offscreen .scanline,
.phone-stage.is-offscreen .glow-ring,
.phone-stage.is-offscreen .floaty,
.phone-stage.is-offscreen .phone-inner-logo::after{
  animation-play-state:paused;
}
.phone-label{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);text-align:center;color:var(--ink);}
.phone-label b{display:block;font-size:14px;font-weight:800;}
.phone-label span{font-size:11px;color:var(--gray-500);}
.sparkle{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:var(--cyan-text);margin:0 auto 10px;}

/* ============ SERVICES ============ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.s-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;position:relative;overflow:hidden;transform-style:preserve-3d;perspective:600px;
  transition:transform .5s var(--ease-spring),box-shadow .5s var(--ease),border-color .5s var(--ease);
  will-change:transform;
}
.s-card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);padding:1.5px;
  background:linear-gradient(135deg,var(--cyan),transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);
}
.s-card:hover{box-shadow:0 30px 56px -26px rgba(0,150,160,.4);border-color:transparent;}
.s-card:hover::before{opacity:1;}
.s-icon{
  width:52px;height:52px;border-radius:14px;background:rgba(0,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:var(--cyan-text);margin-bottom:18px;
  transition:transform .5s var(--ease-spring),background .4s var(--ease);
}
.s-card:hover .s-icon{transform:scale(1.1) rotate(-4deg) translateZ(20px);background:rgba(0,255,255,.22);}
.s-icon-hero{
  width:66px;height:66px;border-radius:16px;position:relative;
  animation:iconFloat 3.4s var(--ease) infinite;
}
/* Ring pulse used to animate box-shadow directly, which forces a paint
   every frame forever (not just on hover) — box-shadow isn't a
   compositor-only property. Same visual, done as a pseudo-element whose
   box-shadow is fixed and only its transform/opacity animate, so this
   costs nothing beyond the GPU compositor. */
.s-icon-hero::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 9px rgba(0,255,255,.28);
  opacity:.28;transform:scale(.85);
  animation:iconRing 3.4s ease-in-out infinite;
}
.s-icon-hero svg{width:30px;height:30px;}
.s-card:hover .s-icon-hero{transform:scale(1.14) rotate(-4deg) translateZ(20px);}
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes iconRing{0%,100%{opacity:.28;transform:scale(.85);}50%{opacity:0;transform:scale(1.18);}}
@media (prefers-reduced-motion: reduce){
  .s-icon-hero{animation:none;}
}
.s-card h3,.s-card p{transition:transform .5s var(--ease);}
.s-card:hover h3{transform:translateZ(14px);}
.s-card h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.s-card p{font-size:14.5px;color:var(--gray-500);line-height:1.6;}

/* ============ WHY US ============ */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px;}
.stat{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:22px 10px;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.stat:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(0,0,0,.18);}
.stat b{font-family:'Sora',sans-serif;font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--ink);display:block;}
.stat span{font-size:12.5px;color:var(--gray-500);font-weight:600;}
.feature-list{display:flex;flex-direction:column;gap:12px;}
.feature-item{
  display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;font-weight:600;font-size:15px;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.feature-item:hover{transform:translateX(6px);border-color:var(--cyan);}
.feature-item .fi-icon{
  width:34px;height:34px;border-radius:9px;background:rgba(0,255,255,.14);color:var(--cyan-text);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.promise-card{
  background:var(--white);color:var(--ink);border-radius:22px;
  border:1px solid var(--line);
  box-shadow:0 20px 50px -30px rgba(12,16,20,.2);
  padding:40px 34px;position:relative;overflow:hidden;
}
.promise-card::after{
  content:'';position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,255,.14),transparent 70%);
  top:-80px;right:-80px;
  animation:promiseFloat 12s ease-in-out infinite;
}
@keyframes promiseFloat{
  0%{transform:translate(0,0) scale(1);}
  25%{transform:translate(-40px,30px) scale(1.08);}
  50%{transform:translate(-15px,70px) scale(0.95);}
  75%{transform:translate(30px,20px) scale(1.05);}
  100%{transform:translate(0,0) scale(1);}
}
.promise-card .eyebrow{color:var(--cyan-text);}
.promise-card h3{font-size:clamp(24px,2.8vw,32px);font-weight:800;line-height:1.2;margin-bottom:14px;color:var(--ink);}
.promise-card h3 .cy{color:var(--cyan-text);}
.promise-card p{color:var(--gray-500);font-size:15px;line-height:1.7;margin-bottom:22px;}
.promise-tags{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;font-weight:700;color:var(--ink);}
.promise-tags span{display:flex;align-items:center;gap:8px;}
.promise-tags svg{color:var(--cyan-text);}

/* ============ BEFORE / AFTER ============ */
.ba-wrap{max-width:820px;margin:0 auto;}
.compare{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.35);cursor:ew-resize;user-select:none;
  background:#0c1014;
}
.ba-side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;}
.ba-before{background:linear-gradient(150deg,#20262b,#0c1014);}
.ba-after{background:linear-gradient(150deg,#052b2e,#00191b);clip-path:inset(0 0 0 50%);}
.ba-phone-mock{width:120px;height:220px;border:6px solid rgba(255,255,255,.85);border-radius:26px;position:relative;}
.ba-before .ba-phone-mock{background:rgba(255,255,255,.04);}
.ba-before .crack-lines{position:absolute;inset:0;}
.ba-before .crack-lines path{stroke:rgba(255,255,255,.65);stroke-width:1.2;fill:none;}
.ba-after .ba-phone-mock{background:linear-gradient(160deg,rgba(0,255,255,.25),rgba(0,255,255,.02));box-shadow:0 0 40px rgba(0,255,255,.35) inset;}
.ba-tag{position:absolute;top:18px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.12);color:#fff;padding:7px 14px;border-radius:100px;backdrop-filter:blur(6px);}
.ba-before .ba-tag{left:18px;}
.ba-after .ba-tag{right:18px;}
.ba-label{color:#dfe7ea;font-size:13px;font-weight:600;}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:0;
  background:transparent;transform:translateX(-50%);pointer-events:none;
}
.ba-handle::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--cyan);box-shadow:0 0 16px rgba(0,255,255,.8);transform:translateX(-50%);}
.ba-grip{
  position:absolute;top:50%;left:50%;width:46px;height:46px;border-radius:50%;
  background:var(--cyan);transform:translate(-50%,-50%);pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:#04262a;
  box-shadow:0 8px 24px -6px rgba(0,255,255,.7);
}
.ba-caption{text-align:center;margin-top:22px;color:var(--gray-500);font-size:14.5px;}

/* ============ REVIEWS ============ */
.reviews-head{text-align:center;margin-bottom:44px;}
.stars{color:#f5b400;font-size:19px;letter-spacing:2px;}
.rating-line{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;color:var(--gray-700);margin-top:6px;}
.carousel{position:relative;max-width:680px;margin:0 auto;}
.track{position:relative;contain:layout;min-height:200px;transition:height .45s var(--ease-soft);}
.r-card{
  /* top/left/right only (no "bottom") on purpose: this lets each card
     size itself to its OWN content, independent of whatever height
     .track currently happens to be animating through. The previous
     "inset:0" pinned every edge to the parent, so while .track's
     height was mid-transition between two different review lengths,
     the outgoing card got visibly stretched/squashed to match — and
     because the active card also switched position:absolute -> relative
     and back on every rotation (a hard, unanimatable jump), the whole
     card appeared to shift position each time reviews auto-changed. */
  position:absolute;top:0;left:0;right:0;z-index:1;
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:38px 40px;box-shadow:0 30px 60px -34px rgba(0,0,0,.18);
  opacity:0;transform:translateX(28px) scale(.97);
  transition:opacity .65s var(--ease-soft),transform .65s var(--ease-soft);pointer-events:none;
}
.r-card.exit-left{opacity:0;transform:translateX(-28px) scale(.97);}
.r-card.active{opacity:1;transform:translateX(0) scale(1);pointer-events:auto;z-index:2;}
.r-quote-mark{color:var(--cyan);font-size:34px;font-family:'Sora',sans-serif;font-weight:800;line-height:1;margin-bottom:10px;}
.r-card p.quote{font-size:17px;line-height:1.7;color:var(--ink);font-weight:500;}
.r-meta{margin-top:20px;display:flex;justify-content:space-between;align-items:center;}
.r-meta b{font-size:15px;}
.r-controls{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px;}
.r-arrow{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);}
.r-arrow:hover{border-color:var(--cyan);color:var(--cyan-text);transform:scale(1.08);}
.r-dots{display:flex;gap:8px;}
.r-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.35s var(--ease);cursor:pointer;}
.r-dot.active{width:26px;background:var(--cyan-deep);}

/* ============ VISIT ============ */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;max-width:1080px;margin:0 auto;}
.map-wrap{border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--line);min-height:420px;box-shadow:0 20px 40px -24px rgba(0,60,80,.18);}
.map-wrap iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:grayscale(4%) contrast(1.03);}
.visit-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px;}
.visit-card h3{font-size:22px;font-weight:800;margin-bottom:22px;}
.v-row{display:flex;gap:14px;margin-bottom:20px;}
.v-row svg{color:var(--cyan-text);flex-shrink:0;margin-top:2px;}
.v-row b{display:block;font-size:14px;margin-bottom:3px;}
.v-row span,.v-row a{font-size:14.5px;color:var(--gray-500);}
.v-row a.link{color:var(--cyan-text);font-weight:700;display:inline-flex;align-items:center;gap:4px;margin-top:4px;}
.v-ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.map-wrap{border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--line);min-height:340px;}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(6%) contrast(1.03);}
.map-open{
  position:absolute;top:16px;left:16px;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
  padding:9px 16px;border-radius:100px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.25);z-index:2;transition:.3s var(--ease);
}
.map-open:hover{transform:translateY(-2px);color:var(--cyan-text);}

/* ============ ABOUT ============ */
.about-box{max-width:820px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:44px;text-align:left;}
.about-box p{color:var(--gray-700);line-height:1.8;font-size:16px;margin-bottom:16px;}
.about-box p:last-child{margin-bottom:0;font-weight:700;color:var(--ink);}

/* ============ CTA STRIP ============ */
.cta-strip{
  background:#fff;color:var(--ink);text-align:center;
  padding:80px 24px;position:relative;overflow:hidden;
  border-top:1px solid var(--line);
}
.cta-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(0,255,255,.1),transparent 60%);}
.cta-strip h2{position:relative;font-size:clamp(26px,3.6vw,40px);font-weight:800;max-width:640px;margin:0 auto 26px;color:var(--ink);}
.cta-strip .btn-primary{background:var(--cyan);color:#04262a;}
.cta-strip .btn-primary:hover{box-shadow:0 16px 34px -10px rgba(0,255,255,.55);}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#c7ced2;padding:70px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand img{height:46px;margin-bottom:14px;}
.footer-brand p{font-size:13.5px;color:#8b949a;margin-bottom:18px;}
.footer-social{display:flex;gap:10px;}
.footer-social .icon-btn{border-color:rgba(255,255,255,.16);color:#c7ced2;}
.footer-social .icon-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;color:#fff;}
.footer-col a,.footer-col div{display:block;font-size:14.5px;color:#a7aeb3;margin-bottom:13px;}
.footer-col a:hover{color:var(--cyan);}
.footer-col .f-item{display:flex;align-items:flex-start;gap:10px;}
.footer-col svg{margin-top:2px;color:var(--cyan-text);flex-shrink:0;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;color:#7b838a;flex-wrap:wrap;gap:10px;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero{padding:56px 0 30px;}
  .hero-grid{grid-template-columns:1fr;gap:18px;}
  .phone-stage{height:auto;min-height:0;padding:0;margin-bottom:-8px;order:-1;}
  .phone-frame{width:min(190px,40vw);aspect-ratio:260/360;}
  .why-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .visit-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    padding:20px 24px 26px;border-bottom:1px solid var(--line);gap:16px;box-shadow:0 20px 30px -20px rgba(0,0,0,.15);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.98);transform-origin:top center;
    transition:opacity .22s var(--ease-soft),transform .22s var(--ease-soft),visibility 0s linear .22s;}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s;}
  .burger{display:flex;}
  /* Mobile top bar: nav-social is hidden entirely below, so drop it from
     the grid rather than leaving a dead empty track — that dead 1fr/auto
     track was pushing the logo off-center and crowding it against the
     call/WhatsApp/burger cluster on narrow phones. Two tracks, logo
     pinned left with room to breathe, actions pinned right. */
  .nav-top{grid-template-columns:auto auto;justify-content:space-between;padding:12px 16px;gap:8px;}
  .nav-social{display:none;}
  .logo-link{justify-content:flex-start;gap:7px;min-width:0;}
  .logo-link img.js-logo{height:38px;}
  .services-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
  .hero-ctas .btn{flex:1;}
  .nav-actions{gap:8px;}
  .nav-actions .btn span{display:none;}
  .nav-actions .btn{padding:10px 12px;}
  .icon-btn{width:34px;height:34px;}
  .burger{width:34px;height:34px;}
}
@media (max-width:400px){
  /* Even tighter phones: the "by [zeeq logo]" mark is a secondary
     brand credit, not primary nav — keep the mark but drop the "by"
     label and slim the divider so the primary logo keeps its space. */
  .nav-top{padding:10px 12px;}
  .logo-link img.js-logo{height:34px;}
  .zeeq-assoc{gap:4px;padding-left:7px;margin-left:0;}
  .zeeq-assoc-by{display:none;}
  .logo-link .zeeq-assoc-logo{height:15px;}
  .nav-actions{gap:6px;}
  .nav-actions .btn{padding:9px 10px;}
}

/* ============ ANIMATED BG HUE (page + loader) ============
   Perf note (rewritten): this used to be two 60vmax circles with
   filter:blur(90px), fixed over the whole page. filter:blur() at that
   radius/size is genuinely expensive to keep rasterized on mid/low-end
   GPUs — far more than a plain composited layer — and having it sit
   under the entire page meant every device paid that cost the whole
   time you scrolled, animation-pause-on-scroll notwithstanding.
   Fix: the radial-gradient already fades to transparent on its own
   (45%→70%), so the blur filter was mostly redundant softening. Drop
   the filter, shrink the blobs, and shrink them further on small/
   touch screens — same ambient-glow look, none of the blur cost. */
:root{ --tpr-hue-1: 0,255,255; --tpr-hue-2: 0,146,163; }
.bg-hue{position:fixed;inset:-20% -20% -20% -20%;z-index:-1;pointer-events:none;overflow:hidden;transition:opacity .3s ease;}
.bg-hue::before,.bg-hue::after{
  content:'';position:absolute;width:42vmax;height:42vmax;border-radius:50%;
  opacity:.42;will-change:transform;transform:translateZ(0);
  background:radial-gradient(circle,rgba(var(--tpr-hue-1),.55),rgba(var(--tpr-hue-1),.15) 40%,transparent 62%);
}
.bg-hue::before{top:-15%;left:-10%;animation:hueA 18s ease-in-out infinite;}
.bg-hue::after{bottom:-15%;right:-10%;background:radial-gradient(circle,rgba(var(--tpr-hue-2),.45),rgba(var(--tpr-hue-1),.1) 40%,transparent 62%);animation:hueB 24s ease-in-out infinite;}
@media (max-width:768px), (pointer:coarse){
  /* Phones/tablets have the least GPU headroom and are exactly where
     "under 23fps while scrolling" shows up — shrink further here. */
  .bg-hue::before,.bg-hue::after{width:30vmax;height:30vmax;opacity:.32;}
}
@keyframes hueA{
  0%{transform:translate3d(0,0,0) scale(1);}
  25%{transform:translate3d(8vw,-16vh,0) scale(1.08);}
  50%{transform:translate3d(14vw,-30vh,0) scale(1.15);}
  75%{transform:translate3d(5vw,-14vh,0) scale(1.06);}
  100%{transform:translate3d(0,0,0) scale(1);}
}
@keyframes hueB{
  0%{transform:translate3d(0,0,0) scale(1);}
  25%{transform:translate3d(-10vw,-14vh,0) scale(1.1);}
  50%{transform:translate3d(-16vw,-28vh,0) scale(1.2);}
  75%{transform:translate3d(-6vw,-12vh,0) scale(1.08);}
  100%{transform:translate3d(0,0,0) scale(1);}
}
#loader .bg-hue{position:absolute;inset:0;}
#loader .bg-hue::before,#loader .bg-hue::after{opacity:.55;filter:blur(70px);}
body.tpr-hue-off .bg-hue{opacity:0;}
/* Perf: freeze the perpetual blur-blob motion for the ~150ms while the
   user is actively scrolling (see main.js onScroll). transform-only
   animations are normally compositor-only and "free", but at this size
   (60vmax) combined with a 90px blur they're the single biggest
   remaining continuous background cost on the page, so we give the
   compositor a break exactly when scroll performance matters most. */
body.is-scrolling .bg-hue::before,
body.is-scrolling .bg-hue::after{ animation-play-state:paused; }

/* Phone frame gets the phone-icon logo inside its screen */
.phone-inner-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.phone-inner-logo img{width:62%;max-width:180px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));will-change:transform;}
@keyframes iconFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.03);}}

/* Animated moving border on service cards (always visible on hover, travels around) */
.s-card::before{opacity:0;}
.s-card:hover::before{
  opacity:1;
  background:conic-gradient(from var(--ang,0deg),
    transparent 0deg, var(--cyan) 60deg, var(--cyan-deep) 120deg,
    transparent 180deg, transparent 360deg);
  animation:borderSpin 3.2s linear infinite;
}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes borderSpin{to{--ang:360deg;}}
.s-card{transform:translateZ(0);}

/* perf: hint compositor + skip offscreen work.
   The old flat "800px" guess made every section — including short
   ones like Reviews — reserve a fixed 800px placeholder box any time
   the browser hadn't painted its real content yet (fast scroll, first
   paint, or right after the carousel resizes its track). Shorter
   sections showed that reserved gap as blank space. "auto 800px"
   makes the browser remember each section's real last-painted size
   and use that instead, so the placeholder always matches reality. */
.section{content-visibility:auto;contain-intrinsic-size:auto 800px;}
/* NOTE: .reveal/.reveal-scale/.reveal-l/.reveal-r are intentionally
   excluded here — forcing will-change on all ~70 of them permanently
   is exactly what .reveal-armed (just-in-time promotion, see above)
   exists to avoid. Promoting every reveal element to its own GPU
   layer on load is a real jank source on low-end phones (compositor
   memory pressure), so they stay governed solely by .reveal-armed. */
.phone-frame,.phone-inner-logo img,.spark,.floaty{will-change:transform,opacity;}
/* kill costly conic-gradient spin */
@keyframes borderSpin{to{--ang:360deg;}}
/* smoother sparkle inside phone-frame after repair */
.phone-inner-logo{filter:none;}
.phone-inner-logo::before{content:none;}
.phone-inner-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);mix-blend-mode:screen;transform:translateX(-100%);animation:phoneShineNew 3.2s ease-in-out infinite;pointer-events:none;border-radius:32px;}
@keyframes phoneShineNew{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}

/* Strip the outer phone chassis in the Repaired & Restored hero */
#phoneFrame{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
#phoneFrame::before,#phoneFrame::after{display:none!important;}
#phoneFrame .phone-notch,#phoneFrame .phone-selfie,#phoneFrame .phone-shine{display:none!important;}
.phone-inner-logo{position:relative!important;inset:auto!important;}
.phone-inner-logo img{width:100%!important;max-width:none!important;}
.phone-inner-logo::after{border-radius:0!important;}

/* hide the Repaired & Restored text label under the hero phone image */
#phoneFrame .phone-label{display:none!important;}

/* === Blue moving border on Why-Us feature items === */
.feature-item{position:relative;isolation:isolate;overflow:hidden;}
.feature-item::before{
  content:"";position:absolute;inset:-2px;border-radius:16px;padding:2px;
  background:conic-gradient(from var(--fang,0deg),
    transparent 0deg, rgba(0,255,255,.05) 40deg,
    var(--cyan) 90deg, var(--cyan-deep) 140deg,
    rgba(0,255,255,.05) 210deg, transparent 300deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fiSpin 3.6s linear infinite;
  pointer-events:none;z-index:1;opacity:.9;
}
.feature-item > *{position:relative;z-index:2;}
@property --fang{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes fiSpin{to{--fang:360deg;}}
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .feature-item::before{background:linear-gradient(120deg,transparent,var(--cyan),transparent);animation:fiSlide 3.6s linear infinite;}
  @keyframes fiSlide{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
}
@media (prefers-reduced-motion: reduce){.feature-item::before{animation:none;}}

/* === Shine sweep on Before/After "after" phone === */
.ba-after .ba-phone-mock{position:relative;overflow:hidden;}
.ba-after .ba-phone-mock::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);
  mix-blend-mode:screen;transform:translateX(-120%);
  animation:baShine 2.8s ease-in-out infinite;pointer-events:none;
}
.ba-after .ba-phone-mock::after{
  content:"";position:absolute;inset:-6px;border-radius:28px;
  box-shadow:0 0 30px rgba(0,255,255,.55), 0 0 60px rgba(0,255,255,.25) inset;
  animation:baGlow 2.8s ease-in-out infinite;pointer-events:none;
}
@keyframes baShine{0%{transform:translateX(-120%);}55%,100%{transform:translateX(120%);}}
@keyframes baGlow{0%,100%{opacity:.55;}50%{opacity:1;}}

/* ============================================================
   CUSTOM DEVICE PICKER (Brand / Model / Type)
   White background · Brand cyan accent · Black text
   Overrides native OS dropdown styling on mobile.
   ============================================================ */
:root{
  --picker-accent:#00b8bf;
  --picker-accent-strong:#0092a3;
  --picker-accent-soft:rgba(0,184,191,.16);
  --picker-black:#0a0a0a;
}
select.tpr-native-hidden{
  position:absolute!important;opacity:0!important;pointer-events:none!important;
  height:0!important;width:0!important;padding:0!important;margin:0!important;border:0!important;
}
.tpr-picker{position:relative;width:100%;}
.tpr-picker.is-open{z-index:200;}
.enq-field:has(.tpr-picker.is-open){position:relative;z-index:200;}
.tpr-picker-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#ffffff;color:var(--picker-black);
  border:1.5px solid #dfe4e8;border-radius:14px;
  padding:16px 18px 16px 44px;font-size:15px;font-weight:600;font-family:inherit;
  text-align:left;transition:border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
}
.tpr-picker-btn:hover{border-color:var(--picker-accent);transform:translateY(-1px);}
.tpr-picker.is-open .tpr-picker-btn{
  border-color:var(--picker-accent);
  box-shadow:0 0 0 4px var(--picker-accent-soft);
  background:#fff;
}
.tpr-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpr-picker-label.is-placeholder{color:#6b7280;font-weight:500;}
.tpr-picker-caret{
  color:var(--picker-accent-strong);font-size:14px;font-weight:800;
  transition:transform .3s var(--ease-spring);
}
.tpr-picker.is-open .tpr-picker-caret{transform:rotate(180deg);}

.tpr-picker-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1000;
  background:#ffffff;color:var(--picker-black);
  border:1.5px solid var(--picker-accent);
  border-radius:14px;
  box-shadow:0 20px 44px -18px rgba(10,10,10,.32), 0 4px 12px rgba(0,184,191,.18);
  overflow:hidden;
  display:none;
  max-height:340px;
  flex-direction:column;
  transform-origin:top center;
  animation:tprPickerIn .28s var(--ease-spring);
}
.tpr-picker.is-open .tpr-picker-menu{display:flex;}
@keyframes tprPickerIn{
  from{opacity:0;transform:translateY(-6px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

.tpr-picker-search-wrap{padding:10px 10px 8px;border-bottom:1px solid #eef2f5;background:#fff;}
.tpr-picker-search{
  width:100%;padding:10px 12px;border:1.5px solid #e3e8ec;border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--picker-black);background:#fff;outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.tpr-picker-search:focus{border-color:var(--picker-accent);box-shadow:0 0 0 3px var(--picker-accent-soft);}

.tpr-picker-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;}
.tpr-picker-opt{
  padding:11px 12px;border-radius:9px;font-size:14.5px;font-weight:600;
  color:var(--picker-black);cursor:pointer;line-height:1.35;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.tpr-picker-opt:hover{background:var(--picker-accent-soft);color:var(--picker-accent-strong);transform:translateX(2px);}
.tpr-picker-opt.is-selected{background:var(--picker-accent);color:#fff;}
.tpr-picker-empty{padding:18px;text-align:center;color:#6b7280;font-size:13.5px;display:none;}

/* Keep the floating label of the underlying <select> field looking active
   whenever the picker shows a value. */
.enq-field:has(.tpr-picker.is-open) > label,
.enq-field:has(select.tpr-native-hidden[data-tpr-enhanced]) > label{
  transform:translate(-6px,-14px) scale(.82);color:var(--picker-accent-strong);font-weight:700;
}

/* Scrollbar inside the menu */
.tpr-picker-list::-webkit-scrollbar{width:8px;}
.tpr-picker-list::-webkit-scrollbar-thumb{background:rgba(0,184,191,.35);border-radius:8px;}
.tpr-picker-list::-webkit-scrollbar-track{background:transparent;}

@media (prefers-reduced-motion: reduce){
  .tpr-picker-menu{animation:none!important;}
}

/* ============================================================
   GUARANTEE / TRUST CARDS + BRAND STRIP  (added)
   ============================================================ */
.guarantee-section{background:#fff;padding:100px 0;overflow:hidden;border-top:1px solid var(--line);}
.guarantee-section .section-head h2{color:var(--ink);}
.guarantee-section .section-head p{color:var(--gray-500);}
.guarantee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
.g-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;padding:32px 26px;position:relative;overflow:hidden;
  box-shadow:0 10px 24px -20px rgba(12,16,20,.15);
  transform-style:preserve-3d;perspective:600px;will-change:transform;
  transition:transform .4s var(--ease-spring), border-color .4s ease, box-shadow .4s ease;
}
.g-card:hover{border-color:transparent;box-shadow:0 30px 56px -26px rgba(0,146,163,.22);}
.g-card::after{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,255,.1),transparent 70%);
  top:-70px;right:-70px;pointer-events:none;
}
/* Animated moving border on hover — same travelling cyan line as the service cards */
.g-card::before{
  content:'';position:absolute;inset:0;border-radius:20px;padding:1.5px;
  background:conic-gradient(from var(--ang,0deg),
    transparent 0deg, var(--cyan) 60deg, var(--cyan-deep) 120deg,
    transparent 180deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.g-card:hover::before{opacity:1;animation:borderSpin 3.2s linear infinite;}
.g-num{font-family:'Sora',sans-serif;font-weight:800;font-size:38px;color:var(--cyan-text);opacity:.9;line-height:1;transition:transform .5s var(--ease);}
.g-card h3,.g-card p{transition:transform .5s var(--ease);}
.g-card:hover .g-num{transform:translateZ(18px);}
.g-card:hover h3{transform:translateZ(14px);}
.g-card h3{color:var(--ink);font-size:19px;margin-top:16px;}
.g-card p{color:var(--gray-500);font-size:14.5px;line-height:1.6;margin-top:8px;}

/* GO GREEN / RECYCLING */
.green-section{
  --green:#3ECB7A;
  --green-deep:#127a3e;
  --green-tint:#EAF8EF;
  background:#fff;
  padding:90px 0;
}
.green-card{
  max-width:760px;margin:0 auto;text-align:center;
  background:var(--white);
  border:1px solid rgba(31,170,89,.18);
  border-radius:24px;padding:56px 40px;
  box-shadow:0 20px 50px -20px rgba(31,170,89,.25);
}
.green-icon{
  width:64px;height:64px;border-radius:50%;
  background:rgba(31,170,89,.12);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.green-section .eyebrow{color:var(--green-deep);justify-content:center;}
.green-card h2{font-size:clamp(26px,3.4vw,36px);color:var(--green-deep);margin-bottom:18px;}
.green-card p{color:var(--gray-700);font-size:15.5px;line-height:1.7;max-width:560px;margin:0 auto 8px;}
.green-card p:last-of-type{margin-bottom:8px;}
.green-call-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  background:var(--green);border-color:var(--green);
}
.green-call-btn:hover{background:var(--green-deep);border-color:var(--green-deep);}
.green-call-btn svg{flex-shrink:0;}

.brand-strip{background:#fff;padding:0 0 100px;border-top:1px solid var(--line);}
.brand-strip .eyebrow{justify-content:center;}
.brand-strip-head{text-align:center;margin-bottom:44px;}
.brand-strip-head p{color:var(--gray-500);font-size:15px;margin-top:10px;letter-spacing:.14em;text-transform:uppercase;}
.brand-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px;max-width:1080px;margin:0 auto;perspective:1000px;}

/* ============ LIGHTWEIGHT 3D BRAND LOGOS ============
   No frosted glass, no backdrop-filter, no liquid blobs, no pointer-tracking JS.
   The logos sit on simple 3D image plaques with one cheap transform on hover. */
.brand-pill{
  position:relative;min-width:158px;height:86px;border-radius:22px;
  transform-style:preserve-3d;cursor:pointer;
  -webkit-tap-highlight-color:transparent;contain:paint;
}
.brand-pill.reveal{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .22s var(--ease-soft),transform .22s var(--ease-soft);transition-delay:calc(var(--i,0) * 10ms);}
.brand-pill.reveal.in{opacity:1;transform:none;}

.bp-card{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:10px;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:
    0 14px 28px -22px rgba(12,16,20,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform:translateZ(0) rotateX(0) rotateY(0);
  transition:transform .5s var(--ease-soft), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* Faint top highlight only — no dark ambient glow needed now the
   plaque itself is light, since the logos already read fine on white. */
.bp-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(140% 120% at 50% 0%, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 60%);
  opacity:.6;
}
/* Hover: border + soft brand-tint glow. Tilt handled by tilt-3d.js on .brand-pill. */
.brand-pill:hover .bp-card{
  border-color:var(--tint, rgba(0,146,163,.4));
  box-shadow:
    0 22px 36px -20px rgba(12,16,20,.22),
    0 0 0 1px var(--tint, rgba(0,146,163,.18)),
    0 0 32px -8px var(--tint-glow, rgba(0,146,163,.3)),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.brand-pill:hover .bp-card::before{opacity:.85;}

.bp-logo{
  position:relative;z-index:3;height:38px;width:auto;max-width:130px;object-fit:contain;
  pointer-events:none;transform:translateZ(26px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.08));
  transition:filter .32s var(--ease), transform .55s var(--ease-soft);
}
.brand-pill:hover .bp-logo{
  transform:translateZ(34px) scale(1.05);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.14));
}
.bp-logo.brand-google-text{
  font-family:'Sora',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.01em;
}
/* Force dark/monochrome logos to a consistent solid black on the light
   plaque, regardless of the source PNG's native shade. */
.bp-logo.mono-logo{
  filter:brightness(0) opacity(.82);
}
.brand-pill:hover .bp-logo.mono-logo{
  filter:brightness(0) opacity(1);
}
/* Motorola's source PNG (black circle + white "M" cut-out) already
   reads correctly on a light plaque with no filter at all — the white
   M simply shows the card's white background through it. */
.bp-logo.invert-logo{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
.brand-pill:hover .bp-logo.invert-logo{
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.14));
}

@media (max-width:560px){
  .brand-pill{min-width:118px;height:64px;}
  .bp-card{border-radius:16px;padding:8px;}
  .bp-card::before,.bp-card::after{inset:0;border-radius:inherit;}
  .brand-pill:hover .bp-card{transform:none;}
  .bp-logo{height:28px;max-width:96px;transform:translateZ(18px);}
  .brand-pill:hover .bp-logo{transform:translateZ(18px) scale(1.04);}
  .bp-logo.brand-google-text{font-size:17px;}
  @keyframes bpFloat{
    0%,100%{transform:translateZ(18px) translateY(0);}
    50%{transform:translateZ(18px) translateY(-2px);}
  }
  /* Perf: touch devices never see the hover tilt (tilt-3d.js skips them),
     so drop the 3D containing-block + heavy multi-layer shadows that were
     forcing expensive paint/composite work on every scroll frame. */
  .brand-grid{perspective:none;}
  .brand-pill{transform-style:flat;}
  .bp-card{
    box-shadow:0 8px 16px -14px rgba(12,16,20,.2);
  }
  .bp-logo{filter:drop-shadow(0 1px 2px rgba(0,0,0,.08));}
}
/* Same lightweight mode as above, but keyed off touch capability
   (hover:none) instead of viewport width. A wide phone in landscape or
   a large-screen touch device would otherwise slip past the 560px
   breakpoint and keep the expensive perspective/preserve-3d + stacked
   box-shadow rendering — which under scroll GPU pressure is what was
   causing the brand-box borders to render torn/disconnected. */
@media (hover:none){
  .brand-grid{perspective:none;}
  .brand-pill{transform-style:flat;}
  .bp-card{
    box-shadow:0 8px 16px -14px rgba(12,16,20,.2);
    transition:none;
  }
  .bp-logo{
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.08));
    transition:none;
  }
  .bp-card::before{transition:none;}
}
@media (prefers-reduced-motion: reduce){
  .brand-pill.reveal,.bp-card,.bp-logo{transition:none;animation:none;}
  .brand-pill:hover .bp-card,.brand-pill:hover .bp-logo{transform:none;}
  .bp-card::after,.brand-pill::before{display:none;}
}


.reviews-stat-line{
  font-family:'Sora',sans-serif;font-weight:800;color:var(--ink);
  font-size:clamp(26px,3.4vw,38px);line-height:1.2;margin-top:14px;
}
.reviews-stat-line .cy{color:var(--cyan-text);}

@media (max-width:900px){
  .guarantee-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .guarantee-grid{grid-template-columns:1fr;}
}

/* ============ ZEEQ MOBILES BRAND ASSOCIATION ============ */
.zeeq-assoc{
  display:flex;align-items:center;gap:5px;
  padding-left:10px;margin-left:1px;
  border-left:1.5px solid var(--line);
  opacity:.68;transition:opacity .3s var(--ease);
}
.logo-link:hover .zeeq-assoc{opacity:1;}
.zeeq-assoc-by{
  font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--gray-500);
  white-space:nowrap;line-height:1;
}
.logo-link .zeeq-assoc-logo{
  height:17px;width:auto;display:block;filter:grayscale(.15);
  transition:transform .3s var(--ease);
}
.logo-link:hover .zeeq-assoc-logo{transform:scale(1.08);}
.zeeq-assoc-footer{justify-content:flex-start;margin:2px 0 10px;opacity:.85;border-left:none;padding-left:0;}
.zeeq-assoc-footer .zeeq-assoc-by{color:rgba(255,255,255,.55);}
.zeeq-assoc-footer .zeeq-assoc-logo{filter:grayscale(.1) brightness(1.3);}

/* ============ HERO CTA CARDS ============ */
.hero-ctas-cards{display:flex;gap:14px;flex-wrap:wrap;}
.hero-cta-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;border-radius:16px;min-width:250px;flex:1 1 250px;max-width:340px;
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.hero-cta-card::before{
  content:'';position:absolute;top:-40%;left:-60%;width:50%;height:220%;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 45%,transparent 70%);
  transform:rotate(18deg) translateX(-40%);opacity:0;pointer-events:none;
}
.hero-cta-card.cta-outline:hover::before{
  animation:ctaSheen 1.1s cubic-bezier(.4,0,.2,1);
}
@keyframes ctaSheen{
  0%{transform:rotate(18deg) translateX(-40%);opacity:0;}
  15%{opacity:1;}
  100%{transform:rotate(18deg) translateX(280%);opacity:0;}
}
.hero-cta-card .cta-icon{
  flex-shrink:0;width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease-spring);
}
.hero-cta-card:hover .cta-icon{transform:scale(1.08) rotate(-4deg);}
.hero-cta-card .cta-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.hero-cta-card .cta-copy b{font-family:'Sora',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-0.01em;}
.hero-cta-card .cta-copy span{font-size:12.5px;font-weight:500;opacity:.72;}
.hero-cta-card .cta-arrow{flex-shrink:0;font-weight:700;transition:transform .4s var(--ease-spring);}
.hero-cta-card:hover .cta-arrow{transform:translateX(5px);}
.hero-cta-card:hover{transform:translateY(-5px);}

.hero-cta-card.cta-primary{background:var(--ink);color:var(--white);outline:2px solid transparent;outline-offset:2px;}
.hero-cta-card.cta-primary .cta-icon{background:rgba(0,255,255,.14);color:var(--cyan);}
.hero-cta-card.cta-primary:hover,
.hero-cta-card.cta-primary:focus-visible{
  outline-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,255,255,.16), 0 18px 38px -12px rgba(0,255,255,.45);
}
.hero-cta-card.cta-outline{background:var(--white);color:var(--ink);border:1.5px solid var(--line);}
.hero-cta-card.cta-outline .cta-icon{background:rgba(0,255,255,.12);color:var(--cyan-text);}
.hero-cta-card.cta-outline:hover{border-color:var(--cyan);box-shadow:0 16px 32px -12px rgba(0,0,0,.14);}

@media (max-width:640px){
  .hero-cta-card{min-width:100%;max-width:100%;padding:12px 14px;gap:10px;}
  .hero-cta-card .cta-icon{width:36px;height:36px;border-radius:10px;}
  .hero-cta-card .cta-icon svg{width:18px;height:18px;}
  .hero-cta-card .cta-copy b{font-size:14px;}
  .hero-cta-card .cta-copy span{font-size:11.5px;}
  .zeeq-assoc-by{font-size:8px;}
}

/* ============================================================
   LIQUID GLASS
   A frosted, glossy "liquid glass" treatment applied site-wide:
   translucent blurred surfaces + a diagonal specular sheen that
   sweeps across on hover, like light catching curved glass.
   Kept to a background-position transition (no new pseudo-elements,
   no filter animation) so it stays cheap on scroll/mobile — the
   sheen only moves in response to :hover, and only on devices that
   actually have a hover input.
   ============================================================ */
header{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 0 rgba(12,16,20,.04), inset 0 1px 0 rgba(255,255,255,.7);
}
/* Static hairline accent instead of an infinite-looping animation —
   an always-running animation on a sticky/fixed element keeps that
   layer repainting forever (even at rest), which combined with the
   header's own backdrop-filter was a steady drain on scroll perf. */
header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan) 50%,transparent);
  opacity:.35;
}

.btn,.s-card,.g-card,.bp-card,.green-card,.about-box,.promise-card,
.hero-cta-card.cta-outline,.r-card,.enquiry-card,.green-icon,.icon-btn{
  background-image:linear-gradient(115deg,
    transparent 32%,
    rgba(255,255,255,.85) 48%,
    transparent 64%);
  background-repeat:no-repeat;
  background-size:240% 240%;
  background-position:-140% -140%;
  transition:background-position 1s var(--ease-soft), transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* .r-card is excluded here on purpose: it already sets its own
   position:absolute (needed for the review-card crossfade stacking)
   in the REVIEWS rules above. This rule used to include .r-card and
   force position:relative on it too — same specificity, later in the
   file, so it silently won the cascade and put every review card
   (including the 4 invisible ones) into normal document flow. That
   stacked all 5 cards' heights on top of each other and shifted the
   one visible card further down the page every time the active index
   changed — the "position jumps on auto-rotate" bug. */
.btn,.s-card,.g-card,.bp-card,.green-card,.about-box,.promise-card,
.hero-cta-card.cta-outline,.enquiry-card,.green-icon,.icon-btn{
  position:relative;
}
.btn-primary,.g-card,.s-card{
  background-image:linear-gradient(115deg,
    transparent 32%,
    rgba(255,255,255,.28) 48%,
    transparent 64%);
}
@media (hover:hover){
  .btn:hover,.s-card:hover,.g-card:hover,.brand-pill:hover .bp-card,
  .green-card:hover,.about-box:hover,.promise-card:hover,
  .hero-cta-card.cta-outline:hover,.r-card:hover,.enquiry-card:hover,.icon-btn:hover{
    background-position:140% 140%;
  }
}
/* Book a Repair (primary hero CTA): no sheen/shine — a plain, calm
   surface with just a themed blue outline + glow on hover/focus
   (see rule near .hero-cta-card.cta-primary below). */
.hero-cta-card.cta-primary{position:relative;transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), outline-color .2s var(--ease);}
/* Translucent surface for outline-style / white cards — background
   tint only, no backdrop-filter. These all sit on a flat white page
   with nothing colorful behind them to blur, so backdrop-filter here
   was pure GPU cost (recomposited on every scroll frame, across
   dozens of elements — the brand-logo grid alone is ~20 of them)
   with zero visible benefit. This was the main cause of the reported
   scroll lag; removing it is the fix. */
.btn-outline,.hero-cta-card.cta-outline,.bp-card,.about-box,.green-card,.enquiry-card{
  background-color:rgba(255,255,255,.85);
}
@media (hover:none){
  .btn,.s-card,.g-card,.bp-card,.green-card,.about-box,.promise-card,
  .hero-cta-card.cta-outline,.r-card,.enquiry-card,.green-icon,.icon-btn{
    transition:none;background-position:-140% -140%;
  }
  header::after{animation:none;opacity:.25;}
}
/* Per-brand background tint — each brand pill already carries a
   --tint / --tint-glow custom property matching its real brand color
   (set inline per logo in the HTML), so give every card a faint wash
   of its own brand's hue instead of plain white, layered under the
   glass sheen from the rule above. */
.bp-card{
  background-image:
    linear-gradient(135deg, var(--tint-glow, transparent) 0%, transparent 68%),
    linear-gradient(115deg, transparent 32%, rgba(255,255,255,.85) 48%, transparent 64%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 240% 240%;
  background-position:0 0, -140% -140%;
}
@media (hover:hover){
  .brand-pill:hover .bp-card{
    background-image:
      linear-gradient(135deg, var(--tint-glow, transparent) 0%, transparent 60%),
      linear-gradient(115deg, transparent 32%, rgba(255,255,255,.85) 48%, transparent 64%);
    background-position:0 0, 140% 140%;
  }
}
@media (prefers-reduced-motion: reduce){
  header::after{animation:none;}
  .btn,.s-card,.g-card,.bp-card,.green-card,.about-box,.promise-card,
  .hero-cta-card,.r-card,.enquiry-card,.green-icon,.icon-btn{transition:none;}
}

/* ============================================================
   FIX PACK
   1. "What We Fix" cards — lightweight glass sweep
   2. Brand logo plaques — connected selection outline + smoother
      scrolling on phones
   ============================================================ */

/* --- 1. Liquid-glass sweep on the service cards ------------
   Two GPU-composited layers (transform + opacity only — no
   filters, no backdrop-filter, no repaint), so it stays cheap
   on mobile while reading like a liquid glass refraction. */
.s-card{isolation:isolate;}
.s-card::after{
  content:"";position:absolute;top:0;left:0;width:62%;height:100%;
  border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 22%,
    rgba(255,255,255,.55) 42%,
    rgba(210,250,255,.28) 52%,
    rgba(255,255,255,.62) 62%,
    rgba(255,255,255,.10) 80%,
    rgba(255,255,255,0) 100%);
  transform:translate3d(-180%,0,0) skewX(-14deg);
  animation:sCardGlass 5.4s cubic-bezier(.35,0,.2,1) infinite;
  animation-delay:calc(var(--i,0) * 240ms);
}
/* Second, slower and softer "liquid" body that trails the main
   sweep — one extra composited layer, no extra paint work. */
.s-card .s-glass{
  content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(60% 90% at 20% 30%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 70% 70%, rgba(0,220,235,.16) 0%, rgba(255,255,255,0) 65%);
  opacity:0;
  transform:translate3d(-42%,0,0);
  animation:sCardLiquid 7.6s cubic-bezier(.4,0,.25,1) infinite;
  animation-delay:calc(var(--i,0) * 240ms + 380ms);
  will-change:transform,opacity;
}
.s-card > *{position:relative;z-index:2;}
.s-card > .s-glass{z-index:1;}
@keyframes sCardGlass{
  0%{transform:translate3d(-180%,0,0) skewX(-14deg);}
  42%,100%{transform:translate3d(320%,0,0) skewX(-14deg);}
}
@keyframes sCardLiquid{
  0%{transform:translate3d(-42%,0,0);opacity:0;}
  18%{opacity:.55;}
  46%{transform:translate3d(42%,0,0);opacity:0;}
  100%{transform:translate3d(42%,0,0);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .s-card::after,.s-card .s-glass{animation:none;opacity:0;}
}


/* --- 2a. Connected outline on brand plaques ----------------
   `contain:paint` on .brand-pill clipped everything painted
   outside the pill box — including the 1px ring shadow on the
   card — so the highlight looked broken/disconnected on the
   sides. Dropping paint containment (layout/style containment
   is kept for perf) lets the ring draw as one continuous
   rounded outline. */
.brand-pill{contain:layout style;}
/* A single, continuous ring — one border + one spread shadow,
   no stacked offset shadows that read as double/torn lines. */
.brand-pill.is-picked .bp-card,
.brand-pill:active .bp-card{
  border-color:var(--tint, #00b8bf);
  box-shadow:
    0 0 0 2px var(--tint, #00b8bf),
    0 12px 24px -18px rgba(12,16,20,.35);
}
.brand-pill.is-picked .bp-logo{transform:scale(1.04);}

/* --- 2b. Touch devices: flat, cheap plaques ----------------
   Phones never get the hover tilt, so the sheen gradients,
   multi-layer shadows and hover ring were pure scroll cost in
   the brand grid (20 elements repainting every frame). */
@media (hover:none){
  .bp-card{
    background-image:none;
    background-color:#fff;
    box-shadow:0 6px 14px -12px rgba(12,16,20,.22);
  }
  .brand-pill:hover .bp-card{
    border-color:var(--line);
    box-shadow:0 6px 14px -12px rgba(12,16,20,.22);
  }
  .brand-pill:hover .bp-logo{transform:none;}
  .brand-pill.is-picked .bp-card,
  .brand-pill:active .bp-card{
    border-color:var(--tint, #00b8bf);
    box-shadow:0 0 0 2px var(--tint, #00b8bf);
  }
  /* shorter reveal stagger so the grid settles instead of
     animating for ~1s while the user is still scrolling */
  .brand-pill.reveal{transition-delay:calc(var(--i,0) * 6ms);}
  .s-card::after{animation-duration:6.4s;}
  .s-card .s-glass{animation-duration:9s;}
}
/* Skip painting the brand grid entirely while it is off-screen. */
.brand-strip{content-visibility:auto;contain-intrinsic-size:auto 720px;}

/* Detected-location confirmation inside the quote modal.
   The address is never written into the pincode field — it is
   shown here and carried into the WhatsApp message. */
.quote-located{
  display:block;margin:0 0 8px;padding:8px 10px;
  border-radius:10px;background:rgba(0,184,191,.10);
  border:1px solid rgba(0,184,191,.28);
  font-size:13px;line-height:1.5;color:#0b3c40;
}
.quote-located strong{font-weight:700;}
.quote-located span{opacity:.75;font-size:12px;}

/* ============================================================
   PREMIUM BRAND LOGO TREATMENT
   1. Brand-matched ambient glow behind each plaque
   2. Refined, GPU-only glass sheen + highlight
   Cost model: every animated layer moves with `transform` and
   `opacity` only (compositor thread). No blur(), no
   backdrop-filter, no box-shadow animation, no layout/paint per
   frame — so scrolling and load stay untouched, and the logo
   bitmaps themselves are never filtered, so they stay sharp.
   ============================================================ */

/* --- 1. Ambient brand glow (sits BEHIND the card) ---------- */
.brand-pill{contain:layout style;isolation:isolate;}
.brand-pill::after{
  content:"";position:absolute;z-index:0;
  inset:-14% -10%;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(58% 62% at 50% 58%,
      color-mix(in srgb, var(--tint, #0092a3) 34%, transparent) 0%,
      color-mix(in srgb, var(--tint, #0092a3) 12%, transparent) 42%,
      transparent 74%);
  opacity:.55;
  transform:translateZ(0) scale(.96);
  transition:opacity .45s var(--ease), transform .45s var(--ease-soft);
}
.brand-pill:hover::after,
.brand-pill.is-picked::after{opacity:1;transform:translateZ(0) scale(1.04);}
.bp-card{z-index:1;}

/* --- 2. Glass sheen sweeping across the plaque ------------- */
.bp-card{overflow:hidden;}
.bp-card::after{
  content:"";position:absolute;top:-25%;left:0;
  width:46%;height:150%;
  pointer-events:none;z-index:2;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 38%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.28) 62%,
    rgba(255,255,255,0) 100%);
  transform:translate3d(-220%,0,0) skewX(-16deg);
  animation:bpSheen 7s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:calc(var(--i,0) * 260ms);
}
@keyframes bpSheen{
  0%{transform:translate3d(-220%,0,0) skewX(-16deg);}
  34%,100%{transform:translate3d(360%,0,0) skewX(-16deg);}
}
/* Soft glass depth: fixed highlight top-left, faint tint pooling
   bottom-right. Static layer — painted once, composited after. */
.bp-card::before{
  background:
    linear-gradient(160deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.035) 0%, rgba(0,0,0,0) 62%);
  opacity:.85;
}
.brand-pill:hover .bp-card::before{opacity:1;}

/* Keep the logo above every glass layer and unfiltered = sharp. */
.bp-logo{z-index:3;}

/* Touch devices: keep the glow (pure paint, free on scroll) and a
   slower sheen so nothing competes with scroll compositing. */
@media (hover:none){
  .brand-pill::after{opacity:.6;transition:none;}
  .bp-card::after{animation-duration:9s;}
}
@media (max-width:560px){
  .brand-pill::after{inset:-10% -8%;}
  .bp-card::after{width:52%;}
}
@media (prefers-reduced-motion: reduce){
  .bp-card::after{animation:none;opacity:0;display:none;}
  .brand-pill::after{display:block;transition:none;}
}

/* ===== Hero Slideshow (posters) ===== */
.hero-slideshow{
  position:relative;
  isolation:isolate;
  transform:translateZ(0);
}
.hero-slides{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.04);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .7s;
  will-change:opacity,transform;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  transition-delay:0s;
  z-index:2;
}
.hero-slide-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.hero-slide-controls{
  position:absolute; z-index:5;
  left:0; right:0; bottom:16px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 14px;
  pointer-events:none;
}
.hero-slide-btn{
  pointer-events:auto;
  width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer;
  background:rgba(255,255,255,.92);
  color:var(--ink,#0a0a12);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s, box-shadow .25s;
  backdrop-filter:blur(8px);
}
.hero-slide-btn:hover{ transform:scale(1.08); box-shadow:0 6px 20px rgba(0,200,220,.25); }
.hero-slide-btn:active{ transform:scale(.96); }
.hero-slide-dots{
  pointer-events:auto;
  display:flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.hero-slide-dots button{
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:rgba(0,0,0,.22); cursor:pointer;
  transition: width .35s cubic-bezier(.22,1,.36,1), background .25s, transform .25s;
}
.hero-slide-dots button.is-active{
  width:22px; border-radius:6px;
  background:var(--cyan,#00e5ff);
  box-shadow:0 0 12px rgba(0,229,255,.5);
}
.hero-slide-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(0,0,0,.06); z-index:4; overflow:hidden;
}
.hero-slide-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--cyan,#00e5ff),#00b8d4);
  transition: none;
}
.hero-slide-progress span.is-running{
  transition: width linear var(--slide-ms,5000ms);
  width:100%;
}
/* ===== Contact Us section ===== */
.contact-section{ position:relative; overflow:hidden; }
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
  margin-top:36px;
}
.contact-card{
  position:relative;
  background:var(--white,#fff);
  border:1px solid var(--line,#e5e5ea);
  border-radius:20px;
  padding:28px 24px;
  text-decoration:none;
  color:inherit;
  display:flex; flex-direction:column; gap:14px;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s cubic-bezier(.22,1,.36,1),
    border-color .3s;
  overflow:hidden;
  will-change:transform;
}
.contact-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(0,229,255,.12), transparent 40%);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.contact-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 40px rgba(0,180,220,.15), 0 0 0 1px rgba(0,229,255,.2);
  border-color:rgba(0,229,255,.35);
}
.contact-card:hover::before{ opacity:1; }
.contact-card .c-icon{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(0,229,255,.15),rgba(0,180,220,.08));
  color:var(--cyan-text,#00b8d4);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.contact-card:hover .c-icon{ transform:scale(1.1) rotate(-6deg); }
.contact-card h3{
  font-family:'Sora',sans-serif; font-size:17px; font-weight:700; margin:0;
}
.contact-card p{ margin:0; font-size:14px; color:var(--gray-500); line-height:1.5; }
.contact-card .c-action{
  margin-top:auto; font-size:13px; font-weight:700; color:var(--cyan-text,#00b8d4);
  display:flex; align-items:center; gap:6px;
}
.contact-card .c-action span{ transition:transform .3s; }
.contact-card:hover .c-action span{ transform:translateX(4px); }
.contact-brand{
  text-align:center; margin-bottom:12px;
}
.contact-brand img{
  height:48px; width:auto; margin:0 auto 8px;
  filter:drop-shadow(0 4px 12px rgba(0,200,220,.2));
}
.contact-wa-note{
  font-size:12.5px; color:var(--gray-500); text-align:center; margin-top:8px;
}

/* High-refresh / smooth motion preferences */
@media (prefers-reduced-motion: no-preference){
  .reveal, .reveal-r, .reveal-l, .reveal-scale,
  .hero-slide, .contact-card, .hero-cta-card, .s-card {
    transition-timing-function: cubic-bezier(.22,1,.36,1);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
  .hero-slide-progress span{ transition:none !important; }
}

/* ===== Onam closed announcement (auto-hides after expire date) ===== */
.site-announce{
  position:sticky; top:0; z-index:10050;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 44px 10px 16px;
  background:linear-gradient(90deg,#061018 0%,#0a1a22 50%,#061018 100%);
  color:#e8fbff;
  font-size:13.5px; font-weight:600; line-height:1.35;
  text-align:center;
  border-bottom:1px solid rgba(0,229,255,.18);
  box-shadow:0 4px 24px rgba(0,0,0,.18);
}
.site-announce[hidden]{ display:none !important; }
.site-announce-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:#00e5ff;
  box-shadow:0 0 0 0 rgba(0,229,255,.55);
  animation:announcePulse 1.6s ease-out infinite;
}
@keyframes announcePulse{
  0%{ box-shadow:0 0 0 0 rgba(0,229,255,.55); }
  70%{ box-shadow:0 0 0 10px rgba(0,229,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,229,255,0); }
}
.site-announce-text strong{ color:#00e5ff; font-weight:800; }
.site-announce-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.site-announce-close:hover{ background:rgba(255,255,255,.16); }
body.has-announce #site-header{ top:0; }
@media (max-width:520px){
  .site-announce{ font-size:12.5px; padding:10px 40px 10px 12px; }
}

/* ===== Footer logo fix ===== */
.footer-brand .footer-logo-img,
.footer-brand img.js-logo{
  height:42px !important;
  width:auto !important;
  max-width:min(200px,70vw);
  object-fit:contain;
  display:block;
  margin-bottom:10px;
}
.footer-brand .zeeq-assoc-footer{
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:12px;
}
.footer-brand .zeeq-assoc-logo{
  height:28px !important; width:auto !important;
  object-fit:contain;
}
#site-footer .footer-brand p{
  margin-top:4px;
}

.hero-slide-img--contain,
.hero-slide[data-id="holidays"] .hero-slide-img{
  object-fit:contain;
  object-position:center;
  background:#f9f1e8;
}
@media (max-width:768px){
  .hero-slide-btn{ width:36px; height:36px; }
}

/* ===== Contact Us full page (shareable #contact) ===== */
.contact-overlay{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg,#f7f8fc);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s;
}
.contact-overlay.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition-delay:0s;
}
.contact-page{
  height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation: contactPageIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes contactPageIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
.contact-page-close{
  position:fixed; top:16px; right:16px; z-index:2;
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(12,16,20,.08); color:var(--ink,#0c1014);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .25s, background .2s;
  backdrop-filter:blur(8px);
}
.contact-page-close:hover{ transform:scale(1.06); background:rgba(12,16,20,.12); }
.contact-page-inner{
  max-width:920px; margin:0 auto;
  padding:72px 20px 48px;
}
.contact-page-head{ text-align:center; margin-bottom:28px; }
.contact-page-logo{
  height:52px; width:auto; margin:0 auto 18px;
  filter:drop-shadow(0 6px 16px rgba(0,200,220,.18));
}
.contact-page-head h1{
  font-family:'Sora',sans-serif;
  font-size:clamp(28px,5vw,40px);
  font-weight:800; margin:8px 0 10px;
}
.contact-page-head p{
  color:var(--gray-500); font-size:15.5px; max-width:420px; margin:0 auto;
}
body.contact-page-open{
  overflow:hidden;
}
body.contact-page-open > header,
body.contact-page-open > main,
body.contact-page-open > footer,
body.contact-page-open .floating-cta,
body.contact-page-open .scroll-top,
body.contact-page-open .site-announce{
  visibility:hidden !important;
  pointer-events:none !important;
}
.contact-overlay .contact-grid{ margin-top:8px; }

/* ===== Hero banner layout (poster full-width ABOVE heading) ===== */
.hero.hero--banner{
  padding:0 0 48px;
  overflow:visible;
}
.hero-banner-wrap{
  width:100%;
  max-width:1120px;
  margin:0 auto 28px;
  position:relative;
  padding:0 16px;
  box-sizing:border-box;
}
/* Poster turned off from admin (Posters tab) — collapse the reserved
   margin on every breakpoint, not just mobile, so no blank strip is
   left behind where the banner used to be. */
.hero-banner-wrap.tpr-hero-off{ margin-bottom:0; }
.hero.hero--banner .hero-slideshow{
  /* Full-bleed: break out of the centered/padded wrapper so the
     poster runs edge-to-edge across the viewport, not as a card
     with margin on both sides. */
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  /* Match desktop poster 1536×1024 = 3:2 exactly — full poster, no crop */
  aspect-ratio: 3 / 2;
  max-width:none;
  border-radius:0;
  box-shadow:none;
  border:none;
  background:#f9f1e8;
  overflow:hidden;
}
.hero.hero--banner .hero-slide-img{
  width:100%;
  height:100%;
  object-fit:contain; /* show FULL poster, no cropping */
  object-position:center;
  background:#f9f1e8;
}
.hero.hero--banner .hero-slide[data-id="onam"] .hero-slide-img{
  object-fit:contain;
  object-position:center;
}
.hero.hero--banner .hero-slide[data-id="holidays"] .hero-slide-img{
  object-fit:contain;
  background:#f9f1e8;
}
.hero-banner-ctas{
  position:absolute;
  left:28px; bottom:28px;
  z-index:6;
  display:flex; flex-wrap:wrap; gap:10px;
  pointer-events:none;
}
.hero-banner-ctas > *{ pointer-events:auto; }
.hero-banner-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 18px;
  border-radius:999px;
  font-family:'Sora',sans-serif;
  font-size:13.5px; font-weight:700;
  border:none; cursor:pointer;
  text-decoration:none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.hero-banner-btn.primary{
  background:#0c1014; color:#fff;
}
.hero-banner-btn.secondary{
  background:rgba(255,255,255,.94); color:#0c1014;
  backdrop-filter:blur(8px);
}
.hero-banner-btn:hover{ transform:translateY(-2px) scale(1.02); }
.hero.hero--banner .hero-copy{
  max-width:720px;
  margin:0 auto;
  text-align:left;
  padding-top:8px;
}
.hero.hero--banner .hero-copy h1{ font-size:clamp(32px,4.5vw,52px); }
.hero.hero--banner .hero-copy p{ max-width:640px; }
.hero.hero--banner .hero-slide-controls{
  bottom:16px; right:28px; left:auto;
  justify-content:flex-end;
}
@media (max-width:768px){
  .hero.hero--banner{ padding-bottom:28px; }
  .hero-banner-wrap{ padding:0; max-width:100%; margin-bottom:18px; }
  /* The poster art itself is a tall 862×1825 portrait file, but showing
     it at its native ratio blew the banner up to ~2.1x the screen width
     in height — nearly two full phone screens of scrolling before any
     copy appeared. Cap it to a normal, compact mobile banner instead
     (close to what other apps/sites use for a hero poster) and crop
     with object-fit:cover, anchored to the top so the headline/graphic
     at the top of the art stays in frame; the CTA buttons already sit
     in their own overlay so nothing functional is lost by cropping the
     bottom margin of the artwork. */
  .hero.hero--banner .hero-slideshow{
    width:100vw;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    aspect-ratio: 4 / 3;
    max-height: 62vw;
    height:auto;
    max-width:none;
    border-radius:0;
    box-shadow:none;
  }
  .hero.hero--banner .hero-slide-img{
    object-fit:cover;
    object-position:top center;
  }
  .hero.hero--banner .hero-slide[data-id="onam"] .hero-slide-img{
    object-fit:cover;
    object-position:top center;
  }
  .hero.hero--banner .hero-slide[data-id="holidays"] .hero-slide-img{
    object-fit:cover;
    object-position:top center;
  }
  .hero-banner-ctas{
    left:12px; right:12px; bottom:14px;
    justify-content:flex-start;
  }
  .hero-banner-btn{ padding:11px 16px; font-size:13px; }
  .hero.hero--banner .hero-copy{ padding:0 16px; }
  /* Bottom "Book a Repair" row — previously display:none on mobile, so
     the poster's overlay button (top) was the ONLY way to book on
     phones. Re-enabled as a full-width stacked pair beneath the hero
     copy, matching how the desktop card layout already behaves. */
  .hero.hero--banner .hero-ctas-cards{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .hero.hero--banner .hero-ctas-cards .hero-cta-card{
    width:100%;
    justify-content:center;
    min-width:0;
    /* Reset the desktop row's flex-basis: 250px. In the row layout that
       set a min-width, but now the container is flex-direction:column
       for the mobile stack, so the SAME flex-basis controls height on
       the main axis instead — blowing each card up to 250px tall. */
    flex:0 0 auto;
  }
  /* Move the slide arrows/dots to the top-right corner on mobile —
     at the bottom they were overlapping the Book a Repair / Visit
     the shop buttons since both sit in that corner on a narrow card. */
  .hero.hero--banner .hero-slide-controls{
    top:12px; bottom:auto; right:12px; left:auto;
  }
  /* When the poster is switched off from the admin (Posters tab), the
     whole slideshow box and its bottom margin collapse to zero instead
     of leaving a blank strip where the poster used to be. */
  .hero-banner-wrap.tpr-hero-off{ margin-bottom:0; }
  .hero-banner-wrap.tpr-hero-off .hero-slideshow{ display:none; }
}