/* Shared clinic design, extending the approved warm homepage.
   Apple design principles: clear hierarchy, immediate feedback, restrained motion. */
html {
  --clinic-header-height: 154px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  scroll-padding-top: calc(var(--clinic-header-height) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;
  color-scheme: light;
}
:is(a,button,summary) { touch-action: manipulation; }
button, .button, .menu-toggle, .mobile-contact a, .patient-shortcuts a, .faq-categories a, .gd-case-picker button {
  -webkit-user-select: none;
  user-select: none;
}
html:has(dialog[open]) { overflow: hidden; }
body {
  --paper: #f7f3ec;
  --sand: #efe8dd;
  --navy: #18374e;
  --ink: #354553;
  --muted: #626d78;
  --line: #e4ddd2;
  --gold: #8a765a;
  --surface: #fffdf9;
  --serif: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif;
  background: var(--surface);
  line-height: 1.8;
}
.site-header { background: rgba(255,253,249,.9); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border-bottom-color: rgba(24,55,78,.08); }
.brand strong { letter-spacing: .025em; }
.header-location { display: flex; flex-direction: column; align-items: flex-start; }
.header-location .header-address { display: flex; align-items: center; gap: .375rem; color: var(--navy); font-size: .8125rem; white-space: nowrap; }
.header-location .header-address svg { width: 16px; height: 16px; color: var(--gold); }
.site-header .header-google-link { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; flex: none; width: auto; min-height: 44px; padding: .5rem 0; color: var(--navy); font-size: .8125rem; font-weight: 500; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.header-google-link>span { border-bottom: 1px solid #c7baaa; padding-bottom: 1px; }
.site-header .header-google-link svg { width: 14px; height: 14px; margin: 0; color: currentColor; }
.header-google-link:active>span { border-bottom-color: var(--navy); }
.desktop-nav a::after { height: 2px; border-radius: 2px; background: var(--navy); }
.button { border-radius: 999px; font-size: 1rem; font-weight: 600; min-height: 52px; padding: 12px 25px; gap: 8px; transition: transform 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out; }
.button-outline { background: var(--surface); border-color: #ded7cc; }
.button-small { font-size: .875rem; min-height: 44px; }
.hero { padding: 60px 0 68px; background: var(--paper); }
.hero-grid { grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.3rem,3.4vw,3.2rem); line-height: 1.4; font-weight: 650; letter-spacing: -.035em; text-wrap: balance; }
.hero-copy .lead { max-width: 510px; margin-top: 24px; font-size: 1.0625rem; line-height: 1.9; }
.hero-actions { gap: 12px; margin-top: 30px; }
.hero-booking-note { margin-top: 20px; color: var(--muted); font-size: .875rem; max-width: 480px; }
.hero-shortcuts { border: 0; padding: 0; }
.hero-profile { overflow: hidden; border-radius: 28px; background: var(--surface); box-shadow: 0 8px 32px rgba(24,55,78,.06); }
.hero-photo { padding: 0; width: 100%; }
.hero-photo::before { display: none; }
.hero-photo img { height: 350px; border-radius: 0; object-fit: cover; object-position: 50% 12%; }
.hero-profile-copy { padding: 24px 28px 26px; }
.hero-doctor { margin: 0; padding: 0; border: 0; justify-content: space-between; gap: 16px; }
.hero-doctor h2 { font-size: 1.4rem; letter-spacing: -.02em; }
.hero-doctor .text-link { flex-shrink: 0; font-size: .875rem; }
.hero-specialties { margin-top: 14px; }
.hero-specialties p { font-size: .875rem; gap: 6px 12px; color: var(--muted); }
.text-link { border-bottom-color: #c7baaa; }
.care-needs { padding: 64px 0; border: 0; }
.care-needs-heading { align-items: center; margin-bottom: 28px; }
.care-needs-heading h2, .section-heading h2 { font-size: clamp(1.7rem,2.5vw,2.3rem); letter-spacing: -.025em; }
.care-needs-heading p { font-size: 1rem; }
.care-needs-links { gap: 12px; }
.care-needs-links a { background: var(--paper); border: 1px solid transparent; border-radius: 18px; min-height: 82px; justify-content: center; padding: 18px 12px; font-size: 1rem; transition: background-color 160ms ease-out, transform 160ms ease-out; }
.care-needs-links a span:last-child { display: none; }
.principles { border: 0; padding: 0 0 56px; background: var(--surface); }
.principles-grid { padding: 32px 36px; background: var(--paper); border-radius: 24px; }
.principle { font-size: 1rem; padding-inline: 30px; }
.principle-index { font-family: var(--sans); color: var(--muted); font-size: .875rem; letter-spacing: .05em; font-weight: 600; }
.section { padding: 64px 0; }
#first-visit { background: var(--paper); }
.process-grid { gap: 20px; }
.process-card { border: 0; border-radius: 24px; padding: 32px; }
.process-card h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.process-card>p { font-size: 1rem; }
.process-card>p:has(br) { line-height: 2.2; }
.section-sand { background: var(--surface); }
.service-card { border: 0; background: var(--paper); border-radius: 24px; padding: 30px; }
.service-card h3 { font-size: 1.35rem; }
.service-card p { font-size: 1rem; }
.service-card .service-number { font: 600 .875rem/1.5 var(--sans); color: var(--muted); margin-bottom: 18px; }
.source-price>[data-name]>div:nth-child(2) p, .source-price>[data-name]>div:has(>h3)+div p { font-size: 1.65rem; letter-spacing: -.03em; }
.site-footer { background: var(--paper); }
.menu-toggle { border: 0; border-radius: 50%; background: rgba(24,55,78,.055); transition: background-color 160ms ease-out, transform 160ms ease-out; }
.menu-toggle[aria-expanded="true"] { background: #e9e1d4; }
.menu-toggle .menu-icon, .menu-toggle .menu-close-icon { display: flex; }
.menu-toggle .menu-close-icon, .menu-toggle[aria-expanded="true"] .menu-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-icon { display: flex; }
.mobile-menu {
  background: rgba(255,253,249,.98);
  max-height: calc(100dvh - var(--clinic-header-height) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[inert] { pointer-events: none; }
.mobile-menu a { min-height: 52px; }
.mobile-menu a[aria-current] { color: #18374e; }
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(24,55,78,.1); }
  .button-outline:hover, .care-needs-links a:hover { background: #eee6da; border-color: transparent; }
  .care-needs-links a:hover { transform: translateY(-2px); }
  .service-card:hover { transform: translateY(-2px); }
}
.button:active, .care-needs-links a:active, .menu-toggle:active, .mobile-contact a:active { transform: scale(.97); transition-duration: 80ms; }
@media (max-width:1179px) {
  html { --clinic-header-height: 130px; }
  body { padding-left: env(safe-area-inset-left,0px); padding-right: env(safe-area-inset-right,0px); }
  .site-header { padding-top: env(safe-area-inset-top,0px); }
  .hero-grid { gap: 32px; }
  .hero-copy h1 { font-size: 2.4rem; }
}
@media (max-width:900px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  .hero-copy h1 { font-size: 2rem; }
  .hero-actions .button { padding-inline: 18px; }
  .hero-profile-copy { padding: 22px; }
  .hero-doctor { flex-wrap: wrap; gap: 8px; }
  .care-needs-heading { display: block; }
  .care-needs-heading p { margin-top: 8px; }
}
@media (max-width:620px) {
  body { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
  .shell { width: calc(100% - 40px); }
  .site-header { background: rgba(255,253,249,.9); grid-template-columns: 16px 28px 9px minmax(0,1fr) 6px 44px 16px; grid-template-rows: 10px 44px auto 10px; }
  .site-header .brand-mark, .site-header .brand-monogram { grid-row: 2; }
  .site-header .brand>span:not(.brand-monogram) { align-self: center; }
  .site-header .header-actions { grid-row: 2; }
  .site-header .brand strong { font-size: 1.0625rem; letter-spacing: 0; }
  .site-header .mobile-essential { grid-column: 2/7; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .5rem; margin-top: .25rem; font-size: .75rem; }
  .site-header .mobile-essential>.header-address:first-child { flex: 1 1 auto; min-width: 0; min-height: 44px; flex-wrap: nowrap; }
  .site-header .mobile-essential>.header-address svg { flex: none; }
  .site-header .mobile-menu { grid-column: 1/-1; grid-row: 5; padding: 8px 24px 20px; max-height: calc(100dvh - var(--clinic-header-height) - 100px - env(safe-area-inset-bottom,0px)); }
  .hero { padding: 36px 0 32px; }
  .hero-grid { display: flex; flex-direction: column; gap: 28px; }
  .hero-copy h1 { font-size: clamp(1.72rem,7.7vw,2.6rem); line-height: 1.4; letter-spacing: -.04em; max-width: none; }
  .hero-copy .lead { font-size: 1rem; line-height: 1.85; margin-top: 18px; }
  .hero-actions { display: grid; grid-template-columns: .85fr 1.45fr; gap: 10px; margin-top: 24px; }
  .hero-actions .button { font-size: .9375rem; padding: 12px 8px; min-height: 50px; }
  .hero-booking-note { margin-top: 16px; font-size: .875rem; line-height: 1.8; }
  .hero-profile { border-radius: 24px; }
  .hero-photo img { height: 280px; object-position: 50% 22%; border-radius: 0; }
  .hero-profile-copy { padding: 20px; }
  .hero-doctor { flex-wrap: nowrap; }
  .hero-doctor h2 { font-size: 1.25rem; }
  .hero-doctor .text-link { font-size: .875rem; min-height: 44px; align-items: center; }
  .hero-specialties { margin-top: 10px; }
  .hero-specialties p { font-size: .875rem; gap: 7px 8px; grid-template-columns: 1fr 1fr; }
  .care-needs { padding: 40px 0 28px; }
  .care-needs-heading { margin-bottom: 20px; }
  .care-needs-heading h2, .section-heading h2 { font-size: 1.65rem; line-height: 1.45; }
  .care-needs-heading p { font-size: 1rem; line-height: 1.8; margin-top: 10px; }
  .care-needs-links { gap: 10px; }
  .care-needs-links a { min-height: 64px; border-radius: 16px; padding: 14px 10px; font-size: 1rem; }
  .principles { padding: 0 0 40px; }
  .principles-grid { padding: 8px 22px; border-radius: 22px; }
  .principle, .principle:first-child, .principle:last-child { padding: 22px 0; gap: 12px; font-size: 1rem; }
  .principle-index { margin-top: 3px; }
  .section { padding: 40px 0; }
  .section-heading { margin-bottom: 24px; }
  .section-heading .subtitle { font-size: 1rem; }
  .process-grid, .services-grid { gap: 16px; }
  .process-card, .service-card { padding: 24px; border-radius: 22px; }
  .process-card h3 { font-size: 1.25rem; }
  .process-card>p:has(br) { line-height: 2.15; }
  .service-card:hover { transform: none; }
  .mobile-contact { left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); bottom: max(12px,env(safe-area-inset-bottom,0px)); border: 1px solid rgba(255,253,249,.9); border-radius: 24px; padding: 6px; grid-template-columns: .85fr 1fr 1.2fr; gap: 4px; background: rgba(250,247,240,.9); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 6px 30px rgba(17,40,60,.18),0 0 0 1px rgba(17,40,60,.05); }
  .mobile-contact a { min-height: 48px; border-radius: 18px; font-size: .875rem; gap: 6px; padding: 5px 3px; transition: transform 160ms ease-out, background-color 160ms ease-out; }
  .mobile-contact a:nth-child(2) { background: transparent; border: 0; }
  .mobile-contact a:last-child { background: #326845; }
  .mobile-contact a:last-child svg { display: none; }
  .mobile-contact svg { width: 17px; height: 17px; }
  .footer-main nav { margin-top: 0; }
}
@media (max-width:359px) {
  .shell { width: calc(100% - 32px); }
  .site-header { grid-template-columns: 12px 24px 7px minmax(0,1fr) 4px 44px 12px; }
  .site-header .brand strong { font-size: 1rem; }
  .site-header .mobile-essential { font-size: .75rem; }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-specialties p { grid-template-columns: 1fr; }
  .hero-profile-copy { padding: 18px; }
  .hero-doctor { gap: 4px; }
  .hero-doctor h2 { font-size: 1.125rem; }
  .mobile-contact a { font-size: .8125rem; }
  .mobile-contact { left: max(8px,env(safe-area-inset-left,0px)); right: max(8px,env(safe-area-inset-right,0px)); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .button:hover, .button:active, .care-needs-links a:hover, .care-needs-links a:active, .service-card:hover, .menu-toggle:active, .mobile-contact a:active { transform: none; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .site-header, .mobile-contact { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid #63717d; }
}

/* Reading pages share the homepage's palette without changing their content. */
body:not([data-page="home"]) { background: var(--paper); --white: var(--surface); }
body:not([data-page="home"]) :is(h1,h2,h3) { font-optical-sizing: auto; overflow-wrap: anywhere; }
body:not([data-page="home"]) h2 { letter-spacing: -.025em; line-height: 1.45; }
body:not([data-page="home"]) h3 { letter-spacing: -.012em; line-height: 1.5; }
.page-intro h1, .treatment-hero h1, .gd-intro h1, .mt-intro h1 { font-size: clamp(2rem,3.5vw,3rem); font-weight: 650; line-height: 1.35; letter-spacing: -.035em; text-wrap: balance; }
.page-intro, .gd-intro, .mt-intro { padding-top: 1.5rem; padding-bottom: 2rem; }
.page-intro .intro-copy, .gd-lead, .mt-intro>p:not(.eyebrow) { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.85; color: var(--muted); }
.breadcrumb { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; padding-block: .875rem .25rem; font-size: .875rem; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb span:last-child { min-width: 0; overflow-wrap: anywhere; }
.eyebrow { font-family: var(--sans); letter-spacing: .08em; font-weight: 600; }
.desktop-nav-row { background: transparent; border-color: var(--line); }
.desktop-nav a, .footer-main a { min-height: 44px; }
.footer-main a { display: flex; align-items: center; }
.mobile-contact a { font-weight: 500; }
.mobile-menu { transform-origin: top right; }
.mobile-menu a[aria-current="page"] { font-weight: 650; }
.mobile-nav-links>a { border-color: var(--line); }
.text-link { min-height: 44px; align-items: center; }
.article-section a.text-link { text-decoration: none; }
.article-section>a:not(.button):not(.text-link), .article-section p>a:not(.button):not(.text-link), .faq-answer a { border-bottom: 0; }
.button, .text-link, .patient-shortcuts a, .faq-categories a { overflow-wrap: anywhere; }
:is(a,button,summary):focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

/* Treatment introductions, reading sections and original clinical images. */
.treatment-hero { padding-top: 1.5rem; padding-bottom: 2.5rem; gap: 3rem; align-items: center; }
.treatment-hero>div { min-width: 0; }
.treatment-hero>div>p { font-size: 1.0625rem; line-height: 1.85; }
.treatment-hero>figure { padding: 1.5rem; border: 0; border-radius: 1.5rem; background: var(--surface); box-shadow: 0 8px 32px rgba(24,55,78,.04); }
.treatment-hero img { background: var(--surface); object-fit: contain; }
.treatment-hero .price-tag { border: 0; border-radius: 999px; background: var(--sand); padding: .625rem 1rem; font-size: 1.2rem; line-height: 1.5; }
.treatment-hero-text { display: block; max-width: 1060px; }
.treatment-hero-text>div { max-width: 44rem; }
.treatment-method { margin-top: 1.25rem; color: var(--muted); font-size: .9375rem; line-height: 1.85; }
.treatment-doctor { margin: 0 0 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); }
.treatment-doctor-copy { color: var(--muted); font-size: 1rem; line-height: 1.85; }
.treatment-doctor-copy p { text-wrap: pretty; }
.treatment-doctor-copy p+p { margin-top: .625rem; }
@media (max-width:620px) {
  .treatment-doctor { padding: 1.25rem; border-radius: 1.375rem; }
  .treatment-hero-text, .treatment-doctor { text-align: center; }
  .treatment-hero-text>div, .treatment-doctor, .ortho-scope-group { margin-inline: auto; }
  .patient-shortcuts, .faq-categories { justify-content: center; text-align: center; }
  .patient-shortcuts a, .faq-categories a { justify-content: center; }
}
.article-body { padding-bottom: 2.5rem; }
.article-body>.article-section { margin: 0 0 1.5rem; padding: 2rem; border: 0; border-radius: 1.5rem; background: var(--surface); }
.article-section h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }
.article-section h2:not(:first-child) { margin-top: 2.25rem; }
.article-section h3 { margin-top: 1.5rem; margin-bottom: .75rem; }
.article-section p { font-size: 1rem; line-height: 1.9; }
.article-section img { border-radius: .75rem; }
.article-body>.article-section.treatment-choices { padding: 0; background: transparent; }
.treatment-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.denture-type-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.treatment-option { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); }
.treatment-option h3 { margin: .625rem 0 1rem; font-size: 1.2rem; }
.treatment-option-label p { font-size: .8125rem; color: var(--muted); }
.treatment-option-price p { font-size: 1.375rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.article-section .treatment-option-details { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .9375rem; line-height: 1.85; }
.treatment-option-details li+li { margin-top: .375rem; }
.denture-type figure { padding: 1rem; border-radius: 1rem; background: var(--paper); }
.article-section .denture-type img { width: 100%; height: 180px; margin: 0; object-fit: contain; }
.denture-type h3 { margin-top: 1.25rem; }
.treatment-questions>.text-link { display: inline-flex; margin-top: .75rem; font-size: 1rem; }
@media (max-width:900px) { .denture-type-grid { grid-template-columns: 1fr; } }
@media (max-width:620px) {
  .treatment-option-grid { grid-template-columns: 1fr; gap: 1rem; }
  .treatment-option { padding: 1.25rem; border-radius: 1.375rem; }
}
.steps-grid { margin-top: 1.5rem; gap: 1rem; }
.steps-grid>.step-card:last-child:nth-child(odd) { grid-column: 1/-1; }
.step-card { min-width: 0; padding: 1.5rem; border: 0; border-radius: 1.25rem; background: var(--paper); }
.step-card .step-label, .step-card .step-label p, .mt-number { font-family: var(--sans); font-style: normal; color: var(--muted); font-weight: 600; }
.article-section .step-card h3 { margin-bottom: .625rem; }
.step-card .step-payment { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.step-card .step-payment+p { margin-top: .75rem; }
.article-body>.clinical-cases { padding-inline: 0; background: transparent; }
.cases-grid { gap: 1.25rem; margin-top: 1.5rem; }
.case-card { border: 0; border-radius: 1.5rem; padding: 1.5rem; background: var(--surface); }
.article-section .case-heading h3 { margin: 0 0 .5rem; }
.case-image { border: 0; border-radius: 1rem; background: var(--paper); }
.case-notes { border-color: var(--line); }
.patient-note, .first-appointment, .gd-services .gd-walk-in-note { border: 0; border-radius: 1.25rem; padding: 1.25rem 1.5rem; background: var(--sand); }
.patient-shortcuts, .faq-categories { gap: .625rem; }
.patient-shortcuts a, .faq-categories a, .gd-toc a { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; padding: .625rem 1rem; background: var(--surface); font-size: .9375rem; line-height: 1.5; font-weight: 500; }
.treatment-cards { padding-top: .5rem; gap: 1.25rem; }
.treatment-cards .service-card { padding: 0; border: 0; border-radius: 1.5rem; background: var(--surface); box-shadow: 0 6px 24px rgba(24,55,78,.035); overflow: hidden; }
.treatment-card-media { background: var(--surface); border: 0; padding: 1.5rem; }
.treatment-cards .service-card>.treatment-card-copy { padding: 1.5rem; }
.treatment-cards h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.treatment-cards a.treatment-card-link { display: flex; align-items: center; min-height: 44px; }
@media (hover:hover) and (pointer:fine) { .service-card:hover { transform: none; } }

/* FAQ remains a native accordion with a visible expanded state. */
.faq-title-topic, .faq-title-suffix { display: inline-block; max-width: 100%; vertical-align: baseline; }
.faq-title-suffix { margin-left: .25em; font-size: .65em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.faq-list { padding-top: 1.5rem; padding-bottom: 3rem; }
.faq-item { margin-bottom: .875rem; background: var(--surface); border: 1px solid transparent; border-radius: 1.25rem; overflow: visible; }
.faq-item summary { padding: 1.25rem 1.5rem; gap: .875rem; min-height: 60px; border-radius: 1.25rem; align-items: flex-start; }
.faq-item summary h2 { min-width: 0; flex: 1; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.75; }
.faq-number { font: 600 .875rem/1.9 var(--sans); color: var(--muted); padding-top: .125rem; }
.faq-item summary::after { content: '+'; flex: 0 0 1rem; margin-left: auto; color: var(--navy); font: 400 1.4rem/1.3 var(--sans); text-align: center; }
.faq-item[open] { border-color: #c7baaa; }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 1.5rem 1.5rem; line-height: 1.9; }
.faq-related { border-color: var(--line); }

/* Prices retain table semantics and become separate readable rows on phones. */
body[data-page="自費項目與收費標準"] .page-intro { border-bottom: 0; }
.fee-section { padding-block: 1.5rem 2rem; }
.fee-section table { border-collapse: separate; border-spacing: 0; border: 0; border-radius: 1.25rem; overflow: hidden; background: var(--surface); }
.fee-section th { padding: 1rem 1.25rem; background: var(--sand); }
.fee-section td { padding: 1.25rem; border-color: var(--line); font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.fee-section tr:last-child td { border-bottom: 0; }
.fee-notes { margin: 1.5rem 0 2.5rem; padding: 1.5rem; border: 0; border-radius: 1.25rem; background: var(--sand); }

/* Clinic hours: keep all names and times, use restrained status colors. */
.visit-layout { padding-bottom: 3rem; }
.visit-layout .article-section { padding: 2rem; margin-bottom: 1.5rem; border: 0; border-radius: 1.5rem; background: var(--surface); }
.visit-layout .visit-booking.article-section { padding-top: 2rem; }
.article-section .clinic-timetable { border: 0; border-radius: 1rem; background: var(--surface); }
.clinic-timetable thead th { background: var(--navy); }
.clinic-timetable thead th+th { border-left-color: rgba(255,255,255,.2); }
.clinic-timetable thead small { color: #e7eef0; }
.clinic-timetable tr>*+*, .clinic-timetable tbody tr>* { border-color: var(--surface); }
.clinic-timetable tbody th { background: var(--paper); }
.clinic-timetable tbody th small, .clinic-timetable .clinic-closed { color: #616d70; }
.clinic-timetable .clinic-open { background: #eaf0e9; color: #31583d; }
.clinic-timetable .clinic-guest { background: #f5e9dc; color: #785335; }
.clinic-timetable .clinic-closed { background: #efede8; }
.first-appointment { margin-top: 1.5rem; }
.first-appointment-actions { max-width: 100%; }
.first-appointment-actions .button { padding-inline: .75rem; font-size: .9375rem; }

/* Physician credentials and missing-teeth choices. */
.biography-hero { align-items: start; }
.physician-profile { border: 0; padding: 2rem; border-radius: 1.5rem; background: var(--surface); }
.physician-profile-columns { gap: 2rem; }
.physician-profile-columns h3 { margin-bottom: .875rem; }
.mt-methods { background: var(--sand); border: 0; }
.mt-method-grid article, .mt-count-grid article { padding: 1.5rem; border: 0; border-radius: 1.5rem; background: var(--surface); }
.mt-method-grid h3, .mt-count-grid h3 { font-size: 1.25rem; }
.mt-number { font-size: .875rem; }

/* General dentistry uses the same controls and surfaces. */
.gd-toc { gap: .625rem; padding: 0; border: 0; margin-top: 1.5rem; }
.gd-services article { padding: 1.75rem; border: 0; border-radius: 1.5rem; background: var(--surface); }
.gd-services h2 { font-size: 1.4rem; }
.gd-root { background: var(--sand); border: 0; }
.gd-steps { gap: 1.25rem; }
.gd-steps li { padding: 1.25rem; border: 0; border-radius: 1.25rem; background: var(--surface); min-width: 0; }
.gd-steps li::before { font: 600 .875rem/1.5 var(--sans); color: var(--muted); }
.gd-steps h3 { font-size: 1.0625rem; }
.gd-crown { padding: 1.5rem; border: 0; border-radius: 1.5rem; background: var(--surface); }
.gd-case-picker button, .gd-close { padding: .625rem 1rem; border-radius: 999px; border-color: var(--line); background: var(--surface); font-weight: 500; }
.gd-case-picker button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.gd-image-button { padding: .75rem; border: 0; border-radius: 1rem; background: var(--surface); }
.gd-lightbox { padding: 1.25rem; border: 0; border-radius: 1.5rem; background: var(--surface); box-shadow: 0 20px 80px rgba(24,55,78,.25); }
.gd-lightbox-top { gap: 1rem; }
.gd-lightbox-top h2 { font-size: 1.25rem; line-height: 1.5; min-width: 0; }
.gd-close { flex-shrink: 0; min-height: 44px; }

/* Case photos and X-rays open with the same controls as the root-canal viewer. */
.case-image-button { position: relative; display: block; width: 100%; height: 100%; border: 0; padding: 0; border-radius: .75rem; background: transparent; cursor: zoom-in; transition: opacity 160ms ease; }
.case-image-button picture { display: block; height: 100%; }
.gd-image-button { position: relative; }
.case-image-button::after, .gd-image-button::after { content: '放大'; position: absolute; right: .5rem; bottom: .5rem; padding: .125rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,249,.95); color: var(--navy); font-size: .75rem; line-height: 1.5; pointer-events: none; }
.article-section .case-image-button img { margin-block: 0; }
.case-image-button:active { opacity: .8; }
.image-lightbox, .gd-lightbox { max-width: calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overscroll-behavior: contain; }
.image-lightbox { width: min(1060px,calc(100% - 32px)); padding: 1.25rem; border: 0; border-radius: 1.5rem; background: var(--surface); color: var(--ink); box-shadow: 0 20px 80px rgba(24,55,78,.25); }
.image-lightbox::backdrop { background: rgba(10,23,34,.78); }
.image-lightbox-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.image-lightbox-top p, .gd-lightbox-top p { min-width: 0; font-size: 1rem; line-height: 1.6; color: var(--navy); }
.image-close { flex-shrink: 0; padding: .625rem 1rem; min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--navy); cursor: pointer; }
.image-enlarged { width: 100%; max-height: calc(100dvh - 170px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); object-fit: contain; }
.gd-enlarged { max-height: calc(100dvh - 170px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); }

/* Fast press feedback applies consistently, with no hover lift on touch. */
.patient-shortcuts a, .faq-categories a, .faq-item summary, .gd-toc a, .gd-case-picker button, .gd-close, .gd-image-button, .image-close, .text-link {
  transition: transform 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.patient-shortcuts a:active, .faq-categories a:active, .gd-toc a:active, .gd-case-picker button:active, .gd-close:active, .gd-image-button:active, .image-close:active { transform: scale(.97); transition-duration: 80ms; }
.faq-item summary:active, .text-link:active { background-color: var(--sand); }
@media (hover:hover) and (pointer:fine) {
  .patient-shortcuts a:hover, .faq-categories a:hover, .gd-toc a:hover, .gd-case-picker button:not([aria-pressed="true"]):hover, .gd-close:hover, .image-close:hover { background: var(--sand); border-color: #c7baaa; }
  .faq-item summary:hover { background: var(--paper); }
}
@media (hover:none) {
  .button:hover, .service-card:hover, .care-needs-links a:hover { transform: none; box-shadow: none; }
  .button:active, .care-needs-links a:active { transform: scale(.97); }
}
@media (min-width:1180px) {
  .treatment-hero, .page-intro { padding-top: 2rem; }
}
.schedule-image { top: calc(var(--clinic-header-height) + 16px); }
@media (max-width:900px) {
  .treatment-hero { gap: 2rem; }
  .gd-services article { padding: 1.5rem; }
}
@media (max-width:620px) {
  html { --clinic-header-height: 110px; scroll-padding-bottom: calc(94px + env(safe-area-inset-bottom,0px)); }
  [id] { scroll-margin-bottom: 100px; }
  .fee-section[id], #ortho-plans, #implant-supported-denture, #bridge-case, .first-appointment { scroll-margin-top: 0; }
  .breadcrumb { font-size: .8125rem; padding-top: .5rem; }
  .page-intro, .gd-intro, .mt-intro { padding-top: 1rem; padding-bottom: 1.75rem; }
  .page-intro h1, .treatment-hero h1, .gd-intro h1, .mt-intro h1 { font-size: 2rem; line-height: 1.4; }
  .page-intro h1:has(.faq-title-topic) { font-size: clamp(1.6rem,7.2vw,2rem); }
  .treatment-hero { gap: 1.5rem; padding-top: 1rem; padding-bottom: 1.75rem; }
  .treatment-hero>div>p, .gd-lead, .mt-intro>p:not(.eyebrow) { font-size: 1rem; }
  .treatment-hero>figure { padding: 1.25rem; border-radius: 1.375rem; }
  .treatment-hero .price-tag { font-size: 1.125rem; }
  .article-body>.article-section, .visit-layout .article-section { padding: 1.5rem; margin-bottom: 1rem; border-radius: 1.375rem; }
  .article-body>.clinical-cases { padding-inline: 0; }
  .article-section h2 { font-size: 1.5rem; }
  .step-card, .case-card { padding: 1.25rem; border-radius: 1.25rem; }
  .case-image { padding: .5rem; }
  .patient-note, .first-appointment { padding: 1.25rem; }
  .patient-shortcuts a, .faq-categories a, .gd-toc a { padding: .625rem .875rem; }
  .treatment-cards .service-card { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .treatment-cards .treatment-card-media { display: none; }
  .treatment-cards .service-card>.treatment-card-copy { padding: 1.25rem 1.5rem; }
  .treatment-cards h2 { font-size: 1.3rem; }
  .faq-list { padding-top: 1.25rem; }
  .faq-item summary { padding: 1.125rem; gap: .625rem; }
  .faq-answer { padding: 0 1.125rem 1.25rem; }
  .fee-section { padding-block: 1.25rem; }
  .fee-section table { margin-top: 1rem; background: transparent; border-radius: 0; overflow: visible; }
  .fee-section tbody { display: grid; gap: .875rem; }
  .fee-section tr { padding: 1.125rem; border: 0; border-radius: 1.25rem; background: var(--surface); }
  .fee-section tr+tr { border: 0; }
  .fee-section td, .fee-section td:first-child, .fee-section td:last-child { padding: .25rem 0; }
  .fee-section td:nth-child(2) { font-size: 1.0625rem; }
  .fee-section td:nth-child(2)::before { font-size: .875rem; line-height: 1.8; margin-right: .375rem; }
  .fee-notes { padding: 1.25rem; }
  .visit-layout { gap: 0; }
  .visit-layout .visit-booking.article-section { padding: 1.25rem; }
  .clinic-timetable th, .clinic-timetable td { padding: .75rem .125rem; }
  .clinic-timetable thead th { font-size: .8125rem; }
  .clinic-timetable thead small, .clinic-timetable tbody th small { font-size: .6875rem; }
  .clinic-timetable tbody td { height: 78px; font-size: .8125rem; }
  .clinic-timetable strong { font-weight: 600; overflow-wrap: anywhere; }
  .first-appointment-actions { grid-template-columns: 1fr; }
  .first-appointment-actions .button { font-size: .9375rem; min-height: 48px; white-space: normal; }
  .physician-profile { padding: 1.5rem; border-radius: 1.375rem; }
  .physician-profile>h2 { font-size: 1.5rem; }
  .mt-method-grid article, .mt-count-grid article { padding: 1.5rem; border-radius: 1.375rem; }
  .gd-toc { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .625rem; }
  .gd-toc a { display: flex; align-items: center; justify-content: center; }
  .gd-services article { padding: 1.5rem; border-radius: 1.375rem; }
  .gd-services .gd-walk-in-note { padding: 1rem; }
  .gd-steps { grid-template-columns: 1fr; gap: .875rem; }
  .gd-crown { padding: 1.5rem; }
  .gd-lightbox, .image-lightbox { width: calc(100% - 24px); padding: 1rem; border-radius: 1.25rem; }
}
@media (max-width:359px) {
  .page-intro h1, .treatment-hero h1, .gd-intro h1, .mt-intro h1 { font-size: 1.8rem; }
  .article-body>.article-section, .physician-profile, .gd-services article { padding: 1.25rem; }
  .article-body>.clinical-cases { padding-inline: 0; }
  .first-appointment { padding: 1rem; }
  .visit-booking .clinic-timetable { width: calc(100% + 2.5rem); margin-inline: -1.25rem; border-radius: 0; }
  .clinic-timetable th, .clinic-timetable td { padding-inline: 1px; }
  .clinic-timetable strong { white-space: nowrap; overflow-wrap: normal; }
}
@media (prefers-reduced-motion:reduce) {
  .button, .care-needs-links a, .service-card, .menu-toggle, .mobile-contact a, .patient-shortcuts a, .faq-categories a, .gd-toc a, .gd-case-picker button, .gd-close, .gd-image-button, .image-close { transform: none !important; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .mobile-menu, .gd-lightbox { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast:more) {
  body { --muted: #344957; --line: #63717d; }
  .faq-item, .step-card, .case-card, .gd-services article, .mt-method-grid article, .mt-count-grid article { border: 1px solid var(--line); }
}

/* Orthodontics: plans and timeline first; payment explanation stays at the content bottom. */
.ortho-hero { display: block; max-width: 960px; padding-bottom: 3rem; }
.ortho-hero>div>p:first-of-type { font-size: 1.125rem; line-height: 1.7; color: var(--navy); text-wrap: balance; }
.ortho-hero>div>.ortho-intro-copy { margin-top: .75rem; font-size: 1rem; color: var(--muted); }
.ortho-scope-group { margin-top: 1.5rem; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.ortho-scope-group .ortho-scope-title { font-size: .8125rem; line-height: 1.5; color: var(--muted); font-weight: 600; margin: 0 0 .5rem; }
.ortho-hero .ortho-scope { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem .5rem; list-style: none; padding: 0; margin: 0; font-size: .9375rem; line-height: 1.5; }
.ortho-scope li { flex: 0 1 calc((100% - 2rem)/5); min-width: max-content; white-space: nowrap; text-align: center; }
@media (max-width:620px) { .ortho-scope li { flex-basis: calc((100% - 1rem)/3); } }
.ortho-hero .patient-shortcuts a:first-child { background: var(--navy); border-color: var(--navy); color: var(--surface); }
.ortho-content { max-width: 960px; }
.ortho-section { margin-bottom: 3.5rem; }
.ortho-section>h2 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.ortho-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.ortho-plan { min-width: 0; padding: 1.75rem; border-radius: 1.5rem; background: var(--surface); }
.ortho-plan h3 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.ortho-plan-price { margin-top: .75rem; color: var(--navy); }
.ortho-plan-price p { font-size: 1.875rem; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ortho-plan>p { margin-top: 1rem; color: var(--muted); line-height: 1.85; }
.ortho-plan-note { margin-top: 1rem; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.ortho-payment { margin-top: 1.5rem; padding: 1.5rem; background: var(--sand); border-radius: 1.25rem; }
.ortho-payment h3 { font-size: 1rem; margin: 0 0 .625rem; }
.ortho-payment p { font-size: .9375rem; line-height: 1.9; }
.ortho-flow { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.ortho-timeline { list-style: none; padding: 0 .5rem; margin: 0; }
.ortho-timeline li { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 1.5rem; padding: 0 0 2rem 1.75rem; border-left: 1px solid #c7baaa; }
.ortho-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ortho-timeline li::before { content: ''; position: absolute; top: .5rem; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.ortho-timeline h3 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.ortho-step-fee { align-self: start; color: var(--navy); font-variant-numeric: tabular-nums; }
.ortho-step-fee p { font-size: .9375rem; line-height: 1.8; }
.ortho-step-copy { grid-column: 1/-1; margin-top: .5rem; color: var(--muted); line-height: 1.85; }
.ortho-benefits { padding: 2rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); }
.ortho-planning { color: var(--muted); line-height: 1.85; margin-bottom: 1.5rem; }
.ortho-planning p+p { margin-top: .4rem; }
.ortho-benefit-list>div { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.ortho-benefit-list h3 { font-size: 1.0625rem; margin: 0; font-weight: 600; }
.ortho-benefit-list p { color: var(--muted); line-height: 1.85; }
.ortho-questions { padding: 1.75rem; border-radius: 1.5rem; background: var(--surface); }
.ortho-questions>h2 { margin-bottom: .75rem; font-size: 1.4rem; }
.ortho-questions>p { color: var(--muted); line-height: 1.85; }
.ortho-questions>a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1rem; border-bottom: 1px solid var(--line); }
@media (max-width:620px) {
  .ortho-hero { padding-bottom: 2.5rem; }
  .ortho-hero .patient-shortcuts { gap: .5rem; }
  .ortho-hero .patient-shortcuts a { padding-inline: .8rem; font-size: .875rem; }
  .ortho-section { margin-bottom: 2.5rem; }
  .ortho-section>h2 { font-size: 1.5rem; margin-bottom: 1.25rem; }
  .ortho-plan-grid { grid-template-columns: 1fr; gap: 1rem; }
  .ortho-plan { padding: 1.5rem; border-radius: 1.375rem; }
  .ortho-plan-price p { font-size: 1.75rem; }
  .ortho-payment { padding: 1.25rem; }
  .ortho-flow { padding-top: 2rem; margin-bottom: 3rem; }
  .ortho-benefits { padding: 1.5rem; border-radius: 1.375rem; }
  .ortho-timeline li { grid-template-columns: 1fr; padding-left: 1.25rem; }
  .ortho-step-fee { margin-top: .375rem; }
  .ortho-step-copy { margin-top: .625rem; }
  .ortho-benefit-list>div { grid-template-columns: 1fr; gap: .4rem; padding-block: 1.125rem; }
  .ortho-questions { padding: 1.5rem; border-radius: 1.375rem; }
}

/* Temporary clinic notice: normal document flow below the shared navigation. */
.clinic-announcement {
  background: #edf2e9;
  color: var(--navy);
  border-bottom: 1px solid #d7e1d4;
  font-size: .875rem;
  line-height: 1.65;
}
.announcement-details { min-width: 0; }
.announcement-details > summary {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 44px;
  padding-block: .5rem;
  list-style: none;
  cursor: pointer;
}
.announcement-details > summary::-webkit-details-marker { display: none; }
.announcement-row { min-width: 0; overflow-wrap: anywhere; }
.announcement-toggle {
  display: inline-block;
  color: #326845;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: .25rem;
}
@media (hover:hover) and (pointer:fine) {
  .announcement-details > summary:hover .announcement-toggle { color: #254f34; }
}
.announcement-sessions {
  padding: .75rem 0 1rem;
  border-top: 1px solid #d7e1d4;
  text-align: center;
}
.announcement-sessions p + p { margin-top: .4rem; }
.announcement-sessions ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
@media (max-width:620px) {
  .announcement-details.shell { width: calc(100% - 32px); }
  .announcement-details > summary { flex-direction: column; padding-block: .625rem; }
  .announcement-separator { display: none; }
  .announcement-row { width: 100%; text-align: center; }
  .announcement-sessions ul { flex-direction: column; gap: .25rem; }
}