/* Pearl Dental Care system layer.
   Loaded in head() on every one of the 51 pages, after each page's own stylesheets and directly
   before apple-buttons.css, which still owns buttons and still loads last.
   Purpose: one footer, one wordmark, one kicker, one accordion, one FAQ pattern, one quote face,
   one breadcrumb, one map and one caption treatment across the whole site.
   The homepage declares its own tokens in home-base.css; anything token-shaped here is scoped
   with body:not(.pearl-reference-home) so the homepage keeps the look the audit praised. */

/* ============================================================ tokens */
/* site.css ships --teal as #c5a467. Measured on white that is 2.36:1 and fails WCAG AA for text.
   Text gold becomes #8a6d2f (4.87:1 on white). On navy the lighter #c5a467 is restored, because
   there it is an accent on a dark plate and reads at well over 4.5:1. */
body:not(.pearl-reference-home) {
  --teal: #8a6d2f;
  --teal-2: #8a6d2f;
  --teal-soft: #8a6d2f;
  --pd-navy: #13243b;
  --pd-gold-dark: #8a6d2f;
  --pd-gold-light: #c5a467;
  --pd-rule: rgba(19, 36, 59, .18);
}
body:not(.pearl-reference-home) .section--dark,
body:not(.pearl-reference-home) .section--teal,
body:not(.pearl-reference-home) .consult-cta,
body:not(.pearl-reference-home) .pd-navy,
body:not(.pearl-reference-home) .p-dark,
body:not(.pearl-reference-home) .cmq,
body .site-footer {
  --teal: #c5a467;
  --teal-2: #c5a467;
  --teal-soft: #c5a467;
}

/* ============================================================ wordmark */
/* pearl-wordmark-white.webp is a real alpha knockout, so the plate rectangle is gone and the
   old overflow crop and the SVG colour-matrix filter are both retired. */
body .pearl-logo {
  display: block;
  width: 142px;
  height: auto;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
body .pearl-logo img {
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
  filter: none;
}
body .site-footer .pearl-logo { width: 158px; margin-bottom: 22px; }
@media (max-width: 900px) {
  body .pearl-logo { width: 120px; }
  body .site-header .nav__logo .pearl-logo { transform: translateY(5px); }
  body .site-footer .pearl-logo { width: 138px; }
}

/* ============================================================ one footer */
/* atelier.css repaints the shared footer white on the 50 inner pages, which left the brand
   column's white type invisible and the wordmark reading as a navy rectangle. Navy everywhere. */
body .site-footer {
  background: #13243b;
  color: rgba(255, 255, 255, .72);
  border: 0;
  padding: 72px var(--gutter, 32px) 34px;
}
body .site-footer > .wrap { max-width: 1456px; margin: auto; padding: 0; }
body .site-footer a { color: rgba(255, 255, 255, .82) !important; text-decoration: none; }
body .site-footer a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
body .site-footer h2,
body .site-footer .footer-brand__tag { color: #fff; }
body .site-footer .footer-brand > p:not(.footer-brand__tag) { color: rgba(255, 255, 255, .66); }
body .site-footer .footer-col__title {
  color: rgba(255, 255, 255, .58) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 6px 0 16px;
}
/* one list reset: the old stack ran site.css gap, atelier li margin and a 40px min-height
   together and opened roughly 70px between links. */
body .site-footer .footer-col ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
body .site-footer .footer-col li { margin: 0; }
body .site-footer .footer-col a,
body .site-footer .footer-col__addr {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 0;
  min-height: 0;
}
body .site-footer .footer-col__addr { color: rgba(255, 255, 255, .5); }
body .site-footer .btn,
body .site-footer .btn--ghost-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-size: 13px;
}
body .site-footer .btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
body .site-footer .footer-brand .btn { margin-top: 22px !important; }
body .site-footer .footer-bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .55);
}
body .site-footer .footer-bottom__brand { font-size: 13px; gap: 8px; }
body .site-footer .footer-bottom__legal { font-size: 13px; }
body .site-footer .site-note { color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.6; }
body .site-footer .tel-inline { color: rgba(255, 255, 255, .82) !important; }

