/* ===================================================================
   Hair & Beauty — redesign mockup stylesheet
   21 Aug 2026

   ONE stylesheet, THREE palettes. Everything below the palette block is
   colour-agnostic: it only ever reads a custom property. Choosing a
   direction is choosing a :root block, which is exactly what adopting it
   costs in production (css/color.css, then bump ?v=).

   Class names are the live ones — .hb-card, .hb-row, .hb-fab, .hb-rate,
   .hb-vtick, .hb-tabs — so lib/cards.js and tools/generate.py can emit
   this markup unchanged.
   =================================================================== */

/* ---------------------------------------------------------------- type */
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ============================================================ PALETTES */
/* A — the reference board. Warm grey ground, one saturated orange. */
:root,
[data-palette="a"]{
  --ground:#EDEBE7;
  --card:#FAF9F7;
  --raise:#FFFFFF;
  --deep:#E4E1DA;          /* footer + banded sections */
  --ink:#111111;
  --ink-2:#3D3B37;
  --muted:#6E6B65;
  --line:#DEDAD2;
  --line-2:#C9C4BA;
  --acc:#F59300;
  --acc-d:#D97D00;
  --acc-on:#111111;        /* text ON the accent. NOT white: white on #F59300 is
                              2.32:1 and fails AA. Ink is 8.14:1. Blush and forest
                              are dark enough to keep white — this is A-only. */
  --acc-soft:#FDF0DC;
  --acc-text:#8A5000;      /* accent used AS text — contrast-safe variant */
  --pill:#111111;          /* the black CTA pill */
  --pill-on:#FFFFFF;
  --star:#E5A83C;          /* Google's stars are Google's. Always warm. */
  --shadow:0 1px 2px rgba(17,17,17,.04), 0 12px 32px -18px rgba(17,17,17,.22);
  --shadow-lift:0 2px 6px rgba(17,17,17,.05), 0 22px 48px -22px rgba(17,17,17,.3);
}
/* B — the house palette already in css/color.css. */
[data-palette="b"]{
  --ground:#F7F5F2;
  --card:#FFFFFF;
  --raise:#FFFFFF;
  --deep:#EFEBE6;
  --ink:#17191C;
  --ink-2:#3A3D42;
  --muted:#595959;
  --line:#E7E7E7;
  --line-2:#D6D4D1;
  --acc:#8F4C56;
  --acc-d:#743D46;
  --acc-on:#FFFFFF;
  --acc-soft:#F8EEF0;
  --acc-text:#8F4C56;
  --pill:#17191C;
  --pill-on:#FFFFFF;
  --star:#E5A83C;
  --shadow:0 1px 2px rgba(23,25,28,.04), 0 12px 32px -18px rgba(23,25,28,.2);
  --shadow-lift:0 2px 6px rgba(23,25,28,.05), 0 22px 48px -22px rgba(23,25,28,.28);
}
/* C — deep forest on warm cream. Nobody in UK beauty booking owns it:
   Treatwell is coral, Glowday is purple, Fresha is near-black and lilac.
   It clears AA as body text at 15px, which orange does not. */
[data-palette="c"]{
  --ground:#F4F0EA;
  --card:#FFFCF8;
  --raise:#FFFFFF;
  --deep:#E9E2D6;
  --ink:#1A1714;
  --ink-2:#413C35;
  --muted:#6B6459;
  --line:#E2DBCF;
  --line-2:#CDC4B4;
  --acc:#20493C;
  --acc-d:#173629;
  --acc-on:#FFFDF9;
  --acc-soft:#E4EDE6;
  --acc-text:#20493C;
  --pill:#20493C;
  --pill-on:#FFFDF9;
  --star:#E5A83C;
  --shadow:0 1px 2px rgba(26,23,20,.04), 0 12px 32px -18px rgba(26,23,20,.22);
  --shadow-lift:0 2px 6px rgba(26,23,20,.05), 0 22px 48px -22px rgba(26,23,20,.3);
}

:root{
  --r-card:24px; --r-photo:16px; --r-panel:28px; --r-btn:14px; --r-pill:999px;
  --gut:clamp(18px,4vw,44px);
  --max:1340px;
  --hdr:116px;
  --fs-body:15.5px;
}

/* ================================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4,h5{margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.15}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
/* An author `display` declaration beats the UA stylesheet's [hidden]{display:none},
   so .hb-card{display:flex} silently defeated the category filter. */
[hidden]{display:none !important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================== header */
.hb-hdr{background:var(--ground); position:relative; z-index:40}
.hb-top{max-width:var(--max); margin:0 auto; padding:20px var(--gut) 14px;
  display:flex; align-items:center; gap:20px}
.hb-logo{display:flex; flex-direction:column; line-height:1; flex:none}
.hb-logo__n{font-size:20px; font-weight:600; letter-spacing:-.03em}
.hb-logo__k{font-size:9.5px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-top:4px}
.hb-top__r{margin-left:auto; display:flex; align-items:center; gap:8px}
.hb-tlink{padding:9px 14px; font-size:14.5px; font-weight:500; color:var(--ink-2);
  border-radius:var(--r-pill); transition:background .16s, color .16s}
.hb-tlink:hover{background:var(--card); color:var(--ink)}

/* pills — two tiers only, per BRIEF */
.pill{display:inline-flex; align-items:center; gap:8px; border:0; border-radius:var(--r-pill);
  padding:11px 20px; font-size:14.5px; font-weight:500; letter-spacing:-.01em;
  transition:background .16s, color .16s, border-color .16s, transform .16s}
.pill--solid{background:var(--pill); color:var(--pill-on)}
.pill--solid:hover{background:var(--acc-d); color:var(--acc-on)}
.pill--ghost{background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}
.pill--ghost:hover{background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2)}
.pill--acc{background:var(--acc); color:var(--acc-on)}
.pill--acc:hover{background:var(--acc-d)}
.pill--lg{padding:15px 28px; font-size:16px}

