/* ==========================================================================
   BrumClean 1.0.3 — calmer, flatter, editorial layer.
   Loaded after glass.css. Keeps the monochrome palette, the header and the
   round WhatsApp bubble; removes raised cards, pills, shine sweeps and lifts.
   Most content now sits on the page as plain text, separated by spacing and
   thin hairlines. Only real actions (quote, book, send) look like buttons.
   ========================================================================== */
:root {
  --hair: rgba(10,10,10,.12);
  --hair-strong: rgba(10,10,10,.22);
  --ink-soft: #4a4a4a;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Quieter page backdrop: a single soft wash instead of light blobs. */
body { background: #f6f6f5; }
body::before { content: none; display: none; }

/* ---------- Flat content blocks ---------- */
.card, .feature, .price-card, .review-card, .contact-item, .step,
.faq-list, .map-wrap {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-radius: 0; box-shadow: none;
}
.card, .feature, .price-card, .review-card, .step {
  border-top: 1px solid var(--hair-strong);
  padding: 1.35rem 0 0;
  overflow: visible;
  transform: none;
  transition: border-color .25s;
}
.card::after, .feature::after, .price-card::after, a.contact-item::after, .btn::after { content: none !important; display: none; }
.card:hover, .feature:hover, .price-card:hover, a.contact-item:hover, .review-card:hover {
  transform: none; box-shadow: none; background: transparent; border-color: var(--black);
}
.card-grid, .features, .price-grid, .reviews-grid, .steps { column-gap: clamp(1.5rem, 3vw, 2.75rem); row-gap: clamp(2rem, 4vw, 3rem); }
.card .icon-lg, .feature .icon-lg {
  width: 26px; height: 26px; padding: 0; border-radius: 0; background: none; box-shadow: none;
  stroke-width: 1.3; color: var(--ink-soft); margin-bottom: .2rem; transform: none !important;
}
.card h3, .feature h3, .price-card h3, .step h3 { font-weight: 600; }
.card-link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 5px; }
.card-link:hover { text-decoration-color: currentColor; }

/* Prices: the number is the hero of each item, nothing boxed. */
.price { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--black); font-weight: 700; }
.price span { -webkit-text-fill-color: currentColor; color: var(--gray); }
.price-card { padding-bottom: .4rem; }

