/* ============================================================
   CLEANDO — "We make dirty history"
   palette: porcelain cream / deep pine / fresh teal / citrus lime
   type: Fraunces (display) + Archivo (workhorse)
   motif: squeegee wipe + four-point sparkle
============================================================ */
:root{
  --cream:#F5F1E8;
  --cream-2:#ECE5D4;
  --paper:#FBF8F1;
  --pine:#0E2E27;
  --pine-2:#09211B;
  --ink:#15251F;
  --teal:#2FBFA9;
  --teal-deep:#1E7A6C;
  --teal-soft:#8AD9CB;
  --lime:#CDEB63;
  --red:#C4453A;
  --line:rgba(21,37,31,.14);
  --line-cream:rgba(245,241,232,.16);
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --container:1200px;
  --gutter:clamp(16px,4.5vw,48px);
  --sec-pad:clamp(56px,9vh,140px);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;scroll-padding-top:76px}
html,body{overflow-x:clip;max-width:100vw}
body{
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}
body.is-loading{overflow:hidden}
::selection{background:var(--teal);color:var(--pine-2)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
ul{list-style:none}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--pine);border-radius:8px;border:2px solid var(--cream-2)}

.container{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto}
section{position:relative}

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.055;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="180" height="180" filter="url(%23n)" opacity="0.6"/></svg>');
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-12%)}
  50%{transform:translate(8%,4%)}70%{transform:translate(-9%,6%)}90%{transform:translate(4%,9%)}
}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
.cursor-dot{width:8px;height:8px;background:var(--teal)}
.cursor-ring{
  width:38px;height:38px;border:1.5px solid rgba(47,191,169,.75);
  display:flex;align-items:center;justify-content:center;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),background-color .35s,border-color .35s;
}
.cursor-ring span{
  font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--lime);
  opacity:0;transition:opacity .25s;
}
.cursor-ring.is-hover{width:56px;height:56px;background:rgba(47,191,169,.12);border-color:rgba(47,191,169,.35)}
.cursor-ring.is-label{width:76px;height:76px;background:rgba(14,46,39,.92);border-color:transparent}
.cursor-ring.is-label span{opacity:1}
@media(pointer:coarse), (hover:none){.cursor-dot,.cursor-ring{display:none !important}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1001;background:var(--teal);transform:scaleX(0);transform-origin:left}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:var(--pine-2);color:var(--cream);overflow:hidden}
.no-js .preloader{display:none}
.preloader__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px;text-align:center}
.preloader__star{width:44px;height:44px;flex-shrink:0}
.preloader__star path{fill:none;stroke:var(--teal);stroke-width:1.6}
.preloader__word{font:500 clamp(1.8rem,5vw,2.6rem)/1 var(--f-display);letter-spacing:-.01em}
.preloader__word em{font-style:italic;color:var(--teal)}
.preloader__cap{font:600 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.45)}
.preloader__count{position:absolute;right:max(5vw, var(--sar));bottom:max(3vh, var(--sab));font:300 clamp(3.5rem,12vw,9rem)/1 var(--f-display);color:rgba(245,241,232,.92);font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent;
  color:var(--cream);
  padding-top:var(--sat);
  padding-left:var(--sal);
  padding-right:var(--sar);
  transition:background-color .4s var(--ease-out),backdrop-filter .4s var(--ease-out),box-shadow .4s var(--ease-out),color .4s var(--ease-out);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(14px,2.2vh,22px) 0;
  transition:padding .4s var(--ease-out);
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font:600 clamp(1.2rem,4vw,1.35rem)/1 var(--f-display);letter-spacing:-.01em;
  color:var(--cream);transition:color .4s;
  -webkit-tap-highlight-color:transparent;
}
.brand em{font-style:italic;color:var(--teal-soft);transition:color .4s}
.brand svg{width:22px;height:22px;flex:none}
.brand svg path{fill:var(--teal-soft);transition:fill .4s}
.nav__links{display:flex;gap:clamp(16px,2.5vw,38px)}
.nav__links a{
  position:relative;font:600 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 0;display:inline-flex;align-items:baseline;gap:5px;
  color:var(--cream);transition:color .4s;
}
.nav__links a sup{font:600 9px/1 var(--f-body);color:var(--teal-soft);transition:color .4s}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--teal-soft);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out),background-color .4s;
}
.nav .nav__cta{
  background:rgba(245,241,232,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(245,241,232,.3);
  color:var(--cream);
  transition:all .4s var(--ease-out);
}
.nav .nav__cta::before{background:var(--teal-deep)}

/* burger button - touch optimized */
.nav__burger{
  display:none;width:48px;height:48px;position:relative;z-index:1202;
  border-radius:50%;background:rgba(9,33,27,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(245,241,232,.18);
  transition:background-color .3s,border-color .3s;
}
.nav__burger span{
  position:absolute;left:13px;right:13px;height:2px;
  background:var(--cream);border-radius:2px;
  transition:transform .35s var(--ease-out),top .35s,background .35s;
}
.nav__burger span:nth-child(1){top:19px}
.nav__burger span:nth-child(2){top:27px}

/* Scrolled nav state when past hero */
.nav.is-scrolled{
  background:rgba(245,241,232,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line);
  color:var(--ink);
}
.nav.is-scrolled .nav__inner{padding:12px 0}
.nav.is-scrolled .brand{color:var(--ink)}
.nav.is-scrolled .brand em{color:var(--teal-deep)}
.nav.is-scrolled .brand svg path{fill:var(--teal-deep)}
.nav.is-scrolled .nav__links a{color:var(--ink)}
.nav.is-scrolled .nav__links a sup{color:var(--teal-deep)}
.nav.is-scrolled .nav__links a::after{background:var(--teal-deep)}
.nav.is-scrolled .nav__cta{
  background:var(--pine);
  border-color:transparent;
  color:var(--cream);
}
.nav.is-scrolled .nav__burger{
  background:rgba(21,37,31,.08);
  border-color:var(--line);
}
.nav.is-scrolled .nav__burger span{background:var(--ink)}

.nav.is-open .nav__burger{
  background:transparent;
  border-color:transparent;
}
.nav.is-open .nav__burger span{background:var(--cream)}
.nav.is-open .nav__burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){top:23px;transform:rotate(-45deg)}
@media(max-width:900px){.nav__links,.nav__cta{display:none}.nav__burger{display:block}}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:1100;background:var(--pine-2);color:var(--cream);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding-top:max(84px, calc(var(--sat) + 68px));
  padding-bottom:max(28px, calc(var(--sab) + 20px));
  padding-left:max(var(--gutter), var(--sal));
  padding-right:max(var(--gutter), var(--sar));
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.menu__links{display:flex;flex-direction:column;margin:auto 0}
.menu__link{
  display:flex;align-items:baseline;gap:14px;
  font:500 clamp(1.75rem,7.5vw,3.6rem)/1.2 var(--f-display);
  padding:clamp(10px,2vh,18px) 0;border-bottom:1px solid var(--line-cream);
  -webkit-tap-highlight-color:transparent;
}
.menu__link:active{color:var(--lime)}
.menu__link sup{font:600 11px/1 var(--f-body);color:var(--teal)}
.menu__link em{font-style:italic;color:var(--teal)}
.menu__bottom{display:grid;gap:20px;padding-top:24px}
.menu__cta{width:100%;justify-content:center;padding:16px 24px;font-size:15px}
.menu__meta{
  display:flex;flex-wrap:wrap;gap:10px 24px;
  font:500 13.5px/1.5 var(--f-body);color:rgba(245,241,232,.65);
}
.menu__meta a{color:var(--lime);border-bottom:1px solid rgba(205,235,99,.4);padding-bottom:1px}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;
  font:600 15px/1 var(--f-body);letter-spacing:.02em;border-radius:999px;
  padding:17px 28px;transition:color .35s,transform .35s;isolation:isolate;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.btn svg{width:15px;height:15px;transition:transform .4s var(--ease-out);flex-shrink:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out)}
