/* SKPDRart — design tokens + site-wide design system (single visual language)
   ---------------------------------------------------------------------------
   Loaded on all four pages (index / services / gallery / quote) as the LAST
   stylesheet, so the rules below are the shared layer the four pages inherit.

   Rules of the house:
   - Colour: only the palette tokens in :root. No literal hex anywhere else.
     Every surface/shade is an alpha variant of an existing token (rgb + /a).
   - Rhythm: 4/8 base. Sections use exactly three vertical steps
     (96 / 64 / 40) and cards use one of two paddings (32 / 24).
   - Gold is an accent, never a surface: heading gradient, CTA fill, numeric
     badge, hover border, small kicker/link. Nothing else.
   - Every clickable thing has hover / focus-visible / active / disabled.
*/

:root {
  /* ---- palette (the only colour definitions in the project) ---- */
  --gold: #d4af37;
  --gold-light: #f1d592;
  --ink: #0f0f0f;
  --ink-2: #141414;
  --card: #1a1a1a;
  --footer: #080808;
  --paper: #ffffff;
  --gold-rgb: 212 175 55;
  --gold-light-rgb: 241 213 146;
  --ink-rgb: 15 15 15;
  --ink-2-rgb: 20 20 20;
  --card-rgb: 26 26 26;
  --footer-rgb: 8 8 8;
  --paper-rgb: 255 255 255;
  /* semantic red for form errors / destructive feedback (rgb tuple, not a hex) */
  --danger-rgb: 239 68 68;
  --danger: rgb(var(--danger-rgb));

  /* ---- 1. spacing rhythm (4 / 8 base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-24: 96px;

  /* section rhythm — three steps, nothing else */
  --section-lg: 96px; /* one per page: the biggest break */
  --section-md: 64px; /* supporting sections */
  --section-sm: 40px; /* tight hand-off (map -> note, toolbars) */
  --card-pad: 32px;
  --card-pad-sm: 24px;

  /* ---- 2. type scale (five steps, fixed line-height + weight) ---- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --fs-h1: clamp(2.5rem, 6.2vw, 4.25rem);
  --lh-h1: 1.05;
  --fw-h1: 700;
  --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --lh-h2: 1.2;
  --fw-h2: 700;
  --fs-h3: 1.25rem;
  --lh-h3: 1.35;
  --fw-h3: 600;
  --fs-body: 1rem;
  --lh-body: 1.7;
  --fw-body: 400;
  --fs-small: 0.875rem;
  --lh-small: 1.6;
  /* label, not a text step: eyebrows / kickers / table captions */
  --fs-label: 0.75rem;
  --track-label: 0.24em;

  /* ---- 3. card system ---- */
  --radius-card: 12px;
  --radius-input: 10px;
  --radius-pill: 9999px;
  --card-line: rgb(var(--paper-rgb) / 0.1);
  --card-line-hover: rgb(var(--gold-rgb) / 0.45);
  --card-bg: var(--card);
  --shadow-card: 0 1px 2px rgb(var(--footer-rgb) / 0.5), 0 12px 28px rgb(var(--footer-rgb) / 0.35);
  --shadow-card-hover: 0 2px 4px rgb(var(--footer-rgb) / 0.55), 0 20px 44px rgb(var(--footer-rgb) / 0.5);
  --shadow-cta: 0 10px 26px rgb(var(--gold-rgb) / 0.22);

  /* ---- 4. accent usage ---- */
  --gold-line: rgb(var(--gold-rgb) / 0.4);
  --gold-soft: rgb(var(--gold-rgb) / 0.14);
  --gold-wash: radial-gradient(120% 100% at 50% 0%, rgb(var(--gold-rgb) / 0.12) 0%, transparent 62%);

  /* ---- 5. interaction ---- */
  --dur: 180ms; /* <= 200ms, CSS only */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --focus-color: var(--gold);
  --focus-w: 2px;
  --focus-offset: 2px;

  /* ---- 6. layout ---- */
  --container: 1280px; /* = Tailwind max-w-7xl (80rem) */
  --gutter: 32px;
}

@media (max-width: 1023px) {
  :root {
    --gutter: 24px;
    --section-lg: 64px;
    --section-md: 40px;
    --section-sm: 32px;
    --card-pad: 24px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Type steps are declared on `body h1` etc. so they win over Tailwind's
   preflight reset (`h1{font-size:inherit}`), which the CDN injects last. */
body h1,
body h2,
body h3 {
  margin: 0 0 var(--space-4);
  color: var(--paper);
  text-wrap: balance;
}

body h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: -0.01em;
}

body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: -0.005em;
}

