/* ============================================================
   DentistFees — theme v3 "Fee sheet"

   The site is set like the printed fee guide on a practice
   reception desk: white paper, black ink, one highlighter pen.
   Prices are the only thing that gets colour — a marker stroke
   across the figure that matters (the median). Structure is a
   2px black rule at the top of every block, the way a form or a
   ledger is ruled. No shadows, no gradients, no rounded cards.

   Loaded last: re-points the build's own tokens and overrides
   the components that hardcode their look.
   ============================================================ */

:root{
  /* ground */
  --fs-paper:     #FFFFFF;
  --fs-tint:      #F3F3EF;   /* one shade of grey paper for bands */
  --fs-rule:      #000000;   /* heavy rule */
  --fs-rule-soft: #D8D8D3;   /* ledger line */

  /* ink */
  --fs-ink:       #000000;
  --fs-ink-2:     #3A3F47;
  --fs-ink-3:     #5C6470;   /* ≥ 4.5:1 on paper and tint */

  /* the pen */
  --fs-marker:    #FFF06B;
  --fs-marker-2:  #F2DB2C;   /* marker on grey paper / bars */

  /* status — the only other colours on the sheet */
  --fs-met:       #0F6B3A;
  --fs-partial:   #B42318;

  --fs-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-text:    "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ---- re-point the build's tokens ---- */
  --teal:       var(--fs-ink);
  --teal-dk:    var(--fs-ink);
  --teal-lt:    var(--fs-tint);
  --cobalt:     var(--fs-ink);
  --coral:      var(--fs-ink);
  --coral-dk:   var(--fs-ink-2);
  --amber:      var(--fs-marker-2);
  --gold:       #7A6300;
  --ink:        var(--fs-ink);
  --ink-light:  var(--fs-ink-2);
  --ink-faint:  var(--fs-ink-3);
  --mut:        var(--fs-ink-2);
  --paper:      var(--fs-paper);
  --paper-dark: var(--fs-tint);
  --paper-card: var(--fs-paper);
  --paper-2:    var(--fs-tint);
  --card:       var(--fs-paper);
  --line:       var(--fs-rule-soft);
  --rule:       var(--fs-rule-soft);
  --rule-soft:  var(--fs-rule-soft);
  --rule-light: var(--fs-rule-soft);
  --river:      #C9D3DC;
  --green-good: var(--fs-met);
  --green-out:  var(--fs-met);
  --red:        var(--fs-partial);
  --shadow:     none;
  --serif:      var(--fs-display);
  --sans:       var(--fs-display);
  --mono:       var(--fs-display);
  color-scheme: light;
}

html { background: var(--fs-paper); }
body {
  background: var(--fs-paper);
  color: var(--fs-ink);
  font-family: var(--fs-display);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--fs-marker); color: var(--fs-ink); }

/* ---------------- the marker stroke ----------------
   One element per page gets it: the figure the reader came for. */
.mk, .rmid, .stat b em, .band .amt, .stat-big, .lead strong:first-of-type, .lead b:first-of-type {
  background: linear-gradient(180deg, transparent 14%, var(--fs-marker) 14%, var(--fs-marker) 86%, transparent 86%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .14em; margin: 0 -.06em;
  color: var(--fs-ink);
  font-style: normal;
}

/* ============================ shape ============================ */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }
.btn, .btn-primary, .btn-ghost, .btn.amber, input, select, textarea, button { border-radius: 2px !important; }
.dot, .pulse, .d, .med, .dot2, .cqc-mark, circle, .knob { border-radius: 50% !important; }

/* corner ticks from the previous theme — off */
.chart-card::before, .band::before, .step::before, .rt::before, .framed::before,
.range-card::before, .city-card::before, .clinic-card::before,
.trust-plate::before, .why-item::before, .leadform::before { content: none !important; }

