:root{
  --blue:#2563EB;
  --green:#22C55E;
  --navy:#0F172A;
  --bg:#F8FAFC;
  --border:#E5E7EB;
  --text:#475569;
  --white:#FFFFFF;
  --radius:24px;
  --radius-sm:16px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-0.02em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1240px;margin:0 auto;padding:0 32px;}
@media(max-width:768px){.container{padding:0 20px;}}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(248,250,252,0.6);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid rgba(229,231,235,0.5);
  overflow:visible;
}
.nav-inner{
  max-width:1240px;margin:0 auto;padding:6px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:56px;position:relative;
}
.logo{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:800;font-size:22px;line-height:1;position:relative;z-index:101;}
.logo-mark{
  width:102px;height:102px;border-radius:18px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:52px;font-weight:800;flex-shrink:0;
  margin-top:24px;
  box-shadow:0 8px 32px rgba(37,99,235,0.25);
}
/* Logo image: drop your file into /assets/logo.png and swap the src */
.logo-img{
  height:80px;width:auto;display:block;
  object-fit:contain;
  margin-top:16px;
}
.nav-links{display:flex;justify-content:space-between;flex:1;margin:0 24px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;}
.nav-links a:hover{color:var(--navy);}
.nav-links a.active{color:var(--navy);font-weight:700;}
.nav-ctas{display:flex;gap:12px;align-items:center;}
.nav-toggle{display:none;flex:0 0 auto;width:42px;height:42px;padding:0;border:1px solid var(--border);border-radius:12px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;box-shadow:0 8px 22px rgba(15,23,42,.06);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;}
.nav-toggle:hover{border-color:#bfdbfe;box-shadow:0 10px 26px rgba(37,99,235,.12);}
.nav-toggle span{display:block;width:19px;height:2px;border-radius:4px;background:var(--navy);transition:transform .25s ease,opacity .2s ease;}
.nav-inner.nav-open .nav-toggle span:first-child{transform:translateY(7px) rotate(45deg);}
.nav-inner.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-inner.nav-open .nav-toggle span:last-child{transform:translateY(-7px) rotate(-45deg);}
.nav-ctas .btn-primary{background:var(--blue);color:white;}
.nav-ctas .btn-primary:hover{box-shadow:0 8px 24px rgba(37,99,235,0.3);}
.btn{
  padding:8px 16px;border-radius:100px;font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid transparent;cursor:pointer;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--navy);color:white;}
.btn-primary:hover{box-shadow:0 8px 24px rgba(15,23,42,0.25);}
.btn-secondary{background:white;color:var(--navy);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--green);}
.btn-blue{background:var(--blue);color:white;}
.btn-blue:hover{box-shadow:0 10px 30px rgba(37,99,235,0.3);}
.btn-gradient{background:linear-gradient(90deg,var(--blue),var(--green));color:white;}
.btn-gradient:hover{box-shadow:0 10px 30px rgba(37,99,235,0.28);}
.btn-lg{padding:15px 28px;font-size:15.5px;}
@media(max-width:1100px){
  .nav-inner{gap:12px;padding-left:20px;padding-right:20px;}
  .logo{order:1;}
  .nav-ctas{order:2;margin-left:auto;}
  .nav-toggle{display:flex;order:3;}
  .nav-links{position:absolute;z-index:110;top:calc(100% + 10px);left:20px;right:20px;order:4;display:flex;flex-direction:column;gap:4px;margin:0;padding:12px;border:1px solid rgba(226,232,240,.95);border-radius:18px;color:var(--text);background:rgba(255,255,255,.98);box-shadow:0 24px 60px rgba(15,23,42,.16);white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;}
  .nav-links a{padding:12px 14px;border-radius:11px;font-size:14px;}
  .nav-links a:hover,.nav-links a.active{color:var(--navy);background:#f1f5f9;}
  .nav-inner.nav-open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
}
@media(max-width:560px){.nav-ctas .btn-secondary{display:none;}}
@media(max-width:420px){.nav-ctas .btn-primary{padding:8px 12px;font-size:11.5px;}.nav-toggle{width:40px;height:40px;}.nav-inner{gap:8px;padding-left:14px;padding-right:14px;}.nav-links{left:14px;right:14px;}}

/* ---------- HERO SHELL ---------- */
.hero{
  padding:88px 0 60px;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,99,235,0.06), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(34,197,94,0.07), transparent 40%),
    var(--bg);
  overflow:hidden;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:white;border:1px solid var(--border);
  padding:7px 16px;border-radius:100px;font-size:13px;font-weight:600;
  color:var(--blue);margin-bottom:24px;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.1;color:var(--navy);margin-bottom:22px;}