body h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}

body p {
  margin: 0 0 var(--space-4);
}

.pdr-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgb(var(--paper-rgb) / 0.72);
}

.pdr-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgb(var(--paper-rgb) / 0.62);
}

/* label / eyebrow — one shape for every page */
.pdr-label,
.pdr-kicker,
.svc-kicker,
.svc-eyebrow,
.pdr-gallery .eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}

.pdr-kicker,
.svc-kicker {
  display: block;
  margin: 0 0 var(--space-3);
  letter-spacing: 0.3em;
}

.pdr-label,
.svc-eyebrow,
.pdr-gallery .eyebrow {
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
  letter-spacing: 0.3em;
  font-weight: 400;
}

.brand-font {
  font-family: var(--font-display);
}

/* ==========================================================================
   Layout — one container, one gutter ramp
   ========================================================================== */
.pdr-container,
.svc-wrap,
.pdr-gallery .wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

/* three vertical steps only */
.pdr-section,
.svc-section,
.svc-cta {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.pdr-section--md {
  padding-top: var(--section-md);
  padding-bottom: var(--section-md);
}

.pdr-section--sm {
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}

.pdr-section--alt,
.svc-section-alt {
  background: var(--ink-2);
  border-top: 1px solid rgb(var(--paper-rgb) / 0.06);
  border-bottom: 1px solid rgb(var(--paper-rgb) / 0.06);
}

/* section head: same measure and gap everywhere */
.pdr-head,
.svc-head {
  max-width: 64ch;
  margin: 0 0 var(--space-10);
}

.pdr-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pdr-head > p:last-child,
.svc-head p {
  margin: 0;
  color: rgb(var(--paper-rgb) / 0.72);
  font-size: var(--fs-body);
}

/* ==========================================================================
   3. Card system — one base card, four derivatives
   ========================================================================== */
.pdr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* hover + keyboard focus raise the card (one behaviour, all cards) */
.pdr-card.is-interactive:hover,
.pdr-card.is-interactive:focus-within {
  border-color: var(--card-line-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Card titles always sit on the h3 step, whatever their tag — so a card reads
   the same on Home, Services and Gallery. */
.pdr-card h2,
.pdr-card h3,
.svc-card h3,
.pdr-step h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  margin: 0 0 var(--space-3);
}

/* service card: the interactive card + a gold hairline that lights up */
.pdr-card--service::before,
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease);
}

.pdr-card--service:hover::before,
.pdr-card--service:focus-within::before,
.svc-card:hover::before {
  opacity: 1;
}

/* case card (gallery): media-first, zero padding so the photo bleeds */
.pdr-card--case {
  padding: 0;
  overflow: hidden;
}

/* form card: no lift (nothing to click), gold-tinted hairline border */
.pdr-card--form {
  padding: var(--card-pad);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-card);
}

/* note / hint card: quiet, no interaction */
.pdr-card--note {
  padding: var(--space-6);
  background: var(--ink-2);
  box-shadow: none;
  border-color: rgb(var(--paper-rgb) / 0.08);
}

/* numeric badge — one of the four sanctioned gold uses */
.pdr-badge,
.pdr-gallery .case-hours {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgb(var(--footer-rgb) / 0.45);
}

/* ==========================================================================
   Buttons — primary (gold) / ghost, all four states
   ========================================================================== */
.btn-gold {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
  filter: brightness(1.04);
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow: none;
  filter: brightness(0.96);
}

.btn-gold:disabled,
.btn-gold[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-4) var(--space-10);
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.pdr-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgb(var(--gold-rgb) / 0.3);
}

.pdr-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: none;
}

.pdr-btn:disabled,
.pdr-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* secondary: outline, no gold fill */
.pdr-btn--ghost,
.svc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-4) var(--space-10);
  border: 1px solid rgb(var(--paper-rgb) / 0.28);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.pdr-btn--ghost:hover,
.svc-btn-ghost:hover {
  border-color: rgb(var(--paper-rgb) / 0.6);
  background: rgb(var(--paper-rgb) / 0.04);
  transform: translateY(-2px);
}