.btn-primary{background:var(--pine);color:var(--cream)}
.btn-primary::before{background:var(--teal-deep)}
.btn-ghost{color:var(--ink);border:1.5px solid rgba(21,37,31,.3);padding:15px 26px}
.btn-ghost::before{background:var(--pine)}
.btn-sm{padding:12px 20px;font-size:13px}
.btn .btn__shine{position:absolute;top:0;bottom:0;left:-80%;width:50%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .7s var(--ease-out)}

/* ---------- shared heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--teal-deep);
}
.eyebrow svg{width:13px;height:13px;flex:none}
.sec-head{display:grid;gap:20px;max-width:820px;margin-bottom:clamp(36px,6vh,80px)}
.sec-head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.sec-head--row .sec-head__col{display:grid;gap:16px}
.sec-title{font:500 clamp(2.2rem,5vw,4.3rem)/1.06 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.sec-title em{font-style:italic;color:var(--teal-deep);font-weight:400}
.lead{font-size:clamp(0.98rem,1.3vw,1.15rem);color:rgba(21,37,31,.72);max-width:56ch;line-height:1.6}
.line{display:block;overflow:hidden}
.line-inner{display:block;will-change:transform}
.on-dark .sec-title{color:var(--cream)}
.on-dark .sec-title em{color:var(--teal-soft)}
.on-dark .lead{color:rgba(245,241,232,.72)}
.on-dark .eyebrow{color:var(--teal-soft)}

/* ============================================================
   HERO — pinned scroll-scrubbed timelapse
============================================================ */
.hero{position:relative;height:100svh;min-height:min(100svh, 540px);overflow:clip;background:#000}
.hero__bg{position:absolute;inset:0}
.hero__bg canvas{width:100%;height:100%;display:block}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,33,27,.35) 0%,rgba(9,33,27,0) 130px);
  pointer-events:none;
}

.hero__panel-wrap{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(74px,11vh,120px) var(--gutter);
  pointer-events:none;
}
.hero__panel{
  pointer-events:auto;max-width:840px;width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,2.2vh,24px);
  position:relative;
}
.hero__panel .hero__title{
  font:500 clamp(2.35rem,8.2vw,6.4rem)/.98 var(--f-display);
  letter-spacing:-.025em;
  color:var(--cream);
  text-shadow:0 3px 24px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.9);
}
.hero__panel .hero__title .accent{
  font-style:italic;font-weight:400;color:var(--teal-soft);
}
.hero__panel .hero__sub{
  color:rgba(245,241,232,.95);
  max-width:48ch;
  font-size:clamp(0.95rem,3.4vw,1.25rem);
  line-height:1.55;
  text-shadow:0 2px 16px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9);
  padding-inline:4px;
}

