/*==================================================
MUSCAT PRIVATE HOSPITAL
Premium Healthcare UI v2
==================================================*/

/*==================================================
THEME FONT - ARABOTO (Abdelrahman Farahat / FarahatDesign)
Files live in assets/fonts/araboto/ (woff2 + ttf fallback).
Araboto ships no SemiBold, so 600 maps to Bold and
800 maps to Black.
==================================================*/

@font-face {
    font-family: 'Araboto';
    font-style: normal;
    font-weight: 100 200;
    font-display: swap;
    src: url('../assets/fonts/araboto/Araboto-Thin.woff2') format('woff2'),
         url('../assets/fonts/araboto/Araboto-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Araboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/araboto/Araboto-Light.woff2') format('woff2'),
         url('../assets/fonts/araboto/Araboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Araboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/araboto/Araboto-Normal.woff2') format('woff2'),
         url('../assets/fonts/araboto/Araboto-Normal.ttf') format('truetype');
}

@font-face {
    font-family: 'Araboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/araboto/Araboto-Medium.woff2') format('woff2'),
         url('../assets/fonts/araboto/Araboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Araboto';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url('../assets/fonts/araboto/Araboto-Bold.woff2') format('woff2'),
         url('../assets/fonts/araboto/Araboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Araboto';
    font-style: normal;
    font-weight: 800 900;
    font-display: swap;
    src: url('../assets/fonts/araboto/Araboto-Black.woff2') format('woff2'),
         url('../assets/fonts/araboto/Araboto-Black.ttf') format('truetype');
}

/*==================================================
ROOT
==================================================*/

:root {

    --slate-blue-header: #456482;
    --slate-blue-dark: #38536E;
    --slate-blue-light: #527394;

    --primary-navy-dark: #004e75;
    --primary-navy: #004e75;
    --primary-navy-light: #162E4D;

    --accent-blue: #1C4068;
    --accent-blue-bright: #1c97d4;

    --brand-cyan-light: #EBF8FF;

    --text-dark: #0F172A;
    --text-body: #475569;
    --text-light: #FFFFFF;

    --bg-light: #F8FAFC;
    --bg-card: #F0F6FF;

    --danger: #D91C24;

    --radius: 20px;
    --radius-lg: 30px;
    --radius-xl: 40px;

    --shadow: 0 25px 70px rgba(0, 0, 0, .08);

    /* Subpage Variables */
    --primary-color: #004e75;
    --primary-light: #0d5d87;
    --primary-dark: #003652;
    --secondary-color: #1c97d4;
    --accent-color: #D91C24;
    --text-main: #0F172A;
    --text-muted: #475569;
    --bg-white: #ffffff;
    --font-primary: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --container-width: 1240px;
    --section-padding: 90px;
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.1);
    --shadow-glass: 0 10px 35px rgba(0, 0, 0, 0.12);
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-full: 9999px;
    --transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);

}

/*==================================================
RESET
==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    background: #ffffff;
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.7;

}

img {

    display: block;
    max-width: 100%;

}

a {

    text-decoration: none;
    color: inherit;

}

ul {

    list-style: none;

}

button {

    font-family: inherit;
    cursor: pointer;
    border: none;

}

.container {

    width: min(1320px, 92%);
    margin: auto;

}

/*==================================================
TOP BAR
==================================================*/

.top-bar {
    background: var(--slate-blue-header);
    color: #fff;
    padding: 10px 0;
    font-size: 14px;

}

.top-bar-wrapper {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.top-left,
.top-right {

    display: flex;
    align-items: center;
    gap: 18px;

}

.top-left a,
.top-right a {

    color: #fff;
    opacity: .9;
    transition: .3s;

}

.top-left a:hover,
.top-right a:hover {

    opacity: 1;

}

.emergency-pill {

    background: #D91C24;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;

}

/*==================================================
NAVBAR
==================================================*/

.site-header {

    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;

}

.navbar {

    padding: 25px 0;
    transition: .35s;

}

.navbar-wrapper {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.logo img {

    height: 72px;

}

.nav-menu {

    display: flex;
    align-items: center;
    gap: 38px;

}

.nav-menu a {

    color: #fff;
    font-weight: 600;
    position: relative;
    transition: .3s;

}

.nav-menu a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #1c97d4;
    transition: .3s;

}

.nav-menu a:hover:after {
    width: 100%;
}

.btn-appointment {
    background: #004e75;
    color: #004e75;
    padding: 17px 28px;
    border-radius: 999px;
    font-weight: 700;
    transition: .3s;

}

.btn-appointment:hover {

    background: #1c97d4;

}

/*==================================================
HERO
==================================================*/
.hero {

    position: relative;
    height: 100vh;

    background:

        linear-gradient(90deg,
            rgba(7, 23, 44, .92),
            rgba(7, 23, 44, .82),
            rgba(7, 23, 44, .25)),

        url("../assets/images/header1.png");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    overflow: hidden;

}

.hero-overlay {

    position: absolute;
    inset: 0;

}

.hero-wrapper {

    display: grid;
    grid-template-columns: 1.1fr 430px;
    gap: 70px;
    align-items: center;

    position: relative;
    z-index: 5;

}

.hero-left {

    color: #fff;

}

.hero-label {

    display: inline-block;

    padding: 12px 22px;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 999px;

    margin-bottom: 28px;

    font-weight: 600;

}

.hero h1 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-size: 72px;

    line-height: 1.05;

    margin-bottom: 25px;

    font-weight: 800;

}

.hero p {

    font-size: 19px;

    opacity: .9;

    max-width: 620px;

    margin-bottom: 40px;

}

.hero-buttons {

    display: flex;
    gap: 18px;
    margin-bottom: 55px;

}

.btn-primary {

    background: #1c97d4;

    padding: 18px 36px;

    border-radius: 999px;

    font-weight: 700;

    color: #fff;

    transition: .3s;

}

.btn-primary:hover {

    transform: translateY(-3px);

}

.btn-secondary {

    padding: 18px 36px;

    border: 2px solid rgba(255, 255, 255, .35);

    border-radius: 999px;

    color: #fff;

    backdrop-filter: blur(20px);

    transition: .3s;

}

.btn-secondary:hover {

    background: rgba(255, 255, 255, .12);

}

.hero-counter {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;

}

.hero-counter h2 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 48px;
    font-weight: 700;

}

.hero-counter p {

    margin: 0;
    font-size: 15px;
    opacity: .8;

}

/*==================================================
BOOKING CARD
==================================================*/

.appointment-card {

    background: #fff;

    border-radius: 32px;

    padding: 40px;

    box-shadow: var(--shadow);

}

.card-badge {

    display: inline-block;

    background: #EBF8FF;

    color: #1c97d4;

    padding: 8px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 20px;

}

.appointment-card h3 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-size: 34px;

    margin-bottom: 10px;

    color: #004e75;

}

.appointment-card p {

    color: #64748B;

    margin-bottom: 28px;

}

.appointment-card input,
.appointment-card select {

    width: 100%;

    height: 58px;

    padding: 0 18px;

    border-radius: 14px;

    border: 1px solid #dce5ef;

    margin-bottom: 18px;

    outline: none;

    font-size: 15px;

}

.appointment-card input:focus,
.appointment-card select:focus {

    border-color: #1c97d4;

}

.appointment-card button {

    width: 100%;

    height: 58px;

    background: #004e75;

    color: #fff;

    border-radius: 14px;

    font-size: 16px;

    font-weight: 700;

    transition: .3s;

}

.appointment-card button:hover {

    background: #1c97d4;

}

/*==================================================
TRUST BAR
==================================================*/

.trust-bar {

    background: #ffffff;

    margin-top: -60px;

    position: relative;

    z-index: 10;

}

.trust-wrapper {

    background: #fff;

    border-radius: 30px;

    box-shadow: var(--shadow);

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    padding: 35px;

}

.trust-item {

    text-align: center;

    border-right: 1px solid #edf2f7;

}

.trust-item:last-child {

    border: none;

}

.trust-item h3 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-size: 22px;

    margin-bottom: 8px;

    color: #004e75;

}

.trust-item span {

    color: #64748B;

    font-size: 15px;

}

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

@media(max-width:992px) {

    .nav-menu {

        display: none;

    }

    .hero {

        height: auto;

        padding: 180px 0 100px;

    }

    .hero-wrapper {

        grid-template-columns: 1fr;

    }

    .hero h1 {

        font-size: 52px;

    }

    .hero-counter {

        grid-template-columns: repeat(2, 1fr);

    }

    .trust-wrapper {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

}

@media(max-width:768px) {

    .top-bar {

        display: none;

    }

    .hero {

        padding-top: 150px;

    }

    .hero h1 {

        font-size: 42px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-counter {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .trust-wrapper {

        grid-template-columns: 1fr;

    }

    .logo img {

        height: 58px;

    }

    .btn-appointment {

        display: none;

    }

}

/*==========================================
ABOUT
==========================================*/

.about-section {

    padding: 130px 0;

    background: #fff;

    position: relative;

    overflow: hidden;

}

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}

.about-images {

    position: relative;

}

.main-image {

    overflow: hidden;

    border-radius: 30px;

    box-shadow: 0 30px 70px rgba(0, 0, 0, .12);

}

.main-image img {

    width: 100%;

    display: block;

}

.experience-card {

    position: absolute;

    left: -35px;

    bottom: 70px;

    background: #004e75;

    padding: 35px;

    width: 230px;

    border-radius: 25px;

    color: #fff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);

}

.experience-card h2 {

    font-size: 52px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 10px;

}

.floating-card {

    position: absolute;

    background: #fff;

    padding: 25px;

    border-radius: 22px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    text-align: center;

}

.doctors {

    top: 40px;

    right: -40px;

}

.patients {

    bottom: 25px;

    right: -55px;

}

.floating-card h3 {

    font-size: 32px;

    color: #1c97d4;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 5px;

}

.section-label {

    display: inline-block;

    padding: 10px 18px;

    background: #EBF8FF;

    color: #1c97d4;

    font-size: 14px;

    font-weight: 700;

    border-radius: 999px;

    margin-bottom: 25px;

}

.about-content h2 {

    font-size: 54px;

    line-height: 1.15;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 30px;

    color: #004e75;

}

.about-content p {

    font-size: 17px;

    color: #64748B;

    margin-bottom: 25px;

    line-height: 1.9;

}

.about-features {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    margin: 40px 0;

}

.about-features div {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 600;

}

.about-features i {

    color: #1c97d4;

    font-size: 18px;

}

.about-buttons {

    display: flex;

    gap: 20px;

    margin-top: 15px;

}

.btn-outline {

    padding: 18px 35px;

    border: 2px solid #004e75;

    border-radius: 999px;

    font-weight: 700;

    color: #004e75;

    transition: .3s;

}

.btn-outline:hover {

    background: #004e75;

    color: #fff;

}

@media(max-width:992px) {

    .about-grid {

        grid-template-columns: 1fr;

    }

    .about-content {

        margin-top: 80px;

    }

    .experience-card {

        left: 20px;

    }

    .doctors {

        right: 20px;

    }

    .patients {

        right: 20px;

    }

    .about-content h2 {

        font-size: 42px;

    }

}

@media(max-width:768px) {

    .about-section {

        padding: 80px 0;

    }

    .about-features {

        grid-template-columns: 1fr;

    }

    .about-buttons {

        flex-direction: column;

    }

    .about-content h2 {

        font-size: 34px;

    }

    .experience-card {

        width: 190px;

        padding: 25px;

    }

    .experience-card h2 {

        font-size: 40px;

    }

    .floating-card {

        display: none;

    }

}

/*==========================================
SPECIALTIES
==========================================*/

.specialties-section {

    padding: 130px 0;

    background: #F8FAFC;

}

.section-heading {

    max-width: 750px;

    margin: auto;

    text-align: center;

    margin-bottom: 70px;

}

.section-heading h2 {

    font-size: 54px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    color: #004e75;

    margin: 20px 0;

    line-height: 1.15;

}

.section-heading p {

    font-size: 18px;

    color: #64748B;

}

.specialties-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 260px;

    gap: 25px;

}

.specialty-card {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    cursor: pointer;

}

.specialty-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.specialty-card:hover img {

    transform: scale(1.08);

}

.overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 30px;

    background: linear-gradient(transparent,

            rgba(7, 23, 44, .95));

    color: #fff;

}

.overlay span {

    display: inline-block;

    margin-bottom: 15px;

    font-size: 14px;

    font-weight: 700;

    color: #8FC8FF;

}

.overlay h3 {

    font-size: 30px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 12px;

}

.overlay p {

    opacity: .85;

    line-height: 1.7;

    margin-bottom: 20px;

}

.overlay a {

    font-weight: 700;

    color: #fff;

}

.large {

    grid-column: span 2;

    grid-row: span 2;

}

.wide {

    grid-column: span 2;

}

.view-all-card {

    background: #004e75;

    border-radius: 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #fff;

    text-align: center;

    padding: 40px;

    transition: .3s;

}

.view-all-card:hover {

    background: #1c97d4;

}

.view-all-card h3 {

    font-size: 64px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 10px;

}

.view-all-card p {

    margin-bottom: 25px;

    opacity: .9;

}

.view-all-card a {

    display: inline-block;

    padding: 15px 28px;

    border-radius: 999px;

    background: #fff;

    color: #004e75;

    font-weight: 700;

}

/* Responsive */

@media(max-width:992px) {

    .specialties-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 320px;

    }

    .large,

    .wide {

        grid-column: auto;

        grid-row: auto;

    }

    .section-heading h2 {

        font-size: 42px;

    }

}

@media(max-width:768px) {

    .specialties-section {

        padding: 80px 0;

    }

    .section-heading h2 {

        font-size: 34px;

    }

    .section-heading {

        margin-bottom: 40px;

    }

    .specialties-grid {

        grid-auto-rows: 260px;

    }

}

/*==========================================
DOCTORS
==========================================*/

.doctors-section {

    padding: 130px 0;

    background: #ffffff;

}

.doctor-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 40px;

    margin-top: 70px;

}

.featured-doctor {

    display: grid;

    grid-template-columns: 350px 1fr;

    background: #F0F6FF;

    border-radius: 30px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.featured-doctor img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.doctor-content {

    padding: 50px;

}

.doctor-content span {

    color: #1c97d4;

    font-weight: 700;

}

.doctor-content h3 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-size: 42px;

    margin: 10px 0;

}

.doctor-content h4 {

    margin-bottom: 20px;

    color: #456482;

}

.doctor-content p {

    color: #64748B;

    line-height: 1.8;

    margin-bottom: 25px;

}

.doctor-content ul {

    margin-bottom: 35px;

}

.doctor-content li {

    margin-bottom: 12px;

}

.doctor-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.doctor-card {

    display: flex;

    align-items: center;

    gap: 20px;

    background: #fff;

    padding: 20px;

    border-radius: 20px;

    box-shadow: var(--shadow);

    transition: .35s;

}

.doctor-card:hover {

    transform: translateY(-6px);

    background: #004e75;

    color: #fff;

}

.doctor-card img {

    width: 90px;

    height: 90px;

    border-radius: 18px;

    object-fit: cover;

}

.doctor-card span {

    color: #1c97d4;

    font-size: 15px;

    font-weight: 600;

}

@media(max-width:992px) {

    .doctor-grid {

        grid-template-columns: 1fr;

    }

    .featured-doctor {

        grid-template-columns: 1fr;

    }

    .featured-doctor img {

        height: 420px;

    }

}

@media(max-width:768px) {

    .doctors-section {

        padding: 80px 0;

    }

    .doctor-content {

        padding: 30px;

    }

    .doctor-content h3 {

        font-size: 32px;

    }

}

/*==========================================
HEALTH PACKAGES
==========================================*/

.packages-section {

    padding: 130px 0;

    background: #fff;

}

.packages-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    margin-top: 70px;

}

.package-card {

    background: #fff;

    border-radius: 30px;

    padding: 45px;

    box-shadow: var(--shadow);

    position: relative;

    transition: .35s;

}

.package-card:hover {

    transform: translateY(-10px);

}

.featured {

    background: #004e75;

    color: #fff;

    transform: scale(1.05);

}

.popular {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: #1c97d4;

    padding: 10px 20px;

    border-radius: 999px;

    font-size: 14px;

    font-weight: 700;

    color: #fff;

}

.package-header {

    margin-bottom: 30px;

}

.package-header span {

    font-weight: 700;

    color: #1c97d4;

}

.featured .package-header span {

    color: #8FD4FF;

}

.package-header h3 {

    font-size: 58px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-top: 10px;

}

.package-card ul {

    margin-bottom: 35px;

}

.package-card li {

    margin-bottom: 15px;

    color: #64748B;

}

.featured li {

    color: #fff;

    opacity: .9;

}

.btn-light {

    display: inline-block;

    background: #fff;

    color: #004e75;

    padding: 18px 35px;

    border-radius: 999px;

    font-weight: 700;

}

@media(max-width:992px) {

    .packages-grid {

        grid-template-columns: 1fr;

    }

    .featured {

        transform: none;

    }

}

/*==========================================
STATISTICS
==========================================*/

.stats-section {

    position: relative;

    padding: 140px 0;

    background: url("../assets/images/statistics-bg.jpg") center center/cover;

    background-attachment: fixed;

    overflow: hidden;

}

.stats-section .overlay {

    position: absolute;

    inset: 0;

    background: rgba(7, 23, 44, .88);

}

.stats-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    text-align: center;

}

.stat {

    color: #fff;

}

.stat h2 {

    font-size: 72px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 15px;

    color: #fff;

}

.stat span {

    font-size: 18px;

    opacity: .9;

}

@media(max-width:992px) {

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        row-gap: 50px;

    }

}

@media(max-width:768px) {

    .stats-section {

        padding: 90px 0;

        background-attachment: scroll;

    }

    .stats-grid {

        grid-template-columns: 1fr;

    }

    .stat h2 {

        font-size: 54px;

    }

}

/*==========================================
FACILITIES
==========================================*/

.facilities-section {

    padding: 130px 0;

    background: #ffffff;

}

.facility-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

    margin-top: 90px;

}

.reverse {

    direction: rtl;

}

.reverse>* {

    direction: ltr;

}

.facility-image {

    overflow: hidden;

    border-radius: 30px;

    box-shadow: var(--shadow);

}

.facility-image img {

    width: 100%;

    display: block;

    transition: .5s;

}

.facility-image:hover img {

    transform: scale(1.08);

}

.facility-content span {

    font-size: 72px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-weight: 700;

    color: #1c97d4;

    opacity: .15;

}

.facility-content h3 {

    font-size: 42px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin: 15px 0 25px;

    color: #004e75;

}

.facility-content p {

    font-size: 17px;

    line-height: 1.9;

    color: #64748B;

    margin-bottom: 35px;

}

@media(max-width:992px) {

    .facility-row {

        grid-template-columns: 1fr;

    }

    .reverse {

        direction: ltr;

    }

}

/*==========================================
INSURANCE
==========================================*/

.insurance-section {

    padding: 130px 0;

    background: #F8FAFC;

}

.insurance-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 70px;

}

.insurance-card {

    background: #fff;

    padding: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 170px;

    border-radius: 25px;

    box-shadow: var(--shadow);

    transition: .35s;

}

.insurance-card:hover {

    transform: translateY(-8px);

    background: #004e75;

}

.insurance-card img {

    max-width: 140px;

    filter: grayscale(100%);

    transition: .35s;

}

.insurance-card:hover img {

    filter: none;

    transform: scale(1.08);

}

@media(max-width:992px) {

    .insurance-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .insurance-section {

        padding: 80px 0;

    }

    .insurance-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================
TESTIMONIALS
==========================================*/

.testimonial-section {

    padding: 130px 0;

    background: #ffffff;

}

.testimonial-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 35px;

    margin-top: 70px;

}

.testimonial-featured {

    background: #004e75;

    color: #fff;

    padding: 60px;

    border-radius: 30px;

}

.quote {

    font-size: 80px;

    color: #1c97d4;

    line-height: 1;

    margin-bottom: 25px;

}

.testimonial-featured p {

    font-size: 22px;

    line-height: 1.8;

    margin-bottom: 45px;

}

.patient {

    display: flex;

    align-items: center;

    gap: 20px;

}

.patient img {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    object-fit: cover;

}

.testimonial-list {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.testimonial-card {

    background: #F8FAFC;

    padding: 35px;

    border-radius: 25px;

    box-shadow: var(--shadow);

    transition: .35s;

}

.testimonial-card:hover {

    transform: translateY(-8px);

}

.testimonial-card p {

    margin-bottom: 20px;

    color: #64748B;

}

@media(max-width:992px) {

    .testimonial-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================
NEWS
==========================================*/

.news-section {

    padding: 130px 0;

    background: #F8FAFC;

}

.news-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    margin-top: 70px;

}

.news-card {

    background: #fff;

    border-radius: 30px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: .35s;

}

.news-card:hover {

    transform: translateY(-10px);

}

.news-card img {

    width: 100%;

    height: 260px;

    object-fit: cover;

}

.news-content {

    padding: 35px;

}

.news-content span {

    display: inline-block;

    padding: 8px 16px;

    background: #EBF8FF;

    color: #1c97d4;

    border-radius: 999px;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 18px;

}

.news-content h3 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    font-size: 28px;

    margin-bottom: 25px;

    color: #004e75;

    line-height: 1.3;

}

.news-content a {

    font-weight: 700;

    color: #1c97d4;

}

@media(max-width:992px) {

    .news-grid {

        grid-template-columns: 1fr;

    }

}

/*==========================================
CTA
==========================================*/

.cta-section {

    position: relative;

    padding: 150px 0;

    background: url("../assets/images/cta-bg.jpg") center center/cover;

    overflow: hidden;

}

.cta-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,

            rgba(7, 23, 44, .95),

            rgba(7, 23, 44, .85));

}

.cta-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    color: #fff;

}

.cta-content h2 {

    font-size: 62px;

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin: 25px 0;

    line-height: 1.1;

}

.cta-content p {

    font-size: 20px;

    opacity: .9;

    margin-bottom: 40px;

    line-height: 1.8;

}

.cta-buttons {

    display: flex;

    gap: 20px;

}

@media(max-width:768px) {

    .cta-section {

        padding: 100px 0;

    }

    .cta-content h2 {

        font-size: 38px;

    }

    .cta-buttons {

        flex-direction: column;

    }

}

/*==========================================
FOOTER
==========================================*/

.footer {

    background: #004e75;

    color: #fff;

    padding-top: 90px;

}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.5fr;

    gap: 50px;

    padding-bottom: 70px;

}

.footer-logo {

    height: 65px;

    margin-bottom: 30px;

}

.footer-about p {

    color: #CBD5E1;

    line-height: 1.8;

    margin-bottom: 30px;

}

.footer h3 {

    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    margin-bottom: 25px;

    font-size: 24px;

}

.footer ul {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.footer ul li {

    color: #CBD5E1;

}

.footer a {

    transition: .3s;

}

.footer a:hover {

    color: #1c97d4;

}

.socials {

    display: flex;

    gap: 15px;

    margin-top: 25px;

}

.socials a {

    width: 46px;

    height: 46px;

    background: rgba(255, 255, 255, .08);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}

.socials a:hover {

    background: #1c97d4;

}

.newsletter {

    display: flex;

    margin-top: 25px;

}

.newsletter input {

    flex: 1;

    height: 50px;

    padding: 0 18px;

    border: none;

    outline: none;

    border-radius: 10px 0 0 10px;

}

.newsletter button {

    padding: 0 22px;

    background: #1c97d4;

    color: #fff;

    border: none;

    border-radius: 0 10px 10px 0;

    font-weight: 700;

}

.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .1);

    padding: 30px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #CBD5E1;

}

.footer-bottom div {
    color: white;
    display: flex;

    gap: 25px;

}

@media(max-width:992px) {

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .footer-bottom {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }

}

@media(max-width:768px) {

    .footer {

        padding-top: 70px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

    }

    .newsletter {

        flex-direction: column;

        gap: 12px;

    }

    .newsletter input,

    .newsletter button {

        width: 100%;

        border-radius: 10px;

    }

    .footer-bottom div {

        flex-direction: column;

        gap: 10px;

    }

}

/*==================================================
PROFESSIONAL HIGH-DENSITY & LAYOUT FIXES
==================================================*/

.container {
    width: min(1260px, 92%);
    margin: auto;
}

/* Navbar & Header Polish */
.site-header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
}

.navbar {
    padding: 14px 0 !important;
}

.logo img {
    height: 44px !important;
    width: auto !important;
}

.nav-menu {
    gap: 24px !important;
}

.nav-menu a {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.btn-appointment {
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

/* Hero Section Polish */
.hero {
    position: relative !important;
    min-height: 560px !important;
    height: auto !important;
    padding-top: 140px !important;
    padding-bottom: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.hero-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 35px !important;
    align-items: center !important;
    width: 100% !important;
}

.hero-label {
    padding: 6px 16px !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
}

.hero h1 {
    font-size: 40px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
}

.hero p {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    max-width: 540px !important;
}

.hero-buttons {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
}

.btn-primary,
.btn-secondary {
    padding: 11px 24px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
}

.hero-counter {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}

.hero-counter h2 {
    font-size: 26px !important;
}

.hero-counter p {
    font-size: 12px !important;
}

/* Appointment Booking Card Polish */
.appointment-card {
    padding: 24px 26px !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    background: #ffffff !important;
}

.card-badge {
    padding: 4px 12px !important;
    font-size: 11px !important;
    margin-bottom: 10px !important;
}

.appointment-card h3 {
    font-size: 22px !important;
    margin-bottom: 4px !important;
}

.appointment-card p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
}

.appointment-card input,
.appointment-card select {
    height: 42px !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
}

.appointment-card button {
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

/* Trust Bar Polish */
.trust-bar {
    background: #ffffff !important;
    margin-top: 0 !important;
    padding: 25px 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

.trust-wrapper {
    padding: 20px 25px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    background: #ffffff !important;
}

.trust-item h3 {
    font-size: 17px !important;
    margin-bottom: 4px !important;
}

.trust-item span {
    font-size: 12px !important;
}

/* About Section & Floating Cards Overlap Fix */
.about-section {
    padding: 240px 0 100px 0 !important;
}

.about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: center !important;
}

.about-images {
    position: relative !important;
    width: 100% !important;
}

.main-image img {
    border-radius: 20px !important;
    max-height: 440px !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* Position floating cards INSIDE the image container so they never overlap right column */
.experience-card {
    position: absolute !important;
    left: 15px !important;
    bottom: 15px !important;
    padding: 14px 18px !important;
    width: auto !important;
    min-width: 150px !important;
    border-radius: 14px !important;
    background: rgba(7, 23, 44, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    z-index: 2 !important;
    color: #ffffff !important;
}

.experience-card h2 {
    font-size: 28px !important;
    margin-bottom: 2px !important;
}

.experience-card p {
    font-size: 11px !important;
    margin: 0 !important;
}

.floating-card {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 10px 16px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    z-index: 2 !important;
    text-align: center !important;
}

.doctors {
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    bottom: auto !important;
}

.patients {
    bottom: 15px !important;
    right: 15px !important;
    left: auto !important;
    top: auto !important;
}

.floating-card h3 {
    font-size: 20px !important;
    margin-bottom: 0 !important;
    color: #1c97d4 !important;
}

.floating-card span {
    font-size: 11px !important;
    color: #475569 !important;
}

.about-content h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
}

.about-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
}

.about-features {
    margin: 18px 0 !important;
    gap: 10px !important;
}

/* Major Sections Padding */
.specialties-section,
.doctors-section,
.why-section,
.packages-section,
.stats-section,
.facilities-section,
.insurance-section,
.testimonial-section,
.news-section,
.cta-section {
    padding: 100px 0 60px !important;
}

.section-heading {
    margin-bottom: 25px !important;
    text-align: center !important;
}

.section-heading h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    margin: 6px 0 8px !important;
}

.section-heading p {
    font-size: 14px !important;
    max-width: 600px !important;
    margin: auto !important;
}

/* Grids Polish */
.specialties-grid {
    gap: 14px !important;
    grid-auto-rows: 180px !important;
}

.overlay {
    padding: 16px !important;
}

.overlay h3 {
    font-size: 20px !important;
}

.doctor-grid {
    gap: 16px !important;
    margin-top: 25px !important;
}

.featured-doctor {
    grid-template-columns: 240px 1fr !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.doctor-content {
    padding: 22px !important;
}

.doctor-content h3 {
    font-size: 22px !important;
}

.doctor-card {
    padding: 12px 16px !important;
    border-radius: 14px !important;
}

.packages-grid {
    gap: 16px !important;
    margin-top: 25px !important;
}

.package-card {
    padding: 22px !important;
    border-radius: 18px !important;
}

.package-header h3 {
    font-size: 34px !important;
}

.stats-section {
    padding: 40px 0 !important;
}

.stat h2 {
    font-size: 34px !important;
}

.facility-row {
    gap: 30px !important;
    margin-top: 30px !important;
    align-items: center !important;
}

.facility-image img {
    border-radius: 16px !important;
    max-height: 320px !important;
    object-fit: cover !important;
    width: 100% !important;
}

.facility-content h3 {
    font-size: 24px !important;
}

.insurance-grid {
    gap: 12px !important;
    margin-top: 20px !important;
}

.insurance-card {
    height: 80px !important;
    padding: 12px !important;
    border-radius: 12px !important;
}

.testimonial-grid {
    gap: 18px !important;
    margin-top: 25px !important;
}

.news-grid {
    gap: 16px !important;
    margin-top: 25px !important;
}

.news-card img {
    height: 160px !important;
    border-radius: 16px 16px 0 0 !important;
}

.cta-section {
    padding: 50px 0 !important;
}

.cta-content h2 {
    font-size: 32px !important;
}

.footer {
    padding-top: 40px !important;
}

.footer-grid {
    gap: 25px !important;
    padding-bottom: 30px !important;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .hero {
        padding-top: 130px !important;
        padding-bottom: 40px !important;
    }

    .hero-wrapper {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .doctors {
        top: 10px !important;
        right: 10px !important;
    }

    .patients {
        bottom: 10px !important;
        right: 10px !important;
    }

    .specialties-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 160px !important;
    }

    .specialty-card.large,
    .specialty-card.wide {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .doctor-grid,
    .facility-row,
    .facility-row.reverse {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none !important;
    }

    .top-bar-wrapper {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }

    .hero h1 {
        font-size: 28px !important;
    }

    .about-content h2,
    .section-heading h2 {
        font-size: 22px !important;
    }

    .specialties-grid,
    .packages-grid,
    .testimonial-grid,
    .news-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .trust-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero-buttons,
    .cta-buttons {
        flex-direction: column !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-outline {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   MUSCAT PRIVATE HOSPITAL FIGMA REPLICA CUSTOM STYLING
   ========================================================================== */

/* Top Utility Header */
.top-header {
    background: linear-gradient(90deg, #052235 0%, #073a58 55%, #0a4a71 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    padding: 15px 0 !important;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 200;
}

.top-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Left: stacked info items with dividers --- */
.top-header-left {
    display: flex;
    align-items: center;
}

.top-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 22px;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    transition: opacity .3s;
}

.top-info-item:first-child {
    padding-left: 0;
}

.top-info-item:hover {
    opacity: .82;
}

.top-info-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, .16);
}

.top-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7fc4ec;
    flex-shrink: 0;
}

.top-info-icon.emergency {
    color: #e33f47;
}

.top-info-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.top-info-text strong {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.top-info-text small {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
}

/* --- Right: quick links + language switch --- */
.top-header-right .top-quick-link {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: color .3s;
}

.top-header-right .top-quick-link:hover {
    color: #ffffff;
}

.lang-switch {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    overflow: hidden;
}

.lang-option {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    padding: 5px 14px;
    transition: background .3s, color .3s;
}

.lang-option+.lang-option {
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.lang-option:hover {
    color: #ffffff;
}

.lang-option.active {
    color: #ffffff;
    font-weight: 700;
    background: rgba(255, 255, 255, .1);
}

@media (max-width: 1024px) {

    .top-info-item:nth-child(3),
    .top-header-right .top-quick-link {
        display: none;
    }
}

@media (max-width: 640px) {
    .top-info-text small {
        display: none;
    }

    .top-info-item {
        padding: 2px 14px;
    }
}

.top-header-left a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    transition: color 0.3s;
}

.top-header-left a:hover {
    color: #EBF8FF;
}

.top-header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #ffffff;
    transition: opacity 0.3s;
}

.lang-selector:hover {
    opacity: 0.85;
}

.emergency-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #ffffff;
}

.dot-pulse {
    width: 8px;
    height: 8px;
    background-color: #D91C24;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(217, 28, 36, 0.7);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 28, 36, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(217, 28, 36, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(217, 28, 36, 0);
    }
}

/* Main Navigation Bar */
.main-header {
    background: linear-gradient(to bottom, rgba(0, 78, 117, 0.5) 0%, rgba(0, 78, 117, 0) 100%);
    position: absolute;
    width: 100%;
    top: 54px;
    left: 0;
    z-index: 100;
    padding: 15px 0 35px 0;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(1260px, 92%);
    margin: 0 auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.brand-logo-badge {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.brand-logo-badge circle {
    stroke: #004e75;
}

.brand-logo-badge text {
    fill: #004e75;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-title-ar {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    direction: rtl;
}

.brand-sub-ar {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    direction: rtl;
}

.brand-title-en {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.brand-sub-en {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.2px;
}

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

.nav-link {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s;
    padding: 8px 0;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
}

/* Custom Navy Pill Button */
.btn-pill-navy {
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.93), rgba(0, 78, 117, 0.93)) !important;
    color: #ffffff !important;
    padding: 10px 10px 10px 24px !important;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.btn-pill-navy:hover {
    background: #162E4D;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(11, 30, 54, 0.25);
}

.icon-circle {
    width: 32px;
    height: 32px;
    background: #ffffff;
    color: #004e75 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.btn-pill-navy:hover .icon-circle {
    transform: rotate(45deg);
}

.mobile-nav-toggle {
    display: none;
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
}

.hero-section {
    min-height: 640px;
    padding-top: 140px;
    padding-bottom: 0px;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(135deg, rgba(7, 23, 44, 0.5), rgba(0, 78, 117, 0.4)); */
    z-index: 2;
}

.hero-content {
    max-width: 650px;
    color: #ffffff;
    position: relative;
    z-index: 10;
}

.hero-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 35px;
    opacity: 0.95;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Glassmorphic Search Bar */
.hero-search-form {
    display: flex;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 6px;
    max-width: 580px;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.search-icon {
    padding-left: 18px;
    color: #004e75;
    display: flex;
    align-items: center;
}

.hero-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #004e75;
    font-size: 15px;
    padding: 10px 14px;
    width: 100%;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.hero-search-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.hero-search-btn {
    background: #004e75;
    color: #ffffff;
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s;
}

.hero-search-btn:hover {
    background: #1c4068;
}

/*==================================================
HOMEPAGE HERO - FIGMA LAYOUT
(scoped to #home so inner-page heroes stay as-is)
==================================================*/

#home.hero-section {
    min-height: 72vh;
    padding-top: 150px;
    padding-bottom: 55px;
    display: flex;
    align-items: stretch;
}

#home.hero-section>.container {
    display: flex;
    flex-direction: column;
    width: min(1260px, 92%);
}

#home .hero-overlay {
    background: linear-gradient(100deg, rgba(28, 56, 84, .55) 0%, rgba(38, 74, 108, .32) 45%, rgba(38, 74, 108, .12) 100%);
}

/* --- Centred search bar --- */
#home .hero-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: 640px;
    width: 100%;
    margin: 34px 0 0;
    box-shadow: none;
}

#home .hero-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .3s, background .3s;
}

#home .hero-search-field:focus-within {
    border-color: #ffffff;
    background: rgba(255, 255, 255, .2);
}

#home .hero-search-field .search-icon {
    padding: 0;
    color: rgba(255, 255, 255, .85);
    display: flex;
    align-items: center;
}

#home .hero-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 15px;
    padding: 0;
    width: 100%;
}

#home .hero-search-input::placeholder {
    color: rgba(255, 255, 255, .8);
}

#home .hero-search-btn {
    height: 52px;
    padding: 0 34px;
    border-radius: 12px;
    background: #16294a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .3s, transform .3s;
}

#home .hero-search-btn:hover {
    background: #0d1c36;
    transform: translateY(-2px);
}

/* --- Headline --- */
#home .hero-content {
    max-width: 780px;
    margin-top: 0;
    margin-bottom: 60px;
}

#home .hero-title {
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 26px;
}

#home .hero-subtitle {
    font-size: 17px;
    line-height: 1.65;
    max-width: 640px;
    margin-bottom: 0;
    opacity: .95;
}

/* --- Docked quick access bar --- */
#home .hero-quick-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin-top: auto;
    background: rgba(240, 244, 248, .9);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 22px;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .35) inset, 0 24px 60px rgba(9, 30, 55, .18);
    padding: 8px;
    position: relative;
    z-index: 20;
}

#home .hero-quick-item {
    display: flex;
    /* Leading icon lines up with the top of the heading, not the middle of
       the whole text block. The trailing arrow stays centred below. */
    align-items: flex-start;
    gap: 16px;
    padding: 24px 26px;
    border-radius: 16px;
    position: relative;
    text-decoration: none;
    transition: background .3s;
}

#home .hero-quick-item:hover {
    background: rgba(255, 255, 255, .85);
}

