/* Import lightbox styles */

@import './lightbox.css';

/* =================================================================
   MOBILE-FIRST CSS ARCHITECTURE
   =================================================================
   
   This CSS follows a mobile-first approach:
   1. Base styles are designed for mobile (320px+)
   2. Tablet styles use min-width: 768px
   3. Desktop styles use min-width: 1024px
   4. Large desktop styles use min-width: 1200px
   
   Critical CSS is loaded inline in HTML for performance.
   Media queries progress from smallest to largest screens.
   ================================================================= */


/* RESET AND BASE STYLES (Mobile First) */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Mobile touch optimizations */
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: var(--tap-highlight-color);
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Prevent horizontal overflow on small screens */
    max-width: 100%;
}


/* Ensure all containers prevent horizontal overflow */

section,
div,
article,
aside,
header,
footer,
main,
nav {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* Prevent images and videos from causing overflow */

img,
video,
iframe,
svg {
    max-width: 100% !important;
    height: auto;
}


/* Ensure text content doesn't cause overflow */

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}


/* Prevent table overflow */

table {
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
}


/* Prevent pre and code blocks from overflowing */

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}


/* Touch-friendly scrolling */

html {
    /* Smooth scrolling for anchor links */
    scroll-behavior: smooth;
    /* Better touch scrolling */
    -webkit-overflow-scrolling: touch;
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
}


/* Respect user's reduced motion preference */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* CSS Variables */

:root {
    /* Brand Colors */
    --asphalt-dark: #2C2C2C;
    --safety-yellow: #FFD700;
    --pure-white: #FFFFFF;
    --white: #FFFFFF;
    /* Status Colors */
    --error-red: #e74c3c;
    --success-green: #27ae60;
    --warning-amber: #f39c12;
    /* Additional Colors */
    --light-gray: #f8f9fa;
    --concrete: #ecf0f1;
    --road-gray: #7f8c8d;
    --traffic-orange: #e67e22;
    --primary-color: #FFD700;
    --secondary-color: #e67e22;
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;
    /* Mobile-specific spacing overrides */
    --mobile-container-padding: 1rem;
    --mobile-section-padding-v: 2rem;
    --mobile-section-padding-h: 0;
    /* Border Radius */
    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    /* Typography */
    --font-primary: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Effects */
    --transition: all 0.3s ease;
    /* Mobile Touch Optimizations */
    --touch-target-size: 44px;
    /* Apple and Google recommended minimum */
    --tap-highlight-color: rgba(255, 215, 0, 0.3);
    /* Safety yellow with opacity */
}


/* Blog Styles */

.blog-page {
    padding: var(--spacing-4xl) 0;
    background: var(--light-gray);
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.blog-post {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.blog-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.blog-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.blog-post:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 600;
}

.blog-content {
    padding: var(--spacing-lg);
}

.blog-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.blog-excerpt {
    color: var(--road-gray);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--road-gray);
}

.blog-date {
    font-weight: 500;
}

.blog-readtime {
    color: var(--warning-amber);
    font-weight: 500;
}

.blog-entry {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.blog-entry h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--asphalt-dark);
    margin: var(--spacing-lg) 0;
    line-height: 1.2;
}

.blog-featured-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.blog-entry .blog-content {
    padding: var(--spacing-xl);
}

.blog-entry .blog-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--asphalt-dark);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.blog-entry .blog-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--asphalt-dark);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.blog-entry .blog-content p {
    color: var(--road-gray);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.blog-entry .blog-content ul,
.blog-entry .blog-content ol {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-xl);
}

.blog-entry .blog-content li {
    color: var(--road-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-xs);
}

.blog-entry .blog-content code {
    background: var(--light-gray);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

.blog-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.blog-table th,
.blog-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--light-gray);
}

.blog-table th {
    background: var(--asphalt-dark);
    color: var(--white);
    font-weight: 600;
}

.blog-table tr:hover {
    background: var(--light-gray);
}

.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl);
    border-top: 1px solid var(--light-gray);
    background: var(--light-gray);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-md);
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--road-gray);
    max-width: 600px;
    margin: 0 auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}


/* Blog responsive design - Mobile First */


/* Base mobile styles already set above */


/* Tablet styles for blog */

@media (min-width: 768px) {
    .blog-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    .blog-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* Desktop styles for blog */

@media (min-width: 1024px) {
    .blog-entry h1 {
        font-size: 2.5rem;
    }
    .blog-entry .blog-content {
        padding: var(--spacing-xl);
    }
    .section-header h2 {
        font-size: 2.5rem;
    }
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    /* Prevent horizontal scroll on mobile */
    width: 100%;
    max-width: 100vw;
    position: relative;
    /* Better text rendering on mobile */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Prevent content jumping */
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* Disable hover effects on touch devices */

@media (hover: none) and (pointer: coarse) {
    /* Remove all hover effects on touch devices */
    .btn:hover,
    .service-card:hover,
    .gallery-item:hover,
    .gallery-card:hover,
    .testimonial-card:hover,
    .team-member:hover,
    .reason-card:hover,
    .contact-method:hover,
    .blog-post:hover,
    nav a:hover,
    .social-links a:hover,
    .filter-btn:hover,
    .button-group .button:hover,
    .mobile-nav-links a:hover,
    .tool-button:hover {
        /* Reset all hover transforms and effects */
        transform: none !important;
        box-shadow: inherit !important;
        background: inherit !important;
        color: inherit !important;
        border-color: inherit !important;
    }
    /* Keep essential visual feedback for touch */
    .btn:active,
    .filter-btn:active,
    .button-group .button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    /* Disable image scaling on hover for touch devices */
    .gallery-item:hover .gallery-image img,
    .gallery-card:hover .card-image img,
    .blog-post:hover .blog-image img,
    .service-card:hover::before {
        transform: none !important;
        animation: none !important;
    }
    /* Disable overlay animations on touch devices */
    .gallery-item .gallery-overlay,
    .gallery-card .card-overlay {
        opacity: 1 !important;
        background: linear-gradient( to top, rgba(44, 44, 44, 0.85) 0%, rgba(44, 44, 44, 0.6) 40%, transparent 100%) !important;
    }
    /* Remove shimmer effects on touch devices */
    .service-card::before {
        display: none !important;
    }
    /* Disable button ripple effects that rely on hover */
    .btn::before {
        display: none !important;
    }
    /* Remove tooltip hover effects on touch */
    .tooltip:hover::before,
    .tooltip:hover::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* Header styles */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(44, 44, 44, 0.95);
    backdrop-filter: blur(10px);
    transition: var(--transition);
    padding: var(--spacing-md) 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

header h1 {
    color: var(--safety-yellow);
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

nav ul {
    display: flex;
    list-style: none;
    gap: var(--spacing-xl);
    margin: 0;
    padding: 0;
}

nav a {
    color: var(--pure-white);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    padding: var(--spacing-sm) 0;
    position: relative;
}

nav a:hover,
nav a:focus {
    color: var(--safety-yellow);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--safety-yellow);
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

.social-links {
    display: flex;
    gap: var(--spacing-md);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--pure-white);
    transition: var(--transition);
    text-decoration: none;
}

.social-links a:hover {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
    transform: translateY(-2px);
}

.social-links svg {
    width: 20px;
    height: 20px;
}


/* Main content */

main {
    padding-top: 100px;
}


/* Hero section */

#hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/* Hero video background */

#hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    background: #000;
    opacity: 1;
}


/* Ensure video fills the container */

@media (aspect-ratio: 16/9) {
    #hero video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #hero video {
        width: auto;
        height: 100%;
    }
}


/* Hero overlay */

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 135deg, rgba(44, 62, 80, 0.7) 0%, rgba(231, 76, 60, 0.5) 50%, rgba(44, 62, 80, 0.7) 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Hero content positioning */

.hero-content {
    max-width: 800px;
    padding: 2rem;
    color: var(--white);
    text-align: center;
    z-index: 3;
    position: relative;
}


/* Basic button styles for hero */

.btn {
    display: inline-block !important;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
    text-align: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.btn-primary {
    background: var(--safety-yellow) !important;
    color: var(--asphalt-dark) !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    font-weight: 700;
}

.btn-primary:hover {
    background: #e6c200 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.btn-secondary {
    background: transparent !important;
    color: var(--pure-white) !important;
    border: 2px solid var(--pure-white);
    font-weight: 600;
}

.btn-secondary:hover {
    background: var(--pure-white) !important;
    color: var(--asphalt-dark) !important;
    transform: translateY(-2px);
}


/* Hero CTA buttons */

.hero-cta {
    display: flex !important;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}


/* Hero features */

.hero-features {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.feature-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}


/* Hero title and subtitle with fluid typography */

.hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 2.5rem;
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
}


/* Responsive design */

@media (max-width: 600px) {
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .hero-content {
        padding: 1.5rem;
    }
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
    .btn {
        width: 250px;
        text-align: center;
    }
    .hero-features {
        flex-direction: column;
        align-items: center;
    }
    nav ul {
        flex-direction: column;
        gap: 1rem;
    }
    header h1 {
        font-size: 1.5rem;
    }
}

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

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .hero-content {
        padding: 1rem;
    }
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    .feature-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    #services h2,
    #gallery h2 {
        font-size: 2rem;
    }
}


/* ============================================ */


/*                Mobile Navigation             */


/* ============================================ */


/* Mobile Menu Toggle Button - Hamburger */

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 48px;
    height: 48px;
    position: relative;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    z-index: 1001;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:focus {
    outline: 2px solid var(--safety-yellow);
    outline-offset: 2px;
}


/* Hamburger Lines */

.hamburger-line {
    width: 24px;
    height: 3px;
    background: var(--pure-white);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}


/* Active hamburger animation (X) */

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}


/* Mobile Navigation Menu */

.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: linear-gradient(135deg, var(--asphalt-dark) 0%, #1a1a1a 100%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

.mobile-nav.open {
    right: 0;
}


/* Mobile Navigation Header */

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 2px solid var(--safety-yellow);
    background: rgba(255, 215, 0, 0.1);
    min-height: 80px;
}

