/* ============================================================
   Roskosh Media — directory template stylesheet

   Built to sit beside roskoshmedia.co.uk: a tinted base rather
   than a neutral grey one, layered surfaces with a visible but
   quiet border, one accent glow behind the hero, a display serif
   for headlines over a geometric sans for everything else.

   Per-niche colour comes from site.json -> theme.light / theme.dark,
   which can override any token below. The defaults here are the
   grooming palette (warm green); ukcardetailers.co.uk overrides the
   base tint to a cooler steel in its own site.json.

   Theme mechanics, unchanged: light tokens on :root, dark under
   prefers-color-scheme guarded by :root:not([data-theme="light"]),
   and again under :root[data-theme="dark"].
   ============================================================ */

:root{
  /* ---- surfaces: warm off-white paper, layered ---- */
  --bg:#FBF9F5; --surface:#FFFFFF; --surface-2:#F4F1EA; --surface-3:#EBE6DA;
  --line:#E4DFD2; --line-2:#D0C9B8;
  /* ---- ink: AA or better on every surface above ---- */
  --ink:#131B17; --ink-2:#4B5750; --ink-3:#5F6A63;
  /* ---- niche accent (site.json overrides these) ---- */
  --accent:#4C7048; --accent-soft:#E7EFE2; --accent-ink:#33512F; --on-accent:#FFFFFF;
  /* ---- ink pill: used by pressed filter toggles ---- */
  --action:#16211B; --action-hover:#0B120E; --action-ink:#FBF9F5;
  /* ---- paid tier gold, also the "is this your business" card ---- */
  --gold:#7A5310; --gold-soft:#F7EFDC; --gold-ink:#63430A; --gold-line:#E0CDA4; --on-gold:#FFFFFF;
  /* ---- decorative: page glow and the hero ridge ---- */
  --glow-a:#E9F0E2; --glow-b:#F7EFDD;
  --w1:#EFE9DA; --w2:#DFE6D6; --w3:#C4D4BB; --w4:#9DBB97;
  /* ---- the dark plate used by the closing call to action ---- */
  --plate:#16211B; --plate-ink:#FBF9F5; --plate-line:#2C3A32;
  --focus:#4C7048;
  --shadow-sm:0 1px 2px rgba(19,27,23,.05);
  --shadow-md:0 1px 2px rgba(19,27,23,.05),0 10px 26px -14px rgba(19,27,23,.20);
  --shadow-lg:0 1px 2px rgba(19,27,23,.06),0 24px 54px -24px rgba(19,27,23,.30);
  --r-pill:999px; --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:8px;
  --font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --gutter:24px; --maxw:1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* deep green-tinted base, never flat black */
    --bg:#0F1613; --surface:#16201B; --surface-2:#1C2721; --surface-3:#23302A;
    --line:#27332C; --line-2:#36483D;
    --ink:#E9EFEA; --ink-2:#AFBEB4; --ink-3:#95A29A;
    --accent:#A6CE9A; --accent-soft:#1C2A20; --accent-ink:#C6E0B8; --on-accent:#0E1712;
    --action:#E9EFEA; --action-hover:#FFFFFF; --action-ink:#0F1613;
    --gold:#DFB264; --gold-soft:#2A2214; --gold-ink:#F0D19B; --gold-line:#4A3A1E; --on-gold:#1A1408;
    --glow-a:#1B3D2C; --glow-b:#123024;
    --w1:#182220; --w2:#1D3129; --w3:#254435; --w4:#2F5A42;
    --plate:#1C2721; --plate-ink:#E9EFEA; --plate-line:#36483D;
    --focus:#A6CE9A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.40);
    --shadow-md:0 1px 2px rgba(0,0,0,.35),0 12px 28px -14px rgba(0,0,0,.70);
    --shadow-lg:0 1px 2px rgba(0,0,0,.40),0 24px 54px -22px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1613; --surface:#16201B; --surface-2:#1C2721; --surface-3:#23302A;
  --line:#27332C; --line-2:#36483D;
  --ink:#E9EFEA; --ink-2:#AFBEB4; --ink-3:#95A29A;
  --accent:#A6CE9A; --accent-soft:#1C2A20; --accent-ink:#C6E0B8; --on-accent:#0E1712;
  --action:#E9EFEA; --action-hover:#FFFFFF; --action-ink:#0F1613;
  --gold:#DFB264; --gold-soft:#2A2214; --gold-ink:#F0D19B; --gold-line:#4A3A1E; --on-gold:#1A1408;
  --glow-a:#1B3D2C; --glow-b:#123024;
  --w1:#182220; --w2:#1D3129; --w3:#254435; --w4:#2F5A42;
  --plate:#1C2721; --plate-ink:#E9EFEA; --plate-line:#36483D;
  --focus:#A6CE9A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 1px 2px rgba(0,0,0,.35),0 12px 28px -14px rgba(0,0,0,.70);
  --shadow-lg:0 1px 2px rgba(0,0,0,.40),0 24px 54px -22px rgba(0,0,0,.85);
  color-scheme: dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--bg);scroll-padding-top:16px}
