/* =====================================================
   ASAR CARE – Doctors & Healthcare Providers Archive
   Matches Figma: DoctorsHospitals page design
   ===================================================== */

/* Fonts are loaded globally via functions.php (Satoshi + DM Serif Display + Inter + Poppins) */

/* ── CSS Variables ───────────────────────────────── */
:root {
    --dh-primary:       #004750;
    --dh-gold:          #D5992D;
    --dh-dark:          #031B2B;
    --dh-bg:            #ffffff;
    --dh-cream:         #FFF8F0;
    --dh-text:          #1a1a1a;
    --dh-muted:         #828282;
    --dh-border:        rgba(0, 71, 80, 0.2);
    --dh-card-radius:   20px;
    --dh-pill-radius:   100px;
    --dh-transition:    0.25s ease;
    --dh-shadow:        0 4px 20px rgba(3, 27, 43, 0.10);
    --dh-shadow-hover:  0 8px 36px rgba(3, 27, 43, 0.18);
}

/* ── Reset ───────────────────────────────────────── */
.dh-main * { box-sizing: border-box; }
.dh-main a { text-decoration: none; color: inherit; }

/* Stretch Elementor containers to full width on the Doctors & Hospitals V2 page template */
.asar-dh-v2-page .elementor-element.e-con {
    width: 100%;
    max-width: 100%;
/*     padding: 0;
    margin: 0; */
}
.asar-dh-v2-page .elementor-element.e-con > .e-con-inner {
    max-width: 100%;
    width: 100%;
/*     padding: 0;
    margin: 0; */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1a. TOP HERO BANNER — Exact Figma Match
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Outer wrapper */
.dh-top-hero {
    position: relative;
    width: 90%;
    max-width: 1794px;
    height: 1022px; /* Exact Figma height / Home Page Hero aspect ratio */
    margin: 32px auto 48px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    display: block;
}

/* ── Image Zone ── */
.dh-hero-image-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: transparent;
}

.dh-hero-illustration {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Prevent aspect-ratio cropping to ensure 100% pixel-perfect alignment of the cutout */
    display: block;
}

/* Hide the fade gradient */
.dh-hero-image-fade {
    display: none;
}

/* ── Text Zone (Contains title, subtitle, scroll-btn inside the cutout) ── */
.dh-hero-text-zone {
    position: absolute;
    bottom: 40px; /* Align text block bottom relative to the cutout */
    left: 78px; /* Align text block exactly with the Figma left margin */
    background: transparent;
    border-radius: 0;
    padding: 0;
    width: 75.14%; /* Scales in perfect sync with the image cutout */
    max-width: 1348px; /* Exact Figma text block width */
    z-index: 2;
    box-shadow: none;
}

.dh-hero-text-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* HERO TITLE — Roca One / DM Serif Display */
.dh-top-hero-title {
    font-family: var(--font-heading), 'DM Serif Display', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(2rem, 3vw, 3.75rem); /* Reduced to max 60px to keep text inside the cutout */
    color: #031b2b;
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

/* Gold accent — "Doctors & Hospitals" */
.dh-top-hero-title .dh-accent {
    color: #d5992d;
    font-style: normal;
}

/* Hero Subtitle — Satoshi Medium */
.dh-top-hero-subtitle {
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.375rem); /* Reduced to max 22px to keep text inside the cutout */
    font-weight: 500;
    color: #555555;
    max-width: 1080px;
    line-height: 1.55;
    margin: 0;
}

/* SCROLL BUTTON */
.dh-hero-scroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1.5px solid #031b2b;
    color: #031b2b;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration: none;
    flex-shrink: 0;
    margin-top: 12px;
}

.dh-hero-scroll-btn svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.dh-hero-scroll-btn:hover {
    background: #031b2b;
    color: #ffffff;
    transform: translateY(4px);
}

