/* --- GLOBAL VARIABLES --- */

:root {

    --primary: #1a1a1a;

    --accent: #C4A484;

    --light: #f4f4f4;

    --white: #ffffff;

    --cream: #f7f6f2;

}



/* --- RESET (Removes the white gap at the top) --- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

    font-family: 'Roboto', sans-serif;

    background-color: var(--white);

    color: var(--primary);

    line-height: 1.7;

    /* Ensures no white bar at top */

    margin-top: 0 !important;

    padding-top: 0 !important;

}



h1, h2, h3, h4, .logo, .cta-btn, .submit-btn, .v-num, .tiny-label {

    font-family: 'Oswald', sans-serif;

    text-transform: uppercase;

    letter-spacing: 1px;

}



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



/* --- NAVBAR --- */

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

   

    /* Reduced height from 80px to 60px */

    height: 60px;

   

    /* White transparency settings */

    background: rgba(255, 255, 255, 0.9);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);



    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 40px;

    z-index: 1000;

   

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    border-bottom: 1px solid rgba(255, 255, 255, 1);

   

    transition: transform 0.3s ease-in-out;

}

.navbar.hidden { transform: translateY(-100%); }



.logo {

    height: 100%;

    display: flex;

    align-items: center;

}



.logo-link {

    display: flex;

    align-items: center;

    text-decoration: none;

    gap: 12px; /* Space between Icon and Text */

    height: 100%;

}



.logo-link img {

    height: 40px; /* Perfect size for the 60px navbar */

    width: auto;  /* Keeps the logo shape correct */

    display: block;

}



.logo-link span {

    font-family: 'Oswald', sans-serif;

    font-weight: 700;

    font-size: 1.5rem;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 1px;

    line-height: 1;

    padding-top: 2px; /* Slight adjustment to center with icon */

}



/* --- LOGO STYLING --- */

.logo-link img {

    /* Increased from 40px to 55px */

    height: 60px;

    width: auto;

    display: block;

}



/* Mobile Adjustment */

@media (max-width: 900px) {

    .logo-link img {

        /* Slightly smaller on phone so it doesn't touch edges */

        height: 60px;

    }

}



.nav-links { display: flex; list-style: none; align-items: center; gap: 35px; }

.nav-links a { text-decoration: none; color: var(--primary); font-weight: 500; font-size: 0.9rem; transition: color 0.3s; }

.nav-links a:hover { color: var(--accent); }



/* Dropdown */

.nav-links li { position: relative; }

.dropdown-content {

    display: none; position: absolute; top: 30px; left: -10px;

    background-color: white; min-width: 160px; box-shadow: 0px 5px 15px rgba(0,0,0,0.1);

    z-index: 1; border: 1px solid #eee;

}

.dropdown-content a { padding: 12px 20px; display: block; font-size: 0.85rem; border-bottom: 1px solid #f9f9f9; }

.dropdown:hover .dropdown-content { display: block; }



.cta-btn {

    background: var(--primary); color: white !important; padding: 10px 25px;

    border-radius: 4px; font-size: 0.8rem; letter-spacing: 1px;

}

.cta-btn:hover { background: var(--accent); }



/* --- MOBILE MENU (FIXED: HIDDEN ON DESKTOP) --- */

.mobile-menu {

    display: none; /* This hides that text bar! */

    position: fixed; top: 60px; left: 0; width: 100%;

    background: white; flex-direction: column; padding: 20px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 999;

}



/* --- HERO SECTION --- */

/* --- HERO SECTION --- */

.hero-split-section {
    min-height: 90vh;
    
    /* 1. Paint the background grey instantly (Speed Trick) */
    background-color: #1a1a1a; 

    /* 2. DEFAULT: Load the SMALL Mobile Image + Dark Gradient */
    background-image: linear-gradient(rgba(18, 18, 18, 0.6), rgba(18, 18, 18, 0.75)), url('pictures/stucco_bg_mobile.webp');
    
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 60px;
}

/* 3. DESKTOP OVERRIDE: Only load the big 162KB file if screen is wide */
@media (min-width: 900px) {
    .hero-split-section {
        background-image: linear-gradient(rgba(18, 18, 18, 0.6), rgba(18, 18, 18, 0.75)), url('pictures/stucco_bg.webp');
    }
}


.split-layout {

    display: flex; align-items: center; justify-content: space-between;

    width: 100%; padding: 0 20px; gap: 60px;

}



.hero-text-content { flex: 1; color: white; }

.hero-text-content h1 { font-size: 3.8rem; line-height: 1.1; margin-bottom: 25px; }

.gold-text { color: var(--accent); }

.hero-text-content p { font-size: 1.15rem; opacity: 0.9; max-width: 550px; margin-bottom: 30px; font-weight: 300; }



.hero-badges span {

    display: inline-block; margin-right: 20px; font-size: 0.9rem;

    border: 1px solid var(--accent); color: var(--accent); padding: 5px 15px;

}



/* --- SQUARE FORM CARD --- */

.hero-form-card {

    flex: 0 0 380px;

    background: white; padding: 30px; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,0.5);

}

.card-header { text-align: left; margin-bottom: 20px; border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; }

.card-header h3 { font-size: 1.4rem; color: #333; margin: 0; }

.quote-form-vertical { display: flex; flex-direction: column; gap: 15px; }

.quote-form-vertical input, .quote-form-vertical textarea, .quote-form-vertical select {

    width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 2px;

    background: #fff; font-family: 'Roboto', sans-serif; font-size: 0.9rem;

}

.quote-form-vertical input:focus, .quote-form-vertical textarea:focus { border-color: var(--accent); outline: none; }

.form-row { display: flex; gap: 10px; }

.submit-btn {

    margin-top: 10px; padding: 15px; background-color: var(--accent); color: white;

    border: none; border-radius: 2px; font-weight: bold; font-size: 0.9rem; cursor: pointer; transition: background 0.3s;

}

.submit-btn:hover { background-color: #b08d6b; }





/* --- EXPERTISE (4 CARD GRID) --- */

.services-overview { padding: 100px 0; background: white; }

.section-title { text-align: center; margin-bottom: 15px; font-size: 2.2rem; color: var(--primary); }

.section-subtitle { text-align: center; margin-bottom: 60px; color: #666; font-size: 1rem; }



.grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 30px;

}



.card {

    height: 350px; position: relative; text-decoration: none; color: white;

    overflow: hidden; border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,0.1);

    transition: transform 0.3s;

}

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



/* Card Backgrounds */

.stucco-card { background: url('pictures/S1.webp') center/cover; }

.stone-card { background: url('pictures/SS1.webp') center/cover; }

.tile-card { background: url('pictures/T1.png') center/cover; }

.parging-card { background: url('pictures/P1.webp') center/cover; }



.overlay {

    background: rgba(0,0,0,0.4); height: 100%; width: 100%;

    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;

    padding: 30px; transition: background 0.3s;

}

.card:hover .overlay { background: rgba(0,0,0,0.2); }

.card h3 { font-size: 1.8rem; margin-bottom: 5px; border-bottom: 2px solid var(--accent); }

.hover-text { font-size: 0.95rem; opacity: 0.9; margin-bottom: 15px; }

.arrow { color: var(--accent); font-size: 1.5rem; }





/* --- EDITORIAL SECTION (Company & Process) --- */

.editorial-section {

    padding: 100px 0; background-color: var(--cream); color: #333;

    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM32 63c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4d0c2' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");

}



.editorial-row { display: flex; justify-content: space-between; margin-bottom: 80px; gap: 60px; }



/* Top Row */

.editorial-left { flex: 1; }

.editorial-right { flex: 1; }

.editorial-left h2 { font-size: 3rem; line-height: 1.1; color: var(--primary); max-width: 400px; }

.editorial-right p { margin-bottom: 20px; font-size: 1rem; color: #555; line-height: 1.8; }

.editorial-right .lead-text { font-weight: bold; color: #222; font-size: 1.1rem; }



/* Bottom Row */

.bottom-row { align-items: flex-start; margin-bottom: 0; }



/* Single Tall Image */

.collage-wrapper.single-image { flex: 1; height: auto; display: flex; justify-content: flex-end; }

.img-tall-feature {

    width: 100%; max-width: 500px; height: 600px; object-fit: cover;

    border-radius: 4px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

}



/* Process Content */

.process-text-wrapper { flex: 1; padding-right: 40px; padding-left: 0; }

.tiny-label {

    font-size: 0.8rem; font-weight: bold; letter-spacing: 2px;

    color: #888; display: block; margin-bottom: 10px;

}

.process-text-wrapper h3 { font-size: 2.5rem; margin-bottom: 20px; color: var(--primary);}

.process-intro {

    font-size: 0.95rem; color: #666; margin-bottom: 40px;

    border-left: 3px solid var(--accent); padding-left: 15px;

}



/* Process Grid (2x2) */

.process-grid-2x2 {

    display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; margin-bottom: 40px;

}

.v-step { display: flex; align-items: flex-start; }

.v-num {

    color: var(--accent); font-size: 1.4rem; font-weight: bold; margin-right: 15px; min-width: 30px; line-height: 1;

}

.v-info h4 { margin: 0 0 8px 0; font-size: 1.1rem; color: #333; }

.v-info p { margin: 0; font-size: 0.9rem; color: #666; line-height: 1.6; }

.hours-info {

    font-size: 0.8rem; color: #888; letter-spacing: 1px;

    margin-top: 30px; border-top: 1px solid #ddd; padding-top: 20px;

}



/* --- WHY US --- */

.about-section { padding: 100px 0; background-color: white; text-align: center; border-top: 1px solid #eee; }

.about-section h2 { margin-bottom: 60px; font-size: 2.2rem; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 50px; }

.feature-item { padding: 20px; }

.icon-box { margin-bottom: 20px; color: var(--accent); }

.icon-box svg { width: 50px; height: 50px; stroke-width: 1.5; }

.feature-item h3 { margin-bottom: 15px; font-size: 1.3rem; }

.feature-item p { color: #555; font-size: 1rem; max-width: 300px; margin: 0 auto; }



/* --- FOOTER --- */
footer { 
    background: #111; 
    color: #aaa; 
    padding-top: 80px; 
    font-size: 0.9rem; 
    border-top: 4px solid var(--accent); /* Adds a gold line at top */
}

.footer-grid { 
    display: grid; 
    /* 4 Columns: Brand (Wide) | Links | Contact | Map (Wide) */
    grid-template-columns: 1.5fr 0.8fr 1fr 1.5fr; 
    gap: 50px; 
    margin-bottom: 60px; 
    align-items: start;
}

.footer-col h3 { 
    color: white; 
    margin-bottom: 25px; 
    font-size: 1.2rem; 
    letter-spacing: 2px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

/* Brand Column */
.brand-col p { 
    line-height: 1.8; 
    margin-bottom: 25px; 
    max-width: 300px;
}

.social-links { display: flex; gap: 15px; }
.social-links a {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border: 1px solid #333;
    padding: 5px 10px;
    transition: all 0.3s;
}
.social-links a:hover { background: var(--accent); color: white; border-color: var(--accent); }

/* Links Column */
.links-col a { 
    display: block; 
    color: #999; 
    text-decoration: none; 
    margin-bottom: 12px; 
    transition: color 0.3s; 
    position: relative;
    padding-left: 0;
}
.links-col a:hover { color: var(--accent); padding-left: 5px; }

/* Contact Column */
.contact-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}
.contact-row span { color: var(--accent); font-size: 1.1rem; }
.contact-row p { margin: 0; line-height: 1.6; color: #ccc; }

/* --- Map Column Fixed --- */
.map-col iframe {
    width: 100%;
    height: 220px;
    border-radius: 2px;
    
    /* REMOVED the grayscale filter so it's always colored */
    filter: none; 
    opacity: 1; 

    transition: all 0.3s;
}

/* You can keep this or remove it, it doesn't do much now */
.map-col iframe:hover {
    opacity: 1;
}
/* Footer Bottom */
.footer-bottom { 
    background: #0a0a0a;
    border-top: 1px solid #222; 
    padding: 25px 0; 
    text-align: center; 
    font-size: 0.8rem; 
    color: #666;
    letter-spacing: 1px;
}

/* Footer Responsive */
@media (max-width: 900px) {
    .footer-grid { 
        grid-template-columns: 1fr; /* Stack everything */
        gap: 40px; 
        text-align: center;
    }
    .brand-col p { margin: 0 auto 25px auto; }
    .social-links { justify-content: center; }
    .contact-row { justify-content: center; text-align: left; }
    .map-col iframe { height: 250px; }
}


/* --- MOBILE RESPONSIVE --- */

.burger { display: none; cursor: pointer; }



@media (max-width: 900px) {

    .navbar { height: 60px; padding: 0 20px; }

    .nav-links { display: none; }

    .burger { display: block; }

   

    .hero-split-section { padding-top: 140px; padding-bottom: 60px; }



    /* Fix Mobile Menu Appearance */

    .mobile-menu {

        display: none; position: fixed; top: 60px; left: 0; width: 100%;

        background: white; flex-direction: column; padding: 20px;

        box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 999;

    }

    .mobile-menu.active { display: flex; }

    .mobile-menu a { padding: 15px 0; text-decoration: none; color: #333; font-weight: bold; border-bottom: 1px solid #f0f0f0; }

    .sub-link { padding-left: 20px !important; font-weight: normal !important; color: #555 !important; }

    .mobile-cta { margin-top: 20px; background: var(--accent); color: white !important; text-align: center; border-radius: 2px; }

    .mobile-header { margin-top: 20px; font-size: 0.8rem; color: #999; font-weight: bold; }



    .split-layout { flex-direction: column; text-align: center; gap: 40px; }

    .hero-text-content { padding-right: 0; }

    .hero-text-content h1 { font-size: 2.5rem; }

    .hero-badges { display: none; }

    .hero-form-card { width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

   

    /* Editorial Stacking */

    .editorial-row { flex-direction: column; gap: 40px; }

    .editorial-left h2 { font-size: 2.2rem; max-width: 100%; }

    .bottom-row-reverse { flex-direction: column-reverse; } /* Image on top mobile */

    .collage-wrapper.single-image { justify-content: center; margin-bottom: 30px; }

    .img-tall-feature { max-width: 100%; height: 400px; }

    .process-text-wrapper { padding-right: 0; }

    .process-grid-2x2 { grid-template-columns: 1fr; gap: 25px; }



    .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }

}



.burger div { width: 22px; height: 2px; background-color: var(--primary); margin: 5px; transition: all 0.3s ease; }

/* --- SUB-PAGE SPECIFIC STYLES --- */

/* --- STUCCO PAGE SPECIFIC STYLES --- */



/* 1. Sticky Quick-Nav Bar */

.quick-nav {

    background: white;

    border-bottom: 1px solid #eee;

    padding: 15px 0;

    position: sticky;

    top: 70px; /* Sticks right below your main navbar */

    z-index: 900;

    text-align: center;

    box-shadow: 0 5px 10px rgba(0,0,0,0.05);

}

.quick-nav a {

    margin: 0 15px;

    text-decoration: none;

    color: #555;

    font-weight: 500;

    font-size: 0.9rem;

    text-transform: uppercase;

    transition: color 0.3s;

}

.quick-nav a:hover { color: var(--accent); }





/* 2. Deep Detail Rows (The Zig-Zag) */

.sub-services { padding: 80px 0; }



.detail-row {

    display: flex;

    align-items: flex-start; /* Aligns to top */

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 150px; /* HUGE spacing for that "nice scroll" feel */

    border-bottom: 1px solid #f0f0f0; /* Subtle divider */

    padding-bottom: 80px;

}

.detail-row:last-child { border-bottom: none; margin-bottom: 0; }

.reverse { flex-direction: row-reverse; }



/* Text Side */

.detail-text { flex: 1; }

.detail-text h2 {

    font-size: 2.2rem; margin-bottom: 15px; color: var(--primary);

}

.detail-text p.main-desc {

    font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 30px;

}



/* Image Side */

.detail-img {

    flex: 1;

    height: 500px; /* Tall, impressive images */

    background-size: cover; background-position: center;

    border-radius: 4px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.15); /* Deep shadow */

}



/* 3. Tech Specs & Pros/Cons Box */

.specs-box {

    background: #f9f9f9;

    padding: 25px;

    border-radius: 4px;

    border-left: 4px solid var(--accent);

}

.specs-header {

    font-size: 0.9rem; font-weight: bold; text-transform: uppercase;

    color: #888; margin-bottom: 15px; letter-spacing: 1px;

}



.compare-grid {

    display: grid; grid-template-columns: 1fr 1fr; gap: 30px;

}

.compare-col h4 {

    font-size: 1rem; margin-bottom: 10px; text-transform: uppercase;

}

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

.compare-col li {

    font-size: 0.9rem; margin-bottom: 8px; color: #666;

    padding-left: 15px; position: relative;

}

/* Color coded bullets */

.pros h4 { color: #2e7d32; }

.pros li::before { content: "✓"; position: absolute; left: 0; color: #2e7d32; font-weight: bold; }



.cons h4 { color: #c62828; }

.cons li::before { content: "×"; position: absolute; left: 0; color: #c62828; font-weight: bold; }



/* CTA Footer Strip */

.cta-footer {

    background: var(--primary); color: white;

    text-align: center; padding: 100px 20px;

    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://www.transparenttextures.com/patterns/cubes.png');

}

.cta-footer h2 { font-size: 2.5rem; margin-bottom: 40px; }



/* Mobile */

@media (max-width: 900px) {

    .detail-row { flex-direction: column; gap: 30px; margin-bottom: 80px; }

    .reverse { flex-direction: column; }

    .detail-img { width: 100%; height: 300px; }

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

    .quick-nav { display: none; /* Hide jump links on mobile to save space */ }

}
/* --- PASTE THIS AT THE BOTTOM OF YOUR STYLE.CSS --- */
/* --- REPLACING THE PREVIOUS SUB-PAGE STYLES --- */

/* 0. Global Fix for Jump Links */
html {
    /* This prevents the fixed navbar from covering the text when you click a link */
    scroll-padding-top: 140px; 
}

/* 1. Page Header (The Hero Banner for Sub-pages) */
.page-header {
    height: 60vh; /* Takes up 60% of the screen height */
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 60px; /* Pushes it down below the fixed navbar */
}

/* Dark overlay so text pops */
.page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); 
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.page-header h1 {
    font-size: 3.5rem;
    margin-bottom: 15px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.page-header p {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* 2. Sticky Quick-Nav Bar */
.quick-nav {
    background: white;
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    position: sticky;
    top: 60px; /* Sticks right below your main navbar (height 60px) */
    z-index: 900;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.quick-nav a {
    margin: 0 20px;
    text-decoration: none;
    color: #555;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
    position: relative;
}

/* Cool underline effect on hover */
.quick-nav a::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: -5px; left: 0;
    background-color: var(--accent);
    transition: width 0.3s;
}
.quick-nav a:hover { color: var(--accent); }
.quick-nav a:hover::after { width: 100%; }

/* 3. Deep Detail Rows */
.sub-services { padding: 80px 0; }

.detail-row {
    display: flex;
    align-items: stretch; /* Makes sure text and image are same height */
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 100px;
    border-bottom: 1px solid #eee;
    padding-bottom: 80px;
}
.detail-row:last-child { border-bottom: none; }
.reverse { flex-direction: row-reverse; }

/* Text Side */
.detail-text { flex: 1; display: flex; flex-direction: column; justify-content: center;}
.detail-text h2 {
    font-size: 2.5rem; margin-bottom: 20px; color: var(--primary);
    border-left: 5px solid var(--accent);
    padding-left: 20px;
}
.detail-text p.main-desc {
    font-size: 1.05rem; color: #444; line-height: 1.8; margin-bottom: 15px;
}

/* Image Side */
.detail-img {
    flex: 1;
    min-height: 400px;
    background-size: cover; 
    background-position: center;
    border-radius: 2px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2); 
}

/* 4. Tech Specs Box (Sharper Look) */
.specs-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    margin-top: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.specs-header {
    font-size: 0.85rem; font-weight: bold; text-transform: uppercase;
    color: var(--accent); margin-bottom: 20px; letter-spacing: 2px;
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}

.compare-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}

.compare-col h4 {
    font-size: 1rem; margin-bottom: 15px; text-transform: uppercase; font-weight: 700;
}

.compare-col ul { list-style: none; padding: 0; }
.compare-col li {
    font-size: 0.95rem; margin-bottom: 12px; color: #555;
    padding-left: 25px; position: relative;
    line-height: 1.4;
}

/* Custom Icons for lists */
.pros h4 { color: #333; }
.pros li::before { 
    content: "✓"; 
    position: absolute; left: 0; top: 0;
    color: var(--accent); font-weight: bold; font-size: 1.1rem;
}

.cons h4 { color: #333; }
.cons li::before { 
    content: "—"; /* Using a dash instead of X for a cleaner look */
    position: absolute; left: 0; top: 0;
    color: #999; font-weight: bold; 
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    .page-header h1 { font-size: 2.2rem; }
    .quick-nav { overflow-x: auto; white-space: nowrap; padding: 15px 20px; justify-content: flex-start; }
    .detail-row { flex-direction: column; gap: 30px; margin-bottom: 60px; }
    .reverse { flex-direction: column; }
    .detail-img { height: 250px; width: 100%; order: -1; /* Puts image on top on mobile */ }
    .compare-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* =========================================
   START: "SHARP & SLEEK" STUCCO STYLES
   (Paste this at the bottom of style.css)
   ========================================= */

/* 1. Global "Sharp" Reset for this page */
.page-header, .img-col, .specs-container, .cta-btn {
    border-radius: 0 !important; /* Forces sharp corners everywhere */
}

/* 2. Sleek Header */
.page-header {
    height: 60vh;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 60px; /* Pushes below nav */
}
/* Darker, moodier overlay */
.page-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); 
}
.page-header h1 {
    font-size: 4rem; margin-bottom: 15px; 
    font-family: 'Oswald', sans-serif; letter-spacing: 2px;
    border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 10px;
}
.page-header p { 
    font-size: 1.3rem; opacity: 0.9; font-weight: 300; letter-spacing: 1px;
}

/* 3. The "Architectural" Zig-Zag Layout */
.system-section {
    padding: 120px 0; /* More breathing room = more luxury */
    border-bottom: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

.zig-zag-row {
    display: flex; align-items: center; justify-content: space-between; gap: 80px;
    position: relative; z-index: 2;
}
.reverse { flex-direction: row-reverse; }

/* 4. Giant Watermark Numbers (01, 02, 03) */
.watermark {
    position: absolute;
    top: -40px; left: -20px;
    font-size: 10rem;
    font-family: 'Oswald', sans-serif;
    color: #f4f4f4; /* Very subtle grey */
    z-index: -1;
    font-weight: 700;
    line-height: 1;
}

/* Text Styling */
.text-col { flex: 1; position: relative; }
.text-col h2 {
    font-size: 3rem; color: var(--primary); margin-bottom: 30px;
    font-family: 'Oswald', sans-serif; letter-spacing: 1px;
    line-height: 1;
}
.text-col p { 
    font-size: 1.1rem; color: #555; margin-bottom: 25px; 
    line-height: 1.8; font-weight: 300;
}

/* Image Styling - Sharp & Shadowed */
.img-col {
    flex: 1; height: 550px; /* Taller image */
    background-size: cover; background-position: center;
    box-shadow: 20px 20px 0px rgba(0,0,0,0.05); /* Sharp "Block" Shadow */
    filter: saturate(0.9); /* Slightly desaturated for modern look */
}

/* 5. Minimalist "Specs" Grid (No Box, Just Lines) */
.specs-container {
    margin-top: 40px;
    border-top: 2px solid #eee;
    padding-top: 30px;
}
.pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.pc-col h4 { 
    font-size: 0.9rem; margin-bottom: 20px; font-family: 'Oswald', sans-serif; 
    text-transform: uppercase; letter-spacing: 2px; color: #888;
}
.pc-col ul { list-style: none; padding: 0; }
.pc-col li {
    font-size: 0.95rem; margin-bottom: 12px; color: #333;
    padding-left: 0; border-bottom: 1px solid #f9f9f9; padding-bottom: 8px;
    display: flex; align-items: center; gap: 10px;
}

/* Custom Minimal Icons */
.pros li::before {
    content: 'DONE'; /* Using font trick or simple text */
    content: ''; width: 6px; height: 6px; background: #2e7d32; display: inline-block;
}
.cons li::before {
    content: ''; width: 6px; height: 6px; background: #c62828; display: inline-block;
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    .page-header h1 { font-size: 2.5rem; }
    .zig-zag-row, .reverse { flex-direction: column; gap: 40px; }
    .img-col { width: 100%; height: 350px; order: -1; box-shadow: 10px 10px 0px rgba(0,0,0,0.05); }
    .watermark { font-size: 6rem; top: 0; }
}
/* =========================================
   START: "DEEP TECHNICAL" STYLES
   (Paste this at the bottom of style.css)
   ========================================= */

/* 1. Reset to Sharp & Clean */
.page-header, .img-col, .tech-specs, .cta-btn {
    border-radius: 0 !important;
}

/* 2. Professional Header */
.page-header {
    height: 65vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 60px; 
}
.page-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.8)); /* Cinematic fade */
}
.page-header h1 {
    font-size: 3.8rem; margin-bottom: 20px; 
    font-family: 'Oswald', sans-serif; letter-spacing: 3px;
    border: 4px solid white; padding: 20px 40px; /* Framed Title */
    display: inline-block;
}
.page-header p { 
    font-size: 1.1rem; text-transform: uppercase; letter-spacing: 4px; margin-top: 20px;
}

/* 3. Deep Content Layout */
.system-section {
    padding: 100px 0;
    border-bottom: 1px solid #e0e0e0;
}

.zig-zag-row {
    display: flex; align-items: flex-start; /* Align top for long text */
    justify-content: space-between; gap: 80px;
}
.reverse { flex-direction: row-reverse; }

/* Text Side - High Density */
.text-col { flex: 1.2; /* Text takes slightly more space */ }
.text-col h2 {
    font-size: 2.8rem; color: var(--primary); margin-bottom: 30px;
    font-family: 'Oswald', sans-serif; letter-spacing: 1px;
    border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 10px;
}
.text-col p { 
    font-size: 1.05rem; color: #444; margin-bottom: 25px; 
    line-height: 1.9; font-weight: 400; text-align: justify; /* Newspaper style alignment */
}

/* Image Side - Tall & Architectural */
.img-col {
    flex: 0.8; height: 700px; /* Very tall vertical image */
    background-size: cover; background-position: center;
    filter: brightness(0.95);
    position: sticky; top: 100px; /* Image follows you as you read! */
}

/* 4. Technical Specs Mini-Table */
.tech-specs {
    margin-top: 40px;
    border: 1px solid #ddd;
    background: #fcfcfc;
    padding: 30px;
}
.tech-header {
    font-size: 0.9rem; font-weight: bold; text-transform: uppercase; 
    letter-spacing: 2px; border-bottom: 2px solid #333; padding-bottom: 15px; margin-bottom: 20px;
}

.spec-row {
    display: flex; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}
.spec-label { font-weight: bold; color: #333; text-transform: uppercase; }
.spec-value { color: #666; text-align: right; }

/* 5. Pros/Cons Text List */
.performance-list { margin-top: 30px; }
.performance-list h4 { font-size: 1rem; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1px; }
.performance-list ul { padding-left: 20px; color: #555; font-size: 0.95rem; line-height: 1.8; }

/* Mobile */
@media (max-width: 900px) {
    .page-header h1 { font-size: 2rem; border-width: 2px; padding: 15px; }
    .zig-zag-row, .reverse { flex-direction: column; gap: 40px; }
    .img-col { width: 100%; height: 300px; position: static; }
    .text-col { text-align: left; }
    .text-col p { text-align: left; }
}
/* 1. Make sure the hover is detected on the PARENT container (the li), 
   not just the link text */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 2. The Bridge Fix */
.dropdown-content {
    display: none;
    position: absolute;
    /* Ensure it starts exactly at the bottom of the nav bar */
    top: 100%; 
    left: 0;
    

    /* Ensure the background color is applied to the links, not the padding,
       otherwise the clear gap will look colored. 
       (Depending on your design, you might not need this line if 
       your background is already on the links/inner div) */
    background-clip: content-box; 
    
    z-index: 1000; /* Keeps it on top of other content */
}
  /* Repair Section Layout */
        .repair-intro {
            text-align: center;
            padding: 4rem 2rem 2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .repair-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            padding: 0 5% 4rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .repair-card {
            background: #fff;
            border: 1px solid #ddd;
            /* Angular aesthetic - strict corners */
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .repair-details {
            padding: 1.5rem;
            background: #fff;
            border-top: 4px solid #333; /* Thick dark line separating image and text */
        }

        .repair-details h3 {
            font-family: 'Oswald', sans-serif;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            color: #333;
            font-size: 1.4rem;
        }

        /* --- SLIDER STYLING --- */
        img-comparison-slider {
            width: 100%;
            outline: none;
            transition: box-shadow 0.3s;
            --divider-width: 2px;
            --divider-color: #ffffff;
        }

        img-comparison-slider img {
            width: 100%;
            height: 350px; /* Fixed height for consistency */
            object-fit: cover;
            display: block;
        }

        /* Custom Angular Handle (The slider button) */
        .tls-handle {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #333; /* TLS Dark Gray */
            color: white;
            width: 50px;
            height: 50px;
            /* Square shape for angular aesthetic */
            cursor: col-resize;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
        }

        /* Labels styling */
        .slider-label {
            position: absolute;
            top: 1rem;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 0.3rem 0.8rem;
            font-family: 'Oswald', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 1px;
            pointer-events: none;
        }
        .label-before { left: 1rem; }
        .label-after { right: 1rem; }
/* Add this to style.css */
.diagram-container {
    background: none !important; /* Remove background properties */
    height: auto !important;     /* Let image define height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagram-container img {
    width: 100%;
    height: auto;
    max-height: 600px; /* Prevents it from getting too massive */
    object-fit: contain;
}

/* --- MOBILE FIXES FOR SLIDER & HEADER --- */
@media (max-width: 900px) {

    /* 1. Fix the Header Alignment & Height */
    .page-header {
        height: auto;       /* Stop forcing 65vh */
        min-height: 350px;  /* More reasonable height for mobile */
        padding: 80px 20px 40px; /* Add padding so text doesn't touch edges */
        margin-top: 60px;
    }

    .page-header .container {
        width: 100%; /* Ensure container stays centered */
    }

    .page-header h1 {
        font-size: 2.2rem; /* Make text fit */
        white-space: normal; /* Allow text to wrap naturally */
        border-width: 3px;   /* Slightly thinner border */
        padding: 15px 20px;
        width: 100%;         /* Ensure it doesn't overflow */
    }

    /* 2. Fix the Slider/Repair Grid Overflow */
    .repair-grid {
        /* VITAL FIX: Change 400px to 1fr so it fits on phone screens */
        grid-template-columns: 1fr; 
        padding: 0 20px 40px; /* Reduce side padding */
        gap: 30px;
    }

    .repair-card {
        width: 100%; /* Ensure card stays within bounds */
        margin: 0;
    }

    /* 3. Adjust Slider Images & Handle for Mobile */
    img-comparison-slider img {
        height: 250px; /* Shorter image height for mobile screens */
    }

    .tls-handle {
        width: 40px;  /* Smaller handle */
        height: 40px;
        font-size: 1rem;
    }

    .slider-label {
        font-size: 0.7rem; /* Smaller labels (Before/After) */
        padding: 0.2rem 0.5rem;
    }
}
/* =========================================
   GLOBAL SCALE UP (SIMULATE 125% ZOOM)
   ========================================= */

/* 1. Scale the Base Size 
   Default browser font is 16px. 
   Setting this to 20px scales all REM values up by 25%. */
html {
    font-size: 20px; 
}

/* 2. Scale the Navbar Fixed Heights 
   Since the navbar was hardcoded in pixels (60px), 
   we need to manually increase it to match the new scale. */
.navbar {
    height: 80px; /* Increased from 60px */
}

/* Adjust the logo to fit the new taller navbar */
.logo-link img {
    height: 60px; /* Increased from 40-55px range */
}

/* Adjust the dropdown menu position */
.dropdown-content {
    top: 80px; /* Pushes it down to match new navbar height */
}

/* 3. Adjust Layout Spacing 
   Push the Hero and Sub-pages down further so they don't 
   hide behind the taller navbar. */
.hero-split-section {
    padding-top: 100px; /* Increased from 80px */
}

.page-header {
    margin-top: 80px; /* Increased from 60px */
}

.mobile-menu {
    top: 80px; /* Mobile menu starts lower */
}

/* 4. Widen the Container
   Because text is bigger, we give the container more width 
   so the layout doesn't feel cramped. */
.container {
    max-width: 1400px; /* Increased from 1200px */
}

/* 5. Mobile Adjustments
   On phones, 20px base font might be TOO huge. 
   We dial it back slightly for screens under 900px. */
@media (max-width: 900px) {
    html {
        font-size: 18px; /* Slight scale down for mobile legibility */
    }
    .navbar {
        height: 70px;
    }
    .mobile-menu {
        top: 70px;
    }
    .logo-link img {
        height: 50px;
    }
    .hero-split-section {
        padding-top: 100px; 
    }
}
/* FIX: Align dropdown to the bottom of the navbar */
.dropdown-content {
    /* 55px is the distance from the center of your text to the bottom of the white bar */
    top: 55px; 
    
    /* This creates an invisible "bridge" so the menu doesn't close 
       if your mouse moves slowly over the gap */
    padding-top: 10px; 
    
    /* Ensures the white background only starts AFTER the invisible bridge */
    background-clip: content-box; 
}
/* --- DROPDOWN FIX --- */

/* 1. Make the list items fill the full height of the navbar */
.nav-links {
    height: 100%; /* Matches navbar height */
    align-items: stretch; /* Stretches items to fit top-to-bottom */
}

.nav-links li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center; /* Centers text vertically */
}

/* 2. Position the dropdown exactly at the bottom edge */
.dropdown-content {
    display: none;
    position: absolute;
    
    /* Starts exactly where the navbar ends */
    top: 100%; 
    left: -15px; /* Centers it slightly better relative to text */
    
    background-color: white;
    min-width: 180px;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    border-top: 2px solid var(--accent); /* Adds a nice gold "connection" line */
    
    /* Remove the old padding hacks */
    padding-top: 0;
    background-clip: border-box; 
}

/* Keep it visible on hover */
.nav-links li:hover .dropdown-content {
    display: block;
}

/* Style the links inside */
.dropdown-content a {
    padding: 15px 20px;
    display: block;
    font-size: 0.85rem;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dropdown-content a:hover {
    background-color: #fafafa;
    color: var(--accent);
    padding-left: 25px; /* Slight movement effect */
}
/* --- 1. SLIDER CONTAINER & SHAPE --- */
.sleek-slider {
    width: 100%;
    aspect-ratio: 1 / 1;
    
    /* NEW LINE: Tells browser "Calculations inside here won't affect outside" */
    contain: layout paint; 
    
    /* ... keep your other existing styles below ... */
    max-width: 600px;
    display: block;
    border-radius: 6px;
    /* etc... */
}

/* Forces images to fill the square without stretching */
.sleek-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 2. HANDLE POSITIONING --- */
.premium-handle {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: col-resize;
}

/* --- 3. THE WHITE LINE --- */
.sleek-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 1;
}

/* --- 4. THE ROUND BUTTON --- */
.sleek-button {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}

/* Grows slightly when you hover over it */
.sleek-slider:hover .sleek-button {
    transform: scale(1.1);
}

/* --- 5. THE ARROWS INSIDE THE BUTTON --- */
.sleek-button svg {
    width: 20px;
    height: 20px;
    stroke: #1a1a1a; /* Dark Grey arrows */
}
/* =========================================
   MOBILE ONLY FIXES (Phones < 768px)
   ========================================= */
/* =========================================
   MOBILE ONLY FIXES (Phones < 900px)
   ========================================= */
@media screen and (max-width: 900px) {

    /* --- 1. FORCE NAVBAR TO EDGES --- */
    .navbar {
        /* Reduces side spacing to almost zero so elements hit the edges */
        padding-left: 5px !important; 
        padding-right: 10px !important; 
    }

    /* --- 2. PULL LOGO TO THE LEFT --- */
    .logo {
        /* This negative margin pulls the logo past the container's edge */
        margin-left: -20px !important; 
        
        /* Ensures the container doesn't block it */
        padding-left: 0 !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    .logo-link {
        padding-left: 0 !important;
    }

    .logo img {
        height: 55px; /* Adjust size if needed */
        width: auto;
    }

    /* --- 3. FIX PARGING HEADER IMAGE --- */
    .page-header {
        background-attachment: scroll !important;
        background-position: center center !important;
        background-size: cover !important;
    }
}
/* =========================================
   EMERGENCY MOBILE IMAGE FIX 
   (Paste at the very bottom of style.css)
   ========================================= */
@media screen and (max-width: 900px) {

    /* 1. Stop the wrapper from collapsing */
    .collage-wrapper.single-image {
        flex: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 40px !important;
        min-height: 350px !important; 
        position: relative;
        z-index: 10;
        
        /* Optional: Add a little breathing room at the top if it's touching the text above */
        margin-top: 20px !important;
    }

    /* 2. Force the slider to be a square */
    .collage-wrapper.single-image .sleek-slider,
    .collage-wrapper.single-image img-comparison-slider {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important; 
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. FIX THE CROPPING (This fixes the cut-off top) */
    .collage-wrapper.single-image img {
        width: 100% !important;
        height: 100% !important;
        
        /* Keep covering the area */
        object-fit: cover !important;
        
        /* VITAL CHANGE: Align image to the TOP so the roof isn't cut off */
        object-position: top center !important; 
        
        display: block !important;
    }
}
/* =========================================
   DIAGRAM SPECIFIC MOBILE FIX
   (Paste at the very bottom of style.css)
   ========================================= */
@media screen and (max-width: 900px) {

    /* 1. Target the Diagram Container specifically */
    .diagram-container {
        height: auto !important;
        min-height: auto !important;
        display: block !important;
        padding: 20px 0 !important;
    }

    /* 2. Override the "Cover" rule so we see the whole image */
    .diagram-container img {
        /* "contain" ensures the whole image is visible, never cropped */
        object-fit: contain !important; 
        
        /* Reset position to center */
        object-position: center !important; 
        
        /* Let the height adjust naturally to the width */
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        
        /* Remove any aspect-ratio forcing */
        aspect-ratio: auto !important;
    }
}