/* ==========================================================================
   drkiyan.dental -- SITE STYLESHEET (single source of truth)

   Generated by builders/make_site_css.py from every page on the site.
   DO NOT hand-edit CSS inside a page. If a page needs a style it goes HERE,
   once. verify-uniformity.py fails any page whose CSS is not exactly this.

   Fonts: 'Cormorant Garamond', 'Noto Serif TC', serif (display) / 'Karla', 'Noto Sans TC', sans-serif (body). No others.
   FAQ:   native <details>/<summary>, no JS, '+'/'-' via summary::after.
   ========================================================================== */

/* ---------- tokens ---------- */
:root { --espresso: #2C2220; --walnut: #4A3C31; --cognac: #6B5B50; --taupe: #7B7169; --mushroom: #B8AFA6; --linen: #E8E2DB; --alabaster: #F5F2ED; --ivory: #FDFBF7; --hunter: #355E3B; --success-green: #355E3B }

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box }
body { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 300; line-height: 1.8; color: var(--espresso); background: var(--ivory); letter-spacing: 0.3px }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-weight: 400; letter-spacing: -0.5px }
main { color: var(--walnut) }
main h1, main h2, main h3, main h4 { color: var(--espresso) }
a { color: inherit }

/* ---------- layout ---------- */
.before-after-container { max-width: 1000px; margin: 0 auto }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }

.container { max-width: 1200px; margin: 0 auto; padding: 0 40px }
.container, .container-wide { padding: 0 20px }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 40px }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 40px }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #F5F2ED; border: 1px solid #F5F2ED }

.cs-grid-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 50px; border-bottom: 1px solid rgba(44, 34, 32, 0.1); padding-bottom: 20px }
.cs-grid-header h2 { font-size: 13px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: rgba(44, 34, 32, 0.4) }
.cs-grid-section { background: var(--alabaster); padding: 80px 0 100px }
.cs-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: #F5F2ED; border: 1px solid #F5F2ED }
.doctor-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 100px; align-items: center; max-width: 1400px; margin: 0 auto; padding: 0 40px }
.fin-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:0; max-width:860px; margin:0 auto; border-top:1px solid var(--linen); border-left:1px solid var(--linen) }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-bottom: 40px }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1120px; margin: 0 auto }
.kc-container { max-width: 1200px; margin: 0 auto; padding: 0 40px }
.kc-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px }
.kc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start }
.lab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center }
.lead-section .container { max-width: 1120px }
.procedures-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px }
.rv-cb:not(:checked) ~ .rv-grid .rv-card:nth-child(n+13) { display: none }
.rv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; margin: 34px 0 0 }
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 60px }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
.sitemap-container .external a { color: var(--cognac)}
.sitemap-container .last-updated { color: var(--taupe); font-size: 0.85rem; margin-bottom: 40px }
.sitemap-container .link-desc { display: block; color: var(--cognac); font-size: 0.875rem; margin-top: 1px }
.sitemap-container .section { margin-bottom: 35px }
.sitemap-container .section-title { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--linen) }

.sitemap-container .subtitle { color: var(--cognac); margin-bottom: 6px; font-size: 1rem }
.sitemap-container a { color: var(--cognac); text-decoration: none }
.sitemap-container a:hover { text-decoration: underline }
.sitemap-container h1 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-weight: 400; font-size: 2rem; margin-bottom: 6px }
.sitemap-container li { margin-bottom: 10px }
.sitemap-container ul { list-style: none; padding: 0; margin: 0 }
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center }
.tech-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 100px; align-items: center; margin-top: 60px }

/* ---------- component ---------- */
#ksb { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: center; background: #2C2220; border-top: 1px solid rgba(245, 242, 237, 0.12); font-family: 'Karla', 'Noto Sans TC', sans-serif }
#ksb .ksb-cta { background: #FDFBF7; color: #355E3B }
#ksb .ksb-cta:hover { background: #E8E2DB; color: #355E3B }
#ksb .ksb-short { display: none }
#ksb a { flex: 1 1 0; max-width: 260px; text-align: center; padding: 15px 18px; color: #F5F2ED; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; transition: background 0.25s ease, color 0.25s ease }
#ksb a + a { border-left: 1px solid rgba(245, 242, 237, 0.10) }
#ksb a:hover { background: #F5F2ED; color: #2C2220 }
.ab-bio { max-width: 760px; margin: 0 auto; font-size: 21px; font-weight: 300; line-height: 1.75; color: var(--walnut); text-align: left }
.ab-bio + .ab-bio { margin-top: 22px }
.ab-cred-name { display: block; font-size: 21px; font-weight: 400; line-height: 1.3 }
.ab-cred-org { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.5px; color: var(--taupe); margin-top: 5px; line-height: 1.5 }
.ab-creds { padding: 90px 0 110px; border-top: 1px solid rgba(44,34,32,0.12); margin-top: 90px }
.ab-creds li { break-inside: avoid; margin-bottom: 30px; padding-left: 20px; position: relative }
.ab-creds li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; background: var(--hunter); border-radius: 50% }
.ab-creds ul { list-style: none; columns: 2; column-gap: 72px; max-width: 940px; margin: 0 auto }
.ab-creds-title { text-align: center; font-size: 12px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--cognac); margin-bottom: 12px }
.ab-cta { background: var(--espresso); padding: 100px 40px; margin: 0 -40px; text-align: center }
.ab-cta h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 300; color: var(--ivory); margin-bottom: 14px }
.ab-cta h2 em { font-style: italic }
.ab-cta p { font-size: 14px; font-weight: 300; color: rgba(253,251,247,0.55); letter-spacing: 0.5px; margin-bottom: 44px }
.ab-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.ab-cta-buttons a { padding: 15px 40px; border: 1px solid rgba(253,251,247,0.28); color: var(--ivory); text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; transition: all 0.3s ease }
.ab-cta-buttons a:hover { background: var(--ivory); color: var(--espresso); border-color: var(--ivory) }
.ab-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--cognac); margin-bottom: 22px }
.ab-hero { padding: 120px 0 70px; text-align: center }
.ab-hero h1 { font-size: clamp(56px, 9vw, 128px); font-weight: 300; line-height: 0.95; letter-spacing: -1px; margin-bottom: 34px }
.ab-name { font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--cognac); margin-bottom: 30px }
.ab-portrait { margin: 70px auto 0; max-width: 560px }
.ab-portrait img { width: 100%; height: auto; display: block; filter: grayscale(12%) }
.ab-hero .ab-portrait { margin: 10px auto 64px }
.ab-body { padding: 100px 0 90px; text-align: center }
.ab-body .ab-creds-title { margin-top: 70px }
.ab-body .ab-creds-title:first-child { margin-top: 0 }
.ab-creds-green { background: var(--hunter); border-top: 0; margin-top: 0 }
.ab-creds-green .ab-creds-title { color: #BFD6C1 }
.ab-creds-green .ab-rule { background: #BFD6C1 }
.ab-creds-green .ab-cred-name { color: var(--ivory) }
.ab-creds-green .ab-cred-org { color: rgba(253,251,247,0.72) }
.ab-creds-green li::before { background: #BFD6C1 }
.ab-rule { width: 40px; height: 1px; background: var(--hunter); margin: 0 auto 56px }

.benefit-card { background: var(--ivory); padding: 40px 30px; text-align: center; transition: all 0.4s ease }
.benefit-card h3 { font-size: 24px; margin-bottom: 15px; color: var(--espresso) }
.benefit-card p { color: var(--cognac); font-size: 15px; line-height: 1.8 }
.benefit-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08) }
.benefit-item { padding: 30px; background: var(--alabaster) }
.benefit-item h4 { font-size: 20px; margin-bottom: 15px; color: var(--walnut) }
.benefit-item p { font-size: 15px; color: var(--cognac); line-height: 1.8 }
.benefits { padding: 120px 0; background: var(--alabaster) }
.btn { padding: 16px 40px; text-decoration: none; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); font-weight: 400; display: inline-block }
.btn-dark { background: var(--espresso); color: var(--alabaster); border: 1px solid var(--espresso) }
.btn-dark:hover { background: transparent; color: var(--espresso) }
.btn-outline { background: transparent; color: var(--espresso); border: 1px solid var(--espresso) }
.btn-outline:hover { background: var(--espresso); color: var(--alabaster) }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mushroom); border: none; cursor: pointer; padding: 0; transition: all 0.3s ease }
.carousel-dot.active { background: var(--espresso) }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px }
.carousel-item { flex: 0 0 100%; width: 100% }
.carousel-item img { width: 100%; height: auto; display: block }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: var(--ivory); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all 0.3s ease; z-index: 10 }
.carousel-nav svg { width: 16px; height: 16px; fill: var(--espresso) }
.carousel-nav.next { right: 12px }
.carousel-nav.prev { left: 12px }
.carousel-nav:hover { background: var(--alabaster); box-shadow: 0 4px 12px rgba(0,0,0,0.2) }
.carousel-slides { display: flex; transition: transform 0.3s ease-out }
.carousel-track { position: relative; overflow: hidden }
.case-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 40px 0; border-top: 1px solid var(--linen); border-bottom: 1px solid var(--linen); margin-bottom: 60px }
.case-showcase { padding: 100px 0; background: var(--ivory) }
.check { color: var(--success-green); font-size: 18px }
.comparison { padding: 120px 0; background: var(--alabaster) }
.comparison-cell { padding: 25px 20px; border-right: 1px solid rgba(255,255,255,0.1); text-align: center }
.comparison-cell.featured { background: var(--walnut); position: relative }
.comparison-feature { padding: 20px; font-size: 14px; color: var(--cognac); border-right: 1px solid var(--linen); font-weight: 400 }
.comparison-header-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; background: var(--espresso); color: var(--alabaster) }
.comparison-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; border-bottom: 1px solid var(--linen) }
.comparison-table { max-width: 1200px; margin: 0 auto; background: var(--alabaster); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.05) }
.comparison-value { padding: 20px; text-align: center; border-right: 1px solid var(--linen); font-size: 14px }
.comparison-value { color: var(--espresso) }
.comparison-value.featured { background: rgba(53, 94, 59, 0.05) }