.strike{position:relative;display:inline-block}
.strike svg{position:absolute;left:-4%;top:38%;width:108%;height:44%;overflow:visible;pointer-events:none}
.strike svg path{fill:none;stroke:var(--cream);stroke-width:4.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.strike .strike-pop{position:absolute;right:-6%;top:8%;width:clamp(16px,2.5vw,28px);height:clamp(16px,2.5vw,28px);transform:scale(0);transform-origin:center}
.strike .strike-pop path{fill:var(--teal-soft)}

.hero__cue{
  margin-top:4px;
  display:flex;align-items:center;gap:12px;
  font:600 11px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,232,.85);
  transition:opacity .35s var(--ease-out);
}
.hero__cue.is-hidden{opacity:0;pointer-events:none}
.hero__cue-line{position:relative;width:70px;height:1.5px;background:rgba(245,241,232,.3);overflow:hidden}
.hero__cue-line::after{content:"";position:absolute;inset:0;background:var(--lime);transform:translateX(-100%);animation:cueLine 2.4s var(--ease-out) infinite}
@keyframes cueLine{40%{transform:translateX(0)}100%{transform:translateX(101%)}}

.hero__end{
  margin-top:6px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  position:relative;
  visibility:hidden;opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.hero__end.is-active{
  visibility:visible;opacity:1;pointer-events:auto;
  transform:translateY(0);
}
.hero__burst{
  position:absolute;width:200px;height:200px;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;
}
.hero__spotless{
  position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--pine-2);
  border-radius:999px;padding:14px 26px;font:700 14px/1 var(--f-body);letter-spacing:.05em;white-space:nowrap;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.hero__spotless svg{width:16px;height:16px;flex-shrink:0}
.hero__spotless svg path{fill:var(--pine-2)}

/* ghost button on dark video */
.btn-ghost-light{color:var(--cream);border:1.5px solid rgba(245,241,232,.45);padding:15px 26px}
.btn-ghost-light::before{background:var(--cream)}

@media(max-width:900px){
  .hero__panel{gap:16px}
  .hero__panel .hero__title{font-size:clamp(2.3rem,8vw,3.6rem)}
  .hero__burst{width:160px;height:160px}
}
@media(max-width:540px){
  .hero__panel-wrap{padding:clamp(68px,11vh,88px) var(--gutter)}
  .hero__end{flex-direction:column;width:100%;max-width:320px}
  .hero__spotless{width:100%;justify-content:center;padding:12px 20px;font-size:13.5px}
  .hero__end .btn{width:100%;justify-content:center;padding:15px 22px;font-size:14px}
  .hero__burst{width:140px;height:140px}
  .strike svg path{stroke-width:3.5}
}

/* ============================================================
   MARQUEE
============================================================ */
.marquee-band{
  background:var(--pine);color:var(--cream);padding:clamp(16px,2.4vw,26px) 0;
  transform:rotate(-1.3deg) scale(1.03);border-top:1px solid rgba(205,235,99,.28);
  border-bottom:1px solid rgba(205,235,99,.28);overflow:clip;
}
.marquee__skew{will-change:transform}
.marquee__track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__group span{font:700 clamp(1.2rem,2.5vw,2.1rem)/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:0 clamp(14px,2vw,30px)}
.marquee__group svg{width:clamp(15px,1.8vw,24px);height:clamp(15px,1.8vw,24px);flex:none}
.marquee__group svg:nth-of-type(odd) path{fill:var(--lime)}
.marquee__group svg:nth-of-type(even) path{fill:var(--teal)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   SERVICES
============================================================ */
.services{padding:var(--sec-pad) 0;background:var(--cream)}
.srv-list{border-top:1.5px solid var(--ink)}
.srv{
  position:relative;display:grid;grid-template-columns:clamp(44px,6vw,96px) 1fr auto clamp(52px,5.5vw,76px);
  align-items:center;gap:clamp(12px,2vw,34px);padding:clamp(20px,3vh,36px) clamp(4px,1vw,16px);
  border-bottom:1.5px solid var(--ink);cursor:pointer;isolation:isolate;
  -webkit-tap-highlight-color:transparent;transition:background-color .25s ease;
}
.srv::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pine);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.srv__idx{font:400 clamp(1.15rem,1.8vw,1.7rem)/1 var(--f-display);color:var(--teal-deep);transition:color .4s}
.srv__main h3{font:500 clamp(1.4rem,3vw,2.7rem)/1.1 var(--f-display);letter-spacing:-.015em;transition:color .4s,transform .5s var(--ease-out)}
.srv__main p{font-size:14.5px;color:rgba(21,37,31,.62);max-width:52ch;margin-top:6px;transition:color .4s}
.srv__tag{
  font:700 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid rgba(21,37,31,.28);border-radius:999px;padding:8px 14px;white-space:nowrap;transition:all .4s;
}
.srv__arrow{
  width:clamp(44px,4.5vw,58px);aspect-ratio:1;border:1.5px solid rgba(21,37,31,.3);border-radius:50%;
  display:grid;place-items:center;transition:all .45s var(--ease-out);
}
.srv__arrow svg{width:18px;height:18px;stroke:var(--ink);fill:none;transition:stroke .4s,transform .45s var(--ease-out)}
.srv__thumb{display:none}
.srv-preview{
  position:fixed;top:0;left:0;width:300px;height:380px;border-radius:18px;overflow:hidden;
  pointer-events:none;z-index:60;opacity:0;visibility:hidden;border:2px solid var(--pine);
  box-shadow:10px 10px 0 rgba(14,46,39,.9);will-change:transform;
}
.srv-preview img{width:100%;height:100%;object-fit:cover}

@media(max-width:760px){
  .srv{
    grid-template-columns:36px 1fr auto;
    gap:14px;
    padding:18px 4px;
  }
  .srv__tag{display:none}
  .srv__arrow{display:none}
  .srv__thumb{
    display:block;width:62px;height:74px;object-fit:cover;
    border-radius:12px;border:1.5px solid var(--ink);flex-shrink:0;
  }
  .srv__main h3{font-size:clamp(1.22rem,4.4vw,1.75rem);line-height:1.15}
  .srv__main p{font-size:13.5px;line-height:1.48;margin-top:4px}
}
@media(max-width:420px){
  .srv{
    grid-template-columns:28px 1fr auto;
    gap:10px;
    padding:16px 2px;
  }
  .srv__idx{font-size:1.02rem}
  .srv__thumb{width:52px;height:62px;border-radius:10px}
  .srv__main h3{font-size:1.16rem}
  .srv__main p{font-size:13px}
}

/* ============================================================
   PROOF — interactive power wash
============================================================ */
.proof{background:var(--pine-2);color:var(--cream);padding:clamp(56px,8vh,110px) 0 clamp(70px,9vh,130px)}
.proof__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,4.5vh,58px)}
.proof__head .sec-head{margin-bottom:0;max-width:640px}
.wash__count{text-align:right}
.wash__num{display:block;font:300 clamp(3.2rem,6.5vw,5.6rem)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--teal-soft)}
.wash__num i{font-style:normal;font-size:.4em}
.wash__count small{font:700 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:rgba(245,241,232,.5)}
.wash__count.is-done .wash__num{color:var(--lime)}

