/* ============================================================
   BLUE SANDS — sub-page styles (service + service-area landing pages)
   Reuses tokens + components from styles.css. On integration this can
   be merged into styles.css or kept as a second stylesheet.
   ============================================================ */

/* ---------- Page hero (no background image — fast, no asset dependency) ---------- */
.page-hero {
  background: linear-gradient(180deg, var(--asphalt-800) 0%, var(--asphalt-900) 100%);
  border-bottom: 1px solid var(--line);
  padding: 3.6rem 1.4rem 3rem;
}
.page-hero-inner { max-width: 1100px; margin: 0 auto; }

.crumbs {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.2rem;
}
.crumbs a { color: var(--sand); text-decoration: none; }
.crumbs a:hover { color: var(--sand-bright); }
.crumbs .sep { color: var(--steel); margin: 0 0.55rem; opacity: 0.6; }

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--paper);
}
.page-hero h1 .ink-sand { color: var(--sand-bright); }
.page-hero .lede {
  max-width: 42rem;
  margin-top: 1.15rem;
  font-size: 1.14rem;
  color: #d8d4ca;
}
.page-hero .hero-ctas { margin-top: 1.9rem; }

/* ---------- Readable body prose ---------- */
.prose { max-width: 46rem; }
.prose > p { margin-bottom: 1.1rem; color: #c9c4b8; }
.prose h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  font-weight: 800;
  text-transform: uppercase;
  margin: 2.2rem 0 0.8rem;
  color: var(--sand-bright);
}
.prose ul { margin: 0 0 1.2rem 1.15rem; color: #c9c4b8; }
.prose li { margin-bottom: 0.45rem; }
.prose a { font-weight: 700; }

/* Prose on the light "sand" sections */
.section-sand .prose > p,
.section-sand .prose ul { color: #4a4538; }
.section-sand .prose h2 { color: var(--blue-deep); }

/* ---------- Full-bleed CTA band ---------- */
.cta-band { max-width: none; background: var(--blue-deep); }
.cta-band > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cta-band .section-head h2 { color: #fff; }
.cta-band .section-head p { color: #cfe0f8; }
.cta-band .section-num { -webkit-text-stroke-color: var(--sand); opacity: 0.5; }

/* Let a card's whole title be a link */
.card h3 a { color: inherit; text-decoration: none; }
.card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }