/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Prevent forced reflows in scroll calculations */
    scroll-margin-top: 100px;
}

/* Ultra-aggressive image sizing to prevent CLS */
img {
    contain: layout;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Force dimensions for images with explicit width/height attributes */
img[width][height] {
    width: attr(width px);
    height: attr(height px);
    contain: layout size;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

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

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    color: #2c3e50;
    text-align: center;
}

h3 {
    font-size: 1.5rem;
}

/* Fix deprecated API warning - explicit font-sizes for headings in semantic elements */
/* Use !important to ensure these override any browser default behavior */
/* Universal H1 rule to cover all cases - maximum specificity */
html body h1,
html body section h1,
html body article h1, 
html body aside h1, 
html body nav h1,
html body main section h1,
html body main article h1,
html body main aside h1,
html body header section h1,
html body footer section h1,
html body div section h1,
html body div article h1,
html body div aside h1,
html body div nav h1,
html body .intro h1,
html body .services-overview h1,
html body .hero h1,
html body .hero-content h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    /* Prevent layout shift during font loading */
    font-display: swap !important;
}

/* Prevent layout shifts for images and media */
img, video, iframe {
    max-width: 100%;
    height: auto;
    /* Reserve space for images to prevent layout shift */
    background: #f0f0f0;
    border-radius: 4px;
}

/* Specific hero image optimization */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prevent layout shift during loading */
    aspect-ratio: 2 / 1;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

/* Additional specific selectors for comprehensive coverage */
.intro h1, 
.services-overview h1,
.hero h1,
.hero-content h1,
section.intro h1,
section.services-overview h1,
section.hero h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    font-display: swap !important;
}

section h2, 
article h2, 
aside h2, 
nav h2,
main section h2,
main article h2,
main aside h2 {
    font-size: 2rem !important;
}

section h3, 
article h3, 
aside h3, 
nav h3,
main section h3,
main article h3,
main aside h3 {
    font-size: 1.5rem !important;
}

section h4, 
article h4, 
aside h4, 
nav h4,
main section h4,
main article h4,
main aside h4 {
    font-size: 1.25rem !important;
}

section h5, 
article h5, 
aside h5, 
nav h5,
main section h5,
main article h5,
main aside h5 {
    font-size: 1.1rem !important;
}

section h6, 
article h6, 
aside h6, 
nav h6,
main section h6,
main article h6,
main aside h6 {
    font-size: 1rem !important;
}

p {
    margin-bottom: 1rem;
    color: #555;
}

/* Header & Navigation */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nav {
    padding: 1rem 0;
}

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

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    contain: layout;
    min-width: 280px;
    min-height: 45px;
}

.logo {
    height: 45px;
    width: 40px;
    contain: layout size;
    object-fit: contain;
    font-synthesis: none;
}

.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

.nav-phone {
    font-size: 1.1rem;
    font-weight: 600;
}

.phone-link {
    color: #e67e22;
    text-decoration: none;
    transition: color 0.3s;
}

.phone-link:hover {
    color: #d35400;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1001;
    touch-action: manipulation;
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #2c3e50;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
    position: relative;
    opacity: 1;
    flex-shrink: 0;
    /* Ensure spans are always visible */
    min-height: 3px;
    min-width: 25px;
}

/* Nav toggle animation states */
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav-toggle:hover span {
    background: #3498db;
}

.nav-toggle:active {
    transform: scale(0.95);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #3498db;
}

.nav-cta {
    background: #e67e22;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: 600;
}

.nav-cta:hover {
    background: #d35400 !important;
    color: white !important;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
        /* Ensure hamburger is visible on mobile */
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ddd;
    }
    
    .nav-toggle span {
        background: #2c3e50 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        z-index: 1000;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-phone {
        display: none;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: #e67e22;
    color: white;
    border-color: #e67e22;
}

.btn-primary:hover {
    background: #d35400;
    border-color: #d35400;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: #3498db;
    border-color: #3498db;
}

.btn-secondary:hover {
    background: #3498db;
    color: white;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 500px;
    display: grid;
    place-items: center;
    margin-top: 80px;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.7);
    z-index: -1;
}

.hero-content {
    position: static;
    color: white;
    text-align: center;
    z-index: 1;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 2rem 0;
}

.hero-content .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    display: grid;
    place-items: center;
}

/* Hero heading centering for all hero variants */
[class*="hero"] h1,
.hero h1 {
    color: white;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-align: center !important;
}

/* Ensure all hero content is centered */
[class*="hero"] .hero-content,
.hero .hero-content {
    text-align: center;
}

/* Hero subtitle centering for all hero variants */
[class*="hero"] .hero-subtitle,
.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #ecf0f1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

/* Hero CTA centering for all hero variants */
[class*="hero"] .hero-cta,
.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

/* Service Hero Variants */
.hero-service {
    min-height: 50vh;
}

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

/* Main Content Sections */
section {
    padding: 4rem 0;
}

.intro {
    background: #f8f9fa;
    padding: 4rem 0;
}

.intro-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
}