body{
  margin:0;overflow-x:clip;background:transparent;color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Page-level glow. Fixed, so a long town page never scrolls into a flat, empty field of colour;
   painted behind everything because html carries the page background, not body. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 42% at 88% -6%, var(--glow-a), transparent 68%),
    radial-gradient(46% 34% at 2% 4%, var(--glow-b), transparent 70%);
}
a{color:var(--ink);text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--accent);color:var(--on-accent);padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
img{max-width:100%}
p{margin:0}

h1,h2,h3{
  margin:0;font-family:var(--display);font-weight:600;font-optical-sizing:auto;
  line-height:1.08;letter-spacing:-.022em;text-wrap:balance;color:var(--ink);
}
h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.032em}
h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.026em}
h3{font-size:1.1rem;letter-spacing:-.012em;line-height:1.28}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:66ch;color:var(--ink-2);font-size:1.02rem}
.prose p,.prose ul,.prose table{margin-block:0 1.1em}
.prose h2{margin-block:1.65em .5em;color:var(--ink)}
.prose h3{margin-block:1.45em .35em;color:var(--ink)}
.prose li{margin-block:.35em}
.prose strong{color:var(--ink);font-weight:600}
.muted{color:var(--ink-2)}
.small{font-size:.9rem}
.num{font-variant-numeric:tabular-nums}
.center{text-align:center;margin-inline:auto}
.prose.mid{margin-inline:auto}                 /* centred block, left-aligned text */
.prose.mid h2{text-align:center}

/* eyebrow: small pill label, optionally with an icon */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px 6px 11px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
  width:fit-content;box-shadow:var(--shadow-sm);
}
.eyebrow svg{width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--on-accent);
  padding:12px 22px;border-radius:var(--r-pill);
  text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-sm);
}
.btn:hover{filter:brightness(1.06);text-decoration:none;box-shadow:var(--shadow-md)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--ink-3);filter:none}
/* outline in the site's accent: the header call to action, which belongs to us, not to the reader */
.btn.outline{background:transparent;color:var(--accent-ink);border-color:var(--accent);box-shadow:none}
.btn.outline:hover{background:var(--accent-soft);filter:none;box-shadow:none}
.btn.sm{padding:9px 16px;font-size:.88rem}

/* ---------- header ---------- */
/* Brand left, then the reader's links and our call to action pushed right. The call to action is
   a sibling of .nav rather than its last item so that on a phone it can stay on the brand's row
   while the links drop to a row of their own (see the 620px block). */
.top{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding-block:18px}
.brand{margin-right:auto;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.018em}
.brand svg{width:26px;height:26px;fill:var(--accent)}
.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.92rem;padding:9px 14px;border-radius:var(--r-pill)}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a.btn{color:var(--on-accent)}
.nav a.btn:hover{background:var(--accent)}
.nav a.btn.outline{color:var(--accent-ink)}
.nav a.btn.outline:hover{background:var(--accent-soft)}

/* ---------- full-bleed band ---------- */
.band{
  position:relative;
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  background:var(--surface-2);
  border-block:1px solid var(--line);
}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--line-2) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line-2) 1px,transparent 1px);
  background-size:72px 72px;opacity:.4;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 50%,#000,transparent 72%);
  mask-image:radial-gradient(120% 80% at 70% 50%,#000,transparent 72%);
}
.band > *{position:relative}

/* ---------- hero (town, area, region, guide, advertise) ---------- */
/* Top-aligned, always: nothing beside a hero may push it down the page. */
.hero{display:grid;gap:15px;max-width:800px;padding-block:24px 22px;justify-items:start;align-content:start}
.hero h1{margin-block:2px;font-size:clamp(1.95rem,3.7vw,2.85rem)}
.hero .lede{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ---------- home hero (task 990, photo returned beside the copy in task 996) ----------
   Headline and one-line lede on the left, the photograph in a rounded card on the right, then the
   town search inside a paper card across the full width with every region beside the box.
   No eyebrow, no chips, no counts up here: the numbers belong in the claims strip below, where
   they can be read as sentences rather than as decoration. On phones the photograph drops under
   the lede, above the search card, at full width. */
.homehero{position:relative;display:grid;gap:clamp(18px,2.4vw,26px);justify-items:start;align-content:start;
  padding-block:clamp(26px,4vw,46px) clamp(22px,3vw,34px)}
.homehero h1{max-width:17ch;font-size:clamp(2.1rem,4.4vw,3.25rem)}
.homehero .lede{font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--ink-2);max-width:54ch;text-wrap:pretty}
/* copy and photograph share one row; the picture is its own grid item, so however tall it is it
   can never push the headline down the page. */
