/* =========================================
   RESPONSIVE MOBILE NAVIGATION
========================================= */

.mobile-menu {
    display: none;
    border: 0;
    background: transparent;
    color: #073B8F;
    font-size: 32px;
    line-height: 1;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 1002;
}

.menu {
    display: flex;
    align-items: center;
    gap: 25px;
}

@media (max-width: 900px) {

    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .nav {
        position: relative;
        min-height: 78px;
        gap: 12px;
    }

    .brand-logo {
        width: min(240px, 75%);
        height: 65px;
        flex-shrink: 1;
    }

    .brand-logo img {
        width: 100%;
        max-height: 65px;
        object-fit: contain;
    }

    .mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        background: #fff;
        padding: 16px 20px 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid #DCE6F3;
        box-shadow: 0 12px 24px rgba(18, 59, 93, .14);
        z-index: 1001;
    }

    .menu.is-open {
        display: flex;
    }

    .menu > a {
        display: block;
        padding: 13px 8px;
        border-bottom: 1px solid #EDF1F7;
    }

    .menu .header-btn {
        margin-top: 12px;
        text-align: center;
        color: #fff !important;
        border-radius: 7px;
    }

    /* Expertise dropdown on mobile */
    .menu-item.has-children {
        display: block;
        position: static;
    }

    .menu-item.has-children > a {
        display: block;
        padding: 13px 8px;
        border-bottom: 1px solid #EDF1F7;
    }

    .menu-item.has-children .sub-menu {
        display: none;
        position: static;
        min-width: 0;
        width: 100%;
        padding: 5px 0 5px 12px;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: #F5F8FF;
    }

    .menu-item.has-children.submenu-open .sub-menu {
        display: block;
    }

    .menu-item.has-children .sub-menu a {
        white-space: normal;
        padding: 11px 12px;
    }

    .menu-item.has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (max-width: 380px) {
    .brand-logo {
        width: min(200px, 72%);
    }

    .mobile-menu {
        font-size: 28px;
        padding: 8px;
    }
}





@media (max-width: 900px) {
    .header .nav {
        position: relative;
    }

    .header .mobile-menu {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        flex-shrink: 0;
        cursor: pointer;
        border: 0;
        background: transparent;
        color: #073B8F;
        font-size: 30px;
        position: relative;
        z-index: 1002;
        -webkit-tap-highlight-color: transparent;
    }

    .header .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 75vh;
        overflow-y: auto;
        padding: 16px 20px;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        z-index: 1001;
        box-shadow: 0 12px 24px rgba(18, 59, 93, .14);
    }

    .header .menu.is-open {
        display: flex !important;
    }

    .header .menu-item.has-children {
        display: block !important;
    }

    .header .menu-item.has-children .sub-menu {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: #F5F8FF;
    }

    .header .menu-item.has-children.submenu-open .sub-menu {
        display: block;
    }
}

@media (min-width: 901px) {
    .header .mobile-menu {
        display: none !important;
    }

    .header .menu {
        display: flex !important;
    }
}




/* =========================================
   PATIENT JOURNEY INFOGRAPHIC
========================================= */

.patient-journey {
    background: linear-gradient(180deg, #F5F8FF 0%, #FFFFFF 100%);
}

.journey-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
    position: relative;
    margin-top: 55px;
}

.journey-step {
    position: relative;
    min-width: 0;
    padding-top: 35px;
}

.journey-marker {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1261D6, #6C3FE8);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    border: 5px solid #fff;
    box-shadow: 0 5px 18px rgba(72, 65, 180, .2);
    z-index: 2;
}

.journey-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% + 27px);
    width: calc(100% + 22px);
    height: 3px;
    background: linear-gradient(90deg, #1261D6, #B7A7F8);
    border-radius: 5px;
}

.journey-content {
    height: 100%;
    padding: 36px 20px 24px;
    background: #fff;
    border: 1px solid #DCE6F3;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(34, 65, 130, .07);
    transition: transform .25s ease, box-shadow .25s ease;
}

.journey-content:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(34, 65, 130, .13);
}

.journey-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #EAF3FF;
    color: #1261D6;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 18px;
}

.journey-content h3 {
    font-size: 18px;
    line-height: 1.35;
    color: #073B8F;
    margin: 0 0 12px;
}

