/* ============================================================
   DentalPrices.uk — theme v2
   The London Dental Price Map, as a data platform.

   Champagne on deep navy. Every corner square. Gold is reserved
   for numbers and live state; structure is carried by hairlines
   and corner ticks, never by rounding or shadow.

   Loaded last, so it re-points the site's own design tokens and
   overrides the light surfaces that were hardcoded in the build.
   ============================================================ */

:root{
  /* ground */
  --dp-void:      #04070C;
  --dp-navy:      #080F1A;
  --dp-panel:     #0B1522;
  --dp-panel-2:   #111D2C;
  --dp-line:      #17222F;
  --dp-line-lit:  #243547;

  /* type */
  --dp-text:      #E9EFF7;
  --dp-dim:       #93A3B8;
  --dp-faint:     #8093A9;   /* ≥4.5:1 on every ground above */

  /* accent — champagne, reserved for numbers and live state */
  --dp-gold:      #C9A66B;
  --dp-gold-lit:  #EBD3A3;
  --dp-gold-dim:  #8A7346;
  --dp-glow:      rgba(201,166,107,.16);

  /* status stays legible on dark */
  --dp-green:     #45C07E;
  --dp-red:       #E8735A;

  --dp-display: "Jost","Inter",system-ui,sans-serif;

  /* ---- re-point the site's own tokens ---- */
  --ink:        var(--dp-text);
  --ink-light:  var(--dp-dim);
  --ink-faint:  var(--dp-faint);
  --mut:        var(--dp-dim);
  --paper:      var(--dp-void);
  --paper-dark: var(--dp-navy);
  --card:       var(--dp-panel);
  --line:       var(--dp-line);

  --teal:       var(--dp-gold);
  --teal-dk:    var(--dp-gold-lit);
  --teal-lt:    rgba(201,166,107,.07);
  --cobalt:     var(--dp-gold);
  --coral:      var(--dp-gold);
  --coral-dk:   var(--dp-gold-lit);
  --amber:      var(--dp-gold);
  --gold:       var(--dp-gold);
  --river:      #21384F;

  --green-good: var(--dp-green);
  --green-out:  var(--dp-green);
  --red:        var(--dp-red);

  --serif:      var(--dp-display);
  --shadow:     none;

  /* legacy names that were written as var(--x, #lightfallback) */
  --paper-card: var(--dp-panel);
  --paper-2:    var(--dp-panel-2);
  --rule-soft:  var(--dp-line-lit);
  --rule-light: var(--dp-line);

  color-scheme: dark;
}

html { background: var(--dp-void); }
body { background: var(--dp-void); color: var(--dp-text); }
::selection { background: var(--dp-gold); color: var(--dp-void); }

/* ====================== square corners, everywhere ======================
   The reference design has no rounding at all. One rule, no exceptions
   except the round things that are genuinely round: map dots and avatars. */
*, *::before, *::after { border-radius: 0 !important; }
.dot, .pulse, .d, .med, .dot2, .cqc-mark, circle, .knob { border-radius: 50% !important; }

/* ============================ type ============================ */

h1, h2, h3, .page-title, .section-title, .city-name,
.chart-card h3, .step h3, .faq-q, .clinic-card h3 {
  font-family: var(--dp-display);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--dp-text);
  text-wrap: balance;
}

/* headline typography is uppercase and tracked; prose headings are not */
.hero h1, .strike h2, h2.t, .find h2 {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .055em;
  line-height: 1.13;
}
.hero h1 em, .strike h2 em { font-style: normal; color: var(--dp-gold); }

.kicker, .eyebrow, .section-divider span,
.foot-grid h4, .band .no, .chart-card .cap, .stat span {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--dp-gold);
}
.chart-card .cap, .stat span { color: var(--dp-faint); letter-spacing: .12em; }
.kicker::before { background: var(--dp-gold); opacity: .75; }

.stat b, .band .amt, .rmid, .price, .price-flag,
.from, .wl b, .cbar .pct, .frow .fl b, .price-table td.num {
  font-variant-numeric: tabular-nums;
}
.stat b { font-family: var(--dp-display); font-weight: 300; font-size: 1.75rem; }
.stat b em { color: var(--dp-gold); }
.band .amt { font-family: var(--dp-display); font-weight: 200; color: var(--dp-gold); }

