/* ==========================================================================
   G.L.O.W by Dr Garvita  |  Vishwas Dental Care & Implant Center
   Master Stylesheet — Design System + Components
   Author: Design & Frontend Team
   NOTE: This file is organized in clearly commented sections:
   1. Design Tokens (colors, spacing, radii, shadows)
   2. Typography
   3. Base / Reset
   4. Layout Utilities
   5. Buttons
   6. Header / Navigation
   7. Hero
   8. Cards & Sections
   9. Components (accordion, tabs, timeline, counters, modals, lightbox)
   10. Forms
   11. Footer
   12. Misc (loader, toast, back-to-top, floating buttons)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
--------------------------------------------------------------------------- */
:root{
  /* Brand Colors */
  --emerald:        #2C2620;
  --emerald-dark:    rgba(44,38,32,.7);
  --emerald-light:   rgba(44,38,32,.5);
  --gold:            #c8a24d;
  --gold-light:      #e3c988;
  --gold-dark:       #a3823a;
  --ivory:           #faf6ee;
  --ivory-deep:      #f3ecdd;
  --white:           #ffffff;
  --sage:            #adc0a4;
  --sage-light:      #e4ead0;
  --charcoal:        #262624;
  --charcoal-soft:   #4a4a46;
  --success:         #2e6b3e;
  --error:           #b6524a;

  /* Aliases used across components */
  --color-primary:   var(--emerald);
  --color-secondary: var(--gold);
  --color-bg:        var(--ivory);
  --color-card:      var(--white);
  --color-accent:    var(--sage);
  --color-text:      var(--charcoal);

  /* Typography */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Manrope', sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 100px;

  /* Shadows — used sparingly, soft & warm, never harsh */
  --shadow-soft: 0 10px 30px -12px rgba(14, 75, 58, 0.18);
  --shadow-card: 0 6px 20px -6px rgba(38, 38, 36, 0.10);
  --shadow-gold: 0 8px 24px -8px rgba(200, 162, 77, 0.35);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.25s var(--ease);
  --t-med: 0.45s var(--ease);
  --t-slow: 0.8s var(--ease);

  --header-h: 108px;
  --header-h-shrink: 76px;
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHY
--------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6,
.font-display{
  font-family: var(--font-display);
  color: var(--charcoal);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

body, p, a, span, li, input, textarea, select, button, label{
  font-family: var(--font-body);
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before{
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-dark);
  display: inline-block;
}

h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2{ font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h4{ font-size: 1.25rem; }

.section-title{
  margin-bottom: var(--space-sm);
}
.section-sub{
  color: var(--charcoal-soft);
  font-size: 1.05rem;
  max-width: 640px;
  line-height: 1.7;
}
.text-serif-italic{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-dark);
}

/* ---------------------------------------------------------------------------
   3. BASE / RESET
--------------------------------------------------------------------------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ text-decoration: none; color: inherit; }
ul{ list-style: none; margin:0; padding:0; }
section{ position: relative; }
::selection{ background: var(--gold-light); color: var(--emerald-dark); }

.container-xl{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.divider-gold{
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  margin: 1.1rem 0 1.4rem;
}
.divider-center{ margin-left:auto; margin-right:auto; }

.bg-ivory{ background: var(--color-bg) !important; }
.bg-ivory-deep{ background: var(--ivory-deep) !important; }
.bg-emerald{ background: var(--emerald) !important; color: var(--ivory); }
.bg-emerald .h-serif, .bg-emerald h2, .bg-emerald h3{ color: var(--ivory); }
.text-emerald{ color: var(--emerald) !important; }
.text-gold{ color: var(--gold-dark) !important; }
.text-sage{ color: var(--sage) !important; }
.text-muted-soft{ color: var(--charcoal-soft) !important; }

.section-pad{ padding: var(--space-2xl) 0; }
.section-pad-sm{ padding: var(--space-xl) 0; }

/* subtle organic texture backdrop (no fake glass/futuristic FX) */
.texture-leaf{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 18%, rgba(200,162,77,0.06), transparent 40%),
                     radial-gradient(circle at 88% 82%, rgba(14,75,58,0.06), transparent 45%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   4. LAYOUT UTILITIES
--------------------------------------------------------------------------- */
.d-grid-center{ display:grid; place-items:center; }
.ratio-4-3{ position:relative; padding-top:75%; overflow:hidden; border-radius: var(--radius-md); }
.ratio-4-3 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ratio-1-1{ position:relative; padding-top:100%; overflow:hidden; border-radius: var(--radius-md); }
.ratio-1-1 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.rounded-luxury{ border-radius: var(--radius-lg) !important; }

/* frame decoration used around portraits / feature imagery */
.frame-gold{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 14px;
}
.frame-gold::before{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(200,162,77,0.55);
  border-radius: var(--radius-lg);
  margin: 6px;
  pointer-events:none;
}
.frame-gold img{ border-radius: calc(var(--radius-lg) - 8px); }

/* ---------------------------------------------------------------------------
   5. BUTTONS
--------------------------------------------------------------------------- */
.btn{ font-family: var(--font-body); font-weight: 600; letter-spacing:0.02em; }

.btn-luxury{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  border-radius: var(--radius-pill);
  background: var(--emerald);
  color: var(--ivory) !important;
  border: 1px solid var(--emerald);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  box-shadow: var(--shadow-soft);
}
.btn-luxury:hover{
  background: var(--emerald-dark);
  transform: translateY(-2px);
  color: var(--ivory) !important;
}
.btn-luxury:active{ transform: translateY(0); }

.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--emerald-dark) !important;
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--white) !important;
}

