:root{
  --bg:#f4f7f5;
  --ink:#10201a;
  --muted:#66766e;
  --green:#12b76a;
  --green-dark:#087a48;
  --mint:#dff8ec;
  --white:#ffffff;
  --line:rgba(16,32,26,.12);
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Manrope,system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")
}
.scroll-progress{position:fixed;left:0;top:0;width:0;height:3px;background:var(--green);z-index:10000}
.site-header{
  position:fixed;z-index:1000;top:18px;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 32px));height:70px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px 0 22px;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.72);backdrop-filter:blur(20px);
  border-radius:22px;box-shadow:0 15px 50px rgba(10,40,27,.08)
}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:700;font-size:21px}
.brand-mark{width:29px;height:29px;border-radius:9px;background:var(--ink);display:grid;grid-template-columns:repeat(3,1fr);align-items:end;padding:6px;gap:2px;transform:rotate(-7deg)}
.brand-mark i{display:block;background:var(--green);border-radius:3px}
.brand-mark i:nth-child(1){height:45%}.brand-mark i:nth-child(2){height:70%}.brand-mark i:nth-child(3){height:100%}
.site-header nav{display:flex;gap:28px;font-size:14px;font-weight:600}
.site-header nav a{opacity:.72;transition:.2s}.site-header nav a:hover{opacity:1}
.header-cta{background:var(--ink);color:white;padding:13px 18px;border-radius:14px;font-size:13px;font-weight:700}
.hero{
  min-height:100vh;position:relative;display:grid;grid-template-columns:1.04fr .96fr;
  align-items:center;gap:30px;padding:135px max(5vw,32px) 60px;
  overflow:hidden;
}
.hero-copy{position:relative;z-index:3;max-width:760px}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:var(--green-dark)}
.hero h1,.process h2,.wipe-intro h2,.cta-copy h2,.pin-copy h2{
  font-family:"Space Grotesk";letter-spacing:-.055em;line-height:.92;margin:18px 0 26px;font-weight:700
}
.hero h1{font-size:clamp(64px,8.4vw,140px)}
.headline-line{display:block;will-change:transform,opacity}
.hero h1 em,.process h2 em,.wipe-intro h2 em,.cta-copy h2 em,.pin-copy h2 em{font-style:normal;color:var(--green)}
.hero-lead{max-width:620px;font-size:clamp(17px,1.4vw,21px);line-height:1.65;color:var(--muted)}
.hero-actions{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:22px;padding:17px 20px;border-radius:15px;font-weight:800;font-size:14px;transition:.25s}
.btn span{font-size:17px}.btn-primary{background:var(--green);color:#042f1b;box-shadow:0 14px 35px rgba(18,183,106,.22)}
.btn-primary:hover{transform:translateY(-3px)}.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.5)}
.hero-visual{height:min(70vh,700px);min-height:520px;position:relative;z-index:2;border-radius:40px;overflow:hidden;box-shadow:0 30px 100px rgba(18,62,43,.14)}
.clean-panel{position:absolute;inset:0;padding:30px;display:flex;align-items:flex-end;font-size:12px;letter-spacing:.16em;font-weight:800}
.panel-dirty{background:linear-gradient(135deg,#c7cbc8,#edf0ee)}
.panel-clean{background:linear-gradient(135deg,#d7ffeb,#ffffff);clip-path:inset(0 100% 0 0)}
.smudge{position:absolute;border-radius:50%;filter:blur(1px);background:rgba(51,67,58,.14);box-shadow:inset 0 0 28px rgba(44,61,51,.12)}
.smudge-1{width:180px;height:240px;left:11%;top:18%;transform:rotate(23deg)}
.smudge-2{width:260px;height:140px;right:8%;top:38%;transform:rotate(-15deg)}
.smudge-3{width:130px;height:180px;left:40%;bottom:11%}
.spark{position:absolute;color:var(--green);font-size:42px;animation:twinkle 2.4s infinite ease-in-out}.s1{top:19%;left:24%}.s2{top:45%;right:18%;animation-delay:.6s}.s3{bottom:16%;left:56%;animation-delay:1.2s}
@keyframes twinkle{50%{transform:scale(1.5) rotate(25deg);opacity:.4}}
.squeegee{position:absolute;left:-20%;top:48%;width:380px;height:120px;transform:rotate(-13deg);will-change:transform}
.rubber{display:block;width:280px;height:32px;border-radius:12px;background:var(--ink);box-shadow:0 15px 20px rgba(0,0,0,.18)}
.handle{position:absolute;width:180px;height:22px;background:var(--green);left:210px;top:48px;border-radius:20px;transform:rotate(38deg);transform-origin:left center}
.hero-orbit{position:absolute;border:1px solid rgba(18,183,106,.16);border-radius:50%;z-index:1}.orbit-a{width:650px;height:650px;right:-260px;top:2%}.orbit-b{width:420px;height:420px;right:-120px;top:18%}
.scroll-hint{position:absolute;bottom:25px;left:max(5vw,32px);font-size:10px;letter-spacing:.18em;font-weight:800;display:flex;align-items:center;gap:11px;color:var(--muted)}
.scroll-hint i{display:block;width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}.scroll-hint i:after{content:"";position:absolute;inset:0;background:var(--green);transform:translateX(-100%);animation:scrollHint 1.5s infinite}
@keyframes scrollHint{to{transform:translateX(100%)}}

.intro-pin{height:340vh;position:relative;background:var(--ink);color:white}
.pin-wrap{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:6vw;padding:100px max(5vw,32px) 60px;overflow:hidden}
.pin-copy{max-width:560px}.pin-copy h2{font-size:clamp(54px,6vw,96px)}.pin-copy p{font-size:18px;line-height:1.7;color:#a9b8b1;max-width:520px}
.service-stage{position:relative;height:67vh;min-height:550px}
.service-card{
  position:absolute;inset:0;border-radius:38px;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(145deg,#f6fbf8,#dff8ec);color:var(--ink);
  box-shadow:0 40px 80px rgba(0,0,0,.25);transform-origin:center 90%;will-change:transform,opacity;
}
.service-card .number{position:absolute;top:34px;right:38px;font-family:"Space Grotesk";font-size:14px;color:var(--green-dark);font-weight:700}
.service-card h3{font-family:"Space Grotesk";font-size:clamp(34px,4vw,62px);margin:24px 0 10px;letter-spacing:-.04em}
.service-card p{font-size:16px;color:#52655c;max-width:400px}
.card-2{background:linear-gradient(145deg,#f8f6ed,#ebe8d8)}
.card-3{background:linear-gradient(145deg,#eef6ff,#dae8f4)}
.card-4{background:linear-gradient(145deg,#e8f9f0,#c8eedc)}
.service-icon{width:112px;height:112px;border-radius:32px;background:rgba(255,255,255,.65);border:1px solid rgba(16,32,26,.08);position:relative}
.glass-icon:before{content:"";position:absolute;width:44px;height:58px;border:5px solid var(--ink);left:30px;top:20px;border-radius:7px;transform:rotate(6deg)}
.glass-icon:after{content:"✦";position:absolute;right:18px;top:10px;color:var(--green);font-size:28px}
.office-icon:before{content:"";position:absolute;width:56px;height:49px;left:27px;top:32px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px),repeating-linear-gradient(0deg,transparent 0 12px,var(--ink) 12px 17px);border:4px solid var(--ink)}
.office-icon:after{content:"";position:absolute;width:9px;height:26px;background:var(--green);left:51px;top:56px}
.home-icon:before{content:"⌂";position:absolute;left:24px;top:8px;font-size:74px;font-family:Arial;color:var(--ink)}
.home-icon:after{content:"✦";position:absolute;right:14px;top:15px;color:var(--green);font-size:22px}
.deep-icon:before{content:"";position:absolute;width:16px;height:62px;background:var(--green);border-radius:10px;left:48px;top:22px;transform:rotate(40deg)}
.deep-icon:after{content:"";position:absolute;width:55px;height:18px;background:var(--ink);border-radius:6px;left:16px;top:71px;transform:rotate(-12deg)}
.scene-counter{position:absolute;bottom:35px;right:max(5vw,32px);font-family:"Space Grotesk";font-size:13px;color:#72847b;letter-spacing:.1em}.scene-counter span{color:var(--green);font-size:22px}

.wipe-section{padding:150px max(5vw,32px);background:#ecf3ef}
.wipe-intro{text-align:center;max-width:1000px;margin:0 auto 80px}.wipe-intro h2{font-size:clamp(52px,7vw,110px)}
.wipe-stage{position:relative;height:72vh;min-height:560px;border-radius:40px;overflow:hidden;box-shadow:0 30px 90px rgba(9,50,31,.12)}
.wipe-bg{position:absolute;inset:0}.before-side{background:linear-gradient(135deg,#b9c0bc,#e1e5e2)}.after-side{background:linear-gradient(135deg,#c9f8df,#fafffc);clip-path:inset(0 100% 0 0)}
.stage-label{position:absolute;left:35px;bottom:35px;font-size:12px;letter-spacing:.18em;font-weight:800;z-index:4}
.dirt-grid,.shine-grid{position:absolute;inset:0}
.dirt-grid{background-image:radial-gradient(circle at 20% 30%,rgba(22,31,26,.20) 0 2%,transparent 2.4%),radial-gradient(circle at 70% 60%,rgba(22,31,26,.16) 0 5%,transparent 5.5%),linear-gradient(22deg,transparent 48%,rgba(18,31,24,.09) 50%,transparent 52%);background-size:210px 180px,330px 250px,160px 160px}
.shine-grid:after{content:"✦";position:absolute;left:67%;top:24%;font-size:120px;color:rgba(18,183,106,.35);text-shadow:-300px 170px 0 rgba(18,183,106,.2),120px 260px 0 rgba(18,183,106,.16)}
.wipe-line{position:absolute;top:0;bottom:0;left:0;width:4px;background:white;box-shadow:0 0 40px rgba(0,0,0,.2);transform:translateX(-2px)}.wipe-line span{position:absolute;top:50%;left:50%;width:58px;height:58px;border-radius:50%;background:var(--green);transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(18,183,106,.25)}.wipe-line span:before{content:"↔";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#07361f}

.process{padding:160px max(5vw,32px);background:white}
.process-heading{max-width:850px}.process-heading h2{font-size:clamp(52px,7vw,105px)}
.process-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:110px}
.track-line{position:absolute;left:0;right:0;top:0;height:2px;background:#e4eae6}.track-line i{display:block;width:0;height:100%;background:var(--green)}
.process-step{padding-top:38px;opacity:.28;transform:translateY(35px);transition:.6s ease}
.process-step:before{content:"";position:absolute;top:-7px;width:16px;height:16px;border-radius:50%;background:#d9e2dd;border:4px solid white;box-shadow:0 0 0 1px #d9e2dd;transition:.4s}
.process-step.active{opacity:1;transform:none}.process-step.active:before{background:var(--green);box-shadow:0 0 0 1px var(--green)}
.process-step span{font-size:12px;font-weight:800;color:var(--green-dark)}.process-step h3{font-family:"Space Grotesk";font-size:26px;margin:12px 0 8px}.process-step p{color:var(--muted);line-height:1.6;max-width:230px}

.numbers{position:relative;padding:170px max(5vw,32px);overflow:hidden;background:var(--mint)}
.numbers-bg-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);font-family:"Space Grotesk";font-weight:700;font-size:clamp(180px,32vw,560px);letter-spacing:-.08em;color:rgba(18,183,106,.08);white-space:nowrap}
.numbers-inner{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.numbers article{padding:55px 20px}.numbers strong{font-family:"Space Grotesk";font-size:clamp(72px,9vw,142px);letter-spacing:-.06em}.numbers article>span{font-family:"Space Grotesk";font-size:clamp(30px,4vw,60px);color:var(--green)}.numbers p{color:var(--muted);font-weight:700}

.testimonial{padding:180px max(5vw,32px);text-align:center;background:var(--ink);color:white}
.quote-mark{font-family:Georgia;font-size:110px;color:var(--green);line-height:.5}.testimonial blockquote{font-family:"Space Grotesk";font-size:clamp(38px,6vw,84px);letter-spacing:-.045em;line-height:1.08;max-width:1150px;margin:35px auto}.testimonial blockquote em{font-style:normal;color:var(--green)}.rating{color:#5ce29c;font-size:22px;letter-spacing:.08em}.rating span{color:#c8d3ce;font-size:13px;letter-spacing:0;margin-left:12px}.testimonial p{color:#71857b;font-size:13px}

.cta-section{position:relative;min-height:92vh;display:grid;place-items:center;text-align:center;padding:130px 24px;background:var(--green);overflow:hidden}
.cta-copy{position:relative;z-index:3}.cta-copy .eyebrow{color:#063b22}.cta-copy h2{font-size:clamp(60px,9vw,145px);color:#052d1b}.cta-copy h2 em{color:white}.cta-copy p{font-size:18px;color:#0a5733}.btn-light{margin-top:24px;background:white;color:var(--ink);box-shadow:0 20px 45px rgba(5,48,28,.16)}.btn-light:hover{transform:translateY(-3px)}
.cta-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.15);filter:blur(80px)}
.bubble{position:absolute;border:1px solid rgba(255,255,255,.35);border-radius:50%;backdrop-filter:blur(3px);background:rgba(255,255,255,.08)}
.bubble-a{width:180px;height:180px;left:8%;top:16%}.bubble-b{width:90px;height:90px;right:12%;top:24%}.bubble-c{width:240px;height:240px;right:5%;bottom:-50px}

footer{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;padding:32px max(5vw,32px);font-size:12px;color:var(--muted);background:#f7faf8}.footer-brand{color:var(--ink)}footer a:last-child{color:var(--ink);font-weight:700}

@media (max-width:900px){
  .site-header nav{display:none}.header-cta{display:none}
  .hero{grid-template-columns:1fr;padding-top:125px}.hero-visual{min-height:430px;height:55vh}.hero h1{font-size:clamp(58px,18vw,105px)}
  .pin-wrap{grid-template-columns:1fr;padding-top:120px;align-content:start}.pin-copy h2{font-size:clamp(48px,12vw,80px)}.pin-copy p{display:none}.service-stage{height:55vh;min-height:430px}.service-card{padding:28px}.service-icon{width:90px;height:90px}
  .process-track{grid-template-columns:1fr;gap:0;margin-top:70px}.track-line{left:7px;top:0;bottom:0;width:2px;height:auto}.track-line i{width:100%;height:0}.process-step{padding:0 0 55px 45px}.process-step:before{left:0;top:5px}
  .numbers-inner{grid-template-columns:1fr}.numbers{padding-block:90px}
  footer{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:600px){
  .hero{padding-inline:20px}.hero-lead{font-size:16px}.hero-actions{align-items:stretch}.btn{justify-content:space-between}.hero-visual{min-height:390px;border-radius:28px}.squeegee{width:250px}.rubber{width:210px}.handle{left:155px}
  .wipe-section,.process{padding-inline:20px}.wipe-stage{min-height:470px;border-radius:28px}.wipe-intro{margin-bottom:45px}
  .service-card h3{font-size:34px}.pin-wrap{padding-inline:20px}.scene-counter{right:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}