.wash__stage-wrap{position:relative}
.wash__stage{
  position:relative;aspect-ratio:1904/1072;border-radius:22px;overflow:hidden;
  border:2px solid rgba(245,241,232,.22);background:#000;cursor:none;touch-action:none;user-select:none;
}
.wash__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wash__nozzle{
  position:absolute;top:0;left:0;width:72px;height:72px;
  transform:translate(-50%,calc(-50% - 26px));
  pointer-events:none;z-index:3;opacity:0;will-change:transform;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));
}
.wash__nozzle svg{width:100%;height:100%;display:block}
.wash__hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;cursor:default;
  display:inline-flex;align-items:center;gap:9px;background:rgba(9,33,27,.88);border:1px solid rgba(245,241,232,.3);
  color:var(--cream);border-radius:999px;padding:11px 18px;white-space:nowrap;
  font:700 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;
}
.wash__hint i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 1.4s infinite}
.wash__done{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:24px;visibility:hidden;opacity:0;cursor:default;
  background:radial-gradient(65% 65% at 50% 50%, rgba(9,33,27,.88), rgba(9,33,27,.6));
  overflow-y:auto;
}
.wash__done-burst{position:absolute;width:210px;height:210px;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.wash__spotless-chip{
  position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:var(--pine-2);
  border-radius:999px;padding:12px 22px;font:700 13.5px/1 var(--f-body);letter-spacing:.06em;white-space:nowrap;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.wash__spotless-chip svg{width:15px;height:15px;flex-shrink:0}
.wash__spotless-chip svg path{fill:var(--pine-2)}
.wash__done h3{position:relative;font:500 clamp(1.4rem,3vw,2.3rem)/1.2 var(--f-display);color:var(--cream);max-width:24ch}
.wash__done h3 em{font-style:italic;color:var(--lime)}
.wash__done h3 span{color:var(--teal-soft);font-variant-numeric:tabular-nums}
.wash__done p{position:relative;color:rgba(245,241,232,.75);font-size:14.5px;max-width:44ch}
.wash__done-cta{position:relative;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;cursor:default}
.wash__done a{cursor:pointer}
.wash__reset{
  display:inline-flex;align-items:center;gap:9px;color:var(--cream);border:1.5px solid rgba(245,241,232,.4);
  border-radius:999px;padding:14px 24px;font:600 14px/1 var(--f-body);transition:all .3s;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.wash__reset svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease-out)}

@media(max-width:640px){
  .proof__head{flex-direction:column;align-items:flex-start;gap:14px}
  .wash__count{text-align:left;display:flex;align-items:baseline;gap:10px}
  .wash__num{font-size:clamp(2.6rem,9vw,3.6rem)}
  .wash__stage{
    aspect-ratio:4/3;
    min-height:330px;
    border-radius:16px;
  }
  .wash__done{padding:20px 14px;gap:12px}
  .wash__done-burst{width:150px;height:150px}
  .wash__spotless-chip{padding:9px 16px;font-size:12px}
  .wash__done h3{font-size:clamp(1.22rem,5vw,1.65rem);line-height:1.2;max-width:26ch}
  .wash__done p{font-size:13px;max-width:32ch}
  .wash__done-cta{flex-direction:column;width:100%;max-width:280px;gap:10px}
  .wash__done-cta .btn,
  .wash__done-cta .wash__reset{width:100%;justify-content:center;padding:13px 20px;font-size:13.5px}
  .wash__hint{bottom:12px;padding:8px 14px;font-size:9.5px}
}
@media(pointer:coarse), (hover:none){.wash__stage{cursor:auto}.wash__nozzle{display:none}}

/* ============================================================
   WHY
============================================================ */
.why{padding:var(--sec-pad) 0;background:var(--cream-2)}
.why__grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(36px,4.5vw,72px);align-items:start}
.why__media{position:sticky;top:100px}
.why__media figure{position:relative;border-radius:22px;overflow:hidden;border:2px solid var(--pine);box-shadow:-12px 12px 0 var(--pine);transform:rotate(1deg);max-width:460px}
.why__media img{aspect-ratio:4/3;object-fit:cover;width:100%;max-height:400px;display:block}
.why__media figcaption{
  position:absolute;left:16px;bottom:16px;background:var(--cream);color:var(--ink);
  border-radius:10px;padding:9px 15px;font:700 11px/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid var(--pine);box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.why__media figcaption span{display:block;color:var(--teal-deep)}
.why__feat{display:grid;gap:clamp(22px,3.5vh,40px);padding-top:6px}
.why__item{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;padding-bottom:clamp(22px,3.5vh,40px);border-bottom:1px solid var(--line)}
.why__item:last-child{border-bottom:none;padding-bottom:0}
.why__icon{
  width:56px;height:56px;border-radius:16px;background:var(--pine);display:grid;place-items:center;flex:none;
  transition:transform .4s var(--ease-out),background .4s;
}
.why__icon svg{width:25px;height:25px}
.why__icon svg path,.why__icon svg rect{fill:none;stroke:var(--lime);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why__item h3{font:500 clamp(1.22rem,2vw,1.65rem)/1.15 var(--f-display);letter-spacing:-.01em;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.why__item p{font-size:15px;color:rgba(21,37,31,.7);max-width:52ch;line-height:1.55}
.mini-star{display:inline-block;width:15px;height:15px}
.mini-star path{fill:var(--teal)}

@media(max-width:900px){
  .why__grid{grid-template-columns:1fr;gap:32px}
  .why__media{position:static;max-width:440px;margin-inline:auto;width:100%}
}
@media(max-width:540px){
  .why__media figure{box-shadow:-6px 6px 0 var(--pine);transform:none;border-radius:18px}
  .why__media figcaption{left:10px;bottom:10px;padding:7px 11px;font-size:9.5px}
  .why__item{grid-template-columns:44px 1fr;gap:14px;padding-bottom:20px}
  .why__icon{width:44px;height:44px;border-radius:13px}
  .why__icon svg{width:20px;height:20px}
  .why__item h3{font-size:clamp(1.12rem,4.2vw,1.4rem);margin-bottom:4px}
  .why__item p{font-size:14px;line-height:1.52}
}

/* ============================================================
   PROCESS
============================================================ */
.process{padding:var(--sec-pad) 0;background:var(--paper)}
.steps{--rail:clamp(52px,8vw,110px);position:relative;padding-left:var(--rail);display:grid;gap:clamp(36px,6vh,72px);max-width:900px}
.steps__line{position:absolute;left:0;top:6px;bottom:6px;width:28px;overflow:visible}
.steps__line path{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 9}
.step{position:relative;display:grid;grid-template-columns:clamp(70px,9vw,150px) 1fr;gap:clamp(16px,3vw,40px);align-items:start}
.steps article:nth-of-type(even){transform:translateX(clamp(0px,5vw,70px))}
.step__node{position:absolute;left:calc(var(--rail) * -1);top:2px;width:28px;height:28px;display:grid;place-items:center;background:var(--paper)}
.step__node svg{width:22px;height:22px}
.step__node svg path{fill:var(--teal-deep)}
.step__num{
  font:400 clamp(2.8rem,5.5vw,5.2rem)/1 var(--f-display);color:transparent;
  -webkit-text-stroke:1.5px var(--teal-deep);transition:color .5s var(--ease-out);
}
.step.is-in .step__num{color:var(--teal-deep)}
.step__body h3{font:500 clamp(1.3rem,2.2vw,1.9rem)/1.15 var(--f-display);letter-spacing:-.012em;margin-bottom:8px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.step__meta{
  font:700 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);
  border:1.5px solid rgba(30,122,108,.4);border-radius:999px;padding:6px 11px;white-space:nowrap;
}
.step__body p{font-size:15px;color:rgba(21,37,31,.7);max-width:54ch;line-height:1.55}

@media(max-width:640px){
  .steps{--rail:34px;gap:30px;padding-left:34px}
  .steps__line{width:20px;left:0}
  .step__node{left:-34px;width:20px;height:20px}
  .step__node svg{width:16px;height:16px}
  .step{grid-template-columns:1fr;gap:6px}
  .steps article:nth-of-type(even){transform:none}
  .step__num{font-size:clamp(2.1rem,7vw,3.2rem);line-height:1}
  .step__body h3{font-size:clamp(1.18rem,4.4vw,1.55rem);gap:8px;margin-bottom:6px}
  .step__meta{padding:5px 9px;font-size:9.5px}
  .step__body p{font-size:14px;line-height:1.52}
}

/* ============================================================
   GALLERY — drag strip
============================================================ */
.work{padding:var(--sec-pad) 0;background:var(--cream)}
.drag-wrap{cursor:grab;margin-top:6px}
.drag-wrap.is-dragging{cursor:grabbing}
.drag-track{
  display:flex;gap:clamp(16px,2.2vw,28px);overflow-x:auto;padding:26px max(var(--gutter),calc((100vw - var(--container))/2)) 40px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.drag-track::-webkit-scrollbar{display:none}
.work-card{flex:0 0 clamp(240px,27vw,400px);user-select:none}
.work-card:nth-child(even){transform:translateY(24px)}
.work-card figure{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;border:2px solid var(--pine)}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);pointer-events:none}
.work-card__idx{
  position:absolute;top:14px;left:14px;background:rgba(14,46,39,.85);color:var(--lime);
  font:700 11px/1 var(--f-body);letter-spacing:.1em;border-radius:8px;padding:7px 10px;
}
.work-card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding-inline:4px}
.work-card__meta h4{font:500 1.12rem/1.2 var(--f-display);letter-spacing:-.01em}
.work-card__meta span{font:700 10px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);white-space:nowrap}
.work__hint{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:rgba(21,37,31,.5)}
.work__hint svg{width:26px;height:10px;flex:none}