/* ============================ type ============================ */
h1, h2, h3, h4, .page-title, .section-title, .city-name,
.chart-card h3, .step h3, .faq-q, .clinic-card h3, .logo {
  font-family: var(--fs-display);
  color: var(--fs-ink);
  text-transform: none;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1, .page-title, .hero h1, .strike h2, h2.t, .find h2 {
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-transform: none;
}
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2, .section-title, .strike h2, h2.t { font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; }
h3, .chart-card h3, .step h3, .faq-q, .clinic-card h3 { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
h2.t::after { content: none; }

/* prose is set in the serif; everything that is a number or a label stays in the grotesk */
p, .lead, .hero-lede, .faq-a, .why-item p, .trust-plate p, .prose li, .prose p, .table-note, .fnote, .src, .note, .tn, .tl, .rt-note, .src-note, .band p, .range-note {
  font-family: var(--fs-text);
  line-height: 1.6;
}
.prose p, .prose li, .lead { font-size: 1.05rem; max-width: 66ch; }
.hero-lede {
  font-family: var(--fs-text);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--fs-ink-2);
  max-width: 34ch;
  margin-top: 18px;
}
.kicker, .eyebrow, .section-divider span, .foot-grid h4, .band .no, .chart-card .cap, .stat span,
.ad-card .tag, .range-card .tag, .rname span, .cbar .lbl, .frow .fl, .wl, .legend, .stamp, .meta-updated, .cqc-date {
  font-family: var(--fs-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fs-ink-2);
}
.kicker::before, .eyebrow::before { content: none; }
.fnote, .src, .rt-note, .table-note, .src-note, .note, .tn, .tl { color: var(--fs-ink-3); font-size: .92rem; }

/* numbers */
.stat b, .band .amt, .rmid, .price, .price-flag, .from, .wl b, .cbar .pct, .frow .fl b,
.price-table td.num, .stat-big, .bar .lo, .bar .hi, .amt, .num {
  font-family: var(--fs-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.stat b { font-size: 2.1rem; font-weight: 800; font-stretch: 110%; letter-spacing: -.03em; line-height: 1; }
.band .amt { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.rmid { font-size: 1.15rem; }
.rmid span { font-weight: 500; font-size: .82rem; color: var(--fs-ink-2); background: none; padding: 0; }

/* ============================ nav ============================ */
nav, .site-header {
  background: var(--fs-paper) !important;
  border-bottom: 2px solid var(--fs-rule);
  backdrop-filter: none;
}
.logo { color: var(--fs-ink); font-weight: 800; letter-spacing: -.03em; font-size: 1.15rem; }
.logo b { color: var(--fs-ink); font-weight: 800; }
.logo span, .logo-uk { color: var(--fs-ink); }
.logo svg path { fill: var(--fs-ink); }
.logo svg circle { fill: var(--fs-marker-2); }
.nav-l a, .nav-bar a {
  color: var(--fs-ink-2);
  font-family: var(--fs-display);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.nav-l a:hover, .nav-bar a:hover { color: var(--fs-ink); }
.nav-l a::after { background: var(--fs-marker); height: 3px; }
.burger { color: var(--fs-ink); }
@media (max-width: 960px) {
  .nav-l { background: var(--fs-paper); border-bottom: 2px solid var(--fs-rule); }
  .nav-l a { color: var(--fs-ink); }
  .nav-l a:not(:last-child) { border-bottom: 1px solid var(--fs-rule-soft); }
  .nav-cta-inmenu { color: var(--fs-ink) !important; }
}
@media (max-width: 879px) {
  .nav-bar.open { background: var(--fs-paper); border-bottom: 2px solid var(--fs-rule); }
  .nav-bar.open a { border-bottom: 1px solid var(--fs-rule-soft); color: var(--fs-ink); }
}

/* ========================== buttons ========================== */
.btn, .btn-primary, .btn.amber, .dl-btn, .qf-next, .btn-primary[data-astro-cid-v6q7qrp4] {
  background: var(--fs-ink);
  color: var(--fs-paper);
  border: 2px solid var(--fs-ink);
  font-family: var(--fs-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: .75em 1.35em;
  transition: background .15s, color .15s;
}
.btn:hover, .btn-primary:hover, .btn.amber:hover, .dl-btn:hover, .qf-next:hover:not(:disabled), .btn-primary[data-astro-cid-v6q7qrp4]:hover {
  background: var(--fs-marker);
  color: var(--fs-ink);
  border-color: var(--fs-ink);
  transform: none;
}
.btn-ghost, .dl-btn.sec { background: transparent; color: var(--fs-ink); border: 2px solid var(--fs-ink); }
.btn-ghost:hover, .dl-btn.sec:hover { background: var(--fs-tint); }

/* ====================== hero + the map ====================== */
.hero { padding-top: 48px; }
.hero-top { grid-template-columns: 1.2fr .8fr; gap: 48px; }
.stage, .bigmap .frame {
  background: var(--fs-tint) !important;
  border: 0;
  border-top: 2px solid var(--fs-rule);
}
.stage svg, .bigmap svg { filter: none; }
.legend, .stamp, .bigmap .cap2 { color: var(--fs-ink-2); }
.stamp { border: 1px solid var(--fs-ink); background: var(--fs-paper); color: var(--fs-ink); }
.pin-g text { fill: var(--fs-ink); }
.pin-g rect { fill: var(--fs-paper); stroke: var(--fs-ink); }
.pin-g line { stroke: var(--fs-ink); }
.bigmap .bd { fill: var(--fs-ink); }
.bigmap .thames { stroke: #A9B7C4; opacity: 1; }
.delta { background: var(--fs-marker); color: var(--fs-ink); }
.hero-search {
  display: flex;
  background: var(--fs-paper);
  border: 2px solid var(--fs-ink);
  max-width: 30rem;
  margin: 26px 0 22px;
}
.hero-search:focus-within { outline: 3px solid var(--fs-marker); outline-offset: 2px; }
.hero-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 500 1rem var(--fs-display); color: var(--fs-ink); padding: 13px 16px;
}
.hero-search input::placeholder { color: var(--fs-ink-3); }
.hero-search button { flex: none; border: 0; border-left: 2px solid var(--fs-ink); }

/* ========================= bands ========================= */
.strike, .find {
  background: var(--fs-tint) !important;
  color: var(--fs-ink);
  border-top: 2px solid var(--fs-rule);
}
.strike .inner { border-top: 0; }
.strike .sub, .find p { color: var(--fs-ink-2); }
.ad-card, .range-card { background: var(--fs-paper); border: 0; border-top: 2px solid var(--fs-rule); color: var(--fs-ink); }
.ad-card .tag, .small-star { color: var(--fs-ink-3); }
.from { color: var(--fs-ink-3); }
.from .cross { background: var(--fs-partial); }
.whisker .base { background: var(--fs-rule-soft); }
.whisker .band { background: var(--fs-marker-2); opacity: 1; }
.whisker .med { background: var(--fs-ink); border: 2px solid var(--fs-paper); }
.wl b { color: var(--fs-ink); }
.wl b[style] { color: var(--fs-ink) !important; }
.range-note b { color: var(--fs-ink); }

/* ====================== blocks ======================
   Every block is ruled at the top, never boxed. */
.chart-card, .band, .step, .rt, .framed, .city-card, .clinic-card, .faq-item,
.trust-plate, .why-item, .price-table, .leadform, .callout-box, .evidence-block, .ev-card {
  background: var(--fs-paper);
  border: 0;
  border-top: 2px solid var(--fs-rule);
  padding-top: 14px;
}
.chart-card:hover, .city-card:hover, .clinic-card:hover, .band:hover { transform: none; border-color: var(--fs-rule); background: var(--fs-paper); }
.city-card:hover .city-name, .clinic-card:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--fs-marker); text-underline-offset: 3px; }
.frow .track { background: var(--fs-rule-soft); }
.frow .fillb, .frow:nth-child(2) .fillb, .frow:nth-child(3) .fillb { background: var(--fs-ink); opacity: 1; }
.frow .fl { color: var(--fs-ink-2); }
.frow .fl b { color: var(--fs-ink); }
.cbar .col, .cbar:nth-child(5) .col { background: var(--fs-ink); opacity: 1; }
.cbar:nth-child(5) .col { background: var(--fs-marker-2); }
.cbar .pct { color: var(--fs-ink); }
.cbar .lbl { color: var(--fs-ink-2); }

/* NHS bands */
.band::after { background: var(--fs-marker-2); }
.band.urgent { background: var(--fs-tint); }
.band.urgent .no { color: var(--fs-ink); }
.band p { color: var(--fs-ink-2); }
.band .no { font-weight: 600; }

/* ranges (data rows) */
.rrow { border-bottom: 1px solid var(--fs-rule-soft); }
.rrow:hover { background: var(--fs-tint); }
.rname span { color: var(--fs-ink-3); }
.bar .base { background: var(--fs-rule-soft); }
.bar .fill { background: var(--fs-marker-2); opacity: 1; }
.bar .dot2 { background: var(--fs-ink); border: 2px solid var(--fs-paper); }
.bar .lo, .bar .hi { color: var(--fs-ink-3); font-weight: 500; }
.rt-note { background: var(--fs-tint); border-top: 1px solid var(--fs-rule-soft); }

/* ====================== tables (the fee sheet itself) ====================== */
.price-table, table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--fs-display);
}
.price-table th, table th {
  font-family: var(--fs-display);
  font-size: .82rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fs-ink-2);
  text-align: left;
  padding: 10px 8px;
  border-bottom: 2px solid var(--fs-rule);
  background: transparent;
}
.price-table td, table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--fs-rule-soft);
  background: transparent;
  vertical-align: top;
}
.price-table td.num, table td.num, .price-table th.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.price-table tr:hover td { background: var(--fs-tint); }
.price-table .na { color: var(--fs-ink-3); font-weight: 500; }
.price-table td a, table td a { color: var(--fs-ink); text-decoration: underline; text-decoration-color: var(--fs-rule-soft); text-underline-offset: 3px; }
.price-table td a:hover, table td a:hover { text-decoration-color: var(--fs-ink); }
.price-flag { color: var(--fs-ink-2); }

