/* ==========================================================================
   Kezza Clinic — Home Page Upgrade
   Loaded LAST, after luxury-pro.css, so everything here wins cleanly without
   editing the existing minified stylesheets. Delete this file + its <link>
   and the site returns to its previous appearance.
   ========================================================================== */

:root {
    /* Kezza Clinical Luxury Brand System */
    --kz-teal:        #00AFC0;
    --kz-teal-light:  #00d2e0;
    --kz-teal-dark:   #008f9c;
    --kz-teal-deep:   #061926;
    --kz-gold:        #d4a017;
    --kz-gold-light:  #f5c842;
    --kz-gold-glow:   rgba(212, 160, 23, 0.25);
    --kz-google-gold: #fbbc04;

    --kz-ink:         #0c2338;
    --kz-body:        #475569;
    --kz-muted:       #64748b;
    --kz-line:        #e2ecf3;
    --kz-surface:     #ffffff;
    --kz-surface-alt: #f8fbfd;
    --kz-dark:        #060c18;

    --kz-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kz-font-sans:    'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --kz-radius:      20px;
    --kz-ease:        cubic-bezier(.16, 1, .3, 1);
    --kz-nav-h:       72px;
}

/* ==========================================================================
   0. GLOBAL TYPOGRAPHY & NAVBAR POLISH (REAL CLINIC DESIGN SYSTEM)
   ========================================================================== */
html, body {
    font-family: var(--kz-font-sans) !important;
    color: var(--kz-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .hero-h1 {
    font-family: var(--kz-font-heading) !important;
    letter-spacing: -0.025em;
    font-weight: 700;
}

.navbar {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0, 175, 192, 0.12) !important;
    box-shadow: 0 4px 20px rgba(12, 35, 56, 0.05) !important;
}

.nav-menu a {
    font-family: var(--kz-font-sans) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #334e68 !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}

.nav-menu a:hover {
    color: var(--kz-teal) !important;
}

.nav-menu a.active {
    color: var(--kz-teal) !important;
    font-weight: 700 !important;
}

.nav-cta .btn-nav-call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--kz-teal) !important;
    font-family: var(--kz-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    text-decoration: none !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    background: rgba(0, 175, 192, 0.08) !important;
    border: 1px solid rgba(0, 175, 192, 0.2) !important;
    transition: all 0.25s ease !important;
}

.nav-cta .btn-nav-call:hover {
    background: rgba(0, 175, 192, 0.15) !important;
    transform: translateY(-1px) !important;
}

.nav-cta .btn-primary {
    background: linear-gradient(135deg, var(--kz-teal) 0%, var(--kz-teal-dark) 100%) !important;
    color: #ffffff !important;
    font-family: var(--kz-font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 14px rgba(0, 175, 192, 0.35) !important;
    border: none !important;
    transition: all 0.25s ease !important;
}

.nav-cta .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 175, 192, 0.5) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   1. HERO WITH LUXURY STAGGERED ENTRANCE & POLISHED COPYS
   ========================================================================== */

.hero-section {
    padding-top: var(--kz-nav-h);
    background: var(--kz-dark);
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.hero-stage {
    position: relative;
    height: clamp(540px, 80vh, 780px);
    overflow: hidden;
    isolation: isolate;
}

/* Cross-fading Ken Burns stack */
.hero-section .hero-slideshow {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.hero-section .slides-container {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    animation: none !important;
}

.hero-section .slide {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 1 !important;
    opacity: 0;
    will-change: opacity, transform;
    animation: kzHeroKenBurns 24s infinite;
}

.hero-section .slide:nth-child(1) { animation-delay:  0s; }
.hero-section .slide:nth-child(2) { animation-delay:  6s; }
.hero-section .slide:nth-child(3) { animation-delay: 12s; }
.hero-section .slide:nth-child(4) { animation-delay: 18s; }

.hero-section .slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 35% !important;
}

@keyframes kzHeroKenBurns {
    0%   { opacity: 0; transform: scale(1.00); }
    3%   { opacity: 1; }
    25%  { opacity: 1; transform: scale(1.07); }
    28%  { opacity: 0; transform: scale(1.07); }
    100% { opacity: 0; transform: scale(1.00); }
}

/* Optical Scrim for High Legibility */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 18, 28, 0.90) 0%, rgba(6, 18, 28, 0.72) 42%, rgba(6, 18, 28, 0.22) 70%, rgba(6, 18, 28, 0.05) 100%),
        linear-gradient(0deg,  rgba(6, 18, 28, 0.60) 0%,  rgba(6, 18, 28, 0) 50%);
}