@media(max-width:640px){
  .drag-track{
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:16px var(--gutter) 28px;
  }
  .work-card{
    flex:0 0 clamp(240px,76vw,310px);
    scroll-snap-align:center;
  }
  .work-card:nth-child(even){transform:none}
  .work-card figure{border-radius:16px}
  .work__hint{font-size:10.5px}
}

/* ============================================================
   STATS BAND
============================================================ */
.stats{background:var(--pine);color:var(--cream);border-top:1px solid var(--line-cream);border-bottom:1px solid var(--line-cream)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{position:relative;padding:clamp(36px,5.5vh,64px) clamp(16px,2.8vw,40px);border-left:1px solid var(--line-cream)}
.stat:first-child{border-left:none}
.stat__num{display:block;font:400 clamp(2.4rem,4.5vw,4.4rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.stat__num sup{font-size:.45em;color:var(--lime);font-style:italic;margin-left:2px}
.stat__bar{height:3px;background:var(--lime);margin:16px 0 12px;transform:scaleX(0);transform-origin:left}
.stat__label{font:600 11.5px/1.5 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,232,.55)}
.stat__spark{position:absolute;top:clamp(16px,2.5vh,30px);right:clamp(14px,1.8vw,26px);width:32px;height:32px;opacity:.9}

@media(max-width:860px){
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line-cream)}
}
@media(max-width:520px){
  .stat{padding:26px 16px}
  .stat__num{font-size:clamp(2.05rem,7.8vw,2.8rem)}
  .stat__bar{margin:12px 0 10px}
  .stat__label{font-size:11px}
  .stat__spark{width:24px;height:24px;top:16px;right:14px}
}
@media(max-width:375px){
  .stats__grid{grid-template-columns:1fr}
  .stat{border-left:none}
  .stat:nth-child(n+2){border-top:1px solid var(--line-cream)}
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.reviews{padding:var(--sec-pad) 0;background:var(--cream)}
.tst{max-width:980px}
.tst__quote{
  font:400 clamp(1.4rem,3vw,2.55rem)/1.32 var(--f-display);letter-spacing:-.015em;color:var(--ink);
  visibility:hidden;position:absolute;inset:0;
}
.tst__quote em{font-style:italic;color:var(--teal-deep)}
.tst__quote.is-active{visibility:visible;position:relative}
.tst__body{position:relative;min-height:5.4em;margin:30px 0 40px}
.tst__body::before{
  content:"\201C";position:absolute;top:-.28em;left:-.05em;font:600 clamp(5rem,14vw,8rem)/1 var(--f-display);color:rgba(47,191,169,.22);z-index:-1;
}
.tst__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.tst__author{display:flex;align-items:center;gap:16px}
.tst__author img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--pine);flex-shrink:0}
.tst__author strong{display:block;font:600 0.98rem/1.3 var(--f-body)}
.tst__author span{font:500 12px/1.4 var(--f-body);letter-spacing:.06em;color:rgba(21,37,31,.6)}
.tst__stars{display:flex;gap:3px;margin-top:4px}
.tst__stars svg{width:12px;height:12px;fill:var(--teal)}
.tst__nav{display:flex;align-items:center;gap:20px}
.tst__bars{display:flex;gap:7px}
.tst__bar{width:40px;height:3.5px;background:rgba(21,37,31,.15);border-radius:99px;overflow:hidden;cursor:pointer;touch-action:manipulation}
.tst__bar i{display:block;height:100%;width:0;background:var(--teal-deep)}
.tst__bar i.is-running{animation:barFill 7s linear forwards}
@keyframes barFill{to{width:100%}}
.tst__arrow{
  width:50px;height:50px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;
  transition:background .35s,border-color .35s;touch-action:manipulation;
}
.tst__arrow svg{width:17px;height:17px;stroke:var(--ink);fill:none;transition:stroke .35s}

