/* ===================================================================
   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; justify-content: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{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)}
/* Sized in em off the wordmark, NOT its own clamp. Two independent clamps drift
   apart: at 390px the badge floored at 34px against a 52px wordmark (0.65 of the
   type) while at 1440px it was 58px against 150px (0.39) — so on a phone it sat
   right on top of the "y" of Beauty. One em ratio holds the desktop proportion
   at every width. */
.hb-foot__badge{position:absolute; right:-.09em; top:6%; width:.39em; height:.39em;
  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 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)}

/* the two doors out of a compiled listing — claim or remove, side by side */
.bt-compiled__do{display:flex; gap:10px; margin:14px 0 0}
.bt-compiled__do a{flex:1; text-align:center; padding:9px 12px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:600; background:var(--deep); color:var(--ink)}
.bt-compiled__do a:first-child{background:var(--ink); color:var(--card)}

/* ================================================================ signup
   Split card: one photograph behind BOTH columns, headline over it on the
   left, the form on glass on the right. The image is the backdrop the glass
   reads — a panel on the flat cream ground blurs nothing and comes out white. */



/* the left half is darkened so white type sits on it; the right stays clear so
   the glass has something with contrast to pick up */




.hb-logo--on-photo .hb-logo__k{color:rgba(255,255,255,.72)}







/* A veil over the glass, not instead of it: strongest where the labels and
   inputs sit, thinning at the edges so the photograph still reads through and
   the panel is unmistakably glass rather than a white box. Without it the
   label colour lands on whatever the salon happens to be doing behind it. */







.sup__f{display:block; margin-bottom:clamp(9px,1.4vh,12px)}
.sup__f > span{display:block; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
  margin-bottom:5px; color:var(--ink-2)}
.sup__f > span em{font-style:normal; font-weight:400; color:var(--muted)}
.sup__f input,.sup__f textarea{width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:rgba(255,255,255,.78); border:1px solid var(--line-2); border-radius:12px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s}
.sup__f textarea{resize:vertical; min-height:74px}
.sup__f input::placeholder,.sup__f textarea::placeholder{color:var(--muted); opacity:.72}
.sup__f input:focus,.sup__f textarea:focus{outline:0; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}

.sup__fs{border:0; padding:0; margin:2px 0 clamp(10px,1.6vh,14px); min-width:0}
.sup__fs legend{font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ink-2)}
.sup__fs legend em{font-style:normal; font-weight:400; color:var(--acc-text); margin-left:6px}
.sup__txh{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin:8px 0 2px; width:100%}
.sup__txg{display:flex; flex-wrap:wrap; gap:7px}
.sup__tx{display:inline-flex; align-items:center; cursor:pointer}
.sup__tx input{position:absolute; opacity:0; width:0; height:0}
.sup__tx span{display:inline-block; padding:7px 13px; border-radius:var(--r-pill);
  font-size:13px; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background .14s, box-shadow .14s, color .14s}
.sup__tx input:checked + span{background:var(--acc); color:var(--acc-on);
  box-shadow:inset 0 0 0 1px var(--acc)}
.sup__tx input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--ink)}
.sup__tx input:disabled + span{opacity:.4; cursor:not-allowed}

/* off-screen rather than display:none — a bot reads the CSS too */
.sup__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sup__err:empty{display:none}
.sup__err{margin:0 0 10px; font-size:13.5px; color:#9B2C2C; font-weight:500}
.sup__go{width:100%; justify-content:center}
.sup__note{margin:10px 0 0; font-size:12.5px; color:var(--ink-2); text-align:center}
/* on glass, muted-on-muted disappears — the two links people are agreeing to
   have to be readable as links */
.sup__note a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.sup__done{text-align:center; padding:14px 0}
.sup__done h3{font-size:21px; letter-spacing:-.03em; margin-bottom:8px}
.sup__done p{font-size:14.5px; color:var(--ink-2); margin:0 0 18px}




/* ============================================ signup page shell (100vh)
   No header, no footer, no further reading — every other link on a signup page
   is a way to leave it. The card fills the viewport with a margin so its
   rounded edges read, and the left pane scrolls inside rather than the page. */
.auth-body{background:var(--ground)}
.authpage{display:flex; min-height:100vh; min-height:100dvh;
  padding:clamp(14px,2.2vh,26px)}

/* ================================================================ signup
   Split card: one photograph behind BOTH columns, headline over it on the
   left, the form on glass on the right. The image is the backdrop the glass
   reads — a panel on the flat cream ground blurs nothing and comes out white. */
.sup{position:relative; border-radius:var(--r-panel); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); align-items:stretch;
  flex:1; min-height:0; box-shadow:0 40px 90px -50px rgba(17,17,17,.55)}
.sup__bg{position:absolute; inset:0; z-index:0}
.sup__bg img{width:100%; height:100%; object-fit:cover}
/* the left half is darkened so white type sits on it; the right stays clear so
   the glass has something with contrast to pick up */
.sup__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(17,17,17,.72) 0%, rgba(17,17,17,.46) 34%,
             rgba(17,17,17,.10) 58%, rgba(17,17,17,0) 76%)}

.sup__l{position:relative; z-index:1; display:flex; flex-direction:column;
  justify-content:space-between; padding:34px 30px 36px 36px; color:#fff}
.hb-logo--on-photo .hb-logo__n{color:#fff}
.hb-logo--on-photo .hb-logo__k{color:rgba(255,255,255,.72)}
.sup__lb h1{font-size:clamp(30px,3.4vw,46px); letter-spacing:-.04em; line-height:1.04;
  color:#fff; margin:0 0 12px}
.sup__lb p{font-size:15px; line-height:1.5; color:rgba(255,255,255,.86); max-width:34ch;
  margin:0 0 20px}
.sup__pts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.sup__pts li{position:relative; padding-left:24px; font-size:14px; color:rgba(255,255,255,.94)}
.sup__pts li::before{content:""; position:absolute; left:0; top:6px; width:13px; height:7px;
  border-left:2px solid var(--acc); border-bottom:2px solid var(--acc);
  transform:rotate(-45deg)}

/* align-items:center is the cross axis here, so the panel takes its CONTENT
   height and floats — stretched to full height it left 250px of empty glass
   under the button. max-height keeps a long form scrolling inside it. */
.sup__r{position:relative; z-index:1; display:flex; align-items:center;
  padding:18px 18px 18px 0}
/* A veil over the glass, not instead of it: strongest where the labels and
   inputs sit, thinning at the edges so the photograph still reads through and
   the panel is unmistakably glass rather than a white box. Without it the
   label colour lands on whatever the salon happens to be doing behind it. */
.sup__panel{flex:1; border-radius:calc(var(--r-panel) - 6px); padding:28px 30px 26px;
  overflow-y:auto; max-height:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.16) 40%,
                    rgba(255,255,255,.30) 100%),
    rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.5),
    0 20px 50px -30px rgba(17,17,17,.5)}
.sup__head{margin-bottom:18px}
.sup__head h2{font-size:23px; letter-spacing:-.03em; margin:0 0 3px}
.sup__head p{font-size:13.5px; color:var(--muted); margin:0}
.sup__head a{color:var(--acc-text); font-weight:600}

.sup__two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sup__f{display:block; margin-bottom:12px}
.sup__f > span{display:block; font-size:12.5px; font-weight:600; letter-spacing:-.01em;
  margin-bottom:5px; color:var(--ink-2)}
.sup__f > span em{font-style:normal; font-weight:400; color:var(--muted)}
.sup__f input,.sup__f textarea{width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:rgba(255,255,255,.78); border:1px solid var(--line-2); border-radius:12px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s}
.sup__f textarea{resize:vertical; min-height:74px}
.sup__f input::placeholder,.sup__f textarea::placeholder{color:var(--muted); opacity:.72}
.sup__f input:focus,.sup__f textarea:focus{outline:0; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}

