/* Sandi's Magic Broom
   Her full-navy logo leads. Colour comes in bold blocks: teal, sunshine, aqua and a tangerine pop (no pink).
   Every colour is a token. Every animation sits inside prefers-reduced-motion: no-preference. */

:root {
  --navy: #142b49;          /* her logo, her favourite colour */
  --navy-deep: #0c1b30;
  --ink: #142b49;
  --ink-soft: #44536b;
  --teal: #0b7a78;          /* white text on teal: 5:1 */
  --teal-bright: #22b3aa;
  --aqua: #a6e4dc;
  --aqua-soft: #e2f6f3;
  --sun: #ffc845;
  --sun-soft: #fff1c7;
  --orange: #ff9147;
  --orange-soft: #ffe3cf;
  --sky: #cfe8fa;
  --cream: #fffaf1;
  --white: #ffffff;
  --radius: 22px;
  --f-head: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-script: "Pacifico", "Brush Script MT", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.075rem/1.65 var(--f-body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--f-head); color: var(--navy); line-height: 1.1; margin: 0 0 0.4em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.3rem); }
h2 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.script { font-family: var(--f-script); font-weight: 400; position: relative; white-space: nowrap; }
.kicker { font: 600 1rem var(--f-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.5em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0.7em 1.5em;
  font: 600 1.15rem/1 var(--f-head); text-decoration: none;
  border-radius: 999px; border: 3px solid var(--navy);
  box-shadow: 0 6px 0 var(--navy);
  cursor: pointer;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--navy); }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 6px 0 var(--navy-deep); }
.btn-navy:active { box-shadow: 0 1px 0 var(--navy-deep); }
.btn-sun { background: var(--sun); color: var(--navy); }
.btn-small { min-height: 46px; padding: 0.45em 1.1em; font-size: 1.05rem; box-shadow: 0 4px 0 var(--navy); }
.btn-wide { width: 100%; }
.spark { position: absolute; pointer-events: none; fill: var(--navy); }

/* ---------- Header ---------- */
.site-header { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  background: linear-gradient(160deg, var(--aqua-soft) 0%, #d8eefb 100%);
  padding: 22px 0 100px;
}
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles i {
  position: absolute; bottom: -60px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / 0.95) 0 12%, rgb(255 255 255 / 0.25) 22%, rgb(166 228 220 / 0.25) 60%, rgb(207 232 250 / 0.55) 100%);
  border: 2px solid rgb(255 255 255 / 0.8);
  opacity: 0.8;
}
.hero-grid { position: relative; display: grid; gap: 10px; align-items: center; }
.logo-stage { position: relative; width: min(100%, 540px); margin: 0 auto; }
.blob {
  position: absolute; inset: 4% 2% 2% 2%;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 58% 42% 52% 48% / 52% 46% 54% 48%;
  box-shadow: 10px 10px 0 var(--teal);
}
.hero-logo { position: relative; width: 84%; margin: 9% auto 7%; }
.sp1 { width: 34px; height: 34px; left: -2%; top: 6%; fill: var(--sun); stroke: var(--navy); stroke-width: 1.2; }
.sp2 { width: 22px; height: 22px; right: 2%; top: 0; fill: var(--teal-bright); }
.sp3 { width: 26px; height: 26px; right: -2%; bottom: 14%; fill: var(--orange); }
.sp4 { width: 16px; height: 16px; left: 10%; bottom: 0; }
.sticker {
  position: absolute; left: -4px; bottom: -8px; margin: 0;
  width: 108px; height: 108px; display: grid; place-items: center; text-align: center;
  background: var(--orange); color: var(--navy); border: 3px solid var(--navy); border-radius: 50%;
  font: 700 0.98rem/1.05 var(--f-head); rotate: -12deg; box-shadow: 4px 4px 0 var(--navy);
}
.sticker span { max-width: 8ch; }
.hero-copy { text-align: center; }
.tagline {
  display: inline-block; margin: 14px 0 14px; padding: 7px 18px;
  font: 600 1rem var(--f-head); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy); background: var(--sun); border: 2px solid var(--navy); border-radius: 999px; rotate: -2deg;
}
.hero h1 .script { display: inline-block; color: var(--teal); font-size: 1.05em; padding-right: 0.06em; }
.underline { position: absolute; left: 2%; bottom: -0.08em; width: 100%; height: 0.24em; fill: var(--orange); }
.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 36ch; margin: 4px auto 0; }
.lead strong { color: var(--navy); }
.cta-row { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin: 26px auto 18px; }
.serving { display: inline-flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink-soft); text-align: left; }
.serving svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--teal); }
.wave { position: absolute; left: 0; width: 100%; pointer-events: none; }
.hero-wave { bottom: -1px; height: 70px; fill: var(--sun); }

/* ---------- Ticker ---------- */
.ticker { background: var(--sun); overflow: hidden; border-bottom: 3px solid var(--navy); padding: 10px 0 14px; }
.ticker-track { display: flex; align-items: center; gap: 22px; width: max-content; }
.ticker span { font: 600 1.25rem var(--f-head); color: var(--navy); white-space: nowrap; }
.ticker svg { width: 18px; height: 18px; fill: var(--teal); flex: none; }

/* ---------- Trust stickers ---------- */
.trust { padding: 56px 0 30px; }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sticker-card {
  text-align: center; padding: 20px 12px 18px; border-radius: var(--radius);
  border: 3px solid var(--navy); box-shadow: 0 6px 0 var(--navy);
}
.sticker-card:nth-child(1) { rotate: -2deg; }
.sticker-card:nth-child(2) { rotate: 1.5deg; }
.sticker-card:nth-child(3) { rotate: -1deg; }
.sticker-card:nth-child(4) { rotate: 2deg; }
.c-white { background: var(--white); }
.c-sun { background: var(--sun); }
.c-aqua { background: var(--aqua); }
.c-orange { background: var(--orange-soft); }
.badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; color: var(--white); }
.badge svg { width: 26px; height: 26px; }
.b-teal { background: var(--teal); }
.b-navy { background: var(--navy); }
.sticker-card h2 { font-size: 1.2rem; margin: 0 0 2px; font-weight: 600; }
.sticker-card p { margin: 0; font-size: 0.97rem; line-height: 1.4; color: var(--navy); }