.hh-top{width:100%;display:grid;gap:20px;align-items:center}
.hh-top > .copy{display:grid;gap:16px;justify-items:start;align-content:center;min-width:0}
.hh-shot{margin:0}
@media (min-width:901px){
  .hh-top{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(26px,4vw,52px)}
  .homehero .lede{max-width:44ch}
}

/* the search card: a bordered sheet of paper holding the box and the region shortcuts */
.findcard{
  width:100%;max-width:41rem;display:grid;gap:14px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  padding:clamp(15px,2vw,20px);box-shadow:var(--shadow-md);
}
.find-h{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;margin-bottom:8px}
/* Wide enough for a desk: the box on the left, every region beside it. Below 860px the two
   stack and the divider becomes a rule across the card. */
@media (min-width:861px){
  .findcard{max-width:none;grid-template-columns:minmax(250px,.8fr) minmax(0,1.6fr);gap:0 26px;align-items:start;padding:clamp(18px,2vw,24px)}
  .findcard .find-regions{border-top:0;border-left:1px solid var(--line);padding:2px 0 2px 26px}
  .findcard .townfind{align-self:center}
}
.find-regions{border-top:1px solid var(--line);padding-top:13px;display:grid;gap:7px}
.fr-head{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.fr-list{list-style:none;margin:0;padding:0;columns:148px 3;column-gap:20px}
.fr-list li{break-inside:avoid}
.fr-list a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:3px 0;text-decoration:none;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.fr-list a:hover{color:var(--accent-ink);text-decoration:underline}
.fr-list .num{color:var(--ink-3);font-size:.8rem;white-space:nowrap}
/* The checkbox is the whole mechanism behind the phone-only "All N regions" control: no script,
   every region still in the HTML, and the label is what the reader actually sees and taps. */
.fr-check{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
.fr-more{display:none}

/* three statements, with the site's real numbers inside them */
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.8vw,34px)}
.claim{display:grid;gap:9px;align-content:start;padding-left:16px;border-left:2px solid var(--accent)}
.claim h2{font-family:var(--font);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);font-weight:800;line-height:1.4}
.claim p{color:var(--ink-2);font-size:.95rem;line-height:1.62;text-wrap:pretty}
.claim b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* the decorative ridge under the home hero: tokens only, no external asset */
.ridge{
  position:relative;margin-inline:calc(50% - 50vw);width:100vw;
  height:clamp(76px,10vw,140px);overflow:hidden;line-height:0;
}
.ridge svg{width:100%;height:100%;display:block}
.ridge::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--bg),transparent 40%)}

/* ---------- town search (inside the home search card) ---------- */
.townfind{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;width:100%}
.townfind-box{
  display:flex;align-items:center;gap:10px;flex:1 1 100%;min-width:0;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:2px 16px;box-shadow:none;
}
/* the input drops its own outline, so the ring goes on the pill it sits in */
.townfind-box:focus-within{border-color:var(--accent);box-shadow:var(--shadow-lg);outline:2px solid var(--focus);outline-offset:2px}
.townfind-box svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round}
.townfind-box input[type=search]{
  font:inherit;font-size:1rem;color:var(--ink);background:none;border:0;outline:none;
  padding:13px 0;flex:1 1 auto;min-width:0;
}
.townfind-box input[type=search]::placeholder{color:var(--ink-3)}
.townfind-box input[type=search]::-webkit-search-cancel-button{cursor:pointer}
.find-hint{flex:1 1 100%;font-size:.84rem;color:var(--ink-3);line-height:1.5;margin-top:2px}
.townfind-count{font-variant-numeric:tabular-nums;min-height:1.4em;margin-left:4px}
/* the dropdown of matches: sits on top of the hero copy below the box, scrolls past eight rows */
.townfind{position:relative}
.townfind-results{
  position:absolute;top:calc(100% - 1.4em - 8px);left:0;right:0;z-index:30;
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:6px;max-height:min(60vh,420px);overflow:auto;
}
.townfind-results[hidden]{display:none}
.tfr{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink)}
.tfr:hover,.tfr.active{background:var(--accent-soft);color:var(--accent-ink)}
.tfr-name{font-weight:600}
.tfr-sub{font-size:.85rem;color:var(--ink-3)}
.tfr:hover .tfr-sub,.tfr.active .tfr-sub{color:var(--accent-ink)}
.tfr-empty{margin:0;padding:12px 14px;font-size:.92rem;color:var(--ink-3)}

/* ---------- town chooser: region cards holding town pills ----------
   Eleven full-width region rows made the home page 1,400px of list. These are cards in a
   two-to-three column grid, each holding its towns as pills, so every town on the site is
   one click away inside about one screen and no block is taller than what it contains. */