.credential-list { list-style: none }
.credential-list li { padding: 8px 0; color: var(--cognac); font-size: 15px; position: relative; padding-left: 20px }
.credential-list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1px; background: var(--cognac) }
.credentials { border-top: 1px solid var(--linen); padding-top: 40px; margin-top: 40px }
.credentials h3 { font-size: 24px; margin-bottom: 25px; color: var(--walnut) }
.cross { color: var(--cognac); font-size: 18px; opacity: 0.5 }
.cs-attr-l { display: block }
.cs-attr-sep { display: none }
.cs-card { text-decoration: none; color: var(--espresso); display: block; background: var(--alabaster); transition: background 0.3s ease; position: relative; overflow: hidden }
.cs-card h3 { font-size: 19px; font-weight: 400; line-height: 1.25; color: var(--espresso); margin-bottom: 10px }
.cs-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; filter: grayscale(20%); transition: filter 0.4s ease }
.cs-card p { font-size: 14px; font-weight: 300; color: var(--walnut); line-height: 1.65; margin-bottom: 16px }
.cs-card-arrow { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--hunter); opacity: 0; transform: translateX(-6px); transition: all 0.3s ease; display: inline-block }
.cs-card-body { padding: 22px 24px 28px; border-top: 1px solid rgba(44, 34, 32, 0.08); background: var(--alabaster) }
.cs-card-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--cognac); margin-bottom: 10px; font-weight: 400 }
.cs-card:hover { background: #2C2220 }
.cs-card:hover .cs-card-arrow { opacity: 1; transform: translateX(0); color: var(--mushroom) }
.cs-card:hover .cs-card-body { background: #2C2220; border-top-color: rgba(245, 242, 237, 0.1) }
.cs-card:hover .cs-card-label { color: var(--mushroom) }
.cs-card:hover h3 { color: #F5F2ED }
.cs-card:hover img { filter: grayscale(0%) }
.cs-card:hover p { color: rgba(245, 242, 237, 0.6) }

.cs-cta { background: var(--espresso); padding: 120px 40px; margin: 0 -40px; border-top: 1px solid rgba(44, 34, 32, 0.1); text-align: center }
.cs-cta h2 { font-size: 48px; margin-bottom: 20px; color: var(--alabaster); font-weight: 300 }
.cs-cta h2 em { font-style: italic }
.cs-cta p { color: var(--mushroom); font-size: 18px; margin-bottom: 50px }
.cs-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap }
.cs-cta-buttons a { padding: 15px 40px; border: 1px solid rgba(245, 242, 237, 0.25); text-decoration: none; color: var(--alabaster); font-size: 12px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; transition: all 0.3s ease; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif }
.cs-cta-buttons a:hover { background: var(--alabaster); color: var(--espresso); border-color: var(--alabaster) }

.cs-hero { background: var(--alabaster); padding: 140px 40px 100px; margin: 0 -40px; border-bottom: 1px solid rgba(44, 34, 32, 0.12); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end }
.cs-hero .cs-attribution { font-size: 14px; color: var(--cognac); max-width: 700px; margin: 0 auto; font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 300; line-height: 2 }
.cs-hero .cs-attribution a { color: var(--cognac); text-decoration: none }
.cs-hero .cs-attribution a:hover { color: var(--espresso) }
.cs-hero h1 { font-size: clamp(40px,5vw,64px); margin-bottom: 20px; line-height: 1.2; color: var(--espresso); font-weight: 300 }
.cs-hero h1 em { font-style: italic; font-weight: 300 }
.cs-hero-desc { font-size: 18px; font-weight: 300; line-height: 1.7; color: rgba(44, 34, 32, 0.65); margin-bottom: 30px }
.cs-hero-eyebrow { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--cognac); margin-bottom: 24px; font-weight: 400 }
.cs-hero-meta { font-size: 13px; font-weight: 400; color: var(--cognac); letter-spacing: 0.5px }
.cs-hero-meta a { color: var(--cognac); text-decoration: none }
.cs-hero-meta a:hover { color: var(--espresso) }
.cs-hero-right { padding-bottom: 6px }
.cs-last-updated { text-align: right; font-size: 12px; color: var(--cognac); letter-spacing: 1px; margin-top: 24px; font-style: italic }
.cs-section-desc { color: var(--cognac); max-width: 740px; margin: 0 auto 40px; font-size: 16px }
.cs-section-eyebrow { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--cognac); margin-bottom: 16px; font-weight: 400 }
.cs-section-header { margin-bottom: 50px }
.cs-section-header h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 300; letter-spacing: -0.5px; color: var(--espresso); margin-bottom: 14px }
.cs-section-header p { font-size: 16px; font-weight: 300; color: rgba(44, 34, 32, 0.5); max-width: 580px; line-height: 1.7 }
.cs-section-label { text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: var(--cognac); margin-bottom: 30px; font-weight: 400 }
.cs-section-title { font-size: 36px; margin-bottom: 8px; color: var(--espresso); font-weight: 300 }
.cs-service-card { background: var(--alabaster); padding: 36px 32px; text-decoration: none; color: inherit; display: block; transition: background 0.3s ease }
.cs-service-card h3 { font-size: 22px; font-weight: 400; color: var(--espresso); margin-bottom: 14px; line-height: 1.2 }
.cs-service-card p { font-size: 14px; font-weight: 300; color: var(--walnut); line-height: 1.7; margin-bottom: 20px }
.cs-service-card:hover { background: #2C2220 }
.cs-service-card:hover .cs-service-link { color: var(--mushroom) }
.cs-service-card:hover h3 { color: #F5F2ED }
.cs-service-card:hover p { color: rgba(245, 242, 237, 0.6) }
.cs-service-link { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cognac); transition: color 0.2s }
.cs-services { background: var(--alabaster); padding: 80px 0 100px; border-top: 1px solid rgba(44, 34, 32, 0.1) }
.cs-why { background: var(--alabaster); padding: 80px 0 100px; border-top: 1px solid rgba(44, 34, 32, 0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start }
.cs-why-content h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 300; letter-spacing: -0.5px; color: var(--espresso); margin-bottom: 40px; line-height: 1.2 }
.cs-why-content h3 { font-size: 13px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: rgba(44, 34, 32, 0.3); margin-bottom: 16px; margin-top: 40px }
.cs-why-content h3:first-of-type { margin-top: 0 }
.cs-why-content p { font-size: 16px; font-weight: 300; color: rgba(44, 34, 32, 0.6); line-height: 1.85 }
.cs-why-image { position: sticky; top: 40px }
.cs-why-image img { width: 100%; height: auto; display: block; filter: grayscale(15%) }
.cta { padding: 150px 0 100px; background: var(--espresso); text-align: center }
.cta .btn { border: 1px solid var(--mushroom); color: var(--alabaster); background: transparent }
.cta .btn-outline { border-color: var(--alabaster); color: var(--alabaster) }
.cta .btn-outline:hover { background: var(--alabaster); color: var(--espresso) }
.cta .btn:hover { background: var(--alabaster); color: var(--espresso); border-color: var(--alabaster) }
.cta h2 { font-size: 48px; color: var(--alabaster); margin-bottom: 20px; font-weight: 300 }
.cta p { font-size: 18px; color: var(--mushroom); margin-bottom: 50px }
.cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap }
.detail-item { text-align: center }
.detail-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cognac) }
.detail-value { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 28px; color: var(--walnut); margin-bottom: 5px }
.doctor { padding: 120px 0; background: var(--ivory) }
.doctor-bio { font-size: 16px; line-height: 1.8; color: var(--cognac); margin-bottom: 40px}
.doctor-content { padding-left: 40px }
.doctor-content h2 { font-size: 48px; margin-bottom: 10px; color: var(--espresso); font-weight: 300 }
.doctor-image { position: relative }
.doctor-image img { width: 100%; height: auto }
.doctor-image-frame { aspect-ratio: 3/4; position: relative; overflow: hidden }
.doctor-image-frame img { width: 100%; height: 100%; object-fit: cover }
.doctor-subtitle { font-size: 18px; color: var(--walnut); margin-bottom: 40px; font-style: italic; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif }
.education { padding: 100px 0; background: var(--ivory) }
.education h2 { font-size: 42px; color: var(--espresso); margin-bottom: 30px; font-weight: 300; text-align: center }
.education h3 { font-size: 28px; color: var(--walnut); margin: 40px 0 20px; font-weight: 400 }
.education p { font-size: 16px; line-height: 1.9; color: var(--cognac); margin-bottom: 20px }
.education-content { max-width: 900px; margin: 0 auto }
.education-content h2 { font-size: 42px; color: var(--espresso); margin-bottom: 40px; text-align: center }
.education-content h3 { font-size: 28px; color: var(--walnut); margin: 50px 0 25px }
.education-content p { font-size: 16px; line-height: 1.9; color: var(--cognac); margin-bottom: 25px }
.education-highlight { background: var(--alabaster); padding: 30px 40px; margin: 40px 0; border-left: 4px solid var(--walnut) }
.education-highlight p { margin-bottom: 0; font-style: italic }
.education-section { padding: 100px 0; background: var(--ivory) }
.essay-content { max-width: 720px; margin: 0 auto }
.essay-content blockquote { margin: 50px 0; padding: 30px 40px; background: var(--alabaster); border-left: 3px solid var(--hunter); font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 22px; font-style: italic; color: var(--walnut); line-height: 1.6 }
.essay-content h2 { font-size: 36px; color: var(--espresso); margin-bottom: 40px; font-weight: 300 }
.essay-content h3 { font-size: 24px; color: var(--walnut); margin: 50px 0 20px; font-weight: 400 }
.essay-content p { font-size: 16px; line-height: 1.9; color: var(--cognac); margin-bottom: 25px }
.essay-content p:first-of-type::first-letter { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 72px; float: left; line-height: 0.8; padding-right: 12px; color: var(--walnut) }
.essay-content ul { list-style: none; margin: 30px 0; padding-left: 0 }
.essay-content ul li { padding: 10px 0 10px 25px; position: relative; color: var(--cognac); font-size: 15px }
.essay-content ul li::before { content: '\2014'; position: absolute; left: 0; top: 10px; color: var(--walnut) }
.essay-section { padding: 80px 0 120px; background: var(--ivory) }
.faq { padding: 120px 0; background: var(--alabaster) }
.faq-answer { padding: 0 0 26px }
.faq-answer p { font-size: 15px; line-height: 1.8; color: var(--cognac); margin: 0 }
.faq-content h2 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 36px; color: var(--espresso); margin-bottom: 40px; font-weight: 300; text-align: center }
.faq-item { margin-bottom: 0; padding: 30px 0; border-bottom: 1px solid var(--linen) }
.faq-item h3 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 22px; color: var(--walnut); margin-bottom: 12px; font-weight: 400 }
.faq-item p { font-size: 15px; line-height: 1.8; color: var(--cognac); margin: 0 }
.faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 24px 44px 24px 0; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 22px; color: var(--walnut); font-weight: 400 }
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--taupe); font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; line-height: 1 }
.faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none }
.faq-item:last-of-type { border-bottom: none }
.faq-item[open] summary::after { content: '\2212' }
.faq-list { max-width: 800px; margin: 60px auto 0 }
.faq-section { padding: 80px 0; background: var(--alabaster) }
.fin-card { flex:1 1 160px; max-width:220px; min-width:140px; padding:36px 20px 32px; border-right:1px solid var(--linen); border-bottom:1px solid var(--linen); text-align:center; text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:center; gap:10px; transition:background .25s ease }
.fin-card-name { font-family:'Cormorant Garamond', 'Noto Serif TC', serif; font-size:22px; font-weight:400; letter-spacing:.03em; color:var(--espresso) }
.fin-card:hover { background:var(--alabaster) }
.fin-footer a { color:var(--cognac); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s }
.fin-footer a:hover { border-bottom-color:var(--hunter) }
.fin-heading { font-family:'Cormorant Garamond', 'Noto Serif TC', serif; font-size:clamp(30px,4.5vw,48px); font-weight:300; text-align:center; letter-spacing:.01em; color:var(--espresso); line-height:1.15; margin-bottom:14px }
.fin-rule { width:32px; height:1px; background:var(--hunter); margin:0 auto 52px }
/* /about inherits from body, which is Karla. Every other component
   on the site sets the serif explicitly; these three sections did not,
   which is the whole of why /about read as a sans-serif page. */
