/* Palette: warm white and tan with red accents, per the practice (2026-08-04).
   The red is a warm brick rather than a crimson — a cooler red read as harsh
   against this layout, which was the objection to the first red attempt.

   The --sage-* names are historical. They were the original teal ramp and are
   kept as the ramp's names so every existing rule re-themes from one place.
   900 = deepest (dark surfaces, photo overlay tint, strong headings)
   800 = primary action (buttons, links)   700 = mid (eyebrows)
   300/200 = light accents, used as text on the dark surfaces
   100 = lightest tint background */
:root {
  --ink: #2e2724;
  /* Darkened from #7A6D64: that only reached 4.38:1 on the cream sections, just
     under AA, and cream is now behind the hero lead as well as the services copy. */
  --muted: #6b5e55;
  --sage-900: #7d1f1c;
  --sage-800: #9e2b25;
  --sage-700: #b8443a;
  --sage-300: #edb9a4;
  --sage-200: #f6ddcd;
  --sage-100: #fdf2ea;
  --secondary-blue: #5472d2;
  --cream: #f7efe3;
  --paper: #ffffff;
  --line: #ece3d9;
  --shadow: 0 24px 60px rgb(85 30 25 / 16%);
  --radius: 20px;
  --shell: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(3.2rem, 6vw, 5.85rem);
  font-weight: 500;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 500;
}

h3 {
  margin-bottom: 14px;
  font-size: 1.42rem;
  font-weight: 600;
}

.shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.section-pad {
  padding-block: 110px;
}

.centered {
  text-align: center;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--paper);
  background: var(--sage-900);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.utility-bar {
  color: #fdeee7;
  background: var(--sage-900);
  font-size: 0.84rem;
}

.utility-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 8px;
}

.utility-bar a:hover {
  color: var(--paper);
}

.site-header {
  position: relative;
  z-index: 20;
  background: rgb(255 255 255 / 96%);
  border-bottom: 1px solid rgb(158 43 37 /12%);
}

.header-inner {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--sage-800);
  line-height: 1;
  text-transform: uppercase;
}

.brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.brand span {
  display: grid;
  gap: 5px;
}

.brand strong {
  font-size: 1.24rem;
  letter-spacing: 0.08em;
}

.brand em {
  font-size: 0.94rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 34px);
  font-size: 0.94rem;
  font-weight: 500;
}

.desktop-nav > a:not(.button) {
  padding-block: 12px;
  border-bottom: 1px solid transparent;
}

.desktop-nav > a:not(.button):hover {
  color: var(--sage-800);
  border-color: var(--sage-800);
}

.mobile-nav {
  display: none;
  position: relative;
}

.mobile-nav summary {
  padding: 10px 14px;
  color: var(--sage-900);
  background: var(--sage-100);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav nav {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  width: min(78vw, 290px);
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.mobile-nav nav a {
  padding: 10px 12px;
  border-radius: 8px;
}

.mobile-nav nav a:hover {
  background: var(--sage-100);
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  color: var(--sage-900);
  background: var(--sage-100);
  border: 1px solid var(--sage-100);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  transition: 180ms ease;
}

.button:hover {
  color: var(--paper);
  background: var(--sage-800);
  border-color: var(--sage-800);
  transform: translateY(-2px);
}

.button-small {
  min-height: 44px;
  padding: 10px 17px;
  font-size: 0.88rem;
}

.button-wide {
  width: 100%;
}

.button-outline {
  color: var(--sage-800);
  background: transparent;
  border-color: var(--sage-300);
}

.button-dark {
  color: var(--paper);
  background: var(--sage-800);
  border-color: var(--sage-800);
}

.button-dark:hover {
  background: var(--sage-900);
}

.button-white {
  color: var(--sage-900);
  background: var(--paper);
  border-color: var(--paper);
}

.button-ghost {
  color: var(--paper);
  background: transparent;
  border-color: rgb(255 255 255 / 52%);
}

/* The field behind and below the office photo is the warm beige from the
   services section, not deep red. A dark red-brown block that large read heavy
   and fought the photo. Red stays on the text, the buttons, and the contact
   band, where the practice liked it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 720px;
  color: var(--ink);
  background: var(--cream);
}

.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background: url("assets/hero-office.jpg") 50% 50% / cover no-repeat;
  opacity: 0;
  transform: scale(1.018);
  animation: hero-image-fade 1.45s ease-out 100ms forwards;
}

.hero-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  /* Light, even veil — the photo reads at roughly 80%. Legibility is handled by
     the panel behind .hero-copy, not by this layer, so keep it light. Raising it
     back into a full-width wash is what made the building disappear before. */
  background: rgb(247 239 227 / 20%);
  opacity: 0;
  animation: hero-overlay-fade 900ms ease-out 180ms forwards;
}

@keyframes hero-image-fade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hero-overlay-fade {
  to {
    opacity: 1;
  }
}

.hero-grid {
  display: grid;
  min-height: 720px;
  align-items: center;
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.7fr);
  gap: 70px;
  padding-block: 80px;
}