.btn-outline-luxury{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1.5px solid var(--emerald);
  color: var(--emerald) !important;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all var(--t-fast);
}
.btn-outline-luxury:hover{
  background: var(--emerald);
  color: var(--ivory) !important;
}

.btn-outline-light{
  border: 1.5px solid rgba(255,255,255,0.75);
  color: var(--white) !important;
}
.btn-outline-light:hover{ background: var(--white); color: var(--emerald) !important; }

.btn-sm-luxury{ padding: 0.6rem 1.3rem; font-size: 0.78rem; }

.btn-link-underline{
  position: relative;
  font-weight: 700;
  color: var(--emerald);
  padding-bottom: 4px;
}
.btn-link-underline::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height: 2px; width: 100%;
  background: var(--gold);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform var(--t-fast);
}
.btn-link-underline:hover::after{ transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   6. HEADER / NAVIGATION
--------------------------------------------------------------------------- */
.topbar{
  background: var(--emerald-dark);
  color: rgba(250,246,238,0.92);
  font-size: 0.82rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(200,162,77,0.25);
}
.topbar a{ color: inherit; transition: color var(--t-fast); }
.topbar a:hover{ color: var(--gold-light); }
.topbar .topbar-sep{ opacity:0.35; margin: 0 0.85rem; }
.topbar .fa, .topbar .fa-solid, .topbar .fa-brands{ color: var(--gold); margin-right: 0.35rem; }

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  transition: background var(--t-med), box-shadow var(--t-med), padding var(--t-med), transform var(--t-med);
}
.main-nav{
  background: transparent;
  padding: 1.35rem 0;
  transition: all var(--t-med);
}
.site-header.is-scrolled .topbar{ display:none; }
.site-header.is-scrolled .main-nav{
  background: rgba(250,246,238,0.97);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 8px 30px -14px rgba(38,38,36,0.25);
  padding: 0.7rem 0;
}
.site-header:not(.is-scrolled) .main-nav.nav-solid{
  background: var(--ivory);
  padding: 0.9rem 0;
}

.brand-lockup{ display:flex; align-items:center; gap:0.85rem; }
.brand-mark{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: grid; place-items:center;
  font-family: var(--font-display);
  font-weight:700; font-size:1.3rem;
  color: var(--gold);
  flex-shrink:0;
  transition: all var(--t-med);
}
.brand-text .brand-name{
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  transition: color var(--t-med);
}
.brand-text .brand-tag{
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  display:block;
  margin-top: 2px;
}
.site-header:not(.is-scrolled) .brand-text .brand-name{ color: var(--white); }
.site-header.is-scrolled .brand-text .brand-name{ color: var(--emerald); }
.site-header:not(.is-scrolled) .brand-mark{ border-color: var(--gold-light); color: var(--gold-light);}

.main-nav .navbar-nav{ gap: 0.35rem; }
.main-nav .nav-link{
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.6rem 1rem !important;
  position: relative;
  transition: color var(--t-fast);
}
.site-header:not(.is-scrolled) .main-nav .nav-link{ color: rgba(255,255,255,0.92) !important; }
.site-header.is-scrolled .main-nav .nav-link{ color: var(--charcoal) !important; }
.main-nav .nav-link::after{
  content:"";
  position:absolute; left:1rem; right:1rem; bottom: 0.35rem;
  height:2px; background: var(--gold);
  transform: scaleX(0); transition: transform var(--t-fast);
}
.main-nav .nav-link:hover::after,
.main-nav .nav-link.active::after{ transform: scaleX(1); }
.main-nav .nav-link:hover{ color: var(--gold-dark) !important; }

.nav-cta{ display:flex; align-items:center; gap: 0.7rem; }

