/* ==========================================================
   THE NEW GEN HOSPITAL — Design System v2 (Premium)
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* ---------- Tokens ---------- */
:root {
  --navy:       #1a2b5e;
  --navy-deep:  #111d3f;
  --teal:       #2ba8a0;
  --teal-dark:  #1e8a83;
  --teal-glow:  rgba(43,168,160,0.18);
  --bg:         #f8f9fb;
  --mint:       #e4f3ef;
  --mint-deep:  #cceae3;
  --surface:    #ffffff;
  --text:       #111827;
  --muted-c:    #6b7280;
  --border:     #e5e7eb;
  --gold:       #c9a84c;

  --r-card: 22px;
  --r-pill: 9999px;
  --max-w:  1280px;
  --nav-h:  76px;

  --ease-expo: cubic-bezier(0.22,1,0.36,1);
  --ease-back: cubic-bezier(0.34,1.56,0.64,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;font-size:15px;line-height:1.65;letter-spacing:-0.011em;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-weight:600;letter-spacing:-0.025em;text-wrap:balance;line-height:1.15}
.serif{font-family:'Playfair Display',serif}

/* ---------- Eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--teal);border-radius:2px;flex-shrink:0}

/* ---------- Container ---------- */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 28px}

/* ---------- Sections ---------- */
.section{padding:100px 0}
.section-sm{padding:64px 0}
.section-heading{font-size:clamp(26px,3.6vw,44px);color:var(--navy)}
.section-sub{font-size:clamp(15px,1.4vw,17px);color:var(--muted-c);max-width:540px;margin-top:14px;line-height:1.75}

/* ---------- Scroll Progress Bar ---------- */
#scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold));z-index:9999;transition:width 0.1s linear;border-radius:0 2px 2px 0}

/* ---------- Cursor Glow ---------- */
#cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(43,168,160,0.07) 0%,transparent 70%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);transition:opacity 0.3s;opacity:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border-radius:var(--r-pill);padding:13px 28px;transition:transform 0.3s var(--ease-back),box-shadow 0.3s,background 0.25s,color 0.25s;position:relative;overflow:hidden;cursor:pointer;letter-spacing:0.01em}
.btn:hover{transform:scale(1.05)}
.btn:active{transform:scale(0.97)}

.btn-primary{background:var(--teal);color:#fff;box-shadow:0 4px 20px rgba(43,168,160,0.35)}
.btn-primary:hover{background:var(--teal-dark);box-shadow:0 8px 32px rgba(43,168,160,0.5)}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 3s infinite}
@keyframes shimmer{0%{left:-100%}60%,100%{left:160%}}

.btn-secondary{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy);box-shadow:0 4px 20px rgba(0,0,0,0.12)}
.btn-white:hover{box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.55)}
.btn-outline-white:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.8)}

/* ---------- Scroll Reveal ---------- */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity 0.75s var(--ease-expo),transform 0.75s var(--ease-expo);transition-delay:var(--delay,0ms)}
.reveal{transform:translateY(28px)}
.reveal-left{transform:translateX(-36px)}
.reveal-right{transform:translateX(36px)}
.reveal-scale{transform:scale(0.92)}
.reveal.in,.reveal-left.in,.reveal-right.in,.reveal-scale.in{opacity:1;transform:none}

/* ---------- Card Tilt ---------- */
.tilt{will-change:transform}

/* ---------- Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}}

/* ==========================================================   NAVBAR   ========================================================== */
.navbar{position:absolute;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;background:#fff;transition:background 0.5s,box-shadow 0.5s,backdrop-filter 0.5s}
.navbar.transparent{background:transparent}
.navbar.scrolled{background:rgba(255,255,255,0.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 30px rgba(0,0,0,0.08)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:24px}
.nav-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.nav-logo-mark{width:40px;height:40px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:700;flex-shrink:0;transition:transform 0.3s var(--ease-back)}
.nav-logo:hover .nav-logo-mark{transform:scale(1.1) rotate(-5deg)}
.nav-logo-text{display:flex;flex-direction:column;line-height:1.2}
.nav-logo-name{font-size:13px;font-weight:700;letter-spacing:-0.01em;transition:color 0.4s}
.nav-logo-tag{font-size:9.5px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.4s}

/* Transparent state */
.navbar.transparent .nav-logo-name{color:#fff}
.navbar.transparent .nav-logo-tag{color:rgba(255,255,255,0.6)}
.navbar.transparent .nav-link{color:rgba(255,255,255,0.88)}
.navbar.transparent .hamburger span{background:#fff}
/* Scrolled state */
.navbar.scrolled .nav-logo-name{color:var(--navy)}
.navbar.scrolled .nav-logo-tag{color:var(--muted-c)}
.navbar.scrolled .nav-link{color:var(--navy)}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:8px;transition:color 0.25s,background 0.25s;position:relative}
.nav-link:hover{color:var(--teal)!important;background:rgba(43,168,160,0.07)}
.nav-link.active{color:var(--teal)!important}

.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:10}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform 0.3s,opacity 0.3s,background 0.4s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;top:var(--nav-h);left:0;right:0;background:var(--navy-deep);padding:20px 28px 32px;z-index:998;transform:translateY(-6px);opacity:0;pointer-events:none;transition:transform 0.38s var(--ease-expo),opacity 0.38s;border-top:1px solid rgba(255,255,255,0.08);display:block}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{display:flex;align-items:center;color:rgba(255,255,255,0.82);font-size:15px;font-weight:500;padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.07);transition:color 0.2s,padding-left 0.2s}
.mobile-menu a:hover{color:var(--teal);padding-left:8px}
.mobile-menu .btn-primary{width:100%;justify-content:center;margin-top:18px}

