/* ==========================================================================
   Dental Financials — page-specific overrides (loaded after style.css)
   ========================================================================== */

/* ---------- Light hero variant ---------- */
.hero--light {
  background: var(--white);
}

.hero--light .hero-content {
  background: none;
}

/* Smaller than the shared hero h1: "Focus on Healthy Smiles." is longer
   than the homepage's "Clean Books." and needs to fit on one line within
   the available column at every breakpoint without wrapping mid-phrase. */
.hero--light .hero-text h1 {
  color: var(--ink);
  /* Fixed, not fluid: the hero-content padding formula (aligning text to the
     1200px container edge) eats width faster than the 45% column gains it
     as viewport grows, so a vw-scaled size wraps again on wide monitors. */
  font-size: 1.7rem;
}
@media (max-width: 1024px) {
  .hero--light .hero-text h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
}
@media (max-width: 640px) {
  .hero--light .hero-text h1 { font-size: 1.45rem; }
}
.hero--light .hero-sub { color: var(--ink); }
.hero--light .hero-body { color: var(--ink-soft); }

.hero--light .hero-photo {
  margin: 28px 28px 28px 16px;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  background-color: var(--green-tint);
}
.hero--light .hero-photo::before { display: none; }

.hero-photo--dental {
  background-image: url("../assets/images/dental-hero.webp");
  background-size: cover;
  background-position: center top;
}

@media (max-width: 1024px) {
  .hero--light .hero-photo { margin: 0; border-radius: 0; box-shadow: none; }
}

/* A subpage hero has no stats-bar after it, so the gap down to the next
   section's own top padding reads as too much empty space (mirrors the
   equivalent .hero--service rule in service-page.css). */
.hero--light + .services { padding-top: 48px; }

/* ---------- Services: 4-col grid (7 cards) ---------- */
/* Flexbox (not grid) so an incomplete last row centers itself instead of
   hugging the left edge — used here since 7 cards don't fill 2 full rows. */
.services-grid--4col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.services-grid--4col .service-card {
  flex: 0 1 calc(25% - 15px);
  min-width: 220px;
}

@media (max-width: 900px) {
  .services-grid--4col .service-card { flex-basis: calc(50% - 10px); }
}
@media (max-width: 640px) {
  .services-grid--4col .service-card { flex-basis: 100%; }
}

/* ---------- Trust / Testimonials: subtle green separation, not gray ---------- */
.trust {
  background: var(--green-tint);
}
.trust-logo {
  border-color: #dceadd;
}