/* ===========================================================================
   Handpicked Home Services, the public site. THE WARM LOOK (decisions.md
   2026-10-03), ported from docs/website-refresh/2026-09-27/site-prototype-warm.html.

   Carolina read the white prototype as "too white and too clinical" and asked
   for something "warm and cosy, like it's welcoming you" (2026-09-27). The warm
   look is the lit system with the grounds, one accent and the photographs
   changed; its colours and rules live in DESIGN.md ("The warm look for the
   refreshed website"). It is the only look the site has: no switcher.

   Type is Source Serif 4 for headlines and Figtree for everything else
   (DESIGN.md, Typography), served from /fonts/ on this site.
   =========================================================================== */

@font-face{ font-family:"Figtree"; font-style:normal; font-weight:300 900; font-display:swap; src:url(/fonts/figtree-latin.woff2) format("woff2"); }
@font-face{ font-family:"Source Serif 4"; font-style:normal; font-weight:200 900; font-display:swap; src:url(/fonts/source-serif-4-latin.woff2) format("woff2"); }
@font-face{ font-family:"Source Serif 4"; font-style:italic; font-weight:200 900; font-display:swap; src:url(/fonts/source-serif-4-italic-latin.woff2) format("woff2"); }

:root{
  color-scheme:light;
  /* Grounds */
  --linen:#fcf9f4;      /* ivory, the page ground, under a 2.5% paper grain (Rob and Carolina, 5 Oct: brighter on a phone) */
  --white:#ffffff;      /* cards and sheets, white so they stand off the ivory */
  --oat:#f5efe5;        /* the recessed band and quiet fills */
  --paper:#f7f2e9;      /* quiet fills inside a card */
  --honey:#e9c98e;      /* the closing band, and nothing else */
  --hearth:#1d2c44;     /* navy bands, the footer, the price panels */
  --selected:#f8efe0;   /* picked fills */
  /* Ink */
  --ink:#172c4a; --ink-deep:#0f1f36; --ink-soft:#5a5448;
  --hair:#ebe1d3;
  /* Accents */
  --clay:#c0643f;       /* large type and marks only, never body text or a button */
  --brass-700:#785419; --brass-500:#a87a32; --gilt:#c49a52; --brass-200:#e6cb96; --brass-50:#f7efe0;
  --green:#2d6a4b; --green-50:#e6f1ea;
  --on-dark:#cdd5e0;    /* body text on hearth */
  --head-on-dark:#fff6e6;
  /* Type */
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Brown shadows at the four elevations */
  --e1:0 1px 2px rgba(74,48,20,.06), 0 2px 6px rgba(74,48,20,.05);
  --e2:0 2px 4px rgba(74,48,20,.05), 0 14px 32px -10px rgba(74,48,20,.22);
  --e3:0 4px 10px rgba(74,48,20,.06), 0 26px 50px -16px rgba(74,48,20,.30);
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px,4vw,32px);
  --measure:46rem;
  --arch:48% 48% 28px 28px / 30% 30% 28px 28px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  margin:0; color:var(--ink); font:18px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  background-color:var(--linen);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* clip, not hidden: it stops a travelling trust bar from widening the page
   without making .site a scroll box, so the sticky header still sticks. */
.site{ overflow-x:clip; }
.site img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--brass-500); outline-offset:2px; border-radius:6px; }

h1,h2,h3{ margin:0; line-height:1.12; text-wrap:balance; }
h1,h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.015em; }
h1{ font-size:clamp(2.2rem,5.6vw,3.6rem); }
h2{ font-size:clamp(1.7rem,3.8vw,2.4rem); }
h3{ font-family:var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:0; }
.serif{ font-family:var(--serif); font-weight:500; }

.wrap{ max-width:1160px; margin:0 auto; padding-inline:var(--gutter); }
.wrap.narrow > *{ max-width:var(--measure); }

/* Labels are sentence case, 14px Figtree 600 (DESIGN.md retired the kicker).
   .kicker is the old class, still used by the legal pages; it reads as a label. */
.label, .kicker{ font:600 .875rem/1.3 var(--sans); color:var(--ink-soft); letter-spacing:0; text-transform:none; margin:0; }
.lede, .lead-sub{ font-size:1.17rem; line-height:1.55; color:var(--ink-soft); max-width:var(--measure); }
.lead{ font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,5.6vw,3.6rem); letter-spacing:-.015em; line-height:1.1; margin:0 0 18px; max-width:20ch; }
.lead-sub{ margin:0 0 36px; }
.muted{ color:var(--ink-soft); }
.small{ font-size:.92rem; color:var(--ink-soft); }
.link-brass{ color:var(--brass-700); font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--brass-700) 40%,transparent); text-underline-offset:3px; }
.link-brass:hover{ text-decoration-color:var(--brass-700); }

/* ---------------------------------------------------------------- buttons
   Navy is the everyday button. Gilt with ink text is the conversion button,
   once a screen. A button is never terracotta. */
.pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 24px; border-radius:999px; background:var(--ink); color:#fff; font:600 1rem/1.15 var(--sans); text-decoration:none; text-align:center; border:0; cursor:pointer; }
.pill-gilt{ background:var(--gilt); color:var(--ink); }
.pill-line{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.pill-light{ background:var(--white); color:var(--ink); }
.pill-outline{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,246,230,.55); }
.pill-sm{ min-height:42px; padding:0 18px; font-size:.95rem; }
/* The main buttons carry their arrow inside a disc at the right, so the
   label reads first and the disc says "this goes somewhere" (4 Oct 2026). */