#home .hero-quick-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(148, 163, 184, .35);
}

#home .hero-quick-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: white;
    color: #004e75;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s;
}

#home .hero-quick-item:hover .hero-quick-icon {
    transform: scale(1.08);
}

#home .hero-quick-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

#home .hero-quick-title {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: #16294a;
}

#home .hero-quick-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #4a6b8a;
    max-width: 235px;
}

#home .hero-quick-arrow {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    align-self: center;
    border-radius: 50%;
    background: #ffffff;
    color: #16294a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(9, 30, 55, .12);
    transition: transform .3s, background .3s, color .3s;
}

#home .hero-quick-item:hover .hero-quick-arrow {
    background: #16294a;
    color: #ffffff;
    transform: translateX(3px);
}

#home+.about-section {
    padding-top: 130px !important;
}

@media (max-width: 1024px) {
    #home.hero-section {
        min-height: auto;
        padding-top: 150px;
    }

    #home .hero-quick-bar {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }

    #home .hero-quick-item:not(:last-child)::after {
        top: auto;
        left: 26px;
        right: 26px;
        bottom: 0;
        width: auto;
        height: 1px;
    }

    #home .hero-quick-desc {
        max-width: none;
    }
}

@media (max-width: 768px) {
    #home .hero-search-form {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 60px;
    }

    #home .hero-search-field,
    #home .hero-search-btn {
        width: 100%;
        flex: none;
    }

    #home .hero-content {
        margin-bottom: 50px;
    }
}

/* Docked Glassmorphic Quick Access Card */
.hero-docked-cards {
    margin-top: 60px;
    width: 100%;
    max-width: 1260px;
    position: relative;
    z-index: 10;
}

.docked-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    box-shadow: var(--shadow);
}

.docked-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 25px;
    position: relative;
}

.docked-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(11, 30, 54, 0.15);
}

.docked-icon-wrapper {
    width: 46px;
    height: 46px;
    background: rgba(49, 130, 206, 0.1);
    color: #1c97d4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.docked-info {
    flex-grow: 1;
}

.docked-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #004e75;
    margin-bottom: 2px;
}

.docked-desc {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    line-height: 1.4;
}

.docked-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #004e75;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
}

.docked-item:hover .docked-action-btn {
    background: #004e75;
    color: #ffffff;
    transform: translate(2px, -2px);
}


/* ====================================================
   REDESIGNED HERO SEARCH & CARDS (FIGMA UPDATE)
   ==================================================== */
.new-hero-search-container {
    width: 100%;
    max-width: 1050px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 25px;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.new-hero-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
}

.new-search-field {
    display: flex;
    align-items: center;
    padding: 0 28px;
    flex: 1;
    gap: 16px;
    height: 100%;
}

.new-search-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(28, 151, 212, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-search-icon-circle svg {
    color: #1c97d4;
}

.new-search-input-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.new-search-label {
    font-size: 10px;
    font-weight: 700;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    display: block;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-search-input-el {
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 700;
    color: #0b1e36;
    padding: 0;
    width: 100%;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-search-input-el::placeholder {
    color: #475569;
    font-weight: 700;
    opacity: 0.9;
}

.new-search-select-el {
    background: transparent;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 700;
    color: #0b1e36;
    padding: 0;
    width: 100%;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.new-search-divider {
    width: 1px;
    height: 44px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.dropdown-field {
    position: relative;
    padding-right: 54px;
}

.new-search-chevron {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.new-search-btn {
    height: 100%;
    background: #1c97d4;
    color: #ffffff;
    border: none;
    outline: none;
    padding: 0 45px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-search-btn:hover {
    background: #1282b8;
}

.new-search-btn .btn-arrow {
    font-size: 18px;
    transition: transform 0.2s;
}

.new-search-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Redesigned Cards Container */
.new-docked-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    width: 100%;
    max-width: 1260px;
    margin-top: 25px;
    position: relative;
    z-index: 20;
    transform: translateY(60px);
}

.new-docked-card {
    display: flex;
    align-items: flex-start;
    padding: 32px 36px;
    gap: 22px;
    background: #ffffff;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.new-docked-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    z-index: 2;
}

.new-docked-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e2e8f0;
}

.new-card-icon-square {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #006ba6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 107, 166, 0.25);
    transition: transform 0.3s ease;
}

.new-docked-card:hover .new-card-icon-square {
    transform: scale(1.08);
}

.new-card-info {
    display: flex;
    flex-direction: column;
}

.new-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #0b1e36;
    margin-bottom: 6px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-card-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 14px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-card-link {
    font-size: 12px;
    font-weight: 700;
    color: #1c97d4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s, transform 0.2s;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    margin-top: auto;
}

.new-card-link:hover {
    color: #004e75;
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .new-docked-cards-container {
        grid-template-columns: 1fr;
    }

    .new-docked-card:not(:last-child)::after {
        display: none;
    }

    .new-docked-card {
        border-bottom: 1px solid #e2e8f0;
    }

    .new-docked-card:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .new-hero-search-form {
        flex-direction: column;
        height: auto;
    }

    .new-search-field {
        width: 100%;
        padding: 20px 24px;
        height: auto;
    }

    .new-search-divider {
        width: 100%;
        height: 1px;
        background: #e2e8f0;
    }

    .new-search-btn {
        width: 100%;
        height: 60px;
        justify-content: center;
    }
}

/* Floating Emergency Action Button */
.floating-emergency-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    background-color: #D91C24;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(217, 28, 36, 0.4);
    z-index: 1000;
    transition: transform 0.3s, background-color 0.3s;
}

.floating-emergency-btn:hover {
    transform: scale(1.1);
    background-color: #b7141b;
}

.floating-emergency-btn svg {
    width: 24px;
    height: 24px;
}

/* About Us Section Styles */
.about-section {
    padding: 240px 0 100px 0;
    background: #ffffff;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-media-wrapper {
    position: relative;
    padding-right: 30px;
}

.about-img-box {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.about-img-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Floating Overlay Badge Card */
.about-overlay-card {
    position: absolute;
    bottom: -30px;
    right: -10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 246, 255, 0.95));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow);
    border-radius: 24px;
    padding: 24px;
    width: 220px;
    z-index: 2;
}

.overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.overlay-icon {
    width: 44px;
    height: 44px;
    background: #004e75;
    color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 800;
    font-size: 13px;
}

.overlay-badge-text {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #004e75;
    line-height: 1.3;
}

.overlay-since {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1c97d4;
}

.overlay-date {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #004e75;
    margin-bottom: 10px;
}

.overlay-quote {
    font-size: 11px;
    color: #475569;
    line-height: 1.4;
    font-weight: 500;
}

.about-content-box {
    padding-left: 20px;
}

.section-badge {
    display: inline-block;
    background: #EBF8FF;
    color: #1c97d4;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
}

.section-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #0b1e36;
    line-height: 1.2;
    margin-bottom: 20px;
}

.section-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
}


/* Redesigned About Section (Figma Update) */
.new-about-badge {
    display: inline-block;
    background: #EBF8FF;
    color: #1c97d4;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 20px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-transform: uppercase;
}

.new-about-badge::before {
    display: none;
}

.new-about-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #0b1e36;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.new-about-desc {
    font-size: 17px;
    color: black;
    line-height: 1.65;
    margin-bottom: 30px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0;
    margin-bottom: 0;
    gap: 0;
}

.new-about-stat-item {
    position: relative;
    text-align: center;
    padding: 0 28px;
}

.new-about-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #e3ebf2;
}

.new-about-stat-number {
    font-size: clamp(48px, 4.2vw, 64px);
    font-weight: 700;
    color: #004e75;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-stat-label {
    font-size: 17px;
    color: black;
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.4;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-stats-source {
    font-size: 12px;
    color: #8296ab;
    font-style: normal;
    margin-bottom: 35px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (max-width: 768px) {
    .new-about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 0;
    }

    .new-about-stat-item:nth-child(2)::after {
        display: none;
    }

    .new-about-stat-number {
        font-size: 42px;
    }
}

.new-about-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.new-about-btn-primary {
    background: #004e75;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, transform 0.2s;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-btn-primary:hover {
    background: #003652;
    transform: translateY(-1px);
}

.new-about-btn-secondary {
    background: transparent;
    color: #004e75;
    border: 1.5px solid #004e75;
    padding: 12.5px 26px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-btn-secondary:hover {
    background: #004e75;
    color: #ffffff;
    transform: translateY(-1px);
}

.new-about-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.new-about-main-img-box {
    width: 85%;
    height: 480px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    position: relative;
}

.new-about-main-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.new-about-badge-since {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    padding: 24px 28px;
    border-bottom-right-radius: 20px;
    z-index: 10;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-about-badge-year {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-badge-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.new-about-overlay-img-box {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 50%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    border: 6px solid #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.new-about-overlay-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .new-about-media-wrapper {
        min-height: 450px;
        margin-bottom: 40px;
    }

    .new-about-main-img-box {
        width: 100%;
        height: 400px;
    }

    .new-about-overlay-img-box {
        width: 45%;
        height: 200px;
        bottom: -20px;
    }
}

@media (max-width: 768px) {
    .new-about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .new-about-stat-item:nth-child(2n)::after {
        display: none;
    }

    .new-about-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .new-about-btn-primary,
    .new-about-btn-secondary {
        justify-content: center;
    }
}


/* Premium History Timeline Section styling */
.timeline-section {
    padding: 120px 0;
    background: #f8fafc;
    position: relative;
    overflow: hidden;
}

.timeline-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(28, 151, 212, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.timeline-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.timeline-header .section-badge {
    background: rgba(28, 151, 212, 0.08);
    color: #1c97d4;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 16px;
}

/* Premium Timeline Interactive Tabs layout */
.timeline-section {
    padding: 48px 0;
    /* background: #ffffff; */
    position: relative;
    overflow: hidden;
}

.timeline-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.timeline-header .section-badge {
    background: rgba(28, 151, 212, 0.08);
    color: #1c97d4;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 16px;
}

.timeline-header .section-title {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.timeline-header .section-desc {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
}

.premium-timeline-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Tabs Navigation styling */
.timeline-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 60px;
    padding: 0 40px;
}

.tabs-track-line {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    height: 3px;
    background: #edf2f7;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-tab-btn {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    outline: none;
}

.tab-year {
    font-size: 1rem;
    font-weight: 800;
    color: #a0aec0;
    transition: all 0.3s ease;
}

.tab-dot {
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 3px solid #cbd5e0;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 4px #ffffff;
}

.timeline-tab-btn:hover .tab-year {
    color: #004e75;
}

.timeline-tab-btn:hover .tab-dot {
    border-color: #1c97d4;
}

.timeline-tab-btn.active .tab-year {
    color: #1c97d4;
    transform: scale(1.15);
}

.timeline-tab-btn.active .tab-dot {
    background: #1c97d4;
    border-color: #1c97d4;
    box-shadow: 0 0 0 6px rgba(28, 151, 212, 0.2);
    transform: scale(1.2);
}

.timeline-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid var(--secondary-color);
    z-index: 10;
    animation: arrowFadeIn 0.3s ease forwards;
}

@keyframes arrowFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -5px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Detail Panels styling */
.timeline-panels {
    position: relative;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    padding: 40px;
    min-height: 200px;
    box-shadow: 0 10px 30px -10px rgba(11, 30, 54, 0.05);
}

.timeline-panel {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.timeline-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.panel-meta {
    font-size: 0.75rem;
    font-weight: 800;
    color: #1c97d4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #004e75;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.panel-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
}

/* Insurance Partners Section */
.insurance-section {
    padding: 80px 0;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.insurance-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    align-items: center;
}

.insurance-logo-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #475569;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s;
}

.insurance-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    border-color: #1c97d4;
}

/* Medical Specialties Section */
.departments-section {
    background: linear-gradient(rgb(11 30 54 / 46%), rgb(11 30 54 / 0%)), url(../assets/images/4-department.jpeg) no-repeat center center / cover;
    background-attachment: fixed;
    padding: 100px 0;
    color: #ffffff;
    position: relative;
}

.dept-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    gap: 30px;
}

.dept-header-area {
    text-align: left;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .dept-header-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.dept-header-area .section-title {
    color: #ffffff;
}

.dept-header-area .section-desc {
    color: rgba(255, 255, 255, 0.8);
}

.dept-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 45px;
}

.dept-card {
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.dept-card:hover {
    background: rgba(255, 255, 255);
    transform: translateY(-5px);
    /* border-color: rgba(255, 255, 255, 0.25); */
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
}

.dept-icon {
    /* Holds supplied icon artwork. A white chip sits behind it so the icons
       read cleanly whether their PNGs are transparent or ship a white ground,
       and so they hold up over the photographic section background. */
    width: 76px;
    height: 76px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    /* box-shadow: 0 8px 20px rgba(7, 22, 44, 0.12); */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dept-icon img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
}

.dept-card:hover .dept-icon {
    transform: translateY(-2px) scale(1.04);
    /* box-shadow: 0 12px 26px rgba(7, 22, 44, 0.18); */
}

@media (max-width: 640px) {
    .dept-icon {
        width: 64px;
        height: 64px;
    }
    .dept-icon img {
        width: 48px;
        height: 48px;
    }
}

.dept-name {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    line-height: normal;
}

.dept-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.dept-bottom-cta {
    text-align: center;
}

/* Extra Specialties Tags Styles */
.dept-extra-tags-container {
    margin-top: 60px;
    text-align: left;
    width: 100%;
}

.dept-extra-title {
    font-size: 25px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    display: block;
    margin-bottom: 20px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.dept-extra-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
}

.dept-tag-pill {
    flex: 1 1 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 999px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: all 0.25s ease;
    cursor: pointer;
}

.dept-tag-pill:hover {
    background: #ffffff;
    color: #004e75;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15);
}

/* Medical Team / Doctors Section */
.doctors-section {
    padding: 100px 0;
    background: #ffffff;
}

.doctors-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}



.doctors-top-right {
    max-width: 500px;
}

.doctors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.doctor-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: linear-gradient(180deg, transparent 50%, #C0DCFF 100%) !important;
    padding: 0 0 100px 0 !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 0px 16px -16px rgba(114, 180, 255, 0.75) !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    gap: 0 !important;
}

.doctor-card:hover {
    transform: translateY(-8px) !important;
    /* box-shadow: 0 28px 20px -20px rgba(112, 178, 255, 0.85) !important; */
    background: linear-gradient(180deg, transparent 50%, #B0D3FF 100%) !important;
    color: inherit !important;
}

.doctor-img-wrapper {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    height: 350px !important;
    width: 100% !important;
    overflow: hidden !important;
}

.doctor-img-wrapper img {
    height: 90% !important;
    width: 77% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.doctor-card:hover .doctor-img-wrapper img {
    transform: scale(1.06) !important;
}

.doctor-info-box {
    position: absolute !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 78, 117, 0.06) !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 10 !important;
}

.doctor-card:hover .doctor-info-box {
    box-shadow: 0 15px 35px rgba(0, 78, 117, 0.12) !important;
    transform: translateY(-4px) !important;
}

.doctor-details {
    width: 100%;
}

.doctor-name {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0b1e36;
    line-height: 1.25;
    margin-bottom: 5px;
}

.doctor-spec {
    font-size: 13px;
    color: #1c97d4;
    font-weight: 700;
    line-height: 1.45;
}

/* Card Button Group Actions */
.doctor-card-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

.doctor-btn-profile {
    flex: 1;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: #004e75 !important;
    border: 1px solid #004e75 !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.doctor-btn-profile:hover {
    background: #1c97d4 !important;
    border-color: #1c97d4 !important;
}

.doctor-btn-book {
    flex: 1;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}

.doctor-btn-book:hover {
    background: #e2e8f0 !important;
    color: #0b1e36 !important;
}

/* Health Checkup Banner Section */
.health-banner-section {
    background: linear-gradient(rgba(11, 30, 54, 0.45), rgba(11, 30, 54, 0.45)), url('../assets/images/health_checkup_bg.png') no-repeat center center/cover;
    padding: 120px 0;
    position: relative;
}

.health-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    padding: 45px;
    max-width: 540px;
    box-shadow: var(--shadow);
}

.health-card-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #004e75;
    line-height: 1.2;
    margin-bottom: 16px;
}

.health-card-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Patient Stories / Testimonials Section */
.testimonials-section {
    padding: 100px 0;
    background: #ffffff;
}

.testimonials-section .section-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 16px auto;
}

.testimonials-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: rgba(49, 130, 206, 0.2);
}

.testimonial-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.google-icon {
    width: 24px;
    height: 24px;
}

.star-rating {
    color: #FBBC05;
    font-size: 14px;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
    font-style: italic;
}

.testimonial-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #F1F5F9;
    padding-top: 16px;
    font-size: 12px;
}

.patient-name {
    font-weight: 700;
    color: #004e75;
}

.review-date {
    color: #94A3B8;
}

/* Insurance Partners Ticker */
.insurance-section {
    padding: 80px 0;
    background: #ffffff;
    border-top: 1px solid #E2E8F0;
    text-align: center;
}

.insurance-badge {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 700;
    color: #004e75;
    margin-bottom: 12px;
}

.insurance-title {
    font-size: 2.25rem;
    color: #002f4d;
    margin: 0 auto 48px;
    font-weight: 800;
}

.insurance-ticker-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 10px 0;
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.insurance-ticker-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: insuranceMarquee 30s linear infinite;
}

.insurance-ticker-track:hover {
    animation-play-state: paused;
}

.insurance-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 28px;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    min-width: 200px;
    cursor: pointer;
}

.insurance-card:hover {
    transform: translateY(-3px);
    background-color: #004e75;
    border-color: #004e75;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.insurance-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--badge-color);
    color: #ffffff;
    padding: 8px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.insurance-card:hover .insurance-icon-wrapper {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.2);
}

.insurance-icon {
    width: 100%;
    height: 100%;
}

.insurance-name {
    font-weight: 700;
    color: #1E293B;
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

.insurance-card:hover .insurance-name {
    color: #ffffff;
}

@keyframes insuranceMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Accreditations & Awards Section */
.awards-section {
    padding: 100px 0;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
}

.awards-layout {
    display: grid;
    grid-template-columns: 1fr 3.2fr;
    gap: 40px;
    align-items: center;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.award-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s;
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: rgba(49, 130, 206, 0.3);
}

.award-badge-icon {
    width: 100%;
    height: 120px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.award-badge-icon img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.award-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #004e75;
    margin-bottom: 8px;
}

.award-desc {
    font-size: 11px;
    color: black;
    line-height: 1.4;
    margin-bottom: 12px;
}

.award-year {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--card-title-color);
}

/* Footer Section Styles */
.site-footer {
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.93), rgba(0, 78, 117, 0.93)) !important;
    color: #ffffff;
    padding: 80px 0 30px 0;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.site-footer .nav-brand {
    margin-bottom: 20px;
}

.site-footer .brand-logo-badge {
    background: #ffffff;
}

.footer-desc {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 25px;
    margin-right: 150px;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s;
}

.social-icon:hover {
    background: #1c97d4;
    transform: translateY(-2px);
}

.footer-title-bar {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    border-left: 3px solid #1c97d4;
    padding-left: 18px;
    margin-bottom: 24px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 13px;
    color: #94A3B8;
    transition: color 0.3s;
    text-transform: uppercase;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 2px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.5;
}

.contact-item svg {
    width: 18px;
    height: 18px;
    color: #1c97d4;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-item a {
    color: #94A3B8;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748B;
}

/* Responsive Custom Rules */
@media (max-width: 1024px) {
    .navbar {
        width: 95%;
    }

    .nav-menu {
        gap: 15px;
    }

    .hero-title {
        font-size: 48px;
    }

    .docked-glass-card {
        grid-template-columns: 1fr;
    }

    .docked-item:not(:last-child)::after {
        display: none;
    }

    .about-grid,
    .awards-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .dept-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .doctors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid,
    .awards-grid {
        grid-template-columns: 1fr;
    }

    .insurance-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .top-header-right {
        display: none;
    }

    .nav-menu {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    .hero-title {
        font-size: 38px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dept-grid,
    .insurance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .doctors-grid {
        grid-template-columns: 1fr;
    }
}

/*==================================================
EMERGENCY CARE SECTION
==================================================*/
.emergency-section {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.93), rgba(0, 78, 117, 0.93)), url(../assets/images/ambulance.png) no-repeat center center / cover;
    color: #ffffff;
    overflow: hidden;
}

.emergency-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 20%, rgba(28, 151, 212, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.emergency-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.emergency-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.emergency-badge {
    display: inline-block;
    background: #EBF8FF;
    color: #1c97d4;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.emergency-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.emergency-desc {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 35px;
    max-width: 500px;
}

.emergency-actions {
    display: flex;
    gap: 16px;
    width: 100%;
}

.btn-emergency-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e11d48;
    color: #ffffff;
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4);
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.btn-emergency-call:hover {
    background: #be123c;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.6);
}

.btn-emergency-guide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 14px 28px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.btn-emergency-guide:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* Translucent Hotline Card */
.emergency-hotline-card {
    background: #0b1e36;
    border: 1px solid rgba(225, 29, 72, 0.4);
    border-radius: 12px;
    padding: 18px 24px;
    margin-bottom: 32px;
    display: inline-block;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.emergency-hotline-header {
    font-size: 11px;
    font-weight: 700;
    color: #fda4af;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.emergency-hotline-dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    display: inline-block;
    animation: hotlinePulse 1.5s infinite ease-in-out;
}

@keyframes hotlinePulse {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.6;
    }
}

.emergency-hotline-number {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    display: block;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.emergency-hotline-number:hover {
    color: #1c97d4;
}

/* Right Column Features List */
.emergency-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.emergency-list-item {
    display: flex;
    gap: 20px;
    align-items: center;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px 24px;
    transition: all 0.3s ease;
}

.emergency-list-item:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(28, 151, 212, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.emergency-list-icon {
    width: 44px;
    height: 44px;
    background: rgba(28, 151, 212, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.emergency-list-item:hover .emergency-list-icon {
    background: #1c97d4;
}

.emergency-list-text {
    display: flex;
    flex-direction: column;
}

.emergency-list-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
}

.emergency-list-desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .emergency-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .emergency-title {
        font-size: 38px;
    }
}

@media (max-width: 575px) {
    .emergency-grid {
        grid-template-columns: 1fr;
    }

    .emergency-actions {
        flex-direction: column;
    }
}

/*==================================================
MAP SECTION
==================================================*/
.map-section {
    padding: 100px 0;
    background: #ffffff;
}

.map-layout-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

.map-info-col {
    display: flex;
    flex-direction: column;
}

.map-info-col .section-badge {
    align-self: flex-start;
    margin-bottom: 20px;
}

.map-info-col .section-title {
    margin-bottom: 16px;
}

.map-info-col .section-desc {
    margin-bottom: 30px;
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}

.map-divider {
    width: 100%;
    height: 1px;
    background: #e4edf3;
    margin-bottom: 30px;
}

.map-details-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.map-details-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.map-details-icon {
    width: 36px;
    height: 36px;
    background: #EBF8FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c97d4;
    flex-shrink: 0;
}

.map-details-content {
    display: flex;
    flex-direction: column;
}

.map-details-label {
    font-size: 10px;
    font-weight: 700;
    color: #1c97d4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.map-details-value {
    font-size: 14.5px;
    font-weight: 500;
    color: #334155;
    line-height: 1.5;
}

.map-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.map-link:hover {
    color: #1c97d4;
}

.map-action-row {
    display: flex;
    gap: 16px;
}

.btn-location-directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #004e75;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: all 0.25s ease;
}

.btn-location-directions:hover {
    background: #003a58;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 78, 117, 0.2);
}

.btn-location-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e2e8f0;
    background: transparent;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: all 0.25s ease;
}

.btn-location-review:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0b1e36;
    transform: translateY(-2px);
}

.map-layout-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

.map-visual-col {
    width: 100%;
    display: flex;
}

.map-frame-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e4edf3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
}

.map-frame-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
}

@media (max-width: 1024px) {
    .map-layout-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
        align-items: stretch;
    }

    .map-frame-wrapper iframe {
        min-height: 450px;
    }
}

/* ==========================================
   MEGA MENU SUBMENU DROPDOWN
   ========================================== */
.megamenu-item {
    position: relative;
}

.megamenu-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 92vw;
    max-width: 1140px;
    background: #004e75;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(4, 18, 33, 0.5);
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

.megamenu-item:hover .megamenu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.megamenu-container {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}

.megamenu-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #1c97d4;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: block;
}

.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.megamenu-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px 18px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /* Flex/grid children default to min-width:auto, which lets a long word
       widen the track. Keep the card inside its column and wrap instead. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Description and title must wrap rather than widen the card. */
.megamenu-card .card-desc,
.megamenu-card .card-title-wrap {
    min-width: 0;
}

/* The keyword chips wrap onto a second line instead of pushing sideways. */
.megamenu-card .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.megamenu-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #1c97d4;
    transform: translateY(-2px);
}

.card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.card-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon-box.pink {
    background: rgba(236, 72, 153, 0.18);
    color: #f472b6;
}

.card-icon-box.purple {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
}

.card-icon-box.blue {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.card-icon-box.cyan {
    background: rgba(6, 182, 212, 0.18);
    color: #22d3ee;
}

.card-icon-box.orange {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;
}

.card-icon-box.green {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

.card-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.card-title-wrap h4 {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.card-title-wrap .arrow {
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    font-weight: bold;
}

.megamenu-card:hover .card-title-wrap .arrow {
    color: #1c97d4;
    transform: translateX(4px);
}

.card-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.35;
    margin-bottom: 12px;
    flex-grow: 1;
}

.card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.card-tags span {
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    padding: 2px 10px;
    border-radius: 999px;
}

/* Mega Menu Right Card */
.megamenu-right {
    display: flex;
}

.megamenu-image-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.megamenu-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(4, 18, 33, 0.95));
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.img-card-overlay h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.img-card-overlay p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 12px;
}

@media (max-width: 991px) {
    .megamenu-panel {
        display: none;
    }
}

/* 


/* ==================================================
   SUBPAGES LEGACY SYSTEM (SCOPED UNDER .subpage)
   ================================================== */
/* ==========================================
   DESIGN SYSTEM & CSS CUSTOM PROPERTIES
   ========================================== */
