/* Page bodies (service pages and contact), below the hero. Phase 5.
   Restyles the EXISTING markup with Design System tokens only (css/design-tokens.css), so no copy, heading or link changes.
   Everything is scoped under .ds-body so the superseded component-library.css rules for these components cannot leak through. */

.ds-body {
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
  font-size: 17px;
  line-height: 1.6;
}
.ds-body *, .ds-body *::before, .ds-body *::after { box-sizing: border-box; }

/* Section rhythm (DS A5): s7 / s8 / s9, containers 1200px with s4 / s5 / s6 gutters */
.ds-body > section:not(.hero) { padding-block: var(--ds-section-y); }
.ds-body > section:not(.hero) .bc-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

/* Backgrounds by component (adjacent sections never share a background: dark hero, white, mist, paper, dark band) */
.ds-body section.bc-prose { background: var(--ds-white); color: var(--ds-ink); }
.ds-body section.bc-faq { background: var(--ds-mist); }
.ds-body section.bc-grid { background: var(--ds-paper); }
.ds-body section.bc-formband--intro { background: var(--ds-white); color: var(--ds-ink); }
.ds-body section.bc-map { background: var(--ds-paper); }

/* Focus (DS A10): blue ring on light, amber ring on dark */
.ds-body a:focus-visible, .ds-body summary:focus-visible { outline: 3px solid var(--ds-focus-light); outline-offset: 2px; }
.ds-body .bc-formband--final a:focus-visible { outline-color: var(--ds-focus-dark); }

/* ---------- Typography ---------- */
.ds-body .bc-eyebrow {
  display: block;
  margin: 0 0 var(--ds-s3);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-amber-text);
}
.ds-body .bc-eyebrow::before { content: none; }

/* Section headings: DS H2 look (the elements keep their existing levels) */
.ds-body .bc-prose__body > h2, .ds-body .bc-prose__body > h3, .ds-body .bc-formband__title {
  margin: 0 0 var(--ds-s4);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(30px, calc(30px + 14 * (100vw - 768px) / 256), 44px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.ds-body .bc-prose__body p, .ds-body .bc-formband p { margin: 0 0 var(--ds-s4); max-width: 65ch; }
.ds-body .bc-prose__body > :last-child { margin-bottom: 0; }
.ds-body .bc-prose__body a:not(.bc-btn), .ds-body .bc-formband--intro a:not(.bc-btn), .ds-body .bc-map p a {
  color: var(--ds-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds-body .bc-prose__body a:not(.bc-btn):hover, .ds-body .bc-formband--intro a:not(.bc-btn):hover, .ds-body .bc-map p a:hover { color: var(--ds-link-hover); }

/* ---------- Buttons (DS A12) ---------- */
.ds-body .bc-btn-row { display: flex; flex-wrap: wrap; gap: var(--ds-s3); align-items: center; margin: var(--ds-s5) 0 0; }
.ds-body .bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-s2);
  min-height: 56px;
  padding: var(--ds-s2) var(--ds-s5);
  border: 2px solid transparent;
  border-radius: var(--ds-radius-control);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.ds-body .bc-btn--primary, .ds-body .bc-btn--accent { background: var(--ds-amber); color: var(--ds-ink); }
.ds-body .bc-btn--primary:hover, .ds-body .bc-btn--accent:hover { background: var(--ds-amber-hover); color: var(--ds-ink); }
.ds-body .bc-btn--primary:active, .ds-body .bc-btn--accent:active { background: var(--ds-amber-pressed); }
.ds-body .bc-btn--outline { background: transparent; border-color: var(--ds-ink); color: var(--ds-ink); }
.ds-body .bc-btn--outline:hover { background: var(--ds-mist); color: var(--ds-ink); }
@media (max-width: 479px) { .ds-body .bc-btn-row .bc-btn { width: 100%; } }

/* ---------- Intro with image (bc-prose) ---------- */
.ds-body .bc-prose--with-image .bc-prose__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-s6);
  align-items: center;
}
.ds-body .bc-prose__body { max-width: none; }
.ds-body .bc-prose__media::after { content: none; }
.ds-body .bc-prose__media img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ds-radius-card);
  box-shadow: none;
}
@media (min-width: 1024px) {
  .ds-body .bc-prose--with-image .bc-prose__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--ds-s7); }
}

