/* ------------------------------------------------------------------
   Clan Dog - area page components
   Scoped to .cd-area and .cd-hub. Safe to remove as a block.
   Tokens measured from the live site: Playfair Display 500 headings,
   Open Sans 400/16px/24px body, primary #81414A, secondary #64637A.
   ------------------------------------------------------------------ */
.cd-area, .cd-hub {
  --cd-primary: #81414A;
  --cd-primary-dark: #6b353d;
  --cd-secondary: #64637A;
  --cd-ink: #212529;
  --cd-ink-soft: #3C3C3C;
  --cd-line: #E6E6E6;
  --cd-wash: #F7F5F5;
  --cd-serif: "Playfair Display", Georgia, serif;
  --cd-sans: "Open Sans", Helvetica, Arial, sans-serif;
}

/* --- Above the fold ------------------------------------------------ */
.cd-area .cd-hero {
  background-color: #1e1e1e;
  background-image: linear-gradient(180deg, rgba(30,30,30,.72), rgba(30,30,30,.86)), var(--cd-hero-image, none);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 3rem 0 3.5rem;
}
.cd-area .cd-hero h1 {
  font-family: var(--cd-serif);
  font-weight: 500;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.cd-area .cd-eyebrow, .cd-hub .cd-eyebrow {
  font-family: var(--cd-sans);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: .75rem;
}
.cd-hub .cd-eyebrow { color: var(--cd-secondary); }
.cd-answer {
  font-family: var(--cd-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #fff;
  border-left: 3px solid var(--cd-primary);
  padding: .25rem 0 .25rem 1rem;
  margin: 0 0 1.5rem;
  max-width: 46rem;
}
.cd-hub .cd-answer { color: var(--cd-ink); }
.cd-hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.cd-hero-points li {
  font-family: var(--cd-sans);
  font-size: .9375rem;
  color: rgba(255,255,255,.85);
  padding: .2rem 0 .2rem 1.6rem;
  position: relative;
}
.cd-hero-points li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--cd-primary);
}

/* --- Enquiry card (above the fold) --------------------------------- */
.cd-enquiry {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}
.cd-enquiry h2 {
  font-family: var(--cd-serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--cd-ink);
  margin: 0 0 .25rem;
}
.cd-enquiry .cd-enquiry-sub {
  font-family: var(--cd-sans);
  font-size: .875rem;
  color: var(--cd-ink-soft);
  margin: 0 0 1.1rem;
}
.cd-enquiry label {
  font-family: var(--cd-sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cd-ink);
  margin-bottom: .25rem;
  display: block;
}
.cd-enquiry .form-control, .cd-enquiry .form-select {
  border: 1px solid var(--cd-line);
  border-radius: 8px;
  font-family: var(--cd-sans);
  font-size: .9375rem;
  padding: .5rem .75rem;
}
.cd-enquiry .form-control:focus, .cd-enquiry .form-select:focus {
  border-color: var(--cd-primary);
  box-shadow: 0 0 0 .2rem rgba(129,65,74,.15);
}
.cd-enquiry .cd-submit {
  width: 100%;
  background: var(--cd-primary);
  border: .8px solid var(--cd-primary);
  color: #fff;
  border-radius: 100px;
  font-family: var(--cd-sans);
  font-size: 15px;
  padding: .65rem 1rem;
}
.cd-enquiry .cd-submit:hover { background: var(--cd-primary-dark); border-color: var(--cd-primary-dark); }
.cd-enquiry .cd-smallprint {
  font-family: var(--cd-sans);
  font-size: .75rem;
  color: var(--cd-ink-soft);
  margin: .75rem 0 0;
}

/* --- Body sections -------------------------------------------------- */
.cd-area .cd-section, .cd-hub .cd-section { padding: 3rem 0; }
.cd-area .cd-section.alt, .cd-hub .cd-section.alt { background: var(--cd-wash); }
.cd-area h2, .cd-hub h2 {
  font-family: var(--cd-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--cd-ink);
  margin: 0 0 1.1rem;
}
.cd-area h3, .cd-hub h3 {
  font-family: var(--cd-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--cd-ink);
  margin: 1.5rem 0 .5rem;
}
.cd-area p, .cd-hub p {
  font-family: var(--cd-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cd-ink);
  max-width: 46rem;
}
.cd-ticks { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 46rem; }
.cd-ticks li {
  font-family: var(--cd-sans);
  font-size: 1rem;
  line-height: 1.55;
  padding: .35rem 0 .35rem 1.75rem;
  position: relative;
}
.cd-ticks li::before {
  content: "";
  position: absolute; left: .25rem; top: .78em;
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--cd-primary);
  border-bottom: 2px solid var(--cd-primary);
  transform: rotate(45deg);
}