/* RESPONSIVE */
@media (max-width: 1400px) {
    .dh-top-hero {
        margin-left: 24px;
        margin-right: 24px;
        max-width: calc(100% - 48px);
    }
    .dh-hero-text-zone {
        max-width: 1040px;
        padding: 0;
        left: 64px;
        bottom: 20px;
    }
}

@media (max-width: 1024px) {
    .dh-top-hero {
        height: 560px;
        border-radius: 32px;
    }
    .dh-hero-text-zone {
        max-width: 880px;
        padding: 0;
        left: 48px;
        bottom: 16px;
        border-radius: 0;
    }
}

@media (max-width: 900px) {
    .dh-top-hero {
        height: auto;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 0;
        margin: 0;
        max-width: 100%;
        overflow: visible;
    }
    .dh-hero-image-zone {
        position: relative;
        height: 360px;
        width: 100%;
        border-radius: 24px;
        overflow: hidden;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .dh-hero-image-zone .dh-hero-illustration {
        object-position: center top;
    }
    .dh-hero-text-zone {
        position: relative;
        max-width: 100%;
        padding: 32px 24px;
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
    }
    .dh-top-hero-title {
        font-size: 2.2rem;
    }
    .dh-top-hero-subtitle {
        font-size: 1rem;
    }
    .dh-hero-scroll-btn {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 600px) {
    .dh-hero-image-zone {
        height: 260px;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1b. BROWSE HEADER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-browse-header-section {
    background: var(--dh-bg);
    padding: 80px 24px 40px;
    text-align: center;
}

.dh-browse-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.dh-browse-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 700;
    color: var(--dh-primary);
    line-height: 1.15;
    margin: 0;
}

.dh-browse-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--dh-text);
    opacity: 0.75;
    max-width: 900px;
    margin: 0;
    line-height: 1.6;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. FILTER BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-filter-section {
    background: transparent;
    padding: 24px 0;
    position: relative;
    z-index: 10;
    border-bottom: none;
}

.dh-filter-inner {
    width: 90%;
    max-width: 1794px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 0 48px;
}

/* Filter Pill */
.dh-filter-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dh-cream);
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    border-radius: 100px;
    padding: 12px 24px;
    height: 52px;
    flex-shrink: 0;
    position: relative;
}

.dh-filter-pill-icon { color: var(--dh-text); display: flex; }
.dh-filter-pill-label { font-weight: 700; font-size: 1rem; white-space: nowrap; }

.dh-filter-dropdown-wrap { position: relative; }

.dh-filter-dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--dh-text);
    padding: 0;
    font-weight: 400;
}

.dh-chevron { transition: transform var(--dh-transition); }
.dh-filter-dropdown-trigger[aria-expanded="true"] .dh-chevron {
    transform: rotate(180deg);
}

.dh-filter-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: white;
    border: 1px solid rgba(0,71,80,0.15);
    border-radius: 16px;
    box-shadow: var(--dh-shadow-hover);
    min-width: 220px;
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--dh-transition), transform var(--dh-transition);
    z-index: 200;
}

.dh-filter-dropdown.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.dh-filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--dh-transition);
}

.dh-filter-option:hover { background: var(--dh-cream); }
.dh-filter-option.is-active { background: rgba(0,71,80,0.08); font-weight: 600; color: var(--dh-primary); }
.dh-filter-count { color: var(--dh-muted); font-size: 0.8rem; }

/* Search Bar */
.dh-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dh-cream);
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    border-radius: 100px;
    padding: 12px 24px;
    height: 52px;
}

.dh-search-icon { color: var(--dh-text); opacity: 0.5; flex-shrink: 0; }

.dh-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: var(--dh-text);
    outline: none;
}