/* Mega menu */
.mega-menu{
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 22px 60px -20px rgba(14,75,58,0.28);
  padding: 1.75rem;
  margin-top: 0.7rem !important;
  min-width: 620px;
  background: var(--white);
}
.mega-menu .mega-col-title{
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold-dark);
  margin-bottom: 0.9rem;
}
.mega-menu .mega-link{
  display:flex; align-items:center; gap:0.6rem;
  padding: 0.5rem 0.4rem;
  border-radius: var(--radius-sm);
  color: var(--charcoal);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--t-fast);
}
.mega-menu .mega-link i{ color: var(--emerald); width:18px; text-align:center; }
.mega-menu .mega-link:hover{ background: var(--ivory); color: var(--emerald); padding-left:0.7rem; }
.mega-menu .mega-feature{
  background: linear-gradient(155deg, var(--emerald), var(--emerald-dark));
  border-radius: var(--radius-md);
  padding: 1.4rem;
  color: var(--ivory);
  height:100%;
}
.mega-menu .mega-feature h5{ color: var(--ivory); font-size:1.15rem; }
.mega-menu .mega-feature p{ color: rgba(250,246,238,0.8); font-size:0.85rem; margin-bottom:1rem;}

@media (min-width:992px){
  .dropdown-mega{ position: relative; }
}

/* Mobile drawer */
.mobile-drawer{
  position: fixed; top:0; right:-100%;
  width: min(420px, 92vw); height: 100%;
  background: var(--ivory);
  z-index: 1200;
  transition: right var(--t-med);
  box-shadow: -20px 0 60px rgba(0,0,0,0.25);
  overflow-y: auto;
}
.mobile-drawer.open{ right:0; }
.drawer-backdrop{
  position: fixed; inset:0; background: rgba(9,58,44,0.55);
  z-index: 1190; opacity:0; pointer-events:none;
  transition: opacity var(--t-med);
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.5rem 1.4rem; border-bottom: 1px solid rgba(14,75,58,0.1);
}
.drawer-close{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(14,75,58,0.25);
  display:grid;place-items:center;
  background: var(--white); color: var(--emerald);
  transition: all var(--t-fast);
}
.drawer-close:hover{ background: var(--emerald); color:var(--ivory); transform: rotate(90deg); }
.drawer-nav{ padding: 0.5rem 1.4rem 1.5rem; }
.drawer-nav .drawer-link{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.05rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight:600; color: var(--charcoal);
  border-bottom: 1px solid rgba(14,75,58,0.08);
}
.drawer-nav .drawer-link i.chev{ color: var(--gold); font-size:0.85rem; }
.drawer-sub{ padding-left: 1rem; display:none; }
.drawer-sub.open{ display:block; }
.drawer-sub a{
  display:block; padding:0.6rem 0.2rem;
  font-size:0.95rem; color: var(--charcoal-soft); font-weight:600;
}
.drawer-actions{ padding: 1rem 1.4rem 2rem; display:grid; gap:0.7rem; }
.drawer-actions .btn-call{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  padding: 0.9rem; border-radius: var(--radius-pill);
  background: var(--emerald); color: var(--ivory); font-weight:700;
}
.drawer-actions .btn-whatsapp{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  padding: 0.9rem; border-radius: var(--radius-pill);
  background: #ffffff; border: 1.5px solid var(--emerald); color: var(--emerald); font-weight:700;
}
.hamburger-btn{
  width:48px; height:48px; border-radius:50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  display:grid; place-items:center;
  background: transparent;
  transition: all var(--t-fast);
}
.site-header.is-scrolled .hamburger-btn{ border-color: rgba(14,75,58,0.3); }
.hamburger-btn span{ display:block; width:20px; height:2px; background: var(--white); position:relative; }
.site-header.is-scrolled .hamburger-btn span{ background: var(--emerald); }
.hamburger-btn span::before,.hamburger-btn span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background: currentColor;
}

/* ---------------------------------------------------------------------------
   7. HERO
--------------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background: var(--emerald-dark);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(44,38,32,.7) 0%, rgba(44,38,32,.5) 45%, rgba(44,38,32,.5) 100%);
}
.hero-content{ position:relative; z-index:2; padding-top: var(--header-h); }
.hero .eyebrow{ color: var(--gold-light); }
.hero .eyebrow::before{ background: var(--gold-light); }
.hero h1{
  color: var(--white);
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin: 0.9rem 0 1.2rem;
}
.hero h1 em{
  font-style: italic; color: var(--gold-light); font-weight:600;
}
.hero p.hero-lead{
  color: rgba(250,246,238,0.88);
  font-size: 1.15rem;
  max-width: 560px;
  margin-bottom: 2.1rem;
  line-height:1.75;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero-scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  z-index:2; color: rgba(255,255,255,0.75); text-align:center; font-size:0.72rem;
  letter-spacing:0.16em; text-transform:uppercase;
}
.hero-scroll-cue .cue-line{
  width:1px; height: 42px; background: rgba(255,255,255,0.5);
  margin: 0.6rem auto 0;
  overflow:hidden; position:relative;
}
.hero-scroll-cue .cue-line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--gold-light);
  animation: cueDrop 2.2s infinite ease-in-out;
}
@keyframes cueDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

.hero-badge-row{
  position:relative; z-index:2;
  margin-top: 2.6rem;
  display:flex; gap: 1.8rem; flex-wrap:wrap;
}
.hero-badge{
  display:flex; align-items:center; gap:0.7rem;
  color: rgba(250,246,238,0.9);
  font-size:0.85rem; font-weight:700;
}
.hero-badge i{ color: var(--gold-light); font-size:1.2rem; }

/* Trust badge strip below hero */
.trust-strip{
  background: var(--white);
  border-bottom: 1px solid rgba(14,75,58,0.08);
  padding: 1.6rem 0;
}
.trust-item{
  display:flex; align-items:center; gap:0.9rem;
  padding: 0.4rem 0.6rem;
}
.trust-item .ti-icon{
  width:48px;height:48px;border-radius:50%;
  background: var(--ivory); color: var(--emerald);
  display:grid; place-items:center; font-size:1.15rem; flex-shrink:0;
  border: 1px solid rgba(200,162,77,0.35);
}
.trust-item .ti-title{ font-weight:800; font-size:0.92rem; color: var(--emerald); }
.trust-item .ti-sub{ font-size:0.78rem; color: var(--charcoal-soft); }

