/* Homepage breathing room. The shared design system lives in main.css. */

/* Give each main section a clear pause, with a lighter rhythm on phones. */
main { --home-section-padding: 6rem; }
main > :is(.care, .services, .kids, .team, .reviews, .book, .new-patients, .visit) {
  padding-block: var(--home-section-padding);
}
main > :is(.care, .services, .kids, .team, .reviews, .book, .new-patients, .visit) > :last-child {
  margin-bottom: 0;
}

/* Alternate section backgrounds from the services section onward. */
main > :is(.services, .team, .book, .visit) {
  background: var(--bone-2);
}
main > :is(.kids, .reviews, .new-patients) {
  background: var(--bone);
}

/* Fine, tonal texture drawn in code; the content stays above it. */
main > .services {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.services > .section-texture {
  position: absolute;
  inset: -160px 0;
  z-index: -1;
  width: 100%;
  height: calc(100% + 320px);
  max-width: none;
  margin: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .services > .section-texture {
    transform: none !important;
    transition: none !important;
  }
}

.kids-steps .k-step { background: #fff; }

.hero { padding-top: 4rem; }
.hero-grid { gap: 4rem; }

/* The benefits read as a quiet row rather than another framed card. */
.trust {
  margin-top: -7.5rem;
  padding: 0 1.6rem 2rem;
}
.trust-bar {
  position: relative;
  gap: 1.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.trust-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(31, 38, 57, .16);
}
.trust-bar::after { bottom: -.5rem; }
.trust-item {
  justify-content: flex-start;
  gap: .8rem;
  padding: 0 0 .75rem;
}
.trust-item + .trust-item { border: 0; }
.trust-review-link { gap: .8rem; min-height: max(2.75rem, 44px); }
.trust-mark {
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.trust-mark svg { stroke: var(--mark); }
.trust-title { font-size: 1.1rem; }
.trust-caption { font-size: .85rem; }

/* One photo, a short introduction and one link per service. */
.care { padding-inline: 1.6rem; }
main > .care { padding-top: 2rem; }
.care-grid { gap: 2rem; align-items: start; }
.care-tile {
  --care-card-shadow: 0 0 0 0 transparent;
  align-self: stretch;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--care-accent) 28%, white);
  border-radius: 1.125rem;
  overflow: hidden;
}
.care-tile.offset { box-shadow: none; }
.care-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.care-body {
  flex: 1;
  background: #fff;
  margin: 0;
  padding: 1.4rem 1.25rem 1.25rem;
}
.care-title { margin-bottom: .6rem; }
.care-line {
  min-height: 0;
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.care-link {
  justify-content: space-between;
  gap: .7rem;
  align-self: stretch;
  min-height: max(2.75rem, 44px);
  padding: .9rem 1.25rem;
  border: 0;
  border-top: 1px solid var(--bone-2);
}
.care-link:hover { background: var(--care-wash); text-decoration: underline; text-underline-offset: .25em; }
.care-link:focus-visible { outline-offset: -5px; }

/* Keep the offer as the row's single accent, with less framing and repetition. */
.care .offer-card {
  --care-card-shadow: 0 0 0 0 transparent;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  border: 1px solid var(--cobalt-soft);
  box-shadow: none;
}
.care-offer-intro {
  aspect-ratio: auto;
  min-height: 0;
  padding: 1.5rem 1.5rem 1.25rem;
}
.care .offer-amount { font-size: 4.25rem; line-height: 1.05; margin-bottom: .6rem; }
.care .offer-title { font-size: 1.35rem; }
.care-offer-body { padding: 1.25rem 1.5rem .75rem; }
.care .offer-list { margin-bottom: .75rem; gap: .25rem; }
.care .offer-list li { min-height: 1.5rem; padding-left: 1.25rem; }
.care .offer-list li::before { width: auto; height: auto; background: transparent; font-size: .9rem; }
.care .offer-note { padding-top: .75rem; font-size: .82rem; }
.care-offer-footer { padding: .5rem 1.25rem 1.25rem; }
.care .offer-card .btn { font-size: .95rem; box-shadow: none; }

/* Payment plans close the care row: the DentiCare logo, a short promise, one link. */
.care-finance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: #fff;
  border: 1px solid var(--cobalt-soft);
  border-radius: 1.125rem;
}
.care-finance-brand {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 2rem;
  border-right: 1px solid var(--bone-2);
}
.care-finance-brand img { display: block; width: 13.5rem; height: auto; }
.care-finance-title { margin: 0 0 .2rem; font-size: 1.3rem; line-height: 1.25; }
.care-finance-line { margin: 0; color: #565e73; font-size: .95rem; line-height: 1.55; }
.care-finance-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--cobalt-soft);
  border-radius: .75rem;
  background: #fff;
  color: var(--cobalt-text);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.care-finance-link svg {
  width: 1.2rem; height: 1.2rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.care-finance-link:hover {
  background: color-mix(in srgb, var(--cobalt-soft) 40%, white);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.care-finance-link:is(:hover, :focus-visible) svg { transform: translateX(.2rem); }

/* Health funds close the services section in the same frame as the DentiCare strip. */
.service-funds {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding: 1rem 1.75rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 1.125rem;
}
.service-funds-title { margin: 0 0 .15rem; font-size: 1.05rem; line-height: 1.3; }
.service-funds-line { max-width: 32ch; margin: 0; color: #565e73; font-size: .85rem; line-height: 1.5; }
.service-funds-logos {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0 0 0 2rem;
  border-left: 1px solid var(--bone-2);
  list-style: none;
}
/* Heights balance each mark's visual weight rather than matching boxes. */
.service-funds-logos img { display: block; width: auto; height: var(--fund-h); }
.fund-nib { --fund-h: 1.75rem; }
.fund-hcf { --fund-h: 1.7rem; }
.fund-cbhs { --fund-h: 1.4rem; }

/* Let photography and type carry the services instead of lifting whole cards. */
.care-grid > .care-tile.reveal.in:is(:hover, :focus-within),
.care-grid > .care-offer.reveal.in:is(:hover, :focus-within) {
  transform: none;
  box-shadow: none;
}

/* Leave the next service partly visible to make horizontal scrolling clear. */
.service-track { --service-card-width: calc((100% - 3.75rem) / 3.5); }
.service-track .s-card:not([data-service-group="emergency"]) {
  flex-basis: var(--service-card-width);
}
.service-track > .s-card:nth-last-child(1 of .s-card:not([hidden])) {
  scroll-snap-align: end;
}

/* Four compact reviews, with the longer quotes available on request. */
.reviews .reviews-hero { margin-bottom: 1.5rem; }
.reviews .review-carousel { margin-bottom: 1.5rem; }
.reviews .review-track { gap: 1.2rem; }
.reviews .r-card {
  flex-basis: calc((100% - 3.6rem) / 4);
  min-width: 0;
  padding: 1.15rem 1.1rem 1rem;
}
.reviews .r-stars { font-size: .85rem; line-height: 1; margin-bottom: .65rem; }
.reviews .review-quote { font-size: .85rem; line-height: 1.55; margin-bottom: .5rem; }
.review-track--compact .review-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.review-track--compact .is-expanded .review-quote {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.review-toggle {
  align-self: flex-start;
  min-height: 44px;
  margin: 0 0 .5rem;
  padding: .25rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.review-toggle[hidden] { display: none; }
.review-toggle:hover { color: var(--cobalt-text); }
.reviews .rc-controls { margin-top: 1rem; }

@media (max-width: 1100px) {
  .trust-bar { gap: 1rem; }
  .trust-title { white-space: normal; }
  .trust-stars { display: block; margin: .3rem 0 0; }
  .care-grid { gap: 3rem 2rem; }
  .service-track { --service-card-width: calc((100% - 2.5rem) / 2.35); }
  .reviews .r-card { flex-basis: calc((100% - 1.2rem) / 2); }
}

@media (max-width: 760px) {
  main { --home-section-padding: 2.25rem; }
  .hero { padding-top: 2rem; }
  .hero-grid { gap: 2rem; }
  .trust {
    margin-top: -2.25rem;
    padding-inline: 1.4rem;
    padding-bottom: 1.5rem;
  }
  .trust-bar { gap: 1.25rem 1rem; }
  .trust-item { gap: .55rem; padding: 0; align-items: flex-start; }
  .trust-item:nth-child(n) { border: 0; }
  .trust-review-link { gap: .55rem; align-items: flex-start; }
  .trust-mark { flex-basis: 1.4rem; width: 1.4rem; height: 1.4rem; }
  .trust-mark svg { width: 1.1rem; height: 1.1rem; }
  .trust-title { font-size: 1.02rem; }
  .trust-caption { font-size: .8rem; }
  .care { padding-inline: 1.4rem; }
  main > .care { padding-top: 1.5rem; }
  .care-finance {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 1.25rem 1.25rem;
  }
  .care-finance-brand {
    padding: 0 0 1.1rem;
    border-right: 0;
    border-bottom: 1px solid var(--bone-2);
  }
  .care-finance-brand img { width: 12rem; }
  .care-finance-title { font-size: 1.2rem; }
  .care-finance-link { justify-content: space-between; }
  .service-funds {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
    margin-top: 2rem;
    padding: 1.1rem 1.25rem 1.2rem;
  }
  .service-funds-logos {
    justify-content: space-evenly;
    gap: 1rem;
    padding: .9rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--bone-2);
  }
  .fund-nib { --fund-h: 1.45rem; }
  .fund-hcf { --fund-h: 1.4rem; }
  .fund-cbhs { --fund-h: 1.15rem; }
}

@media (max-width: 600px) {
  .reviews .r-card { flex-basis: 88%; }
  .service-track { --service-card-width: 82%; }
  .care-grid { gap: 2.75rem; }
  .care-photo { aspect-ratio: 8 / 5; }
  .care-body { padding-top: 1.25rem; }
  .care-offer-intro { min-height: 0; padding: 1.5rem; }
  .care .offer-amount { font-size: 3.75rem; }
}