.mobile-nav-header h2 {
    color: var(--safety-yellow);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.mobile-nav-close {
    background: none;
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pure-white);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus {
    background: rgba(255, 215, 0, 0.2);
    color: var(--safety-yellow);
    outline: none;
}

.mobile-nav-close svg {
    width: 24px;
    height: 24px;
}


/* Mobile Navigation Links */

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

.mobile-nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-links a {
    display: block;
    padding: var(--spacing-lg);
    color: var(--pure-white);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:focus {
    background: rgba(255, 215, 0, 0.15);
    color: var(--safety-yellow);
    padding-left: calc(var(--spacing-lg) + 10px);
}

.mobile-nav-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--safety-yellow);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    transform-origin: bottom;
}

.mobile-nav-links a:hover::before,
.mobile-nav-links a:focus::before {
    transform: scaleY(1);
}


/* Mobile Contact Section */

.mobile-nav-contact {
    padding: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.mobile-nav-contact h3 {
    color: var(--safety-yellow);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
    font-weight: 600;
}

.mobile-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    min-height: 44px;
}

.mobile-contact-item svg {
    width: 20px;
    height: 20px;
    color: var(--safety-yellow);
    flex-shrink: 0;
}

.mobile-contact-item a {
    color: var(--pure-white);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    flex: 1;
}

.mobile-contact-item a:hover,
.mobile-contact-item a:focus {
    color: var(--safety-yellow);
}


/* Mobile Social Links */

.mobile-nav-social {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--pure-white);
    transition: all 0.3s ease;
    text-decoration: none;
}

.mobile-nav-social a:hover,
.mobile-nav-social a:focus {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
    transform: translateY(-2px);
}

.mobile-nav-social svg {
    width: 24px;
    height: 24px;
}


/* Mobile Navigation Overlay */

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(2px);
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* Desktop vs Mobile Navigation Display */

.desktop-nav {
    display: flex;
}

.desktop-social {
    display: flex;
}


/* Responsive Styles */

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
        order: 3;
    }
    .desktop-nav {
        display: none;
    }
    .desktop-social {
        display: none;
    }
    .header-container {
        position: relative;
    }
    /* Prevent body scroll when menu is open */
    body.mobile-nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    /* Ensure header stays above mobile menu */
    header {
        position: relative;
        z-index: 1002;
    }
}

@media (max-width: 480px) {
    .mobile-nav {
        width: 100%;
        right: -100%;
    }
    .mobile-nav.open {
        right: 0;
    }
    .mobile-nav-links a {
        font-size: 1.2rem;
        padding: calc(var(--spacing-lg) + 4px) var(--spacing-lg);
    }
}


/* Animation for smooth entrance */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.mobile-nav-links li {
    animation: slideInRight 0.3s ease forwards;
    opacity: 0;
    transform: translateX(20px);
}

.mobile-nav.open .mobile-nav-links li:nth-child(1) {
    animation-delay: 0.1s;
}

.mobile-nav.open .mobile-nav-links li:nth-child(2) {
    animation-delay: 0.15s;
}

.mobile-nav.open .mobile-nav-links li:nth-child(3) {
    animation-delay: 0.2s;
}

.mobile-nav.open .mobile-nav-links li:nth-child(4) {
    animation-delay: 0.25s;
}

.mobile-nav.open .mobile-nav-links li:nth-child(5) {
    animation-delay: 0.3s;
}

.mobile-nav.open .mobile-nav-links li:nth-child(6) {
    animation-delay: 0.35s;
}


/* Focus states for accessibility */

.mobile-nav a:focus,
.mobile-nav button:focus {
    outline: 2px solid var(--safety-yellow);
    outline-offset: 2px;
}


/* High contrast mode support */

@media (prefers-contrast: high) {
    .mobile-nav {
        background: #000;
        border: 2px solid #fff;
    }
    .mobile-nav-links a {
        border-bottom: 2px solid #fff;
    }
}


/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
    .mobile-nav,
    .mobile-nav-overlay,
    .hamburger-line,
    .mobile-nav-links a {
        transition: none;
    }
    .mobile-nav-links li {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* Custom scrollbar */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}


/* Smooth scroll behavior */

html {
    scroll-behavior: smooth;
}


/* Reduce motion for accessibility */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
     ::before,
     ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}


/* Utility classes */

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

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

.slide-up {
    transform: translateY(30px);
    opacity: 0;
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* Typography using brand guidelines with fluid sizing */

body {
    font-family: var(--font-secondary);
    font-size: clamp(14px, 2.5vw, 16px);
    line-height: 1.6;
    color: var(--asphalt-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: 500;
    line-height: 1.3;
    color: var(--asphalt-dark);
}


/* Fluid typography using clamp() for better mobile readability */

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 500;
    line-height: 1.25;
}

h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 500;
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    line-height: 1.35;
}

h5 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.4;
}

h6 {
    font-size: clamp(0.9rem, 2vw, 1.125rem);
    line-height: 1.45;
}


/* Container and layout */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}

.section-subtitle {
    font-size: 18px;
    color: var(--road-gray);
    margin-top: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* Button System - Enhanced for Mobile Accessibility */

.btn {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: var(--transition);
    text-align: center;
    min-height: 44px;
    /* Minimum touch target size for accessibility */
    min-width: 44px;
    position: relative;
    /* Enhanced touch feedback */
    -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
    touch-action: manipulation;
    user-select: none;
}

.btn-primary {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    background: #E6C200;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--safety-yellow);
    border: 2px solid var(--safety-yellow);
}

.btn-secondary:hover {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
}

.btn-outline {
    background: transparent;
    color: var(--asphalt-dark);
    border: 2px solid var(--light-gray);
}

.btn-outline:hover {
    border-color: var(--safety-yellow);
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
}

.btn-emergency {
    background: var(--error-red);
    color: var(--pure-white);
    font-weight: 700;
    animation: pulse 2s infinite;
}

.btn-emergency:hover {
    background: #C82333;
    transform: scale(1.05);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}


/* Advanced Hover Effects */

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transform: rotate(45deg);
    transition: var(--transition);
    opacity: 0;
}

.service-card:hover::before {
    animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
    }
}


/* Button Ripple Effect */

.btn {
    position: relative;
    overflow: hidden;
}

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

.btn:active::before {
    width: 300px;
    height: 300px;
}


/* Loading States */


/* Floating Animation for CTA */

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.btn-emergency {
    animation: float 3s ease-in-out infinite;
}


/* Reveal on Scroll Animations */

.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal:not(.revealed) {
    opacity: 0;
    transform: translateY(50px);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}


/* Stagger Animation Delays */

.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}

.stagger-4 {
    transition-delay: 0.4s;
}

.stagger-5 {
    transition-delay: 0.5s;
}

.stagger-6 {
    transition-delay: 0.6s;
}


/* Interactive Gallery Enhancements */

.gallery-item {
    cursor: pointer;
}

.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}


/* Team Member Hover Effects */

.team-member {
    cursor: pointer;
}

.team-member .member-photo {
    transition: var(--transition);
}

.team-member:hover .member-photo {
    transform: scale(1.1);
    border-color: var(--traffic-orange);
}

.team-member .member-credentials {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.team-member:hover .member-credentials {
    max-height: 200px;
}


/* Service Card Icon Animation */

.service-icon {
    transition: var(--transition);
}

.service-card:hover .service-icon {
    transform: rotate(10deg) scale(1.1);
    background: var(--traffic-orange);
    color: var(--pure-white);
}


/* Contact Method Enhancements */

.contact-method::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--safety-yellow), var(--traffic-orange));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--border-radius-lg);
    z-index: -1;
}

.contact-method:hover::before {
    opacity: 0.1;
}


/* Progress Bar for Forms */


/* Success States */

.form-group.success input,
.form-group.success select,
.form-group.success textarea {
    border-color: var(--success-green);
    background: rgba(40, 167, 69, 0.05);
}

.form-group.success::after {
    content: '✓';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success-green);
    font-weight: bold;
}


/* Error States */

.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-color: var(--error-red);
    background: rgba(220, 53, 69, 0.05);
}

.form-group.error::after {
    content: '✗';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--error-red);
    font-weight: bold;
}


/* Notification Animations */

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    color: var(--pure-white);
    font-weight: 600;
    z-index: 10000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    max-width: 300px;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    background: var(--success-green);
}

.notification.error {
    background: var(--error-red);
}

.notification.warning {
    background: var(--warning-amber);
    color: var(--asphalt-dark);
}


/* Modal Animations */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--pure-white);
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: scale(1);
}


/* Loading Overlay */


/* Tooltip Styles */

.tooltip {
    position: relative;
    cursor: help;
}

.tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--asphalt-dark);
    color: var(--pure-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    margin-bottom: 5px;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--asphalt-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}


/* Services Section Styles */

.services-section {
    padding: var(--spacing-4xl) 0;
    background: var(--concrete);
}

.service-category-title {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    color: var(--asphalt-dark);
    font-size: 32px;
}

.asphalt-service-grid,
.concrete-service-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-4xl);
}

.service-card {
    background: var(--pure-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.service-card.featured {
    border: 3px solid var(--safety-yellow);
}

.service-hero {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
    background: linear-gradient(135deg, var(--asphalt-dark), var(--road-gray));
    color: var(--pure-white);
}

.service-icon.large {
    width: 80px;
    height: 80px;
    background: var(--safety-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--asphalt-dark);
    flex-shrink: 0;
}

.service-icon.large svg {
    width: 40px;
    height: 40px;
}

.service-hero-content h4 {
    color: var(--pure-white);
    font-size: 24px;
    margin-bottom: var(--spacing-md);
}

.service-lead {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.asphalt-features-grid,
.concrete-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.feature-category h5 {
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-md);
    font-size: 18px;
    border-bottom: 2px solid var(--safety-yellow);
    padding-bottom: var(--spacing-sm);
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features li {
    padding: var(--spacing-sm) 0;
    color: var(--road-gray);
    position: relative;
    padding-left: var(--spacing-lg);
    font-size: 14px;
    line-height: 1.4;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-green);
    font-weight: bold;
}

.asphalt-highlights,
.concrete-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--light-gray);
    border-radius: var(--border-radius);
}

