/* 2. Mobile Breakpoint (Tablets & Phones) */
@media (max-width: 768px) {

	h1 { font-size: 2.5rem !important; }
	
  section{
	  padding:100px 10px;
  }
	.content-wrapper { grid-template-columns: 1fr; }
	.toc-sticky { display: none; } /* Hide TOC on mobile */
	.article-title { font-size: 2.2rem; }
	.author-box { flex-direction: column; text-align: center; }
  .menu-toggle {
    display: flex;
    /* Show hamburger */
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    z-index: 1000;

    /* Animation State: Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  /* Active State (When menu is open) */
  .nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Make links bigger on mobile */
  .nav-link-back {
    font-size: 1.2rem;
  }

  .btn-cta {
    width: 80%;
    text-align: center;
    padding: 15px;
    font-size: 1rem;
  }

  /* 3. Hamburger Animation to 'X' */
  .menu-toggle.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
  
  .client-grid {
        /* Force exactly 2 equal columns */
        grid-template-columns: repeat(2, 1fr) !important; 
        
        /* Reduce gap slightly so they don't look squished */
        gap: 15px !important; 
    }

    /* Optional: Make the logo styling smaller so it fits nicely */
    .client-card {
        padding: 15px 10px !important; /* Reduce padding */
    }
    .logo-wrapper {
        height: 50px !important; /* Slightly shorter height */
    }
	
	/* Target the bottom bar of the footer */
    footer > div:last-child {
        /* This flips the order: Links go to top, Copyright goes to bottom */
        flex-direction: column-reverse !important; 
        
        /* Center everything */
        align-items: center !important;
        text-align: center !important;
        
        /* Add space between the links and the copyright */
        gap: 20px !important; 
    }
    
    /* Optional: Add some breathing room to the links */
    footer > div:last-child span:last-child {
        margin-bottom: 5px;
        display: block;
    }
	
	.toggle-wrapper {
		background: #fafafa;
		padding: 2px;
		border-radius: 24px;
		margin-top: 50px;
		text-align: center;
		border: 1px solid #eee;
	}
	
	/* Target the tile grid in the Estimator page */
    .tile-grid {
        /* Force 2 equal columns */
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* Reduce gap to save space */
        gap: 10px !important;
    }

    /* Make tiles more compact for mobile */
    .select-tile {
        padding: 15px 10px !important; /* Less padding */
    }
    
    .tile-icon {
        font-size: 1.5rem !important; /* Smaller icon */
        margin-bottom: 5px !important;
    }
    
    .tile-name {
        font-size: 0.85rem !important; /* Smaller text */
    }
    
    /* Adjust the checkmark position */
    .check-icon {
        top: 5px !important;
        right: 5px !important;
    }
	
	 /* 1. Stack the columns vertically */
	.contact-layout {
		grid-template-columns: 1fr !important; 
		gap: 50px;
	}

	/* 2. Fix order: Show Info box FIRST, then Form (Optional, remove 'order' to keep Form first) */
	/* .contact-info-box { order: -1; } */ 

	/* 3. Reduce Header Padding */
	.contact-hero {
		padding-top: 120px;
		padding-bottom: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* 4. Contact page*/
	 .executive-card {
		flex-direction: column; /* Stack columns */
	}
	.info-panel, .form-panel {
		width: 100%;
		border-right: none;
	}
	.info-panel {
		border-bottom: 1px solid #e5e7eb;
		padding: 30px;
	}
	.form-panel {
		padding: 30px;
	}
	.form-grid {
		grid-template-columns: 1fr; /* Single column fields on mobile */
	}
	.full-width {
		grid-column: span 1;
	}
	.submit-btn {
		width: 100%;
		float: none;
	}
}