/* =========================================================================
   WE CLEAN BALLITO — shared styles
   Design language: "Fresh linen" — linen-white ground, pine green,
   rinse-blue highlight. Fraunces headings, Figtree body.

   TOKEN ROLES (two-jobs bug fix):
   - --on-band : text that ALWAYS sits on a saturated/dark band (hero,
     header, footer, CTA band, plan-sheet). Stays near-white in BOTH themes
     because it never sits on the page's swappable ground.
   - --surface : a card/panel SURFACE fill that legitimately flips dark.
   These are never the same variable.
   ========================================================================= */

:root {
  /* palette — light (default) */
  --ground: #F8F5EE;
  --surface: #FFFFFF;
  --ink: #14201B;
  --muted: #4C5C54;
  --brand: #1B4D3E;        /* CTA fill */
  --brand-text: #1B4D3E;   /* brand as small text */
  --rinse: #7FD0F0;        /* highlight fill — dark ink text on it, never white */
  --ink-on-fill: #14201B;  /* text on rinse fill — fixed both themes */
  --rinse-text: #0B5B80;   /* rinse as small text */
  --on-brand: #FFFFFF;     /* text on brand fill — fixed both themes */

  /* always-dark band family — identical in both themes */
  --band: #12332A;
  --band-2: #0E2A22;       /* slightly darker panel inside a band */
  --on-band: #F4F8F6;      /* primary text on any dark band — fixed */
  --on-band-muted: #BFD3CB;/* secondary text on any dark band — fixed */
  --accent-on-dark: #7FD0F0;/* rinse highlight on dark bands — fixed */
  --band-border: rgba(244,248,246,0.18);

  --line: #E4DED1;         /* hairline borders on light ground */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,32,27,.06), 0 8px 24px rgba(20,32,27,.07);
  --maxw: 1120px;
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, Segoe UI, sans-serif;
}

