/* Chever3d - Dr Pal's scroll site. Glassmorphism. System fonts only. */
:root{--blue:#2f7bff;--pink:#ff5fa8;--ink:#fff;--mx:0;--my:0}
*{box-sizing:border-box;margin:0}
html{background:#0a1424}
body{font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#0a1424;overflow-x:hidden}

@font-face{font-family:D1;src:url(fonts/dentist1.woff) format("woff");font-display:swap}
@font-face{font-family:DC;src:url(fonts/dentalcare.woff) format("woff");font-display:swap}
@font-face{font-family:MD;src:url(fonts/medical.woff) format("woff");font-display:swap}
.ic{font-style:normal;font-weight:400;line-height:1;display:inline-block;text-shadow:none}
.ic.d1{font-family:D1}.ic.dc{font-family:DC}.ic.md{font-family:MD}
/* ---------- glass ---------- */
.glass{position:relative;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.05)),rgba(12,28,58,.30);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.34);border-radius:26px;
  box-shadow:0 20px 55px rgba(5,15,40,.38),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.1)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at calc(50% + var(--mx)*35%) -15%,rgba(255,255,255,.38),transparent 55%)}
.pill{border-radius:999px;padding:10px 20px;text-decoration:none;font-weight:650;font-size:15px}

/* ---------- chrome ---------- */
#prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:40;background:linear-gradient(90deg,var(--blue),var(--pink));transform:scaleX(0);transform-origin:0 50%}
#bar{position:fixed;inset:14px 0 auto 0;width:min(1120px,calc(100% - 36px));margin:0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
#bar>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;letter-spacing:.01em}
.logo .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--pink));box-shadow:0 0 12px var(--pink)}
.bookbtn{transition:transform .2s}.bookbtn:hover{transform:translateY(-2px) scale(1.04)}
#rail{position:fixed;right:16px;top:50%;translate:0 -50%;z-index:30;display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-radius:999px;transition:opacity .4s}
#rail.off{opacity:0;pointer-events:none}
#rail .dot{position:relative;width:22px;height:22px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
#rail .dot i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);transition:all .3s}
#rail .dot.on i{width:12px;height:12px;background:linear-gradient(135deg,var(--blue),var(--pink));box-shadow:0 0 14px var(--pink)}
#rail .dot span{position:absolute;right:30px;top:50%;translate:8px -50%;opacity:0;pointer-events:none;white-space:nowrap;font-size:12px;font-weight:600;color:#fff;padding:5px 12px;border-radius:999px;background:rgba(12,28,58,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);transition:all .25s}
#rail .dot:hover span,#rail .dot.on span{opacity:1;translate:0 -50%}

/* ---------- stage ---------- */
#track{position:relative}
#stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#0a1424 url(v/intro-poster.jpg) center/cover}
#vids video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
#vids video.on{opacity:1}
#shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,12,30,.45)),linear-gradient(transparent 60%,rgba(5,12,30,.4))}
#orbs{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.5}
#orbs b{position:absolute;border-radius:50%;filter:blur(60px);animation:drift 14s ease-in-out infinite alternate}
#orbs b:nth-child(1){width:34vmax;height:34vmax;left:-8vmax;top:-6vmax;background:#2f7bff}
#orbs b:nth-child(2){width:28vmax;height:28vmax;right:-6vmax;bottom:-8vmax;background:#ff5fa8;animation-duration:18s}
#orbs b:nth-child(3){width:18vmax;height:18vmax;left:45%;top:30%;background:#6fe0ff;opacity:.45;animation-duration:22s}
@keyframes drift{to{transform:translate3d(6vmax,4vmax,0) scale(1.15)}}
#ghosts,#ui{position:absolute;inset:0;pointer-events:none}
.ghost{position:absolute;left:3vw;bottom:-1vw;font-size:clamp(90px,19vw,300px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4);opacity:0;will-change:transform,opacity;white-space:nowrap}

/* ---------- panels ---------- */
.panel{position:absolute;top:50%;width:min(470px,86vw);padding:30px 32px 32px;visibility:hidden;opacity:0;will-change:transform,opacity;pointer-events:auto;
  translate:0 -50%;transform-style:preserve-3d}
