/* Scoped root to prevent WordPress & Elementor theme style leakage */
        #monk-root {
            background-color: #ffffff;
            color: #0a0a0a;
            overflow-x: hidden;
            width: 100% !important;
            max-width: 100% !important;
            position: relative;
            font-family: 'Plus Jakarta Sans', sans-serif;
            line-height: 1.5;
        }

        #monk-root * {
            box-sizing: border-box;
        }
        #monk-root a {
            text-decoration: none;
        }

        /* Hard-lock fonts against theme style leakage */
        #monk-root .font-display {
            font-family: 'Anton', sans-serif !important;
        }
        #monk-root .font-hero {
            font-family: 'Outfit', sans-serif !important;
        }
        #monk-root .font-sans {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
        }

        /* Avatar Hard-Lock against WordPress Theme Overrides */
        #monk-root .patient-avatar-img {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            min-height: 32px !important;
            max-height: 32px !important;
            border-radius: 9999px !important;
            object-fit: cover !important;
            display: inline-block !important;
        }

        /* Mobile-only hero trust badge sizing */
        @media (max-width: 639px) {
            #monk-root .hero-trust-pill {
                gap: 6px !important;
                padding: 5px 8px !important;
                margin-bottom: 20px !important;
                max-width: 100% !important;
                width: max-content !important;
            }
            #monk-root .hero-trust-pill .patient-avatar-img {
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                max-width: 24px !important;
                min-height: 24px !important;
                max-height: 24px !important;
                border-width: 1px !important;
            }
            #monk-root .hero-trust-avatars {
                margin-right: 1px !important;
            }
            #monk-root .hero-trust-count {
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                font-size: 8px !important;
            }
            #monk-root .hero-trust-copy {
                gap: 5px !important;
                font-size: 8px !important;
                line-height: 1 !important;
                white-space: nowrap !important;
            }
            #monk-root .hero-trust-stars {
                font-size: 7px !important;
                gap: 0 !important;
                flex-shrink: 0 !important;
            }
        }

        /* Strict Button & Link Color Enforcement */
        #monk-root a.btn-dark,
        #monk-root button.btn-dark {
            color: #ffffff !important;
            background-color: #0a0a0a !important;
        }
        #monk-root a.btn-dark:hover,
        #monk-root button.btn-dark:hover {
            background-color: #249ab3 !important;
        }
        #monk-root a.btn-white,
        #monk-root button.btn-white {
            color: #0a0a0a !important;
            background-color: #ffffff !important;
        }

        /* Zero-specificity reset: ensures Tailwind mb-*, mt-*, and leading-* classes are never overridden */
        :where(#monk-root) :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dd, dl, pre) {
            margin: 0;
        }
        :where(#monk-root) :where(ul, ol) {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* Strict Logo Size Guard */
        #monk-root .monk-nav-logo {
            height: 52px !important;
            max-height: 52px !important;
            width: auto !important;
            max-width: 220px !important;
            object-fit: contain !important;
            display: block !important;
        }
        @media (min-width: 640px) {
            #monk-root .monk-nav-logo {
                height: 60px !important;
                max-height: 60px !important;
                max-width: 250px !important;
            }
        }
        @media (min-width: 1024px) {
            #monk-root .monk-nav-logo {
                height: 68px !important;
                max-height: 68px !important;
                max-width: 280px !important;
            }
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #249ab3; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #1c7a8f; }

        /* Animation Keyframes */
        @keyframes pulse-soft {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
        }
        .animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

        /* Sync globe tooltips with dot blinks */
        @keyframes globeTooltip {
            0%, 30% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        .globe-tt { 
            animation: globeTooltip var(--d) infinite ease-in-out; 
            opacity: 0; 
            transition: opacity 0.3s; 
            pointer-events: none; 
        }
        .globe-pin:hover .globe-tt { 
            animation: none; 
            opacity: 1; 
        }

        /* Scroll Reveals — visible by default so content never stays blank if JS fails */
        .reveal,
        .reveal-left,
        .reveal-right {
            opacity: 1;
            transform: none;
            transition: all 0.4s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal.active,
        .reveal-left.active,
        .reveal-right.active {
            opacity: 1;
            transform: none;
        }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; }

        /* Mobile Patient Stories: keep adjacent cards visible as a swipe cue */
        @media (max-width: 767px) {
            #stories-slider > .reveal,
            #stories-slider > .reveal-left,
            #stories-slider > .reveal-right {
                opacity: 1 !important;
                transform: none !important;
            }
        }


