.site *{ box-sizing:border-box; }
  .site{
    --serif:"Hoefler Text","Baskerville","Iowan Old Style","Palatino Linotype",Georgia,serif;
    --sans:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
    --paper:#f5f2ec; --white:#ffffff; --cream:#f4efe6; --ink:#1f2d3d; --ink-soft:#586372;
    --brass:#b08d57; --brass-deep:#9a7736; --tint:#ece3d3; --hair:#e5dfd3;
    /* --brass-deep is the MARK colour: the wordmark's "picked", and nothing else.
       It matches the logo rasters in docs/agency/brand/assets, so the header
       lockup and an email signature are the same colour. Never use it for text -
       that is --brass-text below, which is what the readability bar is about. */
    /* Readability bar (set 2026-08-04): body text 16px+ at 7:1, secondary 14px+ at
       4.5:1, uppercase micro-labels 0.8rem+ at 4.5:1. --brass-deep is 3.7:1 on paper
       and --brass 4.5:1 on navy, so text uses --brass-text on light and --brass-light
       on dark; both brass tokens stay as they are for the brand mark and hairlines. */
    --brass-text:#856428; --ink-soft:#495260;
    /* One reading measure for body and section-intro copy (set 2026-08-07). Before
       this, every block carried its own cap (38ch to 72ch) and nothing lined up with the
       full-width grids beneath it. Fixed in rem rather than ch on purpose: ch scales
       with each block's own font size, so a 1.05rem note and a 1.12rem lead ended on
       different edges. 48rem holds roughly 68-72 characters at these sizes, inside the
       60-75 best-practice range, and every block now stops on the same line.
       Deliberate exceptions: centred bands, the hero lede, and footer columns, which
       read as intentional because they are centred or narrow. */
    --measure:48rem;
    background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6;
    -webkit-font-smoothing:antialiased; font-size:17px;
  }
  .site img{ max-width:100%; display:block; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(24px,4vw,44px); }
  .wrap.narrow > *{ max-width:var(--measure); }

  .serif{ font-family:var(--serif); font-weight:500; }
  a{ color:inherit; text-decoration:none; }

  /* buttons */
  .pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--brass); color:var(--cream); font-weight:600; font-size:.95rem; padding:14px 30px; border-radius:999px; border:none; cursor:pointer; transition:filter .15s ease, transform .15s ease; letter-spacing:.01em; }
  .pill:hover{ filter:brightness(1.06); transform:translateY(-1px); }
  .pill-sm{ padding:11px 24px; font-size:.9rem; }
  .pill-ghost{ background:transparent; color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 32%,transparent); }
  .pill-light{ background:var(--cream); color:var(--ink); }
  .pill-outline{ background:transparent; color:var(--cream); border:1px solid rgba(244,239,230,.5); }

  /* cookie consent bar */
  .consent{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--ink); color:rgba(244,239,230,.92); box-shadow:0 -12px 30px -22px rgba(0,0,0,.8); padding:16px clamp(18px,4vw,44px); }
  .site.consent-open .consent{ display:block; }
  .consent .inner{ max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px 26px; flex-wrap:wrap; }
  .consent p{ margin:0; font-size:.95rem; line-height:1.5; max-width:64ch; }
  .consent .btns{ display:flex; gap:10px; flex:none; }
  @media (max-width:620px){ .consent .btns{ width:100%; } .consent .btns .pill{ flex:1; } }
  .link-brass{ color:var(--brass-text); font-weight:600; border-bottom:1px solid color-mix(in srgb,var(--brass-text) 45%,transparent); padding-bottom:2px; }
  .link-brass:hover{ border-bottom-color:var(--brass-text); }

  :focus-visible{ outline:2px solid var(--brass-deep); outline-offset:3px; border-radius:4px; }

  /* photo placeholders */
  .ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,#e7dcc6 0%,#d3bf9f 52%,#bda683 100%); }
  .ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 30% 25%, rgba(255,250,240,.5), transparent 60%); }
  .ph .ico{ position:absolute; inset:0; margin:auto; width:44px; height:44px; color:rgba(255,255,255,.72); z-index:1; }
  .ph .tag{ position:absolute; bottom:10px; right:12px; z-index:1; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); background:rgba(31,45,61,.34); padding:4px 9px; border-radius:999px; backdrop-filter:blur(2px); }
  .ph.warm2{ background:linear-gradient(135deg,#e2d3ba,#c7ad86); }
  .ph.cool{ background:linear-gradient(135deg,#dcdcd6,#c3bfb4); }
  .ph.sage{ background:linear-gradient(135deg,#d7ddca,#bcc3a6); }

  /* NAV */
  .nav{ position:sticky; top:0; z-index:40; background:rgba(245,242,236,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); }
  .nav .row{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:18px; position:relative; }
  .brand{ display:flex; align-items:center; gap:11px; color:var(--brass); }
  .brand .mk{ width:22px; height:38px; flex:none; }
  .brand .wm{ display:flex; flex-direction:column; line-height:1; }
  .brand .wm .name{ font-family:var(--serif); font-weight:500; font-size:1.34rem; color:var(--ink); }
  .brand .wm .name .pk{ color:var(--brass-deep); }
  .brand .wm .sub{ text-transform:uppercase; letter-spacing:.32em; font-size:.5rem; font-weight:600; margin-top:6px; margin-left:-1px; color:var(--ink-soft); }
  .nav-links{ display:flex; gap:28px; margin-left:auto; align-items:center; }
  .nav-links a{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); white-space:nowrap; }
  .nav-links a:hover, .nav-links a.active{ color:var(--brass-text); }
  .nav-links a.pill, .nav-links a.pill:hover{ color:var(--cream); }
  .menu-btn{ display:none; margin-left:auto; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }
  .menu-btn svg{ width:26px; height:26px; }
  @media (max-width:980px){
    .menu-btn{ display:block; }
    .nav-links{ position:absolute; top:100%; left:0; right:0; margin:0; background:var(--paper); border-bottom:1px solid var(--hair); flex-direction:column; align-items:stretch; gap:0; padding:8px 0; display:none; box-shadow:0 24px 40px -30px rgba(0,0,0,.4); }
    .site.menu-open .nav-links{ display:flex; }
    .nav-links a:not(.pill){ padding:13px clamp(18px,4vw,40px); }
    .nav-links .pill{ margin:10px clamp(18px,4vw,40px); }
  }

  /* page system */
  .page[hidden]{ display:none; }
  .page{ animation:fade .5s cubic-bezier(.2,.7,.2,1); }
  @keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
  @media (prefers-reduced-motion:reduce){ .page{ animation:none; } }

  /* HERO */
  .hero{ position:relative; min-height:clamp(480px,72vh,680px); display:flex; align-items:center; }
  .hero .bg2{ position:absolute; inset:0; background:
      linear-gradient(100deg, rgba(28,22,15,.5) 0%, rgba(28,22,15,.18) 44%, rgba(28,22,15,0) 70%),
      linear-gradient(125deg, #d8cbb2 0%, #c3ac86 48%, #a68d64 100%); }
  .hero .bg2 .tag{ position:absolute; bottom:12px; right:14px; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); background:rgba(31,45,61,.3); padding:4px 9px; border-radius:999px; }
  .hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero .hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(24,19,13,.72) 0%, rgba(24,19,13,.44) 45%, rgba(24,19,13,.1) 72%); }
  .hero .inner{ position:relative; z-index:2; padding-top:48px; padding-bottom:48px; width:100%; }
  .hero h1{ color:#fdfaf4; font-size:clamp(2.3rem,6vw,4.3rem); line-height:1.04; letter-spacing:-.01em; max-width:15ch; margin:0 0 22px; text-shadow:0 2px 30px rgba(0,0,0,.32); }
  .hero .lede{ font-family:var(--serif); color:#fdfaf4; font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.5; max-width:34ch; margin:0 0 30px; text-shadow:0 1px 18px rgba(0,0,0,.45); }

  /* thin trust line */
  .trustline{ border-bottom:1px solid var(--hair); }
  .trustline .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 44px; padding-top:20px; padding-bottom:20px; }
  .trustline .item{ font-size:.84rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
  .trustline .item b{ color:var(--brass-text); font-weight:700; }
  @media (max-width:700px){
    .trustline .row{ flex-direction:column; align-items:flex-start; gap:12px; padding-top:18px; padding-bottom:18px; }
    .trustline .item{ text-align:left; letter-spacing:.1em; }
  }

  /* SECTIONS */
  .band{ padding:clamp(56px,8vw,100px) 0; }
  .kicker{ text-transform:uppercase; letter-spacing:.22em; font-size:.8rem; font-weight:700; color:var(--brass-text); margin:0 0 16px; }
  .lead{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,5vw,3.3rem); line-height:1.05; letter-spacing:-.01em; max-width:18ch; margin:0 0 22px; }
  .lead-sub{ font-family:var(--serif); color:var(--ink-soft); font-size:1.12rem; line-height:1.55; max-width:var(--measure); margin:0 0 50px; }

  /* SERVICE CARDS */
  .cards3{ display:grid; grid-template-columns:1fr; gap:22px; }
  @media (min-width:760px){ .cards3{ grid-template-columns:repeat(3,1fr); } }
  .card{ display:flex; flex-direction:column; }
  .card .ph{ aspect-ratio:1/1; border-radius:4px; flex:none; }
  .card h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--ink); margin:22px 0 10px; }
  .card p{ font-family:var(--serif); font-size:1.04rem; color:var(--ink-soft); line-height:1.5; margin:0 0 20px; }
  .card .pill{ width:100%; margin-top:auto; }

  /* COMPREHENSIVE */
  .col3{ display:grid; grid-template-columns:1fr; gap:38px; }
  @media (min-width:760px){ .col3{ grid-template-columns:repeat(3,1fr); } }
  .col3 h3{ font-family:var(--serif); font-weight:500; font-size:1.6rem; line-height:1.12; color:var(--ink); margin:0 0 16px; }
  .col3 p{ font-family:var(--serif); font-size:1.06rem; color:var(--ink-soft); line-height:1.55; margin:0 0 16px; }
  /* Columns are flex so the closing link sits on a common baseline: bodies differ in
     length, and without this the shortest column's link floated above the others. */
  .col3 > *{ display:flex; flex-direction:column; align-items:flex-start; }
  .col3 > * > .link-brass{ margin-top:auto; padding-top:6px; }

  /* HOW IT WORKS */
  .steps{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--hair); }
  @media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); gap:0 40px; } }
  .step{ padding:30px 0 8px; border-bottom:1px solid var(--hair); }
  @media (min-width:760px){ .step{ border-bottom:none; } }
  .step .n{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--brass); }
  .step h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin:12px 0 10px; color:var(--ink); }
  .step p{ font-family:var(--serif); color:var(--ink-soft); font-size:1rem; line-height:1.5; margin:0; }

  /* PRICING */
  .rates{ display:grid; grid-template-columns:1fr; gap:22px; align-items:stretch; }
  .rate{ background:var(--paper); border:1px solid var(--hair); border-radius:6px; padding:38px 32px 32px; display:flex; flex-direction:column; }
  /* Side by side, every row lines up across the three cards - name, rhythm, price,
     note, divider, features, button - however long each card's copy runs. The card
     is a subgrid of the seven rows the .rates track defines, so the tallest cell in
     each row sets that row's height for all three. */
  @media (min-width:820px){
    .rates{ grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto auto auto auto 1fr auto; }
    .rate{ display:grid; grid-template-rows:subgrid; grid-row:span 7; row-gap:0; }
  }
  .rate.featured{ border:1px solid var(--brass); position:relative; }
  .rate .flag{ position:absolute; top:-11px; left:32px; font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-text); background:var(--cream); border:1px solid var(--brass); border-radius:999px; padding:4px 12px; }
  .rate h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--ink); margin:0 0 4px; }
  .rate .rhythm{ font-size:.84rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 22px; }
  .rate .price{ font-family:var(--serif); font-size:clamp(2.1rem,3.1vw,2.9rem); line-height:1; color:var(--ink); margin:0 0 4px; }
  /* a rate and its unit stay on one line; the deep-clean card has no unit and its
     phrase is free to wrap. */
  .rate .price:has(.per){ white-space:nowrap; }
  .rate .price .per{ font-family:var(--sans); font-size:.98rem; color:var(--ink-soft); letter-spacing:.02em; }
  .rate .pnote{ font-family:var(--serif); font-size:.98rem; color:var(--ink-soft); margin:0 0 24px; }
  .rate .hairline{ height:1px; background:var(--hair); margin:0 0 22px; }
  .rate ul{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
  .rate li{ display:flex; gap:11px; align-items:flex-start; font-family:var(--serif); font-size:1rem; color:var(--ink); line-height:1.45; }
  .rate li svg{ width:17px; height:17px; color:var(--brass); flex:none; margin-top:4px; }
  .rate .pill{ margin-top:auto; width:100%; }
  /* Side by side the button gets its row from the subgrid, so it stretches to fill
     it. The auto margin has to go: it would cancel the stretch, and the ghost
     buttons' 1px border leaves the solid one sitting 2px lower than the other two. */
  @media (min-width:820px){ .rate .pill{ margin-top:0; align-self:stretch; } }
  .rates-note{ font-family:var(--serif); text-align:center; color:var(--ink-soft); font-size:1.02rem; margin:30px auto 0; max-width:var(--measure); }

  /* TWO PAYMENTS */
  .model{ display:grid; grid-template-columns:1fr; gap:22px; }
  @media (min-width:700px){ .model{ grid-template-columns:1fr 1fr; } }
  .mcard{ background:var(--white); border:1px solid var(--hair); border-radius:6px; padding:34px 32px; }
  .mcard .lab{ text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; font-weight:700; color:var(--brass-text); margin:0 0 12px; }
  .mcard h3{ font-family:var(--serif); font-weight:500; font-size:1.45rem; margin:0 0 12px; color:var(--ink); }
  .mcard p{ font-family:var(--serif); color:var(--ink-soft); font-size:1.02rem; line-height:1.55; margin:0; }
  .model-note{ font-family:var(--serif); font-size:1.15rem; font-style:italic; color:var(--ink); border-left:2px solid var(--brass); padding:6px 0 6px 24px; margin:34px 0 0; max-width:var(--measure); line-height:1.5; }

  /* ABOUT */
  .about-grid{ display:grid; grid-template-columns:1fr; gap:0; align-items:stretch; }
  @media (min-width:860px){ .about-grid{ grid-template-columns:1fr 1fr; } }
  .about-grid .ph{ min-height:380px; }
  .about-text{ background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,68px); }
  .about-text h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.06; letter-spacing:-.01em; margin:0 0 20px; }
  .about-text p{ font-family:var(--serif); color:var(--ink-soft); font-size:1.1rem; line-height:1.55; margin:0 0 16px; max-width:var(--measure); }
  .about-text .pill{ align-self:flex-start; margin-top:12px; }
  /* The signature closes the personal paragraph, so the CTA needs room below it
     rather than the 12px it uses when it follows body copy. */
  .about-text .sig + .pill{ margin-top:30px; }

  /* signature line under the founders' own words */
  .sig{ display:flex; align-items:center; gap:14px; margin:26px 0 0; }
  .sig .rule{ width:38px; height:1px; background:var(--brass); flex:none; }
  .sig .who{ font-family:var(--serif); font-style:italic; font-size:1.06rem; color:var(--ink); }
  .sig .where{ display:block; font-family:var(--sans); font-style:normal; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; }

  /* FOUNDERS - one full-width row each, portrait beside the words, and the
     sides alternate so the two read as a spread rather than two matching cards. */
  .founders{ display:grid; grid-template-columns:1fr; gap:clamp(48px,7vw,86px); }
  .founder{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,30px); align-items:start; }
  @media (min-width:860px){
    .founder{ grid-template-columns:auto minmax(0,1fr); gap:clamp(38px,5vw,70px); }
    /* Rob's row mirrors Carolina's: words on the left, portrait on the right.
       The photo track stays the auto one on both sides, or the second portrait
       takes the wide track and the pair stops matching. */
    .founder.flip{ grid-template-columns:minmax(0,1fr) auto; }
    .founder.flip .ph{ grid-area:1/2; }
    .founder.flip .fbody{ grid-area:1/1; }
    /* The measure is narrower than the track it sits in, so on the mirrored row
       push it across to hug the portrait. Without this the slack lands between
       the words and the photo and the row stops reading as a pair. */
    .founder.flip .fbody{ margin-left:auto; text-align:right; }
    /* The role line is letter-spaced, which leaves a trailing gap after its last
       letter. Pull it back so it optically lines up with the text above and below. */
    .founder.flip .frole{ margin-right:-.18em; }
  }
  /* Small square, deliberately not the headline: the words carry this section. */
  .founder .ph{ width:clamp(180px,20vw,240px); aspect-ratio:1/1; border-radius:4px; }
  /* Cap the measure on the block, not the paragraphs, so the name, the role and
     the body all share one left edge when the block is pushed right. */
  /* No cap: the bio fills its grid track, so its outer edge lands on the section
     hairline and both founder rows finish on the same borders. */
  .founder .fbody{ max-width:none; }
  .founder .fname{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0 0 6px; }
  .founder .frole{ text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; font-weight:700; color:var(--brass-deep); margin:0 0 18px; }
  .founder p{ font-family:var(--serif); color:var(--ink-soft); line-height:1.55; margin:0 0 16px; }
  .founder p:last-child{ margin:0; }
  .hairline-full{ height:1px; background:var(--hair); margin:clamp(44px,6vw,66px) 0; }
  /* Standing quote: centred and ruled top and bottom so it closes the section as a
     divider. Measure is deliberately wide (48rem, matching --measure) so the lines run
     long and the block stays shallow - a narrow column at this type size stacked up
     eight lines and read as a heavy vertical slab. */
  .about-quote{ margin:0 auto; max-width:min(var(--measure), 52ch); text-align:center; }
  .about-quote p{ font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,2.6vw,1.95rem); line-height:1.34; color:var(--ink); margin:0; }
  .about-quote::before, .about-quote::after{ content:""; display:block; width:44px; height:2px; background:var(--brass); margin:0 auto; }
  .about-quote::before{ margin-bottom:clamp(22px,2.6vw,30px); }
  .about-quote::after{ margin-top:clamp(22px,2.6vw,30px); }
  @media (max-width:700px){ .about-quote p{ line-height:1.4; } }
  /* Section lead: runs the full wrap width, border to border, at lead type size so a
     full-measure line still reads as an intro rather than sustained body copy. */
  .about-body{ font-family:var(--serif); color:var(--ink); font-size:clamp(1.2rem,1.9vw,1.45rem); line-height:1.5; max-width:none; margin:0 0 18px; }

  /* checklist */
  .checklist{ display:grid; grid-template-columns:1fr; gap:14px 40px; }
  @media (min-width:640px){ .checklist{ grid-template-columns:1fr 1fr; } }
  .ci{ display:flex; gap:12px; align-items:flex-start; font-family:var(--serif); font-size:1.05rem; color:var(--ink); line-height:1.45; }
  .ci svg{ width:18px; height:18px; color:var(--brass); flex:none; margin-top:4px; }

  /* TESTIMONIALS */
  .tcards{ display:grid; grid-template-columns:1fr; gap:22px; }
  @media (min-width:760px){ .tcards{ grid-template-columns:repeat(3,1fr); } }
  .tcard{ background:var(--paper); border:1px solid var(--hair); border-radius:6px; padding:30px 28px; position:relative; }
  .tcard .stars{ color:var(--brass); letter-spacing:3px; font-size:.92rem; margin-bottom:14px; }
  .tcard p{ font-family:var(--serif); color:var(--ink); font-size:1.05rem; line-height:1.5; margin:0 0 18px; }
  .tcard .who{ font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
  .tcard .sample{ position:absolute; top:14px; right:14px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); background:var(--tint); padding:3px 8px; border-radius:999px; }
  .tnote{ text-align:center; font-size:.92rem; color:var(--ink-soft); margin-top:18px; }

  /* AREAS */
  .areas-grid{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--hair); }
  @media (min-width:640px){ .areas-grid{ grid-template-columns:1fr 1fr; column-gap:60px; } }
  @media (min-width:900px){ .areas-grid{ grid-template-columns:repeat(3,1fr); } }
  .arow{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:18px 2px; border-bottom:1px solid var(--hair); }
  .arow .town{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); }
  .arow .pc{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-text); }
  .areas-note{ font-family:var(--serif); color:var(--ink-soft); font-size:1.05rem; margin:26px 0 0; max-width:var(--measure); }

  /* FOR CLEANERS (navy band)
     Readability rules for this band, set 2026-08-04 after reader feedback that the
     text was small and hard to read on the dark background. Body text 16px+ and 7:1
     or better; secondary text 14px+ and 4.5:1 or better; kickers 0.8rem+ at 4.5:1+.
     --brass (4.5:1) and --brass-deep (3.4:1) are too dark on navy, so this band uses
     --brass-light. Scoped to .cleaners so the light pages are untouched. */
  .cleaners{ background:var(--ink); color:var(--cream); --brass-light:#c9a97a; }
  .cleaners .kicker{ color:var(--brass-light); font-size:.8rem; letter-spacing:.22em; }
  .cleaners .lead{ color:#fbf7ef; }
  .cleaners .lead-sub{ color:#ece6da; font-size:1.18rem; line-height:1.6; }
  .offer{ display:grid; grid-template-columns:1fr; gap:16px 44px; margin:0 0 38px; }
  @media (min-width:680px){ .offer{ grid-template-columns:1fr 1fr; } }
  .oi{ display:flex; gap:13px; align-items:flex-start; }
  .oi svg{ width:19px; height:19px; color:var(--brass-light,var(--brass)); flex:none; margin-top:4px; }
  .oi .t{ font-family:var(--serif); font-size:1.16rem; color:#fbf7ef; line-height:1.45; }
  .oi .t small{ display:block; font-family:var(--sans); font-size:1rem; color:#e4ddd0; margin-top:5px; line-height:1.55; }

  /* CLEANER CHARTER */
  .charter-list{ max-width:var(--measure); margin-top:10px; }
  .cprom{ border-top:1px solid var(--hair); padding:26px 0 24px; }
  .cprom:last-child{ border-bottom:1px solid var(--hair); }
  .cprom h3{ font-family:var(--serif); font-weight:500; font-size:1.4rem; color:var(--ink); margin:0 0 8px; letter-spacing:-.005em; display:flex; gap:14px; }
  .cprom h3 .num{ color:var(--brass-text); flex:none; width:16px; }
  .cprom p{ padding-left:30px; }
  .cprom p{ font-family:var(--serif); color:var(--ink-soft); font-size:1.04rem; line-height:1.6; margin:0; max-width:var(--measure); }
  .cprom p a{ color:var(--brass-text); }
  .charter-close{ font-family:var(--serif); font-size:1.18rem; color:var(--ink); background:var(--cream); border-radius:10px; padding:22px 26px; margin-top:34px; max-width:var(--measure); line-height:1.55; }
  .cleaners .cprom{ border-top-color:rgba(244,239,230,.16); }
  .cleaners .cprom:last-child{ border-bottom-color:rgba(244,239,230,.16); }
  .cleaners .cprom h3{ color:#fbf7ef; }
  .cleaners .cprom h3 .num{ color:var(--brass-light); }
  .cleaners .cprom p{ color:#ece6da; font-size:1.12rem; line-height:1.65; }
  .cleaners .cprom p a{ color:var(--brass-light); border-bottom:1px solid color-mix(in srgb,var(--brass-light) 50%,transparent); }
  .cleaners .charter-close{ background:rgba(244,239,230,.1); color:#fbf7ef; font-size:1.22rem; }

  /* BETTER-OFF CALCULATOR (For cleaners) */
  .bo-card{ background:var(--white); border:1px solid var(--hair); border-radius:14px; padding:clamp(26px,4vw,44px); max-width:820px; }
  .bo-results{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px); }
  @media (max-width:560px){ .bo-results{ grid-template-columns:1fr; } }
  .bo-res .bo-who{ font-family:var(--sans); font-size:.84rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--brass-text); margin:0 0 6px; }
  .bo-res .bo-num{ font-family:var(--sans); font-size:clamp(1.9rem,4.5vw,2.6rem); font-weight:700; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; }
  .bo-res .bo-num small{ font-size:1rem; font-weight:600; color:var(--ink-soft); }
  .bo-res .bo-track{ height:12px; background:var(--tint); border-radius:6px; overflow:hidden; margin:12px 0 8px; }
  .bo-res .bo-fill{ height:100%; width:100%; border-radius:6px; transform-origin:left center; transform:scaleX(0); transition:transform .3s ease; }
  .bo-res.se .bo-fill{ background:var(--brass); }
  .bo-res.emp .bo-fill{ background:#7c8798; }
  .bo-res .bo-hr{ font-family:var(--serif); font-size:.98rem; color:var(--ink-soft); }
  .bo-verdict{ font-family:var(--serif); font-size:clamp(1.05rem,2.4vw,1.22rem); color:var(--ink); line-height:1.5; margin:26px 0 30px; padding:16px 20px; background:var(--cream); border-radius:10px; }
  .bo-verdict b{ color:var(--brass-text); }
  .bo-ctrl{ margin:0 0 22px; }
  .bo-ctrl label{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--serif); font-size:1.08rem; color:var(--ink); margin-bottom:8px; }
  .bo-ctrl label .bo-val{ font-family:var(--sans); font-weight:700; font-size:1.02rem; color:var(--brass-text); font-variant-numeric:tabular-nums; }
  .bo-ctrl input[type=range]{ width:100%; accent-color:var(--brass); height:26px; }
  details.bo-more{ border-top:1px solid var(--hair); margin-top:6px; }
  details.bo-more summary{ cursor:pointer; list-style:none; padding:16px 2px; font-family:var(--serif); font-size:1.05rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; }
  details.bo-more summary::-webkit-details-marker{ display:none; }
  details.bo-more summary::after{ content:"+"; color:var(--brass); font-size:1.4rem; font-family:var(--serif); line-height:1; }
  details.bo-more[open] summary::after{ content:"\2013"; }
  .bo-basis{ font-family:var(--serif); color:var(--ink-soft); font-size:1.05rem; line-height:1.65; max-width:var(--measure); margin:20px 0 0; }
  .bo-basis p{ margin:0 0 8px; }
  .bo-basis .bl{ font-family:var(--sans); font-size:.84rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--brass-text); margin-right:6px; }
  .bo-cta{ display:inline-block; margin-top:14px; font-family:var(--serif); font-size:1.08rem; color:var(--brass-text); text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:2px; }
  .bo-cta:hover{ color:var(--ink); border-bottom-color:var(--ink); }

  /* FAQ */
  .faq{ border-top:1px solid var(--hair); }
  .faq details{ border-bottom:1px solid var(--hair); }
  .faq summary{ cursor:pointer; padding:24px 2px; font-family:var(--serif); font-size:1.28rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"+"; color:var(--brass); font-size:1.5rem; font-family:var(--serif); flex:none; line-height:1; }
  .faq details[open] summary::after{ content:"\2013"; }
  .faq summary:hover{ color:var(--brass-text); }
  .faq .ans{ padding:0 2px 26px; font-family:var(--serif); color:var(--ink-soft); font-size:1.05rem; line-height:1.6; max-width:var(--measure); }
  .faq .ans p{ margin:0 0 10px; } .faq .ans p:last-child{ margin:0; }

  /* CTA BAND */
  .cta-band{ background:var(--ink); color:var(--cream); }
  .cta-band .in{ padding:clamp(50px,8vw,90px) 0; text-align:center; }
  .cta-band h2{ font-family:var(--serif); font-weight:500; color:#fbf7ef; font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.1; margin:0 0 16px; letter-spacing:-.01em; }
  .cta-band p{ font-family:var(--serif); color:rgba(244,239,230,.82); max-width:46ch; margin:0 auto 28px; font-size:1.1rem; }

  /* CONTACT */
  .contact-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
  @media (min-width:860px){ .contact-grid{ grid-template-columns:1fr 1.2fr; gap:60px; } }
  .contact h2{ font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.03; letter-spacing:-.01em; margin:0 0 18px; }
  .contact .intro{ font-family:var(--serif); color:var(--ink-soft); font-size:1.1rem; line-height:1.55; max-width:var(--measure); margin:0 0 30px; }
  /* Contact details. Hairline-separated rows rather than a stack of label-then-link
     pairs, which read as a list of unrelated headings. Values are ink, not brass:
     three brass underlined links in a column was the noise. */
  .cdetails{ border-top:1px solid var(--hair); margin:0 0 22px; }
  .cdetail{ display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--hair); margin:0; }
  @media (min-width:520px){ .cdetail{ grid-template-columns:9.5rem 1fr; align-items:baseline; column-gap:20px; } .cdetail .cnote{ grid-column:2; } }
  .cdetail .cl{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--ink-soft); margin:0; }
  .cdetail .cv{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); margin:0; }
  .cdetail .cv a{ color:var(--ink); border-bottom:1px solid var(--hair); padding-bottom:1px; }
  .cdetail .cv a:hover{ border-bottom-color:var(--brass); }
  .cdetail .cnote{ font-size:.86rem; color:var(--ink-soft); margin:2px 0 0; }
  .social-ink{ list-style:none; margin:0 0 26px -8px; padding:0; display:grid; grid-auto-flow:column; justify-content:start; gap:0; }
  .social-ink a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:44px; color:var(--ink-soft); transition:color .15s ease; }
  .social-ink a:hover{ color:var(--brass-text); }
  .social-ink svg{ width:21px; height:21px; }
  .cfoot{ font-family:var(--serif); font-size:1.02rem; color:var(--ink-soft); margin:0; }
  .form{ display:grid; gap:20px; }
  .field label{ display:block; font-size:.95rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
  .field label .req{ color:var(--ink-soft); font-weight:400; }
  .field input, .field textarea, .field select{ width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--white); border:1px solid var(--ink); padding:15px 20px; }
  .field input, .field select{ border-radius:999px; }
  .field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position:calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
  .field textarea{ border-radius:22px; min-height:130px; resize:vertical; }
  .field input::placeholder, .field textarea::placeholder{ color:#9aa2ab; }
  .two{ display:grid; grid-template-columns:1fr; gap:20px; }
  @media (min-width:520px){ .two{ grid-template-columns:1fr 1fr; } }
  .form-note{ font-size:.88rem; color:var(--ink-soft); }
  .form-help{ font-family:var(--serif); font-size:1.02rem; line-height:1.55; color:var(--ink); background:var(--cream); border-radius:8px; padding:14px 16px; margin:-6px 0 4px; }

  /* FOOTER */
  .foot{ background:var(--ink); color:rgba(244,239,230,.82); padding:clamp(44px,6vw,72px) 0 28px; }
  .foot .top{ display:grid; grid-template-columns:1fr; gap:34px; }
  @media (min-width:760px){ .foot .top{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; } }
  .foot .brand .wm .name{ color:var(--cream); }
  .foot .brand .wm .name .pk{ color:#c9a97a; }
  .foot .brand .wm .sub{ color:rgba(244,239,230,.6); }
  .foot .mk{ color:#c9a97a; }
  .foot .tagline{ margin-top:16px; font-size:.96rem; max-width:34ch; color:rgba(244,239,230,.82); }
  .foot h4{ text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color:#c9a97a; margin:0 0 16px; font-weight:700; }
  .foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .foot ul a{ font-size:.96rem; color:rgba(244,239,230,.82); cursor:pointer; }
  .foot ul a:hover{ color:var(--cream); }
  /* Icon-only links. The 44px box is the tap target; the glyph inside stays at 21px. */
  .foot .social{ grid-auto-flow:column; justify-content:start; gap:0; margin:8px 0 0 -8px; }
  .foot .social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:44px; color:rgba(244,239,230,.7); transition:color .15s ease; }
  .foot .social a:hover{ color:#c9a97a; }
  .foot .social svg{ width:21px; height:21px; }
  .foot .bar{ margin-top:44px; padding-top:22px; border-top:1px solid rgba(244,239,230,.16); display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; font-size:.88rem; color:rgba(244,239,230,.76); }
  .foot .bar .powered{ display:inline-flex; align-items:center; gap:7px; }
  .foot .bar .powered b{ color:rgba(244,239,230,.82); font-weight:600; }

  /* ---- normalised type scale (one size per role) ---- */
  .lead, .about-text h2, .contact h2, .cta-band h2{ font-size:clamp(1.95rem,4.3vw,3rem); }
  .card h3, .col3 h3, .rate h3, .mcard h3, .founder .fname{ font-size:1.5rem; }
  .step h3, .arow .town, .oi .t, .faq summary{ font-size:1.2rem; }
  .lead-sub, .about-text p, .contact .intro, .cta-band p, .founder p{ font-size:1.12rem; }
  .card p, .col3 p, .step p, .tcard p, .faq .ans, .areas-note{ font-size:1.02rem; }
  /* LEGAL PAGES - one prose column at the shared measure, serif body like the rest of
     the site. Tables scroll inside themselves so a long cookie row never pushes the
     page sideways on a phone. */
  .legal{ max-width:var(--measure); }
  .legal h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--ink); margin:44px 0 14px; }
  .legal h3:first-of-type{ margin-top:0; }
  .legal h4{ font-size:1.05rem; font-weight:700; color:var(--ink); margin:28px 0 10px; }
  .legal p, .legal li{ font-family:var(--serif); color:var(--ink-soft); font-size:1.08rem; line-height:1.6; }
  .legal p{ margin:0 0 16px; }
  .legal ul{ margin:0 0 16px; padding-left:22px; display:grid; gap:9px; }
  .legal b{ color:var(--ink); font-weight:600; }
  .legal a{ color:var(--brass-text); text-decoration:underline; text-underline-offset:3px; }
  .legal .tbl{ overflow-x:auto; margin:0 0 22px; }
  .legal table{ border-collapse:collapse; width:100%; min-width:30rem; }
  .legal th, .legal td{ font-family:var(--serif); font-size:1rem; line-height:1.5; text-align:left; vertical-align:top; padding:12px 16px 12px 0; border-bottom:1px solid rgba(31,42,54,.14); }
  .legal th{ color:var(--ink); font-weight:600; }
  .legal td{ color:var(--ink-soft); }
  .legal code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.94em; color:var(--ink); background:var(--cream); padding:2px 6px; border-radius:4px; }
  .legal .updated{ margin-top:44px; padding-top:20px; border-top:1px solid rgba(31,42,54,.14); font-size:.98rem; }
  /* footer legal block */
  .foot .bar{ align-items:flex-start; }
  .foot .reg{ flex:1 1 34rem; max-width:56ch; line-height:1.55; }
  .foot .legal-links{ display:flex; flex-wrap:wrap; gap:8px 18px; }
  .foot .legal-links a, .foot .legal-links button{ font:inherit; color:rgba(244,239,230,.76); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .foot .legal-links a:hover, .foot .legal-links button:hover{ color:var(--cream); }
  /* photo fills */
  .ph.photo{ background:none; }
  .ph.photo::after{ display:none; }
  .ph.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------------------------------------------------------------------------
     Real-path pages: area landing pages and the blog. Added 2026-08-09 when the
     site moved off hash routes. Everything here reuses the existing tokens and
     the one reading measure rather than introducing a second type scale.
     --------------------------------------------------------------------------- */

  .area-price{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); max-width:var(--measure); margin:0 0 30px; }
  .area-cta{ display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; }

  /* Long-form body copy: area pages and blog posts share one prose block, so a
     post and a location page never drift apart typographically. */
  .prose{ max-width:var(--measure); }
  .prose > *:first-child{ margin-top:0; }
  .prose p{ font-family:var(--serif); font-size:1.12rem; line-height:1.62; color:var(--ink); margin:0 0 20px; }
  .prose h2{ font-size:clamp(1.5rem,3vw,2rem); line-height:1.2; margin:44px 0 16px; }
  .prose h3{ font-size:clamp(1.2rem,2.4vw,1.42rem); line-height:1.25; margin:36px 0 12px; }
  .prose ul, .prose ol{ margin:0 0 22px; padding-left:1.3em; }
  .prose li{ font-family:var(--serif); font-size:1.08rem; line-height:1.55; margin:0 0 10px; }
  .prose b{ font-weight:700; }
  .prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--tint); padding:2px 6px; border-radius:4px; }
  .prose blockquote{ margin:0 0 22px; padding:4px 0 4px 20px; border-left:2px solid var(--brass); }
  .prose blockquote{ font-family:var(--serif); font-size:1.12rem; color:var(--ink-soft); }

  /* Blog index */
  .post-list{ list-style:none; margin:0; padding:0; max-width:var(--measure); }
  .post-row{ border-top:1px solid var(--hair); }
  .post-row:last-child{ border-bottom:1px solid var(--hair); }
  .post-row a{ display:block; padding:30px 0; transition:opacity .15s ease; }
  .post-row a:hover{ opacity:.72; }
  .post-row .kicker{ margin:0 0 10px; }
  .post-row h3{ font-size:clamp(1.25rem,2.6vw,1.6rem); line-height:1.22; margin:0 0 10px; }
  .post-desc{ font-family:var(--serif); color:var(--ink-soft); font-size:1.05rem; line-height:1.55; margin:0 0 12px; }
  .post-meta{ font-size:.9rem; color:var(--ink-soft); margin:0; letter-spacing:.01em; }

  /* Blog post */
  .post-head h1{ font-size:clamp(2rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.01em; max-width:22ch; margin:0 0 18px; }
  .post-head .post-meta{ font-size:.95rem; }
  .post-back{ color:var(--brass-text); border-bottom:1px solid color-mix(in srgb,var(--brass-text) 40%,transparent); }
  .post-foot{ background:var(--cream); }
  .post-foot h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin:0 0 14px; }

  /* The £25 split, stated up front on the pricing page (Rob, 2026-08-09: a visitor
     went to the FAQ rather than the pricing page and could not find the breakdown,
     so it now leads here and appears in the FAQ too). */
  .split{ max-width:var(--measure); margin:0 0 46px; border-top:1px solid var(--hair); }
  .split-row{ display:flex; gap:20px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--hair); }
  .split-amt{ font-size:1.9rem; line-height:1; color:var(--brass-text); flex:none; min-width:3.2ch; }
  .split-lab{ font-family:var(--serif); font-size:1.05rem; line-height:1.5; color:var(--ink-soft); }
  .split-lab b{ color:var(--ink); font-weight:600; }
  .split-total .split-amt{ color:var(--ink); }
  .split-total{ border-bottom:2px solid var(--ink); }

  /* The same split, in the FAQ answer. */
  .fee-split{ margin:0 0 14px; padding-left:1.2em; }
  .fee-split li{ margin:0 0 8px; }