/* Interior page layer for the cartie/ surface. Loads after style.css.
   Only interior pages (services, about, reviews, area, contact) use this. */

.page-hero {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}

.page-hero--green { background: var(--wash-green); }
.page-hero--blue { background: var(--wash-blue); }
.page-hero--pink { background: var(--wash-pink); }
.page-hero--duck { background: var(--wash-duck); }
.page-hero--ivory { background: var(--ivory); }

.page-hero__script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--size-script-band);
  line-height: 1.35;
  color: var(--ink);
  max-width: 22ch;
  margin: 0.5rem auto 0;
}

.page-hero__lede {
  font-size: var(--size-body);
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 1.25rem auto 0;
  line-height: var(--leading-body);
}

.page-hero__attrib {
  font-family: var(--font-sans);
  font-size: var(--size-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.5rem;
}

.cta-band {
  background: var(--wash-duck);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}

.cta-band__title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--ink);
  margin: 0 0 1.5rem;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.cta-band__fine {
  font-size: var(--size-small);
  color: var(--ink-faint);
  margin-top: 1rem;
}

.credentials {
  text-align: center;
}

.credentials__line {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0.4rem 0;
}

/* current page marker in the nav */
.nav__links a[aria-current="page"] {
  color: var(--action);
  font-weight: 600;
}

/* placeholder cards carry no chip color; keep the top edge quiet */
.service-card--plain {
  border-top-color: transparent;
}

/* figure caption on interior pages, mirrors the homepage rules that
   are scoped to the #about section id */
.about__figure figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
}

.about__figure figcaption span {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-small);
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* interior about band body text matches the homepage tone */
.about__grid .about__copy p {
  color: var(--ink-soft);
}

/* the towns line centers like the rest of the area band */
.area__towns {
  text-align: center;
}

/* watercolor washes behind every interior page hero; the flat tint
   stays underneath as the loading and fallback color */
.page-hero {
  background-size: cover;
  background-position: center;
}
.page-hero--green { background-image: url('art/wash-green.svg'); }
.page-hero--blue { background-image: url('art/wash-blue.svg'); }
.page-hero--pink { background-image: url('art/wash-pink.svg'); }
.page-hero--ivory { background-image: url('art/wash-ivory.svg'); }

/* band sprigs sit as real illustrations now */
img.reviews__sprig,
img.products__sprig {
  display: block;
  width: 180px;
  margin: 0 auto 1.5rem;
  opacity: 0.9;
}

/* Madison on the contact page, approved caption text only */
.quote__owner {
  margin: 0 0 1.75rem;
}
.quote__owner .quote__portrait {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow: var(--shadow-card);
}
.quote__owner figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
}
.quote__owner figcaption span {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--ink-soft);
  margin-top: 0.15rem;
}