:root {
    /* Scoped Subpage Variables mapped to main theme variables */
    --primary-color: var(--primary-navy);
    --primary-light: var(--slate-blue-light);
    --primary-dark: var(--slate-blue-dark);
    --secondary-color: var(--accent-blue-bright);
    --secondary-rgb: 28, 151, 212;
    --accent-color: var(--danger);

    /* Neutral Colors */
    --text-main: var(--text-dark);
    --text-muted: var(--text-body);
    --bg-light: var(--bg-light);
    --bg-white: #ffffff;
    --bg-dark: var(--primary-navy-dark);

    /* Typography */
    --font-primary: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Spacing & Layout */
    --container-width: 1240px;
    --section-padding: 90px;

    /* Shadows */
    --shadow-sm: var(--shadow);
    --shadow-md: var(--shadow);
    --shadow-lg: var(--shadow);
    --shadow-glass: var(--shadow);

    /* Transitions & Radii */
    --radius-sm: var(--radius);
    --radius-md: var(--radius);
    --radius-lg: var(--radius-lg);
    --radius-pill: 9999px;
    --transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.subpage {


    /* ==========================================
   RESET & BASE STYLES
   ========================================== */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
        font-size: 16px;
    }

    body {
        font-family: var(--font-primary);
        background-color: var(--bg-white);
        color: var(--text-main);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

    .container {
        width: 100%;
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 0 24px;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    a {
        text-decoration: none;
        color: inherit;
        transition: var(--transition);
    }

    ul {
        list-style: none;
    }

    /* ==========================================
   REUSABLE COMPONENTS & UTILITIES
   ========================================== */
    .section-padding {
        padding: var(--section-padding) 0;
    }

    .grid {
        display: grid;
        gap: 40px;
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }


    .text-center {
        text-align: center;
    }

    /* Section Title System */
    .section-tag {
        display: inline-block;
        background: rgba(0, 139, 248, 0.08);
        color: var(--secondary-color);
        padding: 6px 16px;
        border-radius: var(--radius-pill);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        margin-bottom: 18px;
        text-transform: uppercase;
    }

    .section-tag.tag-center {
        margin: 0 auto 18px auto;
    }

    .section-tag.tag-white {
        background: rgba(255, 255, 255, 0.15);
        color: var(--bg-white);
    }

    .section-title {
        /* font-size: clamp(2rem, 3.5vw, 2.5rem); */
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1.25;
        margin-bottom: 22px;
        letter-spacing: -0.5px;
    }

    .text-white,
    .section-title.text-white,
    h1.text-white,
    h2.text-white,
    h3.text-white {
        color: #ffffff !important;
    }

    .text-white-muted,
    .section-desc.text-white-muted,
    p.text-white-muted {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .section-desc {
        font-size: 1.05rem;
        color: var(--text-muted);
        margin-bottom: 35px;
        max-width: 600px;
        line-height: 1.65;
    }


    /* Premium Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: var(--font-primary);
        font-weight: 700;
        font-size: 0.9rem;
        padding: 12px 24px;
        border-radius: var(--radius-sm);
        border: none;
        cursor: pointer;
        transition: var(--transition);
    }

    .btn-pill {
        border-radius: var(--radius-pill);
        padding: 12px 28px;
    }

    .btn-primary {
        background: var(--primary-color);
        color: var(--bg-white);
    }

    .btn-primary:hover {
        background: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: var(--bg-white);
        color: var(--primary-color);
        border-radius: 50%;
        transition: var(--transition);
    }

    .btn-primary:hover .btn-icon {
        background: var(--secondary-color);
        color: var(--bg-white);
    }

    .btn-dark {
        background: var(--primary-color);
        color: var(--bg-white);
    }

    .btn-dark:hover {
        background: var(--primary-dark);
    }

    .btn-secondary-outline {
        background: transparent;
        color: var(--bg-white);
        border: 1.5px solid rgba(255, 255, 255, 0.3);
    }

    .btn-secondary-outline:hover {
        background: var(--bg-white);
        color: var(--primary-color);
        border-color: var(--bg-white);
        transform: translateY(-2px);
    }

    .btn-secondary-outline:hover .btn-icon {
        background: var(--primary-color);
        color: var(--bg-white);
    }

    /* ==========================================
   HEADER SECTION
   ========================================== */
    /* ==========================================
   HEADER - PREMIUM V1
   ========================================== */

    @keyframes headerAccentSlide {
        from {
            transform: scaleX(0);
        }

        to {
            transform: scaleX(1);
        }
    }

    .site-header {
        position: relative;
        z-index: 200;
    }

    /* Top Utility Bar */
    .top-bar {
        background: linear-gradient(90deg, #020d1a 0%, #041525 50%, #020d1a 100%);
        color: rgba(255, 255, 255, 0.78);
        padding: 9px 0;
        font-size: 0.8rem;
        font-weight: 500;
        border-bottom: 1px solid rgba(0, 139, 248, 0.12);
        letter-spacing: 0.01em;
    }

    .top-bar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top-bar-left,
    .top-bar-right {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .contact-link {
        display: flex;
        align-items: center;
        gap: 7px;
        color: rgba(255, 255, 255, 0.7);
        transition: var(--transition);
    }

    .contact-link:hover {
        color: var(--secondary-color);
    }

    .emergency-link {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ff4d4d;
        font-weight: 700;
        letter-spacing: 0.02em;
        background: rgba(209, 18, 44, 0.1);
        border: 1px solid rgba(209, 18, 44, 0.25);
        padding: 3px 12px 3px 8px;
        border-radius: var(--radius-pill);
        transition: var(--transition);
    }

    .emergency-link:hover {
        background: rgba(209, 18, 44, 0.18);
        border-color: rgba(209, 18, 44, 0.45);
        color: #ff6666;
    }

    .emergency-badge {
        width: 8px;
        height: 8px;
        background: #ff3b30;
        border-radius: 50%;
        display: inline-block;
        animation: pulse 1.5s infinite;
        box-shadow: 0 0 6px rgba(255, 59, 48, 0.6);
    }

    .lang-btn {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        padding: 4px 14px;
        border-radius: var(--radius-pill);
        transition: var(--transition);
        text-decoration: none;
    }

    .lang-btn:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.28);
    }

    .divider {
        opacity: 0.2;
        font-size: 1rem;
    }

    /* ── Main Navigation Bar ── */
    .main-navbar {
        background: var(--bg-white);
        padding: 0;
        box-shadow: 0 4px 32px rgba(6, 29, 51, 0.07);
        transition: var(--transition);
        position: relative;
    }

    .main-navbar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
        opacity: 0.4;
    }

    .navbar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
    }

    .logo-area {
        text-decoration: none;
    }

    .logo-wrapper {
        display: flex;
        align-items: center;
        gap: 14px;
        transition: var(--transition);
    }

    .logo-wrapper:hover {
        opacity: 0.88;
    }

    .hospital-logo {
        filter: drop-shadow(0 4px 12px rgba(0, 139, 248, 0.2));
        transition: var(--transition);
    }

    .logo-wrapper:hover .hospital-logo {
        filter: drop-shadow(0 6px 18px rgba(0, 139, 248, 0.35));
    }

    .logo-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .logo-title {
        font-size: 1.65rem;
        font-weight: 900;
        color: var(--primary-color);
        line-height: 1;
        letter-spacing: -1px;
    }

    .logo-subtitle {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        color: var(--primary-color);
        opacity: 0.85;
    }

    .logo-tagline {
        font-size: 0.56rem;
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    /* Nav Links */
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .nav-item {
        position: relative;
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--primary-color);
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 4px;
        border-radius: var(--radius-sm);
        transition: var(--transition);
    }

    .nav-item::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 14px;
        right: 14px;
        height: 2px;
        background: var(--secondary-color);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .nav-item:hover,
    .nav-item.active {
        color: var(--secondary-color);
        background: rgba(0, 139, 248, 0.05);
    }

    .nav-item.active::after,
    .nav-item:hover::after {
        transform: scaleX(1);
    }

    /* Dark Header Navbar */
    .main-navbar.dark-header {
        background: var(--primary-color);
        box-shadow: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .main-navbar.dark-header::after {
        background: linear-gradient(90deg, transparent, rgba(0, 139, 248, 0.5), transparent);
        opacity: 1;
    }

    .main-navbar.dark-header .logo-title {
        color: #ffffff;
    }

    .main-navbar.dark-header .logo-subtitle {
        color: rgba(255, 255, 255, 0.82);
    }

    .main-navbar.dark-header .logo-tagline {
        color: rgba(255, 255, 255, 0.45);
    }

    .main-navbar.dark-header .hospital-logo circle {
        stroke: rgba(255, 255, 255, 0.7);
    }

    .main-navbar.dark-header .hospital-logo path {
        stroke: #ffffff;
    }

    .main-navbar.dark-header .nav-item {
        color: rgba(255, 255, 255, 0.8);
    }

    .main-navbar.dark-header .nav-item:hover,
    .main-navbar.dark-header .nav-item.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
    }

    .main-navbar.dark-header .nav-item::after {
        background: var(--secondary-color);
    }

    .main-navbar.dark-header .nav-item svg {
        color: rgba(255, 255, 255, 0.7);
    }

    .main-navbar.dark-header .menu-toggle span {
        background: #ffffff;
    }

    .nav-item .chevron {
        transition: var(--transition);
    }

    .nav-item:hover .chevron {
        transform: translateY(2px);
    }

    /* CTA Button */
    .navbar-actions {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .btn.btn-primary.btn-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, var(--secondary-color) 0%, #0069cc 100%);
        color: #ffffff;
        font-weight: 700;
        font-size: 0.88rem;
        padding: 11px 24px;
        border-radius: var(--radius-pill);
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: var(--transition);
        box-shadow: 0 6px 22px rgba(0, 139, 248, 0.38);
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    .btn.btn-primary.btn-pill:hover {
        background: linear-gradient(135deg, #0076d6 0%, #0058b0 100%);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 139, 248, 0.52);
        color: #ffffff;
    }

    /* Hamburger */
    .menu-toggle {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .menu-toggle span {
        width: 100%;
        height: 2px;
        background: var(--primary-color);
        border-radius: 2px;
        transition: var(--transition);
    }

    /* ==========================================
   HERO SECTION
   ========================================== */
    .hero-section {
        background: linear-gradient(to right, rgba(4, 18, 33, 0.96) 38%, rgba(4, 18, 33, 0.7) 65%, rgba(4, 18, 33, 0.2) 100%), url('assets/hero_doctors.png');
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
        padding: 100px 0 185px 0;
        position: relative;
        overflow: visible;
    }

    .hero-grid {
        display: flex;
        align-items: center;
    }

    .hero-content {
        max-width: 620px;
        width: 100%;
    }


    .hero-search-wrapper {
        margin-bottom: 44px;
    }

    .hero-search-form {
        display: flex;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        padding: 6px;
        border-radius: var(--radius-pill);
        box-shadow: 0 12px 35px rgba(4, 18, 33, 0.3);
        max-width: 480px;
    }

    .search-input-group {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-grow: 1;
        padding-left: 16px;
    }

    .search-icon {
        color: rgba(255, 255, 255, 0.5);
    }

    .hero-search-form input {
        border: none;
        outline: none;
        width: 100%;
        font-family: var(--font-primary);
        font-size: 0.95rem;
        font-weight: 500;
        background: transparent;
        color: #ffffff;
    }

    .hero-search-form input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .hero-search-form .btn-dark {
        border-radius: var(--radius-pill);
        padding: 10px 26px;
        background: var(--secondary-color);
        color: #ffffff;
        border: none;
        cursor: pointer;
        font-weight: 600;
    }

    .hero-search-form .btn-dark:hover {
        background: #0076d6;
    }

    .hero-title {
        font-size: clamp(2.75rem, 5.5vw, 3.75rem);
        font-weight: 800;
        line-height: 1.15;
        color: #ffffff;
        margin-bottom: 24px;
        letter-spacing: -1px;
    }

    .hero-desc {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.75);
        max-width: 540px;
        line-height: 1.65;
    }


    .hero-visual {
        position: relative;
        display: flex;
        justify-content: flex-end;
    }

    .hero-image-container {
        position: relative;
        width: 100%;
        max-width: 480px;
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .hero-image-container::after {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: radial-gradient(circle at 50% 50%, rgba(6, 29, 51, 0) 30%, var(--primary-color) 88%);
        pointer-events: none;
        transition: var(--transition);
    }

    .hero-image-container:hover::after {
        background: radial-gradient(circle at 50% 50%, rgba(6, 29, 51, 0) 35%, var(--primary-color) 85%);
    }



    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.02);
        transition: var(--transition);
    }

    .hero-image-container:hover .hero-image {
        transform: scale(1.04);
    }

    /* Glassmorphism Panel at bottom of Hero */
    .quick-links-container {
        position: absolute;
        bottom: -64px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        width: 100%;
    }

    .quick-links-panel {
        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-glass);
        padding: 16px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .quick-link-card {
        background: rgba(255, 255, 255, 0.7);
        border-radius: var(--radius-md);
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 18px;
        transition: var(--transition);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .quick-link-card:hover {
        background: var(--bg-white);
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .card-icon-wrapper {
        background: rgba(0, 139, 248, 0.08);
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: var(--transition);
    }

    .quick-link-card:hover .card-icon-wrapper {
        background: var(--primary-color);
    }

    .quick-link-card:hover .card-icon-wrapper svg {
        stroke: var(--bg-white);
    }

    .card-text-content {
        flex-grow: 1;
    }

    .card-text-content h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 4px;
    }

    .card-text-content p {
        font-size: 0.85rem;
        color: var(--text-muted);
        line-height: 1.35;
    }

    .card-arrow {
        width: 32px;
        height: 32px;
        background: var(--bg-white);
        color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        box-shadow: var(--shadow-sm);
        flex-shrink: 0;
    }

    .quick-link-card:hover .card-arrow {
        background: var(--primary-color);
        color: var(--bg-white);
        transform: translateX(4px);
    }

    /* Sticky Emergency Button */
    .sticky-side-button {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 999;
    }

    .floating-action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: var(--accent-color);
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(209, 18, 44, 0.4);
        transition: var(--transition);
    }

    .floating-action:hover {
        transform: scale(1.1) rotate(15deg);
        box-shadow: 0 6px 24px rgba(209, 18, 44, 0.5);
    }

    /* ==========================================
   ABOUT US SECTION
   ========================================== */
    .about-section {
        background: var(--bg-white);
        padding-top: 150px;
        /* Space for hero panel overlay */
    }

    .about-visual {
        position: relative;
    }

    .about-image-container {
        position: relative;
        border-radius: var(--radius-lg);
        overflow: visible;
    }

    .about-image {
        width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    /* Floating Badge Card on Image */
    .about-glass-badge {
        position: absolute;
        bottom: -30px;
        right: -30px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-glass);
        padding: 24px;
        width: 260px;
        transition: var(--transition);
    }

    .about-image-container:hover .about-glass-badge {
        transform: translateY(-5px);
    }

    .badge-header {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .badge-title {
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--primary-color);
        display: block;
    }

    .badge-subtitle {
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--secondary-color);
        display: block;
    }

    .badge-divider {
        height: 1.5px;
        background: rgba(6, 29, 51, 0.08);
        margin: 16px 0;
    }

    .badge-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .since-label {
        font-size: 0.6rem;
        color: var(--text-muted);
        font-weight: 700;
    }

    .since-date {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary-color);
        letter-spacing: -0.5px;
    }

    .badge-text {
        font-size: 0.8rem;
        color: var(--text-muted);
        font-weight: 600;
        margin-top: 4px;
    }

    .about-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* ==========================================
   STATISTICS SECTION
   ========================================== */
    .stats-section {
        background: var(--bg-light);
        padding: 60px 0;
        border-top: 1px solid rgba(6, 29, 51, 0.03);
        border-bottom: 1px solid rgba(6, 29, 51, 0.03);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        text-align: center;
        gap: 30px;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .stat-number {
        font-size: clamp(2.25rem, 4.5vw, 3.25rem);
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1;
        letter-spacing: -1px;
    }

    .stat-label {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    /* ==========================================
   SPECIALTIES SECTION (DEPARTMENTS)
   ========================================== */
    .specialties-section {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: relative;
    }

    .specialties-header {
        text-align: center;
        margin-bottom: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .specialties-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        margin-bottom: 50px;
    }

    .specialty-card {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-md);
        padding: 32px 24px;
        text-align: center;
        color: var(--bg-white);
        transition: var(--transition);
    }

    .specialty-card:hover {
        background: var(--bg-white);
        color: var(--primary-color);
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
        border-color: var(--bg-white);
    }

    .specialty-icon {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        transition: var(--transition);
    }

    .specialty-card:hover .specialty-icon {
        background: rgba(0, 139, 248, 0.08);
        color: var(--secondary-color);
    }

    .specialty-card h3 {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .specialty-card p {
        font-size: 0.85rem;
        opacity: 0.8;
    }

    .specialty-card:hover p {
        color: var(--text-muted);
    }

    .specialties-action {
        text-align: center;
    }

    /* ==========================================
   MEDICAL TEAM (DOCTORS)
   ========================================== */
    .team-section {
        background: var(--bg-white);
    }

    .team-header-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 40px;
        margin-bottom: 60px;
        align-items: flex-end;
    }

    .team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-bottom: 50px;
    }

    .doctor-card {
        background: #edf5ff;
        border-radius: var(--radius-md);
        overflow: hidden;
        position: relative;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
    }

    .doctor-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    .doctor-image-wrapper {
        width: 100%;
        height: 330px;
        overflow: hidden;
        background: #d4e7ff;
    }

    .doctor-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: var(--transition);
    }

    .doctor-card:hover .doctor-img {
        transform: scale(1.04);
    }

    .doctor-info-box {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: -30px 16px 16px 16px;
        position: relative;
        z-index: 5;
        box-shadow: var(--shadow-sm);
        border: 1px solid rgba(6, 29, 51, 0.04);
    }

    .info-content h3 {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 2px;
    }

    .info-content p {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 600;
    }

    .doctor-arrow {
        width: 32px;
        height: 32px;
        background: var(--bg-light);
        color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
    }

    .doctor-card:hover .doctor-arrow {
        background: var(--primary-color);
        color: var(--bg-white);
    }

    .team-action {
        text-align: center;
    }

    /* ==========================================
   CTA SECTION
   ========================================== */
    .cta-section {
        background-size: cover;
        background-position: center;
        padding: 110px 0;
        position: relative;
    }

    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(6, 29, 51, 0.55) 0%, rgba(0, 139, 248, 0.25) 100%);
    }

    .cta-container {
        position: relative;
        z-index: 5;
    }

    .cta-glass-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-glass);
        padding: 48px;
        max-width: 480px;
    }

    .cta-glass-card h2 {
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .cta-glass-card p {
        font-size: 1.05rem;
        color: var(--text-muted);
        margin-bottom: 28px;
    }

    /* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
    .testimonials-section {
        background: var(--bg-light);
    }

    .testimonials-header {
        margin-bottom: 60px;
    }

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .testimonial-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 36px;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .testimonial-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .stars {
        color: #fbbc05;
        font-size: 1.1rem;
        letter-spacing: 2px;
    }

    .testimonial-text {
        font-size: 0.95rem;
        color: var(--text-muted);
        font-style: italic;
        line-height: 1.6;
        margin-bottom: 30px;
        flex-grow: 1;
    }

    .testimonial-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid rgba(6, 29, 51, 0.05);
        padding-top: 18px;
    }

    .patient-name {
        font-weight: 700;
        color: var(--primary-color);
        font-size: 0.95rem;
    }

    .testimonial-date {
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    /* ==========================================
   ACCREDITATIONS SECTION
   ========================================== */
    .accreditations-section {
        background: var(--bg-white);
    }

    .accreditations-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .accreditations-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .accreditation-card {
        background: var(--bg-white);
        border: 1px solid rgba(6, 29, 51, 0.06);
        border-radius: var(--radius-md);
        padding: 32px 24px;
        text-align: center;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .accreditation-card:hover {
        border-color: var(--secondary-color);
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
    }

    .accreditation-icon-wrapper {
        width: 80px;
        height: 80px;
        background: #edf5ff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        transition: var(--transition);
    }

    .accreditation-card:hover .accreditation-icon-wrapper {
        background: var(--primary-color);
    }

    .accreditation-card:hover .accreditation-icon-wrapper svg {
        stroke: var(--bg-white);
    }

    .accreditation-card h3 {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 12px;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .accreditation-card p {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-bottom: 16px;
        line-height: 1.45;
    }

    .since-tag {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--secondary-color);
    }

    /* ==========================================
   FOOTER SECTION - PREMIUM V1
   ========================================== */
    .site-footer {
        background: #020b14;
        color: rgba(255, 255, 255, 0.72);
        padding: 85px 0 0 0;
        border-top: 2px solid rgba(0, 139, 248, 0.15);
        position: relative;
    }

    .site-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 139, 248, 0.4), transparent);
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 1.3fr 0.7fr 0.8fr 1.2fr;
        gap: 48px;
        margin-bottom: 60px;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .logo-area.light .logo-title {
        color: var(--bg-white);
    }

    .footer-about {
        font-size: 0.88rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.65);
    }

    .footer-tagline {
        font-size: 0.88rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.6);
    }

    .footer-social {
        display: flex;
        gap: 10px;
    }

    .social-btn {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        transition: var(--transition);
    }

    .social-btn:hover {
        background: linear-gradient(135deg, var(--secondary-color), #0069cc);
        color: #ffffff;
        border-color: var(--secondary-color);
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 139, 248, 0.3);
    }

    .footer-col-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--bg-white);
        letter-spacing: 1px;
        position: relative;
        padding-bottom: 12px;
    }

    .footer-col-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 25px;
        height: 2px;
        background: linear-gradient(90deg, var(--secondary-color), var(--teal));
        border-radius: 1px;
    }

    .footer-link-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .footer-link-list a {
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.6);
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
    }

    .footer-link-list a:hover {
        color: #ffffff;
        transform: translateX(4px);
    }

    .footer-address {
        font-style: normal;
        display: flex;
        flex-direction: column;
        gap: 14px;
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.6);
    }

    .footer-address p {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-address svg {
        color: var(--secondary-color);
        flex-shrink: 0;
        margin-top: 3px;
    }

    .footer-emergency-block {
        margin-top: 5px;
    }

    .emergency-cta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: rgba(209, 18, 44, 0.08);
        border: 1px solid rgba(209, 18, 44, 0.25);
        padding: 12px 20px;
        border-radius: var(--radius-md);
        color: #ffffff;
        text-decoration: none;
        transition: var(--transition);
    }

    .emergency-cta:hover {
        background: rgba(209, 18, 44, 0.16);
        border-color: rgba(209, 18, 44, 0.45);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(209, 18, 44, 0.25);
    }

    .emergency-dot {
        width: 10px;
        height: 10px;
        background: #d1122c;
        border-radius: 50%;
        animation: pulse 1.5s infinite;
        box-shadow: 0 0 8px #d1122c;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 24px 0;
        margin-top: 40px;
    }

    .footer-bottom-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.45);
    }

    .footer-legal-links {
        display: flex;
        gap: 24px;
    }

    .footer-legal-links a {
        color: rgba(255, 255, 255, 0.45);
        transition: var(--transition);
    }

    .footer-legal-links a:hover {
        color: #ffffff;
    }

    .footer-links a {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .footer-links a:hover {
        color: var(--secondary-color);
        padding-left: 4px;
    }

    .footer-contact {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .footer-contact li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 0.9rem;
    }

    .footer-contact svg {
        color: var(--secondary-color);
        flex-shrink: 0;
        margin-top: 3px;
    }

    .footer-contact a:hover {
        color: var(--secondary-color);
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 24px 0;
        font-size: 0.85rem;
    }

    .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-bottom-links {
        display: flex;
        gap: 24px;
    }

    .footer-bottom-links a:hover {
        color: var(--secondary-color);
    }

    /* ==========================================
   ANIMATIONS
   ========================================== */
    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
        }
    }

    /* ==========================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================== */

    /* Tablet (1024px) */
    @media (max-width: 1024px) {
        :root {
            --section-padding: 70px;
        }

        .hero-grid {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 30px;
        }

        .hero-search-form {
            margin: 0 auto 30px auto;
        }

        .hero-visual {
            justify-content: center;
        }

        .quick-links-container {
            position: relative;
            bottom: 0;
            transform: none;
            left: 0;
            margin-top: 40px;
            padding: 0;
        }

        .quick-links-panel {
            grid-template-columns: 1fr;
        }

        .about-section {
            padding-top: var(--section-padding);
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }

        .specialties-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .team-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
        }

        .accreditations-grid {
            grid-template-columns: 1fr;
        }

        .footer-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Mobile & Small Tablets (768px) */
    @media (max-width: 768px) {
        .nav-menu-wrapper {
            position: fixed;
            top: 104px;
            left: -100%;
            width: 100%;
            height: calc(100vh - 104px);
            background: var(--bg-white);
            z-index: 99;
            transition: var(--transition);
            box-shadow: var(--shadow-lg);
        }

        .nav-menu-wrapper.active {
            left: 0;
        }

        .nav-menu {
            flex-direction: column;
            padding: 40px 24px;
            align-items: flex-start;
            gap: 20px;
        }

        .menu-toggle {
            display: flex;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: translateY(7.5px) rotate(45deg);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

        .grid-2 {
            grid-template-columns: 1fr;
        }

        .about-visual {
            margin-bottom: 40px;
        }

        .about-glass-badge {
            right: 0;
            bottom: -20px;
        }

        .specialties-grid {
            grid-template-columns: repeat(2, 1fr);
        }

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

        .cta-glass-card {
            padding: 32px;
            margin: 0 16px;
        }

        .footer-bottom-content {
            flex-direction: column;
            gap: 16px;
            text-align: center;
        }
    }

    /* Small Mobile (480px) */
    @media (max-width: 480px) {
        .top-bar-left {
            display: none;
        }

        .top-bar-content {
            justify-content: center;
        }

        .specialties-grid {
            grid-template-columns: 1fr;
        }

        .team-grid {
            grid-template-columns: 1fr;
        }

        .footer-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================
   FIND A DOCTOR PAGE CUSTOM STYLES
   ========================================== */
    .search-hero-section {
        background-size: cover;
        background-position: center;
        padding: 100px 0 120px 0;
        position: relative;
    }

    .search-hero-content {
        margin-top: 50px;
        max-width: 1000px;
    }

    /* Filter bar */
    .filter-bar-wrapper {
        margin-top: 36px;
        background: var(--bg-white);
        padding: 8px 12px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .doctor-filter-form {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 16px;
    }

    .filter-input-group {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        position: relative;
    }

    .filter-input-group.search-input {
        flex: 1.5;
        padding-left: 12px;
    }

    .filter-input-group input {
        border: none;
        outline: none;
        width: 100%;
        font-family: var(--font-primary);
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--text-main);
    }

    .filter-divider {
        width: 1px;
        height: 32px;
        background: rgba(6, 29, 51, 0.08);
    }

    .filter-input-group.select-input {
        cursor: pointer;
    }

    .filter-input-group.select-input select {
        border: none;
        outline: none;
        width: 100%;
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: 0.92rem;
        background: transparent;
        appearance: none;
        padding-right: 24px;
        color: var(--text-main);
        cursor: pointer;
    }

    .chevron-select {
        position: absolute;
        right: 8px;
        pointer-events: none;
        color: var(--text-muted);
    }

    .filter-submit-btn {
        border-radius: var(--radius-sm);
        padding: 12px 36px;
        flex-shrink: 0;
    }

    /* Listings */
    .doctor-listing-section {
        background: #f4f8fc;
    }

    .doctor-listing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Normalize premium doctor cards on all subpages to match home page exactly */
    .subpage .doctor-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: linear-gradient(180deg, transparent 50%, #C0DCFF 100%) !important;
        padding: 0 0 100px 0 !important;
        border-radius: 32px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 0px 16px -16px rgba(114, 180, 255, 0.75) !important;
        border: none !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        gap: 0 !important;
        height: 450px !important;
        max-width: 290px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .subpage .doctor-card:hover {
        transform: translateY(-8px) !important;
        background: linear-gradient(180deg, transparent 50%, #B0D3FF 100%) !important;
        box-shadow: 0 0px 16px -16px rgba(114, 180, 255, 0.75) !important;
    }

    .subpage .doctor-img-wrapper {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        height: 350px !important;
        width: 100% !important;
        overflow: hidden !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .subpage .doctor-img-wrapper img {
        height: 90% !important;
        width: 77% !important;
        object-fit: cover !important;
        object-position: center top !important;
        transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }

    .subpage .doctor-card:hover .doctor-img-wrapper img {
        transform: scale(1.06) !important;
    }

    .subpage .doctor-info-box {
        position: absolute !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        padding: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 78, 117, 0.06) !important;
        transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
        margin: 0 !important;
        /* Reset legacy subpage margin override */
        border: none !important;
        z-index: 10 !important;
    }

    .subpage .doctor-card:hover .doctor-info-box {
        box-shadow: 0 15px 35px rgba(0, 78, 117, 0.12) !important;
        transform: translateY(-4px) !important;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(52, 168, 83, 0.08);
        color: #34a853;
        padding: 4px 12px;
        border-radius: var(--radius-pill);
        font-size: 0.72rem;
        font-weight: 700;
        margin-bottom: 0px;
        align-self: flex-start;
    }

    .status-badge--blue {
        background: rgba(28, 151, 212, 0.08);
        color: var(--accent-teal, #1c97d4);
    }

    .status-dot {
        width: 6px;
        height: 6px;
        background: #34a853;
        border-radius: 50%;
        display: inline-block;
        animation: pulse-dot 1.5s infinite;
    }

    .directory-info h3 {
        font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 15px;
        font-weight: 800;
        color: #0b1e36;
        margin-bottom: 4px;
        margin-top: 4px;
    }

    .specialty-label {
        font-size: 11px;
        color: #1c97d4;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .btn-card-booking {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 0.85rem;
        padding: 10px 18px;
        box-shadow: none;
    }

    /* Responsive Doctor Listing Page */
    @media (max-width: 1024px) {
        .doctor-listing-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .doctor-filter-form {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            padding: 8px;
        }

        .filter-divider {
            display: none;
        }

        .filter-input-group {
            padding: 10px 4px;
            border-bottom: 1px solid rgba(6, 29, 51, 0.06);
        }

        .filter-input-group.search-input {
            padding-left: 4px;
        }

        .filter-submit-btn {
            width: 100%;
            margin-top: 8px;
        }
    }

    @media (max-width: 1024px) {
        .doctor-listing-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .doctor-listing-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ==========================================
   SPECIALTIES PAGE CUSTOM STYLES
   ========================================== */
    .departments-directory-section {
        background: #f4f8fc;
    }

    .departments-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .dept-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.02);
        transition: var(--transition);
    }

    .dept-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(0, 139, 248, 0.15);
    }

    .dept-icon-box {
        width: 48px;
        height: 48px;
        background: rgba(0, 139, 248, 0.08);
        color: var(--secondary-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: var(--transition);
    }

    .dept-card:hover .dept-icon-box {
        background: var(--primary-color);
        color: var(--bg-white);
    }

    .dept-info {
        flex-grow: 1;
    }

    .dept-info h3 {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 2px;
        letter-spacing: 0.5px;
    }

    .dept-info p {
        font-size: 0.8rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .dept-arrow {
        width: 32px;
        height: 32px;
        background: var(--bg-light);
        color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: var(--transition);
    }

    .dept-card:hover .dept-arrow {
        background: var(--primary-color);
        color: var(--bg-white);
        transform: translateX(2px);
    }

    /* Specialties CTA Banner */
    .specialty-cta-section {
        background-size: cover;
        background-position: center;
        position: relative;
        padding: 100px 0;
    }

    .cta-center-glass-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-glass);
        padding: 48px;
        max-width: 680px;
        margin: 0 auto;
    }

    .cta-center-glass-card h2 {
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 16px;
        line-height: 1.25;
    }

    .cta-center-glass-card p {
        font-size: 1.05rem;
        color: var(--text-muted);
        margin-bottom: 28px;
    }

    /* Responsive Specialties Page */
    @media (max-width: 1024px) {
        .departments-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .departments-grid {
            grid-template-columns: 1fr;
        }

        .cta-center-glass-card {
            padding: 32px 20px;
        }

        .cta-center-glass-card h2 {
            font-size: 1.75rem;
        }
    }

    /* ==========================================
   CONTACT PAGE CUSTOM STYLES
   ========================================== */
    .contact-hero-section {
        background-size: cover;
        background-position: center;
        padding: 110px 0;
        position: relative;
    }

    .contact-hero-content {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-hero-buttons {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 28px;
        flex-wrap: wrap;
    }

    .contact-hero-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 20px;
        border-radius: 99px;
        font-size: 0.88rem;
        font-weight: 700;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1.5px solid rgba(255,255,255,0.35);
        backdrop-filter: blur(8px);
    }

    .contact-hero-chip:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    }

    .contact-hero-chip-call {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

    .contact-hero-chip-wa {
        background: #25D366;
        color: #fff;
        border-color: #25D366;
    }

    .contact-hero-chip-email {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }

    .btn-whatsapp { background: #25d366; color: var(--bg-white); }
    .btn-whatsapp:hover { background: #20ba5a; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25); }
    .btn-whatsapp svg { margin-right: 4px; }
    .btn-emergency-call { background: var(--accent-color); color: var(--bg-white); }
    .btn-emergency-call:hover { background: #b20d22; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(209, 18, 44, 0.25); }

    /* --- Contact Info Cards --- */
    .contact-info-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        padding: 0 0 4rem;
    }

    .contact-info-card {
        background: #fff;
        border: 1px solid rgba(6, 29, 51, 0.07);
        border-radius: 16px;
        padding: 28px 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 2px 16px rgba(11, 30, 54, 0.06);
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .contact-info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 36px rgba(28, 151, 212, 0.14);
        border-color: rgba(28, 151, 212, 0.22);
    }

    .contact-info-card-icon {
        width: 48px;
        height: 48px;
        background: #EBF8FF;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1c97d4;
        flex-shrink: 0;
    }

    .contact-info-card-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #1c97d4;
    }

    .contact-info-card-value {
        font-size: 0.9rem;
        font-weight: 600;
        color: #0b1e36;
        line-height: 1.55;
    }

    .contact-info-card-value a {
        color: #0b1e36;
        text-decoration: none;
        transition: color 0.2s;
    }

    .contact-info-card-value a:hover { color: #1c97d4; }

    /* --- Contact Form + Map Grid --- */
    .contact-form-map-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        align-items: start;
    }

    .contact-form-card {
        background: #fff;
        border: 1px solid rgba(6, 29, 51, 0.07);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 4px 24px rgba(11, 30, 54, 0.07);
    }

    .contact-form-card h3 {
        font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 1.4rem;
        font-weight: 800;
        color: #0b1e36;
        margin-bottom: 6px;
    }

    .contact-form-card > p {
        font-size: 0.9rem;
        color: #6b7280;
        margin-bottom: 28px;
        line-height: 1.6;
    }

    /* Form Styles */
    .form-container-card { background: var(--bg-white); border-radius: var(--radius-md); padding: 10px; }
    .contact-message-form { display: flex; flex-direction: column; }
    .form-row { display: flex; gap: 20px; }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        margin-bottom: 18px;
    }

    .form-group label {
        font-size: 0.8rem;
        font-weight: 700;
        color: #0b1e36;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        border: 1.5px solid rgba(6, 29, 51, 0.1);
        border-radius: 10px;
        padding: 13px 16px;
        font-family: var(--font-primary);
        font-size: 0.95rem;
        outline: none;
        background: #f8fafc;
        color: var(--text-main);
        transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        border-color: #1c97d4;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.12);
    }

    .form-select-wrapper { position: relative; }
    .form-select-wrapper select { width: 100%; appearance: none; padding-right: 36px; cursor: pointer; }
    .form-select-wrapper::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-muted); pointer-events: none; }

    .form-submit-btn {
        width: 100%;
        margin-top: 8px;
        background: #1c97d4;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 15px 24px;
        font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
        box-shadow: 0 4px 18px rgba(28, 151, 212, 0.25);
    }

    .form-submit-btn:hover {
        background: #1484b8;
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(28, 151, 212, 0.35);
    }

    /* --- Map iframe wrapper --- */
    .contact-map-wrapper {
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(11, 30, 54, 0.1);
        border: 1px solid rgba(6, 29, 51, 0.07);
        height: 100%;
        min-height: 540px;
        position: sticky;
        top: 100px;
    }

    .contact-map-wrapper iframe {
        width: 100%;
        height: 100%;
        min-height: 540px;
        display: block;
        border: none;
    }

    /* --- FAQ help card below accordion --- */
    .faq-help-card {
        margin-top: 28px;
        background: #EBF8FF;
        border: 1px solid rgba(28, 151, 212, 0.18);
        border-radius: 16px;
        padding: 24px 28px;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .faq-help-card-icon {
        width: 50px;
        height: 50px;
        background: #1c97d4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #fff;
    }

    .faq-help-card-text h4 {
        font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 0.98rem;
        font-weight: 800;
        color: #0b1e36;
        margin-bottom: 3px;
    }

    .faq-help-card-text p { font-size: 0.86rem; color: #6b7280; margin: 0; }

    .faq-help-card-actions { margin-left: auto; display: flex; gap: 10px; flex-shrink: 0; }

    .faq-help-btn {
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .faq-help-btn-primary { background: #1c97d4; color: #fff; border: 1px solid #1c97d4; }
    .faq-help-btn-primary:hover { background: #1484b8; box-shadow: 0 4px 14px rgba(28, 151, 212, 0.3); }
    .faq-help-btn-wa { background: #25D366; color: #fff; border: 1px solid #25D366; }
    .faq-help-btn-wa:hover { background: #1fba5a; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3); }

    /* --- Legacy compat --- */
    .contact-map-section { background-size: cover; background-position: center; padding: 120px 0; position: relative; }
    .map-card-container { display: flex; justify-content: center; }
    .map-details-card { background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); padding: 40px; max-width: 480px; text-align: center; width: 100%; }
    .map-card-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
    .map-details-card h2 { font-size: 1.25rem; font-weight: 800; color: var(--primary-color); letter-spacing: 0.5px; }
    .map-details-card p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
    .map-card-link { font-weight: 700; color: var(--secondary-color); font-size: 0.95rem; }
    .map-card-link:hover { color: var(--primary-color); letter-spacing: 0.5px; }
    .faq-accordion-group { display: flex; flex-direction: column; gap: 16px; }
    .faq-accordion-item { background: #edf5ff; border-radius: var(--radius-sm); overflow: hidden; transition: var(--transition); }
    .faq-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; background: transparent; border: none; padding: 20px 24px; cursor: pointer; font-family: var(--font-primary); font-weight: 700; font-size: 1rem; color: var(--primary-color); text-align: left; }
    .faq-icon { font-size: 1.25rem; font-weight: 500; color: var(--secondary-color); transition: var(--transition); }
    .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .faq-panel p { padding: 0 24px 20px 24px; font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }
    .faq-support-info { display: flex; flex-direction: column; gap: 24px; }
    .faq-support-card { background: var(--bg-white); border: 1px solid rgba(6,29,51,0.06); border-radius: var(--radius-md); padding: 32px; box-shadow: var(--shadow-sm); transition: var(--transition); }
    .faq-support-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(0,139,248,0.15); }
    .faq-support-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--primary-color); margin-bottom: 12px; }
    .faq-support-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; }
    .support-card-link { font-weight: 700; color: var(--secondary-color); font-size: 0.9rem; }
    .support-card-link:hover { color: var(--primary-color); }

    /* Responsive Contact Page */
    @media (max-width: 1024px) {
        .contact-info-cards { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
        .contact-info-cards { grid-template-columns: 1fr 1fr; }
        .contact-form-map-grid { grid-template-columns: 1fr; }
        .contact-form-card { padding: 24px; }
        .contact-map-wrapper { min-height: 320px; position: static; }
        .contact-map-wrapper iframe { min-height: 320px; }
        .form-row { flex-direction: column; gap: 0; }
        .contact-hero-buttons { flex-direction: column; align-items: stretch; }
        .faq-help-card { flex-direction: column; align-items: flex-start; }
        .faq-help-card-actions { margin-left: 0; }
    }

    @media (max-width: 480px) {
        .contact-info-cards { grid-template-columns: 1fr; }
    }

    /* ==========================================
   ABOUT PAGE CUSTOM STYLES
   ========================================== */
    .about-hero-section {
        background-size: cover;
        background-position: center 20%;
        padding: 120px 0;
        position: relative;
    }

    .about-hero-content {
        margin-top: 50px;
        max-width: 800px;
    }

    /* About Intro Section */
    .about-intro-section {
        background: var(--bg-white);
    }

    .intro-stat-highlight {
        display: flex;
        flex-direction: column;
    }

    .highlight-number {
        font-size: clamp(3rem, 6vw, 4.5rem);
        font-weight: 800;
        color: var(--secondary-color);
        line-height: 1;
        margin-bottom: 12px;
        letter-spacing: -1.5px;
    }

    .highlight-label {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1.5;
        max-width: 480px;
    }

    .intro-paragraph {
        font-size: 1.15rem;
        color: var(--text-muted);
        line-height: 1.7;
    }

    /* Feature Columns */
    .excellence-section {
        background: #f4f8fc;
    }

    .features-columns-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .feature-col-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 40px 32px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.02);
        transition: var(--transition);
    }

    .feature-col-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-lg);
    }

    .feature-icon-wrapper {
        width: 56px;
        height: 56px;
        background: rgba(0, 139, 248, 0.08);
        color: var(--secondary-color);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        transition: var(--transition);
    }

    .feature-col-card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 14px;
    }

    .feature-col-card p {
        font-size: 0.92rem;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .feature-card-link {
        font-weight: 700;
        color: var(--secondary-color);
        font-size: 0.95rem;
    }

    /* Highlight Navy Card variation */
    .feature-col-card.highlight-navy {
        background: var(--primary-color);
        color: var(--bg-white);
        border-color: var(--primary-color);
    }

    .feature-col-card.highlight-navy h3 {
        color: var(--bg-white);
    }

    .feature-col-card.highlight-navy p {
        color: rgba(255, 255, 255, 0.8);
    }

    .feature-col-card.highlight-navy .feature-icon-wrapper {
        background: rgba(255, 255, 255, 0.1);
        color: var(--bg-white);
    }

    .feature-col-card.highlight-navy:hover .feature-icon-wrapper {
        background: var(--secondary-color);
    }

    /* Who We Are details */
    .who-we-are-section {
        background: var(--bg-white);
    }

    .who-we-are-image-wrapper {
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
    }

    .who-we-are-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .who-we-are-details {
        display: flex;
        flex-direction: column;
    }

    .details-bold-p {
        font-size: 1.08rem;
        font-weight: 600;
        color: var(--primary-color);
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .details-normal-p {
        font-size: 0.95rem;
        color: var(--text-muted);
        line-height: 1.65;
        margin-bottom: 16px;
    }

    /* Responsive About Page */
    @media (max-width: 1024px) {
        .features-columns-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .feature-col-card {
            padding: 32px 24px;
        }
    }

    /* ==========================================
   DOCTOR PROFILE & SPECIALTY DETAILS STYLES
   ========================================== */
    .doctor-profile-hero {
        background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
    }

    .profile-hero-image-wrapper {
        border-radius: var(--radius-lg);
        overflow: hidden;
        height: 580px;
        width: 100%;
        /* box-shadow: 0 20px 45px rgba(6, 29, 51, 0.12); */
        /* border: 6px solid #ffffff; */
        /* background: #e6f1fc; */
        position: relative;
    }

    .profile-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: var(--transition);
    }

    .profile-hero-image-wrapper:hover .profile-hero-img {
        transform: scale(1.03);
    }


    .profile-hero-summary {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .profile-hero-summary .doctor-name {
        font-size: clamp(2.25rem, 5vw, 3.25rem);
        font-weight: 800;
        color: var(--primary-color);
        line-height: 1.15;
        margin-bottom: 8px;
        letter-spacing: -1px;
    }

    .doctor-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--secondary-color);
        margin-bottom: 20px;
    }

    .profile-divider {
        height: 1px;
        background: rgba(6, 29, 51, 0.08);
        margin-bottom: 20px;
    }

    .doctor-bio {
        font-size: 1.05rem;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .doctor-key-details {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
        margin-bottom: 32px;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .detail-label {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-val {
        font-size: 1rem;
        font-weight: 800;
        color: var(--primary-color);
    }

    .detail-val a {
        color: var(--secondary-color);
    }

    .detail-val a:hover {
        color: var(--primary-color);
    }

    .profile-book-btn {
        align-self: flex-start;
        box-shadow: none;
    }

    /* Details grid layout */
    .profile-details-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 32px;
        align-items: start;
    }

    .details-card-block {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 40px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.02);
        margin-bottom: 24px;
    }

    .details-card-block h2 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 20px;
        position: relative;
        padding-bottom: 10px;
    }

    .details-card-block h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 2px;
        background: var(--secondary-color);
    }

    .details-card-block p {
        font-size: 0.98rem;
        color: var(--text-muted);
        line-height: 1.7;
        margin-bottom: 18px;
    }

    .details-card-block p:last-child {
        margin-bottom: 0;
    }

    /* Bullet Lists */
    .profile-bullets {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .profile-bullets li {
        font-size: 0.95rem;
        color: var(--text-muted);
        position: relative;
        padding-left: 20px;
    }

    .profile-bullets li::before {
        content: '•';
        color: var(--secondary-color);
        font-weight: bold;
        font-size: 1.5rem;
        position: absolute;
        left: 0;
        top: -4px;
    }

    .profile-bullets.grid-bullets {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Sticky Schedule Card */
    .schedule-sticky-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 36px;
        box-shadow: 0 4px 25px rgba(6, 29, 51, 0.04);
        border: 1px solid rgba(6, 29, 51, 0.02);
        position: sticky;
        top: 24px;
    }

    .schedule-sticky-card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary-color);
    }

    .schedule-divider {
        height: 1.5px;
        background: rgba(6, 29, 51, 0.06);
        margin: 16px 0;
    }

    .schedule-hours {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .schedule-hours li {
        display: flex;
        justify-content: space-between;
        font-size: 0.92rem;
    }

    .schedule-hours .day {
        font-weight: 700;
        color: var(--primary-color);
    }

    .schedule-hours .time {
        color: var(--text-muted);
        font-weight: 500;
    }

    .schedule-hours .time.closed {
        color: var(--accent-color);
        font-weight: 700;
    }

    .schedule-note {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.4;
        margin-top: 16px;
    }

    .call-clinic-btn {
        width: 100%;
        margin-top: 24px;
        box-shadow: none;
    }

    /* Department Doctors List */
    .dept-doctors-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .dept-doctor-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(6, 29, 51, 0.05);
        background: #f8fafc;
    }

    .dept-doctor-item:hover {
        background: #edf5ff;
        border-color: rgba(0, 139, 248, 0.2);
    }

    .dept-doctor-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        background: #c7e1ff;
        flex-shrink: 0;
    }

    .dept-doctor-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dept-doctor-meta {
        flex-grow: 1;
    }

    .dept-doctor-meta h4 {
        font-size: 0.92rem;
        font-weight: 800;
        color: var(--primary-color);
    }

    .dept-doctor-meta p {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-weight: 600;
    }

    .dept-doctor-item .arrow-icon {
        font-weight: 800;
        color: var(--secondary-color);
        transition: var(--transition);
    }

    .dept-doctor-item:hover .arrow-icon {
        transform: translateX(3px);
    }

    .dept-contact-title {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--primary-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .dept-contact-phone {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--secondary-color);
        margin-top: 4px;
    }

    /* Responsive Profiles */
    @media (max-width: 991px) {
        .profile-details-grid {
            grid-template-columns: 1fr;
        }

        .schedule-sticky-card {
            position: static;
        }
    }

    @media (max-width: 768px) {
        .profile-bullets.grid-bullets {
            grid-template-columns: 1fr;
        }

        .profile-hero-image-wrapper {
            height: 320px;
        }
    }

    /* ==========================================
   PACKAGES, INSURANCE, EMERGENCY & ADDITIONAL STYLES
   ========================================== */

    /* Packages Page */
    .packages-tabs-wrapper {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .tab-btn {
        border: 1.5px solid rgba(6, 29, 51, 0.1);
        background: var(--bg-white);
        color: var(--primary-color);
        padding: 10px 24px;
        border-radius: var(--radius-full);
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        transition: var(--transition);
    }

    .tab-btn:hover,
    .tab-btn.active {
        background: var(--primary-color);
        color: var(--bg-white);
        border-color: var(--primary-color);
    }

    .packages-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        align-items: flex-start;
    }

    .package-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 36px 32px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.05);
        display: flex;
        flex-direction: column;
        position: relative;
        transition: var(--transition);
    }

    .package-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .package-card.popular {
        border: 2px solid var(--secondary-color);
        box-shadow: var(--shadow-glass);
    }

    .popular-tag {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--secondary-color);
        color: var(--bg-white);
        font-size: 0.72rem;
        font-weight: 800;
        padding: 4px 16px;
        border-radius: var(--radius-full);
        letter-spacing: 0.5px;
    }

    .pack-badge {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--secondary-color);
        text-transform: uppercase;
    }

    .package-header-info h3 {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--primary-color);
        margin: 6px 0 12px 0;
    }

    .pack-price {
        font-size: 1.75rem;
        font-weight: 800;
        color: var(--primary-color);
    }

    .package-divider {
        height: 1px;
        background: rgba(6, 29, 51, 0.06);
        margin: 20px 0;
    }

    .package-inclusions {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 28px;
        flex-grow: 1;
    }

    .package-inclusions li {
        font-size: 0.9rem;
        color: var(--text-muted);
        position: relative;
        padding-left: 22px;
    }

    .package-inclusions li::before {
        content: '✓';
        color: var(--secondary-color);
        font-weight: bold;
        position: absolute;
        left: 0;
    }

    .btn-card-booking {
        width: 100%;
        box-shadow: none;
    }

    /* Insurance Page */
    .insurers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .insurer-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 32px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
        transition: var(--transition);
    }

    .insurer-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 139, 248, 0.2);
    }

    .insurer-logo-box {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        background: #f8fafc;
        border-radius: var(--radius-sm);
    }

    .insurer-name-logo {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--primary-color);
        letter-spacing: -0.5px;
    }

    .insurer-card h4 {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 6px;
    }

    .coverage-type {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    /* Emergency Page */
    .emergency-hero-section {
        background: #041221;
        padding: 120px 0;
        position: relative;
    }

    .emergency-tag-badge {
        background: rgba(209, 18, 44, 0.15);
        color: #f87171;
        font-size: 0.78rem;
        font-weight: 800;
        padding: 6px 18px;
        border-radius: var(--radius-full);
        display: inline-block;
        margin-bottom: 16px;
    }

    .emergency-call-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: var(--radius-lg);
        padding: 32px;
        max-width: 480px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .call-card-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: 0.5px;
    }

    .emergency-phone-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--accent-color);
        color: var(--bg-white);
        padding: 14px 28px;
        border-radius: var(--radius-full);
        font-size: 1.25rem;
        font-weight: 800;
        transition: var(--transition);
    }

    .emergency-phone-btn:hover {
        background: #b20d22;
        transform: scale(1.03);
        box-shadow: 0 0 25px rgba(209, 18, 44, 0.5);
    }

    .triage-steps-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .triage-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 36px 28px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
    }

    .triage-card.red-lane {
        border-top: 4px solid var(--accent-color);
    }

    .triage-card.yellow-lane {
        border-top: 4px solid #f59e0b;
    }

    .triage-card.green-lane {
        border-top: 4px solid #10b981;
    }

    .triage-badge {
        font-size: 0.75rem;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .red-lane .triage-badge {
        color: var(--accent-color);
    }

    .yellow-lane .triage-badge {
        color: #f59e0b;
    }

    .green-lane .triage-badge {
        color: #10b981;
    }

    .triage-card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 10px;
    }

    .triage-card p {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.5;
    }

    /* Patient Guide Table */
    .guide-card-block {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 36px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
    }

    .guide-card-block h2 {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 16px;
    }

    .hours-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
    }

    .hours-table th,
    .hours-table td {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(6, 29, 51, 0.06);
        font-size: 0.9rem;
        text-align: left;
    }

    .hours-table th {
        background: #f8fafc;
        color: var(--primary-color);
        font-weight: 800;
    }

    .hours-table td {
        color: var(--text-muted);
    }

    /* Vacancies */
    .vacancies-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .vacancy-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 24px 32px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
        transition: var(--transition);
    }

    .vacancy-card:hover {
        transform: translateY(-2px);
        border-color: rgba(0, 139, 248, 0.2);
    }

    .job-dept {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--secondary-color);
    }

    .vacancy-info h3 {
        font-size: 1.15rem;
        font-weight: 800;
        color: var(--primary-color);
        margin: 4px 0;
    }

    .job-meta {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    /* News Cards */
    .news-article-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
        transition: var(--transition);
    }

    .news-article-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .article-img-box {
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .article-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-category {
        position: absolute;
        bottom: 12px;
        left: 12px;
        background: var(--primary-color);
        color: var(--bg-white);
        font-size: 0.7rem;
        font-weight: 800;
        padding: 4px 12px;
        border-radius: var(--radius-sm);
    }

    .article-body {
        padding: 24px;
    }

    .article-date {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-muted);
    }

    .article-body h3 {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--primary-color);
        margin: 8px 0;
        line-height: 1.35;
    }

    .article-body p {
        font-size: 0.88rem;
        color: var(--text-muted);
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .article-link {
        font-weight: 700;
        color: var(--secondary-color);
        font-size: 0.88rem;
    }

    /* Highlights Bar */
    .insurance-highlights-bar {
        padding: 36px 0;
        background: #f4f8fc;
        border-bottom: 1px solid rgba(6, 29, 51, 0.05);
    }

    .highlight-item {
        display: flex;
        align-items: center;
        gap: 16px;
        background: var(--bg-white);
        padding: 20px 24px;
        border-radius: var(--radius-md);
        box-shadow: 0 4px 18px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
        transition: var(--transition);
    }

    .highlight-item:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: rgba(0, 139, 248, 0.2);
    }

    .hl-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(0, 139, 248, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: var(--transition);
    }

    .highlight-item:hover .hl-icon {
        background: var(--secondary-color);
    }

    .highlight-item:hover .hl-icon svg {
        stroke: var(--bg-white);
    }

    .highlight-item h4 {
        font-size: 1rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 2px;
    }

    .highlight-item p {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.3;
    }

    /* Alphabet filter bar */
    .alphabet-filter-bar {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 36px;
    }

    .alpha-btn {
        border: 1px solid rgba(6, 29, 51, 0.1);
        background: var(--bg-white);
        color: var(--primary-color);
        padding: 8px 16px;
        border-radius: var(--radius-sm);
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        transition: var(--transition);
    }

    .alpha-btn:hover,
    .alpha-btn.active {
        background: var(--primary-color);
        color: var(--bg-white);
        border-color: var(--primary-color);
    }

    .insurer-badge {
        font-size: 0.72rem;
        font-weight: 800;
        padding: 4px 12px;
        background: #edf5ff;
        color: var(--secondary-color);
        border-radius: var(--radius-full);
        margin-top: 12px;
        display: inline-block;
    }

    /* Process Cards */
    .process-card {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 40px 32px;
        box-shadow: 0 4px 20px rgba(6, 29, 51, 0.03);
        border: 1px solid rgba(6, 29, 51, 0.04);
        border-top: 4px solid var(--secondary-color);
        transition: var(--transition);
    }

    .process-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }

    .process-number {
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--secondary-color);
        line-height: 1;
        margin-bottom: 14px;
    }

    .process-card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--primary-color);
        margin-bottom: 12px;
    }

    .process-card p {
        font-size: 0.92rem;
        color: var(--text-muted);
        line-height: 1.6;
    }


    /* Responsive Additional Pages */
    @media (max-width: 991px) {

        .packages-grid,
        .insurers-grid,
        .triage-steps-grid {
            grid-template-columns: 1fr;
        }

        .vacancy-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }
    }

    /* ==========================================
   DOCTOR CARD DUAL ACTIONS (VIEW PROFILE & BOOK APPOINTMENT)
   ========================================== */
    .doctor-card-actions {
        display: flex;
        gap: 8px;
        margin-top: 18px;
        width: 100%;
    }

    .btn-card-profile {
        flex: 1;
        padding: 10px 12px;
        font-size: 0.78rem;
        font-weight: 700;
        color: #ffffff !important;
        background: var(--primary-color);
        border: 1.5px solid var(--primary-color);
        border-radius: var(--radius-pill);
        text-align: center;
        text-decoration: none;
        transition: var(--transition);
        white-space: nowrap;
    }

    .btn-card-profile:hover {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
    }

    .btn-card-book {
        flex: 1.35;
        padding: 10px 14px;
        font-size: 0.78rem;
        font-weight: 700;
        color: #475569 !important;
        background: #f1f5f9;
        border: 1.5px solid #e2e8f0;
        border-radius: var(--radius-pill);
        text-align: center;
        text-decoration: none;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
    }

    .btn-card-book:hover {
        background: #e2e8f0;
        color: var(--primary-color) !important;
        border-color: #cbd5e1;
    }




    /* ==========================================
   MEGA MENU SUBMENU DROPDOWN
   ========================================== */
    .megamenu-item {
        position: relative;
    }

    .megamenu-panel {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(15px);
        width: 92vw;
        max-width: 1140px;
        background: #004e75;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-lg);
        box-shadow: 0 25px 60px rgba(4, 18, 33, 0.5);
        padding: 32px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
    }

    .megamenu-item:hover .megamenu-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .megamenu-container {
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
        gap: 32px;
        align-items: stretch;
    }

    .megamenu-tag {
        font-size: 0.72rem;
        font-weight: 800;
        color: var(--secondary-color);
        letter-spacing: 1px;
        margin-bottom: 20px;
        display: block;
    }

    .megamenu-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .megamenu-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-md);
        padding: 16px 18px;
        transition: var(--transition);
        display: flex;
        flex-direction: column;
        text-decoration: none;
    }

    .megamenu-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--secondary-color);
        transform: translateY(-2px);
    }

    .card-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .card-icon-box {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .card-icon-box.pink {
        background: rgba(236, 72, 153, 0.18);
        color: #f472b6;
    }

    .card-icon-box.purple {
        background: rgba(168, 85, 247, 0.18);
        color: #c084fc;
    }

    .card-icon-box.blue {
        background: rgba(59, 130, 246, 0.18);
        color: #60a5fa;
    }

    .card-icon-box.cyan {
        background: rgba(6, 182, 212, 0.18);
        color: #22d3ee;
    }

    .card-icon-box.orange {
        background: rgba(249, 115, 22, 0.18);
        color: #fb923c;
    }

    .card-icon-box.green {
        background: rgba(34, 197, 94, 0.18);
        color: #4ade80;
    }

    .card-title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-grow: 1;
    }

    .card-title-wrap h4 {
        font-size: 0.92rem;
        font-weight: 800;
        color: #ffffff;
        margin: 0;
    }

    .card-title-wrap .arrow {
        color: rgba(255, 255, 255, 0.4);
        transition: var(--transition);
        font-weight: bold;
    }

    .megamenu-card:hover .card-title-wrap .arrow {
        color: var(--secondary-color);
        transform: translateX(4px);
    }

    .card-desc {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.35;
        margin-bottom: 12px;
        flex-grow: 1;
    }

    .card-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .card-tags span {
        font-size: 0.68rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.85);
        padding: 2px 10px;
        border-radius: var(--radius-full);
    }

    /* Mega Menu Right Card */
    .megamenu-right {
        display: flex;
    }

    .megamenu-image-card {
        border-radius: var(--radius-md);
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 350px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .megamenu-image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .img-card-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(4, 18, 33, 0.95));
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .img-card-overlay h4 {
        font-size: 1.1rem;
        font-weight: 800;
        color: #ffffff;
        margin: 0;
    }

    .img-card-overlay p {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 12px;
    }

    @media (max-width: 991px) {
        .megamenu-panel {
            display: none;
        }
    }

    /* Header Navigation & CTA Button Overrides for Subpages */
    .nav-link {
        color: #ffffff !important;
    }

    .nav-link:hover,
    .nav-link.active {
        color: #ffffff !important;
    }

    .btn-primary {
        background: linear-gradient(135deg, rgba(7, 23, 44, 0.93), rgba(0, 78, 117, 0.93)) !important;
        color: #ffffff !important;
        border: none !important;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, rgba(0, 78, 117, 0.93), rgba(7, 23, 44, 0.93)) !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 78, 117, 0.25);
    }

    .site-header,
    .site-header .top-bar,
    .main-navbar {
        background: transparent !important;
        border: none !important;
    }

    .btn-pill-navy,
    .btn-pill-navy span,
    #nav-cta-btn,
    #nav-cta-btn span {
        color: #ffffff !important;
    }

    .main-header {
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        z-index: 100;
        padding: 15px 0 35px 0;
        font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    }

}