/* ---------- Accordion (DS B9 FAQ pattern; the existing details/summary markup) ---------- */
.ds-body .bc-faq__list { display: grid; gap: var(--ds-s3); max-width: 760px; margin: 0 auto; }
.ds-body .bc-prose .bc-faq__list { margin: var(--ds-s5) 0 0; }
.ds-body .bc-faq__item {
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-left: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-body .bc-faq__item[open] { border-left-color: var(--ds-line); }
.ds-body .bc-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s3);
  min-height: 56px;
  padding: var(--ds-s2) var(--ds-s5);
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink);
}
.ds-body .bc-faq__q::-webkit-details-marker { display: none; }
.ds-body .bc-faq__q::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: var(--ds-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms ease-out;
}
.ds-body .bc-faq__item[open] .bc-faq__q::after { content: ""; background: var(--ds-ink); transform: rotate(180deg); }
.ds-body .bc-faq__a { padding: 0 var(--ds-s5) var(--ds-s5); color: var(--ds-ink); }
.ds-body .bc-faq__a p { margin: 0 0 var(--ds-s4); max-width: 65ch; }
.ds-body .bc-faq__a > :last-child { margin-bottom: 0; }

/* ---------- Photo cards (DS A13 / B3) ---------- */
.ds-body .bc-grid__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-body .bc-grid__card {
  display: flex;
  flex-direction: column;
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transform: none;
}
.ds-body .bc-grid__card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 0;
}
.ds-body .bc-grid--imaged .bc-grid__card-body, .ds-body .bc-grid__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  padding: var(--ds-s5);
}
.ds-body .bc-grid__card h3 {
  margin: 0 0 var(--ds-s3);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.ds-body .bc-grid__card p { margin: 0 0 var(--ds-s4); color: var(--ds-ink); }
.ds-body .bc-grid__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s2);
  align-self: flex-start;
  min-height: 48px;
  margin-top: auto;
  padding-top: 0;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ds-body .bc-grid__card-link:hover { color: var(--ds-link-hover); }
.ds-body .bc-grid__card-link::after {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  color: inherit;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 768px) {
  .ds-body .bc-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s5); }
}
@media (min-width: 1024px) {
  .ds-body .bc-grid--3col .bc-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Card wrapper: each card is a <details> (open by default). On mobile its summary is an accordion header made of the card's
   existing heading; from 768px up the summary is hidden and the card heading inside the body shows instead. */
.ds-body .bc-card__details { display: flex; flex-direction: column; flex: 1 1 auto; }
.ds-body .bc-card__details::details-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.ds-body .bc-card__panel { display: flex; flex-direction: column; flex: 1 1 auto; }
.ds-body .bc-card__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s3);
  min-height: 56px;
  padding: var(--ds-s2) var(--ds-s5);
  cursor: pointer;
  list-style: none;
}
.ds-body .bc-card__summary::-webkit-details-marker { display: none; }
.ds-body .bc-grid__card h3.bc-card__summary-title { margin: 0; }
.ds-body .bc-card__chevron { width: 24px; height: 24px; flex: none; color: var(--ds-ink); transition: transform 200ms ease-out; }
.ds-body .bc-card__details[open] .bc-card__chevron { transform: rotate(180deg); }
.ds-body .bc-card__panel .bc-grid__card-body h3 { display: none; } /* mobile: the accordion header already shows these words */
@media (min-width: 768px) {
  .ds-body .bc-card__summary { display: none; }
  .ds-body .bc-card__panel .bc-grid__card-body h3 { display: block; }
}
@media (prefers-reduced-motion: reduce) { .ds-body .bc-card__chevron { transition: none; } }

