:root { 
    --bg-dark: #000; 
    --bg-green: #1d3d1b; 
    --btn-green: #135c13; 
    --text-light: #fff; 
    --text-gold: #c29b27;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

/* Snap Setup */
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
body { background: var(--bg-dark); color: var(--text-light); overflow-x: hidden; line-height: 1.5;}

h1, h2, .serif-text { font-family: Georgia, serif; }

/* Global Transitions */
button, .btn-green, .btn-gold, .btn-black { 
    border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; transition: all 0.4s ease-in-out; 
}
button:hover, .btn-green:hover, .btn-gold:hover, .btn-black:hover { opacity: 0.85; transform: translateY(-3px); }

/* =========================================
   CORE SECTION UNIFORMITY SETUP
   ========================================= */
section {
    scroll-snap-align: start; scroll-snap-stop: always; 
    height: 100dvh; 
    display: flex; flex-direction: column;
    justify-content: space-between; 
    align-items: center; 
    padding: 10dvh 5% 8dvh; 
    overflow: hidden; position: relative; 
}

section > h1, section > h2, .hero-headers, .process-desktop-title {
    margin: 0; text-align: center; flex-shrink: 0; line-height: 1.2;
}

.section-middle {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    width: 100%; max-width: 1100px; gap: 2.5dvh; 
}

.section-cta { 
    padding: 12px 30px; font-size: clamp(1rem, 3vw, 1.2rem); margin: 0; flex-shrink: 0;
}

/* =========================================
   INDIVIDUAL SECTION STYLING
   ========================================= */

/* Hero Section */
.hero { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.95) 100%), url('https://images.unsplash.com/photo-1555215695-3004980ad54e?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; }
.hero-top-nav { position: absolute; top: 5dvh; left: 0; width: 100%; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.logo-link { display: inline-block; }
.logo-img { width: 85px; height: auto; transition: transform 0.4s ease; } 
.logo-img:hover { transform: scale(1.05); }
.phone-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-gold); transition: color 0.3s; }
.phone-link:hover, .phone-link:hover .phone { color: #fff; }
.phone-icon { width: 28px; height: 28px; transition: transform 0.3s ease; }
.phone-link:hover .phone-icon { transform: scale(1.1) rotate(5deg); }
.phone { font-size: 1.6rem; font-weight: bold; letter-spacing: 1px; transition: color 0.3s;} 

.hero-headers { z-index: 10; position: relative; margin-top: 14dvh; display: flex; flex-direction: column; align-items: center; gap: 1dvh; }
.hero-company { color: var(--text-gold); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: clamp(0.85rem, 3vw, 1.2rem); text-shadow: 1px 1px 4px rgba(0,0,0,0.8); }
.hero-title { font-size: clamp(1.8rem, 6vw, 4rem); text-shadow: 2px 2px 6px rgba(0,0,0,0.9); margin: 0; }
.hero-center-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-top: 5dvh; width: 100%; z-index: 10; position: relative; gap: 1.5dvh; }
.hero-cta-adjust { margin-top: 2dvh !important; }
.satisfaction-text { font-weight: bold; color: var(--text-gold); font-size: clamp(1rem, 3.5vw, 1.3rem); letter-spacing: 1px; text-align: center;}
.hero .mascot-img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 55dvh; width: auto; max-height: 550px; drop-shadow: 3px 6px 10px rgba(0,0,0,0.6); z-index: 1; margin: 0 !important; }