/* === Theme overrides: sticky header above content, large logo === */
#monk-root #navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
#monk-root #navbar.is-scrolled,
#monk-root #navbar.monk-nav-inner {
    background-color: rgba(10, 10, 10, 0.94) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
/* Keep page content under the nav */
#monk-root .w-full.relative.z-10,
#monk-root section,
#monk-root section .relative.z-10 {
    z-index: 1;
}
#monk-root .monk-nav-spacer {
    display: block;
    width: 100%;
    height: 88px;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    #monk-root .monk-nav-spacer { height: 104px; }
}
@media (min-width: 1024px) {
    #monk-root .monk-nav-spacer { height: 116px; }
}

/* Larger header logo (override HTML defaults) */
#monk-root .monk-nav-logo {
    height: 72px !important;
    max-height: 72px !important;
    max-width: 300px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}
@media (min-width: 640px) {
    #monk-root .monk-nav-logo {
        height: 88px !important;
        max-height: 88px !important;
        max-width: 360px !important;
    }
}
@media (min-width: 1024px) {
    #monk-root .monk-nav-logo {
        height: 100px !important;
        max-height: 100px !important;
        max-width: 420px !important;
    }
}

#monk-root .monk-footer-logo {
    filter: brightness(0) invert(1) !important;
    object-fit: contain !important;
    display: block !important;
}

/* Mobile drawer */
#monk-mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 10100 !important;
}
#monk-mobile-menu.is-open { transform: translateX(0); }
#monk-mobile-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10050 !important;
}
#monk-mobile-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
body.monk-menu-open { overflow: hidden; }

#monk-root #magazine-modal { z-index: 99999 !important; }

/* Mobile hero image clarity */
@media (max-width: 767px) {
  .hero-shell, .hero-section { background-size: cover; background-position: center top; }
  .hero-shell img, .hero-section img { image-rendering: auto; }
}

/* Hospital carousel logos: fixed dimensions and stable optical sizing */
#hospital-slider > div { overflow: hidden !important; }
#hospital-slider > div > div { overflow: hidden !important; height: 76px; display:flex; align-items:center; justify-content:center; }
#hospital-slider > div img {
  width: 190px !important;
  height: 76px !important;
  max-width: 190px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}
/* Use a steady larger image box only for artwork with excess white canvas. */
#hospital-slider img[src*="hospital_logo_4.png"] { width: 220px !important; height: 82px !important; }
#hospital-slider img[src*="hospital_logo_12.png"] { width: 210px !important; height: 78px !important; }
#hospital-slider img[src*="WhatsApp-Image-2026-09-17-at-12.34.27-PM-1.jpeg"] { width: 210px !important; height: 78px !important; }
#hospital-slider img[src*="lilavati-hospital-new.png"] { width: 190px !important; height: 76px !important; }

/* Yashoda artwork has a tight canvas and appears oversized; reduce its display box */
#hospital-slider img[src*="yashoda-hospitals-new.png"] {
  width: 135px !important;
  height: 58px !important;
  max-width: 135px !important;
  max-height: 58px !important;
}

/* Prevent logos from being clipped on narrow carousel cards */
#hospital-slider > div > div { width: 100% !important; min-width: 0 !important; padding-left: 4px !important; padding-right: 4px !important; }
#hospital-slider > div img {
  width: 100% !important;
  max-width: 100% !important;
  height: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
#hospital-slider img[src*="yashoda-hospitals-new.png"] { width: 78% !important; max-width: 145px !important; }

/* Apollo: larger fixed contain box; remains steady during carousel movement */
#hospital-slider img[src*="hospital_logo_4.png"] {
  width: min(88%, 250px) !important;
  height: 100px !important;
  max-width: 250px !important;
  max-height: 100px !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Apollo artwork has wide built-in canvas; size it explicitly without affecting card width */
#hospital-slider img.hospital-logo-apollo {
  width: 100% !important;
  max-width: 190px !important;
  height: 76px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* Slightly larger footer brand mark */