/* ====================== the corner-tick motif ======================
   What replaces rounding: a bracket at two opposing corners. */
.chart-card, .band, .step, .rt, .framed, .range-card, .ad-card,
.city-card, .clinic-card, .trust-plate, .why-item, .price-table, .leadform {
  position: relative;
}
.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: "";
  position: absolute; top: -1px; left: -1px;
  width: 9px; height: 9px;
  border: 1px solid var(--dp-gold);
  border-right: 0; border-bottom: 0;
  opacity: .5; pointer-events: none;
}

/* ============================ nav ============================ */

nav, .site-header {
  background: rgba(4,7,12,.82) !important;
  border-bottom: 1px solid var(--dp-line);
  backdrop-filter: blur(16px) saturate(1.2);
}
.logo { color: var(--dp-text); }
.logo b { color: var(--dp-text); font-weight: 500; }
.logo span, .logo-uk { color: var(--dp-gold); }
.logo svg path { fill: var(--dp-gold); }
.logo svg circle { fill: var(--dp-gold-lit); }
.nav-l a, .nav-bar a {
  color: var(--dp-dim);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-l a:hover, .nav-bar a:hover { color: var(--dp-text); }
.nav-l a::after { background: var(--dp-gold); }
.burger { color: var(--dp-gold); }

@media (max-width: 960px) {
  .nav-l { background: var(--dp-navy); border-bottom: 1px solid var(--dp-line); box-shadow: none; }
  .nav-l a { color: var(--dp-text); }
  .nav-l a:not(:last-child) { border-bottom: 1px solid var(--dp-line); }
  .nav-cta-inmenu { color: var(--dp-gold) !important; }
}
@media (max-width: 879px) {
  .nav-bar.open { background: var(--dp-navy); border-bottom: 1px solid var(--dp-line); }
  .nav-bar.open a { border-bottom: 1px solid var(--dp-line); color: var(--dp-text); }
}

/* ========================== buttons ========================== */

.btn, .btn-primary, .btn.amber {
  background: transparent;
  color: var(--dp-gold);
  border: 1px solid var(--dp-gold-dim);
  box-shadow: none;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .85em 1.5em;
  transition: background .28s, color .28s, border-color .28s, box-shadow .28s;
}
.btn:hover, .btn-primary:hover, .btn.amber:hover {
  background: var(--dp-gold);
  color: var(--dp-void);
  border-color: var(--dp-gold);
  box-shadow: 0 0 26px var(--dp-glow);
  transform: none;
}
.btn-ghost { background: transparent; color: var(--dp-dim); border: 1px solid var(--dp-line-lit); }
.btn-ghost:hover { color: var(--dp-text); border-color: var(--dp-gold-dim); }

/* ====================== hero + the map ====================== */

.hero { padding-top: 56px; }
.hero-top { grid-template-columns: 1.32fr .68fr; gap: 48px; }
.stat-r { gap: 28px; }

.hero-lede {
  font-family: var(--dp-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--dp-dim);
  margin-top: 18px;
  max-width: 22ch;
}

.stage, .bigmap .frame {
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(201,166,107,.13) 0%, transparent 62%),
    radial-gradient(80% 70% at 18% 0%, rgba(33,56,79,.5) 0%, transparent 70%),
    var(--dp-navy) !important;
  border: 1px solid var(--dp-line);
  box-shadow: none;
}
.stage svg, .bigmap svg { filter: drop-shadow(0 0 3px rgba(201,166,107,.35)); }

.legend, .stamp, .bigmap .cap2 { color: var(--dp-dim); }
.stamp { border: 1px solid var(--dp-line-lit); background: rgba(8,15,26,.82); color: var(--dp-dim); }
.pin-g text { fill: var(--dp-text); }
.pin-g rect { fill: rgba(11,21,34,.95); stroke: var(--dp-line-lit); }
.pin-g line { stroke: var(--dp-line-lit); }
.bigmap .bd { fill: var(--dp-gold); }
.bigmap .thames { stroke: #2E567C; opacity: .85; }
.delta { background: rgba(201,166,107,.12); color: var(--dp-gold); }

.hero-search {
  display: flex;
  background: var(--dp-panel);
  border: 1px solid var(--dp-line-lit);
  max-width: 30rem;
  margin: 26px 0 22px;
  transition: border-color .25s, box-shadow .25s;
}
.hero-search:focus-within { border-color: var(--dp-gold-dim); box-shadow: 0 0 0 3px var(--dp-glow); }
.hero-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 .98rem var(--sans); color: var(--dp-text); padding: 13px 18px;
}
.hero-search input::placeholder { color: var(--dp-faint); }
.hero-search button { flex: none; border-left: 1px solid var(--dp-gold-dim); }