.sup__fs{border:0; padding:0; margin:2px 0 14px; min-width:0}
.sup__fs legend{font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ink-2)}
.sup__fs legend em{font-style:normal; font-weight:400; color:var(--acc-text); margin-left:6px}
.sup__txh{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin:8px 0 2px; width:100%}
.sup__txg{display:flex; flex-wrap:wrap; gap:7px}
.sup__tx{display:inline-flex; align-items:center; cursor:pointer}
.sup__tx input{position:absolute; opacity:0; width:0; height:0}
.sup__tx span{display:inline-block; padding:7px 13px; border-radius:var(--r-pill);
  font-size:13px; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background .14s, box-shadow .14s, color .14s}
.sup__tx input:checked + span{background:var(--acc); color:var(--acc-on);
  box-shadow:inset 0 0 0 1px var(--acc)}
.sup__tx input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--ink)}
.sup__tx input:disabled + span{opacity:.4; cursor:not-allowed}

/* off-screen rather than display:none — a bot reads the CSS too */
.sup__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sup__err:empty{display:none}
.sup__err{margin:0 0 10px; font-size:13.5px; color:#9B2C2C; font-weight:500}
.sup__go{width:100%; justify-content:center}
.sup__note{margin:10px 0 0; font-size:12.5px; color:var(--ink-2); text-align:center}
/* on glass, muted-on-muted disappears — the two links people are agreeing to
   have to be readable as links */
.sup__note a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}
.sup__done{text-align:center; padding:14px 0}
.sup__done h3{font-size:21px; letter-spacing:-.03em; margin-bottom:8px}
.sup__done p{font-size:14.5px; color:var(--ink-2); margin:0 0 18px}

@media (max-width:1000px){
  .authpage{padding:0; min-height:0}
  .sup{grid-template-columns:1fr; min-height:0; border-radius:0; box-shadow:none}
  /* the photo becomes a band at the top rather than a column behind everything,
     so the headline keeps its scrim and the form keeps a real backdrop */
  /* The photo band shares a GRID CELL with the copy rather than being a fixed
     340px strip. A fixed height means any change to the copy — one extra bullet
     — spills the text off the bottom of the photo onto the page ground, which
     is exactly what the fourth point did. Sharing the cell makes the band size
     itself to whatever the copy needs, for good. */
  .sup{grid-template-rows:auto auto}
  .sup__l{grid-area:1/1; padding:26px 22px 28px; min-height:300px;
    justify-content:flex-end; gap:22px}
  .sup__bg{grid-area:1/1; position:relative; inset:auto; height:auto}
  .sup__r{grid-area:2/1}
  /* the paragraph lands around 55% where the old .30 stop left it washed out
     over the window; hold the scrim darker from mid-band down */
  .sup__bg::after{background:linear-gradient(180deg, rgba(17,17,17,.50) 0%,
    rgba(17,17,17,.34) 26%, rgba(17,17,17,.66) 62%, rgba(17,17,17,.84) 100%)}
  .sup__r{padding:0}
  .sup__panel{border-radius:var(--r-panel) var(--r-panel) 0 0; max-height:none;
    background:var(--card); backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:26px 22px 24px}
}


@media (max-width:520px){ .sup__two{grid-template-columns:1fr; gap:0} }

/* ================================================= first-run setup wizard
   One question per screen, on the far side of the magic link. Chrome-less for
   the same reason as signup: every nav link is a way to leave a 90-second job. */
.wiz{position:relative; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; background:var(--ground)}
.wiz__bar{display:flex; gap:6px; padding:0}
.wiz__bar i{flex:1; height:3px; background:var(--line); transition:background .3s}
.wiz__bar i.is-on{background:var(--acc)}

.wiz__top{display:flex; align-items:center; gap:14px;
  padding:20px var(--gut) 0; min-height:64px}
.wiz__back{width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; flex:none;
  background:var(--card); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink);
  display:grid; place-items:center}
.wiz__back svg{width:18px; height:18px}
.wiz__back[hidden]{display:none}
.wiz__logo{margin-right:auto}
.wiz__act{display:flex; align-items:center; gap:10px}
.wiz__act [hidden]{display:none}
.wiz__act button:disabled{opacity:.4; cursor:not-allowed}

.wiz__body{flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:24px var(--gut) 56px; max-width:720px; margin:0 auto; width:100%}
.wiz__eyebrow{font-size:13px; color:var(--muted); margin:0 0 8px}
.wiz__s h1{font-size:clamp(29px,4.2vw,44px); letter-spacing:-.04em; line-height:1.05;
  margin:0 0 12px}
.wiz__sub{font-size:15.5px; line-height:1.55; color:var(--ink-2); margin:0 0 26px;
  max-width:52ch}
