/* ===== Nat Kay Cleaning: fresh palette on top of the shared design ===== */
body.clean {
  --ink: #0B2233;
  --ink-2: #1E3A4C;
  --muted: #557080;
  --paper: #F6FAFB;
  --cream: #EAF4F5;
  --line: rgba(11, 34, 51, .10);
  --red: #0E9AA7;        /* main action color: fresh teal */
  --gold: #F2C14E;
  --blue: #2F6FD6;
}
.clean .btn--primary { box-shadow: 0 12px 28px -12px rgba(14, 154, 167, .75); }
.clean .btn--primary:hover { box-shadow: 0 18px 34px -14px rgba(14, 154, 167, .9); }
.clean .btn--small:hover { background: var(--red); }
.clean .blob--a { background: #C9EEF0; }
.clean .blob--b { background: #DDEBFB; }
.clean .blob--c { background: #FBF0C9; }
.clean .stroke-word { color: var(--red); }
.clean .stroke-path { stroke: #9BE3C6; }
.clean .marquee i { color: var(--red); }
.clean .footer { background: #061521; }
.clean .mobile-bar__est { background: var(--red); }
.clean .dots button.is-active { background: var(--red); }
.clean .brush::before { filter: hue-rotate(150deg) saturate(.8); }
.sparkle-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E1F6F7; color: var(--red); font-size: 1.1rem; }
.footer__cross { display: inline-block; margin-top: 16px; color: #9BE3C6; font-weight: 600; font-size: .92rem; }

/* Intro: a squeegee wipes the page clean */
.intro__squeegee { position: absolute; top: 50%; left: -120px; height: 70vh; transform: translateY(-50%); animation: introRoll 1.25s .55s cubic-bezier(.77, 0, .18, 1) forwards; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); }
.intro__squeegee svg { height: 100%; width: auto; display: block; }
.clean .intro__brand em { color: #9BE3C6; }

/* Bubbles */
.bubble-layer { position: absolute; inset: 0; overflow: hidden; }
.bubble {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 12%, rgba(255, 255, 255, .15) 22%, rgba(120, 220, 230, .12) 55%, rgba(170, 140, 255, .25) 78%, rgba(255, 255, 255, .6) 96%);
  box-shadow: inset 0 0 6px rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(11, 34, 51, .15);
  animation: rise var(--d, 3.2s) cubic-bezier(.3, .6, .4, 1) forwards;
}
@keyframes rise {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; }
  12% { opacity: 1; transform: translate(0, -10px) scale(1); }
  100% { transform: translate(var(--dx, 20px), var(--dy, -220px)) scale(1.05); opacity: 0; }
}
.bubble.pop { animation: pop .35s ease-out forwards; }
@keyframes pop { to { transform: scale(1.6); opacity: 0; } }
.bubbles-page { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }

/* Wipe the window */
.wipe { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.wipe__stage { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 857 / 1000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); background: #ccc; max-height: 640px; margin-inline: auto; width: 100%; }
.wipe__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wipe__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.wipe__stage canvas:active { cursor: grabbing; }
.wipe__hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 18px; border-radius: 999px; background: rgba(11, 34, 51, .78); color: #fff; font-weight: 700; display: flex; align-items: center; gap: 8px; pointer-events: none; transition: opacity .4s; backdrop-filter: blur(6px); }
.wipe__hand { display: inline-block; animation: swipe 1.6s ease-in-out infinite; }
@keyframes swipe { 0%, 100% { transform: translateX(-10px) rotate(-8deg); } 50% { transform: translateX(10px) rotate(8deg); } }
.wipe__hint.is-gone { opacity: 0; }
.wipe__done { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); animation: doneIn .6s cubic-bezier(.2, 1.4, .4, 1); white-space: nowrap; }
.wipe__done span { color: var(--red); }
.wipe__done[hidden] { display: none; }
@keyframes doneIn { from { transform: translate(-50%, 20px) scale(.8); opacity: 0; } }
.wipe__meter { margin: 30px 0 22px; max-width: 360px; }
.wipe__bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.wipe__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #3FD0D8, #9BE3C6, #F2C14E); transition: width .25s; }
.wipe__meter p { margin-top: 10px; color: rgba(255, 255, 255, .7); }
.wipe__meter b { font-family: var(--serif); font-size: 1.6rem; color: #fff; margin-right: 4px; }
.btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.btn--ghost-light:hover { box-shadow: inset 0 0 0 1px #fff; }
.sparkle { position: absolute; pointer-events: none; color: #fff; font-size: 18px; text-shadow: 0 0 10px rgba(255, 255, 255, .9); animation: twinkle 1.1s ease-out forwards; }
@keyframes twinkle { 0% { transform: scale(0) rotate(0); opacity: 0; } 30% { transform: scale(1.2) rotate(40deg); opacity: 1; } 100% { transform: scale(.4) rotate(90deg); opacity: 0; } }

/* Before / after slider */
.results { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; align-items: start; }
.ba { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 857 / 1144; background: #ddd; box-shadow: 0 30px 60px -35px rgba(11, 34, 51, .5); user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .4); pointer-events: none; }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-weight: 800; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; touch-action: pan-y; }
.ba__tag { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(11, 34, 51, .75); color: #fff; pointer-events: none; }
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; background: var(--red); }
.ba.is-hinting { animation: none; }
.gallery--clean { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
.gallery--clean .gallery__item { grid-row: span 1; }

/* Giving back */
.giving { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.giving__img { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -35px rgba(11, 34, 51, .5); transform: rotate(-2deg); background: #fff; padding: 12px; }
.giving__img img { border-radius: 12px; }

@media (max-width: 1060px) {
  .wipe, .results, .giving { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wipe__stage { max-width: 560px; }
  .giving__img { max-width: 520px; }
}
@media (max-width: 640px) {
  .wipe__stage { aspect-ratio: 4 / 5; border-radius: 22px; }
  .wipe__meter { margin: 22px 0 16px; }
  .results { gap: 18px; }
  .gallery--clean { display: flex; }
  .gallery--clean .gallery__item { height: 420px; }
  .giving__img { transform: none; }
  .intro__squeegee { height: 50vh; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble { display: none; }
}
.giving__img img { width: 100%; height: auto; display: block; }
.wipe { grid-template-areas: "copy stage" "controls stage"; row-gap: 0; align-items: start; }
.wipe__copy { grid-area: copy; align-self: end; }
.wipe__controls { grid-area: controls; }
.wipe__stage { grid-area: stage; align-self: center; }
@media (max-width: 1060px) {
  .wipe { grid-template-areas: "copy" "stage" "controls"; row-gap: 24px; }
  .wipe__meter { margin-top: 0; }
}

/* Before/after tabs + "On the job" gallery */
.ba-wrap { display: grid; gap: 14px; }
.ba-tabs { display: inline-flex; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); justify-self: start; }
.ba-tabs button { border: 0; background: transparent; font: 600 .92rem var(--sans); color: var(--muted); padding: .6em 1.2em; border-radius: 999px; cursor: pointer; transition: .25s; }
.ba-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.ba-tabs button:active { transform: scale(.95); }
.ba img { transition: opacity .35s; }
.ba.is-swapping img { opacity: 0; }
.section__head--sub { margin: 70px 0 22px; }
.sub-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.gallery--job { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 340px; }
.gallery--job .gallery__item { grid-row: span 1; }
@media (max-width: 1060px) {
  .gallery--job { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
}
@media (max-width: 640px) {
  .ba-tabs { display: flex; width: 100%; }
  .ba-tabs button { flex: 1; padding: .75em 0; }
  .gallery--job { display: flex; }
  .gallery--job .gallery__item { height: 420px; }
  .section__head--sub { margin: 50px 0 16px; }
}