/* ============================================================ one kicker */
/* Five kicker systems collapse to the homepage one: uppercase, 12px, .14em, navy, 24px rule. */
body:not(.pearl-reference-home) .kicker,
body:not(.pearl-reference-home) .eyebrow,
body:not(.pearl-reference-home) .page-hero__eyebrow,
body:not(.pearl-reference-home) .lcard__state,
body:not(.pearl-reference-home) .pd-overline,
body:not(.pearl-reference-home) .lib-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body, 'Manrope', Arial, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.4;
  color: #13243b;
  margin-bottom: 20px;
}
body:not(.pearl-reference-home) .kicker::before,
body:not(.pearl-reference-home) .page-hero__eyebrow::before,
body:not(.pearl-reference-home) .pd-overline::before {
  content: "";
  width: 24px;
  height: 1px;
  flex: 0 0 24px;
  background: currentColor;
  opacity: .55;
}
body:not(.pearl-reference-home) .kicker::after { content: none; }
body:not(.pearl-reference-home) .section--dark .kicker,
body:not(.pearl-reference-home) .section--teal .kicker,
body:not(.pearl-reference-home) .consult-cta .kicker,
body:not(.pearl-reference-home) .pd-navy .pd-overline,
body:not(.pearl-reference-home) .pd-navy .kicker,
body:not(.pearl-reference-home) .p-dark .kicker {
  color: #c5a467;
}
/* the library and the treatment "at a glance" rail centre their kickers; keep the rule tidy */
body:not(.pearl-reference-home) .txt-center .kicker { justify-content: center; }

/* ============================================================ one accordion */
/* Three grammars (filled navy minus, outlined plus, bare + and x) become one: a 34px outlined
   navy circle holding a plus that becomes a minus when the panel is open. Written here rather
   than in site.css because treatment pages are cleanStyles and never load site.css. */
body .faq-item,
body .pd-accordions details {
  border-bottom: 1px solid var(--pd-rule, rgba(19, 36, 59, .18));
}
body .faq-item > summary,
body .pd-accordions summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--font-body, 'Manrope', Arial, sans-serif) !important;
  font-size: 19px !important;
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: -.01em;
}
body .faq-item > summary::-webkit-details-marker,
body .pd-accordions summary::-webkit-details-marker { display: none; }
body .faq-item__q { font-family: inherit; font-size: inherit; font-weight: inherit; }

/* one control */
body .faq-item__icon,
body .pd-accordions summary > span,
body .pearl-tech details summary > span {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent !important;
  color: inherit;
  opacity: .62;
  font-size: 0;
  transform: none !important;
  transition: opacity .2s ease;
}
body .faq-item__icon::before,
body .faq-item__icon::after,
body .pd-accordions summary > span::before,
body .pd-accordions summary > span::after,
body .pearl-tech details summary > span::before,
body .pearl-tech details summary > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
body .faq-item__icon::before,
body .pd-accordions summary > span::before,
body .pearl-tech details summary > span::before {
  width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; transform: none;
}
body .faq-item__icon::after,
body .pd-accordions summary > span::after,
body .pearl-tech details summary > span::after {
  width: 1.5px; height: 12px; margin: -6px 0 0 -.75px; transform: none;
}
body .faq-item[open] .faq-item__icon,
body .pd-accordions details[open] summary > span,
body .pearl-tech details[open] summary > span { opacity: 1; }
body .faq-item[open] .faq-item__icon::after,
body .pd-accordions details[open] summary > span::after,
body .pearl-tech details[open] summary > span::after { transform: scaleY(0); }
body .faq-item__a,
body .pd-accordions details > p,
body .pearl-tech details > div {
  font-size: 16px;
  line-height: 1.75;
  max-width: 68ch;
  padding: 0 58px 24px 0;
  color: inherit;
  opacity: .84;
}
/* dark plates: hairlines and controls read on navy */
body .pd-navy .pd-accordions details,
body .section--dark .faq-item { border-color: rgba(255, 255, 255, .28); }

/* ============================================================ one quote face */
body:not(.pearl-reference-home) .review-card__quote,
body:not(.pearl-reference-home) .rev__lead blockquote,
body:not(.pearl-reference-home) .pearl-google-feature blockquote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 34px;
  line-height: 1.32;
  letter-spacing: -.02em;
  font-style: normal;
}
body:not(.pearl-reference-home) .pearl-google-pair blockquote,
body:not(.pearl-reference-home) .quote-sm blockquote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -.015em;
}
@media (max-width: 700px) {
  body:not(.pearl-reference-home) .review-card__quote,
  body:not(.pearl-reference-home) .rev__lead blockquote,
  body:not(.pearl-reference-home) .pearl-google-feature blockquote { font-size: 26px; }
  body:not(.pearl-reference-home) .pearl-google-pair blockquote { font-size: 18px; }
}