/* Floating CTA (mobile) */
.floating-cta{position:fixed;bottom:0;left:0;right:0;background:var(--navy-deep);padding:14px 20px;z-index:990;display:flex;gap:10px;transform:translateY(100%);transition:transform 0.5s var(--ease-expo);box-shadow:0 -4px 32px rgba(0,0,0,0.25)}
.floating-cta.visible{transform:translateY(0)}
.floating-cta a{flex:1;text-align:center;font-size:13px;font-weight:600;padding:12px 10px;border-radius:12px}
@media(min-width:769px){.floating-cta{display:none}}

/* WhatsApp Button */
.whatsapp-btn{position:fixed;bottom:24px;right:24px;width:54px;height:54px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:980;box-shadow:0 6px 24px rgba(37,211,102,0.45);transition:transform 0.3s var(--ease-back),box-shadow 0.3s;cursor:pointer;text-decoration:none}
.whatsapp-btn:hover{transform:scale(1.12);box-shadow:0 10px 36px rgba(37,211,102,0.55)}
@media(max-width:768px){.whatsapp-btn{bottom:90px}}

/* ==========================================================   HERO   ========================================================== */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;will-change:transform;background-size:cover;background-position:center 25%}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,29,63,0.92) 0%,rgba(26,43,94,0.55) 45%,rgba(26,43,94,0.15) 100%)}
.hero-content{position:relative;z-index:2;padding:0 28px 88px;max-width:var(--max-w);margin:0 auto;width:100%}

.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.22);border-radius:var(--r-pill);padding:8px 18px;font-size:12.5px;font-weight:600;color:#fff;margin-bottom:22px;animation:fadeUp 0.8s var(--ease-expo) both}
.hero-badge-dot{width:7px;height:7px;background:var(--teal);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(43,168,160,0.6)}50%{box-shadow:0 0 0 6px rgba(43,168,160,0)}}

.hero h1{font-size:clamp(36px,6.5vw,68px);color:#fff;max-width:680px;margin-bottom:20px;animation:fadeUp 0.8s var(--ease-expo) 0.12s both}
.hero h1 .accent{color:var(--teal)}
.hero h1 .serif-word{font-family:'Playfair Display',serif;font-style:italic}
.hero-sub{font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,0.82);max-width:520px;line-height:1.75;margin-bottom:36px;animation:fadeUp 0.8s var(--ease-expo) 0.24s both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;animation:fadeUp 0.8s var(--ease-expo) 0.36s both}

/* Hero trust strip */
.hero-trust{display:flex;align-items:center;gap:28px;margin-top:40px;animation:fadeUp 0.8s var(--ease-expo) 0.5s both;flex-wrap:wrap}
.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.75)}
.hero-trust-item svg{color:var(--teal)}
.hero-trust-divider{width:1px;height:20px;background:rgba(255,255,255,0.2)}

/* Scroll cue */
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;animation:fadeUp 1s var(--ease-expo) 0.8s both;cursor:pointer}
.scroll-cue span{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);font-weight:600}
.scroll-cue-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,0.5),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(0.5);opacity:0.4}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================   PAGE HERO BAND   ========================================================== */
.page-hero{position:relative;padding:152px 0 88px;overflow:hidden;background:var(--navy-deep)}
.page-hero-parallax{position:absolute;inset:-30%;background-size:cover;background-position:center;opacity:0.12;will-change:transform}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(17,29,63,0.96) 0%,rgba(26,43,94,0.7) 100%)}
/* Decorative arcs */
.page-hero::before{content:'';position:absolute;right:-100px;top:-100px;width:500px;height:500px;border:1px solid rgba(43,168,160,0.15);border-radius:50%}
.page-hero::after{content:'';position:absolute;right:-60px;top:-60px;width:350px;height:350px;border:1px solid rgba(43,168,160,0.1);border-radius:50%}
.page-hero-content{position:relative;z-index:2}
.page-hero h1{font-size:clamp(30px,5vw,56px);color:#fff;margin-top:10px;margin-bottom:16px}
.page-hero p{font-size:clamp(15px,1.4vw,18px);color:rgba(255,255,255,0.72);max-width:560px;line-height:1.75}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,0.45);margin-bottom:16px}
.breadcrumb a{color:rgba(255,255,255,0.55);transition:color 0.2s}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .sep{color:rgba(255,255,255,0.25)}

/* ==========================================================   STATS BAR   ========================================================== */
.stats-bar{background:var(--surface);position:relative;z-index:3;box-shadow:0 4px 40px rgba(0,0,0,0.07)}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{padding:36px 20px;text-align:center;position:relative;transition:background 0.3s}
.stat-item:hover{background:var(--mint)}
.stat-item:not(:last-child)::after{content:'';position:absolute;right:0;top:25%;bottom:25%;width:1px;background:var(--border)}
.stat-number{font-size:clamp(34px,4vw,52px);font-weight:700;color:var(--navy);line-height:1;letter-spacing:-0.04em}
.stat-sup{font-size:0.55em;vertical-align:super;color:var(--teal)}
.stat-label{font-size:13px;color:var(--muted-c);margin-top:8px;line-height:1.4;max-width:130px;margin-inline:auto}