/* ---------- Services (navy) ---------- */
.services { position: relative; background: var(--navy); padding: 44px 0 50px; margin: 70px 0 70px; }
.services .wave { height: 60px; fill: var(--navy); }
.wave-top { top: -59px; }
.wave-bottom { bottom: -59px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.section-head p { color: var(--ink-soft); font-size: 1.12rem; }
.services h2 { color: var(--white); }
.services h2 .script { color: var(--sun); }
.services .section-head p { color: var(--sky); }
.freq { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 14px 0 0; }
.freq li { background: var(--teal); color: var(--white); border-radius: 999px; padding: 5px 15px; font: 600 1rem var(--f-head); }
.cards { display: grid; gap: 18px; }
.card { background: var(--white); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: 0 7px 0 var(--navy-deep); border-top: 10px solid var(--k); }
.card-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--k); color: var(--navy); margin-bottom: 12px; border: 2px solid var(--navy); }
.card-icon svg { width: 28px; height: 28px; }
.card p { margin: 0; color: var(--ink-soft); }
.k-teal { --k: var(--aqua); }
.k-sun { --k: var(--sun); }
.k-orange { --k: var(--orange); }
.k-aqua { --k: var(--teal-bright); }
.k-sky { --k: var(--sky); }
.s-a { width: 30px; height: 30px; top: 16px; right: 7%; fill: var(--sun); }
.s-b { width: 18px; height: 18px; top: 150px; left: 5%; fill: var(--aqua); }
.s-c { width: 22px; height: 22px; bottom: 30px; right: 4%; fill: var(--orange); }

/* ---------- Meet Sandi ---------- */
.about { padding: 30px 0 60px; }
.about-grid { display: grid; gap: 36px; align-items: center; }
.pull {
  position: relative; width: 100%; max-width: 420px; margin: 0 auto;
  padding: 110px 30px 46px; text-align: center;
  background: var(--teal); border: 3px solid var(--navy);
  border-radius: 210px 210px var(--radius) var(--radius);
  box-shadow: 12px 12px 0 var(--sun);
}
.pull blockquote { margin: 0; font: 400 clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem)/1.35 var(--f-script); color: var(--white); }
.pull-swoosh { display: block; width: 60%; height: 22px; margin: 14px auto 0; fill: var(--sun); }
.sp-p1 { width: 46px; height: 46px; top: 36px; left: 50%; margin-left: -23px; fill: var(--sun); }
.sp-p2 { width: 20px; height: 20px; bottom: 26px; left: 14%; fill: var(--aqua); }
.sp-p3 { width: 16px; height: 16px; top: 90px; right: 16%; fill: var(--white); }
.about-copy h2 .script { color: var(--teal); }
.about-copy p { font-size: 1.12rem; }
.about-copy .btn { margin-top: 6px; }

/* ---------- How it works ---------- */
.how { padding: 40px 0 30px; }
.how h2 .script { color: var(--teal); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; text-align: center; }
.step-num {
  display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 12px;
  border-radius: 50%; border: 3px solid var(--navy); box-shadow: 0 5px 0 var(--navy);
  font: 700 2.1rem var(--f-head); color: var(--navy);
}
.n1 { background: var(--sun); rotate: -6deg; }
.n2 { background: var(--aqua); rotate: 4deg; }
.n3 { background: var(--orange); rotate: -3deg; }
.steps p { color: var(--ink-soft); margin: 0 auto; max-width: 30ch; }

/* ---------- Where ---------- */
.where { padding: 40px 0 80px; text-align: center; }
.where h2 .script { color: var(--teal); }
.towns { list-style: none; padding: 0; margin: 10px 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.towns li { border: 3px solid var(--navy); border-radius: 999px; padding: 8px 20px; font: 600 1.1rem var(--f-head); color: var(--navy); box-shadow: 0 4px 0 var(--navy); }
.towns li:nth-child(1) { background: var(--sun); rotate: -2deg; }
.towns li:nth-child(2) { background: var(--aqua); rotate: 1.5deg; }
.towns li:nth-child(3) { background: var(--orange-soft); rotate: -1deg; }
.towns li:nth-child(4) { background: var(--sky); rotate: 2deg; }
.where-note { color: var(--ink-soft); margin: 0; }

/* ---------- Quote (teal) ---------- */
.quote { position: relative; background: var(--teal); padding: 40px 0 90px; margin-top: 60px; }
.quote .wave { height: 60px; fill: var(--teal); }
.quote .kicker { color: var(--white); }
.quote h2 { color: var(--white); }
.quote h2 .script { color: var(--sun); }
.quote .section-head p { color: #e3f6f3; }
.q-a { width: 30px; height: 30px; top: 24px; left: 8%; fill: var(--sun); }
.q-b { width: 18px; height: 18px; top: 120px; right: 10%; fill: var(--white); }
.quote-grid { display: grid; gap: 22px; align-items: start; max-width: 900px; margin-inline: auto; }
.contact-cards { display: grid; gap: 14px; }
.ccard {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--navy);
  border: 3px solid var(--navy); border-radius: var(--radius); padding: 14px 16px;
  box-shadow: 0 5px 0 var(--navy); overflow-wrap: anywhere;
}
.ccard strong { display: block; font: 600 1.2rem var(--f-head); }
.ccard-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: var(--white); }
.ccard-icon svg { width: 24px; height: 24px; }
.cc-sun { background: var(--sun); }
.cc-aqua { background: var(--aqua); }
.cc-white { background: var(--white); }
.quote-form {
  background: var(--white); border-radius: 26px; padding: 26px 20px 28px;
  border: 3px solid var(--navy); box-shadow: 0 8px 0 var(--navy);
}
.quote-form h3 { font-size: 1.7rem; margin-bottom: 16px; }
.quote-form label { display: block; font-weight: 800; color: var(--navy); margin-bottom: 16px; }
.quote-form input, .quote-form textarea {
  display: block; width: 100%; margin-top: 6px; font: 400 1.05rem var(--f-body); color: var(--ink);
  background: var(--cream); border: 2px solid #b9c7d8; border-radius: 14px; padding: 12px 14px;
}
.quote-form input:focus, .quote-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--aqua-soft); }
.opt { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.form-status { display: none; margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--sun-soft); color: var(--navy); font-weight: 700; }
.form-status.show { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--sky); padding: 44px 0 110px; border-top: 6px solid var(--sun); }
.footer-grid { display: grid; gap: 20px; }
.footer-logo { width: 200px; filter: brightness(0) invert(1); }
.site-footer p { margin: 0 0 6px; }
.footer-contact { display: grid; gap: 6px; }
.footer-contact a { color: var(--sun); font-weight: 800; }
.site-footer .copyright { margin: 26px auto 0; font-size: 0.9rem; }

