/* VetPricer — design system. White, a little soft green, an 8px spacing scale, symmetric layouts.
   Type: "Plus Jakarta Sans" for headings, "Inter" for text and figures (tabular numerals). */
:root {
  --white: #ffffff; --tint: #f3f9f6; --tint-2: #e6f4ef; --tint-3: #cfe9dd;
  --blue: #1e8f5e; --blue-2: #17724b; --blue-3: #8fd1b3; --blue-ink: #0f3d2a;
  --ink: #1b2733; --ink-2: #4d5d6c; --ink-3: #7b8a99; --line: #dfe9e4; --line-2: #edf3f0;
  --a: #1f9d61; --b: #5fae3a; --c: #d9a21b; --d: #e2762a; --e: #d64545; --none: #9fb0c0;
  --a-bg: #e6f6ee; --b-bg: #edf6e6; --c-bg: #fdf4dc; --d-bg: #fdebde; --e-bg: #fbe5e5; --none-bg: #eef2f6;
  --r: 14px; --r-sm: 10px; --r-pill: 999px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --max: 1080px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow: 0 8px 30px rgba(15, 61, 42, .06);
}
* { box-sizing: border-box; }
html { font-family: var(--sans); color: var(--ink); background: var(--white); -webkit-text-size-adjust: 100%; font-feature-settings: "tnum" 1, "cv11" 1; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
a { color: var(--blue-2); text-decoration: none; }
a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 var(--s2); color: var(--ink); }
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0 0 var(--s2); }
small, .small { font-size: .875rem; color: var(--ink-3); line-height: 1.5; }
.muted { color: var(--ink-3); }
b, strong { font-weight: 600; }
img { max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: var(--s1); background: var(--white); padding: var(--s1) var(--s2); z-index: 100; border-radius: var(--r-sm); }
.skip:focus { left: var(--s1); }
button, input, select, textarea { font: inherit; }
::selection { background: var(--tint-3); }

/* ---------- tables */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; font-size: .94rem; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; background: var(--tint); border-bottom: 1px solid var(--line); }
tbody tr:hover td { background: var(--tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: var(--s3); }
.table-wrap table th:last-child, .table-wrap table td:last-child { padding-right: var(--s3); }
tr.me td { background: var(--tint-2) !important; }

/* ---------- header */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; justify-self: start; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-mark { width: 32px; height: 32px; }
.brand-word b { color: var(--blue); font-weight: 800; }
.site-nav { display: flex; gap: 4px; justify-self: center; }
.site-nav a { color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-pill); font-size: .93rem; font-weight: 500; white-space: nowrap; }
.site-nav a:hover { background: var(--tint-2); color: var(--blue-ink); text-decoration: none; }
.site-nav a.on { background: var(--tint-2); color: var(--blue-2); font-weight: 600; }
.header-search { display: flex; justify-self: end; position: relative; width: 240px; max-width: 100%; }
.header-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 42px 9px 16px; font-size: .92rem; background: var(--tint); color: var(--ink); transition: border-color .15s, background .15s; }
.header-search input:focus { outline: none; border-color: var(--blue-3); background: var(--white); box-shadow: 0 0 0 4px var(--tint-2); }
.header-search button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 34px; border: 0; background: transparent; color: var(--blue-2); border-radius: var(--r-pill); cursor: pointer; display: grid; place-items: center; }
.header-search button:hover { background: var(--tint-2); }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); z-index: 50; max-height: 360px; overflow: auto; display: none; }
.suggest.open { display: block; }
.suggest a { display: block; padding: 10px 14px; color: var(--ink); border-top: 1px solid var(--line-2); font-size: .92rem; }
.suggest a:first-child { border-top: 0; }
.suggest a:hover, .suggest a.active { background: var(--tint); text-decoration: none; }
.suggest .kind { float: right; font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.nav-toggle { display: none; }
@media (max-width: 1000px) {
  .site-header { position: static; }
  .header-inner { grid-template-columns: 1fr auto; height: auto; padding: 12px var(--s3); row-gap: 12px; }
  .site-nav { grid-column: 1 / -1; justify-self: stretch; }
  .header-search { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer; font-size: .9rem; }
  .nav-bars { width: 16px; height: 2px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); display: inline-block; }
  .js .site-nav { display: none; flex-direction: column; gap: 2px; }
  .js .site-nav.open { display: flex; }
  .site-nav a { padding: 10px 14px; }
}