/* The copy sits on its own beige panel rather than on a full-width wash. The
   practice wanted the storefront photo mostly clear, and dark text spanning ~55%
   of the hero cannot be legible over a near-clear photo — a flat 20% veil puts
   the headline at 1.1:1. Giving the words a surface lets the veil drop to 20%
   everywhere else, and it balances the appointment card on the right.
   Desktop only: on narrow screens the copy is already below the photo band on
   solid beige, so a panel there would be invisible padding. */
.hero-copy {
  padding-top: 20px;
}

@media (min-width: 861px) {
  .hero-copy {
    padding: 42px 46px;
    /* Fades toward the top so the storefront sign shows through the head of the
       panel. The top band is mostly padding, and the photo behind it is the
       bright building rather than the shaded entry, so it can go quite light —
       but the headline starts soon after, so the ramp reaches near-solid by 22%.
       Combined with the 20% veil the effective cover at the top is ~66%, which
       still clears the 3.0 a headline this size needs. */
    background: linear-gradient(
      180deg,
      rgb(247 239 227 / 58%) 0%,
      rgb(247 239 227 / 86%) 22%,
      rgb(247 239 227 / 95%) 46%,
      rgb(247 239 227 / 96%) 100%
    );
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgb(85 30 25 / 10%);
  }
}

/* Moved below the h1 at the practice's request, so it reads as a strapline
   under the headline rather than a label above it. */
.hero-copy .eyebrow {
  margin-top: -4px;
  margin-bottom: 16px;
}

.eyebrow {
  margin-bottom: 18px;
  color: var(--sage-700);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: var(--sage-200);
}

.hero-lead {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

/* .eyebrow.light is for dark panels; the hero is beige now, so it needs the
   normal red. The contact band still uses the light version. */
.hero .eyebrow.light {
  color: var(--sage-700);
}

.appointment-card {
  padding: 38px;
  color: var(--ink);
  background: rgb(255 255 255 / 96%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  backdrop-filter: blur(8px);
}

.appointment-card img {
  width: 90px;
  height: 90px;
  margin: 0 auto 12px;
  object-fit: contain;
}

/* No filter here on purpose. The artwork in assets/ is already the brand red with
   a pure white fill. A CSS filter cannot do this job: hue-rotate/saturate leave
   the outline too bright, and the brightness() needed to deepen it also greys the
   white fill. Originals are in art-source/ — see README for the recolour recipe. */

.appointment-card .card-kicker {
  margin-bottom: 8px;
  color: var(--sage-700);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.appointment-card h2 {
  margin-bottom: 28px;
  font-size: 2rem;
}

.appointment-card .button + .button {
  margin-top: 12px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.intro {
  background: var(--paper);
}

.intro-grid h2 {
  max-width: 540px;
}

.intro-copy {
  padding-top: 26px;
  color: var(--muted);
  font-size: 1.06rem;
}

.text-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: var(--sage-800);
  font-weight: 700;
}

.text-link:hover span {
  transform: translateX(4px);
}

.trust-strip {
  display: grid;
  margin-top: 80px;
  overflow: hidden;
  background: var(--sage-100);
  border-radius: var(--radius);
  grid-template-columns: repeat(3, 1fr);
}

.trust-strip > div {
  display: grid;
  padding: 34px;
  border-right: 1px solid rgb(158 43 37 /16%);
  grid-template-columns: auto 1fr;
  column-gap: 18px;
}

.trust-strip > div:last-child {
  border-right: 0;
}

.trust-strip span {
  grid-row: span 2;
  color: var(--sage-700);
  font-size: 0.8rem;
  font-weight: 700;
}

.trust-strip strong {
  color: var(--sage-900);
  font-size: 1.1rem;
}

.trust-strip small {
  color: var(--muted);
}

.services {
  background: var(--cream);
}

.section-heading {
  max-width: 760px;
}

.section-heading > p:last-child {
  max-width: 650px;
  margin: 0 auto;
  color: var(--muted);
}

/* auto-fit rather than a fixed 3 columns: service groups are re-ordered and
   re-counted whenever the practice revises them, and a fixed 3-across leaves a
   ragged trailing row at any count that is not a multiple of three. */
.service-grid {
  display: grid;
  margin-top: 54px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 20px;
}

/* Each card is a link to its service page, so it needs to be a block box. */
.service-card {
  display: block;
  min-height: 350px;
  padding: 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  transition: 180ms ease;
}

.service-card h3 {
  transition: 180ms ease;
}

.service-card:hover h3 {
  color: var(--sage-800);
}

.service-card:hover {
  border-color: var(--sage-300);
  box-shadow: 0 18px 40px rgb(85 30 25 / 12%);
  transform: translateY(-4px);
}

.service-icon {
  width: 158px;
  height: 158px;
  margin: 0 auto 24px;
  object-fit: contain;
}

.service-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.button-row {
  margin-top: 38px;
}

.feature {
  background: var(--paper);
}

.feature-grid {
  align-items: center;
}

.feature-photo {
  position: relative;
}

.feature-photo::before {
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: -24px;
  width: 68%;
  height: 72%;
  background: var(--sage-200);
  border-radius: 24px;
  content: "";
}

.feature-photo img {
  width: 100%;
  min-height: 580px;
  object-fit: cover;
  border-radius: 24px;
}

.feature-copy {
  padding-left: 24px;
}

.feature-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.06rem;
}

.check-list {
  display: grid;
  margin: 30px 0 38px;
  padding: 0;
  list-style: none;
  gap: 14px;
}

.check-list li {
  position: relative;
  padding-left: 34px;
  font-weight: 600;
}

.check-list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 23px;
  height: 23px;
  color: var(--sage-900);
  background: var(--sage-100);
  border-radius: 50%;
  content: "✓";
  font-size: 0.8rem;
  place-items: center;
}

/* Photo underlay, same idea as the hero: image on one layer, tinted overlay on
   another, content above both. The sage background stays as the fallback, so
   this section still looks right if the photo is missing. */
/* Was a full-bleed deep red panel. Between the utility bar, the hero, this, and
   the contact band, red had stopped being an accent and started being the site.
   Reviews now read as a light warm section — the office photo stays underneath
   with a warm wash over it, and the contact band is left as the one bold red
   moment on the page. */
.reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
}