/* Steps: number becomes a quiet figure, not a black disc. */
.step-number {
  display: block; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  color: var(--gray); font-weight: 500; font-size: .85rem; letter-spacing: .08em; margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.step-number::before { content: "0"; }

/* Reviews: text first, tag as plain small caps. */
.review-card { gap: .7rem; padding-top: 1.25rem; }
.review-text { font-size: 1.02rem; color: #222; }
.review-tag { background: none; border: 0; padding: 0; border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; color: var(--gray); }

/* Contact: a simple list with hairlines. */
.contact-info { gap: 0; }
.contact-item { padding: 1.05rem 0; border-top: 1px solid var(--hair); border-radius: 0; }
.contact-info .contact-item:last-child { border-bottom: 1px solid var(--hair); }
a.contact-item:hover { background: transparent; border-color: var(--hair); }
a.contact-item:hover span { text-decoration: underline; text-underline-offset: 4px; }
.contact-item .icon { color: var(--ink-soft); }

/* FAQ + map: no container chrome. */
.faq-list { padding: 0; }
.faq-item summary:hover { padding-left: 0; }
.map-wrap { border-radius: 4px; border: 1px solid var(--hair); }
.areas-list li::before { box-shadow: none; width: 4px; height: 4px; background: var(--gray-mid); }

/* ---------- Surfaces that must stay surfaces (forms, results) ---------- */
.panel:not(.panel-dark), .review-form-panel, .legal .container > article {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--hair); border-radius: 8px; box-shadow: none;
}
.calc-result, .pay-methods, .form-status, .notice, .legal-warning {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 6px;
}
.calc-result { background: #f7f7f6; border: 1px solid var(--hair); }
.pay-methods { background: transparent; border: 1px solid var(--hair); }
.pay-option { background: #fff; }
.form-status, .notice { background: #f7f7f6; border-color: var(--hair); }
.form-status.is-success, .form-status.is-error { background: #fff; border-color: var(--black); }

/* Booking deposit terms: text on the page, not a black slab. */
.panel-dark {
  background: transparent; color: var(--black);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-top: 1px solid var(--hair-strong); border-radius: 0; box-shadow: none;
  padding: 1.35rem 0 0;
}
.panel-dark a { color: var(--black); }
.panel-dark .small { color: var(--gray); }
.check-list li { color: var(--ink-soft); }
.check-list strong { color: var(--black); }
.check-list .icon { color: var(--black); }

/* Inputs: flat, hairline. */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  background-color: #fff; border: 1px solid rgba(10,10,10,.18); border-radius: 6px; box-shadow: none;
}
input:hover, select:hover, textarea:hover { background-color: #fff; border-color: rgba(10,10,10,.32); }
input:focus, select:focus, textarea:focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(10,10,10,.08); }
textarea[readonly] { background: #f7f7f6; }

/* ---------- Buttons: only real actions, flat ---------- */
.btn { border-radius: 999px; }
.btn-primary { background: var(--black); box-shadow: none; }
.btn-primary:hover { background: #2b2b2b; transform: none; box-shadow: none; }
.btn-secondary { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--black); }
.btn-secondary:hover { background: var(--black); color: #fff; transform: none; }
.btn:active { transform: none; }

/* ---------- Typography & section rhythm ---------- */
.hero h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--black); font-weight: 700; letter-spacing: -.03em; }
h2 { font-weight: 650; }
.section-title { text-align: left; margin-left: 0; max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-cta { text-align: left; }
.review-filters { justify-content: flex-start; }
.review-form-panel { margin-left: 0; }
.price-notes { margin-left: 0; }
.section-alt { background: transparent; border-top: 1px solid var(--hair); }
.eyebrow { letter-spacing: .16em; font-weight: 500; }
.title-decor { position: static !important; width: 112px !important; margin: 0 0 1rem !important; }

/* ---------- Hero: copy left, slider right ---------- */
.hero { padding: clamp(44px, 7vw, 96px) 0 clamp(44px, 6vw, 80px); text-align: left; }
.hero::before { background: none; }
.hero-split .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.hero .lead { margin: 0 0 1.9rem; max-width: 34rem; }
.hero-buttons { justify-content: flex-start; }
.hero-more { margin-top: 1.1rem; font-size: .92rem; }
.hero-more a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 5px; }
.hero-more a:hover { color: var(--black); text-decoration-color: currentColor; }
.trust-row { justify-content: flex-start; gap: .4rem 1.6rem; margin-top: 2rem; font-size: .86rem; color: var(--gray); }
.trust-row li { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--gray); }

/* ---------- Drag-to-clean slider ---------- */
.ba { margin: 0; min-width: 0; }
.ba-stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px;
  background: #f4f4f3; box-shadow: 0 0 0 1px var(--hair);
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: ew-resize; contain: layout paint; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.ba-clip { position: absolute; inset: 0; overflow: hidden; transform: translate3d(-50%,0,0); will-change: transform; }
.ba-clip .ba-img { transform: translate3d(50%,0,0); will-change: transform; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; will-change: transform; pointer-events: none; }
.ba-stage.is-ready .ba-handle { left: 0; }
.ba-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 .5px rgba(10,10,10,.25); }
.ba-grip {
  position: absolute; top: 50%; left: 0; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; background: #fff; color: var(--black); border: 1px solid rgba(10,10,10,.22);
  display: flex; align-items: center; justify-content: center;
}
.ba-tag { position: absolute; top: 12px; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--black); background: rgba(255,255,255,.92); padding: .22rem .5rem; border-radius: 3px; pointer-events: none; }
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
.ba-range { position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; margin: 0; opacity: 0; pointer-events: none; }
.ba-stage:focus-within { box-shadow: 0 0 0 2px var(--black); }
.ba-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .7rem; font-size: .82rem; color: var(--gray); }
.ba-note { font-size: .7rem; letter-spacing: .06em; color: #6f6f6f; }

/* ---------- Stats: plain figures between hairlines ---------- */
.stats { padding: 0 0 clamp(40px, 6vw, 72px); }
.stats .container { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; padding-top: 0; padding-bottom: 0; max-width: 1180px; }
.stats-grid { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 1.6rem 0; text-align: left; }
.stat { padding-left: 1.2rem; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left-color: var(--hair); }
.stat-value { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.stat-label { font-size: .86rem; }

/* Spray decoration now sits quietly under "How it works". */
.how-spray.hero-spray { position: static; transform: none; width: 150px; margin: 2.75rem auto 0; opacity: .85; }

/* ---------- Footer: same content, flat ---------- */
.site-footer { background: #111; }
.site-footer::before { content: none; }
.footer-col a:hover { transform: none; }

/* Floating WhatsApp bubble stays round. Solid (no backdrop blur) so it costs
   nothing when it floats over the slider while dragging. */
.whatsapp-float { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(10,10,10,.12); box-shadow: 0 6px 18px -6px rgba(0,0,0,.3); }
.back-to-top { background: #111; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }

/* Scroll reveal: a soft fade only, no blur. */
.js .reveal { filter: none; transform: translateY(10px); transition: opacity .6s var(--ease-fluid), transform .6s var(--ease-fluid); }
.js .reveal.in { transform: none; }

/* Legal pages / 404 */
.legal .back { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.legal .back:hover { transform: none; text-decoration: underline; }
body.error404 .legal .container { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--hair); box-shadow: none; border-radius: 8px; }

/* ---------- Mobile menu: opaque, so nothing shows through ---------- */
@media (max-width: 900px) {
  .nav-menu { background: #f8f8f8; -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: var(--hair); }
  .menu-toggle { background: transparent; }
}

@media (max-width: 1024px) {
  .hero-split .hero-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .ba { max-width: 640px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 32px; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .hero-buttons { flex-direction: row; flex-wrap: wrap; }
  .hero-buttons .btn { width: auto; flex: 1 1 auto; }
  .trust-row { flex-direction: row; align-items: center; justify-content: flex-start; }
  .stats-grid { gap: 1.3rem 1rem; }
  .stat, .stat:first-child { padding-left: 0; }
  .ba-grip { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; }
}
@media print { .ba-handle, .ba-tag { display: none; } }