.highlight-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.highlight-item strong {
    display: block;
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-xs);
    font-size: 14px;
}

.highlight-item p {
    margin: 0;
    color: var(--road-gray);
    font-size: 12px;
    line-height: 1.3;
}

.service-cta {
    padding: var(--spacing-xl);
    background: var(--concrete);
    text-align: center;
}

.pricing-info {
    margin-bottom: var(--spacing-lg);
}

.service-price {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--traffic-orange);
    margin-bottom: var(--spacing-xs);
}

.price-note {
    display: block;
    font-size: 14px;
    color: var(--road-gray);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.services-bottom-cta {
    background: linear-gradient(135deg, var(--safety-yellow), var(--traffic-orange));
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-4xl);
    text-align: center;
    color: var(--asphalt-dark);
}

.cta-content h3 {
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-md);
}

.cta-content p {
    margin-bottom: var(--spacing-xl);
    font-size: 16px;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    font-weight: 600;
}

.feature-icon {
    font-size: 18px;
}


/* Blog Section Styles */

.recent-blog-section {
    padding: var(--spacing-4xl) 0;
    background: var(--pure-white);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);
}

.blog-post {
    background: var(--pure-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.blog-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.blog-post:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.blog-content {
    padding: var(--spacing-xl);
}

.blog-content h3 {
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-md);
    font-size: 20px;
    line-height: 1.3;
}

.blog-excerpt {
    color: var(--road-gray);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    font-size: 12px;
    color: var(--road-gray);
}

.blog-date,
.blog-readtime {
    font-weight: 500;
}


/* Blog CTA section */

.blog-cta {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-xl);
}

.blog-cta p {
    font-size: 18px;
    margin-bottom: var(--spacing-lg);
    color: var(--road-gray);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* Gallery Section Styles */

#gallery {
    padding: var(--spacing-4xl) 0;
    background: var(--pure-white);
}

.gallery-filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-3xl);
    flex-wrap: wrap;
}

.filter-btn {
    background: var(--pure-white);
    border: 1px solid var(--concrete);
    color: var(--road-gray);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}

.filter-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--asphalt-dark);
}

.filter-btn.cs-active {
    background: var(--safety-yellow);
    border-color: var(--safety-yellow);
    color: var(--asphalt-dark);
    box-shadow: var(--shadow-md);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    max-width: 90vw;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.gallery-image {
    position: relative;
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: var(--transition);
}

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

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(44, 44, 44, 0.9), transparent);
    color: var(--pure-white);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: var(--transition);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-info h4 {
    color: var(--pure-white);
    margin-bottom: var(--spacing-xs);
}

.gallery-tag {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-top: var(--spacing-xs);
}

.gallery-expand {
    background: var(--safety-yellow);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--asphalt-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

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

.gallery-cta p {
    font-size: 18px;
    margin-bottom: var(--spacing-lg);
    color: var(--road-gray);
}


/* About Section Styles */

#about {
    padding: var(--spacing-4xl) 0;
    background: var(--concrete);
}

.about-content {
    max-width: 1000px;
    margin: 0 auto;
}

.company-story {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
    margin-bottom: var(--spacing-4xl);
}

.story-text h3 {
    margin-bottom: var(--spacing-lg);
    color: var(--asphalt-dark);
}

.story-text p {
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    color: var(--road-gray);
}

.company-stats {
    display: flex;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 700;
    color: var(--traffic-orange);
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: var(--road-gray);
    margin-top: var(--spacing-xs);
}

.story-image img {
    width: 100%;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

.team-section {
    margin-bottom: var(--spacing-4xl);
}

.team-section h3 {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}

.team-member {
    background: var(--pure-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.member-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto var(--spacing-lg);
    border: 4px solid var(--safety-yellow);
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info h4 {
    margin-bottom: var(--spacing-xs);
}

.member-title {
    color: var(--traffic-orange);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.member-experience {
    color: var(--road-gray);
    font-size: 14px;
    margin-bottom: var(--spacing-md);
}

.member-credentials {
    list-style: none;
    text-align: left;
}

.member-credentials li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: var(--spacing-lg);
    font-size: 14px;
    color: var(--road-gray);
}

.member-credentials li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--safety-yellow);
    font-weight: bold;
}

.certifications-section h3 {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.cert-category {
    background: var(--pure-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

.cert-category h4 {
    margin-bottom: var(--spacing-lg);
    color: var(--asphalt-dark);
    text-align: center;
}

.cert-list {
    list-style: none;
}

.cert-list li {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--light-gray);
}

.cert-list li:last-child {
    border-bottom: none;
}

.cert-icon {
    margin-right: var(--spacing-md);
    font-size: 20px;
}


/* Contact Section Styles */

#contact {
    padding: var(--spacing-4xl) 0;
    background: var(--pure-white);
}

.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-4xl);
}

.contact-method {
    background: var(--concrete);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
    transition: var(--transition);
}

.contact-method:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.contact-method.emergency {
    background: linear-gradient(135deg, var(--error-red), #A71E2A);
    color: var(--pure-white);
}

.contact-method.emergency h3 {
    color: var(--pure-white);
}

.method-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg);
    background: var(--safety-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--asphalt-dark);
}

.contact-method.emergency .method-icon {
    background: var(--pure-white);
    color: var(--error-red);
}

.method-icon svg {
    width: 32px;
    height: 32px;
}

.method-info {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--asphalt-dark);
}

.contact-method.emergency .method-info {
    color: var(--pure-white);
}

.method-hours {
    font-size: 14px;
    color: var(--road-gray);
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
}

.contact-method.emergency .method-hours {
    color: rgba(255, 255, 255, 0.9);
}

.contact-form-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-4xl);
}

.contact-cards-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.contact-cards-left .contact-method {
    padding: var(--spacing-lg);
    margin: 0;
}

.contact-form-container {
    background: var(--concrete);
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

.contact-form-container h3 {
    margin-bottom: var(--spacing-xl);
    text-align: center;
    color: var(--asphalt-dark);
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 600;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-weight: 600;
    color: var(--asphalt-dark);
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    font-family: var(--font-secondary);
    font-size: 16px;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--safety-yellow);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form .btn-primary {
    margin-top: var(--spacing-lg);
    width: 100%;
}

.form-container {
    background: var(--concrete);
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
}

.form-container h3 {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

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

.form-group label {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-sm);
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 2px solid var(--light-gray);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    font-family: var(--font-secondary);
    font-size: 16px;
    transition: var(--transition);
    background: var(--pure-white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--safety-yellow);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    margin-right: var(--spacing-sm);
    width: 18px;
    height: 18px;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--light-gray);
    border-radius: 3px;
    margin-right: var(--spacing-sm);
    position: relative;
    transition: var(--transition);
}

.checkbox-label input:checked+.checkmark {
    background: var(--safety-yellow);
    border-color: var(--safety-yellow);
}

.checkbox-label input:checked+.checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--asphalt-dark);
    font-weight: bold;
    font-size: 12px;
}

.form-note {
    text-align: center;
    font-size: 14px;
    color: var(--road-gray);
    margin-top: var(--spacing-md);
}

.service-area-map {
    background: var(--concrete);
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
}

.service-area-map h3 {
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.map-container {
    margin-bottom: var(--spacing-xl);
}

.map-placeholder {
    background: var(--light-gray);
    border-radius: var(--border-radius);
    padding: var(--spacing-3xl);
    text-align: center;
    color: var(--road-gray);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.map-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--road-gray);
}

.service-areas {
    margin-bottom: var(--spacing-xl);
}

.area-group {
    margin-bottom: var(--spacing-lg);
}

.area-group h4 {
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 16px;
}

.area-group ul {
    list-style: none;
    padding-left: var(--spacing-lg);
}

.area-group li {
    padding: var(--spacing-xs) 0;
    color: var(--road-gray);
    position: relative;
}

.area-group li::before {
    content: '•';
    position: absolute;
    left: -var(--spacing-lg);
    color: var(--safety-yellow);
    font-weight: bold;
}

.area-description {
    color: var(--road-gray);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--light-gray);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--safety-yellow);
}


/* Image Placeholder Handling */

.gallery-image img,
.story-image img,
.member-photo img {
    transition: opacity 0.3s ease;
}

.gallery-image img:not([src]),
.gallery-image img[src=""],
.story-image img:not([src]),
.story-image img[src=""],
.member-photo img:not([src]),
.member-photo img[src=""] {
    opacity: 0;
}

.gallery-image::before,
.story-image::before,
.member-photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--light-gray), var(--concrete));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--road-gray);
    font-family: var(--font-primary);
    font-size: 14px;
    text-align: center;
    z-index: 1;
}

.gallery-image::before {
    content: 'Project Image\A Coming Soon';
    white-space: pre;
    background: linear-gradient(135deg, var(--safety-yellow), #E6C200);
    color: var(--asphalt-dark);
}

.story-image::before {
    content: 'Company History\A Photo Coming Soon';
    white-space: pre;
}

.member-photo::before {
    content: 'Team Photo\A Coming Soon';
    white-space: pre;
    border-radius: 50%;
}


/* Hide placeholder when image loads */

img[src]:not([src=""])+*::before,
img[src]:not([src=""])~*::before {
    display: none;
}


/* Ensure placeholders work with missing images */

.gallery-item:not(:has(img[src])) .gallery-image::before,
.company-story:not(:has(img[src])) .story-image::before,
.team-member:not(:has(img[src])) .member-photo::before {
    display: flex;
}


/* Testimonials Section Styles */

.testimonials-section {
    padding: var(--spacing-4xl) 0;
    background: var(--concrete);
}


/* New testimonials grid layout - 3 columns */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}


/* Info cards container - side by side with equal sizing */

.testimonials-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}


/* Updated stats section for new layout */

