/* =========================================================
   Luma Dental Studio — v2 "calm studio" stylesheet
   Bootstrap 5.3 underneath; brand tokens live in :root.
   ========================================================= */
:root{
  --ink:#3a322d;          /* text, primary buttons, dark band */
  --ink-soft:#6b625c;     /* secondary text */
  --gold:#c6a36a;         /* logo gold: accents, marks, rules */
  --gold-deep:#8a6a37;    /* links and small gold text (passes contrast on white) */
  --mist:#eef1ec;         /* calm sage surface */
  --mist-deep:#dfe5dd;    /* hover/selected surface */
  --sand:#f6f2ec;         /* warm surface for cards on mist */
  --line:#e4ded6;         /* hairlines */
  --white:#ffffff;
  --r-sm:12px;
  --r-md:20px;
  --r-lg:32px;
  --font:'Albert Sans',system-ui,sans-serif;
  --container:1200px;

  --bs-body-font-family:var(--font);
  --bs-body-color:var(--ink);
  --bs-body-bg:#fff;
  --bs-link-color:var(--gold-deep);
  --bs-link-color-rgb:138,106,55;
  --bs-link-hover-color:var(--ink);
  --bs-link-hover-color-rgb:58,50,45;
}

html{scroll-behavior:smooth;scroll-padding-top:110px}
html,body{overflow-x:clip}
h1,h2,h3,h4,p,li,a,dd,td,th{overflow-wrap:break-word}
body{font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);line-height:1.15;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,1.7rem + 3vw,3.75rem);font-weight:300;letter-spacing:-.025em;text-wrap:balance}
h2{text-wrap:balance}
h2{font-size:clamp(1.9rem,1.45rem + 1.7vw,2.75rem);font-weight:300;margin-bottom:1rem}
h3{font-size:1.28rem;font-weight:600;letter-spacing:-.005em}
h4{font-size:1.08rem;font-weight:600}
p{margin-bottom:1.1rem}
a{color:var(--gold-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.container-luma{max-width:calc(var(--container) + 3rem);margin-inline:auto;padding-inline:1.5rem}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:2000;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:38em}
.muted{color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn-luma,.btn-luma-outline,.btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font);font-size:16px;font-weight:600;
  padding:.8rem 1.5rem;border-radius:999px;text-decoration:none;line-height:1.2;border:1.5px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn-luma{background:var(--ink);color:#fff}
.btn-luma:hover,.btn-luma:focus-visible{background:var(--gold-deep);color:#fff}
.btn-luma-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-luma-outline:hover,.btn-luma-outline:focus-visible{background:var(--ink);color:#fff}
.btn-luma-outline.on-dark{color:#fff;border-color:rgba(255,255,255,.7)}
.btn-luma-outline.on-dark:hover{background:#fff;color:var(--ink)}
.btn-quiet{padding:.55rem .2rem;color:var(--ink);font-weight:600}
.btn-quiet:hover{color:var(--gold-deep)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px}
.brand img{height:44px;width:auto;display:block}
.main-nav{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.main-nav>li{position:relative}
.main-nav>li.has-mega{position:static}
.main-nav>li>a,.main-nav>li>button{display:flex;align-items:center;gap:.35rem;font-size:16px;font-weight:500;color:var(--ink);padding:.6rem .9rem;text-decoration:none;background:none;border:0;border-radius:999px;font-family:var(--font)}
.main-nav>li>a:hover,.main-nav>li>button:hover,.main-nav>li.open>button{background:var(--mist)}
.main-nav>li.active>a,.main-nav>li.active>button{color:var(--gold-deep)}
.main-nav .bi-chevron-down{font-size:.7rem;transition:transform .2s}
.main-nav>li.open .bi-chevron-down{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:.6rem}
.header-actions .phone{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;font-weight:600;padding:.6rem .8rem;border-radius:999px}
.header-actions .phone:hover{background:var(--mist)}
.header-actions .phone i{color:var(--gold-deep)}
.header-actions .btn-luma{padding:.7rem 1.3rem}
.dropdown-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 24px 60px -20px rgba(58,50,45,.28);padding:.7rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
.main-nav>li:hover>.dropdown-panel,.main-nav>li:focus-within>.dropdown-panel,.main-nav>li.open>.dropdown-panel{opacity:1;visibility:visible;transform:none}
.dropdown-panel a{display:block;padding:.5rem .8rem;color:var(--ink);font-size:15px;text-decoration:none;border-radius:10px}
.dropdown-panel a:hover{background:var(--mist)}
.dropdown-panel a.dd-lead{font-weight:600}
.mega{left:50%;transform:translate(-50%,6px);width:min(1080px,94vw);padding:1.6rem;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:1.6rem}
.main-nav>li:hover>.mega,.main-nav>li:focus-within>.mega,.main-nav>li.open>.mega{transform:translate(-50%,0)}
.mega .mega-col>a.mega-head{font-weight:600;font-size:15px;padding:.3rem .6rem .5rem;color:var(--ink)}
.mega .mega-col a{padding:.32rem .6rem;font-size:14.5px;color:var(--ink-soft)}
.mega .mega-col a:hover{color:var(--ink)}
.mega .mega-general{columns:2;column-gap:.6rem}
.mega .mega-general a{break-inside:avoid}
.mega .mega-stack{display:flex;flex-direction:column;gap:1rem}
.mega .mega-all{margin-top:auto;background:var(--mist);border-radius:var(--r-sm);padding:1rem}
.mega .mega-all a{color:var(--ink);font-weight:600;padding:0}
.nav-toggle{display:none;background:var(--mist);border:0;width:46px;height:46px;border-radius:50%;font-size:1.5rem;color:var(--ink)}
@media (max-width:1139.98px){
  .main-nav{display:none}
  .nav-toggle{display:inline-grid;place-items:center}
  .bar{min-height:72px}
  .brand img{height:36px}
}
@media (max-width:767.98px){.header-actions .phone span,.header-actions .btn-luma{display:none}}
.offcanvas.mobile-nav{--bs-offcanvas-width:min(390px,92vw);background:#fff}
.mobile-nav .offcanvas-header{border-bottom:1px solid var(--line)}
.mobile-nav .accordion-button{font-weight:600;color:var(--ink);background:#fff;box-shadow:none;font-size:17px}
.mobile-nav .accordion-item{border:0;border-bottom:1px solid var(--line)}
.mobile-nav .accordion-body{padding:.2rem 1.25rem 1rem}
.mobile-nav .accordion-body a{display:block;padding:.35rem 0;color:var(--ink);text-decoration:none;font-size:16px}
.mobile-nav .accordion-body a.sub{padding-left:1rem;font-size:15px;color:var(--ink-soft)}
.mobile-nav .plain-link{display:block;padding:1rem 1.25rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- Arch motif (from the arched shelving in the studio) ---------- */

/* ---------- Sections ---------- */
.section{padding:6rem 0}
.section-mist{background:var(--mist)}
.section-dark{background:var(--ink);color:#efe9e2}
.section-dark h2,.section-dark h3{color:#fff}
.section-head{max-width:720px;margin-bottom:3rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{color:var(--ink-soft);font-size:1.1rem;margin:0}
.section-dark .section-head p{color:#d9d1c8}
.brand-mark{width:34px;height:auto;color:var(--gold);margin-bottom:1rem;display:block}
.center .brand-mark{margin-inline:auto}

/* ---------- Home hero ---------- */
.home-hero{padding:4.5rem 0 5rem;overflow:hidden}
.home-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.home-hero h1{margin-bottom:1.4rem}
.home-hero .lede{margin-bottom:2rem}

.proof{display:flex;align-items:center;gap:.8rem;margin-top:2.4rem;color:var(--ink-soft);font-size:15px}
.proof .stars{color:var(--gold);letter-spacing:2px}
.proof strong{color:var(--ink)}
.hero-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
.hero-facts span{display:inline-flex;align-items:center;gap:.45rem}
.hero-facts i{color:var(--gold-deep)}
@media (max-width:991.98px){
  .home-hero{padding:2.5rem 0 3.5rem}
  .home-hero .grid{grid-template-columns:minmax(0,1fr);gap:2.5rem}
}

/* ---------- Care finder (the signature element) ---------- */
.finder{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.finder-card{background:#fff;border-radius:var(--r-md);padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column;border:1px solid transparent;transition:border-color .2s}
.finder-card:hover,.finder-card:focus-within{border-color:var(--gold)}
.finder-card h3{font-size:1.15rem;font-weight:600;margin-bottom:.9rem;line-height:1.3}
.finder-card ul{list-style:none;padding:0;margin:0 0 1.1rem}
.finder-card li a{display:flex;justify-content:space-between;align-items:center;padding:.42rem 0;color:var(--ink-soft);text-decoration:none;font-size:15.5px;border-top:1px solid var(--line)}
.finder-card li:first-child a{border-top:0}
.finder-card li a:hover{color:var(--ink)}
.finder-card li a .bi{font-size:.75rem;color:var(--gold-deep);opacity:0;transition:opacity .15s}
.finder-card li a:hover .bi{opacity:1}
.finder-card .finder-go{margin-top:auto;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.finder-card .finder-go:hover{color:var(--gold-deep)}
.finder-card.all{background:var(--ink);color:#fff}
.finder-card.all h3{color:#fff}
.finder-card.all p{color:#d9d1c8;font-size:15.5px}
.finder-card.all .finder-go{color:#fff}
@media (max-width:1099.98px){.finder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){.finder{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-1.5rem;padding:0 1.5rem .8rem;scroll-padding-inline:1.5rem}.finder-card{scroll-snap-align:start}}
.finder-hint{display:none;font-size:14px;color:var(--ink-soft);margin:-1.6rem 0 1.2rem}
@media (max-width:575.98px){.finder-hint{display:block}}

/* ---------- Visit steps (a real sequence, so numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:step}
.step img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);margin-bottom:1.3rem}
.step .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-deep);font-weight:600;font-size:15px;margin-bottom:.8rem}
.step h3{margin-bottom:.5rem}
.step p{color:var(--ink-soft);margin-bottom:1rem}
@media (max-width:899.98px){.steps{grid-template-columns:1fr;gap:2.5rem}.step img{aspect-ratio:16/9}}

/* ---------- Story split ---------- */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center}
.story .points{display:grid;gap:1.8rem;margin-top:2rem}
.story .points h3{margin-bottom:.35rem}
.story .points p{color:var(--ink-soft);margin:0}
@media (max-width:991.98px){.story{grid-template-columns:minmax(0,1fr);gap:2.5rem}}

/* ---------- Comfort band ---------- */
.comfort{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1rem}
.comfort-item{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md);padding:1.8rem}
.comfort-item i{font-size:1.6rem;color:var(--gold);display:block;margin-bottom:1rem}
.comfort-item h3{font-size:1.2rem;margin-bottom:.5rem}
.comfort-item p{color:#d9d1c8;margin:0}
.comfort-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.16)}
.comfort-cta p{margin:0;color:#efe9e2}
@media (max-width:899.98px){.comfort{grid-template-columns:1fr}}

/* ---------- Meet Dr. Chi ---------- */
.doctor{display:grid;grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:center}
.doctor .values{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 2rem;padding:0;list-style:none}
.doctor .values li{background:#fff;border-radius:999px;padding:.4rem 1rem;font-size:15px;font-weight:500}
@media (max-width:991.98px){.doctor{grid-template-columns:minmax(0,1fr);gap:2.5rem}}

/* ---------- Reviews ---------- */
.rating-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-bottom:2rem}
.rating-head .score{display:flex;align-items:baseline;gap:.8rem}
.rating-head .score strong{font-size:3rem;font-weight:300;line-height:1}
.stars{color:var(--gold);letter-spacing:2px;font-size:1rem}
.review-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,1fr);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem 1.25rem;scrollbar-width:thin}
@media(min-width:992px){.review-track{grid-auto-columns:calc((100% - 2.4rem)/3)}}
.review-card{scroll-snap-align:start;background:#fff;border-radius:var(--r-md);padding:1.7rem;display:flex;flex-direction:column;gap:.9rem}
.review-card .who{display:flex;align-items:center;gap:.8rem}
.review-card .who img{width:44px;height:44px;border-radius:50%}
.review-card .who strong{display:block;font-size:15px}
.review-card .who small{color:var(--ink-soft);font-size:13px}
.review-card .g{margin-left:auto;width:20px;height:20px}
.review-card p{font-size:15.5px;margin:0;line-height:1.6}
.review-card p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.review-card .more{background:none;border:0;padding:0;color:var(--gold-deep);font-size:14px;font-weight:600;align-self:flex-start}
.review-nav{display:flex;gap:.5rem}
.review-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:1rem}
.review-nav button:hover{background:var(--ink);color:#fff}

/* ---------- Smile preview ---------- */
.smile-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.smile-widget{width:100%;max-width:520px;border:0;display:block;margin:0 auto;height:640px;min-height:480px;background:transparent}
@media (max-width:991.98px){.smile-wrap{grid-template-columns:minmax(0,1fr);gap:1rem}}

/* ---------- Visit / contact block (every page) ---------- */
.visit{display:grid;grid-template-columns:1fr 1.1fr;gap:1.5rem}
.visit-card{background:#fff;border-radius:var(--r-lg);padding:2.4rem}
.visit-info dt{font-size:14px;font-weight:600;color:var(--ink-soft);margin-top:1.4rem}
.visit-info dt:first-child{margin-top:0}
.visit-info dd{margin:.2rem 0 0;font-size:1.15rem}
.visit-info dd a{color:var(--ink);text-decoration:none}
.visit-info dd a:hover{color:var(--gold-deep);text-decoration:underline}
.hours-table{width:100%;font-size:15.5px;border-collapse:collapse;margin-top:.3rem}
.hours-table td{padding:.38rem 0;border-bottom:1px solid var(--line)}
.hours-table td:last-child{text-align:right;color:var(--ink-soft)}
.hours-table tr.today td{font-weight:700;color:var(--ink)}
.hours-table tr.today td:first-child::after{content:"Today";margin-left:.5rem;font-size:12px;font-weight:600;background:var(--mist-deep);border-radius:999px;padding:.1rem .5rem}
.hours-note{font-size:14.5px;color:var(--ink-soft);margin:1rem 0 0}
.map-frame{display:block;border:0;width:100%;height:260px;border-radius:var(--r-md);margin-top:1.6rem;background:var(--mist)}
.contact-form h3{margin-bottom:.3rem}
.contact-form .form-intro{color:var(--ink-soft);margin-bottom:1.6rem}
.contact-form label{font-size:15px;font-weight:600;margin-bottom:.35rem}
.contact-form .req{color:#a33a1f;margin-left:.15rem}
.contact-form .form-control{border-radius:var(--r-sm);border:1.5px solid var(--line);padding:.75rem .9rem;font-size:16px;background:#fff;color:var(--ink)}
.contact-form .form-control::placeholder{color:#a39b95}
.contact-form textarea.form-control{min-height:170px}
.contact-form .form-control:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(198,163,106,.22)}
.btn-submit{font-family:var(--font);font-size:16px;font-weight:600;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.85rem 1.8rem;transition:background-color .2s}
.btn-submit:hover,.btn-submit:focus-visible{background:var(--gold-deep)}
.btn-submit:disabled{opacity:.7}
.form-status{font-size:15px;margin:1rem 0 0}
.cf-turnstile{margin-top:1.4rem;min-height:65px}
@media (max-width:991.98px){.visit{grid-template-columns:minmax(0,1fr)}.visit-card{padding:1.6rem;border-radius:var(--r-md)}}

/* ---------- Inner pages ---------- */
.page-hero{background:var(--mist);padding:2.2rem 0 4rem}
.page-hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center}
.page-hero .grid.no-img{grid-template-columns:1fr}
.page-hero .kicker{display:inline-block;color:var(--gold-deep);font-weight:600;font-size:15px;margin-bottom:.9rem;text-decoration:none}
.page-hero h1{font-size:clamp(2.2rem,1.5rem + 2.4vw,3.4rem);margin-bottom:1.2rem;max-width:18em}
.page-hero .lede{margin-bottom:1.8rem}
@media (max-width:991.98px){.page-hero{padding:1.4rem 0 3rem}.page-hero .grid{grid-template-columns:minmax(0,1fr);gap:2rem}}
.crumbs{font-size:14px;margin-bottom:2.2rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.35rem;color:#b7aea6}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

.page-body{padding:4.5rem 0 5rem}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:5rem;align-items:start}
.page-grid.full{grid-template-columns:minmax(0,1fr)}
@media (max-width:991.98px){.page-grid{grid-template-columns:minmax(0,1fr);gap:3rem}}
.content,.side{min-width:0}
.content{max-width:720px}
.content.legal{max-width:820px}
.content h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);font-weight:400;margin-top:3rem;padding-top:.2rem}
.content h2:first-child{margin-top:0}
.content h3{margin-top:2rem}
.content h4{margin-top:1.6rem}
.content .lead-img{border-radius:var(--r-md);width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:2.4rem}
.content ul,.content ol{padding-left:1.25rem;margin-bottom:1.4rem}
.content li{margin-bottom:.55rem;padding-left:.2rem}
.content ul li::marker{color:var(--gold)}
.content ol li::marker{color:var(--gold-deep);font-weight:700}
.content li strong{font-weight:600}

.toc{background:var(--mist);border-radius:var(--r-md);padding:1.4rem 1.5rem;margin-bottom:2.6rem}
.toc h2{font-size:15px!important;font-weight:600!important;margin:0 0 .6rem!important;letter-spacing:0}
.toc ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem}
.toc a{overflow-wrap:anywhere}
.toc a{display:block;padding:.3rem 0;color:var(--ink);text-decoration:none;font-size:15.5px}
.toc a:hover{color:var(--gold-deep)}
.toc a::before{content:"↓";color:var(--gold-deep);margin-right:.6rem;font-size:.85em}

.svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1.4rem 0 2.2rem}
.svc-card{background:var(--mist);border-radius:var(--r-md);padding:1.4rem 1.5rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;border:1px solid transparent;transition:border-color .2s}
.svc-card:hover{border-color:var(--gold);color:var(--ink)}
.svc-card h3{font-size:1.1rem;margin:0 0 .5rem}
.svc-card p{font-size:15px;margin:0 0 .9rem;line-height:1.55;color:var(--ink-soft)}
.svc-card .go{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--gold-deep)}

.svc-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.5rem}
.svc-group{background:var(--mist);border-radius:var(--r-md);padding:1.5rem}
.svc-group h3{font-size:1.1rem;margin:0 0 .7rem}
.svc-group ul{list-style:none;padding:0;margin:0}
.svc-group li{margin:0;padding:0}
.svc-group a{display:block;padding:.28rem 0;font-size:15.5px;color:var(--ink);text-decoration:none}
.svc-group a:hover{color:var(--gold-deep)}
.svc-group li:first-child a{font-weight:600}

.faq-list{margin:1.2rem 0 2.4rem;border-top:1px solid var(--line)}
.faq-list .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0!important}
.faq-list .accordion-button{font-family:var(--font);font-weight:600;color:var(--ink);font-size:1.05rem;background:transparent;box-shadow:none;padding:1.15rem 0;line-height:1.4}
.faq-list .accordion-button:not(.collapsed){color:var(--gold-deep)}
.faq-list .accordion-button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.faq-list .accordion-body{padding:0 0 1.3rem;color:var(--ink-soft)}

.cta-box{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:2.4rem;margin-top:3rem}
.cta-box h2{color:#fff;margin:0 0 .6rem!important;font-size:1.8rem!important;font-weight:300!important}
.cta-box p{margin-bottom:1.5rem;color:#d9d1c8}
.cta-box a:not(.btn-luma):not(.btn-luma-outline){color:#fff}
.cta-box .btn-luma{background:#fff;color:var(--ink)}
.cta-box .btn-luma:hover{background:var(--gold);color:var(--ink)}

.table-wrap{overflow-x:auto;margin:1.2rem 0 2.2rem;border-radius:var(--r-md);border:1px solid var(--line)}
.plan-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.plan-table th,.plan-table td{padding:.8rem 1rem;border-bottom:1px solid var(--line);text-align:center}
.plan-table tbody tr:last-child th,.plan-table tbody tr:last-child td{border-bottom:0}
.plan-table th:first-child,.plan-table td:first-child{text-align:left;font-weight:600}
.plan-table thead th{background:var(--mist);font-weight:600}
.plan-table thead th:last-child{background:var(--ink);color:#fff}
.plan-table .yes{color:var(--gold-deep);font-weight:700}
.plan-table .no{color:#c3bbb4}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2.2rem}
.plan{background:var(--mist);border-radius:var(--r-md);padding:1.5rem}
.plan.featured{background:var(--ink);color:#efe9e2}
.plan.featured h3{color:#fff}
.plan.featured .price{color:var(--gold)}
.plan h3{font-size:1.15rem;margin:0}
.plan .price{font-size:1.6rem;font-weight:300;color:var(--gold-deep);margin:.2rem 0 .9rem}
.plan ul{font-size:14.5px;padding-left:1.1rem;margin:0}

.link-list{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 2rem}
.link-list a{background:var(--mist);border-radius:999px;padding:.55rem 1.2rem;text-decoration:none;color:var(--ink);font-size:15.5px;border:1px solid transparent}
.link-list a:hover{border-color:var(--gold)}

/* sidebar */
.side{position:sticky;top:110px;display:grid;gap:1rem}
.book-card{background:var(--ink);color:#efe9e2;border-radius:var(--r-lg);padding:1.9rem}
.book-card h2{color:#fff;font-size:1.45rem;font-weight:400;margin:0 0 .5rem}
.book-card p{font-size:15px;color:#d9d1c8;margin-bottom:1.3rem}
.book-card .btn-luma{background:#fff;color:var(--ink);width:100%}
.book-card .btn-luma:hover{background:var(--gold)}
.book-card .call{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.7rem;color:#fff;text-decoration:none;font-weight:600;padding:.6rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3)}
.book-card .call:hover{border-color:#fff}
.book-card .perks{list-style:none;padding:1.2rem 0 0;margin:1.3rem 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:.5rem;font-size:14.5px}
.book-card .perks i{color:var(--gold);margin-right:.5rem}
.book-card .perks a{color:#efe9e2}
.related{background:var(--mist);border-radius:var(--r-md);padding:1.5rem}
.related h2{font-size:15px;font-weight:600;margin:0 0 .6rem}
.related ul{list-style:none;padding:0;margin:0}
.related a{display:block;padding:.35rem 0;color:var(--ink);text-decoration:none;font-size:15.5px;border-top:1px solid var(--mist-deep)}
.related li:first-child a{border-top:0}
.related a:hover{color:var(--gold-deep)}
.related a[aria-current]{font-weight:700}
.related .all{margin-top:.6rem;font-weight:600;color:var(--gold-deep)}
@media (max-width:991.98px){.side{position:static}}

/* ---------- Footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:4.5rem 0 0;font-size:15.5px}
.site-footer .foot-logo{width:200px;height:auto;margin-bottom:1rem}
.site-footer .tagline{color:var(--ink-soft);max-width:22em}
.site-footer h2{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:.9rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem}
.site-footer ul a{color:var(--ink-soft);text-decoration:none}
.site-footer ul a:hover{color:var(--ink);text-decoration:underline}
.site-footer .foot-contact a{color:var(--ink);text-decoration:none}
.site-footer .foot-contact a:hover{text-decoration:underline}
.foot-bottom{border-top:1px solid var(--line);margin-top:3.5rem;padding:1.4rem 0 1.6rem;font-size:14px;color:var(--ink-soft)}
.foot-bottom .container-luma{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.foot-bottom a{color:var(--ink-soft)}
.foot-bottom a:hover{color:var(--ink)}

/* mobile action bar: booking and calling always one tap away */
.mobile-cta{display:none}
@media (max-width:767.98px){
  .mobile-cta{display:grid;grid-template-columns:1fr 1.3fr;position:fixed;bottom:0;left:0;right:0;z-index:1040;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));gap:.6rem}
  body{padding-bottom:78px}
  .section{padding:4rem 0}
  .page-body{padding:3rem 0 3.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* contact page: the form and details are the page body */
.section-inline{padding:4rem 0 5rem}
.section-inline .visit-card{border:1px solid var(--line)}
/* membership plans: stacked, full width, with two-column feature lists */
.plans{grid-template-columns:minmax(0,1fr)}
.plan{display:grid;grid-template-columns:170px minmax(0,1fr);gap:.8rem 2rem;align-items:start;padding:1.6rem 1.8rem}
.plan .price{margin-bottom:0}
.plan ul{columns:2;column-gap:2rem}
.plan li{break-inside:avoid;margin-bottom:.4rem}
@media (max-width:767.98px){.plan{grid-template-columns:minmax(0,1fr)}.plan ul{columns:1}}
/* reviews inside a content column: two cards at a time */
@media(min-width:992px){.content .review-track{grid-auto-columns:calc((100% - 1.2rem)/2)}}
.content .rating-head{margin-top:1.5rem}
.content .review-card{background:var(--mist)}

/* ================= Responsive refinements ================= */
/* Tablet (576–991): use the width instead of stacking everything */
@media (min-width:576px) and (max-width:899.98px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .step img{aspect-ratio:4/3}
  .comfort{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comfort-item:last-child{grid-column:1/-1}
}
@media (min-width:576px) and (max-width:991.98px){
  /* booking card and related links sit side by side under the article */
  .side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .visit-card .map-frame{height:300px}
}
/* On tablets/phones, show a compact booking strip right under the hero instead of making people scroll to the sidebar */
.quick-book{display:none}
@media (max-width:991.98px){
  .quick-book{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.2rem;background:var(--ink);color:#efe9e2;border-radius:var(--r-md);padding:1rem 1.2rem;margin-bottom:2.2rem}
  .quick-book p{margin:0;font-size:15px}
  .quick-book .btn-luma{background:#fff;color:var(--ink);padding:.6rem 1.2rem}
}
/* Phones */
@media (max-width:575.98px){
  body{font-size:16.5px}
  .container-luma{padding-inline:1.15rem}
  .btn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}
  .btn-row>*{width:100%;padding-inline:.8rem}
  .page-hero h1{font-size:clamp(1.9rem,1.4rem + 3vw,2.4rem)}
  .lede{font-size:1.05rem}
  .proof{flex-wrap:wrap;gap:.3rem .8rem}
  .section{padding:3.5rem 0}
  .section-head{margin-bottom:2rem}
  .cta-box,.book-card{padding:1.6rem;border-radius:var(--r-md)}
  .rating-head{align-items:flex-start}
  .review-track{grid-auto-columns:86%;margin-inline:-1.15rem;padding-inline:1.15rem;scroll-padding-inline:1.15rem}
  .crumbs{font-size:13px;margin-bottom:1.4rem}
  .faq-list .accordion-button{font-size:1rem}
  .foot-bottom .container-luma{flex-direction:column}
}
/* Tiny phones (≤360) */
@media (max-width:360px){
  .btn-row{grid-template-columns:minmax(0,1fr)}
  .header-actions .phone{padding:.5rem}
  .brand img{height:30px}
}
/* Touch devices: comfortable tap targets, no hover-only reveals */
@media (hover:none){
  .finder-card li a{padding:.6rem 0}
  .finder-card li a .bi{opacity:1}
  .related a,.site-footer ul a,.toc a{padding-block:.45rem;display:inline-block}
  .site-footer li{margin-bottom:.15rem}
}
/* Short landscape phones: don't let the hero image eat the screen */
@media (max-height:500px) and (orientation:landscape){
  .site-header{position:relative}
}
/* Large screens */
@media (min-width:1600px){
  :root{--container:1320px}
  body{font-size:18px}
}

/* ================= Polish pass 2 ================= */
/* Comparison table: contained, first column pinned while swiping on small screens */
.table-wrap{position:relative;-webkit-overflow-scrolling:touch}
.table-hint{display:none;font-size:14px;color:var(--ink-soft);margin:-.4rem 0 .6rem}
@media (max-width:767.98px){
  .table-hint{display:block}
  .plan-table{min-width:560px;font-size:14px}
  .plan-table th,.plan-table td{padding:.7rem .75rem}
  .plan-table tbody th,.plan-table thead th:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line);min-width:132px}
  .plan-table thead th:first-child{background:var(--mist)}
}
/* Service groups: each box sizes to its own list */
.svc-groups{align-items:start}
/* Comfortable tap targets for small links */
.book-card .perks a{display:inline-block;padding:.35rem 0}
.book-card .perks li{display:flex;align-items:center}
.page-hero .kicker{padding:.35rem 0;margin-bottom:.55rem}
.review-card .more{padding:.45rem 0}
.crumbs a{display:inline-block;padding:.3rem 0}
.finder-card .finder-go{display:inline-block;padding:.45rem 0}
html,body{overflow-x:clip}

/* ================= v3: frames, larger imagery, motion ================= */
:root{
  --r-frame:28px;
  --shadow-photo:0 30px 70px -28px rgba(58,50,45,.35),0 10px 24px -12px rgba(58,50,45,.18);
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.5rem);
  --section-y:clamp(4rem,2.5rem + 5vw,7.5rem);
}
.container-luma{padding-inline:var(--gutter)}
.section{padding:var(--section-y) 0}

/* Photo frame: rounded rectangle, soft lift, sharp image filling the box */
.frame{position:relative;border-radius:var(--r-frame);overflow:hidden;background:var(--mist);box-shadow:var(--shadow-photo);isolation:isolate}
.frame picture,.frame img{display:block;width:100%;height:100%}
.frame img{object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.frame:hover img{transform:scale(1.035)}}
.frame-hero{aspect-ratio:4/5}
.frame-tall{aspect-ratio:4/5}
.frame-portrait{aspect-ratio:4/5}
.frame-step{aspect-ratio:4/3;margin-bottom:1.4rem;box-shadow:0 18px 40px -24px rgba(58,50,45,.35)}
.frame-wide{aspect-ratio:16/9;margin-bottom:2.4rem}
.frame-wide img{object-position:center}
.step img{margin:0;border-radius:0;aspect-ratio:auto}

/* Home hero: photo gets the larger column and the full hero height */
.home-hero{padding:clamp(2rem,1rem + 3vw,4.5rem) 0 clamp(3.5rem,2rem + 4vw,6rem)}
.home-hero .grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,1rem + 4vw,5rem)}
.home-hero h1{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.4rem)}
.home-hero .frame-hero{aspect-ratio:auto;height:clamp(460px,38vw + 120px,760px)}
.home-hero .frame-hero img{object-position:42% center}

/* Inner page hero: half-and-half with a big landscape photo */
.page-hero{padding:clamp(1.2rem,.6rem + 2vw,2.2rem) 0 clamp(3rem,2rem + 3vw,5rem)}
.page-hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem)}
.page-hero .frame-hero{aspect-ratio:5/4;max-height:600px}

/* Feature splits: bigger photos */
.story{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,1rem + 5vw,6rem)}
.doctor{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,1rem + 5vw,6rem)}
.story .frame-tall,.doctor .frame-portrait{max-height:760px}
.doctor .frame-portrait img{object-position:center 18%}

@media (max-width:991.98px){
  .home-hero .grid,.page-hero .grid,.story,.doctor{grid-template-columns:minmax(0,1fr)}
  .home-hero .frame-hero{height:auto;aspect-ratio:4/3}
  .page-hero .frame-hero{aspect-ratio:16/10;max-height:none}
  .story .frame-tall{aspect-ratio:4/3}
  .doctor .frame-portrait{aspect-ratio:4/5;max-width:560px}
}
@media (max-width:575.98px){
  :root{--r-frame:22px}
  .home-hero .frame-hero{aspect-ratio:4/5}
  .page-hero .frame-hero{aspect-ratio:4/3}
  .doctor .frame-portrait{max-width:none}
  .frame{box-shadow:0 20px 40px -24px rgba(58,50,45,.4)}
}
@media (min-width:1600px){
  .home-hero .frame-hero{height:780px}
}

/* Reveal on scroll: one calm fade-up, only when JS is running and motion is allowed */





.crumbs [aria-current]{display:inline-block;padding:.3rem 0}.crumbs li{display:flex;align-items:center}

/* ================= v4 motion: scroll transitions, depth, tilt =================
   Entrances use the translate/scale properties; tilt uses transform. Keeping them
   separate lets a card glide in AND tilt without one cancelling the other. */
:root{--ease-out:cubic-bezier(.16,.84,.3,1);--ease-soft:cubic-bezier(.2,.7,.2,1)}
.motion .intro,.js .reveal,.js .reveal-photo,.motion .tilt{
  transition:opacity .9s var(--ease-soft) var(--d,0ms),translate 1.05s var(--ease-out) var(--d,0ms),scale 1.2s var(--ease-out) var(--d,0ms),transform .55s var(--ease-soft),box-shadow .5s,border-color .2s}

/* Intro: top-of-page content eases in on load, one piece after another */
.motion .intro{opacity:0;translate:0 26px}
.motion .frame-hero.intro{translate:0 30px;scale:.965}
.motion.intro-go .intro{opacity:1;translate:none;scale:none}

/* Reveal with stagger */
.js .reveal{opacity:0;translate:0 34px;transform:none}
.js .reveal.is-in{opacity:1;translate:none}
.js .reveal-photo{opacity:0;translate:0 40px;scale:.96;transform:none}
.js .reveal-photo.is-in{opacity:1;translate:none;scale:none}

/* Depth: the photo is a little larger than its frame and drifts as you scroll */
.motion .frame.depth img{transform:translate3d(0,var(--py,0%),0) scale(1.16);transition:transform .2s linear;will-change:transform}
@media (hover:hover) and (pointer:fine){.motion .frame.depth:hover img{transform:translate3d(0,var(--py,0%),0) scale(1.2)}}

/* Hero hand-off: as you scroll past, the main photo settles back and softens */
.motion.intro-go .frame-hero{scale:var(--hs,1);opacity:var(--ho,1);transition:opacity .2s linear,translate 1.05s var(--ease-out) var(--d,0ms),scale .2s linear,transform .55s var(--ease-soft)}

/* Tilt toward the pointer, with a soft light sheen */
.motion .tilt{transform-style:preserve-3d}
.motion .tilt.tilting{transform:perspective(1100px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:opacity .9s var(--ease-soft),translate 1.05s var(--ease-out),scale 1.2s var(--ease-out),transform .12s linear,box-shadow .3s,border-color .2s}
.motion .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 45%);z-index:2}
.motion .tilt.tilting::after{opacity:1}
.finder-card,.svc-card,.comfort-item,.review-card{position:relative}
.motion .finder-card.tilting,.motion .svc-card.tilting,.motion .review-card.tilting{box-shadow:0 26px 50px -30px rgba(58,50,45,.45)}
.section-dark .tilt::after{background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(198,163,106,.16),transparent 45%)}

@media (prefers-reduced-motion:reduce){
  .motion .intro,.js .reveal,.js .reveal-photo{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  .motion .frame.depth img{transform:none!important}
}

/* ================= v5: larger crisp logo, horizontal photos, sharper depth ================= */
/* Logo: vector, so it stays sharp at any size */
.bar{min-height:clamp(76px,4vw + 50px,104px)}
.brand img{height:clamp(30px,1.6vw + 22px,52px);width:auto}
@media (max-width:1139.98px){.brand img{height:clamp(30px,2vw + 22px,42px)}}
@media (max-width:360px){.brand img{height:26px}}
.site-footer .foot-logo{width:240px}

/* Photos: wide horizontal frames */
@media (min-width:992px){.home-hero .grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.home-hero .frame-hero{height:auto;aspect-ratio:16/10}
.page-hero .frame-hero{aspect-ratio:3/2;max-height:none}
.story .frame-tall{aspect-ratio:3/2;max-height:none}
.doctor .frame-portrait{aspect-ratio:4/3;max-height:none;max-width:none}
.doctor .frame-portrait img{object-position:center 22%}
@media (min-width:992px){.doctor{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
@media (max-width:991.98px){
  .home-hero .frame-hero{aspect-ratio:16/10}
  .page-hero .frame-hero{aspect-ratio:16/10}
  .story .frame-tall,.doctor .frame-portrait{aspect-ratio:3/2}
}
@media (max-width:575.98px){
  .home-hero .frame-hero,.page-hero .frame-hero{aspect-ratio:3/2}
  .doctor .frame-portrait{aspect-ratio:4/3}
}
@media (min-width:1600px){.home-hero .frame-hero{height:auto}}

/* Depth effect: smaller over-scale so photos stay sharp */
.motion .frame.depth img{transform:translate3d(0,var(--py,0%),0) scale(1.07)}
@media (hover:hover) and (pointer:fine){.motion .frame.depth:hover img{transform:translate3d(0,var(--py,0%),0) scale(1.1)}}
/* Crisper scaling in all browsers */
.frame img{image-rendering:auto;backface-visibility:hidden}

/* ================= Smile preview: scroll story ================= */
@property --in{syntax:'<number>';inherits:true;initial-value:0}
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.smile-scroll{position:relative;background:linear-gradient(180deg,#fff 0%,var(--sand) 55%,#fff 100%)}
.smile-stage{padding:var(--section-y) 0}
.smile-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,1rem + 5vw,6rem);align-items:center}
.smile-copy .lede{margin-bottom:1.8rem}
.smile-steps{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.4rem;position:relative}
.smile-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:1rem;padding:.9rem 1rem .9rem .9rem;border-radius:var(--r-md);transition:background-color .5s,opacity .5s,translate .6s var(--ease-out,ease)}
.smile-steps h3{font-size:1.1rem;margin:0 0 .2rem}
.smile-steps p{margin:0;color:var(--ink-soft);font-size:15.5px}
.step-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--gold);margin-top:.1rem;position:relative;transition:background-color .4s,box-shadow .4s}
.step-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--gold);scale:0;transition:scale .45s var(--ease-out,ease)}
.smile-steps li.is-active .step-dot::after{scale:1}
.smile-steps li.is-current{background:#fff;box-shadow:0 18px 40px -28px rgba(58,50,45,.45)}
.smile-steps li.is-current .step-dot{box-shadow:0 0 0 6px rgba(198,163,106,.18)}
.smile-device-wrap{position:relative;display:grid;place-items:center}
.smile-device{position:relative;z-index:1;width:100%;max-width:520px;border-radius:26px;background:#fff;box-shadow:0 40px 90px -40px rgba(58,50,45,.45),0 12px 30px -18px rgba(58,50,45,.25);overflow:hidden}
.smile-device .smile-widget{display:block;width:100%;max-width:none;height:640px;margin:0;border:0}
.smile-glow{position:absolute;z-index:0;width:min(560px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(198,163,106,.42),rgba(198,163,106,0) 65%);filter:blur(10px);pointer-events:none}

/* Motion: device swings in from an angle and settles; glow drifts; steps light up */
.motion [data-smile] .smile-device{
  transform:perspective(1500px) translateX(calc((1 - var(--in)) * 90px)) translateY(calc((1 - var(--in)) * 40px)) rotateY(calc((1 - var(--in)) * -24deg)) rotateX(calc((1 - var(--in)) * 7deg)) scale(calc(.9 + var(--in) * .1));
  opacity:calc(.35 + var(--in) * .65)}
.motion [data-smile] .smile-glow{translate:calc(var(--p) * -40px) calc(-30px + var(--p) * 60px);scale:calc(.8 + var(--in) * .35);opacity:calc(var(--in) * 1)}
.motion [data-smile] .smile-steps li{opacity:.45}
.motion [data-smile] .smile-steps li.is-active{opacity:1}
@media (hover:hover) and (pointer:fine){.motion [data-smile] .smile-glow{left:calc(var(--sx,50%) - 280px);top:calc(var(--sy,50%) - 280px);transition:left .8s var(--ease-out,ease),top .8s var(--ease-out,ease)}}

/* Large screens: the section is held in place while you scroll through the steps */
@media (min-width:992px) and (min-height:760px){
  .motion .smile-scroll{height:230vh}
  .motion .smile-stage{position:sticky;top:clamp(76px,4vw + 50px,104px);height:calc(100vh - clamp(76px,4vw + 50px,104px));display:flex;align-items:center;padding:0}
  .motion .smile-stage>.container-luma{width:100%}
  .motion .smile-steps::before{content:"";position:absolute;left:calc(.9rem + 13px);top:1.6rem;bottom:1.6rem;width:2px;background:var(--line);border-radius:2px}
  .motion .smile-steps::after{content:"";position:absolute;left:calc(.9rem + 13px);top:1.6rem;width:2px;height:calc((100% - 3.2rem) * var(--p));background:var(--gold);border-radius:2px}
  .smile-steps li{position:relative;z-index:1}
  .step-dot{background:#fff}
}
/* Small screens: device settles once when it comes into view */
@media not ((min-width:992px) and (min-height:760px)){
  .motion [data-smile] .smile-device{transition:transform 1.2s var(--ease-out,ease),opacity 1s ease}
  .motion [data-smile].smile-in{--in:1}
  .motion [data-smile] .smile-glow{opacity:.8}
}
@media (max-width:991.98px){
  .smile-wrap{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .smile-device{max-width:460px;margin-inline:auto}
}
@media (max-width:575.98px){.smile-device .smile-widget{height:600px}.smile-steps li{padding:.75rem .5rem}}
.smile-scroll{overflow-x:clip}

/* Smile preview: centered tool, no side text */
.smile-scroll{padding:var(--section-y) 0;background:linear-gradient(180deg,#fff 0%,var(--sand) 50%,#fff 100%)}
.motion .smile-scroll{height:auto}
.smile-center{display:flex;justify-content:center}
.smile-center .smile-device-wrap{width:100%;max-width:640px}
.smile-center .smile-device{max-width:640px;width:100%;margin-inline:auto}
.smile-center .smile-device .smile-widget{height:clamp(600px,52vw + 200px,820px)}
@media (max-width:575.98px){.smile-center .smile-device{border-radius:20px}.smile-center .smile-device .smile-widget{height:640px}}
.motion [data-smile] .smile-device{transition:none}
.motion [data-smile].smile-in{--in:inherit}

/* ================= Section sidebar card (About / Patients / service category) ================= */
.related{background:#d9d3cb;border-radius:var(--r-lg);padding:2rem 2.2rem 1.8rem}
.related h2{margin:0 0 .5rem;font-size:15px;line-height:1.2}
.related .related-head{display:inline-block;padding:.3rem 0;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#000;text-decoration:none;border:0}
.related .related-head:hover{color:var(--gold-deep)}
.related ul{list-style:none;padding:0 0 0 1rem;margin:0}
.related li a{display:block;padding:.45rem 0;color:#1d1916;text-decoration:none;font-size:16px;border-top:1px solid rgba(58,50,45,.18)}
.related li:first-child a{border-top:0}
.related li a:hover{color:var(--gold-deep)}
.related a[aria-current]{font-weight:700;color:#000}
.related .all{display:inline-block;margin:.8rem 0 0 1rem;font-weight:600;color:var(--gold-deep);text-decoration:none}
.side{gap:1.2rem}

/* ================= Feature photo in the page body (e.g. Our Team) ================= */
.content.has-feature{max-width:none}
.content.has-feature>:not(.frame-feature){max-width:720px}
.frame-feature{width:100%;margin:0 0 2.6rem;border-radius:var(--r-frame)}
.frame-feature img{object-fit:cover}
@media (max-width:575.98px){.frame-feature{margin-bottom:2rem}}

/* ---------- Services menu: cascading categories (like the original site) ---------- */
.main-nav>li.has-svc{position:relative}
.svc-menu{width:290px;padding:.55rem;overflow:visible}
.svc-cats{list-style:none;margin:0;padding:0}
.svc-cat{position:relative}
.svc-menu a.svc-cat-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.62rem .85rem;font-size:15px;color:var(--ink);border-radius:10px}
.svc-cat-link .bi{font-size:.72rem;color:var(--muted,#8a817a);transition:transform .16s}
.svc-cat:hover>.svc-cat-link,.svc-cat:focus-within>.svc-cat-link,.svc-cat.open>.svc-cat-link{background:var(--mist)}
.svc-cat:hover>.svc-cat-link .bi,.svc-cat.open>.svc-cat-link .bi{transform:translateX(2px);color:var(--gold-deep)}
.svc-fly{position:absolute;left:calc(100% + .55rem);top:-.55rem;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 24px 60px -20px rgba(58,50,45,.28);padding:.55rem;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .14s,transform .14s,visibility .14s;z-index:2}
.svc-cat.has-fly::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:calc(.55rem + 4px)} /* hover bridge */
.svc-cat:hover>.svc-fly,.svc-cat:focus-within>.svc-fly,.svc-cat.open>.svc-fly{opacity:1;visibility:visible;transform:none}
.svc-fly a{padding:.5rem .85rem;font-size:15px;white-space:nowrap}
.svc-fly{max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain}
.svc-foot{border-top:1px solid var(--line);margin-top:.45rem;padding-top:.45rem}
.svc-menu a.svc-all{display:flex;align-items:center;gap:.45rem;font-weight:600;color:var(--gold-deep);padding:.55rem .85rem}
.svc-menu a.svc-all .bi{font-size:.85rem}

/* ---------- Two-row header (top bar + main bar, like the original site) ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);font-size:15px}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:58px;padding-block:.45rem}
.topbar-addr{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;min-width:0}
.topbar-addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-addr i{color:var(--gold-deep)}
.topbar-addr:hover span{text-decoration:underline;text-underline-offset:3px}
.topbar-cta{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.5rem 1.35rem;font-weight:600;font-size:15px;text-decoration:none;border:1.5px solid var(--gold);white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.pill-line{color:var(--gold-deep);background:#fff}
.pill-line:hover{background:var(--sand);color:var(--gold-deep)}
.pill-gold{background:var(--gold);color:#fff}
.pill-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.pill .short{display:none}

.site-header{box-shadow:none;transition:box-shadow .2s}
.site-header.is-stuck{box-shadow:0 10px 30px -18px rgba(58,50,45,.35)}
.main-nav{gap:clamp(.2rem,1.6vw,2rem)}
.main-nav>li.dd-end>.dropdown-panel{left:auto;right:0}
/* "Book a visit" appears in the main bar only after the top bar scrolls away */
.header-actions .sticky-book{display:none;padding:.6rem 1.2rem;animation:luma-fade .25s ease}
@keyframes luma-fade{from{opacity:0}to{opacity:1}}
@media (min-width:1140px){.site-header.is-stuck .sticky-book{display:inline-flex}}

@media (max-width:991.98px){.topbar-addr span{font-size:14px}}
@media (max-width:767.98px){
  .topbar{font-size:14px}
  .topbar-in{min-height:52px;gap:.6rem}
  .topbar-addr span{display:none}
  .topbar-addr{width:40px;height:40px;justify-content:center;border:1.5px solid var(--line);border-radius:50%}
  .topbar-cta{flex:1;justify-content:flex-end}
  .pill{padding:.45rem 1rem;font-size:14px}
  .pill .long{display:none}.pill .short{display:inline}
}
@media (max-width:360px){.pill-line span:not(.visually-hidden){display:none}.pill-line{padding:.45rem .8rem}}
.site-header .bar>nav{margin-left:auto}
@media (min-width:1140px){.site-header:not(.is-stuck) .header-actions{display:none}}

/* ---------- Services menu, compact like the original site ---------- */
.svc-menu{width:auto;min-width:270px;padding:0;border:0;border-radius:4px;top:100%;box-shadow:0 18px 40px -12px rgba(58,50,45,.25)}
.svc-menu a.svc-cat-link{padding:.5rem 1.1rem;border-radius:0;font-size:15.5px;line-height:1.4;white-space:nowrap;gap:2.2rem}
.svc-cat-link .bi{font-size:.75rem;color:var(--ink)}
.svc-cat:hover>.svc-cat-link,.svc-cat:focus-within>.svc-cat-link,.svc-cat.open>.svc-cat-link{background:#e9e6e2}
.svc-fly{left:100%;right:auto;top:0;min-width:250px;padding:0;border:0;border-radius:0 4px 4px 0;transform:none;box-shadow:12px 18px 40px -12px rgba(58,50,45,.25)}
.svc-fly a{padding:.5rem 1.1rem;font-size:15.5px;line-height:1.4;border-radius:0}
.svc-fly a:hover{background:#f2efeb}
.svc-cat.has-fly::after{display:none}
/* flipped to the left by main.js only when there is no room on the right */
.svc-menu.fly-left .svc-fly{left:auto;right:100%;border-radius:4px 0 0 4px}
.svc-foot{display:none}
.svc-menu{min-width:0}
.svc-menu a.svc-cat-link{gap:1.4rem}
.svc-fly{min-width:0;width:max-content}
.svc-fly a,.svc-menu a.svc-cat-link{padding-block:.42rem}

/* ---------- Home: sections from the original site ---------- */
/* Services intro with pill links (light background like "What brings you in?") */
.svc-intro{text-align:center;max-width:1100px}
.svc-intro h2{margin-bottom:1.4rem}
.svc-intro>p{max-width:760px;margin:0 auto 1.4rem;color:var(--ink-soft);font-size:1.06rem;line-height:1.75}
.svc-intro>p a{color:var(--gold-deep)}
.svc-pills{list-style:none;padding:0;margin:2.2rem 0 2.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.svc-pills a{display:block;padding:.62rem 1.35rem;border-radius:999px;background:#efe6da;color:var(--ink);text-decoration:none;font-size:1rem;transition:background .18s,transform .18s}
.svc-pills a:hover{background:#e4d6c3;transform:translateY(-2px)}
.svc-all-btn{padding:.75rem 2rem;font-size:15.5px}

/* Text + photo rows with the smile mark beside the heading */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.mark-head{display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem);margin-bottom:1.4rem}
.mark-head .smile-mark{width:clamp(34px,3vw,44px);height:auto;flex-shrink:0;color:var(--gold)}
.mark-head h2{margin:0}
.split-text p{color:var(--ink-soft);font-size:1.06rem;line-height:1.75;margin:0}
.frame-split{aspect-ratio:3/2}
.frame-chi img{object-position:50% 22%}
@media (max-width:991.98px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split-rev .split-text{order:-1}
}

/* "What makes Luma different" band */
.diff-band{background:#5b5048;color:#fff;text-align:center}
.diff-band h2{color:#fff;margin:0 auto clamp(2.2rem,4vw,3.6rem);max-width:760px}
.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;text-align:left}
.diff-item{display:flex;align-items:flex-start;gap:1.2rem}
.diff-icon{flex-shrink:0;width:76px;height:76px;border-radius:50%;background:#faf6ee;border:3px solid rgba(255,255,255,.35);display:grid;place-items:center;color:var(--gold)}
.diff-icon svg{width:40px;height:40px}
.diff-item h3{color:#fff;font-size:1.15rem;margin:.6rem 0 .45rem}
.diff-item p{color:#eee6dc;margin:0;font-size:.98rem;line-height:1.6}
@media (max-width:991.98px){.diff-grid{grid-template-columns:minmax(0,1fr);max-width:460px;margin-inline:auto;gap:1.6rem}}

/* ---------- Headings: bold and compact, like the original site ---------- */
:root{--head:#5f5953}
h1,.home-hero h1,.page-hero h1{font-size:clamp(1.9rem,1.2rem + 1.8vw,2.65rem);font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--head)}
h2{font-size:clamp(1.6rem,1.15rem + 1.25vw,2.3rem);font-weight:700;letter-spacing:-.01em;line-height:1.22;color:var(--head)}
.content h2{font-size:clamp(1.4rem,1.1rem + .8vw,1.8rem);font-weight:700;color:var(--head)}
h3{font-weight:700;color:var(--head)}
.cta-box h2{font-weight:700!important;font-size:1.6rem!important}
.book-card h2{font-weight:700}
.section-dark h2,.section-dark h3,.diff-band h2,.diff-band h3,.cta-box h2,.book-card h2,.book-card h3{color:#fff}
@media (max-width:767.98px){.page-hero h1{font-size:clamp(1.75rem,1.3rem + 2.4vw,2.1rem)}}
.plan.featured h2,.plan.featured h3,.finder-card.all h3,.quick-book h2,.quick-book h3{color:#fff}

/* ---------- Reviews + Contact: centered headings like the original site ---------- */
.rev-title{text-align:center;margin:0 0 clamp(1.4rem,3vw,2.4rem)}
.section-head.center{text-align:center;margin-inline:auto}
.section-head.center p{margin-inline:auto}
/* Contact on white: details sit on the page, the form sits in an outlined card */
.section-contact{background:#fff}
.section-contact .visit{gap:clamp(1.5rem,4vw,4rem);align-items:start}
.section-contact .visit-card:first-child{padding:0;background:none;border-radius:0}
.section-contact .visit-card:last-child{border:1px solid #d9d3cb;border-radius:var(--r-lg)}
.section-contact .visit-info dd a{color:var(--gold-deep)}
.section-contact .visit-info dd{font-size:1.25rem}

/* Reviews run nearly edge to edge, like the original site */
.reviews-wide .wide-wrap{width:100%;padding-inline:clamp(16px,2vw,32px)}
@media (min-width:1200px){.reviews-wide .review-track{gap:1.6rem;grid-auto-columns:calc((100% - 3.2rem)/3)}.reviews-wide .review-card{padding:2rem 2.2rem}}
@media (min-width:1800px){.reviews-wide .review-track{grid-auto-columns:calc((100% - 4.8rem)/4)}}

/* ---------- Contact section: wide and roomy, like the original site ---------- */
.section-contact .container-luma{max-width:none;padding-inline:clamp(16px,2vw,32px)}
.section-contact .visit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,5.5rem)}
.section-contact .visit-info dt{font-size:16px;font-weight:500;color:var(--ink);margin-top:1.5rem}
.section-contact .visit-info dd{font-size:clamp(1.25rem,1rem + .6vw,1.55rem);margin-top:.15rem}
/* hours: day and time side by side, no row lines, larger text */
.section-contact .hours-table{width:auto;font-size:clamp(16px,.9rem + .3vw,18px);margin-top:.4rem}
.section-contact .hours-table td{border:0;padding:.22rem 1.6rem .22rem 0;text-align:left;color:var(--ink)}
.section-contact .hours-table td:last-child{text-align:left;color:var(--ink);padding-right:0}
.section-contact .hours-table tr.today td{color:var(--gold-deep)}
.section-contact .hours-table tr.today td:first-child::after{background:#efe6da;color:var(--gold-deep)}
.section-contact .hours-note{font-size:clamp(16px,.9rem + .3vw,18px);color:var(--ink);line-height:1.7;margin:1.8rem 0 0;max-width:none}
.section-contact .map-frame{height:clamp(300px,24vw,420px);border-radius:0;margin-top:1.6rem}
/* form card */
.section-contact .visit-card:last-child{padding:clamp(1.6rem,3vw,3rem) clamp(1.4rem,3.5vw,3.5rem);border-radius:var(--r-lg)}
.section-contact .contact-form h3,.section-contact .contact-form .form-intro{display:none}
.section-contact .contact-form .row{--bs-gutter-y:1.6rem;--bs-gutter-x:2.2rem}
.section-contact .contact-form label{font-size:clamp(16px,.95rem + .35vw,19px);font-weight:500;color:var(--ink);margin-bottom:.45rem}
.section-contact .contact-form .form-control{border-radius:3px;border:1px solid #cfc9c2;padding:.85rem 1rem;font-size:17px;min-height:56px}
.section-contact .contact-form textarea.form-control{min-height:240px}
.section-contact .btn-submit{background:var(--gold);border-radius:3px;font-size:18px;font-weight:500;padding:.8rem 1.6rem;margin-top:.4rem}
.section-contact .btn-submit:hover,.section-contact .btn-submit:focus-visible{background:var(--gold-deep)}
.section-contact .cf-turnstile{margin-top:1.6rem}
@media (max-width:991.98px){.section-contact .visit{grid-template-columns:minmax(0,1fr)}}
@media (max-width:575.98px){.section-contact .hours-table td{padding-right:1rem}}
/* left column (details + map) and the form card share one height; the map fills the rest */
.section-contact .visit{align-items:stretch}
.section-contact .visit-card:first-child{display:flex;flex-direction:column}
.section-contact .map-frame{flex:1 1 auto;min-height:300px;height:auto}
.section-contact .visit-card:last-child{display:flex;flex-direction:column}
@media (max-width:991.98px){.section-contact .map-frame{flex:none;height:320px}}

/* ---------- Language switch (English / Español) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:.5rem .9rem;border-radius:999px;white-space:nowrap}
.lang-switch:hover{background:var(--mist);color:var(--gold-deep)}
.lang-switch .bi{color:var(--gold-deep);font-size:1rem}
.mobile-nav .lang-plain{display:flex;align-items:center;gap:.5rem}
.mobile-nav .lang-plain .bi{color:var(--gold-deep)}
html[lang="es"] .hours-table tr.today td:first-child::after{content:"Hoy"}
@media (max-width:767.98px){
  .lang-switch{padding:.45rem .7rem;font-size:14px}
  .lang-switch span{display:none}
  .lang-switch::after{content:"ES"}
  html[lang="es"] .lang-switch::after{content:"EN"}
  .lang-switch{border:1.5px solid var(--line)}
}
/* small phones: room for the language button in the top bar */
@media (max-width:767.98px){.topbar-addr{flex-shrink:0}}
@media (max-width:480px){.pill-line span:not(.visually-hidden){display:none}.pill-line{padding:.45rem .8rem}}

/* ---------- Home hero + header: same widths as the original site ----------
   Original: content 1352px wide (24px side padding), header uses the same edges,
   text and photo are two equal columns 64px apart, photo 644 x 367 at 1440px. */
.home-hero>.container-luma,.topbar>.container-luma,.site-header>.container-luma{max-width:1400px;padding-inline:24px}
@media (min-width:992px){
  .home-hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  .home-hero .frame-hero{aspect-ratio:644/367;height:auto;min-height:0;width:100%}
}
@media (min-width:992px) and (max-width:1279.98px){.home-hero .frame-hero{aspect-ratio:534/395}}
@media (max-width:575.98px){.home-hero>.container-luma,.topbar>.container-luma,.site-header>.container-luma{padding-inline:16px}}

/* =====================================================================
   Site-wide widths matched to the original lumadentalstudio.com
   (measured at 1440px: content 44px–1396px = 1352px wide everywhere)
   ===================================================================== */
.container-luma,.reviews-wide .wide-wrap,.section-contact .container-luma{max-width:1400px;margin-inline:auto;padding-inline:24px;width:100%}
@media (max-width:575.98px){.container-luma,.reviews-wide .wide-wrap,.section-contact .container-luma{padding-inline:16px}}
@media (min-width:992px){
  /* inner pages: 859px content + 429px sidebar, 64px apart */
  .page-grid{grid-template-columns:minmax(0,1fr) 429px;gap:64px}
  .content,.content.legal{max-width:none}
  .content.has-feature>:not(.frame-feature){max-width:none}
  /* page top: text and photo in two equal columns, 64px apart */
  .page-hero .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  /* home: steps in three columns, 64px apart, photos 2:1 (408 x 204) */
  .steps{gap:64px}
  .frame-step{aspect-ratio:2/1}
  /* home: why / better rows, photos 644 x 400, 64px apart */
  .split{gap:64px}
  .frame-split{aspect-ratio:644/400}
  /* home: Meet Dr. Chi, photo 440 x 420 beside 880px of text, 32px apart */
  .doctor{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
  .doctor .frame-portrait{aspect-ratio:440/420}
  /* contact: details and form in two equal columns, 64px apart */
  .section-contact .visit{gap:64px}
  .section-inline .visit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  /* reviews: three cards across the 1352px width */
  .reviews-wide .review-track{gap:32px;grid-auto-columns:calc((100% - 64px)/3)}
}
@media (min-width:1800px){.reviews-wide .review-track{grid-auto-columns:calc((100% - 64px)/3)}}
.svc-intro{max-width:1400px}