/* ==========================================================   MARQUEE   ========================================================== */
.marquee-wrap{overflow:hidden;position:relative;padding:24px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.marquee-wrap::before{left:0;background:linear-gradient(to right,#fff,transparent)}
.marquee-wrap::after{right:0;background:linear-gradient(to left,#fff,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:10px;padding:0 32px;font-size:12.5px;font-weight:600;color:var(--muted-c);white-space:nowrap;letter-spacing:0.02em}
.marquee-dot{width:5px;height:5px;background:var(--teal);border-radius:50%;flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================   PHOTO SCATTER (FIXED)   ========================================================== */
.moments-section{height:200vh;position:relative}
.moments-sticky{position:sticky;top:0;height:100vh;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;overflow:hidden}
.moments-center{text-align:center;position:relative;z-index:10;pointer-events:none}
.moments-center h2{font-size:clamp(26px,3.5vw,44px);color:#fff;max-width:540px;margin:0 auto}

/* Each photo: positioned relative to sticky container center */
.scatter-photo{
  position:absolute;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 60px rgba(0,0,0,0.5);
  /* Initial state: clustered at center, tiny, invisible */
  opacity:0;
  will-change:transform,opacity;
  /* Defined sizes */
}
.scatter-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================   SCROLL FILL   ========================================================== */
.scroll-fill-section{height:180vh;position:relative}
.scroll-fill-sticky{position:sticky;top:0;height:100vh;background:var(--navy-deep);display:flex;align-items:center;justify-content:center;padding:0 28px}
.scroll-fill-inner{max-width:780px;width:100%}
.scroll-fill-label{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:28px;display:flex;align-items:center;gap:8px}
.scroll-fill-label::before{content:'';width:20px;height:2px;background:var(--teal)}
.fill-text{font-size:clamp(20px,2.8vw,36px);font-weight:600;line-height:1.55;letter-spacing:-0.02em}
.fill-word{display:inline;color:rgba(255,255,255,0.14);transition:color 0.08s ease;margin-right:0.28em}
.fill-word.lit{color:#fff}

/* ==========================================================   EXPERTISE BENTO   ========================================================== */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:220px 220px 220px;gap:14px;margin-top:48px}
/* Explicit card placement to fill grid perfectly */
.bento-grid .bento-card:nth-child(1){grid-column:1;grid-row:1}
.bento-grid .bento-card:nth-child(2){grid-column:2;grid-row:1}
.bento-grid .bento-card.tall{grid-column:3;grid-row:1/span 2}
.bento-grid .bento-card:nth-child(4){grid-column:4;grid-row:1}
.bento-cta{grid-column:1;grid-row:2}
.bento-grid .bento-card:nth-child(6){grid-column:2;grid-row:2}
.bento-grid .bento-card:nth-child(7){grid-column:4;grid-row:2}
.bento-grid .bento-card:nth-child(8){grid-column:1/span 2;grid-row:3}
.bento-grid .bento-card:nth-child(9){grid-column:3/span 2;grid-row:3}
.bento-card{border-radius:var(--r-card);overflow:hidden;position:relative;cursor:pointer;transition:transform 0.45s var(--ease-expo),box-shadow 0.45s;isolation:isolate}
.bento-card:hover{transform:scale(1.025);box-shadow:0 24px 64px rgba(0,0,0,0.22)}
.bento-card.tall{/* explicit placement above */}
.bento-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--ease-expo)}
.bento-card:hover img{transform:scale(1.08)}
.bento-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,29,63,0.88) 0%,rgba(17,29,63,0.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.bento-label{color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.bento-tag{font-size:11px;color:var(--teal);font-weight:600;margin-top:4px}
.bento-cta{background:linear-gradient(145deg,var(--navy) 0%,var(--teal-dark) 100%);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:32px;cursor:default}
.bento-cta:hover{transform:none}
.bento-cta h3{font-size:clamp(18px,1.6vw,22px);color:#fff;margin-bottom:8px;line-height:1.3}
.bento-cta p{font-size:13px;color:rgba(255,255,255,0.65);margin-bottom:22px;line-height:1.6}

/* ==========================================================   WHY CHOOSE US   ========================================================== */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.why-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:36px 28px;transition:border-color 0.3s,box-shadow 0.3s,transform 0.4s var(--ease-expo)}
.why-card:hover{border-color:var(--teal);box-shadow:0 12px 48px rgba(43,168,160,0.12);transform:translateY(-4px)}
.why-icon{width:52px;height:52px;background:var(--mint);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:18px}
.why-card h3{font-size:17px;color:var(--navy);margin-bottom:10px}
.why-card p{font-size:14px;color:var(--muted-c);line-height:1.75}

/* ==========================================================   HOW IT WORKS   ========================================================== */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.how-card{background:var(--mint);border-radius:var(--r-card);padding:40px 32px;position:relative;transition:transform 0.4s var(--ease-expo),box-shadow 0.4s;isolation:isolate}
.how-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(43,168,160,0.15)}
.how-step{display:inline-block;background:var(--teal);color:#fff;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 12px;margin-bottom:20px}
.how-icon{width:56px;height:56px;background:var(--surface);border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--teal);box-shadow:0 4px 16px rgba(0,0,0,0.08);animation:floatIcon 3s ease-in-out infinite}
.how-card:nth-child(2) .how-icon{animation-delay:1s}
.how-card:nth-child(3) .how-icon{animation-delay:2s}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.how-card h3{font-size:18px;color:var(--navy);margin-bottom:10px}
.how-card p{font-size:14px;color:var(--muted-c);line-height:1.75}
.how-connector{display:flex;align-items:center;justify-content:center;color:var(--teal);opacity:0.4}

/* ==========================================================   DOCTORS CAROUSEL   ========================================================== */
.doctors-carousel{display:flex;gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;cursor:grab;scrollbar-width:none;padding-bottom:8px}
.doctors-carousel::-webkit-scrollbar{display:none}
.doctors-carousel.grabbing{cursor:grabbing}
.doctor-card{flex-shrink:0;width:232px;height:330px;border-radius:20px;overflow:hidden;position:relative;transition:transform 0.4s var(--ease-expo)}
.doctor-card:hover{transform:scale(1.03)}
.doctor-card img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 0.6s var(--ease-expo)}
.doctor-card:hover img{transform:scale(1.05)}
.doctor-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,29,63,0.95) 0%,rgba(17,29,63,0.15) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.doc-name{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
.doc-spec{font-size:11.5px;color:var(--teal);font-weight:600}
.doc-quals{font-size:10.5px;color:rgba(255,255,255,0.55);margin-top:3px}

/* ==========================================================   TESTIMONIALS   ========================================================== */
.testi-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;flex-wrap:wrap;gap:16px}
.arrow-btn{width:46px;height:46px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;color:var(--navy);transition:background 0.3s,color 0.3s,transform 0.3s;border:none;cursor:pointer}
.arrow-btn:hover{background:var(--teal);color:#fff;transform:scale(1.08)}
.testi-carousel{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.testi-carousel::-webkit-scrollbar{display:none}
.testi-card{flex-shrink:0;width:min(660px,88vw);border-radius:var(--r-card);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 12px 50px rgba(0,0,0,0.1);transition:transform 0.4s var(--ease-expo)}
.testi-card:hover{transform:translateY(-4px)}
.testi-photo{position:relative;min-height:300px}
.testi-photo img{width:100%;height:100%;object-fit:cover}
.testi-body{background:var(--mint);padding:36px 28px;display:flex;flex-direction:column;justify-content:center}
.testi-stat{font-size:54px;font-weight:700;color:var(--teal);letter-spacing:-0.05em;line-height:1}
.testi-stat-label{font-size:11px;font-weight:700;color:var(--muted-c);text-transform:uppercase;letter-spacing:0.1em;margin:6px 0 20px}
.testi-stars{color:var(--gold);font-size:14px;margin-bottom:14px;letter-spacing:2px}
.testi-quote{font-size:13.5px;color:var(--text);line-height:1.75;font-style:italic;margin-bottom:18px}
.testi-author{font-weight:700;font-size:14px;color:var(--navy)}
.testi-dept{font-size:12px;color:var(--muted-c);margin-top:2px}

/* ==========================================================   WAVE DIVIDERS   ========================================================== */
.wave-divider{position:relative;height:60px;overflow:hidden}
.wave-divider svg{position:absolute;bottom:0;width:100%;height:100%}

/* ==========================================================   CTA BANNER   ========================================================== */
.cta-section{background:var(--navy-deep);padding:100px 28px;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(43,168,160,0.1) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.cta-badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:rgba(43,168,160,0.15);border:2px solid rgba(43,168,160,0.4);border-radius:50%;color:var(--teal);font-size:22px;font-weight:700;margin:0 auto 28px}
.cta-section h2{font-size:clamp(26px,3.5vw,46px);color:#fff;max-width:560px;margin:0 auto 14px}
.cta-section .sub{color:rgba(255,255,255,0.6);max-width:420px;margin:0 auto 36px;font-size:15px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ==========================================================   FAQ   ========================================================== */
.faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:72px;align-items:start}
.faq-booking-card{background:var(--mint);border-radius:var(--r-card);padding:40px 32px;position:sticky;top:100px}
.faq-booking-card h3{font-size:22px;color:var(--navy);margin-bottom:10px}
.faq-booking-card p{font-size:14px;color:var(--muted-c);line-height:1.75;margin-bottom:24px}
.faq-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--teal);font-size:14px;transition:gap 0.3s}
.faq-link:hover{gap:14px}
.accordion-item{border-bottom:1px solid var(--border)}
.accordion-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-size:15px;font-weight:600;color:var(--navy);text-align:left;cursor:pointer;transition:color 0.2s;background:none;border:none}
.accordion-btn:hover{color:var(--teal)}
.accordion-icon{flex-shrink:0;width:28px;height:28px;background:var(--mint);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;color:var(--teal);transition:transform 0.35s var(--ease-expo),background 0.3s,color 0.3s}
.accordion-item.open .accordion-icon{transform:rotate(45deg);background:var(--teal);color:#fff}
.accordion-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.38s var(--ease-expo)}
.accordion-item.open .accordion-body{grid-template-rows:1fr}
.accordion-inner{overflow:hidden;font-size:14px;color:var(--muted-c);line-height:1.8;padding-bottom:0;transition:padding-bottom 0.35s}
.accordion-item.open .accordion-inner{padding-bottom:20px}

/* ==========================================================   FOOTER   ========================================================== */
.footer{background:var(--navy-deep);color:rgba(255,255,255,0.75);padding:80px 0 0}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-logo-mark{width:38px;height:38px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0}
.footer-logo-name{color:#fff;font-weight:700;font-size:13px;line-height:1.2}
.footer-logo-tag{color:rgba(255,255,255,0.5);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase}
.footer-brand p{font-size:13.5px;color:rgba(255,255,255,0.55);line-height:1.75;margin-bottom:24px}
.footer-brand-btns{display:flex;gap:10px;flex-wrap:wrap}
.footer-col h4{color:#fff;font-size:11.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:18px}
.footer-col ul li{margin-bottom:10px}
.footer-col ul a{color:rgba(255,255,255,0.55);font-size:13.5px;transition:color 0.2s,padding-left 0.2s;display:inline-block}
.footer-col ul a:hover{color:var(--teal);padding-left:4px}
.footer-contact-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;font-size:13.5px;color:rgba(255,255,255,0.6)}
.footer-contact-icon{width:16px;height:16px;color:var(--teal);flex-shrink:0;margin-top:2px}
.footer-contact-row a{color:rgba(255,255,255,0.6);transition:color 0.2s}
.footer-contact-row a:hover{color:var(--teal)}
.footer-trust-bar{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.06);flex-wrap:wrap;gap:12px}
.footer-trust-bar p{font-size:12.5px;color:rgba(255,255,255,0.4)}
.footer-trust-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(43,168,160,0.12);border:1px solid rgba(43,168,160,0.25);color:var(--teal);font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:6px 14px}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 0;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:12.5px;color:rgba(255,255,255,0.3)}

/* ==========================================================   ABOUT PAGE   ========================================================== */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.story-img{border-radius:var(--r-card);overflow:hidden;height:460px;position:relative}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-img-badge{position:absolute;bottom:24px;left:24px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:14px;padding:16px 20px}
.story-img-badge .num{font-size:28px;font-weight:700;color:var(--navy);letter-spacing:-0.03em}
.story-img-badge .label{font-size:11px;color:var(--muted-c);margin-top:2px}
.story-text p{font-size:15px;color:var(--muted-c);line-height:1.85;margin-bottom:18px}
.story-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.story-list-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text)}
.story-check{color:var(--teal);flex-shrink:0;margin-top:2px}

