/* ==========================================================
   Shared inner-page styles (page banner, breadcrumbs)
   ========================================================== */

@media (min-width: 1121px) {
  .menu__link.is-current { color: var(--teal-700); }
  .menu__link.is-current::after { transform: scaleX(1); }
}

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(64px, 8vw, 110px) 0 clamp(80px, 9vw, 120px);
  background:
    radial-gradient(600px 420px at 10% 0%, rgba(207, 195, 169, .16), transparent 65%),
    radial-gradient(700px 500px at 90% 100%, rgba(34, 66, 143, .6), transparent 70%),
    var(--teal-900);
}
.page-hero::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 520px; height: 520px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23ecd49c' stroke-width='.6'%3E%3Cpath d='M100 20c26 34 26 78 0 112-26-34-26-78 0-112Z'/%3E%3Cpath d='M100 132c-36-8-62-36-70-72 36 4 62 32 70 72Z'/%3E%3Cpath d='M100 132c36-8 62-36 70-72-36 4-62 32-70 72Z'/%3E%3Cpath d='M100 132c-50 4-82-14-96-40 34-6 70 8 96 40Z'/%3E%3Cpath d='M100 132c50 4 82-14 96-40-34-6-70 8-96 40Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .08; pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 1280px; }
.page-hero__inner > *:not(.crumbs) { max-width: 660px; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; font-size: .84rem; color: #a3b0a7; }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 13px; height: 13px; transform: rotate(-90deg); color: var(--gold); }
.crumbs [aria-current] { color: var(--gold-soft); font-weight: 600; }

.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.02; margin-bottom: 22px; color: #fff; }
.page-hero h1 em {
  background: linear-gradient(100deg, #e6ddcb 0%, #cfc3a9 45%, #a39783 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
.page-hero p { font-size: 1.12rem; color: #cdd5cf; margin-bottom: 32px; }

.page-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.page-hero__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.page-hero__chips svg { width: 15px; height: 15px; color: var(--gold-soft); }

.spacer { height: clamp(72px, 9vw, 110px); }

/* Frosted button for dark backgrounds */
.btn--glass {
  color: #fff; border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55); }

/* ---------- SEO-friendly hero: the H1 carries the keyword ("Dental Crowns in Temple, TX")
   as a small label, and the big slogan below keeps the headline look ---------- */
.page-hero .hero-title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.02; margin: 0 0 22px; color: #fff;
}
.page-hero .hero-title em {
  background: linear-gradient(100deg, #e6ddcb 0%, #cfc3a9 45%, #a39783 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
.page-hero h1.hero-kicker, .page-hero h1.sd-hero__kicker {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.45; color: var(--gold-soft); margin: 0 0 14px;
}