.hero h1 .accent{
  background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:17.5px;color:var(--text);max-width:520px;margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- SECTION SHELLS ---------- */
.section{padding:100px 0;}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-eyebrow{
  display:inline-block;font-size:13px;font-weight:700;color:var(--blue);
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;
}
.section h2{font-size:clamp(28px,3.4vw,40px);color:var(--navy);margin-bottom:16px;line-height:1.15;}
.section-sub{color:var(--text);font-size:16.5px;}

/* ---------- CARDS ---------- */
.card{
  border:1px solid var(--border);border-radius:var(--radius);padding:30px;background:white;
}
.card-muted{background:var(--bg);}
.feat-icon{
  width:46px;height:46px;border-radius:12px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.feat-icon.blue{background:rgba(37,99,235,0.1);}
.feat-icon.green{background:rgba(34,197,94,0.1);}
.feat-icon.navy{background:rgba(15,23,42,0.06);}

/* ---------- DARK PANEL (IoT / tech) ---------- */
.dark-panel{
  background:var(--navy);border-radius:32px;padding:64px 48px;color:white;
}
.dark-panel h2, .dark-panel h3{color:white;}
.dark-panel .section-sub, .dark-panel p{color:#94A3B8;}
.telemetry-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.telemetry-row:last-child{border-bottom:none;}
.telemetry-label{font-size:13px;color:#94A3B8;}
.telemetry-value{font-family:'Manrope';font-weight:700;font-size:15px;color:white;}
.telemetry-value.good{color:var(--green);}
.tech-visual{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:20px;
}

/* ---------- CTA BAND ---------- */
.cta-section{
  background:linear-gradient(120deg, var(--blue), var(--green));
  border-radius:32px;padding:72px 48px;text-align:center;color:white;
}
.cta-section h2{color:white;font-size:clamp(26px,3.4vw,38px);margin-bottom:16px;}
.cta-section p{color:rgba(255,255,255,0.9);font-size:16.5px;margin-bottom:32px;max-width:520px;margin-left:auto;margin-right:auto;}
.cta-section .btn-primary{background:white;color:var(--navy);}
.cta-section .btn-secondary{background:transparent;color:white;border-color:rgba(255,255,255,0.4);}

/* ---------- FOOTER ---------- */
footer{padding:64px 0 32px;border-top:1px solid var(--border);}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;margin-bottom:48px;}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
.footer-brand p{font-size:14px;color:var(--text);margin-top:14px;max-width:260px;}
.footer-logo-img{height:48px;width:auto;display:block;object-fit:contain;}
.footer-socials{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;}
.footer-socials a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--text);background:#fff;font-size:11px;font-weight:600;transition:color .2s ease,border-color .2s ease,transform .2s ease;}
.footer-social-icon{display:block;flex:0 0 auto;width:14px;height:14px;}
.footer-socials a:hover{color:var(--blue);border-color:rgba(37,99,235,.35);transform:translateY(-1px);}
.footer-col h4{font-size:13.5px;margin-bottom:16px;color:var(--navy);}
.footer-col a{display:block;font-size:14px;color:var(--text);margin-bottom:11px;}
.footer-col a:hover{color:var(--navy);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--text);
}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}

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