.regions{columns:316px 3;column-gap:14px}
.region{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px 18px 16px;box-shadow:var(--shadow-sm);display:block;
  break-inside:avoid;margin-bottom:14px;
}
.region:hover{border-color:var(--line-2);box-shadow:var(--shadow-md)}
.region-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;
  font-family:var(--font);font-size:1rem;font-weight:700;letter-spacing:-.012em;line-height:1.3;
  padding-bottom:11px;border-bottom:1px solid var(--line);margin:0 0 12px;
}
.region-label a{color:var(--ink);text-decoration:none}
.region-label a:hover{color:var(--accent-ink);text-decoration:underline}
.region-meta{font-weight:500;white-space:nowrap}
.regions[data-filtering] .region-meta{display:none}   /* region totals are not the filtered totals */
.townpills{display:flex;flex-wrap:wrap;gap:7px}
.townpill{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 13px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid transparent;color:var(--ink);
  text-decoration:none;font-size:.92rem;font-weight:600;letter-spacing:-.008em;
}
.townpill:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);text-decoration:none}
.townpill .num{color:var(--ink-3);font-weight:500;font-size:.84rem}
.townpill:hover .num{color:var(--accent-ink)}

/* the same towns as full rows, on region pages */
.townrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:9px}
.townrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 13px 12px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  text-decoration:none;box-shadow:var(--shadow-sm);
}
.townrow:hover{border-color:var(--accent);background:var(--surface-2);text-decoration:none}
/* Counts sit under the name rather than beside it: a long town name ("Southend-on-Sea") or a
   long plural ("detailers and valeters") would otherwise wrap some rows and not others. */
.tr-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.tr-name{font-weight:700;letter-spacing:-.012em;line-height:1.35}
.tr-meta{color:var(--ink-2);font-size:.86rem;line-height:1.4}
.tr-meta b{font-weight:600;color:var(--ink-2)}
.tr-go{
  width:28px;height:28px;flex:none;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;
}
.townrow:hover .tr-go{background:var(--accent-soft);border-color:var(--accent)}
.tr-go svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.townrow:hover .tr-go svg{transform:translateX(2px)}
/* hidden by the filter in app.js; both rules beat the display set above */
.townrow[hidden],.townpill[hidden],.region[hidden]{display:none}

/* ---------- stat grid ---------- */
.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 28px}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--ink-2);font-size:.8rem;margin-top:8px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
/* inline stat strip used on town / area / region heroes */
.stats{display:flex;gap:8px;flex-wrap:wrap;font-size:.9rem}
.stats span{
  display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;
}
.stats b{color:var(--ink);font-weight:700}

/* ---------- sections ---------- */
section{padding-block:clamp(36px,4.4vw,56px)}
section + section{border-top:1px solid var(--line)}
.band + section, section + .band, .band, .ridge + section{border-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.sec-head.listhead{margin-top:26px}
.featured.after{margin-top:30px}
.featured.before{margin-bottom:18px}
/* Not a control: the line that tells a reader a free listing's website link is held back. It used
   to be a padlocked, dashed, greyed-out button that read as a broken link (task 1010). */
.lockline{font-size:.88rem;color:var(--ink-3);margin-top:-2px}
.lockline a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.lockline a:hover{color:var(--accent-ink);text-decoration-color:currentColor}

/* ---------- photographs ----------
   Each one keeps its own aspect ratio, so nothing is ever cropped off a face. A hero and its
   photograph share a two-column grid with everything top-aligned: the picture sits beside the
   copy and can never push the headline down the page, which is what the old region panel did. */
.shot{
  display:block;width:100%;height:auto;border-radius:var(--r-xl);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--surface-2);
}
/* The copy is one grid item and the photograph is the other, so a tall picture can only ever
   sit beside the words: it cannot stretch the row the headline is in, which is exactly what the
   old region panel did to the home page. */
.hero.withshot{max-width:none;grid-template-columns:1fr;column-gap:clamp(26px,4vw,52px);align-items:start}
.hero.withshot:has(.shot){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.hero.withshot > .copy{display:grid;gap:15px;justify-items:start;align-content:start;min-width:0}
.hero.withshot > .shot{align-self:start;margin-top:5px}
/* one column below 900px: headline first, photograph under the copy */
@media (max-width:900px){
  .hero.withshot:has(.shot){grid-template-columns:1fr;row-gap:20px}
}
.hero + section,.hero + .band{padding-top:34px}
/* Guide hero photograph (task 234): shares .shot's frame, capped to the prose column by sitting
   inside .prose; just needs its own top/bottom breathing room between the H1 and the guide body. */
.guide-hero{margin-block:4px 22px}
.sec-head.center{flex-direction:column;align-items:center;text-align:center;gap:12px;margin-bottom:28px}
.sec-head.center .sub{color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.sec-head h2{letter-spacing:-.028em}

/* ---------- featured cards ---------- */
.featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:20px;display:grid;gap:11px;align-content:start;box-shadow:var(--shadow-sm);
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--line-2)}
.card .tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg)}
.card .meta{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2);font-size:.9rem;flex-wrap:wrap;align-items:center}
.card .actions{display:flex;gap:9px;margin-top:6px;flex-wrap:wrap}
.card.claim{border-style:dashed;box-shadow:none;background:transparent;border-color:var(--gold-line)}