/* category tab row — the reference's pill-track, carrying our IA */
.hb-tabs{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
[data-hb-tabs]{display:block}
.hb-tabs__in{display:flex; gap:2px; background:var(--deep); border-radius:var(--r-pill);
  padding:5px; overflow-x:auto; scrollbar-width:none}
.hb-tabs__in::-webkit-scrollbar{display:none}
@media (max-width:1080px){
  .hb-tabs__in{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
    mask-image:linear-gradient(to right,#000 88%,transparent)}
}
.hb-tab{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:1 0 auto;
  justify-content:center; padding:10px 18px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; color:var(--ink-2); transition:background .16s, color .16s}
.hb-tab:hover{color:var(--ink)}
.hb-tab--on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
.hb-tab__i{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:none; opacity:.75}
.hb-tab--on .hb-tab__i{stroke:var(--acc); opacity:1}

/* mobile chrome */
.hb-burger{display:none}
.hb-sheet{position:fixed; inset:0; z-index:90; background:var(--ground);
  transform:translateY(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; padding:0 0 40px}
.hb-sheet.is-on{transform:translateY(0)}
.hb-sheet__top{display:flex; align-items:center; padding:20px var(--gut);
  position:sticky; top:0; background:var(--ground)}
.hb-sheet__g{padding:8px var(--gut) 0}
.hb-sheet__g h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:22px 0 4px}
.hb-sheet__g a{display:block; padding:11px 0; font-size:18px; font-weight:500;
  border-bottom:1px solid var(--line)}
.hb-sheet__cta{padding:26px var(--gut) 0; display:grid; gap:10px}
.hb-sheet__cta .pill{justify-content:center}

/* ================================================================ hero */
.hb-hero{padding:2px 0 0}
.hb-hero__eyebrow{text-align:center; font-size:16px; color:var(--ink-2); margin:0 0 4px}
.hb-hero__d{
  text-align:center; font-weight:600; letter-spacing:-.05em; line-height:.94;
  font-size:clamp(46px,10.6vw,118px); margin:0; overflow-wrap:break-word;
  position:relative; z-index:1;
}
.hb-hero__d em{font-style:normal; color:var(--acc-text)}

/* The stage is NOT clipped, so the search bar can straddle the image edge. */
.hb-hero__stage{position:relative; z-index:2; padding-bottom:38px;
  margin-top:clamp(-19px,-3.4vw,-48px)}

/* Liquid glass. The card's top edge is frosted glass rather than photograph, so
   the headline behind it stays visible — blurred and dimmed — exactly as it does
   in the reference. backdrop-filter reads what is BEHIND the element, which is
   why .hb-hero__d sits at z-index 1 and the stage at 2. */
.hb-hero__media{
  position:relative; border-radius:var(--r-panel); overflow:hidden;
  aspect-ratio:16/6.1; isolation:isolate;
  /* No white veil. The reference's top band is simply the page ground seen
     through glass, and its photograph happens to start on a white wall so the
     join is invisible. Ours starts on a green ceiling, so a white wash reads as
     a milky overlay instead of as glass. The tint is gone; the band is the
     blurred backdrop, and the photograph fades in over a long soft ramp. */
  backdrop-filter:blur(11px) saturate(1.08);
  -webkit-backdrop-filter:blur(11px) saturate(1.08);
  background:linear-gradient(180deg, rgba(255,255,255,.20) 0%,
                             rgba(255,255,255,.07) 8%, rgba(255,255,255,0) 15%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(255,255,255,.22),
    0 24px 60px -34px rgba(0,0,0,.35);
}
.hb-hero__media>img{
  width:100%; height:100%; object-fit:cover;
  /* Long, soft ramp: the join between the glass band and the photograph has to
     be gradual because the two are different colours. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 8%,
                     rgba(0,0,0,.55) 17%, rgba(0,0,0,.88) 25%, #000 33%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 8%,
             rgba(0,0,0,.55) 17%, rgba(0,0,0,.88) 25%, #000 33%);
}
.hb-hero__scrim{position:absolute; inset:auto 0 0 0; height:44%; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.22),rgba(0,0,0,0))}

/* --- the search panel. Location + Service. No dates: we hold no availability.
   It straddles the image edge — half over the photograph, half on the page. */
.hb-srch{
  position:absolute; left:clamp(16px,3.4vw,46px); right:clamp(16px,3.4vw,46px); bottom:0;
  z-index:3;
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-radius:var(--r-panel); padding:8px 8px 8px 26px;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 18px 44px -20px rgba(0,0,0,.4);
}
.hb-srch__f{flex:1 1 0; min-width:0; padding:10px 14px 10px 0; position:relative}
.hb-srch__f + .hb-srch__f{padding-left:26px}
.hb-srch__f + .hb-srch__f::before{content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:1px; background:rgba(0,0,0,.10)}
.hb-srch__l{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
  color:var(--muted); margin-bottom:3px}
.hb-srch__l svg{width:15px; height:15px; fill:none; stroke:var(--acc); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.hb-srch input,.hb-srch select{
  width:100%; border:0; background:transparent; padding:0; color:var(--ink);
  font-size:17px; font-weight:600; letter-spacing:-.02em; outline:none;
  appearance:none; -webkit-appearance:none;
}
.hb-srch input::placeholder{color:var(--line-2); font-weight:500}
.hb-srch__v{display:flex; align-items:center; gap:9px; min-width:0}
.hb-srch__v select{width:auto; max-width:100%; text-overflow:ellipsis}
.hb-srch__v > i{flex:none; width:7px; height:7px; border-right:1.9px solid var(--muted);
  border-bottom:1.9px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px)}
.hb-srch__near{flex:none; display:inline-flex; align-items:center; gap:7px; border:0;
  background:transparent; color:var(--ink-2); font-size:13.5px; font-weight:500;
  padding:10px 16px; border-radius:var(--r-pill); margin-right:2px; white-space:nowrap;
  transition:background .16s, color .16s}
.hb-srch__near:hover{background:rgba(0,0,0,.05); color:var(--ink)}
.hb-srch__near svg{width:15px; height:15px; fill:none; stroke:var(--acc); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.hb-srch__go{flex:none; width:60px; height:60px; border:0; border-radius:20px;
  background:var(--acc); color:var(--acc-on); display:grid; place-items:center;
  transition:background .16s, transform .16s}
.hb-srch__go:hover{background:var(--acc-d); transform:scale(1.03)}
.hb-srch__go svg{width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round}

/* Stacked search: the phone layout, and the form on any page that wants a card
   in normal flow. position:static is on the BASE rule, not the media query —
   .hb-srch is absolute (it floats inside the hero image) and a page opting in at
   desktop would otherwise get a card floating over its own content. */
.hb-srch--m{
  display:none; position:static; inset:auto; background:var(--card);
  border-radius:var(--r-panel); padding:16px; box-shadow:var(--shadow);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hb-srch--m .hb-srch__f{padding:0; margin-bottom:12px}
.hb-srch--m .hb-srch__f + .hb-srch__f{padding-left:0}
.hb-srch--m .hb-srch__f + .hb-srch__f::before{display:none}
.hb-srch--m .hb-srch__l{margin-bottom:5px}
.hb-srch--m input,.hb-srch--m select{background:rgba(255,255,255,.72); border-radius:14px;
  padding:14px 16px; font-size:16px; width:100%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hb-srch--m .pill{width:100%; justify-content:center}

/* ============================================================ sections */
.sect{padding:clamp(48px,7vw,86px) 0}
.sect--band{background:var(--deep)}
.sect--tight{padding:clamp(34px,4.6vw,56px) 0}
.sect__h{margin:0 0 6px; font-size:clamp(24px,3.2vw,34px)}
.sect__s{margin:0 0 28px; color:var(--muted); font-size:16px; max-width:62ch}
.sect__head{display:flex; align-items:flex-end; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.sect__head .sect__h,.sect__head .sect__s{margin:0}
.sect__head>div{flex:1 1 320px; min-width:0}
.sect__head .sect__s{margin-top:6px}
.centered{text-align:center}
.centered .sect__s{margin-left:auto; margin-right:auto}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--acc-text); margin:0 0 10px}

/* ============================================================== grids */
.grid{display:grid; gap:16px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* =========================================================== the cards */
/* .hb-card — split card. Homepage, category, region, county grids.
   Markup is what lib/cards.js card() already emits. */
.hb-card{background:var(--card); border-radius:var(--r-card); padding:9px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition:box-shadow .2s, transform .2s}
.hb-card:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.hb-card__i{position:relative; border-radius:var(--r-photo); overflow:hidden;
  aspect-ratio:4/3; background:var(--deep)}
.hb-card__i img{width:100%; height:100%; object-fit:cover}
.hb-card__i img.hb-mark{object-fit:contain; padding:20%; background:#fff}
.hb-save{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--ink);
  backdrop-filter:blur(6px)}
.hb-save svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7}
.hb-card__b{padding:15px 9px 8px; display:flex; flex-direction:column; gap:7px; flex:1}
.hb-card__n{font-size:18.5px; letter-spacing:-.03em}
.hb-card__m{margin:0; font-size:13.5px; color:var(--muted); display:flex; align-items:center;
  gap:6px; flex-wrap:wrap}
.hb-card__f{margin-top:auto; padding-top:9px; display:flex; align-items:center;
  justify-content:space-between; gap:6px 10px; flex-wrap:wrap}
.hb-card__f .hb-rate{font-size:13.5px}
.hb-card__f .hb-rate small{font-size:10.5px}
.hb-card__pin,.pin{width:14px; height:14px; fill:none; stroke:var(--acc); stroke-width:1.7;
  flex:none}
.hb-dot{width:3px; height:3px; border-radius:50%; background:var(--line-2); flex:none}
/* the reference's cards carry no FAB; ours is in both renderers, so it stays in
   the markup and becomes quiet — a hover affordance, not a black disc. */
.hb-card .hb-fab{position:absolute; right:14px; bottom:14px; width:34px; height:34px;
  border-radius:50%; background:var(--ink); color:var(--ground); display:grid;
  place-items:center; opacity:0; transform:translateY(4px); transition:.2s}
.hb-card:hover .hb-fab{opacity:1; transform:none}
.hb-fab svg,.hb-ico{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

/* .hb-row — horizontal row. therapists.html and town.html. */
.hb-row{background:var(--card); border-radius:var(--r-card); padding:10px;
  display:grid; grid-template-columns:186px 1fr auto; gap:18px; align-items:center;
  transition:box-shadow .2s}
.hb-row:hover{box-shadow:var(--shadow-lift)}
.hb-row__i{border-radius:var(--r-photo); overflow:hidden; aspect-ratio:4/3; background:var(--deep)}
.hb-row__i img{width:100%; height:100%; object-fit:cover}
.hb-row__i img.hb-mark{object-fit:contain; padding:16%; background:#fff}
.hb-row__b{min-width:0; padding:4px 0}
.hb-row__n{font-size:19px; letter-spacing:-.03em; margin-bottom:5px}
.hb-row__m{margin:0 0 9px; font-size:13.5px; color:var(--muted); display:flex;
  align-items:center; gap:6px; flex-wrap:wrap}
.hb-row__tx{display:flex; gap:6px; flex-wrap:wrap}
.hb-row__tx span{border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 11px;
  font-size:12px; color:var(--ink-2)}
.hb-row__r{text-align:right; padding-right:8px; display:flex; flex-direction:column;
  align-items:flex-end; gap:8px}
.hb-row .hb-fab{width:38px; height:38px; border-radius:50%; background:var(--ink);
  color:var(--ground); display:grid; place-items:center; transition:background .16s}
.hb-row:hover .hb-fab{background:var(--acc); color:var(--acc-on)}

/* price. The slot must read correctly EMPTY — ~110 compiled listings have no
   price and we never print one we were not given. */
.hb-row__p b,.price{font-size:26px; font-weight:600; letter-spacing:-.04em; line-height:1}
.price sup{font-size:15px; font-weight:500; top:-.42em; margin-right:1px; position:relative}
.hb-row__p em,.price--none{font-style:normal; font-size:13.5px; color:var(--muted);
  font-weight:500; display:block}
.hb-row__p em{margin-top:2px}
.price--none{font-size:13px; white-space:nowrap}
.hb-card__f .price,
.hb-card__f .price--none{margin-left:auto}

/* rating. Google's, attributed, never used to order anything. Warm stars in
   every palette because they are not our brand mark. */
.hb-rate{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600;
  color:var(--ink); white-space:nowrap}
.hb-stars{display:inline-flex; gap:1.5px}
.hb-star{width:14px; height:14px; fill:var(--star)}
.hb-star.is-off{fill:var(--line-2)}
.hb-rate span{color:var(--muted); font-weight:400; font-size:13px}
.hb-rate small{color:var(--muted); font-weight:500; font-size:11px; letter-spacing:.04em}

/* verified — a small tick beside the name. ~100 listings will never carry it and
   must not look second-class, so it is ink, not accent, and it is tiny. */
.hb-vtick{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  color:var(--ink-2); letter-spacing:-.01em}
.hb-vtick svg{width:14px; height:14px; fill:none; stroke:var(--acc); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}

/* promo tile — the reference's accent card, in a real grid cell, with real copy */
.hb-promo{background:var(--acc); color:var(--acc-on); border-radius:var(--r-card);
  padding:26px; display:flex; flex-direction:column; position:relative; overflow:hidden;
  min-height:220px}
.hb-promo h3{font-size:26px; letter-spacing:-.035em; margin-bottom:9px}
.hb-promo p{font-size:14.5px; opacity:.92; max-width:26ch; margin:0}
.hb-promo__go{margin-top:auto; align-self:flex-end; width:48px; height:48px; border-radius:50%;
  background:var(--acc-on); color:var(--acc); display:grid; place-items:center;
  transition:transform .18s}
.hb-promo:hover .hb-promo__go{transform:translate(3px,-3px)}
.hb-promo__go svg{width:19px; height:19px; stroke-width:2}
.hb-promo::after{content:""; position:absolute; right:-40px; bottom:-50px; width:190px;
  height:190px; border-radius:50%; background:var(--acc-on); opacity:.07}

/* ============================================== service + area tiles */
.tile{position:relative; display:block; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:3/4; background:var(--deep)}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.tile:hover img{transform:scale(1.04)}
.tile__c{position:absolute; inset:auto 0 0 0; padding:18px;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.34) 46%,rgba(0,0,0,0)); color:#fff;
  padding-top:44px}
.tile__c b{display:block; font-size:17px; font-weight:600; letter-spacing:-.02em}
.tile__c span{font-size:12.5px; opacity:.85}
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 16px;
  font-size:14px; font-weight:500; transition:.16s}
.chip:hover{border-color:var(--acc); color:var(--acc-text)}
.chip b{font-weight:600}
.chip i{font-style:normal; color:var(--muted); font-size:12.5px}
.chips{display:flex; flex-wrap:wrap; gap:9px}

/* a two-column split. As a class, not an inline style, so the media query can
   reach it — an inline grid-template-columns cannot be overridden. */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(22px,3.4vw,40px); align-items:center}
.split--form{grid-template-columns:minmax(0,1fr) 470px; align-items:start}
.split__img{border-radius:var(--r-panel); overflow:hidden; aspect-ratio:4/3;
  position:relative; isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(255,255,255,.22),
    0 24px 60px -34px rgba(0,0,0,.35)}
.split__img img{width:100%; height:100%; object-fit:cover}
/* The category hero has no headline behind it, so it needs no backdrop-filter —
   only the glass CARD: a bright top edge and a sheen raking across it. That works
   on any photograph at any tone, so nothing here depends on a pale image. */
.split__img::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(158deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 22%,
             rgba(255,255,255,0) 46%)}

/* ============================================== results page + rail */
.res{display:grid; grid-template-columns:274px 1fr; gap:30px; align-items:start}
.hb-rail{background:var(--card); border-radius:var(--r-card); padding:22px; position:sticky;
  top:20px}
.hb-rail h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin:24px 0 10px}
.hb-rail h4:first-of-type{margin-top:0}
.hb-rail label{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:14px;
  color:var(--ink-2); cursor:pointer}
.hb-rail label:hover{color:var(--ink)}
.hb-rail input[type=checkbox]{appearance:none; -webkit-appearance:none; width:17px; height:17px;
  border:1.5px solid var(--line-2); border-radius:5px; flex:none; background:var(--raise);
  position:relative; transition:.14s}
.hb-rail input[type=checkbox]:checked{background:var(--acc); border-color:var(--acc)}
.hb-rail input[type=checkbox]:checked::after{content:""; position:absolute; left:5px; top:1.5px;
  width:4px; height:9px; border:solid var(--acc-on); border-width:0 2px 2px 0; transform:rotate(42deg)}
.hb-rail em{margin-left:auto; font-style:normal; color:var(--muted); font-size:12.5px}
.hb-rail__near{display:flex; gap:6px}
.hb-rail__near input,.hb-rail__near select{flex:1; min-width:0; border:1px solid var(--line);
  background:var(--raise); border-radius:10px; padding:9px 11px; font:inherit; font-size:13.5px;
  color:var(--ink); outline:none}
.hb-rail__near button{flex:none; border:0; border-radius:10px; padding:0 14px; background:var(--acc);
  color:var(--acc-on); font-size:13.5px; font-weight:500}
.res__bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.res__n{font-size:19px; font-weight:600; letter-spacing:-.03em; margin-right:auto}
.hb-sort{display:inline-flex; background:var(--deep); border-radius:var(--r-pill); padding:4px}
.hb-sort__b{border:0; background:transparent; border-radius:var(--r-pill); padding:8px 16px;
  font-size:13.5px; font-weight:500; color:var(--ink-2)}
.hb-sort__b.is-on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
.res__list{display:grid; gap:12px}
.empty{background:var(--card); border-radius:var(--r-card); padding:52px 30px; text-align:center}
.empty h3{font-size:21px; margin-bottom:8px}
.empty p{color:var(--muted); max-width:46ch; margin:0 auto 18px}

/* map page */
.mapsplit{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:0;
  height:calc(100vh - var(--hdr)); min-height:560px}
.mapsplit__l{overflow-y:auto; padding:22px var(--gut) 40px}
.mapsplit__m{position:relative; background:var(--deep)}
.mapsplit__m img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(.92) brightness(1.04)}
.mappin{position:absolute; width:30px; height:30px; border-radius:50% 50% 50% 2px;
  transform:rotate(-45deg) translate(-50%,-50%); background:var(--acc);
  box-shadow:0 4px 12px rgba(0,0,0,.28); border:2.5px solid var(--acc-on)}

/* ============================================== editorial / guides */
.crumbs{font-size:13px; color:var(--muted); padding:18px 0 0}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--acc-text)}
.crumbs span{margin:0 7px; opacity:.5}
.bt-guide{max-width:768px; margin:0 auto; padding:14px 0 clamp(50px,7vw,90px)}
.bt-guide h1{font-size:clamp(31px,4.6vw,50px); letter-spacing:-.035em; line-height:1.06;
  margin:0 0 22px}
