/* Vestadent — shared stylesheet for treatment pages (/treatments/*).
   Reuses the homepage palette, type system and motion language. */
:root{
  --ink:#0E1B28; --navy-900:#07203B; --navy-800:#0B2C4D; --navy-700:#103C5C;
  --navy-600:#1B5580; --navy-500:#2E7BB0; --bone:#DCE8F2; --bone-bright:#EDF4FA;
  --paper:#F7FAFD; --white:#FBFCFE; --cyan:#2BA6E0; --cyan-bright:#5FC2EC;
  --line-dark:rgba(220,232,242,.16); --line-light:rgba(14,27,40,.10);
  --display:'Newsreader',Georgia,serif; --body:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1140px; --e-expo:cubic-bezier(.16,1,.3,1); --e-quart:cubic-bezier(.76,0,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}

.grain{position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.cursor,.cursor-r{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
.cursor{width:7px;height:7px;background:var(--cyan-bright)}
.cursor-r{width:34px;height:34px;border:1px solid rgba(43,166,224,.6);transition:width .35s var(--e-expo),height .35s var(--e-expo)}
.cursor-r.big{width:60px;height:60px;background:rgba(43,166,224,.08);border-color:transparent}
@media(hover:none){.cursor,.cursor-r{display:none}}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));z-index:60}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;
  padding:15px 28px;border-radius:999px;border:none;cursor:pointer;white-space:nowrap;
  transition:background .3s,color .3s,box-shadow .3s,transform .4s var(--e-expo)}
.btn:hover{transform:translateY(-2px)}
.btn-cyan{background:var(--cyan);color:#fff;box-shadow:0 8px 26px rgba(43,166,224,.32)}
.btn-cyan:hover{background:#1F95CE;box-shadow:0 14px 38px rgba(43,166,224,.42)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--line-dark)}
.btn-ghost:hover{border-color:var(--cyan-bright);color:var(--cyan-bright)}
.btn-dark{background:var(--navy-700);color:var(--bone)}.btn-dark:hover{background:var(--navy-600)}
.arr{transition:transform .35s var(--e-expo)}.btn:hover .arr{transform:translateX(4px)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:55;transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,32,59,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-dark)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:22px;font-weight:600;color:#fff}
.brand .mark{width:28px;height:28px;display:inline-block;background-image:url(/logo.png);background-size:contain;background-position:center;background-repeat:no-repeat}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14px;color:rgba(220,232,242,.82)}
.nav-links a:hover{color:var(--cyan-bright)}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-tel{font-family:var(--mono);font-size:13px;color:var(--bone);opacity:.85}
@media(max-width:760px){.nav-links,.nav-tel{display:none}}

/* HERO (split: copy + visual) */
.t-hero{position:relative;color:var(--bone);background:linear-gradient(168deg,var(--navy-800),var(--navy-900) 64%,#051428);
  padding:132px 0 72px;overflow:hidden;isolation:isolate}
.t-hero .aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.42;z-index:0;will-change:transform}
.t-hero .a1{width:560px;height:560px;background:radial-gradient(circle,#1B5580,transparent 68%);top:-200px;right:-140px}
.t-hero .a2{width:440px;height:440px;background:radial-gradient(circle,rgba(95,194,236,.45),transparent 66%);bottom:-220px;left:-160px;opacity:.3}
.t-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center}
.t-hero-copy{max-width:600px}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:rgba(220,232,242,.6);margin-bottom:20px}
.crumb a:hover{color:var(--cyan-bright)}.crumb span{color:var(--cyan-bright)}
.t-hero .eyebrow{color:var(--cyan-bright)}
.t-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(36px,5.4vw,66px);line-height:1.02;letter-spacing:-.02em;margin:16px 0 0}
.t-hero .lede{font-size:clamp(16px,1.6vw,19px);max-width:560px;margin:20px 0 0;color:rgba(220,232,242,.84)}
.t-hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* hero visual panel */
.hero-visual{position:relative;aspect-ratio:1/1;border-radius:26px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 22%,#0e3a5f,#061d36);border:1px solid var(--line-dark);
  box-shadow:0 40px 90px rgba(0,0,0,.35)}
.viz-arch{position:absolute;inset:0;z-index:1;pointer-events:none}
.viz-arch path{fill:none;stroke:var(--cyan);stroke-width:1.1;opacity:.5}
.hero3d{position:absolute;inset:0;z-index:2;cursor:grab}
.hero3d canvas{display:block}
.viz{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.viz-tag{position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(220,232,242,.72);background:rgba(7,32,59,.5);backdrop-filter:blur(6px);padding:6px 11px;border-radius:999px}
.viz-hint{position:absolute;right:16px;bottom:14px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,232,242,.45)}
.viz-fallback{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;transition:opacity .6s}