.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;letter-spacing:.03em;
  padding:4px 11px;border-radius:var(--r-pill);
}
.badge.featured{background:var(--gold-soft);color:var(--gold-ink);border:1px solid var(--gold-line)}
.badge.verified{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent)}
.mobile-pill{
  display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;
}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* An area chip carries a name, its postcodes and a count. At 375px a name like "Birmingham city
   centre & Digbeth" has to wrap, so the name and postcodes share one wrapping text block and the
   count is a separate item aligned to the first line (baseline, not centre) -- the number never
   drops to a line of its own and never floats level with the middle of a two-line name. */
.chip{
  display:inline-flex;align-items:baseline;gap:8px;padding:8px 15px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--surface);color:var(--ink);text-decoration:none;
  font-size:.9rem;font-weight:600;max-width:100%;
}
.chip:hover{border-color:var(--accent);background:var(--surface-2);text-decoration:none}
.chip .pc{color:var(--ink-3);font-weight:400;font-size:.84rem}
.chip-text{min-width:0}
.chip-n{color:var(--ink-3);font-weight:600;font-size:.84rem;white-space:nowrap;margin-left:auto}
.chip:hover .chip-n{color:var(--accent-ink)}

/* ---------- listing rows ---------- */
/* The phone number is what a dog owner or a car owner came for, so it is the one filled
   control on every row, and it keeps its own column at every width. */
.rows{display:grid;gap:8px}
.row[hidden]{display:none}
.row{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr) 104px 138px auto;
  gap:16px;align-items:center;padding:15px 17px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.row:hover{border-color:var(--line-2);box-shadow:var(--shadow-md)}
.row .name{display:flex;align-items:center;gap:12px;min-width:0}
.row-img{width:72px;height:54px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);flex:none}
.row .name-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.row .name-text > span:first-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row .name a{color:var(--ink);font-weight:700;text-decoration:none;letter-spacing:-.014em;font-size:1.02rem}
.row .name a:hover{text-decoration:underline}
.row .name .tag{color:var(--ink-2);font-size:.88rem;line-height:1.45}
.row .area{color:var(--ink-2);font-size:.88rem}
.row .area a{color:var(--ink-2)}
.row .from{font-weight:700}
.row .from small{display:block;font-weight:500;color:var(--ink-3);font-size:.74rem;letter-spacing:.02em}
.row .rating{color:var(--ink-2);font-size:.9rem}
.row .rating b{color:var(--ink);font-weight:700}
.row .rating small{display:block;color:var(--ink-3);font-size:.74rem;margin-top:3px}
.row .call{text-align:right}
.row .call a{white-space:nowrap}

/* A rating is a fact with a source, so it reads as a chip you can open, not as broken text. */
.rating-link{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:var(--r-pill);padding:3px 10px;font-size:.86rem;line-height:1.5;white-space:nowrap;
}
.rating-link b{color:inherit;font-weight:800}
.rating-link:hover{filter:brightness(1.05);text-decoration:none}
.rating-link::after{content:"\2197";font-size:.78em;opacity:.75}

/* Same stacked shape as the phone layout below: inside .two the main column is barely 600px
   wide, which turns a five-column row into one word per line. */
.two .row{grid-template-columns:1fr auto;grid-template-areas:"name call" "area area" "from rating";row-gap:10px}
.two .row .name{grid-area:name;flex-direction:column;align-items:flex-start;gap:8px}
.two .row .call{grid-area:call}.two .row .area{grid-area:area}
.two .row .from{grid-area:from}.two .row .rating{grid-area:rating;text-align:right}
.two .row-img{width:100%;max-width:320px;height:auto}

@media (max-width:860px){
  .row{grid-template-columns:1fr auto;grid-template-areas:"name call" "area area" "from rating";row-gap:10px}
  .row .name{grid-area:name}.row .call{grid-area:call}.row .area{grid-area:area}
  .row .from{grid-area:from}.row .rating{grid-area:rating;text-align:right}
  /* The name cell shares its grid row with the call button, so it only has half the card's width
     -- too narrow to sit a thumbnail beside the name and tagline without wrapping one word per
     line. Stack the thumbnail above the text instead, full width of the cell. */
  .row .name{flex-direction:column;align-items:flex-start;gap:8px}
  .row-img{width:100%;max-width:320px;height:auto}
}

