/* ==========================================================================
   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: 'Amiri', serif (display) / 'IBM Plex Sans Arabic', 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: 'IBM Plex Sans Arabic', sans-serif; font-weight: 300; line-height: 1.8; color: var(--espresso); background: var(--ivory); }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: 'Amiri', serif; font-weight: 400; }
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;  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-right: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: 'Amiri', 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: 'Amiri', 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; right: 0; left: 0; z-index: 1000; display: flex; justify-content: center; background: #2C2220; border-top: 1px solid rgba(245, 242, 237, 0.12); font-family: 'IBM Plex Sans Arabic', 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;  text-transform: uppercase; transition: background 0.25s ease, color 0.25s ease }
#ksb a + a { border-right: 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: right }
.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;  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-right: 20px; position: relative }
.ab-creds li::before { content: ''; position: absolute; right: 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;  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);  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;  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;  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;  margin-bottom: 34px }
.ab-name { font-size: 13px; font-weight: 500;  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;  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 { left: 12px }
.carousel-nav.prev { right: 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-left: 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-left: 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-left: 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-right: 20px }
.credential-list li::before { content: ''; position: absolute; right: 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;  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;  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;  text-transform: uppercase; transition: all 0.3s ease; font-family: 'Amiri', 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: 'IBM Plex Sans Arabic', 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;  text-transform: uppercase; color: var(--cognac); margin-bottom: 24px; font-weight: 400 }
.cs-hero-meta { font-size: 13px; font-weight: 400; color: var(--cognac); }
.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: left; font-size: 12px; color: var(--cognac);  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;  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;  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;  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;  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;  color: var(--espresso); margin-bottom: 40px; line-height: 1.2 }
.cs-why-content h3 { font-size: 13px; font-weight: 400;  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;  text-transform: uppercase; color: var(--cognac) }
.detail-value { font-family: 'Amiri', 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-right: 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: 'Amiri', 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-right: 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-right: 3px solid var(--hunter); font-family: 'Amiri', 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: 'Amiri', serif; font-size: 72px; float: right; line-height: 0.8; padding-left: 12px; color: var(--walnut) }
.essay-content ul { list-style: none; margin: 30px 0; padding-right: 0 }
.essay-content ul li { padding: 10px 25px 10px 0; position: relative; color: var(--cognac); font-size: 15px }
.essay-content ul li::before { content: '\2014'; position: absolute; right: 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: 'Amiri', 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: 'Amiri', 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 0 24px 44px; font-family: 'Amiri', 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; left: 6px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--taupe); font-family: 'Amiri', 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-left: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:'Amiri', serif; font-size:22px; font-weight:400;  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:'Amiri', serif; font-size:clamp(30px,4.5vw,48px); font-weight:300; text-align:center;  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: 'Amiri', serif }
.fin-section { font-family:'Amiri', 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; }
.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
   \3c 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;  text-transform: uppercase; color: var(--cognac); margin-bottom: 40px; font-weight: 400 }

.hero-copy { text-align: right; 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; right: 0; left: 0; height: 1px; background: linear-gradient(to left, 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-right: 26px; margin-bottom: 16px; font-size: 15px; color: var(--walnut) }
.kc-assurances li::before { content: ''; position: absolute; right: 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;  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-right: 2px solid #8B3A2F; background: #F7EFEC; font-size: 13px; color: #6B2C23; line-height: 1.6 }
.kc-eyebrow { font-size: 11px;  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: 'IBM Plex Sans Arabic', sans-serif; font-weight: 300; font-size: 16px; color: var(--espresso);  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;  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% - (100% - 18px)) 21px, calc(100% - (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: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; font-size: 12px;  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-right: 24px; margin-bottom: 12px; font-size: 15px; line-height: 1.7; color: var(--walnut) }
.lead-assurances li::before { content: ''; position: absolute; right: 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: 'Amiri', serif; font-size: 32px; font-weight: 400; line-height: 1.15; color: var(--espresso); margin-bottom: 10px; text-transform: none; }
.lead-error { display: none; margin-top: 16px; padding: 13px 15px; border-right: 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: 'IBM Plex Sans Arabic', sans-serif; font-weight: 300; font-size: 16px; color: var(--espresso);  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;  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: right }
.lead-pitch .section-label { font-size: 11px;  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: 'Amiri', serif; font-size: clamp(32px, 3.4vw, 44px); font-weight: 400; line-height: 1.15;  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: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; font-size: 12px;  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; }
.page-header .subtitle { font-size: 18px; color: var(--cognac); font-style: italic; font-family: 'Amiri', 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: 'Amiri', 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: right }
.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;  margin: 56px 0 20px }
.pol-body h3 { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 13px; font-weight: 600;  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-right: 22px; position: relative; margin-bottom: 12px }
.pol-body li::before { content: ''; position: absolute; right: 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;  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: 'IBM Plex Sans Arabic', sans-serif; font-size: 11px; font-weight: 500;  text-transform: uppercase; color: var(--cognac)}
.procedure-highlight { background: var(--alabaster); padding: 40px; margin: 40px 0 }
.procedure-highlight h4 { font-family: 'Amiri', 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; right: 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;  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: 'IBM Plex Sans Arabic', sans-serif; font-size: 11px;  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: 'IBM Plex Sans Arabic', sans-serif; font-weight: 400; font-size: 11px;  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;  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; }
.rv-name { color: var(--espresso); font-weight: 400 }
.rv-rm { display: inline-block; font-size: 11px;  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;  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: right; font-size: 12px; color: var(--taupe); max-width: 740px; margin: 0 auto 50px }
.rv-stars { color: var(--hunter); font-size: 16px;  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;  font-size: 10px; color: var(--cognac); margin-top: 10px }
.rv-stat-num { font-family: 'Amiri', 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 30px 12px 0; color: var(--cognac); font-size: 15px; position: relative; line-height: 1.6 }
.safety-list li::before { content: '\2713'; position: absolute; right: 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;  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: right }
.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: 'Amiri', serif; font-size: 36px; color: var(--walnut); margin-bottom: 10px }
.solution-subtitle { font-size: 12px; color: var(--cognac);  text-transform: uppercase }
.solutions { padding: 120px 0; background: var(--alabaster) }
.stat-item { padding: 20px }
.stat-label { font-size: 11px;  text-transform: uppercase; color: var(--cognac) }
.stat-number { font-family: 'Amiri', 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-right: 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: 'Amiri', 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-right: 25px; position: relative }
.tech-features li::before { content: '\2713'; position: absolute; right: 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 { left: 16px }
.top-carousel-nav.prev { right: 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 30px 10px 0; position: relative; color: var(--espresso); font-size: 16px }
.treatment-list li::before { content: '\2014'; position: absolute; right: 0; top: 10px; color: var(--walnut) }
.treatment-plan-content h2 { font-family: 'Amiri', 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);  margin-top: 20px }
.urgent-triage { background: var(--espresso); color: var(--alabaster); padding: 28px 0 }

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

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

@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-right: 0 }
}

@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;  padding: 13px 8px }

}

@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 { left: 8px }
  .carousel-nav.prev { right: 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 { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 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 }
  .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;  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;  white-space: nowrap; flex: 1 1 0; min-width: 0 }
  .rv-jump { gap: 16px; padding: 12px 0 }
  .rv-showall { max-width: 100% }
  .rv-stats { grid-template-columns: 1fr }
  .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-right: 25px }
  .step-content h3 { font-size: 20px }
  
}

@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: 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 { left: 10px }
  .top-carousel-nav.prev { right: 10px }
}

@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: 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 { margin-right: -30px; margin-left: -30px; padding-right: 30px; padding-left: 30px }
  .doctor-content { padding-right: 0 }
  .rv-stats { grid-template-columns: repeat(3, 1fr); gap: 14px }
  .sedation-benefits { grid-template-columns: 1fr }
}

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

/* 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(100% - (82%)) 21px, calc(100% - (87%)) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat }

/* ------------------------------------------------------------------
   Promoted from page \3c 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-left: 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;  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;  margin-top: -4px }
.fin-section .fin-card-label { color: var(--cognac); font-size: 12px; font-weight: 400;  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: right }
.fin-section .fin-eyebrow { color: var(--walnut); font-size: 11px;  text-align: center }
.fin-section .fin-footer { color: var(--walnut); font-size: 13px; font-weight: 400;  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-right: 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;  line-height: 1.7; margin: 0 auto 56px; max-width: 620px }
.sitemap-container { color: var(--espresso); font-family: 'Amiri', serif; line-height: 1.6; margin: 0 auto; max-width: 900px; padding: 40px 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:560px) {
  .fin-section .fin-card { padding: 26px 12px 24px }
  .fin-section .fin-grid { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)) }
}

/* ------------------------------------------------------------------
   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: right }
.cs-cta h2 { }
.cs-cta p { font-weight: 300 }
.cs-hero h1 { }
.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: 'Amiri', serif; font-size: clamp(30px, 3.6vw, 42px); font-weight: 300;  line-height: 1.2; margin-bottom: 26px }
.prose h3 { color: var(--walnut); font-family: 'Amiri', 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 }
@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: 768px) {
  .prose { padding: 72px 0 }
  .prose h3 { margin-top: 34px }
}
@media (max-width: 968px) {
  .container { padding: 0 30px }
}

/* .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) }
@media (max-width: 768px) {
  .cs-page { padding: 0 24px }
}

/* ------------------------------------------------------------------
   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: 'Amiri', serif }
.faq-answer p { padding-bottom: 25px }

.footer h3 { font-family: 'IBM Plex Sans Arabic', 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 }
@media (max-width: 768px) {
  .education, .doctor, .solutions, .process, .gallery, .lab-artistry, .technology, .payment-plans, .faq, .cta { padding: 80px 0 }
}

/* ---------- floating contact bar (#ksb): moved here from its own \3c 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; right: 0; left: 0; z-index: 1000;
  display: flex; justify-content: center;
  background: #2C2220;
  border-top: 1px solid rgba(245, 242, 237, 0.12);
  font-family: 'IBM Plex Sans Arabic', -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;  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
#ksb a + a { border-right: 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; }
@media (max-width: 560px) {
  #ksb a { font-size: 10px;  padding: 13px 8px; }
  #ksb .ksb-full { display: none; }
  #ksb .ksb-short { display: inline; }
}

/* ---------- site footer (#ksf): moved here from its own \3c 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;  }
#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; }
@media (max-width: 900px) {
  #ksf .container-wide { padding: 0 24px; }
  #ksf .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- 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: right }
.cta p { text-align: right; max-width: 720px; margin-right: auto; margin-left: 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-right: 22px }
.essay-content ol.steps li { padding: 8px 6px 8px 0; 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: right; 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 }
@media (max-width: 600px) {
  .essay-content table { font-size: 13px }
  .essay-content th, .essay-content td { padding: 8px 6px }
}

/* ---------- 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;  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;  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-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: 'Amiri', 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: 'Amiri', serif; font-size: clamp(46px, 5vw, 60px); line-height: 1; font-weight: 500; color: #BFD6C1; margin-bottom: 8px }
.lp-price-more { font-family: 'Amiri', 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-right: 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; right: 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;  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;  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 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: 'Amiri', 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: 'IBM Plex Sans Arabic', sans-serif; font-style: normal; font-size: 11px;  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: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px;  text-transform: uppercase; color: var(--hunter); font-weight: 500; margin-bottom: 18px }
.lp-tier-monthly { font-family: 'Amiri', 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: 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; color: var(--hunter); margin-right: 4px }
.lp-tier-price { font-family: 'Amiri', serif; font-size: 28px; line-height: 1.1; color: var(--espresso); margin-bottom: 4px }
.lp-tier-price span { font-family: 'IBM Plex Sans Arabic', 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;  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: right; 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; right: 0; font-family: 'Amiri', 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: right; 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;  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 }
@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-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 }
}
.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;  text-transform: uppercase; color: var(--hunter); text-align: right; 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;  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: 'Amiri', 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) }
@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 }
}
.lp-quote { margin: 30px 0 0; padding: 2px 22px 2px 0; border-right: 2px solid var(--hunter) }
.lp-quote p { font-family: 'Amiri', 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;  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: 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;  text-transform: uppercase; color: var(--hunter) }
}