/* ═══════════════════════════════════════════════════════════════ */
/* 🎨 EBONY RV GYPSY CLAN - MASTER STYLESHEET                       */
/* ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* 🎨 COLOR PALETTE                                                 */
/* ─────────────────────────────────────────────────────────────── */
:root {
    --white: #ffffff;
    --off-white: #fafafa;
    --coral: #ff6b6b;
    --teal: #4ecdc4;
    --honey: #ffd93d;
    --navy: #2c3e50;
    --light-gray: #f5f5f5;
    --medium-gray: #95a5a6;
    --charcoal: #34495e;
    
    /* ✨ NEW: Hub-specific colors for topic cluster section */
    --hub-purple: #667eea;
    --hub-dark-purple: #764ba2;
    --hub-teal: #11998e;
    --hub-gold: #c7a34c;
    --hub-red: #e74c3c;
}

/* ─────────────────────────────────────────────────────────────── */
/* 🌐 GLOBAL STYLES                                                 */
/* ─────────────────────────────────────────────────────────────── */
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: var(--white);
    color: var(--charcoal);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    color: var(--navy);
    margin-bottom: 15px;
}
/* FORCE NAVIGATION TO BE HORIZONTAL */
.main-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.nav-links {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nav-item {
    padding: 0 15px !important;
}

/* FORCE FOOTER TO BOTTOM */
footer {
    width: 100%;
    margin-top: auto;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}
/* ═══════════════════════════════════════════════════════════════ */
/* 🧭 HEADER & NAVIGATION                                           */
/* ═══════════════════════════════════════════════════════════════ */
.main-header {
    background-color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--navy);
    text-decoration: none;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-item {
    position: relative;
    padding: 0 15px;
}

.nav-link {
    display: block;
    padding: 15px 0;
    color: var(--charcoal);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--coral);
}

.contact-button {
    background-color: var(--coral);
    color: var(--white) !important;
    padding: 10px 15px !important;
    border-radius: 5px;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

.contact-button:hover {
    background-color: var(--navy);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

/* ─────────────────────────────────────────────────────────────── */
/* MEGA MENU SYSTEM                                                 */
/* ─────────────────────────────────────────────────────────────── */
.mega-menu {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 800px;
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box;
    border-top: 3px solid var(--teal);
    z-index: 990;
}

.nav-item.has-mega-menu:hover > .mega-menu {
    display: flex;
}

.mega-menu-content {
    display: flex;
    gap: 30px;
}

.mega-menu-col {
    flex: 1;
}

.mega-menu-col ul {
    list-style: none;
    padding: 0;
}

.mega-menu-col ul li a {
    display: block;
    padding: 5px 0;
    color: var(--charcoal);
    text-decoration: none;
    font-size: 0.9em;
}

.mega-menu-col ul li a:hover {
    color: var(--teal);
}

.col-title {
    font-size: 1.1em;
    color: var(--navy);
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--light-gray);
    margin-bottom: 10px;
}

.view-all {
    font-weight: bold;
    margin-top: 10px;
    color: var(--coral) !important;
}

.visual-highlight {
    flex: 1.2;
    border-left: 1px solid var(--light-gray);
    padding-left: 20px;
}

.highlight-card {
    display: block;
    text-decoration: none;
    background-color: var(--white);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}

.highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(78, 205, 196, 0.2);
    border: 1px solid var(--teal);
}

.highlight-img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────── */
/* SERVICES MEGA MENU                                               */
/* ─────────────────────────────────────────────────────────────── */
.services-menu {
    width: 600px;
    left: 50%;
    transform: translateX(-50%);
}

.services-menu .mega-menu-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    background-color: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
    pointer-events: auto;
}

.service-card:hover {
    border-color: var(--teal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.service-card i {
    font-size: 3em;
    color: var(--teal);
    margin-bottom: 10px;
}

.service-card .icon-wrapper {
    pointer-events: none;
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: block;
}

.service-card .service-icon {
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────── */
/* ABOUT MEGA MENU                                                  */
/* ─────────────────────────────────────────────────────────────── */
.about-menu {
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🏞️ HOME PAGE HERO SCENE                                          */
/* ═══════════════════════════════════════════════════════════════ */
.hero-scene {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.parallax-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.4);
    z-index: 2;
}

/* ─────────────────────────────────────────────────────────────── */
/* ADINKRA SYMBOL OVERLAYS (HOME PAGE)                              */
/* ─────────────────────────────────────────────────────────────── */
.adinkra-overlay {
    position: absolute;
    width: 100px;
    height: auto;
    opacity: 0.15;
    pointer-events: auto;
    z-index: 10;
    cursor: help;
    transition: opacity 0.3s ease;
}

.adinkra-overlay:hover {
    opacity: 0.3;
}

.top-left { top: 20px; left: 20px; }
.top-right { top: 20px; right: 20px; }
.bottom-left { bottom: 20px; left: 20px; }
.bottom-right { bottom: 20px; right: 20px; }

.adinkra-overlay::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(44, 62, 80, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.adinkra-overlay:hover::after {
    opacity: 1;
}

.adinkra-overlay::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(44, 62, 80, 0.95);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
}

.adinkra-overlay:hover::before {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────── */
/* HOME PAGE HERO CONTENT                                           */
/* ─────────────────────────────────────────────────────────────── */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    animation: slideUpFadeIn 1s ease-out;
    margin: 0 20px;
}

.parallax-title {
    font-size: 3.5em;
    margin-bottom: 20px;
    color: var(--navy);
    text-shadow: none;
    font-weight: 700;
}

.hero-subhead {
    font-size: 1.3em;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 40px;
    color: var(--charcoal);
}

.scroll-down-cta {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--coral);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.scroll-down-cta:hover {
    background-color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(44, 62, 80, 0.4);
}

@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-subhead.animated-intro {
    opacity: 0;
    animation: slideUpFadeIn 1.5s ease-out 0.5s forwards;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🏞️ SERVICES PAGE - IMMERSIVE VIDEO HERO                         */
/* ═══════════════════════════════════════════════════════════════ */
.hero-services {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--navy);
}

/* Background Video - Positioned absolutely behind all content */
.hero-services video,
.hero-services .hero-bg-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Gradient Overlay - Creates readable contrast over video */
.hero-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(44, 62, 80, 0.85) 0%,
        rgba(52, 73, 94, 0.75) 50%,
        rgba(78, 205, 196, 0.4) 100%
    );
    z-index: 2;
}

/* Hero Content Box - Floats on top with frosted glass effect */
.hero-services .hero-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 900px;
    padding: 60px 40px;
    text-align: center;
    color: var(--white);
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 1s ease-out;
    margin: 20px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Title */
.hero-services .hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    color: var(--white);
}

