/**
 * Honest Maids, clean static build.
 *
 * White ground, pink action, teal accent. Fraunces display, Inter body.
 * Four page layouts (home, money, guide, city hub) each visually distinct.
 * Footer uses the surface background, not charcoal.
 */

/* fonts */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'InterV';src:url('../fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* tokens. Light theme is pure white (owner picked from Option 6 in the
   palette comparison, 2026-08-12). Cool neutrals throughout. Dark theme
   is unchanged.
   To try the warm cream variant instead, swap in:
     --bg:#faf6ee;--surface:#f2ecdd;--card:#fdfaf3;
     --ink:#1c1712;--muted:#6b5f52;--line:#e8dfcc;
     --pink-soft:#f9e5ee;--teal-soft:#dcefe8; */
:root{
  --bg:#ffffff;--surface:#f3f7f9;--card:#ffffff;
  --ink:#14171c;--muted:#59636f;--line:#e6edf2;
  --pink:#d14b90;--pink-deep:#a82d6c;--pink-soft:#fbe9f2;
  --teal:#0fa199;--teal-soft:#e6f6f4;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 18px 40px -22px rgba(20,23,28,.22);
  --r:16px;--r-pill:999px;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'InterV',system-ui,-apple-system,sans-serif;
  --hd:72px; /* header height, referenced by sticky offsets and scroll-margins */
}
/* Light is the default. Dark applies only when the user explicitly toggles it. */
:root[data-theme="dark"]{
  --bg:#0d1215;--surface:#141d21;--card:#151f23;--ink:#eaf1f3;--muted:#93a2a8;--line:#243239;
  --pink:#e86aa8;--pink-deep:#f291c1;--pink-soft:#2a1420;--teal:#3fd0c4;--teal-soft:#12312e;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 48px -24px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#ffffff;--surface:#f3f7f9;--card:#ffffff;--ink:#14171c;--muted:#59636f;--line:#e6edf2;
  --pink:#d14b90;--pink-deep:#a82d6c;--pink-soft:#fbe9f2;--teal:#0fa199;--teal-soft:#e6f6f4;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 18px 40px -22px rgba(20,23,28,.22);
}

/* reset */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.07;letter-spacing:-.015em;text-wrap:balance;margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
/* Interactive elements get a slightly softer focus ring that carries the
   brand color and stays visible on both light and dark grounds. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.btn:focus-visible{outline-offset:3px;box-shadow:0 0 0 4px var(--pink-soft)}
/* Kill the ugly default focus ring inside form summary elements */
summary:focus{outline:none}
summary:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
/* Selection color matches the brand */
::selection{background:var(--pink-soft);color:var(--pink-deep)}
/* Smooth-scroll respects reduced motion and skips when a hash target is jumped to */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;font-size:.86rem}
.skip:focus{left:0}

/* layout */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.ey{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin:0 0 14px}
.ey.teal{color:var(--teal)}
.sec{padding:clamp(22px,3vw,42px) 0}
.sec.tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-h{margin:0 0 clamp(14px,2vw,24px);position:relative}
.sec-h.center{text-align:center;margin-inline:auto;max-width:60ch}
.sec-h h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:10px;letter-spacing:-.02em}
/* Editorial touch: first word of an H2 gets a subtle italic serif inflection.
   Only inside .sec-h to avoid affecting hero H1s. */
.sec-h h2 em{font-style:italic;font-weight:500;color:var(--pink-deep)}
.sec-h p{color:var(--muted);margin:0;font-size:1.02rem}

/* Flag-style eyebrow: centered eyebrows get thin pink flanking rules, so
   they read as printed section labels instead of plain uppercase text.
   Left-aligned eyebrows get a small pink vertical bar before the label. */
.sec-h.center .ey{
  display:inline-flex;align-items:center;gap:14px;
  margin-inline:auto;padding:0 2px;
}
.sec-h.center .ey::before,.sec-h.center .ey::after{
  content:"";display:inline-block;width:clamp(16px,3vw,44px);height:1.5px;background:var(--pink);opacity:.55;
}
.sec-h:not(.center) .ey{
  display:inline-flex;align-items:center;gap:12px;
}
.sec-h:not(.center) .ey::before{
  content:"";display:inline-block;width:22px;height:2px;background:var(--pink);
}

/* Subtle brand watermark on tint sections. A very low-opacity oversized
   Fraunces H sits in the top-right of tinted sections as a ghosted mark,
   turning empty background space into a considered surface. */
.sec.tint,.diff{position:relative;overflow:hidden}
.sec.tint::before,.diff::before{
  content:"H";
  position:absolute;
  top:-40px;right:-14px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:280px;
  line-height:.85;
  color:var(--pink);
  opacity:.045;
  pointer-events:none;
  letter-spacing:-.03em;
}
/* Hide the watermark on narrow viewports. It was meant as a desktop
   luxury to fill empty background air in wide sections; on mobile the
   section is narrow enough that the H becomes the dominant visual
   instead of a whisper. */
@media(max-width:760px){.sec.tint::before,.diff::before{display:none}}
/* Tone the watermark down in dark mode where it would fight the ground. */
:root[data-theme="dark"] .sec.tint::before,:root[data-theme="dark"] .diff::before{opacity:.06;color:var(--teal)}
/* Keep the watermark inside sections that have their own overflow needs.
   Only apply to genuine content sections, not the utility ones. */
.final,.trust,.hd,.ft{position:static}
.final::before,.trust::before,.hd::before,.ft::before{display:none}
.body{max-width:66ch;margin-inline:auto}
.body p{color:var(--muted);font-size:1.05rem;line-height:1.75}
.body p+p{margin-top:1.1em}
.body ul{color:var(--muted);font-size:1.02rem;line-height:1.7;padding-left:22px;margin:1em 0}
.body ul li{margin-bottom:.35em}
.body ul li b,.body p b{color:var(--ink);font-weight:600}
.body a{color:var(--pink);font-weight:500}
.body a:hover{color:var(--pink-deep)}
.body.mid{text-align:center}
.body.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);max-width:78ch}
/* When a card body has two lists, lay them side by side so both fill the
   card width instead of leaving the right of each row empty. */
.body.card.two-lists ul:nth-of-type(1),
.body.card.two-lists ul:nth-of-type(2){display:inline-block;vertical-align:top;width:calc(50% - 12px)}
.body.card.two-lists ul:nth-of-type(1){margin-right:20px}
@media(max-width:640px){
  .body.card.two-lists ul:nth-of-type(1),
  .body.card.two-lists ul:nth-of-type(2){display:block;width:100%;margin-right:0}
}
.body.card.two-lists p:has(+ul:nth-of-type(1))+ul{margin-top:6px}