/* ---------- list filters (progressive enhancement; hidden until app.js wires them) ---------- */
/* Sticky, because in a thirty-business town the controls are useless once they scroll away. */
.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px;
  position:sticky;top:0;z-index:12;padding-block:12px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
/* both bars ship with the hidden attribute and app.js takes it off; an author display rule beats
   the browser's [hidden] rule, so without this they would show with JavaScript off and do nothing */
.filters[hidden],.townfind[hidden]{display:none}
.filters input[type=search],.filters select{
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:9px 16px;min-width:0;
}
.filters input[type=search]{flex:1 1 210px;max-width:290px}
.filters input[type=search]::placeholder{color:var(--ink-3)}
.filters select{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6A63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px}
.chip.toggle{font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;padding:9px 16px;align-items:center}
.chip.toggle[aria-pressed="true"]{background:var(--action);color:var(--action-ink);border-color:var(--action)}
.filter-count{margin-left:auto;font-variant-numeric:tabular-nums}
.linkbtn{font:inherit;font-size:.9rem;font-weight:700;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:9px 4px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
.empty{padding:26px 0;text-align:center}
.legend{margin-bottom:12px;line-height:1.95;max-width:88ch}
.legend .badge{vertical-align:baseline;margin-inline:1px}

/* open / closed state, written by app.js next to the hours heading */
.openstate{
  display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:800;letter-spacing:0;text-transform:none;vertical-align:middle;
}
.openstate::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.openstate.is-open{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent)}
.openstate.is-shut{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}

/* sticky call bar, phones only */
.callbar{display:none}
@media (max-width:620px){
  .callbar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    border-top:1px solid var(--line);backdrop-filter:blur(10px);
  }
  .callbar .btn{width:100%;padding:14px 22px;font-size:1rem}
  body:has(.callbar){padding-bottom:78px}
}

/* ---------- services (task 990) ---------- */
/* the home-page band: one small card per service, name over its two real counts */
.servicegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.servicecard{
  display:grid;gap:3px;padding:14px 16px;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.servicecard:hover{border-color:var(--accent);text-decoration:none}
.sc-name{font-weight:700;letter-spacing:-.012em}
.sc-meta{color:var(--ink-2);font-size:.85rem;font-variant-numeric:tabular-nums}
/* a service page: one region block, then its towns as chips */
.svc-region + .svc-region{margin-top:26px}

/* ---------- guides index: by topic ---------- */
/* A family of guides (the same guide written for many towns) folded into one open/close block,
   so the topic list at the top of the index stays short and every town link is still on the page. */
.topics{display:grid;gap:8px}
.topic{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 16px}
.topic > summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-weight:700;letter-spacing:-.012em;
}
.topic > summary::-webkit-details-marker{display:none}
.topic > summary::after{content:"+";color:var(--ink-3);font-weight:700;margin-left:auto}
.topic[open] > summary::after{content:"\2013"}
.topic-count{color:var(--ink-3);font-weight:500;font-size:.88rem;white-space:nowrap}
.topic-towns{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
/* the same pills, used on their own at the foot of the guides index as the by-town chooser */
.guide-towns{margin-top:0;padding-top:0;border-top:0}
.topic-towns a{
  font-size:.86rem;color:var(--ink-2);text-decoration:none;padding:5px 11px;
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-pill);
}
.topic-towns a:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
/* how many guides that town has, inside the by-town list at the foot of the guides index */
.topic-towns .tt-n{color:var(--ink-3);font-weight:500;font-size:.82rem;margin-left:6px;font-variant-numeric:tabular-nums}
.topic-towns a:hover .tt-n{color:inherit}

/* ---------- guides ---------- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.guide{
  display:grid;gap:7px;padding:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-sm);align-content:start;
}
.guide:hover{box-shadow:var(--shadow-md);border-color:var(--line-2)}
.guide a{color:var(--ink);font-family:var(--display);font-weight:600;text-decoration:none;font-size:1.14rem;letter-spacing:-.018em;line-height:1.24}
.guide a:hover{text-decoration:underline}
/* Guide topic thumbnail (task 234): bleeds to the card's edges above the text, a fixed aspect ratio
   cropped to fill so cards of mixed photo/no-photo line up at the same width regardless of height. */
.guide-thumb{
  display:block;width:calc(100% + 40px);height:auto;margin:-20px -20px 12px;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-xl) var(--r-xl) 0 0;border:0;box-shadow:none;background:var(--surface-2);
}