.dh-search-input::placeholder { opacity: 0.5; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. TABS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-tabs-section {
    width: 90%;
    max-width: 1794px;
    margin: 0 auto;
    background: var(--dh-cream);
    padding: 32px 48px 16px;
    border-radius: 40px 40px 0 0;
    border-bottom: none;
}

.dh-tabs-inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.dh-tabs {
    display: flex;
    gap: 16px;
    align-items: center;
}

.dh-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    color: #828282;
    background: #ffffff;
    border-radius: 16px;
    transition: all var(--dh-transition);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.dh-tab:hover {
    color: var(--dh-text);
    background: #f5f5f5;
}

.dh-tab.is-active {
    color: var(--dh-gold);
    background: transparent;
    border-bottom: none;
}

.dh-trusted-strip {
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    color: var(--dh-text);
    white-space: nowrap;
    opacity: 0.8;
}

/* ── Specialty Filters ── */
.dh-specialty-filter-section {
    width: 90%;
    max-width: 1794px;
    margin: 0 auto;
    background: var(--dh-cream);
    padding: 8px 48px 24px;
}

.dh-specialty-filter-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dh-spec-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border: 1.5px solid #d4d0cb;
    border-radius: 20px;
    background: #ffffff;
    color: #555555;
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dh-transition);
    white-space: nowrap;
    text-decoration: none;
}

.dh-spec-pill:hover {
    border-color: var(--dh-primary);
    color: var(--dh-primary);
}

.dh-spec-pill.is-active {
    background-color: var(--dh-primary);
    border-color: var(--dh-primary);
    color: #ffffff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. CARDS GRID
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-grid-section {
    width: 90%;
    max-width: 1794px;
    margin: 0 auto 80px;
    background: var(--dh-cream);
    padding: 16px 48px 48px;
    border-radius: 0 0 40px 40px;
}

.dh-grid-inner {
    width: 100%;
    margin: 0 auto;
}

.dh-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: stretch;
}

.dh-grid-5cols {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1200px) {
    .dh-grid-5cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dh-grid-5cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .dh-grid-5cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── Doctor Card ─────────────────────────────── */
.dh-doctor-card {
    background: #ffffff;
    border-radius: var(--dh-card-radius);
    box-shadow: var(--dh-shadow);
    overflow: hidden;
    transition: box-shadow var(--dh-transition), transform var(--dh-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

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

/* Card Photo area */
.dh-card-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f4f5 0%, #c8dfe2 100%);
    flex-shrink: 0;
}

.dh-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

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

.dh-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,71,80,0.06) 0%, rgba(0,71,80,0.12) 100%);
}

/* View Profile button — bottom of card */
.dh-card-view-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent;
    color: var(--dh-primary);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Satoshi', 'Inter', sans-serif;
    padding: 12px 16px;
    border-radius: 12px;
    border: 2px solid var(--dh-primary);
    transition: background var(--dh-transition), color var(--dh-transition);
    white-space: nowrap;
    margin-top: auto; /* Push to bottom */
}

.dh-card-view-btn:hover {
    background: var(--dh-primary);
    color: #ffffff;
}

/* Featured badge */
.dh-card-featured-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,71,80,0.9);
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 2;
}

/* Card Body */
.dh-card-body {
    padding: 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    justify-content: space-between;
}

.dh-card-header { display: flex; flex-direction: column; gap: 4px; }

.dh-card-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dh-text);
    margin: 0;
    line-height: 1.3;
}

.dh-card-name a { color: inherit; }
.dh-card-name a:hover { color: var(--dh-primary); }

.dh-card-specialty {
    font-size: 0.95rem;
    color: var(--dh-muted);
    margin: 0;
    line-height: 1.4;
}

/* Meta Items */
.dh-card-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dh-card-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--dh-text);
}

.dh-meta-icon {
    flex-shrink: 0;
    color: var(--dh-primary);
    opacity: 0.7;
}

/* Pills */
.dh-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.dh-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 71, 80, 0.08);
    border: 1px solid var(--dh-primary);
    color: var(--dh-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--dh-pill-radius);
    line-height: 1;
    transition: background var(--dh-transition);
}

.dh-pill:hover { background: rgba(0,71,80,0.14); }

