@media (max-width: 991px) {
  .hero h1 { font-size: 3rem; }
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline::after { left: 31px; }
  .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
  .timeline-item.right { left: 0; }
  .timeline-item::after { left: 21px; }
  .right::after { left: 21px; }
}

/* Advanced Mobile Fixes */
@media (max-width: 768px) {
    /* 1. Kill Horizontal Scrolling */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
    }

    /* 2. Fixed Header (Floats over the Hero Image and stays when scrolling) */
    header { 
        padding: 10px 0 !important; 
        position: fixed !important; /* Keeps it on screen */
        top: 0;
        left: 0;
        width: 100%;
        background: transparent !important; /* Lets the hero image show through */
        z-index: 9999 !important;
        transition: all 0.3s ease;
    }

    /* Solid background applied automatically when you scroll down */
    header.scrolled {
        padding: 5px 0 !important;
        background: rgba(25, 60, 40, 0.95) !important; /* Dark green glass */
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 5px 15px !important;
        box-sizing: border-box !important; 
    }

    /* 3. Hamburger & Logo */
    .hamburger {
        display: block !important;
        font-size: 1.6rem !important;
        margin: 0 !important; 
        padding: 0 !important;
        z-index: 10000;
        cursor: pointer;
        color: var(--gold);
    }

    header.scrolled .hamburger {
        color: #ffffff !important; 
    }

    .logo img {
        height: 45px !important; 
        width: auto !important;
        max-width: 200px !important;
        transition: height 0.3s ease;
    }

    header.scrolled .logo img {
        height: 35px !important; /* Shrinks the logo slightly when scrolling */
    }

    /* 4. PREMIUM SLIGHTLY TRANSPARENT DROPDOWN   */
    .nav-links {
        position: absolute;
        top: 100%; 
        left: 0;
        width: 100%;
        background-color: rgba(25, 60, 40, 0.95) !important; 
        backdrop-filter: blur(8px); 
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        max-height: 0; 
        overflow: hidden; 
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
        z-index: 9998;
        box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        gap: 0.5rem !important;
    }
    
    .nav-links.nav-active {
        max-height: 250px !important; 
        /* padding: 10px 0 !important; */
        border-top: 2px solid rgba(212, 175, 55, 0.2);
    }
    
    /* .nav-links li {
        margin: 8px 0;
    } */

    /* Premium Typography for Mobile Menu */
    #header .nav-links li a {
        color: #ffffff !important;
        font-family: var(--font-heading), serif !important; 
        font-size: 1.2rem !important;
        font-weight: 400 !important;
        letter-spacing: 1px;
        transition: color 0.3s ease;
    }

    #header .nav-links li a.active {
        color: var(--gold) !important;
    }

    .close-menu { display: none !important; }

    /* 5. Fix Hero Overlap */
    .hero { 
        padding-top: 100px !important; /* Pushes text down so it doesn't hit the logo */
    }
    .hero-content { 
        margin-top: 0 !important; 
        padding: 0 15px !important; 
    }
    .hero h1 { font-size: 2.2rem !important; }

    /* 6. Form & Layout Fixes */
    .container.bg-cream { padding: 2rem 1.5rem !important; margin-top: -30px !important; }
    .contact-form { padding: 1.5rem !important; min-width: 100% !important; border-radius: 12px !important; }
    .contact-info { min-width: 100% !important; }
    .contact-split { gap: 2rem !important; }
    .trust-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }

    /* Mobile Fix for Medium Snake Timeline */
    .med-step {
        flex-direction: row !important; /* Keeps icon and text side-by-side */
        align-items: flex-start !important;
        padding-bottom: 40px !important;
    }
    
    .med-icon {
        width: 55px !important; 
        height: 55px !important;
        min-width: 55px !important;
        font-size: 1.3rem !important;
    }

    .med-content {
        width: calc(100% - 75px) !important;
        padding: 15px 20px !important;
    }
    
    /* Straight vertical line for mobile */
    .med-step::after {
        left: 27.5px !important; /* Centers line under the 55px mobile icon */
        width: 0 !important; 
        border-top: none !important;
        border-right: none !important;
        border-left: 3px dashed var(--gold) !important;
        border-radius: 0 !important;
        top: 55px !important;
        height: calc(100% - 15px) !important;
    }

    .success-toast {
        padding: 12px 20px !important; /* Thinner padding */
        font-size: 0.95rem !important; /* Smaller text size */
        width: max-content !important; /* Keeps it wrapped tightly around the text */
        max-width: 90vw !important; /* Ensures it never touches the edges of the phone */
        gap: 8px !important; /* Brings the icon and text closer */
        text-align: center;
    }
    
    .success-toast i {
        font-size: 1.1rem !important; /* Slightly smaller icon */
    }

    /* Google Reviews Mobile Fix                  */
    .reviews-split-layout {
        flex-direction: column !important;
        gap: 2.5rem !important;
    }
    
    .reviews-summary {
        flex: 1 1 auto !important;
        width: 100% !important;
        padding: 30px 20px !important;
    }
    
    .reviews-carousel-wrapper {
        width: 100vw !important;
        margin-left: -4% !important; /* Pulls it out of the container padding */
        padding: 0 4% !important;
    }
    
    .reviews-carousel {
        gap: 15px !important;
        padding-bottom: 15px !important;
    }
    
    .review-card {
        flex: 0 0 85vw !important; /* Takes up 85% of phone screen so user sees next card peeking */
        padding: 20px !important;
    }
    
    .rating-number {
        font-size: 3rem !important;
    }
}

@media (max-width: 480px) {
  .highlights { margin-top: 2rem; padding-top: 2rem; }
  .highlights-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}