/* ============================================================ one breadcrumb */
body .crumbs,
body .lib-crumbs,
body .pd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-family: var(--font-body, 'Manrope', Arial, sans-serif);
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.5;
  color: rgba(19, 36, 59, .74);
}
body .crumbs a,
body .lib-crumbs a,
body .pd-breadcrumb a { color: #13243b; text-decoration: none; border-bottom: 1px solid rgba(19, 36, 59, .28); padding-bottom: 1px; }
body .crumbs a:hover,
body .lib-crumbs a:hover,
body .pd-breadcrumb a:hover { border-bottom-color: #13243b; }
body .crumbs > span[aria-hidden],
body .lib-crumbs > span[aria-hidden],
body .pd-breadcrumb > span:not(:last-child) { opacity: .45; }
/* the treatment breadcrumb sits in its own white strip under the hero, not over the photo */
body .pd-crumbbar { background: #fff; border-bottom: 1px solid rgba(19, 36, 59, .1); }
body .pd-crumbbar .pd-container { padding-top: 20px; padding-bottom: 18px; }
body .pd-crumbbar .pd-breadcrumb { margin: 0; }

/* ============================================================ captions */
/* Disclosure captions are legally load bearing, so they never sit white on near white. */
body .c-photo-caption,
body .bigpic__cap,
body .pd-image-note {
  color: #13243b;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
}
body .pd-image-note {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .92);
  color: #13243b;
  border-radius: 3px 0 0 0;
}
body figure figcaption,
body .pearl-visit__photo figcaption,
body .pd-photo-row figcaption {
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}
body .pearl-visit__photo figcaption,
body .pd-photo-row figcaption {
  background: linear-gradient(transparent, rgba(8, 19, 33, .82) 55%);
  padding: 54px 20px 16px;
  text-shadow: 0 1px 3px rgba(8, 19, 33, .55);
}

/* ============================================================ legal pages */
/* pages/legal.mjs emits bare h2 + p into .wrap.policies and no stylesheet ever styled it. */
/* .policies is the wrap itself, so cap the children, not the column, or the block centres */
body .policies { max-width: none; }
body .policies > * { max-width: 68ch; }
body .policies h2 {
  font-family: var(--font-body, 'Manrope', Arial, sans-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: 52px 0 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(19, 36, 59, .14);
}
body .policies h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body .policies p { font-size: 16px; line-height: 1.75; margin: 0; max-width: 68ch; }
body .policies p + p { margin-top: 18px; }
body .policies a { color: #13243b; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  body .policies h2 { font-size: 20px; margin-top: 40px; padding-top: 24px; }
}

/* ============================================================ inner page hero */
/* Fifty inner pages opened with text on white and 700px of empty right half. Pages with an image
   of their own put it in the right cell; the rest halve the hero and let section one carry. */
body:not(.pearl-reference-home) .page-hero {
  padding-top: 122px;
  padding-bottom: 34px;
}
body:not(.pearl-reference-home) .page-hero__sub { max-width: 62ch; }
body .page-hero--split > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
body .page-hero--split .page-hero__media { margin: 0; }
body .page-hero--split .page-hero__media img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 4px;
  display: block;
}
body .page-hero--split .page-hero__media figcaption {
  position: static;
  margin-top: 10px;
  color: rgba(19, 36, 59, .74);
  font-size: 12px;
  background: none;
  padding: 0;
  text-shadow: none;
}
@media (max-width: 900px) {
  body .page-hero--split > .wrap { display: block; }
  body .page-hero--split .page-hero__media { margin-top: 28px; }
  body .page-hero--split .page-hero__media img { height: 210px; }
}

/* ============================================================ library index hero */
body .lib-hero .txt-center { text-align: left; }
body .lib-hero .kicker { justify-content: flex-start !important; }
body .lib-hero__h { max-width: 18ch; }
body .lib-hero__h .serif,
body .lib-hero__h em {
  font-family: inherit;
  font-style: normal;
  color: inherit;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
body .lib-hero .lib-hero__sub { margin-left: 0; max-width: 62ch; }

/* ============================================================ no shimmer */
/* background-clip:text with an infinite gradient loop is a known invisibility risk and it gave
   the site a second closing CTA. One emphasis rule: solid colour, no animation. */
body:not(.pearl-reference-home) .hero__h em,
body:not(.pearl-reference-home) .cmq__h .serif-i,
body:not(.pearl-reference-home) .section--dark .serif,
body:not(.pearl-reference-home) .consult-cta .serif,
body:not(.pearl-reference-home) #quiz .quiz__h .serif {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--teal) !important;
  animation: none !important;
  filter: none !important;
}

/* ============================================================ one map */
/* Every Google embed sits in the same panel. The panel is designed navy with the address on it,
   so it reads as a component whether or not the embed has painted. The iframe is pulled up past
   Google's own blue "Open in Maps" chip, which is off palette and cannot be styled from outside,
   while the attribution strip along the bottom stays visible. */
body .pd-map {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #13243b;
  min-width: 0;
  isolation: isolate;
}
body .pd-map__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  color: rgba(255, 255, 255, .86);
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(197, 164, 103, .16), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px),
    #13243b;
}
body .pd-map__plate strong { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
body .pd-map__plate span { font-size: 14px; line-height: 1.5; }
body .pd-map__pin { width: 26px; height: 26px; margin-bottom: 6px; display: block; fill: none; stroke: #c5a467; stroke-width: 1.6; }
body .pd-map iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  width: 100%;
  height: calc(100% + 80px);
  border: 0;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease;
}
body .pd-map iframe.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body .pd-map iframe { transition: none; } }
body .pd-map__cta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 13px 18px;
  min-height: 48px;
  background: #fff;
  color: #13243b !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(19, 36, 59, .14);
  border-radius: 3px;
  box-shadow: 0 3px 15px rgba(19, 36, 59, .12);
}
body .pd-map__cta:hover { background: #f6f4ef; text-decoration: none !important; }
@media (max-width: 700px) {
  /* square crop on phones: the desktop-shaped panel pushed the map into a corner */
  body .pd-map { aspect-ratio: 1 / 1; height: auto !important; min-height: 0; }
  body .pd-map__cta { left: 12px; bottom: 12px; gap: 18px; }
}

/* ============================================================ tag rows */
/* Tag rows get a rule above them; the tag shapes themselves are owned by apple-buttons.css. */
body .pd-chips,
body .lib-related__chips { border-top: 1px solid rgba(19, 36, 59, .14); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 0 4px; }

/* ============================================================ arrows and text links */
body .icon-arrow { width: 1.1em; height: 1.1em; }
body .icon-arrow--e { width: 1.15em; height: 1.15em; }
body .text-link,
body .pd-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  line-height: 1.5;
}
body .text-link::after,
body .pd-text-link::after { content: none; }