/* ======================== borough grid ======================== */
.city-name { font-weight: 700; font-size: 1.05rem; }
.city-meta, .city-sub { color: var(--fs-ink-2); font-family: var(--fs-display); font-size: .88rem; }

/* ========================== CQC state ==========================
   Green and red are reserved for the regulator's outcome. */
.is-met .cqc-mark, .tag-met, .cqc-tag.tag-met { background: var(--fs-met); color: #fff; border-color: var(--fs-met); }
.is-partial .cqc-mark, .tag-partial, .cqc-tag.tag-partial { background: var(--fs-partial); color: #fff; border-color: var(--fs-partial); }
.is-reg .cqc-mark, .cqc-tag { background: var(--fs-paper); color: var(--fs-ink); border: 1px solid var(--fs-ink); }
.is-met .cqc-label { color: var(--fs-met); }
.is-reg .cqc-label { color: var(--fs-ink-2); }
.cqc-report, .xlinks a, .link-list a, .meta-updated a, .ev-cite a, .ev-meta a, .lf-disclosure a, a {
  color: var(--fs-ink);
  text-decoration-color: var(--fs-rule-soft);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--fs-ink); }

/* ============================ forms ============================ */
.leadform input, .leadform textarea, .leadform select, .qf input, .qf textarea, input, textarea, select {
  background: var(--fs-paper);
  color: var(--fs-ink);
  border: 2px solid var(--fs-ink);
  font-family: var(--fs-display);
}
.leadform input::placeholder, .leadform textarea::placeholder, .qf input::placeholder { color: var(--fs-ink-3); }
.leadform input:focus, .qf input:focus, .qf textarea:focus, input:focus, textarea:focus { outline: 3px solid var(--fs-marker); outline-offset: 2px; }
.lf-consent, .lf-disclosure, .lf-mini { color: var(--fs-ink-2); font-family: var(--fs-text); }
.qf-chips button { background: var(--fs-paper); border: 1px solid var(--fs-ink); color: var(--fs-ink); }
.qf-chips button.on, .calc-presets button.active, .qf-steps .on { background: var(--fs-marker); border-color: var(--fs-ink); color: var(--fs-ink); }
button[data-a="y"] { background: var(--fs-met); color: #fff; }
button[data-a="n"] { background: var(--fs-paper); color: var(--fs-ink); border: 2px solid var(--fs-ink); }

/* inline styles baked into the build */
[style*="background:#FBE9D8"] { background: var(--fs-tint) !important; }
[style*="color:#C4531F"], [style*="color:#8a6008"] { color: var(--fs-ink) !important; }
[style*="background:#E7F4EC"] { background: var(--fs-tint) !important; }

/* evidence */
.ev-finding { font-family: var(--fs-text); font-size: 1.1rem; }
.ev-detail, .ev-foot, .ev-meta { color: var(--fs-ink-2); }
.ev-cite li + li { border-top: 1px solid var(--fs-rule-soft); }
.ev-cite code { background: var(--fs-tint); color: var(--fs-ink); font-family: var(--fs-display); }

/* section divider: one rule, no animation */
.section-divider span::after, .section-divider.dp-in span::after { width: 100%; background: var(--fs-rule); height: 2px; transition: none; }

/* ============================ footer ============================ */
.site-footer { background: var(--fs-paper); border-top: 2px solid var(--fs-rule); color: var(--fs-ink-2); }
.site-footer a { color: var(--fs-ink); }
.foot-grid h4 { color: var(--fs-ink); font-weight: 700; }
.foot-legal p { font-family: var(--fs-text); color: var(--fs-ink-3); font-size: .88rem; line-height: 1.55; }

/* ============================ motion ============================
   None on load. Things that change on the reader's action may move. */
[data-dp-rv], [data-dp-rv].dp-in, .rv, .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
:focus-visible { outline: 3px solid var(--fs-marker); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 600px) {
  .hero h1 { font-size: 2.3rem; }
  .stat b { font-size: 1.7rem; }
  .price-table th, .price-table td { padding: 8px 6px; font-size: .95rem; }
}

/* ======================= v3 adjustments =======================
   The map is the one dark thing on the sheet: a black panel with
   2,409 highlighter dots. Everything else stays paper. */
.stage { background: #000 !important; border: 0; }
.stage .bd, .bigmap .bd, .stage circle.bd { fill: var(--fs-marker-2) !important; }
.stage .thames, .bigmap .thames { stroke: #4A5560 !important; }
.stage .stamp { background: #000; color: var(--fs-marker); border: 1px solid var(--fs-marker-2); }
.stage .legend, .stage .cap2 { color: #EDECE8; }
.stage .legend .d { background: var(--fs-marker-2); }
.strike { background: var(--fs-tint) !important; color: var(--fs-ink) !important; }
.strike h2, .strike p, .strike .sub, .strike .from, .strike .tag { color: var(--fs-ink) !important; }
.strike .inner { border-top: 0 !important; }
.strike .ad-card { background: var(--fs-paper); }
.kicker, .eyebrow, .hero .kicker, .foot-grid h4 { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--fs-display) !important; color: var(--fs-ink-2) !important; }
.hero-cta { margin: 26px 0 22px; }

/* headline accents from the old theme: none. The marker is for figures only. */
.hero h1 em, .strike h2 em { background: none; padding: 0; margin: 0; font-style: normal; color: inherit; }
.hero h1 { line-height: 1.06; }
/* the fee sheet header row: black rule with white text */
.price-table thead th { background: var(--fs-ink) !important; color: var(--fs-paper) !important; border-bottom: 0; }

/* computed insight block on cells */
.fs-insight { margin: 1.6rem 0 2rem; }
.fs-insight-list { list-style: none; padding: 0; margin: 0 0 1.2rem; max-width: 70ch; }
.fs-insight-list li { font-family: var(--fs-text); font-size: 1.05rem; line-height: 1.55; padding: .55rem 0; border-bottom: 1px solid var(--fs-rule-soft); }
.fs-insight-list li:first-child { font-weight: 600; }
.fs-insight .price-table { margin: .6rem 0 1.2rem; }
.fs-insight .faq-item { padding-top: 10px; }

/* ============================ photographs ============================
   Photos sit under the same rule as every other block: a 2px line on top,
   no rounding, no shadow. They never carry text. */
.fs-photo { margin: 0 0 1.4rem; border-top: 2px solid var(--fs-rule); padding-top: 12px; }
.fs-photo img { display: block; width: 100%; height: auto; }
.fs-photo figcaption { font-family: var(--fs-text); font-size: .88rem; color: var(--fs-ink-3); margin-top: .5rem; }
.fs-photo.band-photo { margin: 1.4rem 0 2rem; }
.fs-photo.band-photo img { max-height: 380px; object-fit: cover; }
.fs-photo.inline-photo { max-width: 360px; float: right; margin: 0 0 1rem 1.6rem; }
@media (max-width: 700px) { .fs-photo.inline-photo { float: none; max-width: 100%; margin: 0 0 1.2rem; } }
.hero-sub .fs-photo.hero-photo { margin: 0 0 1rem; border-top: 0; padding-top: 0; }
.hero-sub .fs-photo.hero-photo img { max-height: 420px; object-fit: cover; object-position: 60% 50%; }

/* ============================ one moment of motion ============================
   The marker stroke is drawn across the key figure once, on load — the way a
   hand drags a highlighter. Nothing else moves by itself. */
@keyframes fs-mark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.lead strong:first-of-type, .lead b:first-of-type, .rmid, .stat b em, .band .amt, .stat-big {
  background-repeat: no-repeat; background-size: 100% 100%;
  animation: fs-mark .7s cubic-bezier(.2,.7,.2,1) .25s both;
}
@media (prefers-reduced-motion: reduce) {
  .lead strong:first-of-type, .lead b:first-of-type, .rmid, .stat b em, .band .amt, .stat-big { animation: none; }
}
.fs-download { font-family: var(--fs-display); font-size: .92rem; margin: .8rem 0 0; }
.fs-download a { font-weight: 600; }
.fs-change { margin: 1.6rem 0 2rem; }
.fs-change .price-table { margin-top: .6rem; }