#monk-root .monk-footer-logo { height: 96px !important; max-height: 96px !important; max-width: 340px !important; }
@media (max-width: 639px) {
  #monk-root .monk-footer-logo { height: 88px !important; max-height: 88px !important; max-width: min(320px, 90vw) !important; }
}

#monk-root .monk-footer-logo {
  height: 118px !important;
  max-height: 118px !important;
}

@media (max-width: 767px) {
  #monk-root .hero-background-image {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    object-fit: cover !important;
    object-position: 68% 20% !important;
    image-rendering: auto !important;
    filter: contrast(1.06) saturate(1.04) !important;
    backface-visibility: hidden;
    transform: scaleX(-1) !important;
  }
}

@media (max-width: 767px) {
  #monk-root .hero-background-image {
    object-position: center 18% !important;
    transform: none !important;
    filter: none !important;
  }
}


@media (max-width: 639px) {
  #hero-lead-form #lead-submit-btn {
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: clamp(12px, 3.6vw, 14px) !important;
    white-space: nowrap !important;
  }
  #hero-lead-form #lead-submit-btn > span {
    white-space: nowrap !important;
    flex: 0 1 auto !important;
  }
  #hero-lead-form #lead-submit-btn > div {
    flex: 0 0 24px !important;
  }
}

@media (max-width: 767px) {
  #monk-root .hero-mobile-overlay {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55) 48%, rgba(0, 0, 0, 0) 100%) !important;
  }
}

/* Tall mobile hero photo: preserve its full portrait frame, remove image tint. */
@media (max-width: 767px) {
  #monk-root .hero-background-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
    filter: none !important;
  }
  #monk-root .hero-mobile-overlay {
    display: block !important;
    background-image: linear-gradient(to right, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .16) 48%, rgba(0, 0, 0, .06) 100%) !important;
  }
  #monk-root .hero-trust-pill,
  #monk-root .hero-trust-pill * { text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .95); }
  #monk-root .hero-trust-pill { background-color: rgba(0, 0, 0, .28) !important; }
  #monk-root .hero-copy h1,
  #monk-root .hero-copy h1 *,
  #monk-root .hero-copy > p,
  #monk-root .hero-copy > p *,
  #monk-root .hero-copy > div:not(.hero-trust-pill),
  #monk-root .hero-copy > div:not(.hero-trust-pill) * {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 1px 3px rgba(0, 0, 0, .95);
  }
  #monk-root .hero-shell {
    min-height: max(90svh, 212vw) !important;
  }
}


/* Keep the four trust reasons compact and readable on narrow screens. */
@media (max-width: 639px) {
  #monk-root #philosophy .trust-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #monk-root #philosophy .trust-reason-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }
  #monk-root #philosophy .trust-reason-card > div:first-child {
    width: 40px !important; height: 40px !important;
    margin: 0 !important; font-size: 18px !important;
    grid-column: 1; grid-row: 1 / span 2;
  }
  #monk-root #philosophy .trust-reason-card h3 {
    grid-column: 2; margin: 0 0 5px !important;
    font-size: 15px !important; line-height: 1.25 !important;
  }
  #monk-root #philosophy .trust-reason-card p {
    grid-column: 2; margin: 0 !important;
    font-size: 12px !important; line-height: 1.45 !important;
  }
}

/* Mobile hospital carousel: show one full-width logo card so marks read clearly. */
@media (max-width: 639px) {
  #hospital-slider > div {
    flex: 0 0 calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    height: 170px !important;
  }
  #hospital-slider > div > div {
    height: 132px !important;
    min-height: 132px !important;
    overflow: visible !important;
  }
  #hospital-slider > div img {
    width: 100% !important;
    max-width: 280px !important;
    height: 124px !important;
    max-height: 124px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  #hospital-slider img.hospital-logo-apollo {
    width: 100% !important;
    max-width: 280px !important;
    height: 124px !important;
    max-height: 124px !important;
    transform: none !important;
  }
  #hospital-slider img[src*="yashoda-hospitals-new.png"] {
    width: 100% !important;
    max-width: 270px !important;
    height: 124px !important;
    max-height: 124px !important;
    transform: none !important;
  }
}