.intro h2 {
    margin: 0 0 1rem 0 !important;
    color: #2c3e50;
    font-size: 2rem !important;
    line-height: 1.2 !important;
    contain: layout !important;
}

.intro p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: left;
    contain: layout !important;
}

/* Services Grid */
.services-overview {
    padding: 4rem 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 500px;
    display: flex;
    flex-direction: column;
}

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

.service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}

.service-card h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    color: #2c3e50;
}

.service-card p {
    padding: 0 1.5rem;
    color: #666;
    line-height: 1.6;
}

.service-link {
    display: inline-block;
    margin: 1rem 1.5rem 1.5rem;
    color: #3498db;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.service-link:hover {
    color: #2980b9;
}

/* Service Areas */
.service-areas {
    background: #f8f9fa;
    padding: 4rem 0;
}

.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    min-height: 300px;
}

.area-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    min-height: 200px;
}

.area-card h3 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s;
}

.area-card h3 a:hover {
    color: #3498db;
}

.area-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.area-details {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    text-align: left;
}

.area-details p {
    margin: 0.3rem 0;
    font-size: 0.9rem;
}

.area-services {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-top: 1rem;
}

.area-services li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #e9ecef;
    color: #5a6c7d;
}

.area-services li:last-child {
    border-bottom: none;
}