.pdr-btn--ghost:active,
.svc-btn-ghost:active {
  transform: translateY(0);
  background: rgb(var(--paper-rgb) / 0.08);
}

.pdr-btn--ghost:disabled,
.svc-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* services page CTA reuses the primary button, defined once here */
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-4) var(--space-10);
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.svc-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgb(var(--gold-rgb) / 0.3);
}

.svc-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: none;
}

.svc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   5. Interaction states — hover / focus-visible / active / disabled
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* text links inside body copy */
.pdr-body a,
.svc-note a,
.pdr-gallery .lede a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}

.pdr-body a:hover,
.svc-note a:hover,
.pdr-gallery .lede a:hover {
  color: var(--gold-light);
}

/* disabled controls, wherever they are */
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Quote success toast — same tokens, same card edge as the rest of the site
   ========================================================================== */
.quote-toast {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  background: rgb(var(--ink-rgb) / 0.72);
}

.quote-toast[hidden] {
  display: none;
}

.quote-toast-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  box-sizing: border-box;
  padding: 1.25rem 3rem 1.25rem 1.5rem;
  border: 1px solid var(--card-line-hover);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card-hover);
}

@media (max-width: 420px) {
  .quote-toast-card {
    padding: 1rem 2.75rem 1rem 1rem;
  }
}

.quote-toast-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gold-light);
}

.quote-toast-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgb(var(--gold-rgb) / 0.45);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gold-light);
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.quote-toast-close:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-soft);
}

.quote-toast-close:active {
  background: rgb(var(--gold-rgb) / 0.24);
}

/* ==========================================================================
   Page glue — the legacy per-page stylesheets, pulled onto the shared system
   (services.css / gallery.css / dentmap.css are loaded before this file)
   ========================================================================== */

/* ---------- Services ---------- */
.svc-page {
  font-family: var(--font-body);
}

.svc-hero {
  padding: calc(80px + var(--section-lg)) 0 var(--section-lg);
  background: var(--gold-wash), var(--ink);
  border-bottom: 1px solid rgb(var(--paper-rgb) / 0.06);
}

.svc-hero h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 18ch;
}

.svc-lede {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgb(var(--paper-rgb) / 0.72);
  max-width: 62ch;
}

.svc-actions {
  gap: var(--space-4);
}

.svc-section,
.svc-cta {
  padding-top: var(--section-lg);
  padding-bottom: var(--section-lg);
}

.svc-head {
  margin-bottom: var(--space-10);
}

.svc-h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.svc-cards,
.svc-flow,
.svc-area {
  gap: var(--space-6);
}

.svc-card {
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  border-color: var(--card-line);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.svc-card h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}

.svc-card p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgb(var(--paper-rgb) / 0.72);
}

.svc-step h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
}

.svc-area-item {
  padding: var(--card-pad-sm);
  border-radius: var(--radius-card);
  border-color: var(--card-line);
}

.svc-area-item p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.svc-cta-card {
  padding: var(--space-16) var(--card-pad);
  border-radius: var(--radius-card);
  border-color: var(--gold-line);
  background: var(--gold-wash), var(--card);
  box-shadow: var(--shadow-card);
}

@media (max-width: 899px) {
  .svc-hero {
    padding: calc(80px + var(--section-md)) 0 var(--section-md);
  }
  .svc-section,
  .svc-cta {
    padding-top: var(--section-md);
    padding-bottom: var(--section-md);
  }
  .svc-head {
    margin-bottom: var(--space-6);
  }
  .svc-card {
    padding: var(--card-pad-sm);
  }
  .svc-cta-card {
    padding: var(--space-10) var(--card-pad-sm);
  }
}

/* ---------- Gallery ---------- */
/* realign the gallery's private palette onto the site tokens (no new colours) */
.pdr-gallery {
  --panel: var(--card);
  --line: var(--card-line);
  --gold: rgb(var(--gold-rgb));
  --gold-soft: rgb(var(--gold-light-rgb));
  --text: var(--paper);
  --muted: rgb(var(--paper-rgb) / 0.62);
  font-family: var(--font-body);
  padding: var(--section-lg) 0;
  background: var(--ink);
}

.pdr-gallery h1 {
  margin: 0 0 var(--space-4);
}

.pdr-gallery .lede {
  color: rgb(var(--paper-rgb) / 0.72);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 62ch;
}

