/* Finishing details for the existing Payne & King composition. */
:root {
  --ease-detail: cubic-bezier(.22, 1, .36, 1);
  --detail-time: 260ms;
}
html { scrollbar-gutter: stable; }
::selection { background: var(--champagne); color: var(--ink); }
h1, h2, .service-copy h3, .video-title { text-wrap: balance; }
.story-copy p, .service-copy p, .first-copy p, .patient-note blockquote { text-wrap: pretty; }
.hero-call span, .call-link, .visit-contact, .visit-details dl { font-variant-numeric: tabular-nums; }

/* The header gains just enough separation as content passes underneath. */
.site-header {
  transition: box-shadow var(--detail-time) var(--ease-detail);
}
.site-header[data-scrolled="true"] { box-shadow: 0 4px 18px #29251f07; }
.desktop-nav a::after {
  width: 100%; transform: scaleX(0); transform-origin: left;
  transition: transform var(--detail-time) var(--ease-detail);
}
.desktop-nav a[aria-current="location"]::after,
.desktop-nav a:focus-visible::after { transform: scaleX(1); }
.mobile-menu a[aria-current="location"] { color: var(--ink); border-left: 2px solid var(--ink); padding-left: 12px; }
.mobile-menu a { border-left: 2px solid transparent; padding-left: 12px; }

/* Clear edges, deliberate spacing, and equal caption baselines on white. */
.dentist-roster { border-top-color: #e6dfd4; }
.dentist-roster p { line-height: 1.25; }
.dentist-roster span { line-height: 1.65; }
.story-play { background: #fff; border: 1px solid #e6dfd4; box-shadow: 0 4px 18px #29251f08; }
.story-play .play-circle { background: #fff; }
.service-copy { padding: 32px; }
.service-copy p { font-size: 14px; line-height: 1.75; }
.service-link { width: 100%; font-size: 12px; margin-top: auto; }
.service-feature--aesthetics { background: #fff; }
.service-feature--general .service-image img { object-position: 50% 15%; }
.service-feature--cosmetic .service-image img { object-position: 50% 32%; }
.service-feature--hygiene .service-image img { object-position: 55% 35%; }
.service-feature--aesthetics .service-image img { object-position: 50% 22%; }
.service-feature { transition: box-shadow var(--detail-time) var(--ease-detail); }
.service-feature { box-shadow: 0 1px 2px #29251f04, inset 0 0 0 1px #ffffff80; }
.care-section, .first-visit { border-block: 1px solid #d7c4a74d; }
.story-visual picture, .patient-note-photo, .video-art {
  position: relative;
  box-shadow: 0 8px 24px #29251f08;
}
.story-visual picture::after, .patient-note-photo::after, .video-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px #29251f12;
}
.patient-note-photo { position: relative; }
.service-image img { transition: transform 650ms var(--ease-detail); }
.treatment, .treatment:first-child, .faq-list details, .faq-list details:first-child { border-color: var(--line); }
.desk-faces img { border-color: var(--pearl); }
.patient-note .quote-credit a { font-size: 12px; }

/* Feedback follows the action; nothing appears late on scroll. */
.button, .mobile-contact > button {
  transition: background var(--detail-time) var(--ease-detail), border-color var(--detail-time) var(--ease-detail), transform 120ms ease;
}
.button { box-shadow: inset 0 1px 0 #ffffff14, 0 2px 4px #29251f08; }
.button:active, .mobile-contact > button:active { transform: translateY(1px); }
.button svg, .quiet-link svg, .hero-discover svg, .call-link svg, .service-link span {
  transition: transform var(--detail-time) var(--ease-detail);
}
.hero-discover { border: 1px solid #ffffff80; }
.text-button { text-decoration-thickness: 1px; text-underline-offset: 6px; }
.faq-list summary, .treatment summary, .care-explorer > summary {
  transition: color var(--detail-time) ease;
}
details[open] > summary .plus { color: #7d6241; }
.plus::before, .plus::after { transition: transform var(--detail-time) var(--ease-detail); }
.close-dialog { width: 44px; height: 44px; transition: background var(--detail-time) ease; }
.close-dialog:active { background: var(--pearl); }
.footer-main nav a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-main nav a, .footer-bottom a, .visit-contact a { text-underline-offset: 5px; text-decoration-thickness: 1px; }
dialog[open] { animation: dialog-detail 200ms var(--ease-detail); }
dialog { box-shadow: 0 24px 80px #29251f30, 0 2px 8px #29251f12; }
dialog[open]::backdrop { animation: backdrop-detail 200ms ease; }
@keyframes dialog-detail { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-detail { from { opacity: 0; } to { opacity: 1; } }

@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover::after { transform: scaleX(1); }
  .button:hover { background: #433b30; border-color: #433b30; }
  .button:hover svg, .quiet-link:hover svg, .call-link:hover svg { transform: translateX(3px); }
  .hero-discover:hover svg { transform: translateY(3px); }
  .service-link:hover span { transform: translate(2px, -2px); }
  .service-feature:hover, .service-feature:focus-within { box-shadow: 0 5px 20px #29251f08; }
  .close-dialog:hover { background: var(--pearl); }
  .footer-main nav a:hover, .footer-bottom a:hover, .visit-contact a:hover { text-decoration: underline; }
}

@media (min-width: 761px) {
  .dentist-roster p { min-height: 69px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .service-copy { padding: 24px; }
  .service-link { font-size: 11px; }
}
@media (max-width: 760px) {
  .service-copy { padding: 24px; }
  .service-copy p { font-size: 13px; line-height: 1.75; }
  .service-link { font-size: 11px; }
  .service-feature { min-height: 280px; }
  .dentist-roster span { font-size: 12px; }
  .front-desk p, .video-topic, .video-action { font-size: 12px; }
  .video-action { min-height: 44px; display: flex; align-items: center; }
  .footer-main > p, .footer-main nav, .footer-bottom { font-size: 11px; }
  .footer-main nav { flex-wrap: wrap; gap: 4px 22px; justify-content: flex-start; }
  .mobile-contact { box-shadow: 0 -5px 20px #29251f06; }
  .mobile-contact > * { min-height: 48px; }
}
@media (max-width: 360px) {
  .service-feature { grid-template-columns: .65fr 1.35fr; }
  .service-copy { padding: 18px; }
  .service-copy h3 { font-size: 27px; }
  .dentist-roster p { font-size: 23px; }
}
/* Give the photographs enough width to keep their subject legible on small cards. */
@media (min-width: 761px) and (max-width: 1100px), (max-width: 600px) {
  .service-feature { grid-template-columns: 1fr; min-height: 0; }
  .service-image { aspect-ratio: 4 / 3; }
  .service-copy { min-height: 225px; padding: 26px; }
  .service-copy h3 { font-size: 31px; }
  .service-copy p { margin-bottom: 20px; }
  .service-feature--general .service-image img { object-position: 50% 8%; }
  .service-feature--cosmetic .service-image img { object-position: 50% 22%; }
  .service-feature--hygiene .service-image img { object-position: 55% 15%; }
  .service-feature--aesthetics .service-image img { object-position: 50% 15%; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preview]) *, html:not([data-motion-preview]) *::before, html:not([data-motion-preview]) *::after { animation: none !important; transition: none !important; }
}