html { scroll-behavior: smooth; }
body { overflow-x: clip; }
/* Let the sticky <header> stick relative to the page, not to its wrapper */
#site-header { display: contents; }
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, sans-serif; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Image placeholder shimmer while loading */
.img-shell { background: linear-gradient(110deg, #e2e8f0 8%, #f1f5f9 18%, #e2e8f0 33%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position-x: -200%; } }

/* Ad carousel */
.ad-track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.ad-slide { flex: 0 0 100%; }

/* Anchor offset for sticky header */
.anchor-target { scroll-margin-top: 130px; }

/* Header logo (full logo with slogan bar) - shrinks slightly once the page scrolls */
.site-logo { height: 58px; width: auto; transition: height .25s ease; }
@media (min-width: 1024px) {
  .site-logo { height: 84px; }
  .site-header.scrolled .site-logo { height: 62px; }
}

/* Brand watermarks: faint logo elements (house/cleaner/buildings icon, leaves) behind sections */
.wm { position: relative; isolation: isolate; overflow: hidden; overflow: clip; } /* clip keeps position:sticky working */
.wm::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: url("/img/logo-icon.png") no-repeat center / contain;
  width: min(520px, 75vw); aspect-ratio: 600 / 444; opacity: .05;
  right: -60px; top: 40px;
}
.wm-left::before { right: auto; left: -80px; top: auto; bottom: 30px; }
.wm-leaves::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: url("/img/logo-leaves.png") no-repeat center / contain;
  width: min(260px, 45vw); aspect-ratio: 300 / 149; opacity: .07;
  left: -30px; top: 30px; transform: rotate(-12deg);
}
.wm-dark::before, .wm-dark.wm-leaves::after { opacity: .07; filter: brightness(0) invert(1); }
.wm-dark.wm-leaves::after { filter: none; opacity: .12; }

/* Leaf swoosh section divider (from the logo) */
.brand-divider { height: 56px; background: url("/img/divider-leaves.svg") no-repeat center / min(420px, 80vw) auto; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(6,14,36,.92); display: none; align-items: center; justify-content: center; padding: 1rem; }
.lightbox.open { display: flex; }

/* Form focus */
.input { width: 100%; border-radius: .75rem; border: 1px solid #cbd5e1; background: #fff; padding: .7rem .9rem; font-size: .95rem; color: #0f172a; transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: none; border-color: #1FAE2A; box-shadow: 0 0 0 3px rgba(31,174,42,.25); }
.label { display: block; font-size: .85rem; font-weight: 600; color: #022162; margin-bottom: .35rem; }

/* WhatsApp pulse */
.wa-pulse::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #25D366; animation: pulse 2s infinite; z-index: -1; }
@keyframes pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-pulse::before { animation: none; } }