/* About Us Section */
.about { background: #fff; color: #000; text-align: center; position: relative; }
.badge-img-top-left { position: absolute; top: 8dvh; left: 5%; width: 25vw; max-width: 100px; height: auto; z-index: 10; }
.gold-ribbon-extended { position: absolute; top: 0; right: 4.5%; background: linear-gradient(135deg, #fceabb 0%, #f8b500 25%, #b8860b 75%, #8b6508 100%); padding: 30px 8px 50px; width: 90px; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); font-family: 'Georgia', serif; font-weight: 900; font-size: 1.05rem; color: #1a1a1a; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; z-index: 10; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); filter: drop-shadow(-4px 6px 6px rgba(0,0,0,0.6)); }
.ribbon-smaller { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; display: inline-block; margin-top: 2px; }
.about h2 { font-size: clamp(2.2rem, 8vw, 3.8rem); margin: 0; }
.about-middle { max-width: 900px; margin-top: -1dvh;} 
.lead-text { font-size: clamp(1.2rem, 3.5vw, 1.6rem); font-weight: bold; color: #222;}
.about p { font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.5; color: #444;}
.trust-marks { display: flex; justify-content: center; gap: 15px; width: 100%; font-weight: bold; color: var(--btn-green); font-size: clamp(0.9rem, 3vw, 1.2rem); flex-wrap: wrap; margin-top: 1dvh; }

/* Dangers of Oxidized */
.oxidized { background: radial-gradient(circle at 80% 20%, #2a5228 0%, var(--bg-green) 50%, #0a1709 100%); }
.oxidized h2 { font-size: clamp(1.8rem, 5vw, 3.2rem); color: #fff;}
.oxidized-left h3 { color: var(--text-gold); font-size: clamp(1.3rem, 4vw, 1.9rem); margin-bottom: 1dvh; text-align: center;}
.oxidized-left p { font-size: clamp(1.05rem, 3.5vw, 1.4rem); line-height: 1.5; text-align: center; color: #ddd; max-width: 600px;}
.chart-image { width: 100%; max-width: 280px; height: auto; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.6); margin-top: 1dvh; margin-bottom: 3dvh; border: 1px solid #444; }

/* =========================================================================
   Our Process Section - CLEAN & SIMPLE (WHITE TEXT UPDATE)
   ========================================================================= */
.process { 
    background: linear-gradient(180deg, #d8ab3a 0%, #9e791b 100%); 
    text-align: center; 
}
.process-desktop-title { 
    font-size: clamp(1.8rem, 5vw, 3.2rem); 
    color: #fff; 
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15); 
}
.process-simple-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Default to 2x2 */
    gap: 3dvh 15px; 
    width: 100%; 
    max-width: 1050px;
}

/* Base Clean Step Styling */
.simple-step { 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* Soft white transparent circle for icons */
.simple-icon {
    background: rgba(255, 255, 255, 0.15); 
    width: 60px; height: 60px; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 5px;
}
.step-icon { width: 28px; height: 28px; stroke: #fff; } 

/* Elegant Typography */
.simple-step h3 { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(1.1rem, 3.5vw, 1.3rem); 
    color: #fff; 
    font-weight: 800; 
    letter-spacing: -0.5px;
    margin: 0;
}
.simple-step p { 
    font-size: clamp(0.9rem, 3vw, 1.05rem); 
    color: #fff; 
    line-height: 1.4; 
    margin: 0;
    max-width: 95%;
    opacity: 0.95;
}

/* Scroll Animation */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-animate.show {
    opacity: 1;
    transform: translateY(0);
}

/* Professional vs DIY */
.cta-black { background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.95) 100%), url('https://dl.dropboxusercontent.com/scl/fi/mummpwtfyy81pd3z46gsi/Gemini_Generated_Image_hrejx9hrejx9hrej.jpg?rlkey=hf75ki6d172bauqlybj5zb34h') left center/cover fixed no-repeat; text-align: center; color: #fff; }
.cta-black h2 { font-size: clamp(1.8rem, 5vw, 3.2rem); color: var(--text-gold);}
.diy-middle h3 { font-size: clamp(1.2rem, 4vw, 1.8rem); line-height: 1.4; max-width: 900px; color: #fff;}
.subtitle-text { font-size: clamp(1.05rem, 3.5vw, 1.3rem); color: #ccc; max-width: 800px; line-height: 1.5;}
.phone-large { font-size: clamp(2.5rem, 8vw, 4.5rem); color: var(--text-light); font-weight: bold; letter-spacing: 1px; margin: 1dvh 0;}
.small-text { font-size: clamp(0.85rem, 3vw, 1rem); color: #999; text-transform: uppercase; letter-spacing: 1px;}

/* Testimonials Section */
.testimonials { background-color: #590009; }
.testimonials h2 { font-size: clamp(1.8rem, 5vw, 3.2rem); letter-spacing: 1px; color: #fff; }
.reviews-middle { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.reviews-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; width: 100%; padding-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.reviews-slider::-webkit-scrollbar { display: none; }
.review-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 5%; }
.review-text { font-size: clamp(1.1rem, 4vw, 1.6rem); line-height: 1.6; color: #eee; font-style: italic; font-weight: 300; text-align: center; margin-bottom: 2dvh; }
.review-author { font-size: clamp(1rem, 3.5vw, 1.3rem); color: var(--text-gold); }
.swipe-hint { font-size: 0.85rem; color: #bbb; text-transform: uppercase; letter-spacing: 2px; margin-top: 2dvh; animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

/* Buttons Configuration */
.btn-green { background-color: var(--btn-green); color: white; border-radius: 8px; font-weight: bold; padding: 15px 30px;}
.btn-gold { background: linear-gradient(180deg, #d8ab3a 0%, #9e791b 100%); color: white; font-weight: bold; border-radius: 30px; border: 1px solid #ffd700; box-shadow: 0 4px 8px rgba(0,0,0,0.4);}
.btn-black { background: #0f172a; color: #fff; font-weight: bold; border-radius: 30px; border: 1px solid #000; box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
.btn-black:hover { background: #000; }

/* Footer */
.site-footer { scroll-snap-align: end; background-color: #050505; padding: 6dvh 5%; border-top: 1px solid #222; text-align: center;}
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 3dvh; max-width: 800px; margin: 0 auto;}
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; }
.footer-links a { color: #bbb; text-decoration: none; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s;}
.footer-links a:hover { color: var(--text-gold); }
.copyright { font-size: 0.8rem; color: #555;}

/* =========================================
   RESPONSIVE OVERRIDES
   ========================================= */
@media (max-width: 900px) {
    .hero-top-nav { top: 6dvh; } 
    .logo-img { width: 60px; } 
    .phone { font-size: 1.4rem; } 
    .phone-icon { width: 24px; height: 24px; } 
    .hero-headers { margin-top: 15dvh; }
    .hero-center-content { margin-top: 2dvh; } 
    .hero .mascot-img { height: 35dvh; max-height: 350px;} 

    /* Process Mobile Tweaks */
    .simple-icon { width: 45px; height: 45px; margin-bottom: 2px; }
    .step-icon { width: 22px; height: 22px; }
    .simple-step p { font-size: 0.85rem; width: 100%; line-height: 1.35; }
    .simple-step h3 { font-size: 1.05rem; }

    /* DIY Mobile BG */
    .cta-black { background-position: left center !important; background-attachment: scroll !important; }
}

@media (min-width: 769px) {
    .oxidized-middle { flex-direction: row; justify-content: center; gap: 50px;}
    .oxidized-left { text-align: left; }
    .oxidized-left p, .oxidized-left h3 { text-align: left; }
    
    /* DESKTOP PROCESS SPREAD */
    .process-simple-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
    .simple-icon { width: 70px; height: 70px; }
    .step-icon { width: 34px; height: 34px; }

    .chart-image { max-width: 320px; max-height: 220px; width: auto; margin: 0; object-fit: contain; }
    .hero .mascot-img { left: auto; transform: none; right: 10%; height: 65dvh; max-height: 700px; } 
    .hero-center-content, .hero-headers { text-align: left; align-items: flex-start; padding-left: 5%; width: 100%; }
    .gold-ribbon-extended { width: 125px; padding: 35px 12px 65px; font-size: 1.45rem; right: 9.5%; }
    .ribbon-smaller { font-size: 0.85rem; margin-top: 3px; }
    .badge-img-top-left { max-width: 140px; left: 10%; top: 6dvh; }
}