/* ============================================================
   Brightside Cleaning Co.: theme. Mint, deep teal and fresh white,
   with one citrus accent for the things you press. Sora set round
   and friendly, Nunito Sans for reading. Generous radius, soft
   shadows: the page itself should feel freshly wiped.
   ============================================================ */
@layer theme {
:root{
  --canvas:#F1F7F6; --surface:#FAFCFC; --ink:#0E2B27; --muted:#4D6662; --line:#CFE2DE; --line-strong:#8FB0AA;
  --primary:#0F6B5C; --primary-hover:#0C5B4E; --on-primary:#F1F7F6;
  --accent:#F4D35E; --accent-hover:#F7DD7E; --on-accent:#0E2B27; --accent-text:#0C5B4E;
  --focus:#0F6B5C; --focus-ring:rgb(15 107 92/.22); --error:#A3261B; --ph-bg:#DCEBE8;
  --header-bg:#F1F7F6; --footer-bg:#0E2B27; --on-footer:#D7E8E4; --callbar-bg:#0E2B27;
  --font-display:'Sora',system-ui,sans-serif; --font-body:'Nunito Sans',system-ui,sans-serif;
  --radius:16px; --radius-sm:12px; --radius-lg:28px; --radius-btn:999px;
  --header-h:4.5rem;
  --shadow-soft:0 1px 2px rgb(14 43 39/.05),0 12px 32px -12px rgb(14 43 39/.18);
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2B27' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04}
h3{font-size:1.35rem}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem;max-width:40rem}
.btn{font-weight:800}
.btn--sm{min-height:44px;padding:.55rem 1rem;font-size:.92rem}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.35rem;letter-spacing:-.04em}
.brand-mark{background:var(--primary);color:var(--accent);border-radius:50%}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .site-nav a{font-weight:700} .nav-mobile-cta{display:none} }

/* ---------- hero with the scrub ---------- */
.hero{padding-block:clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.hero-copy{display:grid;gap:1.4rem;justify-items:start}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.9rem);line-height:.98;letter-spacing:-.05em}
.hero h1 span{color:var(--primary);background:linear-gradient(transparent 62%,var(--accent) 62% 90%,transparent 90%)}
.hero-lede{font-size:1.15rem;color:var(--muted);max-width:31rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.ticks{display:flex;flex-wrap:wrap;gap:.5rem}
.ticks li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.9rem}
.ticks .ico{width:1.05rem;height:1.05rem;color:var(--primary)}
.scrub{display:grid;gap:.9rem}
.scrub-stage{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.scrub-stage .ph{border-radius:0}
.grime{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;transition:opacity .7s var(--ease-out)}
.grime:active{cursor:grabbing}
.scrub.is-clean .grime{opacity:0;pointer-events:none}
.sparkle{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--accent);color:var(--on-accent);
  transform:scale(0) rotate(-30deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.sparkle .ico{width:1.7rem;height:1.7rem}
.scrub.is-clean .sparkle{transform:none}
.scrub-bar{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;align-items:center}
.scrub-hint{grid-column:1 / -1;font-weight:700}
.meter{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent));transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--dur-mid) var(--ease-out)}
.scrub-pct{font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--muted)}
.scrub-pct strong{color:var(--ink);font-family:var(--font-display)}
.scrub-bar .btn{grid-column:1 / -1;justify-self:start}
@media (min-width:600px){ .scrub-bar{grid-template-columns:1fr auto auto} .scrub-bar .btn{grid-column:auto} }
@media (min-width:900px){ .hero-grid{grid-template-columns:.95fr 1.05fr;gap:3.5rem} }

/* ---------- instant quote ---------- */
.quote{background:var(--surface);border-block:1px solid var(--line)}
.quote-head{display:grid;gap:.6rem;max-width:40rem;margin-bottom:2rem}
.quote-head p{color:var(--muted);font-size:1.1rem}
.quote-grid{display:grid;gap:2rem;align-items:start}
.qform{display:grid;gap:1.6rem}
.qform fieldset{border:0;padding:0}
.qform legend{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-bottom:.7rem}
.opts{display:grid;gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.opt span{display:grid;gap:.1rem;padding:.85rem 1.1rem;border-radius:var(--radius);border:1.5px solid var(--line-strong);background:var(--canvas);
  transition:border-color var(--dur-fast) linear,background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.opt small{color:var(--muted)}
@media (hover:hover){ .opt:hover span{border-color:var(--primary)} }
.opt input:checked + span{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--surface));box-shadow:inset 0 0 0 1px var(--primary)}
.opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.opt input:active + span{transform:scale(.99)}
.choice input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.choice small{opacity:.8;font-weight:600}
.form-row{display:grid;gap:1.25rem}
.stepper{display:grid;grid-template-columns:52px 1fr 52px;gap:.4rem}
.stepper .input{text-align:center;font-size:1.15rem;font-weight:700;-moz-appearance:textfield}
.stepper .input::-webkit-inner-spin-button{-webkit-appearance:none}
.step-btn{display:grid;place-items:center;min-height:52px;border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);background:var(--canvas);font-size:1.4rem;font-weight:700;
  transition:background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