/* ---------------------------------------------------------------------------
   8. CARDS & SECTIONS
--------------------------------------------------------------------------- */
.card-luxury{
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), box-shadow var(--t-med);
  overflow:hidden;
  height:100%;
}
.card-luxury:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -18px rgba(14,75,58,0.22);
}

/* Service card */
.service-card{
  position:relative;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.8rem;
  height:100%;
  transition: all var(--t-med);
  border: 1px solid rgba(14,75,58,0.07);
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 26px 55px -20px rgba(14,75,58,0.25);
  border-color: rgba(200,162,77,0.4);
}
.service-card .sc-icon{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(155deg, var(--ivory), var(--ivory-deep));
  display:grid; place-items:center;
  color: var(--emerald); font-size:1.6rem;
  margin-bottom:1.3rem;
  transition: all var(--t-med);
  border: 1px solid rgba(200,162,77,0.3);
}
.service-card:hover .sc-icon{ background: var(--emerald); color: var(--gold-light); transform: rotate(-8deg) scale(1.05); }
.service-card h4{ margin-bottom:0.6rem; font-size:1.2rem;}
.service-card p{ color: var(--charcoal-soft); font-size:0.92rem; margin-bottom:1rem; }
.service-card .sc-link{ font-size:0.82rem; font-weight:800; color: var(--emerald); letter-spacing:0.03em; text-transform:uppercase; }
.service-card .sc-tag{
  position:absolute; top:1.4rem; right:1.4rem;
  font-size:0.65rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  padding: 0.28rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--ivory); color: var(--gold-dark);
}

/* Treatment image card (services page) */
.treatment-card{
  background: var(--white);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--t-med);
  height:100%;
}
.treatment-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 46px -18px rgba(14,75,58,0.22); }
.treatment-card .tc-media{ position:relative; height: 210px; overflow:hidden; }
.treatment-card .tc-media img{ width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow); }
.treatment-card:hover .tc-media img{ transform: scale(1.08); }
.treatment-card .tc-body{ padding: 1.4rem 1.5rem 1.6rem; }
.treatment-card .tc-price{ color: var(--gold-dark); font-weight:800; font-size:0.85rem; }

/* Section headers */
.section-head{ margin-bottom: var(--space-lg); }
.section-head.text-center{ display:flex; flex-direction:column; align-items:center; }

/* Dual clinic split */
.dual-split{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }
.dual-panel{
  position:relative; padding: 3.2rem 2.4rem; min-height: 480px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.dual-panel img.dual-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform 1.2s var(--ease);}
.dual-panel:hover img.dual-bg{ transform: scale(1.06); }
.dual-panel::before{
  content:""; position:absolute; inset:0; z-index:1;
}
.dual-panel.glow-panel::before{ background: linear-gradient(180deg, rgba(44,38,32,.5), rgba(44,38,32,.5)); }
.dual-panel.dental-panel::before{ background: linear-gradient(180deg, rgba(38,38,36,0.15), rgba(20,32,28,0.92)); }
.dual-panel .dp-content{ position:relative; z-index:2; color: var(--white); }
.dual-panel .dp-badge{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:800;
  color: var(--gold-light); margin-bottom:0.8rem;
}
.dual-panel h3{ color:var(--white); font-size:2rem; margin-bottom:0.6rem; }
.dual-panel p{ color: rgba(255,255,255,0.85); margin-bottom:1.3rem; max-width:420px; }
.dual-panel .dp-list{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.5rem; }
.dual-panel .dp-list li{
  font-size:0.8rem; font-weight:700; padding:0.4rem 0.9rem;
  border:1px solid rgba(255,255,255,0.35); border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.9);
}

/* Doctor card */
.doctor-card{
  background: var(--white); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-card); height:100%;
}
.doctor-card .dc-media{ position:relative; overflow:hidden; }
.doctor-card .dc-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; }
.doctor-card .dc-body{ padding: 1.8rem 1.7rem; }
.doctor-card .dc-social{ display:flex; gap:0.6rem; margin-top:1.1rem; }
.doctor-card .dc-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(14,75,58,0.2); display:grid; place-items:center; color: var(--emerald);
  transition: all var(--t-fast);
}
.doctor-card .dc-social a:hover{ background: var(--emerald); color: var(--ivory); }