/* ---------- closing call to action ---------- */
.cta{
  position:relative;overflow:hidden;
  background:var(--plate);color:var(--plate-ink);border:1px solid var(--plate-line);border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,40px);display:flex;justify-content:space-between;align-items:center;
  gap:24px;flex-wrap:wrap;margin-block:clamp(32px,4vw,50px);
}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 80% at 88% 0%,var(--accent),transparent 70%);opacity:.18}
.cta > *{position:relative}
.cta h2{color:var(--plate-ink);letter-spacing:-.028em}
.cta p{opacity:.82;max-width:52ch;margin-top:10px}
.cta .btn{background:var(--accent);color:var(--on-accent)}

/* ---------- business page ---------- */
.crumbs{font-size:.86rem;color:var(--ink-3);padding-block:18px 4px;display:flex;gap:4px 8px;flex-wrap:wrap;align-items:baseline}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .crumb-sep{color:var(--line-2);user-select:none}
.biz-head{display:grid;gap:12px;padding-block:10px 22px;justify-items:start}
.biz-head .title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.biz-head h1{font-size:clamp(2rem,4.2vw,3rem)}
.biz-head .lede{font-size:1.08rem;max-width:58ch;color:var(--ink-2)}
.biz-head .meta{display:flex;gap:8px;flex-wrap:wrap;font-size:.9rem;align-items:center}
.biz-head .meta > span{
  display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;
}
/* the rating chip brings its own surface and border */
.biz-head .meta > span.rated{background:none;border:0;padding:0}
.biz-head .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
/* one filled primary on the page, and it is the phone number */
.biz-head .actions .btn:not(.ghost){padding:14px 26px;font-size:1rem}
/* detail-page sub-headings sit below the page title, so a step down from h2 */
.two .stack h2,.two .stack .prose h2{font-size:clamp(1.28rem,2vw,1.56rem);letter-spacing:-.02em}
/* The sidebar starts level with the first thing in the main column, not 100px below it. */
.two{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:clamp(24px,3.4vw,40px);padding-block:0 44px;align-items:start}
/* "Other <plural> in <area>" is the third child of .two rather than the last item of the main
   column, so that when the columns stack on a phone it lands after this business's own hours,
   address and sources instead of between the prices and them. On a desktop it goes back under the
   main column, and the side rail spans both rows so that "Other ..." starts directly under the
   prices rather than waiting for the rail's row to close and leaving a column of dead space. */
.biz-others{min-width:0}
@media (min-width:861px){
  .two > .stack:not(aside){grid-area:1/1}
  .two > aside{grid-area:1/2/span 2/3}
  .two > .biz-others{grid-area:2/1}
}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.stack{display:grid;gap:26px;align-content:start}
.two .stack > *:first-child h2:first-child{margin-top:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;display:grid;gap:12px;justify-items:start;box-shadow:var(--shadow-sm)}
.panel h3{font-family:var(--font);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
/* "Is this your business" is addressed to the owner, so it is the one warm card on the page */
.panel.claim{background:var(--gold-soft);border-color:var(--gold-line);border-style:solid;box-shadow:var(--shadow-md)}
.panel.claim h3{color:var(--gold-ink)}
.panel.claim .btn:not(.ghost){background:var(--gold);color:var(--on-gold)}
.panel.claim .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--gold-line)}
.panel.claim a:not(.btn){color:var(--gold-ink)}
.biz-img{width:100%;aspect-ratio:4/3;max-height:380px;object-fit:cover;border-radius:var(--r-xl)}
.hours{width:100%;border-collapse:collapse;font-size:.94rem}
.hours td{padding:7px 0;border-bottom:1px solid var(--line)}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hours tr.today td{font-weight:800;color:var(--ink)}
.prices{width:100%;border-collapse:collapse}
.prices td{padding:12px 0;border-bottom:1px solid var(--line)}
.prices tr:last-child td{border-bottom:0}
.prices td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.services{display:flex;flex-wrap:wrap;gap:8px}
.services span{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;font-size:.88rem;color:var(--ink-2)}
table.data{border-collapse:collapse;width:100%;font-size:.95rem}
table.data th,table.data td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
table.data th{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
table.data td:not(:first-child){font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}

/* ---------- pricing tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:18px;align-items:stretch}
.tier{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);
}
.tier.hot{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.tier .price{font-family:var(--display);font-size:2.6rem;font-weight:600;letter-spacing:-.034em;line-height:1;font-variant-numeric:tabular-nums}
.tier .price small{font-family:var(--font);font-size:.9rem;color:var(--ink-3);font-weight:700}
.tier ul{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:10px;color:var(--ink-2);font-size:.94rem}
.tier li{display:grid;grid-template-columns:19px 1fr;gap:10px;align-items:start;line-height:1.45}
.tier li::before{
  content:"\2713";width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);
  display:grid;place-items:center;font-size:.64rem;font-weight:800;line-height:1;
}
.tier .btn{margin-top:auto;align-self:flex-start}
.promo{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent);border-radius:var(--r-md);padding:10px 13px;line-height:1.45}
.promo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:.95em;letter-spacing:.02em}

/* ---------- footer (task 990) ---------- */
/* Four columns on a tinted band: the brand and the legal line, then the regions, services and
   guide topics a reader is most likely to want next. One column on a phone. */
.site-foot{
  background:var(--surface-2);border-top:1px solid var(--line);
  margin-top:clamp(30px,4vw,56px);padding-block:clamp(30px,3.6vw,46px) 26px;
  color:var(--ink-2);line-height:1.6;
}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px 36px;align-items:start}
.foot-brand{display:grid;gap:12px;justify-items:start}
.foot-blurb{font-size:.92rem;max-width:40ch;text-wrap:pretty}
.foot-legal{font-size:.78rem;line-height:1.62;color:var(--ink-3);max-width:52ch}
.foot-legal a{color:var(--ink-2)}
.foot-h{font-family:var(--font);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;margin-bottom:13px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-col a{display:inline-flex;gap:8px;align-items:baseline;color:var(--ink-2);text-decoration:none;font-size:.9rem}
.foot-col a:hover{color:var(--ink);text-decoration:underline}
.foot-col .num{color:var(--ink-3);font-size:.8rem;font-variant-numeric:tabular-nums}
.foot-more{margin-top:14px}
.foot-more a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font-weight:700;font-size:.88rem;text-decoration:none}
.foot-more a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.foot-more a:hover{text-decoration:underline}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;
  margin-top:clamp(26px,3vw,38px);padding-top:18px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-3);
}
.foot-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom a{color:var(--ink-2)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px 30px}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.demo-note{background:var(--gold-soft);color:var(--gold-ink);font-size:.86rem;padding:10px 16px;border-radius:var(--r-pill);margin-top:14px;width:fit-content}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .chip,.btn,.card,.townrow,.townpill,.region,.row,.guide,.tier,.rating-link,.servicecard,.topic-towns a{transition:border-color .16s ease,background .16s ease,box-shadow .2s ease,transform .16s ease,color .16s ease}
  .tr-go,.tr-go svg{transition:transform .16s ease,background .16s ease,border-color .16s ease}
  .card:hover,.guide:hover,.row:hover{transform:translateY(-1px)}
  .btn:active,.townpill:active,.chip:active{transform:scale(.97)}
}