/* Editorial chapter treatment on intro-split body copy. The first paragraph
   gets a large display-serif drop cap in pink that hangs into the left
   margin, as in a printed magazine article. Subsequent paragraphs get a
   quieter opening: a small pink pilcrow (paragraph mark) that lets the eye
   catch the start of each new beat without the "01/02/03" numbered look
   that reads as a template.

   Emitted by _body_to_chapters() as `.body.chapters` with `.chapter` and
   `.chapter.drop` wrappers around each paragraph. */
.body.chapters{display:grid;gap:22px}
.body.chapters .chapter{position:relative}
.body.chapters .chapter p{margin:0}

/* First paragraph: hanging drop cap in the display serif. The initial
   letter grows to ~3.5x normal size and floats left. Line-height is
   tightened so the cap sits flush with the first three lines of prose. */
.body.chapters .chapter.drop p::first-letter{
  font-family:var(--font-display);
  font-weight:700;
  font-size:4.1em;
  color:var(--pink);
  float:left;
  line-height:.85;
  padding:.08em .12em 0 0;
  margin-top:-.02em;
}
/* Small caps run-in for the opening word right after the drop cap sells
   the "editorial" feel without needing hand-authored labels. Uses CSS
   pseudo-content sparingly, keeping the paragraph text intact. */
.body.chapters .chapter.drop p::first-line{
  font-variant:small-caps;
  letter-spacing:.02em;
  color:var(--ink);
  font-weight:500;
}

/* Subsequent paragraphs: a small pink pilcrow that sits before the first
   word as a quiet beat marker. The paragraph itself stays plain body prose,
   which is the point: the rhythm is punctuation, not numbering. */
.body.chapters .chapter:not(.drop) p::before{
  content:"\00A7"; /* section mark (silcrow) */
  color:var(--pink);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15em;
  margin-right:.5em;
  vertical-align:-.05em;
}

/* Between chapters, a barely-there pink dot rule as a decorative caesura.
   Only shows in intro-split contexts where paragraphs sit close together;
   quiet enough that it does not read as a divider, present enough that the
   page feels considered. */
.body.chapters .chapter + .chapter{
  padding-top:12px;
  background-image:radial-gradient(circle at 6px 4px,var(--pink) 1.5px,transparent 1.5px),radial-gradient(circle at 16px 4px,var(--pink) 1.5px,transparent 1.5px),radial-gradient(circle at 26px 4px,var(--pink) 1.5px,transparent 1.5px);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:auto 8px;
}

@media(max-width:640px){
  .body.chapters .chapter.drop p::first-letter{font-size:3.4em}
}

/* money page intro split: body copy on the left, quick facts callout on the right */
.intro-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);align-items:start}
@media(max-width:820px){.intro-split{grid-template-columns:1fr;gap:24px}}
.intro-split .body{max-width:none;margin:0}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,30px);position:sticky;top:calc(var(--hd) + 14px)}
@media(max-width:820px){.callout{position:static}}
.callout .ey{margin-bottom:14px}
.callout h3{font-size:1.2rem;margin:0 0 14px}
.callout ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.callout li{position:relative;padding-left:26px;font-size:.93rem;color:var(--muted);line-height:1.45}
.callout li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:5px;background:var(--teal-soft)}
.callout li::after{content:"";position:absolute;left:5px;top:7.5px;width:5px;height:8px;border:2px solid var(--teal);border-top:0;border-left:0;transform:rotate(42deg)}
.callout .btn{width:100%;justify-content:center}
.callout .callout-note{font-size:.8rem;color:var(--muted);margin:12px 0 0;text-align:center}

/* buttons */
.btn{border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:.92rem;padding:15px 26px;border-radius:var(--r-pill);transition:transform .18s,background .18s,border-color .18s,color .18s;display:inline-flex;align-items:center;gap:9px}
.btn-p{background:var(--pink);color:#fff;box-shadow:0 10px 26px -12px var(--pink)}
.btn-p:hover{background:var(--pink-deep);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-o:hover{border-color:var(--pink);color:var(--pink)}
.btn-g{background:var(--teal-soft);color:var(--teal);font-weight:600}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.stars{color:var(--teal);letter-spacing:2px;display:inline-flex;gap:1px;align-items:center}
.stars .star{position:relative;display:inline-block;line-height:1;font-family:inherit}
.stars .star.empty{color:color-mix(in srgb,var(--teal) 35%,transparent)}
.stars .star.half{width:1em;overflow:hidden}
.stars .star.half .star-out{color:color-mix(in srgb,var(--teal) 35%,transparent)}
.stars .star.half .star-fill{position:absolute;left:0;top:0;width:55%;overflow:hidden;color:var(--teal)}

/* header */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand img{display:block;height:48px;width:auto;max-width:100%}
.ft-brand-a img{height:64px}
@media(max-width:760px){.brand img{height:38px}}
.nav{display:flex;gap:26px;font-size:.86rem;font-weight:500;color:var(--muted);align-items:center}
.nav > a:hover{color:var(--ink)}
.nav-item.has-drop{position:relative;display:inline-flex;align-items:center;gap:2px}
.nav-plain-link{color:var(--muted);transition:color .18s}
.nav-item.has-drop:hover .nav-plain-link,.nav-plain-link:hover,.nav-plain-link:focus-visible{color:var(--ink)}
.nav-drop-btn{background:transparent;border:0;padding:2px 4px;cursor:pointer;font:inherit;color:var(--muted);display:inline-flex;align-items:center;transition:color .18s;border-radius:4px}
.nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--ink)}
.nav-drop-btn .caret{font-size:.7em;transition:transform .18s;line-height:1}
.nav-drop-btn[aria-expanded="true"] .caret,.nav-item.has-drop:hover .nav-drop-btn .caret{transform:rotate(180deg)}
.nav-drop{position:absolute;top:calc(100% + 10px);left:-14px;min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:41}
.nav-item.has-drop:hover .nav-drop,
.nav-item.has-drop:focus-within .nav-drop,
.nav-drop.open{opacity:1;visibility:visible;transform:none}
.nav-drop-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nav-drop-list.two-col{grid-template-columns:1fr 1fr;gap:2px 6px;min-width:340px}
.nav-drop-list a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--ink);font-size:.9rem;font-weight:500;transition:background .15s,color .15s}
.nav-drop-list a:hover,.nav-drop-list a:focus-visible{background:var(--pink-soft);color:var(--pink-deep);outline:none}
.nav-drop-list .di{font-size:.95rem;line-height:1;width:22px;text-align:center}
.nav-drop-all{display:block;margin-top:6px;padding:10px 12px;border-top:1px solid var(--line);color:var(--pink);font-size:.82rem;font-weight:600;transition:color .18s}
.nav-drop-all:hover{color:var(--pink-deep)}
.hd-r{display:flex;align-items:center;gap:16px}
.hd-tel{font-size:.86rem;font-weight:600;letter-spacing:.01em}
.pill{background:var(--pink);color:#fff;padding:9px 18px;border-radius:var(--r-pill);font-size:.8rem;font-weight:600;transition:transform .18s,background .18s}
.pill:hover{background:var(--pink-deep);transform:translateY(-1px)}
.menu-btn{display:none;background:transparent;border:0;color:var(--ink);font-size:1.4rem;cursor:pointer;width:44px;height:44px;place-items:center;margin-right:-10px}
@media(max-width:760px){
  .hd-tel{display:none}
  /* The header "Text us" pill is redundant on mobile because the sticky
     bottom bar already carries both the text and call CTAs, thumb-reachable.
     Removing the pill also declutters the small-viewport header. */
  .hd .pill{display:none}
  .menu-btn{display:grid}
  html.js .nav{display:none}
  html.js .nav.open{display:flex;position:fixed;top:72px;left:0;right:0;z-index:39;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 0;box-shadow:var(--shadow);max-height:calc(100vh - 72px);overflow-y:auto}
  .nav.open > a,.nav.open .nav-item{padding:0;border-top:1px solid var(--line)}
  .nav.open > a{padding:14px 24px;font-size:1rem}
  .nav.open > a:first-child,.nav.open .nav-item:first-child{border-top:0}
  /* Mobile: the plain link and caret sit on one row; tapping the caret expands the sub-list.
     Drop lists start collapsed and only open when the caret is tapped (.nav-drop.open). */
  .nav.open .nav-item.has-drop{display:flex;flex-wrap:wrap;align-items:stretch}
  .nav.open .nav-plain-link{display:block;flex:1;padding:14px 24px;font-size:1rem;font-weight:600;color:var(--ink)}
  .nav.open .nav-drop-btn{display:flex;align-items:center;justify-content:center;width:56px;padding:0;color:var(--pink);background:var(--pink-soft);border-left:1px solid var(--line);border-radius:0}
  .nav.open .nav-drop-btn .caret{font-size:1.1rem;font-weight:700}
  .nav.open .nav-drop-btn[aria-expanded="true"]{background:var(--pink);color:#fff}
  .nav.open .nav-drop{position:static;flex-basis:100%;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 12px 10px;background:transparent;min-width:0}
  .nav.open .nav-drop.open{display:block}
  /* Hover on mobile (browsers still simulate :hover on tap) must not open it */
  .nav.open .nav-item.has-drop:hover .nav-drop:not(.open),
  .nav.open .nav-item.has-drop:focus-within .nav-drop:not(.open){display:none}
  .nav.open .nav-drop-list{gap:0}
  .nav.open .nav-drop-list.two-col{grid-template-columns:1fr 1fr;min-width:0}
  .nav.open .nav-drop-list a{padding:11px 14px;font-size:.94rem;font-weight:500}
  .nav.open .nav-drop-all{padding:12px 14px;font-size:.86rem;border-top:1px solid var(--line);margin-top:4px}
}
.crumb{font-size:.78rem;color:var(--muted);padding:16px 0 0}
.crumb a{display:inline-block;padding:4px 0}
.crumb a:hover{color:var(--pink)}.crumb .sep{opacity:.5;margin:0 7px}

/* homepage hero */
.hero{padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:840px){.hero .wrap{grid-template-columns:1fr;gap:34px}}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem);margin-bottom:18px}
.hero h1 .u{background:linear-gradient(transparent 68%,var(--teal-soft) 0);padding:0 .04em}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted);max-width:42ch;margin:0 0 22px}
.rating{display:flex;align-items:center;gap:10px;margin:0 0 26px;font-size:.92rem;color:var(--muted)}
.rating .stars{font-size:1rem}.rating b{color:var(--ink)}
.hero-note{margin:16px 0 0;font-size:.82rem;color:var(--muted)}