/* Why choose us */
.feature-row{ display:flex; gap:1.2rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(14,75,58,0.09); }
.feature-row:last-child{ border-bottom:none; }
.feature-row .fr-icon{
  width:54px;height:54px;border-radius:14px; flex-shrink:0;
  background: var(--ivory); color: var(--emerald); display:grid;place-items:center; font-size:1.25rem;
  border: 1px solid rgba(200,162,77,0.3);
}
.feature-row h5{ margin-bottom:0.3rem; font-size:1.08rem; }
.feature-row p{ font-size:0.9rem; color: var(--charcoal-soft); margin:0; }

/* Technology used */
.tech-card{
  text-align:center; background: var(--white); border-radius: var(--radius-md);
  padding: 2rem 1.4rem; box-shadow: var(--shadow-card); height:100%;
  transition: all var(--t-med);
}
.tech-card:hover{ transform: translateY(-6px); }
.tech-card .tech-icon{
  width:70px; height:70px; margin: 0 auto 1.1rem; border-radius:50%;
  background: linear-gradient(155deg, var(--emerald), var(--emerald-light));
  color: var(--gold-light); display:grid; place-items:center; font-size:1.7rem;
}

/* Counters */
.counter-strip{ background: var(--emerald); border-radius: var(--radius-lg); padding: 3rem 1.5rem; }
.counter-item{ text-align:center; color: var(--ivory); }
.counter-item .num{ font-family: var(--font-display); font-size: 3rem; font-weight:700; color: var(--gold-light); line-height:1; }
.counter-item .lbl{ font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-top:0.5rem; opacity:0.85; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-flow: dense; }
.gallery-item{ position:relative; overflow:hidden; border-radius: var(--radius-md); cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow); display:block; }
.gallery-item:hover img{ transform: scale(1.1); }
.gallery-item .gi-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,58,44,0) 40%, rgba(9,58,44,0.85) 100%);
  display:flex; align-items:flex-end; padding: 1rem; opacity:0; transition: opacity var(--t-fast);
}
.gallery-item:hover .gi-overlay{ opacity:1; }
.gallery-item .gi-overlay span{ color:var(--white); font-weight:700; font-size:0.85rem; }
.gallery-item .gi-zoom{
  position:absolute; top:0.8rem; right:0.8rem; width:36px;height:36px;border-radius:50%;
  background: rgba(255,255,255,0.9); color: var(--emerald); display:grid; place-items:center;
  opacity:0; transform: scale(0.7); transition: all var(--t-fast);
}
.gallery-item:hover .gi-zoom{ opacity:1; transform:scale(1); }
.gallery-item.gi-tall{ grid-row: span 2; }
.gallery-item.gi-wide{ grid-column: span 2; }
.gallery-filter{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2rem; }
.gallery-filter button{
  padding: 0.55rem 1.3rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(14,75,58,0.25); background: transparent; color: var(--emerald);
  font-size:0.82rem; font-weight:700; letter-spacing:0.02em; transition: all var(--t-fast);
}
.gallery-filter button.active, .gallery-filter button:hover{ background: var(--emerald); color: var(--ivory); border-color: var(--emerald); }

/* Video cards */
.video-card{ position:relative; border-radius: var(--radius-md); overflow:hidden; cursor:pointer; box-shadow: var(--shadow-card); }
.video-card .vc-thumb{ position:relative; aspect-ratio: 16/10; overflow:hidden; }
.video-card .vc-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform var(--t-slow); }
.video-card:hover .vc-thumb img{ transform: scale(1.08); }
.video-card .vc-thumb::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,58,44,0.05), rgba(9,58,44,0.75)); }
.video-card .vc-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background: rgba(250,246,238,0.92); color: var(--emerald); display:grid; place-items:center; font-size:1.4rem;
  transition: all var(--t-fast); z-index:2;
}
.video-card:hover .vc-play{ background: var(--gold); color: var(--white); transform:translate(-50%,-50%) scale(1.1); }
.video-card .vc-duration{
  position:absolute; bottom:0.8rem; right:0.8rem; background: rgba(9,58,44,0.85); color:var(--white);
  font-size:0.72rem; font-weight:700; padding:0.2rem 0.6rem; border-radius: var(--radius-sm); z-index:2;
}
.video-card .vc-cat{
  position:absolute; top:0.8rem; left:0.8rem; background: rgba(250,246,238,0.92); color: var(--gold-dark);
  font-size:0.68rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.28rem 0.7rem; border-radius: var(--radius-pill); z-index:2;
}
.video-card .vc-body{ padding: 1.1rem 1.2rem; background: var(--white); }
.video-card .vc-body h5{ font-size:1rem; margin-bottom:0.2rem; }
.video-card .vc-body p{ font-size:0.8rem; color: var(--charcoal-soft); margin:0; }