/* ============================================================
   DOCTOR PROFILE - PATIENT REVIEWS SECTION
   ============================================================ */

.doctor-reviews-section {
    background-color: var(--bg-light, #f4f7fb);
}

/* Reviews header: tag + title on left, rating summary on right */
.reviews-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.reviews-rating-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.12);
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 4px 20px rgba(0, 78, 117, 0.06);
    min-width: 340px;
}

.rating-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rating-score {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-navy, #004e75);
    line-height: 1;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.rating-stars-big {
    font-size: 1.25rem;
    color: #f4a01c;
    letter-spacing: 2px;
}

.rating-total {
    font-size: 0.75rem;
    color: var(--text-muted, #8a9ab0);
    white-space: nowrap;
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 200px;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary, #5a6a7e);
}

.rating-bar-row>span:first-child {
    min-width: 32px;
    text-align: right;
}

.rating-bar-row>span:last-child {
    min-width: 24px;
    text-align: left;
    color: var(--text-muted, #8a9ab0);
}

.rating-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(0, 78, 117, 0.1);
    border-radius: 99px;
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-navy, #004e75), var(--accent-teal, #1c97d4));
    border-radius: 99px;
    transition: width 0.6s ease;
}

/* Review Cards Grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.review-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 78, 117, 0.06);
    border: 1px solid rgba(0, 78, 117, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 78, 117, 0.12);
}

.review-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-navy, #004e75), var(--accent-blue, #1C4068));
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.reviewer-avatar--teal {
    background: linear-gradient(135deg, #0d9488, #06b6d4);
}

.reviewer-avatar--navy {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
}

.reviewer-avatar--purple {
    background: linear-gradient(135deg, #6d28d9, #a855f7);
}

.reviewer-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.reviewer-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-navy, #004e75);
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.reviewer-date {
    font-size: 0.75rem;
    color: var(--text-muted, #8a9ab0);
}

.review-stars {
    font-size: 1rem;
    color: #f4a01c;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.review-text {
    font-size: 0.9rem;
    color: var(--text-secondary, #5a6a7e);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
}

.review-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    border-radius: 99px;
    padding: 4px 12px;
    width: fit-content;
}

.review-badge svg {
    stroke: #16a34a;
}

/* ============================================================
   DOCTOR PROFILE - REQUEST A CALL SECTION
   ============================================================ */

.request-call-section {
    background: linear-gradient(135deg, var(--primary-navy, #004e75) 0%, var(--accent-blue, #1C4068) 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.request-call-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}

.request-call-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Left: Content / text side */
.request-call-content {
    color: #ffffff;
}

.request-call-content .section-tag.tag-white {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.request-call-content h2 {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 16px 0 20px;
    line-height: 1.2;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.request-call-content>p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
    margin-bottom: 28px;
}

.call-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.call-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.call-features li svg {
    stroke: #5eead4;
    flex-shrink: 0;
}

/* Right: Form card */
.request-call-form-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.request-call-form-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-navy, #004e75);
    margin-bottom: 6px;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.form-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted, #8a9ab0);
    margin-bottom: 28px;
}

.callback-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.callback-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.callback-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-navy, #004e75);
}

.callback-form .required {
    color: #ef4444;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon svg {
    position: absolute;
    left: 14px;
    stroke: var(--text-muted, #8a9ab0);
    pointer-events: none;
    z-index: 1;
}

.input-with-icon input,
.input-with-icon select {
    width: 100%;
    padding: 12px 14px 12px 42px;
    font-size: 0.9rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--primary-navy, #004e75);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    appearance: auto;
}

.input-with-icon input::placeholder {
    color: #c0cdd9;
}

.input-with-icon input:focus,
.input-with-icon select:focus {
    border-color: var(--primary-navy, #004e75);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 78, 117, 0.1);
}

.btn-callback-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--primary-navy, #004e75), var(--accent-blue, #1C4068));
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    margin-top: 4px;
}

.btn-callback-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 78, 117, 0.35);
}

.btn-callback-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.callback-success {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #16a34a;
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    justify-content: center;
}

.callback-success svg {
    stroke: #16a34a;
    flex-shrink: 0;
}

/* ============================================================
   DOCTOR PROFILE - RELATED DOCTORS SECTION
   ============================================================ */

.related-doctors-section {
    background: #ffffff;
}

.related-doctors-header {
    text-align: center;
    margin-bottom: 48px;
}

.related-doctors-header .section-desc {
    font-size: 1rem;
    color: var(--text-secondary, #5a6a7e);
    max-width: 560px;
    margin: 12px auto 0;
    line-height: 1.7;
}

.related-doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.related-doctor-card {
    background: #f4f7fb;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0, 78, 117, 0.08);
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-doctor-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 78, 117, 0.14);
}

.related-doc-img-wrapper {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(180deg, #dde9f4 0%, #bfd2e5 100%);
}

.related-doc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.related-doctor-card:hover .related-doc-img {
    transform: scale(1.04);
}

.related-doc-info {
    padding: 20px 20px 24px;
}

.related-doc-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary-navy, #004e75);
    margin: 0 0 6px;
    line-height: 1.3;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.related-doc-specialty {
    font-size: 0.82rem;
    color: var(--text-secondary, #5a6a7e);
    margin-bottom: 14px;
    font-weight: 500;
}

.related-doc-cta {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-navy, #004e75);
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s, color 0.2s;
}

.related-doctor-card:hover .related-doc-cta {
    border-color: var(--primary-navy, #004e75);
    color: var(--accent-teal, #1c97d4);
    border-color: var(--accent-teal, #1c97d4);
}

/* ============================================================
   SIDEBAR - DOCTOR LISTING PAGE
   ============================================================ */

.doctor-listing-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: flex-start;
}

.doctor-sidebar {
    position: sticky;
    top: 100px;
    margin-bottom: 24px;
}

.sidebar-inner {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(0, 78, 117, 0.1);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 78, 117, 0.06);
}

.sidebar-header {
    background: linear-gradient(135deg, var(--primary-navy, #004e75), var(--accent-blue, #1C4068));
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.specialty-filter-list {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

.specialty-filter-list li {
    margin: 0;
}

.specialty-filter-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 22px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary, #5a6a7e);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.specialty-filter-link:hover {
    background: rgba(0, 78, 117, 0.06);
    color: var(--primary-navy, #004e75);
    border-left-color: rgba(0, 78, 117, 0.3);
}

.specialty-filter-link.active {
    background: rgba(0, 78, 117, 0.08);
    color: var(--primary-navy, #004e75);
    border-left-color: var(--primary-navy, #004e75);
    font-weight: 700;
}

/* Listing meta bar */
.doctor-listing-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 14px 20px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 78, 117, 0.08);
    box-shadow: 0 2px 12px rgba(0, 78, 117, 0.04);
    gap: 16px;
    flex-wrap: wrap;
}

.listing-results-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #5a6a7e);
    margin: 0;
}

.listing-results-count span {
    color: var(--primary-navy, #004e75);
    font-weight: 800;
}

.listing-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted, #8a9ab0);
}

.sort-dropdown {
    padding: 6px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--primary-navy, #004e75);
    background: #f8fafc;
    outline: none;
    cursor: pointer;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    transition: border-color 0.2s;
}

.sort-dropdown:focus {
    border-color: var(--primary-navy, #004e75);
}

/* No results message */
.no-results-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted, #8a9ab0);
}

.no-results-msg svg {
    stroke: var(--text-muted, #8a9ab0);
    margin: 0 auto 16px;
    display: block;
}

.no-results-msg h3 {
    font-size: 1.2rem;
    color: var(--text-secondary, #5a6a7e);
    margin-bottom: 8px;
}

.no-results-msg p {
    font-size: 0.9rem;
}

/* ---- Responsive: sidebar stacks below cards on mobile ---- */
@media (max-width: 960px) {
    .doctor-listing-layout {
        grid-template-columns: 1fr;
    }

    .doctor-sidebar {
        position: static;
        max-height: none;
    }

    .specialty-filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px;
    }

    .specialty-filter-link {
        padding: 6px 14px;
        border-left: none;
        border-radius: 99px;
        border: 1.5px solid rgba(0, 78, 117, 0.15);
        font-size: 0.8rem;
    }

    .specialty-filter-link.active {
        background: var(--primary-navy, #004e75);
        color: #ffffff;
        border-color: var(--primary-navy, #004e75);
    }

    .request-call-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .reviews-header {
        flex-direction: column;
    }

    .reviews-rating-summary {
        min-width: unset;
        width: 100%;
        flex-wrap: wrap;
    }

    .related-doctors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .related-doctors-grid {
        grid-template-columns: 1fr;
    }

    .request-call-form-card {
        padding: 24px 20px;
    }

    .request-call-content h2 {
        font-size: 1.8rem;
    }
}

/* ============================================================
   FIND A DOCTOR - REDESIGNED LISTING PAGE COMPONENTS
   ============================================================ */

/* Breadcrumb */
.dir-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted, #8a9ab0);
    margin-bottom: 24px;
    font-weight: 500;
}

.dir-breadcrumb a {
    color: var(--text-muted, #8a9ab0);
    text-decoration: none;
    transition: color 0.2s;
}

.dir-breadcrumb a:hover {
    color: var(--primary-navy, #004e75);
}

.dir-breadcrumb span {
    color: var(--primary-navy, #004e75);
    font-weight: 700;
}

.dir-breadcrumb svg {
    stroke: var(--text-muted, #8a9ab0);
}

/* ---- SIDEBAR OVERRIDES for new accordion style ---- */
.doctor-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 14px;
    margin-bottom: 4px;
}

.sidebar-filter-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-secondary, #5a6a7e);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.sidebar-clear-all {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-teal, #1c97d4);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.sidebar-clear-all:hover {
    color: var(--primary-navy, #004e75);
}

/* Filter Accordion */
.filter-accordion {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 78, 117, 0.1);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 78, 117, 0.05);
    margin-bottom: 12px;
}

.accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--primary-navy, #004e75), var(--accent-blue, #1C4068));
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.accordion-toggle--light {
    background: #f7f9fb;
}

.accordion-toggle--light:hover {
    background: #eef3f8;
}

.accordion-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    letter-spacing: 0.3px;
}

.accordion-label svg {
    stroke: rgba(255, 255, 255, 0.8);
}

.accordion-label--dark {
    color: var(--primary-navy, #004e75);
}

.accordion-label--dark svg {
    stroke: var(--primary-navy, #004e75);
}

.accordion-chevron {
    fill: rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion-toggle--light .accordion-chevron {
    fill: var(--text-muted, #8a9ab0);
}

.filter-accordion:not(.open) .accordion-chevron {
    transform: rotate(-90deg);
}

.accordion-panel {
    display: block;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 78, 117, 0.2) transparent;
}

.accordion-panel::-webkit-scrollbar {
    width: 4px;
}

.accordion-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 78, 117, 0.2);
    border-radius: 4px;
}

/* Specialty search inside accordion */
.sidebar-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f7f9fb;
    border-bottom: 1px solid rgba(0, 78, 117, 0.06);
}

.sidebar-search-wrap svg {
    stroke: var(--text-muted, #8a9ab0);
    flex-shrink: 0;
}

.sidebar-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.82rem;
    color: var(--primary-navy, #004e75);
    outline: none;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.sidebar-search-input::placeholder {
    color: #c0cdd9;
}

/* Updated specialty list (with count badges) */
.specialty-filter-list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}

.specialty-filter-list li {
    margin: 0;
}

.specialty-filter-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary, #5a6a7e);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    border-bottom: 1px solid rgba(0, 78, 117, 0.04);
}

.specialty-filter-link:hover {
    background: rgba(0, 78, 117, 0.05);
    color: var(--primary-navy, #004e75);
    border-left-color: rgba(0, 78, 117, 0.3);
}

.specialty-filter-link.active {
    background: rgba(0, 78, 117, 0.08);
    color: var(--primary-navy, #004e75);
    border-left-color: var(--accent-teal, #1c97d4);
    font-weight: 700;
}

.spec-count {
    background: var(--primary-navy, #004e75);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    font-style: normal;
    flex-shrink: 0;
}

/* Checkbox filter list */
.checkbox-filter-list {
    list-style: none;
    padding: 14px 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-secondary, #5a6a7e);
    cursor: pointer;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    transition: color 0.2s;
}

.checkbox-filter-label:hover {
    color: var(--primary-navy, #004e75);
}

.filter-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--accent-teal, #1c97d4);
    cursor: pointer;
    flex-shrink: 0;
}

/* Need Help Banner */
.sidebar-need-help {
    background: linear-gradient(135deg, #0a2f52 0%, #004e75 100%);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    color: #ffffff;
    margin-top: 4px;
    box-shadow: 0 4px 20px rgba(0, 78, 117, 0.2);
}

.sidebar-need-help svg {
    stroke: var(--accent-teal, #1c97d4);
    margin: 0 auto 12px;
    display: block;
    opacity: 0.85;
}

.sidebar-need-help h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.sidebar-need-help p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    line-height: 1.5;
}

.sidebar-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-teal, #1c97d4);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.sidebar-help-btn:hover {
    background: #1571ae;
    transform: translateY(-1px);
}

/* ---- A–Z Directory Bar ---- */
.az-directory-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.1);
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 2px 10px rgba(0, 78, 117, 0.04);
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 20px;
}

.az-directory-bar::-webkit-scrollbar {
    display: none;
}

.az-bar-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted, #8a9ab0);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.az-bar-letters {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.az-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary, #5a6a7e);
    transition: background 0.18s, color 0.18s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    flex-shrink: 0;
}

.az-btn:hover:not(:disabled) {
    background: rgba(0, 78, 117, 0.08);
    color: var(--primary-navy, #004e75);
}

.az-btn.active {
    background: var(--primary-navy, #004e75);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 78, 117, 0.3);
}

.az-btn--disabled,
.az-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.az-ellipsis {
    font-size: 0.75rem;
    color: var(--text-muted, #8a9ab0);
    padding: 0 2px;
}

.az-view-all {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-teal, #1c97d4);
    background: rgba(28, 151, 212, 0.08);
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.az-view-all:hover {
    background: rgba(28, 151, 212, 0.15);
}

/* ---- Toolbar ---- */
.doctor-listing-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1.5px solid rgba(0, 78, 117, 0.08);
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.toolbar-count {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-navy, #004e75);
    margin: 0 0 4px;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.toolbar-count span {
    color: var(--primary-navy, #004e75);
}

.toolbar-sub {
    font-size: 0.82rem;
    color: var(--text-muted, #8a9ab0);
    margin: 0;
}

.toolbar-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---- Featured Doctor Card ---- */
.featured-doctor-card {
    background: linear-gradient(135deg, var(--primary-navy, #004e75) 0%, #00426b 100%);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    margin-bottom: 28px;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 78, 117, 0.25);
    min-height: 280px;
}

.featured-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #f4a01c;
    color: #004e75;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.featured-doc-photo {
    width: 280px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.featured-photo-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(28, 151, 212, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.featured-doc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.featured-doc-info {
    flex: 1;
    padding: 32px 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.featured-doc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.featured-doc-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    line-height: 1.15;
}

.featured-doc-specialty {
    font-size: 0.9rem;
    color: var(--accent-teal, #1c97d4);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

.featured-doc-role {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin: 0 0 12px;
}

.featured-doc-bio {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.06);
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.featured-doc-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 24px;
}

.featured-doc-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.featured-doc-meta .meta-item svg {
    stroke: var(--accent-teal, #1c97d4);
    flex-shrink: 0;
}

.featured-doc-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-featured-book {
    background: var(--accent-teal, #1c97d4);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 20px rgba(28, 151, 212, 0.4);
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    letter-spacing: 0.3px;
}

.btn-featured-book:hover {
    background: #1571ae;
    transform: translateY(-2px);
}

.btn-featured-profile {
    background: transparent;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.btn-featured-profile:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---- Availability Chips ---- */
.availability-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 99px;
    white-space: nowrap;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    letter-spacing: 0.2px;
}

.availability-chip--green {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
    border: 1px solid rgba(22, 163, 74, 0.25);
}

.availability-chip--blue {
    background: rgba(28, 151, 212, 0.1);
    color: var(--accent-teal, #1c97d4);
    border: 1px solid rgba(28, 151, 212, 0.2);
}

.avail-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    animation: pulse-dot 1.5s infinite;
    flex-shrink: 0;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.4);
    }
}

/* ============================================================
   DOCTOR LIST - 3-COLUMN GRID LAYOUT
   ============================================================ */

.doctor-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

/* Vertical card style (3-per-row) */
.doc-list-card {
    background: #ffffff;
    border: 1.5px solid rgba(0, 78, 117, 0.09);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(0, 78, 117, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.doc-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(0, 78, 117, 0.14);
    border-color: rgba(28, 151, 212, 0.4);
}

/* Photo column - full-width top photo */
.doc-photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #dde9f4 0%, #c2d8ec 100%);
    padding: 20px 16px 14px;
}

.doc-circle-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 16px rgba(0, 78, 117, 0.15);
    background: #bfd2e5;
    flex-shrink: 0;
}

.doc-circle-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.doc-list-card:hover .doc-circle-photo img {
    transform: scale(1.05);
}

/* Info column */
.doc-info-col {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}

.doc-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.doc-list-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary-navy, #004e75);
    margin: 0 0 4px;
    line-height: 1.3;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    transition: color 0.2s;
}

.doc-list-card:hover .doc-list-name {
    color: var(--accent-teal, #1c97d4);
}

.doc-list-specialty {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-teal, #1c97d4);
    margin: 0 0 3px;
    letter-spacing: 0.3px;
}

.doc-list-role {
    font-size: 0.75rem;
    color: var(--text-muted, #8a9ab0);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.doc-bookmark {
    background: none;
    border: none;
    cursor: pointer;
    color: #d1dce8;
    padding: 2px;
    flex-shrink: 0;
    transition: color 0.2s;
}

.doc-bookmark:hover {
    color: var(--accent-teal, #1c97d4);
}

/* Meta grid inside card */
.doc-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f7f9fb;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 78, 117, 0.06);
}

.doc-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-secondary, #5a6a7e);
    font-weight: 500;
    line-height: 1.35;
}

.doc-meta-item svg {
    stroke: var(--accent-teal, #1c97d4);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Card action buttons */
.doc-list-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.btn-list-profile {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-navy, #004e75);
    background: #ffffff;
    border: 1.5px solid rgba(0, 78, 117, 0.2);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.btn-list-profile:hover {
    border-color: var(--primary-navy, #004e75);
    background: rgba(0, 78, 117, 0.05);
}

.btn-list-book {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    background: var(--primary-navy, #004e75);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    letter-spacing: 0.2px;
}

.btn-list-book:hover {
    background: var(--accent-teal, #1c97d4);
}

/* ---- Pagination ---- */
.dir-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 10px;
}

.page-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1.5px solid rgba(0, 78, 117, 0.15);
    background: #ffffff;
    color: var(--text-secondary, #5a6a7e);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.page-btn:hover:not(:disabled):not(.active) {
    background: rgba(0, 78, 117, 0.06);
    border-color: var(--primary-navy, #004e75);
    color: var(--primary-navy, #004e75);
}

.page-btn.active {
    background: var(--primary-navy, #004e75);
    color: #ffffff;
    border-color: var(--primary-navy, #004e75);
    box-shadow: 0 3px 10px rgba(0, 78, 117, 0.25);
}

.page-btn--prev,
.page-btn--next {
    background: #f7f9fb;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-ellipsis {
    color: var(--text-muted, #8a9ab0);
    font-size: 0.9rem;
    padding: 0 4px;
}

.pagination-info {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #8a9ab0);
    margin: 0;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1100px) {
    .doctor-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-doctor-card {
        flex-direction: column;
        min-height: unset;
    }

    .featured-doc-photo {
        width: 100%;
        height: 220px;
    }

    .featured-doc-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 960px) {
    .doctor-listing-layout {
        grid-template-columns: 1fr;
    }

    .doctor-sidebar {
        position: static;
        max-height: none;
    }

    .accordion-panel {
        max-height: none;
    }

    .doctor-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .az-bar-letters {
        flex-wrap: wrap;
        gap: 4px;
    }
}

@media (max-width: 600px) {
    .doctor-list {
        grid-template-columns: 1fr;
    }

    .doc-meta-grid {
        grid-template-columns: 1fr;
    }

    .featured-doc-meta {
        grid-template-columns: 1fr;
    }

    .featured-doc-actions {
        flex-direction: column;
    }

    .btn-featured-book,
    .btn-featured-profile {
        text-align: center;
    }
}

/* ============================================================
   SIDEBAR PROFESSIONAL UPGRADE - PURE CSS POLISH
   ============================================================ */

/* Sidebar container refinement */
.doctor-sidebar {
    background: #f7f9fb;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 78, 117, 0.08);
    position: sticky;
    top: 24px;
    height: fit-content;
    box-shadow: 0 4px 24px rgba(0, 78, 117, 0.06);
}

/* ---- FILTER HEADER ---- */
.sidebar-filter-header {
    padding: 0 2px 16px;
    border-bottom: 1.5px solid rgba(0, 78, 117, 0.1);
    margin-bottom: 16px;
}

.sidebar-filter-label {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--text-secondary, #5a6a7e);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sidebar-clear-all {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-teal, #1c97d4);
    letter-spacing: 0.3px;
}

.sidebar-clear-all:hover {
    text-decoration: underline;
}

/* ---- ACCORDION BLOCKS ---- */
.filter-accordion {
    border-radius: 12px;
    border: 1px solid rgba(0, 78, 117, 0.09);
    margin-bottom: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 78, 117, 0.04);
    transition: box-shadow 0.2s;
}

.filter-accordion:hover {
    box-shadow: 0 3px 14px rgba(0, 78, 117, 0.09);
}

/* Specialty accordion - gradient header */
.accordion-toggle {
    padding: 13px 16px;
    background: linear-gradient(135deg, #004e75 0%, #006fa4 100%);
    border-bottom: none;
}

.accordion-toggle:hover {
    background: linear-gradient(135deg, #003f5f 0%, #005d8a 100%);
}

.accordion-label {
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    gap: 10px;
}

.accordion-label svg {
    opacity: 0.85;
    flex-shrink: 0;
}

.accordion-chevron {
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.filter-accordion:not(.open) .accordion-chevron {
    transform: rotate(-90deg);
}

/* Light accordion (Gender / Language headers) */
.accordion-toggle--light {
    background: #f0f5f9;
    border-bottom: 1px solid rgba(0, 78, 117, 0.08);
    padding: 12px 16px;
}

.accordion-toggle--light:hover {
    background: #e6edf4;
}

.accordion-label--dark {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-navy, #004e75);
    letter-spacing: 0.3px;
}

.accordion-toggle--light .accordion-chevron {
    fill: #7a8fa8;
    opacity: 1;
}

/* Panel scroll area */
.accordion-panel {
    max-height: 290px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c4d4e0 transparent;
}

.accordion-panel::-webkit-scrollbar {
    width: 3px;
}

.accordion-panel::-webkit-scrollbar-track {
    background: transparent;
}

.accordion-panel::-webkit-scrollbar-thumb {
    background: #c4d4e0;
    border-radius: 4px;
}

/* ---- SPECIALTY SEARCH ---- */
.sidebar-search-wrap {
    background: #f7f9fb;
    border-bottom: 1px solid rgba(0, 78, 117, 0.07);
    padding: 9px 14px;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sidebar-search-wrap svg {
    stroke: #9eaebf;
}

.sidebar-search-input {
    font-size: 0.8rem;
    color: var(--primary-navy, #004e75);
}

.sidebar-search-input::placeholder {
    color: #b8c8d8;
}

/* ---- SPECIALTY LIST ITEMS ---- */
.specialty-filter-list {
    padding: 4px 0;
}

.specialty-filter-link {
    padding: 9px 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4a5f72;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(0, 78, 117, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: all 0.18s ease;
    text-decoration: none;
    position: relative;
}

.specialty-filter-link::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c5d5e2;
    flex-shrink: 0;
    transition: background 0.2s;
    margin-right: 2px;
}

.specialty-filter-link:hover {
    background: rgba(0, 78, 117, 0.04);
    color: var(--primary-navy, #004e75);
    border-left-color: rgba(0, 78, 117, 0.25);
}

.specialty-filter-link:hover::before {
    background: rgba(0, 78, 117, 0.4);
}

.specialty-filter-link.active {
    background: rgba(0, 78, 117, 0.07);
    color: var(--primary-navy, #004e75);
    border-left-color: var(--accent-teal, #1c97d4);
    font-weight: 700;
}

.specialty-filter-link.active::before {
    background: var(--accent-teal, #1c97d4);
    box-shadow: 0 0 0 3px rgba(28, 151, 212, 0.15);
}

.spec-count {
    background: var(--primary-navy, #004e75);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    font-style: normal;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.specialty-filter-link.active .spec-count {
    background: var(--accent-teal, #1c97d4);
}

/* ---- CUSTOM CHECKBOXES (Gender / Language) ---- */
.checkbox-filter-list {
    padding: 14px 16px;
    gap: 0;
    display: flex;
    flex-direction: column;
}

.checkbox-filter-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4a5f72;
    border-bottom: 1px solid rgba(0, 78, 117, 0.04);
    cursor: pointer;
    transition: color 0.18s;
}

.checkbox-filter-label:last-child {
    border-bottom: none;
}

.checkbox-filter-label:hover {
    color: var(--primary-navy, #004e75);
}

/* Custom checkbox replacement */
.filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 2px solid #c4d4e0;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
}

.filter-checkbox:checked {
    background: var(--accent-teal, #1c97d4);
    border-color: var(--accent-teal, #1c97d4);
}

.filter-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.filter-checkbox:hover:not(:checked) {
    border-color: var(--primary-navy, #004e75);
}

/* ---- APPLY FILTERS BUTTON ---- */
.sidebar-apply-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--primary-navy, #004e75);
    color: #ffffff;
    font-size: 0.83rem;
    font-weight: 800;
    padding: 12px 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    letter-spacing: 0.5px;
    margin: 14px 0;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 4px 14px rgba(0, 78, 117, 0.18);
}

.sidebar-apply-btn:hover {
    background: var(--accent-teal, #1c97d4);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(28, 151, 212, 0.25);
}

/* ---- NEED HELP BANNER ---- */
.sidebar-need-help {
    background: linear-gradient(145deg, #0a2f52 0%, #004e75 55%, #005f8e 100%);
    border-radius: 14px;
    padding: 22px 18px 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 30px rgba(0, 78, 117, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

/* subtle decorative ring */
.sidebar-need-help::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1.5px solid rgba(28, 151, 212, 0.18);
    pointer-events: none;
}

.sidebar-need-help::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1.5px solid rgba(28, 151, 212, 0.12);
    pointer-events: none;
}

.sidebar-need-help svg {
    stroke: var(--accent-teal, #1c97d4);
    margin: 0 auto 10px;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(28, 151, 212, 0.35));
}

.sidebar-need-help h4 {
    font-size: 0.92rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 1;
}

.sidebar-need-help p {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 16px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

.sidebar-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-teal, #1c97d4);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 8px;
    padding: 11px 14px;
    text-decoration: none;
    font-family: var(--font-primary, 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif);
    letter-spacing: 0.4px;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(28, 151, 212, 0.35);
    position: relative;
    z-index: 1;
}

.sidebar-help-btn:hover {
    background: #1074ae;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(28, 151, 212, 0.45);
}

.sidebar-help-btn svg {
    stroke: none;
    fill: currentColor;
    margin: 0;
    display: inline;
    filter: none;
    flex-shrink: 0;
}

/* ---- SHADOW REDUCTION - SIDEBAR CLEAN-UP ---- */
.doctor-sidebar {
    box-shadow: none;
    border: 1.5px solid rgba(0, 78, 117, 0.1);
    background: #f5f7fa;
}

.filter-accordion {
    box-shadow: none;
    border: 1px solid rgba(0, 78, 117, 0.1);
}

.filter-accordion:hover {
    box-shadow: none;
    border-color: rgba(0, 78, 117, 0.18);
}

.sidebar-apply-btn {
    box-shadow: none;
}

.sidebar-apply-btn:hover {
    box-shadow: none;
    transform: none;
}

.sidebar-need-help {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-help-btn {
    box-shadow: none;
}

.sidebar-help-btn:hover {
    box-shadow: none;
    transform: none;
}

/* ---- FIX: Remove outer sidebar wrapper box - only accordion cards show ---- */
.doctor-sidebar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Each accordion is its own clean card */
.filter-accordion {
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 78, 117, 0.1) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.filter-accordion:hover {
    border-color: rgba(0, 78, 117, 0.2) !important;
    box-shadow: none !important;
}

/* Sidebar header sits above without a box */
.sidebar-filter-header {
    padding: 0 4px 14px;
    background: transparent;
    border-bottom: none;
    margin-bottom: 10px;
}

/* Apply Filters button - clean flat */
.sidebar-apply-btn {
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 12px 0 10px !important;
}

/* Need Help - standalone card */
.sidebar-need-help {
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* Specialty Page Scroll Lazy Load Animation */
.fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accordion Panel Overflow Visibility Fix for Male Checkbox cutoff */
#accordion-gender .accordion-panel {
    max-height: none !important;
    overflow: visible !important;
}

#accordion-language .accordion-panel {
    max-height: none !important;
    overflow: visible !important;
}

/* Professional Pagination Style Polishing */
.dir-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 32px 0 12px 0;
}

.dir-pagination .page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 78, 117, 0.12);
    background-color: #ffffff;
    color: var(--primary-navy, #004e75);
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: none !important;
}

.dir-pagination .page-btn:hover:not(:disabled):not(.active) {
    background-color: var(--primary-navy, #004e75);
    border-color: var(--primary-navy, #004e75);
    color: #ffffff;
}

.dir-pagination .page-btn.active {
    background-color: var(--accent-teal, #1c97d4);
    border-color: var(--accent-teal, #1c97d4);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(28, 151, 212, 0.2) !important;
}

.dir-pagination .page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(0, 78, 117, 0.06);
    background-color: #f7f9fb;
}

.dir-pagination .page-btn--prev,
.dir-pagination .page-btn--next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
}

.dir-pagination .page-btn--prev svg,
.dir-pagination .page-btn--next svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.5;
}

.pagination-info {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #5a6a7e);
    letter-spacing: 0.2px;
}

/* ---- CENTER ALIGNMENT FOR SUBPAGE HERO BANNER CONTENT ---- */
.search-hero-content,
.about-hero-content {
    margin: 50px auto 0 auto !important;
    text-align: center !important;
}

.search-hero-content .hero-desc,
.about-hero-content .hero-desc {
    margin-left: auto !important;
    margin-right: auto !important;
}

.search-hero-content .filter-bar-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Specialty Details Sliding Doctors Running Ticker Styles */
.dept-doctors-ticker-container {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px dashed rgba(0, 78, 117, 0.15);
    background: rgba(248, 250, 252, 0.5);
    padding: 10px;
}

.dept-doctors-ticker-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: runningTicker 15s linear infinite;
}

.dept-doctors-ticker-container:hover .dept-doctors-ticker-track {
    animation-play-state: paused;
}

.dept-doctors-ticker-track .dept-doctor-item {
    margin: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 78, 117, 0.03);
}

@keyframes runningTicker {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* Language Dropdown Selector Styles */
.lang-selector {
    position: relative;
    cursor: pointer;
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    min-width: 150px;
    padding: 6px 0;
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.lang-selector.active .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: #334155;
    font-size: 0.83rem;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: left;
    white-space: nowrap;
}

.lang-dropdown-item:hover {
    background: #EEF6FF;
    color: var(--primary-navy, #004e75);
}

/* Premium Step Grid and Guide Styles for Booking Page */
.booking-guide-section {
    background: #ffffff;
    border-top: 1px solid rgba(0, 78, 117, 0.08);
}

.booking-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 20px;
}

.booking-step-card {
    background: #f8fafc;
    border: 1px solid rgba(0, 78, 117, 0.05);
    border-radius: 12px;
    padding: 32px;
    position: relative;
    transition: all 0.3s ease;
}

.booking-step-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 139, 248, 0.2);
    box-shadow: 0 10px 30px rgba(0, 78, 117, 0.05);
}

.step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(0, 139, 248, 0.15);
    line-height: 1;
    margin-bottom: 16px;
}

.booking-step-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
}

.booking-step-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.booking-info-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    background: linear-gradient(135deg, #020b14 0%, #0c1c2b 100%);
    border-radius: 16px;
    padding: 48px;
    color: #ffffff;
    margin-top: 50px;
}

.booking-info-left h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.booking-info-left p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.65;
}

.booking-info-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 32px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.info-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 139, 248, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #008bf8;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.info-text h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.info-text p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

@media (max-width: 991px) {
    .booking-steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .booking-info-banner {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .booking-info-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 24px;
    }
}

/* Auto-sliding Vertical Department Ticker on Profile Sidebar */
.profile-dept-ticker-container {
    position: relative;
    border-radius: 12px;
    border: 1px dashed rgba(0, 78, 117, 0.15);
    background: #ffffff;
    padding: 14px 12px;
    margin-top: 24px;
}

.profile-dept-ticker-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary-navy);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 4px;
    border-bottom: 1px solid rgba(0, 78, 117, 0.08);
    padding-bottom: 6px;
}

.profile-dept-ticker-viewport {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.profile-dept-ticker-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: profileTickerScroll 20s linear infinite;
}

.profile-dept-ticker-container:hover .profile-dept-ticker-track {
    animation-play-state: paused;
}

.profile-dept-ticker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid rgba(0, 78, 117, 0.04);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-navy);
    transition: all 0.2s;
    text-decoration: none !important;
}

.profile-dept-ticker-item:hover {
    background: #edf5ff;
    border-color: rgba(0, 139, 248, 0.2);
    color: var(--secondary-color);
}

.profile-dept-ticker-item span.arrow {
    color: var(--secondary-color);
    font-weight: 800;
}

@keyframes profileTickerScroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.docked-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #1c97d4;
    text-transform: uppercase;
    margin-top: 10px;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.docked-text-link:hover {
    color: #004e75;
    transform: translateX(4px);
}

/* ====================================================
   STYLES FROM OBGYN BRAND PAGE
   ==================================================== */

/* ─── RESET & TOKENS ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ─── Brand palette (source of truth) ──────────────────────────────── */
    --slate-blue-header: #456482;
    --slate-blue-dark: #38536E;
    --slate-blue-light: #527394;
    --primary-navy-dark: #004e75;
    --primary-navy: #004e75;
    --primary-navy-light: #162E4D;
    --accent-blue: #1C4068;
    --accent-blue-bright: #1c97d4;
    --brand-cyan-light: #EBF8FF;
    --text-dark: #0F172A;
    --text-body: #475569;
    --text-light: #FFFFFF;
    --bg-light: #F8FAFC;
    --bg-card: #F0F6FF;

    /* ─── Semantic aliases - map the brand palette onto the design system ─ */
    --navy: var(--primary-navy);
    --navy-dark: var(--primary-navy-light);
    --navy-light: var(--slate-blue-light);
    --accent-cyan: var(--accent-blue-bright);
    --accent-cyan-light: rgba(28, 151, 212, 0.07);

    --rose: var(--accent-blue-bright);
    --rose-mid: var(--accent-blue);
    --rose-pale: var(--bg-card);
    --rose-light: #cfeaf9;

    --sage: var(--slate-blue-dark);
    --sage-light: var(--brand-cyan-light);

    --gold: var(--slate-blue-header);
    --gold-light: var(--brand-cyan-light);

    --warm-white: var(--bg-light);
    --white: var(--text-light);
    --ink: var(--text-dark);
    --ink-mid: var(--text-body);
    --ink-light: #94a3b8;
    --border: rgba(0, 78, 117, 0.09);
    --border-soft: rgba(0, 78, 117, 0.06);

    --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.05);
    --shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 30px 70px rgba(15, 23, 42, 0.14);

    --radius: 18px;
    --radius-sm: 10px;
    --radius-lg: 28px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: all 0.35s var(--ease);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 8% 15%, rgba(0, 78, 117, 0.02) 0%, transparent 42%),
        radial-gradient(circle at 92% 78%, rgba(28, 151, 212, 0.025) 0%, transparent 42%),
        var(--warm-white);
    color: var(--ink);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--rose-light);
    color: var(--navy-dark);
}

.eyebrow {
    display: inline-block;
    background: #EBF8FF;
    color: #1c97d4;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.serif {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.section-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(2.15rem, 3.8vw, 2.75rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.22;
    letter-spacing: -.015em;
    margin-bottom: 1.1rem;
}

.section-lead {
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-mid);
    line-height: 1.8;
    max-width: 600px;
}

/* ─── SITE HEADER ────────────────────────────────────────────────────── */
.site-header {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--border-soft);
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    position: sticky;
    top: 0;
    z-index: 300;
    transition: var(--transition);
}

@media(max-width: 768px) {
    .site-header {
        padding: 0 1.5rem;
    }
}

.logo {
    font-size: 18.5px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.01em;
}

.logo em {
    color: var(--accent-cyan);
    font-style: normal;
    font-weight: 800;
}

.hdr-actions {
    display: flex;
    gap: 26px;
    align-items: center;
}

.hdr-tel {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    display: none;
    letter-spacing: -0.01em;
    transition: var(--transition);
}

@media(min-width: 600px) {
    .hdr-tel {
        display: block;
    }
}

.hdr-tel:hover {
    color: var(--rose);
}

.hdr-book {
    background: var(--navy);
    color: #fff;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 11px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(0, 78, 117, 0.18);
}

.hdr-book:hover {
    background: var(--rose);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(28, 151, 212, 0.28);
}

/* ─── BREADCRUMB ──────────────────────────────────────────────────────── */
.breadcrumb {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-soft);
    padding: 13px 3rem;
    font-size: 12.5px;
    color: var(--ink-light);
    letter-spacing: 0.01em;
}

@media(max-width: 768px) {
    .breadcrumb {
        padding: 11px 1.5rem;
    }
}

.breadcrumb a {
    color: var(--navy-light);
    text-decoration: none;
    transition: var(--transition);
}

.breadcrumb a:hover {
    color: var(--rose);
}

.breadcrumb span {
    margin: 0 10px;
    color: var(--ink-light);
    opacity: 0.4;
}

/* ─── FLOATING BOTTOM BAR (mobile) ───────────────────────────────────── */
.float-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--border-soft);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px 20px;
    gap: 10px;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .06);
}

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

.fb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: var(--transition);
}

.fb-btn:hover {
    transform: translateY(-1px);
}

.fb-call {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 78, 117, 0.18);
}

.fb-wa {
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.18);
}

/* ─── HERO ────────────────────────────────────────────────────────────── */
.hero {
    background: url('../assets/images/specialties/obegyne.jpeg') no-repeat center center / cover;
    padding: 7.5rem 3rem 6rem;
    position: relative;
    overflow: hidden;
}

@media(max-width: 768px) {
    .hero {
        padding: 5rem 1.5rem 4.25rem;
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 82% 15%, rgba(28, 151, 212, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(28, 151, 212, 0.16) 0%, transparent 50%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .35;
    pointer-events: none;
    mask-image: linear-gradient(180deg, black, transparent 70%);
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media(max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 3.25rem;
    }
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 100px;
    padding: 8px 18px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 2.1rem;
}

.hero-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1c97d4;
    flex-shrink: 0;
    animation: pulse 2.2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(0.85);
    }
}

.hero h1 {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.14;
    letter-spacing: -.02em;
    margin-bottom: 1.7rem;
}

.hero h1 em {
    font-style: normal;
    color: rgba(207, 234, 249, 0.96);
    font-weight: inherit;
}

.hero-problem {
    font-size: 16.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.85;
    margin-bottom: 2.1rem;
    max-width: 600px;
}

.hero-problem strong {
    color: #fff;
    font-weight: 800;
}

.avail-signal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(28, 151, 212, 0.1);
    border: 1px solid rgba(28, 151, 212, 0.22);
    border-radius: 8px;
    padding: 10px 18px;
    margin-bottom: 2.1rem;
    font-size: 14px;
    font-weight: 600;
    color: #1c97d4;
    letter-spacing: 0.005em;
}

.avail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1c97d4;
    animation: pulse 1.6s infinite;
    flex-shrink: 0;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 1rem;
}

.btn-rose {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--rose);
    color: #fff;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    padding: 15px 30px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 8px 22px rgba(28, 151, 212, 0.32);
}

.btn-rose:hover {
    background: var(--rose-mid);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(28, 151, 212, 0.4);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    font-weight: 600;
    padding: 15px 0;
    text-decoration: none;
    transition: var(--transition);
}

.btn-ghost:hover {
    color: #fff;
}

.btn-ghost svg {
    transition: transform 0.25s var(--ease);
}

.btn-ghost:hover svg {
    transform: translateX(5px);
}

/* Hero Trust Card */
.hero-trust {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

@media(max-width: 900px) {
    .hero-trust {
        margin-top: 2rem;
    }
}

.trust-box {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 1.5rem 1.8rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, background 0.3s ease, margin 0.3s ease;
}

.trust-box:nth-child(1) {
    margin-left: -35px;
    animation: float1 6s ease-in-out infinite;
}

.trust-box:nth-child(2) {
    margin-left: 35px;
    animation: float2 6s ease-in-out infinite;
    animation-delay: 1.5s;
}

.trust-box:nth-child(3) {
    margin-left: -10px;
    animation: float3 6s ease-in-out infinite;
    animation-delay: 3s;
}

@media (max-width: 900px) {

    .trust-box:nth-child(1),
    .trust-box:nth-child(2),
    .trust-box:nth-child(3) {
        margin-left: 0 !important;
    }
}

.trust-box:hover {
    transform: translateY(-5px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.trust-num {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    min-width: 85px;
    text-align: center;
}

.trust-num sup {
    font-size: 1.8rem;
    color: var(--accent-cyan);
    margin-left: 2px;
}

.trust-content {
    flex: 1;
}

.trust-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.trust-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    margin-top: 0;
}

@keyframes float1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.trust-badges {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 1.7rem;
    padding-top: 1.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-badge-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 13.25px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
}

.tb-icon {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.tb-accent {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* ─── CONCERN NAVIGATOR ───────────────────────────────────────────────── */
.concern-wrap {
    background: var(--rose);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-xs);
    position: sticky;
    top: 0;
    z-index: 999;
}

.concern-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 1.25rem;
}

.concern-inner::-webkit-scrollbar {
    display: none;
}

.concern-tab {
    flex: 1;
    min-width: 148px;
    padding: 1rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    border-radius: 12px;
    background: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: var(--transition);
    margin: 0 3px;
}

.concern-tab:hover {
    background: var(--warm-white);
}

.concern-tab.active {
    background: var(--rose-pale);
    box-shadow: inset 0 0 0 1px rgba(28, 151, 212, 0.16);
}

.ct-icon {
    font-size: 20px;
    color: white;
    transition: var(--transition);
}

.concern-tab:hover .ct-icon {
    transform: scale(1.12) translateY(-2px);
    color: var(--rose);
}

.concern-tab.active .ct-icon {
    color: var(--rose);
}

.ct-label {
    font-size: 11px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.3;
    text-align: center;
}

.concern-tab.active .ct-label {
    color: var(--rose);
}

/* ─── CONCERN PANELS ──────────────────────────────────────────────────── */
.panels-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 3rem 0;
}

@media(max-width: 768px) {
    .panels-wrap {
        padding: 3rem 1.5rem 0;
    }
}

.panel {
    display: none;
}

.panel.active {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.25rem;
    animation: slideUpFade 0.55s var(--ease);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media(max-width: 850px) {
    .panel.active {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.panel-copy h2 {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(2.15rem, 3.8vw, 2.75rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.22;
    margin-bottom: 1.3rem;
    letter-spacing: -.015em;
}

.panel-copy p {
    font-size: 15.75px;
    font-weight: 400;
    color: var(--ink-mid);
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.panel-copy p strong {
    color: var(--ink);
    font-weight: 600;
}

.panel-copy .reassurance {
    background: var(--sage-light);
    border-left: 3px solid var(--sage);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1.3rem 1.7rem;
    margin: 1.9rem 0;
    font-size: 14px;
    color: var(--sage);
    font-weight: 600;
    line-height: 1.65;
    box-shadow: var(--shadow-xs);
}

.panel-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rose);
    color: #fff;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 27px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(28, 151, 212, 0.22);
}

.panel-book-btn:hover {
    background: var(--rose-mid);
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(28, 151, 212, 0.3);
}

/* Service Box */
.service-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    height: fit-content;
}

.sb-header {
    background: var(--navy);
    padding: 1.3rem 1.75rem;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: .13em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sb-item {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 13px 1.75rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14.25px;
    color: var(--ink-mid);
    transition: var(--transition);
}

.sb-item:last-child {
    border-bottom: none;
}

.sb-item:hover {
    background: var(--rose-pale);
    color: var(--rose-mid);
    padding-left: 2.1rem;
}

.sb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rose);
    flex-shrink: 0;
    margin-top: 9px;
    transition: var(--transition);
}

.sb-item:hover .sb-dot {
    transform: scale(1.6);
    background: var(--rose-mid);
}

/* ─── JOURNEY STRIP ───────────────────────────────────────────────────── */
.journey-section {
    max-width: 1200px;
    margin: 6rem auto 0;
    padding: 0 3rem;
}

@media(max-width: 768px) {
    .journey-section {
        padding: 0 1.5rem;
    }
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3.25rem;
    position: relative;
}

.journey-steps::after {
    content: '';
    position: absolute;
    top: 41px;
    left: 12.5%;
    right: 12.5%;
    height: 1.5px;
    background: var(--rose-light);
    z-index: 0;
}

@media(max-width: 800px) {
    .journey-steps {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem;
    }

    .journey-steps::after {
        display: none;
    }
}

.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.5rem;
    position: relative;
    z-index: 1;
}

.js-circle {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--rose-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--rose);
    margin-bottom: 1.3rem;
    box-shadow: 0 0 0 8px var(--warm-white), var(--shadow-sm);
    transition: var(--transition);
}

.journey-step.done .js-circle {
    background: var(--rose);
    border-color: var(--rose);
    color: #fff;
    box-shadow: 0 0 0 8px var(--warm-white), 0 10px 22px rgba(28, 151, 212, 0.28);
}

.journey-step:hover .js-circle {
    transform: translateY(-4px);
}

.js-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 7px;
    letter-spacing: -0.005em;
}

.js-desc {
    font-size: 13.25px;
    color: var(--ink-light);
    line-height: 1.6;
}

/* ─── TRUST TRINITY ───────────────────────────────────────────────────── */
.trust-trinity {
    background: var(--navy-dark);
    padding: 5.5rem 2rem;
    margin-top: 6rem;
    position: relative;
    overflow: hidden;
}

@media(max-width: 768px) {
    .trust-trinity {
        padding: 4rem 1.5rem;
    }
}

.trust-trinity::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(28, 151, 212, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

.trinity-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1;
}

.trinity-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    text-align: center;
    margin: 0 auto 3.25rem;
    max-width: 720px;
    letter-spacing: -.015em;
    line-height: 1.26;
}

.trinity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media(max-width: 900px) {
    .trinity-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

.trinity-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius);
    padding: 2.1rem;
    transition: var(--transition);
}

.trinity-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.trinity-objection {
    font-size: 14px;
    color: var(--accent-cyan);
    font-weight: 700;
    margin-bottom: 1.1rem;
    line-height: 1.4;
}

.trinity-answer {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
}

.trinity-answer strong {
    color: #fff;
    font-weight: 600;
}

.trinity-proof {
    margin-top: 1.7rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ─── TWO-COLUMN MAIN + SIDEBAR ───────────────────────────────────────── */
.content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5.75rem;
    /* padding-bottom: 140px; */
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4.25rem;
    align-items: start;
}

@media(max-width: 950px) {
    .content-wrap {
        grid-template-columns: 1fr;
        padding-top: 3.75rem;
        padding-bottom: 140px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .sticky-sidebar {
        position: static !important;
    }
}

/* ─── WHY MPH GRID ────────────────────────────────────────────────────── */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2.1rem 0 4rem;
}

@media(max-width: 600px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
}

.why-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.9rem;
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}

.why-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(28, 151, 212, 0.22);
}

.wi {
    width: 46px;
    height: 46px;
    background: var(--accent-cyan-light);
    color: var(--navy);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 1.3rem;
}

.wt {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 7px;
    letter-spacing: -0.005em;
}

.wd {
    font-size: 13.75px;
    color: var(--ink-mid);
    line-height: 1.65;
}

/* ─── DOCTOR GRID ─────────────────────────────────────────────────────── */
.doctor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2.1rem 0 4rem;
}

@media(max-width: 600px) {
    .doctor-grid {
        grid-template-columns: 1fr;
    }
}

.doc-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.7rem;
    display: flex;
    gap: 1.35rem;
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}

.doc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: rgba(28, 151, 212, 0.22);
}

.doc-av {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--rose-pale);
    color: var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.05);
}

.doc-female-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--sage);
    border-radius: 50%;
    border: 2.5px solid #fff;
    font-size: 9.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
}

.doc-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 3px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.doc-role {
    font-size: 11.25px;
    color: var(--rose);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.doc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.doc-tag {
    font-size: 10.75px;
    padding: 3px 9px;
    background: var(--warm-white);
    color: var(--ink-mid);
    border-radius: 5px;
    font-weight: 500;
    border: 1px solid var(--border);
}

.doc-book {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--rose);
    margin-top: 13px;
    font-weight: 600;
    transition: var(--transition);
    text-decoration: none;
}

.doc-book:hover {
    gap: 8px;
    color: var(--rose-mid);
}

/* ─── TESTIMONIALS ────────────────────────────────────────────────────── */
.testimonials-section {
    margin-bottom: 4rem;
}

.testimonials-section .eyebrow {
    justify-content: center;
}

.testimonials-section .eyebrow {
    display: block !important;
    margin: 0 auto 1.5rem !important;
    width: max-content;
    text-align: center;
}

.testimonials-section .section-title {
    text-align: center !important;
}

.testimonials-section .section-badge {
    display: block !important;
    margin: 0 auto 1.5rem !important;
    width: max-content;
}

.testi-grid {
    display: grid;
    gap: 1.15rem;
    margin-top: 2.1rem;
}

.testi-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--rose);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.9rem 2rem;
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.testi-card:hover {
    box-shadow: var(--shadow);
    transform: translateX(4px);
}

.testi-stars {
    color: #fbbc05;
    font-size: 12px;
    margin-bottom: 11px;
    display: flex;
    gap: 4px;
}

.testi-quote {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 18.5px;
    font-style: italic;
    color: var(--ink-mid);
    line-height: 1.72;
    margin-bottom: 13px;
}

.testi-who {
    font-size: 12.5px;
    color: var(--ink-light);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.testi-verified {
    background: var(--sage-light);
    color: var(--sage);
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq-section {
    margin-bottom: 4rem;
}

.faq-section .eyebrow {
    display: block !important;
    margin: 0 auto 1.5rem !important;
    width: max-content;
    text-align: center;
}

.faq-section .section-title {
    text-align: center;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-item:hover {
    border-color: rgba(0, 78, 117, 0.18);
    box-shadow: var(--shadow-xs);
}

.faq-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 19px 25px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
    letter-spacing: -0.005em;
}

.faq-btn:hover,
.faq-btn.open {
    background: var(--rose-pale);
    color: var(--rose-mid);
}

.faq-chev {
    font-size: 17px;
    color: var(--ink-light);
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
}

.faq-btn.open .faq-chev {
    transform: rotate(180deg);
    color: var(--rose);
}

.faq-body {
    display: none;
    padding: 0 25px 21px;
    font-size: 14.5px;
    line-height: 1.8;
    border-top: 1px solid var(--border-soft);
    animation: slideDown 0.35s var(--ease);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item.open .faq-body {
    display: block;
}

/* ─── LEAD MAGNET ─────────────────────────────────────────────────────── */
.lead-magnet {
    background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 58%, var(--navy-light) 100%);
    border-radius: var(--radius-lg);
    padding: 2.4rem 2.5rem;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.lead-magnet::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    top: -85px;
    right: -85px;
}

.lead-magnet-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

.lead-magnet h3 {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.95rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.8rem;
    line-height: 1.32;
}

.lead-magnet p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
    margin-bottom: 1.7rem;
    max-width: 520px;
}

.lm-form {
    display: flex;
    gap: 12px;
}

@media(max-width: 500px) {
    .lm-form {
        flex-direction: column;
    }
}

.lm-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    color: #fff;
    font-size: 14px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    outline: none;
    transition: var(--transition);
}

.lm-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.lm-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.11);
}

.lm-btn {
    background: var(--rose);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px 27px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    white-space: nowrap;
    transition: var(--transition);
    box-shadow: 0 6px 16px rgba(28, 151, 212, 0.28);
}

.lm-btn:hover {
    background: var(--rose-mid);
    transform: translateY(-2px);
}

.lm-privacy {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 12px;
}

/* ─── PACKAGES ────────────────────────────────────────────────────────── */
.packages-section {
    margin-bottom: 4rem;
}

.pkg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    margin-top: 2.35rem;
}

@media(max-width: 850px) {
    .pkg-grid {
        grid-template-columns: 1fr;
    }
}

.pkg-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.1rem 1.9rem;
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
}