.hero-inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
}

.hero-copy {
    width: min(880px, 94%);
    max-width: 880px;
    margin-left: clamp(24px, 7vw, 110px);
    color: #fff;
    position: relative;
    z-index: 5;
}

/* Staggered Entrance Animations */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Eyebrow Pill with Live Pulse Dot */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--kz-font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #00AFC0;
    padding: 8px 18px;
    border: 1.5px solid rgba(255, 215, 0, 0.4);
    border-radius: 100px;
    background: rgba(8, 20, 36, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 16px rgba(255, 215, 0, 0.15);
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both 0.15s;
}

.hero-eyebrow .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: livePulse 2s infinite;
    display: inline-block;
}

@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Grand Hero Heading — Modern Clinical Aesthetic */
.hero-h1 {
    font-family: var(--kz-font-heading) !important;
    font-size: clamp(2rem, 4.2vw, 3.75rem);
    line-height: 1.18;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 22px;
    text-shadow: 0 3px 25px rgba(0, 0, 0, 0.45);
    letter-spacing: -0.025em;
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both 0.35s;
}

.hero-h1 .hero-line {
    display: block;
}

.hero-h1 .hero-line-1,
.hero-h1 .hero-line-2 {
    margin-bottom: 4px;
}

@media (min-width: 641px) {
    .hero-h1 .hero-line-1,
    .hero-h1 .hero-line-2,
    .hero-h1 .hero-line-3 {
        white-space: nowrap;
    }
}

/* Clean Modern Clinical Ampersand (&) */
.hero-h1 .hero-amp,
.hero-h1 .hero-plus {
    display: inline-block;
    color: #00AFC0;
    font-family: var(--kz-font-heading) !important;
    font-weight: 700;
    font-style: normal !important;
    font-size: 0.9em;
    margin: 0 0.14em;
    vertical-align: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 175, 192, 0.45));
}

.hero-h1 .hero-amp-city,
.hero-h1 .hero-plus-city {
    display: inline-block;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--kz-font-heading) !important;
    font-weight: 700;
    font-style: normal !important;
    font-size: 0.85em;
    margin: 0 0.16em;
    vertical-align: 0;
}

.hero-h1 .hero-amp-group {
    display: inline-block;
    white-space: nowrap;
}