/* ---------- masthead */
.masthead { background: var(--white); padding: var(--s5) 0 var(--s5); border-bottom: 1px solid var(--line); }
.masthead.hero { background: linear-gradient(180deg, var(--tint) 0%, var(--white) 100%); text-align: center; padding: var(--s7) 0 var(--s6); border-bottom: 0; }
.masthead.hero .standfirst, .masthead.hero .hero-search, .masthead.hero .stat-row { margin-left: auto; margin-right: auto; }
.masthead.hero .breadcrumb ol { justify-content: center; }
@media (max-width: 720px) { .masthead { padding: var(--s3) 0 var(--s4); } .masthead.hero { padding: var(--s4) 0 var(--s4); } .breadcrumb ol { margin-bottom: var(--s2); } .masthead h1 { margin-top: 4px; } }
.breadcrumb ol { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .82rem; color: var(--ink-3); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--blue-3); }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--blue-2); }
.kicker { font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--blue); margin: 0 0 var(--s2); }
.kicker a { color: var(--blue); }
.standfirst { font-size: 1.15rem; line-height: 1.65; color: var(--ink-2); max-width: 66ch; }
.standfirst strong { color: var(--ink); }
.mast-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s5); align-items: start; }
@media (max-width: 860px) { .mast-grid { grid-template-columns: 1fr; gap: var(--s4); } }
.addr { color: var(--ink-2); margin: 0 0 var(--s2); }
.badges { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 var(--s3); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 500; background: var(--tint-2); color: var(--blue-ink); }
.badge.yes { background: var(--a-bg); color: #126a3f; }
.badge.no { background: var(--e-bg); color: #9d2b2b; }
.badge.unknown { background: var(--none-bg); color: var(--ink-3); }
.badge.cqc-outstanding { background: #e3edff; color: #22418a; }
.badge.cqc-good { background: var(--a-bg); color: #126a3f; }
.badge.cqc-ri { background: var(--c-bg); color: #8a6400; }
.badge.cqc-inadequate { background: var(--e-bg); color: #9d2b2b; }
.badge.cqc-none { background: var(--none-bg); color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-pill); background: var(--blue); color: var(--white); font-weight: 600; border: 1px solid var(--blue); cursor: pointer; font-size: .95rem; transition: background .15s, border-color .15s, transform .1s; }
.btn:hover { background: var(--blue-2); border-color: var(--blue-2); color: var(--white); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--white); color: var(--blue-2); border-color: var(--line); }
.btn.secondary:hover { background: var(--tint); border-color: var(--blue-3); color: var(--blue-ink); }
.btn.big { padding: 15px 28px; font-size: 1.02rem; }

/* ---------- score panel */
.score-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3); display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s2); box-shadow: var(--shadow); }
.score-meta { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.score-meta > b { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--ink); margin-bottom: 4px; }
.score-meta .rank { display: block; margin-top: 6px; }
.ring { position: relative; }
.ring svg { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--tint-2); stroke-width: 9; }
.ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring.grade-a .ring-fg { stroke: var(--a); } .ring.grade-b .ring-fg { stroke: var(--b); } .ring.grade-c .ring-fg { stroke: var(--c); } .ring.grade-d .ring-fg { stroke: var(--d); } .ring.grade-e .ring-fg { stroke: var(--e); }
.ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-family: var(--display); font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.ring-grade { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-top: 6px; }
.pill { display: inline-block; min-width: 2.2em; text-align: center; padding: 3px 9px; border-radius: var(--r-sm); font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; }
.pill.grade-a { background: var(--a-bg); color: #126a3f; } .pill.grade-b { background: var(--b-bg); color: #3d7a1c; } .pill.grade-c { background: var(--c-bg); color: #8a6400; } .pill.grade-d { background: var(--d-bg); color: #a54a0d; } .pill.grade-e { background: var(--e-bg); color: #9d2b2b; } .pill.grade-none { background: var(--none-bg); color: var(--ink-3); }
.score-num { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- sections, cards, figures */
section.block { padding: var(--s6) 0; }
section.block + section.block { border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.section-head p { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--s2); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.card h3 { margin-bottom: var(--s2); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.figure { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); }
.figure-value { display: block; font-family: var(--display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.figure-label { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
.figure-sub { display: block; font-size: .78rem; margin-top: 4px; font-weight: 500; }
.better { color: var(--a); } .worse { color: var(--e); } .same { color: var(--ink-3); } .up { color: var(--a); } .down { color: var(--e); } .flat { color: var(--ink-3); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 800px) { .two-col, .three-col { grid-template-columns: 1fr; } }

/* ---------- bars and distributions */
.bar { position: relative; height: 8px; background: var(--tint-2); border-radius: var(--r-pill); }
.bar-fill { height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.bar.grade-a .bar-fill { background: var(--a); } .bar.grade-b .bar-fill { background: var(--b); } .bar.grade-c .bar-fill { background: var(--c); } .bar.grade-d .bar-fill { background: var(--d); } .bar.grade-e .bar-fill { background: var(--e); }
.bar-tick { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); opacity: .5; border-radius: 2px; }
.metric-list { list-style: none; margin: 0; padding: 0; }
.metric-list li { display: grid; grid-template-columns: 1fr 56px; gap: 10px var(--s2); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.metric-list li:last-child { border-bottom: 0; }
.metric-list .bar { grid-column: 1 / -1; }
.metric-list .lbl { font-size: .93rem; color: var(--ink); }
.metric-list .lbl small { color: var(--ink-3); }
.metric-list .val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stack { display: flex; height: 18px; border-radius: var(--r-sm); overflow: hidden; background: var(--tint-2); margin: 10px 0 8px; gap: 2px; }
.stack-seg { display: block; height: 100%; }
.stack-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--ink-2); }
.stack-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.pos1, i.pos1 { background: #1f9d61; } .pos2, i.pos2 { background: #8ccf9a; } .pos3, i.pos3 { background: #c4e6c6; }
.neg1, i.neg1 { background: #f0cf7a; } .neg2, i.neg2 { background: #f3a173; } .neg3, i.neg3 { background: #e06868; } .neg4, i.neg4 { background: #c3cdd7; }
.mini-hist-wrap { padding: var(--s2) 0 var(--s3); }
.mini-hist { display: flex; align-items: flex-end; gap: var(--s2); height: 72px; }
.mini-hist div { flex: 1; background: var(--blue-3); border-radius: 6px 6px 0 0; position: relative; min-height: 4px; }
.mini-hist div:last-child { background: var(--blue); }
.mini-hist div span { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-size: .78rem; font-weight: 600; padding-bottom: 4px; }
.mini-hist div em { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: .74rem; font-style: normal; color: var(--ink-3); padding-top: 6px; }
.agebars { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: var(--s1); align-items: end; height: 120px; }
.agebars div { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; font-size: .72rem; text-align: center; color: var(--ink-3); }
.agebars i { display: block; background: var(--blue-3); border-radius: 6px 6px 0 0; margin: 4px 6px; }
.agebars b { color: var(--ink); font-weight: 600; }

/* ---------- ranked tables */
.rank-table td.n { color: var(--ink-3); font-variant-numeric: tabular-nums; width: 3em; }
.rank-table td.name { min-width: 200px; }
.rank-table th, .rank-table td { padding-left: 12px; padding-right: 12px; }
.rank-table .name a { font-weight: 600; color: var(--ink); }
.rank-table .name a:hover { color: var(--blue-2); }
.rank-table .name small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 2px; }
.rank-table th[data-sort] { cursor: pointer; user-select: none; }
.rank-table th[data-sort]:hover { color: var(--blue-2); }
.rank-table th.sorted { color: var(--blue-2); }
.rank-table th.sorted::after { content: " ↓"; }
.rank-table th.sorted.asc::after { content: " ↑"; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 0; align-items: center; }
.filters a, .filters span.chip { padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); font-size: .84rem; color: var(--ink-2); font-weight: 500; }
.filters a:hover { border-color: var(--blue-3); color: var(--blue-2); text-decoration: none; }
.filters a.on { background: var(--blue); color: var(--white); border-color: var(--blue); }
.filters.letters { gap: 6px; margin-bottom: var(--s4); }
.filters.letters a { min-width: 36px; padding: 6px 0; text-align: center; }

/* ---------- map */
.map { height: 400px; border-radius: var(--r); border: 1px solid var(--line); background: var(--tint); margin: var(--s2) 0; overflow: hidden; }
.map:empty::before { content: "Map loads with JavaScript"; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-3); }
.leaflet-popup-content { font-family: var(--sans); font-size: .9rem; }
.leaflet-popup-content-wrapper { border-radius: var(--r-sm); }
.marker-pin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: .72rem; font-weight: 700; font-family: var(--sans); }

/* ---------- link lists and cards */
.link-grid { columns: 3; column-gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.link-grid li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: var(--s2); }
.link-grid li a { color: var(--ink); }
.link-grid li a:hover { color: var(--blue-2); }
.link-grid li small { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .link-grid { columns: 2; } }
@media (max-width: 500px) { .link-grid { columns: 1; } }
.area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--s2); }
.area-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); color: var(--ink); transition: border-color .15s, transform .15s; }
.area-card:hover { border-color: var(--blue-3); text-decoration: none; color: var(--ink); transform: translateY(-2px); }
.area-card b { display: block; font-family: var(--display); font-size: 1rem; margin-bottom: 4px; }
.area-card span { display: block; font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.practice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--s2); }
.practice-card { display: grid; grid-template-columns: 52px 1fr; gap: var(--s2); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2); color: var(--ink); transition: border-color .15s, transform .15s; align-items: start; }
.practice-card:hover { border-color: var(--blue-3); text-decoration: none; color: var(--ink); transform: translateY(-2px); }
.practice-card .sc { font-family: var(--display); font-size: 1.25rem; font-weight: 800; text-align: center; border-radius: var(--r-sm); padding: 10px 0; }
.practice-card .sc.grade-a { background: var(--a-bg); color: #126a3f; } .practice-card .sc.grade-b { background: var(--b-bg); color: #3d7a1c; } .practice-card .sc.grade-c { background: var(--c-bg); color: #8a6400; } .practice-card .sc.grade-d { background: var(--d-bg); color: #a54a0d; } .practice-card .sc.grade-e { background: var(--e-bg); color: #9d2b2b; } .practice-card .sc.grade-none { background: var(--none-bg); color: var(--ink-3); }
.practice-card b { display: block; font-weight: 600; margin-bottom: 2px; }
.practice-card small { color: var(--ink-3); display: block; }

/* ---------- opening hours, facilities */
.hours { width: auto; }
.hours td { padding: 7px 18px 7px 0; border: 0; font-size: .95rem; }
.hours td.closed { color: var(--ink-3); }
.hours tr.today td { font-weight: 600; color: var(--ink); }
.hours tr.today td.closed { color: var(--ink-2); }
.hours tr.today td:first-child::after { content: " (today)"; font-weight: 400; color: var(--ink-3); }
.hours tbody tr:hover td { background: transparent; }
.facilities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.facilities li { background: var(--tint-2); color: var(--blue-ink); border-radius: var(--r-pill); padding: 5px 12px; font-size: .82rem; }

/* ---------- faq, callouts, prose */
details { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); padding: 0 var(--s3); margin-bottom: var(--s1); }
details[open] { border-color: var(--blue-3); }
summary { cursor: pointer; padding: var(--s2) 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--blue); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { padding-bottom: var(--s2); color: var(--ink-2); }
.note { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); font-size: .92rem; }
.note.info { background: var(--tint-2); border-color: var(--blue-3); }
.prose { max-width: 74ch; }
.wrap.prose { max-width: var(--max); }
.wrap.prose > * { max-width: 74ch; }
.prose table { table-layout: fixed; }
.prose table th:nth-child(2) { width: 34%; }
.prose table th.num { width: 80px; }
.prose .grade-key > div { padding: var(--s2) var(--s1); }
.prose .grade-key b { font-size: .92rem; }
.rank-table.cols { table-layout: fixed; }
.rank-table.cols th:first-child { width: 48px; }
.rank-table.cols th.num { width: 150px; }
.prose h2 { margin-top: var(--s4); }
.prose > h2:first-child { margin-top: 0; }
.prose li { margin-bottom: .5em; }
.prose table { margin: var(--s2) 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sources { font-size: .84rem; color: var(--ink-3); line-height: 1.6; }
.sources p { max-width: 80ch; margin: 0; }
section.block.sources-block { padding: var(--s4) 0; }
.sources a { color: var(--ink-2); }

/* ---------- home */
.hero-search { display: flex; max-width: 560px; margin: var(--s4) 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); padding: 6px; box-shadow: var(--shadow); }
.hero-search input { flex: 1; min-width: 0; padding: 12px 18px; border: 0; background: transparent; font-size: 1.02rem; color: var(--ink); }
.hero-search input:focus { outline: none; }
.hero-search button { flex-shrink: 0; }
@media (max-width: 560px) { .hero-search { flex-direction: column; border-radius: var(--r); padding: var(--s1); gap: var(--s1); } .hero-search input { padding: 12px 14px; } .hero-search button { width: 100%; } .hero-search input[type=text] { border-radius: var(--r-sm); } }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3) var(--s3); margin: var(--s5) 0 0; max-width: 940px; }
.stat-row div { text-align: center; padding: var(--s2) var(--s1); border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.stat-row div b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.stat-row div span { font-size: .82rem; color: var(--ink-3); }
.grade-dist { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; margin: var(--s2) 0; gap: 2px; }
.grade-dist span { display: block; }
.grade-dist .grade-a { background: var(--a); } .grade-dist .grade-b { background: var(--b); } .grade-dist .grade-c { background: var(--c); } .grade-dist .grade-d { background: var(--d); } .grade-dist .grade-e { background: var(--e); }

/* ---------- forms */
input[type=text], input[type=email], input[type=search], textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); }
input[type=text]:focus, input[type=email]:focus, input[type=search]:focus, textarea:focus { outline: none; border-color: var(--blue-3); box-shadow: 0 0 0 4px var(--tint-2); }
.header-search input[type=search], .hero-search input[type=text] { box-shadow: none; }