@media(max-width:640px){
  .tst__body{margin:20px 0 28px;min-height:7em}
  .tst__body::before{font-size:clamp(4rem,14vw,6.5rem);top:-.22em}
  .tst__quote{font-size:clamp(1.22rem,4.4vw,1.65rem);line-height:1.36}
  .tst__foot{flex-direction:column;align-items:flex-start;gap:18px}
  .tst__author{gap:14px}
  .tst__author img{width:48px;height:48px}
  .tst__author strong{font-size:0.95rem}
  .tst__author span{font-size:12px}
  .tst__nav{width:100%;justify-content:space-between}
  .tst__bars{flex:1;max-width:130px}
  .tst__bar{height:4px}
  .tst__arrow{width:46px;height:46px}
}

/* ============================================================
   BOOK
============================================================ */
.book{padding:var(--sec-pad) 0;background:var(--cream-2)}
.book__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,3.8vw,56px);align-items:stretch}
.book__panel{
  background:var(--pine);color:var(--cream);border-radius:24px;padding:clamp(26px,3.8vw,52px);
  display:flex;flex-direction:column;gap:24px;box-shadow:12px 12px 0 var(--lime);position:relative;overflow:hidden;
}
.book__panel .eyebrow{color:var(--teal-soft)}
.book__panel h2{font:500 clamp(1.9rem,3.4vw,3rem)/1.08 var(--f-display);letter-spacing:-.02em}
.book__panel h2 em{font-style:italic;color:var(--lime);font-weight:400}
.book__panel .lead{color:rgba(245,241,232,.75)}
.book__contact{display:grid;gap:12px;margin-top:auto}
.book__row{display:flex;align-items:center;gap:12px;font:500 14.5px/1.4 var(--f-body);color:rgba(245,241,232,.85)}
.book__row svg{width:18px;height:18px;flex:none;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.book__guarantee{
  display:flex;align-items:center;gap:12px;background:rgba(205,235,99,.1);border:1.5px dashed rgba(205,235,99,.45);
  border-radius:14px;padding:15px 16px;font:600 13px/1.5 var(--f-body);color:var(--lime);
}
.book__guarantee svg{width:20px;height:20px;flex:none}
.book__guarantee svg path{fill:var(--lime)}

.book__form{position:relative;background:var(--paper);border:2px solid var(--pine);border-radius:24px;padding:clamp(24px,3.2vw,44px);box-shadow:12px 12px 0 var(--pine)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px;position:relative}
.field--full{grid-column:1/-1}
.field label{font:700 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(21,37,31,.6);transition:color .3s}
.field input,.field select,.field textarea{
  font:500 16px/1.4 var(--f-body);color:var(--ink);background:transparent;
  border:1.5px solid rgba(21,37,31,.25);border-radius:14px;padding:14px 42px 14px 16px;width:100%;
  transition:border-color .3s,background .3s;appearance:none;-webkit-appearance:none;outline:none;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-deep);background:rgba(47,191,169,.06)}