.wiz__hint{font-size:13px; color:var(--muted); margin:14px 0 0}
.wiz__err:empty{display:none}
.wiz__err{margin:18px 0 0; font-size:14px; color:#9B2C2C; font-weight:500}

.wiz__chips{display:flex; flex-wrap:wrap; gap:8px}
/* .sup__tx carries the chip look; on cream rather than glass it needs a ground */
.wiz__chips .sup__tx span{background:var(--card)}

.wiz__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.wiz__opt{text-align:left; cursor:pointer; border:0; font:inherit;
  background:var(--card); border-radius:var(--r-btn); padding:16px 18px;
  box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .14s, background .14s}
.wiz__opt:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.wiz__opt.is-on{box-shadow:inset 0 0 0 2px var(--acc); background:var(--acc-soft)}
.wiz__opt b{display:block; font-size:15.5px; letter-spacing:-.02em; margin-bottom:3px}
.wiz__opt span{display:block; font-size:13px; color:var(--muted); line-height:1.4}

.wiz__pc{max-width:280px}
.wiz__pc input{text-transform:uppercase; font-size:17px; letter-spacing:.04em}
.wiz__resolved{margin:10px 0 0; font-size:14px; color:var(--acc-text); font-weight:500}
.wiz__resolved[hidden]{display:none}

.wiz__priv{margin-top:28px; background:var(--card); border-radius:var(--r-card);
  padding:22px 24px; box-shadow:inset 0 0 0 1px var(--line)}
.wiz__priv[hidden]{display:none}
.wiz__priv h4{font-size:15.5px; letter-spacing:-.02em; margin:0 0 7px}
.wiz__priv p{font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:0 0 14px}
.wiz__switch{display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14px}
.wiz__switch input{appearance:none; -webkit-appearance:none; width:42px; height:24px;
  border-radius:999px; background:var(--line-2); position:relative; cursor:pointer;
  transition:background .16s; flex:none}
.wiz__switch input::after{content:""; position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .16s}
.wiz__switch input:checked{background:var(--acc)}
.wiz__switch input:checked::after{transform:translateX(18px)}

.wiz__s--done{text-align:center; display:flex; flex-direction:column; align-items:center}
.wiz__tick{width:74px; height:74px; border-radius:50%; background:var(--acc);
  color:var(--acc-on); display:grid; place-items:center; margin-bottom:22px}
.wiz__tick svg{width:34px; height:34px}
.wiz__s--done .wiz__sub{margin-bottom:28px}
.wiz__next{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:8px;
  width:100%; max-width:420px; text-align:left}
.wiz__next a{display:block; background:var(--card); border-radius:var(--r-btn);
  padding:14px 16px; box-shadow:inset 0 0 0 1px var(--line)}
.wiz__next a:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.wiz__next b{display:block; font-size:14.5px; letter-spacing:-.02em; color:var(--ink)}
.wiz__next span{display:block; font-size:13px; color:var(--muted); margin-top:2px}

@media (max-width:640px){
  .wiz__top{padding:16px var(--gut) 0; flex-wrap:wrap}
  .wiz__logo{order:-1; width:100%; margin:0 0 6px}
  .wiz__act{margin-left:auto}
  .wiz__body{padding:18px var(--gut) 44px; justify-content:flex-start}
}
.wiz__two{display:grid; grid-template-columns:minmax(0,200px) minmax(0,240px); gap:14px}
@media (max-width:520px){ .wiz__two{grid-template-columns:1fr} }

/* ==================================================== member dashboard
   my-profile shipped its OWN 16.8KB inline stylesheet with its own tokens
   (--blush:#a85c67, --cream:#f7f5f2) — which is why the one page a paying
   member spends their time in looked like a different product from the site
   that sold it to them. That block is gone; this is the same design system
   the marketing pages use, with the dashboard's own components on top. */
.dash-body{background:var(--ground); min-height:100vh}

.dhdr{position:sticky; top:0; z-index:30; background:var(--card);
  box-shadow:0 1px 0 var(--line); display:flex; align-items:center; gap:16px;
  padding:14px var(--gut)}
.dhdr nav{margin-left:auto; display:flex; gap:8px}

.dwrap{max-width:var(--max); margin:0 auto; padding:26px var(--gut) 120px}

/* ---- status hero: who you are, whether you are live, what happened ---- */
.dhero{background:var(--card); border-radius:var(--r-panel); padding:26px 28px;
  margin-bottom:22px}
.statusline{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.dhero h1{font-size:clamp(24px,3vw,32px); letter-spacing:-.035em; margin:0}
/* ---- "you are paying and your page is not live" ------------------------
   The publish switch is the member's own decision (George, 9 Sep 2026: pay,
   fill in your details, then click Publish), so this states the position
   rather than acting for them. Two classes deep on the paragraph: .dhero p
   would otherwise win, the same specificity trap recorded for .bt-guide p. */
/* The go-live panel is GLASS, the site's own language (.glass / .sect--glass).
   Glass needs something to see through: on flat cream backdrop-filter renders
   nothing, so this carries its own out-of-focus accent behind an isolated
   stacking context, exactly as .sect--glass does at section scale. The colour
   is the blurred light behind the panel, never a fill on top of it. */
.golive{position:relative; isolation:isolate; overflow:hidden;
  margin-top:16px; border-radius:var(--r-card)}
/* The light sources sit mostly OUTSIDE the panel, so only their falloff
   reaches it. Centred inside a 140px panel they fill it, and a gradient wash
   is the same flat-orange objection wearing a different hat. .sect--glass gets
   away with .16 at 90px blur because it lights a whole section; a small panel
   needs the sources pushed further out, not turned up. */
.golive::before,
.golive::after{content:""; position:absolute; z-index:-1; border-radius:50%;
  filter:blur(58px); pointer-events:none}
.golive::before{width:230px; height:230px; left:-120px; top:-130px;
  background:var(--acc); opacity:.30}
.golive::after{width:200px; height:200px; right:-110px; bottom:-120px;
  background:var(--acc-d); opacity:.18}
@media (max-width:560px){
  /* narrower panel, so the sources move further out again rather than dimmer:
     dimming loses the effect, moving keeps it as an edge light */
  .golive::before{left:-150px; top:-150px}
  .golive::after{right:-140px; bottom:-140px}
}
.golive__in{position:relative; z-index:1; padding:18px 20px;
  border-radius:var(--r-card);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  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"] .golive__in{background:rgba(255,253,249,.46)}
.golive b{display:flex; align-items:flex-start; gap:9px; font-size:15.5px; letter-spacing:-.01em}
/* flex-start, not center: the heading wraps to two lines at 390 and a centred
   dot floats in the gutter between them instead of marking the first line. */
.golive b::before{content:""; width:7px; height:7px; border-radius:50%; flex:none;
  margin-top:.42em; background:var(--acc)}
.golive .golive__p{margin:7px 0 0; font-size:14px; color:var(--ink-2)}
.golive ul{margin:10px 0 0; padding-left:18px; font-size:14px}
.golive li{margin:3px 0}
.golive .golive__go{margin-top:15px}

.onboard{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.onboard span{display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  border-radius:var(--r-pill); font-size:13px; background:var(--deep); color:var(--muted)}
.onboard span.done{background:var(--acc-soft); color:var(--acc-text); font-weight:600}
.onboard span.done::before{content:"\2713"; font-weight:700}
.stats{display:flex; flex-wrap:wrap; gap:22px; margin-top:16px}
.stats__none{font-size:13.5px; color:var(--muted); margin-top:14px}
.stat{display:flex; flex-direction:column}
.stat b{font-size:23px; letter-spacing:-.03em; line-height:1.1}
.stat span{font-size:12.5px; color:var(--muted)}

/* ---- layout: a sticky rail, not a wrapping row of nine tabs ---- */
.dlayout{display:grid; grid-template-columns:224px minmax(0,1fr); gap:24px;
  align-items:start}
.tabs{position:sticky; top:86px; display:flex; flex-direction:column; gap:2px;
  background:var(--card); border-radius:var(--r-card); padding:8px}
.tab{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; cursor:pointer; font:inherit; font-size:14.5px; color:var(--ink-2);
  background:transparent; border-radius:var(--r-btn); padding:10px 12px;
  transition:background .14s, color .14s}
.tab:hover{background:var(--deep); color:var(--ink)}
.tab.is-on{background:var(--ink); color:var(--card); font-weight:600}
.tab__dot{width:6px; height:6px; border-radius:50%; background:var(--acc);
  margin-left:auto; flex:none; opacity:0; transition:opacity .14s}
.tab__dot.show{opacity:1}

/* ---- cards and fields ---- */
.card{background:var(--card); border-radius:var(--r-card); padding:24px 26px;
  margin-bottom:16px}
.card h2{font-size:18px; letter-spacing:-.03em; margin:0 0 4px}
.card--danger{box-shadow:inset 0 0 0 1px #E7C9C9}
.sub{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 16px}
.note{font-size:13px; color:var(--ink-2); background:var(--deep);
  border-radius:var(--r-btn); padding:12px 14px; margin:14px 0 0}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
/* .card label is 0,1,1 and silently beats ANY single-class label component —
   it has already flattened .switch and .hours__sw. Every label that is really
   a control is exempted here, in one place, rather than one fix at a time. */
.card label:not(.switch):not(.hours__sw):not(.svc-from):not(.tx label){
  display:block; font-size:12.5px; font-weight:600; color:var(--ink-2);
  margin:14px 0 5px; letter-spacing:-.01em}
.card .row2 label,.card .row3 label{margin-top:0}
.card input[type=text],.card input[type=email],.card input[type=tel],
.card input[type=number],.card input[type=url],.card input[type=time],
.card textarea,.card select{
  width:100%; font:inherit; font-size:14.5px; color:var(--ink); background:var(--raise);
  border:1px solid var(--line-2); border-radius:12px; padding:10px 12px;
  transition:border-color .15s, box-shadow .15s}
.card textarea{resize:vertical; min-height:96px}
.card input:focus,.card textarea:focus,.card select:focus{outline:0;
  border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}

/* ---- buttons: the site's pill, under the dashboard's class name ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:600;
  border-radius:var(--r-pill); padding:10px 18px; background:var(--card);
  color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .16s, background .16s}
.btn:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.btn--blush{background:var(--acc); color:var(--acc-on); box-shadow:none}
.btn--blush:hover{background:var(--acc-d); box-shadow:none}
/* Solid ink, the shape .cta--book settled on after George called out a pale
   orange tint twice. White on #111 is 17.4:1; white on --acc is 2.32:1, which
   is why --acc-on is ink and why an orange fill can never carry white text. */
.btn--ink{background:var(--pill); color:var(--pill-on); box-shadow:none}
.btn--ink:hover{background:#000; color:var(--pill-on); box-shadow:none}
/* Glass button, same recipe as .glass at button scale: white at low alpha over
   a real blur, a bright top inset for the lit edge, and ink text. Needs
   something behind it to read against, so it belongs on .sect--glass or a
   panel carrying its own backdrop. */
.btn--glass{color:var(--ink);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 10px 26px -16px rgba(0,0,0,.40)}
.btn--glass:hover{background:rgba(255,255,255,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 12px 30px -16px rgba(0,0,0,.45)}
.btn--danger{background:#9B2C2C; color:#fff; box-shadow:none}
.btn--danger:hover{background:#7d2323}
.btn:disabled{opacity:.45; cursor:not-allowed}

.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  border-radius:var(--r-pill); font-size:12.5px; font-weight:600;
  background:var(--deep); color:var(--ink-2)}
.chip--verified{background:var(--acc-soft); color:var(--acc-text)}
.chip--verification{background:var(--deep); color:var(--ink-2)}
.chip--listed{background:var(--deep); color:var(--muted)}
.chip--live{background:#E6F1EA; color:#2E7D4F}
.chip--draft{background:var(--deep); color:var(--muted)}
/* a filename in the document list — never let a long one push the date off */
.dn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.msg{font-size:13.5px; margin:10px 0 0; font-weight:500}
.msg:empty{display:none}
.msg--err{color:#9B2C2C} .msg--ok{color:#2E7D4F}

/* ---- switch ---- */
/* .card label is 0,1,1 and forced this to display:block, so the 42px track and
   the caption sat on top of each other — "Sho    my full address publicly" */

.switch{display:inline-flex; align-items:center; gap:11px;
  cursor:pointer; margin:0}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch .tr{width:42px; height:24px; border-radius:999px; background:var(--line-2);
  position:relative; transition:background .16s; flex:none}
.switch .tr::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .16s}
.switch input:checked + .tr{background:var(--acc)}
.switch input:checked + .tr::after{transform:translateX(18px)}

/* ---- treatment chips ---- */
.txgroup{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 6px; width:100%}
/* .tx is the CONTAINER — #f-tx rows, #f-type and #f-access all render bare
   <label><input><span> inside it. Styling .tx as the chip left every option as
   run-together bold text with only the checked one showing a pill. */
.tx{display:flex; flex-wrap:wrap; gap:7px}
.tx label{display:inline-flex; align-items:center; cursor:pointer; margin:0}
.tx label input{position:absolute; opacity:0; width:0; height:0}
.tx label span{display:inline-block; padding:7px 13px; border-radius:var(--r-pill);
  font-size:13px; background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background .14s, box-shadow .14s, color .14s}
.tx label:hover span{box-shadow:inset 0 0 0 1px var(--ink-2)}
.tx label input:checked + span{background:var(--acc); color:var(--acc-on);
  box-shadow:inset 0 0 0 1px var(--acc)}
.tx label input:disabled + span{opacity:.4; cursor:not-allowed}
.tx label input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--ink)}

/* ---- image slots ---- */
.slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
/* strong + span with no separator ran together as "Logo512px+ · PNG or SVG" */
.slot__head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:14px; margin-bottom:7px}
.slot__head strong{font-weight:600; letter-spacing:-.01em}
.slot__head span{font-size:12px; color:var(--muted); font-weight:400}
.slot__well{position:relative; border-radius:var(--r-photo); background:var(--deep);
  cursor:pointer; overflow:hidden; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.slot__well--logo{aspect-ratio:1/1}
.slot__well--banner{aspect-ratio:21/9}
.slot__well--card{aspect-ratio:4/3}
.slot__well img{width:100%; height:100%; object-fit:cover}
.slot__well--logo img{object-fit:contain; padding:14%; background:#fff}
.slot__empty{font-size:13px; color:var(--muted)}
.slot__x{position:absolute; top:8px; right:8px; width:26px; height:26px; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); cursor:pointer; font-size:15px;
  line-height:1; color:var(--ink)}
.slot__note{font-size:12.5px; color:var(--muted); margin:7px 0 0}
.slot__msg{font-size:12.5px; margin:6px 0 0}
.slot__msg--err{color:#9B2C2C} .slot__msg--warn{color:#8a6d1d} .slot__msg--ok{color:#2E7D4F}
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px}
.ph{position:relative; aspect-ratio:4/3; border-radius:var(--r-photo); overflow:hidden;
  background:var(--deep)}
.ph img{width:100%; height:100%; object-fit:cover}
.ph button{position:absolute; top:6px; right:6px; width:24px; height:24px; border:0;
  border-radius:50%; background:rgba(255,255,255,.92); cursor:pointer; line-height:1}
.ph--add{display:grid; place-items:center; cursor:pointer; font-size:13px;
  color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-2); background:transparent}
.ph--add:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink-2)}

/* ---- services menu ---- */
.svc-group{margin-bottom:18px}
.svc-group__h{font-size:13px; font-weight:600; color:var(--ink-2); margin:0 0 8px}
.svc-head,.svc-row{display:grid; grid-template-columns:minmax(0,2fr) 78px 78px 88px 30px;
  gap:8px; align-items:center}
.svc-head{font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px}
/* one heading over BOTH duration boxes: a column headed "TO" above a box
   placeheld "up to" is the question "to what?" */
.svc-head__dur{grid-column:span 2; text-align:center}
.svc-row{margin-bottom:7px}
.svc-head,.svc-row{align-items:end}
.card .svc-row > input[data-f="name"]{width:100%; font:inherit; font-size:14px;
  background:var(--raise); border:1px solid var(--line-2); border-radius:10px;
  padding:0 12px; height:52px; color:var(--ink)}
.svc-f{height:52px; justify-content:center}
.svc-row > input[data-f="name"]:focus{outline:0; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
/* .svc-f is the WRAPPER — a persistent micro-label above its input, so "105 /
   78" is still readable on a phone. Styling it as the field itself gave every
   one of them a border round a bordered input. */
.svc-f{display:flex; flex-direction:column; gap:1px; background:var(--raise);
  border:1px solid var(--line-2); border-radius:10px; padding:5px 9px 6px;
  min-width:0; transition:border-color .15s, box-shadow .15s}
.svc-f em{font-style:normal; font-size:10.5px; letter-spacing:.02em;
  color:var(--muted); line-height:1.2}
/* .card input[type=number] is 0,2,1 and outranked a plain .svc-f input, so the
   number kept its own border INSIDE the wrapper's — a box in a box. */
.card .svc-f input{width:100%; min-width:0; border:0; background:transparent;
  padding:0; font:inherit; font-size:14px; color:var(--ink);
  -moz-appearance:textfield; border-radius:0; box-shadow:none}
.svc-f input::-webkit-outer-spin-button,
.svc-f input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.card .svc-f input:focus{outline:0; box-shadow:none; border:0}
.svc-f:focus-within{border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
.svc-x{border:0; background:transparent; cursor:pointer; font-size:17px; color:var(--muted);
  line-height:1}
.svc-x:hover{color:#9B2C2C}
.svc-add{display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap}
.svc-empty{font-size:13.5px; color:var(--muted); padding:14px 0}
.staff-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px;
  gap:8px; margin-bottom:7px}

/* ---- opening hours ---- */
.hours{display:grid; gap:6px}
.hours__row{display:grid; grid-template-columns:108px 132px minmax(0,1fr); gap:12px;
  align-items:center; padding:6px 0}
.hours__day{font-size:14px; font-weight:500}
/* the day carries a STATE, not a button that blanks it: a closed day and a day
   nobody has filled in used to look identical */
.hours__sw{display:inline-flex; align-items:center; gap:9px; cursor:pointer; margin:0}
.hours__sw input{position:absolute; opacity:0; width:0; height:0}
.hours__sw .tr{width:36px; height:21px; border-radius:999px; background:var(--line-2);
  position:relative; transition:background .16s; flex:none}
.hours__sw .tr::after{content:""; position:absolute; top:3px; left:3px; width:15px;
  height:15px; border-radius:50%; background:#fff; transition:transform .16s}
.hours__sw input:checked + .tr{background:var(--acc)}
.hours__sw input:checked + .tr::after{transform:translateX(15px)}
.hours__state{font-style:normal; font-size:13px; color:var(--muted)}
.hours__sw input:checked ~ .hours__state{color:var(--ink); font-weight:500}
.hours__times{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center;
  max-width:340px}
.hours__to{font-size:12.5px; color:var(--muted)}
.hours__row.is-closed .hours__times{opacity:.4}
.card .hours__times input[type=time]{padding:8px 10px}

/* ---- verification, documents, google ---- */
.checkline{display:flex; align-items:center; gap:10px; padding:11px 0;
  border-top:1px solid var(--line); font-size:14px}
.checkline:first-child{border-top:0}
.doclist{display:grid; gap:7px; margin-top:10px}
.docrow{display:flex; align-items:center; gap:10px; font-size:13.5px;
  background:var(--deep); border-radius:var(--r-btn); padding:10px 12px}
.docrow .dd{margin-left:auto; color:var(--muted); font-size:12.5px}
.docrow button{border:0; background:transparent; cursor:pointer; font-size:16px;
  color:var(--muted); line-height:1}
.gg{margin-top:8px}
.gg__row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px;
  align-items:end}
.gg__hits{display:grid; gap:7px; margin-top:12px}
.gg__hit{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:0; cursor:pointer; font:inherit; background:var(--deep);
  border-radius:var(--r-btn); padding:11px 13px; font-size:13.5px; color:var(--ink)}
.gg__hit:hover{background:var(--acc-soft)}
.gg__score{margin-left:auto; font-weight:600; display:inline-flex; align-items:center; gap:4px}
.gg__star{color:var(--star)}
.gg__linked{display:flex; align-items:center; gap:10px; background:var(--acc-soft);
  border-radius:var(--r-btn); padding:12px 14px; font-size:13.5px; flex-wrap:wrap}
.gg__foot,.gg__none,.gg__msg{font-size:12.5px; color:var(--muted); margin-top:10px}

/* ---- billing ---- */
/* minmax(210px,…) has a HARD 210px floor, so in a container whose width is
   itself derived from its content — the .dlayout auto track — this resolved
   to two 210px columns, made .card 468px wide and pushed the whole dashboard
   96px off a 390px screen. min(210px,100%) lets the floor collapse. */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); gap:12px;
  margin-top:14px}
.plan{text-align:left; border:0; cursor:pointer; font:inherit; background:var(--raise);
  border-radius:var(--r-card); padding:18px 20px; box-shadow:inset 0 0 0 1px var(--line-2)}
.plan:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.plan--best{box-shadow:inset 0 0 0 2px var(--acc)}
.plan__p{display:block; font-size:22px; letter-spacing:-.03em; font-weight:600}
.plan__s{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.billnow{font-size:14px}
.lapse{border-radius:var(--r-btn); padding:12px 14px; font-size:13.5px; margin:12px 0 0}
.lapse--soon{background:var(--acc-soft); color:var(--acc-text)}
.lapse--bad{background:#FBEAEA; color:#9B2C2C}

/* ---- gate + save bar ---- */
.gate{max-width:440px; margin:60px auto}
.gate h1{font-size:26px; letter-spacing:-.035em; margin:0 0 6px}
.savebar{position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--card); box-shadow:0 -1px 0 var(--line), 0 -12px 30px -24px rgba(0,0,0,.3);
  padding:12px var(--gut); display:flex; align-items:center; gap:14px}
.savebar .inner{max-width:var(--max); margin:0 auto; width:100%;
  display:flex; align-items:center; gap:14px; justify-content:flex-end}
#save-note{font-size:13.5px; color:var(--muted)}

@media (max-width:640px){
  /* "View my page" and "Sign out" each wrapped onto two lines at 390 */
  .dhdr{padding:11px var(--gut)}
  .dhdr .btn{padding:8px 13px; font-size:13px; white-space:nowrap}
  .dhero{padding:20px 18px}
  .card{padding:18px 18px}
  .savebar{padding:10px var(--gut)}
}
@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr has an auto minimum, so one wide child
     silently widens the track and takes the page with it. */
  .dlayout{grid-template-columns:minmax(0,1fr)}
  /* the rail becomes a scrolling row — nine sections do not fit as a stack
     above the content on a phone */
  .tabs{position:static; flex-direction:row; overflow-x:auto; gap:4px;
    padding:6px; margin-bottom:14px}
  .tab{white-space:nowrap; width:auto}
  .tab__dot{margin-left:4px}
  .row2,.row3{grid-template-columns:1fr}
  .svc-head{display:none}
  .svc-row{grid-template-columns:1fr 1fr; gap:6px}
  .svc-row .svc-f:first-child{grid-column:1/-1}
  .hours__row{grid-template-columns:84px 1fr auto 1fr; row-gap:4px}
  .hours__clear{grid-column:2/-1; justify-self:start}
  .gg__row{grid-template-columns:1fr}
}
/* price + its "from" tick share one cell */
.svc-head,.svc-row{grid-template-columns:minmax(0,2fr) 82px 150px 30px}
.svc-price{display:flex; align-items:center; gap:8px; min-width:0}
.svc-price .svc-f{flex:1; min-width:0}
/* An actual tickbox. It was a pill that changed colour, which reads as a tag
   rather than a control — there was nothing to say it could be turned off. */
.svc-from{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  flex:none; user-select:none}
.svc-from input{appearance:none; -webkit-appearance:none; width:19px; height:19px;
  border-radius:6px; background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2);
  position:relative; cursor:pointer; flex:none; transition:background .14s, box-shadow .14s}
.svc-from input:checked{background:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.svc-from input:checked::after{content:""; position:absolute; left:6px; top:2.5px;
  width:5px; height:10px; border:solid var(--acc-on); border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.svc-from input:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.svc-from span{font-size:13px; color:var(--muted)}
.svc-from input:checked + span{color:var(--ink); font-weight:600}
@media (max-width:900px){
  .svc-row{grid-template-columns:1fr 1fr}
  .svc-row > input[data-f="name"]{grid-column:1/-1}
  .svc-price{grid-column:1/-1}
}

/* ============================================ member profile refinements
   The page had one vertical rhythm for everything, so a card heading, its
   sub-line and its body all sat on the same spacing and the hierarchy read
   flat — "Good to know" ran straight into "Address" into the address itself
   with nothing telling you which was which. */
.pcard{padding:26px 28px 24px}
.pcard + .pcard{margin-top:16px}
.pcard > h2{font-size:19px; letter-spacing:-.03em; line-height:1.25; margin:0 0 3px}
/* the sub-line belongs to the heading above it, not to the body below */
.pcard > .sub{font-size:13.5px; color:var(--muted); line-height:1.5;
  margin:0 0 20px; max-width:56ch}
.pcard > h2 + .sub{margin-top:2px}
.pcard > h2:not(:first-child){margin-top:26px}
.sub--foot{margin:16px 0 0 !important; font-size:12.5px}

/* "Good to know": a definition list, not a stack of equal-weight lines */
.bt-facts{display:grid; gap:18px}
.bt-fact h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 5px}
.bt-fact p{font-size:15px; line-height:1.55; color:var(--ink); margin:0}
.bt-fact a{color:var(--acc-text); font-weight:500}
@media (min-width:620px){ .bt-facts{grid-template-columns:1fr 1fr; gap:20px 28px} }

/* ---- the Google rating, directly under the hero ---- */
.grate{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card); border-radius:var(--r-card); padding:14px 20px; margin:14px 0 0}
.grate__logo{display:inline-flex; flex:none}
.grate__logo .bm{width:20px; height:20px}
.grate__n{font-size:21px; font-weight:600; letter-spacing:-.03em; line-height:1}
.grate__stars{display:inline-flex; gap:2px}
.grate__s{color:var(--line-2); display:inline-flex}
.grate__s.on{color:var(--star)}
.grate__s .hb-star{width:15px; height:15px; fill:currentColor}
.grate__c{font-size:13.5px; color:var(--muted)}
.grate__go{margin-left:auto; font-size:13.5px; font-weight:600; color:var(--acc-text);
  white-space:nowrap}
.grate__go:hover{text-decoration:underline}
@media (max-width:560px){
  .grate{gap:8px 10px}
  .grate__c{width:100%; order:5}
  .grate__go{margin-left:0; order:6}
}

/* ---- review quotes ---- */
.quote{padding:16px 0; border-top:1px solid var(--line)}
.quote:first-child{padding-top:0; border-top:0}
.quote p{font-size:15.5px; line-height:1.6; color:var(--ink); margin:0}
.quote cite{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  margin-top:7px}

/* ---- contact: no slab-black button ---- */
.contact{display:grid; gap:9px}
.cta{display:flex; align-items:center; gap:11px; padding:14px 18px;
  border-radius:var(--r-btn); font-size:15px; font-weight:500; color:var(--ink);
  background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .16s, background .16s, transform .16s}
.cta:hover{box-shadow:inset 0 0 0 1px var(--ink-2); transform:translateY(-1px)}
.cta svg{width:19px; height:19px; flex:none; opacity:.75}
.cta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the primary action is warm, not a black slab */
/* Book: a solid ink pill, the shape Fresha's own button has (George, 6 Sep 2026). */
.cta--book{background:var(--ink); color:#fff; font-weight:600; box-shadow:none}
.cta--book svg{opacity:1; color:#fff}
.cta--book:hover{background:#000; color:#fff; box-shadow:none}
.cta--book:hover svg{color:#fff}

/* ---- socials: real marks now, so give them room ---- */
.bt-socials{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}
.bt-social{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--deep); color:var(--ink-2); transition:background .16s, color .16s}
.bt-social:hover{background:var(--ink); color:var(--card)}
.bm{width:19px; height:19px; display:block}
.bm--full{width:20px; height:20px}
.bt-linkrow{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink);
  word-break:break-word}
.bt-linkrow svg{flex:none; opacity:.6}
/* a field the server will reject should look rejected before you press Save */
.card input.is-bad{border-color:#C0575A; box-shadow:0 0 0 3px rgba(192,87,90,.14)}
/* the save bar earns attention only when there is something to save */
.savebar.is-dirty{box-shadow:0 -1px 0 var(--acc), 0 -12px 30px -22px rgba(245,147,0,.5)}
.savebar.is-dirty #save-note{color:var(--acc-text); font-weight:600}

/* ================================================= gallery + lightbox
   A member's own work was rendered at 180px with no way to open it. */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.gal img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
  display:block; transition:transform .25s, box-shadow .25s}
.gal img:hover{transform:scale(1.02); box-shadow:0 10px 26px -14px rgba(17,17,17,.5)}
.gal img:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
/* the first photo earns more room when there are enough to make a pattern */
.gal img:first-child{grid-column:span 2; grid-row:span 2; aspect-ratio:1/1}
@media (max-width:520px){ .gal{grid-template-columns:repeat(2,1fr)} }

body.lb-on{overflow:hidden}
.lb{position:fixed; inset:0; z-index:200; display:none; align-items:center;
  justify-content:center; gap:8px; padding:clamp(12px,4vw,48px);
  background:rgba(17,17,17,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2)}
.lb.is-on{display:flex}
.lb__f{margin:0; max-width:100%; max-height:100%; display:flex; align-items:center;
  justify-content:center; flex:1; min-width:0}
.lb__f img{max-width:100%; max-height:calc(100vh - clamp(24px,8vw,96px));
  border-radius:14px; object-fit:contain; box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.lb__x,.lb__nav{border:0; cursor:pointer; border-radius:50%; flex:none;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .16s}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.28)}
.lb__x{position:absolute; top:18px; right:18px; width:42px; height:42px; z-index:2}
.lb__x svg{width:19px; height:19px}
.lb__nav{width:46px; height:46px}
.lb__nav svg{width:22px; height:22px}
.lb__nav[hidden]{display:none}
.lb__n{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.8); font-size:13px; margin:0}
@media (max-width:640px){
  .lb__nav{position:absolute; bottom:60px; width:44px; height:44px}
  .lb__nav--prev{left:20px} .lb__nav--next{right:20px}
}

/* ============================================== recommendations
   Client-written, business-published. Styled so they can never be mistaken for
   the Google rating above them: no stars, no number, and the sub-line on the
   card says who chose to publish them. */
.rec{padding:16px 0; border-top:1px solid var(--line)}
.rec:first-child{padding-top:0; border-top:0}
.rec p{font-size:15.5px; line-height:1.6; color:var(--ink); margin:0}
.rec cite{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  margin-top:7px}

.rec__add{margin-top:18px; border-top:1px solid var(--line); padding-top:16px}
.rec__add summary{cursor:pointer; font-size:14.5px; font-weight:600; color:var(--acc-text);
  list-style:none}
.rec__add summary::-webkit-details-marker{display:none}
.rec__add summary::before{content:"+ "; font-weight:700}
.rec__add[open] summary::before{content:"\2212 "}
.rec__add form{margin-top:16px}
.rec__two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.rec__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.rec__err:empty{display:none}
.rec__err{margin:0 0 10px; font-size:13.5px; color:#9B2C2C; font-weight:500}
.rec__note{margin:10px 0 0; font-size:12.5px; color:var(--muted)}
.rec__done{margin-top:16px; background:var(--acc-soft); border-radius:var(--r-btn);
  padding:14px 16px; font-size:14px; color:var(--ink-2)}
@media (max-width:560px){ .rec__two{grid-template-columns:1fr; gap:0} }

/* dashboard moderation */
.rec-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px;
  align-items:start; padding:16px 0; border-top:1px solid var(--line)}
.rec-row:first-child{border-top:0; padding-top:0}
.rec-row.is-new{background:var(--acc-soft); border-radius:var(--r-btn);
  padding:16px; border-top:0; margin-bottom:8px}
.rec-row__b p{font-size:15px; line-height:1.55; margin:0; color:var(--ink)}
.rec-row__b cite{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  margin-top:6px}
.rec-row__a{display:flex; flex-direction:column; gap:6px; flex:none}
.rec-row__a .btn{padding:8px 14px; font-size:13px}
.rec-del{color:#9B2C2C}
@media (max-width:640px){
  .rec-row{grid-template-columns:1fr}
  .rec-row__a{flex-direction:row}
}

/* ================================================ visitor account + hearts
   The heart on every card carried aria-hidden and no handler — a save button
   that did nothing. It is a real control now, so it needs real states. */
.hb-save{cursor:pointer; transition:background .16s, color .16s, transform .16s}
.hb-save:hover{background:#fff; transform:scale(1.06)}
.hb-save.is-on{background:var(--acc); color:var(--acc-on)}
.hb-save.is-on svg{fill:currentColor; stroke:currentColor}
.hb-save:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

.afavs{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.afav{display:flex; align-items:center; gap:12px; background:var(--raise);
  border-radius:var(--r-btn); padding:10px; box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .16s}
.afav:hover{box-shadow:inset 0 0 0 1px var(--ink-2)}
.afav img,.afav__ph{width:54px; height:54px; border-radius:10px; object-fit:cover;
  flex:none; background:var(--deep)}
.afav span{min-width:0}
.afav b{display:block; font-size:14.5px; letter-spacing:-.02em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.afav i{display:block; font-style:normal; font-size:12.5px; color:var(--muted)}

.arec{padding:16px 0; border-top:1px solid var(--line)}
.arec:first-child{border-top:0; padding-top:0}
.arec p{font-size:15px; line-height:1.55; margin:0; color:var(--ink)}
.arec cite{display:block; font-style:normal; font-size:12.5px; color:var(--muted);
  margin-top:6px}
.arec cite a{color:var(--ink-2); font-weight:500}
.arec__s{color:var(--acc-text)}

/* ====================================== "fill it in from your website"
   A draft of their own data, from their own site, that they review before any
   of it is saved. Every row is ticked and editable; nothing is written until
   "Use these" is pressed. */
.scan{box-shadow:inset 0 0 0 1px rgba(245,147,0,.3); background:linear-gradient(
  180deg, var(--acc-soft) 0%, var(--card) 120px)}
.scan__row{display:flex; gap:10px; flex-wrap:wrap}
.scan__row input{flex:1; min-width:220px}
.scan__found{display:grid; gap:8px; margin-top:16px}
.scan__f{display:flex !important; align-items:flex-start; gap:11px; cursor:pointer;
  background:var(--raise); border-radius:var(--r-btn); padding:12px 14px;
  box-shadow:inset 0 0 0 1px var(--line); margin:0 !important}
.scan__f input{appearance:none; -webkit-appearance:none; width:19px; height:19px; flex:none;
  border-radius:6px; background:var(--raise); box-shadow:inset 0 0 0 1px var(--line-2);
  position:relative; cursor:pointer; margin-top:1px}
.scan__f input:checked{background:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.scan__f input:checked::after{content:""; position:absolute; left:6px; top:2.5px;
  width:5px; height:10px; border:solid var(--acc-on); border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.scan__f span{min-width:0}
.scan__f b{display:block; font-size:12.5px; letter-spacing:-.01em; color:var(--ink-2)}
.scan__f i{display:block; font-style:normal; font-size:14px; color:var(--ink);
  margin-top:2px; word-break:break-word}
@media (max-width:560px){ .scan__row input{min-width:0} }

/* ---- 404 -------------------------------------------------------------------
   Both of these classes were in 404.html and in NO stylesheet, so the search
   row rendered as a raw browser input at its default width with dead space
   beside it, and the link row as an unstyled sentence. Same trap as .bt-pin and
   .bt-check: before shipping markup, diff the classes it emits against the ones
   this file defines. */
.bt-404__form{display:flex; gap:10px; max-width:520px; margin:0 auto 18px}
.bt-404__form input{flex:1; min-width:0; font:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:13px 18px}
.bt-404__form input::placeholder{color:var(--muted)}
.bt-404__form input:focus{outline:0; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
.bt-404__form button{flex:none}
.bt-404__links{font-size:14.5px; color:var(--muted); max-width:520px; margin:0 auto;
  line-height:1.9}
.bt-404__links a{color:var(--ink-2); text-underline-offset:3px}
.bt-404__links a:hover{color:var(--acc-text); text-decoration:underline}
@media (max-width:520px){
  .bt-404__form{flex-direction:column}
  .bt-404__form button{width:100%}
}

/* ================================================== 5 Sep 2026: near you
   The homepage grid is the listings nearest the visitor (api/cards.js reads
   Vercel's IP-location headers; js/live-cards.js fills these). */
/* a category tab with nothing in the nearby set: a message and a way out,
   never an empty grid */
.hb-empty{grid-column:1/-1; text-align:center; padding:34px 18px; background:var(--card);
  border-radius:var(--r-card); color:var(--muted)}
.hb-empty p{margin:0 0 14px; font-size:15px}
/* "Not Leeds? Use my location" under the section heading */
.hb-loc__row{margin:-16px 0 0; font-size:14px}
.hb-loc{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent;
  color:var(--acc-text); font:inherit; font-size:14px; font-weight:500; padding:0; cursor:pointer}
.hb-loc:hover{text-decoration:underline}
.hb-loc:disabled{color:var(--muted); cursor:default; text-decoration:none}
.hb-loc svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
/* the same button on the phone search card, where it did not exist at all */
.hb-srch--m .hb-srch__near{width:100%; justify-content:center; background:rgba(255,255,255,.72);
  border-radius:14px; padding:13px 16px; margin:0 0 10px; font-size:15px; color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.hb-srch__near:disabled{opacity:.7; cursor:default}
/* OpenStreetMap tiles, desaturated so the map stays greyscale with the rating
   pills as the only colour: the interim while there is no basemap key.
   #map-main gets .is-osm from js/bt-map.js only on that path, so a keyed
   CARTO map (already grey) is never washed twice. */
#map-main.is-osm .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.06)}
/* "By area" on a treatment guide: the inbound links the treatment x county
   pages lost when the county chips were repointed at listings. Two classes
   deep: .bt-guide p is 0,1,1 and beats any single class. */
.bt-guide .bt-areas__list{list-style:none; margin:0; padding:0; columns:2; column-gap:34px}
.bt-guide .bt-areas__list li{break-inside:avoid; padding:7px 0; border-top:1px solid var(--line);
  font-size:14.5px; display:flex; justify-content:space-between; gap:12px}
.bt-guide .bt-areas__list li span{color:var(--muted); font-size:13px; white-space:nowrap}
@media (max-width:640px){ .bt-guide .bt-areas__list{columns:1} }

/* "Open now, until 18:00" under a card's meta lines. js/hb.js writes it from
   data-hours; the same colour family as a live signal elsewhere, never the
   accent, which means "act" on this site. */
.hb-open{display:block; font-size:13px; color:#2E7D4F; margin-top:2px}

/* ================================================= 6 Sep 2026: member page
   Order on a phone. Both columns flatten (display:contents) and the cards
   take their place from the pc-* class api/member-page.js puts on them:
   the next action first, then hours and the menu, then the rest. */
@media (max-width:1080px){
  /* align-items:stretch, explicitly: the desktop grid sets align-items:start
     and a flex column inherits it, which shrank every card to its content. */
  .prof{display:flex; flex-direction:column; align-items:stretch}
  .prof > div, .prof > .aside{display:contents}
  .prof .pcard{width:100%}
  .prof .pcard{order:50}
  .prof .pc-contact{order:1}
  .prof .pc-hours{order:2}
  .prof .pc-services{order:3}
  .prof .pc-bio{order:4}
  .prof .pc-photos{order:5}
  .prof .pc-team{order:6}
  .prof .pc-extras{order:7}
  .prof .pc-checks{order:8}
  .prof .pc-reviews{order:9}
  .prof .pc-links{order:10}
  .prof .pc-rec{order:11}
}
/* an empty module is one line, not a headed box */
.pcard--slim{padding:6px 22px}
.pcard--slim .rec__add{border-top:0; margin-top:0; padding-top:0}
.pcard--slim .rec__add > summary{padding:12px 0; font-weight:600; cursor:pointer; list-style:none}
.pcard--slim .rec__add > summary::-webkit-details-marker{display:none}
/* the sticky bar: the phone's next action never scrolls away */
.prof__bar{display:none}
@media (max-width:760px){
  .prof__bar{display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:35;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line)}
  .prof__bar a{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:48px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
    background:var(--card); border:1px solid var(--line); color:var(--ink)}
  .prof__bar a.is-main{background:var(--acc); color:var(--acc-on); border-color:var(--acc)}
  .prof__bar svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round}
  body:has(.prof__bar){padding-bottom:74px}
  .lb-on .prof__bar{display:none}
}
/* hero carousel: several photos, swipe, a counter. One photo renders as before. */
/* New badge: the Featured pill's shape, a quieter colour */
.hb-feat.hb-new{background:var(--ink); color:#fff}

/* FAQ on category and county pages: details/summary, one question per row.
   The editorial guides keep their own .bt-faq; this one lives on the browse
   pages and takes the card ground. */
.faq{display:grid; gap:8px}
.faq__i{background:var(--card); border-radius:var(--r-card); padding:0 22px}
.faq__i > summary{padding:16px 0; font-weight:600; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq__i > summary::-webkit-details-marker{display:none}
.faq__i > summary::after{content:"+"; color:var(--muted); font-weight:500; flex:none}
.faq__i[open] > summary::after{content:"\2212"}
.faq__i > p{margin:0 0 18px; color:var(--ink-2); font-size:15px; line-height:1.55}
.faq__i a{color:var(--acc-text)}

/* ---- dashboard notice box (my-profile showClaimed): one box, above the onboarding chips ---- */
.dnote{margin:16px 0 0; padding:14px 18px; border-radius:var(--r-panel); background:var(--acc-soft); font-size:14.5px; line-height:1.5}
.dnote b{display:block}
.dnote p{margin:6px 0 0}

/* ============================================== member page top (6 Sep 2026)
   The title ABOVE the photographs, Fresha's shape. Nothing is drawn over an
   image any more: a name across a portrait's face was the first thing wrong
   with every page that had a photograph. */
.prof__top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 0 18px}
.prof__title{display:flex; align-items:center; gap:16px; min-width:0}
.prof__title .prof__mark{width:64px; height:64px; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line);
  display:flex; align-items:center; justify-content:center; padding:8px}
.prof__title .prof__mark img{width:100%; height:100%; object-fit:contain; display:block}
.prof__title h1{font-size:clamp(28px,3.4vw,42px); letter-spacing:-.035em; line-height:1.06;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.prof__meta{margin:8px 0 0; font-size:14.5px; color:var(--muted); display:flex; flex-wrap:wrap;
  align-items:center; gap:4px 8px}
.prof__meta a{color:var(--acc-text); font-weight:600}
.prof__rate{display:inline-flex; align-items:center; gap:5px; color:var(--ink) !important; font-weight:600}
.prof__rate .bm{width:16px; height:16px}
.prof__rate i{display:inline-flex; gap:1px; font-style:normal}
.prof__rate i span{display:inline-flex; color:var(--line-2)}
.prof__rate i span.on{color:var(--star)}
.prof__rate i .hb-star{width:13px; height:13px; fill:currentColor}
.prof__rate small{font-weight:400; color:var(--muted); font-size:14px}
.prof__open{font-weight:600; color:var(--ink)}
.prof__open.is-open{color:#1a7f3c}
.prof__dot{color:var(--line-2)}
.prof__actions{display:flex; gap:10px; flex:none; padding-top:6px}
.prof__act, .prof__act.hb-save{position:relative; top:auto; right:auto; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--line); background:var(--card); display:grid;
  place-items:center; cursor:pointer; color:var(--ink); backdrop-filter:none; padding:0}
.prof__act svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7}
.prof__act.hb-save.is-on{background:var(--acc); border-color:var(--acc); color:var(--acc-on)}
.prof__act.is-done::after{content:"Link copied"; position:absolute; right:0; top:calc(100% + 8px);
  background:var(--ink); color:#fff; font-size:12px; padding:5px 9px; border-radius:8px; white-space:nowrap}
.prof__galw{position:relative; margin:0 0 4px}
.prof__gal{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px; height:clamp(340px,38vw,540px)}
.prof__gal img{width:100%; height:100%; object-fit:cover; border-radius:var(--r-panel); display:block;
  background:var(--deep); cursor:zoom-in}
.prof__gal__big{grid-row:span 2}
.prof__gal--1{grid-template-columns:1fr; grid-template-rows:1fr; height:clamp(300px,34vw,480px)}
.prof__gal--2{grid-template-rows:1fr; height:clamp(300px,34vw,460px)}
.prof__gal--2 .prof__gal__big{grid-row:auto}
/* img.prof__gal__more, not .prof__gal__more: `.prof__gal img{display:block}` is
   0,1,1 and beat the plain class, so the fourth photograph stayed visible at
   desktop, opened a third grid row and took the whole height with it. */
.prof__gal img.prof__gal__more{display:none}
.prof__gal__all{position:absolute; right:16px; bottom:16px; background:var(--card); color:var(--ink);
  border:0; box-shadow:0 8px 24px -10px rgba(0,0,0,.45)}
.prof__count{position:absolute; right:16px; top:16px; z-index:3; background:rgba(17,17,17,.62);
  color:#fff; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:var(--r-pill)}
.prof__galw .prof__count{display:none}
@media (max-width:760px){
  .prof__top{flex-direction:column; align-items:stretch; padding:14px 0 12px}
  .prof__title .prof__mark{width:52px; height:52px}
  .prof__actions{padding-top:0}
  .prof__galw{margin:0 calc(-1 * var(--gut)) 4px}
  /* A definite height, not an aspect ratio: a replaced element inside a flex
     row keeps its own ratio when the cross size is only implied, so a
     landscape photo sat short in the box with the ground showing above it. */
  .prof__gal, .prof__gal--1, .prof__gal--2{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:0; height:75vw; max-height:70vh}
  .prof__gal::-webkit-scrollbar{display:none}
  .prof__gal img{flex:0 0 100%; scroll-snap-align:start; border-radius:0; cursor:default}
  .prof__gal img.prof__gal__more{display:block}
  .prof__gal__all{display:none}
  .prof__galw .prof__count{display:block}
  .prof__bar a[data-track="booking"]{background:var(--ink); color:#fff; border-color:var(--ink)}
}

/* ---- footer on a phone: collapsible groups, two to a row, business full width (js/hb.js) ---- */
@media (max-width:760px){
  .hb-foot--acc .hb-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; padding:6px 0 16px}
  .hb-foot--acc .bt-footer__col{border-bottom:1px solid var(--line-2); min-width:0}
  .hb-foot--acc .bt-footer__col:nth-child(5){grid-column:1 / -1}
  .hb-foot--acc .bt-footer__col h4{margin:0; padding:15px 0; display:flex; align-items:center;
    justify-content:space-between; gap:10px; cursor:pointer; color:var(--ink-2); font-size:11.5px; user-select:none}
  .hb-foot--acc .bt-footer__col h4::after{content:""; flex:none; width:7px; height:7px; margin:0 5px 3px 0;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg);
    transition:transform .2s}
  .hb-foot--acc .bt-footer__col.is-open h4::after{transform:rotate(225deg); margin-bottom:-3px}
  .hb-foot--acc .bt-footer__col a{display:none; padding:6px 0}
  .hb-foot--acc .bt-footer__col.is-open a{display:block}
  .hb-foot--acc .bt-footer__col.is-open{padding-bottom:10px}
}

/* ---- compiled listing: one line at the foot of the page (api/member-page.js compiledLine) ---- */
.prof__compiled{font-size:13px; color:var(--muted); margin:26px 0 0; line-height:1.5}
.prof__compiled a{color:var(--acc-text); font-weight:600}
.prof__compiled span{color:var(--line-2); margin:0 4px}