/* Shared styles for generated pages: blog, and later the city and services pages.
   The homepage carries its own styles from the design export and is untouched by
   this file. Brand: navy #12315E, blue #2176FF, Inter, 4px button radius. */

/* Palette taken from the approved homepage design, not invented here. The homepage
   is the design everyone signed off on, so the shared chrome matches IT rather than
   the homepage being bent to match a generic stylesheet. */
:root {
  --navy: #12315E;
  --blue: #2176FF;
  --blue-ink: #0B5ED7;
  --ink: #12315E;
  --muted: #5A6474;
  --line: #E0DCD1;
  --bg-soft: #FBFAF7;

  /* Chrome */
  --head-bg: #FBFAF7;
  --head-line: #E6E2D9;
  --foot-bg: #12315E;
  --foot-ink: #BFD5FA;
  --foot-muted: #BFD5FA;


  /* Tokens inherited from the pages ported out of hand-written HTML. --link and
     --wash came from their own :root blocks. --gray-medium, --light-bg and
     --border-radius were REFERENCED by the legal pages and never defined anywhere,
     so they had been silently falling back to nothing on the live site.
     These live INSIDE the main :root deliberately: appended at the end of the file
     they were once removed by a range-splice that rewrote a later section. */
  --link: #0B5ED7;
  --wash: #FBFAF7;
  --gray-medium: #5A6474;
  --light-bg: #FBFAF7;
  --border-radius: 4px;

  /* Retained for the few places that genuinely want a narrower measure. Section
     containers no longer use it: one page width, set by the gutter. */
  --wrap: 1080px;
  --prose: 45rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: #0B5ED7; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

/* ONE page gutter, matching the homepage design.
   The design export puts every top-level section on 48px horizontal padding, full
   width. This was a centred 1080px box, which put the header and footer 197px from
   the edge against the hero's 48px: the chrome was visibly indented relative to the
   page under it. Match the design rather than the other way round.
   clamp keeps it from being cramped on a phone while landing exactly on 48px at any
   desktop width, which is what makes the chrome line up with the hero. */
.wrap { max-width: none; margin: 0; padding: 0 clamp(20px, 5vw, 48px); }

/* Reading and grid widths are constrained INSIDE the gutter, so the container stays
   consistent everywhere while long text still stops at a sensible measure. */
.wrap > .page-head, .wrap > .prose, .wrap > .city-block { max-width: var(--prose); }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

/* Header ------------------------------------------------------------------ */

.site-head { border-bottom: 1px solid var(--head-line); background: var(--head-bg); }
.head-inner { display: flex; align-items: center; gap: 32px; min-height: 66px; flex-wrap: wrap; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: 19px; color: var(--navy); text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img { display: block; }

/* align-items matters: without it the nav stretches its flex children, which pulled
   the Coming Soon pill from its natural 27px to 33px and left the text sitting at the
   top of a stretched box instead of centred in it. */
.site-head nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.site-head nav { gap: 26px; }
.site-head nav a {
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 4px 0; border-radius: 0;
}
.site-head nav a:hover { color: var(--blue-ink); }
.site-head nav a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 0 -2px 0 var(--blue); }

/* Pre-launch status badge, carried over from the design export's own header.
   Lives HERE beside the header rules, not appended at the end of the file: the
   previous copy was appended and a later range-splice deleted it, which left the
   badge rendering as plain 17px text for several builds. */
.site-head .badge {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--navy); background: #EFF4FF; border: 1px solid #BFD5FA;
  border-radius: 999px; padding: 5px 12px; white-space: nowrap; line-height: 1.4;
  align-self: center; display: inline-flex; align-items: center;
}

/* Breadcrumbs -------------------------------------------------------------- */

