/**
 * HAVEN SECTIONS CSS
 * Extracted from inline <style> blocks in haven section files (2026-02-13)
 *
 * Purpose: Single external CSS file for all haven section styling.
 * Loaded AFTER haven-theme.css so these rules take priority.
 *
 * Sections (in render order):
 *   1. Header + Hero (header_section.php)
 *   2. Navigation (nav_section.php)
 *   3. Gallery (gallery_section.php)
 *   4. Community (community_section.php)
 *   5. Three Displays / Media Showcase (three_displays_section.php)
 *   6. Subscription Products (subscription_products_section.php)
 *   7. Timetable (timetable_section.php)
 *   8. FAQ (faq_section.php)
 *   9. Portfolio (portfolio_section.php)
 *  10. Pricing (pricing_section.php)
 *  11. Services (services_section.php)
 *  12. Qualifications (qualifications_section.php)
 *  13. Testimonials (testimonials_section.php)
 *  14. Team (team_section.php)
 *  15. Video (video_section.php)
 *  16. Text Gallery (text-_gal.php)
 *  17. CTA (cta_section.php)
 *  18. Event (event_section.php)
 *  19. Programs (programs_section.php)
 */


/* ================================================================
   1. HEADER + HERO (from header_section.php)
   ================================================================ */

/* Wrapper: position: relative establishes containing block for hero.
   Stacking context (z-index: 0) applied in PREVIEW ONLY via
   bpage-header-core.css targeting .bpage-header-hero (same element). */
.haven-header-hero-wrap {
    position: relative;
}

/* ─── Haven Header — self-contained warm CSS ─── */
.haven-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: linear-gradient(to bottom, rgba(41,37,36,0.4) 0%, transparent 100%);
    border-bottom: none;
    transition: all 0.4s ease;
}
.haven-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #e7e0d8;
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.haven-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.haven-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.haven-logo {
    height: 40px;
    width: auto;
    border-radius: 8px;
}
.haven-brand-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #44403c;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -0.01em;
}
.haven-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.haven-nav-link {
    padding: 8px 16px;
    color: #78716c;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: Georgia, serif;
}
.haven-nav-link:hover {
    color: #44403c;
    background: rgba(146, 64, 14, 0.04);
}
.haven-nav-link.active {
    color: var(--k3-primary, #f97316);
    background: rgba(146, 64, 14, 0.06);
}
.haven-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.haven-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #78716c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: Georgia, serif;
    transition: color 0.2s;
}
.haven-phone:hover { color: #44403c; }
.haven-phone i { font-size: 12px; color: var(--k3-primary, #f97316); }
.haven-btn-book {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--k3-primary, #f97316);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    font-family: Georgia, serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.25);
}
.haven-btn-book:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.35);
    color: #fff;
    text-decoration: none;
}
.haven-btn-book:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.3);
}

/* Focus-visible for keyboard navigation */
.haven-nav-link:focus-visible {
    outline: 2px solid var(--k3-primary, #f97316);
    outline-offset: 2px;
}
.haven-btn-book:focus-visible {
    outline: 2px solid var(--k3-primary, #f97316);
    outline-offset: 2px;
}
.haven-phone:focus-visible {
    outline: 2px solid var(--k3-primary, #f97316);
    outline-offset: 2px;
    border-radius: 4px;
}
/* White focus ring over dark hero */
.haven-header:not(.scrolled) .haven-nav-link:focus-visible,
.haven-header:not(.scrolled) .haven-btn-book:focus-visible,
.haven-header:not(.scrolled) .haven-phone:focus-visible {
    outline-color: rgba(255,255,255,0.9);
}

/* White text over dark hero (non-scrolled) */
.haven-header:not(.scrolled) .haven-brand-name,
.haven-header:not(.scrolled) .haven-nav-link,
.haven-header:not(.scrolled) .haven-phone {
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.haven-header:not(.scrolled) .haven-nav-link:hover,
.haven-header:not(.scrolled) .haven-nav-link.active {
    background: rgba(255,255,255,0.15);
    color: white;
}
.haven-header:not(.scrolled) .haven-btn-book {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.haven-header:not(.scrolled) .haven-btn-book:hover {
    background: rgba(255, 255, 255, 0.25);
}
.haven-header:not(.scrolled) .haven-phone i {
    color: rgba(255,255,255,0.8);
}

/* ─── Header + Hero Wrapper ─── */
/* NOTE: z-index: 0 set in first rule (line ~37) and bpage-header-core.css.
   Do NOT repeat position/z-index here — it would override the stacking-context setup. */

/* ─── Hero Section ─── */
.haven-hero {
    min-height: 100vh;
    min-height: 100dvh;
    background: #292524;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
}
.haven-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(41, 37, 36, 0.25) 0%,
        rgba(41, 37, 36, 0.15) 30%,
        rgba(41, 37, 36, 0.45) 70%,
        rgba(41, 37, 36, 0.75) 100%
    );
    z-index: 1;
}
.haven-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
    background-size: 200% 200%;
    animation: hvnShimmer 8s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}
@keyframes hvnShimmer {
    0%, 100% { background-position: -100% -100%; }
    50% { background-position: 100% 100%; }
}
.haven-hero-video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.haven-hero-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.haven-hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 2rem;
}
.haven-hero-tagline {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--k3-primary-light, #FB923C);
    margin-bottom: 1rem;
    font-family: Georgia, serif;
    animation: hvnFadeUp 1s ease-out 0.2s both;
}
.haven-hero-title {
    font-size: clamp(2.25rem, 7vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: 0 4px 30px rgba(0,0,0,0.3);
    animation: hvnFadeUp 1s ease-out 0.4s both;
}
.haven-hero-subtitle {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.85);
    max-width: 560px;
    margin: 0 auto 2rem;
    line-height: 1.7;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    animation: hvnFadeUp 1s ease-out 0.6s both;
}
.haven-hero-features {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    animation: hvnFadeUp 1s ease-out 0.8s both;
}
.haven-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    background: rgba(255,255,255,0.1);
    padding: 0.625rem 1.125rem;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    font-family: Georgia, serif;
}
.haven-feature i {
    color: var(--k3-primary-light, #FB923C);
}

/* Booking widget */
.haven-booking-widget {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: 900px;
    margin: 0 auto;
    animation: hvnFadeUp 1s ease-out 1s both;
}
.haven-booking-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.haven-booking-field {
    flex: 1;
    min-width: 150px;
}
.haven-booking-field label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    opacity: 0.8;
    font-family: Georgia, serif;
}
.haven-booking-field input,
.haven-booking-field select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    background: rgba(255,255,255,0.95);
    color: #44403c;
    font-family: Georgia, serif;
    transition: all 0.3s ease;
}
.haven-booking-field input:focus,
.haven-booking-field select:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.3);
    outline: none;
}
.haven-btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem;
}

