/* Kahan Cardiac — shared design system */

:root{
  --ink:#12141A;
  --ink-soft:#5B6270;
  --ink-faint:#9BA1AC;
  --bg:#FFFFFF;
  --bg-soft:#F6F7F9;
  --line:#E7E9EC;
  --coral:#FF5A5F;
  --coral-deep:#E13F45;
  --coral-soft:#FFE7E8;
  --teal:#00C2A8;
  --teal-deep:#00967F;
  --teal-soft:#DFF7F2;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
/* Contains the off-canvas mobile nav (position:fixed + transform) so its
   translated-offscreen box never creates a horizontally-scrollable page —
   this is the standard technique for off-canvas panels, not a layout patch.
   Scoped to html only (the real scrolling element): applying overflow-x to
   BOTH html and body forces overflow-y:auto on both too (a CSS overflow-pairing
   side effect), and two nested overflow:auto ancestors breaks position:sticky
   on the header entirely. */
html{overflow-x:hidden; max-width:100%;}
body{
  font-family:'Manrope', Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img, svg, iframe{max-width:100%;}
.container{width:100%;}
h1,h2,h3,.display{font-family:'Sora', Arial, sans-serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{max-width:1240px; margin:0 auto; padding:0 32px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* ---------- Motion ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes blobMove{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-18px,16px) scale(1.06);} }
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(0,194,168,.4);} 100%{box-shadow:0 0 0 12px rgba(0,194,168,0);} }
@keyframes shimmer{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
.fade-up{animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both;}
.d1{animation-delay:.05s;} .d2{animation-delay:.16s;} .d3{animation-delay:.28s;} .d4{animation-delay:.4s;} .d5{animation-delay:.52s;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger.in-view > *{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;}
.reveal-stagger.in-view > *:nth-child(1){animation-delay:0s;}
.reveal-stagger.in-view > *:nth-child(2){animation-delay:.08s;}
.reveal-stagger.in-view > *:nth-child(3){animation-delay:.16s;}
.reveal-stagger.in-view > *:nth-child(4){animation-delay:.24s;}
.reveal-stagger.in-view > *:nth-child(5){animation-delay:.32s;}
.reveal-stagger.in-view > *:nth-child(6){animation-delay:.4s;}
.reveal-stagger.in-view > *:nth-child(7){animation-delay:.48s;}
.reveal-stagger.in-view > *:nth-child(8){animation-delay:.56s;}
.reveal-stagger.in-view > *:nth-child(9){animation-delay:.64s;}
.reveal-stagger.in-view > *:nth-child(10){animation-delay:.72s;}
.reveal-stagger.in-view > *:nth-child(11){animation-delay:.8s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *, .fade-up{animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;}
}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink); color:#C9CDD4; font-size:12.5px;}
.topbar .container{display:flex; justify-content:space-between; align-items:center; height:38px;}
.topbar .right{display:flex; gap:26px;}
.topbar .right a{display:inline-flex; align-items:center; gap:6px;}
.topbar .right a:hover{color:#fff;}
.ic-inline{width:14px; height:14px; flex-shrink:0; fill:currentColor;}
.social-row{display:flex; gap:10px;}
.social-row a{width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#C9CDD4; transition:background .25s ease, color .25s ease, transform .25s ease;}
.social-row a svg{width:13px; height:13px; fill:currentColor;}
.social-row a:hover{background:var(--coral); color:#fff; transform:translateY(-2px);}

/* ---------- Header ---------- */
header.site{background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:65;}
header.site .container{display:flex; align-items:center; justify-content:space-between; height:100px;}
.logo{display:flex; align-items:center; flex-shrink:1; min-width:0; overflow:hidden;}
.logo .mark-svg{height:82px; width:auto; max-width:100%; object-fit:contain; flex-shrink:0; transition:transform .3s ease;}
.logo .mark-svg:hover{transform:scale(1.04);}

nav.main{display:flex; gap:30px;}
nav.main a{font-size:14.5px; font-weight:600; color:var(--ink); padding:8px 0; position:relative; transition:color .2s;}
nav.main a:hover{color:var(--coral-deep);}
nav.main a.active{color:var(--coral-deep);}
nav.main a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--teal); border-radius:3px;}

.header-cta{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.btn{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; padding:13px 24px; border-radius:12px; cursor:pointer; white-space:nowrap; transition:transform .25s ease, box-shadow .25s ease; border:none; font-family:inherit;}
.btn-coral{background:var(--coral); color:#fff; box-shadow:0 12px 24px -8px rgba(255,90,95,.5);}
.btn-coral:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 16px 30px -8px rgba(255,90,95,.6);}
.btn-outline{border:1.5px solid var(--ink); color:var(--ink); background:transparent;}
.btn-outline:hover{background:var(--ink); color:#fff;}

.nav-toggle{display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.25s;}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.25s;}
.nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
.nav-toggle.open span{background:transparent;}
.nav-toggle.open span::before{transform:rotate(45deg); top:0;}
.nav-toggle.open span::after{transform:rotate(-45deg); top:0;}

/* ---------- Mobile menu drawer + overlay ----------
   Independent of header.site on purpose: header.site has backdrop-filter,
   which creates a containing block for position:fixed descendants — a fixed
   drawer nested inside it would be confined to the header's own ~100px box
   instead of the full viewport. Keeping the drawer as a body-level sibling
   avoids that entirely. Hidden by default; shown only in the max-width:768px
   block below, so desktop is completely unaffected. */
.mobile-menu-overlay{
  display:none; position:fixed; inset:0; background:rgba(18,20,26,.55);
  z-index:70; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.mobile-menu-overlay.open{opacity:1; pointer-events:auto;}

.mobile-drawer{
  display:none; flex-direction:column;
  position:fixed; top:0; right:0; height:100vh; height:100dvh; width:80vw;
  background:#fff; z-index:75; box-shadow:-12px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%); transition:transform .3s ease;
}
.mobile-drawer.open{transform:translateX(0);}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.drawer-logo{height:36px; width:auto; max-width:60%; object-fit:contain;}
.drawer-close{
  width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; color:var(--ink); cursor:pointer;
}
.drawer-close:hover{background:var(--bg-soft); border-color:var(--border-strong,var(--line));}
.drawer-links{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 24px 24px; overflow-y:auto; flex:1 1 auto; min-height:0;
}
/* Non-scrolling flex sibling after .drawer-links (flex:1) — stays pinned at
   the drawer's bottom regardless of how long the scrollable link list gets. */
.drawer-cta{
  flex-shrink:0; padding:16px 20px; border-top:1px solid var(--line); background:#fff;
}
body.menu-open{overflow:hidden;}

/* Tablet drawer width: 40vw between 426px and 768px; mobile keeps the 80vw
   base rule (defined above) at 425px and below. */
@media (min-width: 426px) and (max-width: 768px){
  .mobile-drawer{width:55vw;}
}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--bg-soft); overflow:hidden;}
.hero .blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; animation:blobMove 10s ease-in-out infinite;}
.hero .blob1{width:420px; height:420px; background:var(--coral); top:-140px; right:60px;}
.hero .blob2{width:340px; height:340px; background:var(--teal); bottom:-120px; left:-60px; animation-delay:2s;}
.hero .container{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:50px 25px 65px;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:7px 16px; border-radius:24px; font-size:12.5px; font-weight:700; letter-spacing:.3px; color:var(--teal-deep); margin-bottom:24px; box-shadow:0 8px 16px -10px rgba(0,0,0,.1);}
.hero .eyebrow .live{width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulseDot 2s infinite;}
.hero h1{font-size:52px; line-height:1.1; font-weight:700; margin-bottom:20px; letter-spacing:-1px;}
.hero h1 .hl{color:var(--coral-deep); position:relative; white-space:nowrap;}
.hero p.lead{font-size:17.5px; color:var(--ink-soft); max-width:480px; margin-bottom:34px;}
.hero .actions{display:flex; gap:16px; margin-bottom:44px; flex-wrap:wrap;}
.hero .stats{display:flex; gap:44px; flex-wrap:wrap;}
.hero .stats .stat .num{font-size:28px; font-weight:800; font-family:'Sora',sans-serif;}
.hero .stats .stat .num.c{color:var(--coral-deep);}
.hero .stats .stat .num.t{color:var(--teal-deep);}
.hero .stats .stat .lbl{font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.4px; margin-top:2px;}

.hero-card{background:#fff; border-radius:24px; padding:30px; box-shadow:0 40px 70px -30px rgba(18,20,26,.28); border:1px solid var(--line);}
.hero-card .photo{height:220px; border-radius:16px; margin-bottom:20px; overflow:hidden;}
.hero-card .photo img{width:100%; height:100%; object-fit:cover;}
.hero-card h3{font-size:18px; margin-bottom:5px; font-weight:700;}
.hero-card p{font-size:13px; color:var(--ink-soft); margin-bottom:18px;}
.hero-card .badge{display:inline-flex; align-items:center; gap:6px; background:var(--coral-soft); color:var(--coral-deep); font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; margin-bottom:16px;}
.hero-card form{display:flex; flex-direction:column; gap:11px;}
.hero-card input{border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; font-size:13.5px; font-family:inherit; transition:border-color .2s; width:100%;}
.hero-card input:focus{outline:none; border-color:var(--teal);}
.hero-card .btn{justify-content:center; margin-top:4px; width:100%;}
.hero-card .field-error{color:var(--coral-deep); font-size:12px; display:none;}
.hero-card .form-msg{font-size:13px; margin-top:8px; display:none;}
.hero-card .form-msg.show{display:block;}
.hero-card .form-msg.ok{color:var(--teal-deep);}
.hero-card .form-msg.err{color:var(--coral-deep);}

/* ---------- Page hero (non-home pages) ---------- */
.page-hero{background:var(--ink); color:#fff; padding:64px 0; position:relative; overflow:hidden;}
.page-hero .container{position:relative; z-index:1;}
.page-hero .crumb{font-size:13px; color:#9BA1AC; margin-bottom:12px;}
.page-hero .crumb a:hover{color:#fff;}
.page-hero h1{font-size:38px; font-weight:700;}
.page-hero .blob{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35;}
.page-hero .blob1{width:300px; height:300px; background:var(--coral); top:-100px; right:80px;}
.page-hero .blob2{width:260px; height:260px; background:var(--teal); bottom:-120px; left:40px;}

/* ---------- Trust / accreditation strips ---------- */
.trust{background:#fff; border-bottom:1px solid var(--line);}
.trust .container{display:flex; justify-content:space-between; padding:24px 32px; gap:20px; flex-wrap:wrap;}
.trust .row{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--ink); font-weight:700;}
.trust .row .ic{width:36px; height:36px; border-radius:10px; background:var(--teal-soft); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}

.accred{background:var(--bg-soft); border-bottom:1px solid var(--line);}
.accred .container{display:flex; align-items:center; justify-content:space-between; padding:22px 32px; gap:24px; flex-wrap:wrap;}
.accred .label{font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;}
.accred .badges{display:flex; gap:14px; flex:1; justify-content:flex-end; flex-wrap:wrap;}
.accred .badge-pill{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 16px; font-size:12.5px; font-weight:700;}
.accred .badge-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--coral);}

/* ---------- Sections ---------- */
section{padding:90px 0;}
.section-head{text-align:center; max-width:660px; margin:0 auto 50px;}
.section-head .kicker{color:var(--teal-deep); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px; display:inline-flex; align-items:center; gap:7px;}
.section-head.left .kicker{justify-content:flex-start;}
.section-head .kicker .ic-inline{width:15px; height:15px;}
.section-head h2{font-size:36px; font-weight:700; margin-bottom:16px; letter-spacing:-.5px;}
.section-head p{color:var(--ink-soft); font-size:15.5px;}
.section-head.left{text-align:left; margin:0 0 40px;}

/* ---------- Services grid ---------- */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.services-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width: 1024px){ .services-grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 768px){ .services-grid-3{grid-template-columns:1fr;} }
.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width: 600px){ .compare-grid{grid-template-columns:1fr; gap:28px;} }
.service-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px 24px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; display:flex; flex-direction:column;}
.service-card:nth-child(odd) .ic{background:var(--coral-soft); color:var(--coral-deep);}
.service-card:nth-child(even) .ic{background:var(--teal-soft); color:var(--teal-deep);}
.service-card:hover{transform:translateY(-8px) rotate(-.3deg); box-shadow:0 26px 44px -20px rgba(18,20,26,.18); border-color:transparent;}
.service-card .ic{width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:18px; font-weight:700;}
.service-card h4{font-size:16px; margin-bottom:9px; font-weight:700;}
.service-card p{font-size:13px; color:var(--ink-soft); margin-bottom:16px; flex:1;}
.service-card .more{font-size:12.5px; font-weight:800; color:var(--ink); display:inline-flex; align-items:center; gap:5px;}