/* ---------- more contrast ---------- */
@media (prefers-contrast:more){
  :root{--ink-2:var(--ink);--ink-3:var(--ink);--line:var(--line-2)}
  .card,.tier,.panel,.region,.row,.guide{border-width:2px}
  .btn.ghost{border-width:2px;border-color:var(--ink)}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .statgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .claims{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  :root{--gutter:16px}
  body{font-size:15.5px}
  /* Towns, Services and Guides used to be display:none here, which left a phone reader with a
     header offering nothing but our own "Add your business" button. They now sit on a second row
     under the brand, full width, with the call to action still beside the brand on the first. */
  .top{padding-block:12px 0;gap:10px 12px;flex-wrap:wrap}
  .nav{flex:1 0 100%;order:3;gap:0 2px;margin-top:2px;border-top:1px solid var(--line)}
  .nav a{padding:11px 12px;font-size:.92rem}
  .nav a:first-child{margin-left:-12px}
  /* brand and call to action have to share one 375px row, so both give up a little */
  .brand{font-size:.94rem;gap:7px}
  .brand svg{width:22px;height:22px}
  .nav-cta{padding:9px 13px;font-size:.82rem}
  .brand span{white-space:nowrap}
  .statgrid{gap:22px}
  .stat b{font-size:1.7rem}
  .regions{columns:1}
  .region{padding:16px;margin-bottom:12px}
  .homehero{padding-block:22px 18px;gap:16px}
  .homehero h1{max-width:none}
  .fr-list{columns:130px 2}
  /* Phones see the eight biggest regions; the rest are one tap away (task 1010). */
  .fr-check:not(:checked) ~ .fr-list > li:not(.fr-top){display:none}
  .fr-check:checked ~ .fr-more{display:none}
  .fr-more{
    display:inline-flex;align-items:center;gap:5px;align-self:start;cursor:pointer;
    font-size:.86rem;font-weight:700;color:var(--accent-ink);padding:6px 0;
  }
  .fr-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
  .fr-check:focus-visible ~ .fr-more{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  .filters{gap:8px}
  .filters input[type=search]{max-width:none;flex:1 1 100%}
  .cta{padding:24px}
  .tier{padding:20px}
  .biz-head .actions{width:100%}
  .biz-head .actions .btn{flex:1 1 auto}
}
@media print{
  body::before,.ridge,.callbar,.filters,.townfind{display:none}
  html,body{background:#fff;color:#000}
}