/* ==========================================================================
   MONTOYA SEPTIC & EXCAVATING — site theme
   Lead color: slate (a near-black step of the Five-Star navy). Accent: family gold,
   which doubles as the "equipment yellow" in the excavator photography.
   The logo's red appears only as a small signal color. Loaded after base.css.
   ========================================================================== */
:root {
  --brand: #14202e;
  --brand-deep: #0b121b;
  --brand-soft: #eceff4;
  --accent: #f4d35e;
  --accent-hover: #ebc83f;
  --on-accent: #14202e;
  --heading: #14202e;
  --eyebrow: #c01f34;
  --link: #083d77;
  --tint: #f3f5f8;
}
.section--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--accent); }

/* Caution-stripe divider: the one industrial flourish */
.hazard { height: 10px; background: repeating-linear-gradient(135deg, var(--gold) 0 14px, #14202e 14px 28px); }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--gold) 0 14px, #14202e 14px 28px); }
.page-hero { padding-bottom: calc(clamp(2.75rem, 6vw, 4.5rem) + 8px); }

/* Earth-toned hero with topographic contour lines */
.hero--earth { background: linear-gradient(135deg, #1a2a3d 0%, var(--brand-deep) 100%); }
.hero--earth .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; stroke: #fff; fill: none; stroke-width: 1.2; }
.hero--earth .hero__grid { position: relative; z-index: 1; }
.hero--earth .hero__media { aspect-ratio: 4 / 5; max-height: 36rem; justify-self: end; width: 100%; }
.hero--earth .hero__media img { object-position: 50% 45%; }
.hero--earth .hero__media .chip { position: absolute; left: 1rem; top: 1rem; }

.icon-badge--solid { background: var(--slate); color: var(--gold); }
/* Red is a signal color here, so keep it off checkmarks (red reads as "error") */
.checklist .icon, .svc li .icon { color: var(--brand); }
.faq summary::after { color: var(--brand); }

/* Service cards */
.svc { gap: 1rem; }
.svc ul { list-style: none; display: grid; gap: .45rem; font-size: .93rem; color: var(--ink-soft); }
.svc li { display: flex; gap: .55rem; align-items: flex-start; }
.svc li .icon { margin-top: .22rem; }

/* Commercial proof */
.project { display: grid; gap: .5rem; align-content: start; padding: 1.6rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius); background: rgba(255, 255, 255, .05); }
.project h3 { color: var(--accent); font-size: 1.2rem; }
.project p { color: rgba(255, 255, 255, .8); font-size: .95rem; }

/* Estimate checklist */
.estimate { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--shadow-sm); }

@media (max-width: 960px) {
  .hero--earth .hero__media { aspect-ratio: 16 / 10; max-height: none; }
}