.journey-content p {
    color: #6B7D8D;
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 900px) {
    .journey-timeline {
        grid-template-columns: 1fr;
        gap: 22px;
        margin: 30px 0 0;
        padding-left: 30px;
    }

    .journey-step {
        padding: 0 0 0 25px;
    }

    .journey-marker {
        top: 22px;
        left: -30px;
        transform: translateX(-50%);
    }

    .journey-step:not(:last-child)::after {
        top: 55px;
        bottom: -25px;
        left: -30px;
        width: 3px;
        height: auto;
        background: linear-gradient(180deg, #1261D6, #B7A7F8);
    }

    .journey-content {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .journey-timeline {
        padding-left: 25px;
    }

    .journey-step {
        padding-left: 20px;
    }

    .journey-marker {
        left: -25px;
        width: 48px;
        height: 48px;
    }

    .journey-content {
        padding: 22px 18px;
    }
}





/* =========================================
   MODERN FAQ DESIGN
========================================= */

.modern-faq {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #F5F9FF, #FFFFFF);
}

.modern-faq .section-head {
    max-width: 850px;
    margin-bottom: 42px;
}

.modern-faq .section-head h2 {
    color: #073B8F;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.2;
}

.modern-faq .section-head h2 span {
    background: linear-gradient(135deg, #1261D6, #6C3FE8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modern-faq .section-head h2::after {
    content: "";
    display: block;
    width: 65px;
    height: 4px;
    margin: 15px auto 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #1261D6, #6C3FE8);
}

.modern-faq .section-head p {
    color: #536C91;
    line-height: 1.8;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

.faq-item {
    min-width: 0;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #DCE8FB;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(18, 59, 93, .055);
    overflow: hidden;
    transition: border-color .25s ease,
                box-shadow .25s ease,
                transform .25s ease;
}

.faq-item:hover {
    border-color: #B7C9FF;
    box-shadow: 0 14px 32px rgba(44, 64, 130, .10);
}

.faq-item[open] {
    border-color: #9AAEFF;
    box-shadow: 0 14px 35px rgba(72, 49, 190, .09);
}

.faq-item summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 15px;
    min-height: 104px;
    padding: 22px;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EAF3FF;
    color: #073B8F;
    font-size: 16px;
    font-weight: 800;
}

.faq-question {
    color: #073B8F;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}

.faq-toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EAF3FF;
    transition: background .25s ease, transform .25s ease;
}

.faq-toggle::before,
.faq-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #1261D6;
    transform: translate(-50%, -50%);
}

.faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .25s ease;
}

.faq-item[open] .faq-toggle {
    background: linear-gradient(135deg, #1261D6, #6C3FE8);
}

.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after {
    background: #fff;
}

.faq-item[open] .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.faq-answer {
    padding: 0 22px 22px;
}

.faq-answer p {
    margin: 0;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #F0F4FF, #F7F4FF);
    color: #425E85;
    font-size: 15px;
    line-height: 1.8;
}

.faq-item summary:focus-visible {
    outline: 3px solid #6C3FE8;
    outline-offset: -4px;
    border-radius: 16px;
}

@media (max-width: 760px) {
    .modern-faq .section-head {
        margin-bottom: 30px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .faq-item summary {
        grid-template-columns: 42px minmax(0, 1fr) 36px;
        gap: 12px;
        min-height: 88px;
        padding: 17px;
    }

    .faq-number {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .faq-question {
        font-size: 16px;
    }

    .faq-toggle {
        width: 36px;
        height: 36px;
    }

    .faq-answer {
        padding: 0 15px 16px;
    }

    .faq-answer p {
        padding: 16px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-toggle,
    .faq-toggle::after {
        transition: none;
    }
}


/* =========================================================
   EXPERTISE DROPDOWN
   ========================================================= */

.menu-item.has-children {
    position: relative;
}

/* Expertise link */
.menu-item.has-children > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Dropdown menu */
.menu-item.has-children .sub-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;

    min-width: 300px;
    margin: 0;
    padding: 10px;

    list-style: none;
    background: #fff;

    border: 1px solid var(--line);
    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(18, 59, 93, .15);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: 100;
}

/* Dropdown items */
.menu-item.has-children .sub-menu li {
    margin: 0;
    padding: 0;
}

/* Dropdown links */
.menu-item.has-children .sub-menu a {
    display: block;

    padding: 11px 14px;

    color: var(--text);
    font-size: 14px;
    font-weight: 600;

    border-radius: 6px;
    white-space: nowrap;
}

/* Dropdown hover */
.menu-item.has-children .sub-menu a:hover {
    color: #fff;

    background: linear-gradient(
        135deg,
        #1261D6,
        #6C3FE8
    );
}

/* Show dropdown on hover */
.menu-item.has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Keep dropdown open while moving mouse */
.menu-item.has-children:hover > a {
    color: var(--violet);
}

/* Mobile */
@media(max-width:900px) {
    .menu-item.has-children {
        display: none;
    }
}




/* ==============================
   Header Logo
================================ */

.brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 300px;
    height: 80px;
    overflow: hidden;
}

.brand-logo img {
    display: block;
    width: 240px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

/* Header layout */

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

/* Navigation */

.menu {
    display: flex;
    align-items: center;
    gap: 25px;
}

.menu a {
    text-decoration: none;
}

/* Mobile */

@media (max-width: 768px) {

    .brand-logo {
        width: 200px;
        height: 65px;
    }

    .brand-logo img {
        width: 190px;
        max-height: 65px;
    }

    .menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        font-size: 28px;
        cursor: pointer;
    }
}



:root{
 --blue:#1261D6;
 --blue-dark:#073B8F;
 --violet:#6C3FE8;
 --violet-dark:#4921B8;
 --sky:#EAF3FF;
 --lavender:#F3EEFF;
 --text:#30465A;
 --muted:#6B7D8D;
 --white:#fff;
 --line:#DCE6F3;
 --shadow:0 18px 50px rgba(34,65,130,.12);
 --gradient:linear-gradient(135deg,#1261D6 0%,#6C3FE8 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.65}
a{text-decoration:none;color:var(--blue-dark)}
img{max-width:100%;height:auto}
.container{width:min(1160px,92%);margin:auto}
.topbar{background:var(--blue-dark);color:#dceaf1;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;gap:20px;padding:8px 0}
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{font-weight:800;font-size:23px;color:var(--blue-dark);line-height:1.05}
.brand small{display:block;font-size:10px;letter-spacing:1.7px;color:var(--violet);margin-top:6px}
.menu{display:flex;align-items:center;gap:25px}
.menu a{font-weight:600;font-size:14px;color:var(--text)}
.menu a:hover{color:var(--violet)}
.header-btn{background:var(--violet);color:#fff!important;padding:11px 18px;border-radius:6px}
.hero{background:linear-gradient(115deg,#EDF7F8 0%,#fff 62%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:45px;min-height:670px}
.eyebrow{color:var(--violet-dark);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:13px}
.hero h1{font-size:52px;line-height:1.08;color:var(--blue-dark);margin:12px 0 16px}
.hero h1 span{color:var(--violet)}
.hero .subtitle{font-size:21px;color:var(--blue-dark);font-weight:700;margin-bottom:12px}
.hero p{font-size:17px;color:var(--muted);max-width:690px}
.btn{display:inline-block;padding:13px 22px;border-radius:7px;background:var(--blue-dark);color:#fff;font-weight:700;margin:8px 7px 0 0;border:1px solid var(--blue-dark)}
.btn.primary{background:var(--violet);border-color:var(--violet)}
.btn.light{background:#fff;color:var(--blue-dark);border-color:var(--line)}
.hero-photo{align-self:end;text-align:center;position:relative}
.hero-photo img{max-height:610px;object-fit:contain;border-radius:18px 18px 0 0;filter:drop-shadow(0 18px 35px rgba(18,59,93,.18))}
.hero-badge{position:absolute;bottom:28px;left:0;background:#fff;padding:15px 19px;border-radius:10px;box-shadow:var(--shadow);text-align:left;max-width:260px}
.hero-badge strong{display:block;color:var(--blue-dark)}
.hero-badge small{color:var(--muted)}
.section{padding:82px 0}
.section.soft{background:var(--sky)}
.section-head{max-width:760px;margin:0 auto 45px;text-align:center}
.section-head h2{font-size:38px;line-height:1.15;color:var(--blue-dark);margin:10px 0}
.section-head p{color:var(--muted);font-size:17px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:27px;box-shadow:0 8px 25px rgba(18,59,93,.045);height:100%}
.card:hover{transform:translateY(-3px);transition:.2s;box-shadow:var(--shadow)}
.card h3{color:var(--blue-dark);font-size:21px;margin:14px 0 8px}
.card p,.card li{color:var(--muted)}
.icon{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#E4F6F5;color:var(--violet-dark);font-size:24px;font-weight:800}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center}
.photo-card{border-radius:17px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.photo-card img{width:100%;display:block}
.content h2{font-size:38px;color:var(--blue-dark);line-height:1.15;margin:8px 0 18px}
.content p{color:var(--muted);font-size:16px}
.checks{padding:0;list-style:none}
.checks li{margin:9px 0;color:var(--text)}
.checks li:before{content:"✓";color:var(--violet);font-weight:800;margin-right:10px}
.qual{border-left:4px solid var(--violet)}
.clinic{background:linear-gradient(120deg,var(--blue-dark),var(--blue-dark));color:#fff;border-radius:18px;padding:42px;box-shadow:var(--shadow)}
.clinic h2,.clinic h3{color:#fff}
.clinic p,.clinic li{color:#d5e5ec}
.page-hero{background:linear-gradient(110deg,var(--blue-dark),var(--blue-dark));padding:65px 0;color:#fff}
.page-hero h1{font-size:44px;margin:0 0 8px;color:#fff}
.page-hero p{margin:0;color:#d6e5ec}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
input,textarea,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:6px;font:inherit;margin-bottom:14px}
textarea{min-height:145px}
.footer{background:#071E30;color:#bcd0d9;padding:55px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:35px}
.footer h3{color:#fff}
.footer a{color:#d4e4ea}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;font-size:13px}
.mobile-menu{display:none}
@media(max-width:900px){
 .hero-grid,.two-col,.contact-grid{grid-template-columns:1fr}
 .hero-grid{padding:65px 0;min-height:0}
 .hero h1{font-size:42px}
 .grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}
 .menu{display:none}.mobile-menu{display:block;color:var(--blue-dark);font-size:26px}
 .hero-photo{order:-1}
}
@media(max-width:600px){
 .topbar .container{display:block;text-align:center}
 .section{padding:58px 0}.section-head h2,.content h2{font-size:30px}
 .hero h1{font-size:36px}.hero .subtitle{font-size:18px}
 .grid-3,.grid-4{grid-template-columns:1fr}
 .hero-badge{position:static;margin:-30px auto 0;max-width:280px}
 .page-hero h1{font-size:35px}
 .footer-grid{grid-template-columns:1fr}
}




/* =========================================================
   BLUE + VIOLET MOTION SYSTEM
   ========================================================= */
body{overflow-x:hidden}
.header{backdrop-filter:blur(12px);background:rgba(255,255,255,.94);transition:box-shadow .3s ease,background .3s ease}
.header:hover{box-shadow:0 8px 30px rgba(18,65,145,.08)}
.hero{position:relative}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(3px);opacity:.18;animation:floatOrb 9s ease-in-out infinite}
.hero:before{width:260px;height:260px;background:#1261D6;top:-80px;left:-100px}
.hero:after{width:320px;height:320px;background:#6C3FE8;right:-120px;bottom:-150px;animation-delay:-3s}
.hero-grid{position:relative;z-index:2}
.hero h1{animation:fadeUp .8s ease both}
.hero .subtitle{animation:fadeUp .8s .12s ease both}
.hero p{animation:fadeUp .8s .22s ease both}
.hero .btn{animation:fadeUp .8s .34s ease both}
.hero-photo{animation:heroPhotoIn 1s .1s cubic-bezier(.2,.8,.2,1) both}
.hero-photo img{animation:softFloat 5s ease-in-out infinite;transform-origin:center bottom}
.hero-badge{animation:badgeFloat 4s ease-in-out infinite}

.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn:before{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(72,49,190,.22)}
.btn:hover:before{left:140%}

.card{position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(18,97,214,.05),rgba(108,63,232,.09));opacity:0;transition:opacity .3s ease;pointer-events:none}
.card:hover{transform:translateY(-8px) scale(1.01);border-color:rgba(108,63,232,.25);box-shadow:0 22px 45px rgba(44,64,130,.14)}
.card:hover:after{opacity:1}
.card .icon{transition:transform .35s ease,box-shadow .35s ease;background:linear-gradient(135deg,#EAF3FF,#F1EAFF);color:var(--violet-dark)}
.card:hover .icon{transform:rotate(-7deg) scale(1.12);box-shadow:0 10px 22px rgba(108,63,232,.16)}

.section-head .eyebrow,.content .eyebrow{animation:fadeUp .7s ease both}
.section-head h2,.content h2{position:relative}
.section-head h2:after,.content h2:after{content:"";display:block;width:58px;height:4px;border-radius:10px;background:var(--gradient);margin-top:14px;animation:lineGrow .8s ease both}

.qual{transition:transform .3s ease,border-color .3s ease}
.qual:hover{transform:translateX(5px);border-left-color:var(--violet)}

.photo-card{position:relative}
.photo-card:after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.5);border-radius:12px;pointer-events:none;opacity:0;transform:scale(.96);transition:.35s ease}
.photo-card:hover:after{opacity:1;transform:scale(1)}
.photo-card img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.photo-card:hover img{transform:scale(1.045);filter:saturate(1.08)}

.clinic{position:relative;overflow:hidden;background:linear-gradient(120deg,#073B8F 0%,#1261D6 48%,#6C3FE8 100%)}
.clinic:before,.clinic:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);animation:floatOrb 8s ease-in-out infinite}
.clinic:before{width:240px;height:240px;right:-80px;top:-100px}
.clinic:after{width:180px;height:180px;left:-80px;bottom:-100px;animation-delay:-2s}
.clinic>*{position:relative;z-index:1}

.page-hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#073B8F 0%,#1261D6 50%,#6C3FE8 100%)}
.page-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-90px;top:-120px;background:rgba(255,255,255,.10);animation:softFloat 7s ease-in-out infinite}
.page-hero .container{position:relative;z-index:1}

.footer{background:linear-gradient(135deg,#061E3D,#24115C)}
.footer a{transition:color .25s ease,padding-left .25s ease}
.footer a:hover{color:#fff;padding-left:4px}

@keyframes fadeUp{
 from{opacity:0;transform:translateY(22px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes heroPhotoIn{
 from{opacity:0;transform:translateX(45px) scale(.94)}
 to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes softFloat{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-10px)}
}
@keyframes badgeFloat{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-7px)}
}
@keyframes floatOrb{
 0%,100%{transform:translate3d(0,0,0) scale(1)}
 50%{transform:translate3d(18px,22px,0) scale(1.06)}
}
@keyframes lineGrow{
 from{width:0;opacity:0}
 to{width:58px;opacity:1}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

.brand{background:linear-gradient(90deg,#073B8F,#6C3FE8);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{-webkit-text-fill-color:var(--violet)}
.header-btn,.btn.primary{background:linear-gradient(135deg,#1261D6,#6C3FE8);border-color:transparent}

/* =========================================================
   FINAL HEADER + MOBILE NAVIGATION OVERRIDES
   Keep this block at the END of style.css
========================================================= */
@media (max-width: 900px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .nav {
        position: relative;
        min-height: 78px;
        gap: 12px;
    }

    /* Match the current header markup: .brand.logo-only */
    .nav > .brand.logo-only {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        max-width: calc(100% - 58px);
        flex-shrink: 1;
        overflow: hidden;
    }

    .nav > .brand.logo-only img {
        flex: 0 0 44px;
        width: 44px !important;
        height: 44px !important;
    }

    .nav > .brand.logo-only span {
        min-width: 0;
        font-size: 16px;
        overflow-wrap: anywhere;
    }

    .nav > .brand.logo-only small {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 8px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #073B8F;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        position: relative;
        z-index: 1002;
    }

    .mobile-menu:focus-visible,
    .menu a:focus-visible {
        outline: 2px solid #1261D6;
        outline-offset: 3px;
    }

    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px 18px 20px;
        margin: 0;
        background: #fff;
        border-top: 1px solid #DCE6F3;
        box-shadow: 0 12px 24px rgba(18, 59, 93, .14);
        z-index: 1001;
    }

    .menu.is-open {
        display: flex;
    }

    .menu > a,
    .menu-item.has-children > a {
        display: block;
        padding: 12px 8px;
        border-bottom: 1px solid #EDF1F7;
    }

    .menu .header-btn {
        margin-top: 12px;
        text-align: center;
        color: #fff !important;
        border-bottom: 0;
    }

    /* Override the earlier rule that hides Expertise on mobile. */
    .menu-item.has-children {
        display: block;
        position: static;
    }

    .menu-item.has-children .sub-menu {
        display: none;
        position: static;
        top: auto;
        left: auto;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 5px 0 5px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #F5F8FF;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .menu-item.has-children.submenu-open .sub-menu {
        display: block;
    }

    .menu-item.has-children .sub-menu a {
        display: block;
        padding: 10px 12px;
        white-space: normal;
    }

    /* Disable hover-only dropdown display on touch layouts. */
    .menu-item.has-children:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (min-width: 901px) {
    .mobile-menu {
        display: none;
    }

    .menu {
        display: flex;
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 380px) {
    .nav > .brand.logo-only span {
        font-size: 14px;
    }

    .nav > .brand.logo-only small {
        font-size: 8px;
        letter-spacing: .6px;
    }

    .mobile-menu {
        font-size: 27px;
    }
}