.testimonials-info-cards .testimonial-stats {
    display: flex;
    flex-direction: column;
    background: var(--pure-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 0;
    /* Remove bottom margin since it's in a grid */
}

.testimonials-info-cards .testimonial-stats h3 {
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    font-size: 24px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    flex: 1;
}


/* Updated CTA section for new layout */

.testimonials-info-cards .testimonial-cta {
    text-align: center;
    background: linear-gradient(135deg, var(--asphalt-dark), var(--road-gray));
    color: var(--pure-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin-top: 0;
    /* Remove top margin since it's in a grid */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-card {
    background: var(--pure-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 400px;
    /* Fixed height until expanded */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

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


/* Enhanced card expansion animation */

.testimonial-card.testimonial-expanded {
    height: auto;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}


/* Haze overlay for truncated testimonials */

.testimonial-card.testimonial-truncated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.testimonial-card.testimonial-truncated:hover::before {
    background: rgba(0, 0, 0, 0.4);
}

.testimonial-card.featured {
    border: 3px solid var(--safety-yellow);
    transform: scale(1.02);
}

.testimonial-card.featured:hover {
    transform: scale(1.02) translateY(-5px);
}

.testimonial-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    /* Normal padding since button is removed */
}

.testimonial-card .stars {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.testimonial-card .stars span {
    font-size: 20px;
    color: var(--safety-yellow);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.testimonial-card blockquote {
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    color: var(--road-gray);
    margin-bottom: var(--spacing-lg);
    /* Add margin for spacing */
    position: relative;
    padding: 0;
    border: none;
    flex: 1;
    overflow-y: auto;
    /* Enable scrolling for overflow */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on mobile */
}

.testimonial-truncated blockquote {
    max-height: 120px;
    /* Increased for better content visibility */
    position: relative;
    overflow: hidden;
}


/* Enhanced gradient fade effect for truncated text */

.testimonial-truncated blockquote::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    /* Increased fade height */
    background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.8) 60%, var(--pure-white) 100%);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    z-index: 1;
}

.testimonial-expanded blockquote {
    max-height: none;
    overflow: visible;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-expanded blockquote::after {
    opacity: 0;
    pointer-events: none;
}

.read-more-btn {
    display: none !important;
    /* Removed as per user request */
}


/* Read more button and related hover/active styles removed as per user request */

.testimonial-card.testimonial-expanded blockquote {
    max-height: none;
    overflow: visible;
}

.testimonial-card blockquote::before {
    content: '"';
    font-size: 64px;
    font-family: serif;
    color: var(--safety-yellow);
    position: absolute;
    top: -20px;
    left: -10px;
    opacity: 0.5;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--safety-yellow);
    flex-shrink: 0;
}

.author-info h4 {
    margin-bottom: var(--spacing-xs);
    color: var(--asphalt-dark);
    font-size: 16px;
}

.author-info p {
    margin: 0;
    color: var(--road-gray);
    font-size: 14px;
    margin-bottom: var(--spacing-xs);
}

.project-type {
    background: var(--traffic-orange);
    color: var(--pure-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
}

.testimonial-prev,
.testimonial-next {
    background: var(--safety-yellow);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: var(--asphalt-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background: var(--traffic-orange);
    color: var(--pure-white);
    transform: scale(1.1);
}

.testimonial-prev svg,
.testimonial-next svg {
    width: 24px;
    height: 24px;
}

.testimonial-dots {
    display: flex;
    gap: var(--spacing-sm);
}

.testimonial-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    background: var(--pure-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

.stat-item {
    text-align: center;
}

.testimonial-stats .stat-number {
    display: block;
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    color: var(--traffic-orange);
    line-height: 1;
}

.testimonial-stats .stat-label {
    font-size: 14px;
    color: var(--road-gray);
    margin-top: var(--spacing-xs);
}

.testimonial-cta {
    text-align: center;
    background: linear-gradient(135deg, var(--asphalt-dark), var(--road-gray));
    color: var(--pure-white);
    padding: var(--spacing-3xl);
    border-radius: var(--border-radius-lg);
    margin-top: var(--spacing-xl);
}

.testimonial-cta h3 {
    color: var(--pure-white);
    margin-bottom: var(--spacing-md);
}

.testimonial-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-xl);
    font-size: 16px;
}


/* Why Choose Us Section */

.why-choose-section {
    padding: var(--spacing-4xl) 0;
    background: var(--pure-white);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.reason-card {
    background: var(--concrete);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.reason-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-lg);
    background: var(--safety-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--asphalt-dark);
}

.reason-icon svg {
    width: 28px;
    height: 28px;
}

.reason-card h3 {
    margin-bottom: var(--spacing-md);
    color: var(--asphalt-dark);
}

.reason-card p {
    color: var(--road-gray);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
}

.reason-features {
    list-style: none;
    text-align: left;
}

.reason-features li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: var(--spacing-lg);
    font-size: 14px;
    color: var(--road-gray);
}

.reason-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-green);
    font-weight: bold;
}


/* Introduction Section Styles */

.intro-section {
    padding: var(--spacing-4xl) 0;
    background: var(--pure-white);
}

.intro-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-4xl);
    align-items: start;
}

.intro-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: linear-gradient(135deg, var(--safety-yellow), #E6C200);
    color: var(--asphalt-dark);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow);
}

.badge-icon {
    font-size: 20px;
}

.intro-text h2 {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: var(--spacing-xl);
    color: var(--asphalt-dark);
}

.intro-lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--road-gray);
    margin-bottom: var(--spacing-3xl);
}

.intro-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.highlight-icon {
    width: 48px;
    height: 48px;
    background: var(--safety-yellow);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--asphalt-dark);
    flex-shrink: 0;
    margin-top: var(--spacing-xs);
}

.highlight-icon svg {
    width: 24px;
    height: 24px;
}

.highlight-content h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--asphalt-dark);
    font-size: 18px;
}

.highlight-content p {
    color: var(--road-gray);
    line-height: 1.6;
    margin: 0;
}

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

.cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    font-size: 14px;
    color: var(--road-gray);
}

.note-icon {
    color: var(--safety-yellow);
    font-size: 16px;
}

.intro-stats {
    background: var(--concrete);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
}

.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.stat-card {
    text-align: center;
    padding: var(--spacing-lg);
    background: var(--pure-white);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.stat-card .stat-number {
    display: block;
    font-family: var(--font-primary);
    font-size: 32px;
    font-weight: 700;
    color: var(--traffic-orange);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-card .stat-label {
    font-weight: 600;
    color: var(--asphalt-dark);
    font-size: 14px;
    margin-bottom: var(--spacing-xs);
}

.stat-card .stat-desc {
    font-size: 12px;
    color: var(--road-gray);
    line-height: 1.4;
}


/* Google Maps Integration */

.map-placeholder {
    position: relative;
    background: var(--light-gray);
    border-radius: var(--border-radius);
    padding: var(--spacing-3xl);
    text-align: center;
    color: var(--road-gray);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.map-placeholder:hover {
    background: var(--concrete);
}

#google-map {
    width: 100%;
    height: 400px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}


/* Locations Section - Enhanced Responsive Design */

.office-section {
    padding: var(--spacing-4xl) 0;
    background: var(--light-gray);
}

.office-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--spacing-4xl);
    align-items: start;
    margin-bottom: var(--spacing-3xl);
}


/* Location Card Container */

.location-card {
    background: var(--pure-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.location-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.office-info {
    background: transparent;
    padding: var(--spacing-3xl);
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.office-info h3 {
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-lg);
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--safety-yellow);
}

.office-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    flex: 1;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.detail-item:hover {
    background: var(--light-gray);
}

.detail-icon {
    width: 24px;
    height: 24px;
    color: var(--traffic-orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.detail-content h4 {
    margin-bottom: var(--spacing-xs);
    color: var(--asphalt-dark);
    font-size: 16px;
    font-weight: 600;
}

.detail-content p {
    color: var(--road-gray);
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
}

.office-cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--light-gray);
    margin-top: auto;
}

.office-map {
    position: relative;
    height: 300px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin: var(--spacing-lg) var(--spacing-lg) 0;
    background: var(--light-gray);
}


/* Map placeholder improvements */

.office-map .map-placeholder {
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--concrete);
    border-radius: var(--border-radius);
    margin: 0;
    cursor: pointer;
    transition: var(--transition);
}

.office-map .map-placeholder:hover {
    background: var(--light-gray);
    transform: none;
}

.office-map .map-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--traffic-orange);
}

.office-map .map-placeholder h4 {
    color: var(--asphalt-dark);
    font-size: 16px;
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.office-map .map-placeholder p {
    color: var(--road-gray);
    font-size: 14px;
    margin: 0;
    text-align: center;
}


/* Map loaded state styling */

.map-loaded {
    cursor: default;
}

.map-loaded iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--border-radius);
}


/* Static map view styling */

.static-map-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--concrete);
    border: 2px dashed var(--light-gray);
    border-radius: var(--border-radius);
}

.static-map-view:hover {
    background: var(--light-gray);
    border-color: var(--traffic-orange);
    transform: translateY(-2px);
}

.map-static-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.map-static-content svg {
    width: 48px;
    height: 48px;
    color: var(--traffic-orange);
    margin-bottom: var(--spacing-md);
}

.map-static-content h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--asphalt-dark);
    font-size: 16px;
    font-weight: 600;
}

.map-static-content p {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--road-gray);
    font-size: 14px;
}

.map-static-content>div {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--traffic-orange);
    color: white;
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.static-map-view:hover .map-static-content>div {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
}

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

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


/* Measurement Tools Panel */

.measurement-tools {
    background: var(--pure-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--light-gray);
}