.dh-pill-more {
    background: rgba(0,71,80,0.05);
    border-color: rgba(0,71,80,0.3);
    color: var(--dh-muted);
}

/* ── Explore Button ──────────────────────────── */
.dh-explore-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.dh-explore-all-btn {
    display: inline-flex;
    align-items: center;
    background: var(--dh-primary);
    color: white;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 16px 36px;
    border-radius: 16px;
    transition: background var(--dh-transition), transform var(--dh-transition);
    box-shadow: 0 4px 16px rgba(0,71,80,0.25);
    cursor: pointer;
}

.dh-explore-all-btn:hover {
    background: #002d33;
    transform: translateY(-2px);
    color: white;
}

/* ── CTA Opinion Card ─────────────────────────── */
.dh-cta-card {
    background: linear-gradient(135deg, var(--dh-cream) 0%, #fff0d4 100%);
    border: 2px dashed rgba(213, 153, 45, 0.35);
    overflow: visible;
}

.dh-cta-card-inner {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: center;
}

.dh-cta-card-question {
    font-size: 5rem;
    font-weight: 900;
    color: rgba(0,71,80,0.12);
    line-height: 1;
    font-family: 'Satoshi', 'Inter', sans-serif;
}

.dh-cta-card-content { display: flex; flex-direction: column; gap: 10px; }

.dh-cta-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dh-text);
    margin: 0;
    line-height: 1.35;
}

.dh-cta-card-text {
    font-size: 0.9rem;
    color: var(--dh-muted);
    margin: 0;
    line-height: 1.55;
}

.dh-cta-card-btn {
    display: inline-flex;
    align-items: center;
    background: var(--dh-gold);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 12px;
    transition: background var(--dh-transition), transform var(--dh-transition);
    width: fit-content;
    box-shadow: 0 4px 12px rgba(213,153,45,0.35);
}

.dh-cta-card-btn:hover { background: #c0871f; transform: translateY(-2px); color: white; }

/* ── Hospital / Diagnostic Card Variants ─────── */
.dh-card-link-btn {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    color: var(--dh-primary);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dh-transition);
}

.dh-card-link-btn:hover { border-bottom-color: var(--dh-primary); color: var(--dh-primary); }

/* ── No Results ───────────────────────────────── */
.dh-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 24px;
    color: var(--dh-muted);
}

.dh-no-results-icon { font-size: 3rem; margin-bottom: 16px; }
.dh-no-results h3 { font-size: 1.5rem; color: var(--dh-text); margin-bottom: 8px; }
.dh-no-results a { color: var(--dh-primary); text-decoration: underline; }

/* ── Pagination ──────────────────────────────── */
.dh-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.dh-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dh-cream);
    color: var(--dh-text);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid rgba(0,71,80,0.12);
    transition: background var(--dh-transition), color var(--dh-transition);
}

.dh-pagination .page-numbers.current,
.dh-pagination .page-numbers:hover {
    background: var(--dh-primary);
    color: white;
    border-color: var(--dh-primary);
}

.dh-pagination .page-numbers.prev,
.dh-pagination .page-numbers.next { width: auto; padding: 0 20px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. HOW WE SELECT DOCTORS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── How We Select Section ── */
.dh-how-section {
    background: #ffffff; /* White background to match Figma */
    padding: 100px 24px;
}

.dh-how-inner {
    width: 90%;
    max-width: 1794px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align bottom edges to match Figma items-end */
    gap: 80px; /* Responsive fallback */
}

.dh-how-left {
    flex: 1;
    max-width: 847px;
    display: flex;
    flex-direction: column;
    gap: 75px; /* Exact Figma gap between badge and list */
}

.dh-how-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(213, 153, 45, 0.1);
    border: 1px solid #d5992d;
    color: #d5992d;
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: clamp(1.1rem, 1.3vw, 1.4375rem); /* 23px */
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 32px;
    width: fit-content;
    white-space: nowrap;
}