/* ---------- SHARED PAGE MOTION ---------- */
:is(.hero,.about-hero,.technology-hero,.offer-hero,.partners-hero,.stories-hero,.contact-hero,.learn-hero,.policy-hero){
  --motion-x:0px;
  --motion-y:0px;
  --motion-primary:37,99,235;
  --motion-secondary:34,197,94;
  position:relative;
  isolation:isolate;
}
.technology-hero{--motion-primary:56,189,248;--motion-secondary:34,197,94;}
:is(.hero,.about-hero,.technology-hero,.offer-hero,.partners-hero,.stories-hero,.contact-hero,.learn-hero,.policy-hero) > .container{
  position:relative;
  z-index:3;
}
.hero-motion{
  --motion-primary:37,99,235;
  --motion-secondary:34,197,94;
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  transform:translate3d(var(--motion-x),var(--motion-y),0) scale(1.035);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.motion-paused .hero-motion *{animation-play-state:paused !important;}
.motion-orbit{position:absolute;border:1px solid rgba(var(--motion-primary),.13);border-radius:50%;}
.motion-orbit::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:rgb(var(--motion-secondary));box-shadow:0 0 0 7px rgba(var(--motion-secondary),.09),0 0 22px rgba(var(--motion-secondary),.42);}
.motion-orbit--one{width:330px;height:330px;right:5%;top:-125px;animation:motionRotate 22s linear infinite;}
.motion-orbit--one::after{left:15%;bottom:9%;}
.motion-orbit--two{width:190px;height:190px;left:4%;bottom:-80px;animation:motionRotateReverse 17s linear infinite;}
.motion-orbit--two::after{right:5%;top:32%;}
.motion-orbit--three{width:520px;height:520px;right:27%;bottom:-440px;border-color:rgba(var(--motion-secondary),.1);animation:motionBreathe 9s ease-in-out infinite;}
.motion-node{position:absolute;width:7px;height:7px;border-radius:50%;background:rgba(var(--motion-primary),.68);box-shadow:0 0 0 6px rgba(var(--motion-primary),.06);animation:motionPulse 3.6s ease-in-out infinite;}
.motion-node::after{content:"";position:absolute;left:50%;top:50%;width:clamp(85px,12vw,190px);height:1px;background:linear-gradient(90deg,rgba(var(--motion-primary),.2),transparent);transform:rotate(var(--line-angle,20deg));transform-origin:left;}
.motion-node--1{left:8%;top:24%;--line-angle:18deg}.motion-node--2{left:25%;top:14%;--line-angle:48deg;animation-delay:-1s}.motion-node--3{left:44%;top:28%;--line-angle:-16deg;animation-delay:-2.1s}.motion-node--4{right:31%;top:12%;--line-angle:75deg;animation-delay:-.4s}.motion-node--5{right:12%;top:38%;--line-angle:150deg;animation-delay:-2.7s}.motion-node--6{left:16%;bottom:19%;--line-angle:-35deg;animation-delay:-1.6s}.motion-node--7{right:38%;bottom:12%;--line-angle:205deg;animation-delay:-3s}
.motion-particle{position:absolute;width:6px;height:9px;border-radius:60% 60% 60% 0;background:rgba(var(--motion-primary),.25);transform:rotate(-45deg);animation:motionDrift 10s ease-in-out infinite;}
.motion-particle:nth-of-type(3n){width:8px;height:12px;background:rgba(var(--motion-secondary),.3);}
.motion-particle--1{left:6%;top:68%;animation-delay:-2s}.motion-particle--2{left:13%;top:38%;animation-delay:-7s}.motion-particle--3{left:28%;top:80%;animation-delay:-4s}.motion-particle--4{left:37%;top:9%;animation-delay:-1s}.motion-particle--5{left:48%;top:66%;animation-delay:-8s}.motion-particle--6{left:57%;top:20%;animation-delay:-3s}.motion-particle--7{left:65%;top:78%;animation-delay:-6s}.motion-particle--8{left:72%;top:44%;animation-delay:-.5s}.motion-particle--9{left:83%;top:17%;animation-delay:-5s}.motion-particle--10{left:91%;top:69%;animation-delay:-9s}.motion-particle--11{left:34%;top:46%;animation-delay:-2.5s}.motion-particle--12{left:77%;top:88%;animation-delay:-6.5s}
.motion-symbol{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(var(--motion-primary),.12);border-radius:14px;color:rgba(var(--motion-primary),.25);background:rgba(255,255,255,.26);box-shadow:0 12px 30px rgba(15,23,42,.04);backdrop-filter:blur(4px);font:600 18px/1 Manrope,sans-serif;animation:motionFloat 7s ease-in-out infinite;}
.motion-symbol--1{left:2.5%;top:13%;transform:rotate(-8deg)}.motion-symbol--2{right:3%;top:58%;animation-delay:-2s;transform:rotate(8deg)}.motion-symbol--3{left:47%;bottom:6%;animation-delay:-4s;transform:rotate(-5deg)}.motion-symbol--4{right:24%;top:7%;animation-delay:-5.5s;transform:rotate(5deg)}
.motion-symbol::before{content:"•"}
.motion-scan{position:absolute;left:-25%;top:0;width:18%;height:100%;opacity:.42;background:linear-gradient(90deg,transparent,rgba(var(--motion-primary),.08),transparent);transform:skewX(-18deg);animation:motionScan 11s ease-in-out infinite;}