/* ---------- Phone bottom bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--navy); box-shadow: 0 -4px 18px rgb(12 27 48 / 0.25);
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
  background: var(--white); color: var(--navy); text-decoration: none; font: 600 1rem var(--f-head); border-radius: 14px;
}
.mobile-bar svg { width: 22px; height: 22px; }
.mobile-bar a:nth-child(2) { background: var(--aqua); }
.mobile-bar .mb-quote { background: var(--sun); }

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
  .cta-row { flex-direction: row; max-width: none; justify-content: center; }
  .cards { grid-template-columns: 1fr 1fr; }
  .quote-form { padding: 30px 32px 32px; }
  .sticker { width: 124px; height: 124px; font-size: 1.1rem; }
}
@media (min-width: 768px) {
  .site-header {
    display: block; position: sticky; top: 0; z-index: 40;
    background: rgb(255 250 241 / 0.95); backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--navy);
  }
  .header-row { display: flex; align-items: center; gap: 24px; padding: 10px 0; }
  .brand img { width: 130px; }
  .nav { display: flex; gap: 4px; margin-left: auto; }
  .nav a { text-decoration: none; font: 600 1.1rem var(--f-head); padding: 8px 14px; border-radius: 999px; }
  .nav a:hover { background: var(--aqua-soft); }
  .mobile-bar { display: none; }
  .site-footer { padding-bottom: 44px; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; }
}
@media (min-width: 960px) {
  .hero { padding: 40px 0 120px; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 40px; }
  .hero-copy { text-align: left; order: -1; }
  .hero-copy .lead { margin-left: 0; }
  .cta-row { justify-content: flex-start; margin-left: 0; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
  .quote-grid { grid-template-columns: 300px 1fr; gap: 30px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease; }
  .btn:hover { transform: translateY(-3px) rotate(-1.5deg); }
  .card, .ccard, .sticker-card, .towns li { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .card:hover { transform: translateY(-6px) rotate(-1deg); }
  .ccard:hover { transform: translateY(-3px); }
  .sticker-card:hover, .towns li:hover { transform: scale(1.06); }

  .bubbles i { animation: bubble var(--t) linear var(--dl) infinite; }
  .ticker-track { animation: ticker 32s linear infinite; }
  .spark { animation: twinkle 2.8s ease-in-out infinite; }
  .sp2, .s-b, .sp-p2, .q-b { animation-delay: 0.9s; }
  .sp3, .s-c, .sp-p3 { animation-delay: 1.7s; animation-duration: 3.4s; }
  .blob { animation: morph 12s ease-in-out infinite; }
  .sticker { animation: wobble 4s ease-in-out infinite; }

  /* entrance */
  .site-header { animation: drop-in 0.6s ease-out both; }
  .logo-stage { animation: sweep-in 1.1s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
  .hero-logo { animation: float 6s ease-in-out 1.1s infinite; }
  .tagline { animation: pop-in 0.6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .hero h1 { animation: rise 0.7s 0.55s ease-out both; }
  .underline { transform-origin: left center; animation: draw 0.7s 1.2s ease-out both; }
  .lead { animation: rise 0.7s 0.7s ease-out both; }
  .cta-row { animation: rise 0.7s 0.85s ease-out both; }
  .serving { animation: rise 0.7s 0.95s ease-out both; }
  .mobile-bar { animation: bar-up 0.6s 1.2s ease-out both; }

  /* scroll reveal: script.js adds .rv only to elements confirmed off-screen, then .in as they arrive */
  .rv:not(.in) { opacity: 0; transform: translateY(34px) scale(0.96); }
  .rv.in:not(.done) { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1.4, 0.36, 1); transition-delay: var(--d, 0s); }

  .burst { position: fixed; width: 16px; height: 16px; pointer-events: none; z-index: 200; animation: burst 0.7s ease-out forwards; }
}
@keyframes bubble {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.85; }
  50% { transform: translateY(-45vh) translateX(14px); }
  100% { transform: translateY(-95vh) translateX(-10px); opacity: 0; }
}
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(0.5) rotate(45deg); opacity: 0.6; } }
@keyframes morph {
  0%, 100% { border-radius: 58% 42% 52% 48% / 52% 46% 54% 48%; }
  50% { border-radius: 46% 54% 44% 56% / 56% 50% 50% 44%; }
}
@keyframes wobble { 0%, 100% { rotate: -12deg; } 50% { rotate: -4deg; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes drop-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes sweep-in {
  0% { opacity: 0; transform: translateX(-70px) rotate(-10deg) scale(0.88); }
  60% { opacity: 1; transform: translateX(10px) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bar-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes burst { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(90deg); opacity: 0; } }

/* Keep the "Dust bunnies" sticker off the logo lettering */
.sticker { left: -8px; top: -8px; bottom: auto; width: 84px; height: 84px; font-size: 0.8rem; }
.sp1 { left: auto; right: 12%; top: -2%; }
@media (min-width: 560px) {
  .sticker { top: auto; bottom: -26px; left: -14px; width: 116px; height: 116px; font-size: 1.02rem; }
  .sp1 { left: -2%; right: auto; top: 6%; }
}

/* =================== Polish pass =================== */
/* Hero: soft light spots, resting bubbles, dashed inner ring, logo shine */
.hero { background:
  radial-gradient(circle at 12% 18%, rgb(255 255 255 / 0.7) 0 120px, transparent 260px),
  radial-gradient(circle at 88% 80%, rgb(166 228 220 / 0.55) 0 90px, transparent 240px),
  linear-gradient(160deg, var(--aqua-soft) 0%, #d8eefb 100%); }
.blob::after {
  content: ""; position: absolute; inset: 12px; border-radius: inherit;
  border: 2px dashed var(--aqua); pointer-events: none;
}
.rest-bubble {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 30%, #fff 0 14%, rgb(255 255 255 / 0.3) 26%, rgb(166 228 220 / 0.35) 62%, rgb(207 232 250 / 0.7) 100%);
  border: 2px solid rgb(255 255 255 / 0.9); box-shadow: 0 2px 8px rgb(20 43 73 / 0.08);
}
.rb1 { width: 44px; height: 44px; right: -3%; top: 26%; }
.rb2 { width: 24px; height: 24px; right: 6%; top: 14%; }
.rb3 { width: 30px; height: 30px; left: 30%; bottom: -5%; }
.shine {
  position: absolute; inset: 4% 2% 2% 2%; border-radius: 50%; overflow: hidden; pointer-events: none;
}
.shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / 0.85) 50%, rgb(255 255 255 / 0) 80%, transparent 100%);
  transform: skewX(-12deg); opacity: 0;
}

/* Buttons: a clean shine on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.45), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn > * { position: relative; }

/* Meet Sandi: sticker and signature */
.spirit {
  position: absolute; right: -10px; bottom: 26px; rotate: 8deg;
  background: var(--sun); color: var(--navy); border: 3px solid var(--navy); border-radius: 999px;
  padding: 6px 16px; font: 700 1.05rem var(--f-head); box-shadow: 0 4px 0 var(--navy);
}
.about-copy .signature { display: flex; align-items: center; gap: 6px; margin: 0.2em 0 0.7em; font: 400 2.6rem/1 var(--f-script); color: var(--teal); rotate: -4deg; }
.signature svg { width: 26px; height: 26px; fill: var(--sun); stroke: var(--navy); stroke-width: 1.2; }

/* How it works: dotted path joining the steps (wider screens) */
.steps { position: relative; }
@media (min-width: 768px) {
  .steps::before {
    content: ""; position: absolute; left: 17%; right: 17%; top: 42px; height: 0;
    border-top: 4px dotted var(--teal-bright); z-index: -1;
  }
  .how { position: relative; z-index: 0; }
}

/* Header: soft shadow once the page scrolls */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.scrolled { box-shadow: 0 6px 20px rgb(20 43 73 / 0.12); }

/* Footer: wavy top and a back-to-top link */
.site-footer { position: relative; border-top: 0; margin-top: 0; }
.footer-wave { top: -59px; height: 60px; fill: var(--navy); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.site-footer .footer-base .copyright { margin: 0; }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: var(--sun); font: 600 1.05rem var(--f-head); text-decoration: none; }
.to-top svg { width: 18px; height: 18px; fill: var(--sun); }
.to-top:hover { text-decoration: underline; }

@media (prefers-reduced-motion: no-preference) {
  .shine::before { animation: shine 1.2s 1.3s ease-in-out both, shine 1.2s 7s ease-in-out infinite; }
  .logo-stage:hover .shine::before { animation: shine 1s ease-in-out; }
  .btn::after { transition: left 0.6s ease; }
  .btn:hover::after { left: 125%; }
  .rest-bubble { animation: bob 5s ease-in-out infinite; }
  .rb2 { animation-delay: -1.5s; animation-duration: 4s; }
  .rb3 { animation-delay: -3s; animation-duration: 6s; }
  .spirit { animation: wobble-s 5s ease-in-out infinite; }
}
@keyframes shine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wobble-s { 0%, 100% { rotate: 8deg; } 50% { rotate: 2deg; } }

/* =================== More bubbles and motion =================== */
.bubbles { overflow: hidden; z-index: 0; }
.services > .wrap, .quote > .wrap { position: relative; z-index: 1; }
.bubbles i {
  background:
    radial-gradient(circle at 30% 28%, #fff 0 10%, rgb(255 255 255 / 0.35) 18%, transparent 30%),
    radial-gradient(circle at 70% 75%, rgb(255 200 69 / 0.35) 0 12%, transparent 30%),
    conic-gradient(from 200deg, rgb(166 228 220 / 0.45), rgb(207 232 250 / 0.5), rgb(255 200 69 / 0.3), rgb(34 179 170 / 0.35), rgb(166 228 220 / 0.45));
  border: 2px solid rgb(255 255 255 / 0.85);
  box-shadow: inset 0 0 8px rgb(255 255 255 / 0.6);
  opacity: 0.9; pointer-events: auto; cursor: pointer;
}
.services .bubbles i, .quote .bubbles i { opacity: 0.5; }
.bubbles i.popped { animation: pop 0.35s ease-out forwards !important; }

@media (prefers-reduced-motion: no-preference) {
  .bubbles i { animation: bubble var(--t) linear var(--dl) infinite, sway calc(var(--t) / 3) ease-in-out var(--dl) infinite alternate; }
  .sticker-card.done, .sticker-card:not(.rv) { animation: floaty 5s ease-in-out infinite; }
  .sticker-card:nth-child(2) { animation-delay: -1.2s; }
  .sticker-card:nth-child(3) { animation-delay: -2.4s; }
  .sticker-card:nth-child(4) { animation-delay: -3.6s; }
  .sticker-card:hover .badge { animation: spin-once 0.7s ease; }
  .card:hover .card-icon { animation: wiggle 0.6s ease; }
  .step-num { animation: bounce 3s ease-in-out infinite; }
  .n2 { animation-delay: 0.4s; }
  .n3 { animation-delay: 0.8s; }
  .towns li { animation: floaty 4.5s ease-in-out infinite; }
  .towns li:nth-child(2) { animation-delay: -1s; }
  .towns li:nth-child(3) { animation-delay: -2s; }
  .towns li:nth-child(4) { animation-delay: -3s; }
  .tagline { animation: pop-in 0.6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both, tilt 6s ease-in-out 1.5s infinite; }
  .ccard-icon { animation: ring 4s ease-in-out infinite; }
  .ccard:nth-child(2) .ccard-icon { animation-delay: 1.3s; }
  .ccard:nth-child(3) .ccard-icon { animation-delay: 2.6s; }
  .pull .sp-p1 { animation: twinkle 2.2s ease-in-out infinite, spin-slow 12s linear infinite; }
}
@keyframes bubble {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  8% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}
@keyframes sway { from { margin-left: calc(var(--sw, 20px) * -1); } to { margin-left: var(--sw, 20px); } }
@keyframes pop { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.5); opacity: 0.6; border-style: dashed; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes spin-once { to { transform: rotate(360deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes bounce { 0%, 80%, 100% { translate: 0 0; } 88% { translate: 0 -10px; } 94% { translate: 0 0; } }
@keyframes tilt { 0%, 100% { rotate: -2deg; } 50% { rotate: 1deg; } }
@keyframes ring { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-14deg); } 92% { transform: rotate(14deg); } 95% { transform: rotate(-8deg); } }
@keyframes spin-slow { to { rotate: 360deg; } }

/* bubbles drift behind the text and logo, never over them */
.hero-grid { z-index: 1; }
.btn { white-space: nowrap; }
.cta-row { flex-wrap: wrap; }

/* =================== Lots of sparkles and bubbles =================== */
.sparkles-js { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.trust, .about, .how { position: relative; }
.trust > .wrap, .about > .wrap, .how > .wrap { position: relative; z-index: 1; }
.tw { position: absolute; opacity: 0.9; }
.bubbles i { opacity: 1; }
.services .bubbles i, .quote .bubbles i { opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .tw { animation: twinkle 2.6s ease-in-out infinite; }
}

/* "Dust bunnies, beware!" as a big soap bubble */
.sticker {
  background:
    radial-gradient(circle at 30% 26%, #fff 0 9%, rgb(255 255 255 / 0.5) 16%, transparent 28%),
    radial-gradient(circle at 72% 78%, rgb(255 200 69 / 0.45) 0 10%, transparent 26%),
    conic-gradient(from 200deg, rgb(166 228 220 / 0.85), rgb(207 232 250 / 0.9), rgb(255 227 207 / 0.85), rgb(34 179 170 / 0.55), rgb(166 228 220 / 0.85));
  border: 3px solid rgb(255 255 255 / 0.95);
  box-shadow: inset 0 0 14px rgb(255 255 255 / 0.9), 0 6px 16px rgb(20 43 73 / 0.18);
  color: var(--navy);
  rotate: 0deg;
}
.sticker span { text-shadow: 0 0 6px rgb(255 255 255 / 0.9); }
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: bubble-bob 4s ease-in-out infinite; }
}
@keyframes bubble-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-6px) scale(1.04, 0.97); }
  60% { transform: translateY(-2px) scale(0.97, 1.04); }
}

/* Bubbles: back to the original soft look, fewer and more see-through */
.bubbles i {
  background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / 0.9) 0 12%, rgb(255 255 255 / 0.2) 22%, rgb(166 228 220 / 0.18) 60%, rgb(207 232 250 / 0.4) 100%);
  border: 1.5px solid rgb(255 255 255 / 0.7);
  box-shadow: none;
  opacity: 0.55;
}
.services .bubbles i, .quote .bubbles i { opacity: 0.3; }