.dh-how-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px; /* Exact Figma gap between list items */
}

.dh-how-item {
    display: block;
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: clamp(1.5rem, 2.3vw, 2.75rem); /* Clamped up to 44px */
    font-weight: 700;
    color: #000000;
    padding-bottom: 32px;
    border-bottom: 1.5px solid #d4d0cb;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.dh-how-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dh-how-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dh-how-image {
    width: 717px; /* Exact Figma width */
    height: 554px; /* Exact Figma height */
    border-radius: 32px;
    object-fit: cover;
    box-shadow: none; /* Removed for clean look */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. DARK BANNER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-banner {
    background: #ffffff; /* White page background around card */
    padding: 80px 24px;
}

.dh-banner-inner {
    width: 90%;
    max-width: 1554px;
    margin: 0 auto;
    height: 266px; /* Exact Figma height */
    position: relative;
    background: transparent;
}

.dh-banner-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 71, 80, 0.80), rgba(0, 71, 80, 0.80)), url('../images/banner-not-sure-bg.png') no-repeat center center / 100% 100%;
    z-index: 0;
    
    /* CSS Mask to clip background to the exact cutout and rounded shape of the PNG */
    -webkit-mask: url('../images/banner-not-sure-bg.png') no-repeat center center / 100% 100%;
    mask: url('../images/banner-not-sure-bg.png') no-repeat center center / 100% 100%;
}

.dh-banner-text {
    position: absolute;
    left: 92px;
    top: 70px; /* Aligned vertically to match Figma mt-[75px] */
    max-width: calc(100% - 184px);
    z-index: 1;
}

.dh-banner-heading {
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 3.25rem); /* Clamped up to 52px to match Figma */
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px; /* Figma gap: 8px */
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap; /* Single line to match Figma */
}

.dh-banner-sub {
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.75rem); /* Clamped up to 28px to match Figma */
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 820px; /* Exact Figma subtitle width */
    line-height: 1.45;
}

.dh-banner-cta {
    position: absolute;
    right: -6px; /* Shifted further right by 30px to align inside the cutout white space */
    bottom: 20px; /* Lowered to fit centered inside the white space cutout (Figma mt-[194px]) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff8f0; /* Cream background to match Figma button */
    color: #004750; /* Brand teal text */
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.3vw, 1.5rem); /* Clamped up to 24px to match Figma */
    padding: 14px 28px;
    border-radius: 16px;
    transition: all var(--dh-transition);
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    z-index: 1;
}

.dh-banner-cta:hover {
    background: #ffffff;
    color: #004750;
    transform: translateY(-2px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. TESTIMONIALS SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-testimonials-section {
    background: var(--dh-bg);
    padding: 100px 24px;
}

.dh-testimonials-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.dh-testimonials-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.dh-testimonials-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(3, 27, 43, 0.06);
    border: 1px solid var(--dh-dark);
    color: var(--dh-dark);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 100px;
    width: fit-content;
}

.dh-testimonials-title {
    font-family: 'Roca One', 'Poppins', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--dh-dark);
    margin: 0;
    line-height: 1.15;
}

.dh-testimonials-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--dh-muted);
    max-width: 800px;
    line-height: 1.6;
    margin: 0;
}

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

.dh-testimonial-card {
    background: var(--dh-cream);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--dh-shadow);
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform var(--dh-transition), box-shadow var(--dh-transition);
}

.dh-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dh-shadow-hover);
}

.dh-testimonial-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.dh-testimonial-user {
    display: flex;
    gap: 16px;
    align-items: center;
}

.dh-testimonial-avatar {
    width: 73px;
    height: 73px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.dh-testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dh-testimonial-country {
    font-size: 0.9rem;
    color: var(--dh-muted);
    font-weight: 500;
}

.dh-testimonial-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dh-dark);
    margin: 0;
}