.pill-go{ gap:14px; padding-right:7px; }
.pill-go::after{ content:""; flex:none; width:36px; height:36px; border-radius:50%; background:var(--gilt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13.5M12.5 6l6 6-6 6' fill='none' stroke='%23172c4a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50%/18px no-repeat; transition:background-position .2s var(--ease); }
.pill-gilt.pill-go::after{ background-color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13.5M12.5 6l6 6-6 6' fill='none' stroke='%23fffaf2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pill-go:hover::after{ background-position:calc(50% + 2px) 50%; }

/* The build wraps each photograph in <picture> for its WebP sizes
   (build.mjs, responsiveImages). The wrapper takes no box of its own, so every
   rule written for the <img> still lays it out. */
picture{ display:contents; }

/* ---------------------------------------------------------------- header */
.nav{ position:sticky; top:0; z-index:50; background:rgba(247,241,232,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(164,120,60,.12); }
.nav .row{ display:flex; align-items:center; gap:22px; min-height:74px; position:relative; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--brass-500); flex:none; }
.brand .mk{ width:17px; height:30px; flex:none; }
.brand .wm{ display:flex; flex-direction:column; line-height:1; }
.brand .wm .name{ font:600 1.38rem/1 var(--serif); color:var(--ink); }
.brand .wm .name .pk{ color:var(--brass-500); }
.brand .wm .sub{ font:600 .6rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; }
.nav-links{ display:flex; gap:24px; margin-left:auto; align-items:center; font-weight:500; font-size:1rem; }
.nav-links a{ text-decoration:none; color:var(--ink-soft); padding-block:6px; position:relative; white-space:nowrap; }
.nav-links a:not(.pill)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brass-500); transform:scaleX(0); transform-origin:left; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a.active:not(.pill)::after{ transform:scaleX(1); }
.nav-links .nav-menu-line, .nav-links .nav-menu-book{ display:none; }
.nav-scrim{ display:none; }
/* WhatsApp and the phone, as two 44px icon buttons beside "Book a visit".
   Ink glyphs on a warm-white disc: the glyph measures 13.51 on its disc, and
   the disc's hairline sits on linen, so the icon carries the shape (1.4.11). */
.nav-contact{ display:flex; align-items:center; gap:6px; flex:none; }
.nav-ic{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--ink); background:var(--white); box-shadow:inset 0 0 0 1px var(--hair); text-decoration:none; }
.nav-ic svg{ width:21px; height:21px; display:block; }
.nav-ic:hover{ background:var(--selected); }
.nav-cta{ flex:none; white-space:nowrap; }
.nav-cta .cta-sm{ display:none; }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin:0 -8px 0 0; color:var(--ink); }
.menu-btn svg{ width:26px; height:26px; display:block; }
@media (max-width:880px){
  .nav .row{ gap:12px; }
  .nav-contact{ margin-left:auto; }
  .menu-btn{ display:block; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; margin:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px 0 14px; background:var(--linen); border-bottom:1px solid var(--hair); box-shadow:0 24px 40px -30px rgba(74,48,20,.5); }
  .site.menu-open .nav-links{ display:flex; }
  .nav-links a{ padding:13px var(--gutter); font-size:1.1rem; color:var(--ink); }
  .nav-links a:not(.pill)::after{ display:none; }
  .nav-links a.active{ background:var(--selected); }
  .nav-links .nav-menu-line{ display:block; font-weight:600; }
  .nav-links .nav-menu-book{ display:block; padding:10px var(--gutter) 0; }
  .nav-links .nav-menu-book .pill{ width:100%; padding-block:0; font-size:1.05rem; }
  .nav-links .nav-menu-book .pill-go{ justify-content:space-between; padding-left:22px; }
  .site.menu-open .nav-scrim{ display:block; position:fixed; inset:0; z-index:40; background:rgba(29,44,68,.45); }
}
@media (max-width:480px){
  /* A phone carries the brand, both icons, "Book a visit" and the menu on one
     row, so each gives up a little: the wordmark steps down, the icons lose
     their disc and sit edge to edge (each still a 44px target). */
  .nav .row{ min-height:66px; gap:4px; }
  .nav .brand{ gap:7px; margin-right:auto; }
  .nav .brand .wm .name{ font-size:1.15rem; }
  .nav-contact{ gap:0; }
  .nav-ic{ background:none; box-shadow:none; }
  .nav-cta{ min-height:40px; padding:0 13px; font-size:.875rem; margin-left:2px; }
  /* A 44px target whose drawn lines end on the same 16px gutter as the logo
     on the left (Rob's friend, 4 Oct: the menu sat too close to the edge). */
  .menu-btn{ display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; margin-right:-14px; }
  .menu-btn svg{ width:24px; height:24px; }
  .nav-cta .cta-lg{ display:none; }
  .nav-cta .cta-sm{ display:inline; }
}
/* The narrowest phones drop the wheat mark before anything you can press. */
@media (max-width:389px){ .nav .brand .mk{ display:none; } }
@media (max-width:374px){ .nav-ic{ width:41px; } .nav-cta{ padding:0 11px; } }
@media (max-width:339px){ .nav .row{ gap:2px; } .nav .brand .wm .name{ font-size:1.02rem; } .nav .brand .wm .sub{ display:none; } .nav-ic{ width:36px; } .nav-cta{ padding:0 9px; font-size:.82rem; } }
/* Anchored sections land below the sticky header. */
main [id]{ scroll-margin-top:90px; }

/* ---------------------------------------------------------------- hero
   Copy on the left, a doorway of photographs on the right. The headline is
   always three lines, sized to its column, so the swapping word never adds a
   line and nothing below it moves. */
.hero{ background:radial-gradient(55% 65% at 80% 45%, rgba(233,201,142,.15), transparent 70%); overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,5vw,56px); align-items:center; padding-block:clamp(32px,6vw,64px); }
.hero .copy{ display:flex; flex-direction:column; gap:18px; container-type:inline-size; min-width:0; }
.hero h1{ white-space:nowrap; text-wrap:nowrap; font-size:min(clamp(2.2rem,5.6vw,3.6rem),11.5cqi); line-height:1.1; }
/* The swapping word gets a brass ring drawn round it, as if picked out with a
   pen. script-home.html sizes the ring to the word and redraws it each time the
   word changes, in the same beat as the photograph (Rob, 7 Oct). */