/* ============================================================ pause controls */
/* One control: a labelled capsule, never under 44px. */
body .care-loop-toggle,
body .x-care-controls [data-care-play],
body .rail-control-bar .rail-play,
body .p-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
}
body .care-loop-toggle:hover,
body .x-care-controls [data-care-play]:hover,
body .rail-control-bar .rail-play:hover,
body .p-motion:hover { opacity: 1; }
body .care-loop-toggle { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* ============================================================ technology cards */
body .tech-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
body .tech-item { display: flex; flex-direction: column; height: 100%; }
body .tech-item p { flex: 1; }
@media (max-width: 1000px) { body .tech-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { body .tech-list { grid-template-columns: 1fr; } }

/* ============================================================ mobile type floors */
/* Meta text was running to 9px and 10px on phones. Floor: body 16px, meta 13px, caption 12px. */
@media (max-width: 700px) {
  body p, body li, body dd, body dt { font-size: max(1em, 15px); }
  body .page-hero__sub,
  body .lib-article__lede,
  body .pd-prose p { font-size: 16px; }
  body .crumbs,
  body .lib-crumbs,
  body .pd-breadcrumb,
  body .footer-bottom__brand,
  body .footer-bottom__legal,
  body .footer-bottom__legal a,
  body .pearl-visit__label,
  body .lcard__state,
  body .pearl-google-rating small { font-size: 13px !important; }
  body .c-photo-caption,
  body .bigpic__cap,
  body .pd-image-note,
  body figure figcaption,
  body .site-note,
  body .pearl-visit__hours dd small { font-size: 12px !important; }
  body .site-footer .footer-col a,
  body .site-footer .footer-col__addr,
  body .site-footer .footer-col__title { font-size: 14px; }
}

/* ============================================================ sticky safety */
/* overflow:hidden on html or body kills position:sticky. clip does the same job and keeps it. */
html, body { overflow-x: clip; }

/* ============================================================ hero media, contain */
body .page-hero--split .page-hero__media--contain img {
  height: 240px;
  object-fit: contain;
  background: linear-gradient(180deg, #f7f5f0, #efece4);
  padding: 22px;
  border-radius: 4px;
}
@media (max-width: 900px) { body .page-hero--split .page-hero__media--contain img { height: 170px; } }

/* ============================================================ treatment pages */
/* Ray keeps the the reference layout section order and the serif display headings here. Everything that is
   chrome (footer, breadcrumb, buttons, accordion, measure, CTA position) matches the rest of the
   site. treatment-editorial.css loads before this file, so these win without !important games. */
body .pd-prose p,
body .pd-long-copy .pd-prose p,
body .pd-intro p,
body .pd-practice .pd-prose p { max-width: 68ch; }
body .pd-note { max-width: 68ch; }

/* the CTA left the heading cell; on phones it now follows the intro paragraph */
body .pd-aside__cta { margin: 26px 0 0; }
body .pd-aside__head { align-self: start; }

/* the FAQ block uses the site accordion, so it needs the light-plate rhythm */
body .pd-faq .faq-list { border-top: 1px solid rgba(19, 36, 59, .18); }
body .pd-faq .faq-item__a { padding-right: 58px; }

/* quick facts: one intro line under the heading, and the panel closes up */
body .pd-facts .pd-quick-intro { font-size: 17px; line-height: 1.7; max-width: 44ch; margin-top: 22px; opacity: .88; }
body .pd-facts .pd-halves { align-items: start; }
body .pd-accordions { padding-left: 0; }
@media (min-width: 801px) { body .pd-accordions { padding-left: 40px; } }

/* testimonial carousel: pair the controls, close the empty band, label the pause */
body .pd-patient-reviews .rev-carousel { margin-bottom: 8px; }
body .pd-patient-reviews .review-card { min-height: 0; padding-bottom: 12px; }
/* controls sit together under the quote instead of stranded at the two far edges */
body .pd-patient-reviews .rev-carousel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
body .pd-patient-reviews .rev-carousel__track { flex: 0 0 100%; order: 0; margin-bottom: 10px; }
body .pd-patient-reviews .rev-carousel__nav--prev { order: 1; }
body .pd-patient-reviews .rail-control-bar { order: 2; margin: 0; }
body .pd-patient-reviews .rev-carousel__nav--next { order: 3; }
body .pd-patient-reviews .rev-carousel__nav {
  position: static !important;
  transform: none !important;
  margin: 0;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(19, 36, 59, .28);
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* the serif display face stays, the chrome type does not follow it */
body .pd-treatment .faq-item > summary,
body .pd-treatment .pd-accordions summary,
body .pd-treatment .pd-breadcrumb,
body .pd-treatment .pd-chip { font-family: var(--font-body, 'Manrope', Arial, sans-serif) !important; }

/* ============================================================ the pediatric band */
body .bigpic__cap { position: static; margin: 14px auto 0; padding: 0 var(--gutter, 24px); color: #13243b; }
body .bigpic { background: #fff; }

/* ============================================================ homepage refinements */
/* home-base.css and the home-*.css files load before this layer, so these land last. */

/* the marquee card sat on top of the running rows and clipped words mid-letter */
body.pearl-reference-home .cmq__card {
  position: static;
  transform: none;
  margin: 30px auto 0;
  box-shadow: 0 18px 50px rgba(19, 36, 59, .38);
}
body.pearl-reference-home .cmq__belt { padding-block: clamp(30px, 4vw, 52px) clamp(6px, 1vw, 14px); }
body.pearl-reference-home .cmq { padding-bottom: clamp(34px, 4vw, 56px); }

/* payments strip: one baseline for the three kickers, one divider rule, an equal card height */
body.pearl-reference-home .pearl-payments__intro,
body.pearl-reference-home .pearl-payments__coverage,
body.pearl-reference-home .pearl-payments__finance {
  justify-content: flex-start;
  padding-top: 36px;
  padding-bottom: 36px;
  margin: 0;
}
body.pearl-reference-home .pearl-payments__coverage { padding-left: 8%; padding-right: 6%; border-left: 1px solid rgba(19, 36, 59, .16); }
body.pearl-reference-home .pearl-payments__finance { padding-left: 30px; padding-right: 30px; }
body.pearl-reference-home .pearl-payments__finance .pearl-payments__finance-name { margin-top: auto; }
/* the bare "+" between the two plan names is a rule, not a character */
body.pearl-reference-home .pearl-payments__plus {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .3;
  margin: 6px 0;
}
@media (max-width: 760px) {
  body.pearl-reference-home .pearl-payments__intro,
  body.pearl-reference-home .pearl-payments__coverage,
  body.pearl-reference-home .pearl-payments__finance { padding-top: 26px; padding-bottom: 26px; }
  body.pearl-reference-home .pearl-payments__coverage { padding-left: 22px; padding-right: 0; }
  body.pearl-reference-home .pearl-payments__finance { padding-left: 22px !important; padding-right: 22px !important; }
}

/* service fold: the featured card includes the eyes */
body.pearl-reference-home .x-fold-photo img { object-position: 50% 28%; }

/* the pediatric band: no grey smear, a readable caption, subjects off centre */
body.pearl-reference-home .bigpic.family-wide img { object-position: 62% 40%; }
body.pearl-reference-home .bigpic__cap {
  position: static;
  margin: 14px auto 0;
  max-width: 1456px;
  color: #13243b;
  font-size: 12px;
}

/* the doctor block had a deep void under the portrait */
body.pearl-reference-home .our-story__grid { align-items: center; }

/* footer bottom reads left to right, not centred */
body .site-footer .footer-bottom,
body .site-footer .footer-bottom__brand,
body .site-footer .footer-bottom__brand span,
body .site-footer .footer-bottom__legal { text-align: left !important; }

/* ============================================================ neighborhood drive stat */
/* The six area pages were identical but for the town name. Each one now leads with its own
   measured drive time, the number a neighbour actually wants, in the hero's right cell. */
body .page-hero__aside { align-self: center; }
body .drive-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 30px;
  border: 1px solid rgba(19, 36, 59, .14);
  border-radius: 4px;
  background: linear-gradient(180deg, #fbf9f5, #f4f1ea);
}
body .drive-stat__num { font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -.04em; color: #13243b; }
body .drive-stat__lab { font-size: 15px; line-height: 1.5; color: rgba(19, 36, 59, .78); }
body .drive-stat__sub { font-size: 13px; color: rgba(19, 36, 59, .55); }
@media (max-width: 900px) { body .drive-stat { padding: 22px 24px; } body .drive-stat__num { font-size: 36px; } body .page-hero__aside { margin-top: 30px; } }

/* ============================================================ mobile header CTA */
/* The homepage hid this pill. It is the highest-intent surface on the site, so it shows here too,
   and it is one component: a white outline capsule on the navy (or transparent) header bar. */
body .nav__book-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #fff !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
body .nav__book-mobile .icon-arrow { width: 14px; height: 14px; }
@media (max-width: 800px) { body .nav__book-mobile { display: inline-flex; } }
@media (min-width: 801px) { body .nav__book-mobile { display: none !important; } }

/* ============================================================ split hero ratio */
/* a stat card needs less room than a photo, so the headline keeps its line breaks */
body .page-hero--split:has(.page-hero__aside) > .wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }

/* ============================================================ treatment hero note */
body .pd-image-note { right: 18px; bottom: 14px; border-radius: 3px; }

/* ============================================================ location card map */
/* the shared map panel sits beside the location card and matches its height */
body .single-loc__map { min-height: 420px; }
body .single-loc__map iframe { display: block; }
@media (max-width: 860px) { body .single-loc__map { min-height: 0; height: auto; } }

/* ============================================================ one quote face on the homepage */
/* The review block ran three type styles: a 40px display lead and two 17px sans supports.
   Same face, smaller size. */
body.pearl-reference-home .pearl-google-pair blockquote {
  font-family: var(--font-display, 'Newsreader', Georgia, serif);
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: -.015em;
}
@media (max-width: 760px) {
  body.pearl-reference-home .pearl-google-pair blockquote { font-size: 18px; }
}

/* ============================================================ location card on phones */
/* card first, map second, and the directions capsule clears Google's attribution strip */
@media (max-width: 860px) {
  body .single-loc--lcard { display: flex; flex-direction: column; gap: 20px; }
  body .single-loc--lcard .single-loc__info { order: 0; }
  body .single-loc--lcard .single-loc__map { order: 1; }
}
@media (max-width: 700px) {
  body .pd-map__cta { bottom: 30px; }
}

/* one hairline between the columns and the legal row, not two */
body .site-footer .footer-grid { border-bottom: 0; padding-bottom: 8px; }
body .site-footer .footer-bottom__brand { align-items: flex-start; }

/* ============================================================ area pages: route, services, nearby */
/* The town pages carry real directions, a full service index and a nearby-town rail. These live in
   the system layer because the service pages (clean styles, no site.css) reuse the areas strip. */
body .drive-steps {
  counter-reset: drive;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
body .drive-steps li {
  counter-increment: drive;
  position: relative;
  padding-left: 46px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(19, 36, 59, .86);
}
body .drive-steps li::before {
  content: counter(drive);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(19, 36, 59, .18);
  background: #fbf9f5;
  font-size: 13px;
  font-weight: 600;
  color: #13243b;
}
body .drive-parking {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid #c5a467;
  background: rgba(197, 164, 103, .08);
  font-size: 16px;
  line-height: 1.6;
}
body .drive-parking strong { font-weight: 600; }

body .svc-link-intro {
  max-width: 62ch;
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(19, 36, 59, .78);
}
body .svc-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
body .svc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(19, 36, 59, .14);
  border-radius: 4px;
  background: #fff;
  color: #13243b;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.45;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
body .svc-link::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-top: 1.6px solid #c5a467;
  border-right: 1.6px solid #c5a467;
  transform: rotate(45deg);
}
body .svc-link:hover {
  border-color: rgba(19, 36, 59, .32);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(8, 19, 33, .07);
}

body .near-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body .near-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  border: 1px solid rgba(19, 36, 59, .14);
  border-radius: 4px;
  background: #fff;
  color: #13243b;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
body .near-card:hover {
  border-color: rgba(19, 36, 59, .32);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(8, 19, 33, .07);
}
body .near-card__kicker {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(19, 36, 59, .74);
}
body .near-card__title { font-size: 19px; line-height: 1.25; }

/* the areas strip that every service page ends with */
body .areas-strip { padding: 64px 0; background: #fbf9f5; }
body .areas-strip__inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
body .areas-strip__eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(19, 36, 59, .74);
}
body .areas-strip h2 { margin: 10px 0 8px; font-size: 30px; line-height: 1.15; }
body .areas-strip p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: rgba(19, 36, 59, .78); max-width: 64ch; }
body .areas-strip__links { display: flex; flex-wrap: wrap; gap: 10px; }
body .areas-strip__links a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(19, 36, 59, .16);
  border-radius: 999px;
  background: #fff;
  color: #13243b;
  text-decoration: none;
  font-size: 14px;
  transition: border-color .2s, background .2s;
}
body .areas-strip__links a:hover { border-color: rgba(19, 36, 59, .36); background: #fff; }
body .areas-strip__links small { font-size: 12px; color: rgba(19, 36, 59, .55); }

@media (max-width: 980px) {
  body .svc-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body .svc-link-grid { grid-template-columns: 1fr; }
  body .near-grid { grid-template-columns: 1fr; }
  body .drive-steps li { padding-left: 42px; font-size: 16px; }
  body .areas-strip { padding: 48px 0; }
  body .areas-strip h2 { font-size: 26px; }
}

/* ---------------------------------------------------------------- service pages by town
   .sa-points is the short fact list inside the editorial column on a service-by-town page.
   .near-grid--four lets the town page show its four service pages in one row on desktop. */
body .sa-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
body .sa-points li {
  position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55;
  color: rgba(19, 36, 59, .82);
}
body .sa-points li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: #c8a96a;
}
@media (min-width: 901px) { body .near-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- request form (/book/#request)
   A design-preview form: it posts nowhere, it carries a Preview badge, and site.js replaces the
   submit with an inline message. Styling follows the rest of the shell: ivory field, hairline
   navy border, gold focus ring, 16px text so iOS never zooms the page on focus. */
body .request-block {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 85px; align-items: start;
}
body .request-block__intro .display-3 { margin: 14px 0 18px; }
body .request-block__intro p { font-size: 17px; line-height: 1.7; color: rgba(19, 36, 59, .78); margin: 0 0 26px; max-width: 42ch; }
body .request-form {
  background: #fbfaf7; border: 1px solid rgba(19, 36, 59, .12); border-radius: 18px;
  padding: 34px; max-width: 730px;
}
body .request-form__pill {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 26px; font-size: 13px; line-height: 1.5; color: rgba(19, 36, 59, .74);
}
body .request-form__badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #13243b; color: #fff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
body .request-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
body .request-form__field { display: grid; gap: 8px; margin-bottom: 18px; }
body .request-form__grid .request-form__field { margin-bottom: 0; }
body .request-form__field label {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(19, 36, 59, .74);
}
body .request-form input,
body .request-form select,
body .request-form textarea {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.5; color: #13243b;
  background: #fff; border: 1px solid rgba(19, 36, 59, .18); border-radius: 10px;
  padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
}
body .request-form textarea { resize: vertical; min-height: 118px; }
body .request-form select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313243b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px 15px;
}
body .request-form__grid + .request-form__field { margin-top: 18px; }
body .request-form input::placeholder,
body .request-form textarea::placeholder { color: rgba(19, 36, 59, .38); }
body .request-form input:focus-visible,
body .request-form select:focus-visible,
body .request-form textarea:focus-visible {
  outline: none; border-color: #c8a96a; box-shadow: 0 0 0 3px rgba(200, 169, 106, .28);
}
body .request-form__consent {
  font-size: 13px; line-height: 1.65; color: rgba(19, 36, 59, .74);
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(19, 36, 59, .1);
}
body .request-form__actions { margin-top: 22px; }
body .request-form__status {
  margin: 20px 0 0; padding: 16px 18px; border-radius: 12px;
  background: #13243b; color: #fff; font-size: 15px; line-height: 1.6;
}
@media (max-width: 900px) {
  body .request-block { grid-template-columns: 1fr; gap: 34px; }
  body .request-form { padding: 26px 22px; }
  body .request-form__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- pay online note (/financing/#pay) */
body .pay-note {
  background: #fbfaf7; border-left: 3px solid #c8a96a; border-radius: 0 10px 10px 0;
  padding: 16px 18px; font-size: 16px; line-height: 1.7; color: rgba(19, 36, 59, .85);
}

/* WCAG: phone links inside text carry an underline; low-contrast greys lifted to 4.5:1 or better */
body .tel-inline{text-decoration:underline;text-underline-offset:3px}

/* Static map facade: instant, no third-party frame */
body .pd-map--static .pd-map__link{position:absolute;inset:0;display:block;z-index:1}
body .pd-map--static .pd-map__link img{width:100%;height:100%;object-fit:cover;display:block}
body .pd-map--static .pd-map__plate{display:none}
/* Location card: primary action centered */
body .single-loc--lcard .single-loc__ctas{display:flex;justify-content:center;gap:12px}
body .single-loc--lcard .single-loc__ctas .btn{margin:0}

/* Visit card: primary action centered everywhere it appears */
body .pearl-visit__details .pearl-visit__book{display:inline-flex;margin:22px auto 0}
body .pearl-visit__details{text-align:center}
body .pearl-visit__details address,body .pearl-visit__details dl,body .pearl-visit__details .pearl-visit__label,body .pearl-visit__details .pearl-visit__phone{text-align:left}
body .pearl-visit__details .pearl-visit__book{display:table;margin-left:auto;margin-right:auto}
body .pearl-visit__details .pearl-visit__book{align-self:center}

/* WCAG: inline phone links keep an underline in every context; small muted labels hold 4.5:1 */
body .tel-inline,body a.tel-inline{text-decoration:underline !important;text-underline-offset:3px}
body .areas-strip__links a small,body .near-card__kicker,body figcaption,body .request-form__pill,body .request-form label{color:#5b6572}
body .site-footer .tel-inline{color:rgba(255,255,255,.92)}

/* Tap targets: carousel dots and the slideshow control meet 24px */
body .x-care-dots>button{width:24px;height:24px;border-radius:50%;background:transparent;position:relative}
body .x-care-dots>button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.32);transition:transform .25s,background .25s}
body .x-care-dots>button[aria-current="true"]{transform:none;background:transparent}
body .x-care-dots>button[aria-current="true"]::before{background:#fff;transform:scale(1.35)}
body .x-care-controls>button,body [data-care-play]{min-height:28px}
body .r-home .x-care-dots>button,body .x-care-dots>button{width:24px;height:24px;background:transparent}
body .r-home [data-care-play],body [data-care-play]{height:auto;min-height:30px;padding-top:6px;padding-bottom:6px;line-height:1.2}
body [data-care-play]{min-height:44px !important;height:auto !important;padding:10px 12px !important;line-height:1.2 !important}
body .pearl-google-quotes figcaption strong{color:#13243b}
body .pearl-google-quotes figcaption span{color:#5b6572}