/* ========================= strike band ========================= */

.strike, .find {
  background: linear-gradient(180deg, var(--dp-navy) 0%, var(--dp-void) 100%) !important;
  color: var(--dp-text);
}
.strike .inner { border-top: 1px solid var(--dp-line); }
.strike .sub, .find p { color: var(--dp-dim); }

.ad-card { background: var(--dp-panel); border: 1px solid var(--dp-line); }
.ad-card .tag, .small-star { color: var(--dp-faint); }
.from { color: var(--dp-dim); }
.from .cross { background: var(--dp-red); }

.range-card { background: var(--dp-panel); color: var(--dp-text); border: 1px solid var(--dp-line-lit); box-shadow: none; }
.range-card .tag { color: var(--dp-faint); }
.whisker .base { background: var(--dp-line); }
.whisker .band { background: linear-gradient(90deg, var(--dp-gold-dim), var(--dp-gold)); opacity: .55; }
.whisker .med { background: var(--dp-gold); border: 3px solid var(--dp-panel); box-shadow: 0 0 16px rgba(201,166,107,.7); }
.wl { color: var(--dp-dim); }
.wl b { color: var(--dp-text); }
.wl b[style] { color: var(--dp-gold) !important; }
.range-note { color: var(--dp-dim); }
.range-note b { color: var(--dp-gold); }

/* ====================== charts / numbers ====================== */

.chart-card, .band, .step, .rt, .framed,
.city-card, .clinic-card, .faq-item, .trust-plate, .why-item {
  background: var(--dp-panel);
  border: 1px solid var(--dp-line);
  box-shadow: none;
}
.chart-card:hover { box-shadow: none; transform: translateY(-3px) rotate(0deg); border-color: var(--dp-gold-dim); }

.frow .track { background: var(--dp-line); }
.frow .fillb, .frow:nth-child(2) .fillb, .frow:nth-child(3) .fillb {
  background: linear-gradient(90deg, var(--dp-gold-dim), var(--dp-gold));
}
.frow:nth-child(2) .fillb { opacity: .8; }
.frow:nth-child(3) .fillb { opacity: .62; }
.frow .fl { color: var(--dp-dim); }
.frow .fl b { color: var(--dp-text); }
.fnote, .src, .rt-note, .table-note, .src-note, .note, .tn, .tl { color: var(--dp-faint); }

.cbar .col, .cbar:nth-child(5) .col {
  background: linear-gradient(180deg, var(--dp-gold), var(--dp-gold-dim));
  opacity: .75;
}
.cbar:nth-child(5) .col { opacity: 1; }
.cbar .pct { color: var(--dp-gold); }
.cbar .lbl { color: var(--dp-faint); }

/* ========================== NHS bands ========================== */

.band::after { background: var(--dp-gold); }
.band:hover { border-color: var(--dp-gold-dim); box-shadow: none; }
.band.urgent { background: var(--dp-panel-2); border-color: var(--dp-line-lit); }
.band.urgent .no { color: var(--dp-gold-lit); }
.band p { color: var(--dp-dim); }

/* ====================== ranges (data rows) ====================== */

.rrow { border-bottom: 1px solid var(--dp-line); }
.rrow:hover { background: var(--dp-panel-2); }
.rname span { color: var(--dp-faint); }
.bar .base { background: var(--dp-line); }
.bar .fill { background: linear-gradient(90deg, var(--dp-gold-dim), var(--dp-gold)); opacity: .5; }
.bar .dot2 { background: var(--dp-gold); border: 3px solid var(--dp-panel); box-shadow: 0 0 14px rgba(201,166,107,.65); }
.bar .lo, .bar .hi { color: var(--dp-faint); }
.rmid { color: var(--dp-gold); }
.rmid span { color: var(--dp-faint); }
.rt-note { background: var(--dp-navy); border-top: 1px solid var(--dp-line); }

/* ======================== borough grid ======================== */