/* money page hero */
.m-hero{padding:8px 0 clamp(28px,4vw,44px)}
.m-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:center}
@media(max-width:840px){.m-hero .wrap{grid-template-columns:1fr;gap:26px}}
.m-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:6px 0 14px}
.m-lead{font-size:1.08rem;color:var(--muted);max-width:42ch;margin:0 0 18px}
.m-rate,.c-rate,.rate{display:inline-flex;align-items:center;gap:9px;background:var(--teal-soft);color:var(--ink);padding:8px 15px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;margin:0 0 20px;text-decoration:none;transition:background .18s,transform .18s}
.m-rate:hover,.c-rate:hover,.rate:hover{background:color-mix(in srgb,var(--teal-soft) 60%,var(--teal) 12%);transform:translateY(-1px)}
.m-rate .stars,.c-rate .stars,.rate .stars{font-size:.95rem}
.m-note{font-size:.82rem;color:var(--muted);margin:14px 0 0}

/* service guide hero */
.g-hero{padding:8px 0 clamp(30px,4vw,54px)}
.g-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,58px);align-items:center}
@media(max-width:840px){.g-hero .wrap{grid-template-columns:1fr;gap:30px}}
.g-hero h1{font-size:clamp(2.4rem,5vw,3.7rem);margin:6px 0 16px}
.answer{font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.55;color:var(--ink);max-width:40ch;margin:0 0 22px;padding:14px 18px;border-left:3px solid var(--pink);background:linear-gradient(to right,color-mix(in srgb,var(--pink-soft) 60%,transparent),transparent 90%);border-radius:0 10px 10px 0}
.answer b{color:var(--pink-deep)}
.g-sub{color:var(--muted);font-size:.95rem;margin:0 0 24px;max-width:46ch}

/* city hub hero */
.c-hero{padding:8px 0 clamp(30px,4vw,52px)}
.c-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,56px);align-items:center}
@media(max-width:840px){.c-hero .wrap{grid-template-columns:1fr;gap:28px}}
.c-hero h1{font-size:clamp(2.3rem,4.8vw,3.6rem);margin:6px 0 14px}
.c-lead{font-size:1.08rem;color:var(--muted);max-width:44ch;margin:0 0 18px}
.c-rate{display:inline-flex;align-items:center;gap:9px;background:var(--teal-soft);color:var(--ink);padding:8px 15px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;margin:0 0 20px}
.c-rate .stars{font-size:.95rem}

/* Vertical offset on hero images: nudges the image down about 40px on
   desktop so it visually sinks below the text baseline, giving the hero
   more editorial weight instead of both columns aligning to the top. On
   mobile the columns stack so no offset is needed. */
@media(min-width:840px){
  .hero .shot,.hero .ba,
  .m-hero .shot,.m-hero .ba,
  .g-hero .shot,.g-hero .ba,
  .c-hero .shot,.c-hero .ba{margin-top:clamp(20px,3vw,44px)}
}

/* Before/after image slider. Two images stacked; the "before" layer is
   clipped from the right based on the --pos CSS variable, so the visible
   "before" width equals --pos and the rest is the "after" image showing
   through. A native range input sits invisibly on top for drag + keyboard
   control; JS in app.js pushes its value to --pos on input events.
   Falls back to the "before" image visible if JS is off. */