/* Metallic Teal-Gold on Jaipur & Sikar */
.hero-h1 em {
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(135deg, #00AFC0 0%, #fff0a8 25%, #00d2e0 55%, #00AFC0 85%, #ffb700 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroGoldShimmer 6s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 2px 14px rgba(255, 215, 0, 0.25));
}

@keyframes heroGoldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Teal-emerald shimmer for "Ajmer" */
.hero-h1 em.hero-ajmer {
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(135deg, #00d2e0 0%, #00f5c0 30%, #00bfd2 60%, #4df5c0 85%, #00d2e0 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: heroTealShimmer 6s ease-in-out infinite 1s;
    display: inline-block;
    filter: drop-shadow(0 2px 14px rgba(0, 210, 224, 0.3));
}

@keyframes heroTealShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Refined Subtitle */
.hero-sub {
    font-family: var(--kz-font-sans);
    font-size: clamp(1rem, 1.35vw, 1.14rem);
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 34px;
    max-width: 32em;
    font-weight: 400;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both 0.55s;
}

/* Standalone Modern CTAs */
.hero-ctas {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both 0.75s;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 100px;
    font-family: var(--kz-font-sans);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: all 0.3s var(--kz-ease);
}

.hero-btn-primary {
    background: linear-gradient(135deg, var(--kz-teal) 0%, var(--kz-teal-dark) 100%);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 175, 192, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 35px rgba(0, 175, 192, 0.6), 0 0 20px rgba(0, 210, 224, 0.4);
    color: #ffffff;
}

.hero-btn-primary .cta-arrow {
    transition: transform 0.25s ease;
}

.hero-btn-primary:hover .cta-arrow {
    transform: translateX(4px);
}

.hero-btn-ghost {
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.hero-btn-ghost:hover {
    transform: translateY(-3px) scale(1.02);
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    color: #000000;
}

.hero-btn-ghost i {
    color: #25D366;
    font-size: 1.15rem;
}

.hero-btn:focus-visible {
    outline: 3px solid var(--kz-gold-light);
    outline-offset: 3px;
}

/* Thin Progress Line */
.hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 4;
    background: rgba(255, 255, 255, .16);
}

.hero-progress span {
    display: block;
    height: 100%;
    width: 25%;
    background: linear-gradient(90deg, var(--kz-teal), var(--kz-gold-light));
    animation: kzHeroProgress 24s linear infinite;
}

@keyframes kzHeroProgress {
    0%   { transform: translateX(0); }
    100% { transform: translateX(300%); }
}

@media (max-width: 992px) {
    .hero-stage { height: clamp(470px, 72vh, 600px); }
    .hero-copy  { margin-left: 0; padding: 0 20px; width: 100%; }
    .hero-scrim {
        background:
            linear-gradient(180deg, rgba(6, 18, 28, .55) 0%, rgba(6, 18, 28, .80) 55%, rgba(6, 18, 28, .94) 100%);
    }
    .hero-inner  { align-items: flex-end; padding-bottom: 38px; }
    .hero-eyebrow { font-size: 11px; margin-bottom: 16px; }
    .hero-sub    { margin-bottom: 22px; }
    .hero-ctas {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }
    .hero-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .slide { animation: none; opacity: 0; }
    .hero-section .slide:nth-child(1) { opacity: 1; }
    .hero-progress span { animation: none; width: 100%; }
}

/* ==========================================================================
   2. TRUST STRIP: CLINICAL CREDENTIALS BAR
   ========================================================================== */

.kz-trust-strip {
    background: linear-gradient(90deg, #050e18 0%, #0a1c2c 50%, #050e18 100%);
    border-top: 1.5px solid;
    border-image: linear-gradient(90deg, transparent, rgba(0, 175, 192, 0.6) 25%, rgba(255, 215, 0, 0.8) 75%, transparent) 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.kz-trust-track {
    display: flex;
    justify-content: center;
}

.kz-trust-list {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.5vw, 36px);
    list-style: none;
    margin: 0;
    padding: 14px 24px;
    white-space: nowrap;
}

.kz-trust-list li {
    font-family: var(--kz-font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.kz-trust-list li:hover {
    background: rgba(0, 175, 192, 0.12);
    border-color: rgba(0, 175, 192, 0.35);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 175, 192, 0.2);
}

.kz-trust-list li strong {
    font-weight: 800;
    color: #00AFC0;
    font-size: 15.5px;
    letter-spacing: -0.01em;
}

/* Desktop shows one static centred row; the clone is only for the marquee */
.kz-trust-clone { display: none; }

@media (max-width: 860px) {
    .kz-trust-track { justify-content: flex-start; width: max-content; animation: kzMarquee 22s linear infinite; }
    .kz-trust-clone { display: flex; }
    .kz-trust-strip:hover .kz-trust-track,
    .kz-trust-strip:focus-within .kz-trust-track { animation-play-state: paused; }
}

@keyframes kzMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .kz-trust-track { animation: none !important; }
}

/* ==========================================================================
   3. MOBILE OVERLAP FIXES
   The floating social rail, the quick-action bar and the chat bubble all sat
   on top of page content at phone widths.
   ========================================================================== */

/* 3a. Social rail is desktop-only — it covered card text on the left edge */
@media (max-width: 992px) {
    .social-sidebar { display: none !important; }
}

/* 3b. Quick-action dock: four pills could not fit a 390px viewport, so the
       first ("Call") and last ("Book Visit") were clipped off both edges.
       The number is already in the header and footer, so drop that pill on
       phones and tighten the rest. The dock keeps its translateX(-50%)
       centering so .dock-hidden still works. */
@media (max-width: 600px) {
    .floating-quick-dock .dock-item.dock-call { display: none !important; }

    .floating-quick-dock {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        justify-content: space-between !important;
    }

    .floating-quick-dock .dock-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 9px 6px !important;
        font-size: 0.74rem !important;
        gap: 5px !important;
    }

    .floating-quick-dock .dock-item span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* 3c. Lift the AI chat bubble and its tooltip clear of the dock */
@media (max-width: 992px) {
    .kezza-chat-fab      { bottom: 92px !important; }
    .kezza-chat-tooltip  { bottom: 162px !important; }
}

/* ==========================================================================
   4. DOCTORS — show 4, reveal the rest on demand
   Nine cards made this section 7,183px tall on a phone. The collapse lives on
   the grid, so the existing .doc-filter-btn filtering (which toggles
   .is-hidden on individual cards) keeps working untouched.
   ========================================================================== */

.doctors-grid.kz-collapsed > .doctor-card:nth-child(n + 5) {
    display: none !important;
}

.kz-doctors-more {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.kz-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 100px;
    border: 1.5px solid var(--kz-teal);
    background: transparent;
    color: var(--kz-teal-dark);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .25s var(--kz-ease), background .25s ease, color .25s ease, box-shadow .25s ease;
}

.kz-more-btn:hover,
.kz-more-btn:focus-visible {
    background: var(--kz-teal);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 175, 192, .32);
}

.kz-more-btn:focus-visible { outline: 3px solid var(--kz-gold); outline-offset: 3px; }

.kz-more-btn i { transition: transform .3s var(--kz-ease); }
.kz-more-btn[aria-expanded="true"] i { transform: rotate(180deg); }

/* ==========================================================================
   5. TESTIMONIALS — equal heights, avatars, Google mark, mobile rail
   ========================================================================== */

.kz-testi-rail .testimonial-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

/* Push the attribution block to the bottom so every card lines up */
.kz-testi-rail .testimonial-card > p { flex: 1 1 auto; }

.kz-testi-rail .star-rating { color: var(--kz-google-gold) !important; letter-spacing: 2px; }

/* Replace the wordy pill with the Google mark */
.kz-testi-rail .verified-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 11.5px !important;
    letter-spacing: .02em;
}

.kz-testi-rail .verified-label::before {
    content: "G";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: #4285f4;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

/* Author avatar: initial in a teal disc */
.kz-testi-author {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 16px;
}

.kz-testi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kz-teal), var(--kz-teal-dark));
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