.measurement-tools h4 {
    color: var(--asphalt-dark);
    font-family: var(--font-primary);
    margin-bottom: var(--spacing-md);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.measurement-tools h4 svg {
    width: 20px;
    height: 20px;
    color: var(--traffic-orange);
}

.tool-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tool-button {
    background: var(--light-gray);
    border: 1px solid var(--concrete);
    color: var(--asphalt-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-family: var(--font-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.tool-button:hover {
    background: var(--safety-yellow);
    color: var(--asphalt-dark);
}

.tool-button.active {
    background: var(--traffic-orange);
    color: var(--pure-white);
    border-color: var(--traffic-orange);
}

.tool-button svg {
    width: 14px;
    height: 14px;
}


/* Measurement Results Display */

.measurement-results {
    background: var(--light-gray);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-secondary);
    border: 1px solid var(--concrete);
}

.measurement-results h4 {
    color: var(--asphalt-dark);
    font-family: var(--font-primary);
    margin-bottom: var(--spacing-md);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.measurement-results h4 svg {
    width: 18px;
    height: 18px;
    color: var(--success-green);
}

.measurement-results.empty {
    text-align: center;
    color: var(--road-gray);
    font-style: italic;
    padding: var(--spacing-xl);
}

.measurement-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--concrete);
    padding: var(--spacing-sm) 0;
    font-size: 14px;
}

.measurement-item:last-child {
    border-bottom: none;
}

.measurement-label {
    color: var(--asphalt-dark);
    font-weight: 600;
}

.measurement-value {
    color: var(--traffic-orange);
    font-weight: 700;
    font-family: var(--font-primary);
}

.measurement-unit {
    color: var(--road-gray);
    font-size: 12px;
    margin-left: var(--spacing-xs);
}


/* Clear Button */

.clear-measurements {
    background: var(--error-red);
    color: var(--pure-white);
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius);
    font-family: var(--font-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    margin-top: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.clear-measurements:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

.clear-measurements svg {
    width: 12px;
    height: 12px;
}


/* Map View Toggle */

.map-view-toggle {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--spacing-xs);
}

.view-toggle-btn {
    background: none;
    border: 1px solid var(--light-gray);
    color: var(--asphalt-dark);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-btn.active {
    background: var(--safety-yellow);
    border-color: var(--safety-yellow);
}

.view-toggle-btn:hover {
    background: rgba(255, 215, 0, 0.2);
}

.view-toggle-btn svg {
    width: 16px;
    height: 16px;
}


/* Facebook Chat Widget Integration */

.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--safety-yellow);
    border-radius: 50px;
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--asphalt-dark);
    border: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.chat-widget:hover {
    background: var(--traffic-orange);
    color: var(--pure-white);
    transform: scale(1.05);
}

.chat-widget svg {
    width: 24px;
    height: 24px;
}

.chat-bubble {
    position: absolute;
    top: -40px;
    right: 0;
    background: var(--asphalt-dark);
    color: var(--pure-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition);
    pointer-events: none;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--asphalt-dark);
}

.chat-widget:hover .chat-bubble {
    opacity: 1;
    transform: translateY(0);
}


/* Responsive Design */