/* sections */
.sec{padding:84px 0;position:relative}
.sec.alt{background:var(--bone-bright)}
.sec.dark{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:var(--bone);overflow:hidden}
.sec h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.015em;margin-bottom:24px}
.sec.dark h2{color:#fff}
.lead-col{max-width:760px}
.lead-col p{font-size:17px;color:rgba(14,27,40,.74);margin-bottom:18px}
.sec.dark .lead-col p{color:rgba(220,232,242,.8)}
.sec .kicker{color:var(--cyan);margin-bottom:14px;display:block}

/* lists */
.ticks{list-style:none;display:grid;gap:14px;max-width:760px}
.ticks li{position:relative;padding-left:34px;font-size:16px;color:rgba(14,27,40,.8)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* benefits / considerations */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{background:#fff;border:1px solid var(--line-light);border-radius:20px;padding:30px 30px}
.panel h3{font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:16px}
.panel ul{list-style:none;display:grid;gap:12px}
.panel li{position:relative;padding-left:26px;font-size:15px;color:rgba(14,27,40,.76);line-height:1.5}
.panel.good li::before{content:"+";position:absolute;left:0;color:var(--cyan);font-weight:700}
.panel.note li::before{content:"\2022";position:absolute;left:2px;color:var(--navy-500);font-weight:700}

/* how it works — animated step diagram */
.steps-wrap{position:relative}
.steps-line{position:absolute;left:0;right:0;top:11px;height:2px;z-index:0}
.steps-line path{fill:none;stroke:var(--cyan);stroke-width:2;opacity:.5}
.steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{padding-top:26px}
.step .dot{position:absolute;top:4px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--cyan);transform:translateY(-50%)}
.sec.alt .step .dot{background:var(--bone-bright)}
.step .sn{font-family:var(--mono);font-size:12px;color:var(--cyan)}
.step h4{font-family:var(--display);font-size:20px;font-weight:500;margin:12px 0 8px}
.step p{font-size:14.5px;color:rgba(14,27,40,.66);line-height:1.55}

/* anatomy figure (schematic, scroll-drawn) */
.anatomy{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;margin-top:8px}
.anatomy-fig{aspect-ratio:1/1;border-radius:22px;background:radial-gradient(120% 100% at 50% 25%,#0e3a5f,#061d36);border:1px solid var(--line-dark);padding:8%;position:relative;overflow:hidden}
.anatomy-fig svg{width:100%;height:100%;display:block}
.anatomy-cap{font-size:16px;color:rgba(14,27,40,.74);max-width:420px;line-height:1.6}
.anatomy-cap .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:10px}

/* materials spec */
.spec{list-style:none;display:grid;gap:0;border-top:1px solid var(--line-dark);max-width:760px}
.spec li{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-dark);font-size:15px}
.spec li b{font-weight:500;color:#fff}.spec li span{color:rgba(220,232,242,.7);font-family:var(--mono);font-size:12.5px;text-align:right}

/* real-photo slot */
.photo-slot{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-light);background:var(--bone)}
.photo-slot img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.photo-note{margin-top:16px;font-size:12.5px;color:rgba(14,27,40,.55);font-family:var(--mono);letter-spacing:.02em;line-height:1.7}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-light);padding:20px 0}
.faq summary{font-family:var(--display);font-size:19px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--cyan);font-size:22px;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:14px;font-size:15.5px;color:rgba(14,27,40,.72);line-height:1.6;max-width:720px}

/* related */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{background:#fff;border:1px solid var(--line-light);border-radius:18px;padding:26px 26px;display:flex;flex-direction:column;gap:8px;
  transition:transform .45s var(--e-expo),box-shadow .45s,border-color .45s}
.rcard:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(11,44,77,.13);border-color:transparent}
.rcard h4{font-family:var(--display);font-size:20px;font-weight:500}
.rcard p{font-size:14px;color:rgba(14,27,40,.6);line-height:1.5;flex:1}
.rcard .go{font-size:13px;font-weight:500;color:var(--navy-700);display:inline-flex;gap:7px;align-items:center;margin-top:6px}