.bg-g { background: var(--dp-line); border: 1px solid var(--dp-line); }
.bg-g a { background: var(--dp-panel); color: var(--dp-text); position: relative; }
.bg-g a span { color: var(--dp-faint); }
.bg-g a:hover { background: var(--dp-panel-2); }
.bg-g a:hover span { color: var(--dp-gold); }
.bg-g a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--dp-gold); transition: width .25s;
}
.bg-g a:hover::before { width: 2px; }

/* ========================= how we check ========================= */

.step .ic { background: rgba(201,166,107,.1); border: 1px solid var(--dp-line-lit); color: var(--dp-gold); }
.step p { color: var(--dp-dim); }
.step:hover { border-color: var(--dp-gold-dim); }

/* ====================== bottom search + footer ====================== */

.search { background: var(--dp-panel); border: 1px solid var(--dp-line-lit); }
.search:focus-within { border-color: var(--dp-gold-dim); box-shadow: 0 0 0 3px var(--dp-glow); }
.search input { color: var(--dp-text); }
.search input::placeholder { color: var(--dp-faint); }
.alt { color: var(--dp-dim); }
.alt a, .find a { color: var(--dp-gold); }
.find a[style] { color: var(--dp-gold) !important; }

footer, .site-footer { background: var(--dp-navy); border-top: 1px solid var(--dp-line); color: var(--dp-dim); }
.foot-about p { color: var(--dp-dim); }
.foot-grid h4 { color: var(--dp-gold); }
.foot-grid a, .foot-legal, .foot-legal a { color: var(--dp-dim); }
.foot-grid a:hover { color: var(--dp-gold); }
.foot-legal { border-top: 1px solid var(--dp-line); color: var(--dp-faint); }
footer a { color: var(--dp-gold); }

/* ======================= content pages ======================= */

a { color: var(--dp-gold); }
.prose p, .lead, .subtitle { color: var(--dp-dim); }
.prose strong { color: var(--dp-text); }
.prose a { color: var(--dp-gold-lit); }
.prose h2, .prose h3 { color: var(--dp-text); margin-top: 2rem; }

.prose ul, .prose ol { margin: 0 0 1.1rem 1.2rem; color: var(--dp-dim); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .55rem; padding-left: .2rem; }
.prose li::marker { color: var(--dp-gold); }
.prose li strong { color: var(--dp-text); }

.framed { border-left: 2px solid var(--dp-gold); }
.framed p + p { margin-top: .8rem; }

.breadcrumb a { color: var(--dp-faint); }
.breadcrumb a:hover { color: var(--dp-gold); }
.breadcrumb span { color: var(--dp-faint); }
.section-divider:after { background: var(--dp-line); }