.ab-hero, .ab-body, .ab-creds, .ab-cta { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif }
.fin-section { font-family:'Cormorant Garamond', 'Noto Serif TC', serif; font-weight:400; padding:80px 32px 72px; background:var(--ivory); color:var(--espresso) }
.fin-section *, .fin-section *::before, .fin-section *::after { box-sizing: border-box; margin: 0; padding: 0 }
/* .fin-section * above sets margin:0 and beats .fin-rule's margin:0 auto on
   specificity, so the gold rule has never been centered. This restores it at
   a specificity that wins. */
.fin-section .fin-rule { margin: 0 auto 52px }
.footer { background: var(--espresso); color: var(--mushroom); padding: 60px 0 30px }
.footer a { color: var(--mushroom); text-decoration: none; transition: color 0.3s ease }
.footer a:hover { color: var(--alabaster) }
.footer h3 { font-size: 16px; color: var(--alabaster); margin-bottom: 20px; font-weight: 400; letter-spacing: 1px }
.footer p { font-size: 14px; line-height: 1.8 }
.footer-bottom { padding-top: 30px; border-top: 1px solid var(--walnut); text-align: center; font-size: 12px; color: var(--mushroom) }
.footer-bottom a { color: var(--mushroom); text-decoration: none; transition: all 0.3s ease }
.footer-bottom a:hover { color: var(--alabaster) }
.footer-info { font-size: 13px; line-height: 1.8 }
.footer-info a { color: var(--mushroom); text-decoration: none; transition: all 0.3s ease }
.footer-info a:hover { color: var(--alabaster) }
.full-face-panel { max-width: 700px; margin: 50px auto }
.full-face-panel img { width: 100%; height: auto; display: block }
.gallery { padding: 120px 0; background: var(--alabaster) }
.gallery-item { aspect-ratio: 1/1; position: relative; overflow: hidden; cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) }
.gallery-item img { width: 100%; height: 100%; object-fit: cover }
.gallery-item:hover { transform: scale(1.02) }
.gallery-item:hover img { transform: scale(1.05) }
.hero { min-height: auto; padding: 90px 0 80px }
/* The nine service pages each carried this one rule inside their own
   <style> block, along with several KB of blank lines, orphan comments
   and a duplicate @keyframes that site.css already defines. The rule is
   here now and the page blocks carry zero CSS, as P2 requires. */
.hero { background: url('/images/beverly-hills-dental-office-hero.webp') center center / cover no-repeat }
.hero h1 { font-size: clamp(48px, 7vw, 84px); line-height: 1; margin-bottom: 30px; color: var(--espresso); font-weight: 300 }
.hero h1 span { display: block; font-style: italic; color: var(--walnut); margin-top: 10px }

.hero-badge { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--cognac); margin-bottom: 40px; font-weight: 400 }

.hero-copy { text-align: left; background: rgba(253, 251, 247, 0.88); padding: 46px 44px; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,0.1) }
.hero-copy .hero-badge { margin-bottom: 22px }
.hero-copy .hero-subtitle { font-size: 17px; margin-bottom: 26px }
.hero-copy h1 { font-size: clamp(38px, 4.4vw, 58px); margin-bottom: 20px }
.hero-price { font-size: 14px; color: var(--walnut); padding: 14px 0 0; margin-top: 22px; border-top: 1px solid var(--linen) }
.hero-price strong { font-weight: 500; color: var(--espresso) }
.hero-subtitle { font-size: 18px; line-height: 1.8; color: var(--cognac); margin-bottom: 50px; font-weight: 300 }
.hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--mushroom), transparent) }