.ba{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);background:#0d1215;--pos:50%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba.ratio{aspect-ratio:16/10}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:1}
.ba-after{z-index:0}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.ba-range::-webkit-slider-runnable-track{height:100%;background:transparent}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:100%;cursor:ew-resize;background:transparent}
.ba-range::-moz-range-track{height:100%;background:transparent}
.ba-range::-moz-range-thumb{width:44px;height:100%;cursor:ew-resize;border:0;background:transparent}
.ba-range:focus-visible ~ .ba-handle::before{outline:3px solid var(--pink);outline-offset:3px}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);z-index:2;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.45)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--pink);box-shadow:0 8px 22px -6px rgba(0,0,0,.5)}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:10px;background:
  linear-gradient(to right,transparent 0,transparent 3px,#fff 3px,#fff 5px,transparent 5px,transparent 15px,#fff 15px,#fff 17px,transparent 17px,transparent 20px),
  linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) no-repeat 0 50% / 6px 6px,
  linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) no-repeat 100% 50% / 6px 6px;
  clip-path:polygon(0 45%,20% 0,20% 30%,80% 30%,80% 0,100% 45%,100% 55%,80% 100%,80% 70%,20% 70%,20% 100%,0 55%);
}
.ba-label{position:absolute;bottom:14px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);color:#fff;backdrop-filter:blur(3px);z-index:1;pointer-events:none}
.ba-label.b{left:14px;background:rgba(20,23,28,.6)}
.ba-label.a{right:14px;background:var(--pink)}
/* On mobile, larger tap target for the handle */
@media(max-width:640px){.ba-handle::before{width:52px;height:52px}}

/* before after shot */
.shot{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.ratio{aspect-ratio:16/10}
.chip{position:absolute;bottom:14px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:rgba(20,23,28,.6);color:#fff;backdrop-filter:blur(3px)}
.chip.b{left:14px}.chip.a{right:14px;background:var(--pink)}
.sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%)}
body.loaded .sweep{animation:sweep 1.5s cubic-bezier(.5,0,.2,1) .35s 1 both}
@keyframes sweep{to{transform:translateX(130%)}}

/* trust strip on homepage */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:15px 24px;font-size:.85rem;color:var(--muted)}
.trust b{color:var(--ink)}.trust .d{color:var(--pink)}

/* service grid for home and services index */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;position:relative}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.svc .ic{width:42px;height:42px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center;font-size:1.15rem;margin-bottom:14px}
.svc h3{font-size:1.15rem;margin-bottom:6px}
.svc p{color:var(--muted);font-size:.9rem;margin:0 0 14px;flex:1}
.svc .go{font-size:.82rem;font-weight:600;color:var(--pink);display:inline-flex;gap:6px;align-items:center}
.svc .go span{transition:transform .2s}.svc:hover .go span{transform:translateX(4px)}

/* service picker on city hub */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.pick{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pick{grid-template-columns:1fr}}
.pk{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.pk:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.pk .ic{width:40px;height:40px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center;font-size:1.1rem;margin-bottom:13px}
.pk h3{font-size:1.1rem;margin-bottom:5px}
.pk p{color:var(--muted);font-size:.87rem;margin:0 0 16px;flex:1}
.pk .go{font-size:.82rem;font-weight:600;color:var(--pink);display:inline-flex;gap:6px;align-items:center}
.pk .go span{transition:transform .2s}.pk:hover .go span{transform:translateX(4px)}

/* honest difference on homepage */
.diff{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.diff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.diff-grid{grid-template-columns:1fr}}
.d-card{padding:4px 0}
.d-card .k{width:30px;height:30px;border-radius:8px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-weight:800;margin-bottom:12px}
.d-card h3{font-size:1.06rem;margin-bottom:6px}
.d-card p{color:var(--muted);font-size:.88rem;margin:0}

/* reviews on homepage */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rev .s{color:var(--teal);letter-spacing:2px;font-size:.9rem;margin-bottom:10px}
.rev q{font-family:var(--font-display);font-size:1.08rem;line-height:1.45;color:var(--ink);quotes:none}
.rev .who{margin-top:14px;font-size:.84rem;font-weight:600;color:var(--muted)}
.rev .who i{font-style:normal;color:var(--teal);font-weight:500}

/* local reviews for money and city hub. Desktop: 3-column grid. Mobile: a
   native horizontal scroll strip with scroll-snap, so a user swipes with
   the same gesture they use everywhere else (no carousel widget, no JS,
   every review still in the HTML for Google to see). */
.mrev{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){
  .mrev{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:4px 24px 16px;
    margin-inline:-24px;
    gap:12px;
  }
  .mrev::-webkit-scrollbar{display:none}
}
.mr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
@media(max-width:820px){.mr{flex:0 0 86%;scroll-snap-align:center}}
.mr .s{color:var(--teal);letter-spacing:2px;font-size:.88rem;margin-bottom:9px}
.mr q{font-family:var(--font-display);font-size:1.02rem;line-height:1.42;quotes:none}
.mr .who{margin-top:12px;font-size:.82rem;font-weight:600;color:var(--muted)}

/* trust band on money page */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:720px){.band{grid-template-columns:1fr 1fr}}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.bcard .big{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--pink-deep);line-height:1}
.bcard .big .stars{color:var(--teal);font-size:1.2rem}
.bcard .lab{font-size:.8rem;color:var(--muted);margin-top:7px}

/* pricing card on money page */
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,38px);box-shadow:var(--shadow);max-width:900px;margin:0 auto}
@media(max-width:720px){.price{grid-template-columns:1fr}}
.price h3{font-size:1.5rem;margin-bottom:10px}
.price ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.price li{padding-left:24px;position:relative;font-size:.92rem;color:var(--muted)}
.price li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--pink-soft)}
.price li::after{content:"";position:absolute;left:4.5px;top:6.5px;width:4px;height:7px;border:2px solid var(--pink);border-top:0;border-left:0;transform:rotate(42deg)}
.price .aside{background:var(--surface);border-radius:14px;padding:22px;text-align:center}
.price .aside .q-label{font-size:.82rem;color:var(--muted);margin-bottom:12px}

/* local character split on city hub */
.local{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,4vw,52px);align-items:center}
@media(max-width:820px){.local{grid-template-columns:1fr;gap:26px}}
.local .body p{font-size:1.05rem}
.local .shot{aspect-ratio:4/3}

/* checklist on service guide */
.check{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 34px}
@media(max-width:820px){.check{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.check{grid-template-columns:1fr}}
.ck-col h3{font-size:1.02rem;margin-bottom:12px;padding-bottom:9px;border-bottom:2px solid var(--teal-soft);display:flex;align-items:center;gap:8px}
.ck-col h3 .rm{font-size:1.1rem}
.ck-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ck-col li{position:relative;padding-left:26px;font-size:.92rem;color:var(--muted);line-height:1.4}
.ck-col li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:5px;background:var(--teal-soft)}
.ck-col li::after{content:"";position:absolute;left:5.5px;top:6px;width:5px;height:9px;border:2px solid var(--teal);border-top:0;border-left:0;transform:rotate(42deg)}