@media (max-width: 1024px) {
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 24px;
    }
    .intro-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-3xl);
    }
    .intro-text h2 {
        font-size: 36px;
    }
    .stats-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    .office-content {
        grid-template-columns: 1fr;
    }
    .company-story {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .contact-form-section {
        grid-template-columns: 1fr;
    }
    /* New testimonials grid responsive */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .testimonials-info-cards {
        grid-template-columns: 1fr;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
    /* Updated container and spacing system for mobile - Step 7 */
    .container {
        padding: 0 1rem;
        max-width: 100%;
        margin: 0 auto;
    }
    /* Section padding for mobile */
    section {
        padding: 2rem 0;
    }
    /* Ensure specific sections follow mobile padding */
    .services-section,
    .recent-blog-section,
    #gallery,
    #about,
    #contact,
    .testimonials-section,
    .why-choose-section,
    .intro-section,
    .office-section {
        padding: 2rem 0;
    }
    /* Header container mobile spacing */
    .header-container {
        padding: 0 1rem;
    }
    /* Blog page mobile spacing */
    .blog-page {
        padding: 2rem 0;
    }
    /* Mobile Touch Target and Button Accessibility Enhancements */
    .btn {
        min-height: 48px;
        /* Increased from 44px for better touch accessibility */
        padding: 14px 28px;
        font-size: 16px;
        /* Maintain readable size */
        margin: var(--spacing-xs);
        /* Add spacing between buttons */
        border-radius: var(--border-radius-lg);
        /* Slightly larger radius for easier tapping */
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
    }
    .btn-large {
        min-height: 52px;
        padding: 16px 32px;
        font-size: 18px;
    }
    .btn-small {
        min-height: 44px;
        /* Still maintain minimum 44px */
        padding: 12px 20px;
        font-size: 14px;
    }
    /* Mobile navigation buttons */
    .mobile-menu-toggle {
        width: 48px;
        height: 48px;
        min-height: 48px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
    }
    .mobile-nav-close {
        width: 48px;
        height: 48px;
        min-height: 48px;
        touch-action: manipulation;
    }
    /* Mobile navigation links */
    .mobile-nav-links a {
        min-height: 48px;
        padding: var(--spacing-lg) var(--spacing-xl);
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        touch-action: manipulation;
    }
    /* Mobile social links */
    .mobile-nav-social a {
        width: 48px;
        height: 48px;
        min-height: 48px;
        touch-action: manipulation;
    }
    /* Gallery filter buttons */
    .filter-btn {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
        margin: var(--spacing-xs);
        font-size: 16px;
        touch-action: manipulation;
    }
    /* Gallery buttons */
    .button-group .button {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
        margin: var(--spacing-xs);
        font-size: 16px;
        touch-action: manipulation;
    }
    /* Testimonial controls */
    .testimonial-prev,
    .testimonial-next {
        width: 52px;
        height: 52px;
        min-height: 52px;
        touch-action: manipulation;
    }
    /* Tool buttons in estimate form */
    .tool-button {
        min-height: 44px;
        padding: var(--spacing-md) var(--spacing-lg);
        margin: var(--spacing-xs);
        touch-action: manipulation;
    }
    /* Form inputs enhanced for mobile */
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 16px;
        /* Prevents zoom on iOS */
        border-radius: var(--border-radius-lg);
        touch-action: manipulation;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* Better spacing for mobile keyboards */
        margin-bottom: var(--spacing-sm);
        /* Prevent autocomplete styling issues */
        background-color: white !important;
        /* Better mobile input handling */
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
        /* Prevent viewport jumping when keyboard appears */
        scroll-margin-top: 120px;
        /* Better mobile form handling */
        -webkit-user-select: text;
        user-select: text;
        /* Improve input responsiveness */
        -webkit-touch-callout: default;
    }
    /* Mobile keyboard-optimized input types */
    input[type="email"] {
        /* Optimize for email keyboards */
        inputmode: email;
        autocomplete: email;
        autocapitalize: none;
        autocorrect: off;
        spellcheck: false;
        /* Better mobile email input */
        -webkit-keypad: email;
    }
    input[type="tel"] {
        /* Optimize for phone number keyboards */
        inputmode: tel;
        autocomplete: tel;
        autocapitalize: none;
        autocorrect: off;
        spellcheck: false;
        /* Numeric keypad for phones */
        -webkit-keypad: tel;
    }
    input[type="url"] {
        /* Optimize for URL keyboards */
        inputmode: url;
        autocomplete: url;
        autocapitalize: none;
        autocorrect: off;
        spellcheck: false;
        /* URL-specific keyboard */
        -webkit-keypad: url;
    }
    input[type="number"] {
        /* Optimize for numeric keyboards */
        inputmode: numeric;
        pattern: "[0-9]*";
        autocomplete: off;
        autocapitalize: none;
        autocorrect: off;
        spellcheck: false;
        /* Force numeric keyboard on iOS */
        -webkit-keypad: numeric;
    }
    input[type="search"] {
        /* Optimize for search keyboards */
        inputmode: search;
        autocomplete: off;
        autocapitalize: none;
        /* Enable search keyboard features */
        -webkit-keypad: search;
    }
    input[type="text"] {
        /* Optimize default text inputs */
        autocomplete: on;
        autocapitalize: words;
        autocorrect: on;
        spellcheck: true;
    }
    input[name*="name"],
    input[id*="name"] {
        /* Optimize name fields */
        autocomplete: name;
        autocapitalize: words;
        autocorrect: off;
        spellcheck: false;
    }
    input[name*="address"],
    input[id*="address"] {
        /* Optimize address fields */
        autocomplete: street-address;
        autocapitalize: words;
        autocorrect: off;
        spellcheck: false;
    }
    input[name*="city"],
    input[id*="city"] {
        /* Optimize city fields */
        autocomplete: address-level2;
        autocapitalize: words;
        autocorrect: off;
        spellcheck: false;
    }
    input[name*="state"],
    input[id*="state"] {
        /* Optimize state fields */
        autocomplete: address-level1;
        autocapitalize: words;
        autocorrect: off;
        spellcheck: false;
    }
    input[name*="zip"],
    input[name*="postal"],
    input[id*="zip"],
    input[id*="postal"] {
        /* Optimize postal code fields */
        inputmode: numeric;
        autocomplete: postal-code;
        autocapitalize: none;
        autocorrect: off;
        spellcheck: false;
        pattern: "[0-9]{5}(-[0-9]{4})?";
        /* US ZIP code pattern */
    }
    /* Text areas with better mobile handling */
    textarea {
        /* Disable auto-resize on mobile */
        resize: none;
        /* Better line height for readability */
        line-height: 1.5;
        /* Enable spellcheck for content */
        spellcheck: true;
        autocorrect: on;
        autocapitalize: sentences;
        /* Prevent keyboard from covering textarea */
        scroll-margin-top: 150px;
        /* Better touch handling */
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
        /* Minimum height for comfortable typing */
        min-height: 100px;
    }
    /* Select elements with better mobile UX */
    select {
        /* Better touch target */
        min-height: 48px;
        /* Better mobile appearance */
        background-position: right 12px center;
        background-size: 16px;
        /* Improve select appearance on mobile */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        padding-right: 40px;
        cursor: pointer;
    }
    /* Estimate form inputs */
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 16px;
        /* Prevents zoom on iOS */
        border-radius: var(--border-radius-lg);
        touch-action: manipulation;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /* Better spacing for mobile keyboards */
        margin-bottom: var(--spacing-sm);
        /* Prevent autocomplete styling issues */
        background-color: white !important;
        /* Better mobile input handling */
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
    }
    /* Form container adjustments for mobile keyboards */
    .form-container,
    .contact-form-container,
    .estimate-form-container {
        /* Prevent viewport jumping when keyboard opens */
        position: relative;
        /* Better keyboard navigation */
        scroll-padding-top: 100px;
    }
    /* Input focus with keyboard accommodation */
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        /* Smooth scrolling to focused input */
        scroll-margin-top: 20px;
        /* Enhanced focus visibility */
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    /* Contact method cards */
    .contact-method {
        min-height: 120px;
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
        touch-action: manipulation;
    }
    .method-icon {
        width: 72px;
        height: 72px;
    }
    /* Gallery items */
    .gallery-item {
        margin-bottom: var(--spacing-lg);
        touch-action: manipulation;
    }
    .gallery-expand {
        width: 48px;
        height: 48px;
        min-height: 48px;
        touch-action: manipulation;
    }
    /* Service cards */
    .service-card {
        margin-bottom: var(--spacing-lg);
        touch-action: manipulation;
    }
    /* Reason cards */
    .reason-card {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-xl);
        touch-action: manipulation;
    }
    /* Team member cards */
    .team-member {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-xl);
        touch-action: manipulation;
    }
    /* Enhanced spacing for clickable elements */
    .hero-cta {
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-4xl);
        flex-direction: column;
        align-items: center;
    }
    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
        min-height: 48px;
    }
    /* Enhanced focus styles for accessibility */
    .btn:focus,
    .filter-btn:focus,
    .button-group .button:focus,
    .mobile-menu-toggle:focus,
    .mobile-nav-close:focus,
    .tool-button:focus {
        outline: 3px solid var(--safety-yellow);
        outline-offset: 2px;
        box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.2);
    }
    /* Form focus enhancements */
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus,
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: 3px solid var(--safety-yellow);
        outline-offset: 2px;
        border-color: var(--safety-yellow);
        box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.1);
    }
    /* Services section responsive - ensure cards stack vertically on mobile */
    .asphalt-service-grid,
    .concrete-service-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-md);
        margin-bottom: var(--spacing-3xl);
    }
    /* Adjust service cards for mobile screens */
    .service-card {
        margin-bottom: var(--spacing-lg);
    }
    /* Reduce hero section padding on mobile */
    .service-hero {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    /* Adjust feature grids for mobile */
    .asphalt-features-grid,
    .concrete-features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    /* Adjust highlight sections for mobile */
    .asphalt-highlights,
    .concrete-highlights {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-md);
    }
    /* Header adjustments for mobile - make it static and compact */
    header {
        position: static;
        background: var(--asphalt-dark);
        padding: var(--spacing-sm) 0;
    }
    main {
        padding-top: 0;
    }
    .header-container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-md);
    }
    header h1 {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-xs);
    }
    /* Mobile navigation in 3x2 grid */
    nav ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: var(--spacing-sm);
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    nav a {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.875rem;
        border-radius: var(--border-radius);
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        text-align: center;
        transition: all 0.3s ease;
    }
    nav a:hover {
        background: var(--safety-yellow);
        color: var(--asphalt-dark);
        border-color: var(--safety-yellow);
    }
    /* Hide social links on mobile to save space */
    .social-links {
        display: none;
    }
    .team-grid,
    .cert-grid,
    .contact-methods {
        grid-template-columns: 1fr;
    }
    /* Contact form section responsive */
    .contact-form-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    .contact-cards-left {
        gap: var(--spacing-md);
    }
    .contact-cards-left .contact-method {
        padding: var(--spacing-md);
    }
    .contact-form-container {
        padding: var(--spacing-xl);
    }
    .contact-form-container h3 {
        font-size: 24px;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .company-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .gallery-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: var(--spacing-sm);
    }
    .filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Services section responsive */
    .asphalt-service-grid,
    .concrete-service-container {
        grid-template-columns: 1fr;
    }
    .asphalt-features-grid,
    .concrete-features-grid {
        grid-template-columns: 1fr;
    }
    .asphalt-highlights,
    .concrete-highlights {
        grid-template-columns: 1fr;
    }
    .service-hero {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-xl);
    }
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-features {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    /* Blog section responsive */
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .reasons-grid {
        grid-template-columns: 1fr;
    }
    /* Testimonial responsive improvements */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    .testimonials-info-cards {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .testimonial-card {
        min-height: 350px;
        /* Reduced minimum height for mobile */
        margin: 0 var(--spacing-sm);
    }
    .testimonial-content {
        padding-top: 40px;
        /* Reduced padding for smaller screens */
    }
    .read-more-btn {
        top: 8px;
        right: 8px;
        padding: 6px 12px;
        font-size: 11px;
        min-width: 60px;
        max-width: 90px;
    }
    .testimonial-truncated blockquote {
        max-height: 100px;
        /* Slightly increased for mobile readability */
    }
    .testimonial-truncated blockquote::after {
        height: 50px;
        /* Adjusted fade height for mobile */
    }
    .measurement-tools {
        padding: var(--spacing-md);
    }
    .measurement-tools h4 {
        font-size: 14px;
    }
    .tool-buttons {
        justify-content: center;
    }
    .tool-button {
        font-size: 12px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    .measurement-results {
        padding: var(--spacing-md);
    }
    .measurement-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        text-align: left;
    }
    .measurement-value {
        font-size: 16px;
    }
    .map-view-toggle {
        position: static;
        justify-content: center;
        margin-bottom: var(--spacing-md);
        background: var(--light-gray);
        border-radius: var(--border-radius);
        padding: var(--spacing-sm);
    }
}


/* --- RESPONSIVE BREAKPOINTS (NEW - Step 7) --- */


/* Tablet Layout: 768px to 1024px */


/* This block refines styles for tablets, ensuring two-column layouts are maintained where appropriate */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Adjust root spacing variables for slightly more compact layout on tablets */
     :root {
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.75rem;
        --spacing-3xl: 3.5rem;
    }
    /* Adjust typography for better readability on tablets */
    h1,
    .hero-title {
        font-size: 3rem;
    }
    h2,
    .section-header h2 {
        font-size: 2.25rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    .container {
        max-width: 960px;
        padding: 0 var(--spacing-xl);
    }
    /* Maintain two-column layouts for key sections */
    .company-story,
    .intro-content,
    .contact-form-section {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    .office-content {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
    /* Adjust grid for services and testimonials to be 2-column */
    .asphalt-service-grid,
    .concrete-service-container,
    .testimonials-carousel {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Mobile Layout: < 768px */


/* This block overrides styles for mobile devices, switching to single-column layouts and optimizing for touch */

@media (max-width: 767px) {
    /* Further reduce font sizes for mobile */
    h1,
    .hero-title {
        font-size: 2rem;
    }
    h2,
    .section-header h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.4rem;
    }
    /* Enforce single-column layout for most grid containers */
    .asphalt-service-grid,
    .concrete-service-container,
    .asphalt-features-grid,
    .concrete-features-grid,
    .asphalt-highlights,
    .concrete-highlights,
    .blog-grid,
    .team-grid,
    .reasons-grid,
    .cert-grid,
    .testimonials-carousel,
    .stats-container,
    .contact-form-section,
    .company-story,
    .intro-content,
    .office-content {
        grid-template-columns: 1fr !important;
        /* Use important to ensure override */
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    /* Make card overlays on gallery items touch-friendly by making them always visible */
    /* This avoids reliance on hover state which is inconsistent on touch devices */
    .gallery-item .gallery-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
        justify-content: flex-end;
        /* Align content to bottom */
    }
    /* Disable image zoom on hover for touch devices to prevent accidental zooming */
    .gallery-item:hover .gallery-image img {
        transform: scale(1.0);
    }
    /* Improve touch interaction for testimonial cards */
    .testimonial-card.testimonial-truncated:hover::before {
        background: rgba(0, 0, 0, 0.1);
        /* Subtle hint on tap */
    }
}


/* Gallery Section Styles - Updated for Current HTML Structure */

#gallery {
    padding: var(--spacing-4xl) 0;
    background: var(--pure-white);
}

#gallery .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

#gallery .content {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

#gallery .flex {
    margin-bottom: var(--spacing-xl);
}

#gallery .topper {
    display: block;
    font-size: 14px;
    color: var(--safety-yellow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}

#gallery h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--asphalt-dark);
    margin-bottom: var(--spacing-lg);
}

#gallery .text {
    font-size: 1.125rem;
    color: var(--road-gray);
    max-width: 600px;
    margin: 0 auto var(--spacing-3xl);
    line-height: 1.6;
}


/* Gallery Card Components */

.gallery-card {
    background: var(--pure-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.card-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--light-gray);
}


/* Image loading placeholder styles */

.image-loading-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.card-image::before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 66.67%;
    /* 3:2 Aspect Ratio */
    position: absolute;
    top: 0;
    left: 0;
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .card-image img {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-xl);
    color: var(--pure-white);
}

.gallery-card:hover .card-overlay {
    opacity: 1;
}

.card-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: var(--spacing-sm);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.3;
}