/* Large sanitation illustration, deliberately kept behind the hero content. */
.wash-cycle{position:absolute;z-index:0;right:37%;bottom:5%;width:285px;height:230px;opacity:.68;scale:1.12;transform-origin:right bottom;pointer-events:none;filter:drop-shadow(0 18px 28px rgba(37,99,235,.14));animation:washSceneFloat 8s ease-in-out infinite;}
.wash-cycle::before{display:none;}
.wash-label{display:none;position:absolute;z-index:3;left:17px;top:15px;flex-direction:column;gap:2px;}
.wash-label strong{color:#0f172a;font:800 12px/1.2 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.08em;}
.wash-label span{color:rgb(var(--motion-primary));font:700 8px/1.2 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;}
.wash-faucet{position:absolute;left:56%;top:18px;width:86px;height:61px;transform:translateX(-50%);}
.wash-faucet::before{content:"";position:absolute;left:0;top:0;width:54px;height:20px;border:7px solid rgb(var(--motion-primary));border-right:0;border-bottom:0;border-radius:20px 0 0 0;}
.wash-faucet::after{content:"";position:absolute;right:20px;top:0;width:7px;height:48px;border-radius:4px;background:rgb(var(--motion-primary));}
.wash-faucet span{position:absolute;right:5px;top:42px;width:36px;height:8px;border-radius:6px;background:rgb(var(--motion-primary));}
.wash-faucet i{position:absolute;left:19px;top:-12px;width:31px;height:5px;border-radius:5px;background:rgb(var(--motion-secondary));}
.wash-faucet i::after{content:"";position:absolute;left:13px;top:-8px;width:5px;height:18px;border-radius:5px;background:rgb(var(--motion-secondary));}
.wash-water{position:absolute;z-index:2;left:56%;top:66px;display:flex;gap:6px;transform:translateX(-12px);}
.wash-water i{display:block;width:5px;height:65px;border-radius:0 0 50% 50%;background:linear-gradient(to bottom,#38bdf8,rgba(37,99,235,.08));box-shadow:0 0 12px rgba(56,189,248,.5);transform-origin:top;animation:runningWater 1.35s ease-in-out infinite;}
.wash-water i:nth-child(2){height:78px;animation-delay:-.4s}.wash-water i:nth-child(3){height:57px;animation-delay:-.8s}
.wash-hand{position:absolute;z-index:3;top:112px;width:100px;height:100px;color:rgb(var(--motion-primary));stroke-width:2.15;filter:drop-shadow(0 5px 8px rgba(var(--motion-primary),.18));animation:washHands 2.8s ease-in-out infinite;}
.wash-hand--left{left:42px;transform:rotate(72deg)}
.wash-hand--right{right:40px;transform:scaleX(-1) rotate(72deg);animation-delay:-1.4s}
.wash-clean{position:absolute;z-index:4;right:27px;top:72px;width:34px;height:34px;color:rgb(var(--motion-secondary));filter:drop-shadow(0 0 6px rgba(var(--motion-secondary),.35));animation:cleanSpark 2.4s ease-in-out infinite;}
.wash-bubbles i{position:absolute;z-index:4;width:14px;height:14px;border:2px solid rgba(var(--motion-primary),.8);border-radius:50%;background:rgba(255,255,255,.65);animation:soapBubble 4.5s ease-in infinite;}
.wash-bubbles i:nth-child(1){left:75px;bottom:22px}.wash-bubbles i:nth-child(2){left:103px;bottom:7px;width:8px;height:8px;animation-delay:-1s}.wash-bubbles i:nth-child(3){right:72px;bottom:25px;width:17px;height:17px;animation-delay:-2.6s}.wash-bubbles i:nth-child(4){right:94px;bottom:2px;width:7px;height:7px;animation-delay:-3.4s}.wash-bubbles i:nth-child(5){left:121px;bottom:34px;width:10px;height:10px;animation-delay:-1.8s}.wash-bubbles i:nth-child(6){right:51px;bottom:11px;width:6px;height:6px;animation-delay:-4s}
.wash-basin{position:absolute;z-index:1;left:50%;bottom:13px;width:216px;height:56px;border:5px solid rgba(var(--motion-primary),.48);border-top:0;border-radius:0 0 90px 90px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(186,230,253,.32),rgba(219,234,254,.68));}
.hero-motion--telemetry .wash-cycle{display:none;}

/* Each header uses symbols and movement that echo its content. */
.hero-motion--sanitation .motion-symbol::before{content:"◜";color:rgb(var(--motion-primary));transform:rotate(45deg)}
.hero-motion--sanitation .motion-particle{background:rgba(var(--motion-primary),.3)}
.hero-motion--community .wash-cycle{display:none}.hero-motion--community .motion-symbol::before{content:"⌖"}.hero-motion--community .motion-particle{width:6px;height:6px;border-radius:50%;transform:none;background:rgba(var(--motion-primary),.32)}.hero-motion--community .motion-orbit{border-style:dashed}.hero-motion--community .motion-node::after{display:none}.hero-motion--community{--motion-primary:37,99,235;--motion-secondary:16,185,129}
.city-route-map{position:absolute;z-index:-1;inset:-4%;width:108%;height:108%;overflow:visible;opacity:.48;filter:drop-shadow(0 0 7px rgba(37,99,235,.14))}
.city-route{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:9 14;animation:cityRouteTravel 8s linear infinite}.city-route--blue{stroke:rgba(37,99,235,.48)}.city-route--green{stroke:rgba(34,197,94,.42);animation-duration:10s;animation-direction:reverse}.city-route--soft{stroke-width:1;opacity:.48;animation-duration:13s}
.city-route-stops circle{fill:#fff;stroke:#2563eb;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:cityStopPulse 3s ease-out infinite}.city-route-stops circle:nth-child(even){stroke:#22c55e;animation-delay:-1.5s}.city-route-stops circle:nth-child(3n){animation-delay:-2.2s}
.city-route-packet{filter:drop-shadow(0 0 6px currentColor)}.city-route-packet--blue{fill:#3b82f6;color:#3b82f6}.city-route-packet--green{fill:#22c55e;color:#22c55e}
.hero-motion--telemetry{--motion-primary:56,189,248;--motion-secondary:34,197,94;mix-blend-mode:screen}.hero-motion--telemetry .motion-symbol::before{content:"⌁"}.hero-motion--telemetry .motion-node::after{background:linear-gradient(90deg,rgba(var(--motion-primary),.42),transparent)}
.hero-motion--platform .motion-symbol::before{content:"◇"}.hero-motion--platform .motion-orbit{border-style:dashed}
.hero-motion--partners .motion-symbol::before{content:"✓"}.hero-motion--partners .motion-node{box-shadow:0 0 0 8px rgba(var(--motion-secondary),.08)}
.hero-motion--stories .motion-symbol::before{content:'“';font:800 25px/1 Georgia,serif}.hero-motion--stories .motion-symbol{border-radius:50% 50% 50% 12px}
.hero-motion--contact .wash-cycle{display:none}.hero-motion--contact .motion-symbol::before{content:"✉";font-size:15px}.hero-motion--contact .motion-orbit{border-color:rgba(var(--motion-primary),.09)}.hero-motion--contact .motion-node::after{display:none}.hero-motion--contact .motion-particle{width:5px;height:5px;border-radius:50%;transform:none}
.contact-comms{position:absolute;z-index:-1;inset:0;opacity:.58;pointer-events:none}.contact-comms-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.contact-comms-routes path{fill:none;stroke:rgba(37,99,235,.3);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:7 13;animation:contactRouteFlow 8s linear infinite}.contact-comms-routes path:nth-child(2){stroke:rgba(34,197,94,.3);animation-direction:reverse;animation-duration:10s}.contact-comms-routes path:nth-child(3){opacity:.55;animation-duration:12s}
.contact-signal{filter:drop-shadow(0 0 7px currentColor)}.contact-signal--blue{fill:#3b82f6;color:#3b82f6}.contact-signal--green{fill:#22c55e;color:#22c55e}
.contact-message{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;width:76px;height:46px;border:1px solid rgba(37,99,235,.3);border-radius:18px 18px 18px 5px;background:rgba(255,255,255,.48);box-shadow:0 12px 30px rgba(37,99,235,.08);backdrop-filter:blur(5px);animation:contactMessageFloat 6s ease-in-out infinite}.contact-message::after{content:'';position:absolute;left:4px;bottom:-6px;border:7px solid transparent;border-top-color:rgba(255,255,255,.55);rotate:18deg}.contact-message i{width:6px;height:6px;border-radius:50%;background:#3b82f6;animation:contactTyping 1.35s ease-in-out infinite}.contact-message i:nth-child(2){animation-delay:.18s}.contact-message i:nth-child(3){animation-delay:.36s}.contact-message--one{left:5%;top:20%}.contact-message--two{right:7%;top:24%;animation-delay:-2s;scale:.82}.contact-message--three{right:18%;bottom:11%;animation-delay:-4s;scale:.68}
.contact-envelope{position:absolute;left:22%;bottom:13%;width:64px;height:45px;border:2px solid rgba(34,197,94,.45);border-radius:9px;background:rgba(255,255,255,.32);animation:contactEnvelope 6.5s ease-in-out infinite}.contact-envelope::before,.contact-envelope::after{content:'';position:absolute;top:7px;width:39px;height:2px;background:rgba(34,197,94,.48)}.contact-envelope::before{left:0;rotate:31deg}.contact-envelope::after{right:0;rotate:-31deg}.contact-envelope i{position:absolute;right:-5px;top:-5px;width:10px;height:10px;border:2px solid white;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12);animation:contactHubPulse 2s ease-out infinite}
.contact-team-hub{position:absolute;right:27%;top:43%;display:grid;place-items:center;width:112px;height:112px;border:1px solid rgba(37,99,235,.22);border-radius:50%;background:rgba(255,255,255,.3);box-shadow:0 0 0 16px rgba(37,99,235,.035);backdrop-filter:blur(4px);animation:contactHubBreathe 4s ease-in-out infinite}.contact-team-hub b{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:white;background:#2563eb;font:800 16px Manrope,sans-serif;box-shadow:0 9px 22px rgba(37,99,235,.25)}.contact-team-hub>i{position:absolute;width:17px;height:17px;border:3px solid white;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 2px rgba(37,99,235,.22)}.contact-team-hub>i:nth-of-type(1){left:-6px;top:19px}.contact-team-hub>i:nth-of-type(2){right:-4px;top:28px;background:#22c55e}.contact-team-hub>i:nth-of-type(3){left:45px;bottom:-8px;background:#38bdf8}.contact-team-hub span{position:absolute;inset:-12px;border:1px dashed rgba(34,197,94,.27);border-radius:50%;animation:motionRotate 18s linear infinite}
.hero-motion--knowledge .motion-symbol::before{content:"≡"}.hero-motion--knowledge .motion-symbol{border-radius:7px 14px 14px 7px}
.hero-motion--privacy .motion-symbol::before{content:"✓"}.hero-motion--privacy .motion-symbol{border-radius:50% 50% 45% 45%}.hero-motion--privacy .motion-scan{animation-duration:15s}

.motion-ready > .container > *{animation:heroContentIn .85s cubic-bezier(.16,1,.3,1) both;}
.motion-ready > .container > *:nth-child(2){animation-delay:.12s;}
.motion-ready :is(.hero-content,.about-hero-copy,.technology-copy,.offer-hero-copy,.partners-copy,.stories-copy,.contact-hero-copy,.learn-hero-copy,.policy-hero-inner) > *{animation:heroItemIn .7s cubic-bezier(.16,1,.3,1) both;}
.motion-ready :is(.hero-content,.about-hero-copy,.technology-copy,.offer-hero-copy,.partners-copy,.stories-copy,.contact-hero-copy,.learn-hero-copy,.policy-hero-inner) > *:nth-child(2){animation-delay:.08s}.motion-ready :is(.hero-content,.about-hero-copy,.technology-copy,.offer-hero-copy,.partners-copy,.stories-copy,.contact-hero-copy,.learn-hero-copy,.policy-hero-inner) > *:nth-child(3){animation-delay:.16s}.motion-ready :is(.hero-content,.about-hero-copy,.technology-copy,.offer-hero-copy,.partners-copy,.stories-copy,.contact-hero-copy,.learn-hero-copy,.policy-hero-inner) > *:nth-child(4){animation-delay:.24s}.motion-ready :is(.hero-content,.about-hero-copy,.technology-copy,.offer-hero-copy,.partners-copy,.stories-copy,.contact-hero-copy,.learn-hero-copy,.policy-hero-inner) > *:nth-child(5){animation-delay:.32s}
.motion-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms)}
.motion-reveal.is-visible{opacity:1;transform:none}
:is(.card,.testimonial-card,.pathway-card,.resource-card,.partner-benefits article,.audience-grid article){transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
@media (hover:hover){:is(.card,.testimonial-card,.pathway-card,.resource-card,.partner-benefits article,.audience-grid article):hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(15,23,42,.09)}}
@keyframes motionRotate{to{transform:rotate(360deg)}}
@keyframes motionRotateReverse{to{transform:rotate(-360deg)}}
@keyframes motionBreathe{0%,100%{transform:scale(.96);opacity:.55}50%{transform:scale(1.05);opacity:1}}
@keyframes motionPulse{0%,100%{opacity:.38;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes motionDrift{0%,100%{translate:0 0;opacity:.3}40%{translate:14px -24px;opacity:.85}70%{translate:-7px -11px;opacity:.5}}
@keyframes motionFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes motionScan{0%{translate:0 0;opacity:0}15%,55%{opacity:.42}70%,100%{translate:760% 0;opacity:0}}
@keyframes cityRouteTravel{to{stroke-dashoffset:-230}}
@keyframes cityStopPulse{0%,100%{scale:.75;opacity:.45}50%{scale:1.55;opacity:1;filter:drop-shadow(0 0 5px currentColor)}}
@keyframes contactRouteFlow{to{stroke-dashoffset:-210}}
@keyframes contactMessageFloat{0%,100%{translate:0 0;rotate:-2deg}50%{translate:8px -13px;rotate:2deg}}
@keyframes contactTyping{0%,60%,100%{scale:.65;opacity:.35}30%{scale:1.2;opacity:1}}
@keyframes contactEnvelope{0%,100%{translate:0 0;rotate:-3deg}50%{translate:10px -10px;rotate:2deg}}
@keyframes contactHubPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}100%{box-shadow:0 0 0 13px rgba(34,197,94,0)}}
@keyframes contactHubBreathe{0%,100%{scale:.96;box-shadow:0 0 0 13px rgba(37,99,235,.03)}50%{scale:1.05;box-shadow:0 0 0 24px rgba(37,99,235,.055)}}
@keyframes washSceneFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes runningWater{0%,100%{scale:1 1;opacity:.35}50%{scale:1 1.18;opacity:1}}
@keyframes washHands{0%,100%{translate:0 0}35%{translate:16px -4px}70%{translate:5px 3px}}
@keyframes cleanSpark{0%,100%{opacity:.25;scale:.65;rotate:-12deg}50%{opacity:1;scale:1.15;rotate:10deg}}
@keyframes soapBubble{0%{translate:0 0;opacity:0;scale:.6}18%{opacity:.85}80%{opacity:.35}100%{translate:5px -85px;opacity:0;scale:1.2}}
@keyframes heroContentIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes heroItemIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.wash-cycle{right:1%;bottom:2%;scale:1.15;opacity:.38;transform-origin:right bottom}}
@media(max-width:760px){.hero-motion{opacity:.82}.motion-symbol--3,.motion-symbol--4,.motion-orbit--three{display:none}.motion-orbit--one{right:-145px}.motion-node::after{width:70px}.motion-symbol{width:35px;height:35px}.wash-cycle{right:-5%;bottom:1%;scale:.88;opacity:.42;transform-origin:right bottom}.city-route-map{opacity:.3;width:145%;right:-25%;left:auto}.contact-comms{opacity:.34}.contact-team-hub{right:-15px;top:50%;scale:.72}.contact-message--two,.contact-message--three{display:none}.contact-envelope{left:auto;right:24px;bottom:9%;scale:.7}}
@media(prefers-reduced-motion:reduce){.hero-motion{transform:none;transition:none}.hero-motion *,.motion-ready > .container > *,.motion-ready :is(.hero-content,.about-hero-copy,.technology-copy,.offer-hero-copy,.partners-copy,.stories-copy,.contact-hero-copy,.learn-hero-copy,.policy-hero-inner) > *{animation:none !important}.city-route-packet,.contact-signal{display:none}.motion-reveal{opacity:1;transform:none;transition:none}}