.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mission-card{background:var(--mint);border-radius:var(--r-card);padding:36px 28px;border-left:4px solid var(--teal)}
.mission-card h3{font-size:18px;color:var(--navy);margin-bottom:12px}
.mission-card p{font-size:14px;color:var(--muted-c);line-height:1.8}

.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.value-card{background:var(--surface);border-radius:var(--r-card);border:1px solid var(--border);padding:32px 20px;text-align:center;transition:border-color 0.3s,box-shadow 0.35s,transform 0.4s var(--ease-expo)}
.value-card:hover{border-color:var(--teal);box-shadow:0 12px 40px rgba(43,168,160,0.12);transform:translateY(-5px)}
.value-icon{width:52px;height:52px;background:var(--mint);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--teal)}
.value-card h3{font-size:15px;color:var(--navy);margin-bottom:8px}
.value-card p{font-size:13px;color:var(--muted-c);line-height:1.65}

.timeline{position:relative;padding-left:44px;margin-top:40px}
.timeline::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:linear-gradient(to bottom,var(--teal),rgba(43,168,160,0.15))}
.tl-item{position:relative;margin-bottom:36px}
.tl-dot{position:absolute;left:-36px;top:4px;width:14px;height:14px;background:var(--teal);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 3px var(--teal)}
.tl-year{font-size:11px;font-weight:700;color:var(--teal);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px}
.tl-item h4{font-size:15px;color:var(--navy);margin-bottom:4px}
.tl-item p{font-size:13.5px;color:var(--muted-c);line-height:1.7}

