/* Shared styling for the sub-pages (/services, /service-area, /colors).
   The home page is built from web components; these pages are plain semantic
   documents, so they need a small stylesheet of their own on top of the brand
   tokens. Deliberately minimal — same type scale, same palette, no new ideas. */

.wrap {
  /* min() against the token, not a bare max-width, so the gutter survives at
     360px. The home page's colors section shipped a 23px horizontal spill from
     getting exactly this wrong. */
  width: min(100% - 2 * var(--bw-space-5), var(--bw-size-page));
  margin-inline: auto;
}

.page-head {
  padding-block: var(--bw-space-12) var(--bw-space-8);
  border-block-end: 1px solid var(--bw-border);
}
.page-head .eyebrow {
  font-family: var(--bw-font-eyebrow);
  font-size: var(--bw-text-xs);
  font-weight: var(--bw-weight-semibold);
  letter-spacing: var(--bw-tracking-wider);
  text-transform: uppercase;
  color: var(--bw-fg-muted);
  margin: 0 0 var(--bw-space-3);
}
.page-head h1 {
  font-family: var(--bw-font-display);
  font-weight: var(--bw-weight-bold);
  font-size: var(--bw-text-4xl);
  line-height: 1.08;
  letter-spacing: var(--bw-tracking-wide);
  color: var(--bw-brand);
  margin: 0;
}
.page-head .lede {
  margin: var(--bw-space-4) 0 0;
  max-width: 62ch;
  font-size: var(--bw-text-lg);
  color: var(--bw-fg-muted);
}

/* Breadcrumb — visible, and mirrored in BreadcrumbList JSON-LD. */
.crumbs {
  padding-block: var(--bw-space-4);
  font-family: var(--bw-font-eyebrow);
  font-size: var(--bw-text-xs);
  letter-spacing: var(--bw-tracking-wide);
  text-transform: uppercase;
}
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bw-space-2);
  list-style: none; margin: 0; padding: 0;
}
.crumbs li + li::before { content: "/"; margin-inline-end: var(--bw-space-2); color: var(--bw-fg-muted); }
.crumbs a { color: var(--bw-fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--bw-brand); }
.crumbs [aria-current="page"] { color: var(--bw-fg); }

section.block { padding-block: var(--bw-space-12); }
section.block + section.block { border-block-start: 1px solid var(--bw-border); }
section.block > h2 {
  font-family: var(--bw-font-display);
  font-weight: var(--bw-weight-bold);
  font-size: var(--bw-text-3xl);
  letter-spacing: var(--bw-tracking-wide);
  color: var(--bw-brand);
  margin: 0 0 var(--bw-space-5);
}
section.block > p { max-width: 68ch; }

/* minmax(0, ·) on every track: a bare 1fr floors at min-content and is what
   pushed the home page sideways on a 360px viewport. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bw-space-6); }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bw-space-5); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-md);
  padding: var(--bw-space-6);
  background: var(--bw-bg);
  min-width: 0;
}
.card h3 {
  font-family: var(--bw-font-display);
  font-size: var(--bw-text-xl);
  color: var(--bw-brand);
  margin: 0 0 var(--bw-space-3);
}
.card ul { margin: var(--bw-space-3) 0 0; padding-inline-start: 1.15rem; }
.card li { margin-block: var(--bw-space-1); }

/* FAQ — <details> so it works with zero JavaScript. */
.faq { display: grid; gap: var(--bw-space-3); }
.faq details {
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-4) var(--bw-space-5);
  background: var(--bw-bg);
}
.faq summary {
  cursor: pointer;
  font-weight: var(--bw-weight-semibold);
  color: var(--bw-brand);
  /* list-style on summary is the portable marker control; ::-webkit-details-marker
     alone leaves Firefox showing a second triangle. */
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; font-family: var(--bw-font-mono); }
.faq details[open] summary::after { content: " –"; }
.faq details > p { margin: var(--bw-space-3) 0 0; max-width: 68ch; }

/* Numbered process steps. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bw-space-5); counter-reset: s; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bw-space-4); align-items: start; }
.steps > li::before {
  content: counter(s);
  font-family: var(--bw-font-eyebrow);
  font-weight: var(--bw-weight-bold);
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bw-brand);
  color: var(--bw-fg-inverse);
}
.steps h3 { margin: 0 0 var(--bw-space-2); font-size: var(--bw-text-lg); color: var(--bw-brand); }
.steps p { margin: 0; max-width: 64ch; }

/* Color swatches. */
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bw-space-4); }
@media (min-width: 640px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.swatch { min-width: 0; }
.swatch .chip { aspect-ratio: 4 / 3; border-radius: var(--bw-radius-md); border: 1px solid var(--bw-border); }
.swatch h3 { font-size: var(--bw-text-base); margin: var(--bw-space-3) 0 var(--bw-space-1); color: var(--bw-fg); }
.swatch p { margin: 0; font-family: var(--bw-font-mono); font-size: var(--bw-text-xs); color: var(--bw-fg-muted); }

/* Areas served. */
.places { display: flex; flex-wrap: wrap; gap: var(--bw-space-2); list-style: none; margin: 0; padding: 0; }
.places li {
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-2) var(--bw-space-4);
  font-size: var(--bw-text-sm);
}

.cta-band {
  margin-block: var(--bw-space-12);
  padding: var(--bw-space-8);
  border-radius: var(--bw-radius-md);
  background: var(--bw-bg-sunken);
  border: 1px solid var(--bw-border);
  display: grid;
  gap: var(--bw-space-4);
  justify-items: start;
}
.cta-band h2 { font-family: var(--bw-font-display); color: var(--bw-brand); margin: 0; font-size: var(--bw-text-2xl); }
.cta-band .row { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }

.simple-footer {
  border-block-start: 1px solid var(--bw-border);
  padding-block: var(--bw-space-8);
  font-size: var(--bw-text-sm);
  color: var(--bw-fg-muted);
}
.simple-footer a { color: var(--bw-brand); }
.simple-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--bw-space-4); list-style: none; padding: 0; margin: var(--bw-space-3) 0 0; }