.field:focus-within label{color:var(--teal-deep)}
.field select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%231E7A6C" stroke-width="2" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:right 18px center;cursor:pointer;
}
.field__spark{position:absolute;right:16px;bottom:16px;width:17px;height:17px;transform:scale(0);transition:transform .4s var(--ease-out);pointer-events:none}
.field__spark path{fill:var(--teal)}
.field:focus-within .field__spark{transform:scale(1) rotate(20deg)}
.field .error-msg{display:none;font:600 12px/1.4 var(--f-body);color:var(--red)}
.field.is-error input{border-color:var(--red)}
.field.is-error .error-msg{display:block}
.field.is-error{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.form__foot{grid-column:1/-1;display:grid;gap:14px;margin-top:4px}
.form__foot .btn{justify-content:center;width:100%;padding:18px}
.form-note{font:500 12px/1.5 var(--f-body);color:rgba(21,37,31,.55);text-align:center}
.form-success{
  position:absolute;inset:0;background:var(--paper);border-radius:22px;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:32px;z-index:2;
}
.form-success .form-success__lottie{width:110px;height:110px}
.form-success h3{font:500 clamp(1.6rem,3vw,2.3rem)/1.1 var(--f-display)}
.form-success h3 em{font-style:italic;color:var(--teal-deep)}
.form-success p{color:rgba(21,37,31,.7);max-width:40ch;font-size:14.5px}
.form-success button{font:600 14px/1 var(--f-body);color:var(--teal-deep);border-bottom:1.5px solid var(--teal-deep);padding-bottom:3px}

@media(max-width:900px){.book__grid{grid-template-columns:1fr;gap:28px}}
@media(max-width:620px){
  .book__panel{box-shadow:6px 6px 0 var(--lime);border-radius:20px;padding:24px 18px;gap:20px}
  .book__panel h2{font-size:clamp(1.7rem,6vw,2.3rem)}
  .book__panel .lead{font-size:14.5px}
  .book__form{box-shadow:6px 6px 0 var(--pine);border-radius:20px;padding:22px 16px}
  .form__grid{grid-template-columns:1fr;gap:16px}
  .book__contact{gap:10px}
  .book__row{font-size:14px;gap:10px}
  .book__guarantee{font-size:12.5px;padding:12px 14px;border-radius:12px}
  .form__foot .btn{padding:17px;font-size:14.5px}
}

/* ============================================================
   FOOTER
============================================================ */
.footer{background:var(--pine-2);color:var(--cream);padding-top:clamp(44px,7vh,90px);padding-bottom:max(30px, var(--sab));overflow:clip}
.footer__word{
  display:flex;justify-content:center;line-height:.86;padding:0 var(--gutter);
  font:600 clamp(2.4rem,14.5vw,15rem)/0.86 var(--f-display);letter-spacing:-.03em;user-select:none;
}
.footer__word span{
  color:transparent;-webkit-text-stroke:1.5px rgba(245,241,232,.28);display:inline-block;
  transition:color .2s;cursor:default;
}
.footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,3.8vw,60px);
  padding:clamp(40px,7vh,80px) 0 36px;border-bottom:1px solid var(--line-cream);
}
.footer__brand p{color:rgba(245,241,232,.62);font-size:14.5px;max-width:34ch;margin-top:16px;line-height:1.55}
.footer h4{font:700 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--teal-soft);margin-bottom:18px}
.footer__grid ul{display:grid;gap:10px}
.footer__grid ul a{font:500 14.5px/1.5 var(--f-body);color:rgba(245,241,232,.78);position:relative}
.footer__grid ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.footer__contact li{display:flex;gap:12px;align-items:center;font:500 14.5px/1.5 var(--f-body);color:rgba(245,241,232,.78)}
.footer__contact svg{width:17px;height:17px;stroke:var(--teal-soft);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:24px 0 30px}
.footer__bottom p{font:500 12.5px/1.5 var(--f-body);color:rgba(245,241,232,.45)}
.footer__top{
  width:54px;height:54px;border:1.5px solid rgba(245,241,232,.3);border-radius:50%;display:grid;place-items:center;
  transition:background .35s,border-color .35s;touch-action:manipulation;
}
.footer__top svg{width:18px;height:18px;stroke:var(--cream);fill:none;transition:stroke .35s,transform .4s var(--ease-out)}