.crumbs { margin: 28px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;
             font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #BFD5FA; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }

/* Page heads and prose ------------------------------------------------------ */

.page-head { padding: 28px 0 8px; max-width: var(--prose); }
.page-head h1 {
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1.18; margin: 0 0 12px;
  color: var(--navy); letter-spacing: -0.02em;
}
.lede { font-size: 19px; color: var(--muted); margin: 0; }

.meta { font-size: 14px; color: var(--muted); margin: 0; }
.meta .sep { color: #BFD5FA; margin: 0 4px; }
.meta .upd { margin-left: 8px; }

.post { padding-bottom: 8px; }

.prose { max-width: var(--prose); padding: 8px 0 40px; }
.prose h2 {
  font-size: 26px; line-height: 1.3; margin: 40px 0 12px; color: var(--navy);
  letter-spacing: -0.01em;
}
.prose h3 { font-size: 20px; margin: 30px 0 8px; color: var(--navy); }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin: 0 0 8px; }
.prose blockquote {
  margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px; font-size: 0.9em;
}
.prose pre {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px; overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose img { border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 40px; }
.tags li {
  font-size: 13px; color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 3px; padding: 5px 12px;
}

/* Cards -------------------------------------------------------------------- */

.cards { list-style: none; padding: 0; margin: 32px 0 56px; display: grid; gap: 20px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.card {
  border: 1px solid var(--line); border-radius: 4px; padding: 24px; background: #fff;
}
.card h2 { font-size: 21px; line-height: 1.3; margin: 8px 0 10px; letter-spacing: -0.01em; }
.card h2 a { color: var(--navy); text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card p { color: var(--muted); margin: 0 0 14px; font-size: 16px; }
.card .more { font-size: 15px; font-weight: 500; text-decoration: none; }
.card .more:hover { text-decoration: underline; }

/* Call to action ----------------------------------------------------------- */

.cta { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 44px 0; }
.cta h2 { margin: 0 0 10px; color: var(--navy); font-size: 24px; letter-spacing: -0.01em; }
.cta p { margin: 0 0 20px; color: var(--muted); max-width: var(--prose); }

/* One button rule. Layout here, colour from the scheme below. */
.btn {
  display: inline-block; text-decoration: none;
  padding: 12px 22px; border-radius: 4px; font-weight: 600; font-size: 16px;
}

/* Footer ------------------------------------------------------------------- */

/* Navy footer, matching the approved homepage design. */
.site-foot { padding: 48px 0 40px; margin-top: 0; background: var(--foot-bg); color: var(--foot-ink); }
/* Capped like the other grids: with a full-width gutter the two columns would
   otherwise sit at opposite ends of a very wide screen. */
.foot-cols { display: grid; gap: 32px; margin-bottom: 32px; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: 2fr 1fr; } }
.site-foot h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--foot-muted); margin: 0 0 14px; font-weight: 600;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-links a { color: #fff; text-decoration: none; font-size: 15px; }
.foot-links a:hover { text-decoration: underline; }
.foot-note { font-size: 14px; color: var(--foot-muted); margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Areas hub ---------------------------------------------------------------- */

.market { margin: 40px 0 8px; }
.market h2 { font-size: 24px; color: var(--navy); margin: 0 0 6px; letter-spacing: -0.01em; }
.market .lede { font-size: 15px; margin: 0 0 20px; }

.area-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 680px) { .area-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .area-list { grid-template-columns: repeat(3, 1fr); } }

/* Each card carries the city's real ZIPs and a line about it. An earlier version
   listed names only: ten boxes of one word each, which read as unfinished. */
.area-list li {
  border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; background: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
.area-list h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.area-list h3 a { color: var(--navy); text-decoration: none; }
.area-list h3 a:hover { text-decoration: underline; }
/* A city we serve but have not written a page for yet is stated, not linked. */
.area-list h3 span { color: var(--ink); }

.area-list .zipline {
  margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.area-list .zipline .count {
  display: inline-block; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 7px; margin-right: 6px; color: var(--navy);
  font-weight: 600; font-variant-numeric: normal;
}
.area-list .blurb { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
.hoods { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hoods a { font-size: 14px; color: var(--blue-ink); }

/* Generated city pages ------------------------------------------------------ */

.city-block { margin: 36px 0; max-width: var(--prose); }
.city-block h2 { font-size: 23px; color: var(--navy); margin: 0 0 12px; letter-spacing: -0.01em; }
.city-block p { margin: 0 0 14px; }
.city-block .note { font-size: 15px; color: var(--muted); }

.zips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.zips li {
  font-variant-numeric: tabular-nums; font-size: 15px; color: var(--navy);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 3px; padding: 6px 12px;
}

/* Service-area map ---------------------------------------------------------- */

.areamap { margin: 8px 0 36px; padding: 0; }
.areamap svg {
  display: block; width: 100%; height: auto; max-width: 680px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px;
}
.areamap figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; max-width: 46rem; }

.pin { fill: #0B5ED7; stroke: #fff; stroke-width: 1.5; }
.pin-on { fill: #12315E; stroke-width: 2.5; }
.pin-label { font: 500 12px Inter, Helvetica, Arial, sans-serif; fill: var(--ink); }
.pin-label-on { font-weight: 700; fill: var(--navy); }

.pin-link { cursor: pointer; }
.pin-link:hover .pin { fill: #12315E; }
.pin-link:hover .pin-label { fill: var(--navy); text-decoration: underline; }
.pin-link:focus-visible .pin { stroke: #12315E; stroke-width: 3; }

/* Real ZIP-area shapes on the service map. The served area reads as one shape; the
   highlighted city is picked out within it. */
.zone { fill: #BFD5FA; stroke: #FFFFFF; stroke-width: 1; }
.zone-on { fill: #2176FF; stroke: #FFFFFF; stroke-width: 1.4; }
.pin-link:hover .zone { fill: #93B8F6; }

/* Data-driven city list inside a content page. */
.citylist { gap: 8px 18px; }
.citylist a, .citylist span { color: var(--navy); font-size: 15px; }
.citylist span { color: var(--muted); }

/* A city stated but not yet linked reads as text, not a disabled link. */
.foot-links span { color: var(--foot-muted); font-size: 15px; }

/* Wordmark ------------------------------------------------------------------
   Two-tone, at the design export's own values: 23px, weight 700, -0.02em, owl 36px.
   Unifying the header had replaced this with a one-colour span at 19px. */
.brand { gap: 11px; }
.brand img { height: 36px; width: auto; }
.wordmark {
  font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy);
  line-height: 1;
}
.wordmark span { color: var(--blue); }

/* Mobile navigation ----------------------------------------------------------
   Below 860px the nav collapses behind a hamburger. Before this the links simply
   wrapped onto two more lines, which pushed the logo hard against the top of the
   page and read as broken rather than compact. */
.navtoggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--head-line);
  border-radius: 4px; padding: 9px 10px; cursor: pointer; line-height: 0;
}
.navtoggle:hover { border-color: var(--blue); }
.navtoggle-bars { display: inline-block; width: 20px; }
.navtoggle-bars i {
  display: block; height: 2px; background: var(--navy); border-radius: 1px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.navtoggle-bars i + i { margin-top: 5px; }

@media (max-width: 860px) {
  .head-inner { min-height: 64px; flex-wrap: nowrap; gap: 16px; }
  .navtoggle { display: block; }

  .site-head nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--head-bg); border-bottom: 1px solid var(--head-line);
    padding: 6px clamp(20px, 5vw, 48px) 18px;
    margin-left: 0;
    display: none;
  }
  .site-head { position: relative; }
  .nav-open .site-head nav { display: flex; }
  .site-head nav a {
    display: block; width: 100%; padding: 13px 0; font-size: 17px;
    border-bottom: 1px solid var(--head-line);
  }
  .site-head nav a[aria-current="page"] { box-shadow: none; }
  .site-head .badge { margin-top: 14px; align-self: flex-start; }

  /* Bars become an X while open. */
  .nav-open .navtoggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .navtoggle-bars i:nth-child(2) { opacity: 0; }
  .nav-open .navtoggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .navtoggle-bars i { transition: none; }
}

/* Hero order on mobile -------------------------------------------------------
   The quote form is the point of the page, and it was landing BELOW the photo
   because it is the grid's second column while the photo sits inside the first.
   display:contents dissolves the left column at mobile so its children and the form
   become siblings, which lets the form be ordered ahead of the photo without moving
   anything in the DOM or disturbing the desktop layout. */
@media (max-width: 860px) {
  [data-herogrid] { display: flex !important; flex-direction: column; gap: 20px; }
  /* !important because the export sets display:flex INLINE on this column, and an
     inline style beats any selector without it. */
  [data-herogrid] > div:first-child { display: contents !important; }
  [data-herogrid] > div:last-child { order: 1; }
  [data-herogrid] [data-herophoto] { order: 2; min-height: 240px; }
}

/* Embedded quote form on city pages -------------------------------------------
   The SAME markup as the homepage panel, pulled from partials/quote-form.html, so
   the two can never drift. Someone landing on a city page from a search converts
   there rather than being sent back to the homepage. */
.quoteband { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 48px 0 56px; margin-top: 8px; }
.quoteband-inner { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .quoteband-inner { grid-template-columns: minmax(0, 1fr) 476px; gap: 56px; } }
.quoteband-copy h2 { margin: 0 0 12px; color: var(--navy); font-size: 26px; letter-spacing: -0.01em; }
.quoteband-copy p { margin: 0; color: var(--muted); max-width: 34rem; }
.quotepoints { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; max-width: 30rem; }
.quotepoints li { display: grid; gap: 3px; }
.quotepoints strong { color: var(--navy); font-size: 16px; font-weight: 600; }
.quotepoints span { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ============================================================================
   DEPTH AND HIERARCHY
   The generated pages measured as: zero images, one typeface, every background a
   near-white, and a heading scale of 42 / 23 / 23 / 23 / 26 / 24. Nothing carried
   emphasis, so the whole page spoke at one volume. These rules are scoped to the
   generated page classes so the approved homepage design is untouched.
   ========================================================================== */

/* A warm paper ground with white cards floating on it, rather than white on white. */
/* Rhythm comes from full-bleed BANDS (white content, navy facts, warm form) rather
   than a page ground, which only ever showed as thin strips between them. */
#main > .wrap, .quoteband, .factband { position: relative; }
#main > .wrap { padding-bottom: 44px; }

/* Real hierarchy. Display sizes get tighter tracking, which is what stops a large
   sans-serif heading reading as merely enlarged body text. */
.page-head h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.032em; line-height: 1.1; max-width: 20ch; }
.page-head .lede { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: #12315E; max-width: 38rem; }
.city-block h2, .market h2, .prose h2 {
  font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.022em; line-height: 1.15;
}
.city-block h2 { margin-bottom: 16px; }

/* An eyebrow rule above each section heading: cheap structure, and it gives the eye
   somewhere to land on a long page of prose. */
.city-block { border-top: 1px solid #E4E0D6; padding-top: 30px; margin: 40px 0; }
.city-block:first-of-type { border-top: 0; padding-top: 0; }

/* Cards lift off the ground instead of being outlined on it. */
.card, .area-list li {
  border-color: #EAE6DD;
  box-shadow: 0 1px 2px rgba(18, 49, 94, 0.04), 0 8px 20px -12px rgba(18, 49, 94, 0.14);
}
.card:hover, .area-list li:hover {
  box-shadow: 0 1px 2px rgba(18, 49, 94, 0.05), 0 14px 30px -14px rgba(18, 49, 94, 0.22);
  transform: translateY(-1px);
}
.card, .area-list li { transition: box-shadow 0.18s ease, transform 0.18s ease; }
@media (prefers-reduced-motion: reduce) { .card, .area-list li { transition: none; } }

/* The fact band: the page's one dark moment, with the real service-area outline
   behind it. That silhouette is the one graphic no competitor can copy, because it
   is the actual shape of what MaidWise covers. */
.factband {
  background: var(--navy); color: #fff; overflow: hidden; margin: 8px 0 0;
  padding: 46px 0 50px;
}
.factband .motif {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  height: 320%; width: auto; opacity: 0.16; pointer-events: none;
}
.factband .motif path { fill: #BFD5FA; }
.factband-inner {
  position: relative; display: grid; gap: 26px 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .factband-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: grid; gap: 4px; }
.fact-n {
  font-size: clamp(34px, 4.6vw, 46px); font-weight: 700; letter-spacing: -0.035em;
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.fact-l { font-size: 14px; color: var(--foot-ink); line-height: 1.35; }

/* The map earns more room: it is the most distinctive thing on the page. */
/* Substantial but not dominant. An earlier max-width:100% here let it fill the whole
   gutter and swallow the page. */
.areamap svg { max-width: 720px; background: #EFF4FF; border-color: #BFD5FA; }

/* City hero: copy and map paired, so the map does the work of an image on a page
   that has none, and the right-hand column is no longer empty. */
.city-hero { display: grid; gap: 28px; align-items: center; margin-bottom: 8px; }
@media (min-width: 1000px) {
  .city-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; }
  .city-hero .page-head { padding-top: 12px; }
  .city-hero .areamap { margin: 0; }
}
.city-hero .areamap svg { max-width: none; width: 100%; }
.city-hero .page-head { max-width: none; }
.city-hero .page-head .lede { max-width: 34rem; }

/* The blocks below the hero, paired on wide screens. */
/* A two-column GRID places blocks in rows, so a short block beside a tall one leaves a
   void the height of the difference and the next row starts below the taller of the two.
   On Fircrest that put a half-page hole under "Scheduling in Fircrest" purely because
   "What a clean includes" beside it is four times longer. It read as unfinished.

   Multi-column flows instead of placing: the blocks pour down the first column and
   continue into the second, and the browser balances the two heights for us. Nothing
   about the markup or the reading order changes. break-inside keeps a block whole. */
.city-cols { display: block; }
@media (min-width: 1000px) {
  .city-cols { columns: 2; column-gap: 56px; }
}
.city-cols .city-block {
  max-width: none;
  margin: 0 0 34px;
  break-inside: avoid;
  /* Chrome honours the shorthand; older WebKit needs its own property. */
  -webkit-column-break-inside: avoid;
}
.city-cols .city-block p { max-width: 38rem; }

/* ============================================================================
   ALTERNATIVE HOMEPAGE (/v2/)
   Built like a published rate card rather than a brochure. The price is the hero,
   because in a category where every competitor hides it behind a form, publishing it
   at display size IS the argument. The service-area silhouette is used here at real
   strength as a structural graphic, not as 16% texture nobody notices.
   ========================================================================== */

.v2hero {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  padding: 64px 0 72px;
}
.v2hero .motif {
  /* Sized so the WHOLE service area is legible. At 260% it was cropped so far in it
     read as abstract polygons, which is the same failure as being invisible. */
  position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
  height: 118%; width: auto; pointer-events: none; opacity: 1;
}
/* Real strength: a visible landmass, not a watermark. */
.v2hero .motif path { fill: #0B5ED7; stroke: #0B5ED7; stroke-width: 2; }

.v2hero-inner { position: relative; display: grid; gap: 44px; align-items: start; }
@media (min-width: 1000px) { .v2hero-inner { grid-template-columns: minmax(0, 1fr) 460px; gap: 64px; } }

.v2eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #BFD5FA; margin: 0 0 18px;
}
.v2price { margin: 0 0 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.v2price-num {
  font-size: clamp(72px, 12vw, 132px); font-weight: 800; letter-spacing: -0.055em;
  line-height: 0.86; color: #fff; font-variant-numeric: tabular-nums;
}
.v2price-unit {
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; color: var(--foot-ink);
  letter-spacing: -0.02em;
}
.v2lede { font-size: 19px; line-height: 1.55; color: var(--foot-ink); margin: 0 0 26px; max-width: 34rem; }

.v2facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 34rem; }
.v2facts li {
  font-size: 15px; color: var(--foot-ink); padding: 11px 0 0; border-top: 1px solid rgba(255,255,255,0.16);
}
.v2facts b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

.v2hero-form { position: relative; }

/* Evidence: numbers doing the talking, in a category that talks in adjectives. */
.v2evidence { background: #fff; padding: 64px 0 60px; border-bottom: 1px solid var(--line); }
.v2evidence h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.028em; color: var(--navy); margin: 0 0 12px; }
.v2sub { color: var(--muted); margin: 0 0 34px; max-width: 40rem; font-size: 17px; }
.v2rows { display: grid; gap: 0; }
.v2row {
  display: grid; gap: 4px 28px; padding: 20px 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 700px) { .v2row { grid-template-columns: 190px minmax(0, 1fr); } }
.v2row:last-child { border-bottom: 1px solid var(--line); }
.v2row-n {
  font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.035em;
  color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1;
}
.v2row-l { color: var(--muted); font-size: 16px; line-height: 1.5; }
.v2note { margin: 28px 0 0; color: var(--muted); max-width: 42rem; font-size: 16px; }

/* Claims as plain numbered statements. Icon cards are what every competitor uses. */
.v2claims { background: var(--bg-soft); padding: 62px 0 66px; border-bottom: 1px solid var(--line); }
.v2claims h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.028em; color: var(--navy); margin: 0 0 34px; }
.v2claimlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 900px) { .v2claimlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 56px; } }
.v2claimlist li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px;
                  padding: 26px 0; border-top: 1px solid #E4E0D6; }
.v2num {
  font-size: 15px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; padding-top: 4px;
}
.v2claimlist h3 { margin: 0 0 8px; font-size: 19px; color: var(--navy); letter-spacing: -0.01em; }
.v2claimlist p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

.v2area { padding: 62px 0 70px; }
.v2area-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .v2area-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; } }
.v2area h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.028em; color: var(--navy); margin: 0 0 14px; }
.v2area p { color: var(--muted); margin: 0 0 14px; }
.v2area .areamap { margin: 0; }
.v2area .areamap svg { max-width: none; width: 100%; }
.v2link { font-weight: 600; }

/* ============================================================================
   PEOPLE-LED HOMEPAGE (/v3/)
   Ben's own edit was to swap "Licensed and insured" for "Hard to get hired here".
   That is the thesis: the decision a customer makes is who gets a key to the house,
   not what a clean costs. No photography until go-live, which is workable, because
   what this page needs is the standard published rather than a picture of a person.
   ========================================================================== */

.v3hero { position: relative; overflow: hidden; background: #fff; padding: 68px 0 74px;
          border-bottom: 1px solid var(--line); }
.v3hero .motif {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  height: 150%; width: auto; opacity: 1; pointer-events: none;
}
.v3hero .motif path { fill: #EFF4FF; stroke: #EFF4FF; stroke-width: 2; }

.v3hero-inner { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .v3hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; } }

.v3eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
             color: var(--blue); margin: 0 0 20px; }
.v3h1 {
  font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.036em;
  color: var(--navy); margin: 0 0 22px; font-weight: 800;
}
/* The second line carries the weight, so it gets the colour rather than italics for
   their own sake. */
.v3h1 em { font-style: normal; color: var(--blue); }
.v3lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 0 28px; max-width: 34rem; }
.v3cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.v3cta-note { font-size: 15px; color: var(--muted); }

.v3hero-panel { background: var(--navy); color: #fff; border-radius: 4px; padding: 28px 30px 30px; }
.v3panel-h { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
             text-transform: uppercase; color: #BFD5FA; }
.v3panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.v3panel-list li { font-size: 16px; line-height: 1.5; color: var(--foot-ink);
                   padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); }
.v3panel-list li:first-child { border-top: 0; padding-top: 0; }

/* The published standard. */
.v3bar { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 64px 0 68px; }
.v3bar h2, .v3why h2, .v3area h2 {
  font-size: clamp(27px, 3.5vw, 38px); letter-spacing: -0.03em; color: var(--navy); margin: 0 0 12px;
}
.v3sub { color: var(--muted); font-size: 17px; margin: 0 0 38px; max-width: 42rem; }
.v3steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .v3steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; } }
.v3steps li { display: grid; grid-template-columns: 58px minmax(0, 1fr);
              padding: 26px 0; border-top: 1px solid #E4E0D6; }
.v3step-n { font-size: 15px; font-weight: 700; color: var(--blue);
            font-variant-numeric: tabular-nums; letter-spacing: 0.04em; padding-top: 4px; }
.v3steps h3 { margin: 0 0 8px; font-size: 19px; color: var(--navy); letter-spacing: -0.012em; }
.v3steps p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

.v3why { padding: 64px 0 66px; border-bottom: 1px solid var(--line); }
.v3why-inner { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .v3why-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 60px; } }
.v3why p { color: var(--muted); margin: 0 0 16px; max-width: 38rem; font-size: 17px; line-height: 1.6; }
/* Price stated once, plainly, as a supporting fact. It was the headline in v2 and
   that was the error. */
.v3price-line { color: var(--ink) !important; }
.v3price-line strong { color: var(--navy); }

.v3guarantee { background: var(--bg-soft); border: 1px solid var(--line);
               border-left: 3px solid var(--blue); border-radius: 4px; padding: 26px 28px; }
.v3g-h { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
         color: var(--muted); margin: 0 0 12px; }
.v3g-b { font-size: 21px; line-height: 1.4; color: var(--navy); margin: 0 0 12px !important;
         letter-spacing: -0.015em; }
.v3g-n { font-size: 15px; margin: 0 !important; }

.v3area { padding: 62px 0 68px; }
.v3area-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .v3area-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; } }
.v3area p { color: var(--muted); margin: 0 0 14px; }
.v3area .areamap { margin: 0; }
.v3area .areamap svg { max-width: none; width: 100%; }
.v3link { font-weight: 600; }

/* ============================================================================
   QUALITY AND SERVICE HOMEPAGE (/v4/)
   The direction Ben chose. RCM's record is the credibility anchor, attributed
   plainly, because every quality signal on the RCM homepage is retrospective and
   MaidWise has no past to point at.
   ========================================================================== */

.v4hero { position: relative; overflow: hidden; background: #fff; padding: 62px 0 68px; }
.v4hero .motif { position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
                 height: 155%; width: auto; pointer-events: none; }
.v4hero .motif path { fill: #EFF4FF; stroke: #EFF4FF; stroke-width: 2; }

.v4hero-inner { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .v4hero-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 60px; } }

.v4eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
             color: var(--blue); margin: 0 0 18px; }
.v4h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.034em;
        color: var(--navy); margin: 0 0 20px; font-weight: 800; }
.v4h1 em { font-style: normal; color: var(--blue); }
.v4lede { font-size: 19px; line-height: 1.55; color: var(--muted); margin: 0 0 28px; max-width: 36rem; }
.v4lede strong { color: var(--navy); font-weight: 700; }
.v4cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.v4cta-note { font-size: 15px; color: var(--muted); }

/* The proof panel. Visibly Rain City Maids', never presented as MaidWise's. */
.v4proof { background: var(--navy); color: #fff; border-radius: 4px; padding: 26px 28px 24px; }
.v4proof-h { margin: 0 0 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
             text-transform: uppercase; color: #BFD5FA; }
.v4proof-grid { display: grid; gap: 18px; }
.v4proof-grid > div { display: grid; gap: 3px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); }
.v4proof-grid > div:first-child { border-top: 0; padding-top: 0; }
.v4proof-n { font-size: clamp(30px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.035em;
             line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.v4proof-l { font-size: 14px; color: var(--foot-ink); line-height: 1.4; }
.v4proof-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14);
                font-size: 13px; line-height: 1.5; color: #BFD5FA; }

.v4section { padding: 62px 0 66px; border-top: 1px solid var(--line); }
.v4quality { background: var(--bg-soft); }
.v4kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
            color: var(--blue); margin: 0 0 12px; }
.v4section h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; color: var(--navy);
                margin: 0 0 34px; max-width: 22ch; line-height: 1.12; }

.v4cols { display: grid; gap: 34px 48px; }
@media (min-width: 860px) { .v4cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4col h3 { margin: 0 0 10px; font-size: 19px; color: var(--navy); letter-spacing: -0.014em;
            padding-top: 16px; border-top: 2px solid var(--blue); }
.v4col p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.58; }

.v4service-inner { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .v4service-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; } }
.v4service h2 { margin-bottom: 20px; }
.v4service p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 16px; max-width: 38rem; }