[data-theme="dark"] {
  --ground: #0C1512;
  --surface: #16231E;      /* card surface flips dark */
  --ink: #EDF3EF;
  --muted: #A3B5AC;
  --brand: #3F7A66;
  --brand-text: #A8DAC6;
  --rinse: #7FD0F0;        /* fill stays; dark ink still goes on it */
  --ink-on-fill: #14201B;
  --rinse-text: #7FD0F0;
  --on-brand: #FFFFFF;

  /* band family unchanged — always dark */
  --band: #070D0B;
  --band-2: #0A1410;
  --on-band: #F4F8F6;
  --on-band-muted: #BFD3CB;
  --accent-on-dark: #7FD0F0;
  --band-border: rgba(244,248,246,0.16);

  --line: #26332C;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
a { color: var(--rinse-text); }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.2rem; }
.muted { color: var(--muted); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* BUG FIX (4): never use `padding: X 0` on a .container. Sections that are
   ALSO the container use margin for vertical rhythm, not padding shorthand. */
.section { margin-top: 56px; margin-bottom: 56px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 13px 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .05s ease, background-color .15s ease, border-color .15s ease;
  max-width: 100%;
  word-break: break-word;      /* BUG FIX (3): wrap big buttons at 320px */
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: #163f33; }
[data-theme="dark"] .btn-primary:hover { background: #4a8c76; }
.btn-rinse { background: var(--rinse); color: var(--ink-on-fill); }  /* BUG FIX (6): dark ink on rinse */
.btn-rinse:hover { background: #69c3e8; color: var(--ink-on-fill); }
.btn-ghost {
  background: transparent;
  color: var(--brand-text);
  border-color: var(--brand);
}
.btn-ghost:hover { background: rgba(27,77,62,.08); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(63,122,102,.18); }

/* ---------- chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}
.chip strong { color: var(--ink); font-weight: 700; }
.chip .star { color: #E0A82E; }

/* ---------- header (always-dark band) ---------- */
.site-header {
  background: var(--band);
  color: var(--on-band);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--band-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--on-band);
  letter-spacing: .01em;
  white-space: normal;      /* BUG FIX (3): brand name wraps at spaces */
  line-height: 1.1;
}
.brand-sub { font-size: .78rem; color: var(--on-band-muted); }
.header-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.header-nav a {
  color: var(--on-band);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .98rem;
}
.header-nav a:hover { background: rgba(244,248,246,.1); }
.header-nav a[aria-current="page"] { color: var(--accent-on-dark); font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: 8px; }

/* theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--band-border);
  background: transparent;
  color: var(--on-band);
  cursor: pointer;
  flex: 0 0 auto;
}
.theme-toggle:hover { background: rgba(244,248,246,.1); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.header-cta { white-space: nowrap; }

/* ---------- hero (always-dark band) ---------- */
.hero {
  background: var(--band);
  color: var(--on-band);
  margin: 0;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
}
.hero-copy { min-width: 0; }      /* BUG FIX (3): grid child min-width:0 */
.hero-media { min-width: 0; }
.hero h1 { color: var(--on-band); }
.hero p { color: var(--on-band-muted); font-size: 1.1rem; }
.hero .eyebrow { color: var(--accent-on-dark); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; margin-bottom: .6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.img-note {
  font-size: .72rem;
  color: var(--on-band-muted);   /* on dark band */
  margin-top: 8px;
  font-style: italic;
}
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
/* chips on the dark hero band read as dark chips */
.hero .chip, .band .chip {
  background: rgba(244,248,246,.07);
  border-color: var(--band-border);
  color: var(--on-band-muted);
}
.hero .chip strong, .band .chip strong { color: var(--on-band); }

/* ---------- generic always-dark band ---------- */
.band {
  background: var(--band);
  color: var(--on-band);
}
.band-inner { padding-top: 48px; padding-bottom: 48px; }
/* BUG FIX (1): full text rules for everything inside any dark band */
.hero h1, .hero h2, .hero h3, .hero h4,
.band h1, .band h2, .band h3, .band h4,
.site-header h1, .site-footer h1,
.plan-sheet h1, .plan-sheet h2, .plan-sheet h3, .plan-sheet h4 { color: var(--on-band); }

.band p, .band li, .site-footer p, .site-footer li,
.plan-sheet p, .plan-sheet li { color: var(--on-band-muted); }

.band .muted, .hero .muted, .site-footer .muted, .plan-sheet .muted { color: var(--on-band-muted); }

.band a, .hero a, .site-footer a, .plan-sheet a { color: var(--accent-on-dark); }

/* BUG FIX (7): link colour rules must NOT override button text colour */
.band a.btn, .hero a.btn, .site-footer a.btn, .plan-sheet a.btn { color: inherit; }
.band a.btn-primary, .hero a.btn-primary, .site-footer a.btn-primary, .plan-sheet a.btn-primary { color: var(--on-brand); }
.band a.btn-rinse, .hero a.btn-rinse, .site-footer a.btn-rinse, .plan-sheet a.btn-rinse { color: var(--ink-on-fill); }
.band a.btn-ghost, .hero a.btn-ghost, .site-footer a.btn-ghost, .plan-sheet a.btn-ghost { color: var(--on-band); border-color: var(--band-border); }
.band a.btn-ghost:hover, .hero a.btn-ghost:hover, .plan-sheet a.btn-ghost:hover, .site-footer a.btn-ghost:hover { background: rgba(244,248,246,.1); }

/* ghost buttons on dark bands */
.band .btn-ghost, .hero .btn-ghost, .plan-sheet .btn-ghost, .site-footer .btn-ghost { color: var(--on-band); border-color: var(--band-border); }

/* notes on dark bands */
.band .note, .hero .note, .plan-sheet .note, .site-footer .note { color: var(--on-band-muted); }

/* ---------- demo-note strip (solid dark background, BUG FIX) ---------- */
.demo-note {
  background: var(--band-2);
  color: var(--on-band-muted);
  font-size: .82rem;
  text-align: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--band-border);
}
.demo-note strong { color: var(--on-band); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid > * { min-width: 0; }        /* BUG FIX (3) */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card .tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rinse-text);
  margin-bottom: 8px;
}
.card .confirm-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--rinse); color: var(--ink-on-fill);
  font-weight: 700; font-family: var(--font-head);
  margin-bottom: 12px;
}

.eyebrow { color: var(--rinse-text); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; margin-bottom: .5rem; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }

/* ---------- section media ---------- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.media-row img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.media-row > * { min-width: 0; }
figure { margin: 0; }
figure .img-note-light { font-size: .72rem; color: var(--muted); font-style: italic; margin-top: 8px; }

/* ---------- needs-content placeholder ---------- */
.needs-content {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  background: transparent;
}
.needs-content strong { color: var(--ink); }

/* =========================================================================
   PLAN YOUR CLEAN — signature feature
   ========================================================================= */
.planner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: start; }
.planner > * { min-width: 0; }
.planner-form { display: flex; flex-direction: column; gap: 28px; }
.pstep legend, .pstep .q {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.12rem;
  margin-bottom: 4px;
  color: var(--ink);
  padding: 0;
}
.pstep { border: 0; padding: 0; margin: 0; }
.helper { font-size: .9rem; color: var(--muted); margin: 2px 0 12px; }