.pkg-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.pkg-card.featured {
    border: 1.5px solid var(--rose);
    box-shadow: 0 16px 40px rgba(28, 151, 212, 0.14);
}

.pkg-badge-top {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rose);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 100px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pkg-name {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 7px;
}

.pkg-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rose);
    margin-bottom: 1.7rem;
    letter-spacing: -0.01em;
}

.pkg-price span {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-light);
}

.pkg-feature {
    display: flex;
    gap: 8px;
    font-size: 13.5px;
    padding: 6px 0;
    align-items: flex-start;
}

.pkg-check {
    color: var(--sage);
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 4px;
}

.pkg-btn {
    display: block;
    text-align: center;
    margin-top: 1.9rem;
    padding: 12px;
    /* Pill, like every other CTA on the site - was --radius-sm (10px) */
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid var(--rose);
    color: var(--rose);
    text-decoration: none;
    transition: var(--transition);
}

.pkg-btn:hover,
.pkg-card.featured .pkg-btn {
    background: var(--rose);
    color: #fff;
    box-shadow: 0 6px 18px rgba(28, 151, 212, 0.28);
}

/* ─── STICKY SIDEBAR ──────────────────────────────────────────────────── */
.sticky-sidebar {
    position: sticky;
    top: 92px;
}

.book-box {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: 1.6rem;
}

.book-box-hdr {
    background: var(--navy);
    padding: 1.45rem 1.9rem;
}

.book-box-hdr h3 {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.45rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 3px;
}

.book-box-hdr p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.book-box-body {
    padding: 1.7rem 1.9rem;
}

.avail-live {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sage-light);
    border: 1px solid rgba(56, 83, 110, 0.15);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 1.3rem;
    font-size: 13px;
    color: var(--sage);
    font-weight: 600;
}

.al-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sage);
    animation: pulse 1.6s infinite;
    flex-shrink: 0;
}

.avail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.avail-row:last-of-type {
    border-bottom: none;
}

.ar-day {
    color: var(--ink-mid);
    font-weight: 500;
}

.ar-time {
    font-weight: 600;
    color: var(--ink);
}

.ar-time.na {
    color: var(--ink-light);
    font-weight: 400;
}

.book-call {
    display: block;
    text-align: center;
    background: var(--rose);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px;
    border-radius: var(--radius-sm);
    margin-top: 1.7rem;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 6px 16px rgba(28, 151, 212, 0.22);
}

.book-call:hover {
    background: var(--rose-mid);
    transform: translateY(-2px);
}

.book-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px;
    border-radius: var(--radius-sm);
    margin-top: 10px;
    text-decoration: none;
    transition: var(--transition);
}

.book-wa:hover {
    background: #20ba59;
}

.book-note {
    font-size: 11px;
    color: var(--ink-light);
    text-align: center;
    margin-top: 12px;
}

.private-badge {
    background: var(--rose-pale);
    border: 1px solid rgba(28, 151, 212, 0.13);
    border-radius: var(--radius);
    padding: 1.35rem;
    margin-bottom: 1.6rem;
    text-align: center;
}

.pb-icon {
    font-size: 22px;
    color: var(--rose);
    margin-bottom: 8px;
}

.pb-text {
    font-size: 13px;
    color: var(--rose-mid);
    font-weight: 600;
    line-height: 1.5;
}

.info-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.45rem 1.7rem;
    margin-bottom: 1.4rem;
    box-shadow: var(--shadow-xs);
}

.ic-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--navy);
    margin-bottom: 13px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
}

.ic-row {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-mid);
    margin-bottom: 12px;
    align-items: flex-start;
    line-height: 1.55;
    font-weight: 600;
}

.ic-row:last-child {
    margin-bottom: 0;
}

.ic-i {
    font-size: 14px;
    color: var(--rose);
    flex-shrink: 0;
    width: 16px;
    padding-top: 2px;
    text-align: center;
}

.ins-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ins-chip {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    padding: 4px 10px;
    color: var(--ink-mid);
    font-weight: 500;
}

.gold-card {
    background: var(--gold-light);
    border: 1px solid rgba(69, 100, 130, 0.15);
    border-radius: var(--radius);
    padding: 1.45rem 1.7rem;
    margin-bottom: 1.4rem;
    box-shadow: var(--shadow-xs);
}

/* ─── FOOTER CTA ──────────────────────────────────────────────────────── */
.footer-cta {
    background: var(--navy-dark);
    padding: 6.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(28, 151, 212, 0.16) 0%, transparent 65%);
    pointer-events: none;
}

.ftr-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.ftr-inner h2 {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 2.85rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1.1rem;
    letter-spacing: -.02em;
}

.ftr-inner p {
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 300;
    margin-bottom: 2.6rem;
    line-height: 1.75;
}

.ftr-btns {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ftr-phone {
    display: block;
    color: #1c97d4;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1.9rem;
    letter-spacing: .04em;
    transition: var(--transition);
}

.ftr-phone:hover {
    color: #fff;
}

/* ─── SCROLL REVEAL ───────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ─── ACCESSIBILITY ───────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}


/* Testimonial Slider Styles - 3 Cards Visible */
.testi-slider-container {
    overflow: hidden;
    margin-top: 2.5rem;
    padding: 10px 0;
    width: 100%;
}

.testi-slides {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.testi-card-large {
    flex: 0 0 calc(33.333% - 1rem);
    /* 3 cards visible */
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--rose);
    border-radius: var(--radius);
    padding: 2.2rem 2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    transition: var(--transition);
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .testi-card-large {
        flex: 0 0 calc(50% - 0.75rem);
        /* 2 cards visible */
    }
}

@media (max-width: 600px) {
    .testi-card-large {
        flex: 0 0 100%;
        /* 1 card visible */
    }
}

.testi-card-large:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.testi-card-large .testi-stars {
    font-size: 14px;
    margin-bottom: 1rem;
    color: #fbbc05;
}

.testi-card-large .testi-quote {
    font-size: 16.5px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-style: italic;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink-mid);
    flex-grow: 1;
}

.testi-card-large .testi-who {
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.testi-verified {
    background: var(--sage-light);
    color: var(--sage);
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 2rem;
}

.slider-prev,
.slider-next {
    background: #fff;
    border: 1px solid var(--border);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-xs);
}

.slider-prev:hover,
.slider-next:hover {
    background: var(--navy);
    color: #fff;
    transform: scale(1.05);
}

.slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: var(--transition);
}

.slider-dots .dot.active {
    background: var(--rose);
    width: 24px;
    border-radius: 100px;
}

/* Doctors Slider Styles - 4 Doctors Visible */
.doctors-slider-container {
    overflow: hidden;
    margin-top: 2rem;
    padding: 10px 0;
    width: 100%;
}

.doctors-slides {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.doctors-slides .doctor-card {
    flex: 0 0 calc(25% - 1.125rem) !important;
    /* 4 cards visible */
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .doctors-slides .doctor-card {
        flex: 0 0 calc(33.333% - 1rem) !important;
        /* 3 cards visible */
    }
}

@media (max-width: 768px) {
    .doctors-slides .doctor-card {
        flex: 0 0 calc(50% - 0.75rem) !important;
        /* 2 cards visible */
    }
}

@media (max-width: 480px) {
    .doctors-slides .doctor-card {
        flex: 0 0 100% !important;
        /* 1 card visible */
    }
}

.doc-slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.doc-slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: var(--transition);
}

.doc-slider-dots .dot.active {
    background: var(--rose);
    width: 24px;
    border-radius: 100px;
}


/* ====================================================
   STYLES FROM HOMEPAGE SLIDER
   ==================================================== */

/* Doctors Slider Styles - 4 Doctors Visible */
.doctors-slider-container {
    overflow: hidden;
    margin-top: 2rem;
    padding: 10px 0;
    width: 100%;
}

.doctors-slides {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.doctors-slides .doctor-card {
    flex: 0 0 calc(25% - 1.125rem) !important;
    /* 4 cards visible */
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .doctors-slides .doctor-card {
        flex: 0 0 calc(33.333% - 1rem) !important;
        /* 3 cards visible */
    }
}

@media (max-width: 768px) {
    .doctors-slides .doctor-card {
        flex: 0 0 calc(50% - 0.75rem) !important;
        /* 2 cards visible */
    }
}

@media (max-width: 480px) {
    .doctors-slides .doctor-card {
        flex: 0 0 100% !important;
        /* 1 card visible */
    }
}

.doc-slider-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.doc-slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 78, 117, 0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.doc-slider-dots .dot.active {
    background: #004e75;
    width: 24px;
    border-radius: 100px;
}

.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 2rem;
}

.slider-prev,
.slider-next {
    background: #fff;
    border: 1px solid rgba(0, 78, 117, 0.1);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #004e75;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(0, 78, 117, 0.03);
}

.slider-prev:hover,
.slider-next:hover {
    background: #004e75;
    color: #fff;
    transform: scale(1.05);
}