.bt-guide .bt-guide__answer{font-size:19px; line-height:1.62; color:var(--ink-2);
  border-left:3px solid var(--acc); padding-left:22px; margin:0 0 26px}
.bt-guide h2{font-size:25px; margin:0 0 12px; letter-spacing:-.03em}
.bt-guide > section{margin:0 0 40px}
.bt-guide section{padding:0}
.bt-guide .bt-updated{font-size:13px; color:var(--muted); margin:0 0 30px}
.bt-box{background:var(--card); border-radius:18px; padding:24px; margin:0 0 26px}
.bt-box__t{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.tagpill{font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:var(--acc-soft); color:var(--acc-text); border-radius:6px; padding:4px 9px}
.bt-list{list-style:none; margin:0; padding:0}
.bt-list li{padding:13px 0; border-top:1px solid var(--line); display:flex; gap:14px}
.bt-list li b{flex:none; width:170px; font-weight:600}
.further{background:var(--card); border-radius:var(--r-card); padding:26px}
.further h3{font-size:17px; margin-bottom:4px}
.further > p{font-size:13.5px; color:var(--muted); margin-bottom:14px}
.further ul{list-style:none; margin:0; padding:0; columns:2; column-gap:34px}
.further li{break-inside:avoid; padding:7px 0; border-top:1px solid var(--line); font-size:14px}
.further a{color:var(--ink-2)} .further a:hover{color:var(--acc-text)}

/* ============================================== member profile */
.prof__hero{position:relative; border-radius:var(--r-panel); overflow:hidden;
  aspect-ratio:16/6; background:var(--deep); margin-top:8px}
.prof__hero>img{width:100%; height:100%; object-fit:cover}
.prof__hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6) 6%,rgba(0,0,0,0) 62%)}
.prof__id{position:absolute; left:26px; right:26px; bottom:22px; z-index:2; color:#fff;
  display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap}
.prof__mark{width:78px; height:78px; border-radius:18px; background:#fff; flex:none;
  display:grid; place-items:center; overflow:hidden; padding:9px}
.prof__mark img{max-width:100%; max-height:100%; object-fit:contain}
.prof__id h1{font-size:clamp(27px,3.6vw,42px); letter-spacing:-.035em; color:#fff}
.prof__id p{margin:5px 0 0; font-size:14px; opacity:.9; display:flex; gap:14px; flex-wrap:wrap}
.prof__flag{margin-left:auto; background:rgba(255,255,255,.94); color:var(--ink);
  border-radius:var(--r-pill); padding:8px 15px; font-size:12.5px; font-weight:500}
.prof{display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:30px; align-items:start;
  padding:30px 0 clamp(50px,7vw,90px)}
.pcard{background:var(--card); border-radius:var(--r-card); padding:26px; margin-bottom:16px}
.pcard h2{font-size:20px; margin-bottom:5px}
.pcard > p.sub{color:var(--muted); font-size:13.5px; margin-bottom:18px}
.menu__g{margin-bottom:22px}
.menu__g:last-child{margin-bottom:0}
.menu__g h3{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:6px}
.menu__i{display:flex; align-items:baseline; gap:14px; padding:12px 0;
  border-top:1px solid var(--line)}
.menu__i b{font-weight:600; font-size:15px}
.menu__i i{font-style:normal; color:var(--muted); font-size:13px}
.menu__i span{margin-left:auto; font-weight:600; font-size:16px; white-space:nowrap}
.aside{position:sticky; top:20px}
.aside .pcard{padding:22px}
.contact{display:grid; gap:9px; margin-top:4px}
.contact .pill{justify-content:center; width:100%}
.trust{list-style:none; margin:14px 0 0; padding:0}
.trust li{display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-2)}
.trust svg{width:16px; height:16px; flex:none; margin-top:3px; fill:none; stroke:var(--acc);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.notice{background:var(--acc-soft); color:var(--acc-text); border-radius:14px; padding:15px 18px;
  font-size:13.5px; line-height:1.55}

/* ============================================== forms + dashboard */
.field{margin-bottom:16px}
.field > label{display:block; font-size:13px; font-weight:500; color:var(--muted);
  margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; border:1px solid var(--line);
  background:var(--raise); border-radius:12px; padding:13px 15px; font:inherit;
  font-size:15px; color:var(--ink); outline:none; transition:border-color .16s, box-shadow .16s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
.field small{display:block; margin-top:6px; font-size:12.5px; color:var(--muted)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.dash{display:grid; grid-template-columns:236px 1fr; gap:26px; align-items:start;
  padding:26px 0 clamp(50px,7vw,90px)}
.dnav{background:var(--card); border-radius:var(--r-card); padding:12px; position:sticky; top:20px}
.dnav a{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px;
  font-size:14.5px; font-weight:500; color:var(--ink-2)}
.dnav a:hover{background:var(--deep)}
.dnav a.is-on{background:var(--acc-soft); color:var(--acc-text)}
.dnav i{margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--acc)}
.stat{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.stat > div{background:var(--card); border-radius:18px; padding:18px}
.stat b{display:block; font-size:29px; font-weight:600; letter-spacing:-.04em; line-height:1.1}
.stat span{font-size:12.5px; color:var(--muted)}

/* ============================================== pricing */
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:820px;
  margin:0 auto}
.plan{background:var(--card); border-radius:var(--r-card); padding:30px; position:relative}
.plan--on{background:var(--acc); color:var(--acc-on)}
.plan__p{font-size:44px; font-weight:600; letter-spacing:-.045em; line-height:1; margin:14px 0 4px}
.plan__p sup{font-size:22px; top:-.6em; position:relative; font-weight:500}
.plan__p em{font-style:normal; font-size:15px; font-weight:500; letter-spacing:0; opacity:.7}
.plan ul{list-style:none; margin:20px 0; padding:0}
.plan li{display:flex; gap:11px; padding:9px 0; font-size:14px; border-top:1px solid var(--line)}
.plan--on li{border-color:rgba(255,255,255,.22)}
.plan li svg{width:16px; height:16px; flex:none; margin-top:3px; fill:none; stroke:var(--acc);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.plan--on li svg{stroke:var(--acc-on)}

/* ============================================== footer */
.hb-foot{background:var(--deep); padding:clamp(50px,6vw,74px) 0 0; margin-top:clamp(40px,6vw,80px)}
.hb-foot__mark{position:relative; text-align:center; padding-bottom:clamp(26px,3.4vw,44px)}
.hb-foot__mark p{font-size:16px; color:var(--ink-2); margin:0 0 2px}
.hb-foot__w{display:inline-block; position:relative; font-size:clamp(52px,12.4vw,150px);
  font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--ink)}
.hb-foot__badge{position:absolute; right:-14px; top:6%; width:clamp(34px,4.4vw,58px);
  height:clamp(34px,4.4vw,58px); border-radius:50%; background:var(--acc); color:var(--acc-on);
  display:grid; place-items:center}
.hb-foot__badge svg{width:44%; height:44%; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
.hb-foot__cols{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px;
  padding:clamp(30px,3.6vw,44px) 0; border-top:1px solid var(--line-2)}
.bt-footer__col h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px}
.bt-footer__col a{display:block; padding:4.5px 0; font-size:13.5px; color:var(--ink-2)}
.bt-footer__col a:hover{color:var(--acc-text)}
.hb-foot__base{border-top:1px solid var(--line-2); padding:20px 0 26px; display:flex;
  gap:16px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--muted)}
.hb-foot__base nav{margin-left:auto; display:flex; gap:18px}
.hb-foot__note{font-size:12.5px; color:var(--muted); padding-bottom:8px; max-width:74ch}

/* ============================================== palette switcher (mockup chrome only) */
.psw{position:fixed; right:12px; bottom:12px; transform:scale(.86); transform-origin:100% 100%; z-index:120; display:flex; gap:5px;
  background:rgba(20,20,20,.9); backdrop-filter:blur(10px); padding:5px; border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.3)}