.swapw{ display:inline-block; position:relative; margin-inline:.18em .14em; }
.swapt{ display:inline-block; transition:opacity .25s; }
.swapw.out .swapt{ opacity:0; }
.swapw .ring{ position:absolute; left:0; top:0; width:0; height:0; overflow:visible; pointer-events:none; }
.swapw .ring path{ fill:none; stroke:var(--gilt); stroke-width:clamp(2px,.05em,3px); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.swapw.drawn .ring path{ stroke-dashoffset:0; transition:stroke-dashoffset .75s cubic-bezier(.5,.1,.3,1); }
.swapw.out .ring path{ opacity:0; transition:opacity .2s; }
@media (prefers-reduced-motion:reduce){ .swapw .ring path{ stroke-dashoffset:0; } .swapw.drawn .ring path{ transition:none; } }
.cta-one{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.seal-row{ display:flex; gap:14px; align-items:center; margin-top:8px; padding-top:20px; border-top:1px solid var(--hair); }
.seal-row b{ display:block; font-size:1rem; line-height:1.3; }
.seal-row span{ font-size:.92rem; color:var(--ink-soft); }
.seal{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--gilt); display:grid; place-items:center; box-shadow:0 0 0 2px var(--linen), 0 0 0 3.5px var(--gilt); }
.seal svg{ width:13px; height:23px; }
.montage{ margin:0; position:relative; border-radius:var(--arch); overflow:hidden; aspect-ratio:4/4.5; box-shadow:var(--e3); background:var(--oat); }
.montage .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease); filter:saturate(1.08) contrast(1.02) brightness(1.02) sepia(.10); }
.montage .slide.on{ opacity:1; }
.montage::after{ content:""; position:absolute; inset:0; z-index:1; background:#ffcf96; mix-blend-mode:soft-light; opacity:.35; pointer-events:none; }
.montage .cap{ position:absolute; left:16px; bottom:46px; z-index:2; display:flex; flex-direction:column; gap:2px; max-width:calc(100% - 32px); background:rgba(255,250,242,.95); border-radius:14px; padding:10px 14px; box-shadow:var(--e2); transition:opacity .3s, transform .3s var(--ease); }
.montage .cap b{ font-size:.95rem; }
.montage .cap span{ font-size:.88rem; color:var(--ink-soft); }
.montage .cap.swap{ opacity:0; transform:translateY(6px); }
.montage.ready{ cursor:pointer; touch-action:pan-y; }
.montage .segs{ position:absolute; left:16px; right:16px; bottom:0; z-index:2; display:flex; gap:6px; }
.montage:not(.ready) .segs{ display:none; }
.montage:not(.ready) .cap{ bottom:16px; }
.montage .segs button{ flex:1; height:44px; padding:20px 0; border:0; background:transparent; cursor:pointer; }
.montage .segs i{ display:block; height:4px; border-radius:4px; background:rgba(255,255,255,.55); overflow:hidden; position:relative; box-shadow:0 1px 3px rgba(23,44,74,.25); }
.montage .segs i::after{ content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; }
.montage .segs .done i::after, .montage .segs [aria-selected="true"] i::after{ transform:scaleX(1); }
.montage.play .segs [aria-selected="true"] i::after{ transform:scaleX(0); animation:fillbar 6s linear forwards; }
.montage.play.hold .segs [aria-selected="true"] i::after{ animation-play-state:paused; }
@keyframes fillbar{ to{ transform:scaleX(1); } }
@media (max-width:860px){
  .hero .wrap{ grid-template-columns:minmax(0,1fr); padding-top:16px; }
  .montage{ order:-1; aspect-ratio:16/11; }
}
@media (max-width:480px){ .montage .cap{ bottom:42px; padding:8px 12px; } .montage .cap span{ display:none; } }

/* ---------------------------------------------------------------- trust bar
   A static wrapped row until the motion script makes it travel (Rob, 4 Oct:
   keep it moving). */
/* The strip under the hero names where we clean, and only that: the checks sit
   right below it (Carolina, 5 Oct). Every item is the same size and shape, and
   text-size-adjust keeps a phone's text boosting from enlarging one item more
   than its neighbours, the likely cause of the two sizes on her Android. */
.trustline{ background:var(--oat); overflow:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.trustline .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 32px; padding-block:16px; }
.trustline .item{ display:block; font-size:1rem; font-weight:500; color:var(--ink); text-decoration:none; padding-left:19px; position:relative; white-space:nowrap; }
.trustline .item::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--gilt); }
/* The one link keeps a 44px tap height without making the strip taller. */
.trustline a.item{ padding-block:9px; margin-block:-9px; }