/* ============================================================
   PLAN YOUR VISIT SECTION (pvs)
   ============================================================ */
.pvs-section {
    background: #ffffff;
    padding: 110px 0 130px;
    border-top: 1px solid #e8f0f5;
}

/* Header */
.pvs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 48px;
}

.pvs-header-left {
    flex: 1;
    max-width: 620px;
}

/* Eyebrow - pill badge matching section-badge style */
.pvs-eyebrow {
    display: inline-block;
    background: #EBF8FF;
    color: #1c97d4;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 18px;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-transform: uppercase;
}

.pvs-eyebrow-line {
    display: none;
}

.pvs-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #0b1e36;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 20px;
}

.pvs-subtitle {
    font-size: 15px;
    color: #334155;
    line-height: 1.75;
    margin: 0;
    max-width: 500px;
}

.pvs-header-right {
    flex-shrink: 0;
    padding-bottom: 6px;
}

.pvs-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #004e75;
    border: 2px solid #004e75;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: 99px;
    text-decoration: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.pvs-guide-btn:hover {
    background: #003a58;
    border-color: #003a58;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 78, 117, 0.25);
}

/* Divider */
.pvs-divider {
    border: none;
    border-top: 1px solid #e4edf3;
    margin: 0 0 50px;
}

/* Steps Grid - 4 cards side by side */
.pvs-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.pvs-step {
    background: #ffffff;
    border: 1px solid #e4edf3;
    border-radius: 16px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Featured step - filled with the theme navy gradient */
.pvs-step--featured,
.pvs-step:first-child {
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.97), rgba(0, 78, 117, 0.97));
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(9, 30, 55, 0.18);
}

.pvs-step:first-child .pvs-step-num {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.pvs-step:first-child .pvs-step-title {
    color: #ffffff;
}

.pvs-step:first-child .pvs-step-desc {
    color: rgba(255, 255, 255, 0.78);
}

.pvs-step:first-child .pvs-step-link {
    color: #8ed2f5;
}

.pvs-step:first-child .pvs-step-link:hover {
    color: #ffffff;
}

.pvs-step:hover {
    box-shadow: 0 8px 30px rgba(0, 78, 117, 0.10);
    transform: translateY(-4px);
}

.pvs-step-num {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #1c97d4;
    background: #EBF8FF;
    padding: 4px 10px;
    border-radius: 99px;
    letter-spacing: 0.08em;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    margin-bottom: 20px;
    align-self: flex-start;
}

.pvs-step-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #004e75;
    margin: 0 0 12px;
    line-height: 1.3;
}

.pvs-step-desc {
    font-size: 16px;
    color: black;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.7;
    flex: 1;
    margin: 0 0 24px;
}

.pvs-step-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1c97d4;
    text-decoration: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: color 0.2s, gap 0.2s;
    margin-top: auto;
}

.pvs-step-link:hover {
    color: #004e75;
    gap: 8px;
}

/* Insurance Callout Bar */
.pvs-insurance-bar {
    background: #EBF8FF;
    border: 1px solid #b8dff5;
    border-left: 5px solid #1c97d4;
    border-radius: 14px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pvs-insurance-bar-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.pvs-insurance-bar-icon {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c97d4;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(28, 151, 212, 0.15);
}

.pvs-insurance-title {
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #004e75;
    margin: 0 0 5px;
}

.pvs-insurance-desc {
    font-size: 14px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

.pvs-insurance-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #004e75;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 30px;
    border-radius: 99px;
    text-decoration: none;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: background 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.pvs-insurance-btn:hover {
    background: #003a58;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .pvs-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pvs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pvs-title {
        font-size: 30px;
    }

    .pvs-steps {
        grid-template-columns: 1fr;
    }

    .pvs-insurance-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 24px;
    }

    .pvs-insurance-btn {
        width: 100%;
        justify-content: center;
    }
}

/*==================================================
GLOBAL FONT CONSISTENCY
One family for every text element across the theme.
Icon fonts (Font Awesome) are excluded.
==================================================*/

:root {
    --font-primary: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ab-display: var(--font-primary);
    --ab-text: var(--font-primary);
    --dr-display: var(--font-primary);
    --dr-text: var(--font-primary);
}

html {
    font-family: var(--font-primary);
}

/* Everything inherits the one family - including form controls,
   buttons and <code>/<pre>, which otherwise use browser defaults.
   Font Awesome keeps its icon font: its class selectors (0,1,0)
   outrank the universal selector (0,0,0). */
*,
*::before,
*::after {
    font-family: inherit;
}

body,
h1, h2, h3, h4, h5, h6,
p, a, li, td, th, label, small, blockquote, figcaption,
input, select, textarea, button, option, optgroup {
    font-family: var(--font-primary);
}

::placeholder {
    font-family: var(--font-primary);
}


/*==================================================
UNIFIED BUTTON SYSTEM
Every call-to-action follows the navy pill style of
the "Book an Appointment" button.
Small utility controls (tabs, pagination, A-Z filter,
accordion toggles, WhatsApp) keep their own styling.
==================================================*/

.new-about-btn-primary,
.ab-btn,
.dr-btn,
.btn-emergency-guide,
.btn-location-directions,
.sidebar-apply-btn,
.emergency-phone-btn,
.btn-card-profile,
.btn-primary,
.btn-pill,
.btn-dark,
.ab-btn-solid,
.about-btn-primary,
.dr-book-btn,
.profile-book-btn,
.panel-book-btn,
.btn-card-booking,
.form-submit-btn,
.filter-submit-btn,
.btn-callback-submit,
.faq-help-btn-primary,
.call-clinic-btn,
.sidebar-help-btn,
.pvs-guide-btn,
.pvs-insurance-btn,
.new-card-link.btn,
.hero-cta-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.95), rgba(0, 78, 117, 0.95)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    box-sizing: border-box;
    min-height: 54px;
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.new-about-btn-primary:hover,
.ab-btn:hover,
.dr-btn:hover,
.btn-emergency-guide:hover,
.btn-location-directions:hover,
.sidebar-apply-btn:hover,
.emergency-phone-btn:hover,
.btn-card-profile:hover,
.btn-primary:hover,
.btn-pill:hover,
.btn-dark:hover,
.ab-btn-solid:hover,
.about-btn-primary:hover,
.dr-book-btn:hover,
.profile-book-btn:hover,
.panel-book-btn:hover,
.btn-card-booking:hover,
.form-submit-btn:hover,
.filter-submit-btn:hover,
.btn-callback-submit:hover,
.faq-help-btn-primary:hover,
.call-clinic-btn:hover,
.sidebar-help-btn:hover,
.pvs-guide-btn:hover,
.pvs-insurance-btn:hover,
.hero-cta-primary:hover {
    background: #162E4D !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 30, 54, 0.28);
}

/* Secondary / outline actions - same pill shape, lighter weight */
.new-about-btn-secondary,
.btn-location-review,
.faq-help-btn,
.btn-secondary,
.about-btn-secondary,
.ab-btn-line,
.ab-btn-light,
.dr-btn-light,
.dr-btn-ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent !important;
    color: #004e75 !important;
    border: 1.5px solid rgba(0, 78, 117, 0.35) !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    box-sizing: border-box;
    min-height: 54px;
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.new-about-btn-secondary:hover,
.btn-location-review:hover,
.faq-help-btn:hover,
.btn-secondary:hover,
.about-btn-secondary:hover,
.ab-btn-line:hover,
.ab-btn-light:hover,
.dr-btn-light:hover,
.dr-btn-ghost:hover {
    background: rgba(0, 78, 117, 0.06) !important;
    border-color: #004e75 !important;
    transform: translateY(-2px);
}

/* Arrow badge for CTAs that do not already carry one */
.new-about-btn-primary:not(:has(.icon-circle))::after,
.ab-btn:not(:has(.icon-circle))::after,
.dr-btn:not(:has(.icon-circle))::after,
.btn-primary:not(:has(.icon-circle))::after,
.btn-pill:not(:has(.icon-circle))::after,
.about-btn-primary:not(:has(.icon-circle))::after,
.pvs-guide-btn:not(:has(.icon-circle))::after,
.pvs-insurance-btn:not(:has(.icon-circle))::after,
.panel-book-btn:not(:has(.icon-circle))::after,
.dr-book-btn:not(:has(.icon-circle))::after,
.profile-book-btn:not(:has(.icon-circle))::after {
    content: '\2197';
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #004e75;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.new-about-btn-primary:hover::after,
.ab-btn:hover::after,
.dr-btn:hover::after,
.btn-primary:hover::after,
.btn-pill:hover::after,
.about-btn-primary:hover::after,
.pvs-guide-btn:hover::after,
.pvs-insurance-btn:hover::after,
.panel-book-btn:hover::after,
.dr-book-btn:hover::after,
.profile-book-btn:hover::after {
    transform: rotate(45deg);
}


/*==================================================
SECTION HEADING SCALE
Every section heading shares one size, weight and
colour. Body copy keeps its own sizes and styles -
only the family is shared.
==================================================*/

:root {
    --heading-size: clamp(30px, 3.2vw, 45px);
    --heading-color: #004e75;
    --heading-color-on-dark: #ffffff;
}

.section-title,
.new-about-title,
.pvs-title,
.emergency-title,
.ab-title,
.ab-section-title,
.dr-title,
.dr-section-title,
.fb-title,
.faq-title,
.pkg-title,
.contact-title,
.page-section-title {
    font-family: var(--font-primary);
    font-size: var(--heading-size) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: var(--heading-color);
    margin-bottom: 20px;
}

/* Headings that sit on dark backgrounds stay white */
.emergency-title,
.departments-section .section-title,
.dept-header-area .section-title,
.hero-section .section-title,
[class*="--dark"] .section-title {
    color: var(--heading-color-on-dark);
}


/*==================================================
SECTION EYEBROW / TAG SCALE
Every section eyebrow follows the About section pill:
pale blue field, 11px uppercase, 99px radius.
Interactive chips (dept filters, card tags, megamenu
tags) keep their own styling.
==================================================*/

:root {
    --eyebrow-bg: #EBF8FF;
    --eyebrow-color: #1c97d4;
    --eyebrow-size: 11px;
}

.new-about-badge,
.section-badge,
.pvs-eyebrow,
.eyebrow,
.ab-eyebrow,
.dr-eyebrow,
.hero-kicker,
.faq-eyebrow,
.contact-eyebrow,
.emergency-section .emergency-badge {
    display: inline-block;
    background: var(--eyebrow-bg) !important;
    color: var(--eyebrow-color) !important;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.2;
    text-transform: uppercase;
    padding: 6px 14px !important;
    border-radius: 99px !important;
    margin-bottom: 20px;
}


/*==================================================
SECTION INTRO COPY SCALE
The paragraph that sits under a section heading uses
the About section's size, leading and colour.
Card copy and list copy keep their own smaller sizes.
==================================================*/

:root {
    --intro-size: 17px;
    --intro-line-height: 1.4;
    --intro-color: #000000;
    --intro-color-on-dark: rgba(255, 255, 255, 0.85);
}

.new-about-desc,
.section-desc,
.pvs-subtitle,
.emergency-desc,
.ab-lead,
.dr-subtitle,
.faq-subtitle,
.contact-desc {
    font-family: var(--font-primary);
    font-size: var(--intro-size) !important;
    line-height: var(--intro-line-height) !important;
    color: var(--intro-color) !important;
}

/* Intro copy on dark backgrounds */
.emergency-section .emergency-desc,
.departments-section .section-desc,
.dept-header-area .section-desc,
.hero-section .section-desc,
[class*="--dark"] .section-desc {
    color: var(--intro-color-on-dark) !important;
}

@media (max-width: 768px) {
    :root {
        --intro-size: 15.5px;
    }
}


/*==================================================
HOMEPAGE SPECIALTY CARDS
Matches the specialties directory card: pale card,
navy uppercase name, one-line caption underneath.
Scoped to .dept-grid so the specialties page keeps
its own directory layout.
==================================================*/

.dept-grid .dept-card {
    background: rgba(255, 255, 255);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 26px 18px;
    box-shadow: 0 6px 24px rgba(6, 29, 51, 0.08);
}

.dept-grid .dept-card:hover {
    background: #ffffff;
    border-color: rgba(0, 78, 117, 0.18);
    box-shadow: 0 14px 30px rgba(6, 29, 51, 0.14);
}

.dept-grid .dept-icon {
    width: 110px;
    height: 110px;
    color: #004e75;
    margin: 0 auto 16px auto;
}

.dept-grid .dept-card .dept-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #004e75;
    text-transform: uppercase;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px;
}

.dept-grid .dept-card .dept-sub {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: black;
    line-height: 1.4 !important;
}

/* Captions are written to fit one line at this width */
@media (min-width: 1025px) {
    .dept-grid .dept-card .dept-sub {
        white-space: nowrap;
    }
}


/*==================================================
PATIENT REVIEW CARDS - GOOGLE REVIEW LAYOUT
Flat white card on a pale field: Google mark top
left, stars top right, plain review text, then the
reviewer name and detail on the bottom row.
==================================================*/

.testimonials-section {
    background: #f7f9fb;
}

.testimonials-section .testi-card-large {
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 32px 30px 26px;
    box-shadow: 0 1px 3px rgba(6, 29, 51, 0.07);
    min-height: 300px;
}

.testimonials-section .testi-card-large:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(6, 29, 51, 0.11);
}

.testi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.testi-google-logo {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/><path fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/><path fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.28-3.14.76-4.59l-7.97-6.19C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.78l7.97-6.19z'/><path fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/></svg>");
}

.testimonials-section .testi-card-large .testi-stars {
    margin-bottom: 0;
    font-size: 14px;
    gap: 5px;
    color: #fbbc05;
}

.testimonials-section .testi-card-large .testi-quote {
    font-style: normal;
    font-size: 15.5px;
    line-height: 1.62;
    color: #3c4043;
    margin-bottom: 28px;
}

.testimonials-section .testi-card-large .testi-who {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
}

.testi-name {
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    white-space: nowrap;
}

.testi-meta {
    font-size: 12.5px;
    color: #70757a;
    text-align: right;
}

@media (max-width: 600px) {
    .testimonials-section .testi-card-large .testi-who {
        flex-wrap: wrap;
    }

    .testi-meta {
        text-align: left;
    }
}


/*==================================================
CARD TYPE SCALE
Card titles and card body copy share one size, weight
and colour across every section. Cards on dark
backgrounds use the light variants.
==================================================*/

:root {
    --card-title-size: 18px;
    --card-title-color: #004e75;
    --card-title-color-on-dark: #ffffff;
    --card-body-size: 14.5px;
    --card-body-line-height: 1.4;
    --card-body-color: black;
    --card-body-color-on-dark: rgba(255, 255, 255, 0.78);
    --card-link-size: 11px;
    --card-link-color: #1c97d4;
    --card-link-color-on-dark: #8ed2f5;
}

/* Card titles */
.pvs-step-title,
.pvs-insurance-title,
.hero-quick-title,
.new-card-title,
.award-title,
.dept-name,
.emergency-list-title,
.fb-card-title,
.ab-card-title,
.dr-card-title {
    font-family: var(--font-primary);
    font-size: var(--card-title-size) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--card-title-color);
}

/* Card body copy */
.pvs-step-desc,
.pvs-insurance-desc,
.hero-quick-desc,
.new-card-desc,
.award-desc,
.dept-sub,
.emergency-list-desc,
.fb-card-desc,
.ab-card-desc,
.dr-card-desc {
    font-family: var(--font-primary);
    font-size: var(--card-body-size) !important;
    font-weight: 400 !important;
    line-height: var(--card-body-line-height) !important;
    color: var(--card-body-color);
}

/* Hero quick bar carries an id-scoped colour - match the token */
#home .hero-quick-title {
    color: var(--card-title-color);
}

#home .hero-quick-desc {
    color: var(--card-body-color);
}

/* Card link labels */
.pvs-step-link,
.new-card-link {
    font-size: var(--card-link-size) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    color: var(--card-link-color);
}

/* Cards on dark backgrounds */
.pvs-step:first-child .pvs-step-title {
    color: var(--card-title-color-on-dark);
}

.pvs-step:first-child .pvs-step-desc {
    color: var(--card-body-color-on-dark);
}

.pvs-step:first-child .pvs-step-link {
    color: var(--card-link-color-on-dark);
}

@media (max-width: 768px) {
    :root {
        --card-title-size: 17px;
        --card-body-size: 14px;
    }
}


/*==================================================
ACCREDITATIONS & AWARDS SECTION
Pale blue field with a faint dot pattern, uppercase
heading, and white cards with circular award badges.
==================================================*/

.awards-section {
    position: relative;
    padding: 110px 0 120px;
    background: linear-gradient(135deg, #eaf1fa 0%, #f3f8fc 45%, #eef5fb 100%);
    border-top: none;
    overflow: hidden;
}

/* faint dotted field, fading out to the left */
.awards-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 78, 117, 0.16) 1.5px, transparent 1.6px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 62%, transparent 98%);
    mask-image: linear-gradient(100deg, transparent 22%, #000 62%, transparent 98%);
    opacity: 0.65;
    pointer-events: none;
}

.awards-section>.container {
    position: relative;
    z-index: 1;
}

.awards-layout {
    grid-template-columns: 1fr 2.1fr;
    gap: 60px;
    align-items: center;
}

.awards-section .section-title {
    /* text-transform: uppercase; */
    letter-spacing: 0.01em !important;
    margin-bottom: 26px;
}

.awards-section .section-desc {
    max-width: 460px;
}

/* the pale eyebrow would vanish into the pale field */
.awards-section .section-badge {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(9, 44, 78, 0.06);
}

.awards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.award-card {
    background: #ffffff;
    border: 1px solid rgba(226, 235, 245, 0.9);
    border-radius: 20px;
    padding: 34px 26px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(9, 44, 78, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.award-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(9, 44, 78, 0.12);
    border-color: rgba(0, 78, 117, 0.18);
}

/* circular badge */
.award-badge-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 22px auto;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(226, 235, 245, 0.9);
    box-shadow: 0 6px 16px rgba(9, 44, 78, 0.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.award-badge-icon img {
    width: 78%;
    height: 78%;
    max-height: none;
    object-fit: contain;
}

.award-title {
    /* text-transform: uppercase; */
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.35 !important;
    color: var(--card-title-color);
    margin-bottom: 14px;
}

.award-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: black;
    margin-bottom: 22px;
    flex: 1;
}

.award-year {
    display: inline-block;
    font-size: 19px;
    font-weight: 700;
    color: var(--card-title-color);
    letter-spacing: 0.01em;
}

@media (max-width: 1024px) {
    .awards-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .awards-section .section-desc {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .awards-grid {
        grid-template-columns: 1fr;
    }
}


/*==================================================
EMERGENCY FEATURE CARDS
Same card treatment as the specialties cards in the
departments container: pale glass panel, navy title
and grey body copy, icon in a soft blue tile.
==================================================*/

.emergency-list-item {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 24px rgba(6, 29, 51, 0.08);
}

.emergency-list-item:hover {
    background: #ffffff;
    border-color: rgba(0, 78, 117, 0.18);
    box-shadow: 0 14px 30px rgba(6, 29, 51, 0.14);
    transform: translateY(-4px);
}

.emergency-list-icon {
    background: rgba(28, 151, 212, 0.12);
    color: #004e75;
}

.emergency-list-item:hover .emergency-list-icon {
    background: #1c97d4;
    color: #ffffff;
}

.emergency-list-item .emergency-list-title {
    color: #004e75;
}

.emergency-list-item .emergency-list-desc {
    color: #475569;
}


/*==================================================
GET DIRECTIONS BUTTON
Sits on the dark emergency field, so it inverts to a
white pill with navy label instead of the navy fill.
==================================================*/

.btn-emergency-guide {
    background: #ffffff !important;
    color: #004e75 !important;
    border: 1px solid #ffffff !important;
}

.btn-emergency-guide:hover {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #00395a !important;
    border-color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}


/*==================================================
SPECIALTY FILTER PANEL
The specialty list is shown in full rather than in a
scroll box, so the sidebar grows to fit every entry.
==================================================*/

#panel-specialty {
    max-height: none;
    overflow: visible;
}


/*==================================================
WHATSAPP ACTIONS
WhatsApp buttons keep the brand green rather than
inheriting the navy pill fill.
==================================================*/

.dr-book-wa,
.dr-btn-wa,
.btn-whatsapp,
.wa-book {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
}

.dr-book-wa:hover,
.dr-btn-wa:hover,
.btn-whatsapp:hover,
.wa-book:hover {
    background: #1eb857 !important;
    border-color: #1eb857 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.32);
}

.dr-book-wa::after,
.dr-btn-wa::after,
.btn-whatsapp::after,
.wa-book::after {
    color: #128c4a !important;
}


/*==================================================
INNER PAGE TYPE ALIGNMENT
The inner pages carry their own page-local heading,
eyebrow and lead-copy classes. These map them onto
the same scale index.html uses, so one system runs
across the whole theme. Elements marked .on-dark or
.text-white keep their light treatment.
==================================================*/

/* Section headings */
.ab-h2,
.dr-h2,
.ab-section-title,
.dr-section-title {
    font-family: var(--font-primary) !important;
    font-size: var(--heading-size) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
}

.ab-h2:not(.on-dark):not(.text-white),
.dr-h2:not(.on-dark):not(.text-white) {
    color: var(--heading-color) !important;
}

/* Section eyebrows - pill treatment wins over page-local text styling */
.section-tag,
.about-badge {
    display: inline-block;
    background: var(--eyebrow-bg) !important;
    color: var(--eyebrow-color) !important;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    line-height: 1.2;
    text-transform: uppercase;
    padding: 6px 14px !important;
    border-radius: 99px !important;
    margin-bottom: 20px;
}

/* Applies to the .on-dark variants too - without this they keep the
   page-local display:block and the pill stretches the full column */
.ab-eyebrow,
.dr-eyebrow {
    display: inline-block !important;
    width: auto !important;
    max-width: max-content;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: left;
}

/* Section lead copy */
.ab-lede:not(.on-dark),
.dr-p {
    font-family: var(--font-primary) !important;
    font-size: var(--intro-size) !important;
    line-height: var(--intro-line-height) !important;
}

.ab-lede:not(.on-dark),
.dr-p:not(.on-dark) {
    color: var(--intro-color) !important;
}


/*==================================================
DOCTOR HERO CTAS
The call action on the profile hero carries the dark
navy fill with a white label.
==================================================*/

.dr-page .dr-hero-cta .dr-btn-light {
    background: #07172c !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

.dr-page .dr-hero-cta .dr-btn-light:hover {
    background: #0b2440 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.dr-page .dr-hero-cta .dr-btn-light::after {
    background: #ffffff !important;
    color: #004e75 !important;
}


/*==================================================
REQUEST A CALL BACK
The third action in the booking card is the quiet
one, so it takes a pale fill with a navy label.
==================================================*/

.dr-book-callback {
    background: #1c97d4 !important;
    color: #ffffff !important;
    border: 1px solid #1c97d4 !important;
    box-shadow: 0 8px 20px rgba(28, 151, 212, 0.24) !important;
}

.dr-book-callback:hover {
    background: #1683bb !important;
    color: #ffffff !important;
    border-color: #1683bb !important;
    box-shadow: 0 12px 26px rgba(28, 151, 212, 0.32) !important;
}

.dr-book-callback::after {
    background: #ffffff !important;
    color: #1c97d4 !important;
}


/*==================================================
CLOSING CTA BAND
Sits on the dark navy field: the primary action is a
white pill with a navy label, so it stays legible
next to the green WhatsApp action.
==================================================*/

.dr-close-cta .dr-btn-light {
    background: #ffffff !important;
    color: #004e75 !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.dr-close-cta .dr-btn-light:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #00395a !important;
    border-color: #ffffff !important;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

.dr-close-cta .dr-btn-light::after {
    background: #004e75 !important;
    color: #ffffff !important;
}


/*==================================================
DOCTOR PROFILE PAGE TYPE
The profile pages carry page-local sizes. These map
their card titles and body copy onto the same card
scale index.html uses, so colour, size and family
match across the theme.
==================================================*/

.dr-exp-body h3,
.dr-edu-body h3,
.dr-ledger h3,
.dr-booking-hd h3 {
    font-family: var(--font-primary) !important;
    font-size: var(--card-title-size) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

.dr-exp-body h3,
.dr-edu-body h3,
.dr-ledger h3 {
    color: var(--card-title-color) !important;
}

.dr-exp-body p,
.dr-edu-body p,
.dr-ledger p,
.dr-roles li,
.dr-refs li {
    font-family: var(--font-primary) !important;
    font-size: var(--card-body-size) !important;
    line-height: var(--card-body-line-height) !important;
    color: var(--card-body-color) !important;
}

/* Fact strip labels follow the eyebrow colour and weight */
.dr-page .dr-fact-k {
    font-family: var(--font-primary) !important;
    color: var(--card-body-color) !important;
}

.dr-page .dr-fact-v {
    font-family: var(--font-primary) !important;
    color: var(--card-title-color) !important;
}

.dr-page .dr-fact-v small {
    font-family: var(--font-primary) !important;
    color: var(--card-body-color) !important;
}


/*==================================================
BOOKING RAIL CARD
Taller, calmer card: a roomier header, more space
around the schedule rows, and a clear gap before the
booking actions.
==================================================*/

.dr-page .dr-booking-hd {
    padding: 1.75rem 1.6rem;
}

.dr-page .dr-booking-hd p {
    margin-top: 6px;
    font-size: 13px;
}

.dr-page .dr-booking-bd {
    padding: 1.6rem 1.6rem 1.75rem;
}

.dr-page .dr-booking-label {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin-bottom: 0.6rem;
}

.dr-page .dr-line {
    padding: 14px 0;
    font-size: 13.5px;
    color: var(--card-body-color);
}

.dr-page .dr-booking-label + .dr-line {
    padding-top: 4px;
}

/* Space the actions away from the schedule and each other */
.dr-page .dr-book-btn {
    margin-top: 14px;
    padding: 15px 18px;
}

.dr-page .dr-line + .dr-book-btn,
.dr-page .dr-line ~ .dr-book-btn:first-of-type {
    margin-top: 1.6rem;
}

.dr-page .dr-book-note {
    margin-top: 1.25rem;
    font-size: 12px;
    color: var(--card-body-color);
}

.dr-page .dr-book-note a {
    color: var(--card-title-color);
    font-weight: 600;
    text-decoration: none;
}

.dr-page .dr-book-note a:hover {
    text-decoration: underline;
}


/*==================================================
CAREER RECORD BAND - DARK
The professional experience section runs on a deep
navy field so the career ledger reads as a distinct,
weighted block between the light sections.
==================================================*/

#experience.dr-band {
    background: linear-gradient(135deg, #07172c 0%, #0b3350 55%, #0e4568 100%);
    position: relative;
    overflow: hidden;
}

/* Faint corner glow, same device the emergency band uses */
#experience.dr-band::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 151, 212, 0.16) 0%, transparent 68%);
    pointer-events: none;
}

#experience .dr-wrap {
    position: relative;
    z-index: 1;
}

#experience .dr-h2 {
    color: var(--heading-color-on-dark) !important;
}

#experience .dr-ledger {
    border-top-color: rgba(255, 255, 255, 0.28);
}

#experience .dr-ledger li {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

#experience .dr-ledger li:hover {
    border-bottom-color: var(--card-link-color-on-dark);
}

#experience .dr-yr {
    color: var(--card-link-color-on-dark);
}

#experience .dr-ledger h3 {
    color: var(--card-title-color-on-dark) !important;
}

#experience .dr-ledger p {
    color: var(--card-body-color-on-dark) !important;
}


/*==================================================
CAREER RECORD - TIMELINE LAYOUT
The ledger becomes a timeline: a cyan spine with a
marker per post, the dates held in the left column
and each role in its own glass card. The current
post carries a filled, glowing marker.
==================================================*/

#experience .dr-ledger {
    position: relative;
    margin-top: 2.75rem;
    border-top: none;
}

/* The spine, running down the gap between dates and cards */
#experience .dr-ledger::before {
    content: '';
    position: absolute;
    left: 156px;
    top: 1.9rem;
    bottom: 1.9rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(141, 210, 245, 0.55) 0%, rgba(141, 210, 245, 0.28) 60%, rgba(141, 210, 245, 0.06) 100%);
}

#experience .dr-ledger li {
    position: relative;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 2rem;
    padding: 0 0 1.15rem;
    border-bottom: none;
    transition: none;
}

#experience .dr-ledger li:hover {
    transform: none;
}

/* Marker on the spine */
#experience .dr-ledger li::before {
    content: '';
    position: absolute;
    left: 150px;
    top: 1.5rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0b2b46;
    border: 2px solid rgba(141, 210, 245, 0.85);
    box-shadow: 0 0 0 4px rgba(141, 210, 245, 0.1);
    z-index: 1;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

#experience .dr-ledger li:first-child::before {
    background: #1c97d4;
    border-color: #bfe6fa;
    box-shadow: 0 0 0 6px rgba(28, 151, 212, 0.2);
}

#experience .dr-ledger li:hover::before {
    background: #1c97d4;
    box-shadow: 0 0 0 7px rgba(28, 151, 212, 0.16);
}

/* Dates sit tight against the spine */
#experience .dr-yr {
    text-align: right;
    padding-top: 1.25rem;
    font-size: 13px;
    letter-spacing: 0.06em;
}

/* Each post is a card */
#experience .dr-ledger li > div:last-child {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 1.15rem 1.4rem;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

#experience .dr-ledger li:hover > div:last-child {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(141, 210, 245, 0.42);
    transform: translateX(5px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

#experience .dr-ledger p {
    margin-top: 0.35rem;
}

/* Single column: the spine and markers step aside */
@media (max-width: 860px) {
    #experience .dr-ledger::before,
    #experience .dr-ledger li::before {
        display: none;
    }

    #experience .dr-ledger li {
        gap: 0.55rem;
        padding-bottom: 1rem;
    }

    #experience .dr-yr {
        text-align: left;
        padding-top: 0;
    }
}


/*==================================================
EDUCATION & TRAINING - ACCENT LIST
Lighter than a card grid: each qualification hangs
off a thin cyan accent with a round icon and a year
chip, and only fills in on hover.
==================================================*/

#education .dr-edu-grid {
    margin-top: 2.5rem;
    gap: 0.65rem clamp(2rem, 4vw, 3.5rem);
}

#education .dr-edu-card {
    position: relative;
    background: transparent;
    border: none;
    border-left: 2px solid rgba(28, 151, 212, 0.22);
    border-radius: 0 14px 14px 0;
    padding: 1.05rem 1.35rem 1.1rem;
    gap: 1.1rem;
    min-height: 0;
    align-items: center;
    box-shadow: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, border-left-color 0.35s ease, box-shadow 0.35s ease;
}

#education .dr-edu-card:hover {
    transform: translateX(4px);
    background: #ffffff;
    border-left-color: var(--secondary-color);
    box-shadow: 0 12px 28px rgba(6, 29, 51, 0.09);
}

/* Round icon reads softer than a tile */
#education .dr-edu-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.05rem;
    color: var(--heading-color);
    transition: background 0.35s ease, color 0.35s ease;
}

#education .dr-edu-card:hover .dr-edu-icon {
    background: var(--secondary-color);
    color: #ffffff;
}

/* Year sits quietly at the end of the row */
#education .dr-edu-yr {
    position: absolute;
    top: 1.15rem;
    right: 1.1rem;
    margin: 0;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--eyebrow-bg);
    color: var(--eyebrow-color);
    font-size: 11px;
    letter-spacing: 0.08em;
}

#education .dr-edu-body {
    padding-right: 3.75rem;
}

.dr-page #education .dr-edu-body p {
    margin-top: 0.25rem;
}

@media (max-width: 860px) {
    #education .dr-edu-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*==================================================
PUBLICATIONS - NUMBERED TIMELINE
Each citation sits on a spine behind numbered
markers, with the title leading and the journal and
year as quiet metadata underneath.
==================================================*/

#research .dr-refs {
    position: relative;
    margin-top: 2.75rem;
    padding-left: 4.75rem;
}

/* Spine, drawn in the gutter to the left of the cards */
#research .dr-refs::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 1.4rem;
    bottom: 1.4rem;
    width: 2px;
    background: linear-gradient(180deg, rgba(28, 151, 212, 0.5) 0%, rgba(28, 151, 212, 0.22) 65%, rgba(28, 151, 212, 0.05) 100%);
}

#research .dr-refs li {
    padding: 1.4rem 1.7rem;
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.1);
    border-bottom: 1px solid rgba(0, 78, 117, 0.1);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(6, 29, 51, 0.05);
    margin-bottom: 1.1rem;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

#research .dr-refs li:last-child {
    margin-bottom: 0;
}

#research .dr-refs li:hover {
    transform: translateX(5px);
    border-color: rgba(28, 151, 212, 0.42);
    box-shadow: 0 16px 34px rgba(6, 29, 51, 0.12);
}

/* Numbered marker, centred on the spine */
#research .dr-refs li::before {
    left: -4.75rem;
    top: 1.2rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 2px solid rgba(28, 151, 212, 0.45);
    color: var(--secondary-color);
    font-size: 12.5px;
    box-shadow: 0 0 0 4px rgba(28, 151, 212, 0.07);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#research .dr-refs li:hover::before {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}

#research .dr-ref-title {
    display: block;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--heading-color);
}

#research .dr-ref-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0.6rem;
}

#research .dr-refs cite {
    font-style: normal;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--card-body-color);
}

#research .dr-refyr {
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--eyebrow-bg);
    color: var(--eyebrow-color);
    font-size: 11px;
    letter-spacing: 0.08em;
}

/* Closing panel for the research projects */
#research .dr-research-note {
    margin: 1.75rem 0 0 4.75rem;
    padding: 1.4rem 1.7rem;
    background: var(--eyebrow-bg);
    border: 1px solid rgba(28, 151, 212, 0.18);
    border-radius: 14px;
}

#research .dr-research-note-label {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin-bottom: 0.5rem;
}

.dr-page #research .dr-research-note p {
    margin: 0;
    font-size: var(--card-body-size) !important;
}

@media (max-width: 700px) {
    #research .dr-refs {
        padding-left: 0;
    }

    #research .dr-refs::before {
        display: none;
    }

    #research .dr-refs li::before {
        position: static;
        margin-bottom: 0.85rem;
    }

    #research .dr-research-note {
        margin-left: 0;
    }
}


/*==================================================
DEPARTMENT PAGE ALIGNMENT
Brings the women's health department page onto the
shared systems: hero CTA on the navy gradient,
section headings on the heading scale, and list copy
on the shared body size.
==================================================*/

/* Hero call action keeps the theme's navy gradient
   (the profile pages override this with a solid fill) */
.dr-hero-cta .dr-btn-light {
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.95), rgba(0, 78, 117, 0.95)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 28px rgba(7, 23, 44, 0.32);
}

.dr-hero-cta .dr-btn-light:hover {
    background: linear-gradient(135deg, rgba(7, 23, 44, 1), rgba(0, 78, 117, 1)) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 36px rgba(7, 23, 44, 0.4);
}

/* Section headings follow the shared scale */
main .details-card-block h2 {
    font-family: var(--font-primary) !important;
    font-size: var(--heading-size) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: var(--heading-color) !important;
}

/* Overview copy matches index's intro scale */
main .details-card-block > p {
    font-family: var(--font-primary);
    font-size: var(--intro-size);
    line-height: var(--intro-line-height);
    color: var(--intro-color);
}

/* Bulleted lists take the shared body size */
main .premium-list li {
    font-family: var(--font-primary);
    font-size: var(--card-body-size);
    line-height: var(--card-body-line-height);
    color: var(--card-body-color);
}

/* Helper note under the department booking actions */
.book-box-note {
    margin: 1.15rem 0 0;
    font-family: var(--font-primary);
    font-size: 12px;
    line-height: 1.65;
    color: var(--card-body-color);
    text-align: center;
}


/*==================================================
FEATURED PACKAGE CARD - DARK
The most popular package runs on the theme's navy
gradient with white copy, so it separates clearly
from the plain white cards beside it.
==================================================*/

