.medical-directory {
    --medical-ink: #163a3a;
    --medical-muted: #667c7b;
    --medical-line: #dce9e6;
    --medical-soft: #f3f8f7;
    --medical-green: var(--primary-color, #087a69);
    --medical-deep: #064e46;
    background: #fff;
    color: var(--medical-ink);
    min-height: 70vh;
}

.medical-directory * { box-sizing: border-box; }

.medical-directory-hero {
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.14) 0 9%, transparent 9.5%),
        radial-gradient(circle at 92% 65%, rgba(255,255,255,.08) 0 16%, transparent 16.5%),
        linear-gradient(125deg, var(--medical-deep), var(--medical-green));
    color: #fff;
    overflow: hidden;
    padding: 72px 0 82px;
    position: relative;
}

.medical-directory-hero::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08));
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 52%;
    transform: rotate(-5deg);
}

.medical-directory-hero-grid {
    align-items: center;
    display: grid;
    gap: 72px;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
    position: relative;
    z-index: 1;
}

.medical-breadcrumb {
    align-items: center;
    color: rgba(255,255,255,.68);
    display: flex;
    font-size: 13px;
    font-weight: 700;
    gap: 10px;
    margin-bottom: 34px;
}

.medical-breadcrumb a { color: #fff; text-decoration: none; }
.medical-breadcrumb i { font-size: 9px; }

.medical-eyebrow {
    color: #42e0bd;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .16em;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.medical-directory-hero h1 {
    color: #fff;
    font-size: clamp(40px, 5vw, 66px);
    font-weight: 850;
    letter-spacing: -.045em;
    line-height: 1.04;
    margin: 0 0 22px;
    max-width: 760px;
}

.medical-directory-hero-grid > div:first-child > p {
    color: rgba(255,255,255,.8);
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
    max-width: 690px;
}

.medical-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.medical-directory .medical-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    gap: 9px;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.medical-directory .medical-button:hover { transform: translateY(-2px); }
.medical-directory .medical-button.is-primary { background: #fff; color: var(--medical-deep); }
.medical-directory-content .medical-button.is-primary { background: var(--medical-green); color: #fff; }
.medical-directory .medical-button.is-light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.medical-directory .medical-button.is-outline { background: transparent; border-color: #abc8c1; color: var(--medical-deep); }

.medical-hero-summary {
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0,32,28,.2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.medical-hero-summary > div { padding: 30px; }
.medical-hero-summary > div + div { border-left: 1px solid rgba(255,255,255,.16); }
.medical-hero-summary > div span { align-items: center; background: rgba(255,255,255,.12); border-radius: 10px; display: flex; height: 40px; justify-content: center; margin-bottom: 18px; width: 40px; }
.medical-hero-summary strong, .medical-hero-summary small { display: block; }
.medical-hero-summary strong { color: #fff; font-size: 38px; line-height: 1; margin-bottom: 8px; }
.medical-hero-summary small { color: rgba(255,255,255,.74); font-size: 12px; font-weight: 750; }
.medical-hero-summary > p { border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.76); font-size: 12px; grid-column: 1 / -1; line-height: 1.6; margin: 0; padding: 20px 28px; }
.medical-hero-summary > p i { margin-right: 7px; }

.medical-directory-content { background: linear-gradient(#f7faf9 0, #fff 270px); padding: 80px 0 90px; }

.medical-section-heading { align-items: end; display: flex; gap: 50px; justify-content: space-between; margin-bottom: 32px; }
.medical-section-heading h2 { color: var(--medical-ink); font-size: clamp(30px, 3vw, 43px); font-weight: 850; letter-spacing: -.035em; margin: 0; }
.medical-section-heading > p { color: var(--medical-muted); line-height: 1.7; margin: 0; max-width: 520px; }

.medical-filter-bar, .expert-filter-panel {
    align-items: center;
    background: #fff;
    border: 1px solid var(--medical-line);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(22,58,58,.07);
    display: flex;
    gap: 18px;
    margin-bottom: 34px;
    padding: 14px;
}

.medical-search-box { align-items: center; display: flex; flex: 1; min-width: 260px; position: relative; }
.medical-search-box i { color: #78908d; left: 16px; position: absolute; }
.medical-search-box input { background: var(--medical-soft); border: 1px solid transparent; border-radius: 8px; color: var(--medical-ink); height: 50px; outline: none; padding: 0 16px 0 45px; width: 100%; }
.medical-search-box input:focus { background: #fff; border-color: var(--medical-green); box-shadow: 0 0 0 3px rgba(8,122,105,.1); }

.medical-filter-tabs { display: flex; gap: 6px; }
.medical-filter-tabs button { background: transparent; border: 0; border-radius: 8px; color: #607573; font-size: 13px; font-weight: 800; min-height: 46px; padding: 0 16px; }
.medical-filter-tabs button span { background: #eaf2f0; border-radius: 999px; font-size: 10px; margin-left: 5px; padding: 3px 6px; }
.medical-filter-tabs button.is-active { background: var(--medical-deep); color: #fff; }
.medical-filter-tabs button.is-active span { background: rgba(255,255,255,.16); }

.medical-state { align-items: center; background: #fff; border: 1px dashed #bdd2cd; border-radius: 14px; color: var(--medical-muted); display: flex; flex-direction: column; gap: 9px; justify-content: center; min-height: 260px; padding: 40px; text-align: center; }
.medical-state > i { color: var(--medical-green); font-size: 30px; }
.medical-state strong { color: var(--medical-ink); font-size: 18px; }
.medical-state.is-error > i { color: #c53b3b; }

.medical-price-section + .medical-price-section { margin-top: 64px; }
.medical-price-section-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 18px; }
.medical-price-section-title > div { align-items: center; display: flex; gap: 13px; }
.medical-price-section-title > div > span { align-items: center; background: var(--medical-green); border-radius: 9px; color: #fff; display: flex; font-size: 12px; font-weight: 900; height: 40px; justify-content: center; width: 40px; }
.medical-price-section-title h3 { color: var(--medical-ink); font-size: 22px; font-weight: 850; margin: 0 0 3px; }
.medical-price-section-title p, .medical-price-section-title > small { color: var(--medical-muted); font-size: 12px; margin: 0; }

.medical-price-table-wrap { background: #fff; border: 1px solid var(--medical-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(22,58,58,.06); overflow: hidden; }
.medical-price-table { border-collapse: collapse; width: 100%; }
.medical-price-table th { background: #edf5f3; color: #526c68; font-size: 11px; letter-spacing: .08em; padding: 15px 20px; text-transform: uppercase; }
.medical-price-table td { border-top: 1px solid #edf2f1; color: var(--medical-ink); padding: 18px 20px; vertical-align: middle; }
.medical-price-table tbody tr { transition: background .2s ease; }
.medical-price-table tbody tr:hover { background: #f9fbfa; }
.medical-price-table code, .medical-package-card code { background: #edf5f3; border-radius: 5px; color: var(--medical-deep); font-size: 11px; font-weight: 800; padding: 5px 8px; }
.medical-price-table td strong { display: block; font-size: 15px; }
.medical-price-table td small { color: var(--medical-muted); display: block; font-size: 12px; line-height: 1.55; margin-top: 5px; max-width: 780px; }
.medical-price-value { color: var(--medical-deep) !important; font-size: 16px; font-weight: 900; text-align: right; white-space: nowrap; }
.medical-book-link { align-items: center; color: var(--medical-green); display: inline-flex; font-size: 12px; font-weight: 850; gap: 7px; text-decoration: none; white-space: nowrap; }

.medical-package-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.medical-package-card { background: #fff; border: 1px solid var(--medical-line); border-radius: 14px; box-shadow: 0 12px 38px rgba(22,58,58,.06); display: flex; flex-direction: column; min-height: 100%; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.medical-package-card:hover { border-color: #9fc7be; box-shadow: 0 20px 50px rgba(22,58,58,.1); transform: translateY(-4px); }
.medical-package-card > header { align-items: flex-start; display: flex; justify-content: space-between; padding: 24px 24px 15px; }
.medical-package-card > header small { color: var(--medical-green); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.medical-package-card > header h3 { color: var(--medical-ink); font-size: 19px; font-weight: 850; line-height: 1.35; margin: 7px 0 10px; }
.medical-package-card > header > span { align-items: center; background: #e9f5f2; border-radius: 12px; color: var(--medical-green); display: flex; flex: 0 0 48px; font-size: 20px; height: 48px; justify-content: center; }
.medical-package-card > p { color: var(--medical-muted); font-size: 13px; line-height: 1.65; margin: 0; min-height: 65px; padding: 0 24px 18px; }
.medical-package-price { align-items: end; background: var(--medical-soft); display: flex; justify-content: space-between; margin: 0 24px 18px; padding: 13px 15px; }
.medical-package-price span { color: var(--medical-muted); font-size: 11px; font-weight: 750; }
.medical-package-price strong { color: var(--medical-deep); font-size: 20px; }
.medical-package-card details { border-top: 1px solid var(--medical-line); margin: 0 24px; }
.medical-package-card summary { color: var(--medical-ink); cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; padding: 15px 0; }
.medical-package-card summary i { float: right; transition: transform .2s ease; }
.medical-package-card details[open] summary i { transform: rotate(180deg); }
.medical-package-card ul { list-style: none; margin: 0; max-height: 230px; overflow: auto; padding: 0 0 14px; }
.medical-package-card li { border-top: 1px dashed #e3ecea; display: flex; flex-direction: column; gap: 3px; padding: 9px 0; }
.medical-package-card li span { color: var(--medical-ink); font-size: 12px; }
.medical-package-card li span i { color: var(--medical-green); font-size: 9px; margin-right: 7px; }
.medical-package-card li small { color: var(--medical-muted); font-size: 10px; padding-left: 17px; }
.medical-package-card > footer { margin-top: auto; padding: 20px 24px 24px; }
.medical-package-card > footer a { align-items: center; background: var(--medical-deep); border-radius: 8px; color: #fff; display: flex; font-size: 13px; font-weight: 850; gap: 8px; justify-content: center; min-height: 46px; text-decoration: none; }

.medical-directory-cta { align-items: center; background: #eaf5f2; border: 1px solid #cfe3de; border-radius: 16px; display: flex; gap: 28px; justify-content: space-between; margin-top: 74px; padding: 28px 32px; }
.medical-directory-cta > div { align-items: center; display: flex; gap: 16px; }
.medical-directory-cta > div:first-child > span { align-items: center; background: #fff; border-radius: 12px; color: var(--medical-green); display: flex; flex: 0 0 52px; font-size: 20px; height: 52px; justify-content: center; }
.medical-directory-cta h2 { color: var(--medical-ink); font-size: 20px; font-weight: 850; margin: 0 0 5px; }
.medical-directory-cta p { color: var(--medical-muted); font-size: 13px; margin: 0; }

.expert-summary { grid-template-columns: repeat(3, 1fr); }
.expert-summary > div { padding: 26px 20px; }
.expert-summary > div + div { border-left: 1px solid rgba(255,255,255,.16); }
.expert-summary strong { font-size: 32px; }

.expert-filter-panel { display: grid; grid-template-columns: minmax(280px, 1fr) 230px 230px auto; }
.expert-filter-panel > label:not(.medical-search-box) { display: flex; flex-direction: column; gap: 4px; }
.expert-filter-panel > label > span { color: #718481; font-size: 9px; font-weight: 900; letter-spacing: .08em; padding-left: 2px; text-transform: uppercase; }
.expert-filter-panel select { background: var(--medical-soft); border: 1px solid transparent; border-radius: 8px; color: var(--medical-ink); height: 50px; outline: none; padding: 0 36px 0 13px; }
.expert-filter-panel select:focus { background: #fff; border-color: var(--medical-green); box-shadow: 0 0 0 3px rgba(8,122,105,.1); }
.expert-clear-filter { align-self: end; background: transparent; border: 0; color: #8b5757; font-size: 11px; font-weight: 800; height: 50px; padding: 0 10px; }

.expert-result-summary { align-items: center; color: var(--medical-muted); display: flex; font-size: 13px; justify-content: space-between; margin: 0 2px 22px; }
.expert-result-summary strong { color: var(--medical-ink); }
.expert-result-summary a { color: var(--medical-green); font-weight: 800; text-decoration: none; }

.expert-card-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.expert-card { background: #fff; border: 1px solid var(--medical-line); border-radius: 15px; box-shadow: 0 12px 38px rgba(22,58,58,.06); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.expert-card:hover { border-color: #9fc7be; box-shadow: 0 22px 55px rgba(22,58,58,.11); transform: translateY(-4px); }
.expert-card-top { align-items: flex-start; background: linear-gradient(145deg, #edf7f4, #f9fbfa); display: flex; justify-content: space-between; min-height: 128px; padding: 22px 22px 0; }
.expert-avatar { align-items: center; background: linear-gradient(145deg, var(--medical-green), var(--medical-deep)); border: 5px solid #fff; border-radius: 50%; box-shadow: 0 8px 20px rgba(6,78,70,.18); color: #fff; display: flex; height: 96px; justify-content: center; position: relative; width: 96px; }
.expert-avatar span { font-size: 26px; font-weight: 850; letter-spacing: -.04em; }
.expert-avatar i { bottom: 5px; font-size: 12px; opacity: .7; position: absolute; right: 9px; }
.expert-availability { align-items: center; background: #fff; border-radius: 999px; color: #52736d; display: flex; font-size: 9px; font-weight: 850; gap: 6px; padding: 6px 9px; text-transform: uppercase; }
.expert-availability span { background: #22ad72; border-radius: 50%; box-shadow: 0 0 0 3px rgba(34,173,114,.12); height: 7px; width: 7px; }
.expert-card-body { padding: 20px 24px 16px; }
.expert-card-body > small { color: var(--medical-green); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.expert-card-body h2 { color: var(--medical-ink); font-size: 21px; font-weight: 850; line-height: 1.3; margin: 6px 0 9px; }
.expert-card-body > code { background: #edf5f3; border-radius: 4px; color: var(--medical-deep); font-size: 10px; padding: 4px 7px; }
.expert-card-body dl { border-top: 1px solid var(--medical-line); margin: 20px 0 0; padding-top: 10px; }
.expert-card-body dl div { align-items: center; display: grid; gap: 12px; grid-template-columns: 110px minmax(0, 1fr); padding: 6px 0; }
.expert-card-body dt { color: #728683; font-size: 10px; font-weight: 750; }
.expert-card-body dt i { color: var(--medical-green); margin-right: 7px; width: 12px; }
.expert-card-body dd { color: var(--medical-ink); font-size: 11px; font-weight: 750; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expert-contact { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.expert-contact a { color: var(--medical-muted); font-size: 11px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.expert-contact i { color: var(--medical-green); margin-right: 7px; width: 12px; }
.expert-card > footer { margin-top: auto; padding: 0 24px 24px; }
.expert-card > footer a { align-items: center; border: 1px solid #a8c9c1; border-radius: 8px; color: var(--medical-deep); display: flex; font-size: 13px; font-weight: 850; gap: 8px; justify-content: center; min-height: 46px; text-decoration: none; transition: background .2s ease, color .2s ease; }
.expert-card > footer a:hover { background: var(--medical-deep); color: #fff; }

@media (max-width: 1199px) {
    .medical-directory-hero-grid { gap: 40px; grid-template-columns: minmax(0, 1fr) 390px; }
    .medical-package-grid, .expert-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .expert-filter-panel { grid-template-columns: minmax(260px, 1fr) 210px 210px; }
    .expert-clear-filter { grid-column: 1 / -1; height: 30px; justify-self: end; }
}

@media (max-width: 899px) {
    .medical-directory-hero { padding: 50px 0 60px; }
    .medical-directory-hero-grid { grid-template-columns: 1fr; }
    .medical-hero-summary { max-width: 650px; }
    .medical-directory-content { padding: 60px 0 70px; }
    .medical-section-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
    .medical-filter-bar { align-items: stretch; flex-direction: column; }
    .medical-filter-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
    .expert-filter-panel { grid-template-columns: 1fr 1fr; }
    .expert-filter-panel .medical-search-box { grid-column: 1 / -1; }
    .medical-directory-cta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 639px) {
    .medical-directory-hero h1 { font-size: 39px; }
    .medical-directory-hero-grid > div:first-child > p { font-size: 15px; }
    .medical-hero-summary, .expert-summary { grid-template-columns: 1fr; }
    .medical-hero-summary > div + div, .expert-summary > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
    .medical-hero-summary > p { grid-column: auto; }
    .medical-filter-tabs button { padding: 0 7px; }
    .medical-package-grid, .expert-card-grid { grid-template-columns: 1fr; }
    .medical-price-section-title { align-items: flex-start; }
    .medical-price-section-title > small { display: none; }
    .medical-price-table thead { display: none; }
    .medical-price-table, .medical-price-table tbody, .medical-price-table tr, .medical-price-table td { display: block; width: 100%; }
    .medical-price-table tr { padding: 15px 17px; }
    .medical-price-table td { border: 0; padding: 6px 0; }
    .medical-price-table tr + tr { border-top: 1px solid var(--medical-line); }
    .medical-price-table td::before { color: #7b8e8b; content: attr(data-label); display: block; font-size: 9px; font-weight: 850; letter-spacing: .08em; margin-bottom: 3px; text-transform: uppercase; }
    .medical-price-value { text-align: left; }
    .medical-book-link { margin-top: 5px; }
    .expert-filter-panel { grid-template-columns: 1fr; }
    .expert-filter-panel .medical-search-box { grid-column: auto; }
    .expert-result-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
    .medical-directory-cta { padding: 22px; }
    .medical-directory-cta > div { align-items: flex-start; flex-direction: column; width: 100%; }
    .medical-directory-cta > div:last-child { gap: 9px; }
    .medical-directory-cta .medical-button { width: 100%; }
}