/* Desktop: wide rows (image beside the text, alternating sides). The full description then renders in about 3-4 lines
   instead of 7-8 in a narrow column. Same cards, same words; only the arrangement changes. Images stay at their native 380px width. */
@media (min-width: 1024px) {
  .ds-body .bc-grid--imaged .bc-grid__list { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s5); }
  .ds-body .bc-grid--imaged .bc-card__panel { flex-direction: row; }
  .ds-body .bc-grid--imaged .bc-grid__card:nth-child(even) .bc-card__panel { flex-direction: row-reverse; }
  .ds-body .bc-grid--imaged .bc-grid__card-img {
    flex: none;
    align-self: stretch;
    width: 380px;
    height: auto;
    min-height: 100%;
    aspect-ratio: auto;
  }
  .ds-body .bc-grid--imaged .bc-grid__card-body { justify-content: center; padding: var(--ds-s6); }
  .ds-body .bc-grid--imaged .bc-grid__card p { max-width: 65ch; }
}
@media (min-width: 768px) and (hover: hover) {
  .ds-body .bc-grid__card { transition: box-shadow 200ms ease-out, transform 200ms ease-out; }
  .ds-body .bc-grid__card:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
}

/* ---------- Final contact band (DS B10 "Dark" CTA banner; the page's form is the hero's single form) ---------- */
.ds-body section.bc-formband--final {
  background-color: var(--ds-slate-900);
  background-image: repeating-linear-gradient(180deg, transparent 0 44px, rgba(255, 255, 255, .05) 44px 48px);
  color: var(--ds-on-dark);
}
.ds-body .bc-formband--final .bc-formband__grid { display: block; max-width: 48rem; }
.ds-body .bc-formband--final .bc-eyebrow { color: var(--ds-amber); }
.ds-body .bc-formband--final .bc-formband__title { color: var(--ds-on-dark); }
.ds-body .bc-formband--final .bc-formband__lede { font-size: 18px; line-height: 1.5; color: var(--ds-on-dark-soft); }
.ds-body .bc-formband--final p { color: var(--ds-on-dark); }
.ds-body .bc-formband--final .bc-formband__lede { color: var(--ds-on-dark-soft); }
.ds-body .bc-formband--final p a { color: var(--ds-link-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.ds-body .bc-formband--final p a:hover { color: var(--ds-amber); }
.ds-body .bc-formband--final .bc-btn--accent { min-height: 56px; }

/* ---------- Contact page: intro copy and map ---------- */
.ds-body .bc-formband--intro .bc-formband__grid { display: block; max-width: 48rem; }
.ds-body .bc-formband--intro .bc-formband__lede { font-size: 18px; line-height: 1.5; color: var(--ds-ink-soft); }
.ds-body .bc-formband--intro h3 {
  margin: 0 0 var(--ds-s3);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink);
}
.ds-body .bc-formband--intro h3 a { display: inline-flex; align-items: center; min-height: 48px; }
.ds-body .bc-map__frame {
  display: block;
  width: 100%;
  height: 360px;
  min-height: 0;
  border: 0;
  border-radius: var(--ds-radius-panel);
  box-shadow: none;
  background: var(--ds-mist);
}
.ds-body .bc-map p { margin: var(--ds-s4) 0 0; }
.ds-body .bc-map p a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--ds-font-display); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
@media (min-width: 768px) { .ds-body .bc-map__frame { height: 450px; } }

@media (prefers-reduced-motion: reduce) {
  .ds-body .bc-btn, .ds-body .bc-faq__q::after, .ds-body .bc-grid__card { transition: none; }
  .ds-body .bc-grid__card:hover { transform: none; }
}