/* Blog Styles */
.blog-content {
    padding: 4rem 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blog-post {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.blog-post h2 {
    margin-bottom: 1rem;
}

.blog-post h2 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s;
}

.blog-post h2 a:hover {
    color: #3498db;
}

.blog-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.blog-date {
    margin-right: 1rem;
}

.blog-category {
    color: #27ae60;
    font-weight: 500;
}

.blog-excerpt p {
    color: #5a6c7d;
    line-height: 1.6;
}

.read-more {
    color: #e67e22;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.read-more:hover {
    color: #d35400;
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-widget {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.sidebar-widget h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.recent-posts {
    list-style: none;
    padding: 0;
}

.recent-posts li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #ecf0f1;
}

.recent-posts li:last-child {
    border-bottom: none;
}

.recent-posts a {
    color: #5a6c7d;
    text-decoration: none;
    transition: color 0.3s;
}

.recent-posts a:hover {
    color: #3498db;
}

.recent-posts a.active {
    color: #e67e22;
    font-weight: 500;
}

/* Blog Post Page Styles */
.blog-post-content {
    padding: 4rem 0;
}

.blog-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.blog-post-main {
    background: white;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.blog-post-meta {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ecf0f1;
}

.blog-post-body {
    line-height: 1.8;
    color: #2c3e50;
    margin-bottom: 2rem;
}

.blog-post-nav {
    padding-top: 2rem;
    border-top: 1px solid #ecf0f1;
}

.blog-post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Extended Service Area Styles */
.extended-areas {
    padding: 4rem 0;
    background: #f8f9fa;
}

.extended-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.extended-column {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.extended-column h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

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

.extended-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #ecf0f1;
    color: #5a6c7d;
    transition: color 0.3s;
}

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

.extended-list li:hover {
    color: #3498db;
}

/* Area Specializations Styles */
.area-specializations {
    padding: 4rem 0;
}

.specialization-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.specialization {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.specialization h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.specialization p {
    color: #7f8c8d;
    margin-bottom: 1rem;
}

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

.specialization li {
    padding: 0.5rem 0;
    border-left: 3px solid #27ae60;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    color: #5a6c7d;
    background: #f8f9fa;
}

/* Service Area Coverage Section */
.service-area-map {
    padding: 4rem 0;
    background: #f8f9fa;
}

.coverage-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.coverage-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.stat-item {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.stat-item h3 {
    color: #3498db;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.stat-item p {
    color: #7f8c8d;
    font-weight: 500;
    margin: 0;
}

.travel-times {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.travel-times h3 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

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

.travel-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #ecf0f1;
    color: #5a6c7d;
    line-height: 1.4;
}

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

.travel-list strong {
    color: #2c3e50;
}

/* Service Guarantee Section */
.service-guarantee {
    padding: 4rem 0;
}

.guarantee-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-top: 2rem;
}

.guarantee-text h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.guarantee-list {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.guarantee-list li {
    padding: 0.8rem 0;
    border-left: 3px solid #27ae60;
    padding-left: 1rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
    color: #5a6c7d;
}

.guarantee-list strong {
    color: #27ae60;
}

.guarantee-image {
    text-align: center;
}

.guarantee-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}

/* Contact Areas Section */
.contact-areas {
    padding: 4rem 0;
    background: #f8f9fa;
    text-align: center;
}

.contact-areas p {
    max-width: 800px;
    margin: 0 auto 2rem;
    color: #5a6c7d;
    line-height: 1.6;
}

.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.contact-method {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.contact-method h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.contact-method p {
    color: #5a6c7d;
    margin: 0.5rem 0;
}

/* Why Choose Section */
.why-choose {
    padding: 4rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.benefit-icon {
    background: #27ae60;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.benefit-item h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.benefit-item p {
    color: #666;
    margin: 0;
}

/* Testimonials */
.testimonials {
    background: #f8f9fa;
    padding: 4rem 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.testimonial {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    position: relative;
}

.testimonial::before {
    content: '"';
    font-size: 3rem;
    color: #3498db;
    position: absolute;
    top: 0.5rem;
    left: 1rem;
}

.testimonial p {
    font-style: italic;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.testimonial cite {
    font-weight: 600;
    color: #2c3e50;
    font-style: normal;
}

/* Process Section */
.concrete-process {
    padding: 4rem 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.process-step {
    text-align: center;
    padding: 2rem;
}

.step-number {
    background: #3498db;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.process-step h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Service Detail Pages */
.service-intro {
    padding: 3rem 0;
}

.service-types {
    background: #f8f9fa;
    padding: 4rem 0;
}

.service-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-type {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

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

.service-type h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    color: #2c3e50;
}

.service-type p {
    padding: 0 1.5rem 1.5rem;
    color: #666;
}

.driveway-benefits {
    padding: 4rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.benefit {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    border-left: 4px solid #3498db;
}

.benefit h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.benefit p {
    color: #666;
    margin: 0;
}

.installation-process {
    background: #f8f9fa;
    padding: 4rem 0;
}

.service-areas-section {
    padding: 3rem 0;
}

.areas-list ul {
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}

.areas-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

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

.areas-list a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}

.areas-list a:hover {
    color: #2980b9;
}

/* Service Detail Cards */
.services-detail {
    padding: 4rem 0;
}

.service-detail-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.service-detail-card:hover {
    transform: translateY(-3px);
}

.service-detail-card .service-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}

.service-detail-card h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    color: #2c3e50;
}

.service-detail-card p {
    padding: 0 1.5rem;
    color: #666;
    margin-bottom: 1rem;
}

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

.service-features li {
    padding: 0.25rem 0;
    color: #555;
    position: relative;
    padding-left: 1rem;
}

.service-features li::before {
    content: '✓';
    color: #27ae60;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.service-detail-card .btn {
    margin: 0 1.5rem 1.5rem;
    display: inline-block;
}

.service-process {
    background: #f8f9fa;
    padding: 4rem 0;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.process-item {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.process-number {
    background: #e67e22;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.process-item h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.process-item p {
    color: #666;
    margin: 0;
    font-size: 0.9rem;
}

/* Contact Section */
.contact-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.contact-info h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.contact-details {
    margin-top: 2rem;
}

.contact-item {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.contact-item strong {
    color: #2c3e50;
    display: inline-block;
    width: 120px;
}

.contact-item a {
    color: #e67e22;
    text-decoration: none;
    font-weight: 600;
}

.contact-item a:hover {
    color: #d35400;
}

.contact-form {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-form h3 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.form-hint {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.form-group input:invalid:not(:focus) {
    border-color: #e74c3c;
}

.form-group input:valid:not(:focus) {
    border-color: #27ae60;
}

.contact-cta {
    text-align: center;
    padding: 4rem 0;
}

.contact-cta h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Our Story Section */
.our-story {
    padding: 4rem 0;
}

.story-text {
    max-width: 800px;
    margin: 0 auto 3rem auto;
    text-align: center;
}

.story-image-centered {
    text-align: center;
    margin-top: 2rem;
}

.story-image-centered .about-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Service Commitment Section */
.service-commitment {
    padding: 4rem 0;
    background: #f8f9fa;
}

.commitment-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.commitment-text-block h3 {
    text-align: left;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.commitment-list {
    text-align: left;
}

.commitment-image-block {
    text-align: center;
}

.commitment-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Mobile responsive for commitment blocks */
@media (max-width: 768px) {
    .commitment-blocks {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .commitment-text-block h3 {
        text-align: center;
    }
}

/* Credentials Section */
.credentials {
    padding: 4rem 0;
}

.credentials p {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
    color: #555;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    color: #3498db;
    margin-bottom: 1rem;
}

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

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #3498db;
}

.footer-bottom {
    border-top: 1px solid #34495e;
    padding-top: 1rem;
    text-align: center;
    color: #95a5a6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
        text-align: center !important;
    }

    .hero-subtitle {
        font-size: 1rem;
        text-align: center !important;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .areas-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-grid,
    .blog-post-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .blog-sidebar,
    .blog-post-sidebar {
        order: -1;
    }

    .extended-grid,
    .specialization-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .coverage-details {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Extra mobile safety for very small screens */
@media (max-width: 375px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .hero h1 {
        font-size: 1.6rem;
    }
    
    .container {
        padding: 0 15px;
    }

    .coverage-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .guarantee-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .guarantee-image {
        order: -1;
    }

    .contact-methods-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    section {
        padding: 2rem 0;
    }

    .hero {
        min-height: 50vh;
    }

    .hero-content {
        padding: 2rem 0;
    }

    .hero h1 {
        font-size: 1.8rem;
        text-align: center !important;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .service-card,
    .service-detail-card {
        margin-bottom: 1rem;
    }
}