.image-carousel { position: relative; max-width: 600px; margin: 50px auto }
.kc-assurances { list-style: none }
.kc-assurances li { position: relative; padding-left: 26px; margin-bottom: 16px; font-size: 15px; color: var(--walnut) }
.kc-assurances li::before { content: ''; position: absolute; left: 0; top: 14px; width: 12px; height: 1px; background: var(--hunter) }
.kc-assurances strong { font-weight: 500; color: var(--espresso) }
.kc-btn-outline { display: inline-block; padding: 15px 34px; border: 1px solid var(--espresso); color: var(--espresso); text-decoration: none; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; transition: all 0.3s ease }
.kc-btn-outline:hover { background: var(--espresso); color: var(--alabaster) }
.kc-detail a:hover { color: var(--cognac)}
.kc-detail h3 { font-size: 22px; margin-bottom: 16px }
.kc-detail p, .kc-detail a { font-size: 15px; color: var(--walnut); text-decoration: none; line-height: 1.9 }
.kc-details { padding: 90px 0; background: var(--ivory) }
.kc-error { display: none; margin-top: 18px; padding: 13px 15px; border-left: 2px solid #8B3A2F; background: #F7EFEC; font-size: 13px; color: #6B2C23; line-height: 1.6 }
.kc-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--cognac); margin-bottom: 28px; font-weight: 400 }
.kc-field { margin-bottom: 22px }
.kc-file-input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.kc-file-label { display: block; border: 1px dashed var(--mushroom); padding: 15px; text-align: center; cursor: pointer; font-size: 13px; color: var(--cognac); transition: border-color 0.25s ease, color 0.25s ease }
.kc-file-label:hover { border-color: var(--hunter); color: var(--espresso) }
.kc-file-name { font-size: 12px; color: var(--taupe); margin-top: 8px }
.kc-form-card { background: var(--ivory); border: 1px solid var(--linen); padding: 42px 40px 46px }
.kc-form-card h2 { font-size: 32px; margin-bottom: 10px; color: var(--espresso) }
.kc-form-note { font-size: 13px; color: var(--cognac); margin-bottom: 32px; line-height: 1.6 }
.kc-hero { background: var(--alabaster); padding: 70px 0 80px }
.kc-hero h1 { font-size: clamp(38px, 4.5vw, 58px); margin-bottom: 26px }
.kc-hero h1 em { font-style: italic; color: var(--cognac) }
.kc-hours { list-style: none; font-size: 15px; color: var(--walnut) }
.kc-hours li { display: flex; justify-content: space-between; max-width: 260px }
.kc-input, .kc-textarea, .kc-select { width: 100%; padding: 13px 14px; border: 1px solid var(--mushroom); background: #fff; font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 300; font-size: 16px; color: var(--espresso); letter-spacing: 0.3px; border-radius: 0; transition: border-color 0.25s ease; -webkit-appearance: none; appearance: none }
.kc-input::placeholder, .kc-textarea::placeholder { color: var(--taupe); opacity: 1 }
.kc-input:focus, .kc-textarea:focus, .kc-select:focus { outline: none; border-color: var(--hunter); box-shadow: 0 0 0 1px var(--hunter) }
.kc-label { display: block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--walnut); margin-bottom: 9px; font-weight: 500 }
.kc-lede { font-size: 17px; color: var(--walnut); margin-bottom: 36px; max-width: 480px }
.kc-privacy { font-size: 11px; color: var(--taupe); margin-top: 20px; line-height: 1.7 }
.kc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.kc-select { background-image: linear-gradient(45deg, transparent 50%, var(--cognac) 50%),
                      linear-gradient(135deg, var(--cognac) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat }
.kc-submit { width: 100%; padding: 17px 30px; margin-top: 6px; background: var(--hunter); color: var(--ivory); border: 1px solid var(--hunter); font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; border-radius: 0; transition: background 0.3s ease, color 0.3s ease }
.kc-submit:disabled { opacity: 0.5; cursor: not-allowed }
.kc-submit:hover { background: transparent; color: var(--hunter) }
.kc-success { display: none; text-align: center; padding: 30px 10px }
.kc-success h2 { font-size: 32px; margin-bottom: 16px }
.kc-success p { font-size: 15px; color: var(--walnut); margin-bottom: 30px }
.kc-success-rule { width: 40px; height: 1px; background: var(--hunter); margin: 0 auto 28px }
.kc-textarea { resize: vertical; min-height: 104px; line-height: 1.65 }
.lab-artistry { padding: 120px 0; background: var(--alabaster) }
.lab-content { max-width: 800px; margin: 0 auto 60px; text-align: center }
.lab-content h2 { font-size: 48px; color: var(--espresso); margin-bottom: 40px }
.lab-content p { color: var(--cognac); font-size: 16px; line-height: 1.9; margin-bottom: 25px }
.lab-item { overflow: hidden }
.lab-item img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) }
.lab-item:hover img { transform: scale(1.05) }
.lead-assurances { list-style: none; margin: 0; padding: 0 }
.lead-assurances li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 15px; line-height: 1.7; color: var(--walnut) }
.lead-assurances li::before { content: ''; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--hunter) }
.lead-assurances strong { font-weight: 500; color: var(--espresso) }
.lead-card { background: var(--ivory); border: 1px solid var(--linen); padding: 40px 38px 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.1) }
.lead-card h2 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 32px; font-weight: 400; line-height: 1.15; color: var(--espresso); margin-bottom: 10px; text-transform: none; letter-spacing: -0.5px }
.lead-error { display: none; margin-top: 16px; padding: 13px 15px; border-left: 2px solid #8B3A2F; background: #F7EFEC; font-size: 13px; color: #6B2C23; line-height: 1.6 }
.lead-field { margin-bottom: 20px }
.lead-file-input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.lead-file-label { display: block; border: 1px dashed var(--mushroom); padding: 14px; text-align: center; cursor: pointer; font-size: 13px; color: var(--cognac); transition: border-color 0.25s ease, color 0.25s ease }
.lead-file-label:hover { border-color: var(--hunter); color: var(--espresso) }
.lead-file-name { font-size: 12px; color: var(--taupe); margin-top: 7px }
.lead-input, .lead-textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--mushroom); background: #fff; font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 300; font-size: 16px; color: var(--espresso); letter-spacing: 0.3px; border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color 0.25s ease }
.lead-input::placeholder, .lead-textarea::placeholder { color: var(--taupe); opacity: 1 }
.lead-input:focus, .lead-textarea:focus { outline: none; border-color: var(--hunter); box-shadow: 0 0 0 1px var(--hunter) }
.lead-label { display: block; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--walnut); margin-bottom: 8px; font-weight: 500 }
.lead-note { font-size: 13px; color: var(--cognac); margin-bottom: 30px; line-height: 1.6 }
.lead-note a { color: var(--cognac) }
.lead-pitch { text-align: left }
.lead-pitch .section-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--hunter); margin-bottom: 22px }
.lead-pitch > p { font-size: 17px; color: var(--walnut); line-height: 1.8; margin-bottom: 28px }
.lead-pitch h2 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: clamp(32px, 3.4vw, 44px); font-weight: 400; line-height: 1.15; letter-spacing: -0.5px; color: var(--espresso); margin-bottom: 20px; text-transform: none }
.lead-privacy { font-size: 11px; color: var(--taupe); margin-top: 18px; line-height: 1.7 }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.lead-rule { width: 40px; height: 1px; background: var(--hunter); margin: 0 auto 24px }
.lead-section { padding: 80px 0; background: var(--alabaster); border-top: 1px solid var(--linen); border-bottom: 1px solid var(--linen) }
.lead-submit { width: 100%; padding: 17px 30px; margin-top: 6px; background: var(--hunter); color: var(--ivory); border: 1px solid var(--hunter); font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; border-radius: 0; transition: background 0.3s ease, color 0.3s ease }
.lead-submit:disabled { opacity: 0.5; cursor: not-allowed }
.lead-submit:hover { background: transparent; color: var(--hunter) }
.lead-success { display: none; text-align: center; padding: 26px 6px }
.lead-success h2 { font-size: 32px; margin-bottom: 14px }
.lead-success p { font-size: 15px; color: var(--walnut); margin-bottom: 26px; line-height: 1.8 }
.lead-textarea { resize: vertical; min-height: 96px; line-height: 1.65 }
.office { padding: 120px 0; background: var(--alabaster) }
.office-carousel { max-width: 1000px; margin: 60px auto 0; position: relative }
.office-dot { width: 8px; height: 8px; background: var(--mushroom); cursor: pointer; transition: all 0.3s ease }
.office-dot.active { background: var(--walnut); width: 24px }
.office-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center }
.office-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain }
.office-nav { display: flex; justify-content: center; gap: 15px; margin-top: 30px }
.office-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease }
.office-slide.active { opacity: 1 }
.office-slides { position: relative; height: 600px; overflow: hidden }
.page-header { padding: 120px 0 80px; background: var(--alabaster); text-align: center }
.page-header .provider-attribution { font-size: 14px; color: var(--cognac); margin-top: 15px; letter-spacing: 0.5px }
.page-header .subtitle { font-size: 18px; color: var(--cognac); font-style: italic; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif }
.page-header h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.2; color: var(--espresso); font-weight: 300; margin-bottom: 20px }
.payment-amount { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 96px; color: var(--walnut); line-height: 1 }
.payment-amount::before { content: '$'; font-size: 48px }
.payment-content { text-align: center; max-width: 700px; margin: 0 auto }
.payment-description { color: var(--cognac); margin-bottom: 40px; line-height: 1.9 }
.payment-disclaimer { font-size: 12px; color: var(--cognac) }
.payment-highlight { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 40px 0 }
.payment-per-month { font-size: 18px; color: var(--cognac) }
.payment-plans { padding: 100px 0; background: var(--alabaster) }
.payment-text { text-align: left }
.pol-body { padding-bottom: 100px }
.pol-body a { color: var(--cognac); text-decoration: underline; text-underline-offset: 3px }
.pol-body a:hover { color: var(--espresso) }
.pol-body h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 300; letter-spacing: -0.5px; margin: 56px 0 20px }
.pol-body h3 { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cognac); margin: 34px 0 12px }
.pol-body li { font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--walnut); padding-left: 22px; position: relative; margin-bottom: 12px }
.pol-body li::before { content: ''; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; background: var(--hunter); border-radius: 50% }
.pol-body p { font-size: 18px; font-weight: 300; line-height: 1.8; color: var(--walnut); margin-bottom: 20px }
.pol-body strong { font-weight: 500; color: var(--espresso) }
.pol-body ul { list-style: none; margin: 0 0 22px }
.pol-header { padding: 110px 0 50px; border-bottom: 1px solid rgba(44,34,32,0.12); margin-bottom: 50px }
.pol-header h1 { font-size: clamp(44px, 7vw, 82px); font-weight: 300; letter-spacing: -1px; line-height: 1; margin-bottom: 22px }
.pol-header h1, .pol-header h2 { color: var(--espresso) }
.pol-body h2 { color: var(--espresso) }
.pol-updated { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cognac)}
.procedure-highlight { background: var(--alabaster); padding: 40px; margin: 40px 0 }
.procedure-highlight h4 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 20px; color: var(--espresso); margin-bottom: 15px }
.procedure-highlight p { margin-bottom: 0; font-size: 15px }
.procedure-item { text-align: center; padding: 30px 20px; background: var(--alabaster); transition: all 0.3s ease }
.procedure-item h4 { font-size: 18px; color: var(--espresso); margin-bottom: 10px }
.procedure-item p { font-size: 14px; color: var(--cognac); line-height: 1.6 }
.procedure-item:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.08) }
.procedures { padding: 120px 0; background: var(--alabaster) }
.process { padding: 120px 0; background: var(--ivory) }
.process-step { display: flex; align-items: flex-start; margin-bottom: 60px; position: relative }
.process-step:not(:last-child)::after { content: ''; position: absolute; left: 30px; top: 60px; bottom: -60px; width: 1px; background: var(--linen) }
.process-timeline { max-width: 800px; margin: 80px auto 0 }
.reviews-pointer { padding: 100px 0; text-align: center }
.reviews-pointer-link { display: inline-block; padding: 16px 40px; border: 1px solid var(--walnut); color: var(--espresso); text-decoration: none; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; transition: all 0.3s ease }
.reviews-pointer-link:hover { background: var(--espresso); color: var(--alabaster); border-color: var(--espresso) }
.reviews-pointer-text { max-width: 640px; margin: 24px auto 32px; font-size: 17px; line-height: 1.7; color: var(--cognac) }
.rv-card { border: 1px solid var(--linen); background: var(--alabaster); padding: 26px 26px 22px; display: flex; flex-direction: column }
.rv-cb { position: absolute; opacity: 0; width: 0; height: 0 }
.rv-cb:checked ~ .rv-showall { display: none }
.rv-cb:focus-visible ~ .rv-showall { outline: 2px solid var(--hunter); outline-offset: 3px }
.rv-clamp { display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden }
.rv-count { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe) }
.rv-date { color: var(--cognac) }
.rv-filter { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px }
.rv-filter button { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 22px; border: 1px solid var(--mushroom); background: transparent; color: var(--cognac); cursor: pointer; transition: all 0.3s ease }
.rv-filter button.active { background: var(--espresso); color: var(--alabaster); border-color: var(--espresso) }
.rv-filter button:hover { color: var(--espresso); border-color: var(--cognac) }
.rv-jump { position: sticky; top: 0; z-index: 20; background: var(--ivory); border-bottom: 1px solid var(--linen); display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; padding: 16px 0; margin-bottom: 50px }
.rv-jump a { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cognac); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 3px; transition: all 0.3s ease }
.rv-jump a:hover { color: var(--espresso); border-bottom-color: var(--hunter) }
.rv-meta { font-size: 12px; color: var(--cognac); margin: auto 0 0; padding-top: 4px; letter-spacing: 0.5px }
.rv-name { color: var(--espresso); font-weight: 400 }
.rv-rm { display: inline-block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--cognac); cursor: pointer; margin: 0 0 16px; border-bottom: 1px solid var(--mushroom); padding-bottom: 2px }
.rv-rm::before { content: '閱讀更多' }
.rv-rm:hover { color: var(--espresso); border-bottom-color: var(--cognac) }
.rv-section { margin-bottom: 70px; scroll-margin-top: 80px }
.rv-showall { display: block; width: 100%; max-width: 340px; margin: 34px auto 0; text-align: center; padding: 14px 20px; border: 1px solid var(--mushroom); color: var(--cognac); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease }
.rv-showall:hover { background: var(--espresso); color: var(--alabaster); border-color: var(--espresso) }
.rv-source-note { text-align: left; font-size: 12px; color: var(--taupe); max-width: 740px; margin: 0 auto 50px }
.rv-stars { color: var(--hunter); font-size: 16px; letter-spacing: 2px; display: block; margin-bottom: 14px }
.rv-stat { border: 1px solid var(--linen); padding: 28px 18px; background: var(--alabaster); text-align: center }
.rv-stat-label { text-transform: uppercase; letter-spacing: 2px; font-size: 10px; color: var(--cognac); margin-top: 10px }
.rv-stat-num { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 40px; line-height: 1; color: var(--espresso) }
.rv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 780px; margin: 0 auto 20px }
.rv-text { font-size: 14px; color: var(--walnut); line-height: 1.85; margin: 0 0 18px }
.rv-x { position: absolute; opacity: 0; width: 0; height: 0 }
.rv-x:checked ~ .rv-clamp { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block }
.rv-x:checked ~ .rv-rm::before { content: '收起' }
.rv-x:focus-visible ~ .rv-rm { outline: 2px solid var(--hunter); outline-offset: 3px }
.rv-year { font-size: 28px; font-weight: 300; color: var(--espresso); margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--linen) }
.safety { padding: 120px 0; background: var(--ivory) }
.safety-column h3 { font-size: 28px; color: var(--espresso); margin-bottom: 25px }
.safety-content { max-width: 900px; margin: 0 auto }
.safety-list { list-style: none }
.safety-list li { padding: 12px 0 12px 30px; color: var(--cognac); font-size: 15px; position: relative; line-height: 1.6 }
.safety-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--walnut); font-weight: 600 }
.section-desc { font-size: 18px; color: var(--cognac); max-width: 600px; margin: 0 auto; line-height: 1.8 }
.section-header { text-align: center; margin-bottom: 80px }
.section-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--hunter); margin-bottom: 30px; font-weight: 400 }
.section-title { font-size: 48px; color: var(--espresso); margin-bottom: 20px; font-weight: 300 }
.sedation { padding: 120px 0; background: var(--ivory) }
.sedation-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 60px; text-align: left }
.sedation-content { max-width: 800px; margin: 0 auto; text-align: center }
.sedation-content h2 { font-size: 48px; margin-bottom: 30px; color: var(--espresso); font-weight: 300 }
.sedation-content p { font-size: 18px; line-height: 1.8; color: var(--cognac); margin-bottom: 30px }
.service-card { background: var(--alabaster); padding: 40px 30px; text-align: center; text-decoration: none; display: block; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) }
.service-card h3 { font-size: 24px; margin-bottom: 15px; color: var(--espresso) }
.service-card p { color: var(--cognac); font-size: 15px; line-height: 1.8 }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08) }
.services { padding: 120px 0; background: var(--ivory) }
.single-image-panel { max-width: 800px; margin: 0 auto 60px }
.single-image-panel img { width: 100%; height: auto; display: block }
.solution-card { background: var(--ivory); padding: 40px 30px; text-align: center; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) }
.solution-card h3 { font-size: 24px; margin-bottom: 15px; color: var(--espresso) }
.solution-card p { color: var(--cognac); font-size: 15px; line-height: 1.8; margin-bottom: 20px }
.solution-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08) }
.solution-price { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 36px; color: var(--walnut); margin-bottom: 10px }
.solution-subtitle { font-size: 12px; color: var(--cognac); letter-spacing: 1px; text-transform: uppercase }
.solutions { padding: 120px 0; background: var(--alabaster) }
.stat-item { padding: 20px }
.stat-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cognac) }
.stat-number { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 48px; color: var(--walnut); font-weight: 300; line-height: 1; margin-bottom: 10px }
.stats { padding: 80px 0; background: var(--alabaster) }
.step-content { padding-left: 40px; flex: 1 }
.step-content h3 { font-size: 24px; margin-bottom: 10px; color: var(--espresso) }
.step-content p { color: var(--cognac); font-size: 15px; line-height: 1.8 }
.step-number { width: 60px; height: 60px; background: var(--espresso); color: var(--alabaster); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 24px; flex-shrink: 0 }
.tech-content h3 { font-size: 36px; margin-bottom: 30px; color: var(--espresso); font-weight: 300 }
.tech-content p { font-size: 16px; line-height: 1.8; color: var(--cognac); margin-bottom: 30px }
.tech-features { list-style: none; margin-top: 40px }
.tech-features li { padding: 12px 0; color: var(--cognac); font-size: 15px; padding-left: 25px; position: relative }
.tech-features li::before { content: '\2713'; position: absolute; left: 0; color: var(--walnut); font-weight: 600 }
.tech-image { aspect-ratio: 4/3; background: var(--linen); display: flex; align-items: center; justify-content: center; color: var(--cognac); font-style: italic }
.tech-image img { width: 100%; height: auto }
.tech-image:hover { transform: scale(1.02) }
.technology { padding: 120px 0; background: var(--alabaster) }

