/* The Spotless Society — page styles. Design tokens and fonts are in ds.css. */
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: #c62f80; }
a:hover { color: #14203f; }
.leaflet-container { border-radius: 18px; }
.ss-offer.ss-scrub > div > div{ --p:0; opacity:var(--p); translate:0 calc((1 - var(--p)) * 32px); scale:calc(.94 + var(--p) * .06); filter:blur(calc((1 - var(--p)) * 3px)); transition:transform .2s ease-out, box-shadow .2s ease-out !important; will-change:opacity,translate }
.ss-conveyor{ background-size:9.8995px 9.8995px !important; background-repeat:repeat !important }
.ss-offer .ss-ico{ transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease }
.ss-offer > div > div:hover .ss-ico{ transform:rotate(-7deg) scale(1.08); box-shadow:4px 4px 0 #14203f }
@media (prefers-reduced-motion: reduce){ .ss-offer.ss-scrub > div > div{ opacity:1; translate:none; scale:none; filter:none } .ss-offer .ss-ico{ transition:none } }
.ss-type.ss-typing .ss-ch{ visibility:hidden; position:relative }
.ss-type.ss-typing .ss-ch.on{ visibility:visible }
.ss-type .ss-ch.cur::after, .ss-type .ss-ch.cur0::before{ content:""; visibility:visible; position:absolute; top:.04em; width:.09em; height:.86em; background:#3abde0; animation:ss-blink 1s steps(1) infinite }
.ss-type .ss-ch.cur::after{ right:-.1em }
.ss-type .ss-ch.cur0::before{ left:0 }
@keyframes ss-blink{ 50%{ opacity:0 } }
.ss-steps.ss-armed > div > div{ opacity:0 }
.ss-steps.ss-go > div > div{ animation:ss-thump .6s cubic-bezier(.25,.1,.3,1) both }
.ss-steps.ss-go > div:nth-child(2) > div{ animation-delay:.38s }
.ss-steps.ss-go > div:nth-child(3) > div{ animation-delay:.76s }
@keyframes ss-thump{
  0%{ opacity:0; scale:1.35; translate:0 -34px; rotate:-3deg }
  55%{ opacity:1; scale:.95; translate:0 3px; rotate:.5deg }
  75%{ scale:1.025; translate:0 -2px; rotate:0deg }
  100%{ opacity:1; scale:1; translate:0 0; rotate:0deg }
}
.ss-steps.ss-go{ animation:ss-thud .76s linear .3s 3 }
@keyframes ss-thud{ 0%,100%{ translate:0 0 } 8%{ translate:0 3px } 16%{ translate:0 -1px } 24%{ translate:0 0 } }
@media (prefers-reduced-motion: reduce){ .ss-steps.ss-armed > div > div{ opacity:1 } .ss-steps.ss-go, .ss-steps.ss-go > div > div{ animation:none } }
.ss-poster.ss-armed .ss-blob, .ss-poster.ss-armed .ss-j-eyebrow, .ss-poster.ss-armed .ss-cta, .ss-poster.ss-armed .ss-blob > *{ opacity:0 }
.ss-poster.ss-go .ss-j-eyebrow{ animation:ss-drop .5s cubic-bezier(.2,.8,.3,1) both }
.ss-poster.ss-go .ss-blob{ animation:ss-pop .75s cubic-bezier(.3,1.5,.5,1) .15s both, ss-wobble 9s ease-in-out 1.2s infinite }
.ss-poster.ss-go .ss-blob > *{ animation:ss-rise .5s cubic-bezier(.2,.8,.3,1) both }
.ss-poster.ss-go .ss-blob > h2{ animation-delay:.55s }
.ss-poster.ss-go .ss-blob > p:first-of-type{ animation-delay:.7s }
.ss-poster.ss-go .ss-blob > ul{ animation-delay:.8s }
.ss-poster.ss-go .ss-blob > p:last-of-type{ animation-delay:1.3s }
.ss-poster.ss-go .ss-blob li{ animation:ss-tick .45s cubic-bezier(.3,1.4,.5,1) both }
.ss-poster.ss-go .ss-blob li:nth-child(1){ animation-delay:.85s } .ss-poster.ss-go .ss-blob li:nth-child(2){ animation-delay:.97s }
.ss-poster.ss-go .ss-blob li:nth-child(3){ animation-delay:1.09s } .ss-poster.ss-go .ss-blob li:nth-child(4){ animation-delay:1.21s }
.ss-poster.ss-go .ss-cta{ animation:ss-rise .5s ease-out 1.45s both, ss-nudge .6s ease-in-out 2s 2 }
@keyframes ss-drop{ from{ opacity:0; translate:0 -14px } to{ opacity:1; translate:0 0 } }
@keyframes ss-pop{ 0%{ opacity:0; scale:.55; rotate:-6deg } 60%{ opacity:1 } 100%{ opacity:1; scale:1; rotate:0deg } }
@keyframes ss-rise{ from{ opacity:0; translate:0 12px } to{ opacity:1; translate:0 0 } }
@keyframes ss-tick{ from{ opacity:0; translate:-14px 0; scale:.9 } to{ opacity:1; translate:0 0; scale:1 } }
@keyframes ss-nudge{ 0%,100%{ rotate:0deg } 25%{ rotate:-2deg } 75%{ rotate:2deg } }
@keyframes ss-wobble{
  0%,100%{ border-radius:46% 44% 42% 46% / 40% 42% 46% 44% }
  33%{ border-radius:42% 48% 45% 43% / 44% 39% 48% 42% }
  66%{ border-radius:48% 42% 46% 44% / 41% 46% 42% 47% }
}
@media (prefers-reduced-motion: reduce){ .ss-poster.ss-armed .ss-blob, .ss-poster.ss-armed .ss-j-eyebrow, .ss-poster.ss-armed .ss-cta, .ss-poster.ss-armed .ss-blob > *{ opacity:1; animation:none !important } }
.ss-ct-ico::after{ content:""; position:absolute; inset:-2px; border-radius:999px; border:3px solid #e5479b; opacity:0; pointer-events:none }
.ss-ct-list.ss-pulse .ss-contact-tile{ animation:ss-tile-pulse .7s cubic-bezier(.3,1.4,.5,1) both }
.ss-ct-list.ss-pulse .ss-ct-ico{ animation:ss-ico-pulse .7s ease-out both }
.ss-ct-list.ss-pulse .ss-ct-ico::after{ animation:ss-ring 1s ease-out both }
.ss-ct-list.ss-pulse .ss-contact-tile:nth-child(2), .ss-ct-list.ss-pulse .ss-contact-tile:nth-child(2) .ss-ct-ico, .ss-ct-list.ss-pulse .ss-contact-tile:nth-child(2) .ss-ct-ico::after{ animation-delay:.55s }
.ss-ct-list.ss-pulse .ss-contact-tile:nth-child(2) .ss-ct-ico::after{ border-color:#3abde0 }
@keyframes ss-tile-pulse{ 0%{ scale:1 } 35%{ scale:1.045 } 100%{ scale:1 } }
@keyframes ss-ico-pulse{ 0%{ scale:1 } 30%{ scale:1.18; rotate:-8deg } 60%{ rotate:6deg } 100%{ scale:1; rotate:0deg } }
@keyframes ss-ring{ 0%{ opacity:.9; scale:1 } 100%{ opacity:0; scale:1.9 } }
@media (prefers-reduced-motion: reduce){ .ss-ct-list.ss-pulse .ss-contact-tile, .ss-ct-list.ss-pulse .ss-ct-ico, .ss-ct-list.ss-pulse .ss-ct-ico::after{ animation:none } }
.ss-gleam{ position:relative !important; overflow:visible !important }
.ss-star{ position:absolute; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px; pointer-events:none; z-index:3; opacity:0; transition:opacity .25s ease-out; will-change:transform,opacity }
.ss-star svg{ display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(58,189,224,.8)) }
.ss-star-logo{ position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; pointer-events:none; z-index:3; opacity:0; transform:scale(.2) rotate(0deg); animation:ss-twinkle .9s ease-in-out forwards }
.ss-star-logo svg{ display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 1px #3abde0) drop-shadow(0 0 3px #3abde0) drop-shadow(0 0 8px rgba(142,123,192,.9)) }
@keyframes ss-twinkle{ 0%{ opacity:0; transform:scale(.2) rotate(0deg) } 45%{ opacity:1; transform:scale(1.15) rotate(45deg) } 60%{ opacity:1; transform:scale(.85) rotate(60deg) } 100%{ opacity:0; transform:scale(.1) rotate(110deg) } }
@media (prefers-reduced-motion: reduce){ .ss-star, .ss-star-logo{ display:none } }

.ss-form-wrap{ margin-right:clamp(6px,2vw,28px) }
.ss-contact-tile:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #14203f !important; color:#14203f }
.ss-contact-tile:focus-visible{ outline:3px solid #3abde0; outline-offset:3px }
@media (max-width:760px){
 .ss-sticky header{ gap:10px 12px !important; padding:10px 16px 8px !important }
 .ss-sticky header > a img{ width:92px !important }
 .ss-sticky header > button{ margin-left:auto !important }
 .ss-sticky header > nav{ order:3; width:100%; margin-left:0 !important; flex-wrap:nowrap !important; overflow-x:auto; gap:18px !important; padding:4px 0 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch }
 .ss-sticky header > nav::-webkit-scrollbar{ display:none }
 .ss-sticky header > nav a{ white-space:nowrap; flex:none }
}
@media (max-width:760px){
 .ss-form-wrap{ margin-right:6px }
 .ss-ct-arrow{ display:none !important }
 .ss-contact-tile{ padding:16px 18px !important; gap:14px !important }
 #j-exp, #q-notes{ min-height:100px !important }
 .ss-join .ss-stripes{ display:none }
 .ss-join .ss-blob{ border-radius:28px !important; padding:32px 22px !important; box-shadow:6px 6px 0 0 #14203f !important; border:2px solid #14203f }
 .ss-join .ss-blob ul{ width:auto !important }
 .ss-join .ss-blob li{ justify-content:flex-start !important }
 .ss-join .ss-cta{ max-width:none !important; margin-top:20px !important; text-align:center }
 .ss-join{ padding-bottom:72px !important }
}

/* ---- Static build: behaviour that React used to provide ---------------- */
[hidden] { display: none !important; }
:root { --sticky-h: 100px; }
[id] { scroll-margin-top: calc(var(--sticky-h) + 8px); }

/* Design-system buttons: hover and press (inline styles hold the resting state) */
.ds-btn--primary:hover { background: var(--pink-600) !important; }
.ds-btn--secondary:hover { background: var(--cream-100) !important; }
.ds-btn--cyan:hover { background: var(--cyan-300) !important; }
.ds-btn--ink:hover { background: var(--ink-900) !important; }
.ds-btn:not(.ds-btn--ghost):active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--ink-900) !important; }
.ds-btn:focus-visible, .ds-tab:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 3px; }

/* Inputs, selects, textareas */
.ds-control:focus { border-color: var(--ink-900) !important; box-shadow: var(--shadow-stamp-sm) !important; }
.ds-control:user-invalid { border-color: var(--red-500) !important; }

/* Checkboxes */
.ds-check-box { background: var(--white); }
.ds-check input:checked + .ds-check-box { background: var(--pink-500); }
.ds-check-mark { display: none; }
.ds-check input:checked + .ds-check-box .ds-check-mark { display: block; }
.ds-check input:focus-visible + .ds-check-box { outline: 3px solid var(--cyan-500); outline-offset: 2px; }

/* "Who we clean for" tabs */
.ds-tab { position: relative; top: var(--border); padding: var(--space-3) var(--space-5); font: var(--weight-bold) var(--body-sm)/1 var(--font-body); letter-spacing: .02em; color: var(--text-muted); background: transparent; border: var(--border) solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; }
.ds-tab[aria-selected="true"] { color: var(--ink-900); background: var(--white); border-color: var(--ink-900); border-bottom-color: var(--white); }

/* "What we offer" cards lift on hover */
.ss-offer > div > div:hover { transform: translate(-2px, -2px) !important; box-shadow: var(--shadow-stamp-lg) !important; }

/* Area tags on the homepage are links to the area pages */
.ss-area-link:hover { background: var(--cream-200) !important; color: var(--ink-900) !important; }
footer a:hover { color: #fff7e3 !important; text-decoration: underline !important; }