.price-table { background: var(--dp-panel); border: 1px solid var(--dp-line); box-shadow: none; }
.price-table thead th {
  background: var(--dp-panel-2) !important;
  color: var(--dp-gold) !important;
  font-family: var(--mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  border-bottom: 1px solid var(--dp-line-lit);
}
.price-table tbody tr + tr td { border-top: 1px solid var(--dp-line); }
.price-table tbody tr:hover td { background: var(--dp-panel-2); }
.price-table td { color: var(--dp-dim); }
.price-table .proc, .price-table td.proc { color: var(--dp-text); }
.price-table td.num { color: var(--dp-text); font-family: var(--mono); }
.price-table .nhs { color: var(--dp-gold); }
.price-table .na { color: var(--dp-faint); }

.city-card:hover, .clinic-card:hover { border-color: var(--dp-gold-dim); }
.city-name { color: var(--dp-gold); }
.city-meta { color: var(--dp-dim); }
.city-sub { color: var(--dp-faint); }
.clinic-card.is-featured { border-color: var(--dp-gold-dim); box-shadow: none; }
.clinic-google { color: var(--dp-gold); }
.clinic-google span { color: var(--dp-faint); }
.faq-a, .why-item p, .trust-plate p { color: var(--dp-dim); }
.link-list a { color: var(--dp-gold); }
.price-flag { background: rgba(201,166,107,.1); color: var(--dp-gold); }

.cqc-date { color: var(--dp-faint); }
.is-met .cqc-mark { background: var(--dp-green); color: var(--dp-void); }
.is-partial .cqc-mark, .is-reg .cqc-mark { background: var(--dp-gold); color: var(--dp-void); }
.is-met .cqc-label { color: var(--dp-green); }
.is-reg .cqc-label { color: var(--dp-gold); }
.cqc-report { color: var(--dp-gold); }
.tag-met { background: var(--dp-green); color: var(--dp-void); }
.tag-partial { background: var(--dp-gold); color: var(--dp-void); }

.xlinks a {
  background: var(--dp-panel-2) !important;
  border: 1px solid var(--dp-line) !important;
  color: var(--dp-dim) !important;
  font-family: var(--mono) !important;
  font-size: .72rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.xlinks a:hover { background: var(--dp-gold) !important; color: var(--dp-void) !important; border-color: var(--dp-gold) !important; }
.meta-updated { color: var(--dp-faint) !important; }
.meta-updated a { color: var(--dp-gold) !important; }

.leadform { background: rgba(201,166,107,.05) !important; border: 1px solid var(--dp-line) !important; }
.leadform input, .leadform textarea, .leadform select {
  background: var(--dp-panel) !important;
  color: var(--dp-text) !important;
  border: 1px solid var(--dp-line-lit) !important;
}
.leadform input::placeholder, .leadform textarea::placeholder { color: var(--dp-faint); }
.lf-consent, .lf-disclosure, .lf-mini { color: var(--dp-dim) !important; }
.lf-disclosure a { color: var(--dp-gold) !important; }

/* clinic placeholder plates: line art, not a light photo block */
.clinic-photo, .clinic-photo.is-plate {
  background: var(--dp-panel-2) !important;
  box-shadow: none;
  border: 1px solid var(--dp-line);
}
.clinic-photo svg > rect:first-child { fill: var(--dp-panel-2); }
.clinic-photo svg > rect:last-child  { fill: var(--dp-gold); }
.clinic-photo svg text   { fill: var(--dp-dim); font-family: var(--dp-display); }
.clinic-photo svg path   { stroke: var(--dp-gold); }
.clinic-photo svg circle { fill: var(--dp-gold-lit); }

button[data-a="y"] { background: var(--dp-gold) !important; color: var(--dp-void) !important; }
button[data-a="n"] { background: var(--dp-panel) !important; color: var(--dp-text) !important; border-color: var(--dp-line-lit) !important; }

/* ================= late-cascade components =================
   The quote form ships its CSS inside the component script, so it
   lands in <body> and wins on order. These need !important. */

.btn-primary[data-astro-cid-v6q7qrp4] { background: transparent; color: var(--dp-gold); border: 1px solid var(--dp-gold-dim); }
.btn-primary[data-astro-cid-v6q7qrp4]:hover { background: var(--dp-gold); color: var(--dp-void); border-color: var(--dp-gold); }

.qf-next { background: var(--dp-gold) !important; color: var(--dp-void) !important; }
.qf-next:hover:not(:disabled) { background: var(--dp-gold-lit) !important; }
.qf-chips button { background: var(--dp-panel) !important; color: var(--dp-dim) !important; border-color: var(--dp-line-lit) !important; }
.qf-chips button.on { background: var(--dp-gold) !important; color: var(--dp-void) !important; border-color: var(--dp-gold) !important; }
.qf-chips button:hover { border-color: var(--dp-gold-dim) !important; }
.qf input, .qf textarea { background: var(--dp-panel) !important; color: var(--dp-text) !important; border-color: var(--dp-line-lit) !important; }
.qf input:focus, .qf textarea:focus { border-color: var(--dp-gold) !important; }
.qf-summary { background: var(--dp-panel-2) !important; color: var(--dp-dim) !important; }
.qf-check   { background: var(--dp-green) !important; color: var(--dp-void) !important; }
.qf-steps .on { color: var(--dp-gold) !important; border-bottom-color: var(--dp-gold) !important; }

.callout-box { background: var(--dp-panel) !important; border-color: var(--dp-line) !important; border-left: 2px solid var(--dp-gold) !important; }
.dl-btn { background: var(--dp-gold) !important; color: var(--dp-void) !important; border-color: var(--dp-gold) !important; }
.dl-btn.sec { background: var(--dp-panel-2) !important; color: var(--dp-text) !important; border-color: var(--dp-line-lit) !important; }
.stat-big { color: var(--dp-gold); }
.calc-presets button.active { background: var(--dp-gold) !important; color: var(--dp-void) !important; border-color: var(--dp-gold) !important; }
.cqc-tag, .cqc-tag.tag-met, .cqc-tag.tag-partial, .cqc-mark { color: var(--dp-void); }

/* stray inline-styled callouts on a few older pages */
[style*="background:#FBE9D8"] { background: var(--dp-panel-2) !important; border: 1px solid var(--dp-line-lit) !important; }
[style*="color:#C4531F"], [style*="color:#8a6008"] { color: var(--dp-gold) !important; }
[style*="background:#fff"], [style*="background:#FFF"] { background: var(--dp-panel) !important; color: var(--dp-text) !important; }
[style*="background:#E7F4EC"] { background: var(--dp-panel-2) !important; }

/* ====================== evidence blocks ======================
   Research sits visually apart from our own price data: the finding
   leads in gold, the citation trails in mono. Never the same weight
   as a price, so the two are never mistaken for each other. */

.evidence-block, .ev-card { border-left: 2px solid var(--dp-gold); }

.ev-finding {
  font-family: var(--dp-display);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  line-height: 1.45;
  color: var(--dp-text);
  margin-bottom: .8rem;
}
.ev-detail { font-size: .9rem; color: var(--dp-dim); margin-bottom: 1rem; }

.ev-cite {
  list-style: none;
  margin: 0 0 .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--dp-line);
}
.ev-cite li {
  font-size: .8rem;
  line-height: 1.6;
  color: var(--dp-faint);
  padding: .34rem 0;
}
.ev-cite li + li { border-top: 1px solid var(--dp-line); }
.ev-cite em { color: var(--dp-dim); font-style: italic; }
.ev-cite a, .ev-meta a { color: var(--dp-gold); }
.ev-cite code {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--dp-gold);
  background: var(--dp-panel-2);
  padding: .5rem .7rem;
  display: inline-block;
  word-break: break-all;
}