@media (min-width: 861px) {
    .kz-testi-rail {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: stretch;
    }
}

/* Phones: one card at a time on a snapping rail instead of six stacked */
@media (max-width: 860px) {
    .kz-testi-rail {
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 84%;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 16px 18px;
        margin: 0 -16px;
        scrollbar-width: none;
    }

    .kz-testi-rail::-webkit-scrollbar { display: none; }

    .kz-testi-rail .testimonial-card {
        scroll-snap-align: center;
        margin: 0 !important;
        height: auto;
    }
}

/* ==========================================================================
/* ==========================================================================
   6. BRANCH STRIP & CENTERS OF EXCELLENCE (VISIT US)
   ========================================================================== */

.kz-branches {
    background: #ffffff !important;
    padding: 20px 0 85px !important;
    border-top: 1px solid rgba(0, 175, 192, 0.16) !important;
    border-bottom: 1px solid rgba(0, 175, 192, 0.12) !important;
    position: relative !important;
}

.kz-branches-header {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 24px !important;
}

.kz-visit-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(0, 175, 192, 0.08) !important;
    color: #008291 !important;
    border: 1.2px solid rgba(0, 175, 192, 0.25) !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 10px !important;
}

.kz-branches-title {
    font-family: var(--kz-font-heading) !important;
    font-size: clamp(1.75rem, 2.8vw, 2.35rem) !important;
    color: #0c2338 !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
}

.kz-title-accent {
    background: linear-gradient(135deg, #00AFC0 0%, #007e8a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.kz-branches-subtitle {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.92rem !important;
    color: #486581 !important;
    line-height: 1.5 !important;
    margin: 0 auto 16px !important;
    max-width: 660px !important;
}

/* Trust Ribbon */
.kz-visit-trust-ribbon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

.kz-vtrust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #1e3a8a !important;
    background: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 175, 192, 0.2) !important;
    box-shadow: 0 1px 4px rgba(12, 35, 56, 0.03) !important;
}