.pdr-gallery .lede.en {
  font-size: var(--fs-small);
  opacity: 1;
  color: rgb(var(--paper-rgb) / 0.55);
}

.pdr-gallery .rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), transparent 60%);
  margin: var(--space-6) 0 var(--space-10);
  opacity: 0.9;
}

.pdr-gallery .grid {
  gap: var(--space-6);
}

.pdr-gallery .case {
  padding: 0;
  border-radius: var(--radius-card);
  border: 1px solid var(--card-line);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.pdr-gallery .case:hover,
.pdr-gallery .case:focus-within {
  border-color: var(--card-line-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.pdr-gallery .case-head {
  padding: var(--space-3) var(--space-4) var(--space-1);
}

.pdr-gallery .chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line);
  color: var(--gold-light);
  font-weight: 700;
}

.pdr-gallery .case-body {
  padding: var(--space-4) var(--space-6) var(--space-6);
  gap: var(--space-1);
}

.pdr-gallery .case-body h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  font-family: var(--font-body);
}

.pdr-gallery .case-body .desc {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: rgb(var(--paper-rgb) / 0.72);
}

/* the hours badge always sits in the same corner of every card */
.pdr-gallery .case-hours {
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
}

/* visible "this photo opens" affordance — not cursor-only */
.pdr-gallery .shot::after {
  content: '\2922';
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line);
  background: rgb(var(--footer-rgb) / 0.72);
  color: var(--gold-light);
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* hover: gold fill + ink glyph (9.3:1, measured) — --gold-soft is the
   gallery's text tint, so it must not be reused as this background */
.pdr-gallery .shot:hover::after,
.pdr-gallery .shot:focus-within::after {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
}

.pdr-gallery .shot-open {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  text-decoration: none;
}

.pdr-gallery .badge {
  background: rgb(var(--footer-rgb) / 0.93);
  border: 1px solid rgb(var(--paper-rgb) / 0.18);
  border-radius: 6px;
}

dialog.lb,
dialog#pdr-zoom {
  background: rgb(var(--footer-rgb) / 0.96);
  color: var(--paper);
  font-family: var(--font-body);
}

/* ---------- Quote ---------- */
.quote-form {
  padding: var(--card-pad);
  margin-top: var(--space-8);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

/* group 0: contact fields (the top grid) reads as a group card too */
.quote-form form > .grid {
  padding: var(--card-pad-sm);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  background: var(--ink-2);
}

.quote-form fieldset.dentmap {
  margin: var(--space-6) 0 0;
  padding: var(--card-pad-sm);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  background: var(--ink-2);
  /* dentmap.css ships its own muted grey for the caption under the map,
     the abbreviation legend, the hints and the chip placeholder. Measured on
     --ink-2 that legacy grey is 5.22:1 — legal for body text, but at 12px it
     reads as a faded footnote. Re-point the token at the house muted
     convention (paper @62%, same ratio as --muted) => 7.54:1.
     No new colour literal, no change to dentmap.css. */
  --dm-muted: rgb(var(--paper-rgb) / 0.62);
}

.quote-form fieldset.dentmap > legend {
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
}

/* one label / field / hint / error stack, same spacing everywhere */
.quote-form label {
  font-size: var(--fs-small);
  color: rgb(var(--paper-rgb) / 0.72);
}

.quote-form input[type='text'],
.quote-form input[type='tel'],
.quote-form input[type='email'] {
  min-height: 48px;
  border-radius: var(--radius-input);
  border: 1px solid rgb(var(--paper-rgb) / 0.2);
  background: var(--card);
  color: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.quote-form input[type='text']:hover,
.quote-form input[type='tel']:hover,
.quote-form input[type='email']:hover {
  border-color: rgb(var(--paper-rgb) / 0.35);
}

.quote-form input[type='text']:focus,
.quote-form input[type='tel']:focus,
.quote-form input[type='email']:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 0.18);
}

.quote-form input.border-red-500 {
  border-color: rgb(var(--danger-rgb) / 0.9);
}

/* error / hint text: always directly under its field, never jumping layout */
.quote-form [role='alert'] {
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--danger);
}

.quote-form [role='alert'][hidden] {
  display: none;
}

/* submit row: the strongest element on the page */
.quote-actions {
  margin-top: var(--space-8);
}

