/* ==========================================================================
   Delhi Golden Doodle — breed x city pages
   --------------------------------------------------------------------------
   One stylesheet for all 877 of them. It was inline on every page before,
   which meant eight kilobytes repeated 877 times and no way to change the
   design without regenerating everything. Shared, it is fetched once and
   cached, and a change here reaches every page.

   Everything below is built on the tokens already declared in
   design-system.css — the gold, the cream, the forest, the two typefaces.
   Nothing here introduces a new colour or a new font.
   ========================================================================== */

.bc { --bc-gutter: clamp(20px, 4vw, 34px); }

.bc-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}

/* ---- section rhythm -----------------------------------------------------
   Three surfaces, alternating, so the eye can tell where one idea ends and
   the next begins without a rule between them. */
.bc-sec { padding: clamp(52px, 6.4vw, 96px) 0; }
.bc-sec--cream { background: var(--dgd-cream, #FBF6EC); }
.bc-sec--white { background: var(--dgd-white, #fff); }
.bc-sec--sand  { background: linear-gradient(180deg, #FDFAF4 0%, #F7EFE1 100%); }

/* ---- section heading block ---- */
.bc-head { max-width: 62ch; margin: 0 0 clamp(26px, 3vw, 40px); }
.bc-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.bc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dgd-sans, system-ui);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #8A6410; margin: 0 0 14px;
}
.bc-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--dgd-gold, #C4881F), #E3B45C);
}
.bc-sec--forest .bc-eyebrow { color: var(--dgd-gold-light, #EFC876); }
.bc-sec--forest .bc-eyebrow::before { background: linear-gradient(90deg, var(--dgd-gold-light, #EFC876), transparent); }

.bc-h2 {
  font-family: var(--dgd-serif, Georgia), serif;
  font-size: clamp(25px, 3.3vw, 38px); line-height: 1.16; letter-spacing: -.018em;
  color: var(--dgd-ink, #201811); margin: 0 0 14px; text-wrap: balance;
}
.bc-p {
  font-size: 16.5px; line-height: 1.75; color: var(--dgd-ink-2, #4B3B2E);
  margin: 0 0 16px; max-width: 66ch;
}
.bc-p:last-child { margin-bottom: 0; }
.bc-p--lead { font-size: 18px; line-height: 1.7; color: var(--dgd-ink-2, #4B3B2E); }

/* ==========================================================================
   Hero
   ========================================================================== */
.bc-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 88% 8%, rgba(196,136,31,.24) 0%, rgba(196,136,31,0) 58%),
    linear-gradient(152deg, #123E30 0%, #0D3628 46%, #241A10 100%);
  padding: clamp(46px, 6vw, 88px) 0 clamp(52px, 6.4vw, 92px);
}
.bc-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--dgd-gold, #C4881F), transparent);
  opacity: .5;
}
.bc-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 3.6vw, 56px); align-items: center;
}
.bc-hero h1 {
  font-family: var(--dgd-serif, Georgia), serif;
  font-size: clamp(30px, 4.5vw, 52px); line-height: 1.08; letter-spacing: -.022em;
  color: var(--dgd-cream, #FBF6EC); margin: 0 0 18px; text-wrap: balance;
}
.bc-hero__lead {
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.72;
  color: rgba(251,246,236,.84); margin: 0 0 26px; max-width: 54ch;
}
.bc-crumbs {
  font-size: 13.2px; line-height: 1.5; color: rgba(251,246,236,.62);
  margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.bc-crumbs a { color: rgba(251,246,236,.84); text-decoration: none; border-bottom: 1px solid rgba(239,200,118,.36); }
.bc-crumbs a:hover { color: var(--dgd-gold-light, #EFC876); border-bottom-color: var(--dgd-gold-light, #EFC876); }
.bc-crumbs [aria-current] { color: rgba(251,246,236,.62); }

/* quick facts under the hero copy */
.bc-facts { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 28px; padding: 0; list-style: none; }
.bc-facts li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(239,200,118,.3); background: rgba(255,255,255,.06);
  font-size: 13.2px; line-height: 1.35; color: rgba(251,246,236,.9);
}
.bc-facts b { font-weight: 600; color: var(--dgd-gold-light, #EFC876); }

/* hero visual panel */
.bc-hero__panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(239,200,118,.24);
  border-radius: var(--dgd-r-lg, 28px);
  padding: clamp(14px, 1.4vw, 20px);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.bc-hero__panel .bc-ph { border-color: rgba(239,200,118,.4); background: rgba(255,255,255,.05); color: var(--dgd-gold-light, #EFC876); }
.bc-hero__panel .bc-ph__hint { color: rgba(251,246,236,.66); }
.bc-hero__caption {
  margin: 12px 4px 2px; font-size: 12.6px; line-height: 1.5;
  color: rgba(251,246,236,.6); text-align: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.bc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-sizing: border-box; padding: 15px 30px; min-height: 52px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              box-shadow var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              background-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-btn:hover { transform: translateY(-2px); }
.bc-btn:active { transform: translateY(0); }
.bc-btn--gold {
  background: linear-gradient(180deg, #D9982B 0%, var(--dgd-gold, #C4881F) 100%);
  border-color: var(--dgd-gold, #C4881F); color: #241705;
  box-shadow: 0 6px 18px rgba(196,136,31,.3);
}
.bc-btn--gold:hover { box-shadow: 0 10px 26px rgba(196,136,31,.42); }
.bc-btn--wa {
  background: linear-gradient(180deg, #2BDE74 0%, #21B45E 100%);
  border-color: #21B45E; color: #04331A;
  box-shadow: 0 6px 18px rgba(33,180,94,.26);
}
.bc-btn--wa:hover { box-shadow: 0 10px 26px rgba(33,180,94,.38); }
.bc-btn--ghost {
  background: rgba(255,255,255,.07); border-color: rgba(239,200,118,.42);
  color: var(--dgd-cream, #FBF6EC);
}
.bc-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: var(--dgd-gold-light, #EFC876); }
.bc-btn__ico { width: 17px; height: 17px; flex: 0 0 17px; fill: currentColor; }

.bc-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.bc-actions--center { justify-content: center; }

/* ==========================================================================
   Image placeholder
   A deliberate, finished-looking empty state. Never a broken image, never a
   photograph of a dog we cannot identify, and never dressed up to look like
   a real listing.
   ========================================================================== */
.bc-ph {
  box-sizing: border-box; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px; text-align: center; min-width: 0;
  background: linear-gradient(145deg, #FBF5EA 0%, #F2E7D4 100%);
  border: 1.5px dashed rgba(160,120,52,.44);
  border-radius: var(--dgd-r-md, 18px);
  color: #8A6410;
}
.bc-ph::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(45deg, transparent 0 11px, rgba(196,136,31,.07) 11px 22px);
}
.bc-ph > * { position: relative; }
.bc-ph__ico { width: 26px; height: 26px; fill: currentColor; opacity: .5; }
.bc-ph__label {
  font-size: clamp(10px, 1.05vw, 12.5px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.bc-ph__hint { font-size: clamp(10px, .95vw, 12.5px); line-height: 1.45; opacity: .82; max-width: 26ch; }
.bc-ph--tall { aspect-ratio: 4 / 5; width: 100%; }
.bc-ph--wide { aspect-ratio: 16 / 10; width: 100%; }
.bc-ph--sq   { aspect-ratio: 1 / 1; width: 100%; }

/* Supplied dog photographs are examples, not live city availability listings. */
.bc-photo { box-sizing: border-box; min-width: 0; margin: 0; overflow: hidden;
  border: 1px solid var(--dgd-line-soft, #F0E7D8); border-radius: var(--dgd-r-md, 18px);
  background: var(--dgd-white, #fff); }
.bc-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.bc-photo--wide img { aspect-ratio: 16 / 10; }
.bc-photo--tall img { aspect-ratio: 4 / 5; }
.bc-photo--portrait img { aspect-ratio: 3 / 4; object-fit: contain; }
.bc-photo--natural img { aspect-ratio: auto; }
.bc-photo figcaption { padding: 10px 12px; color: var(--dgd-ink-3, #6E5B49);
  font-size: 12px; line-height: 1.45; }
.bc-hero__panel .bc-photo { border-color: rgba(239,200,118,.4); background: rgba(255,255,255,.05); }
.bc-hero__panel .bc-photo figcaption { color: rgba(251,246,236,.8); }
.bc-media-unavailable { margin: 0; padding: 22px; border: 1px solid var(--dgd-line-soft, #F0E7D8);
  border-radius: var(--dgd-r-md, 18px); color: var(--dgd-ink-3, #6E5B49);
  background: rgba(255,255,255,.07); font-size: 14px; line-height: 1.6; }
.bc-ai-disclosure { font-weight: 650; color: var(--dgd-ink, #201811); }
.bc-image-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--dgd-ink-3, #6E5B49); }
.bc-family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(14px, 2vw, 22px); align-items: start; }
.bc-family-grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bc-family-scene { margin: 0; overflow: hidden; border-radius: var(--dgd-r-md, 18px);
  border: 1px solid var(--dgd-line-soft, #F0E7D8); background: var(--dgd-white, #fff);
  box-shadow: var(--dgd-shadow-sm, 0 2px 8px rgba(60,42,28,.06)); }
.bc-family-scene img { display: block; width: 100%; height: auto; object-fit: cover; }

/* ==========================================================================
   Cards
   ========================================================================== */
.bc-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); list-style: none; margin: 0; padding: 0; }
.bc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.bc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(246px, 1fr)); }
.bc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.bc-card {
  position: relative; box-sizing: border-box;
  background: var(--dgd-white, #fff);
  border: 1px solid var(--dgd-line-soft, #F0E7D8);
  border-radius: var(--dgd-r-md, 18px);
  padding: clamp(20px, 2vw, 26px);
  box-shadow: var(--dgd-shadow-sm, 0 2px 8px rgba(60,42,28,.06));
  transition: transform var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              box-shadow var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dgd-shadow-md, 0 8px 24px rgba(60,42,28,.1));
  border-color: var(--dgd-gold-mid, #EFDCB2);
}
.bc-card h3 {
  font-family: var(--dgd-serif, Georgia), serif;
  font-size: 19px; line-height: 1.26; letter-spacing: -.01em;
  color: var(--dgd-ink, #201811); margin: 0 0 9px;
}
.bc-card p { font-size: 14.8px; line-height: 1.66; color: var(--dgd-ink-3, #6E5B49); margin: 0; }
.bc-card a { color: inherit; text-decoration: none; }
.bc-card a:hover { color: #8A6410; }

/* a card with a gold rule on top, for the "types" row */
.bc-card--accent { border-top: 3px solid var(--dgd-gold, #C4881F); }
.bc-card__tag {
  display: inline-block; margin: 0 0 10px; padding: 4px 11px;
  border-radius: 999px; background: #FCF3E1; color: #8A6410;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ==========================================================================
   Numbered steps
   ========================================================================== */
.bc-steps { list-style: none; margin: 0; padding: 0; counter-reset: bc; }
.bc-steps li {
  counter-increment: bc; position: relative;
  padding: 0 0 16px 46px; font-size: 16.2px; line-height: 1.66;
  color: var(--dgd-ink-2, #4B3B2E);
}
.bc-steps li:last-child { padding-bottom: 0; }
.bc-steps li::before {
  content: counter(bc); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #F6E3B8 0%, var(--dgd-gold-mid, #EFDCB2) 100%);
  border: 1px solid rgba(196,136,31,.34);
  color: #6E4A09; font-weight: 700; font-size: 13.5px;
  font-family: var(--dgd-sans, system-ui);
}

/* ==========================================================================
   Specification table
   ========================================================================== */
.bc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--dgd-r-md, 18px); }
.bc-table {
  width: 100%; border-collapse: collapse;
  background: var(--dgd-white, #fff);
  border: 1px solid var(--dgd-line-soft, #F0E7D8);
  border-radius: var(--dgd-r-md, 18px);
  overflow: hidden;
}
.bc-table caption {
  caption-side: top; text-align: left; padding: 0 0 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #8A6410;
}
.bc-table th, .bc-table td {
  text-align: left; padding: 14px 18px; font-size: 15.4px; line-height: 1.58;
  border-bottom: 1px solid var(--dgd-line-soft, #F0E7D8); vertical-align: top;
}
.bc-table tr:last-child th, .bc-table tr:last-child td { border-bottom: 0; }
.bc-table th { width: 34%; font-weight: 700; color: var(--dgd-ink, #201811); background: #FDFAF4; }
.bc-table td { color: var(--dgd-ink-2, #4B3B2E); }
@media (max-width: 600px) {
  .bc-table, .bc-table tbody, .bc-table tr, .bc-table th, .bc-table td { display: block; width: auto; }
  .bc-table tr { border-bottom: 1px solid var(--dgd-line-soft, #F0E7D8); padding: 4px 0; }
  .bc-table tr:last-child { border-bottom: 0; }
  .bc-table th { background: none; padding: 12px 16px 2px; font-size: 12.5px;
    letter-spacing: .06em; text-transform: uppercase; color: #8A6410; border: 0; }
  .bc-table td { padding: 0 16px 13px; border: 0; }
}

/* ==========================================================================
   Callout
   ========================================================================== */
.bc-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FCF6E9; border: 1px solid var(--dgd-gold-mid, #EFDCB2);
  border-left: 4px solid var(--dgd-gold, #C4881F);
  border-radius: var(--dgd-r-sm, 10px);
  padding: 17px 20px; margin: clamp(22px, 2.4vw, 30px) 0 0;
  font-size: 15.6px; line-height: 1.68; color: var(--dgd-ink-2, #4B3B2E);
}
.bc-note:last-child { margin-bottom: 0; }
.bc-note strong { color: var(--dgd-ink, #201811); }
.bc-note__ico { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; fill: var(--dgd-gold, #C4881F); }

/* ==========================================================================
   Availability panel
   ========================================================================== */
.bc-avail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(26px, 3vw, 46px); align-items: center; }
.bc-avail__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; min-width: 0; }

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.bc-form {
  background: var(--dgd-white, #fff);
  border: 1px solid var(--dgd-line-soft, #F0E7D8);
  border-radius: var(--dgd-r-lg, 28px);
  padding: clamp(22px, 2.6vw, 36px);
  box-shadow: var(--dgd-shadow-sm, 0 2px 8px rgba(60,42,28,.06));
}
.bc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bc-form__full { grid-column: 1 / -1; }
@media (max-width: 640px) { .bc-form__grid { grid-template-columns: 1fr; } }
.bc-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bc-field label { font-size: 13.4px; font-weight: 600; color: var(--dgd-ink, #201811); }
.bc-field input, .bc-field select, .bc-field textarea {
  box-sizing: border-box; width: 100%; font: inherit; font-size: 15px;
  color: var(--dgd-ink, #201811); padding: 12px 14px;
  border: 1px solid #E3D6C0; border-radius: var(--dgd-r-sm, 10px);
  background: #FDFAF4;
  transition: border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              box-shadow var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-field input:hover, .bc-field select:hover, .bc-field textarea:hover { border-color: #D4C0A0; }
.bc-field input:focus, .bc-field select:focus, .bc-field textarea:focus {
  outline: none; border-color: var(--dgd-gold, #C4881F);
  box-shadow: 0 0 0 3px rgba(196,136,31,.16);
}
.bc-field textarea { resize: vertical; min-height: 84px; }
.bc-form .bc-actions { margin-top: 22px; }
.bc-formnote { margin: 14px 0 0; font-size: 13.4px; line-height: 1.6; color: var(--dgd-ink-3, #6E5B49); }
.bc-err:empty { display: none; }
.bc-err {
  margin: 16px 0 0; padding: 11px 15px; font-size: 14.5px; line-height: 1.55;
  color: #8C2F1D; background: #FDEDEA; border: 1px solid #F3CFC7;
  border-radius: var(--dgd-r-sm, 10px);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.bc-faq { display: grid; gap: 12px; }
.bc-faq details {
  background: var(--dgd-white, #fff);
  border: 1px solid var(--dgd-line-soft, #F0E7D8);
  border-radius: var(--dgd-r-md, 18px);
  overflow: hidden;
  transition: border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-faq details[open] { border-color: var(--dgd-gold-mid, #EFDCB2); }
.bc-faq summary {
  cursor: pointer; list-style: none; padding: 18px 54px 18px 20px; position: relative;
  font-size: 16.2px; font-weight: 600; line-height: 1.5; color: var(--dgd-ink, #201811);
}
.bc-faq summary::-webkit-details-marker { display: none; }
.bc-faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px;
  margin-top: -7px; border-right: 2px solid #A9834A; border-bottom: 2px solid #A9834A;
  transform: rotate(45deg); transition: transform var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.bc-faq summary:focus-visible { outline: 3px solid var(--dgd-gold, #C4881F); outline-offset: -3px; }
.bc-faq p { margin: 0; padding: 0 20px 19px; font-size: 15.4px; line-height: 1.7; color: var(--dgd-ink-2, #4B3B2E); }

/* ==========================================================================
   Sources
   ========================================================================== */
.bc-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bc-src li { font-size: 14.2px; line-height: 1.6; }
.bc-src a { color: var(--dgd-ink-3, #6E5B49); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(110,91,73,.34); }
.bc-src a:hover { color: #8A6410; text-decoration-color: #8A6410; }
.bc-fineprint { font-size: 13.4px; line-height: 1.65; color: var(--dgd-ink-3, #6E5B49); margin: 14px 0 0; }

/* How far a local rule actually reaches. A state service shown on a city page
   has to say so, so this sits directly under the heading and reads as a label
   rather than as part of the claim. */
.bc-scope {
  display: inline-block; margin: 0 0 10px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--dgd-sand, #E8DAC3); color: var(--dgd-ink-2, #4B3B2E);
  font-size: 12.6px; line-height: 1.45; font-weight: 600;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.bc-final {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(54px, 6.4vw, 96px) 0;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(196,136,31,.2) 0%, rgba(196,136,31,0) 60%),
    linear-gradient(152deg, #123E30 0%, #0D3628 48%, #241A10 100%);
}
.bc-final .bc-h2 { color: var(--dgd-cream, #FBF6EC); }
.bc-final .bc-p { color: rgba(251,246,236,.86); margin-left: auto; margin-right: auto; }
.bc-final .bc-head { margin-left: auto; margin-right: auto; text-align: center; }

.bc-links { margin-top: clamp(38px, 4vw, 56px); }
.bc-links__title {
  font-family: var(--dgd-serif, Georgia), serif; font-size: 19px;
  color: var(--dgd-gold-light, #EFC876); margin: 0 0 16px;
}
.bc-links nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.bc-links a {
  display: inline-block; padding: 9px 17px; border-radius: 999px;
  border: 1px solid rgba(239,200,118,.28); background: rgba(255,255,255,.06);
  color: rgba(251,246,236,.92); font-size: 13.4px; text-decoration: none;
  transition: background-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-links a:hover { background: rgba(255,255,255,.13); border-color: var(--dgd-gold-light, #EFC876); }

/* ==========================================================================
   Focus, motion, responsive
   ========================================================================== */
.bc a:focus-visible, .bc button:focus-visible, .bc summary:focus-visible,
.bc input:focus-visible, .bc select:focus-visible, .bc textarea:focus-visible {
  outline: 3px solid var(--dgd-gold, #C4881F); outline-offset: 2px; border-radius: 4px;
}
.bc-hero a:focus-visible, .bc-final a:focus-visible, .bc-final button:focus-visible {
  outline-color: var(--dgd-gold-light, #EFC876);
}

@media (max-width: 960px) {
  .bc-hero__grid { grid-template-columns: 1fr; }
  .bc-hero__panel { max-width: 460px; }
  .bc-avail { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bc-actions .bc-btn { width: 100%; }
  .bc-steps li { padding-left: 42px; font-size: 15.6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-btn, .bc-card, .bc-faq details, .bc-faq summary::after,
  .bc-field input, .bc-field select, .bc-field textarea, .bc-links a { transition: none; }
  .bc-btn:hover, .bc-card:hover { transform: none; }
}

/* ==========================================================================
   Directory pages — state, city hub, nearby metros
   Same tokens, same rhythm as the breed x city pages above.
   ========================================================================== */

/* a plain, dense link grid: the state list, the city list, a metro's members */
.bc-dir { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; }
.bc-dir li { min-width: 0; }
.bc-dir a {
  display: block; padding: 11px 12px; border-radius: var(--dgd-r-sm, 10px);
  font-size: 15.4px; line-height: 1.45; color: var(--dgd-ink-2, #4B3B2E);
  text-decoration: none; border: 1px solid transparent;
  transition: background-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              color var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-dir a:hover { background: #FCF6E9; border-color: var(--dgd-gold-mid, #EFDCB2); color: #8A6410; }
.bc-dir__count { font-size: 12.8px; color: var(--dgd-ink-3, #6E5B49); opacity: .8; }

/* metro group block */
.bc-metro { margin: 0 0 clamp(26px, 3vw, 40px); }
.bc-metro:last-child { margin-bottom: 0; }
.bc-metro h2 {
  font-family: var(--dgd-serif, Georgia), serif; font-size: 22px; line-height: 1.24;
  color: var(--dgd-ink, #201811); margin: 0 0 8px;
}
.bc-metro__states { font-size: 13px; color: #8A6410; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }

/* dog-type cards on a city hub */
.bc-types-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.bc-types-grid a {
  display: block; height: 100%; box-sizing: border-box; text-decoration: none;
  background: var(--dgd-white, #fff); border: 1px solid var(--dgd-line-soft, #F0E7D8);
  border-radius: var(--dgd-r-md, 18px); padding: 22px 20px;
  box-shadow: var(--dgd-shadow-sm, 0 2px 8px rgba(60,42,28,.06));
  transition: transform var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              box-shadow var(--dgd-t-fast, .18s) var(--dgd-ease, ease),
              border-color var(--dgd-t-fast, .18s) var(--dgd-ease, ease);
}
.bc-types-grid a:hover { transform: translateY(-3px);
  box-shadow: var(--dgd-shadow-md, 0 8px 24px rgba(60,42,28,.1));
  border-color: var(--dgd-gold-mid, #EFDCB2); }
.bc-types-grid h3 { font-family: var(--dgd-serif, Georgia), serif; font-size: 19px;
  margin: 0 0 7px; color: var(--dgd-ink, #201811); }
.bc-types-grid p { font-size: 14.6px; line-height: 1.6; margin: 0; color: var(--dgd-ink-3, #6E5B49); }
.bc-types-grid .bc-go { display: inline-block; margin-top: 12px; font-size: 13.6px;
  font-weight: 600; color: #8A6410; }

@media (max-width: 560px) {
  .bc-dir { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
  .bc-dir a { padding: 10px 10px; font-size: 15px; }
}