/* Scroll indicator */
.haven-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s;
    font-family: Georgia, serif;
}
.haven-scroll-indicator:hover { opacity: 1; }
.haven-scroll-indicator:focus-visible {
    outline: 2px solid rgba(255,255,255,0.8);
    outline-offset: 4px;
    border-radius: 4px;
}
.haven-scroll-indicator i {
    font-size: 1.25rem;
    animation: hvnBounce 2s infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .haven-hero-tagline,
    .haven-hero-title,
    .haven-hero-subtitle,
    .haven-hero-features,
    .haven-booking-widget {
        animation: none !important;
    }
    .haven-scroll-indicator i {
        animation: none !important;
    }
    .haven-hero::before {
        animation: none !important;
    }
    .haven-header {
        transition: none !important;
    }
}

@keyframes hvnFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hvnBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ─── Header + Hero Responsive ─── */
@media (max-width: 1024px) {
    .haven-header-inner {
        flex-wrap: wrap;
        gap: 12px;
    }
    .haven-nav {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .haven-hero {
        background-attachment: scroll;
    }
    .haven-header:not(.scrolled) {
        background: linear-gradient(to bottom, rgba(41,37,36,0.6) 0%, transparent 100%);
    }
    .haven-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .haven-nav::-webkit-scrollbar { display: none; }
    .haven-nav-link { flex-shrink: 0; }
    .haven-phone { display: none; }
    .haven-header-inner { position: relative; }
    .haven-header-inner::after {
        content: '';
        position: absolute;
        bottom: 0; right: 0;
        width: 3rem;
        height: 100%;
        pointer-events: none;
        z-index: 2;
    }
    /* Scrolled = white bg → white fade; non-scrolled = dark bg → dark fade */
    .haven-header.scrolled .haven-header-inner::after,
    .haven-header[style*="relative"] .haven-header-inner::after {
        background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
    }
    .haven-header:not(.scrolled) .haven-header-inner::after {
        background: linear-gradient(to left, rgba(41,37,36,0.5), transparent);
    }
    .haven-hero-title {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
    }
    .haven-hero-features {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }
    .haven-booking-row {
        flex-direction: column;
    }
    .haven-booking-field {
        width: 100%;
    }
}


/* ================================================================
   2. NAVIGATION (from nav_section.php)
   ================================================================ */

/* Haven Nav Section — matches header_section.php scrolled state exactly */
.haven-nav-section {
    border-top: 1px solid var(--haven-border, #e7e0d8);
    border-bottom: 1px solid var(--haven-border, #e7e0d8);
}
.haven-nav-section .haven-header {
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.haven-nav-section .haven-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.haven-nav-section .haven-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.haven-nav-section .haven-logo {
    height: 40px;
    width: auto;
    border-radius: 8px;
}
.haven-nav-section .haven-brand-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #44403c;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -0.01em;
}
.haven-nav-section .haven-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.haven-nav-section .haven-nav-link {
    padding: 8px 16px;
    color: #78716c;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: Georgia, serif;
}
.haven-nav-section .haven-nav-link:hover {
    color: #44403c;
    background: rgba(146, 64, 14, 0.04);
}
.haven-nav-section .haven-nav-link.active {
    color: var(--k3-primary, #f97316);
    background: rgba(146, 64, 14, 0.06);
}
/* Focus-visible for keyboard nav */
.haven-nav-section .haven-nav-link:focus-visible {
    outline: 2px solid var(--k3-primary, #f97316);
    outline-offset: 2px;
}
.haven-nav-section .haven-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.haven-nav-section .haven-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #78716c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: Georgia, serif;
    transition: color 0.2s ease;
}
.haven-nav-section .haven-phone:hover {
    color: #44403c;
}
.haven-nav-section .haven-phone i {
    font-size: 12px;
    color: var(--k3-primary, #f97316);
}
.haven-nav-section .haven-btn-book {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--k3-primary, #f97316);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    font-family: Georgia, serif;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.25);
}
.haven-nav-section .haven-btn-book:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.35);
    color: #fff;
    text-decoration: none;
}
.haven-nav-section .haven-btn-book:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--k3-shadow-rgb, 249, 115, 22), 0.3);
}
.haven-nav-section .haven-btn-book:focus-visible {
    outline: 2px solid var(--k3-primary, #f97316);
    outline-offset: 2px;
}
@media (max-width: 1024px) {
    .haven-nav-section .haven-header-inner {
        flex-wrap: wrap;
        gap: 12px;
    }
    .haven-nav-section .haven-nav {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .haven-nav-section .haven-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .haven-nav-section .haven-nav::-webkit-scrollbar { display: none; }
    .haven-nav-section .haven-nav-link {
        flex-shrink: 0;
    }
    .haven-nav-section .haven-phone {
        display: none;
    }
    .haven-nav-section .haven-header-inner {
        position: relative;
    }
    .haven-nav-section .haven-header-inner::after {
        content: '';
        position: absolute;
        bottom: 0; right: 0;
        width: 3rem;
        height: 100%;
        background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
        pointer-events: none;
        z-index: 2;
    }
}


/* ================================================================
   3. GALLERY (from gallery_section.php)
   ================================================================ */

/* ─── Haven Gallery — Warm Hospitality Photo Grid ─── */
.haven-gallery-section {
    padding: 80px 0;
    background: #faf5f0;
    font-family: Georgia, 'Times New Roman', serif;
}
.haven-gallery-section .haven-gal-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.haven-gal-header {
    text-align: center;
    margin-bottom: 50px;
}
.haven-gal-slogan {
    display: inline-block;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--k3-primary, #f97316);
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: Georgia, serif;
}
.haven-gal-header h2 {
    color: #44403c;
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 1rem;
    font-family: Georgia, 'Times New Roman', serif;
}
.haven-gal-header h2 span {
    color: var(--k3-primary, #f97316);
    font-style: italic;
}
.haven-gal-header p {
    color: #78716c;
    font-size: 1.0625rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}
.haven-gal-divider {
    width: 50px;
    height: 1.5px;
    background: var(--k3-primary, #f97316);
    margin: 1rem auto 0;
    border-radius: 2px;
    opacity: 0.5;
}

/* Grid — masonry-like with featured first image */
.haven-gal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
    gap: 14px;
}

/* Gallery card */
.haven-gal-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: #e7e0d8;
    box-shadow: 0 2px 12px rgba(68, 64, 60, 0.08);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.haven-gal-item:hover {
    box-shadow: 0 12px 36px rgba(68, 64, 60, 0.14);
    transform: translateY(-3px);
}

/* Featured items: first image spans 2 cols + 2 rows */
.haven-gal-item.haven-gal-featured {
    grid-column: span 2;
    grid-row: span 2;
}

/* Image */
.haven-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.haven-gal-item:hover img {
    transform: scale(1.05);
}

/* Hover overlay — warm gradient with glass effect */
.haven-gal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 40%,
        rgba(41, 37, 36, 0.2) 65%,
        rgba(41, 37, 36, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
}
.haven-gal-item:hover .haven-gal-overlay {
    opacity: 1;
}

/* Counter badge */
.haven-gal-counter {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-family: Georgia, serif;
    font-style: italic;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Expand button */
.haven-gal-expand {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}
.haven-gal-expand:hover {
    background: var(--k3-primary, #f97316);
    border-color: var(--k3-primary, #f97316);
    transform: scale(1.08);
}
.haven-gal-expand i {
    color: #fff;
    font-size: 0.875rem;
}

/* "View all" footer link */
.haven-gal-more {
    text-align: center;
    margin-top: 36px;
}
.haven-gal-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1.5px solid #d6cec4;
    border-radius: 30px;
    color: #78716c;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: Georgia, serif;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
}
.haven-gal-more-btn:hover {
    border-color: var(--k3-primary, #f97316);
    color: var(--k3-primary, #f97316);
    background: rgba(249, 115, 22, 0.04);
}

/* Focus-visible */
.haven-gal-item:focus-visible,
.haven-gal-expand:focus-visible,
.haven-gal-more-btn:focus-visible {
    outline: 2px solid var(--k3-primary, #f97316);
    outline-offset: 2px;
}

/* Gallery reduced motion */
@media (prefers-reduced-motion: reduce) {
    .haven-gal-item,
    .haven-gal-item img,
    .haven-gal-overlay,
    .haven-gal-expand {
        transition: none !important;
    }
    .haven-gal-item:hover img {
        transform: none;
    }
    .haven-gal-item:hover {
        transform: none;
    }
}

/* Gallery responsive */
@media (max-width: 992px) {
    .haven-gal-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }
    .haven-gal-item.haven-gal-featured {
        grid-column: span 2;
        grid-row: span 1;
    }
}
@media (max-width: 576px) {
    .haven-gallery-section { padding: 50px 0; }
    .haven-gal-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
        gap: 12px;
    }
    .haven-gal-item.haven-gal-featured {
        grid-column: span 1;
        grid-row: span 1;
    }
    .haven-gal-header h2 { font-size: 27px; }
}


/* ================================================================
   4. COMMUNITY (from community_section.php)
   ================================================================ */

.haven-community-section {
    padding: 80px 0;
    background: #fff;
    font-family: Georgia, 'Times New Roman', serif;
}
.haven-community-section .hvn-comm-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.hvn-comm-header {
    text-align: center;
    margin-bottom: 60px;
}
.hvn-comm-slogan {
    display: inline-block;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--k3-primary, #f97316);
    font-weight: 600;
    margin-bottom: 15px;
    font-family: Georgia, serif;
}
.hvn-comm-header h2 {
    color: #44403c;
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 15px;
    font-family: Georgia, 'Times New Roman', serif;
}
.hvn-comm-header p {
    color: #78716c;
    font-size: 1.0625rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}
.hvn-comm-grid {
    display: grid;
    gap: 30px;
    grid-auto-rows: auto;
    align-items: start;
}
.hvn-comm-card {
    background: #faf5f0;
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}
.hvn-comm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.07);
}
.hvn-comm-card h3 {
    color: #44403c;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px;
    font-family: Georgia, serif;
}
.hvn-comm-card-bar {
    width: 40px;
    height: 3px;
    background: var(--k3-primary, #f97316);
    border-radius: 2px;
    margin-bottom: 20px;
}
.hvn-comm-card-detail {
    color: #78716c;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.hvn-comm-card-text {
    color: #44403c;
    font-size: 0.95rem;
    line-height: 1.8;
    flex: 1;
}
.hvn-comm-bullet {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
}
.hvn-comm-bullet-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    background: var(--haven-gradient, linear-gradient(135deg, #f97316, #fb923c));
}
.hvn-comm-bullet-icon i {
    color: #fff;
    font-size: 10px;
}
.hvn-comm-bullet h6 {
    color: #44403c;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;
}
.hvn-comm-bullet p {
    color: #78716c;
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.7;
}
.hvn-comm-img {
    border-radius: 12px;
    overflow: hidden;
    margin-top: auto;
    padding-top: 10px;
}
.hvn-comm-img img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 280px;
    object-fit: cover;
}
.hvn-comm-video {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-top: auto;
    padding-top: 10px;
    cursor: pointer;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hvn-comm-video a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    text-decoration: none;
    transition: background 0.3s;
}
.hvn-comm-video a:hover {
    background: rgba(0,0,0,0.4);
}
.hvn-comm-play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--haven-gradient, linear-gradient(135deg, #f97316, #fb923c));
}
.hvn-comm-play-btn i {
    color: #fff;
    font-size: 20px;
    margin-left: 3px;
}
@media (max-width: 992px) {
    .hvn-comm-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
}
@media (max-width: 576px) {
    .hvn-comm-grid { grid-template-columns: 1fr !important; gap: 20px; }
    .hvn-comm-card { padding: 24px; min-height: auto; }
    .haven-community-section { padding: 50px 0; }
    .hvn-comm-header h2 { font-size: 27px; }
}


/* ================================================================
   5. THREE DISPLAYS / MEDIA SHOWCASE (from three_displays_section.php)
   ================================================================ */

/* Haven Theme - Media Showcase */
.haven-media-section {
    padding: 80px 0;
    background: #faf5f0;
}
.haven-media-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.haven-media-header {
    text-align: center;
    margin-bottom: 60px;
}
.haven-media-tag {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--haven-primary, #f97316);
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Georgia', serif;
}
.haven-media-header h2 {
    color: #44403c;
    font-size: 34px;
    font-weight: 400;
    margin: 0 0 16px;
    font-family: Georgia, 'Times New Roman', serif;
}
.haven-media-header h2 span {
    color: var(--haven-primary, #f97316);
    font-style: italic;
}
.haven-media-header p {
    color: #78716c;
    font-size: 1.0625rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}
.haven-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.haven-media-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
}
.haven-media-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 45px rgba(249, 115, 22, 0.12);
}
.haven-media-visual {
    position: relative;
    height: 280px;
    overflow: hidden;
}
.haven-media-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.haven-media-card:hover .haven-media-visual img {
    transform: scale(1.07);
}
/* Glass-morphic heading overlay */
.haven-media-glass {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 2;
    transition: all 0.3s;
}
.haven-media-card:hover .haven-media-glass {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--haven-primary, #f97316);
}
.haven-media-glass h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #1e293b;
    font-family: 'Georgia', serif;
}
.haven-media-glass h3::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 2px;
    background: var(--haven-primary, #f97316);
    margin-right: 10px;
    vertical-align: middle;
}
/* Video play overlay */
.haven-media-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}
.haven-media-play-btn {
    width: 66px;
    height: 66px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 6px 25px rgba(0,0,0,0.15);
    transition: all 0.3s;
}
.haven-media-card:hover .haven-media-play-btn {
    background: var(--haven-primary, #f97316);
    border-color: var(--haven-primary, #f97316);
    transform: scale(1.08);
}
.haven-media-play-btn i {
    font-size: 22px;
    color: var(--haven-primary, #f97316);
    margin-left: 3px;
    transition: color 0.3s;
}
.haven-media-card:hover .haven-media-play-btn i {
    color: #fff;
}
.haven-media-video-frame {
    position: relative;
    height: 280px;
    background: #1e293b;
    border-radius: 20px;
    overflow: hidden;
}
.haven-media-video-frame iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

@media (max-width: 992px) {
    .haven-media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .haven-media-section { padding: 50px 0; }
    .haven-media-grid { grid-template-columns: 1fr; }
    .haven-media-visual { height: 240px; }
    .haven-media-header h2 { font-size: 27px; }
}


/* ================================================================
   6. SUBSCRIPTION PRODUCTS (from subscription_products_section.php)
   ================================================================ */

.haven-sub-section { padding: 80px 0; background: linear-gradient(180deg, #faf5f0 0%, #fff 100%); }
.haven-sub-section .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.haven-sub-header { text-align: center; margin-bottom: 60px; }
.haven-sub-header h2 {
    color: #44403c; font-size: 34px; font-weight: 400;
    margin: 0 0 15px; font-family: Georgia, 'Times New Roman', serif;
}
.haven-sub-header h2 span { color: var(--haven-primary, #f97316); font-style: italic; }
.haven-sub-header p { color: #78716c; font-size: 1.0625rem; max-width: 560px; margin: 0 auto; line-height: 1.8; }
/* Decorative flourish */
.haven-sub-flourish {
    display: flex; align-items: center; justify-content: center; gap: 15px;
    margin-bottom: 20px; color: var(--haven-primary, #f97316);
}
.haven-sub-flourish::before, .haven-sub-flourish::after {
    content: ''; width: 60px; height: 1px; background: var(--haven-primary, #f97316); opacity: 0.4;
}

.haven-sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.haven-sub-card {
    background: #fff; border-radius: 24px; overflow: hidden;
    border: 1px solid #f1f5f9; transition: all 0.4s;
    display: flex; flex-direction: column; position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
}
.haven-sub-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
.haven-sub-card.haven-sub-featured {
    border-color: var(--haven-primary, #f97316);
    box-shadow: 0 15px 50px rgba(249,115,22,0.15);
}
.haven-sub-card.haven-sub-featured .haven-sub-card-head {
    background: linear-gradient(135deg, var(--haven-primary, #f97316), #fb923c);
}
.haven-sub-card-head {
    padding: 35px 30px 25px; text-align: center;
    background: linear-gradient(135deg, #1e293b, #334155); position: relative;
}
.haven-sub-featured-tag {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    padding: 5px 14px; border-radius: 50px; color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
}
.haven-sub-card-title {
    color: #fff; font-size: 1.2rem; font-weight: 500;
    margin: 0 0 16px; font-family: 'Georgia', serif; letter-spacing: 0.5px;
}
.haven-sub-card-price {
    color: #fff; font-size: 2.75rem; font-weight: 300; font-family: 'Georgia', serif; line-height: 1;
}
.haven-sub-card-price small { font-size: 0.85rem; opacity: 0.7; font-weight: 400; }
.haven-sub-card-badges {
    display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap;
}
.haven-sub-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 500;
    background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9);
}
.haven-sub-card-body { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.haven-sub-desc {
    color: #64748b; font-size: 0.95rem; line-height: 1.8; margin-bottom: 20px;
    font-family: 'Georgia', serif; font-style: italic;
}
.haven-sub-credits-box {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; background: #faf5f0; border-radius: 12px;
    font-size: 13px; color: #92400e; margin-bottom: 20px;
    border-left: 3px solid var(--haven-primary, #f97316);
}
.haven-sub-credits-box i { font-size: 18px; color: var(--haven-primary, #f97316); }
.haven-sub-features { list-style: none; padding: 0; margin: 0 0 25px; flex: 1; }
.haven-sub-features li {
    display: flex; align-items: flex-start; gap: 12px; padding: 9px 0;
    color: #374151; font-size: 0.9rem; line-height: 1.5;
    border-bottom: 1px solid #f8f8f8;
}
.haven-sub-features li:last-child { border-bottom: none; }
.haven-sub-features li i { color: var(--haven-primary, #f97316); font-size: 10px; margin-top: 5px; flex-shrink: 0; }

.haven-sub-cta {
    display: block; text-align: center; padding: 16px 28px;
    background: linear-gradient(135deg, var(--haven-primary, #f97316), #fb923c);
    color: #fff; text-decoration: none; border-radius: 10px;
    font-weight: 600; font-size: 0.95rem; font-family: 'Georgia', serif;
    transition: all 0.3s; margin-top: auto; letter-spacing: 0.3px;
}
.haven-sub-cta:hover {
    transform: translateY(-2px); box-shadow: 0 8px 25px rgba(249,115,22,0.35);
    color: #fff; text-decoration: none;
}

/* Divider between cards on desktop */
@media (min-width: 993px) {
    .haven-sub-grid > .haven-sub-card + .haven-sub-card { position: relative; }
}
@media (max-width: 992px) {
    .haven-sub-section { padding: 70px 0; }
    .haven-sub-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 576px) {
    .haven-sub-section { padding: 50px 0; }
    .haven-sub-header h2 { font-size: 27px; }
    .haven-sub-card-head { padding: 28px 24px 20px; }
    .haven-sub-card-body { padding: 24px; }
}


/* ================================================================
   7. TIMETABLE (from timetable_section.php)
   ================================================================ */

.haven-timetable-section { padding: 80px 0; background: #faf5f0; }
.haven-timetable-section .haven-timetable-wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.haven-timetable-header { text-align: center; margin-bottom: 50px; }
.haven-timetable-header h2 {
    font: 400 34px/1.2 Georgia, 'Times New Roman', serif;
    color: #44403c; margin: 0 0 12px;
}
.haven-timetable-header p {
    font: italic 16px/1.5 Georgia, 'Times New Roman', serif;
    color: #a8a29e; max-width: 480px; margin: 0 auto;
}
.haven-timetable-header-ornament {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 18px;
}
.haven-timetable-header-ornament span {
    width: 30px; height: 1px; background: #d6cfc5;
}
.haven-timetable-header-ornament i {
    font-size: 10px; color: var(--haven-primary, #f97316);
}
.haven-timetable-day-block { margin-bottom: 28px; }
.haven-timetable-day-block:last-child { margin-bottom: 0; }
.haven-timetable-day-label {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 10px; margin-bottom: 0;
    border-bottom: 1px solid #e7e0d8;
}
.haven-timetable-day-label h3 {
    font: 400 22px/1 Georgia, 'Times New Roman', serif;
    color: #44403c; margin: 0;
}
.haven-timetable-day-label-line {
    flex: 1; height: 1px; background: #e7e0d8;
}
.haven-timetable-day-label-icon {
    font-size: 12px; color: var(--haven-primary, #f97316);
}
.haven-timetable-entries {
    border-left: 1px solid #e7e0d8; border-right: 1px solid #e7e0d8;
    border-bottom: 1px solid #e7e0d8;
    border-radius: 0 0 8px 8px; overflow: hidden;
}
.haven-timetable-entry {
    display: flex; align-items: stretch;
    border-bottom: 1px solid #efe9e1; transition: background .2s;
}
.haven-timetable-entry:last-child { border-bottom: none; }
.haven-timetable-entry:hover { background: #f5efe8; }
.haven-timetable-entry-time {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    min-width: 120px; padding: 18px 16px;
    background: rgba(250,245,240,.6); border-right: 1px solid #efe9e1;
}
.haven-timetable-entry-time-start {
    font: 600 16px/1.2 Georgia, 'Times New Roman', serif;
    color: var(--haven-primary, #f97316);
}
.haven-timetable-entry-time-divider {
    width: 16px; height: 1px; background: #d6cfc5; margin: 5px 0;
}
.haven-timetable-entry-time-end {
    font: 400 13px/1.2 Georgia, 'Times New Roman', serif; color: #a8a29e;
}
.haven-timetable-entry-body {
    flex: 1; padding: 18px 24px; display: flex; align-items: flex-start; gap: 16px;
}
.haven-timetable-entry-content { flex: 1; min-width: 0; }
.haven-timetable-entry-content h4 {
    font: 400 17px/1.3 Georgia, 'Times New Roman', serif;
    color: #44403c; margin: 0 0 5px;
}
.haven-timetable-entry-loc {
    font: italic 13px/1.4 Georgia, 'Times New Roman', serif;
    color: #a8a29e; display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.haven-timetable-entry-loc i { font-size: 10px; color: var(--haven-primary, #f97316); }
.haven-timetable-entry-notes {
    font-size: 13px; color: #a8a29e; line-height: 1.6; margin: 0;
}
.haven-timetable-entry-arrow {
    display: flex; align-items: center; flex-shrink: 0;
    font-size: 14px; color: #d6cfc5; transition: color .3s;
}
.haven-timetable-entry:hover .haven-timetable-entry-arrow {
    color: var(--haven-primary, #f97316);
}
@media (max-width: 768px) {
    .haven-timetable-section { padding: 50px 0; }
    .haven-timetable-header h2 { font-size: 27px; }
    .haven-timetable-entry { flex-direction: column; }
    .haven-timetable-entry-time {
        flex-direction: row; gap: 8px; min-width: auto;
        padding: 12px 16px; border-right: none; border-bottom: 1px solid #efe9e1;
        justify-content: flex-start;
    }
    .haven-timetable-entry-time-divider { width: 10px; height: 1px; margin: 0; }
    .haven-timetable-entry-body { padding: 14px 16px; }
    .haven-timetable-entry-arrow { display: none; }
}


/* ================================================================
   8. FAQ (from faq_section.php)
   ================================================================ */

.haven-faq-section{padding:80px 0;background:#faf5f0;font-family:Georgia,'Times New Roman',serif}
.haven-faq-section .hf-container{max-width:780px;margin:0 auto;padding:0 24px}
.haven-faq-header{text-align:center;margin-bottom:50px}
.haven-faq-header h2{font-size:34px;font-weight:400;color:#292524;margin:0 0 12px;font-style:italic;letter-spacing:-.3px}
.haven-faq-header .haven-faq-line{width:60px;height:2px;background:var(--k3-primary,#f97316);margin:0 auto 14px;border-radius:2px}
.haven-faq-header p{color:#a8a29e;font-size:15px;margin:0;font-family:'Inter',sans-serif;max-width:420px;margin-inline:auto}
.haven-faq-item{border-top:1px solid #e7e5e4;transition:all .3s ease}
.haven-faq-item:last-child{border-bottom:1px solid #e7e5e4}
.haven-faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 6px;cursor:pointer;gap:16px}
.haven-faq-q-text{font-size:18px;font-weight:400;color:#44403c;flex:1;line-height:1.6}
.haven-faq-item.active .haven-faq-q-text{color:var(--k3-primary,#f97316)}
.haven-faq-dash{width:24px;height:2px;background:#d6d3d1;transition:all .3s ease;flex-shrink:0;position:relative}
.haven-faq-dash::after{content:'';position:absolute;top:-11px;left:11px;width:2px;height:24px;background:#d6d3d1;transition:all .3s ease}
.haven-faq-item.active .haven-faq-dash{background:var(--k3-primary,#f97316)}
.haven-faq-item.active .haven-faq-dash::after{opacity:0;transform:rotate(90deg)}
.haven-faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.haven-faq-item.active .haven-faq-a{max-height:500px}
.haven-faq-a-inner{padding:0 6px 24px 6px;color:#78716c;font-size:15px;line-height:1.85;font-family:'Inter',sans-serif}
.haven-faq-a-inner p{margin:0}
@media(max-width:768px){
 .haven-faq-section{padding:50px 0}
 .haven-faq-header h2{font-size:27px}
 .haven-faq-q{padding:18px 4px}
 .haven-faq-q-text{font-size:16px}
 .haven-faq-a-inner{padding:0 4px 18px;font-size:14px}
}
@media(max-width:480px){
 .haven-faq-header h2{font-size:23px}
 .haven-faq-q-text{font-size:15px}
}


/* ================================================================
   9. PORTFOLIO (from portfolio_section.php)
   ================================================================ */

.hvn-pf-section{padding:80px 0;background:#faf5f0}
.hvn-pf-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.hvn-pf-header{text-align:center;margin-bottom:50px}
.hvn-pf-header h2{font-size:34px;font-weight:400;color:#44403c;margin:0 0 12px;font-family:Georgia,'Times New Roman',serif}
.hvn-pf-header p{font-size:17px;color:#8a7e72;margin:0;font-family:Georgia,serif;font-style:italic}
.hvn-pf-divider{width:60px;height:2px;background:var(--k3-primary,#f97316);margin:16px auto 0;border-radius:2px}
.hvn-pf-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:45px}
.hvn-pf-fbtn{padding:10px 24px;border-radius:50px;border:1px solid #ddd5ca;background:#fff;color:#6b5d4f;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;font-family:Georgia,serif}
.hvn-pf-fbtn:hover{border-color:var(--k3-primary,#f97316);color:var(--k3-primary,#f97316)}
.hvn-pf-fbtn.active{background:var(--k3-primary,#f97316);border-color:var(--k3-primary,#f97316);color:#fff}
.hvn-pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.hvn-pf-card{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 20px rgba(44,36,32,.06);transition:all .35s}
.hvn-pf-card:hover{box-shadow:0 14px 40px rgba(44,36,32,.12);transform:translateY(-5px)}
.hvn-pf-card-img{position:relative;height:260px;background:#ede8e1;overflow:hidden}
.hvn-pf-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hvn-pf-card:hover .hvn-pf-card-img img{transform:scale(1.1)}
.hvn-pf-card-overlay{position:absolute;inset:0;background:rgba(44,36,32,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .35s;padding:20px;text-align:center}
.hvn-pf-card:hover .hvn-pf-card-overlay{opacity:1}
.hvn-pf-card-overlay h4{color:#fff;font-size:22px;font-weight:400;font-family:Georgia,serif;margin:0 0 8px;transform:translateY(12px);transition:transform .35s}
.hvn-pf-card:hover .hvn-pf-card-overlay h4{transform:translateY(0)}
.hvn-pf-card-overlay .hvn-pf-overlay-cat{color:rgba(255,255,255,.8);font-size:13px;font-family:Georgia,serif;font-style:italic;margin:0 0 16px;transform:translateY(12px);transition:transform .35s .05s}
.hvn-pf-card:hover .hvn-pf-card-overlay .hvn-pf-overlay-cat{transform:translateY(0)}
.hvn-pf-card-overlay a{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border-radius:50px;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:13px;font-family:Georgia,serif;text-decoration:none;transition:all .25s;transform:translateY(12px);opacity:0;transition:all .35s .1s}
.hvn-pf-card:hover .hvn-pf-card-overlay a{transform:translateY(0);opacity:1}
.hvn-pf-card-overlay a:hover{background:#fff;color:#2c2420}
.hvn-pf-card-body{padding:22px}
.hvn-pf-cat-tag{display:inline-block;padding:4px 14px;border-radius:50px;background:rgba(249,115,22,.08);color:var(--k3-primary,#f97316);font-size:12px;font-weight:500;font-family:Georgia,serif;margin-bottom:10px}
.hvn-pf-card-body h3{font-size:20px;font-weight:400;color:#2c2420;margin:0 0 8px;font-family:Georgia,'Times New Roman',serif}
.hvn-pf-card-body p{font-size:14px;color:#8a7e72;line-height:1.7;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hvn-pf-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#ccc3b6;font-size:44px}
@media(max-width:768px){.hvn-pf-section{padding:50px 0}.hvn-pf-header h2{font-size:30px}.hvn-pf-grid{grid-template-columns:1fr}.hvn-pf-card-img{height:220px}}


/* ================================================================
   10. PRICING (from pricing_section.php)
   ================================================================ */

.haven-pricing { padding: 80px 20px; background: #faf5f0; }
.haven-pricing-inner { max-width: 1100px; margin: 0 auto; }
.haven-pricing-header { text-align: center; margin-bottom: 56px; }
.haven-pricing-ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; color: #c9a96e; font-size: 14px; }
.haven-pricing-ornament::before,
.haven-pricing-ornament::after { content: ''; width: 40px; height: 1px; background: #c9a96e; }
.haven-pricing-title { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; font-weight: 400; color: #44403c; margin: 0 0 12px; letter-spacing: -0.3px; }
.haven-pricing-subtitle { font-size: 16px; color: #8b7355; margin: 0; max-width: 480px; margin-inline: auto; font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.haven-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.haven-pricing-card { background: #fff; border: 1px solid #e8ddd0; border-radius: 12px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.haven-pricing-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(44,24,16,0.08); }
.haven-pricing-card.featured { border-color: #c9a96e; }
.haven-pricing-card-top { padding: 32px 24px 24px; text-align: center; border-bottom: 1px solid #f0e6da; }
.haven-pricing-card.featured .haven-pricing-card-top { background: linear-gradient(135deg, #f5e6d0 0%, #faf0e4 50%, #f5e6d0 100%); border-bottom-color: #e0d0b8; }
.haven-pricing-plan { font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-weight: 400; color: #8b7355; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 14px; }
.haven-pricing-amount { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 6px; }
.haven-pricing-currency { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 700; color: #2c1810; }
.haven-pricing-value { font-family: Georgia, 'Times New Roman', serif; font-size: 48px; font-weight: 700; color: #2c1810; line-height: 1; }
.haven-pricing-card.featured .haven-pricing-value,
.haven-pricing-card.featured .haven-pricing-currency { color: #8b5e2f; }
.haven-pricing-period { font-size: 14px; color: #a0896e; font-family: Georgia, 'Times New Roman', serif; font-style: italic; margin-bottom: 12px; }
.haven-pricing-desc { font-size: 14px; color: #8b7355; line-height: 1.6; margin: 0; }
.haven-pricing-card-body { padding: 24px; }
.haven-pricing-features { list-style: none; padding: 0; margin: 0 0 24px; }
.haven-pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #5a4a3a; padding: 6px 0; font-family: Georgia, 'Times New Roman', serif; }
.haven-pricing-features li::before { content: '\f00c'; font-family: 'Font Awesome 5 Free', 'FontAwesome'; font-weight: 900; color: #c9a96e; font-size: 11px; margin-top: 3px; flex-shrink: 0; }
.haven-pricing-cta { display: block; width: 100%; padding: 13px; border-radius: 8px; font-family: Georgia, 'Times New Roman', serif; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.25s; background: transparent; color: #8b5e2f; border: 1px solid #c9a96e; letter-spacing: 0.04em; }
.haven-pricing-cta:hover { background: #c9a96e; color: #fff; }
.haven-pricing-card.featured .haven-pricing-cta { background: #c9a96e; color: #fff; border-color: #c9a96e; }
.haven-pricing-card.featured .haven-pricing-cta:hover { background: #b8954f; box-shadow: 0 4px 16px rgba(201,169,110,0.3); }
.haven-pricing-featured-label { display: inline-block; background: #c9a96e; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 10px; margin-bottom: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .haven-pricing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .haven-pricing-grid { grid-template-columns: 1fr; } .haven-pricing-title { font-size: 28px; } .haven-pricing { padding: 48px 16px; } .haven-pricing-value { font-size: 40px; } }


/* ================================================================
   11. SERVICES (from services_section.php)
   ================================================================ */

.haven-svc-section { padding: 80px 0; background: #faf5f0; }
.haven-svc-section .haven-svc-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.haven-svc-hdr { text-align: center; margin-bottom: 50px; }
.haven-svc-hdr h2 { font: 400 34px/1.2 Georgia,'Times New Roman',serif; color: #44403c; margin: 0 0 12px; }
.haven-svc-hdr p { font: italic 16px/1.5 Georgia,'Times New Roman',serif; color: #a8a29e; max-width: 480px; margin: 0 auto; }
.haven-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 24px; }
.haven-svc-card {
    background: #fff; border-radius: 10px; padding: 32px 28px; text-align: center;
    border: 1px solid #e7e0d8; transition: all .3s;
}
.haven-svc-card:hover { box-shadow: 0 8px 28px rgba(120,100,70,.08); border-color: var(--k3-primary, #f97316); }
.haven-svc-icon {
    width: 66px; height: 66px; border-radius: 50%; border: 2px solid var(--k3-primary, #f97316);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px; color: var(--k3-primary, #f97316); font-size: 24px;
    background: transparent; transition: all .3s;
}
.haven-svc-card:hover .haven-svc-icon { background: var(--k3-primary, #f97316); color: #fff; }
.haven-svc-card h3 { font: 400 20px/1.3 Georgia,'Times New Roman',serif; color: #44403c; margin: 0 0 8px; }
.haven-svc-desc { font-size: 14px; color: #a8a29e; line-height: 1.7; margin: 0 0 14px; }
.haven-svc-price { font: italic 17px/1 Georgia,'Times New Roman',serif; color: var(--k3-primary, #f97316); }
.haven-svc-divider { width: 40px; height: 1px; background: #d6cfc5; margin: 14px auto 0; }
@media (max-width:768px) {
    .haven-svc-section { padding: 50px 0; }
    .haven-svc-hdr h2 { font-size: 27px; }
    .haven-svc-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   12. QUALIFICATIONS (from qualifications_section.php)
   ================================================================ */

.hvn-qual-section { padding: 80px 20px; background: #faf5f0; }
.hvn-qual-header { text-align: center; margin-bottom: 55px; }
.hvn-qual-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px; font-weight: 400; color: #44403c; margin: 0 0 8px;
}
.hvn-qual-subtitle { font-size: 1rem; color: #a8a29e; margin: 0; font-family: Georgia, serif; }
.hvn-qual-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px; max-width: 960px; margin: 0 auto;
}
.hvn-qual-card {
    background: #fffdf9; border: 1px solid #e7e0d6; border-radius: 10px;
    padding: 30px; transition: border-color 0.3s, box-shadow 0.3s;
}
.hvn-qual-card:hover { border-color: var(--k3-primary, #f97316); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.hvn-qual-year-deco {
    font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700;
    color: var(--k3-primary, #f97316); opacity: 0.7; margin: 0 0 10px;
    letter-spacing: 1px;
}
.hvn-qual-card-title {
    font-family: Georgia, serif; font-size: 1.15rem; font-weight: 600;
    color: #1c1917; margin: 0 0 6px; line-height: 1.35;
}
.hvn-qual-institution {
    font-family: Georgia, serif; font-style: italic;
    font-size: 0.92rem; color: #78716c; margin: 0 0 12px;
}
.hvn-qual-divider {
    width: 40px; height: 1px; background: var(--k3-primary, #f97316);
    opacity: 0.4; margin-bottom: 12px;
}
.hvn-qual-desc {
    font-size: 0.9rem; color: #78716c; line-height: 1.6; margin: 0;
    font-family: Georgia, serif;
}
@media (max-width: 700px) {
    .hvn-qual-grid { grid-template-columns: 1fr; }
    .hvn-qual-title { font-size: 1.7rem; }
}


/* ================================================================
   13. TESTIMONIALS (from testimonials_section.php)
   ================================================================ */

.hvn-testi{padding:80px 0;background:#faf5f0}
.hvn-testi-wrap{max-width:820px;margin:0 auto;padding:0 20px}
.hvn-testi-hd{text-align:center;margin-bottom:50px}
.hvn-testi-hd h2{font-size:34px;font-weight:400;color:#292524;margin:0 0 10px;font-family:Georgia,'Times New Roman',serif;letter-spacing:.5px}
.hvn-testi-hd p{font-size:16px;color:#a8a29e;margin:0;font-style:italic}
.hvn-testi-hd-line{width:60px;height:1px;background:var(--k3-primary,#f97316);margin:18px auto 0;opacity:.5}
.hvn-testi-item{padding:36px 0;position:relative}
.hvn-testi-divider{border:none;border-top:1px solid #e7e5e4;margin:0}
.hvn-testi-marks{text-align:center;margin-bottom:16px}
.hvn-testi-marks span{font-family:Georgia,serif;font-size:54px;color:var(--k3-primary,#f97316);opacity:.2;line-height:1}
.hvn-testi-stars{display:flex;justify-content:center;gap:5px;margin-bottom:18px}
.hvn-testi-stars i{color:#d4a373;font-size:15px}
.hvn-testi-stars i.hvn-empty{color:#e7e5e4}
.hvn-testi-quote{font-size:18px;line-height:1.85;color:#44403c;text-align:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;margin-bottom:24px;max-width:700px;margin-left:auto;margin-right:auto}
.hvn-testi-close{text-align:center;margin-bottom:20px}
.hvn-testi-close span{font-family:Georgia,serif;font-size:54px;color:var(--k3-primary,#f97316);opacity:.2;line-height:1}
.hvn-testi-author{display:flex;align-items:center;justify-content:center;gap:14px}
.hvn-testi-avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid #e7e5e4;background:#f5f0eb;display:flex;align-items:center;justify-content:center;color:#78716c;font-weight:600;font-size:18px;font-family:Georgia,serif;flex-shrink:0}
.hvn-testi-avatar img{width:100%;height:100%;object-fit:cover}
.hvn-testi-info{text-align:left}
.hvn-testi-name{font-weight:600;color:#292524;font-size:16px;font-family:Georgia,serif}
.hvn-testi-role{color:#a8a29e;font-size:13px;margin-top:2px;font-style:italic}
@media(max-width:600px){.hvn-testi{padding:50px 0}.hvn-testi-hd h2{font-size:26px}.hvn-testi-quote{font-size:16px}.hvn-testi-item{padding:28px 0}}


/* ================================================================
   14. TEAM (from team_section.php)
   ================================================================ */

.hvn-team{padding:80px 0;background:#faf5f0;font-family:Georgia,'Times New Roman',serif}
.hvn-team .ht-wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.hvn-team-hd{text-align:center;margin-bottom:55px}
.hvn-team-hd h2{font-size:34px;font-weight:400;color:#292524;margin:0 0 12px;font-style:italic;letter-spacing:-.3px}
.hvn-team-hd p{font-size:15px;color:#a8a29e;margin:0;font-style:italic}
.hvn-team-hd h2::after{content:'';display:block;width:40px;height:1px;background:var(--k3-primary,#f97316);margin:16px auto 0;opacity:.6}
.hvn-team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px}
.hvn-team-card{text-align:center}
.hvn-team-photo{width:140px;height:140px;border-radius:50%;margin:0 auto 20px;overflow:hidden;border:1px solid #d6cfc7;display:flex;align-items:center;justify-content:center;font-size:40px;color:#a8a29e;background:#f5ebe0;transition:border-color .3s}
.hvn-team-card:hover .hvn-team-photo{border-color:var(--k3-primary,#f97316)}
.hvn-team-photo img{width:100%;height:100%;object-fit:cover}
.hvn-team-card h3{font-size:20px;font-weight:400;color:#292524;margin:0 0 4px;font-family:Georgia,'Times New Roman',serif}
.hvn-team-card .ht-role{font-size:13px;color:var(--k3-primary,#f97316);font-style:italic;margin-bottom:10px;font-weight:400}
.hvn-team-card .ht-bio{font-size:13px;color:#78716c;line-height:1.7;margin-bottom:14px;font-family:'DM Sans',sans-serif}
.hvn-team-socials{display:flex;justify-content:center;gap:14px}
.hvn-team-socials a{color:#a8a29e;font-size:15px;text-decoration:none;transition:color .25s}
.hvn-team-socials a:hover{color:var(--k3-primary,#f97316)}
@media(max-width:768px){.hvn-team-grid{grid-template-columns:repeat(2,1fr);gap:30px}.hvn-team{padding:50px 0}.hvn-team-hd h2{font-size:27px}}
@media(max-width:500px){.hvn-team-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto}.hvn-team-photo{width:120px;height:120px}}


/* ================================================================
   15. VIDEO (from video_section.php)
   ================================================================ */

/* Haven Theme CSS Variables Support */
.haven-gradient-bg { background: var(--haven-gradient, linear-gradient(135deg, #f97316, #fb923c)); }
.haven-accent-text { color: var(--haven-primary, #f97316); }
.haven-icon-box { width: 60px; height: 60px; background: var(--haven-gradient, linear-gradient(135deg, #f97316, #fb923c)); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.haven-primary-border { border-color: var(--haven-primary, #f97316); }
.haven-link-hover:hover { background: #faf5f0; color: var(--haven-primary, #f97316); }
.haven-btn-hover:hover { background: var(--haven-primary, #f97316); color: #fff; }

.haven-media-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--haven-primary, #f97316);
}
.haven-media-content::-webkit-scrollbar {
    width: 4px;
}
.haven-media-content::-webkit-scrollbar-thumb {
    background: var(--haven-primary, #f97316);
    border-radius: 2px;
}
@media (max-width: 992px) {
    .haven-video-section > .container > div:last-child {
        grid-template-columns: 1fr !important;
    }
}


/* ================================================================
   16. TEXT GALLERY (from text-_gal.php)
   ================================================================ */

.haven-primary-shadow { box-shadow: 0 10px 30px rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.3); }

.haven-tab-btn:hover {
    background: #fff !important;
    color: #1e293b !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
}
.haven-tab-btn:hover i {
    color: var(--haven-primary, #f97316) !important;
}
.haven-tab-btn.active i {
    color: var(--haven-primary, #f97316);
}
@media (max-width: 992px) {
    .haven-tab-content > div {
        grid-template-columns: 1fr !important;
    }
    .haven-tab-content > div > div {
        order: unset !important;
    }
}


/* ================================================================
   17. CTA (from cta_section.php)
   ================================================================ */

.haven-radial-glow { background: radial-gradient(circle, rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.1) 0%, transparent 70%); }
.haven-radial-glow-light { background: radial-gradient(circle, rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.08) 0%, transparent 70%); }
.haven-cta-btn { box-shadow: 0 15px 50px rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.4); }
.haven-cta-btn:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.5); }
.haven-feature-card:hover { background: rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.08) !important; border-color: rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.2) !important; }


/* ================================================================
   18. EVENT (from event_section.php)
   ================================================================ */

.haven-primary-shadow { box-shadow: 0 10px 30px rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.3); }
.haven-primary-border-left { border-left: 2px solid var(--haven-primary, #f97316); }
.haven-decorative-line { background: linear-gradient(90deg, transparent, rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.3), transparent); }

@media (max-width: 768px) {
    .haven-event-section > .container > div:nth-child(2) {
        grid-template-columns: 1fr !important;
    }
}


/* ================================================================
   19. PROGRAMS (from programs_section.php)
   ================================================================ */

.haven-icon-box-sm { width: 45px; height: 45px; background: var(--haven-gradient, linear-gradient(135deg, #f97316, #fb923c)); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.haven-decorative-circle { background: rgba(var(--haven-shadow-rgb, 249, 115, 22), 0.1); }
.haven-social-link:hover { background: var(--haven-primary, #f97316) !important; color: #fff !important; }

@media (max-width: 992px) {
    .haven-programs-section > .container > div {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
    }
}