@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:520px){
  .footer__grid{grid-template-columns:1fr;gap:28px;padding:32px 0 24px}
  .footer__word{padding:0 8px}
  .footer__bottom{flex-direction:column-reverse;align-items:center;text-align:center;gap:16px;padding:20px 0 16px}
  .footer__top{width:48px;height:48px}
}

/* ---------- hover states for fine pointer / desktop only ---------- */
@media(hover:hover) and (pointer:fine){
  .brand:hover em{color:var(--teal)}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav .nav__cta:hover{color:var(--paper);border-color:var(--teal-deep)}
  .btn:hover svg{transform:translateX(5px)}
  .btn:hover::before{transform:scaleY(1)}
  .btn:hover .btn__shine{left:130%}
  .btn-primary:hover{color:var(--paper)}
  .btn-ghost:hover{color:var(--cream);border-color:var(--pine)}
  .btn-ghost-light:hover{color:var(--ink);border-color:var(--cream)}
  .marquee-band:hover .marquee__track{animation-play-state:paused}
  .srv:hover::before{transform:scaleY(1)}
  .srv:hover .srv__idx{color:var(--teal)}
  .srv:hover .srv__main h3{color:var(--cream);transform:translateX(clamp(4px,1vw,14px))}
  .srv:hover .srv__main p{color:rgba(245,241,232,.66)}
  .srv:hover .srv__tag{border-color:var(--lime);color:var(--lime)}
  .srv:hover .srv__arrow{background:var(--lime);border-color:var(--lime);transform:rotate(45deg)}
  .srv:hover .srv__arrow svg{stroke:var(--pine-2)}
  .wash__reset:hover{background:var(--cream);color:var(--pine-2);border-color:var(--cream)}
  .wash__reset:hover svg{transform:rotate(-180deg)}
  .why__item:hover .why__icon{transform:rotate(-8deg) scale(1.06);background:var(--teal-deep)}
  .work-card:hover img{transform:scale(1.07)}
  .tst__arrow:hover{background:var(--pine);border-color:var(--pine)}
  .tst__arrow:hover svg{stroke:var(--cream)}
  .book__row a:hover{color:var(--lime)}
  .footer__grid ul a:hover{color:var(--lime)}
  .footer__grid ul a:hover::after{transform:scaleX(1);transform-origin:left}
  .footer__top:hover{background:var(--lime);border-color:var(--lime)}
  .footer__top:hover svg{stroke:var(--pine-2);transform:translateY(-3px)}
  .footer__word span:hover{color:var(--teal);-webkit-text-stroke-color:var(--teal)}
}

/* ---------- active feedback for touch screens ---------- */
@media(hover:none){
  .btn:active{transform:scale(.97)}
  .srv:active{background:rgba(47,191,169,.09)}
  .tst__arrow:active{transform:scale(.92)}
  .footer__top:active{transform:scale(.92)}
  .wash__reset:active{background:rgba(245,241,232,.15)}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .grain,.marquee__track,.hero__cue-line::after,.wash__hint i{animation:none !important}
}