.kz-vtrust-item i {
    color: #00AFC0 !important;
    font-size: 0.8rem !important;
}

/* Interactive Filter Switcher */
.kz-visit-filters {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
}

.kz-visit-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1.2px solid #d9e5ee !important;
    color: #334e68 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    box-shadow: 0 2px 6px rgba(12, 35, 56, 0.03) !important;
}

.kz-visit-pill-btn:hover {
    background: #f0fafd !important;
    border-color: #00AFC0 !important;
    color: #007782 !important;
    transform: translateY(-1px) !important;
}

.kz-visit-pill-btn.active {
    background: linear-gradient(135deg, #00AFC0 0%, #008f9c 100%) !important;
    border-color: #00AFC0 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 12px rgba(0, 175, 192, 0.3) !important;
}

.kz-visit-pill-btn .vpill-cnt {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #edf2f7 !important;
    color: #486581 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

.kz-visit-pill-btn.active .vpill-cnt {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Branch Grid */
.kz-branch-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Luxury Branch Card */
.kz-branch {
    background: #ffffff !important;
    border: 1.2px solid #e2ecf3 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(12, 35, 56, 0.05), 0 2px 4px rgba(12, 35, 56, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.25s ease !important;
    width: 100% !important;
}

.kz-branch:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 36px rgba(0, 175, 192, 0.14), 0 3px 10px rgba(15, 23, 42, 0.04) !important;
    border-color: #00AFC0 !important;
}

/* Media Box */
.kz-branch-media {
    position: relative !important;
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    background: #0c2338 !important;
}

.kz-branch-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kz-branch:hover .kz-branch-media img {
    transform: scale(1.05) !important;
}

/* Badges on Media */
.kz-branch-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2 !important;
}

.kz-branch-badge.flagship {
    background: rgba(12, 35, 56, 0.88) !important;
    color: #00AFC0 !important;
    border: 1px solid rgba(255, 215, 0, 0.45) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

.kz-branch-badge.hub {
    background: rgba(0, 175, 192, 0.92) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0, 175, 192, 0.25) !important;
}

.kz-branch-badge.specialist {
    background: rgba(30, 58, 138, 0.92) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.25) !important;
}

.kz-live-status {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(16, 185, 129, 0.92) !important;
    color: #ffffff !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 2 !important;
}

.pulse-dot {
    width: 6px !important;
    height: 6px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: kzPulse 1.6s infinite !important;
}

@keyframes kzPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.kz-branch-rating {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: rgba(12, 35, 56, 0.85) !important;
    color: #f59e0b !important;
    padding: 3px 8px !important;
    border-radius: 14px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 2 !important;
}

.kz-branch-rating span {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    font-size: 0.66rem !important;
}