/* Testimonial cards */
.testimonial-card{
  background: var(--white); border-radius: var(--radius-md); padding: 2rem 1.9rem;
  box-shadow: var(--shadow-card); height:100%;
}
.testimonial-card .stars{ color: var(--gold); font-size:0.9rem; margin-bottom:0.9rem; }
.testimonial-card p.quote{ font-family: var(--font-display); font-size:1.12rem; font-style:italic; color: var(--charcoal); line-height:1.6; margin-bottom:1.3rem; }
.testimonial-card .reviewer{ display:flex; align-items:center; gap:0.8rem; }
.testimonial-card .reviewer .rv-avatar{
  width:46px;height:46px;border-radius:50%; background: var(--ivory); color: var(--emerald);
  display:grid; place-items:center; font-weight:800; border:1px solid rgba(200,162,77,0.35);
}
.testimonial-card .reviewer .rv-name{ font-weight:800; font-size:0.92rem; }
.testimonial-card .reviewer .rv-role{ font-size:0.78rem; color: var(--charcoal-soft); }
.testimonial-card .quote-badge{ color: rgba(200,162,77,0.4); font-size:2.2rem; line-height:1; margin-bottom:0.4rem; display:block; }

/* Google review placeholder card */
.google-review-card{
  background: var(--white); border: 1px solid rgba(14,75,58,0.08); border-radius: var(--radius-md);
  padding: 1.6rem; box-shadow: var(--shadow-card);
}
.google-review-card .g-head{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.7rem; }
.google-review-card .g-logo{ width:34px;height:34px; border-radius:50%; background:var(--ivory); display:grid;place-items:center; color:#c8a24d; }

/* FAQ / Accordion */
.faq-accordion .accordion-item{
  border: none; border-bottom: 1px solid rgba(14,75,58,0.12);
  background: transparent; margin-bottom: 0.4rem;
}
.faq-accordion .accordion-button{
  font-family: var(--font-display); font-size:1.15rem; font-weight:600;
  padding: 1.3rem 0.3rem; background: transparent; color: var(--charcoal);
  box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){ color: var(--emerald); background:transparent; }
.faq-accordion .accordion-button::after{
  background-image: none; content:"\f067"; font-family:"Font Awesome 6 Free"; font-weight:900;
  color: var(--gold-dark); font-size: 0.95rem; transition: transform var(--t-fast);
}
.faq-accordion .accordion-button:not(.collapsed)::after{ content:"\f068"; transform: rotate(180deg); }
.faq-accordion .accordion-body{ padding: 0 0.3rem 1.5rem; color: var(--charcoal-soft); font-size:0.96rem; }

/* Tabs (services) */
.luxury-tabs{ display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin-bottom: 2.4rem; }
.luxury-tabs button{
  padding: 0.75rem 1.6rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(14,75,58,0.2); background: var(--white); color: var(--emerald);
  font-weight:700; font-size:0.88rem; transition: all var(--t-fast);
}
.luxury-tabs button.active{ background: var(--emerald); color: var(--ivory); border-color: var(--emerald); box-shadow: var(--shadow-soft); }

/* Timeline (doctor experience) */
.timeline-luxury{ position:relative; padding-left: 2.2rem; }
.timeline-luxury::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background: linear-gradient(180deg, var(--gold), rgba(200,162,77,0.15)); }
.timeline-item{ position:relative; padding-bottom: 1.9rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.2rem; top:4px; width:16px; height:16px; border-radius:50%;
  background: var(--white); border: 3px solid var(--emerald);
}
.timeline-item .ti-year{ font-weight:800; color: var(--gold-dark); font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; }
.timeline-item h5{ margin: 0.25rem 0 0.3rem; font-size:1.08rem; }
.timeline-item p{ font-size:0.9rem; color: var(--charcoal-soft); margin:0; }

/* Progress bars (skills / certifications) */
.progress-luxury{ margin-bottom: 1.3rem; }
.progress-luxury .pl-label{ display:flex; justify-content:space-between; font-size:0.88rem; font-weight:700; margin-bottom:0.4rem; }
.progress-luxury .pl-track{ height:7px; background: var(--ivory-deep); border-radius: var(--radius-pill); overflow:hidden; }
.progress-luxury .pl-fill{ height:100%; background: linear-gradient(90deg, var(--emerald), var(--gold)); border-radius: var(--radius-pill); width:0; transition: width 1.4s var(--ease); }

/* ---------------------------------------------------------------------------
   9. MODALS / LIGHTBOX / VIDEO POPUP
--------------------------------------------------------------------------- */
.modal-luxury .modal-content{
  border-radius: var(--radius-md); border:none; background: var(--white); box-shadow: 0 40px 90px -30px rgba(14,75,58,0.5);
}
.modal-luxury .modal-header{ border-bottom: 1px solid rgba(14,75,58,0.08); padding: 1.4rem 1.6rem; }
.modal-luxury .modal-title{ font-family: var(--font-display); font-size:1.4rem; }
.modal-luxury .modal-body{ padding: 1.6rem; }