.ev-foot, .ev-meta {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  line-height: 1.8;
  color: var(--dp-faint);
  margin: 0;
}
.ev-card { margin-bottom: 1rem; }
.ev-card h3 {
  font-family: var(--dp-display);
  font-weight: 400;
  font-size: .88rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-gold);
  margin-bottom: .8rem;
}

/* the rule that slides in under a section title */
h2.t::after { background: var(--dp-gold); height: 1px; }

/* ====================== motion ======================
   Entrances only. Nothing drifts once it has arrived. */
.logo, .stat, .stamp, .step .ic, .band.on, .nav-l a { animation: none !important; }
.nav-l a, .bg-g a { opacity: 1; }

/* scroll reveal, driven by theme.js on pages that lack their own */
[data-dp-rv] { opacity: 0; transform: translateY(22px); }
[data-dp-rv].dp-in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-dp-rv].dp-in.d1 { transition-delay: .07s }
[data-dp-rv].dp-in.d2 { transition-delay: .14s }
[data-dp-rv].dp-in.d3 { transition-delay: .21s }
[data-dp-rv].dp-in.d4 { transition-delay: .28s }

/* gold rule that draws itself under a section heading */
.section-divider span::after {
  content: ""; display: block; height: 1px; width: 0;
  background: var(--dp-gold); margin-top: 7px;
}
.section-divider.dp-in span::after { width: 100%; transition: width .8s cubic-bezier(.2,.7,.2,1) .1s; }

/* ========================= a11y ========================= */

:focus-visible { outline: 2px solid var(--dp-gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .stage svg, .bigmap svg { filter: none; }
  [data-dp-rv] { opacity: 1; transform: none; }
  .section-divider span::after { width: 100%; }
}

/* ========================= mobile ========================= */

@media (max-width: 600px) {
  .hero h1 { letter-spacing: .03em; }
  .hero-search { margin: 20px 0 18px; flex-direction: column; padding: 0; }
  .hero-search input { text-align: center; border-bottom: 1px solid var(--dp-line-lit); }
  .hero-search button { width: 100%; border-left: 0; }
  .stage svg, .bigmap svg { filter: none; }
  .pz { background: var(--dp-panel); border-bottom: 1px solid var(--dp-line); }
  .price-zones-mobile { border: 1px solid var(--dp-line); }
  .pz .z small { color: var(--dp-faint); }
  .pz .p { color: var(--dp-gold); }
}