/* Founder card */
.founder-card{background:var(--navy-deep);border-radius:var(--r-card);padding:40px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start}
.founder-photo{width:100px;height:100px;border-radius:50%;overflow:hidden;border:3px solid var(--teal);flex-shrink:0}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.founder-quote{font-size:17px;font-style:italic;color:rgba(255,255,255,0.85);line-height:1.75;margin-bottom:16px;font-family:'Playfair Display',serif}
.founder-name{font-weight:700;color:#fff;font-size:14px}
.founder-title{font-size:12px;color:var(--teal);margin-top:3px}

/* ==========================================================   SERVICES PAGE   ========================================================== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:var(--surface);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border);transition:transform 0.4s var(--ease-expo),box-shadow 0.4s;isolation:isolate}
.service-card:hover{transform:translateY(-7px);box-shadow:0 24px 64px rgba(0,0,0,0.1)}
.service-card-img{height:190px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--mint) 0%,var(--mint-deep) 100%);display:flex;align-items:center;justify-content:center}
.service-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease-expo)}
.service-card:hover .service-card-img img{transform:scale(1.07)}
.service-badge{position:absolute;top:12px;right:12px;background:var(--teal);color:#fff;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.service-card-body{padding:24px}
.service-icon{width:44px;height:44px;background:var(--mint);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:14px}
.service-card h3{font-size:17px;color:var(--navy);margin-bottom:8px}
.service-card p{font-size:13px;color:var(--muted-c);line-height:1.7;margin-bottom:14px}
.service-list{margin-bottom:18px}
.service-list li{font-size:12.5px;color:var(--muted-c);padding:4px 0;border-bottom:1px dashed var(--border);display:flex;align-items:center;gap:7px}
.service-list li::before{content:'';width:5px;height:5px;background:var(--teal);border-radius:50%;flex-shrink:0}
.service-list li:last-child{border-bottom:none}
.service-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal);transition:gap 0.3s}
.service-link:hover{gap:10px}

.facilities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.facility-card{background:var(--mint);border-radius:16px;padding:20px;display:flex;align-items:center;gap:14px;transition:transform 0.3s var(--ease-expo),box-shadow 0.3s}
.facility-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(43,168,160,0.14)}
.facility-icon-wrap{width:44px;height:44px;background:var(--surface);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--teal);flex-shrink:0}
.facility-card h4{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:3px}
.facility-card p{font-size:12px;color:var(--muted-c)}

/* ==========================================================   DOCTORS PAGE   ========================================================== */
.doctors-page-top{padding-top:20px}.doctors-search{position:relative;margin-bottom:24px}
.doctors-search input{width:100%;padding:14px 20px 14px 48px;border:2px solid var(--border);border-radius:var(--r-pill);font-family:inherit;font-size:16px;outline:none;transition:border-color 0.25s,box-shadow 0.25s;background:var(--surface)}
.doctors-search input:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(43,168,160,0.1)}
.doctors-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted-c);pointer-events:none}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.chip{padding:8px 18px;border-radius:var(--r-pill);font-size:12.5px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;border:2px solid var(--border);color:var(--muted-c);cursor:pointer;transition:all 0.25s;background:var(--surface)}
.chip:hover,.chip.active{border-color:var(--teal);color:var(--teal);background:rgba(43,168,160,0.06)}
.doctors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.doctor-grid-card{background:var(--surface);border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border);transition:transform 0.4s var(--ease-expo),box-shadow 0.4s;isolation:isolate}
.doctor-grid-card:hover{transform:translateY(-7px);box-shadow:0 20px 56px rgba(0,0,0,0.12)}
.doctor-grid-card.hidden{display:none}
.doc-photo{height:280px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--mint) 0%,#d4ede8 100%)}
.doc-photo img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 0.6s var(--ease-expo)}
.doctor-grid-card:hover .doc-photo img{transform:scale(1.05)}
.doc-avail{position:absolute;top:12px;left:12px;background:rgba(43,168,160,0.9);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);display:flex;align-items:center;gap:4px}
.doc-avail::before{content:'';width:5px;height:5px;background:#fff;border-radius:50%;animation:pulse 2s infinite}
.doc-body{padding:20px}
.doc-body h3{font-size:15px;color:var(--navy);margin-bottom:3px}
.doc-body .spec{font-size:12px;color:var(--teal);font-weight:600;margin-bottom:4px}
.doc-body .quals{font-size:11px;color:var(--muted-c);line-height:1.4;margin-bottom:14px}
.doc-services-mini{margin-bottom:14px}
.doc-services-mini li{font-size:11.5px;color:var(--muted-c);padding:3px 0;display:flex;align-items:center;gap:6px}
.doc-services-mini li::before{content:'';width:4px;height:4px;background:var(--teal);border-radius:50%;flex-shrink:0}
.doc-book{display:block;text-align:center;padding:10px;border-radius:var(--r-pill);font-size:13px;font-weight:600;background:var(--mint);color:var(--teal);transition:background 0.3s,color 0.3s}
.doc-book:hover{background:var(--teal);color:#fff}

/* ==========================================================   CONTACT PAGE   ========================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.contact-detail{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.contact-icon{width:46px;height:46px;background:var(--mint);border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--teal);flex-shrink:0}
.contact-detail-body h4{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:4px}
.contact-detail-body p,.contact-detail-body a{font-size:14px;color:var(--muted-c);line-height:1.7;transition:color 0.2s}
.contact-detail-body a:hover{color:var(--teal)}
.hours-card{background:var(--mint);border-radius:14px;padding:20px;margin-top:10px}
.hours-card h4{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:12px}
.hours-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted-c);padding:7px 0;border-bottom:1px solid rgba(0,0,0,0.05)}
.hours-row:last-child{border-bottom:none;color:var(--teal);font-weight:600}
.trust-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.trust-badge-item{background:var(--mint);border-radius:14px;padding:16px;text-align:center}
.trust-badge-item svg{color:var(--teal);margin:0 auto 8px}
.trust-badge-item h4{font-size:13px;font-weight:700;color:var(--navy)}
.trust-badge-item p{font-size:11.5px;color:var(--muted-c);margin-top:2px}
.contact-form-card{background:var(--surface);border-radius:var(--r-card);padding:40px;border:1px solid var(--border);box-shadow:0 12px 48px rgba(0,0,0,0.07)}
.contact-form-card h3{font-size:22px;color:var(--navy);margin-bottom:6px}
.contact-form-card .sub{font-size:14px;color:var(--muted-c);margin-bottom:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--border);border-radius:12px;font-family:inherit;font-size:16px;color:var(--text);background:var(--bg);outline:none;transition:border-color 0.25s,box-shadow 0.25s,background 0.25s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(43,168,160,0.1);background:#fff}
.form-group textarea{resize:vertical;min-height:100px}
.form-success{display:none;text-align:center;padding:40px 24px}
.map-wrap{border-radius:var(--r-card);overflow:hidden;height:380px;border:1px solid var(--border);margin-top:64px}
.map-wrap iframe{width:100%;height:100%;border:none}

/* ==========================================================   PARALLAX SECTIONS   ========================================================== */
.parallax-section{position:relative;overflow:hidden}
.parallax-bg{position:absolute;inset:-20%;background-size:cover;background-position:center;will-change:transform}

/* Section dividers */
.divider-wave{position:relative;height:64px;overflow:hidden;margin-bottom:-2px}
.divider-wave svg{position:absolute;bottom:0;width:100%}

/* ==========================================================   RESPONSIVE   ========================================================== */

/* ==========================================================
   RESPONSIVE — Mobile-First (phones are primary users)
   Breakpoints: 360 | 480 | 768 | 1024
   ========================================================== */

/* ── TABLET LANDSCAPE / SMALL LAPTOP (max 1024px) ── */
@media(max-width:1024px){
  /* Bento: 2 col, reset all explicit placement */
  .bento-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
  }
  .bento-grid .bento-card:nth-child(1),
  .bento-grid .bento-card:nth-child(2),
  .bento-grid .bento-card:nth-child(4),
  .bento-grid .bento-card:nth-child(6),
  .bento-grid .bento-card:nth-child(7),
  .bento-grid .bento-card:nth-child(8),
  .bento-grid .bento-card:nth-child(9){
    grid-column:auto;grid-row:auto;
  }
  .bento-grid .bento-card.tall{grid-column:auto;grid-row:auto}
  .bento-cta{grid-column:auto;grid-row:auto}
  .bento-card{min-height:200px}

  /* Layout grids → 2 col */
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .doctors-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .why-grid{grid-template-columns:1fr 1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .facilities-grid{grid-template-columns:repeat(2,1fr)}

  /* Smaller section spacing */
  .section{padding:80px 0}
  .container{padding:0 20px}
}

/* ── TABLET PORTRAIT / LARGE PHONE (max 768px) ── */
@media(max-width:768px){
  :root{--nav-h:68px}
  .section{padding:64px 0}
  .section-sm{padding:48px 0}
  .container{padding:0 18px}

  /* Navbar */
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .nav-logo-name{font-size:12px}
  .nav-logo-tag{font-size:9px}
  .nav-logo-mark{width:36px;height:36px;font-size:15px}

  /* Hero */
  .hero{min-height:100svh}
  .hero-content{padding:0 18px 130px}
  .hero-badge{font-size:11.5px;padding:7px 14px}
  .hero h1{font-size:clamp(30px,8vw,44px);max-width:100%}
  .hero-sub{font-size:15px;max-width:100%}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center;font-size:14px;padding:14px 24px}
  .hero-trust{gap:14px;margin-top:28px}
  .hero-trust-divider{display:none}
  .hero-trust-item{font-size:12px}
  .scroll-cue{display:none}

  /* Page hero */
  .page-hero{padding:110px 0 52px}
  .page-hero h1{font-size:clamp(26px,7vw,40px)}
  .page-hero p{font-size:14px}
  .breadcrumb{font-size:11px}

  /* Stats */
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(2)::after{display:none}
  .stat-number{font-size:clamp(28px,8vw,40px)}
  .stat-item{padding:24px 12px}

  /* Bento → 2 col, all auto */
  .bento-grid{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
    gap:10px;
  }
  .bento-grid .bento-card:nth-child(1),
  .bento-grid .bento-card:nth-child(2),
  .bento-grid .bento-card:nth-child(4),
  .bento-grid .bento-card:nth-child(6),
  .bento-grid .bento-card:nth-child(7),
  .bento-grid .bento-card:nth-child(8),
  .bento-grid .bento-card:nth-child(9){
    grid-column:auto;grid-row:auto;
  }
  .bento-grid .bento-card.tall,.bento-cta{grid-column:auto;grid-row:auto}
  .bento-card{min-height:160px}
  .bento-cta{padding:24px 20px;min-height:160px}
  .bento-cta h3{font-size:17px;margin-bottom:6px}
  .bento-label{font-size:13px}
  .bento-tag{font-size:10px}

  /* How it works */
  .how-grid{grid-template-columns:1fr;gap:16px}
  .how-card{padding:28px 24px}

  /* Doctors carousel */
  .doctors-carousel{padding:0 0 12px;gap:12px}
  .doctor-card{width:240px;height:290px}

  /* Testimonials */
  .testi-card{grid-template-columns:1fr;width:min(400px,88vw)}
  .testi-photo{min-height:220px}
  .testi-body{padding:24px 20px}
  .testi-stat{font-size:44px}
  .testi-header{margin-bottom:24px}

  /* Why grid */
  .why-grid{grid-template-columns:1fr;gap:14px}
  .why-card{padding:24px 20px}

  /* FAQ */
  .faq-grid{grid-template-columns:1fr;gap:36px}
  .faq-booking-card{position:static;padding:28px 24px}

  /* Story / About */
  .story-grid{grid-template-columns:1fr;gap:36px}
  .story-img{height:300px}
  .mission-grid{grid-template-columns:1fr;gap:14px}
  .values-grid{grid-template-columns:1fr 1fr;gap:14px}
  .value-card{padding:24px 16px}
  .founder-card{grid-template-columns:1fr;text-align:center;gap:20px;padding:28px 24px}
  .founder-photo{margin:0 auto}
  .founder-quote{font-size:15px}

  /* Services */
  .services-grid{grid-template-columns:1fr;gap:16px}
  .service-card-img{height:170px}
  .facilities-grid{grid-template-columns:1fr 1fr;gap:12px}
  .facility-card{padding:16px}

  /* Doctors grid page */
  .doctors-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .doc-photo{height:auto;aspect-ratio:4/5;}
  .doc-body{padding:16px}
  .doc-body h3{font-size:14px}
  .doc-services-mini li{font-size:11px}
  .filter-chips{gap:6px}
  .chip{padding:7px 14px;font-size:12px;min-height:44px;}
  .doctors-search input{font-size:16px;padding:12px 16px 12px 44px}

  /* Contact */
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .form-row{grid-template-columns:1fr}
  .contact-form-card{padding:24px 20px}
  .trust-badges{grid-template-columns:repeat(3,1fr);gap:10px}
  .trust-badge-item{padding:14px 10px}
  .trust-badge-item h4{font-size:12px}
  .trust-badge-item p{font-size:10.5px}
  .hours-card{padding:16px}
  .map-wrap{height:280px;margin-top:40px}

  /* CTA section */
  .cta-section{padding:72px 18px}
  .cta-section h2{font-size:clamp(22px,6vw,34px)}
  .cta-btns{flex-direction:column;align-items:center;gap:10px}
  .cta-btns .btn{width:100%;max-width:320px;justify-content:center}

  /* Footer */
  .footer{padding:56px 0 90px}
  .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:36px}
  .footer-brand p{font-size:13px}
  .footer-brand-btns{gap:8px}
  .footer-bottom{flex-direction:column;gap:6px;padding:16px 0}
  .footer-trust-bar{flex-direction:column;align-items:flex-start;gap:10px}

  /* Moments section — smaller on mobile */
  .moments-section{height:150vh}
  .moments-center h2{font-size:clamp(22px,6vw,32px)}

  /* Scroll fill — shorter */
  .scroll-fill-section{height:140vh}
  .fill-text{font-size:clamp(18px,5vw,26px)}

  /* Accordion */
  .accordion-btn{font-size:14px;padding:16px 0}
}