.optgroup { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.opt:hover { border-color: var(--brand); }
/* selected state — BUG FIX (8): selected helper/label text readable in BOTH themes.
   Selected fill is brand green; its text is --on-brand (fixed white) in both. */
.opt[aria-pressed="true"],
.opt.is-selected {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.opt:focus-visible { outline: 3px solid var(--rinse); outline-offset: 2px; }

.sublabel { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }

.when-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: .9rem; }
.field input[type="date"] {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.field input[type="date"]:focus-visible { outline: 3px solid var(--rinse); outline-offset: 2px; }

.weekend-note, .guest-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(127,208,240,.14);
  border: 1px solid rgba(11,91,128,.25);
  color: var(--ink);
  font-size: .92rem;
}
[data-theme="dark"] .weekend-note, [data-theme="dark"] .guest-note {
  background: rgba(127,208,240,.1);
  border-color: rgba(127,208,240,.3);
  color: var(--ink);
}

/* ---- plan sheet: ALWAYS-DARK panel ---- */
.plan-sheet {
  background: var(--band);
  color: var(--on-band);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 90px;
  border: 1px solid var(--band-border);
}
.plan-sheet h3 { color: var(--on-band); margin-top: 0; }
.plan-sheet .sheet-eyebrow { color: var(--accent-on-dark); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.plan-summary {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--on-band);
  background: var(--band-2);
  border: 1px solid var(--band-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 10px 0 16px;
}
.plan-summary .placeholder { color: var(--on-band-muted); font-style: italic; }
.have-ready h4 { color: var(--on-band); margin: 0 0 8px; font-size: 1rem; }
.have-ready ul { margin: 0; padding-left: 1.2rem; }
.have-ready li { color: var(--on-band-muted); margin-bottom: 4px; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.sheet-actions .btn { width: 100%; }
.msg-preview {
  margin-top: 16px;
  font-size: .85rem;
  color: var(--on-band-muted);
  background: var(--band-2);
  border: 1px solid var(--band-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.copied-flash { color: var(--accent-on-dark); font-weight: 700; font-size: .85rem; min-height: 1.2em; }

/* ---------- reviews ---------- */
.rating-big { display: flex; align-items: baseline; gap: 10px; }
.rating-big .num { font-family: var(--font-head); font-size: 3rem; font-weight: 700; color: var(--ink); line-height: 1; }
.rating-big .stars { color: #8A5A00; font-size: 1.4rem; }
[data-theme="dark"] .rating-big .stars { color: #E0A82E; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.contact-grid > * { min-width: 0; }
dl.nap { margin: 0; }
dl.nap dt { font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 12px; }
dl.nap dd { margin: 2px 0 0; font-size: 1.1rem; color: var(--ink); }
.phone-xl { font-family: var(--font-head); font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; color: var(--brand-text); word-break: break-word; }

/* ---------- footer (always-dark band) ---------- */
.site-footer {
  background: var(--band);
  color: var(--on-band);
  margin-top: 64px;
  border-top: 1px solid var(--band-border);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 32px;
}
.footer-inner > * { min-width: 0; }
.site-footer h4 { color: var(--on-band); font-family: var(--font-head); font-size: 1rem; margin: 0 0 10px; }
.site-footer a { color: var(--on-band-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-band); text-decoration: underline; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-brand .brand-name { color: var(--on-band); font-size: 1.3rem; }
.footer-bottom {
  border-top: 1px solid var(--band-border);
  padding: 16px 0;
  font-size: .8rem;
  color: var(--on-band-muted);
  text-align: center;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--rinse); color: var(--ink-on-fill);
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   RESPONSIVE — BUG FIX (3): 320px must not overflow
   ========================================================================= */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; padding-bottom: 40px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .planner { grid-template-columns: 1fr; }
  .plan-sheet { position: static; }
  .media-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  /* nav on its own full-width row */
  .header-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .header-nav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 480px) {
  /* hide header CTA + brand subtitle on very small screens */
  .header-cta { display: none; }
  .brand-sub { display: none; }
  body { font-size: 16px; }
  .hero-actions .btn, .sheet-actions .btn { width: 100%; }
}

@media (max-width: 360px) {
  .container { padding-left: 14px; padding-right: 14px; }
  .optgroup { gap: 8px; }
  .opt { padding: 9px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}