@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700;900&display=swap");

/* 1. Global Resets & Boldness Fix */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* This stops the main background from bouncing/stretching */
    background-color: #348cb2; /* Matches your mountain sky */
}

body, input, select, textarea {
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15pt;
    font-weight: 400; /* Increased from 300 to 400 so it's not "plain/thin" in Firefox */
    line-height: 1.6em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Adds subtle depth to text on images */
}

/* 2. Background & Wrapper Fixes for Firefox */
#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

#bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 6750px;
    height: 100%;
    background: url("images/bg.jpg") bottom left repeat-x;
    background-size: auto 100%;
    animation: bg 60s linear infinite;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("images/overlay-pattern.png"), url("images/overlay.svg");
    background-position: center;
    background-size: cover;
    opacity: 0;
    animation: overlay 1.5s 1.5s forwards;
    z-index: 0;
}

/* 3. Main Header Centering (Firefox Fix) */
#main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
}

#header {
    width: 90%;
    max-width: 800px;
    opacity: 0;
    animation: header 1s 2.25s forwards;
}

#header h1 { 
    font-size: 4.5em; 
    font-weight: 900; /* Keeps your main logo thick and bold */
    line-height: 1.1em; 
    letter-spacing: -1px;
    margin-bottom: 0.1em;
    text-transform: none;
}
#header p { 
    font-size: 1.1em;
    font-weight: 700; /* Makes "General Contractor" stand out more */
    letter-spacing: 3px; 
    text-transform: uppercase; 
    margin-bottom: 2em;
    opacity: 0.9;
}

/* 4. Navigation & Icon Fixes */
#header nav ul { 
    list-style: none; 
    padding: 0; 
    display: flex; 
    justify-content: center; 
    gap: 25px; 
    margin-top: 10px;
}
#header nav li { 
    opacity: 0; 
    animation: nav-icons 0.5s ease-in-out forwards; 
}

/* Fix Icon Circles for Firefox */
#header nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff !important;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#header nav a:before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: solid 1px rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    height: 2.8em;
    width: 2.8em;
    font-size: 1.6em;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    font-family: 'Font Awesome 5 Brands', 'Font Awesome 5 Free', 'Font Awesome 6 Brands', sans-serif;
    font-weight: 900;
}

/* Specific icon codes if FontAwesome is struggling in Firefox */
.icon.fa-facebook-f:before, 
#header nav a[href*="facebook"]:before { 
    content: "\f39e" !important; 
}
.icon.fa-envelope:before, 
#header nav a[href*="mailto"]:before { 
    content: "\f0e0" !important; 
}

#header nav a:hover:before { 
    background: rgba(255, 255, 255, 0.2); 
    border-color: #fff;
    transform: scale(1.1);
}
#header nav a {
    border-bottom: none !important;
}
/* 5. POPUP PANELS (Same as before, very stable) */
.panel-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Use height instead of 100vh to avoid Brave bar issues */
    background: rgba(255, 255, 255, 0.98);
    transform: translateY(100%);
    transition: transform 400ms ease-out;
    z-index: 9999;
    overflow-y: auto; /* Allows actual text scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for iPhone/Samsung */
    display: block; /* Better for mobile browser engines */
}

.panel-popup.open {
    transform: translateY(0);
    pointer-events: auto;
}

panel-content {
   padding: 100px 25px 80px 25px; /* Added extra bottom padding */
    color: #222;
    max-width: 600px; /* Narrower for better mobile reading */
    margin: 0 auto;
    min-height: 101%; /* Forces the browser to recognize it as a scrollable area */
}

.panel-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background: #e23b3b;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
}
.panel-close:after { content: '✕'; font-size: 22px; font-weight: bold; }

/* 6. Animations */
@keyframes wrapper { from { opacity: 0; } to { opacity: 1; } }
@keyframes bg { from { transform: translateX(0); } to { transform: translateX(-2250px); } }
@keyframes header { from { transform: translateY(1em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes nav-icons { from { transform: translateY(1em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* 7. Mobile Adjustments */
@media screen and (max-width