:root{
  --bg:#fffaf7;
  --bg-alt:#fff2ec;
  --card:#ffffffd9;
  --text:#211714;
  --muted:#736662;
  --line:#ead9d2;
  --rose:#d48999;
  --rose-deep:#b76177;
  --champagne:#f3e2d3;
  --mint:#dff1ea;
  --teal:#7fb7b0;
  --shadow:0 18px 55px rgba(69,38,42,.12);
  --radius:28px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text); background:
  radial-gradient(circle at top right, rgba(212,137,153,.12), transparent 28%),
  radial-gradient(circle at 20% 20%, rgba(127,183,176,.10), transparent 25%),
  linear-gradient(180deg, #fffdfc 0%, var(--bg) 100%);
  line-height:1.55; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(calc(100% - 32px), var(--max)); margin-inline:auto}
.section{padding:92px 0}
.section.compact{padding:72px 0}
.eyebrow{display:inline-flex; align-items:center; gap:12px; letter-spacing:.26em; text-transform:uppercase; font-size:.76rem; color:var(--rose-deep); font-weight:700}
.eyebrow::before{content:""; width:42px; height:2px; background:linear-gradient(90deg,var(--rose-deep),transparent)}
h1,h2,h3,h4{line-height:.98; margin:0 0 16px; font-weight:800; letter-spacing:-.04em}
h1{font-size:clamp(3.4rem,8vw,7rem)}
h2{font-size:clamp(2rem,4vw,4.25rem)}
h3{font-size:clamp(1.3rem,2vw,1.85rem)}
p{margin:0 0 18px; color:var(--muted); font-size:1.02rem}
.button-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 22px; border-radius:999px; font-weight:700; border:1px solid transparent; transition:.25s ease; cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%); color:#fff; box-shadow:0 14px 34px rgba(183,97,119,.28)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px rgba(183,97,119,.32)}
.btn.secondary{background:#fff; border-color:var(--line)}
.btn.secondary:hover{transform:translateY(-2px); border-color:#d6c0b8}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.36); color:#fff}
.btn.small{padding:12px 18px; font-size:.95rem}
.site-header{position:sticky; top:0; z-index:30; background:rgba(255,250,247,.82); backdrop-filter:blur(16px); border-bottom:1px solid rgba(234,217,210,.7)}
.nav{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; min-height:84px}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand-mark{width:50px; height:50px; border-radius:16px; background:linear-gradient(135deg,#fff 0%,#f7e8e1 100%); border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow); position:relative; overflow:hidden}
.brand-mark::before,.brand-mark::after{content:""; position:absolute; border-radius:999px}
.brand-mark::before{width:28px; height:12px; border:3px solid var(--rose); border-top:none; bottom:11px; left:9px; transform:rotate(-6deg)}
.brand-mark::after{width:8px; height:8px; background:var(--teal); top:10px; right:11px; box-shadow:-18px 17px 0 0 rgba(127,183,176,.28)}
.brand-copy{display:flex; flex-direction:column; min-width:0}
.brand-copy strong{font-size:1.2rem; letter-spacing:.1em}
.brand-copy span{font-size:.73rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.nav-links{display:flex; justify-content:center; gap:34px; flex-wrap:wrap}
.nav-links a{font-weight:500; color:#4b403d; position:relative; padding:8px 0}
.nav-links a.active::after,.nav-links a:hover::after{content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--rose),var(--rose-deep))}
.nav-cta{display:flex; align-items:center; gap:18px}
.nav-phone{font-size:.95rem; color:#4b403d; white-space:nowrap}
.mobile-toggle{display:none; background:none; border:0; width:44px; height:44px; border-radius:12px}
.mobile-toggle span{display:block; height:2px; background:#222; margin:7px 6px}
.mobile-panel{display:none}
.hero{padding:34px 0 70px}
.hero-grid{display:grid; grid-template-columns:1.03fr .97fr; gap:34px; align-items:center}
.hero-copy{padding:48px 0}
.hero-copy .lead{font-size:1.18rem; max-width:630px}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px}
.stat{background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:var(--shadow)}
.stat strong{display:block; font-size:1.8rem; color:var(--text)}
.stat span{color:var(--muted); font-size:.96rem}
.hero-visual{position:relative; min-height:760px}
.hero-card{
  position:absolute; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.75); box-shadow:var(--shadow); backdrop-filter:blur(18px); border-radius:34px; overflow:hidden
}
.family-card{inset:36px 24px 120px 90px}
.family-card img{width:100%; height:100%; object-fit:cover}
.portrait-card{width:230px; height:280px; bottom:10px; left:0; z-index:2}
.portrait-card img{width:100%; height:100%; object-fit:cover}
.portrait-card.alt{width:210px; height:250px; left:auto; right:0; bottom:80px}
.info-float{position:absolute; right:40px; top:18px; width:min(290px,44%); padding:22px 22px 18px; z-index:3}
.info-float h4{font-size:1.1rem; margin-bottom:10px}
.info-float ul{margin:0; padding-left:18px; color:var(--muted)}
.info-float li{margin:6px 0}
.orbit{position:absolute; inset:auto 0 86px auto; width:440px; height:440px; right:-110px; border-radius:50%; border:1px dashed rgba(183,97,119,.22)}
.orbit::before,.orbit::after{content:""; position:absolute; border-radius:50%; inset:18px; border:1px solid rgba(127,183,176,.18)}
.orbit::after{inset:62px}
.badge-chip{position:absolute; display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); font-weight:600; color:#5c4d49}
.badge-chip i{width:11px; height:11px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 7px rgba(212,137,153,.15)}
.chip-a{left:44%; top:58px}
.chip-b{right:20px; bottom:46px}
.chip-c{left:80px; bottom:36px}
.split-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:32px; align-items:start}
.panel{background:#fff; border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow)}
.panel.padded{padding:30px}
.service-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.service-card{padding:24px; border-radius:28px; background:linear-gradient(180deg,#fff 0%,#fff9f6 100%); border:1px solid var(--line); min-height:220px; position:relative; overflow:hidden}
.service-card::before{content:""; position:absolute; right:-10px; top:-10px; width:130px; height:130px; background:radial-gradient(circle, rgba(212,137,153,.18), transparent 65%)}
.service-icon{width:56px; height:56px; border-radius:18px; background:linear-gradient(135deg,#fff 0%,#f8e7e1 100%); border:1px solid var(--line); display:grid; place-items:center; margin-bottom:18px; color:var(--rose-deep); font-weight:900; font-size:1.2rem}
.link-inline{display:inline-flex; align-items:center; gap:8px; color:var(--rose-deep); font-weight:700; margin-top:8px}
.ribbon-section{position:relative}
.ribbon-shell{background:linear-gradient(135deg,#2b1f22 0%,#3a2a30 100%); color:#fff; border-radius:42px; overflow:hidden; box-shadow:0 32px 80px rgba(39,20,23,.24); position:relative}
.ribbon-shell::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.1), transparent 35%), linear-gradient(180deg, transparent 0%, rgba(255,255,255,.03) 100%)}
.ribbon-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:42px}
.ribbon-grid p{color:rgba(255,255,255,.78)}
.selector{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:26px 0 20px}
.selector button{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12); padding:13px 16px; border-radius:18px; cursor:pointer; font:inherit; font-weight:700; transition:.2s}
.selector button.active, .selector button:hover{background:linear-gradient(135deg, rgba(212,137,153,.3), rgba(127,183,176,.25)); border-color:rgba(255,255,255,.25)}
.smile-stage{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:32px; min-height:370px; padding:28px; display:grid; grid-template-rows:auto 1fr auto; gap:14px}
.smile-visual{position:relative; min-height:190px; display:grid; place-items:center}
.arc{position:absolute; width:70%; aspect-ratio:1.8; border:4px solid rgba(255,255,255,.18); border-top:none; border-radius:0 0 250px 250px; transform:translateY(10px)}
.arc:nth-child(2){width:58%; transform:translateY(-2px); border-color:rgba(255,255,255,.28)}
.tooth-row{display:flex; gap:10px; position:relative; z-index:1}
.tooth{width:34px; height:58px; background:linear-gradient(180deg,#fff 0%,#f8eef2 100%); border-radius:14px 14px 22px 22px; box-shadow: inset 0 -10px 14px rgba(212,137,153,.1)}
.kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{padding:16px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1)}
.kpi strong{display:block; font-size:1rem; color:#fff}
.kpi span{display:block; color:rgba(255,255,255,.66); font-size:.92rem; margin-top:6px}
.treatment-list{display:grid; gap:14px}
.treatment-item{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line)}
.treatment-item:last-child{border-bottom:0}
.number-pill{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#f9e5e0,#fff); border:1px solid var(--line); display:grid; place-items:center; color:var(--rose-deep); font-weight:800}
.quote-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
.review-panel{padding:34px; min-height:100%}
.stars{letter-spacing:.25em; color:#e7a76f; font-size:1.1rem; margin-bottom:14px}
.review-grid{display:grid; gap:14px}
.mini-review{padding:18px; border-radius:22px; background:#fff8f4; border:1px solid var(--line)}
.family-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center}
.photo-stack{position:relative; min-height:540px}
.photo-stack .main{position:absolute; inset:0 68px 0 0; border-radius:36px; overflow:hidden; box-shadow:var(--shadow)}
.photo-stack .main img,.photo-stack .small img{width:100%; height:100%; object-fit:cover}
.photo-stack .small{position:absolute; right:0; bottom:32px; width:240px; height:280px; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); border:10px solid #fffaf7}
.float-card{position:absolute; right:26px; top:28px; width:220px; padding:18px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.feature-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.feature{padding:20px; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.feature strong{display:block; margin-bottom:8px}
.contact-wrap{display:grid; grid-template-columns:.95fr 1.05fr; gap:24px}
.contact-panel{padding:32px}
.contact-card{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:22px}
.contact-mini{padding:18px; border-radius:22px; background:#fff8f4; border:1px solid var(--line)}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.field{display:grid; gap:8px}
.field.full{grid-column:1/-1}
label{font-size:.92rem; font-weight:700; color:#493d39}
input,select,textarea{width:100%; padding:14px 16px; border-radius:18px; border:1px solid var(--line); background:#fff; font:inherit; color:var(--text)}
textarea{min-height:160px; resize:vertical}
.note{font-size:.9rem; color:var(--muted)}
.footer{padding:28px 0 46px; border-top:1px solid var(--line); margin-top:40px}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center}
.footer-nav{display:flex; gap:20px; flex-wrap:wrap; justify-content:flex-end}
.page-hero{padding:70px 0 52px}
.page-hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:center}
.page-visual{position:relative; min-height:400px}
.page-visual .visual-box{position:absolute; inset:0; border-radius:36px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.page-visual img{width:100%; height:100%; object-fit:cover}
.page-visual .overlay-card{position:absolute; right:24px; bottom:24px; width:min(230px, 42%); padding:18px; background:rgba(255,255,255,.82); backdrop-filter:blur(16px); border-radius:24px; border:1px solid rgba(255,255,255,.88); box-shadow:var(--shadow)}
.tall-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{padding:22px; border-radius:26px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.step b{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#f9e5e0,#fff); border:1px solid var(--line); color:var(--rose-deep); margin-bottom:14px}
@media (max-width: 1100px){
  .nav{grid-template-columns:auto auto; justify-content:space-between}
  .nav-links,.nav-phone,.nav-cta .btn{display:none}
  .mobile-toggle{display:block}
  .mobile-panel{display:none; border-top:1px solid var(--line); padding:0 0 16px}
  .mobile-panel.open{display:block}
  .mobile-panel nav{display:grid; gap:8px; padding-top:14px}
  .mobile-panel a{padding:14px 8px; border-bottom:1px solid rgba(234,217,210,.8)}
  .mobile-panel .btn{margin-top:12px}
  .hero-grid,.split-grid,.quote-wrap,.family-grid,.contact-wrap,.page-hero-grid,.ribbon-grid{grid-template-columns:1fr}
  .hero-visual{min-height:720px}
  .family-card{inset:0 0 180px 56px}
  .info-float{width:280px; right:20px}
}
@media (max-width: 820px){
  h1{font-size:clamp(3rem,14vw,5.3rem)}
  .section{padding:74px 0}
  .hero-copy{padding:22px 0}
  .hero-stats,.service-cards,.feature-list,.contact-card,.form-grid,.selector,.kpi-row,.process,.tall-grid{grid-template-columns:1fr}
  .hero-visual{min-height:680px}
  .family-card{inset:0 0 210px 0}
  .portrait-card{width:190px; height:230px}
  .portrait-card.alt{width:170px; height:210px; right:0}
  .chip-a{left:24px; top:auto; bottom:166px}
  .chip-b{right:10px; bottom:18px}
  .chip-c{left:16px; bottom:90px}
  .info-float{position:relative; width:100%; right:auto; top:auto; margin-top:14px}
  .orbit{display:none}
  .page-visual{min-height:320px}
  .photo-stack{min-height:420px}
  .photo-stack .main{inset:0 30px 80px 0}
  .photo-stack .small{width:180px; height:220px}
  .float-card{position:relative; width:100%; right:auto; top:auto; margin-top:14px}
  .footer-grid{grid-template-columns:1fr}
  .footer-nav{justify-content:flex-start}
}


/* ===== Dentique V2: bespoke motion + overlap-safe visual system ===== */
.hero-grid{align-items:center}
.hero-visual{min-height:690px; isolation:isolate}
.dentique-hero-stage{position:relative; min-height:690px; border-radius:42px; background:linear-gradient(145deg,#fff 0%,#fff7f2 44%,#f3ebe7 100%); border:1px solid var(--line); box-shadow:0 34px 90px rgba(86,52,57,.15); overflow:hidden}
.dentique-hero-stage::before{content:""; position:absolute; inset:-25%; background:conic-gradient(from 180deg, transparent, rgba(212,137,153,.13), transparent 34%, rgba(127,183,176,.12), transparent 67%); animation:stageSpin 22s linear infinite; z-index:0}
.dentique-hero-stage::after{content:""; position:absolute; inset:22px; border:1px solid rgba(183,97,119,.10); border-radius:34px; pointer-events:none}
.hero-family-frame{position:absolute; left:28px; top:28px; bottom:28px; width:62%; border-radius:32px; overflow:hidden; z-index:2; box-shadow:0 26px 64px rgba(59,33,36,.18); background:#eee}
.hero-family-frame img{width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.92) contrast(.98)}
.hero-family-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 55%, rgba(29,21,22,.08)); pointer-events:none}
.smile-orbit-card{position:absolute; right:26px; top:84px; width:42%; aspect-ratio:1; border-radius:50%; z-index:4; display:grid; place-items:center; background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.96) 0 31%,rgba(255,255,255,.32) 31.5% 32.5%,transparent 33%), radial-gradient(circle,rgba(212,137,153,.14) 0 52%, transparent 53%); border:1px solid rgba(212,137,153,.26); backdrop-filter:blur(12px); box-shadow:0 22px 52px rgba(77,46,50,.14)}
.smile-orbit-card .orbit-ring,.experience-orbit .orbit-ring{position:absolute; inset:9%; border:1px dashed rgba(183,97,119,.25); border-radius:50%; animation:orbitSpin 16s linear infinite}
.smile-orbit-card .orbit-ring.r2,.experience-orbit .orbit-ring.r2{inset:22%; border-style:solid; border-color:rgba(127,183,176,.22); animation-direction:reverse; animation-duration:11s}
.smile-orbit-card .orbit-dot,.experience-orbit .orbit-dot{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 8px rgba(212,137,153,.12); top:11%; left:50%; transform:translateX(-50%)}
.smile-orbit-card .orbit-dot.b{background:var(--teal); top:auto; left:auto; right:10%; bottom:28%}
.smile-glyph{position:relative; width:48%; aspect-ratio:1.45; border:8px solid #3b2a2e; border-top:0; border-radius:0 0 180px 180px; transform:translateY(6px); opacity:.92}
.smile-glyph::before{content:""; position:absolute; left:13%; right:13%; top:-12px; height:5px; background:linear-gradient(90deg,var(--rose),var(--teal)); border-radius:99px; box-shadow:0 0 18px rgba(212,137,153,.3)}
.hero-proof-card{position:absolute; right:30px; bottom:36px; width:min(280px,43%); padding:22px; border-radius:26px; background:rgba(255,255,255,.90); border:1px solid rgba(255,255,255,.92); z-index:5; box-shadow:0 18px 40px rgba(67,38,42,.15); backdrop-filter:blur(16px)}
.hero-proof-card .proof-kicker{font-size:.73rem; letter-spacing:.19em; text-transform:uppercase; color:var(--rose-deep); font-weight:800}
.hero-proof-card strong{display:block; font-size:1.65rem; margin-top:8px; letter-spacing:-.04em}
.hero-proof-card p{font-size:.92rem; margin:7px 0 0}
.floating-spark{position:absolute; z-index:3; width:10px; height:10px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 8px rgba(212,137,153,.10); animation:floatSpark 5.5s ease-in-out infinite}
.floating-spark.s1{left:68%; top:8%}.floating-spark.s2{right:8%; top:50%; background:var(--teal); animation-delay:-1.8s}.floating-spark.s3{left:73%; bottom:10%; width:7px; height:7px; animation-delay:-3s}

/* Treatment constellation */
.constellation-section{padding:30px 0 92px}
.constellation-shell{display:grid; grid-template-columns:.78fr 1.22fr; gap:26px; align-items:stretch}
.constellation-copy{padding:34px 8px 34px 0}
.treatment-constellation{position:relative; min-height:570px; border-radius:38px; overflow:hidden; background:linear-gradient(145deg,#281e21 0%,#3a2c31 62%,#223432 130%); box-shadow:0 32px 78px rgba(45,25,30,.25); border:1px solid rgba(255,255,255,.06)}
.treatment-constellation::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(212,137,153,.14),transparent 36%), linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:auto,52px 52px,52px 52px; mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent)}
.constellation-core{position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center; text-align:center; color:#fff; z-index:3; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(255,255,255,.06) 50%,rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.16); box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.018); backdrop-filter:blur(8px)}
.constellation-core::before{content:""; position:absolute; inset:-43px; border-radius:50%; border:1px dashed rgba(255,255,255,.14); animation:orbitSpin 18s linear infinite}
.constellation-core strong{font-size:1.3rem; letter-spacing:-.03em}.constellation-core span{display:block; color:rgba(255,255,255,.62); font-size:.84rem; margin-top:5px}
.constellation-line{position:absolute; height:1px; transform-origin:left center; background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(212,137,153,.55),rgba(255,255,255,.08)); z-index:1}
.constellation-line.l1{width:31%; left:25%; top:34%; transform:rotate(17deg)}
.constellation-line.l2{width:33%; left:48%; top:47%; transform:rotate(-28deg)}
.constellation-line.l3{width:30%; left:20%; top:66%; transform:rotate(-18deg)}
.constellation-line.l4{width:28%; left:49%; top:58%; transform:rotate(28deg)}
.constellation-node{position:absolute; width:158px; min-height:112px; padding:17px; border-radius:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(12px); color:#fff; z-index:4; cursor:pointer; transition:.28s ease; text-align:left; font:inherit}
.constellation-node::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 7px rgba(212,137,153,.12); display:block; margin-bottom:12px}
.constellation-node:nth-of-type(even)::before{background:var(--teal)}
.constellation-node strong{display:block; font-size:1rem; margin-bottom:5px}.constellation-node span{color:rgba(255,255,255,.58); font-size:.82rem}
.constellation-node:hover,.constellation-node.active{transform:translateY(-5px); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); box-shadow:0 18px 40px rgba(0,0,0,.18)}
.node-cosmetic{left:7%; top:12%}.node-aligner{right:7%; top:13%}.node-restore{left:8%; bottom:12%}.node-family{right:7%; bottom:12%}
.constellation-readout{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); width:min(84%,520px); text-align:center; z-index:5; color:rgba(255,255,255,.72); font-size:.89rem}

/* Practice lineage visual - no stacked photo overlap */
.practice-lineage{position:relative; min-height:520px; padding:30px; border-radius:38px; border:1px solid var(--line); background:linear-gradient(145deg,#fff,#fff5f1); box-shadow:var(--shadow); overflow:hidden}
.practice-lineage::before{content:""; position:absolute; width:420px; height:420px; border-radius:50%; border:1px dashed rgba(183,97,119,.22); left:50%; top:50%; transform:translate(-50%,-50%); animation:orbitSpin 24s linear infinite}
.practice-lineage::after{content:""; position:absolute; left:50%; top:70px; bottom:70px; width:1px; background:linear-gradient(transparent,var(--rose),var(--teal),transparent)}
.doctor-orb{position:absolute; width:210px; height:260px; border-radius:100px 100px 32px 32px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(70,40,44,.18); border:8px solid #fff; z-index:2}
.doctor-orb img{width:100%; height:100%; object-fit:cover}
.doctor-orb.linique{left:54px; top:54px}.doctor-orb.johan{right:54px; bottom:54px}
.lineage-label{position:absolute; z-index:3; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.88); border:1px solid var(--line); box-shadow:var(--shadow); max-width:190px}
.lineage-label strong{display:block}.lineage-label span{font-size:.83rem; color:var(--muted)}
.label-linique{left:190px; top:84px}.label-johan{right:185px; bottom:86px; text-align:right}
.lineage-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:112px; height:112px; border-radius:50%; background:#2f2427; color:#fff; display:grid; place-items:center; text-align:center; z-index:4; box-shadow:0 0 0 18px rgba(212,137,153,.08)}
.lineage-center strong{font-size:1.65rem}.lineage-center span{display:block; font-size:.72rem; color:rgba(255,255,255,.65)}

/* Animated page visuals */
.abstract-page-visual{position:absolute; inset:0; border-radius:36px; overflow:hidden; background:linear-gradient(145deg,#2d2225,#49353c 70%,#2f4541); border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow)}
.abstract-page-visual .mesh{position:absolute; inset:-30%; background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,transparent 1px 38px); animation:stageSpin 40s linear infinite}
.abstract-page-visual .big-smile{position:absolute; width:58%; aspect-ratio:1.55; left:21%; top:28%; border:7px solid rgba(255,255,255,.86); border-top:0; border-radius:0 0 260px 260px; filter:drop-shadow(0 0 18px rgba(255,255,255,.10)); animation:smileBreathe 4s ease-in-out infinite}
.abstract-page-visual .big-smile::before{content:""; position:absolute; width:46%; height:2px; background:linear-gradient(90deg,var(--rose),var(--teal)); left:27%; top:-24px; box-shadow:0 0 22px rgba(212,137,153,.5)}
.abstract-page-visual .moving-dot{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 9px rgba(212,137,153,.12); animation:floatSpark 4.8s ease-in-out infinite}
.abstract-page-visual .moving-dot.d1{left:18%; top:20%}.abstract-page-visual .moving-dot.d2{right:18%; bottom:22%; background:var(--teal); animation-delay:-1.8s}.abstract-page-visual .moving-dot.d3{left:65%; top:14%; width:7px; height:7px; animation-delay:-3.2s}
.experience-orbit{position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(circle at center,rgba(212,137,153,.14),transparent 36%),linear-gradient(145deg,#fffaf7,#f4ece8); border-radius:36px; border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
.experience-orbit .exp-core{width:190px; height:190px; border-radius:50%; background:#302428; color:#fff; display:grid; place-items:center; text-align:center; z-index:2; box-shadow:0 0 0 28px rgba(212,137,153,.09),0 0 0 58px rgba(127,183,176,.06)}
.experience-orbit .exp-core strong{font-size:3rem; letter-spacing:-.08em}.experience-orbit .exp-core span{display:block; color:rgba(255,255,255,.66); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
.experience-orbit .year-chip{position:absolute; padding:11px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); font-size:.84rem; font-weight:700; z-index:3}
.experience-orbit .y1{left:9%; top:20%}.experience-orbit .y2{right:8%; top:28%}.experience-orbit .y3{left:14%; bottom:15%}.experience-orbit .y4{right:12%; bottom:14%}

/* Smile studio extra motion */
.smile-stage{position:relative; overflow:hidden}
.smile-stage::before{content:""; position:absolute; inset:-30%; background:conic-gradient(from 90deg,transparent,rgba(212,137,153,.09),transparent 35%,rgba(127,183,176,.09),transparent 70%); animation:stageSpin 24s linear infinite}
.smile-stage>*{position:relative; z-index:2}
.tooth{animation:toothWave 3.8s ease-in-out infinite}
.tooth:nth-child(2){animation-delay:-.25s}.tooth:nth-child(3){animation-delay:-.5s}.tooth:nth-child(4){animation-delay:-.75s}.tooth:nth-child(5){animation-delay:-1s}.tooth:nth-child(6){animation-delay:-1.25s}.tooth:nth-child(7){animation-delay:-1.5s}.tooth:nth-child(8){animation-delay:-1.75s}

@keyframes stageSpin{to{transform:rotate(360deg)}}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes floatSpark{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.08)}}
@keyframes smileBreathe{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.035);opacity:1}}
@keyframes toothWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media(max-width:1100px){
  .dentique-hero-stage{min-height:630px}
  .hero-family-frame{width:68%; left:20px; top:20px; bottom:20px}
  .smile-orbit-card{width:39%; right:20px; top:62px}
  .hero-proof-card{right:20px; bottom:26px}
  .constellation-shell{grid-template-columns:1fr}
  .constellation-copy{padding:0 0 8px}
}
@media(max-width:820px){
  .hero-visual{min-height:auto}
  .dentique-hero-stage{min-height:620px}
  .hero-family-frame{left:16px; right:16px; top:16px; bottom:auto; width:auto; height:62%}
  .smile-orbit-card{width:190px; right:20px; top:52%; transform:translateY(-22%)}
  .hero-proof-card{left:20px; right:auto; bottom:18px; width:min(58%,260px); padding:17px}
  .hero-proof-card strong{font-size:1.35rem}
  .floating-spark.s1{left:18%; top:48%}.floating-spark.s2{right:12%; top:77%}.floating-spark.s3{display:none}
  .treatment-constellation{min-height:650px}
  .constellation-core{width:150px; height:150px}
  .constellation-node{width:140px; min-height:100px; padding:14px}
  .node-cosmetic{left:4%; top:7%}.node-aligner{right:4%; top:9%}.node-restore{left:4%; bottom:9%}.node-family{right:4%; bottom:10%}
  .practice-lineage{min-height:620px; padding:16px}
  .doctor-orb{width:175px; height:215px}
  .doctor-orb.linique{left:18px; top:32px}.doctor-orb.johan{right:18px; bottom:34px}
  .label-linique{left:126px; top:70px}.label-johan{right:124px; bottom:70px}
  .lineage-label{max-width:160px; padding:11px 13px}
  .experience-orbit .year-chip{font-size:.75rem; padding:9px 11px}
}
@media(max-width:520px){
  .dentique-hero-stage{min-height:560px}
  .hero-family-frame{height:59%}
  .smile-orbit-card{width:145px; top:49%; right:10px}
  .hero-proof-card{left:14px; bottom:14px; width:64%}
  .treatment-constellation{min-height:760px}
  .constellation-core{top:49%; width:136px; height:136px}
  .constellation-node{width:calc(50% - 20px); min-height:112px}
  .node-cosmetic{left:10px; top:20px}.node-aligner{right:10px; top:20px}.node-restore{left:10px; bottom:35px}.node-family{right:10px; bottom:35px}
  .constellation-readout{bottom:184px; width:80%}
  .practice-lineage{min-height:720px}
  .doctor-orb{width:155px; height:190px}
  .doctor-orb.linique{left:16px; top:22px}.doctor-orb.johan{right:16px; bottom:22px}
  .label-linique{left:18px; top:224px}.label-johan{right:18px; bottom:224px}
  .lineage-center{width:98px; height:98px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.dentique-hero-stage::before,.smile-orbit-card .orbit-ring,.experience-orbit .orbit-ring,.practice-lineage::before,.abstract-page-visual .mesh,.abstract-page-visual .big-smile,.floating-spark,.smile-stage::before,.tooth{animation:none!important}}

/* ===== Dentique V3: face-safe hero composition ===== */
@media (min-width: 821px){
  .dentique-hero-stage{min-height:690px}
  .hero-family-frame{left:28px; top:28px; bottom:28px; width:56%}
  .hero-family-frame img{object-position:48% center}
  .smile-orbit-card{right:24px; top:72px; width:35%}
  .hero-proof-card{right:24px; bottom:34px; width:34%; max-width:260px}
  .floating-spark.s1{left:auto; right:29%; top:8%}
  .floating-spark.s2{right:8%; top:50%}
  .floating-spark.s3{left:auto; right:26%; bottom:10%}
}
@media (max-width: 820px) and (min-width: 621px){
  .hero-visual{min-height:auto}
  .dentique-hero-stage{min-height:620px}
  .hero-family-frame{left:16px; top:16px; bottom:16px; right:auto; width:57%; height:auto}
  .hero-family-frame img{object-position:47% center}
  .smile-orbit-card{width:34%; right:18px; top:74px; transform:none}
  .hero-proof-card{left:auto; right:18px; bottom:36px; width:35%; padding:18px}
  .hero-proof-card strong{font-size:1.25rem}
  .hero-proof-card p{font-size:.88rem}
  .floating-spark.s1{left:auto; right:28%; top:7%}
  .floating-spark.s2{right:7%; top:53%}
  .floating-spark.s3{left:auto; right:29%; bottom:11%; display:block}
}
@media (max-width: 620px){
  .dentique-hero-stage{min-height:790px}
  .hero-family-frame{left:14px; right:14px; top:14px; bottom:auto; width:auto; height:52%}
  .hero-family-frame img{object-position:46% center}
  .smile-orbit-card{width:165px; left:18px; right:auto; top:auto; bottom:86px; transform:none}
  .hero-proof-card{left:auto; right:14px; bottom:16px; width:calc(100% - 205px); min-width:0; max-width:none; padding:16px}
  .hero-proof-card strong{font-size:1.16rem; line-height:1.08}
  .hero-proof-card p{font-size:.84rem; line-height:1.42}
  .hero-proof-card .proof-kicker{font-size:.64rem; letter-spacing:.13em}
  .floating-spark.s1{left:12%; top:57%}
  .floating-spark.s2{right:14%; top:61%}
  .floating-spark.s3{display:none}
}
@media (max-width: 430px){
  .dentique-hero-stage{min-height:830px}
  .hero-family-frame{height:49%}
  .smile-orbit-card{width:145px; left:14px; bottom:112px}
  .hero-proof-card{right:12px; bottom:14px; width:calc(100% - 176px); padding:14px}
  .hero-proof-card strong{font-size:1.05rem}
  .hero-proof-card p{font-size:.8rem}
}

/* ===== Dentique V4: preserve the full family photograph ===== */
.hero-family-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#f8f0ec 0%,#fffaf7 100%);
}
.hero-family-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  filter:saturate(.94) contrast(.99);
}
.hero-family-frame::after{
  display:none !important;
}

@media (min-width: 821px){
  .hero-family-frame{
    width:58%;
  }
  .smile-orbit-card{
    width:33%;
    right:22px;
  }
  .hero-proof-card{
    width:32%;
    right:22px;
  }
}

@media (max-width: 820px) and (min-width: 621px){
  .hero-family-frame{
    width:59%;
  }
  .smile-orbit-card{
    width:32%;
  }
  .hero-proof-card{
    width:32%;
  }
}

@media (max-width: 620px){
  .hero-family-frame{
    height:55%;
  }
}

@media (max-width: 430px){
  .hero-family-frame{
    height:52%;
  }
}