/* Card Body */
.kz-branch-body {
    padding: 14px 16px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.kz-branch-headline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.kz-city-name {
    font-family: var(--kz-font-heading) !important;
    font-size: 1.32rem !important;
    color: #0c2338 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

.kz-region-tag {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #008291 !important;
    background: rgba(0, 175, 192, 0.08) !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 175, 192, 0.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.kz-branch-address {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.77rem !important;
    line-height: 1.4 !important;
    color: #486581 !important;
    margin: 0 0 8px !important;
    min-height: 32px !important;
}

.kz-branch-address i {
    color: #00AFC0 !important;
    margin-top: 2px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.kz-branch-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: #f8fafc !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    border: 1px solid #eef3f6 !important;
    margin-bottom: 8px !important;
}

.kz-bmeta-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.75rem !important;
    color: #334e68 !important;
    line-height: 1.3 !important;
}

.kz-bmeta-item i {
    color: #00AFC0 !important;
    font-size: 0.78rem !important;
    width: 14px !important;
    text-align: center !important;
}

.kz-bmeta-item a {
    color: #007782 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.kz-bmeta-item a:hover {
    text-decoration: underline !important;
}

.kz-branch-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
}

.kz-chip {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    color: #334e68 !important;
    background: #f0f4f8 !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    border: 1px solid #e2ecf3 !important;
    white-space: nowrap !important;
}

.kz-branch-actions {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.kz-btn-book {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    background: linear-gradient(135deg, #00AFC0 0%, #008f9c 100%) !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0, 175, 192, 0.25) !important;
    transition: all 0.22s ease !important;
    border: none !important;
}

.kz-btn-book:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(0, 175, 192, 0.38) !important;
    background: linear-gradient(135deg, #00bfd2 0%, #007e8a 100%) !important;
    color: #ffffff !important;
}

.kz-btn-subrow {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}

.kz-btn-wa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: #25D366 !important;
    color: #ffffff !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.74rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.kz-btn-wa:hover {
    background: #1eb956 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.kz-btn-map {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: #ffffff !important;
    color: #007782 !important;
    border: 1.2px solid #00AFC0 !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.74rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.kz-btn-map:hover {
    background: #f0fafd !important;
    border-color: #007782 !important;
    color: #005f68 !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1024px) {
    .kz-branch-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 680px) {
    .kz-branch-grid {
        grid-template-columns: 1fr !important;
        max-width: 440px !important;
        margin: 0 auto !important;
    }
    .kz-branch-media {
        height: 170px !important;
    }
    .kz-branch-address {
        min-height: auto !important;
    }
}

/* ==========================================================================
   7. FAQ ACCORDION
   ========================================================================== */

.kz-faq {
    background: #fff;
    padding: clamp(48px, 7vw, 82px) 0;
}

.kz-faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kz-faq-item {
    border: 1px solid var(--kz-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--kz-surface-alt);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.kz-faq-item.is-open {
    border-color: rgba(0, 175, 192, .45);
    box-shadow: 0 10px 30px rgba(0, 175, 192, .10);
    background: #fff;
}

.kz-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: clamp(14.5px, 1.6vw, 16px);
    font-weight: 600;
    color: var(--kz-ink);
    line-height: 1.45;
}

.kz-faq-q:focus-visible {
    outline: 3px solid var(--kz-teal);
    outline-offset: -3px;
}

.kz-faq-q i {
    flex-shrink: 0;
    color: var(--kz-teal);
    font-size: 14px;
    transition: transform .3s var(--kz-ease);
}

.kz-faq-item.is-open .kz-faq-q i { transform: rotate(45deg); }

/* Grid-rows animation keeps it height-agnostic with no JS measuring */
.kz-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--kz-ease);
}

.kz-faq-item.is-open .kz-faq-a { grid-template-rows: 1fr; }

.kz-faq-a > div { overflow: hidden; }

.kz-faq-a p {
    margin: 0;
    padding: 0 22px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--kz-body);
}

@media (prefers-reduced-motion: reduce) {
    .kz-faq-a { transition: none; }
}

/* ==========================================================================
   8. COLOUR DISCIPLINE
   luxury-pro.css drove the six "Why Kezza" cards with six unrelated hues
   (gold / teal / emerald / purple / rose / amber), which read as a rainbow
   rather than a premium medical brand. Those themes are custom-property
   based, so redefining the same properties at higher specificity retunes
   every card to a strict teal + gold alternation with no markup changes.
   ========================================================================== */

.feature-card-pro.theme-teal,
.feature-card-pro.theme-emerald,
.feature-card-pro.theme-rose {
    --card-accent:        #0096a6;
    --card-accent-border: rgba(0, 150, 166, .40);
    --card-accent-shadow: rgba(0, 150, 166, .22);
    --icon-bg:            rgba(0, 150, 166, .12);
    --icon-color:         #008494;
    --icon-border:        rgba(0, 150, 166, .30);
    --pill-bg:            rgba(0, 150, 166, .09);
    --pill-color:         #006d77;
    --pill-border:        rgba(0, 150, 166, .25);
}

.feature-card-pro.theme-gold,
.feature-card-pro.theme-purple,
.feature-card-pro.theme-amber {
    --card-accent:        #00AFC0;
    --card-accent-border: rgba(0, 175, 192, .40);
    --card-accent-shadow: rgba(0, 175, 192, .22);
    --icon-bg:            rgba(0, 175, 192, .12);
    --icon-color:         #006d77;
    --icon-border:        rgba(0, 175, 192, .30);
    --pill-bg:            rgba(0, 175, 192, .09);
    --pill-color:         #946808;
    --pill-border:        rgba(0, 175, 192, .25);
}