.quote-actions .pdr-btn,
.quote-actions .btn-gold {
  min-height: 56px;
  padding: var(--space-4) var(--space-16);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.quote-call {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-small);
  color: rgb(var(--paper-rgb) / 0.62);
}

@media (max-width: 767px) {
  .quote-form {
    padding: var(--card-pad-sm);
    margin-top: var(--space-6);
  }
  .quote-form form > .grid,
  .quote-form fieldset.dentmap {
    padding: var(--space-4);
  }
  .quote-actions .pdr-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  /* the sticky submit bar bleeds to the card edge, so it uses the card padding */
  .quote-actions {
    margin: var(--space-4) calc(var(--card-pad-sm) * -1) 0;
    padding: var(--space-3) var(--card-pad-sm) var(--space-4);
    background: linear-gradient(to top, rgb(var(--ink-rgb) / 0.98), rgb(var(--ink-rgb) / 0.92));
    border-top: 1px solid var(--gold-line);
  }
}

/* ==========================================================================
   Heading accent — the only place gold fills type
   ========================================================================== */
.gold-gradient {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Hero (home) ---------- */
.pdr-hero-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.pdr-hero-inner h1 {
  margin: 0 0 var(--space-6);
}

.pdr-hero-lede {
  max-width: 34rem;
  margin: 0 auto var(--space-10);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgb(var(--paper-rgb) / 0.78);
}

.pdr-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .pdr-hero-actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
  }
}

@media (max-width: 767px) {
  .pdr-hero-inner {
    padding: 0 var(--space-6);
  }
  .pdr-hero-inner h1 {
    margin-bottom: var(--space-4);
  }
  .pdr-hero-lede {
    font-size: 1rem;
    margin-bottom: var(--space-6);
  }
}

/* service / map / step grids — one column rhythm for all cards */
.pdr-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 768px) {
  .pdr-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pdr-mapcard {
  padding: 0;
  overflow: hidden;
}

.pdr-mapcard iframe {
  display: block;
  width: 100%;
}

.pdr-mapnote {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: rgb(var(--paper-rgb) / 0.62);
}

/* instrument card for the repair-time bars */
.pdr-bars-card {
  padding: var(--card-pad-sm) var(--card-pad);
}

@media (max-width: 767px) {
  .pdr-bars-card {
    padding: var(--space-4);
  }
}

/* inline confirmation banner (quote form, ?quote=thanks) */
.pdr-thanks {
  padding: var(--space-4);
  border: 1px solid var(--card-line-hover);
  border-radius: var(--radius-card);
  background: var(--gold-soft);
  color: var(--paper);
  font-size: var(--fs-small);
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Reduced motion — no transforms, no transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pdr-card,
  .btn-gold,
  .pdr-btn,
  .pdr-btn--ghost,
  .svc-btn,
  .svc-card,
  .pdr-gallery .case,
  .quote-toast-close,
  .pdr-gallery .shot::after {
    transition: none;
  }
  .pdr-card:hover,
  .pdr-card:focus-within,
  .btn-gold:hover,
  .pdr-btn:hover,
  .pdr-btn--ghost:hover,
  .svc-btn:hover,
  .pdr-gallery .case:hover,
  .pdr-gallery .case:focus-within {
    transform: none;
  }
  .pdr-gallery .shot:hover::after {
    transform: none;
  }
}

/* ---- client trademark lockup (image wordmark in the nav, full lockup in the
   footer) ---- Assets are the client's own artwork (true-transparent PNG),
   scaled only: images/logo-word-40|80.png (nav, 40px / 2x) and
   images/logo-lockup-96|192.png (footer, 96px / 2x). Nothing is redrawn here,
   and the orange/blue glow that lives inside the artwork never becomes UI
   colour — the accent stays --gold. */
.brand-lock {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}
.brand-lockup-img {
  display: block;
  height: 96px;
  width: auto;
  max-width: 242px;
}

/* The image wordmark has to share one row with the phone CTA at 390px, and with
   the desktop nav links plus CTA at 768–899px, so it steps down in size there
   rather than disappearing — the brand name stays on screen at every width. */
@media (max-width: 640px) {
  .brand-logo {
    height: 28px;
  }
}
@media (max-width: 380px) {
  .brand-logo {
    height: 22px;
  }
}
@media (max-width: 899px) and (min-width: 768px) {
  .brand-logo {
    height: 24px;
  }
}