/* "Dust bunnies, beware!" as a gold sparkle burst */
.sticker {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-110 -110 220 220'%3E%3Cpath d='M0 -104C9 -58 24 -40 44 -62 34 -34 50 -18 104 0 50 18 34 34 44 62 24 40 9 58 0 104 -9 58 -24 40 -44 62 -34 34 -50 18 -104 0 -50 -18 -34 -34 -44 -62 -24 -40 -9 -58 0 -104Z' fill='%23ffc845' stroke='%23142b49' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
  filter: drop-shadow(3px 4px 0 rgb(20 43 73 / 0.9));
  width: 104px; height: 104px; font-size: 0.78rem;
}
.sticker span { text-shadow: none; max-width: 7ch; }
@media (min-width: 560px) {
  .sticker { width: 138px; height: 138px; font-size: 0.98rem; bottom: -34px; left: -22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: sparkle-spin 6s ease-in-out infinite; }
}
@keyframes sparkle-spin { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(8deg) scale(1.06); } }

/* rounder burst so the words have room */
.sticker { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-112 -112 224 224'%3E%3Cpath d='M0.0 -104.0 L21.2 -79.2 L52.0 -90.1 L58.0 -58.0 L90.1 -52.0 L79.2 -21.2 L104.0 0.0 L79.2 21.2 L90.1 52.0 L58.0 58.0 L52.0 90.1 L21.2 79.2 L0.0 104.0 L-21.2 79.2 L-52.0 90.1 L-58.0 58.0 L-90.1 52.0 L-79.2 21.2 L-104.0 0.0 L-79.2 -21.2 L-90.1 -52.0 L-58.0 -58.0 L-52.0 -90.1 L-21.2 -79.2Z' fill='%23ffc845' stroke='%23142b49' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E"); width: 116px; height: 116px; font-size: 0.86rem; }
.sticker span { max-width: 7.5ch; }
@media (min-width: 560px) { .sticker { width: 146px; height: 146px; font-size: 1.05rem; } }

/* =================== Accessibility (WCAG 2.2 AA) =================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sticker-card h3 { font-size: 1.2rem; margin: 0 0 2px; font-weight: 600; }

/* Focus ring: navy on light sections, sunshine on dark ones (3:1 or better everywhere) */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.services :focus-visible, .quote :focus-visible, .site-footer :focus-visible, .mobile-bar :focus-visible, .skip-link:focus-visible { outline-color: var(--sun); }
.quote-form :focus-visible, .quote-form input:focus, .quote-form textarea:focus { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Keep focused elements clear of the sticky header and the phone bar */
html { scroll-padding-top: 24px; scroll-padding-bottom: 96px; }
@media (min-width: 768px) { html { scroll-padding-top: 110px; scroll-padding-bottom: 24px; } }

/* Form: visible field edges (4:1), required note, errors */
.quote-form input, .quote-form textarea { border-color: #6b7d96; }
.quote-form [aria-invalid="true"] { border-color: #b3261e; border-width: 3px; }
.form-note { margin: -8px 0 14px; color: var(--ink-soft); font-size: 0.97rem; }
.form-errors { margin: 0 0 16px; padding: 12px 16px; border: 3px solid #b3261e; border-radius: 14px; background: #fdecea; color: #6d1410; }
.form-errors ul { margin: 6px 0 0; padding-left: 20px; }
.form-errors a { color: #6d1410; font-weight: 700; }

/* Pause / play animations button */
.motion-toggle {
  position: fixed; left: 12px; bottom: 88px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  font: 600 0.95rem var(--f-head); color: var(--navy); background: var(--white);
  border: 2px solid var(--navy); border-radius: 999px; box-shadow: 0 3px 0 var(--navy); cursor: pointer;
}
.motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .i-play { display: none; fill: var(--navy); stroke-width: 2; }
.paused .motion-toggle .i-play { display: block; }
.paused .motion-toggle .i-pause { display: none; }
@media (min-width: 768px) { .motion-toggle { bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
.paused *, .paused *::before, .paused *::after { animation: none !important; }
.paused .bubbles, .paused .burst { display: none; }
/* pause button sits in the hero's top corner, never over content */
.motion-toggle { position: absolute; left: auto; right: 12px; top: 10px; bottom: auto; z-index: 5; min-height: 40px; padding: 6px 12px; font-size: 0.85rem; box-shadow: 0 2px 0 var(--navy); }
@media (min-width: 768px) { .motion-toggle { bottom: auto; top: 14px; right: 16px; } }
.hero { padding-top: 60px; }
@media (min-width: 960px) { .hero { padding-top: 64px; } }

/* Meet Sandi: her photo in the arch */
.photo-arch { padding: 0; overflow: visible; background: var(--teal); }
.photo-arch picture, .photo-arch img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  border-radius: 207px 207px 19px 19px;
}
.photo-arch .sp-p1 { top: -18px; left: auto; right: 10%; margin: 0; z-index: 2; }
.photo-arch .sp-p2 { bottom: -10px; left: 8%; z-index: 2; fill: var(--sun); }
.photo-arch .spirit { z-index: 3; }
.quote-line { font: 400 1.5rem/1.35 var(--f-script); color: var(--teal); margin: -0.2em 0 0.8em; }

/* =================== Sunny garden theme (from Sandi's photo) =================== */
:root {
  --teal: #1f6fbf;          /* deep sky: white text 4.7:1 */
  --teal-bright: #4fa9ee;   /* sky */
  --aqua: #bfe3ff;          /* light sky */
  --aqua-soft: #e6f4ff;
  --sun: #ffd23f;           /* daffodil */
  --sun-soft: #fff4c2;
  --orange: #7cc35a;        /* fresh leaf green */
  --orange-soft: #e3f5d8;
  --sky: #d4ecff;
}
.hero {
  background: linear-gradient(180deg, #6db8f5 0%, #a9d8ff 48%, #e6f4ff 100%);
  padding-bottom: 150px;
}
.lead, .serving { color: var(--navy); }
.serving svg { color: var(--navy); }
.hero h1 .script { color: #0d4f99; }
.underline { fill: var(--sun); }
/* one sun: rays and glow share the same centre at every screen width */
.sun { position: absolute; left: -170px; top: -170px; width: 460px; height: 460px; pointer-events: none; }
.sun::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 246 200 / 0.6) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 12%, #000 20%, rgb(0 0 0 / 0.5) 42%, transparent 68%);
  mask: radial-gradient(circle, transparent 12%, #000 20%, rgb(0 0 0 / 0.5) 42%, transparent 68%);
}
.sun::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle, #fffdf0 0 22%, rgb(255 246 200 / 0.9) 32%, rgb(255 244 194 / 0.35) 52%, rgb(255 244 194 / 0) 70%);
}
@media (max-width: 599px) { .sun { left: -200px; top: -200px; transform: scale(0.8); } }
.cloud { position: absolute; pointer-events: none; background: #fff; border-radius: 999px; opacity: 0.85; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.c1 { width: 140px; height: 38px; top: 14%; left: 38%; }
.c1::before { width: 60px; height: 60px; left: 22px; top: -30px; } .c1::after { width: 46px; height: 46px; left: 70px; top: -20px; }
.c2 { width: 100px; height: 28px; top: 8%; right: 8%; opacity: 0.7; }
.c2::before { width: 44px; height: 44px; left: 16px; top: -22px; } .c2::after { width: 34px; height: 34px; left: 50px; top: -14px; }
.c3 { width: 120px; height: 32px; top: 52%; left: 4%; opacity: 0.6; }
.c3::before { width: 50px; height: 50px; left: 18px; top: -26px; } .c3::after { width: 40px; height: 40px; left: 60px; top: -16px; }
.hero-wave { fill: #7cc35a; height: 80px; }
.meadow { position: absolute; left: 0; right: 0; bottom: 30px; height: 140px; pointer-events: none; z-index: 1; }
.flower { position: absolute; bottom: 0; transform-origin: 50% 100%; overflow: visible; }
.ticker { border-top: 0; }
.tw { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .sun::before { animation: spin-sun 80s linear infinite; }
  .c1 { animation: drift 46s linear infinite; }
  .c2 { animation: drift 60s linear -20s infinite; }
  .c3 { animation: drift 70s linear -40s infinite; }
  .flower { animation: flower-sway 5s ease-in-out infinite; }
}
@keyframes spin-sun { to { transform: rotate(360deg); } }
@keyframes drift { 0% { translate: -30vw 0; } 100% { translate: 110vw 0; } }
@keyframes flower-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@media (max-width: 599px) { .hero { padding-bottom: 130px; } .meadow { height: 110px; } }

/* no meadow: the sky flows straight into the yellow ticker */
.hero-wave { fill: var(--sun); height: 70px; }
.hero { padding-bottom: 110px; }
@media (max-width: 599px) { .hero { padding-bottom: 96px; } }

/* Calmer logo: the shine plays once on load (and on hover), sparkles twinkle slowly */
@media (prefers-reduced-motion: no-preference) {
  .shine::before { animation: shine 1.4s 1.3s ease-in-out both; }
  .logo-stage:hover .shine::before { animation: shine 1.2s ease-in-out; }
  .logo-stage .spark { animation-duration: 5s; }
  .tw { animation-name: twinkle-soft; }
}
@keyframes twinkle-soft { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(0.75); opacity: 0.55; } }

/* =================== Why Sandi (community section) =================== */
.why { padding: 30px 0 50px; }
.why h2 .script { color: var(--teal); }
.why-grid { display: grid; gap: 18px; }
.why-card { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius); padding: 22px; box-shadow: 0 6px 0 var(--navy); }
.why-card p { margin: 0; color: var(--ink-soft); }
.why-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--sun); border: 2px solid var(--navy); color: var(--navy); margin-bottom: 12px; }
.why-icon svg { width: 26px; height: 26px; }
.why-card:nth-child(2) .why-icon { background: var(--aqua); }
.why-card:nth-child(3) .why-icon { background: var(--orange-soft); }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* =================== Detailed quote form =================== */
.quote-grid { max-width: 1040px; }
@media (min-width: 960px) { .quote-grid { grid-template-columns: 280px 1fr; } .contact-cards { position: sticky; top: 110px; } }
.quote-form .step { border: 2px solid #c9d6e6; border-radius: 18px; padding: 16px 16px 4px; margin: 0 0 18px; }
.quote-form .step legend { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-left: -4px; font: 600 1.15rem var(--f-head); color: var(--navy); }
.step-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); border: 2px solid var(--navy); font: 700 0.95rem var(--f-head); }
.step-help { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.97rem; }
.row2, .row3 { display: grid; gap: 0 14px; }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } .row3 { grid-template-columns: repeat(3, 1fr); } }
.quote-form select {
  display: block; width: 100%; margin-top: 6px; min-height: 48px; font: 400 1.05rem var(--f-body); color: var(--ink);
  background: var(--cream); border: 2px solid #6b7d96; border-radius: 14px; padding: 10px 12px;
}
.quote-form select:focus { outline: 3px solid var(--navy); outline-offset: 2px; }
.extras { display: grid; gap: 10px; margin-bottom: 14px; }
@media (min-width: 600px) { .extras { grid-template-columns: 1fr 1fr; } }
.quote-form .check { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 44px; font-weight: 700; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--navy); flex: none; }
.next-steps { display: flex; gap: 12px; align-items: flex-start; background: var(--sun-soft); border-radius: 14px; padding: 14px 16px; margin: 4px 0 18px; }
.next-steps svg { width: 26px; height: 26px; flex: none; color: var(--navy); margin-top: 2px; }
.next-steps p { margin: 0; color: var(--navy); }

/* Form: every text box and dropdown is the same height and shape (Safari draws its own selects otherwise) */
.quote-form input[type=text], .quote-form input[type=tel], .quote-form input[type=email], .quote-form select {
  -webkit-appearance: none; appearance: none;
  box-sizing: border-box; height: 52px; min-height: 52px;
  padding: 0 14px; line-height: 48px;
  font: 400 1.05rem var(--f-body); color: var(--ink);
  background-color: var(--cream); border: 2px solid #6b7d96; border-radius: 14px;
}
.quote-form select {
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142b49' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.quote-form [aria-invalid="true"] { border-color: #b3261e; }
/* line the boxes up across a row even when a label wraps */
.row2, .row3 { align-items: end; }

/* drifting clouds must never widen the page */
html { overflow-x: clip; }
.hero { overflow: clip; }

/* =================== "Right place" accordion =================== */
.why .section-head { margin-bottom: 26px; }
.accordion { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
.accordion details { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius); box-shadow: 0 5px 0 var(--navy); overflow: hidden; }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 56px 12px 16px; position: relative;
  font: 600 1.2rem/1.25 var(--f-head); color: var(--navy);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142b49' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: 2px solid var(--navy); transition: transform 0.25s ease;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion summary:hover { background: var(--aqua-soft); }
.accordion summary:focus-visible { outline: 3px solid var(--navy); outline-offset: -6px; }
.acc-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--aqua); color: var(--navy); border: 2px solid var(--navy); }
.acc-icon svg { width: 22px; height: 22px; }
.accordion details:nth-child(2) .acc-icon { background: var(--sun); }
.accordion details:nth-child(3) .acc-icon { background: var(--orange-soft); }
.accordion details:nth-child(4) .acc-icon { background: var(--sky); }
.accordion details:nth-child(5) .acc-icon { background: var(--sun-soft); }
.acc-body { padding: 0 20px 18px 72px; }
.acc-body p { margin: 0; color: var(--ink-soft); font-size: 1.08rem; }
@media (max-width: 520px) { .acc-body { padding-left: 18px; } .accordion summary { font-size: 1.08rem; } }
@media (prefers-reduced-motion: no-preference) {
  .accordion details[open] .acc-body { animation: rise 0.35s ease-out; }
}

