html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    font-size: var(--frontend-base-font-size);
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    color: var(--hospital-ink);
    background: var(--theme-white);
    font-family: var(--frontend-body-font-family);
    -webkit-font-smoothing: antialiased;
}

@supports (overflow: clip) {

    html,
    body {
        overflow-x: clip;
    }
}

#header-app {
    min-height: 159px;
}

#frontend-app {
    min-height: calc(100vh - 159px);
}

body,
button,
input,
select,
textarea {
    font-family: var(--frontend-body-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hospital-brand strong {
    font-family: var(--frontend-heading-font-family);
}

a {
    text-decoration: none;
}

.container {
    max-width: 1200px;
}

.btn {
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: -.01em;
    padding: .8rem 1.25rem;
}

.btn-hospital-primary {
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 1px solid var(--hospital-green);
    box-shadow: 0 8px 20px rgba(15, 118, 110, .18);
}

.btn-hospital-primary:hover,
.btn-hospital-primary:focus {
    color: var(--theme-white);
    background: var(--hospital-green-dark);
    border-color: var(--hospital-green-dark);
    transform: translateY(-1px);
}

.btn-hospital-primary:disabled {
    opacity: .55;
    transform: none;
    box-shadow: none;
}

.btn-hospital-outline {
    color: var(--hospital-green);
    border: 1px solid #9fc5bd;
    background: var(--theme-white);
}

.btn-hospital-outline:hover {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.btn-hospital-ghost {
    color: var(--hospital-ink);
    background: transparent;
    border-color: transparent;
}

.section-space {
    padding: 96px 0;
}

.section-heading {
    max-width: 680px;
    margin: 0 auto 46px;
}

.section-heading h2 {
    color: var(--hospital-ink);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 750;
    letter-spacing: -.045em;
    margin: 10px 0 13px;
}

.section-heading p {
    color: var(--hospital-muted);
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0;
}

.section-heading-row {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.section-kicker {
    color: var(--hospital-green);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.section-kicker.light {
    color: #9ddad1;
}

#doctors,
#departments,
#notices,
#news,
#gallery {
    scroll-margin-top: 68px;
}

.text-link {
    color: var(--hospital-green);
    font-weight: 700;
}

.text-link i {
    margin-left: 7px;
    transition: transform .2s ease;
}

.text-link:hover {
    color: var(--hospital-green-dark);
}

.text-link:hover i {
    transform: translateX(4px);
}

/* Header navigation */
.site-header {
    position: relative;
    z-index: 1000;
}

.hospital-topbar {
    height: 34px;
    color: #d4e7e3;
    background: var(--hospital-green-dark);
    font-size: .64rem;
}

.hospital-topbar .container {
    height: 100%;
}

.hospital-topbar a,
.hospital-topbar span {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hospital-topbar a:hover {
    color: var(--theme-white);
}

.topbar-info {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 22px;
}

.topbar-emergency {
    white-space: nowrap;
}

.topbar-emergency strong {
    color: var(--theme-white);
}

.topbar-pulse {
    width: 6px;
    height: 6px;
    background: #ff7b68;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 123, 104, .15);
}

.topbar-actions {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-social {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    place-items: center;
}

.topbar-social:hover {
    background: rgba(255, 255, 255, .1);
}

.lang-switch {
    color: var(--theme-white);
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .18);
    border-right: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    padding: 0 12px;
    font-weight: 700;
}

.hospital-brandbar {
    height: 76px;
    background: var(--theme-white);
}

.brandbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brandbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hospital-brand {
    color: var(--hospital-ink);
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.hospital-brand:hover {
    color: var(--hospital-ink);
}

.hospital-brand>span:last-child {
    display: flex;
    flex-direction: column;
}

.hospital-brand strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.05;
}

.hospital-brand small {
    color: #66817e;
    font-size: .55rem;
    letter-spacing: .03em;
    margin-top: 2px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 50% 50% 50% 12px;
    display: grid;
    place-items: center;
    transform: rotate(-8deg);
}

.brand-mark i {
    transform: rotate(8deg);
    font-size: 1rem;
}

.header-contact-card {
    color: #506a67;
    align-items: center;
    gap: 9px;
    padding-right: 16px;
    border-right: 1px solid var(--hospital-border);
}

.header-contact-card>span {
    width: 32px;
    height: 32px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.header-contact-card>div,
.header-login-btn>span {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-contact-card small,
.header-login-btn small {
    color: #81928f;
    font-size: .52rem;
}

.header-contact-card strong,
.header-login-btn strong {
    color: var(--hospital-ink);
    font-size: .69rem;
    margin-top: 2px;
}

.header-login-btn {
    min-height: 43px;
    color: var(--hospital-ink);
    background: var(--theme-surface-muted);
    border: 1px solid #e0ebe9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 11px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.header-login-btn:hover {
    color: var(--hospital-ink);
    background: var(--hospital-mint-light);
    border-color: #bfded8;
    transform: translateY(-1px);
}

.header-login-btn>i {
    color: var(--hospital-green);
    font-size: 1rem;
}

.brandbar-book-btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    font-size: .69rem;
    padding: .68rem .9rem;
    border-radius: 10px;
    box-shadow: none;
    white-space: nowrap;
}

.brandbar-book-btn i {
    margin-right: 6px;
}

.hospital-navbar {
    height: 49px;
    padding: 0;
    background: var(--theme-surface-soft);
    border-top: 1px solid rgba(19, 68, 64, .08);
    border-bottom: 1px solid rgba(19, 68, 64, .1);
    transition: box-shadow .2s ease, background .2s ease;
}

.menu-container {
    height: 100%;
}

.hospital-navbar .navbar-collapse {
    height: 100%;
    justify-content: center;
}

.hospital-navbar .navbar-nav {
    height: 100%;
    gap: 3px;
    margin: 0 auto;
}

.hospital-navbar .nav-link {
    height: 100%;
    color: #38514f;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    font-family: var(--frontend-body-font-family);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .025em;
    text-transform: uppercase;
    padding: 0 11px !important;
    position: relative;
}

.hospital-navbar .nav-link:hover,
.hospital-navbar .nav-link.active {
    color: var(--theme-white);
    background: var(--hospital-green);
}

.hospital-navbar .nav-link.active::after {
    display: none;
}

.hospital-navbar .dropdown-menu {
    border: 1px solid var(--hospital-border);
    border-radius: 9px;
    padding: 7px;
    margin-top: 0;
    box-shadow: 0 16px 45px rgba(13, 53, 51, .12);
}

.hospital-navbar .dropdown-item {
    color: #38514f;
    border-radius: 6px;
    font-family: var(--frontend-body-font-family);
    font-size: .76rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 9px 11px;
}

.hospital-navbar .dropdown-item:hover,
.hospital-navbar .dropdown-item:focus {
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
}

.navbar-toggler {
    width: 42px;
    height: 42px;
    border: 0;
    padding: 9px;
}

.navbar-toggler span {
    width: 23px;
    height: 2px;
    background: var(--hospital-ink);
    display: block;
    margin: 5px auto;
}

.sticky-menu-spacer {
    height: 49px;
}

.is-scrolled .hospital-menu-bar {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    right: 0;
    height: 49px;
    background: rgba(255, 255, 255, .98);
    border-top: 0;
    box-shadow: 0 10px 32px rgba(9, 51, 48, .13);
    backdrop-filter: blur(12px);
}

.sticky-brand {
    color: var(--hospital-ink);
    display: none;
    align-items: center;
    gap: 8px;
    font: 800 .82rem var(--frontend-heading-font-family);
    letter-spacing: .08em;
}

.sticky-brand .brand-mark {
    width: 29px;
    height: 29px;
}

.sticky-brand .brand-mark i {
    font-size: .76rem;
}

.sticky-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

.is-scrolled .sticky-brand,
.is-scrolled .sticky-actions {
    display: flex;
}

.is-scrolled .hospital-navbar .navbar-nav {
    margin: 0 auto;
}

.sticky-patient-link {
    width: 34px;
    height: 34px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.sticky-book-btn {
    font-size: .62rem;
    padding: .52rem .7rem;
    box-shadow: none;
}

.sticky-book-btn i {
    margin-right: 5px;
}

.mobile-menu-label {
    display: none;
    min-width: 0;
    color: #56706d;
    align-items: center;
    gap: 9px;
    font-family: var(--frontend-body-font-family);
}

.mobile-menu-label-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #e1f1ee;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: .7rem;
}

.mobile-menu-label-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.mobile-menu-label-copy small {
    color: #809591;
    font-size: .46rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mobile-menu-label-copy strong {
    color: var(--hospital-ink);
    overflow: hidden;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 3px;
}

.is-scrolled .hospital-navbar .nav-link {
    font-size: .73rem;
    padding-left: 9px !important;
    padding-right: 9px !important;
}

.modern-nav-list .menu-icon {
    width: 14px;
    flex: 0 0 14px;
    display: grid;
    place-items: center;
    font-size: .7rem;
    margin-right: 6px;
}

.nav-dropdown-toggle .menu-chevron {
    font-size: .67rem;
    margin-left: 6px;
    transition: transform .22s ease;
}

.modern-dropdown.show>.nav-dropdown-toggle .menu-chevron {
    transform: rotate(180deg);
}

.modern-dropdown-menu {
    min-width: 270px;
}

.dropdown-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--hospital-border);
    padding: 8px 9px 12px;
    margin-bottom: 5px;
}

.dropdown-intro>span {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: linear-gradient(145deg, var(--hospital-green), #159082);
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.dropdown-intro>div {
    display: flex;
    flex-direction: column;
}

.dropdown-intro strong {
    color: var(--hospital-ink);
    font-size: .7rem;
}

.dropdown-intro small {
    color: var(--hospital-muted);
    font-size: .56rem;
    margin-top: 2px;
}

.modern-dropdown-menu .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.modern-dropdown-menu .dropdown-item>i {
    color: #9aadaa;
    font-size: .58rem;
    transition: transform .2s ease;
}

.modern-dropdown-menu .dropdown-item:hover>i {
    color: var(--hospital-green);
    transform: translateX(3px);
}

.dropdown-submenu {
    position: relative;
}

.submenu-toggle {
    width: 100%;
    border: 0;
    background: transparent;
}

.submenu-menu {
    list-style: none;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 11px;
    box-shadow: 0 18px 45px rgba(13, 53, 51, .15);
    padding: 7px;
    margin: 0;
}

.submenu-menu a {
    color: #405956;
    border-radius: 7px;
    display: block;
    font-family: var(--frontend-body-font-family);
    font-size: .73rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 9px 11px;
    white-space: nowrap;
}

.submenu-menu a:hover {
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    transform: translateX(2px);
}

.mobile-menu-backdrop,
.mobile-drawer-head,
.mobile-menu-quick {
    display: none;
}

.patient-account {
    position: relative;
}

.patient-account-trigger {
    min-height: 42px;
    color: var(--hospital-ink);
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 7px;
}

.patient-account-avatar {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    color: #0c5a54;
    background: #c8e8e3;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .58rem;
    font-weight: 800;
    overflow: hidden;
}

.patient-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.patient-account-copy {
    max-width: 120px;
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}

.patient-account-copy small {
    color: #849793;
    font-size: .51rem;
}

.patient-account-copy strong {
    color: var(--hospital-ink);
    font-size: .66rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-account-trigger>i {
    color: #77908d;
    font-size: .65rem;
}

.patient-account-menu {
    width: 245px;
    position: absolute;
    z-index: 1100;
    top: calc(100% + 9px);
    right: 0;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(8, 44, 42, .2);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: .18s ease;
}

.patient-account.show .patient-account-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-menu-head {
    border-bottom: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 12px;
    margin-bottom: 5px;
}

.account-menu-head .patient-account-avatar {
    width: 36px;
    height: 36px;
}

.account-menu-head>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.account-menu-head strong {
    color: var(--hospital-ink);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-menu-head small {
    color: var(--hospital-muted);
    font-size: .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patient-account-menu>a,
.patient-account-menu>button {
    width: 100%;
    color: #405a57 !important;
    border: 0;
    background: transparent;
    border-radius: 6px;
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    font-size: .72rem;
    text-align: left;
    padding: 9px 10px;
}

.patient-account-menu>a:hover {
    color: var(--hospital-green) !important;
    background: var(--hospital-mint-light);
}

.patient-account-menu>button {
    color: #b64f42 !important;
    border-top: 1px solid var(--hospital-border);
    border-radius: 0 0 6px 6px;
    margin-top: 5px;
    padding-top: 11px;
}

.patient-account-menu>a i,
.patient-account-menu>button i {
    width: 14px;
    color: inherit;
}

/* Home: Hero */
.hospital-hero {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: var(--hospital-green-dark);
}

.hero-image {
    position: absolute;
    inset: 0;
    background: url('/assets/frontend/images/hospital-hero.png') center center / cover no-repeat;
}

.hero-banner-mode {
    min-height: 560px;
}

.hero-banner-mode .hero-image-banner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #e9f4fb;
}

.hero-banner-backdrop {
    display: none;
}

.hero-banner-picture {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
}

.hero-banner-picture img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-banner-mode .hero-carousel-controls {
    bottom: 20px;
}

.hero-banner-mode .hero-dots,
.hero-banner-mode .hero-arrows {
    background: rgba(5, 48, 45, .72);
    border-radius: 30px;
    padding: 8px 12px;
    backdrop-filter: blur(7px);
}

.hero-image {
    transition: opacity .7s ease, transform 7s ease;
}

.hero-fade-enter-active,
.hero-fade-leave-active {
    transition: opacity .7s ease;
}

.hero-fade-enter-from,
.hero-fade-leave-to {
    opacity: 0;
}

.hero-fade-leave-active {
    position: absolute;
}

.hero-copy-enter-active,
.hero-copy-leave-active {
    transition: opacity .35s ease, transform .35s ease;
}

.hero-copy-enter-from {
    opacity: 0;
    transform: translateY(14px);
}

.hero-copy-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 48, 43, .96) 0%, rgba(4, 61, 54, .88) 38%, rgba(4, 61, 54, .14) 73%, rgba(4, 61, 54, .04) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.min-vh-hero {
    min-height: 560px;
}

.hero-eyebrow {
    color: #c9ece5;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-eyebrow span {
    width: 28px;
    height: 2px;
    background: var(--hospital-coral);
}

.hospital-hero h1 {
    color: var(--theme-white);
    font-size: clamp(3rem, 5.4vw, 5rem);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: 1.03;
    margin: 20px 0 22px;
}

.hospital-hero h1 em {
    color: #aedfd6;
    font-family: var(--frontend-heading-font-family);
    font-weight: 500;
}

.hospital-hero p {
    color: #e7f3f1;
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 570px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 30px;
}

.hero-actions .btn {
    font-size: .91rem;
    padding: 1rem 1.35rem;
}

.hero-actions .btn i {
    margin-left: 12px;
}

.hero-actions .btn-hospital-primary {
    background: var(--hospital-coral);
    border-color: var(--hospital-coral);
    box-shadow: 0 8px 20px rgba(239, 118, 95, .24);
}

.hero-actions .btn-hospital-primary:hover {
    background: #d95f49;
    border-color: #d95f49;
}

.hero-contact-link {
    color: var(--theme-white);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 700;
}

.hero-contact-link>span {
    width: 40px;
    height: 40px;
    color: var(--hospital-green-dark);
    background: var(--theme-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.hero-contact-link:hover {
    color: #c9ece5;
}

.hero-carousel-controls {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 32px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-dots button {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .48);
    border: 0;
    border-radius: 50%;
    padding: 0;
    transition: width .2s ease, background .2s ease, border-radius .2s ease;
}

.hero-dots button.active {
    width: 30px;
    background: var(--hospital-coral);
    border-radius: 10px;
}

.hero-arrows {
    color: var(--theme-white);
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.hero-arrows button {
    width: 36px;
    height: 36px;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.hero-arrows button:hover {
    background: var(--hospital-coral);
    border-color: var(--hospital-coral);
}

/* Home: Highlights and notice */
.feature-strip {
    position: relative;
    z-index: 4;
    margin-top: -20px;
    padding-top: 0;
}

.feature-panel {
    min-height: 112px;
    position: relative;
    background: var(--theme-white);
    border: 1px solid rgba(18, 71, 67, .08);
    border-radius: 14px;
    box-shadow: var(--hospital-shadow);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.quick-care-label {
    position: absolute;
    z-index: 2;
    left: 20px;
    top: -13px;
    color: var(--theme-white);
    background: var(--hospital-coral);
    border-radius: 20px;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 6px 10px;
    text-transform: uppercase;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 25px;
    position: relative;
}

.feature-item:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 42px;
    background: var(--hospital-border);
    right: 0;
}

.feature-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.feature-item div {
    display: flex;
    flex-direction: column;
}

.feature-item strong {
    font-size: .88rem;
}

.feature-item small {
    color: var(--hospital-muted);
    font-size: .7rem;
    margin-top: 3px;
}

.notice-section {
    padding: 30px 0 8px;
}

.notice-bar {
    min-height: 52px;
    border-bottom: 1px solid var(--hospital-border);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.notice-label {
    color: var(--hospital-coral);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-right: 24px;
}

.notice-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.notice-date {
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 4px;
    font-size: .64rem;
    font-weight: 800;
    padding: 5px 7px;
}

.notice-copy strong {
    color: #37524f;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-copy a {
    color: var(--hospital-green);
    font-size: .73rem;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.notice-controls {
    display: flex;
    margin-left: 16px;
}

.notice-controls button {
    width: 27px;
    height: 27px;
    color: #57706d;
    border: 1px solid var(--hospital-border);
    background: var(--theme-white);
    line-height: 1;
}

/* Home: About preview */
.home-about-section {
    background: linear-gradient(180deg, var(--theme-white) 0%, #f7fbfa 100%);
}

.home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 78px;
}

.home-about-visual {
    min-height: 500px;
    position: relative;
}

.home-about-visual::before {
    content: "";
    width: 76%;
    height: 84%;
    position: absolute;
    left: -18px;
    bottom: -18px;
    background: var(--hospital-mint);
    border-radius: 20px 80px 20px 20px;
}

.home-about-visual img {
    width: 100%;
    height: 500px;
    position: relative;
    z-index: 1;
    object-fit: cover;
    border-radius: 18px 75px 18px 18px;
    box-shadow: var(--hospital-shadow);
}

.home-about-badge {
    width: 180px;
    min-height: 112px;
    position: absolute;
    z-index: 2;
    right: -25px;
    bottom: 34px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 7px solid var(--theme-white);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 17px 20px;
    box-shadow: 0 18px 40px rgba(7, 81, 73, .2);
}

.home-about-badge strong {
    font: 800 2rem/1 var(--frontend-heading-font-family);
}

.home-about-badge span {
    color: #cde7e2;
    font-size: .65rem;
    margin-top: 6px;
}

.home-about-copy h2 {
    max-width: 580px;
    font-size: clamp(2.25rem, 4vw, 3.3rem);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.1;
    margin: 14px 0 20px;
}

.home-about-copy p {
    color: var(--hospital-muted);
    font-size: .88rem;
    line-height: 1.8;
}

.home-about-copy .home-about-lead {
    color: #3d5753;
    font-size: 1.03rem;
    font-weight: 600;
}

.home-about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 27px 0 31px;
}

.home-about-points span {
    color: #3e5854;
    font-size: .75rem;
    font-weight: 700;
}

.home-about-points i {
    width: 23px;
    height: 23px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: .58rem;
    margin-right: 8px;
}

.notice-controls button+button {
    border-left: 0;
}

/* Home: Departments preview */
.departments-section {
    padding-top: 82px;
    background: var(--theme-white);
}

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

.department-card {
    min-height: 160px;
    color: var(--hospital-ink);
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 12px;
    padding: 25px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: center;
    transition: .22s ease;
}

.department-card:hover {
    color: var(--hospital-ink);
    border-color: #9bcfc6;
    box-shadow: 0 18px 45px rgba(13, 85, 78, .09);
    transform: translateY(-3px);
}

.department-icon {
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 50% 50% 50% 16px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}

.department-card:nth-child(3n+2) .department-icon {
    color: #bf5b48;
    background: #fff0ec;
}

.department-card strong {
    align-self: end;
    font-family: var(--frontend-heading-font-family);
    font-size: 1.02rem;
}

.department-card small {
    color: var(--hospital-muted);
    align-self: start;
    margin-top: 4px;
}

.card-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
    color: #98afac;
}

/* Home: Appointment form */
.appointment-section {
    background: var(--hospital-mint-light);
}

.appointment-shell {
    min-height: 670px;
    display: grid;
    grid-template-columns: 38% 62%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(17, 70, 66, .15);
}

.appointment-aside {
    color: var(--theme-white);
    padding: 60px 50px;
    background: linear-gradient(155deg, var(--hospital-green), var(--hospital-green-dark));
    position: relative;
    overflow: hidden;
}

.appointment-aside::after {
    content: "+";
    position: absolute;
    right: -45px;
    bottom: -110px;
    color: rgba(255, 255, 255, .055);
    font: 500 340px/1 var(--frontend-heading-font-family);
}

.appointment-aside h2 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.08;
    margin: 15px 0 20px;
}

.appointment-aside>p {
    color: #cae6e2;
    font-size: .97rem;
    line-height: 1.7;
}

.appointment-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 38px;
}

.appointment-benefits span {
    color: #e7f6f3;
    font-size: .84rem;
}

.appointment-benefits i {
    width: 22px;
    height: 22px;
    color: var(--hospital-green);
    background: #c7ebe5;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: .64rem;
    margin-right: 10px;
}

.need-help {
    position: absolute;
    left: 50px;
    bottom: 50px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
}

.need-help>i {
    width: 44px;
    height: 44px;
    color: var(--theme-white);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.need-help div {
    display: flex;
    flex-direction: column;
}

.need-help small {
    color: #b7d8d4;
    font-size: .68rem;
}

.need-help a {
    color: var(--theme-white);
    font-size: 1rem;
    font-weight: 800;
}

.appointment-form-wrap {
    min-width: 0;
    background: var(--theme-white);
    padding: 47px 54px 38px;
}

.appointment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--hospital-border);
    padding-bottom: 22px;
    margin-bottom: 26px;
}

.step-label {
    color: var(--hospital-green);
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.appointment-head h3 {
    color: var(--hospital-ink);
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.035em;
    margin: 4px 0 0;
}

.step-dots {
    display: flex;
    gap: 6px;
}

.step-dots span {
    width: 24px;
    height: 3px;
    background: #dce7e4;
    border-radius: 4px;
}

.step-dots span.active {
    background: var(--hospital-green);
}

.form-label {
    color: #3d5653;
    display: block;
    font-size: .74rem;
    font-weight: 800;
    margin: 0 0 7px;
}

.step-panel>.form-label:not(:first-child) {
    margin-top: 23px;
}

.form-control,
.form-select {
    color: var(--hospital-ink);
    min-height: 46px;
    border-color: #d8e4e1;
    border-radius: 7px;
    font-size: .84rem;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #65aea5;
}

.input-icon {
    position: relative;
}

.input-icon>i {
    position: absolute;
    z-index: 2;
    left: 15px;
    top: 15px;
    color: var(--hospital-green);
}

.input-icon .form-control,
.input-icon .form-select {
    padding-left: 43px;
}

.doctor-avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: linear-gradient(135deg, #5e9e97, #245d59);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-weight: 800;
}

.doctor-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.doctor-meta strong {
    color: var(--hospital-ink);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.doctor-meta small {
    color: var(--hospital-muted);
    font-size: .61rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 5px;
}

.doctor-meta em {
    color: var(--hospital-green);
    font-size: .57rem;
    font-style: normal;
}

.doctor-meta em i {
    font-size: .42rem;
    margin-right: 4px;
}

.empty-state {
    grid-column: 1 / -1;
    color: #839592;
    background: #f8faf9;
    border: 1px dashed #ceddd9;
    border-radius: 8px;
    font-size: .77rem;
    text-align: center;
    padding: 22px;
    margin: 0;
}

.invalid-feedback {
    font-size: .66rem;
}

.appointment-actions {
    min-height: 54px;
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: end;
    margin-top: 24px;
    padding-top: 17px;
}

.appointment-actions .btn {
    font-size: .8rem;
    padding: .72rem 1.15rem;
}

.appointment-actions .btn i {
    margin: 0 5px;
}

.public-appointment-section {
    padding-bottom: 88px;
}

.public-appointment-shell {
    min-height: 0;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: 20px;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.public-appointment-shell .appointment-aside {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: linear-gradient(145deg, #0d7e73 0%, #07574f 58%, #043c38 100%);
    box-shadow: 0 24px 55px rgba(8, 72, 66, .2);
}

.public-appointment-shell .appointment-aside::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -115px;
    right: -80px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(255, 255, 255, .035);
}

.public-appointment-shell .appointment-aside h2 {
    color: var(--theme-white);
    max-width: 360px;
    text-shadow: 0 2px 18px rgba(0, 31, 28, .2);
}

.public-appointment-shell .appointment-aside>p {
    color: #d9f0ed;
}

.public-appointment-shell .section-kicker.light {
    display: inline-flex;
    align-items: center;
    width: max-content;
    color: #e9fffb;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    letter-spacing: .12em;
    padding: 7px 11px;
}

.public-appointment-shell .appointment-benefits span {
    display: flex;
    align-items: center;
    color: #f0fbf9;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    padding: 10px 12px;
}

.public-appointment-shell .appointment-benefits i {
    flex: 0 0 22px;
}

.public-appointment-shell .need-help {
    right: 42px;
    bottom: 38px;
    left: 42px;
    background: rgba(2, 38, 35, .28);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 11px 13px;
}

.public-appointment-form-wrap {
    border: 1px solid #dce9e6;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(17, 70, 66, .11);
    padding-top: 40px;
}

.public-appointment-form-row .form-label {
    color: var(--hospital-ink);
    font-size: .7rem;
    font-weight: 750;
    margin-bottom: 7px;
}

.public-appointment-form-row textarea.form-control {
    min-height: 92px;
    resize: vertical;
}

.appointment-form-icon {
    width: 42px;
    height: 42px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.field-help,
.field-error {
    display: block;
    font-size: .64rem;
    margin-top: 5px;
}

.field-help {
    color: var(--hospital-muted);
}

.field-help i {
    color: var(--hospital-green);
    margin-right: 4px;
}

.field-error {
    color: #dc3545;
}

.public-appointment-form-wrap .select2-container {
    width: 100% !important;
}

.public-appointment-form-wrap .select2-container--default .select2-selection--single {
    height: 46px;
    border: 1px solid var(--hospital-border);
    border-radius: 8px;
}

.public-appointment-form-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #425c59;
    line-height: 44px;
    padding-left: 13px;
}

.public-appointment-form-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 7px;
}

.select2-dropdown {
    border-color: var(--hospital-border);
    border-radius: 8px;
    box-shadow: 0 14px 35px rgba(17, 70, 66, .13);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--hospital-green);
}

.public-address-field .typeahead-list {
    overflow: hidden auto;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 30px rgba(17, 70, 66, .12);
}

.public-appointment-actions {
    align-items: center;
    justify-content: space-between;
}

.public-appointment-actions>span {
    color: var(--hospital-muted);
    font-size: .65rem;
}

.public-appointment-actions>span i {
    color: var(--hospital-green);
    margin-right: 5px;
}

.appointment-success-page {
    min-height: 70vh;
    background: var(--hospital-mint-light);
}

.appointment-success-section {
    padding: 65px 0 80px;
}

.appointment-success-card {
    max-width: 760px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(17, 70, 66, .12);
    padding: 38px;
    margin: 0 auto;
}

.appointment-success-heading {
    text-align: center;
}

.appointment-success-heading h1 {
    color: var(--hospital-ink);
    font-size: 1.8rem;
    margin: 10px 0 7px;
}

.appointment-success-heading p {
    color: var(--hospital-muted);
    font-size: .78rem;
}

.appointment-success-check {
    width: 58px;
    height: 58px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin: 0 auto 17px;
    box-shadow: 0 0 0 9px var(--hospital-mint);
}

.appointment-number-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin: 28px 0 18px;
}

.appointment-number-grid>div {
    background: var(--hospital-mint-light);
    border: 1px dashed #a8cec8;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.appointment-number-grid small {
    color: var(--hospital-muted);
    display: block;
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.appointment-number-grid strong {
    color: var(--hospital-green);
    font: 800 1.2rem var(--frontend-heading-font-family);
    letter-spacing: .05em;
}

.appointment-print-sheet {
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    overflow: hidden;
}

.appointment-print-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--theme-surface-soft);
    border-bottom: 1px solid var(--hospital-border);
    padding: 14px 17px;
}

.appointment-print-brand>div {
    display: flex;
    flex-direction: column;
}

.appointment-print-brand strong {
    color: var(--hospital-ink);
    font-size: .83rem;
}

.appointment-print-brand small {
    color: var(--hospital-muted);
    font-size: .58rem;
}

.appointment-print-brand>span {
    border-radius: 20px;
    font-size: .56rem;
    font-weight: 800;
    padding: 5px 9px;
    text-transform: uppercase;
}

.appointment-print-sheet table {
    width: 100%;
    border-collapse: collapse;
}

.appointment-print-sheet th,
.appointment-print-sheet td {
    border-bottom: 1px solid var(--theme-border-soft);
    padding: 10px 16px;
    font-size: .7rem;
    text-align: left;
    vertical-align: top;
}

.appointment-print-sheet th {
    width: 32%;
    color: var(--hospital-muted);
    font-weight: 600;
}

.appointment-print-sheet td {
    color: var(--hospital-ink);
    font-weight: 700;
}

.appointment-print-note {
    color: var(--hospital-muted);
    background: var(--theme-surface-soft);
    font-size: .62rem;
    padding: 11px 16px;
}

.appointment-success-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.alert {
    font-size: .75rem;
}

.alert i {
    margin-right: 7px;
}

.booking-success {
    min-height: 570px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.success-icon {
    width: 70px;
    height: 70px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    box-shadow: 0 0 0 10px var(--hospital-mint);
    margin-bottom: 25px;
}

.booking-success h3 {
    font-size: 2rem;
    margin: 9px 0 4px;
}

.booking-success>p {
    color: var(--hospital-muted);
    font-size: .8rem;
    margin: 0;
}

/* Home: Statistics and doctors */
.stats-section {
    color: var(--theme-white);
    background: var(--hospital-ink);
    padding: 50px 0;
}

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

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, .15);
    position: absolute;
    right: 0;
    top: 7px;
}

.stat-item strong {
    font: 750 clamp(2rem, 4vw, 3.1rem)/1 var(--frontend-heading-font-family);
    letter-spacing: -.05em;
}

.stat-item sup {
    color: #7fd0c5;
    font-size: .45em;
    margin-left: 2px;
}

.stat-item span {
    color: #acc7c4;
    font-size: .7rem;
    letter-spacing: .08em;
    margin-top: 9px;
    text-transform: uppercase;
}

.doctors-section {
    background: #fffdf9;
}

.carousel-controls {
    display: flex;
    gap: 8px;
}

.carousel-controls button {
    width: 42px;
    height: 42px;
    color: var(--hospital-green);
    border: 1px solid var(--hospital-border);
    background: var(--theme-white);
    border-radius: 50%;
}

.carousel-controls button:hover {
    color: var(--theme-white);
    background: var(--hospital-green);
}

.doctor-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.doctor-card {
    border: 1px solid var(--hospital-border);
    border-radius: 12px;
    overflow: hidden;
    transition: .22s ease;
}

.doctor-card:hover {
    box-shadow: 0 20px 45px rgba(14, 76, 70, .1);
    transform: translateY(-3px);
}

.doctor-photo {
    height: 235px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.doctor-photo::before {
    content: "";
    width: 155px;
    height: 155px;
    background: rgba(255, 255, 255, .3);
    border-radius: 50%;
    position: absolute;
    bottom: -25px;
}

.doctor-photo>span {
    position: relative;
    z-index: 1;
    color: var(--theme-white);
    font: 700 3.5rem/1 var(--frontend-heading-font-family);
    letter-spacing: -.08em;
    opacity: .92;
}

.doctor-photo>img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    object-fit: cover;
}

.tone-one {
    background: linear-gradient(145deg, #b8d5cf, #5b918a);
}

.tone-two {
    background: linear-gradient(145deg, #c9d5d9, #6c8790);
}

.tone-three {
    background: linear-gradient(145deg, #e6cfc1, #a77f72);
}

.tone-four {
    background: linear-gradient(145deg, #c9d7c0, #6f926d);
}

.availability {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    color: #2f5550;
    background: rgba(255, 255, 255, .92);
    border-radius: 20px;
    font-size: .59rem;
    font-weight: 700;
    padding: 6px 9px;
}

.availability i {
    color: #31a36f;
    font-size: .48rem;
    margin-right: 4px;
}

.doctor-card-body {
    padding: 18px;
}

.doctor-card-body>small {
    color: var(--hospital-green);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.doctor-card-body h3 {
    font-size: 1rem;
    font-weight: 750;
    margin: 5px 0;
}

.doctor-card-body p {
    color: var(--hospital-muted);
    font-size: .67rem;
    min-height: 34px;
    margin: 0;
}

.doctor-card-footer {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 13px;
    margin-top: 13px;
}

.doctor-card-footer span {
    color: #758a87;
    font-size: .58rem;
}

.doctor-card-footer span i {
    margin-right: 4px;
}

.doctor-card-footer a {
    color: var(--hospital-green);
    font-size: .67rem;
    font-weight: 800;
}

/* Home: Services and testimonials */
.home-services-section {
    background: var(--hospital-bg);
}

.home-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.home-service-card {
    min-height: 205px;
    color: var(--hospital-ink);
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 17px;
    padding: 27px 24px;
    transition: .22s ease;
}

.home-service-card:hover {
    color: var(--hospital-ink);
    border-color: #9ccdc5;
    box-shadow: 0 18px 45px rgba(13, 85, 78, .1);
    transform: translateY(-4px);
}

.home-service-card>span {
    width: 48px;
    height: 48px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 12px 12px 12px 4px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.home-service-card>div small {
    color: var(--hospital-green);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-service-card h3 {
    font-size: 1rem;
    margin: 7px 0;
}

.home-service-card p {
    color: var(--hospital-muted);
    font-size: .68rem;
    line-height: 1.6;
    margin: 0;
}

.home-service-card>i {
    align-self: end;
    color: #97aca9;
    font-size: .7rem;
}

.home-testimonial-section {
    color: var(--theme-white);
    background: var(--theme-white);
}

.testimonial-shell {
    min-height: 440px;
    overflow: hidden;
    background: radial-gradient(circle at 8% 20%, rgba(126, 209, 196, .2), transparent 28%), linear-gradient(125deg, var(--hospital-green-dark), #093c38);
    border-radius: 20px;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: 65px;
    padding: 66px 75px;
    position: relative;
}

.testimonial-shell::after {
    content: "\201C";
    position: absolute;
    right: 25px;
    bottom: -130px;
    color: rgba(255, 255, 255, .035);
    font: 400 420px/1 var(--frontend-heading-font-family);
}

.testimonial-intro,
.testimonial-card {
    position: relative;
    z-index: 1;
}

.testimonial-intro h2 {
    color: var(--theme-white);
    font-size: clamp(2.25rem, 4vw, 3.2rem);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.12;
    margin: 14px 0 16px;
}

.testimonial-intro p {
    color: #bcd9d4;
    font-size: .82rem;
    line-height: 1.7;
}

.testimonial-controls {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 32px;
}

.testimonial-controls button {
    width: 38px;
    height: 38px;
    color: var(--theme-white);
    border: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    border-radius: 50%;
}

.testimonial-controls button:hover {
    color: var(--hospital-green-dark);
    background: var(--theme-white);
}

.testimonial-controls span {
    color: #a8cbc5;
    font-size: .65rem;
}

.testimonial-card {
    color: var(--hospital-ink);
    background: var(--theme-white);
    border-radius: 16px;
    padding: 42px 45px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, .16);
}

.testimonial-quote {
    color: var(--hospital-mint);
    font-size: 2.2rem;
    position: absolute;
    right: 38px;
    top: 35px;
}

.testimonial-stars {
    color: var(--hospital-gold);
    display: flex;
    gap: 4px;
    font-size: .75rem;
}

.testimonial-card blockquote {
    color: #354f4b;
    font: 600 1.08rem/1.75 var(--frontend-heading-font-family);
    margin: 24px 0 30px;
}

.testimonial-person {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-avatar b {
    font: 800 .72rem var(--frontend-heading-font-family);
}

.testimonial-person>div {
    display: flex;
    flex-direction: column;
}

.testimonial-person strong {
    font-size: .78rem;
}

.testimonial-person small {
    color: var(--hospital-muted);
    font-size: .62rem;
    margin-top: 3px;
}

/* Home: Gallery preview */
.gallery-mosaic {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    grid-template-rows: repeat(2, 190px);
    gap: 12px;
}

.gallery-tile {
    color: var(--theme-white);
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0;
    text-align: left;
}

.tile-1 {
    grid-row: 1 / 3;
}

.tile-4 {
    grid-column: 2 / 4;
}

.gallery-tile>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.gallery-tile::after {
    content: "";
    position: absolute;
    inset: 32% 0 0;
    background: linear-gradient(transparent, rgba(4, 35, 32, .76));
}

.gallery-tile:hover>img {
    transform: scale(1.045);
}

.home-gallery-loading span {
    border-radius: 10px;
    background: linear-gradient(100deg, var(--theme-border-muted) 25%, var(--theme-surface-subtle) 45%, var(--theme-border-muted) 65%);
    background-size: 220% 100%;
    animation: galleryShimmer 1.3s infinite;
}

.home-gallery-empty {
    min-height: 210px;
    color: var(--hospital-muted);
    border: 1px dashed var(--theme-border-strong);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .72rem;
}

.home-gallery-empty>i {
    color: var(--hospital-green);
    font-size: 1.15rem;
}

.home-gallery-empty a {
    color: var(--hospital-green);
    font-weight: 800;
}

.gallery-art {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #4c817a, #9fc8c1);
    display: grid;
    place-items: center;
}

.gallery-art i {
    font-size: 4rem;
    opacity: .25;
}

.tile-2 .gallery-art {
    background: linear-gradient(135deg, #506c77, #a8bec6);
}

.tile-3 .gallery-art {
    background: linear-gradient(135deg, #8e6e62, #d9c2b8);
}

.tile-4 .gallery-art {
    background: linear-gradient(135deg, #667b5e, #b9c9a9);
}

.gallery-art::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, rgba(5, 35, 32, .65));
}

.gallery-caption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.gallery-caption strong {
    font: 700 .88rem var(--frontend-heading-font-family);
}

.gallery-caption small {
    color: rgba(255, 255, 255, .75);
    font-size: .62rem;
}

.gallery-expand {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;
    opacity: 0;
    transition: .2s ease;
}

.gallery-tile:hover .gallery-expand {
    opacity: 1;
}

/* Menu: About Us */
.about-page {
    overflow: clip;
    color: var(--hospital-ink);
    background: var(--theme-white);
}

.about-anchor-section {
    scroll-margin-top: 105px;
}

.about-hero {
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 78% 19%, rgba(133, 222, 207, .2), transparent 24%), linear-gradient(118deg, #063a35 0%, #087064 100%);
    position: relative;
}

.about-hero::before {
    content: "+";
    position: absolute;
    right: 4%;
    bottom: -110px;
    color: rgba(255, 255, 255, .045);
    font: 800 310px/1 var(--frontend-heading-font-family);
}

.about-hero-inner {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding-top: 58px;
    padding-bottom: 58px;
    position: relative;
    z-index: 1;
}

.about-hero-copy {
    max-width: 720px;
}

.about-breadcrumb {
    color: #9fd5cc;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .56rem;
    margin-bottom: 28px;
}

.about-breadcrumb a {
    color: inherit;
}

.about-breadcrumb i {
    font-size: .4rem;
}

.about-breadcrumb span {
    color: var(--theme-white);
}

.about-hero h1 {
    max-width: 690px;
    color: var(--theme-white);
    font-size: clamp(2.8rem, 5.6vw, 5rem);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: 1.02;
    margin: 13px 0 17px;
}

.about-hero-copy>p {
    max-width: 625px;
    color: #c8e3de;
    font-size: .82rem;
    line-height: 1.72;
    margin: 0;
}

.about-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.about-page .btn-hospital-light {
    min-height: 43px;
    color: var(--hospital-green-dark);
    background: var(--theme-white);
    border: 1px solid var(--theme-white);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .64rem;
    font-weight: 800;
    padding: .65rem 1rem;
}

.about-page .btn-hospital-light:hover {
    color: var(--theme-white);
    background: transparent;
}

.about-story-link {
    color: #d8ebe8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .63rem;
    font-weight: 750;
}

.about-story-link:hover {
    color: var(--theme-white);
}

.about-hero-mark {
    width: 230px;
    min-height: 230px;
    flex: 0 0 230px;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 16px rgba(255, 255, 255, .025);
}

.about-hero-mark>span {
    width: 48px;
    height: 48px;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .13);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.about-hero-mark strong {
    color: var(--theme-white);
    font: 800 2.15rem var(--frontend-heading-font-family);
    letter-spacing: .09em;
    margin: 10px 0 1px;
}

.about-hero-mark small {
    color: #a9d9d1;
    font-size: .51rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-section-nav-wrap {
    min-height: 66px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--hospital-border);
    position: sticky;
    z-index: 25;
    top: 49px;
    box-shadow: 0 9px 24px rgba(12, 67, 60, .055);
    backdrop-filter: blur(10px);
}

.about-section-nav {
    min-height: 66px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.about-section-nav::-webkit-scrollbar {
    display: none;
}

.about-section-nav a {
    min-width: max-content;
    color: #617a76;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .62rem;
    font-weight: 750;
    padding: 0 22px;
}

.about-section-nav a i {
    color: #8ba19d;
    font-size: .7rem;
}

.about-section-nav a:hover,
.about-section-nav a.active {
    color: var(--hospital-green);
    border-bottom-color: var(--hospital-green);
}

.about-section-nav a.active i {
    color: var(--hospital-green);
}

.about-story-section {
    background: var(--theme-white);
    padding: 72px 0 82px;
}

.about-stat-grid {
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 70px;
    box-shadow: 0 14px 40px rgba(12, 66, 59, .07);
}

.about-stat-grid article {
    min-height: 103px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    text-align: center;
}

.about-stat-grid article:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 40%;
    background: var(--hospital-border);
    position: absolute;
    top: 30%;
    right: 0;
}

.about-stat-grid strong {
    color: var(--hospital-green);
    font: 800 1.45rem var(--frontend-heading-font-family);
    letter-spacing: -.04em;
}

.about-stat-grid span {
    color: var(--hospital-muted);
    font-size: .55rem;
    margin-top: 4px;
}

.about-story-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 65px;
}

.about-story-visual {
    min-height: 440px;
    overflow: hidden;
    background: #dcebe8;
    border-radius: 17px;
    position: relative;
    box-shadow: 0 24px 55px rgba(10, 62, 56, .13);
}

.about-story-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(3, 46, 42, .75));
}

.about-story-visual>img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: center;
}

.about-story-visual>div {
    max-width: 320px;
    position: absolute;
    z-index: 1;
    right: 22px;
    bottom: 21px;
    left: 22px;
    color: var(--theme-white);
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-story-visual>div>span {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    background: var(--hospital-coral);
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.about-story-visual p {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.about-story-visual small {
    color: #bbddd7;
    font-size: .49rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-story-visual strong {
    color: var(--theme-white);
    font-size: .67rem;
    line-height: 1.45;
    margin-top: 2px;
}

.about-story-copy h2,
.about-section-heading h2 {
    font-size: clamp(2rem, 3.6vw, 3.15rem);
    letter-spacing: -.055em;
    line-height: 1.08;
    margin: 9px 0 18px;
}

.about-story-copy>p {
    color: #536d69;
    font-size: .7rem;
    line-height: 1.82;
    margin: 0 0 12px;
}

.about-story-copy .about-story-lead {
    color: var(--hospital-ink);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.65;
}

.about-story-signature {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 17px;
    margin-top: 19px;
}

.about-story-signature>span {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.about-story-signature>div {
    display: flex;
    flex-direction: column;
}

.about-story-signature strong {
    font-size: .66rem;
}

.about-story-signature small {
    color: var(--hospital-muted);
    font-size: .53rem;
    margin-top: 2px;
}

.about-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
    margin-top: 55px;
}

.about-highlight-grid article {
    min-width: 0;
    background: var(--hospital-bg);
    border: 1px solid #e2ecea;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
}

.about-highlight-grid article>span {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #e0f0ec;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.about-highlight-grid h3 {
    font-size: .72rem;
    margin: 1px 0 5px;
}

.about-highlight-grid p {
    color: var(--hospital-muted);
    font-size: .57rem;
    line-height: 1.55;
    margin: 0;
}

.about-purpose-section {
    background: #f4f9f8;
    border-top: 1px solid #e7efed;
    padding: 84px 0;
}

.about-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 45px;
    margin-bottom: 36px;
}

.about-section-heading>div {
    max-width: 680px;
}

.about-section-heading h2 {
    margin-bottom: 0;
}

.about-section-heading>p {
    max-width: 380px;
    color: var(--hospital-muted);
    font-size: .7rem;
    line-height: 1.7;
    margin: 0 0 5px;
}

.about-purpose-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.about-purpose-cards article {
    min-height: 270px;
    overflow: hidden;
    border-radius: 14px;
    padding: 27px 29px;
    position: relative;
}

.about-purpose-cards article::after {
    content: "+";
    position: absolute;
    right: -12px;
    bottom: -55px;
    font: 800 165px/1 var(--frontend-heading-font-family);
    opacity: .055;
}

.about-purpose-cards .mission {
    color: var(--theme-white);
    background: linear-gradient(130deg, #063d38, var(--hospital-green));
}

.about-purpose-cards .vision {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    box-shadow: 0 14px 36px rgba(12, 66, 59, .06);
}

.about-purpose-cards article>span {
    width: 47px;
    height: 47px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.about-purpose-cards .mission>span {
    color: var(--theme-white);
    background: rgba(255, 255, 255, .13);
}

.about-purpose-cards .vision>span {
    color: var(--hospital-green);
    background: var(--hospital-mint);
}

.about-purpose-cards small {
    display: block;
    font-size: .49rem;
    font-weight: 800;
    letter-spacing: .11em;
    margin-top: 19px;
    text-transform: uppercase;
}

.about-purpose-cards .mission small {
    color: #9dd6cc;
}

.about-purpose-cards .vision small {
    color: var(--hospital-green);
}

.about-purpose-cards h3 {
    font-size: 1.1rem;
    margin: 5px 0 9px;
}

.about-purpose-cards .mission h3 {
    color: var(--theme-white);
}

.about-purpose-cards p {
    max-width: 500px;
    font-size: .67rem;
    line-height: 1.72;
    margin: 0;
}

.about-purpose-cards .mission p {
    color: #c5e2dd;
}

.about-purpose-cards .vision p {
    color: var(--hospital-muted);
}

.about-objective-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 46px 0 15px;
}

.about-objective-head>span {
    font: 750 1rem var(--frontend-heading-font-family);
}

.about-objective-head small {
    color: var(--hospital-muted);
    font-size: .57rem;
}

.about-objective-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.about-objective-grid article {
    min-width: 0;
    min-height: 106px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 11px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 11px;
    padding: 17px;
}

.about-objective-grid article>span {
    width: 34px;
    height: 34px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 8px;
    display: grid;
    place-items: center;
    font: 800 .54rem var(--frontend-heading-font-family);
}

.about-objective-grid h3 {
    font-size: .7rem;
    margin: 1px 0 5px;
}

.about-objective-grid p {
    color: var(--hospital-muted);
    font-size: .57rem;
    line-height: 1.55;
    margin: 0;
}

.about-objective-grid article>i {
    width: 24px;
    height: 24px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .48rem;
}

.about-leader-section {
    background: var(--theme-white);
    padding: 88px 0;
}

.about-leader-layout {
    display: grid;
    grid-template-columns: minmax(285px, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 65px;
}

.about-leader-profile {
    overflow: hidden;
    background: linear-gradient(145deg, #e6f2ef, #c8e3dd);
    border: 1px solid #c8dfda;
    border-radius: 17px;
    padding: 25px 25px 0;
    position: relative;
    box-shadow: 0 20px 48px rgba(10, 63, 57, .1);
}

.about-leader-profile::before {
    content: "+";
    color: rgba(8, 104, 94, .07);
    position: absolute;
    right: -5px;
    top: -32px;
    font: 800 145px/1 var(--frontend-heading-font-family);
}

.about-leader-photo {
    height: 320px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--hospital-green), #07463f);
    border-radius: 13px 13px 0 0;
    display: grid;
    place-items: center;
    position: relative;
}

.about-leader-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 60% 25%, rgba(255, 255, 255, .17), transparent 28%);
}

.about-leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.about-leader-photo>span {
    color: rgba(255, 255, 255, .92);
    font: 800 4rem var(--frontend-heading-font-family);
    letter-spacing: -.05em;
}

.about-leader-identity {
    background: var(--theme-white);
    border-radius: 0 0 13px 13px;
    padding: 17px 18px 19px;
    position: relative;
    z-index: 1;
}

.about-leader-identity small {
    color: var(--hospital-green);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-leader-identity h2 {
    font-size: 1rem;
    margin: 4px 0 2px;
}

.about-leader-identity span {
    color: var(--hospital-muted);
    font-size: .53rem;
}

.about-leader-message>h2 {
    font-size: clamp(1.9rem, 3.3vw, 2.8rem);
    letter-spacing: -.05em;
    margin: 9px 0 18px;
}

.about-leader-message blockquote {
    color: var(--hospital-green-dark);
    border-left: 3px solid var(--hospital-coral);
    font: 650 .83rem/1.7 var(--frontend-heading-font-family);
    padding: 3px 0 3px 20px;
    margin: 0 0 21px;
    position: relative;
}

.about-leader-message blockquote i {
    color: var(--hospital-coral);
    font-size: .72rem;
    margin-right: 9px;
}

.about-leader-message>p {
    color: #536d69;
    font-size: .69rem;
    line-height: 1.82;
    margin: 0 0 12px;
}

.about-leader-sign {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    flex-direction: column;
    padding-top: 17px;
    margin-top: 22px;
}

.about-leader-sign span {
    font: 750 .69rem var(--frontend-heading-font-family);
}

.about-leader-sign small {
    color: var(--hospital-muted);
    font-size: .52rem;
    margin-top: 3px;
}

.about-cta-section {
    background: var(--theme-white);
    padding: 72px 0;
}

.about-cta-card {
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .1), transparent 28%), linear-gradient(120deg, var(--hospital-green-dark), var(--hospital-green));
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 38px 42px;
    position: relative;
}

.about-cta-card::after {
    content: "+";
    position: absolute;
    right: 3%;
    bottom: -60px;
    color: rgba(255, 255, 255, .05);
    font: 800 170px/1 var(--frontend-heading-font-family);
}

.about-cta-card>div {
    position: relative;
    z-index: 1;
}

.about-cta-card h2 {
    color: var(--theme-white);
    font-size: 1.55rem;
    margin: 7px 0 6px;
}

.about-cta-card p {
    color: #c8e4df;
    font-size: .65rem;
    margin: 0;
}

.about-cta-card>div:last-child {
    flex: 0 0 auto;
    display: flex;
    gap: 9px;
}

.about-cta-card .btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .62rem;
}

.about-cta-outline {
    color: var(--theme-white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
}

.about-cta-outline:hover {
    color: var(--hospital-green-dark);
    background: var(--theme-white);
    border-color: var(--theme-white);
}

/* Menu: About Us subpages */
.about-subpage-hero .about-hero-inner {
    min-height: 335px;
}

.about-subpage-hero .about-hero-copy {
    width: 100%;
    min-width: 0;
    max-width: 760px;
}

.about-subpage-hero h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(2.65rem, 5vw, 4.25rem);
}

.about-subpage-hero .about-hero-copy>p {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.about-view-stage {
    background: #f5faf9;
    scroll-margin-top: 104px;
}

.about-simple-extra-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(285px, .75fr);
    gap: 14px;
    margin-top: 55px;
}

.about-facility-panel,
.about-promise-panel,
.about-values-strip,
.about-goal-note {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    box-shadow: 0 12px 34px rgba(13, 66, 60, .055);
}

.about-facility-panel,
.about-promise-panel {
    padding: 22px;
}

.about-simple-panel-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.about-simple-panel-head>span {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.about-simple-panel-head small {
    color: var(--hospital-green);
    display: block;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.about-simple-panel-head h2 {
    font-size: .87rem;
    margin: 3px 0 0;
}

.about-facility-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.about-facility-list article {
    min-width: 0;
    min-height: 48px;
    background: var(--theme-surface-muted);
    border: 1px solid #e2ecea;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
}

.about-facility-list i {
    width: 24px;
    color: var(--hospital-green);
    font-size: .7rem;
    text-align: center;
}

.about-facility-list span {
    color: #47625e;
    font-size: .59rem;
    font-weight: 700;
    line-height: 1.35;
}

.about-promise-panel ul {
    list-style: none;
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0 0 13px;
}

.about-promise-panel li {
    color: #536d69;
    border-top: 1px solid var(--theme-border-soft);
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .59rem;
    line-height: 1.5;
    padding: 10px 0;
}

.about-promise-panel li i {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .4rem;
}

.about-promise-panel>a {
    color: var(--hospital-green);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .59rem;
    font-weight: 800;
}

.about-values-strip {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 23px;
    margin-top: 14px;
}

.about-values-strip>div:first-child {
    border-right: 1px solid var(--hospital-border);
    padding-right: 20px;
}

.about-values-strip h2 {
    font-size: .9rem;
    margin: 5px 0 0;
}

.about-values-strip>div:last-child {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 13px 20px;
}

.about-values-strip article {
    min-width: 0;
}

.about-values-strip strong {
    color: var(--hospital-green-dark);
    display: block;
    font-size: .63rem;
    margin-bottom: 3px;
}

.about-values-strip p {
    color: var(--hospital-muted);
    font-size: .54rem;
    line-height: 1.48;
    margin: 0;
}

.about-goal-note {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px 22px;
    margin-top: 14px;
}

.about-goal-note>span {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.about-goal-note>div {
    min-width: 0;
}

.about-goal-note small {
    color: var(--hospital-green);
    display: block;
    font-size: .47rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.about-goal-note strong {
    display: block;
    font-size: .68rem;
    margin: 3px 0;
}

.about-goal-note p {
    color: var(--hospital-muted);
    font-size: .57rem;
    line-height: 1.5;
    margin: 0;
}

.about-view-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 30px;
    padding-bottom: 42px;
}

.about-view-pagination>a {
    min-width: 205px;
    min-height: 57px;
    color: var(--hospital-ink);
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(13, 66, 60, .045);
}

.about-view-pagination>a:hover {
    color: var(--hospital-green);
    border-color: #afd4ce;
    transform: translateY(-2px);
}

.about-view-pagination>a.next {
    justify-content: flex-end;
    margin-left: auto;
    text-align: right;
}

.about-view-pagination>a>i {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .52rem;
}

.about-view-pagination>a span {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.about-view-pagination small {
    color: var(--hospital-muted);
    font-size: .47rem;
    text-transform: uppercase;
}

.about-view-pagination strong {
    font-size: .62rem;
    margin-top: 2px;
}

.about-view-stage+.about-cta-section {
    padding-top: 30px;
}

/* Menu: Doctors */
.doctor-directory-hero {
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 84% 5%, rgba(126, 220, 204, .2), transparent 28%), linear-gradient(120deg, #063c37, var(--hospital-green));
    position: relative;
}

.doctor-directory-hero::after {
    content: "";
    width: 330px;
    height: 330px;
    position: absolute;
    right: -145px;
    bottom: -235px;
    border: 54px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
}

.doctor-directory-hero>.container {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding-top: 58px;
    padding-bottom: 58px;
    position: relative;
    z-index: 1;
}

.doctor-directory-hero-copy {
    max-width: 650px;
}

.doctor-directory-hero h1 {
    color: var(--theme-white);
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    font-weight: 750;
    letter-spacing: -.06em;
    line-height: 1.02;
    margin: 13px 0 17px;
}

.doctor-directory-hero h1 em {
    color: #91d8cc;
    font-style: normal;
}

.doctor-directory-hero p {
    max-width: 580px;
    color: #c7e1dd;
    font-size: .82rem;
    line-height: 1.7;
    margin: 0;
}

.doctor-directory-hero-note {
    min-width: 270px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    backdrop-filter: blur(8px);
}

.doctor-directory-hero-note>span {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .12);
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.doctor-directory-hero-note div {
    display: flex;
    flex-direction: column;
}

.doctor-directory-hero-note small {
    color: #a9d9d1;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.doctor-directory-hero-note strong {
    max-width: 185px;
    color: var(--theme-white);
    font-size: .7rem;
    line-height: 1.45;
    margin-top: 3px;
}

.doctor-directory-browser {
    background: var(--theme-surface-muted);
}

.doctor-directory-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}

.doctor-directory-toolbar h2 {
    font-size: 1.75rem;
    letter-spacing: -.04em;
    margin: 6px 0 4px;
}

.doctor-directory-toolbar p {
    color: var(--hospital-muted);
    font-size: .7rem;
    margin: 0;
}

.doctor-directory-toolbar form {
    width: min(440px, 100%);
}

.doctor-directory-search {
    min-height: 47px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 9px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(11, 70, 62, .05);
}

.doctor-directory-search>i {
    color: #78918d;
    font-size: .72rem;
    text-align: center;
}

.doctor-directory-search input {
    width: 100%;
    min-width: 0;
    height: 45px;
    color: var(--hospital-ink);
    border: 0;
    outline: 0;
    font-size: .7rem;
}

.doctor-directory-search button {
    height: 37px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 0;
    border-radius: 7px;
    font-size: .65rem;
    font-weight: 800;
    padding: 0 16px;
    margin-right: 5px;
}

.doctor-department-filter {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 18px;
    scrollbar-width: thin;
}

.doctor-department-filter button {
    min-width: max-content;
    min-height: 44px;
    color: #536c68;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .65rem;
    padding: 6px 10px 6px 7px;
}

.doctor-department-filter button>span {
    width: 30px;
    height: 30px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 7px;
    display: grid;
    place-items: center;
}

.doctor-department-filter button strong {
    font-size: .64rem;
}

.doctor-department-filter button small {
    min-width: 20px;
    color: #7d928e;
    background: #edf4f2;
    border-radius: 20px;
    font-size: .53rem;
    font-weight: 800;
    padding: 3px 5px;
}

.doctor-department-filter button.active {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.doctor-department-filter button.active>span {
    color: var(--theme-white);
    background: rgba(255, 255, 255, .14);
}

.doctor-department-filter button.active small {
    color: var(--theme-white);
    background: rgba(255, 255, 255, .14);
}

.doctor-results-head {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.doctor-results-head>div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.doctor-results-head strong {
    font: 800 1.05rem var(--frontend-heading-font-family);
}

.doctor-results-head span {
    color: var(--hospital-muted);
    font-size: .63rem;
}

.doctor-results-head button {
    color: var(--hospital-green);
    background: transparent;
    border: 0;
    font-size: .62rem;
    font-weight: 750;
}

.doctor-results-head button i {
    margin-right: 4px;
}

.doctor-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-doctor-card {
    min-width: 0;
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    box-shadow: 0 12px 30px rgba(20, 70, 63, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.public-doctor-card:hover {
    border-color: #b8d9d3;
    box-shadow: 0 18px 38px rgba(20, 70, 63, .1);
    transform: translateY(-3px);
}

.public-doctor-photo {
    height: 245px;
    overflow: hidden;
    color: var(--theme-white);
    background: linear-gradient(150deg, #d9ede9, #8fc8be);
    display: grid;
    place-items: center;
    position: relative;
}

.public-doctor-photo>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .35s ease;
}

.public-doctor-card:hover .public-doctor-photo>img {
    transform: scale(1.025);
}

.public-doctor-photo>span {
    font: 800 3rem var(--frontend-heading-font-family);
    opacity: .76;
}

.public-doctor-photo>small {
    max-width: calc(100% - 24px);
    position: absolute;
    left: 12px;
    bottom: 12px;
    overflow: hidden;
    color: var(--theme-white);
    background: rgba(4, 55, 50, .84);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    font-size: .55rem;
    font-weight: 750;
    padding: 6px 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(5px);
}

.public-doctor-photo>small i {
    margin-right: 5px;
}

.public-doctor-body {
    padding: 17px;
}

.public-doctor-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.public-doctor-title>div {
    min-width: 0;
}

.public-doctor-title small {
    color: var(--hospital-green);
    display: block;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-doctor-title h3 {
    overflow: hidden;
    font-size: .9rem;
    line-height: 1.35;
    margin: 4px 0 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-doctor-title h3 a {
    color: var(--hospital-ink);
}

.public-doctor-title>span {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 4px solid #e2f3ef;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .42rem;
}

.public-doctor-body>p {
    min-height: 38px;
    color: var(--hospital-muted);
    display: -webkit-box;
    overflow: hidden;
    font-size: .63rem;
    line-height: 1.5;
    margin: 9px 0 10px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.public-doctor-meta {
    min-height: 25px;
    color: #627b77;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 11px;
    font-size: .56rem;
}

.public-doctor-meta i {
    color: var(--hospital-green);
    margin-right: 4px;
}

.public-doctor-actions {
    border-top: 1px solid var(--theme-border-soft);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 7px;
    padding-top: 13px;
    margin-top: 10px;
}

.public-doctor-actions .btn {
    min-width: 0;
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    padding: .5rem .6rem;
}

.doctor-directory-loading {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.doctor-directory-loading article {
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
}

.doctor-directory-loading article>span {
    height: 245px;
    display: block;
    background: linear-gradient(90deg, #e6efed 20%, #f4f8f7 40%, #e6efed 60%);
    background-size: 200% 100%;
    animation: doctor-shimmer 1.3s infinite;
}

.doctor-directory-loading article>div {
    padding: 18px;
}

.doctor-directory-loading i {
    height: 11px;
    display: block;
    background: #e7efed;
    border-radius: 5px;
    margin-bottom: 10px;
}

.doctor-directory-loading i:nth-child(1) {
    width: 38%;
}

.doctor-directory-loading i:nth-child(2) {
    width: 78%;
}

.doctor-directory-loading i:nth-child(3) {
    width: 58%;
}

.doctor-directory-empty,
.doctor-profile-error {
    min-height: 330px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px;
}

.doctor-directory-empty>span,
.doctor-profile-error>span {
    width: 58px;
    height: 58px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.doctor-directory-empty h3,
.doctor-profile-error h2 {
    font-size: 1rem;
    margin: 15px 0 5px;
}

.doctor-directory-empty p,
.doctor-profile-error p {
    color: var(--hospital-muted);
    font-size: .68rem;
}

.doctor-directory-error {
    color: #9f443b;
    background: #fff1ef;
    border: 1px solid #f2c9c4;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .66rem;
    padding: 11px 13px;
    margin-top: 18px;
}

.doctor-directory-error span {
    flex: 1;
}

.doctor-directory-error button {
    color: inherit;
    background: transparent;
    border: 0;
    font-size: .62rem;
    font-weight: 800;
}

.doctor-directory-pagination {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    padding: 13px 16px 8px;
    margin-top: 22px;
}

.doctor-directory-pagination p {
    color: var(--hospital-muted);
    font-size: .64rem;
}

.doctor-directory-pagination .pagination {
    gap: 3px;
}

.doctor-directory-pagination .page-link {
    color: var(--hospital-green);
    border-color: var(--hospital-border);
    border-radius: 6px;
    font-size: .62rem;
}

.doctor-directory-pagination .active .page-link {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

@keyframes doctor-shimmer {
    to {
        background-position-x: -200%;
    }
}

.doctor-profile-page {
    background: var(--theme-surface-muted);
}

.doctor-profile-hero {
    min-height: 245px;
    color: var(--theme-white);
    background: radial-gradient(circle at 80% 0, rgba(139, 219, 205, .18), transparent 28%), linear-gradient(118deg, #063b36, var(--hospital-green));
}

.doctor-profile-hero>.container {
    min-height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 38px;
    padding-bottom: 70px;
}

.doctor-profile-hero>.container>a {
    width: max-content;
    color: #aeddd5;
    font-size: .62rem;
    font-weight: 750;
    margin-bottom: 22px;
}

.doctor-profile-hero>.container>a i {
    margin-right: 6px;
}

.doctor-profile-hero h1 {
    color: var(--theme-white);
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -.05em;
    margin: 8px 0 5px;
}

.doctor-profile-hero p {
    color: #c7e2dd;
    font-size: .74rem;
    margin: 0;
}

.doctor-profile-content {
    min-height: 500px;
    padding: 0 0 80px;
}

.doctor-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(275px, .8fr);
    align-items: start;
    gap: 19px;
    margin-top: -43px;
    position: relative;
    z-index: 2;
}

.doctor-profile-main {
    min-width: 0;
    display: grid;
    gap: 17px;
}

.doctor-profile-identity,
.doctor-profile-section,
.doctor-profile-book-card,
.doctor-credential-card,
.doctor-profile-social {
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    box-shadow: 0 12px 35px rgba(14, 66, 59, .06);
}

.doctor-profile-cover {
    height: 105px;
    overflow: hidden;
    background: radial-gradient(circle at 84% 30%, rgba(255, 255, 255, .2), transparent 24%), linear-gradient(120deg, #a9d6cf, #4f9f93);
}

.doctor-profile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
}

.doctor-profile-identity-body {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 0 24px 22px;
}

.doctor-profile-photo {
    width: 120px;
    height: 132px;
    flex: 0 0 auto;
    overflow: hidden;
    color: var(--theme-white);
    background: linear-gradient(145deg, #c3e2dc, #65ad9f);
    border: 5px solid var(--theme-white);
    border-radius: 13px;
    display: grid;
    place-items: center;
    font: 800 2rem var(--frontend-heading-font-family);
    margin-top: -60px;
    box-shadow: 0 10px 25px rgba(7, 68, 61, .14);
}

.doctor-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.doctor-profile-name {
    min-width: 0;
    flex: 1;
    padding-top: 15px;
}

.doctor-profile-name>span {
    color: var(--hospital-green);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.doctor-profile-name h2 {
    overflow-wrap: anywhere;
    font-size: 1.35rem;
    margin: 4px 0;
}

.doctor-profile-name>p {
    color: var(--hospital-muted);
    font-size: .68rem;
    line-height: 1.5;
    margin: 0;
}

.doctor-profile-name>div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 13px;
    margin-top: 8px;
}

.doctor-profile-name small {
    color: #607874;
    font-size: .57rem;
}

.doctor-profile-name small i {
    color: var(--hospital-green);
    margin-right: 4px;
}

.doctor-profile-section {
    padding: 22px 24px;
}

.doctor-profile-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.doctor-profile-section-head>span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.doctor-profile-section-head small {
    color: var(--hospital-green);
    display: block;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.doctor-profile-section-head h2 {
    font-size: .92rem;
    margin: 3px 0 0;
}

.doctor-profile-about {
    color: #536d69;
    font-size: .7rem;
    line-height: 1.8;
    margin: 0;
    white-space: pre-line;
}

.doctor-schedule-list {
    display: grid;
    gap: 8px;
}

.doctor-schedule-list article {
    min-height: 58px;
    background: var(--theme-surface-muted);
    border: 1px solid var(--theme-border-muted);
    border-radius: 9px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
}

.doctor-schedule-list article>span {
    width: 34px;
    height: 34px;
    color: var(--hospital-green);
    background: #e1f1ed;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.doctor-schedule-list article>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.doctor-schedule-list strong {
    font-size: .67rem;
}

.doctor-schedule-list small {
    color: var(--hospital-muted);
    font-size: .52rem;
    margin-top: 2px;
}

.doctor-schedule-list article>p {
    color: var(--hospital-green);
    font-size: .63rem;
    font-weight: 750;
    margin: 0;
}

.doctor-schedule-empty {
    color: var(--hospital-muted);
    background: var(--hospital-bg);
    border: 1px dashed #cddedb;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
}

.doctor-schedule-empty>i {
    color: var(--hospital-green);
    font-size: 1.15rem;
}

.doctor-schedule-empty strong {
    color: var(--hospital-ink);
    display: block;
    font-size: .67rem;
}

.doctor-schedule-empty p {
    font-size: .6rem;
    line-height: 1.5;
    margin: 3px 0 0;
}

.doctor-profile-sidebar {
    display: grid;
    gap: 15px;
    position: sticky;
    top: 75px;
}

.doctor-profile-book-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 21px 21px;
    text-align: center;
}

.doctor-profile-book-icon {
    width: 51px;
    height: 51px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 7px solid #def1ed;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.doctor-profile-book-card>small {
    color: var(--hospital-green);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-top: 13px;
}

.doctor-profile-book-card h2 {
    font-size: .96rem;
    line-height: 1.4;
    margin: 5px 0;
}

.doctor-profile-book-card p {
    color: var(--hospital-muted);
    font-size: .62rem;
    line-height: 1.55;
}

.doctor-profile-book-card .btn {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .65rem;
    margin-top: 7px;
}

.doctor-profile-secure {
    color: #718581;
    font-size: .5rem;
    margin-top: 11px;
}

.doctor-profile-secure i {
    color: var(--hospital-green);
    margin-right: 4px;
}

.doctor-credential-card {
    padding: 19px;
}

.doctor-credential-card h3 {
    font-size: .76rem;
    margin: 0 0 12px;
}

.doctor-credential-card dl {
    margin: 0;
}

.doctor-credential-card dl>div {
    border-top: 1px solid var(--theme-border-soft);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
}

.doctor-credential-card dt {
    color: var(--hospital-muted);
    font-size: .56rem;
    font-weight: 600;
}

.doctor-credential-card dd {
    color: var(--hospital-ink);
    font-size: .59rem;
    font-weight: 750;
    margin: 0;
    text-align: right;
}

.doctor-profile-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
}

.doctor-profile-social>span {
    color: var(--hospital-muted);
    font-size: .56rem;
    font-weight: 750;
}

.doctor-profile-social>div {
    display: flex;
    gap: 5px;
}

.doctor-profile-social a {
    width: 30px;
    height: 30px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: .65rem;
}

.doctor-profile-loading {
    min-height: 420px;
    color: var(--hospital-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: .72rem;
}

.doctor-profile-error {
    margin-top: -43px;
    position: relative;
    z-index: 2;
}

/* Menu: Departments */
.department-directory-hero {
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 76% 18%, rgba(125, 218, 202, .18), transparent 23%), linear-gradient(120deg, #063c37, #0a7166);
    position: relative;
}

.department-directory-hero::before {
    content: "+";
    position: absolute;
    right: 4%;
    bottom: -85px;
    color: rgba(255, 255, 255, .045);
    font: 800 280px/1 var(--frontend-heading-font-family);
}

.department-directory-hero>.container {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
    padding-top: 55px;
    padding-bottom: 55px;
    position: relative;
    z-index: 1;
}

.department-directory-hero h1 {
    color: var(--theme-white);
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: 1.02;
    margin: 13px 0 17px;
}

.department-directory-hero h1 em {
    color: #91d9cc;
    font-style: normal;
}

.department-directory-hero p {
    max-width: 620px;
    color: #c7e3de;
    font-size: .82rem;
    line-height: 1.7;
    margin: 0;
}

.department-directory-hero aside {
    min-width: 330px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    align-items: center;
    gap: 13px;
    padding: 17px;
    backdrop-filter: blur(8px);
}

.department-directory-hero aside>span {
    width: 48px;
    height: 48px;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .12);
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.department-directory-hero aside>div {
    display: flex;
    flex-direction: column;
}

.department-directory-hero aside strong {
    color: var(--theme-white);
    font: 750 1.05rem var(--frontend-heading-font-family);
}

.department-directory-hero aside small {
    color: #addbd4;
    font-size: .5rem;
    line-height: 1.35;
}

.department-directory-content {
    background: var(--theme-surface-muted);
}

.department-browser-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 24px;
}

.department-browser-head h2 {
    font-size: 1.8rem;
    letter-spacing: -.04em;
    margin: 6px 0 4px;
}

.department-browser-head p {
    color: var(--hospital-muted);
    font-size: .7rem;
    margin: 0;
}

.department-browser-head form {
    width: min(440px, 100%);
}

.department-search-box {
    min-height: 47px;
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 9px;
    display: grid;
    grid-template-columns: 39px minmax(0, 1fr) auto;
    align-items: center;
    box-shadow: 0 8px 22px rgba(11, 70, 62, .05);
}

.department-search-box>i {
    color: #79908d;
    font-size: .72rem;
    text-align: center;
}

.department-search-box input {
    width: 100%;
    min-width: 0;
    height: 45px;
    color: var(--hospital-ink);
    border: 0;
    outline: 0;
    font-size: .7rem;
}

.department-search-box button {
    height: 37px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 0;
    border-radius: 7px;
    font-size: .64rem;
    font-weight: 800;
    padding: 0 15px;
    margin-right: 5px;
}

.department-category-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 14px;
    scrollbar-width: thin;
}

.department-category-tabs button {
    min-width: max-content;
    min-height: 42px;
    color: #536c68;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .62rem;
    font-weight: 750;
    padding: 7px 10px;
}

.department-category-tabs button i {
    color: var(--hospital-green);
}

.department-category-tabs button small {
    min-width: 20px;
    color: #748a86;
    background: #edf4f2;
    border-radius: 20px;
    font-size: .51rem;
    font-weight: 800;
    padding: 3px 5px;
}

.department-category-tabs button.active {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.department-category-tabs button.active i {
    color: var(--theme-white);
}

.department-category-tabs button.active small {
    color: var(--theme-white);
    background: rgba(255, 255, 255, .14);
}

.department-results-summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.department-results-summary p {
    color: var(--hospital-muted);
    font-size: .63rem;
    margin: 0;
}

.department-results-summary strong {
    color: var(--hospital-ink);
    font: 800 1rem var(--frontend-heading-font-family);
    margin-right: 3px;
}

.department-results-summary button {
    color: var(--hospital-green);
    background: transparent;
    border: 0;
    font-size: .61rem;
    font-weight: 750;
}

.department-results-summary button i {
    margin-right: 4px;
}

.department-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.public-department-card {
    --department-accent: var(--hospital-green);
    min-width: 0;
    min-height: 310px;
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 28px rgba(18, 68, 61, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.public-department-card::before {
    content: "";
    width: 72px;
    height: 3px;
    position: absolute;
    top: 0;
    left: 20px;
    background: var(--department-accent);
    border-radius: 0 0 4px 4px;
}

.public-department-card:hover {
    border-color: #b8d9d3;
    box-shadow: 0 17px 36px rgba(18, 68, 61, .1);
    transform: translateY(-3px);
}

.accent-coral {
    --department-accent: #e86554;
}

.accent-violet {
    --department-accent: #7965b5;
}

.accent-blue {
    --department-accent: #4f83bd;
}

.accent-green {
    --department-accent: #178b72;
}

.accent-gold,
.accent-amber {
    --department-accent: #d99a31;
}

.accent-rose {
    --department-accent: #ce6687;
}

.accent-teal {
    --department-accent: #148d8a;
}

.accent-cyan {
    --department-accent: #3799b2;
}

.accent-indigo {
    --department-accent: #576fb0;
}

.accent-orange {
    --department-accent: #d9783c;
}

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

.public-department-card-top>span {
    width: 47px;
    height: 47px;
    color: var(--department-accent);
    background: color-mix(in srgb, var(--department-accent) 11%, white);
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.public-department-card-top small {
    color: var(--department-accent);
    background: color-mix(in srgb, var(--department-accent) 9%, white);
    border-radius: 20px;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 5px 7px;
    text-transform: uppercase;
}

.public-department-card h3 {
    font-size: .94rem;
    line-height: 1.35;
    margin: 15px 0 7px;
}

.public-department-card h3 a {
    color: var(--hospital-ink);
}

.public-department-card>p {
    min-height: 58px;
    color: var(--hospital-muted);
    display: -webkit-box;
    overflow: hidden;
    font-size: .64rem;
    line-height: 1.6;
    margin: 0 0 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.department-service-preview {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
}

.department-service-preview span {
    overflow: hidden;
    color: #5b7470;
    font-size: .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.department-service-preview i {
    color: var(--department-accent);
    font-size: .47rem;
    margin-right: 6px;
}

.public-department-card footer {
    border-top: 1px solid var(--theme-border-soft);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    margin-top: auto;
}

.public-department-card footer>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.public-department-card footer span {
    color: #708581;
    font-size: .52rem;
}

.public-department-card footer span i {
    width: 13px;
    color: var(--department-accent);
    margin-right: 3px;
}

.public-department-card footer>a {
    color: var(--hospital-green);
    font-size: .58rem;
    font-weight: 800;
    white-space: nowrap;
}

.public-department-card footer>a i {
    margin-left: 4px;
    transition: transform .2s ease;
}

.public-department-card footer>a:hover i {
    transform: translateX(3px);
}

.department-loading-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.department-loading-grid article {
    min-height: 310px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    padding: 20px;
}

.department-loading-grid span {
    width: 47px;
    height: 47px;
    display: block;
    background: #e4eeec;
    border-radius: 11px;
    margin-bottom: 20px;
}

.department-loading-grid i {
    height: 10px;
    display: block;
    background: linear-gradient(90deg, #e6efed 20%, #f5f8f7 40%, #e6efed 60%);
    background-size: 200% 100%;
    border-radius: 5px;
    margin-bottom: 11px;
    animation: doctor-shimmer 1.3s infinite;
}

.department-loading-grid i:nth-child(2) {
    width: 70%;
}

.department-loading-grid i:nth-child(3) {
    width: 94%;
}

.department-loading-grid i:nth-child(4) {
    width: 82%;
}

.department-directory-empty,
.department-detail-error {
    min-height: 350px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    text-align: center;
}

.department-directory-empty>span,
.department-detail-error>span {
    width: 58px;
    height: 58px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.department-directory-empty h3,
.department-detail-error h1 {
    font-size: 1rem;
    margin: 14px 0 4px;
}

.department-directory-empty p,
.department-detail-error p {
    color: var(--hospital-muted);
    font-size: .68rem;
}

.department-directory-error {
    color: #9e443b;
    background: var(--theme-danger-bg);
    border: 1px solid #f1c8c2;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .65rem;
    padding: 11px 13px;
}

.department-directory-error span {
    flex: 1;
}

.department-directory-error button {
    color: inherit;
    background: transparent;
    border: 0;
    font-size: .61rem;
    font-weight: 800;
}

.department-detail-page {
    min-height: 650px;
    background: var(--theme-surface-muted);
}

.department-detail-hero {
    --department-accent: var(--hospital-green);
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--department-accent) 40%, transparent), transparent 28%), linear-gradient(120deg, #063b36, #08665d);
    position: relative;
}

.department-detail-hero::after {
    content: "+";
    position: absolute;
    right: 5%;
    bottom: -80px;
    color: rgba(255, 255, 255, .045);
    font: 800 250px/1 var(--frontend-heading-font-family);
}

.department-detail-hero>.container {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 42px;
    padding-bottom: 78px;
    position: relative;
    z-index: 1;
}

.department-detail-breadcrumb {
    color: #a9d7cf;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: .56rem;
    margin-bottom: 29px;
}

.department-detail-breadcrumb a {
    color: inherit;
}

.department-detail-breadcrumb i {
    font-size: .42rem;
}

.department-detail-breadcrumb span {
    color: var(--theme-white);
}

.department-detail-hero-main {
    display: flex;
    align-items: center;
    gap: 22px;
}

.department-detail-hero-main>span {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    backdrop-filter: blur(7px);
}

.department-detail-hero-main>div {
    max-width: 730px;
}

.department-detail-hero-main small {
    color: #a8d9d1;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.department-detail-hero-main h1 {
    color: var(--theme-white);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    letter-spacing: -.055em;
    margin: 6px 0 8px;
}

.department-detail-hero-main p {
    color: #cae4df;
    font-size: .75rem;
    line-height: 1.65;
    margin: 0;
}

.department-detail-content {
    padding: 0 0 78px;
}

.department-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(275px, .75fr);
    align-items: start;
    gap: 18px;
    margin-top: -44px;
    position: relative;
    z-index: 2;
}

.department-detail-main {
    min-width: 0;
    display: grid;
    gap: 16px;
}

.department-detail-section,
.department-care-path,
.department-detail-quick,
.department-help-card {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    box-shadow: 0 12px 34px rgba(15, 67, 60, .06);
}

.department-detail-section {
    padding: 23px 24px;
}

.department-detail-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
}

.department-detail-section-head>span {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.department-detail-section-head small {
    color: var(--hospital-green);
    display: block;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.department-detail-section-head h2 {
    font-size: .96rem;
    margin: 3px 0 0;
}

.department-detail-section>p {
    color: #536e69;
    font-size: .7rem;
    line-height: 1.85;
    margin: 0;
}

.department-core-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.department-core-services article {
    min-width: 0;
    background: var(--theme-surface-muted);
    border: 1px solid #e2ecea;
    border-radius: 9px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
}

.department-core-services article>span {
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #dfeeea;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font: 800 .56rem var(--frontend-heading-font-family);
}

.department-core-services strong {
    display: block;
    font-size: .65rem;
    line-height: 1.4;
}

.department-core-services p {
    color: var(--hospital-muted);
    font-size: .54rem;
    line-height: 1.5;
    margin: 3px 0 0;
}

.department-care-path {
    overflow: hidden;
}

.department-care-path>div:first-child {
    color: var(--theme-white);
    background: linear-gradient(115deg, var(--hospital-green-dark), var(--hospital-green));
    padding: 18px 22px;
}

.department-care-path .section-kicker {
    color: #a8ddd4;
}

.department-care-path h2 {
    color: var(--theme-white);
    font-size: .92rem;
    margin: 4px 0 0;
}

.department-care-path>div:last-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 19px;
}

.department-care-path article {
    padding: 0 15px;
}

.department-care-path article:not(:last-child) {
    border-right: 1px solid var(--hospital-border);
}

.department-care-path article>span {
    width: 27px;
    height: 27px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 .56rem var(--frontend-heading-font-family);
}

.department-care-path strong {
    display: block;
    font-size: .63rem;
    margin-top: 8px;
}

.department-care-path p {
    color: var(--hospital-muted);
    font-size: .54rem;
    line-height: 1.5;
    margin: 4px 0 0;
}

.department-detail-sidebar {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 75px;
}

.department-detail-quick {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 23px 19px 19px;
    text-align: center;
}

.department-detail-quick-icon {
    width: 52px;
    height: 52px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 7px solid #def1ed;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.department-detail-quick>small {
    color: var(--hospital-green);
    font-size: .47rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-top: 12px;
}

.department-detail-quick h2 {
    font-size: .98rem;
    margin: 5px 0 12px;
}

.department-detail-quick dl {
    width: 100%;
    margin: 0 0 13px;
}

.department-detail-quick dl>div {
    border-top: 1px solid var(--theme-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
}

.department-detail-quick dt {
    color: var(--hospital-muted);
    font-size: .56rem;
    font-weight: 600;
}

.department-detail-quick dd {
    color: var(--hospital-ink);
    font-size: .58rem;
    font-weight: 750;
    margin: 0;
    text-align: right;
}

.department-detail-quick .btn {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .62rem;
    margin-top: 7px;
}

.department-help-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
}

.department-help-card>span {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.department-help-card>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.department-help-card small {
    color: var(--hospital-muted);
    font-size: .5rem;
}

.department-help-card strong {
    font-size: .61rem;
    margin: 2px 0;
}

.department-help-card a {
    color: var(--hospital-green);
    font-size: .62rem;
    font-weight: 800;
}

.department-back-link {
    color: var(--hospital-green);
    font-size: .61rem;
    font-weight: 750;
    padding: 3px 5px;
}

.department-back-link i {
    margin-right: 5px;
}

.department-detail-loading {
    min-height: 620px;
    color: var(--hospital-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: .72rem;
}

.department-detail-error {
    max-width: 1140px;
    margin: 55px auto;
}

/* Menu: Services and facilities */
.service-directory-page,
.service-detail-page {
    color: var(--hospital-ink);
    background: #f5faf9;
}

.service-directory-hero {
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 79% 12%, rgba(132, 224, 208, .2), transparent 27%), linear-gradient(120deg, #063c37, #087267);
    position: relative;
}

.service-directory-hero::after {
    content: "+";
    position: absolute;
    right: 4%;
    bottom: -100px;
    color: rgba(255, 255, 255, .045);
    font: 800 285px/1 var(--frontend-heading-font-family);
}

.service-directory-hero>.container {
    min-height: 345px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 55px;
    padding-top: 56px;
    padding-bottom: 56px;
    position: relative;
    z-index: 1;
}

.service-directory-hero h1 {
    color: var(--theme-white);
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: 1.02;
    margin: 13px 0 17px;
}

.service-directory-hero h1 em {
    color: #91d9cc;
    font-style: normal;
}

.service-directory-hero p {
    max-width: 620px;
    color: #c6e3de;
    font-size: .82rem;
    line-height: 1.7;
    margin: 0;
}

.service-directory-hero aside {
    min-width: 330px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    align-items: center;
    gap: 13px;
    padding: 17px;
    backdrop-filter: blur(8px);
}

.service-directory-hero aside>span {
    width: 48px;
    height: 48px;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .12);
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.service-directory-hero aside>div {
    display: flex;
    flex-direction: column;
}

.service-directory-hero aside strong {
    color: var(--theme-white);
    font: 750 1.05rem var(--frontend-heading-font-family);
}

.service-directory-hero aside small {
    color: #addbd4;
    font-size: .5rem;
    line-height: 1.35;
}

.service-directory-content {
    background: #f5faf9;
}

.service-directory-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 28px;
}

.service-directory-heading h2 {
    font-size: 1.8rem;
    letter-spacing: -.045em;
    margin: 7px 0 0;
}

.service-directory-heading>p {
    max-width: 410px;
    color: var(--hospital-muted);
    font-size: .69rem;
    line-height: 1.65;
    margin: 0;
}

.service-directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.public-service-card {
    --service-accent: var(--hospital-green);
    min-width: 0;
    min-height: 310px;
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    padding: 19px;
    position: relative;
    box-shadow: 0 10px 28px rgba(17, 68, 61, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.public-service-card::before {
    content: "";
    width: 64px;
    height: 3px;
    position: absolute;
    top: 0;
    left: 19px;
    background: var(--service-accent);
    border-radius: 0 0 4px 4px;
}

.public-service-card:hover {
    border-color: #b7d8d2;
    box-shadow: 0 17px 36px rgba(17, 68, 61, .1);
    transform: translateY(-3px);
}

.public-service-card.accent-teal,
.service-detail-hero.accent-teal {
    --service-accent: #148d8a;
}

.public-service-card.accent-green,
.service-detail-hero.accent-green {
    --service-accent: #178b72;
}

.public-service-card.accent-gold,
.service-detail-hero.accent-gold {
    --service-accent: #d99a31;
}

.public-service-card.accent-blue,
.service-detail-hero.accent-blue {
    --service-accent: #4f83bd;
}

.public-service-card.accent-violet,
.service-detail-hero.accent-violet {
    --service-accent: #7965b5;
}

.public-service-card.accent-cyan,
.service-detail-hero.accent-cyan {
    --service-accent: #3799b2;
}

.public-service-card.accent-orange,
.service-detail-hero.accent-orange {
    --service-accent: #d9783c;
}

.public-service-card.accent-coral,
.service-detail-hero.accent-coral {
    --service-accent: #e86554;
}

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

.public-service-card-top>span {
    width: 46px;
    height: 46px;
    color: var(--service-accent);
    background: #edf5f3;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.public-service-card-top small {
    color: var(--service-accent);
    font: 800 .55rem var(--frontend-heading-font-family);
}

.public-service-card h2 {
    font-size: .86rem;
    line-height: 1.35;
    margin: 15px 0 7px;
}

.public-service-card h2 a {
    color: var(--hospital-ink);
}

.public-service-card>p {
    min-height: 66px;
    color: var(--hospital-muted);
    display: -webkit-box;
    overflow: hidden;
    font-size: .61rem;
    line-height: 1.58;
    margin: 0 0 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.public-service-preview {
    display: grid;
    gap: 6px;
    margin-bottom: 13px;
}

.public-service-preview span {
    overflow: hidden;
    color: #5a736f;
    font-size: .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-service-preview i {
    color: var(--service-accent);
    font-size: .44rem;
    margin-right: 6px;
}

.public-service-card footer {
    border-top: 1px solid var(--theme-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    margin-top: auto;
}

.public-service-card footer small {
    max-width: 125px;
    overflow: hidden;
    color: #778a87;
    font-size: .49rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-service-card footer small i {
    color: var(--service-accent);
    margin-right: 4px;
}

.public-service-card footer a {
    color: var(--hospital-green);
    font-size: .56rem;
    font-weight: 800;
    white-space: nowrap;
}

.public-service-card footer a i {
    margin-left: 4px;
}

.service-care-flow {
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
    margin-top: 38px;
    box-shadow: 0 12px 36px rgba(14, 66, 59, .055);
}

.service-care-flow>div:first-child {
    color: var(--theme-white);
    background: linear-gradient(120deg, var(--hospital-green-dark), var(--hospital-green));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px;
}

.service-care-flow h2 {
    color: var(--theme-white);
    font-size: 1.12rem;
    margin: 6px 0 0;
}

.service-care-flow>div:last-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 21px;
}

.service-care-flow article {
    padding: 3px 16px;
}

.service-care-flow article:not(:last-child) {
    border-right: 1px solid var(--hospital-border);
}

.service-care-flow article>span {
    width: 28px;
    height: 28px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 .55rem var(--frontend-heading-font-family);
}

.service-care-flow strong {
    display: block;
    font-size: .64rem;
    margin: 8px 0 3px;
}

.service-care-flow p {
    color: var(--hospital-muted);
    font-size: .53rem;
    line-height: 1.5;
    margin: 0;
}

.service-detail-hero {
    --service-accent: var(--hospital-green);
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 82% 9%, color-mix(in srgb, var(--service-accent) 38%, transparent), transparent 29%), linear-gradient(120deg, #063b36, #086a60);
    position: relative;
}

.service-detail-hero::after {
    content: "+";
    position: absolute;
    right: 5%;
    bottom: -82px;
    color: rgba(255, 255, 255, .045);
    font: 800 250px/1 var(--frontend-heading-font-family);
}

.service-detail-hero>.container {
    min-height: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 42px;
    padding-bottom: 55px;
    position: relative;
    z-index: 1;
}

.service-detail-breadcrumb {
    color: #a8d7cf;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: .55rem;
    margin-bottom: 30px;
}

.service-detail-breadcrumb a {
    color: inherit;
}

.service-detail-breadcrumb i {
    font-size: .4rem;
}

.service-detail-breadcrumb span {
    color: var(--theme-white);
}

.service-detail-hero-main {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 21px;
}

.service-detail-hero-main>span {
    width: 73px;
    height: 73px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    backdrop-filter: blur(7px);
}

.service-detail-hero-main>div {
    width: 100%;
    min-width: 0;
    max-width: 780px;
}

.service-detail-hero-main small {
    color: #a8d9d1;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.service-detail-hero-main h1 {
    max-width: 100%;
    color: var(--theme-white);
    overflow-wrap: anywhere;
    font-size: clamp(2.25rem, 4.5vw, 3.65rem);
    letter-spacing: -.055em;
    line-height: 1.08;
    margin: 6px 0 8px;
}

.service-detail-hero-main p {
    max-width: 710px;
    color: #cae4df;
    overflow-wrap: anywhere;
    font-size: .74rem;
    line-height: 1.65;
    margin: 0;
}

.service-detail-nav-wrap {
    min-height: 61px;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--hospital-border);
    position: sticky;
    z-index: 24;
    top: 49px;
    box-shadow: 0 8px 22px rgba(13, 66, 60, .05);
    backdrop-filter: blur(10px);
}

.service-detail-nav {
    min-height: 61px;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}

.service-detail-nav::-webkit-scrollbar {
    display: none;
}

.service-detail-nav a {
    min-width: max-content;
    color: #617975;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .56rem;
    font-weight: 750;
    padding: 0 15px;
}

.service-detail-nav a i {
    color: #8ca29e;
}

.service-detail-nav a:hover,
.service-detail-nav a.active {
    color: var(--hospital-green);
    border-bottom-color: var(--hospital-green);
}

.service-detail-nav a.active i {
    color: var(--hospital-green);
}

.service-detail-content {
    padding: 52px 0 75px;
}

.service-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(275px, .72fr);
    align-items: start;
    gap: 17px;
}

.service-detail-main {
    min-width: 0;
    display: grid;
    gap: 15px;
}

.service-rich-content,
.service-feature-section,
.service-quick-card,
.service-help-card {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 13px;
    box-shadow: 0 12px 34px rgba(14, 66, 59, .055);
}

.service-rich-content,
.service-feature-section {
    padding: 23px 24px;
}

.service-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
}

.service-section-head>span {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.service-section-head small {
    color: var(--hospital-green);
    display: block;
    font-size: .47rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.service-section-head h2 {
    font-size: .94rem;
    margin: 3px 0 0;
}

.service-rich-text {
    color: #526c68;
    font-size: .69rem;
    line-height: 1.82;
}

.service-rich-text>*:first-child {
    margin-top: 0;
}

.service-rich-cover {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 0 20px;
}

.service-rich-text>*:last-child {
    margin-bottom: 0;
}

.service-rich-text h2 {
    color: var(--hospital-ink);
    font-size: 1.15rem;
    letter-spacing: -.035em;
    margin: 23px 0 9px;
}

.service-rich-text h3 {
    color: var(--hospital-ink);
    font-size: .78rem;
    margin: 21px 0 8px;
}

.service-rich-text p {
    margin: 0 0 12px;
}

.service-rich-text ul,
.service-rich-text ol {
    display: grid;
    gap: 7px;
    padding-left: 20px;
    margin: 0 0 14px;
}

.service-rich-text li::marker {
    color: var(--hospital-green);
    font-weight: 800;
}

.service-rich-text blockquote {
    color: #315b55;
    background: #eef7f5;
    border-left: 3px solid var(--hospital-green);
    border-radius: 0 8px 8px 0;
    padding: 13px 15px;
    margin: 17px 0 0;
}

.service-rich-text a {
    color: var(--hospital-green);
    text-decoration: underline;
}

.service-rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 9px;
}

.service-rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
}

.service-rich-text th,
.service-rich-text td {
    border: 1px solid var(--hospital-border);
    padding: 9px;
}

.service-rich-text th {
    color: var(--hospital-ink);
    background: #f1f7f5;
}

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

.service-feature-grid article {
    min-width: 0;
    background: var(--theme-surface-muted);
    border: 1px solid #e2ecea;
    border-radius: 9px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
}

.service-feature-grid article>span {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #e0efec;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.service-feature-grid h3 {
    font-size: .65rem;
    margin: 1px 0 4px;
}

.service-feature-grid p {
    color: var(--hospital-muted);
    font-size: .54rem;
    line-height: 1.5;
    margin: 0;
}

.service-guidance-card {
    overflow: hidden;
    color: var(--theme-white);
    background: linear-gradient(120deg, var(--hospital-green-dark), var(--hospital-green));
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
}

.service-guidance-card>div {
    max-width: 580px;
}

.service-guidance-card h2 {
    color: var(--theme-white);
    font-size: .95rem;
    margin: 6px 0 5px;
}

.service-guidance-card p {
    color: #c7e2dd;
    font-size: .58rem;
    line-height: 1.55;
    margin: 0;
}

.service-guidance-card .btn {
    min-width: 120px;
    min-height: 40px;
    flex: 0 0 auto;
    color: var(--hospital-green-dark);
    background: var(--theme-white);
    border: 1px solid var(--theme-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .59rem;
}

.service-detail-sidebar {
    display: grid;
    gap: 13px;
    position: sticky;
    top: 126px;
}

.service-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 23px 19px 19px;
    text-align: center;
}

.service-quick-icon {
    width: 52px;
    height: 52px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 7px solid #def1ed;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.service-quick-card>small {
    color: var(--hospital-green);
    font-size: .47rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-top: 12px;
}

.service-quick-card h2 {
    font-size: .96rem;
    margin: 5px 0 12px;
}

.service-quick-card dl {
    width: 100%;
    margin: 0 0 12px;
}

.service-quick-card dl>div {
    border-top: 1px solid var(--theme-border-soft);
    display: grid;
    gap: 3px;
    padding: 9px 0;
    text-align: left;
}

.service-quick-card dt {
    color: var(--hospital-muted);
    font-size: .51rem;
    font-weight: 650;
}

.service-quick-card dd {
    color: var(--hospital-ink);
    font-size: .57rem;
    font-weight: 750;
    line-height: 1.4;
    margin: 0;
}

.service-quick-card .btn {
    width: 100%;
    min-height: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .59rem;
    margin-top: 7px;
}

.service-quick-card>span:last-child {
    color: #778b87;
    font-size: .48rem;
    line-height: 1.45;
    margin-top: 11px;
}

.service-quick-card>span:last-child i {
    color: var(--hospital-green);
    margin-right: 4px;
}

.service-help-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
}

.service-help-card>span {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.service-help-card>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.service-help-card small {
    color: var(--hospital-muted);
    font-size: .49rem;
}

.service-help-card strong {
    font-size: .59rem;
    margin: 2px 0;
}

.service-help-card a {
    color: var(--hospital-green);
    font-size: .61rem;
    font-weight: 800;
}

.service-all-link {
    color: var(--hospital-green);
    font-size: .59rem;
    font-weight: 750;
    padding: 3px 5px;
}

.service-all-link i {
    margin-right: 5px;
}

.service-related {
    border-top: 1px solid var(--hospital-border);
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 25px;
    padding-top: 32px;
    margin-top: 45px;
}

.service-related h2 {
    font-size: .95rem;
    margin: 5px 0 0;
}

.service-related>div:last-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.service-related a {
    min-width: 0;
    color: var(--hospital-ink);
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 9px;
    padding: 12px;
}

.service-related a:hover {
    color: var(--hospital-green);
    border-color: #aed3cd;
    transform: translateY(-2px);
}

.service-related a>span {
    width: 35px;
    height: 35px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.service-related a>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.service-related strong {
    overflow: hidden;
    font-size: .6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-related small {
    color: var(--hospital-muted);
    overflow: hidden;
    font-size: .47rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}

.service-related a>i {
    color: #9aadaa;
    font-size: .5rem;
}

/* Menu: Gallery */
.public-gallery-page {
    background: var(--theme-surface-subtle);
}

.gallery-page-hero {
    min-height: 350px;
    color: var(--theme-white);
    background: radial-gradient(circle at 75% 25%, rgba(82, 178, 164, .24), transparent 28%), linear-gradient(115deg, #064c45, var(--hospital-green) 70%, #0a5a52);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.gallery-page-hero::after {
    content: "";
    width: 340px;
    height: 340px;
    position: absolute;
    right: -85px;
    bottom: -190px;
    border: 55px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
}

.gallery-page-hero>.container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 55px;
    position: relative;
    z-index: 1;
}

.gallery-page-hero h1 {
    color: var(--theme-white);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: .98;
    margin: 16px 0 18px;
}

.gallery-page-hero h1 em {
    color: #9dd8cf;
    font-family: var(--frontend-heading-font-family);
    font-weight: 400;
}

.gallery-page-hero p {
    max-width: 620px;
    color: #c6e2de;
    font-size: .84rem;
    line-height: 1.7;
    margin: 0;
}

.gallery-hero-stats {
    min-width: 355px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 13px;
    background: rgba(255, 255, 255, .075);
    backdrop-filter: blur(8px);
}

.gallery-hero-stats article {
    min-height: 93px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gallery-hero-stats article:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 40px;
    position: absolute;
    right: 0;
    background: rgba(255, 255, 255, .16);
}

.gallery-hero-stats strong {
    color: var(--theme-white);
    font: 800 1.35rem var(--frontend-heading-font-family);
}

.gallery-hero-stats span {
    color: #acd0ca;
    font-size: .56rem;
    text-transform: uppercase;
    margin-top: 3px;
}

.gallery-browser {
    padding-top: 62px;
}

.gallery-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
}

.gallery-toolbar h2 {
    color: var(--hospital-ink);
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: -.05em;
    margin: 9px 0 0;
}

.gallery-type-tabs {
    background: #eaf3f1;
    border-radius: 10px;
    display: flex;
    gap: 3px;
    padding: 4px;
}

.gallery-type-tabs button {
    min-height: 39px;
    color: #58716d;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: 600 .67rem var(--frontend-body-font-family);
    padding: 0 15px;
}

.gallery-type-tabs button i {
    margin-right: 6px;
}

.gallery-type-tabs button:hover {
    color: var(--hospital-green);
    background: rgba(255, 255, 255, .7);
}

.gallery-type-tabs button.active {
    color: var(--theme-white);
    background: var(--hospital-green);
    box-shadow: 0 7px 18px rgba(11, 107, 97, .18);
}

.gallery-album-browser {
    position: relative;
    margin-bottom: 28px;
}

.gallery-album-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding: 4px 3px 8px;
}

.gallery-album-strip::-webkit-scrollbar {
    display: none;
}

.gallery-album-strip>button {
    min-width: 190px;
    max-width: 225px;
    min-height: 64px;
    flex: 0 0 auto;
    color: var(--hospital-ink);
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    text-align: left;
    scroll-snap-align: start;
    transition: .2s ease;
}

.gallery-album-strip>button:hover {
    border-color: #9fcfc7;
    transform: translateY(-2px);
}

.gallery-album-strip>button.active {
    border-color: var(--hospital-green);
    box-shadow: 0 8px 20px rgba(11, 107, 97, .12);
}

.gallery-album-strip>button>span:first-child {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    overflow: hidden;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.gallery-album-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-album-strip>button>span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gallery-album-strip strong {
    overflow: hidden;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-album-strip small {
    color: var(--hospital-muted);
    font-size: .55rem;
    margin-top: 3px;
}

.album-all-icon {
    background: var(--hospital-green) !important;
    color: var(--theme-white) !important;
}

.gallery-album-arrow {
    width: 34px;
    height: 34px;
    position: absolute;
    z-index: 3;
    top: 50%;
    color: var(--hospital-green);
    background: var(--theme-white);
    border: 1px solid #cfe1de;
    border-radius: 50%;
    box-shadow: 0 7px 20px rgba(8, 61, 57, .16);
    transform: translateY(-58%);
}

.gallery-album-arrow:hover {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.gallery-album-arrow.previous {
    left: -17px;
}

.gallery-album-arrow.next {
    right: -17px;
}

.gallery-mobile-album-select {
    display: none;
}

.gallery-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    grid-auto-flow: dense;
    gap: 12px;
}

.gallery-media-card {
    min-width: 0;
    color: var(--theme-white);
    border: 0;
    border-radius: 11px;
    overflow: hidden;
    background: #bddbd6;
    padding: 0;
    position: relative;
    text-align: left;
}

.gallery-media-card.gallery-card-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-media-card.gallery-card-6 {
    grid-column: span 2;
}

.gallery-media-card.gallery-card-8 {
    grid-row: span 2;
}

.gallery-media-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.gallery-media-card:hover>img {
    transform: scale(1.055);
    filter: saturate(1.08);
}

.gallery-media-fallback {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, .65);
    background: linear-gradient(140deg, #61998f, #b4d8d1);
    display: grid;
    place-items: center;
    font-size: 2.2rem;
}

.gallery-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 30, 28, .02) 30%, rgba(3, 34, 31, .83));
    transition: background .25s ease;
}

.gallery-media-card:hover .gallery-media-overlay {
    background: linear-gradient(180deg, rgba(3, 30, 28, .12), rgba(3, 34, 31, .9));
}

.gallery-media-caption {
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 14px;
    left: 15px;
    display: flex;
    flex-direction: column;
}

.gallery-media-caption small {
    color: #b9ded8;
    font-size: .54rem;
    text-transform: uppercase;
}

.gallery-media-caption small i {
    margin-left: 5px;
}

.gallery-media-caption strong {
    overflow: hidden;
    font: 700 .78rem var(--frontend-heading-font-family);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}

.gallery-play-button,
.gallery-view-button {
    width: 42px;
    height: 42px;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    color: var(--theme-white);
    background: var(--hospital-coral);
    border-radius: 50%;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translate(-50%, -42%) scale(.85);
    transition: .24s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .22);
}

.gallery-view-button {
    width: 34px;
    height: 34px;
    top: 13px;
    right: 13px;
    left: auto;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .7rem;
    transform: translateY(-4px);
    backdrop-filter: blur(7px);
}

.gallery-media-card:hover .gallery-play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-media-card:hover .gallery-view-button {
    opacity: 1;
    transform: translateY(0);
}

.gallery-loading-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 12px;
}

.gallery-loading-grid span {
    border-radius: 11px;
    background: linear-gradient(100deg, var(--theme-border-muted) 25%, var(--theme-surface-subtle) 45%, var(--theme-border-muted) 65%);
    background-size: 220% 100%;
    animation: galleryShimmer 1.3s infinite;
}

.gallery-loading-grid span:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-empty-state {
    min-height: 360px;
    border: 1px dashed var(--theme-border-strong);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.gallery-empty-state>span {
    width: 58px;
    height: 58px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.gallery-empty-state h3 {
    font-size: 1rem;
    margin: 15px 0 5px;
}

.gallery-empty-state p {
    color: var(--hospital-muted);
    font-size: .7rem;
}

.gallery-empty-state button {
    color: var(--hospital-green);
    border: 0;
    background: transparent;
    font-size: .68rem;
    font-weight: 750;
}

.gallery-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 30px;
}

.gallery-load-more button {
    min-width: 190px;
    min-height: 44px;
    color: var(--hospital-green);
    background: var(--theme-white);
    border: 1px solid #bdd8d3;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 750;
}

.gallery-load-more button:hover {
    color: var(--theme-white);
    background: var(--hospital-green);
}

.gallery-load-more small {
    color: var(--hospital-muted);
    font-size: .55rem;
}

.gallery-error {
    color: var(--theme-danger);
    background: var(--theme-danger-bg);
    border: 1px solid var(--theme-danger-border);
    border-radius: 8px;
    font-size: .67rem;
    padding: 11px 13px;
    margin-top: 18px;
    text-align: center;
}

.gallery-error i {
    margin-right: 6px;
}

.gallery-error button {
    color: inherit;
    border: 0;
    background: transparent;
    font-weight: 800;
    text-decoration: underline;
}

body.gallery-modal-open {
    overflow: hidden;
}

.public-gallery-lightbox {
    position: fixed;
    z-index: 2200;
    inset: 0;
    color: var(--theme-white);
    background: rgba(3, 24, 22, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 85px 45px;
    backdrop-filter: blur(10px);
    animation: galleryFadeIn .2s ease both;
}

.gallery-lightbox-content {
    width: min(1100px, 100%);
    max-height: calc(100vh - 115px);
    display: flex;
    flex-direction: column;
}

.gallery-lightbox-content>img {
    width: 100%;
    max-height: calc(100vh - 195px);
    object-fit: contain;
    border-radius: 9px 9px 0 0;
    background: #071b19;
}

.gallery-lightbox-content.video-viewer {
    width: min(1050px, 100%);
}

.gallery-lightbox-content iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    border-radius: 9px 9px 0 0;
    background: #000;
}

.gallery-lightbox-caption {
    min-height: 67px;
    background: var(--theme-white);
    border-radius: 0 0 9px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 17px;
}

.gallery-lightbox-caption>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gallery-lightbox-caption small {
    color: var(--hospital-green);
    font-size: .55rem;
    text-transform: uppercase;
}

.gallery-lightbox-caption h3 {
    overflow: hidden;
    color: var(--hospital-ink);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 3px 0 0;
}

.gallery-lightbox-caption>span {
    color: var(--hospital-muted);
    font-size: .62rem;
}

.gallery-youtube-link {
    flex: 0 0 auto;
    color: var(--theme-white);
    background: #e23b32;
    border-radius: 7px;
    font-size: .61rem;
    font-weight: 750;
    padding: 8px 11px;
}

.gallery-youtube-link:hover {
    color: var(--theme-white);
    background: #c92e27;
}

.gallery-youtube-link i {
    margin-right: 5px;
}

.gallery-lightbox-close {
    width: 43px;
    height: 43px;
    position: absolute;
    top: 19px;
    right: 24px;
    color: var(--theme-white);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.gallery-lightbox-close:hover {
    background: var(--hospital-coral);
    border-color: var(--hospital-coral);
}

.gallery-lightbox-nav {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    color: var(--theme-white);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: 1.35rem;
    transform: translateY(-50%);
}

.gallery-lightbox-nav:hover {
    background: var(--hospital-green);
}

.gallery-lightbox-nav.previous {
    left: 20px;
}

.gallery-lightbox-nav.next {
    right: 20px;
}

.lightbox-fallback {
    min-height: 55vh;
    color: #9fc8c2;
    background: #102d2a;
    border-radius: 9px 9px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.lightbox-fallback i {
    font-size: 3rem;
    opacity: .55;
}

.lightbox-fallback span {
    font-size: .7rem;
}

@keyframes galleryShimmer {
    to {
        background-position: -220% 0;
    }
}

@keyframes galleryFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Menu: Contact Us */
.contact-page {
    background: #f4f8f7;
}

.contact-hero {
    min-height: 340px;
    color: var(--theme-white);
    background: radial-gradient(circle at 78% 15%, rgba(73, 169, 156, .3), transparent 25%), linear-gradient(120deg, #064d46, var(--hospital-green));
    display: flex;
    align-items: center;
}

.contact-hero>.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.contact-hero-copy {
    min-width: 0;
}

.contact-hero h1 {
    max-width: 650px;
    color: var(--theme-white);
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.08;
    margin: 13px 0 12px;
}

.contact-hero p {
    max-width: 650px;
    color: #c8e5e0;
    font-size: .88rem;
    line-height: 1.7;
    margin: 0;
}

.contact-emergency-cta {
    min-width: 245px;
    max-width: 100%;
    color: var(--theme-white);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 19px;
    backdrop-filter: blur(8px);
}

.contact-emergency-cta:hover {
    color: var(--theme-white);
    background: rgba(255, 255, 255, .16);
    transform: translateY(-2px);
}

.contact-emergency-cta>span {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    background: var(--hospital-coral);
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.contact-emergency-cta>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.contact-emergency-cta small {
    color: #bfe0db;
    font-size: .58rem;
}

.contact-emergency-cta strong {
    font: 800 1.25rem var(--frontend-heading-font-family);
    overflow-wrap: anywhere;
    margin-top: 2px;
}

.contact-content {
    padding-top: 0;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(8, 59, 54, .12);
    margin-top: -48px;
    margin-bottom: 45px;
    position: relative;
    z-index: 2;
}

.contact-info-grid article {
    min-width: 0;
    min-height: 130px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 25px 27px;
    position: relative;
}

.contact-info-grid article:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 52px;
    position: absolute;
    top: 50%;
    right: 0;
    background: var(--hospital-border);
    transform: translateY(-50%);
}

.contact-info-grid article>span {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.contact-info-grid article>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.contact-info-grid article a {
    min-width: 0;
    color: inherit;
}

.contact-info-grid small {
    color: var(--hospital-muted);
    font-size: .58rem;
    text-transform: uppercase;
}

.contact-info-grid strong {
    color: var(--hospital-ink);
    display: block;
    font-size: .76rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    margin-top: 4px;
}

.contact-info-grid p {
    color: #758985;
    font-size: .62rem;
    line-height: 1.45;
    margin: 3px 0 0;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 28px;
}

.contact-main-grid>*,
.contact-side-column {
    min-width: 0;
}

.contact-side-column {
    display: grid;
    gap: 20px;
}

.contact-directory-card,
.contact-form-card {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(9, 56, 52, .07);
}

.contact-directory-card {
    padding: 30px;
}

.contact-directory-card h2,
.contact-form-card h2 {
    color: var(--hospital-ink);
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.25;
    margin: 9px 0 22px;
}

.contact-number-list {
    display: grid;
}

.contact-number-list>a {
    min-width: 0;
    color: var(--hospital-ink);
    border-top: 1px solid var(--theme-border-soft);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 11px;
    padding: 15px 0;
}

.contact-number-list>a>span {
    width: 38px;
    height: 38px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.contact-number-list>a>div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.contact-number-list small {
    color: var(--hospital-muted);
    font-size: .57rem;
}

.contact-number-list strong {
    font-size: .7rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    margin-top: 2px;
}

.contact-number-list>a>i {
    width: 28px;
    height: 28px;
    color: var(--hospital-green);
    border: 1px solid #dce9e7;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .65rem;
}

.contact-number-list>a:hover>i {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.contact-directory-empty {
    color: var(--hospital-muted);
    font-size: .7rem;
    line-height: 1.6;
    margin: 12px 0 0;
}

.contact-map {
    height: 300px;
    overflow: hidden;
    border: 1px solid var(--hospital-border);
    border-radius: 14px;
    position: relative;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-map>a {
    position: absolute;
    right: 13px;
    bottom: 13px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 750;
    padding: 9px 12px;
    box-shadow: 0 8px 20px rgba(6, 61, 56, .22);
}

.contact-map>a i {
    margin-right: 6px;
}

.contact-form-card {
    min-height: 665px;
    padding: 36px 40px;
}

.contact-form-card>p {
    color: var(--hospital-muted);
    font-size: .72rem;
    line-height: 1.65;
    margin: -13px 0 25px;
}

.contact-form-card .form-label {
    color: #3d5653;
    font-size: .63rem;
    font-weight: 750;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    min-height: 47px;
    border-color: #d3e2df;
    border-radius: 8px;
    font-size: .7rem;
}

.contact-form-card textarea.form-control {
    min-height: 116px;
    resize: vertical;
    padding-top: 12px;
}

.contact-character-count {
    color: var(--hospital-muted);
    font-size: .57rem;
}

.contact-honeypot {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    left: -10000px;
    opacity: 0;
    pointer-events: none;
}

.contact-verification {
    min-height: 72px;
    background: #f1f8f6;
    border: 1px solid #d6e9e5;
    border-radius: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 90px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
}

.contact-verification>div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-verification>div>span {
    width: 37px;
    height: 37px;
    color: var(--hospital-green);
    background: #d8eee9;
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.contact-verification>div>div {
    display: flex;
    flex-direction: column;
}

.contact-verification small {
    color: var(--hospital-muted);
    font-size: .54rem;
}

.contact-verification strong {
    color: var(--hospital-ink);
    font-size: .68rem;
    margin-top: 2px;
}

.contact-verification>button {
    width: 32px;
    height: 32px;
    color: var(--hospital-green);
    border: 0;
    border-radius: 50%;
    background: var(--theme-white);
}

.contact-verification .form-control {
    min-height: 40px;
    text-align: center;
    padding: 5px;
}

.contact-field-error {
    color: #dc5b4c;
    font-size: .62rem;
    margin-top: 5px;
}

.contact-form-alert {
    color: var(--theme-danger);
    background: var(--theme-danger-bg);
    border: 1px solid var(--theme-danger-border);
    border-radius: 8px;
    font-size: .66rem;
    padding: 10px 12px;
    margin-top: 16px;
}

.contact-form-alert i {
    margin-right: 7px;
}

.contact-form-footer {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 23px;
    padding-top: 20px;
}

.contact-form-footer p {
    color: var(--hospital-muted);
    font-size: .58rem;
    margin: 0;
}

.contact-form-footer p i {
    color: var(--hospital-green);
    margin-right: 5px;
}

.contact-form-footer .btn {
    min-width: 155px;
    font-size: .7rem;
    padding: .72rem 1rem;
}

.contact-success-state {
    min-height: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 34px 0;
}

.contact-success-visual {
    width: 84px;
    height: 84px;
    color: var(--theme-white);
    background: linear-gradient(145deg, #17a891, var(--hospital-green));
    border: 7px solid #e5f5f1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 1.45rem;
    box-shadow: 0 15px 34px rgba(11, 107, 97, .22);
}

.contact-success-visual>span {
    position: absolute;
    border: 1px solid rgba(23, 168, 145, .22);
    border-radius: 50%;
    inset: -14px;
}

.contact-success-visual>span:nth-child(2) {
    border-color: rgba(23, 168, 145, .1);
    inset: -24px;
}

.contact-success-visual i {
    position: relative;
    z-index: 1;
}

.contact-success-state>small {
    color: var(--hospital-green);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 27px;
}

.contact-success-state h2 {
    margin: 7px 0 8px;
}

.contact-success-state>p {
    max-width: 410px;
    color: var(--hospital-muted);
    font-size: .73rem;
    line-height: 1.7;
    margin-bottom: 17px;
}

.contact-success-note {
    max-width: 445px;
    color: #47605c;
    background: #f0f8f6;
    border: 1px solid #d7ebe7;
    border-radius: 11px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    text-align: left;
}

.contact-success-note>i {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #dcefeb;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.contact-success-note span {
    font-size: .62rem;
    line-height: 1.55;
}

.contact-success-note strong {
    color: var(--hospital-ink);
    display: block;
    font-size: .65rem;
    margin-bottom: 2px;
}

.contact-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 19px;
}

.contact-success-actions .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .66rem;
    margin: 0;
    padding: .65rem .9rem;
}

/* Quick access: Appointment */
.appointment-page {
    background: linear-gradient(180deg, #edf8f6 0%, #f7fbfa 42%, #edf8f6 100%);
}

.appointment-page-head {
    position: relative;
    overflow: hidden;
    color: var(--theme-white);
    background: radial-gradient(circle at 14% 20%, rgba(129, 220, 206, .22), transparent 25%), radial-gradient(circle at 88% 5%, rgba(255, 255, 255, .12), transparent 22%), linear-gradient(115deg, #043e39, #08766c);
    padding: 58px 0 112px;
    text-align: center;
}

.appointment-page-head::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -120px;
    bottom: -220px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255, 255, 255, .035);
}

.appointment-page-head .container {
    position: relative;
    z-index: 1;
}

.appointment-page-head .appointment-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #eafffb;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    padding: 7px 12px;
    text-transform: uppercase;
}

.appointment-page-head h1 {
    color: var(--theme-white);
    font-size: clamp(2.15rem, 4vw, 3.3rem);
    font-weight: 750;
    letter-spacing: -.05em;
    margin: 13px 0 10px;
    text-shadow: 0 3px 22px rgba(0, 32, 29, .2);
}

.appointment-page-head p {
    max-width: 520px;
    color: #d5efeb;
    font-size: .9rem;
    line-height: 1.65;
    margin: 0 auto;
}

.appointment-page .appointment-section {
    padding-top: 0;
    margin-top: -58px;
}

.appointment-page .appointment-shell {
    position: relative;
    z-index: 2;
}

/* Patient portal: Authentication */
.patient-auth-page {
    background: var(--hospital-mint-light);
}

.patient-login-section {
    min-height: calc(100vh - 159px);
    display: flex;
    align-items: center;
    padding: 70px 0;
}

.patient-auth-layout .patient-login-section {
    padding: 70px 0;
}

.patient-login-card {
    width: min(950px, 100%);
    min-height: 590px;
    background: var(--theme-white);
    border: 1px solid #dbe7e4;
    border-radius: 18px;
    box-shadow: 0 30px 75px rgba(10, 65, 60, .13);
    display: grid;
    grid-template-columns: 48% 52%;
    overflow: hidden;
    margin: auto;
}

.patient-login-aside {
    color: var(--theme-white);
    background: linear-gradient(150deg, var(--hospital-green), var(--hospital-green-dark));
    padding: 43px;
    position: relative;
    overflow: hidden;
}

.patient-login-aside::after {
    content: "+";
    position: absolute;
    right: -35px;
    bottom: -95px;
    color: rgba(255, 255, 255, .055);
    font: 500 300px/1 var(--frontend-heading-font-family);
}

.login-aside-copy {
    position: relative;
    z-index: 1;
    margin-top: 95px;
}

.login-aside-copy h1 {
    font-size: 2.45rem;
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: 1.15;
    margin: 14px 0 18px;
}

.login-aside-copy p {
    color: #c4dfdb;
    font-size: .84rem;
    line-height: 1.75;
}

.patient-login-form {
    padding: 70px 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile-login-brand {
    display: none;
}

.login-welcome {
    color: var(--hospital-green);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.patient-login-form h2 {
    font-size: 1.8rem;
    font-weight: 750;
    letter-spacing: -.04em;
    margin: 7px 0;
}

.patient-login-form>p {
    color: var(--hospital-muted);
    font-size: .76rem;
    line-height: 1.6;
    margin-bottom: 27px;
}

.auth-input {
    position: relative;
}

.auth-input>i {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 15px;
    color: #78938f;
}

.auth-input .form-control {
    padding-left: 42px;
    padding-right: 42px;
}

.auth-input>button {
    position: absolute;
    z-index: 2;
    right: 5px;
    top: 5px;
    width: 37px;
    height: 37px;
    color: #78938f;
    border: 0;
    background: transparent;
}

.forgot-link {
    color: var(--hospital-green);
    font-size: .68rem;
    font-weight: 700;
}

.auth-error {
    color: #dc5b4c;
    font-size: .65rem;
    margin-top: 4px;
}

.login-options label {
    color: #657b78;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .69rem;
}

.login-options input {
    accent-color: var(--hospital-green);
}

.patient-login-alert {
    color: var(--theme-danger);
    background: var(--theme-danger-bg);
    border: 1px solid var(--theme-danger-border);
    border-radius: 7px;
    font-size: .69rem;
    padding: 9px 11px;
    margin-top: 14px;
}

.patient-login-alert i {
    margin-right: 6px;
}

.patient-login-submit {
    min-height: 48px;
    font-size: .78rem;
    margin-top: 18px;
}

.patient-login-submit span i {
    margin-left: 9px;
}

.patient-login-help {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
}

.patient-login-help>i {
    width: 34px;
    height: 34px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.patient-login-help span {
    color: #7a8c89;
    display: flex;
    flex-direction: column;
    font-size: .61rem;
}

.patient-login-help strong {
    color: var(--hospital-ink);
    font-size: .72rem;
    margin-top: 2px;
}

.patient-login-reference {
    background: var(--hospital-green-dark);
    padding: 70px 0;
}

.patient-login-shell {
    width: min(1180px, 100%);
    min-height: 650px;
    grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr);
    gap: 70px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.patient-login-page-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    background: transparent;
    padding: 45px 0;
}

.patient-login-page-aside::after {
    display: none;
}

.patient-login-page-aside .login-aside-copy {
    max-width: 560px;
    margin: 0;
}

.login-reference-kicker {
    color: #9edbd0;
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.patient-login-page-aside .login-aside-copy h1 {
    color: var(--theme-white);
    font-size: clamp(3.6rem, 5.4vw, 5.3rem);
    font-weight: 750;
    letter-spacing: -.065em;
    line-height: 1;
    margin: 26px 0 20px;
}

.patient-login-page-aside .login-aside-copy p {
    max-width: 560px;
    color: #c9e4df;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.login-feature-list {
    display: grid;
    gap: 27px;
    margin-top: 43px;
}

.login-feature-list>div {
    display: flex;
    align-items: center;
    gap: 17px;
}

.login-feature-list>div>span {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    color: var(--hospital-green-dark);
    background: #b8dfd8;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.login-feature-list>div>div {
    display: flex;
    flex-direction: column;
}

.login-feature-list strong {
    color: var(--theme-white);
    font: 700 .88rem var(--frontend-heading-font-family);
}

.login-feature-list small {
    color: #b9d9d3;
    font-size: .72rem;
    margin-top: 4px;
}

.patient-login-original-form {
    min-height: 650px;
    background: var(--theme-white);
    border-radius: 18px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, .18);
}

.patient-auth-switch {
    color: #718582;
    font-size: .7rem !important;
    text-align: center;
    margin: 16px 0 0 !important;
}

.patient-auth-switch a {
    color: var(--hospital-green);
    font-weight: 800;
}

.register-form {
    padding: 42px 55px;
}

.register-form>p {
    margin-bottom: 19px;
}

.terms-check {
    color: #647b78;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .66rem;
    line-height: 1.5;
}

.terms-check input {
    flex: 0 0 auto;
    accent-color: var(--hospital-green);
    margin-top: 2px;
}

.terms-check label {
    margin: 0;
}

.terms-check a,
.terms-check a:hover {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.auth-success-state>span {
    width: 58px;
    height: 58px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    margin: 0 auto 18px;
}

.auth-success-state>p {
    color: var(--hospital-muted);
    font-size: .73rem;
    line-height: 1.65;
    margin: 0 auto 25px;
}

.auth-success-state>span {
    color: var(--theme-white);
    background: var(--hospital-green);
}

.auth-success-state .btn {
    font-size: .72rem;
}

.auth-success-state>button {
    color: var(--hospital-green);
    border: 0;
    background: transparent;
    display: block;
    font-size: .67rem;
    font-weight: 700;
    margin: 15px auto 0;
}

/* Patient portal: Dashboard */
.patient-dashboard-page {
    background: #f4f8f7;
}

.portal-section {
    min-height: 70vh;
    padding: 58px 0 85px;
}

.portal-welcome {
    background: linear-gradient(110deg, var(--hospital-green), var(--hospital-green-dark));
    border-radius: 14px;
    color: var(--theme-white);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
}

.portal-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 1rem var(--frontend-heading-font-family);
}

.portal-welcome>div:nth-child(2) {
    flex: 1;
}

.portal-welcome span {
    color: #a8ddd3;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.portal-welcome h1 {
    font-size: 1.65rem;
    margin: 3px 0;
}

.portal-welcome p {
    color: #cce5e0;
    font-size: .72rem;
    margin: 0;
}

.portal-welcome .btn {
    background: var(--theme-white);
    border-color: var(--theme-white);
    color: var(--hospital-green);
    box-shadow: none;
    font-size: .72rem;
}

.portal-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
}

.portal-sidebar {
    align-self: start;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    padding: 8px;
}

.portal-sidebar a {
    color: #607572;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    font-weight: 650;
    padding: 11px 12px;
}

.portal-sidebar a i {
    width: 15px;
}

.portal-sidebar a:hover,
.portal-sidebar a.active {
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
}

.portal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.portal-stats article {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
}

.portal-stats article>span {
    width: 38px;
    height: 38px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.portal-stats article div {
    display: flex;
    flex-direction: column;
}

.portal-stats strong {
    font: 750 1.25rem var(--frontend-heading-font-family);
}

.portal-stats small {
    color: var(--hospital-muted);
    font-size: .62rem;
}

.portal-panel {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 11px;
}

.portal-panel-head {
    border-bottom: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 21px;
}

.portal-panel-head h2 {
    font-size: .95rem;
    margin: 0 0 2px;
}

.portal-panel-head p {
    color: var(--hospital-muted);
    font-size: .63rem;
    margin: 0;
}

.portal-panel-head>a {
    color: var(--hospital-green);
    font-size: .68rem;
    font-weight: 800;
}

.portal-empty {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.portal-empty>span {
    width: 52px;
    height: 52px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}

.portal-empty h3 {
    font-size: .92rem;
    margin: 14px 0 4px;
}

.portal-empty p {
    color: var(--hospital-muted);
    font-size: .7rem;
}

.portal-empty .btn {
    font-size: .68rem;
    padding: .6rem .9rem;
}

.portal-avatar {
    overflow: hidden;
}

.portal-avatar img,
.profile-photo img,
.appointment-doctor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-avatar span {
    color: #0d6862;
    font: 800 1rem var(--frontend-heading-font-family);
    letter-spacing: 0;
}

.portal-panel,
#overview {
    scroll-margin-top: 90px;
}

.portal-profile-panel {
    margin-top: 18px;
}

.portal-empty.compact {
    min-height: 210px;
}

.portal-empty.compact>span {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.appointment-list {
    padding: 7px 20px;
}

.portal-appointment-card {
    display: grid;
    grid-template-columns: 50px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--theme-border-soft);
    padding: 16px 0;
}

.portal-appointment-card:last-child {
    border-bottom: 0;
}

.appointment-date-badge {
    width: 48px;
    height: 53px;
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border: 1px solid #d9ebe8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.appointment-date-badge strong {
    font: 800 1.05rem var(--frontend-heading-font-family);
}

.appointment-date-badge span {
    font-size: .56rem;
    font-weight: 800;
    margin-top: 4px;
    text-transform: uppercase;
}

.appointment-doctor-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    color: var(--hospital-green);
    background: #e8f3f1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .65rem;
    font-weight: 800;
}

.appointment-record-main {
    min-width: 0;
}

.appointment-record-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.appointment-record-title h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    margin: 0;
}

.appointment-record-main>p {
    color: var(--hospital-muted);
    font-size: .61rem;
    margin: 3px 0 7px;
}

.appointment-record-meta {
    color: #637a77;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .59rem;
}

.appointment-record-meta i {
    color: var(--hospital-green);
    margin-right: 5px;
}

.appointment-status {
    flex: 0 0 auto;
    border-radius: 20px;
    font-size: .52rem;
    font-weight: 800;
    padding: 4px 7px;
    text-transform: uppercase;
}

.status-pending {
    color: var(--theme-warning);
    background: var(--theme-warning-bg);
}

.status-confirmed {
    color: #087051;
    background: #dff5ed;
}

.status-completed {
    color: var(--theme-info);
    background: var(--theme-info-bg);
}

.status-rejected {
    color: #a4473d;
    background: #fce8e5;
}

.appointment-slip-link {
    min-width: 46px;
    color: var(--hospital-green);
    border: 1px solid #d9e7e5;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: .55rem;
    font-weight: 750;
    padding: 7px 8px;
}

.appointment-slip-link i {
    font-size: .75rem;
}

.appointment-slip-link:hover {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.portal-appointment-head {
    justify-content: space-between;
}

.portal-appointment-head>div {
    flex: 1;
}

.portal-appointment-head .portal-book-new {
    min-height: 36px;
    flex: 0 0 auto;
    color: var(--theme-white);
    background: var(--hospital-green);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .62rem;
    font-weight: 800;
    padding: 0 11px;
    margin-left: auto;
}

.portal-appointment-head .portal-book-new:hover {
    color: var(--theme-white);
    background: var(--hospital-green-dark);
}

.portal-appointment-filters {
    background: var(--theme-surface-soft);
    border-bottom: 1px solid var(--hospital-border);
    padding: 11px 20px;
}

.portal-filter-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 145px 120px auto auto;
    align-items: center;
    gap: 6px;
}

.portal-history-filter-row {
    grid-template-columns: minmax(180px, 1fr) 145px auto auto;
}

.portal-appointment-filters .form-control,
.portal-appointment-filters .form-select {
    min-height: 38px;
    border-color: #d9e5e2;
    border-radius: 7px;
    font-size: .68rem;
}

.portal-appointment-filters .form-control:focus,
.portal-appointment-filters .form-select:focus {
    border-color: #8bbeb5;
    box-shadow: 0 0 0 3px rgba(11, 107, 97, .08);
}

.portal-filter-input {
    min-width: 0;
    position: relative;
}

.portal-filter-input>i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: #78908c;
    font-size: .65rem;
    transform: translateY(-50%);
}

.portal-filter-input .form-control {
    padding-left: 33px;
}

.portal-filter-submit {
    min-height: 38px;
    font-size: .63rem;
    padding: .48rem .85rem;
}

.portal-filter-clear {
    width: 36px;
    min-height: 36px;
    padding: 0;
}

.portal-appointment-loading {
    min-height: 180px;
    color: var(--hospital-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .7rem;
}

.portal-list-alert {
    margin: 18px 20px;
}

.portal-list-alert button {
    color: var(--hospital-green);
    border: 0;
    background: transparent;
    font-size: .65rem;
    font-weight: 800;
    margin-left: auto;
}

.portal-appointment-footer {
    min-height: 58px;
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
}

.portal-appointment-footer>label {
    color: var(--hospital-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .62rem;
    margin: 0;
}

.portal-appointment-footer>label .form-select {
    width: 66px;
    min-height: 34px;
    border-color: #dce7e5;
    border-radius: 6px;
    font-size: .64rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.portal-appointment-footer>small {
    color: var(--hospital-muted);
    font-size: .62rem;
}

.portal-appointment-pagination {
    min-width: 0;
    flex: 1;
}

.portal-appointment-pagination>div {
    justify-content: flex-end !important;
    gap: 14px;
}

.portal-appointment-pagination p {
    color: var(--hospital-muted);
    font-size: .62rem;
    margin: 0;
}

.portal-appointment-pagination .pagination {
    gap: 3px;
    margin: 0;
}

.portal-appointment-pagination .page-link {
    min-width: 30px;
    color: var(--hospital-green);
    border-color: #dce7e5;
    border-radius: 6px;
    font-size: .6rem;
    text-align: center;
    padding: .42rem .5rem;
}

.portal-appointment-pagination .page-item.active .page-link {
    color: var(--theme-white);
    background: var(--hospital-green);
    border-color: var(--hospital-green);
}

.portal-appointment-pagination .page-item[disabled] .page-link,
.portal-appointment-pagination .page-item.disabled .page-link {
    color: #a6b2b0;
    background: #f5f7f7;
    pointer-events: none;
}

.patient-code {
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
    border-radius: 20px;
    font-size: .58rem;
    font-weight: 800;
    padding: 6px 9px;
}

.portal-profile-form {
    padding: 22px;
}

.profile-avatar-editor {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--hospital-border);
    padding-bottom: 19px;
    margin-bottom: 20px;
}

.profile-photo {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    overflow: hidden;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 800 .9rem var(--frontend-heading-font-family);
}

.profile-avatar-editor>div:last-child {
    display: grid;
    grid-template-columns: 1fr auto;
    flex: 1;
    align-items: center;
    column-gap: 15px;
}

.profile-avatar-editor strong {
    font-size: .73rem;
}

.profile-avatar-editor small {
    color: var(--hospital-muted);
    grid-column: 1;
    font-size: .58rem;
    margin-top: 2px;
}

.profile-avatar-editor .btn {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: .61rem;
    padding: .5rem .7rem;
}

.profile-avatar-error {
    color: #dc5b4c;
    font-size: .63rem;
    margin: -12px 0 14px 79px;
}

.portal-profile-form .form-label {
    color: #405955;
    font-size: .64rem;
    font-weight: 750;
}

.portal-profile-form .form-control,
.portal-profile-form .form-select {
    min-height: 44px;
    font-size: .7rem;
}

.portal-profile-form textarea.form-control {
    min-height: 82px;
    resize: vertical;
}

.profile-message {
    border-radius: 7px;
    font-size: .67rem;
    padding: 10px 12px;
    margin-top: 17px;
}

.profile-message i {
    margin-right: 7px;
}

.profile-message.success {
    color: var(--theme-success);
    background: var(--theme-success-bg);
}

.profile-message.error {
    color: var(--theme-danger);
    background: var(--theme-danger-bg);
}

.profile-actions {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 18px;
}

.profile-actions .btn {
    min-width: 135px;
    font-size: .69rem;
}

/* Patient portal: Workspace */
.portal-dashboard-hero {
    min-height: 126px;
    justify-content: space-between;
    overflow: hidden;
    background: radial-gradient(circle at 78% 10%, rgba(112, 211, 194, .22), transparent 27%), linear-gradient(115deg, var(--hospital-green-dark), var(--hospital-green));
    padding: 28px 31px;
    position: relative;
}

.portal-dashboard-hero::after {
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    right: -80px;
    bottom: -125px;
    border: 30px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}

.portal-dashboard-hero>.portal-identity {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 17px;
    position: relative;
    z-index: 1;
}

.portal-welcome.portal-dashboard-hero>div.portal-hero-actions {
    flex: 0 0 auto;
}

.portal-dashboard-hero .portal-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border: 4px solid rgba(255, 255, 255, .16);
}

.portal-welcome-copy {
    min-width: 0;
}

.portal-welcome-copy h1 {
    font-size: 1.55rem;
}

.portal-patient-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
    margin-top: 8px;
}

.portal-patient-meta small {
    color: #c8e5df;
    font-size: .61rem;
}

.portal-patient-meta i {
    color: #8fd4c8;
    margin-right: 5px;
}

.portal-hero-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    z-index: 1;
}

.portal-dashboard-hero .portal-profile-shortcut {
    color: var(--theme-white);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

.portal-dashboard-hero .portal-profile-shortcut:hover {
    background: rgba(255, 255, 255, .17);
}

.portal-dashboard-hero .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .67rem;
    padding: .65rem .85rem;
}

.portal-navigation {
    overflow: hidden;
    padding: 0;
}

.portal-sidebar-head {
    background: #f5faf9;
    border-bottom: 1px solid var(--hospital-border);
    display: flex;
    flex-direction: column;
    padding: 17px 18px 14px;
}

.portal-sidebar-head small,
.portal-sidebar-future>small {
    color: var(--hospital-green);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.portal-sidebar-head strong {
    color: var(--hospital-ink);
    font-size: .75rem;
    margin-top: 3px;
}

.portal-navigation nav {
    padding: 7px;
}

.portal-navigation nav a {
    min-height: 43px;
}

.portal-navigation nav a span {
    flex: 1;
}

.portal-navigation .portal-nav-arrow {
    width: auto;
    color: #a7b8b5;
    font-size: .5rem;
}

.portal-navigation nav a.active .portal-nav-arrow {
    color: var(--hospital-green);
}

.portal-sidebar-future {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    flex-direction: column;
    padding: 14px 17px 16px;
}

.portal-sidebar-future span {
    color: #829491;
    font-size: .58rem;
    margin-top: 5px;
}

.portal-sidebar-future i {
    color: #98aaa7;
    margin-right: 5px;
}

.portal-content {
    min-width: 0;
}

.portal-page-heading {
    min-height: 108px;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.portal-page-heading>div {
    min-width: 0;
}

.portal-page-heading>div>span,
.portal-future-heading span {
    color: var(--hospital-green);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.portal-page-heading h2 {
    color: var(--hospital-ink);
    font-size: 1.22rem;
    font-weight: 750;
    letter-spacing: -.03em;
    margin: 4px 0;
}

.portal-page-heading p {
    color: var(--hospital-muted);
    font-size: .66rem;
    line-height: 1.55;
    margin: 0;
}

.portal-page-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.portal-page-loader {
    min-height: 330px;
    color: var(--hospital-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: .72rem;
}

.portal-profile-panel.standalone {
    margin-top: 0;
}

.portal-stat-links>a,
.portal-stat-links>.portal-stat-future {
    min-width: 0;
    color: inherit;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px;
    position: relative;
}

.portal-stat-links>a:hover {
    border-color: #a7d2cb;
    box-shadow: 0 10px 25px rgba(11, 107, 97, .08);
    transform: translateY(-2px);
}

.portal-stat-links>a>span,
.portal-stat-links>.portal-stat-future>span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 8px;
    display: grid;
    place-items: center;
}

.portal-stat-links>a>div,
.portal-stat-links>.portal-stat-future>div {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.portal-stat-links strong {
    font: 750 1.25rem var(--frontend-heading-font-family);
}

.portal-stat-links small {
    color: var(--hospital-muted);
    overflow: hidden;
    font-size: .59rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-stat-links>a>i {
    color: #9aadaa;
    font-size: .58rem;
}

.portal-stat-future em {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #8a6d29;
    background: #fff5d8;
    border-radius: 20px;
    font-size: .45rem;
    font-style: normal;
    font-weight: 800;
    padding: 3px 5px;
    text-transform: uppercase;
}

.portal-overview-appointments {
    margin-bottom: 18px;
}

.portal-future-section {
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 11px;
    padding: 23px;
}

.portal-future-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.portal-future-heading h2 {
    font-size: 1.05rem;
    margin: 4px 0 0;
}

.portal-future-heading>small {
    max-width: 250px;
    color: var(--hospital-muted);
    font-size: .57rem;
    line-height: 1.5;
    text-align: right;
}

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

.portal-future-grid article {
    min-width: 0;
    background: var(--theme-surface-muted);
    border: 1px solid #e4eeec;
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
}

.portal-future-grid article>span {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #deefeb;
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.portal-future-grid article>div {
    min-width: 0;
}

.portal-future-grid small {
    color: #8a6d29;
    font-size: .45rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.portal-future-grid h3 {
    font-size: .7rem;
    margin: 3px 0;
}

.portal-future-grid p {
    color: var(--hospital-muted);
    font-size: .57rem;
    line-height: 1.5;
    margin: 0;
}

.portal-security-badge {
    color: #176d55;
    background: #e3f5ee;
    border-radius: 20px;
    font-size: .54rem;
    font-weight: 800;
    padding: 6px 9px;
    text-transform: uppercase;
}

.portal-security-badge i {
    margin-right: 4px;
}

.portal-password-form {
    max-width: 670px;
    padding: 27px;
}

.portal-password-form .form-label {
    color: #405955;
    font-size: .64rem;
    font-weight: 750;
}

.portal-password-form .form-control {
    min-height: 47px;
    font-size: .7rem;
}

.portal-security-note {
    background: var(--hospital-mint-light);
    border: 1px solid #dcebe8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 22px;
}

.portal-security-note>span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #d8ece8;
    border-radius: 9px;
    display: grid;
    place-items: center;
}

.portal-security-note strong {
    color: var(--hospital-ink);
    display: block;
    font-size: .68rem;
}

.portal-security-note p {
    color: var(--hospital-muted);
    font-size: .59rem;
    margin: 3px 0 0;
}

.patient-appointment-booking {
    overflow: visible;
}

.patient-booking-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4faf8;
    border-bottom: 1px solid var(--hospital-border);
    padding: 14px 21px;
}

.patient-booking-profile-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: #dcefeb;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.patient-booking-profile>div {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.patient-booking-profile small {
    color: var(--hospital-muted);
    font-size: .52rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.patient-booking-profile strong {
    color: var(--hospital-ink);
    font-size: .72rem;
    margin-top: 2px;
}

.patient-booking-profile div span {
    color: var(--hospital-muted);
    font-size: .58rem;
    margin-top: 2px;
}

.patient-booking-profile>a {
    color: var(--hospital-green);
    font-size: .6rem;
    font-weight: 750;
}

.patient-appointment-form {
    padding: 24px 22px 20px;
}

.patient-appointment-form .form-label {
    color: #405955;
    font-size: .64rem;
    font-weight: 750;
}

.patient-appointment-form .form-control {
    min-height: 46px;
    font-size: .7rem;
}

.patient-appointment-form .select2-container {
    width: 100% !important;
}

.patient-appointment-form .select2-container--default .select2-selection--single {
    height: 46px;
    border: 1px solid var(--hospital-border);
    border-radius: 8px;
}

.patient-appointment-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #425c59;
    line-height: 44px;
    padding-left: 12px;
}

.patient-appointment-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 6px;
}

.patient-booking-alert {
    color: var(--theme-danger);
    background: var(--theme-danger-bg);
    border: 1px solid var(--theme-danger-border);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .65rem;
    padding: 10px 12px;
    margin-top: 16px;
}

.patient-booking-alert a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
}

.patient-booking-actions {
    border-top: 1px solid var(--hospital-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
}

.patient-booking-actions p {
    color: var(--hospital-muted);
    font-size: .59rem;
    margin: 0;
}

.patient-booking-actions p i {
    color: var(--hospital-green);
    margin-right: 5px;
}

.patient-booking-actions .btn {
    min-width: 175px;
    font-size: .68rem;
}

.patient-booking-success {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 24px;
    text-align: center;
}

.patient-booking-success-icon {
    width: 60px;
    height: 60px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 8px solid #def1ed;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 30px rgba(11, 107, 97, .18);
}

.patient-booking-success>small {
    color: var(--hospital-green);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-top: 19px;
}

.patient-booking-success h2 {
    font-size: 1.25rem;
    margin: 7px 0 5px;
}

.patient-booking-success>p {
    color: var(--hospital-muted);
    font-size: .68rem;
}

.patient-booking-numbers {
    width: min(440px, 100%);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 9px;
    margin: 17px 0;
}

.patient-booking-numbers>div {
    background: #f2f9f7;
    border: 1px dashed #afd1ca;
    border-radius: 9px;
    padding: 11px 13px;
}

.patient-booking-numbers span {
    color: var(--hospital-muted);
    display: block;
    font-size: .5rem;
    font-weight: 750;
    text-transform: uppercase;
}

.patient-booking-numbers strong {
    color: var(--hospital-green);
    display: block;
    font-size: .9rem;
    margin-top: 3px;
}

.patient-booking-success-actions {
    display: flex;
    gap: 8px;
}

.patient-booking-success-actions .btn {
    font-size: .65rem;
}

/* Shared page hero and legal pages */
.back-to-top {
    width: 46px;
    height: 46px;
    position: fixed;
    z-index: 990;
    right: 24px;
    bottom: 24px;
    color: var(--theme-white);
    background: var(--hospital-green);
    border: 1px solid color-mix(in srgb, var(--hospital-green) 78%, #fff);
    border-radius: 50%;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--hospital-green) 28%, transparent);
    transform: translateY(16px) scale(.88);
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    color: var(--theme-white);
    background: var(--hospital-green-dark);
    transform: translateY(-2px) scale(1);
}

.back-to-top:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hospital-coral) 55%, transparent);
    outline-offset: 3px;
}

.page-hero {
    min-height: 330px;
    color: var(--theme-white);
    background: radial-gradient(circle at 76% 18%, rgba(112, 206, 191, .23), transparent 25%), linear-gradient(118deg, #063f3a, var(--hospital-green) 72%, #08756a);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.page-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.page-hero-copy {
    max-width: 720px;
}

.page-hero h1 {
    color: var(--theme-white);
    font-size: clamp(2.65rem, 5vw, 4.6rem);
    font-weight: 750;
    letter-spacing: -.06em;
    line-height: 1;
    margin: 15px 0 17px;
}

.page-hero-copy>p {
    max-width: 650px;
    color: #c9e5e1;
    font-size: .84rem;
    line-height: 1.75;
    margin: 0 0 25px;
}

.page-hero-breadcrumb {
    --bs-breadcrumb-divider: "›";
    font-size: .66rem;
}

.page-hero-breadcrumb a {
    color: #b7ddd7;
}

.page-hero-breadcrumb a:hover {
    color: var(--theme-white);
}

.page-hero-breadcrumb .active,
.page-hero-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, .68);
}

.page-hero-icon {
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
    color: var(--theme-white);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 28px;
    background: rgba(255, 255, 255, .09);
    place-items: center;
    font-size: 2.8rem;
    transform: rotate(5deg);
    box-shadow: 0 25px 60px rgba(2, 43, 39, .22);
    backdrop-filter: blur(8px);
}

.page-hero-icon i {
    transform: rotate(-5deg);
}

.page-hero-shape {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.page-hero-shape-one {
    width: 350px;
    height: 350px;
    right: -100px;
    bottom: -220px;
    border-width: 55px;
}

.page-hero-shape-two {
    width: 190px;
    height: 190px;
    top: -135px;
    left: 8%;
    border-width: 32px;
}

.legal-page {
    background: #f3f8f7;
}

.legal-section {
    padding: 70px 0 85px;
}

.legal-sidebar {
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 14px;
    box-shadow: 0 15px 45px rgba(7, 61, 56, .07);
}

.legal-sidebar>span {
    color: var(--hospital-muted);
    border-bottom: 1px solid #edf3f1;
    display: block;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 20px 22px 14px;
    text-transform: uppercase;
}

.legal-sidebar .nav {
    padding: 8px;
}

.legal-sidebar .nav-link {
    color: #506864;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .7rem;
    font-weight: 700;
    padding: 12px 13px;
}

.legal-sidebar .nav-link i {
    width: 18px;
    color: #7ca9a2;
    text-align: center;
}

.legal-sidebar .nav-link:hover {
    color: var(--hospital-green);
    background: var(--hospital-mint-light);
}

.legal-sidebar .nav-link.active {
    color: var(--theme-white);
    background: var(--hospital-green);
    box-shadow: 0 8px 20px rgba(11, 107, 97, .18);
}

.legal-sidebar .nav-link.active i {
    color: var(--theme-white);
}

.legal-help {
    border-top: 1px solid #e8f0ee;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 19px 21px;
}

.legal-help>i {
    color: var(--hospital-coral);
    font-size: 1.15rem;
}

.legal-help>div {
    display: flex;
    flex-direction: column;
}

.legal-help strong {
    color: var(--hospital-ink);
    font-size: .65rem;
}

.legal-help a {
    color: var(--hospital-green);
    font-size: .6rem;
    margin-top: 2px;
}

.legal-document {
    overflow: hidden;
    background: var(--theme-white);
    border: 1px solid var(--hospital-border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(7, 57, 52, .08);
}

.legal-document-header {
    border-bottom: 1px solid #e5efed;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 27px 34px;
}

.legal-document-header>span {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
}

.legal-document-header>div {
    display: flex;
    flex-direction: column;
}

.legal-document-header small {
    color: var(--hospital-green);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.legal-document-header h2 {
    color: var(--hospital-ink);
    font-size: 1.4rem;
    font-weight: 750;
    margin: 3px 0 0;
}

.legal-content {
    color: #50635f;
    font-size: .78rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
    padding: 36px 40px 48px;
}

.legal-content> :first-child {
    margin-top: 0;
}

.legal-content> :last-child {
    margin-bottom: 0;
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 {
    color: var(--hospital-ink);
    font-weight: 750;
    letter-spacing: -.025em;
    line-height: 1.35;
    margin: 1.65em 0 .65em;
}

.legal-content h1 {
    font-size: 1.65rem;
}

.legal-content h2 {
    font-size: 1.3rem;
}

.legal-content h3 {
    font-size: 1.05rem;
}

.legal-content p,
.legal-content ul,
.legal-content ol {
    margin-bottom: 1.1rem;
}

.legal-content ul,
.legal-content ol {
    padding-left: 1.35rem;
}

.legal-content li {
    margin-bottom: .45rem;
}

.legal-content a {
    color: var(--hospital-green);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-content blockquote {
    color: #345650;
    background: var(--hospital-mint-light);
    border-left: 4px solid var(--hospital-green);
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    padding: 17px 20px;
}

.legal-content table {
    width: 100%;
    border-color: var(--hospital-border);
    display: block;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.legal-content th,
.legal-content td {
    border: 1px solid var(--hospital-border);
    padding: 10px 12px;
}

.legal-content th {
    color: var(--hospital-ink);
    background: var(--hospital-mint-light);
}

.legal-empty {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px;
    text-align: center;
}

.legal-empty>span {
    width: 64px;
    height: 64px;
    color: var(--hospital-green);
    background: var(--hospital-mint);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
}

.legal-empty h3 {
    color: var(--hospital-ink);
    font-size: 1rem;
    margin: 17px 0 6px;
}

.legal-empty p {
    max-width: 390px;
    color: var(--hospital-muted);
    font-size: .7rem;
    line-height: 1.7;
    margin: 0;
}

/* Footer */
.hospital-footer {
    color: #b9cfca;
    background: #102d2a;
}

.footer-main {
    padding-top: 70px;
    padding-bottom: 60px;
}

.footer-brand {
    color: var(--theme-white);
    margin-bottom: 21px;
}

.footer-brand:hover {
    color: var(--theme-white);
}

.footer-brand small {
    color: #93b2af;
}

.hospital-footer p {
    max-width: 340px;
    font-size: .78rem;
    line-height: 1.75;
}

.hospital-footer h3 {
    color: var(--theme-white);
    font-size: .8rem;
    font-weight: 750;
    margin-bottom: 20px;
}

.hospital-footer .col-6>a {
    color: #aac3c0;
    display: block;
    font-size: .74rem;
    margin: 12px 0;
}

.hospital-footer a:hover {
    color: var(--theme-white);
}

.footer-social {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.footer-social a {
    width: 34px;
    height: 34px;
    color: #c1d5d2;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .72rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.footer-contact a,
.footer-contact span {
    color: #aac3c0;
    font-size: .74rem;
}

.footer-contact i {
    width: 21px;
    color: #79bbb2;
}

.footer-contact strong {
    color: var(--theme-white);
}

.footer-bottom {
    min-height: 62px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .66rem;
}

.footer-bottom div {
    display: flex;
    gap: 20px;
}

.footer-bottom a {
    color: #8da9a6;
}

@keyframes navBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hospital-navbar button:focus-visible,
.hospital-navbar a:focus-visible {
    outline: 2px solid var(--hospital-coral);
    outline-offset: 2px;
}