.top-carousel { position: relative; max-width: 800px; margin: 0 auto 60px }
.top-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mushroom); border: none; cursor: pointer; padding: 0; transition: all 0.3s ease }
.top-carousel-dot.active { background: var(--espresso); width: 28px; border-radius: 5px }
.top-carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px }
.top-carousel-item { flex: 0 0 100%; width: 100% }
.top-carousel-item img { width: 100%; height: auto; display: block }
.top-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: var(--ivory); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.15); transition: all 0.3s ease; z-index: 10 }
.top-carousel-nav svg { width: 20px; height: 20px; fill: var(--espresso) }
.top-carousel-nav.next { right: 16px }
.top-carousel-nav.prev { left: 16px }
.top-carousel-nav:hover { background: var(--alabaster); box-shadow: 0 4px 16px rgba(0,0,0,0.2) }
.top-carousel-slides { display: flex; transition: transform 0.3s ease-out }
.top-carousel-track { position: relative; overflow: hidden }
.treatment-list { list-style: none; background: var(--ivory); padding: 30px 40px; margin: 0 }
.treatment-list li { padding: 10px 0 10px 30px; position: relative; color: var(--espresso); font-size: 16px }
.treatment-list li::before { content: '\2014'; position: absolute; left: 0; top: 10px; color: var(--walnut) }
.treatment-plan-content h2 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 36px; color: var(--espresso); margin-bottom: 30px; font-weight: 300 }
.treatment-plan-section { padding: 80px 0; background: var(--alabaster) }
.updated-date { text-align: center; font-size: 12px; color: var(--cognac); letter-spacing: 1px; margin-top: 20px }
.case-cost { max-width: 620px; margin: 40px auto 0; padding-top: 36px; border-top: 1px solid var(--linen); text-align: center }
.cc-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cognac); margin-bottom: 6px }
.cc-monthly { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 56px; line-height: 1.1; color: var(--espresso) }
.cc-terms { font-size: 13px; color: var(--cognac); margin-top: 8px }
.cc-total { font-size: 14px; color: var(--walnut); margin-top: 16px; line-height: 1.6 }
.cc-link { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-top: 18px }
.cc-link a { color: var(--walnut) }
.urgent-triage { background: var(--espresso); color: var(--alabaster); padding: 28px 0 }

@keyframes allon4SlideIn {
  to { transform: translateY(0) }
}

@keyframes slideIn {
  to { transform: translateY(0) }
}

















/* Contact form select arrow. calc(82%) and calc(87%) are the values the old
   host's compiler produced from a mixed %/px calc(); they are what has always
   rendered. Correcting them moves the arrow, so they stay until that is a
   decision. */
.kc-select { background-image: linear-gradient(45deg,transparent 50%, var(--cognac) 50%), linear-gradient(135deg, var(--cognac) 50%,transparent 50%); background-position: calc(82%) 21px, calc(87%) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat }

/* ------------------------------------------------------------------
   Promoted from page <style> blocks, 2026-08-30 (T66 step 3). Every
   selector here appears in exactly one page's markup, so moving it
   restyles nothing else. Appended, because these rules loaded after
   the Custom CSS when they lived in the page.
   ------------------------------------------------------------------ */
.fin-section .fin-card { align-items: center; border-bottom: 1px solid var(--linen); border-right: 1px solid var(--linen); color: inherit; display: flex; flex: none; flex-direction: column; gap: 9px; justify-content: center; max-width: none; min-width: 0; padding: 30px 18px; text-align: center; text-decoration: none; transition: background .25s ease }
.fin-section .fin-card-arrow { color: var(--walnut); font-size: 12px; font-weight: 400; letter-spacing: .08em; margin-top: 4px; opacity: 1; transition: transform .2s ease }
/* the markup ends "Apply " with a trailing space and no glyph existed: computed ::after content was none. */
.fin-section .fin-card-arrow::after { content: '\2192' }
.fin-section .fin-card-former { color: var(--cognac); font-size: 11px; font-weight: 400; letter-spacing: .1em; margin-top: -4px }
.fin-section .fin-card-label { color: var(--cognac); font-size: 12px; font-weight: 400; letter-spacing: .1em; line-height: 1.65 }
.fin-section .fin-card-name { color: var(--espresso); font-size: 23px }
.fin-section .fin-card:hover .fin-card-arrow { transform: translateX(3px) }
.fin-section .fin-disclaimer { color: var(--cognac); font-size: 13px; font-weight: 300; line-height: 1.75; margin: 36px auto 0; max-width: 720px; text-align: left }
.fin-section .fin-eyebrow { color: var(--walnut); font-size: 11px; letter-spacing: .2em; text-align: center }
.fin-section .fin-footer { color: var(--walnut); font-size: 13px; font-weight: 400; letter-spacing: .08em; margin-top: 52px; text-align: center }
.fin-section .fin-footer a { border-bottom: 1px solid var(--hunter); color: var(--walnut) }
.fin-section .fin-grid { border-left: 1px solid var(--linen); border-top: 1px solid var(--linen); display: grid; gap: 0; grid-template-columns: repeat(auto-fit,minmax(158px,1fr)); margin: 0 auto; max-width: 900px }
.fin-section .fin-subtext { color: var(--cognac); font-size: 15px; font-weight: 300; letter-spacing: .02em; line-height: 1.7; margin: 0 auto 56px; max-width: 620px }
.sitemap-container { color: var(--espresso); font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; line-height: 1.6; margin: 0 auto; max-width: 900px; padding: 40px 20px }



/* ------------------------------------------------------------------
   Promoted site-wide, 2026-08-30 (T66 final). These lived in one or a
   few pages while the class they style appears across the site -- so
   three pages had tighter margins on a phone and forty-one did not.
   Kiyan's ruling: it should apply everywhere. .hero{background} is
   deliberately NOT here; a hero photograph is page content.
   ------------------------------------------------------------------ */
.credit { background: var(--alabaster); border-top: 1px solid var(--linen); padding: 66px 0 }
.credit p { color: var(--cognac); font-size: 15px; line-height: 1.85; margin: 0 auto; max-width: 760px; text-align: left }
.cs-cta h2 { letter-spacing: -1px }
.cs-cta p { font-weight: 300 }
.cs-hero h1 { letter-spacing: -1px }
.cta .btn { border-color: var(--mushroom) }
.doctor-content h2 { text-transform: none }

.hero { align-items: center; display: flex; position: relative }
.hero h1 span { font-size: 0.7em }
.prose { background: var(--ivory); padding: 110px 0 }
.prose .container { max-width: 780px }
.prose .lede { color: var(--walnut); font-size: 18px; line-height: 1.8; margin-bottom: 34px }
.prose h2 { color: var(--espresso); font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: clamp(30px, 3.6vw, 42px); font-weight: 300; letter-spacing: .01em; line-height: 1.2; margin-bottom: 26px }
.prose h3 { color: var(--walnut); font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 25px; font-weight: 400; margin: 46px 0 14px }
.prose p { color: var(--cognac); font-size: 16px; line-height: 1.9; margin-bottom: 22px }
.prose p strong { color: var(--espresso); font-weight: 500 }
.prose p:last-child { margin-bottom: 0 }
.prose.alt { background: var(--alabaster) }
.section-title { text-transform: none }
.tech-image { box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; position: relative; transition: all 0.4s ease }
.tech-image img { display: block }

details.faq-item > summary { align-items: center; color: var(--espresso); cursor: pointer; display: flex; font-size: 18px; gap: 16px; justify-content: space-between; transition: color 0.3s ease }
details.faq-item > summary:hover { color: var(--walnut) }
details.faq-item summary { cursor: pointer; list-style: none; position: relative }
details.faq-item summary::-webkit-details-marker { display: none }

details.faq-item[open] > .faq-answer { padding-top: 20px }




/* .cs-page: the case-studies wrapper, promoted 2026-08-30 (T66). Used by that page only. */
.cs-page { max-width: 1200px; margin: 0 auto; padding: 0 40px; background: var(--alabaster) }


/* ------------------------------------------------------------------
   Promoted from /implants, 2026-08-30 (T69). shared/site.css carried
   no answer for these at all -- the FAQ toggle color, the gallery
   hover, the step-number sizing. Improvements the rest of the site
   never got.
   ------------------------------------------------------------------ */
.education h3 { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif }
.faq-answer p { padding-bottom: 25px }