/* ---------------------------------------------------------------- bands */
.band{ padding-block:clamp(56px,8vw,96px); }
.band.oat{ background:var(--oat); }
.band.navy{ background:radial-gradient(120% 90% at 85% 0%, #2c3f5e 0%, var(--hearth) 55%, #16223a 100%); color:#fff; }
.band.navy h2{ color:var(--head-on-dark); }
.band.navy .label{ color:var(--brass-200); }
.band.navy .lede, .band.navy .muted{ color:var(--on-dark); }
.head{ display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.head .lede{ max-width:var(--measure); }

.page-head .wrap{ padding-block:clamp(56px,8vw,88px) clamp(28px,4vw,44px); display:flex; flex-direction:column; gap:14px; }
.page-head h1{ max-width:20ch; }
.page-head .lede{ max-width:52ch; }
.page-head + .band:not(.oat):not(.navy){ padding-top:8px; }

.card{ background:var(--white); border-radius:24px; padding:24px; box-shadow:var(--e2); }
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.two .card{ display:flex; flex-direction:column; gap:10px; }
@media (max-width:760px){ .two{ grid-template-columns:minmax(0,1fr); } }

.ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ticks li{ display:flex; gap:10px; align-items:flex-start; }
.ticks svg{ flex:none; width:20px; height:20px; margin-top:4px; }

/* ---------------------------------------------------------------- services */
.tabs{ display:inline-flex; position:relative; background:var(--oat); border-radius:999px; padding:5px; margin-bottom:28px; max-width:100%; }
.tabs button{ position:relative; z-index:1; font:600 1rem/1 var(--sans); border:0; background:transparent; color:var(--ink-soft); padding:13px 22px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.tabs button[aria-selected="true"]{ color:#fff; }
.tabs .ind{ position:absolute; z-index:0; top:5px; bottom:5px; left:5px; border-radius:999px; background:var(--ink); box-shadow:var(--e2); }
@media (max-width:480px){ .tabs{ display:flex; width:100%; } .tabs button{ flex:1 1 auto; padding:12px 8px; font-size:.95rem; } }
.svc-pane{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.svc-pane + .svc-pane{ margin-top:clamp(40px,6vw,64px); }
.tabs:not([hidden]) ~ .svc-pane + .svc-pane{ margin-top:0; }
@media (max-width:860px){ .svc-pane{ grid-template-columns:minmax(0,1fr); } }
.svc-pane .pic{ position:relative; border-radius:28px; overflow:hidden; aspect-ratio:4/3; background:var(--brass-50); box-shadow:var(--e2); }
.svc-pane .pic img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.06) sepia(.08); }
.svc-pane .tag{ position:absolute; left:14px; top:14px; background:var(--white); border-radius:999px; padding:7px 12px; font:600 .9rem/1 var(--sans); box-shadow:var(--e1); }
.svc-copy{ display:flex; flex-direction:column; gap:18px; }
.svc-copy h3{ font:500 1.7rem/1.15 var(--serif); letter-spacing:-.01em; }

/* ---------------------------------------------------------------- the five checks */
.checks{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
@media (max-width:980px){ .checks{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .checks{ grid-template-columns:minmax(0,1fr); } }
.check{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.check .tk{ width:30px; height:30px; border-radius:50%; background:var(--gilt); display:flex; align-items:center; justify-content:center; }
.check .tk svg{ width:16px; height:16px; }
.check .tk path{ fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:0; }
.check b{ font:600 1.15rem/1.2 var(--serif); color:var(--head-on-dark); }
.check span{ color:var(--on-dark); font-size:.95rem; }

/* ---------------------------------------------------------------- link cards */
.more3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:760px){ .more3{ grid-template-columns:minmax(0,1fr); } }
.more-card{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 16px 14px 14px; border-radius:22px; background:var(--white); box-shadow:var(--e1); text-decoration:none; color:var(--ink); transition:transform .2s var(--ease), box-shadow .2s; }
/* Each card leads with a picture in the site's arch, or, for About us, the two
   of us. The arrow is a solid navy disc you can see is pressable (Rob, 4 Oct:
   the thin arrows looked "very AI generic"). */
.mc-pic{ width:76px; height:92px; border-radius:50% 50% 14px 14px / 40% 40% 14px 14px; overflow:hidden; background:var(--oat); }
.mc-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.mc-faces{ position:relative; overflow:visible; background:none; border-radius:0; }
.mc-faces img{ position:absolute; width:54px; height:54px; border-radius:50%; object-position:50% 22%; box-shadow:0 0 0 3px var(--white), var(--e1); }
.mc-faces .f1{ top:4px; left:0; }
.mc-faces .f2{ bottom:4px; right:0; }
.mc-txt{ display:flex; flex-direction:column; gap:4px; }
.mc-txt b{ font:500 1.25rem/1.2 var(--serif); }
.mc-txt span{ color:var(--ink-soft); font-size:.97rem; line-height:1.45; }
.more-card .go{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--white); transition:background-color .2s, color .2s; }
.more-card .go svg{ width:18px; height:18px; transition:transform .2s var(--ease); }
.more-card:hover{ transform:translateY(-2px); box-shadow:var(--e2); }
.more-card:hover .go{ background:var(--gilt); color:var(--ink); }
.more-card:hover .go svg{ transform:translateX(2px); }
.more-card:active{ transform:scale(.985); }

/* ---------------------------------------------------------------- closing band
   Honey, with a soft glow in one corner. Ink text and the gilt button only. */
.cta-band{ background:radial-gradient(90% 140% at 10% 100%, rgba(233,201,142,.55), transparent 60%), var(--honey); color:var(--ink); }
.cta-band .in{ padding-block:60px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.cta-copy{ display:flex; flex-direction:column; gap:8px; max-width:44rem; }
.cta-band p{ color:#4a3d28; }
.cta-band .pill{ box-shadow:0 1px 2px rgba(74,48,20,.12), 0 6px 18px -6px rgba(74,48,20,.35); }

/* ---------------------------------------------------------------- steps */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (max-width:880px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .steps{ grid-template-columns:minmax(0,1fr); } }
.step{ display:flex; flex-direction:column; gap:8px; padding-top:18px; position:relative; }
.step::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:#dcc9ab; }
.step::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brass-500); transform-origin:left; }
.step .n{ font:italic 500 1.7rem/1 var(--serif); color:var(--clay); }
.step p{ color:var(--ink-soft); font-size:1rem; }

/* ---------------------------------------------------------------- FAQ */
.faq{ border-top:1px solid #dfcfb6; }
.faq details{ border-bottom:1px solid #dfcfb6; padding-block:18px; }
.faq summary{ cursor:pointer; font-weight:600; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:12px; height:12px; flex:none; margin-top:6px; border-right:2px solid var(--brass-700); border-bottom:2px solid var(--brass-700); transform:rotate(45deg); }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .ans{ padding-top:10px; color:var(--ink-soft); max-width:40rem; }
.faq .ans p{ margin:0 0 10px; }
.faq .ans p:last-child{ margin:0; }
.fee-split{ margin:0 0 12px; padding-left:1.2em; }
.fee-split li{ margin:0 0 6px; }

/* ---------------------------------------------------------------- pricing */
.duo{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,56px); align-items:start; }
@media (max-width:880px){ .duo{ grid-template-columns:minmax(0,1fr); } }
.duo-copy{ display:flex; flex-direction:column; gap:18px; }
.pbar{ display:flex; height:60px; border-radius:14px; overflow:hidden; font:600 .98rem/1.2 var(--sans); background:var(--paper); }
.pbar span{ display:flex; align-items:center; padding-inline:16px; min-width:0; white-space:nowrap; overflow:hidden; }
.pbar .them{ background:var(--ink); color:#fff; flex:0 0 80%; }
.pbar .us{ background:var(--gilt); color:var(--ink); flex:0 0 20%; justify-content:center; }
@media (max-width:480px){ .pbar{ font-size:.88rem; } .pbar span{ white-space:normal; padding-inline:10px; line-height:1.2; } }
.legend{ display:flex; justify-content:space-between; gap:12px; font-size:.92rem; color:var(--ink-soft); margin-top:8px; }
.pc{ display:flex; flex-direction:column; gap:18px; }
.pc h3{ font:500 1.45rem/1.2 var(--serif); }
.pc-rows{ display:flex; flex-wrap:wrap; gap:18px 28px; }
.stepper{ display:flex; flex-direction:column; gap:10px; }
.stepper .lab{ font-weight:600; }
.ctl{ display:inline-flex; align-items:center; gap:6px; background:var(--white); border:1px solid var(--hair); border-radius:999px; padding:4px; width:max-content; }
.ctl button{ width:44px; height:44px; border-radius:50%; border:0; background:var(--selected); color:var(--ink); font:600 1.3rem/1 var(--sans); cursor:pointer; }
.ctl button:disabled{ opacity:.35; cursor:default; }
.ctl output{ min-width:2.2ch; text-align:center; font:600 1.3rem/1 var(--sans); }
.seg{ display:flex; flex-wrap:nowrap; gap:8px; }
.seg button{ font:500 1rem/1 var(--sans); min-height:52px; padding:0 16px; border-radius:999px; border:1.5px solid var(--hair); background:var(--white); color:var(--ink); cursor:pointer; }
.seg button[aria-pressed="true"]{ border-color:var(--ink); background:var(--selected); box-shadow:inset 0 0 0 1px var(--ink); font-weight:600; }
.pc-out{ background:radial-gradient(110% 120% at 100% 0%, #2c3f5e, var(--hearth) 60%); color:#fff; border-radius:16px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.pc-amt{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pc-amt b{ font:600 2.3rem/1 var(--serif); color:#fff; font-variant-numeric:tabular-nums; }
.pc-amt span{ color:var(--on-dark); }
.pc-bar{ display:flex; height:8px; border-radius:99px; overflow:hidden; }
.pc-bar .them{ flex:0 0 80%; background:#fff; }
.pc-bar .us{ flex:0 0 20%; background:var(--gilt); }
.pc-split{ font-size:.95rem; color:var(--on-dark); }
@media (max-width:480px){ .pc-rows{ gap:16px; } .pc-amt b{ font-size:2rem; } }

/* The second door: cleaning for businesses, on the pricing page. */
.second-door{ background:var(--white); border-radius:24px; box-shadow:var(--e2); padding:24px; display:grid; gap:20px; }
@media (min-width:820px){ .second-door{ grid-template-columns:132px minmax(0,1fr) auto; align-items:center; gap:32px; padding:24px 32px 24px 24px; } }
.second-door .ph{ position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:18px; max-width:132px; }
.second-door .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.06) sepia(.08); }
.second-door h3{ font:500 1.4rem/1.2 var(--serif); margin:0 0 8px; }
.second-door p{ color:var(--ink-soft); max-width:54ch; }
.second-door b{ color:var(--ink); }
.second-door .pill{ justify-self:start; }

/* ---------------------------------------------------------------- about */
.ab-first{ font-size:1.2rem; line-height:1.55; color:var(--ink); }
.ab-photo{ margin:0; border-radius:999px 999px 22px 22px; overflow:hidden; box-shadow:var(--e2); aspect-ratio:4/5; }
.ab-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.06) sepia(.08); }
@media (max-width:880px){ .ab-photo{ aspect-ratio:4/3; order:-1; border-radius:160px 160px 22px 22px; } }
.people{ display:flex; align-items:center; gap:14px; }
.faces{ display:flex; flex:none; }
.faces img{ width:60px; height:60px; border-radius:50%; object-fit:cover; border:3px solid var(--linen); }
.faces img + img{ margin-left:-14px; }
.sign{ display:flex; flex-direction:column; line-height:1.3; }
.sign b{ font:600 1.1rem/1.3 var(--serif); }
.sign span{ font-size:.92rem; color:var(--ink-soft); }
.bios .card{ gap:14px; }
.bio-h{ display:flex; align-items:center; gap:16px; }
.bio-h img{ width:84px; height:84px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 3px var(--white), 0 0 0 4.5px var(--gilt); }
.bio-h h3{ font:500 1.5rem/1.2 var(--serif); margin:0; }
.bio-h span{ font-size:.92rem; color:var(--ink-soft); }
.promise{ display:flex; flex-direction:column; gap:16px; }
.promise .lede{ max-width:52rem; }
.inc{ padding:28px; }
.inc-list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 32px; }
@media (max-width:700px){ .inc-list{ grid-template-columns:minmax(0,1fr); } }

/* The patch table: every row is tied to the covered-areas config by its
   data-areas keys, and the wiring test reads it back (#200). */
.areas-grid{ display:grid; grid-template-columns:minmax(0,1fr); background:var(--white); border-radius:24px; box-shadow:var(--e1); padding:8px 24px; }
@media (min-width:640px){ .areas-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; } }
@media (min-width:980px){ .areas-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.arow{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--hair); }
.arow .town{ font-weight:500; color:var(--ink); }
a.town{ text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:4px; }
a.town:hover{ text-decoration-color:var(--brass-500); }
.areas-grid.collapsed .arow:nth-child(n+7){ display:none; }
.areas-more{ margin-top:18px; }
.pill-line{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.pill-line:hover{ background:var(--selected); }
.arow .pc{ font-size:.875rem; font-weight:600; color:var(--brass-700); white-space:nowrap; font-variant-numeric:tabular-nums; }
.areas-note{ color:var(--ink-soft); max-width:var(--measure); }
.areas-duo{ align-items:center; margin-bottom:36px; }
/* The coverage map, from the warm prototype: drawn at build time (coverage-map.mjs). */
.areamap{ margin:0; border-radius:24px; background:var(--linen); box-shadow:var(--e1); padding:8px; }
.areamap svg{ width:100%; height:auto; display:block; }
.areamap .ring{ fill:var(--white); stroke:var(--gilt); stroke-width:1.5; stroke-dasharray:4 6; }
.areamap .river{ fill:none; stroke:#9fb6d4; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.areamap .more circle{ fill:var(--ink); opacity:.28; }
.areamap .vil circle{ fill:var(--ink); }
.areamap text{ paint-order:stroke; stroke:var(--white); stroke-width:4px; stroke-linejoin:round; }
.areamap .vil text{ font:500 12.5px/1 var(--sans); fill:var(--ink); }
.areamap .home .dot{ fill:var(--ink); }
.areamap .home .core{ fill:var(--gilt); }
.areamap .home .pulse{ fill:none; stroke:var(--ink); stroke-width:2; }
.areamap .home text{ font:600 17px/1 var(--serif); fill:var(--ink); }

/* ---------------------------------------------------------------- work with us */
.hh-hero{ background:var(--oat); }
.hh-hero .wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,5vw,56px); align-items:center; padding-block:clamp(52px,8vw,88px); }
@media (max-width:880px){ .hh-hero .wrap{ grid-template-columns:minmax(0,1fr); } }
.hh-copy{ display:flex; flex-direction:column; gap:20px; }
.hh-photo{ position:relative; aspect-ratio:4/3; border-radius:var(--arch); overflow:hidden; box-shadow:var(--e3); }
.hh-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.06) sepia(.08); }
.perks{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.perks li{ display:flex; gap:10px; align-items:center; }
.perks svg{ flex:none; width:20px; height:20px; }
.chk-card{ padding:28px; }
.chk-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 32px; }
@media (max-width:700px){ .chk-list{ grid-template-columns:minmax(0,1fr); } }
.chk-note{ margin-top:18px; max-width:var(--measure); }
.chk-list.route{ grid-template-columns:minmax(0,1fr); max-width:var(--measure); }

/* The charter, on a light ground now (it sat on navy before 2026-10-03). */
.charter-list{ max-width:var(--measure); }
.cprom{ border-top:1px solid var(--hair); padding:22px 0; }
.cprom:last-child{ border-bottom:1px solid var(--hair); }
.cprom h3{ font:500 1.3rem/1.25 var(--serif); margin:0 0 8px; display:flex; gap:14px; }
.cprom h3 .num{ color:var(--ink); font-style:italic; flex:none; width:16px; }
.cprom p{ padding-left:30px; color:var(--ink-soft); }
.cprom p a{ color:var(--brass-700); font-weight:600; }
.charter-close{ font:500 1.15rem/1.5 var(--serif); background:var(--white); box-shadow:var(--e1); border-radius:18px; padding:20px 24px; margin:28px 0; max-width:var(--measure); }

/* The better-off calculator (unchanged in what it says). */
.bo-card{ background:var(--white); border-radius:24px; box-shadow:var(--e2); padding:clamp(22px,4vw,40px); max-width:820px; }
.bo-results{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,36px); }
@media (max-width:560px){ .bo-results{ grid-template-columns:minmax(0,1fr); } }
.bo-res .bo-who{ font-weight:600; font-size:.92rem; color:var(--ink-soft); margin:0 0 6px; }
.bo-res .bo-num{ font:600 clamp(1.9rem,4.5vw,2.6rem)/1.05 var(--serif); color:var(--ink); font-variant-numeric:tabular-nums; }
.bo-res .bo-num small{ font:600 1rem var(--sans); color:var(--ink-soft); }
.bo-res .bo-track{ height:12px; background:var(--paper); 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(--gilt); }
.bo-res.emp .bo-fill{ background:#8a8170; }
.bo-res .bo-hr{ font-size:.95rem; color:var(--ink-soft); }
.bo-verdict{ font-size:1.05rem; color:var(--ink); line-height:1.5; margin:24px 0 28px; padding:16px 20px; background:var(--oat); border-radius:14px; }
.bo-verdict b{ color:var(--brass-700); }
.bo-ctrl{ margin:0 0 22px; }
.bo-ctrl label{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:600; margin-bottom:8px; }
.bo-ctrl .bo-val{ font-weight:700; color:var(--brass-700); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bo-ctrl input[type=range]{ width:100%; accent-color:var(--ink); height:32px; }
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-weight:600; 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-700); font-size:1.4rem; line-height:1; }
details.bo-more[open] summary::after{ content:"\2212"; }
.bo-basis{ color:var(--ink-soft); font-size:1rem; line-height:1.6; max-width:var(--measure); margin:20px 0 0; }
.bo-basis p{ margin:0 0 8px; }
.bo-basis .bl{ font-weight:700; color:var(--ink); margin-right:6px; }
.bo-cta{ display:inline-block; margin-top:14px; color:var(--brass-700); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------------------------------------------------------------- apply */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
@media (min-width:860px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:56px; align-items:start; } }
.contact h1{ margin:12px 0 18px; }
.contact .intro{ color:var(--ink-soft); font-size:1.12rem; max-width:var(--measure); margin:0 0 26px; }
.apply-start{ margin:-6px 0 28px; }
.cdetail{ display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--hair); }
.cdetail:first-of-type{ border-top:1px solid var(--hair); }
@media (min-width:520px){ .cdetail{ grid-template-columns:10rem minmax(0,1fr); align-items:baseline; column-gap:20px; } }
.cdetail .cl{ font-weight:600; font-size:.92rem; color:var(--ink-soft); }
.cdetail .cv{ color:var(--ink); }
.form{ display:grid; gap:18px; }
.form.card{ padding:clamp(22px,4vw,36px); }
.form-help{ line-height:1.55; color:var(--ink); background:var(--oat); border-radius:14px; padding:14px 16px; }
.form-note{ font-size:.92rem; color:var(--ink-soft); }
.checklist{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px 32px; }
@media (min-width:640px){ .checklist:not(.one-col){ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ci{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); line-height:1.45; }
.ci svg{ width:18px; height:18px; color:var(--brass-500); flex:none; margin-top:4px; }

/* ---------------------------------------------------------------- legal pages */
.legal-page .lead{ font-size:clamp(2rem,5vw,3rem); }
.legal{ max-width:var(--measure); }
.legal h3{ font:500 1.5rem/1.2 var(--serif); margin:44px 0 14px; }
.legal h3:first-of-type{ margin-top:0; }
.legal h4{ font-size:1.05rem; font-weight:700; margin:28px 0 10px; }
.legal p, .legal li{ color:var(--ink-soft); font-size:1.05rem; 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-700); 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-size:1rem; line-height:1.5; text-align:left; vertical-align:top; padding:12px 16px 12px 0; border-bottom:1px solid var(--hair); }
.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(--oat); padding:2px 6px; border-radius:4px; }
.legal .updated{ margin-top:44px; padding-top:20px; border-top:1px solid var(--hair); font-size:.98rem; }