/* bottom CTA */
.cta{position:relative;background:linear-gradient(155deg,var(--navy-700),var(--navy-900));color:var(--bone);border-radius:26px;padding:56px 44px;text-align:center;margin:0 auto;max-width:var(--maxw);overflow:hidden}
.cta h2{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,42px);color:#fff;margin-bottom:14px}
.cta p{color:rgba(220,232,242,.8);max-width:520px;margin:0 auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
.foot{background:var(--navy-900);color:rgba(220,232,242,.7);padding:64px 0 28px;margin-top:0}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.foot .brand{margin-bottom:14px;color:#fff}
.foot-blurb{font-size:14px;color:rgba(220,232,242,.6);max-width:280px;line-height:1.6}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-bright);margin-bottom:16px}
.foot-col a{display:block;font-size:14px;padding:5px 0;color:rgba(220,232,242,.72)}
.foot-col a:hover{color:var(--cyan-bright)}
.foot-reg{padding:24px 0;border-bottom:1px solid var(--line-dark);font-size:12.5px;color:rgba(220,232,242,.5);line-height:1.7;max-width:820px}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:22px;gap:14px;flex-wrap:wrap}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px}
.foot-legal a{color:rgba(220,232,242,.6)}.foot-legal a:hover{color:var(--cyan-bright)}
.foot-copy{font-family:var(--mono);font-size:11.5px;color:rgba(220,232,242,.4);letter-spacing:.04em}

/* reveal — only hidden once JS marks the document */
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--e-expo),transform .8s var(--e-expo)}
.js [data-reveal].in{opacity:1;transform:none}

/* ===== SVG illustrations (schematic / CGI — never real photos) ===== */
.tooth-body{fill:#F3F7FC}
.gum{fill:#15314e}
.stroke-c{fill:none;stroke:var(--cyan-bright);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.glow{filter:drop-shadow(0 0 10px rgba(95,194,236,.7))}
.veneer-hi{stroke:#5FC2EC;stroke-width:2.4;fill:rgba(95,194,236,.18)}

@media (prefers-reduced-motion: no-preference){
  /* veneers — shell slides onto tooth + shimmer */
  .viz-veneers .veneer{animation:vnSlide 3.6s var(--e-expo) infinite}
  .viz-veneers .shimmer{animation:vnShim 3.6s ease-in-out infinite}
  @keyframes vnSlide{0%{transform:translate(-46px,0);opacity:0}28%,72%{transform:translate(0,0);opacity:1}100%{transform:translate(-46px,0);opacity:0}}
  @keyframes vnShim{0%,40%{transform:translateX(-60px);opacity:0}55%{opacity:.9}70%,100%{transform:translateX(60px);opacity:0}}
  /* crown — cap seats down */
  .viz-crown .cap{animation:crSeat 3.4s var(--e-expo) infinite}
  @keyframes crSeat{0%{transform:translateY(-70px);opacity:0}30%,75%{transform:translateY(0);opacity:1}100%{transform:translateY(-70px);opacity:0}}
  /* bonding — build-up sweeps up */
  .viz-bonding .build{transform-origin:center bottom;animation:bdGrow 3.2s var(--e-expo) infinite}
  @keyframes bdGrow{0%{transform:scaleY(.05);opacity:.2}40%,80%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.05);opacity:.2}}
  /* hollywood smile — teeth light up in sequence */
  .viz-smile .teeth .t{opacity:.35;animation:smLight 3.4s ease-in-out infinite}
  .viz-smile .teeth .t:nth-child(1){animation-delay:0s}.viz-smile .teeth .t:nth-child(2){animation-delay:.12s}
  .viz-smile .teeth .t:nth-child(3){animation-delay:.24s}.viz-smile .teeth .t:nth-child(4){animation-delay:.36s}
  .viz-smile .teeth .t:nth-child(5){animation-delay:.48s}.viz-smile .teeth .t:nth-child(6){animation-delay:.6s}
  .viz-smile .teeth .t:nth-child(7){animation-delay:.72s}
  @keyframes smLight{0%,100%{opacity:.35}45%{opacity:1;filter:drop-shadow(0 0 8px rgba(95,194,236,.8))}}
  /* whitening — brightness rises */
  .viz-whiten .bright{animation:whRise 3.2s ease-in-out infinite}
  @keyframes whRise{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
  .viz-whiten .spark{animation:whSpark 2.4s ease-in-out infinite}
  @keyframes whSpark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
  /* generic float for surgery/clinical */
  .viz-float{animation:vFloat 6s ease-in-out infinite}
  @keyframes vFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
}

[data-reveal]{}
@media(max-width:920px){
  .t-hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{max-width:440px;margin-top:6px}
  .cols2,.steps,.related,.foot-top,.anatomy{grid-template-columns:1fr}
  .steps{gap:26px}.steps-line{display:none}.cols2{gap:18px}
  .step .dot{display:none}.step{padding-top:0;border-top:1px solid var(--line-light);padding-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .t-hero .aurora{display:none}
}