.footer h3 { font-family: 'Karla', 'Noto Sans TC', sans-serif }
.footer-bottom { margin-top: 60px }
.gallery-item img { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) }
.process-step { gap: 30px }
.step-number { line-height: 1; min-width: 60px }


/* ---------- floating contact bar (#ksb): moved here from its own <style> block, 2026-10-15 ---------- */
/* Floating contact bar, added to every page by build_site.py except the four
   legal and utility pages. The consult button goes to the page's own form
   (#request) where there is one, and to /contact where there is not; the
   builder fills {{KSB_TARGET}}. Never Acuity: that is only offered after a
   form is sent. */
#ksb {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: center;
  background: #2C2220;
  border-top: 1px solid rgba(245, 242, 237, 0.12);
  font-family: 'Karla', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#ksb a {
  flex: 1 1 0; max-width: 260px; text-align: center;
  padding: 15px 18px;
  color: #F5F2ED; text-decoration: none;
  font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
#ksb a + a { border-left: 1px solid rgba(245, 242, 237, 0.10); }
#ksb a:hover { background: #F5F2ED; color: #2C2220; }
#ksb .ksb-cta { background: #FDFBF7; color: #355E3B; }
#ksb .ksb-cta:hover { background: #E8E2DB; color: #355E3B; }
#ksb .ksb-short { display: none; }


/* ---------- site footer (#ksf): moved here from its own <style> block, 2026-10-15 ---------- */
/* Site footer, added to every page by build_site.py. Rules are scoped under
   #ksf. Text is linen (12.0:1 on the chocolate ground), links and the bottom
   line mushroom (7.2:1). {{UPDATED}} is the month of the build. */
#ksf { background: #2C2220; }
#ksf .footer { background: #2C2220; color: #E8E2DB; padding: 60px 0 30px; }
#ksf .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
#ksf .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-bottom: 40px; }
#ksf .footer h3 { font-size: 16px; color: #F5F2ED; margin-bottom: 20px; font-weight: 400; letter-spacing: 1px; }
#ksf .footer-info { font-size: 13px; line-height: 1.8; }
#ksf .footer-info a { color: #B8AFA6; text-decoration: none; transition: all 0.3s ease; }
#ksf .footer-info a:hover { color: #F5F2ED; }
#ksf .footer h3.ksf-gap { margin-top: 30px; }
#ksf .footer-bottom .ksf-updated { margin-top: 10px; }
#ksf .footer-bottom { padding-top: 30px; border-top: 1px solid #4A3C31; text-align: center; font-size: 12px; color: #B8AFA6; }
#ksf .footer-bottom a { color: #B8AFA6; text-decoration: none; transition: all 0.3s ease; }
#ksf .footer-bottom a:hover { color: #F5F2ED; }


/* ---------- body text is left-aligned; labels and headings stay centered (2026-10-15) ---------- */
.reviews-pointer-text, .payment-description, .sedation-content p,
.service-card p, .lab-content p, .solution-card p, .benefit-card p { text-align: left }
.cta p { text-align: left; max-width: 720px; margin-left: auto; margin-right: auto }

/* ---------- article pages: the implants section and the root pages (D159, 2026-10-21) ---------- */
.article-body .essay-content h2 { margin-top: 70px; margin-bottom: 30px }
.article-body .essay-content a { color: var(--walnut); text-decoration: underline; text-underline-offset: 3px }
.essay-content ol.steps { margin: 30px 0; padding-left: 22px }
.essay-content ol.steps li { padding: 8px 0 8px 6px; color: var(--cognac); font-size: 15px; line-height: 1.8 }
.price-list p { color: var(--espresso); line-height: 1.7 }
.price-list p + p { margin-top: 20px }
.essay-content .table-wrap { overflow-x: auto; margin: 30px 0 }
.essay-content table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--cognac) }
.essay-content th, .essay-content td { padding: 10px 12px; border-bottom: 1px solid var(--linen); text-align: left; vertical-align: top }
.essay-content thead th { color: var(--espresso); font-weight: 500; border-bottom: 1px solid var(--mushroom) }
.essay-content tbody th { color: var(--walnut); font-weight: 500 }
.full-face-panel figcaption { font-size: 14px; color: var(--cognac); padding-top: 12px; text-align: center; line-height: 1.6 }
.essay-content p.read-more { font-size: 14px; margin-top: -12px }


/* ---------- landing pages: every treatment and guide page (Kiyan, 2026-10-21) ---------- */
.lp-hero { background: var(--espresso); color: var(--ivory); padding: 90px 0 90px }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "copy form" "aside form"; column-gap: 64px; align-items: start; max-width: 1180px; margin: 0 auto }
.lp-hero-copy { grid-area: copy }
.lp-hero-form { grid-area: form }
.lp-hero-aside { grid-area: aside }
.lp-hero-plain .lp-hero-grid { grid-template-areas: "copy aside"; align-items: center }
.lp-results-more { text-align: center; margin-top: 36px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase }
.lp-results-more a { color: var(--hunter); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px }
.lp-green .lp-results-more a, .lp-dark .lp-results-more a { color: #BFD6C1 }
.lp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 32px auto 0 }
.lp-photos figure { margin: 0 }
.lp-photos img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover }
.lp-lede a { color: #BFD6C1; text-decoration: none; border-bottom: 1px solid rgba(191,214,193,0.5); padding-bottom: 2px; white-space: nowrap }
.lp-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #BFD6C1; margin-bottom: 24px }
.lp-hero h1 { font-size: clamp(40px, 4.8vw, 62px); line-height: 1.08; color: var(--ivory); font-weight: 300; margin-bottom: 24px }
.lp-hero h1 span { display: block; font-style: italic; font-size: 0.62em; color: #D9E6DA; margin-top: 12px }
.lp-hero .lp-h1-line { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-weight: 300; letter-spacing: -0.5px; font-style: italic; font-size: calc(0.62 * clamp(40px, 4.8vw, 62px)); line-height: 1.08; color: #D9E6DA; margin: -12px 0 24px }
.lp-lede { font-size: 17px; line-height: 1.8; color: rgba(253,251,247,0.86); margin-bottom: 28px; max-width: 560px }
.lp-price { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 30px; line-height: 1.2; color: var(--ivory); margin-bottom: 10px }
.lp-monthly { font-size: 14px; line-height: 1.5; color: rgba(253,251,247,0.78); margin-bottom: 26px }
.lp-monthly strong { display: block; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: clamp(46px, 5vw, 60px); line-height: 1; font-weight: 500; color: #BFD6C1; margin-bottom: 8px }
.lp-price-more { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 22px; color: var(--ivory); margin: -8px 0 22px }
.lp-consult { display: inline-block; font-size: 15px; line-height: 1.5; color: var(--ivory); background: var(--hunter); border: 1px solid rgba(191,214,193,0.45); padding: 12px 18px; margin-bottom: 8px }
.lp-form-intro { font-size: 14px; line-height: 1.6; color: rgba(253,251,247,0.86); margin-bottom: 14px }
.lp-assurances { list-style: none; margin: 0; padding: 0 }
.lp-assurances li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 15px; line-height: 1.7; color: rgba(253,251,247,0.84) }
.lp-assurances li::before { content: ''; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: #BFD6C1 }
.lp-assurances strong { font-weight: 500; color: var(--ivory) }
.lp-trust { background: var(--hunter); padding: 20px 0 }
.lp-trust ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 38px; max-width: 1180px; margin: 0 auto }
.lp-trust li { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ivory) }
.lp-section { padding: 100px 0 }
.lp-ivory { background: var(--ivory) }
.lp-linen { background: var(--linen) }
.lp-green { background: var(--hunter); color: var(--ivory) }
.lp-dark { background: var(--espresso); color: var(--ivory) }
.lp-head { max-width: 780px; margin: 0 auto 54px; text-align: center }
.lp-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--hunter); margin-bottom: 20px }
.lp-green .lp-label, .lp-dark .lp-label { color: #BFD6C1 }
.lp-head h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.15; font-weight: 300 }
.lp-green h2, .lp-dark h2, .lp-green h3, .lp-dark h3 { color: var(--ivory) }
.lp-section .lead-card h2 { color: var(--espresso) }
.lp-intro { font-size: 16px; line-height: 1.8; color: var(--cognac); margin-top: 20px }
.lp-prose { max-width: 760px; margin: 0 auto }
.lp-prose h3 { font-size: 28px; line-height: 1.2; margin: 44px 0 16px }
.lp-prose p, .lp-split-copy p { font-size: 16px; line-height: 1.9; color: var(--cognac); margin-bottom: 22px }
.lp-green .lp-prose p, .lp-dark .lp-prose p, .lp-green .lp-intro, .lp-dark .lp-intro { color: rgba(253,251,247,0.85) }
.lp-section a { color: inherit; text-decoration: underline; text-underline-offset: 3px }
.lp-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1180px; margin: 0 auto }
.lp-section a.lp-case { display: block; text-decoration: none; background: var(--alabaster); transition: background 0.3s ease }
.lp-section a.lp-case:hover { background: var(--linen) }
.lp-case img { width: 100%; height: auto; display: block }
.lp-case-cap { display: block; padding: 16px 18px 20px; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 20px; line-height: 1.35; color: var(--espresso) }
.lp-ivory .lp-head .lp-intro { font-style: italic; color: var(--walnut) }
.lp-case-cap i { display: block; font-family: 'Karla', 'Noto Sans TC', sans-serif; font-style: normal; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hunter); margin-top: 10px }
.lp-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1140px; margin: 0 auto }
.lp-tiers-1 { grid-template-columns: minmax(0, 520px); justify-content: center }
.lp-tiers-2 { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center }
.lp-tier { background: var(--ivory); border-top: 4px solid var(--hunter); padding: 36px 32px 34px; box-shadow: 0 10px 34px rgba(0,0,0,0.05) }
.lp-tier h3 { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--hunter); font-weight: 500; margin-bottom: 18px }
.lp-tier-monthly { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; line-height: 1; color: var(--hunter); margin-bottom: 14px }
.lp-tier-monthly strong { font-size: 56px; font-weight: 500 }
.lp-tier-monthly span { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-size: 15px; color: var(--hunter); margin-left: 4px }
.lp-tier-price { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 28px; line-height: 1.1; color: var(--espresso); margin-bottom: 4px }
.lp-tier-price span { font-family: 'Karla', 'Noto Sans TC', sans-serif; font-size: 14px; color: var(--cognac) }
.lp-tier-both { font-size: 15px; color: var(--walnut); margin-bottom: 10px }
.lp-tier-terms { font-size: 12.5px; color: var(--cognac); line-height: 1.6; padding-bottom: 18px; border-bottom: 1px solid var(--linen); margin-bottom: 18px }
.lp-tier-note { font-size: 14px; line-height: 1.75; color: var(--cognac) }
.lp-foot { max-width: 760px; margin: 40px auto 0; text-align: center }
.lp-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1140px; margin: 0 auto }
.lp-section a.lp-path { display: block; text-decoration: none; background: var(--alabaster); border-top: 3px solid var(--hunter); padding: 28px 26px 26px; transition: background 0.3s ease }
.lp-section a.lp-path:hover { background: var(--linen) }
.lp-path h3 { font-size: 23px; font-weight: 400; color: var(--espresso); margin-bottom: 10px }
.lp-path p { font-size: 15px; line-height: 1.7; color: var(--cognac); margin-bottom: 14px }
.lp-path i { display: block; font-style: normal; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--hunter) }
.lp-foot p { font-size: 15px; line-height: 1.8; color: var(--walnut) }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1180px; margin: 0 auto }
.lp-split .lp-head { text-align: left; margin: 0 0 30px }
.lp-rev .lp-split-copy { order: 2 }
.lp-gallery { display: grid; gap: 12px }
.lp-gallery-2, .lp-gallery-4 { grid-template-columns: 1fr 1fr }
.lp-gallery img { width: 100%; height: auto; display: block }
.lp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 46px; max-width: 1140px; margin: 0 auto; counter-reset: lpstep }
.lp-steps li { position: relative; padding-top: 58px; border-top: 1px solid rgba(253,251,247,0.22) }
.lp-steps li::before { counter-increment: lpstep; content: counter(lpstep, decimal-leading-zero); position: absolute; top: 14px; left: 0; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 34px; line-height: 1; color: #BFD6C1 }
.lp-steps h3 { font-size: 24px; font-weight: 400; margin-bottom: 12px }
.lp-steps p { font-size: 15px; line-height: 1.8; color: rgba(253,251,247,0.85) }
.lp-ivory .lp-steps li, .lp-linen .lp-steps li { border-top-color: rgba(44,34,32,0.16) }
.lp-ivory .lp-steps li::before, .lp-linen .lp-steps li::before { color: var(--hunter) }
.lp-ivory .lp-steps p, .lp-linen .lp-steps p { color: var(--cognac) }
.lp-ivory .lp-steps-fig figcaption, .lp-linen .lp-steps-fig figcaption { color: var(--cognac) }
.lp-ivory .lp-steps-fig img, .lp-linen .lp-steps-fig img { border-color: rgba(44,34,32,0.12) }
.lp-ask { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; max-width: 1180px; margin: 0 auto }
.lp-ask h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.15; font-weight: 300; margin-bottom: 20px }
.lp-ask-copy p { font-size: 16px; line-height: 1.8; color: rgba(253,251,247,0.86); margin-bottom: 18px }
.lp-ask-call a { color: var(--ivory) }
.lp-steps-fig { max-width: 900px; margin: 0 auto 60px }
.lp-steps-fig img { width: 100%; height: auto; display: block; border: 1px solid rgba(253,251,247,0.2) }
.lp-steps-fig figcaption { font-size: 14px; line-height: 1.6; color: rgba(253,251,247,0.78); margin-top: 12px; text-align: center }
.lp-doctor { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 64px; align-items: center; max-width: 1100px; margin: 0 auto }
.lp-doctor-photo img { width: 100%; height: auto; display: block }
.lp-doctor .lp-head { text-align: left; margin: 0 0 28px }
.lp-doctor-copy p { font-size: 16px; line-height: 1.9; color: rgba(253,251,247,0.85); margin-bottom: 22px }
.lp-doctor-link { font-size: 12px; letter-spacing: 2px; text-transform: uppercase }
.lp-section .lp-doctor-link a { color: #BFD6C1; text-decoration: none; border-bottom: 1px solid rgba(191,214,193,0.5); padding-bottom: 3px }

.lp-table-wrap { max-width: 760px; margin: 0 auto; overflow-x: auto }
.lp-price-table { width: 100%; border-collapse: collapse; background: var(--ivory); border-top: 4px solid var(--hunter); box-shadow: 0 10px 34px rgba(0,0,0,0.05) }
.lp-price-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hunter); text-align: left; vertical-align: bottom; padding: 20px 24px 14px; border-bottom: 1px solid var(--linen) }
.lp-price-table th span { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--walnut) }
.lp-price-table td { padding: 16px 24px; border-bottom: 1px solid var(--linen); font-size: 16px; color: var(--espresso) }
.lp-price-table td:first-child { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 22px }
.lp-price-table tr:last-child td { border-bottom: 0 }
.lp-table-note { margin-top: 18px; text-align: center; font-size: 15px; color: var(--walnut) }