/* ── SMALL PHONE (max 480px) ── */
@media(max-width:480px){
  .container{padding:0 16px}
  .section{padding:56px 0}

  /* Bento → single column */
  .bento-grid{grid-template-columns:1fr;gap:10px}
  .bento-card{min-height:180px}
  .bento-cta{min-height:160px}

  /* Values → single col */
  .values-grid{grid-template-columns:1fr}

  /* Doctors grid → single col */
  .doctors-grid{grid-template-columns:1fr}
  .doc-photo{height:auto;aspect-ratio:4/5;}

  /* Facilities → single col */
  .facilities-grid{grid-template-columns:1fr}

  /* Stats */
  .stat-item{padding:20px 8px}

  /* Trust badges */
  .trust-badges{grid-template-columns:1fr 1fr 1fr}

  /* Footer completely single */
  .footer-grid{grid-template-columns:1fr;gap:28px}

  /* Hero */
  .hero-content{padding:0 16px 140px}
  .hero h1{font-size:clamp(28px,9vw,38px)}

  /* Page hero tighter */
  .page-hero{padding:100px 0 44px}

  /* Why cards */
  .why-grid{grid-template-columns:1fr}

  /* Services grid */
  .services-grid{grid-template-columns:1fr}

  /* Testimonial */
  .testi-card{width:calc(100vw - 32px)}

  /* How it works */
  .how-card{padding:24px 18px}

  /* Founder */
  .founder-card{padding:24px 18px}

  /* FAQ */
  .faq-booking-card{padding:24px 18px}
  .faq-grid{gap:28px}

  /* Form */
  .contact-form-card{padding:20px 16px}

  /* Floating CTA safe area */
  .floating-cta{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}

/* ── VERY SMALL (max 360px) ── */
@media(max-width:360px){
  .container{padding:0 14px}
  .hero h1{font-size:26px}
  .hero-badge{font-size:11px;padding:6px 12px}
  .hero-actions .btn{font-size:13px;padding:13px 18px}
  .stat-number{font-size:28px}
  .doctor-card{width:220px;height:270px}
  .doc-name{font-size:13px}
  .trust-badges{grid-template-columns:1fr}
  .footer-brand-btns{flex-direction:column}
  .footer-brand-btns .btn{width:100%;justify-content:center}
}

/* ── SAFE AREA (iPhone notch / home bar) ── */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .floating-cta{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .mobile-menu{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
}

/* ── TOUCH IMPROVEMENTS ── */
@media(hover:none) and (pointer:coarse){
  /* Remove hover effects that feel wrong on touch */
  .btn:hover{transform:none}
  .bento-card:hover{transform:none}
  .doctor-card:hover{transform:none}
  .service-card:hover{transform:none}
  .why-card:hover{transform:none}
  /* Larger tap targets */
  .accordion-btn{padding:18px 0;min-height:48px}
  .nav-link{min-height:44px;display:flex;align-items:center}
  .mobile-menu a{min-height:48px;display:flex;align-items:center}
  .chip{min-height:40px}
  .doc-book{min-height:44px;display:flex;align-items:center;justify-content:center}
  .faq-link{min-height:44px;display:inline-flex;align-items:center}
  /* Active states replace hover on touch */
  .btn:active{transform:scale(0.97)}
  .bento-card:active{transform:scale(0.99)}
}

/* Image loading states */
img{background:var(--mint)}
img[loading=lazy]{opacity:0;transition:opacity 0.4s}
img.loaded{opacity:1}
.bento-card img,.doctor-card img,.doc-photo img,.testi-photo img,.service-card-img img,.story-img img{opacity:1}

/* Touch scroll momentum */
.doctors-carousel,.testi-carousel{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}

/* Prevent layout shift on carousel */
.doctors-carousel-wrap{overflow:hidden}


/* ==========================================================
   WHY CHOOSE US — DOCTOR SHOWCASE GRID
   ========================================================== */
.why-doctors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 0;
}
.why-doctor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 0.35s var(--ease-expo), box-shadow 0.35s;
}
.why-doctor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(43,168,160,0.13);
  border-color: var(--teal);
}
.why-doctor-photo {
  height: 220px;
  overflow: hidden;
  background: var(--mint);
}
.why-doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s var(--ease-expo);
}
.why-doctor-card:hover .why-doctor-photo img {
  transform: scale(1.05);
}
.why-doctor-body {
  padding: 18px 20px 20px;
}
.why-doctor-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.why-doctor-spec {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 6px;
}
.why-doctor-cred {
  font-size: 11.5px;
  color: var(--muted-c);
  line-height: 1.55;
}