/* ---------- footer */
.site-footer { background: var(--tint); border-top: 1px solid var(--line); margin-top: 0; padding: var(--s6) 0 var(--s4); font-size: .92rem; color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s5); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s4); } }
.site-footer a { color: var(--ink-2); display: block; margin: 6px 0; }
.site-footer a:hover { color: var(--blue-2); }
.footer-brand { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.footer-brand b { color: var(--blue); font-weight: 800; }
.footer-head { font-weight: 600; color: var(--ink); margin-bottom: var(--s2); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.nhs-attribution { display: inline-block; margin: var(--s2) 0 0; line-height: 0; }
.nhs-attribution img { width: 255px; height: auto; max-width: 100%; }
.footer-legal p { border-top: 1px solid var(--line); margin: var(--s5) 0 0; padding-top: var(--s3); font-size: .8rem; color: var(--ink-3); text-align: center; }
/* the legal block runs to three paragraphs: rule above the first only, and its links sit inline rather than
   inheriting the stacked .site-footer a { display: block } used by the link columns */
.footer-legal p + p { border-top: 0; margin-top: var(--s2); padding-top: 0; }
.footer-legal a { display: inline; margin: 0; }
.footer-links a { white-space: nowrap; }
.footer-links span { color: var(--line-2); margin: 0 6px; }
@media print { .site-header, .site-footer, .map, .actions { display: none; } }

/* ---------- v2 additions: simple stats, plain tables, contact list */
.stat-card { text-align: center; padding: var(--s4) var(--s3); display: flex; flex-direction: column; justify-content: center; }
.two-col.breakdown { align-items: stretch; }
.two-col.fit { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.stat-big { font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 var(--s1); color: var(--ink); }
.stat-what { font-size: 1rem; color: var(--ink-2); margin: 0 0 var(--s1); }
.stat-cmp { font-size: .84rem; margin: 0; color: var(--ink-3); }
.stat-cmp.better { color: var(--a); } .stat-cmp.worse { color: var(--e); }
.simple { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.simple:last-child { border-bottom: 0; }
.simple-row { display: flex; justify-content: space-between; gap: var(--s2); align-items: baseline; margin-bottom: 8px; }
.simple-caption { font-size: .93rem; color: var(--ink-2); }
.simple-val { font-variant-numeric: tabular-nums; font-size: 1rem; }
.simple-bar .bar-fill { background: var(--blue); }
table.plain th, table.plain td { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
table.plain tr:last-child td { border-bottom: 0; }
table.plain tbody tr:hover td { background: transparent; }
.survey-facts { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.survey-facts li { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.survey-facts li b { display: block; font-weight: 600; }
.survey-facts li small { color: var(--ink-3); }
.survey { margin-top: var(--s2); }
.survey-progress { height: 6px; background: var(--tint-2); border-radius: 3px; margin-bottom: var(--s2); overflow: hidden; }
.survey-progress span { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .25s; }
.survey-peek { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.survey-peek summary { cursor: pointer; color: var(--ink-3); font-size: .9rem; }
.survey-peek[hidden] { display: none; }
.survey-text { font-weight: 600; margin: 0 0 10px; }
.survey-n { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.survey-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-2); text-decoration: underline; cursor: pointer; }
.chip { padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--blue-3); color: var(--blue-2); }
.chip.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.review { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.review-head { margin: 0 0 4px; font-size: .9rem; }
.review-body { margin: 0; white-space: pre-line; }
.stars { color: #d9a400; letter-spacing: 1px; }
.review-form { margin-top: var(--s2); }
.review-form summary { cursor: pointer; font-weight: 600; color: var(--blue-2); padding: 8px 0; }
.review-form form { margin-top: var(--s2); }
.form-label { display: block; font-weight: 600; margin-bottom: 6px; }
.rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating label { font-size: 1.9rem; color: var(--line); cursor: pointer; line-height: 1; }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: #d9a400; }
.form select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: var(--white); color: var(--ink); }
.form label { display: block; font-weight: 600; margin-bottom: 6px; }
.form input[type=text], .form input[type=email], .form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); font: inherit; color: var(--ink); background: var(--white); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--blue-3); outline-offset: 1px; border-color: var(--blue); }
.form p { margin: 0 0 var(--s2); }
.contact-list { display: grid; grid-template-columns: 96px 1fr; gap: 8px var(--s2); margin: var(--s3) 0; font-size: .95rem; }
.contact-list dt { color: var(--ink-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; padding-top: 3px; }
.contact-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.two-col > *, .three-col > *, .mast-grid > * { min-width: 0; }
@media (max-width: 720px) {
  /* one line that scrolls sideways, edge to edge, no scrollbar */
  .breadcrumb { margin: 0 calc(-1 * var(--s3)); padding: 0 var(--s3); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb ol { flex-wrap: nowrap; white-space: nowrap; width: max-content; padding-right: 40px; }
  .breadcrumb li { overflow-wrap: normal; }
  .masthead.hero .breadcrumb ol { justify-content: flex-start; }
}
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 480px) { .contact-list { grid-template-columns: 1fr; gap: 2px var(--s2); } .contact-list dt { padding-top: 10px; } .contact-list dt:first-child { padding-top: 0; } }
details.wide { padding: 0 var(--s3); }
details.wide summary { color: var(--blue-2); }
.survey-table th[colspan] { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink); background: var(--tint-2); }
.grade-key { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.grade-key > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s2); }
.grade-key .pill { font-family: var(--display); font-size: 1.1rem; padding: 6px 0; width: 40px; border-radius: 10px; }
.grade-key b { font-weight: 600; white-space: nowrap; }
.grade-key span:last-child { font-size: .82rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 720px) { .grade-key { grid-template-columns: 1fr; gap: var(--s1); } .grade-key > div { flex-direction: row; text-align: left; gap: 12px; padding: 10px 14px; } .grade-key .pill { width: 36px; font-size: 1rem; padding: 4px 0; } .grade-key span:last-child { margin-left: auto; } }
.hero-search input[type=text] { border: 0; box-shadow: none; border-radius: var(--r-pill); }
.stat-row div span a { color: inherit; text-decoration: underline; text-decoration-color: var(--blue-3); text-underline-offset: 3px; }
.stat-row div span a:hover { color: var(--blue-2); }

.area-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.area-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .area-cards.cols-3, .area-cards.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .area-cards.cols-3, .area-cards.cols-4 { grid-template-columns: 1fr; } }
table.plain th { background: transparent; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
table.plain { table-layout: fixed; }
table.plain th.num, table.plain td.num { width: 76px; }
table.plain td.num .badge { white-space: nowrap; }
table.plain.labels { table-layout: auto; }
table.plain.labels td.num { width: 1%; }
table.plain td.num, table.plain th.num { padding-left: 12px; }
@media (max-width: 480px) { table.plain th.num, table.plain td.num { width: 58px; padding-left: 8px; } .rank-table td.name { min-width: 160px; } }
.map-col { display: flex; flex-direction: column; }
.map-col .map { flex: 1; min-height: 400px; margin-bottom: 0; }
.area-cards.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .area-cards.cols-5 { grid-template-columns: repeat(2, 1fr); } }
th { white-space: nowrap; }
.badge { white-space: nowrap; }

/* ---------- VetPricer additions: prices, bands, compliance, countdown */
.price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.price.from::before { content: "from "; font-weight: 400; color: var(--ink-3); font-size: .82em; }
td.price-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.price-cell .sub, .price .sub { display: block; font-size: .74rem; color: var(--ink-3); font-weight: 400; }
.rank-table td.price-cell.better { color: #126a3f; } .rank-table td.price-cell.worse { color: #9d2b2b; }
.badge.grp { background: var(--tint-2); color: var(--blue-ink); }
.badge.indep { background: #eef2f6; color: #3b4a58; }
.badge.charity { background: #fdf4dc; color: #8a6400; }
.rangebar { position: relative; height: 8px; background: var(--tint-2); border-radius: var(--r-pill); margin: 8px 0 4px; }
.rangebar .rb-med { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink-3); border-radius: 2px; margin-left: -1px; }
.rangebar .rb-val { position: absolute; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.25); margin-left: -8px; }
.rangebar-legend { display: flex; justify-content: space-between; font-size: .74rem; color: var(--ink-3); }
.price-grid th.band { text-align: right; white-space: nowrap; }
.price-grid th.band small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .7rem; }
.price-grid tr.cat td { background: var(--tint); font-weight: 700; font-family: var(--display); color: var(--blue-ink); font-size: .9rem; padding-top: 14px; }
.price-grid td.svc { min-width: 200px; }
.price-grid td.svc small { display: block; color: var(--ink-3); font-size: .78rem; line-height: 1.4; margin-top: 2px; }
.price-grid td.svc a { color: var(--ink); font-weight: 500; }
.price-grid td.svc a:hover { color: var(--blue-2); }
.price-grid td.na { color: var(--line); text-align: right; }
.price-grid td.price-cell.better .price { color: #126a3f; } .price-grid td.price-cell.worse .price { color: #9d2b2b; }
.price-grid tr.missing td { color: var(--ink-3); }
.price-grid tr.missing td.svc a { color: var(--ink-3); }
.incl { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.incl span { font-size: .68rem; background: var(--tint-2); color: var(--blue-ink); border-radius: 6px; padding: 1px 6px; }
.band-switch { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0; }
.band-switch a, .band-switch span { padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); font-size: .84rem; color: var(--ink-2); font-weight: 500; }
.band-switch a:hover { border-color: var(--blue-3); color: var(--blue-2); text-decoration: none; }
.band-switch a.on, .band-switch span.on { background: var(--blue); color: var(--white); border-color: var(--blue); }
.band-switch small { color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.countdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s2); }
.countdown div { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); }
.countdown b { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--blue-ink); line-height: 1.1; }
.countdown b.past { color: var(--e); }
.countdown span { display: block; font-size: .84rem; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.compliance-bar { height: 10px; background: var(--tint-2); border-radius: var(--r-pill); overflow: hidden; min-width: 90px; }
.compliance-bar i { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.hist { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin: var(--s2) 0 var(--s1); }
.hist div { flex: 1; background: var(--blue-3); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; }
.hist div.me { background: var(--blue); }
.hist div span { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: .66rem; color: var(--ink-3); padding-top: 4px; white-space: nowrap; }
.hist-wrap { padding-bottom: var(--s3); }
.stat-row.prices div b { font-size: 1.5rem; }
.stat-row.prices div b small { font-size: .8rem; color: var(--ink-3); font-weight: 400; }
.service-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s2); }
.service-card { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); color: var(--ink); transition: border-color .15s, transform .15s; }
.service-card:hover { border-color: var(--blue-3); text-decoration: none; color: var(--ink); transform: translateY(-2px); }
.service-card b { display: block; font-family: var(--display); font-size: .98rem; margin-bottom: 4px; }
.service-card .price { font-size: 1.25rem; color: var(--blue-ink); }
.service-card span { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.5; }
.hero-photo { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--tint-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-credit { font-size: .7rem; color: var(--ink-3); margin-top: 4px; }
.masthead.hero .wrap.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: center; text-align: left; }
.masthead.hero .hero-grid .standfirst, .masthead.hero .hero-grid .hero-search { margin-left: 0; }
@media (max-width: 860px) { .masthead.hero .wrap.hero-grid { grid-template-columns: 1fr; } .hero-photo { max-height: 240px; aspect-ratio: auto; } }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px var(--s2); font-size: .93rem; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
@media (max-width: 480px) { .kv { grid-template-columns: 1fr; } }
.changes li { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: .92rem; }
.changes li:last-child { border-bottom: 0; }
.changes .up { color: var(--e); } .changes .down { color: var(--a); }
.tbl-note { font-size: .82rem; color: var(--ink-3); margin-top: 8px; }
.list-status { font-size: .8rem; }
.list-status.yes { color: #126a3f; } .list-status.no { color: #9d2b2b; } .list-status.unknown { color: var(--ink-3); }
.affiliate { background: var(--tint); border: 1px dashed var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); font-size: .9rem; color: var(--ink-2); }
.pill.n { background: var(--tint-2); color: var(--blue-ink); }

