/* Shared responsive rules for the generated pages. Keep the approved visual direction. */
:root { --header-height: 108px; --contact-height: 0px; --gutter: clamp(20px, 4vw, 56px); }
html { scroll-padding-top: calc(var(--header-height) + 20px); scroll-padding-bottom: calc(var(--contact-height) + 24px); -webkit-text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
.header-inner { height: var(--header-height); }
main, .section-shell, .header-inner > *, .story > *, .first-inner > *, .visit > *, .inner-hero > *, .reading-section > *, .faq-section > *, .contact-layout > *, .catalog-list, .profile-hero .section-shell > * { min-width: 0; }
.section-shell { width: min(calc(100% - var(--gutter) * 2), var(--shell)); }
.button { max-width: 100%; white-space: normal; }
img, video { max-width: 100%; }
.desktop-nav a { white-space: nowrap; }
.desktop-nav a[aria-current=page]::after { transform: scaleX(1); }
.dentist-roster > div { display: block; }
.dentist-roster > div > a { display: flex; flex-direction: column; align-items: center; height: 100%; width: 100%; }
.dentist-roster img { margin-inline: auto; }
.dentist-roster p { width: 100%; }
.footer-address a, .visit-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.form-grid input, .form-grid select { min-width: 0; font-size: 16px; }
/* The close control stays reachable while the film and transcript scroll underneath. */
dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
.video-dialog { overflow: hidden; }
.video-modal-layout { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.video-dialog .close-dialog { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; }
.appointment-dialog { overscroll-behavior: contain; }
.appointment-dialog .close-dialog { position: sticky; float: right; top: 0; margin: -29px -29px -15px 12px; }
body.dialog-open .mobile-contact { visibility: hidden; }

/* Switch navigation before tablet links become compressed. */
@media (max-width: 1023px) {
  :root { --header-height: 84px; }
  .header-inner { padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); gap: 22px; }
  .site-header .brand { width: 142px; height: 80px; }
  .site-header .brand img { width: 142px; height: 142px; top: -30px; }
  .desktop-nav { display: none; }
  .header-cta { display: inline-flex; margin-left: auto; font-size: 12px; min-height: 48px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 7px; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; margin: 0; background: none; }
  .menu-toggle span { width: 24px; height: 1px; background: var(--ink); transition: transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: 100%; inset-inline: 0; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-block: 1px solid var(--line); box-shadow: 0 18px 32px #29251f12; padding: 16px var(--gutter) 24px; max-height: calc(100vh - var(--header-height) - var(--contact-height) - 12px); max-height: calc(100dvh - var(--header-height) - var(--contact-height) - 12px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-menu > a { display: flex; align-items: center; padding: 12px; min-height: 48px; font-size: 16px; }
  .mobile-menu .button { justify-content: center; margin-top: 8px; font-size: 14px; }
  .mobile-menu a[aria-current=page] { border-left-color: var(--ink); background: #eee4d540; }
  .story { column-gap: 40px; }
  .story-copy h2 { font-size: clamp(38px, 5vw, 52px); }
  .service-features { gap: 22px; }
  .service-feature { grid-template-columns: 1fr; min-height: 0; }
  .service-image { aspect-ratio: 4 / 3; }
  .service-copy { padding: 26px; min-height: 230px; }
  .inner-hero, .contact-layout, .contact-photo { gap: 40px; }
  .inner-page h1 { font-size: clamp(40px, 5.7vw, 62px); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .steps-grid { gap: 28px; }
  .footer-main { gap: 28px; flex-wrap: wrap; }
  .footer-main nav { gap: 6px 24px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .office-hero h1 { font-size: clamp(66px, 8.5vw, 84px); }
  .office-hero .hero-copy { padding-block: 64px 100px; }
  .reading-section, .faq-section { grid-template-columns: 1fr; gap: 34px; }
  .reading-aside { position: static; }
  .reading-aside h2 br { display: none; }
  .reading-copy > section { padding-left: 34px; }
  .inner-hero-image img { height: auto; aspect-ratio: 4 / 5; }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; }
  .request-panel { padding: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .catalog-group > .section-shell { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 34px; }
  .profile-grid { gap: 24px; }
  .profile-card h3 { font-size: 26px; }
  .dentist-roster { gap: 24px; }
  .dentist-roster p { font-size: 25px; }
  .visit { gap: 36px; }
}
@media (max-width: 760px) {
  :root { --gutter: clamp(20px, 5.6vw, 32px); --contact-height: calc(72px + env(safe-area-inset-bottom)); }
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .mobile-contact { padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); gap: 10px; }
  .mobile-contact > * { min-height: 50px; font-size: 12px; padding: 8px; }
  .office-hero { min-height: 0; }
  .office-hero .hero-copy { padding: clamp(32px, 5vw, 46px) 0 150px; }
  .office-hero h1 { font-size: clamp(46px, 12.4vw, 76px); max-width: 600px; }
  .office-hero .location { font-size: 11px; line-height: 1.6; max-width: 100%; margin-bottom: 24px; }
  .office-hero .hero-service { font-size: 13px; line-height: 1.75; max-width: 360px; margin: 23px 0 12px; }
  .office-hero .hero-description { font-size: 15px; line-height: 1.8; }
  .office-hero .hero-actions { margin: 24px 0 10px; }
  .office-hero .hero-actions .button { min-height: 54px; font-size: 13px; }
  .office-hero .hero-call { font-size: 12px; margin-left: 0; padding: 0; background: none; }
  .office-hero::after { background: linear-gradient(180deg,#f7f2e9fc 0%,#f7f2e9f4 34%,#f7f2e9dc 54%,#f7f2e91a 88%); }
  .hero-discover { left: var(--gutter); right: auto; bottom: 24px; font-size: 11px; max-width: calc(100% - var(--gutter) * 2); }
  .story { padding-block: 58px; gap: 32px; }
  .story-copy h2, .care-heading h2, .first-copy h2, .section-heading h2, .visit h2 { font-size: clamp(35px, 9.5vw, 48px); }
  .story-copy > p:not(.section-label), .first-copy > p:not(.section-label), .care-heading > p:last-child, .care-statement > p:last-child, .faq-list p, .section-heading > p { font-size: 15px; line-height: 1.85; }
  .story-copy .text-button { font-size: 13px; }
  .story-visual { width: 100%; max-width: 440px; }
  .story-visual picture { aspect-ratio: 4 / 5; }
  .story-visual picture img { object-position: center; }
  .story-play { left: 12px; bottom: 12px; max-width: calc(100% - 24px); font-size: 12px; }
  .story-play small { font-size: 10px; }
  .dentist-roster { grid-template-columns: 1fr; gap: 0; padding-top: 12px; scroll-margin-top: 0; }
  .dentist-roster > div { display: block; width: 100%; border-bottom: 1px solid #e6dfd4; }
  .dentist-roster > div:last-child { border-bottom: 0; }
  .dentist-roster > div > a { display: grid; grid-template-columns: clamp(90px, 26vw, 140px) minmax(0, 1fr); gap: clamp(18px, 5vw, 28px); align-items: center; padding-block: 22px; }
  .dentist-roster img { width: 100%; margin: 0; }
  .dentist-roster p { min-height: 0; font-size: clamp(24px, 6.5vw, 30px); }
  .dentist-roster span { font-size: 12px; line-height: 1.65; margin-top: 9px; }
  .care-inner, .first-inner, .patient-note, .visit { padding-block: 58px; }
  .care-heading { margin-bottom: 30px; }
  .service-features { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .service-copy { padding: 24px; min-height: 0; }
  .service-copy h3 { font-size: 31px; }
  .service-copy p { font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
  .service-link { font-size: 13px; min-height: 48px; }
  .care-explorer > summary, .faq-list summary { font-size: 15px; line-height: 1.65; }
  .treatment-tags { gap: 6px 16px; }
  .treatment-tags > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .care-statement { padding-block: 58px; }
  .care-statement h2 { font-size: clamp(33px, 8.7vw, 44px); }
  .care-cta p, .front-desk p { font-size: 13px; }
  .first-actions .button { min-height: 54px; font-size: 13px; }
  .patient-note-photo { height: auto; aspect-ratio: 1; }
  .patient-note blockquote { font-size: clamp(30px, 8.3vw, 40px); }
  .answers { padding-block: 4px 58px; }
  .video-grid { grid-template-columns: 1fr; gap: 24px; }
  .video-card { display: grid; grid-template-columns: clamp(100px, 29vw, 160px) minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: 0 20px; align-items: start; width: 100%; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .video-art { grid-row: 1 / 4; aspect-ratio: 3 / 4; align-self: start; }
  .video-topic { margin-top: 0; font-size: 12px; line-height: 1.65; }
  .video-title { font-size: clamp(24px, 6.5vw, 30px); margin: 8px 0; }
  .video-action { font-size: 12px; min-height: 44px; width: fit-content; align-self: end; margin: 0; }
  .visit-details { grid-template-columns: 1fr 1fr; gap: 30px; }
  .visit-details dl > div { display: block; margin-bottom: 12px; }
  .visit-details dl, .visit-details address, .visit-contact > a:last-child { font-size: 14px; }
  .footer-main { grid-template-columns: 1fr; gap: 18px; }
  .footer-main > p { font-size: 13px; }
  .footer-main nav { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 20px; font-size: 13px; padding-top: 8px; }
  .footer-address { flex-direction: column; align-items: start; gap: 5px; font-size: 12px; line-height: 1.8; }
  .footer-bottom { font-size: 11px; line-height: 1.8; padding-bottom: calc(var(--contact-height) + 24px); }
  .inner-page h1, .contact-copy h1, .profile-hero h1 { font-size: clamp(38px, 10.5vw, 58px); }
  .inner-page h2 { font-size: clamp(32px, 8.5vw, 42px); }
  .inner-page p { font-size: 15px; }
  .breadcrumbs { font-size: 12px; line-height: 1.8; }
  .breadcrumbs ol { gap: 4px 10px; }
  .breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumbs li:last-child { align-self: center; }
  .inner-hero { padding-block: 26px 50px; gap: 30px; }
  .inner-hero-image img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .inner-hero-image.portrait-photo img { aspect-ratio: 1; object-fit: contain; }
  .reading-copy > section { padding-left: 26px; }
  .reading-copy h2, .profile-bio > h2 { font-size: 29px; }
  .related-grid { grid-template-columns: 1fr; }
  .page-actions { gap: 14px 20px; }
  .page-actions .button { min-height: 54px; font-size: 13px; }
  .catalog-list > a { gap: 16px; }
  .catalog-list h3 { font-size: 29px; }
  .catalog-list p { font-size: 14px; }
  .service-jump { gap: 6px 20px; }
  .service-jump a { font-size: 12px; min-height: 44px; display: flex; align-items: center; }
  .profile-hero { margin-top: 20px; }
  .profile-hero img { max-height: 440px; }
  .contact-layout { padding-top: 26px; }
  .request-panel { padding: 26px 20px; }
  .appointment-dialog { padding: 50px 22px 26px; width: calc(100% - 24px); }
  .appointment-dialog .close-dialog { margin: -38px -10px -6px 12px; }
  .appointment-dialog h2 { font-size: clamp(32px, 9vw, 42px); }
  .appointment-dialog .button { font-size: 13px; }
  .video-dialog { width: min(480px, calc(100% - 24px)); max-width: calc(100% - 24px); }
  .video-stage video { max-height: 58vh; max-height: 58dvh; }
  .video-modal-copy { padding: 24px; }
}
@media (max-width: 599px) {
  .service-features { grid-template-columns: 1fr; }
  .visit-details { grid-template-columns: 1fr; }
  .visit-details dl { max-width: 100%; }
  .visit-details dl > div { display: flex; justify-content: space-between; gap: 15px; }
  .visit-details dd { text-align: right; }
  .button { gap: 16px; }
}
/* Short screens need native scrolling and usable dialogs, regardless of orientation. */
@media (max-height: 500px) and (max-width: 1023px) {
  :root { --header-height: 68px; }
  .site-header .brand { height: 64px; width: 120px; }
  .site-header .brand img { width: 120px; height: 120px; top: -28px; }
  .mobile-contact { display: none; }
  :root { --contact-height: 0px; }
  .office-hero .hero-copy { padding-block: 34px 90px; }
  .video-dialog { width: min(760px, calc(100% - 24px)); }
  .video-modal-layout { grid-template-columns: minmax(0,.65fr) minmax(0,1fr); }
  .video-stage video { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  .video-modal-copy { padding: 50px 24px 24px; }
}
@media (hover: none), (pointer: coarse) {
  .service-feature:hover, .care-card:hover { transform: none; }
  .service-feature:hover .service-image img, .video-card:hover .video-art > img, .profile-card:hover img { transform: none; }
}

/* Isolate logo rendering from Safari sticky-header/backdrop compositing. */
.header-logo-filter { position: absolute; width: 0; height: 0; pointer-events: none; }
.site-header .brand img { filter: url("#header-logo-ink"); mix-blend-mode: normal; }

/* Keep Dr. King’s face in view in both the compact and wide reel covers. */
.video-card[data-video="1"] .video-art > img,
.answer-image[data-video="1"] img { object-position: 50% 0%; }