@media (hover:hover){ .step-btn:not(:disabled):hover{border-color:var(--primary)} }
.step-btn:active{transform:scale(.94)}
.step-btn:disabled{opacity:.35;cursor:not-allowed}
.qout{display:grid;gap:.9rem;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--radius-lg);background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-soft)}
.qout-title{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;opacity:.8}
.qprice{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,8vw,5rem);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){ .qprice.ticking{animation:tick .35s var(--ease-out)} }
@keyframes tick{50%{transform:scale(1.04)}}
.qlines{display:grid;gap:.4rem;padding-top:.9rem;border-top:1px solid rgb(241 247 246/.25)}
.qlines div{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem}
.qlines .q-save{color:var(--accent)}
.qhours{font-size:.92rem;opacity:.85}
.js .qout:not([hidden]) ~ * .q-fallback,.js .q-fallback.is-off{display:none}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} .opts{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .quote-grid{grid-template-columns:1.35fr .65fr;gap:3rem} .qout{position:sticky;top:calc(var(--header-h) + 1.5rem)} }

/* ---------- checklist ---------- */
.tab{border-color:var(--line-strong)}
.tab[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.panels{display:grid;gap:2rem;margin-top:1rem}
.tabs-on .panels{gap:0}
.room{display:grid;gap:1.5rem;align-items:center;padding:clamp(1rem,2.5vw,1.5rem);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line)}
.room-photo .ph{border-radius:var(--radius)}
.room h3,.room h2{margin-bottom:1rem}
.done-list{display:grid;gap:.6rem}
.done-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:1.05rem}
.done-list .ico{flex:none;width:1.6rem;height:1.6rem;padding:.25rem;border-radius:50%;background:var(--accent);color:var(--on-accent);stroke-width:3}
@media (min-width:900px){ .room{grid-template-columns:.9fr 1.1fr;gap:3rem} }

/* ---------- reviews ---------- */
.reviews{background:var(--surface);border-block:1px solid var(--line)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.6rem;background:var(--canvas);border-radius:var(--radius-lg)}
.rv-card blockquote p{font-size:1.1rem}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted)}
.rv-card figcaption strong{color:var(--ink);font-family:var(--font-display)}

/* ---------- about ---------- */
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-photo .ph{border-radius:var(--radius-lg)}
.about-copy{display:grid;gap:1rem}
.about-copy > p{font-size:1.1rem;max-width:34rem}
.promise{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;padding:.6rem 1rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800}
@media (min-width:900px){ .about-grid{grid-template-columns:1fr 1fr;gap:4.5rem} }

/* ---------- the one teal band ---------- */
.quote-band{background:var(--primary);color:var(--on-primary);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-band blockquote p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.8vw,2.9rem);line-height:1.12;letter-spacing:-.03em;max-width:56rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-primary)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary .ico{color:var(--primary)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- booking ---------- */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact-grid{display:grid;gap:2.5rem}
.contact-copy > p{margin-top:1rem;color:var(--muted);font-size:1.1rem}
.contact-list{display:grid;gap:.9rem;margin-top:2rem}
.contact-list li{display:flex;gap:.7rem;align-items:flex-start}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--primary);margin-top:.15rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border-radius:var(--radius-lg);border:1px solid var(--line)}
.hint{margin-top:-.75rem;font-size:.9rem;color:var(--muted)}
@media (min-width:900px){ .contact-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section);background:var(--surface)}
.map-block{border-radius:var(--radius-lg);background:var(--ph-bg)}
.map-title{display:grid;gap:.25rem;max-width:28rem}
.map-title strong{font-family:var(--font-display);font-size:1.4rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- call to action ---------- */
.cta-band{padding-block:clamp(3.5rem,8vw,6rem)}
.cta-inner{display:grid;gap:1rem;justify-items:center;text-align:center;padding:clamp(2rem,5vw,3.5rem);border-radius:var(--radius-lg);background:var(--ink);color:var(--on-primary)}
.cta-band h2{color:var(--on-primary)}
.cta-inner p{font-size:1.15rem;opacity:.85}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.75rem}
.cta-band .btn--ghost{color:var(--on-primary)}
@media (hover:hover){ .cta-band .btn--ghost:hover{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)} }

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-bottom:.5rem}
.foot-mark .ico{color:var(--accent)}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.callbar .call{background:var(--accent);color:var(--on-accent)}
.callbar .alt{color:var(--on-primary)}
}
.room :is(h2,h3){font-size:1.35rem;line-height:1.08}