.v4guarantee { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue);
               border-radius: 4px; padding: 26px 28px; }
.v4g-h { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
         color: var(--muted); margin: 0 0 12px !important; }
.v4g-b { font-size: 21px !important; line-height: 1.4; color: var(--navy) !important;
         margin: 0 0 12px !important; letter-spacing: -0.015em; }
.v4g-n { font-size: 15px !important; margin: 0 !important; }

.v4area-inner { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .v4area-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; } }
.v4area h2 { margin-bottom: 16px; }
.v4area p { color: var(--muted); margin: 0 0 14px; }
.v4price { color: var(--ink) !important; }
.v4price strong { color: var(--navy); }
.v4area .areamap { margin: 0; }
.v4area .areamap svg { max-width: none; width: 100%; }
.v4link { font-weight: 600; }

/* Form in the hero: it is the conversion point and belongs above the fold. The RCM
   proof moves into the left column as a compact strip so both stay visible. */
.v4hero-form { position: relative; }
.v4hero .v4proof {
  margin: 26px 0 0; padding: 20px 22px; background: var(--navy); color: #fff; border-radius: 4px;
}
.v4hero .v4proof-h { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
                     text-transform: uppercase; color: #BFD5FA; }
.v4hero .v4proof-grid { display: grid; gap: 14px 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v4hero .v4proof-grid > div { display: grid; gap: 2px; padding: 0; border: 0; }
.v4hero .v4proof-n { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.03em;
                     line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.v4hero .v4proof-l { font-size: 13px; color: var(--foot-ink); line-height: 1.35; }
.v4hero .v4proof-note { margin: 16px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.14);
                        font-size: 12.5px; line-height: 1.5; color: #BFD5FA; }

.v4close { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 52px 0 58px; }
.v4close h2 { font-size: clamp(24px, 3vw, 32px); color: var(--navy); margin: 0 0 12px; letter-spacing: -0.025em; }
.v4close p { color: var(--muted); margin: 0 0 22px; max-width: 38rem; }

/* Mobile: form BEFORE the proof strip. Stacked naively the proof pushed the form to
   798px on a 414x896 screen, so the thing the page exists for was below the fold.
   display:contents dissolves the copy column so its children and the form become
   siblings and can be ordered, without touching the DOM or the desktop layout. */
@media (max-width: 999px) {
  .v4hero-inner { display: flex !important; flex-direction: column; gap: 24px; }
  .v4hero-copy { display: contents !important; }
  .v4hero-form { order: 1; }
  .v4hero .v4proof { order: 2; margin-top: 0; }
}
@media (max-width: 560px) {
  .v4hero .v4proof-grid { grid-template-columns: 1fr; gap: 12px; }
  .v4hero .v4proof-grid > div { grid-template-columns: 84px minmax(0, 1fr); display: grid;
                                align-items: baseline; gap: 10px; }
}

/* Service types and FAQ, both borrowed in shape from the Rain City Maids homepage. */
.v4services { background: #fff; }
.v4svc h3 { border-top-color: var(--navy); }
.v4svc-p { margin: 0 0 10px !important; font-size: 15px; font-weight: 600; color: var(--blue);
           font-variant-numeric: tabular-nums; }

.v4faq { background: var(--bg-soft); }
.v4faqlist { margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .v4faqlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; } }
.v4faq-item { padding: 24px 0; border-top: 1px solid #E4E0D6; }
.v4faqlist dt { font-size: 18px; font-weight: 650; color: var(--navy); margin: 0 0 8px;
                letter-spacing: -0.012em; }
.v4faqlist dd { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.58; }

/* Photograph and warmth ------------------------------------------------------
   The page was a map, numbers and text. Accurate, but it read like a logistics
   company rather than somebody who cleans houses. This uses the photo the approved
   homepage already has, and warms the palette so the whole thing is not navy on white. */

:root {
  --warm: #F6F1E8;      /* paper, warmer than the previous near-whites */
  --warm-line: #E6DECF;
}

.v4showcase { background: var(--warm); border-top: 1px solid var(--warm-line); padding: 0; }
.v4showcase-inner { display: grid; gap: 0; align-items: stretch; max-width: none; padding: 0; }
@media (min-width: 900px) { .v4showcase-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.v4photo { margin: 0; position: relative; min-height: 320px; overflow: hidden; }
.v4photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.v4showcase-copy { padding: 52px clamp(20px, 5vw, 64px) 56px; align-self: center; }
.v4showcase-copy h2 { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.03em; color: var(--navy);
                      margin: 0 0 16px; line-height: 1.12; }
.v4showcase-copy p { color: #5A5248; font-size: 17px; line-height: 1.6; margin: 0 0 14px; max-width: 34rem; }
.v4showcase .v4kicker { color: var(--accent); }

/* Warmth carried through the rest of the page so the photo is not an island. */
.v4services { background: #fff; }
.v4quality { background: var(--warm); border-top-color: var(--warm-line); }
.v4faq { background: var(--warm); border-top-color: var(--warm-line); }
.v4faq-item { border-top-color: var(--warm-line); }
.v4quality .v4col h3 { border-top-color: var(--accent); }
.v4close { background: var(--warm); border-top-color: var(--warm-line); }

/* The room-by-room checklist. The most concrete thing on the site and the thing every
   competitor either keeps vague or hides. */
.v4check { background: #fff; }
.v4rooms { display: grid; gap: 30px 44px; margin: 6px 0 0; }
@media (min-width: 700px) { .v4rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .v4rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4room h3 { margin: 0 0 12px; font-size: 17px; color: var(--navy); letter-spacing: -0.01em;
             padding-bottom: 10px; border-bottom: 2px solid var(--accent); }
.v4room ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.v4room li { font-size: 15px; color: var(--muted); line-height: 1.45; padding-left: 20px;
             position: relative; }
.v4room li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 5px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
/* Deep-clean items are marked, not hidden: a customer expecting the oven done on a
   routine visit has been misled even if nobody lied. */
.v4room li.deep::after { content: "\00a0\2020"; color: var(--accent); font-weight: 700; }
.v4checknote { margin: 30px 0 10px; font-size: 14px; color: var(--muted); max-width: 44rem; }
.deepkey::before { content: "\2020"; color: var(--accent); font-weight: 700; }
.v4addons { margin: 0; font-size: 15px; color: var(--muted); }
.v4addons strong { color: var(--navy); }

/* Homepage city chips are links. The footer and /areas/ both linked their cities while
   these stayed plain text, so the most prominent list of towns on the site was the one
   that went nowhere. Colour is inherited so the approved chip design is unchanged. */
.citychip { color: inherit; text-decoration: none; }
.citychip:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   COLOUR
   The Tacoma competition is graphical and MaidWise was text on white. Tidy Vibe, the
   one Ben rates, works because of a real three-colour system used in full-bleed bands
   rather than a single accent sprinkled on links. This gives MaidWise the same
   structure using its own navy and blue plus a warm counterweight.
   ========================================================================== */

:root {
  --navy-deep: #12315E;   /* darker than --navy, for full-bleed grounds */
  --sky: #EFF4FF;         /* the pale blue already used by the badge */
  --sky-line: #BFD5FA;
}

/* Alternating grounds so no two adjacent sections are the same value. White, warm,
   pale blue, navy: the page now has rhythm instead of one continuous field. */
.v4services { background: var(--sky); border-top: 1px solid var(--sky-line); }
.v4services .v4col h3 { border-top-color: var(--blue); }
.v4check { background: #fff; }
.v4quality { background: var(--warm); border-top-color: var(--warm-line); }
.v4service { background: var(--sky); border-top: 1px solid var(--sky-line); }
.v4service .v4guarantee { background: #fff; border-color: var(--sky-line); }
.v4area { background: #fff; }
.v4faq { background: var(--warm); border-top-color: var(--warm-line); }

/* The team band: photographs on a deep navy ground, which is where the page gets its
   strongest colour moment and the only place real people appear. */
.v4team { background: var(--navy-deep); color: #fff; padding: 62px 0 66px; position: relative; }
.v4team .v4kicker { color: #BFD5FA; }
.v4team h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; color: #fff;
             margin: 0 0 14px; line-height: 1.12; max-width: 22ch; }
.v4team .v4sub { color: var(--foot-ink); margin: 0 0 34px; }

.v4gallery { display: grid; gap: 22px; }
@media (min-width: 820px) { .v4gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4gallery figure { margin: 0; }
.v4gallery img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.16);
}
.v4gallery figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--foot-ink); }
.v4teamnote { margin: 30px 0 0; font-size: 13px; color: #BFD5FA; }


/* ============================================================================
   COLOUR SCHEMES
   Ben's note: the site is very plain and wants a good colour scheme. It was navy plus
   one blue on near-white, which is monochrome and reads as unfinished rather than
   restrained. Each scheme below keeps the navy and the owl, and changes the SECOND
   colour, which is the one doing the work.
   Switchable via data-scheme on <html> so they can be compared on the real page
   instead of described. The switcher is review-only and comes out before launch.
   ========================================================================== */

/* A. MARIGOLD. Navy with a warm gold. The classic high-contrast pairing: gold is the
   complement of blue, so it carries maximum energy for one accent, and no Tacoma
   competitor uses it (they run blue, teal, purple and coral). Reads premium. */
:root[data-scheme="a"] {
  --accent: #E8A33D;
  --accent-ink: #8A5A12;
  --accent-soft: #FDF3E2;
  --accent-line: #F0DCB8;
  --band: #12315E;
  --band-ink: #BFD5FA;
}

/* B. FOREST. Navy with a fresh green. Ties to the green shirts under consideration,
   and green is the colour the cleaning category associates with eco and fresh. Softer
   contrast than gold because green sits nearer blue on the wheel. */
:root[data-scheme="b"] {
  --accent: #2E8B5F;
  --accent-ink: #12315E;
  --accent-soft: #E9F5EE;
  --accent-line: #BFD5FA;
  --band: #12315E;
  --band-ink: #BFD5FA;
}

/* C. CLAY. Navy with a muted terracotta. Warmer and more domestic than either, closer
   to a home than to a service company. Nearest to Tidy Vibe's coral, so the most
   likely to read as familiar in this market, for better or worse. */
:root[data-scheme="c"] {
  --accent-ink: #8E4319;
  --accent-soft: #FBEFE7;
  --accent-line: #EFD3C1;
  --band: #2A1F1A;
  --band-ink: #E4CDBE;
}

/* The scheme is applied through these, so swapping the block above changes the page
   rather than requiring edits in twenty places. */
.v4kicker, .v4eyebrow { color: var(--accent-ink); }
.v4services { background: var(--accent-soft); border-top-color: var(--accent-line); }
.v4services .v4col h3 { border-top-color: var(--accent); }
.v4quality { background: #fff; }
.v4quality .v4col h3 { border-top-color: var(--accent); }
.v4service { background: var(--accent-soft); border-top-color: var(--accent-line); }
.v4service .v4guarantee { background: #fff; border-color: var(--accent-line);
                          border-left-color: var(--accent); }
.v4faq { background: #fff; }
.v4faq-item { border-top-color: var(--accent-line); }
.v4close { background: var(--accent-soft); border-top-color: var(--accent-line); }
.v4room h3 { border-bottom-color: var(--accent); }
.v4room li::before { border-color: var(--accent); }
.v4room li.deep::after { color: var(--accent-ink); }
.deepkey::before { color: var(--accent-ink); }
.factband { background: var(--band); }
.factband .fact-l { color: var(--band-ink); }
.v4showcase { background: var(--accent-soft); border-top-color: var(--accent-line); }
.v4showcase-copy .v4kicker { color: var(--accent-ink); }
/* Ground and text chosen per scheme by measured contrast; see content/schemes.json. */
/* Explicit hover rather than a brightness filter: a filter on an already-dark blue
   barely moves, and it was fighting an older rule that changed the text colour too.
   Navy on hover measures 12.91 against white. */
.btn { background: var(--btn-bg); color: var(--btn-ink); }
.btn:hover { background: #12315E; color: #FFFFFF; }
.quoteband { background: var(--accent-soft); border-top-color: var(--accent-line); }

/* Review-only switcher. Fixed, small, and removed before launch. */
.schemer {
  position: fixed; right: 14px; bottom: 14px; z-index: 200; display: flex; gap: 6px;
  background: #fff; border: 1px solid #D8D2C6; border-radius: 999px; padding: 6px;
  box-shadow: 0 6px 24px -8px rgba(18, 49, 94, 0.35); font: 600 12px Inter, sans-serif;
}
.schemer button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 7px 13px; color: #12315E;
  background: #F0EDE6;
}
.schemer button[aria-pressed="true"] { background: #12315E; color: #fff; }

/* Scheme comparison page (review only) ---------------------------------------- */
.cols { display: grid; gap: 28px; margin: 30px 0 40px; }
@media (min-width: 1000px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.col-head { padding: 20px 22px 14px; }
.col-head h2 { margin: 0 0 4px; font-size: 22px; color: var(--navy); letter-spacing: -0.02em; }
.col-line { margin: 0; color: var(--muted); font-size: 15px; }

.pv-band { padding: 22px; border-top: 1px solid; border-bottom: 1px solid; }
.pv-kicker { margin: 0 0 8px; font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.13em; }
.pv-h { margin: 0 0 12px; font-size: 20px; color: var(--navy); letter-spacing: -0.02em; }
.pv-rule { height: 2px; width: 54px; margin: 0 0 12px; }
.pv-sub { margin: 0 0 14px; font-size: 14px; color: #5A5248; line-height: 1.5; }
.pv-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.pv-list li { font-size: 13.5px; color: #5A5248; display: flex; gap: 9px; align-items: flex-start; }
.pv-list i { flex: 0 0 auto; width: 9px; height: 5px; margin-top: 5px;
             border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); }
.pv-btn { display: inline-block; padding: 9px 16px; border-radius: 4px;
          font: 600 14px Inter, sans-serif; }

.pv-dark { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 22px; }
.pv-dark div { display: grid; gap: 2px; }
.pv-dark b { font: 800 22px Inter, sans-serif; color: #fff; letter-spacing: -0.03em;
             font-variant-numeric: tabular-nums; }
.pv-dark span { font-size: 11.5px; line-height: 1.3; }

.sw-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 22px 6px; }
.sw { display: grid; gap: 4px; }
.sw span { display: block; height: 34px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.09); }
.sw b { font-size: 11px; color: var(--navy); font-weight: 600; }
.sw code { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; }

.col-notes { padding: 12px 22px 4px; }
.col-notes p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.col-notes strong { color: var(--navy); }
.col-notes .watch strong { color: #8E4319; }
.col-try { padding: 6px 22px 22px; margin: 0; }
.trybtn { display: inline-block; font-size: 14px; font-weight: 600; }
.foot-hint { color: var(--muted); font-size: 14px; margin: 0 0 40px; }


/* SCHEME TOKENS: generated by tooling/build-schemes.js, do not edit by hand */
:root {  /* default: Harbour Bold */
  --accent: #2176FF;
  --accent-ink: #0B5ED7;
  --accent-soft: #EFF4FF;
  --accent-line: #BFD5FA;
  --band: #12315E;
  --band-ink: #BFD5FA;
  --btn-bg: #0B5ED7;
  --btn-ink: #FFFFFF;
  --head-bg: #EFF4FF;
  --head-line: #BFD5FA;
  --strong-bg: #0B5ED7;
  --strong-ink: #FFFFFF;
  --strong-mute: #EFF4FF;
}
:root[data-scheme="a"] {  /* Marigold */
  --accent: #E8A33D;
  --accent-ink: #8A5A12;
  --accent-soft: #FDF3E2;
  --accent-line: #F0DCB8;
  --band: #12315E;
  --band-ink: #C3D2EC;
  --btn-bg: #E8A33D;
  --btn-ink: #12315E;
  --head-bg: #FBFAF7;
  --head-line: #E6E2D9;
  --strong-bg: #FDF3E2;
  --strong-ink: #12315E;
  --strong-mute: #5A6474;
}
:root[data-scheme="b"] {  /* Forest */
  --accent: #2E8B5F;
  --accent-ink: #1C5B3D;
  --accent-soft: #E9F5EE;
  --accent-line: #C4E3D2;
  --band: #123B33;
  --band-ink: #BFE0CE;
  --btn-bg: #1C5B3D;
  --btn-ink: #FFFFFF;
  --head-bg: #FBFAF7;
  --head-line: #E6E2D9;
  --strong-bg: #E9F5EE;
  --strong-ink: #12315E;
  --strong-mute: #5A6474;
}
:root[data-scheme="c"] {  /* Clay */
  --accent: #C9622B;
  --accent-ink: #8E4319;
  --accent-soft: #FBEFE7;
  --accent-line: #EFD3C1;
  --band: #2A1F1A;
  --band-ink: #E4CDBE;
  --btn-bg: #8E4319;
  --btn-ink: #FFFFFF;
  --head-bg: #FBFAF7;
  --head-line: #E6E2D9;
  --strong-bg: #FBEFE7;
  --strong-ink: #12315E;
  --strong-mute: #5A6474;
}
:root[data-scheme="d"] {  /* Tidewater */
  --accent: #0E8FA3;
  --accent-ink: #056B7E;
  --accent-soft: #E6F5F8;
  --accent-line: #B9E0E8;
  --band: #0C2A4A;
  --band-ink: #A9C8E8;
  --btn-bg: #056B7E;
  --btn-ink: #FFFFFF;
  --head-bg: #FBFAF7;
  --head-line: #E6E2D9;
  --strong-bg: #E6F5F8;
  --strong-ink: #12315E;
  --strong-mute: #5A6474;
}
:root[data-scheme="e"] {  /* Harbour */
  --accent: #2176FF;
  --accent-ink: #0B5ED7;
  --accent-soft: #EEF4FF;
  --accent-line: #C9DCFB;
  --band: #0C2247;
  --band-ink: #B9D0F0;
  --btn-bg: #0B5ED7;
  --btn-ink: #FFFFFF;
  --head-bg: #FBFAF7;
  --head-line: #E6E2D9;
  --strong-bg: #EEF4FF;
  --strong-ink: #12315E;
  --strong-mute: #5A6474;
}
:root[data-scheme="f"] {  /* Harbour Deep */
  --accent: #2176FF;
  --accent-ink: #0B5ED7;
  --accent-soft: #DDE9FE;
  --accent-line: #B4CEF9;
  --band: #123C7A;
  --band-ink: #C6DCFF;
  --btn-bg: #0B5ED7;
  --btn-ink: #FFFFFF;
  --head-bg: #EEF4FF;
  --head-line: #C9DCFB;
  --strong-bg: #DDE9FE;
  --strong-ink: #0C2247;
  --strong-mute: #3B5680;
}
:root[data-scheme="g"] {  /* Harbour Bold */
  --accent: #2176FF;
  --accent-ink: #0B5ED7;
  --accent-soft: #EFF4FF;
  --accent-line: #BFD5FA;
  --band: #12315E;
  --band-ink: #BFD5FA;
  --btn-bg: #0B5ED7;
  --btn-ink: #FFFFFF;
  --head-bg: #EFF4FF;
  --head-line: #BFD5FA;
  --strong-bg: #0B5ED7;
  --strong-ink: #FFFFFF;
  --strong-mute: #EFF4FF;
}
/* END SCHEME TOKENS */

/* Scheme-driven header and a strong section ground -----------------------------
   Ben chose Harbour and asked for more colour. In an all-blue scheme "more colour"
   means blue on MORE SURFACES, not a new hue. These two make the header and one
   section take their colour from the scheme, so a variant can carry real coverage
   rather than only tints. */
.site-head { background: var(--head-bg); border-bottom-color: var(--head-line); }

/* One section flips to the scheme's strong ground. Text colours come from the scheme
   too, because on a saturated ground they have to change with it, and both were
   contrast-checked: heading 5.84, body 4.86 on the bold blue. */
.v4service { background: var(--strong-bg); border-top-color: var(--accent-line); }
.v4service h2, .v4service .v4kicker { color: var(--strong-ink); }
.v4service p { color: var(--strong-mute); }
.v4service .v4guarantee { background: rgba(255, 255, 255, 0.94); border-color: transparent;
                          border-left-color: var(--accent); }
.v4service .v4guarantee .v4g-h { color: var(--muted); }
.v4service .v4guarantee .v4g-b { color: var(--navy) !important; }
.v4service .v4guarantee .v4g-n { color: var(--muted) !important; }

/* ---- Detail mosaic -------------------------------------------------------
   Real cleaning photographs against the deep navy. The page is pale blue almost
   everywhere, so this is the one dark, photographic block: chrome and steel read
   well on navy in a way they do not on white, and the section carries the visual
   weight the page was missing.

   Generated by tooling/lib/details.js. Colours are ramp values only. */
.details {
  background: var(--band);
  padding: 84px 0 90px;
}
.details .wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.deyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--band-ink);
}
.dhead {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.dsub {
  margin: 0 0 40px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  /* Ramp 200 on navy measures 8.9:1. The 500 accent would be 2.6:1 and unreadable,
     which is the mistake the ramp discipline note in schemes.json warns about. */
  color: var(--band-ink);
  text-wrap: pretty;
}
.dgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px 24px;
}
.dtile { margin: 0; }
.dtile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  /* The source frames are phone photographs in ordinary houses under ordinary light.
     A hairline stops the paler ones bleeding into the navy at their edges. */
  box-shadow: 0 0 0 1px rgba(191, 213, 250, .22);
}
.dtile figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin-top: 14px;
}
/* A drawn tick rather than a glyph: it is decorative, it must not be read aloud, and
   a font-dependent character would land differently on every machine. */
.dtick {
  grid-row: 1 / span 2;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 3px;
  background: var(--accent);
  position: relative;
}
.dtick::after {
  content: "";
  position: absolute;
  left: 6px; top: 3px;
  width: 4px; height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.dline {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: #FFFFFF;
  text-wrap: pretty;
}
.droom {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--band-ink);
}
@media (max-width: 900px) {
  .details { padding: 62px 0 66px; }
  .details .wrap { padding: 0 24px; }
  .dhead { font-size: 29px; }
  .dgrid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
}
@media (max-width: 560px) {
  .dgrid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .dline { font-size: 14px; }
}

/* ---- Quote form ----------------------------------------------------------
   The design export gave every field a "style-focus" attribute, which is a design-tool
   artefact that does nothing in a browser, and the inline styles suppress the default
   outline. The result was a form with NO visible focus state: usable with a mouse,
   unusable with a keyboard. These rules are the actual focus ring. */
.quoteband input:focus-visible,
.quoteband select:focus-visible,
form input:focus-visible,
form select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(33, 118, 255, .28);
}
/* Fallback for engines without :focus-visible. Slightly broader (fires on mouse focus
   too), which is the safe direction to be wrong in. */
@supports not selector(:focus-visible) {
  form input:focus, form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(33, 118, 255, .28);
  }
}
/* An invalid field must not rely on colour alone, so the ring thickens as well as
   turning red. Scoped to :user-invalid, not :invalid, so an untouched empty required
   field is not shown as an error before anybody has typed anything. */
form input:user-invalid,
form select:user-invalid {
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .18);
}
/* The honeypot. Off-screen rather than display:none, because some bots skip hidden
   fields and some screen readers skip them too; aria-hidden plus tabindex -1 keeps it
   away from assistive tech without hiding it from a naive script. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Status card ---------------------------------------------------------
   Stands where the quote form stands while lead capture is off. It has to hold the
   same visual weight as the panel it replaces, or the hero collapses into a wide
   column of text with a hole beside it. Generated by tooling/lib/status.js. */
.statuscard {
  background: #FFFFFF;
  border: 1px solid var(--accent-line);
  border-top: 3px solid var(--navy);
  border-radius: 4px;
  padding: 26px 26px 22px;
}
.skicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.statuscard h2 {
  margin: 0 0 10px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy);
}
.slede {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: #3D4757;
  text-wrap: pretty;
}
.slist { margin: 0; }
.srow {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--accent-line);
}
.srow dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding-top: 2px;
}
.srow dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #1B2430;
  text-wrap: pretty;
}
/* In the city band the card sits alone in a full-width wrap rather than in a hero
   column, so it must not stretch to the whole page measure. */
.quoteband .statuscard { max-width: 46rem; margin: 0 auto; }
@media (max-width: 620px) {
  .statuscard { padding: 22px 20px 18px; }
  .srow { grid-template-columns: 1fr; gap: 3px; }
}
/* The hero grid stretches its children, which the form wanted (it is tall) and the
   status card does not: stretching drew its border around 200px of empty white below
   the last row. Size to content instead. */
.statuscard { align-self: start; }