/* home "Meet Honest Maids": editorial story chunks (three short beats with
   mini-eyebrows) that read faster than one solid wall of prose. */
.story-body{display:grid;gap:26px;max-width:none}
.story-chunk{display:grid;gap:8px}
.story-chunk .ey{margin:0}
.story-chunk p{margin:0;font-size:1.05rem;line-height:1.7;color:var(--ink)}

/* Standard vs deep, presented as a proper side-by-side comparison instead of
   two stacked bulleted lists inside one card. */
.vs-answer{max-width:60ch;margin:0 auto clamp(22px,3vw,32px);font-size:1.08rem;line-height:1.65;color:var(--ink);text-align:center}
.vs-sub{color:var(--muted);font-size:.92rem;margin:0 0 14px;line-height:1.5}
.vs-rule{max-width:70ch;margin:clamp(22px,3vw,30px) auto 0;color:var(--muted);font-size:.98rem;line-height:1.65;text-align:center}
.vs-rule b{color:var(--ink);font-weight:600}
/* The comparison card lists carry the same checked-item look as the guide
   checklists, so a reader recognizes them at a glance. */
.vs-card ul{margin-top:12px}
.vs-card li{padding-left:22px}

/* Locations on the home page: a nine card grid instead of a flat pill row,
   so each city gets a place, a shape, and its unique description. */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.loc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.loc-grid{grid-template-columns:1fr}}
.loc-card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.loc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.loc-pin{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--pink-soft);color:var(--pink);display:grid;place-items:center}
.loc-pin svg{width:18px;height:18px;display:block}
.loc-body{display:grid;gap:5px;min-width:0}
.loc-body h3{font-size:1.05rem;margin:0}
.loc-body p{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0}
.loc-go{font-size:.78rem;font-weight:600;color:var(--pink);margin-top:6px;display:inline-flex;gap:5px;align-items:center}
.loc-card:hover .loc-go span{transform:translateX(3px)}
.loc-go span{transition:transform .2s;font-family:var(--font-body)}

/* comparison on service guide */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;margin:0 auto}
@media(max-width:640px){.vs{grid-template-columns:1fr}}
.vs-card{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:var(--card)}
.vs-card.hi{border-color:var(--pink);box-shadow:var(--shadow)}
.vs-card .tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.vs-card.hi .tag{color:var(--pink)}
.vs-card h3{font-size:1.3rem;margin-bottom:12px}
.vs-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vs-card li{font-size:.92rem;color:var(--muted);padding-left:22px;position:relative}
.vs-card li::before{content:"x";position:absolute;left:4px;color:var(--muted);font-weight:600}
.vs-card.hi li::before{content:"+";color:var(--pink);font-weight:700}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:760px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:8px}
.step .n{counter-increment:s;width:38px;height:38px;border-radius:50%;background:var(--pink-soft);color:var(--pink-deep);font-family:var(--font-display);font-weight:700;display:grid;place-items:center;margin-bottom:12px}
.step .n::before{content:counter(s)}
.step h3{font-size:1.02rem;margin-bottom:5px}.step p{color:var(--muted);font-size:.87rem;margin:0}

/* cities */
.cities{display:flex;flex-wrap:wrap;gap:10px}
.city{border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;font-size:.9rem;font-weight:500;background:var(--card);transition:border-color .18s,color .18s,transform .18s}
.city:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-1px)}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.q{background:var(--card);border:1px solid var(--line);border-radius:12px}
.q summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";color:var(--pink);font-size:1.5rem;transition:transform .2s;line-height:1}
.q[open] summary::after{transform:rotate(45deg)}
.q .a{padding:0 22px 20px;color:var(--muted);font-size:.94rem}

/* iMessage-style demo of the text-to-book flow. Sits above the numbered
   "how it works" steps on the home page. Animation reveals messages
   sequentially with typing indicators; the whole thread is present in
   the DOM so screen readers and reduced-motion users see the static
   conversation immediately. */
.imsg{max-width:440px;margin:clamp(24px,4vw,44px) auto 8px;text-align:center}
.imsg-frame{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;text-align:left}
.imsg-hd{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.imsg-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink-soft),var(--teal-soft));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.95rem;line-height:1;
  color:var(--ink);letter-spacing:-.02em;
  flex:0 0 auto;
}
.imsg-avatar b{color:var(--pink);font-weight:700}
.imsg-avatar i{color:var(--teal);font-style:normal;font-weight:600;margin-left:1px}
.imsg-who{display:flex;flex-direction:column;gap:2px;line-height:1.2;min-width:0}
.imsg-name{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink)}
.imsg-status{font-size:.72rem;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.imsg-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 25%,transparent);animation:imsg-pulse 2s ease-in-out infinite}
.imsg-body{padding:16px 14px 12px;display:flex;flex-direction:column;gap:6px;min-height:220px}
.imsg-time{margin:0 0 8px;font-size:.7rem;color:var(--muted);text-align:center;font-weight:600;letter-spacing:.02em}
.imsg-row{display:flex;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.imsg-row.in{opacity:1;transform:none}
.imsg-row.you{justify-content:flex-end}
.imsg-row.them{justify-content:flex-start}
.imsg-bubble{
  max-width:78%;padding:9px 14px;border-radius:20px;
  font-size:.94rem;line-height:1.4;
  word-wrap:break-word;
}
.imsg-row.you .imsg-bubble{background:var(--pink);color:#fff;border-bottom-right-radius:6px}
.imsg-row.them .imsg-bubble{background:var(--surface);color:var(--ink);border-bottom-left-radius:6px}
:root[data-theme="dark"] .imsg-row.them .imsg-bubble{background:color-mix(in srgb,var(--surface) 60%,var(--line))}
/* Consecutive-message bubble tail suppression: if two rows from same side
   in a row, only the LAST one keeps the tail (radius). */
.imsg-row.you + .imsg-row.you .imsg-bubble{border-bottom-right-radius:20px}
.imsg-row.them + .imsg-row.them:not([data-typing]) .imsg-bubble{border-bottom-left-radius:20px}
/* Typing dots */
.imsg-typing{display:inline-flex;gap:4px;padding:12px 16px;background:var(--surface);border-radius:20px;border-bottom-left-radius:6px}
:root[data-theme="dark"] .imsg-typing{background:color-mix(in srgb,var(--surface) 60%,var(--line))}
.imsg-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.4;animation:imsg-blink 1.4s ease-in-out infinite}
.imsg-typing span:nth-child(2){animation-delay:.2s}
.imsg-typing span:nth-child(3){animation-delay:.4s}
.imsg-row[data-typing]{display:none}
.imsg-row[data-typing].in{display:flex}
.imsg-row[data-typing].out{display:none}
.imsg-caption{margin:14px auto 0;max-width:360px;font-size:.82rem;color:var(--muted);line-height:1.5}
@keyframes imsg-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes imsg-blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){
  .imsg-row,.imsg-row[data-typing]{opacity:1;transform:none;display:none}
  .imsg-row:not([data-typing]){display:flex}
  .imsg-dot,.imsg-typing span{animation:none}
}