/* Animated coral accent line under title */
.hero-services .hero-content h1::after {
    content: '';
    display: block;
    width: 120px;
    height: 4px;
    background: var(--coral);
    margin: 20px auto 0;
    border-radius: 2px;
    animation: expandLine 1.5s ease-out 0.5s backwards;
}

@keyframes expandLine {
    from { width: 0; }
    to { width: 120px; }
}

/* Subheadline */
.hero-services .subhead {
    font-size: 1.4rem;
    margin-bottom: 35px;
    line-height: 1.6;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.95);
    animation: fadeIn 1.5s ease-out 0.8s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* CTA Button with ripple effect */
.hero-services .cta-button {
    display: inline-block;
    background-color: var(--coral);
    color: var(--white);
    padding: 16px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
    position: relative;
    overflow: hidden;
    animation: fadeIn 1.5s ease-out 1.2s backwards;
}

.hero-services .cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.hero-services .cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.hero-services .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255, 107, 107, 0.6);
}

.hero-services .cta-button span {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────── */
/* FLOATING ADINKRA SYMBOLS (SERVICES PAGE)                         */
/* ─────────────────────────────────────────────────────────────── */
.hero-services .floating-symbol {
    position: absolute !important;
    opacity: 0.15 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    animation: float 6s ease-in-out infinite;
}

.hero-services .symbol-1 {
    top: 10%;
    left: 5%;
    width: 80px;
    animation-delay: 0s;
}

.hero-services .symbol-2 {
    top: 70%;
    right: 8%;
    width: 100px;
    animation-delay: 2s;
}

.hero-services .symbol-3 {
    bottom: 15%;
    left: 10%;
    width: 70px;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🧰 SERVICES PAGE - ENHANCED SERVICE CARDS WITH MODALS            */
/* ═══════════════════════════════════════════════════════════════ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    background-color: #fff;
}

.service-block {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Color accent bar at top of each card */
.service-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    transition: height 0.3s ease;
}

.service-block.launchpad::before { background: var(--honey); }
.service-block.webdesign::before { background: var(--teal); }
.service-block.genealogy::before { background: var(--coral); }
.service-block.roadschool::before { background: var(--navy); }

/* Hover effects - card lifts and glows */
.service-block:hover {
    transform: translateY(-12px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.service-block:hover::before {
    height: 100%;
    opacity: 0.05;
}

/* Icon container styling */
.service-block .service-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.service-block .service-icon-wrapper img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.service-block:hover .service-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

/* Service titles */
.service-block h2 {
    font-size: 1.6rem;
    color: var(--navy);
    margin-bottom: 12px;
    font-family: 'Playfair Display', serif;
}

/* Service tagline/description */
.service-block p {
    font-size: 1rem;
    color: var(--charcoal);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Service feature lists */
.service-block ul {
    text-align: left;
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

.service-block ul li {
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
    color: var(--charcoal);
    font-size: 0.95rem;
}

/* Checkmark bullets with service colors */
.service-block ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.1rem;
}

.service-block.launchpad ul li::before { color: var(--honey); }
.service-block.webdesign ul li::before { color: var(--teal); }
.service-block.genealogy ul li::before { color: var(--coral); }
.service-block.roadschool ul li::before { color: var(--navy); }

/* Learn More Button */
.learn-more-btn {
    margin-top: 24px;
    padding: 14px 32px;
    border: 2px solid;
    background: transparent;
    color: var(--navy);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Open Sans', sans-serif;
}

.service-block.launchpad .learn-more-btn {
    border-color: var(--honey);
    color: var(--honey);
}

.service-block.webdesign .learn-more-btn {
    border-color: var(--teal);
    color: var(--teal);
}

.service-block.genealogy .learn-more-btn {
    border-color: var(--coral);
    color: var(--coral);
}

.service-block.roadschool .learn-more-btn {
    border-color: var(--navy);
    color: var(--navy);
}

.learn-more-btn:hover {
    color: white;
    transform: scale(1.05);
}

.service-block.launchpad .learn-more-btn:hover { background: var(--honey); }
.service-block.webdesign .learn-more-btn:hover { background: var(--teal); }
.service-block.genealogy .learn-more-btn:hover { background: var(--coral); }
.service-block.roadschool .learn-more-btn:hover { background: var(--navy); }

/* ═══════════════════════════════════════════════════════════════ */
/* MODAL SYSTEM FOR SERVICE DETAILS                                 */
/* ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: fadeInModal 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUpModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUpModal {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header with color accent */
.modal-header {
    padding: 40px 40px 30px;
    border-bottom: 3px solid;
    position: relative;
}

.modal-header.launchpad { border-color: var(--honey); }
.modal-header.webdesign { border-color: var(--teal); }
.modal-header.genealogy { border-color: var(--coral); }
.modal-header.roadschool { border-color: var(--navy); }

.modal-header h2 {
    font-size: 2.5rem;
    color: var(--navy);
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.modal-header .modal-tagline {
    font-size: 1.2rem;
    color: var(--charcoal);
}

/* Close button */
.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.close-modal:hover {
    background: var(--coral);
    color: white;
    transform: rotate(90deg);
}

/* Modal Body */
.modal-body {
    padding: 40px;
}

.modal-section {
    margin-bottom: 32px;
}

.modal-section h3 {
    font-size: 1.5rem;
    color: var(--navy);
    margin-bottom: 16px;
    font-family: 'Playfair Display', serif;
}

.modal-section p {
    color: var(--charcoal);
    line-height: 1.8;
    margin-bottom: 12px;
}

.modal-section ul {
    list-style: none;
    padding: 0;
}

.modal-section ul li {
    padding: 10px 0;
    padding-left: 32px;
    position: relative;
    color: var(--charcoal);
    line-height: 1.6;
}

.modal-section ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

.launchpad-modal .modal-section ul li::before { color: var(--honey); }
.webdesign-modal .modal-section ul li::before { color: var(--teal); }
.genealogy-modal .modal-section ul li::before { color: var(--coral); }
.roadschool-modal .modal-section ul li::before { color: var(--navy); }

/* Pricing box */
.pricing-box {
    background: #f8f9fa;
    padding: 24px;
    border-radius: 12px;
    margin: 24px 0;
    border-left: 4px solid;
}

.launchpad-modal .pricing-box { border-color: var(--honey); }
.webdesign-modal .pricing-box { border-color: var(--teal); }
.genealogy-modal .pricing-box { border-color: var(--coral); }
.roadschool-modal .pricing-box { border-color: var(--navy); }

.pricing-box h4 {
    color: var(--navy);
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.pricing-box .price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--coral);
    margin-bottom: 8px;
}

/* Modal CTA */
.modal-cta {
    text-align: center;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 30px;
}

.modal-cta-btn {
    padding: 16px 48px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.launchpad-modal .modal-cta-btn { background: var(--honey); }
.webdesign-modal .modal-cta-btn { background: var(--teal); }
.genealogy-modal .modal-cta-btn { background: var(--coral); }
.roadschool-modal .modal-cta-btn { background: var(--navy); }

.modal-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 💬 TESTIMONIALS SECTION                                          */
/* ═══════════════════════════════════════════════════════════════ */
.testimonials {
    background-color: #f4f4f4;
    padding: 60px 20px;
    text-align: center;
}

.testimonial-slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    scroll-snap-type: x mandatory;
}

.testimonial-slide {
    flex: 0 0 300px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    scroll-snap-align: start;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🧭 FINAL CTA BLOCK (SERVICES PAGE)                               */
/* ═══════════════════════════════════════════════════════════════ */
.final-cta {
    background-color: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.final-cta h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.cta-button.large {
    font-size: 1.2rem;
    padding: 16px 32px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 👨‍👩‍👧‍👦 MEET THE CREW SECTION (ABOUT PAGE)                             */
/* ═══════════════════════════════════════════════════════════════ */
.crew-section {
    padding: 80px 20px;
    background-color: var(--off-white);
    text-align: center;
}

.intro-paragraph {
    font-size: 1.1em;
    color: var(--charcoal);
    max-width: 800px;
    margin: 0 auto 50px;
}

.transition-subhead {
    font-size: 1.8em;
    color: var(--coral);
    margin: 80px 0 20px;
}

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

.profile-card {
    background-color: transparent;
    perspective: 1000px;
    height: 350px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.profile-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-front {
    background-color: var(--white);
    color: var(--navy);
    border: 2px solid var(--light-gray);
}

.card-back {
    background-color: var(--teal);
    color: white;
    text-align: left;
    padding: 30px;
    transform: rotateY(180deg);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🚐 OUR RIG SECTION (ABOUT PAGE)                                  */
/* ═══════════════════════════════════════════════════════════════ */
.rig-section {
    padding: 80px 20px;
    background-color: var(--white);
    text-align: center;
}

.rig-details-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 80px;
}

.rig-blueprint-block,
.rig-facts-block {
    flex: 1 1 calc(50% - 20px);
    min-width: 300px;
    max-width: 550px;
    background-color: var(--off-white);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    text-align: left;
    border: 2px solid var(--light-gray);
}

.rig-blueprint-block h3,
.rig-facts-block h3 {
    color: var(--navy);
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 20px;
}

.rig-blueprint-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.image-caption {
    font-size: 0.9em;
    color: var(--medium-gray);
    font-style: italic;
}

.rig-spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rig-spec-list li {
    margin-bottom: 12px;
    font-size: 1em;
    color: var(--charcoal);
    line-height: 1.5;
}

.rig-spec-list li strong {
    color: var(--coral);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────── */
/* RIG PHOTO GALLERY                                                */
/* ─────────────────────────────────────────────────────────────── */
.horizontal-scroll-gallery {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 25px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: -20px;
    margin-right: -20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.horizontal-scroll-gallery::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    flex: 0 0 70%;
    max-width: 600px;
    scroll-snap-align: start;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--light-gray);
}

.gallery-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.gallery-item .gallery-caption {
    padding: 15px;
    font-size: 0.95em;
    color: var(--charcoal);
    text-align: left;
    flex-grow: 1;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 📢 DUAL CALL TO ACTION (HOME PAGE)                               */
/* ═══════════════════════════════════════════════════════════════ */
.dual-cta-section {
    padding: 100px 20px;
    background-color: var(--coral);
    color: white;
    text-align: center;
}

.cta-row {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.cta-card {
    flex: 1;
    min-height: 300px;
    border-radius: 10px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.travel-cta {
    background-image: url("https://via.placeholder.com/600x300?text=Stunning+Road+Image");
}

.freelance-cta {
    background-image: url("https://via.placeholder.com/600x300?text=Web+Design+and+Genealogy+Graphic");
}

.cta-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.6);
    border-radius: 10px;
}

.cta-content {
    position: relative;
    z-index: 10;
    max-width: 400px;
}

.cta-content h3 {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 10px;
}

.cta-content p {
    font-size: 1.1em;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s;
    font-size: 1em;
}

.travel-button {
    background-color: var(--honey);
    color: var(--navy);
}

.travel-button:hover {
    background-color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.services-button {
    background-color: var(--teal);
    color: white;
}

.services-button:hover {
    background-color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.primary-cta {
    background-color: var(--coral);
    color: white;
    border: 2px solid transparent;
}

.primary-cta:hover {
    background-color: var(--navy);
    transform: translateY(-2px);
}

.subtle-cta {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: underline;
    font-size: 0.9em;
    padding: 15px 0;
    transition: color 0.3s;
}

.subtle-cta:hover {
    color: var(--honey);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 📧 CONTACT PAGE                                                  */
/* ═══════════════════════════════════════════════════════════════ */
.contact-hero-section {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    background-color: #333;
}

.contact-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.contact-hero-section .hero-content {
    position: relative;
    z-index: 3;
    padding: 40px 20px;
    color: white;
    text-align: center;
}

.contact-funnel-section {
    padding: 60px 20px;
    background-color: #fff;
}

.segmentation-cards-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.segment-card {
    flex: 1;
    max-width: 450px;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #ddd;
}

.segment-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.segment-card[data-form-target="client"] {
    background-color: #2980b9;
    color: white;
}

.segment-card[data-form-target="travel"] {
    background-color: #e67e22;
    color: white;
}

.segment-card h2 {
    font-size: 1.5em;
    margin-top: 0;
}

.segment-card i {
    font-size: 1.8em;
    margin-top: 10px;
}

.form-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.form-title {
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center;
}

.form-subtext {
    text-align: center;
    margin-bottom: 30px;
    color: #7f8c8d;
}

.form-subtext-alt {
    text-align: center;
    margin: 20px 0;
    font-weight: bold;
    color: #2c3e50;
}

.client-book-button {
    background-color: #e74c3c;
    color: white;
    text-align: center;
    padding: 15px 0;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 20px;
}

.support-info-bar {
    text-align: center;
    padding-top: 40px;
    margin-top: 30px;
    border-top: 1px dashed #eee;
    color: #555;
}

.support-info-bar p {
    margin: 5px 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ✨ FEATURE SECTION (HOME PAGE)                                   */
/* ═══════════════════════════════════════════════════════════════ */
.feature-section {
    padding: 80px 20px;
    background-color: var(--off-white);
    text-align: center;
}

.feature-headline {
    font-size: 2rem;
    margin-bottom: 40px;
    color: var(--navy);
    font-family: "Montserrat", sans-serif;
}

.feature-pillars {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.pillar {
    flex: 1 1 30%;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.pillar.visible {
    opacity: 1;
    transform: translateY(0);
}

.pillar:nth-child(1) {
    transition-delay: 0.2s;
    background-color: #ffe5e5;
    border: 2px solid var(--coral);
}

.pillar:nth-child(2) {
    transition-delay: 0.6s;
    background-color: #fff8e1;
    border: 2px solid var(--honey);
}

.pillar:nth-child(3) {
    transition-delay: 1s;
    background-color: #e0f7f6;
    border: 2px solid var(--teal);
}

.pillar-icon {
    width: 60px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.pillar-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--navy);
    font-family: "Playfair Display", serif;
}

.pillar-text {
    font-size: 1rem;
    color: var(--charcoal);
    line-height: 1.6;
    font-family: "Open Sans", sans-serif;
}

/* ⚠️ IMPORTANT: Hub links within pillar text */
.pillar-text a {
    color: inherit; /* Will inherit color from inline styles */
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.pillar-text a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.pillar .symbol-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 20px;
}

.pillar .symbol-wrapper:hover .pillar-icon {
    transform: scale(1.1);
}

.pillar .symbol-wrapper::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background-color: var(--navy);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
}

.pillar .symbol-wrapper::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--navy);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
    margin-bottom: 2px;
}

.pillar:nth-child(1) .symbol-wrapper::before {
    border-color: var(--coral);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.pillar:nth-child(2) .symbol-wrapper::before {
    border-color: var(--honey);
    box-shadow: 0 4px 12px rgba(255, 217, 61, 0.3);
}

.pillar:nth-child(3) .symbol-wrapper::before {
    border-color: var(--teal);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.pillar .symbol-wrapper:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px);
}

.pillar .symbol-wrapper:hover::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ✨ NEW: TOPIC HUBS SECTION - HOMEPAGE HUB & SPOKE GRID           */
/* Added: 2025-10-15 for Hub & Spoke SEO Architecture               */
/* ═══════════════════════════════════════════════════════════════ */

.topic-hubs-section {
    padding: 80px 20px;
    /* ⚠️ GRADIENT BACKGROUND - Ensures visual separation from feature section */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.topic-hubs-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ⚠️ NOTE: Using .section-headline instead of .section-header to avoid conflict
   .section-header already exists with different styling */
.section-headline {
    text-align: center;
    font-size: 2.5em;
    color: var(--navy);
    margin-bottom: 10px;
    font-weight: 700;
    font-family: 'Playfair Display', serif; /* Matches your existing headers */
}

.section-subtitle {
    text-align: center;
    font-size: 1.2em;
    color: #666;
    margin-bottom: 50px;
    font-family: 'Open Sans', sans-serif;
}

.hubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* HUB CARD STYLING - Core component of topic cluster grid          */
/* ═══════════════════════════════════════════════════════════════ */
.hub-card {
    background: white;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border-top: 4px solid var(--hub-purple); /* Default color */
    position: relative;
    overflow: hidden;
}

.hub-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

/* ⚠️ INDIVIDUAL HUB COLORS - Matches your existing color palette */
.destinations-hub {
    border-top-color: var(--hub-purple); /* #667eea */
}

.rv-life-hub {
    border-top-color: var(--hub-teal); /* #11998e - Different from your main teal */
}

.sankofa-hub {
    border-top-color: var(--hub-gold); /* #c7a34c - Warm gold for heritage */
}

.roadschooling-hub {
    border-top-color: var(--hub-red); /* #e74c3c */
}

.services-hub {
    border-top-color: var(--hub-dark-purple); /* #764ba2 */
}

/* Hub Card Icon */
.hub-icon {
    font-size: 3em;
    margin-bottom: 20px;
    /* ⚠️ Using emoji icons for simplicity - can be replaced with SVGs */
}

.hub-title {
    color: var(--navy);
    font-size: 1.4em;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
}

.hub-description {
    color: #666;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes arrow link to bottom */
}

.hub-link-arrow {
    color: var(--hub-purple);
    font-weight: 600;
    font-size: 1em;
    transition: color 0.3s ease;
}

/* ⚠️ ARROW LINK COLOR CHANGES ON HOVER - Matches respective hub color */
.destinations-hub:hover .hub-link-arrow {
    color: var(--hub-purple);
}

.rv-life-hub:hover .hub-link-arrow {
    color: var(--hub-teal);
}

.sankofa-hub:hover .hub-link-arrow {
    color: var(--hub-gold);
}

.roadschooling-hub:hover .hub-link-arrow {
    color: var(--hub-red);
}

.services-hub:hover .hub-link-arrow {
    color: var(--hub-dark-purple);
}

/* ═══════════════════════════════════════════════════════════════ */
/* END TOPIC HUBS SECTION                                            */
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════ */
/* 🗺️ BLOG PAGE - HERO & MAP                                       */
/* ═══════════════════════════════════════════════════════════════ */
.travel-hero-simple {
    padding: 100px 20px;
    background: linear-gradient(135deg, #F8F9FA 0%, #E8ECED 100%);
    text-align: center;
}

.hero-text-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hero-title {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    color: #2C3E50;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #34495E;
    line-height: 1.6;
    margin: 0;
}

.map-section-clean {
    padding: 80px 20px;
    background: white;
    position: relative;
}

.map-container-clean {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.map-header {
    font-size: 2.5rem;
    font-family: 'Playfair Display', serif;
    color: #2C3E50;
    margin-bottom: 15px;
}

.map-description {
    font-size: 1.1rem;
    color: #34495E;
    margin-bottom: 40px;
}

.map-wrapper-clean {
    background: #F8F9FA;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

#usa-map {
    width: 100%;
    max-width: 1000px;
    height: auto;
    display: block;
    margin: 0 auto;
    background: #F8F9FA;
}

#usa-map path[id$="-interactive"] {
    fill: #BDC3C7;
    stroke: #FFFFFF;
    stroke-width: 2;
    cursor: pointer;
    transition: all 0.3s ease;
}

#usa-map path[id$="-interactive"]:hover {
    fill: #F39C12;
    stroke: #2C3E50;
    stroke-width: 3;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

#usa-map path.visited {
    fill: #1ABC9C;
}

#usa-map path.visited:hover {
    fill: #E74C3C;
}

#usa-map path.current {
    fill: #E74C3C;
    animation: statePulse 2s ease-in-out infinite;
}

@keyframes statePulse {
    0%, 100% {
        fill: #E74C3C;
        opacity: 1;
    }
    50% {
        fill: #ff8585;
        opacity: 0.8;
    }
}

#usa-map path.planned {
    fill: #F39C12;
    opacity: 0.6;
}

#usa-map path.planned:hover {
    opacity: 1;
}

.map-legend-clean {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.legend-item-clean {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: #2C3E50;
}

.legend-dot {
    width: 30px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.visited-dot { background: #1ABC9C; }
.current-dot { background: #E74C3C; }
.planned-dot { background: #F39C12; opacity: 0.6; }

.state-tooltip-clean {
    position: fixed;
    background: #2C3E50;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    max-width: 250px;
    border: 2px solid #E74C3C;
    transition: opacity 0.3s ease;
}

.state-tooltip-clean.active {
    opacity: 1;
}

.tooltip-name {
    font-size: 1.2rem;
    margin: 0 0 8px 0;
    color: #F39C12;
}

.tooltip-date {
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    color: #1ABC9C;
    font-weight: 600;
}

.tooltip-desc {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────── */
/* BLOG FILTER & GRID                                               */
/* ─────────────────────────────────────────────────────────────── */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px 20px;
    background-color: var(--off-white);
}

.blog-filter button {
    background-color: var(--navy);
    color: var(--white);
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.blog-filter button:hover {
    background-color: var(--charcoal);
    transform: translateY(-2px);
}

.blog-filter button.active {
    background-color: var(--coral);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-post {
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-title {
    font-size: 1.4rem;
    margin: 16px;
    color: var(--navy);
    font-family: 'Playfair Display', serif;
}

.post-excerpt {
    font-size: 1rem;
    margin: 0 16px 16px;
    color: var(--charcoal);
    line-height: 1.6;
}

.read-more {
    display: inline-block;
    margin: 0 16px 20px;
    color: var(--coral);
    font-weight: bold;
    text-decoration: none;
}

.read-more:hover {
    color: var(--teal);
}

.fade-in {
    animation: fadeInBlog 0.5s ease-in;
}

@keyframes fadeInBlog {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   COPY THIS ENTIRE SECTION TO ebonyrvgypsyclan2.css
   
   This fixes:
   1. Navigation displaying vertically (should be horizontal)
   2. Footer appearing at top of page (should be at bottom)
   
   WHERE TO PASTE:
   - Open ebonyrvgypsyclan2.css
   - Scroll to the FOOTER section (search for "footer {")
   - REPLACE the existing footer CSS with this entire section
   - Save and refresh browser with Ctrl+Shift+R
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   🦶 FOOTER STYLES - COMPLETE SECTION
   ═══════════════════════════════════════════════════════════════ */

/* Main Footer Container */
footer {
    padding: 40px 20px;
    background-color: var(--navy);
    color: var(--light-gray);
    text-align: center;
    font-size: 0.9em;
    width: 100%;
    margin-top: auto;
}

/* Footer Content Wrapper */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Footer Grid Layout - 4 columns */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 1200px;
}

/* Footer Column Headings */
.footer-column h4.footer-heading {
    color: var(--coral);
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
}

/* Footer Links List */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--light-gray);
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--honey);
    transform: translateX(5px);
}

/* Footer Social Media Section */
.footer-social {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social h4.footer-heading {
    color: var(--teal);
    margin-bottom: 20px;
}

/* Social Links Container */
.social-links {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-links a {
    color: var(--light-gray);
    margin: 0 10px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--coral);
}

/* Footer Bottom Section */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
}

.copyright {
    margin-bottom: 15px;
    color: var(--light-gray);
    font-size: 0.9em;
}

/* Footer Navigation Links */
.footer-nav,
.footer-legal {
    margin: 10px 0;
}

.footer-nav a,
.footer-legal a {
    color: var(--light-gray);
    text-decoration: none;
    margin: 0 5px;
    font-size: 0.85em;
    transition: color 0.3s ease;
}

.footer-nav a:hover,
.footer-legal a:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* Responsive Footer - Mobile */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-links a {
        display: block;
        padding: 5px 0;
    }
    
    .footer-links a:hover {
        transform: none;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   END OF FOOTER SECTION
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   END FOOTER STYLES
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════ */
/* 📱 RESPONSIVE DESIGN                                             */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .family-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-row {
        flex-direction: column;
    }

    .cta-card {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .contact-video-bg {
        display: none;
    }
    
    .contact-hero-section {
        background-image: url("/assets/img/contact-fallback.jpg");
        background-size: cover;
        background-position: center;
    }
    
    .segmentation-cards-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .form-container {
        padding: 20px;
    }
    
    .rig-details-layout {
        flex-direction: column;
        align-items: center;
    }

    .rig-blueprint-block,
    .rig-facts-block {
        max-width: 100%;
        padding: 25px;
    }

    .horizontal-scroll-gallery {
        gap: 15px;
    }

    .gallery-item {
        flex: 0 0 90%;
        height: 300px;
    }

    .gallery-item img {
        height: 200px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .map-wrapper-clean {
        padding: 20px;
    }
    
    .map-legend-clean {
        gap: 15px;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .feature-pillars {
        flex-direction: column;
    }
    
    .pillar {
        flex: 1 1 100%;
    }

    .section-header {
        font-size: 2rem;
    }
    
    /* ⚠️ NEW: Topic Hubs Responsive */
    .hubs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .hub-card {
        padding: 30px 20px;
    }
    
    .section-headline {
        font-size: 2em;
    }
    
    /* Services Hero Responsive */
    .hero-services .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-services .subhead {
        font-size: 1.1rem;
    }

    .hero-services .hero-content {
        padding: 40px 30px;
    }

    .hero-services .cta-button {
        padding: 14px 32px;
        font-size: 1rem;
    }

    /* Enhanced Service Cards - Mobile */
    .services-grid {
        grid-template-columns: 1fr;
        padding: 40px 20px;
    }

    /* Modal Responsive */
    .modal-header,
    .modal-body {
        padding: 30px 24px;
    }

    .modal-header h2 {
        font-size: 2rem;
    }

    .modal-cta-btn {
        padding: 14px 36px;
        font-size: 1rem;
    }
}

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

    .gallery-item {
        flex: 0 0 95%;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    /* Services Hero Mobile */
    .hero-services .hero-content h1 {
        font-size: 1.8rem;
    }

    .hero-services {
        min-height: 60vh;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🚨 EMERGENCY FIX - SERVICE ICON SIZE CONTROL                     */
/* ═══════════════════════════════════════════════════════════════ */
.service-block .service-icon-wrapper {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 24px !important;
    background: #f8f9fa !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.service-block .service-icon-wrapper img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Container for the facebook feed symbolic divider */
.symbolic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
}

.symbolic-divider img {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  transition: transform 0.3s ease;
}

.symbolic-divider img:hover {
  transform: scale(1.2);
  opacity: 1;
}

.divider-line {
  flex-grow: 1;
  height: 2px;
  background: linear-gradient(to right, #d4a373, #fef3e7);
  border-radius: 2px;
}

/* Wrapper for the Facebook feed section */
.fb-feed-wrapper {
  background: linear-gradient(to bottom, #fdf6f0, #fff);
  border: 2px solid #d4a373;
  border-radius: 12px;
  padding: 2rem;
  margin-top: 3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
}

.fb-feed-wrapper h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.8rem;
  color: #5c3d2e;
  margin-bottom: 0.5rem;
}

.feed-subtitle {
  font-family: 'Lora', serif;
  font-size: 1rem;
  color: #7a5c4b;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Resources Links Section For Homeschooling                         */
/* ═══════════════════════════════════════════════════════════════ */
.external-resources {
  margin-top: 3rem;
  padding: 2rem;
  background-color: #f9f5f0;
  border-radius: 8px;
}

/* ⚠️ CONFLICT NOTE: .section-title used in both resources and blog sections
   This is acceptable as styling is consistent across uses */
.section-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #4b2e2e;
}

.section-intro {
  font-size: 1rem;
  margin-bottom: 1rem;
  font-style: italic;
  color: #6b4f4f;
}

.resource-list {
  list-style: none;
  padding-left: 0;
}

.resource-list li {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.resource-list a {
  color: #2a5d84;
  text-decoration: none;
  font-weight: bold;
}

.resource-list a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Resource Page CSS Classes                                         */
/* ═══════════════════════════════════════════════════════════════ */
.resources-main {
  padding: 2rem;
  background-color: #fdfaf6;
}

.page-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #4b2e2e;
}

.intro-text {
  font-size: 1rem;
  margin-bottom: 2rem;
  font-style: italic;
  color: #6b4f4f;
}

.resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.resource-card {
  flex: 1 1 300px;
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.resource-card h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.resource-card p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

.btn-primary {
  background-color: #2a5d84;
  color: #fff;
}

.btn-secondary {
  background-color: #6b4f4f;
  color: #fff;
}

.btn-accent {
  background-color: #4b2e2e;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 📝 FINAL NOTES & CONFLICT SUMMARY                                */
/* ═══════════════════════════════════════════════════════════════ */

/* 
CONFLICTS RESOLVED:
1. ✅ Added hub-specific color variables to :root
2. ✅ Created .section-headline (different from .section-header)
3. ✅ .section-title exists in resources section - NO CONFLICT (styling compatible)
4. ✅ Hub card links styled to inherit color from inline styles
5. ✅ All responsive breakpoints updated to include topic hubs

NO CONFLICTS DETECTED:
- Topic hubs section uses unique class names
- Color variables added without overwriting existing ones
- Responsive styles integrated into existing media queries
- z-index values don't interfere with existing modals/navigation

INTEGRATION COMPLETE ✅
*//* ═══════════════════════════════════════════════════════════════
   ✅ GRADIENT FIX - ULTRA AGGRESSIVE VERSION
   
   🔍 VERIFICATION: If you can see this comment, you have the RIGHT file!
   
   This version uses !important on EVERYTHING to force gradients to show.
   Add this to the VERY END of your CSS file (after line 2750)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* 🎨 PILLAR GRADIENTS - FORCE OVERRIDE ALL CONFLICTING STYLES     */
/* ─────────────────────────────────────────────────────────────── */

/* CORAL PILLAR - Force gradient */
.feature-section .pillar:nth-child(1),
.feature-pillars .pillar:nth-child(1),
section .pillar:nth-child(1),
.pillar:nth-child(1) {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.30) 0%, rgba(255, 107, 107, 0.08) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.30), 0 2px 8px rgba(0, 0, 0, 0.10) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.pillar:nth-child(1).visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.pillar:nth-child(1):hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.40), 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* HONEY PILLAR - Force gradient */
.feature-section .pillar:nth-child(2),
.feature-pillars .pillar:nth-child(2),
section .pillar:nth-child(2),
.pillar:nth-child(2) {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.30) 0%, rgba(255, 217, 61, 0.08) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 217, 61, 0.30), 0 2px 8px rgba(0, 0, 0, 0.10) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease 0.6s, transform 0.8s ease 0.6s !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.pillar:nth-child(2).visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.pillar:nth-child(2):hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 30px rgba(255, 217, 61, 0.40), 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* TEAL PILLAR - Force gradient */
.feature-section .pillar:nth-child(3),
.feature-pillars .pillar:nth-child(3),
section .pillar:nth-child(3),
.pillar:nth-child(3) {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.30) 0%, rgba(78, 205, 196, 0.08) 100%) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.30), 0 2px 8px rgba(0, 0, 0, 0.10) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease 1s, transform 0.8s ease 1s !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

.pillar:nth-child(3).visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.pillar:nth-child(3):hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 30px rgba(78, 205, 196, 0.40), 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ✅ END OF GRADIENT FIX
   
   IF YOU SEE GRADIENTS: Success! This code is working!
   IF YOU STILL SEE SOLID COLORS: 
   1. Clear browser cache (Ctrl+Shift+R)
   2. Check that this file was actually uploaded
   3. Update cache buster to ?v=86
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* 📰 SECTION 1: LATEST ADVENTURES - Story Cards Styling            */
/* ADD THIS: To the end of your ebonyrvgypsyclan2.css file          */
/* ═══════════════════════════════════════════════════════════════ */

.latest-adventures {
    padding: 80px 20px;
    background: linear-gradient(to bottom, var(--off-white) 0%, var(--white) 100%);
    position: relative;
}

/* Section Header */
.section-intro-header {
    text-align: center;
    margin-bottom: 50px;
}

.adventures-headline {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--navy);
    margin-bottom: 15px;
    font-weight: 700;
}

.adventures-subtext {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--charcoal);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.85;
}

/* Cards Grid */
.adventure-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual Card */
.adventure-card {
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.adventure-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Card Image */
.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.adventure-card:hover .card-image {
    transform: scale(1.08);
}

/* Category Tags */
.card-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    z-index: 2;
}

.heritage-tag {
    background: rgba(199, 163, 76, 0.9);
    color: var(--white);
}

.rv-life-tag {
    background: rgba(17, 153, 142, 0.9);
    color: var(--white);
}

.education-tag {
    background: rgba(231, 76, 60, 0.9);
    color: var(--white);
}

/* Card Content */
.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--navy);
}

.card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: var(--coral);
}

.card-excerpt {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Card Meta Information */
.card-meta {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--light-gray);
}

.meta-date,
.meta-readtime {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Read More Link */
.read-more-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.read-more-link:hover {
    color: var(--coral);
    gap: 8px;
}

/* Footer "View All" Link */
.adventures-footer {
    text-align: center;
    margin-top: 50px;
}

.view-all-adventures {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    padding: 15px 35px;
    border: 2px solid var(--teal);
    border-radius: 30px;
    transition: all 0.3s ease;
    background-color: var(--white);
}

.view-all-adventures:hover {
    background-color: var(--teal);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(78, 205, 196, 0.3);
}

/* ─────────────────────────────────────────────────────────────── */
/* 📱 RESPONSIVE DESIGN                                              */
/* ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .latest-adventures {
        padding: 50px 15px;
    }

    .adventures-headline {
        font-size: 2rem;
    }

    .adventures-subtext {
        font-size: 1rem;
    }

    .adventure-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .card-image-wrapper {
        height: 200px;
    }

    .card-title {
        font-size: 1.25rem;
    }

    .card-content {
        padding: 20px;
    }

    .card-meta {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .adventures-headline {
        font-size: 1.75rem;
    }

    .card-tag {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ✅ END OF LATEST ADVENTURES SECTION STYLES                        */
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* 📄 ABOUT US PAGE STYLES                                         */
/* ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* Page Hero Section                                               */
/* ─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */
/* 🎨 ENHANCED ABOUT US PAGE - IMMERSIVE STYLES                    */
/* ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── */
/* 📊 STATS COUNTER SECTION                                        */
/* ─────────────────────────────────────────────────────────────── */
.stats-counter-section {
    background: linear-gradient(135deg, var(--navy) 0%, var(--charcoal) 100%);
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.stats-counter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.05)"/></svg>');
    opacity: 0.5;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 1;
}

.stat-item {
    text-align: center;
    color: var(--white);
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: var(--honey);
    margin-bottom: 10px;
    line-height: 1;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 15px;
}

.stat-icon {
    font-size: 2rem;
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────── */
/* 👨‍👩‍👧‍👦 MEET THE CREW ENHANCED                                    */
/* ─────────────────────────────────────────────────────────────── */
.meet-crew-enhanced {
    padding: 100px 20px;
    background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}

.section-intro-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-headline {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--navy);
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--charcoal);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Family Gallery */
.family-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 60px;
}

.gallery-main {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.gallery-featured {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-main:hover .gallery-featured {
    transform: scale(1.05);
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-thumb {
    transform: scale(1.1);
}

/* Family Story */
.family-story {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: start;
}

.story-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--navy);
    margin-bottom: 25px;
}

.story-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--charcoal);
    margin-bottom: 20px;
}

.story-cta-box {
    background: linear-gradient(135deg, var(--teal) 0%, var(--coral) 100%);
    padding: 40px;
    border-radius: 16px;
    color: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 100px;
}

.story-cta-box h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.story-cta-box p {
    margin-bottom: 25px;
    opacity: 0.95;
}

.cta-button-secondary {
    display: inline-block;
    background-color: var(--white);
    color: var(--navy);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cta-button-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ─────────────────────────────────────────────────────────────── */
/* 🚐 OUR RIG ENHANCED                                             */
/* ─────────────────────────────────────────────────────────────── */
.our-rig-enhanced {
    padding: 100px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.our-rig-enhanced::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: float 20s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-50px, 50px) rotate(180deg); }
}

.rig-showcase {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.rig-visual {
    position: relative;
}

.rig-main-image {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Interactive Hotspots */
.rig-hotspot {
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
}

.hotspot-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--honey);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

.hotspot-tooltip {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--white);
    color: var(--navy);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
}

.rig-hotspot:hover .hotspot-tooltip {
    opacity: 1;
}

.hotspot-tooltip strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
}

.hotspot-tooltip p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Rig Specs */
.rig-specs h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 30px;
}

.spec-category {
    margin-bottom: 30px;
}

.spec-category h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spec-category ul {
    list-style: none;
    padding: 0;
}

.spec-category li {
    padding: 10px 0;
    padding-left: 25px;
    position: relative;
    font-size: 1.05rem;
}

.spec-category li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--honey);
    font-weight: bold;
}

.rig-cta {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.rig-cta p {
    margin-bottom: 15px;
}

.cta-button-outline {
    display: inline-block;
    border: 2px solid var(--white);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button-outline:hover {
    background-color: var(--white);
    color: var(--navy);
    transform: translateY(-3px);
}

/* ─────────────────────────────────────────────────────────────── */
/* 🎯 WHY RV LIFE ENHANCED                                         */
/* ─────────────────────────────────────────────────────────────── */
.why-rv-enhanced {
    padding: 100px 20px;
    background-color: var(--off-white);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}

.reasons-grid-four {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 80px;
}

.reason-card-enhanced {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border-left: 4px solid var(--teal);
}

.reason-card-enhanced:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-left-color: var(--coral);
}

.reason-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.reason-card-enhanced h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--navy);
    margin-bottom: 15px;
}

.reason-card-enhanced > p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin-bottom: 20px;
}

.reason-example {
    background-color: var(--light-gray);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.reason-example strong {
    color: var(--coral);
    display: block;
    margin-bottom: 8px;
}

.reason-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.reason-link:hover {
    color: var(--coral);
}

/* Why RV CTA */
.why-rv-cta {
    background: linear-gradient(135deg, var(--navy) 0%, var(--charcoal) 100%);
    padding: 60px;
    border-radius: 20px;
    text-align: center;
    color: var(--white);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.why-rv-cta h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.why-rv-cta > p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.email-capture-form {
    display: flex;
    gap: 15px;
    max-width: 600px;
    margin: 0 auto 20px;
}

.email-capture-form input[type="email"] {
    flex: 1;
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
}

.email-capture-form .cta-button {
    padding: 15px 40px;
    background-color: var(--coral);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.email-capture-form .cta-button:hover {
    background-color: var(--teal);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(78, 205, 196, 0.4);
}

.form-privacy {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 10px;
}

/* ─────────────────────────────────────────────────────────────── */
/* ❓ FAQS ENHANCED - Accordion Style                              */
/* ─────────────────────────────────────────────────────────────── */
.faqs-enhanced {
    padding: 100px 20px;
    background-color: var(--white);
}

.faq-accordion {
    max-width: 900px;
    margin: 0 auto 60px;
}

.faq-item-enhanced {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.faq-item-enhanced:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.faq-question {
    width: 100%;
    background-color: var(--light-gray);
    border: none;
    padding: 25px 30px;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background-color: var(--off-white);
}

.faq-question[aria-expanded="true"] {
    background-color: var(--teal);
    color: var(--white);
}

.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: var(--white);
}

.faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 25px 30px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--charcoal);
}

.faq-answer a {
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
}

.faq-answer a:hover {
    color: var(--coral);
    text-decoration: underline;
}

/* FAQ CTA */
.faq-cta {
    text-align: center;
    padding: 60px;
    background: linear-gradient(135deg, var(--coral) 0%, var(--teal) 100%);
    border-radius: 20px;
    color: var(--white);
}

.faq-cta h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.faq-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

/* ─────────────────────────────────────────────────────────────── */
/* 🎬 VIDEO STORY SECTION                                          */
/* ─────────────────────────────────────────────────────────────── */
.video-story-section {
    padding: 100px 20px;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}

.video-embed-wrapper {
    max-width: 1000px;
    margin: 0 auto 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.video-embed-wrapper iframe {
    display: block;
}

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

.video-cta p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--charcoal);
}

.video-cta .cta-button-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ─────────────────────────────────────────────────────────────── */
/* 🔗 RELATED SERVICES SECTION                                     */
/* ─────────────────────────────────────────────────────────────── */
.related-services-section {
    padding: 100px 20px;
    background-color: var(--off-white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.service-card-enhanced {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    text-align: center;
}

.service-card-enhanced:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.service-icon-large {
    font-size: 4rem;
    margin-bottom: 20px;
}

.service-card-enhanced h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--navy);
    margin-bottom: 15px;
}

.service-card-enhanced > p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin-bottom: 25px;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    text-align: left;
}

.service-features li {
    padding: 10px 0;
    font-size: 1rem;
    color: var(--charcoal);
}

.service-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.service-link:hover {
    color: var(--coral);
}

/* ─────────────────────────────────────────────────────────────── */
/* 🎯 FINAL CTA SECTION                                            */
/* ─────────────────────────────────────────────────────────────── */
.final-cta-section {
    padding: 100px 20px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--charcoal) 100%);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cta-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 20px;
}