#videoModal .modal-content{ background: #000; }
#videoModal .modal-body{ padding:0; position:relative; }
#videoModal .btn-close{ position:absolute; top:-46px; right:0; filter: invert(1); z-index:10; }
#videoModal video{ width:100%; max-height:80vh; }

#lightboxModal .modal-content{ background: rgba(9,20,16,0.97); }
#lightboxModal .modal-body{ text-align:center; padding:1.5rem; }
#lightboxModal img{ max-height:78vh; margin:0 auto; border-radius: var(--radius-sm); }
#lightboxModal .btn-close{ filter:invert(1); position:absolute; top:1.2rem; right:1.4rem; z-index:5; }
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,0.15);
  color:#fff; display:grid; place-items:center; font-size:1.2rem; transition: all var(--t-fast);
}
.lightbox-nav:hover{ background: var(--gold); }
.lightbox-nav.prev{ left: 1rem; }
.lightbox-nav.next{ right: 1rem; }

/* ---------------------------------------------------------------------------
   10. FORMS
--------------------------------------------------------------------------- */
.form-luxury label{ font-size:0.82rem; font-weight:700; letter-spacing:0.02em; color: var(--charcoal); margin-bottom:0.45rem; display:block; }
.form-luxury .form-control, .form-luxury .form-select{
  background: var(--white); border: 1.5px solid rgba(14,75,58,0.16);
  border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size:0.95rem;
  transition: all var(--t-fast);
}
.form-luxury .form-control:focus, .form-luxury .form-select:focus{
  border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200,162,77,0.15); background: var(--white);
}
.form-luxury textarea.form-control{ min-height: 130px; }
.form-luxury .invalid-feedback{ font-size:0.78rem; }
.form-luxury .form-control.is-invalid, .form-luxury .form-select.is-invalid{ border-color: var(--error); }
.form-luxury .form-control.is-valid, .form-luxury .form-select.is-valid{ border-color: var(--success); }
.form-panel{
  background: var(--white); border-radius: var(--radius-lg); padding: 2.6rem;
  box-shadow: var(--shadow-soft);
}
.form-side-info{
  background: linear-gradient(165deg, var(--emerald), var(--emerald-dark));
  border-radius: var(--radius-lg); padding: 2.8rem; color: var(--ivory); height:100%;
}
.form-side-info h3{ color: var(--ivory); }
.form-side-info .fsi-item{ display:flex; gap:0.9rem; margin-bottom:1.4rem; }
.form-side-info .fsi-item i{ color: var(--gold-light); font-size:1.15rem; margin-top:3px; }
.form-side-info .fsi-item span{ color: rgba(250,246,238,0.85); font-size:0.9rem; }
.form-side-info .fsi-item strong{ display:block; color: var(--white); font-size:0.95rem; margin-bottom:0.15rem;}

/* Success popup icon */
.success-check{
  width:84px; height:84px; border-radius:50%; background: rgba(46,107,62,0.12);
  color: var(--success); display:grid; place-items:center; font-size:2.2rem; margin: 0 auto 1.2rem;
}

/* ---------------------------------------------------------------------------
   11. FOOTER
--------------------------------------------------------------------------- */
.site-footer{ background: var(--emerald); color: rgba(250,246,238,0.85); }
.footer-top{ padding: var(--space-2xl) 0 var(--space-lg); }
.footer-brand .brand-name{ color: var(--ivory); font-size:1.5rem; }
.footer-brand p{ color: rgba(250,246,238,0.72); font-size:0.92rem; margin: 1.1rem 0 1.4rem; max-width: 320px; }
.footer-heading{ color: var(--gold-light); font-family: var(--font-display); font-size:1.15rem; margin-bottom:1.3rem; }
.footer-links li{ margin-bottom:0.75rem; }
.footer-links a{ font-size:0.9rem; color: rgba(250,246,238,0.75); transition: all var(--t-fast); display:inline-flex; align-items:center; gap:0.5rem; }
.footer-links a:hover{ color: var(--gold-light); padding-left:0.3rem; }
.footer-contact li{ display:flex; gap:0.8rem; margin-bottom:1.05rem; font-size:0.9rem; color: rgba(250,246,238,0.8); }
.footer-contact i{ color: var(--gold-light); margin-top:3px; width:16px; }
.footer-social{ display:flex; gap:0.7rem; margin-top:1.4rem; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(250,246,238,0.25);
  display:grid; place-items:center; color: var(--ivory); transition: all var(--t-fast);
}
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--emerald-dark); transform: translateY(-3px); }
.footer-hours-badge{ display:flex; align-items:center; gap:0.7rem; margin-bottom:1rem; }
.footer-hours-badge i{ color: var(--gold-light); }
.footer-bottom{ border-top: 1px solid rgba(250,246,238,0.14); padding: 1.4rem 0; font-size:0.83rem; }
.footer-bottom a{ color: var(--gold-light); }