/* ---------- Prose lists: check-mark bullets (DS icon: Lucide check) ---------- */
.ds-body .bc-prose__body ul { list-style: none; margin: 0 0 var(--ds-s4); padding: 0; }
.ds-body .bc-prose__body li { position: relative; margin: 0 0 var(--ds-s3); padding-left: 32px; }
.ds-body .bc-prose__body li::marker { content: none; }
.ds-body .bc-prose__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 22px;
  height: 22px;
  background: var(--ds-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- About page body ---------- */
/* Backgrounds alternate: hero (dark), then white / paper / white / mist / paper / dark band */
.ds-about > section:nth-child(2) { background: var(--ds-white); }
.ds-about > section:nth-child(3) { background: var(--ds-paper); }
.ds-about > section:nth-child(4) { background: var(--ds-white); }
.ds-about > section:nth-child(5) { background: var(--ds-mist); }
.ds-about > section:nth-child(6) { background: var(--ds-paper); }
.ds-about .bc-prose--with-image.bc-bg-surface { background: var(--ds-paper); }

/* Opening paragraphs: lede scale, comfortable measure */
.ds-about > section:nth-child(2) .bc-prose__body p { font-size: 18px; line-height: 1.6; }
@media (min-width: 1024px) { .ds-about > section:nth-child(2) .bc-prose__body p { font-size: 20px; } }

/* "Why Choose Us?" benefits as a 2x2 grid of cards (the existing list items, unchanged) */
.ds-about .bc-formband--intro .bc-formband__grid { display: block; max-width: none; }
.ds-about .bc-formband--intro .bc-formband__lede { max-width: 48rem; }
.ds-about .bc-formband--intro ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-s4);
  list-style: none;
  margin: var(--ds-s5) 0;
  padding: 0;
}
.ds-about .bc-formband--intro li {
  position: relative;
  padding: var(--ds-s5) var(--ds-s5) var(--ds-s5) calc(var(--ds-s5) + 36px);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-sm);
  font-weight: 500;
}
.ds-about .bc-formband--intro li::before {
  content: "";
  position: absolute;
  left: var(--ds-s5);
  top: calc(var(--ds-s5) + 2px);
  width: 24px;
  height: 24px;
  background: var(--ds-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 768px) { .ds-about .bc-formband--intro ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Numbers Speak for Themselves": plain cards, no hero-scale numerals (the figures are unverified) */
.ds-about .bc-grid--text-only .bc-section__head { max-width: 48rem; margin: 0 0 var(--ds-s5); text-align: left; }
.ds-about .bc-grid--text-only h2 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(30px, calc(30px + 14 * (100vw - 768px) / 256), 44px);
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.ds-about .bc-grid--text-only .bc-grid__list { max-width: 40rem; }
.ds-about .bc-grid--text-only .bc-grid__card { border-top: 1px solid var(--ds-line); }
.ds-about .bc-grid--text-only .bc-grid__card-body { gap: 0; }
.ds-about .bc-grid__card-num {
  display: block;
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ds-ink);
}
.ds-about .bc-grid--text-only .bc-grid__card p { margin: var(--ds-s1) 0 0; }

/* The long existing H4 heading: DS H3 scale (keeps its level and its words) */
.ds-about .bc-prose__body > h4 {
  margin: 0 0 var(--ds-s4);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: clamp(24px, calc(24px + 4 * (100vw - 768px) / 256), 28px);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: normal;
  color: var(--ds-ink);
}
.ds-about > section:nth-child(6) .bc-prose__media img { aspect-ratio: 4 / 3; }
.ds-about .bc-prose__body > .bc-btn { margin-top: var(--ds-s3); }

/* Secondary button on the dark final band (DS A12: on-dark outline) */
.ds-body .bc-formband--final .bc-btn--outline { border-color: var(--ds-on-dark); color: var(--ds-on-dark); }
.ds-body .bc-formband--final .bc-btn--outline:hover { background: var(--ds-slate-700); color: var(--ds-on-dark); }

/* Anchor targets reached from the Services menu: clear the sticky header */
.ds-body .bc-grid__card[id] { scroll-margin-top: calc(72px + var(--ds-s4)); }