/**
 * PAGES — layout specifics that only apply on one or two templates.
 * Everything reusable already lives in layout.css / components.css.
 */

/* ---- Home --------------------------------------------------------------- */
.home-hero__eyebrow { margin-bottom: var(--sp-4); }
.home-hero__title { margin-bottom: var(--sp-5); }
.home-hero__lede { margin-bottom: var(--sp-6); }
.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}
.division-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .division-split { grid-template-columns: 1fr 1fr; } }
.division-split > .panel { border-radius: 0; }
.division-card {
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 22rem;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.division-card__art { position: absolute; inset: 0; opacity: .35; }
.division-card__body { position: relative; z-index: 1; }

/* ---- Service hub / excavation hub --------------------------------------- */
.service-hub-grid .card__art { aspect-ratio: 4/3; }

/* ---- Service detail (electrical + excavation share this shape) ---------- */
.service-hero {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 60rem) { .service-hero { grid-template-columns: 1.2fr 0.8fr; align-items: center; } }
.symptom-block { padding-block: var(--sp-9); }
.symptom-block__prompt { font-size: var(--size-lede); margin-bottom: var(--sp-6); max-width: 60ch; }
.includes-block { display: grid; gap: var(--sp-8); }
@media (min-width: 56rem) { .includes-block { grid-template-columns: 1fr 1fr; } }
.how-it-runs { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 0; border-top: var(--border-w) solid var(--border-dark); }
.how-it-runs li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-bottom: var(--border-w) solid var(--border-dark);
}
.how-it-runs li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--volt);
  font-weight: 700;
}
.cross-links { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Money-page decision helper */
.decision-helper { display: grid; gap: var(--sp-6); }
@media (min-width: 56rem) { .decision-helper { grid-template-columns: repeat(3, 1fr); } }
.decision-helper .panel { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Emergency page: phone-first, nothing above the fold competes with it */
.urgent-hero {
  text-align: center;
  padding-block: var(--sp-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.urgent-hero .btn--primary { font-size: 1.4rem; padding: 1.1em 2em 1em; }
.urgent-hero__phone {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  text-decoration: none;
  letter-spacing: -.01em;
}
.urgent-hero__phone:hover { color: var(--volt); }

/* ---- Our Work gallery ----------------------------------------------------- */
.gallery-grid { container-type: inline-size; }
.gallery-item { display: flex; flex-direction: column; }
.gallery-item__art { aspect-ratio: 4/3; background: var(--void); }
.gallery-item__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.gallery-item__caption { font-size: 0.92rem; color: var(--text-on-dark); opacity: .85; }
@container (max-width: 20rem) {
  .gallery-item__body { padding: var(--sp-3); }
}
.gallery-empty { padding-block: var(--sp-8); text-align: center; color: var(--steel); font-family: var(--font-mono); }
.gallery-empty[hidden] { display: none; }

/* ---- About ------------------------------------------------------------------ */
.about-story { display: grid; gap: var(--sp-7); }
@media (min-width: 56rem) { .about-story { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.credential-panel { container-type: inline-size; }
@container (max-width: 26rem) {
  .credential-panel .spec-table th { width: 55%; white-space: normal; }
}

/* ---- FAQ -------------------------------------------------------------------- */
.faq-group { padding-block: var(--sp-8); }
.faq-group__title { margin-bottom: var(--sp-2); }
.faq-group__count { color: var(--steel); font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: var(--sp-5); }

/* ---- Service area ------------------------------------------------------------ */
.county-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.county-list li { padding-block: var(--sp-3); border-bottom: var(--border-w) solid var(--border-dark); display: flex; justify-content: space-between; font-family: var(--font-mono); }

/* ---- Forms pages ---------------------------------------------------------- */
/* minmax(0, …) rather than 1fr: a bare 1fr track keeps min-width:auto, so a
   wide min-content child (form inputs) can push the track past the viewport. */
.form-page { display: grid; gap: var(--sp-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .form-page { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.form-aside { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 6rem; }
.form-aside .panel { font-size: 0.92rem; }

/* ---- Thank you --------------------------------------------------------------- */
.thanks-hero { text-align: center; padding-block: var(--sp-10); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }

/* ---- 404 ---------------------------------------------------------------------- */
.notfound-hero { text-align: center; padding-block: var(--sp-10); display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
/* Flex items default to min-width:auto, which for a replaced element is its
   intrinsic width — max-width:100% alone will not shrink the 512px artwork. */
.notfound-hero > *, .thanks-hero > * { min-width: 0; max-width: 100%; }
.notfound-hero__code { font-family: var(--font-mono); font-size: clamp(4rem, 3rem + 6vw, 9rem); color: var(--volt); line-height: 1; }

/* ---- Privacy / legal ------------------------------------------------------------ */
.legal-copy { max-width: 66ch; display: flex; flex-direction: column; gap: var(--sp-5); }
.legal-copy h2 { font-size: 1.4rem; margin-top: var(--sp-6); }
.legal-copy ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---- Excavation sub-brand touches ------------------------------------------------ */
[data-division="excavation"] .badge--volt { background: var(--division-accent); border-color: var(--division-accent); }
[data-division="excavation"] .card__index,
[data-division="excavation"] .checklist__mark,
[data-division="excavation"] .checklist__mark { color: var(--division-accent); border-color: var(--division-accent); }
[data-division="excavation"] .how-it-runs li::before { color: var(--division-accent); }
[data-division="excavation"] .panel--reticle::before,
[data-division="excavation"] .panel--reticle::after,
[data-division="excavation"] .panel--reticle .reticle-bl,
[data-division="excavation"] .panel--reticle .reticle-br { border-color: var(--division-accent); }