/* ---------------------------------------------------------------------------
   12. MISC (loader, toast, back-to-top, floating buttons, skeleton)
--------------------------------------------------------------------------- */
#pageLoader{
  position:fixed; inset:0; background: var(--ivory); z-index: 9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#pageLoader.hide{ opacity:0; visibility:hidden; }
.loader-mark{
  width:78px; height:78px; border-radius:50%; border: 2px solid rgba(14,75,58,0.15);
  display:grid; place-items:center; position:relative; margin-bottom:1.1rem;
}
.loader-mark::before{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border: 2px solid transparent; border-top-color: var(--gold); border-right-color: var(--gold);
  animation: spin 1s linear infinite;
}
.loader-mark span{ font-family: var(--font-display); color: var(--emerald); font-weight:700; font-size:1.5rem; }
.loader-text{ font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--emerald); font-weight:700; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.floating-actions{
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 1040;
  display:flex; flex-direction:column; gap:0.8rem; align-items:flex-end;
}
.fab{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:1.4rem; box-shadow: 0 12px 26px -8px rgba(0,0,0,0.35);
  transition: all var(--t-fast); position:relative;
}
.fab:hover{ transform: translateY(-4px) scale(1.05); }
.fab-whatsapp{ background:#25923b; }
.fab-call{ background: var(--emerald); }
.fab-top{
  width:46px;height:46px; background: var(--white); color: var(--emerald); border: 1px solid rgba(14,75,58,0.2);
  opacity:0; pointer-events:none; transform: translateY(10px);
}
.fab-top.show{ opacity:1; pointer-events:auto; transform:none; }
.fab-pulse::before{
  content:""; position:absolute; inset:0; border-radius:50%; background: inherit; opacity:0.55;
  animation: pulseRing 2.2s infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:0.5;} 100%{ transform:scale(1.7); opacity:0;} }

/* Toast */
.toast-luxury{
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 2000;
  background: var(--white); border-left: 4px solid var(--emerald);
  border-radius: var(--radius-sm); box-shadow: 0 18px 40px -14px rgba(14,75,58,0.3);
  padding: 1rem 1.3rem; display:flex; align-items:center; gap:0.8rem;
  min-width: 280px; transform: translateX(120%); transition: transform var(--t-med);
}
.toast-luxury.show{ transform: translateX(0); }
.toast-luxury i{ color: var(--success); font-size:1.3rem; }
.toast-luxury.error{ border-left-color: var(--error); }
.toast-luxury.error i{ color: var(--error); }

/* Skeleton loader */
.skeleton{ position:relative; overflow:hidden; background: var(--ivory-deep); border-radius: var(--radius-sm); }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%); animation: shimmer 1.5s infinite;
}
@keyframes shimmer{ 100%{ transform: translateX(100%); } }
.skeleton-line{ height:14px; margin-bottom:10px; border-radius:4px; }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay: 0.12s; }
.reveal-delay-2{ transition-delay: 0.24s; }
.reveal-delay-3{ transition-delay: 0.36s; }

/* Page hero (inner pages) */
.page-hero{
  position:relative; padding: calc(var(--header-h) + 3.5rem) 0 4.5rem;
  background: linear-gradient(160deg, var(--emerald-dark), var(--emerald));
  overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 85% 20%, rgba(200,162,77,0.18), transparent 45%);
}
.page-hero .breadcrumb-luxury{
  display:flex; gap:0.5rem; font-size:0.85rem; color: rgba(250,246,238,0.7); margin-bottom:1rem;
}
.page-hero .breadcrumb-luxury a{ color: rgba(250,246,238,0.7); }
.page-hero .breadcrumb-luxury a:hover{ color: var(--gold-light); }
.page-hero h1{ color: var(--white); font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.page-hero p{ color: rgba(250,246,238,0.82); max-width:600px; }

/* Map / contact */
.map-frame{ border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card); height: 420px; }
.map-frame iframe{ width:100%; height:100%; border:0; }
.contact-info-card{ background: var(--white); border-radius: var(--radius-md); padding: 1.6rem; box-shadow: var(--shadow-card); height:100%; }
.contact-info-card .cic-icon{ width:52px;height:52px;border-radius:50%; background: var(--ivory); color:var(--emerald); display:grid;place-items:center; font-size:1.2rem; margin-bottom:1rem; border:1px solid rgba(200,162,77,0.3); }

.department-pill{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding: 0.4rem 1rem; border-radius: var(--radius-pill);
  font-size:0.72rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
}
.department-pill.glow{ background: rgba(200,162,77,0.15); color: var(--gold-dark); }
.department-pill.dental{ background: rgba(14,75,58,0.1); color: var(--emerald); }

hr.hr-gold{ border-top: 1px solid rgba(200,162,77,0.3); opacity:1; }