.cta-content > p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.95;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.form-group input {
    width: 100%;
    padding: 18px 25px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}

.cta-button-large {
    padding: 18px 50px;
    background-color: var(--coral);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.3);
}

.cta-button-large:hover {
    background-color: var(--teal);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(78, 205, 196, 0.4);
}

.form-benefits {
    font-size: 1rem;
    margin-bottom: 10px;
    opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────── */
/* 📱 RESPONSIVE DESIGN                                            */
/* ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .family-gallery,
    .family-story,
    .rig-showcase {
        grid-template-columns: 1fr;
    }
    
    .story-cta-box {
        position: static;
    }
}

@media (max-width: 768px) {
    .section-headline {
        font-size: 2.2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .reasons-grid {
        grid-template-columns: 1fr;
    }
    
    .email-capture-form {
        flex-direction: column;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .section-headline {
        font-size: 1.8rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .why-rv-cta,
    .faq-cta,
    .cta-content {
        padding: 40px 20px;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ✅ END OF ENHANCED ABOUT US STYLES                              */
/* ═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────── */
/* 🎴 FLIP CARDS FOR FAMILY MEMBERS                                */
/* ─────────────────────────────────────────────────────────────── */
.flip-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.flip-card {
    background-color: transparent;
    height: 400px;
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.flip-card-front {
    background: linear-gradient(135deg, var(--teal) 0%, var(--coral) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
}

.flip-card-front img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.flip-card-front::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 2;
}

.member-name,
.member-role {
    position: relative;
    z-index: 3;
    color: var(--white);
    padding: 0 20px;
}

.member-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.member-role {
    font-size: 1rem;
    opacity: 0.95;
    margin-bottom: 20px;
}

.flip-card-back {
    background: linear-gradient(135deg, var(--navy) 0%, var(--charcoal) 100%);
    color: var(--white);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}

.flip-card-back h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--honey);
}

.flip-card-back p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.95;
}

/* Gallery Link Box */
.gallery-link-box {
    margin-top: 30px;
    padding: 25px;
    background-color: var(--light-gray);
    border-radius: 12px;
    text-align: center;
}

.gallery-link-box p {
    margin-bottom: 15px;
}

.cta-button-outline-dark {
    display: inline-block;
    border: 2px solid var(--navy);
    color: var(--navy);
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button-outline-dark:hover {
    background-color: var(--navy);
    color: var(--white);
    transform: translateY(-3px);
}