.lp-quote { margin: 30px 0 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--hunter) }
.lp-quote p { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 24px; line-height: 1.45; font-style: italic; color: var(--espresso) }
.lp-quote cite { display: block; margin-top: 10px; font-size: 12px; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--walnut) }
.lp-video { display: block; width: 100%; height: auto }
.lp-table-wide { max-width: 1140px }
.lp-price-table td a { color: var(--hunter) }

@media (max-width: 1024px) {
  .doctor-grid, .tech-grid { grid-template-columns: 1fr; gap: 60px }
  .footer-grid { grid-template-columns: 1fr; text-align: center }
  .gallery-grid, .lab-grid { grid-template-columns: repeat(2, 1fr) }
  .solutions-grid { grid-template-columns: repeat(2, 1fr) }
  
  .cs-hero { grid-template-columns: 1fr; gap: 30px }
  .cs-why { grid-template-columns: 1fr; gap: 50px }
  .cs-why-image { position: static; max-width: 420px }
  .doctor-content { padding-left: 0 }
}

@media (max-width: 968px) {
  .benefits-grid { grid-template-columns: 1fr }
  .container, .container-narrow { padding: 0 30px }
  .container, .container-wide { padding: 0 30px }
  .doctor-grid { grid-template-columns: 1fr; gap: 60px; padding: 0 30px }
  .footer-grid { grid-template-columns: 1fr; gap: 40px }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) }
  .procedures-grid { grid-template-columns: repeat(2, 1fr) }
  .rv-cb:not(:checked) ~ .rv-grid .rv-card:nth-child(n+9) { display: none }
  .rv-grid { grid-template-columns: repeat(2, 1fr) }
  .safety-grid { grid-template-columns: 1fr; gap: 40px }
  .services-grid { grid-template-columns: 1fr }
  .stats-grid { grid-template-columns: repeat(2, 1fr) }
  .tech-grid { grid-template-columns: 1fr; gap: 40px }
  .case-details { grid-template-columns: repeat(2, 1fr) }
  
  .cs-hero, .cs-cta { padding-left: 30px; padding-right: 30px }
  .doctor-content { padding-left: 0 }
  .rv-stats { grid-template-columns: repeat(3, 1fr); gap: 14px }
  .sedation-benefits { grid-template-columns: 1fr }
}

@media (max-width: 968px) {
  .container { padding: 0 30px }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px }
  .kc-container { padding: 0 22px }
  .kc-details-grid { grid-template-columns: 1fr; gap: 44px }
  .kc-hero-grid { grid-template-columns: 1fr; gap: 44px }
  .lead-grid { grid-template-columns: 1fr; gap: 32px }
  .hero { padding: 30px 0 50px; min-height: auto }
  .hero-copy { order: 2; padding: 34px 24px }
  .hero-copy h1 { font-size: 34px }
  .kc-details { padding: 60px 0 }
  .kc-form-card { order: 1; padding: 32px 24px 36px }
  .kc-hero { padding: 34px 0 50px }
  .kc-hero h1 { font-size: 34px }
  .kc-hero-copy { order: 2 }
  .kc-row { grid-template-columns: 1fr; gap: 0 }
  .lead-card { order: 1; padding: 30px 22px 34px }
  .lead-pitch { order: 2 }
  .lead-pitch h2 { font-size: 30px }
  .lead-row { grid-template-columns: 1fr; gap: 0 }
  .lead-section { padding: 50px 0 }
}

@media (max-width: 900px) {
  #ksf .container-wide { padding: 0 24px; }
  #ksf .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .lp-hero { padding: 56px 0 60px }
  .lp-hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "form" "aside"; row-gap: 36px }
  .lp-hero-plain .lp-hero-grid { grid-template-areas: "copy" "aside" }
  .lp-split { grid-template-columns: 1fr; gap: 40px }
  .lp-rev .lp-split-copy { order: 0 }
  .lp-results, .lp-tiers, .lp-paths { grid-template-columns: 1fr }
  .lp-photos { grid-template-columns: 1fr }
  .lp-ask, .lp-doctor { grid-template-columns: 1fr; gap: 36px }
  .lp-doctor-photo { max-width: 340px }
  .lp-steps { grid-template-columns: 1fr; gap: 30px }
  .lp-section { padding: 70px 0 }
  .lp-head { margin-bottom: 38px }
  .lp-trust ul { gap: 8px 22px }
}

@media (max-width: 768px) {
  
  .container, .container-wide { padding: 0 20px }
  .cs-grid { grid-template-columns: repeat(2, 1fr) }
  .solutions-grid, .gallery-grid, .lab-grid { grid-template-columns: 1fr }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px }
  
  .comparison-header-row, .comparison-row { display: grid; grid-template-columns: 120px repeat(3, 100px); min-width: 420px }
  .comparison-table { display: block; overflow-x: auto }

  .cs-cta { padding: 90px 24px; margin: 0 -24px }
  
  .cs-hero { padding: 90px 24px 70px; margin: 0 -24px }
  .education, .doctor, .solutions, .process, .gallery, .lab-artistry, .technology, .payment-plans, .faq, .cta { padding: 80px 0 }
  .hero { min-height: auto; padding: 100px 0 80px }
  .hero h1 { font-size: 42px }
  
  .section-title { font-size: 32px }
  .top-carousel-nav.next { right: 10px }
  .top-carousel-nav.prev { left: 10px }
}

@media (max-width: 768px) {
  .prose { padding: 72px 0 }
  .prose h3 { margin-top: 34px }
}

@media (max-width: 768px) {
  .cs-page { padding: 0 24px }
}

@media (max-width: 768px) {
  .education, .doctor, .solutions, .process, .gallery, .lab-artistry, .technology, .payment-plans, .faq, .cta { padding: 80px 0 }
}

@media (max-width: 760px) {
  .lp-table-wide .lp-price-main thead { display: none }
  .lp-table-wide .lp-price-main, .lp-table-wide .lp-price-main tbody, .lp-table-wide .lp-price-main tr, .lp-table-wide .lp-price-main td { display: block; width: 100% }
  .lp-table-wide .lp-price-main tr { padding: 16px 18px; border-bottom: 1px solid var(--linen) }
  .lp-table-wide .lp-price-main td { padding: 3px 0; border: 0 }
  .lp-table-wide .lp-price-main td:empty { display: none }
  .lp-table-wide .lp-price-main td + td::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hunter) }
}