.psw button{width:30px; height:30px; border-radius:50%; border:2px solid transparent;
  font-size:11px; font-weight:700; color:#fff; background:#555; line-height:1}
.psw button[data-p="a"]{background:#F59300}
.psw button[data-p="b"]{background:#8F4C56}
.psw button[data-p="c"]{background:#20493C}
.psw button.is-on{border-color:#fff}
.psw a{color:#fff; font-size:11px; font-weight:600; padding:0 12px; display:grid;
  place-items:center; opacity:.75}
.psw a:hover{opacity:1}

/* ================================================================ 1024 */
@media (max-width:1080px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res{grid-template-columns:1fr}
  .hb-rail{position:static}
  .prof{grid-template-columns:1fr}
  .aside{position:static}
  .dash{grid-template-columns:1fr}
  .dnav{position:static; display:flex; gap:4px; overflow-x:auto; padding:6px}
  .dnav a{white-space:nowrap}
  .mapsplit{grid-template-columns:1fr; height:auto}
  .mapsplit__m{height:56vh; order:-1}
  .hb-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split--form{grid-template-columns:1fr}
}

/* ================================================================= 760 */
@media (max-width:760px){
  :root{--r-card:20px; --r-photo:14px; --r-panel:22px; --hdr:104px}
  .hb-top{padding:16px var(--gut) 12px}
  .hb-top__r .hb-tlink,.hb-top__r a.pill--ghost,.hb-top__r a.pill--solid{display:none}
  .hb-burger{display:inline-flex}
  .hb-hero__d{font-size:clamp(38px,11.5vw,62px)}
  .hb-hero__media{aspect-ratio:4/3.4; margin-top:0}
  .hb-hero__stage{margin-top:-12px}
  .hb-srch{display:none}
  .hb-srch--m{display:block; margin-top:-34px; position:relative; z-index:3;
    background:rgba(255,255,255,.52); backdrop-filter:blur(30px) saturate(1.7);
    -webkit-backdrop-filter:blur(30px) saturate(1.7); padding:22px 16px 16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 18px 44px -22px rgba(0,0,0,.4)}
  .hb-hero__stage{padding-bottom:0}
  /* Two up, not one. A single full-bleed card is ~340px of image for one
     business and turns a 110-listing page into a mile of scrolling; two is what
     Fresha, Treatwell and Airbnb all do on a phone. The TILE row keeps its own
     3/4 portrait art at full width, so it is excluded. */
  .grid--4,.grid--3,.grid--2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px}
  .grid--4:has(> .tile),.grid--3:has(> .tile){grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--form{grid-template-columns:1fr}
  .split__img{aspect-ratio:16/10}
  .hb-row{grid-template-columns:118px 1fr; gap:13px; align-items:start}
  .hb-row__i{aspect-ratio:1/1}
  .hb-row__r{grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between;
    text-align:left; border-top:1px solid var(--line); padding:11px 4px 2px; width:100%}
  .hb-row__p{display:flex; align-items:baseline; gap:7px}
  .hb-row__p em{margin:0}
  .row2{grid-template-columns:1fr}
  .stat{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .further ul{columns:1}
  .bt-list li{flex-direction:column; gap:3px}
  .bt-list li b{width:auto}
  .hb-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
  .hb-foot__base nav{margin-left:0; width:100%; gap:14px}
  .prof__hero{aspect-ratio:4/3.2}
  .prof__id{left:16px; right:16px; bottom:16px; gap:12px}
  .prof__mark{width:58px; height:58px; border-radius:14px}
  .prof__flag{margin-left:0}
}

/* local-guides index — a dense editorial directory, deliberately unlike a browse grid */
.lg{margin-bottom:30px}
.lg h3{font-size:20px;margin-bottom:10px;letter-spacing:-.03em}
.lg__c{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:13px 0;
  border-top:1px solid var(--line)}
.lg__c h4{font-size:14.5px;font-weight:600;margin:0}
.lg__l{display:flex;flex-wrap:wrap;gap:6px 18px}
.lg__l a{font-size:13.5px;color:var(--ink-2)}
.lg__l a:hover{color:var(--acc-text);text-decoration:underline}
@media (max-width:760px){ .lg__c{grid-template-columns:1fr;gap:6px} }

/* ================================================ search combobox
   Fresha's autocomplete anatomy — entity groups, icon chips, distance on
   every row, "see more" per group — at our scale and in our palette. */
[data-hb-combo]{position:relative}
.hs{
  position:absolute; top:calc(100% + 16px); left:-26px; z-index:60;
  width:max(100% + 34px, 470px);
  background:var(--card); border-radius:22px; padding:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px -28px rgba(0,0,0,.42);
  max-height:min(62vh,540px); overflow-y:auto; overscroll-behavior:contain;
}
.hs__tabs{display:flex; gap:6px; padding:10px 12px 12px; position:sticky; top:-6px;
  background:var(--card); z-index:2; margin:-6px -6px 0; border-radius:22px 22px 0 0}
.hs__tab{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent;
  box-shadow:inset 0 0 0 1px var(--line); border-radius:var(--r-pill); padding:8px 15px;
  font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap;
  transition:background .16s, color .16s, box-shadow .16s}
.hs__tab:hover{background:var(--deep)}
.hs__tab.is-on{background:var(--acc); color:var(--acc-on); box-shadow:none}
.hs__tab em{font-style:normal; font-size:11px; font-weight:600; background:var(--deep);
  color:var(--muted); border-radius:var(--r-pill); padding:2px 7px}
.hs__tab.is-on em{background:rgba(255,255,255,.24); color:var(--acc-on)}
.hs__list{list-style:none; margin:0; padding:2px 6px 8px}
.hs__g + .hs__g{border-top:1px solid var(--line); margin-top:6px; padding-top:6px}
.hs__g h4{font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:10px 8px 4px}
.hs__g ul{list-style:none; margin:0; padding:0}
.hs__row{display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:13px;
  cursor:pointer; transition:background .13s}
.hs__row:hover{background:var(--deep)}
.hs__chip{flex:none; width:38px; height:38px; border-radius:50%; display:grid;
  place-items:center; background:var(--acc-soft)}
.hs__chip svg{width:19px; height:19px; fill:none; stroke:var(--acc-text); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.hs__chip--doc{background:var(--deep)}
.hs__chip--doc svg{stroke:var(--ink-2)}
.hs__thumb{flex:none; width:38px; height:38px; border-radius:11px; overflow:hidden;
  background:var(--deep); box-shadow:inset 0 0 0 1px var(--line)}
.hs__thumb img{width:100%; height:100%; object-fit:cover}
.hs__thumb--mark img{object-fit:contain; padding:5px; background:#fff}
.hs__t{min-width:0; flex:1}
.hs__t b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.015em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hs__t i{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.hs__d{flex:none; font-size:12.5px; color:var(--muted); font-weight:500}
.hs__more{border:0; background:transparent; color:var(--acc-text); font-size:13.5px;
  font-weight:600; padding:8px; cursor:pointer}
.hs__more:hover{text-decoration:underline}
.hs__empty{padding:22px 12px; color:var(--muted); font-size:14px; text-align:center}
.hs__go{display:none}
@media (max-width:760px){
  .hs{left:-8px; right:-8px; top:calc(100% + 10px); max-height:64vh}
  .hs__tabs{overflow-x:auto; scrollbar-width:none}
  .hs__tabs::-webkit-scrollbar{display:none}
}
/* the phone card's combobox field */
.hb-srch--m [data-hb-combo]{position:static}
.hb-srch--m [data-hb-combo] input{width:100%}
.hb-srch--m .hs{left:8px; right:8px; width:auto; top:calc(100% - 8px)}

/* ==================================================== venue card (Fresha anatomy)
   Image-led, with the rating right-aligned on the NAME row rather than in a
   footer, and two meta lines: distance • area, then category • reviews.
   Simpler than what we had — no treatment chips, no separate rating row. */
.hb-card{background:transparent; border-radius:0; padding:0; box-shadow:none}
.hb-card:hover{box-shadow:none; transform:none}
.hb-card__i{position:relative; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:4/3; background:var(--deep)}
.hb-card__i img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.hb-card:hover .hb-card__i img{transform:scale(1.03)}
.hb-card__i img.hb-mark{object-fit:contain; padding:18%; background:#fff; transform:none}
.hb-card:hover .hb-card__i img.hb-mark{transform:none}
/* carousel dots — they signal there is more than one photo */
.hb-dots{position:absolute; left:0; right:0; bottom:10px; display:flex; gap:5px;
  justify-content:center; pointer-events:none}
.hb-dots i{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55)}
.hb-dots i.on{background:#fff; width:6px; height:6px}
.hb-feat{position:absolute; top:10px; left:10px; background:rgba(255,255,255,.94);
  border-radius:var(--r-pill); padding:5px 12px; font-size:12px; font-weight:600}
.hb-card__b{padding:11px 2px 0; display:block}
.hb-card__hd{display:flex; align-items:baseline; gap:10px}
.hb-card__n{font-size:16px; font-weight:600; letter-spacing:-.02em; flex:1; min-width:0;
  display:flex; align-items:center; gap:5px}
.hb-card__n a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* display:BLOCK, not the flex it inherits from the earlier card block —
   text-overflow:ellipsis has no effect on a flex container, so a long area name
   was clipped mid-word with no ellipsis ("Hollingdean & Fiveways, Brighto"). */
.hb-card__m{display:block; margin:4px 0 0; font-size:13px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hb-card__b{gap:0}
.hb-card__m b{font-weight:500; color:var(--ink-2)}
/* the tick is inline with the name now, and tiny */
.hb-card .hb-vtick{flex:none; gap:0}
.hb-card .hb-vtick span{display:none}
.hb-card .hb-vtick svg{width:15px; height:15px; stroke-width:2.6}
.hb-rate--card{flex:none; display:inline-flex; align-items:center; gap:4px;
  font-size:14px; font-weight:600; white-space:nowrap}
.hb-rate--card .hb-star{width:14px; height:14px}
.hb-card .hb-fab,.hb-card__f{display:none}

/* ==================================================== results shell */
.res2__bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 0 14px}
.res2__n{font-size:13.5px; color:var(--muted); margin-left:auto}
.btn-line{display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--r-pill);
  padding:10px 18px; font-size:14px; font-weight:500; color:var(--ink);
  transition:box-shadow .16s, background .16s}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.btn-line svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}

/* map split — Airbnb/Fresha: list scrolls, map is pinned */
.split-map{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.28fr); gap:0;
  height:calc(100vh - var(--hdr)); min-height:600px}
.split-map__l{overflow-y:auto; overscroll-behavior:contain; padding:0 24px 40px 0}
.split-map__m{position:relative; border-radius:var(--r-card); overflow:hidden;
  background:var(--deep)}
.split-map__m > img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(.95) brightness(1.05) saturate(.8)}
/* markers are rating pills, not pins */
.mk{position:absolute; transform:translate(-50%,-50%); background:var(--ink); color:#fff;
  border-radius:var(--r-pill); padding:5px 11px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.3); cursor:pointer; transition:transform .14s}
.mk:hover{transform:translate(-50%,-50%) scale(1.08)}
.mk svg{width:11px; height:11px; fill:var(--star)}
.mk--acc{background:var(--acc); color:var(--acc-on)}
.mk--dot{width:8px; height:8px; padding:0; border-radius:50%; background:var(--ink-2);
  box-shadow:0 2px 5px rgba(0,0,0,.35)}
.mk--dot svg{display:none}
/* the open marker's card */
.mpop{position:absolute; width:300px; background:var(--card); border-radius:16px;
  overflow:hidden; box-shadow:0 20px 50px -14px rgba(0,0,0,.4); z-index:5}
.mpop__i{position:relative; aspect-ratio:16/10; background:var(--deep)}
.mpop__i img{width:100%; height:100%; object-fit:cover}
.mpop__x{position:absolute; top:9px; right:9px; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center; border:0; cursor:pointer}
.mpop__x svg{width:13px; height:13px; fill:none; stroke:var(--ink); stroke-width:2.2}
.mpop__b{padding:12px 14px 14px}
.mapctl{position:absolute; display:grid; background:var(--card); border-radius:12px;
  overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.2)}
.mapctl button{width:40px; height:40px; border:0; background:transparent; font-size:19px;
  color:var(--ink); cursor:pointer}
.mapctl button + button{border-top:1px solid var(--line)}
/* "search this area" — the Airbnb move */
.mapredo{position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:6}

@media (max-width:1080px){
  .split-map{grid-template-columns:1fr; height:auto}
  .split-map__m{height:52vh; order:-1; border-radius:0}
  .split-map__l{padding:0 var(--gut) 40px}
}
@media (max-width:760px){
  .hb-card__i{aspect-ratio:1/1}          /* square reads better in a 170px column */
  .res2__n{margin-left:0; width:100%; order:-1}
}
@media (max-width:760px){
  /* At ~170px wide the desktop type overflows: the name ellipsised after two
     words and the rating pushed it out of the row. Rating drops under the name,
     everything steps down a size, and the second meta line goes — category and
     review count are the least useful facts on a phone. */
  .hb-card__b{padding:9px 1px 0}
  /* name and rating stay on one row — dropping the rating underneath put it
     between the business and where it is, which reads as a caption on the name */
  .hb-card__hd{gap:6px}
  .hb-card__n{font-size:14.5px}
  .hb-card__m{font-size:12px; margin-top:2px}
  .hb-card__m:last-child{display:none}
  .hb-rate--card{font-size:12.5px}
  .hb-rate--card .hb-star{width:12px; height:12px}
  .hb-save{width:29px; height:29px; top:7px; right:7px}
  .hb-save svg{width:14px; height:14px}
  .hb-feat{top:7px; left:7px; padding:4px 9px; font-size:11px}
  .hb-card .hb-vtick svg{width:13px; height:13px}
}
/* the marker popup is a pointer interaction; on a phone the same job is done by
   tapping through to the card below, so it does not belong on the small map */
@media (max-width:1080px){ .mpop{display:none} }

/* ---- chips that stay on ONE row and scroll.
   A wrapped chip row grows the page unpredictably as coverage grows — Leeds has
   12 areas today and will have 40. Fresha keeps every chip row to one scrolling
   line for exactly this reason. */
.chips--scroll{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 92%,transparent);
  mask-image:linear-gradient(to right,#000 92%,transparent);
  padding-bottom:2px; scroll-padding-inline:var(--gut)}
.chips--scroll::-webkit-scrollbar{display:none}
.chips--scroll > *{flex:none}

/* ==================================================== featured
   A LABELLED slot, outside the organic order. The rule this encodes: paying
   changes where a business appears in a separate, badged row — never the order
   of the ranked results below it. */
.feat{background:var(--card); border-radius:var(--r-card); padding:22px 22px 24px;
  margin-bottom:30px}
.feat__hd{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.feat__hd h2{font-size:19px; letter-spacing:-.025em}
.feat__tag{display:inline-flex; align-items:center; gap:6px; background:var(--acc-soft);
  color:var(--acc-text); border-radius:var(--r-pill); padding:4px 11px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.feat__why{margin-left:auto; font-size:12.5px; color:var(--muted)}
.feat__why a{color:var(--acc-text)}
.feat .hb-card__i{box-shadow:inset 0 0 0 1px var(--line)}

/* The RING — George's proposal, shown for comparison. It reads as a quality
   mark sitting beside the verified tick, which is the objection. */
.hb-card--ring .hb-card__i{box-shadow:0 0 0 3px var(--acc); border-radius:calc(var(--r-card) - 2px)}

/* ==================================================== glass
   Glassmorphism only reads if there is something to see THROUGH. On a flat
   cream ground backdrop-filter does nothing at all, so a glass panel needs a
   backdrop: .sect--glass lays soft out-of-focus colour behind the content and
   .glass floats on it. */
.sect--glass{position:relative; isolation:isolate; overflow:hidden}
.sect--glass::before,
.sect--glass::after{content:""; position:absolute; z-index:-1; border-radius:50%;
  filter:blur(90px); pointer-events:none}
.sect--glass::before{width:52vw; height:52vw; max-width:640px; max-height:640px;
  left:-10vw; top:-24%; background:var(--acc); opacity:.16}
.sect--glass::after{width:46vw; height:46vw; max-width:560px; max-height:560px;
  right:-8vw; bottom:-30%; background:var(--acc-d); opacity:.10}
.sect--glass > .wrap{position:relative; z-index:1}

.glass{
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-radius:var(--r-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 1px 0 0 rgba(255,255,255,.35),
    inset -1px 0 0 rgba(255,255,255,.35),
    0 20px 50px -28px rgba(0,0,0,.30);
}
[data-palette="c"] .glass{background:rgba(255,253,249,.46)}

/* the "why" panels — line icon in a soft disc, no 01/02/03 numbering */
.why{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start}
.why__c{padding:26px 22px 24px}
.why__c:nth-child(even){margin-top:26px}          /* staggered, not a flat row */
.why__i{width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.6); margin-bottom:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.why__i svg{width:22px; height:22px; fill:none; stroke:var(--acc-text); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
.why__c h3{font-size:17px; letter-spacing:-.02em; margin-bottom:7px}
.why__c p{font-size:14px; color:var(--ink-2); margin:0; line-height:1.55}
@media (max-width:1080px){ .why{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .why{grid-template-columns:1fr} .why__c:nth-child(even){margin-top:0} }

/* the category tab row, as glass and standing away from the sub-heading */
.hb-tabs--glass{padding-top:26px}
.hb-tabs--glass .hb-tabs__in{
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 34px -20px rgba(0,0,0,.26);
}
.hb-tabs--glass .hb-tab--on{background:var(--card); box-shadow:var(--shadow)}

/* pricing plans on glass */
.plan{background:transparent}
.plan.glass{padding:30px}
.plan--on{background:var(--acc); color:var(--acc-on); box-shadow:0 20px 50px -26px rgba(0,0,0,.4)}
.plan--on .tagpill{background:rgba(0,0,0,.14); color:var(--acc-on)}
.plan--on li{border-color:rgba(0,0,0,.14)}
.plan--on li svg{stroke:var(--acc-on)}

/* FEATURED — ring AND pill, and the ring is meant to be seen */
.hb-card--feat .hb-card__i{
  box-shadow:0 0 0 3px var(--acc), 0 0 0 7px var(--acc-soft),
             0 14px 34px -18px rgba(0,0,0,.35);
}
.hb-feat{position:absolute; top:12px; left:12px; z-index:2;
  background:var(--acc); color:var(--acc-on); border-radius:var(--r-pill);
  padding:6px 13px; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; box-shadow:0 4px 12px rgba(0,0,0,.22)}

/* ===================================================================
   Structural compatibility.

   Ported pages drop style.css and plugins.css (470KB, 96% of it dead), which
   also removes the template's LAYOUT primitives — .container, .content,
   #wrapper, .section-title. Without them a ported page renders flush to the
   viewport edge with no rhythm.

   This block re-declares only the handful that carry structure, mapped onto
   the redesign's scale. It is a bridge, not a second design system: a page
   rebuilt from the mockups uses .wrap/.sect and never touches these.
   =================================================================== */
#wrapper,.content{display:block; position:static; width:auto; background:transparent}
.container{max-width:var(--max); width:auto; margin:0 auto; padding:0 var(--gut);
  position:relative}
/* :not(.bt-crumbs-wrap) because this rule is 0,1,1 and beat the breadcrumb's
   own 0,1,0 padding:0 — the trail sat under 78px of empty band on 108 pages. */
.content > section:not(.bt-crumbs-wrap),section.parallax-section,section.gray-bg,
section.middle-section{
  display:block; padding:clamp(44px,6vw,78px) 0; position:relative}
section.gray-bg,section.middle-section{background:var(--deep)}
.section-title{margin:0 0 30px; max-width:70ch}
.section-title h1,.section-title h2{font-size:clamp(26px,3.6vw,40px); letter-spacing:-.03em;
  margin:0 0 10px}
.section-title p,.section-title h4{font-size:16px; color:var(--muted); margin:0; font-weight:400}
.section-title.center-align{margin-left:auto; margin-right:auto; text-align:center}
.breadcrumbs,.top-breadcrumbs{font-size:13px; color:var(--muted); padding:16px 0 0}
.breadcrumbs a,.top-breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--acc-text)}
.fl-wrap{width:100%; float:none; display:block}
.clearfix::after{content:""; display:table; clear:both}
.no-list-style{list-style:none; margin:0; padding:0}
.col-md-12,.col-md-8,.col-md-6,.col-md-4,.col-md-3{width:100%}
.row{display:block}
/* the template hid #main until jQuery faded a loader in. jQuery is gone. */
#main{opacity:1 !important}
.loader-wrap,.to-top,.subfooter,.sub-footer,.main-menu,.nav-holder,.header-search{display:none !important}

/* ================================================ results rail + map
   The rail is a sticky column on a wide list page and an off-canvas sheet
   everywhere else. On town.html there is no room for a column at any width,
   so it carries --sheet and is off-canvas always.
   These rules lived in the deleted color.css; without them the Filters button
   does nothing and the sheet has no scrim. */
.hb-railshade{position:fixed; inset:0; background:rgba(17,17,17,.42); opacity:0;
  pointer-events:none; transition:opacity .2s; z-index:55}
body.hb-rail-open .hb-railshade{opacity:1; pointer-events:auto}
body.hb-rail-open{overflow:hidden}

.hb-none{background:var(--card); border-radius:var(--r-card); padding:26px;
  font-size:14.5px; color:var(--ink-2)}
.hb-dist{display:block; font-size:13px; color:var(--acc-text); margin-top:2px}
.hb-rail__g{margin-bottom:4px}
.hb-rail__o.is-empty{opacity:.38; pointer-events:none}
/* the script builds .hb-near__*, not .hb-rail__near — the old selectors were
   left behind by the rename and every control rendered as a raw browser widget */
/* 274px of rail minus padding leaves ~86px for a flex-1 input, which truncates
   the placeholder to "LS7 or L". The postcode gets its own row. */
.hb-near__row{display:grid; grid-template-columns:1fr auto; gap:6px}
.hb-near__pc{grid-column:1 / -1}
.hb-near__pc,.hb-near__mi{min-width:0; border:1px solid var(--line-2);
  background:var(--raise); border-radius:10px; padding:9px 11px; font:inherit;
  font-size:13.5px; color:var(--ink); -webkit-appearance:none; appearance:none}
.hb-near__mi{background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:26px}
.hb-near__pc:focus,.hb-near__mi:focus{outline:2px solid var(--acc); outline-offset:-1px}
.hb-near__go{border:0; border-radius:10px; padding:0 15px; cursor:pointer;
  background:var(--acc); color:var(--acc-on); font:inherit; font-size:13.5px; font-weight:600}
.hb-near__go:hover{background:var(--acc-d)}
.hb-near__msg{grid-column:1 / -1; font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.45}
.hb-near__msg:empty{margin:0}

.hb-rail__head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.hb-rail__head strong{font-size:15px; letter-spacing:-.01em}
.hb-rail__clear{margin-left:auto; border:0; background:none; cursor:pointer; font:inherit;
  font-size:13px; color:var(--acc-text); text-decoration:underline; padding:0}
.hb-rail__x{border:0; background:var(--deep); cursor:pointer; width:30px; height:30px;
  border-radius:50%; font-size:19px; line-height:1; color:var(--ink-2); display:none}
[data-hb-notice]:not(:empty){background:var(--acc-soft); border-radius:var(--r-btn);
  padding:14px 18px; font-size:14px; margin:0 0 18px}

/* the sheet form — shared by --sheet and by every rail below 1080 */
.hb-rail--sheet{position:fixed; top:0; left:0; bottom:0; width:min(340px,86vw);
  z-index:60; border-radius:0; overflow-y:auto; padding:26px 22px 40px;
  transform:translateX(-100%); transition:transform .26s ease; box-shadow:var(--shadow-lg)}
body.hb-rail-open .hb-rail--sheet{transform:none}
/* .hb-rail is empty until the script fills it — an empty sticky column would
   still reserve 274px of the grid, so the column collapses until it has content */
.res:has(> .hb-rail:empty){grid-template-columns:1fr}
.hb-rail:empty{display:none}

#map-main{position:absolute; inset:0; width:100%; height:100%}
.split-map__m .leaflet-container{background:var(--deep); font:inherit}

@media (min-width:1081px){
  /* On the list page the rail IS a visible column, so the button would only
     duplicate it. The map page keeps its button at every width — the split has
     no room for a column, which is why its rail carries --sheet. */
  .res2__bar:not(.res2__bar--sheet) [data-hb-railtoggle]{display:none}
}
@media (max-width:1080px){
  .hb-rail{position:fixed; top:0; left:0; bottom:0; width:min(340px,86vw);
    z-index:60; border-radius:0; overflow-y:auto; padding:26px 22px 40px;
    transform:translateX(-100%); transition:transform .26s ease}
  body.hb-rail-open .hb-rail{transform:none}
  .res2__bar [data-hb-railtoggle]{display:inline-flex}
  .hb-rail__x{display:block}
}
/* the map page's rail is a sheet at every width, so it always needs its way out */
.hb-rail--sheet .hb-rail__x{display:block}

/* Leaflet places the divIcon wrapper itself; .mk's own absolute positioning and
   translate(-50%,-50%) would then offset it a second time. Inside a marker it
   is a plain inline-flex and the anchor does the centring. */
.leaflet-marker-icon .mk{position:static; transform:none}
.leaflet-marker-icon .mk:hover{transform:scale(1.08)}
.leaflet-container .leaflet-control-zoom a{color:var(--ink); font:inherit;
  font-size:18px; line-height:26px}


/* ================================================ editorial / guide layer
   The 107 generated guide, treatment and area pages are the AEO surface. Their
   markup is written by tools/build-content.py against the vocabulary the old
   css/color.css defined; these are those rules, carried over and re-pointed at
   the new tokens so the guides inherit the palette instead of freezing the old
   one. The aliases below exist for exactly that and for nothing else — new work
   uses the components above.

   CASCADE TRAP, still live: `.bt-guide p` is specificity 0,1,1, so any
   single-class rule styling a <p> inside a guide LOSES to it wherever it sits.
   Component rules here are written `.bt-guide .x` (0,2,0). Same for padding:
   the shell gives every <section> 100px, so `.bt-guide section{padding:0}`. */
:root{
  --grey:var(--muted);
  --cream:var(--card);
  --blush:var(--acc);
  --font-title:"General Sans","Inter Tight",system-ui,sans-serif;
}

.bt-crumbs-wrap .breadcrumbs{font-size:13px;}
.breadcrumbs.inline-breadcrumbs:before, .top-breadcrumbs .container:before{content:none;}
.bt-guide{max-width:804px; margin:0 auto; padding:44px 22px 80px; box-sizing:border-box; text-align:left;}
.bt-guide h1{font-size:37px; line-height:1.14; letter-spacing:-.025em; margin:0 0 20px;}
.bt-guide h2{font-size:24px; letter-spacing:-.02em; margin:0 0 14px;}
.bt-guide h3{font-size:17px; margin:22px 0 8px;}
.bt-guide p{font-size:16px; line-height:1.68; color:var(--grey); margin:0 0 14px;}
.bt-guide p strong, .bt-guide li strong{color:var(--ink);}
.bt-guide a{color:var(--blush);}
.bt-guide section{padding:0;}
.bt-guide__head{margin-bottom:38px;}
.bt-guide .bt-guide__eyebrow{font-family:var(--font-title); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blush); margin:0 0 12px;}
.bt-guide .bt-guide__answer{font-size:18.5px; line-height:1.6; color:var(--ink); margin:0 0 18px; padding-left:18px; border-left:3px solid var(--blush);}
.bt-updated{font-size:13px; color:var(--grey); margin:0;}
.bt-guide .bt-updated{font-size:13px; color:var(--grey); margin:0;}
.bt-updated a{color:var(--blush);}
.bt-guide__block{margin:0 0 38px;}
.bt-guide .bt-reg,
.bt-reg{background:#fff; border:1px solid var(--line); border-left:4px solid var(--grey); border-radius:14px; padding:26px 28px; margin:0 0 38px;}
.bt-reg--amber{border-left-color:#d9a441;}
.bt-reg--green{border-left-color:#4f9d69;}
.bt-reg--out{border-left-color:#b9bcc1;}
.bt-reg--scope{border-left-color:#3b5bd9;}
.bt-reg--mixed{border-left-color:#a85c67;}
.bt-reg__head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.bt-reg__head h2{margin:0; font-size:20px;}
.bt-reg__badge{font-family:var(--font-title); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; background:var(--cream); color:var(--ink); border:1px solid var(--line);}
.bt-reg--amber .bt-reg__badge{background:#fdf5e6; border-color:#f0e0bb; color:#8a6d1d;}
.bt-reg--green .bt-reg__badge{background:#eef7f0; border-color:#bfe0c9; color:#2e7d4f;}
.bt-guide .bt-reg__src, .bt-reg__src{font-size:13px; color:#9a9da2; margin:14px 0 0;}
.bt-guide .bt-price{font-size:17px;}
.bt-guide .bt-price__note{font-size:13.5px; color:#9a9da2;}
.bt-list ol, .bt-list ul{margin:0; padding-left:22px;}
.bt-list li{font-size:16px; line-height:1.6; color:var(--grey); margin-bottom:9px;}
.bt-list--flags li::marker{color:var(--blush);}
.bt-guide .bt-faq,
.bt-faq{margin:0 0 38px; border-top:1px solid var(--line); padding-top:30px;}
.bt-faq__item{padding:18px 0; border-bottom:1px solid var(--line);}
.bt-faq__item h3{margin:0 0 8px; font-size:17.5px;}
.bt-faq__item p{margin:0;}
.bt-strip{margin:0 0 38px;}
.bt-strip__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;}
.bt-strip__list a{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink) !important; transition:border-color .15s ease;}
.bt-strip__list a:hover{border-color:var(--ink);}
.bt-strip__list strong{display:block; font-family:var(--font-title); font-size:15.5px;}
.bt-strip__list span{font-size:13px; color:var(--grey);}
.bt-guide .bt-strip__empty{font-size:15px;}
.bt-cardgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px;}
.bt-cardgrid a{display:block; padding:18px 20px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink) !important;}
.bt-cardgrid a:hover{border-color:var(--ink);}
.bt-cardgrid strong{display:block; font-family:var(--font-title); font-size:16.5px; margin-bottom:5px;}
.bt-cardgrid span{font-size:12.5px; color:var(--grey);}
.bt-tablewrap{overflow-x:auto;}
.bt-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.bt-table th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--grey); padding:13px 15px; border-bottom:1px solid var(--line); font-weight:600;}
.bt-table td{padding:13px 15px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--grey);}
.bt-table tr:last-child td{border-bottom:0;}
.bt-chip{display:inline-block; padding:7px 15px; border-radius:999px; margin:0 6px 6px 0; border:1px solid var(--line); background:#fff; font-size:14px; color:var(--ink) !important;}
.bt-chip:hover{border-color:var(--ink);}
.bt-sources{border-top:1px solid var(--line); padding-top:26px;}
.bt-sources h2{font-size:16px;}
.bt-sources__list{padding-left:20px;}
.bt-sources__list li{font-size:13.5px; color:var(--grey); margin-bottom:7px;}
.bt-guide .bt-guide__more{font-size:15px;}
.bt-guide__block ul, .bt-guide__block ol{margin:0 0 16px; padding-left:22px;}
.bt-guide__block li{font-size:16px; line-height:1.68; color:var(--grey); margin-bottom:10px;}
.bt-guide__block li::marker{color:#b9bcc1;}
.bt-guide__block ol li::marker{color:var(--grey); font-family:var(--font-title); font-weight:600;}
.bt-guide__block ul.bt-kb, .bt-guide__block ul.bt-linklist{padding-left:0;}
.bt-guide .bt-note{background:#fdf5f5; border:1px solid #f0dcde; border-left:3px solid var(--blush); border-radius:10px; padding:14px 16px; font-size:14.5px; color:var(--ink); margin:6px 0 0;}
.bt-kb{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.bt-kb li{margin:0;}
.bt-kb a{display:block; height:100%; box-sizing:border-box; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink) !important; transition:border-color .15s ease;}
.bt-kb a:hover{border-color:var(--ink);}
.bt-kb strong{display:block; font-family:var(--font-title); font-size:16px; line-height:1.3; margin-bottom:6px;}
.bt-kb span{display:block; font-size:13.5px; line-height:1.55; color:var(--grey);}
.bt-guide .bt-kb__lead p{font-size:17px;}
.bt-track{list-style:none; margin:0; padding:0; border-left:2px solid var(--line);}
.bt-track__item{position:relative; padding:0 0 30px 26px; margin:0;}
.bt-track__item:last-child{padding-bottom:0;}
.bt-track__item:before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--blush); border:2px solid #fff; box-shadow:0 0 0 1px var(--line);}
.bt-track__item:first-child:before{background:var(--ink);}
.bt-track__meta{display:flex; align-items:center; gap:10px; margin-bottom:5px; flex-wrap:wrap;}
.bt-track__meta time{font-family:var(--font-title); font-weight:600; font-size:13px; letter-spacing:.02em; color:var(--ink);}
.bt-track__nation{font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--cream); border:1px solid var(--line); color:var(--grey);}
.bt-track__body h3{margin:0 0 6px !important; font-size:17px;}
.bt-guide .bt-track__body p{margin:0 0 6px; font-size:15.5px;}
.bt-guide .bt-cta,
.bt-cta{background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:26px 28px; margin:0 0 38px;}
.bt-guide .bt-cta h2{font-size:20px; margin:0 0 10px;}
.bt-guide .bt-cta p{font-size:15.5px;}
.bt-cta p:last-child{margin-bottom:0;}
.bt-cta .bt-chip{background:#fff;}
@media (max-width:760px){
.bt-guide{padding:26px 20px 54px;}
.bt-guide h1{font-size:28px;}
.bt-guide__answer{font-size:16.5px;}
.bt-reg{padding:20px;}
.bt-kb{grid-template-columns:1fr;}
.bt-guide .bt-cta{padding:20px;}
.bt-track__item{padding-left:20px;}
}
@media (max-width:640px){
.bt-table, .bt-table tbody, .bt-table tr, .bt-table td{display:block; width:100%;}
.bt-table thead{display:none;}
.bt-table tr{padding:14px 15px; border-bottom:1px solid var(--line);}
.bt-table tr:last-child{border-bottom:0;}
.bt-table td{padding:3px 0; border:0; display:flex; gap:12px; align-items:baseline;}
.bt-table td:before{content:attr(data-label); flex:0 0 44%; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9a9da2; font-weight:600;}
.bt-table td:first-child{font-size:16px; margin-bottom:4px;}
.bt-table td:first-child:before{display:none;}
.bt-table td:first-child a{font-family:var(--font-title); font-weight:600;}
}

.bt-guide > section{margin-bottom:38px;}
.bt-guide > section:last-child{margin-bottom:0;}

/* the editorial pages sit in a plain .wrap now, not the template's #wrapper */
.bt-guide{max-width:804px; margin:0 auto; padding:0 var(--gut)}
.bt-guide section{padding:0}
/* The generated pages emit TownHub's .breadcrumbs markup, whose separators and
   spacing came from the deleted style.css — without them the trail rendered as
   "HomeKnowledgeBeauty treatment insurance explained" on all 108 pages. This is
   the .crumbs component, applied to that markup. */
.bt-crumbs-wrap{background:none; padding:0}
.bt-crumbs-wrap .container{max-width:804px; margin:0 auto; width:100%;
  padding:18px var(--gut) 0}
/* every .breadcrumbs on the site, not only the guides — the page-header block
   on our-checks, pricing, how-it-works and the rest uses the same markup and
   read as "HomeOurchecks" without this */
.breadcrumbs{font-size:13px; color:var(--muted); display:flex;
  flex-wrap:wrap; align-items:center; justify-content:inherit; gap:0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--acc-text)}
.breadcrumbs a::after{content:"\203A"; margin:0 7px; opacity:.5}

/* The id line is three independent facts (what+where, phone, email) rendered as
   sibling spans. Whitespace alone read as one run-on string, so they carry a
   separator — on the second onward, so a member with only the first has none. */
@media (min-width:761px){
  .prof__id p span + span::before{content:"\00B7"; margin:0 9px; opacity:.55}
}
/* Below that the line wraps and a leading separator lands at the start of the
   new line. The flex gap already separates them there. */


/* ============================================ hand-written page components
   pricing, our-checks, list-your-business, founding, privacy, terms, 404 and
   the two dashboards were written against css/color.css, which this stylesheet
   replaced. These are their rules, carried over onto the new tokens. They are
   NOT the design system — anything new uses .sect / .pcard / .pill / .grid. */
@charset "utf-8";

.pin , .nice-select:after ,  .loader-inner  , .ed-btn     , blockquote , .main-register-holder .tabs-menu li.current , .filter-sidebar-header .tabs-menu li.current  , .header-search-input input:focus , .listsearch-input-wrap .tabs-menu li.current , .btn.border-btn{border-color:#a85c67;}
.gradient-bg , .header-modal .tabs-menu li.current  , .scrollbar-inner2 .simplebar-scrollbar:before{background-color: #c98a92; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c98a92), to(#c98a92)); background: -webkit-linear-gradient(top, #c98a92, #c98a92); background: -moz-linear-gradient(top, #c98a92, #c98a92); background: -ms-linear-gradient(top, #c98a92, #c98a92); background: -o-linear-gradient(top, #c98a92, #c98a92);}
.color-bg, .main-search-button, .btn.color-bg{background:#17191c !important; color:#fff !important;}
.hero-section .container.small-container{position:relative; z-index:4; width:100%; max-width:1160px; padding-bottom:clamp(90px,12vh,150px); padding-top:150px;}
@media (max-width:720px){
.hero-section .container.small-container{padding-top:120px; padding-bottom:60px;}
}
.hero-section .container.small-container{z-index:20;}
.hero-section .container.small-container{padding-top:clamp(96px,12vh,150px); padding-bottom:clamp(230px,38vh,420px);}
.hero-section .container.small-container{padding-top:96px; padding-bottom:0; display:flex; flex-direction:column; justify-content:center;}
.bt-btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:999px; border:0; cursor:pointer; background:var(--acc); color:var(--acc-on) !important; font-family:var(--font-title); font-weight:700; font-size:14px; line-height:1; transition:background .18s ease, transform .18s ease;}
.bt-btn-primary:hover{background:var(--ink); color:#fff !important;}
.bt-btn-secondary{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:8px; cursor:pointer; background:transparent; color:var(--ink) !important; border:1px solid #d8d4d0; font-family:var(--font-title); font-weight:600; font-size:13px; line-height:1; transition:background .18s ease, border-color .18s ease, color .18s ease;}
.bt-btn-secondary:hover{background:var(--ink); border-color:var(--ink); color:#fff !important;}
.section-separator:before{background:var(--ink) !important;}
.bt-lead-hero{background:var(--cream); padding:120px 0 46px;}
.bt-lead-section, .bt-checks-section, .bt-pricing-section{padding:56px 0 90px; background:#fff;}
.bt-lead-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; text-align:left;}
.bt-lead-side h3, .bt-not-checked h3, .bt-price-compare h3{font-family:var(--font-title); font-size:22px; margin:0 0 18px; color:var(--ink);}
.bt-lead-steps{list-style:none; margin:0; padding:0; counter-reset:step;}
.bt-lead-steps li{counter-increment:step; position:relative; padding:0 0 22px 52px; color:var(--grey); font-size:15px; line-height:1.55;}
.bt-lead-steps li strong{color:var(--ink); display:block; margin-bottom:2px;}
.bt-lead-steps li:before{content:counter(step); position:absolute; left:0; top:2px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-title); font-weight:700; font-size:14px; color:var(--ink); background:#fff;}
.bt-lead-steps a{color:var(--blush);}
.bt-lead-aside{color:var(--grey); font-size:13.5px; border-top:1px solid var(--line); padding-top:18px;}
.bt-form{background:#fff; border:1px solid var(--line); border-radius:14px; padding:34px;}
.bt-form label{display:block; font-family:var(--font-title); font-weight:600; font-size:13px; color:var(--ink);}
.bt-form label span{color:var(--grey); font-weight:400;}
.bt-form input[type="text"], .bt-form input[type="email"], .bt-form input[type="tel"], .bt-form textarea{width:100%; margin-top:7px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:14.5px; color:var(--ink); line-height:1.4; transition:border-color .16s ease;}
.bt-form input:focus, .bt-form textarea:focus{outline:none; border-color:var(--ink);}
.bt-form #lf-website{position:absolute; left:-9999px; height:0; width:0; border:0; padding:0;}
.bt-form .bt-btn-primary{width:100%;}
.bt-checks-table{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-align:left;}
.bt-checks-row{background:#fff; padding:28px 30px;}
.bt-checks-row h3{font-family:var(--font-title); font-size:17px; margin:0 0 8px; color:var(--ink);}
.bt-checks-row p{color:var(--grey); font-size:14.5px; line-height:1.55; margin:0;}
.bt-not-checked{margin-top:26px; background:var(--cream); border-radius:14px; padding:30px 34px; text-align:left;}
.bt-not-checked p{color:var(--grey); font-size:14.5px; line-height:1.6; margin:0;}
.bt-checks-cta{margin-top:44px; text-align:center;}
.bt-checks-cta p{color:var(--grey); margin-bottom:16px;}
.bt-price-card{max-width:520px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:38px 40px; text-align:left; box-shadow:0 22px 54px -28px rgba(23,25,28,.18);}
.bt-price-card__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.bt-price-card__tier{font-family:var(--font-title); font-weight:700; font-size:17px; color:var(--ink);}
.bt-price-card__badge{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--blush); border:1px solid currentColor; border-radius:999px; padding:4px 11px;}
.bt-price-card__price{margin-bottom:22px;}
.bt-price-card__price strong{font-family:var(--font-title); font-size:52px; font-weight:600; color:var(--ink); letter-spacing:-.02em;}
.bt-price-card__price span{color:var(--grey); font-size:16px;}
.bt-price-card__list{list-style:none; margin:0 0 26px; padding:0;}
.bt-price-card__list li{position:relative; padding:9px 0 9px 30px; color:#3c3f44; font-size:14.5px; border-bottom:1px solid #f0eeeb;}
.bt-price-card__list li:last-child{border-bottom:0;}
.bt-price-card__list li:before{content:""; position:absolute; left:2px; top:14px; width:14px; height:9px; border-left:2px solid var(--blush); border-bottom:2px solid var(--blush); transform:rotate(-45deg);}
.bt-price-card__list a{color:var(--blush);}
.bt-price-card__cta{width:100%;}
.bt-price-card__foot{margin:16px 0 0; color:var(--grey); font-size:13px; text-align:center;}
.bt-price-compare{max-width:640px; margin:46px auto 0; text-align:center;}
.bt-price-compare p{color:var(--grey); font-size:15px; line-height:1.65;}
@media (max-width:860px){
.bt-lead-grid{grid-template-columns:1fr; gap:40px;}
.bt-checks-table{grid-template-columns:1fr;}
.bt-form{padding:24px 20px;}
.bt-price-card{padding:30px 24px;}
.bt-lead-hero{padding:104px 0 36px;}
}
.bt-lead-hero .section-title h2{color:var(--ink);}
.bt-lead-hero .section-title p{color:var(--grey); font-size:16px; max-width:560px; margin:14px auto 0;}
.filter-sidebar-header .tabs-menu li a{background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important;}
.filter-sidebar-header .tabs-menu li.current a{background:var(--cream) !important; color:var(--ink) !important; border-color:#d8d4d0 !important;}
.filter-sidebar-header .tabs-menu li a i{color:var(--blush) !important;}
.bt-checks-table .bt-checks-row:last-child{grid-column:1 / -1;}
.bt-legal{max-width:720px; margin:0 auto; text-align:left;}
.bt-legal h3{font-size:18px; font-weight:600; margin:30px 0 8px; letter-spacing:-.01em;}
.bt-legal p{color:var(--grey); font-size:15px; line-height:1.7; margin:0 0 12px;}
.bt-legal strong{color:var(--ink);}
.hb-towns .col-sm-4{margin-bottom:16px;}
@media (min-width:1071px){
.col-list-wrap.anim_clw{padding-top:66px;}
}
.bt-lead-hero .section-title h1{color:var(--ink);}

/* The lifted rules assume the template's own .container/.section paddings, and
   a few need re-pointing at the new shell. */
.small-container{max-width:900px; margin:0 auto; padding:0 var(--gut)}
.section-separator{height:1px; background:var(--line); margin:0; border:0}
.big-title{font-size:clamp(26px,3.6vw,40px); letter-spacing:-.03em; margin:0 0 14px}

/* ============================================== map markers and popups
   Glass works here because there is a real backdrop to see through: the tile
   layer. On a flat section background backdrop-filter renders nothing, which
   is why .sect--glass has to lay blurred colour down first. */
/* The same white-translucent glass as .glass, not a second dark language. Ink
   on it is ~11:1 even over the palest tile, where white on a dark chip was 4.4
   — and the tiles here are Carto light_all, so light glass is the readable one.
   The rim and drop shadow are what keep it off a white landmass. */
.leaflet-marker-icon .mk{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(14px) saturate(1.7);
  backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),      /* lit top edge */
    inset 0 0 0 1px rgba(255,255,255,.55),    /* rim */
    0 0 0 1px rgba(17,17,17,.10),             /* separation from pale tiles */
    0 6px 16px -6px rgba(17,17,17,.38);
  color:var(--ink); text-shadow:none; font-weight:600}
.leaflet-marker-icon .mk svg{fill:var(--star)}
.leaflet-marker-icon .mk--dot{
  background:rgba(255,255,255,.62); width:12px; height:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(17,17,17,.22),
    0 3px 8px -2px rgba(17,17,17,.4)}
.leaflet-marker-icon:hover{z-index:800 !important}
/* on hover it stops being glass and commits — the one the cursor is on should
   be unmistakable against fifteen others */
.leaflet-marker-icon:hover .mk{background:var(--ink); color:#fff}
.leaflet-marker-icon:hover .mk--dot{background:var(--ink)}

/* Leaflet paints its own white bubble, tip and 13px padding round whatever you
   give bindPopup. All of it has to go or the card sits in a second frame. */
.leaflet-popup-content-wrapper{background:none; box-shadow:none; padding:0; border-radius:0}
.leaflet-popup-content{margin:0; width:auto !important; line-height:inherit}
.leaflet-popup-tip{background:var(--card); box-shadow:0 12px 30px -14px rgba(0,0,0,.4)}
.leaflet-popup-close-button{display:none}

.mpop{display:block; width:232px; background:var(--card); border-radius:16px;
  overflow:hidden; box-shadow:0 20px 46px -16px rgba(0,0,0,.42); color:var(--ink)}
.mpop__i{display:block; aspect-ratio:16/10; background:var(--deep)}
.mpop__i img{width:100%; height:100%; object-fit:cover; display:block}
/* a logo tile is contain-fit on white; the card does the same thing */
.mpop__i img.hb-mark{object-fit:contain; background:#fff; padding:14px}
.mpop__b{display:block; padding:10px 12px 12px}
.mpop__b b{display:block; font-size:14px; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mpop__b i{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mpop:hover{box-shadow:0 24px 54px -14px rgba(0,0,0,.5)}

/* A listing with no banner shows its logo here, same as on its card — never a
   stock room it has never been in. Contain-fit on white so it reads as a mark.
   Shorter than a photo hero: a 21:9 band round a contained logo is mostly empty
   white, and the mark does not get better by being enormous. */
.prof__hero:has(img.hb-mark){aspect-ratio:auto; height:270px}
.prof__hero img.hb-mark{object-fit:contain; background:#fff; padding:34px 30% 96px}
.prof__hero:has(img.hb-mark) .prof__id{color:var(--ink)}
.prof__hero:has(img.hb-mark) .prof__id h1{color:var(--ink)}
/* the small mark tile would be the same logo twice */
.prof__hero:has(img.hb-mark) .prof__mark{display:none}
.prof__hero:has(img.hb-mark)::after{content:""; position:absolute; inset:auto 0 0 0;
  height:46%; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 58%);
  pointer-events:none; z-index:1}
@media (max-width:760px){
  .prof__hero:has(img.hb-mark){height:210px}
  .prof__hero img.hb-mark{padding:22px 22% 92px}
}

/* A white wordmark drawn for a dark site header. On our white tile it is an
   empty box, so it gets the ink tile instead. Flagged by tools/flag-logos.mjs
   into members.logo_dark — colour cannot be known from the URL at render time. */
.hb-mark--dark,.prof__mark--dark img,.prof__hero img.hb-mark--dark{background:var(--ink)}
.prof__mark--dark{background:var(--ink)}
.mpop__i img.hb-mark--dark{background:var(--ink)}