/* ---------- clarity pass: one system for figures, cards, chips and tables */
.figures { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.figure { display: flex; flex-direction: column; gap: 4px; min-height: 108px; }
.figure-value { font-size: 1.85rem; color: var(--ink) !important; }
.figure-label { color: var(--ink-2); font-size: .86rem; font-weight: 500; margin-top: 2px; }
.figure-sub { color: var(--ink-3); font-weight: 400; font-size: .78rem; margin-top: auto; }
.stat-row.prices { grid-template-columns: repeat(6, 1fr); gap: var(--s2); max-width: none; }
@media (max-width: 900px) { .stat-row.prices { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .stat-row.prices { grid-template-columns: repeat(2, 1fr); } }
.stat-row.prices div { display: flex; flex-direction: column; justify-content: flex-start; min-height: 116px; padding: var(--s2) 10px; }
.stat-row.prices div b { font-size: 1.6rem; }
.stat-row.prices div span { display: block; margin-top: 4px; line-height: 1.35; }
.stat-row.prices div span a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .84rem; }
.stat-row.prices div span small { display: block; color: var(--ink-3); font-size: .74rem; margin-top: 2px; }
.countdown { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .countdown { grid-template-columns: 1fr; } }
.countdown div { display: flex; flex-direction: column; }
.countdown span { color: var(--ink-2); }
.countdown small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: auto; padding-top: 6px; }
.vs { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.vs.better { background: var(--a-bg); color: #126a3f; } .vs.worse { background: var(--e-bg); color: #9d2b2b; } .vs.same { background: var(--none-bg); color: var(--ink-2); }
td.vs-cell { text-align: right; white-space: nowrap; }
.rank-table td.price-cell.better, .rank-table td.price-cell.worse { color: var(--ink); }   /* prices stay black; only the vs chips carry colour */
.price-grid td.price-cell.better .price, .price-grid td.price-cell.worse .price { color: var(--ink); }
.rank-table .name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.rank-table td.price-cell, .rank-table td.num { white-space: nowrap; }
.rank-table th, .rank-table td { padding-top: 10px; padding-bottom: 10px; }
.figure-value.better, .figure-value.worse, .figure-value.same { color: var(--ink); }
.area-card { display: flex; flex-direction: column; gap: 2px; min-height: 96px; }
.area-card b { margin-bottom: 2px; }
.area-card .n { color: var(--ink-2); }
.area-card .price-line { margin-top: auto; color: var(--ink); font-weight: 500; }
.service-card { display: flex; flex-direction: column; min-height: 118px; }
.service-card .price { margin-top: 2px; }
.service-card span:last-child { margin-top: auto; }
.explain { font-size: .84rem; color: var(--ink-3); margin: var(--s2) 0 0; }
.explain b { color: var(--ink-2); font-weight: 600; }
.key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: .8rem; color: var(--ink-3); margin-top: var(--s1); }
.key .vs { font-size: .7rem; }
/* practice price list, simplified: one row per service, bands written out in the cell */
.plist td.svc { width: 34%; }
.plist td.price-cell { text-align: left; }
.plist .bands { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: .9rem; }
.plist .bands b { font-weight: 600; font-variant-numeric: tabular-nums; }
.plist .bands span { color: var(--ink-3); }
.plist .bands .detail { grid-column: 1 / -1; color: var(--ink-3); font-size: .78rem; }
.plist td.uk { text-align: right; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plist tr.missing td { color: var(--ink-3); }
.plist tr.missing td.svc a { color: var(--ink-3); }
.plist tr.cat td { background: var(--tint); font-weight: 700; font-family: var(--display); color: var(--blue-ink); font-size: .9rem; padding-top: 14px; }
.plist td.svc a { color: var(--ink); font-weight: 500; }
.plist td.svc small { display: block; color: var(--ink-3); font-size: .78rem; line-height: 1.4; margin-top: 2px; }
td.num { white-space: nowrap; }
.rank-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.badges .badge { height: 30px; }
.figure-vs { margin-top: 6px; }
.figure-sub { margin-top: auto; }
.figure .figure-vs .vs { font-size: .72rem; }
.figures.figures-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .figures.figures-3 { grid-template-columns: 1fr; } }
.rank-table td.share { min-width: 150px; }
.rank-table td.share .compliance-bar { margin-top: 4px; }
.rank-table td.share b { font-variant-numeric: tabular-nums; }
h3.letter { font-family: var(--display); font-size: 1.1rem; color: var(--blue-ink); margin: var(--s4) 0 var(--s1); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.link-grid li small { color: var(--ink-3); }
table.plain th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
@media (max-width: 640px) { .two-col > div { min-width: 0; } table.plain { table-layout: auto; } table.plain td.num, table.plain th.num { padding-left: 6px; padding-right: 6px; } }

/* ---------------------------------------------------------------- enrichment: ratings, hours, ticks */
.stars { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.stars b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.stars i { font-style: normal; color: #e8a33d; letter-spacing: 1px; }
.stars small { color: var(--ink-3); }
.starbars { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin-top: var(--s2); }
.sb-row { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 10px; font-size: .82rem; color: var(--ink-3); }
.sb-track { height: 10px; background: var(--tint-2); border-radius: var(--r-pill); overflow: hidden; }
.sb-track i { display: block; height: 100%; background: #e8a33d; border-radius: var(--r-pill); }
.sb-pct { text-align: right; font-variant-numeric: tabular-nums; }
table.hours { border-collapse: collapse; width: 100%; max-width: 230px; }
table.hours th { background: none; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink-3); text-align: left; padding: 1px 10px 1px 0; border: 0; font-weight: 500; }
table.hours td { padding: 1px 0; border: 0; font-size: .82rem; font-variant-numeric: tabular-nums; }
ul.ticks { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.ticks li { padding-left: 24px; position: relative; font-size: .9rem; color: var(--ink-2); }
ul.ticks li::before { position: absolute; left: 0; top: -1px; font-weight: 700; }
ul.ticks li.y::before { content: "✓"; color: #1e8f5e; }
ul.ticks li.n::before { content: "×"; color: #b9424a; }
ul.ticks li.part::before { content: "–"; color: var(--ink-3); }
ul.ticks li.n { color: var(--ink-3); }
.figures.figures-1 { grid-template-columns: minmax(0, 260px); }
.kv dd .stars { margin-right: 6px; }
ul.changes li { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: .9rem; }
ul.changes li .up b { color: var(--ink); }
ul.changes li .down b { color: var(--ink); }
.area-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .area-cards.cols-3 { grid-template-columns: 1fr; } }
.area-card.wide { min-height: 104px; }
.area-card.wide b { font-size: 1.02rem; }

/* ---------------------------------------------------------------- practice price list: one line per pet, figures aligned */
.plist td.price-cell { text-align: left; width: 29%; vertical-align: top; }
.plist td, .plist th { vertical-align: top; }
.plist .plines { display: flex; flex-direction: column; gap: 0; }
.plist .plines { align-items: flex-end; }
.plist .pl { display: grid; grid-template-columns: 104px 76px; align-items: baseline; justify-content: end; gap: 0 var(--s2);
             min-height: 25px; padding: 1px 0; border-bottom: 1px dotted var(--line-2); width: 100%; }
.plist .pl:last-of-type { border-bottom: 0; }
.plist .plines .pl:only-child { border-bottom: 0; }
.plist .pl .k { color: var(--ink-3); font-size: .84rem; text-align: right; }
.plist .pl .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.plist .incl { display: block; color: var(--ink-3); font-size: .78rem; line-height: 1.45; margin-top: 6px; }
.plist td.uk { text-align: right; white-space: nowrap; }
.plist td.uk b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.plist td.uk small { display: block; color: var(--ink-3); font-size: .74rem; margin-top: 1px; }
.plist td.vs-cell { vertical-align: top; }
.plist tbody tr { border-bottom: 1px solid var(--line-2); }
.plist tbody tr.cat { border-bottom: 0; }
@media (max-width: 640px) { .plist td.price-cell { width: auto; } .plist .pl .k { font-size: .8rem; } }
.plist .plines { margin-left: auto; width: max-content; min-width: 190px; }
@media (max-width: 640px) { .plist .pl { grid-template-columns: 1fr auto; } .plist .plines { min-width: 0; width: 100%; } }
/* On a phone the four-column price list cannot fit, and the difference chip already says how it compares
   with the UK ("£77 below UK"), so the UK column and the service's second line stand down. */
@media (max-width: 700px) {
  .plist .uk { display: none; }
  .plist td.svc small { display: none; }
  .plist th, .plist td { padding-left: 8px; padding-right: 8px; }
  .plist td.price-cell { width: auto; }
}
/* the phone layout wins over the desktop grid widths above, so the price list fits 375px without sideways scrolling */
@media (max-width: 700px) {
  .plist .plines { width: 100%; min-width: 0; margin-left: 0; }
  .plist .pl { grid-template-columns: 1fr auto; width: auto; }
  .plist td.svc { width: auto; }
  .plist .vs { font-size: .68rem; padding: 2px 6px; }
  .plist td.vs-cell { white-space: normal; }
  .price-grid td.svc { min-width: 140px; }   /* the treatment column is the widest thing left; the table still scrolls a little, as every wide table here does */
}

/* ---------------------------------------------------------------- price list, final layout
   The block is a fixed width anchored to the left of its column, labels left and figures right, so every figure ends on
   the same pixel down the whole table while the "Includes ..." note still reads as left-aligned prose. No hairlines
   inside a cell: the space does the work and the solid rule between treatments is the only line. */
.plist .plines { width: 196px; min-width: 0; margin-left: 0; margin-right: auto; display: block; }
.plist .pl { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--s2);
             min-height: 0; padding: 0; border-bottom: 0; width: 196px; line-height: 1.75; }
.plist .pl .k { text-align: left; color: var(--ink-3); font-size: .84rem; }
.plist .pl .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.1px; }
.plist .incl { text-align: left; margin-top: 4px; max-width: 260px; }
.plist td.price-cell { width: 24%; }
.price-grid td.svc { min-width: 180px; }
@media (max-width: 700px) {
  .plist .plines, .plist .pl { width: 100%; }
  .plist .incl { max-width: none; }
  .price-grid td.svc { min-width: 120px; }
}
.plist .pl .v { max-width: 118px; overflow-wrap: normal; }

/* ---------------------------------------------------------------- practice page: a quiet hero, detail lower down
   The masthead had grown into a two-column form: owner, website, reviews, company, seven rows of opening hours and the
   area, all competing with the name. It is one column again - name, address, one line of facts, one sentence, the
   actions - and everything else moved into the About section below the price list. */
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); margin: var(--s2) 0 0; color: var(--ink-2); font-size: .9rem; }
.facts > span { display: inline-flex; align-items: center; gap: 6px; }
.facts > span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line); margin-right: var(--s1); }
.facts .stars b { font-size: .95rem; }
.facts .stars i { font-size: .85rem; }
.facts .stars small { display: none; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: var(--s4); } }
.about-grid h3 { font-size: .95rem; margin: 0 0 var(--s2); color: var(--blue-ink); }
.kv.slim { grid-template-columns: 116px 1fr; gap: 7px var(--s2); font-size: .89rem; }
.kv.slim dt { font-size: .84rem; }
table.hours.wide { max-width: none; width: 100%; }
table.hours.wide th { width: 96px; font-size: .84rem; color: var(--ink-3); }
table.hours.wide td { font-size: .89rem; padding: 2px 0; }
table.hours.wide tr.today th, table.hours.wide tr.today td { color: var(--ink); font-weight: 600; }
ul.plain-list { list-style: none; margin: 0; padding: 0; font-size: .89rem; color: var(--ink-2); }
ul.plain-list li { padding: 2px 0; }