.card-category {
    font-family: var(--font-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--safety-yellow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.card-overlay .btn {
    align-self: flex-start;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.875rem;
}


/* Card overlay enhancements */

.card-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( 45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.gallery-card:hover .card-overlay::before {
    opacity: 1;
}


/* Gallery card responsive adjustments */

@media (max-width: 768px) {
    .card-image {
        height: 200px;
    }
    .card-title {
        font-size: 1.125rem;
    }
    .card-category {
        font-size: 0.75rem;
    }
    .card-overlay {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .card-image {
        height: 180px;
    }
    .card-title {
        font-size: 1rem;
    }
    .card-overlay {
        padding: var(--spacing-md);
    }
}

#gallery .title {
    font-size: 2.5rem;
    color: var(--asphalt-dark);
    font-weight: 700;
    margin: 0;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
    flex-wrap: wrap;
}

.button-group .button {
    background: transparent;
    border: 2px solid var(--light-gray);
    color: var(--road-gray);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 25px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
}

.button-group .button:hover {
    background: var(--safety-yellow);
    border-color: var(--safety-yellow);
    color: var(--asphalt-dark);
    transform: translateY(-2px);
}

.button-group .button.cs-active {
    background: var(--safety-yellow);
    border-color: var(--safety-yellow);
    color: var(--asphalt-dark);
    font-weight: 600;
}

.gallery-wrapper {
    position: relative;
    min-height: 400px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xxl);
    align-items: start;
    max-width: 90vw;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg);
}

.gallery.hidden {
    display: none !important;
}

.gallery .image {
    flex: 0 0 calc(50% - var(--spacing-lg));
    max-width: none;
    height: 420px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
}

.gallery .image:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.gallery .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery .image:hover img {
    transform: scale(1.05);
}

.gallery-cta {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-xl);
    background: var(--light-gray);
    border-radius: var(--border-radius-lg);
}

.gallery-cta p {
    font-size: 18px;
    color: var(--road-gray);
    margin-bottom: var(--spacing-lg);
}


/* Mobile Performance Optimizations - Data Attribute Based */


/* Slow connection optimizations */

[data-connection="slow"] .gallery-grid,
[data-connection="slow"] .gallery {
    gap: var(--spacing-md);
    /* Reduce gaps to show more content */
}

[data-connection="slow"] .card-image,
[data-connection="slow"] .gallery-image img {
    height: 180px;
    /* Smaller images for faster loading */
}

[data-connection="slow"] .image-loading-placeholder {
    background: linear-gradient(135deg, #f8f9fa 25%, #e9ecef 25%, #e9ecef 50%, #f8f9fa 50%, #f8f9fa 75%, #e9ecef 75%, #e9ecef);
    background-size: 20px 20px;
    animation: loading-pattern 2s linear infinite;
}

@keyframes loading-pattern {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 40px;
    }
}


/* Mobile device optimizations */

[data-device="mobile"] .gallery-overlay,
[data-device="mobile"] .card-overlay {
    opacity: 1;
    /* Always show overlays on mobile */
    background: linear-gradient( to top, rgba(44, 44, 44, 0.95) 0%, rgba(44, 44, 44, 0.8) 30%, rgba(44, 44, 44, 0.4) 60%, transparent 100%);
}


/* Mobile Responsive - Gallery Improvements */

@media (max-width: 768px) {
    /* Gallery grid - single column on mobile */
    .gallery {
        grid-template-columns: 1fr;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: 0 var(--spacing-sm);
        width: 95%;
        max-width: 95vw;
    }
    /* Gallery items - better mobile spacing */
    .gallery-item {
        margin-bottom: var(--spacing-lg);
        border-radius: var(--border-radius);
    }
    /* Mobile-optimized gallery images */
    .gallery-image img {
        height: 280px;
        object-fit: cover;
    }
    .gallery .image {
        flex: 0 0 calc(100% - var(--spacing-md));
        max-width: none;
        height: 280px;
        margin-bottom: var(--spacing-lg);
    }
    /* Gallery cards - mobile optimization */
    .gallery-card {
        margin-bottom: var(--spacing-lg);
        border-radius: var(--border-radius);
        /* Enhanced touch feedback */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.2);
    }
    .gallery-card:active {
        transform: scale(0.98);
        /* Subtle press feedback */
    }
    .card-image {
        height: 220px;
    }
    /* Make gallery overlays always visible on mobile for better touch experience */
    .gallery-overlay,
    .card-overlay {
        opacity: 1;
        background: linear-gradient( to top, rgba(44, 44, 44, 0.9) 0%, rgba(44, 44, 44, 0.7) 40%, rgba(44, 44, 44, 0.3) 70%, transparent 100%);
        justify-content: flex-end;
        align-items: flex-start;
        padding: var(--spacing-md);
    }
    /* Gallery overlay text - enhanced readability on mobile */
    .gallery-info h3,
    .gallery-info h4,
    .card-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: var(--spacing-xs);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        color: var(--pure-white);
        /* Better text rendering on mobile */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .gallery-tag,
    .card-category {
        font-size: 0.75rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: 12px;
        background: var(--safety-yellow);
        color: var(--asphalt-dark);
        font-weight: 600;
        display: inline-block;
        /* Better contrast for mobile */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    /* Filter buttons - mobile optimization */
    .button-group {
        gap: var(--spacing-xs);
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
        margin-bottom: var(--spacing-xl);
        /* Add scroll indicator */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }
    .button-group::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }
    .button-group::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 100%;
        background: linear-gradient(to left, var(--pure-white), transparent);
        pointer-events: none;
    }
    .button-group .button {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 14px;
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px;
        border-radius: 22px;
        /* Enhanced touch feedback */
        -webkit-tap-highlight-color: rgba(255, 215, 0, 0.3);
        transition: all 0.2s ease;
    }
    .button-group .button:active {
        transform: scale(0.95);
    }
    /* Gallery section spacing */
    #gallery {
        padding: var(--spacing-3xl) 0;
    }
    #gallery .container {
        padding: 0 var(--spacing-sm);
    }
    #gallery .title {
        font-size: 1.75rem;
        margin-bottom: var(--spacing-lg);
    }
    #gallery .content {
        margin-bottom: var(--spacing-xl);
    }
    /* Disable image scaling on hover for mobile */
    .gallery-item:hover .gallery-image img,
    .gallery-card:hover .card-image img {
        transform: scale(1.0);
    }
    /* Gallery wrapper adjustments */
    .gallery-wrapper {
        min-height: auto;
        padding: 0;
    }
    /* Loading placeholder optimizations for mobile */
    .image-loading-placeholder {
        background: var(--light-gray);
        color: var(--road-gray);
        font-size: 0.875rem;
        /* Subtle animation for mobile */
        animation: loading-pulse 1.5s ease-in-out infinite;
    }
    @keyframes loading-pulse {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }
}


/* Extra small screens */

@media (max-width: 480px) {
    .gallery-grid {
        padding: 0 var(--spacing-xs);
        gap: var(--spacing-md);
    }
    .card-image,
    .gallery-image img {
        height: 200px;
        /* Smaller on very small screens */
    }
    .card-overlay,
    .gallery-overlay {
        padding: var(--spacing-sm);
    }
    .card-title {
        font-size: 0.9rem;
    }
    .card-category {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gallery .image {
        flex: 0 0 calc(33.333% - var(--spacing-lg));
        height: 330px;
    }
}

@media (min-width: 1025px) {
    .gallery .image {
        flex: 0 0 calc(25% - var(--spacing-lg));
        max-width: 450px;
        height: 360px;
    }
}


/* Tooltip styles for accessibility */

[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}


/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/


/* Mobile - 360px */

@media only screen and (min-width: 0rem) {
    #gallery-404 {
        padding: var(--sectionPadding);
        overflow: hidden;
        position: relative;
    }
    #gallery-404 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
    }
    #gallery-404 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }
    #gallery-404 .cs-title {
        max-width: 20ch;
    }
    #gallery-404 .cs-button-group {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 2rem;
    }
    #gallery-404 .cs-button {
        font-size: 1rem;
        line-height: 1.5em;
        color: var(--bodyTextColor);
        background-color: transparent;
        border: none;
        transition: color 0.3s;
    }
    #gallery-404 .cs-button:hover {
        color: var(--primary);
        cursor: pointer;
    }
    #gallery-404 .cs-button.cs-active {
        color: var(--primary);
    }
    #gallery-404 .cs-gallery-wrapper {
        width: 100%;
        position: relative;
        z-index: 1;
    }
    #gallery-404 .cs-gallery {
        width: 100%;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
        transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
        /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
        transform-origin: left top;
    }
    #gallery-404 .cs-gallery.cs-hidden {
        /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
        visibility: hidden;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
        opacity: 0;
        /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the top:0 value, the gallery won't go past that position when it animates */
        top: 0;
        left: 0;
        position: absolute;
        /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
        transform: scaleY(0) scaleX(0);
    }
    #gallery-404 .cs-gallery.cs-hidden .cs-image {
        /* when gallery is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-gallery */
        transform: translateY(2.1875rem);
        opacity: 0;
    }
    #gallery-404 .cs-image {
        border-radius: 1.25rem;
        width: 47%;
        aspect-ratio: 1;
        /* clips the image corners */
        overflow: hidden;
        display: block;
        position: relative;
        /* when .cs-hidden is removed from the .cs-gallery, reset these values and animate between their hidden styles */
        transform: translateY(0rem);
        opacity: 1;
        transition: opacity 0.6s, transform 0.6s;
    }
    #gallery-404 .cs-image:nth-of-type(1) {
        /* changes transition delays at desktop */
        /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
        transition-delay: 0.15s;
    }
    #gallery-404 .cs-image:nth-of-type(2) {
        transition-delay: 0.3s;
    }
    #gallery-404 .cs-image:nth-of-type(3) {
        transition-delay: 0.45s;
    }
    #gallery-404 .cs-image:nth-of-type(4) {
        transition-delay: 0.6s;
    }
    #gallery-404 .cs-image:nth-of-type(5) {
        transition-delay: 0.75s;
    }
    #gallery-404 .cs-image:nth-of-type(6) {
        transition-delay: 0.9s;
    }
    #gallery-404 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}


/* Tablet - 768px */

@media only screen and (min-width: 48rem) {
    #gallery-404 .cs-container {
        max-width: 80rem;
    }
    #gallery-404 .cs-content {
        text-align: left;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    #gallery-404 .cs-title {
        margin: 0;
    }
    #gallery-404 .cs-image {
        width: 31.8%;
        aspect-ratio: 1;
    }
}


/* Desktop - 1300px */