.dh-testimonial-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dh-testimonial-stars {
    display: flex;
    gap: 2px;
}

.dh-star {
    font-size: 1.25rem;
    color: #e0e0e0;
}

.dh-star.filled {
    color: var(--dh-gold);
}

.dh-rating-num {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dh-dark);
}

.dh-testimonial-text {
    font-size: 1.15rem;
    color: var(--dh-text);
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. TREATMENT JOURNEY SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-journey-section {
    background: #ffffff;
    padding: 80px 24px;
}

.dh-journey-inner {
    width: 90%;
    max-width: 1792px;
    margin: 0 auto;
    display: flex;
    gap: 32px; /* Figma: left ends at 576, right starts at 608 = 32px gap */
    align-items: stretch;
    height: 467px;
}

.dh-journey-left {
    flex: 0 0 32.15%; /* 576 / 1792 */
    overflow: hidden;
    border-radius: 32px;
}

.dh-journey-image {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    object-fit: cover;
    display: block;
}

.dh-journey-right {
    flex: 1; /* Takes remaining space */
    background: linear-gradient(135deg, #004750 0%, #031b2b 100%);
    position: relative;
    padding: 58px 66px;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.dh-journey-title {
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 4rem); /* Up to 64px */
    color: #ffffff;
    line-height: 1.25;
    margin: 0;
    max-width: 903px; /* Exact Figma w-[903px] */
}

.dh-journey-btn {
    position: absolute;
    right: 66px;
    bottom: 30px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-body), 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    padding: 0;
    border: none;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.dh-journey-btn svg {
    width: 73px;
    height: 73px;
    min-width: 73px;
    background: #d5992d;
    color: #ffffff;
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all var(--dh-transition);
}

.dh-journey-btn:hover svg {
    background: #ffffff;
    color: #004750;
    transform: translateX(4px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. FAQ ACCORDION SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.dh-faq-section {
    background: var(--dh-bg);
    padding: 0 24px 120px;
}

.dh-faq-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.dh-faq-left {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: sticky;
    top: 100px;
}

.dh-faq-headings {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dh-faq-main-title {
    font-family: 'Roca One', 'Poppins', serif;
    font-size: clamp(2.2rem, 4.5vw, 4.2rem);
    color: var(--dh-gold);
    margin: 0;
    line-height: 1.1;
}

.dh-faq-main-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    color: var(--dh-text);
    line-height: 1.6;
    margin: 0;
}

.dh-faq-still-box {
    background: var(--dh-cream);
    border-radius: 32px;
    padding: 40px;
    border: 2px dashed rgba(213, 153, 45, 0.35);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    box-shadow: var(--dh-shadow);
}

.dh-faq-still-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.dh-faq-still-content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dh-dark);
    margin: 0;
}

.dh-faq-still-content p {
    font-size: 1rem;
    color: var(--dh-text);
    opacity: 0.8;
    line-height: 1.5;
    margin: 0;
}

.dh-faq-still-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--dh-gold);
    color: white;
    transition: all var(--dh-transition);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(213,153,45,0.3);
}

.dh-faq-still-btn:hover {
    background: #c0871f;
    transform: scale(1.05);
    color: white;
}

.dh-faq-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dh-faq-item {
    background: #FFF8F0;
    border: 1px solid rgba(3, 27, 43, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--dh-shadow);
    transition: box-shadow var(--dh-transition);
}

.dh-faq-item:hover {
    box-shadow: var(--dh-shadow-hover);
}

.dh-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border: none;
    background: none;
    text-align: left;
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dh-dark);
    cursor: pointer;
    transition: color var(--dh-transition);
    gap: 16px;
}

.dh-faq-trigger:hover {
    color: var(--dh-gold);
}

.dh-faq-trigger[aria-expanded="true"] {
    color: var(--dh-gold);
}

.dh-faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dh-transition);
    color: var(--dh-dark);
}