/* ---------------------------------------------------------------- home page: lists, not walls of cards
   Twenty-four town cards, twenty-one treatment cards and nine group cards read as clutter however tidy each card is.
   The same facts sit in quiet hairline lists; the cards are kept for the handful of figures people came for. */
.link-grid.cols-4 { columns: 4; }
.link-grid.cols-3 { columns: 3; }
.link-grid li { padding: 7px 0; align-items: baseline; }
.link-grid li a { text-decoration: none; }
.link-grid li small { font-weight: 500; color: var(--ink-2); }
@media (max-width: 1000px) { .link-grid.cols-4 { columns: 3; } }
@media (max-width: 800px) { .link-grid.cols-4, .link-grid.cols-3 { columns: 2; } }
@media (max-width: 500px) { .link-grid.cols-4, .link-grid.cols-3 { columns: 1; } }

/* ---------------------------------------------------------------- reviews, accounts, verification */
.review { padding: var(--s3) 0; border-bottom: 1px solid var(--line-2); max-width: 760px; }
.review:last-of-type { border-bottom: 0; }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); margin-bottom: 6px; font-size: .88rem; }
.review h3 { font-size: 1rem; margin: 0 0 4px; }
.review p { margin: 0 0 6px; }
.review-reply { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); background: var(--tint); border-radius: var(--r); border-left: 3px solid var(--blue); }
.review-reply p:last-child { margin-bottom: 0; }
.verify-route { padding: var(--s3) 0; border-top: 1px solid var(--line-2); }
.verify-route h3 { font-size: 1rem; margin: 0 0 6px; display: flex; align-items: center; gap: var(--s2); }
pre.token { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); font-size: .9rem; overflow-x: auto; }
.form.tight p { margin: 0 0 var(--s2); }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); }
.form fieldset legend { font-weight: 600; font-size: .93rem; margin-bottom: 6px; padding: 0; }
.form fieldset label { display: block; padding: 3px 0; font-weight: 400; }
.form fieldset input[type=radio] { margin-right: 8px; }
.stars-input label span { color: #e8a33d; letter-spacing: 1px; }
.wrap.narrow { max-width: 620px; }

/* ---------------------------------------------------------------- overlays
   The review form and the claim prompt live on the practice page and open with :target, so they need no JavaScript and,
   more to the point, no URL of their own: one per practice would be seven thousand thin pages for a crawler to find. */
.overlay { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(16, 32, 28, .55); padding: var(--s4); overflow-y: auto; }
.overlay:target { display: flex; align-items: flex-start; justify-content: center; }
.overlay-card { position: relative; background: var(--white); border-radius: var(--r-lg); padding: var(--s4) var(--s4) var(--s3); max-width: 620px; width: 100%; margin: auto; box-shadow: 0 24px 60px rgba(16, 32, 28, .25); }
.overlay-card h2 { margin-top: 0; }
.overlay-close { position: absolute; top: 10px; right: 14px; font-size: 1.6rem; line-height: 1; color: var(--ink-3); text-decoration: none; padding: 4px 8px; }
.overlay-close:hover { color: var(--ink); }
@media (max-width: 600px) { .overlay { padding: 0; } .overlay-card { border-radius: 0; min-height: 100%; } }