/* --- Tables --------------------------------------------------------- */
.cd-table-wrap { overflow-x: auto; margin: 1.25rem 0 0; }
.cd-table { width: 100%; border-collapse: collapse; min-width: 34rem; font-family: var(--cd-sans); }
.cd-table caption {
  caption-side: top;
  text-align: left;
  font-size: .875rem;
  color: var(--cd-ink-soft);
  padding-bottom: .6rem;
}
.cd-table th, .cd-table td {
  border-bottom: 1px solid var(--cd-line);
  padding: .8rem .75rem;
  text-align: left;
  vertical-align: top;
  font-size: .9375rem;
  line-height: 1.5;
}
.cd-table thead th {
  background: var(--cd-secondary);
  color: #fff;
  font-weight: 600;
  border-bottom: none;
}
.cd-table tbody tr:nth-child(even) { background: rgba(100,99,122,.055); }
.cd-table td:first-child { font-weight: 600; }

/* --- Drive-time / price callout ------------------------------------- */
.cd-callout {
  border: 1px solid var(--cd-line);
  border-left: 4px solid var(--cd-primary);
  border-radius: 10px;
  background: #fff;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
  max-width: 46rem;
}
.cd-callout p { margin: 0; }

/* --- Trainer / byline ----------------------------------------------- */
.cd-trainer { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.cd-quote {
  border-left: 3px solid var(--cd-secondary);
  padding-left: 1rem;
  margin: 1.25rem 0 0;
  max-width: 44rem;
}
.cd-quote blockquote { font-family: var(--cd-serif); font-size: 1.125rem; margin: 0 0 .4rem; color: var(--cd-ink); }
.cd-quote cite { font-family: var(--cd-sans); font-size: .875rem; font-style: normal; color: var(--cd-ink-soft); }

.cd-byline {
  border-top: 1px solid var(--cd-line);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-family: var(--cd-sans);
  font-size: .875rem;
  color: var(--cd-ink-soft);
  max-width: 46rem;
}
.cd-byline strong { color: var(--cd-ink); }
.cd-sources { list-style: none; padding: 0; margin: .5rem 0 0; }
.cd-sources li { font-family: var(--cd-sans); font-size: .875rem; padding: .2rem 0; }
.cd-sources a { color: var(--cd-primary); }

/* --- FAQ ------------------------------------------------------------ */
.cd-faq { max-width: 48rem; }
.cd-faq details {
  border-bottom: 1px solid var(--cd-line);
  padding: .9rem 0;
}
.cd-faq summary {
  font-family: var(--cd-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cd-ink);
  cursor: pointer;
  list-style: none;
  padding-right: 2rem;
  position: relative;
}
.cd-faq summary::-webkit-details-marker { display: none; }
.cd-faq summary::after {
  content: "+";
  position: absolute; right: .25rem; top: -.1rem;
  font-size: 1.4rem; line-height: 1; color: var(--cd-primary);
}
.cd-faq details[open] summary::after { content: "\2013"; }
.cd-faq details p { margin: .6rem 0 0; }

/* --- CTA band ------------------------------------------------------- */
.cd-cta {
  background: var(--cd-primary);
  color: #fff;
  padding: 2.75rem 0;
  text-align: center;
}
.cd-cta h2 { color: #fff; }
.cd-cta p { color: rgba(255,255,255,.9); margin-left: auto; margin-right: auto; }
.cd-cta .cd-btn {
  display: inline-block;
  background: #fff;
  color: var(--cd-primary);
  border-radius: 100px;
  font-family: var(--cd-sans);
  font-size: 15px;
  padding: .7rem 1.6rem;
  margin: .35rem .3rem 0;
  text-decoration: none;
}
.cd-cta .cd-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }

.cd-hero .cd-btn {
  display: inline-block;
  background: var(--cd-primary);
  border: .8px solid var(--cd-primary);
  color: #fff;
  border-radius: 100px;
  font-family: var(--cd-sans);
  font-size: 15px;
  padding: .6rem 1.4rem;
  margin: .35rem .3rem 0 0;
  text-decoration: none;
}
.cd-hero .cd-btn.ghost { background: transparent; border-color: rgba(255,255,255,.6); }

/* --- Breadcrumb ----------------------------------------------------- */
.cd-crumbs { font-family: var(--cd-sans); font-size: .8125rem; margin: 0 0 .9rem; }
.cd-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.cd-crumbs li::after { content: "/"; margin-left: .4rem; opacity: .5; }
.cd-crumbs li:last-child::after { content: ""; }
.cd-area .cd-crumbs a { color: rgba(255,255,255,.85); }
.cd-area .cd-crumbs li { color: rgba(255,255,255,.6); }
.cd-hub .cd-crumbs a { color: var(--cd-secondary); }

/* --- Nearby areas --------------------------------------------------- */
.cd-nearby { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.cd-nearby a {
  font-family: var(--cd-sans);
  font-size: .875rem;
  border: 1px solid var(--cd-line);
  border-radius: 100px;
  padding: .4rem .9rem;
  color: var(--cd-ink);
  text-decoration: none;
  background: #fff;
}
.cd-nearby a:hover { border-color: var(--cd-primary); color: var(--cd-primary); }

@media (max-width: 991.98px) {
  .cd-enquiry { margin-top: 2rem; }
  .cd-area .cd-hero { padding: 2.25rem 0 2.5rem; }
}