.pkg-card.featured {
    background: linear-gradient(150deg, #07172c 0%, #0b3350 58%, #0e4568 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 46px rgba(7, 23, 44, 0.32);
}

.pkg-card.featured:hover {
    box-shadow: 0 26px 56px rgba(7, 23, 44, 0.4);
}

.pkg-card.featured .pkg-name {
    color: #ffffff;
}

.pkg-card.featured .pkg-price {
    color: #ffffff;
}

.pkg-card.featured .pkg-price span {
    color: rgba(255, 255, 255, 0.7);
}

.pkg-card.featured .pkg-feature {
    color: rgba(255, 255, 255, 0.85);
}

.pkg-card.featured .pkg-check {
    color: #8ed2f5;
}

.pkg-card.featured .pkg-badge-top {
    background: #ffffff;
    color: #07172c;
}

/* Inverted action: white fill on the dark card */
.pkg-card.featured .pkg-btn {
    background: #ffffff;
    border-color: #ffffff;
    color: #004e75;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.pkg-card.featured .pkg-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #ffffff;
    color: #00395a;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}


/*==================================================
CONCERN NAVIGATOR BAR
The sticky selector bar runs on a cyan-to-navy
gradient rather than a flat fill, matching the
gradient language used across the theme.
==================================================*/

.concern-wrap {
    background: linear-gradient(135deg, #07172c 0%, #0b3350 55%, #0e4568 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 26px rgba(7, 23, 44, 0.28);
}

/* Hover turns the chip white, so the label has to leave white too -
   without this it renders white-on-white and disappears */
.concern-tab:hover .ct-label {
    color: var(--secondary-color);
}

.concern-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.95);
}


/*==================================================
DEPARTMENT BOOKING CARD
Matched to the booking rail on the doctor profile
page: navy header, eyebrow hours label, dashed
schedule rows and the same three pill actions.
==================================================*/

.book-box {
    border: 1px solid rgba(0, 78, 117, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.book-box-hdr {
    background: var(--heading-color);
    padding: 1.75rem 1.6rem;
}

.book-box-hdr h3 {
    font-family: var(--font-primary);
    font-size: var(--card-title-size);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.book-box-hdr p {
    font-family: var(--font-primary);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.book-box-body {
    padding: 1.6rem 1.6rem 1.75rem;
}

/* Hours heading reads as an eyebrow */
.book-box-body > p:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size);
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin: 0 0 0.6rem;
}

.avail-row {
    padding: 14px 0;
    font-size: 13.5px;
    border-bottom: 1px dashed rgba(0, 78, 117, 0.1);
}

.avail-row:first-of-type {
    padding-top: 4px;
}

.ar-day {
    color: var(--card-body-color);
    font-weight: 500;
}

.ar-time {
    color: var(--heading-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
}

.ar-time.na {
    color: var(--heading-color);
    font-weight: 600;
}

/* Three pill actions, same order and colours as the profile rail */
.book-call,
.book-wa,
.book-callback {
    width: 100%;
    border-radius: 999px;
    padding: 15px 18px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, box-shadow 0.4s ease;
}

.book-call {
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.95), rgba(0, 78, 117, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    margin-top: 1.6rem;
    box-shadow: 0 10px 24px rgba(7, 23, 44, 0.26);
}

.book-call:hover {
    background: #162e4d;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(7, 23, 44, 0.32);
}

.book-wa {
    background: #25d366;
    border: 1px solid #25d366;
    color: #ffffff;
    margin-top: 14px;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.26);
}

.book-wa:hover {
    background: #1eb857;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.34);
}

.book-callback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    color: #ffffff;
    margin-top: 14px;
    box-shadow: 0 8px 20px rgba(28, 151, 212, 0.24);
}

.book-callback:hover {
    background: #1683bb;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(28, 151, 212, 0.32);
}


/*==================================================
SERVICES LIST - COMPACT
All seventeen services stay visible; the rows are
tightened instead so the section reads denser
without losing any content.
==================================================*/

#services-list {
    margin-top: 1.6rem;
    gap: 0 clamp(2rem, 4vw, 3.5rem);
}

#services-list .dr-exp-card {
    padding: 0.8rem 0;
    gap: 1rem;
    align-items: flex-start;
}

#services-list .dr-exp-icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}

main .details-card-block #services-list .dr-exp-body h3 {
    font-size: 15.5px !important;
    margin-bottom: 2px;
}

main .details-card-block #services-list .dr-exp-body p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}


/*==================================================
CONDITIONS + FACILITIES PANELS
The two reference lists sit in their own container,
side by side, separated from the services block.
==================================================*/

.dept-duo {
    padding: 3.5rem 0 5.5rem;
}

.dept-duo-inner {
    /* Matches .content-wrap exactly so the panels line up with the
       main column and the sidebar cards above them */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.dept-duo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 3.5vw, 3.25rem);
    align-items: start;
}

.dept-duo-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.09);
    border-radius: 16px;
    padding: 1.75rem 1.6rem 1.5rem;
    box-shadow: none;
    margin-top: 0 !important;
    height: 100%;
}

/* A step down from the section scale so the titles
   fit the narrower panels */
main .dept-duo-panel h2 {
    font-size: clamp(22px, 2.1vw, 28px) !important;
    margin-bottom: 14px !important;
}

.dept-duo-panel .premium-list {
    margin-top: 0;
}

main .dept-duo-panel .premium-list li {
    margin-bottom: 0.75rem;
    padding-left: 1.75rem;
}

main .dept-duo-panel .premium-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 950px) {
    .dept-duo-inner {
        padding: 0 1.5rem;
    }
}

@media (max-width: 900px) {
    .dept-duo-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*==================================================
JOURNEY STEP ICONS
Matched to the hero quick-links on index.html: a pale
blue disc with a navy glyph, rather than a solid cyan
fill with a white glyph.
==================================================*/

.js-circle,
.journey-step.done .js-circle {
    background: #dceaf6;
    border-color: #dceaf6;
    color: var(--heading-color);
    box-shadow: 0 0 0 8px var(--warm-white);
}

.journey-step:hover .js-circle {
    background: linear-gradient(135deg, #07172c 0%, #0b3350 55%, #0e4568 100%);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 0 0 8px var(--warm-white), 0 12px 26px rgba(7, 23, 44, 0.3);
}


/*==================================================
ALSO-AVAILABLE SPECIALTY CHIPS
White pills with a navy label so they stay legible
over the department photo.
==================================================*/

.dept-tag-pill {
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.1);
    color: var(--heading-color);
    box-shadow: 0 4px 14px rgba(6, 29, 51, 0.12);
}

.dept-tag-pill:hover {
    background: var(--eyebrow-bg);
    border-color: rgba(28, 151, 212, 0.45);
    color: var(--heading-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 29, 51, 0.18);
}


/*==================================================
DEPARTMENT PAGE BODY COPY - BLACK
Panel copy, service lists and journey step captions
use the shared black body colour instead of grey.
==================================================*/

.panel-copy p,
.sb-item,
.js-desc {
    color: var(--card-body-color);
}


/*==================================================
ABOUT + CONTACT HEROES
Same treatment as the department hero on
obgyn-brand.html - full-height photo, navy gradient,
copy on the left, glass trust cards on the right -
each page keeping its own background image.
==================================================*/

.hero--about {
    background:
        linear-gradient(90deg,
            rgba(7, 23, 44, .92),
            rgba(7, 23, 44, .82),
            rgba(7, 23, 44, .35)),
        url("../assets/images/about us.jpeg");
    background-size: cover;
    background-position: center;
}

/* Same flat slate-blue field as the about-2 hero */
.hero--contact {
    background: #537493;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hero--contact .hero-problem {
    color: rgba(255, 255, 255, 0.88);
}

/* Copy-only hero: one full-width column */
.hero--about .hero-inner,
.hero--contact .hero-inner {
    grid-template-columns: minmax(0, 1fr);
}

.hero--about .hero-copy h1,
.hero--contact .hero-copy h1 {
    font-family: var(--font-primary);
    font-size: clamp(34px, 3.4vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 1.1rem;
}

@media (max-width: 950px) {

    .hero--about,
    .hero--contact {
        height: auto;
        padding: 7rem 1.5rem 4rem;
    }

    .hero--about .hero-inner,
    .hero--contact .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}


/*==================================================
ABOUT-2 PAGE - BRAND ALIGNMENT
Card titles, body copy and the closing heading move
onto the shared scales. Headings, eyebrows and lead
copy already come from the inner-page alignment
block; on-dark variants keep their light treatment.
==================================================*/

/* Card titles: shared card scale, navy */
.ab-page .ab-node h3,
.ab-page .ab-award h3 {
    font-family: var(--font-primary) !important;
    font-size: var(--card-title-size) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--card-title-color) !important;
}

/* Body copy on light bands: shared card body scale, black */
.ab-page .ab-node p,
.ab-page .ab-value p,
.ab-page .ab-award p,
.ab-page .ab-line,
.ab-page .ab-visit-cell address {
    font-family: var(--font-primary) !important;
    font-size: var(--card-body-size) !important;
    line-height: var(--card-body-line-height) !important;
    color: var(--card-body-color) !important;
}

/* Main body columns take the intro scale */
.ab-page .ab-cols {
    font-family: var(--font-primary);
    font-size: var(--intro-size);
    line-height: var(--intro-line-height);
    color: var(--intro-color);
}

/* Closing band heading joins the section heading scale */
.ab-page .ab-close h2 {
    font-family: var(--font-primary) !important;
    font-size: var(--heading-size) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: var(--heading-color-on-dark) !important;
}

/* The main header is absolutely positioned over the page (top: 54px,
   ~125px tall), so the light hero needs room to clear it */
.ab-page .ab-hero {
    padding-block: clamp(11rem, 14vw, 14rem) clamp(3rem, 6vw, 5.5rem);
}

/* Hero on the requested slate-blue field. The copy inverts to white so it
   stays legible - navy text on #537493 has too little contrast */
.ab-page .ab-hero {
    background: #537493;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ab-page .ab-hero h1 {
    color: #ffffff;
}

.ab-page .ab-hero h1 span {
    color: rgba(255, 255, 255, 0.68);
}

.ab-page .ab-hero .ab-lede {
    color: rgba(255, 255, 255, 0.88) !important;
}

.ab-page .ab-hero .ab-hero-note {
    color: rgba(255, 255, 255, 0.78);
}

.ab-page .ab-hero .ab-hero-note i {
    color: #bfe6fa;
}

.ab-page .ab-hero .ab-crumb,
.ab-page .ab-hero .ab-crumb a {
    color: rgba(255, 255, 255, 0.72);
}

.ab-page .ab-hero .ab-crumb a:hover {
    color: #ffffff;
}

/* Closing band CTA: solid white pill with the brand navy label. The shared
   outline treatment put #004e75 text on the navy band, which was unreadable */
.ab-page .ab-close .ab-btn-light {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: var(--heading-color) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

.ab-page .ab-close .ab-btn-light:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ffffff !important;
    color: #00395a !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

/* Arrow badge inverts to navy so it reads on the white pill */
.ab-page .ab-close .ab-btn-light::after {
    background: var(--heading-color) !important;
    color: #ffffff !important;
}


/*==================================================
CONTACT PAGE COMPONENTS
The contact layout rebuilt on the brand system:
navy #004e75, cyan #1c97d4, pale #EBF8FF, Araboto,
shared heading / eyebrow / body scales.
==================================================*/

/* ---- Channels strip ---- */
.mph-strip {
    position: relative;
    z-index: 6;
    /* .container is min(1320px, 92%) but the hero above is 1200px -
       match the hero so the card lines up with the hero copy */
    max-width: 1200px;
    margin-top: -56px;
}

.mph-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.1);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(6, 29, 51, 0.1);
    overflow: hidden;
}

.mph-channel {
    padding: 30px 30px 28px;
    position: relative;
    transition: background 0.25s ease;
}

.mph-channel:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    bottom: 28px;
    right: 0;
    width: 1px;
    background: rgba(0, 78, 117, 0.1);
}

.mph-channel:hover {
    background: #fbfdff;
}

.mph-channel-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--eyebrow-bg);
    color: var(--heading-color);
    margin-bottom: 18px;
}

.mph-channel-icon svg {
    width: 21px;
    height: 21px;
}

.mph-channel small {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin-bottom: 6px;
}

.mph-channel strong {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--card-title-size);
    font-weight: 700;
    line-height: 1.35;
    color: var(--card-title-color);
    word-break: break-word;
}

.mph-channel p {
    margin: 8px 0 0;
    font-family: var(--font-primary);
    font-size: 13px;
    line-height: 1.6;
    color: var(--card-body-color);
}

.mph-channel-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--secondary-color);
    text-decoration: none;
}

.mph-channel-link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.mph-channel-link:hover svg {
    transform: translateX(4px);
}

/* ---- Enquiry ---- */
.mph-enquiry {
    padding: 6rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
}

.mph-enquiry-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.5rem, 5vw, 4.75rem);
    align-items: start;
}

.mph-enquiry-intro {
    position: sticky;
    top: 130px;
}

.mph-response-card {
    margin-top: 1.75rem;
    padding: 1.6rem;
    border: 1px solid rgba(28, 151, 212, 0.22);
    border-radius: 16px;
    background: var(--eyebrow-bg);
}

.mph-response-head {
    display: flex;
    gap: 13px;
    align-items: center;
}

.mph-response-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: var(--heading-color);
}

.mph-response-icon svg {
    width: 19px;
    height: 19px;
}

.mph-response-card strong {
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--heading-color);
}

.mph-response-card p {
    margin: 0.85rem 0 0;
    font-family: var(--font-primary);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--card-body-color);
}

.mph-emergency-note {
    margin-top: 1.1rem;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(209, 18, 44, 0.2);
    border-radius: 14px;
    background: #fff7f8;
}

.mph-emergency-note svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #d1122c;
}

.mph-emergency-note p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--card-body-color);
}

.mph-emergency-note strong {
    color: #d1122c;
}

/* ---- Form card ---- */
.mph-form-card {
    background: #ffffff;
    border: 1px solid rgba(0, 78, 117, 0.1);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(6, 29, 51, 0.08);
    padding: clamp(1.75rem, 3vw, 2.6rem);
}

.mph-form-heading {
    margin-bottom: 1.85rem;
}

.mph-form-heading h3 {
    margin: 0 0 8px;
    font-family: var(--font-primary);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading-color);
}

.mph-form-heading p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--card-body-color);
}

.mph-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
}

.mph-form-group {
    display: grid;
    gap: 8px;
}

.mph-form-group--full {
    grid-column: 1 / -1;
}

.mph-form-group label {
    font-family: var(--font-primary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--heading-color);
}

.mph-form-group label span {
    color: #d1122c;
}

.mph-field {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(0, 78, 117, 0.16);
    border-radius: 12px;
    background: #fbfdff;
    color: var(--card-body-color);
    font-family: var(--font-primary);
    font-size: 13.5px;
    padding: 0 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

textarea.mph-field {
    min-height: 148px;
    padding-top: 14px;
    resize: vertical;
    line-height: 1.65;
}

.mph-field:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(28, 151, 212, 0.12);
    background: #ffffff;
}

.mph-form-foot {
    margin-top: 1.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
}

.mph-form-foot p {
    margin: 0;
    max-width: 400px;
    font-family: var(--font-primary);
    font-size: 11.5px;
    line-height: 1.6;
    color: #64748b;
}

.mph-form-status {
    display: none;
    margin-top: 1rem;
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--secondary-color);
}

/* ---- Location ---- */
.mph-location {
    padding: 6rem 0;
    background: #ffffff;
}

.mph-location-head {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: clamp(2rem, 4vw, 3.75rem);
    align-items: end;
    margin-bottom: 2.75rem;
}

.mph-location-layout {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 1.4rem;
}

.mph-map-card {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    border-radius: 22px;
    border: 1px solid rgba(0, 78, 117, 0.1);
    box-shadow: 0 18px 48px rgba(6, 29, 51, 0.08);
}

.mph-map-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.15);
}

.mph-map-controls {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mph-visit-card {
    border-radius: 22px;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    background: linear-gradient(150deg, #07172c 0%, #0b3350 58%, #0e4568 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.75rem;
}

.mph-visit-eyebrow {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--card-link-color-on-dark);
}

.mph-visit-card h3 {
    margin: 12px 0 10px;
    font-family: var(--font-primary);
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
}

.mph-visit-card > div > p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--card-body-color-on-dark);
}

.mph-visit-details {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mph-visit-detail {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mph-visit-detail span {
    display: block;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.mph-visit-detail strong {
    display: block;
    margin-top: 5px;
    font-family: var(--font-primary);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    color: #ffffff;
}

.mph-visit-btn {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--heading-color) !important;
    text-align: center;
}

.mph-visit-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ffffff !important;
    color: #00395a !important;
}

/* ---- Quick assistance ---- */
.mph-support {
    padding: 6rem 0;
    background: #f7f9fb;
}

.mph-support-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.75rem;
}

.mph-support-head .section-desc {
    margin-left: auto;
    margin-right: auto;
}

.mph-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.mph-support-card {
    padding: 1.85rem;
    border: 1px solid rgba(0, 78, 117, 0.1);
    border-radius: 18px;
    background: #ffffff;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mph-support-card:hover {
    transform: translateY(-4px);
    border-color: rgba(28, 151, 212, 0.4);
    box-shadow: 0 16px 34px rgba(6, 29, 51, 0.1);
}

.mph-support-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--eyebrow-bg);
    color: var(--heading-color);
    margin-bottom: 1.5rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.mph-support-card:hover .mph-support-icon {
    background: var(--secondary-color);
    color: #ffffff;
}

.mph-support-icon svg {
    width: 22px;
    height: 22px;
}

.mph-support-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-primary);
    font-size: var(--card-title-size);
    font-weight: 700;
    line-height: 1.3;
    color: var(--card-title-color);
}

.mph-support-card p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--card-body-size);
    line-height: var(--card-body-line-height);
    color: var(--card-body-color);
}

.mph-support-card a {
    display: inline-block;
    margin-top: 1.15rem;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-color);
    text-decoration: none;
}

@media (max-width: 1050px) {

    .mph-enquiry-grid,
    .mph-location-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .mph-enquiry-intro {
        position: static;
    }

    .mph-location-layout {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

@media (max-width: 860px) {

    .mph-channels,
    .mph-support-grid,
    .mph-location-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .mph-channel:not(:last-child)::after {
        top: auto;
        left: 28px;
        right: 28px;
        bottom: 0;
        width: auto;
        height: 1px;
    }

    .mph-map-card {
        min-height: 380px;
    }

    .mph-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mph-form-foot {
        display: grid;
    }
}

/* Hero secondary CTA on the slate field: solid white pill, brand navy label */
.ab-page .ab-hero .ab-btn-line {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: var(--heading-color) !important;
    box-shadow: 0 10px 25px rgba(7, 23, 44, 0.2);
}

.ab-page .ab-hero .ab-btn-line:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ffffff !important;
    color: #00395a !important;
    box-shadow: 0 16px 32px rgba(7, 23, 44, 0.26);
}

.ab-page .ab-hero .ab-btn-line::after {
    background: var(--heading-color) !important;
    color: #ffffff !important;
}

/* Facilities band keeps the standard container width */
.ab-page .ab-band--full .ab-lede {
    max-width: 78ch;
}

.ab-page .ab-band--full .ab-mosaic {
    gap: 18px;
}


/*==================================================
ABOUT-2 CLOSING CTA
Copy left, actions right, on the brand navy gradient
(the reference layout, our palette).
==================================================*/

.ab-page .ab-cta-band,
.ab-cta-band {
    background: #ffffff;
    padding-block: clamp(3rem, 6vw, 5rem);
}

.ab-cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 4rem);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
    background: linear-gradient(120deg, #07172c 0%, #0b3350 55%, #0e4568 100%);
    box-shadow: 0 26px 60px rgba(7, 23, 44, 0.24);
}

.ab-cta-card::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    right: 140px;
    top: -190px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.ab-cta-copy {
    position: relative;
    z-index: 2;
}

.ab-cta-eyebrow {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--card-link-color-on-dark);
    margin-bottom: 0.9rem;
}

.ab-page .ab-cta-card h2,
.ab-cta-card h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-primary) !important;
    font-size: var(--heading-size) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    color: #ffffff !important;
    max-width: 22ch;
}

.ab-page .ab-cta-card p,
.ab-cta-card p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--card-body-size);
    line-height: var(--card-body-line-height);
    color: var(--card-body-color-on-dark);
    max-width: 62ch;
}

.ab-cta-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ab-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.ab-cta-btn--solid {
    background: #ffffff;
    color: var(--heading-color);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.ab-cta-btn--solid:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #00395a;
    transform: translateY(-2px);
}

.ab-cta-btn--line {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.ab-cta-btn--line:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .ab-cta-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-cta-actions .ab-cta-btn {
        flex: 1 1 100%;
    }
}

/* Third hero action on the contact page sits on the dark photo field, so the
   ghost variant takes a white outline and white label instead of navy text */
.hero--contact .dr-hero-cta .dr-btn-ghost {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    color: var(--heading-color) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hero--contact .dr-hero-cta .dr-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ffffff !important;
    color: #00395a !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26);
}

.hero--contact .dr-hero-cta .dr-btn-ghost::after {
    background: var(--heading-color) !important;
    color: #ffffff !important;
}


/*==================================================
CONTACT HERO - TWO COLUMN
Same shape as the about-2 hero: copy left, a details
plate right, on the flat slate field.
==================================================*/

.hero--contact .hero-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    text-align: left;
}

.hero--contact .hero-copy {
    text-align: left;
}

.hero-plate {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.hero-plate-top {
    background: var(--heading-color);
    color: #ffffff;
    padding: 18px 22px;
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.hero-plate-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: 15px 22px;
    border-bottom: 1px solid rgba(0, 78, 117, 0.08);
}

.hero-plate-row:last-child {
    border-bottom: 0;
}

.hero-plate-k {
    font-family: var(--font-primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #475569;
}

.hero-plate-v {
    font-family: var(--font-primary);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--heading-color);
    text-align: right;
    line-height: 1.35;
    word-break: break-word;
}

.hero-plate-v em {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    letter-spacing: 0.02em;
    margin-top: 3px;
}

@media (max-width: 950px) {
    .hero--contact .hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*==================================================
CONTACT PAGE TYPE = ABOUT-2 PAGE TYPE
Hero headline, lead copy and plate values matched to
the about page's scale so both read identically.
==================================================*/

.hero--contact .hero-copy h1 {
    font-size: clamp(34px, 3.4vw, 48px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.035em;
}

.hero--contact .hero-problem {
    font-size: var(--intro-size);
    line-height: 1.75;
    max-width: 62ch;
}

.hero-plate-v {
    font-size: 15px;
}


/* The hero kicker joins the eyebrow pill system, so its glass treatment and
   leading dot give way to the shared pale-blue pill */
.hero-kicker {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: max-content;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
}

.hero-kicker-dot {
    display: none !important;
}


/*==================================================
INSURANCE PARTNERS MARQUEE (ported from mph2)
==================================================*/

.insurance-partners-section {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
}

.insurance-partners-header {
    text-align: center;
    margin-bottom: 24px;
}

.insurance-partners-header .section-title {
    margin-bottom: 0;
}

/* Centred CTA beneath the heading, matching the section's centred header. */
.insurance-partners-cta {
    margin-top: 22px;
}

.insurance-partners-strip {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #f1f5f9;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 78, 117, .07);
    padding: 28px 0;
}

.insurance-partners-fade {
    pointer-events: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 64px;
    z-index: 10;
}

.insurance-partners-fade-left {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.insurance-partners-fade-right {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

.insurance-partners-marquee {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: insurance-partners-marquee 35s linear infinite;
}

.insurance-partners-marquee img {
    height: 56px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@keyframes insurance-partners-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/*==================================================
MPH AI MENU ITEM
==================================================*/

.nav-link.nav-ai-link {
    gap: 7px;
    padding: 7px 16px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(100deg, rgba(28, 151, 212, .35), rgba(255, 255, 255, .08));
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

.nav-link.nav-ai-link:hover {
    border-color: rgba(255, 255, 255, .7);
    background: linear-gradient(100deg, rgba(28, 151, 212, .55), rgba(255, 255, 255, .14));
}

.nav-ai-link .spark {
    color: #8fd7ff;
    flex-shrink: 0;
    animation: nav-ai-spark 2.4s ease-in-out infinite;
}

@keyframes nav-ai-spark {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.82);
    }
}


/*==================================================
WHO TO CONTACT / DIRECT LINES (ported from mph2)
==================================================*/

.contact-desks {
    padding: 80px 0;
    background: #fff;
    border-top: 1px solid #f1f5f9;
}

.contact-desks-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.contact-desks-head .section-desc {
    margin-bottom: 0;
}

.contact-desks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.contact-desk-card {
    display: flex;
    flex-direction: column;
    background: #FAFCFD;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    padding: 24px;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.contact-desk-card:hover {
    background: #fff;
    border-color: rgba(28, 151, 212, .3);
    box-shadow: 0 10px 40px -10px rgba(1, 84, 133, .12);
}

.contact-desk-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-cyan-light);
    color: var(--accent-blue-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background .3s ease, color .3s ease;
}

.contact-desk-card:hover .contact-desk-icon {
    background: var(--accent-blue-bright);
    color: #fff;
}

.contact-desk-icon svg {
    width: 22px;
    height: 22px;
}

.contact-desk-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 6px;
    line-height: 1.35;
}

.contact-desk-card>p {
    font-size: 12.5px;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0 0 16px;
    flex: 1;
}

.contact-desk-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-desk-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    word-break: break-all;
    transition: color .2s ease;
}

.contact-desk-links a:hover {
    color: var(--accent-blue-bright);
}

.contact-desk-links a svg {
    width: 15px;
    height: 15px;
    color: var(--accent-blue-bright);
    flex-shrink: 0;
}

.contact-desk-hours {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #94a3b8;
}

.contact-desks-note {
    text-align: center;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 32px;
}

.contact-desks-note a {
    color: var(--accent-blue-bright);
    font-weight: 700;
}

.contact-desks-note a:hover {
    text-decoration: underline;
}

@media (max-width: 1200px) {
    .contact-desks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .contact-desks-grid {
        grid-template-columns: 1fr;
    }
}


/* Nav search icon (opens MPH AI search overlay) */
.nav-link.nav-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 6px;
    color: #ffffff;
    font-family: inherit;
}

.nav-link.nav-search-btn:hover {
    color: #8fd7ff;
}

.nav-link.nav-search-btn svg {
    display: block;
}

/* Slightly tighter nav now that the search icon and MPH AI joined the menu */
.nav-menu {
    gap: 26px;
}


/*==================================================
NAV OVERFLOW FIX
The menu gained the MPH AI pill and search icon, so the row no longer
fits the old 1260px cap — widen the bar, forbid label wrapping and
step the gaps down before the mobile breakpoint hides the menu.
==================================================*/

/* Aligned with .container (min(1260px, 92%)) so the header sits flush with
   the page content. The row is compacted rather than the bar widened - the
   gap and label size below are what the old 1420px breakpoint already used. */
.navbar {
    width: min(1260px, 92%);
    gap: 14px;
}

.nav-menu {
    gap: 13px !important;
    flex-wrap: nowrap;
}

.nav-menu a,
.nav-link {
    font-size: 13px !important;
}

.nav-menu a,
.nav-link,
.btn-pill-navy {
    white-space: nowrap;
}

.nav-brand {
    flex-shrink: 0;
}

.nav-link.nav-ai-link {
    padding: 6px 13px;
}

@media (max-width: 1420px) {
    .nav-menu {
        gap: 13px !important;
    }

    .nav-menu a {
        font-size: 13px !important;
    }

    .btn-pill-navy#nav-cta-btn,
    #nav-cta-btn {
        font-size: 12px;
        padding: 9px 8px 9px 18px !important;
    }
}

@media (max-width: 1180px) {
    .nav-menu {
        gap: 9px !important;
    }

    .nav-brand img {
        height: 58px !important;
    }
}


/*==================================================
EXPLORE MORE / ASK MPH AI GATE
Content after the specialties section stays hidden
until Explore More is clicked (same pattern as mph4).
==================================================*/

.mph-gated { display: none; }
body.mph-revealed .mph-gated { display: block; }
body.mph-revealed .mph-gate { display: none; }

.mph-gate {
    position: relative;
    background: #fff;
    padding: 30px 0 90px;
    text-align: center;
}

.mph-gate-fade {
    position: absolute;
    left: 0;
    right: 0;
    top: -140px;
    height: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.mph-gate-desc {
    max-width: 560px;
    margin: 0 auto 30px;
}

.mph-gate-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 52px;
}

.mph-gate-loader {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 78, 117, 0.15);
    border-top-color: #004e75;
    border-radius: 50%;
    animation: mph-spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes mph-spin {
    100% { transform: rotate(360deg); }
}

.mph-gate-ai {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border-radius: 999px;
    border: 1px solid rgba(28, 151, 212, .55);
    color: #004e75;
    font-weight: 700;
    font-size: 14px;
    background: #fff;
    transition: background .3s ease, border-color .3s ease;
}

.mph-gate-ai:hover {
    background: #EBF8FF;
    border-color: #1c97d4;
}

.mph-gate-ai .spark {
    color: #1c97d4;
    animation: nav-ai-spark 2.4s ease-in-out infinite;
}

/* ==========================================================================
   MPH REVIEW CHANGES - Layout 1
   Added for: separated About photos, auto-scrolling doctor marquee with
   larger portraits, persistent Book an Appointment button, larger insurance
   logos, emergency siren, OB/GYN pink theme.
   ========================================================================== */

/* 3.3 Doctors - paged carousel, three per slide, larger portraits ---------
   Replaces the continuous marquee: cards sit on a settled grid and the track
   advances one full slide at a time, automatically (see js/doctors-carousel.js).
   -------------------------------------------------------------------------- */
.doctors-carousel {
    margin-top: 32px;
}

.doctors-viewport {
    overflow: hidden;
}

.doctors-track {
    --per-view: 4;
    --gap: 24px;
    display: flex;
    gap: var(--gap);
    transition: transform 0.6s cubic-bezier(0.22, 0.75, 0.3, 1);
    will-change: transform;
}

/* Each card is an exact fraction of the viewport, so a slide is one full
   page width and the track always lands on a clean boundary. */
.doctors-track .doctor-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    width: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
}

.doctors-track .doctor-img-wrapper,

.doctors-slides .doctor-img-wrapper {
    height: 500px !important;
}

/* The base rule insets the portrait to 77% x 90% of its frame, which leaves a
   wide margin on the larger carousel cards. Fill the frame instead, anchored
   to the top so the face stays clear of the info panel overlapping the base. */
.doctors-track .doctor-img-wrapper img,
.doctors-slides .doctor-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* --- Controls ------------------------------------------------------------ */
.carousel-controls,
.doctors-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 30px;
}

.carousel-nav,
.doctors-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: #015485;
    border: 1px solid rgba(1, 84, 133, 0.22);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.carousel-nav:hover,
.doctors-nav:hover {
    background: #015485;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(1, 84, 133, 0.24);
}

.carousel-nav:focus-visible,
.doctors-nav:focus-visible {
    outline: 2px solid #1C97D4;
    outline-offset: 2px;
}

.carousel-dots,
.doctors-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-dot,
.doctors-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(1, 84, 133, 0.24);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.carousel-dot.is-active,
.doctors-dot.is-active {
    width: 26px;
    background: #1C97D4;
}

.carousel-dot:focus-visible,
.doctors-dot:focus-visible {
    outline: 2px solid #1C97D4;
    outline-offset: 3px;
}

@media (max-width: 1023px) {
    .doctors-track { --per-view: 2; }
}

@media (max-width: 639px) {
    .doctors-track { --per-view: 1; --gap: 16px; }
    .doctors-track .doctor-img-wrapper,
    .doctors-slides .doctor-img-wrapper {
        height: 420px !important;
    }
}


/* 2. Persistent Book an Appointment button (every page) ------------------ */
.floating-appointment-fab {
    position: fixed;
    left: 24px;
    bottom: 26px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #015485 0%, #1C97D4 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(1, 84, 133, 0.38);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-appointment-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(1, 84, 133, 0.46);
    color: #ffffff;
}

.floating-fab-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7BE495;
    box-shadow: 0 0 0 0 rgba(123, 228, 149, 0.7);
    animation: mph-fab-pulse 2s infinite;
}

@keyframes mph-fab-pulse {
    70%  { box-shadow: 0 0 0 12px rgba(123, 228, 149, 0); }
    100% { box-shadow: 0 0 0 0 rgba(123, 228, 149, 0); }
}

@media (max-width: 640px) {
    .floating-appointment-fab {
        left: 14px;
        bottom: 16px;
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* 5. Insurance - larger partner logos ------------------------------------ */
/* Uniform slot for every logo. The sources range from 1:1 to 3.15:1, so a
   fixed height with auto width rendered them 88px to 278px wide - a 3x
   spread. A fixed box with object-fit:contain gives each the same footprint. */
.insurance-partners-marquee img {
    width: 170px !important;
    height: 88px !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .insurance-partners-marquee img {
        width: 130px !important;
        height: 64px !important;
    }
}

/* 4. Emergency - flashing siren bulb ------------------------------------- */
.emerg-siren-bulb {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ed1c24;
    margin-right: 7px;
    vertical-align: middle;
    animation: mph-siren-flash 1.2s ease-in-out infinite;
}

@keyframes mph-siren-flash {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.65); }
    50%      { opacity: 0.35; box-shadow: 0 0 0 8px rgba(224, 36, 36, 0); }
}

/* 8. OB/GYN department colour - pink; every other department stays blue -- */
body.theme-pink {
    --brand-primary: #E0529C;
    --brand-secondary: #D63384;
}

body.theme-pink .btn-pill-navy,
body.theme-pink .section-badge,
body.theme-pink .new-about-badge {
    background-color: #E0529C !important;
    color: #ffffff !important;
}

body.theme-pink .new-about-btn-primary {
    background: #E0529C !important;
}

body.theme-pink .floating-appointment-fab {
    background: linear-gradient(135deg, #D63384 0%, #E0529C 100%);
    box-shadow: 0 14px 34px rgba(214, 51, 132, 0.38);
}

/* 7. Contact - emergency line in red with flashing bulb (from Option 2) --- */
.contact-emergency-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 26px 0 34px;
    padding: 18px 24px;
    border-radius: 14px;
    background: rgba(224, 36, 36, 0.06);
    border: 1px solid rgba(224, 36, 36, 0.22);
    text-decoration: none;
    transition: background 0.25s ease;
}

.contact-emergency-strip:hover {
    background: rgba(224, 36, 36, 0.11);
}

.contact-emergency-label {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ed1c24;
}

.contact-emergency-number {
    font-size: 28px;
    font-weight: 900;
    color: #ed1c24;
    line-height: 1;
}

.contact-emergency-note {
    flex: 1 1 260px;
    font-size: 13.5px;
    color: #718096;
}

/* ==========================================================================
   4. Emergency - Demo 3 (mph3) treatment
   Copy and calls on the left, the ambulance squared off beside the heading,
   then four numbered features across the full width.
   ========================================================================== */
.emergency-section.emerg-mph3 {
    /* Sits between two white sections (Plan Your Visit above, Patient Stories
       below), so the band needs a tone and edges of its own or the three read
       as one continuous page. Matches the .awards-section convention. */
    background: #EDF3F9;
    color: #2D3748;
    padding: clamp(64px, 7vw, 104px) 0;
    border-top: 1px solid #DCE7F0;
    border-bottom: 1px solid #DCE7F0;
}

.emergency-section.emerg-mph3::before {
    content: none;
}

.emerg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
    margin-bottom: clamp(48px, 5vw, 72px);
}

/* --- Section head ------------------------------------------------------
   Matches the rest of the site: a .section-badge pill over a single-colour
   navy .section-title. The numbered mark and rule are mph3 devices that no
   other MPH section uses, so they are hidden here (kept in the markup in
   case the numbered treatment is wanted site-wide later).
   ---------------------------------------------------------------------- */
.emerg-mph3 .shead {
    display: block;
    margin-bottom: 26px;
}

.emerg-mph3 .shead__mark {
    display: none;
}

/* Badge pill, identical to .section-badge elsewhere on the page. */
.emerg-mph3 .shead__body .label {
    display: inline-block;
    /* White rather than the usual #EBF8FF: this badge sits on the tinted
       #EDF3F9 band, where the pale blue is almost invisible. Same role,
       adjusted for its ground. */
    background: #ffffff;
    color: #1c97d4;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
    /* .section-badge is uppercase everywhere else */
    text-transform: uppercase;
}

/* Title, identical to .section-title elsewhere on the page. */
.emerg-mph3 .d2 {
    margin: 0;
    font-family: 'Araboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(2.15rem, 3.8vw, 2.75rem);
    /* 700 matches .section-title; only the colour differs from other sections */
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.015em;
    /* Emergency red rather than the site navy - this heading carries urgency */
    color: #ed1c24;
    white-space: nowrap;
}

/* Single colour - MPH titles are not two-tone. */
.emerg-mph3 .d2 em {
    font-style: normal;
    color: inherit;
}

/* Below this the line no longer fits, so let it wrap rather than overflow. */
@media (max-width: 560px) {
    .emerg-mph3 .d2 {
        white-space: normal;
    }
}

.emerg__cta .big {
    margin: 0 0 30px;
    max-width: 50rem;
    /* Matches .section-desc elsewhere: --intro-size / --intro-color */
    font-size: var(--intro-size);
    line-height: var(--intro-line-height);
    color: var(--intro-color);
}

/* --- Live emergency line + calls --------------------------------------- */
.emerg__cta .label--emerg {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    color: #ed1c24;
}

.emerg__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.emerg__acts .btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.emerg__acts .btn .arw {
    font-size: 15px;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.24s ease;
}

.emerg__acts .btn:hover .arw {
    transform: translateX(3px);
}

.emerg__acts .btn--emerg {
    background: #ed1c24;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(237, 28, 36, 0.26);
}

.emerg__acts .btn--emerg:hover {
    background: #c8151c;
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(237, 28, 36, 0.32);
    transform: translateY(-2px);
}

/* Secondary action stays quiet so the emergency call leads. */
.emerg__acts .btn--solid {
    color: #0B3F63;
    border-color: rgba(1, 84, 133, 0.28);
    box-shadow: 0 6px 18px rgba(7, 22, 44, 0.08);
}

.emerg__acts .btn--solid:hover {
    background: #ffffff;
    color: #0B3F63;
    border-color: rgba(1, 84, 133, 0.45);
    box-shadow: 0 12px 26px rgba(7, 22, 44, 0.1);
    transform: translateY(-2px);
}

