:root { --navy:#202058; --blue:#0798ce; --ink:#151932; --muted:#667085; --line:#e7ebf2; --soft:#f5f8fc; --font-display:'Manrope',sans-serif; --font-body:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:var(--font-body),sans-serif; }
a { color:inherit; text-decoration:none; }
.announcement { background:var(--navy); color:#dbe9ff; text-align:center; padding:10px 20px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.nav { height:118px; max-width:1240px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:relative; z-index:10; background:#fff; }
.brand { display:flex; align-items:center; color:var(--navy); }
.brandLogo { display:block; width:68px; height:68px; object-fit:contain; }
.nav .brandLogo { width:104px; height:104px; }
.footerLogo { width:82px; height:82px; }
.navLinks { display:flex; gap:34px; color:#596179; font-size:13px; font-weight:700; }
.navLinks a:hover { color:var(--blue); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:54px; padding:0 24px; border-radius:14px; background:var(--blue); color:#fff; font-weight:800; font-size:14px; box-shadow:0 14px 30px #0798ce28; transition:.25s ease; }
.button:hover { transform:translateY(-2px); background:#0686b6; box-shadow:0 18px 35px #0798ce3b; }
.buttonSmall { min-height:44px; padding:0 18px; border-radius:12px; }
.floatingActions { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); z-index:50; display:none; flex-direction:column; align-items:center; gap:10px; }
.floatingAction { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:#fff; box-shadow:0 12px 34px #15193235; transition:transform .2s ease,box-shadow .2s ease; }
.floatingAction:hover { transform:translateY(-2px); box-shadow:0 16px 38px #15193245; }
.floatingAction svg { width:25px; height:25px; fill:currentColor; }
.floatingCall { background:var(--navy); }
.floatingWhatsApp { background:#25d366; }
.hero { min-height:700px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; max-width:1320px; margin:auto; padding:62px 64px 90px; overflow:hidden; }
.heroCopy { max-width:650px; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow span { width:24px; height:2px; background:currentColor; }
h1,h2,h3 { font-family:var(--font-display),sans-serif; }
h1 { margin:0; color:var(--navy); font-size:clamp(52px,6vw,82px); line-height:.99; letter-spacing:-.055em; font-weight:800; }
.heroText { max-width:590px; margin:30px 0; color:var(--muted); font-size:18px; line-height:1.75; }
.heroActions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.textLink { padding:12px 0; border-bottom:1px solid #a7aec0; color:var(--navy); font-size:14px; font-weight:800; }
.trustRow { display:flex; gap:44px; margin-top:54px; padding-top:28px; border-top:1px solid var(--line); }
.trustRow div { display:flex; flex-direction:column; gap:5px; }
.trustRow strong { color:var(--navy); font:800 17px/1 var(--font-display),sans-serif; }
.trustRow span { color:#8c94a6; font-size:11px; font-weight:600; }
.heroVisual { position:relative; min-height:570px; display:flex; justify-content:flex-end; align-items:center; }
.heroVisual::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:#e8f8fd; right:-90px; top:10px; }
.imageFrame { position:relative; width:min(470px,90%); height:570px; border-radius:220px 220px 36px 36px; padding:11px; background:#fff; box-shadow:0 35px 80px #20205826; overflow:hidden; }
.imageFrame img { width:100%; height:100%; object-fit:cover; object-position:center 32%; border-radius:210px 210px 28px 28px; }
.floatingCard { position:absolute; left:8px; bottom:55px; display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:16px; background:#fff; box-shadow:0 18px 50px #1d255030; }
.floatingCard div { display:flex; flex-direction:column; gap:4px; }
.floatingCard strong { color:var(--navy); font-size:13px; }
.floatingCard small { color:#8b93a4; font-size:11px; }
.pulse { width:12px; height:12px; border-radius:50%; background:#35c687; box-shadow:0 0 0 6px #35c6871e; }
.section { padding:110px max(24px,calc((100vw - 1200px)/2)); }
.sectionHeading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:54px; }
.sectionHeading h2,.reviewsIntro h2,.doctorCopy h2,.visit h2 { margin:0; color:var(--navy); font-size:clamp(40px,4.5vw,62px); line-height:1.05; letter-spacing:-.045em; }
.sectionHeading>p { max-width:480px; margin:0 0 4px; color:var(--muted); font-size:16px; line-height:1.7; }
.treatments { background:var(--soft); }
.treatmentGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.treatmentCard { min-height:350px; display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:20px; background:#fff; transition:.25s ease; }
.treatmentCard:hover { transform:translateY(-6px); border-color:#bfe8f7; box-shadow:0 22px 45px #27366010; }
.cardTop { display:flex; align-items:center; justify-content:space-between; }
.serviceIcon { width:52px; height:52px; display:grid; place-items:center; border-radius:15px; background:#edf9fd; color:var(--blue); font:800 24px/1 var(--font-display),sans-serif; }
.cardTop small { color:#adb4c2; font-weight:800; }
.treatmentCard h3 { margin:46px 0 14px; color:var(--navy); font-size:21px; letter-spacing:-.02em; }
.treatmentCard p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.treatmentCard a { display:flex; justify-content:space-between; margin-top:auto; padding-top:24px; border-top:1px solid var(--line); color:var(--blue); font-size:12px; font-weight:800; }
.doctors { min-height:710px; display:grid; grid-template-columns:1fr 1fr; padding-top:0; padding-bottom:0; background:var(--navy); color:#fff; }
.doctorPhoto { min-height:710px; margin-left:calc(max(24px,(100vw - 1200px)/2) * -1); overflow:hidden; }
.doctorPhoto img { width:100%; height:100%; object-fit:cover; object-position:center 25%; filter:saturate(.88); }
.doctorCopy { padding:95px 0 95px 80px; }
.eyebrow.light { color:#66cff3; }
.doctorCopy h2 { color:#fff; }
.doctorCopy>p:not(.eyebrow) { max-width:510px; margin:26px 0 38px; color:#c7cbe0; font-size:16px; line-height:1.75; }
.doctorList { max-width:520px; border-top:1px solid #ffffff22; }
.doctorList article { display:flex; align-items:center; gap:18px; padding:23px 0; border-bottom:1px solid #ffffff22; }
.doctorList article>span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#ffffff12; color:#77d6f5; font-weight:800; font-size:12px; }
.doctorList h3 { margin:0 0 5px; font-size:17px; }
.doctorList p { margin:0; color:#aeb5d0; font-size:12px; }
.reviews { background:#fff; overflow:hidden; }
.reviewsIntro { max-width:630px; margin-bottom:54px; }
.reviewsIntro>p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.7; }
.reviewMarquee { width:100%; overflow:hidden; }
.reviewTrack { display:flex; width:max-content; gap:20px; animation:reviewScroll 52s linear infinite; }
.reviewTrack:hover { animation-play-state:paused; }
.reviewTrack figure { width:min(390px,82vw); min-height:320px; margin:0; padding:32px; display:flex; flex:none; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:#fff; }
.stars { color:#f5b942; letter-spacing:.16em; font-size:13px; }
.reviewTrack blockquote { margin:28px 0; color:#30364f; font:600 17px/1.65 var(--font-display),sans-serif; }
.reviewTrack figcaption { display:flex; align-items:center; gap:12px; margin-top:auto; }
.reviewTrack figcaption>span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#eef8fc; color:var(--blue); font-weight:800; }
.reviewTrack figcaption div { display:flex; flex-direction:column; gap:3px; }
.reviewTrack figcaption strong { color:var(--navy); font-size:13px; }
.reviewTrack figcaption small { color:#9aa2b1; font-size:10px; }
@keyframes reviewScroll { to { transform:translateX(calc(-50% - 10px)); } }
@media (prefers-reduced-motion:reduce) { .reviewMarquee { overflow-x:auto; } .reviewTrack { animation:none; } }
.visit { min-height:520px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; margin:0 max(24px,calc((100vw - 1240px)/2)) 80px; padding:80px; border-radius:30px; background:linear-gradient(135deg,#202058,#161640); color:#fff; overflow:hidden; }
.visitCopy { position:relative; z-index:2; max-width:650px; }
.visit h2 { color:#fff; }
.visitCopy>p:not(.eyebrow) { max-width:580px; color:#c6cae0; font-size:16px; line-height:1.7; }
.visitDetails { display:flex; flex-direction:column; gap:4px; margin:24px 0 28px; }
.visitDetails span { color:#8fdcf5; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.visitDetails strong { font:700 18px/1.4 var(--font-display),sans-serif; }
.button.white { background:#fff; color:var(--navy); box-shadow:none; }
.lightLink { color:#fff; border-color:#ffffff66; }
.visitGraphic { position:relative; min-height:330px; display:grid; place-items:center; }
.tooth { width:210px; height:250px; display:grid; place-items:center; z-index:2; }
.tooth img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 28px 28px #08082466); }
.orbit { position:absolute; border:1px solid #5dc9ef55; border-radius:50%; }
.orbitOne { width:310px; height:310px; }
.orbitTwo { width:420px; height:420px; }
.mapSection { display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:64px; margin:0 0 80px; padding:0 max(24px,calc((100vw - 1200px)/2)); }
.mapHeading { display:block; margin:0; }
.mapHeading h2 { max-width:430px; margin:0; color:var(--navy); font-size:clamp(34px,4vw,54px); line-height:1.05; letter-spacing:-.045em; }
.mapHeading .eyebrow { margin-bottom:18px; }
.map-link { display:block; }
.mapCard { width:100%; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:#eef3f7; box-shadow:0 24px 60px #20205818; }
.mapCard iframe { display:block; width:100%; height:360px; }
.enquiry { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; background:var(--soft); }
.enquiryIntro h2 { margin:0; color:var(--navy); font-size:clamp(40px,4.5vw,62px); line-height:1.05; letter-spacing:-.045em; }
.enquiryIntro>p:not(.eyebrow) { max-width:470px; color:var(--muted); font-size:16px; line-height:1.7; }
.contactForm { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:34px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 20px 50px #2736600c; }
.contactForm label { display:flex; flex-direction:column; gap:9px; color:var(--navy); font-size:12px; font-weight:800; }
.contactForm label:nth-of-type(3) { grid-column:1/-1; }
.contactForm input,.contactForm select { width:100%; min-height:52px; padding:0 15px; border:1px solid #dbe1ea; border-radius:11px; background:#fff; color:var(--ink); font:500 14px/1 var(--font-body),sans-serif; outline:none; }
.contactForm input:focus,.contactForm select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #0798ce18; }
.contactForm .button { grid-column:1/-1; border:0; cursor:pointer; }
.formStatus { grid-column:1/-1; margin:0; color:#248a65; font-size:12px; font-weight:700; }
footer { width:calc(100% - 48px); max-width:1200px; margin:0 auto; padding:64px 0 28px; border-top:1px solid var(--line); color:#727c90; font-size:12px; }
.footerMain { display:grid; grid-template-columns:1.15fr 1.4fr .85fr 1fr; gap:58px; padding-bottom:42px; }
.footerBrand p { max-width:220px; margin:14px 0 0; line-height:1.7; }
.footerColumn { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footerColumn h3 { margin:0 0 5px; color:var(--navy); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.footerColumn p { margin:0; line-height:1.75; }
.footerColumn a { color:var(--blue); font-weight:800; }
.footerColumn strong { color:var(--navy); }
.footerPhone { color:var(--navy)!important; font:800 18px/1.3 var(--font-display),sans-serif; }
.footerBottom { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; border-top:1px solid var(--line); }
.footerBottom p { margin:0; }
.footerBottom a { color:var(--navy); font-weight:800; }
.visitorCounter span { color:#98a0b1; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.visitorCounter { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:10px; row-gap:4px; margin-bottom:5px; }
.visitorCounter strong { color:var(--blue); font:800 18px/1 var(--font-display),sans-serif; }
.visitorCounter small { grid-column:1/-1; color:#a3aabb; font-size:10px; }

.thankYouPage { min-height:100vh; display:grid; place-items:center; padding:32px; background:linear-gradient(145deg,#f5f8fc,#eaf7fc); }
.thankYouCard { width:min(680px,100%); padding:64px; border:1px solid var(--line); border-radius:28px; background:#fff; text-align:center; box-shadow:0 30px 80px #20205818; }
.thankYouLogo { width:92px; height:92px; object-fit:contain; }
.thankYouIcon { width:64px; height:64px; display:grid; place-items:center; margin:28px auto 22px; border-radius:50%; background:#e8f9f1; color:#25a96b; font-size:30px; font-weight:800; }
.thankYouCard h1 { font-size:clamp(42px,7vw,68px); }
.thankYouCard>p { max-width:500px; margin:22px auto 0; color:var(--muted); font-size:17px; line-height:1.7; }
.thankYouActions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:34px; }
.thankYouActions .secondaryButton { background:var(--navy); }
.backHome { display:inline-block; margin-top:28px; color:var(--blue); font-size:13px; font-weight:800; }

@media (max-width:980px) {
  .floatingActions { display:flex; }
  .floatingCall { display:none; }
  .navLinks { display:none; }
  .hero { grid-template-columns:1fr; padding:55px 30px 80px; }
  .heroVisual { margin-top:50px; }
  .treatmentGrid { grid-template-columns:1fr 1fr; }
  .doctors { grid-template-columns:1fr; padding:0; }
  .doctorPhoto { margin:0; min-height:560px; }
  .doctorCopy { padding:80px max(30px,calc((100vw - 700px)/2)); }
  .visit { grid-template-columns:1fr; padding:60px 40px; }
  .visitGraphic { display:none; }
  .mapSection { grid-template-columns:1fr; gap:28px; margin-bottom:60px; }
  .mapHeading h2 { max-width:620px; }
  .mapCard iframe { height:350px; }
  .enquiry { grid-template-columns:1fr; gap:40px; }
  footer { margin:0 24px; }
  .footerMain { grid-template-columns:1fr 1fr; gap:38px 50px; }
}
@media (max-width:640px) {
  .floatingCall { display:grid; }
  .announcement { font-size:9px; }
  .nav { height:100px; padding:0 18px; }
  .nav .brandLogo { width:86px; height:86px; }
  .nav .button { min-height:40px; padding:0 13px; font-size:11px; }
  .hero { padding:40px 22px 70px; }
  h1 { font-size:49px; }
  .heroText { font-size:16px; }
  .trustRow { gap:20px; justify-content:space-between; }
  .trustRow strong { font-size:14px; }
  .trustRow span { font-size:9px; }
  .heroVisual { min-height:470px; }
  .imageFrame { height:470px; width:100%; }
  .floatingCard { left:-4px; bottom:30px; }
  .section { padding:78px 22px; }
  .sectionHeading { align-items:start; flex-direction:column; }
  .treatmentGrid { grid-template-columns:1fr; }
  .treatmentCard { min-height:320px; }
  .doctorPhoto { min-height:480px; }
  .doctorCopy { padding:72px 24px; }
  .visit { margin:0 18px 60px; padding:55px 26px; border-radius:24px; }
  .mapSection { padding:0 22px; }
  .mapCard { border-radius:20px; }
  .mapCard iframe { height:300px; }
  .contactForm { grid-template-columns:1fr; padding:24px; }
  .contactForm label:nth-of-type(3),.contactForm .button,.formStatus { grid-column:auto; }
  footer { padding:42px 0 24px; }
  .footerMain { grid-template-columns:1fr; gap:28px; padding-bottom:32px; }
  .footerBottom { align-items:flex-start; flex-direction:column; gap:12px; }
  .floatingActions { right:12px; bottom:max(12px,env(safe-area-inset-bottom)); gap:8px; }
  .floatingAction { width:52px; height:52px; }
  .floatingAction svg { width:23px; height:23px; }
  .thankYouPage { padding:18px; }
  .thankYouCard { padding:42px 22px; border-radius:22px; }
  .thankYouActions { flex-direction:column; }
}