@media (max-width: 680px) {
  .ab-creds ul { columns: 1 }
  .ab-cta { margin: 0 -24px; padding: 80px 24px }
  .pol-header { padding: 80px 0 40px }
}

@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 20px }
  .container, .container-wide { padding: 0 20px }
  .doctor-grid { padding: 0 20px }
  .gallery-grid { grid-template-columns: 1fr }
  .procedures-grid { grid-template-columns: 1fr }
  .rv-cb:not(:checked) ~ .rv-grid .rv-card:nth-child(n+7) { display: none }
  .rv-grid { grid-template-columns: 1fr; gap: 20px }
  .btn { width: 100%; text-align: center; padding: 14px 30px; font-size: 12px }
  .carousel-nav { width: 32px; height: 32px }
  .carousel-nav.next { right: 8px }
  .carousel-nav.prev { left: 8px }
  .case-details { grid-template-columns: 1fr 1fr; gap: 20px }
  .case-showcase, .essay-section { padding: 60px 0 }

  .cs-attribution { font-size: 13px; line-height: 1.7 }
  .cs-cta { padding: 100px 20px }
  .cs-cta h2 { font-size: 32px }
  .cs-cta-buttons a { width: 100%; text-align: center }
  
  .cs-hero { padding: 80px 20px 60px }
  .cs-hero h1 { font-size: 32px }
  .cs-hero, .cs-cta { padding-left: 20px; padding-right: 20px }
  .cs-section-desc { font-size: 14px; line-height: 1.7 }
  .cs-section-title { font-size: 26px }
  .cta { padding: 100px 0 120px }
  .cta h2 { font-size: 36px}
  .cta p { font-size: 16px; padding: 0 10px }
  .detail-value { font-size: 22px }
  .cc-monthly { font-size: 44px }
  .doctor { padding: 80px 0 }
  .doctor, .services, .process, .gallery, .office, .faq, .cta, .education { padding: 80px 0 }
  .doctor, .services, .process, .technology, .sedation, .office, .faq, .cta { padding: 80px 0 }
  .doctor, .services, .technology, .process, .gallery, .faq, .cta { padding: 80px 0 }
  .doctor-content h2 { font-size: 36px }
  .education h2 { font-size: 32px }
  .education h3 { font-size: 24px }
  .education-content h2 { font-size: 32px }
  .education-content h3 { font-size: 24px }
  .education-section { padding: 60px 0 }
  .essay-content blockquote { padding: 20px 25px; font-size: 18px }
  .essay-content h2 { font-size: 28px }
  .essay-content h3 { font-size: 22px }
  .essay-content p:first-of-type::first-letter { font-size: 56px }
  .hero { padding: 80px 0 60px; min-height: auto }
  .hero h1 { font-size: 32px; line-height: 1.1; margin-bottom: 20px }
  .hero h1 span { margin-top: 10px; font-size: 0.85em }
  
  .hero-badge { font-size: 10px; letter-spacing: 2px; margin-bottom: 30px }
  
  .hero-subtitle { font-size: 15px; margin-bottom: 35px; line-height: 1.6 }
  .office-slides { height: 400px }
  .page-header { padding: 80px 0 60px }
  .page-header h1 { font-size: 32px }
  .process-step { margin-bottom: 40px }
  .rv-clamp { -webkit-line-clamp: 6; line-clamp: 6 }
  .rv-filter { flex-wrap: nowrap; gap: 6px }
  .rv-filter button { padding: 9px 6px; font-size: 9px; letter-spacing: 0.5px; white-space: nowrap; flex: 1 1 0; min-width: 0 }
  .rv-jump { gap: 16px; padding: 12px 0 }
  .rv-showall { max-width: 100% }
  .rv-year { font-size: 22px }
  .section-desc { font-size: 16px }
  .section-label { font-size: 10px }
  .section-title { font-size: 32px; line-height: 1.2 }
  .stat-label { font-size: 10px }
  .stat-number { font-size: 36px }
  .stats { padding: 60px 0 }
  .step-content { padding-left: 25px }
  .step-content h3 { font-size: 20px }
  
}

@media (max-width: 640px) {
  .doctor, .services, .process, .gallery, .office, .faq, .cta, .education { padding: 80px 0 }
  .doctor, .services, .process, .technology, .sedation, .office, .faq, .cta { padding: 80px 0 }
  .doctor, .services, .technology, .process, .gallery, .faq, .cta { padding: 80px 0 }
}

@media (max-width: 640px) {
  .container { padding: 0 20px }
  .cta h2 { padding: 0 10px }
  .doctor, .services, .process, .gallery, .office, .faq, .cta { padding: 80px 0 }
  .hero h1 span { line-height: 1.3 }
  .process, .faq, .cta { padding: 80px 0 }
  .services, .cta, .education { padding: 80px 0 }
}

@media (max-width: 600px) {
  .essay-content table { font-size: 13px }
  .essay-content th, .essay-content td { padding: 8px 6px }
}

@media (max-width: 600px) {
  .lp-price-table th, .lp-price-table td { padding: 12px 10px; font-size: 14px }
  .lp-price-table td:first-child { font-size: 18px }
}

@media (max-width: 560px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr) }
  .cs-card p { display: none }
  .cs-grid-header { flex-direction: column; gap: 6px }
  #ksb .ksb-cta .ksb-full, #ksb .ksb-cta .ksb-short { color: var(--hunter) }
#ksb .ksb-full { display: none }
  #ksb .ksb-short { display: inline }
  #ksb a { font-size: 10px; letter-spacing: 1px; padding: 13px 8px }

}

@media (max-width:560px) {
  .fin-card { flex:1 1 45% }
}

@media (max-width:560px) {
  .fin-section .fin-card { padding: 26px 12px 24px }
  .fin-section .fin-grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)) }
}

@media (max-width: 560px) {
  #ksb a { font-size: 10px; letter-spacing: 1px; padding: 13px 8px; }
  #ksb .ksb-full { display: none; }
  #ksb .ksb-short { display: inline; }
}

/* ---------- phones: shorter pages, form first (Kiyan, 2026-10-26) ---------- */
@media (max-width: 640px) {
  .lp-section { padding-top: 44px !important; padding-bottom: 44px !important }
  .lp-hero { padding-top: 28px !important; padding-bottom: 28px !important }
  .lp-hero-aside { display: none !important }
  .lp-results { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important }
  .lp-case { margin: 0 !important }
  .lp-case * { font-size: 13px !important; line-height: 1.35 !important }
  .lp-case img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover }
  .lp-gallery { max-width: 62% !important; margin: 16px auto 0 !important }
  .lp-split { gap: 16px !important }
  .lp-steps li { padding-top: 14px !important; padding-bottom: 14px !important }
  .m-more { display: none }
  .m-open > .m-more { display: block }
  .m-more-btn { background: none; border: 0; padding: 6px 0; font: inherit; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; text-decoration: underline; color: inherit; cursor: pointer }
  .lead-row { grid-template-columns: 1fr 1fr; gap: 10px }
  .lead-field { margin-bottom: 10px !important }
  form:not(.m-go) > .m-step2 { display: none !important }
  body:has(#ksb) .lp-section.lp-green:has(.lp-ask) { display: none !important }
  .doctor, .essay-section, .case-showcase, .cta, .cs-services { padding-top: 40px !important; padding-bottom: 40px !important }
  .doctor-image, .doctor-image-frame { max-width: 55% !important; margin: 0 auto !important }
  .doctor-grid { gap: 20px !important }
  .case-details { padding: 20px 0 !important; margin-bottom: 24px !important }
  .faq-item summary { padding-top: 12px !important; padding-bottom: 12px !important }
  .faq-item { margin: 0 !important }
  .faq-content h2 { margin-bottom: 12px !important }
}
#cx-hero { position: relative; overflow: hidden; background: var(--espresso); color: var(--ivory); min-height: 88vh; display: flex; align-items: flex-end }
#cx-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50% }
#cx-hero .cx-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(44, 34, 32, .85) 0%, rgba(44, 34, 32, .45) 45%, rgba(44, 34, 32, .05) 75%) }
#cx-hero .cx-inner { position: relative; max-width: 1240px; width: 100%; margin: 0 auto; padding: 120px 40px 60px }
#cx-hero .cx-copy { max-width: 720px }
#cx-hero .cx-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--linen); margin-bottom: 24px }
#cx-hero h1 { font-size: clamp(40px, 5.2vw, 70px); line-height: 1.05; font-weight: 300; color: var(--ivory); margin-bottom: 24px }
#cx-hero .cx-sub { font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: clamp(20px, 2vw, 25px); line-height: 1.55; color: var(--alabaster); margin-bottom: 18px; max-width: 620px }
#cx-hero .cx-consult { font-size: 14px; line-height: 1.6; color: var(--linen); margin-bottom: 30px; max-width: 560px }
#cx-hero .cx-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px }
#cx-hero .cx-btn { display: inline-block; padding: 16px 30px; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ivory); color: var(--ivory) }
#cx-hero .cx-solid { background: var(--hunter); border-color: var(--hunter) }
#cx-hero .cx-ghost { background: transparent }
#cx-hero .cx-caption { font-size: 12px; letter-spacing: 1px; color: var(--linen) }
.cx-formband { background: var(--linen) }
.cx-fb-in { max-width: 1240px; margin: 0 auto; padding: 70px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center }
.cx-fb-copy h2 { font-weight: 300; font-size: 46px; color: var(--espresso); margin-bottom: 18px }
.cx-fb-copy p { font-size: 16px; line-height: 1.7; color: var(--walnut); margin-bottom: 12px }
.cx-proof { background: var(--espresso); color: var(--ivory) }
.cx-proof-in { max-width: 1240px; margin: 0 auto; padding: 26px 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center }
.cx-proof b { display: block; font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-weight: 300; font-size: 34px; line-height: 1.1 }
.cx-proof span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--linen) }
@media (max-width: 900px) { #cx-hero { min-height: 78vh } #cx-hero .cx-shade { background: linear-gradient(180deg, rgba(44, 34, 32, .3) 0%, rgba(44, 34, 32, .6) 45%, rgba(44, 34, 32, .95) 100%) } #cx-hero .cx-inner { padding: 120px 22px 34px } #cx-hero .cx-btn { flex: 1 1 100%; text-align: center } .cx-fb-in { grid-template-columns: 1fr; padding: 40px 16px; gap: 24px } .cx-fb-copy h2 { font-size: 36px } .cx-proof-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 18px; gap: 18px } .cx-proof b { font-size: 28px } }
body .tone-ivory { background: var(--ivory) }
body .tone-linen { background: var(--linen) }
.lead-pitch .case-cost { max-width: none; margin: 32px 0 0; padding-top: 28px }
.lead-pitch .cc-monthly { font-size: 48px }
.cs-services .updated-date { margin-top: 40px }

html { font-synthesis: weight; }