/* explainer diagrams */
.hm-diagram{margin:30px auto 0;max-width:780px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px}
.hm-diagram:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.hm-diagram svg{display:block;width:100%;min-width:560px;height:auto;border-radius:10px}
.hm-diagram__cap{margin:12px 6px 4px;font-family:var(--font-body);font-size:.9rem;line-height:1.6;color:var(--muted)}
/* Explainer SVGs were authored with light-mode fills (#FFFCFA background,
   #1F1418 text). Invert them in dark mode so cream backgrounds do not sit on
   a dark page. invert(0.92) preserves a touch of the original weighting;
   hue-rotate(180deg) keeps brand-adjacent colors readable rather than
   becoming their crude complement. */
:root[data-theme="dark"] .hm-diagram svg{filter:invert(.92) hue-rotate(180deg)}
:root[data-theme="light"] .hm-diagram svg{filter:none}

/* contact form */
.form{max-width:640px;margin:0 auto;text-align:left}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field .opt{color:var(--muted);font-weight:400}
.field-hint{font-size:.78rem;color:var(--muted);margin-top:-2px}
.form input:invalid:not(:placeholder-shown){border-color:color-mix(in srgb,#c1416a 60%,var(--line))}
.form input,.form select,.form textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;transition:border-color .18s,box-shadow .18s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form textarea{resize:vertical;min-height:120px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.form .btn-p{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.85rem;color:var(--muted);margin:14px 0 0;text-align:center}
.form-note a{color:var(--pink);font-weight:600}
.ok{width:64px;height:64px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;font-size:1.9rem;margin:0 auto 22px}

/* final CTA */
.final{padding:clamp(32px,4.2vw,58px) 0;text-align:center}
.final .box{background:linear-gradient(135deg,var(--pink),var(--pink-deep));border-radius:24px;padding:clamp(38px,5vw,68px) 24px;color:#fff;position:relative;overflow:hidden}
.final h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:12px}
.final p{color:rgba(255,255,255,.9);max-width:42ch;margin:0 auto 24px}
.final .btn-w{background:#fff;color:var(--pink-deep)}
.final .btn-w:hover{transform:translateY(-2px)}
.final .btn-gh{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.final .cta{justify-content:center}

/* "Read the guide" callout that lives on money and service pages when a
   matching published guide covers the same service. Reinforces the guide
   silo as the reference layer behind the conversion pages, and gives
   Google's crawler a strong internal link from every money page back to
   the authority article. */
.guide-cta{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;align-items:center;
  background:var(--pink-soft);
  border:1px solid color-mix(in srgb,var(--pink) 20%,var(--line));
  border-radius:var(--r);
  padding:22px 26px;
  color:var(--ink);
  max-width:900px;margin:0 auto 30px;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.guide-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--pink)}
.guide-cta-body{min-width:0}
.guide-cta h3{font-size:1.15rem;margin:2px 0 6px;line-height:1.25}
.guide-cta p{color:var(--muted);font-size:.9rem;margin:0 0 10px;line-height:1.5}
.guide-cta-go{font-size:.82rem;font-weight:600;color:var(--pink-deep);display:inline-flex;align-items:center;gap:5px}
.guide-cta-mark{font-size:2.2rem;line-height:1;flex:0 0 auto}
@media(max-width:640px){
  .guide-cta{grid-template-columns:1fr;gap:12px;padding:20px}
  .guide-cta-mark{font-size:1.6rem;order:-1}
}

/* silo up links on money page */
.up{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:.9rem}
.up a{border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 17px;color:var(--muted);transition:border-color .18s,color .18s}
.up a:hover{border-color:var(--pink);color:var(--pink)}

/* silo link sets */
.silo-h{font-size:1.1rem;text-align:center;margin:0 0 16px}
.linkset{max-width:920px;margin:0 auto}
.linkset+.linkset{margin-top:30px}
.linkset .cities{justify-content:center}

/* Descriptive-anchor tile grid for silo rows where each link needs its full
   service+city label (better anchor-text signal for Google than a bare pill,
   without cramming the pill row visually). Two columns on desktop, single
   column on mobile, each tile a compact card with a pink corner marker,
   the full anchor text, and a trailing arrow. */
.silo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
@media(max-width:640px){.silo-grid{grid-template-columns:1fr}}
.silo-tile{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;align-items:center;
  padding:12px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  font-size:.92rem;font-weight:500;
  transition:transform .18s,border-color .18s,background .18s;
}
.silo-tile:hover{transform:translateY(-1px);border-color:var(--pink);background:var(--surface)}
.silo-tile:hover .silo-tile-go{color:var(--pink);transform:translateX(2px)}
.silo-tile-mark{
  display:inline-grid;place-items:center;
  width:22px;height:22px;
  border-radius:6px;
  background:var(--pink-soft);color:var(--pink-deep);
  font-size:.72rem;line-height:1;
  flex:0 0 auto;
}
.silo-tile-lbl{min-width:0}
.silo-tile-go{color:var(--muted);font-size:1rem;transition:color .18s,transform .18s;line-height:1}

/* --- guide silo: hub cards --- */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:960px){.g-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g-grid{grid-template-columns:1fr}}
.g-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;color:inherit;min-height:280px}
.g-card.is-live:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.g-card.is-soon{opacity:.72}
.g-card-ic{font-size:1.6rem;line-height:1;margin-bottom:14px;width:44px;height:44px;border-radius:11px;background:var(--pink-soft);display:grid;place-items:center}
.g-card-body{display:flex;flex-direction:column;flex:1;gap:8px}
.g-card-meta{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.g-tag{color:var(--teal)}
.g-dot{opacity:.5}
.g-card h3{font-size:1.15rem;line-height:1.25;margin:0}
.g-card p{color:var(--muted);font-size:.9rem;margin:0 0 auto;line-height:1.55}
.g-go{margin-top:14px;font-size:.82rem;font-weight:600;color:var(--pink);display:inline-flex;gap:6px;align-items:center}
.g-card.is-live:hover .g-go span{transform:translateX(4px)}.g-go span{transition:transform .2s}
.g-soon{margin-top:14px;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}

/* --- guide silo: article layout --- */
.g-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,4vw,54px);align-items:start}
@media(max-width:900px){.g-layout{grid-template-columns:1fr;gap:24px}}
.g-toc{position:sticky;top:calc(var(--hd) + 22px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
@media(max-width:900px){.g-toc{position:static}}
.g-toc .ey{margin-bottom:12px}
.g-toc ol{list-style:none;counter-reset:g;margin:0;padding:0;display:grid;gap:8px}
.g-toc li{counter-increment:g;font-size:.86rem;line-height:1.4}
.g-toc li a{color:var(--muted);display:flex;gap:9px;align-items:baseline;padding:4px 0;transition:color .18s}
.g-toc li a::before{content:counter(g,decimal-leading-zero);font-family:var(--font-display);font-size:.75rem;color:var(--pink);font-weight:700;letter-spacing:.02em;flex:0 0 auto}
.g-toc li a:hover{color:var(--ink)}
.g-article{min-width:0;max-width:70ch}
.g-section{margin:0 0 clamp(32px,4vw,50px);scroll-margin-top:calc(var(--hd) + 24px)}
/* Guide article H1 uses an article-scale size, not the service-page hero
   display scale, so long titles wrap at 2 lines instead of 5. */
.g-hero.article-hero h1{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:22ch}
.g-hero.article-hero .answer{font-size:clamp(1rem,1.4vw,1.15rem);max-width:52ch}
.g-section h2{font-size:clamp(1.55rem,3vw,2rem);margin-bottom:16px;line-height:1.2}
.g-section p{color:var(--ink);font-size:1.02rem;line-height:1.78;margin:0 0 1.1em}
.g-section p+p{margin-top:.9em}
.g-section p b{font-weight:600}
.g-section ul,.g-section ol{color:var(--ink);font-size:1.01rem;line-height:1.75;margin:1em 0 1.4em;padding-left:22px}
.g-section ul li,.g-section ol li{margin-bottom:8px}
.g-section ul li b,.g-section ol li b{color:var(--pink-deep);font-weight:600}
.g-related-svc{background:var(--pink-soft);border-radius:var(--r);padding:clamp(22px,3vw,32px);margin:32px 0}
.g-related-svc .ey{margin-bottom:10px}
.g-related-svc h3{font-size:1.35rem;margin-bottom:8px}
.g-related-svc p{color:var(--ink);font-size:.98rem;line-height:1.6;margin:0 0 16px}
.g-byline{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem;line-height:1.65}
.g-byline p{margin:0}
.g-byline p+p{margin-top:8px}
.g-byline b{color:var(--ink);font-weight:600}
.g-byline-updated{font-size:.82rem;color:var(--muted);opacity:.85}
.g-byline-updated time{color:var(--ink);font-weight:600}
.g-updated{color:var(--teal)}

/* --- guide silo: related mini cards --- */
.g-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto}
@media(max-width:640px){.g-mini-grid{grid-template-columns:1fr}}
.g-mini{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s;align-items:flex-start}
.g-mini:not(.is-soon):hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent}
.g-mini.is-soon{opacity:.72}
.g-mini-ic{font-size:1.2rem;width:36px;height:36px;border-radius:9px;background:var(--pink-soft);display:grid;place-items:center;flex:0 0 auto}
.g-mini-body{display:grid;gap:5px;min-width:0}
.g-mini-tag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.g-mini-title{font-family:var(--font-display);font-size:.98rem;line-height:1.3;color:var(--ink)}

/* footer with surface background, four column grid */
.ft{border-top:1px solid var(--line);background:var(--surface);padding:56px 0 24px;margin-top:20px}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr;gap:32px}}
.ft-brand .brand{display:inline-block;margin-bottom:14px;font-size:1.3rem}
.ft-brand p{color:var(--muted);font-size:.9rem;line-height:1.6;margin:0 0 18px;max-width:36ch}
.ft-contact{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.ft-contact li{color:var(--ink);font-size:.9rem;line-height:1.5;display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline}
.ft-contact .ft-lab{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ft-contact a{color:var(--ink);font-weight:500;transition:color .18s}
.ft-contact a:hover{color:var(--pink)}
.ft-cta .btn{padding:11px 22px;font-size:.86rem}
.ft-col h4{margin:0 0 14px;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ft-col h4.ft-social-h{margin-top:24px}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft-col li{font-size:.9rem;line-height:1.4}
.ft-col a{color:var(--ink);opacity:.85;transition:color .18s,opacity .18s}
.ft-col a:hover{color:var(--pink);opacity:1}
/* Higher specificity than the generic .ft-col ul{display:grid} above, so no
   !important is needed to override it. */
.ft-col ul.ft-social{display:flex;flex-direction:row;gap:10px}
.ft-social li{margin:0}
.ft-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--muted);opacity:1;transition:color .18s,border-color .18s,background .18s,transform .18s}
.ft-social a:hover{color:var(--pink);border-color:var(--pink);background:var(--pink-soft);transform:translateY(-2px);opacity:1}
.ft-social svg{width:18px;height:18px;display:block}
.ft-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 22px;align-items:center}
.ft-rate{display:inline-flex;align-items:center;gap:6px}
.ft-rate .stars{color:var(--teal);letter-spacing:0}
.ft-bot .powered{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--muted);font-weight:600;letter-spacing:.01em;transition:border-color .18s}
.ft-bot .powered b{color:var(--pink);font-weight:800;font-style:normal}
.ft-bot .powered:hover{border-color:var(--pink)}