.dh-faq-trigger[aria-expanded="true"] .dh-faq-icon {
    transform: rotate(180deg);
}

.dh-faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dh-faq-content {
    padding: 0 32px 28px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--dh-text);
    line-height: 1.6;
}

.dh-faq-content p { margin: 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media ( max-width: 1200px ) {
    .dh-grid { grid-template-columns: repeat(3, 1fr); }
    .dh-how-inner { gap: 48px; }
    .dh-how-image { width: 100%; max-width: 520px; height: auto; aspect-ratio: 717 / 554; }
    .dh-testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .dh-journey-inner { gap: 32px; }
    .dh-faq-inner { gap: 40px; }
}

@media ( max-width: 900px ) {
    .dh-top-hero { min-height: 600px; padding: 60px 24px; }
    .dh-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .dh-how-inner { flex-direction: column; align-items: stretch; gap: 48px; }
    .dh-how-right { order: -1; display: flex; justify-content: center; }
    .dh-how-image { width: 100%; max-width: 560px; height: auto; aspect-ratio: 717 / 554; }
    .dh-filter-inner { flex-wrap: wrap; }
    .dh-search-bar { flex: 1 1 100%; }
    .dh-trusted-strip { display: none; }
    .dh-banner-inner { display: flex; flex-direction: column; text-align: center; height: auto; padding: 48px 32px; gap: 32px; -webkit-mask: none; mask: none; background: #004750; border-radius: 24px; }
    .dh-banner-inner::before { display: none; }
    .dh-banner-text { position: static; max-width: 100%; }
    .dh-banner-heading { white-space: normal; }
    .dh-banner-cta { position: static; align-self: center; }
    .dh-testimonials-grid { grid-template-columns: 1fr; }
    .dh-journey-inner { flex-direction: column; align-items: stretch; gap: 32px; }
    .dh-journey-left { width: 100%; height: auto; aspect-ratio: 576 / 467; }
    .dh-journey-right { width: 100%; height: auto; min-height: 380px; padding: 48px; background: #004750; border-radius: 24px; }
    .dh-journey-btn { position: static; margin-top: 32px; }
    .dh-faq-inner { grid-template-columns: 1fr; gap: 60px; }
    .dh-faq-left { position: relative; top: 0; gap: 40px; }
}

@media ( max-width: 600px ) {
    .dh-top-hero { min-height: 500px; padding: 40px 16px; }
    .dh-hero-scroll-btn { width: 56px; height: 56px; }
    .dh-browse-header-section { padding: 48px 16px 24px; }
    .dh-grid { grid-template-columns: 1fr; gap: 16px; }
    .dh-filter-section { padding: 16px 16px 16px; }
    .dh-filter-inner { gap: 10px; }
    .dh-filter-pill { padding: 10px 16px; height: 46px; }
    .dh-search-bar { padding: 10px 16px; height: 46px; }
    .dh-card-photo { aspect-ratio: 16 / 9; }
    .dh-how-section { padding: 48px 16px; }
    .dh-how-item { font-size: 1.35rem; padding-bottom: 20px; }
    .dh-banner { padding: 40px 16px; }
    .dh-banner-inner { padding: 32px 24px; border-radius: 24px; }
    .dh-testimonials-section { padding: 60px 16px; }
    .dh-testimonial-card { padding: 24px; }
    .dh-journey-section { padding: 48px 16px; }
    .dh-journey-right { padding: 32px 24px; border-radius: 24px; }
    .dh-faq-section { padding: 0 16px 80px; }
    .dh-faq-still-box { padding: 24px; flex-direction: column; align-items: flex-start; }
    .dh-faq-still-btn { width: 56px; height: 56px; align-self: flex-end; }
    .dh-faq-trigger { padding: 20px 24px; font-size: 1.1rem; }
    .dh-faq-content { padding: 0 24px 20px 24px; }
    .dh-tabs-section { overflow-x: auto; }
    .dh-tabs { min-width: max-content; }
}