/* Cleancraft — service / hub / about / contact page components.
   Extends the Phase 1 design system (style.css) + homepage components (home.css).
   References design-system tokens only — zero raw hex/px/ms in rules. */

/* ---- breadcrumb ---- */
.breadcrumb { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--text-mute); margin-bottom: var(--s-6); }
.breadcrumb a { color: var(--text-mute); transition: color var(--d-fast); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span[aria-current] { color: var(--text-soft); }
.breadcrumb__sep { opacity: .5; }

/* ---- service hero (single-column editorial, optional media) ---- */
.svc-hero { padding-block: clamp(var(--s-12), 6vw, var(--s-24)) var(--section-y); }
.svc-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s-8), 5vw, var(--s-24)); align-items: center; }
.svc-hero h1 { margin-top: var(--s-3); }
.svc-hero .lede { margin-top: var(--s-6); max-width: 48ch; }
.svc-hero__media { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(120% 80% at 70% 20%, color-mix(in oklch, var(--c-taupe) 55%, var(--bg)), transparent 60%),
    linear-gradient(150deg, var(--c-ivory-deep), color-mix(in oklch, var(--c-taupe) 60%, var(--bg)));
  border: 1px solid var(--border); display: grid; place-items: end start; padding: var(--s-6); }
.svc-hero__media span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-ink-soft); }

/* ---- numbered flow (how it works — works for 2–4 steps) ---- */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(var(--s-6), 3vw, var(--s-12)); margin-top: var(--s-8); }
.flow__step { display: flex; flex-direction: column; gap: var(--s-2); }
.flow__num { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1;
  color: color-mix(in oklch, var(--c-taupe) 85%, var(--c-ink)); letter-spacing: -0.03em; }
.flow__step h3 { font-size: var(--t-md); }
.flow__step p { font-size: var(--t-sm); color: var(--text-soft); }

/* ---- checklist (what's included) ---- */
.checklist { list-style: none; padding: 0; margin-top: var(--s-6);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-3) var(--s-8); }
.checklist li { position: relative; padding-left: var(--s-8); color: var(--text-soft); font-size: var(--t-base); }
.checklist li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--c-taupe);
  background:
    linear-gradient(45deg, transparent 45%, var(--c-taupe) 45% 55%, transparent 55%) center / 8px 2px no-repeat; }

/* ---- honesty callout (not included / scope) ---- */
.callout { margin-top: var(--s-8); padding: var(--s-6) var(--s-8);
  border-left: 3px solid var(--c-taupe); background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0; }
.callout__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; color: var(--warm-deep); }
.callout p { margin-top: var(--s-2); color: var(--text-soft); font-size: var(--t-sm); }

/* ---- dual band (proof + safety side by side) ---- */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-8), 5vw, var(--s-16)); }
.dual__col h2 { font-size: var(--t-lg); }
.dual__col p { margin-top: var(--s-3); color: var(--text-soft); }
.dual__col .eyebrow { margin-bottom: var(--s-2); display: block; }

/* ---- pricing ---- */
.pricing__intro { margin-top: var(--s-3); color: var(--text-soft); font-size: var(--t-sm); max-width: 60ch; }
.price-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(var(--s-8), 4vw, var(--s-16)); margin-top: var(--s-12); align-items: start; }
.price-group__title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md);
  letter-spacing: -0.01em; margin-bottom: var(--s-1); }
.price-group__note { font-size: var(--t-xs); color: var(--text-mute); margin-bottom: var(--s-4); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table tr { border-bottom: 1px solid var(--border); }
.price-table tr:last-child { border-bottom: 0; }
.price-table th, .price-table td { padding-block: var(--s-3); text-align: left; vertical-align: baseline; font-weight: 400; }
.price-table .price-table__label { color: var(--text); font-size: var(--t-sm); }
.price-table .price-table__label small { display: block; color: var(--text-mute); font-size: var(--t-xs); }
.price-table .price-table__val { text-align: right; white-space: nowrap; padding-left: var(--s-6);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--text); }
.price-note-legend { font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-6);
  padding-top: var(--s-4); border-top: 1px solid var(--border); }

/* quote-only services (no menu price) */
.quote-only { margin-top: var(--s-6); padding: var(--s-8); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); }
.quote-only p { color: var(--text-soft); }

/* ---- services hub: tier intro + 3-col grid ---- */
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tier { padding-block: var(--section-y); }
.tier__intro { color: var(--text-soft); margin-top: var(--s-2); }
.svc--link { cursor: pointer; }
.svc--link h3 { font-size: var(--t-md); }

/* ---- about ---- */
.prose { max-width: 60ch; }
.prose h2 { font-size: var(--t-lg); margin-top: var(--s-12); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s-3); color: var(--text-soft); }
.factlist { list-style: none; padding: 0; margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.factlist li { padding-left: var(--s-6); position: relative; color: var(--text-soft); }
.factlist li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--c-taupe); }
.factlist b { color: var(--text); font-weight: 600; }

/* ---- contact details ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--s-8), 5vw, var(--s-24)); align-items: start; }
.contact-details { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; }
.contact-details div { display: flex; justify-content: space-between; gap: var(--s-6);
  padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border); }
.contact-details div:last-child { border-bottom: 0; }
.contact-details dt { font-size: var(--t-sm); color: var(--text-mute); }
.contact-details dd { font-size: var(--t-sm); color: var(--text); font-weight: 500; text-align: right; }
.contact-details dd.is-pending { color: var(--text-mute); font-weight: 400; font-style: italic; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .svc-hero__grid { grid-template-columns: 1fr; }
  .svc-hero__media { aspect-ratio: 16 / 11; order: -1; }
  .dual { grid-template-columns: 1fr; }
  .svc-grid--3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}