@media only screen and (min-width: 81.25rem) {
    #gallery-404 .cs-flex {
        max-width: 34.375rem;
    }
    #gallery-404 .cs-gallery {
        align-items: stretch;
        justify-content: center;
    }
    #gallery-404 .cs-image {
        width: 39.375rem;
        max-width: 100%;
        height: 25rem;
    }
    #gallery-404 .cs-image:nth-of-type(2),
    #gallery-404 .cs-image:nth-of-type(3),
    #gallery-404 .cs-image:nth-of-type(4),
    #gallery-404 .cs-image:nth-of-type(5) {
        width: 19.0625rem;
    }
    #gallery-404 .cs-image:nth-of-type(1) {
        /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
        transition-delay: 0.15s;
    }
    #gallery-404 .cs-image:nth-of-type(2) {
        transition-delay: 0.3s;
    }
    #gallery-404 .cs-image:nth-of-type(3) {
        transition-delay: 0.45s;
    }
    #gallery-404 .cs-image:nth-of-type(4) {
        transition-delay: 0.15s;
    }
    #gallery-404 .cs-image:nth-of-type(5) {
        transition-delay: 0.3s;
    }
    #gallery-404 .cs-image:nth-of-type(6) {
        transition-delay: 0.45s;
    }
}


/* Why Choose Birkhimer Asphalt Section Layout */

.why-choose-section {
    padding: var(--spacing-3xl) 0;
    background: var(--light-gray);
}

.why-choose-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.why-choose-item {
    background: var(--pure-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.why-choose-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.why-choose-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}


/* Estimate Form Styles */

.estimate-form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    font-family: 'Oswald', sans-serif;
}

.form-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #f0f0f0;
}

.form-header h2 {
    color: #2c2c2c;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.form-subtitle {
    color: #6b6b6b;
    font-size: 1.2rem;
    font-weight: 300;
    margin: 0;
}

.estimate-form {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}


/* Form Sections */

.form-section {
    background: #fafafa;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

.section-title {
    color: #2c2c2c;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    font-size: 1.8rem;
    display: inline-block;
    width: 2rem;
    text-align: center;
}


/* Form Layout */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-weight: 600;
    color: #2c2c2c;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.required {
    color: #e74c3c;
    font-weight: 700;
}

.tooltip {
    cursor: help;
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.tooltip:hover {
    opacity: 1;
}

.tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2c;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c2c2c;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}


/* Form Controls */

.form-input,
.form-select,
.form-textarea {
    padding: 1rem;
    border: 2px solid #e5e5e5;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: #e74c3c;
    background-color: #fdf2f2;
}

.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.form-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
    padding-right: 3rem;
    appearance: none;
}


/* Error Messages */

.error-message {
    color: #e74c3c;
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 1.2rem;
    margin-top: 0.25rem;
}

.help-text {
    color: #6b6b6b;
    font-size: 0.9rem;
    font-style: italic;
    display: none;
}


/* Measurement Status */

.measurement-status {
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border: 2px solid #e5e5e5;
    text-align: center;
}

.measurement-requirement {
    color: #e67e22;
}

.measurement-success {
    color: #27ae60;
}

.measurement-success strong {
    font-size: 1.1rem;
}

.measurement-tools {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* Estimate Form Buttons */

.estimate-form-container .btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    min-width: 150px;
}

.estimate-form-container .btn-primary {
    background: #ffd700;
    color: #2c2c2c;
}

.estimate-form-container .btn-primary:hover:not(:disabled) {
    background: #e6c200;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.estimate-form-container .btn-secondary {
    background: #6b6b6b;
    color: white;
}

.estimate-form-container .btn-secondary:hover:not(:disabled) {
    background: #5a5a5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 107, 107, 0.3);
}

.estimate-form-container .btn-outline {
    background: transparent;
    color: #2c2c2c;
    border: 2px solid #e5e5e5;
}

.estimate-form-container .btn-outline:hover:not(:disabled) {
    border-color: #ffd700;
    background: #ffd700;
    color: #2c2c2c;
}

.estimate-form-container .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Form Actions */

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 2rem;
    border-top: 2px solid #f0f0f0;
}


/* Validation Summary */

.validation-summary {
    background: #fdf2f2;
    border: 2px solid #e74c3c;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.validation-summary h4 {
    color: #e74c3c;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.validation-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary li {
    color: #e74c3c;
    padding: 0.25rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.validation-summary li::before {
    content: '⚠️';
    position: absolute;
    left: 0;
    top: 0.25rem;
}


/* Success Message */

.success-message {
    text-align: center;
    padding: 3rem;
    background: #f8fff8;
    border: 2px solid #27ae60;
    border-radius: 12px;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.success-message h2 {
    color: #27ae60;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.success-message p {
    color: #2c2c2c;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.success-details {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 1px solid #e5e5e5;
}

.success-details p {
    margin: 0.5rem 0;
    font-size: 1rem;
}


/* Error Alert */

.error-alert {
    background: #fdf2f2;
    border: 2px solid #e74c3c;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #e74c3c;
}

.error-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #e74c3c;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-close:hover {
    background: rgba(231, 76, 60, 0.1);
    border-radius: 50%;
}


/* Responsive Design for Estimate Form */

@media (max-width: 768px) {
    .estimate-form-container {
        padding: 1rem;
        margin: 1rem;
    }
    .form-header h2 {
        font-size: 2rem;
    }
    .form-subtitle {
        font-size: 1rem;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .form-section {
        padding: 1.5rem;
    }
    .measurement-tools {
        flex-direction: column;
        align-items: stretch;
    }
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .estimate-form-container .btn {
        min-width: auto;
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .estimate-form-container {
        padding: 0.5rem;
    }
    .form-header {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }
    .form-header h2 {
        font-size: 1.8rem;
    }
    .form-section {
        padding: 1rem;
    }
    .section-title {
        font-size: 1.3rem;
    }
    .tooltip::before {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
        max-width: 200px;
        white-space: normal;
    }
}


/* Print Styles for Estimate Form */

@media print {
    .estimate-form-container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    .measurement-tools,
    .form-actions {
        display: none;
    }
    .estimate-form-container .btn {
        display: none;
    }
    .form-input,
    .form-select,
    .form-textarea {
        border: 1px solid #ccc;
        background: white;
    }
}


/* Accessibility Improvements for Estimate Form */

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

.form-group label {
    cursor: pointer;
}

.estimate-form-container .btn:focus {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}


/* Animation for form reveal */

.form-section {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.form-section:nth-child(1) {
    animation-delay: 0.1s;
}

.form-section:nth-child(2) {
    animation-delay: 0.2s;
}

.form-section:nth-child(3) {
    animation-delay: 0.3s;
}

.form-section:nth-child(4) {
    animation-delay: 0.4s;
}

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


/* Loading state removed - buttons load instantly */


/* Custom scrollbar for textareas */

.form-textarea::-webkit-scrollbar {
    width: 8px;
}

.form-textarea::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.form-textarea::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.form-textarea::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}


/* Footer Styles */

footer {
    background: var(--asphalt-dark);
    color: var(--pure-white);
    position: relative;
    overflow: hidden;
}

.footer-content {
    padding: var(--spacing-3xl) 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-4xl);
    margin-bottom: var(--spacing-2xl);
    padding: 0 var(--spacing-lg);
}

.footer-section h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
    color: var(--safety-yellow);
}

.footer-section h4 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-md);
    color: var(--pure-white);
    font-weight: 600;
}

.footer-tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-lg);
    font-weight: 400;
    line-height: 1.5;
}


/* Footer Social Icons */

.footer-social {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.footer-social a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-social a:hover {
    background: var(--safety-yellow);
    border-color: var(--safety-yellow);
    transform: translateY(-3px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-social a:hover svg {
    fill: var(--asphalt-dark);
}


/* Footer Navigation */

.footer-nav ul {
    list-style: none;
}

.footer-nav li {
    margin-bottom: var(--spacing-sm);
    padding: 2px 0;
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    padding: 2px 0;
}

.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--safety-yellow);
    transition: width 0.3s ease;
}

.footer-nav a:hover {
    color: var(--safety-yellow);
}

.footer-nav a:hover::after {
    width: 100%;
}


/* Footer Contact Info */

.footer-contact.compact p {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact.compact p:last-child {
    margin-bottom: 0;
}


/* Footer Services List */

.footer-services {
    list-style: none;
}

.footer-services li {
    padding: var(--spacing-xs) 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding-left: var(--spacing-lg);
}

.footer-services li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--safety-yellow);
}


/* Developer Credits Inline */

.footer-developer-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.developer-link-inline {
    color: var(--safety-yellow);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.developer-link-inline:hover {
    text-decoration: underline;
}

.developer-tagline {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}


/* Footer Bottom Bar */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--safety-yellow);
}

.footer-bottom-links .separator {
    color: rgba(255, 255, 255, 0.3);
}


/* Responsive Footer Styles */

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        text-align: center;
        padding: 0;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-content {
        padding: var(--spacing-2xl) 0;
    }
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-developer-inline {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    .footer-developer-inline .separator {
        display: none;
    }
}


/* =============================================================================
   LOCATIONS MAP - MOBILE FIRST STYLES
   ============================================================================= */


/* Base mobile styles (320px+) */

.locations-map-container {
    text-align: center;
    margin: 20px 0;
    padding: 0 1rem;
}

.locations-map-wrapper {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

.locations-map-wrapper iframe {
    border: 0;
    display: block;
    width: 100%;
    height: 350px;
    /* Smaller height for mobile */
}


/* Office map iframes - removed inline styles */

#reynoldsburg-google-map iframe,
#zanesville-google-map iframe {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
}


/* Tablet and above (768px+) */

@media (min-width: 768px) {
    .locations-map-container {
        margin: 30px 0;
    }
    .locations-map-wrapper {
        width: 90%;
        border-radius: 10px;
    }
    .locations-map-wrapper iframe {
        height: 450px;
        /* Medium height for tablet */
    }
}


/* Desktop and above (1024px+) */

@media (min-width: 1024px) {
    .locations-map-container {
        margin: 40px 0;
    }
    .locations-map-wrapper {
        width: 80%;
    }
    .locations-map-wrapper iframe {
        height: 500px;
        /* Full height for desktop */
    }
}