/* ---------- Doctor / about ---------- */
.doctor{background:var(--ink); color:#fff;}
.doctor .container{display:grid; grid-template-columns:.7fr 1.3fr; gap:56px; align-items:center; padding:84px 32px;}
.doctor-photo{height:340px; border-radius:24px; position:relative; overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.5);}
.doctor-photo img{width:100%; height:100%; object-fit:cover;}
.doctor-info .kicker{color:var(--coral); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:14px;}
.doctor-info h2{font-size:30px; font-weight:700; margin-bottom:6px;}
.doctor-info .role{font-size:14.5px; color:#A9AFB9; margin-bottom:22px;}
.doctor-info p{font-size:15px; color:#C7CBD3; max-width:560px; margin-bottom:24px;}
.cred-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.cred-grid .row{display:flex; gap:10px; font-size:13.5px; color:#DEE1E6;}
.cred-grid .row .chk{width:20px; height:20px; border-radius:6px; background:var(--teal); color:#0A1512; font-size:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; font-weight:800;}

.about{background:#fff;}
.about .container{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center;}
.about-photo{height:400px; border-radius:28px; position:relative; box-shadow:0 30px 60px -24px rgba(18,20,26,.3); overflow:visible;}
.about-photo img{width:100%; height:100%; object-fit:cover; border-radius:28px;}
.about-photo .float-card{position:absolute; bottom:-26px; right:-26px; background:#fff; border-radius:18px; padding:20px 24px; box-shadow:0 24px 48px -18px rgba(0,0,0,.2); display:flex; gap:16px; align-items:center;}
.about-photo .float-card .num{font-size:28px; font-weight:800; font-family:'Sora',sans-serif; color:var(--coral-deep);}
.about-photo .float-card .lbl{font-size:11.5px; color:var(--ink-soft); max-width:120px;}
.about .kicker{color:var(--teal-deep); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:14px;}
.about h2{font-size:32px; font-weight:700; margin-bottom:18px; line-height:1.28; letter-spacing:-.4px;}
.about p{color:var(--ink-soft); font-size:15.5px; margin-bottom:24px; max-width:520px;}
.about ul{display:flex; flex-direction:column; gap:13px; margin-bottom:28px;}
.about li{display:flex; gap:11px; font-size:14.5px; color:var(--ink); font-weight:700;}
.about li .chk{width:22px; height:22px; border-radius:7px; background:var(--coral-soft); color:var(--coral-deep); font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;}

/* ---------- Academic honors / awards & recognition ---------- */
.academic-recognition-layout{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:60px; align-items:center;}
.academic-recognition-image{order:1;}
.academic-recognition-content{order:2;}
.academic-recognition-image img{width:100%; height:auto; display:block; border-radius:20px; box-shadow:0 30px 60px -24px rgba(18,20,26,.25);}
.academic-recognition-content .section-head.left{margin:0 0 32px;}
.honors-list{display:flex; flex-direction:column; gap:16px;}
.honors-list li{display:flex; gap:11px; font-size:15px; color:var(--ink);}
.honors-list li .chk{background:var(--teal-soft); color:var(--teal-deep); width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; font-weight:800;}

/* ---------- Accordion (research/publications, FAQs) ---------- */
.accordion{border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.accordion-item{border-bottom:1px solid var(--line);}
.accordion-item:last-child{border-bottom:none;}
.accordion-trigger{width:100%; text-align:left; background:#fff; border:none; padding:20px 24px; font-size:15px; font-weight:700; font-family:inherit; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--ink);}
.accordion-trigger:hover{background:var(--bg-soft);}
.accordion-trigger .chev{transition:transform .3s ease; color:var(--teal-deep); font-size:18px;}
.accordion-trigger[aria-expanded="true"] .chev{transform:rotate(180deg);}
.accordion-panel{max-height:0; overflow:hidden; transition:max-height .35s ease; background:var(--bg-soft);}
.accordion-panel-inner{padding:4px 24px 22px; font-size:14px; color:var(--ink-soft);}
.accordion-panel-inner p{margin-bottom:10px;}
.accordion-panel-inner ul{padding-left:18px; list-style:disc; margin-bottom:10px;}
.accordion-panel-inner li{margin-bottom:4px;}
.accordion-panel-inner hr{border:none; border-top:1px solid var(--line); margin:14px 0;}

/* ---------- Tabs ---------- */
.tabs-nav{display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap;}
.tabs-nav button{font-family:inherit; font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:.2s;}
.tabs-nav button.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeUp .5s ease both;}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--teal-deep),#00544A); color:#fff; position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,var(--coral),transparent 70%); opacity:.35; top:-160px; right:-80px;}
.cta-band .container{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:52px 32px; flex-wrap:wrap; gap:20px;}
.cta-band h3{font-size:26px; font-weight:700; margin-bottom:8px;}
.cta-band p{color:#BFEDE3; font-size:15px;}
.cta-band .btn-outline{border-color:#fff; color:#fff;}
.cta-band .btn-outline:hover{background:#fff; color:var(--teal-deep);}

/* ---------- Visit us ---------- */
.visit{background:var(--bg-soft);}
.visit .container{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.visit-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:18px;}
.visit-card h4{font-size:16px; font-weight:700;}
.visit-card .line{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:10px;}
.visit-card .line strong{color:var(--ink); font-weight:700; text-align:right;}
.map-frame{height:100%; min-height:260px; border-radius:20px; overflow:hidden; border:1px solid var(--line);}
.map-frame iframe{width:100%; height:100%; min-height:260px; border:none;}

/* ---------- Testimonials ---------- */
.testimonials{background:#fff;}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.t-card{background:var(--bg-soft); border-radius:20px; padding:26px; transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;}
.t-card:hover{transform:translateY(-5px);}
.t-card .quote-ic{width:22px; height:22px; color:var(--line); opacity:.9; margin-bottom:10px;}
.t-card .stars{color:var(--coral); font-size:14px; margin-bottom:16px; letter-spacing:2px;}
.t-card p{font-size:14px; color:var(--ink); margin-bottom:14px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden;}
.t-more{font-size:12.5px; font-weight:700; color:var(--coral-deep); margin-bottom:20px; display:inline-block;}
.t-more:hover{text-decoration:underline;}
.t-card .who{display:flex; align-items:center; gap:11px; margin-top:auto;}
.t-card .avatar{width:38px; height:38px; border-radius:12px; background:linear-gradient(150deg,var(--coral),var(--teal)); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.t-card .who .name{font-size:13.5px; font-weight:700;}
.t-card .who .rel{font-size:12px; color:var(--ink-faint);}
.t-card.letter{padding:0; overflow:hidden;}
.t-card.letter img{width:100%; height:100%; min-height:260px; object-fit:cover;}

/* The whole card is a link on index.html (a.t-card) — cursor/focus only apply
   there, never on review.html where the same class is a plain, non-clickable div. */
a.t-card{cursor:pointer; text-decoration:none;}
a.t-card:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:20px;}

/* Subtle 3x highlight for a review linked to from another page — brand-coloured, not an error state */
@keyframes reviewBlink{
  0%, 100% { background:var(--bg-soft); box-shadow:none; }
  50% { background:var(--coral-soft); box-shadow:0 0 0 3px var(--coral); }
}
.t-card.blink{animation:reviewBlink 0.7s ease-in-out 3;}

/* review.html shows the full testimonial text — index.html's teaser cards clamp it */
.reviews-page .t-card p{-webkit-line-clamp:unset; line-clamp:unset; overflow:visible;}
.reviews-page .t-card.full{padding-bottom:26px;}
.t-review-image{border-radius:14px; overflow:hidden; cursor:pointer; margin-bottom:16px; max-width:320px;}
.t-review-image img{width:100%; height:auto; display:block; transition:transform .4s ease;}
.t-review-image:hover img{transform:scale(1.04);}

/* ---------- Testimonial carousel (index.html) ---------- */
.t-carousel{overflow:hidden; position:relative;}
.t-carousel-track{display:flex; gap:22px; transition:transform .6s cubic-bezier(.65,0,.35,1);}
.t-carousel-track > .t-card{flex:0 0 auto;}
.t-dots{display:flex; justify-content:center; gap:8px; margin-top:28px;}
.t-dots button{width:9px; height:9px; padding:0; border:none; border-radius:5px; background:var(--line); cursor:pointer; transition:width .3s ease, background .3s ease;}
.t-dots button.active{width:24px; background:var(--coral);}
.t-dots button:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}

/* ---------- Gallery grid ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-item{border-radius:16px; overflow:hidden; aspect-ratio:4/3; cursor:pointer; position:relative;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item::after{content:"⤢"; position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:8px; background:rgba(18,20,26,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; opacity:0; transition:opacity .25s;}
.gallery-item:hover::after{opacity:1;}

.lightbox{position:fixed; inset:0; background:rgba(10,10,12,.92); display:none; align-items:center; justify-content:center; z-index:200; padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:8px;}
.lightbox .lb-close{position:absolute; top:24px; right:32px; width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; border:none;}
.lightbox .lb-close:hover{background:var(--coral);}
.lightbox .lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; border:none;}
.lightbox .lb-nav:hover{background:var(--coral);}
.lightbox .lb-prev{left:24px;} .lightbox .lb-next{right:24px;}

/* ---------- Contact form (full page) ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start;}
.contact-form-card{background:var(--bg-soft); border-radius:24px; padding:36px;}
.contact-form-card h3{font-size:20px; margin-bottom:6px;}
.contact-form-card p.sub{color:var(--ink-soft); font-size:14px; margin-bottom:24px;}
.form-row{margin-bottom:16px;}
.form-row label{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; margin-bottom:6px;}
.form-row label .ic-inline{width:13px; height:13px; color:var(--teal-deep);}
.form-row input, .form-row select{width:100%; max-width:100%; border:1.5px solid var(--line); border-radius:10px; padding:13px 14px; font-size:14px; font-family:inherit; background:#fff;}
.form-row input:focus, .form-row select:focus{outline:none; border-color:var(--teal);}
.form-row .field-error{color:var(--coral-deep); font-size:12px; margin-top:4px; display:none;}

/* ---------- Footer ---------- */
footer.site{background:var(--ink); color:#A6ABB4; padding-top:70px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08);}
.foot-grid h5{color:#fff; font-size:14.5px; font-weight:700; margin-bottom:20px;}
.foot-grid ul{display:flex; flex-direction:column; gap:11px;}
.foot-grid li a{font-size:13.5px; color:#A6ABB4; transition:color .2s; display:inline-flex; align-items:center; gap:7px;}
.foot-grid li a:hover{color:var(--coral);}
.foot-brand .name{font-size:17px; font-weight:700; margin-bottom:10px; color:#fff;}
.foot-brand p{font-size:13px; color:#7F97A8; max-width:280px; margin-bottom:20px;}
.foot-social{display:flex; gap:10px; margin-top:4px;}
.foot-social a{width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#A6ABB4; transition:.2s;}
.foot-social a:hover{background:var(--coral); color:#fff; border-color:var(--coral);}
.foot-bottom{display:flex; justify-content:space-between; padding:24px 0; font-size:12.5px; color:#6B707A; flex-wrap:wrap; gap:8px;}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed; bottom:28px; right:28px; width:48px; height:48px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:60; border:none; cursor:pointer;}
.back-to-top.show{opacity:1; pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px); background:var(--coral-deep);}

/* ---------- Responsive ---------- */
/* Tablet landscape / small desktop */
@media (max-width: 1200px){
  .container{padding:0 28px;}
}
@media (max-width: 1024px){
  .hero .container{grid-template-columns:1fr; padding-bottom:60px;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .about .container, .doctor .container, .contact-grid, .visit .container{grid-template-columns:minmax(0,1fr); gap:36px;}
  .academic-recognition-layout{grid-template-columns:minmax(0,1fr); gap:32px;}
  .academic-recognition-content{order:1;}
  .academic-recognition-image{order:2;}
  .t-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .doctor-photo{height:300px;}
  .about-photo{height:340px;}
}
/* Tablet portrait */
@media (max-width: 900px){
  header.site .container{height:88px;}
  .logo .mark-svg{height:64px;}
  .cred-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .section-head h2{font-size:32px;}
}
/* Mobile nav breakpoint */
@media (max-width: 768px){
  nav.main{display:none;} /* desktop inline nav hidden — .mobile-drawer takes over on mobile */
  .nav-toggle{display:flex;}
  .mobile-menu-overlay{display:block;}
  .mobile-drawer{display:flex;}
  .mobile-drawer a{font-size:17px; padding:13px 0; border-bottom:1px solid var(--line); width:100%;}
  .header-cta .btn{display:none;} /* Book appointment button hidden 768px and below (link/text preserved for 769px+) */
  .hero h1{font-size:36px;}
  .hero .stats{gap:24px;}
  .services-grid{grid-template-columns:1fr;}
  .t-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .accred .container, .trust .container{flex-direction:column; align-items:flex-start;}
  .accred .badges{justify-content:flex-start;}
  .cta-band .container{flex-direction:column; text-align:center;}
  .foot-grid{grid-template-columns:1fr;}
  section{padding:60px 0;}
  .cred-grid{grid-template-columns:1fr;}
  .visit-card .line{flex-direction:column; align-items:flex-start; gap:4px;}
  .visit-card .line strong{text-align:left;}
  .accordion-trigger{gap:12px;}
  .accordion-trigger > *:first-child{flex:1; min-width:0;}
  .accordion-trigger .chev{flex-shrink:0;}
  .about-photo .float-card{right:10px; bottom:-20px; padding:14px 16px; gap:10px;}
  .about-photo .float-card .num{font-size:22px;}
  .about-photo .float-card .lbl{font-size:11px; max-width:110px;}
}
/* Topbar hidden below 500px to save vertical space in the sticky header area */
@media (max-width: 499px){
  .topbar{display:none;}
}
/* Small phones */
@media (max-width: 480px){
  .container{padding:0 20px;}
  .topbar .container{flex-wrap:wrap; height:auto; padding:10px 20px; row-gap:8px;}
  .topbar .right{gap:14px; font-size:11.5px; flex-wrap:wrap;}
  header.site .container{height:72px;}
  .logo .mark-svg{height:44px;}
  .header-cta{gap:10px;}
  .header-cta .btn{padding:10px 16px; font-size:13px;}
  .nav-toggle{width:40px; height:40px;}
  .hero h1{font-size:28px; letter-spacing:-.3px;}
  .hero p.lead{font-size:15.5px;}
  .hero .stats{gap:16px;}
  .hero .stats .stat .num{font-size:22px;}
  .page-hero{padding:44px 0;}
  .page-hero h1{font-size:26px;}
  .section-head h2{font-size:26px;}
  .doctor-info h2, .about h2{font-size:24px;}
  .gallery-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .about-photo{height:280px;}
  .about-photo .float-card{position:static; margin-top:14px; width:100%; box-shadow:none; border:1px solid var(--line);}
  .doctor-photo{height:240px;}
  .cta-band h3{font-size:22px;}
  .accordion-trigger{padding:16px 18px; font-size:14px;}
  .service-card, .hero-card, .visit-card, .contact-form-card{padding:22px 18px;}
  .about .kicker{margin-top: 70px;}
}
/* Very narrow phones */
@media (max-width: 360px){
  .logo .mark-svg{height:36px;}
  .header-cta .btn{padding:9px 13px; font-size:12.5px;}
  .hero h1{font-size:25px;}
  .topbar .right{gap:10px; font-size:11px;}
}