/* ---------------------------------------------------------------- area pages and the blog */
.crumbs a{ color:var(--ink-soft); }
.area-price{ font-size:1.1rem; color:var(--ink); max-width:var(--measure); }
.area-cta{ display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; }
.prose{ max-width:var(--measure); }
.prose > *:first-child{ margin-top:0; }
.prose p{ font-size:1.08rem; line-height:1.65; 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.15rem,2.4vw,1.3rem); line-height:1.25; margin:36px 0 12px; }
.prose ul, .prose ol{ margin:0 0 22px; padding-left:1.3em; }
.prose li{ font-size:1.05rem; line-height:1.55; margin:0 0 10px; }
.prose a{ color:var(--brass-700); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose b{ font-weight:700; }
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--oat); padding:2px 6px; border-radius:4px; }
.prose blockquote{ margin:0 0 22px; padding:16px 0; border-block:1px solid var(--hair); font:500 1.15rem/1.45 var(--serif); color:var(--ink); }
.prose blockquote p{ font:inherit; margin:0; }
.prose table{ border-collapse:collapse; width:100%; margin:0 0 22px; display:block; overflow-x:auto; }
.prose th, .prose td{ text-align:left; padding:10px 14px 10px 0; border-bottom:1px solid var(--hair); }
.page-head .area-price{ margin-top:4px; }
.post-list{ list-style:none; margin:0; padding:0; max-width:var(--measure); display:grid; gap:18px; }
.post-row a{ display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:24px; background:var(--white); box-shadow:var(--e1); text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s; }
.post-row a:hover{ transform:translateY(-2px); box-shadow:var(--e2); }
.post-row h3{ font:500 clamp(1.25rem,2.6vw,1.55rem)/1.22 var(--serif); }
.post-desc{ color:var(--ink-soft); }
.post-meta{ font-size:.92rem; color:var(--ink-soft); }
.post-back{ color:var(--brass-700); }
.post-head h1{ max-width:22ch; }
.post-foot .wrap{ display:flex; flex-direction:column; gap:16px; }