@media(max-width:768px) {
  .why-doctors-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .why-doctor-photo { height: 180px; }
}
@media(max-width:400px) {
  .why-doctors-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why-doctor-body { padding: 14px 14px 16px; }
  .why-doctor-name { font-size: 13px; }
}

/* ==========================================================
   STACKING CONTEXT FIX — prevent cards overlapping navbar
   ========================================================== */
/* Sections with tilt cards must not escape navbar z-index:1000 */
.bento-grid,
.why-grid,
.how-grid,
.services-grid,
.doctors-grid,
.value-card,
.testi-carousel {
  position: relative;
  z-index: 0;
}

/* Tilt elements must stay below fixed navbar */
.tilt:hover {
  z-index: 1;
  position: relative;
}

/* Navbar always on top of everything */
.navbar {
  z-index: 1000 !important;
  isolation: isolate;
}

/* New Logo Image Styles */
.nav-logo-img {
  height: 45px;
  width: auto;
  background: transparent;
  transition: transform 0.3s var(--ease-back);
}
.nav-logo:hover .nav-logo-img {
  transform: scale(1.03);
}

.footer-logo-img {
  height: 55px;
  width: auto;
  background: transparent;
}

@media (max-width: 1024px) {
  .nav-logo-img {
    height: 38px;
  }
}

.doc-online {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(43,168,160,0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 4px;
}
.doc-online-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(43,168,160,0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

/* About Page Hero Grid Fix */
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.page-hero-img img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  border-radius: var(--r-card, 24px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
  .page-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}