.panel.left{left:6vw}.panel.right{right:6vw}
.panel.center{left:50%;translate:-50% -50%;text-align:center}
.panel.hero{width:min(680px,90vw);padding:26px 34px 28px;top:auto;bottom:15vh;translate:-50% 0}
.panel.hero h2{font-size:clamp(28px,4.4vw,54px);margin-bottom:8px}
.panel.book{width:min(560px,90vw)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#bfe0ff;margin-bottom:12px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
.panel h2{font-size:clamp(28px,3.6vw,46px);line-height:1.08;font-weight:780;letter-spacing:-.015em;margin-bottom:12px}
.panel p{color:rgba(255,255,255,.92);font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.center .chips{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 10px;border-radius:999px;font-size:14px;font-weight:550;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);animation:bob 4.5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*-.7s)}
@keyframes bob{to{translate:0 -4px}}
.person{margin-top:18px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.person b{display:block}.person span{font-size:13px;color:rgba(255,255,255,.85)}
.btn{display:inline-block;border:0;cursor:pointer;font:650 17px system-ui,sans-serif;padding:14px 30px;border-radius:999px;color:#fff;text-decoration:none;margin-top:22px;
  background:linear-gradient(135deg,#2f7bff,#ff5fa8);box-shadow:0 10px 30px rgba(47,123,255,.45),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .2s,box-shadow .2s;text-shadow:none}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(255,95,168,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.pulse{animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,95,168,.55),0 10px 30px rgba(47,123,255,.45)}70%,100%{box-shadow:0 0 0 22px rgba(255,95,168,0),0 10px 30px rgba(47,123,255,.45)}}
.ghostbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#hint{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:opacity .4s;text-shadow:0 1px 8px rgba(0,0,0,.5)}
#hint i{width:22px;height:36px;border-radius:12px;border:2px solid rgba(255,255,255,.8);position:relative}
#hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:#fff;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}
#hint.off{opacity:0}

/* ---------- team + footer ---------- */
.sec{position:relative;overflow:hidden;padding:110px 5vw;background:linear-gradient(180deg,#0a1424,#0f2144)}
#foot{background:linear-gradient(180deg,#0f2144,#0a1424)}
.sec .wrap{position:relative;z-index:2;max-width:1150px;margin:auto;text-align:center}
.sec h2{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.02em;margin-bottom:40px}
.orbs b{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:drift 16s ease-in-out infinite alternate}
.o1{width:460px;height:460px;background:#2f7bff;top:-120px;left:-100px}
.o2{width:380px;height:380px;background:#ff5fa8;right:-80px;top:30%;animation-duration:20s!important}
.o3{width:320px;height:320px;background:#6fe0ff;left:40%;bottom:-120px;opacity:.35!important}
.rev{opacity:0;transform:translateY(44px) scale(.96);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rev.in{opacity:1;transform:none}
#teamGrid{display:grid;grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;gap:22px}
.mem{padding:12px 12px 18px;transition:transform .35s,box-shadow .35s}
.mem.in:hover{transform:translateY(-8px) rotate(-.6deg)}
.mem .pv{border-radius:18px;background:#16294a;overflow:hidden}
.mem video{width:100%;aspect-ratio:320/340;object-fit:cover;display:block;transform:translateX(calc(var(--dx,0)*1%))}
.mem b{display:block;margin-top:14px;font-size:17px}
.mem span{display:block;font-size:13px;color:rgba(255,255,255,.82);padding:0 8px;margin-top:2px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;text-align:left}
.card{padding:32px}
.card h3{font-size:22px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card p{color:rgba(255,255,255,.9)}
.card a:not(.btn){color:#bfe0ff}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.acts{gap:10px}.acts .btn{margin-top:20px;font-size:15px;padding:12px 20px}
.badge{font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(80,220,140,.25);border:1px solid rgba(80,220,140,.6);color:#b8ffd9}
.badge.closed{background:rgba(255,120,120,.2);border-color:rgba(255,120,120,.55);color:#ffd0d0}
#timings{width:100%;border-collapse:collapse;font-size:16px}
#timings td{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.2)}
#timings td:last-child{text-align:right;font-weight:600}
.credit{margin-top:50px;font-size:13px;color:rgba(255,255,255,.55)}

@media (max-width:700px){
  .panel.hero{translate:0 0}
  .panel,.panel.left,.panel.right,.panel.center{left:4vw;right:4vw;width:auto;top:auto;bottom:5vh;translate:0 0;text-align:left;padding:22px 22px 24px}
  .panel.hero{bottom:12vh}
  .panel h2{font-size:26px}.panel p{font-size:15px}
  .center .chips{justify-content:flex-start}
  #rail{right:6px}.logo span{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.chip,#orbs b,.orbs b,.btn.pulse{animation:none}.rev{transition:none}}

.chip .ic{font-size:21px;color:#fff;opacity:.95}
.menu{display:flex;gap:2px;padding:5px}
.menu a{color:#fff;text-decoration:none;padding:6px 15px;border-radius:999px;font-size:14px;font-weight:600;transition:background .2s}
.menu a:hover,.menu a.on{background:rgba(255,255,255,.22)}
@media (max-width:900px){#bar{flex-wrap:wrap;gap:8px}.menu{order:3;width:100%;justify-content:center;overflow-x:auto}.menu a{padding:6px 11px;font-size:13px;white-space:nowrap}}

.mem.first{grid-column:1/-1;justify-self:center;width:min(100%,370px);padding:14px 14px 22px}
.mem.first b{font-size:23px}.mem.first span,.mem.first em{font-size:15px}
@media (max-width:900px){#teamGrid,.grid.team{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:520px){#teamGrid,.grid.team{grid-template-columns:1fr!important}}
@media (max-width:520px){.mem.first{width:100%;justify-self:stretch}}
/* Book button: attention grabber */
.bookbtn{position:relative;overflow:hidden;color:#fff;font-weight:750;letter-spacing:.02em;padding:11px 24px;
  background:linear-gradient(135deg,#2f7bff,#ff5fa8)!important;border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 6px 24px rgba(255,95,168,.55),inset 0 1px 0 rgba(255,255,255,.6);animation:bookpulse 2s infinite}
.bookbtn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:bookshine 3.2s infinite}
@keyframes bookpulse{0%{box-shadow:0 6px 24px rgba(255,95,168,.55),0 0 0 0 rgba(255,95,168,.6)}70%,100%{box-shadow:0 6px 24px rgba(255,95,168,.55),0 0 0 16px rgba(255,95,168,0)}}
@keyframes bookshine{0%,55%{left:-70%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.bookbtn,.bookbtn::after{animation:none}}

/* footer contact rows (Chever3d) */
#addr{margin:4px 0 6px}
#addr .adr{display:block;color:rgba(255,255,255,.88);line-height:1.6;margin-bottom:16px}
.card a.crow{display:flex;align-items:center;gap:14px;margin:0 0 10px;padding:10px 14px 10px 10px;border-radius:16px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);transition:background .25s,transform .25s,border-color .25s}
.card a.crow:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);transform:translateX(4px)}
.crow .ci{flex:0 0 42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#2f7bff,#ff5fa8);box-shadow:0 6px 16px rgba(47,123,255,.35)}
.crow .ci svg{width:20px;height:20px}
.crow .ct{display:flex;flex-direction:column;min-width:0}
.crow small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#bfe0ff;font-weight:600}
.crow b{font-size:17px;font-weight:650;overflow-wrap:anywhere}

/* Instagram follow button */
.igbtn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(45deg,#f9a03f,#e1306c 55%,#833ab4)!important;border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 26px rgba(225,48,108,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.igbtn .igi{width:20px;height:20px}
.igbtn:hover{box-shadow:0 16px 38px rgba(225,48,108,.55),inset 0 1px 0 rgba(255,255,255,.5)}
@media (min-width:900px){#foot .fgrid{grid-template-columns:1.35fr 1fr}}
#foot .acts .btn{padding:12px 16px}
/* team: 3 side by side, Dr Pal in the middle and larger */
@media (min-width:901px){
  #teamGrid,.grid.team{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr)!important;max-width:1080px;margin:0 auto;align-items:center;gap:26px}
  #teamGrid .mem:nth-child(2),.grid.team .mem:nth-child(2){order:-1}
  .mem.first{grid-column:auto;justify-self:stretch;width:100%}
}