/* ---------------------------------------------------------------- footer */
.foot{ background:var(--hearth); color:var(--on-dark); font-size:.95rem; padding:48px 0 28px; }
.foot a{ color:#e9e2d4; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot .top{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
@media (min-width:760px){ .foot .top{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .foot .top{ grid-template-columns:1.2fr .8fr 1.9fr 1.2fr; } .foot ul.areas{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; } }
.foot .brand{ color:var(--gilt); }
.foot .brand .wm .name{ color:#fff; font-size:1.35rem; }
.foot .brand .wm .name .pk{ color:var(--brass-200); }
.foot .brand .wm .sub{ color:var(--on-dark); }
.foot .brand .mk{ width:17px; height:30px; }
.foot .tagline{ margin-top:14px; max-width:34ch; line-height:1.55; }
.foot h2{ margin:0 0 12px; font:600 1rem/1.3 var(--sans); letter-spacing:0; color:var(--brass-200); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot ul.areas{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; }
.foot .hours{ color:#aab4c4; font-size:.92rem; margin-top:4px; }
.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:var(--on-dark); }
.foot .social a:hover{ color:var(--brass-200); }
.foot .social svg{ width:21px; height:21px; }
.foot .bar{ margin-top:36px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:10px 24px; align-items:flex-start; justify-content:space-between; font-size:.92rem; color:#aab4c4; }
.foot .reg{ flex:1 1 30rem; max-width:56ch; line-height:1.55; }
.foot .legal-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.foot .legal-links a, .foot .legal-links button{ font:inherit; color:#d6dce6; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:560px){ .foot ul a{ display:inline-block; padding-block:4px; } }

/* ---------------------------------------------------------------- cookie consent */
.consent{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--hearth); color:var(--on-dark); box-shadow:0 -12px 30px -22px rgba(0,0,0,.8); padding:8px var(--gutter); padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
.site.consent-open .consent{ display:block; }
.consent .inner{ max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px 18px; }
.consent p{ font-size:.9rem; line-height:1.35; min-width:0; }
.consent p a{ color:#fff; }
.consent .btns{ display:flex; gap:8px; flex:none; }
.consent .pill{ min-height:44px; padding:0 14px; font-size:.875rem; }
.consent .pill:not(.pill-outline){ background:var(--gilt); color:var(--ink); }
@media (max-width:380px){ .consent p{ font-size:.82rem; } .consent .pill{ padding:0 11px; } }

/* ------------------------------------------------------------------ MOTION
   Every move runs only when the reader has not asked for reduced motion, and
   each is gated on a class partials/script-motion.html (or script-home.html)
   puts on the page, so a browser with no JS gets the whole page standing still.
   A section's inner moves (the step rules, the price bar) and the five checks
   play only when the script marked them as below the fold; anything already
   on screen at load shows its finished state. */
@media (prefers-reduced-motion:no-preference){
  .pill, .tabs button, .seg button, .ctl button, .faq summary{ transition:transform .07s, background-color .13s ease, border-color .13s ease, box-shadow .13s ease, color .13s ease, filter .13s ease; }
  .pill:active, .seg button:active, .ctl button:active{ transform:scale(.97); }
  @media (hover:hover){ .pill:hover{ filter:brightness(1.12); } .pill-gilt:hover{ filter:brightness(.96); } }
  .nav-links a:not(.pill)::after{ transition:transform .25s var(--ease); }
  .tabs .ind{ transition:transform .35s var(--ease), width .35s var(--ease); }
  .svc-pane.enter{ animation:fadeup .4s var(--ease); }

  /* 1. The hero copy rises in once. */
  .site.m-hero .hero .copy > *{ animation:fadeup .7s var(--ease) both; }
  .site.m-hero .hero .copy > :nth-child(2){ animation-delay:.12s; }
  .site.m-hero .hero .copy > :nth-child(3){ animation-delay:.24s; }
  .site.m-hero .hero .copy > :nth-child(4){ animation-delay:.36s; }

  /* 2. The places strip travels, and stops under a pointer or focus. Its
     duration is set from its width (script-motion.html), so it keeps one
     speed whatever the list holds. */
  .site.m-marquee .trustline .wrap{ max-width:none; padding:0; display:flex; width:max-content; animation:trust-scroll var(--trust-dur, 14s) linear infinite; }
  .site.m-marquee .trustline .row{ flex-direction:row; align-items:center; flex-wrap:nowrap; justify-content:flex-start; gap:32px; flex:none; padding:16px; }
  .site.m-marquee .trustline:hover .wrap, .site.m-marquee .trustline:focus-within .wrap{ animation-play-state:paused; }

  /* The coverage map draws its rivers and the Winchester pin pulses, as in the prototype. */
  .site .is-in .areamap .river{ stroke-dasharray:420; stroke-dashoffset:420; animation:map-draw 1.8s var(--ease) .2s forwards; }
  .site .is-in .areamap .pulse{ transform-box:fill-box; transform-origin:center; animation:map-pulse 2.4s ease-out 1s infinite; }

  /* 3. Sections rise in on scroll. */
  .site.m-reveal [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s var(--ease); }
  .site.m-reveal [data-reveal].is-in{ opacity:1; transform:none; }

  /* 4. The five checks rise in one by one as they come into view, each tick
     popping in and drawing, then a gilt ring going out from it once. The cards
     themselves are at full strength from the start, so a fast scroller never
     meets an empty navy band (site review, 4 Oct); only the ticks wait. --i is
     the card's place in the batch that arrived together (script-motion.html). */
  .site.m-checks .check[data-check="wait"]{ opacity:0; transform:translateY(28px); }
  .site.m-checks .check[data-check="wait"] .tk{ opacity:0; transform:scale(.3); }
  .site.m-checks .check[data-check="wait"] .tk path{ stroke-dashoffset:20; }
  .site.m-checks .check[data-check="go"]{ animation:check-rise .65s var(--ease) both, check-glow 1.6s ease-out both; animation-delay:calc(var(--i, 0) * 180ms), calc(var(--i, 0) * 180ms + 500ms); }
  .site.m-checks .check[data-check="go"] .tk{ animation:tick-pop .55s var(--ease) both, tick-ring 1.1s ease-out both; animation-delay:calc(var(--i, 0) * 180ms + 260ms), calc(var(--i, 0) * 180ms + 640ms); }
  .site.m-checks .check[data-check="go"] .tk path{ animation:tick-draw .42s ease both; animation-delay:calc(var(--i, 0) * 180ms + 520ms); }

  /* 5. The steps draw their rule left to right. */
  .site.m-reveal [data-reveal] .step::after{ transform:scaleX(0); transition:transform .7s var(--ease); transition-delay:calc(var(--d) * 150ms + 150ms); }
  .site.m-reveal [data-reveal].is-in .step::after{ transform:scaleX(1); }

  /* 6. The price bar splits. */
  .site.m-reveal [data-reveal] .pbar .them, .site.m-reveal [data-reveal] .pbar .us{ transition:flex-basis .9s var(--ease) .2s, padding .9s var(--ease) .2s; }
  .site.m-reveal [data-reveal]:not(.is-in) .pbar .them{ flex-basis:100%; }
  .site.m-reveal [data-reveal]:not(.is-in) .pbar .us{ flex-basis:0%; padding:0; }
}
@keyframes fadeup{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes map-draw{ to{ stroke-dashoffset:0; } }
@keyframes map-pulse{ from{ transform:scale(.6); opacity:.7; } to{ transform:scale(3.2); opacity:0; } }
@keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes check-rise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes check-glow{ 0%{ border-color:rgba(230,203,150,.85); background-color:rgba(196,154,82,.16); } 100%{ border-color:rgba(255,255,255,.14); background-color:rgba(255,255,255,.06); } }
@keyframes tick-pop{ 0%{ opacity:0; transform:scale(.3); } 60%{ opacity:1; transform:scale(1.18); } 100%{ opacity:1; transform:scale(1); } }
@keyframes tick-ring{ 0%{ box-shadow:0 0 0 0 rgba(196,154,82,.6); } 100%{ box-shadow:0 0 0 16px rgba(196,154,82,0); } }
@keyframes tick-draw{ from{ stroke-dashoffset:20; } to{ stroke-dashoffset:0; } }