/* ==========================================================================
   9. SECTION RHYTHM
   Gentle alternation only — tints, never a colour flip, so existing dark text
   keeps its contrast on every section.
   ========================================================================== */

.why-kezza-section      { background: #ffffff; }
.stats-section-pro      { background: #ffffff; }
.services-master-section{ background: #ffffff; }
.gallery-section        { background: var(--kz-surface-alt); }
.doctors-section        { background: #ffffff; }

/* ==========================================================================
   10. MICRO-INTERACTIONS
   ========================================================================== */

.feature-card-pro,
.case-card-pro,
.doctor-card,
.kz-branch,
.mini-service-card,
.stat-box-pro {
    transition: transform .28s var(--kz-ease), box-shadow .28s var(--kz-ease);
}

.feature-card-pro:hover,
.case-card-pro:hover,
.kz-branch:hover,
.stat-box-pro:hover {
    transform: translateY(-4px);
}

/* Photo zoom inside any fixed-ratio media frame */
.case-img-pair,
.doctor-card-img,
.kz-media-zoom {
    overflow: hidden;
}

.case-img-pair img,
.kz-media-zoom img {
    transition: transform .55s var(--kz-ease);
}

.case-card-pro:hover .case-img-pair img,
.kz-media-zoom:hover img {
    transform: scale(1.05);
}

/* Gold sheen sweep on primary buttons */
.hero-btn-primary,
.kz-more-btn {
    position: relative;
    overflow: hidden;
}

.hero-btn-primary::after,
.kz-more-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
    transform: skewX(-22deg);
    transition: left .65s var(--kz-ease);
    pointer-events: none;
}

.hero-btn-primary:hover::after,
.kz-more-btn:hover::after {
    left: 130%;
}

@media (prefers-reduced-motion: reduce) {
    .feature-card-pro,
    .case-card-pro,
    .doctor-card,
    .kz-branch,
    .stat-box-pro,
    .case-img-pair img,
    .kz-media-zoom img { transition: none !important; }

    .feature-card-pro:hover,
    .case-card-pro:hover,
    .kz-branch:hover,
    .stat-box-pro:hover { transform: none; }

    .hero-btn-primary::after,
    .kz-more-btn::after { display: none; }
}

/* ==========================================================================
   11. SERVICES — trim the treatment list on phones
   The active tab panel rendered six full treatment cards (~560px each),
   making this the tallest section on mobile. Show three, reveal the rest.
   Desktop is unaffected.
   ========================================================================== */

@media (max-width: 860px) {
    .services-interactive-viewer.kz-svc-collapsed .treatments-subgrid > .treatment-item-card:nth-child(n + 4) {
        display: none !important;
    }

    .kz-svc-more {
        display: flex;
        justify-content: center;
        margin-top: 26px;
    }
}

@media (min-width: 861px) {
    .kz-svc-more { display: none; }
}

/* ==========================================================================
   12. REAL CLINIC TYPOGRAPHY ENFORCEMENT
   Eliminates all AI-style serif fonts (Playfair Display) across the entire page,
   standardizing on clean, modern, authoritative Plus Jakarta Sans & Inter
   matching top medical and dermatology institutions.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.hero-h1,
.section-header h2,
.services-section-header h2,
.service-category-inner h3,
.viewer-header-left h3,
.treatment-body h4,
.treatment-body .item-heading,
.feature-card h3,
.feature-card-pro h3,
.section-header-pro h2,
.testi-header-pro h2,
.testi-video-header h3,
.testi-video-caption h4,
.banner-content h4,
.tab-page-cta-banner .cta-subtext,
.gallery-section .section-header h2,
.branches-section h2,
.branch-card h3,
.contact-cta-section h2,
.stat-number,
.stat-number-pro,
.bmi-score-badge,
.emi-amount-val,
p.footer-nav-title,
p.item-heading,
p.section-subhead,
.footer-column .footer-nav-title,
.footer-column h3 {
    font-family: var(--kz-font-heading) !important;
    letter-spacing: -0.022em;
}