/* --- Ambulance figure --------------------------------------------------- */
.emerg__fig {
    margin: 0;
    aspect-ratio: 5 / 4;
    max-height: 520px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 26px 56px rgba(7, 22, 44, 0.16);
}

.emerg__fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.emerg__fig:hover img {
    transform: scale(1.03);
}

/* --- Four numbered features, divided by hairlines ----------------------- */
.feats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Card gap matches .awards-grid */
    gap: 22px;
    padding-top: clamp(32px, 3.5vw, 46px);
    border-top: 1px solid rgba(1, 84, 133, 0.2);
}

/* White cards, matching .award-card, instead of hairline-divided text blocks. */
.feats > article {
    background: #ffffff;
    border: 1px solid rgba(226, 235, 245, 0.9);
    border-radius: 20px;
    padding: 28px 24px 26px;
    box-shadow: 0 10px 30px rgba(9, 44, 78, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feats > article:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(9, 44, 78, 0.1);
}

.feats__no {
    display: block;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.2em;
    color: #ed1c24;
    margin-bottom: 14px;
}

.feats h3 {
    margin: 0 0 10px;
    /* Matches .award-title */
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: red;
}

.feats p {
    margin: 0;
    /* Matches .award-desc */
    font-size: 14px;
    line-height: 1.7;
    color: black;
}

@media (max-width: 1000px) {
    .emerg {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .emerg__fig {
        aspect-ratio: 16 / 10;
        max-height: none;
    }
}

@media (max-width: 1100px) {
    .feats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .feats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Sticky header
   The nav is absolutely positioned over the hero. Past the utility bar it
   pins to the top in a compact solid state, which keeps BOOK AN APPOINTMENT
   on screen for the whole page and replaces the floating corner button.
   ========================================================================== */
.main-header {
    transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.main-header.is-stuck {
    position: fixed;
    top: 0;
    padding: 10px 0;
    background: linear-gradient(90deg, #052235 0%, #073a58 55%, #0a4a71 100%);
    box-shadow: 0 8px 28px rgba(5, 34, 53, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    animation: mph-header-drop 0.32s cubic-bezier(0.16, 0.84, 0.44, 1);
}

@keyframes mph-header-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* Compact the brand and CTA so the pinned bar stays slim. */
.main-header.is-stuck .nav-brand img {
    height: 52px !important;
    transition: height 0.3s ease;
}

.main-header.is-stuck #nav-cta-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12.5px;
}

.main-header .nav-brand img {
    transition: height 0.3s ease;
}


/* Below the desktop nav breakpoint the menu collapses, so keep the pinned
   bar to the brand and the CTA rather than letting it grow tall. */
@media (max-width: 992px) {
    .main-header.is-stuck {
        padding: 8px 0;
    }
    .main-header.is-stuck .nav-brand img {
        height: 44px !important;
    }
}

/* ==========================================================================
   Doctor expertise chips
   Two or three scannable terms per card, per the review note that listing
   pages should carry the doctor's expertise in a few words rather than
   academic detail. Rendered from js/doctor-tags.js.
   ========================================================================== */
.doctor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.doctor-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(28, 151, 212, 0.09);
    border: 1px solid rgba(28, 151, 212, 0.18);
    color: #12719F;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.45;
    white-space: nowrap;
}

/* The card's info panel is absolutely positioned over the photo, so the extra
   row has to be paid for out of the image, not by overflowing the card. */
.doctors-track .doctor-img-wrapper,
.doctors-slides .doctor-img-wrapper {
    height: 452px !important;
}

@media (max-width: 640px) {
    .doctors-track .doctor-img-wrapper,
    .doctors-slides .doctor-img-wrapper {
        height: 356px !important;
    }
    .doctor-tag {
        font-size: 10px;
        padding: 3.5px 9px;
    }
}

/* Narrowest three-up band: a card is only ~258px inside its panel padding,
   which the longest two-chip pair would overrun at full size. Trim slightly
   so the row still fits on one line instead of being clipped. */
@media (min-width: 641px) and (max-width: 1200px) {
    .doctor-tag {
        font-size: 9.5px;
        padding: 3.5px 8px;
    }
}

/* OB/GYN department page inherits the pink accent. */
body.theme-pink .doctor-tag {
    background: rgba(224, 82, 156, 0.09);
    border-color: rgba(224, 82, 156, 0.2);
    color: #C23C7E;
}

/* --- Uniform doctor card panels -----------------------------------------
   The info panel is anchored to the bottom of the card, so any extra line
   makes that panel grow upward and sit out of line with its neighbours.
   Fixing the panel height and reserving space for each row keeps every card
   identical whatever the name or specialty length.
   ------------------------------------------------------------------------ */
.doctors-track .doctor-info-box,
.doctors-slides .doctor-info-box {
    min-height: 200px !important;
    justify-content: flex-start !important;
}

/* Name always occupies one line's worth of space. */
.doctors-track .doctor-name,
.doctors-slides .doctor-name {
    min-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Designation + specialty always occupy two lines. */
.doctors-track .doctor-spec,
.doctors-slides .doctor-spec {
    min-height: 38px;
}

/* One chip row, never two. */
.doctors-track .doctor-tags,
.doctors-slides .doctor-tags {
    flex-wrap: nowrap;
    overflow: hidden;
    /* one row reserved - two tags fit a single line on a four-up card */
    min-height: 25px;
}

/* Cards are ~312px wide at four per slide, leaving ~272px inside the panel.
   Trim the chips a little so the longest pair still clears that on one line. */
.doctors-track .doctor-tag,
.doctors-slides .doctor-tag {
    font-size: 10px;
    padding: 3.5px 9px;
}

/* Buttons pinned to the bottom of the panel on every card. */
.doctors-track .doctor-card-actions,
.doctors-slides .doctor-card-actions {
    margin-top: auto !important;
}

@media (max-width: 640px) {
    .doctors-track .doctor-info-box,
    .doctors-slides .doctor-info-box {
        min-height: 190px !important;
    }
}

/* Department icon not supplied yet - keep a clean chip instead of a broken
   image. Removed automatically once the artwork is in place. */
.dept-icon--empty {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(1, 84, 133, 0.12);
}

/* ==========================================================================
   Specialty carousel
   Five departments per slide, advancing automatically. Keeps the .dept-grid
   class on the track so the existing card styling still applies; only the
   display mode changes from grid to a sliding flex row.
   ========================================================================== */
.dept-carousel {
    margin-bottom: 45px;
}

.dept-viewport {
    overflow: hidden;
    padding: 6px 0;
}

.dept-grid.dept-track {
    --per-view: 5;
    --gap: 20px;
    display: flex;
    gap: var(--gap);
    margin-bottom: 0;
    transition: transform 0.65s cubic-bezier(0.22, 0.75, 0.3, 1);
    will-change: transform;
}

.dept-grid.dept-track > .dept-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    width: calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
}

@media (max-width: 1023px) {
    .dept-grid.dept-track { --per-view: 3; }
}

@media (max-width: 639px) {
    .dept-grid.dept-track { --per-view: 1; --gap: 16px; }
}




/* ==========================================================================
   Closing CTA - variants used on the doctor and department pages
   ========================================================================== */

/* Their headings are longer than About's, so allow a wider measure and let an
   explicit <br> control the break instead of wrapping to three lines. */
.ab-cta-card--wide h2 {
    max-width: 34ch !important;
}

/* WhatsApp keeps its own brand green rather than the outlined variant, so the
   channel stays recognisable. Same metrics as the other .ab-cta-btn buttons. */
.ab-cta-btn--wa {
    background: #25D366;
    color: #ffffff;
    border: 1px solid #25D366;
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.28);
}

.ab-cta-btn--wa:hover {
    background: #1fb457;
    border-color: #1fb457;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Phone line beneath the CTA copy. Kept quieter than the body paragraph so it
   reads as a secondary route, with the number itself picked out. */
.ab-cta-note {
    margin: 1.1rem 0 0 !important;
    font-family: var(--font-primary);
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    max-width: 56ch !important;
}

.ab-cta-note a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.ab-cta-note a:hover {
    border-bottom-color: #ffffff;
}

/* The doctor and department intros are ~225 characters, which needs about 75
   characters per line to settle on three. About's 62ch measure gives ~71 and
   spills to a fourth line, so widen it for these two cards only. The note
   line keeps its own narrower measure. */
.ab-cta-card--wide .ab-cta-copy > p:not(.ab-cta-note) {
    max-width: 72ch !important;
}


/* ==========================================================================
   3.1 About Us media - two stacked photographs, height-matched to the copy
   Sources are now well proportioned: hospital_building.png 1695x928 (1.83)
   and opd.png 1707x921 (1.85). The media column stretches to the copy
   column's height and the two photos split it, so the stack is never taller
   than the text beside it. At a 0.75fr media track each box lands at ~1.80,
   within 2-3% of both sources, so `cover` trims almost nothing.
   Scoped to .about-section, and !important where an earlier .about-grid rule
   already sets 1fr 1fr !important.
   ========================================================================== */
.about-section .about-grid {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(32px, 4vw, 64px) !important;
}

.about-section .new-about-media-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    height: 100%;
    position: relative;
}

.about-section .new-about-main-img-box,
.about-section .new-about-overlay-img-box {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    /* Height comes from the grid row, not a fixed ratio. */
    aspect-ratio: auto;
    min-height: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 46px rgba(7, 22, 44, 0.15);
}

/* Out of flow so a 1695px-wide source cannot drive the grid row height. */
.about-section .new-about-main-img-box img,
.about-section .new-about-overlay-img-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.about-section .new-about-main-img-box:hover img,
.about-section .new-about-overlay-img-box:hover img {
    transform: scale(1.04);
}

/* --- 25-years mark, in the copy column ----------------------------------- */
.about-section .about-content-box .new-about-badge-since {
    position: static;
    inset: auto;
    display: block;
    width: fit-content;
    padding: 0;
    margin: 0 0 20px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.about-section .about-content-box .new-about-badge-since img {
    max-height: 125px;
    width: auto;
    display: block;
}

@media (max-width: 900px) {
    /* Single column: no copy height to match, so give each photo its own
       ratio rather than a stretched row. */
    .about-section .about-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }
    .about-section .new-about-media-wrapper {
        grid-template-rows: auto auto;
        height: auto;
        margin-bottom: 32px;
        gap: 14px;
    }
    .about-section .new-about-main-img-box,
    .about-section .new-about-overlay-img-box {
        aspect-ratio: 16 / 9;
    }
    .about-section .about-content-box .new-about-badge-since img {
        max-height: 74px;
    }
}

@media (max-width: 640px) {
    .about-section .about-content-box .new-about-badge-since img {
        max-height: 64px;
    }
}




/* ==========================================================================
   Contact page (Layout 2) - MPH brand harmonisation
   Layout 2 is Tailwind-built with its own type scale. The Tailwind config now
   maps brand colours and the Araboto face to the MPH tokens; these rules bring
   the type scale into line so the page reads like the rest of the site.
   Scoped to .mph-contact and excluded from the shared header/footer.
   ========================================================================== */
.mph-contact {
    font-family: var(--font-primary);
}

/* Section headings match .section-title elsewhere on the site. */
.mph-contact section h2 {
    font-family: var(--font-primary) !important;
    font-size: clamp(30px, 3.2vw, 45px) !important;
    /* 700 is what section headings compute to on every other page */
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em !important;
    color: var(--heading-color) !important;
}

/* Card and sub headings keep the brand face and weight. */
.mph-contact section h3,
.mph-contact section h4 {
    font-family: var(--font-primary) !important;
    font-weight: 800 !important;
    color: var(--heading-color) !important;
}

/* Layout 2's eyebrows are plain uppercase text; the site uses a pill badge.
   Matched on tracking-widest + uppercase + block, which is the eyebrow
   pattern only - a looser match would also restyle the small card badges
   ("24/7", "CLINIC", opening-hours labels), which must stay as they are. */
.mph-contact span[class*="tracking-widest"][class*="uppercase"][class*="block"] {
    display: inline-block !important;
    background: #EBF8FF;
    color: #1c97d4 !important;
    font-family: var(--font-primary);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 16px !important;
}

/* Body copy: the site's colour and leading rather than Tailwind greys. */
.mph-contact section p {
    font-family: var(--font-primary);
    color: #000;
    line-height: 1.7;
}

/* Layout 2 shipped a full Tailwind grey ramp (gray-300/400/500/600/700 and
   slate-500). index.html uses exactly two text colours off-white: #475569 for
   supporting copy and labels, #004e75 for values, links and headings. Collapse
   the ramp onto those two. Not scoped to <section> - the sidebar contact cards
   and the sticky mobile bar sit in <main>, outside any section. No grey class
   on this page sits inside a dark panel, so no on-dark exception is needed. */
.mph-contact [class*="text-gray-3"],
.mph-contact [class*="text-gray-4"],
.mph-contact [class*="text-gray-5"],
.mph-contact [class*="text-gray-6"],
.mph-contact [class*="text-slate-4"],
.mph-contact [class*="text-slate-5"] {
    color: #475569 !important;
}

/* The darker end of the ramp carries data - phone numbers, emails, extension
   rows - which index.html renders in navy. */
.mph-contact [class*="text-gray-7"],
.mph-contact [class*="text-gray-8"],
.mph-contact [class*="text-gray-9"],
.mph-contact [class*="text-slate-7"] {
    color: #004e75 !important;
}

/* --------------------------------------------------------------------------
   Contact sidebar info cards (Hospital Location / General Inquiries /
   Outpatient Hours)
   Dark-blue icon plate, dark-blue title and CTA, black supporting copy.
   The glyph inside the navy plate is white - black on #004e75 is 1.9:1 and
   unreadable. These rules need !important because the grey-ramp mapping
   above already uses it.
   -------------------------------------------------------------------------- */
.mph-contact .contact-info-card,
.mph-contact .contact-info-card p,
.mph-contact .contact-info-card span,
.mph-contact .contact-info-card a,
.mph-contact .contact-info-card [class*="text-gray-"],
.mph-contact .contact-info-card [class*="text-slate-"] {
    color: #000000 !important;
}

/* Only the title and the CTA stay dark blue - the hours values read as card
   copy, so they are black like the rest of the content. */
.mph-contact .contact-info-card h3,
.mph-contact .contact-info-card a[class*="uppercase"] {
    color: #004e75 !important;
}

.mph-contact .contact-info-card span[class*="text-brand-red"] {
    color: #ed1c24 !important;
}

.mph-contact .contact-info-card a:hover,
.mph-contact .contact-info-card a[class*="uppercase"]:hover {
    color: #1c97d4 !important;
}

.mph-contact .contact-info-card .contact-card-icon {
    background: #004e75 !important;
    border-color: #004e75 !important;
}

.mph-contact .contact-info-card .contact-card-icon,
.mph-contact .contact-info-card .contact-card-icon i {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Hours & Visiting Information - the two columns
   The grid already stretches both columns to the same height, but the service
   table only filled part of the left card, leaving ~77px of dead space at the
   bottom. Making the card a flex column and giving the table height:100% hands
   that slack to the table, which distributes it across its rows - so the left
   column reads as tall as the two stacked cards opposite.
   -------------------------------------------------------------------------- */
.mph-contact .hours-card {
    display: flex;
    flex-direction: column;
}

.mph-contact .hours-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mph-contact .hours-card__body > table {
    flex: 1;
    height: 100%;
}

/* Card header bars carry white titles. The shared
   ".mph-contact section h3 { color: var(--heading-color) }" rule was painting
   these navy - invisible on the navy bar, and near-invisible on the cyan one.
   Matched on the element's own text-white class, since neither bar has a
   text-white ancestor for the existing on-dark rules to key off. */
.mph-contact section h3[class*="text-white"],
.mph-contact section h4[class*="text-white"] {
    color: #ffffff !important;
}

/* Table chrome on the theme's text colours rather than an inherited black. */
.mph-contact .hours-card th {
    font-size: 20px;
    color: #004e75 !important;
}

.mph-contact .hours-card tbody td {
    color: black !important;
}

.mph-contact .hours-card tbody td[class*="text-brand-primary"] {
    color: black !important;
}

.mph-contact .hours-card tbody td[class*="text-brand-red"] {
    color: #ed1c24 !important;
}

.mph-contact .hours-card__note {
    color: black !important;
}

/* Before You Visit list: black copy, and each check icon boxed to exactly one
   line of that copy so it centres on the first line instead of floating above
   it (the old mt-0.5 was a guess at the offset). Items that wrap keep the icon
   on the first line, which is why this is not align-items: center. */
.mph-contact .visit-list li {
    line-height: 1.55;
    color: #000000 !important;
}

.mph-contact .visit-list li > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(12.5px * 1.55);
    margin-top: 0 !important;
    line-height: 1;
}

/* On an accent-wash section the pill and the background are both #EBF8FF, so
   the pill vanishes. index.html's convention in that case is a white pill. */
.mph-contact section[class*="bg-brand-accent"] span[class*="tracking-widest"][class*="uppercase"][class*="block"] {
    background: #ffffff !important;
}

/* ...except where such a section holds white cards (the Step 1-4 tiles). There
   the pill sits on white, so it keeps the accent wash. The extra compound
   outranks the rule above. */
.mph-contact section[class*="bg-brand-accent"] [class*="bg-white"] span[class*="tracking-widest"][class*="uppercase"][class*="block"] {
    background: #EBF8FF !important;
}

/* Stay Connected panel takes the footer's fill. Using the `background`
   shorthand (as .site-footer does) clears the bg-brand-primary colour
   underneath, so the translucent stops composite over the page ground exactly
   the way the footer's do - otherwise they would sit on navy and read darker
   than the footer. */
.mph-contact .social-panel {
    background: linear-gradient(135deg, rgba(7, 23, 44, 0.93), rgba(0, 78, 117, 0.93)) !important;
}

/* Visiting Hours by Ward: the whole body reads black - ward names, the
   qualifier lines and the times alike. The white header bar above is
   unaffected. */
.mph-contact .ward-card__body,
.mph-contact .ward-card__body div,
.mph-contact .ward-card__body span {
    color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Department Directory on the navy fill
   The section carries the theme dark blue, so the white department cards read
   as raised panels on it. Only the section chrome needs inverting - the cards
   themselves stay light and are untouched.
   -------------------------------------------------------------------------- */

/* The fill is a diagonal gradient. The stops are translucent, so the
   bg-brand-primary colour underneath is what they composite over - that
   resolves to rgb(7, 27, 49) at the top-left and rgb(0, 78, 117) at the
   bottom-right. */
.mph-contact #directory {
    background-image: linear-gradient(135deg, rgba(7, 23, 44, 0.93), rgba(0, 78, 117, 0.93)) !important;
}

/* Search field: the base .form-input is a translucent grey, which goes muddy
   over navy. Solid white keeps it reading as an input. */
.mph-contact #directory .form-input--on-dark {
    background-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #000000 !important;
}

.mph-contact #directory .form-input--on-dark::placeholder {
    color: #475569 !important;
    opacity: 1;
}

/* The magnifying glass sits inside the white field, so it cannot inherit the
   section's white text. */
.mph-contact #directory .dept-search-icon {
    color: #004e75 !important;
}

/* Filter chips, inverted: translucent white at rest, solid white when active
   (the active chip was navy, which would vanish into the section). */
.mph-contact #directory .dept-chip {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

.mph-contact #directory .dept-chip:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

.mph-contact #directory .dept-chip.is-active {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #004e75 !important;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45) !important;
}

/* Cards keep their own borders; a white hairline would glow against navy. */
.mph-contact #directory .dept-card {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* The cards stay light, so the section's on-dark heading and body rules must
   not reach inside them - without this the card text is white on white. */
.mph-contact #directory .dept-card h3 {
    color: #004e75 !important;
}

.mph-contact #directory .dept-card p,
.mph-contact #directory .dept-card li,
.mph-contact #directory .dept-card ul {
    color: #475569 !important;
}

.mph-contact #directory .dept-card a {
    color: #004e75 !important;
}

.mph-contact #directory .dept-card a:hover {
    color: #1c97d4 !important;
}

/* The opening-hours footnote reads black on the light cards. On the navy
   cards black is 1.9:1, so the equivalent there is full white (rule below). */
.mph-contact .dl-card:not(.dl-card--dark) > span:last-child {
    color: #000000 !important;
}

/* --------------------------------------------------------------------------
   "Who Should You Contact?" direct-line cards
   Eight identical cards read flat, so half of them carry the navy fill in a
   checkerboard (1 and 3 on the top row, 2 and 4 on the bottom) - a pattern
   rather than a random pick. Every colour below is a theme token: #004e75
   navy, #1c97d4 cyan and #8ED2F5, the on-dark cyan index.html uses.
   !important is needed throughout: the Tailwind utilities on these cards
   include hover:bg-white, and the grey-ramp mapping above is !important.
   -------------------------------------------------------------------------- */
.mph-contact .dl-card--dark {
    background: linear-gradient(155deg, #015d8c 0%, #004e75 52%, #003a58 100%) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.mph-contact .dl-card--dark:hover {
    background: linear-gradient(155deg, #016b9f 0%, #005884 52%, #004466 100%) !important;
    border-color: rgba(28, 151, 212, 0.55) !important;
}

.mph-contact .dl-card--dark h3 {
    color: #ffffff !important;
}

.mph-contact .dl-card--dark p {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Phone and email rows. */
.mph-contact .dl-card--dark a {
    color: #ffffff !important;
}

.mph-contact .dl-card--dark a:hover {
    color: #8ED2F5 !important;
}

.mph-contact .dl-card--dark a i {
    color: #8ED2F5 !important;
}

/* Icon plate: translucent white at rest, solid cyan on hover - the mirror of
   the light cards, which go accent-wash to cyan. */
.mph-contact .dl-card--dark > div:first-child {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

.mph-contact .dl-card--dark:hover > div:first-child {
    background: #1c97d4 !important;
    color: #ffffff !important;
}

/* Opening-hours footnote and its rule. */
.mph-contact .dl-card--dark > span:last-child {
    color: #ffffff !important;
    border-top-color: rgba(255, 255, 255, 0.18) !important;
}

/* Cautions use the one brand red rather than Tailwind's red-700/800. */
.mph-contact [class*="text-red-7"],
.mph-contact [class*="text-red-8"],
.mph-contact [class*="text-red-9"] {
    color: #ed1c24 !important;
}

/* Buttons and pills pick up the brand radius and face. */
.mph-contact section button,
.mph-contact section a[class*="rounded"] {
    font-family: var(--font-primary);
}

/* Inputs match the site's form styling rather than Tailwind defaults. */
.mph-contact section input,
.mph-contact section select,
.mph-contact section textarea {
    font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   Contact page - on-dark corrections
   The brand harmonisation above sets navy headings, and its selector
   (.mph-contact section h2) outranks the on-dark rules, so the red emergency
   band and the closing CTA card were rendering navy type on a dark ground.
   Restore white in those contexts.
   -------------------------------------------------------------------------- */
.mph-contact section[class*="text-white"] h2,
.mph-contact section[class*="text-white"] h3,
.mph-contact section[class*="text-white"] h4,
.mph-contact [class*="text-white"] h2,
.mph-contact [class*="text-white"] h3,
.mph-contact [class*="text-white"] h4,
.mph-contact .ab-cta-card h2,
.mph-contact .ab-cta-card h3 {
    color: #ffffff !important;
}

.mph-contact section[class*="text-white"] p,
.mph-contact section[class*="text-white"] li,
.mph-contact [class*="text-white"] p,
.mph-contact [class*="text-white"] li,
.mph-contact .ab-cta-card p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.mph-contact .ab-cta-card .ab-cta-note {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Eyebrow badge on a dark ground: translucent white, not the pale blue pill. */
.mph-contact section[class*="text-white"] span[class*="tracking-widest"][class*="uppercase"][class*="block"],
.mph-contact [class*="text-white"] span[class*="tracking-widest"][class*="uppercase"][class*="block"] {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Contact page - centred section heads
   Layout 2 caps these heads at max-w-2xl (672px), which was fine for its
   38px headings but wraps at the MPH heading scale. Widen the heading's
   measure and keep the supporting paragraph narrow.
   -------------------------------------------------------------------------- */
.mph-contact section .text-center[class*="max-w-2xl"] {
    max-width: 62rem !important;
}

.mph-contact section .text-center[class*="max-w-2xl"] > p {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   Contact page - closing CTA proportions
   At full container width the copy caps out well before the buttons, leaving
   a large dead gap mid-card. Capping the card keeps the two columns related.
   -------------------------------------------------------------------------- */
/* The CTA card fills its container, the same as on about.html, where it sits
   directly in .ab-wrap at the full 1260px content width. The 1080px cap here
   made it 180px narrower than every other band on the page. */
.mph-contact .ab-cta-card {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   Header row - stepped compaction
   The bar is now capped at the content width (min(1260px, 92%)), and the
   desktop menu runs from 993px up, so the row is stepped down rather than
   the bar widened. Measured in Chrome at 1440 / 1366 / 1280 / 1150 / 1024.
   ========================================================================== */
@media (max-width: 1340px) {
    .navbar {
        gap: 10px;
    }
    .nav-menu {
        gap: 9px !important;
    }
    .nav-menu a,
    .nav-link {
        font-size: 12.5px !important;
    }
    .main-header .nav-brand img {
        height: 62px !important;
    }
}

@media (max-width: 1150px) {
    .nav-menu {
        gap: 6px !important;
    }
    .nav-menu a,
    .nav-link {
        font-size: 12px !important;
    }
    .main-header .nav-brand img {
        height: 54px !important;
    }
    #nav-cta-btn {
        font-size: 11.5px !important;
        padding: 8px 8px 8px 14px !important;
    }
    .nav-link.nav-ai-link {
        padding: 5px 10px;
    }
}

/* Collapse to the hamburger before the row can overflow.
   Also closes a pre-existing gap: .nav-menu hid at 992px but
   .mobile-nav-toggle only appeared at 768px, leaving 769-992px with no
   navigation at all. Both now switch at the same breakpoint. */
@media (max-width: 1100px) {
    .main-header .nav-menu {
        display: none !important;
    }

    .main-header .mobile-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Contact page - button shape
   Every other page uses full pill buttons (999px). Layout 2 uses Tailwind's
   rounded / rounded-lg (6-8px). Pill the real CTAs; the wide link tiles
   (justify-between rows and the social rows at rounded-xl) keep a card
   radius, since turning those into pills would misrepresent them as buttons.
   -------------------------------------------------------------------------- */
/* Not scoped to <section> - several CTAs (Call Now, Ambulance, Send Message)
   sit outside one. The shared header and footer use no rounded-* classes, so
   .mph-contact is a safe scope. */
.mph-contact a[class*="rounded-lg"]:not([class*="justify-between"]),
.mph-contact a[class*="rounded-md"]:not([class*="justify-between"]),
.mph-contact button[class*="rounded"] {
    border-radius: 999px !important;
}

/* The wide link tiles come in two radii (8px rows, 12px social rows). Bring
   both to 12px so they read as one component family, in the site's card range. */
.mph-contact a[class*="justify-between"][class*="rounded"],
.mph-contact a[class*="rounded-xl"] {
    border-radius: 12px !important;
}

/* ==========================================================================
   Hero image slider arrows
   Two arrows only, sitting in the hero's left and right margins, vertically
   centred. The offset formula centres each one in the gap between the
   viewport edge and the 1260px content container, falling back to a 16px
   inset once that gap closes.
   ========================================================================== */
.hero-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #015485;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(7, 22, 44, 0.22);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.hero-slider-nav:hover {
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(7, 22, 44, 0.3);
}

.hero-slider-nav:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.hero-slider-nav--prev {
    left: max(16px, calc((100% - 1260px) / 4));
}

.hero-slider-nav--next {
    right: max(16px, calc((100% - 1260px) / 4));
}

@media (max-width: 900px) {
    .hero-slider-nav {
        width: 40px;
        height: 40px;
    }
    .hero-slider-nav--prev { left: 10px; }
    .hero-slider-nav--next { right: 10px; }
}


/* ==========================================================================
   CTA arrow badge - one treatment everywhere
   The theme's convention is a circular badge with an arrow (as on
   BOOK AN APPOINTMENT). Several buttons carried a literal "→" instead; those
   glyphs are removed from the markup and the badge is applied here.
   Contrast is inverted on light-filled buttons so the circle stays visible.
   ========================================================================== */
.ab-cta-btn:not(:has(.icon-circle))::after,
.new-about-btn-secondary:not(:has(.icon-circle))::after,
.btn-location-directions:not(:has(.icon-circle))::after,
.btn-location-review:not(:has(.icon-circle))::after,
.emerg__acts .btn:not(:has(.icon-circle))::after,
.pkg-btn:not(:has(.icon-circle))::after {
    content: '\2197';
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #004e75;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* These buttons need to become flex rows to seat the badge. */
.ab-cta-btn,
.new-about-btn-secondary,
.btn-location-directions,
.btn-location-review,
.pkg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Light-filled or light-on-white buttons: invert so the badge reads. */
.ab-cta-btn--solid:not(:has(.icon-circle))::after,
.new-about-btn-secondary:not(:has(.icon-circle))::after,
.btn-location-review:not(:has(.icon-circle))::after,
.emerg__acts .btn--solid:not(:has(.icon-circle))::after,
.pkg-btn:not(:has(.icon-circle))::after {
    background: #004e75;
    color: #ffffff;
}

.ab-cta-btn:hover::after,
.new-about-btn-secondary:hover::after,
.btn-location-directions:hover::after,
.btn-location-review:hover::after,
.emerg__acts .btn:hover::after,
.pkg-btn:hover::after {
    transform: translate(2px, -2px);
}

/* OB/GYN department pink: the inverted badge follows the theme colour. */
body.theme-pink .pkg-btn:not(:has(.icon-circle))::after {
    background: #C23C7E;
}

/* The OPD photo is 680x481 (1.41) but its box is roughly 2.2:1 once the media
   column is height-matched to the copy, so `cover` was cutting the top off the
   building. `contain` shows the whole frame; the tinted ground keeps it
   reading as a framed photograph rather than a failed crop. */
/* Box ratio now equals the source ratio, so `cover` fills without trimming
   and no letterbox ground is needed. */

/* ==========================================================================
   Specialty pills as CTAs
   Each pill is now a link, so it carries the same arrow badge as every other
   CTA. The pills are white on a photo, so the badge takes the inverted
   navy-circle / white-arrow treatment used on light-filled buttons.
   ========================================================================== */
.dept-tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    padding: 9px 11px 9px 20px;
}

.dept-tag-pill:not(:has(.icon-circle))::after {
    content: '\2197';
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #004e75;
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.dept-tag-pill:hover::after {
    transform: translate(2px, -2px);
}

/* OB/GYN department pink follows the theme. */
body.theme-pink .dept-tag-pill:not(:has(.icon-circle))::after {
    background: #C23C7E;
}

/* ==========================================================================
   Carousel arrows flanking the slides
   Prev/next sit at the left and right edges of the slide area, vertically
   centred on it, rather than in the row below. The dots stay below.
   .carousel-stage wraps only the viewport and the two arrows, so `top: 50%`
   centres on the slides and not on the slides-plus-controls block.
   ========================================================================== */
.carousel-stage {
    position: relative;
}

.carousel-stage-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    background: #ffffff;
    color: #015485;
    border: 1px solid rgba(1, 84, 133, 0.14);
    box-shadow: 0 8px 22px rgba(7, 22, 44, 0.16);
}

.carousel-stage-nav:hover {
    background: #015485;
    color: #ffffff;
    border-color: transparent;
}

/* Just outside the slide edges. A max() of two negative lengths did not
   resolve here, which left the arrows sitting on the slides, so this uses a
   plain offset and steps inside at the breakpoint where the margin closes. */
.carousel-stage-nav--prev {
    left: -56px;
}

.carousel-stage-nav--next {
    right: -56px;
}

/* Controls row now holds only the dots. */
.carousel-controls,
.doctors-carousel-controls {
    justify-content: center;
}

@media (max-width: 1420px) {
    /* No room outside the slides - tuck the arrows just inside the edges. */
    .carousel-stage-nav--prev { left: 8px; }
    .carousel-stage-nav--next { right: 8px; }
}

@media (max-width: 640px) {
    .carousel-stage-nav {
        width: 38px;
        height: 38px;
    }
}

/* ==========================================================================
   Specialties section header
   Eyebrow, heading, description and both CTAs stack in one column instead of
   the CTA floating opposite the heading.
   ========================================================================== */
/* Heading column on the left (eyebrow, title, CTAs); description beside it. */
.dept-header-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
    margin-bottom: 50px;
}

.dept-header-side {
    min-width: 0;
}

.dept-header-desc {
    max-width: 52ch;
    margin: 0;
}

.dept-header-area .dept-header-cta {
    margin-top: 26px;
}

@media (max-width: 900px) {
    .dept-header-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .dept-header-desc {
        max-width: 60ch;
    }
}

.dept-header-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

@media (max-width: 640px) {
    .dept-header-cta .btn-pill-navy {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Second pill is solid white against the navy-filled primary, so the pair
   reads as two distinct actions rather than one repeated. */
.btn-pill-navy.btn-pill-white {
    background: #ffffff !important;
    background-image: none !important;
    color: #004e75 !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 10px 24px rgba(7, 22, 44, 0.18);
}

.btn-pill-navy.btn-pill-white:hover {
    background: #f2f7fb !important;
    color: #004e75 !important;
    border-color: #f2f7fb !important;
}

.btn-pill-navy.btn-pill-white span {
    color: #004e75 !important;
}

/* Arrow badge inverts on the white pill so it stays visible. */
.btn-pill-navy.btn-pill-white .icon-circle {
    background: #004e75 !important;
    color: #ffffff !important;
}

.btn-pill-navy.btn-pill-white .icon-circle svg {
    stroke: #ffffff;
    color: #ffffff;
}

/* Emergency call button: the badge keeps its white circle, but the arrow
   takes the button's own red rather than the site navy. Scoped to this one
   CTA - every other arrow badge stays navy. */
.emerg__acts .btn--emerg:not(:has(.icon-circle))::after {
    color: #ed1c24;
}

/* ==========================================================================
   Footer - grouped link columns
   Brand block plus six link groups. Uses the existing .footer-title-bar and
   .footer-links styling, so only the column layout is new.
   ========================================================================== */
.site-footer .footer-grid {
    display: grid !important;
    /* Brand block plus five equal link tracks, so every group is the same
       width and the headings align across the row. */
    grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)) !important;
    gap: 40px 30px !important;
    padding-bottom: 60px;
    align-items: start;
}

.site-footer .footer-col {
    min-width: 0;
}

/* .footer-desc carries margin-right:150px, sized for the old 2fr brand
   column. In the six-track grid that left it 119px of a 269px column. */
.site-footer .footer-desc {
    margin-right: 0;
}

/* Contact spans the grid and lays its items out in a row. */
.footer-contact-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 34px;
    margin-bottom: 10px;
}

.footer-contact-row .contact-info-list {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 24px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 900px) {
    .footer-contact-row .contact-info-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .footer-contact-row .contact-info-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1200px) {
    .site-footer .footer-grid {
        grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .site-footer .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 36px 28px !important;
    }
    .site-footer .footer-brand {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .site-footer .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .site-footer .footer-brand {
        grid-column: span 1;
    }
}

/* Contact page (Layout 2) container: Tailwind's max-w-[1300px] runs 20px
   wider than the shared 1260px box, so its sections sat outside the header
   and footer edges. */
.mph-contact [class*="max-w-[1300px]"] {
    /* Same formula as .container, so it tracks the header at every width -
       a flat 1260px cap still ran wide below ~1370px. */
    width: min(1260px, 92%) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   About page - milestones on the dark band
   .ab-page .ab-node h3/p set their colour with !important, so the on-dark
   overrides have to be declared here (and with !important) rather than in
   the page's own <style> block.
   ========================================================================== */
.ab-dark--journey .ab-node h3 {
    color: #ffffff !important;
}

.ab-dark--journey .ab-node p {
    color: rgba(255, 255, 255, 0.78) !important;
}

.ab-dark--journey .ab-node-era {
    color: #8ED2F5 !important;
}

/* ==========================================================================
   About page - eyebrow pills on pale bands
   The shared eyebrow rule sets `background: var(--eyebrow-bg) !important`
   (#EBF8FF). About's --ab-wash (#EBF8FF), --ab-card (#F0F6FF) and its
   near-white bands are all within ~1.03 contrast of that, so the pill was
   invisible. A white ground plus a light blue keyline reads on all of them,
   and matches how the badge reads against white on index.html.
   ========================================================================== */
.ab-page .ab-band .ab-eyebrow:not(.on-dark) {
    background: #ffffff !important;
    border: 1px solid rgba(28, 151, 212, 0.28);
}

/* ==========================================================================
   About page - Plan Your Visit panel links
   The hours values (8:00 am - 8:00 pm, Closed, 24 hours) render at 14.5px /
   600 / #004e75. The panel links were the same size but 400 weight in cyan,
   so they read as a different tier. Matched to the hours treatment, with an
   underline on hover so they still announce themselves as links.
   ========================================================================== */
.ab-page .ab-visit-cell address a {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #004e75 !important;
    text-decoration: none;
}

.ab-page .ab-visit-cell address a:hover {
    color: #1c97d4 !important;
    text-decoration: underline;
}