.reviews::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background: url("assets/affordable-care-room.jpg") 50% 50% / cover no-repeat;
}

.reviews::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, rgb(247 239 227 / 95%) 0%, rgb(253 242 234 / 92%) 52%, rgb(247 239 227 / 95%) 100%);
}

/* The eyebrow in this section was styled for a dark background. */
.reviews .eyebrow.light {
  color: var(--sage-700);
}

.review-card {
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgb(85 30 25 / 7%);
}

.reviews-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.reviews-heading h2 {
  max-width: 680px;
  margin-bottom: 0;
}

.review-grid {
  display: grid;
  margin-top: 58px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* margin: 0 because this is a <figure> — the UA default is 1em 40px, which would
   inset every card inside its grid cell. */
.review-card {
  display: flex;
  min-height: 390px;
  margin: 0;
  padding: 32px;
  flex-direction: column;
  color: var(--ink);
  background: var(--paper);
  border-radius: 16px;
}

.quote-mark {
  height: 52px;
  color: var(--sage-300);
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 0.8;
}

.review-card > p {
  margin: 28px 0;
  font-size: 1.08rem;
}

.review-card figcaption {
  display: grid;
  margin-top: auto;
}

.review-card figcaption span {
  color: #9b7b2f;
  letter-spacing: 0.08em;
}

.review-card figcaption small {
  margin-top: 8px;
  color: var(--muted);
}

.visit {
  background: var(--paper);
}

.visit-grid {
  display: grid;
  margin-top: 54px;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}

.visit-card {
  padding: 40px 36px 20px;
  border-right: 1px solid var(--line);
}

.visit-card:last-child {
  border-right: 0;
}

.visit-number {
  display: inline-block;
  margin-bottom: 50px;
  color: var(--sage-700);
  font-size: 0.8rem;
  font-weight: 700;
}

.visit-card p {
  color: var(--muted);
}

.visit-card a {
  color: var(--sage-800);
  font-weight: 700;
}

.contact-band {
  padding-block: 78px;
  color: var(--paper);
  background: var(--sage-800);
}

.contact-grid {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 70px;
}

.contact-grid h2 {
  max-width: 720px;
  margin-bottom: 0;
  font-size: clamp(2.3rem, 4vw, 3.5rem);
}

.contact-actions {
  display: grid;
  min-width: 230px;
  gap: 12px;
}

.site-footer {
  padding-top: 86px;
  background: var(--paper);
}

.footer-grid {
  display: grid;
  padding-bottom: 68px;
  grid-template-columns: 1.25fr 1fr 1fr 0.7fr;
  gap: 58px;
}

.footer-grid h3 {
  font-size: 1.1rem;
}

.footer-grid address {
  margin-bottom: 13px;
  font-style: normal;
}

.footer-grid > div:not(.footer-brand) > a,
.footer-grid > div:not(.footer-brand) > span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-grid > div:not(.footer-brand) > a:hover {
  color: var(--sage-800);
}

.footer-brand .brand {
  margin-bottom: 24px;
}

.footer-brand > p {
  max-width: 280px;
  color: var(--muted);
}

.hours-list {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 4px;
  border-bottom: 1px solid var(--line);
}

.hours-list dt,
.hours-list dd {
  margin: 0;
}

.hours-list dd {
  text-align: right;
}

.footer-links {
  display: grid;
  color: var(--muted);
  gap: 5px;
  font-size: 0.92rem;
}

.footer-links a:hover {
  color: var(--sage-800);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-block: 22px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}

.footer-credit {
  white-space: nowrap;
}

/* The credit link matches the "Website by" text around it — red and bold made it
   the loudest thing in the footer, which is the wrong emphasis on a client site.
   It still underlines on hover so it reads as a link. */
.footer-credit a {
  color: inherit;
  font-weight: inherit;
  transition: 180ms ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1040px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .hero-grid {
    grid-template-columns: 1fr 330px;
    gap: 36px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1600px) {
  .hero::before {
    background-size: 110% auto;
  }
}
@media (max-width: 860px) {
  .section-pad {
    padding-block: 76px;
  }

  .utility-inner {
    justify-content: center;
    text-align: center;
  }

  .utility-inner a:first-child {
    display: none;
  }

  .header-inner {
    min-height: 78px;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .brand strong {
    font-size: 1rem;
  }

  .brand em {
    font-size: 0.76rem;
  }

  .hero,
  .hero-grid {
    min-height: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-block: 90px 64px;
  }

  /* Narrow screens crop the storefront so hard that the sign ends up directly
     behind the headline. Instead of panning the photo, give it its own 16:9 band
     across the top — the image is ~1.8:1, so a 16:9 crop shows almost all of it,
     sign included — and let the copy sit below on the flat red. Robust to a photo
     swap, unlike hand-tuned background-position values. */
  .hero::before,
  .hero-overlay {
    bottom: auto;
    aspect-ratio: 16 / 9;
  }

  /* Swap to the tighter crop on narrow screens. The wide shot loses the sign at
     this size; this one is cut from the same full-resolution original so the
     storefront reads clearly in the band. */
  .hero::before {
    background-image: url("assets/hero-office-narrow.jpg");
    background-position: 50% 50%;
    background-size: cover;
  }

  /* Keep the photo band clean and let it settle into the beige, rather than
     fading up into a dark red-brown. */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgb(247 239 227 / 0%) 0%,
      rgb(247 239 227 / 6%) 62%,
      rgb(247 239 227 / 72%) 92%,
      rgb(247 239 227) 100%
    );
  }

  /* Push the copy clear of the band. 56.25vw is the band's height, since it
     spans the full viewport width at 16:9. */
  .hero-grid {
    padding-top: calc(56.25vw + 34px);
  }

  /* Once the hero stacks, the card is a grid item capped at 440px in a full-width
     column, so without this it pins to the left edge and reads as misaligned
     against the centred copy above it. It must stay centred at every width below
     the breakpoint, not just on phones. */
  .appointment-card {
    max-width: 440px;
    margin-inline: auto;
  }

  .split,
  .reviews-heading,
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .intro-copy,
  .feature-copy {
    padding: 0;
  }

  .trust-strip,
  .review-grid,
  .visit-grid {
    grid-template-columns: 1fr;
  }

  .trust-strip > div {
    border-right: 0;
    border-bottom: 1px solid rgb(158 43 37 /16%);
  }

  .trust-strip > div:last-child {
    border-bottom: 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .feature-photo img {
    min-height: 430px;
  }

  .feature-photo::before {
    right: 0;
  }

  .review-card {
    min-height: 340px;
  }

  .visit-card {
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .visit-card:last-child {
    border-bottom: 0;
  }

  .visit-number {
    margin-bottom: 28px;
  }

  .contact-actions {
    width: 100%;
    max-width: 340px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
}

@media (max-width: 440px) {
  .shell {
    width: min(calc(100% - 28px), var(--shell));
  }

  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  /* Narrow phones used to hide the wordmark entirely. Scale the mark and type
     down instead so the practice name still reads in the header. */
  .header-inner {
    gap: 14px;
  }

  .brand {
    gap: 10px;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .brand strong {
    font-size: 1rem;
    letter-spacing: 0.06em;
  }

  .brand em {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }

  .appointment-card,
  .service-card,
  .review-card {
    padding: 26px;
  }
}

/* Service pages */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 22px;
  color: var(--muted);
  font-size: 0.82rem;
}

.breadcrumb a:hover {
  color: var(--sage-800);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.service-hero {
  padding-bottom: 30px;
}

.service-hero-grid {
  display: grid;
  align-items: center;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 48px;
}

.service-hero-icon {
  width: min(100%, 260px);
  margin-inline: auto;
}

.service-lead {
  max-width: 620px;
  margin-bottom: 30px;
  color: var(--muted);
  font-size: 1.12rem;
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Narrow measure keeps the answers scannable — for readers and for the answer
   engines that quote the first line under each heading. Constrain the children
   rather than the container so the text stays flush with the hero's left edge
   instead of floating to the middle of the page. */
.service-body > * {
  max-width: 760px;
}

.service-body h2 {
  margin-top: 52px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.service-body h2:first-of-type {
  margin-top: 0;
}

.service-body h3 {
  margin-top: 32px;
}

.service-body p {
  color: var(--muted);
}

.related-services {
  background: var(--cream);
}

.related-grid {
  margin-top: 34px;
}

@media (max-width: 860px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-hero-icon {
    order: -1;
    width: 180px;
  }
}

/* 404 page */

.notfound {
  padding-block: clamp(56px, 9vw, 104px);
  background: linear-gradient(180deg, var(--sage-100), var(--paper) 72%);
}

.notfound-inner {
  max-width: 720px;
  text-align: center;
}

.notfound-mark {
  position: relative;
  display: grid;
  margin-bottom: 30px;
  place-items: center;
}

/* The 404 sits behind the mascot as a watermark, so the tooth stays the subject. */
.notfound-code {
  position: absolute;
  color: var(--sage-200);
  font-size: clamp(7rem, 20vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0.55;
  user-select: none;
}

.notfound-mark img {
  position: relative;
  width: clamp(112px, 17vw, 158px);
  height: auto;
  animation: notfound-float 4.5s ease-in-out infinite;
}

@keyframes notfound-float {
  0%,
  100% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(6px);
  }
}

.notfound h1 {
  margin-inline: auto;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.notfound-lead {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 34px;
  color: var(--muted);
  font-size: 1.08rem;
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--sage-800);
  font-size: 0.92rem;
  font-weight: 600;
}

.notfound-links a:hover {
  color: var(--sage-900);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .hero::before,
  .hero-overlay {
    opacity: 1;
    transform: none;
  }
}









/* ==========================================================================
   Scroll reveal
   ==========================================================================
   The hidden state is deliberately scoped under .js-motion, which motion.js
   adds to <html> at runtime. AI crawlers and no-JS browsers never see that
   class, so they get fully visible content instead of a page of opacity: 0
   blocks. Do not lift these rules out of the .js-motion scope. */

.js-motion .reveal,
.js-motion .reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js-motion .reveal.in-view,
.js-motion .reveal-item.in-view {
  opacity: 1;
  transform: none;
}

/* Cards keep their hover lift once revealed. */
.js-motion .service-card.reveal-item.in-view,
.js-motion .review-card.reveal-item.in-view {
  will-change: auto;
}

/* ==========================================================================
   Reviews: source links and the "More" expander
   ========================================================================== */

.reviews-cta {
  flex-shrink: 0;
}

.review-card figcaption {
  gap: 4px;
}

.review-source {
  margin-top: 10px;
  color: var(--sage-800);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.review-source:hover {
  color: var(--sage-900);
}

/* Native <details> so the full review text stays in the raw HTML. A scripted
   expander would hide it from crawlers that do not execute JavaScript. */
.review-more > summary {
  display: inline-block;
  color: var(--sage-800);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.review-more > summary::-webkit-details-marker {
  display: none;
}

.review-more > summary::after {
  content: " ▾";
}

.review-more[open] > summary {
  margin-bottom: 12px;
}

.review-more[open] > summary::after {
  content: " ▴";
}

/* The clamped preview is only there for the closed state. */
.review-more[open] {
  margin-top: -1.9em;
}

.review-more[open] + p,
.review-card > p:has(+ .review-more[open]) {
  display: none;
}

.review-more p {
  margin: 0;
  font-size: 1.08rem;
}

/* ==========================================================================
   Hours note, payments panel
   ========================================================================== */

.hours-note {
  margin-bottom: 8px;
  color: var(--muted);
}

.payments-panel {
  display: grid;
  margin-top: 54px;
  padding: 36px 40px;
  background: var(--sage-100);
  border-radius: var(--radius);
  gap: 32px 60px;
  grid-template-columns: 1fr 1fr;
}

.payments-panel h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.payment-list {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

/* min-height keeps every pill the same size whether it holds text or a mark, so
   a row of badges and a row containing a logo do not step against each other. */
.payment-list li {
  display: flex;
  min-height: 42px;
  padding: 7px 16px;
  align-items: center;
  color: var(--sage-900);
  background: var(--paper);
  border: 1px solid var(--sage-200);
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 500;
}

/* Official brand marks, in the same pill as the text badges so a mixed row still
   reads as one set. Width always follows the aspect ratio — every one of these
   brands forbids distorting its mark.

   Heights are tuned per brand rather than shared, because the marks are not the
   same kind of object. Amex is a filled square whose lettering is a fraction of
   its box, so it needs the most height; Visa and Discover are bare wordmarks
   where the full height IS the lettering, so they need the least or they shout
   over everything else. The numbers below were set by measuring the rendered row,
   not by theory. */
/* Tighter vertical padding than the text badges so the tallest mark still fits
   inside the shared 42px pill height instead of pushing its own pill taller. */
.payment-list .payment-mark {
  padding: 3px 13px;
}

.payment-list .payment-mark img {
  display: block;
  width: auto;
  height: 26px;
}

/* These carry .payment-list so they match the base rule's specificity (0-2-1) and
   win on source order. Without it they are 0-1-1 and silently lose. */

/* Filled square, and the only mark whose lettering is set inside the shape, so it
   needs the most height of the set to carry the same weight as the wordmarks. */
.payment-list .payment-mark--american-express img {
  height: 34px;
}

/* Symbol only, no wordmark. */
.payment-list .payment-mark--mastercard img {
  height: 27px;
}

/* Bare wordmarks: the whole crop is lettering. */
.payment-list .payment-mark--visa img {
  height: 21px;
}

.payment-list .payment-mark--discover img {
  height: 19px;
}

/* Lockup: wordmark plus the "a Synchrony solution" descriptor, which is 43 of the
   file's 159px. 26px keeps the wordmark near 16px and legible. */
.payment-list .payment-mark--carecredit img {
  height: 26px;
}

.visit-forms-note {
  margin-top: 28px;
  color: var(--muted);
}

.visit-forms-note a {
  color: var(--sage-800);
  font-weight: 700;
}

/* ==========================================================================
   Reviews page and the held-back fallback
   ========================================================================== */

/* Sits inside the homepage reviews band, which is the tinted photo panel, so the
   card keeps the light-on-tint treatment the review cards had. */
.review-fallback {
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 40px;
  background: rgb(255 255 255 / 82%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.review-fallback p {
  margin-bottom: 24px;
  color: var(--muted);
}

.review-fallback .button-white {
  background: var(--sage-800);
  color: var(--paper);
}

.review-fallback-page {
  max-width: 720px;
  background: var(--paper);
}

.review-fallback-page h2 {
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

/* --- Review masonry -------------------------------------------------------
   Same structure as the Desert Shower reviews grid, rebuilt on this site's
   tokens: warm line, brand-red avatars, the #9b7b2f stars already used on the
   homepage cards. Breakpoints must match colCount() in reviews.js. */

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rev-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* No-JS baseline: a plain flowed grid holding every card. reviews.js hides this
   and deals the cards into the balanced columns below. */
.rev-grid {
  column-count: 3;
  column-gap: 24px;
}

.rev-grid--pool {
  display: none;
}

.rev-cols {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.rev-col {
  flex: 1 1 0;
  min-width: 0;
}

.rev-card {
  margin-bottom: 24px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  break-inside: avoid;
}

.rev-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rev-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sage-800);
  color: var(--paper);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}

.rev-card__id {
  min-width: 0;
}

.rev-author {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.rev-rating {
  display: flex;
  margin-top: 12px;
  align-items: center;
  gap: 10px;
}

.rev-stars {
  color: #9b7b2f;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

.rev-source {
  display: inline-flex;
  align-items: center;
}

.rev-source__icon {
  display: block;
  width: 16px;
  height: 16px;
}

.rev-text {
  margin-top: 14px;
}

.rev-text p {
  margin: 0;
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.55;
}

.rev-text p + p {
  margin-top: 12px;
}

.rev-toggle {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sage-800);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.rev-toggle:hover,
.rev-toggle:focus-visible {
  text-decoration: underline;
}

.rev-loadmore-wrap {
  display: flex;
  margin-top: 8px;
  justify-content: center;
}

.rev-loadmore {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 160ms ease;
}

.rev-loadmore:hover,
.rev-loadmore:focus-visible {
  color: var(--sage-800);
}

.rev-loadmore[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .rev-grid {
    column-count: 2;
  }

  .rev-grid,
  .rev-cols {
    column-gap: 20px;
    gap: 20px;
  }
}

@media (max-width: 599px) {
  .rev-grid {
    column-count: 1;
  }

  .rev-card {
    padding: 20px;
  }
}

/* The grid carries its own card spacing, so this section only needs a little air
   above and below — the standard section-pad left a large empty band under the
   heading before the first card. */
.reviews-hero {
  padding-bottom: 0;
}

.reviews-page {
  padding-block: 34px 56px;
}

.reviews-invite {
  background: var(--cream);
}

.reviews-invite-card {
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.reviews-invite-card h2 {
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

.reviews-invite-card p {
  margin-bottom: 24px;
  color: var(--muted);
}

@media (max-width: 620px) {
  .review-fallback,
  .review-full,
  .reviews-invite-card {
    padding: 28px 22px;
  }

  .review-full-head,
  .review-full-meta {
    flex-direction: column;
    gap: 6px;
  }
}

/* ==========================================================================
   Patient forms
   ========================================================================== */

/* Capped and centred so a single form does not stretch into one very wide, very
   short box across the full shell — and so the column lines up with the notes
   card below it. */
.forms-list {
  display: grid;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  list-style: none;
}

.form-card {
  display: flex;
  padding: 32px 30px;
  flex-direction: column;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form-card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.form-card p {
  margin-bottom: 22px;
  color: var(--muted);
}

.form-card .button {
  margin-top: auto;
}

/* Shown while content/site.mjs → patientForms is empty, so the page offers the
   phone instead of an empty list. */
.forms-fallback {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 44px;
  background: var(--sage-100);
  border-radius: var(--radius);
  text-align: center;
}

.forms-fallback h3 {
  margin-bottom: 14px;
  font-size: 1.5rem;
}

.forms-fallback p {
  margin-bottom: 24px;
  color: var(--muted);
}

.forms-help {
  background: var(--cream);
}

.forms-help-card {
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.forms-help-card h2 {
  margin-bottom: 20px;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

.forms-help-card .check-list {
  margin-bottom: 24px;
}

.forms-help-card > p {
  color: var(--muted);
}

@media (max-width: 620px) {
  .forms-fallback,
  .forms-help-card {
    padding: 32px 24px;
  }
}

.anniversary-note {
  padding-left: 16px;
  border-left: 3px solid var(--sage-300);
  color: var(--sage-900);
}

.footer-walkin,
.footer-women {
  margin-top: 12px;
  color: var(--sage-800);
  font-size: 0.94rem;
}

/* ==========================================================================
   Cost note (replaces the old per-service "What it costs" section)
   ========================================================================== */

.cost-note {
  background: var(--cream);
}

.cost-note-card {
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.cost-note-card h2 {
  margin-bottom: 16px;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.cost-note-payments {
  color: var(--muted);
}

.cost-note .button-row {
  display: flex;
  justify-content: center;
}

.faq-section {
  background: var(--paper);
}

.centered-actions {
  justify-content: center;
}

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact-grid {
  align-items: start;
  grid-template-columns: 1fr 1fr;
}

.contact-intro h2 {
  margin-bottom: 20px;
}

.contact-intro p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-intro .contact-actions {
  margin-top: 28px;
}

.contact-form {
  display: grid;
  padding: 36px 38px;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--radius);
  gap: 6px;
}

.contact-form h3 {
  margin-bottom: 14px;
  font-size: 1.35rem;
}

.contact-form label {
  margin-top: 12px;
  font-size: 0.92rem;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 3px solid var(--sage-200);
  outline-offset: 2px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  margin-top: 22px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

.form-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Honeypot: kept out of sight and out of the tab order, but not display:none,
   which some bots detect and skip. */
.hp-field {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .payments-panel {
    grid-template-columns: 1fr;
    padding: 30px 26px;
  }

  .reviews-heading {
    flex-direction: column;
    align-items: start;
    gap: 24px;
  }

  .cost-note-card {
    padding: 32px 24px;
  }
}

/* ==========================================================================
   Tablet fit for the review and visit rows
   ==========================================================================
   Both were fixed 3-across down to 760px, which left ~240px cards in the
   760–1040px band. Review cards now carry a source link and a "More" expander,
   so they need the room. auto-fit keeps 3 across on desktop, drops to 2 on
   tablet, and 1 on phones without needing extra breakpoints. */

.review-grid {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

@media (max-width: 1040px) {
  .visit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .visit-card:nth-child(2n) {
    border-right: 0;
  }

  .visit-card:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 860px) {
  .visit-grid {
    grid-template-columns: 1fr;
  }

  .visit-card {
    border-right: 0;
  }
}

/* ==========================================================================
   Service card affordance
   ==========================================================================
   The entire card is an <a>, but on touch there is no hover to reveal that.
   A persistent pill-shaped cue plus a visible border makes it read as tappable
   without needing a pointer. */

.service-card {
  display: flex;
  flex-direction: column;
  border-width: 1.5px;
}

.service-card p {
  flex-grow: 1;
}

.service-card-cue {
  display: inline-flex;
  align-self: center;
  align-items: center;
  margin-top: 20px;
  padding: 9px 20px;
  gap: 8px;
  color: var(--sage-800);
  background: var(--sage-100);
  border: 1px solid var(--sage-200);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: 180ms ease;
}

.service-card-cue span {
  transition: transform 180ms ease;
}

.service-card:hover .service-card-cue {
  color: var(--paper);
  background: var(--sage-800);
  border-color: var(--sage-800);
}

.service-card:hover .service-card-cue span {
  transform: translateX(3px);
}

/* Keyboard users get the same treatment as hover, and a real focus ring. */
.service-card:focus-visible {
  outline: 3px solid var(--sage-800);
  outline-offset: 3px;
}

.service-card:focus-visible .service-card-cue {
  color: var(--paper);
  background: var(--sage-800);
  border-color: var(--sage-800);
}

/* On touch the hover lift never fires, so lean on the border and cue instead. */
@media (hover: none) {
  .service-card {
    border-color: var(--sage-200);
    box-shadow: 0 6px 18px rgb(85 30 25 / 8%);
  }
}

/* ==========================================================================
   Placeholder photo overlay
   ========================================================================== */

.feature-photo .photo-flag {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 8px 16px;
  color: var(--paper);
  background: rgb(74 20 18 / 88%);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-photo .photo-flag-note {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 12px 16px;
  color: var(--paper);
  background: rgb(74 20 18 / 82%);
  border-radius: 12px;
  font-size: 0.86rem;
  text-align: center;
}

/* ==========================================================================
   Quick-links band
   ==========================================================================
   Thin white strip under the header: the services people actually search for,
   plus the two things worth knowing before they call. Deliberately low-contrast
   and small — it should read as a utility strip, not a second navigation. */

.quicklinks {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.quicklinks-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 9px;
  gap: 10px 28px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.quicklinks-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.quicklinks-nav a {
  padding: 3px 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  transition: color 160ms ease;
}

/* Pipe separators between links, including a leading one. */
.quicklinks-nav a::before {
  margin-right: 13px;
  color: var(--line);
  content: "|";
}

.quicklinks-nav a:first-child {
  padding-left: 0;
}

.quicklinks-nav a:first-child::before {
  display: none;
}

.quicklinks-nav a:hover,
.quicklinks-nav a:focus-visible {
  color: var(--sage-800);
}

.quicklinks-flag,
.quicklinks-pay {
  margin: 0;
  white-space: nowrap;
}

.quicklinks-flag a {
  color: var(--sage-800);
  font-weight: 700;
}

.quicklinks-flag a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quicklinks-pay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

/* The CareCredit symbol, cut from the official lockup in assets/payments/, sits
   to the right of the payment line. Sized a little above the 0.82rem text so it
   reads as a mark rather than a bullet; width follows the aspect ratio because
   the brand's usage rules do not allow distorting it. */
.pay-mark {
  width: auto;
  height: 17px;
  flex-shrink: 0;
}

/* Below the desktop nav breakpoint the strip would wrap into a block of text.
   Let the service links scroll sideways instead, and keep the two facts stacked
   underneath where they stay readable. */
@media (max-width: 900px) {
  .quicklinks-inner {
    justify-content: center;
    gap: 6px 18px;
    text-align: center;
  }

  /* Four short links fit without scrolling, so centre and wrap rather than
     making it a sideways scroller. */
  .quicklinks-nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

@media (max-width: 440px) {
  .quicklinks-inner {
    font-size: 0.76rem;
  }
}

/* The contact band is the one large red field left on the page, and it is tall
   now that it holds the form. The deeper 900 reads grounded where the brighter
   800 read shouty at that size. Buttons keep 800 so they still pop against it. */
.contact-band {
  background: var(--sage-900);
}

/* The strip stacked to three rows on phones and pushed the hero down. Swapping
   in a shorter payment line keeps all of it on two rows without dropping the
   information the practice asked to have there. */
.pay-short {
  display: none;
}

@media (max-width: 900px) {
  .pay-long {
    display: none;
  }

  .pay-short {
    display: inline;
  }

  .quicklinks-inner {
    row-gap: 2px;
  }
}

/* ==========================================================================
   Large screens: keep the storefront signs clear of the headline
   ==========================================================================
   The h1 glyphs were landing on top of "AFFORDABLE" and "DENTIST". A lighter
   panel does not help — the letters themselves cover the signs. There is no
   horizontal gap wide enough for the sign between the copy panel and the
   appointment card, so the separation has to be vertical: the photo is zoomed
   out slightly and anchored near the top, and the copy is bottom-aligned so the
   signs sit in the clear band above it. Costs some hero height. */
/* Applies from the same 761px where the copy gets its panel — the overlap
   happens at every width where text sits on the photo, not just wide screens. */
@media (min-width: 861px) {
  .hero,
  .hero-grid {
    min-height: 830px;
  }

  .hero-grid {
    align-items: end;
    padding-block: 40px 80px;
  }

  /* `cover`, not a fixed height. Sizing by height left the image narrower than a
     maximised window and exposed a beige strip down the left edge; cover always
     fills. The sky was trimmed off the source instead, which is what lifts the
     signs clear of the copy — see the crop note in the README. */
  .hero::before {
    background-position: 50% 20%;
    background-size: cover;
  }

  /* The signs sit at 20-31% of the photo's height, so the copy panel has to
     start below that. At the previous 90px the headline wrapped deep enough to
     push the panel back up over them; this keeps it to three lines and it reads
     better against the appointment card anyway. */
  .hero h1 {
    font-size: clamp(2.9rem, 3.9vw, 4.1rem);
  }
}

/* Four links just miss fitting one row at 375px, which drops "Whitening" onto a
   second row behind a stray leading pipe. Tightening the gaps keeps them on one
   centred line. */
@media (max-width: 520px) {
  .quicklinks-nav a {
    padding-inline: 7px;
  }

  .quicklinks-nav a::before {
    margin-right: 7px;
  }
}