/* sticky mobile CTA: pinned to the bottom of the viewport on mobile only.
   Both actions are one-thumb-reachable, the pink primary is the default
   call-to-action, and the outline call button carries the phone number so a
   visitor never has to open the header nav to reach us. */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(20,23,28,.18)}
.sticky .btn{flex:1;justify-content:center;padding:14px 10px;font-size:.95rem;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 14px -6px var(--pink)}
.sticky .s2{flex:0 0 auto;box-shadow:none;padding:14px 18px}
.sticky .btn svg{width:16px;height:16px;flex:0 0 auto}
@media(max-width:760px){body.has-sticky .sticky{display:flex}body.has-sticky{padding-bottom:calc(80px + env(safe-area-inset-bottom))}}

/* floating buttons */
.fab{position:fixed;bottom:22px;z-index:48;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px -8px rgba(20,23,28,.45);transition:transform .18s,opacity .3s,background .18s,visibility .3s}
.fab:hover{transform:translateY(-2px)}
.fab:active{transform:translateY(0)}
.to-top{right:22px;background:var(--pink);color:#fff;font-size:1.15rem;opacity:0;visibility:hidden}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--pink-deep)}
.a11y-btn{left:22px;background:var(--teal);color:#fff;display:none}
html.js .a11y-btn{display:grid}
.a11y-btn:hover{filter:brightness(1.06)}
.a11y-btn svg{width:24px;height:24px;fill:currentColor}
@media(max-width:760px){body.has-sticky .fab{bottom:calc(80px + env(safe-area-inset-bottom))}}

/* accessibility panel */
.a11y-panel{position:fixed;left:22px;bottom:78px;z-index:49;width:260px;max-width:calc(100vw - 44px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.a11y-panel.open{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){body.has-sticky .a11y-panel{bottom:calc(136px + env(safe-area-inset-bottom))}}
.a11y-title{font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.a11y-row:first-of-type{border-top:0}
.a11y-row span{font-size:.9rem;font-weight:500}
.a11y-tg{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line);border:0;cursor:pointer;flex:0 0 auto;transition:background .18s}
.a11y-tg::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.a11y-tg[aria-pressed="true"]{background:var(--teal)}
.a11y-tg[aria-pressed="true"]::after{transform:translateX(18px)}
.a11y-reset{margin-top:12px;width:100%;background:transparent;border:1px solid var(--line);border-radius:10px;padding:9px;font-family:inherit;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer}
.a11y-reset:hover{border-color:var(--pink);color:var(--pink)}

/* accessibility modes */
html.a11y-large{font-size:112.5%}
html.a11y-contrast{--muted:var(--ink);--line:#7d8794}
html.a11y-contrast .svc,html.a11y-contrast .pk,html.a11y-contrast .rev,html.a11y-contrast .mr,html.a11y-contrast .q,html.a11y-contrast .bcard,html.a11y-contrast .vs-card{border-width:2px}
html.a11y-contrast .body p,html.a11y-contrast .sec-h p,html.a11y-contrast .svc p,html.a11y-contrast .pk p,html.a11y-contrast .rev .who,html.a11y-contrast .mr .who,html.a11y-contrast .step p{color:var(--ink)}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-motion .reveal{opacity:1!important;transform:none!important}
html.a11y-motion .hero .st,html.a11y-motion .m-hero .st,html.a11y-motion .g-hero .st,html.a11y-motion .c-hero .st{opacity:1!important;transform:none!important}
html.a11y-motion .sweep{display:none!important}

/* Utility classes replacing scattered inline style="..." on 404, contact,
   and thank-you pages so tokens/spacing are consistent. */
.sec-tall{padding-top:clamp(48px,7vw,90px)}
.center-block{text-align:center}
.lead-narrow{margin-inline:auto;max-width:54ch}
.cta-center{justify-content:center}
.cta-top{margin-top:22px}
.pink-strong{color:var(--pink);font-weight:600}
.err-mark{font-size:clamp(4rem,8vw,7rem);color:var(--pink);font-family:var(--font-display);font-weight:700;line-height:1;margin:6px 0 12px}
.err-h1{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px}
.up-margin{margin-top:34px}
.mt-lg{margin-top:26px}
.ty-h{font-size:1.15rem;margin:0 0 12px}
.ty-steps{margin:0;padding-left:22px;color:var(--muted);line-height:1.7;font-size:.95rem}
.ty-steps li{margin-bottom:6px}

/* motion */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
/* Every .st fades in; nth-child rules just cascade the stagger. A 7th+ .st
   sibling still animates (falls to the default .5s delay) instead of staying
   permanently invisible, which was the pre-fix foot-gun. */
.hero .st,.m-hero .st,.g-hero .st,.c-hero .st{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:.5s}
.hero .st:nth-child(1),.m-hero .st:nth-child(1),.g-hero .st:nth-child(1),.c-hero .st:nth-child(1){animation-delay:.05s}
.hero .st:nth-child(2),.m-hero .st:nth-child(2),.g-hero .st:nth-child(2),.c-hero .st:nth-child(2){animation-delay:.13s}
.hero .st:nth-child(3),.m-hero .st:nth-child(3),.g-hero .st:nth-child(3),.c-hero .st:nth-child(3){animation-delay:.21s}
.hero .st:nth-child(4),.m-hero .st:nth-child(4),.g-hero .st:nth-child(4),.c-hero .st:nth-child(4){animation-delay:.29s}
.hero .st:nth-child(5),.m-hero .st:nth-child(5),.g-hero .st:nth-child(5),.c-hero .st:nth-child(5){animation-delay:.37s}
.hero .st:nth-child(6),.m-hero .st:nth-child(6),.g-hero .st:nth-child(6),.c-hero .st:nth-child(6){animation-delay:.45s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .st,.m-hero .st,.g-hero .st,.c-hero .st{opacity:1;transform:none;animation:none}
  body.loaded .sweep{animation:none;display:none}
}

/* Print styles: strip navigation, sticky bars, backgrounds, and any
   decorative animation, then present the article body as a clean printable
   document. Especially useful for the move-out checklist guide, which is
   a genuine "save this to your phone" or "print this before the walkthrough"
   asset. */
@media print{
  :root{--bg:#fff;--surface:#fff;--card:#fff;--ink:#000;--muted:#333;--line:#ccc;--pink:#000;--pink-deep:#000;--pink-soft:#f5f5f5;--teal:#000;--teal-soft:#f5f5f5;--shadow:none}
  body{background:#fff;color:#000;font-size:11pt;padding:0}
  .hd,.ft,.sticky,.to-top,.a11y-btn,.a11y-panel,.skip,.hero-note,.hero .st,.reveal,.sweep,.final,.g-related-svc,.g-mini-grid,.g-mini,.up,.cta,.pill,.btn,.trust,.callout,.crumb,.g-updated{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  main{padding:0}
  .wrap{max-width:none;padding:0 24pt}
  h1,h2,h3{page-break-after:avoid;color:#000!important}
  h1{font-size:22pt}h2{font-size:16pt;margin-top:18pt;padding-top:8pt;border-top:1pt solid #ccc}h3{font-size:12pt}
  p,li{color:#000!important;font-size:11pt;line-height:1.4}
  .g-section{break-inside:auto;page-break-inside:auto;margin-bottom:14pt}
  .g-section h2{margin-top:14pt}
  .g-section ul,.g-section ol{page-break-inside:avoid}
  .g-section li{margin-bottom:4pt}
  .g-layout{display:block}
  .g-toc{border:1pt solid #ccc;padding:12pt;margin:0 0 18pt;background:#f9f9f9;page-break-inside:avoid}
  .g-toc ol{gap:2pt}
  .g-toc a{color:#000!important}
  .hm-diagram{border:1pt solid #ccc;page-break-inside:avoid;margin:12pt 0;background:#fff}
  .g-byline{border-top:1pt solid #ccc;padding-top:8pt;font-size:9pt}
  a[href^="http"]:not(.brand):after{content:" (" attr(href) ")";font-size:8pt;color:#666}
  a{color:#000!important;text-decoration:underline}
  /* Print header identifying the source so a photocopy still reads as ours */
  .g-hero{border-bottom:1pt solid #ccc;padding-bottom:12pt;margin-bottom:18pt}
  .g-hero:before{content:"Honest Maids · honestmaids.la · (818) 414-8012";display:block;font-size:9pt;color:#666;margin-bottom:8pt;letter-spacing:.02em}
}

/* Typography niceties: hanging punctuation on pull quotes, tabular numerals
   on rating text and character counts, tighter kerning on the display face. */
h1,h2,h3{font-feature-settings:"kern" 1,"liga" 1,"calt" 1;text-rendering:optimizeLegibility}
.rev q,.mr q{hanging-punctuation:first;quotes:"\201C" "\201D"}
.stats,.stat-val,.chip,.len,.m-rate b,.c-rate b,.rate b,.rating b{font-variant-numeric:tabular-nums}