/* =================== Calmer, more polished (Molly Maid feel) =================== */
:root { --f-serif: "Fraunces", Georgia, "Times New Roman", serif; }
h1, h2 { font-family: var(--f-serif); font-weight: 600; letter-spacing: -0.015em; }
h1 { line-height: 1.08; }
.section-head { margin-bottom: 44px; }
.trust { padding: 70px 0 50px; }
.services { padding: 60px 0 70px; }
.why, .about { padding-top: 60px; padding-bottom: 70px; }
.how { padding: 60px 0 40px; }
.where { padding: 50px 0 90px; }
/* straighten the tilted bits */
.sticker-card:nth-child(n), .towns li:nth-child(n), .tagline, .n1, .n2, .n3 { rotate: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .sticker-card.done, .sticker-card:not(.rv) { animation: none; }
  .towns li, .step-num, .ccard-icon { animation: none; }
  .tagline { animation: pop-in 0.6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .btn:hover { transform: translateY(-2px); }
  .card:hover { transform: translateY(-4px); }
}

/* =================== Gift certificates =================== */
.gift { padding: 30px 0 70px; }
.gift-card { display: grid; gap: 24px; align-items: center; background: var(--sun-soft); border: 3px solid var(--navy); border-radius: 28px; padding: 30px 24px; box-shadow: 0 8px 0 var(--navy); }
.gift-art svg { width: 140px; height: 140px; display: block; margin: 0 auto; }
.gift h2 .script { color: var(--teal); }
.gift-copy p { font-size: 1.1rem; color: var(--ink-soft); }
@media (min-width: 768px) { .gift-card { grid-template-columns: 220px 1fr; padding: 40px 48px; } .gift-art svg { width: 180px; height: 180px; } }

/* =================== Reviews (hidden until real reviews arrive) =================== */
.review-grid { display: grid; gap: 18px; }
@media (min-width: 768px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }

/* =================== Custom dropdowns (script.js builds them from the real selects) =================== */
.dd { position: relative; margin-top: 6px; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  box-sizing: border-box; height: 52px; padding: 0 14px; cursor: pointer; text-align: left;
  font: 400 1.05rem var(--f-body); color: var(--ink);
  background: var(--cream); border: 2px solid #6b7d96; border-radius: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dd-btn:hover { border-color: var(--navy); }
.dd-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.dd-btn.is-empty .dd-val { color: var(--ink-soft); }
.dd-btn[aria-invalid="true"] { border-color: #b3261e; }
.dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.dd.is-open .dd-btn { border-color: var(--navy); background: var(--white); box-shadow: 0 0 0 3px var(--sun); }
.dd.is-open .dd-chev { transform: rotate(180deg); }
.dd-list {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 8px);
  min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px)); box-sizing: border-box;
  margin: 0; padding: 6px; list-style: none; max-height: 290px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border: 3px solid var(--navy); border-radius: 16px; box-shadow: 0 5px 0 var(--navy), 0 14px 28px rgba(20, 43, 73, 0.18);
}
.dd.dd-up .dd-list { top: auto; bottom: calc(100% + 8px); box-shadow: 0 -2px 0 var(--navy), 0 -10px 24px rgba(20, 43, 73, 0.16); }
.dd-list:focus { outline: none; }
.dd-list [role=option] {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 8px;
  border-radius: 10px; cursor: pointer; font: 500 1.02rem/1.3 var(--f-body); color: var(--ink);
}
.dd-tick { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.dd-list [aria-selected="true"] { font-weight: 800; }
.dd-list [aria-selected="true"] .dd-tick { visibility: visible; }
.dd-list .dd-placeholder { color: var(--ink-soft); }
.dd-list .is-active { background: var(--sky); color: var(--navy); }
.dd-list:focus .is-active { box-shadow: inset 0 0 0 2px var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .dd-list:not([hidden]) { animation: dd-pop 0.16s ease-out; transform-origin: top center; }
  .dd.dd-up .dd-list:not([hidden]) { transform-origin: bottom center; }
}
@keyframes dd-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (forced-colors: active) { .dd-list .is-active { outline: 2px solid Highlight; } }
.quote-form select[hidden] { display: none !important; }
@media (max-width: 599px) { .dd-list { width: 100%; max-width: 100%; } }